/* Beyond Fiction brand palette override (dark green / sage / cream system). Loaded after the Webflow stylesheet — color values only. */ /* Site-wide type system: Cormorant Garamond (serif) for every heading, Inter Tight (already in the page's WebFontConfig) for all body copy. Cormorant isn't in that google.families list, so it's pulled in here instead of touching the on all 17 pages. Overriding the Webflow template's own --_font-family---secondary-font below is what actually swaps every heading site-wide (h1-h6, .section-title, .global-heading, card titles, etc. all reference that one variable) without having to hunt down each heading class individually. */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&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; /* Site-wide heading font. The Webflow template defines this as Anton (a condensed display face) and every h1-h6 plus every .section-title / .global-heading / card-title class across all 17 pages reads its font-family from this one variable — redeclaring it here (same :root, later in the cascade than the Webflow stylesheet) swaps every heading on the site to the serif in one place. The body copy variable (--_font-family---primary-font) is already Inter Tight and needs no change. */ --_font-family---secondary-font: "Cormorant Garamond", Georgia, serif; } /* 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: "Inter Tight", 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: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 2.5rem; 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: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 2rem; 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, built to the client reference: a cream ground with watercolor foliage in the top corners, a deep-navy serif headline in sentence case, and four pale-sage cards framed by ornamental corner brackets with a fleuron rule above each link. Every .why-* / .project-v1 class here is used on index.html only, so none of this reaches another page. */ .section.project-v1 { position: relative; overflow: hidden; background-color: #F7F4EC; /* Full-screen section, like the hero above it: fills the viewport and centers its content vertically instead of just wrapping tight to it. */ min-height: 100vh; min-height: 100svh; display: flex; align-items: center; } /* One foliage asset, mirrored for the right-hand corner. */ .section.project-v1::before, .section.project-v1::after { content: ""; position: absolute; top: 0; z-index: 0; width: clamp(150px, 17vw, 300px); height: clamp(140px, 16vw, 280px); background: url("/why-botanical.svg") no-repeat left top / contain; opacity: 0.62; pointer-events: none; } .section.project-v1::before { left: 0; } .section.project-v1::after { right: 0; transform: scaleX(-1); } .section.project-v1 .w-container { position: relative; z-index: 1; width: 100%; } .why-heading-wrap { display: flex; flex-direction: column; align-items: center; gap: 1.35rem; text-align: center; } .why-sub-title-wrap { border: 1px solid #E4DDCC; box-shadow: 0 1px 2px rgba(34, 47, 102, 0.05); } .why-text { font-family: "Inter Tight", sans-serif; font-weight: 500; color: #2C3556; } /* Sentence-case serif headline. The template's .section-title is Bebas Neue (a caps-only face) sized for a 3-6 word tagline; this one is a 13-word sentence, so it is scoped down and reset to the serif here only. The template also caps .project-v1-title-wrap at 705px, which would re-wrap the reference's three lines, so it is widened to suit. */ .why-heading-wrap .project-v1-title-wrap { max-width: 62rem; } .why-heading-wrap .section-title { max-width: 62rem; margin-inline: auto; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 3.4rem; line-height: 1.16; letter-spacing: -0.005em; text-transform: none; color: #222F66; } .why-cards-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2.75rem; } .why-card { position: relative; display: flex; flex-direction: column; padding: 2.1rem 2.25rem 1.9rem; border-radius: 14px; border: 1px solid #D9DEC6; background-color: #EDF0E2; text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease; } /* Ornamental frame corners: four pre-rotated copies of one bracket, because individual background layers cannot be rotated in CSS. */ .why-card::before { content: ""; position: absolute; inset: 9px; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cg fill='none' stroke='%23B2A57F' stroke-linecap='round'%3E%3Cpath d='M1.5 17V6.5A5 5 0 0 1 6.5 1.5H17' stroke-width='1.2'/%3E%3Cpath d='M6.5 12.5v-3a3 3 0 0 1 3-3h3' stroke-width='1' opacity='.7'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cg transform='rotate(90 14 14)'%3E%3Cg fill='none' stroke='%23B2A57F' stroke-linecap='round'%3E%3Cpath d='M1.5 17V6.5A5 5 0 0 1 6.5 1.5H17' stroke-width='1.2'/%3E%3Cpath d='M6.5 12.5v-3a3 3 0 0 1 3-3h3' stroke-width='1' opacity='.7'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cg transform='rotate(180 14 14)'%3E%3Cg fill='none' stroke='%23B2A57F' stroke-linecap='round'%3E%3Cpath d='M1.5 17V6.5A5 5 0 0 1 6.5 1.5H17' stroke-width='1.2'/%3E%3Cpath d='M6.5 12.5v-3a3 3 0 0 1 3-3h3' stroke-width='1' opacity='.7'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cg transform='rotate(270 14 14)'%3E%3Cg fill='none' stroke='%23B2A57F' stroke-linecap='round'%3E%3Cpath d='M1.5 17V6.5A5 5 0 0 1 6.5 1.5H17' stroke-width='1.2'/%3E%3Cpath d='M6.5 12.5v-3a3 3 0 0 1 3-3h3' stroke-width='1' opacity='.7'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-position: left top, right top, right bottom, left bottom; background-size: 26px 26px; background-repeat: no-repeat; } .why-card:hover { border-color: #BAC4A2; background-color: #F2F4E9; } .why-card-title { margin: 0 0 0.7rem; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.7rem; font-weight: 700; letter-spacing: 0; line-height: 1.25; text-transform: none; color: #222F66; } .why-card-desc { margin: 0; font-family: "Inter Tight", sans-serif; font-size: 0.9375rem; line-height: 1.68; color: #626973; flex-grow: 1; } /* Centered fleuron rule between the copy and the link. */ .why-card-rule { width: 58%; height: 11px; margin: 1.45rem auto 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 12'%3E%3Cg stroke='%23B2A57F' fill='none' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M2 6h84'/%3E%3Cpath d='M134 6h84'/%3E%3Cpath d='M93 6h5'/%3E%3Cpath d='M122 6h5'/%3E%3C/g%3E%3Cpath d='M110 1.4 114.8 6 110 10.6 105.2 6z' fill='%23B2A57F'/%3E%3C/svg%3E") no-repeat center / contain; } .why-card-link { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1.15rem; font-family: "Inter Tight", sans-serif; font-size: 0.9375rem; font-weight: 600; color: #222F66; } .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: 991px) { .why-heading-wrap .section-title { max-width: 38rem; font-size: 2.4rem; } /* Reference line breaks are desktop-only; below this the sentence wraps. */ .why-br { display: none; } } @media screen and (max-width: 767px) { .section.project-v1::before, .section.project-v1::after { width: 120px; height: 112px; opacity: 0.45; } .why-heading-wrap .section-title { max-width: 100%; font-size: 1.9rem; line-height: 1.22; } .why-cards-wrap { grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; } .why-card { padding: 1.6rem 1.5rem 1.4rem; } .why-card-title { font-size: 1.35rem; } .why-card-desc { font-size: 0.9375rem; } .why-card-rule { width: 72%; } } @media screen and (max-width: 479px) { .why-heading-wrap .section-title { font-size: 1.6rem; } } /* 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: "Cormorant Garamond", Georgia, serif; font-size: 2.75rem; line-height: 1.15; font-weight: 700; 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; } }