.elementor-kit-7{--e-global-color-primary:#1A4348;--e-global-color-secondary:#259596;--e-global-color-text:#2D2926;--e-global-color-accent:#B8DCFC;--e-global-color-bc28358:#F5F5F4;--e-global-color-3dd68a6:#888B8D;--e-global-color-946f83a:#FFFFFF;--e-global-color-3ec36ff:#B8DCFC30;--e-global-typography-primary-font-family:"utile-display";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Circular";--e-global-typography-accent-font-weight:500;--e-global-typography-4eee4f7-font-family:"Circular";--e-global-typography-4eee4f7-font-size:16px;--e-global-typography-4eee4f7-font-weight:700;--e-global-typography-4eee4f7-text-transform:uppercase;--e-global-typography-4eee4f7-letter-spacing:1.6px;--e-global-typography-cd11b38-font-family:"Circular";--e-global-typography-cd11b38-font-size:16px;--e-global-typography-cd11b38-font-weight:700;--e-global-typography-cd11b38-text-transform:uppercase;--e-global-typography-cd11b38-line-height:1.22em;--e-global-typography-cd11b38-letter-spacing:2px;--e-global-typography-1976b2a-font-family:"utile-display";--e-global-typography-1976b2a-font-size:clamp(46px, 3.43vw, 68px);--e-global-typography-1976b2a-font-weight:500;--e-global-typography-1976b2a-line-height:1.12em;--e-global-typography-1976b2a-letter-spacing:-0.2px;--e-global-typography-1379a02-font-family:"Circular";--e-global-typography-1379a02-font-size:18px;--e-global-typography-1379a02-font-weight:400;--e-global-typography-ad3ac6f-font-family:"Circular";--e-global-typography-ad3ac6f-font-size:18px;--e-global-typography-ad3ac6f-font-weight:700;--e-global-typography-ad3ac6f-text-transform:uppercase;--e-global-typography-ad3ac6f-text-decoration:underline;--e-global-typography-ad3ac6f-line-height:24px;--e-global-typography-ad3ac6f-letter-spacing:10%;--e-global-typography-747b21a-font-family:"Circular";--e-global-typography-747b21a-font-size:16px;--e-global-typography-747b21a-font-weight:600;--e-global-typography-747b21a-letter-spacing:10%;--e-global-typography-7f82bcc-font-family:"utile-display";--e-global-typography-7f82bcc-font-size:clamp(56px, 4.85vw, 96px);--e-global-typography-7f82bcc-font-weight:500;--e-global-typography-7f82bcc-line-height:105%;--e-global-typography-503149d-font-family:"Circular";--e-global-typography-503149d-font-size:18px;--e-global-typography-503149d-font-weight:400;--e-global-typography-503149d-line-height:27px;--e-global-typography-9c2291f-font-family:"utile-display";--e-global-typography-9c2291f-font-size:32px;--e-global-typography-9c2291f-font-weight:500;--e-global-typography-9c2291f-line-height:1em;--e-global-typography-eafb31e-font-family:"utile-display";--e-global-typography-eafb31e-font-size:28px;--e-global-typography-eafb31e-font-weight:500;--e-global-typography-eafb31e-line-height:1.29em;--e-global-typography-1961070-font-family:"utile-display";--e-global-typography-1961070-font-size:24px;--e-global-typography-1961070-font-weight:500;--e-global-typography-1961070-line-height:1.33em;--e-global-typography-c0aac55-font-family:"Circular";--e-global-typography-c0aac55-font-size:24px;--e-global-typography-c0aac55-font-weight:500;--e-global-typography-c0aac55-line-height:1.25em;--e-global-typography-cefoti4-font-family:"utile-display";--e-global-typography-cefoti4-font-size:clamp(38px, 2.63vw, 52px);--e-global-typography-cefoti4-font-weight:500;--e-global-typography-cefoti4-line-height:1.08em;--e-global-typography-cefoti4-letter-spacing:-0.2px;--e-global-typography-4g5xuqo-font-family:"utile-display";--e-global-typography-4g5xuqo-font-size:clamp(34px, 2.42vw, 48px);--e-global-typography-4g5xuqo-font-weight:500;--e-global-typography-4g5xuqo-line-height:1.21em;--e-global-typography-0samgl4-font-family:"utile-display";--e-global-typography-0samgl4-font-size:clamp(32px, 2.22vw, 44px);--e-global-typography-0samgl4-font-weight:500;--e-global-typography-0samgl4-line-height:1.2em;--e-global-typography-3wl86pk-font-family:"Circular";--e-global-typography-3wl86pk-font-size:16px;--e-global-typography-3wl86pk-font-weight:700;--e-global-typography-3wl86pk-text-transform:uppercase;--e-global-typography-3wl86pk-line-height:1.25em;--e-global-typography-3wl86pk-letter-spacing:2px;--e-global-typography-l0i7x6n-font-family:"Circular";--e-global-typography-l0i7x6n-font-size:16px;--e-global-typography-l0i7x6n-font-weight:400;--e-global-typography-l0i7x6n-line-height:1.5em;--e-global-typography-sdisp01-font-family:"playfair-display";--e-global-typography-sdisp01-font-size:68px;--e-global-typography-sdisp01-font-weight:500;--e-global-typography-hdrnav1-font-family:"Circular";--e-global-typography-hdrnav1-font-size:16px;--e-global-typography-hdrnav1-font-weight:500;--e-global-typography-hdrnav1-text-transform:uppercase;--e-global-typography-hdrnav1-letter-spacing:2px;font-family:"Circular", Sans-serif;}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{background-color:var( --e-global-color-primary );font-family:var( --e-global-typography-4eee4f7-font-family ), Sans-serif;font-size:var( --e-global-typography-4eee4f7-font-size );font-weight:var( --e-global-typography-4eee4f7-font-weight );text-transform:var( --e-global-typography-4eee4f7-text-transform );letter-spacing:var( --e-global-typography-4eee4f7-letter-spacing );color:var( --e-global-color-946f83a );border-style:solid;border-width:2px 2px 2px 2px;border-color:var( --e-global-color-primary );border-radius:35px 35px 35px 35px;padding:20px 60px 20px 60px;}.elementor-kit-7 button:hover,.elementor-kit-7 button:focus,.elementor-kit-7 input[type="button"]:hover,.elementor-kit-7 input[type="button"]:focus,.elementor-kit-7 input[type="submit"]:hover,.elementor-kit-7 input[type="submit"]:focus,.elementor-kit-7 .elementor-button:hover,.elementor-kit-7 .elementor-button:focus{background-color:var( --e-global-color-secondary );color:var( --e-global-color-946f83a );border-style:solid;border-width:2px 2px 2px 2px;border-color:var( --e-global-color-secondary );border-radius:35px 35px 35px 35px;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 h1{font-family:"utile-display", Sans-serif;}.elementor-kit-7 h2{font-family:"utile-display", Sans-serif;}.elementor-kit-7 h3{font-family:"utile-display", Sans-serif;}.elementor-kit-7 h4{font-family:"utile-display", Sans-serif;}.elementor-kit-7 h5{font-family:"utile-display", Sans-serif;}.elementor-kit-7 h6{font-family:"utile-display", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{font-size:var( --e-global-typography-4eee4f7-font-size );letter-spacing:var( --e-global-typography-4eee4f7-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7{--e-global-typography-1976b2a-font-size:40px;--e-global-typography-1976b2a-line-height:1.12em;--e-global-typography-ad3ac6f-font-size:16px;--e-global-typography-ad3ac6f-line-height:22px;--e-global-typography-7f82bcc-font-size:46px;--e-global-typography-7f82bcc-line-height:105%;--e-global-typography-9c2291f-font-size:25px;--e-global-typography-eafb31e-font-size:22px;--e-global-typography-cefoti4-font-size:30px;--e-global-typography-4g5xuqo-font-size:28px;--e-global-typography-0samgl4-font-size:28px;--e-global-typography-hdrnav1-font-size:14px;}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{font-size:var( --e-global-typography-4eee4f7-font-size );letter-spacing:var( --e-global-typography-4eee4f7-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* Playfair Display now comes from the Adobe Fonts kit (family name "playfair-display") */
.italic-word,
#service .elementor-icon-list-item.is-active .elementor-icon-list-text,
#service .elementor-icon-list-item:hover .elementor-icon-list-text{
font-family: "playfair-display", "Playfair Display", serif !important;
}
.arrow {
font-family: utile-display, sans-serif;
font-size: 21px;
color: var(--e-global-color-secondary, #259596);
padding-left: 5px;
vertical-align: 2.5px;
display: inline-block; /* transform does nothing on an inline element */
transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
/* ===================================================================
COR — category tile hover
Site Settings → Custom CSS. Pairs with the `cor-cat-card` class that
COR-browse-by-category.json already puts on each tile container.
Timings match cor-product-browser.css so both grids move identically.
=================================================================== */
a:hover .arrow { transform: translateX(10px); } /* NB: applies to every link site-wide */
/* ===================================================================
COR — card hover, the shared behaviour
Elementor → Site Settings → Custom CSS.
REPLACES the ".cor-cat-card" block you pasted in for the Products
category tiles. Nothing else in your Custom CSS changes, and the
Products tiles keep behaving exactly as they do now — their class is
still in the .elementor-kit-7 list.
Any card, anywhere on the site, gets this by doing two things in the
editor, both on the card's CONTAINER (not on a widget inside it):
Layout → Link the card's destination
Advanced → CSS Classes cor-hovercard
Then on hover: the picture lifts, the title goes Agave, and the little
→ nudges right. The arrow comes from the ".arrow" rule you already
have — it fires on any link, so it needs nothing added here.
One rule when you do this: nothing INSIDE the card may be a link any
more. An inside an is invalid, and the browser closes the outer
one early and throws the rest of the card outside it — the card stops
being clickable and every rule below stops matching. So the title and
the Learn More line are plain text; the container is the only link.
=================================================================== */
.cor-cat-card .elementor-widget-image,
.cor-hovercard .elementor-widget-image { overflow: hidden; border-radius: 10px; }
.cor-cat-card img,
.cor-hovercard img { transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.cor-cat-card:hover img,
.cor-hovercard:hover img { transform: scale(1.03); }
/* Declared on the resting state, not on :hover, so the colour fades both ways. */
.cor-cat-card .elementor-heading-title,
.cor-hovercard .elementor-heading-title { transition: color .25s ease; }
/* !important because Elementor's per-widget colour .elementor-kit-7 is four classes
deep and outranks this one. */
.cor-cat-card:hover .elementor-heading-title,
.cor-hovercard:hover .elementor-heading-title { color: #259596 !important; }
/* `.arrow` is in here because the block you removed had it: the arrow's own
rule lives elsewhere in your Custom CSS and is untouched, but its
reduced-motion opt-out was inside the card block and would otherwise have
been lost with it. The nudge still happens for these visitors, it just does
not slide. */
@media (prefers-reduced-motion: reduce) {
.arrow,
.cor-cat-card img, .cor-hovercard img,
.cor-cat-card .elementor-heading-title,
.cor-hovercard .elementor-heading-title { transition: none; }
.cor-cat-card:hover img, .cor-hovercard:hover img { transform: none; }
}
/* ===================================================================
COR — Products page, sections 5 and 6
Site Settings → Custom CSS. This is IN ADDITION to cor-card-hover.css
you already pasted in — nothing here repeats that file.
Two blocks, both of them things Elementor has no control for:
changing a font family on hover, and styling two different kinds of
text inside one Text Editor widget.
=================================================================== */
/* --- Featured Brands list (section 5) -------------------------------
The hovered brand switches to Playfair italic and an arrow slides in.
Elementor's Icon List can change text colour on hover but not family,
size or style, so this is the same shape as the existing #service rule
on the homepage Solutions list. */
#featured-brands .elementor-icon-list-item .elementor-icon-list-text {
transition: color .25s ease;
}
#featured-brands .elementor-icon-list-item:hover .elementor-icon-list-text {
font-family: "playfair-display", "Playfair Display", serif !important;
font-style: italic;
font-size: 40px;
letter-spacing: 1px;
color: #259596 !important;
}
/* The arrow is a pseudo-element rather than markup in each list item, so
there is nothing to keep in sync if the brand list changes. It has to
restate font-family and font-style or it inherits the italic Playfair
from the rule above. */
#featured-brands .elementor-icon-list-item .elementor-icon-list-text::after {
content: "\2192";
font-family: utile-display, sans-serif;
font-style: normal;
font-size: 40px;
letter-spacing: 4px;
color: #259596;
display: inline-block;
margin-left: 18px;
opacity: 0;
transform: translateX(-10px);
transition: opacity .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
#featured-brands .elementor-icon-list-item:hover .elementor-icon-list-text::after {
opacity: 1;
transform: translateX(0);
}
/* --- All Brands columns (section 6) ---------------------------------
203 names and 23 letter headings live in four Text Editor widgets. A
Text Editor applies one typography to everything inside it, so the two
kinds of line are separated by class instead — the alternative is 46
widgets, which is miserable to edit. */
.cor-brand-letter {
font-family: utile-display, sans-serif;
font-weight: 500;
font-size: 32px;
line-height: 2;
color: #1A4348;
margin: 0;
}
.cor-brand {
font-family: "Circular", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 35px;
color: #1A4348;
margin: 0;
}
.cor-brand a { color: inherit; text-decoration: none; transition: color .25s ease; }
.cor-brand a:hover { color: #259596; }
@media (prefers-reduced-motion: reduce) {
#featured-brands .elementor-icon-list-text,
#featured-brands .elementor-icon-list-text::after,
.cor-brand a { transition: none; }
}
/* ===================================================================
COR — carousel arrows in Utile
Site Settings → Custom CSS.
Elementor renders the carousel's prev/next as an inline eicon SVG
(a chevron), and the icon control only accepts an icon library or an
uploaded SVG — there is no "use this character" option. So the arrows
are done the same way as every other arrow on this site: hide the
glyph Elementor drew and print the real one.
The colour is deliberately NOT set here. Elementor puts
--e-n-carousel-arrow-normal-color / -hover-color onto the button as its
`color`, and ::after inherits that — so the widget's own Normal and
Hover colour pickers keep working, and the hover transition comes free.
=================================================================== */
.elementor-widget-n-carousel .elementor-swiper-button svg {
display: none;
}
.elementor-widget-n-carousel .elementor-swiper-button::after {
font-family: utile-display, sans-serif;
font-weight: 400;
/* Matches the widget's Arrows Size, which is 36 on these pages. If you
change it in the panel, change it here too — the icon size control
drives an SVG width that no longer exists. */
font-size: 36px;
line-height: 1;
display: block;
}
.elementor-widget-n-carousel .elementor-swiper-button-prev::after { content: "\2190"; }
.elementor-widget-n-carousel .elementor-swiper-button-next::after { content: "\2192"; }
/* ---------------------------------------------------------------------------
About photo heroes — mobile only
Site Settings → Custom CSS. Nothing to re-import.
The green panel is pinned to the bottom of the photo and is 280px tall on
mobile against a 380px picture, so it covered all but ~140px of it. Below
768 the photograph now gets a 340px band of its own and the panel starts
underneath, its rounded top-right corner still cutting back up into the
picture — the peek stays, the photo is no longer a sliver.
Scoped to the About pages by id on purpose: the industry heroes carry the
same `#page-hero` id but much taller panels, and they want their own
treatment in the mobile pass rather than this one by accident. Add an id to
the list below when a new About page is built. (Careers, 2928, left the list
on 25 Sep: its hero has no photo now.)
--------------------------------------------------------------------------- */
@media (max-width: 767px) {
:is(.page-id-2911, .page-id-2920, .page-id-2921, .page-id-2922,
.page-id-2923, .page-id-2924, .page-id-2925, .page-id-2926) #page-hero {
padding-bottom: 0;
}
:is(.page-id-2911, .page-id-2920, .page-id-2921, .page-id-2922,
.page-id-2923, .page-id-2924, .page-id-2925, .page-id-2926) #page-hero > .e-con {
justify-content: flex-start;
padding-top: 340px;
}
:is(.page-id-2911, .page-id-2920, .page-id-2921, .page-id-2922,
.page-id-2923, .page-id-2924, .page-id-2925, .page-id-2926) #page-hero > .e-con > .e-con {
margin-bottom: 0;
}
}
a.footeremail {
color: #fff;
text-decoration: none;
}
a.footeremail:hover {
color: #B8DCFC;
text-decoration: underline;
transition-duration: .5s;
}
/* ============================================================ ADD ONLY ==
Append this to the END of Site Settings → Custom CSS. Do not replace
what is already there — the existing block also carries the `.arrow`
definition, the `a:hover .arrow` nudge and the `.cor-brand` line-card
rules, none of which are repeated here.
This adds two card families to the hover that Products, Solutions,
Legal and the search results already have:
.cor-post-card Insights — picture is an Image widget
.cor-card Portfolio index — picture is a *background*
Neither needs anything changed in a template. The arrow needs nothing
either: both draw it as a `::after` that already has its own nudge.
======================================================================= */
/* ---- Insights cards --------------------------------------------------- */
.cor-post-card .elementor-widget-image { overflow: hidden; border-radius: 10px; }
.cor-post-card img { transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.cor-post-card:hover img { transform: scale(1.03); }
/* ---- Related Page cards ------------------------------------------------ */
/* Same lift as the Insights card, and for the same reason: this family
renders its picture as an ![]()
inside an image widget, so the crop has to
be on the widget. (.cor-card__media::before above is the background-image
variant used by the project cards — no rule about `img` can reach that.) */
.cor-card--related .elementor-widget-image { overflow: hidden; border-radius: 10px; }
.cor-card--related .elementor-widget-image img { transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.cor-card--related:hover .elementor-widget-image img { transform: scale(1.03); }
.cor-post-card .cor-post-card__title .elementor-heading-title { transition: color .25s ease; }
.cor-post-card:hover .cor-post-card__title .elementor-heading-title { color: #259596 !important; }
/* ---- Portfolio index cards -------------------------------------------- */
/* The picture is a background on .cor-card__media, so no rule about `img`
can reach it. This pseudo-element inherits that background and is the
thing that scales; .cor-card__media is already position:relative with
overflow:hidden and a 10px radius, so it crops the lift for free. */
.cor-card .cor-card__media::before {
content: "";
position: absolute;
inset: 0;
background: inherit;
background-color: transparent;
transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.cor-card:hover .cor-card__media::before { transform: scale(1.03); }
.cor-card .cor-card__title,
.cor-card .cor-card__title .elementor-heading-title { transition: color .25s ease; }
.cor-card:hover .cor-card__title,
.cor-card:hover .cor-card__title .elementor-heading-title { color: #259596 !important; }
/* ---- Reduced motion, for the two new families ------------------------- */
@media (prefers-reduced-motion: reduce) {
.cor-post-card img,
.cor-card--related .elementor-widget-image img,
.cor-card .cor-card__media::before,
.cor-post-card .cor-post-card__title .elementor-heading-title,
.cor-card .cor-card__title { transition: none; }
.cor-post-card:hover img,
.cor-card--related:hover .elementor-widget-image img,
.cor-card:hover .cor-card__media::before { transform: none; }
}
/* The site arrow, drawn by CSS so nothing lives in the Title field. */
.cor-arrow-title .elementor-heading-title::after {
/* CS-229/CS-233 (23 Sep): inline, led by a no-break space, so the arrow can
never wrap onto a line of its own — it takes the last word with it. As an
inline-block it was a break opportunity. Inline boxes ignore transform, so
the hover nudge moves it with position:relative + left instead. */
content: "\00a0\2192";
font-family: utile-display, sans-serif;
font-size: 21px;
color: var(--e-global-color-secondary, #259596);
padding-left: 0;
vertical-align: 2.5px;
display: inline;
position: relative;
left: 0;
transition: left .35s cubic-bezier(.22, 1, .36, 1);
}
a:hover .cor-arrow-title .elementor-heading-title::after { left: 10px; }
@media (prefers-reduced-motion: reduce) {
.cor-arrow-title .elementor-heading-title::after { transition: none; }
a:hover .cor-arrow-title .elementor-heading-title::after { left: 0; }
}
.cor-card__titlerow {
padding-bottom: 10px;
margin-bottom: -10px;
}
/* ============================================== DEFAULT LINK COLOUR ==
Hello Elementor's reset.css sets a { color: #C36 } — magenta. Any link
that does not set its own colour inherits it: card links, footer nav, the
skip link. Agave instead, so a stray one reads as brand.
Set here rather than in the theme file, which a theme update would replace.
==================================================================== */
a { color: var(--e-global-color-secondary, #259596); }
/* Card links wrap a whole block, so they take the colour around them and let
the heading and copy inside keep their own. */
.cor-hovercard,
.cor-cat-card,
.cor-card,
.cor-post-card,
.cor-prj-card { color: inherit; }
/* ---------- text links (global typography ad3ac6f) — 15 Sep ---------- */
/* Every button on that typography now carries `cor-textlink` (71 of them, added by
script across 37 posts). The underline is the typography's own text-decoration —
no text link should draw one with a border. Several had been given a 1px WHITE
bottom border as well: invisible against the page, it appeared as a second line
4px lower the moment hover turned it agave. Those border widths are now 0 in the
widgets themselves, so this file does not have to fight them.
The base letter-spacing restates the global 10% as .1em so the hover interpolates
between two lengths rather than a percentage and a length — if the global
typography's tracking ever changes, change it here too.
!important is needed on both: Elementor emits each widget's typography at
`.elementor-NNNN .elementor-element.elementor-element-XXX .elementor-button`, which is
(0,4,0) and outranks this rule's (0,3,0). Without it the base stayed at 10% and the
hover never fired at all. */
.cor-textlink .elementor-button{
letter-spacing: .1em !important;
transition: letter-spacing .25s ease;
}
.cor-textlink .elementor-button:hover,
.cor-textlink .elementor-button:focus-visible{
letter-spacing: .14em !important;
}
@media (prefers-reduced-motion: reduce){
.cor-textlink .elementor-button{ transition: none; }
}
/* ---------- search field clear button — 16 Sep ---------- */
/* The X that clears a search field is Chrome's own ::-webkit-search-cancel-button,
not markup: there is no element in the DOM to select, and it only appears once
the field holds a value and has focus or the pointer. Chrome drew it about 12px
in its own blue, which read as a stray browser artifact sitting inside a 78px
COR field. appearance:none removes the UA glyph; the mask then paints our own X,
which is why background-color is what carries the colour here. Firefox draws no
cancel button at all, so there is nothing to match there.
Scoped to input[type="search"] on purpose, not to the results-page widget: the
same native button shows up in the header search and the push menu. */
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
cursor: pointer;
background-color: #1A4348; /* Midnight Green */
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 5 19 19M19 5 5 19'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 5 19 19M19 5 5 19'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
/* CS-134, CS-143 — preview copy that gets cut now says so.
Elementor Pro trims the Post Excerpt tag by word count and appends nothing
(ElementorPro\Core\Utils::trim_words slices the words and implodes them), so
card copy just stopped mid-sentence: "... effective January 14, 2026, an
important". The word-count trim has been removed from both loop templates and
the clamp below does the cutting instead, which puts a real ellipsis at the
break and leaves an excerpt that already fits alone. Line counts match what
the cards were showing before: 3 on an Insight card, 2 on a Related Page card.
These widgets carry no .elementor-widget-container (optimized markup is on),
so the clamp goes on the widget itself. */
.cor-card--insight .elementor-widget-text-editor,
.cor-card--related .elementor-widget-text-editor {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cor-card--insight .elementor-widget-text-editor { -webkit-line-clamp: 3; line-clamp: 3; }
.cor-card--related .elementor-widget-text-editor { -webkit-line-clamp: 2; line-clamp: 2; }
/* CS-177 — the About hero eyebrow, breaking before it reaches the curve.
The Midnight panel on /about/ has a 100px top-right radius, far bigger than
any other hero (the rest are 40-50px). The eyebrow sits 42px below the panel
top, where a 100px arc is still cutting 19px in from the nominal right edge,
and "CREATIVE OFFICE RESOURCES" is 286px against a 289px content box. So it
just fits on one line and grazes the corner.
Measured per line with Range.getClientRects() rather than the element box,
which is block-level and says nothing about where the glyphs end:
320px -> 2 lines, 53px clear 390px -> 1 line, 5px clear
360px -> 2 lines, 93px clear 480px -> 1 line, 95px clear
The bad band is roughly 376-450px, which is every current iPhone in portrait.
Below it the panel is narrow enough to wrap on its own; above it there is room.
200px sits between "CREATIVE OFFICE" (168px) and the full string (286px), so
the break lands after "OFFICE" on every phone instead of only the narrow ones.
Capped at 479px so tablets, which have the room, keep the single line. */
@media (max-width: 479px){
.cor-eyebrow--wrap-early .elementor-heading-title,
.cor-eyebrow--wrap-early{ max-width: 200px; }
}
/* Partner logo tiles (Interior Construction, and any page using .cor-logo-slot).
The slot was already built to take its logo as a background — contain,
centred, no-repeat — so the logo goes in as a background image and the tile
keeps its white ground, 1px border and 10px radius.
background-origin is the operative line: padding alone does NOT inset a
background, because the default origin is padding-box, so without this the
artwork runs to the border. */
.cor-logo-slot{
background-origin: content-box;
padding: 22px 26px;
}
/* ---------- text links on HEADINGS inside a linked card — 23 Sep ---------- */
/* Some "Learn More" links are not buttons: they are heading widgets inside a
card whose whole container is the (the /solutions/ hovercards). They carry
the same global typography (ad3ac6f) and the same cor-textlink class, and get
the same hover as the buttons above: tracking .1em → .14em, Agave → Midnight.
The hover keys on the enclosing link, since that is what the pointer is over.
Colour needs !important and (0,3,1) to beat the kit's
.cor-hovercard:hover .elementor-heading-title { color: Agave !important } (0,3,0). */
.cor-textlink .elementor-heading-title{
letter-spacing: .1em !important;
transition: letter-spacing .25s ease, color .25s ease;
}
a:hover .cor-textlink .elementor-heading-title,
a:focus-visible .cor-textlink .elementor-heading-title{
letter-spacing: .14em !important;
color: #1A4348 !important;
}
/* …and a heading that is itself the link (its title holds the , e.g. "View
Location" / "Get directions" on the contact pages). The underline moves onto
the so it changes colour with the text on hover. */
.cor-textlink .elementor-heading-title:has(> a){ text-decoration: none !important; }
.cor-textlink .elementor-heading-title > a{
color: inherit;
text-decoration: underline;
text-decoration-color: currentColor;
transition: letter-spacing .25s ease, color .25s ease;
}
.cor-textlink .elementor-heading-title > a:hover,
.cor-textlink .elementor-heading-title > a:focus-visible{
letter-spacing: .14em !important;
color: #1A4348 !important;
}
@media (prefers-reduced-motion: reduce){
.cor-textlink .elementor-heading-title,
.cor-textlink .elementor-heading-title > a{ transition: none; }
}
/* ---------- CS-171 — carousel arrows below the carousel on phones (23 Sep) ----------
Decided 17 Sep: below the tablet breakpoint the arrows drop beneath the
carousel, centred, clear of the artwork and the captions. Every carousel
positions its own arrows in its own custom_css at (0,4,0) or more, so this
one block has to use !important to win for all of them at once. The widget
gets 64px of room at the bottom and the pair sits centred in it. */
@media (max-width: 767px){
.elementor-widget-loop-carousel,
.elementor-widget-n-carousel,
.elementor-widget-image-carousel,
.elementor-widget-media-carousel{ position: relative; padding-bottom: 64px !important; }
.elementor-widget-loop-carousel .elementor-swiper-button,
.elementor-widget-n-carousel .elementor-swiper-button,
.elementor-widget-image-carousel .elementor-swiper-button,
.elementor-widget-media-carousel .elementor-swiper-button{
position: absolute !important; top: auto !important; bottom: 8px !important;
margin: 0 !important; padding: 0 !important; transform: none !important;
width: 36px !important; height: 36px !important;
}
.elementor-widget-loop-carousel .elementor-swiper-button-prev,
.elementor-widget-n-carousel .elementor-swiper-button-prev,
.elementor-widget-image-carousel .elementor-swiper-button-prev,
.elementor-widget-media-carousel .elementor-swiper-button-prev{ left: calc(50% - 52px) !important; right: auto !important; }
.elementor-widget-loop-carousel .elementor-swiper-button-next,
.elementor-widget-n-carousel .elementor-swiper-button-next,
.elementor-widget-image-carousel .elementor-swiper-button-next,
.elementor-widget-media-carousel .elementor-swiper-button-next{ left: calc(50% + 16px) !important; right: auto !important; }
}
/* ---------- CS-159 / CS-253 — bleed rails on phones (23 Sep) ----------
A rail inside .cor-loop-bleed runs 30px past the right gutter on phones, so
CS-171 centred its arrows 15px right of the page centre. Re-centred here on
the column. */
@media (max-width: 767px){
.cor-loop-bleed .elementor-widget-loop-carousel .elementor-swiper-button-prev{ left: calc(50% - 67px) !important; }
.cor-loop-bleed .elementor-widget-loop-carousel .elementor-swiper-button-next{ left: calc(50% + 1px) !important; }
}
/* CS-270/271: on phones, centre the heading arrow on the x-height (it sat ~3.5px high at 25px headings) */
@media (max-width: 767px) {
.cor-arrow-title .elementor-heading-title::after { vertical-align: -1px; }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
font-family: 'Circular';
font-style: normal;
font-weight: normal;
font-display: auto;
src: url('https://www.creativeofficeresources.com/wp-content/uploads/2026/06/CircularXXWeb-Regular.woff2') format('woff2'),
url('https://www.creativeofficeresources.com/wp-content/uploads/2026/06/CircularXXWeb-Regular.woff') format('woff'),
url('https://www.creativeofficeresources.com/wp-content/uploads/2026/06/CircularXXTT-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Circular';
font-style: italic;
font-weight: normal;
font-display: auto;
src: url('https://www.creativeofficeresources.com/wp-content/uploads/2026/06/CircularXXWeb-Italic.woff2') format('woff2'),
url('https://www.creativeofficeresources.com/wp-content/uploads/2026/06/CircularXXWeb-Italic.woff') format('woff'),
url('https://www.creativeofficeresources.com/wp-content/uploads/2026/06/CircularXXTT-Italic.ttf') format('truetype');
}
@font-face {
font-family: 'Circular';
font-style: normal;
font-weight: 600;
font-display: auto;
src: url('https://www.creativeofficeresources.com/wp-content/uploads/2026/06/CircularXXWeb-Medium.woff2') format('woff2'),
url('https://www.creativeofficeresources.com/wp-content/uploads/2026/06/CircularXXWeb-Medium.woff') format('woff'),
url('https://www.creativeofficeresources.com/wp-content/uploads/2026/06/CircularXXTT-Medium.ttf') format('truetype');
}
@font-face {
font-family: 'Circular';
font-style: italic;
font-weight: 600;
font-display: auto;
src: url('https://www.creativeofficeresources.com/wp-content/uploads/2026/06/CircularXXWeb-MediumItalic.woff2') format('woff2'),
url('https://www.creativeofficeresources.com/wp-content/uploads/2026/06/CircularXXWeb-MediumItalic.woff') format('woff'),
url('https://www.creativeofficeresources.com/wp-content/uploads/2026/06/CircularXXTT-MediumItalic.ttf') format('truetype');
}
@font-face {
font-family: 'Circular';
font-style: normal;
font-weight: 700;
font-display: auto;
src: url('https://www.creativeofficeresources.com/wp-content/uploads/2026/06/CircularXXWeb-Bold.woff2') format('woff2'),
url('https://www.creativeofficeresources.com/wp-content/uploads/2026/06/CircularXXWeb-Bold.woff') format('woff');
}
@font-face {
font-family: 'Circular';
font-style: italic;
font-weight: 700;
font-display: auto;
src: url('https://www.creativeofficeresources.com/wp-content/uploads/2026/06/CircularXXWeb-BoldItalic.woff2') format('woff2'),
url('https://www.creativeofficeresources.com/wp-content/uploads/2026/06/CircularXXWeb-BoldItalic.woff') format('woff');
}
@font-face {
font-family: 'Circular';
font-style: normal;
font-weight: bold;
font-display: auto;
src: url('https://www.creativeofficeresources.com/wp-content/uploads/2026/06/CircularXXWeb-Bold.woff2') format('woff2'),
url('https://www.creativeofficeresources.com/wp-content/uploads/2026/06/CircularXXWeb-Bold.woff') format('woff');
}
@font-face {
font-family: 'Circular';
font-style: italic;
font-weight: bold;
font-display: auto;
src: url('https://www.creativeofficeresources.com/wp-content/uploads/2026/06/CircularXXWeb-BoldItalic.woff2') format('woff2'),
url('https://www.creativeofficeresources.com/wp-content/uploads/2026/06/CircularXXWeb-BoldItalic.woff') format('woff');
}
/* End Custom Fonts CSS */