inside a ,
which is what the demo link is. Left alone it kept the theme's #333 body ink
and read as a smudge on the teal. */
.footer.bg-image .footer-box p a{ color:#fff;text-decoration:underline; }
.footer.bg-image .footer-box p a:hover{ color:#fff;opacity:.8; }
/* Our three brand glyphs are narrower than the theme's four, and .foo-socials
is text-center inside a left-aligned column. */
.footer .foo-socials{ display:flex;gap:0; }
/* ── "Talk to us" ───────────────────────────────────────────────────────────
Was a line reading "E: sales@…" above a bright green button, with a loose
"Coming soon" chip under that and two badges under that — four fragments in
one cell, and that green was the only saturated colour anywhere near the
teal panel.
One list now, each channel a row. The WhatsApp mark keeps its green so the
channel is still recognisable, but the 30px icon carries it rather than a
filled button competing with the footer. (.foo-wa itself stays: the reseller
sidebar still uses it, where it sits on white.) */
.foo-reach{ list-style:none;margin:0;padding:0; }
.foo-reach li{
display:flex;align-items:center;gap:11px;
border-bottom:1px solid rgba(255,255,255,.12);
}
.foo-reach li:last-child{ border-bottom:0; }
.foo-reach__ico{
display:grid;place-items:center;width:30px;height:30px;flex:none;
border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:.86rem;
}
.foo-reach__ico--wa{ background:rgba(37,211,102,.2);color:#5BE39A; }
.foo-reach a{
/* The link filled 24px of a 52px row, so most of the row was dead space on a
touch screen. It is the row now: flex:1 across, the padding down. */
flex:1 1 auto;display:block;padding:14px 0;
color:#fff;font-size:.94rem;line-height:1.35;
text-decoration:none;transition:opacity .18s ease;
}
.foo-reach a:hover{ opacity:.78;text-decoration:underline; }
/* the caption is how to use the channel, not part of its name */
.foo-reach a span{
display:block;font-size:.76rem;color:#c5d1dc;margin-top:3px;text-decoration:none;
}
/* ── The WhatsApp action ────────────────────────────────────────────────────
The theme's fourth cell sets an emergency phone number large in .h5-xl. The
number is deliberately not printed anywhere on this site — a printed number
is a line anybody scraping the page can lift — so the action takes that slot
and carries the number in its href with a prefilled first message. */
/* The reseller sidebar uses the same button. Scoping it to .footer meant it
rendered there as plain text. */
.foo-wa,
.footer .foo-wa{
display:inline-flex;align-items:center;gap:9px;
margin-top:15px;padding:10px 18px;border-radius:4px;
background:#25D366;color:#fff !important;
font-family:'Lato',sans-serif;font-weight:700;font-size:.95rem;
text-decoration:none !important;
transition:background .2s ease,transform .2s ease;
}
.foo-wa i,
.footer .foo-wa i{ font-size:1.15rem; }
.foo-wa:hover,
.footer .foo-wa:hover{ background:#1da851;transform:translateY(-2px); }
/* ── The app-store badges ───────────────────────────────────────────────────
Neither listing exists yet, so these carry no href; the chip is what says so. */
/* Its own block, separated from the contact list by a rule rather than
floating loose under it. */
.foo-apps{
margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);
}
.foo-apps-h{
display:flex;align-items:center;flex-wrap:wrap;gap:9px;
font-family:'Lato',sans-serif;font-weight:700;
font-size:.88rem;color:#fff;margin-bottom:12px;
}
/* Tight enough to sit on the same line as "Mobile apps" in a col-lg-3 cell —
at the old size the pair wrapped and the chip sat alone on a line of its own. */
.foo-soon{
font-size:.6rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
padding:3px 8px;border-radius:999px;flex:none;white-space:nowrap;
background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff;
}
.foo-stores{
display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0;
}
.foo-stores li{ margin:0;padding:0; }
/* Greyed and held back. At full colour a Google Play badge beside an App Store
badge reads as two buttons no matter what the label above them says, and
neither listing exists to click. */
.foo-stores img{
height:32px;width:auto;opacity:.42;filter:grayscale(1);
}
/* ── The bottom bar ─────────────────────────────────────────────────────────
Two items where the theme has one, so the credit is pushed to the right edge
on desktop and falls under the copyright on phones. */
.foo-by{
display:inline-flex;align-items:center;gap:8px;justify-content:flex-end;
width:100%;
}
/* The PineBix shield is 433x539 — portrait, where the old PineApps mark was a
220x220 square. Held to the line height of the credit it sits beside. */
.foo-by img{ height:24px !important;width:auto !important; }
@media (max-width:767px){
.foo-by{ justify-content:flex-start;margin-top:10px; }
}
/* The reseller rate table folds the store range under the tier name, so four
columns fit the col-lg-8 without the wrapper having to scroll. */
.rate__n{ display:block;font-size:.78rem;font-weight:400;color:#6b7b93;margin-top:2px; }
/* The uppercase lead-in reads as a heading, so it takes the heading colour —
the theme leaves it in body ink, which made it look like a paragraph that
had been shouted rather than a title. */
#reseller-page .content-block p.p-md{ color:var(--rx-navy);font-weight:400; }
/* .modtab carries min-width:760px for the pricing page's five plan columns.
This table has four and lives in a ~700px col-lg-8, so that min-width is what
was pushing its last column out of sight. */
#reseller-page .modtab{ min-width:0; }
/* The about page's company table is two columns of prose, not five of ticks,
so the 14% cap that sizes the pricing table's plan columns has to come off —
it was squeezing "15A, 7th Floor, Spencer Plaza Mall…" into a four-line
column against a half-empty label cell. */
#about-company .modtab,
#rp-who .modtab{ min-width:0; }
#about-company .modtab th:not(:first-child),
#about-company .modtab td:not(:first-child),
#rp-who .modtab th:not(:first-child),
#rp-who .modtab td:not(:first-child){ width:auto;text-align:left; }
#about-company .modtab th[scope="row"]{ width:32%;white-space:nowrap; }
/* the reseller table's labels are longer, and its second column is a sentence */
#rp-who .modtab th[scope="row"]{ width:34%; }
/* the plan cards here sit in Bootstrap columns, so they fill them */
#rp-packages .plan{ height:100%; }
#reseller-page .modtab th:not(:first-child),
#reseller-page .modtab td:not(:first-child){ width:18%; }
/* ── The "nothing to lose" band ────────────────────────────────────────────
#trust-1, before the pricing section. A new product has no customers to
quote, so what carries this band is the terms already published on
refund.html rather than social proof. Three plain tiles — no card, no
shadow, nothing that looks like a testimonial. */
.trust__box{ padding:8px 18px 0;text-align:center; }
/* flaticon.css sets font-size:20px on the :before of every flaticon class, so
sizing the span does nothing — the glyph has to be sized where it is drawn. */
.trust__ico{ display:block;line-height:1;margin-bottom:18px; }
.trust__ico:before{ font-size:52px !important; }
.trust__box h5{ margin-bottom:10px; }
.trust__note{ font-size:.86rem;color:#6b7b93;margin:16px 0 0; }
.trust__note a{ color:var(--rx-red);text-decoration:underline; }
@media (max-width:767px){
.trust__box{ padding:8px 0 22px; }
}
/* ── The product library's figures ─────────────────────────────────────────
#library-1 on the home page. The theme has no "three big numbers in a
column" component — .statistic-block is a row of four on a dark band, which
is a different job — so this is three stacked figures beside the copy.
The numbers are read off the product: 744,000 is what
server/db/load-library.js loads, 392,669 the count of rows with a
photograph. Set in the theme's own Lato and its accent. */
.lib-figs{ display:grid;gap:14px; }
.lib-fig{
background:#F5F8FC;border:1px solid #E2E8F1;border-left:4px solid var(--rx-red);
border-radius:10px;padding:20px 24px;
}
.lib-fig__n{
display:block;font-family:'Lato',sans-serif;font-weight:900;
font-size:clamp(1.9rem,3.4vw,2.5rem);line-height:1.05;
color:var(--rx-navy);letter-spacing:-.02em;
}
.lib-fig__l{
display:block;font-weight:700;font-size:.95rem;color:var(--rx-red);
margin-top:2px;
}
.lib-fig__s{ font-size:.88rem;color:#5A6E8C;margin:8px 0 0;line-height:1.6; }
/* ── "In every plan", on the plan cards ────────────────────────────────────
The library is shared reference data in public.product_library, not
something provisioned per tenant, so every plan genuinely has it. It sits
above each card's feature list rather than inside it, because the lists are
cumulative ("Everything in Core, plus") and a row repeated in all four would
read as four different things. */
.plan__lib{
display:flex;align-items:center;gap:9px;
margin:18px 0 0;padding:10px 12px;
background:rgba(0,163,200,.08);border:1px solid rgba(0,163,200,.22);
border-radius:9px;
font-size:.82rem;font-weight:600;color:var(--rx-navy);text-align:left;
}
.plan__lib b{ color:var(--rx-red);font-weight:800; }
.plan__lib svg{ flex:none;color:var(--rx-red); }
/* ── The quick-facts box under the hero ─────────────────────────────────────
Four cards, each ending in a button. The theme gives .abox-1 a fixed 300px
height and nothing else, so each button sat directly under its own paragraph
— and the paragraphs are three lines, four lines, three lines, four lines.
The result was a ragged row of buttons at three different heights with 60px
of empty blue underneath them.
The cards are a flex column now and the buttons take margin-top:auto, so they
sit on one line along the bottom of the box whatever the copy above them
does. Full width as well, which is what makes them read as one row of four
rather than four pills of four different widths (127, 184, 188 and 253px). */
#about-1 .abox-1{
display:flex;flex-direction:column;
/* the theme's 45px top / 40px bottom, now that the button reaches the floor */
padding-bottom:40px;
}
#about-1 .abox-1 > .btn{
margin-top:auto; /* the whole point: push to the floor */
display:flex;align-items:center;justify-content:center;gap:9px;
width:100%;padding-left:14px;padding-right:14px;
text-align:center;
}
/* Between 992 and 1199 the four cards are at their narrowest and "Reseller
Program" wraps. The theme's 30px side padding is what it is competing
with, so that is what gives. */
@media (min-width:992px) and (max-width:1199px){
#about-1 .abox-1{ padding-left:20px;padding-right:20px; }
#about-1 .abox-1 > .btn{ padding-left:8px;padding-right:8px;font-size:.86rem; }
}
/* ── The "Talk to a person" button ──────────────────────────────────────────
The number was printed in full on the home page, which is a line anybody
scraping the page can lift. The button carries the same number in its href
with a prefilled first message, so a person reaches the same conversation in
one tap and a crawler gets a link rather than a phone number to harvest.
It was also the widest of the four at 253px against a 225px card, and it
carried white-space:nowrap, so it was being clipped by the card's own
overflow:hidden. The nowrap is gone: at full width it has the room. */
.abox-wa svg{ flex:none; }
/* ── The half menu ──────────────────────────────────────────────────────────
The theme sizes this panel for labels like "Patient Info Sheets". Ours name
products, so even shortened they need more room: at the theme's width the
two columns came out ~210px each and "Laboratory software" ran past the
panel's right edge into the page. */
.wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu{
width:600px !important;max-width:calc(100vw - 40px);
padding:22px 26px !important;
}
.wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu .link-list li a{
white-space:normal;
}
@media (max-width:991px){
.wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu{
width:100% !important;padding:0 !important;
}
}
/* ── Items with no destination yet ──────────────────────────────────────────
Company and Customer are half menus now, like Products and Resources, and
two of their items have nowhere to go: Careers has no listings and the
referral Program is not built. They are plain text with a "Soon" chip
rather than links — the rule this site already applies to the footer's
app-store badges, because a row that cannot be clicked is worse than a label
that says the thing is not out yet.
Matched to the theme's own .link-list li a metrics (15px/15px padding) so a
soon row sits on the same rhythm as the links around it. */
.wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li.is-soon{
padding:15px 0;line-height:18px;font-size:15px;font-weight:400;color:#9aa4b2;
cursor:default;
/* "Laboratory software" plus a "Coming soon" chip is wider than the column,
so this row wraps where the live links above it do not. The theme sets
nowrap on .link-list li; it has to come off here. */
white-space:normal;
}
/* A half menu is positioned from the left of its own nav item, so a panel late
in a right-aligned bar runs off the screen. Measured with all four groups as
half menus (Company and Customer were plain dropdowns until now), the panel
left the viewport on every group except Resources below 1280px.
Two bands, because one rule cannot cover both ends: right-anchoring the FIRST
item pushes its panel off the left instead, and the bar's items move as the
viewport changes, so which ones fit is a function of width.
Below 992 the theme switches to the mobile drawer and the panel is full
width, so these only have to hold from 992 up. */
.wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu{
width:600px !important;max-width:calc(100vw - 40px);
padding:22px 26px !important;
}
.wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu .link-list li a{
white-space:normal;
}
/* Customer, Resources, Pricing, Book a demo — anchored to their own right edge
so the panel opens inward. */
.wsmenu > .wsmenu-list > li:nth-last-child(-n+4) > .wsmegamenu.halfmenu{
left:auto !important;right:0 !important;
}
/* 992-1279: the bar is tighter and a 600px panel no longer fits from Company
onward, so it narrows and one more group anchors right. Products stays
left-anchored at both widths — it is the first item, and anchoring it right
would push its panel off the other edge. */
@media (min-width:992px) and (max-width:1279px){
.wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu{ width:480px !important; }
.wsmenu > .wsmenu-list > li:nth-last-child(-n+5) > .wsmegamenu.halfmenu{
left:auto !important;right:0 !important;
}
}
@media (max-width:991px){
.wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu{
width:100% !important;padding:0 !important;
}
.wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu{ left:0 !important;right:auto !important; }
}
/* ══════════════════════════════════════════════════════════════════════════
The demo enquiry modal
--------------------------------------------------------------------------
Brought back with the dialog itself. Its rules lived in the old
css/styles.css, so on the theme the