/* ==================================================================== Otto CMMS — sale page theme Ambientech corporate look (deep navy + cyan gradient) combined with the Otto product accent (orange = live / action). Colour tokens come from css/skins/skin-ambientech.css ==================================================================== */ :root { --abt-navy: #0F1424; --abt-navy-2: #16182B; --abt-navy-3: #1D2135; /* Sampled from img/logo.png — the leaf cyan and the badge indigo */ --abt-cyan: #70C3D9; --abt-cyan-light: #8FD3E6; --abt-indigo: #48487F; --otto-orange: #F97316; --abt-gradient: linear-gradient(120deg, #8FD3E6 0%, #70C3D9 55%, #4FA8C4 100%); } /* ------------------------------------------------------------------ Base ------------------------------------------------------------------ */ body { background: var(--abt-navy); color: #aab3c5; -webkit-font-smoothing: antialiased; } /* Porto wraps the page in
and paints it white. Any section that is deliberately translucent (the KPI strip) would otherwise sit on white. */ .body { background: var(--abt-navy); } .custom-secondary-font { font-family: 'Poppins', sans-serif; } /* ------------------------------------------------------------------ Eyebrow label — the "AMBIENTECH — MANUFACTURING CONSULTING" style from the corporate hero ------------------------------------------------------------------ */ .custom-eyebrow { display: inline-block; font-family: 'Poppins', sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 2.6px; text-transform: uppercase; color: var(--abt-cyan); margin-bottom: 1rem; } .custom-eyebrow-light { color: rgba(255, 255, 255, 0.55); } /* ------------------------------------------------------------------ Header ------------------------------------------------------------------ */ /* Do NOT transition the background here. Transitions outrank !important in the cascade, and with the sticky class being applied by JS the background stayed latched at transparent — no rule, not even an inline !important, could repaint the bar. Only box-shadow is animated; the colour swaps instantly. */ #header .header-body { background: transparent; transition: box-shadow .3s ease; } /* Porto puts the sticky flag on , not on the header itself. */ html.sticky-header-active #header .header-body { background: rgba(15, 20, 36, 0.94) !important; backdrop-filter: blur(10px); box-shadow: 0 6px 26px rgba(0, 0, 0, 0.42); border-bottom: 1px solid rgba(94, 194, 222, 0.14) !important; } #header .header-nav-main nav > ul > li > a { font-family: 'Poppins', sans-serif; font-size: 0.76rem; font-weight: 600; letter-spacing: 1.4px; color: rgba(255, 255, 255, 0.72) !important; } #header .header-nav-main nav > ul > li > a:hover, #header .header-nav-main nav > ul > li.active > a { color: #fff !important; } /* css/demos/demo-sass.css forces the sticky nav to var(--dark) because that demo used a WHITE sticky bar. Ours is dark navy, so dark text disappears. These mirror its selectors exactly (same specificity, later in the cascade). Kept inside the same 992px media query it uses — below that the nav is the collapsed mobile panel, where Porto's own dark-on-cyan styling is correct. */ /* Collapsed mobile menu: the active item sits on a solid primary-cyan pill. Porto styles that text light, which is ~2:1 on our light cyan — use the dark inverse instead. */ @media (max-width: 991px) { #header .header-nav-main.header-nav-main-mobile-dark nav > ul > li > a.active, #header .header-nav-main.header-nav-main-mobile-dark nav > ul > li.active > a { color: var(--primary-inverse) !important; } } @media (min-width: 992px) { html.sticky-header-active #header .header-nav-main nav > ul > li > a { color: rgba(255, 255, 255, 0.72) !important; } html.sticky-header-active #header .header-nav-main nav > ul > li:hover > a, html.sticky-header-active #header .header-nav-main nav > ul:not(:hover) > li > a.active { color: #fff !important; } /* ...and the underline beneath the active / hovered item. */ html.sticky-header-active #header .header-nav-main nav > ul > li:hover > a:before, html.sticky-header-active #header .header-nav-main nav > ul:not(:hover) > li > a.active:before { background: var(--abt-cyan) !important; } } /* ------------------------------------------------------------------ Brand lockup — the real mark (img/logo.png) plus the wordmark, composed in markup so the logo file itself stays untouched. ------------------------------------------------------------------ */ .custom-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; } /* img/logo.png is a 1259x1259 mark centred horizontally but sitting low in a 2026x1589 transparent canvas. These values crop to the mark itself so it fills the box and sits optically centred, at any box size: size = 100/0.6214 and 100/0.7923 (the fractions the mark occupies) position = 50% across; 72.83% down re-centres the low-sitting mark. */ .custom-brand-mark { width: 42px; height: 42px; flex: 0 0 42px; background-image: url(../img/logo.png); background-size: 160.92% 126.31%; background-position: 50% 72.83%; background-repeat: no-repeat; } .custom-brand-text { display: flex; flex-direction: column; line-height: 1; } .custom-brand-name { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.16rem; letter-spacing: 1.7px; color: #fff; } .custom-brand-tagline { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 0.5rem; letter-spacing: 2.9px; color: var(--abt-cyan); margin-top: 4px; } /* Dark-on-light variant, for any page that needs it */ .custom-brand-dark .custom-brand-name { color: #16182B; } @media (max-width: 400px) { .custom-brand-mark { width: 34px; height: 34px; flex-basis: 34px; } .custom-brand-name { font-size: 0.98rem; letter-spacing: 1.2px; } .custom-brand-tagline { font-size: 0.44rem; letter-spacing: 2.2px; } } /* ------------------------------------------------------------------ Buttons — corporate gradient CTA + Otto orange action ------------------------------------------------------------------ */ .btn-abt { background: var(--abt-gradient); border: 0; color: #0B1020; font-weight: 700; letter-spacing: 1.2px; box-shadow: 0 10px 28px rgba(94, 194, 222, 0.28); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; } .btn-abt:hover, .btn-abt:focus { color: #0B1020; filter: brightness(1.07); transform: translateY(-2px); box-shadow: 0 16px 36px rgba(94, 194, 222, 0.38); } .btn-otto { background: var(--otto-orange); border: 0; color: #fff; font-weight: 700; letter-spacing: 1.2px; box-shadow: 0 10px 28px rgba(249, 115, 22, 0.3); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; } .btn-otto:hover, .btn-otto:focus { color: #fff; filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 16px 36px rgba(249, 115, 22, 0.42); } .btn-ghost-light { background: transparent; border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; font-weight: 600; letter-spacing: 1.2px; transition: border-color .25s ease, background .25s ease; } .btn-ghost-light:hover, .btn-ghost-light:focus { color: #fff; border-color: var(--abt-cyan); background: rgba(94, 194, 222, 0.1); } /* ------------------------------------------------------------------ Hero ------------------------------------------------------------------ */ /* Selectors are qualified as `section.section.x` so they outrank Porto's own `section.section { background: var(--grey-100) }` in theme-elements.css. */ .custom-hero, section.section.custom-hero { position: relative; background: radial-gradient(1100px 620px at 78% 18%, rgba(94, 194, 222, 0.17) 0%, rgba(94, 194, 222, 0) 62%), radial-gradient(820px 520px at 12% 82%, rgba(249, 115, 22, 0.11) 0%, rgba(249, 115, 22, 0) 60%), linear-gradient(168deg, #101628 0%, #0F1424 48%, #0B0F1C 100%); overflow: hidden; } .custom-hero:after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px); background-size: 74px 74px; -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 72%); mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 72%); pointer-events: none; } .custom-hero .container { position: relative; z-index: 3; } .custom-hero-title { font-family: 'Poppins', sans-serif; font-weight: 800; line-height: 1.12; letter-spacing: -1px; color: #fff; } /* "Otto" carries the product's own orange — the same value as the BOOK A DEMO button and the pulsing dot in the Otto logo. */ .custom-hero-title .custom-accent { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; color: var(--otto-orange); } .custom-hero-lead { color: rgba(255, 255, 255, 0.68); font-size: 1.12rem; line-height: 1.75; } /* Live pill — mirrors Otto's "Live • 2s ago" indicator */ .custom-live-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; background: rgba(249, 115, 22, 0.12); border: 1px solid rgba(249, 115, 22, 0.34); color: #FDBA74; font-size: 0.74rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; } .custom-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--otto-orange); box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.65); animation: ottoPulse 2s infinite; } @keyframes ottoPulse { 0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.6); } 70% { box-shadow: 0 0 0 11px rgba(249, 115, 22, 0); } 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); } } @media (prefers-reduced-motion: reduce) { .custom-live-dot { animation: none; } .btn-abt:hover, .btn-otto:hover { transform: none; } } /* ------------------------------------------------------------------ Sections on dark ------------------------------------------------------------------ */ .custom-section-dark, section.section.custom-section-dark { background: var(--abt-navy); border: 0; } .custom-section-darker, section.section.custom-section-darker { background: linear-gradient(180deg, #0B0F1C 0%, #0F1424 100%); border: 0; } .custom-section-title { font-family: 'Poppins', sans-serif; font-weight: 800; color: #fff; letter-spacing: -0.5px; } .custom-section-lead { color: rgba(255, 255, 255, 0.58); font-size: 1.05rem; } /* ------------------------------------------------------------------ Feature / module cards ------------------------------------------------------------------ */ .custom-module-card { height: 100%; padding: 2.1rem 1.9rem; border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.018) 100%); border: 1px solid rgba(255, 255, 255, 0.09); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .custom-module-card:hover { transform: translateY(-5px); border-color: rgba(94, 194, 222, 0.42); box-shadow: 0 20px 46px rgba(0, 0, 0, 0.4); } .custom-module-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; background: rgba(94, 194, 222, 0.13); border: 1px solid rgba(94, 194, 222, 0.28); color: var(--abt-cyan); font-size: 1.35rem; margin-bottom: 1.15rem; } .custom-module-card.custom-module-otto .custom-module-icon { background: rgba(249, 115, 22, 0.13); border-color: rgba(249, 115, 22, 0.3); color: var(--otto-orange); } .custom-module-card h4 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.06rem; color: #fff; margin-bottom: 0.6rem; } .custom-module-card p { color: rgba(255, 255, 255, 0.58); font-size: 0.93rem; line-height: 1.68; margin-bottom: 0; } /* KPI chips inside cards */ .custom-kpi-chip { display: inline-block; padding: 3px 10px; margin: 0.55rem 0.35rem 0 0; border-radius: 6px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.72); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.6px; } /* ------------------------------------------------------------------ Product screenshots ------------------------------------------------------------------ */ .custom-shot { border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.11); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5); background: var(--abt-navy-2); } .custom-shot img { display: block; width: 100%; height: auto; } /* Browser chrome above a screenshot */ .custom-shot-chrome { display: flex; align-items: center; gap: 6px; padding: 9px 13px; background: #0C1020; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .custom-shot-chrome span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); } .custom-shot-chrome span:first-child { background: rgba(249, 115, 22, 0.75); } /* ------------------------------------------------------------------ Stat / counter strip ------------------------------------------------------------------ */ .custom-stat-strip { background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.012) 100%); border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .custom-stat-value { font-family: 'Poppins', sans-serif; font-weight: 800; color: #fff; line-height: 1; } .custom-stat-label { color: rgba(255, 255, 255, 0.5); font-size: 0.82rem; letter-spacing: 1.1px; text-transform: uppercase; margin-top: 0.6rem; } /* ------------------------------------------------------------------ Pricing ------------------------------------------------------------------ */ .custom-plan { height: 100%; padding: 2.2rem 1.9rem; border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%); border: 1px solid rgba(255, 255, 255, 0.1); transition: transform .3s ease, border-color .3s ease; } .custom-plan:hover { transform: translateY(-4px); border-color: rgba(94, 194, 222, 0.35); } .custom-plan-featured { border-color: rgba(94, 194, 222, 0.55); box-shadow: 0 22px 54px rgba(94, 194, 222, 0.14); position: relative; } .custom-plan-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 5px 15px; border-radius: 999px; background: var(--abt-gradient); color: #0B1020; font-size: 0.68rem; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; white-space: nowrap; } .custom-plan h3 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.12rem; color: #fff; margin-bottom: 0.35rem; } .custom-plan-for { color: rgba(255, 255, 255, 0.45); font-size: 0.84rem; min-height: 2.5rem; } .custom-plan-price { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 2.05rem; color: #fff; margin: 1rem 0 0.15rem; line-height: 1.1; } .custom-plan-price small { font-size: 0.82rem; font-weight: 500; color: rgba(255, 255, 255, 0.45); } .custom-plan ul { list-style: none; padding: 0; margin: 1.35rem 0 1.6rem; } .custom-plan ul li { position: relative; padding: 0.42rem 0 0.42rem 1.7rem; color: rgba(255, 255, 255, 0.68); font-size: 0.9rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .custom-plan ul li:before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: 0.42rem; color: var(--abt-cyan); font-size: 0.78rem; } /* ------------------------------------------------------------------ FAQ toggles on dark ------------------------------------------------------------------ */ .custom-faq .toggle > label, .custom-faq .toggle > .toggle-title { background: rgba(255, 255, 255, 0.035) !important; border: 1px solid rgba(255, 255, 255, 0.09) !important; border-radius: 10px !important; color: #fff !important; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.97rem; padding: 1.05rem 1.3rem 1.05rem 3rem !important; } .custom-faq .toggle > label:before, .custom-faq .toggle > .toggle-title:before { color: var(--abt-cyan) !important; left: 1.15rem !important; } .custom-faq .toggle .toggle-content p { color: rgba(255, 255, 255, 0.6); padding: 1rem 1.3rem 0.4rem; margin-bottom: 0; line-height: 1.75; } .custom-faq .toggle { margin-bottom: 0.7rem; } /* ------------------------------------------------------------------ Contact / demo form ------------------------------------------------------------------ */ .custom-form-card { padding: 2.4rem; border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); } .custom-form-card .form-control { background: rgba(11, 16, 32, 0.62); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 8px; color: #fff; padding: 0.82rem 1rem; font-size: 0.94rem; transition: border-color .2s ease, box-shadow .2s ease; } .custom-form-card .form-control::placeholder { color: rgba(255, 255, 255, 0.35); } .custom-form-card .form-control:focus { background: rgba(11, 16, 32, 0.85); border-color: var(--abt-cyan); box-shadow: 0 0 0 3px rgba(94, 194, 222, 0.16); color: #fff; } .custom-form-card label.error { color: #FCA5A5; font-size: 0.8rem; margin-top: 0.3rem; } /* ------------------------------------------------------------------ Footer ------------------------------------------------------------------ */ #footer.custom-footer { background: #0B0F1C; border-top: 1px solid rgba(255, 255, 255, 0.08); margin: 0; } #footer.custom-footer h5 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 0.82rem; letter-spacing: 1.6px; text-transform: uppercase; color: #fff; margin-bottom: 1.15rem; } #footer.custom-footer a { color: rgba(255, 255, 255, 0.58); text-decoration: none; transition: color .2s ease; } #footer.custom-footer a:hover { color: var(--abt-cyan); } #footer.custom-footer p { color: rgba(255, 255, 255, 0.5); } #footer.custom-footer .footer-copyright { background: transparent; border-top: 1px solid rgba(255, 255, 255, 0.07); margin-top: 0; } /* ------------------------------------------------------------------ Responsive ------------------------------------------------------------------ */ @media (max-width: 991px) { .custom-hero-title { font-size: 2.3rem !important; } .custom-form-card { padding: 1.7rem; } } @media (max-width: 575px) { .custom-hero-title { font-size: 1.95rem !important; } .custom-plan-price { font-size: 1.8rem; } }