/* /Components/Layout/MainLayout.razor.rz.scp.css */ #blazor-error-ui[b-adk9hby4lz] { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss[b-adk9hby4lz] { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } /* /Components/Layout/SiteHeader.razor.rz.scp.css */ /* ========================================================= Shared site header — mirrors the homepage hero topbar with sticky positioning + active nav state. Uses the same hero__* class names so the JS theme/mode pickers work without changes (they query by data- attrs). ========================================================= */ /* Theme tokens come from — see wwwroot/app.css */ .site-header[b-cw1b6i6h44] { position: sticky; top: 0; z-index: 100; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; padding: clamp(0.8rem, 1.6vw, 1.2rem) clamp(1.25rem, 3.2vw, 2.75rem); background: rgba(11, 11, 13, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--bone-faint); font-family: var(--font-mono); font-size: 0.86rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-dim); } /* --- logo ---------------------------------------------------------- */ .site-header[b-cw1b6i6h44] .hero__wordmark { display: inline-flex; align-items: center; text-decoration: none; } .site-header[b-cw1b6i6h44] .hero__wordmark-img { height: clamp(24px, 2.2vw, 34px); width: auto; display: block; filter: brightness(0) invert(1); opacity: 0.92; transition: opacity 0.3s ease; } .site-header[b-cw1b6i6h44] .hero__wordmark:hover .hero__wordmark-img { opacity: 1; } /* --- nav ----------------------------------------------------------- */ .site-header[b-cw1b6i6h44] .hero__nav { justify-self: center; display: flex; gap: 2.1rem; position: relative; } .site-header[b-cw1b6i6h44] .hero__nav a { color: var(--bone-dim); text-decoration: none; position: relative; padding: 0.25rem 0; transition: color 0.3s ease; } .site-header[b-cw1b6i6h44] .hero__nav a:hover, .site-header[b-cw1b6i6h44] .hero__nav a:focus-visible { color: var(--bone); outline: none; } .site-header[b-cw1b6i6h44] .hero__nav a.is-active { color: var(--bone); } /* --- magic-line underline ----------------------------------------- A single underline element on the nav, positioned via CSS custom properties set by the small initMagicLine() routine in hero-neural.js. The JS tracks hover + active and writes --nav-underline-left / --nav-underline-width on .hero__nav; the transitions do the sliding. Works in every browser. */ .site-header[b-cw1b6i6h44] .hero__nav::after { content: ""; position: absolute; bottom: -2px; left: var(--nav-underline-left, 0); width: var(--nav-underline-width, 0); height: 1.5px; background: var(--signal); opacity: var(--nav-underline-opacity, 0); pointer-events: none; transition: left 0.4s cubic-bezier(0.7, 0, 0.3, 1), width 0.4s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.2s ease; } /* --- meta (right-side controls) ------------------------------------ */ .site-header[b-cw1b6i6h44] .hero__meta { justify-self: end; display: inline-flex; align-items: center; gap: 0.55rem; white-space: nowrap; color: var(--bone); } .site-header[b-cw1b6i6h44] .hero__meta-divider { color: var(--bone-faint); margin: 0 0.15rem; } /* --- mode picker --------------------------------------------------- */ .site-header[b-cw1b6i6h44] .hero__modes { display: inline-flex; gap: 0.35rem; align-items: center; margin-right: 0.15rem; } .site-header[b-cw1b6i6h44] .hero__mode { width: 22px; height: 22px; padding: 3px; border: none; border-radius: 4px; background: transparent; color: var(--bone-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .site-header[b-cw1b6i6h44] .hero__mode svg { width: 100%; height: 100%; } .site-header[b-cw1b6i6h44] .hero__mode:hover { color: var(--bone); transform: translateY(-1px); } /* --- brightness picker --------------------------------------------- */ .site-header[b-cw1b6i6h44] .hero__brightness { display: inline-flex; gap: 0.35rem; align-items: center; } .site-header[b-cw1b6i6h44] .hero__bright-btn { width: 22px; height: 22px; padding: 3px; border: none; border-radius: 4px; background: transparent; color: var(--bone-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .site-header[b-cw1b6i6h44] .hero__bright-btn svg { width: 100%; height: 100%; } .site-header[b-cw1b6i6h44] .hero__bright-btn:hover { color: var(--bone); transform: translateY(-1px); } /* active brightness = signal ring */ html[data-brightness="dark"] .site-header[b-cw1b6i6h44] .hero__bright-btn.is-dark, html[data-brightness="light"] .site-header[b-cw1b6i6h44] .hero__bright-btn.is-light, html:not([data-brightness="light"]) .site-header[b-cw1b6i6h44] .hero__bright-btn.is-dark { color: var(--signal); box-shadow: 0 0 0 1.2px var(--signal), 0 0 8px 0 color-mix(in srgb, var(--signal) 25%, transparent); } /* --- theme dots ---------------------------------------------------- */ .site-header[b-cw1b6i6h44] .hero__themes { display: inline-flex; gap: 0.4rem; align-items: center; } .site-header[b-cw1b6i6h44] .hero__theme { width: 15px; height: 15px; padding: 0; border: none; border-radius: 999px; cursor: pointer; background: transparent; position: relative; transition: transform 0.25s ease; } .site-header[b-cw1b6i6h44] .hero__theme::before { content: ""; position: absolute; inset: 1px; border-radius: 999px; background: currentColor; } /* Swatch dots — each shows its theme's signal colour so the user can preview before picking. Acid has a brightness-dependent tone: chartreuse on dark, forest lime on light (for contrast). */ .site-header[b-cw1b6i6h44] .hero__theme.is-acid { color: #D8FF3F; } .site-header[b-cw1b6i6h44] .hero__theme.is-azure { color: #2097D0; } .site-header[b-cw1b6i6h44] .hero__theme.is-pink { color: #FF4FA2; } html[data-brightness="light"] .site-header[b-cw1b6i6h44] .hero__theme.is-acid { color: #1A8B4A; } .site-header[b-cw1b6i6h44] .hero__theme:hover { transform: scale(1.15); } /* active theme = signal ring around the dot */ html[data-theme="acid"] .site-header[b-cw1b6i6h44] .hero__theme.is-acid, html[data-theme="azure"] .site-header[b-cw1b6i6h44] .hero__theme.is-azure, html[data-theme="pink"] .site-header[b-cw1b6i6h44] .hero__theme.is-pink, html:not([data-theme="azure"]):not([data-theme="pink"]) .site-header[b-cw1b6i6h44] .hero__theme.is-acid { box-shadow: 0 0 0 1.5px var(--signal), 0 0 8px 0 color-mix(in srgb, var(--signal) 25%, transparent); } /* --- mobile breakpoint adjustments to .site-header ---------------- The burger / drawer pattern itself lives in app.css so the same classes work for both this component and Home's standalone hero topbar. Here we only adjust the .site-header grid and hide the inline desktop nav at the mobile breakpoint. */ @media (max-width: 760px) { .site-header[b-cw1b6i6h44] { grid-template-columns: auto 1fr auto; gap: 0.5rem; } .site-header[b-cw1b6i6h44] > .hero__nav { display: none; } /* Inline pickers move into the drawer on mobile */ .site-header[b-cw1b6i6h44] > .hero__meta { display: none; } } /* /Components/PageContainer.razor.rz.scp.css */ /* ========================================================= Page width container. One place that sets the outer max-width + horizontal padding for every routed page. Inner sections fill the container; only prose blocks (intros, leads) set their own narrower max-width for reading comfort. ========================================================= */ .page-container[b-h37iy1da4b] { width: 100%; max-width: 64rem; margin-inline: auto; /* Horizontal padding is fluid: tight on phones, generous on desktops without ever crowding the content edges. */ padding-inline: clamp(1.25rem, 4vw, 3rem); /* Default to no vertical padding — pages opt in via the Vertical parameter (which adds the modifier below). */ padding-block: 0; } .page-container--padded[b-h37iy1da4b] { padding-block: clamp(3rem, 8vh, 6rem); } /* /Components/Pages/Blog.razor.rz.scp.css */ /* ========================================================= Blog — list of posts pulled live from the HAVIT Knowledge Base Theme tokens come from — see wwwroot/app.css ========================================================= */ /* Page width + horizontal padding live on . This section just sets the dark theme + vertical rhythm. */ .blog[b-whewgt678r] { position: relative; color: var(--bone); font-family: var(--font-body); -webkit-font-smoothing: antialiased; min-height: calc(100svh - var(--site-header-h, 0px)); padding-block: clamp(2.5rem, 5vh, 4rem) clamp(3rem, 6vh, 5rem); display: flex; flex-direction: column; gap: clamp(2rem, 4vh, 3rem); } /* Grain overlay rule lives in app.css (used via ). Type + colour for eyebrow/title/lead come from utility classes. */ .blog__header[b-whewgt678r] { position: relative; z-index: 1; max-width: 44rem; display: grid; gap: 0.75rem; padding-top: clamp(1rem, 4vh, 3rem); } .blog__title[b-whewgt678r] { margin: 0; font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1; } .blog__lead[b-whewgt678r] { margin: 0; font-size: clamp(0.98rem, 1.15vw, 1.1rem); line-height: 1.6; max-width: 38rem; } .blog__lead[b-whewgt678r] a { color: var(--signal); text-decoration: underline; text-underline-offset: 2px; } /* --- grid -------------------------------------------------------- */ .blog__grid[b-whewgt678r] { position: relative; z-index: 1; display: grid; /* Three columns on wide screens, auto-collapsing to 2 then 1 as the viewport narrows. minmax floor keeps cards readable. */ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); } @media (max-width: 1024px) { .blog__grid[b-whewgt678r] { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .blog__grid[b-whewgt678r] { grid-template-columns: 1fr; } } /* --- post card --------------------------------------------------- */ .post-card[b-whewgt678r] { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: rgba(var(--bone-rgb), 0.02); border: 1px solid var(--bone-faint); border-radius: 12px; overflow: hidden; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease; } .post-card:hover[b-whewgt678r] { transform: translateY(-3px); border-color: rgba(var(--signal-rgb), 0.3); box-shadow: 0 12px 32px -16px rgba(var(--signal-rgb), 0.2); } /* Image sits on top of every card; body flows below. Fixed 16:9 frame so the grid lines up neatly across the row. */ .post-card__media[b-whewgt678r] { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: rgba(var(--bone-rgb), 0.04); border-bottom: 1px solid var(--bone-faint); } .post-card__media img[b-whewgt678r] { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); } .post-card:hover .post-card__media img[b-whewgt678r] { transform: scale(1.03); } /* Placeholder for posts that have neither a featured image nor a YouTube embed — a quiet on-brand mark on the same matte surface. */ .post-card__media--placeholder[b-whewgt678r] { display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 30%, rgba(var(--signal-rgb), 0.08), transparent 60%), rgba(var(--bone-rgb), 0.04); } .post-card__placeholder-mark[b-whewgt678r] { display: flex; width: 30%; max-width: 90px; color: rgba(var(--bone-rgb), 0.22); transition: color 0.4s ease; } .post-card__placeholder-mark svg[b-whewgt678r] { width: 100%; height: auto; fill: currentColor; } .post-card:hover .post-card__placeholder-mark[b-whewgt678r] { color: rgba(var(--signal-rgb), 0.55); } /* Play overlay for posts that embed a YouTube video */ .post-card__play[b-whewgt678r] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; color: #fff; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); } .post-card__play svg[b-whewgt678r] { width: clamp(52px, 7vw, 72px); height: clamp(52px, 7vw, 72px); filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45)); } .post-card:hover .post-card__play[b-whewgt678r] { transform: scale(1.08); } .post-card__body[b-whewgt678r] { flex: 1; display: flex; flex-direction: column; gap: 0.8rem; padding: clamp(1.2rem, 2vw, 1.75rem); } .post-card__meta[b-whewgt678r] { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-dim); } .post-card__divider[b-whewgt678r] { color: var(--bone-faint); } /* Avatar + name travel together as a single unit after the date, so the eye reads "date · [photo] name" left-to-right. */ .post-card__by[b-whewgt678r] { display: inline-flex; align-items: center; gap: 0.4rem; } .post-card__avatar[b-whewgt678r] { flex-shrink: 0; width: 1.4rem; height: 1.4rem; border-radius: 50%; object-fit: cover; background: var(--bone-faint); border: 1px solid var(--bone-faint); } /* Initials fallback when a matched member has no photo — styled like a tiny chip so it sits next to the date metadata without pulling focus. */ .post-card__avatar--initials[b-whewgt678r] { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.04em; color: var(--bone); text-transform: uppercase; } .post-card__title[b-whewgt678r] { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(0.95rem, 1.05vw, 1.1rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--bone); /* clamp at 2 lines so cards align height-wise */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .post-card__excerpt[b-whewgt678r] { font-size: clamp(0.92rem, 1.05vw, 1rem); line-height: 1.55; color: var(--bone-dim); /* strip WP paragraph margins, clamp to 2 lines */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .post-card__excerpt[b-whewgt678r] p { margin: 0; } .post-card__read[b-whewgt678r] { margin-top: auto; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-dim); transition: color 0.25s ease; } .post-card:hover .post-card__read[b-whewgt678r] { color: var(--signal); } /* --- "all posts" link ------------------------------------------- */ .blog__all[b-whewgt678r] { position: relative; z-index: 1; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-dim); text-decoration: none; border: 1px solid var(--bone-faint); padding: 0.7rem 1.2rem; border-radius: 999px; transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease; } .blog__all:hover[b-whewgt678r] { color: var(--signal); border-color: rgba(var(--signal-rgb), 0.45); transform: translateY(-1px); } /* --- empty / failed state --------------------------------------- */ .blog__empty[b-whewgt678r] { position: relative; z-index: 1; max-width: 30rem; text-align: center; color: var(--bone-dim); display: flex; flex-direction: column; gap: 1rem; align-items: center; padding: clamp(2rem, 4vw, 3rem); border: 1px dashed var(--bone-faint); border-radius: 12px; } .blog__empty p[b-whewgt678r] { margin: 0; } .blog__empty-link[b-whewgt678r] { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); text-decoration: none; } @media (prefers-reduced-motion: reduce) { .post-card[b-whewgt678r], .post-card__media img[b-whewgt678r], .blog__all[b-whewgt678r], .post-card__read[b-whewgt678r] { transition: none; } } /* /Components/Pages/Careers.razor.rz.scp.css */ /* ========================================================= Careers — single long-form page for one open role. Theme tokens come from — see wwwroot/app.css ========================================================= */ /* Page width + horizontal padding live on . This section just sets the dark theme + vertical rhythm. */ .careers[b-ft3zhq6jet] { position: relative; color: var(--bone); font-family: var(--font-body); -webkit-font-smoothing: antialiased; min-height: calc(100svh - var(--site-header-h, 0px)); padding-block: clamp(2.5rem, 6vh, 4.5rem) clamp(3rem, 6vh, 5rem); display: flex; flex-direction: column; gap: clamp(3rem, 6vh, 5rem); } /* Grain rule lives in app.css. Type + colour from utility classes. */ .careers__hero[b-ft3zhq6jet] { position: relative; z-index: 1; max-width: 48rem; width: 100%; display: grid; gap: 1rem; padding-top: clamp(1rem, 4vh, 3rem); } .careers__headline[b-ft3zhq6jet] { margin: 0; font-size: clamp(2.4rem, 6vw, 4.5rem); line-height: 1; /* This headline tightens beyond the standard -0.02em from .u-track-tight — overrides via specificity (component-scoped attribute selector beats the single utility class). */ letter-spacing: -0.025em; max-width: 22ch; } .careers__headline em[b-ft3zhq6jet] { font-style: normal; color: var(--signal); position: relative; padding: 0 0.15em; margin: 0 0.2em; } .careers__headline em[b-ft3zhq6jet]::before { content: ""; position: absolute; inset: 0.05em 0 -0.05em 0; background: color-mix(in srgb, var(--signal) 15%, transparent); border-radius: 4px; z-index: -1; } .careers__lead[b-ft3zhq6jet] { margin: 0; font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.55; max-width: 42rem; } /* --- role --------------------------------------------------------- */ .role[b-ft3zhq6jet] { position: relative; z-index: 1; width: 100%; max-width: 48rem; display: flex; flex-direction: column; gap: clamp(2rem, 4vh, 3.5rem); } .role__head[b-ft3zhq6jet] { display: flex; flex-direction: column; gap: 0.75rem; padding-top: clamp(1rem, 3vh, 2rem); border-top: 1px solid var(--bone-faint); padding-block-start: clamp(1.75rem, 4vh, 2.5rem); } .role__tag[b-ft3zhq6jet] { align-self: flex-start; /* type comes from utilities; .role__tag carries chip styling */ font-size: 0.68rem; letter-spacing: 0.2em; padding: 0.3rem 0.7rem; border: 1px solid color-mix(in srgb, var(--signal) 40%, transparent); border-radius: 3px; background: color-mix(in srgb, var(--signal) 6%, transparent); } .role__title[b-ft3zhq6jet] { margin: 0; font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1; } .role__subtitle[b-ft3zhq6jet] { margin: 0; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.55; max-width: 36rem; } .role__meta[b-ft3zhq6jet] { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-dim); } .role__meta-divider[b-ft3zhq6jet] { color: var(--bone-faint); } /* --- sections ---------------------------------------------------- */ .role__section[b-ft3zhq6jet] { display: flex; flex-direction: column; gap: 0.9rem; } .role__section-title[b-ft3zhq6jet] { margin: 0; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-dim); } .role__section p[b-ft3zhq6jet] { margin: 0; font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.65; color: var(--bone); } .role__section p strong[b-ft3zhq6jet] { color: var(--bone); font-weight: 700; } .role__section em[b-ft3zhq6jet] { font-style: italic; color: var(--signal); } .role__list[b-ft3zhq6jet] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.7rem; } .role__list li[b-ft3zhq6jet] { position: relative; padding-left: 1.3rem; font-size: clamp(1rem, 1.1vw, 1.08rem); line-height: 1.6; color: var(--bone); } .role__list li[b-ft3zhq6jet]::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: color-mix(in srgb, var(--signal) 50%, transparent); } .role__list strong[b-ft3zhq6jet] { color: var(--bone); font-weight: 700; } .role__list em[b-ft3zhq6jet] { font-style: italic; color: var(--signal); } /* --- apply block ------------------------------------------------- */ .role__apply[b-ft3zhq6jet] { display: flex; flex-direction: column; gap: 1.25rem; padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--bone-faint); border-radius: 12px; background: radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--signal) 10%, transparent) 0%, transparent 60%), rgba(var(--bone-rgb), 0.02); } .role__apply p[b-ft3zhq6jet] { margin: 0; font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.55; color: var(--bone-dim); } .role__apply-actions[b-ft3zhq6jet] { display: flex; flex-wrap: wrap; gap: 0.75rem; } .role__cta[b-ft3zhq6jet] { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.3rem; border: 1px solid var(--bone-faint); border-radius: 999px; color: var(--bone); text-decoration: none; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; } .role__cta:hover[b-ft3zhq6jet] { border-color: rgba(var(--signal-rgb), 0.45); background: color-mix(in srgb, var(--signal) 6%, transparent); transform: translateY(-1px); } .role__cta.is-primary[b-ft3zhq6jet] { color: var(--ink); background: var(--signal); border-color: var(--signal); } .role__cta.is-primary:hover[b-ft3zhq6jet] { background: color-mix(in srgb, var(--signal) 85%, white); transform: translateY(-2px); } .role__cta-arrow[b-ft3zhq6jet] { transition: transform 0.25s ease; } .role__cta:hover .role__cta-arrow[b-ft3zhq6jet] { transform: translateX(3px); } .role__fineprint[b-ft3zhq6jet] { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--bone-dim); opacity: 0.7; } /* /Components/Pages/CaseStudyDetail.razor.rz.scp.css */ /* ========================================================= Case study detail — /services/{serviceSlug}/cases/{caseSlug} Theme tokens come from — see wwwroot/app.css ========================================================= */ /* Page width + horizontal padding live on . This section just sets the dark theme + vertical rhythm. The 56rem max-widths on inner blocks below are PROSE constraints (narrower than the container) — they stay. */ .case-detail[b-ubecuyazft] { position: relative; color: var(--bone); font-family: var(--font-body); -webkit-font-smoothing: antialiased; min-height: calc(100svh - var(--site-header-h, 0px)); padding-block: clamp(2.5rem, 5vh, 4rem) clamp(3rem, 6vh, 5rem); display: flex; flex-direction: column; align-items: center; gap: clamp(2.5rem, 5vh, 4rem); } /* Grain rule lives in app.css. Type/colour for back-link, eyebrow, title, customer come from utility classes. */ .case-detail__back[b-ubecuyazft] { position: relative; z-index: 1; align-self: flex-start; width: 100%; max-width: 56rem; margin: 0 auto; text-decoration: none; transition: color 0.3s ease; } .case-detail__back:hover[b-ubecuyazft] { color: var(--accent, var(--signal)); } .case-detail__hero[b-ubecuyazft] { position: relative; z-index: 1; width: 100%; max-width: 56rem; display: flex; flex-direction: column; gap: 0.9rem; } .case-detail__title[b-ubecuyazft] { margin: 0; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.05; } .case-detail__customer[b-ubecuyazft] { margin: 0; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.55; max-width: 42rem; } /* --- body -------------------------------------------------------- */ .case-detail__body[b-ubecuyazft] { position: relative; z-index: 1; width: 100%; max-width: 56rem; display: flex; flex-direction: column; gap: clamp(1.75rem, 3.5vh, 2.75rem); } .case-block[b-ubecuyazft] { display: flex; flex-direction: column; gap: 0.85rem; padding-top: clamp(1rem, 2.5vh, 1.75rem); border-top: 1px solid var(--bone-faint); } .case-block__title[b-ubecuyazft] { margin: 0; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-dim); } .case-block p[b-ubecuyazft] { margin: 0; font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.65; color: var(--bone); } .case-block[b-ubecuyazft] b { color: var(--bone); font-weight: 700; } .case-block[b-ubecuyazft] em { color: var(--accent, var(--signal)); font-style: italic; } /* --- chip list (Stack) ------------------------------------------ */ .case-detail__chiplist[b-ubecuyazft] { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; } .case-detail__chip[b-ubecuyazft] { display: inline-flex; align-items: center; padding: 0.4rem 0.75rem; font-size: clamp(0.85rem, 0.95vw, 0.92rem); line-height: 1.25; color: var(--bone); border: 1px solid color-mix(in srgb, var(--accent, var(--signal)) 30%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--accent, var(--signal)) 5%, transparent); } /* --- bullets (Guardrails, etc) ---------------------------------- */ .case-detail__bullets[b-ubecuyazft] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.6rem; } .case-detail__bullets li[b-ubecuyazft] { position: relative; padding-left: 1.1rem; font-size: clamp(0.95rem, 1.1vw, 1.05rem); line-height: 1.55; color: var(--bone); } .case-detail__bullets li[b-ubecuyazft]::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: color-mix(in srgb, var(--accent, var(--signal)) 55%, transparent); } /* --- timeline --------------------------------------------------- */ .case-detail__timeline[b-ubecuyazft] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0; } .case-detail__phase[b-ubecuyazft] { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1.25rem; padding-block: clamp(0.85rem, 1.75vh, 1.2rem); border-bottom: 1px dashed var(--bone-faint); } .case-detail__phase:last-child[b-ubecuyazft] { border-bottom: none; } .case-detail__phase-weeks[b-ubecuyazft] { grid-row: 1 / 3; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; color: var(--accent, var(--signal)); min-width: 5.5rem; padding-top: 0.15rem; } .case-detail__phase-title[b-ubecuyazft] { font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 1.2vw, 1.15rem); color: var(--bone); line-height: 1.3; } .case-detail__phase-desc[b-ubecuyazft] { margin: 0; font-size: clamp(0.92rem, 1.05vw, 1rem); line-height: 1.55; color: var(--bone-dim); grid-column: 2; } /* --- outcome block ---------------------------------------------- */ .case-block--outcome[b-ubecuyazft] { padding: clamp(1.25rem, 2.5vw, 1.75rem); border: 1px solid color-mix(in srgb, var(--accent, var(--signal)) 35%, transparent); border-radius: 12px; background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--accent, var(--signal)) 12%, transparent) 0%, transparent 55%), rgba(var(--bone-rgb), 0.02); } .case-block--outcome .case-block__title[b-ubecuyazft] { color: var(--accent, var(--signal)); } .case-detail__punchline[b-ubecuyazft] { margin: 0; font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.5; color: var(--bone); font-weight: 500; } .case-detail__metrics[b-ubecuyazft] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.55rem; padding-top: 0.5rem; border-top: 1px solid var(--bone-faint); } .case-detail__metrics li[b-ubecuyazft] { position: relative; padding-left: 1.3rem; font-size: clamp(0.95rem, 1.1vw, 1.05rem); line-height: 1.5; color: var(--bone); } .case-detail__metrics li[b-ubecuyazft]::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent, var(--signal)); font-weight: 700; } /* --- CTA --------------------------------------------------------- */ .case-detail__cta[b-ubecuyazft] { position: relative; z-index: 1; width: 100%; max-width: 56rem; display: flex; flex-direction: column; gap: clamp(1rem, 2vh, 1.5rem); align-items: flex-start; padding: clamp(1.75rem, 3.5vw, 2.5rem); border: 1px solid var(--bone-faint); border-radius: 14px; background: radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--accent, var(--signal)) 12%, transparent) 0%, transparent 60%), rgba(var(--bone-rgb), 0.02); } .case-detail__cta-heading[b-ubecuyazft] { margin: 0 0 0.35rem; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.1; letter-spacing: -0.01em; } .case-detail__cta-lead[b-ubecuyazft] { margin: 0; color: var(--bone-dim); font-size: 0.95rem; line-height: 1.5; } .case-detail__cta-actions[b-ubecuyazft] { display: flex; flex-wrap: wrap; gap: 0.6rem; } .case-detail__btn[b-ubecuyazft] { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.2rem; border: 1px solid var(--bone-faint); border-radius: 999px; color: var(--bone); text-decoration: none; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; } .case-detail__btn:hover[b-ubecuyazft] { border-color: var(--accent, var(--signal)); background: color-mix(in srgb, var(--accent, var(--signal)) 7%, transparent); transform: translateY(-1px); } .case-detail__btn.is-primary[b-ubecuyazft] { color: var(--ink); background: var(--accent, var(--signal)); border-color: var(--accent, var(--signal)); } .case-detail__btn.is-primary:hover[b-ubecuyazft] { background: color-mix(in srgb, var(--accent, var(--signal)) 85%, white); transform: translateY(-2px); } .case-detail__btn-arrow[b-ubecuyazft] { transition: transform 0.25s ease; } .case-detail__btn:hover .case-detail__btn-arrow[b-ubecuyazft] { transform: translateX(3px); } /* --- 404 --------------------------------------------------------- */ .case-detail--empty[b-ubecuyazft] { justify-content: center; text-align: center; } .case-detail__empty[b-ubecuyazft] { display: flex; flex-direction: column; gap: 1rem; align-items: center; max-width: 30rem; position: relative; z-index: 1; } .case-detail__empty h1[b-ubecuyazft] { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.15; } .case-detail__empty p[b-ubecuyazft] { margin: 0; color: var(--bone-dim); } /* --- mobile ------------------------------------------------------ */ @media (max-width: 720px) { /* .case-detail__cta is already a vertical flex stack — no narrow-viewport override needed here. */ .case-detail__phase[b-ubecuyazft] { grid-template-columns: 1fr; } .case-detail__phase-weeks[b-ubecuyazft] { grid-row: auto; min-width: 0; } .case-detail__phase-desc[b-ubecuyazft] { grid-column: auto; } } /* /Components/Pages/Contact.razor.rz.scp.css */ /* ========================================================= Contact — short page with company address, registration, data box, and an embedded map. Theme tokens come from — see wwwroot/app.css ========================================================= */ .contact[b-jenys3wqih] { position: relative; color: var(--bone); font-family: var(--font-body); -webkit-font-smoothing: antialiased; min-height: calc(100svh - var(--site-header-h, 0px)); padding-block: clamp(2.5rem, 6vh, 4.5rem) clamp(3rem, 6vh, 5rem); display: flex; flex-direction: column; gap: clamp(2.5rem, 5vh, 4rem); } .contact__hero[b-jenys3wqih] { position: relative; z-index: 1; max-width: 48rem; width: 100%; display: grid; gap: 1rem; padding-top: clamp(1rem, 4vh, 3rem); } .contact__headline[b-jenys3wqih] { margin: 0; font-size: clamp(2.4rem, 6vw, 4.5rem); line-height: 1; letter-spacing: -0.025em; max-width: 22ch; } .contact__headline em[b-jenys3wqih] { font-style: normal; color: var(--signal); position: relative; padding: 0 0.15em; margin: 0 0.05em; } .contact__headline em[b-jenys3wqih]::before { content: ""; position: absolute; inset: 0.05em 0 -0.05em 0; background: color-mix(in srgb, var(--signal) 15%, transparent); border-radius: 4px; z-index: -1; } .contact__lead[b-jenys3wqih] { margin: 0; font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.55; max-width: 42rem; } /* --- body -------------------------------------------------------- */ .contact__body[b-jenys3wqih] { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; gap: clamp(2rem, 4vh, 3rem); } .contact__primary[b-jenys3wqih] { display: flex; flex-wrap: wrap; gap: 0.75rem; } .contact__cta[b-jenys3wqih] { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.3rem; border: 1px solid var(--bone-faint); border-radius: 999px; color: var(--bone); text-decoration: none; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; } .contact__cta:hover[b-jenys3wqih], .contact__cta:focus-visible[b-jenys3wqih] { border-color: rgba(var(--signal-rgb), 0.45); background: color-mix(in srgb, var(--signal) 6%, transparent); transform: translateY(-1px); outline: none; } .contact__cta.is-primary[b-jenys3wqih] { color: var(--ink); background: var(--signal); border-color: var(--signal); } .contact__cta.is-primary:hover[b-jenys3wqih], .contact__cta.is-primary:focus-visible[b-jenys3wqih] { background: color-mix(in srgb, var(--signal) 85%, white); transform: translateY(-2px); outline: none; } .contact__cta-arrow[b-jenys3wqih] { transition: transform 0.25s ease; } .contact__cta:hover .contact__cta-arrow[b-jenys3wqih], .contact__cta:focus-visible .contact__cta-arrow[b-jenys3wqih] { transform: translateX(3px); } /* --- grid of cards ----------------------------------------------- */ .contact__grid[b-jenys3wqih] { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); } .contact__card[b-jenys3wqih] { display: flex; flex-direction: column; gap: 0.9rem; padding: clamp(1.25rem, 2.5vw, 1.75rem); border: 1px solid var(--bone-faint); border-radius: 12px; background: rgba(var(--bone-rgb), 0.02); } .contact__card-title[b-jenys3wqih] { margin: 0; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-dim); } .contact__address[b-jenys3wqih] { margin: 0; font-style: normal; font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.65; color: var(--bone); } .contact__address strong[b-jenys3wqih] { color: var(--bone); font-weight: 700; } .contact__map-link[b-jenys3wqih] { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--bone-dim); text-decoration: none; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; transition: color 0.25s ease; } .contact__map-link:hover[b-jenys3wqih], .contact__map-link:focus-visible[b-jenys3wqih] { color: var(--signal); outline: none; } .contact__map-link:hover .contact__cta-arrow[b-jenys3wqih], .contact__map-link:focus-visible .contact__cta-arrow[b-jenys3wqih] { transform: translateX(2px); } /* --- definition list inside cards -------------------------------- */ .contact__dl[b-jenys3wqih] { margin: 0; display: grid; gap: 0.55rem; font-size: clamp(0.95rem, 1.05vw, 1.05rem); line-height: 1.5; } .contact__dl > div[b-jenys3wqih] { display: grid; grid-template-columns: 6rem 1fr; gap: 0.75rem; align-items: baseline; } .contact__dl dt[b-jenys3wqih] { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone-dim); } .contact__dl dd[b-jenys3wqih] { margin: 0; color: var(--bone); } .contact__databox[b-jenys3wqih] { margin: 0; font-size: clamp(1rem, 1.15vw, 1.1rem); color: var(--bone); } .contact__databox code[b-jenys3wqih] { font-family: var(--font-mono); font-size: 0.95em; padding: 0.2em 0.55em; border: 1px solid var(--bone-faint); border-radius: 4px; background: color-mix(in srgb, var(--signal) 6%, transparent); color: var(--bone); letter-spacing: 0.1em; } /* --- map --------------------------------------------------------- */ .contact__map[b-jenys3wqih] { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--bone-faint); border-radius: 12px; background: rgba(var(--bone-rgb), 0.02); } .contact__map iframe[b-jenys3wqih] { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.3) contrast(0.95); } /* /Components/Pages/Home.razor.rz.scp.css */ /* ========================================================= HAVIT 2026 — Hero section Editorial AI Lab aesthetic. ========================================================= */ /* Colour + typography tokens live on (see wwwroot/app.css). Only hero-specific tokens are defined here. */ .hero[b-l7zeafblof] { --ink-2: #101014; --graphite: #1A1A1E; --signal-deep: #B6E500; --haze: rgba(var(--signal-rgb), 0.10); } /* Light mode — hero-specific atmosphere (colour tokens already flipped at html) */ html[data-brightness="light"] .hero[b-l7zeafblof] { --ink-2: #F5F5F5; --graphite: #EFEFEF; background: radial-gradient(120% 80% at 85% 15%, #FFFFFF 0%, var(--ink) 55%, #F3F3F3 100%); } html[data-brightness="light"][data-theme="acid"] .hero[b-l7zeafblof], html[data-brightness="light"]:not([data-theme="azure"]):not([data-theme="pink"]) .hero[b-l7zeafblof] { --signal-deep: #14703B; --haze: rgba(26, 139, 74, 0.12); } html[data-brightness="light"] .hero .hero__grain[b-l7zeafblof] { opacity: 0.06; } html[data-brightness="light"] .hero .hero__vignette[b-l7zeafblof] { background: radial-gradient(60% 45% at 18% 85%, rgba(250, 250, 250, 0) 0%, rgba(250, 250, 250, 0.3) 80%), linear-gradient(180deg, rgba(250, 250, 250, 0) 55%, rgba(243, 243, 243, 0.4) 100%); } html[data-theme="azure"] .hero[b-l7zeafblof] { --signal-deep: #1577a8; --haze: rgba(var(--signal-rgb), 0.14); } html[data-theme="pink"] .hero[b-l7zeafblof] { --signal-deep: #D6247B; --haze: rgba(var(--signal-rgb), 0.14); } .hero[b-l7zeafblof] { position: relative; isolation: isolate; overflow: hidden; height: 100svh; height: 100dvh; width: 100%; background: radial-gradient(120% 80% at 85% 15%, #16161B 0%, var(--ink) 55%, #050507 100%); color: var(--bone); font-family: var(--font-body); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; display: grid; grid-template-rows: auto 1fr; padding: clamp(1.1rem, 2.4vw, 2rem) clamp(1.25rem, 3.2vw, 2.75rem); gap: clamp(1.5rem, 4vh, 3rem); } /* --- atmosphere layers ------------------------------------------------- */ .hero__canvas[b-l7zeafblof] { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s ease-out 0.2s; } .hero__canvas.is-ready[b-l7zeafblof] { opacity: 1; } .hero__grain[b-l7zeafblof] { position: absolute; inset: -4%; z-index: 1; pointer-events: none; opacity: 0.35; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } .hero__vignette[b-l7zeafblof] { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(60% 45% at 18% 85%, rgba(11, 11, 13, 0) 0%, rgba(11, 11, 13, 0.55) 80%), linear-gradient(180deg, rgba(11, 11, 13, 0) 55%, rgba(5, 5, 7, 0.8) 100%); } /* --- finale (revealed when all nodes cleared) -------------------------- */ .hero__finale[b-l7zeafblof] { position: absolute; z-index: 2; /* sit below the topbar, with room to breathe */ top: clamp(5.5rem, 13vh, 8.5rem); left: 50%; transform: translate(-50%, -8px); pointer-events: none; display: flex; flex-direction: row; align-items: center; gap: 0.8rem; padding: 0.7rem 1.1rem; max-width: 90vw; text-align: left; white-space: nowrap; border: 1px dashed var(--bone-faint); border-radius: 999px; background: rgba(var(--bone-rgb), 0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.7s; } .hero.is-cleared .hero__finale[b-l7zeafblof] { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s, visibility 0s; } .hero__finale-text[b-l7zeafblof] { margin: 0; font-family: var(--font-display); font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.25; letter-spacing: -0.005em; color: var(--bone); } .hero__finale-text span[b-l7zeafblof] { color: var(--bone-dim); } .hero__finale-text[b-l7zeafblof] em { font-style: italic; color: var(--signal); } @media (prefers-reduced-motion: reduce) { .hero__finale[b-l7zeafblof] { transition: opacity 0.2s linear; transform: translate(-50%, -50%); } .hero.is-cleared .hero__finale[b-l7zeafblof] { transform: translate(-50%, -50%); } .hero__finale-mark[b-l7zeafblof] { animation: none; } } /* --- topbar ------------------------------------------------------------ */ .hero__topbar[b-l7zeafblof] { position: relative; z-index: 3; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; font-family: var(--font-mono); font-size: 0.86rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-dim); } .hero__wordmark[b-l7zeafblof] { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--bone); } .hero__wordmark-img[b-l7zeafblof] { height: clamp(40px, 2.9vw, 50px); width: auto; display: block; transition: opacity 0.3s ease, filter 0.4s ease; opacity: 0.92; filter: brightness(0) invert(1); } .hero[data-brightness="light"] .hero__wordmark-img[b-l7zeafblof] { filter: none; } .hero__wordmark:hover .hero__wordmark-img[b-l7zeafblof], .hero__wordmark:focus-visible .hero__wordmark-img[b-l7zeafblof] { opacity: 1; } .hero__wordmark:focus-visible[b-l7zeafblof] { outline: 1px solid var(--bone-faint); outline-offset: 4px; border-radius: 2px; } .hero__wordmark-dot[b-l7zeafblof] { width: 0.55rem; height: 0.55rem; border-radius: 999px; background: var(--signal); box-shadow: 0 0 0 0 var(--signal); animation: hero-beacon-b-l7zeafblof 2.6s ease-in-out infinite; } .hero__nav[b-l7zeafblof] { justify-self: center; display: flex; gap: 2.1rem; position: relative; } .hero__nav a[b-l7zeafblof] { color: var(--bone-dim); text-decoration: none; position: relative; padding: 0.25rem 0; transition: color 0.3s ease; } .hero__nav a:hover[b-l7zeafblof], .hero__nav a:focus-visible[b-l7zeafblof] { color: var(--bone); outline: none; } /* Magic-line underline — driven by CSS vars that initMagicLine() in hero-neural.js updates on hover + active. See the SiteHeader CSS for the same treatment. */ .hero__nav[b-l7zeafblof]::after { content: ""; position: absolute; bottom: -2px; left: var(--nav-underline-left, 0); width: var(--nav-underline-width, 0); height: 1px; background: var(--signal); opacity: var(--nav-underline-opacity, 0); pointer-events: none; transition: left 0.4s cubic-bezier(0.7, 0, 0.3, 1), width 0.4s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.2s ease; } .hero__meta[b-l7zeafblof] { justify-self: end; display: inline-flex; align-items: center; gap: 0.55rem; white-space: nowrap; color: var(--bone); } .hero__meta .hero__pulse[b-l7zeafblof] { margin-right: 0.15rem; } .hero__modes[b-l7zeafblof] { display: inline-flex; gap: 0.35rem; align-items: center; margin-right: 0.15rem; } .hero__mode[b-l7zeafblof] { width: 22px; height: 22px; padding: 3px; border: none; border-radius: 4px; background: transparent; color: var(--bone-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .hero__mode svg[b-l7zeafblof] { width: 100%; height: 100%; } .hero__mode:hover[b-l7zeafblof] { color: var(--bone); transform: translateY(-1px); } .hero__mode:focus-visible[b-l7zeafblof] { outline: 1px solid var(--bone); outline-offset: 3px; } /* active mode — same ring treatment as active theme dot */ .hero[data-mode="neural"] .hero__mode.is-neural[b-l7zeafblof], .hero[data-mode="swarm"] .hero__mode.is-swarm[b-l7zeafblof], .hero[data-mode="garden"] .hero__mode.is-garden[b-l7zeafblof], .hero:not([data-mode]) .hero__mode.is-neural[b-l7zeafblof] { color: var(--signal); box-shadow: 0 0 0 1.2px var(--signal), 0 0 8px 0 var(--haze); } .hero__brightness[b-l7zeafblof] { display: inline-flex; gap: 0.35rem; align-items: center; } .hero__bright-btn[b-l7zeafblof] { width: 22px; height: 22px; padding: 3px; border: none; border-radius: 4px; background: transparent; color: var(--bone-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .hero__bright-btn svg[b-l7zeafblof] { width: 100%; height: 100%; } .hero__bright-btn:hover[b-l7zeafblof] { color: var(--bone); transform: translateY(-1px); } .hero__bright-btn:focus-visible[b-l7zeafblof] { outline: 1px solid var(--bone); outline-offset: 3px; } /* active brightness = signal ring */ .hero[data-brightness="dark"] .hero__bright-btn.is-dark[b-l7zeafblof], .hero[data-brightness="light"] .hero__bright-btn.is-light[b-l7zeafblof], .hero:not([data-brightness="light"]) .hero__bright-btn.is-dark[b-l7zeafblof] { color: var(--signal); box-shadow: 0 0 0 1.2px var(--signal), 0 0 8px 0 var(--haze); } .hero__themes[b-l7zeafblof] { display: inline-flex; gap: 0.4rem; align-items: center; } .hero__theme[b-l7zeafblof] { width: 15px; height: 15px; padding: 0; border: none; border-radius: 999px; cursor: pointer; background: transparent; position: relative; transition: transform 0.25s ease; } .hero__theme[b-l7zeafblof]::before { content: ""; position: absolute; inset: 1px; border-radius: 999px; background: currentColor; } .hero__theme.is-acid[b-l7zeafblof] { color: #D8FF3F; } .hero__theme.is-azure[b-l7zeafblof] { color: #2097D0; } .hero__theme.is-pink[b-l7zeafblof] { color: #FF4FA2; } .hero[data-brightness="light"] .hero__theme.is-acid[b-l7zeafblof] { color: #1A8B4A; } .hero__theme:hover[b-l7zeafblof] { transform: scale(1.15); } .hero__theme:focus-visible[b-l7zeafblof] { outline: 1px solid var(--bone); outline-offset: 3px; } /* active = ring around the dot in current signal colour */ .hero[data-theme="acid"] .hero__theme.is-acid[b-l7zeafblof], .hero[data-theme="azure"] .hero__theme.is-azure[b-l7zeafblof], .hero[data-theme="pink"] .hero__theme.is-pink[b-l7zeafblof], .hero:not([data-theme="azure"]):not([data-theme="pink"]) .hero__theme.is-acid[b-l7zeafblof] { box-shadow: 0 0 0 1.5px var(--signal), 0 0 8px 0 var(--haze); } .hero__meta-divider[b-l7zeafblof] { color: var(--bone-faint); margin: 0 0.15rem; } /* --- content ----------------------------------------------------------- */ .hero__content[b-l7zeafblof] { position: relative; z-index: 3; align-self: end; width: 100%; display: grid; gap: clamp(0.9rem, 2vh, 1.7rem); min-height: 0; } .hero__eyebrow[b-l7zeafblof] { display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--signal); opacity: 0; transform: translateY(12px); animation: hero-reveal-b-l7zeafblof 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s forwards; } .hero__eyebrow-mark[b-l7zeafblof] { font-size: 0.6rem; transform: translateY(-1px); color: var(--plasma); } /* pulsing neuron — core dot + two concentric rings expanding outward */ .hero__neuron[b-l7zeafblof] { position: relative; display: inline-block; width: 14px; height: 14px; flex: 0 0 14px; } .hero__neuron-core[b-l7zeafblof] { position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; border-radius: 999px; background: var(--signal); transform: translate(-50%, -50%); box-shadow: 0 0 8px 0 rgba(var(--signal-rgb), 0.55); animation: hero-neuron-core-b-l7zeafblof 2s ease-in-out infinite; } .hero__neuron[b-l7zeafblof]::before, .hero__neuron[b-l7zeafblof]::after { content: ""; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; border-radius: 999px; border: 1px solid var(--signal); transform: translate(-50%, -50%) scale(1); opacity: 0.7; animation: hero-neuron-pulse-b-l7zeafblof 2s ease-out infinite; } .hero__neuron[b-l7zeafblof]::after { animation-delay: 1s; } @keyframes hero-neuron-core-b-l7zeafblof { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.8; } } @keyframes hero-neuron-pulse-b-l7zeafblof { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.75; border-width: 1.2px; } 80% { opacity: 0; } 100% { transform: translate(-50%, -50%) scale(3.6); opacity: 0; border-width: 0.5px; } } @media (prefers-reduced-motion: reduce) { .hero__neuron-core[b-l7zeafblof], .hero__neuron[b-l7zeafblof]::before, .hero__neuron[b-l7zeafblof]::after { animation: none; } .hero__neuron[b-l7zeafblof]::before, .hero__neuron[b-l7zeafblof]::after { display: none; } } .hero__title[b-l7zeafblof] { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.75rem, 7.2vw, 6.8rem); line-height: 0.96; letter-spacing: -0.015em; color: var(--bone); } .hero__title-line[b-l7zeafblof] { display: block; opacity: 0; transform: translateY(14px); animation: hero-reveal-b-l7zeafblof 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; } .hero__title-line:nth-of-type(1)[b-l7zeafblof] { animation-delay: 0.28s; } .hero__title-line:nth-of-type(2)[b-l7zeafblof] { animation-delay: 0.42s; } .hero__title-line:nth-of-type(3)[b-l7zeafblof] { animation-delay: 0.56s; } .hero__title[b-l7zeafblof] em { font-style: italic; color: var(--signal); position: relative; padding: 0 0.08em; } .hero__title[b-l7zeafblof] em::before { content: ""; position: absolute; inset: auto 0 0.12em 0; height: 0.08em; background: var(--signal); transform: scaleX(0); transform-origin: left; animation: hero-underline-b-l7zeafblof 1.2s cubic-bezier(0.7, 0, 0.3, 1) 1.2s forwards; opacity: 0.55; } .hero__lead[b-l7zeafblof] { margin: 0; /* extra breathing room above and below, tuned per viewport */ margin-block: clamp(0.5rem, 2vh, 1.4rem); max-width: 50rem; font-size: clamp(1.05rem, 1.25vw, 1.22rem); line-height: 1.55; color: var(--bone-dim); font-weight: 400; opacity: 0; transform: translateY(12px); animation: hero-reveal-b-l7zeafblof 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.75s forwards; } /* --- actions ----------------------------------------------------------- */ .hero__actions[b-l7zeafblof] { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(0.9rem, 1.8vw, 1.6rem); margin-top: 0.4rem; opacity: 0; transform: translateY(12px); animation: hero-reveal-b-l7zeafblof 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.9s forwards; } .hero__cta[b-l7zeafblof] { --cta-pad-y: 0.95rem; --cta-pad-x: 1.6rem; position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 0.9rem; padding: var(--cta-pad-y) var(--cta-pad-x); border: 1px solid var(--bone); border-radius: 999px; color: var(--bone); text-decoration: none; font-size: 0.98rem; font-weight: 500; letter-spacing: 0.01em; overflow: hidden; transition: color 0.5s cubic-bezier(0.7, 0, 0.3, 1), border-color 0.5s cubic-bezier(0.7, 0, 0.3, 1), box-shadow 0.6s ease; box-shadow: 0 0 0 0 var(--haze); } .hero__cta[b-l7zeafblof]::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--signal); transform: translateX(-101%); transition: transform 0.55s cubic-bezier(0.7, 0, 0.3, 1); } .hero__cta:hover[b-l7zeafblof], .hero__cta:focus-visible[b-l7zeafblof] { color: var(--ink); border-color: var(--signal); box-shadow: 0 0 60px -10px var(--haze); outline: none; } .hero__cta:hover[b-l7zeafblof]::before, .hero__cta:focus-visible[b-l7zeafblof]::before { transform: translateX(0); } .hero__cta-arrow[b-l7zeafblof] { display: inline-flex; width: 1.1rem; height: 1.1rem; transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1); } .hero__cta-arrow svg[b-l7zeafblof] { width: 100%; height: 100%; } .hero__cta:hover .hero__cta-arrow[b-l7zeafblof], .hero__cta:focus-visible .hero__cta-arrow[b-l7zeafblof] { transform: translateX(6px); } .hero__ghost[b-l7zeafblof] { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--bone-dim); text-decoration: none; font-size: 0.92rem; padding: 0.5rem 0; border-bottom: 1px solid var(--bone-faint); transition: color 0.3s ease, border-color 0.3s ease; } .hero__ghost:hover[b-l7zeafblof], .hero__ghost:focus-visible[b-l7zeafblof] { color: var(--bone); border-color: var(--bone); outline: none; } .hero__ghost-count[b-l7zeafblof] { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; padding: 0.15rem 0.45rem; border: 1px solid var(--bone-faint); border-radius: 4px; color: var(--bone); } /* --- footer meta ------------------------------------------------------- */ .hero__footer[b-l7zeafblof] { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: clamp(1.25rem, 3vh, 2.75rem); padding-top: 1rem; border-top: 1px dashed var(--bone-faint); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone-dim); opacity: 0; animation: hero-reveal-b-l7zeafblof 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 1.1s forwards; } .hero__hint[b-l7zeafblof] { display: inline-flex; align-items: center; gap: 0.7rem; } .hero__hint-bar[b-l7zeafblof] { position: relative; width: 44px; height: 1px; background: var(--bone-faint); overflow: hidden; } .hero__hint-bar span[b-l7zeafblof] { position: absolute; inset: 0; background: var(--signal); transform-origin: left; animation: hero-bar-b-l7zeafblof 2.4s cubic-bezier(0.7, 0, 0.3, 1) infinite; } .hero__footer-meta[b-l7zeafblof] { display: inline-flex; align-items: center; gap: 0.6rem; } .hero__counter[b-l7zeafblof] { display: inline-flex; align-items: baseline; gap: 0.2rem; font-variant-numeric: tabular-nums; color: var(--bone); } .hero__counter-num[b-l7zeafblof] { color: var(--signal); transition: color 0.4s ease; display: inline-flex; align-items: baseline; white-space: nowrap; } /* one shutter per digit position — only changed positions animate */ .hero__counter-num[b-l7zeafblof] .hero__counter-slot { position: relative; display: inline-block; width: 1ch; height: 1em; line-height: 1; overflow: hidden; vertical-align: baseline; } /* invisible baseline seed: gives the slot a real baseline to align with `/ 60` */ .hero__counter-num[b-l7zeafblof] .hero__counter-slot::before { content: "0"; visibility: hidden; } .hero__counter-num[b-l7zeafblof] .hero__counter-digit { position: absolute; left: 0; right: 0; top: 0; text-align: center; will-change: transform; transform: translateY(0); backface-visibility: hidden; } .hero__counter-num[b-l7zeafblof] .hero__counter-digit.is-entering { animation: hero-counter-in-b-l7zeafblof 0.55s cubic-bezier(0.33, 1, 0.68, 1) forwards; } .hero__counter-num[b-l7zeafblof] .hero__counter-digit.is-leaving { animation: hero-counter-out-b-l7zeafblof 0.55s cubic-bezier(0.33, 1, 0.68, 1) forwards; } @keyframes hero-counter-in-b-l7zeafblof { from { transform: translateY(-110%); opacity: 1; } to { transform: translateY(0); opacity: 1; } } @keyframes hero-counter-out-b-l7zeafblof { from { transform: translateY(0); opacity: 1; } to { transform: translateY(110%); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .hero__counter-num[b-l7zeafblof] .hero__counter-digit.is-entering, .hero__counter-num[b-l7zeafblof] .hero__counter-digit.is-leaving { animation: none; opacity: 1; transform: none; } } .hero__counter.is-low .hero__counter-num[b-l7zeafblof] { color: var(--plasma); } .hero__counter-slash[b-l7zeafblof], .hero__counter-total[b-l7zeafblof] { color: var(--bone-faint); } .hero__pulse[b-l7zeafblof] { width: 0.42rem; height: 0.42rem; border-radius: 999px; background: var(--plasma); box-shadow: 0 0 0 0 var(--plasma); animation: hero-beacon-b-l7zeafblof 1.8s ease-in-out infinite; } /* --- keyframes --------------------------------------------------------- */ @keyframes hero-reveal-b-l7zeafblof { to { opacity: 1; transform: translateY(0); } } @keyframes hero-underline-b-l7zeafblof { to { transform: scaleX(1); } } @keyframes hero-beacon-b-l7zeafblof { 0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; } 50% { box-shadow: 0 0 0 6px rgba(0,0,0,0); opacity: 0.6; } } @keyframes hero-bar-b-l7zeafblof { 0% { transform: scaleX(0); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } 50.1%{ transform: scaleX(1); transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } } /* --- responsive -------------------------------------------------------- */ @media (max-width: 760px) { .hero[b-l7zeafblof] { gap: 2.5rem; } .hero__topbar[b-l7zeafblof] { grid-template-columns: auto 1fr auto; gap: 0.5rem; } .hero__nav[b-l7zeafblof] { display: none; } /* Inline pickers move into the drawer on mobile */ .hero__topbar > .hero__meta[b-l7zeafblof] { display: none; } .hero__title[b-l7zeafblof] { font-size: clamp(2.3rem, 10vw, 4rem); } .hero__actions[b-l7zeafblof] { gap: 1rem; } } /* --- reduced motion ---------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .hero__canvas[b-l7zeafblof] { transition: none; } .hero__eyebrow[b-l7zeafblof], .hero__title-line[b-l7zeafblof], .hero__lead[b-l7zeafblof], .hero__actions[b-l7zeafblof], .hero__footer[b-l7zeafblof] { opacity: 1; transform: none; animation: none; } .hero__title em[b-l7zeafblof]::before { transform: scaleX(1); } .hero__wordmark-dot[b-l7zeafblof], .hero__pulse[b-l7zeafblof], .hero__hint-bar span[b-l7zeafblof] { animation: none; } .hero__cta[b-l7zeafblof]::before { transition: none; } } /* /Components/Pages/ProductsIndex.razor.rz.scp.css */ /* ========================================================= Products overview section ========================================================= */ /* Page width + horizontal padding live on . This section just sets the dark theme + vertical rhythm. */ .products[b-1c4ckdwxrl] { color: var(--bone); font-family: var(--font-body); -webkit-font-smoothing: antialiased; padding-block: clamp(4rem, 10vh, 8rem); min-height: 100dvh; display: flex; flex-direction: column; align-items: center; gap: clamp(2.5rem, 5vh, 4rem); } .products__head[b-1c4ckdwxrl] { text-align: center; max-width: 36rem; display: grid; gap: 0.8rem; } /* Type + colour from utility classes (.u-mono .u-text-xs etc.). */ .products__title[b-1c4ckdwxrl] { margin: 0; font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1; } .products__lead[b-1c4ckdwxrl] { margin: 0; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.5; } /* --- card grid ------------------------------------------------------ */ .products__grid[b-1c4ckdwxrl] { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.5rem); width: 100%; } @media (max-width: 760px) { .products__grid[b-1c4ckdwxrl] { grid-template-columns: 1fr; } } /* --- product card ---------------------------------------------------- */ .product-card[b-1c4ckdwxrl] { position: relative; display: flex; flex-direction: column; gap: 0.8rem; padding: clamp(1.2rem, 2vw, 1.8rem); border: 1px solid var(--bone-faint); border-radius: 12px; background: rgba(var(--bone-rgb), 0.03); text-decoration: none; color: var(--bone); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease; } .product-card:hover[b-1c4ckdwxrl], .product-card:focus-visible[b-1c4ckdwxrl] { transform: translateY(-4px); border-color: rgba(var(--signal-rgb), 0.35); box-shadow: 0 12px 40px -12px rgba(var(--signal-rgb), 0.12); outline: none; } .product-card__visual[b-1c4ckdwxrl] { display: flex; align-items: center; justify-content: center; height: clamp(120px, 18vw, 180px); border-radius: 8px; background: rgba(var(--bone-rgb), 0.03); overflow: hidden; } /* ================================================================ GORAN — ERP module grid with hover animations ================================================================ */ .pc-grid[b-1c4ckdwxrl] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .pc-cell[b-1c4ckdwxrl] { width: 40px; height: 34px; border-radius: 6px; border: 1.5px solid var(--bone-faint); display: flex; align-items: flex-end; justify-content: center; padding: 4px 5px; position: relative; overflow: hidden; } .pc-cell.is-active[b-1c4ckdwxrl] { border-color: var(--signal); background: rgba(var(--signal-rgb), 0.06); box-shadow: 0 0 14px -4px rgba(var(--signal-rgb), 0.2); } .product-card:hover .pc-cell.is-active[b-1c4ckdwxrl] { animation: pc-glow-b-1c4ckdwxrl 2s ease-in-out infinite; } .pc-cell.is-secondary[b-1c4ckdwxrl] { border-color: rgba(var(--signal-rgb), 0.25); } @keyframes pc-glow-b-1c4ckdwxrl { 0%, 100% { box-shadow: 0 0 14px -4px rgba(var(--signal-rgb), 0.2); } 50% { box-shadow: 0 0 24px -2px rgba(var(--signal-rgb), 0.4); } } /* --- bar chart module --- */ .pc-bars[b-1c4ckdwxrl] { display: flex; align-items: flex-end; gap: 2px; height: 100%; } .pc-bar[b-1c4ckdwxrl] { width: 4px; height: var(--h, 50%); border-radius: 1px; background: var(--signal); opacity: 0.6; transition: height 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); } .product-card:hover .pc-bar:nth-child(1)[b-1c4ckdwxrl] { height: 60%; } .product-card:hover .pc-bar:nth-child(2)[b-1c4ckdwxrl] { height: 90%; } .product-card:hover .pc-bar:nth-child(3)[b-1c4ckdwxrl] { height: 50%; } .product-card:hover .pc-bar:nth-child(4)[b-1c4ckdwxrl] { height: 75%; } .product-card:hover .pc-bar:nth-child(5)[b-1c4ckdwxrl] { height: 95%; opacity: 0.85; } /* --- kanban module --- */ .pc-kanban[b-1c4ckdwxrl] { display: flex; gap: 3px; align-items: flex-end; height: 100%; width: 100%; } .pc-kcard[b-1c4ckdwxrl] { flex: 1; display: flex; flex-direction: column; gap: 2px; } .pc-kcard[b-1c4ckdwxrl]::before, .pc-kcard[b-1c4ckdwxrl]::after { content: ""; display: block; width: 100%; height: 4px; border-radius: 1px; background: currentColor; opacity: 0.18; } .pc-kcard[b-1c4ckdwxrl]::after { height: 3px; opacity: 0.12; } .pc-kcard.is-mid[b-1c4ckdwxrl]::before { background: var(--signal); opacity: 0.4; } .pc-kcard.is-done[b-1c4ckdwxrl]::before { opacity: 0.08; } .pc-kcard.is-done[b-1c4ckdwxrl]::after { opacity: 0.06; } .product-card:hover .pc-kcard.is-mid[b-1c4ckdwxrl]::before { animation: pc-kslide-b-1c4ckdwxrl 1.5s ease-in-out 0.3s; } @keyframes pc-kslide-b-1c4ckdwxrl { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); opacity: 0.6; } } /* --- table module --- */ .pc-table[b-1c4ckdwxrl] { display: flex; flex-direction: column; gap: 3px; width: 100%; } .pc-trow[b-1c4ckdwxrl] { display: block; width: 100%; height: 3px; border-radius: 1px; background: currentColor; opacity: 0.14; transition: opacity 0.3s ease, background 0.3s ease; } .pc-trow.is-hl[b-1c4ckdwxrl] { background: var(--signal); opacity: 0.35; } .product-card:hover .pc-trow.is-hl[b-1c4ckdwxrl] { opacity: 0.55; box-shadow: 0 0 6px rgba(var(--signal-rgb), 0.25); } /* --- form/detail module --- */ .pc-form[b-1c4ckdwxrl] { display: flex; flex-direction: column; gap: 4px; width: 100%; } .pc-field[b-1c4ckdwxrl] { display: block; width: 100%; height: 3px; border-radius: 1px; background: currentColor; opacity: 0.15; transition: background 0.4s ease, opacity 0.4s ease; } .pc-field.is-short[b-1c4ckdwxrl] { width: 60%; } .product-card:hover .pc-field:first-child[b-1c4ckdwxrl] { background: var(--signal); opacity: 0.4; } /* --- pipeline/progress module --- */ .pc-pipeline[b-1c4ckdwxrl] { width: 100%; height: 5px; border-radius: 3px; background: currentColor; opacity: 0.08; position: relative; overflow: hidden; } .pc-pipe-fill[b-1c4ckdwxrl] { position: absolute; inset: 0; width: 45%; border-radius: 3px; background: var(--signal); opacity: 0.55; transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } .product-card:hover .pc-pipe-fill[b-1c4ckdwxrl] { width: 80%; } .pc-pipe-dot[b-1c4ckdwxrl] { position: absolute; top: 50%; left: 45%; width: 5px; height: 5px; border-radius: 50%; background: var(--signal); transform: translate(-50%, -50%); opacity: 0.8; transition: left 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } .product-card:hover .pc-pipe-dot[b-1c4ckdwxrl] { left: 80%; } /* --- KPI number module --- */ .pc-kpi[b-1c4ckdwxrl] { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; } .pc-kpi-num[b-1c4ckdwxrl] { display: block; width: 16px; height: 8px; border-radius: 2px; background: currentColor; opacity: 0.18; transition: background 0.4s ease, opacity 0.4s ease; } .product-card:hover .pc-kpi-num[b-1c4ckdwxrl] { background: var(--signal); opacity: 0.45; } .pc-kpi-label[b-1c4ckdwxrl] { display: block; width: 24px; height: 2px; border-radius: 1px; background: currentColor; opacity: 0.1; } /* ================================================================ MCP — agents (Claude, OpenAI) → MCP layer → API/APP Coords in 140×100 viewBox: Claude (18, 28) | OpenAI (18, 72) | MCP rect x=58..82 y=28..72 API rect x=111..133 y=34..66 (centered at 122, 50) ================================================================ */ .pc-mcp[b-1c4ckdwxrl] { position: relative; width: 140px; height: 100px; } .pc-mcp-wires[b-1c4ckdwxrl] { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--bone); } /* --- Brand agent cards (Claude, OpenAI) --- */ .pc-mcp-brand[b-1c4ckdwxrl] { position: absolute; width: 22px; height: 22px; border-radius: 5px; border: 1.5px solid var(--bone-faint); background: rgba(var(--bone-rgb), 0.06); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .pc-mcp-brand img[b-1c4ckdwxrl], .pc-mcp-brand svg[b-1c4ckdwxrl] { width: 13px; height: 13px; display: block; } /* OpenAI logo is black; invert it on dark mode so it's visible */ .pc-mcp-brand.is-openai img[b-1c4ckdwxrl] { filter: invert(1); } /* centers at 18,28 and 18,72 (CSS top/left = center - 11) */ .pc-mcp-brand.is-claude[b-1c4ckdwxrl] { left: 7px; top: 17px; } .pc-mcp-brand.is-openai[b-1c4ckdwxrl] { left: 7px; top: 61px; } /* --- MCP protocol layer rectangle --- */ .pc-mcp-layer[b-1c4ckdwxrl] { position: absolute; left: 58px; top: 28px; width: 24px; height: 44px; border-radius: 5px; border: 1.5px solid var(--signal); background: rgba(var(--signal-rgb), 0.07); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 0; transition: box-shadow 0.5s ease; } .pc-mcp-bar[b-1c4ckdwxrl] { width: 14px; height: 3px; border-radius: 1px; background: var(--signal); opacity: 0.4; } .pc-mcp-bar.is-short[b-1c4ckdwxrl] { width: 8px; opacity: 0.25; } .product-card:hover .pc-mcp-layer[b-1c4ckdwxrl] { box-shadow: 0 0 18px -3px rgba(var(--signal-rgb), 0.3); } /* --- API / APP endpoint (right) --- */ .pc-mcp-api[b-1c4ckdwxrl] { position: absolute; left: 111px; top: 34px; width: 22px; height: 32px; border-radius: 5px; border: 1.5px solid var(--bone-faint); background: rgba(var(--bone-rgb), 0.06); display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 4px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); transition: border-color 0.4s ease; } .pc-mcp-api-line[b-1c4ckdwxrl] { display: block; width: 100%; height: 2px; border-radius: 1px; background: currentColor; opacity: 0.3; } .pc-mcp-api-line.is-short[b-1c4ckdwxrl] { width: 60%; } /* API flash on each pulse arrival */ .pc-mcp-api[b-1c4ckdwxrl]::before { content: ""; position: absolute; inset: 0; border-radius: 4px; background: var(--signal); opacity: 0; pointer-events: none; } .product-card:hover .pc-mcp-api[b-1c4ckdwxrl]::before { animation: pc-mcp-api-flash-b-1c4ckdwxrl 5s ease-out infinite; } /* 2 flashes per 5s cycle at ~30% (1.5s) and ~80% (4.0s) matching the two pulse arrivals. */ @keyframes pc-mcp-api-flash-b-1c4ckdwxrl { 0%, 26% { opacity: 0; box-shadow: none; } 30%, 33% { opacity: 0.7; box-shadow: 0 0 14px 2px rgba(var(--signal-rgb), 0.55); } 45%, 76% { opacity: 0; box-shadow: none; } 80%, 83% { opacity: 0.7; box-shadow: 0 0 14px 2px rgba(var(--signal-rgb), 0.55); } 100% { opacity: 0; box-shadow: none; } } /* --- pulses --- Each pulse follows an offset-path from agent → MCP → API. Bone colour on agent→MCP leg, fades inside MCP, signal colour on MCP→API. */ .pc-mcp-pulse[b-1c4ckdwxrl] { position: absolute; top: 0; left: 0; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; opacity: 0; offset-rotate: 0deg; offset-distance: 0%; background: rgb(var(--bone-rgb)); } .pc-mcp-pulse.is-p1[b-1c4ckdwxrl] { offset-path: path("M 18 28 Q 40 35 58 50 L 122 50"); } .pc-mcp-pulse.is-p2[b-1c4ckdwxrl] { offset-path: path("M 18 72 Q 40 65 58 50 L 122 50"); } .product-card:hover .pc-mcp-pulse.is-p1[b-1c4ckdwxrl] { animation: pc-mcp-flow-b-1c4ckdwxrl 5s linear infinite; } .product-card:hover .pc-mcp-pulse.is-p2[b-1c4ckdwxrl] { animation: pc-mcp-flow-b-1c4ckdwxrl 5s linear -2.5s infinite; } /* Timing within a single flow (0-100% = one pulse journey). Total path ~108px. Agent→MCP entry ~45px (42% of path). MCP exit ~69px (64% of path). Agent→API via MCP. Pulse lives for ~30% of the 5s cycle (1.5s of travel), then idle until next iteration. With -2.5s offset on p2, both agents' pulses arrive at the API staggered 2.5s apart. */ @keyframes pc-mcp-flow-b-1c4ckdwxrl { 0% { offset-distance: 0%; opacity: 0; background: rgb(var(--bone-rgb)); box-shadow: 0 0 6px rgba(var(--bone-rgb), 0.4); } 2% { opacity: 1; } 14% { offset-distance: 38%; opacity: 1; background: rgb(var(--bone-rgb)); } 16% { offset-distance: 42%; opacity: 0; } 19% { offset-distance: 58%; opacity: 0; background: rgb(var(--signal-rgb)); box-shadow: 0 0 8px rgba(var(--signal-rgb), 0.6); } 21% { offset-distance: 62%; opacity: 1; } 30% { offset-distance: 100%; opacity: 1; } 33% { offset-distance: 100%; opacity: 0; } 100% { offset-distance: 100%; opacity: 0; } } /* ================================================================ AI — neuron constellation with spokes ================================================================ */ .pc-neuron[b-1c4ckdwxrl] { position: relative; width: 130px; height: 130px; } .pc-orbit[b-1c4ckdwxrl] { position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed var(--bone-faint); opacity: 0.5; } /* radial spokes from center */ .pc-spoke[b-1c4ckdwxrl] { position: absolute; background: currentColor; opacity: 0.08; } .pc-spoke.is-v[b-1c4ckdwxrl] { width: 1px; height: 100%; left: 50%; top: 0; transform: translateX(-50%); } .pc-spoke.is-h[b-1c4ckdwxrl] { height: 1px; width: 100%; top: 50%; left: 0; transform: translateY(-50%); } .pc-spoke.is-d1[b-1c4ckdwxrl] { width: 1px; height: 141%; left: 50%; top: -20.5%; transform: translateX(-50%) rotate(45deg); } .pc-spoke.is-d2[b-1c4ckdwxrl] { width: 1px; height: 141%; left: 50%; top: -20.5%; transform: translateX(-50%) rotate(-45deg); } .pc-core[b-1c4ckdwxrl] { position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; border-radius: 50%; background: var(--signal); transform: translate(-50%, -50%); box-shadow: 0 0 28px -4px rgba(var(--signal-rgb), 0.45); z-index: 1; } .pc-ring[b-1c4ckdwxrl] { position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--signal); transform: translate(-50%, -50%) scale(1); opacity: 0; z-index: 1; } .product-card:hover .pc-ring[b-1c4ckdwxrl] { animation: pc-pulse-b-1c4ckdwxrl 2.6s ease-out infinite; } .product-card:hover .pc-ring.is-outer[b-1c4ckdwxrl] { animation-delay: 1.3s; } @keyframes pc-pulse-b-1c4ckdwxrl { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; } 80% { opacity: 0; } 100% { transform: translate(-50%, -50%) scale(3); opacity: 0; } } .pc-sat[b-1c4ckdwxrl] { position: absolute; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--bone-faint); background: rgba(var(--bone-rgb), 0.04); z-index: 1; } .pc-sat.is-top[b-1c4ckdwxrl] { top: 0; left: 50%; transform: translateX(-50%); } .pc-sat.is-bottom[b-1c4ckdwxrl] { bottom: 0; left: 50%; transform: translateX(-50%); } .pc-sat.is-left[b-1c4ckdwxrl] { left: 0; top: 50%; transform: translateY(-50%); } .pc-sat.is-right[b-1c4ckdwxrl] { right: 0; top: 50%; transform: translateY(-50%); } .pc-sat.is-tl[b-1c4ckdwxrl] { top: 12%; left: 12%; width: 8px; height: 8px; opacity: 0.5; } .pc-sat.is-br[b-1c4ckdwxrl] { bottom: 12%; right: 12%; width: 8px; height: 8px; opacity: 0.5; } .pc-sat.is-active[b-1c4ckdwxrl] { border-color: var(--plasma); background: rgba(var(--plasma-rgb, 255, 79, 162), 0.1); box-shadow: 0 0 10px -2px var(--plasma); } /* ================================================================ WORKFLOW — Y-branch with SVG wires + alternating pulses Coordinates match the SVG viewBox 110×100: Start (55, 8), Mid (55, 38), Approve (24, 70), Reject (86, 70), End (55, 92) ================================================================ */ .pc-branch[b-1c4ckdwxrl] { position: relative; width: 110px; height: 100px; } .pc-wires[b-1c4ckdwxrl] { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--bone); } .pc-dot[b-1c4ckdwxrl] { position: absolute; border-radius: 50%; } /* All dots are 14×14 (r=7). Diamond sized so all three travel legs are ~35px equal (d=25 → diagonals ≈ 35.4, start→mid = 35). Centers: Start(55,8) Mid(55,43) Approve(30,68) Reject(80,68) End(55,93) CSS top/left = center - 7 */ /* all hollow dots blur the wire segment passing through them */ .pc-dot.is-start[b-1c4ckdwxrl], .pc-dot.is-mid[b-1c4ckdwxrl], .pc-dot.is-approve[b-1c4ckdwxrl], .pc-dot.is-reject[b-1c4ckdwxrl], .pc-dot.is-end[b-1c4ckdwxrl] { width: 14px; height: 14px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .pc-dot.is-start[b-1c4ckdwxrl] { top: 1px; left: 48px; border: 1.5px solid var(--bone-faint); background: rgba(var(--bone-rgb), 0.08); } .pc-dot.is-mid[b-1c4ckdwxrl] { top: 36px; left: 48px; border: 1.5px solid var(--bone-faint); background: rgba(var(--bone-rgb), 0.08); } .pc-dot.is-approve[b-1c4ckdwxrl] { top: 61px; left: 23px; border: 1.5px solid var(--signal); background: rgba(var(--signal-rgb), 0.1); } .pc-dot.is-reject[b-1c4ckdwxrl] { top: 61px; left: 73px; border: 1.5px solid var(--plasma); background: rgba(var(--plasma-rgb, 255, 79, 162), 0.08); } .pc-dot.is-end[b-1c4ckdwxrl] { top: 86px; left: 48px; border: 1.5px solid var(--bone-faint); background: rgba(var(--bone-rgb), 0.08); } /* color-flash overlays synced to each pulse's arrival */ .pc-dot.is-end[b-1c4ckdwxrl]::before, .pc-dot.is-end[b-1c4ckdwxrl]::after { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0; } .pc-dot.is-end[b-1c4ckdwxrl]::before { background: var(--signal); } .pc-dot.is-end[b-1c4ckdwxrl]::after { background: var(--plasma); } /* pulse A reaches end at 55% of its 5s cycle (T=2.75s) */ .product-card:hover .pc-dot.is-end[b-1c4ckdwxrl]::before { animation: pc-end-flash-a-b-1c4ckdwxrl 5s ease-out infinite; } /* pulse B is delayed 2.5s; its 55% is at T=5.25s = 5% of next cycle */ .product-card:hover .pc-dot.is-end[b-1c4ckdwxrl]::after { animation: pc-end-flash-b-b-1c4ckdwxrl 5s ease-out 2.5s infinite; } /* Flash triggers after pulse arrives at end (85% in pulse keyframe). Quick ramp up → hold peak → smooth fade that carries to cycle end. */ @keyframes pc-end-flash-a-b-1c4ckdwxrl { 0%, 85% { opacity: 0; box-shadow: none; } 89%, 92% { opacity: 1; box-shadow: 0 0 14px 2px rgba(var(--signal-rgb), 0.65); } 100% { opacity: 0; box-shadow: 0 0 4px 0 rgba(var(--signal-rgb), 0); } } @keyframes pc-end-flash-b-b-1c4ckdwxrl { 0%, 85% { opacity: 0; box-shadow: none; } 89%, 92% { opacity: 1; box-shadow: 0 0 14px 2px var(--plasma); } 100% { opacity: 0; box-shadow: 0 0 4px 0 transparent; } } /* --- alternating pulses ----------------------------------------- */ .pc-pulse[b-1c4ckdwxrl] { position: absolute; width: 6px; height: 6px; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; } /* Pulse A: approve path — starts on hover only */ .pc-pulse.is-a[b-1c4ckdwxrl] { background: var(--signal); box-shadow: 0 0 8px rgba(var(--signal-rgb), 0.65); opacity: 0; } /* Pulse B: reject path, offset by half cycle */ .pc-pulse.is-b[b-1c4ckdwxrl] { background: var(--plasma); box-shadow: 0 0 8px var(--plasma); opacity: 0; } .product-card:hover .pc-pulse.is-a[b-1c4ckdwxrl] { animation: pc-path-a-b-1c4ckdwxrl 5s ease-in-out infinite; } .product-card:hover .pc-pulse.is-b[b-1c4ckdwxrl] { animation: pc-path-b-b-1c4ckdwxrl 5s ease-in-out 2.5s infinite; } /* Waypoints: Start(55,8) → Mid(55,43) → Approve(30,68) → End(55,93) All three legs ~35px so time distribution is roughly equal. */ @keyframes pc-path-a-b-1c4ckdwxrl { 0% { top: 8px; left: 55px; opacity: 0; } 5% { opacity: 1; } 27% { top: 43px; left: 55px; opacity: 1; } /* arrive at Mid */ 31% { top: 43px; left: 55px; opacity: 1; } /* hold */ 55% { top: 68px; left: 30px; opacity: 1; } /* arrive at Approve */ 58% { top: 68px; left: 30px; opacity: 1; } /* hold */ 85% { top: 93px; left: 55px; opacity: 1; } /* arrive at End */ 90% { top: 93px; left: 55px; opacity: 0; } 100% { opacity: 0; } } /* Waypoints: Start(55,8) → Mid(55,43) → Reject(80,68) → End(55,93) */ @keyframes pc-path-b-b-1c4ckdwxrl { 0% { top: 8px; left: 55px; opacity: 0; } 5% { opacity: 0.85; } 27% { top: 43px; left: 55px; opacity: 0.85; } 31% { top: 43px; left: 55px; } 55% { top: 68px; left: 80px; opacity: 0.85; } 58% { top: 68px; left: 80px; } 85% { top: 93px; left: 55px; opacity: 0.85; } 90% { top: 93px; left: 55px; opacity: 0; } 100% { opacity: 0; } } /* ---- reduced motion ---- */ @media (prefers-reduced-motion: reduce) { .product-card:hover .pc-cell.is-active[b-1c4ckdwxrl] { animation: none; } .product-card:hover .pc-ring[b-1c4ckdwxrl] { animation: none; } .product-card:hover .pc-packet[b-1c4ckdwxrl] { animation: none; } .product-card:hover .pc-pulse[b-1c4ckdwxrl] { animation: none; } .product-card:hover .pc-dot.is-end[b-1c4ckdwxrl]::before, .product-card:hover .pc-dot.is-end[b-1c4ckdwxrl]::after { animation: none; } } .product-card__name[b-1c4ckdwxrl] { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 1.6vw, 1.4rem); letter-spacing: -0.01em; } .product-card__desc[b-1c4ckdwxrl] { margin: 0; font-size: clamp(0.88rem, 1vw, 0.95rem); line-height: 1.55; color: var(--bone-dim); flex: 1; } .product-card__arrow[b-1c4ckdwxrl] { font-size: 1.1rem; color: var(--bone-dim); transition: color 0.3s ease, transform 0.3s ease; } .product-card:hover .product-card__arrow[b-1c4ckdwxrl], .product-card:focus-visible .product-card__arrow[b-1c4ckdwxrl] { color: var(--signal); transform: translateX(6px); } @media (prefers-reduced-motion: reduce) { .product-card[b-1c4ckdwxrl] { transition: none; } } /* Light/theme overrides are in app.css (global) because Blazor scoped CSS doesn't process :global() for ancestor selectors. */ /* /Components/Pages/Products/ProductDetailBase.razor.rz.scp.css */ /* ========================================================= Product detail — shared layout styles ========================================================= */ /* Page width + horizontal padding live on . This section just sets the dark theme + vertical rhythm. */ .pd[b-g6qqy1hhr1] { position: relative; color: var(--bone); font-family: var(--font-body); -webkit-font-smoothing: antialiased; min-height: 100dvh; padding-block: clamp(2rem, 4vw, 3.5rem); display: flex; flex-direction: column; align-items: center; gap: clamp(3rem, 6vh, 5rem); } /* Grain rule lives in app.css. Type/colour from utility classes. */ .pd__hero[b-g6qqy1hhr1] { max-width: 44rem; text-align: center; display: grid; gap: clamp(0.8rem, 1.5vh, 1.3rem); justify-items: center; padding-top: clamp(2rem, 6vh, 5rem); } .pd__back[b-g6qqy1hhr1] { text-decoration: none; transition: color 0.3s ease; justify-self: start; } .pd__back:hover[b-g6qqy1hhr1], .pd__back:focus-visible[b-g6qqy1hhr1] { color: var(--signal); outline: none; } .pd__title[b-g6qqy1hhr1] { margin: 0; font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1; } .pd__lead[b-g6qqy1hhr1] { margin: 0; font-size: clamp(1.05rem, 1.25vw, 1.22rem); line-height: 1.55; max-width: 38rem; } .pd__cta[b-g6qqy1hhr1] { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1.5rem; border: 1px solid var(--bone); border-radius: 999px; color: var(--bone); text-decoration: none; font-size: 0.95rem; font-weight: 500; position: relative; overflow: hidden; /* Establishes a local stacking context so the ::before slide-in (z-index: -1) stays clipped INSIDE this button. Without it, position: relative + z-index: auto doesn't form a context, so the negative-z pseudo escapes behind the page background — the hover yellow never shows and you're left with dark-on-dark text. */ isolation: isolate; transition: color 0.5s cubic-bezier(0.7, 0, 0.3, 1), border-color 0.5s cubic-bezier(0.7, 0, 0.3, 1); } .pd__cta[b-g6qqy1hhr1]::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--signal); transform: translateX(-101%); transition: transform 0.55s cubic-bezier(0.7, 0, 0.3, 1); } .pd__cta:hover[b-g6qqy1hhr1], .pd__cta:focus-visible[b-g6qqy1hhr1] { color: var(--ink); border-color: var(--signal); outline: none; } .pd__cta:hover[b-g6qqy1hhr1]::before, .pd__cta:focus-visible[b-g6qqy1hhr1]::before { transform: translateX(0); } .pd__cta-arrow[b-g6qqy1hhr1] { transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1); } .pd__cta:hover .pd__cta-arrow[b-g6qqy1hhr1] { transform: translateX(4px); } /* --- features section (heading + grid) ------------------------------ */ .pd__features-wrap[b-g6qqy1hhr1] { display: flex; flex-direction: column; gap: clamp(1.25rem, 2.5vh, 2rem); width: 100%; } .pd__features-head[b-g6qqy1hhr1] { display: flex; flex-direction: column; gap: 0.5rem; } .pd__features-heading[b-g6qqy1hhr1] { margin: 0; font-size: clamp(1.5rem, 2.5vw, 2.1rem); line-height: 1.15; } .pd__features[b-g6qqy1hhr1] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); width: 100%; } .pd__features[b-g6qqy1hhr1] .pd__feature { padding: clamp(1.2rem, 2vw, 1.6rem); border: 1px solid var(--bone-faint); border-radius: 10px; display: grid; gap: 0.6rem; transition: border-color 0.3s ease; } .pd__features[b-g6qqy1hhr1] .pd__feature:hover { border-color: rgba(var(--signal-rgb), 0.25); } .pd__features[b-g6qqy1hhr1] .pd__feature-icon { width: 28px; height: 28px; color: var(--signal); } .pd__features[b-g6qqy1hhr1] .pd__feature-icon svg { width: 100%; height: 100%; } .pd__features[b-g6qqy1hhr1] .pd__feature-name { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; } .pd__features[b-g6qqy1hhr1] .pd__feature-desc { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--bone-dim); } /* --- spotlight panel ------------------------------------------------ Sits between the hero and the features grid. The actual
markup lives in the parent page (Goran etc.) inside the Spotlight RenderFragment, so all selectors descend through `.pd__spotlight-host ::deep` to cross the scope boundary. --------------------------------------------------------------------- */ .pd__spotlight-host[b-g6qqy1hhr1] { width: 100%; } .pd__spotlight-host[b-g6qqy1hhr1] .pd__spotlight { position: relative; z-index: 1; width: 100%; padding: clamp(1.75rem, 4vh, 3rem) clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--bone-faint); border-radius: 14px; background: radial-gradient(120% 90% at 0% 0%, rgba(var(--signal-rgb), 0.10) 0%, transparent 55%), rgba(var(--bone-rgb), 0.02); display: grid; gap: clamp(1rem, 2vh, 1.5rem); overflow: hidden; isolation: isolate; } .pd__spotlight-host[b-g6qqy1hhr1] .pd__spotlight::after { /* a hairline accent rule along the top edge — subtle but distinguishes the panel from the cards below it. */ content: ""; position: absolute; top: 0; left: clamp(1.5rem, 3vw, 2.25rem); right: clamp(1.5rem, 3vw, 2.25rem); height: 1px; background: linear-gradient( to right, var(--signal), transparent 70% ); } .pd__spotlight-host[b-g6qqy1hhr1] .pd__spotlight-head { display: flex; flex-direction: column; gap: 0.6rem; max-width: 44rem; } .pd__spotlight-host[b-g6qqy1hhr1] .pd__spotlight-title { margin: 0; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.15; } .pd__spotlight-host[b-g6qqy1hhr1] .pd__spotlight-lead { margin: 0; font-size: clamp(0.98rem, 1.15vw, 1.1rem); line-height: 1.6; max-width: 42rem; } /* Prompt examples styled like quoted user messages — monospace, chat-bubble-ish, with a left accent bar so they read as inputs the AI would receive. */ .pd__spotlight-host[b-g6qqy1hhr1] .pd__prompts { display: grid; gap: 0.6rem; } .pd__spotlight-host[b-g6qqy1hhr1] .pd__prompt { position: relative; margin: 0; padding: 0.7rem 0.95rem 0.7rem 1.1rem; border-left: 2px solid var(--signal); background: rgba(var(--bone-rgb), 0.025); border-radius: 0 6px 6px 0; font-family: var(--font-mono); font-size: clamp(0.82rem, 0.95vw, 0.92rem); line-height: 1.5; color: var(--bone); } .pd__spotlight-host[b-g6qqy1hhr1] .pd__prompt::before { content: "→ "; color: var(--signal); margin-right: 0.15em; } /* Compatible-AI-client pills row. */ .pd__spotlight-host[b-g6qqy1hhr1] .pd__spotlight-clients { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; } .pd__spotlight-host[b-g6qqy1hhr1] .client-pill { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.85rem; border: 1px solid var(--bone-faint); border-radius: 999px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-dim); background: rgba(var(--bone-rgb), 0.02); } .pd__spotlight-host[b-g6qqy1hhr1] .client-pill img { width: 14px; height: 14px; display: block; } .pd__spotlight-host[b-g6qqy1hhr1] .client-pill.is-openai img { filter: invert(1); } /* --- long-form section ---------------------------------------------- Editorial blocks for product narrative that doesn't fit the feature grid. Like the spotlight, content is rendered by the parent page so selectors descend through `.pd__longform-host ::deep`. --------------------------------------------------------------------- */ .pd__longform-host[b-g6qqy1hhr1] { width: 100%; } .pd__longform-host[b-g6qqy1hhr1] .pd__longform { display: grid; gap: clamp(1.5rem, 3vh, 2.25rem); width: 100%; margin-block-start: clamp(1rem, 2.5vh, 2rem); } .pd__longform-host[b-g6qqy1hhr1] .pd__longform-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: start; padding-block-start: clamp(1.25rem, 3vh, 2rem); border-top: 1px solid var(--bone-faint); } @media (max-width: 720px) { .pd__longform-host[b-g6qqy1hhr1] .pd__longform-block { grid-template-columns: 1fr; gap: 0.75rem; } } .pd__longform-host[b-g6qqy1hhr1] .pd__longform-title { margin: 0; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.2; } .pd__longform-host[b-g6qqy1hhr1] .pd__longform-body { margin: 0; font-size: clamp(0.98rem, 1.1vw, 1.08rem); line-height: 1.65; display: grid; gap: 0.8rem; } .pd__longform-host[b-g6qqy1hhr1] .pd__longform-body p { margin: 0; } .pd__longform-host[b-g6qqy1hhr1] .pd__longform-body strong { color: var(--bone); font-weight: 600; } .pd__longform-host[b-g6qqy1hhr1] .pd__longform-body code { font-family: var(--font-mono); font-size: 0.88em; color: var(--signal); padding: 0.05em 0.35em; background: rgba(var(--signal-rgb), 0.08); border-radius: 3px; } @media (prefers-reduced-motion: reduce) { .pd__cta[b-g6qqy1hhr1]::before { transition: none; } } /* Light/theme overrides are in app.css (global) because Blazor scoped CSS doesn't process :global() for ancestor selectors. */ /* /Components/Pages/References.razor.rz.scp.css */ /* ========================================================= References — Full-viewport scroll-snap showcase One project per screen, branded accent per client. ========================================================= */ /* Theme tokens come from — see wwwroot/app.css */ .refs[b-4hbwq3oiv7] { background: var(--ink); color: var(--bone); font-family: var(--font-body); -webkit-font-smoothing: antialiased; /* Subtract the sticky SiteHeader height (set by hero-neural.js) so each slide fits inside the visible viewport instead of running off the bottom. */ height: calc(100svh - var(--site-header-h, 0px)); overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; scroll-behavior: smooth; } /* --- slide --------------------------------------------------------- */ .ref-slide[b-4hbwq3oiv7] { scroll-snap-align: start; height: calc(100svh - var(--site-header-h, 0px)); min-height: calc(100svh - var(--site-header-h, 0px)); position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 4vw, 4rem); padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 4vw, 3rem); /* accent gradient on the left edge — visible brand tint */ background: linear-gradient(90deg, color-mix(in srgb, var(--accent, transparent) 18%, transparent) 0%, transparent 50%), var(--ink); } /* grain per slide (light, not heavy) */ .ref-slide[b-4hbwq3oiv7]::before { content: ""; position: absolute; inset: -4%; pointer-events: none; opacity: 0.18; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } /* Grain overlay reads as a flat gray wash on light backgrounds (black-noise + overlay-blend + light surface = visible darkening). Pull the opacity way down so it stays subtle. */ html[data-brightness="light"] .ref-slide[b-4hbwq3oiv7]::before { opacity: 0.04; } /* --- header slide -------------------------------------------------- */ .ref-slide.is-header[b-4hbwq3oiv7] { /* Flex column overrides the base .ref-slide 2-column grid. Text takes remaining space with flex:1 and centers its own content vertically; marquee pins to the bottom. */ display: flex; flex-direction: column; align-items: stretch; max-width: none; margin: 0; padding: 0 0 clamp(2rem, 5vh, 3.5rem) 0; background: var(--ink); gap: 0; } .ref-slide.is-header > .ref-slide__text[b-4hbwq3oiv7] { flex: 1; max-width: 44rem; width: 100%; margin: 0 auto; padding: 0 clamp(2rem, 6vw, 6rem); align-items: flex-start; justify-content: center; justify-self: auto; } .ref-slide.is-header > .ref-marquee[b-4hbwq3oiv7] { flex-shrink: 0; } .ref-slide.is-header > .ref-scroll-hint[b-4hbwq3oiv7] { flex-shrink: 0; align-self: center; margin-bottom: clamp(2.5rem, 6vh, 4rem); } .ref-slide__back[b-4hbwq3oiv7] { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-dim); text-decoration: none; transition: color 0.3s ease; margin-bottom: 1.5rem; } .ref-slide__back:hover[b-4hbwq3oiv7] { color: var(--signal); } .ref-slide.is-header h1[b-4hbwq3oiv7] { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 6vw, 5.5rem); line-height: 1; letter-spacing: -0.02em; } .ref-slide.is-header p[b-4hbwq3oiv7] { margin: 1rem 0 0; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.55; color: var(--bone-dim); max-width: 32rem; } /* --- marquee strip on header ------------------------------------- */ .ref-marquee[b-4hbwq3oiv7] { width: 100%; overflow: hidden; /* Narrow edge fade — logos stay fully visible until the very edge, then fade only in the last ~3% so they don't pop in/out abruptly. */ mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%); } .ref-marquee__track[b-4hbwq3oiv7] { display: flex; align-items: center; width: max-content; /* Translate exactly -50% (one full copy) per cycle for a seamless loop. NOTE: spacing lives on each item's margin-inline-end — flex `gap` would break the loop because the joint between copy-1 and copy-2 would miss one gap, causing a half-gap jump at the animation reset. */ animation: ref-marquee-scroll-b-4hbwq3oiv7 32s linear infinite; } .ref-marquee:hover .ref-marquee__track[b-4hbwq3oiv7], .ref-marquee:focus-within .ref-marquee__track[b-4hbwq3oiv7] { animation-play-state: paused; } .ref-marquee__item[b-4hbwq3oiv7] { display: flex; align-items: center; justify-content: center; height: clamp(22px, 2.6vw, 32px); flex-shrink: 0; /* Spacing between items — see the note on .ref-marquee__track for why this is a margin and not a gap. */ margin-inline-end: clamp(4rem, 7vw, 7rem); opacity: 0.55; } .ref-marquee__item img[b-4hbwq3oiv7] { height: 100%; width: auto; max-width: none; object-fit: contain; /* Dark mode: flatten to white silhouette */ filter: brightness(0) invert(1); } html[data-brightness="light"] .ref-marquee__item img[b-4hbwq3oiv7] { /* Light mode: flatten to black silhouette */ filter: brightness(0); } /* --- scroll hint on header slide ---------------------------------- */ /* Tells the user that more content sits below. Without this, the marquee reads as a decorative footer and first-time visitors miss the project slides. */ .ref-scroll-hint[b-4hbwq3oiv7] { display: inline-flex; flex-direction: column; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone-dim); animation: ref-scroll-hint-bob-b-4hbwq3oiv7 2.4s ease-in-out infinite; } .ref-scroll-hint__arrow[b-4hbwq3oiv7] { width: 10px; height: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); } @keyframes ref-scroll-hint-bob-b-4hbwq3oiv7 { 0%, 100% { transform: translateY(0); opacity: 0.7; } 50% { transform: translateY(4px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .ref-scroll-hint[b-4hbwq3oiv7] { animation: none; opacity: 0.85; } } @keyframes ref-marquee-scroll-b-4hbwq3oiv7 { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ref-marquee__track[b-4hbwq3oiv7] { animation: none; } } @media (max-width: 760px) { .ref-marquee__track[b-4hbwq3oiv7] { animation-duration: 22s; } .ref-marquee__item[b-4hbwq3oiv7] { height: clamp(20px, 4.5vw, 28px); margin-inline-end: 3rem; } } /* --- text column --------------------------------------------------- */ .ref-slide__text[b-4hbwq3oiv7] { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(0.6rem, 1.2vh, 1rem); max-width: 32rem; justify-self: end; } .ref-slide__client[b-4hbwq3oiv7] { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent, var(--bone-dim)); opacity: 0.85; font-weight: 500; } .ref-slide__headline[b-4hbwq3oiv7] { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.1; letter-spacing: -0.015em; } .ref-slide__desc[b-4hbwq3oiv7] { margin: 0; font-size: clamp(0.9rem, 1.05vw, 1rem); line-height: 1.6; color: var(--bone-dim); } .ref-slide__desc[b-4hbwq3oiv7] a { color: var(--accent, var(--signal)); text-decoration: underline; text-underline-offset: 2px; } /* --- labels -------------------------------------------------------- */ .ref-slide__labels[b-4hbwq3oiv7] { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; } .ref-slide__label[b-4hbwq3oiv7] { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em; padding: 0.2rem 0.5rem; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--accent, var(--bone-faint)) 30%, transparent); color: var(--bone-dim); white-space: nowrap; } /* --- visual column (screenshot) ------------------------------------ */ .ref-slide__visual[b-4hbwq3oiv7] { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-start; } .ref-slide__visual > img[b-4hbwq3oiv7] { width: 100%; max-height: 70svh; object-fit: contain; border-radius: 10px; box-shadow: 0 8px 40px -12px color-mix(in srgb, var(--accent, var(--ink)) 35%, transparent), 0 2px 8px -2px rgba(0, 0, 0, 0.3); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); } .ref-slide:hover .ref-slide__visual > img[b-4hbwq3oiv7] { transform: scale(1.015); } /* --- iPhone mockup frame (for mobile apps) ------------------------- */ .ref-phone[b-4hbwq3oiv7] { position: relative; width: clamp(220px, 22vw, 300px); aspect-ratio: 9 / 18.5; max-height: 72svh; border-radius: clamp(34px, 3.6vw, 46px); background: linear-gradient(145deg, #2a2a2e 0%, #1a1a1e 100%); /* thin bezel — the screen sits closer to the outer edge */ padding: clamp(3px, 0.35vw, 5px); box-shadow: 0 0 0 1px #3a3a3e, 0 20px 60px -20px color-mix(in srgb, var(--accent, var(--ink)) 40%, transparent), 0 8px 24px -8px rgba(0, 0, 0, 0.5), inset 0 0 1px 1px rgba(255, 255, 255, 0.04); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); } .ref-slide:hover .ref-phone[b-4hbwq3oiv7] { transform: translateY(-4px); } /* --- side buttons (silent switch + volume on left, power on right) */ .ref-phone__btn[b-4hbwq3oiv7] { position: absolute; background: #1a1a1c; box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.08); border-radius: 1.5px; z-index: 0; } /* percentages match roughly the iPhone button positions along the side */ .ref-phone__btn.is-silent[b-4hbwq3oiv7] { left: -2.5px; top: 13.5%; width: 2.5px; height: 3.2%; border-radius: 1px; } .ref-phone__btn.is-vol-up[b-4hbwq3oiv7] { left: -3px; top: 20%; width: 3px; height: 7%; } .ref-phone__btn.is-vol-down[b-4hbwq3oiv7] { left: -3px; top: 29%; width: 3px; height: 7%; } .ref-phone__btn.is-power[b-4hbwq3oiv7] { right: -3px; top: 22%; width: 3px; height: 11%; } /* --- screen (content + overlays) ---------------------------------- */ .ref-phone__screen[b-4hbwq3oiv7] { position: relative; width: 100%; height: 100%; border-radius: clamp(32px, 3.4vw, 43px); overflow: hidden; background: #000; isolation: isolate; } .ref-phone__screen img[b-4hbwq3oiv7] { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } /* --- Dynamic Island / notch --------------------------------------- */ .ref-phone__notch[b-4hbwq3oiv7] { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); width: clamp(85px, 8.8vw, 110px); height: 24px; background: #0a0a0c; border-radius: 999px; z-index: 2; box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.6); } /* Front camera lens — tiny inset circle on the right of the Dynamic Island. Radial gradient simulates a glint; the inset ring is the lens rim. */ .ref-phone__notch[b-4hbwq3oiv7]::after { content: ""; position: absolute; top: 50%; left: 8px; width: 7px; height: 7px; border-radius: 50%; transform: translateY(-50%); background: radial-gradient(circle at 35% 30%, #3a3a46 0%, #14141a 55%, #050508 100%); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.8); } /* Status bar intentionally omitted — the project screenshots already include their own, so rendering a second one would overlap. */ /* --- Browser mockup frame (for web apps) --------------------------- */ .ref-browser[b-4hbwq3oiv7] { width: 100%; max-width: 720px; max-height: 72svh; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: #1a1a1e; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 20px 60px -20px color-mix(in srgb, var(--accent, var(--ink)) 40%, transparent), 0 8px 24px -8px rgba(0, 0, 0, 0.5); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); } .ref-slide:hover .ref-browser[b-4hbwq3oiv7] { transform: translateY(-4px); } /* chrome bar (top) */ .ref-browser__chrome[b-4hbwq3oiv7] { display: flex; align-items: center; gap: clamp(0.4rem, 0.8vw, 0.7rem); padding: 0.35rem 0.55rem; background: linear-gradient(180deg, #2a2a2e 0%, #232327 100%); border-bottom: 1px solid rgba(0, 0, 0, 0.4); flex-shrink: 0; } /* traffic light dots */ .ref-browser__dots[b-4hbwq3oiv7] { display: flex; gap: 4px; flex-shrink: 0; } .ref-browser__dots span[b-4hbwq3oiv7] { width: 8px; height: 8px; border-radius: 50%; background: #555; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.3); } .ref-browser__dots span:nth-child(1)[b-4hbwq3oiv7] { background: #ff5f57; } .ref-browser__dots span:nth-child(2)[b-4hbwq3oiv7] { background: #febc2e; } .ref-browser__dots span:nth-child(3)[b-4hbwq3oiv7] { background: #28c840; } /* URL bar */ .ref-browser__url[b-4hbwq3oiv7] { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.4rem; padding: 0.18rem 0.5rem; background: rgba(0, 0, 0, 0.25); border-radius: 4px; font-family: var(--font-mono); font-size: 0.6rem; color: rgba(237, 231, 217, 0.55); overflow: hidden; } .ref-browser__lock[b-4hbwq3oiv7] { flex-shrink: 0; width: 7px; height: 9px; position: relative; opacity: 0.6; } .ref-browser__lock[b-4hbwq3oiv7]::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 5px; background: currentColor; border-radius: 1px; } .ref-browser__lock[b-4hbwq3oiv7]::after { content: ""; position: absolute; top: 0; left: 1px; width: 5px; height: 5px; border: 1px solid currentColor; border-bottom: none; border-radius: 2.5px 2.5px 0 0; } .ref-browser__host[b-4hbwq3oiv7] { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; letter-spacing: 0.02em; } /* screen area */ .ref-browser__screen[b-4hbwq3oiv7] { flex: 1; background: #000; overflow: hidden; min-height: 0; } .ref-browser__screen img[b-4hbwq3oiv7] { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } /* --- mobile -------------------------------------------------------- */ @media (max-width: 760px) { .ref-slide[b-4hbwq3oiv7] { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 1.5rem; padding: clamp(1.5rem, 3vw, 2rem); } .ref-slide__visual[b-4hbwq3oiv7] { order: -1; justify-content: center; } .ref-slide__text[b-4hbwq3oiv7] { justify-self: stretch; } .ref-slide__visual img[b-4hbwq3oiv7] { max-height: 40svh; } .ref-slide__headline[b-4hbwq3oiv7] { font-size: clamp(1.3rem, 5vw, 1.8rem); } .ref-slide.is-header[b-4hbwq3oiv7] { padding-left: clamp(1.5rem, 3vw, 2rem); } } /* --- reduced motion ------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .refs[b-4hbwq3oiv7] { scroll-behavior: auto; } .ref-slide__visual img[b-4hbwq3oiv7] { transition: none; } } /* /Components/Pages/ServiceDetail.razor.rz.scp.css */ /* ========================================================= Service detail — /services/{slug} Theme tokens come from — see wwwroot/app.css ========================================================= */ /* Page width + horizontal padding live on . This section just sets the dark theme + vertical rhythm. */ .service-detail[b-l0zptncejo] { position: relative; color: var(--bone); font-family: var(--font-body); -webkit-font-smoothing: antialiased; min-height: calc(100svh - var(--site-header-h, 0px)); padding-block: clamp(2.5rem, 5vh, 4rem) clamp(3rem, 6vh, 5rem); display: flex; flex-direction: column; gap: clamp(2.5rem, 5vh, 4rem); } /* Grain rule lives in app.css. Type/colour for back-link, eyebrow, and title come from utility classes (.u-mono .u-text-xs etc.). */ .service-detail__back[b-l0zptncejo] { position: relative; z-index: 1; align-self: flex-start; width: 100%; margin: 0 auto; text-decoration: none; transition: color 0.3s ease; } .service-detail__back:hover[b-l0zptncejo] { color: var(--accent, var(--signal)); } /* --- hero -------------------------------------------------------- */ .service-detail__hero[b-l0zptncejo] { position: relative; z-index: 1; width: 100%; max-width: 56rem; display: flex; flex-direction: column; gap: 1rem; } /* Title is a flex row: art on the left sized to match the title's height via aspect-ratio + align-items stretch; text right of it, vertically centered. (Display font + tracking from .u-display .u-w-800 .u-track-tight on the H1.) */ .service-detail__title[b-l0zptncejo] { margin: 0; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.05; display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.5rem); } .service-detail__icon[b-l0zptncejo] { /* Em-based sizing so the icon scales with the title font. Same rationale as Services.razor.css. */ flex-shrink: 0; width: 2em; height: 2em; border: 1px solid var(--bone-faint); border-radius: 14px; overflow: hidden; position: relative; display: block; } .service-detail__title-text[b-l0zptncejo] { display: inline-block; } /* (eyebrow + duplicate title rule removed — utilities cover these.) */ /* Stacked lede: tagline pull-quote sits above the body description so they read as a single vertical block — gives the description more breathing room across the full content width. */ .service-detail__lede[b-l0zptncejo] { display: flex; flex-direction: column; gap: clamp(1rem, 2vh, 1.5rem); padding-top: clamp(0.75rem, 1.5vh, 1.25rem); } .service-detail__tagline[b-l0zptncejo] { margin: 0; font-family: var(--font-display); font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--bone); font-weight: 600; padding-left: clamp(0.9rem, 1.5vw, 1.25rem); border-left: 3px solid var(--accent, var(--signal)); align-self: start; } .service-detail__description[b-l0zptncejo] { margin: 0; font-size: clamp(0.98rem, 1.15vw, 1.1rem); line-height: 1.65; } /* Lede is already a vertical flex stack — no narrow-viewport override needed. */ .service-detail__description[b-l0zptncejo] a { color: var(--accent, var(--signal)); text-decoration: underline; text-underline-offset: 2px; } .service-detail__description[b-l0zptncejo] b { color: var(--bone); font-weight: 700; } /* --- sections ---------------------------------------------------- */ .service-detail__section[b-l0zptncejo] { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; gap: 1.25rem; padding-top: clamp(1rem, 3vh, 2rem); border-top: 1px solid var(--bone-faint); } .service-detail__section-title[b-l0zptncejo] { margin: 0; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-dim); } /* --- highlights list -------------------------------------------- */ .service-detail__list[b-l0zptncejo] { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(1rem, 1.75vw, 1.5rem); } .service-detail__list-item[b-l0zptncejo] { position: relative; padding: clamp(1rem, 1.5vw, 1.25rem) clamp(1rem, 1.5vw, 1.25rem) clamp(1rem, 1.5vw, 1.25rem) calc(clamp(1rem, 1.5vw, 1.25rem) + 1rem); font-size: clamp(0.95rem, 1.1vw, 1.05rem); line-height: 1.55; color: var(--bone); border: 1px solid var(--bone-faint); border-radius: 10px; background: rgba(var(--bone-rgb), 0.02); } .service-detail__list-item[b-l0zptncejo]::before { content: ""; position: absolute; /* Dot center aligns with the vertical midpoint of the first text line: padding-top + ~0.55em above the dot's own diameter. Using `em` keeps the alignment stable when font-size scales via clamp. */ top: calc(clamp(1rem, 1.5vw, 1.25rem) + 0.55em); left: clamp(1rem, 1.5vw, 1.25rem); width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--accent, var(--signal)); } .service-detail__list-item[b-l0zptncejo] strong { display: block; margin-bottom: 0.25rem; color: var(--bone); font-weight: 700; letter-spacing: -0.005em; } .service-detail__list-item[b-l0zptncejo] a { color: var(--accent, var(--signal)); text-decoration: underline; text-underline-offset: 2px; } /* --- capability cloud ------------------------------------------- */ /* Four horizontal rows of pills that scroll in alternating directions for a zig-zag rhythm. A soft horizontal mask fades the pills in and out at both ends of the viewport. */ .capability-intro[b-l0zptncejo] { margin: 0; max-width: 48rem; font-size: clamp(0.98rem, 1.1vw, 1.08rem); line-height: 1.55; color: var(--bone-dim); } .capability-cloud[b-l0zptncejo] { width: 100%; overflow: hidden; display: flex; flex-direction: column; gap: clamp(0.5rem, 1vw, 0.75rem); padding-block: 0.25rem; mask-image: linear-gradient(90deg, transparent 0%, black 7%, black 93%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 7%, black 93%, transparent 100%); } .capability-cloud__row[b-l0zptncejo] { display: flex; flex-wrap: nowrap; width: max-content; /* See note on the marquee track in References.razor.css for why spacing lives on each label's margin instead of a flex `gap`: a gap would break the -50% translate's seamless loop. */ animation: ccloud-scroll-left-b-l0zptncejo 80s linear infinite; } .capability-cloud__row:nth-child(even)[b-l0zptncejo] { animation-name: ccloud-scroll-right-b-l0zptncejo; } /* Stagger the cadence per row so rows never line up mechanically. */ .capability-cloud__row:nth-child(1)[b-l0zptncejo] { animation-duration: 170s; } .capability-cloud__row:nth-child(2)[b-l0zptncejo] { animation-duration: 145s; } .capability-cloud__row:nth-child(3)[b-l0zptncejo] { animation-duration: 195s; } .capability-cloud__row:nth-child(4)[b-l0zptncejo] { animation-duration: 160s; } .capability-cloud:hover .capability-cloud__row[b-l0zptncejo], .capability-cloud:focus-within .capability-cloud__row[b-l0zptncejo] { animation-play-state: paused; } @keyframes ccloud-scroll-left-b-l0zptncejo { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @keyframes ccloud-scroll-right-b-l0zptncejo { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } } .capability-label[b-l0zptncejo] { flex-shrink: 0; display: inline-flex; align-items: center; padding: 0.35rem 0.7rem; margin-inline-end: clamp(0.35rem, 0.7vw, 0.55rem); font-size: clamp(0.78rem, 0.95vw, 0.92rem); line-height: 1.2; color: var(--bone); border: 1px solid var(--bone-faint); border-radius: 999px; background: rgba(var(--bone-rgb), 0.03); white-space: nowrap; transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease; cursor: default; } .capability-label:hover[b-l0zptncejo] { color: var(--accent, var(--signal)); border-color: color-mix(in srgb, var(--accent, var(--signal)) 55%, transparent); background: color-mix(in srgb, var(--accent, var(--signal)) 10%, transparent); } @media (prefers-reduced-motion: reduce) { .capability-cloud__row[b-l0zptncejo] { animation: none; } .capability-label[b-l0zptncejo] { transition: none; } } /* --- process steps ---------------------------------------------- */ .service-detail__steps[b-l0zptncejo] { list-style: none; margin: 0; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: 0.9rem; } .service-detail__step[b-l0zptncejo] { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: baseline; padding: clamp(0.85rem, 1.5vh, 1.15rem) 0; border-bottom: 1px dashed var(--bone-faint); } .service-detail__step:last-child[b-l0zptncejo] { border-bottom: none; } .service-detail__step-num[b-l0zptncejo] { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.12em; color: var(--accent, var(--signal)); min-width: 2.5rem; } .service-detail__step-body[b-l0zptncejo] { font-size: clamp(0.98rem, 1.1vw, 1.08rem); line-height: 1.55; color: var(--bone); } .service-detail__step-body[b-l0zptncejo] a { color: var(--accent, var(--signal)); text-decoration: underline; text-underline-offset: 2px; } /* --- Workshop (concrete offering, stands out) ------------------- */ .workshop[b-l0zptncejo] { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; gap: clamp(1.5rem, 3vh, 2.5rem); padding: clamp(1.75rem, 3.5vw, 2.75rem); border: 1px solid color-mix(in srgb, var(--accent, var(--signal)) 35%, transparent); border-radius: 14px; background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--accent, var(--signal)) 14%, transparent) 0%, transparent 55%), rgba(var(--bone-rgb), 0.02); } .workshop__head[b-l0zptncejo] { display: flex; flex-direction: column; gap: 0.65rem; max-width: 44rem; } .workshop__eyebrow[b-l0zptncejo] { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent, var(--signal)); } .workshop__title[b-l0zptncejo] { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1.05; letter-spacing: -0.015em; } .workshop__tagline[b-l0zptncejo] { margin: 0; font-size: clamp(1.05rem, 1.25vw, 1.2rem); line-height: 1.4; color: var(--bone); font-weight: 500; } .workshop__pitch[b-l0zptncejo] { margin: 0; font-size: clamp(0.98rem, 1.15vw, 1.08rem); line-height: 1.6; color: var(--bone-dim); } /* Wraps the duration + price chips so they sit on one row, wrapping naturally on narrow viewports. */ .workshop__meta[b-l0zptncejo] { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; } .workshop__duration[b-l0zptncejo], .workshop__price[b-l0zptncejo] { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; padding: 0.4rem 0.75rem; border-radius: 999px; } .workshop__duration[b-l0zptncejo] { color: var(--bone-dim); border: 1px solid var(--bone-faint); } /* Price reads slightly louder than duration — it answers a real buyer question, so it gets the accent color and a tinted fill without shouting like a primary CTA. */ .workshop__price[b-l0zptncejo] { color: var(--accent, var(--signal)); border: 1px solid color-mix(in srgb, var(--accent, var(--signal)) 45%, transparent); background: color-mix(in srgb, var(--accent, var(--signal)) 10%, transparent); } .workshop__grid[b-l0zptncejo] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); padding-top: clamp(1rem, 2vh, 1.5rem); border-top: 1px solid var(--bone-faint); } .workshop__block[b-l0zptncejo] { display: flex; flex-direction: column; gap: 0.7rem; } .workshop__block-title[b-l0zptncejo] { margin: 0; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-dim); } .workshop__list[b-l0zptncejo] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.55rem; } .workshop__list li[b-l0zptncejo] { position: relative; padding-left: 1rem; font-size: clamp(0.93rem, 1.05vw, 1rem); line-height: 1.5; color: var(--bone); } .workshop__list li[b-l0zptncejo]::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: color-mix(in srgb, var(--accent, var(--signal)) 60%, transparent); } .workshop__list[b-l0zptncejo] strong { color: var(--bone); font-weight: 700; } .workshop__list[b-l0zptncejo] em { color: var(--accent, var(--signal)); font-style: italic; } .workshop__cta[b-l0zptncejo] { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.9rem 1.35rem; color: var(--ink); background: var(--accent, var(--signal)); border: 1px solid var(--accent, var(--signal)); border-radius: 999px; text-decoration: none; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; transition: background 0.25s ease, transform 0.25s ease; } .workshop__cta:hover[b-l0zptncejo] { background: color-mix(in srgb, var(--accent, var(--signal)) 85%, white); transform: translateY(-2px); } .workshop__cta-arrow[b-l0zptncejo] { transition: transform 0.25s ease; } .workshop__cta:hover .workshop__cta-arrow[b-l0zptncejo] { transform: translateX(3px); } /* --- case study previews (link to full detail pages) ------------ */ .case-intro[b-l0zptncejo] { margin: 0; max-width: 48rem; font-size: clamp(0.98rem, 1.1vw, 1.08rem); line-height: 1.55; color: var(--bone-dim); } /* 2×2 layout — exactly two columns, regardless of viewport (until it gets too narrow to host two side-by-side, then collapses). */ .case-grid[b-l0zptncejo] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 1.75vw, 1.5rem); } @media (max-width: 640px) { .case-grid[b-l0zptncejo] { grid-template-columns: 1fr; } } .case-preview[b-l0zptncejo] { display: flex; flex-direction: column; gap: 0.75rem; padding: clamp(1.2rem, 2vw, 1.6rem); border: 1px solid var(--bone-faint); border-radius: 12px; background: rgba(var(--bone-rgb), 0.02); text-decoration: none; color: inherit; transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; } .case-preview:hover[b-l0zptncejo], .case-preview:focus-visible[b-l0zptncejo] { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent, var(--signal)) 50%, transparent); background: radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--accent, var(--signal)) 10%, transparent) 0%, transparent 60%), rgba(var(--bone-rgb), 0.03); box-shadow: 0 14px 36px -22px color-mix(in srgb, var(--accent, var(--signal)) 45%, transparent); outline: none; } .case-preview__sector[b-l0zptncejo] { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent, var(--signal)); } .case-preview__headline[b-l0zptncejo] { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--bone); } .case-preview__customer[b-l0zptncejo] { margin: 0; font-size: clamp(0.88rem, 1vw, 0.95rem); line-height: 1.5; color: var(--bone-dim); flex: 1; } .case-preview__more[b-l0zptncejo] { margin-top: 0.2rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-dim); transition: color 0.25s ease; } .case-preview__arrow[b-l0zptncejo] { display: inline-block; transition: transform 0.25s ease; } .case-preview:hover .case-preview__more[b-l0zptncejo], .case-preview:focus-visible .case-preview__more[b-l0zptncejo] { color: var(--accent, var(--signal)); } .case-preview:hover .case-preview__arrow[b-l0zptncejo], .case-preview:focus-visible .case-preview__arrow[b-l0zptncejo] { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .case-preview[b-l0zptncejo], .case-preview__more[b-l0zptncejo], .case-preview__arrow[b-l0zptncejo] { transition: none; } } /* --- closing note ----------------------------------------------- */ .service-detail__closing[b-l0zptncejo] { position: relative; z-index: 1; width: 100%; padding: clamp(1.25rem, 2.5vw, 2rem); border-left: 3px solid var(--accent, var(--signal)); background: color-mix(in srgb, var(--accent, var(--signal)) 6%, transparent); border-radius: 0 10px 10px 0; } .service-detail__closing p[b-l0zptncejo] { margin: 0; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.6; color: var(--bone); } .service-detail__closing[b-l0zptncejo] a { color: var(--accent, var(--signal)); text-decoration: underline; text-underline-offset: 2px; } .service-detail__closing[b-l0zptncejo] b { color: var(--bone); font-weight: 700; } .service-detail__closing[b-l0zptncejo] em { color: var(--accent, var(--signal)); font-style: italic; } /* --- CTA --------------------------------------------------------- */ .service-detail__cta[b-l0zptncejo] { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; gap: clamp(1rem, 2vh, 1.5rem); align-items: flex-start; padding: clamp(1.75rem, 3.5vw, 2.5rem); border: 1px solid var(--bone-faint); border-radius: 14px; background: radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--accent, var(--signal)) 12%, transparent) 0%, transparent 60%), rgba(var(--bone-rgb), 0.02); } .service-detail__cta-heading[b-l0zptncejo] { margin: 0 0 0.35rem; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.1; letter-spacing: -0.01em; } .service-detail__cta-lead[b-l0zptncejo] { margin: 0; color: var(--bone-dim); font-size: 0.95rem; line-height: 1.5; } .service-detail__cta-actions[b-l0zptncejo] { display: flex; flex-wrap: wrap; gap: 0.6rem; } .service-detail__btn[b-l0zptncejo] { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.2rem; border: 1px solid var(--bone-faint); border-radius: 999px; color: var(--bone); text-decoration: none; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; } .service-detail__btn:hover[b-l0zptncejo] { border-color: var(--accent, var(--signal)); background: color-mix(in srgb, var(--accent, var(--signal)) 7%, transparent); transform: translateY(-1px); } .service-detail__btn.is-primary[b-l0zptncejo] { color: var(--ink); background: var(--accent, var(--signal)); border-color: var(--accent, var(--signal)); } .service-detail__btn.is-primary:hover[b-l0zptncejo] { background: color-mix(in srgb, var(--accent, var(--signal)) 85%, white); transform: translateY(-2px); } .service-detail__btn-arrow[b-l0zptncejo] { transition: transform 0.25s ease; } .service-detail__btn:hover .service-detail__btn-arrow[b-l0zptncejo] { transform: translateX(3px); } /* --- 404 / empty state ------------------------------------------- */ .service-detail--empty[b-l0zptncejo] { justify-content: center; text-align: center; } .service-detail__empty[b-l0zptncejo] { display: flex; flex-direction: column; gap: 1rem; align-items: center; max-width: 30rem; position: relative; z-index: 1; } .service-detail__empty h1[b-l0zptncejo] { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.15; } .service-detail__empty p[b-l0zptncejo] { margin: 0; color: var(--bone-dim); } /* --- mobile ------------------------------------------------------ */ /* .service-detail__cta is a vertical flex stack — no narrow- viewport override needed. */ /* /Components/Pages/Services.razor.rz.scp.css */ /* ========================================================= Services — 2x2 grid of card-style services. Theme tokens come from (see wwwroot/app.css). Per-service .service-art visuals live in global app.css (scoped CSS can't reach elements rendered by other components, and the same art is reused on the detail page hero). ========================================================= */ /* Page width + horizontal padding live on . This section just sets the dark theme, vertical rhythm, and stack layout for the intro + grid. */ .services[b-qzkop4jcqk] { color: var(--bone); font-family: var(--font-body); -webkit-font-smoothing: antialiased; min-height: calc(100svh - var(--site-header-h, 0px)); padding-block: clamp(3rem, 8vh, 6rem); display: flex; flex-direction: column; gap: clamp(3rem, 6vh, 5rem); } /* --- intro -------------------------------------------------------- */ .services__intro[b-qzkop4jcqk] { text-align: left; display: grid; gap: 0.9rem; } /* Per-page leftovers only — type/color come from utility classes (.u-mono .u-text-xs .u-track-wide .u-upper .u-signal etc.). */ .services__title[b-qzkop4jcqk] { margin: 0; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; } .services__lead[b-qzkop4jcqk] { margin: 0; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.55; max-width: 38rem; } /* --- grid --------------------------------------------------------- */ .services__grid[b-qzkop4jcqk] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2.4vw, 2rem); } @media (max-width: 640px) { .services__grid[b-qzkop4jcqk] { grid-template-columns: 1fr; } } /* --- service card ------------------------------------------------- */ .service[b-qzkop4jcqk] { position: relative; display: flex; flex-direction: column; color: inherit; text-decoration: none; background: color-mix(in srgb, var(--bone) 3%, transparent); /* background-clip: padding-box keeps the card background from painting under the 1px border — otherwise the art gradient at the edge looks like it's bleeding into / over the border. */ background-clip: padding-box; border: 1px solid var(--bone-faint); border-radius: 18px; overflow: hidden; /* Safari only: overflow:hidden + border-radius doesn't reliably clip GPU-composited descendants (the art tile has a filter, and its ::after cursor glow uses translate3d — both promote to their own layers, which can render past the rounded corners). clip-path with the same radius forces the clip to apply at the compositor stage. We also round the inner art tile directly below as a second line of defence. */ clip-path: inset(0 round 18px); isolation: isolate; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease; } .service:hover[b-qzkop4jcqk], .service:focus-visible[b-qzkop4jcqk] { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent, var(--signal)) 55%, transparent); background: color-mix(in srgb, var(--accent, var(--bone)) 4%, transparent); box-shadow: 0 28px 60px -30px color-mix(in srgb, var(--accent, var(--ink)) 45%, transparent); outline: none; } /* --- art region --------------------------------------------------- */ /* Art region: plain ink field hosting the gradient tile + a subtle corner vignette so the brightest parts dissolve into the card's rounded clip instead of meeting it sharply. The TOP corners are rounded to match the card (minus the 1px border) so even if Safari fails to clip composited descendants to the outer card radius, the art tile itself enforces the rounding at its source. */ .service__art[b-qzkop4jcqk] { position: relative; /* 5:2 keeps the gradient tile a wide, calm strip rather than a tall block — the cards read as compact summary tiles, not hero panels. Single-column at narrow widths uses the same ratio so the page doesn't suddenly feel image-heavy. */ aspect-ratio: 5 / 2; overflow: hidden; background: var(--ink); box-shadow: inset 0 -1px 0 0 var(--bone-faint); border-top-left-radius: 17px; border-top-right-radius: 17px; } /* Full-bleed gradient art tile inside the card clip. No own border — the card's outer border is the only frame. Dampened a touch because the same gradient that sings at hero size reads too hot at card size. Hover restores saturation and drives the global cursor-tracked glow via --glow-strength. */ .service__art .service-art[b-qzkop4jcqk] { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 0; border: none; filter: saturate(0.88) brightness(0.86); transition: filter 0.5s ease; } .service:hover .service-art[b-qzkop4jcqk], .service:focus-visible .service-art[b-qzkop4jcqk] { --glow-strength: 1; filter: saturate(1.02) brightness(0.96) contrast(1.02); } /* Four corner-anchored radials darken each rounded corner so the bright accent gradients (e.g. Digital product's top-left sun) don't visibly spill past the clip. The fade target is a fixed near-black — NOT var(--ink) — because the .service-art tile underneath has its own dark base in both light and dark themes (the gradient stack in app.css uses #090611 regardless of mode). Using --ink here turned the corners white in light mode. */ .service__art[b-qzkop4jcqk]::after { --vignette-tone: #090611; content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at 0% 0%, var(--vignette-tone) 0%, color-mix(in srgb, var(--vignette-tone) 70%, transparent) 12%, transparent 32%), radial-gradient(circle at 100% 0%, var(--vignette-tone) 0%, color-mix(in srgb, var(--vignette-tone) 70%, transparent) 12%, transparent 32%), radial-gradient(circle at 0% 100%, var(--vignette-tone) 0%, color-mix(in srgb, var(--vignette-tone) 70%, transparent) 12%, transparent 32%), radial-gradient(circle at 100% 100%, var(--vignette-tone) 0%, color-mix(in srgb, var(--vignette-tone) 70%, transparent) 12%, transparent 32%); } /* --- number badge (top-left of art) ------------------------------ */ /* Number sits quietly in the top-left of the art tile. No chrome — just monospaced text at low opacity so it reads like a margin note rather than a badge. Text-shadow keeps it legible against any accent gradient. */ /* The number sits on the dark art tile in BOTH themes (the tile's base gradient is fixed #090611 in app.css). So the colour is hard-coded to a light bone tone — using var(--bone) would flip it to dark in light mode and the digits would vanish. Same reason the screen blend was dropped: it relied on a light bone to visibly screen against the dark art. */ .service__num[b-qzkop4jcqk] { position: absolute; top: clamp(0.75rem, 1.2vw, 1rem); left: clamp(0.9rem, 1.5vw, 1.25rem); z-index: 3; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(237, 231, 217, 0.72); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); padding: 0; border: none; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; transition: color 0.3s ease; } .service:hover .service__num[b-qzkop4jcqk], .service:focus-visible .service__num[b-qzkop4jcqk] { color: rgb(237, 231, 217); } /* --- body --------------------------------------------------------- */ .service__body[b-qzkop4jcqk] { display: flex; flex-direction: column; gap: clamp(0.5rem, 1vh, 0.75rem); padding: clamp(1rem, 1.8vw, 1.35rem) clamp(1rem, 1.8vw, 1.35rem) clamp(1.15rem, 2.2vw, 1.6rem); } .service__heading[b-qzkop4jcqk] { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--bone); } .service__tagline[b-qzkop4jcqk] { margin: 0; font-size: clamp(0.88rem, 0.95vw, 0.98rem); line-height: 1.5; color: var(--bone-dim); } /* --- "Read more" chip -------------------------------------------- */ .service__more[b-qzkop4jcqk] { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; padding: 0.5rem 0.9rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone); border: 1px solid color-mix(in srgb, var(--accent, var(--bone-faint)) 35%, transparent); border-radius: 999px; transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; } .service:hover .service__more[b-qzkop4jcqk], .service:focus-visible .service__more[b-qzkop4jcqk] { border-color: var(--accent, var(--signal)); background: color-mix(in srgb, var(--accent, var(--signal)) 12%, transparent); } .service__more-arrow[b-qzkop4jcqk] { transition: transform 0.25s ease; } .service:hover .service__more-arrow[b-qzkop4jcqk], .service:focus-visible .service__more-arrow[b-qzkop4jcqk] { transform: translateX(4px); } /* --- reduced motion ---------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .service[b-qzkop4jcqk], .service-art[b-qzkop4jcqk], .service__more[b-qzkop4jcqk], .service__more-arrow[b-qzkop4jcqk] { transition: none; } .service:hover[b-qzkop4jcqk], .service:focus-visible[b-qzkop4jcqk] { transform: none; } .service:hover .service-art[b-qzkop4jcqk], .service:focus-visible .service-art[b-qzkop4jcqk] { filter: none; } .service:hover .service__more-arrow[b-qzkop4jcqk], .service:focus-visible .service__more-arrow[b-qzkop4jcqk] { transform: none; } } /* /Components/Pages/Team.razor.rz.scp.css */ /* ========================================================= Team page — member grid with avatars ========================================================= */ /* Page width + horizontal padding live on . This section just sets the dark theme + vertical rhythm. */ .team[b-wmy9gssr9o] { position: relative; color: var(--bone); font-family: var(--font-body); -webkit-font-smoothing: antialiased; min-height: calc(100svh - var(--site-header-h, 0px)); padding-block: clamp(2.5rem, 5vh, 4rem) clamp(3rem, 6vh, 5rem); display: flex; flex-direction: column; gap: clamp(2rem, 4vh, 3rem); } /* Grain rule lives in app.css. Type + colour from utility classes. */ .team__header[b-wmy9gssr9o] { text-align: center; max-width: 44rem; /* Anchor to page center: the parent .team is a flex column without align-items:center (kept left-aligned for the grid), so the header centers itself horizontally inside the PageContainer with auto margins. */ margin-inline: auto; display: grid; gap: clamp(0.6rem, 1.2vh, 1rem); justify-items: center; padding-top: clamp(1rem, 4vh, 3rem); position: relative; z-index: 1; } .team__title[b-wmy9gssr9o] { margin: 0; font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1; } .team__lead[b-wmy9gssr9o] { margin: 0; font-size: clamp(0.95rem, 1.15vw, 1.1rem); line-height: 1.55; max-width: 38rem; } /* --- member grid --------------------------------------------------- */ .team__grid[b-wmy9gssr9o] { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: clamp(1.5rem, 2.5vw, 2.25rem); position: relative; z-index: 1; } /* --- member card --------------------------------------------------- */ .member-card[b-wmy9gssr9o] { position: relative; display: flex; flex-direction: column; gap: 0.75rem; padding: clamp(1.3rem, 2vw, 1.8rem) clamp(1rem, 1.5vw, 1.3rem) clamp(1.1rem, 1.8vw, 1.5rem); border: 1px solid var(--bone-faint); border-radius: 12px; background: rgba(var(--bone-rgb), 0.02); text-align: center; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease; } .member-card:hover[b-wmy9gssr9o], .member-card:focus-within[b-wmy9gssr9o] { transform: translateY(-3px); border-color: rgba(var(--signal-rgb), 0.3); box-shadow: 0 12px 32px -16px rgba(var(--signal-rgb), 0.18); } /* --- clickable region (whole card minus socials) ----------------- */ .member-card__link[b-wmy9gssr9o] { /* flex:1 makes this section absorb any remaining vertical space so the socials below sit at the card's bottom. Combined with the parent grid's default `align-items: stretch`, that bottoms-up alignment is consistent across every card in the same row — no subgrid needed. */ flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; color: inherit; text-decoration: none; outline: none; } .member-card__link:focus-visible[b-wmy9gssr9o] { outline: 1px solid var(--signal); outline-offset: 4px; border-radius: 8px; } /* Stretched-link overlay: makes the entire card area clickable, not just the avatar/body region. The article is position:relative, so this pseudo-element fills it. Social links opt back above with z-index so they remain individually clickable. */ .member-card__link[b-wmy9gssr9o]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .member-card__social[b-wmy9gssr9o] { position: relative; z-index: 1; } /* --- avatar -------------------------------------------------------- */ .member-card__avatar[b-wmy9gssr9o] { width: clamp(84px, 9vw, 104px); height: clamp(84px, 9vw, 104px); border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid var(--bone-faint); transition: border-color 0.3s ease; } .member-card:hover .member-card__avatar[b-wmy9gssr9o], .member-card:focus-within .member-card__avatar[b-wmy9gssr9o] { border-color: rgba(var(--signal-rgb), 0.4); } .member-card__avatar img[b-wmy9gssr9o] { width: 100%; height: 100%; object-fit: cover; display: block; } .member-card__initials[b-wmy9gssr9o] { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(var(--signal-rgb), 0.12); color: var(--signal); font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; letter-spacing: 0.03em; } /* --- name + role --------------------------------------------------- */ .member-card__body[b-wmy9gssr9o] { display: flex; flex-direction: column; gap: 0.3rem; align-items: center; } .member-card__name[b-wmy9gssr9o] { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; line-height: 1.2; } .member-card__role[b-wmy9gssr9o] { margin: 0; font-size: 0.78rem; line-height: 1.4; color: var(--bone-dim); max-width: 14rem; } /* --- socials (centered row pinned at card bottom) ---------------- */ .member-card__social[b-wmy9gssr9o] { display: flex; justify-content: center; gap: 0.5rem; } .member-card__social-link[b-wmy9gssr9o] { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--bone-faint); color: var(--bone-dim); text-decoration: none; transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; } .member-card__social-link svg[b-wmy9gssr9o] { width: 14px; height: 14px; } .member-card__social-link:hover[b-wmy9gssr9o] { color: var(--signal); border-color: var(--signal); background: rgba(var(--signal-rgb), 0.08); transform: translateY(-1px); } @media (prefers-reduced-motion: reduce) { .member-card[b-wmy9gssr9o], .member-card__avatar[b-wmy9gssr9o], .member-card__social-link[b-wmy9gssr9o] { transition: none; } } /* --- "this could be you" card ----------------------------------- */ /* Sits at the end of the grid, same footprint as a member card but visually distinct: dashed border, accent-coloured plus icon, and links to /careers instead of a profile page. */ .member-card--open[b-wmy9gssr9o] { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; text-decoration: none; color: inherit; border: 1px dashed color-mix(in srgb, var(--signal) 45%, var(--bone-faint)); background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--signal) 10%, transparent) 0%, transparent 65%), rgba(var(--bone-rgb), 0.02); } .member-card--open:hover[b-wmy9gssr9o], .member-card--open:focus-visible[b-wmy9gssr9o] { transform: translateY(-3px); border-color: var(--signal); background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--signal) 16%, transparent) 0%, transparent 65%), rgba(var(--bone-rgb), 0.03); box-shadow: 0 14px 36px -20px rgba(var(--signal-rgb), 0.35); outline: none; } /* Avatar slot reused as the plus-icon disc */ .member-card__avatar--open[b-wmy9gssr9o] { display: flex; align-items: center; justify-content: center; background: rgba(var(--signal-rgb), 0.12); color: var(--signal); border-color: color-mix(in srgb, var(--signal) 45%, var(--bone-faint)); } .member-card__avatar--open svg[b-wmy9gssr9o] { width: 40%; height: 40%; display: block; } .member-card--open:hover .member-card__avatar--open[b-wmy9gssr9o], .member-card--open:focus-visible .member-card__avatar--open[b-wmy9gssr9o] { border-color: var(--signal); background: rgba(var(--signal-rgb), 0.18); } .member-card__open-cta[b-wmy9gssr9o] { margin-top: auto; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); display: inline-flex; align-items: center; gap: 0.4rem; } .member-card__open-arrow[b-wmy9gssr9o] { display: inline-block; transition: transform 0.25s ease; } .member-card--open:hover .member-card__open-arrow[b-wmy9gssr9o], .member-card--open:focus-visible .member-card__open-arrow[b-wmy9gssr9o] { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .member-card__open-arrow[b-wmy9gssr9o] { transition: none; } } /* /Components/Pages/TeamDetail.razor.rz.scp.css */ /* ========================================================= Team member detail page Theme tokens come from — see wwwroot/app.css ========================================================= */ /* Page width + horizontal padding live on . This section just sets the dark theme + vertical rhythm. */ .member-detail[b-xcyxbae9v2] { position: relative; color: var(--bone); font-family: var(--font-body); -webkit-font-smoothing: antialiased; min-height: calc(100svh - var(--site-header-h, 0px)); padding-block: clamp(2rem, 5vh, 4rem) clamp(3rem, 6vh, 5rem); display: flex; flex-direction: column; gap: clamp(2rem, 4vh, 3rem); } /* Grain rule lives in app.css. Type/colour from utility classes. */ .member-detail__back[b-xcyxbae9v2] { align-self: flex-start; width: 100%; margin: 0 auto; text-decoration: none; transition: color 0.3s ease; position: relative; z-index: 1; } .member-detail__back:hover[b-xcyxbae9v2] { color: var(--signal); } /* --- header ------------------------------------------------------- */ .member-detail__header[b-xcyxbae9v2] { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } .member-detail__avatar[b-xcyxbae9v2] { width: clamp(140px, 18vw, 220px); height: clamp(140px, 18vw, 220px); border-radius: 50%; overflow: hidden; border: 2px solid var(--bone-faint); flex-shrink: 0; box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.5); } .member-detail__avatar img[b-xcyxbae9v2] { width: 100%; height: 100%; object-fit: cover; display: block; } .member-detail__initials[b-xcyxbae9v2] { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(var(--signal-rgb), 0.14); color: var(--signal); font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem, 5vw, 4rem); } .member-detail__meta[b-xcyxbae9v2] { display: flex; flex-direction: column; gap: 0.75rem; } /* eyebrow / name type + colour come from utility classes. */ .member-detail__name[b-xcyxbae9v2] { margin: 0; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.05; } .member-detail__role[b-xcyxbae9v2] { margin: 0; font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.5; max-width: 36rem; } /* --- socials on detail ------------------------------------------- */ .member-detail__social[b-xcyxbae9v2] { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.8rem; } .member-detail__social-link[b-xcyxbae9v2] { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.9rem; border: 1px solid var(--bone-faint); border-radius: 999px; color: var(--bone-dim); text-decoration: none; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease; } .member-detail__social-link svg[b-xcyxbae9v2] { width: 16px; height: 16px; } .member-detail__social-link:hover[b-xcyxbae9v2] { color: var(--bone); border-color: rgba(var(--signal-rgb), 0.45); transform: translateY(-1px); } /* YouTube pill gets the brand-red accent on hover so it reads as distinct. */ .member-detail__social-link.is-youtube svg[b-xcyxbae9v2] { color: #FF0033; } .member-detail__social-link.is-youtube:hover[b-xcyxbae9v2] { border-color: rgba(255, 0, 51, 0.5); background: rgba(255, 0, 51, 0.08); } /* --- sections ---------------------------------------------------- */ .member-detail__section[b-xcyxbae9v2] { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; gap: 1rem; padding-top: clamp(1rem, 3vh, 2rem); border-top: 1px solid var(--bone-faint); } .member-detail__section-title[b-xcyxbae9v2] { margin: 0; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-dim); } .member-detail__certs[b-xcyxbae9v2] { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; } .member-detail__cert[b-xcyxbae9v2] { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; padding: 0.32rem 0.65rem; border-radius: 4px; border: 1px solid var(--bone-faint); color: var(--bone-dim); } /* --- About (narrative bullets sourced from idea/pages/team.md) --- */ .member-detail__about[b-xcyxbae9v2] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; max-width: 52rem; } .member-detail__about-line[b-xcyxbae9v2] { position: relative; padding-left: 1.1rem; font-size: clamp(0.92rem, 1.05vw, 1rem); line-height: 1.55; color: var(--bone-dim); } .member-detail__about-line[b-xcyxbae9v2]::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: color-mix(in srgb, var(--signal) 45%, transparent); } .member-detail__about-line[b-xcyxbae9v2] a { color: var(--signal); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: text-decoration-thickness 0.2s ease; } .member-detail__about-line[b-xcyxbae9v2] a:hover { text-decoration-thickness: 2px; } /* --- YouTube embeds + channel link ------------------------------- */ .member-detail__videos[b-xcyxbae9v2] { display: grid; /* Always three columns on desktop; collapses on narrow screens via the mobile media query below. minmax(0, 1fr) keeps cells from overflowing when titles/iframes try to push wider than the container. */ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.6rem, 1vw, 1rem); width: 100%; } @media (max-width: 860px) { .member-detail__videos[b-xcyxbae9v2] { grid-template-columns: 1fr; } } .member-detail__video[b-xcyxbae9v2] { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; } .member-detail__video-facade[b-xcyxbae9v2] { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: 10px; overflow: hidden; background: #000; border: 1px solid var(--bone-faint); box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.4); padding: 0; margin: 0; cursor: pointer; appearance: none; transition: transform 0.25s ease, box-shadow 0.25s ease; } .member-detail__video-facade:hover[b-xcyxbae9v2], .member-detail__video-facade:focus-visible[b-xcyxbae9v2] { transform: translateY(-2px); box-shadow: 0 14px 32px -14px rgba(0, 0, 0, 0.55); } .member-detail__video-facade:focus-visible[b-xcyxbae9v2] { outline: 2px solid var(--signal); outline-offset: 2px; } .member-detail__video-thumb[b-xcyxbae9v2] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .member-detail__video-play[b-xcyxbae9v2] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .member-detail__video-play svg[b-xcyxbae9v2] { width: clamp(48px, 18%, 68px); height: auto; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5)); transition: transform 0.2s ease; } .member-detail__video-play-bg[b-xcyxbae9v2] { fill: rgba(0, 0, 0, 0.65); transition: fill 0.2s ease; } .member-detail__video-facade:hover .member-detail__video-play svg[b-xcyxbae9v2], .member-detail__video-facade:focus-visible .member-detail__video-play svg[b-xcyxbae9v2] { transform: scale(1.06); } .member-detail__video-facade:hover .member-detail__video-play-bg[b-xcyxbae9v2], .member-detail__video-facade:focus-visible .member-detail__video-play-bg[b-xcyxbae9v2] { fill: #ff0033; } .member-detail__video-title[b-xcyxbae9v2] { font-family: var(--font-sans); font-size: 0.92rem; line-height: 1.35; color: var(--bone); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.2s ease; } .member-detail__video-title:hover[b-xcyxbae9v2], .member-detail__video-title:focus-visible[b-xcyxbae9v2] { color: var(--signal); } .member-detail__video-title:focus-visible[b-xcyxbae9v2] { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; text-decoration: underline; text-underline-offset: 2px; } .member-detail__video-frame[b-xcyxbae9v2] { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: 10px; overflow: hidden; background: #000; border: 1px solid var(--bone-faint); box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.4); } .member-detail__video iframe[b-xcyxbae9v2] { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* --- 404 / empty state ------------------------------------------- */ .member-detail--empty[b-xcyxbae9v2] { justify-content: center; text-align: center; } .member-detail__empty[b-xcyxbae9v2] { display: flex; flex-direction: column; gap: 1rem; align-items: center; max-width: 30rem; position: relative; z-index: 1; } .member-detail__empty h1[b-xcyxbae9v2] { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.1; } .member-detail__empty p[b-xcyxbae9v2] { margin: 0; color: var(--bone-dim); } /* --- mobile ------------------------------------------------------ */ @media (max-width: 760px) { .member-detail__header[b-xcyxbae9v2] { grid-template-columns: 1fr; justify-items: start; text-align: left; } }