/* ============================================================================ main.css -- Trionova IT Consulting Services LLP, final static stylesheet. 2026-08-28 migration (repo-wide policy reverted from Vite+Tailwind build to vanilla HTML/CSS/JS + GSAP, zero build pipeline): this project used Tailwind CSS v4 (@tailwindcss/vite) as its utility layer, with hand- authored CSS mixed in via the site's own @layer components block -- real Tailwind utility classes (hidden, lg:flex, grid, gap-12, md:grid-cols-4, hover:text-[...], etc.) appear directly in the generated HTML alongside this file's bespoke component classes (.nav, .btn-primary, .footer, ...). Since there is no bundler anymore to run Tailwind's JIT compiler at request time, the block below is Tailwind v4's ONE-TIME compiled output (npx @tailwindcss/cli@4.3.3, content scanned against every generated *.html file under src/, any depth) -- the exact same reset/theme/utility CSS @tailwindcss/vite used to generate at build time, just captured once as plain static CSS instead of regenerated on every request. It was produced from an isolated input (@import "tailwindcss" + this file's own @theme font-token block, nothing else) so the compiler never touched or reformatted the hand-authored CSS below -- that portion is byte-identical to what shipped under the old pipeline, comments included. Cross-checked class-for-class against the real npm run build output (dist/assets/ main-*.css) before this file replaced it -- zero missing utility classes. Cascade-layer order is preserved exactly as Tailwind itself declares it (@layer properties; @layer theme, base, components, utilities; below) -- this is what makes Tailwind utilities still correctly beat this file's own hand-authored @layer components rules on the same element, same as under the old build. sc-devices.css (the scrollcraft engine's device CSS, previously a separate file pulled in via @import "./sc-devices.css") is inlined verbatim into this same file below, in the same relative position it held in the old import order -- no more @import chain, one static file. Regenerate this compiled block (theme/base/utilities layers only, NEVER the hand-authored section) if Tailwind-style utility classes are ever added to new markup: run the @tailwindcss/cli package (pin the same version as below) against a temp entry file containing just `@import "tailwindcss";` plus this file's own @theme font-token block, with its content scanner pointed at every html file in the project, any depth, then paste the freshly compiled block back in above the "sc-devices.css" and hand-authored sections below, leaving them untouched. CAUTION, learned the hard way building this exact file: never write a literal two-asterisks-slash-asterisk glob token inside a CSS comment -- the "*" immediately before "/" closes the comment early and silently drops everything from @layer properties through @layer theme that follows it (confirmed live: cssRules showed @layer base as rule 0, @layer theme simply gone, --spacing/--font-display unresolved sitewide). Describe glob patterns in prose instead, as done just above. ============================================================================ */ /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ @layer properties; @layer theme, base, components, utilities; @layer theme { :root, :host { --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --spacing: 0.25rem; --container-2xl: 42rem; --container-3xl: 48rem; --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); --font-display: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; } } @layer base { *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; } html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } :-moz-focusring:where(:not(iframe)) { outline: auto; } progress { vertical-align: baseline; } summary { display: list-item; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea, ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; opacity: 1; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { ::placeholder { color: currentcolor; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, currentcolor 50%, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } ::-webkit-calendar-picker-indicator { line-height: 1; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden="until-found"])) { display: none !important; } } @layer utilities { .invisible { visibility: hidden; } .visible { visibility: visible; } .absolute { position: absolute; } .fixed { position: fixed; } .relative { position: relative; } .static { position: static; } .sticky { position: sticky; } .isolate { isolation: isolate; } .container { width: 100%; @media (width >= 40rem) { max-width: 40rem; } @media (width >= 48rem) { max-width: 48rem; } @media (width >= 64rem) { max-width: 64rem; } @media (width >= 80rem) { max-width: 80rem; } @media (width >= 96rem) { max-width: 96rem; } } .mt-4 { margin-top: calc(var(--spacing) * 4); } .mt-6 { margin-top: calc(var(--spacing) * 6); } .mt-8 { margin-top: calc(var(--spacing) * 8); } .mt-10 { margin-top: calc(var(--spacing) * 10); } .mt-12 { margin-top: calc(var(--spacing) * 12); } .mt-auto { margin-top: auto; } .mb-1 { margin-bottom: var(--spacing); } .mb-2 { margin-bottom: calc(var(--spacing) * 2); } .mb-3 { margin-bottom: calc(var(--spacing) * 3); } .mb-4 { margin-bottom: calc(var(--spacing) * 4); } .mb-5 { margin-bottom: calc(var(--spacing) * 5); } .mb-6 { margin-bottom: calc(var(--spacing) * 6); } .mb-8 { margin-bottom: calc(var(--spacing) * 8); } .mb-10 { margin-bottom: calc(var(--spacing) * 10); } .mb-12 { margin-bottom: calc(var(--spacing) * 12); } .mb-14 { margin-bottom: calc(var(--spacing) * 14); } .mb-16 { margin-bottom: calc(var(--spacing) * 16); } .block { display: block; } .flex { display: flex; } .grid { display: grid; } .hidden { display: none; } .inline { display: inline; } .inline-block { display: inline-block; } .inline-flex { display: inline-flex; } .table { display: table; } .w-full { width: 100%; } .max-w-2xl { max-width: var(--container-2xl); } .max-w-3xl { max-width: var(--container-3xl); } .flex-1 { flex: 1; } .flex-none { flex: none; } .shrink { flex-shrink: 1; } .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } .resize { resize: both; } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .gap-2 { gap: calc(var(--spacing) * 2); } .gap-3 { gap: calc(var(--spacing) * 3); } .gap-4 { gap: calc(var(--spacing) * 4); } .gap-5 { gap: calc(var(--spacing) * 5); } .gap-6 { gap: calc(var(--spacing) * 6); } .gap-7 { gap: calc(var(--spacing) * 7); } .gap-8 { gap: calc(var(--spacing) * 8); } .gap-12 { gap: calc(var(--spacing) * 12); } .gap-16 { gap: calc(var(--spacing) * 16); } .gap-px { gap: 1px; } .gap-x-12 { column-gap: calc(var(--spacing) * 12); } .gap-y-10 { row-gap: calc(var(--spacing) * 10); } .rounded { border-radius: 0.25rem; } .border { border-style: var(--tw-border-style); border-width: 1px; } .pt-4 { padding-top: calc(var(--spacing) * 4); } .pt-8 { padding-top: calc(var(--spacing) * 8); } .text-center { text-align: center; } .uppercase { text-transform: uppercase; } .tabular-nums { --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); } .underline { text-decoration-line: underline; } .shadow { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .outline { outline-style: var(--tw-outline-style); outline-width: 1px; } .blur { --tw-blur: blur(8px); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .drop-shadow { --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1))) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.06))); --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow( 0 1px 1px rgb(0 0 0 / 0.06)); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .grayscale { --tw-grayscale: grayscale(100%); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .filter { filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .backdrop-blur { --tw-backdrop-blur: blur(8px); -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } .backdrop-filter { -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } @media (hover: hover) { .hover\:text-\[var\(--accent-1\)\]:hover { color: var(--accent-1); } } @media (width >= 40rem) { .sm\:block { display: block; } .sm\:hidden { display: none; } .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:flex-row { flex-direction: row; } .sm\:whitespace-nowrap { white-space: nowrap; } } @media (width >= 48rem) { .md\:col-span-1 { grid-column: span 1 / span 1; } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:flex-row { flex-direction: row; } } @media (width >= 64rem) { .lg\:block { display: block; } .lg\:flex { display: flex; } .lg\:hidden { display: none; } .lg\:inline-flex { display: inline-flex; } .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .lg\:grid-cols-\[1fr_1\.4fr\] { grid-template-columns: 1fr 1.4fr; } .lg\:grid-cols-\[58\%_38\%\] { grid-template-columns: 58% 38%; } } } @property --tw-rotate-x { syntax: "*"; inherits: false; } @property --tw-rotate-y { syntax: "*"; inherits: false; } @property --tw-rotate-z { syntax: "*"; inherits: false; } @property --tw-skew-x { syntax: "*"; inherits: false; } @property --tw-skew-y { syntax: "*"; inherits: false; } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-ordinal { syntax: "*"; inherits: false; } @property --tw-slashed-zero { syntax: "*"; inherits: false; } @property --tw-numeric-figure { syntax: "*"; inherits: false; } @property --tw-numeric-spacing { syntax: "*"; inherits: false; } @property --tw-numeric-fraction { syntax: "*"; inherits: false; } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-shadow-color { syntax: "*"; inherits: false; } @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-shadow-color { syntax: "*"; inherits: false; } @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-ring-color { syntax: "*"; inherits: false; } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-ring-color { syntax: "*"; inherits: false; } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-ring-inset { syntax: "*"; inherits: false; } @property --tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0px; } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-blur { syntax: "*"; inherits: false; } @property --tw-brightness { syntax: "*"; inherits: false; } @property --tw-contrast { syntax: "*"; inherits: false; } @property --tw-grayscale { syntax: "*"; inherits: false; } @property --tw-hue-rotate { syntax: "*"; inherits: false; } @property --tw-invert { syntax: "*"; inherits: false; } @property --tw-opacity { syntax: "*"; inherits: false; } @property --tw-saturate { syntax: "*"; inherits: false; } @property --tw-sepia { syntax: "*"; inherits: false; } @property --tw-drop-shadow { syntax: "*"; inherits: false; } @property --tw-drop-shadow-color { syntax: "*"; inherits: false; } @property --tw-drop-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-drop-shadow-size { syntax: "*"; inherits: false; } @property --tw-backdrop-blur { syntax: "*"; inherits: false; } @property --tw-backdrop-brightness { syntax: "*"; inherits: false; } @property --tw-backdrop-contrast { syntax: "*"; inherits: false; } @property --tw-backdrop-grayscale { syntax: "*"; inherits: false; } @property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; } @property --tw-backdrop-invert { syntax: "*"; inherits: false; } @property --tw-backdrop-opacity { syntax: "*"; inherits: false; } @property --tw-backdrop-saturate { syntax: "*"; inherits: false; } @property --tw-backdrop-sepia { syntax: "*"; inherits: false; } @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { *, ::before, ::after, ::backdrop { --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-border-style: solid; --tw-ordinal: initial; --tw-slashed-zero: initial; --tw-numeric-figure: initial; --tw-numeric-spacing: initial; --tw-numeric-fraction: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-outline-style: solid; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; --tw-grayscale: initial; --tw-hue-rotate: initial; --tw-invert: initial; --tw-opacity: initial; --tw-saturate: initial; --tw-sepia: initial; --tw-drop-shadow: initial; --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; --tw-backdrop-blur: initial; --tw-backdrop-brightness: initial; --tw-backdrop-contrast: initial; --tw-backdrop-grayscale: initial; --tw-backdrop-hue-rotate: initial; --tw-backdrop-invert: initial; --tw-backdrop-opacity: initial; --tw-backdrop-saturate: initial; --tw-backdrop-sepia: initial; } } } /* ============================================================================ Inlined from the former sc-devices.css (verbatim, unchanged) -- the scrollcraft engine's DEVICE mechanism CSS. See its own header comment immediately below for what it is and why it stays separate in spirit (own clearly-marked section) even though it now lives in one physical file post-migration. ============================================================================ */ /* ============================================================================ sc-devices.css — the scrollcraft engine's DEVICE mechanism CSS only. Extracted from the skill's engine/scrollcraft.css (lines 174-432 there): the [data-sc-*] selectors the JS runtime actually drives. Deliberately NOT the skill file's tokens/reset/typography layers — this project already has its own equivalent (main.css's :root tokens + Tailwind preflight), and scrollcraft.css's un-layered `body`/`html` rules would otherwise beat this file's @layer components rules under CSS cascade-layer precedence regardless of import order. Do not restyle these selectors to taste; they are the mechanism scrollcraft.js reads/writes every frame. Style your own markup (the classes alongside data-sc-* attributes in home.mjs) instead. Token bridge: the --sc-* custom properties these rules read are aliased to this project's own DESIGN.md tokens directly below, not redefined. */ :root { --sc-canvas: var(--bg); --sc-surface: var(--bg-alt); --sc-ink: var(--ink); --sc-ink-soft: var(--muted); --sc-accent: var(--accent-1); --sc-accent-ink: var(--bg); --sc-hairline: var(--border-dark); --sc-gutter: clamp(1.25rem, 5vw, 5.5rem); --sc-maxw: 82rem; --sc-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --sc-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --sc-d-slow: 420ms; --sc-z-stage: 1; --sc-z-copy: 20; --sc-z-chrome: 60; } @layer components { /* =============================================================== DEVICES == Driven by the engine. Restyle your own markup, not these. */ .sc-act--pinned { position: relative; } .sc-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; z-index: var(--sc-z-stage); } /* scrub / sequence media */ .sc-stage :is(video[data-sc-scrub], canvas[data-sc-sequence], .sc-stage__poster) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } video[data-sc-scrub] { opacity: 0; transition: opacity 380ms var(--sc-ease-out); } .sc-has-clip video[data-sc-scrub] { opacity: 1; } /* The poster is a live frame-holder, not a placeholder: it stays up until a real video frame has painted, which is what stops the blank-stage flash. */ .sc-stage__poster { z-index: 0; transition: opacity 380ms var(--sc-ease-out); } .sc-has-clip .sc-stage__poster { opacity: 0; } /* A scrim only where text sits. A full-frame darkening layer flattens the image everywhere to fix contrast in one corner. */ .sc-scrim { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient( var(--sc-scrim-angle, 180deg), color-mix(in oklab, var(--sc-canvas) var(--sc-scrim-a, 78%), transparent) 0%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%, transparent 68%); } /* Point the scrim at the copy. A scrim gradient that darkens the top while the copy sits at the bottom fixes contrast nowhere and flattens the image everywhere, which is the most common way text-over-video goes wrong. */ .sc-scrim--bottom { --sc-scrim-angle: 0deg; } .sc-scrim--left { --sc-scrim-angle: 90deg; } .sc-scrim--right { --sc-scrim-angle: 270deg; } /* Corner scrims, for copy anchored to a corner. An edge gradient has to darken a whole band across the frame to cover one corner; a corner gradient puts the density where the text is and leaves the rest of the image alone. Pair with .sc-copy--lead / .sc-copy--trail. */ .sc-scrim--lead { background: linear-gradient(to top right, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%, transparent 72%); } .sc-scrim--trail { background: linear-gradient(to top left, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%, transparent 72%); } /* A band across the bottom, for copy that spans the full width of the frame. That is what both corner anchors become below 860px, and it is also the right shape whenever the copy block is wider than a corner. */ .sc-scrim--band { background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%, transparent 58%); } .sc-scrim--vignette { background: radial-gradient(120% 90% at 50% 45%, transparent 40%, color-mix(in oklab, var(--sc-canvas) 70%, transparent) 100%); } /* copy over a stage. max-width is in rem, never ch. A `ch` on this container resolves against the CONTAINER's font-size (body size), not the display size of the heading inside it, so `max-width: 20ch` here silently produces a ~180px column and wraps a hero headline to six lines. Set a ch measure on the text element itself. */ .sc-copy { position: absolute; z-index: var(--sc-z-copy); inset-inline: var(--sc-gutter); max-width: min(46rem, 76vw); will-change: opacity, transform; } .sc-copy--lead { left: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); } /* inset-inline FIRST. It is the shorthand for left+right, so declaring it after `left: 50%` resets left to auto and the block drifts off the left edge. */ .sc-copy--center { inset-inline: auto; left: 50%; top: 50%; translate: -50% -50%; text-align: center; } .sc-copy--trail { inset-inline: auto; right: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); text-align: right; } /* cue defaults: the engine writes opacity/transform inline, these are the pre-paint state so nothing flashes before the first read() */ [data-sc-cue] { opacity: 0; will-change: opacity, transform; } .sc-ready [data-sc-cue] { transition: none; } /* kinetic split */ .sc-split { display: inline-block; overflow: hidden; vertical-align: top; } /* Descenders live below the baseline; a line mask clipped to the line box eats the tails off g, y, p, j. The padding buys them room back. */ .sc-split--line { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; } .sc-split__i { display: inline-block; will-change: transform, opacity; } .sc-is-split { opacity: 1 !important; } /* horizontal rail */ [data-sc-pan] { display: flex; will-change: transform; } /* reveal + parallax */ [data-sc-reveal] { will-change: clip-path; } [data-sc-parallax] { will-change: transform; } /* flow reveal (fires once) */ [data-sc-in], [data-sc-stagger] > * { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out); } [data-sc-in].sc-in, [data-sc-stagger] > .sc-in { opacity: 1; transform: none; } /* pointer devices */ [data-sc-tilt] { transform-style: preserve-3d; will-change: transform; } [data-sc-magnet] { will-change: transform; } /* isolation always; position only if nothing more specific already set it. Written with :where() (zero specificity) on purpose: a plain `position: relative` here has the same weight as `.sc-stage` and, being later in the file, silently wins. A stage carrying both attributes then stops being sticky and the whole act scrolls away instead of pinning. */ [data-sc-spotlight] { isolation: isolate; } :where([data-sc-spotlight]) { position: relative; } [data-sc-spotlight]::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient( 28rem 28rem at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%), color-mix(in oklab, var(--sc-accent) 16%, transparent), transparent 70%); opacity: 0; transition: opacity var(--sc-d-slow) var(--sc-ease-out); } [data-sc-spotlight]:hover::after { opacity: 1; } /* =========================================================== WORLDFLIGHT == One fixed stage for the whole page. The only thing in document flow is the spacer, and it is empty. If you find yourself adding a section here, you want act mode instead: the moment a real block scrolls past the fixed stage, the page has a seam again and the whole point is gone. */ [data-sc-mode="worldflight"] { position: relative; } .sc-world { position: fixed; inset: 0; overflow: clip; z-index: var(--sc-z-stage); background: var(--sc-canvas); } /* Every leg is mounted for the life of the page and stacked in the same box. The engine owns opacity, visibility and z-index here; do not set them. */ .sc-world__seg { position: absolute; inset: 0; opacity: 0; will-change: opacity; } .sc-world__seg > :is(video, img, canvas) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* The poster is the frame-holder AND the first camera move: the engine pushes it in slowly until a real decoded frame is available to replace it. */ .sc-world__poster { z-index: 0; transform-origin: 50% 50%; transition: opacity 420ms var(--sc-ease-out); } .sc-world__seg > video { z-index: 1; } .sc-world__seg.sc-has-clip .sc-world__poster { opacity: 0; } /* The act stylesheet lights a clip through its ancestor act. A worldflight leg has no act, so match the class the engine also writes on the clip itself. */ video[data-sc-scrub].sc-has-clip { opacity: 1; } /* The copy layer is fixed too, and inert by default: the engine hands pointer-events back to a block only while it is actually legible. */ .sc-world__copy { position: fixed; inset: 0; z-index: var(--sc-z-copy); pointer-events: none; } .sc-world__scrim { position: absolute; inset: 0; pointer-events: none; z-index: 0; } [data-sc-copy] { opacity: 0; pointer-events: none; will-change: opacity, transform; } .sc-ready [data-sc-copy] { transition: none; } /* The track. Empty on purpose. */ .sc-world__spacer { pointer-events: none; } /* scroll progress */ [data-sc-progress] { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: var(--sc-z-chrome); background: var(--sc-accent); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; } /* ----------------------------------------------------------- atmosphere -- Depth is not only shadow. Grain keeps a flat dark ground from banding, and it is the difference between "a dark page" and "a lit room". */ .sc-grain { position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0.045; } .sc-grain::before { content: ""; position: absolute; inset: -50%; background-image: url("data:image/svg+xml;utf8,"); } /* -------------------------------------------------------- reduced motion -- */ @media (prefers-reduced-motion: reduce) { /* Fewer and gentler, not zero. Opacity still carries the reveal so the page is comprehensible; every position change is dropped. */ [data-sc-in], [data-sc-stagger] > * { transform: none; transition-duration: 220ms; } [data-sc-parallax], [data-sc-pan], .sc-split__i { transform: none !important; } /* A wipe is a position change too. Show reveal content settled. */ [data-sc-reveal] { clip-path: none !important; } /* A rail's transform IS its navigation, not decoration. Zeroing it the way parallax and kinetic type are zeroed parks the act on its first screenful and makes everything past the fold unreachable: a device degrading into missing content. Hand the travel back to the reader as an ordinary scroll region instead, so the same items are all still gettable without motion. A build that would rather re-lay the rail out as a grid can still do that; this is the floor, not the ceiling. */ [data-sc-act="pan"] .sc-stage, [data-sc-act="pan"] [data-sc-stage] { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; } [data-sc-pan] > * { scroll-snap-align: center; } [data-sc-spotlight]::after { display: none; } /* A worldflight keeps its whole story here. No clip is ever fetched, so the posters are the film, and they cross-dissolve through exactly the same seams at exactly the same scroll positions. The push-in and the copy drift are the only things that go. */ .sc-world__poster, [data-sc-copy] { transform: none !important; } } /* --------------------------------------------------------------- mobile -- */ @media (max-width: 860px) { .sc-copy { inset-inline: var(--sc-gutter); max-width: none; } .sc-copy--trail { text-align: left; } .sc-stage { height: 100svh; } /* .sc-copy--trail re-anchors to the left and spans the full width here, so a bottom-RIGHT corner gradient darkens the one corner the copy just left and guarantees a contrast failure over any bright clip. Point the density at the copy: the same band .sc-scrim--band paints. */ .sc-scrim--trail { background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%, transparent 58%); } } } /* ============================================================================ Hand-authored site CSS resumes below (originally main.css from this same line onward -- the @import/@theme lines above it are gone, replaced by the compiled block at the top of this file; everything from here down is untouched). ============================================================================ */ /* ===== Theme tokens (2026-08-14, client-directed: "include the light and dark theme toggle") ===== Dark was previously the only theme — `--bg-light`/`--ink-light`/etc. existed only as a LOCAL per-section pair (the Why Trionova problem card, the kanban cards' text-on-color needs), never as a real site-wide alternative to the root tokens. Making the toggle genuine — not just a button that does nothing — means the CORE tokens themselves (--bg, --ink, --muted, --border-dark, --surface) have to actually flip value under `[data-theme="light"]`, not just get a same-named sibling nobody reads by default. Reuses the *-light values that already existed for exactly this purpose rather than inventing new colors. Also introduces --fill-1..4: generic neutral overlay tokens (subtle card fills, hover states, border-gradient highlights). These previously lived as scattered rgba(255,255,255,X) literals throughout this file — every one of those silently assumes a dark backdrop; on a light background the same white-alpha value reads as barely-there or outright wrong-direction contrast. Component rules below are being migrated from the literals to these tokens as each one is touched; see individual rules for progress. */ /* --------------------------------------------------------------------------- 2026-08-24 (round 2) — token polarity inverted to the house pattern. Was: `:root` = dark, `[data-theme="light"]` + `@media (prefers-color-scheme: light)` = light, and the inline script hardcoded 'light' for every first-time visitor regardless of their OS setting. Now: bare `:root` is the LIGHT default (so a page with CSS but no JS, and any element that escapes the attribute selector, lands somewhere legible), `@media (prefers-color- scheme: dark)` guarded by `:not([data-theme="light"])` carries the dark palette for visitors whose OS asks for it, and `[data-theme="dark"]` / `[data-theme="light"]` win over both so an explicit toggle always beats the OS. Every token below has a value in BOTH branches — including the precision-engineering "world" tokens (--hero-*, --grid-*, --signal-*), which were previously unconditional-dark and put a pale glass nav on top of a black hero for every default visitor. See build-log.md 2026-08-24 #2. --------------------------------------------------------------------------- */ :root { /* ---- theme-invariant ---- */ --surface-light: #FFFFFF; /* the deliberate "light card on a dark band" island — e.g. the problem card — independent of overall site theme */ --bg-light: #F2F5F3; /* .section.bg-light — a light BAND within an otherwise-dark page, independent of the site-wide theme toggle, same as --surface-light above */ --ink-light: #10141A; --muted-light: rgba(16,20,26,0.68); --border-light: rgba(14,20,26,0.08); /* ---- LIGHT palette (the default) ---- */ --bg: #F6F8FA; --bg-alt: #ECF0F3; --surface: linear-gradient(180deg, rgba(10,15,25,0.03), rgba(10,15,25,0.008)); --ink: #10141A; --ink-rgb: 16,20,26; --muted: rgba(16,20,26,0.68); --border-dark: rgba(14,20,26,0.09); --fill-1: rgba(10,15,25,0.035); --fill-2: rgba(10,15,25,0.05); --fill-3: rgba(10,15,25,0.08); --fill-4: rgba(10,15,25,0.14); --accent-glow: rgba(62,125,245,0.22); --glass-bg: rgba(255,255,255,0.55); --glass-bg-scrolled: rgba(255,255,255,0.85); --glass-bg-panel: #FFFFFF; --glass-bg-fallback: rgba(255,255,255,0.94); --glass-border: rgba(14,20,26,0.1); /* ---- the precision-engineering "world" (hero, incident, silence beat, ops readout, every schematic panel sitewide). In dark this is a control room; in light it is the same instrument read off a blueprint sheet — cool paper, ink-blue rules, the same signal semantics at darker values so they still clear 4.5:1 against paper. NOT a mechanical inversion: the grid is denser and cooler in light because a hairline that reads as "glow" on black reads as "smudge" on white. ---- */ --hero-canvas: #EDF1F6; --hero-canvas-rgb: 237,241,246; --hero-canvas-deep: #E2E8F0; /* the darker end of the world's own gradient */ --hero-ink: #080D14; --hero-ink-rgb: 8,13,20; /* The ground the incident copy sits on, INSIDE the world. Deliberately not --hero-canvas: a panel painted in the world's own colour over the world's own lattice is not a panel, it is a slightly blurrier patch of lattice. In light theme it steps toward white so the card reads as an object; in dark it steps toward black for the same reason. */ --incident-card-rgb: 255,255,255; --grid-line: rgba(27,69,196,0.10); --grid-line-strong: rgba(27,69,196,0.20); --hero-scan: rgba(10,20,40,0.030); --hero-vignette: rgba(120,140,175,0.22); --signal-ok: #077A5F; /* darkened from #0A8A6C — 4.05:1 -> 4.6:1 on --bg in light */ --signal-ok-rgb: 7,122,95; --signal-alert: #C42A1D; --signal-alert-rgb: 196,42,29; --signal-amber: #8F5A05; --signal-amber-rgb: 143,90,5; /* Blue accent (2026-08-13, client-directed) — replaces the earlier teal brand system so the site matches logo.jpeg's blue/chrome TNT mark instead of clashing with it (flagged as an open conflict when the real logo was first integrated, left unresolved until the client confirmed "switch the site accent to logo blue" over the dual-accent/nav-only alternatives). --accent-1 is tuned bright enough for 4.5:1+ text/icon contrast against --bg; --accent-2 is a deeper blue tuned for white button text and gradient partner duty — the two colors are deliberately NOT the same lightness the way the old teal pair was, because a single hue can't clear both "readable as text on dark bg" and "readable as white-on-button-bg" at once. See build-log.md for the full contrast-math rationale and the AI-generated imagery (hub-core/icon-database/ icon-application/icon-cloud) that was regenerated with a blue prompt to match — icon-shield/icon-license stay amber deliberately, unrelated accent used for the risk/licensing domains, not the palette conflict. */ --accent-1: #3E7DF5; --accent-1-rgb: 62,125,245; --accent-2: #1B45C4; --accent-on-light: #1B45C4; --accent-on-light-text: #12307F; /* darkened for 4.5:1+ AA at small sizes on light sections */ --nav-h: 70px; /* 2026-08-26 — nav is now a flush, full-width bar (see .nav), not an inset floating pill, so there's no gap above it to account for. Left at 0 rather than removed: every scroll-offset calc below still adds --nav-h + --nav-top + its own buffer, and 0 keeps those correct without hunting down each one. */ --nav-top: 0px; } /* --------------------------------------------------------------------------- 2026-08-26 — dark edition retired (client-directed: "remove dark and light edition option and use just 1 edition"). The toggle, its inline script, and the theme-toggle.js module are gone; `data-theme` is now hardcoded to "light" by that inline script and never changes at runtime, so the `@media (prefers-color-scheme: dark)` and `:root[data-theme="dark"]` palette blocks that used to live here are unreachable and have been removed rather than left as dead weight. The site's one edition is the LIGHT palette declared on bare `:root` above, accented per-section the way techorbitgroup.com does (amber for licensing/continuity, blue elsewhere) rather than via a second global theme. `[data-theme="light"]` selectors elsewhere in this file still apply — the attribute is always present with that value — so they were left alone rather than mass-edited to bare selectors. --------------------------------------------------------------------------- */ @layer components { *, *::before, *::after { box-sizing: border-box; } html { scroll-padding-top: calc(var(--nav-h) + var(--nav-top) + 16px); overflow-x: clip; scroll-behavior: smooth; } body { background: var(--bg); color: var(--ink); font-family: var(--font-display); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: clip; /* clip, not hidden — doesn't create a new scroll container or swallow focus-outline overflow */ /* Motion QA finding (2026-08-14): the theme toggle flipped data-theme with zero crossfade — body's background/text hard-snapped while .nav right above it faded its own background over 300ms (main.css .nav rule below), two adjacent elements changing color at different speeds on the same click. transition-property is explicit (not `all`) so this never fights layout/transform transitions elsewhere. */ transition: background-color 0.3s ease, color 0.3s ease; } /* Tailwind's preflight resets every heading to font-size/font-weight: inherit — h1/h2/h3 must get an explicit size here or they silently collapse to body text size. (They did, site-wide, until this was caught by the impeccable critique pass and verified via computed style: h1 and h2 were both rendering at 17px, same as body copy.) */ /* Type scale (2026-08-14, "reimagine the design" — Nexdeep3's own tokens run .hero-h1 equivalent at clamp(4rem,7.2vw,9rem)/64–144px against short 2-line headlines; Trionova's copy runs longer (multi-line sentence-length headlines, not 2-word taglines), so pushed meaningfully bigger than the old clamp(44px,7vw,96px) without matching Nexdeep's raw number 1:1 — a genuinely huge scale on long copy just wraps badly and stops being legible, it doesn't read as "confident." */ h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.03; color: var(--ink); } /* Bumped 2026-08-14 ("push the limits" pass, client-directed) — was clamp(36px,5.2vw,72px). Section headlines are the main rhythm-setter for how bold the whole page reads at a glance; pushed the ceiling up without raising the floor much, so short 1-line headlines get noticeably bigger at desktop width while long ones (several sub-service H1s run 8-10 words) don't start overwrapping. */ /* Ceiling dropped 80px -> 56px (2026-08-24 #2). The hero H1 tops out at 62px, so an 80px section headline made every H2 on the page LARGER than the page's own headline — a straight hierarchy inversion, and on the rebuilt Why Trionova section it rendered a four-line 80px wall directly under the hero. The previous ceiling was set in the 2026-08-14 "push the limits" pass against a hero whose H1 ran to 104px; the hero has since been rebuilt smaller and this never followed it down. */ h2 { font-size: clamp(32px, 4.2vw, 56px); } h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; } /* Dialed back from clamp(52px,8vw,132px) after checking real content, not just Home's short headline — sub-service pages pull their H1 verbatim from the source doc's hero headlines, several of which run 8-10 words ("24/7/365 Expert Database Management & Proactive Operational Support"), and at the original scale that wrapped to 5+ lines in the ~820px hero column, pushing the rest of the page excessively far down. This scale still reads meaningfully bigger than the pre-redesign clamp(44px,7vw,96px) on every page, without the long-copy pages overwrapping. */ .hero-h1 { font-size: clamp(46px, 6.6vw, 104px); letter-spacing: -0.03em; line-height: 0.95; } /* ===== Numbered system label (2026-08-14) — replaces the plain pill-chip eyebrow as the primary section marker: "01 — SECTION NAME" in mono, uppercase, wide tracking, with a thin rule trailing off to the right — the same "technical documentation" register Nexdeep3 uses (SYSTEM 01 / ENGINEERING OVERVIEW) and appropriate for an infra/database consulting brand specifically (reads as engineering rigor, not SaaS-generic). eyebrow-chip (pill) stays in the system for tighter contexts (nav-adjacent, card-level) — this is the section-level one. */ .section-label { display: flex; align-items: center; gap: 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-1); margin-bottom: 20px; } .section-label-num { color: var(--muted); } .section-label-rule { flex: 1; height: 1px; background: var(--border-dark); min-width: 40px; } /* P0 (impeccable audit, 2026-08-24 #2). The blanket `[data-theme="light"] .section-label` rules further down this file apply to EVERY label in light theme, including the two that live inside `.section-dark` bands (background #0A0C10, unconditionally dark by design). Measured there: label 1.64:1, number 1.04:1 — the "04" on The Process was an unreadable smudge. `.section-dark` already re-scopes --accent-1/--muted/ --border-dark to their dark values, so pointing these back at the tokens is both the fix and the thing that stops it recurring: any future light-theme override of a token-driven property needs a .section-dark counterpart. 2026-08-24 #3 — that earlier fix did NOT work, and the reason is in its own last sentence: it claimed (0,2,0) beats the [data-theme] rules' "(0,1,1)". `[data-theme="light"] .section-label` is one attribute selector plus one class = (0,2,0), exactly the same specificity, so source order decides and the light-theme rule three lines BELOW won. Re-measured live in light theme: still 1.64:1 on The Process and Direct Access, unchanged since the day it was "fixed". Written now as `[data-theme="light"] .section-dark ...` (0,3,0) so it genuinely outranks the blanket rule in both directions, and the plain `.section-dark` rule stays for the dark-theme/no-attribute case. */ .section-dark .section-label, [data-theme="light"] .section-dark .section-label { color: var(--accent-1); } .section-dark .section-label-num, [data-theme="light"] .section-dark .section-label-num { color: var(--muted); } .section-dark .section-label-rule, [data-theme="light"] .section-dark .section-label-rule { background: var(--border-dark); } .bg-light .section-label, section.bg-light .section-label, [data-theme="light"] .section-label { color: var(--accent-on-light-text); } .bg-light .section-label-num, section.bg-light .section-label-num, [data-theme="light"] .section-label-num { color: var(--muted-light); } .bg-light .section-label-rule, section.bg-light .section-label-rule, [data-theme="light"] .section-label-rule { background: var(--border-light); } /* Client-reported (2026-08-31), STILL flagged after a first attempt: "Why Trionova text is not readable/visible." First pass tried a lighter blue (#7DA6FF, matching .presence-section's own dark-background label) — still blue-on-blue against this specific section's busy animated dot- lattice, still not enough by the client's own follow-up look. Every other element that reads cleanly against this exact lattice (the H1, the body copy) is white or near-white, not blue — matched that pattern instead of trying yet another shade of blue, plus a tight dark text-shadow so it holds up over the brightest lattice nodes too, not just the average background. */ [data-theme="light"] .hero-whyus-shell.section-dark .section-label { color: #F4F7FF; text-shadow: 0 1px 3px rgba(4,7,16,0.85), 0 0 14px rgba(4,7,16,0.55); } [data-theme="light"] .hero-whyus-shell.section-dark .section-label-rule { background: rgba(244,247,255,0.35); } /* Mixed solid/outline emphasis (2026-08-14) — one or two words within a headline rendered as an outlined/hollow treatment against the solid weight around them (mini-bees-wheels technique). Used sparingly, never a whole headline. */ .text-outline { color: transparent; -webkit-text-stroke: 2px var(--accent-1); } /* Reusable accent text color that's already AA-safe in both themes (2026-08- 14) — accent-1 alone clears 4.5:1 against the dark theme but not the light one (~4.16:1, tuned for dark specifically); every other place this needed fixing so far was a one-off inline style="color:var(--accent-1)" patched individually. Use this class instead of that inline pattern going forward so new instances don't reintroduce the same contrast bug. */ .text-accent { color: var(--accent-1); } [data-theme="light"] .text-accent { color: var(--accent-on-light-text); } .on-light h1, .on-light h2, .on-light h3, section.bg-light h1, section.bg-light h2, section.bg-light h3 { color: var(--ink-light); } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent-1); color: #06110D; } /* ===== Skip link ===== */ .skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--accent-1); color: #06110D; padding: 10px 18px; border-radius: 8px; font-family: var(--font-mono); font-size: 13px; transition: top 0.2s ease; } .skip-link:focus { top: 16px; } :focus-visible { outline: 2px solid var(--accent-1); outline-offset: 3px; } .on-light :focus-visible, section.bg-light :focus-visible { outline-color: var(--accent-on-light); } /* ===== Load-in FOUC guard ===== [data-reveal] (2026-08-13, client-reported "GSAP flickering" — real bug, confirmed) had NO guard here at all until now — only [data-load] did. motion.js's ScrollTrigger.batch('[data-reveal]', ...) never sets an initial hidden state via JS (unlike [data-load], which gets an explicit gsap.set(...,{autoAlpha:1}) at load-sequence start, implying it starts hidden) — it only applies the {y:40, autoAlpha:0} from-state the instant a batch's onEnter actually fires, which for anything already in the initial viewport happens right after the JS module loads, not before first paint. Every data-reveal element sat fully visible — every card, heading block, kanban card — until GSAP caught up and snapped it hidden before animating back in. Matches a previously-documented failure mode on another project (Asam & Co. Perfumers, 2026-08-13): a selector with animation logic but no CSS guard is exactly this bug waiting to happen. */ .js [data-load], .js [data-reveal] { visibility: hidden; } /* motion.js's initLoadSequence() also individually animates .hero-eyebrow, .hero-h1 .line, .hero-rotator, and .hero-cta directly (not via [data-load]/[data-reveal]) on every page template. .hero-eyebrow needs no guard of its own — its only visible content is the eyebrow() component's inner span, which already carries [data-load] and is guarded above. The other three had NONE: their actual text/button content isn't wrapped in any separately-guarded element, so they sat fully visible until GSAP caught up, then snapped hidden before animating in — same bug as [data-reveal] above, just on different selectors. Each guard here matches exactly what GSAP itself animates for that target (see the guard() calls in motion.js), not a generic visibility:hidden — using visibility:hidden for .hero-rotator/.hero-cta would leave them stuck permanently invisible, since their tweens only ever set `opacity`, never `visibility`, back to visible. .hero-h1 .line animates a pure `transform` (no opacity component at all), so its guard pre-sets the same translateY(110%) GSAP's own "from" state uses — clipped out of view by .line-wrap's `overflow: hidden` — rather than visibility/opacity, for the same reason. */ .js .hero-h1 .line { transform: translateY(110%); } .js .hero-rotator, .js .hero-cta { opacity: 0; } /* ===== Layout primitives ===== */ .wrap { max-width: 1240px; margin-inline: auto; padding-inline: 24px; } .section { position: relative; padding-block: clamp(96px, 12vw, 160px); overflow: clip; } .section.bg-alt { background: var(--bg-alt); } .section.bg-light { background: var(--bg-light); color: var(--ink-light); } .section.bg-transparent { background: transparent; } /* ===== Dark statement section (2026-08-14, real redesign pass) ===== Every section on Home was reading as the same pale off-white band, one after another — the previous "push the limits" pass added bolder cards and bigger type WITHIN that flat rhythm but never questioned the rhythm itself, which is why it read as barely different at a glance. This is the actual fix: light/dark contrast as a structural device, the way the reference site (and virtually every premium marketing site) uses it — alternating genuinely dark bands, not just dark cards floating on an unbroken light page. Re-scopes the SAME theme-toggle custom properties every component in this file already reads (--bg, --ink, --muted, --border-dark, --fill-*, --surface) to their dark values, inherited down through this section's whole subtree — identical mechanism to how [data-theme="light"] overrides the root, just scoped to one section instead of the page. That means every component built against these tokens (kanban timeline dots, section labels, spec strips, icon boxes) automatically renders correctly dark here with zero per-component overrides. */ .section-dark { --bg: #0A0C10; --bg-alt: #0D1015; --ink: #F4F6F7; --ink-rgb: 244,246,247; --muted: rgba(244,246,247,0.7); --border-dark: rgba(255,255,255,0.08); --fill-1: rgba(255,255,255,0.03); --fill-2: rgba(255,255,255,0.05); --fill-3: rgba(255,255,255,0.12); --fill-4: rgba(255,255,255,0.22); --surface: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)); --accent-glow: rgba(62,125,245,0.28); /* World tokens re-scoped too (2026-08-24 #2) — a .section-dark band can now carry schematic chrome (grid overlays, signal chips, mini readouts) and must not inherit the LIGHT branch's paper-blue rules onto a black ground. */ --hero-canvas: #0A0C10; --hero-canvas-rgb: 10,12,16; --hero-ink: #F4F6F7; --hero-ink-rgb: 244,246,247; --grid-line: rgba(63,169,245,0.075); --grid-line-strong: rgba(63,169,245,0.20); --signal-ok: #2FE0B4; --signal-ok-rgb: 47,224,180; --signal-alert: #F0483D; --signal-alert-rgb: 240,72,61; --signal-amber: #F0A63D; --signal-amber-rgb: 240,166,61; background: var(--bg); color: var(--ink); } /* ===== Glow / grain / ghost numeral ===== */ .glow { position: absolute; width: 640px; height: 640px; pointer-events: none; z-index: 0; background: radial-gradient(closest-side, var(--accent-glow), transparent); } .grain { position: relative; } .grain::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.04; z-index: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Stroke follows the ground, not the theme name: light default and any .bg-light band get an ink stroke; the dark branch and any .section-dark island get a white one. Polarity inverted 2026-08-24 #2 alongside the root tokens. */ .ghost-numeral { font-size: clamp(120px, 18vw, 240px); font-weight: 800; color: transparent; -webkit-text-stroke: 1px rgba(14,20,26,0.10); position: absolute; user-select: none; z-index: 0; line-height: 1; } .section-dark .ghost-numeral, [data-theme="dark"] .ghost-numeral { -webkit-text-stroke: 1px rgba(255,255,255,0.10); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ghost-numeral { -webkit-text-stroke: 1px rgba(255,255,255,0.10); } } .bg-light .ghost-numeral, [data-theme="dark"] .bg-light .ghost-numeral { -webkit-text-stroke: 1px rgba(14,20,26,0.10); } /* ===== Eyebrow chip ===== */ .eyebrow-chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-1); border: 1px solid rgba(62, 125, 245,0.28); border-radius: 999px; padding: 6px 14px; position: relative; z-index: 2; } .eyebrow-chip .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent-1); flex: none; } .bg-light .eyebrow-chip, section.bg-light .eyebrow-chip, [data-theme="light"] .eyebrow-chip { color: var(--accent-on-light-text); border-color: rgba(27,69,196,0.28); } .bg-light .eyebrow-chip .dot, section.bg-light .eyebrow-chip .dot, [data-theme="light"] .eyebrow-chip .dot { background: var(--accent-on-light); } /* 2026-08-14, Aigocy-inspired redesign — the reference's eyebrow badge is a solid floating white pill with a soft shadow, not an outline-only chip. Adds a filled backdrop + shadow on top of the existing border (kept, for definition against a near-white card background) — light theme only: in dark theme the badge already sits on a genuinely dark backdrop where a solid near-white fill would clash rather than "float." Scoped to the hero eyebrow specifically, not every inline eyebrow-chip use sitewide (e.g. the footer's borderless "Quick Links" label reuses the same class with an inline border:none override — a global fill would fight that). */ [data-theme="light"] .hero-eyebrow .eyebrow-chip { background: #FFFFFF; box-shadow: 0 1px 2px rgba(16,20,26,0.04), 0 10px 24px rgba(16,20,26,0.07); } /* ===== Cards ===== */ .card { position: relative; border-radius: 16px; padding: 32px; background: var(--surface); box-shadow: inset 0 1px 0 var(--fill-2); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), border-color 0.3s ease; } .card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--fill-4), var(--fill-2) 40%, transparent 65%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .card:hover .card-border-glow { opacity: 1; } /* Domain hero right-rail tile (2026-09-02, client-directed: "hero right side is empty add a something about its Service Areas") — the 5 domain pages' hero went to a single centered column on 2026-08-26 once the old Engines-Supported/Support-Model spec panel was dropped, leaving the right half of the hero blank on wide screens. This restores a two- column hero (text left, card right) with a quick-glance list of that domain's own services, each linking straight to its sub-service page — same links as the .service-table further down, just a compact preview up in the hero instead of an empty quadrant. */ /* Two-column hero grid, only for the 5 domain pages that pair this tile with the hero text — a dedicated class, not an arbitrary-value Tailwind utility (this project's main.css is a pre-compiled/static Tailwind output with no live JIT build to generate a one-off class from, so an invented `lg:grid-cols-[1.3fr_1fr]` would silently match nothing). */ .hero-domain-grid { display: flex; flex-direction: column; gap: 40px; align-items: flex-start; } @media (min-width: 1024px) { .hero-domain-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; } } .hero-services-tile { padding: 36px 40px; } .hero-services-tile-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; } .hero-services-tile-list { display: flex; flex-direction: column; gap: 4px; list-style: none; } .hero-services-tile-list li { border-bottom: 1px solid var(--border-dark); } .hero-services-tile-list li:last-child { border-bottom: none; } .hero-services-tile-list a { display: flex; align-items: center; gap: 12px; padding: 13px 2px; font-size: 14.5px; font-weight: 600; color: var(--ink); } .hero-services-tile-list a i { flex: none; color: var(--accent-1); } .hero-services-tile-list a:hover { color: var(--accent-1); } @media (max-width: 1023px) { .hero-services-tile { margin-top: 8px; } } /* Domain "Service Areas" table (2026-09-01, client-directed: "add a table to minimize the whitespace" — replaces the padded 3-col card grid on each of the 5 domain pages with a dense, single-column row list. Same link targets/copy as before, just laid out to read as a compact index rather than 5-6 separate cards with their own padding/shadow each. */ .service-table { display: flex; flex-direction: column; border: 1px solid var(--border-dark); border-radius: 16px; overflow: hidden; background: var(--surface); } .service-table-row { display: flex; align-items: center; gap: 28px; padding: 20px 28px; border-bottom: 1px solid var(--border-dark); transition: background 0.2s ease; } .service-table-row:last-child { border-bottom: none; } .service-table-row:hover { background: var(--fill-2); } .service-table-title { flex: 0 0 260px; font-weight: 600; font-size: 15px; color: var(--ink); } .service-table-desc { flex: 1 1 auto; font-size: 14px; color: var(--muted); } .service-table-arrow { flex: none; color: var(--muted); transition: transform 0.2s ease, color 0.2s ease; } .service-table-row:hover .service-table-arrow { color: var(--accent-1); transform: translateX(3px); } @media (max-width: 780px) { .service-table-row { flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 20px; } .service-table-title { flex: none; } .service-table-arrow { display: none; } } .card-light { position: relative; border-radius: 16px; padding: 32px; background: var(--surface-light); border: 1px solid rgba(14,20,26,0.07); box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 16px 40px rgba(0,0,0,0.06); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), border-color 0.3s ease; } .card-light:hover { border-color: rgba(27,69,196,0.3); } /* 2026-08-14, real redesign pass — .card-light is now used inside .section-dark (Direct Access), which re-scopes --ink to a light value for the whole section so its OWN headline/body text reads correctly white-on-dark. A card-light card is a white surface floating inside that dark section, not part of its background — its own heading needs to stay forced-dark regardless of what --ink resolves to in whatever section it's dropped into, same reasoning as .kanban-card forcing white text unconditionally for the mirror-image case. */ .card-light h3, .card-light h4 { color: var(--ink-light); } /* .card-light's default border (rgba(14,20,26,0.07), near-black) and shadow (rgba(0,0,0,...)) are both tuned to read against a LIGHT section — on .section-dark's near-black background a near-black border is invisible and a black shadow has nothing darker to cast onto. Swaps to a light hairline for edge definition and a deeper/wider shadow for actual separation from the section behind it. */ .section-dark .card-light { border-color: rgba(255,255,255,0.08); box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 28px 60px rgba(0,0,0,0.5); } /* icon container */ .icon-box { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(62, 125, 245,0.12); color: var(--accent-1); flex: none; } .bg-light .icon-box, .card-light .icon-box { background: rgba(27,69,196,0.10); color: var(--accent-on-light); } .icon-box-lg { width: 56px; height: 56px; border-radius: 14px; } /* Trust cards (Direct Access section, 2026-08-14 "push the limits" pass) — border color + a real lift on hover, on top of the existing .spotlight cursor glow, so the plainest cards on the page get the same "alive" feel the rest of the redesign has. Gated to real pointer devices, same sitewide convention as every other hover-lift (see the consolidated block near the end of this file). */ /* .card's own "border" is a gradient pseudo-element (::before, masked to a 1px ring), not a real `border` property — a `border-color` transition on .trust-card itself would be a no-op. Uses a real border here instead, independent of that trick, since this is the one card on the page that needs a hover-visible color change, not just the shared subtle gradient edge every .card already has. */ .trust-card { border: 1px solid transparent; } @media (hover: hover) and (pointer: fine) { .trust-card { transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), border-color 0.3s ease, box-shadow 0.3s ease; } .trust-card:hover { border-color: rgba(62,125,245,0.35); box-shadow: 0 20px 44px rgba(16,20,26,0.1); } /* On .section-dark (Direct Access), the default hover shadow above (rgba(16,20,26,...), near-black) has nothing darker to show against — a blue-tinted glow reads as "lifting toward the light" instead. */ .section-dark .trust-card:hover { box-shadow: 0 20px 48px var(--accent-glow); } } /* Stats section tiles (2026-08-14, "push the limits" pass) — bounds each number in a bordered box instead of leaving it floating bare on the section background, matching every other number treatment on the page (spec strips, service-panel numerals). */ .stat-tile { padding: 28px 24px; border-radius: 16px; border: 1px solid var(--border-dark); background: var(--fill-1); transition: border-color 0.3s ease, transform 0.3s ease; } @media (hover: hover) and (pointer: fine) { .stat-tile:hover { border-color: rgba(62,125,245,0.3); transform: translateY(-4px); } } /* ===== Buttons ===== */ /* 2026-08-14, Aigocy-inspired redesign — border-radius bumped from 12px to a full pill (999px). The reference's whole button/chip/nav language is pill-shaped; DESIGN.md's radii scale already had "pills 999px" reserved for badges/tags only, buttons at 12px — widening that to buttons too is the single highest-leverage change for reading as "that look" without touching layout, since every CTA sitewide runs through this one rule. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 15px; padding: 14px 28px; border-radius: 999px; transition: 0.25s cubic-bezier(0.16,1,0.3,1); cursor: pointer; white-space: nowrap; } /* Solid --accent-2, not a gradient, and white text — not #06110D like the old teal button. A top-to-bottom gradient between accent-1 (bright) and accent-2 (deep) can't guarantee one text color clears 4.5:1 at every point along it (checked: black only clears the accent-1 end, white only the accent-2 end) — teal's two stops were close enough in lightness that this never came up, blue's aren't. Solid accent-2 + white sidesteps it (7.2:1 throughout) while the inset highlight still gives it a lit, not-flat feel. */ /* Client-reported (2026-08-14): "black text hard to read on blue background" — real bug, confirmed. This rule set `color: var(--ink)` despite the comment above it explicitly stating white text; var(--ink) is dark in the light theme, so every primary button rendered near-black text on the deep accent-2 blue there (dark theme's --ink is near-white, which is why this wasn't visible in dark theme screenshots). Fixed to match what the comment always said. */ .btn-primary { background: var(--accent-2); color: #FFFFFF; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 8px 24px var(--accent-glow); border: none; } .btn-primary:hover { filter: brightness(1.1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 12px 32px var(--accent-glow); } .btn-primary:active { filter: brightness(0.96); transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 4px 12px var(--accent-glow); } .btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; } /* Icon-pill CTA (2026-08-26, client-directed — matches techorbitgroup.com's "Talk to Our Expert"/"Contact us" buttons exactly: a white pill, dark text, a filled circular arrow badge on the leading edge). Scoped to the nav CTA (shared chrome, every page) and the home hero's primary CTA — NOT swapped in for every .btn-primary sitewide, which stays the plain solid-blue pill everywhere else; that's a much larger sitewide button restyle nothing in this feedback round asked for. */ .btn-icon-pill { background: #fff; color: #0A0E1A; padding: 5px 24px 5px 5px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); border: none; } .btn-icon-pill:hover { filter: none; box-shadow: 0 10px 28px rgba(0,0,0,0.38); } .btn-icon-pill-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-2); color: #fff; } .btn-ghost { border: 1px solid var(--border-dark); color: var(--ink); background: transparent; } .btn-ghost:hover { border-color: var(--accent-1); color: var(--accent-1); } .btn-ghost:active { background: var(--fill-1); } .bg-light .btn-ghost, .card-light .btn-ghost { border-color: var(--border-light); color: var(--ink-light); } .bg-light .btn-ghost:hover, .card-light .btn-ghost:hover { border-color: var(--accent-on-light); color: var(--accent-on-light-text); } .bg-light .btn-ghost:active, .card-light .btn-ghost:active { background: rgba(14,20,26,0.04); } .btn-wa { background: #25D366; color: #fff; border: none; } .btn-wa:hover { filter: brightness(1.08); } .btn-wa:active { filter: brightness(0.94); transform: translateY(0); } /* ===== Links ===== */ .link-underline { position: relative; color: var(--ink); border-bottom: 1px solid var(--accent-1); padding-bottom: 1px; transition: color 0.2s ease; } .link-underline:hover { color: var(--accent-1); } .bg-light .link-underline, .card-light .link-underline { color: var(--ink-light); border-color: var(--accent-on-light); } .bg-light .link-underline:hover, .card-light .link-underline:hover { color: var(--accent-on-light-text); } /* ===== Navbar ===== */ /* Floating glassmorphism nav (2026-08-13, client reference images) — supersedes the earlier edge-to-edge solid-alpha nav (spec Section 6 called for 0.92→0.97 flat alpha specifically BECAUSE backdrop-filter was off the table then; the client has now asked for actual frosted glass by name and reference image, so this is a deliberate, direct override of that older note, not a regression of it). Inset on all sides so it reads as a bar floating over the page rather than docked to the viewport edge, real backdrop-blur so whatever scrolls underneath it stays genuinely visible through the panel — the bleed-through problem the old note worked around is the point now, not the bug. */ /* ===== Nav (2026-08-26, round 3 — client-directed: "take the menu section directly from techorbitgroup.com's navigation") ===== Was a floating, inset, rounded glass pill (see build-log.md for that system's own history). Replaced with what the reference actually uses: a flush, full-width, solid dark-navy bar docked to the viewport top, same ground color as the home hero so the two read as one continuous surface, not two components. Solid (no backdrop-filter) since it's opaque anyway — nothing needs to show through it, on any page, light or dark content underneath. Text is hardcoded light (not var(--ink), which is near-black under the site's one light edition) because this bar is unconditionally dark regardless of page theme, same reasoning the hero already uses. */ .nav { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 100; height: var(--nav-h); border-radius: 0; background: #0A0E1A; border-bottom: 1px solid rgba(255,255,255,0.08); box-shadow: 0 8px 30px rgba(0,0,0,0.25); color: #fff; display: flex; align-items: center; transition: background 0.3s ease, box-shadow 0.3s ease; } .nav.nav-scrolled { background: #0A0E1A; box-shadow: 0 10px 36px rgba(0,0,0,0.4); } .nav .nav-toggle .hamburger span { background: #fff; } @media (max-width: 640px) { .nav { height: 64px; } } .nav-links a { opacity: 1; color: rgba(255,255,255,0.86); transition: opacity 0.25s ease, color 0.25s ease; } /* Client-reported, real (Changes.docx, 2026-08-30): sub-service links inside the open Services flyout ("Managed Database Services" etc.) read as dull gray instead of the near-black var(--ink) their own rule (below) sets. Root cause: this dimming rule was written to fade OTHER top-level nav items (About us/Contact) while one is hovered, but `.nav-links:hover a` matches every descendant — including every link inside the flyout panel nested under the same .nav-links container — so opening the dropdown at all (which requires hovering somewhere inside .nav-links) knocked every flyout link down to 0.6 opacity regardless of .nav-dropdown- detail a's own full-contrast color. Scoped to direct children only (`>`) so it can't reach into the flyout. */ .nav-links:hover > a, .nav-links:hover .nav-dropdown-trigger { opacity: 0.6; } .nav-links a:hover { opacity: 1 !important; color: #7DA6FF; } .nav-links a.active { color: #7DA6FF; } /* ===== Services nav dropdown (2026-08-13, client-directed) ===== Trigger is a real