/* ========================================================================== Zorn Ventures Limited - Core stylesheet -------------------------------------------------------------------------- Design system primitives that Tailwind utilities cannot express cleanly: component classes, focus rings, typography rhythm and form controls. Palette Zorn Navy #1D2045 (primary brand) Zorn Cyan #04B5FF (controlled accent) Midnight #11142F (dark sections, hero, footer, nav) Soft BG #F5F8FC (light sections) Body text #171A35 Muted text #667085 Contents 1. Design tokens 2. Base / reset refinements 3. Typography 4. Layout helpers 5. Buttons 6. Cards and surfaces 7. Badges and eyebrows 8. Form controls 9. Navigation 10. Accordion 11. Article prose 12. Footer 13. Utilities ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design tokens -------------------------------------------------------------------------- */ :root { --nx-navy: #1D2045; --nx-midnight: #11142F; --nx-dark: #161A3D; --nx-dark-gray: #232753; --nx-line-dark: rgba(255, 255, 255, 0.12); --nx-line-dark-strong: rgba(255, 255, 255, 0.22); --nx-black: #1D2045; /* primary action colour (navy) */ --nx-near-black: #11142F; /* midnight surfaces */ --nx-white: #FFFFFF; --nx-soft: #F5F8FC; --nx-off-white: #F5F8FC; --nx-light-gray: #E3E8F0; /* hairline borders on light */ --nx-body: #171A35; --nx-medium-gray: #667085; /* muted text */ --nx-accent: #04B5FF; /* Zorn Cyan */ --nx-accent-deep: #0A8FD6; /* grounded accent for text/links */ --nx-accent-soft: rgba(4, 181, 255, 0.12); --nx-accent-line: rgba(4, 181, 255, 0.45); --nx-container: 1280px; --nx-gutter: 1.25rem; --nx-radius: 0.625rem; /* soft, human corners */ --nx-radius-lg: 0.875rem; --nx-radius-xl: 1.25rem; --nx-ease: cubic-bezier(0.22, 1, 0.36, 1); --nx-header-h: 4.5rem; /* ---- Elevation: layered, low-chroma shadows for real depth ---- Tuned toward a cool navy ink so surfaces feel calm, not grey/AI. */ --nx-shadow-color: 17, 20, 47; /* rgb of --nx-navy */ --nx-shadow-xs: 0 1px 2px rgba(var(--nx-shadow-color), 0.05); --nx-shadow-sm: 0 1px 2px rgba(var(--nx-shadow-color), 0.05), 0 2px 6px rgba(var(--nx-shadow-color), 0.05); --nx-shadow-md: 0 4px 8px -2px rgba(var(--nx-shadow-color), 0.06), 0 12px 24px -8px rgba(var(--nx-shadow-color), 0.10); --nx-shadow-lg: 0 10px 20px -4px rgba(var(--nx-shadow-color), 0.08), 0 24px 48px -12px rgba(var(--nx-shadow-color), 0.14); --nx-shadow-xl: 0 20px 40px -8px rgba(var(--nx-shadow-color), 0.12), 0 40px 80px -16px rgba(var(--nx-shadow-color), 0.16); /* Button elevation, tinted by accent for the primary CTA. */ --nx-shadow-btn: 0 1px 2px rgba(var(--nx-shadow-color), 0.10), 0 6px 16px -6px rgba(4, 181, 255, 0.32); --nx-shadow-btn-hover: 0 2px 4px rgba(var(--nx-shadow-color), 0.12), 0 12px 26px -8px rgba(4, 181, 255, 0.38); --nx-shadow-btn-navy: 0 1px 2px rgba(var(--nx-shadow-color), 0.12), 0 8px 20px -8px rgba(var(--nx-shadow-color), 0.40); --nx-shadow-btn-navy-hover: 0 2px 4px rgba(var(--nx-shadow-color), 0.14), 0 16px 34px -10px rgba(var(--nx-shadow-color), 0.50); --nx-shadow-focus: 0 0 0 3px rgba(4, 181, 255, 0.22); } @media (min-width: 640px) { :root { --nx-gutter: 2rem; } } @media (min-width: 1024px) { :root { --nx-gutter: 2.5rem; } } /* Prevent horizontal scroll WITHOUT turning into a scroll container. `overflow-x: hidden` here silently breaks `position: sticky` on mobile (the header stops sticking). `clip` masks overflow but keeps sticky working. */ @supports (overflow-x: clip) { html { overflow-x: clip; } } /* -------------------------------------------------------------------------- 2. Base / reset refinements -------------------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nx-header-h) + 1.5rem); } body { font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-feature-settings: 'cv02', 'cv03', 'cv04', 'ss01'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Prevent horizontal scroll. Fallback `hidden` for old browsers; `clip` (when supported) keeps the sticky header working on mobile. */ overflow-x: hidden; overflow-x: clip; color: var(--nx-body); background: var(--nx-white); } /* Never let media or code blocks force the page wider than the viewport. */ img, svg, video, canvas, table, pre { max-width: 100%; } ::selection { background: var(--nx-navy); color: var(--nx-white); } .nx-dark ::selection, .nx-on-dark ::selection { background: var(--nx-accent); color: var(--nx-midnight); } /* Visible, consistent focus for keyboard users only. */ :focus-visible { outline: 2px solid var(--nx-navy); outline-offset: 2px; border-radius: 2px; } .nx-on-dark :focus-visible, .nx-dark :focus-visible { outline-color: var(--nx-accent); } /* Skip link, visible only once focused. */ .nx-skip-link { position: absolute; left: 1rem; top: -100%; z-index: 200; padding: 0.75rem 1.25rem; background: var(--nx-white); color: var(--nx-navy); font-size: 0.875rem; font-weight: 600; border-radius: var(--nx-radius); transition: top 0.2s var(--nx-ease); } .nx-skip-link:focus { top: 1rem; } /* Custom scrollbar. */ @supports selector(::-webkit-scrollbar) { ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--nx-soft); } ::-webkit-scrollbar-thumb { background: #c4ccdb; border: 2px solid var(--nx-soft); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--nx-medium-gray); } } * { scrollbar-width: thin; scrollbar-color: #c4ccdb var(--nx-soft); } /* -------------------------------------------------------------------------- 3. Typography -------------------------------------------------------------------------- */ .nx-display { font-weight: 600; letter-spacing: -0.04em; line-height: 0.98; text-wrap: balance; } .nx-h2 { font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3.25rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; } .nx-h3 { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; } .nx-lead { font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem); line-height: 1.65; text-wrap: pretty; } /* Small uppercase label used above section headings. */ .nx-eyebrow { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--nx-medium-gray); } .nx-eyebrow::before { content: ''; width: 1.5rem; height: 1px; background: var(--nx-accent); opacity: 0.9; } .nx-eyebrow--plain::before { display: none; } /* Monospace metadata: dates, numbers, counters. */ .nx-mono { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.75rem; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 4. Layout helpers -------------------------------------------------------------------------- */ .nx-container { width: 100%; max-width: var(--nx-container); margin-inline: auto; padding-inline: var(--nx-gutter); } .nx-section { padding-block: clamp(4.5rem, 3rem + 7vw, 9rem); } .nx-section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); } /* Thin vertical rules that echo an editorial grid. */ .nx-gridlines { position: absolute; inset: 0; pointer-events: none; display: grid; grid-template-columns: repeat(4, 1fr); max-width: var(--nx-container); margin-inline: auto; padding-inline: var(--nx-gutter); } .nx-gridlines span { border-left: 1px solid var(--nx-line-dark); } .nx-gridlines span:last-child { border-right: 1px solid var(--nx-line-dark); } .nx-gridlines--light span { border-color: rgba(4, 28, 69, 0.07); } @media (max-width: 767px) { .nx-gridlines { grid-template-columns: repeat(2, 1fr); } } /* Faint dot matrix for dark hero backgrounds. */ .nx-dotgrid { background-image: radial-gradient(circle, rgba(255, 255, 255, 0.14) 1px, transparent 1px); background-size: 28px 28px; } .nx-dotgrid--light { background-image: radial-gradient(circle, rgba(29, 32, 69, 0.10) 1px, transparent 1px); } /* Very subtle film grain so large dark areas do not band. */ .nx-noise::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.03; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Subtle radial glow used behind hero visuals. */ .nx-glow { position: absolute; pointer-events: none; background: radial-gradient(circle, var(--nx-accent-soft), transparent 70%); filter: blur(10px); } /* -------------------------------------------------------------------------- 5. Buttons -------------------------------------------------------------------------- */ .nx-btn { --btn-h: 2.75rem; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: var(--btn-h); padding-inline: 1.375rem; border: 1px solid transparent; border-radius: var(--nx-radius); font-size: 0.875rem; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; box-shadow: var(--nx-shadow-btn-navy); transition: background-color 0.2s var(--nx-ease), border-color 0.2s var(--nx-ease), color 0.2s var(--nx-ease), transform 0.2s var(--nx-ease), opacity 0.2s var(--nx-ease), box-shadow 0.25s var(--nx-ease); } .nx-btn:disabled, .nx-btn[aria-disabled='true'] { opacity: 0.5; pointer-events: none; box-shadow: none; } .nx-btn:active { transform: translateY(0); box-shadow: var(--nx-shadow-btn-navy); } /* Arrow glyph nudges right on hover. */ .nx-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; transition: transform 0.25s var(--nx-ease); } .nx-btn:hover svg { transform: translateX(3px); } /* Solid navy on light backgrounds. */ .nx-btn--primary { background: var(--nx-navy); color: var(--nx-white); border-color: var(--nx-navy); box-shadow: var(--nx-shadow-btn-navy); } .nx-btn--primary:hover { background: #15172E; border-color: #15172E; transform: translateY(-1px); box-shadow: var(--nx-shadow-btn-navy-hover); } .nx-btn--primary:active { background: var(--nx-navy); } /* Cyan accent CTA (primary action, used with intent). */ .nx-btn--accent { background: var(--nx-accent); color: var(--nx-midnight); border-color: var(--nx-accent); box-shadow: var(--nx-shadow-btn); } .nx-btn--accent:hover { background: #03A6E8; border-color: #03A6E8; transform: translateY(-1px); box-shadow: var(--nx-shadow-btn-hover); } .nx-btn--accent:active { background: var(--nx-accent); } /* Solid white, for dark backgrounds. */ .nx-btn--invert { background: var(--nx-white); color: var(--nx-navy); border-color: var(--nx-white); box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.45); } .nx-btn--invert:hover { background: var(--nx-soft); border-color: var(--nx-soft); transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.5); } /* Outlined on light backgrounds. */ .nx-btn--outline { background: var(--nx-white); color: var(--nx-navy); border-color: var(--nx-light-gray); box-shadow: var(--nx-shadow-xs); } .nx-btn--outline:hover { border-color: var(--nx-navy); background: var(--nx-soft); transform: translateY(-1px); box-shadow: var(--nx-shadow-sm); } /* Outlined on dark backgrounds. */ .nx-btn--ghost-dark { background: rgba(255, 255, 255, 0.02); color: var(--nx-white); border-color: var(--nx-line-dark-strong); } .nx-btn--ghost-dark:hover { border-color: var(--nx-accent); background: rgba(4, 181, 255, 0.08); transform: translateY(-1px); box-shadow: 0 8px 22px -12px rgba(4, 181, 255, 0.38); } .nx-btn--lg { --btn-h: 3.25rem; padding-inline: 1.75rem; font-size: 0.9375rem; } .nx-btn--sm { --btn-h: 2.25rem; padding-inline: 1rem; font-size: 0.8125rem; } .nx-btn--block { display: flex; width: 100%; } /* Text link with an animated underline. */ .nx-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; font-weight: 500; text-decoration: none; color: var(--nx-navy); position: relative; } .nx-link { color: var(--nx-accent-deep); } .nx-link::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.3s var(--nx-ease); } .nx-link:hover::after { transform: scaleX(1); transform-origin: left; } .nx-link svg { width: 0.9rem; height: 0.9rem; transition: transform 0.25s var(--nx-ease); } .nx-link:hover svg { transform: translateX(3px); } .nx-on-dark .nx-link { color: var(--nx-white); } /* -------------------------------------------------------------------------- 6. Cards and surfaces -------------------------------------------------------------------------- */ .nx-card { position: relative; display: flex; flex-direction: column; background: var(--nx-white); border: 1px solid var(--nx-light-gray); border-radius: var(--nx-radius); box-shadow: var(--nx-shadow-sm); transition: border-color 0.25s var(--nx-ease), background-color 0.25s var(--nx-ease), box-shadow 0.3s var(--nx-ease), transform 0.3s var(--nx-ease); } .nx-card:hover { border-color: #c4ccdb; box-shadow: var(--nx-shadow-lg); transform: translateY(-3px); } .nx-card--dark { background: var(--nx-midnight); border-color: var(--nx-line-dark); color: var(--nx-white); box-shadow: 0 12px 40px -16px rgba(0, 0, 0, 0.6); } .nx-card--dark:hover { border-color: var(--nx-line-dark-strong); background: var(--nx-dark); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.75); } /* * Service tile. Uses a shared grid border approach: cells sit flush against * each other with a single hairline between them rather than doubled borders. */ .nx-tile { position: relative; display: flex; flex-direction: column; padding: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); background: transparent; text-decoration: none; color: inherit; isolation: isolate; transition: background-color 0.35s var(--nx-ease), border-color 0.35s var(--nx-ease); } /* Sliding fill that reveals from the bottom on hover. */ .nx-tile::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--nx-soft); transform: scaleY(0); transform-origin: bottom; transition: transform 0.4s var(--nx-ease); } .nx-tile:hover::before, .nx-tile:focus-visible::before { transform: scaleY(1); } .nx-tile__num { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--nx-accent); } .nx-tile__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--nx-light-gray); border-radius: 0.5rem; color: var(--nx-navy); transition: border-color 0.35s var(--nx-ease), color 0.35s var(--nx-ease), background-color 0.35s var(--nx-ease); } .nx-tile:hover .nx-tile__icon { border-color: var(--nx-accent); color: var(--nx-accent); } .nx-tile--dark .nx-tile__icon { border-color: var(--nx-line-dark-strong); color: var(--nx-white); } .nx-tile--dark:hover .nx-tile__icon { border-color: var(--nx-accent); color: var(--nx-accent); } .nx-tile__title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; transition: transform 0.35s var(--nx-ease); } .nx-tile:hover .nx-tile__title { transform: translateX(4px); } /* Circular arrow affordance at the foot of each service tile. */ .nx-tile__arrow { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; border: 1px solid var(--nx-light-gray); color: var(--nx-navy); background: transparent; transition: transform 0.35s var(--nx-ease), color 0.35s var(--nx-ease), border-color 0.35s var(--nx-ease), background-color 0.35s var(--nx-ease); } /* Constrain the inline arrow SVG so it never renders at the default replaced-element size. */ .nx-tile__arrow svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; } .nx-tile:hover .nx-tile__arrow { border-color: var(--nx-accent); color: var(--nx-accent); transform: translate(2px, -2px); } .nx-tile--dark .nx-tile__arrow { border-color: var(--nx-line-dark-strong); color: var(--nx-white); } .nx-tile--dark:hover .nx-tile__arrow { border-color: var(--nx-accent); color: var(--nx-accent); } /* Dark variant used on midnight sections. */ .nx-tile--dark::before { background: var(--nx-dark); } /* -------------------------------------------------------------------------- 7. Badges -------------------------------------------------------------------------- */ .nx-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border: 1px solid var(--nx-light-gray); border-radius: 999px; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nx-medium-gray); text-decoration: none; transition: border-color 0.2s var(--nx-ease), color 0.2s var(--nx-ease), background-color 0.2s var(--nx-ease); } a.nx-badge:hover { border-color: var(--nx-navy); color: var(--nx-navy); box-shadow: var(--nx-shadow-xs); } .nx-badge--dark { border-color: var(--nx-line-dark); color: rgba(255, 255, 255, 0.72); } a.nx-badge--dark:hover { border-color: var(--nx-accent); color: var(--nx-white); } /* -------------------------------------------------------------------------- 8. Form controls -------------------------------------------------------------------------- */ .nx-field { display: flex; flex-direction: column; gap: 0.5rem; } .nx-label { font-size: 0.8125rem; font-weight: 500; color: var(--nx-body); } .nx-label .nx-req { color: var(--nx-accent); margin-left: 0.15rem; } .nx-input, .nx-textarea, .nx-select { width: 100%; padding: 0.75rem 0.875rem; background: var(--nx-white); border: 1px solid var(--nx-light-gray); border-radius: var(--nx-radius); font-size: 0.9375rem; font-family: inherit; color: var(--nx-body); transition: border-color 0.2s var(--nx-ease), box-shadow 0.2s var(--nx-ease); } .nx-input::placeholder, .nx-textarea::placeholder { color: #9aa3b2; } .nx-input:hover, .nx-textarea:hover, .nx-select:hover { border-color: #c4ccdb; } .nx-input:focus, .nx-textarea:focus, .nx-select:focus { outline: none; border-color: var(--nx-navy); box-shadow: var(--nx-shadow-focus), var(--nx-shadow-xs); } .nx-textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; } /* Native select arrow replaced with a navy chevron. */ .nx-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.875rem center; padding-right: 2.5rem; cursor: pointer; } /* Error state. Communicated by text and icon, never colour alone. */ .nx-input[aria-invalid='true'], .nx-textarea[aria-invalid='true'], .nx-select[aria-invalid='true'] { border-color: var(--nx-navy); border-width: 2px; background-color: #fff; } .nx-error { display: none; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 500; color: var(--nx-navy); } .nx-error.is-visible { display: flex; } .nx-error::before { content: '!'; display: inline-flex; align-items: center; justify-content: center; width: 0.9rem; height: 0.9rem; border: 1px solid currentColor; border-radius: 999px; font-size: 0.6rem; font-weight: 700; flex-shrink: 0; } /* Honeypot field, hidden from humans but not display:none for bots. */ .nx-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* Screen-reader only. */ .nx-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 9. Navigation -------------------------------------------------------------------------- */ .nx-header { position: sticky; top: 0; z-index: 100; background: var(--nx-midnight); border-bottom: 1px solid transparent; transition: background-color 0.3s var(--nx-ease), border-color 0.3s var(--nx-ease); } .nx-header.is-scrolled { background: rgba(17, 20, 47, 0.82); border-bottom-color: var(--nx-line-dark); box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.6); } @supports (backdrop-filter: blur(12px)) { .nx-header.is-scrolled { backdrop-filter: blur(12px) saturate(140%); } } .nx-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: var(--nx-header-h); } .nx-logo { display: inline-flex; align-items: center; flex-shrink: 0; } .nx-logo img { width: 9rem; max-width: 60vw; height: auto; display: block; } .nx-navlink { position: relative; font-size: 0.875rem; font-weight: 400; color: rgba(255, 255, 255, 0.66); text-decoration: none; padding-block: 0.4rem; transition: color 0.2s var(--nx-ease); } .nx-navlink:hover { color: var(--nx-white); } .nx-navlink::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--nx-accent); transform: scaleX(0); transform-origin: right; transition: transform 0.3s var(--nx-ease); } .nx-navlink:hover::after { transform: scaleX(1); transform-origin: left; } .nx-navlink.is-active { color: var(--nx-white); } .nx-navlink.is-active::after { transform: scaleX(1); } /* Hamburger that morphs into a close icon. */ .nx-burger { position: relative; display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 2.75rem; height: 2.75rem; padding: 0 0.75rem; background: transparent; border: 0; cursor: pointer; } .nx-burger span { display: block; height: 1.5px; width: 100%; background: var(--nx-white); transition: transform 0.3s var(--nx-ease), opacity 0.2s var(--nx-ease); } .nx-burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nx-burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; } .nx-burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Full-screen mobile panel. */ .nx-mobile { position: fixed; inset: var(--nx-header-h) 0 0 0; z-index: 99; background: var(--nx-midnight); display: flex; flex-direction: column; justify-content: space-between; padding: 2rem var(--nx-gutter) 2.5rem; overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.3s var(--nx-ease), transform 0.3s var(--nx-ease), visibility 0.3s; } /* Hide the mobile menu + burger on desktop (>=1024px). Show only on tablet/mobile. */ @media (min-width: 1024px) { .nx-burger { display: none !important; } .nx-mobile { display: none !important; } } .nx-mobile.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .nx-mobile__link { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: 1.15rem; border-bottom: 1px solid var(--nx-line-dark); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; color: var(--nx-white); text-decoration: none; /* Staggered entry, driven by --i set inline. */ opacity: 0; transform: translateY(10px); } .nx-mobile.is-open .nx-mobile__link { animation: nxMobileIn 0.45s var(--nx-ease) forwards; animation-delay: calc(var(--i, 0) * 55ms + 60ms); } .nx-mobile__link .nx-mono { color: var(--nx-medium-gray); } .nx-mobile__link.is-active { color: var(--nx-accent); } .nx-mobile__link.is-active .nx-mono { color: var(--nx-accent); } @keyframes nxMobileIn { to { opacity: 1; transform: translateY(0); } } /* Lock background scroll while the menu is open. */ body.nx-no-scroll { overflow: hidden; } /* -------------------------------------------------------------------------- 10. Accordion -------------------------------------------------------------------------- */ .nx-acc__item { border-bottom: 1px solid var(--nx-light-gray); } .nx-acc__trigger { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; padding: 1.5rem 0; background: none; border: 0; cursor: pointer; text-align: left; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; color: var(--nx-navy); font-family: inherit; } .nx-acc__icon { position: relative; flex-shrink: 0; width: 1rem; height: 1rem; } .nx-acc__icon::before, .nx-acc__icon::after { content: ''; position: absolute; background: var(--nx-accent); transition: transform 0.3s var(--nx-ease), opacity 0.3s var(--nx-ease); } .nx-acc__icon::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); } .nx-acc__icon::after { left: 50%; top: 0; height: 100%; width: 1.5px; transform: translateX(-50%); } .nx-acc__trigger[aria-expanded='true'] .nx-acc__icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; } /* Height animated via max-height so it works without JS measurement. */ .nx-acc__panel { overflow: hidden; max-height: 0; transition: max-height 0.35s var(--nx-ease); } .nx-acc__panel-inner { padding-bottom: 1.5rem; max-width: 60ch; color: var(--nx-medium-gray); line-height: 1.7; } /* -------------------------------------------------------------------------- 11. Article prose -------------------------------------------------------------------------- */ .nx-prose { color: #2a2e44; font-size: 1.0625rem; line-height: 1.75; } .nx-prose > * + * { margin-top: 1.375rem; } .nx-prose h2, .nx-prose h3, .nx-prose h4 { color: var(--nx-navy); font-weight: 600; letter-spacing: -0.025em; line-height: 1.25; margin-top: 2.75rem; margin-bottom: 0.25rem; scroll-margin-top: calc(var(--nx-header-h) + 1.5rem); } .nx-prose h2 { font-size: 1.75rem; } .nx-prose h3 { font-size: 1.3125rem; } .nx-prose h4 { font-size: 1.0625rem; } .nx-prose a { color: var(--nx-navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: #aebdd6; transition: text-decoration-color 0.2s var(--nx-ease); } .nx-prose a:hover { text-decoration-color: var(--nx-accent); } .nx-prose strong { color: var(--nx-navy); font-weight: 600; } .nx-prose ul, .nx-prose ol { padding-left: 1.35rem; } .nx-prose ul { list-style: disc; } .nx-prose ol { list-style: decimal; } .nx-prose li { margin-top: 0.5rem; padding-left: 0.3rem; } .nx-prose li::marker { color: var(--nx-medium-gray); } .nx-prose blockquote { margin-block: 2.25rem; padding: 0.25rem 0 0.25rem 1.5rem; border-left: 2px solid var(--nx-accent); font-size: 1.1875rem; line-height: 1.6; letter-spacing: -0.015em; color: var(--nx-navy); } .nx-prose blockquote p { margin: 0; } .nx-prose img, .nx-prose figure { margin-block: 2.25rem; } .nx-prose img { width: 100%; height: auto; border-radius: var(--nx-radius); border: 1px solid var(--nx-light-gray); } .nx-prose figcaption { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--nx-medium-gray); text-align: center; } .nx-prose pre { margin-block: 2rem; padding: 1.25rem 1.375rem; background: var(--nx-midnight); color: #ededed; border-radius: var(--nx-radius); overflow-x: auto; font-size: 0.8438rem; line-height: 1.7; } .nx-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.875em; background: var(--nx-soft); border: 1px solid var(--nx-light-gray); padding: 0.1rem 0.35rem; border-radius: 4px; } .nx-prose pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; } .nx-prose hr { margin-block: 3rem; border: 0; border-top: 1px solid var(--nx-light-gray); } .nx-prose table { width: 100%; border-collapse: collapse; margin-block: 2rem; font-size: 0.9375rem; display: block; overflow-x: auto; } .nx-prose th, .nx-prose td { border: 1px solid var(--nx-light-gray); padding: 0.7rem 0.9rem; text-align: left; } .nx-prose th { background: var(--nx-soft); font-weight: 600; color: var(--nx-navy); } /* -------------------------------------------------------------------------- 12. Footer -------------------------------------------------------------------------- */ .nx-footer { background: var(--nx-midnight); color: rgba(255, 255, 255, 0.62); } .nx-footer a { color: rgba(255, 255, 255, 0.62); text-decoration: none; transition: color 0.2s var(--nx-ease); } .nx-footer a:hover { color: var(--nx-white); } .nx-footer__heading { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--nx-white); margin-bottom: 1.25rem; } /* Oversized wordmark that bleeds along the footer base. */ .nx-footer__wordmark { font-size: clamp(2.25rem, 11vw, 8.5rem); font-weight: 600; letter-spacing: -0.05em; line-height: 0.85; color: rgba(255, 255, 255, 0.05); user-select: none; white-space: nowrap; text-align: center; } /* Minimal "server cable" status line framing the wordmark: a thin cable with connector nubs at each end and a glowing active port in the middle. */ .nx-footer__cable { position: relative; height: 2px; max-width: 600px; margin: 1.5rem auto 0; border-radius: 9999px; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.10) 15%, rgba(4, 181, 255, 0.55) 50%, rgba(255, 255, 255, 0.10) 85%, transparent 100%); } .nx-footer__cable::before, .nx-footer__cable::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); transform: translateY(-50%); } .nx-footer__cable::before { left: 8%; } .nx-footer__cable::after { right: 8%; } .nx-footer__cable-node { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-radius: 9999px; background: #04B5FF; box-shadow: 0 0 12px rgba(4, 181, 255, 0.85); transform: translate(-50%, -50%); animation: nxPulse 2.6s ease-in-out infinite; } /* -------------------------------------------------------------------------- 13. Utilities -------------------------------------------------------------------------- */ /* Elevate the hairline-grid surfaces (services, capabilities, why, process) so they read as composed cards rather than flat tables. The selector is narrow: it matches only wrappers that are a grid, use a 1px gap and round corners — i.e. the shared "gap-px border" pattern. */ .grid[class*="gap-px"][class*="rounded-lg"] { box-shadow: var(--nx-shadow-md); } .nx-divider { height: 1px; background: var(--nx-light-gray); border: 0; } .nx-divider--dark { background: var(--nx-line-dark); } /* Back-to-top button. */ .nx-totop { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; background: var(--nx-navy); color: var(--nx-white); border: 1px solid var(--nx-line-dark-strong); border-radius: 999px; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.3s var(--nx-ease), transform 0.3s var(--nx-ease), visibility 0.3s, background-color 0.2s var(--nx-ease); } .nx-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .nx-totop:hover { background: var(--nx-dark-gray); } /* Aspect-ratio image frame with a subtle treatment. */ .nx-media { position: relative; overflow: hidden; background: var(--nx-soft); border: 1px solid var(--nx-light-gray); border-radius: var(--nx-radius); } .nx-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--nx-ease), filter 0.4s var(--nx-ease); } .nx-media:hover img, a:hover .nx-media img { transform: scale(1.03); } /* Placeholder used when a post has no featured image. */ .nx-media--empty { display: grid; place-items: center; background: repeating-linear-gradient( 45deg, var(--nx-soft) 0 10px, #eef3f9 10px 20px ); } /* -------------------------------------------------------------------------- 14. Technology & connectivity partners -------------------------------------------------------------------------- */ .nx-partners__group-label { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--nx-medium-gray); } .nx-partners__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 1.5rem; background: var(--nx-light-gray); border: 1px solid var(--nx-light-gray); border-radius: var(--nx-radius); overflow: hidden; } @media (min-width: 540px) { .nx-partners__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 768px) { .nx-partners__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1024px) { .nx-partners__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } } /* The carrier group has fewer, wider marks. */ .nx-partners__grid--carrier { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 640px) { .nx-partners__grid--carrier { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .nx-partner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.85rem; padding: 1.75rem 1rem; background: #fff; text-align: center; transition: background-color 0.3s var(--nx-ease), box-shadow 0.3s var(--nx-ease); } .nx-partner:hover { background: var(--nx-soft); box-shadow: inset 0 0 0 1px var(--nx-accent-line); } .nx-partner__logo { height: 38px; width: auto; max-width: 100%; object-fit: contain; /* Normalise every mark into one calm, monochrome set; reveal brand colour on hover so the wall feels alive without shouting. */ filter: grayscale(1) contrast(0.92) opacity(0.62); transition: filter 0.35s var(--nx-ease), transform 0.35s var(--nx-ease); } .nx-partner:hover .nx-partner__logo { filter: grayscale(0) contrast(1) opacity(1); transform: translateY(-2px) scale(1.04); } .nx-partner__name { font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--nx-medium-gray); line-height: 1.2; transition: color 0.3s var(--nx-ease); } .nx-partner:hover .nx-partner__name { color: var(--nx-navy); } .nx-partners__note { margin-top: 1.75rem; font-size: 0.75rem; color: var(--nx-medium-gray); text-align: center; } /* -------------------------------------------------------------------------- 15. Live status (online presence) + team avatars -------------------------------------------------------------------------- */ .nx-status { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 500; color: var(--nx-navy); } .nx-status__dot { position: relative; width: 0.55rem; height: 0.55rem; border-radius: 9999px; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); animation: nxLivePing 2.4s ease-out infinite; } .nx-status__dot::after { content: ''; position: absolute; inset: 0; border-radius: 9999px; background: #22c55e; z-index: -1; animation: nxLiveRing 2.4s ease-out infinite; } @keyframes nxLivePing { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } @keyframes nxLiveRing { 0% { transform: scale(1); opacity: 0.55; } 70% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } } /* Offline state: calm grey dot, no pulse. Scoped to beat the chat-specific green rules (equal specificity) so the offline colour always wins regardless of source order. */ .nx-status__dot.is-offline, .nx-chat__head-status .nx-status__dot.is-offline, .nx-chat__launcher .nx-status__dot.is-offline { background: #94a3b8 !important; animation: none !important; box-shadow: none !important; } .nx-status__dot.is-offline::after, .nx-chat__head-status .nx-status__dot.is-offline::after, .nx-chat__launcher .nx-status__dot.is-offline::after { display: none !important; } /* Small circular avatar with initials. */ .nx-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 9999px; background: linear-gradient(150deg, var(--nx-navy), var(--nx-dark-gray)); color: #fff; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; flex-shrink: 0; box-shadow: 0 6px 18px rgba(17, 20, 47, 0.18); } .nx-avatar--sm { width: 2.25rem; height: 2.25rem; font-size: 0.75rem; } .nx-avatar--accent { background: linear-gradient(150deg, var(--nx-accent), #2cc2ff); color: var(--nx-midnight); box-shadow: 0 6px 18px rgba(4, 181, 255, 0.35); } .nx-team { display: inline-flex; align-items: center; } .nx-team .nx-avatar { margin-left: -0.6rem; border: 2px solid #fff; } .nx-team .nx-avatar:first-child { margin-left: 0; } /* -------------------------------------------------------------------------- 16. Live chat widget (human presence) -------------------------------------------------------------------------- */ .nx-chat { position: fixed; z-index: 95; right: 1.25rem; bottom: 5.75rem; } .nx-chat__launcher { position: relative; display: inline-flex; align-items: center; gap: 0.6rem; height: 3.25rem; padding: 0 1.15rem 0 1rem; border: 1px solid var(--nx-accent); border-radius: 9999px; background: var(--nx-accent); color: var(--nx-midnight); font-size: 0.875rem; font-weight: 600; cursor: pointer; box-shadow: 0 8px 22px -8px rgba(4, 181, 255, 0.42); transition: transform 0.25s var(--nx-ease), box-shadow 0.25s var(--nx-ease), background-color 0.25s var(--nx-ease); } .nx-chat__launcher:hover { background: #03A6E8; border-color: #03A6E8; transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(4, 181, 255, 0.5); } .nx-chat__launcher svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; } .nx-chat__launcher-text { white-space: nowrap; } .nx-chat__launcher .nx-status__dot { position: absolute; top: 0.35rem; right: 0.55rem; } .nx-chat__panel { position: absolute; right: 0; bottom: calc(100% + 1rem); width: min(92vw, 23rem); display: flex; flex-direction: column; max-height: min(70vh, 34rem); background: #fff; border: 1px solid var(--nx-light-gray); border-radius: 0.9rem; box-shadow: 0 30px 70px -20px rgba(17, 20, 47, 0.45); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.98); transform-origin: bottom right; transition: opacity 0.25s var(--nx-ease), transform 0.25s var(--nx-ease), visibility 0.25s; } .nx-chat.is-open .nx-chat__panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .nx-chat__head { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem; background: linear-gradient(150deg, var(--nx-navy), var(--nx-dark-gray)); color: #fff; } .nx-chat__head-info { line-height: 1.2; } .nx-chat__head-name { font-size: 0.9375rem; font-weight: 600; } .nx-chat__head-status { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.6875rem; color: rgba(255,255,255,0.7); margin-top: 0.15rem; } .nx-chat__head-status .nx-status__dot { background: #3fe08a; } .nx-chat__head-status .nx-status__dot::after { background: #3fe08a; } .nx-chat__close { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 0; background: rgba(255,255,255,0.08); border-radius: 9999px; color: #fff; cursor: pointer; transition: background-color 0.2s var(--nx-ease); } .nx-chat__close:hover { background: rgba(255,255,255,0.18); } .nx-chat__close svg { width: 1rem; height: 1rem; } .nx-chat__body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; background: var(--nx-soft); scrollbar-width: thin; scrollbar-color: rgba(17,20,47,0.2) transparent; } .nx-chat__body::-webkit-scrollbar { width: 7px; } .nx-chat__body::-webkit-scrollbar-thumb { background: rgba(17,20,47,0.18); border-radius: 9999px; } .nx-msg { display: flex; gap: 0.5rem; align-items: flex-end; max-width: 90%; animation: nxMsgIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes nxMsgIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } } .nx-msg__bubble { padding: 0.6rem 0.8rem; border-radius: 0.85rem; font-size: 0.8125rem; line-height: 1.45; background: #fff; border: 1px solid var(--nx-light-gray); color: var(--nx-body); } .nx-msg__time { font-size: 0.6rem; color: var(--nx-medium-gray); margin-top: 0.25rem; } .nx-msg--agent { align-self: flex-start; } .nx-msg--user { align-self: flex-end; flex-direction: row-reverse; } .nx-msg--user .nx-msg__bubble { background: var(--nx-navy); color: #fff; border-color: var(--nx-navy); } .nx-chat__typing { display: flex; gap: 0.25rem; padding: 0.7rem 0.85rem; background: #fff; border: 1px solid var(--nx-light-gray); border-radius: 0.85rem; width: fit-content; } .nx-chat__typing span { width: 0.4rem; height: 0.4rem; border-radius: 9999px; background: var(--nx-medium-gray); animation: nxTyping 1.2s infinite ease-in-out; } .nx-chat__typing span:nth-child(2) { animation-delay: 0.18s; } .nx-chat__typing span:nth-child(3) { animation-delay: 0.36s; } @keyframes nxTyping { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } } .nx-chat__quick { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.5rem 0.75rem 0; } .nx-chat__chip { font: inherit; font-size: 0.75rem; font-weight: 500; padding: 0.35rem 0.7rem; border-radius: 9999px; border: 1px solid var(--nx-accent-line); background: #fff; color: var(--nx-navy); cursor: pointer; transition: background-color 0.2s var(--nx-ease), color 0.2s var(--nx-ease), border-color 0.2s var(--nx-ease); } .nx-chat__chip:hover { background: var(--nx-accent); border-color: var(--nx-accent); color: var(--nx-midnight); } .nx-chat__cta { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.2rem; font-size: 0.8125rem; font-weight: 600; color: var(--nx-midnight); text-decoration: none; background: var(--nx-accent); padding: 0.55rem 0.85rem; border-radius: 0.7rem; } .nx-chat__cta svg { width: 0.95rem; height: 0.95rem; } .nx-chat__foot { display: flex; gap: 0.5rem; padding: 0.75rem; border-top: 1px solid var(--nx-light-gray); background: #fff; } .nx-chat__input { flex: 1; min-width: 0; padding: 0.6rem 0.8rem; border: 1px solid var(--nx-light-gray); border-radius: 9999px; font: inherit; font-size: 0.8125rem; color: var(--nx-body); background: var(--nx-soft); } .nx-chat__input:focus { outline: none; border-color: var(--nx-navy); box-shadow: 0 0 0 3px rgba(4,181,255,0.18); background: #fff; } .nx-chat__send { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; flex-shrink: 0; border: 0; border-radius: 9999px; background: var(--nx-navy); color: #fff; cursor: pointer; transition: background-color 0.2s var(--nx-ease); } .nx-chat__send:hover { background: var(--nx-dark-gray); } .nx-chat__send svg { width: 1.05rem; height: 1.05rem; } @media (max-width: 480px) { .nx-chat__launcher-text { display: none; } .nx-chat__launcher { padding: 0; width: 3.25rem; justify-content: center; } .nx-chat__launcher .nx-status__dot { top: 0.3rem; right: 0.3rem; } } /* Hide the back-to-top button while the chat is open to avoid clutter. */ body.nx-chat-open .nx-totop { opacity: 0 !important; visibility: hidden !important; } /* -------------------------------------------------------------------------- 17. Hero: premium mesh-gradient + system core -------------------------------------------------------------------------- */ /* Full-bleed animated mesh gradient (calm, premium ambient motion). */ .hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .hero-bg__blob { position: absolute; border-radius: 9999px; filter: blur(72px); will-change: transform; } .hero-bg__blob--1 { width: 46%; height: 46%; left: -6%; top: -10%; background: radial-gradient(circle, rgba(4, 181, 255, 0.16), transparent 70%); animation: heroDrift1 26s ease-in-out infinite; } .hero-bg__blob--2 { width: 52%; height: 52%; right: -14%; bottom: -18%; background: radial-gradient(circle, rgba(29, 32, 69, 0.92), transparent 70%); animation: heroDrift2 32s ease-in-out infinite; } .hero-bg__blob--3 { width: 34%; height: 34%; right: 10%; top: -6%; background: radial-gradient(circle, rgba(4, 181, 255, 0.10), transparent 70%); animation: heroDrift3 36s ease-in-out infinite; } @keyframes heroDrift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(7%,9%) scale(1.15); } } @keyframes heroDrift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-6%,-7%) scale(1.1); } } @keyframes heroDrift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-8%,6%) scale(1.2); } } /* System core: a glowing unified technology core. */ .hero-core { position: relative; } .hero-core__glow { position: absolute; inset: 14%; border-radius: 9999px; background: radial-gradient(circle, rgba(4, 181, 255, 0.30), rgba(4, 181, 255, 0.05) 45%, transparent 70%); filter: blur(8px); pointer-events: none; } .hero-core__spin { transform-box: fill-box; transform-origin: center; animation: heroSpin 48s linear infinite; } @keyframes heroSpin { to { transform: rotate(360deg); } } .hero-core__dot { fill: #04B5FF; filter: drop-shadow(0 0 12px rgba(4, 181, 255, 0.7)); } /* Cursor-following spotlight (trendy premium interaction). */ .hero-spotlight { position: absolute; top: 0; left: 0; width: 460px; height: 460px; border-radius: 9999px; pointer-events: none; background: radial-gradient(circle, rgba(4, 181, 255, 0.18), transparent 60%); transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.5s var(--nx-ease); mix-blend-mode: screen; } .hero-core:hover .hero-spotlight, .hero-core:focus-within .hero-spotlight { opacity: 1; } /* Interactive, business-driven system core. Each orbiting node is a real Zorn service domain. Hovering or focusing a node brightens its link into the core, updates the caption, and the core itself responds - reinforcing the "one connected system" message. */ .hero-core { will-change: transform; } /* Ring accelerates while the pointer is engaged with the core. */ .hero-core.is-active .hero-core__spin { animation-duration: 16s; } /* Faint spokes: every domain is already linked to the one core. */ .hero-core__spokes line { stroke: rgba(255, 255, 255, 0.10); stroke-width: 1; } /* Bright connector to the active domain. */ .hero-core__link { stroke: rgba(4, 181, 255, 0.75); stroke-width: 1.75; stroke-linecap: round; opacity: 0; transition: opacity 0.3s var(--nx-ease); } .hero-core__link.is-active { opacity: 1; } /* Domain nodes are interactive and keyboard accessible. */ .hero-core__node { cursor: pointer; outline: none; } .hero-core__node circle { fill: #04B5FF; filter: drop-shadow(0 0 6px rgba(4, 181, 255, 0.55)); transform-box: fill-box; transform-origin: center; transition: fill 0.2s var(--nx-ease), opacity 0.2s var(--nx-ease), filter 0.2s var(--nx-ease), transform 0.2s var(--nx-ease); } .hero-core__node.is-dim circle { opacity: 0.35; } .hero-core__node.is-hot circle { fill: #8be9ff; filter: drop-shadow(0 0 12px rgba(4, 181, 255, 1)); transform: scale(1.5); } .hero-core__node:focus-visible circle { stroke: #fff; stroke-width: 2.5; } /* The core responds when a domain is engaged. */ .hero-core__dot { fill: #04B5FF; filter: drop-shadow(0 0 12px rgba(4, 181, 255, 0.7)); transition: fill 0.25s var(--nx-ease), filter 0.25s var(--nx-ease); } .hero-core.has-active .hero-core__dot { fill: #8be9ff; filter: drop-shadow(0 0 18px rgba(4, 181, 255, 1)); } /* Caption ties the visual to the business message. */ .hero-core__caption { max-width: 24rem; } .hero-core__caption-label { display: block; font-weight: 600; color: #fff; } .hero-core__caption-blurb { display: block; margin-top: 0.35rem; font-size: 0.875rem; line-height: 1.45; color: rgba(255, 255, 255, 0.6); transition: color 0.3s var(--nx-ease); } @media (prefers-reduced-motion: reduce) { .hero-bg__blob { animation: none; } .hero-terminal__cursor { animation: none !important; opacity: 1 !important; } .hero-terminal__dot { animation: none; } .hero-terminal__chip { transition: none; } } /* ========================================================================== 15. Hero terminal — a live, typeable console that answers short questions about Zorn. Visitors type commands (help, about, services, …) and get concise replies. The typewriter motion is disabled under reduced motion (the JS prints instantly instead). ========================================================================== */ .hero-terminal { position: relative; width: 100%; max-width: 34rem; margin-inline: auto; border-radius: 0.7rem; border: 1px solid rgba(255, 255, 255, 0.10); background: linear-gradient(165deg, rgba(15, 19, 36, 0.94), rgba(9, 12, 24, 0.96)); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(4, 181, 255, 0.05) inset; overflow: hidden; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; color: #c9d1d9; } /* Title bar / tab strip — reads as a genuine terminal app */ .hero-terminal__bar { display: flex; align-items: stretch; background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.7rem; } .hero-terminal__tab { display: inline-flex; align-items: center; padding: 0.55rem 0.9rem; color: rgba(255, 255, 255, 0.55); border-right: 1px solid rgba(255, 255, 255, 0.06); letter-spacing: 0.02em; } .hero-terminal__tab.is-active { color: #fff; background: rgba(4, 181, 255, 0.10); box-shadow: inset 0 -2px 0 #04B5FF; } .hero-terminal__tab--new { color: rgba(255, 255, 255, 0.35); padding-inline: 0.7rem; cursor: default; } .hero-terminal__meta { margin-left: auto; align-self: center; padding: 0 0.9rem; color: rgba(255, 255, 255, 0.35); letter-spacing: 0.06em; } .hero-terminal__screen { height: 16rem; overflow-y: auto; overflow-x: hidden; padding: 0.9rem 1rem; font-size: 0.82rem; line-height: 1.55; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; } .hero-terminal__screen::-webkit-scrollbar { width: 8px; } .hero-terminal__screen::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 9999px; } .hero-terminal__output { min-height: 0; } .hero-terminal__row { white-space: pre-wrap; word-break: break-word; } .hero-terminal__row.is-banner { color: #fff; font-weight: 700; letter-spacing: 0.06em; } .hero-terminal__row.is-sys { color: #04B5FF; } .hero-terminal__row.is-out { color: #c9d1d9; } .hero-terminal__row.is-help { color: rgba(255, 255, 255, 0.7); } .hero-terminal__row.is-err { color: #ff7b72; } .hero-terminal__row.is-cmd { color: #e6edf3; } .hero-terminal__line { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.2rem; } .hero-terminal__prompt { flex-shrink: 0; font-size: 0.82rem; white-space: nowrap; } .hero-terminal__user { color: #7ee787; } .hero-terminal__sep { color: rgba(255, 255, 255, 0.5); } .hero-terminal__path { color: #04B5FF; } .hero-terminal__dollar { color: rgba(255, 255, 255, 0.6); margin-left: 1px; } .hero-terminal__field { position: relative; flex: 1; min-width: 0; display: inline-flex; align-items: center; } .hero-terminal__typed { white-space: pre; color: #fff; font-size: 0.82rem; } .hero-terminal__cursor { display: inline-block; width: 0.5em; height: 1.05em; margin-left: 1px; background: #04B5FF; vertical-align: text-bottom; animation: nxBlink 1.1s step-end infinite; } .hero-terminal__field:not(:focus-within) .hero-terminal__cursor { opacity: 0.4; animation: none; } .hero-terminal__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; outline: none; color: transparent; caret-color: transparent; font: inherit; font-size: 0.82rem; } /* Quick command pills */ .hero-terminal__quick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; padding: 0.7rem 1rem; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.68rem; color: rgba(255, 255, 255, 0.45); } .hero-terminal__quick .nx-mono { letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.35); } .hero-terminal__chip { font: inherit; font-size: 0.68rem; padding: 0.2rem 0.6rem; border-radius: 0.35rem; border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.78); background: rgba(255, 255, 255, 0.04); cursor: pointer; transition: border-color 0.18s var(--nx-ease), color 0.18s var(--nx-ease), background 0.18s var(--nx-ease); } .hero-terminal__chip:hover { border-color: rgba(4, 181, 255, 0.6); color: #04B5FF; background: rgba(4, 181, 255, 0.10); } .hero-terminal__chip:focus-visible { outline: 2px solid #04B5FF; outline-offset: 2px; } /* Status bar — IDE / terminal style */ .hero-terminal__status { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 1rem; border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(4, 181, 255, 0.04); font-size: 0.62rem; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.4); } .hero-terminal__status-left { display: inline-flex; align-items: center; gap: 0.4rem; } .hero-terminal__dot { width: 0.45rem; height: 0.45rem; border-radius: 9999px; background: #3fb950; box-shadow: 0 0 6px rgba(63, 185, 80, 0.8); animation: nxPulse 2.4s ease-in-out infinite; } .hero-terminal__status-right { color: rgba(255, 255, 255, 0.32); } /* ========================================================================== 18. Responsive refinements — phones → ultrawide -------------------------------------------------------------------------- The markup already uses Tailwind responsive utilities; these rules smooth the edges that utility classes can't express: safe areas, sticky-header safety, CTA stacking and rhythm tuning for real devices. ========================================================================== */ /* Fixed UI respects notches / safe areas on modern phones. */ .nx-chat { right: max(1.25rem, env(safe-area-inset-right)); bottom: calc(5.75rem + env(safe-area-inset-bottom)); } .nx-totop { right: max(1.25rem, env(safe-area-inset-right)); bottom: calc(1.25rem + env(safe-area-inset-bottom)); } /* Phones (<= 639px) -------------------------------------------------------- */ @media (max-width: 639px) { /* Tighter section rhythm so pages don't feel empty or padded-out. */ .nx-section { padding-block: clamp(3.25rem, 9vw, 4.5rem); } /* Homepage hero uses fixed Tailwind padding; soften it on small screens. */ .bg-ink > .nx-container.relative.z-10.grid { padding-top: 3rem; padding-bottom: 3rem; } /* Action-button groups stack and go full-width for confident tapping. */ .nx-cta { flex-direction: column; align-items: stretch; } .nx-cta > .nx-btn { width: 100%; } /* Headings a touch tighter so they never crowd the edges. */ .nx-h2 { letter-spacing: -0.03em; } /* Three-up stat rows stack instead of cramping. */ dl [class*="grid-cols-3"] { grid-template-columns: 1fr; } dl [class*="grid-cols-3"] > div + div { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); } /* Terminal: a little shorter so the hero isn't just a console. */ .hero-terminal__screen { height: 14rem; } } /* Very small phones (<= 380px) -------------------------------------------- */ @media (max-width: 380px) { .nx-container { padding-inline: 1.1rem; } .nx-logo img { width: 8rem; } .nx-h2 { font-size: clamp(1.6rem, 1.2rem + 3vw, 2.2rem); } } /* Small phones: keep the partner wall comfortable, never 1-up cramped. */ @media (max-width: 539px) { .nx-partners__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nx-partners__grid--carrier { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Tablet and down: keep the oversized footer wordmark in check. */ @media (max-width: 1023px) { .nx-footer__wordmark { font-size: clamp(2rem, 13vw, 5rem); } /* Let the contact form and its info stack with a clear gap. */ .lg\:col-span-5, .lg\:col-span-7 { grid-column: auto; } } /* Landscape phones / small tablets: a touch more room for the hero terminal. */ @media (min-width: 640px) and (max-width: 1023px) { .hero-terminal { max-width: 30rem; } } /* Ultrawide: give long-form content a slightly wider, comfortable measure. */ @media (min-width: 1536px) { :root { --nx-container: 1320px; } .nx-container { max-width: 1320px; } }