/* ============================================================ BYTELENS — Main Stylesheet Clean, light-mode, brand-aligned design ============================================================ */ /* --- Fonts (self-hosted) --- Served from our own origin rather than fonts.googleapis.com, so no visitor IP is handed to a third party. Both faces are SIL Open Font License 1.1. `font-display: swap` keeps text visible while the file loads. */ @font-face { font-family: 'Parkinsans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/parkinsans-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'Parkinsans'; font-style: normal; font-weight: 800; font-display: swap; src: url('../assets/fonts/parkinsans-latin-800-normal.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/poppins-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url('../assets/fonts/poppins-latin-400-italic.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/poppins-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/poppins-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 600; font-display: swap; src: url('../assets/fonts/poppins-latin-600-italic.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/poppins-latin-700-normal.woff2') format('woff2'); } /* --- Brand Tokens (from Visual Identity Guidelines) --- */ :root { /* Core palette */ --blue: #3912ff; /* Bytelens Blue — primary */ --purple: #8f4aff; /* Bytelens Purple */ --navy: #2222b4; /* Bytelens Navy — body text */ --orange: #ff4100; /* Bytelens Orange — accent */ --white: #ffffff; --off-white: #f8f8fc; --light-grey: #eeeef6; --text: #2222b4; /* Body text in Bytelens Navy per brand direction (was #555580) */ --text-light: #2222b4; --text-muted: #8888a8; --gradient: linear-gradient(135deg, var(--purple) 0%, var(--blue) 100%); --gradient-reverse: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%); --gradient-subtle: linear-gradient(135deg, rgba(143,74,255,0.06) 0%, rgba(57,18,255,0.06) 100%); /* Typography — system fallbacks keep the layout stable during the font swap */ --font-display: 'Parkinsans', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif; --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Spacing & shape */ --radius: 1.25rem; --radius-sm: 0.625rem; --radius-lg: 2rem; --nav-height: 124px; --max-width: 1280px; --section-padding: 5.25rem 1.5rem; --rail-width: 190px; } /* --- Reset & Base --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); color: var(--navy); background: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Contain sideways overflow on , not . `overflow-x: hidden` on the body turns it into a scroll container, which breaks position: fixed and position: sticky for its descendants. `clip` does not. */ html { overflow-x: clip; max-width: 100%; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; } /* --- Typography --- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; color: var(--blue); /* Increased leading so ascenders/descenders on stacked lines never touch */ line-height: 1.22; letter-spacing: -0.025em; } h1 { font-size: clamp(2.5rem, 5.5vw, 4.25rem); line-height: 1.16; } h2 { font-size: clamp(1.85rem, 3.8vw, 2.75rem); line-height: 1.2; } h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 700; line-height: 1.3; } h4 { font-size: 1.05rem; font-weight: 700; line-height: 1.35; } p { font-family: var(--font-body); font-size: 1rem; line-height: 1.75; color: var(--navy); } .subtitle { font-family: var(--font-display); font-weight: 700; font-size: clamp(0.9rem, 1.8vw, 1.1rem); color: var(--orange); letter-spacing: -0.01em; } /* Per brand direction: all subtitles in Bytelens Orange (white handled on dark sections). The doubled `.subtitle.subtitle` selector raises specificity so it beats contextual rules like `.section-header p` / `.page-hero p`, which previously forced subtitles to the body-text colour regardless of source order. */ .subtitle.subtitle { color: var(--orange); } /* --- Layout --- */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; } section { padding: var(--section-padding); } .section-header { text-align: center; margin-bottom: 3.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; } .section-header p { max-width: 54ch; color: var(--text-light); } /* Orange accent rule under section headings (white-bg only — WCAG AA) */ .section-header h2::after { content: ''; display: block; width: 44px; height: 3px; background: var(--orange); border-radius: 2px; margin: 0.85rem auto 0; } /* On dark gradient sections, use white accent instead (orange fails WCAG on gradient) */ .band .section-header h2::after, .creds .section-header h2::after, .wishes .section-header h2::after, .team-section .section-header h2::after { background: rgba(255,255,255,0.65); } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; padding: 0.8rem 2rem; border-radius: 3rem; cursor: pointer; border: none; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease; white-space: nowrap; } .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(57,18,255,0.2); } .btn:active { transform: translateY(0); } .btn--white { background: var(--white); color: var(--blue); } .btn--white:hover { box-shadow: 0 8px 28px rgba(255,255,255,0.25); } /* White outline button for use on gradient backgrounds */ .btn--outline-white { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,0.55); } .btn--outline-white:hover { background: var(--white); color: var(--blue); border-color: var(--white); } /* Bytelens Orange accent button — WCAG AA on white only */ .btn--orange { background: var(--orange); color: var(--white); } .btn--orange:hover { box-shadow: 0 8px 28px rgba(255,65,0,0.28); background: #e63a00; } /* ============================================================ NAVIGATION ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); z-index: 100; display: flex; align-items: center; background: rgba(255,255,255,0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 3px solid rgba(57,18,255,0.14); transition: box-shadow 0.3s ease; } .nav.scrolled { box-shadow: 0 2px 20px rgba(57,18,255,0.07); } .nav__inner { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; width: 100%; display: flex; align-items: center; justify-content: space-between; } .nav__logo { display: inline-flex; align-items: center; /* Preserves clear-space per Visual Identity §4 */ padding: 0.25rem 0; } .nav__logo img, .nav__logo video { display: block; /* Size by height only and let the SVG keep its intrinsic 1920×705.7 ratio, no forced aspect-ratio, so the wordmark can never stretch or squash. */ height: 100px; width: auto; } /* The logo is taller than the old 72px bar, so the bar grows with it. On phones both step down together: --nav-height is what every other offset on the site is measured from. */ @media (max-width: 600px) { :root { --nav-height: 88px; } .nav__logo img, .nav__logo video { height: 64px; } } .nav__links { display: flex; align-items: center; gap: 2.25rem; } .nav__links a { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; color: var(--navy); letter-spacing: -0.01em; position: relative; transition: color 0.2s; } .nav__links a::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 2px; background: var(--gradient); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; } .nav__links a:hover { color: var(--blue); } .nav__links a:hover::after, .nav__links a.active::after { transform: scaleX(1); } .nav__links a.active { color: var(--blue); } /* Orange dot on the active nav link — small brand accent on white nav bg */ .nav__links a.active::before { content: ''; position: absolute; top: 50%; left: -10px; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--orange); } /* Mobile toggle */ .nav__toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; } .nav__toggle span { display: block; width: 24px; height: 2px; background: var(--navy); border-radius: 2px; transition: all 0.3s ease; } /* ============================================================ HERO (index) ============================================================ */ .hero { min-height: 0; padding-top: var(--nav-height); display: flex; align-items: center; position: relative; overflow: hidden; background: var(--gradient); } .hero__bg { position: absolute; inset: 0; background: var(--gradient); z-index: 0; } /* Soft white light blooms for subtle depth on the gradient */ .hero__orb { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.16; pointer-events: none; background: var(--white); } .hero__orb--1 { width: 700px; height: 700px; top: -240px; right: -120px; } .hero__orb--2 { width: 500px; height: 500px; bottom: -180px; left: -120px; opacity: 0.10; } .hero__content { position: relative; z-index: 1; max-width: var(--max-width); margin: 0 auto; padding: 5rem 1.5rem 4rem; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: center; } .hero__text { display: flex; flex-direction: column; gap: 1.25rem; } .hero__eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: rgba(255,255,255,0.85); letter-spacing: 0.12em; text-transform: uppercase; } /* On the gradient hero the whole headline is white */ .hero__title { color: var(--white); } .hero__title span { color: var(--white); } .hero__desc { font-size: 1.075rem; color: rgba(255,255,255,0.88); max-width: 48ch; line-height: 1.8; } .hero__actions { display: flex; gap: 0.875rem; flex-wrap: wrap; padding-top: 0.5rem; } .hero__visual { display: flex; justify-content: center; align-items: center; } /* Hero product illustration (monitor + phone, transparent WebP) */ .hero__illustration { width: 100%; max-width: 600px; height: auto; filter: drop-shadow(0 24px 60px rgba(20,0,80,0.35)); } /* ============================================================ THREE PILLARS ============================================================ */ .pillars { background: var(--off-white); } .pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .pillar-card { background: var(--white); border-radius: var(--radius); padding: 2.25rem 2rem; border: 1px solid rgba(57,18,255,0.06); display: flex; flex-direction: column; gap: 1rem; transition: transform 0.3s ease, box-shadow 0.3s ease; } .pillar-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(57,18,255,0.08); } /* Pillar icons: the SVG asset already contains its own gradient circle */ .pillar-card__icon { width: 58px; height: 58px; flex-shrink: 0; } .pillar-card__icon img { width: 58px; height: 58px; display: block; } .pillar-card h3 { font-size: 1.15rem; color: var(--blue); } .pillar-card p { font-size: 0.95rem; color: var(--text-light); line-height: 1.7; } /* ============================================================ HOW IT WORKS — Flow steps ============================================================ */ .how-it-works { background: var(--white); } .flow-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .flow-step { display: flex; gap: 1.5rem; padding: 2rem; border-radius: var(--radius); border: 1px solid rgba(57,18,255,0.06); background: var(--white); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .flow-step:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(57,18,255,0.07); border-color: rgba(57,18,255,0.12); } /* Flat colour line-icon for each flow step (replaces the number) */ .flow-step__icon { width: 44px; height: 44px; flex-shrink: 0; object-fit: contain; } .flow-step__content { display: flex; flex-direction: column; gap: 0.5rem; } .flow-step__content h3 { color: var(--blue); font-size: 1.1rem; } .flow-step__content p { font-size: 0.93rem; color: var(--text-light); line-height: 1.7; } /* ============================================================ CTA SECTION ============================================================ */ .cta-section { background: var(--white); } .cta-box { background: var(--gradient-subtle); border: 1px solid rgba(57,18,255,0.08); border-radius: var(--radius-lg); padding: 4rem 3.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; position: relative; overflow: hidden; } /* Decorative chat-bubble illustration (purple + orange) bottom-right */ .cta-box__illustration { position: absolute; right: 2.5rem; bottom: 2rem; width: 150px; height: auto; pointer-events: none; } @media (max-width: 760px) { .cta-box__illustration { display: none; } } .cta-box h2 { max-width: 22ch; } .cta-box p { max-width: 56ch; color: var(--text-light); margin-bottom: 0.5rem; } /* ============================================================ PAGE HERO (inner pages) ============================================================ */ .page-hero { padding: calc(var(--nav-height) + 5rem) 1.5rem 4.5rem; text-align: center; background: var(--off-white); position: relative; overflow: hidden; } .page-hero::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 600px; height: 3px; background: var(--orange); border-radius: 0 0 4px 4px; } .page-hero h1 { margin-bottom: 1rem; } .page-hero p { max-width: 56ch; margin: 0 auto; color: var(--text-light); font-size: 1.05rem; } /* Accent text helper — solid Bytelens Purple (no gradient fill on text) */ .text-gradient { color: var(--purple); } /* ============================================================ ABOUT PAGE ============================================================ */ .about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center; } .about-text { display: flex; flex-direction: column; gap: 1.15rem; } .about-text h2 { text-align: left; } /* Gradient feature band (About "Why now") — white text + white line illustration */ .feature-band { background: var(--gradient); } .feature-band .about-text h2 { color: var(--white); } .feature-band .about-text p { color: rgba(255,255,255,0.9); } .feature-band .subtitle.subtitle { color: rgba(255,255,255,0.85); } /* Left-aligned CTA inside the About "Why now" text column. Replaces an inline style attribute so the CSP can forbid inline styles. */ .about-text__cta { margin-top: 0.5rem; align-self: flex-start; } .about-visual { display: flex; align-items: center; justify-content: center; } .about-visual img { width: 100%; max-width: 380px; height: auto; } .values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin-top: 0; } .value-card { padding: 1.75rem; border-radius: var(--radius); border: 1px solid rgba(57,18,255,0.08); background: var(--white); transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s; } .value-card:hover { border-color: rgba(57,18,255,0.15); box-shadow: 0 8px 32px rgba(57,18,255,0.06); transform: translateY(-2px); } .value-card h3 { font-size: 1.05rem; font-weight: 700; line-height: 1.35; color: var(--blue); margin-bottom: 0.5rem; } .value-card p { font-size: 0.93rem; color: var(--text-light); line-height: 1.7; } /* Self-contained illustration at the top of each value card (colour baked into SVG). Circle-style icons (Our values) render ~52px; flat line icons (Patterns) ~44px. */ .value-card__icon { height: 52px; width: auto; display: block; margin-bottom: 1.1rem; } /* ============================================================ GRADIENT BAND ============================================================ */ .band { background: var(--gradient); color: var(--white); padding: 5rem 1.5rem; text-align: center; position: relative; overflow: hidden; } .band h2 { color: var(--white); } .band p { color: rgba(255,255,255,0.8); max-width: 52ch; margin: 0.75rem auto 2rem; font-size: 1.05rem; } .band .subtitle.subtitle { color: rgba(255,255,255,0.85); } /* Decorative wave line-art anchored to the bottom of a gradient band */ .band__wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; pointer-events: none; opacity: 0.9; } .band > .container { position: relative; z-index: 1; } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--navy); color: var(--white); padding: 4rem 1.5rem 2rem; } .footer__inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.1); } .footer__brand { display: flex; flex-direction: column; gap: 1.15rem; align-items: flex-start; } .footer__logo { display: block; /* Uses the clear-space-trimmed wordmark so the logo sits flush-left with the tagline below it. Sized by height only; the SVG keeps its own true ratio. */ height: 32px; width: auto; } .footer__tagline { font-size: 0.88rem; color: rgba(255,255,255,0.6); max-width: 30ch; line-height: 1.6; } .footer__col-title { font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 1rem; } .footer__links { display: flex; flex-direction: column; gap: 0.6rem; } .footer__links a { font-size: 0.92rem; color: rgba(255,255,255,0.7); transition: color 0.2s; } .footer__links a:hover { color: var(--white); } .footer__bottom { max-width: var(--max-width); margin: 1.75rem auto 0; display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; color: rgba(255,255,255,0.35); flex-wrap: wrap; gap: 1rem; } /* ============================================================ ANIMATIONS — scroll reveal + page transitions ============================================================ */ /* Hero copy animates on load rather than on scroll. */ @keyframes reveal-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } .reveal { opacity: 0; animation: reveal-up 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .reveal--1 { animation-delay: 0.08s; } .reveal--2 { animation-delay: 0.2s; } .reveal--3 { animation-delay: 0.35s; } .reveal--4 { animation-delay: 0.5s; } /* Everything below the fold fades up as it enters the viewport. main.js adds .visible via IntersectionObserver. */ .anim-in { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .anim-in.visible { opacity: 1; transform: none; } /* Leaving the viewport reverses the reveal, so scrolling back up replays it. The exit is quicker than the entrance so it reads as the element getting out of the way rather than a second animation competing for attention. */ .anim-in.is-exiting { transition: opacity 0.35s ease, transform 0.35s ease; } /* Directional variants for asymmetric sections */ .anim-in--left { transform: translate3d(-28px, 0, 0); } .anim-in--right { transform: translate3d(28px, 0, 0); } .anim-in--scale { transform: scale(0.96); } .anim-in--left.visible, .anim-in--right.visible, .anim-in--scale.visible { transform: none; } /* Stagger children of a grid. main.js sets --i on each child, so the delay scales with position without hard-coding nth-child rules. */ .stagger > .anim-in { transition-delay: calc(var(--i, 0) * 70ms); } /* Section headings get a subtle rise of their own */ .section-header .anim-in { transition-duration: 0.8s; } /* --- Page transitions --- Modern browsers cross-fade between pages natively. Older browsers simply navigate as usual, and .page-fade below still gives them a fade-in. */ @view-transition { navigation: auto; } @keyframes page-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Opacity only, deliberately. Animating transform here would make a containing block for every position: fixed descendant (nav and rail). */ body { animation: page-fade-in 0.4s ease both; } /* main.js adds .is-leaving on link click so the outgoing page dips out in browsers without the View Transitions API. */ body.is-leaving { opacity: 0; transition: opacity 0.22s ease; } ::view-transition-old(root) { animation: 0.28s cubic-bezier(0.4, 0, 1, 1) both fade-out; } ::view-transition-new(root) { animation: 0.42s cubic-bezier(0.22, 1, 0.36, 1) both fade-in-up; } @keyframes fade-out { to { opacity: 0; } } @keyframes fade-in-up { from { opacity: 0; transform: translateY(10px); } } /* Respect the OS-level reduced-motion preference: show everything, move nothing. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .anim-in, .reveal { opacity: 1 !important; transform: none !important; } body { animation: none; } @view-transition { navigation: none; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 960px) { .hero__content { grid-template-columns: 1fr; gap: 2.5rem; } .hero__visual { order: -1; } .pillars-grid { grid-template-columns: 1fr; } .about-split { grid-template-columns: 1fr; gap: 2.5rem; } .footer__inner { grid-template-columns: 1fr 1fr; } .cta-box { padding: 3rem 2rem; } } @media (max-width: 600px) { :root { --section-padding: 4rem 1.25rem; } .nav__links { display: none; flex-direction: column; gap: 1.25rem; } .nav__links.open { display: flex; position: fixed; top: var(--nav-height); left: 0; right: 0; background: var(--white); padding: 2rem 1.5rem; border-top: 1px solid rgba(57,18,255,0.06); box-shadow: 0 8px 32px rgba(57,18,255,0.06); z-index: 99; } .nav__toggle { display: flex; } .footer__inner { grid-template-columns: 1fr; gap: 2rem; } .footer__bottom { flex-direction: column; text-align: center; } .hero__content { padding: 3rem 1.25rem; } } /* ============================================================ TEAM / FOUNDERS (Story page) ============================================================ */ .team-section { background: var(--gradient); position: relative; overflow: hidden; } .team-section .section-header h2 { color: var(--white); } .team-section .section-header p { color: rgba(255,255,255,0.85); } .team-section .subtitle.subtitle { color: rgba(255,255,255,0.85); } .team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.75rem; } .team-card { background: var(--white); border: 1px solid rgba(57,18,255,0.08); border-radius: var(--radius); padding: 2.25rem 2rem 2rem; width: 280px; max-width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .team-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(57,18,255,0.08); border-color: rgba(57,18,255,0.15); } .team-card__avatar { position: relative; width: 112px; height: 112px; border-radius: 50%; background: var(--gradient); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 0.85rem; } .team-card__initials { font-family: var(--font-display); font-weight: 800; font-size: 2.5rem; color: var(--white); line-height: 1; } /* Photo sits on top of the initials; if it fails to load it's removed and the initials show through. object-position biased upward to keep faces centred. */ .team-card__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; } .team-card__name { font-size: 1.2rem; color: var(--blue); } .team-card__role { font-size: 0.9rem; line-height: 1.35; color: var(--text-muted); margin-bottom: 0.5rem; /* Reserve two lines so a longer title (e.g. Chief Product Officer) that wraps still lines up with a shorter one-line title on the other card. */ min-height: 2.7em; } .team-card__bio { font-size: 0.88rem; color: var(--text-light); line-height: 1.55; margin-bottom: 0.6rem; /* Reserve equal space (~3 lines) so the bio blocks, and therefore the buttons below them, line up row-for-row across both cards. */ min-height: 4.65em; } .team-card__linkedin { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--blue); border: 2px solid rgba(57,18,255,0.2); border-radius: 3rem; padding: 0.5rem 1.15rem; /* auto pushes the button to the bottom so buttons align across cards */ margin-top: auto; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease; } .team-card__linkedin:hover { background: var(--blue); color: var(--white); border-color: var(--blue); transform: translateY(-2px); } .team-card__linkedin svg { width: 16px; height: 16px; fill: currentColor; } /* Articles section */ .articles-section { background: var(--off-white); } .articles-grid { display: grid; /* Fixed columns so four cards always line up evenly (no orphan card) */ grid-template-columns: repeat(4, 1fr); gap: 1.5rem; align-items: stretch; } @media (max-width: 980px) { .articles-grid { grid-template-columns: repeat(2, 1fr); } } .article-card { background: var(--white); border-radius: var(--radius); border: 1px solid rgba(57,18,255,0.06); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; cursor: pointer; } .article-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(57,18,255,0.08); border-color: rgba(57,18,255,0.15); } .article-card__stripe { height: 6px; background: var(--gradient); } /* Alternate every other article card stripe in Bytelens Orange for accent variety */ .articles-grid .article-card:nth-child(even) .article-card__stripe { background: var(--orange); } .article-card__body { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.75rem 1.75rem 2rem; flex: 1; } .article-card__meta { display: flex; align-items: center; gap: 0.625rem; font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 0; } .article-card__date { color: var(--orange); } .article-card__source { padding: 0.15rem 0.55rem; background: rgba(143,74,255,0.08); color: var(--purple); border-radius: 2rem; font-size: 0.68rem; letter-spacing: 0.05em; } .article-card h3 { font-size: 1.1rem; color: var(--blue); line-height: 1.3; } .article-card__body p { font-size: 0.93rem; color: var(--text-light); line-height: 1.7; } .article-card__read { margin-top: auto; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--blue); padding-top: 0.75rem; } .articles-note { text-align: center; font-size: 0.92rem; color: var(--text-muted); margin-top: 2.5rem; } /* ============================================================ CONTACT PAGE (refreshed — no form) ============================================================ */ /* Contact "Send us a message" — full-width gradient band */ .contact-band { position: relative; overflow: hidden; } .contact-card { max-width: 680px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; position: relative; z-index: 1; } .contact-band h2 { color: var(--white); } .contact-band .subtitle.subtitle { color: rgba(255,255,255,0.85); } .contact-card__lede { max-width: 52ch; color: rgba(255,255,255,0.88); margin-bottom: 0.5rem; } .contact-card__note { max-width: 52ch; font-size: 0.9rem; color: rgba(255,255,255,0.66); margin-top: 1rem; } /* Chat-bubble illustration on the contact band */ .contact-band__illustration { position: absolute; right: 7%; top: 50%; transform: translateY(-40%); width: clamp(110px, 12vw, 165px); height: auto; pointer-events: none; } @media (max-width: 900px) { .contact-band__illustration { display: none; } } .contact-process-grid { max-width: 920px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .contact-process-step { display: flex; gap: 1rem; align-items: flex-start; padding: 1.5rem; border-radius: var(--radius); border: 1px solid rgba(57,18,255,0.06); background: var(--white); transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; } .contact-process-step:hover { transform: translateY(-2px); border-color: rgba(57,18,255,0.15); box-shadow: 0 8px 24px rgba(57,18,255,0.06); } .contact-process__num { font-family: var(--font-display); font-weight: 800; font-size: 0.85rem; width: 28px; height: 28px; border-radius: 50%; background: var(--orange); color: var(--white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } .founder-card__body { display: flex; flex-direction: column; gap: 0.3rem; } .contact-process-step strong { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--navy); display: block; margin-bottom: 0.25rem; } .contact-process-step p { font-size: 0.88rem; color: var(--text-light); line-height: 1.6; } /* ============================================================ STORY / CONTACT — responsive overrides ============================================================ */ @media (max-width: 960px) { .contact-process-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .contact-card { padding: 2.5rem 1.75rem; } .articles-grid { grid-template-columns: 1fr; } } /* ============================================================ CONTACT FORM (Web3Forms) ============================================================ */ .contact-form { width: 100%; max-width: 560px; margin: 1.5rem auto 0.5rem; text-align: left; display: flex; flex-direction: column; gap: 1.1rem; background: var(--white); border-radius: var(--radius); padding: 2rem 1.9rem; box-shadow: 0 24px 60px rgba(20,19,43,0.22); } .contact-form__hp { position: absolute !important; left: -9999px; opacity: 0; width: 0; height: 0; } .contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } .contact-form__field { display: flex; flex-direction: column; gap: 0.4rem; } .contact-form__field > span { font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; color: var(--navy); letter-spacing: 0.01em; } .contact-form__field input, .contact-form__field textarea { font-family: var(--font-body); font-size: 0.95rem; color: var(--navy); background: var(--off-white); border: 1px solid var(--light-grey); border-radius: var(--radius-sm); padding: 0.75rem 0.9rem; width: 100%; transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .contact-form__field textarea { resize: vertical; min-height: 120px; } .contact-form__field input::placeholder, .contact-form__field textarea::placeholder { color: var(--text-muted); } .contact-form__field input:focus, .contact-form__field textarea:focus { outline: none; background: var(--white); border-color: var(--blue); box-shadow: 0 0 0 3px rgba(57,18,255,0.15); } .contact-form__submit { align-self: flex-start; margin-top: 0.25rem; border: none; cursor: pointer; } .contact-form__submit:disabled { opacity: 0.6; cursor: default; } .contact-form__status { font-size: 0.9rem; color: var(--text-light); min-height: 1.2em; margin-top: 0.15rem; } .contact-form__status.is-success { color: #0f9d63; font-weight: 500; } .contact-form__status.is-error { color: #d63a1a; font-weight: 500; } @media (max-width: 560px) { .contact-form__row { grid-template-columns: 1fr; } .contact-form { padding: 1.6rem 1.3rem; } } /* ============================================================ CONTACT FOUNDERS ============================================================ */ .contact-founders { padding: 5rem 1.5rem 6rem; } .founder-grid { max-width: 760px; margin: 2.5rem auto 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .founder-card { display: flex; align-items: center; gap: 1.1rem; padding: 1.5rem; border-radius: var(--radius); border: 1px solid rgba(57,18,255,0.08); background: var(--white); transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; } .founder-card:hover { transform: translateY(-3px); border-color: rgba(57,18,255,0.18); box-shadow: 0 12px 30px rgba(57,18,255,0.08); } .founder-card__avatar { position: relative; flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--gradient); } .founder-card__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .founder-card__initials { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--white); } .founder-card__name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--navy); } .founder-card__role { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.5rem; } .founder-card__linkedin { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.85rem; color: var(--blue); transition: color 0.2s ease; } .founder-card__linkedin:hover { color: var(--purple); } .founder-card__linkedin svg { width: 16px; height: 16px; fill: currentColor; } @media (max-width: 620px) { .founder-grid { grid-template-columns: 1fr; } } /* ============================================================ PRODUCT AREA CARDS — patent tag ============================================================ */ .pillar-card__tag { align-self: flex-start; margin-top: auto; font-family: var(--font-display); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--blue); background: rgba(57,18,255,0.08); padding: 0.25rem 0.6rem; border-radius: 999px; } /* ============================================================ PERSONAS ============================================================ */ .personas { background: var(--white); } .persona-grid { margin-top: 3rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .persona-card { background: var(--off-white); border: 1px solid rgba(57,18,255,0.08); border-radius: var(--radius); padding: 1.85rem 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .persona-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(57,18,255,0.08); border-color: rgba(57,18,255,0.16); } .persona-card__role { display: inline-block; align-self: flex-start; font-family: var(--font-display); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); border: 1.5px solid rgba(255,65,0,0.35); border-radius: 2rem; padding: 0.28rem 0.8rem; } .persona-card p { font-size: 0.92rem; color: var(--text-light); line-height: 1.65; } /* The two operational personas close the grid as a full-width bottom row */ .persona-card--wide { grid-column: span 2; } @media (max-width: 1040px) { .persona-grid { grid-template-columns: repeat(2, 1fr); } .persona-card--wide { grid-column: auto; } } @media (max-width: 620px) { .persona-grid { grid-template-columns: 1fr; } } /* ============================================================ BEST WISHES FROM THE INDUSTRY ============================================================ */ .wishes { background: var(--gradient); position: relative; overflow: hidden; } .wishes .section-header h2 { color: var(--white); } .wishes .section-header p { color: rgba(255,255,255,0.85); } .wishes .subtitle.subtitle { color: rgba(255,255,255,0.85); } .wishes-grid { margin-top: 3rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem; align-items: stretch; } .wish-card { background: var(--white); border-radius: var(--radius); padding: 2.5rem 2.25rem 2rem; display: flex; flex-direction: column; gap: 1.25rem; box-shadow: 0 24px 60px rgba(20,19,43,0.22); position: relative; } .wish-card::before { content: "\201C"; position: absolute; top: 0.4rem; left: 1.4rem; font-family: var(--font-display); font-weight: 800; font-size: 4.5rem; line-height: 1; color: var(--orange); opacity: 0.9; } .wish-card__quote { position: relative; z-index: 1; margin: 0.75rem 0 0; font-size: 1.02rem; line-height: 1.7; color: var(--navy); } .wish-card__by { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--light-grey); display: flex; align-items: center; gap: 0.9rem; } .wish-card__photo { width: 72px; height: 72px; flex-shrink: 0; border-radius: 50%; object-fit: cover; /* Square source, square crop, but object-position keeps the face centred even if a replacement image is not perfectly squared. */ object-position: center 40%; background: var(--light-grey); } .wish-card__meta { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .wish-card__name { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--blue); } .wish-card__role { font-size: 0.85rem; line-height: 1.45; color: var(--text-muted); } @media (max-width: 820px) { .wishes-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .wish-card__photo { width: 60px; height: 60px; } } /* ============================================================ STORY — essays as top section (hero removed) ============================================================ */ .articles-section--top { padding-top: calc(var(--nav-height) + 3.5rem); } /* ============================================================ THE DATA-TO-INSIGHT GAP (home) ============================================================ */ .gap { background: var(--white); } .gap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .gap-card { background: var(--off-white); border: 1px solid rgba(57,18,255,0.06); border-radius: var(--radius); padding: 2rem 1.85rem; display: flex; flex-direction: column; gap: 0.7rem; transition: transform 0.3s ease, box-shadow 0.3s ease; } .gap-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(57,18,255,0.08); } .gap-card__icon { width: 38px; height: 38px; margin-bottom: 0.35rem; } .gap-card h3 { font-size: 1.08rem; color: var(--blue); } .gap-card p { font-size: 0.94rem; color: var(--text-light); line-height: 1.7; } .gap-note { max-width: 46ch; margin: 3rem auto 0; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 2.2vw, 1.35rem); line-height: 1.5; color: var(--orange); } @media (max-width: 900px) { .gap-grid { grid-template-columns: 1fr; } } /* ============================================================ THREE MESSAGES — benefit, credential, trust (gradient band) ============================================================ */ .creds { background: var(--gradient); position: relative; overflow: hidden; } .creds .section-header h2 { color: var(--white); } .creds .section-header p { color: rgba(255,255,255,0.85); } .creds .subtitle.subtitle { color: rgba(255,255,255,0.85); } .creds-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .cred-card { background: var(--white); border-radius: var(--radius); padding: 2.25rem 2rem; display: flex; flex-direction: column; gap: 0.7rem; box-shadow: 0 18px 48px rgba(20,0,80,0.18); transition: transform 0.3s ease, box-shadow 0.3s ease; } .cred-card:hover { transform: translateY(-3px); box-shadow: 0 24px 60px rgba(20,0,80,0.24); } .cred-card__icon { width: 40px; height: 40px; margin-bottom: 0.35rem; } .cred-card h3 { font-size: 1.08rem; color: var(--blue); line-height: 1.35; } .cred-card p { font-size: 0.93rem; color: var(--text-light); line-height: 1.7; } @media (max-width: 900px) { .creds-grid { grid-template-columns: 1fr; } } /* ============================================================ CATEGORY CONTRAST — "Dashboards watch. ByteLens learns." ============================================================ */ .contrast { background: var(--off-white); } .contrast-list { display: flex; flex-direction: column; gap: 0.85rem; max-width: 940px; margin: 0 auto; } .contrast-row { display: grid; grid-template-columns: minmax(0, 0.85fr) 28px minmax(0, 1.15fr); align-items: center; gap: 1.25rem; background: var(--white); border: 1px solid rgba(57,18,255,0.06); border-radius: var(--radius); padding: 1.35rem 1.75rem; transition: transform 0.3s ease, box-shadow 0.3s ease; } .contrast-row:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(57,18,255,0.08); } .contrast-row__from { font-size: 0.95rem; line-height: 1.6; color: var(--text-muted); } /* Arrow = a bar plus a solid triangle. Border triangles have an unambiguous direction, so the stacked layout can redraw it pointing down rather than rotating the whole element and hoping the result reads correctly. */ .contrast-row__arrow { position: relative; justify-self: center; align-self: center; width: 26px; height: 10px; opacity: 0.75; } /* shaft */ .contrast-row__arrow::before { content: ''; position: absolute; left: 0; top: 50%; width: 18px; height: 2px; margin-top: -1px; background: var(--orange); } /* head, pointing right */ .contrast-row__arrow::after { content: ''; position: absolute; right: 0; top: 50%; margin-top: -5px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--orange); } .contrast-row__to { font-family: var(--font-body); font-weight: 600; font-size: 0.98rem; line-height: 1.65; color: var(--navy); } @media (max-width: 820px) { .contrast-row { grid-template-columns: 1fr; gap: 0.6rem; padding: 1.35rem 1.5rem; } /* Stacked layout: redraw the arrow vertically instead of rotating it. */ .contrast-row__arrow { justify-self: start; width: 10px; height: 24px; margin: 0.15rem 0 0.15rem 0.35rem; } .contrast-row__arrow::before { left: 50%; top: 0; margin-top: 0; margin-left: -1px; width: 2px; height: 16px; } /* head, pointing down */ .contrast-row__arrow::after { left: 50%; right: auto; top: auto; bottom: 0; margin-top: 0; margin-left: -5px; border-top: 8px solid var(--orange); border-bottom: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; } } /* ============================================================ PERSONAS — refinements for the four-seat grid ============================================================ */ .persona-card__q { font-family: var(--font-display); font-weight: 700; font-size: 0.97rem; line-height: 1.5; color: var(--blue); } .personas-note { max-width: 60ch; margin: 2.5rem auto 0; text-align: center; font-size: 0.93rem; color: var(--text-muted); } /* ============================================================ SECTION HEADER — split variant Title left, supporting copy right. Fills the width that a single centred column used to leave empty on wide screens. ============================================================ */ .section-header--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 1.5rem 3.5rem; text-align: left; margin-bottom: 3rem; } .section-header--split .subtitle { grid-column: 1 / -1; margin-bottom: -0.35rem; } .section-header--split h2 { margin: 0; } .section-header--split h2::after { margin-left: 0; margin-right: auto; } .section-header--split p { max-width: 58ch; margin: 0; } @media (max-width: 900px) { .section-header--split { grid-template-columns: 1fr; align-items: start; gap: 0.75rem; } } /* ============================================================ STICKY SECTION RAIL (home) Fixed "on this page" index that tracks the current section. Two modes, because the free margin beside a 1280px container varies a lot: >= 1660px full rail with labels 1200-1660 compact dot rail, label appears on hover < 1200px hidden Positioned from the centre outwards so it can never overlap the container, whatever the viewport width. ============================================================ */ .rail { /* Shared geometry. The track is centred on the dot from these, so the two can never drift apart, whatever the mode or breakpoint overrides. */ --dot-size: 10px; --dot-x: 0px; --track-w: 2px; position: fixed; top: 50%; transform: translateY(-50%); z-index: 40; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.45s ease, visibility 0.45s ease; } .rail.is-visible { opacity: 1; visibility: visible; pointer-events: auto; } .rail__title { font-family: var(--font-display); font-weight: 700; transition: color 0.4s ease; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.9rem; padding-left: 1.35rem; white-space: nowrap; } .rail__list { display: flex; flex-direction: column; gap: 0.1rem; position: relative; } /* Track behind the markers. main.js measures the centre of the first and last dot and writes them here, so the track starts and ends exactly on a dot rather than at an arbitrary padding offset. */ .rail__list::before { content: ''; position: absolute; left: calc(var(--dot-x) + (var(--dot-size) - var(--track-w)) / 2); top: var(--track-start, 0.5rem); height: var(--track-len, calc(100% - 1rem)); width: var(--track-w); background: var(--light-grey); border-radius: 2px; z-index: 0; /* Gaps are punched at each waypoint so the line never runs through the inside of a dot. main.js builds the mask from the measured dot centres; without it the line simply renders solid. */ -webkit-mask-image: var(--line-mask, none); mask-image: var(--line-mask, none); transition: background 0.4s ease; } /* Progress fill. Its height is interpolated between dot centres using the same section maths that picks the active dot, so the head of the fill always lands on the dot that is currently highlighted. */ .rail__list::after { content: ''; position: absolute; left: calc(var(--dot-x) + (var(--dot-size) - var(--track-w)) / 2); top: var(--track-start, 0.5rem); width: var(--track-w); height: var(--fill, 0px); background: linear-gradient(180deg, var(--purple), var(--blue)); border-radius: 2px; z-index: 1; -webkit-mask-image: var(--line-mask, none); mask-image: var(--line-mask, none); transition: background 0.4s ease; } .rail__link { position: relative; z-index: 2; display: block; padding: 0.45rem 0 0.45rem 1.35rem; font-size: 0.8rem; line-height: 1.35; color: var(--text-muted); white-space: nowrap; transition: color 0.4s ease, transform 0.25s ease; } .rail__link::before { content: ''; position: absolute; left: var(--dot-x); top: 50%; transform: translateY(-50%); width: var(--dot-size); height: var(--dot-size); border-radius: 50%; background: transparent; border: 2px solid var(--light-grey); transition: border-color 0.4s ease; } .rail__link:hover { color: var(--blue); } .rail__link.is-active { color: var(--blue); font-weight: 600; } .rail__link.is-active::before { border-color: var(--blue); } /* --- Travelling marker --- Pinned to the exact end of the progress fill using the same two custom properties that size the fill, so it tracks the line 1:1 by construction rather than by a second calculation that could drift. */ .rail__marker { position: absolute; left: var(--dot-x); top: calc(var(--track-start, 0px) + var(--fill, 0px)); transform: translateY(-50%); width: var(--dot-size); height: var(--dot-size); border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(255, 65, 0, 0.16); z-index: 3; pointer-events: none; transition: background 0.4s ease, box-shadow 0.4s ease; } /* --- Over a gradient band --- The rail is fixed, so full-bleed gradient sections scroll underneath it. main.js adds .rail--on-dark while one of those sections is behind the rail, and everything inverts to white. Orange on the gradient fails contrast, so the active marker goes white there too. --- */ .rail--on-dark .rail__title { color: rgba(255, 255, 255, 0.75); } .rail--on-dark .rail__link { color: rgba(255, 255, 255, 0.78); } .rail--on-dark .rail__link:hover, .rail--on-dark .rail__link.is-active { color: var(--white); } .rail--on-dark .rail__list::before { background: rgba(255, 255, 255, 0.3); } .rail--on-dark .rail__list::after { background: linear-gradient(180deg, var(--white), rgba(255, 255, 255, 0.8)); } .rail--on-dark .rail__link::before { border-color: rgba(255, 255, 255, 0.55); } .rail--on-dark .rail__link.is-active::before { border-color: var(--white); } .rail--on-dark .rail__marker { background: var(--white); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.22); } /* --- Full rail: only where the margin genuinely fits it --- Needs (viewport - container)/2 >= rail width + gutter, i.e. (vw - 1280)/2 >= 190 + 24 -> vw >= 1708. Rounded up to 1760. --- */ @media (min-width: 1760px) { .rail { width: var(--rail-width); left: calc(50% - (var(--max-width) / 2) - var(--rail-width) - 1.5rem); } } /* --- Compact rail: dots only, label on hover --- */ @media (min-width: 1380px) and (max-width: 1759px) { .rail { width: 12px; left: clamp(0.75rem, calc(50% - (var(--max-width) / 2) - 2.5rem), 4rem); } .rail__title { display: none; } .rail__link { padding: 0.5rem 0 0.5rem 0; width: 12px; height: 12px; font-size: 0; } /* Only the dot origin moves; the track follows it automatically. */ .rail { --dot-x: 1px; } /* Label slides out on hover */ .rail__link span { position: absolute; left: 22px; top: 50%; transform: translateY(-50%) translateX(-6px); font-size: 0.78rem; line-height: 1; padding: 0.4rem 0.7rem; border-radius: var(--radius-sm); background: var(--navy); color: var(--white); opacity: 0; pointer-events: none; white-space: nowrap; transition: opacity 0.22s ease, transform 0.22s ease; } .rail__link:hover span, .rail__link:focus-visible span { opacity: 1; transform: translateY(-50%) translateX(0); } /* Tooltip pill inverts with the theme. Scoped to compact mode: on the full-width rail the span is plain text and must stay unstyled. */ .rail--on-dark .rail__link span { background: var(--white); color: var(--navy); } } @media (max-width: 1379px) { .rail { display: none; } } /* Anchor jumps must clear the fixed nav */ [id] { scroll-margin-top: calc(var(--nav-height) + 1.5rem); } /* ============================================================ GRID TILING Item counts are chosen so a row is never left with a single orphan tile drifting off-centre. Three-item grids step 3 -> 1; six-item grids step 4+2 -> 2 -> 1. ============================================================ */ .bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; } /* Long compound headings (e.g. "Customer Experience Observability") must wrap rather than push the tile wider than its column. */ h1, h2, h3, h4, .pillar-card h3, .gap-card h3, .cred-card h3 { overflow-wrap: break-word; word-break: normal; hyphens: auto; } .pillar-card, .gap-card, .cred-card { min-width: 0; } @media (max-width: 980px) { .bento { grid-template-columns: 1fr; } } /* Contrast rows use the full container width */ .contrast-list { max-width: none; } .contrast-row { grid-template-columns: minmax(0, 0.8fr) 28px minmax(0, 1.2fr); } /* Flow steps: four across on wide screens, two on mid, one on narrow */ /* Four across when there is room, two for the whole mid range, one only when a two-up would genuinely be too narrow to read. */ @media (min-width: 1120px) { .flow-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 1119px) and (min-width: 700px) { .flow-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 699px) { .flow-grid { grid-template-columns: 1fr; } } /* ============================================================ FAQ PAGE Grouped, always-expanded answers. Accordions hide text from the crawlers and answer engines this page exists to serve, so the content stays in the DOM and visible. Kept quiet and readable rather than card-heavy: this reads like a document, not a grid. ============================================================ */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .faq { background: var(--white); padding-top: 1rem; } .faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; } .faq-item { padding: 2rem 0; border-bottom: 1px solid var(--light-grey); } .faq-item:first-child { padding-top: 0; } .faq-item:last-child { border-bottom: none; } .faq-item h3 { position: relative; font-size: 1.15rem; line-height: 1.35; color: var(--blue); margin-bottom: 0.7rem; padding-left: 1.5rem; } /* Small orange marker instead of a boxed card */ .faq-item h3::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); } .faq-item p { font-size: 0.97rem; line-height: 1.8; color: var(--text-light); padding-left: 1.5rem; } @media (max-width: 600px) { .faq-item { padding: 1.5rem 0; } .faq-item h3 { font-size: 1.05rem; } } /* Low-key footer link to the FAQ. The page is deliberately kept out of the main navigation, but a crawlable path keeps it indexed properly. */ .footer__links--quiet { opacity: 0.55; font-size: 0.82rem; } .footer__links--quiet:hover { opacity: 1; } /* Hero illustration drifts up gently once loaded */ .hero__visual--float .hero__illustration { animation: hero-float 7s ease-in-out 1.2s infinite; } @keyframes hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @media (prefers-reduced-motion: reduce) { .hero__visual--float .hero__illustration { animation: none; } } /* The 404 page reuses .gap-card as a link. Cards elsewhere are plain divs, so inherit the colour and keep the hover lift feeling clickable. */ a.gap-card { color: inherit; cursor: pointer; } a.gap-card:hover { border-color: rgba(57, 18, 255, 0.18); }