/* Custom CSS for Valante Capital child theme */ /* Site font — self-hosted variable font (../fonts), covers weights 100-900. Keep this as the only @font-face for 'Inter'; a duplicate Google Fonts import for the same family name causes an unpredictable load-race. */ @font-face { font-family: 'Inter'; src: url('../fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2-variations'), url('../fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/Inter-Italic-VariableFont_opsz,wght.woff2') format('woff2-variations'), url('../fonts/Inter-Italic-VariableFont_opsz,wght.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; } /* Pill-shaped navbar — floats over the hero and stays pill-shaped when sticky. .uk-navbar-container is the single element that carries both the .uk-navbar-transparent (normal/top of page) and .uk-navbar-sticky (scrolled) classes, so one rule covers both states. */ .tm-header .uk-navbar-container { margin: 20px 32px 0; /* side gaps create the floating look, but width now tracks the header's own Max Width setting (Expand) instead of a fixed cap — grows as you add items */ border-radius: 16px; /* rounded-rectangle, matched to Carlyle reference */ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18); } /* Slightly tighter to the top once the sticky state kicks in */ .tm-header .uk-navbar-container.uk-navbar-sticky { margin-top: 12px; } /* "Menu is too tall" complaint, actually fixed 2026-08-24 — Chata found it natively: Website Builder → Style → Navbar → Nav Item → Height field was set to 80px, dropped to 60px, instant fix. (First guess here was the 28px-looking font-size rule in theme.css — wrong lead, the live Customizer panel showed Font Size was already a normal 18px; the real `.uk-navbar-nav>li>a{height:...}` value only exists as a Page Builder DB field, not something visible from the static CSS file alone. Lesson: for Navbar/Nav Item sizing, check the live Style Customizer panel first before reading compiled CSS for clues.) No CSS override needed for this one — leaving the pre-existing padding-zero rule below as is, unrelated to this fix. */ .uk-navbar-container .uk-navbar-nav > li > a { padding-top: 0px !important; /* reduce from theme default */ padding-bottom: 0px !important; } /* Force the same solid white background in both the normal (transparent/ overlay) and sticky states. The Style Customizer's Navbar > Background field feeds an "inverse"/overlay variant when the header sits over the hero, separate from the sticky background — even at full alpha it wasn't being applied consistently. !important guarantees this wins regardless of which variable YOOtheme resolves at runtime. */ .tm-header .uk-navbar-container, .tm-header .uk-navbar-container.uk-navbar-transparent, .tm-header .uk-navbar-container.uk-navbar-sticky { background-color: #ffffff !important; } /* Site-wide footer (rebuilt 2026-08-14 in the actual global Footer position — replaces an earlier attempt that lived in a single page's content section, which would've had to be redone on every page). Its link list is UIkit's Nav component (.uk-nav-default), NOT the same component as the main navbar menu (.uk-navbar-nav), so Global Styles > List doesn't touch it. Two guesses at a data-id-based selector both failed to match the real DOM (devtools showed zero trace of them) — the actual winning rule per Computed panel was `.uk-light`, color rgba(250,249,241,0.7): a near-white cream at 70% opacity, which blends against the navy background into the muddy gray text that prompted this whole thread. Targeting `.uk-light .uk-nav-default` is safe against leaking into the header: uk-nav-default doesn't exist anywhere in the navbar markup, only here. */ .uk-light .uk-nav-default > li > a { color: #ffffff !important; } .uk-light .uk-nav-default > li > a:hover { color: rgba(255, 255, 255, 0.85) !important; } /* Footer nav — originally set to Taviraj (theme's serif), then matched to Montserrat (the main navbar's font at the time, per the 2026-08-13 decision). Updated 2026-09-03: main navbar is now Inter sitewide (the idcnetwork.com typography copy), so this follows suit to stay matched. */ .uk-nav-default { font-family: Inter, sans-serif; } /* Convert Forms Component — sitewide font override, added 2026-09-03 as part of the idcnetwork.com typography copy. The Convert Forms plugin ships its own bundled CSS that sets labels/inputs/buttons to Open Sans (and the honeypot/hidden anti-spam inputs to plain Arial) regardless of the theme's type system, so it was the one spot left rendering off-brand after every other element on the site was already Inter. !important because the plugin's own stylesheet needs to be outranked, not just matched on specificity. */ .convertforms .cf-label, .convertforms .cf-input, .convertforms textarea, .convertforms select, .convertforms .cf-btn { font-family: 'Inter', sans-serif !important; } /* Convert Forms Component - home page contact form overrides. */ .convertforms .cf-btn { background-color: rgba(2, 4, 57, 1) !important; border-radius: 8px !important; } /* Convert Forms Component - contact general inquiries page - contact form overrides. */ .white-button .convertforms .cf-btn { background-color: rgba(255, 255, 255, 1) !important; color: #001124 !important; border-radius: 8px !important; } .blue-button .convertforms .cf-btn { background-color: rgba(2, 9, 59, 1) !important; color: #ffffff !important; border-radius: 8px !important; } /* Force background repeat on designated homepage sections */ .do-repeat .uk-background-norepeat { background-repeat: repeat-y !important; } /* Animated gradient background — shared technique (idcnetwork.com style): an oversized gradient (background-size 300% 300%) slowly panned via background-position using the @keyframes below. Originally used by two sections via .showcase-gradient (cream tone, "Our way to invest") and .showcase-gradient-2 (navy tone, further down the page). .showcase-gradient was removed 2026-08-26 per request, then reused below (2026-08-29) as .showcase-gradient-3 for an unrelated bottom strip elsewhere on the page — the name "showcase-gradient" itself is intentionally retired/free again rather than reassigned in place, to avoid a repeat of the confusion where it meant two different things at two different times. The keyframes stay shared across all gradient sections below. */ @keyframes gradient-flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Second section, further down the page — dark navy #03182e on both ends, brightening to a mid blue #36689f in the center. Apply by adding the custom class "showcase-gradient-2" to the section in Page Builder > (select section) > Advanced tab > Attributes > Class. */ .showcase-gradient-2 { background: linear-gradient(125deg, #03182e, #36689f 100%, #03182e); background-size: 300% 300%; animation: gradient-flow 22s ease infinite; } @media (prefers-reduced-motion: reduce) { .showcase-gradient-2 { animation: none; } } /* Third gradient section — a small strip at the bottom of a page. Base tone #EFF0E8 (soft ivory/sage), sweeping to a deeper same-hue khaki-sage #D9DCC9 in the center and back — same "value sweep, no hue shift" approach as the original cream showcase-gradient. Apply by adding the custom class "showcase-gradient-3" to the section in Page Builder > (select section) > Advanced tab > Attributes > Class. */ .showcase-gradient-3 { background: linear-gradient(125deg, #EFF0E8, #D9DCC9 50%, #EFF0E8); background-size: 300% 300%; animation: gradient-flow 22s ease infinite; } @media (prefers-reduced-motion: reduce) { .showcase-gradient-3 { animation: none; } } /* Home hero headline/subphrase colliding with the floating pill navbar below 1200px wide — REMOVED FROM HERE 2026-08-19. Root cause found by inspecting the live DOM (browser devtools, not just reading files): ".el-section" is NOT a real class YOOtheme ever writes into the page. It's a placeholder alias that only gets resolved to the section's real auto-generated class when used INSIDE that section's own Page Builder "Advanced -> CSS" field (same place the existing hero rules — the video positioning, the flex-centering on .el-section > .uk-container, the .hero-subphrase color/shadow — already correctly live). Written into this global child-theme custom.css instead, ".el-section" matches nothing on the real page (confirmed: the actual heading's ancestor chain is .uk-section-default.uk-section.uk-height-viewport..., never .el-section), so every version of this fix tried here — including the !important pass — was dead on arrival despite deploying correctly. The real fix now lives in the Hero section's own CSS field in Page Builder, appended after the existing rules there. See the build-notes memory for the exact snippet and why it has to live there instead of here. Lesson for next time: .el-section/.el-element aliases belong in a section's own CSS field, never in this file. */ /* Fund detail pages — feature icons (chicken, money, transform, world, etc, under images/template_images/sections/funds//). Downloaded icons from SVG Repo/icon libraries each bake their own width/height into the root (e.g. "2em", "800px") independent of their viewBox, so every icon rendered at a different native size with no field in the Image element to override it — YOOtheme just draws them at their intrinsic size. Fixed at the source by stripping those width/height attributes from each SVG file (viewBox only) and switching hardcoded fill/stroke colors to currentColor so uk-text-primary actually tints them. This class is the second half of that fix: it forces one consistent display size regardless of the icon's internal viewBox. In Page Builder, "select the icon" often selects the grid Item wrapper (.el-item) rather than the actual Image element nested inside it — the click target for the icon graphic and the click target for its container overlap, and Page Builder's Attributes > Class field applies to whichever one has focus. Nothing here sizes .fund-icon itself (the wrapper), since that would squash the heading/text sitting alongside the icon in the same panel — confirmed broken 2026-08-19 when the class first landed on the wrapper and shrank the icon's container to 32x32 while the icon inside kept rendering at its own native (mismatched) size. Second gotcha, also confirmed 2026-08-19 (live DOM inspection): the `` markup is not what actually renders. UIkit's uk-svg component fetches the file and replaces it at runtime with an injected inline `` sibling, then sets `hidden` on the original `` — the img stays in the DOM but is never visible. So a selector that only matches `img` never touches the element on screen; `svg` has to be targeted too. All four combinations below are covered so this keeps working regardless of whether the class ends up on the wrapper or directly on the icon element, and regardless of whether UIkit has swapped it to inline svg yet. */ .fund-icon img, .fund-icon svg, img.fund-icon, svg.fund-icon { width: 32px; height: 32px; object-fit: contain; } /* Fund detail "cards with icons and text" layout (2026-10-07) — new design replacing the old icon+info section on fund pages. First pass reused the existing ".fund-icon" class and the reference's own body-level ".vc-fund" scoping (Joomla Page Class Suffix) to keep it from colliding with the old icon-info section's existing ".fund-icon" usage (32px, terracolor) on the 4 funds not yet rebuilt. Correctly reverted 2026-10-07, same day, per Chata: every other fix on this project scopes via a class added directly on the section/row/item in Builder, never a Joomla menu-item setting — adding one just for this was inconsistent with that and an unnecessary extra step. Fix: gave the new card design its OWN class, ".fund-card", so there's nothing to collide with and nothing page-level needed at all. Apply ".fund-card" directly to each card's own Item/Panel wrapper in Builder (one card = one wrapper = one class) — same place ".fund-icon" went on the old layout, just a different, non-colliding name. No Page Class Suffix / body class required — plain item-level scoping, like every other fix on this build. Card chrome (border/shadow/radius/hover-lift) + icon color/size, both ported 1:1 from the reference's matched CSSOM rules on the Ascend Fund I page (read live via Claude in Chrome, not guessed) — reference's actual card-box rule lives on the same element the old ".fund-icon" class sat on, which is why this version folds card styling and icon styling into one class instead of two. Icon color is navy #142131 (matches --vc-navy), not the old terracotta — deliberate different palette for the new card design, don't "fix" it back to terracotta without Chata asking. Per-icon Image elements on this build currently have their own Width field in Builder miswired to "2" (should be 24, or blank) — harmless here since the !important width/height below overrides it visually, but worth Chata fixing at the source before templating the other 4 funds. */ .fund-card { border: 1px solid #e1e0d8; border-radius: 14px; background: #fff; box-shadow: rgba(4, 16, 27, .32) 0 14px 34px -26px; transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s cubic-bezier(.2, .7, .2, 1); padding: 28px 26px 6px; height: 100%; } .fund-card:hover { transform: translateY(-5px); box-shadow: rgba(4, 16, 27, .42) 0 26px 54px -30px; } .fund-card .el-image { opacity: 1; margin-bottom: 10px; } .fund-card .el-image, .fund-card .el-image svg, .fund-card svg { color: #142131 !important; fill: #142131 !important; } .fund-card .el-image, .fund-card .el-image svg { width: 40px !important; height: 40px !important; } /* Some fund-card icon slots hold an actual partner/brand logo (e.g. Saudi Eksab's "eksab_logo_original.svg" and "bid_invest.svg") instead of a square Tabler icon. The theme's base rule (theme.9.css, "canvas, img, svg, video") defaults every image to object-fit:cover, which is harmless for the square-viewBox Tabler icons but crops a wide, non-square logo down to a thin center sliver once squeezed into the 40x40 box above. .el-image is the itself here (not a wrapping div), so this has to target it directly rather than ".el-image img". Fixed 2026-10-07 on Saudi Eksab's top info cards. First pass just added object-fit:contain here -- technically un-cropped the logo but still squeezed it down into the shared 40x40 icon box, way smaller than the reference (Chata correctly rejected this: "the entire card is scoped to that tiny square"). Checked the reference's own CSSOM directly: it doesn't force brand logos into the same square at all -- it has a dedicated ".vc-brand-logo" modifier class (max-height:38px, max-width:184px, width/height auto) applied only to the logo-type Image elements, layered on top of its equivalent of ".fund-icon". The generic contain fix below is kept as a harmless safety net (equivalent to cover for the square Tabler-icon case), but the real fix for an actual logo is the ".vc-brand-logo" class two rules down -- apply that class to the Image element in Builder whenever a fund-card icon slot is a brand/partner logo rather than a square concept icon. */ .fund-card .el-image { object-fit: contain !important; } /* Ported 1:1 from the reference's own ".vc-brand-logo" rule (read via live CSSOM inspection on the Netlify reference, not guessed) -- lets a non-square logo size itself by its own aspect ratio within a height cap, instead of being squashed into the shared 40x40 icon box above. Needs !important on width/height/max-width/max-height/aspect-ratio to beat both the shared ".fund-card .el-image" 40x40 rule above and the theme's base "canvas, img, svg, video" aspect-ratio/object-fit rule. Apply this class on the Image element in Builder for any fund-card slot holding a real partner/brand logo -- Saudi EKSAB and IDB Invest on this page, 2026-10-07. Same Builder gotcha as Change 30's Button-widget class (confirmed via live DOM inspection, 2026-10-07): when Chata added "vc-brand-logo" in Builder, it landed on the Image element's auto-generated wrapper div (class "vc-brand-logo uk-margin"), not on the "" inside it -- so the compound selector above (".el-image.vc-brand-logo", both classes on the same element) never matched and the logo stayed stuck at the old 40x40 size. Fixed by also covering the wrapper-holds-the-class case with a plain descendant selector; kept the compound selector too in case a future instance lands the class directly on the image. No Builder change needed from Chata -- the class she already added is in the right place for this version. */ .fund-card .vc-brand-logo .el-image, .fund-card .el-image.vc-brand-logo { width: auto !important; height: auto !important; max-width: 184px !important; max-height: 38px !important; aspect-ratio: auto !important; object-fit: contain !important; margin-bottom: 6px; } /* This is the rule that actually makes these Tabler OUTLINE icons render as outlines instead of solid navy blobs. These files are stroke-built (root , individual s carry neither attribute and inherit from the root) — so the plain "fill: #142131 !important" rule above, applied to the /.el-image element itself, cascades its new fill value down to every child too (they have nothing of their own to inherit around it), painting every shape solid instead of leaving them hollow. Confirmed by testing the blocks above alone first (live DOM class injection, no file edit): meat/world/coins/infinity all rendered as filled blobs, not lines. The reference's own CSS carries this exact second rule for the same reason — re-asserts fill:none on the svg AND every descendant via "svg *", and drives the visible color through `stroke` (not `fill`) instead, since these are stroke-based icons. Don't remove this rule or simplify it down to just the fill/color block above — that's the version that was already confirmed broken. */ .fund-card svg { stroke-width: 1.75; } .fund-card svg, .fund-card svg * { stroke-width: 1.75; fill: none !important; stroke: #142131 !important; } /* Sticky "Back to top" button — replaces YOOtheme's native footer-only back-to-top element (a plain ".uk-margin" div, no styling worth keeping). This version is injected sitewide via custom.js instead of a Page Builder element, so it appears fixed over every page regardless of footer content, and only becomes visible once the visitor has actually scrolled (see the JS toggle). Look is modeled on unilever.com's button: a rounded icon "chip" + a text pill, stacked vertically on desktop and laid out side-by-side on mobile. Icon chip uses the same navy already established for the footer/logo video (#03093E) for contrast; the text pill uses the light blue Chata specified (#cfeefd) with dark navy text. The old YOOtheme footer back-to-top element should be deleted from the Footer section in Page Builder once this is confirmed working — it's redundant now and the two would otherwise both appear at the bottom of the page. */ #valante-back-to-top { position: fixed; right: 20px; bottom: 20px; z-index: 999; display: flex; align-items: center; text-decoration: none; font-family: Inter, sans-serif; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(14px); transition: opacity .25s ease, transform .25s ease, visibility .25s; } #valante-back-to-top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } #valante-back-to-top .btt-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background-color: #03093E; color: #ffffff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); } #valante-back-to-top .btt-icon svg { width: 18px; height: 18px; } #valante-back-to-top .btt-label { background-color: #cfeefd; color: #03093E; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; padding: 10px 16px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); } #valante-back-to-top:hover .btt-icon { background-color: #0a1550; } #valante-back-to-top:hover .btt-label { background-color: #bde6f7; } /* Large screens: vertical stack, icon on top of the label — mirrors the unilever.com desktop layout. */ @media (min-width: 640px) { #valante-back-to-top { flex-direction: column; gap: 8px; } } /* Small screens: horizontal row, label to the left of the icon, tucked into the bottom-right corner — mirrors unilever.com's mobile layout. */ @media (max-width: 639px) { #valante-back-to-top { right: 14px; bottom: 14px; flex-direction: row-reverse; gap: 8px; } #valante-back-to-top .btt-icon { width: 40px; height: 40px; } #valante-back-to-top .btt-label { font-size: 11px; padding: 8px 14px; } } .shorter.uk-divider-vertical { height: 50px !important; } /* "Our Approach" (who-we-are) parallax panels — each panel's uk-card sits inside its own wrapper div (the "uk-margin" div directly around the card). Same custom-class-cascade trick as the animated gradient sections above: add a custom class to that wrapper via Page Builder > select the wrapper (not the card content itself) > Advanced tab > Attributes > Class, then target ".yourclass .uk-card" here. This is a real DOM class (not the .el-section/.el-element Page-Builder-only alias), so it works fine from this global custom.css file. Panel 1's wrapper already carried "paint-it-blue" from an earlier hover-only rule (kept below) — extended here to set the panel's resting background too, since #1b3d63 (rgb(27,61,99)) is the same color already used for the hover state. To give the remaining panels their own colors: add a new custom class to each one's wrapper (e.g. "approach-panel-2", "approach-panel-3", ...) in Page Builder, then add one rule per panel below following this pattern. !important is used because uk-card-primary/uk-card-default set their background via the Style Customizer's global card colors. */ .paint-it-blue .uk-card { background-color: #1b3d63 !important; } .paint-it-blue .uk-card-primary.uk-card-hover:hover { background-color: rgb(27, 61, 99) !important; } .paint-it-white .uk-card { background-color: rgba(255, 255, 255, 0.9) !important; } .paint-it-cream .uk-card { background-color: rgba(239, 240, 232, 0.9) !important; } .paint-it-blue .uk-card-primary.uk-card-hover:hover { background-color: rgb(255, 255, 255) !important; } div.white-button .uk-light .uk-button-primary { background-color: #ffffff !important; font-weight: 500 !important; } div.white-button .uk-light .uk-button-primary:hover { background-color: rgba(255, 255, 255, 0.0) !important; color: #ffffff !important; } .uk-navbar-dropdown-nav > li > a { border-bottom: none !important; padding-top: 9px !important; padding-bottom: 9px !important; font-size: 15px !important; font-weight: 600 !important; padding-left: 10px !important; padding-right: 10px !important; margin-left: -10px !important; margin-right: -10px !important; border-radius: 8px !important; transition: background-color .18s ease !important; } /* Tight 2px gap between dropdown items, matching the reference build */ .uk-navbar-dropdown-nav > li + li { margin-top: 2px !important; } /* Subtle hover highlight on dropdown items, matching the reference build */ .uk-navbar-dropdown-nav > li > a:hover { background-color: #f1f4f6 !important; } /* Rounded corners + soft shadow on the main-menu dropdown panel, matching the reference build (netlify preview), 2026-10-05 */ .tm-header .uk-navbar-dropdown { border-radius: 12px !important; border: 1px solid #ece9e0 !important; box-shadow: 0 14px 36px -12px rgba(2,17,49,.30) !important; } .darker-meta-text .uk-text-meta { color: #58574d !important; } /* "Valante by the Numbers" counter row — underline misalignment fix, 2026-08-24. Each stat is a Sublayout built as Image > Headline (the number, e.g. "US $600 M+") > Text (the description, e.g. "Assets under management") > Divider (the underline). Titles vary in length, so at in-between viewport widths (including the 150%-zoomed 14" laptops the Valante team uses) some descriptions wrap to 2 lines and others stay on 1 — the Divider just sits right after the text, so its vertical position drifts per column, which reads as "the lines aren't aligned." Fix: the 5 columns in this Row are already equal height by default (UIkit's grid stretches flex row items to match the tallest sibling — no native "Match" toggle was available/needed on this Row's Column Height field). This class turns each Sublayout into a flex column that fills that already-equal column height, and pins the last child (whatever it is — currently the Divider, but this stays correct even if the stack order changes later) to the bottom via margin-top: auto. Net effect: the underline always sits at the same height across all 5 columns regardless of how many lines the title/description wrapped to. Applied via the existing "js-counter-item" class already present on all 5 Sublayouts (Page Builder > select Sublayout > Advanced tab > Attributes > Class) — that class wasn't otherwise used anywhere in this CSS/JS or the compiled theme.css, so reusing it for styling doesn't conflict with whatever count-up-animation behavior it may hook into. */ .js-counter-item { display: flex; flex-direction: column; height: 100%; } .js-counter-item > :last-child { margin-top: auto; } /* "Our Way To Invest" cards (5-column summary grid) — description copy hidden by default, revealed on hover (desktop, pure CSS) or tap (mobile, via the click-toggle JS in custom.js which adds/removes "uk-invest-card-active"). Only the description paragraph (.uk-panel.uk-text-small.uk-text-success) is affected — the title (.uk-h6.uk-text-success) always stays visible. RETARGETED 2026-08-29: this used to be scoped to ".showcase-gradient" (piggybacking on the section's gradient-background class), but that class is being removed from this section (Chata wants a plain background here now, and is reusing "showcase-gradient" for an unrelated bottom-of-page strip elsewhere). Scoping hover behavior to a background-decoration class was fragile — the two concerns shouldn't have been coupled in the first place. Now scoped to a dedicated class, "invest-cards", which must be present on this section (Page Builder > select section > Advanced tab > Attributes > Class) independently of whatever background class it does or doesn't have. */ .invest-cards .uk-width-1-5\@m { cursor: pointer; } /* Updated 2026-09-03: matches BOTH .uk-text-success and .uk-text-secondary on the description paragraph. Chata is switching each card's text color role from Success to Secondary (Success stopped being white once it was changed to #293945 as part of the same day's color-palette update; Secondary is white). Cards are being converted one at a time in Page Builder, so at any given moment some may still say .uk-text-success and others .uk-text-secondary -- matching both keeps the hide-until-hover/ tap behavior working throughout the transition and afterward, whichever role ends up used sitewide. */ .invest-cards .uk-width-1-5\@m .uk-panel.uk-text-small.uk-text-success, .invest-cards .uk-width-1-5\@m .uk-panel.uk-text-small.uk-text-secondary { opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.3s ease, max-height 0.3s ease; pointer-events: none; } .invest-cards .uk-width-1-5\@m:hover .uk-panel.uk-text-small.uk-text-success, .invest-cards .uk-width-1-5\@m.uk-invest-card-active .uk-panel.uk-text-small.uk-text-success, .invest-cards .uk-width-1-5\@m:hover .uk-panel.uk-text-small.uk-text-secondary, .invest-cards .uk-width-1-5\@m.uk-invest-card-active .uk-panel.uk-text-small.uk-text-secondary { opacity: 1; max-height: 200px; pointer-events: auto; } /* "Our Way To Invest" card titles (PROPRIETARY DEAL ACCESS, etc.) — durable CSS replacement for the per-element Page Builder "Font Family: Primary" setting (Headline element > Settings > Title > Font Family dropdown), applied 2026-09-01 to fix the bold/"bad quality" look (was orphaned/ hardcoded at Archivo weight 600). That per-element setting silently reverted back to its hardcoded weight-600 default sometime during 2026-09-02 (cause not identified — Page Builder Font Family dropdowns on individual elements are not durable state to rely on, see the header navbar work the same day for the same lesson learned a different way). Forcing it here in custom.css instead means it can't silently regress again. Letter-spacing (1.5px) and text-transform (uppercase) are left alone — those come from the "Heading H6" Style preset, not from the Font Family role, and were already correct/unaffected by the regression. Updated 2026-09-03: bumped 500->600. The old value matched the Archivo-era Global Primary role's weight (500); Primary is now Inter at weight 600 (idcnetwork.com typography copy), so 600 is what keeps this consistent with every other Primary-role uppercase label sitewide now. Revert: delete this rule to fall back to whatever the Page Builder Font Family dropdown is set to per-element (native weight 600 if it's back to None/default, current Primary weight if someone resets it to Primary — which is 600 as of 2026-09-03). */ /* Updated 2026-09-03: also matches .uk-text-secondary, for the same Success-to-Secondary color-role migration described above -- the title needs the same weight-600 durability regardless of which color role the element currently carries. */ .invest-cards .uk-h6.uk-text-success, .invest-cards .uk-h6.uk-text-secondary { font-weight: 600; } /* "Our Way To Invest" card titles sitting flush against the image edge on mobile (Chata's phone, 2026-08-29 screenshot) — root cause traced live via Claude-in-Chrome against the actual compiled theme.css: each card's image+text block is UIkit's native ".uk-tile" component, which ships with its own responsive padding baked into the theme (not a value Chata or a previous edit set): 40px/15px (top-bottom/left-right) below 640px, 20px sides at 640px+, 70px/40px at 960px+ (desktop). No Design panel override exists on this element — it's genuinely just UIkit's default, and 15px on the sides is what reads as "flush" on an actual phone screen. Scoped to ".invest-cards .uk-tile" (not the bare ".uk-tile" selector) so this only touches these 5 cards and not any other Tile component elsewhere on the site. Note: this couldn't be fully reproduced in-browser (neither a resized window nor Chata's own DevTools mobile emulation showed the flush look that her real phone did) — the fix below is based on the actual measured CSS values, not a visual repro, so it's worth Chata double-checking on her phone once this is live. If it's still too tight there, the next thing to check is the inline `background-size: ` YOOtheme sets on this element via JS (measured in px, not %) — that could behave differently on a real device's actual rendering pipeline than in desktop Chrome's mobile emulation. */ @media (max-width: 639px) { .invest-cards .uk-tile { padding: 48px 24px; } } /* contact-right-panel-bkg .contact-right-panel-bkg .el-item.uk-panel { background-color: rgba(41, 57, 59, 0.5) !important; }*/ /* ===== HEADER NAVBAR TIGHTENING (2026-09-01/02, iterative) ===== Goal: reclaim horizontal width in .tm-header so the mobile-breakpoint can eventually be lowered below YOOtheme's 960px "Medium" tier (see the "Navbar mobile-breakpoint" section of the build-notes memory file for the full history/bisection numbers each round). Chata's explicit go-ahead 2026-09-02: "let's see how far we can push it before it looks bad or something breaks" — as long as it's fully revertible. TO FULLY REVERT: delete everything between this line and the matching "===== END HEADER NAVBAR TIGHTENING =====" line below. Nothing else in the file depends on this block; the header falls straight back to YOOtheme/UIkit's native defaults (gap: 30px everywhere, search box 240px/weight 600/18px). ROUND 1 (2026-09-02 AM): search input weight 600->500, size 18px->14px, box 240px->160px (native Header > Search has no size/width field, so this has to be a CSS override). True safe threshold measured: ~1043-1044px (down from ~1145-1150px before this round). ROUND 2 (2026-09-02, this edit): found there are actually THREE separate 30px flex `gap`s stacked up in the header, not one — one on .uk-navbar-left (logo/links/search/social) and a SEPARATE one inside .uk-navbar-nav itself (between the 4 menu links: Who We Are / What We Do / Our Funds / Contact). Consolidated every inter-item gap onto explicit margin-left values (both containers' native `gap` zeroed out) so each one can be tuned and reverted independently instead of fighting the flex `gap` shorthand. Current values below — adjust here on future rounds. */ .tm-header .uk-search-navbar { width: 140px; /* was 160px round1, native 240px. round4 (120px) untested for text clipping, backed off with the rest of round4. */ } .tm-header .uk-search-navbar .uk-search-input { font-family: Inter; font-weight: 500; font-size: 14px; } /* Gaps between the 4 main menu links (Who We Are / What We Do / Our Funds / Contact) */ .tm-header .uk-navbar-nav { gap: 0; } .tm-header .uk-navbar-nav > li + li { margin-left: 12px; /* was native 30px, round2: 16px. round4 (8px) looked cramped, backed off. */ } /* Gaps between logo / nav-links / search / social-icon */ .tm-header .uk-navbar-left { gap: 0; } .tm-header .uk-navbar-left > .uk-navbar-nav { margin-left: 16px; /* logo -> nav-links, was native 30px, round2: 20px. round4 (12px) too tight, backed off. */ } .tm-header .uk-navbar-left > .uk-navbar-item:nth-child(3) { margin-left: 12px; /* nav-links -> search, was native 30px, round2: 16px. round4 (8px) too tight, backed off. */ } .tm-header .uk-navbar-left > .uk-navbar-item:last-child { margin-left: 6px; /* search -> LinkedIn icon, was native 30px, round2: 8px. round4 (4px) looked like it was touching the icon, backed off. */ } /* ===== END HEADER NAVBAR TIGHTENING ===== */ /* Default Divider Icon */ .valante-divider-icon .uk-divider-icon { position: relative; height: 30px; background-image: url('../../../images/template_images/icons_svg/valante_divider_icon.svg'); } .valante-divider-icon-white .uk-divider-icon { position: relative; height: 30px; background-image: url('../../../images/template_images/icons_svg/valante_divider_icon_white.svg'); } /* ===== VERTICAL ACCENT TITLE (2026-09-03) ===== Vertical line beside a title block (eyebrow label + headline pair), emulating idcnetwork.com's pattern. Apply via the Class field on whichever Panel/Column already wraps the eyebrow+headline — no sub-layout needed. Same mechanism as the hero's .hero-divider-col. */ /* Dark line, for LIGHT section backgrounds (cream, white, etc.) */ .vertical-accent-title-dark { border-left: 3px solid #142131; padding-left: 20px !important; /* 2026-09-05: !important needed because when this class lands on a Page Builder "Container" element (uk-container), it sits inside the Section's own .uk-container, and theme.9.css's ".uk-container .uk-container" nested-reset rule (specificity 0,2,0) zeroes padding-left, beating our single-class rule (0,1,0) regardless of source order. */ } /* Light (white) line, for DARK section backgrounds (navy, etc.) */ .vertical-accent-title-light { border-left: 3px solid #ffffff; padding-left: 20px !important; /* 2026-09-05: see note on .vertical-accent-title-dark above */ } /* Light-blue line, same steel-blue accent as the home page hero video divider (CAPITAL / CONVICTION / OPERATIONAL DEPTH column, #7ba7d0 / var(--vc-clay-2)). Added 2026-10-06 for the "What We Do" page. */ .vertical-accent-title-blue { border-left: 3px solid #7ba7d0; padding-left: 20px !important; /* 2026-10-06: see note on .vertical-accent-title-dark above */ } /* ===== END VERTICAL ACCENT TITLE ===== */ /* Hero divider line (CAPITAL / CONVICTION / OPERATIONAL DEPTH column): solid light steel blue instead of plain white, so it reads as a brand accent rather than disappearing into the light scrim over the hero video -- matches the reference build, 2026-10-05. The "html" prefix out-specifies the per-element border color YOOtheme's Page Builder already writes inline as "#page\#3 .hero-divider-col". */ html #page\#3 .hero-divider-col { border-left-color: #7ba7d0 !important; } /* ===== TEAM GALLERY SCROLL REVEAL (2026-09-04, delay tuned 2026-09-04) ===== Fade + scale-up entrance for the "Our People" grids (and any future gallery grid), staggered left-to-right / row-by-row as it scrolls into view. Add the class "team-reveal-grid" to a Gallery/Grid element's Advanced tab -> Classes field in Page Builder to opt it in. Trigger is a dedicated IntersectionObserver in custom.js (see "Team gallery scroll-reveal trigger") that adds "uk-scrollspy-inview" to each ".el-item" once ~15% visible -- intentionally NOT dependent on each card's own Page Builder "Reveal on scroll" setting, since that setting can be (and was) stripped off a gallery independently. Stagger steps are keyed to the grid's own responsive column count (1 col mobile, 2 @s, 4 @m -- matches uk-child-width-1-1 / -1-2@s / -1-4@m), so it self-adjusts at each breakpoint instead of assuming a fixed column count. Half-second-per-photo pacing per Chata's request 2026-09-04 (was .12s/step, felt too quick). */ .team-reveal-grid .uk-grid > div > .el-item { opacity: 0; transform: scale(0.85); transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: 0s; } .team-reveal-grid .uk-grid > div > .el-item.uk-scrollspy-inview { opacity: 1; transform: scale(1); } /* 2-column stagger (@s, 640px+) */ @media (min-width: 640px) { .team-reveal-grid .uk-grid > div:nth-child(2n+1) > .el-item { transition-delay: 0s; } .team-reveal-grid .uk-grid > div:nth-child(2n) > .el-item { transition-delay: .5s; } } /* 4-column stagger (@m, 960px+) -- overrides the 2-column rule above */ @media (min-width: 960px) { .team-reveal-grid .uk-grid > div:nth-child(4n+1) > .el-item { transition-delay: 0s; } .team-reveal-grid .uk-grid > div:nth-child(4n+2) > .el-item { transition-delay: .5s; } .team-reveal-grid .uk-grid > div:nth-child(4n+3) > .el-item { transition-delay: 1s; } .team-reveal-grid .uk-grid > div:nth-child(4n) > .el-item { transition-delay: 1.5s; } } @media (prefers-reduced-motion: reduce) { .team-reveal-grid .uk-grid > div > .el-item { transition: none; opacity: 1; transform: none; } } /* ===== END TEAM GALLERY SCROLL REVEAL ===== */ /* ===== COOKIE POLICY DATA TABLE (2026-09-09) ===== Card-style responsive table for the Cookies Policy article (id 51, /cookies-policy) — pattern copied from idcnetwork.com's cookies-policy page. Selectors de-scoped from their original ".legal" wrapper since this build's article body has no such container; classes applied directly. */ .legal-table-wrap { margin: 26px 0 30px; } .legal-table { width: 100%; color: #33414f; font-size: 0.9rem; font-weight: 300; line-height: 1.7; display: block; } .legal-table caption { color: #33414f; opacity: 0.7; text-align: left; padding-top: 12px; font-size: 0.82rem; display: block; } .legal-table thead { clip-path: inset(50%); white-space: nowrap; width: 1px; height: 1px; position: absolute; overflow: hidden; } .legal-table tbody { flex-direction: column; gap: 14px; display: flex; } .legal-table tr { border: 1px solid #001c401f; background: rgba(255, 255, 255, 0.5); border-radius: 10px; padding: 16px 20px 18px; display: block; } .legal-table td { overflow-wrap: anywhere; grid-template-columns: 130px 1fr; align-items: baseline; gap: 6px 20px; padding: 5px 0; display: grid; } .legal-table td::before { content: attr(data-label); letter-spacing: 0.07em; text-transform: uppercase; color: #001c40; opacity: 0.65; font-size: 0.68rem; font-weight: 600; } .legal-table td:first-child { color: #001c40; border-bottom: 1px solid #001c401f; margin-bottom: 10px; padding: 0 0 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.95rem; font-weight: 500; display: block; } .legal-table td[data-label=""] { display: block; } .legal-table td:first-child::before, .legal-table td[data-label=""]::before { content: none; } @media (max-width: 560px) { .legal-table tr { padding: 14px 16px 16px; } .legal-table td { grid-template-columns: 1fr; gap: 0; padding: 7px 0; } } /* ===== END COOKIE POLICY DATA TABLE ===== */ /* ===== MOBILE FIX: "Valante by the Numbers" counter cards (home page) ===== Each counter's background image size is computed in px by JS on load and was landing narrower than the actual card on mobile (e.g. 320x480 on a ~425-455px-wide card), leaving the image floating in the middle of the card while the divider line and text below stayed sized to the full card width -- making them look like they were overflowing the (visually shrunken) box. Forcing the image to cover the card on mobile realigns everything back to the same edge. Desktop/tablet (>=640px) untouched. */ @media (max-width: 639px) { .uk-tile:has(> .js-counter-item.stat-block) { background-size: cover !important; } } /* ===== END MOBILE FIX: counter cards ===== */ /* ===== TRACK RECORD CARDS — hide-until-hover/tap (2026-09-10) ===== Independent twin of the ".invest-cards" hover/tap-reveal feature (see that section above), for the "Track Record" grid. Deliberately NOT reusing ".invest-cards": that section was copy-pasted from "Our Way To Invest" and initially kept its "invest-cards" class, which caused a real cross-section bug -- because the JS click-toggle and this CSS are keyed off ".invest-cards .uk-width-1-5@m" with no per-section scoping, tapping a Track Record card was closing an already-open "Our Way To Invest" card's description (confirmed live). Fix: Track Record's Section now carries its own ".track-record-cards" class instead, with its own copy of the CSS (below) and JS (in custom.js, same pattern). Card structure/selectors are identical to invest-cards -- only the scoping class differs. Some Track Record cards already have hidden description text like invest-cards; more will get description text added later, so this needs to support the same hide-until-hover/tap behavior, just scoped independently. */ .track-record-cards .uk-width-1-5\@m { cursor: pointer; } .track-record-cards .uk-width-1-5\@m .uk-panel.uk-text-small.uk-text-success, .track-record-cards .uk-width-1-5\@m .uk-panel.uk-text-small.uk-text-secondary { opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.3s ease, max-height 0.3s ease; pointer-events: none; } .track-record-cards .uk-width-1-5\@m:hover .uk-panel.uk-text-small.uk-text-success, .track-record-cards .uk-width-1-5\@m.uk-invest-card-active .uk-panel.uk-text-small.uk-text-success, .track-record-cards .uk-width-1-5\@m:hover .uk-panel.uk-text-small.uk-text-secondary, .track-record-cards .uk-width-1-5\@m.uk-invest-card-active .uk-panel.uk-text-small.uk-text-secondary { opacity: 1; max-height: 200px; pointer-events: auto; } /* ===== END TRACK RECORD CARDS ===== */ /* ===== MOBILE FIX: "Track Record" cards background image (2026-09-10) ===== Same root cause as the "Valante by the Numbers" counter-card fix above: each card's background-image size is computed in px by JS on load (will-change: background-position-x/y -- a parallax/cover component), and that computed size was baked in slightly smaller than the actual card at the container width it happened to run at (e.g. inline background-size: 235px 354px on a card that measures ~232px wide by ~254px tall in some viewports, but noticeably short of covering on Chata's actual phone width) -- leaving the dark section background visible around the edges of the photo, with the card's text sitting outside the visually-shrunken image. Forces the image to properly cover the card on mobile, matching the fix already applied to the counter cards. Desktop/tablet (>=640px) untouched. */ @media (max-width: 639px) { .track-record-cards .uk-tile { background-size: cover !important; } } /* ===== END MOBILE FIX: Track Record cards ===== */ .funds-rounded-corners .uk-flex-1 { border-radius: 20px !important; } .funds-home-cards-rounded-corners .el-item.uk-card.uk-card-default { border-radius: 20px !important; overflow: hidden !important; } .what-we-do-bottom-cards-rounded-corners .el-image { border-radius: 20px !important; } /* ##################################################################### VALANTE ENHANCEMENTS -- "Our Way To Invest" cards, ported from the reference build, 2026-10-05. Numbered 01-05, title anchored bottom, description reveals on hover, fixed-size rounded image tiles (no stretch-on-hover). Scoped to .vc-invest (home only). Additive & reversible. REQUIRES: the "vc-invest" class added to the card Grid element itself (the one whose direct children are the 5 image tiles) via that element's Advanced tab -> Class field in YOOtheme Page Builder -- the same class-field mechanism already used for .hero-divider-col, .vertical-accent-title-dark, etc. elsewhere in this file. Until that class is added, this block has nothing to attach to and changes nothing. ##################################################################### */ :root { --vc-navy: #293945; --vc-cream: #FAF9F1; --vc-clay: #2f6099; --vc-clay-2: #7ba7d0; --vc-red: #E44E56; --vc-ease: cubic-bezier(.2,.7,.2,1); } .vc-invest { counter-reset: vc-owi; } /* card shell -- fixed aspect ratio + rounded corners via overflow:hidden, so the source photos never need pre-rounded corners in Photoshop */ .vc-invest .uk-tile{ position: relative; overflow: hidden; border-radius: 16px; isolation: isolate; aspect-ratio: 3 / 4.3; background-size: cover !important; /* override inline 320x480 */ background-position: center !important; background-color: rgba(20,33,49,.12); background-blend-mode: multiply; transition: transform .45s var(--vc-ease), box-shadow .45s var(--vc-ease); } .vc-invest .uk-tile:hover{ transform: translateY(-6px); box-shadow: 0 22px 44px -16px rgba(2,17,49,.55); } /* scrim only where text sits: a touch at the top (for the number) and a stronger foot (for the title) -- the middle stays clear so the photo shows */ .vc-invest .uk-tile::after{ content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(2,17,49,.40) 0%, rgba(2,17,49,.06) 20%, rgba(2,17,49,0) 44%, rgba(2,17,49,.52) 76%, rgba(2,17,49,.90) 100%); transition: background .5s var(--vc-ease); } .vc-invest .uk-tile:hover::after, .vc-invest .uk-tile:focus-within::after{ background: linear-gradient(180deg, rgba(2,17,49,.48) 0%, rgba(2,17,49,.40) 34%, rgba(2,17,49,.68) 72%, rgba(2,17,49,.92) 100%); } @media (hover: none){ .vc-invest .uk-tile::after{ background: linear-gradient(180deg, rgba(2,17,49,.44) 0%, rgba(2,17,49,.34) 34%, rgba(2,17,49,.66) 72%, rgba(2,17,49,.92) 100%); } } /* number 01-05 */ .vc-invest .uk-tile::before{ counter-increment: vc-owi; content: counter(vc-owi, decimal-leading-zero); position: absolute; top: 15px; left: 17px; z-index: 3; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--vc-clay-2, #7ba7d0); } /* content panel anchored to the bottom (DIRECT child only -- the inner description also carries .uk-panel, so scope with > to avoid moving it) */ .vc-invest .uk-tile > .uk-panel{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0 !important; padding: 20px 18px 22px; } .vc-invest .uk-tile > .uk-panel .uk-width-1-1{ display: flex; flex-direction: column-reverse; } .vc-invest .uk-tile h3{ color: #fff !important; font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.28; margin: 0; max-width: 15ch; text-wrap: balance; min-height: calc(2 * 1.28em); } .vc-invest .uk-tile h3 span{ white-space: normal; } /* light-blue rule under the title */ .vc-invest .uk-tile h3::after{ content: ""; display: block; width: 26px; height: 2px; background: var(--vc-clay); margin-top: 12px; transition: width .45s var(--vc-ease); } .vc-invest .uk-tile:hover h3::after, .vc-invest .uk-tile:focus-within h3::after{ width: 46px; } /* description: hidden until hover / focus */ .vc-invest .uk-tile .uk-text-small{ color: rgba(250,249,241,.88) !important; font-size: 12.5px; line-height: 1.6; max-height: 0; opacity: 0; overflow: hidden; margin-top: 0 !important; transition: max-height .5s var(--vc-ease), opacity .45s var(--vc-ease), margin-top .5s var(--vc-ease); } .vc-invest .uk-tile:hover .uk-text-small, .vc-invest .uk-tile:focus-within .uk-text-small{ max-height: 200px; opacity: 1 !important; margin-top: 12px !important; } /* keep it keyboard reachable */ .vc-invest .uk-flex > .uk-tile:focus-visible{ outline: 2px solid var(--vc-clay); outline-offset: 3px; } /* reduced motion: no lift/slide; description always visible for legibility */ @media (prefers-reduced-motion: reduce){ .vc-invest .uk-tile:hover{ transform: none; } .vc-invest .uk-tile .uk-text-small{ max-height: none; opacity: 1 !important; margin-top: 12px !important; } } /* touch devices can't hover: reveal the description by default */ @media (hover: none){ .vc-invest .uk-tile .uk-text-small{ max-height: none; opacity: 1 !important; margin-top: 12px !important; } } /* small screens: ensure aspect stays reasonable */ @media (max-width: 640px){ .vc-invest .uk-tile{ aspect-ratio: 3 / 4; } } /* ===== END "Our Way To Invest" cards ===== */ /* ##################################################################### VALANTE ENHANCEMENTS -- IDC section (navy->teal radial scrim), per ref. This REPLACES the section's background photo with a pure CSS radial gradient -- the photo URL stays in the markup (Page Builder background image field) but background-image here overrides it with !important, so no image ever paints. Scoped to .vc-idc -- add that class to the section/row in Page Builder (same pattern as .vc-invest). 2026-10-05 ##################################################################### */ .vc-idc.uk-section{ background-image: radial-gradient(110% 125% at 86% 14%, #237c91 0%, #124c60 20%, #0a2433 46%, #061627 74%, #04101b 100%) !important; background-color: #04101b !important; background-attachment: scroll !important; min-height: 0 !important; padding: clamp(48px, 7vw, 96px) 0 !important; } /* ##################### END VALANTE ENHANCEMENTS -- IDC section ####### */ /* ##################################################################### VALANTE ENHANCEMENTS -- "Valante by the Numbers" (editorial), per ref. No cards, no photos. Five equal stats in a row, big navy numbers, hairline blue dividers, count-up preserved. Scoped to .vc-numbers -- add that class to the GRID/ROW element that holds the 5 stat-block sublayouts (same element type as .vc-invest / .vc-idc, i.e. the row, not the individual sublayouts -- no element moving needed). 2026-10-05 ##################################################################### */ /* strip the building-photo tile + card chrome -> flat on the section bg */ .vc-numbers .stat-block{ background: none !important; min-height: 0 !important; padding: 4px clamp(12px, 1.3vw, 22px) !important; display: flex; flex-direction: column; justify-content: flex-start; } /* hide the original stat divider block (3rd child) -- we use the top tick */ .vc-numbers .stat-block > div:nth-child(3){ display: none !important; } .vc-numbers .uk-flex{ width: 100%; } .vc-numbers .stat-block{ margin: 0 !important; } .vc-numbers .stat-block .uk-grid-margin{ margin-top: 0 !important; } /* the number -- big, navy, editorial, left-aligned. Sized so the longest string ("US $600 M+") fits one line inside a 5-across column without colliding with its neighbour. */ .vc-numbers .js-counter{ font-size: clamp(1.55rem, 2.35vw, 2.3rem) !important; line-height: 1.05 !important; font-weight: 700 !important; letter-spacing: -.02em !important; color: var(--vc-navy, #142131) !important; text-align: left !important; white-space: nowrap; font-variant-numeric: tabular-nums; margin: 0 !important; } /* the label -- small, muted blue-grey, left-aligned */ .vc-numbers .uk-panel.uk-text-secondary{ color: #5a6672 !important; font-size: 13px !important; line-height: 1.45 !important; text-align: left !important; margin: 12px 0 0 !important; max-width: 22ch; } .vc-numbers .uk-panel.uk-text-secondary p{ margin: 0; } /* short blue accent tick above each number -- the one shared brand mark */ .vc-numbers .stat-block::before{ content: ""; display: block; width: 28px; height: 3px; background: var(--vc-clay, #2f6099); /* token now holds steel blue */ margin: 0 0 18px; } /* ---- hairline dividers, responsive to UIkit's 1-5@m / 1-2@s grid ---- */ /* desktop (5 across): vertical hairlines between columns */ @media (min-width: 960px){ .vc-numbers > div:not(:first-child) .stat-block{ border-left: 1px solid rgba(47, 96, 153, .18); } } /* tablet (2 across): left hairline on the right column, top on rows 2-3 */ @media (min-width: 640px) and (max-width: 959px){ .vc-numbers > div:nth-child(even) .stat-block{ border-left: 1px solid rgba(47, 96, 153, .18); } .vc-numbers > div:nth-child(n+3) .stat-block{ border-top: 1px solid rgba(47, 96, 153, .18); padding-top: 26px !important; } } /* mobile (stacked): top hairline between stats */ @media (max-width: 639px){ .vc-numbers > div:not(:first-child) .stat-block{ border-top: 1px solid rgba(47, 96, 153, .18); padding-top: 24px !important; } .vc-numbers .stat-block::before{ margin-bottom: 14px; } } /* ##################### END VALANTE ENHANCEMENTS -- Valante by the Numbers ####### */ /* ##################################################################### VALANTE ENHANCEMENTS -- "Our Funds" cards, per ref. Same hover-reveal mechanic as "Our Way To Invest": full-bleed media, navy scrim, title pinned bottom, description reveals on hover. No new YOOtheme component -- this is the same Grid + Content card you already have (confirmed: your cards already have the hover-video wired up via the Image element's own Video field -- el-hover-image/uk-transition-toggle). Scoped to .vc-funds -- add that class to the GRID/ROW element (same pattern as .vc-invest / .vc-idc / .vc-numbers). 2026-10-05 ##################################################################### */ .vc-funds .el-item{ position: relative; height: 100%; overflow: hidden; border-radius: 16px; isolation: isolate; aspect-ratio: 3 / 4.3; transition: transform .45s var(--vc-ease), box-shadow .45s var(--vc-ease); } .vc-funds .el-item:hover{ transform: translateY(-6px); box-shadow: 0 22px 44px -16px rgba(2,17,49,.55); } /* media fills the whole card (poster image + hover video) */ .vc-funds .uk-card-media-top{ position: absolute !important; inset: 0; margin: 0 !important; z-index: 0; } .vc-funds .uk-card-media-top > a, .vc-funds .uk-card-media-top .uk-inline-clip{ display: block; width: 100%; height: 100%; } /* bluish photo tint, matching the reference -- a color-blend overlay keeps the photo's own light/dark detail while pulling its hue toward brand navy, so natural-color photos (Ascend, Ascend II) read consistently with the already-blue renders (Saudi, Venezuela, Campi). A separate multiply layer darkens the result by about 25%% (mix-blend-mode: color takes its luminosity from the photo, not the tint color, so darkening needs its own layer rather than a darker tint color). CSS only, nothing needed in Photoshop. */ .vc-funds .uk-card-media-top::before{ content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.25); mix-blend-mode: multiply; pointer-events: none; } .vc-funds .uk-card-media-top::after{ content: ""; position: absolute; inset: 0; z-index: 2; background: var(--vc-clay, #2f6099); mix-blend-mode: color; pointer-events: none; } .vc-funds .el-image{ width: 100% !important; height: 100% !important; object-fit: cover; } .vc-funds .uk-card-media-top video{ width: 100%; height: 100%; object-fit: cover; } /* navy scrim -- light at rest so the image/video shows, deeper on hover */ .vc-funds .el-item::after{ content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(2,17,49,.34) 0%, rgba(2,17,49,.06) 22%, rgba(2,17,49,0) 46%, rgba(2,17,49,.55) 76%, rgba(2,17,49,.92) 100%); transition: background .5s var(--vc-ease); } .vc-funds .el-item:hover::after{ background: linear-gradient(180deg, rgba(2,17,49,.46) 0%, rgba(2,17,49,.38) 34%, rgba(2,17,49,.68) 72%, rgba(2,17,49,.93) 100%); } /* text overlay pinned to the bottom; pointer-events off so hover/click reach the media link beneath (keeps the video playing on hover). Your Title field is plain-text-only (no HTML) and this Grid component has no spare image slot -- so the logo is done as CSS image-replacement on the Title itself: the fund name stays real text (kept in the DOM for accessibility/SEO) but is visually swapped for a background-image logo. Which logo shows is picked by a per-item class (Advanced > Classes), e.g. "vc-logo-ascend1" -- see the mapping at the bottom of this block. */ .vc-funds .uk-card-body{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0 !important; padding: 20px 18px 22px !important; display: flex; flex-direction: column-reverse; /* title/logo bottom, desc above */ pointer-events: none; } .vc-funds .el-title{ margin: 0 !important; } .vc-funds .el-title a{ display: block; height: 30px; background-repeat: no-repeat; background-position: left bottom; background-size: contain; font-size: 0; line-height: 0; color: transparent; } .vc-funds .el-title::after{ content: ""; display: block; width: 26px; height: 2px; background: var(--vc-clay-2, #7ba7d0); margin-top: 12px; transition: width .45s var(--vc-ease); } .vc-funds .el-item:hover .el-title::after{ width: 46px; } /* description -- hidden until hover, revealed above the title/logo */ .vc-funds .el-content{ color: rgba(250,249,241,.9) !important; font-size: 12.5px !important; line-height: 1.55 !important; margin: 0 !important; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--vc-ease), opacity .45s var(--vc-ease), margin .5s var(--vc-ease); } .vc-funds .el-item:hover .el-content, .vc-funds .el-item:focus-within .el-content{ max-height: 220px; opacity: 1 !important; margin-top: 12px !important; } /* the separate "Read More" is redundant now (whole card links) -- hide it */ .vc-funds .uk-card-body > .uk-margin-top{ display: none !important; } /* touch devices can't hover: show the description, keep a firmer scrim */ @media (hover: none){ .vc-funds .el-content{ max-height: 220px; opacity: 1 !important; margin-top: 12px !important; } .vc-funds .el-item::after{ background: linear-gradient(180deg, rgba(2,17,49,.42) 0%, rgba(2,17,49,.32) 34%, rgba(2,17,49,.66) 72%, rgba(2,17,49,.92) 100%); } } @media (prefers-reduced-motion: reduce){ .vc-funds .el-item:hover{ transform: none; } .vc-funds .el-content{ max-height: 220px; opacity: 1 !important; margin-top: 12px !important; } } /* per-fund logo images -- matched to the class you add on each item (Advanced tab > Classes). All 5 files confirmed white/near-white, so they read cleanly over the dark scrim. */ .vc-funds .vc-logo-ascend1 .el-title a{ background-image: url('../../../images/template_images/sections/funds/ascend_1/acend_i_logo_hero.webp'); } .vc-funds .vc-logo-ascend2 .el-title a{ background-image: url('../../../images/template_images/sections/funds/ascend_2/acend_ii_logo_hero.webp'); } /* Saudi Eksab, Venezuela and Campi are much more square (~1.8:1, two of them near-identical) than Ascend's wide wordmark (5.4:1) -- the shared height:30px above shrinks a square mark's visible width far more than a wide one, which is why they read small/faint. Not a resolution issue (all high-res/vector) -- just give each its own height so they carry similar visual weight. Tune these further to taste once you see them. */ .vc-funds .vc-logo-saudi .el-title a{ height: 76px; background-image: url('../../../images/template_images/sections/funds/saudi_eksab/saudi_eksab_logo.svg'); } .vc-funds .vc-logo-venezuela .el-title a{ height: 80px; background-image: url('../../../images/template_images/sections/funds/venezuela/venezuela_emerge_logo_home.webp'); } .vc-funds .vc-logo-campi .el-title a{ height: 80px; background-image: url('../../../images/template_images/sections/funds/campi/logo_campi_home.webp'); } /* fund status "signal" -- translucent top-right badge with a colored dot. Pure CSS, no markup needed. Per card, in the Advanced tab: 1) Classes: add "vc-status" plus ONE color modifier, alongside the existing vc-logo-* class, e.g. "vc-logo-ascend1 vc-status vc-status--closed" 2) Attributes: add a key/value pair data-status = Fund Raising (or whatever label you want -- it renders uppercase automatically, so type it in normal case) (Built as a ::before pseudo-element directly on the card, not inside Meta/Content, because Meta has no code/source option and Content is the hover-reveal description -- anything placed there stays invisible until hover.) Color modifiers: vc-status--closed (white) . vc-status--raising (blue) . vc-status--active (teal) . vc-status--realizing (green) . vc-status--coinvestment (purple). */ .vc-funds .vc-status::before{ content: attr(data-status); position: absolute; top: 12px; right: 12px; z-index: 3; display: inline-block; background: #84C3E4; color: #02093B; font-size: 10px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; padding: 5px 9px; border-radius: 999px; pointer-events: none; } /* ##################### END VALANTE ENHANCEMENTS -- Our Funds cards ####### */ /* ##################################################################### VALANTE ENHANCEMENTS -- "Our Funds" cards, LARGE variant, for the "Explore Other Funds" row on each fund detail page. Same component, same mechanic, same markup (el-item/uk-card-media-top/el-title/ el-content/vc-logo-*/vc-status) as the home page's "Our Funds" grid -- stack BOTH classes on the Grid/Row element: "vc-funds vc-funds-lg". vc-funds does all the heavy lifting (tint, hover video, scrim, logo image-replacement, status pill, hover lift); this block only bumps the size-related numbers so these cards read larger than home's (this row is 4 cards across a wider container vs. home's 5, so they're already somewhat bigger from layout alone -- this adds a deliberate bump on top of that: less-extreme aspect-ratio, bigger logo/type/ padding/radius). Per-card logo classes (vc-logo-ascend1/ascend2/ saudi/venezuela/campi) and vc-status + data-status are unchanged, same values as home. 2026-10-07 */ .vc-funds.vc-funds-lg .el-item{ aspect-ratio: 4 / 4.6; border-radius: 18px; } .vc-funds.vc-funds-lg .uk-card-body{ padding: 26px 24px 28px !important; } .vc-funds.vc-funds-lg .el-title a{ height: 38px; } /* this build's "Explore Other Funds" cards wrap the WHOLE card in one (uk-link-toggle), so el-title has no inner of its own like home's cards do -- apply the same image-replacement technique directly to .el-title here, scoped to this variant only so home's cards (which DO have a nested ) are untouched. */ .vc-funds.vc-funds-lg .el-title{ position: relative; display: block; height: 38px; background-repeat: no-repeat; background-position: left bottom; background-size: contain; font-size: 0; line-height: 0; color: transparent; } .vc-funds.vc-funds-lg .vc-logo-ascend1 .el-title{ background-image: url('../../../images/template_images/sections/funds/ascend_1/acend_i_logo_hero.webp'); } .vc-funds.vc-funds-lg .vc-logo-ascend2 .el-title{ background-image: url('../../../images/template_images/sections/funds/ascend_2/acend_ii_logo_hero.webp'); } .vc-funds.vc-funds-lg .vc-logo-saudi .el-title{ height: 67px; background-image: url('../../../images/template_images/sections/funds/saudi_eksab/saudi_eksab_logo.svg'); } .vc-funds.vc-funds-lg .vc-logo-venezuela .el-title{ height: 60px; background-image: url('../../../images/template_images/sections/funds/venezuela/venezuela_emerge_logo_home.webp'); } .vc-funds.vc-funds-lg .vc-logo-campi .el-title{ height: 49px; background-image: url('../../../images/template_images/sections/funds/campi/logo_campi_home.webp'); } /* the tick is positioned OUTSIDE el-title's own box (absolute, anchored to its bottom edge) rather than left in normal document flow -- the logo is a background-image with no real flow content to push against, so a flow-positioned ::after (home page's technique, where the logo lives on a real flow-rendered instead) rendered at the TOP of the box instead of below the logo here. Chata caught this visually ("blue lines go underneath the logos please") -- confirmed via getBoundingClientRect that the old version rendered the tick flush to el-title's top edge, decoupled from the bottom-anchored logo. */ .vc-funds.vc-funds-lg .el-title::after{ content: ""; position: absolute; left: 0; bottom: -17px; width: 32px; height: 3px; background: var(--vc-clay-2, #7ba7d0); transition: width .45s var(--vc-ease); } .vc-funds.vc-funds-lg .el-item:hover .el-title::after{ width: 56px; } .vc-funds.vc-funds-lg .el-content{ font-size: 14.5px !important; line-height: 1.55 !important; } .vc-funds.vc-funds-lg .vc-status::before{ font-size: 11px; padding: 6px 11px; top: 14px; right: 14px; } /* per-fund logo heights -- Ascend's wide wordmark needs no height override (same image-replacement technique, just a taller box). Saudi/Venezuela/Campi reduced ~30% per Chata's ask (2026-10-07). */ .vc-funds.vc-funds-lg .vc-logo-saudi .el-title a{ height: 67px; } .vc-funds.vc-funds-lg .vc-logo-venezuela .el-title a{ height: 60px; } .vc-funds.vc-funds-lg .vc-logo-campi .el-title a{ height: 49px; } @media (max-width: 639px){ .vc-funds.vc-funds-lg .el-item{ aspect-ratio: 3 / 4; } } /* ##################### END VALANTE ENHANCEMENTS -- Our Funds cards, LARGE variant ####### */ /* ##################### VALANTE ENHANCEMENTS -- "We search for outstanding value creation opportunities" / value-prop row -- 2026-10-05 ########## Reference uses plain editorial text (no icons), ported here the same way as "Valante by the Numbers": Sublayout boxes instead of a fixed-field Grid, so the content is free-form text with one bolded word/phrase per heading, colored via CSS rather than hand-set per word. Wrapper class `vc-values` added by Chata to the row in Page Builder (Advanced > Classes); the bolded words are plain tags from the heading field's own editor, also added by her -- no markup beyond that needed. */ .vc-values h5{ font-size: 23px; font-weight: 700; color: #293945; margin: 0 0 10px; } .vc-values h5::before{ content: ""; display: block; width: 26px; height: 3px; background: var(--vc-clay, #2f6099); margin-bottom: 12px; } .vc-values h5 strong{ color: var(--vc-clay, #2f6099); font-weight: 700; } .vc-values p{ font-size: 14px; color: #4d5865; line-height: 1.55; margin: 0; } /* hairline divider between columns, same treatment as "Valante by the Numbers" -- toggle-independent, no reliance on YOOtheme's native row Dividers option. */ .vc-values > div:not(:first-child){ border-left: 1px solid rgba(47,96,153,.18); } /* the main section title's highlighted word ("outstanding") -- same + color-via-CSS approach as the 4 headings below it. */ .vc-values-title strong{ color: var(--vc-clay, #2f6099); font-weight: inherit; } /* ##################### END VALANTE ENHANCEMENTS -- value-prop row ####### */ /* ##################################################################### VALANTE ENHANCEMENTS -- "Track Record" (editorial), per reference, simplified. Chata rebuilt this as a clean Sublayout row (headline + text per column, no counter widget/JS for now -- she'll add a YOOtheme animation to the numbers later), scoped to .vc-track on the row. Numbers/tick left-aligned to match the description text per her request (rather than centered, which looked mismatched once the caption went left-aligned on its own). 2026-10-05 ##################################################################### */ .vc-track .uk-heading-large{ font-size: clamp(1.55rem, 2.35vw, 2.3rem) !important; line-height: 1.05 !important; font-weight: 700 !important; letter-spacing: -.02em !important; color: #ffffff !important; text-align: left !important; white-space: nowrap; font-variant-numeric: tabular-nums; margin: 0 !important; position: relative; } .vc-track .uk-heading-large::before{ content: ""; display: block; width: 28px; height: 3px; background: var(--vc-clay-2, #7ba7d0); margin: 0 0 18px; } .vc-track .uk-text-lead.uk-text-secondary, .vc-track .uk-text-meta, .vc-track .vc-tcap{ color: rgba(250, 249, 241, .82) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.45 !important; text-align: left !important; margin: 12px 0 0 !important; max-width: 22ch; } .vc-track .uk-text-lead.uk-text-secondary p{ margin: 0; } /* Venezuela fund, 2026-10-07 -- second supporting-text line (e.g. "4-5x+ net MOIC (base case)" under "Target Net IRR", or the 2-sentence description under "Core"/"Opportunistic" on the dark section). Ported from the reference's own ".vc-tsub" rule (read via live CSSOM, not guessed) -- the reference defines this per color-variant rather than as one shared base rule, so this build does the same: dark/default colors here, ".vc-track--light" overrides below for the white-bg variant. Targets whatever class the supporting Text element in Builder already carries -- "vc-tsub" is the standard going forward, but "uk-text-small" (used for the 2-line Fund Term caption) and "uk-width-medium" (used for the dark section's longer description) are covered too since that's what's already built. A supporting-text element with NONE of these classes (e.g. currently the "Target Net IRR" sub-line) won't pick this up -- add "uk-text-small" to it in Builder to match the Fund Term item's own pattern. */ .vc-track .vc-tsub, .vc-track .uk-text-small, .vc-track .uk-width-medium{ display: block; margin-top: 10px !important; font-size: 12.5px !important; line-height: 1.55 !important; color: rgba(250, 249, 241, .62) !important; font-weight: 500 !important; max-width: 34ch; } .vc-track .uk-text-small p, .vc-track .uk-width-medium p{ margin: 0; } /* Venezuela fund, 2026-10-07 -- ".vc-track--light" modifier for the big-numbers row on a WHITE background (the fund page's own opening stats row, as opposed to the dark "Track Record"-style section .vc-track was originally built for). Stack both classes on the row: "vc-track vc-track--light". Ported from the reference's own ".vc-track--vez" rule (read via live CSSOM on the Netlify reference fund page, not guessed) -- it's a per-fund-sounding name in the reference but the rule itself is generic (just a light-bg color variant), so reusing the same mechanism here as a reusable modifier rather than inventing a new name. IMPORTANT: ".vc-track .uk-heading-large" above forces color:#fff !important for the dark-bg case -- that MUST be overridden here (confirmed live: without this override the big numbers render invisible, white-on-white). Matches the sitewide navy "Primary text" token (#021126) that Chata's own "uk-text-primary" style already uses on this row by default -- this override exists so the number stays correct color even if ".vc-track" is applied to a row that isn't separately carrying uk-text-primary. */ .vc-track--light .uk-heading-large{ color: #021126 !important; } .vc-track--light .uk-heading-large::before{ background: #84C3E4; } .vc-track--light .uk-text-lead.uk-text-secondary, .vc-track--light .uk-text-meta, .vc-track--light .vc-tcap{ color: #4A5568 !important; } .vc-track--light .vc-tsub, .vc-track--light .uk-text-small, .vc-track--light .uk-width-medium{ color: #8A93A2 !important; } /* ---- hairline dividers, same responsive breakpoints/values as .vc-numbers ---- */ @media (min-width: 960px){ .vc-track > div:not(:first-child) > .uk-panel.uk-margin{ border-left: 1px solid rgba(47, 96, 153, .18); padding-left: clamp(12px, 1.3vw, 22px); } } @media (min-width: 640px) and (max-width: 959px){ .vc-track > div:nth-child(even) > .uk-panel.uk-margin{ border-left: 1px solid rgba(47, 96, 153, .18); padding-left: clamp(12px, 1.3vw, 22px); } .vc-track > div:nth-child(n+3) > .uk-panel.uk-margin{ border-top: 1px solid rgba(47, 96, 153, .18); padding-top: 26px !important; } } @media (max-width: 639px){ .vc-track > div:not(:first-child) > .uk-panel.uk-margin{ border-top: 1px solid rgba(47, 96, 153, .18); padding-top: 24px !important; } .vc-track .uk-heading-large::before{ margin-bottom: 14px; } } /* ##################### END VALANTE ENHANCEMENTS -- Track Record ####### */ /* ##################################################################### VALANTE ENHANCEMENTS -- "Our Leaders" (home page) name/title caption. Per reference (.vc-leaders rules there), scoped locally to the grid's existing .team-reveal-grid class so no extra Builder class is needed. Chata set a real Hover Image (color photo) on each leader item, which made YOOtheme fall back to its default hover-reveal panel behavior for the name/title block (position:absolute, opacity:0 until hover/focus) -- same component, but its native "Center overlay" panel styling only kicks in once hover media is present. Forcing the panel back to static flow below the photo restores the always-visible caption, matching the reference (which achieves the desaturate/color effect via a CSS filter instead of two source images, so it never triggers that default). 2026-10-05 ##################################################################### */ .team-reveal-grid .el-item{ flex-direction: column; display: flex !important; overflow: visible !important; max-width: none !important; } .team-reveal-grid .el-item > .uk-position-center{ position: static !important; transform: none !important; opacity: 1 !important; background: transparent !important; padding: 0 !important; margin: 0 !important; } .team-reveal-grid .el-item .uk-overlay{ text-align: left; position: static !important; background: transparent !important; padding: 16px 2px 0 !important; } .team-reveal-grid .el-title{ color: var(--vc-navy, #142131) !important; font-size: clamp(16px, 1.4vw, 19px) !important; font-weight: 700 !important; letter-spacing: -.01em !important; line-height: 1.2 !important; margin: 0 0 6px !important; text-transform: none !important; } .team-reveal-grid .el-meta{ color: var(--vc-clay, #2f6099) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase !important; margin: 0 !important; } /* ##################### END VALANTE ENHANCEMENTS -- Our Leaders caption ####### */ /* ---- fix: hover-image was stretching to the full card height (photo + caption) instead of just the photo. Root cause: .el-hover-image is position:absolute;inset:0 out of the box, sized against its nearest positioned ancestor -- which is .el-item, and .el-item's height now spans photo+caption stacked (flex column) since the fix above made the caption flow statically below instead of overlaying the photo. Fixed by switching .el-item to a 2-row CSS grid (row 1 = photo, row 2 = caption) and placing .el-image/.el-hover-image in the SAME grid cell (row 1, col 1) with the hover image de-absolutized (position:static) -- they overlap naturally via grid stacking (DOM order wins, so the color photo painting on top of the B&W one is correct), sized to match .el-image's own intrinsic photo dimensions instead of the whole card. 2026-10-05 */ .team-reveal-grid .el-item{ display: grid !important; grid-template-columns: 1fr !important; } .team-reveal-grid .el-item > .el-image{ grid-column: 1; grid-row: 1; } .team-reveal-grid .el-item > .el-hover-image{ grid-column: 1; grid-row: 1; position: static !important; inset: auto !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; } .team-reveal-grid .el-item > .uk-position-center{ grid-column: 1; grid-row: 2; } /* ##################################################################### VALANTE ENHANCEMENTS -- Footer: "Get in touch" button + column title/ country-name blue + nav chevron/hover colors + column line-height alignment. Chata rebuilt the footer layout herself in Builder; these are pure color/spacing fixes ported from the reference's .vc-foot-* rules. Scoped to the `footer` tag itself since this template renders only one