/* ========================================================================== QUANVERGE LABS — stylesheet -------------------------------------------------------------------------- Contents: 1. Colour & font variables <- change the whole site's look here 1b. Dark theme overrides 2. Base / resets 3. Reusable pieces (buttons, cards, section headings) 4. Navigation bar 5. Hero 6. Problem 7. Products (comparison table, ROI calculator, product images) 8. Team 9. Research 10. Contact 11. Final call-to-action & footer 12. Mobile layout 13. Reduced-motion support ========================================================================== */ /* 1. COLOUR & FONT VARIABLES =============================================== Every colour on the site comes from here. Change a value once and it updates everywhere. Colours are taken from the Quanverge logo. */ :root { /* --- Backgrounds --------------------------------------------------- */ --bg: #ffffff; /* the page itself */ --surface: #f6f9fb; /* cards and footer — a hint of teal-grey */ --surface-2: #eef4f7; /* table headers, hover states */ --border: #dde7ec; /* card edges and dividers */ /* --- Text ---------------------------------------------------------- The numbers are contrast ratios against white. Anything below 4.5 is unreadable to many people, so don't lighten these further. */ --text: #0b2530; /* 16.1 : 1 body text and headings */ --text-muted: #4a636e; /* 6.2 : 1 secondary paragraphs */ --text-faint: #536c78; /* 5.2 : 1 small labels — already at the limit */ /* --- Brand teal, sampled from the logo's nested chevrons ----------- The logo's bright cyan only scores 1.9:1 on white, so it can't be used for text. We keep it as --brand-fill for solid buttons (where white text sits on top of it) and use darker teals for anything that has to be read. */ --brand: #14708a; /* 5.6 : 1 links, small text, accents */ --brand-strong: #0d5568; /* hover and pressed states */ --brand-heading: #1f86a3; /* 4.1 : 1 large headings only (24px+) */ --brand-fill: #2fc6d6; /* logo cyan — fills only, never text */ --brand-soft: #e6f6f9; /* badge and pill backgrounds */ /* --- Secondary accent (ROI figures, list markers) ------------------ */ --accent: #9a6410; /* 4.9 : 1 amber, darkened to read on white */ --accent-soft: #fdf3e2; /* --- Status -------------------------------------------------------- */ --green: #067a5b; /* 5.1 : 1 */ --green-soft: #e7f6f1; /* Navigation bar. Semi-transparent so the page shows through the blur, which is why it needs its own variable rather than reusing --bg. */ --nav-bg: rgba(255, 255, 255, 0.9); /* --- Fonts (loaded from Google Fonts in index.html) ---------------- */ --font-body: "Outfit", system-ui, sans-serif; --font-display: "Playfair Display", Georgia, serif; /* --- Layout -------------------------------------------------------- */ --max-width: 1100px; /* Used by the browser for form controls and scrollbars */ color-scheme: light; } /* 1b. DARK THEME =========================================================== Same variable names, dark values. Everything else in this file reads these, so nothing below needs to know which theme is active. The switch is driven by a data-theme attribute on , set by js/main.js. Ratios below are measured against --bg (#0b1a22). Note the brand colour flips: the logo's bright cyan (#2fc6d6) is unreadable on white but excellent on dark, so dark mode uses it directly instead of the darkened teal. */ :root[data-theme="dark"] { --bg: #0b1a22; --surface: #12262f; --surface-2: #17303b; --border: #23414e; --text: #eef6f8; /* 15.0 : 1 */ --text-muted: #a8c2cc; /* 8.4 : 1 */ --text-faint: #8aa6b2; /* 6.1 : 1 */ --brand: #4fd8e8; /* 10.0 : 1 links, small text */ --brand-strong: #8fe9f3; /* hover — brighter on dark */ --brand-heading: #4fd8e8; --brand-fill: #2fc6d6; --brand-soft: #10333d; /* badge / pill backgrounds */ --accent: #f0b44e; /* 9.9 : 1 ROI figures */ --accent-soft: #2e2412; --green: #4ade80; /* 9.7 : 1 */ --green-soft: #102c1f; --nav-bg: rgba(11, 26, 34, 0.9); color-scheme: dark; } /* 2. BASE / RESETS ========================================================= */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* Stops the fixed navbar covering headings when you jump to a section */ scroll-padding-top: 90px; } body { background-color: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.6; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } /* Keyboard users must always be able to see what they've focused */ a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; } /* Faint grid pattern sitting behind the whole page */ .page-background { position: fixed; inset: 0; z-index: -1; background-image: linear-gradient(rgba(20, 112, 138, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 112, 138, 0.05) 1px, transparent 1px); background-size: 48px 48px; /* Fades the grid out towards the edges */ -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%); mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%); } /* 3. REUSABLE PIECES ======================================================= */ /* Every section shares this wrapper: consistent width and vertical spacing */ .section { max-width: var(--max-width); margin: 0 auto; padding: 90px 24px; } /* The first section on an interior page. The extra top padding clears the fixed navigation bar. */ .page-header { padding-top: 130px; padding-bottom: 20px; } /* Follow-on sections sit closer to what's above them */ .section-tight { padding-top: 20px; } /* Centres a section's contents */ .center { text-align: center; } .center-text { margin-left: auto; margin-right: auto; } .center-cta { margin-top: 32px; text-align: center; } /* Small teal label above a heading, e.g. "THE CHALLENGE" */ .eyebrow { display: inline-block; color: var(--brand); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 14px; } .section-heading { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; line-height: 1.15; } .section-intro { color: var(--text-muted); max-width: 620px; margin-top: 16px; } /* Teal gradient applied to text (used on the hero headline). Both ends are dark enough to stay readable on a white background. */ .text-gradient { background: linear-gradient(135deg, var(--brand-strong) 0%, var(--brand-heading) 50%, var(--brand-strong) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .text-brand { color: var(--brand); } /* Light panel used for most cards */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 1px 3px rgba(11, 37, 48, 0.06); } /* Same panel but with a teal edge, for emphasis */ .card-brand { border-color: rgba(20, 112, 138, 0.28); } /* Filled teal button. In light mode the fill is dark teal with white text; in dark mode the fill is bright cyan with dark text. --btn-ink handles that flip so the label always contrasts against the fill. */ :root { --btn-ink: #ffffff; } :root[data-theme="dark"] { --btn-ink: #08171e; } .btn { display: inline-block; padding: 15px 32px; border-radius: 999px; background: linear-gradient(135deg, var(--brand-strong), var(--brand), var(--brand-strong)); background-size: 200% auto; color: var(--btn-ink); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; transition: background-position 0.3s, transform 0.3s, box-shadow 0.3s; } .btn:hover { background-position: right center; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(20, 112, 138, 0.28); } /* Outlined version of the button */ .btn-outline { display: inline-block; padding: 15px 32px; border-radius: 999px; border: 1px solid var(--brand); background: var(--bg); color: var(--brand); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; transition: background-color 0.3s; } .btn-outline:hover { background: var(--brand-soft); } /* "Coming soon" state — looks deliberately inactive, and isn't a link */ .is-soon { display: inline-block; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-faint); cursor: default; box-shadow: none; } .is-soon:hover { transform: none; box-shadow: none; background: var(--surface-2); } /* Two-letter product mark (Re, Q-, Sa, Qr). We use these instead of icons because the Quanverge logo is the only image mark on the site. */ .monogram { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, var(--brand-heading), var(--brand-strong)); font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--btn-ink); flex-shrink: 0; } .monogram-lg { width: 72px; height: 72px; font-size: 1.5rem; border-radius: 50%; } /* Elements start invisible and fade upwards when scrolled into view. The .is-visible class is added by js/main.js. */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* 4. NAVIGATION BAR ======================================================== */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--nav-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); } .navbar-inner { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .navbar-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } /* The logo file is a JPEG, so its cream background can't be made transparent. Sitting it on a permanent white chip turns that into a deliberate design choice — and keeps it looking right in dark mode, where a raw cream rectangle would look broken. */ .navbar-logo img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: #ffffff; padding: 3px; box-shadow: 0 1px 3px rgba(11, 37, 48, 0.12); } .navbar-links { display: flex; align-items: center; gap: 28px; list-style: none; } .navbar-links a { font-size: 0.9rem; color: var(--text-muted); transition: color 0.2s; } .navbar-links a:hover { color: var(--brand); } /* Marks which page you're currently on */ .navbar-links a.is-current { color: var(--brand); font-weight: 600; } .navbar-cta { padding: 9px 20px; border-radius: 999px; background: linear-gradient(135deg, var(--brand), var(--brand-strong)); color: var(--btn-ink); font-size: 0.85rem; font-weight: 700; transition: transform 0.2s; } .navbar-cta:hover { transform: scale(1.05); } /* When the CTA is a "coming soon" label it shouldn't grow on hover */ .navbar-cta.is-soon:hover { transform: none; } /* --- Light / dark theme switch --- */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); flex-shrink: 0; transition: color 0.2s, border-color 0.2s, background-color 0.2s; } .theme-toggle:hover { color: var(--brand); border-color: var(--brand); } .theme-toggle svg { width: 18px; height: 18px; display: block; } /* Show the sun in dark mode (click to go light) and the moon in light mode. Both icons live in the HTML; CSS picks which one is visible. */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* Hamburger button — hidden on desktop, shown on mobile (see section 13) */ .navbar-toggle { display: none; font-size: 1.6rem; line-height: 1; color: var(--text); } /* 5. HERO ================================================================== */ .hero { text-align: center; padding-top: 150px; } /* The thin "systems operational" strip at the very top */ .status-ticker { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; padding: 10px 22px; margin-bottom: 32px; border: 1px solid var(--border); border-radius: 999px; background: var(--green-soft); font-size: 0.75rem; color: var(--text-muted); } .status-live { display: flex; align-items: center; gap: 8px; color: var(--green); font-weight: 600; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* Large logo above the headline on the home page */ .hero-logo { width: 132px; height: 132px; margin: 0 auto 26px; border-radius: 26px; object-fit: cover; background: #ffffff; padding: 6px; box-shadow: 0 6px 24px rgba(11, 37, 48, 0.14); } /* The company name sits directly beneath the logo, so it reads as part of the brand lockup rather than as a small badge. The text-indent cancels the trailing letter-space, which would otherwise push the wordmark visibly left of centre. */ .hero-eyebrow { display: inline-block; margin-bottom: 24px; font-size: clamp(1.15rem, 3vw, 1.65rem); font-weight: 700; letter-spacing: 0.3em; text-indent: 0.3em; text-transform: uppercase; color: var(--brand); } .hero-title { font-family: var(--font-display); font-size: clamp(2.6rem, 8vw, 4.6rem); font-weight: 700; line-height: 1.05; text-transform: uppercase; } /* The cursor that follows the headline as it types. Hidden by default and only shown while typing, so it disappears once the line is finished rather than blinking away above the description. Hiding it here also means it never appears at all if JavaScript doesn't run. */ .caret { display: none; width: 5px; height: 0.8em; margin-left: 6px; background: var(--brand-heading); vertical-align: middle; } /* js/main.js adds this while the headline is being written, and removes it when the last character lands. */ .caret.is-typing { display: inline-block; } .hero-subtitle { max-width: 560px; margin: 28px auto 0; color: var(--text-muted); font-size: 1.05rem; } .hero-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 40px; } /* The row of five numbers (100x, 10x, 4, 20+, 350M+) */ /* auto-fit rather than a fixed column count, so the row stays balanced however many stats are present. A fixed count leaves an empty column and pushes everything off-centre the moment one is removed. */ .hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px; max-width: 900px; margin: 64px auto 0; /* Values are different lengths, so some wrap to two lines and others don't. Aligning to the bottom keeps every label on the same line. */ align-items: end; } .hero-stat-value { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 700; line-height: 1.15; color: var(--brand); } /* Short values like "4" or "20+" look lost next to a wrapped phrase such as "Greater than 50x", so they are set larger to carry equal weight. */ .hero-stat-value.is-short { font-size: clamp(2.5rem, 6.5vw, 3.5rem); } .hero-stat-label { margin-top: 4px; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); } .scroll-hint { margin-top: 70px; font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-faint); animation: bob 2s ease-in-out infinite; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } } /* 6. PROBLEM =============================================================== */ .problem-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 44px; } .problem-card { padding: 28px; } /* Illustration at the top of each Problem card. Kept to 64px so every source image renders at or below its native size and stays sharp. */ .problem-icon { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; margin-bottom: 16px; background: #0b1a22; border: 1px solid var(--border); } .problem-card h3 { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.05em; text-transform: uppercase; } .problem-card p { margin-top: 8px; font-size: 0.9rem; color: var(--text-muted); } /* 7. PRODUCTS ============================================================== */ .products-header { text-align: center; } .products-header .section-intro { margin-left: auto; margin-right: auto; } /* --- Product images --------------------------------------------------- The supplied artwork is dark and comes in mixed aspect ratios, so each image sits in a fixed-ratio frame with object-fit: cover. That keeps the cards aligned regardless of the source dimensions, and the dark ground reads as a deliberate product visual rather than a stray block. */ .product-figure { margin: 0 0 26px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: #0b1a22; /* matches the artwork, so letterboxing blends */ aspect-ratio: 16 / 10; } .product-figure img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Smaller frame used on the products overview cards */ .product-card .product-figure { aspect-ratio: 16 / 9; margin-bottom: 20px; } /* On a product detail page the visual is a supporting element, not the subject, so it is capped small and centred — roughly 210px tall, about a fifth of a typical viewport. The direct-child selector keeps this off the figures inside .product-card on products.html, which should stay full-width. Capping the size also means every image renders at or below its native resolution, so nothing is upscaled. */ .section > .product-viz, .section > .product-figure { max-width: 340px; margin-left: auto; margin-right: auto; } /* Shows an image at its own size and shape instead of filling a wide frame. Use this when the artwork is small or nearly square: stretching it would blur it, and a 16:10 crop would cut the top and bottom off. */ .product-figure.is-native { aspect-ratio: auto; max-width: 300px; margin-left: auto; margin-right: auto; } .product-figure.is-native img { height: auto; object-fit: contain; } /* Browsers without aspect-ratio support fall back to a fixed height */ @supports not (aspect-ratio: 1) { .product-figure { height: 240px; } .product-card .product-figure { height: 180px; } } /* --- Animated product graphics ----------------------------------------- Drawn in SVG rather than supplied as images, so they stay perfectly sharp at any size on any screen and weigh only a few KB. The panel stays dark in both themes so it matches the artwork on the products grid. Every animation below settles on a finished, sensible frame, so the reduced-motion rule in section 13 (which collapses animations to almost zero duration) leaves a complete picture rather than a half-drawn one. */ .product-viz { margin: 0 0 26px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: #0b1a22; aspect-ratio: 16 / 10; } .product-viz svg { width: 100%; height: 100%; display: block; } @supports not (aspect-ratio: 1) { .product-viz { height: 400px; } } /* Strokes that draw themselves in */ @keyframes viz-draw { to { stroke-dashoffset: 0; } } .viz-draw { stroke-dasharray: 900; stroke-dashoffset: 900; animation: viz-draw 2.6s ease-out forwards; } /* Soft pulse for nodes and detection points */ @keyframes viz-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } .viz-pulse { animation: viz-pulse 2.8s ease-in-out infinite; } /* Bars growing up from the axis */ @keyframes viz-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } } .viz-rise { transform-origin: bottom; animation: viz-rise 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; } /* Elements fading in one after another */ @keyframes viz-appear { from { opacity: 0; } to { opacity: 1; } } .viz-appear { opacity: 0; animation: viz-appear 0.7s ease-out forwards; } /* A pulse of data travelling along a circuit trace. The paths carry pathLength="100", so the dash lengths below are percentages of the trace and every pulse moves at the same visual speed regardless of how long its path actually is. */ @keyframes viz-flow { to { stroke-dashoffset: 0; } } .viz-flow { stroke-dasharray: 16 84; stroke-dashoffset: 100; animation: viz-flow 2.6s linear infinite; } /* A slow drift, used on the lattice */ @keyframes viz-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .viz-drift { animation: viz-drift 6s ease-in-out infinite; } /* The body of a single product page */ .product-detail { padding: 34px; } .product-category { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--brand); } .product-title-row { display: flex; align-items: center; gap: 16px; margin-top: 14px; } .product-title-row h1, .product-title-row h2, .product-title-row h3 { font-family: var(--font-display); font-size: 1.8rem; } /* On a product page the title sits next to a large monogram, so the heading shouldn't carry its own top margin. */ .product-title-row .section-heading { margin-top: 2px; } /* --- Cards on the products overview page --- */ .product-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .product-card { display: block; padding: 28px; transition: transform 0.25s, box-shadow 0.25s; } .product-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(11, 37, 48, 0.1); } .product-card .product-title-row { margin-top: 0; } .product-card .product-title-row h2 { font-size: 1.5rem; } .product-card .product-category { margin-top: 2px; } .product-card-text { margin-top: 16px; color: var(--text-muted); font-size: 0.92rem; } .product-card .metric { margin-top: 14px; font-weight: 600; color: var(--brand); } .product-card-link { display: inline-block; margin-top: 16px; font-size: 0.85rem; font-weight: 700; color: var(--brand); } /* Previous / next links at the foot of a product page */ .product-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 28px; font-size: 0.9rem; font-weight: 600; } .product-nav a { color: var(--brand); } .product-nav a:hover { color: var(--brand-strong); } /* When there's only a "next" link, push it to the right */ .product-nav a:only-child { margin-left: auto; } /* "All Products" link at the top of a product page */ .back-link { display: inline-block; margin-bottom: 20px; font-size: 0.85rem; font-weight: 600; color: var(--text-faint); } .back-link:hover { color: var(--brand); } .product-badge { display: inline-block; margin-top: 24px; padding: 7px 18px; border: 1px solid rgba(20, 112, 138, 0.3); border-radius: 999px; background: var(--brand-soft); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand); } .subheading { margin: 28px 0 12px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); } .use-cases { list-style: none; } .use-cases li { display: flex; gap: 10px; margin-bottom: 8px; font-size: 0.9rem; color: var(--text-muted); } .use-cases .arrow { color: var(--brand); } .use-cases strong { color: var(--text); } /* Classical vs Quanverge comparison table. The wrapper lets the table scroll sideways on small screens. */ .table-wrapper { overflow-x: auto; margin-top: 26px; } .comparison-table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 0.88rem; text-align: left; } .comparison-table th { padding: 10px 16px 10px 0; border-bottom: 1px solid var(--border); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); } .comparison-table th:last-child { color: var(--brand); } .comparison-table td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--border); color: var(--text-muted); } .comparison-table td:first-child { color: var(--text); } .comparison-table td:last-child { color: var(--brand-strong); font-weight: 600; } /* --- ROI calculator --- */ .roi-toggle { display: flex; align-items: center; gap: 10px; margin-top: 26px; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--brand); transition: color 0.2s; } .roi-toggle:hover { color: var(--brand-strong); } /* The "+" rotates into an "×" when the panel is open */ .roi-toggle .plus { display: inline-block; font-size: 1.2rem; transition: transform 0.3s; } .roi-toggle[aria-expanded="true"] .plus { transform: rotate(45deg); } .roi-panel { display: none; margin-top: 22px; padding: 26px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg); } .roi-panel.is-open { display: block; } .roi-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand); margin-bottom: 22px; } .roi-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; } .roi-control-label { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 0.85rem; color: var(--text-muted); } .roi-control-label output { font-weight: 700; color: var(--text); white-space: nowrap; } /* accent-color tints the slider with our brand colour in one line */ .roi-controls input[type="range"] { width: 100%; accent-color: var(--brand); } .roi-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 26px; } .roi-result { padding: 16px; border: 1px solid rgba(154, 100, 16, 0.25); border-radius: 12px; background: var(--accent-soft); } .roi-result-label { font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); } .roi-result-value { margin-top: 4px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--accent); } .roi-result-value .unit { font-family: var(--font-body); font-size: 0.8rem; font-weight: 400; color: var(--text-faint); } .roi-cite { margin-top: 4px; font-size: 0.72rem; color: var(--text-faint); } .roi-disclaimer { margin-top: 20px; font-size: 0.72rem; color: var(--text-faint); } /* --- The four small summary cards under the tab panel --- */ .product-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; } /* Small landscape thumbnail on the home page product cards. The artwork is wide, so a square chip would crop most of it away. */ .product-thumb { width: 96px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; background: #0b1a22; border: 1px solid var(--border); } @supports not (aspect-ratio: 1) { .product-thumb { height: 60px; } } .product-summary { display: block; padding: 20px; text-align: left; transition: transform 0.25s, box-shadow 0.25s; } .product-summary:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(11, 37, 48, 0.1); } .product-summary h4 { margin-top: 12px; font-family: var(--font-display); font-size: 1rem; } .product-summary .category { font-size: 0.72rem; color: var(--text-faint); } .product-summary .metric { margin-top: 8px; font-size: 0.85rem; font-weight: 600; color: var(--brand); } /* 8. TEAM ================================================================== */ .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; } .team-card { padding: 26px; } .team-card a { display: block; transition: opacity 0.2s; } .team-card a:hover { opacity: 0.85; } .team-card h3 { margin-top: 16px; font-family: var(--font-display); font-size: 1.05rem; } .team-role { margin-top: 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); } .team-bio { margin-top: 12px; font-size: 0.85rem; color: var(--text-muted); } /* Citation figures on the cards of team members who publish */ .team-metric { margin-top: 6px; font-size: 0.75rem; font-weight: 600; color: var(--text-faint); } /* Headshots. Cropped square and centred on the face, so the circle frames the person rather than their shoulders. The background colour shows through on portraits shot against a plain backdrop. */ .team-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--surface-2); border: 2px solid var(--border); } .profile-header .team-photo { width: 112px; height: 112px; border-width: 3px; } /* "View profile" and the LinkedIn link sit on one row */ .card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; } .card-actions .product-card-link { margin-top: 0; } .social-link { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 600; color: var(--text-faint); transition: color 0.2s; } .social-link:hover { color: var(--brand); } .social-link svg { width: 15px; height: 15px; flex-shrink: 0; } /* 9. RESEARCH & PROFILES =================================================== */ /* --- Headline figures (papers, citations, h-index) --- */ .metric-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; margin: 32px 0 8px; padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); } .metric-strip div { text-align: center; } .metric-value { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--brand); } .metric-label { margin-top: 2px; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); } /* --- Research domain cards --- */ /* Two rows: the three productized domains, then the two under active research. Each row is its own grid, so the split stays correct if a domain moves between them. */ .domain-grid { display: grid; gap: 20px; margin-top: 36px; } .domain-grid.is-three { grid-template-columns: repeat(3, 1fr); } .domain-grid.is-two { grid-template-columns: repeat(2, 1fr); margin-top: 20px; } .domain-card { padding: 28px; } /* Deliberately small: these sit beside a status pill and above a heading, so they mark the card rather than dominate it. currentColor means they pick up the brand colour and follow the theme with no extra rules. */ .domain-icon { width: 34px; height: 34px; display: block; color: var(--brand); } .domain-card-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .domain-card h2 { font-family: var(--font-display); font-size: 1.35rem; margin-top: 14px; } .domain-areas { margin-top: 14px; list-style: none; } .domain-areas li { display: flex; gap: 9px; margin-bottom: 7px; font-size: 0.9rem; color: var(--text-muted); } .domain-areas li::before { content: "\2014"; /* em dash */ color: var(--brand); flex-shrink: 0; } /* Evidence line: names the paper backing this domain */ .domain-evidence { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--text-faint); } .domain-evidence cite { color: var(--text-muted); font-style: italic; } .domain-link { display: inline-block; margin-top: 14px; font-size: 0.85rem; font-weight: 700; color: var(--brand); } /* --- Status pills --- Three maturity levels. Only "productized" uses the brand colour; the others are deliberately quieter so the page doesn't overstate itself. */ .status-pill { display: inline-block; padding: 5px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); } .status-pill.is-productized { border-color: rgba(20, 112, 138, 0.35); background: var(--brand-soft); color: var(--brand); } .status-pill.is-active { border-color: rgba(154, 100, 16, 0.3); background: var(--accent-soft); color: var(--accent); } /* --- Profile pages --- */ .profile-header .product-title-row { margin-top: 0; } .profile-role { margin-top: 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); } .profile-body { padding: 34px; } .profile-body h2 { font-family: var(--font-display); font-size: 1.15rem; margin-top: 30px; } .profile-body h2:first-child { margin-top: 0; } .profile-body p { color: var(--text-muted); margin-top: 10px; } /* Comma-separated expertise keywords */ .tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .tag { padding: 5px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 0.75rem; color: var(--text-muted); } /* --- Publication lists --- */ .publication-list { margin-top: 16px; list-style: none; counter-reset: pub; } .publication-list li { padding: 14px 0; border-bottom: 1px solid var(--border); } .publication-list li:last-child { border-bottom: 0; } .pub-title { color: var(--text); font-weight: 600; font-size: 0.95rem; } .pub-meta { margin-top: 4px; font-size: 0.82rem; color: var(--text-faint); } .pub-venue { color: var(--text-muted); font-style: italic; } .pub-cites { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 0.7rem; font-weight: 700; white-space: nowrap; } .subheading-note { margin-top: 6px; font-size: 0.8rem; color: var(--text-faint); } /* 10. CONTACT ============================================================== */ .contact-card { max-width: 640px; margin: 44px auto 0; padding: 36px; } .contact-row { margin-bottom: 26px; } .contact-row:last-child { margin-bottom: 0; } .contact-row h3 { font-family: var(--font-display); font-size: 1.1rem; } .contact-row p, .contact-row a { margin-top: 4px; color: var(--text-muted); font-size: 0.92rem; } .contact-row a:hover { color: var(--brand); } /* 11. FINAL CTA & FOOTER =================================================== */ .final-cta { text-align: center; } .final-cta h2 { font-family: var(--font-display); font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 700; line-height: 1.15; } .final-cta p { max-width: 480px; margin: 20px auto 0; color: var(--text-muted); } .final-cta .btn { margin-top: 36px; } .footer { border-top: 1px solid var(--border); background: var(--surface); padding: 30px 24px; } .footer-inner { max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 0.85rem; color: var(--text-faint); } .footer-inner img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; } .footer-inner a { color: var(--brand); } .footer-inner a:hover { color: var(--brand-strong); } /* 12. MOBILE LAYOUT ======================================================== Anything inside this block only applies on screens 860px wide or less. */ @media (max-width: 860px) { /* Swap the desktop link row for a dropdown opened by the hamburger */ .navbar-toggle { display: block; } .navbar-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 24px 20px; background: var(--bg); border-top: 1px solid var(--border); box-shadow: 0 8px 16px rgba(11, 37, 48, 0.08); } /* .is-open is added by js/main.js when the hamburger is tapped */ .navbar-links.is-open { display: flex; } .navbar-links li { padding: 10px 0; } .hero { padding-top: 130px; } .hero-logo { width: 96px; height: 96px; border-radius: 20px; } .navbar-logo img { width: 40px; height: 40px; } /* In the dropdown the toggle is a full-width row, not a floating circle */ .navbar-links .theme-toggle { width: 100%; border-radius: 10px; height: 42px; margin-top: 8px; } .hero-stats { grid-template-columns: repeat(2, 1fr); } .problem-grid, .team-grid, .product-summary-grid, .product-card-grid, .domain-grid { grid-template-columns: 1fr; } .profile-body { padding: 24px; } .metric-strip { padding: 20px; gap: 16px; } .section { padding: 60px 20px; } .page-header { padding-top: 110px; } .product-detail { padding: 24px; } /* Stack the monogram above the product name on narrow screens */ .product-title-row { flex-direction: column; align-items: flex-start; gap: 12px; } .footer-inner { flex-direction: column; text-align: center; } } /* 13. REDUCED-MOTION SUPPORT =============================================== Some people set their device to reduce motion (it can cause nausea or distraction). This turns off our animations for them. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } /* Make sure fade-in content is visible even without the animation */ .reveal { opacity: 1; transform: none; } }