/* ========================================================= home.css — index.html rebuild ("The Violet Foundry") Scoped to homepage sections via the .hm- prefix. Loaded AFTER style.css; relies on its :root tokens. ========================================================= */ /* --- Local design tokens additive to :root ---------------- */ :root { --hm-foundry: #734BDF; --hm-foundry-light: #8A62FF; --hm-deep-vault: #1F154E; --hm-midnight-plum: #150F35; --hm-workspace-white: #FFFFFF; --hm-workspace-off-white: #F4F5F9; --hm-ink: #1E293B; --hm-ink-muted: #475569; /* contrast-fixed (was #94A3B8 = 2.6:1) */ --hm-ink-soft: #64748B; --hm-paper: #FFFFFF; --hm-paper-muted: #CBD5E1; --hm-border-day: #E2E8F0; --hm-border-night: rgba(255, 255, 255, 0.10); --hm-ease: cubic-bezier(0.77, 0, 0.175, 1); --hm-ease-loader: cubic-bezier(0.19, 1, 0.22, 1); --hm-r-sm: 8px; --hm-r-md: 12px; --hm-r-lg: 20px; --hm-r-xl: 32px; --hm-r-pill: 100px; } /* Load Space Mono helper class (font face comes from ) */ .hm-mono { font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; } /* Skip link: hidden until keyboard-focused */ .hm-skip-link { position: absolute; top: 0; left: 0; background: var(--hm-foundry); color: var(--hm-paper); padding: 12px 20px; font-family: 'Onest', sans-serif; font-weight: 600; font-size: 0.9375rem; text-decoration: none; border-radius: 0 0 var(--hm-r-sm) 0; transform: translateY(-110%); transition: transform 200ms var(--hm-ease); z-index: 9999; } .hm-skip-link:focus { transform: translateY(0); outline: none; box-shadow: 0 0 0 3px rgba(115, 75, 223, 0.40); } /* Eyebrow label = mono in Foundry Violet on light, lighter violet on dark */ .hm-eyebrow { display: inline-block; font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-foundry); margin-bottom: 24px; } .hm-section-dark .hm-eyebrow { color: var(--hm-foundry-light); } /* Container override — narrower than :root --container-width when needed */ .hm-container { max-width: 1200px; margin: 0 auto; padding: 0 32px; } @media (max-width: 768px) { .hm-container { padding: 0 20px; } } /* Section base */ .hm-section { padding: 120px 0; position: relative; } .hm-section-light { background: var(--hm-workspace-white); color: var(--hm-ink); } .hm-section-dark { background: var(--hm-deep-vault); color: var(--hm-paper); } @media (max-width: 768px) { .hm-section { padding: 80px 0; } } /* Section header (eyebrow + title + ghost number) */ .hm-section-head { max-width: 760px; margin-bottom: 72px; position: relative; } /* Massive ghost section number anchored top-right of the head */ .hm-section-ghost { position: absolute; top: -1.5rem; right: -2rem; font-family: 'Duepuntozero', 'Onest', sans-serif; font-size: clamp(5.5rem, 13vw, 11rem); line-height: 0.82; font-weight: 400; letter-spacing: -0.04em; color: var(--hm-foundry); opacity: 0.08; pointer-events: none; user-select: none; z-index: 0; } .hm-section-dark .hm-section-ghost { color: var(--hm-foundry-light); opacity: 0.12; } .hm-section-head .hm-eyebrow, .hm-section-head h2, .hm-section-head p { position: relative; z-index: 1; } @media (max-width: 760px) { .hm-section-ghost { right: -8px; top: -1rem; font-size: clamp(4.5rem, 22vw, 7rem); opacity: 0.07; } } .hm-section-head h2 { font-family: 'Onest', sans-serif; font-weight: 700; font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.02; letter-spacing: -0.02em; margin: 0; color: inherit; } .hm-section-head p { margin-top: 20px; font-family: 'Onest', sans-serif; font-size: 1.0625rem; line-height: 1.6; color: var(--hm-ink-muted); max-width: 60ch; } .hm-section-dark .hm-section-head p { color: var(--hm-paper-muted); } /* ======================================================== 1. HERO (split-door, dark, full-bleed) ======================================================== */ .hm-hero { background: var(--hm-midnight-plum); color: var(--hm-paper); min-height: clamp(720px, 92vh, 940px); display: flex; flex-direction: column; position: relative; overflow: hidden; padding: 96px 0 56px; } /* Layer 0: animated mesh-gradient blobs (single violet hue, multi-stop) */ .hm-hero-mesh { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .hm-mesh-blob { position: absolute; border-radius: 50%; filter: blur(64px); will-change: transform; } .hm-mesh-blob--1 { top: -12%; left: -10%; width: 60%; height: 70%; background: radial-gradient(circle, rgba(115, 75, 223, 0.55) 0%, transparent 65%); animation: hm-blob-1 22s ease-in-out infinite alternate; } .hm-mesh-blob--2 { top: 18%; right: -18%; width: 65%; height: 60%; background: radial-gradient(circle, rgba(138, 98, 255, 0.40) 0%, transparent 65%); animation: hm-blob-2 28s ease-in-out infinite alternate; } .hm-mesh-blob--3 { bottom: -22%; left: 24%; width: 70%; height: 70%; background: radial-gradient(circle, rgba(63, 43, 160, 0.55) 0%, transparent 60%); animation: hm-blob-3 24s ease-in-out infinite alternate; } .hm-mesh-blob--4 { top: 50%; left: 38%; width: 30%; height: 30%; background: radial-gradient(circle, rgba(167, 136, 255, 0.30) 0%, transparent 60%); animation: hm-blob-4 18s ease-in-out infinite alternate; } @keyframes hm-blob-1 { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(8%, 6%, 0) scale(1.12); } } @keyframes hm-blob-2 { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(-6%, -5%, 0) scale(1.18); } } @keyframes hm-blob-3 { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(-5%, 4%, 0) scale(1.10); } } @keyframes hm-blob-4 { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(10%, -8%, 0) scale(1.25); } } @media (prefers-reduced-motion: reduce) { .hm-mesh-blob { animation: none !important; } } /* Layer 1: subtle blueprint grid sits on top of mesh */ .hm-hero-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 88px 88px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 35%, transparent 85%); mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 35%, transparent 85%); pointer-events: none; z-index: 1; } /* Layer 2: massive ghost wordmark anchored to bottom-center; parallax-shifted on scroll */ .hm-hero-ghost { position: absolute; bottom: -2.5rem; left: 50%; --hm-scroll-y: 0; transform: translate3d(-50%, calc(var(--hm-scroll-y) * -0.25px), 0); font-family: 'Duepuntozero', 'Onest', sans-serif; font-size: clamp(8rem, 22vw, 18rem); line-height: 0.78; font-weight: 400; letter-spacing: -0.04em; color: var(--hm-foundry); opacity: 0.08; white-space: nowrap; user-select: none; pointer-events: none; will-change: transform; } @media (prefers-reduced-motion: reduce) { .hm-hero-ghost { transform: translateX(-50%) !important; } } /* Layer 3: violet bottom bleed glow */ .hm-hero-glow { position: absolute; bottom: -15%; left: 50%; width: 100%; height: 70%; transform: translateX(-50%); background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(115, 75, 223, 0.30) 0%, transparent 70%), radial-gradient(ellipse 100% 100% at 50% 100%, rgba(63, 43, 160, 0.40) 0%, transparent 60%); pointer-events: none; } /* Layer 4: dark vignette overlay so mesh stays readable behind text */ .hm-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 90% 70% at 50% 50%, transparent 0%, rgba(21, 15, 53, 0.55) 100%), linear-gradient(180deg, rgba(21, 15, 53, 0.50) 0%, transparent 25%, transparent 70%, rgba(21, 15, 53, 0.55) 100%); pointer-events: none; z-index: 1; } .hm-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1280px; margin: 0 auto; padding: 56px 32px 0; display: flex; flex-direction: column; gap: 80px; flex-grow: 1; } /* Floating product mockup (right column of hero) */ .hm-hero-mockup { position: relative; perspective: 1400px; transform-style: preserve-3d; height: 100%; min-height: 320px; animation: hm-mockup-float 7s ease-in-out infinite; will-change: transform; } .hm-mockup { position: absolute; background: var(--hm-deep-vault); border: 1px solid rgba(138, 98, 255, 0.40); border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(21, 15, 53, 0.50), 0 40px 120px rgba(115, 75, 223, 0.35); } .hm-mockup-chrome { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: rgba(21, 15, 53, 0.40); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .hm-mockup-chrome>span { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); } .hm-mockup-chrome>span:nth-child(1) { background: rgba(255, 95, 86, 0.6); } .hm-mockup-chrome>span:nth-child(2) { background: rgba(255, 189, 46, 0.6); } .hm-mockup-chrome>span:nth-child(3) { background: rgba(40, 200, 64, 0.6); } .hm-mockup-url { margin-left: 16px; flex-grow: 1; text-align: center; font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.7rem; letter-spacing: 0.08em; color: var(--hm-paper-muted); background: rgba(21, 15, 53, 0.30); padding: 4px 12px; border-radius: 100px; width: fit-content; } .hm-mockup img { display: block; width: 100%; height: auto; } /* Front mockup: SmileQute, primary, tilted slightly */ .hm-mockup--front { top: 8%; left: 6%; right: 0; width: 92%; transform: rotate3d(0, 1, 0, -8deg) rotate3d(1, 0, 0, 4deg); z-index: 2; } /* Back mockup: HRMSuite, smaller, tilted more, faded */ .hm-mockup--back { top: 0; right: 4%; width: 70%; transform: rotate3d(0, 1, 0, -14deg) rotate3d(1, 0, 0, 6deg) translate3d(8%, -8%, -40px); opacity: 0.65; z-index: 1; box-shadow: 0 16px 40px rgba(21, 15, 53, 0.40), 0 24px 60px rgba(63, 43, 160, 0.30); } @keyframes hm-mockup-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -12px, 0); } } @media (max-width: 980px) { .hm-hero-mockup { min-height: 280px; max-width: 540px; margin: 0 auto; } .hm-mockup--front { transform: rotate3d(0, 1, 0, -4deg) rotate3d(1, 0, 0, 2deg); left: 8%; width: 88%; } .hm-mockup--back { transform: rotate3d(0, 1, 0, -8deg) rotate3d(1, 0, 0, 3deg) translate3d(6%, -6%, -30px); width: 60%; } } @media (max-width: 560px) { .hm-hero-mockup { min-height: 220px; } } @media (prefers-reduced-motion: reduce) { .hm-hero-mockup { animation: none !important; } } /* Hero kinetic client ticker (bottom rail) */ .hm-hero-ticker { position: relative; z-index: 2; border-top: 1px solid var(--hm-border-night); border-bottom: 1px solid var(--hm-border-night); padding: 14px 0; overflow: hidden; background: rgba(21, 15, 53, 0.10); } .hm-hero-ticker-track { display: flex; gap: 56px; width: max-content; animation: hm-ticker 48s linear infinite; font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.20em; color: var(--hm-paper-muted); text-transform: uppercase; white-space: nowrap; } .hm-hero-ticker-track>span { display: inline-flex; align-items: center; } .hm-hero-ticker-dot { color: var(--hm-foundry-light); font-weight: 700; } @keyframes hm-ticker { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .hm-hero-ticker-track { animation: none; } } /* 2-column hero-top layout: headline left, product mockup right */ .hm-hero-top { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } @media (max-width: 980px) { .hm-hero-top { grid-template-columns: 1fr; gap: 48px; } } .hm-hero-headline { max-width: 640px; } /* 3D headline stack: front h1 + 2 echo plates receding into z-space */ .hm-hero-h1-stack { position: relative; perspective: 1600px; transform-style: preserve-3d; margin-bottom: 0; } .hm-hero-h1-stack h1, .hm-hero-h1-echo { font-family: 'Duepuntozero', 'Onest', sans-serif; font-weight: 400; font-size: clamp(3.25rem, 8.25vw, 7rem); line-height: 0.96; letter-spacing: -0.025em; margin: 0; } .hm-hero-h1-stack h1 { position: relative; z-index: 3; color: var(--hm-paper); } .hm-hero-h1-echo { position: absolute; top: 0; left: 0; right: 0; color: transparent; -webkit-text-stroke: 1px var(--hm-foundry-light); text-stroke: 1px var(--hm-foundry-light); pointer-events: none; user-select: none; -webkit-user-select: none; } .hm-hero-h1-echo--far { opacity: 0.14; transform: translate3d(-22px, 18px, -100px); z-index: 1; } .hm-hero-h1-echo--near { opacity: 0.32; transform: translate3d(-11px, 9px, -50px); z-index: 2; } /* Lift the front headline very slightly on hover-area parallax via JS-set var */ .hm-hero-h1-stack { --hm-mx: 0; --hm-my: 0; transform: rotateY(calc(var(--hm-mx) * 1deg)) rotateX(calc(var(--hm-my) * -1deg)); transition: transform 600ms var(--hm-ease); will-change: transform; } @media (max-width: 760px) { .hm-hero-h1-echo--far { transform: translate3d(-10px, 8px, -60px); opacity: 0.12; } .hm-hero-h1-echo--near { transform: translate3d(-5px, 4px, -30px); opacity: 0.24; } } @media (prefers-reduced-motion: reduce) { .hm-hero-h1-stack { transform: none !important; transition: none !important; } .hm-hero-h1-echo { display: none !important; } } .hm-hero-headline h1 .hm-accent { color: var(--hm-foundry-light); font-weight: 400; } .hm-hero-headline p { margin-top: 28px; font-family: 'Onest', sans-serif; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.55; color: var(--hm-paper-muted); max-width: 58ch; } /* Split doors */ .hm-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 -32px; border-top: 1px solid var(--hm-border-night); padding-bottom: 0; } .hm-door { display: block; padding: 56px 32px 64px; color: var(--hm-paper); text-decoration: none; transition: background 600ms var(--hm-ease), transform 600ms var(--hm-ease); position: relative; } .hm-door+.hm-door { border-left: 1px solid var(--hm-border-night); } .hm-door:hover { background: rgba(115, 75, 223, 0.18); } .hm-door:focus-visible { outline: none; background: rgba(115, 75, 223, 0.22); box-shadow: inset 0 0 0 2px var(--hm-foundry); } .hm-door-num { font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-foundry-light); margin-bottom: 14px; display: block; } .hm-door h2 { font-family: 'Onest', sans-serif; font-weight: 700; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 12px; color: var(--hm-paper); } .hm-door p { margin: 0 0 32px; font-family: 'Onest', sans-serif; font-size: 1rem; line-height: 1.55; color: var(--hm-paper-muted); max-width: 42ch; } .hm-door-cta { display: inline-flex; align-items: center; gap: 10px; font-family: 'Onest', sans-serif; font-weight: 600; font-size: 1rem; color: var(--hm-paper); transition: transform 400ms var(--hm-ease), color 200ms var(--hm-ease); } .hm-door:hover .hm-door-cta { color: var(--hm-foundry-light); } .hm-door-cta i { transition: transform 400ms var(--hm-ease); } .hm-door:hover .hm-door-cta i { transform: translateX(6px); } @media (max-width: 760px) { .hm-doors { grid-template-columns: 1fr; margin: 0 -20px; } .hm-door+.hm-door { border-left: none; border-top: 1px solid var(--hm-border-night); } .hm-hero-inner { padding: 40px 20px 0; gap: 56px; } .hm-hero { padding-top: 96px; min-height: auto; } } /* ======================================================== 2. LOGO BAND (white, narrow) ======================================================== */ .hm-logoband { background: var(--hm-workspace-white); padding: 56px 0; border-bottom: 1px solid var(--hm-border-day); } .hm-logoband-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; display: flex; flex-direction: column; align-items: center; gap: 28px; } .hm-logoband-label { font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-ink-muted); } .hm-logoband-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 48px; width: 100%; align-items: center; } .hm-logoband-grid img { max-width: 130px; height: auto; width: 100%; opacity: 0.45; filter: grayscale(1); transition: opacity 400ms var(--hm-ease), filter 400ms var(--hm-ease); } .hm-logoband-grid img:hover { opacity: 1; filter: grayscale(0); } /* Broken-image fallback: show the alt text instead of broken icon */ .hm-logoband-grid img { color: var(--hm-ink-muted); font-family: 'Onest', sans-serif; font-size: 0.85rem; font-weight: 600; text-align: center; } @media (max-width: 920px) { .hm-logoband-grid { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; } } @media (max-width: 480px) { .hm-logoband-grid { grid-template-columns: repeat(2, 1fr); } } /* ======================================================== 3. PRODUCTS (white, 2x2 grid) ======================================================== */ .hm-products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .hm-product { background: var(--hm-workspace-off-white); border-radius: var(--hm-r-lg); padding: 32px; transition: transform 400ms var(--hm-ease), box-shadow 400ms var(--hm-ease); display: flex; flex-direction: column; gap: 24px; position: relative; } .hm-product:hover { transform: translateY(-4px); box-shadow: 0 10px 30px -5px rgba(21, 15, 53, 0.08); } .hm-product-shot { position: relative; aspect-ratio: 16 / 10; border-radius: var(--hm-r-md); overflow: hidden; background: var(--hm-workspace-white); border: 1px solid var(--hm-border-day); } .hm-product-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .hm-product-body { display: flex; flex-direction: column; gap: 12px; flex-grow: 1; } .hm-product-meta { display: flex; align-items: center; gap: 12px; } .hm-product-num { font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-foundry); } .hm-product-cat { font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-ink-muted); } .hm-product h3 { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.01em; margin: 0; color: var(--hm-ink); overflow-wrap: break-word; word-wrap: break-word; } .hm-product p { margin: 0; font-family: 'Onest', sans-serif; font-size: 1rem; line-height: 1.55; color: var(--hm-ink-muted); max-width: 52ch; } .hm-product-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; } .hm-link-cta { display: inline-flex; align-items: center; gap: 8px; font-family: 'Onest', sans-serif; font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: color 200ms var(--hm-ease), transform 400ms var(--hm-ease); } .hm-link-cta.is-primary { color: var(--hm-foundry); } .hm-link-cta.is-secondary { color: var(--hm-ink); } .hm-link-cta:hover { transform: translateX(4px); } .hm-link-cta i { transition: transform 400ms var(--hm-ease); } .hm-link-cta:hover i { transform: translateX(2px); } .hm-link-cta:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(115, 75, 223, 0.30); border-radius: 4px; } @media (max-width: 760px) { .hm-products-grid { grid-template-columns: 1fr; gap: 20px; } .hm-product { padding: 24px; gap: 20px; } .hm-product h3 { font-size: 1.5rem; } } /* ======================================================== 4. SERVICES (dark, 2 asymmetric cards 60/40) ======================================================== */ .hm-services-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; } .hm-service { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--hm-border-night); border-radius: var(--hm-r-lg); padding: 48px 40px 40px; display: flex; flex-direction: column; gap: 24px; position: relative; overflow: hidden; transition: border-color 400ms var(--hm-ease), background 400ms var(--hm-ease), transform 400ms var(--hm-ease); } /* Ghost letter A / B behind each service card */ .hm-service[data-mark]::before { content: attr(data-mark); position: absolute; bottom: -3rem; right: -1rem; font-family: 'Duepuntozero', 'Onest', sans-serif; font-size: clamp(10rem, 22vw, 18rem); line-height: 0.85; color: var(--hm-foundry-light); opacity: 0.10; pointer-events: none; user-select: none; font-weight: 400; letter-spacing: -0.04em; } .hm-service:hover[data-mark]::before { opacity: 0.16; } .hm-service>* { position: relative; z-index: 1; } .hm-service:hover { border-color: rgba(138, 98, 255, 0.40); background: rgba(115, 75, 223, 0.06); transform: translateY(-4px); } .hm-service-num { font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-foundry-light); } .hm-service h3 { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 2rem; line-height: 1.1; letter-spacing: -0.015em; margin: 0; color: var(--hm-paper); } .hm-service p { margin: 0; font-family: 'Onest', sans-serif; font-size: 1.0625rem; line-height: 1.6; color: var(--hm-paper-muted); max-width: 52ch; } .hm-service-proof { display: flex; flex-direction: column; gap: 4px; padding: 20px 0; border-top: 1px solid var(--hm-border-night); border-bottom: 1px solid var(--hm-border-night); } .hm-service-proof-label { font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-foundry-light); } .hm-service-proof-text { font-family: 'Onest', sans-serif; font-size: 1rem; line-height: 1.5; color: var(--hm-paper); } .hm-service-cta { align-self: flex-start; color: var(--hm-foundry-light); } @media (max-width: 900px) { .hm-services-grid { grid-template-columns: 1fr; } .hm-service { padding: 32px 24px; } .hm-service h3 { font-size: 1.625rem; } } /* ======================================================== 5. PROCESS (white, 3 phases horizontal stepper) ======================================================== */ .hm-process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--hm-border-day); } .hm-process-step { padding: 48px 28px 32px; border-right: 1px solid var(--hm-border-day); display: flex; flex-direction: column; gap: 16px; } .hm-process-step:last-child { border-right: none; } .hm-process-num { font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-foundry); } .hm-process-step h3 { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 1.625rem; line-height: 1.1; letter-spacing: -0.01em; margin: 0; color: var(--hm-ink); } .hm-process-step p { margin: 0; font-family: 'Onest', sans-serif; font-size: 1rem; line-height: 1.55; color: var(--hm-ink-muted); max-width: 38ch; } .hm-process-deliv { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; } .hm-process-deliv li { font-family: 'Onest', sans-serif; font-size: 0.9375rem; line-height: 1.5; color: var(--hm-ink-soft); padding-left: 18px; position: relative; } .hm-process-deliv li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 1px; background: var(--hm-foundry); } @media (max-width: 900px) { .hm-process-grid { grid-template-columns: 1fr; } .hm-process-step { border-right: none; border-bottom: 1px solid var(--hm-border-day); padding: 36px 0; } .hm-process-step:last-child { border-bottom: none; } } /* ======================================================== 6. TESTIMONIALS (dark, 2x2 grid) ======================================================== */ .hm-testimonials-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .hm-quote { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--hm-border-night); border-radius: var(--hm-r-lg); padding: 48px 40px 40px; display: flex; flex-direction: column; gap: 28px; position: relative; overflow: hidden; transition: border-color 400ms var(--hm-ease), transform 400ms var(--hm-ease); } /* Signature: large violet quote-mark glyph in top-right corner */ .hm-quote::before { content: "\201C"; position: absolute; top: 1rem; right: 1.5rem; font-family: 'Duepuntozero', 'Onest', serif; font-size: 9rem; line-height: 0.8; color: var(--hm-foundry-light); opacity: 0.18; pointer-events: none; user-select: none; } .hm-quote-body, .hm-quote-attrib { position: relative; z-index: 1; } .hm-quote:hover { border-color: rgba(138, 98, 255, 0.50); transform: translateY(-4px); } .hm-quote:hover::before { opacity: 0.28; } .hm-quote-body { font-family: 'Onest', sans-serif; font-weight: 400; font-size: 1.0625rem; line-height: 1.55; color: var(--hm-paper); margin: 0; flex-grow: 1; overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; } .hm-quote-attrib { display: flex; flex-direction: column; gap: 2px; padding-top: 20px; border-top: 1px solid var(--hm-border-night); } .hm-quote-name { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 1rem; color: var(--hm-paper); } .hm-quote-role { font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.75rem; letter-spacing: 0.10em; color: var(--hm-paper-muted); } @media (max-width: 900px) { .hm-testimonials-grid { grid-template-columns: 1fr; } .hm-quote { padding: 28px 24px; } } /* ======================================================== 7. TALK (white, two-path form) ======================================================== */ .hm-talk-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; } .hm-talk-aside { position: relative; } .hm-talk-aside .hm-section-ghost { top: -3rem; right: -1.5rem; } .hm-talk-aside .hm-eyebrow, .hm-talk-aside h2, .hm-talk-aside p, .hm-talk-aside .hm-talk-info { position: relative; z-index: 1; } .hm-talk-aside h2 { font-family: 'Onest', sans-serif; font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -0.015em; margin: 0; color: var(--hm-ink); } .hm-talk-aside p { margin: 20px 0 0; font-family: 'Onest', sans-serif; font-size: 1.0625rem; line-height: 1.6; color: var(--hm-ink-muted); max-width: 38ch; } .hm-talk-info { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--hm-border-day); padding-top: 24px; } .hm-talk-info-row { display: flex; flex-direction: column; gap: 4px; } .hm-talk-info-label { font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-foundry); } .hm-talk-info-value { font-family: 'Onest', sans-serif; font-size: 0.9375rem; color: var(--hm-ink); line-height: 1.5; } .hm-talk-info-value a { color: var(--hm-ink); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 200ms var(--hm-ease), color 200ms var(--hm-ease); } .hm-talk-info-value a:hover { color: var(--hm-foundry); border-color: var(--hm-foundry); } /* Toggle */ .hm-form { background: var(--hm-workspace-off-white); border-radius: var(--hm-r-xl); padding: 40px; } .hm-toggle { display: grid; grid-template-columns: 1fr 1fr; background: var(--hm-workspace-white); border-radius: var(--hm-r-pill); padding: 4px; margin-bottom: 28px; border: 1px solid var(--hm-border-day); position: relative; } .hm-toggle-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); background: var(--hm-foundry); border-radius: var(--hm-r-pill); transition: transform 400ms var(--hm-ease); z-index: 1; } .hm-toggle[data-mode="demo"] .hm-toggle-thumb { transform: translateX(100%); } .hm-toggle-btn { background: transparent; border: none; padding: 12px 20px; font-family: 'Onest', sans-serif; font-weight: 600; font-size: 0.9375rem; color: var(--hm-ink-muted); cursor: pointer; position: relative; z-index: 2; border-radius: var(--hm-r-pill); transition: color 200ms var(--hm-ease); } .hm-toggle-btn[aria-selected="true"] { color: var(--hm-paper); } .hm-toggle-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(115, 75, 223, 0.40); } .hm-form-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .hm-form-field { display: flex; flex-direction: column; gap: 6px; } .hm-form-field.is-full { grid-column: 1 / -1; } .hm-form-field label { font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-ink-muted); } .hm-form-field input, .hm-form-field select, .hm-form-field textarea { width: 100%; box-sizing: border-box; background: var(--hm-workspace-white); color: var(--hm-ink); font-family: 'Onest', sans-serif; font-size: 1rem; line-height: 1.4; padding: 14px 16px; border: 1px solid var(--hm-border-day); border-radius: var(--hm-r-sm); transition: border-color 200ms var(--hm-ease), box-shadow 200ms var(--hm-ease); font-weight: 400; } .hm-form-field textarea { resize: vertical; min-height: 112px; } .hm-form-field input:focus, .hm-form-field select:focus, .hm-form-field textarea:focus { outline: none; border-color: var(--hm-foundry); box-shadow: 0 0 0 3px rgba(115, 75, 223, 0.20); } .hm-form-field input::placeholder, .hm-form-field textarea::placeholder { color: #475569; } .hm-form-mode { display: contents; } .hm-form-mode[hidden] { display: none; } .hm-form-submit { grid-column: 1 / -1; margin-top: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--hm-foundry); color: var(--hm-paper); font-family: 'Onest', sans-serif; font-weight: 700; font-size: 1rem; padding: 16px 28px; border: none; border-radius: var(--hm-r-sm); cursor: pointer; transition: background 200ms var(--hm-ease), transform 400ms var(--hm-ease), box-shadow 400ms var(--hm-ease); } .hm-form-submit:hover { background: var(--hm-foundry-light); transform: translateY(-3px); box-shadow: 0 20px 40px rgba(115, 75, 223, 0.40); } .hm-form-submit:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(115, 75, 223, 0.40); } .hm-form-note { grid-column: 1 / -1; margin: 4px 0 0; font-family: 'Onest', sans-serif; font-size: 0.8125rem; line-height: 1.5; color: var(--hm-ink-muted); } /* Field error message (inline, below input) */ .hm-form-error { display: none; margin-top: 4px; font-family: 'Onest', sans-serif; font-size: 0.8125rem; line-height: 1.4; color: #DC2626; } .hm-form-field.is-invalid .hm-form-error { display: block; } .hm-form-field.is-invalid input, .hm-form-field.is-invalid select, .hm-form-field.is-invalid textarea { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); } /* Submit states */ .hm-form-submit[disabled] { opacity: 0.65; cursor: not-allowed; } .hm-form-submit[disabled]:hover { background: var(--hm-foundry); transform: none; box-shadow: none; } /* Submit success banner (replaces form after successful submit) */ .hm-form-success { grid-column: 1 / -1; display: none; align-items: flex-start; gap: 16px; padding: 24px; background: var(--hm-workspace-white); border: 1px solid var(--hm-border-day); border-radius: var(--hm-r-md); } .hm-form-success.is-visible { display: flex; } .hm-form-success i { color: var(--hm-foundry); font-size: 1.5rem; flex-shrink: 0; line-height: 1; } .hm-form-success-title { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 1.0625rem; color: var(--hm-ink); margin: 0 0 4px; } .hm-form-success-body { font-family: 'Onest', sans-serif; font-size: 0.9375rem; line-height: 1.5; color: var(--hm-ink-muted); margin: 0; } @media (max-width: 900px) { .hm-talk-grid { grid-template-columns: 1fr; gap: 48px; } .hm-form { padding: 28px 22px; } .hm-form-fields { grid-template-columns: 1fr; } } /* ======================================================== 8. FOOTER REFRESH (lighter touch on existing .footer-arch) Local override block — only safe if you call it via class. We do not touch .footer-arch globals; we just extend. ======================================================== */ /* (footer kept from existing markup; no override needed) */ /* ======================================================== WORDMARK HERO (path B — TECHMAVEN outline, services-led) ======================================================== */ .hm-wm-hero { position: relative; background: var(--hm-midnight-plum); color: var(--hm-paper); min-height: clamp(720px, 96vh, 980px); overflow: hidden; padding: 120px 0 0; display: flex; flex-direction: column; isolation: isolate; } .hm-wm-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hm-wm-bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--hm-midnight-plum) 0%, var(--hm-deep-vault) 60%, #2E1F73 100%); } .hm-wm-glow { position: absolute; bottom: -10%; left: 50%; width: 80%; height: 60%; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(115, 75, 223, 0.40) 0%, rgba(115, 75, 223, 0.10) 40%, transparent 70%); filter: blur(40px); } .hm-wm-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px); background-size: 96px 96px; -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, black 30%, transparent 85%); mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, black 30%, transparent 85%); } .hm-wm-inner { position: relative; z-index: 2; max-width: 1320px; margin: 0 auto; padding: 0 32px; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; gap: 40px; } /* Top mono meta row */ .hm-wm-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-paper-muted); } .hm-wm-meta .hm-wm-tag { display: inline-flex; align-items: center; gap: 8px; } .hm-wm-meta .hm-wm-tag::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--hm-foundry-light); box-shadow: 0 0 12px var(--hm-foundry-light); } .hm-wm-meta .hm-wm-dot { width: 2px; height: 2px; border-radius: 50%; background: var(--hm-paper-muted); opacity: 0.5; } /* Massive outline wordmark — the centerpiece */ .hm-wm-mark { margin: 0; font-family: 'Duepuntozero', 'Onest', sans-serif; font-weight: 400; font-size: clamp(2.75rem, 16vw, 12rem); line-height: 0.86; letter-spacing: -0.045em; color: rgba(115, 75, 223, 0.25); /* safe fallback if text-stroke unsupported */ -webkit-text-stroke: 1.5px var(--hm-foundry-light); -webkit-text-fill-color: transparent; text-stroke: 1.5px var(--hm-foundry-light); text-align: center; position: relative; overflow: hidden; padding: 0 16px; } .hm-wm-mark .hm-wm-line { display: inline-block; line-height: inherit; max-width: 100%; } /* Lede sentence below wordmark */ .hm-wm-lede { max-width: 880px; margin: 0 auto; text-align: center; font-family: 'Onest', sans-serif; font-weight: 400; font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); line-height: 1.55; color: var(--hm-paper); } .hm-wm-emph { color: var(--hm-foundry-light); font-weight: 600; } /* Two doors below lede */ .hm-wm-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 24px; border-top: 1px solid var(--hm-border-night); border-bottom: 1px solid var(--hm-border-night); } .hm-wm-door { display: flex; flex-direction: column; gap: 12px; padding: 36px 40px 36px; text-decoration: none; color: var(--hm-paper); position: relative; transition: background 320ms var(--hm-ease); } .hm-wm-door+.hm-wm-door { border-left: 1px solid var(--hm-border-night); } .hm-wm-door:hover { background: rgba(115, 75, 223, 0.16); } .hm-wm-door:focus-visible { outline: none; background: rgba(115, 75, 223, 0.22); box-shadow: inset 0 0 0 2px var(--hm-foundry); } .hm-wm-door-num { font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-foundry-light); } .hm-wm-door h2 { font-family: 'Onest', sans-serif; font-weight: 700; font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0; color: var(--hm-paper); } .hm-wm-door p { margin: 0; font-family: 'Onest', sans-serif; font-size: 0.95rem; line-height: 1.55; color: var(--hm-paper-muted); max-width: 44ch; } .hm-wm-door-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; font-family: 'Onest', sans-serif; font-weight: 600; font-size: 0.95rem; color: var(--hm-foundry-light); transition: gap 280ms var(--hm-ease), color 280ms var(--hm-ease); } .hm-wm-door:hover .hm-wm-door-cta { color: var(--hm-paper); gap: 12px; } @media (max-width: 760px) { .hm-wm-doors { grid-template-columns: 1fr; } .hm-wm-door+.hm-wm-door { border-left: 0; border-top: 1px solid var(--hm-border-night); } } /* Bottom feed: what we ship (categories + own products) */ .hm-wm-feed { position: relative; z-index: 2; border-top: 1px solid var(--hm-border-night); background: rgba(21, 15, 53, 0.20); padding: 14px 0; overflow: hidden; } .hm-wm-feed-rail { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%); } .hm-wm-feed-track { display: flex; gap: 28px; width: max-content; animation: hm-wm-feed-scroll 60s linear infinite; font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-paper-muted); white-space: nowrap; } .hm-wm-feed-cat { color: var(--hm-foundry-light); font-weight: 700; padding-right: 10px; border-right: 1px solid var(--hm-border-night); } @keyframes hm-wm-feed-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .hm-wm-feed-track { animation: none; } } @media (max-width: 760px) { .hm-wm-hero { padding: 96px 0 0; min-height: clamp(640px, 88vh, 820px); } .hm-wm-mark { -webkit-text-stroke-width: 1px; text-stroke-width: 1px; } .hm-wm-door { padding: 28px 24px; } } /* ======================================================== Scroll reveal ======================================================== */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 800ms var(--hm-ease), transform 800ms var(--hm-ease); will-change: opacity, transform; } [data-reveal].is-visible { opacity: 1; transform: translate3d(0, 0, 0); } [data-reveal][data-reveal-delay="1"] { transition-delay: 80ms; } [data-reveal][data-reveal-delay="2"] { transition-delay: 160ms; } [data-reveal][data-reveal-delay="3"] { transition-delay: 240ms; } [data-reveal][data-reveal-delay="4"] { transition-delay: 320ms; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ======================================================== Inline talk section (services-form parity with products) ======================================================== */ .tm-talk { background: var(--hm-deep-vault, #1F154E); color: var(--hm-paper, #FFFFFF); padding: 96px 0; position: relative; overflow: hidden; } .tm-talk::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 20% 100%, rgba(115, 75, 223, 0.20) 0%, transparent 70%); pointer-events: none; } .tm-talk>.container { position: relative; z-index: 1; } .tm-talk-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: start; } @media (max-width: 880px) { .tm-talk-grid { grid-template-columns: 1fr; gap: 48px; } } .tm-talk-eyebrow { display: inline-block; font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-foundry-light, #8A62FF); margin-bottom: 14px; } .tm-talk-title { font-family: 'Onest', sans-serif; font-weight: 700; font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.04; letter-spacing: -0.015em; color: var(--hm-paper); margin: 0 0 20px; } .tm-talk-lede { font-family: 'Onest', sans-serif; font-size: 1.0625rem; line-height: 1.6; color: var(--hm-paper-muted, #CBD5E1); max-width: 46ch; margin: 0 0 32px; } .tm-talk-meta { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; } .tm-talk-meta li { display: flex; align-items: center; gap: 12px; font-family: 'Onest', sans-serif; font-size: 0.95rem; color: var(--hm-paper-muted); } .tm-talk-meta li i { color: var(--hm-foundry-light); font-size: 1.125rem; } .tm-talk-meta a { color: var(--hm-paper-muted); text-decoration: none; transition: color 200ms cubic-bezier(0.77, 0, 0.175, 1); } .tm-talk-meta a:hover { color: var(--hm-paper); } /* Form */ .tm-talk-form { display: flex; flex-direction: column; gap: 20px; } .tm-form-field { display: flex; flex-direction: column; gap: 6px; position: relative; } .tm-form-field label { font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-paper-muted); } .tm-form-field input, .tm-form-field textarea { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 10px; padding: 14px 16px; color: var(--hm-paper); font-family: 'Onest', sans-serif; font-size: 1rem; transition: border-color 200ms cubic-bezier(0.77, 0, 0.175, 1), box-shadow 200ms cubic-bezier(0.77, 0, 0.175, 1); } .tm-form-field textarea { resize: vertical; min-height: 120px; } .tm-form-field input::placeholder, .tm-form-field textarea::placeholder { color: rgba(203, 213, 225, 0.40); } .tm-form-field input:focus, .tm-form-field textarea:focus { outline: none; border-color: var(--hm-foundry-light, #8A62FF); box-shadow: 0 0 0 3px rgba(115, 75, 223, 0.20); } .tm-form-error { display: none; font-family: 'Onest', sans-serif; font-size: 0.8125rem; color: #FCA5A5; margin-top: 2px; } .tm-form-field.is-invalid input, .tm-form-field.is-invalid textarea { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18); } .tm-form-field.is-invalid .tm-form-error { display: block; } .tm-talk-submit { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; background: var(--hm-foundry, #734BDF); color: var(--hm-paper); font-family: 'Onest', sans-serif; font-weight: 600; font-size: 1rem; padding: 14px 28px; border: none; border-radius: 10px; cursor: pointer; margin-top: 8px; transition: background 200ms cubic-bezier(0.77, 0, 0.175, 1), transform 320ms cubic-bezier(0.77, 0, 0.175, 1), box-shadow 320ms cubic-bezier(0.77, 0, 0.175, 1); } .tm-talk-submit:hover { background: var(--hm-foundry-light, #8A62FF); transform: translateY(-3px); box-shadow: 0 16px 32px rgba(115, 75, 223, 0.40); } .tm-talk-submit:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(115, 75, 223, 0.40); } .tm-talk-submit[disabled] { opacity: 0.65; cursor: not-allowed; transform: none; box-shadow: none; } .tm-form-success { display: none; grid-column: 1 / -1; align-items: flex-start; gap: 16px; padding: 20px 24px; background: rgba(115, 75, 223, 0.10); border: 1px solid rgba(138, 98, 255, 0.40); border-radius: 12px; margin-top: 8px; } .tm-form-success.is-visible { display: flex; } .tm-form-success i { color: var(--hm-foundry-light); font-size: 1.5rem; flex-shrink: 0; } .tm-form-success-title { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 1rem; color: var(--hm-paper); margin: 0 0 4px; } .tm-form-success-body { font-family: 'Onest', sans-serif; font-size: 0.9375rem; line-height: 1.5; color: var(--hm-paper-muted); margin: 0; } /* ======================================================== Testimonials slider (replaces crystal grid) ======================================================== */ /* Avatar: styled initials in violet ring + phosphor badge adjacent to name */ .tc-card .tc-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(140deg, rgba(115, 75, 223, 0.35) 0%, rgba(31, 21, 78, 0.85) 100%); border: 2px solid rgba(138, 98, 255, 0.55); display: flex; align-items: center; justify-content: center; color: var(--hm-paper); font-family: 'Onest', sans-serif; font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.04em; flex-shrink: 0; box-shadow: 0 6px 18px rgba(115, 75, 223, 0.20); } .tc-card .tc-client { display: flex; align-items: center; gap: 16px; } .tc-card .tc-client-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tc-card .tc-client-name { display: inline-flex; align-items: center; gap: 6px; font-family: 'Onest', sans-serif; font-weight: 700; font-size: 1rem; color: var(--hm-paper); } .tc-card .tc-client-name .tc-verified { color: var(--hm-foundry-light); font-size: 0.95rem; line-height: 1; } .tc-card .tc-client-info span { font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.74rem; letter-spacing: 0.10em; text-transform: uppercase; color: var(--hm-paper-muted); } .tc-slider { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 64px; } .tc-slider-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: 24px; padding: 8px 4px; scrollbar-width: none; -ms-overflow-style: none; } .tc-slider-track::-webkit-scrollbar { display: none; } .tc-slider-track:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--hm-foundry-light, #8A62FF); border-radius: 12px; } .tc-slide { flex: 0 0 100%; scroll-snap-align: center; min-width: 0; display: flex; } .tc-slide>.tc-card { width: 100%; height: 100%; min-height: 320px; } @media (min-width: 880px) { .tc-slide { flex: 0 0 calc(50% - 12px); } .tc-slide>.tc-card { min-height: 360px; } /* card-offset only takes effect when 2-up to add visual rhythm; on mobile (1-up) it'd waste vertical space */ .tc-slide>.tc-card.card-offset { margin-top: 28px; } } @media (max-width: 879px) { .tc-slide>.tc-card.card-offset { margin-top: 0; } } .tc-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(115, 75, 223, 0.18); border: 1px solid rgba(138, 98, 255, 0.40); color: #FFFFFF; cursor: pointer; z-index: 5; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; transition: background 200ms cubic-bezier(0.77, 0, 0.175, 1), border-color 200ms cubic-bezier(0.77, 0, 0.175, 1), transform 280ms cubic-bezier(0.77, 0, 0.175, 1); } .tc-slider-arrow:hover { background: rgba(115, 75, 223, 0.36); border-color: rgba(167, 136, 255, 0.70); } .tc-slider-arrow:active { transform: translateY(-50%) scale(0.96); } .tc-slider-arrow:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(115, 75, 223, 0.40); } .tc-slider-arrow:disabled { opacity: 0.35; cursor: not-allowed; } .tc-slider-prev { left: 0; } .tc-slider-next { right: 0; } .tc-slider-dots { display: flex; justify-content: center; gap: 10px; margin-top: 32px; } .tc-slider-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); border: none; cursor: pointer; padding: 0; transition: background 200ms cubic-bezier(0.77, 0, 0.175, 1), width 240ms cubic-bezier(0.77, 0, 0.175, 1); } .tc-slider-dot.is-active { background: #8A62FF; width: 28px; border-radius: 5px; } .tc-slider-dot:hover { background: rgba(255, 255, 255, 0.45); } .tc-slider-dot.is-active:hover { background: #A788FF; } .tc-slider-dot:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(115, 75, 223, 0.40); } @media (max-width: 600px) { .tc-slider { padding: 0 16px; } .tc-slider-prev { left: -8px; } .tc-slider-next { right: -8px; } .tc-slider-arrow { width: 40px; height: 40px; background: rgba(21, 15, 53, 0.85); } } /* ======================================================== Process roadmap panel image (about.html right-side panels) ======================================================== */ .roadmap-panel-img { width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; margin-bottom: 24px; background: rgba(31, 21, 78, 0.30); border: 1px solid rgba(138, 98, 255, 0.20); } .roadmap-panel-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms cubic-bezier(0.77, 0, 0.175, 1); } .roadmap-panel.active .roadmap-panel-img img { transform: scale(1.02); } /* ======================================================== Hero facelift: mesh blobs (a) + grain texture (b) + corner metric tags (d) ======================================================== */ /* (a) Static mesh blobs — two soft violet orbs for depth */ .hero-premium .hp-bg-blob { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 2; } .hero-premium .hp-bg-blob-1 { top: -8%; left: -15%; width: 55%; height: 70%; filter: blur(120px); background: radial-gradient(circle, rgba(115, 75, 223, 0.20) 0%, transparent 65%); } /* Hero asymmetric grid — copy left, architecture right (60/40) */ .hero-premium .hp-container { height: 100%; max-width: var(--container-width); margin: 0 auto; padding: 120px 15px 80px; position: relative; z-index: 20; display: flex; align-items: center; justify-content: center; } .hero-premium .hp-content-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; align-items: center; width: 100%; max-width: 100%; } @media (max-width: 980px) { .hero-premium .hp-content-grid { grid-template-columns: 1fr; gap: 40px; } .hero-premium .hp-content-right { max-width: 360px; margin: 0 auto; opacity: 0.60; } } @media (max-width: 640px) { .hero-premium .hp-content-right { display: none; } } .hero-premium .hp-content-left { max-width: 640px; text-align: left; } /* Numeric eyebrow */ .hero-premium .hp-eyebrow-mono { display: inline-block; font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(203, 213, 225, 0.85); margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.10); } .hero-premium .hp-title-sub { display: block; margin-top: 14px; font-family: 'Onest', sans-serif !important; font-size: clamp(1.0625rem, 1.6vw, 1.375rem); font-weight: 400; line-height: 1.4; letter-spacing: -0.005em; color: rgba(203, 213, 225, 0.75); } .hero-premium .hp-subtitle { margin: 0 0 36px; font-family: 'Onest', sans-serif; font-size: 1.0625rem; line-height: 1.6; color: rgba(203, 213, 225, 0.80); max-width: 56ch; } .hero-premium .hp-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 0; } /* Verticals line — Space Mono tracked, hairline rule above */ .hero-premium .hp-verticals { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; } .hero-premium .hp-verticals-label { color: rgba(255, 255, 255, 0.85); } .hero-premium .hp-verticals-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--hm-foundry-light, #8A62FF); flex-shrink: 0; } /* Architectural SVG artifact */ .hero-premium .hp-content-right { position: relative; aspect-ratio: 1; } .hero-premium .hp-architecture { width: 100%; height: auto; display: block; } .hero-premium .arch-pulse-ring { transform-origin: center; transform-box: fill-box; animation: arch-pulse 4s cubic-bezier(0.77, 0, 0.175, 1) infinite; } @keyframes arch-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.7); opacity: 0.25; } } @media (prefers-reduced-motion: reduce) { .hero-premium .arch-pulse-ring { animation: none; } } /* (b) Grain texture — fine SVG noise over the whole hero */ .hero-premium .hp-bg-grain { position: absolute; inset: 0; z-index: 3; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.07; mix-blend-mode: overlay; } /* (d) Corner metric tags — small mono tags anchored to hero corners */ .hero-premium .hp-metric-tag { position: absolute; z-index: 15; bottom: 36px; display: flex; align-items: baseline; gap: 10px; font-family: 'Space Mono', ui-monospace, monospace; color: rgba(203, 213, 225, 0.65); user-select: none; } .hero-premium .hp-metric-tag strong { font-family: 'Duepuntozero', 'Onest', sans-serif; font-weight: 400; font-size: 2rem; line-height: 1; letter-spacing: -0.02em; color: var(--hm-paper, #FFFFFF); } .hero-premium .hp-metric-tag span { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.2; max-width: 9ch; } .hero-premium .hp-metric-tag-left { left: 40px; } .hero-premium .hp-metric-tag-right { right: 40px; flex-direction: row-reverse; text-align: right; } .hero-premium .hp-metric-tag-right span { text-align: right; } @media (max-width: 720px) { .hero-premium .hp-metric-tag { bottom: 24px; } .hero-premium .hp-metric-tag strong { font-size: 1.5rem; } .hero-premium .hp-metric-tag span { font-size: 0.62rem; } .hero-premium .hp-metric-tag-left { left: 20px; } .hero-premium .hp-metric-tag-right { right: 20px; } } @media (max-width: 480px) { .hero-premium .hp-metric-tag { display: none; } } /* ======================================================== Legacy hero — dot-grid overlay (break stock-photo feel) ======================================================== */ .hp-dotgrid { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; z-index: 3; -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, black 30%, transparent 85%); mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, black 30%, transparent 85%); mix-blend-mode: screen; } /* Hero "WE BUILD" pill-row under CTAs */ .hp-build-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 8px; padding: 16px 0 0; font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; } .hp-build-label { color: rgba(138, 98, 255, 0.95); font-weight: 700; } .hp-build-divider { width: 1px; height: 12px; background: rgba(255, 255, 255, 0.20); } .hp-build-tag { color: rgba(255, 255, 255, 0.65); padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 100px; background: rgba(255, 255, 255, 0.03); transition: color 240ms cubic-bezier(0.77, 0, 0.175, 1), border-color 240ms cubic-bezier(0.77, 0, 0.175, 1), background 240ms cubic-bezier(0.77, 0, 0.175, 1); } .hp-build-tag:hover { color: #FFFFFF; border-color: rgba(138, 98, 255, 0.55); background: rgba(115, 75, 223, 0.16); } @media (max-width: 560px) { .hp-build-row { font-size: 0.66rem; gap: 8px; } .hp-build-divider { display: none; } } /* ======================================================== Legacy contrast fixes (detector found #64748b on #120d31 = 3.9:1) Scoped to dark surfaces only, doesn't affect light bg behaviour ======================================================== */ .bg-darker .section-desc, .bg-darker .panel-desc, .bg-darker .panel-tagline, .bg-darker .panel-features, .bg-dark .section-desc, .bg-dark .panel-desc, .products-main-section .section-desc, .products-main-section .panel-desc, .products-main-section .panel-tagline, .products-main-section .panel-features { color: #CBD5E1; } .bg-darker .panel-features li, .bg-dark .panel-features li, .products-main-section .panel-features li { color: #CBD5E1; } /* ======================================================== Reduced motion ======================================================== */ @media (prefers-reduced-motion: reduce) { .hm-door, .hm-door-cta, .hm-door-cta i, .hm-product, .hm-service, .hm-quote, .hm-form-submit, .hm-link-cta, .hm-link-cta i, .hm-toggle-thumb { transition: none !important; } .hm-door:hover, .hm-product:hover, .hm-service:hover, .hm-form-submit:hover { transform: none !important; } html { scroll-behavior: auto !important; } } /* ======================================================== Visually-hidden helper (for accessible labels) ======================================================== */ .hm-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; } /* Reduced padding for tm-talk section on mobile */ @media (max-width: 991px) { .tm-talk { padding: 40px 0 !important; } }