tags needs its own spacing rule. Both of
these about.html blocks originally held a single vendor-copy
paragraph (no gap needed); now that "Where We Started" and "About
CTI" each use multiple real paragraphs, add the gap back scoped to
just these two blocks rather than changing the global p rule. */
.about-two__content .text p + p,
.about-one__content-text p + p {
margin-top: 16px;
}
/* Content-only hero pages (no mockup, just a short title + one line
of text) don't need the standard 1899x620 .product-hero height
every products-*.html page uses — 1899x320 per request, first for
about.html, then reused as-is for faq.html and contact.html.
.product-hero is already display:flex + align-items:center, so
this just lowers the min-height floor and the existing flex
centering keeps the content vertically centered within it (content
+ the base 130px/30px top/bottom padding measures ~304px at the
1899px reference width, so it fits inside 320px without the box
growing past the floor). Now shared by about.html, faq.html,
contact.html, and pricing.html — all content-only heroes with a
short title + one line of text. */
.product-hero--compact {
min-height: 320px;
}
@media only screen and (max-width: 767px) {
.product-hero--compact {
min-height: 260px;
}
}
/*====================================================================
Pricing page (2026-08-19)
Body content between the hero and the final CTA, built to reuse
existing components rather than invent new visual language:
- .pricing-page__intro: just a spacing wrapper around the standard
.section-title + .services-tabs__intro-text pair already used
for page intros elsewhere (e.g. Financial Management's "See It
In Action").
- The "what shapes your price" row reuses .working-process-one /
.working-process-one__single as-is (same numbered-circle/icon/
title pattern as every product page's "How It Works" section),
just 2 columns instead of 4 since there are only two factors —
which also gives each card room for two paragraphs instead of
one, hence the p+p rule below.
- The pull-quote callout reuses .blog-details__content-text2 /
.text-box directly (same dark box + centered heading every
product page's blog-details section already uses) rather than
duplicating that visual in a new class; only its supporting
paragraph needed a new rule, since existing usage is
heading-only.
- The final CTA reuses .subscribe-one__inner, the same box every
product page already ends with (see .subscribe-one__btn-group
above) — only the supporting paragraph under the heading is new,
since existing usage there is headline+button only.
======================================================================*/
.pricing-page__intro {
padding: 120px 0 0;
}
.working-process-one__text p + p {
margin-top: 16px;
}
.pricing-page__callout {
padding: 0 0 120px;
}
.blog-details__content-text2 .text-box p {
margin-top: 12px;
}
.subscribe-one__inner .title-box p {
color: var(--thm-white);
max-width: 560px;
margin: 16px auto 0;
}
/*====================================================================
Header nav links: 20px
header.css sets the top-level nav links (.navbar-wrap ul li a) to
16px. Only the top-level links are enlarged here (>ul>li>a): the
dropdown items keep their own 15px size (.sub-menu li a), and the
mobile menu is unaffected because main.js clones the menu outside
.navbar-wrap. Same specificity as the header.css rule, so it wins by
loading later. The links' line-height (20px) and the bar's height
(set by the 140px logo) need no change.
======================================================================*/
.navbar-wrap > ul > li > a {
font-size: 20px;
}
/*====================================================================
Header dropdown (Products): 5px rounded corners
header.css sets .sub-menu to border-radius: 0. overflow: hidden is
needed alongside the radius so the solid hover highlight on the
first and last items is clipped to the rounded corners instead of
poking out square. It would also clip a second-level flyout
(.sub-menu .sub-menu), but no CTI page has one. Same selector as
the header.css rule, so it wins by loading later. The mobile menu
is unaffected because it is cloned outside .navbar-wrap.
======================================================================*/
.navbar-wrap ul li .sub-menu {
border-radius: 5px;
overflow: hidden;
}
/*====================================================================
Compact sticky header (desktop)
Unscrolled, the header keeps the full 140px logo over the hero (the
bar's height is set by the logo). Once main.js adds .sticky-menu
(after 245px of scroll) the bar compacts to ~76px: the logo drops
to 60px and the nav links' vertical padding to 28px (header.css
gives them 35px, which was what made the old sticky bar 90px+).
- The logo's slot is pinned at 140px wide (min-width) so the nav,
which is centered between the logo and the right-hand cluster,
doesn't slide sideways when the logo shrinks.
- The sticky background is the theme's own --thm-black-bg at 92%
opacity with a backdrop blur, plus a hairline bottom edge, so it
reads as a light bar instead of a solid block. color-mix() keeps it
theme-aware; a browser without it ignores the declaration and keeps
header.css's solid background.
- Desktop only: below 1200px responsive.css makes .sticky-menu
position: static, so the header never sticks there.
======================================================================*/
@media only screen and (min-width: 1200px) {
.main-header-one .logo-box-one {
min-width: 140px;
}
.sticky-menu .logo-box-one img.logo-mark {
max-height: 60px;
}
.sticky-menu .navbar-wrap > ul > li > a {
padding: 28px 0;
}
.sticky-menu {
background-color: color-mix(in srgb, var(--thm-black-bg) 92%, transparent);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.25);
}
html[theme="light"] .sticky-menu {
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.1);
}
}
/*====================================================================
Compact header (tablet / phone)
Below 1200px the header is a normal in-flow bar (it never sticks),
so instead of compacting on scroll it is simply shorter all the
time: a 56px logo and a hamburger with 17px of vertical padding
(header.css gives it 29px/30px) make the bar ~64px instead of the
140px the full logo forced. The slide-out menu panel keeps its own
full-size logo.
======================================================================*/
@media only screen and (max-width: 1199px) {
.main-header-one .logo-box-one img.logo-mark {
max-height: 56px;
}
.menu-area .mobile-nav-toggler {
padding: 17px 0;
}
}
/*====================================================================
Theme toggle, light theme: flat amber sun, no button background
In light theme the toggle shows assets/icons/sun-amber.svg (a disc
with eight short rays, #E2A03F, 24x24 artwork) with no circular
backdrop, instead of the one-color masked starburst on a gray
circle. It is a real two-part colored image, so it is drawn with
background-image and the mask above is switched off (the
mask + background-color recipe can only paint one flat color).
One amber reads on every surface the sun appears on (the dark home
hero, the blue page banners, the light sticky bar, the white mobile
menu panel), so the per-context icon colors above don't apply to
it. The selector lists mirror each existing light-mode context so
these win over them at equal specificity by coming later. The icon
box is inset 7px to make it 24px inside the 38px button. The dark
theme's moon keeps its mask icon but loses the circle too (below).
======================================================================*/
html[theme="light"] .theme-toggle-btn,
html[theme="light"] .main-header-one .theme-toggle-btn,
html[theme="light"] .main-header-two .theme-toggle-btn,
html[theme="light"] .sticky-menu .theme-toggle-btn,
html[theme="light"] .mobile-menu .menu-box .theme-toggle-btn {
background-color: transparent;
}
html[theme="light"] .theme-toggle-btn::before,
html[theme="light"] .main-header-one .theme-toggle-btn::before,
html[theme="light"] .main-header-two .theme-toggle-btn::before,
html[theme="light"] .sticky-menu .theme-toggle-btn::before,
html[theme="light"] .mobile-menu .menu-box .theme-toggle-btn::before {
inset: 7px;
background-color: transparent;
background-image: url("../icons/sun-amber.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
-webkit-mask-image: none;
mask-image: none;
}
/* Dark theme: the moon has no backdrop either. The default button has a
translucent white circle, and the mobile menu panel (always white)
gives it a light-gray one; the longer selector beats that panel rule's
specificity. Only the circle goes; the moon's size and color are as
before. */
html[theme="dark"] .theme-toggle-btn,
html[theme="dark"] .mobile-menu .menu-box .theme-toggle-btn {
background-color: transparent;
}
/*====================================================================
Midnight palette: always-dark and always-light surfaces
The tokens at the top of this file follow the theme, but some
surfaces do not: heroes, page banners, the call-to-action band, the
"How It Works" band and the footer stay dark in BOTH themes, and the
mobile menu panel stays white in both. Re-declaring the tokens on
those containers means everything inside them (text, links, buttons,
icons) resolves to the right values regardless of the page theme,
instead of needing a light-mode patch per component.
======================================================================*/
.platform-hero,
.product-hero,
.page-header,
.subscribe-one,
.footer-one,
.footer-one__two,
.working-process-one {
--thm-primary-color: #2FA5FC;
--thm-secondary-color: #1790F6;
--thm-body-font-color: #C9D3E6;
--thm-paragraph-color: #C9D3E6;
--thm-heading-font-color: #FFFFFF;
--thm-black-bg: #0C1B3D;
--black-bg: #0C1B3D;
--cti-on-primary: #011238;
}
.mobile-menu {
--thm-primary-color: #0474DB;
--thm-secondary-color: #014CA6;
--cti-on-primary: #FFFFFF;
}
::selection {
background: var(--thm-primary-color);
color: var(--cti-on-primary);
}
/*====================================================================
Midnight palette: buttons
Primary fills are sky blue in dark theme, which only holds NAVY text
(white on #2FA5FC is 2.7:1), so every primary-filled control takes
--cti-on-primary for its text and glyph (navy on sky, white on the
light theme's #0474DB). The hover swipe is the bright blue
(--thm-secondary-color) and keeps the same text color.
======================================================================*/
.button-style-1,
.button-style-1:hover,
.platform-hero__btn--solid,
.platform-hero__btn--solid:hover,
.scroll-top,
.services-tabs__nav .nav-link.active {
color: var(--cti-on-primary);
}
/* "Request A Consultation" (.secondary-white) is the SECONDARY button
now: transparent with a sky outline and white text, filling with sky
(navy text) on hover. The outline is an inset shadow so the button
keeps its size. Literal colors, not tokens: it only ever sits on the
dark call-to-action band, in both themes. */
.button-style-1.secondary-white {
background-color: transparent;
box-shadow: inset 0 0 0 1.5px #2FA5FC;
color: #FFFFFF;
}
.secondary-white:before,
.secondary-white:after {
background-color: #2FA5FC;
}
.button-style-1.secondary-white:hover {
color: #011238;
}
/* The band's second button (white outline, see its comment above)
needs white text now that .button-style-1 text is navy by default,
and a navy label when it fills white on hover. */
.subscribe-one__btn-outline {
color: #FFFFFF;
}
.subscribe-one__btn-outline:hover {
color: #011238;
}
/*====================================================================
Midnight palette: call-to-action band
Was a solid cerulean block. Now the Midnight band: card navy fading
to logo navy, with a thin sky outline (inset shadow, so the band's
size is unchanged). The circuit artwork (.shape1) stays on top.
======================================================================*/
.subscribe-one__inner {
background: linear-gradient(110deg, #0C1B3D 0%, #012962 100%);
box-shadow: inset 0 0 0 1px rgba(47, 165, 252, 0.35);
}
/*====================================================================
Midnight palette: card icon squares (logo blue)
The service / "What You Get" card icon was a bare 50px glyph (white,
turning primary on hover). It is now a 56px rounded square filled
with the logo blue (--cti-ico, #0474DB) and a white glyph, as in the
approved palette preview. The glyph stays white in both themes and on
hover (the light-theme rule earlier in this file recolors it to the
primary blue, which would vanish on this fill).
======================================================================*/
.services-one__single-title .icon {
display: grid;
place-items: center;
flex: none;
width: 56px;
height: 56px;
margin-right: 20px;
border-radius: 10px;
background: var(--cti-ico);
}
.services-one__single-title .icon span,
html[theme="light"] .services-one__single-title .icon span,
.services-one__single:hover .services-one__single-title .icon span {
color: #FFFFFF;
font-size: 26px;
line-height: 1;
}
.services-one__single:hover .services-one__single-title .icon span {
transform: scale(0.92);
}
/*====================================================================
Midnight palette: fixes found by the contrast audit
A rendered-text contrast audit (every text element vs. the
background actually behind it, all pages, both themes) turned up
these; everything else passed.
- Outline buttons in pricing cards (.pricing-btn .button-style-1)
are transparent, so their text must follow the page (white in dark,
navy in light) and only take the on-primary color once the hover
fill arrives.
- White text on primary fills (comparison table "popular" header,
dashboard sidebar logo chip) becomes --cti-on-primary.
- The faint mock-dashboard captions were already under 4.5:1 before
the palette change; darkened / made less transparent.
- The decorative "01/02/03" numerals sit on the always-dark process
band, so the light theme's near-black tint is replaced by a white
one.
======================================================================*/
/* "Read More" (.button-style-2) hardcoded a near-black fill
(#141416) with a primary-colored icon. It is now a primary button
like the approved preview: primary fill, on-primary text and icon,
bright secondary fill on hover. */
.button-style-2 {
background-color: var(--thm-primary-color);
color: var(--cti-on-primary);
}
.button-style-2 i {
color: var(--cti-on-primary);
}
.button-style-2:hover {
background-color: var(--thm-secondary-color);
color: var(--cti-on-primary);
}
/* The footer's social-icon chip is a primary fill, so its glyphs take
the on-primary color too (white on sky is 2.7:1). */
.footer-social-link a,
.footer-social-link a i {
color: var(--cti-on-primary);
}
.pricing-btn .button-style-1 {
color: var(--thm-heading-font-color);
}
.pricing-btn .button-style-1:hover {
color: var(--cti-on-primary);
}
.pricing-compare thead th.popular,
.pricing-compare thead th.popular .plan-name,
.pricing-compare thead th .plan-badge {
color: var(--cti-on-primary);
}
.pricing-compare tbody td.popular {
background: rgba(47, 165, 252, 0.08);
}
.dashboard-preview__sidebar-logo {
color: var(--cti-on-primary);
}
.platform-hero__mockup-label,
.platform-hero__stat-name {
color: #63708A;
}
.dashboard-preview__chart-label {
color: rgba(255, 255, 255, 0.6);
}
html[theme="light"] .working-process-one__big-text {
color: rgba(255, 255, 255, 0.1);
}
/*====================================================================
Midnight palette: icon fills are logo blue
Same rule as the card icon squares: a white glyph on the sky
primary is only 2.7:1, so icon chips and badges that were filled
with --thm-primary-color take the logo-blue --cti-ico fill (white
glyph, 4.6:1) instead. Found by auditing glyph-vs-fill contrast:
the contact-page icon circles, the "+" badge on the About photos and
the circle behind each "How It Works" step icon. Also lifted two
hardcoded grays that were under 3:1 on the navy surfaces: the
"not included" crosses in the comparison table and the dashboard
mockup's sidebar icons.
======================================================================*/
.contact-page__contact-info ul li .icon-box,
.about-one__img-icon a,
.working-process-one__title .circle {
background: var(--cti-ico);
}
.pricing-compare tbody td i.fa-xmark {
color: #7A87A6;
}
.dashboard-preview__sidebar-nav li {
color: rgba(255, 255, 255, 0.55);
}
/* Hairlines: the template hardcoded dark grays (#363638, #424244,
#525254, #3d3d3f) that look off against navy. They now use
--cti-line (sky-tinted in dark, soft blue-gray in light). The footer
is dark in both themes, so its rule is a literal sky tint. */
.footer-bottom,
.footer-one__two .footer-bottom__inner {
border-top-color: rgba(47, 165, 252, 0.18);
}
.blog-details__content-text1 {
border-top-color: var(--cti-line);
}
.sidebar__category-list li {
border-bottom-color: var(--cti-line);
}
.pricing-compare thead th,
.pricing-compare tbody td {
border-bottom-color: var(--cti-line);
}
/*====================================================================
Mobile polish, part 1: home page, product heroes, footer
(2026-10-26; part 2 for the other content pages follows below)
Below 768px the home page was the desktop layout simply stacked: a
hero that kept 160px of top padding for the overlay header (which
only exists from 1200px up, so there was a dead gap under the
in-flow bar) followed by the whole dashboard mockup, six 40px-padded
product cards with a 50px row-gap, a four-photo collage whose
195-315px source images were stretched to ~400px each (about two
screens of scrolling), and a footer with 120px of top padding, a
140px logo and 60px margins around each stacked widget.
Everything here is scoped to max-width: 767px, so tablet and desktop
are unchanged. Mind the class names when scoping: .platform-hero__*
is NOT home-only. The same markup is the dashboard card in every
.product-hero, the content of the "See X In Action" tab mockups
(.services-tabs__mockup, Financial and Inventory) and the title/text/
buttons of the compact banners. Mockup rules are therefore keyed to
:is(.platform-hero, .product-hero), never to the bare class; the
shared hero type/button rules are deliberately for all of them. The
footer is shared, and every page uses the same .footer-one--navy
markup, so it applies site-wide.
- Hero (home + product pages): the mockup becomes a swipeable strip
of stat tiles (CSS only, using the existing markup: the column and
stat-grid wrappers become display: contents so the tiles are flex
children of the scroller; red alert tiles and each grid's 4th tile
are hidden, plus the header, labels and charts).
- Product cards (home + .services-one--services): tighter padding,
smaller icon/title, 16px gap.
- About (index.html, about.html via .about-one--compact): the four
photos as a 2x2 grid of short 4:3 tiles (4:3 avoids upscaling the
195x130 photo). Photos first on the home page; about.html adds
.about-one--text-first to put its story text above them.
- Footer: centered brand block, no Quick Links, Products as two
side-by-side lists, shorter logo and spacing.
======================================================================*/
/* Desktop value of the two About paragraphs (was an inline style). */
.about-one__lead {
font-size: 18px;
}
@media only screen and (max-width: 767px) {
/* --- Hero --- */
.platform-hero {
padding: 44px 0 52px;
}
/* minmax(0, 1fr), not 1fr: a plain 1fr track won't shrink below
its content's min-content width, and the stat strip below is as
wide as all four tiles even though it scrolls. */
.platform-hero__inner {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
}
.platform-hero__text {
font-size: 16px;
line-height: 26px;
margin-top: 16px;
}
.platform-hero__btn-box {
gap: 12px;
margin-top: 26px;
}
.platform-hero__btn {
min-height: 48px;
padding: 12px 22px;
justify-content: center;
}
/* Dashboard mockup -> swipeable stat strip, in the two heroes only
(:is() keeps the specificity of a single class, the same as
.product-hero .platform-hero__mockup earlier in this file, so
these win by coming later). Every selector below is scoped on
purpose: the same .platform-hero__mockup / __stat markup is also
used by the in-page "See X In Action" tab mockups
(.services-tabs__mockup on the Financial and Inventory pages),
which are not heroes and must keep their full card.
The strip bleeds to the screen edges (negative margin cancels the
container's 15px padding, the scroller's own padding puts it
back) so the tiles slide off-screen instead of being clipped by
the gutter. */
:is(.platform-hero, .product-hero) .platform-hero__mockup {
margin: 0 -15px;
max-width: none;
padding: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
:is(.platform-hero, .product-hero) .platform-hero__mockup-header,
:is(.platform-hero, .product-hero) .platform-hero__mockup-label,
:is(.platform-hero, .product-hero) .platform-hero__mockup-col:nth-child(2) {
display: none;
}
:is(.platform-hero, .product-hero) .platform-hero__mockup-body {
display: flex;
gap: 10px;
padding: 0 15px 4px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-left: 15px;
scrollbar-width: none;
}
:is(.platform-hero, .product-hero) .platform-hero__mockup-body::-webkit-scrollbar {
display: none;
}
:is(.platform-hero, .product-hero) .platform-hero__mockup-col:first-child,
:is(.platform-hero, .product-hero) .platform-hero__stat-grid {
display: contents;
}
/* Which tiles survive: never the red alert tiles (Overdue,
Unassigned, Low Stock...), and never a grid's 4th tile, so a
grid contributes at most three. On the home hero that is Invoices
Sent, Collected, Work Orders Open and Completed MTD. */
:is(.platform-hero, .product-hero) .platform-hero__stat--red,
:is(.platform-hero, .product-hero) .platform-hero__stat:nth-child(4) {
display: none;
}
:is(.platform-hero, .product-hero) .platform-hero__stat {
flex: 0 0 148px;
scroll-snap-align: start;
padding: 14px 16px;
}
:is(.platform-hero, .product-hero) .platform-hero__stat-num {
font-size: 26px;
}
:is(.platform-hero, .product-hero) .platform-hero__stat-name {
font-size: 12px;
}
/* Product heroes: the 130px top padding clears the overlay header
that only exists from 1200px up, and the 460px floor was sized
for the full dashboard card. Neither applies to the strip. The
compact banners (About, Pricing, FAQ, Contact) keep their own
260px floor. */
.product-hero:not(.product-hero--compact) {
min-height: 0;
padding: 44px 0 40px;
}
/* --- Product cards --- */
#platform-capabilities {
padding-top: 48px;
}
:is(#platform-capabilities, .services-one--services) .section-title {
padding-bottom: 28px;
}
:is(#platform-capabilities, .services-one--services) .section-title h5 {
font-size: 13px;
line-height: 22px;
letter-spacing: 2px;
}
:is(#platform-capabilities, .services-one--services) .section-title h2 {
font-size: 28px;
}
/* Direct-child rows only (the card grids): the tab rows deeper in
the Financial / Inventory "In Action" sections keep their own gap
(set further down). */
:is(#platform-capabilities, .services-one--services) > .container > .row {
row-gap: 16px;
}
:is(#platform-capabilities, .services-one--services) .services-one__single {
padding: 22px;
margin-bottom: 0;
}
:is(#platform-capabilities, .services-one--services) .services-one__single-title .icon {
width: 44px;
height: 44px;
margin-right: 14px;
border-radius: 9px;
}
:is(#platform-capabilities, .services-one--services) .services-one__single-title .icon span {
font-size: 22px;
}
:is(#platform-capabilities, .services-one--services) .services-one__single-title h3 {
font-size: 20px;
line-height: 26px;
}
:is(#platform-capabilities, .services-one--services) .services-one__single-content {
padding-top: 14px;
}
:is(#platform-capabilities, .services-one--services) .services-one__single-content p {
font-size: 16px;
line-height: 26px;
}
/* Cards are one per row here, so the margin-top: auto that bottom-
aligns the button across a side-by-side row (see "equal height"
above) has nothing to align and would leave the button flush
against the text on the tallest card. */
:is(#platform-capabilities, .services-one--services) .services-one__single-content .btn-box {
margin-top: 18px;
}
:is(#platform-capabilities, .services-one--services) .button-style-2 {
padding: 10px 22px;
font-size: 14px;
line-height: 24px;
}
/* --- About (home and about pages, via .about-one--compact) --- */
.about-one--compact {
padding: 56px 0 64px;
}
/* Photos come first (the DOM order), as on the home page. About
opts into text-first with .about-one--text-first; the photos
are decorative, so the visual order does not affect reading
order. */
.about-one--text-first .row > .col-xl-6:first-child {
order: 2;
}
.about-one--compact .about-one__content {
padding-top: 0;
}
.about-one--compact .about-one__content .section-title {
padding-bottom: 18px;
}
.about-one--compact .section-title h2 {
font-size: 28px;
}
.about-one__lead {
font-size: 16px;
line-height: 26px;
}
.about-one--compact .about-one__content-features {
margin-top: 24px;
}
.about-one--compact .about-one__content-features ul {
max-width: none;
}
.about-one--compact .about-one__content-features ul li {
padding: 14px 18px;
}
.about-one--compact .about-one__content-features ul li .inner .icon {
margin-right: 14px;
}
.about-one--compact .about-one__content-features ul li .inner .icon span {
font-size: 32px;
line-height: 32px;
}
.about-one--compact .about-one__content-features ul li .inner h3 {
font-size: 18px;
line-height: 26px;
}
.about-one--compact .about-one__content-text .bottom-text {
padding-top: 20px;
}
/* Photos: 2x2 grid of 4:3 tiles. li:nth-child(n) is a specificity
bump so these beat about.css's per-image rounded corners. */
.about-one--compact .about-one__img {
max-width: none;
margin: 0 0 28px;
padding: 0;
}
.about-one--text-first .about-one__img {
margin: 28px 0 0;
}
.about-one--compact .about-one__img-top ul,
.about-one--compact .about-one__img-bottom ul {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
gap: 10px;
margin: 0;
}
.about-one--compact .about-one__img-top ul li,
.about-one--compact .about-one__img-bottom ul li,
.about-one--compact .about-one__img-bottom ul li + li {
float: none;
padding: 0;
margin: 0;
}
.about-one--compact .about-one__img-bottom {
margin-top: 10px;
}
.about-one--compact .about-one__img-top li:nth-child(1) .about-one__single-img-box::before {
display: none;
}
.about-one--compact .about-one__img ul li:nth-child(n) .about-one__single-img-box .inner img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 12px;
}
/* --- Footer (shared by all pages) --- */
.footer-one--navy .footer-main {
padding: 36px 0 20px;
}
.footer-one--navy .footer-main .row {
display: grid;
grid-template-columns: minmax(0, 1fr);
row-gap: 28px;
}
/* Quick Links (the 2nd widget) only repeats the hamburger menu, so
it is hidden on phones. */
.footer-one--navy .footer-main .row > div:nth-child(2) {
display: none;
}
/* Products: two side-by-side lists, filled column by column (the
first three entries on the left, the last three on the right).
The three rows are fixed on purpose; a 7th product would start a
third column, so change the 3 if the list ever grows. */
.footer-one--navy .footer-widget-links ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(3, auto);
grid-auto-flow: column;
column-gap: 20px;
}
.footer-one--navy .single-footer-widget,
.footer-one--navy .single-footer-widget.ml50,
.footer-one--navy .single-footer-widget.ml15 {
margin: 0;
}
/* Brand block: logo on the left, tagline and the social pill
stacked to its right (the logo spans both rows of the grid). */
.footer-one--navy .our-company-info {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 16px;
align-items: center;
text-align: left;
}
.footer-one--navy .footer-logo-one {
grid-row: 1 / span 2;
}
.footer-one--navy .footer-logo-one img.logo-mark {
max-height: 80px;
}
.footer-one--navy .our-company-info .text {
grid-column: 2;
margin: 0;
}
.footer-one--navy .our-company-info .text p {
font-size: 14px;
line-height: 20px;
}
/* Social pill: shrink-wraps its three icons (was a fixed 170px
wide, 50px tall). The icon links are 34px tall so they stay an
easy tap target. */
.footer-one--navy .footer-social-link {
grid-column: 2;
width: fit-content;
margin: 10px 0 0;
padding: 0;
}
.footer-one--navy .footer-social-link ul {
display: flex;
}
.footer-one--navy .footer-social-link ul li {
float: none;
line-height: 34px;
}
.footer-one--navy .footer-social-link ul li a {
padding: 0 14px;
font-size: 15px;
}
.footer-one--navy .single-footer-widget .title h3 {
font-size: 20px;
line-height: 26px;
}
.footer-one--navy .footer-widget-links,
.footer-one--navy .footer-widget-contact-info {
padding-top: 14px;
}
.footer-one--navy .footer-widget-links ul li a {
align-items: baseline;
font-size: 15px;
line-height: 24px;
}
.footer-one--navy .footer-widget-links ul li a i {
margin-right: 8px;
font-size: 12px;
}
/* Contact Us: 30px icons, 6px between rows (was 45px / 19px), and
the address on one line (the
after the street is hidden;
the source has a space after it, so the words stay separated). */
.footer-one--navy .footer-widget-contact-info ul li + li {
margin-top: 6px;
}
.footer-one--navy .footer-widget-contact-info ul li .icon-box {
flex: 0 0 30px;
width: 30px;
height: 30px;
margin-right: 12px;
}
.footer-one--navy .footer-widget-contact-info ul li .icon-box span {
font-size: 16px;
}
.footer-one--navy .footer-widget-contact-info ul li .text-box p {
font-size: 15px;
line-height: 22px;
}
.footer-one--navy .footer-widget-contact-info ul li .text-box p br {
display: none;
}
/* Copyright bar: 13px text and tight padding (was ~143px tall with
the since-removed Contact Us link under it). */
.footer-one--navy .footer-main {
padding-bottom: 12px;
}
.footer-one--navy .footer-bottom {
padding: 14px 0 12px;
}
.footer-one--navy .footer-bottom .copyright-text {
margin-bottom: 0;
}
.footer-one--navy .footer-bottom .copyright-text p {
font-size: 13px;
line-height: 20px;
}
}
@media only screen and (max-width: 480px) {
.platform-hero__title {
font-size: 32px;
}
/* Buttons stack here (rule above); the primary action goes first. */
.platform-hero__btn--solid {
order: -1;
}
}
/* 360px-class phones: at 13px the copyright line is ~335px wide in a
330px container and "Reserved" wraps onto a line of its own. */
@media only screen and (max-width: 380px) {
.footer-one--navy .footer-bottom .copyright-text p {
font-size: 12px;
}
}
/*====================================================================
Mobile polish, part 2: product pages and the other content pages
(2026-10-26)
The same stacked-desktop problem as the home page, on every
products-*.html page, pricing, about, contact and faq: every
section keeps its 120px top/bottom padding, cards keep 40px of
padding and a 50px gap, so a product page runs 9,000-12,000px at
phone width. The cards, process steps, FAQ accordion and spacing
below take the same tightening the home page got. Everything is
inside max-width: 767px, so tablet and desktop are unchanged.
The product-hero strip and the shared card rules live in part 1
above (they are keyed to .product-hero / .services-one--services).
- The one inline padding left alone: .subscribe-one and
.dashboard-preview carry style="padding-bottom: 80px", which
only !important could beat.
- Hosting: the 4-plan comparison table is >=720px wide (min-width),
so on phones it is replaced by .plan-cards (markup in
products-website-hosting.html, hidden from 768px up with
d-md-none while the table is d-none d-md-block).
======================================================================*/
@media only screen and (max-width: 767px) {
/* --- Section rhythm: 120px -> ~56px --- */
.services-one--services {
padding: 56px 0 40px;
}
.blog-details {
padding: 48px 0 56px;
}
.blog-details.no-bottom-padding {
padding: 48px 0 0;
}
.working-process-one,
.financial-controls,
.connected-platform,
.contact-page {
padding-top: 56px;
padding-bottom: 56px;
}
.financial-controls--single {
padding-top: 40px;
}
.faq-one {
padding: 56px 0 48px;
}
.pricing-compare {
padding: 56px 0 24px;
}
.pricing-page__intro {
padding-top: 48px;
}
.pricing-page__callout {
padding-bottom: 56px;
}
.about-two {
padding-bottom: 56px;
}
/* Section headings in the sections above (the cards/tabs section is
covered by the :is() rules in part 1). */
:is(.working-process-one, .faq-one, .financial-controls, .connected-platform, .pricing-compare, .pricing-page__intro, .about-two) .section-title {
padding-bottom: 28px;
}
:is(.working-process-one, .faq-one, .financial-controls, .connected-platform, .pricing-compare, .pricing-page__intro, .about-two) .section-title h2 {
font-size: 28px;
}
:is(.working-process-one, .faq-one, .financial-controls, .connected-platform, .pricing-compare, .pricing-page__intro, .about-two) .section-title h5 {
font-size: 13px;
line-height: 22px;
letter-spacing: 2px;
}
.pricing-compare__intro {
margin-bottom: 28px;
}
/* --- "How It Works" steps --- */
.working-process-one .row {
row-gap: 16px;
}
.working-process-one__single {
padding: 22px 22px 48px;
}
.working-process-one__title {
margin-bottom: 14px;
padding-left: 0;
}
.working-process-one__title .circle {
width: 52px;
height: 52px;
margin-right: 14px;
}
.working-process-one__title .icon {
top: 12px;
}
.working-process-one__title .icon span {
font-size: 48px;
line-height: 48px;
}
.working-process-one__text {
margin-bottom: 0;
}
.working-process-one__big-text {
right: 16px;
bottom: 12px;
font-size: 44px;
}
/* --- FAQ accordion --- */
.faq-one__accrodion .accrodion {
margin-bottom: 12px;
}
.faq-one__accrodion .accrodion .accrodion-title {
padding-top: 14px;
padding-bottom: 12px;
}
.faq-one__accrodion .accrodion .accrodion-title h2 {
font-size: 18px;
line-height: 26px;
}
.faq-one__accrodion .accrodion .accrodion-content {
padding: 16px 0 8px;
}
/* --- Financial controls / icon lists --- */
.control-list li {
gap: 14px;
margin-bottom: 20px;
}
.control-list li .icon {
flex: 0 0 44px;
width: 44px;
height: 44px;
}
.financial-controls .row > .col-lg-6 + .col-lg-6 .control-list {
margin-top: 20px;
}
/* --- "See X In Action" tabs (Financial, Inventory) --- */
.services-tabs__intro-text {
margin: -8px auto 28px;
}
.services-tabs__nav {
gap: 8px;
margin-bottom: 28px;
}
.services-tabs__nav .nav-link {
padding: 11px 16px;
font-size: 14px;
}
.services-tabs__content-inner {
padding: 20px;
}
.services-tabs__content-inner .row {
row-gap: 24px;
}
.services-tabs__text h3 {
font-size: 24px;
}
/* --- Property Management: the dashboard screenshot is unreadable at
phone width but already opens a lightbox on tap (Magnific Popup,
.popup-image), so say so. --- */
.dashboard-preview__screenshot-link {
position: relative;
}
.dashboard-preview__screenshot-link::after {
content: "Tap to enlarge";
position: absolute;
right: 10px;
bottom: 10px;
padding: 6px 12px;
border-radius: 20px;
background: rgba(1, 18, 56, 0.85);
color: #FFFFFF;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
pointer-events: none;
}
/* --- About (also uses .about-one--compact, see part 1) --- */
.about-one--compact .about-two__content {
margin-top: 0;
}
.about-one--compact .about-two__content .section-title {
padding-bottom: 18px;
}
.about-two .about-one__content {
padding-top: 0;
}
.about-two .about-one__content .section-title {
padding-bottom: 18px;
}
.about-two .about-two__img {
margin-top: 28px;
}
/* --- Contact --- */
.contact-page__form {
margin-right: 0;
}
.contact-page__form .title-box {
margin-bottom: 20px;
}
.contact-page__form .title-box h2,
.contact-page__contact-info .title-box h2 {
font-size: 28px;
line-height: 36px;
}
.contact-page__form-btn button {
width: 100%;
min-height: 52px;
justify-content: center;
}
/* --- Hosting plan cards --- */
.plan-cards {
display: grid;
gap: 24px;
}
.plan-card {
position: relative;
background: var(--thm-black-bg);
border: 1px solid var(--cti-line);
border-radius: 8px;
padding: 22px;
}
.plan-card--popular {
border-color: var(--thm-primary-color);
box-shadow: inset 0 0 0 1px var(--thm-primary-color);
}
.plan-card__badge {
position: absolute;
top: -12px;
left: 22px;
padding: 4px 12px;
border-radius: 20px;
background: var(--thm-primary-color);
color: var(--cti-on-primary);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
line-height: 18px;
text-transform: uppercase;
}
.plan-card__name {
margin: 0;
font-size: 24px;
line-height: 30px;
}
.plan-card__price {
margin: 10px 0 0;
color: var(--thm-heading-font-color);
font-family: var(--thm-heading-font-family);
font-size: 34px;
font-weight: 700;
line-height: 1.1;
}
.plan-card__price span {
color: var(--thm-body-font-color);
font-size: 14px;
}
.plan-card__blurb {
margin: 10px 0 0;
font-size: 15px;
line-height: 24px;
}
.plan-card .button-style-1 {
width: 100%;
margin-top: 18px;
justify-content: center;
}
.plan-card__features {
margin-top: 14px;
border-top: 1px solid var(--cti-line);
}
.plan-card__features summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0 4px;
color: var(--thm-primary-color);
font-family: var(--thm-heading-font-family);
font-size: 15px;
font-weight: 700;
cursor: pointer;
list-style: none;
}
.plan-card__features summary::-webkit-details-marker {
display: none;
}
.plan-card__features summary::after {
content: "";
width: 8px;
height: 8px;
margin-right: 4px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform 200ms ease;
}
.plan-card__features[open] summary::after {
transform: rotate(-135deg);
}
.plan-card__features h4 {
margin: 16px 0 4px;
color: var(--thm-primary-color);
font-size: 13px;
letter-spacing: 1px;
line-height: 20px;
text-transform: uppercase;
}
.plan-card__features li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 7px 0;
border-bottom: 1px solid var(--cti-line);
font-size: 15px;
line-height: 22px;
}
.plan-card__features li:last-child {
border-bottom: 0;
}
.plan-card__features li i {
flex: 0 0 16px;
margin-top: 4px;
color: var(--thm-primary-color);
font-size: 14px;
}
.plan-card__features li small {
display: block;
margin-top: 2px;
font-size: 13px;
line-height: 19px;
opacity: 0.8;
}
.plan-card__features .is-no {
opacity: 0.6;
}
.plan-card__features .is-no i {
color: #7A87A6;
}
}
/*====================================================================
Sticky header below 1200px (where the hamburger replaces the nav)
(2026-10-26)
From 1200px up main.js adds .sticky-menu after 245px of scroll and
header.css turns that into a fixed, compact bar. Below 1200px
responsive.css sets .sticky-menu back to position: static, so the
bar (logo + hamburger) scrolled away with the page and the menu was
out of reach until the visitor scrolled all the way back up. It is
now sticky from the start instead: position: sticky on the header
element keeps it in the flow (no jump when it sticks, no spacer
needed) and it is already the compact ~64px bar (see "Compact
header (tablet / phone)"). .main-header already carries z-index
99, above the page sections and the footer (z-index 10).
The template's own scroll behavior is switched off here, because
the class still toggles at any width: its menu_sticky animation
would slide the whole bar up out of view and back down every time
the page crossed 245px. The class is still useful as the "has been
scrolled" signal, so it carries the hairline + soft shadow that
separates the bar from the content under it (no shadow at the top
of the page, where the bar sits above the hero).
======================================================================*/
@media only screen and (max-width: 1199px) {
.main-header-one {
position: sticky;
top: 0;
}
.main-header-one .sticky-menu {
animation: none;
box-shadow: 0 1px 0 var(--cti-line), 0 6px 18px rgba(0, 0, 0, 0.18);
}
}
/*====================================================================
Contact form validation (2026-10-26)
assets/js/ajax-form.js flags a bad field with .is-invalid and fills
the .field-error span under it (the form has `novalidate`, so these
replace the browser's own bubbles). --cti-error is a coral on the
dark page and a deep red on the light one, both >= 4.5:1 as text on
the page background.
The inputs have `border: none` (contact.css), so the red "border" is
an inset box-shadow ring: it keeps the field's size and follows its
rounded corners. The message is absolutely positioned into the 30px
bottom margin of .input-box, so showing or clearing an error never
moves the fields below it.
======================================================================*/
.contact-page__form .input-box input.is-invalid,
.contact-page__form .input-box textarea.is-invalid {
box-shadow: inset 0 0 0 2px var(--cti-error);
}
.contact-page__form .field-error {
position: absolute;
left: 2px;
top: calc(100% + 5px);
max-width: 100%;
color: var(--cti-error);
font-size: 13px;
font-weight: 500;
line-height: 18px;
}
.contact-page__form .field-error:empty {
display: none;
}
/* While a message is being sent (ajax-form.js disables the button). */
.contact-page__form-btn button:disabled {
opacity: 0.65;
cursor: wait;
}
/* Honeypot field (contact.html): off-screen rather than display: none,
because some bots skip fields that are display: none or hidden. It
takes no space, so the form layout does not change. */
.contact-page__form .hp-field {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
/* The server's own response (e.g. a failed send) and the success note. */
.contact-page__form .ajax-response {
margin-top: 16px;
}
.contact-page__form .ajax-response.error {
color: var(--cti-error);
}
.contact-page__form .ajax-response.success {
color: var(--thm-primary-color);
}
/*====================================================================
Call-to-action band buttons: hero-style hover (2026-10-28)
The band's buttons ("Request A Consultation", and "See The System"
on Financial) used .button-style-1's two-part sliding fill on hover,
while the hero buttons above them simply fade (.platform-hero__btn,
300ms). The owner asked for the hero's hover here; the resting look
is unchanged. The sliding pseudo-elements are switched off, and:
- Consultation (sky outline) fades to a sky fill with navy text,
- See The System (white outline) gets the hero outline button's faint
white tint and keeps its white text.
Applies wherever the band appears (every product page, and About).
======================================================================*/
.subscribe-one .button-style-1 {
transition: background-color 300ms ease, color 300ms ease;
}
.subscribe-one .button-style-1:before,
.subscribe-one .button-style-1:after {
display: none;
}
.subscribe-one .button-style-1.secondary-white:hover {
background-color: #2FA5FC;
color: #011238;
}
.subscribe-one .subscribe-one__btn-outline:hover {
background-color: rgba(255, 255, 255, 0.08);
color: #FFFFFF;
}
/*====================================================================
Product page text and tab sizes (2026-10-28)
These four rules used to be an inline