/* ============================================================ AGEMICA v2 — LIGHT theme overlay Anduril spec: paper canvas (#f1f0ea / #fff), ink text (#010101), volt-lime accent (#dff140) preserved as the lone chromatic note. Apply by adding class "v2-light" to . ============================================================ */ body.v2.v2-light { color: #010101; background: #f1f0ea; --v2-nav-bg: rgba(255, 255, 255, 0.92); } /* ----- nav (light variant) ----- */ .v2-light .v2-nav { background: var(--v2-nav-bg) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: rgba(1, 1, 1, 0.12); } .v2-light .v2-nav-logo img { filter: none; } .v2-light .v2-nav-links a { color: rgba(1, 1, 1, 0.78); } .v2-light .v2-nav-links a:hover { color: #010101; } .v2-light .v2-nav-cta { color: #010101; border-color: rgba(1, 1, 1, 0.32); } .v2-light .v2-nav-cta:hover { background: #010101; color: #fff !important; border-color: #010101; } /* Company mega-menu: same frosted surface as navbar (rgba + blur, not solid white). */ .v2-light .v2-nav-panel { background: var(--v2-nav-bg) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: none !important; } @media (prefers-reduced-motion: reduce) { .v2-light .v2-nav, .v2-light .v2-nav-panel { backdrop-filter: none; -webkit-backdrop-filter: none; } } /* ----- main ----- */ .v2-light main.v2-main, .v2-light .detail-main { color: #010101; background: #f1f0ea; } /* ----- chrome / status / page frame ----- */ .v2-light .v2-statusline { background: rgba(255, 255, 255, 0.92); border-bottom-color: rgba(1, 1, 1, 0.14); color: rgba(1, 1, 1, 0.62); } .v2-light .v2-pageframe { border-color: rgba(1, 1, 1, 0.14); } /* ----- HERO (now paper, with a single dark stage) ----- */ .v2-light .v2-hero { background: #f1f0ea; border-bottom-color: rgba(1, 1, 1, 0.18); } .v2-light .v2-hero-meta { border-bottom-color: rgba(1, 1, 1, 0.14); } .v2-light .v2-hero-meta .v2-back { color: rgba(1, 1, 1, 0.62); } .v2-light .v2-hero-meta .v2-back:hover { color: #010101; } .v2-light .v2-hero-meta .v2-section-tag { color: rgba(1, 1, 1, 0.78); } .v2-light .v2-hero-meta .v2-page-id { color: rgba(1, 1, 1, 0.42); } .v2-light .v2-hero-eyebrow { color: #010101; } /* Anduril-style: yellow eyebrow → small uppercase ink eyebrow, accent reserved for very specific marks. Keep volt available via .v2-hero-eyebrow--volt */ .v2-light .v2-hero-eyebrow--volt { color: var(--v2-volt); } .v2-light .v2-hero-title { color: #010101; } .v2-light .v2-hero-title em { color: #010101; font-style: normal; background: linear-gradient(180deg, transparent 70%, var(--v2-volt) 70%, var(--v2-volt) 92%, transparent 92%); background-size: 100% 100%; padding: 0 0.05em; } .v2-light .v2-hero-lead { color: rgba(1, 1, 1, 0.78); } /* The hero stage stays DARK by design — provides the one moment of dark visual weight per page, like a printed photo on a paper page */ .v2-light .v2-hero-stage { background: #010101; border-color: rgba(1, 1, 1, 0.32); } /* hero-foot: paper with hairline rules */ .v2-light .v2-hero-foot { border-top-color: rgba(1, 1, 1, 0.32); } .v2-light .v2-hero-foot .v2-foot-cell { border-right-color: rgba(1, 1, 1, 0.14); } .v2-light .v2-hero-foot .v2-foot-label { color: rgba(1, 1, 1, 0.5); } .v2-light .v2-hero-foot .v2-foot-value { color: #010101; } /* ----- BLOCK ----- */ .v2-light .v2-block { background: #f1f0ea; color: #010101; border-bottom-color: rgba(1, 1, 1, 0.14); } /* The "cream" variant in dark mode is meant to be the lighter break. Invert: in light mode, cream becomes a pure-white paper variant. */ .v2-light .v2-block--cream { background: #ffffff; color: #010101; border-color: rgba(1, 1, 1, 0.14); } /* The "gray" variant in dark mode was a darker break. Invert: in light mode, gray becomes the DARK section — the one moment of black ink-and-fire per long page. */ .v2-light .v2-block--gray { background: #010101; color: #fff; border-bottom-color: rgba(255, 255, 255, 0.14); } .v2-light .v2-block--gray .v2-block-eyebrow { color: rgba(255, 255, 255, 0.55); } .v2-light .v2-block--gray .v2-block-lead { color: rgba(255, 255, 255, 0.72); } .v2-light .v2-block--gray .v2-body-aside { color: rgba(255, 255, 255, 0.55); } .v2-light .v2-block--gray .v2-body-prose { color: rgba(255, 255, 255, 0.86); } .v2-light .v2-block--gray .v2-body-prose strong { color: #fff; } .v2-light .v2-block-head .v2-block-eyebrow { color: rgba(1, 1, 1, 0.55); } .v2-light .v2-block-title { color: #010101; } .v2-light .v2-block--gray .v2-block-title { color: #fff; } .v2-light .v2-block-lead { color: rgba(1, 1, 1, 0.72); } /* two-col body */ .v2-light .v2-body-2col .v2-body-aside { color: rgba(1, 1, 1, 0.55); } .v2-light .v2-body-prose { color: rgba(1, 1, 1, 0.86); } /* Match base `.v2-body-prose strong`: color distinction only, same weight as body (400). */ .v2-light .v2-body-prose strong { color: #010101; font-weight: 400; } /* lists with index marks */ .v2-light .v2-body-prose ul li::before, .v2-light .v2-body-prose ul li[data-i]::before { color: rgba(1, 1, 1, 0.42); } .v2-light .v2-body-prose ul li { border-color: rgba(1, 1, 1, 0.12); } /* ----- RIBBON (stat strip) ----- */ .v2-light .v2-ribbon { background: #ffffff; border-color: rgba(1, 1, 1, 0.14); } .v2-light .v2-ribbon-cell { border-right-color: rgba(1, 1, 1, 0.10); border-bottom-color: rgba(1, 1, 1, 0.10); color: #010101; } .v2-light .v2-ribbon-num { color: #010101; } .v2-light .v2-ribbon-num em { color: #010101; } .v2-light .v2-ribbon-label { color: rgba(1, 1, 1, 0.62); } .v2-light .v2-block--gray .v2-ribbon { background: transparent; border-color: rgba(255,255,255,0.14); } .v2-light .v2-block--gray .v2-ribbon-cell { color: #fff; border-right-color: rgba(255,255,255,0.10); border-bottom-color: rgba(255,255,255,0.10); } .v2-light .v2-block--gray .v2-ribbon-num { color: #fff; } .v2-light .v2-block--gray .v2-ribbon-label { color: rgba(255,255,255,0.62); } /* ----- PULLQUOTE ----- */ .v2-light .v2-pullquote { background: #ffffff; color: #010101; border-top-color: rgba(1, 1, 1, 0.14); border-bottom-color: rgba(1, 1, 1, 0.14); } .v2-light .v2-pullquote-text { color: #010101; } .v2-light .v2-pullquote-text em { color: #010101; background: linear-gradient(180deg, transparent 70%, var(--v2-volt) 70%, var(--v2-volt) 92%, transparent 92%); padding: 0 0.05em; } .v2-light .v2-pullquote-cite { color: rgba(1, 1, 1, 0.55); } /* ----- NEXT MODULE ----- */ .v2-light .v2-next { background: #f1f0ea; border-top-color: rgba(1, 1, 1, 0.18); /* Base style-v2 `.v2-next` adds border-bottom; drop it so Next → footer is one plane */ border-bottom: none; } /* When Next is the last section in main, avoid a second hairline on the footer */ body.v2-light main.v2-main:has(> section.v2-next:last-child) + footer.v2-footer { border-top: none; } .v2-light .v2-next-card { background: #ffffff; border-color: rgba(1, 1, 1, 0.14); color: #010101; } .v2-light .v2-next-card:hover { background: #ebe9e4; color: #010101; border-color: rgba(1, 1, 1, 0.22); } .v2-light .v2-next-card-eyebrow { color: rgba(1, 1, 1, 0.55); } .v2-light .v2-next-card-title { color: #010101; } .v2-light .v2-next-card:hover .v2-next-card-title { color: #010101; } .v2-light .v2-next-card-arrow { border-top-color: rgba(1, 1, 1, 0.14); } .v2-light .v2-next-card-arrow span { color: rgba(1, 1, 1, 0.62); } /* ----- Mission-style title hero (overview + team subpages; matches mission.html) ----- */ .v2-mission-title-hero .v2-title-page-body { grid-template-rows: minmax(0, 0.82fr) auto minmax(0, 1.18fr) auto; gap: clamp(40px, 6vh, 72px); align-items: stretch; } .v2-mission-title-hero .v2-title-hero-anduril { grid-row: 2; align-self: center; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(32px, 6vw, 96px); row-gap: clamp(24px, 4vw, 40px); align-items: center; padding-top: 0; width: 100%; max-width: none; min-width: 0; } .v2-mission-title-hero .v2-title-page-foot { grid-row: 4; align-self: end; } .v2-mission-title-hero .v2-title-eyebrow-page { font-family: "HelveticaNowDisplay", Helvetica, Arial, sans-serif; font-size: 90px; line-height: 0.92; letter-spacing: -0.035em; text-transform: uppercase; font-weight: 400; color: #010101; margin: 0; } .v2-mission-title-hero .v2-mission-hero-line { font-family: "HelveticaNowDisplay", Helvetica, Arial, sans-serif; font-size: 25px; line-height: 1.5; letter-spacing: -0.01em; font-weight: 400; color: rgba(1, 1, 1, 0.88); margin: 0; max-width: 38ch; width: 100%; text-wrap: balance; } @media (max-width: 720px) { .v2-mission-title-hero .v2-title-page-body { grid-template-rows: auto auto; } .v2-mission-title-hero .v2-title-hero-anduril { grid-row: auto; align-self: start; grid-template-columns: 1fr; align-items: start; padding-top: clamp(24px, 6vh, 64px); } .v2-mission-title-hero .v2-title-page-foot { grid-row: auto; align-self: stretch; } .v2-mission-title-hero .v2-title-eyebrow-page { font-size: clamp(52px, 14vw, 90px); } .v2-mission-title-hero .v2-mission-hero-line { max-width: 42ch; } } .v2-mission-title-hero .v2-title-page-foot .v2-mission, .v2-mission-title-hero .v2-title-page-foot .v2-title-contents, .v2-mission-title-hero .v2-title-page-foot .v2-title-contents a, .v2-mission-title-hero .v2-title-page-foot .v2-wayfind-link { font-family: "HelveticaNowDisplay", Helvetica, Arial, sans-serif; } /* ----- TEAM CARDS ----- */ .v2-light .v2-card { background: #010101; /* photo cards stay dark, paper around them */ border-color: rgba(1, 1, 1, 0.14); } /* Team & advisors: horizontal strip — 1 card + slice of the next; scales with viewport */ .v2-light #team-leadership .v2-card-grid--impact { --hc-gap: clamp(18px, 1.4vw, 24px); --team-cards-visible: 1.333; --team-card-width: calc((100% - 2 * var(--hc-gap)) / var(--team-cards-visible)); display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: var(--hc-gap); width: 100%; max-width: none; margin-inline: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding-inline: 0; } .v2-light #team-leadership .v2-card.v2-card--impact { flex: 0 0 var(--team-card-width); width: var(--team-card-width); scroll-snap-align: start; aspect-ratio: auto; min-height: clamp(420px, 52vh, 600px); background: #f3f3f3; border: 1px solid rgba(1, 1, 1, 0.14); color: #010101; overflow: hidden; display: block; text-decoration: none; } .v2-light #team-leadership .v2-card--impact:focus-visible { outline: 2px solid #010101; outline-offset: 3px; } .v2-light #team-leadership .v2-card--impact .v2-card-impact-inner { --v2-card-impact-pad: clamp(28px, 4vw, 40px); height: 100%; min-height: inherit; box-sizing: border-box; padding: var(--v2-card-impact-pad); display: flex; flex-direction: column; gap: 0; } .v2-light #team-leadership .v2-card--impact .v2-card-impact-earmark { margin: 0 0 var(--v2-card-impact-pad); padding: 0; border: 0; font: inherit; display: flex; flex-direction: row; align-items: center; gap: clamp(12px, 1.6vw, 20px); flex-shrink: 0; } .v2-light #team-leadership .v2-card--impact .v2-card-impact-earmark .v2-card-impact-logo { width: 28px; height: 28px; flex-shrink: 0; display: block; object-fit: contain; object-position: left center; } .v2-light #team-leadership .v2-card--impact .v2-card-impact-earmark .v2-card-name { display: block; flex: 1; min-width: 0; font-family: "HelveticaNowDisplay", Helvetica, Arial, sans-serif; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 400; color: #010101; } /* Photo: inset matches card padding token; pulled to bottom when card is tall */ .v2-light #team-leadership .v2-card--impact .v2-card-impact-media { margin-top: auto; width: 100%; max-width: none; overflow: hidden; flex-shrink: 0; border-radius: 0; background: rgba(1, 1, 1, 0.04); } .v2-light #team-leadership .v2-card--impact .v2-card-impact-media .v2-card-img { position: static; inset: auto; width: 100%; height: auto; aspect-ratio: 410 / 273; object-fit: cover; display: block; filter: contrast(1.02); transition: transform 1.4s var(--v2-ease), filter 0.6s var(--v2-ease); } /* Anastasiya (last impact card): align face similarly to profile + home team tile */ .v2-light #team-leadership #team-cards-scroll > a.v2-card--impact:last-of-type .v2-card-impact-media .v2-card-img { object-position: 56% 18%; } /* Image hover when anywhere on the card is hovered */ .v2-light #team-leadership .v2-card--impact:hover .v2-card-impact-media .v2-card-img { transform: scale(1.03); filter: contrast(1.05) brightness(1.03); } .v2-light #team-leadership .v2-card--impact .v2-card-impact-body { display: flex; flex-direction: column; gap: clamp(16px, 2.5vh, 24px); padding: 0; margin: 0 0 var(--v2-card-impact-pad); flex-shrink: 0; } .v2-light #team-leadership .v2-card--impact .v2-card-impact-body .v2-card-tag { font-family: "HelveticaNowDisplay", Helvetica, Arial, sans-serif; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(1, 1, 1, 0.55); } .v2-light #team-leadership .v2-card--impact .v2-card-impact-body .v2-card-sub { font-family: "HelveticaNowDisplay", Helvetica, Arial, sans-serif; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.45; letter-spacing: -0.01em; font-weight: 400; text-transform: none; color: rgba(1, 1, 1, 0.72); } .v2-light #team-leadership .v2-team-cards-controls { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 10px; margin-bottom: clamp(56px, 9vw, 120px); } .v2-light #team-leadership .v2-team-cards-arrow { box-sizing: border-box; min-width: 44px; min-height: 44px; padding: 8px 12px; margin: 0; border: 0; background: transparent; color: #010101; font-family: inherit; font-size: 18px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color 0.2s ease, opacity 0.2s ease; } .v2-light #team-leadership .v2-team-cards-arrow:hover { color: rgba(1, 1, 1, 0.45); } .v2-light #team-leadership .v2-team-cards-arrow:focus-visible { outline: 2px solid #010101; outline-offset: 4px; } .v2-light #team-leadership .v2-team-cards-arrow-icon { display: block; transform: translateY(-1px); } /* Desktop: same 1-card + peek rhythm, narrower cards (mobile keeps 1.333 above) */ @media (min-width: 881px) { .v2-light #team-leadership .v2-card-grid--impact { --team-cards-visible: 2.35; } } /* ----- FAQ ----- */ .v2-light .v2-faq-item { border-color: rgba(1, 1, 1, 0.14); } .v2-light .v2-faq-q { color: #010101; } .v2-light .v2-faq-i { color: rgba(1, 1, 1, 0.42); } .v2-light .v2-faq-toggle { color: rgba(1, 1, 1, 0.55); } .v2-light .v2-faq-a { color: rgba(1, 1, 1, 0.78); } .v2-light .v2-faq-item[open] .v2-faq-q { color: #010101; } /* ----- TIMELINE / ribbon-like elements with ::before marks ----- */ .v2-light .v2-timeline-rail { background: rgba(1, 1, 1, 0.14); } .v2-light .v2-timeline-mark .v2-tm-year { color: #010101; } .v2-light .v2-timeline-mark .v2-tm-label { color: rgba(1, 1, 1, 0.78); } .v2-light .v2-timeline-mark[data-state="now"] .v2-tm-year { color: #010101; } /* ----- FOOTER (light variant — paper with dark accent strip) ----- */ .v2-light .v2-footer { background: #f1f0ea; color: #010101; border-top-color: rgba(1, 1, 1, 0.18); } .v2-light .v2-footer-top { border-bottom-color: rgba(1, 1, 1, 0.18); } .v2-light .v2-footer-mark { color: #010101; } .v2-light .v2-footer-tag { color: rgba(1, 1, 1, 0.62); } .v2-light .v2-footer-col span { color: rgba(1, 1, 1, 0.6); } .v2-light .v2-footer-col a { color: rgba(1, 1, 1, 0.85); } .v2-light .v2-footer-col a:hover { color: #010101; } .v2-light .v2-footer-bottom { border-top-color: rgba(1, 1, 1, 0.18); color: rgba(1, 1, 1, 0.62); } /* ----- generic typography in main ----- */ .v2-light h1, .v2-light h2, .v2-light h3, .v2-light h4, .v2-light h5, .v2-light h6 { color: #010101; } .v2-light p { color: rgba(1, 1, 1, 0.86); } .v2-light a { color: inherit; } /* ----- volt accent details that should stay volt regardless of theme ----- */ .v2-light .v2-hero-meta .v2-section-tag::before { background: var(--v2-volt); } /* ----- per-page Tweaks panel (paper-mode chrome) ----- */ .v2-light #v2-tweaks-panel { background: rgba(255, 255, 255, 0.96); color: #010101; border-color: rgba(1, 1, 1, 0.18); } .v2-light #v2-tweaks-panel h4 button { color: rgba(1, 1, 1, 0.55); } .v2-light #v2-tweaks-panel label { color: rgba(1, 1, 1, 0.6); } .v2-light #v2-tweaks-panel .swatch { border-color: rgba(1, 1, 1, 0.18); } .v2-light #v2-tweaks-panel .seg { border-color: rgba(1, 1, 1, 0.18); } .v2-light #v2-tweaks-panel .seg button { color: #010101; border-right-color: rgba(1, 1, 1, 0.18); } /* helper: the [data-stay-dark] opt-out keeps a region dark even in light mode (used for visualizations where dark is essential — plate maps, video masks) */ .v2-light [data-stay-dark] { background: #010101 !important; color: #fff !important; } /* ----- team profiles: vertical stacked bio lines (full-width rules in gutter) ----- */ .v2-light .team-bio-prose { max-width: none; width: 100%; } .v2-light .team-bio-grid { display: flex; flex-direction: column; gap: 0; width: 100%; max-width: none; padding-top: 0; border-top: 1px solid rgba(1, 1, 1, 0.12); } .v2-light .team-bio-line { margin: 0; padding: clamp(8px, 1.1vw, 12px) 0; border-bottom: 1px solid rgba(1, 1, 1, 0.12); font-size: clamp(16px, 1.05vw, 18px); line-height: 1.55; letter-spacing: -0.01em; font-weight: 400; color: rgba(1, 1, 1, 0.88); } .v2-light .team-bio-line:last-child { border-bottom: 0; padding-bottom: 0; } /* ----- bordered status callout (XPRIZE milestones, research roadmap) ----- */ .v2-light .xprize-status-callout { width: 100%; box-sizing: border-box; padding: clamp(20px, 3vw, 28px) clamp(22px, 4vw, 32px); border: 1px solid rgba(1, 1, 1, 0.14); background: transparent; } .v2-light .xprize-status-callout strong { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; } .v2-light .xprize-status-callout > p { margin: 0; font-family: "HelveticaNowDisplay", Helvetica, Arial, sans-serif; font-size: clamp(16px, 1.05vw, 18px); line-height: 1.55; letter-spacing: -0.01em; font-weight: 400; color: rgba(1, 1, 1, 0.88); }