@charset "UTF-8"; /** * cire-luxury-extras.css — CIRECaribbean.com luxury redesign, "extra" page types * =========================================================================== * Companion to css/cire-luxury.css (which owns tokens + the property-detail * page). This file owns FOUR page types and nothing else: * * .cire-post single.php — blog / Journal article * .cire-agent page-agent-detail.php — agent profile * .cire-mylogin components/mylogin/index.php — MyLogin dashboard * .cire-flyer components/property/detail/print-flyer*.php — print sheet * * Each root class is added by the template it belongs to, because this theme * does NOT give these pages usable body classes: the agent profile renders * and MyLogin only gets a generic "login". Scoping on a * wrapper class we control is the only reliable containment. * * HARD RULES OBSERVED HERE * - Mobile-first. Every block is written for 375px and then widened. * Breakpoints: 729px and 1024px only (the mockups' and the theme's). * - No bare px font-sizes on anything that scales; type is clamp()-based. * - NOTHING in this file may touch the site header, masthead, navigation, * .mobile-nav, .navbar* or the footer, at any width. Mobile navigation * stays on the theme's existing hamburger mechanism (Nick, 2026-08-14). * The one exception is .cire-flyer .prop-print-header, which is the * PRINT SHEET's own letterhead inside the PDF — not site navigation. * - Presentation only. No rule here depends on markup that isn't already * produced by the templates' existing data calls. * * TOKENS are re-declared below rather than inherited. css/cire-luxury.css * defines them, but the print-flyer templates deregister 'neutrino_styles' * and therefore drop cire-luxury with it — so this file must stand alone. */ /* ========================================================================== 00 TOKENS (mirror of cire-luxury.css; see note above) ========================================================================== */ :root { --cire-white: #ffffff; --cire-panel: #f6f7f7; --cire-black: #000000; --cire-charcoal: #384249; --cire-gray-med: #76787b; --cire-gray-light: #a3aaad; --cire-gold: #c9ac77; --cire-gold-dark: #bfa066; --cire-hairline: #e3e5e6; --cire-serif: "Playfair Display", "Playfair", Georgia, "Times New Roman", serif; --cire-sans: "Proxima Nova", "Proxima Nova W01", "Helvetica Neue", Helvetica, Arial, sans-serif; } /* ========================================================================== 01 SHARED PRIMITIVES — only ever applied inside one of the four roots ========================================================================== */ .cire-post .cire-seclabel, .cire-agent .cire-seclabel, .cire-mylogin .cire-seclabel { font-family: var(--cire-sans); font-size: clamp(0.72rem, 0.68rem + 0.2vw, 0.85rem); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cire-black); line-height: 1.4; } /* Gold primary action + charcoal ghost. Gold is used sparingly, per BRAND.md: small rules, hover states, one primary button per view. */ .cire-post .cire-btn, .cire-agent .cire-btn, .cire-mylogin .cire-btn { display: inline-block; background: var(--cire-gold); color: #2c3338; text-decoration: none; font-family: var(--cire-sans); font-size: clamp(0.78rem, 0.74rem + 0.2vw, 0.85rem); letter-spacing: 0.1em; line-height: 1.2; padding: 14px 26px; border: 1px solid var(--cire-gold); border-radius: 0; text-align: center; } .cire-post .cire-btn:hover, .cire-agent .cire-btn:hover, .cire-mylogin .cire-btn:hover { background: var(--cire-gold-dark); border-color: var(--cire-gold-dark); color: #2c3338; } /* ========================================================================== 02 BLOG / JOURNAL ARTICLE — single.php (.cire-post) Mockup: centred kicker, serif headline, byline, full-measure hero figure, ~720px prose measure with a drop cap, gold-ruled pull quotes, and a card grid to close the page. ========================================================================== */ .cire-post { background: var(--cire-white); color: var(--cire-charcoal); font-family: var(--cire-sans); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem); line-height: 1.8; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; } /* --- breadcrumb ---------------------------------------------------------- */ .cire-post .breadcrumb-container { border-bottom: 1px solid var(--cire-hairline); background: var(--cire-white); padding: 14px 0; } .cire-post .breadcrumb { font-size: clamp(0.7rem, 0.67rem + 0.15vw, 0.78rem); letter-spacing: 0.08em; color: var(--cire-gray-med); text-decoration: none; text-transform: none; } .cire-post .breadcrumb--active { color: var(--cire-charcoal); } .cire-post .breadcrumb:hover { color: var(--cire-gold); } /* --- article masthead ---------------------------------------------------- */ /* The old template painted the featured image as a background on the header and floated the title over it. The mockup puts the type FIRST on white and the photograph below it, so single.php now emits .cire-post__head (type) and .cire-post__hero (figure) as siblings. */ .cire-post__head { max-width: 720px; margin: 0 auto; padding: clamp(28px, 6vw, 52px) 20px 0; text-align: center; } .cire-post__kicker { font-size: clamp(0.62rem, 0.6rem + 0.1vw, 0.7rem); letter-spacing: 0.3em; text-transform: uppercase; color: var(--cire-gold); line-height: 1.6; } .cire-post__kicker a { color: inherit; text-decoration: none; } .cire-post__kicker a:hover { color: var(--cire-gold-dark); } .cire-post__title { font-family: var(--cire-serif); font-weight: 500; font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3rem); line-height: 1.18; color: var(--cire-black); margin: 14px 0 0; text-wrap: balance; } .cire-post__byline { margin-top: 16px; font-size: clamp(0.66rem, 0.63rem + 0.15vw, 0.72rem); letter-spacing: 0.2em; text-transform: uppercase; color: var(--cire-gray-med); line-height: 1.8; } .cire-post__byline time, .cire-post__byline .cire-post__author { letter-spacing: inherit; } /* --- hero photograph ----------------------------------------------------- */ .cire-post__hero { margin: clamp(24px, 5vw, 44px) auto 0; max-width: 1240px; padding: 0 20px; } .cire-post__hero-img { width: 100%; aspect-ratio: 3 / 2; background-position: center; background-size: cover; background-repeat: no-repeat; background-color: var(--cire-panel); } @media (min-width: 729px) { .cire-post__hero-img { aspect-ratio: 21 / 10; } } /* --- prose --------------------------------------------------------------- */ .cire-post .blog-detail__post { padding: clamp(28px, 5vw, 48px) 0 0; } .cire-post .blog-detail__post-content { max-width: 720px; margin: 0 auto; float: none; padding-left: 20px; padding-right: 20px; } .cire-post .blog-detail__post-content > p, .cire-post .blog-detail__post-content > ul, .cire-post .blog-detail__post-content > ol, .cire-post .blog-detail__post-content > blockquote { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.0625rem); line-height: 1.8; } .cire-post .blog-detail__post-content p + p, .cire-post .blog-detail__post-content p + ul, .cire-post .blog-detail__post-content p + ol { margin-top: 1.2em; } /* Drop cap. Suppressed below 729px: at 375px a 3.4em cap eats a third of the line box and the first three lines lose their measure. */ @media (min-width: 729px) { .cire-post .blog-detail__post-content > p:first-of-type::first-letter { font-family: var(--cire-serif); font-size: 3.4em; float: left; line-height: 0.85; padding: 4px 10px 0 0; color: var(--cire-black); } } .cire-post .blog-detail__post-content h2, .cire-post .blog-detail__post-content h3 { font-family: var(--cire-serif); font-weight: 500; color: var(--cire-black); text-wrap: balance; line-height: 1.3; } .cire-post .blog-detail__post-content h2 { font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.6rem); margin: clamp(30px, 5vw, 44px) 0 14px; } .cire-post .blog-detail__post-content h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.3rem); margin: clamp(24px, 4vw, 34px) 0 12px; } .cire-post .blog-detail__post-content a { color: var(--cire-charcoal); text-decoration: none; border-bottom: 1px solid var(--cire-gold); } .cire-post .blog-detail__post-content a:hover { color: var(--cire-gold-dark); } .cire-post .blog-detail__post-content img { max-width: 100%; height: auto; } /* Editors' blockquotes become the mockup's gold-ruled pull quote. */ .cire-post .blog-detail__post-content blockquote { margin: clamp(28px, 5vw, 42px) 0; padding: 0 clamp(4px, 3vw, 20px); border: 0; text-align: center; font-family: var(--cire-serif); font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); line-height: 1.5; color: var(--cire-black); } .cire-post .blog-detail__post-content blockquote::before, .cire-post .blog-detail__post-content blockquote::after { content: ""; display: block; width: 64px; height: 1px; background: var(--cire-gold); margin: 22px auto; } .cire-post .blog-detail__post-content blockquote p { font-size: inherit; line-height: inherit; } /* --- categories / tags footer ------------------------------------------- */ .cire-post .blog-detail__meta { margin-top: clamp(30px, 5vw, 46px); padding-top: 20px; border-top: 1px solid var(--cire-hairline); font-size: clamp(0.7rem, 0.67rem + 0.15vw, 0.76rem); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cire-gray-med); line-height: 2; } .cire-post .blog-detail__meta-header { font-weight: 700; color: var(--cire-black); } .cire-post .blog-detail__meta a { color: var(--cire-charcoal); text-decoration: none; border-bottom: 1px solid var(--cire-hairline); } .cire-post .blog-detail__meta a:hover { color: var(--cire-gold); border-bottom-color: var(--cire-gold); } /* --- share rail ---------------------------------------------------------- */ /* Below 1024px the sticky rail is dropped under the article as a plain row; the mockup has no rail on phones and the sticky JS mis-measures inside a centred measure. */ .cire-post .blog-detail__post-sharing-column { float: none; max-width: 720px; margin: 24px auto 0; padding: 0 20px; } .cire-post .blog-detail__post-sharing { display: flex; gap: 18px; align-items: center; justify-content: center; padding-top: 18px; border-top: 1px solid var(--cire-hairline); } @media (min-width: 1024px) { .cire-post .blog-detail__post-sharing { justify-content: flex-start; border-top: 0; padding-top: 0; flex-direction: column; } } /* --- next / previous, as the mockup's closing card grid ------------------ */ .cire-post__more { border-top: 1px solid var(--cire-hairline); margin-top: clamp(38px, 7vw, 60px); padding: clamp(32px, 6vw, 54px) 20px clamp(40px, 8vw, 70px); max-width: 1240px; margin-left: auto; margin-right: auto; } .cire-post__more .cire-seclabel { margin-bottom: 22px; } .cire-post__more-grid { display: grid; grid-template-columns: 1fr; gap: 26px; } @media (min-width: 729px) { .cire-post__more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .cire-post__card { display: block; text-decoration: none; color: var(--cire-charcoal); } .cire-post__card-img { width: 100%; aspect-ratio: 3 / 2; background-color: var(--cire-panel); background-position: center; background-size: cover; background-repeat: no-repeat; } .cire-post__card-cat { font-size: clamp(0.58rem, 0.56rem + 0.1vw, 0.62rem); letter-spacing: 0.24em; text-transform: uppercase; color: var(--cire-gold); margin-top: 14px; line-height: 1.6; } .cire-post__card-title { font-family: var(--cire-serif); font-weight: 500; font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.15rem); color: var(--cire-black); margin: 6px 0 0; line-height: 1.35; } .cire-post__card:hover .cire-post__card-title { color: var(--cire-gold); } .cire-post__card-date { font-size: clamp(0.68rem, 0.66rem + 0.1vw, 0.72rem); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cire-gray-med); margin-top: 8px; line-height: 1.6; } /* ========================================================================== 03 AGENT PROFILE — page-agent-detail.php (.cire-agent) Mockup: portrait column + a details column carrying label, serif name, uppercase role, contact row, bio, a hairline credentials band and CTAs; then a panel-grey band of listing cards. ========================================================================== */ .cire-agent { background: var(--cire-white); color: var(--cire-charcoal); font-family: var(--cire-sans); letter-spacing: 0.015em; } .cire-agent .agent-header { background: var(--cire-white); padding: 0 0 clamp(18px, 4vw, 30px); } /* Foundation gives us two medium-6 columns. The mockup wants 400px + rest, so the row becomes a grid from 1024px up and a single column below it. */ .cire-agent .agent-header > .row { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 4vw, 28px); max-width: 1240px; margin: 0 auto; padding: clamp(20px, 5vw, 44px) 20px 0; } .cire-agent .agent-header > .row > .columns { width: auto; max-width: none; float: none; padding: 0; } @media (min-width: 1024px) { .cire-agent .agent-header > .row { grid-template-columns: 400px minmax(0, 1fr); gap: 64px; align-items: start; } } .cire-agent .agent-header__image { margin: 0; max-width: 380px; } @media (min-width: 1024px) { .cire-agent .agent-header__image { max-width: none; } } .cire-agent .agent-header__image img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; border-radius: 0; } .cire-agent .agent-header__content { padding: 0; text-align: left; } .cire-agent .agent-header__award { font-size: clamp(0.62rem, 0.6rem + 0.1vw, 0.68rem); letter-spacing: 0.22em; text-transform: uppercase; color: var(--cire-gold); margin-bottom: 10px; line-height: 1.6; } .cire-agent .agent-header__title { font-family: var(--cire-serif); font-weight: 500; font-size: clamp(1.75rem, 1.25rem + 2.4vw, 2.7rem); line-height: 1.15; color: var(--cire-black); margin: 8px 0 0; text-transform: none; text-wrap: balance; } .cire-agent .agent-header__subtitle { font-size: clamp(0.66rem, 0.63rem + 0.15vw, 0.72rem); letter-spacing: 0.24em; text-transform: uppercase; color: var(--cire-gray-med); margin-top: 8px; line-height: 1.8; } .cire-agent .agent-header__contact { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 20px; font-size: clamp(0.9rem, 0.86rem + 0.2vw, 0.95rem); } .cire-agent .agent-header__contact-item { margin: 0; } .cire-agent .agent-header__contact-type { color: var(--cire-gray-light); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.75em; margin-right: 6px; } .cire-agent .agent-header__contact a { color: var(--cire-charcoal); text-decoration: none; border-bottom: 1px solid var(--cire-hairline); } .cire-agent .agent-header__contact a:hover { border-bottom-color: var(--cire-gold); color: var(--cire-gold-dark); } .cire-agent .agent-header__office { margin-top: 18px; font-style: normal; font-size: clamp(0.85rem, 0.82rem + 0.15vw, 0.92rem); line-height: 1.7; color: var(--cire-gray-med); } .cire-agent .agent-header__office-title { font-size: clamp(0.62rem, 0.6rem + 0.1vw, 0.68rem); letter-spacing: 0.22em; text-transform: uppercase; color: var(--cire-charcoal); margin-bottom: 4px; } /* Credentials band — the mockup's hairline stat strip. Only figures the template can actually prove are rendered (see page-agent-detail.php). */ .cire-agent .cire-agent__creds { display: flex; flex-wrap: wrap; margin-top: clamp(22px, 4vw, 30px); border-top: 1px solid var(--cire-hairline); border-bottom: 1px solid var(--cire-hairline); } .cire-agent .cire-agent__cred { flex: 1 1 140px; text-align: center; padding: 18px 10px; border-right: 1px solid var(--cire-hairline); } .cire-agent .cire-agent__cred:last-child { border-right: 0; } .cire-agent .cire-agent__cred-num { font-family: var(--cire-serif); font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem); color: var(--cire-black); font-variant-numeric: tabular-nums; line-height: 1.2; } .cire-agent .cire-agent__cred-lbl { font-size: clamp(0.56rem, 0.55rem + 0.1vw, 0.6rem); letter-spacing: 0.24em; text-transform: uppercase; color: var(--cire-gray-med); margin-top: 4px; line-height: 1.6; } /* Actions. The theme's buttons are blue-outline; both are re-skinned here. */ .cire-agent .agent-header__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 4vw, 28px); } .cire-agent .agent-header__actions .agent-header__button, .cire-agent .agent-header__actions .button, .cire-agent .agent-header__actions .button--blue-outline { display: inline-block; background: transparent; border: 1px solid var(--cire-black); color: var(--cire-black); font-family: var(--cire-sans); font-size: clamp(0.76rem, 0.73rem + 0.2vw, 0.85rem); letter-spacing: 0.1em; line-height: 1.2; padding: 14px 26px; border-radius: 0; text-transform: none; margin: 0; text-decoration: none; } .cire-agent .agent-header__actions .button:hover, .cire-agent .agent-header__actions .agent-header__button:hover { border-color: var(--cire-gold); color: var(--cire-gold-dark); background: transparent; } /* First action reads as the primary — solid gold, one per view. */ .cire-agent .agent-header__actions > a:first-child { background: var(--cire-gold); border-color: var(--cire-gold); color: #2c3338; } .cire-agent .agent-header__actions > a:first-child:hover { background: var(--cire-gold-dark); border-color: var(--cire-gold-dark); color: #2c3338; } .cire-agent .agent-header__social { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; margin: clamp(18px, 3vw, 24px) 0 0; padding: 0; } .cire-agent .agent-header__social li { margin: 0; } .cire-agent .agent-header__social a { color: var(--cire-gray-med); } .cire-agent .agent-header__social a:hover { color: var(--cire-gold); } /* --- section nav --------------------------------------------------------- */ /* This is an in-page anchor bar inside the article, NOT the site navigation. */ .cire-agent .page-nav { border-top: 1px solid var(--cire-hairline); border-bottom: 1px solid var(--cire-hairline); background: var(--cire-white); } .cire-agent .page-nav__links { display: flex; gap: 0; overflow-x: auto; list-style: none; margin: 0; padding: 0; -webkit-overflow-scrolling: touch; } .cire-agent .page-nav__links li { margin: 0; flex: 0 0 auto; } .cire-agent .page-nav__links a { display: block; padding: 14px 20px; font-size: clamp(0.7rem, 0.67rem + 0.15vw, 0.78rem); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cire-gray-med); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; } .cire-agent .page-nav__links a:hover, .cire-agent .page-nav__links .is-active a { color: var(--cire-black); border-bottom-color: var(--cire-gold); } /* --- bio / about --------------------------------------------------------- */ .cire-agent .agent-content { padding: clamp(30px, 6vw, 54px) 0 clamp(20px, 4vw, 34px); } .cire-agent .agent-content .typography { max-width: 62ch; margin: 0 auto; font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); line-height: 1.8; color: var(--cire-charcoal); } .cire-agent .agent-content .typography p + p { margin-top: 1em; } .cire-agent .agent-content .typography h2, .cire-agent .agent-content .typography h3 { font-family: var(--cire-serif); font-weight: 500; color: var(--cire-black); } .cire-agent .agent-content .typography a { color: var(--cire-charcoal); border-bottom: 1px solid var(--cire-gold); text-decoration: none; } /* --- section headings ---------------------------------------------------- */ .cire-agent .page-section-header__subtitle { font-size: clamp(0.72rem, 0.69rem + 0.15vw, 0.85rem); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cire-black); } .cire-agent .page-section-header__title { font-family: var(--cire-serif); font-weight: 500; font-size: clamp(1.4rem, 1.2rem + 1vw, 1.7rem); color: var(--cire-black); line-height: 1.25; text-transform: none; } /* --- listings band ------------------------------------------------------- */ .cire-agent #listings.listing-grid { background: var(--cire-panel); padding: clamp(34px, 6vw, 60px) 0; } .cire-agent #listings .page-section-header { max-width: 1240px; margin: 0 auto clamp(18px, 3vw, 26px); padding: 0 20px; } .cire-agent #listings .tab-nav a { font-size: clamp(0.68rem, 0.66rem + 0.15vw, 0.78rem); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cire-gray-med); } .cire-agent #listings .tab-nav a[aria-selected="true"] { color: var(--cire-black); border-bottom: 2px solid var(--cire-gold); } .cire-agent .listing-card__price, .cire-agent .listing-grid__card .listing-card__price { font-family: var(--cire-serif); font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.2rem); color: var(--cire-black); font-variant-numeric: tabular-nums; letter-spacing: 0; } .cire-agent .listing-card__address { font-size: clamp(0.85rem, 0.82rem + 0.15vw, 0.9rem); color: var(--cire-charcoal); letter-spacing: 0.01em; text-transform: none; } .cire-agent .listing-card__spec-figure { font-family: var(--cire-serif); color: var(--cire-black); font-variant-numeric: tabular-nums; } .cire-agent .listing-card__spec-label { font-size: clamp(0.58rem, 0.56rem + 0.1vw, 0.66rem); letter-spacing: 0.2em; text-transform: uppercase; color: var(--cire-gray-med); } .cire-agent .listing-grid__card-border { border: 0; background: var(--cire-white); } /* ========================================================================== 04 MYLOGIN DASHBOARD — components/mylogin/index.php (.cire-mylogin) Mockup: account label + serif title, sign-out at the right, a gold-underline tab rail, a card grid of saved homes, a hairline list of saved searches and a panel-grey agent band. ========================================================================== */ .cire-mylogin { background: var(--cire-white); color: var(--cire-charcoal); font-family: var(--cire-sans); letter-spacing: 0.015em; } /* --- dashboard head ------------------------------------------------------ */ .cire-mylogin.mylogin-dash-header { border-bottom: 0; background: var(--cire-white); padding: clamp(26px, 5vw, 44px) 0 4px; } .cire-mylogin .client-name { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 18px; max-width: 1240px; margin: 0 auto; padding: 0 20px; } .cire-mylogin .client-name h4 { font-family: var(--cire-serif); font-weight: 500; font-size: clamp(1.55rem, 1.2rem + 1.7vw, 2.3rem); line-height: 1.2; color: var(--cire-black); margin: 0; text-transform: none; flex: 1 1 auto; } /* The Log Out link is nested inside that h4 by the template. */ .cire-mylogin .client-name h4 a { display: inline-block; font-family: var(--cire-sans); font-size: clamp(0.7rem, 0.67rem + 0.15vw, 0.78rem); font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cire-gray-med); text-decoration: none; border-bottom: 1px solid var(--cire-hairline); margin-left: 14px; vertical-align: middle; } .cire-mylogin .client-name h4 a:hover { color: var(--cire-gold); border-bottom-color: var(--cire-gold); } .cire-mylogin .client-name p { flex: 1 1 100%; margin: 2px 0 0; font-size: clamp(0.78rem, 0.75rem + 0.15vw, 0.85rem); letter-spacing: 0.1em; color: var(--cire-gray-med); } /* --- tab rail ------------------------------------------------------------ */ .cire-mylogin .mobile-tabs-menu { max-width: 1240px; margin: 0 auto; float: none; padding: 0 20px; } .cire-mylogin ul.tabs { display: flex; gap: 0; border: 0; border-bottom: 1px solid var(--cire-hairline); background: transparent; margin: clamp(16px, 3vw, 22px) 0 0; padding: 0; list-style: none; overflow-x: auto; -webkit-overflow-scrolling: touch; } .cire-mylogin ul.tabs .tabs-title { float: none; flex: 0 0 auto; margin: 0; } .cire-mylogin ul.tabs .tabs-title > a { display: block; background: transparent; padding: 13px 18px; font-size: clamp(0.68rem, 0.65rem + 0.15vw, 0.78rem); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cire-gray-med); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; line-height: 1.4; } .cire-mylogin ul.tabs .tabs-title > a:hover { color: var(--cire-black); background: transparent; } .cire-mylogin ul.tabs .tabs-title.is-active > a, .cire-mylogin ul.tabs .tabs-title > a[aria-selected="true"] { color: var(--cire-black); background: transparent; border-bottom-color: var(--cire-gold); } /* The count pips were red; Christie's red is reserved, so they go gold. */ .cire-mylogin .red-new-count, .cire-mylogin .red-count { display: inline-block; background: var(--cire-gold); color: #2c3338; font-size: 0.62em; letter-spacing: 0.14em; padding: 3px 8px; margin-left: 8px; border-radius: 0; vertical-align: middle; line-height: 1.4; } /* The theme swaps in a