/* AZ Law Firm — new-branding overlay for the 1:1 clone. Nothing here edits the original stylesheets. Rules of this pass: · every measurement stays as the live site has it — no padding, margin, font-size, line-height or letter-spacing is touched · every background image and the hero video stay in place; the brand tint rides over them through the token their own overlay already uses · what changes: colour tokens, typeface families, the logo, and the supergraphic Remove the data-brand attribute and the page is the current site again. */ /* ---------------- typefaces from the brand pack ---------------- */ /* Headings: Frank Ruhl Libre (SIL Open Font License, free for commercial web use) stands in for TT Ramillas until the brand partner (Myara) supplies a licensed web font; the trial file must never be served publicly. It was the closest free match on measured glyph shape. size-adjust 104% brings its cap height (660/1000) near TT Ramillas' (700/1000) without widening lines enough to re-wrap headings. To switch back later: change the src line (and drop size-adjust) only. */ @font-face { font-family: 'AZ Display'; src: url(frank-ruhl-libre.woff2) format('woff2-variations'), url(frank-ruhl-libre.woff2) format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; size-adjust: 104%; } @font-face { font-family: 'AZ Text'; src: url(hanken-grotesk.ttf) format('truetype-variations'), url(hanken-grotesk.ttf) format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'AZ Text'; src: url(hanken-grotesk-italic.ttf) format('truetype-variations'); font-weight: 100 900; font-style: italic; font-display: swap; } /* The selector list matters: Elementor redeclares every token on body.elementor-kit-N, so tokens set on alone never reach the page. Until 28 Sep only the per-element sweep in rebrand.js made the palette show, and a sweep only sees resting state, so every :hover/:focus rule kept the old colours (cream-on-cream "View details"). */ html[data-brand="new"], html[data-brand="new"] body[class*="elementor-kit-"] { /* ---------------- colour tokens ---------------- */ /* 48e056c is the colour their own background overlays already use, at their own opacities (0.19 on the hero, 0.46 on the picture sections). Tinting it is what carries the brand across the photography without hiding any of it. */ --e-global-color-primary: #490924 !important; /* was #54474E */ --e-global-color-secondary: #B16D60 !important; /* was #93847F */ --e-global-color-text: #3A3430 !important; /* was #4B5563 */ --e-global-color-accent: #C9954F !important; /* was #BB9C87 */ --e-global-color-339b56c: #141414 !important; /* was #1F2933 */ --e-global-color-48e056c: #E6D8CE !important; /* tan panels + band layers, was #C7BEAD. Same value the sweep paints; photo overlays are washed separately */ --e-global-color-77367b3: #F4EEEA !important; /* page beige, was #F5F6F0 */ --e-global-color-9b6dc2d: #EDE3DB !important; /* second beige, was #F1EBDF */ /* ---------------- typography tokens ---------------- */ --e-global-typography-primary-font-family: 'AZ Display' !important; --e-global-typography-secondary-font-family: 'AZ Text' !important; --e-global-typography-text-font-family: 'AZ Text' !important; --e-global-typography-accent-font-family: 'AZ Text' !important; } /* Elementor writes some font stacks straight into widget CSS rather than through the tokens, so the families are asserted again here. Family only — every size and spacing value still comes from their stylesheet. */ html[data-brand="new"] body, html[data-brand="new"] p, html[data-brand="new"] li, html[data-brand="new"] a, html[data-brand="new"] input, html[data-brand="new"] textarea, html[data-brand="new"] button, html[data-brand="new"] .elementor-widget-text-editor, html[data-brand="new"] .elementor-icon-list-text, html[data-brand="new"] .elementor-button { font-family: 'AZ Text', system-ui, sans-serif !important; } html[data-brand="new"] h1, html[data-brand="new"] h2, html[data-brand="new"] h3, html[data-brand="new"] h4, html[data-brand="new"] h5, html[data-brand="new"] h6, html[data-brand="new"] .elementor-heading-title, html[data-brand="new"] .wpr-promo-box-title, html[data-brand="new"] .wpr-advanced-text, html[data-brand="new"] .wpr-advanced-text-preffix, html[data-brand="new"] .wpr-advanced-text-suffix, html[data-brand="new"] .wpr-anim-text, html[data-brand="new"] .wpr-anim-text-inner, html[data-brand="new"] .elementor-counter-number-wrapper { font-family: 'AZ Display', Georgia, serif !important; } /* ---------------- logo ---------------- */ /* The real SVG lockups. Naming in the source files refers to the wordmark colour, so "Maroon Dark" is for light grounds and "Gold Light" for dark ones; rebrand.js measures the ground and tags each image. Swapped with content:url() because the theme's lazy-loader rewrites img[src] after load. object-fit keeps the new lockup inside the box their CSS already sizes, so the header geometry does not move. */ /* header: the horizontal lockup, 570x141, at 40px tall = 162px wide, with 20px of air on the left. The stacked mark it replaces was narrow enough to sit close to the edge; a wide lockup flush to the edge reads as a cropping mistake. */ html[data-brand="new"] img[data-az-logo][data-az-pos="header"] { content: url(svg/logo-horizontal.svg); height: 40px !important; width: auto !important; margin-left: 20px !important; /* on phones their logo box is 140px with overflow:hidden, so the margin pushed the lockup's last 20px out of it ("AZ LAW FIR"). Capping at the box minus the margin lets object-fit scale the lockup down instead of cropping it. */ max-width: calc(100% - 20px) !important; } html[data-brand="new"] img[data-az-logo="onLight"] { content: url(svg/logo-on-light.svg); } html[data-brand="new"] img[data-az-logo="onDark"] { content: url(svg/logo-on-dark.svg); } /* content:url() would otherwise resize the element to the new file's intrinsic size, which made the header 43px taller. Pinning to the height their own CSS renders keeps the header geometry identical between the two states. */ html[data-brand="new"] img[data-az-logo] { object-fit: contain; object-position: left center; height: 46px !important; width: auto !important; max-width: 100% !important; } /* ---------------- photography ---------------- */ /* Five portraits shot at different times read as a mismatched set. Greyscale unifies them until the firm decides on a session. Nothing else about the images changes: every background photo and the hero video stay as they are. */ html[data-brand="new"] img[src*="profile-"], html[data-brand="new"] [style*="profile-"] { filter: grayscale(1) contrast(1.04); } /* ...but on a lawyer's own profile page (all children of page 1877) the portrait stays in full colour: one person, one photo, nothing to unify against (Haechal, 29 Sep). The team grids keep the greyscale set. */ html[data-brand="new"] body.parent-pageid-1877 img[src*="profile-"], html[data-brand="new"] body.parent-pageid-1877 [style*="profile-"] { filter: none; } /* ---------------- picture sections ---------------- */ /* Their own overlay already sits over each photo and the hero video, and it draws its colour from 48e056c, so the tint above is all that is needed. The only adjustment is opacity, and only where white text would otherwise fail the contrast check — rebrand.js tags those. The image itself is never replaced. */ /* photo-backed blocks: keep the picture, darken their own overlay so the white label passes. The image is never replaced. */ /* photo-backed blocks: see "one veil for every photo and video" below */ /* flat colour bars: these are the section title bars, no image behind them, so they simply become maroon. Same height, same padding, same type size. */ html[data-brand="new"] [data-az-band="flat"] { background-color: #490924 !important; } /* their chevron band, as a mask so it can be painted gold, kept faint over the photograph rather than replacing it */ html[data-brand="new"] [data-az-band] { position: relative; } html[data-brand="new"] [data-az-band="flat"]::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: #C9954F; opacity: .13; -webkit-mask-image: url(svg/supergraphic-band.svg); mask-image: url(svg/supergraphic-band.svg); -webkit-mask-size: auto 150%; mask-size: auto 150%; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-position: center; mask-position: center; } html[data-brand="new"] [data-az-band] > *:not(.elementor-background-overlay) { position: relative; z-index: 1; } /* ---------------- one veil for every photo and video ---------------- Every picture that carries type (home video hero, the inner-page title banners, the "Ready to Discuss" bands) gets the SAME veil: neutral warm charcoal, never maroon, light at the edges and a little deeper only behind the centred text. AZ found the maroon washes heavy and "seram" (29 Sep), so this is lighter than anything the site had. Readability over the brightest photos comes from the soft text shadow below, not from darkening the whole picture. */ html[data-brand="new"] { --az-veil: radial-gradient(ellipse 52% 48% at 50% 55%, rgba(22,18,16,.45) 0%, rgba(22,18,16,0) 100%), linear-gradient(180deg, rgba(22,18,16,.10) 0%, rgba(22,18,16,.28) 100%); } html[data-brand="new"] :is(.elementor-section[data-settings*="background_video"], [data-az-band="photo"], .elementor-element-ffbbccb, .elementor-element-ff9327a, .elementor-element-1d8a578) > .elementor-background-overlay, html[data-brand="new"] [data-az-band="photo"] .elementor-background-overlay, html[data-brand="new"] .elementor-background-overlay[data-az-wash] { background-color: transparent !important; background-image: var(--az-veil) !important; opacity: 1 !important; } /* banners with no overlay child: the veil is layered over their own photo */ html[data-brand="new"] [data-az-wash-inset] { background-image: var(--az-veil), var(--az-bg) !important; } /* Elementor paints these banners' own overlay as a ::before in the old tan (#E6D8CE at 47%), which milks the photo out under the veil. The veil replaces it. */ html[data-brand="new"] [data-az-wash-inset]:not([data-az-accent])::before { background-color: transparent !important; background-image: none !important; } html[data-brand="new"] :is(.elementor-section[data-settings*="background_video"], [data-az-band="photo"], [data-az-wash-inset], .elementor-element-ffbbccb, .elementor-element-ff9327a, .elementor-element-1d8a578) :is(h1,h2,h3,h4,h5,h6,p) { text-shadow: 0 1px 2px rgba(0,0,0,.28), 0 2px 26px rgba(0,0,0,.42); } /* ---------------- closing CTA band ---------------- */ /* The three "Ready to Discuss" bands (Home, About, Practice Area). Their photos are lazy-loaded, so a wash decided in JS could run before the photo existed and leave a pale, unreadable band. Targeted by Elementor id: pure CSS, first paint. */ /* their overlay takes the shared veil (see above) */ /* Their button's own :hover is white on the gold accent (2.66:1). Stated here in plain CSS rather than left to the JS remap, which only catches it when the resting colours are still old: on the live site they already are new, so the gold hover showed through. Hover/focus = white fill, maroon label (13.6:1). */ html[data-brand="new"] :is(.elementor-element-ffbbccb, .elementor-element-ff9327a, .elementor-element-1d8a578) .elementor-button:is(:hover, :focus, :focus-visible), html[data-brand="new"] :is(.elementor-element-ffbbccb, .elementor-element-ff9327a, .elementor-element-1d8a578) .elementor-button:is(:hover, :focus, :focus-visible) * { background-color: #FFFFFF !important; color: #490924 !important; fill: #490924 !important; } /* Framing chevrons, one per gutter, mirrored: < heading >. They live strictly in the side gutters (the text column is ~990px), bleed nothing into the copy, and disappear when the gutter is too narrow to hold them. Replaces the scattered outline graphic, which read as broken shapes over a busy photograph. */ html[data-brand="new"] :is([data-az-accent], .elementor-element-ffbbccb, .elementor-element-ff9327a, .elementor-element-1d8a578) { position: relative; overflow: hidden; } html[data-brand="new"] :is([data-az-accent], .elementor-element-ffbbccb, .elementor-element-ff9327a, .elementor-element-1d8a578)::before, html[data-brand="new"] :is([data-az-accent], .elementor-element-ffbbccb, .elementor-element-ff9327a, .elementor-element-1d8a578)::after { content: ''; position: absolute; top: 50%; z-index: 1; pointer-events: none; height: 62%; aspect-ratio: 683 / 1080; transform: translateY(-50%); background: #C9954F; opacity: .55; -webkit-mask: url(svg/supergraphic-single.svg) no-repeat center / contain; mask: url(svg/supergraphic-single.svg) no-repeat center / contain; } html[data-brand="new"] :is([data-az-accent], .elementor-element-ffbbccb, .elementor-element-ff9327a, .elementor-element-1d8a578)::before { left: 56px; } html[data-brand="new"] :is([data-az-accent], .elementor-element-ffbbccb, .elementor-element-ff9327a, .elementor-element-1d8a578)::after { right: 56px; transform: translateY(-50%) scaleX(-1); } html[data-brand="new"] :is([data-az-accent], .elementor-element-ffbbccb, .elementor-element-ff9327a, .elementor-element-1d8a578) > .elementor-container { position: relative; z-index: 2; } @media (max-width: 1359px) { html[data-brand="new"] :is([data-az-accent], .elementor-element-ffbbccb, .elementor-element-ff9327a, .elementor-element-1d8a578)::before, html[data-brand="new"] :is([data-az-accent], .elementor-element-ffbbccb, .elementor-element-ff9327a, .elementor-element-1d8a578)::after { display: none; } } /* ---------------- contrast repairs ---------------- */ /* Partner cards: the caption was white on tan, 2.3:1. Their tan panel stays, the text goes maroon, 11.2:1. No padding or size changes. */ html[data-brand="new"] [data-az-person] .wpr-promo-box-title, html[data-brand="new"] [data-az-person] .wpr-promo-box-description, html[data-brand="new"] [data-az-person] .wpr-promo-box-content * { color: #490924 !important; } html[data-brand="new"] [data-az-person] .wpr-promo-box-description { opacity: .78; } /* Their VIEW PROFILE is a quiet tonal button, lighter than the panel it sits on. Keep that relationship rather than flattening it to a text link: same box, same padding, a lighter warm ground and a maroon label, 10.8:1. */ html[data-brand="new"] [data-az-person] .wpr-promo-box-btn { color: #490924 !important; background-color: #F7F2EE !important; border-color: #F7F2EE !important; } html[data-brand="new"] [data-az-person] .wpr-promo-box-bg-overlay { background-color: rgba(73,9,36,.12) !important; } /* Team card hover/focus. The old kit turned the caption panel grey-taupe (#A0988B) and tinted the photo olive: off-palette and dull (29 Sep). Now the caption turns maroon with cream type (12.3:1) and the button stays cream with a maroon label; the photo keeps its light maroon tint. [data-az-person] sits on the .wpr-promo-box itself. */ html[data-brand="new"] [data-az-person]:is(:hover, :focus-within) .wpr-promo-box-content { background-color: #490924 !important; } html[data-brand="new"] [data-az-person]:is(:hover, :focus-within) :is(.wpr-promo-box-title, .wpr-promo-box-title *, .wpr-promo-box-description, .wpr-promo-box-description *) { color: #F4EEEA !important; } html[data-brand="new"] [data-az-person]:is(:hover, :focus-within) .wpr-promo-box-description { opacity: .85; } html[data-brand="new"] [data-az-person]:is(:hover, :focus-within) .wpr-promo-box-bg-overlay { background-color: rgba(73,9,36,.12) !important; } html[data-brand="new"] [data-az-person]:is(:hover, :focus-within) .wpr-promo-box-btn, html[data-brand="new"] [data-az-person]:is(:hover, :focus-within) .wpr-promo-box-btn * { background-color: #F7F2EE !important; color: #490924 !important; border-color: #F7F2EE !important; } /* Outlined buttons on light grounds read maroon rather than near-white. */ html[data-brand="new"] [data-az-outline] { color: #490924 !important; border-color: #490924 !important; } /* The contact form's action was tan with a white label, 1.8:1, and it is the one button on the page that has to be found. Maroon ground, beige label, 12.4:1. Its size, padding and type are untouched. */ html[data-brand="new"] .wpcf7-submit, html[data-brand="new"] input[type="submit"] { background-color: #490924 !important; color: #F4EEEA !important; } html[data-brand="new"] .wpcf7-submit:hover, html[data-brand="new"] input[type="submit"]:hover { background-color: #5E0F2F !important; } /* ---------------- gold is decorative, maroon does the work ---------------- The old kit used its tan accent for every functional accent: the active nav item, nav hover, the contact and counter icons, the social tiles. Translating tan to gold one-for-one kept that role, which left the page reading as the old design in a new beige, and gold on a light ground measures 2.1:1. In this identity gold belongs to the supergraphic and the reversed lockup. Maroon is the working colour, so every functional accent below is maroon. */ /* nav: active, hover, focus, and the dropdown items */ html[data-brand="new"] .wpr-nav-menu a.wpr-menu-item.wpr-active-menu-item, html[data-brand="new"] .wpr-nav-menu a.wpr-menu-item:hover, html[data-brand="new"] .wpr-nav-menu a.wpr-menu-item:focus, html[data-brand="new"] .wpr-nav-menu a.wpr-sub-menu-item:hover, html[data-brand="new"] .wpr-nav-menu a.wpr-sub-menu-item:focus, html[data-brand="new"] .wpr-nav-menu a.wpr-sub-menu-item.wpr-active-menu-item, html[data-brand="new"] .elementor-nav-menu a.elementor-item-active, html[data-brand="new"] .elementor-nav-menu a.elementor-item:hover, html[data-brand="new"] .elementor-nav-menu a.elementor-item:focus, html[data-brand="new"] a.elementor-item-active, html[data-brand="new"] li.current-menu-item > a, html[data-brand="new"] li.current_page_item > a { color: #490924 !important; } /* Maroon against the menu's near-black is a quieter difference than gold was, so the active item keeps a rule under it. Inset, so no layout moves. */ html[data-brand="new"] .wpr-nav-menu a.wpr-menu-item.wpr-active-menu-item { box-shadow: inset 0 -2px 0 0 #490924; } /* icons: maroon glyph, their own pale circle kept. 12.3:1 on the contact panel against gold's 2.1:1. */ html[data-brand="new"] .elementor-icon, html[data-brand="new"] .elementor-icon i, html[data-brand="new"] .elementor-icon svg, html[data-brand="new"] .elementor-icon svg * { color: #490924 !important; fill: #490924 !important; } /* Icon ink is decided in rebrand.js by measuring each icon's own ground. The ancestor-based rule that used to live here lightened every icon inside a maroon band, which made the Careers icons vanish inside their white circles. */ /* the footer's contact-info icons are font-icon SVGs sitting outside .elementor-icon, so they need naming separately */ html[data-brand="new"] .elementor-icon-list-icon, html[data-brand="new"] .elementor-icon-list-icon svg, html[data-brand="new"] .elementor-icon-list-icon svg * { color: #490924 !important; fill: #490924 !important; } html[data-brand="new"] [data-az-band] .elementor-icon-list-icon, html[data-brand="new"] [data-az-band] .elementor-icon-list-icon svg, html[data-brand="new"] [data-az-band] .elementor-icon-list-icon svg * { color: #F4EEEA !important; fill: #F4EEEA !important; } /* mobile menu: the active item is a filled pill, gold in the old kit */ html[data-brand="new"] a.wpr-mobile-menu-item.wpr-active-menu-item { background-color: #490924 !important; color: #F4EEEA !important; } /* footer social tiles: maroon tile, light glyph, same rule as everything else */ html[data-brand="new"] a.elementor-social-icon, html[data-brand="new"] .elementor-social-icon { background-color: #490924 !important; color: #F4EEEA !important; } html[data-brand="new"] a.elementor-social-icon svg, html[data-brand="new"] a.elementor-social-icon svg * { fill: #F4EEEA !important; } /* ---------------- recognition strip ---------------- */ /* AZ asked for the ALB badge on the site. New state only, above the footer, wording kept literal: Finalist, not winner. */ /* Bigger and more present, but still quiet: one badge, one gold hairline, one serif line. No "award-winning", no gold fill, no animation. The wording stays literal: Finalist, and the organiser named plainly. */ html[data-brand="new"] #az-alb { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 28px 24px; background: #EDE3DB; border-bottom: 1px solid #DFD3C9; font-family: 'AZ Text', system-ui, sans-serif; } html[data-brand="new"] #az-alb img { width: 80px; height: 80px; flex-shrink: 0; } html[data-brand="new"] #az-alb .az-alb-rule { width: 1px; height: 48px; background: #C9954F; flex-shrink: 0; } html[data-brand="new"] #az-alb .az-alb-text { display: flex; flex-direction: column; gap: 2px; } /* the medal already says it: two lines read cleaner than three (29 Sep) */ html[data-brand="new"] #az-alb .az-alb-eyebrow { display: none; } html[data-brand="new"] #az-alb .az-alb-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #490924; } html[data-brand="new"] #az-alb p { margin: 0; } html[data-brand="new"] #az-alb .az-alb-title { /* !important: the sitewide p rule sets AZ Text with !important */ font-family: 'AZ Display', Georgia, serif !important; font-size: 28px; line-height: 1.2; font-weight: 400; color: #490924; } html[data-brand="new"] #az-alb .az-alb-meta { font-size: 14px; line-height: 1.5; color: #5E5550; } @media (max-width: 767px) { /* side by side on phones too: half the height of the stacked version */ html[data-brand="new"] #az-alb { justify-content: flex-start; gap: 16px; padding: 20px; } html[data-brand="new"] #az-alb img { width: 64px; height: 64px; } html[data-brand="new"] #az-alb .az-alb-rule { display: none; } html[data-brand="new"] #az-alb .az-alb-title { font-size: 19px; line-height: 1.25; } html[data-brand="new"] #az-alb .az-alb-meta { font-size: 13px; } } html[data-brand="current"] #az-alb { display: none; } /* ---------------- toggle ---------------- */ .brandswitch { position: fixed; right: 20px; bottom: 20px; z-index: 99999; display: flex; padding: 4px; border-radius: 999px; background: #fff; border: 1px solid #DED8D0; box-shadow: 0 10px 30px -12px rgba(0,0,0,.3); font-family: 'AZ Text', system-ui, sans-serif; } .brandswitch button { font: inherit; font-size: 13px; font-weight: 500; line-height: 1; border: 0; cursor: pointer; padding: 10px 16px; border-radius: 999px; background: transparent; color: #6b6b6b; transition: background 160ms cubic-bezier(.23,1,.32,1), color 160ms cubic-bezier(.23,1,.32,1); } .brandswitch button[aria-pressed="true"] { background: #490924; color: #fff; } html[data-brand="current"] .brandswitch button[aria-pressed="true"] { background: #54474E; } .brandswitch button:active { transform: scale(.97); } @media (prefers-reduced-motion: reduce) { .brandswitch button { transition: none; } } /* ---------------- context inks ---------------- rebrand.js decides these from the ground it measures, but writes attributes, not inline !important styles: inline !important beats every :hover and :focus rule, which is how a button kept cream text on a cream hover fill. */ html[data-brand="new"] [data-az-washink~="text"] { color: #F4EEEA !important; } html[data-brand="new"] [data-az-washink~="outline"] { border-color: #F4EEEA !important; } html[data-brand="new"] [data-az-ink="light"], html[data-brand="new"] [data-az-ink="light"] * { color: #F4EEEA !important; fill: #F4EEEA !important; } html[data-brand="new"] [data-az-ink="maroon"], html[data-brand="new"] [data-az-ink="maroon"] * { color: #490924 !important; fill: #490924 !important; } html[data-brand="new"] [data-az-gold], html[data-brand="new"] [data-az-gold] * { color: #490924 !important; fill: #490924 !important; } /* ---------------- interactive states ---------------- Every state is designed, not inherited. Outlined buttons on dark cards fill cream on hover/focus with maroon ink (12.3:1); keyboard focus also gets a ring. */ /* Practice-area cards = the "cover" promo boxes (team cards are "classic"). Their whole treatment is plain CSS, no JS timing: the button label is a span with its own inline colour from the sweep, so styling only the left two of three labels dark on maroon whenever the JS re-ink had not reached them. Descendants are named explicitly for that reason. */ html[data-brand="new"] .wpr-promo-box-style-cover .wpr-promo-box-bg-overlay { background-color: #490924 !important; background-image: none !important; opacity: .88 !important; } html[data-brand="new"] .wpr-promo-box-style-cover :is(.wpr-promo-box-title, .wpr-promo-box-title *, .wpr-promo-box-description, .wpr-promo-box-description *) { color: #F4EEEA !important; } html[data-brand="new"] .wpr-promo-box-style-cover .wpr-promo-box-btn, html[data-brand="new"] .wpr-promo-box-style-cover .wpr-promo-box-btn * { color: #F4EEEA !important; } html[data-brand="new"] .wpr-promo-box-style-cover .wpr-promo-box-btn { background-color: transparent !important; border-color: rgba(244, 238, 234, .7) !important; } html[data-brand="new"] .wpr-promo-box-style-cover .wpr-promo-box:hover .wpr-promo-box-btn, html[data-brand="new"] .wpr-promo-box-style-cover .wpr-promo-box .wpr-promo-box-btn:focus-visible, html[data-brand="new"] .wpr-promo-box:hover .wpr-promo-box-btn, html[data-brand="new"] .wpr-promo-box .wpr-promo-box-btn:focus-visible { background-color: #F4EEEA !important; border-color: #F4EEEA !important; color: #490924 !important; } html[data-brand="new"] .wpr-promo-box-style-cover .wpr-promo-box:hover .wpr-promo-box-btn *, html[data-brand="new"] .wpr-promo-box-style-cover .wpr-promo-box .wpr-promo-box-btn:focus-visible *, html[data-brand="new"] .wpr-promo-box:hover .wpr-promo-box-btn *, html[data-brand="new"] .wpr-promo-box .wpr-promo-box-btn:focus-visible * { color: #490924 !important; } html[data-brand="new"] a:focus-visible, html[data-brand="new"] button:focus-visible, html[data-brand="new"] [role="tab"]:focus-visible { outline: 2px solid #C9954F !important; outline-offset: 2px !important; } /* Profile tabs (Overview / Experience). Maroon does the work, gold stays decorative: inactive = maroon text on the page ground (15.3:1), hover = the second beige under it, active = solid maroon with cream text (15.3:1). The kit filled hover with gold behind rose text, 1.5:1. */ html[data-brand="new"] .e-n-tab-title { color: #490924 !important; background: transparent !important; border-color: #DFD3C9 !important; } html[data-brand="new"] .e-n-tab-title * { color: inherit !important; fill: currentColor !important; } html[data-brand="new"] .e-n-tab-title[aria-selected="false"]:hover { background: #EDE3DB !important; } html[data-brand="new"] .e-n-tab-title[aria-selected="true"] { background: #490924 !important; color: #F4EEEA !important; border-color: #490924 !important; } /* Article share buttons: the kit used each network's colour (WhatsApp green, Telegram blue) behind a white glyph, 2.0 and 2.8:1. One maroon tile for all, darker on hover; the network is still named by its glyph and aria-label. */ html[data-brand="new"] .elementor-share-btn { background-color: #490924 !important; } html[data-brand="new"] .elementor-share-btn:hover, html[data-brand="new"] .elementor-share-btn:focus-visible { background-color: #2B0515 !important; } html[data-brand="new"] .elementor-share-btn * { color: #F4EEEA !important; fill: #F4EEEA !important; } /* Previous / next post arrows were gold on white, 2.7:1 */ html[data-brand="new"] .wpr-posts-navigation-svg-wrapper svg, html[data-brand="new"] .wpr-posts-navigation-svg-wrapper svg * { fill: #490924 !important; }