. Amber-
* bronze + bold reads as a deliberate reference mark; data-fn (the
* asterisk count) links each marked row to its footnote(s). */
.cs-fn-ref {
color: #b07020 !important;
font-weight: 700 !important;
font-size: 11px !important;
letter-spacing: 1px;
margin-left: 1px;
line-height: 0;
cursor: help;
}
/* ── Group footnote ──
* One block per card; each footnote is a inside.
* Slate text on a warm cream tint with an amber top border — was
* 11px #8fb0cc on white, which failed contrast at that size and
* never read as connected to the in-row asterisks. */
.cs-spec-footnote-group {
font-size: 12px !important;
line-height: 1.55;
color: #4a6a85 !important;
padding: 10px 14px 11px;
background: #fdf9f0;
border-top: 3px solid #edae44 !important;
}
.cs-spec-footnote-group p {
margin: 0 0 6px !important;
padding: 2px 4px;
border-radius: 4px;
font-size: inherit !important;
color: inherit !important;
}
.cs-spec-footnote-group p:last-child { margin-bottom: 0 !important; }
.cs-spec-footnote-group .cs-fn-ref {
vertical-align: baseline;
line-height: inherit;
margin: 0 3px 0 0;
cursor: default;
}
/* ── Footnote ↔ row link highlight (toggled by cs-specs.js on
* hover/tap; matching is data-fn within one card) ── */
.cs-spec-row.cs-fn-hl { background: #fdf3e0 !important; }
.cs-spec-footnote-group p.cs-fn-hl {
background: #fdf3e0;
box-shadow: inset 3px 0 0 #edae44;
}
/* ── Electrical section ── */
.cs-spec-group-elec {
grid-column: 1 / -1;
}
.cs-elec-tabs {
display: flex;
align-items: center;
border-bottom: 1px solid #bdd4e7;
}
.cs-elec-tabs::before {
content: 'View specs for:';
padding: 10px 14px;
font-size: 13px;
color: #8fb0cc;
white-space: nowrap;
margin-right: 4px;
flex-shrink: 0;
}
.cs-elec-tab {
padding: 13px 18px;
font-size: 14px;
font-weight: 600;
border: none;
background: none;
cursor: pointer;
color: #4a6a85;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: all 0.15s;
font-family: 'DM Sans', sans-serif;
letter-spacing: 0.3px;
}
.cs-elec-tab:hover { color: #2d5c88; }
.cs-elec-tab.active {
color: #1b3751;
border-bottom-color: transparent;
background: #fdf3e0;
}
/* ── Active output label bar ── */
.cs-elec-output-label {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
background: #fdf3e0 !important;
border-bottom: 2px solid #edae44!important;
font-size: 12px;
color: #92400e;
}
.cs-elec-output-label strong {
color: #92400e;
font-weight: 700;
}
.cs-elec-output-label span {
font-size: 11px;
color: #b07020;
font-weight: 400;
}
.cs-elec-pane { display: none; }
.cs-elec-pane.active {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
/* ── Electrical pane row borders ── */
.cs-elec-pane.active .cs-spec-row {
border-bottom: 1px solid #edf4fa;
background: #fff;
}
.cs-elec-pane.active .cs-spec-row:last-child {
border-bottom: none;
}
/* Left column — even rows among spec rows only */
.cs-elec-pane.active .cs-spec-row:nth-child(even) {
border-right: 2px solid #bdd4e7;
}
/* Matched pair alternating backgrounds */
.cs-elec-pane.active .cs-spec-row:nth-child(4n+1),
.cs-elec-pane.active .cs-spec-row:nth-child(4n+2) { background: #edf4fa; }
.cs-elec-pane.active .cs-spec-row:nth-child(4n+3),
.cs-elec-pane.active .cs-spec-row:nth-child(4n+4) { background: #ffffff; }
/* ── Page-level footnote ── */
.cs-spec-footnote {
font-size: 12px !important;
color: #8fb0cc !important;
font-style: normal !important;
margin-top: 8px !important;
}
/* ── Prefer pairs: 830–1814px — two columns, orphan-free ──
* In this band auto-fit would often yield THREE columns, which
* strands the 4th card beside a blank cell (observed 1385–1814px).
* Two ~450–650px cards are at least as readable as three ~360px
* ones, so force pairs here; auto-fit resumes above 1814px where
* four-across genuinely fits.
*
* Orphan rescue: in a 2-column grid, the last group before the
* full-width Electrical section is stranded if and only if it is
* odd-indexed — in which case it spans the full row instead. The
* second selector covers pages whose last group ISN'T Electrical.
* Deterministic for any spec-group count. */
@media only screen and (min-width: 830px) and (max-width: 1814px) {
.cs-specs-grid {
grid-template-columns: repeat(2, 1fr);
}
.cs-spec-group:nth-child(odd):nth-last-child(2),
.cs-spec-group:nth-child(odd):last-child:not(.cs-spec-group-elec) {
grid-column: 1 / -1;
}
}
/* ── Deterministic desktop columns: cs-specs-cols-N ──
* The shortcode counts the series' spec groups (capped at 4) and
* emits the class, so the grid can match the data exactly instead
* of trusting auto-fit — whose "empty track" collapse never fires
* here because the full-width electrical card occupies EVERY track,
* keeping a ghost column alive (blank space beside the last group
* on 3-group series like CS14).
*
* cols-4 gets NO rule on purpose: 4-group series keep today's
* auto-fit + two-column-band behavior verbatim. The higher
* (0,2,0) specificity of these compound selectors beats the band's
* .cs-specs-grid rule inside 1025–1814px, and the rescue disabler
* out-specifies the band's orphan rescue — a full-row span makes
* no sense once the column count matches the group count. Mobile
* (≤829px) wins by media scoping: these rules never apply there. */
@media only screen and (min-width: 1025px) {
.cs-specs-grid.cs-specs-cols-1 { grid-template-columns: 1fr; }
.cs-specs-grid.cs-specs-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cs-specs-grid.cs-specs-cols-3 { grid-template-columns: repeat(3, 1fr); }
.cs-specs-grid.cs-specs-cols-1 .cs-spec-group:nth-child(odd):nth-last-child(2),
.cs-specs-grid.cs-specs-cols-1 .cs-spec-group:nth-child(odd):last-child:not(.cs-spec-group-elec),
.cs-specs-grid.cs-specs-cols-2 .cs-spec-group:nth-child(odd):nth-last-child(2),
.cs-specs-grid.cs-specs-cols-2 .cs-spec-group:nth-child(odd):last-child:not(.cs-spec-group-elec),
.cs-specs-grid.cs-specs-cols-3 .cs-spec-group:nth-child(odd):nth-last-child(2),
.cs-specs-grid.cs-specs-cols-3 .cs-spec-group:nth-child(odd):last-child:not(.cs-spec-group-elec) {
grid-column: auto;
}
}
/* ── Narrow-column type scale: 830–1024px ──
* In the lower half of the two-column band each name/value cell runs
* ~170–220px. One step down (14 -> 13px) plus slimmer row padding
* stops labels like "Compensated Temperature" from ragged wrapping.
* Deliberately NOT applied below 830px: single-column cards are
* full-width there, so 14px has ample room and stays more readable.
* 13px is the floor for data text; footnotes/labels floor at 12px. */
@media only screen and (min-width: 830px) and (max-width: 1024px) {
.cs-spec-name,
.cs-spec-val {
font-size: 13px;
}
.cs-spec-row {
padding: 9px 14px;
}
.cs-spec-header {
font-size: 13px;
padding: 11px 14px;
}
.cs-spec-footnote-group {
font-size: 12px;
}
}
/* ── Electrical output tabs: pill mode below 955px ──
* Squeezed underline-tabs wrap into multi-line text fragments and
* stop reading as clickable. Below 955px (raised from 900 after
* on-device review) the label takes its own line and the tabs become
* bordered pills — same affordance language as the mobile
* sub-section nav. */
@media only screen and (max-width: 954px) {
.cs-elec-tabs {
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 10px 14px 12px;
}
.cs-elec-tabs::before {
flex-basis: 100%;
padding: 0;
margin: 0 0 2px;
}
.cs-elec-tab {
border: 1.5px solid #bdd4e7;
border-radius: 10px;
background: #ffffff;
padding: 7px 14px;
font-size: 13px;
line-height: 1.3;
margin-bottom: 0;
text-align: center;
}
.cs-elec-tab:hover {
border-color: #2d5c88;
color: #2d5c88;
}
.cs-elec-tab.active {
background: #fdf3e0;
border-color: #edae44;
color: #1b3751;
}
}
/* ── Mobile / small tablet: single column ──
* Floor raised from 767px to 829px empirically — iPad portrait (768)
* was still smushing two-column cards. */
@media only screen and (max-width: 829px) {
.cs-specs-grid {
grid-template-columns: 1fr;
}
/* FIX: was `1 / -3`. On the 1-column mobile grid line -3 doesn't
* exist, so the grid manufactured implicit columns and auto-placed
* cards into them — OFF-VIEWPORT (missing Thermal/Physical cards,
* phantom vertical gaps, stray border at the right edge). */
.cs-spec-group-elec {
grid-column: 1 / -1;
}
.cs-elec-pane.active {
grid-template-columns: 1fr;
}
/* Single-column corrections for the electrical pane: the 4n striping
* and the pair border-right encode the two-column pairing — in one
* column they produce double-stripes and a floating divider. Revert
* to simple alternation. (Label bar is child 1; rows start at 2, so
* even = 1st, 3rd, 5th visible rows.) */
.cs-elec-pane.active .cs-spec-row:nth-child(even) {
border-right: none;
background: #edf4fa;
}
.cs-elec-pane.active .cs-spec-row:nth-child(odd) {
background: #ffffff;
}
}
/* Minimal host styles; most UI is encapsulated in the Web Component */
cs-configurator { display:block; margin: 10px 0; }
model-viewer { background:#fff !important; }
/* Core Sensors Accessories — front-end (Option 2 photo-top cards)
Scoped under #top for Enfold; !important guards the properties the theme
is most likely to override (link color, image sizing, type, margins). */
#top .cs-acc-cards {
--cs-primary: #2d5c88;
--cs-navy: #1b3751;
--cs-amber: #edae44;
--cs-card: #edf4fa;
--cs-card-border: #bdd4e7;
--cs-desc: #4a6a85;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin: 0;
padding: 0;
list-style: none;
}
#top .cs-acc-card {
display: flex;
flex-direction: column;
background: var(--cs-card);
border: 1px solid var(--cs-card-border);
border-radius: 10px;
overflow: hidden;
transition: border-color .15s ease;
}
#top .cs-acc-card:hover {
border-color: var(--cs-primary);
}
/* Photo area — white, product shown in full (no crop) */
#top .cs-acc-card-photo {
width: 100%;
height: 180px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
box-sizing: border-box;
}
#top .cs-acc-card-photo img,
#top .cs-acc-card-img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
object-fit: contain !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
display: block;
}
#top .cs-acc-card-ph {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: var(--cs-primary);
}
#top .cs-acc-card-ph svg {
width: 60px;
height: 60px;
opacity: .5;
}
/* Body */
#top .cs-acc-card-body {
flex: 1;
display: flex;
flex-direction: column;
padding: 16px 18px 18px;
}
#top .cs-acc-card-name {
font-size: 15px !important;
font-weight: 600 !important;
color: var(--cs-navy) !important;
line-height: 1.35 !important;
margin: 0 0 5px !important;
}
#top .cs-acc-card-part {
font-size: 12.5px !important;
font-weight: 500 !important;
color: var(--cs-primary) !important;
margin: 0 0 8px !important;
}
#top .cs-acc-card-part-label {
color: #8a98a6 !important;
font-weight: 600 !important;
margin-right: 3px !important;
}
#top .cs-acc-card-desc {
font-size: 13px !important;
color: var(--cs-desc) !important;
line-height: 1.6 !important;
margin: 0 !important;
}
#top .cs-acc-card-link {
font-size: 13px !important;
font-weight: 600 !important;
color: var(--cs-primary) !important;
text-decoration: none !important;
margin-top: auto !important;
padding-top: 12px !important;
display: inline-block;
align-self: flex-start;
}
#top .cs-acc-card-link:hover {
color: var(--cs-amber) !important;
}
/* Empty state — shown when a set has no accessories (or isn't found) */
#top .cs-acc-empty {
--cs-primary: #2d5c88;
--cs-navy: #1b3751;
--cs-amber: #edae44;
--cs-card: #edf4fa;
--cs-card-border: #bdd4e7;
background: #f8fbfd;
border: 1px dashed var(--cs-card-border);
border-radius: 10px;
padding: 40px 24px;
text-align: center;
}
#top .cs-acc-empty-icon {
color: var(--cs-primary);
opacity: .7;
margin-bottom: 14px;
line-height: 0;
}
#top .cs-acc-empty-icon svg {
width: 46px;
height: 46px;
}
#top .cs-acc-empty-title {
font-size: 16px !important;
font-weight: 700 !important;
color: var(--cs-navy) !important;
line-height: 1.3 !important;
margin: 0 0 5px !important;
}
#top .cs-acc-empty-sub {
font-size: 13px !important;
color: #6a849a !important;
line-height: 1.55 !important;
margin: 0 !important;
}
#top .cs-acc-empty-sub a {
color: var(--cs-primary) !important;
font-weight: 600 !important;
text-decoration: none !important;
}
#top .cs-acc-empty-sub a:hover {
color: var(--cs-amber) !important;
}
@media (max-width: 980px) {
#top .cs-acc-cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
#top .cs-acc-cards {
grid-template-columns: 1fr;
}
}
/* Front-end styles for [cs_downloads]. */
#top .cs-downloads {
--cs-doc-navy: #173a5e;
--cs-doc-navy-soft: #40638c;
--cs-doc-gold: #e0a03c;
--cs-doc-rule: #e1e5ea;
--cs-doc-ink: #4a5057;
--cs-doc-muted: #7b848c;
--cs-doc-arrow: #8a99ab;
--cs-doc-hover: #f4f7fa;
/* Spare — the heading badge carries its own background now. */
--cs-doc-bg: #ffffff;
/* Reveal bar. #f7f9fb if this needs to be more obvious. */
--cs-doc-reveal: #fafbfc;
--cs-doc-reveal-hover: #f1f5f9;
}
#top .cs-downloads__sprite {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
#top .cs-downloads__intro {
color: var(--cs-doc-ink);
margin-bottom: 1.75em;
}
#top .cs-downloads__columns {
column-count: 1;
/* Gap scales with the viewport so mid-width tab panels aren't
eaten by fixed 120px gutters. */
column-gap: clamp(48px, 7vw, 120px);
}
#top .cs-downloads__group {
margin: 0 0 1.75em;
break-inside: avoid;
page-break-inside: avoid;
-webkit-column-break-inside: avoid;
}
#top .cs-downloads__group:last-child {
margin-bottom: 0;
}
@media (min-width: 860px) {
#top .cs-downloads__columns {
/* Width-driven: UP TO 3 columns, but only as many as fit at
>=240px each. Inside a narrow tab panel (e.g. 1000px
viewport ~> 500px content) this yields 2 columns, then 1 —
instead of three ~100px slivers. No breakpoints to tune;
the available width decides. */
column-count: 3;
column-width: 240px;
}
#top .cs-downloads__group:last-child {
margin-bottom: 1.75em;
}
}
/* Reset Enfold's h3 border and margins first. */
#top .cs-downloads__heading {
position: relative;
font-size: 14px;
line-height: 1.3;
letter-spacing: 0.09em;
text-transform: uppercase;
font-weight: 700;
color: var(--cs-doc-navy-soft);
margin: 0 0 0.35em;
padding: 0;
border: 0;
}
/* Rule behind the heading, gold for the first 12px. */
#top .cs-downloads__heading::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 1px;
background: linear-gradient(
to right,
var(--cs-doc-gold) 0 12px,
var(--cs-doc-rule) 12px
);
}
/* Navy badge sitting on the rule. margin-left sets the badge edge, padding
sets where its text starts. Titles below start at 23px. */
#top .cs-downloads__heading-text {
position: relative;
display: inline-block;
margin-left: 22px;
padding: 0 6px;
background: linear-gradient(to bottom, #2d5c88, #1b3751) !important;
color: #ffffff;
}
/* Enfold targets li, so the marker has to be cleared there too. */
#top .cs-downloads__list {
list-style: none;
margin: 0;
padding: 0;
}
#top .cs-downloads__item {
list-style: none;
margin: 0;
padding: 0;
border: 0;
}
#top .cs-downloads__item::before,
#top .cs-downloads__item::after {
content: none;
display: none;
}
#top .cs-downloads__item::marker {
content: "";
}
#top .cs-downloads__link {
display: flex;
align-items: baseline;
gap: 10px;
padding: 8px 6px;
margin: 0 -6px;
border-radius: 3px;
text-decoration: none;
color: var(--cs-doc-ink);
transition: background-color 0.12s ease;
}
#top .cs-downloads__link:hover,
#top .cs-downloads__link:focus {
background: var(--cs-doc-hover);
text-decoration: none;
}
#top .cs-downloads__link:focus-visible {
outline: 2px solid var(--cs-doc-gold);
outline-offset: -2px;
}
/* Arrow uses currentColor, so hover and focus drive it from here. */
#top .cs-downloads__arrow {
flex: 0 0 auto;
width: 13px;
height: 13px;
position: relative;
top: 2px;
color: var(--cs-doc-arrow);
transition: color 0.12s ease, transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* 3px — anything less reads as a wobble rather than motion. */
#top .cs-downloads__link:hover .cs-downloads__arrow,
#top .cs-downloads__link:focus .cs-downloads__arrow {
color: var(--cs-doc-gold);
transform: translateY(3px);
}
#top .cs-downloads__text {
flex: 1 1 auto;
min-width: 0;
}
#top .cs-downloads__title {
display: block;
font-size: 14px;
color: var(--cs-doc-navy);
line-height: 1.4;
}
/* Default underline collides with descenders. */
#top .cs-downloads__link:hover .cs-downloads__title {
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
#top .cs-downloads__note {
display: block;
font-size: 13px;
line-height: 1.4;
font-weight: 400;
color: var(--cs-doc-muted);
}
#top .cs-downloads__meta {
flex: 0 0 auto;
font-size: 12px;
color: var(--cs-doc-muted);
white-space: nowrap;
letter-spacing: 0.01em;
}
/* Reveal control ------------------------------------------------------- */
/* Summary has to be the first child in the markup, but belongs at the end
when expanded — flex order moves it. The closed-state hide is needed
because Safari stops hiding content once it's a flex container. */
#top .cs-downloads__more {
margin: 0;
display: flex;
flex-direction: column;
}
#top .cs-downloads__more > .cs-downloads__more-toggle {
order: 2;
}
#top .cs-downloads__more:not([open]) > .cs-downloads__list {
display: none;
}
/* Same geometry as .cs-downloads__link so the chevron and label land in the
arrow and title columns. */
#top .cs-downloads__more-toggle {
position: relative;
display: flex;
align-items: baseline;
gap: 10px;
cursor: pointer;
padding: 9px 6px 8px;
margin: 6px -6px 0;
border-radius: 0 0 3px 3px;
background: var(--cs-doc-reveal);
font-size: 13px;
font-weight: 400;
color: var(--cs-doc-navy-soft);
list-style: none;
transition: background-color 0.12s ease;
}
/* Inset 6px to cancel the toggle's negative margin, so it lines up with the
heading rule. */
#top .cs-downloads__more-toggle::before {
content: "";
position: absolute;
left: 6px;
right: 6px;
top: 0;
height: 1px;
background: var(--cs-doc-rule);
}
/* Deeper than the row hover — against the tint the usual one disappears. */
#top .cs-downloads__more-toggle:hover {
background: var(--cs-doc-reveal-hover);
}
/* Matches the arrow's 13px. The chevron border picks up currentColor. */
#top .cs-downloads__more-slot {
flex: 0 0 auto;
width: 13px;
text-align: center;
position: relative;
top: -1px;
color: var(--cs-doc-arrow);
transition: color 0.12s ease;
}
#top .cs-downloads__more-toggle:hover .cs-downloads__more-slot {
color: var(--cs-doc-gold);
}
/* WebKit needs the pseudo-element, everything else needs list-style. */
#top .cs-downloads__more-toggle::-webkit-details-marker {
display: none;
}
#top .cs-downloads__more-toggle::marker {
content: "";
}
#top .cs-downloads__more-toggle:hover .cs-downloads__more-label {
color: var(--cs-doc-gold);
}
#top .cs-downloads__more-toggle:focus-visible {
outline: 2px solid var(--cs-doc-gold);
outline-offset: 2px;
border-radius: 3px;
}
#top .cs-downloads__chev {
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
transition: transform 0.15s ease;
}
#top .cs-downloads__more[open] .cs-downloads__chev {
transform: rotate(180deg);
}
#top .cs-downloads__more-label--open {
display: none;
}
#top .cs-downloads__more[open] .cs-downloads__more-label--open {
display: inline;
}
#top .cs-downloads__more[open] .cs-downloads__more-label--closed {
display: none;
}
#top .cs-downloads__notice {
padding: 10px 14px;
border-left: 3px solid var(--cs-doc-gold);
background: #fdf6e9;
color: #6b4a12;
font-size: 13px;
}
@media (max-width: 600px) {
#top .cs-downloads__link {
flex-wrap: wrap;
}
#top .cs-downloads__meta {
flex: 1 1 100%;
padding-left: 23px;
}
}
/* Container-query version of the same stacking: a row lives inside a
COLUMN, so viewport width says nothing about how much room it has
(1000px viewport can mean a 100px column inside the tab panel).
Each group measures its own inline size; when its column is too
narrow for title + nowrap meta side by side, the meta drops to its
own line — same treatment as the <=600px rule, keyed to the width
that actually matters. Unsupported browsers simply keep the
viewport rule above. */
#top .cs-downloads__group {
container-type: inline-size;
}
@container (max-width: 230px) {
#top .cs-downloads__link {
flex-wrap: wrap;
}
#top .cs-downloads__meta {
flex: 1 1 100%;
padding-left: 23px;
}
}
/* Reduced motion. Colour still carries every state. The chevron rotation is
left alone — it shows open vs closed, so it flips instantly instead. */
@media (prefers-reduced-motion: reduce) {
#top .cs-downloads__link,
#top .cs-downloads__arrow,
#top .cs-downloads__chev,
#top .cs-downloads__more-slot,
#top .cs-downloads__more-toggle {
transition: none;
}
#top .cs-downloads__link:hover .cs-downloads__arrow,
#top .cs-downloads__link:focus .cs-downloads__arrow {
transform: none;
}
}
/* ═══════════════════════════════════════════════════════
CS PRODUCT IMAGE GALLERY — Stylesheet
Managed by: core-sensors-gallery plugin
═══════════════════════════════════════════════════════ */
/* ── Gallery wrapper ── */
.cs-gallery {
overflow: hidden;
background: #fff;
font-family: 'DM Sans', 'Segoe UI', sans-serif;
}
/* ── Main image area ── */
.cs-gallery-main-wrap {
position: relative;
cursor: zoom-in;
}
.cs-gallery-main {
width: 100%;
height: 340px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
border: 1px solid #e6e6e6;
border-radius: 10px;
}
.cs-gallery-img {
max-width: 100% !important;
max-height: 340px !important;
width: auto !important;
height: auto !important;
object-fit: contain;
display: block;
opacity: 1;
transition: opacity .2s ease;
}
/* ── Expand/zoom button ── */
.cs-gallery-zoom {
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
border-radius: 6px;
background: rgba(0,0,0,.3);
border: none;
color: #fff;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: background .15s;
}
.cs-gallery-zoom:hover { background: rgba(0,0,0,.5); }
/* ── Prev/Next arrows ── */
.cs-gallery-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255,255,255,.9);
border: 1px solid #bdd4e7;
color: #2d5c88;
font-size: 22px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: background .15s, border-color .15s, box-shadow .15s;
padding: 0;
visibility: hidden;
}
.cs-gallery-arrow:hover {
background: #fff;
border-color: #2d5c88;
box-shadow: 0 2px 8px rgba(45,92,136,.15);
}
.cs-gallery-prev { left: 10px; }
.cs-gallery-next { right: 10px; }
/* ── Loading spinner ── */
.cs-gallery-spinner,
.cs-lb-spinner {
display: none;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 24px; height: 24px;
border: 2px solid #bdd4e7;
border-top-color: #2d5c88;
border-radius: 50%;
animation: cs-spin .7s linear infinite;
}
@keyframes cs-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
/* ── Caption bar ── */
.cs-gallery-caption-bar {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 8px 14px;
background: #fff;
min-height: 36px;
}
.cs-gallery-caption {
font-size: 13px;
color: #4a6a85;
line-height: 1.5;
flex: 1;
}
.cs-gallery-count {
font-size: 14px;
color: #8fb0cc;
white-space: nowrap;
flex-shrink: 0;
padding-top: 1px;
}
/* ── Filmstrip rows ── */
.cs-gallery-strip-row {
display: flex;
background: #edf4fa;
margin: 0;
padding: 0;
border-left: 1px solid #bdd4e7;
border-right: 1px solid #bdd4e7;
}
/* Separator between the caption bar and the first (always-visible) strip row */
.cs-gallery-strip-row:not(.cs-gallery-strip-extra) {
border-top: 1px solid #bdd4e7;
}
.cs-gallery-strip-row:last-child {
border-radius: 0 0 11px 11px;
overflow: hidden;
}
.cs-gallery-strip-row + .cs-gallery-strip-row {
border-top: 1px solid #bdd4e7;
}
/* Round off the bottom of row 1 whenever the extra row is hidden (collapsed,
or never populated because the series has 3 or fewer images) */
.cs-gallery-strip-row:not(.cs-gallery-strip-extra):has(+ .cs-gallery-strip-extra:not(.cs-gallery-strip-open)) {
border-bottom: 1px solid #bdd4e7;
border-radius: 0 0 11px 11px;
overflow: hidden;
}
.cs-gallery-strip-extra {
display: none;
}
/* Expanded extra row: wrap thumbnails 5-up instead of one ever-shrinking flex
row, so adding more photos stays tidy. The "Less" tile grows to fill whatever
is left on the final line, so every row is fully populated — no empty trailing
cells, and every photo gets a complete border on all four sides. */
.cs-gallery-strip-extra.cs-gallery-strip-open {
display: flex;
flex-wrap: wrap;
background: #fff;
}
.cs-gallery-strip-extra.cs-gallery-strip-open .cs-gallery-strip-item {
height: 76px;
border-bottom: 1px solid #bdd4e7;
box-sizing: border-box;
}
.cs-gallery-strip-extra.cs-gallery-strip-open .cs-gallery-strip-item:not(.cs-gallery-toggle) {
flex: 0 0 20%;
}
/* "Less" tile absorbs the remaining width on the final line */
.cs-gallery-strip-extra.cs-gallery-strip-open .cs-gallery-toggle {
flex: 1 1 auto;
}
/* Right edge of each full row is framed by the row, not the cell */
.cs-gallery-strip-extra.cs-gallery-strip-open .cs-gallery-strip-item:nth-child(5n) {
border-right: none;
}
/* ── Filmstrip items ── */
.cs-gallery-strip-item {
flex: 1;
min-width: 0;
height: 90px;
border-right: 1px solid #bdd4e7;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
transition: background .15s;
position: relative;
overflow: hidden;
}
.cs-gallery-strip-item:last-child { border-right: none; }
.cs-gallery-strip-item::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: transparent;
transition: background .15s;
}
.cs-gallery-strip-item.active::after { background: #edae44; }
.cs-gallery-strip-item:hover:not(.active):not(.cs-gallery-toggle) {
background: #ddeaf5;
}
.cs-gallery-strip-item img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* ── Toggle tile ── */
.cs-gallery-toggle {
flex-shrink: 0;
flex-grow: 1;
flex-direction: column;
gap: 4px;
cursor: pointer;
background: #edf4fa;
}
.cs-gallery-toggle:hover { background: #ddeaf5 !important; }
.cs-gallery-toggle-num {
font-size: 20px;
font-weight: 600;
color: #1b3751;
line-height: 1;
}
.cs-gallery-toggle-lbl {
font-size: 14px;
color: #4a6a85;
/* When the tile narrows and the label wraps to two lines, the
wrap centers under the +N instead of ragged-left stacking */
text-align: center;
line-height: 1.25;
padding: 0 4px;
}
/* ════════════════════════════════════════
LIGHTBOX
════════════════════════════════════════ */
.cs-lb {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.9);
z-index: 999999;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 20px;
}
.cs-lb.cs-lb-open {
display: flex;
}
/* Close button */
.cs-lb-close {
position: absolute;
top: 14px; right: 16px;
width: 38px; height: 38px;
border-radius: 50%;
/* Solid navy chip: the ghost-white treatment was invisible wherever
the white image wrap extends under it (all phone widths) */
background: rgba(27,55,81,.6);
border: 1px solid rgba(255,255,255,.35);
color: #fff;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s;
z-index: 2;
}
.cs-lb-close:hover { background: rgba(27,55,81,.85); }
/* Image wrap */
.cs-lb-img-wrap {
position: relative;
width: 100%;
max-width: 800px;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
min-height: 0;
background-color: #fff;
}
.cs-lb-img {
max-width: 100%;
max-height: 65vh;
width: auto;
height: auto;
object-fit: contain;
border-radius: 6px;
display: block;
opacity: 1;
transition: opacity .2s ease;
}
/* Lightbox arrows */
.cs-lb-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 42px; height: 42px;
border-radius: 50%;
/* Navy chips for the same reason as the close button: on phones
they overlap the white image wrap, where ghost-white vanished */
background: rgba(27,55,81,.55);
border: 1px solid rgba(255,255,255,.35);
color: #fff;
font-size: 26px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s;
padding: 0;
z-index: 2;
}
.cs-lb-arrow:hover { background: rgba(27,55,81,.85); }
.cs-lb-prev { left: -54px; }
.cs-lb-next { right: -54px; }
/* Caption */
.cs-lb-caption-wrap {
text-align: center;
width: 100%;
max-width: 800px;
}
.cs-lb-caption {
font-size: 14px;
color: rgba(255,255,255,.75);
line-height: 1.5;
}
.cs-lb-count {
font-size: 15px;
color: rgba(255,255,255,.4);
margin-top: 4px;
margin-bottom: 4px;
font-family: 'DM Sans', 'Segoe UI', sans-serif;
}
/* Lightbox thumbnail strip */
.cs-lb-thumbs {
display: flex;
justify-content: center;
gap: 8px;
overflow-x: auto;
width: 100%;
max-width: 800px;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.2) transparent;
padding-bottom: 4px;
}
.cs-lb-thumbs::-webkit-scrollbar { height: 3px; }
.cs-lb-thumbs::-webkit-scrollbar-thumb {
background: rgba(255,255,255,.2);
border-radius: 3px;
}
.cs-lb-thumb {
width: 56px;
height: 48px;
border-radius: 5px;
border: 2px solid transparent;
overflow: hidden;
cursor: pointer;
flex-shrink: 0;
transition: border-color .15s;
background: rgba(255,255,255,.08);
}
.cs-lb-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
background-color: #fff;
}
.cs-lb-thumb.active { border-color: #edae44; }
.cs-lb-thumb:hover:not(.active) { border-color: rgba(255,255,255,.35); }
/* ── Responsive ── */
@media (max-width: 600px) {
.cs-gallery-main { height: 260px; }
/* The image's own cap must track the container: at 340px inside a
260px overflow-hidden box, tall photos were clipped ~80px */
.cs-gallery-img { max-height: 260px !important; }
.cs-gallery-strip-item { height: 72px; }
.cs-gallery-strip-extra.cs-gallery-strip-open .cs-gallery-strip-item:not(.cs-gallery-toggle) {
flex-basis: 33.333%;
}
.cs-gallery-strip-extra.cs-gallery-strip-open .cs-gallery-strip-item {
height: 72px;
}
/* Re-base the last-column border for a 3-up row */
.cs-gallery-strip-extra.cs-gallery-strip-open .cs-gallery-strip-item:nth-child(5n) {
border-right: 1px solid #bdd4e7;
}
.cs-gallery-strip-extra.cs-gallery-strip-open .cs-gallery-strip-item:nth-child(3n) {
border-right: none;
}
.cs-lb-prev { left: -10px; }
.cs-lb-next { right: -10px; }
.cs-lb-img { max-height: 55vh; }
}
/* ============================================================
Core Sensors — Common Applications · front-end cards
Rendered by [cs_applications set="..."].
============================================================ */
.cs-apps-wrap {
font-family: "DM Sans", Verdana, sans-serif;
color: #1b3751;
}
.cs-apps-wrap *,
.cs-apps-wrap *::before,
.cs-apps-wrap *::after {
box-sizing: border-box;
}
/* ── grid ── */
.cs-apps-wrap .cs-apps-grid {
display: grid !important;
grid-template-columns: 1.3fr 1fr 1fr !important;
gap: 12px !important;
margin-top: 12px !important;
padding: 0 !important;
background: transparent !important;
}
/* ── standard + base card ── */
.cs-apps-wrap .cs-app-card {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
padding: 16px !important;
background: #ffffff !important;
border: 0.5px solid #d8e1e8 !important;
border-radius: 10px !important;
text-decoration: none !important;
color: #1b3751 !important;
box-shadow: none;
float: none;
width: auto !important;
margin: 0 !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.cs-apps-wrap .cs-app-card:hover {
border-color: #C5DAE6;
box-shadow: 0 2px 8px rgba(45, 92, 136, 0.06);
transform: translateY(-1px);
}
/* ── card title ── */
.cs-apps-wrap .cs-app-name {
display: flex !important;
align-items: center;
gap: 8px;
font-size: 13px !important;
font-weight: 600 !important;
color: #1b3751 !important;
margin: 0 0 4px 0 !important;
line-height: 1.3 !important;
}
/* orange dot — standard cards only */
.cs-apps-wrap .cs-app-card:not(.cs-app-featured) .cs-app-name::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: #edae44;
flex-shrink: 0;
box-shadow: 0 0 0 3px rgba(237, 174, 68, 0.15);
}
/* ── card description ── */
.cs-apps-wrap .cs-app-desc {
font-size: 12px !important;
line-height: 1.5 !important;
color: #4a6a85 !important;
margin: 0 !important;
}
/* ── featured card ── */
.cs-apps-wrap .cs-app-card.cs-app-featured {
grid-row: span 2 !important;
background: linear-gradient(135deg, #1b3751 0%, #2d5c88 100%) !important;
border: none !important;
padding: 22px !important;
justify-content: space-between !important;
overflow: hidden;
position: relative;
color: #ffffff !important;
cursor: default;
}
.cs-apps-wrap .cs-app-card.cs-app-featured:hover {
box-shadow: 0 4px 14px rgba(27, 55, 81, 0.18);
transform: translateY(-1px);
border: none !important;
background: linear-gradient(135deg, #1b3751 0%, #2d5c88 100%) !important;
}
/* featured title — no dot, white, larger */
.cs-apps-wrap .cs-app-featured .cs-app-name {
display: block !important;
font-size: 18px !important;
font-weight: 500 !important;
color: #ffffff !important;
margin: 0 0 8px 0 !important;
line-height: 1.2 !important;
}
.cs-apps-wrap .cs-app-featured .cs-app-name::before {
display: none !important;
}
/* featured description */
.cs-apps-wrap .cs-app-featured .cs-app-desc {
font-size: 13px !important;
color: rgba(255, 255, 255, 0.85) !important;
line-height: 1.5 !important;
}
/* ── badge ── */
.cs-apps-wrap .cs-app-badge {
display: inline-block !important;
align-self: flex-start !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0.5px !important;
color: #1b3751 !important;
background: #edae44 !important;
padding: 3px 8px !important;
border-radius: 4px !important;
text-transform: uppercase !important;
margin-bottom: 14px !important;
}
/* ── Learn more link (anchor inside the featured div) ── */
.cs-apps-wrap .cs-app-featured a.cs-app-link,
.cs-apps-wrap .cs-app-featured a.cs-app-link:visited,
.cs-apps-wrap .cs-app-featured a.cs-app-link:hover {
display: inline-block !important;
margin-top: 18px !important;
font-size: 12px !important;
color: #edae44 !important;
font-weight: 700 !important;
letter-spacing: 0.2px !important;
text-decoration: none !important;
background: transparent !important;
}
/* ── Learn more on standard cards — keeps the click affordance obvious ── */
.cs-apps-wrap .cs-app-card:not(.cs-app-featured) .cs-app-link {
display: inline-block !important;
margin-top: 10px !important;
font-size: 12px !important;
font-weight: 700 !important;
color: #2d5c88 !important;
letter-spacing: 0.2px !important;
text-decoration: none !important;
}
.cs-apps-wrap a.cs-app-card:hover .cs-app-link {
text-decoration: underline !important;
}
/* ── responsive ── */
@media (max-width: 1024px) {
.cs-apps-wrap .cs-apps-grid { grid-template-columns: 1fr 1fr !important; }
.cs-apps-wrap .cs-app-card.cs-app-featured {
grid-row: span 1 !important;
grid-column: span 2 !important;
}
}
@media (max-width: 600px) {
.cs-apps-wrap .cs-apps-grid { grid-template-columns: 1fr !important; }
.cs-apps-wrap .cs-app-card.cs-app-featured { grid-column: span 1 !important; }
}
/* =========================================================================
Core Sensors FAQ — front-end styles
(Ships with the plugin. Disable with: add_filter('cs_faq_enqueue_css','__return_false'))
========================================================================= */
.cs-faq-title {
font-family: 'Barlow Condensed', sans-serif;
font-size: 28px;
font-weight: 700;
color: #1b3751;
margin-bottom: 6px;
}
.cs-faq-intro {
font-size: 14px;
color: #4a6a85;
margin-bottom: 24px;
line-height: 1.6;
}
.cs-faq-intro a { color: #2d5c88; font-weight: 600; text-decoration: none; }
.cs-faq-intro a:hover { text-decoration: underline; }
.cs-faq-box {
border: 1px solid #bdd4e7;
border-radius: 12px;
overflow: hidden;
background: #fff;
}
.cs-faq-item {
border-bottom: 1px solid #bdd4e7;
overflow: hidden;
transition: background .2s;
}
.cs-faq-item:last-child { border-bottom: none; }
.cs-faq-item.open { background: #f5f9fc; }
.cs-faq-row {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
cursor: pointer;
user-select: none;
}
.cs-faq-num {
width: 30px; height: 30px;
border-radius: 50%;
border: 1.5px solid #bdd4e7;
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 600;
color: #8fb0cc;
flex-shrink: 0;
font-family: 'DM Mono', monospace;
transition: background .2s, border-color .2s, color .2s;
}
.cs-faq-item.open .cs-faq-num {
background: #edae44;
border-color: #edae44;
color: #fff;
}
.cs-faq-q {
flex: 1;
font-size: 15px;
color: #1b3751;
line-height: 1.4;
}
.cs-faq-item.open .cs-faq-q {
font-weight: 600;
}
.cs-faq-chevron {
font-size: 18px;
color: #8fb0cc;
transition: transform .35s cubic-bezier(.4,0,.2,1), color .2s;
flex-shrink: 0;
}
.cs-faq-item.open .cs-faq-chevron {
transform: rotate(180deg);
color: #edae44;
}
.cs-faq-body {
height: 0;
overflow: hidden;
transition: height .35s cubic-bezier(.4,0,.2,1);
}
.cs-faq-ans-wrap { padding: 0 20px 0 64px; }
.cs-faq-ans {
font-size: 15px;
color: #4a6a85;
line-height: 1.8;
padding: 1px 0px 1px 16px;
border-left: 2px solid #edae44 !important;
margin-bottom: 20px;
}
.cs-faq-ans a { color: #2d5c88; text-decoration: underline !important; }
.cs-faq-ans a:hover { text-decoration: underline; }
.cs-faq-resources {
padding: 10px 0 20px 16px;
border-top: 1px solid #bdd4e7;
margin-top: 20px;
}
.cs-faq-res-lbl {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1b3751;
margin-bottom: 8px;
}
.cs-faq-res-links { display: flex; flex-direction: column; gap: 5px; }
.cs-faq-res-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #2d5c88;
text-decoration: none;
padding: 5px 10px;
border-radius: 6px;
border: 1px solid #bdd4e7;
background: #fff;
transition: background .15s, border-color .15s;
width: fit-content;
font-weight: 600;
}
.cs-faq-res-link:hover { background: #edf4fa; border-color: #2d5c88; }
/* Tabler chevron glyph in resource links */
.cs-faq-res-link::before {
content: '\276F';
font-family: 'tabler-icons';
font-size: 13px;
}
/* Rows are