/* ================================================================= SAP Business One Cloud — Custom Stylesheet Converted from Tailwind CSS to plain, hand-readable CSS. Structure: 1. Base reset / normalize (browser defaults) 2. Interactive component helpers (menu, tabs, dots, etc.) 3. Page component classes (one class per unique element style, named "{section}-{tag}-{n}" based on where it appears in the page) Design tokens (--primary, --ink, --cyan, --emerald, --alt) are defined in the \3c style> block inside index.html's . ================================================================= */ /* ----------------------------------------------------------------- 1. BASE RESET / NORMALIZE ----------------------------------------------------------------- */ *, :after, :before { --tw-border-spacing-x:0; --tw-border-spacing-y:0; --tw-translate-x:0; --tw-translate-y:0; --tw-rotate:0; --tw-skew-x:0; --tw-skew-y:0; --tw-scale-x:1; --tw-scale-y:1; --tw-pan-x:; --tw-pan-y:; --tw-pinch-zoom:; --tw-scroll-snap-strictness:proximity; --tw-gradient-from-position:; --tw-gradient-via-position:; --tw-gradient-to-position:; --tw-ordinal:; --tw-slashed-zero:; --tw-numeric-figure:; --tw-numeric-spacing:; --tw-numeric-fraction:; --tw-ring-inset:; --tw-ring-offset-width:0px; --tw-ring-offset-color:#fff; --tw-ring-color:rgba(59,130,246,.5); --tw-ring-offset-shadow:0 0 #0000; --tw-ring-shadow:0 0 #0000; --tw-shadow:0 0 #0000; --tw-shadow-colored:0 0 #0000; --tw-blur:; --tw-brightness:; --tw-contrast:; --tw-grayscale:; --tw-hue-rotate:; --tw-invert:; --tw-saturate:; --tw-sepia:; --tw-drop-shadow:; --tw-backdrop-blur:; --tw-backdrop-brightness:; --tw-backdrop-contrast:; --tw-backdrop-grayscale:; --tw-backdrop-hue-rotate:; --tw-backdrop-invert:; --tw-backdrop-opacity:; --tw-backdrop-saturate:; --tw-backdrop-sepia:; --tw-contain-size:; --tw-contain-layout:; --tw-contain-paint:; --tw-contain-style:; } ::backdrop { --tw-border-spacing-x:0; --tw-border-spacing-y:0; --tw-translate-x:0; --tw-translate-y:0; --tw-rotate:0; --tw-skew-x:0; --tw-skew-y:0; --tw-scale-x:1; --tw-scale-y:1; --tw-pan-x:; --tw-pan-y:; --tw-pinch-zoom:; --tw-scroll-snap-strictness:proximity; --tw-gradient-from-position:; --tw-gradient-via-position:; --tw-gradient-to-position:; --tw-ordinal:; --tw-slashed-zero:; --tw-numeric-figure:; --tw-numeric-spacing:; --tw-numeric-fraction:; --tw-ring-inset:; --tw-ring-offset-width:0px; --tw-ring-offset-color:#fff; --tw-ring-color:rgba(59,130,246,.5); --tw-ring-offset-shadow:0 0 #0000; --tw-ring-shadow:0 0 #0000; --tw-shadow:0 0 #0000; --tw-shadow-colored:0 0 #0000; --tw-blur:; --tw-brightness:; --tw-contrast:; --tw-grayscale:; --tw-hue-rotate:; --tw-invert:; --tw-saturate:; --tw-sepia:; --tw-drop-shadow:; --tw-backdrop-blur:; --tw-backdrop-brightness:; --tw-backdrop-contrast:; --tw-backdrop-grayscale:; --tw-backdrop-hue-rotate:; --tw-backdrop-invert:; --tw-backdrop-opacity:; --tw-backdrop-saturate:; --tw-backdrop-sepia:; --tw-contain-size:; --tw-contain-layout:; --tw-contain-paint:; --tw-contain-style:; } *, :after, :before { box-sizing:border-box; border:0 solid #e5e7eb; } :after, :before { --tw-content:""; } :host, html { line-height:1.5; -webkit-text-size-adjust:100%; -moz-tab-size:4; -o-tab-size:4; tab-size:4; font-family:Inter,Plus Jakarta Sans,sans-serif; font-feature-settings:normal; font-variation-settings:normal; -webkit-tap-highlight-color:transparent; } body { margin:0; line-height:inherit; } hr { height:0; color:inherit; border-top-width:1px; } abbr:where([title]) { -webkit-text-decoration:underline dotted; text-decoration:underline dotted; } h1, h2, h3, h4, h5, h6 { font-size:inherit; font-weight:inherit; } a { color:inherit; text-decoration:inherit; } b, strong { font-weight:bolder; } code, kbd, pre, samp { font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace; font-feature-settings:normal; font-variation-settings:normal; font-size:1em; } small { font-size:80%; } sub, sup { font-size:75%; line-height:0; position:relative; vertical-align:baseline; } sub { bottom:-.25em; } sup { top:-.5em; } table { text-indent:0; border-color:inherit; border-collapse:collapse; } button, input, optgroup, select, textarea { font-family:inherit; font-feature-settings:inherit; font-variation-settings:inherit; font-size:100%; font-weight:inherit; line-height:inherit; letter-spacing:inherit; color:inherit; margin:0; padding:0; } button, select { text-transform:none; } button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) { -webkit-appearance:button; background-color:transparent; background-image:none; } :-moz-focusring { outline:auto; } :-moz-ui-invalid { box-shadow:none; } progress { vertical-align:baseline; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height:auto; } [type=search] { -webkit-appearance:textfield; outline-offset:-2px; } ::-webkit-search-decoration { -webkit-appearance:none; } ::-webkit-file-upload-button { -webkit-appearance:button; font:inherit; } summary { display:list-item; } blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin:0; } fieldset { margin:0; } fieldset, legend { padding:0; } menu, ol, ul { list-style:none; margin:0; padding:0; } dialog { padding:0; } textarea { resize:vertical; } input::-moz-placeholder, textarea::-moz-placeholder { opacity:1; color:#9ca3af; } input::placeholder, textarea::placeholder { opacity:1; color:#9ca3af; } [role=button], button { cursor:pointer; } :disabled { cursor:default; } audio, canvas, embed, iframe, img, object, svg, video { display:block; vertical-align:middle; } img, video { max-width:100%; height:auto; } [hidden]:where(:not([hidden=until-found])) { display:none; } /* ----------------------------------------------------------------- 2. INTERACTIVE COMPONENT HELPERS ----------------------------------------------------------------- */ /* ---------- Visibility toggle (used by JS for mobile menu, nav icons, tab panels) ---------- */ .is-hidden { display: none; } /* ---------- Mobile experience tabs ---------- */ .m-tab { font-size: .875rem; line-height: 1.25rem; font-weight: 600; padding: .5rem 1rem; border-radius: 9999px; color: rgba(15, 23, 42, .6); transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .m-tab:not(.is-active) { border: 1px solid rgba(15, 23, 42, .1); } .m-tab:not(.is-active):hover { background-color: rgba(15, 23, 42, .05); } .m-tab.is-active { background-color: #0F172A; color: #fff; } /* ---------- Testimonial slider dots ---------- */ .t-dot { width: .625rem; height: .625rem; border-radius: 9999px; background-color: rgba(15, 23, 42, .15); transition: background-color .15s ease; } .t-dot.is-active { background-color: #2563EB; } /* ---------- "Pelajari" link gap animation on bento card hover ---------- */ .group:hover .group-hover-gap { gap: .5rem; } /* ---------- Text selection color ---------- */ .selectable-cyan::-moz-selection { background-color: rgba(34, 211, 238, .3); } .selectable-cyan::selection { background-color: rgba(34, 211, 238, .3); } /* ---------- Stacked spacing helpers (gap between stacked children) ---------- */ .stack-1 > * + * { margin-top: .25rem; } .stack-2-5 > * + * { margin-top: .625rem; } .stack-3 > * + * { margin-top: .75rem; } .stack-4 > * + * { margin-top: 1rem; } .stack-7 > * + * { margin-top: 1.75rem; } /* ---------- Pulse animation (used by the "live" indicator dot in the hero badge) ---------- */ @keyframes pulse { 50% { opacity: .5; } } /* ----------------------------------------------------------------- 3. PAGE COMPONENT CLASSES ----------------------------------------------------------------- */ .page-html-1 { scroll-behavior: smooth; } .page-body-1 { background-color: rgb(255, 255, 255); color: rgb(15, 23, 42); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .page-a-1 { position: fixed; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; left: .5rem; top: .5rem; z-index: 100; --tw-translate-y: -4rem; border-radius: .5rem; background-color: rgb(37, 99, 235); padding-left: 1rem; padding-right: 1rem; padding-top: .5rem; padding-bottom: .5rem; font-size: .875rem; line-height: 1.25rem; font-weight: 600; color: rgb(255, 255, 255); transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s; } .page-a-1:focus { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; } .site-nav-header-1 { position: fixed; left: 0; right: 0; top: 0; z-index: 50; } .site-nav-nav-1 { margin-left: auto; margin-right: auto; display: flex; max-width: 1280px; align-items: center; justify-content: space-between; padding-left: 1.25rem; padding-right: 1.25rem; padding-top: .875rem; padding-bottom: .875rem; } @media (min-width:640px) { .site-nav-nav-1 { padding-left: 2rem; padding-right: 2rem; } } .site-nav-a-1 { display: flex; align-items: center; gap: .625rem; } .site-nav-span-1 { display: grid; height: 2.25rem; width: 2.25rem; place-items: center; border-radius: .75rem; background-image: linear-gradient(to bottom right,var(--tw-gradient-stops)); --tw-gradient-from: #2563eb var(--tw-gradient-from-position); --tw-gradient-to: #22d3ee var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to); font-size: .875rem; line-height: 1.25rem; font-weight: 700; color: rgb(255, 255, 255); --tw-shadow: 0 1px 2px rgba(15,23,42,.04),0 12px 32px -8px rgba(15,23,42,.1); --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color),0 12px 32px -8px var(--tw-shadow-color); } .site-nav-span-2 { font-family: Plus Jakarta Sans,Inter,sans-serif; font-size: 15px; font-weight: 800; letter-spacing: -.025em; color: rgb(15, 23, 42); } @media (min-width:640px) { .site-nav-span-2 { font-size: 1rem; line-height: 1.5rem; } } .site-nav-span-3 { color: rgb(37, 99, 235); } .site-nav-ul-1 { display: none; align-items: center; gap: 2rem; font-size: .875rem; line-height: 1.25rem; font-weight: 500; color: rgba(15,23,42,.7); } @media (min-width:1024px) { .site-nav-ul-1 { display: flex; } } .site-nav-a-2 { transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s; } .site-nav-a-2:hover { color: rgb(15, 23, 42); } .site-nav-div-1 { display: none; align-items: center; gap: .75rem; } @media (min-width:1024px) { .site-nav-div-1 { display: flex; } } .site-nav-a-3 { display: inline-flex; align-items: center; gap: .375rem; border-radius: 9999px; background-color: rgb(15, 23, 42); padding-left: 1.25rem; padding-right: 1.25rem; padding-top: .625rem; padding-bottom: .625rem; font-size: .875rem; line-height: 1.25rem; font-weight: 600; color: rgb(255, 255, 255); --tw-shadow: 0 1px 2px rgba(15,23,42,.04),0 12px 32px -8px rgba(15,23,42,.1); --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color),0 12px 32px -8px var(--tw-shadow-color); transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s; } .site-nav-a-3:hover { background-color: rgb(37, 99, 235); } .nav-toggle-button-1 { display: grid; height: 2.5rem; width: 2.5rem; place-items: center; border-radius: 9999px; } .nav-toggle-button-1:hover { background-color: rgba(15,23,42,.05); } @media (min-width:1024px) { .nav-toggle-button-1 { display: none; } } .mobile-menu-div-1 { border-top-width: 1px; border-color: rgba(15,23,42,.05); background-color: hsla(0,0%,100%,.95); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } @media (min-width:1024px) { .mobile-menu-div-1 { display: none; } } .mobile-menu-ul-1 { padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 1rem; padding-bottom: 1rem; font-size: .875rem; line-height: 1.25rem; font-weight: 500; color: rgba(15,23,42,.8); } .mobile-menu-a-1 { display: block; padding-top: .625rem; padding-bottom: .625rem; } .mobile-menu-li-1 { padding-top: .5rem; } .mobile-menu-a-2 { display: block; border-radius: 9999px; background-color: rgb(15, 23, 42); padding-left: 1.25rem; padding-right: 1.25rem; padding-top: .75rem; padding-bottom: .75rem; text-align: center; font-weight: 600; color: rgb(255, 255, 255); } .home-section-1 { position: relative; isolation: isolate; display: flex; align-items: center; /*overflow: hidden;*/ padding-bottom: 4rem; padding-top: 7rem; } @media (min-width:1024px) { .home-section-1 { height: 720px; padding-bottom: 0; padding-top: 0; } } .home-div-1 { position: absolute; inset: 0; z-index: -20; display: none; } @media (min-width:1024px) { .home-div-1 { display: block; } } .home-img-1 { position: absolute; /*opacity:80%;*/ inset: 0; height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: 78% center; object-position: 78% center; } .home-div-2 { position: absolute; inset: 0; background-image: linear-gradient(to right,var(--tw-gradient-stops)); --tw-gradient-from: #fff var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from),hsla(0,0%,100%,.95) var(--tw-gradient-via-position),var(--tw-gradient-to); } .home-div-3 { position: absolute; inset: 0; z-index: -30; } .home-div-4 { position: relative; margin-left: auto; margin-right: auto; display: grid; width: 100%; max-width: 1280px; align-items: center; gap: 3rem; padding-left: 1.25rem; padding-right: 1.25rem; } @media (min-width:640px) { .home-div-4 { padding-left: 2rem; padding-right: 2rem; } } @media (min-width:1024px) { .home-div-4 { grid-template-columns: 4.5fr 5.5fr; gap: 4rem; } } @media (min-width:1280px) { .home-div-4 { grid-template-columns: 5fr 5fr; } } .home-span-1 { display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px; border-width: 1px; border-color: rgba(37,99,235,.15); padding-left: .875rem; padding-right: .875rem; padding-top: .375rem; padding-bottom: .375rem; font-size: .75rem; line-height: 1rem; font-weight: 600; letter-spacing: .025em; color: rgb(37, 99, 235); } .home-span-2 { height: .375rem; width: .375rem; animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; border-radius: 9999px; background-color: rgb(37, 99, 235); } .home-h1-1 { margin-top: 1.5rem; font-family: Plus Jakarta Sans,Inter,sans-serif; font-size: 2.6rem; font-weight: 800; letter-spacing: -.025em; color: rgb(15, 23, 42); } @media (min-width:1024px) { .home-h1-1 { font-size: 3rem; line-height: 1; } } @media (min-width:1280px) { .home-h1-1 { font-size: 3.25rem; } } .home-p-1 { margin-top: 1.5rem; max-width: 36rem; font-size: 1rem; line-height: 1.625; font-weight: 500; color: rgb(15, 23, 42); } @media (min-width:640px) { .home-p-1 { font-size: 1.125rem; line-height: 1.75rem; } } .home-div-5 { margin-top: 2.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } .home-a-1 { display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px; background-color: rgb(37, 99, 235); padding-left: 1.75rem; padding-right: 1.75rem; padding-top: .875rem; padding-bottom: .875rem; font-weight: 600; color: rgb(255, 255, 255); box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow); transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s; } .home-a-1:hover { background-color: rgb(29, 78, 216); } .home-a-2 { display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px; border-width: 1px; border-color: rgba(15,23,42,.1); padding-left: 1.5rem; padding-right: 1.5rem; padding-top: .875rem; padding-bottom: .875rem; font-weight: 600; color: rgb(15, 23, 42); transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s; } .home-a-2:hover { background-color: rgba(15,23,42,.05); } @media (max-width:639px) { .home-div-5 { flex-wrap: wrap; gap: .5rem; } .home-a-1, .home-a-2 { justify-content: center; gap: .35rem; min-width: 0; padding: .75rem .9rem; font-size: .8125rem; white-space: nowrap; } .home-a-1 { flex: 0 0 auto; } .home-a-2 { flex: 1 1 auto; } } .home-div-6 { margin-top: 1.5rem; display: flex; align-items: center; gap: .75rem; font-size: .875rem; line-height: 1.25rem; color: rgba(15,23,42,.55); } .home-div-7 { display: flex; } .home-rating-stars { gap: .2rem; color: #f59e0b; font-size: 1rem; line-height: 1; } .home-strong-1 { font-weight: 600; color: rgb(15, 23, 42); } .solutions-div-1 { position: relative; margin-left: auto; margin-right: auto; max-width: 1280px; padding-left: 1.25rem; padding-right: 1.25rem; } @media (min-width:640px) { .solutions-div-1 { padding-left: 2rem; padding-right: 2rem; } } .solutions-div-2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); -moz-column-gap: 1.5rem; column-gap: 1.5rem; row-gap: 1.5rem; border-radius: 1.5rem; background-color: hsla(0,0%,100%); padding: 1.5rem; --tw-shadow: 0 1px 2px rgba(15,23,42,.04),0 12px 32px -8px rgba(15,23,42,.1); --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color),0 12px 32px -8px var(--tw-shadow-color); } @media (max-width:639px) { .solutions-div-1 { padding-left: 1rem; padding-right: 1rem; } .solutions-div-2 { grid-template-columns: minmax(0,1fr); gap: 0; padding: .5rem 1rem; border-radius: 1.25rem; } .solutions-div-2 > div { align-items: center; gap: .875rem; min-width: 0; padding: 1rem 0; border-top: 1px solid rgba(15,23,42,.08); } .solutions-div-2 > div:first-child { border-top: 0; } .solutions-div-2 .solutions-span-1, .solutions-div-2 .solutions-span-2, .solutions-div-2 .solutions-span-3, .solutions-div-2 .solutions-span-4 { height: 3rem; width: 3rem; } .solutions-div-2 i { font-size: 1.35rem !important; } .solutions-p-1 { font-size: .9375rem; } .solutions-p-2 { font-size: .8rem; line-height: 1.5; } } @media (min-width:640px) { .solutions-div-2 { grid-template-columns: repeat(4,minmax(0,1fr)); padding: 1.75rem; } } @media (min-width:1024px) { .solutions-div-2 { -moz-column-gap: 2rem; column-gap: 2rem; background-color: hsla(0,0%,100%); padding: 2rem; } } .solutions-div-3 { display: flex; align-items: flex-start; gap: .75rem; } .solutions-span-1 { display: grid; height: 4rem; width: 4rem; flex-shrink: 0; place-items: center; border-radius: 9999px; background-color: rgba(37,99,235,.1); color: rgb(37, 99, 235); } .solutions-p-1 { font-size: 1rem; line-height: 1.375; font-weight: 600; color: rgb(15, 23, 42); } .solutions-p-2 { margin-top: .25rem; font-size: .9rem; line-height: 1.625; color: rgba(15,23,42,.8); } .solutions-div-4 { display: flex; align-items: flex-start; gap: .75rem; } @media (min-width:640px) { .solutions-div-4 { border-left-width: 1px; border-color: rgba(15,23,42,.1); padding-left: 1.5rem; } } @media (min-width:1024px) { .solutions-div-4 { padding-left: 2rem; } } .solutions-span-2 { display: grid; height: 4rem; width: 4rem; flex-shrink: 0; place-items: center; border-radius: 9999px; background-color: rgba(16,185,129,.1); color: rgb(16, 185, 129); } .solutions-i-1 { font-size: 1rem; line-height: 1.5rem; } .solutions-div-5 { display: flex; align-items: flex-start; gap: .75rem; border-top-width: 1px; border-color: rgba(15,23,42,.1); /*padding-top: 1.5rem;*/ } @media (min-width:640px) { .solutions-div-5 { border-left-width: 1px; border-top-width: 0; padding-left: 1.5rem; } } @media (min-width:1024px) { .solutions-div-5 { padding-left: 2rem; } } .solutions-span-3 { display: grid; height: 4rem; width: 4rem; flex-shrink: 0; place-items: center; border-radius: 9999px; background-color: rgba(139,92,246,.1); color: rgb(139, 92, 246); } .solutions-span-4 { display: grid; height: 4rem; width: 4rem; flex-shrink: 0; place-items: center; border-radius: 9999px; background-color: rgba(249,115,22,.1); color: rgb(249, 115, 22); } .solutions-div-7 { /*max-width: 42rem;*/ } .solutions-span-5 { font-size: .75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: rgb(37, 99, 235); } .solutions-h2-1 { font-family: Plus Jakarta Sans,Inter,sans-serif; font-size: 1.875rem; line-height: 1.1; font-weight: 800; letter-spacing: -.025em; margin-bottom:1.25rem; } @media (min-width:640px) { .solutions-h2-1 { font-size: 2.25rem; line-height: 2.5rem; } } @media (min-width:1024px) { .solutions-h2-1 { font-size: 3rem; line-height: 1; } } .solutions-p-3 { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.75rem; color: rgba(15,23,42,.8); } .solutions-p-10 { font-size: .75rem; line-height: 1rem; color: rgba(15,23,42,.4); } /* ================================================================= BUSINESS CHALLENGE — BEFORE / AFTER (premium redesign) ================================================================= */ .bc-section { background-color: rgb(255, 255, 255); padding: 2rem 0; } @media (min-width:1024px) { .bc-section { padding: 2rem 0; } } .bc-container { margin-left: auto; margin-right: auto; max-width: 1280px; padding-left: 1.25rem; padding-right: 1.25rem; } @media (min-width:640px) { .bc-container { padding-left: 2rem; padding-right: 2rem; } } /* --- Header --- */ .bc-header { margin-bottom: 3rem; text-align: center; } .bc-header .bc-sub { margin-left: auto; margin-right: auto; } .bc-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: .375rem 1rem; border-radius: 100px; background: rgba(37,99,235,.10); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgb(37, 99, 235); margin-bottom: 1.25rem; } .bc-eyebrow::before { content: ''; display: block; width: 6px; height: 6px; background: rgb(37, 99, 235); border-radius: 50%; } .bc-headline { font-family: Plus Jakarta Sans, Inter, sans-serif; font-size: 2rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; color: rgb(15, 23, 42); margin: 0 0 1.25rem; } @media (min-width:640px) { .bc-headline { font-size: 2.5rem; } } @media (min-width:1024px) { .bc-headline { font-size: 3rem; } } .bc-headline-em { font-style: normal; background: linear-gradient(135deg, #2563eb, #22d3ee); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .bc-sub { font-size: 1.2rem; line-height: 1.7; color: rgba(15, 23, 42, 0.80); /*max-width: 560px;*/ margin: 0; } /* --- Grid layout --- */ .bc-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: stretch; } @media (min-width:768px) { .bc-grid { grid-template-columns: 1fr 72px 1fr; gap: 0; } } /* --- Panels --- */ .bc-panel { border-radius: 1.5rem; padding: 2rem; } @media (min-width:640px) { .bc-panel { padding: 2.5rem; } } .bc-panel-before { background: rgb(248, 250, 252); border: 1.5px solid rgba(15, 23, 42, 0.08); } .bc-panel-after { background: rgb(15, 23, 42); border: 1.5px solid rgba(37, 99, 235, 0.3); } .bc-panel-label { display: flex; align-items: center; gap: 10px; /*font-size: 11px;*/ font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1.75rem; } .bc-label-before { color: rgba(15, 23, 42, 0.4); } .bc-label-after { color: rgba(34, 211, 238, 0.75); } .bc-label-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .bc-label-dot-before { background: rgba(15, 23, 42, 0.2); } .bc-label-dot-after { background: rgb(34, 211, 238); } .bc-panel-title { font-family: Plus Jakarta Sans, Inter, sans-serif; font-size: 1.2rem; font-weight: 700; line-height: 1.35; margin: 0 0 1.75rem; } .bc-panel-title-before { color: rgba(15, 23, 42, 0.8); } .bc-panel-title-after { color: rgb(241, 245, 249); } /* --- Items list --- */ .bc-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; } .bc-item { display: flex; gap: 14px; align-items: flex-start; } .bc-item-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .bc-item-icon-before { background: rgba(239, 68, 68, 0.1); color: rgb(239, 68, 68); } .bc-item-icon-after { background: rgba(16, 185, 129, 0.15); color: rgb(16, 185, 129); } .bc-item-text { /*font-size: 0.9375rem;*/ line-height: 1.55; font-weight: 500; } .bc-item-text-before { color: rgba(15, 23, 42, 0.8); } .bc-item-text-after { color: rgba(248, 250, 252, 0.85); } /* --- Divider (desktop only) --- */ .bc-divider { display: none; } @media (min-width:768px) { .bc-divider { display: flex; flex-direction: column; align-items: center; justify-content: center; } } .bc-divider-line { flex: 1; width: 1.5px; background: linear-gradient(to bottom, transparent, rgba(37, 99, 235, 0.25) 30%, rgba(37, 99, 235, 0.25) 70%, transparent); } .bc-arrow-badge { width: 44px; height: 44px; border-radius: 50%; background: rgb(37, 99, 235); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: rgb(255, 255, 255); } /* --- Metric strip --- */ .bc-metrics-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(15, 23, 42, 0.06); } @media (max-width:480px) { .bc-metrics-row { grid-template-columns: 1fr; } } .bc-metric { text-align: center; padding: 1.25rem 1rem; border-radius: 1rem; background: rgba(37, 99, 235, 0.04); border: 1px solid rgba(37, 99, 235, 0.1); } .bc-metric-num { font-family: Plus Jakarta Sans, Inter, sans-serif; font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; color: rgb(37, 99, 235); line-height: 1; margin: 0 0 4px; } .bc-metric-lbl { font-size: 1rem; font-weight: 600; color: rgba(15, 23, 42, 0.45); line-height: 1.4; margin: 0; } /* --- CTA row --- */ .bc-cta-row { margin-top: 2.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .bc-cta-btn { display: inline-flex; align-items: center; gap: 8px; background: rgb(37, 99, 235); color: rgb(255, 255, 255); font-size: 0.9375rem; font-weight: 700; padding: 0.875rem 1.75rem; border-radius: 999px; border: none; cursor: pointer; text-decoration: none; transition: background 0.15s ease; } .bc-cta-btn:hover { background: rgb(29, 78, 216); } .bc-cta-link { font-size: 0.9375rem; font-weight: 600; color: rgba(15, 23, 42, 0.5); text-decoration: none; transition: color 0.15s ease; } .bc-cta-link:hover { color: rgb(37, 99, 235); } .features-section-1 { position: relative; overflow: hidden; background-color: rgb(15, 23, 42); padding-top: 6rem; padding-bottom: 6rem; } @media (min-width:1024px) { .features-section-1 { padding-top: 8rem; padding-bottom: 8rem; } } .features-div-1 { position: absolute; right: 0; top: 0; height: 36rem; width: 36rem; transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); border-radius: 9999px; background-color: rgba(37,99,235,.2); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .features-div-2 { position: absolute; bottom: 0; left: 0; height: 30rem; width: 30rem; border-radius: 9999px; background-color: rgba(34,211,238,.1); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .features-span-1 { font-size: .75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: rgb(34, 211, 238); } .features-h2-1 { margin-top: .75rem; font-family: Plus Jakarta Sans,Inter,sans-serif; font-size: 1.875rem; line-height: 1.1; font-weight: 800; letter-spacing: -.025em; color: rgb(255, 255, 255); } @media (min-width:640px) { .features-h2-1 { font-size: 2.25rem; line-height: 2.5rem; } } @media (min-width:1024px) { .features-h2-1 { font-size: 3rem; line-height: 1; } } .features-p-1 { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.75rem; color: hsla(0,0%,100%,.55); } .features-div-3 { margin-top: 3.5rem; display: grid; gap: 1.25rem; } @media (min-width:1024px) { .features-div-3 { grid-template-columns: repeat(3,minmax(0,1fr)); } } .features-div-4 { border-radius: 1.5rem; padding: 1.75rem; } @media (min-width:1024px) { .features-div-4 { grid-column: span 2/span 2; } } .features-div-5 { margin-bottom: 1.25rem; display: flex; align-items: center; justify-content: space-between; } .features-p-2 { font-family: Plus Jakarta Sans,Inter,sans-serif; font-weight: 600; color: rgb(255, 255, 255); } .features-span-2 { border-radius: 9999px; background-color: rgba(16,185,129,.1); padding-left: .625rem; padding-right: .625rem; padding-top: .25rem; padding-bottom: .25rem; font-size: .75rem; line-height: 1rem; font-weight: 600; color: rgb(16, 185, 129); } .features-svg-1 { height: 10rem; width: 100%; } .features-div-6 { display: flex; flex-direction: column; border-radius: 1.5rem; padding: 1.75rem; } .features-p-3 { margin-bottom: 1.25rem; font-family: Plus Jakarta Sans,Inter,sans-serif; font-weight: 600; color: rgb(255, 255, 255); } .features-div-7 { display: flex; flex: 1 1 0%; align-items: flex-end; gap: .5rem; } .features-div-8 { flex: 1 1 0%; border-top-left-radius: .25rem; border-top-right-radius: .25rem; background-color: rgba(16,185,129,.3); } .features-div-9 { flex: 1 1 0%; border-top-left-radius: .25rem; border-top-right-radius: .25rem; background-color: rgba(16,185,129,.5); } .features-div-10 { flex: 1 1 0%; border-top-left-radius: .25rem; border-top-right-radius: .25rem; background-color: rgba(16,185,129,.7); } .features-div-11 { flex: 1 1 0%; border-top-left-radius: .25rem; border-top-right-radius: .25rem; background-color: rgb(16, 185, 129); } .features-div-12 { flex: 1 1 0%; border-top-left-radius: .25rem; border-top-right-radius: .25rem; background-color: rgba(16,185,129,.6); } .features-p-4 { margin-top: .75rem; font-size: .75rem; line-height: 1rem; color: hsla(0,0%,100%,.45); } .features-span-3 { font-weight: 600; color: rgb(255, 255, 255); } .features-div-13 { border-radius: 1.5rem; padding: 1.75rem; } .features-p-5 { margin-bottom: 1rem; font-family: Plus Jakarta Sans,Inter,sans-serif; font-weight: 600; color: rgb(255, 255, 255); } .features-ul-1 { font-size: .875rem; line-height: 1.25rem; } .features-li-1 { display: flex; justify-content: space-between; color: hsla(0,0%,100%,.7); } .features-p-6 { font-family: Plus Jakarta Sans,Inter,sans-serif; font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: rgb(255, 255, 255); } .features-span-4 { font-size: 1.125rem; line-height: 1.75rem; color: hsla(0,0%,100%,.4); } .features-div-14 { margin-top: 1rem; height: .375rem; overflow: hidden; border-radius: 9999px; background-color: hsla(0,0%,100%,.1); } .features-div-15 { height: 100%; border-radius: 9999px; background-color: rgb(34, 211, 238); } .features-p-7 { margin-top: .5rem; font-size: .75rem; line-height: 1rem; color: hsla(0,0%,100%,.4); } .features-div-16 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; border-radius: 1.5rem; padding: 1.75rem; } @media (min-width:1024px) { .features-div-16 { grid-column: span 2/span 2; } } .features-p-8 { font-size: .75rem; line-height: 1rem; color: hsla(0,0%,100%,.45); } .features-p-9 { margin-top: .25rem; font-family: Plus Jakarta Sans,Inter,sans-serif; font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: rgb(255, 255, 255); } .features-span-5 { font-size: .875rem; line-height: 1.25rem; color: rgb(16, 185, 129); } .industries-section-1 { padding-top: 2rem; padding-bottom: 2rem; } #industries > .home-div-19 { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 1.25rem; padding-right: 1.25rem; } #industries .solutions-div-7 { margin-left: auto; margin-right: auto; text-align: center; } #industries .solutions-span-5 { display: inline-flex; align-items: center; gap: 8px; padding: .375rem 1rem; border-radius: 100px; background: rgba(37,99,235,.10); font-size: .75rem; font-weight: 600; letter-spacing: .08em; margin-bottom:1.25rem; } #industries .solutions-span-5::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgb(37,99,235); } #implementation-process > .home-div-19 { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 1.25rem; padding-right: 1.25rem; } #implementation-process .solutions-div-7 { margin-left: auto; margin-right: auto; text-align: center; } #implementation-process .solutions-span-5 { display: inline-flex; align-items: center; gap: 8px; padding: .375rem 1rem; border-radius: 100px; background: rgba(37,99,235,.10); font-size: .75rem; font-weight: 600; letter-spacing: .08em; margin-bottom: 1.25rem; } #implementation-process .solutions-span-5::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgb(37,99,235); } @media (min-width:640px) { #industries > .home-div-19, #implementation-process > .home-div-19 { padding-left: 2rem; padding-right: 2rem; } } @media (min-width:1024px) { .industries-section-1 { padding-top: 2rem; padding-bottom: 2rem; } } .industries-div-1 { margin-top: 3.5rem; display: grid; gap: 1.1rem; } @media (min-width:640px) { .industries-div-1 { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (min-width:1024px) { .industries-div-1 { grid-template-columns: repeat(4,minmax(0,1fr)); } } .industries-a-1 { position: relative; isolation: isolate; overflow: hidden; min-height: 285px; border: 1px solid rgba(148,163,184,.22); border-radius: 1.5rem; background: linear-gradient(145deg,#f8fbff,#eef5ff); /*box-shadow: inset 0 1px 0 #fff,0 18px 45px -28px rgba(15,23,42,.38);*/ transition: transform .45s cubic-bezier(.16,1,.3,1),border-color .35s ease,box-shadow .45s ease; } .industries-a-1::before { content: "↗"; position: absolute; z-index: 3; top: 1rem; right: 1rem; display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid rgba(37,99,235,.14); border-radius: 50%; background: rgba(255,255,255,.82); color: #2563eb; font-size: .9rem; box-shadow: 0 8px 22px -10px rgba(37,99,235,.45); backdrop-filter: blur(10px); transition: transform .35s ease,background .35s ease; } .industries-a-1:hover { transform: translateY(-7px); border-color: rgba(37,99,235,.28); box-shadow: inset 0 1px 0 #fff,0 28px 58px -30px rgba(37,99,235,.42); } .industries-a-1:hover::before { transform: translate(2px,-2px); background: #fff; } .industries-a-1::after { content: ""; position: absolute; z-index: 0; inset: 0; background: radial-gradient(circle at 82% 12%,rgba(34,211,238,.13),transparent 32%),linear-gradient(to top,rgba(255,255,255,.79) 0 25%,rgba(255,255,255,.62) 37%,transparent 69%); transition: background .35s ease; } .industries-img-1 { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .35s ease,transform .55s cubic-bezier(.16,1,.3,1); } .industries-a-1:hover .industries-img-1 { filter: saturate(1.08) contrast(1.03); transform: scale(1.035); } .industries-div-3 { position: absolute; z-index: 2; inset: auto 0 0; padding: 1.15rem 1.25rem 1.35rem; color: #0f172a; } .industries-icon-1 { display: grid; width: 2.2rem; height: 2.2rem; margin-bottom: .65rem; place-items: center; border: 1px solid rgba(37,99,235,.14); border-radius: .75rem; background: linear-gradient(145deg,rgba(255,255,255,.98),rgba(239,246,255,.92)); color: #2563eb; font-size: .85rem; box-shadow: 0 8px 20px -12px rgba(37,99,235,.65); } .industries-p-1 { font-family: Plus Jakarta Sans,Inter,sans-serif; font-size: 1.08rem; font-weight: 750; line-height: 1.25; color: #0f172a; letter-spacing: -.02em; } .industries-p-2 { margin-top: .35rem; font-size: .9rem; line-height: 1.5; /*color: #64748b;*/ } @media (max-width:639px) { .industries-div-1 { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; margin-top: 2.25rem; } .industries-a-1 { min-height: 225px; border-radius: 1.15rem; } .industries-a-1::before { top: .65rem; right: .65rem; width: 1.65rem; height: 1.65rem; font-size: .72rem; } .industries-div-3 { padding: .85rem .8rem 1rem; } .industries-icon-1 { width: 1.9rem; height: 1.9rem; margin-bottom: .5rem; font-size: .72rem; } .industries-p-1 { font-size: .88rem; overflow-wrap: anywhere; } .industries-p-2 { font-size: .68rem; line-height: 1.42; } } .resources-div-1 { margin-top: 4rem; display: flex; flex-direction: column; align-items: center; } .resources-div-2 { border-radius: 1rem; padding-left: 2rem; padding-right: 2rem; padding-top: .75rem; padding-bottom: .75rem; font-size: .875rem; line-height: 1.25rem; font-weight: 600; color: rgb(15, 23, 42); --tw-shadow: 0 1px 2px rgba(15,23,42,.04),0 12px 32px -8px rgba(15,23,42,.1); --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color),0 12px 32px -8px var(--tw-shadow-color); } .resources-div-3 { height: 2rem; width: 1px; background-image: linear-gradient(to bottom,var(--tw-gradient-stops)); --tw-gradient-from: rgba(37,99,235,.4) var(--tw-gradient-from-position); --tw-gradient-to: rgba(37,99,235,.1) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to); } .resources-div-4 { border-radius: 1rem; background-color: rgb(15, 23, 42); padding-left: 2rem; padding-right: 2rem; padding-top: .875rem; padding-bottom: .875rem; font-family: Plus Jakarta Sans,Inter,sans-serif; font-weight: 700; color: rgb(255, 255, 255); box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow); } .resources-div-5 { display: flex; max-width: 48rem; flex-wrap: wrap; justify-content: center; gap: .75rem; } .resources-span-1 { border-radius: 9999px; border-width: 1px; border-color: rgba(37,99,235,.2); background-color: rgba(37,99,235,.05); padding-left: 1rem; padding-right: 1rem; padding-top: .5rem; padding-bottom: .5rem; font-size: .875rem; line-height: 1.25rem; font-weight: 600; color: rgb(37, 99, 235); } .resources-div-6 { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; } .resources-span-2 { border-radius: 1rem; padding-left: 1.5rem; padding-right: 1.5rem; padding-top: .75rem; padding-bottom: .75rem; font-size: .875rem; line-height: 1.25rem; font-weight: 600; color: rgb(15, 23, 42); --tw-shadow: 0 1px 2px rgba(15,23,42,.04),0 12px 32px -8px rgba(15,23,42,.1); --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color),0 12px 32px -8px var(--tw-shadow-color); } .home-section-3 { overflow: hidden; background-color: rgb(255, 255, 255); padding-top: 6rem; padding-bottom: 6rem; } @media (min-width:1024px) { .home-section-3 { padding-top: 8rem; padding-bottom: 8rem; } } .home-div-24 { margin-left: auto; margin-right: auto; display: grid; max-width: 1280px; align-items: center; gap: 4rem; padding-left: 1.25rem; padding-right: 1.25rem; } @media (min-width:640px) { .home-div-24 { padding-left: 2rem; padding-right: 2rem; } } @media (min-width:1024px) { .home-div-24 { grid-template-columns: repeat(2,minmax(0,1fr)); } } .home-div-25 { order: 2; } @media (min-width:1024px) { .home-div-25 { order: 1; } } .home-p-7 { margin-top: 1.25rem; max-width: 28rem; font-size: 1.125rem; line-height: 1.75rem; color: rgba(15,23,42,.6); } .home-div-26 { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .625rem; } .home-div-27 { position: relative; order: 1; display: flex; justify-content: center; } @media (min-width:1024px) { .home-div-27 { order: 2; } } .home-div-28 { position: absolute; height: 18rem; width: 18rem; border-radius: 9999px; background-color: rgba(37,99,235,.1); --tw-blur: blur(64px); } .home-div-29 { position: relative; height: 540px; width: 260px; border-radius: 2.5rem; background-color: rgb(15, 23, 42); padding: .625rem; } .home-div-30 { position: relative; height: 100%; width: 100%; overflow: hidden; border-radius: 2rem; background-color: rgb(255, 255, 255); } .home-div-31 { position: absolute; left: 50%; top: .5rem; height: 1.25rem; width: 5rem; transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); border-radius: 9999px; background-color: rgb(15, 23, 42); } .m-screen-0-div-1 { padding-left: 1rem; padding-right: 1rem; padding-top: 2.5rem; } .m-screen-0-p-1 { margin-top: .25rem; font-family: Plus Jakarta Sans,Inter,sans-serif; font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; } .m-screen-0-div-2 { margin-top: 1rem; } .m-screen-0-div-3 { border-radius: .75rem; background-color: rgb(248, 250, 252); padding: .75rem; } .m-screen-0-p-2 { font-size: .75rem; line-height: 1rem; font-weight: 600; } .m-screen-0-p-3 { font-size: 11px; color: rgba(15,23,42,.4); } .m-screen-1-div-1 { display: flex; justify-content: space-between; border-radius: .75rem; background-color: rgb(248, 250, 252); padding: .75rem; font-size: .75rem; line-height: 1rem; } .m-screen-1-span-1 { font-weight: 600; } .m-screen-1-span-2 { font-weight: 600; color: rgb(16, 185, 129); } .m-screen-2-svg-1 { margin-top: .75rem; height: 4rem; width: 100%; } .m-screen-3-div-1 { margin-top: 1rem; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .625rem; } .m-screen-3-p-1 { font-size: .875rem; line-height: 1.25rem; font-weight: 700; } .home-div-32 { position: absolute; left: -.5rem; top: 2.5rem; width: 11rem; border-radius: 1rem; padding: .75rem; font-size: .75rem; line-height: 1rem; --tw-shadow: 0 1px 2px rgba(15,23,42,.04),0 12px 32px -8px rgba(15,23,42,.1); --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color),0 12px 32px -8px var(--tw-shadow-color); } .home-p-8 { color: rgba(15,23,42,.4); } .home-div-33 { position: absolute; right: -.5rem; bottom: 4rem; width: 10rem; border-radius: 1rem; padding: .75rem; font-size: .75rem; line-height: 1rem; --tw-shadow: 0 1px 2px rgba(15,23,42,.04),0 12px 32px -8px rgba(15,23,42,.1); --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color),0 12px 32px -8px var(--tw-shadow-color); } .timeline-div-1 { position: relative; margin-top: 4rem; } .timeline-div-2 { position: absolute; left: 5%; right: 5%; top: 2rem; display: none; height: 3px; overflow: hidden; border-radius: 999px; box-shadow: 0 1px 0 rgba(255,255,255,.9), 0 6px 16px -8px rgba(37,99,235,.45); } @media (min-width:1024px) { .timeline-div-2 { display: block; } } .timeline-fill-div-1 { height: 100%; background-image: linear-gradient(to right,var(--tw-gradient-stops)); --tw-gradient-from: #2563eb var(--tw-gradient-from-position); --tw-gradient-to: #22d3ee var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to); } .timeline-div-3 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .875rem; } @media (min-width:640px) { .timeline-div-3 { grid-template-columns: repeat(4,minmax(0,1fr)); } } @media (min-width:1024px) { .timeline-div-3 { grid-template-columns: repeat(7,minmax(0,1fr)); gap: .75rem; } } .timeline-div-4 { position: relative; z-index: 1; min-width: 0; padding: 1.25rem .75rem 1.1rem; overflow: hidden; border: 1px solid rgba(255,255,255,.78); border-radius: 1.15rem; background: radial-gradient(circle at 50% 0%, rgba(37,99,235,.11), transparent 48%), rgba(255,255,255,.68); text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 18px 38px -30px rgba(15,23,42,.55); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .3s ease; } .timeline-div-4::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #2563eb, #22d3ee); opacity: .8; } .timeline-div-4:hover { transform: translateY(-5px); border-color: rgba(37,99,235,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 24px 45px -28px rgba(37,99,235,.42); } .timeline-div-5 { margin-left: auto; margin-right: auto; display: grid; height: 3.5rem; width: 3.5rem; place-items: center; border-radius: 9999px; border: 5px solid rgba(255,255,255,.85); background: linear-gradient(135deg, #2563eb, #22d3ee); font-family: Plus Jakarta Sans,Inter,sans-serif; font-size: .9rem; font-weight: 800; color: #fff; box-shadow: 0 10px 22px -10px rgba(37,99,235,.72), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .3s cubic-bezier(.16,1,.3,1); } .timeline-div-4:hover .timeline-div-5 { transform: scale(1.08); } .timeline-p-1 { margin-top: .9rem; font-family: Plus Jakarta Sans,Inter,sans-serif; font-size: .9rem; line-height: 1.25rem; font-weight: 750; color: #0f172a; } .timeline-p-2 { margin-top: .35rem; font-size: .7rem; line-height: 1.45; color: rgba(15,23,42,.62); } @media (max-width:639px) { .timeline-div-1 { margin-top: 2.5rem; } .timeline-div-3 { grid-template-columns: 1fr; gap: .75rem; } .timeline-div-4 { display: grid; grid-template-columns: 3rem 1fr; column-gap: .875rem; padding: 1rem; text-align: left; } .timeline-div-5 { grid-row: span 2; width: 3rem; height: 3rem; margin: 0; } .timeline-p-1 { align-self: end; margin-top: 0; } .timeline-p-2 { align-self: start; } } .success-div-1 { margin-left: auto; margin-right: auto; max-width: 64rem; padding-left: 1.25rem; padding-right: 1.25rem; } @media (min-width:640px) { .success-div-1 { padding-left: 2rem; padding-right: 2rem; } } .success-div-2 { position: relative; margin-top: 3.5rem; overflow: hidden; border-radius: 1.5rem; border-width: 1px; background-color: rgb(248, 250, 252); } .t-track-div-1 { display: grid; width: 100%; flex-shrink: 0; align-items: center; gap: 2rem; padding: 2.25rem; } @media (min-width:640px) { .t-track-div-1 { grid-template-columns: repeat(3,minmax(0,1fr)); padding: 3rem; } } @media (min-width:640px) { .t-track-div-2 { grid-column: span 2/span 2; } } .t-track-svg-1 { margin-bottom: 1rem; color: rgba(37,99,235,.3); } .t-track-p-1 { font-size: 1.125rem; line-height: 1.625; color: rgb(15, 23, 42); } @media (min-width:640px) { .t-track-p-1 { font-size: 1.25rem; line-height: 1.75rem; } } .t-track-div-3 { margin-top: 1.5rem; display: flex; align-items: center; gap: .75rem; } .t-track-span-1 { display: grid; height: 2.75rem; width: 2.75rem; place-items: center; border-radius: 9999px; background-image: linear-gradient(to bottom right,var(--tw-gradient-stops)); --tw-gradient-from: #2563eb var(--tw-gradient-from-position); --tw-gradient-to: #22d3ee var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to); font-size: .875rem; line-height: 1.25rem; font-weight: 600; color: rgb(255, 255, 255); } .t-track-p-2 { font-size: .875rem; line-height: 1.25rem; font-weight: 600; } .t-track-p-3 { font-size: .75rem; line-height: 1rem; color: rgba(15,23,42,.45); } .t-track-div-4 { border-radius: 1rem; background-color: rgb(255, 255, 255); padding: 1.5rem; text-align: center; --tw-shadow: 0 1px 2px rgba(15,23,42,.04),0 12px 32px -8px rgba(15,23,42,.1); --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color),0 12px 32px -8px var(--tw-shadow-color); } .t-track-p-4 { font-size: .75rem; line-height: 1rem; text-transform: uppercase; letter-spacing: .025em; color: rgba(15,23,42,.45); } .t-track-p-5 { margin-top: .5rem; font-family: Plus Jakarta Sans,Inter,sans-serif; font-size: 2.25rem; line-height: 2.5rem; font-weight: 800; color: rgb(37, 99, 235); } .t-track-p-6 { margin-top: .25rem; font-size: .875rem; line-height: 1.25rem; color: rgba(15,23,42,.55); } .t-track-span-2 { display: grid; height: 2.75rem; width: 2.75rem; place-items: center; border-radius: 9999px; background-image: linear-gradient(to bottom right,var(--tw-gradient-stops)); --tw-gradient-from: #10b981 var(--tw-gradient-from-position); --tw-gradient-to: #22d3ee var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to); font-size: .875rem; line-height: 1.25rem; font-weight: 600; color: rgb(255, 255, 255); } .t-track-p-7 { margin-top: .5rem; font-family: Plus Jakarta Sans,Inter,sans-serif; font-size: 2.25rem; line-height: 2.5rem; font-weight: 800; color: rgb(16, 185, 129); } .t-track-span-3 { display: grid; height: 2.75rem; width: 2.75rem; place-items: center; border-radius: 9999px; background-image: linear-gradient(to bottom right,var(--tw-gradient-stops)); --tw-gradient-from: #0f172a var(--tw-gradient-from-position); --tw-gradient-to: #2563eb var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to); font-size: .875rem; line-height: 1.25rem; font-weight: 600; color: rgb(255, 255, 255); } .success-div-3 { display: flex; align-items: center; justify-content: center; gap: .5rem; padding-bottom: 1.75rem; } .home-div-34 { margin-top: 3rem; display: grid; gap: 2rem; border-radius: 1.5rem; border-width: 1px; background-color: rgb(248, 250, 252); padding: 2rem; } @media (min-width:640px) { .home-div-34 { padding: 2.5rem; } } @media (min-width:1024px) { .home-div-34 { grid-template-columns: repeat(2,minmax(0,1fr)); } } .roi-form-label-1 { margin-bottom: .5rem; display: flex; justify-content: space-between; font-size: .875rem; line-height: 1.25rem; font-weight: 600; color: rgb(15, 23, 42); } .roi-users-input-1 { width: 100%; accent-color: #2563eb; } .home-div-35 { display: grid; grid-template-columns: repeat(1,minmax(0,1fr)); gap: 1rem; } .home-div-36 { border-radius: 1rem; background-color: rgb(255, 255, 255); padding: 1.5rem; --tw-shadow: 0 1px 2px rgba(15,23,42,.04),0 12px 32px -8px rgba(15,23,42,.1); --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color),0 12px 32px -8px var(--tw-shadow-color); } .roi-savings-p-1 { margin-top: .25rem; font-family: Plus Jakarta Sans,Inter,sans-serif; font-size: 1.875rem; line-height: 2.25rem; font-weight: 800; color: rgb(15, 23, 42); } .roi-roi-p-1 { margin-top: .25rem; font-family: Plus Jakarta Sans,Inter,sans-serif; font-size: 1.875rem; line-height: 2.25rem; font-weight: 800; color: rgb(37, 99, 235); } .roi-productivity-p-1 { margin-top: .25rem; font-family: Plus Jakarta Sans,Inter,sans-serif; font-size: 1.875rem; line-height: 2.25rem; font-weight: 800; color: rgb(16, 185, 129); } .home-p-9 { margin-top: 1rem; text-align: center; font-size: .75rem; line-height: 1rem; color: rgba(15,23,42,.35); } .faq-section-div-1 { margin-left: auto; margin-right: auto; max-width: 48rem; padding-left: 1.25rem; padding-right: 1.25rem; } #faq-section .timeline-div-4 { display: block; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; text-align: center; } #faq-section .timeline-div-4::before { display: none; } #faq-section .timeline-div-4:hover { transform: none; border-color: transparent; box-shadow: none; } #faq-section .solutions-span-5 { display: inline-flex; align-items: center; gap: 8px; padding: .375rem 1rem; border-radius: 100px; background: rgba(37,99,235,.10); font-size: .75rem; font-weight: 600; letter-spacing: .08em; } #faq-section .solutions-span-5::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgb(37,99,235); } @media (min-width:640px) { .faq-section-div-1 { padding-left: 2rem; padding-right: 2rem; } } .faq-section-h2-1 { margin-top: .75rem; font-family: Plus Jakarta Sans,Inter,sans-serif; font-size: 1.875rem; line-height: 1.1; font-weight: 800; letter-spacing: -.025em; } @media (min-width:640px) { .faq-section-h2-1 { font-size: 2.25rem; line-height: 2.5rem; } } .faq-div-1 { margin-top: 3rem; } .faq-div-2 { overflow: hidden; border-radius: 1rem; border-width: 1px; background-color: rgb(255, 255, 255); } .faq-button-1 { display: flex; width: 100%; align-items: center; justify-content: space-between; padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 1.25rem; padding-bottom: 1.25rem; text-align: left; font-weight: 600; font-size: 1.2rem; } .faq-span-1 { margin-left: 1rem; display: grid; height: 1.75rem; width: 1.75rem; flex-shrink: 0; place-items: center; border-radius: 9999px; background-color: rgba(15,23,42,.05); } .faq-p-1 { padding-left: 1.5rem; padding-right: 1.5rem; padding-bottom: 1.25rem; line-height: 1.625; color: rgba(15,23,42,.8); } .demo-section-1 { padding: 2rem 1.25rem; } @media (min-width:1024px) { .demo-section-1 { padding-top: 2rem; padding-bottom: 2rem; } } .demo-div-1 { position: relative; z-index: 1; overflow: hidden; margin-left: auto; margin-right: auto; max-width: 1280px; padding: 4.5rem 2rem; border: 1px solid rgba(255,255,255,.16); border-radius: 2rem; background: radial-gradient(circle at 10% 0%, rgba(34,211,238,.18), transparent 34%), radial-gradient(circle at 90% 100%, rgba(37,99,235,.26), transparent 38%), rgba(255,255,255,.055); text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 35px 80px -45px rgba(0,0,0,.8); backdrop-filter: blur(24px) saturate(145%); -webkit-backdrop-filter: blur(24px) saturate(145%); } .demo-div-1::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,.10), transparent 28%), repeating-linear-gradient(90deg, transparent 0 54px, rgba(255,255,255,.018) 55px); } @media (min-width:640px) { .demo-div-1 { padding-left: 3rem; padding-right: 3rem; } } .demo-h2-1 { font-family: Plus Jakarta Sans,Inter,sans-serif; font-size: 1.875rem; line-height: 1.05; font-weight: 800; letter-spacing: -.025em; color: rgb(255, 255, 255); } @media (min-width:640px) { .demo-h2-1 { font-size: 2.25rem; line-height: 2.5rem; } } @media (min-width:1024px) { .demo-h2-1 { font-size: 3.75rem; line-height: 1; } } .demo-p-1 { margin-left: auto; margin-right: auto; margin-top: 1.5rem; max-width: 36rem; font-size: 1.125rem; line-height: 1.75rem; color: hsla(0,0%,100%,.6); } .demo-div-2 { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; } .demo-a-1 { display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px; background-color: rgb(255, 255, 255); padding-left: 2rem; padding-right: 2rem; padding-top: .875rem; padding-bottom: .875rem; font-weight: 600; color: rgb(15, 23, 42); box-shadow: 0 16px 32px -16px rgba(34,211,238,.65), inset 0 1px 0 rgba(255,255,255,.8); --tw-shadow: 0 1px 2px rgba(15,23,42,.04),0 12px 32px -8px rgba(15,23,42,.1); --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color),0 12px 32px -8px var(--tw-shadow-color); transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s; } .demo-a-1:hover { background-color: rgb(34, 211, 238); transform: translateY(-2px); } .demo-a-2 { display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px; border-width: 1px; border-color: hsla(0,0%,100%,.28); background: rgba(255,255,255,.06); padding-left: 2rem; padding-right: 2rem; padding-top: .875rem; padding-bottom: .875rem; font-weight: 600; color: rgb(255, 255, 255); transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s; } .demo-a-2:hover { background-color: hsla(0,0%,100%,.13); border-color: hsla(0,0%,100%,.45); transform: translateY(-2px); } .demo-div-3 { margin-top: 3.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; -moz-column-gap: 2.5rem; column-gap: 2.5rem; row-gap: 1rem; font-size: .875rem; line-height: 1.25rem; color: hsla(0,0%,100%,.62); } .demo-span-1 { height: .25rem; width: .25rem; border-radius: 9999px; background-color: rgb(34,211,238); box-shadow: 0 0 10px rgba(34,211,238,.7); } @media (max-width:639px) { .demo-section-1 { padding: 2rem 1rem; } .demo-div-1 { padding: 3rem 1.25rem; border-radius: 1.5rem; } .demo-div-2 { flex-direction: column; gap: .75rem; } .demo-a-1, .demo-a-2 { width: 100%; justify-content: center; } .demo-div-3 { margin-top: 2.25rem; flex-direction: column; gap: .65rem; } .demo-span-1 { display: none; } } .contact-footer-1 { background-color: rgb(15, 23, 42); padding: 5rem 1.25rem 2.5rem; color: rgb(255, 255, 255); } .contact-footer-1 > .home-div-19 { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; } .contact-div-1 { display: grid; gap: 2.5rem; } @media (min-width:640px) { .contact-footer-1 { padding-left: 2rem; padding-right: 2rem; } .contact-div-1 { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (min-width:1024px) { .contact-div-1 { grid-template-columns: 1fr repeat(3,minmax(0,1fr)); gap: 2rem; } } .contact-div-2 { min-width: 0; } .contact-span-1 { display: grid; height: 2.25rem; width: 2.25rem; place-items: center; border-radius: .75rem; background-image: linear-gradient(to bottom right,var(--tw-gradient-stops)); --tw-gradient-from: #2563eb var(--tw-gradient-from-position); --tw-gradient-to: #22d3ee var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to); font-size: .875rem; line-height: 1.25rem; font-weight: 700; color: rgb(255, 255, 255); } .contact-span-2 { font-family: Plus Jakarta Sans,Inter,sans-serif; font-size: 1rem; line-height: 1.5rem; font-weight: 800; } .contact-p-1 { margin-top: 1rem; max-width: 20rem; font-size: .875rem; line-height: 1.625; color: hsla(0,0%,100%,.58); } .contact-div-3 { margin-top: 1.5rem; display: flex; gap: .75rem; } .contact-a-1 { display: grid; height: 2.25rem; width: 2.25rem; place-items: center; border-radius: 9999px; background-color: hsla(0,0%,100%,.05); transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s; } .contact-a-1:hover { background-color: hsla(0,0%,100%,.1); } .contact-p-2 { font-size: .875rem; line-height: 1.25rem; font-weight: 600; color: hsla(0,0%,100%,.8); } .contact-ul-1 { margin-top: 1rem; font-size: .875rem; line-height: 1.25rem; color: hsla(0,0%,100%,.58); } .contact-a-2 { transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s; } .contact-a-2:hover { color: rgb(255, 255, 255); } .blog-li-1 { padding-top: .25rem; color: hsla(0,0%,100%,.7); } .blog-li-2 { color: hsla(0,0%,100%,.7); } .contact-div-4 { margin-top: 3.5rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: .75rem; border-top-width: 1px; border-color: hsla(0,0%,100%,.1); padding-top: 2rem; font-size: .75rem; line-height: 1rem; color: hsla(0,0%,100%,.35); text-align: center; } @media (min-width:640px) { .contact-div-4 { flex-direction: row; } } .contact-div-5 { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; } @media (max-width:639px) { .contact-footer-1 { padding: 3.5rem 1rem 2rem; } .contact-div-1 { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem 1rem; } .contact-div-2 { grid-column: 1 / -1; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,.09); } .contact-p-1 { max-width: 100%; } .contact-p-2, .contact-ul-1 { font-size: .8rem; } .contact-ul-1 { line-height: 1.4; overflow-wrap: anywhere; } .contact-div-4 { align-items: center; margin-top: 2.5rem; padding-top: 1.5rem; line-height: 1.5; } .contact-div-5 { gap: .75rem 1.25rem; } } .contact-a-3 { transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s; } .contact-a-3:hover { color: hsla(0,0%,100%,.6); } /* ================================================================= SOLUTIONS SECTION — MODULAR HUB REDESIGN ================================================================= */ /* ── Section wrapper ── */ .sol-section { position: relative; padding: 2rem 1.5rem 2rem; background: #FFFFFF; /* overflow: hidden removed — it breaks position:sticky on .sol-sidebar and can block pointer events on buttons in some browsers */ overflow: visible; } /* Dot-grid texture — signature decorative element */ .sol-section::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(37,99,235,0.07) 1.5px, transparent 1.5px); background-size: 28px 28px; pointer-events: none; } .sol-container { position: relative; z-index: 1; max-width: 1280px; margin-left: auto; margin-right: auto; } /* ── Header ── */ .sol-header { text-align: center; /*max-width: 680px;*/ margin: 0 auto 4rem; } .sol-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); padding: 0.375rem 1rem; background: rgba(37,99,235,0.10); border-radius: 100px; margin-bottom: 1.25rem; } .sol-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); } .sol-headline { font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; color: var(--ink); margin-bottom: 1.25rem; } .sol-headline-em { font-style: normal; background: linear-gradient(135deg, var(--primary), var(--cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .sol-subtext { font-size: 1.2rem; line-height: 1.75; color: rgba(15,23,42,0.80); } /* ── Two-column layout ── */ .sol-body { display: grid; grid-template-columns: 288px 1fr; gap: 1.75rem; align-items: start; } @media (max-width: 900px) { .sol-body { grid-template-columns: 1fr; } } @media (max-width: 768px) { #solutions.sol-section { padding: 4rem 1rem; } #solutions .sol-header { margin-bottom: 2rem; } #solutions .sol-subtext { font-size: 1rem; line-height: 1.65; } #solutions .sol-sidebar { position: relative; z-index: 5; top: auto; display: flex; gap: .5rem; width: calc(100% + 2rem); margin-left: -1rem; padding: .5rem 1rem .75rem; overflow-x: auto; border: 0; border-radius: 0; background: transparent; scrollbar-width: none; scroll-snap-type: x proximity; touch-action: pan-x pan-y; pointer-events: auto; -webkit-overflow-scrolling: touch; } #solutions .sol-sidebar::-webkit-scrollbar { display: none; } #solutions .sol-module-btn { position: relative; z-index: 10; flex: 0 0 auto; width: auto; min-height: 44px; gap: .5rem; padding: .55rem .85rem; border: 1px solid rgba(15,23,42,.09); border-radius: 999px; background: rgba(255,255,255,.78); scroll-snap-align: start; white-space: nowrap; touch-action: manipulation; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: rgba(37,99,235,0.15); user-select: none; -webkit-user-select: none; } #solutions .sol-module-btn.active { color: #fff; background: var(--primary); border-color: var(--primary); box-shadow: 0 8px 22px -12px rgba(37,99,235,.7); } #solutions .sol-mod-icon { width: 28px; height: 28px; border-radius: 50%; } #solutions .sol-mod-icon svg { width: 15px; height: 15px; } #solutions .sol-module-btn.active .sol-mod-icon { color: #fff; background: rgba(255,255,255,.18); } #solutions .sol-module-btn.active .sol-mod-name { color: #fff; } #solutions .sol-mod-sub, #solutions .sol-mod-arrow { display: none; } #solutions .sol-mod-name { font-size: .8rem; overflow: visible; } #solutions .sol-panel { min-height: 0; border-radius: 1.25rem; box-shadow: 0 18px 45px -32px rgba(15,23,42,.35); } #solutions .sol-tab-content { padding: 1.25rem; } #solutions .sol-panel-head { gap: .875rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; } #solutions .sol-panel-icon { width: 44px; height: 44px; border-radius: 12px; } #solutions .sol-panel-title { font-size: 1.2rem; } #solutions .sol-panel-tagline { font-size: .84rem; line-height: 1.55; } #solutions .sol-stats { grid-template-columns: repeat(3, minmax(0,1fr)); gap: .5rem; margin-bottom: 1.25rem; } #solutions .sol-stat { padding: .85rem .4rem; border-radius: .8rem; } #solutions .sol-stat-num { font-size: 1.35rem; } #solutions .sol-stat-lbl { font-size: .62rem; } #solutions .sol-features { grid-template-columns: 1fr; margin-bottom: 0; } #solutions .sol-mockup { display: none; } } /* ── Sidebar ── */ .sol-sidebar { background: var(--alt); border: 1px solid rgba(15,23,42,0.08); border-radius: 1.5rem; padding: 0.5rem; position: sticky; top: 5.5rem; z-index: 2; /* ensure buttons are above any decorative overlays */ } .sol-module-btn { display: flex; align-items: center; gap: 0.875rem; width: 100%; padding: 0.9375rem 1rem; border-radius: 1rem; border: none; background: transparent; cursor: pointer; text-align: left; transition: background 0.2s ease; user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: rgba(37,99,235,0.08); } .sol-module-btn:hover { background: rgba(37,99,235,0.05); } .sol-module-btn.active { background: #FFFFFF; box-shadow: 0 2px 14px rgba(15,23,42,0.08), 0 0 0 1px rgba(15,23,42,0.08); } .sol-mod-icon { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; transition: transform 0.25s cubic-bezier(.16,1,.3,1); } .sol-module-btn.active .sol-mod-icon { transform: scale(1.06); } .sol-mod-name { font-family: 'Plus Jakarta Sans', Inter, sans-serif; /*font-size: 0.9rem;*/ font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sol-mod-sub { font-size: 0.9rem; color: rgba(15,23,42); margin-top: 2px; } .sol-mod-arrow { margin-left: auto; flex-shrink: 0; color: var(--primary); opacity: 0; transform: translateX(-4px); transition: opacity 0.2s, transform 0.2s; } .sol-module-btn.active .sol-mod-arrow { opacity: 1; transform: translateX(0); } /* Module icon accent colours */ .ic-finance { background: rgba(37,99,235,0.10); color: #2563EB; } .ic-inventory { background: rgba(16,185,129,0.10); color: #10B981; } .ic-sales { background: rgba(139,92,246,0.10); color: #8B5CF6; } .ic-production { background: rgba(34,211,238,0.10); color: #22D3EE; } .ic-reporting { background: rgba(245,158,11,0.10); color: #F59E0B; } .ic-branch { background: rgba(239,68,68,0.10); color: #EF4444; } /* ── Content Panel ── */ .sol-panel { background: #FFFFFF; border: 1px solid rgba(15,23,42,0.08); border-radius: 1.5rem; overflow: hidden; min-height: 540px; } .sol-tab-content { display: none; padding: 2.25rem; } .sol-tab-content.active { display: block; animation: solTabIn 0.38s cubic-bezier(.16,1,.3,1); } @keyframes solTabIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* Panel head */ .sol-panel-head { display: flex; align-items: flex-start; gap: 1.25rem; padding-bottom: 1.75rem; margin-bottom: 1.75rem; border-bottom: 1px solid rgba(15,23,42,0.08); } .sol-panel-icon { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; flex-shrink: 0; } .sol-panel-title { font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.025em; color: var(--ink); margin-bottom: 0.375rem; } .sol-panel-tagline { /*font-size: 0.9375rem;*/ line-height: 1.65; color: rgba(15,23,42,0.80); } /* KPI stats */ .sol-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.875rem; margin-bottom: 1.625rem; } .sol-stat { background: var(--alt); border-radius: 1rem; padding: 1.125rem; text-align: center; } .sol-stat-num { font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: 1.875rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin-bottom: 0.375rem; } .sol-stat-lbl { /*font-size: 0.72rem;*/ color: rgba(15,23,42,0.80); line-height: 1.45; } /* Feature checklist */ .sol-features { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; margin-bottom: 1.625rem; } .sol-feat { display: flex; align-items: flex-start; gap: 0.5625rem; /*font-size: 0.875rem;*/ color: rgba(15,23,42,0.80); line-height: 1.5; } .sol-feat-check { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; } /* Premium glass dashboard mockup */ .sol-mockup { position: relative; isolation: isolate; overflow: hidden; border: 1px solid rgba(255,255,255,0.18); border-radius: 1.25rem; padding: 1.25rem; background: radial-gradient(circle at 8% 0%, rgba(34,211,238,0.18), transparent 34%), radial-gradient(circle at 92% 100%, rgba(37,99,235,0.16), transparent 40%), linear-gradient(145deg, rgba(255,255,255,0.88), rgba(241,248,255,0.68)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(37,99,235,0.06), 0 24px 55px -28px rgba(15,23,42,0.32); backdrop-filter: blur(24px) saturate(145%); -webkit-backdrop-filter: blur(24px) saturate(145%); } .sol-mockup::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,0.72), transparent 28%), repeating-linear-gradient(90deg, transparent 0 39px, rgba(37,99,235,0.025) 40px); } .sol-mockup::after { content: ""; position: absolute; z-index: -1; top: -75px; right: -55px; width: 180px; height: 180px; border-radius: 50%; background: rgba(37,99,235,0.13); filter: blur(42px); pointer-events: none; } .sol-mockup-bar { display: flex; align-items: center; gap: 6px; margin: -0.25rem -0.25rem 1.125rem; padding: 0.65rem 0.75rem; border: 1px solid rgba(255,255,255,0.75); border-radius: 0.75rem; background: rgba(255,255,255,0.48); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 8px 24px -18px rgba(15,23,42,0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .sol-mac-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; box-shadow: 0 0 10px currentColor; } .sol-mockup-lbl { font-size: 0.9rem; color: rgba(15,23,42,0.8); margin-left: 6px; letter-spacing: 0.015em; } .sol-chart-lbl { font-size: 0.67rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(15,23,42,0.58); margin-bottom: 0.75rem; } .sol-chart-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5625rem; padding: 0.15rem 0; } .sol-chart-rl { font-size: 0.6875rem; color: rgba(15,23,42,0.68); width: 90px; flex-shrink: 0; text-align: right; } .sol-chart-track { flex: 1; height: 8px; padding: 1px; background: rgba(15,23,42,0.07); border: 1px solid rgba(15,23,42,0.05); border-radius: 100px; overflow: hidden; box-shadow: inset 0 2px 5px rgba(15,23,42,0.08); } .sol-chart-fill { height: 100%; border-radius: 100px; box-shadow: 0 0 12px currentColor; } .sol-chart-val { font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: 0.72rem; font-weight: 700; color: rgba(15,23,42,0.68); width: 56px; flex-shrink: 0; text-align: right; } .sol-metrics { display: flex; gap: 0.875rem; margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px solid rgba(15,23,42,0.09); } .sol-metric-pill { flex: 1; border: 1px solid rgba(255,255,255,0.78); border-radius: 0.75rem; padding: 0.75rem; box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 10px 28px -22px rgba(15,23,42,0.35); backdrop-filter: blur(12px) saturate(130%); -webkit-backdrop-filter: blur(12px) saturate(130%); transition: transform .25s ease, border-color .25s ease, background-color .25s ease; } .sol-metric-pill:hover { transform: translateY(-2px); border-color: rgba(37,99,235,0.22); } .sol-metric-lbl { font-size: 0.9rem; color: rgba(15,23,42); margin-bottom: 0.25rem; } .sol-metric-val { font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: 1.1875rem; font-weight: 800; /*text-shadow: 0 0 18px currentColor;*/ } /* ── Stats strip ── */ .sol-strip { margin-top: 4rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.125rem; } @media (max-width: 768px) { .sol-strip { grid-template-columns: repeat(2, 1fr); } } .sol-strip-card { background: var(--alt); border: 1px solid rgba(15,23,42,0.08); border-radius: 1.25rem; padding: 1.5rem; text-align: center; transition: border-color 0.2s, transform 0.2s; } .sol-strip-card:hover { border-color: rgba(37,99,235,0.22); transform: translateY(-2px); } .sol-strip-num { font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: 1.875rem; font-weight: 800; letter-spacing: -0.04em; color: var(--primary); margin-bottom: 0.3rem; } .sol-strip-lbl { font-size: 0.8125rem; color: rgba(15,23,42,0.60); line-height: 1.5; } /* ============================================================ COMPONENT EFFECTS & INTERACTIONS (moved from index.html) ============================================================ */ :root { --primary: #2563EB; --ink: #0F172A; --cyan: #22D3EE; --emerald: #10B981; --alt: #F8FAFC; } html { font-family: 'Plus Jakarta Sans', Inter, sans-serif; } body { background: #FFFFFF; color: var(--ink); } /* ---------- Reduced motion respect ---------- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---------- Fade-in on scroll ---------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); pointer-events: none; } .reveal.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .reveal-delay-1 { transition-delay: .08s; } .reveal-delay-2 { transition-delay: .16s; } .reveal-delay-3 { transition-delay: .24s; } .reveal-delay-4 { transition-delay: .32s; } /* ---------- Glassmorphism ---------- */ .glass { background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.6); } .glass-dark { background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.08); } /* ---------- Nav ---------- */ #site-nav { transition: padding .35s ease, box-shadow .35s ease, background-color .35s ease; } #site-nav.shrink { padding-top: .55rem; padding-bottom: .55rem; box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06), 0 12px 30px -16px rgba(15, 23, 42, 0.18); } /* ---------- Gradient mesh backgrounds ---------- */ .mesh-hero { background: radial-gradient(680px 480px at 86% -6%, rgba(34, 211, 238, 0.20), transparent 60%), radial-gradient(620px 480px at 8% 8%, rgba(37, 99, 235, 0.16), transparent 60%), radial-gradient(900px 600px at 50% 110%, rgba(16, 185, 129, 0.10), transparent 60%), #FFFFFF; } .mesh-soft { background: radial-gradient(640px 420px at 92% 0%, rgba(37, 99, 235, 0.08), transparent 60%), radial-gradient(640px 420px at 4% 100%, rgba(34, 211, 238, 0.08), transparent 60%), #F8FAFC; } /* ---------- Aurora (final CTA) ---------- */ .aurora { position: relative; overflow: hidden; background: #0F172A; } .aurora::before { content: ''; position: absolute; inset: -40%; background: conic-gradient(from 180deg at 50% 50%, #2563EB, #22D3EE, #10B981, #2563EB); filter: blur(90px); opacity: .45; animation: auroraSpin 22s linear infinite; } .aurora::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(15, 23, 42, 0.2), rgba(15, 23, 42, 0.92) 70%); } @keyframes auroraSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ---------- Floating cards ---------- */ .float-card { animation: floaty 7s ease-in-out infinite; } .float-card.delay-1 { animation-delay: 1.1s; } .float-card.delay-2 { animation-delay: 2.2s; } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* ---------- Bento card hover ---------- */ .bento-card { transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease, border-color .35s ease; } .bento-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(15, 23, 42, 0.18); border-color: rgba(37, 99, 235, 0.25); } /* ---------- Pulsing nodes (architecture) ---------- */ .node-pulse { position: relative; } .node-pulse::after { content: ''; position: absolute; inset: -6px; border-radius: inherit; border: 1.5px solid rgba(37, 99, 235, 0.45); animation: pulseRing 2.6s ease-out infinite; } @keyframes pulseRing { 0% { transform: scale(.92); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } } /* ---------- Accordion ---------- */ .acc-panel { max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.16, 1, .3, 1); } .acc-icon { transition: transform .35s ease; } .acc-item.open .acc-icon { transform: rotate(45deg); } /* ---------- Testimonial slider ---------- */ #t-track { transition: transform .55s cubic-bezier(.16, 1, .3, 1); } /* ---------- Timeline ---------- */ .timeline-fill { transition: width 1.4s cubic-bezier(.16, 1, .3, 1); } /* ---------- Logo cloud grayscale ---------- */ /* ---------- Utility ---------- */ .text-gradient { background: linear-gradient(90deg, #2563EB, #22D3EE); -webkit-background-clip: text; background-clip: text; color: transparent; } .focus-ring:focus-visible { outline: 2px solid #2563EB; outline-offset: 3px; border-radius: 8px; } .skip-link:focus { transform: translateY(0); } /* phone mock */ .phone-shell { box-shadow: 0 60px 120px -40px rgba(15, 23, 42, 0.45), inset 0 0 0 2px rgba(255, 255, 255, 0.06); } /* ---------- Extracted inline style utilities ---------- */ .u-style-01 { line-height:1.15; } .u-style-02 { font-size:2rem; } .u-style-03 { color:#2563EB; } .u-style-04 { background:rgba(37,99,235,.1);color:#2563EB; } .u-style-05 { background:#FF5F57; } .u-style-06 { background:#FFBD2E; } .u-style-07 { background:#28C840; } .u-style-08 { width:62%;background:rgba(37,99,235,0.55); } .u-style-09 { color:rgba(15,23,42,0.48); } .u-style-10 { width:74%;background:rgba(37,99,235,0.72); } .u-style-11 { width:85%;background:rgba(37,99,235,0.85); } .u-style-12 { width:100%;background:#2563EB; } .u-style-13 { color:#22D3EE; } .u-style-14 { background:rgba(37,99,235,0.15); } .u-style-15 { background:rgba(16,185,129,0.15); } .u-style-16 { color:#10B981; } .u-style-17 { background:rgba(245,158,11,0.15); } .u-style-18 { color:#F59E0B; } .u-style-19 { background:rgba(16,185,129,.1);color:#10B981; } .u-style-20 { width:88%;background:rgba(16,185,129,0.8); } .u-style-21 { width:52%;background:rgba(16,185,129,0.6); } .u-style-22 { width:24%;background:rgba(245,158,11,0.75); } .u-style-23 { width:70%;background:rgba(16,185,129,0.7); } .u-style-24 { color:#8B5CF6; } .u-style-25 { background:rgba(139,92,246,.1);color:#8B5CF6; } .u-style-26 { width:95%;background:rgba(139,92,246,0.85); } .u-style-27 { width:80%;background:rgba(139,92,246,0.70); } .u-style-28 { width:62%;background:rgba(139,92,246,0.55); } .u-style-29 { width:44%;background:rgba(139,92,246,0.40); } .u-style-30 { background:rgba(139,92,246,0.15); } .u-style-31 { background:rgba(34,211,238,0.15); } .u-style-32 { background:rgba(34,211,238,.1);color:#22D3EE; } .u-style-33 { width:100%;background:#10B981; } .u-style-34 { width:73%;background:#22D3EE; } .u-style-35 { width:45%;background:rgba(34,211,238,0.6); } .u-style-36 { width:12%;background:rgba(34,211,238,0.35); } .u-style-37 { color:rgba(255,255,255,0.40); } .u-style-38 { background:rgba(245,158,11,.1);color:#F59E0B; } .u-style-39 { width:82%;background:rgba(245,158,11,0.85); } .u-style-40 { width:56%;background:rgba(245,158,11,0.65); } .u-style-41 { width:38%;background:rgba(245,158,11,0.48); } .u-style-42 { width:38%;background:rgba(245,158,11,0.32); } .u-style-43 { color:#EF4444; } .u-style-44 { background:rgba(239,68,68,.1);color:#EF4444; } .u-style-45 { width:100%;background:rgba(239,68,68,0.85); } .u-style-46 { width:64%;background:rgba(239,68,68,0.65); } .u-style-47 { width:48%;background:rgba(239,68,68,0.50); } .u-style-48 { width:29%;background:rgba(239,68,68,0.35); } .u-style-49 { background:rgba(239,68,68,0.15); } .u-style-50 { height:55%; } .u-style-51 { height:70%; } .u-style-52 { height:45%; } .u-style-53 { height:88%; } .u-style-54 { height:62%; } .u-style-55 { width:78%; } .u-style-56 { width:0%; } /* ============================================================ */ /* IMPLEMENTATION PROCESS — RICH CARD LAYOUT */ /* ============================================================ */ .impl-subtitle { margin-top: .75rem; /*max-width: 560px;*/ margin-left: auto; margin-right: auto; font-size: 1.2rem; line-height: 1.7; color: rgba(15,23,42,.80); text-align: center; } /* Wrapper that stacks connector line + cards */ .impl-timeline-wrap { position: relative; margin-top: 3.5rem; } /* Horizontal connector line row */ .impl-connector-row { display: none; /* hidden on mobile */ position: absolute; top: 2.15rem; /* aligns with badge center */ left: calc(100% / 14); right: calc(100% / 14); z-index: 0; height: 3px; } @media (min-width:1024px) { .impl-connector-row { display: block; } } .impl-connector-track { width: 100%; height: 100%; background: rgba(37,99,235,.12); border-radius: 999px; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,.9); } .impl-connector-fill { height: 100%; width: 0; background: linear-gradient(90deg, #2563eb, #22d3ee); border-radius: 999px; transition: width 1.4s cubic-bezier(.16,1,.3,1); } /* 7-column grid for cards */ .impl-cards-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (min-width:640px) { .impl-cards-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width:1024px) { .impl-cards-grid { grid-template-columns: repeat(7, 1fr); gap: .75rem; } } /* Individual card */ .impl-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.5rem .875rem 1.25rem; border-radius: 1.25rem; border: 1px solid rgba(15,23,42,.08); /*background: radial-gradient(circle at 50% 0%, rgba(37,99,235,.09), transparent 52%), rgba(255,255,255,.72); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);*/ box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 4px 24px -8px rgba(15,23,42,.10); transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease; overflow: hidden; } /* Top accent bar */ .impl-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #2563eb, #22d3ee); opacity: .75; border-radius: 1.25rem 1.25rem 0 0; } .impl-card:hover { transform: translateY(-6px); border-color: rgba(37,99,235,.25); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 16px 36px -12px rgba(37,99,235,.30); } /* Step number badge */ .impl-step-badge { width: 3.25rem; height: 3.25rem; border-radius: 9999px; background: linear-gradient(135deg, #2563eb, #22d3ee); border: 4px solid rgba(255,255,255,.9); display: grid; place-items: center; font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: .9rem; font-weight: 800; color: #fff; box-shadow: 0 8px 20px -8px rgba(37,99,235,.65), inset 0 1px 0 rgba(255,255,255,.35); flex-shrink: 0; transition: transform .3s cubic-bezier(.16,1,.3,1); } .impl-card:hover .impl-step-badge { transform: scale(1.08); } /* Icon container */ .impl-icon-wrap { margin-top: 1rem; width: 4.25rem; height: 4.25rem; /*border-radius: 1rem; background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(34,211,238,.12)); border: 1px solid rgba(37,99,235,.14);*/ position: relative; overflow: hidden; } .impl-icon { position: absolute; top: 50%; left: calc(var(--impl-icon-index, 0) * -100%); width: 700%; height: auto; max-width: none; transform: translateY(-50%); /*filter: drop-shadow(0 2px 4px rgba(37,99,235,.25));*/ } .impl-card:nth-child(1) { --impl-icon-index: 0; } .impl-card:nth-child(2) { --impl-icon-index: 1; } .impl-card:nth-child(3) { --impl-icon-index: 2; } .impl-card:nth-child(4) { --impl-icon-index: 3; } .impl-card:nth-child(5) { --impl-icon-index: 4; } .impl-card:nth-child(6) { --impl-icon-index: 5; } .impl-card:nth-child(7) { --impl-icon-index: 6; } /* Title */ .impl-card-title { margin-top: .9rem; font-weight: 750; /*font-size: .875rem; font-family: 'Plus Jakarta Sans', Inter, sans-serif; color: #0f172a;*/ line-height: 1.2; } /* Short desc */ .impl-card-desc { margin-top: .3rem; font-size: .9rem; color: rgba(15,23,42,.8); line-height: 1.4; } /* Bullet list */ .impl-card-list { margin-top: .85rem; list-style: none; padding: 0; display: flex; flex-direction: column; gap: .35rem; width: 100%; text-align: left; border-top: 1px solid rgba(37,99,235,.10); padding-top: .85rem; } .impl-card-list li { font-size: .67rem; color: rgba(15,23,42,.65); line-height: 1.45; padding-left: 1.1em; position: relative; } .impl-card-list li::before { content: ""; position: absolute; left: 0; top: .45em; width: .55em; height: .55em; border-radius: 50%; background: linear-gradient(135deg, #2563eb, #22d3ee); } /* Mobile: compact two-column version of the desktop cards */ @media (max-width:639px) { .impl-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem; } .impl-card { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; padding: 1rem .7rem 1.1rem; gap: 0; } .impl-step-badge { width: 2.5rem; height: 2.5rem; } .impl-icon-wrap { display: block; width: 4rem; height: 4rem; margin-top: .8rem; border-radius: .875rem; } .impl-card-title { width: 100%; margin-top: .75rem; font-size: .9rem; overflow-wrap: anywhere; } .impl-card-desc { width: 100%; margin-top: .3rem; font-size: .72rem; line-height: 1.4; overflow-wrap: anywhere; } .impl-card-list { text-align: left; } } @media (max-width:374px) { .impl-cards-grid { gap: .65rem; } .impl-card { padding: .875rem .5rem 1rem; } .impl-step-badge { width: 2.25rem; height: 2.25rem; } .impl-icon-wrap { width: 3.5rem; height: 3.5rem; } } /* Trust bar at the bottom */ .impl-trust-bar { margin-top: 2.5rem; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .75rem 1rem; padding: 1rem 1.5rem; border-radius: 1rem; background: rgba(37,99,235,.05); /*border: 1px solid rgba(37,99,235,.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 2px 16px -4px rgba(15,23,42,.08);*/ } .impl-trust-icon { display: flex; align-items: center; flex-shrink: 0; } .impl-trust-text { /*font-size: .925rem;*/ color: rgba(15,23,42,.80); } .impl-trust-highlight { color: #2563eb; } .impl-trust-divider { color: rgba(15,23,42,.20); font-size: 1.2rem; line-height: 1; } .impl-trust-sub { /*font-size: .875rem;*/ color: rgba(15,23,42,.80); } /* ================================================================= APA ITU SAP BUSINESS ONE CLOUD — Section ================================================================= */ .apa-section { padding: 2rem 1.5rem; overflow: hidden; } .apa-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: center; } /* --- LEFT COLUMN --- */ .apa-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #2563eb; background: rgba(37,99,235,0.07); border: 1px solid rgba(37,99,235,0.18); border-radius: 999px; padding: 0.35rem 1rem 0.35rem 0.6rem; margin-bottom: 1.25rem; } .apa-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: #2563eb; display: inline-block; flex-shrink: 0; } .apa-headline { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; line-height: 1.15; color: #0f172a; margin: 0 0 1rem; } .apa-divider { width: 2.5rem; height: 3px; background: linear-gradient(90deg, #2563eb, #60a5fa); border-radius: 2px; margin-bottom: 1.5rem; } .apa-desc { font-size: 1.2rem; color: rgba(15,23,42,0.8); line-height: 1.75; margin: 0 0 1rem; } /* Feature grid */ .apa-features { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; margin: 1.75rem 0 2rem; } .apa-feat { display: flex; align-items: flex-start; gap: 0.75rem; } .apa-feat-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px; background: rgba(37,99,235,0.08); color: #2563eb; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .apa-feat-title { /*font-size: 0.875rem;*/ font-weight: 700; color: #0f172a; margin: 0 0 0.2rem; line-height: 1.3; } .apa-feat-sub { font-size: 0.9rem; color: rgba(15,23,42); line-height: 1.5; margin: 0; } /* CTA row */ .apa-cta-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .apa-btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; background: #2563eb; color: #fff; font-size: 0.9rem; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 8px; text-decoration: none; transition: background 0.2s, transform 0.15s; } .apa-btn-primary:hover { background: #1d4ed8; transform: translateY(-1px); } .apa-btn-ghost { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 600; color: #2563eb; text-decoration: none; transition: gap 0.2s; } .apa-btn-ghost:hover { gap: 0.65rem; } /* --- RIGHT COLUMN --- */ .apa-right { display: flex; align-items: center; justify-content: center; min-width: 0; } .apa-image { display: block; width: 100%; /*max-width: 560px;*/ height: auto; object-fit: contain; /*filter: drop-shadow(0 24px 38px rgba(37,99,235,.14));*/ } /* Visual hub */ .apa-visual { position: relative; width: 100%; aspect-ratio: 1; max-width: 420px; margin: 0 auto; display: flex; align-items: center; justify-content: center; } .apa-hub-ring { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(37,99,235,0.18); top: 50%; left: 50%; transform: translate(-50%, -50%); } .apa-hub-ring-outer { width: 88%; height: 88%; } .apa-hub-ring-inner { width: 56%; height: 56%; border-style: solid; border-color: rgba(37,99,235,0.10); } .apa-hub-core { width: 90px; height: 90px; border-radius: 50%; background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%); border: 2px solid rgba(37,99,235,0.25); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 32px rgba(37,99,235,0.15), 0 4px 16px rgba(37,99,235,0.1); z-index: 2; position: relative; } /* Connector SVG overlay */ .apa-connectors { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } /* Module nodes — absolutely positioned around the hub */ .apa-node { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; z-index: 3; } .apa-node-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #eff6ff, #dbeafe); border: 1.5px solid rgba(37,99,235,0.22); color: #2563eb; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(37,99,235,0.12); } .apa-node-lbl { font-size: 0.68rem; font-weight: 600; color: #2563eb; white-space: nowrap; } /* Node positions (% of container) */ .apa-node-finance { top: 1%; left: 50%; transform: translateX(-50%); } .apa-node-sales { top: 12%; left: 10%; } .apa-node-inventory { top: 12%; right: 8%; } .apa-node-crm { top: 44%; left: 2%; transform: translateY(-50%); } .apa-node-purchasing{ top: 44%; right: 2%; transform: translateY(-50%); } .apa-node-production{ bottom: 12%; left: 14%; } .apa-node-service { bottom: 1%; left: 50%; transform: translateX(-50%); } .apa-node-analytics { bottom: 12%; right: 8%; } /* Stats row */ .apa-stats-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; background: #f8fafc; border: 1px solid rgba(15,23,42,0.07); border-radius: 16px; padding: 1.5rem; } .apa-stat-card { padding: 0.75rem; } .apa-stat-num { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.75rem; font-weight: 800; color: #2563eb; margin: 0 0 0.2rem; line-height: 1; } .apa-stat-title { font-size: 0.8rem; font-weight: 700; color: #0f172a; margin: 0 0 0.25rem; line-height: 1.3; } .apa-stat-sub { font-size: 0.75rem; color: rgba(15,23,42,0.55); line-height: 1.5; margin: 0; } /* --- RESPONSIVE --- */ @media (max-width: 900px) { .apa-container { grid-template-columns: 1fr; gap: 3rem; } .apa-right { order: -1; } .apa-image { max-width: 480px; } } @media (max-width: 540px) { .apa-section { padding: 4rem 1rem; } .apa-features { grid-template-columns: 1fr; } .apa-image { max-width: 360px; } } /* ================================================================= SAP B1 HANA PAGE — sap-business-one-versi-hana.html All classes prefixed with "hana-" are exclusive to this page. ================================================================= */ /* ── BREADCRUMB ── */ .hana-breadcrumb { margin: 0 auto; max-width: 1280px; padding: 0 1.25rem; padding-top: 5.5rem; padding-bottom: .75rem; font-size: .8125rem; color: rgba(15,23,42,.45); display: flex; align-items: center; gap: .375rem; } @media (min-width:640px) { .hana-breadcrumb { padding-left: 2rem; padding-right: 2rem; } } .hana-breadcrumb a { color: rgba(15,23,42,.55); transition: color .15s; } .hana-breadcrumb a:hover { color: rgb(37,99,235); } .hana-breadcrumb-sep { font-size: .625rem; opacity: .4; } /* ── HERO — mirrors index.html home-section-1 pattern exactly ── */ /* The HANA hero reuses home-section-1, home-div-1, home-img-1, home-div-3 mesh-hero, and home-div-4 from the shared stylesheet. Only the image position differs: the hero image is right-heavy so the left panel stays readable. The override below shifts it. */ .hana-hero-img { opacity: 80%; -o-object-fit: cover; object-fit: cover; /* 72% horizontal: tampilkan sisi kanan gambar (area subjek foto). top: mulai dari atas agar kepala/subjek tidak terpotong dalam section yang dibatasi height 720px. */ -o-object-position: 72% top; object-position: 72% top; } /* Pada layar desktop, pastikan wrapper tidak overflow */ @media (min-width: 1024px) { #home.home-section-1 { overflow: hidden; } .home-div-1 { overflow: hidden; } } /* Stats strip (replacing the star rating row from index.html) */ .hana-stats-row { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center; font-size: .875rem; line-height: 1.25rem; color: rgba(15,23,42,.55); } .hana-stat-item { display: flex; align-items: center; gap: .5rem; } .hana-stat-icon { font-size: 1.125rem; color: rgb(37,99,235); flex-shrink: 0; } .hana-stat-num { font-family: Plus Jakarta Sans, Inter, sans-serif; font-size: 1.125rem; font-weight: 800; color: rgb(15,23,42); line-height: 1; } .hana-stat-lbl { font-size: .6875rem; color: rgba(15,23,42,.8); margin-top: .125rem; } /* ── SHARED SECTION WRAPPER ── */ .hana-section-inner { margin: 0 auto; max-width: 1280px; padding: 0 1.25rem; } @media (min-width:640px) { .hana-section-inner { padding: 0 2rem; } } /* ── SHARED SECTION HEADER ── */ .hana-section-header { text-align: center; margin-bottom: 3rem; } .hana-section-title { font-family: Plus Jakarta Sans, Inter, sans-serif; font-size: 1.875rem; font-weight: 800; line-height: 1.15; letter-spacing: -.025em; color: rgb(15,23,42); margin-bottom: .625rem; } @media (min-width:640px) { .hana-section-title { font-size: 2.25rem; } } .hana-section-sub { font-size: 1rem; color: rgba(15,23,42,.8); margin: 0 auto; line-height: 1.65; } /* ── BUTTONS (scoped to HANA page) ── */ .hana-btn-primary { display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px; background: rgb(37,99,235); padding: .875rem 1.75rem; font-size: .9375rem; font-weight: 600; color: #fff; transition: background .15s; } .hana-btn-primary:hover { background: rgb(29,78,216); } .hana-btn-outline { display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px; border: 1.5px solid rgba(15,23,42,.15); padding: .875rem 1.5rem; font-size: .9375rem; font-weight: 600; color: rgb(15,23,42); transition: border-color .15s, background .15s; } .hana-btn-outline:hover { background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.25); } /* ── COMPARISON SECTION ── */ /* ══════════════════════════════════════════════ COMPARISON SECTION — Premium Redesign ══════════════════════════════════════════════ */ .hana-compare-section { position: relative; padding: 2.5rem 0 2.5rem; overflow: hidden; background: #f0f4ff; } /* Background image */ .hana-compare-bg { position: absolute; inset: 0; z-index: 0; } .hana-compare-bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center right; opacity: .55; } .hana-compare-bg-overlay { position: absolute; inset: 0; /*background: linear-gradient( 135deg, rgba(240,244,255,.97) 0%, rgba(240,244,255,.93) 45%, rgba(230,240,255,.82) 100% );*/ } .hana-compare-inner { position: relative; z-index: 1; } /* Eyebrow label */ .hana-compare-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgb(37,99,235); background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.15); border-radius: 999px; padding: .35rem .875rem; margin-bottom: 1rem; } .hana-compare-grid { display: grid; gap: 3rem; margin-bottom: 2.5rem; } @media (min-width:1024px) { .hana-compare-grid { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } } .hana-compare-col {} .hana-compare-title { font-family: Plus Jakarta Sans, Inter, sans-serif; font-size: 1.75rem; font-weight: 800; line-height: 1.15; letter-spacing: -.025em; color: rgb(15,23,42); margin-bottom: .75rem; } @media (min-width:640px) { .hana-compare-title { font-size: 2rem; } } .hana-compare-desc { font-size: 1.2rem; line-height: 1.7; color: rgba(15,23,42,.8); margin-bottom: 1.75rem; } /* VS Grid */ .hana-vs-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: .875rem; align-items: start; } .hana-vs-label { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1.5px solid rgba(15,23,42,.1); box-shadow: 0 2px 8px rgba(15,23,42,.08); display: flex; align-items: center; justify-content: center; font-weight: 900; color: rgb(37,99,235); align-self: center; flex-shrink: 0; letter-spacing: .03em; } /* Flow cards */ .hana-flow-card { border-radius: 18px; border: 1.5px solid rgba(15,23,42,.08); padding: 1.25rem 1rem; background: rgba(255,255,255,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(15,23,42,.06); transition: box-shadow .25s; } .hana-flow-card:hover { box-shadow: 0 8px 32px rgba(15,23,42,.1); } .hana-flow-card.is-hana { border-color: rgba(37,99,235,.22); background: rgba(255,255,255,.9); box-shadow: 0 4px 24px rgba(37,99,235,.1); } .hana-flow-card.is-hana:hover { box-shadow: 0 8px 36px rgba(37,99,235,.15); } /* Card header with icon */ .hana-flow-card-head { display: flex; align-items: center; gap: .625rem; /*font-size: .8125rem;*/ font-weight: 700; letter-spacing: .02em; margin-bottom: 1rem; color: rgba(15,23,42,.65); line-height: 1.3; } .hana-flow-card-icon-header { width: 46px; height: 46px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; background: rgba(15,23,42,.07); color: rgba(15,23,42,.5); } .hana-flow-card-icon-header.hana { background: rgba(37,99,235,.12); color: rgb(37,99,235); } .hana-flow-card.is-hana .hana-flow-card-head { color: rgb(37,99,235); } /* Steps */ .hana-flow-step { display: flex; align-items: center; gap: .625rem; margin-bottom: .5rem; } .hana-flow-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .8125rem; flex-shrink: 0; background: rgba(15,23,42,.06); color: rgba(15,23,42,.45); } .hana-flow-card.is-hana .hana-flow-icon { background: rgba(37,99,235,.1); color: rgb(37,99,235); } .hana-flow-text { /*font-size: .8125rem;*/ font-weight: 500; color: rgba(15,23,42,.7); } .hana-flow-arrow { text-align: left; color: rgba(15,23,42,.6); font-size: 1rem; margin: .2rem 0 .2rem .875rem; } .hana-flow-card.is-hana .hana-flow-arrow { color: rgba(37,99,235,.6); } /* Result row */ .hana-flow-result { display: flex; align-items: center; gap: .625rem; margin-top: .875rem; padding-top: .875rem; border-top: 1px solid rgba(15,23,42,.07); } .hana-flow-result-icon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .875rem; flex-shrink: 0; } .hana-flow-result-icon.traditional { background: rgba(239,68,68,.1); color: #EF4444; } .hana-flow-result-icon.hana { background: rgba(16,185,129,.1); color: #10B981; } .hana-flow-result-time { font-size: .9375rem; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; } .hana-flow-result-time.traditional { color: #EF4444; } .hana-flow-result-time.hana { color: #10B981; } .hana-flow-result-label { font-size: .75rem; color: rgba(15,23,42,.45); font-weight: 500; margin-top: .1rem; } /* Right side — Why Better */ .hana-why-title { font-family: Plus Jakarta Sans, Inter, sans-serif; font-size: 1.75rem; font-weight: 800; line-height: 1.15; letter-spacing: -.025em; color: rgb(15,23,42); margin-bottom: .75rem; } @media (min-width:640px) { .hana-why-title { font-size: 2rem; } } .hana-why-desc { font-size: 1.2rem; line-height: 1.7; color: rgba(15,23,42,.8); margin-bottom: 1.5rem; } /* Layout: feat grid + chip side by side on desktop */ .hana-why-layout { display: grid; gap: 1.5rem; } @media (min-width:1024px) { .hana-why-layout { grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; } } /* Feature cards */ .hana-feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem; } .hana-feat-card { border-radius: 14px; border: 1.5px solid rgba(15,23,42,.07); padding: 1.125rem 1rem; background: rgba(255,255,255,.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 2px 12px rgba(15,23,42,.05); transition: border-color .2s, box-shadow .2s, transform .2s; } .hana-feat-card:hover { border-color: rgba(37,99,235,.2); box-shadow: 0 8px 28px rgba(37,99,235,.1); transform: translateY(-2px); } .hana-feat-card-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; margin-bottom: .75rem; } .hana-feat-card-title { font-weight: 700; color: rgb(15,23,42); margin-bottom: .3rem; } .hana-feat-card-sub { line-height: 1.5; color: rgba(15,23,42,.8); } /* HANA Chip Visual */ .hana-chip-visual { position: relative; width: 180px; height: 180px; flex-shrink: 0; display: none; } @media (min-width:1024px) { .hana-chip-visual { display: flex; align-items: center; justify-content: center; } } .hana-chip-orbit { position: absolute; inset: 0; } .hana-chip-orbit-icon { position: absolute; width: 36px; height: 36px; border-radius: 50%; background: var(--bg); color: var(--color); border: 1.5px solid var(--color); display: flex; align-items: center; justify-content: center; font-size: .8125rem; top: 50%; left: 50%; /* Orbit radius 78px */ transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-78px) rotate(calc(-1 * var(--angle))); box-shadow: 0 2px 10px rgba(0,0,0,.08); } .hana-chip-core { width: 80px; height: 80px; border-radius: 18px; background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #3b82f6 100%); box-shadow: 0 0 0 6px rgba(37,99,235,.12), 0 0 0 12px rgba(37,99,235,.06), 0 8px 32px rgba(37,99,235,.4); display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; } .hana-chip-core-inner { text-align: center; } .hana-chip-core-label { font-family: Plus Jakarta Sans, Inter, sans-serif; font-size: .6875rem; font-weight: 800; color: #fff; line-height: 1.25; letter-spacing: .02em; } /* Bottom stats bar */ .hana-compare-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; background: rgba(255,255,255,.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1.5px solid rgba(15,23,42,.08); border-radius: 20px; box-shadow: 0 4px 24px rgba(15,23,42,.07); overflow: hidden; margin-top: 1rem; } @media (min-width:768px) { .hana-compare-stats { grid-template-columns: repeat(4, 1fr); } } .hana-compare-stat { display: flex; align-items: center; gap: .875rem; padding: 1.25rem 1.5rem; min-width: 0; transition: background .2s, transform .2s; } .hana-compare-stat:hover { background: rgba(37,99,235,.03); transform: translateY(-1px); } .hana-compare-stat-icon { font-size: 1.25rem; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: currentColor; display: flex; align-items: center; justify-content: center; } .hana-compare-stat-icon i { color: #fff; font-size: 1rem; } .hana-compare-stat-title { /*font-size: .875rem;*/ font-weight: 700; color: rgb(15,23,42); margin-bottom: .15rem; line-height: 1.25; } .hana-compare-stat-sub { font-size: .9rem; color: rgba(15,23,42,.8); line-height: 1.4; } @media (min-width:768px) { .hana-compare-stat + .hana-compare-stat { border-left: 1px solid rgba(15,23,42,.07); } } /* Mobile adjustments */ @media (max-width:767px) { .hana-compare-stats { border-radius: 16px; } .hana-compare-stat { padding: 1rem 1.125rem; align-items: flex-start; } .hana-compare-stat:nth-child(odd) { border-right: 1px solid rgba(15,23,42,.06); } .hana-compare-stat:nth-child(-n+2) { border-bottom: 1px solid rgba(15,23,42,.06); } .hana-compare-stat-icon { width: 36px; height: 36px; border-radius: 10px; } .hana-compare-stat-title { font-size: .8125rem; } } /* ── TRANSFORMATION ENGINE ── */ .hana-engine-section { background: #F8FAFC; padding: 4rem 0; } .hana-engine-grid { display: grid; gap: 3rem; align-items: center; } @media (min-width:1024px) { .hana-engine-grid { grid-template-columns: 1fr 2fr; gap: 4rem; } } .hana-engine-eyebrow { display: inline-flex; align-items: center; gap: .5rem; background: rgba(37,99,235,.08); border-radius: 100px; padding: .3rem .875rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgb(37,99,235); margin-bottom: 1rem; } .hana-engine-title { font-family: Plus Jakarta Sans, Inter, sans-serif; font-size: 1.75rem; font-weight: 800; line-height: 1.15; letter-spacing: -.025em; margin-bottom: 1rem; } @media (min-width:640px) { .hana-engine-title { font-size: 2rem; } } .hana-engine-desc { font-size: 1.2rem; line-height: 1.7; color: rgba(15,23,42,.8); margin-bottom: 1.75rem; } /* ── HANA ENGINE SECTION (redesigned) ── */ .hana-engine-section { padding: 3rem 0 3rem; position: relative; overflow: hidden; } /* Decorative wave at bottom-left */ .hana-engine-wave { position: absolute; bottom: 0; left: 0; width: 55%; height: 45%; background: radial-gradient(ellipse at 0% 100%, rgba(37,99,235,.08) 0%, transparent 65%), radial-gradient(ellipse at 20% 90%, rgba(34,211,238,.06) 0%, transparent 50%); pointer-events: none; } .hana-engine-wave::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 100%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 800 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 120 C100 80 200 160 300 100 C400 40 500 140 600 90 C700 40 750 110 800 80 L800 200 L0 200 Z' fill='rgba(37,99,235,0.04)'/%3E%3Cpath d='M0 150 C120 100 240 180 360 130 C480 80 600 160 720 110 C760 90 780 130 800 110 L800 200 L0 200 Z' fill='rgba(34,211,238,0.04)'/%3E%3C/svg%3E"); background-size: 100% 100%; background-repeat: no-repeat; } .hana-engine-grid { display: grid; grid-template-columns: 1fr 1.7fr; gap: 4rem; align-items: center; } @media (max-width: 1023px) { .hana-engine-grid { grid-template-columns: 1fr; gap: 2.5rem; } } .hana-engine-left { display: flex; flex-direction: column; align-items: flex-start; } .hana-engine-cta { font-size: .875rem; padding: .75rem 1.375rem; margin-top: .25rem; } /* ── Diagram outer card ── */ .hana-engine-right { position: relative; } .hana-engine-diagram-card { background: #fff; border-radius: 24px; border: 1.5px solid rgba(37,99,235,.1); box-shadow: 0 8px 40px -12px rgba(37,99,235,.15), 0 2px 8px -2px rgba(15,23,42,.06); padding: 2rem 1.75rem; display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; position: relative; overflow: hidden; } /* Subtle inner glow */ .hana-engine-diagram-card::before { content: ''; position: absolute; inset: 0; border-radius: 24px; background: radial-gradient(ellipse at 50% 50%, rgba(37,99,235,.04) 0%, transparent 65%); pointer-events: none; } /* SVG connector lines — absolutely positioned over the card */ .hana-engine-svg-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; display: block; } /* ── Column label ── */ .hana-eng-col-label { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(15,23,42,.35); margin-bottom: .75rem; text-align: center; } /* ── Left & Right cols ── */ .hana-eng-col { display: flex; flex-direction: column; gap: .8rem; position: relative; z-index: 2; } /* ── Data source items ── */ .hana-eng-source-item { display: flex; align-items: center; gap: .625rem; padding: .5rem .875rem; background: #fff; border-radius: 10px; border: 1px solid rgba(15,23,42,.08); font-weight: 500; color: rgba(15,23,42,.7); box-shadow: 0 1px 4px rgba(15,23,42,.05); white-space: nowrap; transition: border-color .2s, box-shadow .2s; } .hana-eng-source-item:hover { border-color: rgba(37,99,235,.2); box-shadow: 0 2px 8px rgba(37,99,235,.08); } .hana-eng-source-icon { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; /*font-size: .75rem;*/ flex-shrink: 0; } /* ── Core center block ── */ .hana-eng-core { background: linear-gradient(145deg, #1D4ED8, #2563EB 45%, #3B82F6 75%, #60A5FA); border-radius: 20px; padding: 1.75rem 1.375rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; box-shadow: 0 16px 40px -8px rgba(37,99,235,.45), inset 0 1px 0 rgba(255,255,255,.15); position: relative; z-index: 2; min-width: 130px; transition: transform .25s, box-shadow .25s; } .hana-eng-core:hover { transform: translateY(-3px); box-shadow: 0 20px 48px -8px rgba(37,99,235,.5); } .hana-eng-core-icon { width: 44px; height: 44px; background: rgba(255,255,255,.15); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: .875rem; margin-left: auto; margin-right: auto; border: 1px solid rgba(255,255,255,.2); font-size:2rem; } .hana-eng-core-title { font-family: Plus Jakarta Sans, Inter, sans-serif; font-size: 1.0625rem; font-weight: 800; line-height: 1.2; margin-bottom: .5rem; } .hana-eng-core-sub { font-size: .6875rem; font-weight: 500; opacity: .75; letter-spacing: .03em; line-height: 1.4; } /* ── Business insight items ── */ .hana-eng-insight-item { display: flex; align-items: center; gap: .5rem; padding: .5rem .875rem; background: #fff; border-radius: 10px; border: 1px solid rgba(15,23,42,.08); font-size: .9rem; font-weight: 500; color: rgba(15,23,42,.7); box-shadow: 0 1px 4px rgba(15,23,42,.05); white-space: nowrap; transition: border-color .2s, box-shadow .2s; position: relative; z-index: 2; } .hana-eng-insight-item:hover { border-color: rgba(37,99,235,.2); box-shadow: 0 2px 8px rgba(37,99,235,.08); } .hana-eng-arrow { flex-shrink: 0; opacity: .6; } .hana-eng-insight-icon { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ── Mobile: stack columns ── */ @media (max-width: 639px) { .hana-engine-diagram-card { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.5rem 1.25rem; } .hana-engine-svg-lines { display: none; } .hana-eng-col--right .hana-eng-col-label { text-align: left; } .hana-eng-core { align-self: center; margin: 0 auto; } } /* Flow diagram (legacy — kept for backward compat, hidden in favor of new design) */ .hana-flow-diagram { display: none; } /* ── EXCLUSIVE CAPABILITIES ── */ .hana-caps-section { padding: 4.5rem 0; } .hana-caps-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } @media (min-width:768px) { .hana-caps-grid { grid-template-columns: repeat(4, 1fr); } } .hana-cap-card { border-radius: 16px; border: 1.5px solid rgba(15,23,42,.1); padding: 1.5rem 1.25rem; background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s; cursor: default; position: relative; overflow: hidden; } .hana-cap-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #2563eb, #22d3ee); transform: scaleX(0); transform-origin: left; transition: transform .3s; } .hana-cap-card:hover { border-color: rgba(37,99,235,.2); box-shadow: 0 12px 32px -8px rgba(37,99,235,.12); transform: translateY(-3px); } .hana-cap-card:hover::after { transform: scaleX(1); } .hana-cap-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; margin-bottom: 1rem; } .hana-cap-name { font-size: .9375rem; font-weight: 700; color: rgb(15,23,42); margin-bottom: .75rem; } .hana-cap-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .375rem; } .hana-cap-list li { font-size: .8125rem; color: rgba(15,23,42,.55); line-height: 1.4; } .hana-cap-arrow { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: rgba(15,23,42,.2); font-size: .875rem; } /* ── IMPACT / METRICS ── */ .hana-impact-section { background: #F8FAFC; padding: 2rem 0; } .hana-metrics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } @media (min-width:768px) { .hana-metrics-grid { grid-template-columns: repeat(5, 1fr); } } .hana-metric-card { text-align: center; padding: 1.75rem 1rem; border-radius: 16px; background: #fff; border: 1.5px solid rgba(15,23,42,.07); transition: box-shadow .2s, transform .2s; } .hana-metric-card:hover { box-shadow: 0 12px 32px -8px rgba(37,99,235,.1); transform: translateY(-3px); } .hana-metric-icon-wrap { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.375rem; } .hana-metric-num { font-family: Plus Jakarta Sans, Inter, sans-serif; font-size: 1.5rem; font-weight: 800; line-height: 1; margin-bottom: 1rem; background: linear-gradient(90deg, #2563EB, #22D3EE); -webkit-background-clip: text; background-clip: text; color: transparent; } .hana-metric-name { font-weight: 700; color: rgb(15,23,42); margin-bottom: .375rem; } .hana-metric-sub { font-size: .9rem; line-height: 1.5; color: rgba(15,23,42,.8); } /* ── INDUSTRIES ── */ .hana-industry-section { background: #fff; padding: 4.5rem 0; } .hana-industry-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width:640px) { .hana-industry-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width:1024px) { .hana-industry-grid { grid-template-columns: repeat(6, 1fr); } } .hana-industry-card { border-radius: 14px; overflow: hidden; position: relative; aspect-ratio: 1; cursor: pointer; } .hana-industry-img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.16,1,.3,1); } .hana-industry-card:hover .hana-industry-img { transform: scale(1.06); } .hana-industry-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,23,42,.7) 0%, transparent 55%); } .hana-industry-name { position: absolute; bottom: .75rem; left: 0; right: 0; text-align: center; font-size: .8125rem; font-weight: 700; color: #fff; display: flex; flex-direction: column; align-items: center; gap: .25rem; } .hana-industry-name i { font-size: 1rem; opacity: .8; } /* ── CTA ── */ .hana-cta-section { background: rgb(15,23,42); padding: 5rem 0; text-align: center; position: relative; overflow: hidden; } .hana-cta-section::before { content: ''; position: absolute; inset: -30%; background: conic-gradient(from 180deg at 50% 50%, #2563EB, #22D3EE, #10B981, #2563EB); filter: blur(100px); opacity: .18; animation: auroraSpin 22s linear infinite; } .hana-cta-inner { position: relative; z-index: 1; } .hana-cta-eyebrow { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 100px; padding: .35rem 1rem; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 1.5rem; } .hana-cta-title { font-family: Plus Jakarta Sans, Inter, sans-serif; font-size: 2rem; font-weight: 800; color: #fff; line-height: 1.15; letter-spacing: -.025em; margin-bottom: 1rem; max-width: 42rem; margin-left: auto; margin-right: auto; } @media (min-width:640px) { .hana-cta-title { font-size: 2.5rem; } } .hana-cta-sub { font-size: 1rem; color: rgba(255,255,255,.55); margin-bottom: 2.5rem; max-width: 36rem; margin-left: auto; margin-right: auto; line-height: 1.65; } .hana-cta-btns { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } .hana-cta-btn-primary { display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px; background: rgb(37,99,235); padding: .9375rem 2rem; font-weight: 700; color: #fff; font-size: .9375rem; transition: background .15s; } .hana-cta-btn-primary:hover { background: rgb(29,78,216); } .hana-cta-btn-ghost { display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px; border: 1.5px solid rgba(255,255,255,.2); padding: .9375rem 1.75rem; font-weight: 600; color: #fff; font-size: .9375rem; transition: border-color .15s, background .15s; } .hana-cta-btn-ghost:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.05); } /* ── FOOTER ── */ .hana-footer { background: #0a1128; padding: 2rem 0; } .hana-footer-inner { margin: 0 auto; max-width: 1280px; padding: 0 1.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } @media (min-width:640px) { .hana-footer-inner { padding: 0 2rem; } } .hana-footer-copy { font-size: .8125rem; color: rgba(255,255,255,.35); } .hana-footer-links { display: flex; gap: 1.5rem; } .hana-footer-links a { font-size: .8125rem; color: rgba(255,255,255,.35); transition: color .15s; } .hana-footer-links a:hover { color: rgba(255,255,255,.7); } /* ── RESPONSIVE OVERRIDES ── */ @media (max-width:639px) { .hana-feat-grid { grid-template-columns: 1fr; } .hana-vs-grid { grid-template-columns: 1fr; gap: .75rem; } .hana-vs-label { display: none; } .hana-caps-grid { grid-template-columns: 1fr; } .hana-metrics-grid { grid-template-columns: 1fr 1fr; } .hana-industry-grid { grid-template-columns: repeat(2,1fr); } .hana-cta-title { font-size: 1.625rem; } } /* Bottom stat content fix */ .hana-compare-stat-content{ display:flex; flex-direction:column; min-width:0; } .hana-compare-stat-title{ margin:0; } .hana-compare-stat-sub{ margin-top:.15rem; } /* V 2 */ /* ============================================================ HANA ENGINE v2 — PREMIUM REDESIGN ============================================================ */ .hana-engine-section { padding: 4rem 0 5rem; position: relative; background: #f8fcff; overflow: hidden; isolation: isolate; } .hana-engine-section::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 60% 50% at 10% 20%, rgba(37,99,235,0.04) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 90% 80%, rgba(34,211,238,0.05) 0%, transparent 50%), repeating-linear-gradient(45deg, rgba(37,99,235,0.012) 0px, rgba(37,99,235,0.012) 1px, transparent 1px, transparent 20px); pointer-events: none; } .hana-engine-header { position: relative; z-index: 2; margin-bottom: 3.5rem; text-align: left; } .hana-engine-eyebrow { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #2563EB; background: rgba(37,99,235,0.06); border: 1px solid rgba(37,99,235,0.12); border-radius: 100px; padding: 0.35rem 1.1rem 0.35rem 0.9rem; margin-bottom: 1.25rem; } .hana-eng-dot { width: 7px; height: 7px; border-radius: 50%; background: #2563EB; display: inline-block; flex-shrink: 0; } .hana-engine-title { font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: clamp(2.4rem, 5vw, 3.75rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; color: #0f172a; margin-bottom: 1rem; } .hana-engine-desc { font-size: 1.2rem; line-height: 1.7; /*max-width: 680px;*/ color: rgba(15,23,42,0.75); margin-bottom: 1.5rem; } .hana-eng-kpi-group { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; align-items: center; } .hana-eng-kpi { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; color: #0f172a; background: rgba(255,255,255,0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 0.3rem 0.9rem 0.3rem 0.7rem; border-radius: 100px; border: 1px solid rgba(15,23,42,0.06); box-shadow: 0 2px 8px rgba(0,0,0,0.02); } .hana-eng-kpi i { color: #2563EB; font-size: 0.9rem; opacity: 0.8; } /* ─── VISUAL LAYOUT ─── */ .hana-eng-visual { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 1.2rem; align-items: center; background: rgba(255,255,255,0.48); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border-radius: 40px; border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 25px 60px -24px rgba(37,99,235,0.16), inset 0 1px 0 rgba(255,255,255,0.9); padding: 2.2rem 1.8rem; transition: box-shadow 0.3s ease; } .hana-eng-visual:hover { box-shadow: 0 32px 80px -28px rgba(37,99,235,0.22), inset 0 1px 0 rgba(255,255,255,0.9); } .hana-eng-col { display: flex; flex-direction: column; gap: 0.7rem; position: relative; } .hana-eng-col-label { /*font-size: 0.65rem;*/ font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(15,23,42,0.4); margin-bottom: 0.25rem; } .hana-eng-source-item, .hana-eng-insight-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.6rem 1rem; background: rgba(255,255,255,0.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 18px; border: 1px solid rgba(15,23,42,0.1); box-shadow: 0 4px 14px -4px rgba(0,0,0,0.02), 0 0 0 1px rgba(255,255,255,0.6) inset; font-weight: 500; color: #0f172a; transition: all 0.25s cubic-bezier(.16,1,.3,1); cursor: default; position: relative; overflow: hidden; } .hana-eng-source-item::after, .hana-eng-insight-item::after { content: ''; position: absolute; inset: 0; border-radius: 18px; border: 1.5px solid transparent; background: linear-gradient(135deg, var(--accent, #2563EB), var(--accent, #2563EB)) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s; } .hana-eng-source-item:hover, .hana-eng-insight-item:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(0,0,0,0.06), 0 0 0 1px rgba(255,255,255,0.8) inset; } .hana-eng-source-item:hover::after, .hana-eng-insight-item:hover::after { opacity: 1; } .hana-eng-source-icon, .hana-eng-insight-icon { width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(37,99,235,0.06); color: var(--accent, #2563EB); font-size: 0.85rem; } /* ─── CENTER CORE ─── */ .hana-eng-core-wrapper { position: relative; display: flex; align-items: center; justify-content: center; min-height: 240px; } .hana-eng-core-glow { position: absolute; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, rgba(37,99,235,0.15), rgba(34,211,238,0.05) 60%, transparent 80%); filter: blur(30px); animation: corePulse 4s ease-in-out infinite alternate; pointer-events: none; } @keyframes corePulse { 0% { transform: scale(0.9); opacity: 0.7; } 100% { transform: scale(1.2); opacity: 1; } } .hana-eng-core { position: relative; z-index: 2; width: 170px; height: 170px; border-radius: 40px; background: linear-gradient(145deg, #1a3a8f, #2563EB 40%, #3b82f6 75%, #60a5fa); box-shadow: 0 20px 50px -10px rgba(37,99,235,0.4), inset 0 2px 0 rgba(255,255,255,0.25), 0 0 0 1px rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; transition: transform 0.4s cubic-bezier(.16,1,.3,1), box-shadow 0.4s; animation: floatCore 6s ease-in-out infinite; } @keyframes floatCore { 0% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-8px) scale(1.02); } 100% { transform: translateY(0px) scale(1); } } .hana-eng-core:hover { transform: scale(1.03) translateY(-4px); box-shadow: 0 28px 60px -8px rgba(37,99,235,0.55), inset 0 2px 0 rgba(255,255,255,0.3); } .hana-eng-core-inner { text-align: center; color: #fff; padding: 0.5rem; } .hana-eng-core-icon { display: flex; justify-content: center; margin-bottom: 0.5rem; opacity: 0.9; } .hana-eng-core-title { font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; } .hana-eng-core-sub { font-size: 0.65rem; font-weight: 500; opacity: 0.8; letter-spacing: 0.04em; margin-top: 0.1rem; } .hana-particle-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; border-radius: 40px; } /* ─── RESPONSIVE ─── */ @media (max-width: 1024px) { .hana-eng-visual { grid-template-columns: 1fr 1fr; gap: 1.5rem; padding: 1.8rem; } .hana-eng-col--left { order: 1; } .hana-eng-core-wrapper { order: 2; grid-column: 2 / 3; grid-row: 1 / 2; } .hana-eng-col--right { order: 3; grid-column: 1 / 2; } } @media (max-width: 768px) { .hana-engine-section { padding: 3rem 0; } .hana-eng-visual { grid-template-columns: 1fr; gap: 1.2rem; padding: 1.5rem; border-radius: 28px; } .hana-eng-col--left, .hana-eng-col--right, .hana-eng-core-wrapper { grid-column: 1 / 2; grid-row: auto; } .hana-eng-core-wrapper { min-height: 180px; order: 2; } .hana-eng-col--left { order: 1; } .hana-eng-col--right { order: 3; } .hana-eng-core { width: 130px; height: 130px; border-radius: 32px; } .hana-eng-core-title { font-size: 0.95rem; } .hana-engine-title { font-size: 2rem; } .hana-eng-kpi-group { gap: 0.5rem; } .hana-eng-kpi { font-size: 0.7rem; padding: 0.2rem 0.6rem; } .hana-eng-source-item, .hana-eng-insight-item { font-size: 0.8rem; padding: 0.5rem 0.8rem; } } @media (max-width: 480px) { .hana-eng-visual { padding: 1rem; } .hana-eng-core { width: 110px; height: 110px; border-radius: 28px; } .hana-eng-core-title { font-size: 0.85rem; } .hana-eng-core-sub { font-size: 0.55rem; } } /* hide old legacy HANA engine classes if they exist */ .hana-engine-grid, .hana-engine-left, .hana-engine-right, .hana-engine-diagram-card, .hana-engine-svg-lines, .hana-engine-wave, .hana-flow-diagram { display: none !important; } /* ============================================================ CAPABILITIES ECOSYSTEM v2 — DENGAN BACKGROUND IMAGE ============================================================ */ .hana-caps-section { padding: 2rem 0 5rem; position: relative; overflow: hidden; isolation: isolate; /*background: #f8fcff;*/ } /* Background mesh */ .hana-caps-section::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 50% 40% at 20% 10%, rgba(37,99,235,0.03) 0%, transparent 50%), radial-gradient(ellipse 40% 30% at 80% 90%, rgba(34,211,238,0.04) 0%, transparent 50%), repeating-linear-gradient(45deg, rgba(37,99,235,0.015) 0px, rgba(37,99,235,0.015) 1px, transparent 1px, transparent 24px); pointer-events: none; } .hana-caps-eyebrow { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #2563EB; background: rgba(37,99,235,0.06); border: 1px solid rgba(37,99,235,0.12); border-radius: 100px; padding: 0.35rem 1.1rem 0.35rem 0.9rem; margin-bottom: 1rem; } .hana-caps-dot { width: 7px; height: 7px; border-radius: 50%; background: #2563EB; display: inline-block; flex-shrink: 0; } .hana-section-title { font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: #0f172a; margin-bottom: 0.75rem; } .hana-section-sub { font-size: 1.2rem; line-height: 1.7; max-width: 680px; margin: 0 auto; color: rgba(15,23,42,0.8); } /* ─── ECOSYSTEM CARDS GRID ─── */ .hana-ecosystem { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 2.5rem 0 0; } /* ─── CAPABILITY CARDS ─── */ .hana-cap-card { position: relative; z-index: 1; border-radius: 24px; backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(15,23,42,0.08); /*box-shadow: 0 8px 32px -8px rgba(15,23,42,0.06), 0 0 0 1px rgba(255,255,255,0.6) inset;*/ box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 4px 24px -8px rgba(15,23,42,.10); transition: all 0.35s cubic-bezier(.16,1,.3,1); cursor: default; overflow: hidden; min-height: 280px; } .hana-cap-card::before { content: ''; position: absolute; inset: 0; border-radius: 24px; border: 1.5px solid transparent; background: linear-gradient(135deg, var(--accent, #2563EB), var(--accent, #2563EB)) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s ease; z-index: 2; } .hana-cap-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px -12px rgba(15,23,42,0.12), 0 0 0 1px rgba(255,255,255,0.8) inset; } .hana-cap-card:hover::before { opacity: 1; } /* ─── BACKGROUND IMAGE ─── */ .hana-cap-card-bg-img { position: absolute; bottom: 1rem; right: 1rem; width: 250px; height: 250px; background-size: contain; background-repeat: no-repeat; background-position: bottom right; /*opacity: 0.15;*/ z-index: 1; pointer-events: none; transition: opacity 0.4s ease, transform 0.4s ease; } .hana-cap-card:hover { opacity: 0.25; transform: scale(1.05) translate(-4px, -4px); } /* Card variations - subtle accent top bar */ .hana-cap-card--ux::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #2563EB, #60A5FA); border-radius: 24px 24px 0 0; opacity: 0.6; z-index: 3; } .hana-cap-card--embedded::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #10B981, #34D399); border-radius: 24px 24px 0 0; opacity: 0.6; z-index: 3; } .hana-cap-card--analytics::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #8B5CF6, #A78BFA); border-radius: 24px 24px 0 0; opacity: 0.6; z-index: 3; } .hana-cap-card--extensibility::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #F59E0B, #FBBF24); border-radius: 24px 24px 0 0; opacity: 0.6; z-index: 3; } .hana-cap-card-inner { position: relative; z-index: 2; padding: 1.75rem 1.5rem; display: flex; flex-direction: column; height: 100%; min-height: 260px; } .hana-cap-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .hana-cap-card-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; } .hana-cap-card-badge { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.25rem 0.85rem; border-radius: 100px; white-space: nowrap; } .hana-cap-card-title { font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: 1.25rem; font-weight: 700; color: #0f172a; margin-bottom: 0.4rem; } .hana-cap-card-desc { line-height: 1.6; color: rgba(15,23,42,0.8); margin-bottom: 1rem; width: 60%; } .hana-cap-card-list { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; } .hana-cap-card-list li { display: flex; align-items: center; gap: 0.6rem; color: rgba(15,23,42,0.8); line-height: 1.4; } .hana-cap-card-list-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; display: inline-block; } .hana-cap-card-tech { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.7rem; font-weight: 600; color: rgba(15,23,42,0.5); padding: 0.25rem 0.85rem; border-radius: 100px; background: rgba(15,23,42,0.04); border: 1px solid rgba(15,23,42,0.06); align-self: flex-start; margin-top: auto; } .hana-cap-card-tech i { font-size: 0.65rem; color: var(--accent, #2563EB); } /* ─── RESPONSIVE ─── */ @media (max-width: 768px) { .hana-caps-section { padding: 3rem 0; } .hana-ecosystem { grid-template-columns: 1fr; gap: 1rem; margin: 1.5rem 0 0; } .hana-cap-card-inner { padding: 1.25rem 1.1rem; min-height: 220px; } .hana-cap-card-title { font-size: 1.1rem; } .hana-cap-card-desc { /*font-size: 0.85rem;*/ } .hana-cap-card-list li { /*font-size: 0.8rem;*/ } .hana-cap-card-icon { width: 40px; height: 40px; font-size: 1.1rem; border-radius: 12px; } .hana-section-title { font-size: 1.6rem; } .hana-cap-card-bg-img { width: 150px; height: 150px; } } @media (max-width: 480px) { .hana-cap-card-inner { padding: 1rem 0.9rem; min-height: 200px; } .hana-cap-card-header { flex-wrap: wrap; gap: 0.5rem; } .hana-cap-card-badge { font-size: 0.55rem; padding: 0.15rem 0.6rem; } .hana-cap-card-bg-img { width: 120px; height: 120px; } } /* ─── REVEAL ANIMATION ─── */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(.16, 1, .3, 1), transform 0.7s cubic-bezier(.16, 1, .3, 1); pointer-events: none; } .reveal.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .reveal-delay-1 { transition-delay: 0.08s; } .reveal-delay-2 { transition-delay: 0.16s; } .reveal-delay-3 { transition-delay: 0.24s; } /* ─── HIDE OLD STYLES ─── */ .hana-caps-grid { display: none !important; } /* ================================================================= APA ITU SAP BUSINESS ONE — LANDING PAGE STYLES ================================================================= */ /* ── Override & Additional Styles ── */ :root { --primary: #0B5ED7; --primary-light: #1E88E5; --accent: #00B8D9; --bg-soft: #F8FAFC; --ink: #0F172A; --glass-bg: rgba(255, 255, 255, 0.72); --shadow-card: 0 8px 30px rgba(15, 23, 42, 0.08); --radius-card: 20px; --radius-icon: 14px; } .text-gradient-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .bg-gradient-primary { background: linear-gradient(135deg, var(--primary), var(--primary-light)); } .shadow-soft { box-shadow: var(--shadow-card); } .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--primary); color: #fff; font-weight: 600; padding: 0.75rem 1.75rem; border-radius: 9999px; transition: all 0.2s ease; border: none; cursor: pointer; text-decoration: none; } .btn-primary:hover { background: #0a4fb0; transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(11, 94, 215, 0.3); } .btn-outline { display: inline-flex; align-items: center; gap: 0.5rem; border: 1.5px solid rgba(15, 23, 42, 0.15); color: var(--ink); font-weight: 600; padding: 0.75rem 1.75rem; border-radius: 9999px; transition: all 0.2s ease; background: transparent; cursor: pointer; text-decoration: none; } .btn-outline:hover { background: rgba(15, 23, 42, 0.04); border-color: var(--primary); color: var(--primary); transform: translateY(-2px); } .badge-pill { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(11, 94, 215, 0.08); color: var(--primary); font-weight: 600; font-size: 0.75rem; padding: 0.35rem 1rem 0.35rem 0.75rem; border-radius: 100px; border: 1px solid rgba(11, 94, 215, 0.15); letter-spacing: 0.02em; } .badge-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); } .section-padding { padding: 5rem 0; } @media (max-width: 768px) { .section-padding { padding: 3rem 0; } } .container-narrow { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; } /* Cards */ .card-modern { background: #ffffff; border-radius: 24px; padding: 1.75rem 1.5rem; border: 1px solid rgba(15, 23, 42, 0.06); box-shadow: var(--shadow-card); transition: all 0.25s ease; } .card-modern:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -12px rgba(11, 94, 215, 0.15); border-color: rgba(11, 94, 215, 0.15); } .icon-wrap { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: rgba(11, 94, 215, 0.08); color: var(--primary); font-size: 1.5rem; flex-shrink: 0; } /* Nav override */ .site-nav-header-1 { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border-bottom: 1px solid rgba(15, 23, 42, 0.06); } .site-nav-a-3 { background: var(--primary); color: #fff; padding: 0.5rem 1.25rem; border-radius: 9999px; font-weight: 600; font-size: 0.875rem; transition: background 0.2s; } .site-nav-a-3:hover { background: #0a4fb0; } /* Hero */ .hero-section { padding-top: 7rem; padding-bottom: 4rem; background: var(--bg-soft); position: relative; overflow: hidden; } .hero-section::before { content: ''; position: absolute; top: -20%; right: -10%; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(11, 94, 215, 0.06), transparent 70%); pointer-events: none; } .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } @media (max-width: 1024px) { .hero-grid { grid-template-columns: 1fr; text-align: center; } } .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(11, 94, 215, 0.08); padding: 0.3rem 1rem 0.3rem 0.75rem; border-radius: 100px; font-size: 0.75rem; font-weight: 600; color: var(--primary); margin-bottom: 1.5rem; } .hero-badge::before { content: '✓'; background: var(--primary); color: #fff; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; } .hero-title { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 1.25rem; } .hero-sub { font-size: 1.2rem; line-height: 1.7; color: rgba(15, 23, 42, 0.7); max-width: 540px; margin-bottom: 2rem; } @media (max-width: 1024px) { .hero-sub { margin-left: auto; margin-right: auto; } } .hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } @media (max-width: 1024px) { .hero-cta { justify-content: center; } } .hero-image img { max-width: 100%; height: auto; filter: drop-shadow(0 24px 48px rgba(11, 94, 215, 0.15)); border-radius: 20px; } /* Trusted */ .trusted-section { padding: 2.5rem 0; background: #fff; border-top: 1px solid rgba(15, 23, 42, 0.04); border-bottom: 1px solid rgba(15, 23, 42, 0.04); } .trusted-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.5rem; align-items: center; opacity: 0.5; filter: grayscale(1); transition: opacity 0.3s; } .trusted-grid:hover { opacity: 0.8; } .trusted-grid img { max-width: 100%; max-height: 40px; object-fit: contain; } @media (max-width: 768px) { .trusted-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } } /* What is SAP */ .what-section { background: #ffffff; } .what-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } @media (max-width: 1024px) { .what-grid { grid-template-columns: 1fr; gap: 2rem; } } .what-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; } .what-highlight-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: 12px; background: var(--bg-soft); border: 1px solid rgba(15, 23, 42, 0.04); } .what-highlight-item i { color: var(--primary); font-size: 1.1rem; } /* Features */ .features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } @media (max-width: 1024px) { .features-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .features-grid { grid-template-columns: 1fr; } } .feature-card { background: #fff; border-radius: 20px; padding: 1.5rem 1.25rem; border: 1px solid rgba(15, 23, 42, 0.06); transition: all 0.3s ease; text-align: center; } .feature-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px -12px rgba(11, 94, 215, 0.12); border-color: rgba(11, 94, 215, 0.15); } .feature-card .icon-wrap { margin: 0 auto 1rem; } /* Workflow */ .workflow-section { background: var(--bg-soft); } .workflow-steps { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.75rem 1.5rem; margin-top: 2rem; } .workflow-step { display: flex; align-items: center; gap: 0.5rem; background: #fff; padding: 0.6rem 1.2rem; border-radius: 100px; box-shadow: var(--shadow-card); border: 1px solid rgba(15, 23, 42, 0.04); font-weight: 500; } .workflow-step i { color: var(--primary); } .workflow-arrow { color: rgba(15, 23, 42, 0.2); font-size: 1.2rem; } /* Benefits */ .benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } @media (max-width: 1024px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .benefits-grid { grid-template-columns: 1fr; } } /* Industries */ .industries-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } @media (max-width: 1024px) { .industries-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .industries-grid { grid-template-columns: 1fr 1fr; } } .industry-item { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-radius: 16px; background: #fff; border: 1px solid rgba(15, 23, 42, 0.06); transition: all 0.2s; } .industry-item:hover { border-color: var(--primary); box-shadow: var(--shadow-card); transform: translateY(-3px); } .industry-item i { color: var(--primary); font-size: 1.2rem; width: 28px; text-align: center; } /* Comparison table */ .compare-table-wrap { overflow-x: auto; margin-top: 1.5rem; border-radius: 20px; border: 1px solid rgba(15, 23, 42, 0.06); background: #fff; box-shadow: var(--shadow-card); } .compare-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .compare-table th { background: var(--bg-soft); padding: 1.25rem 1.5rem; text-align: left; font-weight: 700; } .compare-table td { padding: 1rem 1.5rem; border-top: 1px solid rgba(15, 23, 42, 0.04); } .compare-table .highlight { background: rgba(11, 94, 215, 0.04); font-weight: 600; color: var(--primary); } .compare-table .check { color: #10B981; } .compare-table .cross { color: #EF4444; } /* Timeline */ .timeline-horizontal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; margin-top: 2rem; position: relative; } .timeline-horizontal::before { content: ''; position: absolute; top: 2.25rem; left: 5%; right: 5%; height: 3px; background: rgba(11, 94, 215, 0.15); border-radius: 2px; z-index: 0; } .timeline-step { flex: 1 1 0; min-width: 80px; text-align: center; position: relative; z-index: 1; background: #fff; padding: 0.5rem 0.25rem; border-radius: 12px; } .timeline-step .num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; margin-bottom: 0.5rem; box-shadow: 0 4px 12px rgba(11, 94, 215, 0.25); } .timeline-step .label { font-weight: 600; font-size: 0.85rem; } @media (max-width: 768px) { .timeline-horizontal::before { display: none; } .timeline-step { flex: 0 0 calc(50% - 0.5rem); } } /* FAQ */ .faq-list { max-width: 800px; margin: 0 auto; } .faq-item { border-bottom: 1px solid rgba(15, 23, 42, 0.06); padding: 1rem 0; } .faq-question { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border: none; font-weight: 600; font-size: 1.2rem; text-align: left; padding: 0.5rem 0; cursor: pointer; color: var(--ink); transition: color 0.2s; } .faq-question:hover { color: var(--primary); } .faq-question i { transition: transform 0.3s; color: var(--primary); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; color: rgba(15, 23, 42, 0.8); line-height: 1.6; } .faq-item.open .faq-answer { max-height: 300px; } .faq-item.open .faq-question i { transform: rotate(180deg); } /* CTA Banner */ .cta-banner { background: linear-gradient(135deg, var(--primary), var(--primary-light)); border-radius: 32px; padding: 3.5rem 2.5rem; text-align: center; color: #fff; position: relative; overflow: hidden; } .cta-banner::before { content: ''; position: absolute; top: -50%; right: -20%; width: 400px; height: 400px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); pointer-events: none; } .cta-banner h2 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 700; margin-bottom: 1rem; position: relative; z-index: 1; } .cta-banner p { opacity: 0.85; margin-bottom: 2rem; font-size: 1.1rem; position: relative; z-index: 1; } .cta-banner .btn-primary { background: #fff; color: var(--primary); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } .cta-banner .btn-primary:hover { background: #f0f4ff; transform: translateY(-2px); } .cta-banner .btn-outline { border-color: rgba(255, 255, 255, 0.3); color: #fff; } .cta-banner .btn-outline:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; } /* Utility overrides */ .text-center { text-align: center; } .text-sm { font-size: 0.875rem; } .text-lg { font-size: 1.125rem; } .text-xl { font-size: 1.25rem; } .text-2xl { font-size: 1.5rem; } .text-3xl { font-size: 1.875rem; } .text-4xl { font-size: 2.25rem; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .uppercase { text-transform: uppercase; } .tracking-wider { letter-spacing: 0.05em; } .text-gray-400 { color: rgba(156, 163, 175, 1); } .text-gray-500 { color: rgba(107, 114, 128, 1); } .text-gray-600 { color: rgba(75, 85, 99, 1); } .text-gray-700 { color: rgba(55, 65, 81, 1); } .text-red-400 { color: rgba(248, 113, 113, 1); } .text-red-500 { color: rgba(239, 68, 68, 1); } .text-green-500 { color: rgba(34, 197, 94, 1); } .text-primary { color: var(--primary); } .leading-relaxed { line-height: 1.625; } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-10 { margin-top: 2.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .max-w-3xl { max-width: 48rem; } .mx-auto { margin-left: auto; margin-right: auto; } .rounded-2xl { border-radius: 1rem; } .gap-3 { gap: 0.75rem; } .gap-8 { gap: 2rem; } .space-y-3 > * + * { margin-top: 0.75rem; } .flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-center { justify-content: center; } .grid { display: grid; } .md\:grid-cols-2 { grid-template-columns: 1fr; } @media (min-width: 768px) { .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); } } .md\:text-4xl { font-size: 2.25rem; } @media (min-width: 768px) { .md\:text-4xl { font-size: 2.25rem; } } /* ── SECTION ── */ .ebf-section { background: linear-gradient(155deg,#eef2ff 0%,#f5f8ff 45%,#e8eeff 100%); padding: 96px 20px 80px; position: relative; overflow: hidden; /*font-family: 'Inter','Plus Jakarta Sans',sans-serif;*/ } .ebf-section::before { content:""; position:absolute; inset:0; background-image: radial-gradient(circle,rgba(37,99,235,.065) 1px,transparent 1px); background-size: 28px 28px; pointer-events:none; } .ebf-container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; } /* ── HEADER ── */ .ebf-header { text-align: center; margin-bottom: 60px; } .ebf-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.85); border: 1px solid rgba(37,99,235,.18); border-radius: 9999px; padding: 5px 16px; font-size: .775rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--primary); margin-bottom: 20px; backdrop-filter: blur(8px); } .ebf-title { font-family: 'Plus Jakarta Sans','Inter',sans-serif; font-size: clamp(1.9rem, 4.5vw, 3.125rem); font-weight: 800; color: var(--ink); line-height: 1.12; letter-spacing: -.025em; margin-bottom: 16px; } .ebf-title .accent { color: var(--primary); } .ebf-subtitle { /*font-size: 1rem;*/ color: var(--ink-60); max-width: 680px; margin: 0 auto; line-height: 1.75; } /* ── DIAGRAM WRAPPER ── */ .ebf-diagram { position: relative; width: 100%; max-width: 1060px; margin: 0 auto 52px; } /* ── ROW ── */ .ebf-row { display: flex; justify-content: space-between; align-items: stretch; gap: 18px; } .ebf-row--top { margin-bottom: 36px; } .ebf-row--middle { justify-content: center; margin-bottom: 36px; } .ebf-row--bottom { margin-bottom: 36px; } .ebf-row--single { justify-content: center; } /* ── MODULE CARD ── */ .ebf-card { flex: 1; min-width: 0; background: rgba(255,255,255,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.72); border-radius: var(--radius-card); padding: 18px 18px 18px 18px; display: flex; flex-direction: column; gap: 0; box-shadow: 0 6px 24px rgba(15,23,42,.07), 0 1px 0 rgba(255,255,255,.9) inset; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; position: relative; z-index: 3; /*cursor: pointer;*/ } .ebf-card:hover { transform: translateY(-5px); box-shadow: 0 18px 48px rgba(37,99,235,.14); border-color: rgba(37,99,235,.25); } /* cyan dot */ .ebf-card::after { content:""; position:absolute; top:10px; right:10px; width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); } /* card top row: icon + name/sub + arrow */ .ebf-card-top { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; } .ebf-card-icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--radius-icon); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.15); } .ebf-card--sales .ebf-card-icon { background: linear-gradient(135deg,#6ba7f8,#2563EB); } .ebf-card--inventory .ebf-card-icon { background: linear-gradient(135deg,#34d399,#059669); } .ebf-card--finance .ebf-card-icon { background: linear-gradient(135deg,#fbbf24,#d97706); } .ebf-card--warehouse .ebf-card-icon { background: linear-gradient(135deg,#a78bfa,#7c3aed); } .ebf-card--purchasing .ebf-card-icon{ background: linear-gradient(135deg,#f87171,#dc2626); } .ebf-card--crm .ebf-card-icon { background: linear-gradient(135deg,#38bdf8,#0284c7); } .ebf-card--production .ebf-card-icon{ background: linear-gradient(135deg,#818cf8,#4f46e5); } .ebf-card-meta { flex: 1; min-width: 0; } .ebf-card-name { font-size: .9375rem; font-weight: 700; color: var(--ink); display: block; line-height: 1.3; } .ebf-card-sub { font-size: .72rem; color: var(--ink-40); display: block; margin-top: 2px; } .ebf-card-arrow { color: rgba(15,23,42,.22); font-size: 15px; flex-shrink: 0; transition: color .2s, transform .2s; align-self: flex-start; margin-top: 2px; } .ebf-card:hover .ebf-card-arrow { color: var(--primary); transform: translateX(3px); } /* description */ .ebf-card-desc { font-size: .9rem; color: var(--ink-60); line-height: 1.65; margin-top: 2px; padding-top: 10px; border-top: 1px solid rgba(15,23,42,.06); } /* single card (Production) */ .ebf-card--single { flex: 0 0 auto; width: 320px; } /* ── CORE CARD ── */ .ebf-core { background: linear-gradient(135deg,#1d4ed8 0%,#2563EB 55%,#3b82f6 100%); border: 2px solid rgba(255,255,255,.28); border-radius: 28px; padding: 28px 40px; text-align: center; box-shadow: 0 0 0 6px rgba(37,99,235,.14), 0 24px 60px rgba(37,99,235,.38); z-index: 3; position: relative; /*min-width: 300px; max-width: 400px;*/ transition: transform .3s ease, box-shadow .3s ease; } .ebf-core:hover { transform: translateY(-4px); box-shadow: 0 0 0 8px rgba(37,99,235,.20), 0 32px 70px rgba(37,99,235,.48); } .ebf-core-icon-wrap { width: 64px; height: 64px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); border-radius: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; backdrop-filter: blur(8px); } .ebf-core-icon-wrap svg { width: 34px; height: 34px; } .ebf-core-title { font-size: 1.25rem; font-weight: 800; color: #fff; margin-bottom: 4px; letter-spacing: -.01em; } .ebf-core-subtitle { font-size: .8125rem; color: rgba(255,255,255,.72); margin-bottom: 16px; } .ebf-core-badges { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 9999px; padding: 5px 16px; font-size: .71rem; font-weight: 600; color: rgba(255,255,255,.90); } .ebf-core-dot { width: 7px; height: 7px; background: #4ade80; border-radius: 50%; box-shadow: 0 0 6px #4ade80; flex-shrink: 0; } .ebf-badge-sep { color: rgba(255,255,255,.40); font-size: .65rem; } /* ── SVG CONNECTOR LINES ── */ .ebf-connector-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; } /* ── BENEFIT BAR ── */ .ebf-benefits { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; background: rgba(255,255,255,.70); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.60); border-radius: 24px; padding: 24px 28px; box-shadow: 0 4px 24px rgba(15,23,42,.06); } .ebf-benefit { display: flex; align-items: flex-start; gap: 12px; } .ebf-benefit-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: #eff6ff; display: flex; align-items: center; justify-content: center; } .ebf-benefit-icon svg { color: var(--primary); } .ebf-benefit-body {} .ebf-benefit-title { /*font-size: .85rem;*/ font-weight: 700; color: var(--ink); display: block; margin-bottom: 3px; } .ebf-benefit-desc { font-size: .9rem; color: var(--ink-60); line-height: 1.55; } /* ── RESPONSIVE ── */ @media (max-width: 767px) { .ebf-section { padding: 64px 16px 56px; } .ebf-row { flex-direction: column; align-items: stretch; gap: 12px; } .ebf-row--top, .ebf-row--middle, .ebf-row--bottom { margin-bottom: 12px; } .ebf-card--single { width: 100%; } .ebf-core { min-width: 0; max-width: 100%; width: 100%; } .ebf-connector-svg { display: none; } .ebf-benefits { grid-template-columns: 1fr 1fr; gap: 14px; padding: 20px 16px; } } @media (max-width: 480px) { .ebf-benefits { grid-template-columns: 1fr; } } @media (min-width: 768px) and (max-width: 1023px) { .ebf-card-desc { font-size: .74rem; } .ebf-core { min-width: 260px; padding: 22px 28px; } .ebf-benefits { gap: 12px; padding: 20px 20px; } } /* ============================================================ VIDEO TESTIMONI ============================================================ */ .videotesti-section { padding-top: 2rem; padding-bottom: 2rem; } #video-testimoni .solutions-div-7 { margin-left: auto; margin-right: auto; text-align: center; } #video-testimoni .solutions-span-5 { display: inline-flex; align-items: center; gap: 8px; padding: .375rem 1rem; border-radius: 100px; background: rgba(37,99,235,.10); font-size: .75rem; font-weight: 600; letter-spacing: .08em; margin-bottom: 1.25rem; } #video-testimoni .solutions-span-5::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgb(37,99,235); } .videotesti-container { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 1.25rem; padding-right: 1.25rem; } @media (min-width:640px) { .videotesti-container { padding-left: 2rem; padding-right: 2rem; } } /* Grid */ .videotesti-grid { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width:640px) { .videotesti-grid { grid-template-columns: 1fr 1fr; } } @media (min-width:1024px) { .videotesti-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } } /* Card */ .videotesti-card { margin: 0; position: relative; display: flex; flex-direction: column; border-radius: 1.25rem; border: 1px solid rgba(15,23,42,.08); background: rgba(255,255,255,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 4px 24px -8px rgba(15,23,42,.10); overflow: hidden; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease; } .videotesti-card:hover { transform: translateY(-6px); border-color: rgba(37,99,235,.25); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 16px 36px -12px rgba(37,99,235,.30); } /* Thumbnail / iframe wrap (16:9) */ .videotesti-frame-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0f172a; overflow: hidden; } .videotesti-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .videotesti-play-btn { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; display: block; } .videotesti-thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s cubic-bezier(.16,1,.3,1); } .videotesti-play-btn:hover .videotesti-thumb { transform: scale(1.06); } .videotesti-play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3.25rem; height: 3.25rem; border-radius: 9999px; background: linear-gradient(135deg, #2563eb, #22d3ee); display: grid; place-items: center; color: #fff; box-shadow: 0 8px 20px -8px rgba(37,99,235,.65), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .3s cubic-bezier(.16,1,.3,1); } .videotesti-play-btn:hover .videotesti-play-icon { transform: translate(-50%, -50%) scale(1.1); } .videotesti-play-icon svg { margin-left: 2px; } /* Caption */ .videotesti-caption { padding: 1.1rem 1.1rem 1.25rem; } .videotesti-company { font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-weight: 750; font-size: .95rem; line-height: 1.3; color: var(--ink); } .videotesti-desc { margin-top: .4rem; font-size: .85rem; line-height: 1.5; color: rgba(15,23,42,.7); } /* ============================================================ VIDEO TESTIMONI — HANA PAGE ============================================================ */ .hana-testi-section { background: #F8FAFC; padding: 4.5rem 0; } .hana-testi-section .videotesti-grid { margin-top: 0; } /* ── Override for pages using the .yt-facade click-to-play pattern (apa-itu-sap-business-one.html) — nested inside .videotesti-card ── */ .videotesti-card .videotesti-yt-facade.yt-facade { border-radius: 0; box-shadow: none; } .videotesti-card .videotesti-play-icon { z-index: 2; } .videotesti-card .videotesti-yt-facade:hover .videotesti-thumb, .videotesti-card .videotesti-yt-facade:focus-within .videotesti-thumb { transform: scale(1.06); } .videotesti-card .videotesti-yt-facade:hover .videotesti-play-icon, .videotesti-card .videotesti-yt-facade:focus-within .videotesti-play-icon { transform: translate(-50%, -50%) scale(1.1); }