/*! * SOCRadar XTI Japan Landing — page template styles * Scoped to .xti-japan-landing so nothing here can leak into other pages. * * Every value below is transcribed 1:1 from the source design export * (html-tasarim/SOCRadar XTI Japan Landing.dc.html), where the design lived as * inline styles. Responsive rules (< 1280px) are additive: the source export * had no media queries at all and simply forced `min-width:1100px`. * Breakpoints mirror the socradar theme's own (1280 / 1024 / 768 / 480). */ /* ========================================================================== Root wrapper ========================================================================== */ .xti-japan-landing { --xtijp-red: #ff4562; --xtijp-red-dark: #cc3750; --xtijp-ink: #0f0f26; --xtijp-ink-deep: #0d0d1c; --xtijp-ink-soft: #15152f; --xtijp-card: #232347; --xtijp-muted: #b9b9cc; --xtijp-muted-dim: #8d8da2; --xtijp-gutter: 64px; position: relative; z-index: 1; background: var(--xtijp-ink-soft); color: #fff; font-family: "Noto Sans JP", "Red Hat Display", sans-serif; -webkit-font-smoothing: antialiased; text-align: left; /* * The theme sets `line-height: 1.5` on ; the source export set none, * so every element without an explicit line-height rendered at the browser * default. Restoring `normal` here keeps those elements (eyebrows, card * titles, chips, labels) at the design's exact metrics. */ line-height: normal; } /* * The socradar theme scales the whole document down with `zoom` on * between 1281px and 1680px. This landing page was designed at a 1:1 scale, so * the wrapper cancels that zoom out for its own subtree only — the header and * footer keep scaling exactly as they do on every other page. Values mirror the * theme's `2xl:[zoom:0.85] xl:[zoom:0.75] lg:[zoom:unset]` on . */ @media (max-width: 1680px) { .xti-japan-landing { zoom: 1.1765; } /* 1 / 0.85 */ } @media (max-width: 1500px) { .xti-japan-landing { zoom: 1.3333; } /* 1 / 0.75 */ } @media (max-width: 1280px) { .xti-japan-landing { zoom: 1; } } /* * The theme's Tailwind preflight already puts the whole document in * border-box, so this only makes the inherited state explicit. The source * export ran in content-box: wherever that changed a rendered size, the value * below is the source's *rendered* size, not its authored one (each is marked * "content-box parity"). */ .xti-japan-landing *, .xti-japan-landing *::before, .xti-japan-landing *::after { box-sizing: border-box; } /* * Base resets are wrapped in :where() so they carry the specificity of the * wrapper class alone. Component rules below (also a single class) then win on * source order instead of being outranked by an element-qualified reset. */ .xti-japan-landing :where(a) { color: var(--xtijp-red); text-decoration: none; } .xti-japan-landing :where(a:hover) { color: #ff9bb0; } .xti-japan-landing :where(img) { max-width: 100%; } .xti-japan-landing :where(p, blockquote, h1, h2, h3, ul, li) { margin: 0; } .xtijp-section { position: relative; } /* In-page anchors (#demo-form, #contact) must land below the theme's fixed header, which is 120px tall and shrinks with the theme's own breakpoints. */ .xti-japan-landing :where([id]) { scroll-margin-top: 140px; } @media (max-width: 1280px) { .xti-japan-landing :where([id]) { scroll-margin-top: 120px; } } @media (max-width: 1024px) { .xti-japan-landing :where([id]) { scroll-margin-top: 100px; } } /* Shared inner container. The source used a per-section max-width, so each section sets its own via --xtijp-inner. */ .xtijp-inner { max-width: var(--xtijp-inner, 1280px); margin: 0 auto; width: 100%; } /* ========================================================================== Animations (radar decoration in the hero) ========================================================================== */ @keyframes xtijp-radar-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes xtijp-radar-ping { 0% { transform: scale(0.3); opacity: 0.8; } 70% { opacity: 0.2; } 100% { transform: scale(1.5); opacity: 0; } } @keyframes xtijp-radar-blip { 0%, 100% { opacity: 0; transform: scale(0.6); } 4% { opacity: 1; transform: scale(1.25); } 10% { opacity: 0.9; transform: scale(1); } 40% { opacity: 0.35; } 55% { opacity: 0; } } @keyframes xtijp-radar-halo { 0%, 100% { opacity: 0; transform: scale(0.3); } 4% { opacity: 0.5; } 18% { opacity: 0; transform: scale(2.6); } } @media (prefers-reduced-motion: reduce) { .xti-japan-landing *, .xti-japan-landing *::before, .xti-japan-landing *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================================================== Hero ========================================================================== */ .xtijp-hero { position: relative; background: var(--xtijp-ink); overflow: hidden; } .xtijp-hero__inner { --xtijp-inner: 1280px; position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 72px; align-items: center; padding: 88px var(--xtijp-gutter) 96px; } .xtijp-hero__eyebrow { font-family: "Red Hat Display", "Noto Sans JP", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: var(--xtijp-red); margin-bottom: 20px; } .xtijp-hero__title { margin: 0 0 24px; font-size: 40px; line-height: 1.4; font-weight: 700; color: #fff; text-wrap: pretty; } .xtijp-hero__body { margin: 0 0 28px; font-size: 16px; line-height: 2; color: var(--xtijp-muted); max-width: 560px; } .xtijp-hero__link { font-size: 15px; font-weight: 600; color: #fff; border-bottom: 2px solid var(--xtijp-red); padding-bottom: 3px; } .xtijp-hero__link:hover { color: var(--xtijp-red); } .xtijp-hero__badges { display: block; margin-top: 44px; width: 100%; max-width: 520px; height: auto; } /* Radar decoration --------------------------------------------------------- A stack of absolutely positioned rings, cross-hairs, a rotating sweep and pinging blips. Reproduced layer for layer from the source. */ .xtijp-radar { position: absolute; top: -320px; right: -220px; width: 900px; height: 900px; pointer-events: none; } .xtijp-radar__glow { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255, 69, 98, 0.06) 0%, rgba(255, 69, 98, 0.025) 45%, transparent 70%); } .xtijp-radar__ring { position: absolute; border-radius: 50%; } .xtijp-radar__ring--1 { inset: 0; border: 1px solid rgba(255, 255, 255, 0.1); } .xtijp-radar__ring--2 { inset: 112px; border: 1px solid rgba(255, 255, 255, 0.08); } .xtijp-radar__ring--3 { inset: 225px; border: 1px solid rgba(255, 255, 255, 0.07); } .xtijp-radar__ring--4 { inset: 337px; border: 1px solid rgba(255, 255, 255, 0.06); } .xtijp-radar__axis-v { position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.06) 20%, rgba(255, 255, 255, 0.06) 80%, transparent); } .xtijp-radar__axis-h { position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.06) 20%, rgba(255, 255, 255, 0.06) 80%, transparent); } .xtijp-radar__diagonals { position: absolute; inset: 0; transform: rotate(45deg); } .xtijp-radar__diagonals::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background: rgba(255, 255, 255, 0.03); } .xtijp-radar__diagonals::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.03); } .xtijp-radar__sweep { position: absolute; inset: 2px; border-radius: 50%; overflow: hidden; animation: xtijp-radar-sweep 8s linear infinite; } .xtijp-radar__sweep::before { content: ""; position: absolute; inset: 0; background: conic-gradient(from 275deg at 50% 50%, transparent 0deg, rgba(255, 69, 98, 0.01) 20deg, rgba(255, 69, 98, 0.05) 55deg, rgba(255, 69, 98, 0.14) 78deg, rgba(255, 69, 98, 0.28) 84.5deg, transparent 85deg, transparent 360deg); } .xtijp-radar__sweep::after { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 50%; margin-left: -1px; transform-origin: 50% 100%; background: linear-gradient(to top, rgba(255, 69, 98, 0.9), rgba(255, 120, 140, 0.55) 60%, transparent); box-shadow: 0 0 14px rgba(255, 69, 98, 0.55); } .xtijp-radar__blip { position: absolute; } .xtijp-radar__blip span { position: absolute; inset: 0; border-radius: 50%; } .xtijp-radar__blip .xtijp-radar__dot { background: var(--xtijp-red); animation: xtijp-radar-blip 8s linear infinite; } .xtijp-radar__blip .xtijp-radar__halo { animation: xtijp-radar-halo 8s linear infinite; } .xtijp-radar__blip--1 { top: 31%; left: 33%; width: 8px; height: 8px; margin: -4px; } .xtijp-radar__blip--1 .xtijp-radar__dot { box-shadow: 0 0 14px rgba(255, 69, 98, 1); animation-delay: 7s; } .xtijp-radar__blip--1 .xtijp-radar__halo { border: 1px solid rgba(255, 69, 98, 0.8); animation-delay: 7s; } .xtijp-radar__blip--2 { top: 58%; left: 26%; width: 6px; height: 6px; margin: -3px; } .xtijp-radar__blip--2 .xtijp-radar__dot { box-shadow: 0 0 12px rgba(255, 69, 98, 0.9); animation-delay: 5.6s; } .xtijp-radar__blip--2 .xtijp-radar__halo { border: 1px solid rgba(255, 69, 98, 0.7); animation-delay: 5.6s; } .xtijp-radar__blip--3 { top: 68%; left: 45%; width: 7px; height: 7px; margin: -3.5px; } .xtijp-radar__blip--3 .xtijp-radar__dot { box-shadow: 0 0 12px rgba(255, 69, 98, 0.9); animation-delay: 4.4s; } .xtijp-radar__blip--3 .xtijp-radar__halo { border: 1px solid rgba(255, 69, 98, 0.7); animation-delay: 4.4s; } .xtijp-radar__blip--4 { top: 62%; left: 23%; width: 5px; height: 5px; margin: -2.5px; } .xtijp-radar__blip--4 .xtijp-radar__dot { background: #ffb8c4; box-shadow: 0 0 10px rgba(255, 69, 98, 0.7); animation-delay: 5.85s; } .xtijp-radar__core { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: rgba(255, 69, 98, 0.9); box-shadow: 0 0 16px rgba(255, 69, 98, 0.8); } .xtijp-radar__ping { position: absolute; inset: 38%; border-radius: 50%; animation: xtijp-radar-ping 4s ease-out infinite; } .xtijp-radar__ping--1 { border: 1px solid rgba(255, 69, 98, 0.3); } .xtijp-radar__ping--2 { border: 1px solid rgba(255, 69, 98, 0.2); animation-delay: 2s; } .xtijp-hero__orb { position: absolute; border-radius: 50%; pointer-events: none; } .xtijp-hero__orb--1 { bottom: -260px; left: -260px; width: 622px; /* content-box parity: 620 + 1px border each side */ height: 622px; border: 1px solid rgba(255, 255, 255, 0.06); } .xtijp-hero__orb--2 { bottom: -190px; left: -190px; width: 482px; /* content-box parity */ height: 482px; border: 1px solid rgba(255, 255, 255, 0.05); } /* Lead-gen card ----------------------------------------------------------- */ .xtijp-formcard { background: #fff; border-radius: 16px; padding: 36px 32px; box-shadow: 0 24px 64px rgba(13, 13, 28, 0.55); } .xtijp-formcard__title { font-size: 20px; font-weight: 700; line-height: 1.6; color: var(--xtijp-ink); margin-bottom: 22px; text-wrap: pretty; } .xtijp-formcard__slot { margin-bottom: 20px; } /* * Embedded lead-gen form. * * The card is white while the landing page's text colour is white, so every * element the form injects needs an explicit dark colour — otherwise the form * renders invisible. The min-height matches the design's placeholder box so the * card reserves its space and does not jump when HubSpot finishes loading. */ .xtijp-hsform { min-height: 220px; } .xtijp-formcard, .xtijp-finalcta__card { color: var(--xtijp-ink); } .xtijp-formcard label, .xtijp-finalcta__card label, .xtijp-formcard .hs-form-field, .xtijp-finalcta__card .hs-form-field, .xtijp-formcard .hs-richtext, .xtijp-finalcta__card .hs-richtext, .xtijp-formcard .hs-richtext p, .xtijp-finalcta__card .hs-richtext p { color: var(--xtijp-ink); } .xtijp-formcard input:not([type="submit"]), .xtijp-finalcta__card input:not([type="submit"]), .xtijp-formcard select, .xtijp-finalcta__card select, .xtijp-formcard textarea, .xtijp-finalcta__card textarea { color: var(--xtijp-ink); background: #fff; } .xtijp-formcard .hs-error-msg, .xtijp-finalcta__card .hs-error-msg, .xtijp-formcard .hs-error-msgs label, .xtijp-finalcta__card .hs-error-msgs label { color: var(--xtijp-red-dark); } /* HubSpot's own submit button, styled to match the design's CTA exactly. */ .xtijp-formcard .hs-button, .xtijp-finalcta__card .hs-button { display: block; width: 100%; text-align: center; background: var(--xtijp-red); color: #fff; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.2; padding: 15px 0; border: 0; border-radius: 8px; cursor: pointer; transition: background 0.2s; } .xtijp-formcard .hs-button:hover, .xtijp-finalcta__card .hs-button:hover { background: var(--xtijp-red-dark); color: #fff; } /* ========================================================================== Trusted-by logo strip ========================================================================== */ .xtijp-logos { padding: 56px var(--xtijp-gutter); background: var(--xtijp-ink-soft); text-align: center; } .xtijp-logos__label { font-size: 14px; font-weight: 600; color: var(--xtijp-muted); margin-bottom: 28px; } .xtijp-logos__list { display: flex; justify-content: center; align-items: center; gap: 52px; flex-wrap: wrap; } .xtijp-logos__list img { display: block; width: auto; filter: brightness(0) invert(1); opacity: 0.7; } .xtijp-logos__list img[data-logo="kddi"] { height: 26px; } .xtijp-logos__list img[data-logo="yokogawa"] { height: 17px; } .xtijp-logos__list img[data-logo="misc"] { height: 30px; } .xtijp-logos__list img[data-logo="erajaya"] { height: 40px; } .xtijp-logos__list img[data-logo="pertamina"] { height: 22px; } .xtijp-logos__list img[data-logo="mas"] { height: 34px; } .xtijp-logos__list img[data-logo="telkomsel"] { height: 36px; } /* ========================================================================== XTI platform ========================================================================== */ .xtijp-platform { padding: 88px var(--xtijp-gutter); background-color: var(--xtijp-ink); } .xtijp-platform__inner { --xtijp-inner: 1152px; } .xtijp-platform__head { text-align: center; max-width: 840px; margin: 0 auto; } .xtijp-platform__eyebrow { font-family: "Red Hat Display", "Noto Sans JP", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--xtijp-red); margin-bottom: 16px; } .xtijp-platform__title { margin: 0 0 18px; font-size: 32px; line-height: 1.5; font-weight: 700; color: #fff; text-wrap: pretty; } .xtijp-platform__sub { margin: 0; font-size: 16px; line-height: 2; color: var(--xtijp-muted); } .xtijp-checks { display: flex; justify-content: center; gap: 14px 32px; flex-wrap: wrap; margin: 32px auto 56px; max-width: 980px; padding: 0; list-style: none; } .xtijp-checks li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: #fff; } .xtijp-checks li::before { content: "\2713"; color: var(--xtijp-red); font-weight: 700; } .xtijp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .xtijp-card { background: var(--xtijp-card); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 14px; padding: 32px 28px; } .xtijp-card__icon { width: 48px; height: 48px; border-radius: 10px; background: rgba(255, 69, 98, 0.12); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .xtijp-card__title { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 12px; } .xtijp-card__body { font-size: 14.5px; line-height: 1.9; color: var(--xtijp-muted); } /* ========================================================================== Modules accordion ========================================================================== */ .xtijp-modules { background: var(--xtijp-ink-soft); padding: 88px var(--xtijp-gutter); } .xtijp-modules__inner { --xtijp-inner: 1180px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: start; } .xtijp-modules__list { display: flex; flex-direction: column; border-top: 1px solid rgba(255, 255, 255, 0.1); } .xtijp-module { border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-left: 3px solid transparent; background: transparent; transition: background 0.2s; } .xtijp-module.is-selected { border-left-color: var(--xtijp-red); background: rgba(255, 69, 98, 0.06); } .xtijp-module__toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 20px; cursor: pointer; width: 100%; margin: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; } .xtijp-module__toggle:hover { background: rgba(255, 255, 255, 0.04); } .xtijp-module__toggle:focus-visible { outline: 2px solid var(--xtijp-red); outline-offset: -2px; } .xtijp-module__label { display: flex; align-items: center; gap: 14px; min-width: 0; } .xtijp-module__icon { display: block; width: 32px; height: 32px; border-radius: 6px; flex: none; } .xtijp-module__title { font-size: 20px; font-weight: 700; color: #fff; } .xtijp-module__chevron { flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; transition: transform 0.25s, background 0.2s; } .xtijp-module__toggle[aria-expanded="true"] .xtijp-module__chevron { background: var(--xtijp-red); transform: rotate(180deg); } .xtijp-module__panel { padding: 0 20px 32px; } .xtijp-module__panel[hidden] { display: none; } .xtijp-module__panel p { margin: 0 0 14px; font-size: 15.5px; line-height: 2; color: var(--xtijp-muted); } .xtijp-module__feats-label { font-size: 14px; font-weight: 700; color: #fff; margin: 4px 0 12px; } .xtijp-module__feats { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; } .xtijp-module__feats li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.8; color: var(--xtijp-muted); } .xtijp-module__feats li::before { content: "\25CF"; color: var(--xtijp-red); flex: none; } /* Sticky preview column */ .xtijp-modules__preview { position: sticky; top: 24px; } .xtijp-shots { position: relative; border-radius: 14px; transform: none; transform-origin: center; transition: transform 0.3s ease; cursor: zoom-in; } @media (hover: hover) { .xtijp-shots:hover { transform: scale(1.06); } } .xtijp-shots img { /* content-box parity: in the source the 1px border sat outside the 100% width, making the shot 2px wider than its column. Kept so the screenshot rasterises at exactly the same size as the design export. */ box-sizing: content-box; display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 20px 48px rgba(13, 13, 28, 0.5); position: absolute; top: 0; left: 0; visibility: hidden; } .xtijp-shots img.is-active { position: static; visibility: visible; } .xtijp-modules__note { margin-top: 20px; font-size: 14.5px; line-height: 1.9; font-weight: 600; color: #fff; } .xtijp-modules__note[hidden] { display: none; } /* Lightbox (lives outside the wrapper so the theme's body zoom governs it, exactly like every other fixed overlay on the site). */ .xtijp-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(13, 13, 28, 0.85); display: flex; align-items: center; justify-content: center; padding: 48px; cursor: zoom-out; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .xtijp-lightbox[hidden] { display: none; } .xtijp-lightbox img { max-width: 92%; max-height: 92%; border-radius: 14px; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6); } .xtijp-lightbox__close { position: absolute; top: 20px; right: 28px; font-size: 32px; line-height: 1; color: #fff; font-family: sans-serif; background: none; border: 0; padding: 0; cursor: zoom-out; } /* ========================================================================== Integrations ========================================================================== */ .xtijp-integrations { background: var(--xtijp-ink-deep); padding: 72px var(--xtijp-gutter); text-align: center; } .xtijp-integrations__title { margin: 0 0 36px; font-size: 28px; line-height: 1.6; font-weight: 700; color: #fff; text-wrap: pretty; } .xtijp-chips { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; max-width: 900px; margin: 0 auto; padding: 0; list-style: none; } .xtijp-chips li { padding: 11px 22px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; font-size: 14px; font-weight: 600; } /* ========================================================================== AI workflows ========================================================================== */ .xtijp-ai { background: var(--xtijp-ink); padding: 88px var(--xtijp-gutter); } .xtijp-ai__inner { --xtijp-inner: 1260px; display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 56px; align-items: center; } .xtijp-ai__media { display: block; width: 100%; height: auto; } .xtijp-ai__title { margin: 0 0 28px; font-size: 30px; line-height: 1.55; font-weight: 700; color: #fff; text-wrap: pretty; } .xtijp-ai__list { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; list-style: none; } .xtijp-ai__list li { display: flex; gap: 12px; font-size: 15px; line-height: 1.9; color: var(--xtijp-muted); } .xtijp-ai__list li::before { content: "\25CF"; color: var(--xtijp-red); flex: none; } .xtijp-ai__list strong { color: #fff; } /* ========================================================================== Testimonial ========================================================================== */ .xtijp-testimonial { background: var(--xtijp-ink-soft); padding: 88px var(--xtijp-gutter); text-align: center; } .xtijp-testimonial__inner { --xtijp-inner: 880px; } .xtijp-testimonial__label { font-family: "Red Hat Display", "Noto Sans JP", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--xtijp-red); margin-bottom: 28px; } .xtijp-testimonial__quote { font-size: 21px; line-height: 2; font-weight: 500; color: #fff; text-wrap: pretty; margin: 0; } .xtijp-testimonial__stars { color: var(--xtijp-red); font-size: 20px; letter-spacing: 4px; margin: 28px 0 14px; } .xtijp-testimonial__attr { font-size: 14px; font-weight: 600; color: #fff; } .xtijp-testimonial__source { font-size: 13px; color: var(--xtijp-muted-dim); margin-top: 4px; } .xtijp-testimonial__badges { display: flex; justify-content: center; align-items: center; gap: 48px; margin-top: 36px; } .xtijp-testimonial__badges img { display: block; width: auto; height: 44px; } .xtijp-testimonial__badges img[data-badge="forbes"] { height: 64px; border-radius: 6px; } /* ========================================================================== Final CTA ========================================================================== */ .xtijp-finalcta { position: relative; background: var(--xtijp-ink); padding: 96px var(--xtijp-gutter); overflow: hidden; } .xtijp-finalcta__orb { position: absolute; left: 50%; border-radius: 50%; pointer-events: none; } .xtijp-finalcta__orb--1 { top: -380px; margin-left: -450px; width: 902px; /* content-box parity */ height: 902px; border: 1px solid rgba(255, 255, 255, 0.07); } .xtijp-finalcta__orb--2 { top: -280px; margin-left: -350px; width: 702px; /* content-box parity */ height: 702px; border: 1px solid rgba(255, 255, 255, 0.06); } .xtijp-finalcta__inner { --xtijp-inner: 760px; position: relative; text-align: center; } .xtijp-finalcta__title { margin: 0 0 20px; font-size: 32px; line-height: 1.55; font-weight: 700; color: #fff; text-wrap: pretty; } .xtijp-finalcta__body { margin: 0 0 40px; font-size: 16px; line-height: 2; color: var(--xtijp-muted); } .xtijp-finalcta__card { background: #fff; border-radius: 16px; padding: 32px; box-shadow: 0 24px 64px rgba(13, 13, 28, 0.55); text-align: left; } .xtijp-finalcta__card .xtijp-hsform { min-height: 180px; } /* ========================================================================== Contact ========================================================================== */ .xtijp-contact { background: var(--xtijp-ink-soft); padding: 80px var(--xtijp-gutter); } .xtijp-contact__inner { /* content-box parity: the source's max-width:1000px excluded the 60px side padding and the 1px border -> 1122px rendered. */ --xtijp-inner: 1122px; position: relative; overflow: hidden; background: var(--xtijp-ink-deep); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 20px; padding: 56px 60px; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: center; } .xtijp-contact__orb { position: absolute; border-radius: 50%; pointer-events: none; } .xtijp-contact__orb--1 { top: -160px; right: -160px; width: 422px; /* content-box parity */ height: 422px; border: 1px solid rgba(255, 69, 98, 0.15); } .xtijp-contact__orb--2 { top: -100px; right: -100px; width: 302px; /* content-box parity */ height: 302px; border: 1px solid rgba(255, 69, 98, 0.1); } .xtijp-contact__text { position: relative; } .xtijp-contact__label { font-family: "Red Hat Display", "Noto Sans JP", sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--xtijp-red); margin-bottom: 14px; } .xtijp-contact__body { margin: 0; font-size: 19px; line-height: 1.9; font-weight: 600; color: #fff; text-wrap: pretty; } .xtijp-contact__actions { position: relative; display: flex; flex-direction: column; gap: 14px; } .xtijp-contact__button { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--xtijp-red); color: #fff; font-size: 15.5px; font-weight: 700; padding: 16px 0; border-radius: 10px; } .xtijp-contact__button:hover { background: var(--xtijp-red-dark); color: #fff; } .xtijp-contact__mail { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--xtijp-muted); padding: 6px 0; } .xtijp-contact__mail:hover { color: var(--xtijp-red); } /* ========================================================================== Responsive -------------------------------------------------------------------------- The source export was desktop-only (`min-width:1100px`, no media queries). Everything below adapts that same layout down to 390px without altering the desktop composition: type scale, colours, radii and section order are kept, only the grids collapse and the gutters shrink. ========================================================================== */ @media (max-width: 1280px) { .xti-japan-landing { --xtijp-gutter: 40px; } .xtijp-hero__inner { gap: 48px; } .xtijp-modules__inner { gap: 40px; } .xtijp-ai__inner { gap: 40px; } .xtijp-contact__inner { padding: 48px 44px; gap: 36px; } .xtijp-radar { top: -300px; right: -300px; } } @media (max-width: 1024px) { .xti-japan-landing { --xtijp-gutter: 32px; } .xtijp-hero__inner { grid-template-columns: 1fr; gap: 48px; padding: 64px var(--xtijp-gutter) 72px; } .xtijp-hero__title { font-size: 34px; } .xtijp-hero__body { max-width: none; } .xtijp-radar { top: -380px; right: -380px; opacity: 0.85; } .xtijp-platform, .xtijp-modules, .xtijp-ai, .xtijp-testimonial { padding-top: 64px; padding-bottom: 64px; } .xtijp-finalcta { padding-top: 72px; padding-bottom: 72px; } .xtijp-platform__title { font-size: 28px; } .xtijp-cards { grid-template-columns: repeat(2, 1fr); } .xtijp-modules__inner { grid-template-columns: 1fr; } /* Preview column moves above the accordion so a tap on a module does not scroll the matching screenshot out of view. */ .xtijp-modules__preview { position: static; order: -1; } .xtijp-ai__inner { grid-template-columns: 1fr; } .xtijp-ai__title { font-size: 26px; } .xtijp-integrations__title { font-size: 24px; } .xtijp-testimonial__quote { font-size: 19px; } .xtijp-finalcta__title { font-size: 28px; } .xtijp-contact__inner { grid-template-columns: 1fr; } .xtijp-logos__list { gap: 40px; } } @media (max-width: 768px) { .xti-japan-landing { --xtijp-gutter: 24px; } .xtijp-hero__inner { padding: 48px var(--xtijp-gutter) 56px; } .xtijp-hero__title { font-size: 27px; line-height: 1.5; } .xtijp-hero__body { font-size: 15px; line-height: 1.9; } .xtijp-hero__badges { margin-top: 32px; } .xtijp-radar { width: 620px; height: 620px; top: -240px; right: -260px; } .xtijp-radar__ring--2 { inset: 77px; } .xtijp-radar__ring--3 { inset: 155px; } .xtijp-radar__ring--4 { inset: 232px; } .xtijp-hero__orb--1 { width: 420px; height: 420px; bottom: -200px; left: -200px; } .xtijp-hero__orb--2 { width: 320px; height: 320px; bottom: -150px; left: -150px; } .xtijp-formcard { padding: 28px 24px; } .xtijp-hsform { min-height: 180px; } .xtijp-logos { padding: 40px var(--xtijp-gutter); } .xtijp-logos__list { gap: 28px 32px; } .xtijp-platform, .xtijp-modules, .xtijp-ai, .xtijp-testimonial, .xtijp-integrations { padding-top: 56px; padding-bottom: 56px; } .xtijp-platform__title { font-size: 24px; } .xtijp-platform__sub { font-size: 15px; line-height: 1.9; } .xtijp-checks { justify-content: flex-start; gap: 12px 24px; margin: 28px auto 40px; } .xtijp-cards { grid-template-columns: 1fr; gap: 16px; } .xtijp-card { padding: 26px 22px; } .xtijp-module__toggle { padding: 20px 14px; gap: 12px; } .xtijp-module__title { font-size: 17px; } .xtijp-module__label { gap: 12px; } .xtijp-module__panel { padding: 0 14px 26px; } .xtijp-integrations__title { font-size: 21px; } .xtijp-chips li { padding: 9px 16px; font-size: 13px; } .xtijp-ai__title { font-size: 22px; } .xtijp-testimonial__quote { font-size: 17px; line-height: 1.95; } .xtijp-testimonial__badges { gap: 28px; flex-wrap: wrap; } .xtijp-testimonial__badges img { height: 34px; } .xtijp-testimonial__badges img[data-badge="forbes"] { height: 52px; } .xtijp-finalcta { padding: 64px var(--xtijp-gutter); } .xtijp-finalcta__title { font-size: 23px; } .xtijp-finalcta__body { font-size: 15px; line-height: 1.9; margin-bottom: 32px; } .xtijp-finalcta__card { padding: 24px; } .xtijp-finalcta__orb--1 { width: 620px; height: 620px; top: -300px; margin-left: -310px; } .xtijp-finalcta__orb--2 { width: 460px; height: 460px; top: -220px; margin-left: -230px; } .xtijp-contact { padding: 56px var(--xtijp-gutter); } .xtijp-contact__inner { padding: 36px 28px; gap: 28px; } .xtijp-contact__body { font-size: 17px; } .xtijp-lightbox { padding: 24px; } } @media (max-width: 480px) { .xti-japan-landing { --xtijp-gutter: 18px; } .xtijp-hero__title { font-size: 23px; } .xtijp-hero__eyebrow { font-size: 12px; letter-spacing: 0.1em; } .xtijp-hero__link { font-size: 14px; } .xtijp-radar { width: 460px; height: 460px; top: -180px; right: -200px; } .xtijp-radar__ring--2 { inset: 57px; } .xtijp-radar__ring--3 { inset: 115px; } .xtijp-radar__ring--4 { inset: 172px; } .xtijp-formcard__title { font-size: 18px; } .xtijp-logos__list { gap: 24px 28px; } .xtijp-logos__list img[data-logo="erajaya"] { height: 32px; } .xtijp-logos__list img[data-logo="telkomsel"] { height: 28px; } .xtijp-logos__list img[data-logo="mas"] { height: 28px; } .xtijp-platform__title { font-size: 21px; } .xtijp-card__title { font-size: 17px; } .xtijp-module__title { font-size: 16px; } .xtijp-module__chevron { width: 28px; height: 28px; } .xtijp-integrations__title { font-size: 19px; } .xtijp-ai__title { font-size: 20px; } .xtijp-testimonial__quote { font-size: 16px; } .xtijp-finalcta__title { font-size: 21px; } .xtijp-contact__body { font-size: 16px; } }