/* =============================================================
ZARAS — Home atmosphere v2
Per-section dark tonal scenes for index.html only. Tuned for v3 preview.
Architecture:
1. Each section gets position:relative + isolation:isolate.
2. A shared ::before pseudo paints a full-bleed atmospheric
layer (radial glow + linear top→bottom dark wash). The
per-section tone is set via CSS custom properties:
--home-tone-rgb — "R G B" triplet for the glow color
--home-tone-alpha — peak alpha of the radial glow
--home-glow-x / -y — center of the radial glow (%)
--home-tone-top — color stop at section top
--home-tone-bottom — color stop at section bottom
3. Section signatures (constellation, ops-stage grid, scale
line, workflow grid, completion wire) layer on top of the
atmosphere via additional pseudos.
4. The closing section also hosts a new modules row
(Dispatch · Estimates · Invoices · Payments · Reports)
as the page-end signature beat.
Tones follow the home-page review (SD Direction doc):
Hero - subtle teal operational horizon
Platform - blue/teal cockpit charcoal
Industries - warmer dark steel/earth
Pricing - dark navy/violet-gray financial
How Access - muted teal workflow rail
Closing - strongest controlled teal conversion glow
Conventions:
- All rules scoped under body[data-page="home"] so other
pages cannot accidentally inherit. Atmosphere is a
home-page-only system; extending to other pages later
requires explicit opt-in.
- Loaded AFTER page-glow.v2 so the home atmosphere can
coexist with the existing body-bottom teal glow without
fighting it. body::after handles the global bottom bloom;
this file handles per-section tonal variation.
============================================================= */
/* -------- Defensive: prevent 100vw from causing a horizontal
scrollbar. Each atmospheric ::before uses width:100vw +
translateX(-50%) to escape the .shell width constraint;
without overflow:clip on html/body, that overshoots by the
vertical scrollbar's width and forces a horizontal scrollbar.
`clip` is preferred over `hidden` because it doesn't create
a scroll context (better behavior with position:fixed
descendants like the nav drawer). ------------------------- */
html { overflow-x: clip; }
body[data-page="home"] { overflow-x: clip; }
/* =============================================================
1. Atmosphere base — shared across all sections
============================================================= */
body[data-page="home"] .hero,
body[data-page="home"] #product,
body[data-page="home"] #trades,
body[data-page="home"] #pricing,
body[data-page="home"] .how-access,
body[data-page="home"] .closing {
position: relative;
isolation: isolate;
}
body[data-page="home"] .hero::before,
body[data-page="home"] #product::before,
body[data-page="home"] #trades::before,
body[data-page="home"] #pricing::before,
body[data-page="home"] .how-access::before,
body[data-page="home"] .closing::before {
content: "";
position: absolute;
top: 0; bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
z-index: -1;
pointer-events: none;
background:
/* Section-tone radial glow */
radial-gradient(
ellipse 70% 55% at var(--home-glow-x, 50%) var(--home-glow-y, 22%),
rgb(var(--home-tone-rgb, 118 199 178) / var(--home-tone-alpha, 0.10)) 0%,
rgb(var(--home-tone-rgb, 118 199 178) / 0.045) 35%,
transparent 72%
),
/* Top→bottom dark wash for depth */
linear-gradient(
180deg,
var(--home-tone-top, transparent) 0%,
var(--home-tone-bottom, transparent) 100%
);
/* Soft taper at section edges so adjacent sections blend
instead of butting hard at boundaries. */
-webkit-mask-image: linear-gradient(180deg,
transparent 0%, #000 7%, #000 93%, transparent 100%);
mask-image: linear-gradient(180deg,
transparent 0%, #000 7%, #000 93%, transparent 100%);
}
/* Hero is the page opener — no top-mask fade (would hide the
first ~7% of the warm horizon at top of page). */
body[data-page="home"] .hero::before {
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
}
/* Closing is the page finale — no bottom-mask fade (the glow
should bloom into the body-bottom teal without a hard cut).
No top-mask fade either — wall-to-wall conversion atmosphere. */
body[data-page="home"] .closing::before {
-webkit-mask-image: none;
mask-image: none;
}
/* =============================================================
2. Per-section tones
============================================================= */
/* HERO — subtle teal operational horizon.
Warm-amber would feel "sunny morning"; teal here reinforces
the AI/operating-layer brand identity right at first paint.
Glow source on the right balances the heavy left-aligned
headline and points the eye toward the route mesh. */
body[data-page="home"] .hero {
--home-tone-rgb: 118 199 178;
--home-tone-alpha: 0.10;
--home-glow-x: 78%;
--home-glow-y: 14%;
}
/* PLATFORM — blue/teal cockpit charcoal.
This is the product-proof scene. The dark-blue top wash
reads as "ops dashboard at night"; the dispatch surface
inside this section uses teal accents that pop against
the cooler blue base. */
body[data-page="home"] #product {
--home-tone-rgb: 72 140 170;
--home-tone-alpha: 0.11;
--home-glow-x: 50%;
--home-glow-y: 24%;
--home-tone-top: rgba(9, 15, 18, 0.62);
--home-tone-bottom: rgba(11, 10, 9, 0.10);
}
/* INDUSTRIES — warmer dark steel/earth.
Field/service world: shop floors, vans, light through
warehouse windows. Glow source from upper-left balances the
centered glow above on Platform. */
body[data-page="home"] #trades {
--home-tone-rgb: 172 130 74;
--home-tone-alpha: 0.085;
--home-glow-x: 30%;
--home-glow-y: 18%;
--home-tone-top: rgba(16, 13, 9, 0.72);
--home-tone-bottom: rgba(9, 12, 11, 0.20);
}
/* PRICING — dark navy/violet-gray financial.
A new tonal direction (no signal/amber). Financial UIs
live in this color space. Subdued, calm, "money is being
handled here." Glow on right complements the left-aligned
pricing copy. */
body[data-page="home"] #pricing {
--home-tone-rgb: 115 105 175;
--home-tone-alpha: 0.075;
--home-glow-x: 62%;
--home-glow-y: 26%;
--home-tone-top: rgba(10, 10, 16, 0.72);
--home-tone-bottom: rgba(11, 10, 9, 0.20);
}
/* HOW ACCESS WORKS — muted teal workflow rail.
Returns to teal because this section IS the operational
process visualization (ticket lifecycle). Slightly brighter
than hero so the section reads as the "active rail" — the
moment of operational confidence in the page. */
body[data-page="home"] .how-access {
--home-tone-rgb: 118 199 178;
--home-tone-alpha: 0.09;
--home-glow-x: 50%;
--home-glow-y: 42%;
--home-tone-top: rgba(8, 15, 13, 0.58);
--home-tone-bottom: rgba(11, 10, 9, 0.20);
}
/* CLOSING — strongest controlled teal conversion glow.
Highest peak alpha on the page (0.16). Glow source low
(70%) so the radial bloom rises from the CTA up into
the headline area, mirroring body::after's bottom-bloom
for a doubled finale moment. */
body[data-page="home"] .closing {
--home-tone-rgb: 118 199 178;
--home-tone-alpha: 0.16;
--home-glow-x: 50%;
--home-glow-y: 70%;
--home-tone-top: rgba(8, 15, 13, 0.40);
--home-tone-bottom: rgba(8, 18, 16, 0.10);
}
/* =============================================================
3. Section signatures — quiet decoratives that map each
section to its content theme. All procedural (CSS + SVG
data URLs); none compete with text or controls.
============================================================= */
/* ---- INDUSTRIES — scattered earth-tone constellation -----
Sits in upper-right corner of the section. Calls back to the
trade-constellation that anchors industries.html. Recolored
from the previous amber to align with the new earth tone
palette (slightly muted gold). */
body[data-page="home"] #trades::after {
content: "";
position: absolute;
top: 7%;
right: 4%;
width: 320px;
height: 220px;
z-index: -1;
pointer-events: none;
opacity: 0.55;
background-image:
radial-gradient(circle 1px at 12% 18%, rgba(200, 158, 92, 0.55), transparent 100%),
radial-gradient(circle 1px at 28% 8%, rgba(200, 158, 92, 0.45), transparent 100%),
radial-gradient(circle 1.5px at 44% 22%, rgba(225, 184, 110, 0.65), transparent 100%),
radial-gradient(circle 1px at 58% 6%, rgba(200, 158, 92, 0.40), transparent 100%),
radial-gradient(circle 1px at 72% 28%, rgba(200, 158, 92, 0.50), transparent 100%),
radial-gradient(circle 1px at 84% 12%, rgba(200, 158, 92, 0.35), transparent 100%),
radial-gradient(circle 1px at 18% 48%, rgba(200, 158, 92, 0.45), transparent 100%),
radial-gradient(circle 1.5px at 36% 56%, rgba(225, 184, 110, 0.55), transparent 100%),
radial-gradient(circle 1px at 52% 42%, rgba(200, 158, 92, 0.40), transparent 100%),
radial-gradient(circle 1px at 68% 64%, rgba(200, 158, 92, 0.45), transparent 100%),
radial-gradient(circle 1px at 86% 50%, rgba(200, 158, 92, 0.35), transparent 100%),
radial-gradient(circle 1px at 24% 78%, rgba(200, 158, 92, 0.40), transparent 100%),
radial-gradient(circle 1px at 46% 86%, rgba(200, 158, 92, 0.30), transparent 100%),
radial-gradient(circle 1px at 62% 74%, rgba(200, 158, 92, 0.35), transparent 100%),
radial-gradient(circle 1px at 78% 90%, rgba(200, 158, 92, 0.30), transparent 100%);
}
@media (max-width: 820px) {
body[data-page="home"] #trades::after { display: none; }
}
/* ---- INDUSTRIES — procedural field-ops texture ----------------
A controlled alternative to generic AI imagery. The band gives
this scene emotional texture (routes, vans, invoices, tools)
without shipping a heavy asset or risking stock-photo cheese. */
body[data-page="home"] #trades .field-ops-band {
position: relative;
min-height: 152px;
margin: 6px 0 30px;
border: 1px solid rgba(255, 250, 240, 0.085);
border-radius: 18px;
overflow: hidden;
background:
radial-gradient(ellipse 80% 140% at 12% 20%, rgba(200, 158, 92, 0.16), transparent 54%),
radial-gradient(ellipse 70% 120% at 82% 76%, rgba(118, 199, 178, 0.09), transparent 58%),
linear-gradient(135deg, rgba(21, 16, 10, 0.84), rgba(10, 13, 12, 0.94));
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.045),
inset 0 -1px 0 rgba(0,0,0,0.45),
0 32px 70px -54px rgba(0,0,0,0.9);
}
body[data-page="home"] #trades .field-ops-band::before {
content: "";
position: absolute;
inset: 0;
opacity: 0.68;
pointer-events: none;
background-image:
repeating-linear-gradient(90deg,
transparent 0, transparent 63px,
rgba(200, 158, 92, 0.105) 63px, rgba(200, 158, 92, 0.105) 64px),
repeating-linear-gradient(0deg,
transparent 0, transparent 47px,
rgba(255, 250, 240, 0.045) 47px, rgba(255, 250, 240, 0.045) 48px);
-webkit-mask-image: radial-gradient(ellipse 86% 72% at 50% 50%, #000 38%, transparent 100%);
mask-image: radial-gradient(ellipse 86% 72% at 50% 50%, #000 38%, transparent 100%);
}
body[data-page="home"] #trades .field-ops-band::after {
content: "";
position: absolute;
inset: 16px 20px;
opacity: 0.88;
pointer-events: none;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 88%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 88%, transparent 100%);
}
body[data-page="home"] #trades .field-ops-caption {
position: absolute;
left: 24px;
bottom: 20px;
max-width: 360px;
display: grid;
gap: 7px;
z-index: 1;
}
body[data-page="home"] #trades .field-ops-kicker {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(239, 236, 230, 0.46);
}
body[data-page="home"] #trades .field-ops-caption strong {
font-size: clamp(15px, 1.25vw, 18px);
font-weight: 500;
letter-spacing: -0.012em;
line-height: 1.25;
color: rgba(239, 236, 230, 0.88);
text-wrap: balance;
}
body[data-page="home"] #trades .home-shape {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,0.010), rgba(255,255,255,0));
transition: background 220ms ease, border-color 220ms ease, transform 260ms cubic-bezier(.2,.7,.2,1);
}
body[data-page="home"] #trades .home-shape::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
background: radial-gradient(circle at 18% 16%, rgba(200, 158, 92, 0.12), transparent 46%);
transition: opacity 220ms ease;
}
body[data-page="home"] #trades .home-shape:hover {
border-color: rgba(200, 158, 92, 0.20);
transform: translateY(-1px);
}
body[data-page="home"] #trades .home-shape:hover::before { opacity: 1; }
/* Touch-device fallback. The site's existing pattern uses
:active for tactile feedback on hover-incapable devices
(see .btn-primary:active, .pc-cta:active in main styles).
Without this, tapping a card on phone produces no visual
confirmation. */
@media (hover: none) {
body[data-page="home"] #trades .home-shape:hover {
border-color: var(--rule);
transform: none;
}
body[data-page="home"] #trades .home-shape:hover::before { opacity: 0; }
body[data-page="home"] #trades .home-shape:active {
border-color: rgba(200, 158, 92, 0.30);
transform: scale(0.99);
transition: transform 120ms cubic-bezier(.2,.6,.1,1),
border-color 120ms ease;
}
body[data-page="home"] #trades .home-shape:active::before { opacity: 1; }
}
@media (max-width: 720px) {
body[data-page="home"] #trades .field-ops-band {
min-height: 132px;
border-radius: 14px;
margin: 0 0 24px;
}
body[data-page="home"] #trades .field-ops-band::after { inset: 12px 10px; opacity: 0.66; }
body[data-page="home"] #trades .field-ops-caption {
left: 18px;
right: 18px;
bottom: 16px;
}
}
/* ---- PLATFORM — operations stage behind dispatch surface ----
The dispatch board no longer floats on a flat dark page; it
sits on a cockpit "stage" — a faint route-grid behind the
surface that extends slightly past its edges. Per SD: makes
dispatch feel like the center of an operating system, not a
screenshot. The grid is masked into a soft elliptical fade so
the lines never reach a hard edge. */
body[data-page="home"] #product .teaser-visual {
position: relative;
}
body[data-page="home"] #product .teaser-visual::before {
content: "";
position: absolute;
inset: -66px -58px -64px -58px;
z-index: -1;
pointer-events: none;
opacity: 0.96;
background-image:
/* Vertical hairlines */
repeating-linear-gradient(90deg,
transparent 0, transparent 47px,
rgba(72, 140, 170, 0.205) 47px, rgba(72, 140, 170, 0.205) 48px),
/* Horizontal hairlines */
repeating-linear-gradient(0deg,
transparent 0, transparent 47px,
rgba(72, 140, 170, 0.135) 47px, rgba(72, 140, 170, 0.135) 48px);
-webkit-mask-image: radial-gradient(
ellipse 78% 78% at 50% 50%, #000 22%, transparent 92%);
mask-image: radial-gradient(
ellipse 78% 78% at 50% 50%, #000 22%, transparent 92%);
}
/* Route hint — a single diagonal trace through the stage,
evoking dispatch movement (morning → afternoon, depot →
site). Layered above the grid but still behind the surface. */
body[data-page="home"] #product .teaser-visual::after {
content: "";
position: absolute;
inset: -66px -58px -64px -58px;
z-index: -1;
pointer-events: none;
opacity: 0.84;
background-image: url("data:image/svg+xml;utf8,");
background-size: 100% 100%;
background-repeat: no-repeat;
-webkit-mask-image: radial-gradient(
ellipse 90% 90% at 50% 50%, #000 30%, transparent 95%);
mask-image: radial-gradient(
ellipse 90% 90% at 50% 50%, #000 30%, transparent 95%);
}
@media (max-width: 720px) {
body[data-page="home"] #product .teaser-visual::before,
body[data-page="home"] #product .teaser-visual::after {
inset: -24px -20px -24px -20px;
}
}
body[data-page="home"] #product .surface.dispatch {
position: relative;
border-color: rgba(118, 199, 178, 0.145);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.07),
inset 1px 0 0 rgba(255,255,255,0.03),
0 44px 90px -50px rgba(0,0,0,0.95),
0 16px 38px -30px rgba(72,140,170,0.52);
}
/* ---- PRICING — Solo → Team → Multi-branch scale line -----
A horizontal connector behind/inside the home-tiers row that
visualizes the progression. Three node markers (one per tier)
ascend in opacity from Solo to Multi-branch. The line lives
inside .home-tiers (which has overflow:hidden + rounded
border), so it appears as a ribbon at the very top of the
tier card group, anchoring the three columns. */
body[data-page="home"] #pricing .home-tiers {
position: relative;
}
body[data-page="home"] #pricing .home-tiers::before {
content: "";
position: absolute;
top: 15px;
left: 6%;
right: 6%;
height: 1px;
background: linear-gradient(90deg,
rgba(140, 130, 195, 0.0) 0%,
rgba(140, 130, 195, 0.26) 12%,
rgba(150, 140, 205, 0.44) 50%,
rgba(180, 170, 220, 0.74) 88%,
rgba(180, 170, 220, 0.0) 100%);
z-index: 1;
pointer-events: none;
}
body[data-page="home"] #pricing .home-tiers::after {
content: "";
position: absolute;
top: 10px;
left: 0;
right: 0;
height: 10px;
z-index: 1;
pointer-events: none;
background-image:
radial-gradient(circle 3px at 16.66% 50%,
rgba(140, 130, 195, 0.50) 0%, rgba(140, 130, 195, 0.16) 45%, transparent 100%),
radial-gradient(circle 3.75px at 50% 50%,
rgba(160, 150, 210, 0.80) 0%, rgba(160, 150, 210, 0.22) 46%, transparent 100%),
radial-gradient(circle 5px at 83.33% 50%,
rgba(180, 170, 220, 1.0) 0%, rgba(180, 170, 220, 0.35) 45%, transparent 100%);
}
@media (max-width: 880px) {
/* Cards stack vertically on mobile — horizontal scale doesn't
map; hide it rather than show a misaligned line. */
body[data-page="home"] #pricing .home-tiers::before,
body[data-page="home"] #pricing .home-tiers::after { display: none; }
}
/* ---- HOW ACCESS WORKS — headline hierarchy ------------------- */
body[data-page="home"] .how-access-head {
display: grid;
grid-template-columns: minmax(0, 680px) auto;
align-items: end;
gap: 28px;
margin-bottom: 44px;
}
body[data-page="home"] .how-access-copyblock {
display: grid;
gap: 14px;
}
body[data-page="home"] .how-access-copyblock h2 {
max-width: 18ch;
font-size: clamp(32px, 4.6vw, 58px);
font-weight: 500;
line-height: 0.98;
letter-spacing: -0.025em;
text-wrap: balance;
}
body[data-page="home"] .how-access-copyblock p {
max-width: 58ch;
color: var(--ink-sub);
font-size: clamp(14px, 1.1vw, 16px);
line-height: 1.6;
}
body[data-page="home"] .how-access-eyebrow {
justify-self: end;
padding-bottom: 8px;
}
@media (max-width: 820px) {
body[data-page="home"] .how-access-head {
grid-template-columns: 1fr;
align-items: start;
margin-bottom: 32px;
}
body[data-page="home"] .how-access-copyblock h2 { max-width: 18ch; }
body[data-page="home"] .how-access-eyebrow { justify-self: start; padding-bottom: 0; }
}
/* ---- HOW ACCESS WORKS — faint workflow grid behind tickets ---
Per SD: "feel like an integrated scene, not a card strip
floating on the same background." A very light dotted grid
sits behind the ticket-rail, suggesting the operational
pipeline they live inside. */
body[data-page="home"] .how-access::after {
content: "";
position: absolute;
top: 22%;
bottom: 22%;
left: 4%;
right: 4%;
z-index: -1;
pointer-events: none;
opacity: 0.5;
background-image:
/* Dotted grid — vertical track lines */
repeating-linear-gradient(90deg,
transparent 0, transparent 79px,
rgba(118, 199, 178, 0.10) 79px, rgba(118, 199, 178, 0.10) 80px),
/* Dotted grid — horizontal rails */
repeating-linear-gradient(0deg,
transparent 0, transparent 39px,
rgba(118, 199, 178, 0.07) 39px, rgba(118, 199, 178, 0.07) 40px);
-webkit-mask-image: radial-gradient(
ellipse 80% 70% at 50% 50%, #000 30%, transparent 95%);
mask-image: radial-gradient(
ellipse 80% 70% at 50% 50%, #000 30%, transparent 95%);
}
@media (max-width: 720px) {
body[data-page="home"] .how-access::after { display: none; }
}
/* =============================================================
4. CLOSING — completion wire + modules row
============================================================= */
/* Completion wire — a teal hairline crossing the section,
anchored by a pulsing live dot at the left. Echoes the
route-mesh trace and ticket-rail packets earlier on the
page: "the journey ends here." */
body[data-page="home"] .closing .closing-wire {
/* This element does not exist in the markup — drawn via
pseudo-elements on .closing instead. Documented placeholder
so future markup tweaks don't surprise. */
}
body[data-page="home"] .closing > .shell {
position: relative;
/* So the wire pseudos below position relative to the shell,
not the full-bleed section. */
}
body[data-page="home"] .closing > .shell::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(118, 199, 178, 0.45) 4%,
rgba(118, 199, 178, 0.32) 30%,
rgba(118, 199, 178, 0.18) 58%,
rgba(118, 199, 178, 0.06) 80%,
transparent 96%);
z-index: 0;
pointer-events: none;
}
body[data-page="home"] .closing > .shell::after {
/* Live dot anchoring the wire's left end */
content: "";
position: absolute;
top: -3px;
left: 0;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--signal);
box-shadow:
0 0 12px rgba(118, 199, 178, 0.55),
0 0 24px rgba(118, 199, 178, 0.20);
z-index: 0;
pointer-events: none;
animation: closing-pulse 3.2s ease-in-out infinite;
}
@keyframes closing-pulse {
0%, 100% { opacity: 0.62; transform: scale(1); }
50% { opacity: 0.95; transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
body[data-page="home"] .closing > .shell::after { animation: none; }
}
/* Closing modules row — quiet enumeration of what the
operating layer covers, beneath the CTA. Mono labels,
uppercase, hairline separators. Marketed as the "and these
are the modules you're getting" line without making it a
feature list. aria-hidden so the labels don't compete with
the CTA's accessible name. */
.closing-modules {
margin-top: 72px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
}
.closing-modules .cm-item {
position: relative;
padding: 8px 22px 8px 0;
margin-right: 22px;
transition: color 240ms ease;
}
.closing-modules .cm-item:last-child {
padding-right: 0;
margin-right: 0;
}
.closing-modules .cm-item::after {
content: "";
position: absolute;
right: 0;
top: 30%;
bottom: 30%;
width: 1px;
background: var(--rule-hi);
}
.closing-modules .cm-item:last-child::after { display: none; }
.closing-modules .cm-item:first-child {
/* First module gets a tiny live-dot prefix so it visually
hooks onto the completion wire above. */
padding-left: 14px;
}
.closing-modules .cm-item:first-child::before {
content: "";
position: absolute;
left: 0;
top: 50%;
margin-top: -2px;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--signal);
opacity: 0.65;
}
@media (max-width: 720px) {
.closing-modules {
margin-top: 56px;
gap: 4px 14px;
font-size: 10.5px;
letter-spacing: 0.14em;
}
.closing-modules .cm-item {
padding: 4px 14px 4px 0;
margin-right: 14px;
}
}