/* ==========================================================
komara-custom.css | Komara Jewelers (Aquamarine template)
Load from the global header:
Page scopes covered:
.komara-ji /pages/jewelers-mutual
(hooks only) / (home), /pages/bridal-and-engagement,
/pages/custom-jewelry, /pages/custom-gallery,
/pages/fine-jewelry
Shared, reusable hooks (use on any future Komara page):
.komara-kicker, .komara-kicker--rule small caps eyebrow above headings
.komara-bg-cream / .komara-bg-plum section background treatments
.komara-stack stacks widgets in a d-flex column
.komara-split-section / -text / -media image + text splits
.komara-card-col / .komara-card bordered feature cards
.komara-step numbered step strip (CSS counter)
.komara-list gold-marker lists (WYSIWYG )
.komara-cta-band centered dark CTA band
.komara-note italic fine print under a section
.komara-disclosure legal/disclaimer block
.komara-btn-pair spacing for two-button widgets
.komara-overlay-copy width cap for text-overlay copy
.komara-trust-bar 4-up trust bar (WYSIWYG widget)
.komara-builder-card bordered card for the band builders
in text-overlay headings eyebrow line on promo banners
Notes:
- Fonts, buttons and display sizes come from the Aquamarine theme.
This file only adds what the theme does not ship.
- Brand tokens live on :root. A future page scope can override
them locally by redeclaring the variables on its own hook.
Changelog:
- 2026-09-24 Added trust bar, overlay eyebrow, builder cards, and
centered alignment for .komara-btn-pair. Converted
indentation to tabs.
========================================================== */
:root {
--komara-plum: #5B4A6B;
--komara-dark: #1C1A22;
--komara-cream: #FAF8F5;
--komara-cream-deep: #F2EEE8;
--komara-gold: #C29B45; /* decorative only, not for text */
--komara-gold-text: #8A6A1B; /* text-safe gold on light backgrounds */
--komara-accent-font: "Marcellus SC", Georgia, serif;
--komara-heading-font: "Cormorant Garamond", Georgia, serif;
--komara-body-font: "Jost", Arial, sans-serif;
}
/* ---------- Kicker / eyebrow ---------- */
.komara-kicker {
font-family: var(--komara-accent-font);
font-size: 0.95rem;
letter-spacing: 0.14em;
color: var(--komara-gold-text);
}
.komara-kicker.text-light,
.alt .komara-kicker,
.banner-aquamarine .komara-kicker {
color: var(--komara-gold) !important; /* decorative gold passes on dark panels */
}
.komara-kicker--rule::after {
content: "";
display: block;
width: 48px;
height: 1px;
margin: 0.6rem auto 0;
background: var(--komara-gold);
}
@media (min-width: 768px) {
.text-md-left.komara-kicker--rule::after { margin-left: 0; }
}
/* ---------- Eyebrow inside text-overlay headings ----------
Promo banners have no room for a separate kicker widget, so the
eyebrow lives in the heading: EyebrowHeadline.
The editor saves it as Eyebrow
, so the stray
is hidden and the is forced onto its own line. */
.widget-text-overlay h2 > small,
.widget-text-overlay h3 > small {
display: block;
margin-bottom: 0.5rem;
font-family: var(--komara-accent-font);
font-size: 0.95rem;
letter-spacing: 0.12em;
text-transform: none;
color: var(--komara-gold); /* overlays sit on dark imagery */
}
.widget-text-overlay h2 > small br,
.widget-text-overlay h3 > small br {
display: none;
}
/* ---------- Section backgrounds ---------- */
.komara-bg-cream { background-color: var(--komara-cream-deep); }
.komara-bg-plum { background-color: var(--komara-plum); }
/* ---------- Stacked columns ----------
Aquamarine columns use d-flex, which lays multiple widgets side by
side. Any text column holding a kicker + heading + list + button
gets .komara-stack (plus flex-column) so the widgets stack. */
.komara-stack { flex-direction: column !important; }
.komara-stack > * { width: 100%; max-width: 100%; flex: 0 0 auto; }
/* ---------- Split sections ---------- */
.komara-split-section .komara-split-text > * { width: 100%; }
@media (min-width: 768px) {
.komara-split-section .komara-split-text { padding-left: 2.5rem; padding-right: 2.5rem; }
}
.komara-split-section .komara-split-media .widget-image-wrapper img {
object-fit: cover;
}
/* ---------- Trust bar (WYSIWYG widget) ----------
Markup: div.komara-trust-bar > ul.komara-trust-bar__list >
li.komara-trust-bar__item > strong.__value + span.__label
2-up on phones, 4-up with gold dividers from lg. */
.komara-trust-bar {
border-top: 1px solid var(--komara-gold);
border-bottom: 1px solid var(--komara-gold);
padding: 1.5rem 0;
}
.komara-trust-bar__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem 1rem;
}
.komara-trust-bar__item {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0 0.75rem;
text-align: center;
}
.komara-trust-bar__value {
font-family: var(--komara-heading-font);
font-size: 1.6rem;
font-weight: 600;
line-height: 1.1;
color: var(--komara-plum);
}
.komara-trust-bar__label {
font-family: var(--komara-body-font);
font-size: 1rem;
line-height: 1.4;
color: var(--komara-dark);
}
@media (min-width: 992px) {
.komara-trust-bar__list { grid-template-columns: repeat(4, 1fr); }
.komara-trust-bar__item + .komara-trust-bar__item {
border-left: 1px solid rgba(194, 155, 69, 0.45);
}
}
/* ---------- Feature cards ---------- */
.komara-card-col { display: flex; }
.komara-card {
width: 100%;
background: #FFFFFF;
border-top: 3px solid var(--komara-gold);
padding: 1.75rem 1.25rem;
box-shadow: 0 2px 14px rgba(28, 26, 34, 0.06);
}
/* Band builder cards (Custom Jewelry page, last section) */
.komara-builder-card {
width: 100%;
height: 100%;
background: #FFFFFF;
border: 1px solid rgba(91, 74, 107, 0.25);
border-top: 3px solid var(--komara-gold);
padding: 2rem 1.5rem;
}
/* ---------- Numbered steps ---------- */
.komara-ji-steps .row:nth-of-type(2),
.komara-step-row { counter-reset: komara-step; }
.komara-step { counter-increment: komara-step; }
/* One h6 per step column, so the number hangs off the heading only.
(Earlier version targeted two wrappers and drew the circle twice.) */
.komara-step h6::before {
content: counter(komara-step);
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
margin: 0 auto 1rem;
border-radius: 50%;
background: var(--komara-plum);
color: #FFFFFF;
font-family: var(--komara-accent-font);
font-size: 1.2rem;
}
/* ---------- Lists (WYSIWYG widgets) ---------- */
.komara-list {
padding-left: 1.2rem;
margin: 0.5rem 0 1.25rem;
text-align: left;
}
.komara-list li { margin-bottom: 0.6rem; }
.komara-list li::marker { color: var(--komara-gold); }
/* ---------- CTA band ---------- */
.komara-cta-band a:not(.btn) { color: #FFFFFF; }
/* ---------- Fine print ---------- */
.komara-note {
font-style: italic;
font-size: 0.95rem;
}
.komara-disclosure {
border-top: 1px solid rgba(28, 26, 34, 0.12);
}
.komara-disclosure__text {
font-size: 0.85rem;
color: #4A4650;
}
.komara-disclosure__text a { color: var(--komara-plum); text-decoration: underline; }
.komara-disclosure__asof {
font-size: 0.85rem;
font-style: italic;
color: #4A4650;
}
/* ---------- Buttons and overlay copy ---------- */
/* Two-button widgets: side by side from md up, stacked full width below */
.komara-btn-pair .btn { margin: 0.35rem 0; }
@media (min-width: 768px) {
.komara-btn-pair {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
}
.komara-btn-pair .btn { display: inline-block; width: auto; margin: 0; }
/* Pairs that stay centered on desktop (e.g. the gallery CTA band).
Pairs with text-md-left keep the default left alignment. */
.komara-btn-pair.text-center:not(.text-md-left) { justify-content: center; }
}
.komara-overlay-copy { max-width: 620px; }
/* ---------- Jewelers Mutual page tweaks ---------- */
.komara-ji-hero .komara-ji-hero-media { width: 100%; }