/* ===========================================================================
Artiva custom CSS
---------------------------------------------------------------------------
LOCATION NOTE. This file sits in markup/assets/css/ rather than a custom/
directory. A custom/ directory was tried and abandoned: on the WP Engine
staging host nginx returned 403 for every path beneath it, existing or not,
because the deploy created that directory with permissions nginx cannot
traverse into. markup/assets/ already exists on every environment and serves
correctly, so the file lives there instead. This is a workaround for a
filesystem permission problem, not a design preference. If the permissions
are ever corrected host-side, moving back to custom/ is preferable.
Lives in the PARENT theme by design. A child theme was considered and
deliberately rejected: this theme declares no Author, Theme URI or Update
URI, so WordPress has no mechanism to update it and nothing overwrites the
parent. Version control provides provenance and rollback instead.
Enqueued by one added line in includes/theme-init.php ($am_css_files).
It loads last of the theme's stylesheets, so same-specificity rules here
win on source order over markup/assets/css/style.css.
Contents:
1. Hero ( Homepage ) v2
2. Mobile main navigation: restore dropdown behaviour
3. Anchor scroll offset for the fixed header
4. Light section, dark box ( ACF layout: light_dark )
5. Header: extend the mobile menu up to 1279.98px
6. Leadership hero title: H2 that keeps the H1 look
7. Careers quote carousel: arrows inside the frame at tablet widths
8. Mobile menu open: keep the logo visible
9. Menu: readable colour for an expanded parent item
10. Footer: 12px minimum for the small text
11. Contact: tap-to-call link styled as plain text
12. Menu surfaces: white to match the header
13. Header search: wider text box on desktop
=========================================================================== */
/* ---------------------------------------------------------------------------
1. Hero ( Homepage ) v2
The description text grew from ~105 to ~275 characters, so it needs to be
wider and slightly smaller. Note 1rem = 10px on this site, because
html { font-size: var(--rem-base) } with --rem-base: 10px.
Three classes beats the theme's two-class rule, so no !important needed.
--------------------------------------------------------------------------- */
.section-hero._homepage._v2 p {
font-size: 2rem;
max-width: 760px;
}
/* Neither video nor image set: fall back to a flat dark background so white
text is never on white. --bg-hero is the theme's own variable, already the
dark blue used for hero backgrounds. */
.section-hero._homepage._v2._no-media {
background-color: var(--bg-hero);
}
/* Section height, set per section by the editor.
The theme sets .section-hero._homepage { min-height: 668px } with two
classes; this has three, so it wins on specificity with no !important.
This is the control that decides how much of the photograph survives the
crop. object-fit: cover always fills the box, so a taller box is closer to
the image's own aspect ratio and cuts away less of it.
TWO GUARDS, because a large height is only safe on a large window.
Guard 1, the width floor. Applied at 1200px and up only. object-fit: cover
crops whichever dimension has surplus, and which one that is FLIPS with the
box shape: a box wider than the photo's 3:2 crops top and bottom, a box
taller than 3:2 crops the SIDES. A 3:2 photo flips at width = 1.5 x height,
so a 900px hero starts cutting off the left and right of the photograph
below about 1350px wide. Under 1200px this rule simply does not apply and
the theme's own 668px stands, which is a shape that never has that problem.
That also covers tablets in landscape (1024px), which are above the mobile
breakpoint and would otherwise inherit a desktop height.
Guard 2, the viewport ceiling. clamp() keeps the result between the site
default and 85% of the window height, so a tall setting can never produce a
hero taller than the screen with the button and scroll cue pushed out of
sight. On a short laptop the 85vh term wins and the height falls back to the
668px floor, which is exactly today's behaviour, so this can never make
anything shorter than it is now.
Deliberately NOT applied below 768px either: the theme replaces this layout
there (min-height: unset, the h1 hidden and swapped for .mobile-heading,
.bg-holder given its own 30vh height), and forcing a desktop height into
that would break it.
To try heights before committing one to the slider:
document.querySelector('.section-hero._v2').style.setProperty('--hero-min-h','900px') */
@media (min-width: 1200px) {
.section-hero._homepage._v2 {
min-height: clamp(668px, var(--hero-min-h, 668px), 85vh);
}
}
/* ---- Still-image background ----------------------------------------------
A photograph behind left-aligned white text needs more than the theme's flat
40% scrim, because a photo's brightest region is rarely where the text is.
This replaces the flat wash with a DIRECTIONAL one: dark on the left where
the heading and description sit, clearing toward the right so the subject of
the photo stays visible.
The theme's .bg-holder::before sets background-color plus opacity: .4, so
both are overridden here: opacity goes to 1 and the alpha lives in the
gradient stops instead, which gives precise per-position control.
rgb(43, 46, 56) is --secondary-color, the same colour the theme already
uses for this scrim.
ALL THREE STOPS ARE TUNABLE LIVE. In the console:
document.body.style.setProperty('--hero-scrim-left', '.8')
Then reload-free comparison. Raise --hero-scrim-left until the text is
comfortable, lower --hero-scrim-right until the photo reads well. */
.section-hero._homepage._v2._image-bg .bg-holder::before {
background-color: transparent;
opacity: 1;
background-image: linear-gradient(
to right,
rgba(43, 46, 56, var(--hero-scrim-left, 0.72)) 0%,
rgba(43, 46, 56, var(--hero-scrim-mid, 0.5)) 55%,
rgba(43, 46, 56, var(--hero-scrim-right, 0.28)) 100%
);
}
/* Crop focus, set per section by the editor.
The template emits --hero-focus as an inline style on the section, from two
ACF Range fields (focal_x, focal_y). This rule is the only place
object-position is decided, so the styling stays in CSS and only the numbers
come from the CMS.
The 50% 50% fallback covers rows saved before those fields existed. Note the
theme's own rule sets object-position: center on .bg-holder img, so this
selector needs the extra classes to win; it has three, which it does.
To preview a framing before committing it to the sliders:
document.querySelector('.section-hero._v2').style.setProperty('--hero-focus','65% 35%')
Then set the sliders to match and hit Update. */
.section-hero._homepage._v2._image-bg .bg-holder img {
object-position: var(--hero-focus, 50% 50%);
}
/* ---- Image captions and disclosures ---------------------------------------
Two places, one look, so the hero strip and the in-content notices read as
one system rather than two treatments.
Sizes are in px, not rem. This theme shrinks the root font size by up to 30%
at small breakpoints, and compliance text that shrinks to 9px on a phone
defeats its own purpose.
The colour is the theme's body colour at 70%, which lands around 6:1 against
white, comfortably past WCAG AA. Do not lighten it further; unreadable
disclosure text is worse than none. */
:root {
--caption-size: 13px;
--caption-color: var(--base-text-color);
--caption-opacity: 0.7;
}
/* Hero caption: a strip below the hero section, not overlaid on the photo.
Background matches the white section beneath it so it reads as part of the
page rather than its own band. */
.hero-caption {
background-color: var(--bg-overlay);
}
.hero-caption .container {
font-size: var(--caption-size);
line-height: 1.4;
color: var(--caption-color);
opacity: var(--caption-opacity);
padding-top: 10px;
padding-bottom: 12px;
}
/* In-content notice, appended after every ![]()
in a v2 topic section.
display: block is what puts it under the image rather than trailing after
it, and what lets text-align centre it under the centred image.
font-weight and font-style are both stated explicitly rather than left to
inherit, because one of the Technology images sits inside a : the
notice would otherwise come out bold. italic is the intended style here, so
stating it also guarantees it regardless of what the image sits inside. */
.ai-note {
display: block;
font-size: var(--caption-size);
line-height: 1.4;
font-weight: 400;
font-style: italic;
text-align: center;
color: var(--caption-color);
opacity: var(--caption-opacity);
margin: -10px 0 20px;
}
/* The images carry img.aligncenter { margin: 0 auto 20px }, so the notice
starts 20px below the image. The negative top margin above pulls it back up
against the image it belongs to, then restores the gap underneath. */
/* ---- List Of Topics v2: consistent topic headings -------------------------
The v2 template renders every topic title as an , so they all pick up
.section-white h2 { color: var(--color-brand) } and match.
One rule in the parent theme can still break that:
#topic-0.section-white h2 { color: var(--color-dark-blue); }
It targets the FIRST topic by its positional id. Our template only emits
id="topic-0" as a fallback when an editor leaves the anchor field blank, so
the moment that happens the first heading turns dark blue again while the
rest stay red, which is exactly the inconsistency this was meant to fix.
!important is used here deliberately, and it is the one case that justifies
it: the competing selector contains an ID, and an ID outranks any number of
classes. No class-based selector can win, however specific, so raising
specificity is not an option. The rule that would normally apply,
"use the lowest specificity that works", has no solution here, and the
parent stylesheet is not ours to edit.
This becomes removable once every topic has an anchor set and the
topic- fallback is retired. */
.section-white._v2 h2 {
color: var(--color-brand) !important;
}
/* ---------------------------------------------------------------------------
2. Mobile main navigation: restore dropdown behaviour
Breakpoint deliberately matches the parent theme's exactly (max-width: 768px,
the block opening at style.css line 6236).
--------------------------------------------------------------------------- */
@media (max-width: 768px) {
/* THE FUNCTIONAL FIX.
Undoes .nav ul li a { display: inline } at style.css line 6482.
Two effects, both required:
1. The link fills the row, so the absolutely positioned +/- button
resolves against the full row width and lands at the right edge of
the screen instead of at the end of the word.
2. SmartMenus' isCSSOn() check (jquery.main.js line 860) returns
this.$firstLink.css("display") != "inline". While the first menu
link computes to inline, that check returns false, handleEvents()
returns false, and itemClick() exits on its first line, so taps fall
through to normal navigation and no submenu ever opens. Restoring
block makes the library run again. */
.nav ul li a {
display: block;
text-align: left;
padding-left: 20px;
}
/* Rows are centred today. Left align so "the button is on the right" means
the same distance for every item regardless of label length. */
.nav ul li {
text-align: left;
}
/* Reserve the lane the button occupies so a long label never runs under it.
Selector note: the theme sets padding-right: 25px on .nav a.has-submenu
(two classes) at line 5036, which outranks .nav ul li a (one class), so
the simpler selector would silently lose. .nav ul li a.has-submenu is the
lowest specificity that reliably wins. "has-submenu" is added to parent
links by SmartMenus at runtime. */
.nav ul li a.has-submenu {
padding-right: 64px;
}
/* Slightly larger than the theme's 25px (line 6493) without crowding.
Mobile rows are font-size: 28px with line-height: 2.1, so a row is about
59px tall; at 44px the buttons nearly filled the row and ran into each
other vertically. 32px leaves roughly 13px of clear space above and
below. The whole row is still tappable to expand, so the smaller button
is not the only touch target. Vertical centring is unaffected: the base
rule at line 5039 uses top: 50% with translateY(-50%). */
.nav a .sub-arrow {
width: 32px;
height: 32px;
right: 12px;
border-radius: 5px;
}
}
/* ---------------------------------------------------------------------------
3. Anchor scroll offset for the fixed header
Fixes: clicking an in-page anchor while already on that page lands the
target heading underneath the fixed header. Arriving cold works because
initHashScroll() (jquery.main.js line 62) measures the header and subtracts
it. Warm clicks run no JavaScript at all, because the theme's own click
handler initAnkhorScroll() is commented out (lines 4 and 173-189), so the
browser scrolls natively and nothing has told it to leave room.
scroll-margin-top goes on the TARGET element and means "when anything
scrolls me into view, keep this much space above me". It is honoured by
ordinary anchor clicks, back/forward navigation, and scrollIntoView().
--------------------------------------------------------------------------- */
/* MEASURED, not estimated. The header is .header-menu-wrapper with
padding: 15px 0 (style.css line 4556) wrapping the logo. The logo is an SVG
with viewBox="0 0 300 139.7" rendered at width: 143px !important
(line 4576), so it is 143 * 139.7 / 300 = 66.6px tall, under its 100px
max-height cap. Header = 15 + 66.6 + 15 = ~97px.
At 768px and below the theme switches to padding: 5px 0 with an explicit
logo height: 60px (lines 6408-6415), giving exactly 70px.
If the logo is ever replaced with a file of a different aspect ratio, this
is the one number to update. Above a 2.86:1 ratio the 100px max-height caps
it and the header becomes 130px. */
:root {
--header-h: 97px;
/* Breathing room so the heading does not sit against the header edge. */
--anchor-gap: 16px;
/* The pipeline bar blue. This is the one colour in the pipeline table that
has no name in root.css; it was hardcoded inline in the v1 table as
#125679. Named here so section-white_table_v2.php can reference it
instead of repeating the hex, and so there is one place to change it. */
--pipeline-bar: #125679;
}
/* Logged-in users above 1023px: the admin bar is 32px tall and the theme
pushes the header down by that much (.admin-bar .header-menu-wrapper
{ top: 32px }, style.css line 2690). */
.admin-bar {
--header-h: 129px;
}
/* At 1023px and below the theme resets the header to top: 0 (line 6121), so
the admin bar no longer displaces it. */
@media (max-width: 1023px) {
.admin-bar {
--header-h: 97px;
}
}
/* Below 768px the header itself is smaller, and the admin bar does not
displace it. Declared for both so a logged-in phone gets 70px too. Last in
the file so it wins the ties. */
@media (max-width: 768px) {
:root,
.admin-bar {
--header-h: 70px;
}
}
/* The calc() is deliberately here rather than pre-computed into a variable on
:root. var() is substituted at computed-value time where the property is
DECLARED, so a --scroll-offset variable defined on :root would resolve to
calc(70px + 16px) there and inherit that already-substituted value, and the
.admin-bar override above would have no effect. Resolving at the target
element picks up the inherited value correctly.
.main scopes this to page content, so the header and footer are untouched.
The four target shapes were confirmed in the section templates: ids land on
elements, on empty elements placed just before a section,
and occasionally on headings inside WYSIWYG content. */
.main section[id],
.main span[id],
.main h1[id],
.main h2[id],
.main h3[id],
.main h4[id] {
scroll-margin-top: calc(var(--header-h) + var(--anchor-gap));
}
/* The empty targets emitted by section-white.php are inline
elements with no content. scroll-margin behaves less predictably on inline
boxes than on blocks, and this costs nothing visually because the span is
empty. */
.main span[id] {
display: block;
}
/* ---------------------------------------------------------------------------
4. Light section, dark box ( ACF layout: light_dark )
Same inner .blue-block as section-dark, but the band behind it is white
instead of --bg-dark, so the section sits flush with the white page around
it and only the box stays navy.
The text colour has to move, and this is the part that is easy to get wrong.
.blue-block and every heading inside it are color: inherit (style.css line
4250), so the white text in .section-dark is inherited from the SECTION, not
set on the box. Turning the band white without re-homing that colour would
leave dark text on the dark blue box. Setting it on .blue-block instead
keeps the box readable and means the white band never carries white text
that could go invisible.
The h2 size is restated because .section-dark h2 is scoped to the old class,
so this section would otherwise fall back to the default --h2 size.
--------------------------------------------------------------------------- */
.section-light-dark {
background-color: var(--bg-overlay);
}
.section-light-dark .blue-block {
color: var(--color-white);
}
.section-light-dark h2 {
font-size: 19px;
}
/* ---------------------------------------------------------------------------
5. Header: extend the mobile menu up to 1279.98px
THE PROBLEM. The desktop nav needs about 1210px of width, but the hamburger
only took over below 769px. Between those two the header flex row had
nowhere to give, so it crushed the logo instead: measured 0px wide from
769px all the way to roughly 1200px, and still only 41px at 1260px against a
natural 143px. Below about 1035px the nav also ran past the viewport edge.
THE FIX, in two parts.
First, stop the logo being the thing that gives. flex-shrink: 0 is declared
outside the media query on purpose: the squeeze happens at every width below
about 1400px, not only in the hamburger range.
Second, because the logo now holds its full width, the desktop nav needs
more room than before. Measured: with the logo at 143px the nav's right edge
lands at a fixed 1207px, so it needs a viewport of at least 1222px. Handing
back to the desktop layout any earlier just moves the clipping rather than
curing it. 1279.98px is the first standard breakpoint clear of that, with
58px of measured headroom.
WHY THESE RULES ARE DUPLICATED. They already exist in style.css inside
@media (max-width:768px), but that block also carries unrelated section
styling, and style.css is an agency file we treat as read-only. So the
header rules are restated here, where this stylesheet loads last and wins on
source order. If the agency block is ever changed, this section will drift
and must be re-checked against it.
.nav ul li a { display: block } is NOT cosmetic. style.css line 6482 sets it
to inline, and SmartMenus' isCSSOn() check reads the first link's computed
display: inline makes it disable itself and the dropdowns stop opening. The
fix in section 2 above is scoped to max-width:768px, so it does not reach
this range and the rule has to be restated here too.
Sub-arrow sizing mirrors the phone menu exactly (25px, right 15px) so tablet
and phone look the same. Both are below the 44px touch-target guideline;
enlarging them is worth doing, but as a deliberate change to both, not here.
--header-h is re-pointed to 70px so the anchor scroll offset in section 3
stays matched to the shorter header this range produces.
--------------------------------------------------------------------------- */
.header-menu-wrapper .logo {
flex-shrink: 0;
}
@media (min-width: 768.01px) and (max-width: 1279.98px) {
/* --header-h is deliberately NOT overridden here. The phone block drops it
to 70px because the top bar is hidden there, but the bar stays visible in
this range, so the header measures the same 94px as desktop. Leaving the
desktop 97px in place keeps the anchor scroll offset correct; setting 70px
made in-page anchors land about 24px short. */
header.header .container {
width: calc(100% - 40px);
}
/* The top bar is deliberately NOT hidden here, unlike the theme's phone
block which hides it. The bar carries the Top menu: Press Releases, News
and Contact. style.css pairs hiding it with showing three duplicate
.mobile-nav menu items in the drawer instead, but those duplicates live in
the old "Header menu" and the site now uses "Main Header (v2)", so zero
.mobile-nav elements render. Hiding the bar here would therefore make
those three links unreachable with nothing standing in for them.
Note: phones (<=768px) still have exactly that gap. It predates this
section and the fix is a content change, adding those links to the main
menu, not CSS. */
/* No padding or logo-height overrides here. Those belong to the theme's
phone header, which is compact because the top bar is hidden. The bar
stays visible in this range, so the header keeps its normal desktop
proportions and only the nav swaps to the drawer. Forcing the phone
sizing here made the header 121px against a declared --header-h of 97px,
which would have thrown in-page anchors off by 24px. */
.nav .has-mega-menu .mega-menu li,
.nav ul,
.nav-opener {
display: block;
}
.nav-active .nav-drop,
.nav-drop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.nav-drop {
overflow: hidden;
max-height: 0;
}
.nav-active .nav-drop {
max-height: 4000px;
}
/* White, not the theme's #f9f9f9: see section 12. */
.nav {
transform: translateY(-100%);
background-color: var(--bg-overlay);
}
.nav-active .nav {
transform: translateY(0);
background-color: var(--bg-overlay);
width: 100%;
height: 100%;
padding-top: 55px;
padding-bottom: 55px;
overflow: auto;
}
.nav ul li {
font-size: 28px;
line-height: 2.1;
text-align: left;
}
/* See the note above: inline here would switch SmartMenus off. */
.nav ul li a {
display: block;
text-align: left;
padding-left: 20px;
}
/* style.css line 5036 uses two classes, which outranks .nav ul li a, so the
submenu padding has to be stated at that same specificity to land. */
.nav ul li a.has-submenu {
padding-right: 64px;
}
.nav li > ul {
box-shadow: none;
position: static;
}
.nav a .sub-arrow {
display: flex;
width: 25px;
height: 25px;
right: 15px;
border: 0;
border-radius: 4px;
background-color: #adadad;
justify-content: center;
align-items: center;
margin: 0;
}
.nav a .sub-arrow:before {
content: "+";
color: #fff;
}
.nav a.highlighted .sub-arrow:before {
content: "-";
}
}
/* ---------------------------------------------------------------------------
6. Leadership hero title: H2 that keeps the H1 look
section-hero__leadership.php now prints its title as