/* ==========================================================================
StockTaker Software — Zoho Sites Custom CSS
Paste into: Zoho Sites dashboard -> Customization -> Code -> Custom CSS Editor
Paste ONE PHASE AT A TIME, save, and reload the live site before continuing.
If a phase looks wrong, delete that phase only and the rest still works.
WHY !important IS EVERYWHERE: Zoho's visual editor writes inline style=""
attributes onto elements for anything you set through its UI panels. Inline
styles beat external CSS, so overrides need !important to win. Where a
property IS exposed in the Zoho UI (font family, text color), prefer setting
it there instead — see the notes in each phase.
========================================================================== */
/* ==========================================================================
PHASE 1 — TYPOGRAPHY REPAIR
The single highest-impact change on the site.
Measured problem: EVERY heading on the site renders at line-height 1.80.
That is a body-copy ratio applied to display type. It is the main reason
the pages read as "template" rather than "designed" — headings float apart
into unrelated lines instead of reading as one typographic unit.
Correct range for display type is 1.05-1.25.
========================================================================== */
:root {
/* Type */
--st-font: "Inter", "PT Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
/* Color — every value below is contrast-verified against white (WCAG 2.x) */
--st-ink: #012A53; /* 14.41:1 headings, footer bg. Already your brand navy. */
--st-body: #3C4A57; /* 9.09:1 body copy */
--st-muted: #64748B; /* 4.76:1 captions, meta — passes AA for normal text */
--st-signal: #0B6FB8; /* 5.28:1 primary CTA + links (replaces #4CADDF at 2.51:1) */
--st-signal-d: #095A96; /* 7.21:1 CTA hover */
--st-hairline: #E2E8EF; /* decorative dividers only */
--st-tint: #F5F8FB; /* alternating section background */
/* Spacing — 8px base scale */
--st-s2: 8px; --st-s3: 12px; --st-s4: 16px; --st-s6: 24px;
--st-s8: 32px; --st-s12: 48px; --st-s16: 64px; --st-s24: 96px;
}
/* --- Kill the 1.8 heading line-height, add optical tracking ---------------
Large type needs NEGATIVE letter-spacing to look intentional; this is the
detail that separates current sites from 2014 sites. */
h1.zpheading, h2.zpheading, h3.zpheading,
h4.zpheading, h5.zpheading, h6.zpheading,
h1, h2, h3, h4, h5, h6, .zpicon-heading {
/* font-family MUST be here. Without it the headings keep Zoho's Spectral
serif while the body switches to a sans — tightened serif caps next to
sans body copy looks worse than the original, not better. */
font-family: var(--st-font) !important;
line-height: 1.15 !important;
letter-spacing: -0.02em !important;
text-wrap: balance; /* stops 1-word orphan lines. Ignored by old browsers. */
}
/* Heading colour is scoped to light regions ONLY. Headings inside the hero and
any dark section inherit white from their container — see the note on the
body-copy rule below for why colouring them globally breaks that. */
.theme-content-area h1, .theme-content-area h2,
.theme-content-area h3, .theme-content-area h4,
.theme-content-area h1.zpheading, .theme-content-area h2.zpheading,
.theme-content-area h3.zpheading, .theme-content-area h4.zpheading,
.zpicon-heading {
color: var(--st-ink) !important;
}
/* Small headings don't want negative tracking — it makes them look cramped */
h4, h5, h6,
h4.zpheading, h5.zpheading, h6.zpheading {
line-height: 1.3 !important;
letter-spacing: -0.01em !important;
}
/* --- NEVER let a word split mid-glyph -----------------------------------
Zoho ships `word-break: break-word` on headings. Combine that with a font
size too large for its column and you get "StockTak / er / Software".
`word-break: normal` means only words that genuinely cannot fit will break;
`overflow-wrap` stays as a safety net against horizontal overflow.
Keep this rule. It is what stops the whole class of bug. */
h1, h2, h3, h4, h5, h6,
h1.zpheading, h2.zpheading, h3.zpheading, h4.zpheading,
.zpicon-heading {
word-break: normal !important;
overflow-wrap: break-word;
hyphens: none !important;
}
/* --- Fluid type scale (1.25 ratio) ---------------------------------------
clamp() = min, preferred, max. Scales with viewport, no media queries.
CRITICAL — SCOPE, DO NOT USE BARE TAG SELECTORS.
Zoho reuses for BOTH the hero headline AND the three-up card titles.
A bare `h4 { font-size: 3.4rem }` blows up 240px-wide card titles; a bare
`h4 { font-size: 1.19rem }` shrinks the hero headline to nothing. Neither
works. Every display size below is scoped to a region or a component class. */
/* Page-level headings */
.theme-content-area h1.zpheading, .theme-content-area h1 { font-size: clamp(2.25rem, 4.2vw, 3.5rem) !important; font-weight: 700 !important; }
.theme-content-area h2.zpheading, .theme-content-area h2 { font-size: clamp(1.75rem, 2.8vw, 2.5rem) !important; font-weight: 700 !important; }
.theme-content-area h3.zpheading, .theme-content-area h3 { font-size: clamp(1.375rem, 1.9vw, 1.75rem) !important; font-weight: 600 !important; }
/* Hero headline — currently marked up as . Change it to in the Zoho
editor when you can (there is no anywhere on the site today); this rule
covers both so the hero looks right either way. */
.theme-banner h1.zpheading,
.theme-banner h2.zpheading,
.theme-banner h4.zpheading {
font-size: clamp(2rem, 4vw, 3.25rem) !important;
line-height: 1.08 !important;
letter-spacing: -0.02em !important;
font-weight: 700 !important;
}
/* Card / feature titles — `.zpicon-heading` is the precise component hook,
which is far safer than styling h4 by tag. */
.zpicon-heading,
.theme-content-area h4.zpheading,
.theme-content-area h4 {
font-size: 1.25rem !important;
line-height: 1.3 !important;
letter-spacing: -0.01em !important;
font-weight: 600 !important;
}
/* H5 / H6 — the headings inside the bordered boxes ("Transaction Types",
"Easy Installation") are H5, not H4. Without this they keep Zoho's 22px at
weight 400, which reads as weaker than the body copy around them and much
weaker than the 40px/700 section headings they sit beside. */
.theme-content-area h5, .theme-content-area h6,
.theme-content-area h5.zpheading, .theme-content-area h6.zpheading {
color: var(--st-ink) !important;
font-size: 1.25rem !important;
font-weight: 600 !important;
}
/* --- Body copy -----------------------------------------------------------
NOTE: your site currently ships font-weight:100 on some paragraphs. Hairline
weight at small sizes is genuinely hard to read — a real problem for a buyer
demographic that skews 45+. 400 is the floor.
DO NOT add a `color` declaration to the rule below. The hero and every dark
section set white on the CONTAINER and let paragraphs inherit it. An explicit
colour on `p` overrides an inherited value regardless of specificity or
!important — so `p { color: #3C4A57 }` turns hero copy dark-grey-on-photo and
makes it unreadable. Colour is applied per region instead. */
body, p, li, .zptext, .zpparagraph {
font-family: var(--st-font) !important;
font-size: 1.0625rem !important; /* 17px */
line-height: 1.65 !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
}
/* Body copy colour — light regions only */
.theme-content-area p,
.theme-content-area li,
.theme-content-area .zptext { color: var(--st-body) !important; }
/* Dark regions keep light text. Belt-and-braces so PHASE 1 is safe to paste on
its own, without waiting for the hero rules down in Phase 4. */
.theme-banner p, .theme-banner li, .theme-banner .zptext,
.zpdark-section p, .zpdark-section li,
.zpdark-section-bg p, .zpdark-section-bg li {
color: rgba(255, 255, 255, 0.93) !important;
}
/* --- Cap the measure ----------------------------------------------------
Your paragraphs currently run ~940px wide. Anything past ~75 characters
per line and the eye loses its place on the return sweep. */
.theme-content-area p,
.theme-content-area li {
max-width: 68ch;
}
.theme-content-area .zpheading-align-center + p,
.zptext-align-center p,
p.zptext-align-center {
margin-left: auto !important;
margin-right: auto !important;
}
/* ==========================================================================
PHASE 2 — BUTTONS / CTA
Measured problem: primary button is #4CADDF with white text = 2.51:1.
WCAG AA requires 4.5:1. It fails, and it also just looks washed out.
Button text is 14px while body text is 18px — the CTA is literally the
smallest text in the region, which inverts the intended hierarchy.
========================================================================== */
.zpbutton.zpbutton-type-primary,
.zpbutton-wrapper.zpbutton-type-primary {
background-color: var(--st-signal) !important;
border: 1px solid var(--st-signal) !important;
border-radius: 6px !important; /* 0px reads as 2012; 6px reads as current */
padding: 14px 28px !important;
font-family: var(--st-font) !important;
font-size: 1rem !important; /* was 14px — now matches body weight of voice */
font-weight: 600 !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
box-shadow: 0 1px 2px rgba(1, 42, 83, 0.08) !important;
/* Never transition `all` — it animates layout properties and causes jank */
transition: background-color 140ms ease, border-color 140ms ease,
transform 140ms ease, box-shadow 140ms ease !important;
min-height: 44px !important; /* iOS minimum tap target */
}
.zpbutton.zpbutton-type-primary:hover,
.zpbutton-wrapper.zpbutton-type-primary:hover {
background-color: var(--st-signal-d) !important;
border-color: var(--st-signal-d) !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(1, 42, 83, 0.16) !important;
}
.zpbutton.zpbutton-type-primary:active { transform: translateY(0); }
/* Button label must inherit, not stay 14px */
.zpbutton-content {
font-size: inherit !important;
font-weight: inherit !important;
color: #fff !important;
}
/* Secondary / ghost button — for "Watch a demo" next to the primary CTA */
.zpbutton.zpbutton-type-secondary,
.zpbutton-wrapper.zpbutton-type-secondary {
background-color: transparent !important;
border: 1.5px solid var(--st-signal) !important;
border-radius: 6px !important;
padding: 13px 27px !important;
font-size: 1rem !important;
font-weight: 600 !important;
min-height: 44px !important;
transition: background-color 140ms ease, color 140ms ease !important;
}
.zpbutton.zpbutton-type-secondary:hover {
background-color: var(--st-signal) !important;
}
.zpbutton.zpbutton-type-secondary:hover .zpbutton-content { color: #fff !important; }
/* Visible keyboard focus — required for accessibility, and Zoho ships none */
a:focus-visible,
button:focus-visible,
.zpbutton:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 3px solid var(--st-signal) !important;
outline-offset: 2px !important;
border-radius: 4px;
}
/* ==========================================================================
PHASE 3 — SPACING RHYTHM & SECTION STRUCTURE
Generous, CONSISTENT vertical space is most of what "modern" means visually.
Zoho's editor lets you set per-section padding by hand, which is exactly how
sites end up with 12 different values. This enforces one scale.
========================================================================== */
/* Reclaim the fold: your logo band + nav consume ~220px before the hero
starts — roughly 30% of a laptop viewport spent before the value prop. */
.zpheader-style-05 .zpcontainer { padding-top: var(--st-s3) !important;
padding-bottom: var(--st-s3) !important; }
.theme-header { padding-top: 0 !important; padding-bottom: 0 !important; }
/* One section rhythm, everywhere */
.theme-content-area .zpcontent-container {
padding-top: clamp(var(--st-s16), 7vw, var(--st-s24)) !important;
padding-bottom: clamp(var(--st-s16), 7vw, var(--st-s24)) !important;
}
/* ALTERNATING SECTION TINT — NOT POSSIBLE IN CSS HERE. Verified: the whole page
body is ONE container (.zpcontent-container.page-container, 2589px tall) and
the "sections" are just .zprow rows inside it. There is no per-section element
to alternate a background on, so any nth-of-type() rule matches nothing.
Do this in the Zoho editor instead: select a row/section and set its
background colour to #F5F8FB. Alternate every other one. Zoho exposes
per-section background in the section settings panel, which is the correct
place for it anyway. */
/* Consistent gap between a section heading and its body copy */
.zpheading { margin-bottom: var(--st-s4) !important; }
.zpheading + .zptext, .zpheading + p { margin-top: 0 !important; }
/* Slightly wider container reads more current than 1140px */
.theme-content-area .zpcontainer,
.theme-footer-area .footer-container { max-width: 1200px !important; margin: 0 auto !important; }
/* --- THREE-UP CARDS (verified against the live homepage) -----------------
Real class is .zpelem-box.zsthickpadding-coloured-box.
Flat surface + hairline, NOT a drop shadow — heavy shadows are the strongest
"old template" signal in the whole toolkit.
The three cards currently carry three different pastel backgrounds (blue,
green, pink). Three arbitrary pastels with no meaning behind the choice is a
template tell. One neutral surface makes them read as a deliberate set. */
.zpelem-box.zsthickpadding-coloured-box {
background-color: var(--st-tint) !important;
border: 1px solid var(--st-hairline) !important;
border-radius: 12px !important;
box-shadow: none !important;
padding: 32px 28px !important;
/* equal height + lets the CTA pin to the bottom */
width: 100% !important;
display: flex !important;
flex-direction: column !important;
margin-top: 0 !important;
}
/* Equal-height columns. NOTE: card 3's column ships margin-top:9px — someone
hand-nudged it in the editor and it has been misaligned ever since. Zeroing
column margins here is what actually fixes the ragged top edge. */
.zprow-container:has(.zsthickpadding-coloured-box) { align-items: stretch !important; }
.zprow-container > .zpelem-col:has(.zsthickpadding-coloured-box) {
display: flex !important;
align-self: stretch !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Left-align card content. Centered ragged text in a narrow column is the
hardest configuration to read, and it makes the three cards look unrelated
to each other because no two ragged edges match. */
.zpelem-box .zpicon-container,
.zpelem-box .zpicon-heading,
.zpelem-box p,
.zpelem-box .zptext { text-align: left !important; }
.zpelem-box p { max-width: none !important; margin-bottom: 20px !important; }
/* Put all three CTAs on one baseline regardless of body-copy length */
.zpelem-box.zsthickpadding-coloured-box > .zpelement:last-child { margin-top: auto !important; }
.zpelem-box .zpbutton-container { text-align: left !important; }
/* --- THE INTERLOCKING BORDERED BOXES (.zsborder-box) --------------------
The "Perform Stock Taking Routines" / "Transaction Types" area is a zigzag of
3 boxes that deliberately CHAIN together. The real markup:
box 1,3 .zsborder-box.zsbox-margined-left margin-left: 100px
box 2 .zsborder-box.zsbox-margined-right margin-right: 100px
+ .zsmargin-left-minus margin-left: -2px
rows .zprow-container.zsmargin-top-minus margin-top: -2px
Those -2px values collapse each box's 2px border against its neighbour's so
they share one line, like table cells. It is intentional, not a mistake.
DO NOT just delete the negative margins. I tried exactly that and the boxes
detached and overlapped the cards above them — the offsets are load-bearing.
So: keep the motif, quiet it down. 2px #475058 becomes 1px #C8D2DC, and the
collapse offsets are re-tuned from -2px to -1px to match the thinner border.
border-radius MUST stay 0 — rounded corners cannot share a collapsed edge. */
.zpelem-box.zsborder-box {
border: 1px solid #C8D2DC !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 36px !important;
}
.zsborder-box.zsmargin-left-minus { margin-left: -1px !important; }
.zprow-container.zsmargin-top-minus { margin-top: -1px !important; }
/* --- ZIGZAG PROPORTIONS -------------------------------------------------
These rules make a heading+box row look right, and they apply automatically
to all three rows once the section is rebuilt per content-cleanup item 7.
(Today only the "Perform Stock Taking Routines" row is a real two-column
row, so only that one benefits until the rebuild is done.)
32/68 instead of 50/50: 68% of the 1140px container is ~775px, which is
what a 68ch text block plus 36px box padding actually wants — the box stops
shipping half its width as blank space, and the heading column stops being
a void. Vertical centering pairs the heading with the box beside it.
Uses :has() — fine in Chrome/Edge/Safari 15.4+; older browsers simply keep
the 50/50 layout, nothing breaks. */
.theme-content-area .zprow-container:has(.zsborder-box) {
align-items: center !important;
}
.theme-content-area .zprow-container:has(.zsborder-box) > .zpelem-col:has(h2.zpheading) {
flex: 0 0 32% !important; width: 32% !important; max-width: 32% !important;
}
.theme-content-area .zprow-container:has(.zsborder-box) > .zpelem-col:has(.zsborder-box) {
flex: 0 0 68% !important; width: 68% !important; max-width: 68% !important;
}
/* The 100px push margins were sized for the 50/50 grid — retire them */
.zpelem-box.zsborder-box { margin-left: 0 !important; margin-right: 0 !important; }
/* Headings in the narrow column: left-aligned, sized to fit 32% */
.theme-content-area .zprow-container:has(.zsborder-box) h2.zpheading {
text-align: left !important;
font-size: clamp(1.5rem, 2.2vw, 2rem) !important;
}
/* --- LIST RHYTHM --------------------------------------------------------
Zoho gives list items the body line-height (1.65) and no margin, so bullets
run together vertically while each item's own lines sit far apart. Invert it:
tighter inside an item, real space between items.
NOTE: this does NOT fix the indent gap between the bullet marker and the
text. That is TWO characters typed into each
— see the content
cleanup list at the bottom of this file. CSS cannot trim leading nbsp. */
.theme-content-area ul, .theme-content-area ol {
padding-left: 1.25em !important;
margin: 0 0 var(--st-s4) !important;
}
.theme-content-area li {
margin-bottom: var(--st-s2) !important;
line-height: 1.5 !important;
}
.theme-content-area li p { margin: 0 !important; }
.theme-content-area li:last-child { margin-bottom: 0 !important; }
/* ==========================================================================
PHASE 4 — NAVIGATION, IMAGERY, FORMS, FOOTER
========================================================================== */
/* Nav: replace the filled light-blue pill on the active item with an
underline marker. Pills-as-active-state is a dated pattern.
VERIFIED SELECTORS. The nav anchors carry NO classes at all — the real
structure is:
.theme-navigation-and-icons > .theme-menu-area > .theme-menu > ul > li > a
and the current page is marked with `theme-menu-selected` on the .
Match counts on the live homepage: `.theme-menu li > a` = 6,
`.theme-menu-selected > a` = 1. */
.theme-menu li > a {
font-family: var(--st-font) !important;
font-size: 0.9375rem !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--st-ink) !important;
padding: 10px 14px !important;
border-bottom: 2px solid transparent !important;
transition: color 120ms ease, border-color 120ms ease !important;
}
/* li.theme-menu-selected needed: the base `.theme-menu li > a` rule above
outranks a bare `.theme-menu-selected > a` (both !important), which left the
active underline transparent on subpages. */
.theme-menu li.theme-menu-selected > a,
.theme-menu li > a:hover {
background: transparent !important;
color: var(--st-signal) !important;
border-bottom-color: var(--st-signal) !important;
}
/* Hero: the current background photo is a hand pointing at a consumer tablet
dashboard (map pins, a 64% gauge) — imagery unrelated to MEDITECH stock
taking. Replace the asset in the Zoho editor; this only makes whatever
image is there readable behind text. A gradient scrim beats a flat
overlay because it keeps the image visible where there's no text.
VERIFIED SELECTORS: the scrim must go on .zpslider-img (the layer that holds
the background photo), NOT on .zphero-slide. I tested the latter live and it
painted on top of the headline. Hero text lives in .zphero-slider-container. */
.zpslider-img { position: absolute !important; inset: 0 !important; }
.zpslider-img::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
100deg,
rgba(1, 42, 83, 0.94) 0%,
rgba(1, 42, 83, 0.82) 42%,
rgba(1, 42, 83, 0.30) 100%
);
}
.zphero-slider-container { z-index: 2 !important; }
/* --- HERO STRUCTURE: unwinding the hand-tuned offsets -------------------
READ THIS BEFORE PASTING. What the live hero actually does:
row 1 headline wrapper margin-top: 80px
row 2 (empty) a spacer element, 48px tall, holding nothing
row 3 body paragraph wrapper margin-top: -143px <-- hand-dragged
The paragraph is yanked up 143px so it *looks* like it sits under the
headline. All three numbers were tuned by eye against a 31px headline.
PRECISELY WHAT THIS DOES AND DOESN'T DO (I measured both ways):
The rows ARE in normal flow — they are not absolutely pinned, and the columns
are auto-height. So the -143px is a CONSTANT upward shift, and growing the
headline does push the paragraph down with it. Tested at headline widths
producing 2, 3 and 4 lines: the headline-to-paragraph gap held at +65px each
time. The hero does reflow.
What makes it fragile is that the gap is the *residue* of three hand-picked
numbers rather than a spacing decision. It happens to land at a sane 65px
with a 1.08 line-height; with a 1.3 line-height on the same headline the
heading box grows ~29px per line and the paragraph starts overlapping it.
Nobody can predict that from reading the editor, which is the real problem.
These rules delete the offsets and let the hero lay out in normal flow. */
.theme-banner .zprow-container > .zpelem-col > .zpelement {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.theme-banner .zprow-container > .zpelem-col {
height: auto !important;
margin-top: 0 !important;
}
/* The empty spacer row. If you later add a real element as the 2nd row in the
hero, DELETE this rule or it will hide it. */
.theme-banner .zprow-container:nth-of-type(2) { display: none !important; }
.theme-banner .zpheading { margin-bottom: 0 !important; }
.theme-banner .zprow-container:nth-of-type(3) { margin-top: 24px !important; }
/* --- HERO HEIGHT --------------------------------------------------------
The hero is locked to height:580px with overflow:hidden, so any copy past
580px is silently CLIPPED — the last line just disappears. Worse, .zphero
carries a #333 background, so when content is shorter than 580px you get a
grey band under the image.
ONE IMPORTANT CAVEAT: this block un-absolutes the slide, which is only safe
because your hero has exactly ONE slide (I checked: slideCount === 1). If you
ever add a second hero slide, DELETE this block — stacked slides need
position:absolute to sit on top of each other, and leaving this in will
render them one below the other down the page. */
.zphero.zpapply-height {
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
background-color: transparent !important;
}
.zphero-slides {
position: relative !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.zphero-slide {
position: relative !important;
height: auto !important;
min-height: clamp(440px, 52vh, 560px) !important;
display: flex !important;
align-items: center !important; /* vertically centres the hero content */
background-color: transparent !important;
}
.zphero-slider-container { position: relative !important; height: auto !important; width: 100% !important; }
/* The outer wrapper carries its own min-height:580px — without this the banner
keeps 140px of empty space below the shortened hero. */
.theme-banner .zpcontent-container.hero-container {
min-height: 0 !important;
height: auto !important;
}
/* Left-align hero content. Centered multi-line display type is harder to
read and is the default every template ships with. */
.theme-banner .zpheading,
.theme-banner .zptext,
.theme-banner p {
text-align: left !important;
}
.theme-banner h1.zpheading,
.theme-banner h2.zpheading,
.theme-banner h4.zpheading { color: #fff !important; max-width: 22ch; }
/* The b/strong overrides matter: the hero paragraph is wrapped in bold tags in
the CMS, so without this it renders as a wall of semibold text. */
.theme-banner p,
.theme-banner p b,
.theme-banner p strong {
color: rgba(255,255,255,0.93) !important;
max-width: 56ch;
font-weight: 400 !important;
}
/* Images: soften corners, kill any inherited shadow */
.theme-content-area img { border-radius: 10px; box-shadow: none !important; }
.zpheader-style-05 img, .theme-footer-area img { border-radius: 0; }
/* Forms — Zoho's defaults are small and low-contrast.
Note: input borders are a UI boundary and need 3:1 contrast, so this uses
a darker grey than the decorative hairline. */
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], textarea, select {
font-family: var(--st-font) !important;
font-size: 1rem !important;
padding: 12px 14px !important;
border: 1px solid #7C8DA0 !important;
border-radius: 6px !important;
min-height: 44px !important;
background: #fff !important;
color: var(--st-body) !important;
transition: border-color 120ms ease, box-shadow 120ms ease !important;
}
input:focus, textarea:focus, select:focus {
border-color: var(--st-signal) !important;
box-shadow: 0 0 0 3px rgba(11, 111, 184, 0.15) !important;
}
label { font-weight: 500 !important; color: var(--st-ink) !important;
margin-bottom: var(--st-s2) !important; display: inline-block; }
/* Footer on brand navy */
.theme-footer-area {
background-color: var(--st-ink) !important;
padding-top: var(--st-s12) !important;
padding-bottom: var(--st-s8) !important;
}
/* VERIFIED: the footer contains ZERO and
elements — its text sits in
bare s with no classes inside .zpcontent-container.footer-container.
Styling p/li here matches nothing, so span is included explicitly. */
.theme-footer-area, .theme-footer-area span,
.theme-footer-area p, .theme-footer-area li {
color: #A9BACB !important; /* 7.25:1 on navy */
font-size: 0.9375rem !important;
}
.theme-footer-area a { color: #fff !important; text-decoration: none !important; }
.theme-footer-area a:hover { text-decoration: underline !important; }
.theme-footer-area h1, .theme-footer-area h2, .theme-footer-area h3,
.theme-footer-area h4 { color: #fff !important; }
/* Links in body copy: underline them. Color alone is not an accessible
affordance, and underlines read as more trustworthy in B2B contexts. */
.theme-content-area p a, .theme-content-area li a {
color: var(--st-signal) !important;
text-decoration: underline !important;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
.theme-content-area p a:hover { color: var(--st-signal-d) !important; }
/* Respect users who ask for reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
.zpbutton:hover { transform: none !important; }
}
/* Mobile tightening — verify on a real device, this is the one thing I could
not test in-browser (Chrome would not give me a true mobile viewport). */
@media (max-width: 767px) {
/* Stack elements inside columns on phones - Zoho cols are flex-row nowrap */
.zpelem-col { flex-wrap: wrap !important; }
.zpelem-col > .zpelement { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; }
.theme-content-area .zpcontent-container {
padding-top: var(--st-s12) !important;
padding-bottom: var(--st-s12) !important;
}
.theme-banner h1.zpheading,
.theme-banner h2.zpheading,
.theme-banner h4.zpheading { max-width: 100% !important; }
.zpbutton.zpbutton-type-primary,
.zpbutton.zpbutton-type-secondary { width: 100% !important; text-align: center; }
.theme-content-area p, .theme-content-area li { max-width: 100%; }
}
/* ==========================================================================
PHASE 5 - SITE-WIDE UNIFORMITY (from the page-by-page survey)
========================================================================== */
/* 5.1 Centered-block fix: the 68ch paragraph cap left full-width paragraphs
hugging the left edge under centered headings (About Us on Let's Talk).
Auto margins center the capped block; a no-op wherever the column is
already narrower than the cap. Boxes keep hard-left alignment. */
.theme-content-area .zpelem-text p { margin-left: auto !important; margin-right: auto !important; }
.theme-content-area .zpelem-box p { margin-left: 0 !important; margin-right: 0 !important; }
/* 5.2 Zoho lead form (Let's Talk): the form rendered 252px inputs floating
left in an 1110px block. Center the form, cap it, let fields fill it. */
.theme-content-area form { max-width: 560px !important; margin-left: auto !important; margin-right: auto !important; }
.theme-content-area form input[type="text"],
.theme-content-area form input[type="email"],
.theme-content-area form input[type="tel"],
.theme-content-area form input[type="number"],
.theme-content-area form textarea,
.theme-content-area form select { width: 100% !important; box-sizing: border-box !important; }
.theme-content-area form .zpform-field-container { width: 100% !important; max-width: 100% !important; }
.theme-content-area form .zpform-outer > li { display: block !important; }
.theme-content-area form input[type="submit"] {
background: var(--st-signal) !important; color: #fff !important;
border: 1px solid var(--st-signal) !important; border-radius: 6px !important;
padding: 12px 24px !important; font-weight: 600 !important; min-height: 44px !important;
}
.theme-content-area form input[type="reset"] {
background: transparent !important; color: var(--st-signal) !important;
border: 1.5px solid var(--st-signal) !important; border-radius: 6px !important;
padding: 11px 23px !important; min-height: 44px !important;
}
/* 5.3 ONE CARD COMPONENT. The site had three different content-box styles:
home cards (zsthickpadding-coloured-box), device cards
(zspadding-space-allside-thin), partner boxes (zsbox-container-style-02).
All three now share the home-card look. (zsborder-box keeps its distinct
interlocking-outline treatment in the homepage zigzag.) */
.zpelem-box.zsthickpadding-coloured-box,
.zpelem-box.zspadding-space-allside-thin,
.zpelem-box.zsbox-container-style-02 {
background: var(--st-tint) !important;
border: 1px solid var(--st-hairline) !important;
border-radius: 12px !important;
box-shadow: none !important;
padding: 28px !important;
}
/* 5.4 Partner blocks (Our Partners): columns built as image+text+button get
the card surface too, and their CTAs pin to one shared baseline.
flex-DIRECTION:COLUMN - stacking is preserved, unlike a bare flex row. */
.zprow-container:has(> .zpelem-col > .zpelem-image + .zpelem-text + .zpelem-button) { align-items: stretch !important; }
.zpelem-col:has(> .zpelem-image + .zpelem-text + .zpelem-button) {
display: flex !important; flex-direction: column !important;
margin-top: 0 !important; margin-bottom: 0 !important; /* kills hand-nudged offsets (RMS Omega col shipped -40px) */
background: var(--st-tint) !important; border: 1px solid var(--st-hairline) !important;
border-radius: 12px !important; padding: 28px !important;
}
.zpelem-col > .zpelem-image + .zpelem-text + .zpelem-button { margin-top: auto !important; }
/* ==========================================================================
PHASE 6 — PARTNERS PAGE POLISH
========================================================================== */
/* 6.1 Partner card logo slot: the three brand logos ship at different native
sizes, so give the card columns a fixed-height centered logo band — logos
align across the row and the text below them starts on the same line. */
.zpelem-col:has(> .zpelem-image + .zpelem-text + .zpelem-button) > .zpelem-image + .zpelem-text {
margin-top: 20px !important; /* normalize; RMS Omega text shipped 1px */
}
.zpelem-col:has(> .zpelem-image + .zpelem-text + .zpelem-button) > .zpelem-image {
margin-top: 0 !important; /* kills hand-nudged offsets; RMS Omega logo shipped +39px */
}
.zpelem-col:has(> .zpelem-image + .zpelem-text + .zpelem-button) > .zpelem-image .zpimage-container {
height: 72px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.zpelem-col:has(> .zpelem-image + .zpelem-text + .zpelem-button) > .zpelem-image img {
max-height: 56px !important;
width: auto !important;
object-fit: contain !important;
}
/* 6.2 Let’s Talk CONTACT INFORMATION block: hairline border to match the card
look. Background (tint) and 12px radius are set in the element’s own settings;
the Zoho border color picker would not accept a hex value, hence this rule. */
.zpelement[data-element-id="elm_pw2n8KdBa8rVTbksYZA3vg"].zpelem-text {
border-color: var(--st-hairline) !important;
}
/* ==========================================================================
PHASE 7 — CARD ALIGNMENT PASS + RECOMMENDATION BAND + UTILITY PAGES
(2026-08-07 session: punch items 1, 2, 3)
========================================================================== */
/* 7.1 Consistent gutters on the col-based card rows (Partners top three).
The row is flex; cols carry % widths with default flex-shrink, so a gap
simply compresses them evenly. Matches the bottom row's spacing. */
@media (min-width: 992px) {
.zprow-container:has(> .zpelem-col > .zpelem-image + .zpelem-text + .zpelem-button) {
gap: 24px;
flex-wrap: nowrap !important;
}
}
/* 7.2 BOX-based cards (Partners bottom row, Devices vendor + legacy cards):
equal heights and a shared button baseline. Extends Phase 5.4, which only
covered cards built as bare columns. zsborder-box (homepage zigzag) keeps
its interlocking layout and is excluded everywhere here. */
.zprow-container:has(> .zpelem-col > .zpelem-box:not(.zsborder-box)) { align-items: stretch !important; }
.zpelem-col:has(> .zpelem-box:not(.zsborder-box)) {
display: flex !important;
flex-direction: column !important;
}
.zpelem-col > .zpelem-box:not(.zsborder-box) {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
}
/* Pin the CTA only in boxes that actually end with a button */
.zpelem-box:not(.zsborder-box):has(> .zpelem-button:last-child) > .zpelem-button:last-child {
margin-top: auto !important;
}
/* Stray empty bullets inside card lists render as phantom gaps — hide them */
.zpelem-box li:empty { display: none !important; }
/* 7.3 Device-photo slot for the Devices vendor cards (box shape is
heading→image→…, unlike the Partners boxes which start with the logo).
Same idea as the 6.1 logo band, sized for product photos. */
.zpelem-box:has(> .zpelem-heading + .zpelem-image) > .zpelem-image .zpimage-container {
height: 220px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.zpelem-box:has(> .zpelem-heading + .zpelem-image) > .zpelem-image img {
max-height: 200px !important;
width: auto !important;
object-fit: contain !important;
}
/* 7.4 Partners bottom-row boxes (logo→text→button): give their logos the
same 72px band as the top three cards so both rows read as one set. */
.zpelem-box:has(> .zpelem-image:first-child + .zpelem-text) > .zpelem-image:first-child .zpimage-container {
height: 72px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.zpelem-box:has(> .zpelem-image:first-child + .zpelem-text) > .zpelem-image:first-child img {
max-height: 56px !important;
width: auto !important;
object-fit: contain !important;
}
/* 7.5 Devices "Our recommendation" band: style the composite's H3 as a
small uppercase eyebrow, and center the capped intro paragraph. The
alt-text hook keeps this scoped to the Datalogic composite only. */
.zpelem-imageheadingtext:has(img[alt="Datalogic logo"]) h3 {
font-size: 0.8125rem !important;
font-weight: 600 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--st-signal) !important;
margin: 8px 0 4px !important;
}
.zpelem-imageheadingtext p {
margin-left: auto !important;
margin-right: auto !important;
}
/* Memor feature row: the two product photos sit in image-only columns;
center them against the taller text column. */
.zprow-container:has(> .zpelem-col > .zpelem-image:only-child) { align-items: center !important; }
/* 7.6 Utility/legal pages (Cookie Policy, License Agreement): a text block
that carries its own H2 sections is a document, not marketing copy —
cap it at the reading measure and center the whole block so headings
and paragraphs share one left edge. */
.theme-content-area .zpelem-text:has(h2) {
max-width: 80ch;
margin-left: auto !important;
margin-right: auto !important;
}
/* …and keep the document left-aligned on every device — Zoho stores
per-device text alignment, and the mobile default here was centered. */
.theme-content-area .zpelem-text:has(h2),
.theme-content-area .zpelem-text:has(h2) p,
.theme-content-area .zpelem-text:has(h2) li,
.theme-content-area .zpelem-text:has(h2) h2,
.theme-content-area .zpelem-text:has(h2) h3 {
text-align: left !important;
}
/* 7.7 MOBILE FIX for flex-column card columns. Phase 4’s mobile rule gives
every element flex-basis:100% — fine in Zoho’s default row-direction cols,
but in the card columns this stylesheet turns to flex-DIRECTION:COLUMN,
basis becomes HEIGHT and wrap creates horizontal tracks: the text lands
beside the logo and clips off-screen. Basis auto restores stacking.
(Pre-existing bug — Partners top cards did this on phones before today.) */
@media (max-width: 767px) {
.zpelem-col:has(> .zpelem-image + .zpelem-text + .zpelem-button) > .zpelement,
.zpelem-col:has(> .zpelem-box:not(.zsborder-box)) > .zpelement {
flex: 0 0 auto !important;
width: 100% !important;
max-width: 100% !important;
}
}
/* 7.8 Recommendation band on phones: Zoho’s per-device settings shrink the
Datalogic logo to a sliver and drop the centering — restore both. */
@media (max-width: 767px) {
.zpelem-imageheadingtext:has(img[alt="Datalogic logo"]) h3,
.zpelem-imageheadingtext:has(img[alt="Datalogic logo"]) p {
text-align: center !important;
}
.zpelem-imageheadingtext:has(img[alt="Datalogic logo"]) img {
width: 170px !important;
height: auto !important;
}
}
/* ==========================================================================
PHASE 7.9–7.11 — 2026-08-08 PUNCH LIST (items 9, 11, 13)
========================================================================== */
/* 7.9 Legacy device cards (Devices): the Intermec box shipped hand-nudged
offsets (box margin-top 30px vs Motorola's 15px; heading wrapper -14px
vs -11px; list wrapper 16px vs 6px) so its top edge sat lower and its
heading-to-list gap ran larger. Both boxes now carry the custom class
st-legacy-card (set per box: settings → CSS tab → Custom class names) —
normalize every nudge under it. The stacked .zpelement classes exist only
to outgun Zoho's per-element [data-element-id] styles, which load after
this sheet at 0-2-0 specificity. */
.zpelement.st-legacy-card.zpelem-box { margin-block-start: 15px !important; }
.zpelement.st-legacy-card.zpelem-box > .zpelement.zpelem-heading,
.zpelement.st-legacy-card.zpelem-box > .zpelement.zpelem-text {
margin-block-start: 0 !important;
margin-block-end: 0 !important;
}
/* 7.10 Utility-document type scale (Cookie Policy today; License Agreement
when it's rebuilt). Phase 1's marketing scale renders in-document H2s at
~40px against 17px body copy — outsized for a legal page — and the 68ch
cap read too narrow on desktop (7.6 widened to 80ch alongside this).
The page-title heading outside the document block is untouched, and
7.6's forced left-align keeps working on every device. */
.theme-content-area .zpelem-text:has(h2) h2 {
font-size: 1.5rem !important;
font-weight: 600 !important;
line-height: 1.3 !important;
margin: 32px 0 12px !important;
}
.theme-content-area .zpelem-text:has(h2) h3 {
font-size: 1.1875rem !important;
font-weight: 600 !important;
line-height: 1.3 !important;
margin: 24px 0 8px !important;
}
/* Inside the 80ch document block, Phase 1's 68ch paragraph cap plus 5.1's
auto-centering floated paragraphs off the headings' left edge — let the
block itself be the measure and keep one shared left edge. */
.theme-content-area .zpelem-text:has(h2) p,
.theme-content-area .zpelem-text:has(h2) li {
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* 7.11 Header site title: Phase 1 never reached the header's
.theme-site-name div, which kept the theme serif (Spectral 25px).
Scoped to the branding block — the nav links (.theme-menu) already
render correctly and are untouched. */
.theme-header .theme-site-name {
font-family: var(--st-font) !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
}