/* ============================================================
ZLS brand system: navy / gold / cream, per client-supplied
design (zls_homepage_design.html)
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');
:root {
--zls-navy: #061b33;
--zls-navy-2: #0b2949;
--zls-gold: #c99624;
--zls-gold-2: #e0ae3b;
--zls-cream: #f7f6f1;
/* A faint geometric lattice + 8-point star medallion, in the spirit of
Zanzibar's carved Stone Town doors and mashrabiya lattice screens -
used as a very low-opacity texture, never a loud print. */
--zls-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M0 0L56 56M56 0L0 56' stroke='%23e0ae3b' stroke-opacity='0.10' stroke-width='1'/%3E%3Cpath d='M16 16H40V40H16Z M28 11L45 28L28 45L11 28Z' fill='none' stroke='%23e0ae3b' stroke-opacity='0.18' stroke-width='1'/%3E%3C/svg%3E");
}
body {
font-family: "DM Sans", Arial, sans-serif;
background: var(--zls-cream);
}
/* Client hates whitespace: the theme's .bb-inner (every content-builder
row wrapper) defaults to 100px top/bottom padding, with presets going
up to 180px - kill it at the source instead of tuning it per row. */
.bb-inner {
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
h1, h2, h3, h4, h5, h6,
.title,
.site-branding__name {
font-family: "Playfair Display", Georgia, serif;
}
/* Top contact bar - flat .container > .contact-items + .top-links row,
ported directly from the client's design (zls_homepage_design.html) */
.topbar {
background: var(--zls-navy);
color: #fff;
font-size: 13px;
}
.topbar .container {
position: relative;
min-height: 43px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 6px 16px;
padding-top: 9px;
padding-bottom: 9px;
}
.topbar .contact-items-center {
display: flex;
flex-wrap: nowrap;
white-space: nowrap;
gap: 24px;
align-items: center;
}
@media (min-width: 768px) {
.topbar .contact-items-center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
.topbar .contact-items {
display: flex;
flex-wrap: nowrap;
white-space: nowrap;
gap: 24px;
align-items: center;
}
.topbar .contact-item {
display: flex;
gap: 8px;
align-items: center;
opacity: .96;
}
.topbar .contact-item i {
color: var(--zls-gold-2);
font-size: 12px;
}
.topbar .top-links {
display: flex;
align-items: center;
gap: 12px;
font-weight: 600;
}
.topbar a {
color: #fff;
}
.topbar a:hover {
color: var(--zls-gold-2);
}
/* Language toggle + "My ZLS Portal" pills in the top bar's right side -
ported look/feel from the client's zls_official_website_complete.html
mockup (dark chip w/ gold outline for the language toggle, solid gold
gradient button for the portal CTA), recolored onto this site's own
navy/gold variables. Both are placeholders (href="#") - no language
switching or portal login is implemented yet. */
.topbar .lang-toggle,
.topbar .btn-zls-portal {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 4px;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
transition: all .2s ease;
}
.topbar .topbar-icon {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.topbar .lang-toggle {
background: rgba(255, 255, 255, .08);
color: var(--zls-gold-2);
border: 1px solid rgba(224, 174, 59, .35);
}
.topbar .lang-toggle:hover {
background: rgba(255, 255, 255, .16);
color: var(--zls-gold-2);
}
.topbar .btn-zls-portal {
background: linear-gradient(to right, var(--zls-gold), var(--zls-gold-2));
color: var(--zls-navy);
box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.topbar .btn-zls-portal:hover {
background: linear-gradient(to right, var(--zls-gold-2), #ecc25a);
color: var(--zls-navy);
}
/* Drupal wraps each block's body in its own block/content/field divs -
collapse those out of layout so contact-items/top-links stay a flat
flex row reaching the real .contact-item / children, matching the
design's plain markup instead of stacking under the Drupal wrappers. */
.topbar .contact-items div:not(.contact-item),
.topbar .contact-items-center div:not(.contact-item),
.topbar .top-links div {
display: contents;
}
/* Nav underline uses gold on hover/active (theme accent already recolored) */
.navigation .gva_menu > li > a.active,
.navigation .gva_menu > li.active > a {
color: var(--zls-gold) !important;
}
/* "Find an Advocate" CTA button - last item in the main nav, styled as a
navy/gold button (not a plain nav link) to match the client mockup. It's
a placeholder (no href) until the advocate directory feature is built,
so it's targeted by position (:last-child) rather than a link class -
this theme's menu template doesn't propagate menu-link "options.attributes"
through to the rendered .
The other 7 nav items + logo + search icon already fill this header row
almost edge to edge (this theme lays the menu out as inline-block s,
not flex - .navigation .gva_menu's own resolved width can end up
narrower than the sum of its children even when the header still has
visible slack), and the exact margin varies slightly by page/active-item
state, so this button wrapped onto its own line on some pages (e.g.
/about-us) but not others. Fix: take it out of that inline-block flow
entirely with absolute positioning pinned to .navigation's right edge -
it can then never be the thing that overflows/wraps, regardless of how
tight the other 7 items run.
Anchored to `.content-inner`/`.header-main-inner` (both already
`position: relative` via the theme's own "p-relative" class, and
reliably full-row-height) rather than `.navigation` itself -
`.navigation` is a