/* Listval overrides on the foundry-labs template. Loaded after every theme stylesheet. Everything keeps Azure's own translucent fills, so the particle field reads through cards, slides and controls exactly as on labs.ai.azure.com. The overrides here do two things only: take away 1px outline borders and rings (a control whose only shape on Azure is a ring gets a translucent chip fill instead), and take away hover lifts and scales. A ring is removed with `border-color: transparent`, never `border: 0`: Azure's 1px border is part of each control's box, so zeroing it shrank every de-ringed control by 2px and moved its content 1px (fidelity review, catalog round 1, item 4). Transparent keeps the geometry. */ :root { /* Listval's typeface. Declared here, after style.css, because style.css redeclares --font-body in its own :root and would otherwise win. */ --font-body: 'Google Sans Flex', 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; /* Chip fills that replace Azure's rings, in Azure's own white-alpha family (filter pill .07 / hover .13 / active .22) */ --lv-chip: rgba(255,255,255,0.10); --lv-chip-hover: rgba(255,255,255,0.16); /* Azure's card glow, verbatim from .card-mini:hover / .vp-card:hover */ --lv-card-glow: 0 10px 18px -8px rgba(80,100,255,0.30), 0 18px 32px -14px rgba(100,80,255,0.32), 0 24px 45px -20px rgba(80,60,220,0.22); } /* ── Cards that hold a picture ───────────────────────────────────────────────────────── */ /* Azure's 1px outline is kept as a transparent ring for geometry, and its fill painted under that ring (background-clip: border-box): a 1px band of card fill ran around every picture, which sits inside the ring. And the bento card did not clip its children, so its square-cornered body painted over the card's rounded corners. Here the fill stops at the padding box, and the card clips its children to the same rounded edge (radius minus the 1px ring), so the picture and the body meet the card's corners exactly. Card size is unchanged; the hover glow is the card's own box-shadow and is not clipped. `!important` because every hover and focus rule (the theme's and ours) sets the fill with the `background` shorthand, which resets the clip to border-box. */ .card-mini:has(> .card-mini-img), .exp-card, .carousel-slide, .video-wrapper, .bio-hero-visual { background-clip: padding-box !important; overflow: hidden; } .card-mini > .card-mini-img { border-radius: 0; } /* ── Home bento cards ("Just added to Labs") ─────────────────────────────────────────── */ /* Rest: Azure's fill as is (.card-mini rgba(255,255,255,.05), plus .card-mini-body another .05 on top, which is why the text half reads a shade lighter); outline border removed. */ .card-mini, .card-mini--featured, .card-mini--horizontal { border-color: transparent; } /* Hover, Azure's .card-mini:hover: --surface-hover rgba(10,11,126,.8) and the violet glow, both over .5s. No lift. Keyboard focus inside a card gets the same look (Azure's .exp-card:focus-within). Under (hover: none) the theme resets the fill to `inherit`, so it is put back to the rest value. */ @media (hover: hover) { .card-mini:hover, .card-mini:focus-within { background: var(--surface-hover); box-shadow: var(--lv-card-glow); } } @media (hover: none) { .card-mini:hover { background-color: var(--surface); } } /* "Try it now" pill: a ring on Azure (.16, hover .35, .2s); a chip here */ .card-mini-link { background: var(--lv-chip); box-shadow: none; transition: background-color 0.2s, color 0.2s; } .card-mini-link:hover, .card-mini-link:focus-visible { background: var(--lv-chip-hover); box-shadow: none; } /* ── Carousel ────────────────────────────────────────────────────────────────────────── */ /* Slides: Azure's rgba(255,255,255,.08) and inset top highlight; violet outline removed */ .carousel-slide, .carousel-slide.cs-active { border-color: transparent; } /* Arrows: Azure's glass (rgba(255,255,255,.06), blur 8px; hover .14); outline and hover scale removed */ .carousel-arrow { border-color: transparent; } .carousel-arrow:hover { transform: translateY(-50%); } /* Slide buttons: no lift on the primary; the ghost is a ring on Azure (colour .7 to white, .2s) */ .cs-cta .btn-primary:hover { transform: none; } .cs-cta .btn-ghost-sm { background: var(--lv-chip); border-color: transparent; transition: background-color 0.2s, color 0.2s; } .cs-cta .btn-ghost-sm:hover { background: var(--lv-chip-hover); border-color: transparent; } /* ── About value cards ───────────────────────────────────────────────────────────────── */ /* Rest: Azure's rgba(255,255,255,.08) and inset top highlight; violet outline removed. Hover is the theme's own (--surface-hover, glow, brighter highlight) over Azure's .vp-card-glow-wrap gradient, rebuilt as a ::before that fades in over .5s behind the card fill. It sits at Azure's -1px so it also runs under the (transparent) 1px border and leaves no rim. The theme's lift is removed. */ /* isolation: the theme's hover lift gave the card a stacking context, which kept the gradient (z-index -1) above the card fill; with the lift removed, and fadeUp's transform gone under reduced motion or the Animations toggle, the gradient would drop behind the card. */ .vp-card { border-color: transparent; isolation: isolate; } .vp-card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient(135deg, rgba(79,66,253,0.5), rgba(114,116,255,0.3)); opacity: 0; transition: opacity 0.5s ease; z-index: -1; pointer-events: none; } .vp-card:hover { transform: none; border-color: transparent; } @media (hover: hover) { .vp-card:hover::before { opacity: 1; } } @media (hover: none) { .vp-card:hover { background-color: var(--surface-2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); } } /* Icon tile: Azure's rgba(79,66,253,.18) fill kept; its coloured 1px ring removed */ .vp-icon { border-color: transparent; } /* ── Feature catalog (/features/, Azure's Innovations template) ─────────────────────────── */ /* Cards: Azure's rest (rgba(255,255,255,.08), faint violet top light) and hover (navy, glow) are the theme's own; outline removed, and the lift (which never renders on Azure, because cardIn holds transform) removed. Keyboard focus gets the hover look instead of Azure's 2px ring. */ .exp-card, .exp-card:hover { border-color: transparent; } .exp-card:hover { transform: none; } .exp-card:focus-within { border-color: transparent; background: var(--surface-hover); box-shadow: 0 10px 20px -8px rgba(80,100,255,0.28), 0 20px 36px -14px rgba(100,80,255,0.28), 0 28px 48px -20px rgba(80,60,220,0.18); } @media (hover: none) { .exp-card:hover { background-color: var(--surface-2); } } .exp-card-domain, .exp-card-domain[style*="--domain-color"] { border-color: transparent; } /* The status slot names the app tab a feature lives in (every feature is shipped), so the status dot, which encodes Production/Experimental on Azure, is hidden on the catalog. */ .page-features .exp-card-status-dot { display: none; } /* Search: Azure's rgba .06 (focus .09); outline removed. The line box is pinned to the 18px Azure gets from Segoe at 16px, so the input stays 40px tall (10px padding, 1px border). */ .filter-search, .filter-search:focus { border-color: transparent; } .filter-search { line-height: 18px; } /* Filter sidebar and its mobile drawer: Azure's rgba .04; outline removed */ .filter-sidebar, .filter-sidebar.is-mobile-open { border-color: transparent; } /* Filter pills are Azure's own (.07, hover .13, selected .22; a coloured pill floods with its colour at .50 on hover and .65 selected). The line box is pinned to the 17px Azure gets from Segoe at 14px (`line-height: normal` in Google Sans Flex is 18px), so a pill stays 33px tall and the sidebar keeps Azure's height. */ .filter-pill, .filter-section-label, .pill-count { line-height: 17px; } /* Sort menu: Azure's rgba .05 with a ring that brightens on hover; the ring is removed, so hover steps the fill instead */ .filter-sort select { border-color: transparent; transition: background-color 0.2s; } .filter-sort select:hover, .filter-sort select:focus { border-color: transparent; background-color: rgba(255,255,255,0.09); } /* Grid/list toggle: a ring on Azure; a chip here. Mobile Filters button (full width in the column, and the 44px sibling of the sort at <=768 per 04-innovations.css): outline removed */ .results-view-toggle { border-color: transparent; background: rgba(255,255,255,0.05); } .filter-sidebar-toggle, .results-toolbar-right .filter-sidebar-toggle { border-color: transparent; } /* ── Feature detail (/features//, Azure's innovation detail template) ───────────── */ /* Hero pills (Azure's tinted fills), art frame, About panel, technology pills: outline removed */ .bio-pill, .bio-pill--status-production, .bio-pill[style*="--pill-color"], .bio-hero-visual, .bio-about-grid, .playground-pill { border-color: transparent; } /* Hero art: Azure's frame is 4/3 with object-fit cover and our art is square, so each page sets the focal point (`--lv-art-focus` on .bio-hero-visual) that keeps its subject whole in the 4/3 crop at desktop and the wider crop at 390. */ .bio-hero-visual img { object-position: var(--lv-art-focus, 50% 50%); } /* "Ready to explore" cards: Azure's rgba .04, hover navy over .2s (the theme also brightens the CTA and nudges its arrow 3px right); outline, violet hover border and 2px lift removed */ .bio-explore-card, .bio-explore-card:hover { border-color: transparent; } .bio-explore-card:hover { transform: none; } @media (hover: none) { .bio-explore-card:hover { background-color: rgba(255,255,255,0.04); } } /* ── Long-form pages (/privacy/, /terms/; Azure's story-detail template) ─────────────── */ /* Both legal pages sit on the theme's .story-header and .story-body-section rules as they are (column, paragraph, h2, lists, links are Azure's). The rules here cover only what a numbered policy needs that a story does not. */ /* The header is followed by the body directly (no banner, summary or stats strip between them), so the body section takes the top padding Azure's own body section uses when it follows a block (--space-6, from `.story-stats-strip + .story-body-section`) and the first element in the body adds no heading margin of its own on top of it. */ .story-detail .story-header + .story-body-section { padding-top: var(--space-6); } .story-detail .story-body > :first-child { margin-top: 0; } /* Two heading levels: numbered sections keep the theme's h2; x.y clauses take the theme's h4 role (the theme gives h3 the h2 size, which a policy cannot use twice). Line height, colour and tracking stay from the theme's h3 rule. */ .story-detail .story-body h3 { font-size: var(--text-xl); font-weight: 500; margin-top: var(--space-7); margin-bottom: var(--space-4); } /* Deep links (/terms/#section-7) land below the fixed nav, at the rail offset the theme uses */ .story-detail .story-body [id] { scroll-margin-top: calc(var(--nav-height) + var(--space-5)); } /* ── Shared controls ─────────────────────────────────────────────────────────────────── */ .video-wrapper { border-color: transparent; } /* Film play overlay (Azure's .hpv-*): the button's hover fill step (.12 to .20) stays; its scale(1.06) lift is removed */ .hpv-overlay:hover .hpv-overlay-btn { transform: none; } /* Tags and badges: a ring on Azure; a chip here */ .tag, .cs-badge { background: var(--lv-chip); border-color: transparent; box-shadow: none; } /* Secondary buttons: a ring on Azure (hover adds a .08 fill); a chip here */ .btn-ghost { background: var(--lv-chip); box-shadow: none; } .btn-ghost:hover, .btn-ghost:focus-visible { background: var(--lv-chip-hover); box-shadow: none; } /* Animations toggle: Azure's glass (rgba(20,24,32,.72), blur 8px; hover rgba(30,36,48,.92)); outline removed. Azure's 1px press stays (a press, not a hover). */ .foundry-anim-toggle, .foundry-anim-toggle:hover { border-color: transparent; } /* Hamburger and drawer close: rings on Azure; chips here */ .nav-hamburger, .nav-drawer-close { background: var(--lv-chip); border-color: transparent; } .nav-hamburger:hover, .nav-drawer-close:hover { background: var(--lv-chip-hover); } /* ── Footer (shared by every page) ───────────────────────────────────────────────────── */ /* The copyright line sits in the bottom bar's third column, the slot Azure's footer gives its mark, not inside the legal nav. Under 480 the theme stacks the bar left-aligned; the nav and the line take the full width so both read centred, as Azure's row does at 390. */ .footer-bottom > .footer-copyright { grid-column: 3; justify-self: end; margin: 0; } @media (max-width: 480px) { .footer-legal-links, .footer-bottom > .footer-copyright { width: 100%; text-align: center; } } /* Film slot (the template's video frame) */ .video-wrapper .lv-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #05070b; } /* Entrance motion (hero and value-card fade-up, catalog cardIn, roadmap card stagger from listval.js, the explore-card arrow nudge) stands down for reduced motion and for the Animations toggle. The theme only honours reduced motion below 768px; ours applies everywhere. */ @media (prefers-reduced-motion: reduce) { .fade-up, .lv-card-in, .exp-card { animation: none !important; opacity: 1 !important; transform: none !important; } .bio-explore-card-cta-arrow { transform: none !important; } } body.foundry-anims-off .fade-up, body.foundry-anims-off .lv-card-in, body.foundry-anims-off .exp-card { animation: none !important; opacity: 1 !important; transform: none !important; } body.foundry-anims-off .bio-explore-card-cta-arrow { transform: none !important; } /* Lenis 1.3.16 smooth scroll (vendor/lenis-1.3.16, started in listval.js): the rules of its own lenis.css, minus two. `.lenis-stopped { overflow: clip }` would drop the page scrollbar (and shift the layout) whenever the mobile drawer pauses Lenis. `[data-lenis-prevent] { overscroll-behavior: contain }` changes how the browser rasterises the drawer's text; listval.js only marks a nested scroller while it actually overflows, so a paused Lenis already holds the page still. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth iframe { pointer-events: none; } /* In-page anchors (/#how, /#features, /roadmap/#shipped): land a section's top edge just below the fixed nav instead of under it. #main-content and the legal sections already carry their own scroll-margin-top. Lenis reads the same value for its glide (listval.js). */ main section[id] { scroll-margin-top: var(--nav-height); } /* ══ Theme toggle (nav .nav-actions and the mobile drawer's .nav-drawer-actions) ═══════════════ */ /* A solid chip in the same family as the hamburger and drawer close (dark: Azure's white-alpha chip; light: the control surface). The icon shows the theme in force, as on the previous listval.com (moon in dark, sun in light). */ .lv-theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; margin-left: var(--space-2); padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--lv-chip); color: var(--text-2); cursor: pointer; transition: background-color 0.2s, color 0.2s; } .lv-theme-toggle:hover { background: var(--lv-chip-hover); } .lv-theme-toggle:focus-visible { outline: 2px solid rgba(120,170,255,0.7); outline-offset: 2px; } .lv-theme-icon { display: block; flex-shrink: 0; } .lv-theme-icon--sun, [data-theme="light"] .lv-theme-icon--moon { display: none; } [data-theme="light"] .lv-theme-icon--sun { display: block; } /* The drawer row is labelled "Dark theme" with On/Off beside it, so its icon stays the moon */ .lv-theme-toggle--row .lv-theme-icon--moon { display: block; } .lv-theme-toggle--row .lv-theme-icon--sun { display: none; } /* Drawer row: full width at the foot of the drawer, sized like the drawer's links */ .lv-theme-toggle.lv-theme-toggle--row { width: 100%; height: auto; min-height: 48px; margin: 0; justify-content: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--text-md); font-weight: 500; letter-spacing: 0.01em; } .lv-theme-toggle-state { margin-left: auto; font-size: var(--text-sm); font-weight: 500; color: var(--lv-toggle-state, rgba(240,242,247,0.62)); } /* One switch, one repaint: no element fades on its own clock while the theme changes */ .lv-theme-switching, .lv-theme-switching *, .lv-theme-switching *::before, .lv-theme-switching *::after { transition: none !important; } /* ══ Light theme ═════════════════════════════════════════════════════════════════════════════ Everything below applies only under ; dark is the theme's own and is untouched. Light is built for a pale page, not inverted: an opaque elevation scale (ground, white working plane, grey control surface, a step darker on hover), ink text in three steps, and the brand blue of the previous listval.com as the one filled colour (the primary action). Azure's navy hover becomes a pale blue fill with a soft blue-violet glow. Token table and contrast figures: .theme/LIGHT.md. */ :root[data-theme="light"] { color-scheme: light; /* Elevation */ --lv-ground: #f3f4f7; /* page */ --lv-plane: #ffffff; /* cards, panels, nav, drawer */ --lv-control: #eceef2; /* chips, pills, ghost buttons, inputs, arrows */ --lv-control-hover: #e1e4ea; --lv-selected: #dde7fb; /* selected pill / tab / current page: fill steps to brand tint */ --lv-card-hover: #eef3fe; /* Azure's navy hover, translated */ --lv-hairline: #e2e5ea; /* Ink */ --lv-ink: #0c111d; /* headings, strong */ --lv-body: #282e3b; /* body copy */ --lv-muted: #4b5263; /* secondary */ --lv-faint: #5f6676; /* tertiary, still AA on every surface */ /* Brand (previous listval.com #007bff / #0072ff, deepened for AA with white text) */ --lv-accent: #0064dc; --lv-accent-hover: #0055bd; --lv-accent-text: #0057c2; --lv-focus: #0064dc; /* The theme's own tokens */ --bg: var(--lv-ground); --surface: var(--lv-plane); --surface-2: var(--lv-plane); --surface-hover: var(--lv-card-hover); --border: var(--lv-hairline); --border-light: #d6dae2; --border-card: var(--lv-hairline); --border-tag: #d6dae2; --text: var(--lv-body); --text-2: var(--lv-ink); /* Ours */ --lv-chip: var(--lv-control); --lv-chip-hover: var(--lv-control-hover); --lv-toggle-state: var(--lv-faint); --lv-card-glow: 0 10px 18px -8px rgba(40,90,230,0.16), 0 18px 32px -14px rgba(90,70,230,0.16), 0 24px 45px -20px rgba(60,50,200,0.12); } /* ── Base ─────────────────────────────────────────────────────────────────────────────────── */ /* Azure's fixed violet light over a near-black ground, as faint blue and violet washes over the pale ground */ :root[data-theme="light"], [data-theme="light"] body { background-color: var(--lv-ground); background-image: radial-gradient(ellipse 70% 65% at 100% 0%, rgba(0,100,220,0.07) 0%, transparent 60%), radial-gradient(ellipse 50% 45% at 0% 15%, rgba(110,100,240,0.05) 0%, transparent 55%); color: var(--text); } :where([data-theme="light"]) a:where(:not(.wp-element-button)) { color: var(--text); } :where([data-theme="light"]) :is(h1, h2, h3, h4, h5, h6) { color: var(--text-2); } [data-theme="light"] ::selection { background: #cfe0ff; color: var(--lv-ink); } [data-theme="light"] :focus-visible { outline-color: var(--lv-focus); } /* ── Nav and drawer ───────────────────────────────────────────────────────────────────────── */ [data-theme="light"] nav[aria-label="Main navigation"] { background: var(--lv-plane); backdrop-filter: none; -webkit-backdrop-filter: none; } [data-theme="light"] .nav-links a[aria-current="page"], [data-theme="light"] .nav-links a[aria-current="page"]:hover, [data-theme="light"] .nav-links a[aria-current="page"]:focus-visible { background: var(--lv-selected); color: var(--lv-accent-text); } [data-theme="light"] .nav-hamburger:focus-visible, [data-theme="light"] .nav-drawer-close:focus-visible, [data-theme="light"] .lv-theme-toggle:focus-visible, [data-theme="light"] .foundry-anim-toggle:focus-visible { outline-color: var(--lv-focus); } [data-theme="light"] .nav-drawer-backdrop { background: rgba(12,17,29,0.32); } [data-theme="light"] .nav-drawer { background: var(--lv-plane); backdrop-filter: none; -webkit-backdrop-filter: none; } [data-theme="light"] .nav-drawer-links a[aria-current="page"] { background: var(--lv-selected); color: var(--lv-accent-text); } [data-theme="light"] .skip-link:focus { background: var(--lv-ink); color: #fff; outline-color: var(--lv-focus); } /* ── Buttons ──────────────────────────────────────────────────────────────────────────────── */ /* Primary: the one filled colour */ [data-theme="light"] .btn-primary, [data-theme="light"] .cs-cta .btn-primary, [data-theme="light"] .bio-hero-cta { background: var(--lv-accent); border-color: var(--lv-accent); color: #fff; } [data-theme="light"] .btn-primary:hover, [data-theme="light"] .cs-cta .btn-primary:hover, [data-theme="light"] .bio-hero-cta:hover { background: var(--lv-accent-hover); border-color: var(--lv-accent-hover); color: #fff; } [data-theme="light"] .btn-ghost, [data-theme="light"] .btn-ghost:hover, [data-theme="light"] .btn-ghost:focus-visible { color: var(--lv-ink); } [data-theme="light"] .cs-cta .btn-ghost-sm { color: var(--lv-body); } [data-theme="light"] .cs-cta .btn-ghost-sm:hover { color: var(--lv-ink); } /* ── Hero ─────────────────────────────────────────────────────────────────────────────────── */ [data-theme="light"] .hero::before, [data-theme="light"] .section-overlay-bg { background: radial-gradient(ellipse 80% 60% at 50% 60%, rgba(0,100,220,0.07) 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 20% 40%, rgba(110,80,230,0.05) 0%, transparent 60%), radial-gradient(ellipse 40% 50% at 80% 30%, rgba(0,140,240,0.05) 0%, transparent 60%); } @media (max-width: 768px) { [data-theme="light"] .hero::before { background: radial-gradient(ellipse 90% 25% at 50% 0%, rgba(90,100,240,0.06) 0%, transparent 75%), radial-gradient(ellipse 80% 60% at 50% 60%, rgba(0,100,220,0.07) 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 20% 40%, rgba(110,80,230,0.05) 0%, transparent 60%); } } @media (max-width: 900px) { [data-theme="light"] .hero::after { background: linear-gradient(transparent 0%, rgba(243,244,247,0.6) 55%, var(--lv-ground) 100%); } [data-theme="light"] :is(.page-header, .about-hero)::after { background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0,100,220,0.06) 0%, transparent 65%), radial-gradient(ellipse 50% 50% at 30% 60%, rgba(110,80,230,0.04) 0%, transparent 55%); } } [data-theme="light"] .hero h1 { color: var(--lv-ink); } [data-theme="light"] .hero-sub { color: var(--lv-body); } /* The mark is lit for a dark stage; on light it keeps its colour and drops the violet bloom */ [data-theme="light"] .hero-label img { filter: drop-shadow(0 6px 14px rgba(0,100,220,0.18)); } /* ── Animations toggle ────────────────────────────────────────────────────────────────────── */ [data-theme="light"] .foundry-anim-toggle { background: var(--lv-plane); color: var(--lv-body); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 2px rgba(12,17,29,0.08), 0 4px 12px rgba(12,17,29,0.06); } [data-theme="light"] .foundry-anim-toggle:hover { background: var(--lv-control); } [data-theme="light"] .foundry-anim-toggle__dot { background: var(--lv-accent); box-shadow: 0 0 6px rgba(0,100,220,0.45); } [data-theme="light"] .foundry-anim-toggle[aria-pressed="false"] .foundry-anim-toggle__dot { background: #b4b9c4; box-shadow: none; } /* ── Carousel ─────────────────────────────────────────────────────────────────────────────── */ [data-theme="light"] .carousel-title { color: var(--lv-ink); } [data-theme="light"] .carousel-slide { box-shadow: 0 1px 2px rgba(12,17,29,0.04), 0 8px 24px -12px rgba(12,17,29,0.10); } [data-theme="light"] .carousel-arrow, [data-theme="light"] .carousel-outer .carousel-arrow { background: var(--lv-plane); color: var(--lv-ink); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 2px rgba(12,17,29,0.10), 0 4px 14px rgba(12,17,29,0.10); } [data-theme="light"] .carousel-arrow:hover { background: var(--lv-control); } [data-theme="light"] .cs-tagline { color: var(--lv-accent-text); } [data-theme="light"] .cs-desc { color: var(--lv-muted); } [data-theme="light"] .carousel-dot { background: #c9cdd6; } [data-theme="light"] .carousel-dot.cd-active { background: var(--lv-ink); } /* ── Film band and closing CTA band ───────────────────────────────────────────────────────── */ /* Azure's navy bands become a pale blue band: the same cool light, carried by the ground */ [data-theme="light"] .frontier-section, [data-theme="light"] .section-visual-break { background: linear-gradient(160deg, #e9eefb 0%, #e3e9fa 35%, #e6e9fb 60%, #eef1f9 100%); } [data-theme="light"] .frontier-text h2, [data-theme="light"] .section-visual-break-inner p { color: var(--lv-ink); } [data-theme="light"] .video-wrapper { box-shadow: 0 2px 6px rgba(12,17,29,0.08), 0 24px 48px -24px rgba(20,30,80,0.30); } /* Click-to-play: the button sits on the dark poster, so it stays a light glass disc; only its ring softens */ [data-theme="light"] .hpv-overlay-btn { border-color: rgba(255,255,255,0.85); } /* ── Cards ("How it works", roadmap) ──────────────────────────────────────────────────────── */ [data-theme="light"] .card-mini { box-shadow: 0 1px 2px rgba(12,17,29,0.04); } @media (hover: hover) { [data-theme="light"] .card-mini:hover, [data-theme="light"] .card-mini:focus-within { box-shadow: var(--lv-card-glow); } [data-theme="light"] .card-mini:hover .card-mini-body, [data-theme="light"] .card-mini:focus-within .card-mini-body { background: var(--lv-card-hover); } } [data-theme="light"] .card-mini-body { transition: background 0.5s ease; } [data-theme="light"] .card-mini-date { color: var(--lv-faint); } [data-theme="light"] .card-mini p { color: var(--lv-body); } [data-theme="light"] .card-mini-link, [data-theme="light"] .card-mini-link:hover, [data-theme="light"] .card-mini-link:focus-visible { color: var(--lv-ink); } [data-theme="light"] .tag, [data-theme="light"] .cs-badge { color: var(--lv-body); } /* ── Sections, headers ────────────────────────────────────────────────────────────────────── */ [data-theme="light"] .section-sub, [data-theme="light"] .section-eyebrow { color: var(--lv-muted); } [data-theme="light"] :is(.page-header, .about-hero)::before { background: radial-gradient(ellipse 80% 70% at 50% 20%, rgba(0,100,220,0.07) 0%, transparent 65%); } [data-theme="light"] .page-header .hero-sub, [data-theme="light"] .about-hero .hero-sub { color: var(--lv-body); } [data-theme="light"] .page-header-eyebrow, [data-theme="light"] .about-hero-eyebrow { color: var(--lv-muted); } /* ── About ────────────────────────────────────────────────────────────────────────────────── */ [data-theme="light"] .vp-card { box-shadow: 0 1px 2px rgba(12,17,29,0.04); } [data-theme="light"] .vp-card::before { background: linear-gradient(135deg, rgba(0,100,220,0.16), rgba(110,90,240,0.12)); } @media (hover: hover) { [data-theme="light"] .vp-card:hover { box-shadow: var(--lv-card-glow); } } @media (hover: none) { [data-theme="light"] .vp-card:hover { background-color: var(--lv-plane); box-shadow: 0 1px 2px rgba(12,17,29,0.04); } } [data-theme="light"] .vp-icon { background: #e4ebfb; } [data-theme="light"] .vp-card p { color: var(--lv-body); } [data-theme="light"] .narrative-text p { color: var(--lv-body); } [data-theme="light"] .about-figure { background: var(--lv-control); } [data-theme="light"] .mission-section::before { background: radial-gradient(ellipse 60% 70%, rgba(0,100,220,0.07), transparent); } [data-theme="light"] .cta-strip p { color: var(--lv-body); } /* ── Feature catalog (/features/) ─────────────────────────────────────────────────────────── */ [data-theme="light"] .filter-sidebar, [data-theme="light"] .filter-sidebar.is-mobile-open { background: var(--lv-plane); } @media (max-width: 768px) { [data-theme="light"] .filter-sidebar { background: transparent; } [data-theme="light"] .filter-sidebar.is-mobile-open { background: var(--lv-plane); } } [data-theme="light"] .filter-search { background: var(--lv-control); color: var(--lv-ink); } [data-theme="light"] .filter-search:focus { background: var(--lv-plane); box-shadow: 0 0 0 2px var(--lv-focus); } [data-theme="light"] .filter-search::placeholder { color: var(--lv-faint); } [data-theme="light"] .filter-chevron { color: var(--lv-faint); } [data-theme="light"] .filter-pill { background: var(--lv-control); color: var(--lv-body); } [data-theme="light"] .filter-pill:hover { background: var(--lv-control-hover); } [data-theme="light"] .filter-pill.is-active, [data-theme="light"] .filter-pill[aria-selected="true"] { background: var(--lv-selected); color: var(--lv-accent-text); } [data-theme="light"] .filter-pill:focus-visible, [data-theme="light"] .roadmap-layout .filter-pill:focus-visible, [data-theme="light"] .roadmap-panel:focus-visible { outline-color: var(--lv-focus); } [data-theme="light"] .filter-sort select, [data-theme="light"] .filter-sort select:hover, [data-theme="light"] .filter-sort select:focus { color: var(--lv-ink); } [data-theme="light"] .filter-sort select { background-color: var(--lv-control); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%234b5263' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } [data-theme="light"] .filter-sort select:focus-visible { box-shadow: 0 0 0 2px var(--lv-focus); } [data-theme="light"] .filter-sort select:hover, [data-theme="light"] .filter-sort select:focus { background-color: var(--lv-control-hover); } [data-theme="light"] .filter-sort select option { background: var(--lv-plane); color: var(--lv-ink); } [data-theme="light"] .results-view-toggle { background: var(--lv-control); } [data-theme="light"] .view-btn { color: var(--lv-faint); } [data-theme="light"] .view-btn:hover:not(.is-active) { color: var(--lv-ink); } [data-theme="light"] .view-btn.is-active { background: var(--lv-plane); color: var(--lv-ink); box-shadow: 0 1px 2px rgba(12,17,29,0.10); } [data-theme="light"] .filter-sidebar-toggle, [data-theme="light"] .results-toolbar-right .filter-sidebar-toggle { background: var(--lv-control); color: var(--lv-ink); } [data-theme="light"] .empty-state { color: var(--lv-muted); } [data-theme="light"] .exp-card { box-shadow: 0 1px 2px rgba(12,17,29,0.04); } [data-theme="light"] .exp-card::before { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,100,220,0.05) 0%, transparent 70%); } [data-theme="light"] .exp-card:hover, [data-theme="light"] .exp-card:focus-within { box-shadow: var(--lv-card-glow); } @media (hover: none) { [data-theme="light"] .exp-card:hover { background-color: var(--lv-plane); box-shadow: 0 1px 2px rgba(12,17,29,0.04); } } [data-theme="light"] .exp-card-desc { color: var(--lv-body); } [data-theme="light"] .exp-card-tagline { color: var(--lv-muted); } [data-theme="light"] .exp-card-domain { background: var(--lv-control); } /* Azure's per-domain colours are pastels lit for a dark card; on white the same hue is set at ink lightness (oklch L .47), which keeps every one at AA. */ [data-theme="light"] .exp-card-domain[style*="--domain-color"] { color: oklch(from rgb(var(--domain-color)) 0.47 calc(c * 0.9) h); } [data-theme="light"] .bio-pill[style*="--pill-color"] { color: oklch(from rgb(var(--pill-color)) 0.47 calc(c * 0.9) h); } /* ── Feature detail (/features//) ───────────────────────────────────────────────────── */ [data-theme="light"] .bio-back-link { color: var(--lv-muted); } [data-theme="light"] .bio-back-link:hover, [data-theme="light"] .bio-back-link:focus { color: var(--lv-ink); } [data-theme="light"] .bio-pill { background: var(--lv-control); } [data-theme="light"] .bio-pill--status-production { background: #dff3e8; color: #17603a; } [data-theme="light"] .bio-hero-desc { color: var(--lv-body); } [data-theme="light"] .bio-hero-visual { background: #05070b; } [data-theme="light"] .bio-about-grid { background: var(--lv-plane); } @media (max-width: 768px) { [data-theme="light"] .bio-about-grid { background: transparent; } } [data-theme="light"] .bio-about-body p { color: var(--lv-body); } /* Azure's violet rule beside the eyebrow is a neutral rule here; colour stays in text */ [data-theme="light"] .bio-eyebrow-sm { color: var(--lv-muted); border-left-color: #c3c8d2; } [data-theme="light"] .bio-capability-list li { color: var(--lv-body); } [data-theme="light"] .bio-capability-list li::before { color: var(--lv-accent); } [data-theme="light"] .bio-explore-intro { color: var(--lv-muted); } [data-theme="light"] .bio-explore-card { background: var(--lv-plane); color: var(--lv-body); box-shadow: 0 1px 2px rgba(12,17,29,0.04); } [data-theme="light"] .bio-explore-card:hover { background: var(--lv-card-hover); box-shadow: var(--lv-card-glow); } @media (hover: none) { [data-theme="light"] .bio-explore-card:hover { background-color: var(--lv-plane); box-shadow: 0 1px 2px rgba(12,17,29,0.04); } } [data-theme="light"] .bio-explore-card-icon, [data-theme="light"] .bio-explore-card-eyebrow { color: var(--lv-faint); } [data-theme="light"] .bio-explore-card-desc { color: var(--lv-muted); } [data-theme="light"] .bio-explore-card-cta { color: var(--lv-body); } [data-theme="light"] .bio-explore-card:hover .bio-explore-card-cta { color: var(--lv-ink); } @media (max-width: 768px) { [data-theme="light"] .bio-back-link { color: var(--lv-muted); } [data-theme="light"] .bio-capability-list li { color: var(--lv-body); } [data-theme="light"] .bio-explore-card-cta { color: var(--lv-accent-text); } [data-theme="light"] .bio-explore-card:hover .bio-explore-card-cta { color: var(--lv-accent-hover); } } /* ── Long-form pages (/privacy/, /terms/) ─────────────────────────────────────────────────── */ [data-theme="light"] .story-detail .story-breadcrumb, [data-theme="light"] .story-detail .story-breadcrumb a, [data-theme="light"] .story-detail .story-meta-date { color: var(--lv-muted); } [data-theme="light"] .story-detail .story-breadcrumb a:hover { color: var(--lv-ink); } [data-theme="light"] .story-detail .story-body a { color: var(--lv-accent-text); border-bottom-color: rgba(0,87,194,0.35); } [data-theme="light"] .story-detail .story-body a:hover { border-bottom-color: var(--lv-accent-text); } /* ── Footer ───────────────────────────────────────────────────────────────────────────────── */ [data-theme="light"] .footer-col a { color: var(--lv-muted); } [data-theme="light"] .footer-col a:hover { color: var(--lv-ink); } /* The line mark is white line art; on light it is drawn in ink at the same weight */ [data-theme="light"] .footer-logo-img { filter: brightness(0); opacity: 0.72; } @media (max-width: 480px) { [data-theme="light"] .footer-col h5 { color: var(--lv-ink); } [data-theme="light"] .footer-col a { color: var(--lv-muted); } [data-theme="light"] .footer-col a:hover { color: var(--lv-ink); background-color: var(--lv-control); } }