/* site-overrides.css — local readability/layout tweaks NOT present in the Webflow source. Loaded after the Webflow stylesheets on every page (see scripts/mirror.mjs). Each rule fixes an incomplete-styling issue in the Webflow staging design. */ /* 1) Investor "trusted by" section renders on the light body (#f7f6ff), but its logos are near-white (#FEEAE6) and its eyebrow label is brand orange — both meant for a dark backdrop, so they're nearly invisible. Give the section its intended dark bg. */ .section_marquee-desktop, .section_marquee-mobile { background-color: #190501 !important; } /* 2) Blog & Learning Hub filter bar (.subnav_learn-hub, in the fixed header) had ~200px of vertical padding — a huge light band that also overlapped the hero heading below it. Trim it to a compact bar; the hero heading then clears it naturally. */ .subnav_learn-hub .padding-global { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } .subnav_learn-hub .subnav_content-wrap { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; } /* 3) The footer's pre-footer band (.pre-footer_wrap) is empty in the Webflow source (only decorative watermark images, no heading/copy/CTA), leaving a ~300px black gap above the footer links. Collapse it until real content is added in Webflow. */ .pre-footer_wrap { display: none !important; } /* 4) Footer nav links (.footer_link) and social icons (.nav_social-link) are brand-600 (dark red #951c04) on the near-black footer/nav — contrast ~2.3:1, hard to read at rest. Raise to the readable brand orange (brand-500, ~6:1). Footer links turn white on hover. NOTE: Webflow drives these colors via -webkit-text-fill-color (for gradient text), which overrides `color`, so both must be set. */ .footer_link { color: var(--base-color-brand--500) !important; -webkit-text-fill-color: var(--base-color-brand--500) !important; } .footer_link:hover { color: var(--base-color-neutral--white) !important; -webkit-text-fill-color: var(--base-color-neutral--white) !important; } .nav_social-link, .nav_social-link svg { color: var(--base-color-brand--500) !important; -webkit-text-fill-color: var(--base-color-brand--500) !important; } /* 5) Brand-orange accent text (section eyebrows via .topheading_content-wrapper, and .text-color-500 labels/names) is brand-500 (#fa5838) — only ~2.8:1 on the light sections (fails AA). Darken to a readable burnt-orange (#c2410c ≈ 4.8:1 on light) by default, then RESTORE the bright brand orange inside dark sections, where it already has strong contrast. #c2410c also stays legible (~3.8:1) on any dark section not listed, so a missed container degrades gracefully rather than becoming invisible. */ :is(.text-color-500, .topheading_content-wrapper, .block-top-wrapper, .block-top-wrapper-old, .blog_card-bot-wrap), :is(.topheading_content-wrapper, .block-top-wrapper, .block-top-wrapper-old, .blog_card-bot-wrap) * { color: #c2410c !important; -webkit-text-fill-color: #c2410c !important; } :is(.background-color-800, .background-color-black, .section_marquee-desktop, .section_marquee-mobile) :is(.text-color-500, .topheading_content-wrapper, .block-top-wrapper, .block-top-wrapper-old, .blog_card-bot-wrap), :is(.background-color-800, .background-color-black, .section_marquee-desktop, .section_marquee-mobile) :is(.topheading_content-wrapper, .block-top-wrapper, .block-top-wrapper-old, .blog_card-bot-wrap) * { color: var(--base-color-brand--500) !important; -webkit-text-fill-color: var(--base-color-brand--500) !important; } /* 6) About Us page (scoped via the page-about class added to its ): trim excessive vertical whitespace so there's less to scroll. Hide the empty placeholder section and halve the oversized hero / section top padding (160px -> 80px). */ .page-about .section_why-join { display: none !important; } .page-about .padding-hero.is-home { padding-top: 5rem !important; } .page-about .padding-section-xlarge { padding-top: 5rem !important; } /* About CTA ("Build the chain you own.") — two home-page design choices misfire here: (a) .footer has margin-top:-156px + z-index:100 so it overlaps the previous section (on home it tucks under the solutions band's empty decorative bottom); on About the CTA button lands in that overlap and gets painted over. Drop the overlap on About. (b) the reused .is-solutions band is pinned to a tall fixed height (home design) and clips with overflow:hidden; let it fit its content so the button isn't cut off. */ .page-about .footer { margin-top: 0 !important; } .page-about .background-color-black.is-solutions, .page-about .background-color-black.is-solutions .padding-global { height: auto !important; min-height: 0 !important; overflow: visible !important; } /* 7) Blog post body: the Webflow post grid is a 2-column layout (210px meta sidebar + 670px content). Our Markdown structure bundles meta + body into one grid child, which landed in the 210px column (mobile-narrow). Collapse the grid to a single centered reading column and stretch the body wrapper to fill it. */ .blog-post_grid { grid-template-columns: minmax(0, 44rem) !important; justify-content: center !important; grid-column-gap: 0 !important; } .blog-post_grid > * { grid-column: 1 !important; /* Webflow places the "learn more" block in col 2; stack it instead */ } .blog-post_grid .flex-wrapper.gap-20 { align-items: stretch !important; } /* 8) FAQ (scoped via .page-faq on ): rebuilt as native

accordions driven by CMS data, reusing the Webflow faq_* classes for appearance. Native

gives a robust open/close with no Webflow-interaction JS. Style the

as the question row, hide the default disclosure marker, and animate the "+" toggle into a "-" on open. */ .page-faq .faq_grid { grid-template-columns: minmax(0, 48rem) !important; justify-content: center !important; } .page-faq details.faq_wrap { cursor: pointer; } .page-faq summary.faq_question { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; list-style: none; } .page-faq summary.faq_question::-webkit-details-marker { display: none; } /* Webflow gives .faq_answer an explicit `display`, which (author origin) beats the browser's UA rule that hides a closed

's children — so answers would show even when closed. Force it hidden while closed; when open, Webflow's own display takes over again. */ .page-faq details.faq_wrap:not([open]) .faq_answer { display: none !important; } /* The "+" is two lines (one vertical via .is-ver); fade the vertical one out on open so it reads as a "-". */ .page-faq .faq_toggle-line { transition: opacity 0.2s ease; } .page-faq details.faq_wrap[open] .faq_toggle-line.is-ver { opacity: 0 !important; } .page-faq .faq_answer { padding-top: 1rem; } /* 9) About "Vision" band sits on the bright brand-orange background (.background-color-500). The global eyebrow/heading orange (rule #5) plus Webflow's default heading color would render burnt-orange-on-orange (invisible). Force high-contrast near-black text on the whole vision band so the eyebrow, headline, and tagline all read clearly. */ .page-about .section_vision, .page-about .section_vision h2, .page-about .section_vision .text-color-700, .page-about .section_vision .topheading_content-wrapper, .page-about .section_vision .topheading_content-wrapper * { color: #1a0a06 !important; -webkit-text-fill-color: #1a0a06 !important; } /* 10) Home hero headline ("Your Chain. Your Economics.") wrapped to two lines on wide screens and the tall hero padding pushed the investor logos below the fold. Keep the headline on a single line at desktop widths and tighten the hero's vertical padding so the hero + "trusted by" logos sit within one viewport (as on the source site). Scoped to desktop; small screens keep the natural wrap + full padding. */ @media screen and (min-width: 992px) { .page-home .section_hero .hero_content h1 { white-space: nowrap; } /* Tighten the hero's vertical padding so the full hero — headline, CTAs, and the FIREBAR ("flowing blocks") animation below it — lands within one screen, as on the source site. */ .page-home .section_hero .padding-hero { padding-top: 2.25rem !important; padding-bottom: 0.5rem !important; } } /* 11) Investor / builder logo wall: the source site showed these much larger, with Founders Fund + Pantera (the first two in the list) as the largest, top row. The migrated wall collapsed to a uniform ~20px. Restore a larger base size and give the first two logos top billing. */ .section_marquee-desktop .logos_wrapper .marquee_logo { height: 26px !important; max-height: 26px !important; width: auto !important; max-width: none !important; } .section_marquee-desktop .logos_wrapper .marquee_logo-wrap:nth-child(-n+2) .marquee_logo { height: 46px !important; max-height: 46px !important; } /* Center the wall; the two large lead logos (FF, Pantera) naturally head the wall. */ .section_marquee-desktop .logos_wrapper.no-padding { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.75rem 3rem; } /* Mobile marquee: bump the base logo size a touch too. */ .section_marquee-mobile .marquee_logo { height: 24px !important; max-height: 24px !important; width: auto !important; } /* 12) About hero headline ("We built Altius for highly ambitious teams.") wrapped to three lines at the default 72px. Ease the size down on desktop so it settles into two balanced lines within the hero's medium container. */ @media screen and (min-width: 992px) { .page-about .section_hero .hero_content h1 { font-size: 3.25rem; line-height: 1.08; } } /* 13) Blog + Learning Hub (.page-learn / .page-blog): the old empty per-category blocks + "View all articles" links were replaced by a single article grid with a toolbar at the top — a live search box plus a category dropdown (options built from the articles' categories). Styled for the light content band (.background-color-100). */ .page-learn .learn-toolbar, .page-blog .learn-toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; margin-bottom: 2rem; } .page-learn .learn-search_input, .page-blog .learn-search_input, .page-learn .learn-cat_select, .page-blog .learn-cat_select { padding: 0.8rem 1rem; font-size: 1rem; line-height: 1.4; color: #190501; background: #fff; border: 1px solid rgba(25, 5, 1, 0.15); border-radius: 8px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .page-learn .learn-search_input, .page-blog .learn-search_input { flex: 1 1 260px; max-width: 460px; } .page-learn .learn-cat_select, .page-blog .learn-cat_select { flex: 0 0 auto; cursor: pointer; } .page-learn .learn-search_input::placeholder, .page-blog .learn-search_input::placeholder { color: rgba(25, 5, 1, 0.45); } .page-learn .learn-search_input:focus, .page-blog .learn-search_input:focus, .page-learn .learn-cat_select:focus, .page-blog .learn-cat_select:focus { border-color: #c2410c; box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.15); } .page-learn .learn-noresults, .page-blog .learn-noresults { padding: 1.5rem 0; color: rgba(25, 5, 1, 0.6); font-size: 1rem; } /* 14) Blog + Learning Hub: the Webflow hero carried ~290px of top padding (.padding-global 100px + .padding-hero 192px) and the content band another 80px, leaving a big empty gap above the article grid. Trim it so the grid sits higher. Form controls don't inherit font-family — pin the search/select to the site font (Matter). */ .page-blog .section_hero .padding-global, .page-learn .section_hero .padding-global { padding-top: 2rem !important; padding-bottom: 1rem !important; } .page-blog .section_hero .padding-hero, .page-learn .section_hero .padding-hero { padding-top: 5rem !important; /* clears the fixed nav */ padding-bottom: 1.5rem !important; } .page-blog .padding-section-medium, .page-learn .padding-section-medium { padding-top: 2.5rem !important; } /* content band's own .padding-global (100px) + the flex-wrapper's 120px row gap between the toolbar and the grid were the bulk of the empty space. */ .page-blog .background-color-100 .padding-global, .page-learn .background-color-100 .padding-global { padding-top: 1.5rem !important; padding-bottom: 3rem !important; } .page-blog .flex-wrapper.gap-blog, .page-learn .flex-wrapper.gap-blog { gap: 2rem !important; } .page-blog .learn-search_input, .page-blog .learn-cat_select, .page-learn .learn-search_input, .page-learn .learn-cat_select { font-family: inherit; } /* 15) Home hero: the oscillating-bars lottie sat ~100px below the CTAs because the hero's .padding-global has 100px top/bottom. Tighten it so the bars sit just under the text, closer to the source site. (rule 10 already trimmed the inner .padding-hero.) */ .page-home .section_hero .background-color-black > .padding-global { padding-top: 8rem !important; /* breathing room above the headline, matching the source */ padding-bottom: 1.5rem !important; } /* 16) Footer: the Webflow footer had 100px top/bottom padding plus a -156px overlap margin that made the space above it differ per page (and needed a per-page override on About). Trim the padding and drop the overlap so the footer is consistent on every page. */ .footer .padding-global { padding-top: 4rem !important; padding-bottom: 4rem !important; } .footer { margin-top: 0 !important; } /* 17) Home "Institutional-grade by default" (Approach): the body copy was capped at .max-width-440, leaving it in a narrow left column beneath a full-width heading. Let it span the section width like the heading. */ .page-home .section_approach .max-width-440 { max-width: none !important; }