/* * SearchAxe — base styles. * * The page's layout lives inline in the templates, verbatim from the Claude * Design source. This file carries what the design expressed outside inline * styles: the accent variables its script set on , its CSS, * every `style-hover` attribute as a real class, the scroll-reveal states, * the mobile menu, and the small-viewport fixes. * * Several rules use !important on purpose: they must beat *inline* styles * from the design, and an inline declaration wins over any class rule * regardless of media query. */ :root { /* "Blue → Violet" accent theme from the design's applyTheme(). */ --g1: #2563eb; --g2: #4f46e5; --g3: #7c3aed; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { margin: 0; background: #ffffff; color: #0b1220; font-family: Manrope, ui-sans-serif, system-ui, sans-serif; } a { color: #4f46e5; text-decoration: none; } a:hover { color: #2563eb; } img { max-width: 100%; } *, *::before, *::after { box-sizing: border-box; } @keyframes saGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes saPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .9; } 50% { transform: translate(-50%, -50%) scale(1.35); opacity: .5; } } @keyframes saSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes saRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes saDrift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(3%, 4%, 0) scale(1.08); } } @keyframes saSweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Same drift, for glows that are centred with an inline translateX(-50%). saDrift's keyframes replace the whole transform, which would drop the centring and shove the glow half its own width to the right the moment the animation starts. */ @keyframes saDriftCenter { 0%, 100% { transform: translateX(-50%) translate3d(0, 0, 0) scale(1); } 50% { transform: translateX(-50%) translate3d(3%, 4%, 0) scale(1.08); } } @media (max-width: 760px) { [data-hide-mobile] { display: none !important; } } /* --- Hero entrance (the design's `animation: saRise` on the two columns) --- */ html[data-animations="on"] .sa-rise { animation: saRise .8s ease both; } html[data-animations="on"] .sa-rise-late { animation: saRise 1s .15s ease both; } /* --- Hover states (design `style-hover` attributes) ------------------- */ .sa-navlink:hover { color: #0b1220 !important; } .sa-btn-dark:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(11, 18, 32, .18); color: #fff; } .sa-btn-grad:hover { transform: translateY(-2px); box-shadow: 0 20px 44px rgba(79, 70, 229, .36); color: #fff; } .sa-cta-mail:hover { box-shadow: 0 22px 50px rgba(79, 70, 229, .38); } .sa-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(11, 18, 32, .09); border-color: rgba(79, 70, 229, .3); } .sa-card-glass:hover { transform: translateY(-4px); box-shadow: 0 28px 60px rgba(79, 70, 229, .16); } .sa-card-step:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(11, 18, 32, .08); } .sa-btn-ghost:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(11, 18, 32, .1); color: #0b1220; } /* --- Case studies ------------------------------------------------------- */ .sa-cs-feature:hover, .sa-cs-card:hover { transform: translateY(-4px); box-shadow: 0 28px 60px rgba(11, 18, 32, .1); border-color: rgba(79, 70, 229, .3); color: #0b1220; } /* The inline `animation:` shorthand beats a class rule, so this must win with !important the way the other inline-style overrides in this file do. */ .sa-drift-center { animation-name: saDriftCenter !important; } .sa-otp-link:hover { color: #4f46e5 !important; } .sa-navlink-current:hover { color: #0b1220 !important; } /* Homepage proof section: the "read all" button sits with the heading block on a narrow screen and moves to the far edge once the two columns are side by side, matching the pillar page's own header row. */ @media (min-width: 760px) { .sa-proof-cta { justify-content: flex-end !important; } } /* Pillar cards must line up across a row: the chip row, the title, the summary and the stat labels each occupy a fixed number of lines whatever the content length, so the stat tiles and the "Read the case study" link sit at the same height in every card. Text stays complete in the DOM; only the display is clamped. min-height is set in `em` so it tracks each element's own font-size and line-height. */ .sa-cs-card-title, .sa-cs-card-desc, .sa-cs-card-statlabel { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .sa-cs-card-title { -webkit-line-clamp: 2; min-height: 2.4em; /* 2 lines at line-height 1.2 */ } .sa-cs-card-desc { -webkit-line-clamp: 3; min-height: 4.8em; /* 3 lines at line-height 1.6 */ } .sa-cs-card-statlabel { -webkit-line-clamp: 2; min-height: 2.7em; /* 2 lines at line-height 1.35 */ } /* The baseline strip is one bordered box; the trailing divider would sit on the outer edge, and on every last-in-row cell once the grid wraps. */ .sa-cs-baseline > div:last-child { border-right: 0; } /* The "on this page" bar is a single row by design. Between 760px and roughly 900px the six links can exceed the container, so let it scroll rather than push the page sideways. */ .sa-onthispage nav { overflow-x: auto; scrollbar-width: none; } .sa-onthispage nav::-webkit-scrollbar { display: none; } .sa-onthispage a { white-space: nowrap; } @media (max-width: 560px) { .sa-cs-table [role="columnheader"], .sa-cs-table [role="cell"] { padding: 14px 12px !important; font-size: 14px !important; } .sa-cs-table [role="columnheader"]:first-child, .sa-cs-table [role="cell"]:first-child { padding-left: 16px !important; } } /* The final CTA button is sized by its own text. The contact address is long enough that at 320px the button is wider than the 264px content box and its rounded right edge is clipped by `overflow-x: clip`. Both values must beat the design's inline styles. */ @media (max-width: 420px) { .sa-cta-mail { max-width: 100%; padding: 0 18px !important; font-size: 15px !important; } } @media (max-width: 379px) { .sa-cs-statgrid { grid-template-columns: 1fr !important; } .sa-cs-baseline > div { border-right: 0 !important; border-bottom: 1px solid rgba(11, 18, 32, .06); } } /* --- Scroll reveals ---------------------------------------------------- Content is visible by default. searchaxe.js adds `sa-anim` to only once it has actually run, then reveals each block with `sa-in`; a failsafe in the script shows everything if the IntersectionObserver never fires. Once revealed no transform rule remains, so the hover lifts above work. The transition is !important to beat the cards' inline `transition:`. -------------------------------------------------------------------- */ html.sa-anim [data-reveal] { transition: opacity .7s ease, transform .7s ease, box-shadow .25s, border-color .25s !important; } html.sa-anim [data-reveal]:not(.sa-in) { opacity: 0; transform: translateY(20px); } /* --- Reduced motion / motion toggle ------------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .sa-rise, .sa-rise-late, .sa-spin, .sa-pulse, .sa-btn-grad, .sa-drift, .sa-drift-center, .sa-sweep { animation: none !important; } html.sa-anim [data-reveal] { transition: none !important; } } html[data-animations="off"] .sa-spin, html[data-animations="off"] .sa-pulse, html[data-animations="off"] .sa-btn-grad, html[data-animations="off"] .sa-drift, html[data-animations="off"] .sa-drift-center, html[data-animations="off"] .sa-sweep { animation: none !important; } html[data-animations="off"] .sa-sweep { display: none; } @media (prefers-reduced-motion: reduce) { .sa-sweep { display: none; } } /* --- Skip link ---------------------------------------------------------- */ .sa-skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: #0b1220; color: #fff; font-weight: 700; font-size: 14px; } .sa-skip-link:focus { top: 12px; color: #fff; } /* --- Header + mobile menu ----------------------------------------------- */ .sa-menu-toggle { display: none; position: relative; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(11, 18, 32, .1); border-radius: 12px; background: #fff; cursor: pointer; align-items: center; justify-content: center; } .sa-menu-toggle::after { /* 44px hit area without changing the visual size */ content: ""; position: absolute; inset: -2px; } .sa-burger, .sa-burger::before, .sa-burger::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: #0b1220; transition: transform .25s, opacity .2s; } .sa-burger { position: relative; } .sa-burger::before, .sa-burger::after { content: ""; position: absolute; left: 0; } .sa-burger::before { top: -6px; } .sa-burger::after { top: 6px; } .sa-menu-toggle[aria-expanded="true"] .sa-burger { background: transparent; } .sa-menu-toggle[aria-expanded="true"] .sa-burger::before { transform: translateY(6px) rotate(45deg); } .sa-menu-toggle[aria-expanded="true"] .sa-burger::after { transform: translateY(-6px) rotate(-45deg); } .sa-mobile-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #ffffff; /* fully opaque: body copy must not read through */ border-bottom: 1px solid rgba(11, 18, 32, .08); box-shadow: 0 24px 50px rgba(11, 18, 32, .10); } .sa-mobile-nav nav { display: flex; flex-direction: column; padding: 8px 12px 14px; } .sa-mobile-nav a { display: block; padding: 14px 16px; border-radius: 12px; font-size: 16px; font-weight: 700; color: #0b1220; } .sa-mobile-nav a:hover { background: #f3f4f8; color: #0b1220; } @media (max-width: 760px) { html.sa-js .sa-menu-toggle { display: inline-flex; } .sa-mobile-nav.sa-open { display: block; } /* Without JS the toggle is hidden and the inline nav returns as a wrapped row. */ html:not(.sa-js) .sa-nav-main { display: flex !important; flex-wrap: wrap; gap: 12px 18px !important; font-size: 14px !important; } } @media (max-width: 480px) { .sa-header-inner { padding: 0 18px !important; gap: 12px !important; } .sa-header-cta { height: 38px !important; padding: 0 14px !important; font-size: 13.5px !important; } } @media (max-width: 339px) { /* Logo mark only; the link keeps its aria-label. Budget at 340px: logo lockup 135 + CTA 93 + toggle 40 + gaps 24 + padding 36 = 328. */ .sa-logo-text { display: none; } } @media (max-width: 379px) { /* Every auto-fit grid has a minimum track (200–320px) wider than the content box on the narrowest phones, which makes CSS grid overflow the viewport. Collapse them to one column. */ main [data-grid] { grid-template-columns: 1fr !important; } } /* Section anchors: nothing to offset for a sticky header of known height. */ main section[id] { scroll-margin-top: 68px; } /* --- Prose (privacy / terms / generic pages) ---------------------------- */ .sa-prose h1 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.06; letter-spacing: -.03em; font-weight: 800; margin: 0 0 24px; } .sa-prose h2 { font-size: 26px; letter-spacing: -.02em; font-weight: 800; margin: 40px 0 12px; } .sa-prose h3 { font-size: 20px; font-weight: 800; margin: 28px 0 10px; } .sa-prose p, .sa-prose li { font-size: 17px; line-height: 1.65; color: #3d4657; } .sa-prose a { text-decoration: underline; text-underline-offset: 3px; }