/* Beyond Fiction brand palette override (dark green / sage / cream system). Loaded after the Webflow stylesheet — color values only. */ /* Bebas Neue (condensed display titles) and extra Poppins weights (body copy) for the "Why Beyond Fiction?" section — neither is in the page's WebFontConfig google.families list, so pulled in here instead of touching the on all 17 pages. */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@400;500&display=swap'); /* The site has exactly one design — the light one. Without a color-scheme declaration, mobile browsers in dark mode (Samsung Internet, and Chrome Android's "Auto Dark Theme") algorithmically invert the page and invent their own dark version, which is why the site rendered wrong on phones set to dark. Mirrored by a in every page's , which applies earlier than this stylesheet and so prevents a brief darkened flash before the CSS arrives. Keep the two in step. */ :root { /* Force-dark defence. Browsers only invent a dark theme for sites that look like they have none, so we claim to handle dark ourselves — see the prefers-color-scheme block at the end of this file, where our "dark theme" is deliberately identical to the light one. Why not "only light": that is the cleaner, more modern opt-out and newer Chromium honours it, but older Samsung Internet builds ignore it and force-darken anyway. Declaring dark support is the older, far more widely respected signal, and its failure mode is the same — the light design. This matters because .bf-top's hero background (home-bg.svg) is built from three near-identical creams (#F6F1E7 / #EFE8DA / #F3EDE1). They are invisible against each other normally, but a force-dark pass inverts them to visibly different darks — which is what produced the hard diagonal splitting the hero on the client's handset. */ color-scheme: light dark; --orange-100: #1F3D2E; } /* Belt-and-braces: some engines darken the canvas before honouring the root declaration, so pin the page's base colours explicitly. */ html, body { background-color: #FFFFFF; color: #030202; } .section-sub-title:where(.w-variant-65117735-e997-43a3-3e5a-aade265bf47d) { background-color: #1F3D2E1a; border-color: #1F3D2E21; } .approach-330, .approach-158 { background-image: linear-gradient(#1F3D2E, #8FA87866); } .number-card-last { background-image: linear-gradient(135deg, #1F3D2E, #8FA878); } .hero-break-desktop { display: none; } @media screen and (min-width: 992px) { .hero-break-desktop { display: block; } } .brand-image { width: auto; height: 40px; } @media screen and (max-width: 991px) { .brand-image { height: 40px; } } @media screen and (max-width: 479px) { .brand-image { height: 36px; } } /* Domain-name marquee. Replaces the partner logo strip while keeping the same layout role as .partner-logo (flex:none + gap-12xl + opacity .5), so the Webflow marquee interaction — which translates each group by a percentage of its own width — keeps looping seamlessly. */ /* The ticker itself has zero vertical padding in the shared stylesheet, so it was butting straight up against the section above/below with no breathing room. */ .section.partner { padding-top: 2.5rem; padding-bottom: 2.5rem; } @media screen and (max-width: 767px) { .section.partner { padding-top: 1.75rem; padding-bottom: 1.75rem; } } .partner-domain { flex: none; /* Fallback matters: if the Webflow stylesheet is slow or fails, an undefined var() would collapse the gap to 0 and the items would run together. */ margin-right: var(--_gap---gap-12xl, 3.75rem); font-family: Poppins, sans-serif; font-size: 1.5rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: #3F4550; opacity: 0.5; white-space: nowrap; } @media screen and (max-width: 991px) { .partner-domain { font-size: 1.25rem; } } @media screen and (max-width: 479px) { .partner-domain { font-size: 1.125rem; } } /* Footer marquee ("LET'S GO BEYOND FICTION") has zero gap between repeats in the template, so consecutive copies run together ("FICTIONLET'S GO"). This marquee uses the same percentage-based translate as .partner-domain, so a margin here is free to change without touching the loop. */ .footer-tricker-text { margin-right: 2.5rem; } @media screen and (max-width: 767px) { .footer-tricker-text { margin-right: 1.5rem; } } /* Legal pages: disclaimer, cookie policy, privacy policy, terms & conditions. Prose block deliberately carries no [animation] attribute, so it is never subject to the pre-hide rule and stays readable even if the Webflow interaction engine is slow to boot. */ .legal-body { max-width: 52rem; margin-top: 3rem; padding-bottom: 1rem; } /* The global h2 rule uses Anton, the condensed display face. That reads well as a page title but not as nine sub-headings inside body copy, so these fall back to the site's text face while the H1 above stays Anton like every other page. */ .legal-body h2 { margin: 2.25rem 0 0.75rem; font-family: "Inter Tight", sans-serif; font-size: 1.375rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; text-transform: none; color: #030202; } .legal-body h2:first-child { margin-top: 0; } .legal-body p, .legal-body li { margin: 0 0 0.9rem; font-size: 1rem; line-height: 1.75; color: #585858; } .legal-body ul { margin: 0 0 0.9rem; padding-left: 1.25rem; } .legal-body li { margin-bottom: 0.55rem; } .legal-body strong { color: #030202; font-weight: 600; } .legal-body a { color: #1F3D2E; text-decoration: underline; } @media screen and (max-width: 479px) { .legal-body { margin-top: 2rem; } .legal-body h2 { font-size: 1.1875rem; } } /* --------------------------------------------------------------------------- Article pages: the 5 deep-tech domains and the 4 education-gap pieces. Like .legal-body, none of this carries an [animation] attribute, so the copy never depends on the Webflow interaction engine booting to become visible. --------------------------------------------------------------------------- */ .article-chip { display: inline-block; margin-bottom: 1.25rem; padding: 0.5rem 1rem; border-radius: 100px; background-color: #1F3D2E1a; border: 1px solid #1F3D2E21; font-family: "Inter Tight", sans-serif; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: #1F3D2E; } .article-lead { max-width: 54rem; margin: 1.5rem 0 0; font-family: "Inter Tight", sans-serif; font-size: 1.25rem; font-weight: 500; line-height: 1.6; color: #2A2A2A; } .article-body { max-width: 54rem; margin-top: 3rem; padding-bottom: 1rem; } .article-body h2 { margin: 2.75rem 0 0.85rem; font-family: "Inter Tight", sans-serif; font-size: 1.5rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; text-transform: none; color: #030202; } .article-body h2:first-child { margin-top: 0; } .article-body p, .article-body li { margin: 0 0 1rem; font-family: "Inter Tight", sans-serif; font-size: 1.0625rem; line-height: 1.75; color: #585858; } .article-body ul { margin: 0 0 1rem; padding-left: 1.25rem; } .article-body li { margin-bottom: 0.6rem; } .article-body strong { color: #030202; font-weight: 600; } .article-body a { color: #1F3D2E; text-decoration: underline; } /* Emphasis blocks */ .article-quote { margin: 2.5rem 0; padding: 1.75rem 2rem; border-left: 3px solid #1F3D2E; background-color: #1F3D2E0d; border-radius: 0 12px 12px 0; } .article-quote p { margin: 0; font-size: 1.1875rem; font-weight: 500; line-height: 1.6; color: #030202; } .article-stats { display: flex; flex-wrap: wrap; gap: 1rem; margin: 2.5rem 0; } .article-stat { flex: 1 1 12rem; padding: 1.5rem; border-radius: 14px; background-color: #F4F1EC; } .article-stat-num { font-family: Anton, sans-serif; font-size: 2.25rem; line-height: 1; color: #1F3D2E; } .article-stat-label { margin-top: 0.6rem; font-family: "Inter Tight", sans-serif; font-size: 0.9375rem; line-height: 1.5; color: #585858; } /* Related links + CTA */ .article-related { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid #E4E0DA; } .article-related h2 { margin: 0 0 1.25rem; font-family: "Inter Tight", sans-serif; font-size: 1.25rem; font-weight: 600; color: #030202; } .article-related-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; } .article-related-grid a { padding: 0.7rem 1.1rem; border: 1px solid #E4E0DA; border-radius: 100px; font-family: "Inter Tight", sans-serif; font-size: 0.9375rem; font-weight: 500; color: #030202; text-decoration: none; transition: border-color .2s ease, color .2s ease; } .article-related-grid a:hover { border-color: #1F3D2E; color: #1F3D2E; } .article-cta { margin-top: 2.5rem; padding: 2rem; border-radius: 16px; background-color: #1F3D2E; } .article-cta h2 { margin: 0 0 0.6rem; font-family: Anton, sans-serif; font-size: 1.75rem; line-height: 1.15; color: #FFFFFF; } .article-cta p { margin: 0 0 1.25rem; font-size: 1rem; line-height: 1.65; color: rgba(255, 255, 255, 0.82); } .article-cta a { display: inline-block; padding: 0.8rem 1.5rem; border-radius: 100px; background-color: #FFFFFF; font-family: "Inter Tight", sans-serif; font-size: 0.9375rem; font-weight: 600; color: #1F3D2E; text-decoration: none; } @media screen and (max-width: 767px) { .article-body { margin-top: 2rem; } .article-lead { font-size: 1.125rem; } .article-body h2 { font-size: 1.3125rem; } .article-quote { padding: 1.25rem 1.25rem; } .article-quote p { font-size: 1.0625rem; } .article-cta { padding: 1.5rem; } .article-cta h2 { font-size: 1.5rem; } } /* Featured image on the 10 program pages, sitting between the lead and body. */ .article-hero-image { max-width: 54rem; margin-top: 2.5rem; border-radius: var(--_border---border-2xl, 20px); overflow: hidden; } .article-hero-image img { display: block; width: 100%; height: auto; } @media screen and (max-width: 767px) { .article-hero-image { margin-top: 1.75rem; } } /* Programs page (/project) cards: restructured to Program N label + category, headline title, short description and an explicit Read More CTA, stacked under the existing prominent image. .project-card-title/-ctg/-ctg-wrap are used nowhere else on the site, so these overrides are scoped in effect to this one listing even though the selectors are unprefixed. */ .project-card-info-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 0.65rem; margin-top: 1.5rem; } .project-card-ctg-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0; } .project-card-number { font-family: "Inter Tight", sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #1F3D2E; } .project-card-ctg-wrap .project-card-ctg { position: relative; padding-left: 0.75rem; font-family: "Inter Tight", sans-serif; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: #8F8F8F; } .project-card-ctg-wrap .project-card-ctg::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 3px; border-radius: 50%; background-color: #C7C2B8; transform: translateY(-50%); } .project-card-title { display: block; } .project-card-desc { margin: 0; max-width: 32rem; font-family: "Inter Tight", sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.6; color: #585858; } .project-card-readmore { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.15rem; font-family: "Inter Tight", sans-serif; font-size: 0.9375rem; font-weight: 600; color: #1F3D2E; text-decoration: none; } .project-card-readmore-arrow { display: inline-block; transition: transform 0.2s ease; } .project-card-readmore:hover .project-card-readmore-arrow { transform: translateX(4px); } @media screen and (max-width: 767px) { .project-card-desc { font-size: 0.9375rem; } } /* Homepage "Why Beyond Fiction ?" section (formerly a sticky-heading + four- image scrolling gallery under "Bridging the Gaps"): now four plain description cards, no images. .why-sub-title-wrap / .project-v1-title-wrap / .section-title keep the exact elements Webflow already renders for this slot elsewhere on the page; only .project-v1-content-wrap (position:sticky, height:720px — built for the old scrolling image gallery) was dropped in favor of this plain centered wrapper. Cards carry a soft cream background with CSS-drawn corner brackets (::before/::after) rather than sourcing the reference's illustrated leaf-corner artwork, since no such asset exists. */ .section.project-v1 { background-color: #F8F5EE; } .why-heading-wrap { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; } .why-cards-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 4rem; } .why-card { position: relative; display: flex; flex-direction: column; padding: 2.25rem; border-radius: 12px; border: 1px solid #DAD4C4; background-color: #EFEAE0; text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease; } .why-card::before, .why-card::after { content: ""; position: absolute; width: 18px; height: 18px; border: 1.5px solid #1F3D2E; opacity: 0.45; pointer-events: none; } .why-card::before { top: 10px; left: 10px; border-right: none; border-bottom: none; } .why-card::after { bottom: 10px; right: 10px; border-left: none; border-top: none; } .why-card:hover { border-color: #1F3D2E; background-color: #FFFFFF; transform: translateY(-4px); } .why-card-number { font-family: Anton, sans-serif; font-size: 2rem; line-height: 1; color: #1F3D2E; opacity: 0.55; } .why-card-title { margin: 1.1rem 0 0.75rem; font-family: "Bebas Neue", sans-serif; font-size: 1.75rem; font-weight: 400; letter-spacing: 0.01em; line-height: 1.2; color: #1B2E22; } .why-card-desc { margin: 0; font-family: "Poppins", sans-serif; font-size: 1rem; line-height: 1.65; color: #585858; flex-grow: 1; } .why-card-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.5rem; font-family: "Inter Tight", sans-serif; font-size: 0.9375rem; font-weight: 600; color: #1F3D2E; } .why-card-arrow { display: inline-block; transition: transform 0.2s ease; } .why-card:hover .why-card-arrow { transform: translateX(4px); } @media screen and (max-width: 767px) { .why-cards-wrap { grid-template-columns: 1fr; gap: 1rem; margin-top: 2.75rem; } .why-card { padding: 1.75rem; } .why-card-title { font-size: 1.1875rem; } .why-card-desc { font-size: 0.9375rem; } } /* Homepage "Without transformation..." headline (.why-heading-wrap): .section-title elsewhere on the site is a short 3-6 word tagline sized for it (80px desktop). This one is a full 13-word sentence, so at that same size it towered over the page and ran edge-to-edge on mobile. Scoped down here only — every other .section-title on the site is untouched. Bebas Neue (titles) + Poppins (.why-card-desc) per client direction for this section specifically. */ .why-heading-wrap .section-title { max-width: 46rem; font-family: "Bebas Neue", sans-serif; font-weight: 400; letter-spacing: 0.01em; font-size: 3.5rem; line-height: 1.15; color: #16281E; } @media screen and (max-width: 991px) { .why-heading-wrap .section-title { max-width: 34rem; font-size: 2.25rem; } } @media screen and (max-width: 767px) { .why-heading-wrap .section-title { max-width: 100%; font-size: 1.75rem; line-height: 1.25; } } @media screen and (max-width: 479px) { .why-heading-wrap .section-title { font-size: 1.5rem; } } /* Homepage "Deep-Tech Domains We Explore" teaser: rebuilt from the old full-detail dark cards (bg image + paragraph + number + arrow) into compact thumbnail cards — real program photo, a small icon badge overlapping the top edge, and a two-line title underneath — 5 per row, matching the reference mockup. Images reused from the 10 program pages (/project-cards/prog-*.avif); icons are small inline SVGs in the brand green rather than the mockup's per-card rainbow of colors, to stay consistent with the rest of the rebrand. Title copy uses the mockup's friendlier headline phrasing instead of the terser category names used elsewhere on the site (e.g. /project). */ .domains-grid-wrap { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3rem 1.5rem; } .domain-card { display: flex; flex-direction: column; align-items: center; text-decoration: none; } .domain-card-media { position: relative; width: 100%; } .domain-card-image-wrap { width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; } .domain-card-image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; } .domain-card:hover .domain-card-image { transform: scale(1.06); } .domain-card-icon { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #FFFFFF; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); } .domain-card-icon svg { width: 20px; height: 20px; } .domain-card-title { margin-top: 1.5rem; max-width: 15rem; text-align: center; font-family: "Inter Tight", sans-serif; font-size: 0.9375rem; font-weight: 600; line-height: 1.4; color: #F8F5EE; } @media screen and (max-width: 1199px) { .domains-grid-wrap { grid-template-columns: repeat(3, 1fr); } } @media screen and (max-width: 767px) { .domains-grid-wrap { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1rem; } } @media screen and (max-width: 479px) { .domains-grid-wrap { grid-template-columns: 1fr; gap: 2.25rem; } } /* /team page (replaces the old /blog nav slot): reuses .blog-title-wrap / .global-heading / .contact-details-wrap for the page header exactly as Webflow already renders them elsewhere, then a plain card grid below — no blog-specific classes reused, since a member card (avatar, name, role) has nothing in common with a post card (image, category, date, excerpt). Avatars are CSS-drawn initials rather than photos: no real team photos were supplied, so this ships as an honest placeholder for the client to swap with real bios later. */ .team-top-wrap { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; margin-bottom: 4rem; } .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .team-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2.5rem 1.75rem; border-radius: 16px; border: 1px solid #E4E0DA; background-color: #F8F5EE; } .team-avatar { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; margin-bottom: 1.25rem; border-radius: 50%; background-color: #1F3D2E; font-family: "Inter Tight", sans-serif; font-size: 1.5rem; font-weight: 700; color: #F8F5EE; } .team-name { font-family: "Inter Tight", sans-serif; font-size: 1.1875rem; font-weight: 600; color: #030202; } .team-role { margin-top: 0.75rem; font-family: "Inter Tight", sans-serif; font-size: 0.9375rem; line-height: 1.6; color: #585858; } @media screen and (max-width: 991px) { .team-grid { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 767px) { .team-top-wrap { margin-bottom: 2.75rem; } .team-grid { grid-template-columns: 1fr; gap: 1rem; } } /* Homepage "Intro / video" section (formerly a full-bleed 650px cinematic video banner): now a two-column card — eyebrow label, heading, description and a decorative rule on the left, the same background video contained as a thumbnail with a large centered play control on the right, matching the reference "A Glimpse into Our World of Exploration" mockup. Heading uses Anton — the site's global secondary/display font, same as every other section-title on the page (e.g. "Deep-Tech Domains") — rather than the mockup's own type. The play button only shows on hover, and only surrounding card/layout changes here — the underlying video file is untouched. */ .section.hero-video { margin-top: 0; padding-top: var(--_gap---gap-8xl, 5rem); } .video-intro-card { display: flex; align-items: center; gap: 3.5rem; padding: 3rem; border-radius: 24px; background-color: #F8F5EE; border: 1px solid #E4E0DA; } .video-intro-left { flex: 1 1 40%; min-width: 0; } .video-intro-right { flex: 1 1 55%; min-width: 0; } .video-intro-label { font-family: "Inter Tight", sans-serif; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #1F3D2E; } .video-intro-title { margin: 0.85rem 0 1rem; max-width: 22rem; font-family: Anton, sans-serif; font-size: 2.5rem; line-height: 1.1; font-weight: 400; color: #16281E; } .video-intro-desc { margin: 0; max-width: 22rem; font-family: "Inter Tight", sans-serif; font-size: 1rem; line-height: 1.65; color: #585858; } .video-intro-rule { margin-top: 2rem; width: 70px; height: 1px; background-color: #C7C2B8; position: relative; } .video-intro-rule::after { content: ""; position: absolute; right: -3px; top: 50%; width: 7px; height: 7px; border-radius: 50%; background-color: #1F3D2E; transform: translateY(-50%); } .video-intro-media { position: relative; aspect-ratio: 16 / 11; border-radius: 18px; overflow: hidden; } .video-intro-media .hero-video { min-height: 100%; height: 100%; border-radius: 0; } .video-intro-play { top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #FFFFFF; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); opacity: 0; transition: opacity 0.25s ease; } .video-intro-media:hover .video-intro-play, .video-intro-play:focus-visible { opacity: 1; } .video-intro-icon { width: 20px; height: 20px; } .video-intro-icon.is-play { margin-left: 2px; } @media screen and (max-width: 991px) { .video-intro-card { flex-flow: column; gap: 2rem; padding: 2rem; } .video-intro-left, .video-intro-right { flex: 1 1 auto; width: 100%; } .video-intro-title, .video-intro-desc { max-width: none; } } @media screen and (max-width: 479px) { .video-intro-card { padding: 1.5rem; border-radius: 16px; } } /* --------------------------------------------------------------------------- Dark-mode theme — deliberately identical to the light theme. This block is the point of the `color-scheme: light dark` declaration at the top of this file. Its job is not to restyle anything: it is to give the browser a dark theme to use, so it does not invent one of its own by algorithmically inverting the page (Samsung Internet's and Chrome's force-dark). Those filters wreck the hero, because home-bg.svg is built from three near-identical creams that invert to visibly different darks. So the site renders the same whichever mode the phone is in. Only the handful of surfaces the browser itself paints need restating here — every other colour on the site is set unconditionally and already applies in both modes. Loaded before home-redesign.css, so this deliberately does not try to override that file's colours; it has no need to. --------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { html, body { background-color: #FFFFFF; color: #030202; } /* Keep browser-painted widgets (form fields, dropdowns, scrollbars) light — the contact form is the visible case. Without this they would follow the root's dark half and render as dark boxes on a cream page. */ input, textarea, select, button { color-scheme: light; } }