/* ========================================================================== PulseWave Semiconductor — HTML theme Enterprise layout system: utility bar, mega menu, hero carousel, lifecycle tabs, stats, industry tiles, insights, CTA band, large footer. ========================================================================== */ /* ---------- 1. Tokens ---------- */ :root { --ink: #111112; /* PulseWave near-black */ --navy: #0c111d; /* dark bands (theme: dark) */ --accent: #3187f1; /* gradient start / links (theme: accent 1) */ --accent-2: #aa25fb; /* gradient end (theme: accent 2) */ --on-accent: #ffffff; /* text on accent buttons (set by the theme picker for contrast) */ /* everything below is derived — do not hard-code brand colours elsewhere */ --blue: var(--accent); --purple: var(--accent-2); --violet: var(--accent); --cyan: var(--accent); --indigo: color-mix(in srgb, var(--accent) 45%, var(--accent-2)); --accent-soft: color-mix(in srgb, var(--accent) 60%, #ffffff); --accent-2-soft: color-mix(in srgb, var(--accent-2) 55%, #ffffff); --violet-soft: var(--accent-2-soft); --navy-lift: color-mix(in srgb, var(--navy) 82%, var(--accent)); --paper: #ffffff; --page-bg: #eaeef0; --frame: 100%; /* full-width page (was a 1440px centred column) */ --mist: #f4f6f8; /* light tint of the live-site grey; must differ from --page-bg */ --mist-2: #dfe5e9; --line: #dce2e7; --line-dark: rgba(255, 255, 255, 0.12); --text: #49515b; --muted: #6b7480; --muted-light: rgba(255, 255, 255, 0.72); --grad: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%); --grad-dark: linear-gradient(170deg, var(--navy-lift) 0%, var(--navy) 100%); --font-head: "Poppins", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace; --font-nav: "Rubik", "Segoe UI", system-ui, sans-serif; /* header + mega menus, as on Cadence */ --nav-ink: #33393d; --container: calc(1290px + 2 * var(--gutter)); /* 1290px of content, like Cadence */ --gutter: clamp(20px, 4vw, 48px); --radius: 0px; --radius-sm: 0px; --shadow: 0 1px 2px rgba(16, 20, 24, 0.05), 0 4px 14px rgba(16, 20, 24, 0.08); --shadow-lg: 0 14px 40px rgba(16, 20, 24, 0.14); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --header-h: 74px; --header-top: var(--header-h); /* where sticky bars sit; 0 while the header is hidden on scroll */ --util-h: 0px; } /* ---------- 2. Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; -webkit-tap-highlight-color: transparent; } /* no blue flash when tapping on phones (as on Cadence) */ body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--text); background: var(--page-bg); -webkit-font-smoothing: antialiased; } img, svg, video, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4, h5 { font-family: var(--font-head); line-height: 1.3; margin: 0 0 0.5em; letter-spacing: -0.01em; font-weight: 600; color: var(--ink); } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4, .hero h1, .hero h2, .page-hero h1, .cta-band h2, .tile h3 { color: #fff; } h3, h4, h5 { font-weight: 500; } p { margin: 0 0 1em; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 4px; } .nowrap { white-space: nowrap; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; left: 16px; top: -60px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 999; } .skip-link:focus { top: 12px; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } /* page spans the full window; content stays centred in .container */ .site-header, main, .site-footer, .util-bar { max-width: var(--frame); margin-inline: auto; } main { background: var(--paper); } .site-header { background: var(--paper); } /* Cadence-style page scrollbar: slim, no arrow buttons */ html { scrollbar-width: thin; scrollbar-color: var(--muted) var(--mist); } @supports selector(::-webkit-scrollbar) { html { scrollbar-width: auto; scrollbar-color: auto; } html::-webkit-scrollbar { width: 10px; height: 10px; } html::-webkit-scrollbar-track { background: var(--mist); } html::-webkit-scrollbar-thumb { background: var(--muted); } html::-webkit-scrollbar-thumb:hover { background: var(--text); } html::-webkit-scrollbar-button { display: none; } } .icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } /* ---------- 3. Typography helpers ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 12px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: #8a9199; margin-bottom: 14px; } .eyebrow::before { content: none; } .section--dark .eyebrow, .hero .eyebrow, .page-hero .eyebrow { color: rgba(255, 255, 255, 0.65); } .display { font-size: clamp(2rem, 3.8vw, 3.1rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.22; } .h1 { font-size: clamp(1.85rem, 3.2vw, 2.6rem); font-weight: 600; letter-spacing: -0.02em; } .h2 { font-size: clamp(1.55rem, 2.3vw, 2.15rem); font-weight: 600; } .h3 { font-size: clamp(1.15rem, 1.6vw, 1.6rem); font-weight: 500; } .lead { font-size: clamp(1.02rem, 1.2vw, 1.15rem); color: var(--muted); line-height: 1.65; font-weight: 400; } .section--dark .lead, .hero .lead, .page-hero .lead { color: var(--muted-light); } .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero .grad-text, .section--dark .grad-text, .page-hero .grad-text { background: linear-gradient(90deg, var(--accent-soft) 0%, var(--accent-2-soft) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .mono { font-family: var(--font-mono); } /* ---------- 4. Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 30px; border-radius: 0; font-weight: 500; font-size: 13.5px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s, color .25s, border-color .25s; } .btn .icon { font-size: 18px; transition: transform .25s var(--ease); } .btn:hover .icon { transform: translateX(4px); } .btn--primary { background: var(--grad); background-size: 140% 100%; color: var(--on-accent); } .btn--primary:hover { background-position: 100% 0; } .btn--dark { background: var(--ink); color: #fff; } .btn--dark:hover { background: var(--accent-2); } .btn--ghost { border: 1px solid currentColor; color: var(--accent); background: transparent; } .btn--ghost:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .btn--light { border: 1px solid rgba(255, 255, 255, 0.6); color: #fff; } .btn--light:hover { background: #fff; color: var(--ink); border-color: #fff; } .btn--sm { height: 38px; padding: 0 20px; font-size: 13px; } .link-arrow { display: inline-flex; align-items: center; gap: 9px; font-weight: 500; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); } .link-arrow:hover { color: var(--accent); } .link-arrow .icon { transition: transform .25s var(--ease); } .link-arrow:hover .icon { transform: translateX(5px); } .section--dark .link-arrow, .tile .link-arrow, .cta-band .link-arrow { color: #fff; } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; } /* ---------- 5. Utility bar ---------- */ .util-bar { display: none; } .util-bar .container { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 16px; } .util-bar__msg { display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .util-bar__msg b { color: var(--text); font-weight: 600; } .util-bar__links { display: flex; gap: 22px; } .util-bar__links a:hover { color: var(--accent); } /* ---------- 6. Header & mega menu ---------- */ .site-header { position: sticky; top: 0; z-index: 100; font-family: var(--font-nav); background: #fff; border-bottom: 1px solid var(--line); transition: background-color .3s, box-shadow .3s, border-color .3s, transform .2s ease-in-out; } /* Cadence-style: header slides away while scrolling down, returns when scrolling up */ .header-hidden { --header-top: 0px; } .header-hidden .site-header { transform: translateY(calc(-100% - 2px)); box-shadow: none; } /* the extra 2px stops a hairline of the header showing at fractional zoom (e.g. Windows 125%) */ .subnav, .subnav--family, .toc, .share { transition: top .2s ease-in-out; } .site-header.is-scrolled { box-shadow: 0 2px 10px rgba(16, 20, 24, 0.08); } .site-header > .container { display: flex; align-items: center; height: var(--header-h); gap: 28px; } .logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .logo img { height: 30px; width: auto; } .site-footer .logo img { filter: none; } .logo__mark { width: 30px; height: 30px; } .logo__word { font-family: var(--font-head); font-weight: 600; font-size: 19px; letter-spacing: 0.01em; color: var(--ink); line-height: 1; } .logo__word small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 8.5px; letter-spacing: 0.24em; color: var(--muted); margin-top: 3px; } .site-footer .logo__word { color: #fff; } .site-footer .logo__word small { color: rgba(255, 255, 255, 0.55); } .nav { display: flex; align-items: stretch; height: 100%; margin-right: auto; } .nav__item { position: static; display: flex; } /* Cadence-style: full-height items, light grey on hover, 4px bar under the text grows in when a menu is opened (click) */ .nav__link { display: flex; align-items: center; gap: 6px; padding: 0 16px; font-weight: 500; font-size: 16.2px; letter-spacing: 0.01em; color: var(--nav-ink); position: relative; transition: background-color .2s; } .nav__link:hover { background: var(--mist); } .nav__link .icon { display: none; font-size: 14px; transition: transform .25s; } .nav__link::after { content: ""; position: absolute; left: 16px; bottom: 19px; width: 0; height: 4px; background: var(--grad); transition: width .2s linear; } .nav__item.is-open .nav__link::after { /* only while a menu is open, as on Cadence */ width: calc(100% - 32px); } .nav__item.is-open .nav__link .icon { transform: rotate(180deg); } .header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; } /* Menu items centred with equal space to the logo (left) and the search glass (right). The glass sits 16px inside its button, so the nav reaches 16px into that padding. */ @media (min-width: 1025px) { .nav { flex: 1; justify-content: center; margin-right: -16px; } .header-actions { margin-left: 0; } } .icon-btn { width: 38px; height: 38px; border-radius: 0; display: grid; place-items: center; font-size: 19px; transition: background-color .2s; } .icon-btn:hover { background: var(--mist); } .mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; /* Cadence-style: a menu that fits the window shows in full; one that doesn't (main.js adds .is-tall) is capped so header + menu use 90% of the window, and scrolls inside itself */ max-height: calc(100vh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; } .mega.is-tall { max-height: calc(90vh - var(--header-h)); } /* Cadence-style white fade along the bottom of a menu that is too tall for the window and scrolls */ .mega::after { content: ""; display: none; position: sticky; bottom: 0; height: 80px; margin-top: -80px; background: linear-gradient(rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0.5) 50%, #fff 90%); pointer-events: none; } .mega.is-tall::after { display: block; } /* While a menu is open the page below is dimmed and does not scroll. Clicks pass through the dim layer, so clicking the page closes the menu. The scrollbar gutter stays reserved, so the page does not shift sideways when its scrollbar is hidden. */ @media (min-width: 1025px) { html { scrollbar-gutter: stable; } html:has(.nav__item.is-open .mega) { overflow-y: hidden; } .site-header:has(.nav__item.is-open .mega)::after { content: ""; position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: -1; background: rgba(0, 0, 0, 0.45); pointer-events: none; } } .nav__item.is-open .mega { opacity: 1; visibility: visible; transform: none; } .mega__inner { display: grid; grid-template-columns: 260px 1fr 320px; min-height: 340px; } .mega__intro { padding: 40px 32px 40px 0; border-right: 1px solid var(--line); } .mega__intro h3 { font-size: 22px; } .mega__intro p { color: var(--muted); font-size: 14.5px; } .mega__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 24px; padding: 32px; align-content: start; } .mega__link { display: flex; gap: 14px; padding: 14px; border-radius: 10px; transition: background-color .2s; } .mega__link:hover { background: var(--mist); } .mega__link:hover .mega__title { color: var(--violet); } .mega__ic { width: 40px; height: 40px; border-radius: 0; display: grid; place-items: center; background: var(--mist-2); color: var(--indigo); font-size: 20px; flex-shrink: 0; transition: background .2s, color .2s; } .mega__link:hover .mega__ic { background: var(--accent); color: var(--on-accent); } .mega__title { font-weight: 500; font-size: 15px; display: block; transition: color .2s; } .mega__desc { font-size: 13.5px; color: var(--muted); line-height: 1.5; display: block; } .mega__feature { background: var(--mist); color: var(--text); border-left: 1px solid var(--line); padding: 36px 32px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; } .mega__feature::before { content: ""; position: absolute; inset: 0; background: url("../img/circuit.svg") center/420px repeat; opacity: 0.05; } .mega__feature > * { position: relative; } .mega__feature .tag { font-size: 12.5px; font-weight: 500; letter-spacing: .08em; color: var(--accent); text-transform: uppercase; } .mega__feature h4 { font-size: 20px; margin: 10px 0; } .mega__feature p { color: var(--muted); font-size: 14px; } .mega--compact .mega__inner { grid-template-columns: 260px 1fr; } .mega--compact .mega__cols { grid-template-columns: repeat(3, 1fr); } .nav__mobile-cta { display: none; } .burger { display: none; width: 44px; height: 44px; border-radius: 10px; place-items: center; } .burger span { display: block; width: 22px; height: 2px; background: var(--ink); position: relative; transition: background .2s; } .burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--ink); transition: transform .3s var(--ease), top .3s; } .burger span::before { top: -7px; } .burger span::after { top: 7px; } .nav-open .burger span { background: transparent; } .nav-open .burger span::before { top: 0; transform: rotate(45deg); } .nav-open .burger span::after { top: 0; transform: rotate(-45deg); } /* Search overlay */ /* Search: header icon works like a menu item (grey hover, 4px bar when open); the panel drops down under the header (Cadence-style, no page overlay) */ .header-actions { align-self: stretch; } .header-search { position: relative; align-self: stretch; width: 56px; padding: 0 16px; display: grid; place-items: center; font-size: 24px; color: var(--text); transition: background-color .2s; } .header-search:hover { background: var(--mist); } .header-search::after { content: ""; position: absolute; left: 16px; bottom: 19px; width: 0; height: 4px; background: var(--grad); transition: width .2s linear; } .header-search[aria-expanded="true"]::after { width: calc(100% - 32px); } .search-panel { position: absolute; left: 0; right: 0; top: 100%; display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .2s linear, visibility .2s; } .search-panel.is-open { grid-template-rows: 1fr; visibility: visible; } .search-panel__box { overflow: hidden; min-height: 0; background: #fff; box-shadow: 0 6px 8px rgba(34, 34, 34, 0.1); } .search-panel__box > .container { padding-top: 54px; padding-bottom: 54px; } .search-panel__field { position: relative; display: flex; } .search-panel__field > .icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--muted); pointer-events: none; } .search-panel__field input { flex: 1; min-width: 0; height: 47px; padding: 3px 35px 3px 55px; font-family: var(--font-body); font-size: 16px; font-weight: 300; color: var(--text); background: #fff; border: 1px solid var(--line); border-radius: 0; outline: 0; transition: border-color .15s, box-shadow .15s; } .search-panel__field input::placeholder { color: var(--muted); opacity: 1; } .search-panel__field input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 0 5px color-mix(in srgb, var(--accent) 35%, #fff); } .search-panel__field:focus-within > .icon { color: var(--text); } .search-panel__hint { margin-top: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } /* ---------- 7. Sections ---------- */ .section { padding-block: clamp(72px, 9vw, 128px); position: relative; } :root { --pinned: var(--header-h); --sec-pad: clamp(72px, 9vw, 128px); } body:has(.subnav--solo) { --pinned: calc(var(--header-h) + 62px); } body:has(.subnav--family) { --pinned: calc(var(--header-h) + 112px); } [id] { scroll-margin-top: calc(var(--pinned) + 24px); } section[id].section { scroll-margin-top: max(0px, calc(var(--pinned) + 40px - var(--sec-pad))); } .section--tight { padding-block: clamp(56px, 6vw, 88px); } .section--mist { background: var(--mist); } .section--dark { background: var(--navy); color: #fff; overflow: hidden; } .section--dark { background-image: url("../img/bg-parallax.jpg"); background-size: cover; background-position: center; } .section--dark::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, color-mix(in srgb, var(--navy) 96%, transparent) 0%, color-mix(in srgb, var(--navy) 88%, transparent) 60%, color-mix(in srgb, var(--indigo) 55%, transparent) 100%); pointer-events: none; } .section--dark > * { position: relative; } .section-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: clamp(40px, 5vw, 64px); flex-wrap: wrap; } .section-head__text { max-width: 720px; } .section-head__text .lead { margin: 0; } .section-head--center { flex-direction: column; align-items: center; text-align: center; } body[data-page="home"] .section-head { flex-direction: column; align-items: center; text-align: center; } body[data-page="home"] .section-head__text { max-width: 860px; } body[data-page="home"] .section-head .eyebrow { display: block; } .grid { display: grid; gap: 24px; } .grid > *, .split > *, .flow__panel > *, .article > *, .page-hero__grid > * { min-width: 0; } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; } .split--wide { grid-template-columns: 5fr 6fr; } /* ---------- 8. Hero (home carousel) ---------- */ .hero { position: relative; background: var(--navy) url("../img/bg-parallax.jpg") center/cover no-repeat; color: #fff; overflow: hidden; min-height: min(620px, calc(100vh - var(--header-h))); display: flex; flex-direction: column; } .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; mix-blend-mode: screen; } .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--navy) 94%, transparent) 0%, color-mix(in srgb, var(--navy) 72%, transparent) 45%, color-mix(in srgb, var(--accent) 28%, transparent) 100%); pointer-events: none; } .hero__slides { position: relative; z-index: 2; flex: 1; display: grid; } .hero--still { min-height: 560px; } .hero--still .hero__slide { padding-block: 72px; opacity: 1; visibility: visible; } .hero__slide { grid-area: 1 / 1; display: flex; align-items: center; padding-block: 72px 130px; opacity: 0; visibility: hidden; transition: opacity .8s var(--ease), visibility .8s; } .hero__slide.is-active { opacity: 1; visibility: visible; } .hero__content { max-width: 780px; } .hero__slide .eyebrow, .hero__slide .display, .hero__slide .lead, .hero__slide .btn-row { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .hero__slide.is-active .eyebrow { opacity: 1; transform: none; transition-delay: .1s; } .hero__slide.is-active .display { opacity: 1; transform: none; transition-delay: .2s; } .hero__slide.is-active .lead { opacity: 1; transform: none; transition-delay: .32s; } .hero__slide.is-active .btn-row { opacity: 1; transform: none; transition-delay: .44s; } .hero .lead { max-width: 620px; margin-bottom: 36px; } .hero__tabs { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--line-dark); background: rgba(9, 12, 34, 0.5); backdrop-filter: blur(10px); } .hero__tabs .container { display: grid; grid-template-columns: repeat(4, 1fr); } .hero__tab { text-align: left; padding: 22px 20px 24px 0; position: relative; color: rgba(255, 255, 255, 0.55); transition: color .3s; } .hero__tab + .hero__tab { padding-left: 20px; border-left: 1px solid var(--line-dark); } .hero__tab small { display: block; font-family: var(--font-body); font-size: 12px; letter-spacing: .1em; margin-bottom: 4px; } .hero__tab span { font-weight: 600; font-size: 15px; } .hero__tab.is-active, .hero__tab:hover { color: #fff; } .hero__tab i { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: transparent; overflow: hidden; } .hero__tab + .hero__tab i { left: 0; } .hero__tab i::after { content: ""; position: absolute; inset: 0; background: var(--grad); transform: scaleX(0); transform-origin: left; } .hero__tab.is-active i::after { animation: tabProgress var(--hero-interval, 7s) linear forwards; } .hero.is-paused .hero__tab.is-active i::after { animation-play-state: paused; } @keyframes tabProgress { to { transform: scaleX(1); } } .promo-bar { background: var(--mist); border-bottom: 1px solid var(--line); } .promo-bar .container { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-block: 24px; flex-wrap: wrap; } .promo-bar h2 { font-size: 17px; font-weight: 500; margin: 0 0 4px; } .promo-bar p { margin: 0; color: var(--muted); font-size: 15px; } /* ---------- Home hero + promo strip, Cadence layout (measured at 1536px) ---------- 560px banner, text column 740px wide sitting 80px above the bottom edge, light 48.6px heading, 18px light subtitle, artwork centred in the right column. */ .hero--still { height: 560px; min-height: 0; } .hero--still .hero__slide { padding-block: 0; align-items: stretch; } .hero__grid { display: grid; grid-template-columns: minmax(0, 740px) minmax(0, 1fr); gap: 30px; } .hero--still .hero__content { align-self: end; max-width: 740px; padding-bottom: 65px; } .hero--still .display { font-size: clamp(2.1rem, 3.3vw, 48.6px); font-weight: 300; line-height: 1.5; letter-spacing: -0.02em; margin: 0 0 14px; padding-right: 30px; } .hero--still .lead { font-size: 18px; font-weight: 300; line-height: 1.5; letter-spacing: .04em; color: #fff; max-width: none; margin: 0 0 11px; padding-right: 30px; } .hero__art { align-self: center; justify-self: center; width: min(440px, 100%); } .hero__art .chip-svg { width: 100%; height: auto; } /* Cadence button proportions: 14.4px, wide tracking, no arrow */ .hero--still .btn, .promo-bar .btn { height: 45px; min-width: 220px; padding: 2px 30px 0; font-size: 14.4px; font-weight: 500; letter-spacing: .12em; margin-bottom: 15px; } .promo-bar .container { align-items: flex-start; flex-wrap: nowrap; gap: 30px; } .promo-bar .container > div { flex: 0 1 630px; margin-top: 8px; } .promo-bar h2 { font-size: 18px; font-weight: 500; line-height: 1.4; margin: 0 0 16px; } .promo-bar p { font-size: 18px; font-weight: 300; line-height: 1.6; letter-spacing: .04em; color: var(--text); margin-bottom: 16px; } .promo-bar .btn { flex-shrink: 0; margin: 15px 0 0; } /* ---------- Home "Pioneering Engineering Services", Cadence layout (measured at 1536px) ---------- 72px above the heading, light 36px heading, 18px light subtitle, 3 × square tiles with 30px gaps, title only at rest; description + "Learn more" slide up on hover. */ #offerings { padding-block: 72px; } #offerings .section-head { margin-bottom: 43px; } #offerings .section-head__text { max-width: 887px; } #offerings .h2 { font-size: 36px; font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; margin: 8px 0 24px; } #offerings .lead { font-size: 18px; font-weight: 300; line-height: 1.6; letter-spacing: .04em; color: var(--text); } .tiles.tiles--cadence { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 30px; } .tiles--cadence .tile { aspect-ratio: 1; padding: 20px 24px; } /* Cadence-style shade: light fade over the lower part at rest; on hover it rises to mid-tile and deepens */ .tiles--cadence .tile::before { inset: auto 0 0 0; height: 45%; background: linear-gradient(180deg, rgba(9, 12, 34, 0) 0%, rgba(9, 12, 34, 0.35) 55%, rgba(9, 12, 34, 0.7) 100%); transition: height .3s; } .tiles--cadence .tile:hover::before, .tiles--cadence .tile:focus-visible::before { height: 75%; } @media (hover: none) { .tiles--cadence .tile::before { height: 75%; } } .tiles--cadence .tile:hover .tile__bg { transform: none; } .tiles--cadence .tile h3 { font-size: 28.8px; font-weight: 500; line-height: 1.4; letter-spacing: -0.02em; margin: 0; } .tile__more { position: relative; z-index: 1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s; } .tile__more > div { overflow: hidden; min-height: 0; } .tiles--cadence .tile p { font-size: 16.2px; font-weight: 300; line-height: 1.6; letter-spacing: .04em; color: #fff; margin: 8px 0 16px; max-height: none; opacity: 1; } .tile__link { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; color: #fff; } .tile__link .icon { font-size: 22px; } .tiles--cadence .tile:hover .tile__more, .tiles--cadence .tile:focus-visible .tile__more { grid-template-rows: 1fr; } @media (hover: none) { .tiles--cadence .tile__more { grid-template-rows: 1fr; } } @media (max-width: 1024px) { .tiles.tiles--cadence { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; } #offerings .h2 { font-size: 30px; } #offerings .h2 br { display: none; } } @media (max-width: 640px) { .tiles.tiles--cadence { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 20px; } .tiles--cadence .tile h3 { font-size: 24px; } } /* ---------- Home "What We Can Do for You", Cadence layout (measured at 1536px) ---------- white band, 54px padding, cube/hexagon motif 815px tall centred at the top, 910px tab box with a 1px brand-gradient border, 40px / 27px tabs, 4 icon links per row. */ #capabilities { padding-block: 54px; background: #fff; overflow: hidden; } #capabilities > .container { position: relative; z-index: 1; } .cubes-motif { position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 815px; width: auto; aspect-ratio: 1775 / 911; max-width: none; pointer-events: none; } .cubes-motif__slabs { stroke: var(--line); stroke-opacity: .55; } #capabilities .section-head { margin-bottom: 40px; } #capabilities .h2 { font-size: 36px; font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; margin: 8px 0 24px; } #capabilities .lead { font-size: 18px; font-weight: 300; line-height: 1.6; letter-spacing: .04em; color: var(--text); max-width: 600px; margin-inline: auto; } #capabilities .cap-box { max-width: 910px; margin: 0 auto 50px; padding: 0 40px; background: #fff; border: 1px solid; border-image: var(--grad) 1; } #capabilities .cap-box__tabs { height: 154px; padding: 50px 120px 0; margin: 0; gap: 0; justify-content: space-around; align-items: flex-start; } #capabilities .cap-box__tab { margin: 0 15px 15px; padding: 15px 0; border-top: 2px solid transparent; font-family: var(--font-head); font-size: 27px; font-weight: 300; line-height: 1.43; letter-spacing: .02em; color: var(--ink); transition: .2s linear; } #capabilities .cap-box__tab:hover, #capabilities .cap-box__tab.is-active { border-color: var(--accent); } #capabilities .cap-box__tab.is-active { font-size: 40px; font-weight: 500; } #capabilities .cap-box__panel { padding-bottom: 20px; } #capabilities .cap-box__intro { font-size: 18px; font-weight: 300; line-height: 1.6; letter-spacing: .04em; color: var(--text); margin: 0 0 16px; } #capabilities .icon-grid { row-gap: 0; } /* Cadence item: 40px above, 52px icon slot, one 27px label line, 20px below = 139px rows; labels get the full column width so they stay on one line */ #capabilities .icon-grid { align-items: center; } #capabilities .icon-grid > a { flex: 0 0 25%; padding: 40px 0 20px; display: block; font-size: 18px; font-weight: 300; line-height: 1.5; white-space: nowrap; } #capabilities .icon-grid a .icon { display: block; margin: 0 auto 4px; font-size: 48px; stroke-width: .75; } #capabilities .icon-grid a:hover .icon { color: var(--ink); } /* icon stays put on hover; only the label changes */ #capabilities .icon-grid a:hover { color: color-mix(in srgb, var(--accent) 45%, var(--navy)); } /* dark navy-blue, like Cadence's link hover */ @media (max-width: 991px) { .cubes-motif { display: none; } } /* ---------- Home "What's New", Cadence layout (measured at 1536px) ---------- light band, 96px padding, 3 × 410px bordered cards: 240px image, 32/32/40 text padding, label → title → description → link. Hover: 8px accent bar drops in on top, title + link turn blue, "Learn more" text slides out beside the arrow. Buttons: outline with a 5px offset outline box. */ #whats-new { background: var(--mist); padding-block: 96px; } #whats-new .section-head { margin-bottom: 24px; } #whats-new .h2 { font-size: 36px; font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; margin: 0; } #whats-new .grid--3 { gap: 30px; } #whats-new .post-card { position: relative; border: 1px solid var(--line); background: #fff; transition: none; } #whats-new .post-card:hover { box-shadow: none; border-color: var(--line); } #whats-new .post-card::before { content: ""; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 8px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .3s ease-in-out; } #whats-new .post-card:hover::before, #whats-new .post-card:focus-visible::before { transform: scaleY(1); } #whats-new .post-card__media { aspect-ratio: auto; height: 240px; } #whats-new .post-card:hover .tile__bg { transform: none; } #whats-new .post-card__body { padding: 32px 32px 40px; } #whats-new .post-card__label { font-size: 12px; font-weight: 400; line-height: 24px; letter-spacing: .24em; color: var(--muted); margin: 0 0 16px; } #whats-new .post-card__body h3 { font-size: 18px; font-weight: 500; line-height: 1.4; margin: 16px 0; color: var(--ink); transition: color .2s; } #whats-new .post-card:hover h3 { color: var(--accent); } #whats-new .post-card__body p { flex: 0 0 auto; font-size: 16.2px; font-weight: 300; line-height: 1.6; letter-spacing: .04em; color: var(--text); margin: 0; } #whats-new .post-card__more { margin-top: auto; padding-top: 24px; display: inline-flex; align-items: center; font-size: 14.4px; font-weight: 500; line-height: 26px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); transition: color .2s; } #whats-new .post-card__more > span { white-space: nowrap; margin-right: 6px; } #whats-new .post-card__more .icon { font-size: 20px; stroke-width: 2.5; transition: transform .2s; } #whats-new .post-card:hover .post-card__more { color: var(--accent); } #whats-new .post-card:hover .post-card__more .icon { transform: translateX(8px); } #whats-new .btn-row--center { margin-top: 62px; gap: 30px; } #whats-new .btn--stack { height: 49px; padding: 0 32px; font-size: 14.4px; font-weight: 500; letter-spacing: .12em; color: var(--ink); background: #fff; border: 1px solid var(--ink); box-shadow: 5px 5px 0 -1px #fff, 5px 5px 0 0 var(--ink); transition: background-color .3s, color .3s, box-shadow .3s; } /* hover: button stays white, only the offset box behind it fills dark (as on Cadence) */ #whats-new .btn--stack:hover { background: #fff; color: var(--ink); box-shadow: 5px 5px 0 0 var(--ink); } @media (max-width: 640px) { #whats-new { padding-block: 64px; } #whats-new .h2 { font-size: 30px; } } #expertise { background: var(--mist); } /* same light band as What's New */ /* "Explore more" (expertise strip): same hover as What's New — stays white, offset box fills dark */ #expertise .btn--stack { transition: box-shadow .3s; } #expertise .btn--stack:hover { background: #fff; color: var(--ink); box-shadow: 4px 4px 0 0 var(--ink); } /* ---------- Home "Culture and People" + "Get the Help You Need", Cadence layout (measured at 1536px) ---------- white band, 81px padding, cube/hexagon drawing at full size centred behind; two centred 630px columns split by a 1px accent rule; 36px light headings, 445px paragraphs, 200 × 42 outline buttons. */ #culture { padding-block: 81px; background: #fff; overflow: hidden; } #culture > .container { position: relative; z-index: 1; } .cubes-motif--center { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1775px; height: 911px; } #culture .split-simple { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-inline: -15px; } /* spans 1320px like Cadence's row */ #culture .split-simple > div { padding: 0 15px; text-align: center; display: flex; flex-direction: column; align-items: center; } #culture .split-simple > div > .btn { margin-top: auto; } /* buttons share one baseline whatever the paragraph length */ #culture .split-simple > div:first-child { border-right: 1px solid var(--accent); } #culture .h2 { font-size: 36px; font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; margin: 8px 0 27px; } #culture .lead { max-width: 445px; margin: 0 auto 27px; font-size: 18px; font-weight: 300; line-height: 1.6; letter-spacing: .04em; color: var(--text); } /* blue outline at rest; brand blue → purple gradient fill on hover */ #culture .btn--ghost { min-width: 200px; height: 42px; padding: 3px 10px 0; margin: 0 auto 27px; font-size: 14px; font-weight: 400; letter-spacing: normal; color: var(--accent); background: transparent; border: 1px solid var(--accent); transition: color .2s linear, border-color .2s linear; position: relative; isolation: isolate; } #culture .btn--ghost::before { content: ""; position: absolute; inset: -1px; z-index: -1; background: var(--grad); opacity: 0; transition: opacity .2s linear; } #culture .btn--ghost:hover { color: var(--on-accent); border-color: transparent; background: transparent; } #culture .btn--ghost:hover::before { opacity: 1; } @media (max-width: 991px) { #culture .split-simple { grid-template-columns: 1fr; } #culture .split-simple > div:first-child { border-right: 0; } #culture .split-simple > div + div { margin-top: 33px; } #culture .split-simple > div + div::before { content: ""; display: block; width: min(400px, 100%); height: 1px; margin: 0 auto 45px; background: var(--accent); } } @media (max-width: 640px) { #culture { padding-block: 54px; } #culture .h2 { font-size: 30px; } } /* ---------- Home "Engineering-Led Innovation", Cadence layout (measured at 1536px) ---------- 644px band on the circuit-photo background, heading 48px from the top, items start 107px below "Read more"; 1247px grid: 3 items | 380px artwork | 3 items; items 94px min, 1px white rule, 60% opacity; active item: 4px rule, full opacity, medium weight, underlined "Read more". */ #lifecycle { padding: 48px 0 0; } /* keeps the circuit-photo background + dark overlay from .section--dark */ #lifecycle .section-head { margin-bottom: 105px; } #lifecycle .section-head__text { max-width: none; } #lifecycle .h2 { font-size: 36px; font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 24px; } #lifecycle .lead { font-size: 18px; font-weight: 300; line-height: 1.6; letter-spacing: .04em; color: #fff; margin: 0 0 16px; } #lifecycle .section-head .link-arrow { font-size: 18px; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 22px; gap: 6px; color: #fff; } #lifecycle .section-head .link-arrow .icon { transition: transform .5s ease-in-out; } #lifecycle .section-head .link-arrow:hover .icon { transform: translateX(8px); } #lifecycle .innov { max-width: 1247px; margin: 0 auto; padding-inline: 15px; grid-template-columns: 1fr 2fr 1fr; gap: 0; align-items: start; min-height: 350px; } #lifecycle .innov__col { padding-inline: 15px; } #lifecycle .innov__col li { min-height: 94px; padding: 8px 0 0; border-top: 1px solid #fff; border-bottom: 0; opacity: .6; transition: opacity .7s, border-width .7s; } #lifecycle .innov__col li::before { content: none; } #lifecycle .innov__col li span { font-family: var(--font-head); font-size: 18px; font-weight: 400; line-height: 25.2px; letter-spacing: -0.02em; color: #fff; margin: 0; } #lifecycle .innov__col li .link-arrow { display: none; margin: 16px 0; font-size: 14px; font-weight: 400; line-height: 18.72px; letter-spacing: .034em; text-transform: none; text-decoration: underline; color: #fff; opacity: 1; transform: none; } #lifecycle .innov__col li .link-arrow .icon { display: none; } #lifecycle .innov__col li.is-active { opacity: 1; border-top-width: 4px; } #lifecycle .innov__col li.is-active span { font-weight: 500; } #lifecycle .innov__col li.is-active .link-arrow { display: block; } #lifecycle .innov__art { position: relative; align-self: stretch; max-width: none; min-height: 350px; } #lifecycle .innov__art .chip-svg { position: absolute; left: 50%; bottom: 50px; transform: translateX(-50%); width: 380px; height: 380px; } @media (max-width: 1024px) { #lifecycle { padding-bottom: 56px; } #lifecycle .section-head { margin-bottom: 40px; } #lifecycle .innov { grid-template-columns: 1fr 1fr; min-height: 0; row-gap: 0; } #lifecycle .innov__art { display: none; } #lifecycle .innov__col li .link-arrow { display: block; } } @media (max-width: 640px) { #lifecycle .h2 { font-size: 30px; } #lifecycle .innov { grid-template-columns: 1fr; } #lifecycle .innov__col li { min-height: 0; padding-bottom: 8px; opacity: 1; } } @media (max-width: 1024px) { #capabilities .cap-box__tabs { height: auto; padding: 36px 20px 0; } #capabilities .cap-box__tab { font-size: 22px; } #capabilities .cap-box__tab.is-active { font-size: 28px; } #capabilities .icon-grid > a { flex-basis: 33.333%; padding-inline: 8px; white-space: normal; } } @media (max-width: 640px) { #capabilities .h2 { font-size: 30px; } #capabilities .cap-box { padding: 0 16px; } #capabilities .icon-grid > a { flex-basis: 50%; padding: 28px 8px 12px; font-size: 16px; } } @media (max-width: 1024px) { .hero--still { height: auto; } .hero__grid { grid-template-columns: 1fr; } .hero__art { display: none; } .hero--still .hero__content { padding-block: 64px 49px; } .promo-bar .container { flex-wrap: wrap; } .promo-bar .btn { margin-top: 0; } } /* ---------- 9. Inner page hero ---------- */ .page-hero { position: relative; background: var(--navy) url("../img/bg-parallax.jpg") center 30%/cover no-repeat; color: #fff; overflow: hidden; padding-block: clamp(72px, 9vw, 120px); } .page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--navy) 95%, transparent) 0%, color-mix(in srgb, var(--navy) 78%, transparent) 50%, color-mix(in srgb, var(--indigo) 38%, transparent) 100%); } .page-hero > * { position: relative; z-index: 1; } .page-hero__art { position: absolute; z-index: 0; right: 0; top: 0; bottom: 0; width: 56%; background-position: center right; background-size: cover; background-repeat: no-repeat; opacity: .95; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%); } @media (max-width: 1024px) { .page-hero__art { width: 100%; opacity: .35; } } .page-hero::before { content: none; } .page-hero .container { position: relative; } .page-hero__grid { display: block; } .page-hero .h1 { max-width: 820px; } .page-hero .lead { max-width: 640px; margin-bottom: 32px; } .breadcrumb { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, 0.6); margin-bottom: 26px; } .breadcrumb a:hover { color: #fff; } .breadcrumb li + li::before { content: "/"; margin-right: 8px; opacity: .5; } .page-hero__visual { display: none; } /* Sticky in-page subnav */ .subnav { position: sticky; top: var(--header-top); z-index: 60; background: var(--mist); border-bottom: 1px solid var(--line); } .subnav .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 54px; } .subnav__links { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; } .subnav__links::-webkit-scrollbar { display: none; } .subnav__links a { padding: 17px 0; margin-right: 28px; font-size: 14px; font-weight: 400; color: var(--text); white-space: nowrap; border-bottom: 3px solid transparent; transition: color .2s, border-color .2s; } .subnav__links a:hover { color: var(--accent); } .subnav__links a.is-active { color: var(--text); border-color: var(--accent); } /* ---------- 10. Cards ---------- */ .card { background: #fff; border: 1px solid var(--line); border-radius: 0; padding: 30px 28px 28px; display: flex; flex-direction: column; transition: box-shadow .3s var(--ease), border-color .3s; position: relative; } .card:hover { box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 50%, transparent); } .card__ic { width: 40px; height: 40px; border-radius: 0; display: grid; place-items: center; font-size: 22px; background: transparent; color: var(--accent); margin: 0 0 14px -6px; transition: color .3s; } .card:hover .card__ic { color: var(--text); } .card h3 { font-size: 18px; font-weight: 600; margin-bottom: 12px; } .card p { color: var(--muted); font-size: 15px; flex: 1; } .card .link-arrow { margin-top: 20px; } .service-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; } .service-card__top { position: relative; height: 180px; background: var(--navy) url("../img/bg-parallax.jpg") center/cover no-repeat; overflow: hidden; } .service-card:nth-child(2) .service-card__top { background-position: 75% 25%; } .service-card:nth-child(3) .service-card__top { background-position: 30% 80%; } .service-card:nth-child(4) .service-card__top { background-position: 90% 70%; } .service-card__top::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 70%, transparent), color-mix(in srgb, var(--navy) 93%, transparent)); mix-blend-mode: multiply; } .service-card:nth-child(2) .service-card__top::after { background: linear-gradient(160deg, color-mix(in srgb, var(--indigo) 70%, transparent), color-mix(in srgb, var(--navy) 93%, transparent)); } .service-card:nth-child(3) .service-card__top::after { background: linear-gradient(160deg, color-mix(in srgb, var(--accent-2) 66%, transparent), color-mix(in srgb, var(--navy) 94%, transparent)); } .service-card:nth-child(4) .service-card__top::after { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 72%, transparent), color-mix(in srgb, var(--navy) 94%, transparent)); } .service-card__top::before { content: ""; position: absolute; inset: 0; z-index: 2; background: url("../img/circuit.svg") center/360px repeat; opacity: .14; transition: transform 1.2s var(--ease); } .service-card:hover .service-card__top::before { transform: scale(1.12); } .service-card__num { position: absolute; z-index: 3; top: 20px; left: 24px; font-size: 12.5px; letter-spacing: .1em; color: rgba(255,255,255,.85); } .service-card__glyph { position: absolute; z-index: 3; right: 22px; bottom: -14px; font-size: 118px; color: rgba(255, 255, 255, 0.1); } .service-card__ic { position: absolute; z-index: 3; left: 24px; bottom: 22px; width: 52px; height: 52px; border-radius: 0; display: grid; place-items: center; font-size: 26px; background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); } .service-card__body { padding: 28px 26px 30px; display: flex; flex-direction: column; flex: 1; } .service-card__body p { flex: 1; } .service-card .chips { margin-bottom: 20px; } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { font-family: var(--font-body); font-size: 12.5px; padding: 5px 12px; border-radius: 0; background: var(--mist); color: var(--text); border: 1px solid var(--line); } .section--dark .chip { background: rgba(255, 255, 255, 0.06); border-color: var(--line-dark); color: rgba(255, 255, 255, 0.85); } .card--dark { background: rgba(255, 255, 255, 0.04); border-color: var(--line-dark); } .card--dark .card__ic { background: rgba(255, 255, 255, 0.08); color: #fff; } .card--dark h3 { color: #fff; } .card--dark p { color: var(--muted-light); } .card--dark:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.35); } .split--contact { grid-template-columns: 1.4fr 1fr; align-items: start; } /* ---------- 11. Lifecycle tabs ---------- */ .flow { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; border-bottom: 1px solid var(--line-dark); margin-bottom: 56px; } .flow__tab { text-align: left; padding: 0 20px 26px 0; color: rgba(255, 255, 255, 0.5); position: relative; transition: color .3s; } .flow__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); } .flow__tab.is-active { color: #fff; } .flow__tab.is-active::after { transform: scaleX(1); } .flow__tab:hover { color: #fff; } .flow__step { display: flex; align-items: center; gap: 12px; font-family: var(--font-body); font-size: 12.5px; letter-spacing: .1em; margin-bottom: 10px; } .flow__dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; } .flow__tab.is-active .flow__dot { background: var(--violet-soft); border-color: var(--violet-soft); } .flow__name { font-family: var(--font-head); font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 500; } .flow__panel { display: none; } .flow__panel.is-active { display: grid; animation: fadeUp .6s var(--ease); } .flow__panel { grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center; } .flow__panel h3 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); } .check-list { display: grid; gap: 12px; margin: 24px 0 32px; } .check-list li { display: flex; gap: 12px; align-items: flex-start; } .check-list .icon { color: var(--violet-soft); font-size: 20px; margin-top: 3px; } .check-list--2 { grid-template-columns: 1fr 1fr; } .section:not(.section--dark) .check-list .icon { color: var(--violet); } .flow__visual { border-radius: var(--radius); border: 1px solid var(--line-dark); background: rgba(255, 255, 255, 0.03); padding: 28px; } @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* Code-ish terminal visual */ .term { font-family: var(--font-mono); font-size: 13px; line-height: 1.8; color: rgba(255, 255, 255, 0.8); } .term__code { margin: 0; font: inherit; white-space: pre; overflow-x: auto; } .term__bar { display: flex; gap: 6px; margin-bottom: 18px; align-items: center; } .term__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); } .term__bar span { margin-left: 10px; font-size: 11.5px; color: rgba(255, 255, 255, 0.45); } .term .k { color: var(--accent-2-soft); } .term .s { color: var(--accent-soft); } .term .c { color: rgba(255, 255, 255, 0.4); } .term .ok { color: #6ee7b7; } .meter { margin-top: 18px; display: grid; gap: 12px; } .meter__row { display: grid; grid-template-columns: 130px 1fr 48px; gap: 12px; align-items: center; font-size: 12px; } .meter__bar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .meter__bar b { display: block; height: 100%; background: var(--grad); border-radius: 99px; width: 0; transition: width 1.4s var(--ease); } .flow__panel.is-active .meter__bar b, .is-visible .meter__bar b { width: var(--w); } /* ---------- 12. Stats ---------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); } .stat { padding: 36px 28px 8px 0; } .stat + .stat { padding-left: 28px; border-left: 1px solid var(--line); } .stat__num { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.4rem, 4vw, 3.4rem); letter-spacing: -0.02em; line-height: 1; } .stat__num span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .section--dark .stat__num span { background: linear-gradient(90deg, var(--accent-soft), var(--accent-2-soft)); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat__label { margin-top: 12px; color: var(--muted); font-size: 15px; max-width: 220px; } .section--dark .stats, .section--dark .stat + .stat { border-color: var(--line-dark); } .section--dark .stat__label { color: var(--muted-light); } /* ---------- 13. Industry tiles ---------- */ .tiles { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 300px; gap: 24px; } .tiles--square { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 360px; } .tiles--square .tile { grid-column: auto; } .tile { position: relative; border-radius: var(--radius); overflow: hidden; color: #fff; padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; grid-column: span 2; } .tile--wide { grid-column: span 3; } .tile__bg { position: absolute; inset: 0; z-index: -2; transition: transform 1s var(--ease); } .tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9, 12, 34, 0) 20%, rgba(9, 12, 34, 0.85) 100%); } .tile:hover .tile__bg { transform: scale(1.08); } .tile__glyph { position: absolute; z-index: 1; top: 22px; right: 22px; font-size: 56px; color: rgba(255, 255, 255, 0.85); stroke-width: 1.2; transition: transform .6s var(--ease); } .tile:hover .tile__glyph { transform: translateY(-6px) rotate(-6deg); } .tile h3, .tile p, .tile .link-arrow { position: relative; z-index: 1; } .tile h3 { font-size: 20px; font-weight: 600; margin-bottom: 4px; } .tile p { font-size: 14.5px; color: rgba(255, 255, 255, 0.82); margin: 0; } .tile .link-arrow { color: #fff; margin-top: 12px; font-size: 14px; } [class*="bg-"] { background-image: url("../img/bg-parallax.jpg"); background-size: cover; background-repeat: no-repeat; } [class*="bg-"]::before { content: ""; position: absolute; inset: 0; mix-blend-mode: multiply; } .bg-1 { background-position: 20% 30%; } .bg-1::before { background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 78%, transparent), color-mix(in srgb, var(--navy) 92%, transparent)); } .bg-2 { background-position: 70% 20%; } .bg-2::before { background: linear-gradient(150deg, color-mix(in srgb, var(--indigo) 78%, transparent), color-mix(in srgb, var(--navy) 92%, transparent)); } .bg-3 { background-position: 40% 75%; } .bg-3::before { background: linear-gradient(150deg, color-mix(in srgb, var(--accent-2) 72%, transparent), color-mix(in srgb, var(--navy) 94%, transparent)); } .bg-4 { background-position: 85% 60%; } .bg-4::before { background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 80%, transparent), color-mix(in srgb, var(--navy) 94%, transparent)); } .bg-5 { background-position: 10% 80%; } .bg-5::before { background: linear-gradient(150deg, color-mix(in srgb, var(--indigo) 76%, transparent), color-mix(in srgb, var(--navy) 92%, transparent)); } .bg-6 { background-position: 60% 45%; } .bg-6::before { background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 74%, transparent), color-mix(in srgb, var(--indigo) 90%, transparent)); } .tile__bg::after { content: ""; position: absolute; inset: 0; background: url("../img/circuit.svg") center/320px repeat; opacity: .16; } /* ---------- 14. Marquee ---------- */ .marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .marquee__track { display: flex; gap: 14px; width: max-content; animation: marquee 38s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__item { display: flex; align-items: center; gap: 10px; padding: 12px 22px; border: 1px solid var(--line); border-radius: 0; background: #fff; font-family: var(--font-mono); font-size: 14px; font-weight: 500; white-space: nowrap; } .marquee__item .icon { color: var(--accent); } @keyframes marquee { to { transform: translateX(-50%); } } /* ---------- 15. Feature split visual ---------- */ .visual-card { position: relative; border-radius: var(--radius); background: linear-gradient(150deg, var(--accent) 0%, var(--navy-lift) 100%); aspect-ratio: 5 / 4; overflow: hidden; box-shadow: var(--shadow-lg); } .visual-card::before { content: ""; position: absolute; inset: 0; background: url("../img/circuit.svg") center/400px repeat; opacity: .16; } .visual-card__chip { position: absolute; inset: 14%; } .float-badge { position: absolute; background: #fff; border-radius: 12px; padding: 14px 18px; box-shadow: var(--shadow-lg); display: flex; gap: 12px; align-items: center; font-size: 14px; animation: bob 5s ease-in-out infinite; } .float-badge b { display: block; font-family: var(--font-head); font-size: 18px; } .float-badge small { color: var(--muted); } .float-badge__ic { width: 40px; height: 40px; border-radius: 0; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: 20px; } @keyframes bob { 50% { transform: translateY(-10px); } } .value-list { display: grid; gap: 4px; margin-top: 32px; } .value-item { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 20px 0; border-top: 1px solid var(--line); } .value-item__ic { width: 48px; height: 48px; border-radius: 0; background: var(--mist); color: var(--accent); display: grid; place-items: center; font-size: 22px; } .value-item h4 { font-size: 17px; margin-bottom: 4px; } .value-item p { margin: 0; color: var(--muted); font-size: 15px; } /* ---------- 16. Insights ---------- */ .post-card { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s; height: 100%; } .post-card:hover { box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 50%, transparent); } .post-card__media { aspect-ratio: 16 / 9; position: relative; overflow: hidden; } .post-card__media .tile__bg { position: absolute; inset: 0; } .post-card:hover .tile__bg { transform: scale(1.06); } .post-card__media .icon { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 64px; color: rgba(255, 255, 255, 0.9); stroke-width: 1.2; } .post-card__type { position: absolute; z-index: 2; top: 0; left: 0; background: var(--grad); color: var(--on-accent); font-size: 12px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; padding: 7px 14px; border-radius: 0; } .post-card__body { padding: 26px; display: flex; flex-direction: column; flex: 1; } .post-card__meta { font-size: 13px; color: var(--muted); display: flex; gap: 14px; margin-bottom: 10px; } .post-card h3 { font-size: 19px; line-height: 1.35; flex: 1; transition: color .2s; } .post-card:hover h3 { color: var(--accent); } .post-card--feature { display: grid; grid-template-columns: 1.2fr 1fr; } .post-card--feature .post-card__media { aspect-ratio: auto; min-height: 360px; } .post-card--feature h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); flex: 0; } .post-card--feature .post-card__body { padding: clamp(28px, 4vw, 48px); justify-content: center; } .filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; } .filter { height: 38px; padding: 0 18px; border-radius: 0; border: 1px solid var(--line); text-transform: uppercase; letter-spacing: .06em; font-size: 14px; font-weight: 600; color: var(--muted); background: #fff; transition: all .2s; } .filter:hover { border-color: var(--accent); color: var(--accent); } .filter.is-active { background: var(--ink); border-color: var(--ink); color: #fff; } /* ---------- 17. CTA band ---------- */ .cta-band { position: relative; border-radius: var(--radius); background: var(--navy) url("../img/bg-parallax.jpg") center 65%/cover no-repeat; color: #fff; padding: clamp(40px, 6vw, 80px); overflow: hidden; display: grid; grid-template-columns: 1.4fr auto; gap: 40px; align-items: center; } .cta-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--navy) 95%, transparent) 0%, color-mix(in srgb, var(--navy) 80%, transparent) 55%, color-mix(in srgb, var(--accent-2) 45%, transparent) 100%); } .cta-band > * { position: relative; z-index: 1; } .cta-band .h2 { margin-bottom: 12px; } .cta-band p { color: var(--muted-light); margin: 0; font-size: 18px; max-width: 620px; } /* ---------- 18. People ---------- */ .person { text-align: left; } .person__photo { aspect-ratio: 4 / 5; border-radius: var(--radius); background: var(--mist-2); overflow: hidden; position: relative; margin-bottom: 20px; } .person__photo .tile__bg { position: absolute; inset: 0; } .person__photo img { width: 100%; height: 100%; object-fit: cover; position: relative; } .person__initials { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; font-family: var(--font-head); font-size: 76px; font-weight: 800; color: rgba(255, 255, 255, 0.92); letter-spacing: -0.04em; } .person__social { position: absolute; z-index: 2; right: 16px; bottom: 16px; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; font-size: 18px; transform: translateY(12px); opacity: 0; transition: all .3s var(--ease); } .person:hover .person__social, .person__social:focus-visible { transform: none; opacity: 1; } .person h3 { font-size: 20px; margin-bottom: 2px; } .person p { color: var(--muted); margin: 0; font-size: 15px; } /* ---------- 19. Steps / process ---------- */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: step; } .step { padding: 0 28px 0 0; position: relative; } .step__num { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; } .step__num b { width: 46px; height: 46px; border-radius: 0; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--accent); position: relative; z-index: 1; } .step__num::after { content: ""; flex: 1; height: 1.5px; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px); } .step:last-child .step__num::after { display: none; } .step h4 { font-size: 18px; } .step p { color: var(--muted); font-size: 15px; } /* Numbered capability list */ .num-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .num-list li { padding: 32px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .3s; } .num-list li:hover { background: var(--mist); } .num-list b { display: block; font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: .06em; color: var(--accent); margin-bottom: 14px; } .num-list h4 { font-size: 18px; margin-bottom: 6px; } .num-list p { color: var(--muted); font-size: 15px; margin: 0; } /* ---------- 20. Accordion ---------- */ .accordion { border-top: 1px solid var(--line); } .acc { border-bottom: 1px solid var(--line); } .acc__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 0; text-align: left; font-family: var(--font-head); font-weight: 500; font-size: 19px; } .acc__head:hover { color: var(--accent); } .acc__plus { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); position: relative; flex-shrink: 0; transition: all .3s; } .acc__plus::before, .acc__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.75px; background: currentColor; transform: translate(-50%, -50%); transition: transform .3s; } .acc__plus::after { transform: translate(-50%, -50%) rotate(90deg); } .acc.is-open .acc__plus { background: var(--ink); color: #fff; border-color: var(--ink); } .acc.is-open .acc__plus::after { transform: translate(-50%, -50%) rotate(0); } .acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); } .acc.is-open .acc__body { grid-template-rows: 1fr; } .acc__body > div { overflow: hidden; } .acc__body p { color: var(--muted); padding-bottom: 26px; margin: 0; max-width: 820px; } /* ---------- 21. Jobs ---------- */ .job { display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: 24px; align-items: center; padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: border-color .3s, box-shadow .3s; } .job + .job { margin-top: 14px; } .job:hover { border-color: var(--accent); box-shadow: var(--shadow); } .job h3 { font-size: 18px; margin: 0 0 4px; } .job__team { font-size: 12.5px; color: var(--accent); font-weight: 500; letter-spacing: .08em; } .job__meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14.5px; } /* ---------- 22. Forms ---------- */ .form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .field { display: flex; flex-direction: column; gap: 8px; } .field--full { grid-column: 1 / -1; } .field label { font-size: 14px; font-weight: 600; } .field label span { color: var(--violet); } .field input, .field select, .field textarea { height: 50px; border: 1px solid var(--line); border-radius: 0; padding: 0 16px; background: #fff; transition: border-color .2s, box-shadow .2s; width: 100%; } .field textarea { height: 140px; padding: 14px 16px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .field .err { font-size: 13px; color: #dc2626; display: none; } .field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #dc2626; } .field.is-invalid .err { display: block; } .consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--muted); } .consent input { margin-top: 4px; accent-color: var(--violet); width: 18px; height: 18px; } .form-success { display: none; padding: 20px 22px; border-radius: 10px; background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; grid-column: 1 / -1; } .form-success.is-visible { display: block; } .form-card { background: #fff; border-radius: var(--radius); padding: clamp(28px, 4vw, 48px); box-shadow: var(--shadow-lg); border: 1px solid var(--line); } .contact-item { display: flex; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line-dark); } .contact-item__ic { width: 46px; height: 46px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); display: grid; place-items: center; font-size: 20px; color: var(--violet-soft); flex-shrink: 0; } .contact-item small { display: block; color: rgba(255, 255, 255, 0.55); font-size: 13px; } .contact-item a, .contact-item span { color: #fff; font-weight: 500; } /* ---------- 23. Article ---------- */ .article { display: grid; grid-template-columns: 240px minmax(0, 720px) 1fr; gap: 56px; } .toc { position: sticky; top: calc(var(--header-top) + 32px); align-self: start; } .toc h4 { font-family: var(--font-body); font-size: 12.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .toc a { display: block; padding: 8px 0 8px 14px; border-left: 2px solid var(--line); font-size: 14.5px; color: var(--muted); } .toc a:hover, .toc a.is-active { color: var(--accent); border-color: var(--accent); } .prose { font-size: 17.5px; line-height: 1.8; } .prose h2 { font-size: 28px; margin: 48px 0 16px; scroll-margin-top: calc(var(--header-top) + 24px); } .prose h3 { font-size: 21px; margin: 32px 0 12px; } .prose ul { list-style: disc; padding-left: 22px; margin-bottom: 1.2em; } .prose li { margin-bottom: 6px; } .prose blockquote { margin: 36px 0; padding: 8px 0 8px 28px; border-left: 3px solid var(--accent); font-family: var(--font-head); font-size: 21px; font-weight: 500; line-height: 1.5; } .prose pre { background: var(--ink); color: #e5e7eb; border-radius: 12px; padding: 22px; overflow-x: auto; font-family: var(--font-mono); font-size: 14px; line-height: 1.7; } .author { display: flex; align-items: center; gap: 14px; } .author__av { width: 48px; height: 48px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 700; } .share { display: flex; flex-direction: column; gap: 10px; position: sticky; top: calc(var(--header-top) + 32px); align-self: start; } .share a { width: 44px; height: 44px; border-radius: 0; border: 1px solid var(--line); display: grid; place-items: center; font-size: 18px; transition: all .2s; } .share a:hover { background: var(--ink); color: #fff; border-color: var(--ink); } /* ---------- Photography (from pulsewavesemi.com) ---------- */ [class*="ph-"] { background-color: var(--navy); background-repeat: no-repeat; background-position: center; background-size: cover; } .ph-rtl { background-image: url("../img/photos/rtl.jpg"); } .ph-dv { background-image: url("../img/photos/dv.jpg"); } .ph-fpga { background-image: url("../img/photos/fpga.jpg"); } .ph-psv { background-image: url("../img/photos/psv.jpg"); } .ph-ip { background-image: url("../img/photos/ip.jpg"); } .ph-soc { background-image: url("../img/photos/soc.jpg"); } .ph-ai { background-image: url("../img/photos/ai.jpg"); } .ph-board { background-image: url("../img/photos/board.jpg"); } .ph-lab { background-image: url("../img/photos/lab.jpg"); } .ph-team { background-image: url("../img/photos/team.jpg"); } .ph-quality { background-image: url("../img/photos/quality.jpg"); } /* industries: Unsplash Licence photos (credits in README) */ .ph-ind-ai { background-image: url("../img/photos/ind-ai.jpg"); } .ph-ind-auto { background-image: url("../img/photos/ind-auto.jpg"); } .ph-ind-net { background-image: url("../img/photos/ind-net.jpg"); } .ph-ind-consumer { background-image: url("../img/photos/ind-consumer.jpg"); } .ph-ind-telecom { background-image: url("../img/photos/ind-telecom.jpg"); } .ph-ind-aerospace { background-image: url("../img/photos/ind-aerospace.jpg"); } /* photos need no circuit texture; tiles keep their dark gradient for legible text */ .tile__bg[class*="ph-"]::after { content: none; } .page-hero__art[class*="ph-"] { opacity: .9; background-position: center; } .ph-team.page-hero__art, .ph-lab.page-hero__art { background-position: 60% 35%; } /* ---------- Vector artwork (services + industries) ---------- */ [class*="art-"] { background-repeat: no-repeat; background-position: center; background-size: cover; } .art-rtl { background-image: var(--art-rtl, url("../img/art/service-rtl.svg")); } .art-dv { background-image: var(--art-dv, url("../img/art/service-dv.svg")); } .art-fpga { background-image: var(--art-fpga, url("../img/art/service-fpga.svg")); } .art-psv { background-image: var(--art-psv, url("../img/art/service-psv.svg")); } .art-ip { background-image: var(--art-ip, url("../img/art/service-ip.svg")); } .art-soc { background-image: var(--art-soc, url("../img/art/service-soc.svg")); } .art-ai { background-image: var(--art-ai, url("../img/art/ind-ai.svg")); } .art-auto { background-image: var(--art-auto, url("../img/art/ind-automotive.svg")); } .art-net { background-image: var(--art-net, url("../img/art/ind-networking.svg")); } .art-consumer { background-image: var(--art-consumer, url("../img/art/ind-consumer.svg")); } .art-telecom { background-image: var(--art-telecom, url("../img/art/ind-telecom.svg")); } .art-aerospace { background-image: var(--art-aerospace, url("../img/art/ind-aerospace.svg")); } /* artwork already carries its own tint, so drop the photo overlays */ .tile__bg[class*="art-"]::before, .service-card__top.art-rtl::after, .service-card__top.art-dv::after, .service-card__top.art-fpga::after, .service-card__top.art-psv::after { content: none; } .service-card__top[class*="art-"]::before { opacity: .05; } .tile[class*="has-art"] .tile__glyph, .service-card__top[class*="art-"] .service-card__glyph { display: none; } .visual-card[class*="art-"]::before { content: none; } .visual-card[class*="art-"] > .icon { display: none; } /* ---------- Capability tabs + link grid ---------- */ .cap-tabs { display: flex; justify-content: center; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 40px; } .cap-tab { padding: 14px 32px; font-size: 16px; color: var(--muted); border-bottom: 3px solid transparent; transition: color .2s, border-color .2s; } .cap-tab:hover { color: var(--text); } .cap-tab.is-active { color: var(--ink); border-color: var(--accent); } .cap-panel { display: none; } .cap-panel.is-active { display: block; animation: fadeUp .5s var(--ease); } .cap-intro { text-align: center; color: var(--muted); max-width: 760px; margin: 0 auto 36px; } .link-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 32px; } .link-grid a { display: block; padding: 14px 0; font-size: 16px; color: var(--accent); border-bottom: 1px solid var(--line); transition: color .2s, padding-left .2s; } .link-grid a:hover { color: var(--ink); padding-left: 6px; } /* ---------- centred button row ---------- */ .btn-row--center { justify-content: center; margin-top: 48px; } /* ---------- news card label ---------- */ .post-card__label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 12px; } .post-card__body h3 { font-size: 19px; line-height: 1.4; margin-bottom: 10px; flex: 0; } .post-card__body p { color: var(--muted); font-size: 16px; flex: 1; } .post-card__media { aspect-ratio: 16 / 9; position: relative; overflow: hidden; } /* ---------- dark innovations block ---------- */ .innov { display: grid; grid-template-columns: 1fr 340px 1fr; gap: 48px; align-items: center; margin-top: 24px; } .innov__col li { border-top: 1px solid rgba(255, 255, 255, 0.22); padding: 20px 0 16px; } .innov__col li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.22); } .innov__col span { display: block; font-family: var(--font-head); font-size: 18px; font-weight: 500; color: #fff; margin-bottom: 6px; } .innov__art { justify-self: center; width: 100%; max-width: 340px; } .innov__foot { text-align: center; color: var(--muted-light); margin: 48px 0 0; } /* ---------- simple two-column split ---------- */ .split-simple { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); } .split-simple .lead { margin-bottom: 28px; } /* ---------- Inner-page sub-navigation (two rows) ---------- */ .subnav { max-width: var(--frame); margin-inline: auto; } .subnav--family { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: var(--header-top); z-index: 61; } .subnav--family .container { display: flex; align-items: center; gap: 0; overflow-x: auto; scrollbar-width: none; height: 49px; min-height: 0; } .subnav--family .container::-webkit-scrollbar { display: none; } .subnav--family a { padding: 14px 0; margin-right: 30px; font-size: 12.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .subnav--family a:hover { color: var(--accent); } .subnav--family a.is-active { color: var(--ink); } .subnav--page { top: calc(var(--header-top) + 50px); } .subnav--solo { top: var(--header-top); } /* ---------- Key benefits grid ---------- */ .benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 44px 56px; } .benefit .icon { font-size: 30px; color: var(--accent); margin-bottom: 16px; } .benefit h3 { font-size: 17.5px; font-weight: 600; margin-bottom: 8px; } .benefit p { color: var(--muted); font-size: 16px; margin: 0; } /* ---------- Applications: vertical tabs + panel ---------- */ .apps { display: grid; grid-template-columns: 240px 1fr; gap: 56px; align-items: start; } .apps__tabs { display: grid; gap: 0; } .apps__tab { text-align: left; padding: 16px 0 16px 18px; font-size: 16px; color: var(--muted); border-left: 2px solid var(--line); transition: color .2s, border-color .2s; } .apps__tab:hover { color: var(--text); } .apps__tab.is-active { color: var(--ink); border-color: var(--accent); font-weight: 500; } .apps__panel { display: none; } .apps__panel.is-active { display: block; animation: fadeUp .5s var(--ease); } .apps__panel h3 { font-size: clamp(1.3rem, 1.8vw, 1.6rem); margin-bottom: 14px; } .apps__panel p { color: var(--muted); max-width: 720px; } .apps__media { margin-top: 26px; aspect-ratio: 16 / 9; background-size: cover; background-position: center; } /* ---------- Overview with faint side graphic ---------- */ .overview { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px; align-items: center; } .overview__art { opacity: .9; } .overview__art svg { width: 100%; height: auto; } @media (max-width: 1024px) { .benefits { grid-template-columns: 1fr; gap: 32px; } .apps { grid-template-columns: 1fr; gap: 28px; } .apps__tabs { grid-auto-flow: column; overflow-x: auto; } .apps__tab { border-left: 0; border-bottom: 2px solid var(--line); padding: 12px 18px 12px 0; white-space: nowrap; } .overview { grid-template-columns: 1fr; } .overview__art { display: none; } .subnav--page { top: var(--header-top); } .subnav--family { display: none; } body:has(.subnav--family) { --pinned: calc(var(--header-h) + 62px); } } /* ---------- Company pages (About / Leadership) ---------- */ /* centred image hero with an uppercase title */ .page-hero--center { text-align: center; padding-block: clamp(96px, 11vw, 150px); } .page-hero--center .container { display: grid; justify-items: center; } .page-hero--center .h1 { text-transform: uppercase; font-weight: 600; letter-spacing: .01em; font-size: clamp(2rem, 3.8vw, 3rem); max-width: 900px; } .page-hero--center .lead { max-width: 720px; margin-inline: auto; } .page-hero--center .btn-row { justify-content: center; } .page-hero--center::after { background: linear-gradient(180deg, color-mix(in srgb, var(--navy) 70%, transparent) 0%, color-mix(in srgb, var(--navy) 88%, transparent) 100%); } /* intro: story text left, stats panel right */ .about-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: stretch; } .about-intro__text { display: flex; flex-direction: column; } .about-intro__text p { color: var(--text); } .about-intro__text .btn { align-self: flex-start; margin-top: auto; } .stat-panel { background: #fff; padding: 36px 28px 30px; display: flex; flex-direction: column; } .stat-panel__grid { display: grid; grid-template-columns: 1fr 1fr; flex: 1; } .stat-panel__item { text-align: center; padding: 18px 10px 22px; } .stat-panel__item:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .stat-panel__item .icon { font-size: 40px; margin: 0 auto 12px; stroke-width: 1.3; } .stat-panel__item:nth-child(1) .icon { color: var(--accent); } .stat-panel__item:nth-child(2) .icon { color: var(--accent-2); } .stat-panel__item:nth-child(3) .icon { color: var(--indigo); } .stat-panel__item:nth-child(4) .icon { color: var(--ink); } .stat-panel__num { font-family: var(--font-head); font-size: 28px; font-weight: 700; color: var(--ink); line-height: 1.2; } .stat-panel__label { font-size: 14px; color: var(--muted); margin-top: 4px; } .stat-panel .btn { align-self: center; margin-top: 22px; } /* bordered capability box with large text tabs and an icon grid */ .cap-box { max-width: 900px; margin: 0 auto; border: 1px solid var(--line); padding: clamp(28px, 4vw, 44px); background: #fff; } .cap-box__tabs { display: flex; justify-content: center; gap: 48px; margin-bottom: 20px; } .cap-box__tab { font-family: var(--font-head); font-size: clamp(1.2rem, 2vw, 1.6rem); color: var(--muted); padding: 10px 4px; border-top: 3px solid transparent; } .cap-box__tab.is-active { color: var(--ink); font-weight: 600; border-color: var(--accent); } .cap-box__panel { display: none; } .cap-box__panel.is-active { display: block; animation: fadeUp .5s var(--ease); } .cap-box__intro { text-align: center; color: var(--muted); margin-bottom: 30px; } .icon-grid { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 30px; } .icon-grid > a { flex: 0 0 25%; padding: 0 8px; } .icon-grid a { display: grid; justify-items: center; gap: 10px; text-align: center; color: var(--accent); font-size: 15px; line-height: 1.35; } .icon-grid a .icon { font-size: 34px; color: var(--ink); stroke-width: 1.3; transition: color .2s; } .icon-grid a:hover { color: var(--ink); } .icon-grid a:hover .icon { color: var(--accent); } /* full-width image band with text on the left */ .band { position: relative; color: #fff; overflow: hidden; background: var(--navy) url("../img/bg-parallax.jpg") right center/cover no-repeat; } .band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--navy) 96%, transparent) 0%, color-mix(in srgb, var(--navy) 82%, transparent) 45%, color-mix(in srgb, var(--accent) 22%, transparent) 100%); } .band .container { position: relative; padding-block: clamp(64px, 8vw, 96px); } .band__content { max-width: 520px; } .band h2 { color: #fff; margin-bottom: 10px; } .band p { color: var(--muted-light); margin-bottom: 26px; } .band--art { background: var(--navy); } .band--art .band__art { position: absolute; right: 0; top: 0; bottom: 0; width: 58%; background-size: cover; background-position: center; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%); mask-image: linear-gradient(90deg, transparent 0%, #000 40%); } .band--art::before { content: none; } /* resource cards with a coloured icon */ .res-card { background: #fff; padding: 30px 28px 26px; display: flex; flex-direction: column; } .res-card .icon { font-size: 38px; stroke-width: 1.3; margin-bottom: 18px; } .grid > .res-card:nth-child(1) .icon { color: var(--accent); } .grid > .res-card:nth-child(2) .icon { color: var(--accent-2); } .grid > .res-card:nth-child(3) .icon { color: var(--indigo); } .res-card h3 { font-size: 17px; font-weight: 600; margin-bottom: 14px; } .res-card p, .res-card li { color: var(--muted); font-size: 15px; } .res-card ul { display: grid; gap: 6px; margin-bottom: 16px; } .res-card ul li::before { content: "— "; color: var(--accent); } .res-card p { flex: 1; } .res-card .link-arrow { margin-top: 18px; } /* leadership cards: circular portrait overlapping a white card */ .leaders { display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); justify-content: center; gap: 64px 24px; } .leader { text-align: center; padding-top: 70px; } .leader__card { background: #fff; box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 18%, transparent); padding: 84px 20px 22px; position: relative; min-height: 250px; display: flex; flex-direction: column; } .leader__photo { position: absolute; left: 50%; top: -70px; transform: translateX(-50%); width: 140px; height: 140px; border-radius: 50%; padding: 4px; background: var(--grad); } .leader__photo span, .leader__photo img { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: var(--navy-lift); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: 40px; object-fit: cover; object-position: center 18%; } .leader__name { font-family: var(--font-head); font-size: 21px; font-weight: 500; color: var(--accent); margin-bottom: 12px; line-height: 1.3; } .leader__role { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); line-height: 1.5; flex: 1; } .leader__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); align-self: center; } .leader__link .icon { font-size: 14px; transform: rotate(-90deg); } .leader__link:hover { color: var(--ink); } .section-rule { border: 0; border-top: 1px solid var(--line); max-width: var(--container); margin: 0 auto; } @media (max-width: 1024px) { .about-intro { grid-template-columns: 1fr; } .icon-grid > a { flex-basis: 33.333%; } .leaders { grid-template-columns: repeat(2, minmax(0, 260px)); } .band--art .band__art { width: 100%; opacity: .35; } } @media (max-width: 680px) { .icon-grid > a { flex-basis: 50%; } .leaders { grid-template-columns: minmax(0, 300px); } .cap-box__tabs { gap: 20px; } .stat-panel__grid { grid-template-columns: 1fr 1fr; } } /* ---------- Careers page ---------- */ .work-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .work-card { background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; } .work-card__media { aspect-ratio: 16 / 10; background-size: cover; background-position: center; } .work-card__body { padding: 26px 20px 28px; } .work-card h3 { font-size: 17px; font-weight: 600; margin-bottom: 12px; } .work-card p { color: var(--muted); font-size: 15px; margin: 0; } .role-intro { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 48px; align-items: center; margin-bottom: 48px; } .role-intro p { color: var(--text); margin: 0; } .role-intro .btn { justify-self: center; width: 100%; max-width: 280px; } .apps__panel .apps__media + p { margin-top: 20px; } .culture-rows { display: grid; gap: clamp(56px, 7vw, 88px); } .culture-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; } .culture-row__media { aspect-ratio: 16 / 10; background-size: cover; background-position: center; } .culture-row h2 { margin-bottom: 14px; } .culture-row p { color: var(--text); margin-bottom: 26px; } .culture-row--flip .culture-row__media { order: 2; } .culture-steps { display: grid; gap: 10px; margin: 0 0 26px; } .culture-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: baseline; color: var(--text); } .culture-steps b { font-family: var(--font-head); font-weight: 600; color: var(--accent); } .logo-band { background: color-mix(in srgb, var(--accent) 9%, #ffffff); } .logo-band .container { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding-block: clamp(48px, 6vw, 72px); } .logo-band img { width: min(100%, 320px); height: auto; justify-self: center; } .logo-band p { font-size: 19px; color: var(--text); margin-bottom: 20px; max-width: 420px; } @media (max-width: 1024px) { .work-cards { grid-template-columns: repeat(2, 1fr); } .role-intro, .culture-row, .logo-band .container { grid-template-columns: 1fr; } .role-intro .btn { justify-self: start; } .culture-row--flip .culture-row__media { order: 0; } } @media (max-width: 680px) { .work-cards { grid-template-columns: 1fr; } } /* ---------- Company mega menu: grouped columns + promo tiles ---------- */ .mega--groups .mega__inner { grid-template-columns: 1.1fr 1fr 1fr 340px; min-height: 0; } .mega__group { padding: 34px 28px 34px 0; } .mega__group h3 { font-family: var(--font-nav); font-size: 20px; font-weight: 500; color: var(--ink); margin-bottom: 16px; } .mega__group h3 + ul { margin-bottom: 26px; } .mega__group h3 a { display: inline; color: inherit; } .mega__group h3 a .icon { display: inline-block; font-size: 17px; margin-left: 6px; vertical-align: -2px; } .mega__group h3 a:hover { color: var(--accent); } .mega__group li a { display: block; padding: 7px 0; font-size: 14.5px; font-weight: 500; color: var(--text); } .mega__group li a:hover { color: var(--accent); } .mega__promos { padding: 22px 0 22px 28px; border-left: 1px solid var(--line); display: grid; gap: 0; align-content: start; } .mega__promo { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; padding: 14px 0; } .mega__promo + .mega__promo { border-top: 1px solid var(--line); } .mega__promo-img { width: 96px; height: 72px; background-size: cover; background-position: center; } .mega__promo strong { display: block; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 6px; } .mega__promo .icon { font-size: 18px; color: var(--ink); transition: transform .2s; } .mega__promo:hover strong { color: var(--accent); } .mega__promo:hover .icon { transform: translateX(4px); } /* ---------- Culture page ---------- */ .intro-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 56px; align-items: center; } .intro-split p { color: var(--text); } .line-tabs { display: flex; gap: 30px; border-bottom: 1px solid var(--line); margin: 48px 0 30px; overflow-x: auto; scrollbar-width: none; } .line-tabs::-webkit-scrollbar { display: none; } .line-tab { padding: 10px 0 12px; font-size: 17px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; } .line-tab:hover { color: var(--text); } .line-tab.is-active { color: var(--ink); border-color: var(--ink); } .line-panel { display: none; } .line-panel.is-active { display: block; animation: fadeUp .5s var(--ease); } .line-panel h3 { font-size: 24px; font-weight: 500; margin-bottom: 14px; } .line-panel > p { color: var(--text); max-width: 860px; } .ticks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 40px; margin: 22px 0 8px; } .ticks li { display: flex; gap: 14px; align-items: baseline; color: var(--accent); font-size: 16.5px; } .ticks li::before { content: ""; flex: 0 0 14px; height: 8px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg) translateY(-3px); } .ticks li span { color: var(--text); } .line-panel__media { margin-top: 30px; aspect-ratio: 21 / 8; background-size: cover; background-position: center; } .social-bar { background: color-mix(in srgb, var(--accent) 16%, #ffffff); } .social-bar .container { display: flex; align-items: center; gap: 22px; padding-block: 22px; flex-wrap: wrap; } .social-bar strong { font-family: var(--font-head); font-size: 20px; font-weight: 500; color: var(--ink); margin-right: 6px; } .social-bar a { font-size: 22px; color: var(--ink); display: grid; place-items: center; } .social-bar a:hover { color: var(--accent); } /* ---------- Approach page: horizontal reading cards ---------- */ .hcards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .hcard { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 10px; background: #fff; border: 1px solid var(--line); position: relative; transition: border-color .2s; } .hcard:hover { border-color: var(--accent); } .hcard__img { aspect-ratio: 1 / 1.2; background-size: cover; background-position: center; } .hcard__tag { display: block; width: 16px; height: 5px; background: var(--grad); margin: 4px 0 10px; } .hcard h3 { font-size: 16px; font-weight: 500; line-height: 1.45; margin-bottom: 10px; } .hcard small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.6; } .hcard .icon { position: absolute; right: 14px; bottom: 14px; font-size: 18px; color: var(--muted); } .split-media { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; } .split-media p { color: var(--text); } .split-media__img { aspect-ratio: 16 / 9; background-size: cover; background-position: center; } .btn-row .btn--light { background: transparent; } @media (min-width: 1025px) and (max-width: 1120px) { .header-actions .btn { display: none; } .nav__link { padding: 0 11px; } .nav__link::after { left: 11px; } .nav__item.is-open .nav__link::after { /* only while a menu is open, as on Cadence */ width: calc(100% - 22px); } .site-header > .container { gap: 20px; } } @media (max-width: 1180px) { .mega--groups .mega__inner { grid-template-columns: 1fr 1fr 1fr; } .mega__promos { display: none; } } @media (max-width: 1024px) { .mega--groups .mega__inner { grid-template-columns: 1fr; } .mega__group { padding: 0 0 8px; } .mega__group h3 { font-size: 15px; margin: 12px 0 6px; color: var(--muted); } .mega__group h3 + ul { margin-bottom: 8px; } .intro-split, .split-media, .hcards { grid-template-columns: 1fr; } .ticks { grid-template-columns: 1fr; } } /* ---------- Design for AI page ---------- */ .subnav--family .subnav__label { font-weight: 600; color: var(--ink); } .line-tabs--center { justify-content: center; } .line-panel--wide { max-width: 1000px; margin: 0 auto; } /* resource carousel */ .carousel { position: relative; padding: 0 56px; } .carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; } .carousel__track::-webkit-scrollbar { display: none; } .carousel__track > * { scroll-snap-align: start; } .carousel__btn { position: absolute; top: 34%; width: 44px; height: 44px; display: grid; place-items: center; font-size: 26px; color: var(--ink); } .carousel__btn[data-dir="-1"] { left: 0; } .carousel__btn[data-dir="-1"] .icon { transform: rotate(180deg); } .carousel__btn[data-dir="1"] { right: 0; } .carousel__btn:disabled { opacity: .25; cursor: default; } .carousel__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; } .carousel__dots { display: flex; gap: 8px; } .carousel__dots button { width: 14px; height: 14px; border: 1.5px solid var(--ink); } .carousel__dots button.is-active { background: var(--ink); } .res-slide { display: block; } .res-slide__media { aspect-ratio: 16 / 9; background-size: cover; background-position: center; margin-bottom: 16px; } .res-slide__type { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .res-slide__type .icon { font-size: 15px; } .res-slide h3 { font-size: 17px; font-weight: 500; line-height: 1.45; } .res-slide:hover h3 { color: var(--accent); } .view-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); } .view-all .icon { font-size: 15px; transform: rotate(-90deg); } .view-all:hover { color: var(--accent); } /* news | blogs columns */ .news-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; } .news-col__head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line); } .news-col__head h3 { font-size: 22px; font-weight: 500; margin: 0; } .news-col__head .view-all { color: var(--accent); } .news-item { display: block; background: #fff; padding: 18px 20px 16px; margin-bottom: 14px; box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent); transition: box-shadow .2s; } .news-item::before { content: ""; display: block; width: 18px; height: 5px; background: var(--grad); margin-bottom: 12px; } .news-item h4 { font-size: 16.5px; font-weight: 500; line-height: 1.45; margin-bottom: 8px; } .news-item small { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .news-item:hover { box-shadow: var(--shadow); } .news-item:hover h4 { color: var(--accent); } @media (max-width: 1024px) { .carousel { padding: 0 44px; } .carousel__track { grid-auto-columns: calc((100% - 24px) / 2); } .news-cols { grid-template-columns: 1fr; } } @media (max-width: 680px) { .carousel { padding: 0; } .carousel__btn { display: none; } .carousel__track { grid-auto-columns: 85%; } } /* ---------- Products-style mega menu: category columns + grey "All" panel ---------- */ .mega--products .mega__inner { grid-template-columns: 1fr 1fr 1fr 290px; min-height: 0; } .mega--products .mega__group { padding: 34px 26px 30px 0; } .mega--products .mega__group li a { padding: 8px 0; } .mega__item-title { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); } .mega__item-desc { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); line-height: 1.45; margin-top: 2px; } .mega__group li a:hover .mega__item-title { color: var(--accent); } .mega__all { background: var(--mist); padding: 34px 28px; display: grid; align-content: start; gap: 4px; margin-right: calc(var(--gutter) * -1); } .mega__all a { font-size: 14px; font-weight: 500; color: var(--text); padding: 7px 0; } .mega__all a:hover { color: var(--accent); } @media (max-width: 1180px) { .mega--products .mega__inner { grid-template-columns: 1fr 1fr 1fr; } .mega__all { display: none; } } /* ---------- Cadence-style mega menus (AI, Products): three or four columns (light heading + arrow, title + grey description) ---------- */ /* measured from cadence.com at 1920px: 1320px content, three 435px columns, 15px right padding */ .mega--cad .container { max-width: 1320px; padding-inline: 0; } /* like Cadence: no side margins, so columns stay wide on smaller screens */ .mega--cad .mega__inner { grid-template-columns: repeat(3, minmax(0, 435px)); min-height: 0; padding: 0 15px 0 0; } .mega--cad .mega__col { padding: 20px 0 30px; } .mega--cad .mega__head { font-family: var(--font-nav); font-weight: 300; font-size: 24px; line-height: 32px; letter-spacing: -0.024em; color: var(--nav-ink); margin: 0; padding: 16px 12px; } .mega--cad .mega__list + .mega__head { margin-top: 40px; padding-top: 0; letter-spacing: -0.02em; } /* linked headings are full-width hover blocks, like Cadence's; plain headings have no hover */ .mega--cad .mega__head a { display: block; margin: -16px -12px; padding: 16px 12px; color: inherit; } .mega--cad .mega__head a:hover { background: #f5f5f5; } .mega--cad .mega__head a:focus-visible, .mega--cad .mega__list a:focus-visible { outline: 4px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: -4px; border-radius: 0; } .mega--cad .mega__head .icon { display: inline-block; width: 20px; height: 20px; margin-left: 4px; vertical-align: -2px; stroke-width: 2; } .mega--cad .mega__list li { margin: 0; } .mega--cad .mega__list a { display: block; padding: 6px 14px 9px; } /* 60px rows, as measured on Cadence */ .mega--cad .mega__list a:hover, .mega--cad .mega__list a:focus-visible { background: #f5f5f5; } .mega--cad .mega__item-title { font-family: var(--font-nav); font-weight: 500; font-size: 14px; line-height: 26px; letter-spacing: normal; color: var(--nav-ink); } .mega--cad .mega__item-desc { font-family: var(--font-nav); font-weight: 400; font-size: 12px; line-height: 18.72px; letter-spacing: 0.04em; color: #5e6366; margin-top: 0; } /* Products: four 326px columns; the last is a grey "All …" panel that runs to the right edge of the window */ .mega--cad4 .mega__inner { grid-template-columns: repeat(4, minmax(0, 326.25px)); } .mega--cad .mega__col--all { padding-top: 36px; background: #f5f7f8; box-shadow: 0 0 0 100vmax #f5f7f8; clip-path: inset(0 -100vmax 0 0); } .mega--cad .mega__col--all .mega__list a:hover, .mega--cad .mega__col--all .mega__list a:focus-visible { background: #e5e5e5; } /* Solutions: three 440px columns of plain 34px links; the third holds two picture cards (measured on Cadence) */ .mega--cad-sol .mega__inner { grid-template-columns: repeat(3, minmax(0, 440px)); padding: 0 0 36px; } /* Cadence adds 36px of white below the Solutions and Support menus */ .mega--cad-sol .mega__col { padding: 20px 16px 0 0; } .mega--cad-sol .mega__list a { padding: 4px 12px; } .mega__card { width: 348px; max-width: 100%; margin-left: auto; padding: 15px 0; } .mega__card-img { display: block; padding-bottom: 20px; } .mega__card-img img { width: 100%; height: 162px; object-fit: cover; } .mega__card-img--tall img { height: 178px; } .mega__card-text { display: block; margin-top: 15px; font-family: var(--font-nav); font-weight: 500; font-size: 16.2px; line-height: 24.3px; letter-spacing: 0.01em; color: var(--nav-ink); } .mega__card-link { display: block; width: max-content; margin-top: 14px; height: 26px; color: var(--nav-ink); } .mega__card-link .icon { width: 24px; height: 24px; stroke-width: 2; transition: transform .2s; } .mega__card:hover .mega__card-link, .mega__card:focus-within .mega__card-link { color: var(--accent); } .mega__card:hover .mega__card-link .icon, .mega__card:focus-within .mega__card-link .icon { transform: translate(5px, 2.5px); } /* Support: small 120px image card with text beside it, then text-only promos in capitals with ↗ (measured on Cadence) */ .mega__card--small { width: auto; margin: 0; padding: 0 0 32px; display: grid; grid-template-columns: 120px 1fr; column-gap: 20px; align-items: start; } .mega__card--small .mega__card-img { padding: 0; } .mega__card--small .mega__card-img img { width: 120px; height: 120px; } .mega__card--small .mega__card-text { margin-top: 0; } .mega__card--divided { border-top: 1.6px solid #ebeef0; padding-top: 30px; } /* Company: second small card */ .mega__textpromo { display: flow-root; border-top: 1.6px solid #ebeef0; padding-top: 30px; } .mega__textpromo + .mega__textpromo { margin-top: 13px; } .mega__textpromo a { display: block; margin: 15px 0; padding-bottom: 3px; font-family: var(--font-nav); font-weight: 500; font-size: 16.2px; line-height: 24.3px; letter-spacing: 0.01em; text-transform: uppercase; color: var(--nav-ink); } .mega__textpromo .icon { display: block; width: 20px; height: 20px; margin-top: 2px; stroke-width: 2; transition: transform .2s; } .mega__textpromo:hover a, .mega__textpromo a:focus-visible { color: var(--accent); } .mega__textpromo:hover .icon, .mega__textpromo a:focus-visible .icon { transform: translate(5px, 2.5px); } .mega__col--all .mega__item-title .icon { display: inline-block; width: 14px; height: 14px; margin-left: 6px; vertical-align: -1px; stroke-width: 2; } @media (max-width: 1024px) { .mega--products .mega__inner { grid-template-columns: 1fr; } .mega--products .mega__group { padding: 0 0 8px; } .mega__item-desc { display: none; } } /* ---------- 7. Stacked double-outline button ---------- */ .btn--stack { position: relative; background: #fff; color: var(--ink); border: 1px solid var(--ink); box-shadow: 4px 4px 0 -1px #fff, 4px 4px 0 0 var(--ink); } .btn--stack:hover { background: var(--ink); color: #fff; box-shadow: 4px 4px 0 -1px #fff, 4px 4px 0 0 var(--accent); } /* ---------- 8. Decorative motifs: isometric cubes + triangle particles ---------- */ .deco { position: relative; overflow: hidden; } .deco > .container { position: relative; z-index: 1; } .deco--cubes::before { content: ""; position: absolute; right: 4%; top: 40px; width: 150px; height: 260px; background: url("../img/deco-cubes.svg") no-repeat center/contain; opacity: .55; pointer-events: none; } .deco--cubes-left::before { content: ""; position: absolute; left: 3%; bottom: 20px; width: 170px; height: 150px; background: url("../img/deco-cubes.svg") no-repeat center/contain; opacity: .45; pointer-events: none; } .deco--tri::after { content: ""; position: absolute; right: 0; bottom: 0; width: 210px; height: 110px; background: url("../img/deco-triangles.svg") no-repeat right bottom/contain; pointer-events: none; } .deco--dots::after { content: ""; position: absolute; left: 12%; bottom: 0; width: 130px; height: 70px; background: url("../img/deco-dots.svg") no-repeat left bottom/contain; pointer-events: none; } @media (max-width: 680px) { .deco--cubes::before, .deco--cubes-left::before, .deco--tri::after, .deco--dots::after { display: none; } } /* ---------- 10. Footer: badges, language, legal grid ---------- */ .footer-badge { grid-template-columns: 58px 1fr; column-gap: 14px; align-items: center; } .footer-badge__img { grid-row: span 2; width: 58px; height: 72px; display: grid; place-items: center; background: var(--grad); color: #fff; font-size: 28px; } .footer-badge__img--round { width: 58px; height: 58px; border-radius: 50%; background: var(--ink); } .site-footer .footer-bottom { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; align-items: start; } .footer-bottom__meta { display: grid; gap: 8px; } .footer-lang { display: inline-flex; align-items: center; gap: 8px; color: var(--text); } .footer-lang .icon { font-size: 16px; } .site-footer .footer-bottom nav { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 48px; } @media (max-width: 680px) { .site-footer .footer-bottom { grid-template-columns: 1fr; } .site-footer .footer-bottom nav { grid-template-columns: 1fr 1fr; gap: 8px 24px; } } /* ---------- Family sub-nav dropdowns ---------- */ .fam-dd { position: relative; margin-right: 30px; } .fam-dd__toggle { display: inline-flex; align-items: center; gap: 5px; padding: 14px 0; font-size: 12.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .fam-dd__toggle .icon { font-size: 13px; transition: transform .2s; } .fam-dd__toggle:hover, .fam-dd.is-open .fam-dd__toggle { color: var(--accent); } .fam-dd__toggle.is-active { color: var(--ink); } .fam-dd.is-open .fam-dd__toggle .icon { transform: rotate(180deg); } .fam-dd__menu { position: absolute; left: -14px; top: 100%; min-width: 220px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 8px 0; display: none; z-index: 70; } .fam-dd.is-open .fam-dd__menu { display: block; } .fam-dd__menu a { display: block; margin: 0; padding: 9px 16px; font-size: 13.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text); } .fam-dd__menu a:hover { background: var(--mist); color: var(--accent); } @media (min-width: 1025px) { .subnav--family .container { overflow: visible; } } /* ---------- Homepage innovations: active item bar ---------- */ .innov__col li { border-top-width: 1px; position: relative; transition: border-color .2s; } .innov__col li::before { content: ""; position: absolute; left: 0; top: -2px; height: 3px; width: 0; background: #fff; transition: width .35s var(--ease); } .innov__col li.is-active::before { width: 72%; } .innov__col li span { color: rgba(255, 255, 255, 0.72); transition: color .2s; } .innov__col li.is-active span { color: #fff; } .innov__col li .link-arrow { opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s; } .innov__col li.is-active .link-arrow, .innov__col li:focus-within .link-arrow { opacity: 1; transform: none; } @media (hover: none) { .innov__col li .link-arrow { opacity: 1; transform: none; } } /* ---------- 24. Footer ---------- */ .site-footer { background: #f5f5f5; color: var(--text); padding-top: clamp(56px, 6vw, 80px); position: relative; border-top: 1px solid var(--line); } .site-footer::before { content: none; } .footer-top { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 40px; padding-bottom: 48px; } .footer-brand .logo { margin-bottom: 26px; } .footer-badge { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); max-width: 280px; } .footer-badge strong { font-family: var(--font-head); font-size: 15px; font-weight: 600; color: var(--ink); } .footer-badge span { font-size: 13.5px; color: var(--muted); } .footer-brand ul { margin-top: 18px; display: grid; gap: 10px; } .footer-brand a { font-size: 15px; color: var(--text); } .footer-brand a:hover { color: var(--accent); } .footer-col h4 { color: var(--ink); font-size: 18px; font-family: var(--font-head); font-weight: 500; letter-spacing: 0; text-transform: none; margin-bottom: 20px; } .footer-col li + li { margin-top: 12px; } .footer-col a { font-size: 15px; transition: color .2s; } .footer-col a { color: var(--text); } .footer-col a:hover { color: var(--accent); } .newsletter { display: flex; margin-top: 12px; gap: 0; } .newsletter input { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--line); outline: 0; padding: 0 16px; height: 46px; color: var(--text); font-size: 15px; } .newsletter input::placeholder { color: #9aa3ab; } .newsletter button { min-width: 120px; height: 46px; border-radius: 0; background: var(--ink); color: #fff; font-size: 14px; letter-spacing: .06em; } .newsletter button:hover { background: var(--accent); color: var(--on-accent); } .footer-connect { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 36px 0; border-top: 1px solid var(--line); } .footer-connect h4 { font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--ink); margin-bottom: 14px; } .socials { display: flex; gap: 10px; } .socials a { width: 40px; height: 40px; border-radius: 0; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; font-size: 17px; transition: all .2s; } .socials a:hover { background: var(--ink); color: #fff; border-color: var(--ink); } .footer-bottom { border-top: 1px solid var(--line); padding-block: 24px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 14px; color: var(--muted); } .footer-bottom nav { display: flex; gap: 24px; flex-wrap: wrap; } .footer-bottom a:hover { color: var(--accent); } .footer-watermark { display: none; } /* ---------- Footer, Cadence layout (measured at 1536px) ---------- 54px top padding; 12-column grid (80px cols, 30px gaps = Cadence's 110px bootstrap cols): awards 1–3, link columns at cols 5/7/9/11 (190px each); connect row under cols 5–8 / 9–12, 60px above and below; full-width rule, then language + copyright left and legal links 3 per row (220px) from col 5. */ .site-footer { padding-top: 54px; overflow: hidden; } /* clips the full-width legal rule */ .site-footer .footer-brand .logo { display: none; } /* Cadence's footer has no logo */ .site-footer .footer-top, .site-footer .footer-connect, .site-footer .footer-bottom { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 30px; } .site-footer .footer-top { padding-bottom: 0; row-gap: 40px; } .site-footer .footer-brand { grid-column: 1 / span 3; } .site-footer .footer-top > .footer-col:nth-child(2) { grid-column: 5 / span 2; } .site-footer .footer-top > .footer-col:nth-child(3) { grid-column: 7 / span 2; } .site-footer .footer-top > .footer-col:nth-child(4) { grid-column: 9 / span 2; } .site-footer .footer-top > .footer-col:nth-child(5) { grid-column: 11 / span 2; } /* award boxes: 82px image, text 30px to its right, 26px padding, hairline between */ .site-footer .footer-badge { grid-template-columns: 82px 1fr; column-gap: 30px; row-gap: 10px; align-items: start; max-width: none; padding: 26px 0; border-bottom: 1px solid var(--line); } .footer-badge:first-of-type { padding-top: 0; } .site-footer .footer-badge .footer-badge__img { grid-row: span 2; width: 82px; height: 82px; font-size: 36px; color: #fff; } .footer-badge__img--round { border-radius: 50%; } .footer-badge strong { font-family: var(--font-head); font-size: 18px; font-weight: 400; line-height: 25.2px; letter-spacing: -0.02em; color: var(--ink); } .footer-badge span:not(.footer-badge__img) { font-size: 14.4px; line-height: 20px; letter-spacing: .04em; color: var(--text); } .footer-brand ul { margin: 26px 0 0 112px; gap: 3px; } .footer-brand a { font-size: 14.4px; line-height: 24px; letter-spacing: .04em; color: var(--muted); } /* link columns: 24px light titles, 14.4px grey links on a 41px rhythm */ .footer-col h4 { font-size: 24px; font-weight: 300; line-height: 1.6; letter-spacing: -0.02em; margin: 0 0 17px; } .footer-col li { font-size: 14.4px; line-height: 28.8px; letter-spacing: .04em; color: var(--muted); } .footer-col li + li { margin-top: 12px; } .footer-col a { font-size: 14.4px; color: var(--muted); } /* connect row */ .site-footer .footer-connect { margin: 60px 0; padding: 0; border-top: 0; row-gap: 32px; } .site-footer .footer-connect > div:first-child { grid-column: 5 / span 4; } .site-footer .footer-connect > div:last-child { grid-column: 9 / span 4; } .footer-connect h4 { font-family: var(--font-body); font-size: 18px; font-weight: 300; letter-spacing: .04em; color: var(--ink); margin: 0 0 19px; } .socials { gap: 30px; align-items: center; min-height: 55px; } .socials .social-fb { margin-right: -7px; } /* Cadence tucks the narrow "f" closer */ .socials a { width: auto; height: auto; border: 0; background: none; font-size: 22px; color: var(--ink); transition: color .2s; } .socials a svg { display: block; } .socials .social-x svg path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: fill .2s; } /* hover: each icon takes its network's own colour, like Cadence */ .socials a:hover { background: none; } .socials .social-fb:hover { color: #3b5998; } .socials .social-in:hover { color: #0077b5; } .socials .social-yt:hover { color: #c4302b; } .socials .social-x:hover { color: var(--ink); } .socials .social-x:hover .social-x__outline { fill: currentColor; } /* footer links: gradient underline sweeps in on hover (Cadence uses its red→orange; this is the brand blue→purple) */ .footer-col a, .footer-brand ul a { display: inline; padding-bottom: 3px; background: linear-gradient(to right, var(--accent) 0%, var(--accent-2) 50%, transparent 50%) right bottom / 200% 2px no-repeat; transition: background-position .2s linear, color .2s linear; } .footer-col a:hover, .footer-brand ul a:hover { color: var(--ink); background-position: left bottom; } .newsletter { gap: 16px; margin: 0; } .newsletter input { flex: 0 1 246px; height: 55px; padding: 0 16px; background: transparent; border: 1px solid var(--muted); font-size: 18px; font-weight: 300; letter-spacing: .04em; color: var(--ink); } .newsletter input::placeholder { color: var(--ink); opacity: 1; } .newsletter input:focus { border-color: var(--accent); } .newsletter button { min-width: 127px; height: 55px; padding: 0 24px; font-size: 16.2px; font-weight: 500; letter-spacing: normal; } /* legal bar: full-width rule */ .site-footer .footer-bottom { position: relative; border-top: 0; padding: 21px 0 23px; row-gap: 12px; align-items: start; font-size: 14.4px; letter-spacing: .04em; color: var(--muted); } .site-footer .footer-bottom::before { content: ""; position: absolute; top: 0; left: 50%; width: 100vw; height: 1px; transform: translateX(-50%); background: var(--line); } .site-footer .footer-bottom__meta { grid-column: 1 / span 4; gap: 16px; padding-top: 10px; } .footer-lang { font-size: 12px; line-height: 18px; color: var(--muted); } .site-footer .footer-bottom nav { grid-column: 5 / -1; grid-template-columns: repeat(3, 220px); gap: 0; } .site-footer .footer-bottom nav > * { padding: 8px 0; line-height: 20px; } @media (max-width: 1024px) { .site-footer .footer-brand { grid-column: 1 / -1; } .site-footer .footer-top > .footer-col:nth-child(n) { grid-column: span 6; } .site-footer .footer-connect > div:first-child, .site-footer .footer-connect > div:last-child { grid-column: 1 / -1; } .site-footer .footer-bottom__meta, .site-footer .footer-bottom nav { grid-column: 1 / -1; } .site-footer .footer-bottom nav { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } } @media (max-width: 640px) { .site-footer .footer-top > .footer-col:nth-child(n) { grid-column: 1 / -1; } .newsletter input { flex: 1 1 auto; } } /* Cadence-style: 35px translucent grey square, blue chevron, no border/shadow */ .back-top { position: fixed; right: 24px; bottom: 24px; width: 35px; height: 35px; border-radius: 0; background: color-mix(in srgb, var(--mist-2) 60%, transparent); color: var(--accent); border: 0; display: grid; place-items: center; font-size: 20px; z-index: 90; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease), background-color .2s; } .back-top__chev { display: grid; transform: rotate(180deg); } .back-top.is-visible { opacity: 1; transform: none; pointer-events: auto; } .back-top:hover { background: var(--mist-2); } /* ---------- 25. Reveal animations ---------- */ .reveal { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: .1s; } .reveal[data-delay="2"] { transition-delay: .2s; } .reveal[data-delay="3"] { transition-delay: .3s; } .reveal[data-delay="4"] { transition-delay: .4s; } /* Chip illustration animation */ .chip-svg .trace { stroke-dasharray: 6 10; animation: dash 3s linear infinite; } .chip-svg .pulse { animation: glow 2.4s ease-in-out infinite; } @keyframes dash { to { stroke-dashoffset: -64; } } @keyframes glow { 50% { opacity: .35; } } /* 404 */ .err-page { min-height: 70vh; display: grid; place-items: center; text-align: center; } .err-code { font-family: var(--font-head); font-weight: 700; font-size: clamp(120px, 22vw, 260px); line-height: .9; letter-spacing: -0.06em; } /* ---------- 26. Responsive ---------- */ @media (max-width: 1180px) { .mega__inner { grid-template-columns: 220px 1fr; } .mega__feature { display: none; } .footer-top { grid-template-columns: repeat(3, 1fr); } .footer-brand { grid-column: 1 / -1; } .footer-col--news { grid-column: span 3; max-width: 460px; } .article { grid-template-columns: 200px minmax(0, 1fr); } .share { display: none; } } @media (max-width: 1024px) { :root { --header-h: 68px; } .burger { display: grid; } .header-actions .btn { display: none; } .nav { position: fixed; inset: var(--nav-top, calc(var(--header-h) + var(--util-h))) 0 0 0; flex-direction: column; height: auto; background: #fff; overflow-y: auto; padding: 12px var(--gutter) 40px; margin: 0; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; z-index: 99; } .site-header { backdrop-filter: none; background: #fff; } .nav-open .nav { opacity: 1; transform: none; visibility: visible; pointer-events: auto; } .nav-open { overflow: hidden; } .nav__item { flex-direction: column; border-bottom: 1px solid var(--line); } .nav__link { padding: 20px 0; font-size: 18px; justify-content: space-between; } .nav__link:hover { background: none; } .nav__link .icon { display: block; } .nav__link::after { display: none; } .nav__item:hover .nav__link .icon { transform: none; } .nav__item.is-open .nav__link .icon { transform: rotate(180deg); } .mega { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; display: none; max-height: none; overflow: visible; } .mega::after { display: none; } .mega--cad .mega__inner { grid-template-columns: 1fr; padding: 0 0 12px; } .mega--cad .mega__col, .mega--cad-sol .mega__col { padding: 0; } .mega--cad-sol .mega__list a { padding: 8px 0; } .mega__card { display: none; } .mega--cad .mega__col--all { background: none; box-shadow: none; clip-path: none; border-top: 1px solid var(--line); padding-top: 6px; } .mega--cad .mega__head a { margin: 0; padding: 0; } .mega--cad .mega__head a:hover { background: none; } .mega--cad .mega__head { font-size: 15px; font-weight: 400; line-height: 1.4; letter-spacing: 0; color: var(--muted); padding: 12px 0 6px; } .mega--cad .mega__list + .mega__head { margin-top: 0; } .mega--cad .mega__list a { padding: 8px 0; } .mega--cad .mega__list a:hover { background: none; } .nav__item:hover .mega, .nav__item:focus-within .mega { display: none; } .nav__item.is-open .mega { display: block; } .mega .container { padding: 0; } .mega__inner, .mega--compact .mega__inner { grid-template-columns: 1fr; min-height: 0; } .mega__intro { display: none; } .mega__cols, .mega--compact .mega__cols { grid-template-columns: 1fr; padding: 0 0 16px; } .mega__link { padding: 12px 0; } .nav__mobile-cta { display: flex !important; margin-top: 28px; } .grid--4 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } .split, .split--wide, .split--contact, .page-hero__grid { grid-template-columns: 1fr; } .split > [style*="order"] { order: 0 !important; } .page-hero__visual { display: none; } .flow__panel { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(3) { padding-left: 0; border-left: 0; } .stat:nth-child(n+3) { border-top: 1px solid var(--line); } .section--dark .stat:nth-child(n+3) { border-color: var(--line-dark); } .tiles { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 240px; } .tiles--square { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 300px; } .tile, .tile--wide { grid-column: span 1; } .tile p { max-height: 120px; opacity: 1; margin-top: 4px; } .steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; } .step:nth-child(2) .step__num::after { display: none; } .num-list { grid-template-columns: repeat(2, 1fr); } .cta-band { grid-template-columns: 1fr; } .link-grid { grid-template-columns: repeat(2, 1fr); } .innov { grid-template-columns: 1fr; gap: 28px; } .innov__art { max-width: 260px; order: -1; } .split-simple { grid-template-columns: 1fr; } .footer-top { grid-template-columns: repeat(2, 1fr); } .footer-connect { grid-template-columns: 1fr; } .post-card--feature { grid-template-columns: 1fr; } .post-card--feature .post-card__media { min-height: 240px; } .job { grid-template-columns: 1fr 1fr; } .job > div:first-child { grid-column: 1 / -1; } .article { grid-template-columns: 1fr; } .toc { display: none; } .hero__tabs .container { grid-template-columns: repeat(2, 1fr); } .hero__tab:nth-child(3) { padding-left: 0; border-left: 0; } .hero__tab:nth-child(n+3) { border-top: 1px solid var(--line-dark); } .hero__slide { padding-bottom: 210px; } } @media (max-width: 680px) { body { font-size: 15.5px; } .util-bar__links, .util-bar__more { display: none; } .logo__word { font-size: 19px; } .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } .flow { grid-template-columns: repeat(2, 1fr); row-gap: 24px; } .check-list--2 { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr 1fr; } .stat { padding-right: 12px; } .stat + .stat { padding-left: 16px; } .stat:nth-child(3) { padding-left: 0; } .tiles, .tiles--square { grid-template-columns: 1fr; grid-auto-rows: 260px; } .steps { grid-template-columns: 1fr; } .step__num::after { display: none; } .num-list { grid-template-columns: 1fr; } .form { grid-template-columns: 1fr; } .job { grid-template-columns: 1fr; gap: 12px; } .footer-top { grid-template-columns: 1fr; } .link-grid { grid-template-columns: 1fr; } .cap-tabs { flex-direction: column; align-items: stretch; } .footer-col--news { grid-column: 1 / -1; } .hero__tabs { display: none; } .hero { min-height: 0; } .hero__slide { padding-block: 64px 96px; } .section-head { align-items: start; } .meter__row { grid-template-columns: 96px 1fr 40px; } .btn { height: 48px; padding: 0 22px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } /* ===================================================================== Media Center, Contact, Search, 404, cookie notice, chat, mobile menu ===================================================================== */ .h-light { font-weight: 300; } .page-hero--slim { padding-block: clamp(48px, 6vw, 72px); } .page-hero--tall { padding-block: clamp(96px, 12vw, 170px); } .subnav--family__search { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; } .subnav--family__search .icon { font-size: 15px; } /* Newsroom */ .news-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .news-intro .h2 { margin-bottom: 20px; } .news-intro__media { aspect-ratio: 4 / 3; } .news-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); } .news-split .h2 { margin-bottom: 28px; } .news-list { border-top: 1px solid var(--line); } .news-list li { padding: 22px 0; border-bottom: 1px solid var(--line); } .news-list time { display: block; font-size: 14px; color: var(--muted); margin-bottom: 6px; } .news-list a { font-family: var(--font-head); font-size: 19px; font-weight: 500; line-height: 1.45; color: var(--ink); } .news-list a:hover { color: var(--accent); } .news-split .btn-row { margin-top: 32px; } .social-card { background: #fff; border: 1px solid var(--line); padding: 26px; } .social-card__head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; } .social-card__logo { width: 52px; height: 52px; display: grid; place-items: center; background: var(--mist); border: 1px solid var(--line); } .social-card__head strong { display: block; color: var(--ink); font-size: 16px; } .social-card__head span { font-size: 13.5px; color: var(--muted); } .social-card p { font-size: 15.5px; } .social-card .btn { gap: 8px; } .res-card { border-top: 1px solid var(--line); padding-top: 22px; } .res-card__media { aspect-ratio: 16 / 9; margin-bottom: 22px; } .res-card__media--logo { display: grid; place-items: center; background: var(--mist); border: 1px solid var(--line); padding: 12% 16%; } .res-card h3 { font-size: 21px; font-weight: 500; margin-bottom: 10px; } .design-with { background: color-mix(in srgb, var(--accent) 12%, #ffffff); } .design-with .container { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; padding-block: 56px; text-align: center; } .design-with p { margin: 0; font-family: var(--font-head); font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 400; color: var(--ink); } .news-contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); } .news-contact .h3 { margin-bottom: 12px; } .news-contact__lines a { color: var(--accent); } /* Press releases list */ .news-filters { display: flex; gap: 32px; flex-wrap: wrap; margin-bottom: 18px; } .news-filters__field { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; color: var(--ink); } .news-filters select { height: 44px; min-width: 140px; border: 1px solid var(--line); background: #fff; padding: 0 12px; font: inherit; font-weight: 400; color: var(--text); } .news-count { font-size: 14px; color: var(--muted); margin: 0 0 8px; } .news-list--rows li { padding: 28px 0; } .news-list--rows a { font-size: 20px; } .pager { display: flex; gap: 5px; margin-top: 36px; flex-wrap: wrap; } .pager button { width: 36px; height: 36px; border: 1px solid var(--line); background: #fff; font-size: 14px; color: var(--text); } .pager button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .pager button.is-active { background: var(--ink); border-color: var(--ink); color: #fff; } .pager button:disabled { opacity: .4; cursor: default; } /* Single press release */ .pr { max-width: 1000px; } .pr__back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--accent); margin-bottom: 26px; } .pr__back-ic { display: grid; transform: rotate(90deg); } .pr__title { font-size: clamp(1.7rem, 2.8vw, 2.3rem); font-weight: 400; line-height: 1.3; margin-bottom: 14px; } .pr__date { display: block; color: var(--muted); font-size: 15px; margin-bottom: 26px; } .pr__sub { font-style: italic; font-size: 19px; color: var(--ink); margin-bottom: 30px; } .pr p { font-size: 18px; line-height: 1.7; } .pr h2 { font-size: 22px; font-weight: 600; margin: 40px 0 12px; } .pr__fig { float: left; width: min(420px, 45%); margin: 6px 36px 20px 0; } .pr__img { aspect-ratio: 4 / 5; } .pr__fig figcaption { font-size: 13.5px; color: var(--muted); margin-top: 10px; line-height: 1.5; } .pr__quote { margin: 28px 0; padding-left: 22px; border-left: 3px solid var(--accent); font-size: 19px; color: var(--muted); font-style: italic; } .pr__legal { clear: both; font-size: 14px !important; color: var(--muted); padding-top: 12px; } .pr__meta { display: grid; grid-template-columns: 160px 1fr; gap: 10px 20px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 15.5px; } .pr__meta dt { font-weight: 600; color: var(--ink); } .pr__meta dd { margin: 0; } /* Blog article */ .blog-trail { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 36px; } .blog-trail a { color: var(--accent); } .blog { display: grid; grid-template-columns: minmax(0, 680px) 300px; justify-content: space-between; gap: 64px; } .blog__title { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 500; line-height: 1.25; margin-bottom: 18px; } .blog__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 14.5px; color: var(--muted); padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 30px; } .blog__share { display: flex; gap: 4px; margin-left: auto; } .blog__share a { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); font-size: 16px; color: var(--text); } .blog__share a:hover, .blog__share a.is-done { background: var(--ink); color: #fff; border-color: var(--ink); } .blog__body { font-size: 19px; line-height: 1.7; } .blog__body .blog__lead { font-size: 21px; color: var(--ink); } .blog__body h2 { font-size: 27px; font-weight: 500; margin: 44px 0 14px; scroll-margin-top: var(--pinned); } .blog__body ul { list-style: disc; padding-left: 22px; margin-bottom: 1.2em; } .blog__body li { margin-bottom: 6px; } .blog__body a { color: var(--accent); text-decoration: underline; } .blog__body blockquote { margin: 36px 0; padding: 6px 0 6px 26px; border-left: 3px solid var(--accent); font-family: var(--font-head); font-size: 22px; line-height: 1.5; color: var(--ink); } .blog__body pre { background: var(--ink); color: #e5e7eb; padding: 22px; overflow-x: auto; font-family: var(--font-mono); font-size: 14px; line-height: 1.7; } .blog__fig { margin: 32px 0; } .blog__fig div { aspect-ratio: 16 / 9; } .blog__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); } .blog__side { display: flex; flex-direction: column; gap: 20px; } .side-box { background: #fff; border: 1px solid var(--line); padding: 22px; } .side-box h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; } .side-box p { font-size: 14.5px; color: var(--muted); } .side-author { display: flex; gap: 12px; align-items: center; } .side-author__av { width: 48px; height: 48px; display: grid; place-items: center; background: var(--mist); border: 1px solid var(--line); flex-shrink: 0; } .side-author strong { display: block; color: var(--ink); font-size: 15px; line-height: 1.3; } .side-author span { font-size: 13px; color: var(--muted); } .newsletter--stack { flex-direction: column; gap: 8px; } .newsletter--stack button { width: 100%; } .side-promo { display: block; background: var(--navy); color: #fff; } .side-promo__img { display: block; aspect-ratio: 16 / 9; } .side-promo__text { display: block; padding: 18px 20px 6px; font-family: var(--font-head); font-size: 17px; line-height: 1.4; } .side-promo .link-arrow { color: #fff; padding: 0 20px 20px; } /* Contact */ .locator { background: var(--navy); color: #fff; } .locator .container { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-block: 20px; } .locator label { font-family: var(--font-head); font-size: 17px; } .locator select { height: 46px; min-width: 280px; padding: 0 14px; border: 0; background: #fff; font: inherit; font-size: 15px; color: var(--ink); } .hq { display: grid; grid-template-columns: 1fr 1fr 300px; gap: clamp(28px, 4vw, 48px); align-items: start; } .hq__title { font-size: 26px; font-weight: 500; margin-bottom: 16px; } .hq__col p { font-size: 16.5px; } .hq__col a:not(.link-arrow) { color: var(--accent); } .contacts-card { background: var(--mist); border: 1px solid var(--line); padding: 26px; } .contacts-card h2 { font-size: 18px; font-weight: 600; margin-bottom: 10px; } .contacts-card li { border-bottom: 1px solid var(--line); } .contacts-card li:last-child { border-bottom: 0; } .contacts-card a { display: block; padding: 11px 0; color: var(--accent); font-size: 15.5px; } .contacts-card a:hover { color: var(--ink); } .enquiry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(32px, 5vw, 72px); align-items: start; } .enquiry .ticks { grid-template-columns: 1fr; } .place-box { display: grid; grid-template-columns: 260px 1fr; gap: 36px; align-items: center; border: 1px solid var(--line); background: #fff; padding: 24px; } .place-box__img { aspect-ratio: 4 / 3; } .place-box .h3 { margin-bottom: 8px; } /* 404 */ .err-page { min-height: 0; display: block; text-align: left; background: #fff; } .err-page__title { font-size: clamp(1.9rem, 3.2vw, 2.7rem); font-weight: 400; margin-bottom: 20px; } .err-page__text { max-width: 760px; font-size: 18px; } .err-page__links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px; } .err-page__links a { color: var(--accent); font-weight: 500; } /* Search */ .site-search { display: flex; max-width: 840px; margin: 0 auto; border: 1px solid var(--line); background: #fff; } .site-search input { flex: 1; min-width: 0; height: 52px; border: 0; outline: 0; padding: 0 18px; font: inherit; font-size: 17px; color: var(--ink); } .site-search button { width: 56px; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 20px; } .site-search button:hover { background: var(--accent); } .site-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .site-search--inline { margin: 32px 0 0; max-width: 560px; } .search-page { background: #fff; } .search-page__title { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 400; margin-bottom: 32px; } .search-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 28px; max-width: 840px; margin: 28px auto 0; border-bottom: 1px solid var(--line); } .search-tabs button { padding: 12px 0; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; } .search-tabs button.is-active { color: var(--ink); border-color: var(--accent); } .search-summary { max-width: 840px; margin: 22px auto 0; font-size: 15px; color: var(--muted); } .search-results { max-width: 840px; margin: 8px auto 0; } .search-result { padding: 24px 0; border-bottom: 1px solid var(--line); } .search-result__type { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .search-result__title { font-family: var(--font-head); font-size: 20px; font-weight: 500; color: var(--accent); } .search-result__title:hover { text-decoration: underline; } .search-result__url { display: block; font-size: 13.5px; color: #2f7d4f; margin: 2px 0 8px; } .search-result p { font-size: 15.5px; margin: 0; } .search-result mark { background: color-mix(in srgb, var(--accent) 18%, #ffffff); color: inherit; padding: 0 1px; } .search-empty { max-width: 840px; margin: 24px auto 0; } .search-empty ul { list-style: disc; padding-left: 22px; } /* Cookie notice */ .cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; background: #fff; box-shadow: 0 0 18px rgba(0, 0, 0, 0.2); } .cookie-bar[hidden] { display: none; } .cookie-bar .container { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 32px; align-items: center; padding-block: 24px; } .cookie-bar h2 { font-family: var(--font-body); font-size: 15px; font-weight: 600; margin-bottom: 6px; } .cookie-bar p { font-size: 13px; line-height: 1.6; margin: 0; } .cookie-bar a { color: var(--accent); } .cookie-bar__actions { display: flex; flex-direction: column; gap: 10px; } .cookie-bar__actions .btn { width: 100%; justify-content: center; } .cookie-modal { position: fixed; inset: 0; z-index: 310; background: rgba(9, 12, 34, 0.6); display: grid; place-items: center; padding: 16px; } .cookie-modal[hidden] { display: none; } .cookie-modal__box { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; padding: 28px; box-shadow: var(--shadow-lg); } .cookie-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .cookie-modal__head h2 { font-size: 21px; font-weight: 600; } .cookie-modal__box > p { font-size: 14.5px; } .cookie-opt { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); cursor: pointer; } .cookie-opt strong { display: block; color: var(--ink); font-size: 15px; } .cookie-opt span { font-size: 13.5px; color: var(--muted); } .cookie-opt__always { font-size: 13px !important; font-weight: 600; color: var(--accent) !important; white-space: nowrap; } .switch { appearance: none; -webkit-appearance: none; width: 42px; height: 24px; border-radius: 12px; background: var(--mist-2); position: relative; flex-shrink: 0; cursor: pointer; transition: background .2s; } .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .2s; } .switch:checked { background: var(--accent); } .switch:checked::after { transform: translateX(18px); } .switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .cookie-modal__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); } .footer-cookie-btn { padding: 0; font: inherit; color: inherit; text-align: left; } .footer-cookie-btn:hover { color: var(--accent); } /* Chat widget */ .chat-fab { position: fixed; right: 24px; bottom: 24px; z-index: 95; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 40%, transparent); transition: transform .2s, background .2s; } .chat-fab:hover { transform: scale(1.06); background: var(--accent-2); } .back-top { right: calc(24px + 26px - 17.5px); bottom: 88px; } /* centred over the chat button */ .chat { position: fixed; right: 24px; bottom: 88px; z-index: 96; width: min(400px, calc(100vw - 32px)); height: min(560px, calc(100vh - 120px)); display: flex; flex-direction: column; background: #fff; border-radius: 12px 12px 0 0; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); overflow: hidden; } .chat[hidden] { display: none; } .chat__head { display: flex; align-items: center; gap: 6px; padding: 14px 12px 14px 16px; background: var(--grad); color: var(--on-accent); } .chat__who { display: flex; align-items: center; gap: 10px; margin-right: auto; } .chat__av { width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; } .chat__who strong { display: block; font-size: 15px; line-height: 1.2; } .chat__who span { font-size: 12.5px; opacity: .85; } .chat__btn { width: 32px; height: 32px; display: grid; place-items: center; color: inherit; font-size: 20px; border-radius: 4px; } .chat__btn:hover { background: rgba(255, 255, 255, 0.18); } .chat__btn .icon { font-size: 18px; } .chat__log { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--mist); } .chat__msg { max-width: 85%; padding: 10px 14px; font-size: 14.5px; line-height: 1.5; border-radius: 12px; } .chat__msg--bot { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 2px; color: var(--text); } .chat__msg--bot a { color: var(--accent); text-decoration: underline; } .chat__msg--you { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 2px; } .chat__quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line); } .chat__quick button { padding: 6px 12px; border: 1px solid var(--accent); color: var(--accent); border-radius: 16px; font-size: 13px; } .chat__quick button:hover { background: var(--accent); color: var(--on-accent); } .chat__form { display: flex; border-top: 1px solid var(--line); } .chat__form input { flex: 1; min-width: 0; height: 50px; border: 0; outline: 0; padding: 0 16px; font: inherit; font-size: 15px; } .chat__form button { width: 50px; color: var(--accent); display: grid; place-items: center; font-size: 18px; } .chat__form button:hover { color: var(--accent-2); } /* Mobile menu: search at the top, large items, slides in from the right */ .nav__search { display: none; } @media (max-width: 1024px) { .nav { transform: translateX(16px); } .nav-open .nav { transform: none; } .nav__search { display: flex; margin: 8px 0 12px; border: 1px solid var(--line); } .nav__search input { flex: 1; min-width: 0; height: 46px; border: 0; outline: 0; padding: 0 14px; font: inherit; font-size: 16px; } .nav__search button { width: 48px; display: grid; place-items: center; font-size: 18px; color: var(--ink); } .nav__link { font-size: 22px; font-weight: 400; } .news-intro, .news-split, .news-contact, .enquiry { grid-template-columns: 1fr; } .hq { grid-template-columns: 1fr 1fr; } .contacts-card { grid-column: 1 / -1; } .blog { grid-template-columns: minmax(0, 1fr); gap: 48px; } .blog__side { display: grid; grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { .hq, .place-box { grid-template-columns: 1fr; } .pr__fig { float: none; width: 100%; margin: 0 0 24px; } .pr__img { aspect-ratio: 16 / 10; } .pr__meta { grid-template-columns: 1fr; gap: 2px; } .pr__meta dd { margin-bottom: 12px; } .blog__side { grid-template-columns: 1fr; } .blog__share { margin-left: 0; width: 100%; } .cookie-bar .container { grid-template-columns: 1fr; gap: 16px; padding-block: 18px; } .cookie-bar p { font-size: 12.5px; max-height: 30vh; overflow-y: auto; } .locator select { min-width: 0; width: 100%; } .news-filters { gap: 12px; } .news-filters__field { width: 100%; justify-content: space-between; } .news-filters select { flex: 1; } .chat { right: 16px; bottom: 84px; } .chat-fab { right: 16px; bottom: 16px; } .back-top { right: calc(16px + 26px - 17.5px); bottom: 80px; } } /* ---------- Cadence typography: home page sections + footer ---------- Measured from cadence.com. Cadence uses Rubik throughout: Light (300) for large headings and body copy, Regular (400) for tile titles and links, Medium (500) for card titles and buttons. Sizes already matched; these rules switch the typeface and correct the weights that differed. */ [data-page="home"] { --font-head: var(--font-nav); --font-body: var(--font-nav); } [data-page="home"] main { font-family: var(--font-nav); } /* hero: H1 Light 48.6px, text Light 18px, button Medium 14.4px */ [data-page="home"] main .btn { line-height: 23.04px; } /* Pioneering Engineering Services tiles: title Regular 28.8px, "Learn more" Regular 18px/27px */ [data-page="home"] .tiles--cadence .tile h3 { font-weight: 400; } [data-page="home"] .tile__link { line-height: 27px; } /* What We Can Do for You: active tab Medium 40px, other tab Light 27px, both 0.72px tracking */ [data-page="home"] #capabilities .cap-box__tab { letter-spacing: 0.72px; } /* What's New: label Regular-bold 12px, title Medium 18px, text Light 16.2px, "Learn more" Medium 14.4px */ [data-page="home"] #whats-new .post-card__label { font-weight: 700; } [data-page="home"] #whats-new .post-card__more span { line-height: 23.04px; } /* Engineering-Led Innovation: heading Light 36px, text Light 18px, "Read more" Regular 18px/27px */ [data-page="home"] #lifecycle .section-head .link-arrow { line-height: 27px; } /* Culture and People / Get the Help You Need: outline buttons Regular 14px/20px */ [data-page="home"] main .btn--ghost { line-height: 20px; } /* Footer (shared by every page, so it changes site-wide): column heads Light 24px, award titles Regular 18px, links Regular 14.4px, form labels Light 18px, bottom row Light 14.4px */ .site-footer { font-family: var(--font-nav); } .site-footer h4, .site-footer strong, .site-footer button, .site-footer input { font-family: var(--font-nav); } .site-footer .footer-bottom a, .site-footer .footer-bottom span, .site-footer .footer-cookie-btn { font-weight: 300; } .footer-lang { font-size: 14.4px; line-height: 16.8px; letter-spacing: 0.48px; } .site-footer .footer-bottom span:not(.footer-lang) { line-height: 23.04px; } .site-footer form button[type="submit"] { line-height: 26px; } /* ---------- Phone menu: Cadence-style slide-in panel with drill-down levels (built by main.js) ---------- Measured from cadence.com at 375px: panel 330px wide from the right with a soft shadow, top-level items Rubik Light 24px, group buttons Rubik Medium 13px capitals, items Medium 14px + Regular 12px. */ .mnav { display: none; } @media (max-width: 1024px) { .nav { display: none !important; } /* replaced by the panel below */ .mnav { display: block; position: fixed; top: 0; right: 0; bottom: 0; z-index: 200; width: min(330px, calc(100% - 45px)); background: #fff; color: var(--nav-ink); font-family: var(--font-nav); box-shadow: 0 2px 100px rgba(17, 17, 17, 0.5); overflow: hidden; transform: translateX(calc(100% + 120px)); visibility: hidden; transition: transform .5s var(--ease), visibility .5s; } .nav-open .mnav { transform: none; visibility: visible; } .mnav__ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .mnav__bar { position: absolute; left: 15px; top: 18px; z-index: 2; width: 28px; height: 8px; background: var(--grad); } .mnav__close { position: absolute; right: 20px; top: 24px; z-index: 2; width: 25px; height: 25px; display: grid; place-items: center; color: var(--nav-ink); } .mnav__close .mnav__ic { width: 25px; height: 25px; } /* levels slide sideways */ .mnav__views { position: absolute; inset: 0; } .mnav__view { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: #fff; transition: transform .4s var(--ease), visibility .4s; } .mnav__view.is-left { transform: translateX(-100%); visibility: hidden; } .mnav__view.is-right { transform: translateX(100%); visibility: hidden; } /* top block: search (level 1) or back link (deeper levels), divider below */ .mnav__head { padding: 88px 15px 12px; border-bottom: 0.8px solid #e5e5e5; } .mnav__search { display: flex; align-items: center; height: 33px; } .mnav__search button { width: 36px; height: 30px; display: grid; place-items: center; color: var(--nav-ink); } .mnav__search input { flex: 1; min-width: 0; height: 33px; border: 0; outline: 0; background: none; padding: 0 0 0 4px; font: 400 16px/1 var(--font-nav); color: var(--nav-ink); } .mnav__search input::placeholder { color: #999; } .mnav__back { position: relative; display: inline-flex; align-items: center; padding: 1px 6px 1px 30px; font: 400 18px/28.8px var(--font-nav); letter-spacing: 0.72px; color: var(--nav-ink); } .mnav__back .mnav__ic { position: absolute; left: 4px; width: 18px; height: 18px; } /* level 1: AI / Products / Solutions / Support / Company */ .mnav__list { padding: 24px 10px 24px 33px; } .mnav__list li + li { margin-top: 15px; } .mnav__top { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 4px 12px; font: 300 24px/32px var(--font-nav); color: var(--nav-ink); text-align: left; } .mnav__extras { border-top: 0.8px solid #e5e5e5; padding: 32px 24px; } .mnav__extras .btn { width: 100%; height: 47px; } /* level 2 */ .mnav__body { padding: 24px 10px 32px 33px; } .mnav__title { margin: 0 0 14px; padding: 4px 12px; font: 300 24px/32px var(--font-nav); letter-spacing: -0.48px; color: var(--nav-ink); } .mnav__group { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; text-align: left; font: 500 13px/24px var(--font-nav); letter-spacing: 1.755px; text-transform: uppercase; color: var(--nav-ink); } .mnav__group .mnav__ic { width: 18px; height: 18px; } .mnav__glabel { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0 8px 12px; font: 500 13px/18.2px var(--font-nav); letter-spacing: 1.3px; text-transform: uppercase; color: var(--nav-ink); } .mnav__glabel .mnav__ic { width: 16px; height: 16px; } .mnav__section + .mnav__section { margin-top: 40px; } .mnav__links a { display: block; padding: 9.5px 12px 9.5px 25px; } .mnav__groups + .mnav__links { margin-top: 16px; } .mnav__it { display: block; font: 500 14px/26px var(--font-nav); color: var(--nav-ink); } .mnav__id { display: block; font: 400 12px/18.72px var(--font-nav); letter-spacing: 0.48px; color: #5e6366; } /* level 3: items with descriptions beside a thin line */ .mnav__items { margin: 8px 0 0 12px; border-left: 0.8px solid #d7dde0; } .mnav__items a { display: block; padding: 10px 12px 9px 13px; } .mnav a:hover, .mnav button:not(.mnav__close):hover { background: #f5f5f5; } .mnav .btn:hover { background: var(--grad); background-position: 100% 0; } .mnav :focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } } /* ---------- AI sub-header (partials/ai-subnav.html): Cadence-style context bar ---------- Measured from cadence.com (ChipStack AI page): 48px white bar with a 2px #f5f5f5 line under it; items Rubik Medium 14px capitals, 15px side padding, light grey hover; dropdowns 235px wide, items Rubik Regular 16px #777, grey hover. Builds on .subnav--family for the sticky position. */ .subnav--ctx { border-bottom: 2px solid #f5f5f5; } .subnav--ctx .container { height: 48px; justify-content: flex-start; gap: 0; } .subnav--ctx .container > a, .subnav--ctx .fam-dd__toggle { display: flex; align-items: center; height: 48px; margin: 0; padding: 0 15px; font: 500 14px/16px var(--font-nav); letter-spacing: normal; text-transform: uppercase; color: #707070; white-space: nowrap; transition: background-color .2s; } .subnav--ctx .container > a.ctx__home { margin-left: -15px; line-height: 18px; color: var(--nav-ink); } .subnav--ctx .container > a:hover, .subnav--ctx .fam-dd__toggle:hover, .subnav--ctx .fam-dd.is-open .fam-dd__toggle { background: #f5f5f5; color: #707070; } .subnav--ctx .container > a.ctx__home:hover { color: var(--nav-ink); } .subnav--ctx .fam-dd { margin: 0; } .subnav--ctx .fam-dd__toggle { gap: 5px; } .subnav--ctx .fam-dd__toggle .icon { font-size: 16px; stroke-width: 2; } .subnav--ctx .fam-dd__menu { left: 0; top: 100%; width: 235px; min-width: 0; padding: 5px 0; border: 0; box-shadow: 0 6px 8px rgba(34, 34, 34, 0.1); } .subnav--ctx .fam-dd__menu a { padding: 7px 50px 7px 16px; font: 400 16px/1.3 var(--font-nav); letter-spacing: 0.72px; color: #777; white-space: normal; } .subnav--ctx .fam-dd__menu a:hover { background: #f5f5f5; color: var(--nav-ink); } .subnav--ctx :focus-visible { outline: 4px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: -5px; border-radius: 0; } /* ====================================================================== ChipStack AI page (pages/chipstack-ai.html). Layout, fonts and sizes measured from the ChipStack AI page on cadence.com at 1920px; colours follow the PulseWave theme (gradient buttons and accents, accent links). ====================================================================== */ [data-page="chipstack"] { --font-head: var(--font-nav); --font-body: var(--font-nav); } [data-page="chipstack"] main { font-family: var(--font-nav); color: var(--nav-ink); background: #fff; } /* section links bar: Rubik Medium 14px, 50px tall, PulseWave-gradient Contact Us button 32px tall */ /* 50px in total, as on Cadence: 48.4px bar + 1.6px bottom border in the same #f5f5f5 as the background */ .cs-pagenav { background: #f5f5f5; border-bottom: 1.6px solid #f5f5f5; } .cs-pagenav .container { height: 48.4px; min-height: 0; } .cs-pagenav .subnav__links { gap: 0; height: 100%; } .cs-pagenav .subnav__links a { display: flex; align-items: center; height: 48.4px; margin: 0; padding: 0 15px; font: 500 14px/16px var(--font-nav); letter-spacing: 0.72px; color: #707070; } .cs-pagenav .subnav__links a:first-child { margin-left: -15px; } .cs-pagenav .subnav__links a { border-bottom: 0; } .cs-pagenav .subnav__links a:hover { color: var(--accent); } /* Cadence-style active link: a 2px line exactly as wide as the text (inside the 15px side padding), sitting on the bar bottom */ .cs-pagenav .subnav__links a { position: relative; } .cs-pagenav .subnav__links a::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform .2s; } .cs-pagenav .subnav__links a.is-active { color: var(--nav-ink); } .cs-pagenav .subnav__links a.is-active::after { transform: scaleX(1); } .cs-pagenav .btn--sm { height: 32px; padding: 6px 16px 6px 18px; font: 500 14px/20px var(--font-nav); letter-spacing: 1.68px; } /* hero: 560px, title Light 48.6px, subtitle Light 18px, two 45px buttons 30px apart */ .cs-hero { position: relative; min-height: 560px; display: flex; align-items: flex-end; padding-bottom: 81px; background: var(--navy); color: #fff; overflow: hidden; } .cs-hero__art { position: absolute; inset: 0 0 0 38%; background: url("../img/photos/ai.jpg") center/cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%); opacity: .9; } .cs-hero .container { position: relative; } .cs-hero__title { margin: 0 0 14px; font: 300 48.6px/72.9px var(--font-nav); letter-spacing: -0.972px; color: #fff; } .cs-hero__sub { margin: 0 0 12px; font: 300 18px/27px var(--font-nav); letter-spacing: 0.72px; color: #fff; } .cs-hero__btns { display: flex; flex-wrap: wrap; gap: 15px 30px; } .cs-hero__btns .btn { height: 45px; padding: 12px 30px 10px; font: 500 14.4px/23.04px var(--font-nav); letter-spacing: 1.728px; } .cs-btn--white { background: #fff; color: var(--nav-ink); border: 1px solid transparent; } /* hover as on Cadence: turns transparent with a thin white outline and white text */ .cs-btn--white:hover, .cs-btn--white:focus-visible { background: transparent; border-color: #fff; color: #fff; } /* sections: text column 850px, wide column 1070px, both starting 543px left of the page centre */ .cs-sec { position: relative; padding: 48px 0; } .cs-sec--first { padding-top: 96px; } .cs-col { position: relative; width: min(850px, calc(100% - 2 * var(--gutter))); margin-left: max(var(--gutter), calc(50% - 543px)); } .cs-col--wide { width: min(1070px, calc(100% - 2 * var(--gutter))); } .cs-col--narrow { width: min(740px, calc(100% - 2 * var(--gutter))); } /* Agentic Workflows intro, as on Cadence */ /* Resources and Latest News/Blogs sit on the light grey band of Cadence; Related Products has a 96px bottom */ .cs-sec--grey { background: #f5f5f5; } .cs-sec--related { padding-bottom: 96px; } .cs-sec--resources { padding: 96px 0 48px; } .cs-center { text-align: center; } .cs-cubes { position: absolute; top: 48px; left: calc(50% + 337px); width: 190px; opacity: .55; pointer-events: none; } .cs-sec--first .cs-cubes { top: 96px; } /* weight 350: the Rubik Regular file Cadence serves is lighter than Google Rubik 400 */ .cs-label { display: block; margin: 0 0 16px; font: 350 12px/24px var(--font-nav); letter-spacing: 2.88px; text-transform: uppercase; color: #707070; } .cs-h2 { margin: 8px 0 24px; font: 300 36px/43.2px var(--font-nav); letter-spacing: -0.72px; color: var(--nav-ink); } .cs-col p { margin: 0 0 16px; font: 300 18px/28.8px var(--font-nav); letter-spacing: 0.72px; color: var(--nav-ink); } .cs-morebtn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 10px 10px 0; font: 500 18px/25px var(--font-nav); color: var(--nav-ink); } .cs-morebtn .icon { font-size: 18px; stroke-width: 2; transition: transform .2s; } .cs-morebtn[aria-expanded="true"] .icon { transform: rotate(180deg); } .cs-morebtn:hover { color: var(--accent); } /* diagram (850 wide), PulseWave colours */ .cs-diagram { margin: 32px 0 0; max-width: 850px; font-family: var(--font-nav); font-size: 12px; color: #fff; } .cs-dg__prompt { width: 60%; margin: 0 auto 14px; display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: #4a4f57; } .cs-dg__prompt code { flex: 1; padding: 4px 8px; background: #1b1e24; font: 11px var(--font-mono); color: #fff; } .cs-dg__row { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; } .cs-dg__inputs { display: grid; gap: 6px; padding: 10px; background: #e9ecef; color: var(--nav-ink); text-align: center; } .cs-dg__inputs strong { font-weight: 500; } .cs-dg__inputs span { padding: 5px 4px; background: #4a4f57; color: #fff; font-size: 10.5px; } .cs-dg__agent { padding: 12px; background: var(--grad); } .cs-dg__title { margin-bottom: 10px; text-align: center; font-size: 17px; font-weight: 300; } .cs-dg__cols { display: grid; grid-template-columns: 1.5fr 1fr 0.9fr; gap: 10px; } .cs-dg__panel { display: grid; align-content: start; gap: 8px; padding: 10px; background: rgba(12, 17, 29, .55); text-align: center; } .cs-dg__panel b { font-weight: 400; font-size: 13px; } .cs-dg__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .cs-dg__steps span { padding: 5px 2px; background: rgba(255, 255, 255, .18); } .cs-dg__words { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 4px; font-size: 10.5px; opacity: .9; } .cs-dg__core { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; place-items: center; font-size: 10.5px; } .cs-dg__core i { grid-row: 2; grid-column: 1 / 3; width: 56px; height: 56px; margin: 10px 0; background: var(--grad); transform: rotate(45deg); box-shadow: 0 0 0 6px rgba(255, 255, 255, .15); } .cs-dg__core span:first-child { grid-column: 1 / 3; } .cs-dg__func span { padding: 4px 2px; background: rgba(255, 255, 255, .92); color: var(--nav-ink); font-size: 10.5px; } .cs-dg__eda { width: 62%; margin: 14px auto 0; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: color-mix(in srgb, var(--accent) 80%, #0c111d); } .cs-dg__eda span { margin-right: auto; } .cs-dg__eda em { padding: 3px 8px; background: rgba(12, 17, 29, .5); font-style: normal; font-size: 10.5px; } /* key benefits: three 337px columns, 50px icon, title Medium 18px, text Light 16.2px */ .cs-benefits { display: grid; grid-template-columns: repeat(3, 337px); gap: 30px; margin-top: 51px; width: min(1071px, calc(100vw - 2 * var(--gutter))); } .cs-benefit { padding: 16px; } .cs-benefit .icon { font-size: 50px; stroke-width: 1.2; color: var(--accent); } .cs-benefit h5 { margin: 40px 0 16px; font: 500 18px/25.2px var(--font-nav); color: var(--nav-ink); } .cs-col .cs-benefit p { margin: 0 0 12px; font: 300 16.2px/25.92px var(--font-nav); letter-spacing: 0.648px; color: var(--nav-ink); } /* agentic workflows accordion: 62px rows, Light 18px, thin #d7dde0 lines, 20px chevron */ .cs-acc { margin-top: 141px; border-bottom: 0.8px solid #d7dde0; } .cs-acc .acc { border: 0; border-top: 0.8px solid #d7dde0; } .cs-acc .acc__head { position: relative; display: block; padding: 16px 52px 16px 16px; font: 400 18px/28.8px var(--font-nav); letter-spacing: 0.72px; /* Rubik Regular, as on Cadence */ color: var(--nav-ink); background: #fff; } .cs-acc .acc__head:hover { color: var(--accent); } .cs-acc .acc__head .icon { position: absolute; right: 16px; top: 50%; margin-top: -10px; font-size: 20px; stroke-width: 2; transition: transform .25s; } .cs-acc .acc.is-open .acc__head .icon { transform: rotate(180deg); } .cs-col .cs-acc .acc__body p { margin: 0; padding: 0 52px 20px 16px; font: 300 16.2px/25.92px var(--font-nav); letter-spacing: 0.648px; color: var(--nav-ink); } /* cards: 337px, thin border, gradient dash, title Medium 18px, text Light 16.2px grey, CTA pinned 30px from bottom */ .cs-cards { display: grid; grid-template-columns: repeat(3, 337px); gap: 32px 30px; margin-top: 56px; } /* 56px below the heading (margins collapse), 32px between rows */ .cs-card { position: relative; display: block; padding: 40px 33px 69px; background: #fff; border: 0.8px solid #d7dde0; transition: box-shadow .2s; } .cs-cards--res .cs-card { padding-bottom: 52px; } /* cards size to their text, as on Cadence */ .cs-dash { display: block; width: 28px; height: 8px; margin-bottom: 32px; background: var(--grad); } .cs-card h5 { margin: 0 0 16px; font: 500 18px/25.2px var(--font-nav); color: var(--nav-ink); } .cs-col .cs-card p { margin: 0 0 40px; font: 300 16.2px/25.92px var(--font-nav); letter-spacing: 0.648px; color: #707070; } .cs-cta { position: absolute; left: 33px; bottom: 30px; display: inline-flex; align-items: center; gap: 8px; font: 500 14.4px/16px var(--font-nav); letter-spacing: 1.728px; text-transform: uppercase; color: var(--nav-ink); } .cs-cta .icon { font-size: 16px; stroke-width: 2.2; transition: transform .2s; } /* hover, as on Cadence: 1px gradient outline, heading filled with the gradient, coloured CTA, arrow nudges right. Related Products use the PulseWave blue-purple gradient; Resources use the blue to light-blue gradient of Cadence. */ .cs-card { --cs-hover-grad: linear-gradient(240.64deg, var(--accent-2) 0%, var(--accent) 100%); --cs-hover-ink: var(--accent); } .cs-cards--res .cs-card { --cs-hover-grad: linear-gradient(238.25deg, #2dccd3 0%, #147bd1 103.82%); --cs-hover-ink: #0c72c7; } .cs-card:hover, .cs-card:focus-visible { border: 1px solid transparent; border-image: var(--cs-hover-grad) 1; } .cs-card:hover h5, .cs-card:focus-visible h5 { background: var(--cs-hover-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .cs-card:hover .cs-cta, .cs-card:focus-visible .cs-cta { color: var(--cs-hover-ink); } .cs-card:hover .cs-cta .icon, .cs-card:focus-visible .cs-cta .icon { transform: translateX(5px); } /* latest news / blogs: two 520px columns; posts with a gradient dash, Regular 18px title, Light meta */ .cs-sec--news { padding-bottom: 96px; } .cs-news { display: grid; grid-template-columns: repeat(2, minmax(0, 520px)); gap: 30px; } /* 50px heading row with a thin #e2e2e2 line under it, then 30px to the first post (as on Cadence) */ .cs-news__head { padding: 8px 0; border-bottom: 0.8px solid #e2e2e2; display: flex; align-items: center; justify-content: space-between; } .cs-news__head h2 { margin: 0; font: 400 23.4px/32.76px var(--font-nav); letter-spacing: -0.468px; color: var(--nav-ink); } .cs-news__head a { display: inline-flex; align-items: center; gap: 6px; font: 400 16px/25.6px var(--font-nav); text-transform: uppercase; color: var(--accent); } .cs-news__head a .icon { position: relative; left: 0; transform: rotate(-90deg); font-size: 16px; stroke-width: 2; transition: left .2s linear; } /* View All hover, as on Cadence: the arrow slides 5px right and the link darkens */ .cs-news__head a:hover { color: color-mix(in srgb, var(--accent) 65%, #0c111d); } .cs-news__head a:hover .icon { left: 5px; } .cs-post { position: relative; display: block; margin-top: 30px; padding: 37px 15px 47px; background: #fff; border: 0.8px solid #e2e2e2; transition: box-shadow .2s; } .cs-post:hover { box-shadow: var(--shadow); } /* as on Cadence: 22x7 dash 16px from the top, title at the top padding, date line pinned in the bottom padding */ .cs-post .cs-dash { position: absolute; top: 16px; left: 15px; width: 22px; height: 7px; margin: 0; } .cs-post .cs-meta { position: absolute; left: 15px; bottom: 6px; } .cs-col .cs-post__title { margin: 0; font: 400 18px/28.8px var(--font-nav); letter-spacing: 0.72px; color: #333; } .cs-post:hover .cs-post__title { color: var(--accent); } .cs-meta { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; } .cs-meta li { padding-right: 15px; font: 300 16px/25.6px var(--font-nav); letter-spacing: 0.64px; color: #707070; } .cs-meta li + li { padding-left: 15px; border-left: 1px solid #b5b5b5; line-height: 14px; } .cs-meta .cs-meta__cat { font-size: 14px; letter-spacing: 2.8px; text-transform: uppercase; } @media (max-width: 1180px) { .cs-benefits, .cs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; } .cs-cubes { display: none; } } @media (max-width: 760px) { .cs-hero { min-height: 460px; padding-bottom: 48px; } .cs-hero__art { inset: 0; opacity: .35; -webkit-mask-image: none; mask-image: none; } .cs-hero__title { font-size: 34px; line-height: 44px; } .cs-h2 { font-size: 28px; line-height: 36px; } .cs-benefits, .cs-cards, .cs-news { grid-template-columns: 1fr; } .cs-dg__row, .cs-dg__cols { grid-template-columns: 1fr; } .cs-dg__prompt, .cs-dg__eda { width: 100%; flex-wrap: wrap; } } /* ---------- Phone and tablet versions of the AI sub-header and the ChipStack section bar ---------- Measured from cadence.com at 375px: an AI row (49px, white) with an icon that opens a full-width slide-in panel, then a section row (52px, #f5f5f5) that opens a dropdown of section links plus a full-width Contact Us button. */ .ctx-m, .cs-pagenav__toggle { display: none; } .cs-pagenav__menu { display: contents; } /* slide-in panel built by main.js from the AI sub-header dropdowns */ .ctxp { display: none; } @media (max-width: 1024px) { /* AI row */ .subnav--ctx { display: block; } .subnav--ctx > .container { display: none; } .ctx-m { display: flex; align-items: center; justify-content: space-between; height: 48.4px; padding: 0 13px 0 15px; } .subnav--ctx .ctx-m .ctx-m__home { margin: 0; padding: 0; font: 500 14px/18px var(--font-nav); letter-spacing: normal; text-transform: uppercase; color: var(--nav-ink); } .ctx-m__open { width: 24px; height: 24px; display: grid; place-items: center; color: #969ea3; } .ctx-m__open svg, .ctxp__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ctx-m__open:hover { color: var(--nav-ink); } body:has(.subnav--ctx) { --pinned: calc(var(--header-h) + 50px + 62px); } body:has(.subnav--ctx) .subnav--page { top: calc(var(--header-top) + 50px); } .ctxp { display: block; position: fixed; top: 0; right: 0; bottom: 0; z-index: 210; width: min(375px, 100%); background: #fff; color: var(--nav-ink); font-family: var(--font-nav); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 2px 100px rgba(17, 17, 17, 0.5); transform: translateX(calc(100% + 120px)); visibility: hidden; transition: transform .5s var(--ease), visibility .5s; } .ctx-open .ctxp { transform: none; visibility: visible; } .ctx-open { overflow: hidden; } .ctxp__head { position: relative; height: 134px; border-bottom: 0.8px solid #e5e5e5; } .ctxp__bar { position: absolute; left: 15px; top: 18px; width: 28px; height: 8px; background: var(--grad); } .ctxp__close { position: absolute; right: 18px; top: 25px; width: 24px; height: 24px; display: grid; place-items: center; color: var(--nav-ink); } .ctxp__close svg { width: 24px; height: 24px; } .ctxp__title { position: absolute; left: 0; top: 88px; margin: 0; padding: 0 27px; font: 300 24px/29px var(--font-nav); letter-spacing: 0.96px; color: var(--nav-ink); } .ctxp__groups { padding: 18px 0 40px; } .ctxp__group + .ctxp__group { margin-top: 20px; } .ctxp__glabel { display: block; padding: 15px 15px 5px 45px; font: 500 13.5px/16px var(--font-nav); letter-spacing: 1.35px; text-transform: uppercase; color: var(--nav-ink); } .ctxp__groups a { display: block; padding: 15px 15px 5px 45px; font: 500 14px/24px var(--font-nav); color: var(--nav-ink); } .ctxp__groups a:hover { color: var(--accent); } .ctxp :focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* ChipStack section bar: one 52px row that opens a dropdown */ .cs-pagenav { background: #f5f5f5; } .cs-pagenav .container { position: relative; display: block; height: auto; padding: 0; } .cs-pagenav__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 52px; padding: 0 11px 0 15px; font: 500 14px/18px var(--font-nav); text-transform: uppercase; color: var(--nav-ink); text-align: left; } .cs-pagenav__toggle svg { width: 24px; height: 24px; fill: none; stroke: #969ea3; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; } .cs-pagenav.is-open .cs-pagenav__toggle svg { transform: rotate(180deg); } /* opens and closes by animating its height over 0.35s (main.js sets the height), as on Cadence; the page below dims in step */ .cs-pagenav__menu { display: block; position: absolute; left: 0; right: 0; top: 100%; height: 0; overflow: hidden; visibility: hidden; padding: 0 15px; background: #fff; box-shadow: 0 0 0 100vmax rgba(22, 22, 22, 0); clip-path: inset(0 -100vmax -100vmax -100vmax); transition: height .35s ease, visibility .35s, box-shadow .35s ease; } .cs-pagenav.is-open .cs-pagenav__menu { visibility: visible; box-shadow: 0 0 0 100vmax rgba(22, 22, 22, 0.5); } .cs-pagenav__menu .subnav__links { margin-top: 4px; } .cs-pagenav__menu .btn--sm { margin-bottom: 15px; } .cs-pagenav .cs-pagenav__menu .subnav__links { display: block; height: auto; overflow: visible; } .cs-pagenav .cs-pagenav__menu .subnav__links a { display: block; height: auto; margin: 0; padding: 12px 0; font: 400 16px/25.6px var(--font-nav); letter-spacing: 0.64px; color: var(--nav-ink); } .cs-pagenav .cs-pagenav__menu .subnav__links a:first-child { margin-left: 0; } .cs-pagenav .cs-pagenav__menu .subnav__links a::after { display: none; } .cs-pagenav .cs-pagenav__menu .subnav__links a.is-active, .cs-pagenav .cs-pagenav__menu .subnav__links a:hover { color: var(--accent); } .cs-pagenav .cs-pagenav__menu .btn--sm { display: flex; width: 100%; height: 47px; margin-top: 12px; padding: 12px 30px 10px; font: 500 14.4px/23.04px var(--font-nav); letter-spacing: 1.728px; } } /* ====================================================================== Design for AI page (pages/design-for-ai.html). Reuses the ChipStack page parts (cs-*) and adds the pieces measured from the Design for AI page on cadence.com at 1920px. Colours follow the PulseWave theme. ====================================================================== */ [data-page="ai"] { --font-head: var(--font-nav); --font-body: var(--font-nav); } [data-page="ai"] main { font-family: var(--font-nav); color: var(--nav-ink); background: #fff; } .cs-cubes--tall { width: 190px; } /* overview tabs: centred row of 18px tabs, 40px apart, active one dark with a 1.6px underline */ .dfa-tabs { display: flex; justify-content: center; margin-top: 62px; border-bottom: 0.8px solid #ddd; } .dfa-tab { height: 50.4px; margin: 0 40px -0.8px 0; padding: 0; border-bottom: 1.6px solid transparent; font: 400 18px/28.8px var(--font-nav); letter-spacing: 0.72px; color: #707070; transition: color .2s, border-color .2s; } .dfa-tab:last-child { margin-right: 0; } .dfa-tab:hover { color: var(--nav-ink); } .dfa-tab.is-active { color: var(--nav-ink); border-bottom-color: var(--nav-ink); } .dfa-panel { display: none; } .dfa-panel.is-active { display: block; } .dfa-panel h3 { margin: 8px 0 24px; padding-top: 15px; font: 400 28.8px/40.32px var(--font-nav); letter-spacing: -0.576px; color: var(--nav-ink); } .cs-col .dfa-panel p { margin: 0 0 16px; font: 300 18px/28.8px var(--font-nav); letter-spacing: 0.72px; color: var(--nav-ink); } .dfa-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font: 500 14.4px/23.04px var(--font-nav); letter-spacing: 1.728px; text-transform: uppercase; color: var(--nav-ink); } .dfa-more .icon { font-size: 16px; stroke-width: 2.2; transition: transform .2s; } .dfa-more:hover { color: var(--accent); } .dfa-more:hover .icon { transform: translateX(5px); } /* applications: 238px vertical list (thin grey line, active item dark with a dark left line) + panel */ .dfa-sec--apps { padding: 93px 0 76px; } .dfa-apps { display: grid; grid-template-columns: 238px minmax(0, 1fr); column-gap: 30px; align-items: start; margin-top: 69px; } .dfa-apps__list { border-left: 1.6px solid #ebeef0; } .dfa-app { display: block; width: 100%; margin-left: -1.6px; padding: 11px 40px 11px 22px; border-left: 1.6px solid transparent; text-align: left; font: 400 18px/28.8px var(--font-nav); letter-spacing: 0.72px; color: #707070; transition: color .2s, border-color .2s; } .dfa-app:hover { color: var(--nav-ink); } .dfa-app.is-active { color: var(--nav-ink); border-left-color: var(--nav-ink); } .dfa-panel--app h3 { padding-top: 0; } .dfa-app__media { width: 100%; max-width: 740px; aspect-ratio: 740 / 385; background-size: cover; background-position: center; } .cs-col .dfa-panel--app p { margin-top: 32px; } /* resources, video carousel: three 319px cards, 222px images with a play icon, bar page markers */ .dfa-vcar { margin-top: 48px; } .dfa-vcar .carousel { padding: 0 28px; } .dfa-vcar .carousel__track { grid-auto-columns: calc((100% - 57px) / 3); gap: 28.5px; } .dfa-vcar .carousel__btn, .dfa-rcar .carousel__btn { top: 90px; width: 30px; height: 40px; font-size: 30px; color: var(--nav-ink); } .dfa-vcar .carousel__btn[data-dir="-1"] { left: -29px; } .dfa-vcar .carousel__btn[data-dir="1"] { right: -29px; } .dfa-vcar .carousel__btn .icon, .dfa-rcar .carousel__btn .icon { stroke-width: 1.5; } .dfa-vcar .carousel__btn[data-dir="-1"] .icon, .dfa-rcar .carousel__btn[data-dir="-1"] .icon { transform: rotate(90deg); } .dfa-vcar .carousel__btn[data-dir="1"] .icon, .dfa-rcar .carousel__btn[data-dir="1"] .icon { transform: rotate(-90deg); } .dfa-video { display: block; } .dfa-video__media { position: relative; display: grid; place-items: center; height: 222px; background-size: cover; background-position: center; color: #fff; } .dfa-video__media::before { content: ""; position: absolute; inset: 0; background: rgba(12, 17, 29, .25); transition: background .2s; } .dfa-video__media .icon { position: relative; font-size: 56px; stroke-width: 1.4; fill: none; } .dfa-video h5 { margin: 16px 0 11px; font: 500 18px/25.2px var(--font-nav); color: var(--nav-ink); } .dfa-video:hover h5 { color: var(--accent); } .dfa-video:hover .dfa-video__media::before { background: rgba(12, 17, 29, .1); } .dfa-vcar__dots { justify-content: center; gap: 16px; margin-top: 56px; } .dfa-vcar__dots button { width: 40px; height: 2px; border: 0; background: #d7dde0; } .dfa-vcar__dots button.is-active { background: var(--nav-ink); } /* resources, resource carousel: three 350px cards (330x193 image), 60px arrows outside, square markers + View All */ .dfa-rcar { margin-top: 45px; } .dfa-rcar .carousel { padding: 0; } .dfa-rcar .carousel__track { grid-auto-columns: calc((100% - 20px) / 3); gap: 10px; } .dfa-rcar .carousel__btn { top: 110px; width: 60px; height: 59px; font-size: 34px; } .dfa-rcar .carousel__btn[data-dir="-1"] { left: -75px; } .dfa-rcar .carousel__btn[data-dir="1"] { right: -75px; } .dfa-rcar .res-slide { padding: 10px; } .dfa-rcar .res-slide__media { aspect-ratio: 330 / 193; margin-bottom: 16px; } .dfa-rcar .res-slide__type { margin-bottom: 24px; font: 700 12px/24px var(--font-nav); letter-spacing: 2.88px; color: #707070; } .dfa-rcar .res-slide h3 { margin: 0; font: 500 18px/25.2px var(--font-nav); color: var(--nav-ink); } .dfa-rcar .carousel__foot { margin-top: 43px; padding: 0 10px; } .dfa-rcar .view-all { font: 400 16px/27px var(--font-nav); letter-spacing: normal; color: #333; } .dfa-rcar .view-all .icon { transform: rotate(-90deg); transition: transform .2s; } .dfa-rcar .view-all:hover { color: var(--accent); } @media (max-width: 1180px) { .dfa-vcar .carousel__btn[data-dir="-1"], .dfa-rcar .carousel__btn[data-dir="-1"] { left: -8px; } .dfa-vcar .carousel__btn[data-dir="1"], .dfa-rcar .carousel__btn[data-dir="1"] { right: -8px; } .dfa-rcar .carousel { padding: 0 40px; } } @media (max-width: 760px) { .dfa-tabs { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; } .dfa-tab { flex-shrink: 0; margin-right: 24px; } .dfa-sec--apps { padding-top: 48px; } .dfa-apps { grid-template-columns: 1fr; row-gap: 24px; margin-top: 32px; } .dfa-apps__list { display: flex; overflow-x: auto; border-left: 0; border-bottom: 1.6px solid #ebeef0; scrollbar-width: none; } .dfa-app { width: auto; flex-shrink: 0; margin: 0 0 -1.6px; padding: 8px 16px; border-left: 0; border-bottom: 1.6px solid transparent; white-space: nowrap; } .dfa-app.is-active { border-bottom-color: var(--nav-ink); } .dfa-vcar .carousel__track, .dfa-rcar .carousel__track { grid-auto-columns: 100%; } } /* Design for AI hovers, matched to cadence.com: tabs and industry items turn accent with an accent line; video and resource cards darken the image overlay (0.24 -> 0.48) and colour the title */ .dfa-tab:hover:not(.is-active) { color: var(--accent); border-bottom-color: var(--accent); } .dfa-app:hover:not(.is-active) { color: var(--accent); border-left-color: var(--accent); } .dfa-video__media::before { background: rgba(51, 57, 61, .24); transition: background .25s; } .dfa-video:hover .dfa-video__media::before { background: rgba(51, 57, 61, .48); } .dfa-video h5 { transition: color .25s; } .dfa-rcar .res-slide__media { position: relative; } .dfa-rcar .res-slide__media::before { content: ""; position: absolute; inset: 0; background: rgba(51, 57, 61, .24); transition: background .25s; } .dfa-rcar .res-slide:hover .res-slide__media::before { background: rgba(51, 57, 61, .48); } .dfa-rcar .res-slide h3 { transition: color .25s; } .dfa-rcar .res-slide:hover h3, .dfa-rcar .res-slide:hover .res-slide__type { color: var(--accent); } @media (max-width: 760px) { .dfa-app:hover:not(.is-active) { border-left-color: transparent; border-bottom-color: var(--accent); } } /* ChipStack hero buttons, as on cadence.com: at least 220px wide, 12/30/10 padding, 0.8px border, 35px apart */ [data-page="chipstack"] .cs-hero__btns { column-gap: 35px; } [data-page="chipstack"] .cs-hero__btns .btn { min-width: 220px; height: 46.64px; padding: 12px 30px 10px; border: 0.8px solid transparent; justify-content: center; } [data-page="chipstack"] .cs-hero__btns .cs-btn--white:hover { border-color: #fff; } /* Two stacked sticky bars: the lower bar tucks 1-2px under the upper one, so no hairline of page content shows between them at fractional zoom (e.g. Windows 125%). The AI bar is 49.6px tall (48px + 1.6px border, same grey as the section bar), so the section bar starts at +48px and covers that border. */ @media (min-width: 1025px) { body:has(.subnav--family) .subnav--page { top: calc(var(--header-top) + 49px); } } body:has(.subnav--ctx) .subnav--page { top: calc(var(--header-top) + 48px); } /* Hero photos (ChipStack, Design for AI, Agentic AI, offering pages, Industries, Contact): one continuous image that fades gradually from right to left into the dark hero colour, like the home page hero. No hard edge: the photo's left edge is fully transparent. */ @media (min-width: 761px) { /* the photo covers the right ~65% (same size as the original layout, so it is shown smaller and less cropped) and its left half fades out in small steps, so it melts into the dark side without a visible edge */ .cs-hero__art { inset: 0 0 0 35%; width: auto; opacity: 1; background-size: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .04) 8%, rgba(0, 0, 0, .13) 16%, rgba(0, 0, 0, .27) 24%, rgba(0, 0, 0, .45) 32%, rgba(0, 0, 0, .64) 40%, rgba(0, 0, 0, .81) 48%, rgba(0, 0, 0, .93) 56%, #000 64%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .04) 8%, rgba(0, 0, 0, .13) 16%, rgba(0, 0, 0, .27) 24%, rgba(0, 0, 0, .45) 32%, rgba(0, 0, 0, .64) 40%, rgba(0, 0, 0, .81) 48%, rgba(0, 0, 0, .93) 56%, #000 64%); } }