/* ========================= 1) GLOBAL VARIABLES & UTILITIES ========================= */ /************************************************* * GLOBAL / SMALL UTILITIES *************************************************/ :root{ --list-thumb-w: 220px; --list-gap: 1.5rem; --sep: #e0e0e0; --meta-gap-x: 1.5rem; --meta-gap-y: .5rem; /* theme */ --lotus-bg-outer: #2d2d2f; /* gutters / full-width bands */ --lotus-bg: #3b3b3e; /* inner content background */ --lotus-bg-2: #4a4a4d; /* hover shade */ --lotus-pink: #D894CC; /* brand pink */ } /* --- Button palette (Four Treasures) --- */ :root { --btn-primary: #D894CC; /* pink */ --btn-primary-hover: #b57aa9; --btn-secondary: #000; /* black */ --btn-secondary-hover: #333; } /************************************************* * SITEWIDE PAGINATION — single source of truth * (Articles lists, legacy modules, Four Treasures, etc.) *************************************************/ :root { --pg-h: 34px; --pg-gap: 8px; --pg-radius: 4px; --pg-font: 600 14px/34px Oswald, sans-serif; --pg-bg: #3b3b3e; /* dark tiles */ --pg-bg-hover: #2f2f31; /* dark hover */ --pg-active: var(--lotus-pink, #D894CC); --pg-disabled: rgba(189, 189, 191, 0); } /* ===================================================== LOTUS — Unified SEARCH UI (sitewide, no grid changes) Single source for search/filter row visuals. (Grid left as originally implemented.) ===================================================== */ :root{ --lg-h: 2.5rem; /* 40px */ --lg-r: .25rem; /* 4px */ --lg-pad-x: .75rem; /* 12px */ --lg-gap: .5rem; /* 8px */ --lg-input-bg: #fff; --lg-input-bd: #ccc; --lg-focus: rgba(216,148,204,.35); --lg-ink: #3b3b3e; --lg-ink-hover: #2f2f31; --lg-pink: #D894CC; --lg-pink-hover: #b57aa9; } /************************************************* * GLOBAL — Buttons + Select Carets + Nav Arrows (CLEAN CONSOLIDATION) * Replace everything in your current bottom section with THIS block. *************************************************/ /* Tokens */ :root{ --lotus-pink: #D894CC; --lotus-claret: #6C1E33; --btn-bg: #333; --btn-bg-h: #444; } /************************************************* * Superscript/Subscript Styling *************************************************/ :root{ --script-scale: 0.75; /* visual scale factor */ --sup-shift: -0.0em; /* raise superscripts */ --sub-shift: 0.0em; /* lower subscripts */ } /************************************************************** * LOTUS — CONSOLIDATED SEARCH UI (Hyperion + Sherlock only) * - No global button overrides * - No sitewide select overrides * - Scoped to: .searchbar (top/Hyperion) and .lotusSearch (Sherlock) **************************************************************/ /* Design tokens (local, not global) */ :root { --lotus-pink: #D894CC; --lotus-ink: #5a5a5c; /* dark gray used for primary buttons */ --lotus-ink-h:#3f3f40; /* darker hover fallback if needed */ --lotus-sel: #666; /* dark select background */ --lotus-sel-h:#707070; /* select hover background */ } /* Books list: match Articles list margins/background */ .itemid-206 .com-content-category-blog.blog { background: transparent !important; /* remove forced white card */ border-radius: 0 !important; box-shadow: none !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; /* reset any inner card padding */ } /* Secondary (Clear) — catch common patterns */ button[type="reset"], input[type="reset"], button.clear, button.clear-btn, input.clear-btn, button[id*="clear" i], button[name*="clear" i], input[type="button"][value="Clear" i], input[type="submit"][value="Clear" i] { background: var(--btn-secondary) !important; color: #fff !important; } button[type="reset"]:hover, input[type="reset"]:hover, button.clear:hover, button.clear-btn:hover, input.clear-btn:hover, button[id*="clear" i]:hover, button[name*="clear" i]:hover, input[type="button"][value="Clear" i]:hover, input[type="submit"][value="Clear" i]:hover { background: var(--btn-secondary-hover) !important; } /* If an element advertises "secondary/clear/reset", map to dark style */ .lg-search .btn-secondary, .lg-search .clear, .lg-search .clear-btn, .lg-search .reset, .lg-search .btn-outline-secondary{ background: var(--lg-ink); } .lg-search .btn-secondary:hover, .lg-search .clear:hover, .lg-search .clear-btn:hover, .lg-search .reset:hover, .lg-search .btn-outline-secondary:hover{ background: var(--lg-ink-hover); } /* === Fix button text vertical alignment (FT style) === */ button.sbtn, /*.lg-btn, .lotusgemologypublications .filters button { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 48px !important; min-height: 48px !important; padding: 0 18px !important; /* reset line-height so flex does the centering */ line-height: normal !important; }*/ /************************************************* * HYPERION + FOUR TREASURES — CARET VIA ::after (BYPASSES BACKGROUND CONFLICTS) * Append at the VERY BOTTOM of /templates/lotus/css/custom.css * Renders a claret ▼ using a pseudo-element on the filter cell that CONTAINS a . *************************************************/ /* 0) Base: make filter cells a positioning context */ .lotusgemologygallery .hgallery .filters .hfilter, .lotusgemologypublications .filters .hfilter{ position: relative !important; } /* 2) Center all search/filter bars consistently */ :where(form) .filters { display: flex; flex-wrap: wrap; justify-content: center !important; /* <-- centering */ align-items: center !important; gap: 10px 14px; /* tidy spacing */ } /* Fix misaligned list numbers in reference lists */ .inclusion-refs { list-style-type: decimal; list-style-position: outside; margin: 0 0 0 1.5em; padding-left: 1.5em; counter-reset: refnum; } /* ========================= 2) TYPOGRAPHY & COLORS ========================= */ h4 { color: #666; font-size: 1rem !important; padding-top: 0.4rem; } section#newsletter-panel2 h3 { padding: 0 !important; line-height: 42px; } .image-pair .caption-article { text-align: left; margin-top: .5rem; } .lotusgemologypublications h1 { margin-bottom: 15px; } .lotusgemologypublications .publications h2 { color: var(--lotus-pink); margin-bottom: 16px; } .lotusgemologypublications .publications a:hover h2 { color: #858585; } .lotusgemologypublications .publications h2 .reference_type { color: #d496c2; font-size: 11px; } /* 3) Subtle pink accent underline */ #sp-title .sp-page-title .page-title::after, .com-content-category-blog .page-header .page-title::after { content: ""; display: block; margin-top: 12px; width: 64px; height: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--lotus-pink), #b57aa9); box-shadow: 0 1px 0 rgba(0,0,0,.05); } /* Staff titles: no longer links, so use neutral heading color */ .item.staff-card .item-title, .item.staff-card h1.item-title, .item.staff-card h2.item-title { color: #222 !important; /* dark neutral, matches body/headings */ } /* Add subtle gray border around intro/list images (all list views) */ .com-content-category-blog .blog-items .item img:first-of-type, .com-content-category-blog .items-leading .item img:first-of-type, .com-content.blog .blog-items .item img:first-of-type, .com-content.blog .items-leading .item img:first-of-type, .item.staff-card .card-image img { border: 1px solid #ddd !important; /* light gray border */ box-sizing: border-box; } /************************************************* * UNIVERSAL LIST STYLE — match Staff behavior * (applies to Articles / Books / Lectures / Reviews / Memberships) *************************************************/ /* Image: float left, text wraps right */ .com-content-category-blog .blog-item .item-image, .com-content-category-blog .blog-item img:first-of-type { float: left !important; width: var(--list-thumb-w) !important; max-width: var(--list-thumb-w) !important; height: auto !important; margin: 0 var(--list-gap) 1rem 0 !important; border: 1px solid #ddd; /* subtle border like Staff */ border-radius: 4px; box-sizing: border-box; } .figure-table .caption-article { text-align: left; padding-top: .6rem; font-size: .95rem; line-height: 1.4; } /* STAFF: keep title hairline from running under the thumbnail */ .item.staff-card h1.item-title, .item.staff-card h2.item-title, .item.staff-card .item-title { display: flow-root; /* creates a new BFC */ /* fallback if you ever need it: overflow: hidden; */ } .item.staff-card h1.item-title, .item.staff-card h2.item-title, .item.staff-card .item-title { display: flow-root; } .mod-articles-category .newsflash-article-intro, .mod-articles-category .intro, .mod-articles-category p{ margin:0 !important; } /* Fallback clearfix for older browsers */ @supports not (display: flow-root) { .com-content-category-blog .blog-item::after { content: ""; display: block; clear: both; } } @supports not (display: flow-root) { .com-content-category-blog .blog-item::after { content: ""; display: block; clear: both; /* fallback clearfix */ } } /* Icon appearance (Lotus pink tone) */ .navbar .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(216,148,204)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); width: 1.75rem; height: 1.75rem; background-size: 1.75rem 1.75rem; } /************************************************* * CAPTION-ARTICLE — author (L) | published (R) *************************************************/ .caption-article { line-height: 18px; padding-left: 10px; padding-right: 10px; padding-top: 2px; padding-bottom: 25px; font-size: 14px; text-align: left; } .itemid-330 .caption-article { width: 75%; margin: auto; } sup[role="doc-noteref"] a { text-decoration: none; } /************************************************* * QUOTE (custom .quote component) *************************************************/ .quote::before { font-family: Fontawesome; font-size: 2.9rem; position: absolute; top: 17px; opacity: 0.5; left: 10px; } .quote { font-size: 0.9rem; font-style: italic !important; margin-left: 2em; margin-right: 2em; position: relative; padding: 1em 1em 0.5em 4.6em; } .quote-attribution { font-size: 0.9em; text-align: right; margin-left: 2em; margin-right: 2.5em; position: relative; padding: 0 0 1em 4.6em; } /************************************************* * BLOCKQUOTE — GLOBAL (applies everywhere incl. Hyperion) *************************************************/ blockquote.standard { font-family: 'Source Serif 4', serif; font-style: italic; font-size: 1.1875rem; color: gray; font-weight: 500; position: relative; padding-left: 5.4rem; padding-right: 4rem; padding-top: 1.8rem; margin: 0; /* rely on surrounding layout/banners for vertical spacing */ } /* Opening mark — single, unified definition */ blockquote.standard::before { content: "\201C"; font-size: 6.25rem; color: #ccc; display: block; position: absolute; top: -33px; /* consistent alignment site-wide */ left: 2rem; line-height: 1.8; /* prevents vertical drift */ pointer-events: none; } /* Citation */ blockquote cite.standard, cite.standard { display: block; padding-top: 0.5rem; padding-right: 2rem; padding-left: 1rem; padding-bottom: 0.5rem; position: relative; text-align: right; } blockquote cite.standard::before, cite.standard:before { content: "\2014 \2009 \2009"; position: relative; } /* Responsive */ @media (max-width: 768px) { blockquote.standard { padding-left: 1rem; padding-right: 1rem; } blockquote.standard::before { left: 0; font-size: 4rem; } } /* Make all common text elements inherit the box color (beats older rules) */ .shadow-box h1, .shadow-box h2, .shadow-box h3, .shadow-box h4, .shadow-box h5, .shadow-box h6, .shadow-box p, .shadow-box blockquote, .shadow-box cite, .shadow-box .quote, .shadow-box .quote::before { color: inherit !important; } .shadow-box .quote { padding-left: 0px; padding-right: 0px; } /* Quotes inside shadow-box: no extra decoration */ .shadow-box .quote { background: transparent; font-style: normal; } .shadow-box .quote:before { content: "" !important; } /* Optional: subtle pink panel behind the Sherlock row */ .lotusSearch .hyperion{ background: rgba(216,148,204,.12); border-radius: 8px; padding: 16px; } /* ========================= 3) LAYOUT & CONTAINERS ========================= */ .itemid-224 .fields-container, .itemid-224 .field-entry, .itemid-224 .article-info-term { display: none !important; } /************************************************* * IMAGE PAIRS / GRIDS *************************************************/ .image-pair { max-width: 100%; margin: 1rem 0; } .image-grid-2x1 { max-width: 100%; margin: 1rem 0; } .image-grid-2x1 .a { grid-area: a; } .image-grid-2x1 .b { grid-area: b; } .image-grid-2x1 .c { grid-area: c; padding-top: .75rem; display: flex; justify-content: center; } .image-grid-2x1 img { display: block; width: 100%; height: auto; } /* Mobile tweaks: reduce padding so hero doesn’t crowd content */ @media (max-width: 640px) { .view-category .page-header, .com-content-category-blog .page-header { padding: 24px 0 18px; } .view-category .page-header .page-title::after, .com-content-category-blog .page-header .page-title::after { margin-top: 10px; width: 48px; height: 3px; } } /* Optional: ensure it uses the same edge-to-edge width inside the container */ body > .container .com-content-category-blog.blog { margin-left: 0; margin-right: 0; } /* Text block alignment */ .com-content-category-blog .blog-item .card-content, .com-content-category-blog .blog-item .item-content { flex: 1; overflow: hidden; margin: 0; /* kill random side margins */ } .com-content-category-blog .blog-item img:first-of-type { flex: 0 0 var(--list-thumb-w); height: auto; /* keeps natural proportion */ } .com-content-category-blog .blog-item .item-content, .com-content-category-blog .blog-item .card-content { flex: 1 1 auto; min-width: 0; /* prevents text overflow */ } /* 3) Normalize the inner rhythm: same bottom margins on key rows */ .com-content-category-blog .blog-item .item-title, .mod-articles-category .newsflash-title { margin-bottom: .6rem !important; } /* Kill random margins inside the row */ .com-content-category-blog .blog-item .item-image, .com-content-category-blog .blog-item img:first-of-type{ margin:0 !important; display:block !important; } /* 4) Image never contributes extra spacing (we rely on the row gap only) */ .com-content-category-blog .blog-item img:first-of-type { margin-right: 0 !important; } /* Container helper */ .lg-search { display:flex; flex-wrap:wrap; gap: var(--lg-gap); align-items:center; } .lg-row { display:flex; flex-wrap:wrap; gap: var(--lg-gap); align-items:center; } /* small screens: stack neatly */ @media (max-width:640px){ body.com_content.view-article .page-header.lotus-article-header .article-meta-bar{ flex-wrap:wrap; row-gap:4px; } body.com_content.view-article .page-header.lotus-article-header .article-meta-bar .book-pubdate{ margin-left:0; width:100%; text-align:left; /* change to right if you prefer */ } } /* also catch any fields-container not under .item-page */ body.com_content.view-article .fields-container .field-entry.date{ display: none !important; } /* optional wrapper tint used under Sherlock bar */ .hyperion{ background: rgba(215,149,204,.24); border-radius:8px; padding-top:.8rem; margin:.8rem; } /* ========================= 4) BUTTONS & FORMS ========================= */ /************************************************* * CONTACT / FORMS / RECAPTCHA / BUTTONS *************************************************/ #contact-form .rc-anchor-logo-text { font-size: 8px !important; } #contact-form .control-group { margin-bottom: 15px; } #req-nda button.btn.btn-primary.validate:hover { padding-right: 30px; } /*.form-select, #advanced-search input[type="text"], input#filter_search { background: #fff; border: none; outline: none !important; } .form-control:focus { box-shadow: 0 0 0 1px rgba(13,110,253,.25); } button.sbtn { background: var(--lotus-bg) !important; border-radius: 0; font-size: 18px !important; letter-spacing: .2px; padding: 0 15px; line-height: 48px; }*/ button.sbtn:after { display: none; } #featured-break h2, #featured-break h3, #featured-break .section-title { font-family: 'Oswald', sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; } .lotusgemologypublications label, .lotusgemologypublications input[type="text"] { font-size: 1rem; } .lotusgemologypublications input[type="text"] { height: 40px; } .lotusgemologypublications .filters { display: flex; align-items: center; margin-left: 0; } .lotusgemologypublications .filters input, .lotusgemologypublications .filters select, .lotusgemologypublications .filters button { max-width: 100%; width: 100%; } .lotusgemologypublications .filters button { width: auto; } .lotusgemologypublications .filters .filterdesc { font-size: 14px; font-weight: 400; line-height: 16px; } .lotusgemologypublications .overlay { position: absolute; inset: 0; background: rgba(0,0,0,.3); opacity: 0; transition: opacity .15s linear; -webkit-transform: translate3d(0,0,0); } #sp-title .sp-page-title .page-title, .com-content-category-blog .page-header .page-title { /* 2) Stylized wordmark */ font-family: Oswald, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; line-height: 1; margin: 0 0 18px 0; font-size: clamp(40px, 7vw, 96px); color: #2b2b2d; text-shadow: 0 1px 0 rgba(255,255,255,.35); } .list-hero__title { font-family: Oswald, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; line-height: 1; margin: 0; font-size: clamp(40px, 7vw, 96px); color: #2b2b2d; text-shadow: 0 1px 0 rgba(255,255,255,.35); } .list-hero__title { font-family: Oswald, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; line-height: 1; margin: 0; font-size: clamp(40px, 7vw, 96px); color: #2b2b2d; text-shadow: 0 1px 0 rgba(255,255,255,.35); } /* Buttons rendered as links inside SPPB */ #footer-panel .sppb-btn-link:hover, #footer-panel .sppb-btn-link:focus, #copyright .sppb-btn-link:hover, #copyright .sppb-btn-link:focus { color: #D894CC !important; } /* 2) Stop margin-collapsing inside the text column */ .com-content-category-blog .blog-item .item-content, .com-content-category-blog .blog-item .card-content, .mod-articles-category li.newsflash-item .article-content { display: flow-root; /* creates a new block formatting context */ } /* LISTS: keep each entry below its own floated thumbnail */ .com-content-category-blog .blog-item { /* create a new formatting context so the next item never wraps beside the previous item's floated image */ display: flow-root; /* modern, clean clearfix */ } /************************************************* * STANDARDIZED SEARCH UI — FINAL * - Dark selects with visible caret * - Buttons: Four Treasures scheme (pink primary, black secondary) *************************************************/ /* --- Text inputs (consistent, white) --- */ input[type="text"], input[type="search"], input[type="email"], input[type="number"], textarea { background: #fff !important; border: 1px solid #ccc !important; border-radius: 4px !important; padding: 8px 12px !important; font-size: 1rem !important; line-height: 1.4 !important; box-sizing: border-box; margin-top: 8px; } /* --- Selects (Hyperion look, with custom caret) --- */ select { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; padding: 10px 38px 9px 12px !important; /* room for caret */ border: 0 !important; color: #fff !important; /* one-shot background so later rules can't wipe the caret */ background: linear-gradient(45deg, transparent 50%, #9b9b9b 50%) no-repeat calc(100% - 18px) 50% / 6px 6px, linear-gradient(135deg, #9b9b9b 50%, transparent 50%) no-repeat calc(100% - 12px) 50% / 6px 6px, linear-gradient(#9b9b9b, #9b9b9b) no-repeat calc(100% - 30px) 50% / 0px 16px, #666 !important; /* Hyperion dark face */ margin-top: 0.45rem; height: 40px; } /* IE legacy arrow */ select::-ms-expand { display: none; } select:focus { outline: none !important; box-shadow: 0 0 0 2px rgba(216,148,204,.35); } /* All buttons default to primary (Search) */ button, input[type="submit"], input[type="button"] { background: var(--btn-primary) !important; color: #fff !important; border: 0 !important; border-radius: 4px !important; padding: 10px 20px !important; font-size: 1rem !important; font-weight: 600 !important; line-height: 1.1 !important; cursor: pointer !important; transition: background .15s ease-in-out; margin-top: 0.34rem; } button:hover, input[type="submit"]:hover, input[type="button"]:hover { background: var(--btn-primary-hover) !important; } /* Optional: keep “linky buttons” in search panels looking like buttons */ .search button, .search .btn, .lotusgemologypublications .advanced-search .btn { text-decoration: none !important; } /* Text inputs (and search) */ /*.lg-input, .lg-search input[type="text"], .lg-search input[type="search"]{ background: var(--lg-input-bg); border: 1px solid var(--lg-input-bd); border-radius: var(--lg-r); height: var(--lg-h); line-height: calc(var(--lg-h) - 2px); padding: 0 var(--lg-pad-x); font-size: 16px; box-sizing: border-box; } */ /* Textareas keep auto height but share visuals */ .lg-search textarea{ background: var(--lg-input-bg); border: 1px solid var(--lg-input-bd); border-radius: var(--lg-r); padding: 8px var(--lg-pad-x); font-size: 16px; box-sizing: border-box; min-height: 80px; } .lg-search input:focus, .lg-search textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--lg-focus); } /* Selects with visible caret (Hyperion-style) */ .lg-select, .lg-search select{ background-color: #666; /* Hyperion gray */ color: #fff; border: none; border-radius: var(--lg-r); height: var(--lg-h); line-height: calc(var(--lg-h) - 2px); padding: 0 calc(var(--lg-pad-x) + 28px) 0 var(--lg-pad-x); font-size: 16px; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%), linear-gradient(#aaa, #aaa); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%, calc(100% - 34px) 50%; background-size: 6px 6px, 6px 6px, 1px 1.4rem; background-repeat: no-repeat; } .lg-search select::-ms-expand{ display:none; } /* old Edge/IE caret */ .lg-search select:focus{ outline:none; box-shadow: 0 0 0 2px var(--lg-focus); } .lg-search select option{ color:#000; } /* options are on native popup */ /* Buttons: match Four Treasures */ .lg-btn{ display:inline-block; border:0; border-radius: var(--lg-r); height: var(--lg-h); line-height: calc(var(--lg-h) - 2px); padding: 0 18px; font-size: 18px; font-weight: 600; font-family: 'Oswald', sans-serif; cursor:pointer; color:#fff; text-decoration:none; transition: background .15s ease-in-out, opacity .15s ease-in-out; box-sizing: border-box; } /* Bridge existing FT selectors so they pick up the same look */ .lotusgemologypublications .filters input[type="text"], #advanced-search input[type="text"], input#filter_search{ background: var(--lg-input-bg); border: 1px solid var(--lg-input-bd); border-radius: var(--lg-r); height: var(--lg-h); padding: 0 var(--lg-pad-x); } /* FT "Search" button already dark; reuse as secondary */ button.sbtn{ background: var(--lg-ink); border-radius: var(--lg-r); } /* Make generic component buttons look like our kit inside .lg-search */ .lg-search .btn, .lg-search button, .lg-search input[type="submit"], .lg-search input[type="button"]{ /* base .lg-btn */ display:inline-block; border:0; border-radius: var(--lg-r); height: var(--lg-h); line-height: calc(var(--lg-h) - 2px); padding: 0 18px; font-size: 18px; font-weight: 600; font-family: 'Oswald', sans-serif; cursor:pointer; color:#fff; text-decoration:none; transition: background .15s ease-in-out, opacity .15s ease-in-out; box-sizing: border-box; background: var(--lg-pink); /* default to primary */ } .lg-search .btn:hover, .lg-search button:hover, .lg-search input[type="submit"]:hover, .lg-search input[type="button"]:hover{ background: var(--lg-pink-hover); } /* Minimal mobile nicety */ @media (max-width: 640px){ .lg-search, .lg-row { gap: 8px; } .lg-btn, .lg-search .btn, .lg-search button, .lg-search input[type="submit"], .lg-search input[type="button"]{ font-size: 16px; } } /* --- Buttons: match Four Treasures --- */ .lg-btn, button.sbtn { display:inline-block; border:0; border-radius: 0; height: var(--lg-h); line-height: calc(var(--lg-h) - 2px); padding: 0 18px; font-size: 18px; font-weight: 600; font-family: 'Oswald', sans-serif; cursor:pointer; color:#fff; text-decoration:none; transition: background .15s ease-in-out, opacity .15s ease-in-out; } /* Search = dark gray (FT style) */ .lg-btn--primary, button.sbtn.btn-primary { background: #3b3b3e !important; } .lg-btn--primary:hover, button.sbtn.btn-primary:hover { background: #2f2f31 !important; } /* Clear = Lotus pink */ .lg-btn--secondary, button.sbtn.btn-secondary { background: #D894CC !important; } .lg-btn--secondary:hover, button.sbtn.btn-secondary:hover { background: #b57aa9 !important; } /* --- Selects: keep consistent arrow --- */ /*.lg-select, .lg-search select, .lotusgemologypublications select { background-color: #fff; color: #333; border: 1px solid var(--lg-input-bd); border-radius: var(--lg-r); height: var(--lg-h); padding: 0 calc(var(--lg-pad-x) + 28px) 0 var(--lg-pad-x); font-size: 16px; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; /* custom arrow */ background-image: linear-gradient(45deg, transparent 50%, #555 50%), linear-gradient(135deg, #555 50%, transparent 50%), linear-gradient(#ccc, #ccc); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%, calc(100% - 34px) 50%; background-size: 6px 6px, 6px 6px, 1px 1.4rem; background-repeat: no-repeat; }*/ .lg-search select:focus, .lotusgemologypublications select:focus { outline:none; box-shadow: 0 0 0 2px var(--lg-focus); } /* ===== Four Treasures exact look ===== */ /* 1) Buttons (match FT) */ /*button.sbtn, .lg-btn { /* FT sizing */ height: 48px !important; line-height: 48px !important; /* FT typography */ font-family: 'Oswald', sans-serif !important; font-weight: 600 !important; font-size: 18px !important; letter-spacing: .2px; /* FT corners */ border-radius: 4px !important; border: 0 !important; box-shadow: none !important; }*/ /* Search = dark gray */ button.sbtn.btn-primary, .lg-btn--primary { background: #3b3b3e !important; } button.sbtn.btn-primary:hover, .lg-btn--primary:hover { background: #2f2f31 !important; } /* Clear = lotus pink */ button.sbtn.btn-secondary, .lg-btn--secondary { background: #D894CC !important; } button.sbtn.btn-secondary:hover, .lg-btn--secondary:hover { background: #b57aa9 !important; } /* 2) Text inputs (keep FT height) */ .lotusgemologypublications .filters input[type="text"], #advanced-search input[type="text"], input#filter_search { height: 37px !important; line-height: 40px !important; border: 1px solid #ccc !important; border-radius: 4px; background: #fff !important; box-shadow: none !important; } /* 3) Selects — Hyperion-style gray bar with white caret */ /*.lotusgemologypublications select, .lg-search select, .form-select.lg-select { height: 40px !important; line-height: 40px !important; border: 0 !important; border-radius: 0 !important; /* Hyperion gray bar */ background-color: #3b3b3e !important; color: #fff !important; /* remove native chrome/bs look */ -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; /* padding + arrow space */ padding: 0 36px 0 12px !important; /* custom white caret */ background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%), linear-gradient(#8a8a8a, #8a8a8a); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%, calc(100% - 30px) 50%; background-size: 6px 6px, 6px 6px, 1px 18px; background-repeat: no-repeat; }*/ /* hide IE expand */ .lotusgemologypublications select::-ms-expand { display: none; } /* focus ring (subtle pink glow) */ .lotusgemologypublications select:focus, .lotusgemologypublications .filters input[type="text"]:focus { outline: none !important; box-shadow: 0 0 0 2px rgba(216,148,204,.35) !important; } /* 4) Keep spacing/alignment tight around the button group */ .lotusgemologypublications .filters .col-auto { display: flex; gap: 10px; align-items: center; } /* === FT/Hyperion controls on the RESULTS page === */ /* Make the results-page toolbars adopt the shared kit */ .lotusgemologypublications .lg-search select, .lotusgemologypublications .filters select, .lotusgemologypublications .sorter select { background-color: #666; color: #fff; border: none; border-radius: 4px; height: 40px; line-height: 38px; padding: 0 40px 0 12px; /* room for chevron */ font-size: 16px; -webkit-appearance: none; -moz-appearance: none; appearance: none; /* chevron (Hyperion-style) */ background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%), linear-gradient(#aaa, #aaa); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%, calc(100% - 34px) 50%; background-size: 6px 6px, 6px 6px, 1px 1.4rem; background-repeat: no-repeat; } .lotusgemologypublications .filters select::-ms-expand, .lotusgemologypublications .sorter select::-ms-expand { display:none; } /* Text inputs match FT */ .lotusgemologypublications .filters input[type="text"], .lotusgemologypublications .filters input[type="search"], .lotusgemologypublications .sorter input[type="text"] { background: #fff; border: 1px solid #ccc; border-radius: 4px; height: 40px; line-height: 38px; padding: 0 12px; font-size: 16px; } /* 1) Sorter toolbar selects: same look as FT + real caret */ .lotusgemologypublications .sorter select.form-select { background: var(--lg-input-bg) !important; border: 1px solid var(--lg-input-bd) !important; border-radius: var(--lg-r) !important; height: var(--lg-h) !important; line-height: calc(var(--lg-h) - 2px) !important; padding: 0 calc(var(--lg-pad-x) + 28px) 0 var(--lg-pad-x) !important; font-size: 16px !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; /* caret */ background-image: linear-gradient(45deg, transparent 50%, #666 50%), linear-gradient(135deg, #666 50%, transparent 50%), linear-gradient(#ccc, #ccc); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%, calc(100% - 34px) 50%; background-size: 6px 6px, 6px 6px, 1px 1.4rem; background-repeat: no-repeat; } .lotusgemologypublications .sorter select.form-select:focus { outline: none !important; box-shadow: 0 0 0 2px var(--lg-focus) !important; } /* 1a) Kill the extra tiny caret button Helix/Bootstrap sometimes appends */ .lotusgemologypublications .sorter .btn-group > .btn.dropdown-toggle, .lotusgemologypublications .sorter .input-append .add-on, .lotusgemologypublications .sorter .input-prepend .add-on { display: none !important; } /* 2) Search buttons in results bar (if any custom ones appear) */ .lotusgemologypublications .sorter .btn-primary, .lotusgemologypublications .sorter .btn.sbtn { display: inline-block; border: 0; border-radius: var(--lg-r); height: var(--lg-h); line-height: calc(var(--lg-h) - 2px); padding: 0 18px; font-size: 18px; font-weight: 600; font-family: 'Oswald', sans-serif; cursor: pointer; color: #fff; background: var(--lg-ink); } .lotusgemologypublications .sorter .btn-primary:hover, .lotusgemologypublications .sorter .btn.sbtn:hover { background: var(--lg-ink-hover); } /* 3) Pagination — match FT dark/pink buttons */ .lotusgemologypublications .pagination { display: flex; justify-content: center; gap: 8px; margin: 10px 0; padding: 0; } /* 4) Keep the advanced filter select (“All Reference Types”) identical too */ /*.lotusgemologypublications #advanced-search select { background: var(--lg-input-bg); border: 1px solid var(--lg-input-bd); border-radius: var(--lg-r); height: var(--lg-h); line-height: calc(var(--lg-h) - 2px); padding: 0 calc(var(--lg-pad-x) + 28px) 0 var(--lg-pad-x); font-size: 16px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%), linear-gradient(#aaa, #aaa) background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%, calc(100% - 34px) 50%; background-size: 6px 6px, 6px 6px, 0px 1.2rem; background-repeat: no-repeat; margin-top: 0.5rem }*/ .lotusgemologypublications #advanced-search select:focus { outline: none; box-shadow: 0 0 0 2px var(--lg-focus); } /* Base button tile */ .lotusgemologypublications .pagination .page-link, .lotusgemologypublications .pagination a.pagenav, .lotusgemologypublications .pagination span.pagenav { display: inline-block; min-width: 34px; height: 34px; line-height: 34px; padding: 0 10px; text-align: center; font: 600 14px/34px Oswald, sans-serif; color: #fff; background: #3b3b3e; /* ink */ border: 0; border-radius: 4px; text-decoration: none; } /* Tile sizing (numbers + chevrons) — matches FT buttons */ .lotusgemologypublications .pagination .page-link, .lotusgemologypublications .pagination a.pagenav, .lotusgemologypublications .pagination span.pagenav { min-width: 34px; height: 34px; line-height: 34px; /* vertical centering */ padding: 0 10px; font: 600 14px/34px Oswald, sans-serif; border: 0; border-radius: 4px; text-decoration: none; color: #fff; background: #3b3b3e; } /* Bars / Containers */ .lg-search, .lotusgemologypublications .filters, .lotusgemologygallery .filters{ display:flex !important; align-items:center !important; gap: var(--lg-gap) !important; flex-wrap: nowrap !important; /* keep one row */ overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .25rem; } /* Children should not force wrapping */ .lg-search > *, .lotusgemologypublications .filters > *, .lotusgemologygallery .filters > *{ flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important; } /* Inputs */ .lg-search input[type="text"], .lg-search input[type="search"], .lotusgemologypublications .filters input[type="text"], .lotusgemologygallery .filters input[type="text"], #filter_search{ background: var(--lg-input-bg) !important; border: 1px solid var(--lg-input-bd) !important; border-radius: var(--lg-r) !important; height: var(--lg-h) !important; line-height: calc(var(--lg-h) - 2px) !important; padding: 0 var(--lg-pad-x) !important; font-size: 1rem !important; box-sizing: border-box !important; } #filter_search:focus, .lg-search input:focus, .lotusgemologypublications .filters input[type="text"]:focus, .lotusgemologygallery .filters input[type="text"]:focus{ outline:none !important; box-shadow:0 0 0 2px var(--lg-focus) !important; } .lg-search select::-ms-expand{ display:none !important; } .lg-search select:focus, .lotusgemologypublications .filters select:focus, .lotusgemologygallery .filters select:focus{ outline:none !important; box-shadow:0 0 0 2px var(--lg-focus) !important; } /* Buttons */ .lg-btn, .lg-search .btn, .lotusgemologypublications .filters .btn, .lotusgemologygallery .filters .btn, .lotusgemologygallery .filters button{ display:inline-flex; align-items:center; justify-content:center; height: var(--lg-h); min-height: var(--lg-h); padding: 0 1rem; color:#fff; border:0; border-radius: var(--lg-r); cursor:pointer; text-decoration:none; background: var(--lg-ink); transition: background .15s ease-in-out; } .lg-search .btn:hover, .lotusgemologypublications .filters .btn:hover, .lotusgemologygallery .filters .btn:hover{ background: var(--lg-ink-hover); } /* Mobile wrap for controls; tighter cards */ @media (max-width: 640px){ .lg-search, .lotusgemologypublications .filters, .lotusgemologygallery .filters{ flex-wrap: wrap !important; } .lotusgemologygallery .images{ grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)) !important; } } /************************************************* * HYPERION — LOTUS GEMOLOGY GALLERY (GRID + PAGINATION — FINAL) * Scope: .lotusgemologygallery.lotusgemologygallery-gallery .hgallery * Replace your entire current Hyperion block with THIS block. * Notes: * - Hard-resets any legacy floats/clearfix that can block the first row. * - Uses a padding-top ratio frame for perfectly uniform tiles. * - Keeps your already-working filter bar, but FIXES arrows (site-wide) ========== */ select, /*.form-select { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; padding-right: 38px !important; /* room for caret */ background-image: linear-gradient(45deg, transparent 50%, var(--lotus-claret) 50%), linear-gradient(135deg, var(--lotus-claret) 50%, transparent 50%), linear-gradient(var(--lotus-claret), var(--lotus-claret)); /* thin divider */ background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%, calc(100% - 30px) 50%; background-size: 6px 6px, 6px 6px, 1px 1.2rem; background-repeat: no-repeat; }*/ select::-ms-expand { display: none !important; } /* Hyperion selects sit on a dark bar — keep contrast */ .lotusgemologygallery.lotusgemologygallery-gallery .filters .form-select { background-color: #666 !important; color: #fff !important; border: 0 !important; border-radius: 4px !important; } /* ========== 4) Hyperion buttons — exact scope to beat component CSS ========== */ .lotusgemologygallery.lotusgemologygallery-gallery .hgallery .filters .button > .btn.btn-primary, .lotusgemologygallery.lotusgemologygallery-gallery .hgallery .filters .btn.btn-primary, .lotusgemologygallery.lotusgemologygallery-gallery .hgallery .filters button[type="submit"], .lotusgemologygallery.lotusgemologygallery-gallery .hgallery .filters button[type="button"], .lotusgemologygallery.lotusgemologygallery-gallery .hgallery .filters input[type="submit"]{ background-image: none !important; filter: none !important; text-shadow: none !important; background-color: var(--btn-bg) !important; color: var(--lotus-pink) !important; border: 0 !important; border-radius: 4px !important; padding: 2px 14px !important; width: auto !important; /* cancel any 100% width */ margin-top: 0.25rem !important; line-height: 1.2 !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: none !important; cursor: pointer !important; } .lotusgemologygallery.lotusgemologygallery-gallery .hgallery .filters .button > .btn.btn-primary:hover, .lotusgemologygallery.lotusgemologygallery-gallery .hgallery .filters button[type="submit"]:hover, .lotusgemologygallery.lotusgemologygallery-gallery .hgallery .filters button[type="button"]:hover, .lotusgemologygallery.lotusgemologygallery-gallery .hgallery .filters input[type="submit"]:hover{ background-color: var(--btn-bg-h) !important; color: var(--lotus-pink) !important; } /************************************************* * FINAL SELECT OVERRIDES — HYPERION + FOUR TREASURES * Paste at the VERY BOTTOM of /templates/lotus/css/custom.css * Beats `.lotusgemologygallery .filters select` and similar earlier rules. *************************************************/ /* ---------- HYPERION (Gallery) ---------- */ body.site_com_lotusgemologygallery.view-gallery .lotusgemologygallery.lotusgemologygallery-gallery .hgallery .filters select, body.site_com_lotusgemologygallery.view-gallery .lotusgemologygallery.lotusgemologygallery-gallery .hgallery .filters select.form-select{ -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; /* Hyperion dark bar + claret caret */ background-color: #666 !important; color: #fff !important; border: 0 !important; border-radius: 4px !important; height: 36px !important; line-height: 36px !important; padding: 0 40px 0 12px !important; background-image: linear-gradient(45deg, transparent 50%, #6C1E33 50%), linear-gradient(135deg, #6C1E33 50%, transparent 50%), linear-gradient(#6C1E33, #6C1E33); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%, calc(100% - 30px) 50%; background-size: 6px 6px, 6px 6px, 1px 1.2rem; background-repeat: no-repeat !important; box-shadow: none !important; text-shadow: none !important; cursor: pointer !important; } body.site_com_lotusgemologygallery.view-gallery .lotusgemologygallery .filters select::-ms-expand{ display:none !important; } /* ---------- FOUR TREASURES (Publications) ---------- */ body.site_com_lotusgemologypublications .lotusgemologypublications .filters select, body.site_com_lotusgemologypublications .lotusgemologypublications .filters select.form-select{ -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; background-color: #666 !important; color: #fff !important; border: 0 !important; border-radius: 4px !important; height: 36px !important; line-height: 36px !important; padding: 0 40px 0 12px !important; background-image: linear-gradient(45deg, transparent 50%, #6C1E33 50%), linear-gradient(135deg, #6C1E33 50%, transparent 50%), linear-gradient(#6C1E33, #6C1E33); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%, calc(100% - 30px) 50%; background-size: 6px 6px, 6px 6px, 1px 1.2rem; background-repeat: no-repeat !important; box-shadow: none !important; text-shadow: none !important; cursor: pointer !important; } body.site_com_lotusgemologypublications .lotusgemologypublications .filters select::-ms-expand{ display:none !important; } /************************************************* * APPEND-ONLY — FINAL OVERRIDES * Put this block at the VERY BOTTOM of /templates/lotus/css/custom.css * - Unifies “Search/Go” buttons (dark bg + Lotus Pink text) * - Forces claret ▼ carets on Hyperion + Four Treasures selects *************************************************/ /* ============ Buttons (site-wide) ============ */ button.btn.btn-primary, input[type="submit"].btn.btn-primary, .btn.btn-primary { background-color: #333 !important; /* unified dark background */ color: #D894CC !important; /* Lotus Pink text */ border: 0 !important; border-radius: 4px !important; padding: 0.375 0.875rem !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-shadow: none !important; box-shadow: none !important; } button.btn.btn-primary:hover, input[type="submit"].btn.btn-primary:hover, .btn.btn-primary:hover { background-color: #444 !important; color: #D894CC !important; } .btn.btn-primary > * { color: inherit !important; } /* ============ Hyperion (Gallery) selects ============ */ body.site_com_lotusgemologygallery.view-gallery .lotusgemologygallery .filters select, body.site_com_lotusgemologygallery.view-gallery .lotusgemologygallery .filters select.form-select{ -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; /* one-shot background so gradients are not wiped by earlier rules */ background-image: linear-gradient(45deg, transparent 50%, #6C1E33 50%), linear-gradient(135deg, #6C1E33 50%, transparent 50%), linear-gradient(#6C1E33, #6C1E33); background-color: #666; background-repeat: no-repeat !important; background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%, calc(100% - 30px) 50% !important; background-size: 6px 6px, 6px 6px, 1px 1.2rem !important; color: #fff !important; border: 0 !important; border-radius: 4px !important; height: 36px !important; line-height: 36px !important; padding: 0 40px 0 12px !important; /* room for caret */ box-shadow: none !important; text-shadow: none !important; cursor: pointer !important; } body.site_com_lotusgemologygallery.view-gallery .lotusgemologygallery .filters select::-ms-expand{ display:none !important; } body.site_com_lotusgemologygallery.view-gallery .lotusgemologygallery .filters select:hover{ background-color:#707070 !important; } /* ============ Four Treasures (Publications) selects ============ */ body.site_com_lotusgemologypublications .lotusgemologypublications .filters select, body.site_com_lotusgemologypublications .lotusgemologypublications .filters select.form-select{ -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; /* one-shot background so gradients are not wiped by earlier rules */ background: linear-gradient(45deg, transparent 50%, #6C1E33 50%), linear-gradient(135deg, #6C1E33 50%, transparent 50%), linear-gradient(#6C1E33, #6C1E33) no-repeat #666 !important; background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%, calc(100% - 30px) 50% !important; background-size: 6px 6px, 6px 6px, 1px 1.2rem !important; color: #fff !important; border: 0 !important; border-radius: 4px !important; height: 36px !important; line-height: 36px !important; padding: 0 40px 0 12px !important; box-shadow: none !important; text-shadow: none !important; cursor: pointer !important; } body.site_com_lotusgemologypublications .lotusgemologypublications .filters select::-ms-expand{ display:none !important; } body.site_com_lotusgemologypublications .lotusgemologypublications .filters select:hover{ background-color:#707070 !important; } /************************************************* * HYPERION SELECTS — ID-SCOPED FINAL OVERRIDE * Append to the VERY BOTTOM of custom.css * Targets the exact elements so it wins every time. *************************************************/ body.site_com_lotusgemologygallery.view-gallery select#filter_gemtype, body.site_com_lotusgemologygallery.view-gallery select#filter_origin, body.site_com_lotusgemologygallery.view-gallery select#filter_enhancement{ -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; /* unified Hyperion dropdown + claret ▼ caret */ background-image: linear-gradient(45deg, transparent 50%, #6C1E33 50%), linear-gradient(135deg, #6C1E33 50%, transparent 50%), linear-gradient(#6C1E33, #6C1E33); background-repeat: no-repeat !important; background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%, calc(100% - 30px) 50% !important; background-size: 6px 6px, 6px 6px, 1px 1.2rem !important; background-color: #666; color:#fff !important; border:0 !important; border-radius:4px !important; height:36px !important; line-height:36px !important; padding:0 40px 0 12px !important; /* room for caret */ box-shadow:none !important; text-shadow:none !important; cursor:pointer !important; } body.site_com_lotusgemologygallery.view-gallery select#filter_gemtype::-ms-expand, body.site_com_lotusgemologygallery.view-gallery select#filter_origin::-ms-expand, body.site_com_lotusgemologygallery.view-gallery select#filter_enhancement::-ms-expand{ display:none !important; } /* 1) Hyperion selects — spacing and neutral UA arrows */ body.site_com_lotusgemologygallery.view-gallery .lotusgemologygallery .hgallery .filters .hfilter > select, body.site_com_lotusgemologygallery.view-gallery .lotusgemologygallery .hgallery .filters .hfilter > select.form-select{ -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; padding-right: 40px !important; /* room for pseudo-caret */ color: #fff !important; background-color: #666 !important; /* keep Hyperion dark bar */ border: 0 !important; border-radius: 4px !important; height: 36px !important; line-height: 36px !important; } body.site_com_lotusgemologygallery.view-gallery .lotusgemologygallery .hgallery .filters .hfilter > select::-ms-expand{ display:none !important; } /* 2) Four Treasures selects — same spacing */ body.site_com_lotusgemologypublications .lotusgemologypublications .filters .hfilter > select, body.site_com_lotusgemologypublications .lotusgemologypublications .filters .hfilter > select.form-select{ -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; padding-right: 40px !important; color: #fff !important; background-color: #666 !important; border: 0 !important; border-radius: 4px !important; height: 36px !important; line-height: 36px !important; } body.site_com_lotusgemologypublications .lotusgemologypublications .filters .hfilter > select::-ms-expand{ display:none !important; } /* 3) Pseudo-caret: show ▼ only on cells that HAVE a direct child * and (2) change caret color to the menu’s small gray triangle. * Append at the VERY BOTTOM of custom.css *************************************************/ /* 1) Remove any background-image arrows the earlier rules applied */ body.site_com_lotusgemologygallery.view-gallery .lotusgemologygallery .hgallery .filters .hfilter > select, body.site_com_lotusgemologypublications .lotusgemologypublications .filters .hfilter > select{ background-image: none !important; /* remove claret gradients */ background-color: #666 !important; /* keep Hyperion/FT dark bar */ color: #fff !important; } /* 2) Make the pseudo-caret the same small gray as the main menus */ /* .lotusgemologygallery .hgallery .filters .hfilter:has(> select)::after, .lotusgemologypublications .filters .hfilter:has(> select)::after{ border-top-color: #9b9b9b !important; border-left-width: 5px !important; border-right-width: 5px !important; border-top-width: 6px !important; right: 12px !important; opacity: 1 !important; } */ /* === TOP NAV — force-hide any caret/selector icon in header menu (safe, scoped) === */ #sp-header .sp-megamenu-parent > li > a, .container-header .menu li > a{ padding-right: 0 !important; background-image: none !important; } /* === BUTTON HOVER — ensure background never becomes transparent === */ button, input[type="submit"], input[type="button"], .btn, a.btn { background-color: #333 !important; color: #D894CC !important; border: 0 !important; border-radius: 4px !important; } button:hover, input[type="submit"]:hover, input[type="button"]:hover, .btn:hover, a.btn:hover, button:focus, input[type="submit"]:focus, input[type="button"]:focus, .btn:focus, a.btn:focus { background-color: #444 !important; color: #D894CC !important; text-decoration: none !important; outline: none !important; } /* Keep button clusters tidy when they sit in a .col-auto wrapper */ .filters .col-auto { display: flex; align-items: center; gap: 10px; } /* Normalize and force transform-based scaling */ body.site .com-content-article sup, body.site .com-content-article sub, body.site .item-page sup, body.site .item-page sub, body.site .content sup, body.site .content sub, body.site sup, body.site sub{ display: inline-block !important; font-size: 1em !important; /* neutralize any font-size fights */ line-height: 1 !important; vertical-align: baseline !important; position: relative !important; /* disable OpenType superior/inferior substitutions */ font-variant-position: normal !important; font-feature-settings: "sups" 0, "subs" 0 !important; /* prepare for scaling */ transform-origin: left bottom !important; transform: none !important; } /* Apply visual scale + vertical offset */ body.site .com-content-article sup, body.site .item-page sup, body.site .content sup, body.site sup{ transform: translateY(var(--sup-shift)) scale(var(--script-scale)) !important; } body.site .com-content-article sub, body.site .item-page sub, body.site .content sub, body.site sub{ transform: translateY(var(--sub-shift)) scale(var(--script-scale)) !important; } /* Optional: denser inside formulas only .formula sup, .formula sub{ --script-scale: 0.55; --sup-shift: -0.38em; --sub-shift: 0.18em; } /* Keep element symbols + superscripts together */ .chem { white-space: nowrap; } /* TEXT SEARCH BUTTONS */ .btn-secondary { margin-left: 0.5rem !important; margin-right: 0.5rem !important; } .awesomplete { margin-right: 0.5rem !important; } /************************************************************** * CANONICAL BUTTONS (site-wide) **************************************************************/ .btn{ font-family: 'Oswald', sans-serif; font-weight: 400; /*text-transform: uppercase;*/ border: none; border-radius: 0; line-height: 1.2; box-shadow: none; padding: 0.6rem 1.2rem; } .btn.btn-primary{ background-color: #5a5a5c; color: #fff; } .btn.btn-primary:hover, .btn.btn-primary:focus{ background-color: #D894CC; color: #fff; } .btn.btn-secondary{ background: transparent; color: #5a5a5c; border: 1px solid #5a5a5c; } .btn.btn-secondary:hover, .btn.btn-secondary:focus{ background: #5a5a5c; color: #fff; } /************************************************************** * UNIFIED SEARCH BAR (used by Hyperion + Sherlock) **************************************************************/ .searchbar.panel{ background: rgba(215, 149, 204, 0.24); border-radius: 8px; /*padding: 16px;*/ } .searchbar .filters{ display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; } .searchbar .form-control, .searchbar .form-select{ height: 30px; padding: 6px 12px; min-width: 220px; line-height: 1.2; box-sizing: border-box; } .searchbar .form-select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* Buttons inside search bars match size/look of the top group */ .searchbar .btn{ height: 30px; padding: 0 14px; line-height: 30px; } /* FontAwesome “tail” only for search-bar primary buttons */ .searchbar .btn.btn-primary::after{ content:"\f18e"; font-family: FontAwesome; padding-left:.7rem; } .lotusSearch .hfilter .btn + .btn{ margin-left: 0; } /* logo cleanup in this view */ .lotusgemologygallery.lotusgemologygallery-form img[src*="lotus-logo-simple-small.png"]{ background:none !important; } /* === Sherlock module only (safe, scoped to .lotusSearch) === */ /* Match Hyperion button look */ .lotusSearch .btn{ font-family: 'Oswald', sans-serif; font-weight: 400; text-transform: uppercase; border: none; border-radius: 0; padding: 0.6rem 1.2rem; line-height: 1.2; box-shadow: none; } .lotusSearch .btn.btn-primary{ background-color: #5a5a5c; color: #fff; } .lotusSearch .btn.btn-primary:hover, .lotusSearch .btn.btn-primary:focus{ background-color: #D894CC; color: #fff; } /* Same FontAwesome “tail” as the top button */ .lotusSearch .btn.btn-primary::after{ content: "\f18e"; font-family: FontAwesome; padding-left: .7rem; } .lotusSearch .btn.btn-secondary:hover, .lotusSearch .btn.btn-secondary:focus{ background: #5a5a5c; color: #fff; } /* Keep the two buttons on one line and centered */ .lotusSearch .hfilter > .hfilter{ display: flex; justify-content: center; gap: .6rem; } /* Optional: make Sherlock field heights match the top bar */ .lotusSearch .form-control, .lotusSearch .form-select{ height: 30px; min-width: 220px; padding: 6px 12px; line-height: 1.2; box-sizing: border-box; } /* ========================= 1) HYPERION (top search bar) ========================= */ /* Row layout (just inside Hyperion bar) */ .searchbar .filters{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; } /* Control sizing (match current top bar) */ .searchbar .form-control, .searchbar .form-select{ height:30px; padding:6px 12px; min-width:220px; line-height:1.2; box-sizing:border-box; } /* Keep native look but ensure space for caret; we DO NOT style selects sitewide */ .searchbar .form-select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; } /* Buttons inside Hyperion bar — match top group */ .searchbar .btn{ height:30px; padding:0 14px; line-height:30px; font-family:'Oswald', sans-serif; font-weight:400; text-transform:uppercase; border:none; border-radius:0; box-shadow:none; } /* Primary: dark gray with white text */ .searchbar .btn.btn-primary{ background:#5a5a5c; color:#fff; } .searchbar .btn.btn-primary:hover, .searchbar .btn.btn-primary:focus{ background:#D894CC; color:#fff; } /* Optional FontAwesome “tail” on the primary button (as in your top bar) */ .searchbar .btn.btn-primary::after{ content:"\f18e"; font-family:FontAwesome; padding-left:.7rem; } /* Secondary: outlined dark gray (if present in the top bar in future) */ .searchbar .btn.btn-secondary{ background:transparent; color:#5a5a5c; border:1px solid #5a5a5c; } .searchbar .btn.btn-secondary:hover, .searchbar .btn.btn-secondary:focus{ background:#5a5a5c; color:#fff; } /* Row layout — just for Sherlock */ .lotusSearch .filters{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; } /* Control sizing identical to Hyperion */ .lotusSearch .form-control, .lotusSearch .form-select{ height:30px; padding:6px 12px; min-width:220px; line-height:1.2; box-sizing:border-box; } /* Dark selects to match current Sherlock look (SCOPED ONLY HERE) */ .lotusSearch .form-select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; background-color: var(--lotus-sel); color:#fff; border:0; border-radius:4px; padding-right:38px; /* room for caret */ /* white chevron caret + divider; stays inside Sherlock only */ background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%), linear-gradient(#aaa, #aaa); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%, calc(100% - 34px) 50%; background-size:6px 6px, 6px 6px, 1px 1.4rem; background-repeat:no-repeat; } .lotusSearch .form-select:hover{ background-color: var(--lotus-sel-h); } .lotusSearch .form-select::-ms-expand{ display:none; } /* Buttons — same scheme as Hyperion */ .lotusSearch .btn{ height:30px; padding:0 14px; line-height:30px; font-family:'Oswald', sans-serif; font-weight:400; text-transform:uppercase; border:none; border-radius:0; box-shadow:none; } /* Primary (Search Sherlock) */ .lotusSearch .btn.btn-primary{ background: var(--lotus-ink); color:#fff; } .lotusSearch .btn.btn-primary:hover, .lotusSearch .btn.btn-primary:focus{ background:#D894CC; color:#fff; } .lotusSearch .btn.btn-secondary:hover, .lotusSearch .btn.btn-secondary:focus{ background:#5a5a5c; color:#fff; } /* Keep the two Sherlock buttons centered as you had */ .lotusSearch .hfilter > .hfilter{ display:flex; justify-content:center; gap:.6rem; } .lotusSearch .hfilter .btn + .btn{ margin-left:0; } /* ===== Sherlock module only ===== */ .lotusSearch .filters{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem} .lotusSearch .filters>.hfilter{flex:0 0 auto;margin:0} /* Match control sizing to the top bar */ .lotusSearch input.form-control, .lotusSearch select.form-select{ height:30px !important; min-width:220px !important; padding:6px 12px !important; line-height:1.2 !important; box-sizing:border-box !important; } /* Selects: dark bar + **GRAY** chevron (not pink) */ .lotusSearch select.form-select{ -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important; border:1px solid #5a5a5c !important; color:#fff !important; background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%, calc(100% - 30px) 50%; background-size: 6px 6px, 6px 6px, 1px 18px; padding-right: 38px !important; } .lotusSearch select.form-select:hover{ background-color:#6b6b6d !important; } .lotusSearch select.form-select::-ms-expand{ display:none !important; } /* Buttons: stop ALL CAPS inside Sherlock only */ .lotusSearch .btn{ text-transform:none !important; font-family:'Oswald',sans-serif !important; height:30px !important; } /* Primary (Search) — keep dark; on hover only the TEXT turns pink */ .lotusSearch .btn.btn-primary{ background-color:#5a5a5c !important; color:#fff !important; border:none !important; } .lotusSearch .btn.btn-primary:hover, .lotusSearch .btn.btn-primary:focus{ background-color:#5a5a5c !important; /* stay dark */ color:#D894CC !important; /* text turns pink */ } /* FontAwesome tail inherits currentColor so it turns pink on hover too */ .lotusSearch .btn.btn-primary::after{ content:"\f18e"; font-family:FontAwesome; padding-left:.7rem; color:currentColor; } /* Secondary (Clear) — outline; fill dark on hover (like Hyperion) */ .lotusSearch .btn.btn-secondary{ background:transparent !important; color:#5a5a5c !important; border:1px solid #5a5a5c !important; } /* ========================= 5) TABLES & DATA DISPLAYS ========================= */ /************************************************* * TABLES (sitewide) *************************************************/ table { max-width: 100%; } /* ===== Lotus Table ===== */ .lotus-table-wrapper { margin: 2rem auto; display: block; max-width: calc(100% - 3rem); text-align: center; overflow-x: hidden; overflow-y: visible; -webkit-overflow-scrolling: touch; } .lotus-table-caption { display: block; margin-bottom: .5rem; font: 400 1.2rem/1 Oswald, sans-serif; } .lotus-table caption { display: none !important; } .lotus-table { margin: 0 auto; width: 100%; max-width: 100%; table-layout: auto; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; font-family: Arial, sans-serif; font-size: .9rem; white-space: normal; } .lotus-table thead th { background: #3b3b3b; color: var(--lotus-pink); font-family: Oswald, sans-serif; padding: 10px; text-align: left; } .lotus-table th, .lotus-table td { vertical-align: top; padding: 10px; text-align: left; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } .lotus-table td { border-top: 1px solid #ddd; } .lotus-table tbody tr:nth-child(even) { background: #f9f9f9; } .lotus-table tbody tr:hover { background: #f1f1f1; } .lotus-table tbody tr:last-child td { border-bottom: 1px solid #ddd; } .lotus-table--900, .lotus-table.colwidths { table-layout: fixed; } .lotus-table tfoot td { border-top: 1px solid #ddd; background: #fafafa; font: italic .8rem Oswald, sans-serif; color: #666; padding: 8px 10px; text-align: left; } .lotus-table tfoot:empty, .lotus-table tfoot td:empty { display: none; } /************************************************* * FIGURE TABLES — Side-by-side images with caption *************************************************/ .figure-table { margin: 1.5rem auto; border-collapse: collapse; border-spacing: 0; /* no extra gaps */ } /* Hyperion banner only — center image without affecting pagination */ .itemid-385 main.siteBody .lotusgemologygallery > a:first-of-type { display: table; /* shrink to image width */ margin: 0 auto; /* center it */ float: none; /* cancel floats */ } /* ========================= 6) LISTS & NAV/PAGINATION ========================= */ /* Two-tone: outer vs inner */ html, body { background-color: var(--lotus-bg-outer) !important; } body > .container { background-color: var(--lotus-bg); } #column-wrap-id-1664289525947 p, #column-wrap-id-1664289525948 p, #column-wrap-id-1664289525949 p { display: block; } .itemid-224 .blog-item { display: block !important; grid-template-columns: unset; } .itemid-224 .com-content-category-blog.blog .item-image.col-md-3 img { aspect-ratio: 1/1; object-fit: cover; } /* Re-enable page headers/titles for lists (undo old hide) */ .itemid-224 #sp-title, .itemid-224 .sp-page-title, .itemid-224 .page-title, .itemid-224 .page-header { display: block !important; } /************************************************* * NEWSLETTER PANEL *************************************************/ #newsletter-panel2 #column-id-1696534160809 .sppb-column-addons { grid-template-columns: 40% 60%; } /************************************************* * GALLERY / RESPONSIVE *************************************************/ @media (max-width: 960px) { body.layout-gallery .siteBody .lotusgemologygallery .pagination { padding-top: 80px; } } /************************************************* * REFERENCES — hard wrap long links/lists *************************************************/ .references, .references li, .references a { white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word; hyphens: auto; font-size: 0.8rem; } /* last-resort */ .references, .references ul, .references li { min-width: 0; } .references li {line-height: 1.1rem} .blog-list-abstract { font-size: 1rem; line-height: 1.5; color: #555; margin-bottom: 1em; } dd.createdby span { margin-top: 20px !important; display: block; color: #9e9e9e; } /************************************************* * FEATURED BREAK *************************************************/ #featured-break .col-lg-6 { flex: 0 0 75%; max-width: 70%; } #featured-break .card-title { font-family: 'Source Serif 4', serif; font-size: 1.1rem; line-height: 1.2; font-weight: 300; } #featured-break .card-text { font-family: 'Source Serif 4', serif; font-size: .95rem; font-style: italic; text-align: right; color: #555; } .image-pair .images { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .image-grid-2x1 .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; grid-template-areas: "a b" "c c"; } /************************************************* * PUBLICATIONS *************************************************/ .lotusgemologypublications { padding-bottom: 42px; } .lotusgemologypublications label { font-family: 'Oswald', sans-serif; } .lotusgemologypublications .sort { line-height: 40px; } .lotusgemologypublications .publications { margin-top: 0; } .lotusgemologypublications .publications > * { display: flex; align-items: center; margin-top: 45px; } .lotusgemologypublications .publications > *:first-child { margin-top: 0; } .lotusgemologypublications .publications .cover { border: 1px solid #eee; } .lotusgemologypublications .publications .data { color: #5a5a5c !important; } .lotusgemologypublications .publications img { max-width: 100%; height: auto; box-sizing: border-box; border: 0; vertical-align: middle; } .lotusgemologypublications a.img { position: relative; display: inline-block; } .lotusgemologypublications .overlay:hover { opacity: 1; } .lotusgemologypublications .advanced-search { padding-top: 30px; display: block; box-shadow: none !important; border: none; } .lotusgemologypublications .advanced-search .box { padding: 30px; background: #e9ecef; } .lotusgemologypublications #advanced-hide, .lotusgemologypublications .publications .desc { display: none; } .lotusgemologypublications .pagination { margin: 40px 0; } .lotusgemologypublications .pagination ul li.pagination-start span.pagenav, .lotusgemologypublications .pagination ul li.pagination-prev span.pagenav, .lotusgemologypublications .pagination ul li.pagination-next span.pagenav, .lotusgemologypublications .pagination ul li.pagination-end span.pagenav { background-color: transparent; } .alert-info { color: #303133; background-color: #f6f1f5; border-color: #f6f1f5; } .publication-translated-title { font-family: "Source Serif 4", serif; font-size: 1.1rem; font-style: italic; color: #888; margin: 0 0 .4rem; } /* removed nav-caret pseudo element */ /* Space harmony with your lists */ .view-category .category-desc, .com-content-category-blog .category-desc { margin-top: 6px; } /* If any list still injects a banner image via a module/desc wrapper, hide it safely */ .view-category .category-desc .item-image, .com-content-category-blog .category-desc .item-image { display: none !important; } /************************************************* * LIST HERO TITLES — Helix page-title band + Joomla category header *************************************************/ /* 0) Make sure headings can show (undo any earlier hides) */ .view-category #sp-title, .view-category .sp-page-title, .view-category .page-header, .com-content-category-blog #sp-title, .com-content-category-blog .sp-page-title, .com-content-category-blog .page-header { display: block !important; visibility: visible !important; opacity: 1 !important; } /* 5) Compact the header area spacing on lists */ #sp-title .sp-page-title, .com-content-category-blog .page-header { padding: 28px 0 10px !important; margin: 0 0 18px !important; background: transparent !important; border: 0 !important; } /* List hero title (no banner image) */ .list-hero { padding: 28px 0 12px; margin: 0 0 18px; } .list-hero__title::after { content: ""; display: block; margin-top: 12px; width: 64px; height: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--lotus-pink), #b57aa9); box-shadow: 0 1px 0 rgba(0,0,0,.05); } /* List hero title (no banner image) */ .list-hero { padding: 28px 0 12px; margin: 0 0 18px; } .list-hero__title::after { content: ""; display: block; margin-top: 12px; width: 64px; height: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--lotus-pink), #b57aa9); box-shadow: 0 1px 0 rgba(0,0,0,.05); } /* Normalize the Books list panel: keep white bg, remove rounding/shadow */ .com-content-category-blog.blog { border-radius: 0 !important; box-shadow: none !important; } /************************************************* * UNIFIED LIST STYLING — Articles / Books / Lectures / Reviews / Staff *************************************************/ /* Container spacing */ .com-content-category-blog .blog-items .blog-item, .com-content-category-blog .items-leading .blog-item { display: flex; align-items: flex-start; gap: 1.5rem; margin-bottom: 2rem; } /* Image alignment */ .com-content-category-blog .blog-item img:first-of-type { flex: 0 0 var(--list-thumb-w); max-width: var(--list-thumb-w); height: auto; border: 1px solid #ddd; /* restores the gray border */ border-radius: 4px; } /* Title */ .com-content-category-blog .blog-item .item-title { font-family: Oswald, sans-serif; font-size: 1.1rem; font-weight: 600; line-height: 1.3; color: #000; margin: 0 0 .25rem 0; } .com-content-category-blog .blog-item .item-title a { color: inherit; text-decoration: none; } /* Author / metadata row */ .com-content-category-blog .blog-item .article-author, .com-content-category-blog .blog-item .review-author, .com-content-category-blog .blog-item .staff-role { font-size: .95rem; line-height: 1.4; color: #666; font-style: normal !important; /* remove italics */ } /* Publication date — always right aligned & black */ .com-content-category-blog .blog-item .book-pubdate, .com-content-category-blog .blog-item .article-date, .com-content-category-blog .blog-item .lecture-date { margin-left: auto; font-size: .95rem; line-height: 1.4; color: #000 !important; font-style: normal !important; text-align: right; } /* Abstract/intro text */ .com-content-category-blog .blog-item .blog-list-abstract, .com-content-category-blog .blog-item .intro, .com-content-category-blog .blog-item .abstract { font-size: 1rem; line-height: 1.5; color: #555; font-style: normal !important; /* remove italics */ } /************************************************* * UNIFIED LIST ABSTRACT + VERTICAL SPACING *************************************************/ /* Ensure abstracts/intro line up flush with title text */ .com-content-category-blog .blog-item .blog-list-abstract, .com-content-category-blog .blog-item .intro, .com-content-category-blog .blog-item .abstract, .com-content-category-blog .blog-item .item-content p { margin-left: 0 !important; padding-left: 0 !important; text-align: left; } /* Spacing below meta (author/date row) */ .com-content-category-blog .blog-item .article-author, .com-content-category-blog .blog-item .review-author, .com-content-category-blog .blog-item .staff-role, .com-content-category-blog .blog-item .book-pubdate, .com-content-category-blog .blog-item .article-date, .com-content-category-blog .blog-item .lecture-date { margin-bottom: 0.5rem !important; display: block; } /* Space between list items */ .com-content-category-blog .blog-item { margin-bottom: 2rem !important; } /************************************************* * UNIFIED LECTURE META (speaker + date) *************************************************/ /* Meta row under lecture titles */ .com-content-category-blog .lecture-card .lecture-meta { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem; font-size: .95rem; line-height: 1.3; } /* Speaker (left, gray) */ .com-content-category-blog .lecture-card .lecture-speaker { color: #9a9a9c; } /* Date (right, black) */ .com-content-category-blog .lecture-card .lecture-date { color: #000; font-weight: 400; } /************************************************* * FOOTER & COPYRIGHT LINK COLORS *************************************************/ /* Hover → Lotus pink */ #footer-panel a:hover, #footer-panel a:focus, #footer-panel .sppb-addon a:hover, #footer-panel .sppb-addon a:focus, #footer-panel .sppb-nav a:hover, #footer-panel .sppb-nav a:focus, #footer-panel .sppb-media-content a:hover, #footer-panel .sppb-media-content a:focus, footer#footer-panel a:hover, footer#footer-panel a:focus, #copyright a:hover, #copyright a:focus { color: #D894CC !important; } /* Normalize base link color */ #footer-panel a, #footer-panel .sppb-addon a, #copyright a { color: inherit; /* fallback = inherit from text color */ text-decoration: none; } /* FORCE thumbnails + text alignment (fix short abstracts collapse) */ .com-content-category-blog .blog-item { align-items: stretch !important; /* make all items equal height */ } /* Text column: prevent overlap */ .com-content-category-blog .blog-item .item-content, .com-content-category-blog .blog-item .card-content { overflow: hidden; margin: 0; } /* Title */ .com-content-category-blog .blog-item .item-title { font-family: Oswald, sans-serif; font-size: 1.1rem; font-weight: 600; line-height: 1.3; color: #222; /* neutral black/gray, matches Staff */ margin: 0 0 .25rem 0; border-bottom: 1px solid var(--sep, #e0e0e0); padding-bottom: .4rem; margin-bottom: .6rem; } /* Only Staff & Trade Membership list titles are non-links */ .item.staff-card .item-title a, .trade-memberships .com-content-category-blog .blog-item .item-title a { pointer-events: none !important; cursor: default !important; color: #222 !important; /* matches your Staff title color */ } /* Author / metadata */ .com-content-category-blog .blog-item .article-author, .com-content-category-blog .blog-item .review-author, .com-content-category-blog .blog-item .staff-role { font-size: .95rem; line-height: 1.4; color: #666; font-style: normal !important; margin-bottom: .5rem; display: block; } /* Date (Books, Articles, Lectures) */ .com-content-category-blog .blog-item .book-pubdate, .com-content-category-blog .blog-item .article-date, .com-content-category-blog .blog-item .lecture-date { margin-left: auto; font-size: .95rem; line-height: 1.4; color: #000 !important; font-style: normal !important; text-align: right; margin-bottom: .5rem; display: block; } /* Abstract / intro */ .com-content-category-blog .blog-item .blog-list-abstract, .com-content-category-blog .blog-item .intro, .com-content-category-blog .blog-item .abstract { font-size: 1rem; line-height: 1.5; color: #555; font-style: normal !important; margin: 0 0 1rem 0 !important; text-align: left; } /* Space between list items */ .com-content-category-blog .blog-item { margin-bottom: 2rem !important; display: block !important; /* enforce Staff style flow */ } /************************************************* * HOTFIX — restore two-column flex layout * Category pages + Exact module suffixes *************************************************/ /* Category pages: use flex (image left, text right) */ .com-content-category-blog .blog-items .blog-item, .com-content-category-blog .items-leading .blog-item, .com-content-category-blog .blog-item { display: flex !important; align-items: flex-start !important; gap: var(--list-gap) !important; } /* Image column (no floats) */ .com-content-category-blog .blog-item .item-image, .com-content-category-blog .blog-item img:first-of-type { float: none !important; flex: 0 0 var(--list-thumb-w) !important; width: var(--list-thumb-w) !important; max-width: var(--list-thumb-w) !important; height: auto !important; margin: 0 !important; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; } /* Text column */ .com-content-category-blog .blog-item .item-content, .com-content-category-blog .blog-item .card-content { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; margin: 0 !important; } /************************************************* * Legacy list modules (exact suffixes) *************************************************/ .moduletable.list-articles-latest li.newsflash-item, .moduletable.list-articles-mostread li.newsflash-item, .moduletable.list-books li.newsflash-item, .moduletable.list-lectures-latest li.newsflash-item, .moduletable.list-reviews li.newsflash-item, .moduletable.list-staff li.newsflash-item, .moduletable.list-trade-memberships li.newsflash-item { display: flex !important; align-items: flex-start !important; gap: var(--list-gap) !important; margin: 0 0 2rem 0 !important; } /* Module images (no floats) */ .moduletable.list-articles-latest li.newsflash-item img, .moduletable.list-articles-mostread li.newsflash-item img, .moduletable.list-books li.newsflash-item img, .moduletable.list-lectures-latest li.newsflash-item img, .moduletable.list-reviews li.newsflash-item img, .moduletable.list-staff li.newsflash-item img, .moduletable.list-trade-memberships li.newsflash-item img { float: none !important; flex: 0 0 var(--list-thumb-w) !important; width: var(--list-thumb-w) !important; max-width: var(--list-thumb-w) !important; height: auto !important; margin: 0 !important; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; } /* Module text column */ .moduletable.list-articles-latest li.newsflash-item .newsflash-title, .moduletable.list-articles-mostread li.newsflash-item .newsflash-title, .moduletable.list-books li.newsflash-item .newsflash-title, .moduletable.list-lectures-latest li.newsflash-item .newsflash-title, .moduletable.list-reviews li.newsflash-item .newsflash-title, .moduletable.list-staff li.newsflash-item .newsflash-title, .moduletable.list-trade-memberships li.newsflash-item .newsflash-title, .moduletable.list-articles-latest li.newsflash-item .article-content, .moduletable.list-articles-mostread li.newsflash-item .article-content, .moduletable.list-books li.newsflash-item .article-content, .moduletable.list-lectures-latest li.newsflash-item .article-content, .moduletable.list-reviews li.newsflash-item .article-content, .moduletable.list-staff li.newsflash-item .article-content, .moduletable.list-trade-memberships li.newsflash-item .article-content { flex: 1 1 auto !important; min-width: 0 !important; display: block; } /* Staff modules: disable links + keep hairline safe */ .moduletable.list-staff .mod-articles-category .newsflash-title a { pointer-events: none !important; cursor: default !important; color: #222 !important; } /* === Even vertical spacing on all list rows (category pages + modules) === */ /* 1) Kill the inline-image baseline gap that adds random extra space */ .com-content-category-blog .blog-item img:first-of-type, .mod-articles-category li.newsflash-item img { display: block !important; } .com-content-category-blog .blog-item .article-author, .com-content-category-blog .blog-item .review-author, .com-content-category-blog .blog-item .staff-role, .com-content-category-blog .blog-item .book-pubdate, .com-content-category-blog .blog-item .article-date, .com-content-category-blog .blog-item .lecture-date, .mod-articles-category .article-author, .mod-articles-category .review-author, .mod-articles-category .staff-role { margin-bottom: .5rem !important; display: block; } /* 4) Make the row spacing come from the container (not child margins) */ .com-content-category-blog .blog-item, .mod-articles-category li.newsflash-item { padding-bottom: 1.25rem !important; margin-bottom: 1.75rem !important; } /* (Optional) If you want a divider between items, uncomment the next line */ /* .com-content-category-blog .blog-item, .mod-articles-category li.newsflash-item { border-bottom: 1px solid var(--sep); } */ /************************************************* * EVEN LIST SPACING (pages + legacy modules) * one source of truth: the row itself *************************************************/ /* Category pages */ .com-content-category-blog .blog-item{ display:flex !important; /* keep two-column look */ align-items:flex-start !important; gap:var(--list-gap) !important; /* Row rhythm */ padding: 1.25rem 0 !important; /* consistent inside space */ margin: 0 !important; /* kill stray outer margins */ border-bottom: 1px solid var(--sep) !important; } .com-content-category-blog .blog-item .item-content, .com-content-category-blog .blog-item .card-content{ flex:1 1 auto !important; min-width:0 !important; overflow:hidden !important; margin:0 !important; padding:0 !important; display:block; /* prevents margin-collapsing quirks */ } .com-content-category-blog .blog-item .article-author, .com-content-category-blog .blog-item .review-author, .com-content-category-blog .blog-item .staff-role, .com-content-category-blog .blog-item .book-pubdate, .com-content-category-blog .blog-item .article-date, .com-content-category-blog .blog-item .lecture-date{ margin:0 0 .5rem 0 !important; display:block !important; } /* Legacy modules — same treatment */ .mod-articles-category li.newsflash-item{ display:flex !important; align-items:flex-start !important; gap:var(--list-gap) !important; padding: 1.25rem 0 !important; margin:0 !important; border-bottom:1px solid var(--sep) !important; } .mod-articles-category li.newsflash-item:last-child{ border-bottom:0 !important; } .mod-articles-category li.newsflash-item img{ margin:0 !important; display:block !important; } .mod-articles-category li.newsflash-item .article-content{ flex:1 1 auto !important; min-width:0 !important; margin:0 !important; padding:0 !important; display:block; } .mod-articles-category .article-author, .mod-articles-category .review-author, .mod-articles-category .staff-role{ margin:0 0 .5rem 0 !important; display:block !important; } /************************************************* * FINAL PATCH — even spacing + 2-column layout on ALL list rows * (handles both .item and .blog-item wrappers) *************************************************/ /* Category pages (Articles/Books/Lectures/Reviews/Staff) */ .com-content-category-blog .items-leading .item, .com-content-category-blog .blog-items .item, .com-content-category-blog .items-leading .blog-item, .com-content-category-blog .blog-items .blog-item, .com-content.blog .items-leading .item, .com-content.blog .blog-items .item { display: flex !important; align-items: flex-start !important; gap: var(--list-gap) !important; /* one source of truth for vertical rhythm */ padding: 1.25rem 0 !important; margin: 0 !important; border-bottom: 1px solid var(--sep) !important; } /* Image column: fixed width, no floats, no baseline gap */ .com-content-category-blog .items-leading .item img:first-of-type, .com-content-category-blog .blog-items .item img:first-of-type, .com-content-category-blog .items-leading .blog-item img:first-of-type, .com-content-category-blog .blog-items .blog-item img:first-of-type, .com-content.blog .items-leading .item img:first-of-type, .com-content.blog .blog-items .item img:first-of-type { float: none !important; display: block !important; flex: 0 0 var(--list-thumb-w) !important; width: var(--list-thumb-w) !important; max-width: var(--list-thumb-w) !important; height: auto !important; margin: 0 !important; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; } /* Text column */ .com-content-category-blog .items-leading .item .item-content, .com-content-category-blog .blog-items .item .item-content, .com-content-category-blog .items-leading .item .card-content, .com-content-category-blog .blog-items .item .card-content, .com-content-category-blog .items-leading .blog-item .item-content, .com-content-category-blog .blog-items .blog-item .item-content, .com-content-category-blog .items-leading .blog-item .card-content, .com-content-category-blog .blog-items .blog-item .card-content, .com-content.blog .items-leading .item .item-content, .com-content.blog .blog-items .item .item-content, .com-content.blog .items-leading .item .card-content, .com-content.blog .blog-items .item .card-content { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; margin: 0 !important; } /* Normalize inner margins for consistent row height */ .com-content-category-blog .items-leading .item .article-author, .com-content-category-blog .items-leading .item .review-author, .com-content-category-blog .items-leading .item .staff-role, .com-content-category-blog .items-leading .item .book-pubdate, .com-content-category-blog .items-leading .item .article-date, .com-content-category-blog .items-leading .item .lecture-date, .com-content-category-blog .blog-items .item .article-author, .com-content-category-blog .blog-items .item .review-author, .com-content-category-blog .blog-items .item .staff-role, .com-content-category-blog .blog-items .item .book-pubdate, .com-content-category-blog .blog-items .item .article-date, .com-content-category-blog .blog-items .item .lecture-date, .com-content.blog .items-leading .item .article-author, .com-content.blog .items-leading .item .review-author, .com-content.blog .items-leading .item .staff-role, .com-content.blog .items-leading .item .book-pubdate, .com-content.blog .items-leading .item .article-date, .com-content.blog .items-leading .item .lecture-date { display: block !important; margin: 0 0 .5rem 0 !important; } /************************************************* * REMOVE LIST HAIRLINES (category pages + modules) *************************************************/ .com-content-category-blog .items-leading .item, .com-content-category-blog .blog-items .item, .com-content-category-blog .items-leading .blog-item, .com-content-category-blog .blog-items .blog-item, .com-content.blog .items-leading .item, .com-content.blog .blog-items .item, .mod-articles-category li.newsflash-item { border-bottom: 0 !important; } /************************************************* * DISABLE LINKS — Staff + Trade Memberships *************************************************/ /* Staff: already covered, but reinforce */ .moduletable.list-staff .mod-articles-category .newsflash-title a, .item.staff-card .item-title a, .item.staff-card .card-image a { pointer-events: none !important; cursor: default !important; color: #222 !important; /* neutral dark */ text-decoration: none !important; } /* Trade Memberships: same behavior */ .moduletable.list-trade-memberships .mod-articles-category .newsflash-title a, .moduletable.list-trade-memberships .mod-articles-category .card-image a, .item.trade-memberships-card .item-title a, .item.trade-memberships-card .card-image a { pointer-events: none !important; cursor: default !important; color: inherit !important; text-decoration: none !important; } /************************************************* * Trade Memberships — make logos & titles non-clickable * (page + module, all anchor tags inside list rows) *************************************************/ /* Category page */ .trade-memberships .com-content-category-blog .items-leading .item a, .trade-memberships .com-content-category-blog .blog-items .item a, .trade-memberships .com-content-category-blog .items-leading .blog-item a, .trade-memberships .com-content-category-blog .blog-items .blog-item a { pointer-events: none !important; cursor: default !important; text-decoration: none !important; color: inherit !important; } /* Legacy module variant */ .moduletable.list-trade-memberships .mod-articles-category li.newsflash-item a { pointer-events: none !important; cursor: default !important; text-decoration: none !important; color: inherit !important; } /************************************************* * Title color fix — Trade-Memberships * (no link, match Staff neutral style) *************************************************/ .item.trade-memberships-card .item-title, .trade-memberships .com-content-category-blog .item .item-title { color: #222 !important; /* neutral dark, same as Staff */ } /************************************************* * Re-enable title links — Articles / Books / Lectures / Reviews *************************************************/ .item.article-card .item-title a, .item.book-card .item-title a, .item.lecture-card .item-title a, .item.review-card .item-title a { pointer-events: auto !important; cursor: pointer !important; text-decoration: none; /* keep clean look */ } /* Keep Staff + Trade-Memberships unlinked */ .item.staff-card .item-title a, .trade-memberships .com-content-category-blog .item .item-title a { pointer-events: none !important; cursor: default !important; } /* Keep each list entry from wrapping beside the previous thumbnail */ .com-content-category-blog .blog-item { display: flow-root; /* modern clearfix */ } /* Kill the title hairline that’s reappearing on lists */ .com-content-category-blog .blog-item .item-title { border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: .25rem !important; } /* === LOTUS LIST PATCH (final override) =============================== */ /* one row model for all list pages – no floats, no wrap-around, even spacing */ /* Row container */ .com-content-category-blog .items-leading .item, .com-content-category-blog .blog-items .item, .com-content-category-blog .items-leading .blog-item, .com-content-category-blog .blog-items .blog-item { display: flex !important; align-items: flex-start !important; gap: var(--list-gap) !important; padding: 1.25rem 0 !important; margin: 0 !important; border-bottom: 1px solid var(--sep) !important; } /* Thumbnail (fixed column) */ .com-content-category-blog .items-leading .item img:first-of-type, .com-content-category-blog .blog-items .item img:first-of-type, .com-content-category-blog .items-leading .blog-item img:first-of-type, .com-content-category-blog .blog-items .blog-item img:first-of-type { float: none !important; /* kill legacy floats */ display: block !important; /* kill inline baseline gap */ flex: 0 0 var(--list-thumb-w) !important; width: var(--list-thumb-w) !important; max-width: var(--list-thumb-w) !important; height: auto !important; margin: 0 !important; /* the gap is provided by row 'gap' */ border: 1px solid #ddd !important; border-radius: 4px !important; box-sizing: border-box !important; } /* Text column */ .com-content-category-blog .items-leading .item .item-content, .com-content-category-blog .blog-items .item .item-content, .com-content-category-blog .items-leading .item .card-content, .com-content-category-blog .blog-items .item .card-content, .com-content-category-blog .items-leading .blog-item .item-content, .com-content-category-blog .blog-items .blog-item .item-content, .com-content-category-blog .items-leading .blog-item .card-content, .com-content-category-blog .blog-items .blog-item .card-content { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; display: block !important; /* stops margin collapsing */ } /* Title: restore hairline (but not for Staff/Trade) */ .com-content-category-blog .items-leading .item .item-title, .com-content-category-blog .blog-items .item .item-title, .com-content-category-blog .items-leading .blog-item .item-title, .com-content-category-blog .blog-items .blog-item .item-title { display: block !important; margin: 0 0 .6rem 0 !important; padding-bottom: .4rem !important; border-bottom: 1px solid var(--sep) !important; } /* Staff + Trade: neutral title, no hairline */ .item.staff-card .item-title, .item.trade-memberships-card .item-title { border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: .25rem !important; color: #222 !important; } /* Meta row spacing */ .com-content-category-blog .item .article-author, .com-content-category-blog .item .review-author, .com-content-category-blog .item .staff-role, .com-content-category-blog .item .book-pubdate, .com-content-category-blog .item .article-date, .com-content-category-blog .item .lecture-date { display: block !important; margin: 0 0 .5rem 0 !important; } /* Links: ON for Articles/Books/Lectures/Reviews; OFF for Staff/Trade */ .item.article-card .item-title a, .item.book-card .item-title a, .item.lecture-card .item-title a, .item.review-card .item-title a { pointer-events: auto !important; cursor: pointer !important; text-decoration: none !important; } .item.staff-card .item-title a, .item.trade-memberships-card .item-title a { pointer-events: none !important; cursor: default !important; } /* Remove earlier rules that killed hairline everywhere */ .com-content-category-blog .blog-item .item-title { border-bottom: 1px solid var(--sep) !important; padding-bottom: .4rem !important; margin-bottom: .6rem !important; } /* --- FINAL PATCH: clean rows (no row hairline) + stable 2-column layout --- */ /* 1) Remove the HAIRLINE on the ROW itself */ .com-content-category-blog .items-leading .item, .com-content-category-blog .blog-items .item, .com-content-category-blog .items-leading .blog-item, .com-content-category-blog .blog-items .blog-item { border-bottom: 0 !important; /* kill hairline under every article */ padding: 1.25rem 0 !important; /* keep spacing */ margin: 0 !important; } /* 2) Use GRID for the row (no floats/flex fights) */ .com-content-category-blog .items-leading .item, .com-content-category-blog .blog-items .item, .com-content-category-blog .items-leading .blog-item, .com-content-category-blog .blog-items .blog-item { display: grid !important; grid-template-columns: var(--list-thumb-w) 1fr; /* fixed thumb + fluid text */ column-gap: var(--list-gap) !important; align-items: start !important; } /* 3) Thumbnail column */ .com-content-category-blog .items-leading .item img:first-of-type, .com-content-category-blog .blog-items .item img:first-of-type, .com-content-category-blog .items-leading .blog-item img:first-of-type, .com-content-category-blog .blog-items .blog-item img:first-of-type { float: none !important; /* stop legacy float */ display: block !important; /* removes inline baseline gap */ width: var(--list-thumb-w) !important; max-width: var(--list-thumb-w) !important; height: auto !important; margin: 0 !important; /* grid gap provides the gutter */ border: 1px solid #ddd !important; border-radius: 4px !important; box-sizing: border-box !important; grid-column: 1; /* explicit image column */ } /* 4) Text column */ .com-content-category-blog .items-leading .item .item-content, .com-content-category-blog .blog-items .item .item-content, .com-content-category-blog .items-leading .item .card-content, .com-content-category-blog .blog-items .item .card-content, .com-content-category-blog .items-leading .blog-item .item-content, .com-content-category-blog .blog-items .blog-item .item-content, .com-content-category-blog .items-leading .blog-item .card-content, .com-content-category-blog .blog-items .blog-item .card-content { grid-column: 2; min-width: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } /* 5) Title hairline stays (only under the title) */ .com-content-category-blog .item .item-title { border-bottom: 1px solid var(--sep) !important; padding-bottom: .4rem !important; margin-bottom: .6rem !important; } /* Keep Staff/Trade titles neutral and without a hairline */ .item.staff-card .item-title, .item.trade-memberships-card .item-title { border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: .25rem !important; color: #222 !important; } /* === EMERGENCY ROLLBACK: stable 2-column flex rows, no row hairlines === */ /* Row container (Articles/Books/Lectures/Reviews/Staff) */ .com-content-category-blog .items-leading .item, .com-content-category-blog .blog-items .item, .com-content-category-blog .items-leading .blog-item, .com-content-category-blog .blog-items .blog-item { display: flex !important; align-items: flex-start !important; gap: var(--list-gap) !important; /* even spacing, no divider lines under each article */ padding: 1.25rem 0 !important; margin: 0 !important; border: 0 !important; } /* Thumbnail (fixed width, no floats) */ .com-content-category-blog .items-leading .item img:first-of-type, .com-content-category-blog .blog-items .item img:first-of-type, .com-content-category-blog .items-leading .blog-item img:first-of-type, .com-content-category-blog .blog-items .blog-item img:first-of-type { float: none !important; display: block !important; flex: 0 0 var(--list-thumb-w) !important; width: var(--list-thumb-w) !important; max-width: var(--list-thumb-w) !important; height: auto !important; margin: 0 !important; /* gap comes from the row */ border: 1px solid #ddd !important; border-radius: 4px !important; box-sizing: border-box !important; } /* Text column */ .com-content-category-blog .items-leading .item .item-content, .com-content-category-blog .blog-items .item .item-content, .com-content-category-blog .items-leading .item .card-content, .com-content-category-blog .blog-items .item .card-content, .com-content-category-blog .items-leading .blog-item .item-content, .com-content-category-blog .blog-items .blog-item .item-content, .com-content-category-blog .items-leading .blog-item .card-content, .com-content-category-blog .blog-items .blog-item .card-content { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } /* Title hairline: ON (except Staff/Trade), consistent spacing */ .com-content-category-blog .item .item-title { display: block !important; border-bottom: 1px solid var(--sep) !important; padding-bottom: .4rem !important; margin: 0 0 .6rem 0 !important; } /* Staff & Trade titles: neutral, NO hairline */ .item.staff-card .item-title, .item.trade-memberships-card .item-title { border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: .25rem !important; color: #222 !important; } /* === Short-entry right-edge fix (category lists only) === */ /* 1) Make the row itself the sole source of spacing */ .com-content-category-blog .items-leading .item, .com-content-category-blog .blog-items .item, .com-content-category-blog .items-leading .blog-item, .com-content-category-blog .blog-items .blog-item { box-sizing: border-box !important; width: 100% !important; padding-right: 0 !important; /* kill stray row PR */ margin-right: 0 !important; } /* 2) Ensure text column truly fills remaining width and has no right padding */ .com-content-category-blog .blog-item .item-content, .com-content-category-blog .blog-item .card-content { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; padding-right: 0 !important; /* template sometimes adds this */ margin-right: 0 !important; } /* 3) Remove any accidental right-side spacing on inner elements */ .com-content-category-blog .blog-item .item-title, .com-content-category-blog .blog-item .article-author, .com-content-category-blog .blog-item .review-author, .com-content-category-blog .blog-item .staff-role, .com-content-category-blog .blog-item .book-pubdate, .com-content-category-blog .blog-item .article-date, .com-content-category-blog .blog-item .lecture-date, .com-content-category-blog .blog-item .blog-list-abstract, .com-content-category-blog .blog-item .intro, .com-content-category-blog .blog-item .abstract, .com-content-category-blog .blog-item .item-content p { margin-right: 0 !important; padding-right: 0 !important; } /* Make the “Sort by / Order / Show” labels align nicely on one line */ .lotusgemologypublications .sorter .d-flex { gap: 10px; } .lotusgemologypublications .pagination li { list-style: none; } .lotusgemologypublications .pagination a, .lotusgemologypublications .pagination span { display: inline-block; min-width: 40px; height: var(--lg-h); line-height: var(--lg-h); padding: 0 12px; text-align: center; border-radius: var(--lg-r); border: 0; font-weight: 600; font-family: 'Oswald', sans-serif; text-decoration: none; background: var(--lg-ink); color: #fff; } /* hover/active/current */ .lotusgemologypublications .pagination a:hover { background: var(--lg-ink-hover); color: #fff; } .lotusgemologypublications .pagination .active span, .lotusgemologypublications .pagination .current, .lotusgemologypublications .pagination li.active a, .lotusgemologypublications .pagination li.active span { background: var(--lg-pink) !important; color: #fff !important; } /* “…” and disabled */ .lotusgemologypublications .pagination .disabled span, .lotusgemologypublications .pagination .disabled a { opacity: .45; pointer-events: none; } /* Mobile nicety */ @media (max-width: 640px){ .lotusgemologypublications .pagination a, .lotusgemologypublications .pagination span { min-width: 36px; } } .lotusgemologypublications .pagination, .lotusgemologypublications nav.pagination__wrapper .pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 10px 0 0; padding: 0 !important; background: transparent; border: 0; } /* J4/J5 structure: