:
Jeeter and MM Brands have no company page yet. That deliberately
mirrors the Portfolio page (8075), where those same two cards are
the only ones rendered without a .card-link.
ACCESSIBILITY: .marquee-track is aria-hidden and main.js clones its
innerHTML to loop the animation, so every link exists twice in the
DOM. Focusable controls must not sit inside aria-hidden content and
must not be duplicated in the tab order, so the anchors carry
tabindex="-1" and are a pointer affordance only. The keyboard and
screen-reader path is the "View the full portfolio" button directly
beneath the marquee, which reaches the same pages.
The track already pauses on hover (.marquee:hover), so a logo holds
still long enough to be clicked.
================================================================== */
#top .marquee a.marquee-item {
color: inherit;
text-decoration: none;
cursor: pointer;
}
/* The home marquee hides its text labels
(.home-portfolio .marquee-item span { display: none !important }),
so the hover affordance has to live on the logo itself. A small
lift, matching the .tile:hover treatment used elsewhere on the
site. Resting appearance is deliberately left untouched. */
#top .marquee a.marquee-item img {
transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
#top .marquee a.marquee-item:hover img {
transform: translateY(-4px) scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
#top .marquee a.marquee-item img {
transition: none;
}
#top .marquee a.marquee-item:hover img {
transform: none;
}
}
/* Non-linked tiles (Jeeter, MM Brands) must not look interactive. */
#top .marquee div.marquee-item {
cursor: default;
}
/* ==================================================================
Team (8072): even two-up advisory board card grid
------------------------------------------------------------------
1. NO LOGOS. Organisation logos were added here and then removed;
see the note further down for the asset reasons and for what
would be needed to bring them back.
2. ALIGNMENT. Avia renders these as floated av_one_half columns, so
two cards on a line could not match heights and any stray block
knocked one column out of step. Making the section's column
wrapper a wrapping flex row lets cards on a line stretch to equal
height, and the min-height floor stops short cards looking
stunted, so the board reads as one even grid down to the lone
seventh card.
Root cause of the reported "Gallegos sits lower than Martin":
an HTML comment on its own line inside the Gallegos block, which
wpautop turned into an empty paragraph worth about 28px. Fixed
in the page content by moving that comment inline.
================================================================== */
body#top.page-id-8072 .advisory-board .entry-content-wrapper {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
body#top.page-id-8072 .advisory-board .entry-content-wrapper > .av_one_full {
flex: 0 0 100%;
}
body#top.page-id-8072 .advisory-board .flex_column.av_one_half {
display: flex;
flex-direction: column;
}
body#top.page-id-8072 .advisory-board .flex_column.av_one_half > .av_textblock_section {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
body#top.page-id-8072 .advisory-board .flex_column.av_one_half .avia_textblock {
flex: 1 1 auto;
min-height: 21rem;
}
/* NO ADVISOR LOGOS. Tried and reverted 2026-08-12. The seven marks in
the media library are unusable as a set on the navy band: six carry
zero transparency and their baked-in backgrounds disagree with each
other. WisdomTree ships on solid blue rgb(1,71,186), US Cannabis
Council on navy rgb(11,35,84), SCI Ventures on charcoal
rgb(35,41,46), while Earl Gallegos, Antares and Holland & Knight are
artwork on solid white. Only Aspen Institute is genuinely
transparent. Any single treatment therefore fights half the set, and
no blend mode resolves a 3-dark / 3-white / 1-transparent split.
Each advisor's organisation is already named in the role line
directly above, so the logos were repeating information while
importing seven foreign palettes into the page.
To revive this: source transparent single-colour WHITE marks (SVG
preferred) for the six, place them bare on the navy at a uniform
opacity with no plate behind them, and re-add the .advisor-logo-wrap
slot so card rhythm stays even. The LOGOS PENDING note in the page
content tracks the asset request. */
/* One column on small screens, so the height floor would only add dead space. */
@media only screen and (max-width: 767px) {
body#top.page-id-8072 .advisory-board .flex_column.av_one_half .avia_textblock {
min-height: 0;
}
}
/* ==================================================================
MOBILE PASS - 2026 redesign drafts (added 2026-08-18)
------------------------------------------------------------------
All 14 "Draft:" pages were reviewed at a 390px viewport. Nothing was
structurally broken: document scrollWidth stayed at 390px on every
page, so no section overflows horizontally and every Avia column
stacks to one column as intended. The corrections below are the
legibility and touch-target problems that pass turned up.
Everything here sits inside max-width:767px and, where a rule could
plausibly touch legacy markup, is scoped to the redesign page IDs.
Desktop and the published pages are untouched.
================================================================== */
@media only screen and (max-width: 767px) {
/* ---- Firm (8073): the two pannable charts were clipping their labels
.growth-svg and .ascent-svg are scroll canvases - width:100% with
min-width 640px / 760px inside a .growth-wrap / .ascent-wrap that is
overflow-x:auto. Inside a 332px phone content column that renders the
growth chart at 0.81 of its 792-unit viewBox and the ascent chart at
0.76 of its 1000-unit viewBox, which drops the milestone captions to
roughly 7px and pushes the later milestones off the visible strip -
with no cue that the chart pans at all.
Widening the scroll canvas rather than shrinking it to fit is what
fixes the type. Captions are laid out in viewBox units, so scaling
the whole SVG up lifts them from ~7px to ~10px without changing any
font-size. That matters: bumping .mile-cap directly was tried first
and collided "FOUNDED" into "FIRST INVESTMENT IN U.S. CANNABIS",
because the 2018 and 2020 milestones sit close together. Scaling
moves the labels apart and enlarges them in the same proportion. ---- */
/* SUPERSEDED 2026-08-19: the widen-and-pan approach below was replaced
by fit-to-view. Keeping the whole graph on screen was judged more
important than keeping every in-SVG caption. See the FIT block. */
body#top.page-id-8073 .growth-svg { min-width: 0; width: 100%; }
body#top.page-id-8073 .ascent-svg { min-width: 0; width: 100%; }
/* ---- FIT: whole chart visible on a phone, no horizontal panning ----
The SVGs scale down with their viewBox, so anything declared in
viewBox units shrinks with them. At a 280px content column the
growth chart renders at 0.35 of its 792-unit viewBox and the ascent
chart at 0.28 of its 1000 units, which would drop 9px captions to
roughly 3px. Type is therefore declared much larger here purely to
survive the downscale - these are not real pixel sizes.
The long milestone captions are hidden on phones: at a legible size
they are wide enough in viewBox units to overlap each other (the
2018 and 2020 markers sit close together on the growth chart, and
the 2020/2023 nodes are only 90 units apart on the ascent). Years,
axis values and the summary chips below the chart are kept, so the
shape and the numbers still read. */
body#top.page-id-8073 :is(.growth-wrap, .ascent-wrap) {
overflow-x: visible;
padding: 8px;
}
/* Declared sizes are chosen so the RENDERED size clears 11px after the
viewBox downscale: growth renders at ~0.33 of its viewBox on a 390px
phone, ascent at ~0.28. Measured effective sizes are in the report. */
body#top.page-id-8073 .growth-svg .grid-label { font-size: 36px; }
body#top.page-id-8073 .growth-svg .mile-year { font-size: 38px; }
body#top.page-id-8073 .growth-svg .mile-cap { display: none; }
/* The moving value bubble and the inline 2018 / Today axis labels sit
in the same band as the milestone years. At mobile type sizes they
collide ($0.0M was printing straight through 2018, and Today was
clipping to "To"), so they are dropped on phones - the axis values
and milestone years carry the same information. */
body#top.page-id-8073 .growth-svg .glabel { display: none; }
body#top.page-id-8073 .growth-svg .grid-label:nth-of-type(4),
body#top.page-id-8073 .growth-svg .grid-label:nth-of-type(5) { display: none; }
body#top.page-id-8073 .ascent-svg .asc-year { font-size: 42px; }
body#top.page-id-8073 .ascent-svg .asc-desc { display: none; }
/* ==================================================================
STRATEGIES FLYWHEEL: MOBILE VARIANT (added 2026-08-19)
------------------------------------------------------------------
Phones get a different presentation of the same content: a real
ordered list carrying the four stages as text, emitted by the
[key_flywheel_list] shortcode. Diagram and list swap at 767px, so
only one is ever in the layout and screen readers see it once.
================================================================== */
/* Flywheel container. Restored 2026-08-19 from the original static-site
source (key-website/strategies.html) after the block was damaged by a
bad find-and-replace. The SVG now sits on a single line inside a div,
so wpautop has no newlines to inject
into. */
#top .strategies-flywheel .flywheel-container { max-width: 100%; margin: 0 auto; }
@media only screen and (max-width: 767px) {
#top .flywheel-svg { display: none; }
#top .flywheel-list-block { display: block; }
#top .fw-list { list-style: none; margin: 0; padding: 0; }
#top .fw-list-item {
display: block;
padding: 14px 0;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
#top .fw-list-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
#top .fw-list-num {
display: block;
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
letter-spacing: 0.08em;
color: #9CC3E5;
margin-bottom: 2px;
}
#top .fw-list-title {
display: block;
font-size: 16px;
font-weight: 600;
line-height: 1.3;
color: #ffffff;
}
#top .fw-list-sub {
display: block;
font-size: 14px;
line-height: 1.45;
color: rgba(255, 255, 255, 0.82);
margin-top: 2px;
}
}
/* Original note kept for history: flywheel SVG NOT adjusted, deliberately. It renders at 0.43
of its 660-unit viewBox on a phone, so its 17px / 13.5px / 9px
labels land at 7.3px / 5.8px / 3.8px. Raising them to 26 units did
clear 11px rendered, but the centre labels ("KEY" and "+ KEY
NETWORK") then overlapped each other, which is worse than small.
The node positions are fixed in the SVG and cannot be re-spaced from
CSS, so this needs a mobile-specific variant of the diagram - a
design change, not a stylesheet one. Left at its designed sizes. */
/* Make the pan affordance visible. Mobile browsers hide overlay
scrollbars until a gesture starts, so the charts currently read as
static-but-cropped. A thin always-on bar is the cheapest honest cue
that there is more chart to the right. */
body#top.page-id-8073 :is(.growth-wrap, .ascent-wrap) {
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
body#top.page-id-8073 :is(.growth-wrap, .ascent-wrap)::-webkit-scrollbar {
height: 6px;
-webkit-appearance: none;
}
body#top.page-id-8073 :is(.growth-wrap, .ascent-wrap)::-webkit-scrollbar-thumb {
background: rgba(14, 65, 112, 0.40);
border-radius: 3px;
}
body#top.page-id-8073 :is(.growth-wrap, .ascent-wrap)::-webkit-scrollbar-track {
background: rgba(14, 65, 112, 0.08);
}
/* ---- Legibility floor: nothing under 11px on a phone ----
Measured at 390px: .chart-note 8.5px (Home, "Firm figures as of
H1 2026."), .funnel-cap 11px and .stat-sector 12px (Home), .chip
12px (Firm). These are captions and eyebrow labels, so they are
nudged past the floor rather than restyled. */
body#top:is(.page-id-8066,.page-id-8067,.page-id-8068,.page-id-8069,.page-id-8070,.page-id-8072,.page-id-8073,.page-id-8074,.page-id-8075,.page-id-8076,.page-id-8077,.page-id-8078,.page-id-8094,.page-id-8095) .chart-note {
font-size: 11px;
line-height: 1.5;
}
body#top:is(.page-id-8066,.page-id-8067,.page-id-8068,.page-id-8069,.page-id-8070,.page-id-8072,.page-id-8073,.page-id-8074,.page-id-8075,.page-id-8076,.page-id-8077,.page-id-8078,.page-id-8094,.page-id-8095) :is(.funnel-cap, .stat-sector, .chip) {
font-size: 12.5px;
}
/* ---- Touch targets in the footer ----
Footer menu links measured 23px tall and the "What's new" widget
list 17px, because ".widget_nav_menu a { padding: 0px }" earlier in
this file strips their padding. That rule tightens the desktop
footer, so rather than removing it the padding is restored for
phones only, where these are thumb targets and not a compact list.
Left deliberately alone: inline links inside body copy (20px). Those
are words in a sentence, and padding them would break the line. */
#top #menu-footer-menu li a {
display: block;
padding: 12px 0;
line-height: 1.25;
}
/* Scoped away from .widget_nav_menu: that rule is 2 IDs + 3 compound
parts, so without the :not() it out-specifies the footer-menu rule
above and quietly clamps those links back to 6px. */
#top #footer .widget:not(.widget_nav_menu) ul li a {
display: inline-block;
padding: 6px 0;
}
#top .copyright { font-size: 12px; }
/* ---- Form controls as touch targets ----
WPForms inputs measured 38px tall on the Contact page, under the
44px minimum for a comfortable thumb target. Font size is already
17px, which is what keeps iOS from zooming on focus, so only the
height needed raising. */
#top .wpforms-form input[type="text"],
#top .wpforms-form input[type="email"],
#top .wpforms-form input[type="tel"],
#top .wpforms-form select,
#top .wpforms-form button[type="submit"],
#top #ms-sub-form input[type="email"],
#top #ms-sub-form button {
min-height: 44px;
}
}
/* ==================================================================
WPAUTOP ARTIFACT CLEANUP (added 2026-08-18)
------------------------------------------------------------------
The redesign pages originally held their custom markup in Enfold
Code Block elements. Code Blocks do not render on this install
(published pages drop them entirely), so every one was converted to
a Text Block, which does render. Text Blocks run their contents
through wpautop, and wpautop wraps runs of inline elements in
and inserts
at newlines.
On the portfolio marquee that broke the flex row: each logo ended up
inside its own
, the track laid out as columns instead of a strip,
and the 5,104px-wide track overflowed the document — which is what
pushed every page's content left with a dead gutter on the right.
display:contents makes the injected
transparent to the flex
container, so the anchors become direct flex children again without
editing the markup. Empty paragraphs are collapsed for the same
reason. This is cosmetic repair of a rendering artifact, not layout
design — if Code Blocks are ever fixed at the theme level, this
block and the conversion can both be reverted together.
================================================================== */
#top .marquee-track > p { display: contents; }
#top .marquee-track > br { display: none; }
#top .avia_textblock > p:empty { display: none; margin: 0; }
/* ==================================================================
CODE BLOCK -> TEXT BLOCK COMPATIBILITY (added 2026-08-18)
------------------------------------------------------------------
Sixteen rules earlier in this file are scoped to .avia_codeblock and
.avia_codeblock_section. After the conversion those elements emit
.avia_textblock inside .av_textblock_section instead, so none of
those rules match any more. Three visible regressions followed, all
repaired below. Delete this whole block if Code Blocks are ever
fixed at the theme level and the conversion is reverted.
================================================================== */
/* ---- 1. Script-only blocks must not occupy layout ----
alpha-boost, recount and filter blocks contain nothing but a