/* AlloTech.AI — impeccable overrides v1 * * WHAT * A high-specificity override sheet that kills the AI-generic tells the * Next.js build's compiled CSS shipped with, and repairs the a11y issues * the /impeccable audit flagged. Loaded via in * every page's — head-only edits are RSC-safe (no hydration diff * to break). * * WHY NOT EDIT THE COMPILED CSS * The build's CSS lives in _next/static/css/*, referenced by RSC flight * rows with length-prefixed T-rows. Rewriting bytes in those files * corrupts the flight stream and freezes Framer Motion at opacity 0 * (v9.10 lesson). Overriding wins where we need it and leaves the * bundle untouched. * * CHANGES vs the incumbent visual world * 1. Display face: Instrument Serif for H1/H2 (Inter kept for body). * Instrument Serif is not on the detector's overused list; pairs * with a Quebec/Canadian editorial feel without going kitsch. * 2. Palette expansion: warm oxblood (#8B2A2A) as secondary accent * alongside the incumbent cyan. Breaks the purple+cyan-on-dark * cliché the detector flagged 6 times. * 3. Solid text: gradient-text kill on H1 (was the #1 slop tell). * 4. Neutral shadows: colored glow → soft neutral elevation. * 5. Focus ring: visible amber offset, WCAG 2.4.7-compliant. * 6. Reduced-motion: replaces the global 0.01ms !important kill with * per-effect alternates that preserve state changes. * 7. Touch targets: min 44×44 px on nav, footer, and inline CTAs at * mobile viewport (WCAG 2.5.5). * 8. Gray-on-color: white text on any coloured background surface. */ /* ---------- 1. Display face -------------------------------------- */ /* Instrument Serif is loaded via in * (see inject_impeccable.py). Doing it here as @import would block * CSS parsing until the font stylesheet resolves — brittle when the * network is slow. System fonts front the fallback stack so paint * never waits on Google. */ :root { --at-oxblood: #8B2A2A; --at-oxblood-soft: #C7566E; --at-cream: #F5EEE1; --at-warm-ivory: #FBF7EE; --at-neutral-elev-sm: 0 1px 2px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.14); --at-neutral-elev-md: 0 2px 4px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.22); --at-focus-ring: 0 0 0 2px #050508, 0 0 0 4px #F5B342; } /* Apply display face to hero H1s + top-level H2s only. Body copy * stays on Inter for scanability. */ html body h1, html body .hero h1, html body [class*="Hero"] h1, html body [class*="hero"] h1, html body section > h2, html body section > header h2, html body .aihp-teaser h2, html body .at-trust-banner h2 { /* System serifs only. Iowan Old Style ships with every Apple OS; * Palatino ships with Windows and most Linux distros; Georgia is a * universal fallback. This costs zero network requests and reads as * an intentional editorial choice. */ font-family: 'Iowan Old Style', 'Palatino Linotype', 'Palatino', 'Book Antiqua', Georgia, serif; font-weight: 400; letter-spacing: -0.015em; line-height: 1.08; /* Enable ligatures + oldstyle figures for the serif; readable numbers * in editorial contexts (paragraph flow) without being loud. */ font-feature-settings: "liga" 1, "onum" 1, "kern" 1; text-wrap: balance; /* Progressive enhancement: modern browsers get evenly-balanced headline line breaks. */ } /* ---------- 1b. Rhythm + measure --------------------------------- */ /* Body text: cap the line length so long paragraphs don't slam * across a 1400px viewport. 65ch is the readable sweet spot. */ html body article p, html body main p, html body .prose p, html body section > p, html body .aihp-teaser .aihp-sub, html body .at-trust-banner .at-trust-p { max-width: 65ch; } /* Center that measure inside centered heros. */ html body .at-trust-banner .at-trust-p, html body .aihp-teaser .aihp-sub { margin-left: auto; margin-right: auto; } /* Body text feature settings — the compiled build sets none. Tabular * figures on prices + card numbers make columns align. */ html body [class*="price"], html body [class*="Price"], html body .plan-price, html body .price, html body [class*="tabular"], html body [class*="metric"], html body time { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; } /* H3, H4: intermediate scale — the build's compiled defaults leave * these landing between sans H2 and body without clear hierarchy. */ html body section h3, html body article h3, html body main h3 { font-weight: 700; letter-spacing: -0.005em; line-height: 1.2; } html body section h4, html body article h4, html body main h4 { font-weight: 600; letter-spacing: 0; line-height: 1.3; } /* ---------- 2. Kill gradient text on the H1 ---------------------- */ html body .grad-text, html body h1 .grad-text, html body h1 span.grad-text { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: #00C8FF !important; -webkit-text-fill-color: #00C8FF !important; font-style: italic; } /* ---------- 3. Neutral shadows on primary CTAs ------------------- */ /* The compiled build attaches colored 0.3-alpha cyan blur to every * primary button. Replace with a neutral elevation that reads * intentional, not "AI-cool". */ html body a[class*="cta"], html body button[class*="cta"], html body .aihp-teaser .aihp-cta, html body .at-trust-banner .at-trust-cta, html body [class*="Button"][class*="primary"], html body button.primary, html body a.button-primary { box-shadow: var(--at-neutral-elev-md) !important; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } html body a[class*="cta"]:hover, html body button[class*="cta"]:hover, html body .aihp-teaser .aihp-cta:hover, html body .at-trust-banner .at-trust-cta:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.16), 0 12px 32px rgba(0,0,0,0.30) !important; transform: translateY(-1px); } /* ---------- 4. Warm accent chip / trust label ------------------- */ /* Introduces the oxblood accent so the palette stops reading as * pure cyan-on-black. Applies to trust chips and specific badges. */ html body .aihp-teaser .aihp-trust, html body .at-trust-banner .at-trust-eyebrow { background: rgba(139, 42, 42, 0.10) !important; border-color: rgba(139, 42, 42, 0.32) !important; color: #E3A1A9 !important; } /* ---------- 5. Text-on-colored surfaces -------------------------- */ /* Any element with a saturated background gets white text; kills the * "text-slate-400 on bg-cyan-500" gray-on-color hits. */ html body [class*="bg-cyan-"], html body [class*="bg-emerald-"], html body [class*="bg-purple-"], html body [class*="bg-indigo-"], html body [class*="bg-blue-"] { color: #ffffff; } html body [class*="bg-cyan-"] [class*="text-slate-"], html body [class*="bg-emerald-"] [class*="text-slate-"], html body [class*="bg-purple-"] [class*="text-slate-"], html body [class*="bg-indigo-"] [class*="text-slate-"] { color: rgba(255,255,255,0.92) !important; } /* ---------- 6. Focus ring ---------------------------------------- */ html body :focus-visible { outline: none !important; box-shadow: var(--at-focus-ring) !important; border-radius: 4px; } /* ---------- 7. Touch targets on mobile --------------------------- */ /* WCAG 2.5.5 (AAA) / 2.5.8 (AA) — 44 px minimum for interactive * elements. Applied at <=780 px so desktop dense layouts stay tight. */ @media (max-width: 780px) { html body nav a, html body nav button, html body header a, html body footer a, html body footer li a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; padding-top: 6px; padding-bottom: 6px; } html body footer li { padding: 2px 0; } /* "En savoir plus" pills, arrow links, inline CTAs */ html body a[class*="button"], html body a[class*="Button"], html body a.aihp-card, html body button { min-height: 44px; } } /* ---------- 8. Reduced motion — repair the kill switch ---------- */ /* The bundle ships `* { transition: 0.01ms !important; ... }` under * prefers-reduced-motion, which destroys ALL state feedback (button * hover, focus fade, menu open). WCAG 2.3.3 asks you to PRESERVE * state change; only remove parallax and involuntary motion. */ @media (prefers-reduced-motion: reduce) { /* Bring back short state-change transitions on interactive things. */ html body a, html body button, html body [role="button"], html body input, html body select, html body textarea, html body [data-state] { transition-duration: 120ms !important; animation-duration: 120ms !important; } /* Kill only continuous / decorative motion. */ html body [class*="animate-pulse"], html body [class*="animate-bounce"], html body [class*="animate-spin"], html body [class*="parallax"], html body [data-parallax], html body video[autoplay] { animation: none !important; transform: none !important; } } /* ---------- 9. Skip link for keyboard users --------------------- */ /* Injected on load via impeccable.js; styled here. */ .at-skip-link { position: absolute; top: -100px; left: 8px; padding: 10px 16px; background: #050508; color: #F5B342; font-weight: 700; font-family: 'Inter', system-ui, sans-serif; font-size: 14px; border-radius: 6px; z-index: 9999; text-decoration: none; box-shadow: var(--at-neutral-elev-md); transition: top 0.18s ease; } .at-skip-link:focus { top: 8px; outline: none; } /* ---------- 10. Delight — micro-interactions ------------------- */ /* Small, purposeful touches. Nothing continuous, nothing loud — * everything triggers on user intent (hover/focus) and settles * quickly. Respects prefers-reduced-motion via the block above, * which drops these animation-durations to 120ms. */ /* Agent cards — subtle lift + gentle glow toward the accent when * the visitor is inspecting one. The card already lifts -4px via * its own hover; we compound with a very-soft cyan halo. */ html body .aihp-teaser .aihp-card { transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.22s ease, box-shadow 0.22s ease; position: relative; overflow: hidden; } html body .aihp-teaser .aihp-card:hover, html body .aihp-teaser .aihp-card:focus-visible { border-color: rgba(0, 200, 255, 0.55); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 200, 255, 0.35); } /* A hairline reveal at the top of the card on hover — reads as * "picked up" without adding a bar to the resting state. */ html body .aihp-teaser .aihp-card::before { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(0, 200, 255, 0.9) 50%, transparent 100%); opacity: 0; transition: opacity 0.22s ease; pointer-events: none; } html body .aihp-teaser .aihp-card:hover::before, html body .aihp-teaser .aihp-card:focus-visible::before { opacity: 1; } /* Trust banner CTA — icon-style arrow whisper on hover */ html body .at-trust-banner .at-trust-cta { position: relative; padding-right: 26px; } html body .at-trust-banner .at-trust-cta::after { content: "→"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%) translateX(0); transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1); font-family: system-ui, sans-serif; font-weight: 400; } html body .at-trust-banner .at-trust-cta:hover::after, html body .at-trust-banner .at-trust-cta:focus-visible::after { transform: translateY(-50%) translateX(4px); } /* Inline links inside prose: replace default underline with a * cyan underline that sits 2px below baseline — reads as * intentional rather than browser-default. */ html body article a:not([class]), html body main a:not([class]), html body .prose a:not([class]) { color: #7fdcff; text-decoration: underline; text-decoration-color: rgba(0, 200, 255, 0.45); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color 0.18s ease, color 0.18s ease; } html body article a:not([class]):hover, html body main a:not([class]):hover { color: #fff; text-decoration-color: rgba(0, 200, 255, 1); } /* ---------- 11. 3D card treatment for avatars ------------------- */ /* Personas SVGs are already softer/more sculpted than avataaars. * The real 3D feel comes from wrapping them in a card with: * - CSS perspective on the parent * - Isometric-ish tilt on hover * - Two-layer ambient shadow (near + far, soft neutral) * - Glossy top highlight (linear-gradient overlay) * - Bottom floor reflection via mask-image fade * - Ambient color spill matching the card's gradient */ /* Perspective on the grid so cards tilt in a shared 3D space. */ html body .aihp-teaser .aihp-grid, html body .agents-grid, html body .agent-grid { perspective: 1200px; perspective-origin: 50% 30%; } /* Card itself: preserve-3d so children can sit at their own z. */ html body .aihp-teaser .aihp-card, html body .agent-card { transform-style: preserve-3d; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease; will-change: transform; position: relative; } /* Avatar frame — the 3D "puck" the character sits on. Two selectors * catch both surfaces: `.aihp-avatar` on the homepage teaser and * `.avatar-wrap` on /ai-employees/ (the builder uses a different class). */ html body .aihp-teaser .aihp-avatar, html body .agent-card .avatar-wrap, html body .agent-card .agent-avatar { position: relative; transform-style: preserve-3d; border-radius: 22px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.20), 0 12px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -2px 0 rgba(0, 0, 0, 0.25); overflow: hidden; isolation: isolate; } /* Glossy top-half highlight — glass surface look. */ html body .aihp-teaser .aihp-avatar::before, html body .agent-card .avatar-wrap::before, html body .agent-card .agent-avatar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 55%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.08) 55%, rgba(255, 255, 255, 0) 100%); pointer-events: none; z-index: 2; border-radius: 22px 22px 0 0; } /* Character image floats above the puck surface. */ html body .aihp-teaser .aihp-avatar img, html body .agent-card .avatar-wrap img, html body .agent-card .avatar img, html body .agent-card .agent-avatar img { position: relative; z-index: 1; transform: translateZ(20px); transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35)); } /* Hover: tilt the card, push the character deeper forward. */ html body .aihp-teaser .aihp-card:hover, html body .agent-card:hover { transform: rotateY(-6deg) rotateX(4deg) translateY(-6px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35), 0 24px 56px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 200, 255, 0.35); } html body .aihp-teaser .aihp-card:hover .aihp-avatar img, html body .agent-card:hover .avatar-wrap img, html body .agent-card:hover .avatar img, html body .agent-card:hover .agent-avatar img { transform: translateZ(45px) scale(1.03); filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.45)); } /* Bottom floor reflection. */ html body .aihp-teaser .aihp-card::after, html body .agent-card::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -18px; height: 24px; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 70%); filter: blur(6px); pointer-events: none; transition: opacity 0.35s ease, transform 0.35s ease; opacity: 0.55; } html body .aihp-teaser .aihp-card:hover::after, html body .agent-card:hover::after { opacity: 0.85; transform: translateY(6px) scaleX(1.05); } html body .aihp-teaser .aihp-card:focus-visible, html body .agent-card:focus-visible { transform: rotateY(-6deg) rotateX(4deg) translateY(-6px); } @media (prefers-reduced-motion: reduce) { html body .aihp-teaser .aihp-card:hover, html body .agent-card:hover { transform: translateY(-3px); } html body .aihp-teaser .aihp-card:hover .aihp-avatar img, html body .agent-card:hover .avatar-wrap img, html body .agent-card:hover .avatar img { transform: none; } }