/* ========================================================================== BWJ AI Agency — main stylesheet (light + dark) Brand: navy #174582 · red #E72C46 (from the BWJ logo) ========================================================================== */ :root, [data-theme="light"] { --brand: #174582; --accent: #e72c46; --bg: #f0f2f4; --surface: #ffffff; --soft: #e6e9ee; --text: #111318; --body: #3a3f4b; --muted: #6b7180; --line: rgba(17, 19, 24, .1); --line-2: rgba(17, 19, 24, .18); --brand-ui: var(--brand); --inv-bg: #0e1424; --inv-surface: #182038; --inv-text: #ffffff; --inv-muted: #a3abbd; --btn: #111318; --btn-text: #ffffff; --shadow: 0 24px 60px -30px rgba(17, 19, 24, .25); --ok: #15803d; --err: #b91c1c; color-scheme: light; } [data-theme="dark"] { --bg: #070a12; --surface: #0f1420; --soft: #0b1019; --text: #eef1f6; --body: #c3c9d5; --muted: #8c93a3; --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .16); --brand-ui: color-mix(in srgb, var(--brand) 45%, #ffffff); --inv-bg: #121a2e; --inv-surface: #1a2440; --inv-text: #ffffff; --inv-muted: #a3abbd; --btn: #ffffff; --btn-text: #0b0f19; --shadow: 0 24px 60px -30px rgba(0, 0, 0, .7); --ok: #4ade80; --err: #f87171; color-scheme: dark; } :root { --font-display: "DM Sans", "Segoe UI", system-ui, sans-serif; --font-body: "Manrope", "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --r-lg: 25px; --r: 20px; --r-sm: 14px; --container: 1380px; --gutter: clamp(16px, 2.4vw, 30px); --section: clamp(72px, 9vw, 130px); --ease: cubic-bezier(.2, .7, .2, 1); --header-h: 84px; --notch-bg: var(--bg); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; background: var(--bg); color: var(--body); font: 400 17px/1.65 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color .35s, color .35s; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } ul, ol { padding: 0; margin: 0; list-style: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: -.03em; margin: 0; color: var(--text); } h1 em, h2 em, h3 em { font-style: normal; color: var(--accent); } p { margin: 0; } ::selection { background: var(--accent); color: #fff; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .skip-link:focus { clip: auto; width: auto; height: auto; z-index: 1000; top: 12px; left: 12px; background: var(--btn); color: var(--btn-text); padding: 10px 16px; border-radius: 10px; } [data-theme="light"] .only-dark, [data-theme="dark"] .only-light { display: none !important; } /* ---------- Layout ---------- */ .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section); position: relative; } .section--tight { padding-block: calc(var(--section) * .55); } .section--soft, .section--alt { background: var(--surface); --notch-bg: var(--surface); } [data-theme="dark"] .section--soft, [data-theme="dark"] .section--alt { background: var(--soft); --notch-bg: var(--soft); } .section--inverse { background: var(--inv-bg); color: var(--inv-muted); --notch-bg: var(--inv-bg); border-radius: var(--r-lg); margin-inline: var(--gutter); } .section--inverse h2, .section--inverse h3 { color: var(--inv-text); } .section--inverse .mono-label { color: var(--inv-muted); } .grid { display: grid; gap: clamp(16px, 1.6vw, 24px); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); } .split { display: grid; gap: clamp(32px, 6vw, 90px); grid-template-columns: 1fr; align-items: start; } @media (min-width: 960px) { .split { grid-template-columns: 5fr 7fr; } .split--even { grid-template-columns: 1fr 1fr; } } .sticky { position: sticky; top: calc(var(--header-h) + 24px); } .head-row { display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; align-items: flex-end; margin-bottom: clamp(36px, 4vw, 56px); } .head-row > div:first-child { max-width: 860px; } .head-row .display { margin-bottom: 0; } .head-row__text { max-width: 440px; } /* ---------- Type ---------- */ .mono-label, .eyebrow { display: inline-flex; align-items: center; gap: 4px; font: 400 15px/1 var(--font-mono); color: var(--muted); margin-bottom: 18px; letter-spacing: 0; } .mono-label::first-letter { color: var(--accent); } .eyebrow::before { content: "_"; color: var(--accent); } .display, .section-head__title { font-size: clamp(34px, 5.2vw, 72px); margin-bottom: clamp(28px, 3vw, 44px); max-width: 1000px; } .section-head { max-width: 860px; margin-bottom: clamp(36px, 4vw, 56px); } .section-head .section-head__title { margin-bottom: 0; } .section-head--center { margin-inline: auto; text-align: center; } .section-head--center .eyebrow { justify-content: center; } .section-head__intro { margin-top: 18px; color: var(--muted); font-size: clamp(16px, 1.3vw, 18px); max-width: 640px; } .section-head--center .section-head__intro { margin-inline: auto; } .lead { font-size: clamp(18px, 1.5vw, 21px); color: var(--body); line-height: 1.6; } .muted { color: var(--muted); } .mono { font-family: var(--font-mono); font-size: 13px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; padding: 15px 18px 15px 24px; border-radius: 14px; font: 600 14px/1 var(--font-body); letter-spacing: .02em; text-transform: uppercase; transition: transform .3s var(--ease), background .3s, color .3s, border-color .3s; border: 1px solid transparent; } .btn svg { transition: transform .35s var(--ease); } .btn:hover svg { transform: rotate(45deg); } .btn:hover { transform: translateY(-2px); } .btn--primary { background: var(--accent); color: #fff; } .btn--dark { background: var(--btn); color: var(--btn-text); } .btn--light { background: #fff; color: #111318; } .btn--ghost { border-color: var(--line-2); color: var(--text); background: transparent; } .btn--ghost:hover { border-color: var(--text); } .btn--link { padding: 0; color: var(--accent); text-transform: none; letter-spacing: 0; font-size: 15px; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } /* ---------- Notch (cut-out corner arrow) ---------- */ .notch { position: absolute; right: 0; bottom: 0; z-index: 3; width: 74px; height: 74px; padding: 10px 0 0 10px; background: var(--notch-bg); border-top-left-radius: 24px; display: grid; place-items: center; } .notch::before, .notch::after { content: ""; position: absolute; width: 24px; height: 24px; background: radial-gradient(circle at 0 0, transparent 24px, var(--notch-bg) 24.5px); } .notch::before { right: 0; top: -24px; } .notch::after { left: -24px; bottom: 0; } .notch > span { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--btn); color: var(--btn-text); transition: background .3s, color .3s; } .notch svg { transition: transform .35s var(--ease); } .notch:hover > span, a:hover > .notch > span, article:hover > .notch > span { background: var(--accent); color: #fff; } .notch:hover svg, a:hover > .notch svg, article:hover > .notch svg { transform: rotate(45deg); } /* ---------- Preloader ---------- */ /* Preloader: see "1.12.0 — motion loader" below. */ /* ---------- Header ---------- */ .site-header { position: fixed; inset: 0 0 auto; z-index: 100; padding-top: 12px; transition: transform .4s var(--ease); } .admin-bar .site-header { top: 32px; } @media (max-width: 782px) { .admin-bar .site-header { top: 46px; } } .site-header.is-hidden { transform: translateY(-120%); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; padding: 8px 18px 8px 8px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--line); } .brand__logo { max-height: 46px; width: auto; } .brand__mark { width: 44px; height: 44px; object-fit: contain; } .brand__text { display: grid; line-height: 1; } .brand__text strong { font: 700 20px var(--font-display); letter-spacing: .02em; color: var(--brand-ui); } .brand__text small { font: 500 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 5px; } .site-header__bar { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--line); } .nav__list { display: flex; gap: 2px; align-items: center; } .nav__list > li { position: relative; } .nav__list > li > a { display: inline-flex; align-items: center; gap: 8px; padding: 13px 16px; border-radius: 12px; font: 600 13.5px/1 var(--font-body); letter-spacing: .03em; text-transform: uppercase; color: var(--text); transition: background .25s, color .25s; } .nav__list > li > a:hover { background: var(--soft); } .nav__list > li.current-menu-item > a, .nav__list > li.current-menu-ancestor > a, .nav__list > li.current_page_parent > a { background: var(--btn); color: var(--btn-text); } .nav__caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .7; transition: transform .3s; } .nav .sub-menu { position: absolute; top: calc(100% + 14px); left: 0; min-width: 270px; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(8px); transition: .25s var(--ease); } .nav .sub-menu::before { content: ""; position: absolute; inset: -16px 0 auto; height: 16px; } .nav .sub-menu a { display: block; padding: 11px 14px; border-radius: 10px; font-size: 15px; font-weight: 500; color: var(--body); transition: .2s; } .nav .sub-menu a:hover { background: var(--soft); color: var(--text); } .nav__list > li:hover > .sub-menu, .nav__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } .nav__mobile-extra { display: none; } .site-header__actions { display: flex; align-items: center; gap: 6px; } .site-header__actions .btn { padding: 13px 14px 13px 18px; font-size: 13px; } .mode-toggle { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--text); transition: background .25s; } .mode-toggle:hover { background: var(--soft); } [data-theme="light"] .mode-toggle .i-sun, [data-theme="dark"] .mode-toggle .i-moon { display: none; } .burger { display: none; width: 44px; height: 44px; border-radius: 12px; background: var(--btn); color: var(--btn-text); position: relative; } .burger i { position: absolute; left: 13px; right: 13px; height: 1.6px; background: currentColor; transition: .3s var(--ease); } .burger i:first-of-type { top: 17px; } .burger i:last-of-type { top: 25px; right: 18px; } .burger[aria-expanded="true"] i:first-of-type { top: 21px; transform: rotate(45deg); } .burger[aria-expanded="true"] i:last-of-type { top: 21px; right: 13px; transform: rotate(-45deg); } @media (max-width: 1180px) { .burger { display: block; } .site-header__cta { display: none; } .nav { position: fixed; inset: 0; background: var(--bg); padding: calc(var(--header-h) + 24px) var(--gutter) 40px; overflow-y: auto; opacity: 0; visibility: hidden; transition: .35s var(--ease); display: flex; flex-direction: column; gap: 32px; z-index: -1; } .nav.is-open { opacity: 1; visibility: visible; } .nav__list { flex-direction: column; align-items: stretch; gap: 0; } .nav__list > li { border-bottom: 1px solid var(--line); } .nav__list > li > a { font: 500 26px var(--font-display); text-transform: none; letter-spacing: -.02em; padding: 18px 0; width: 100%; justify-content: space-between; border-radius: 0; background: none !important; color: var(--text) !important; } .nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: none; padding: 0 0 12px; min-width: 0; display: none; } .nav li.is-open > .sub-menu { display: block; } .nav li.is-open .nav__caret { transform: rotate(180deg); } .nav__mobile-extra { display: grid; gap: 18px; justify-items: start; } .nav__contact { color: var(--muted); } body.nav-open { overflow: hidden; } .site-header__bar { padding: 6px; } } @media (max-width: 480px) { .brand__text small { display: none; } .brand { padding-right: 12px; } } /* ---------- Hero ---------- */ .hero { padding-top: calc(var(--header-h) + 28px); } .hero__card { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: min(78vh, 720px); display: flex; align-items: flex-end; isolation: isolate; background: var(--soft); } .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .hero__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 88%, transparent) 0%, color-mix(in srgb, var(--bg) 40%, transparent) 45%, transparent 70%); } .hero__body { padding: clamp(28px, 5vw, 72px); padding-right: 110px; max-width: 980px; } .hero__title { font-size: clamp(42px, 6.6vw, 96px); line-height: 1; letter-spacing: -.04em; } .hero__text { margin-top: 24px; max-width: 560px; font-size: clamp(16px, 1.3vw, 19px); color: var(--body); } .hero .btn-row { margin-top: 32px; } .hero__row { display: grid; gap: clamp(16px, 1.6vw, 24px); margin-top: clamp(16px, 1.6vw, 24px); grid-template-columns: 1fr; } @media (min-width: 900px) { .hero__row { grid-template-columns: 1.15fr 1fr 1fr; } } /* ---------- Tiles ---------- */ .tile { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 300px; padding: clamp(24px, 2.6vw, 36px); padding-right: 96px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; isolation: isolate; background: var(--surface); } .tile--image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .9s var(--ease); } .tile--image:hover img { transform: scale(1.05); } .tile--image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgba(8, 12, 22, .72)); } .tile__big { font: 500 clamp(30px, 3.4vw, 50px)/1 var(--font-display); letter-spacing: -.03em; color: #fff; max-width: 360px; } .tile--dark { background: var(--inv-bg); color: var(--inv-muted); } .tile--dark .mono-label { color: var(--inv-muted); margin-bottom: auto; } .tile__title { font: 500 clamp(21px, 1.8vw, 25px)/1.2 var(--font-display); color: var(--text); letter-spacing: -.02em; } .tile--dark .tile__title { color: #fff; } .tile__text { font-size: 15px; color: var(--muted); } .tile--dark .tile__text { color: var(--inv-muted); } .tile--stat { justify-content: space-between; padding-right: clamp(24px, 2.6vw, 36px); } .tile__num { font: 400 clamp(56px, 6vw, 88px)/1 var(--font-mono); color: var(--brand-ui); letter-spacing: -.04em; } .tile--tall { min-height: clamp(380px, 40vw, 560px); } .tile__caption { color: rgba(255, 255, 255, .8); font-size: 15px; max-width: 460px; } .tile__caption strong { display: block; font: 500 clamp(24px, 2.4vw, 32px)/1.1 var(--font-display); color: #fff; margin-bottom: 8px; letter-spacing: -.02em; } .avatars { display: flex; } .avatars > span { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; border: 3px solid var(--surface); margin-right: -12px; background: var(--soft); display: grid; place-items: center; position: relative; } .avatars img { width: 100%; height: 100%; object-fit: cover; } .avatars__plus { background: var(--accent) !important; color: #fff; font: 500 22px var(--font-display); } /* ---------- About / stats ---------- */ .about-grid { display: grid; gap: clamp(32px, 6vw, 90px); } @media (min-width: 960px) { .about-grid { grid-template-columns: 5fr 7fr; } } .big-stats { margin: 0; display: grid; gap: 28px; } .big-stats div { display: flex; flex-direction: column-reverse; gap: 6px; padding-bottom: 24px; border-bottom: 1px solid var(--line); } .big-stats dd { margin: 0; font: 400 clamp(52px, 6vw, 92px)/1 var(--font-mono); letter-spacing: -.05em; color: var(--brand-ui); } .big-stats dt { color: var(--text); font-weight: 600; } .checks { display: grid; gap: 12px; margin-top: 28px; } .checks li { display: flex; gap: 12px; align-items: flex-start; color: var(--text); } .checks .bwj-icon { color: #fff; background: var(--accent); border-radius: 50%; padding: 3px; flex-shrink: 0; margin-top: 4px; } .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 0; } @media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } } .stats__item { padding: 26px; border-radius: var(--r); background: var(--surface); display: flex; flex-direction: column-reverse; gap: 8px; } .stats dd { margin: 0; font: 400 clamp(36px, 4vw, 56px)/1 var(--font-mono); letter-spacing: -.04em; color: var(--brand-ui); } .stats dt { color: var(--muted); font-size: 14px; } /* ---------- Tilted bands ---------- */ .bands { position: relative; padding: 40px 0 70px; overflow: hidden; } .bands__row { overflow: hidden; padding: 16px 0; } .bands__row--a { background: var(--accent); color: #fff; transform: rotate(-2deg) scale(1.04); } .bands__row--b { background: var(--brand); color: #fff; transform: rotate(2deg) scale(1.04); margin-top: -14px; } .bands__track { display: flex; gap: 40px; width: max-content; animation: marquee 38s linear infinite; font: 400 clamp(30px, 4.4vw, 64px)/1.15 var(--font-mono); letter-spacing: -.03em; white-space: nowrap; } .bands__row--b .bands__track { animation-direction: reverse; } @keyframes marquee { to { transform: translateX(-50%); } } .marquee { overflow: hidden; padding: 22px 0; } .marquee__track { display: flex; gap: 48px; width: max-content; animation: marquee 40s linear infinite; } .marquee__item { font: 500 22px var(--font-display); color: var(--muted); white-space: nowrap; } /* ---------- Cards ---------- */ .card { position: relative; border-radius: var(--r-lg); padding: clamp(22px, 2.2vw, 30px); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; gap: 12px; transition: transform .45s var(--ease); } .section--soft .card, .section--alt .card { background: var(--bg); } .section--inverse .card { background: var(--inv-surface); --notch-bg: var(--inv-bg); } .section--inverse .card__text, .section--inverse .pills li { color: var(--inv-muted); } .card:hover { transform: translateY(-4px); } .card__media { margin: calc(clamp(22px, 2.2vw, 30px) * -1) calc(clamp(22px, 2.2vw, 30px) * -1) 10px; aspect-ratio: 4 / 3; overflow: hidden; position: relative; background: var(--soft); } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); } .card:hover .card__media img { transform: scale(1.05); } .card--image { padding-bottom: 86px; } .card__num { font: 400 13px var(--font-mono); color: var(--accent); } .card__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); } .card__title { font-size: clamp(21px, 1.8vw, 25px); letter-spacing: -.02em; } .card__text { color: var(--muted); font-size: 15.5px; } .card__foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .card__link { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; font-size: 14.5px; } .card--feature { background: var(--inv-bg) !important; color: var(--inv-muted); } .card--feature h2, .card--feature h3 { color: #fff; } .card--feature .card__text { color: var(--inv-muted); } .pills { display: flex; flex-wrap: wrap; gap: 6px; } .pills li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); font: 400 12px var(--font-mono); color: var(--muted); } .section--inverse .pills li { border-color: rgba(255,255,255,.14); } .tag { display: inline-flex; padding: 6px 12px; border-radius: 999px; font: 400 12px var(--font-mono); color: var(--muted); border: 1px solid var(--line-2); } .art { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 22%, var(--soft)), color-mix(in srgb, var(--accent) 16%, var(--soft))); color: var(--brand-ui); } .feature-list { display: grid; gap: 10px; } .feature-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--body); font-size: 15.5px; } .feature-list li .bwj-icon { color: var(--accent); flex-shrink: 0; margin-top: 4px; } .project-card__cat { position: absolute; top: 16px; left: 16px; z-index: 2; padding: 7px 12px; border-radius: 10px; background: var(--surface); color: var(--text); font: 500 12px var(--font-mono); } .project-card__metric { color: var(--muted); font-size: 14px; } .project-card__metric b { font: 500 24px var(--font-mono); color: var(--accent); margin-right: 4px; } .is-filtered-out { display: none !important; } /* ---------- Products ---------- */ .product { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); display: flex; flex-direction: column; } .product__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--soft); } .product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); } .product:hover .product__media img { transform: scale(1.04); } .product__body { padding: clamp(24px, 2.6vw, 36px); padding-right: 100px; display: grid; gap: 12px; } .product__body .mono-label { margin-bottom: 0; } .product__title { font-size: clamp(30px, 3.2vw, 44px); } /* ---------- Rows (solutions) ---------- */ .rows { border-top: 1px solid var(--line); } .row { position: relative; display: grid; gap: 16px 32px; padding: 28px 0; border-bottom: 1px solid var(--line); align-items: center; grid-template-columns: 1fr; } @media (min-width: 900px) { .row { grid-template-columns: 40px 220px 1fr 220px 56px; } } .row__num { font: 400 14px var(--font-mono); color: var(--muted); } .row__media { aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--soft); position: relative; } .row__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); } .row:hover .row__media img { transform: scale(1.06); } .row__title { font-size: clamp(22px, 2.2vw, 30px); margin-bottom: 8px; } .row__title a::after { content: ""; position: absolute; inset: 0; } .row__metric b { display: block; font: 400 clamp(36px, 3.6vw, 52px)/1 var(--font-mono); color: var(--accent); letter-spacing: -.04em; } .row__metric small { color: var(--muted); font-size: 14px; } .row__go { width: 54px; height: 54px; border-radius: 16px; background: var(--btn); color: var(--btn-text); display: none; place-items: center; transition: .35s var(--ease); } @media (min-width: 900px) { .row__go { display: grid; } } .row:hover .row__go { background: var(--accent); color: #fff; transform: rotate(45deg); } /* ---------- Tabs ---------- */ .tabs { display: grid; gap: 24px; } @media (min-width: 960px) { .tabs { grid-template-columns: 360px 1fr; gap: 32px; } } .tabs__list { display: grid; gap: 6px; align-content: start; } .tabs__btn { text-align: left; padding: 18px 20px; border-radius: 14px; display: flex; gap: 14px; align-items: center; color: var(--muted); font-weight: 600; transition: .25s; } .tabs__btn:hover { color: var(--text); background: var(--surface); } .tabs__btn[aria-selected="true"] { background: var(--btn); color: var(--btn-text); } .tabs__panel { border-radius: var(--r-lg); background: var(--surface); padding: clamp(28px, 4vw, 48px); display: grid; gap: 22px; align-content: start; } .tabs__panel[hidden] { display: none; } .metric { display: flex; align-items: baseline; gap: 14px; padding: 20px 24px; border-radius: var(--r); background: color-mix(in srgb, var(--accent) 10%, transparent); width: fit-content; } .metric b { font: 400 clamp(40px, 4vw, 56px)/1 var(--font-mono); color: var(--accent); letter-spacing: -.04em; } .metric span { color: var(--text); font-weight: 600; } /* ---------- Steps ---------- */ .steps { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); counter-reset: step; } .step { padding: 28px; border-radius: var(--r-lg); background: var(--bg); position: relative; min-height: 240px; display: flex; flex-direction: column; justify-content: flex-end; } .section:not(.section--soft):not(.section--alt) .step { background: var(--surface); } .step::before { counter-increment: step; content: "0" counter(step); font: 400 44px/1 var(--font-mono); color: var(--accent); position: absolute; top: 26px; left: 28px; letter-spacing: -.04em; } .step h3 { font-size: 23px; margin-bottom: 10px; } .step p { color: var(--muted); font-size: 15.5px; } /* ---------- Team ---------- */ .team-card { display: grid; gap: 6px; align-content: start; } .team-card__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: var(--soft); margin-bottom: 12px; } .team-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .9s var(--ease); } .team-card:hover .team-card__media img { transform: scale(1.04); } .team-card__in { position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 12px; background: var(--surface); color: var(--text); display: grid; place-items: center; transition: .25s; } .team-card__in:hover { background: var(--accent); color: #fff; } .team-card__name { font-size: 24px; } .team-card__role { font: 400 13px var(--font-mono); color: var(--muted); } .join-card { justify-content: center; align-items: flex-start; border: 1.5px dashed var(--line-2); background: transparent !important; min-height: 360px; } .portrait { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--soft); position: relative; } .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top; } /* ---------- Page hero ---------- */ .page-hero { padding-top: calc(var(--header-h) + 28px); } .page-hero__card { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: clamp(360px, 42vw, 500px); display: flex; align-items: flex-end; isolation: isolate; background: var(--surface); } .page-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .page-hero__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--bg) 18%, color-mix(in srgb, var(--bg) 70%, transparent) 50%, color-mix(in srgb, var(--bg) 10%, transparent) 85%); } .page-hero__body { padding: clamp(28px, 4.5vw, 64px); max-width: 920px; } .page-hero__title { font-size: clamp(38px, 5.6vw, 80px); line-height: 1.02; letter-spacing: -.04em; } .page-hero__sub { margin-top: 20px; font-size: clamp(16px, 1.4vw, 19px); color: var(--body); max-width: 620px; } .page-hero__meta { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 28px; color: var(--muted); font-size: 15px; } .page-hero__meta span { display: inline-flex; align-items: center; gap: 8px; } .page-hero__meta .bwj-icon { color: var(--accent); } .page-hero__grid { display: none; } .crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; font: 400 13px var(--font-mono); color: var(--muted); margin-bottom: 24px; } .crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; } .crumbs a:hover { color: var(--accent); } /* ---------- Detail ---------- */ .detail { display: grid; gap: clamp(40px, 5vw, 72px); } @media (min-width: 1000px) { .detail { grid-template-columns: minmax(0, 1fr) 380px; } } .side-card { border-radius: var(--r-lg); background: var(--surface); padding: 28px; display: grid; gap: 18px; } .side-card + .side-card { margin-top: 16px; } .side-card h2, .side-card h3 { font-size: 20px; } .meta-list div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; } .meta-list div:last-child { border-bottom: 0; } .meta-list dt { color: var(--muted); } .meta-list dd { margin: 0; text-align: right; font-weight: 600; color: var(--text); } .link-list a { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--body); transition: .2s; } .link-list a:hover, .link-list a[aria-current] { color: var(--accent); } .link-list li:last-child a { border-bottom: 0; } .side-card--accent { background: var(--inv-bg); color: var(--inv-muted); } .side-card--accent h2, .side-card--accent h3 { color: #fff; } .side-card--accent .btn { background: #fff; color: #111318; } .tags { display: flex; flex-wrap: wrap; gap: 8px; } /* ---------- Prose ---------- */ .prose { font-size: 18px; line-height: 1.75; color: var(--body); max-width: 780px; } .prose > * + * { margin-top: 1.2em; } .prose h2 { font-size: clamp(28px, 2.8vw, 38px); margin-top: 1.6em; } .prose h3 { font-size: clamp(22px, 2.2vw, 28px); margin-top: 1.5em; } .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .prose ul { list-style: none; padding-left: 0; } .prose ul li { position: relative; padding-left: 26px; } .prose ul li + li, .prose ol li + li { margin-top: .5em; } .prose ul li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); } .prose ol { list-style: decimal; padding-left: 1.3em; } .prose blockquote { margin-inline: 0; padding: 22px 26px; border-radius: var(--r); background: var(--surface); font: 500 clamp(19px, 1.8vw, 23px)/1.45 var(--font-display); color: var(--text); border-left: 3px solid var(--accent); } .prose blockquote p { margin: 0; } .prose img, .prose figure { border-radius: var(--r); } .prose figure { margin-inline: 0; } .prose code { font-family: var(--font-mono); font-size: .88em; background: var(--surface); padding: 2px 7px; border-radius: 6px; } .prose pre { background: var(--surface); border-radius: 14px; padding: 20px; overflow-x: auto; font-size: 14px; } .prose table { width: 100%; border-collapse: collapse; font-size: 15.5px; } .prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); } .prose strong { color: var(--text); } .lead.prose { font-size: clamp(18px, 1.5vw, 21px); } .wp-block-button__link { background: var(--btn); color: var(--btn-text) !important; border-radius: 14px; padding: 15px 24px; font-weight: 600; text-decoration: none !important; } /* ---------- Careers ---------- */ .jobs { display: grid; gap: 12px; } .job { display: grid; gap: 12px 24px; padding: 24px 28px; border-radius: var(--r-lg); background: var(--bg); position: relative; align-items: center; transition: transform .35s var(--ease); } @media (min-width: 860px) { .job { grid-template-columns: 1.4fr 1fr auto; } } .job:hover { transform: translateX(4px); } .job__title { font-size: clamp(20px, 2vw, 26px); } .job__title a::before { content: ""; position: absolute; inset: 0; } .job__dept { font: 400 13px var(--font-mono); color: var(--accent); margin-bottom: 8px; display: block; } .job__meta { display: flex; flex-wrap: wrap; gap: 8px; } .job .btn { position: relative; z-index: 1; pointer-events: none; } /* ---------- Filters ---------- */ .filter, .cat-bar, .faq-groups { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; } .filter button, .filter a, .cat-bar a { padding: 12px 18px; border-radius: 12px; background: var(--surface); font: 600 13px/1 var(--font-body); text-transform: uppercase; letter-spacing: .03em; color: var(--text); transition: .25s; } .section--alt .filter button { background: var(--bg); } .filter .is-active, .cat-bar a.is-active, .filter button:hover, .cat-bar a:hover { background: var(--btn) !important; color: var(--btn-text); } /* ---------- Pricing ---------- */ .plans { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .plan { border-radius: var(--r-lg); padding: clamp(28px, 3vw, 40px); background: var(--surface); display: flex; flex-direction: column; gap: 22px; position: relative; } .plan--featured { background: var(--inv-bg); color: var(--inv-muted); } .plan--featured h2, .plan--featured .plan__price { color: #fff; } .plan--featured .feature-list li { color: var(--inv-muted); } .plan--featured .feature-list { border-color: rgba(255,255,255,.12); } .plan--featured .btn--primary { background: var(--accent); color: #fff; } .plan__badge { position: absolute; top: 24px; right: 24px; background: var(--accent); color: #fff; font: 500 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; padding: 7px 12px; border-radius: 10px; } .plan__name { font-size: 26px; } .plan__price { font: 400 clamp(44px, 4.4vw, 60px)/1 var(--font-mono); letter-spacing: -.04em; color: var(--text); } .plan__price small { font: 500 15px var(--font-body); color: var(--muted); letter-spacing: 0; } .plan .feature-list { border-top: 1px solid var(--line); padding-top: 22px; } .plan .btn { margin-top: auto; justify-content: center; } /* ---------- Accordion ---------- */ .accordion { display: grid; gap: 10px; } .accordion__item { border-radius: var(--r); background: var(--bg); } .section:not(.section--soft):not(.section--alt) .accordion__item { background: var(--surface); } .accordion__q { font: inherit; margin: 0; } .accordion__q button { width: 100%; text-align: left; padding: 22px 24px; display: flex; justify-content: space-between; gap: 24px; align-items: center; font: 500 clamp(17px, 1.5vw, 20px)/1.35 var(--font-display); color: var(--text); } .accordion__q i { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: var(--btn); color: var(--btn-text); display: grid; place-items: center; transition: .35s var(--ease); } .accordion__q button[aria-expanded="true"] i { transform: rotate(45deg); background: var(--accent); color: #fff; } .accordion__inner { padding: 0 90px 24px 24px; color: var(--muted); } /* ---------- Forms ---------- */ .form-wrap { border-radius: var(--r-lg); background: var(--surface); padding: clamp(24px, 3.4vw, 44px); } .form { display: grid; gap: 18px; } .form__row { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; } .field > span, .field legend { font-size: 13.5px; font-weight: 600; color: var(--text); padding: 0; } .field input:not([type="checkbox"]), .field select, .field textarea { width: 100%; background: var(--bg); border: 1px solid transparent; border-radius: 12px; padding: 15px 16px; font-size: 16px; color: var(--text); transition: border-color .2s, box-shadow .2s; appearance: none; } .field select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; } .field textarea { resize: vertical; min-height: 130px; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand-ui); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-ui) 18%, transparent); } .field--file input::file-selector-button { background: var(--btn); border: 0; color: var(--btn-text); padding: 8px 14px; border-radius: 8px; margin-right: 12px; cursor: pointer; } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .chip input { position: absolute; opacity: 0; pointer-events: none; } .chip span { display: inline-block; padding: 9px 15px; border-radius: 10px; background: var(--bg); font-size: 14px; cursor: pointer; transition: .2s; user-select: none; color: var(--text); } .chip input:checked + span { background: var(--btn); color: var(--btn-text); } .chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; } .form__foot { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; margin-top: 6px; } .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); max-width: 380px; } .consent input { accent-color: var(--accent); margin-top: 4px; width: 16px; height: 16px; } .form__hp { position: absolute; left: -9999px; } .notice { display: flex; gap: 10px; align-items: center; padding: 14px 18px; border-radius: 12px; margin-bottom: 20px; font-weight: 600; font-size: 15px; } .notice--ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); } .notice--err { background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--err); } .form-wrap .btn--primary { background: var(--btn); color: var(--btn-text); } .form-wrap .btn--primary:hover { background: var(--accent); color: #fff; } .section--alt .form-wrap, .section--soft .form-wrap { background: var(--bg); } .section--alt .field input:not([type="checkbox"]), .section--alt .field textarea, .section--alt .chip span { background: var(--surface); } .contact-cards { display: grid; gap: 12px; } .contact-card { display: flex; gap: 16px; align-items: center; padding: 20px; border-radius: var(--r); background: var(--surface); transition: .25s; } a.contact-card:hover { transform: translateX(4px); } .contact-card .card__icon { width: 48px; height: 48px; flex-shrink: 0; } .contact-card small { display: block; font: 400 12px var(--font-mono); color: var(--muted); margin-bottom: 4px; } .contact-card strong { font-weight: 600; color: var(--text); word-break: break-word; } .map { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 21 / 8; min-height: 320px; } .map iframe { width: 100%; height: 100%; border: 0; } [data-theme="dark"] .map iframe { filter: grayscale(1) invert(.9) contrast(.9); } .contact-list { display: grid; gap: 14px; } .contact-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; } .contact-list .bwj-icon { color: var(--accent); flex-shrink: 0; margin-top: 3px; } /* ---------- Socials / share ---------- */ .socials, .share { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .socials a, .share a, .share button { width: 42px; height: 42px; border-radius: 12px; background: var(--surface); display: grid; place-items: center; color: var(--text); transition: .25s; } .socials a:hover, .share a:hover, .share button:hover, .share button.is-copied { background: var(--accent); color: #fff; } .share__label { font: 400 13px var(--font-mono); color: var(--muted); margin-right: 6px; } /* ---------- Blog ---------- */ .post-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 400 12.5px var(--font-mono); color: var(--muted); } .post-meta a { color: var(--accent); } .post-feature { display: grid; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); margin-bottom: 24px; position: relative; } @media (min-width: 900px) { .post-feature { grid-template-columns: 1.2fr 1fr; } } .post-feature__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--soft); } .post-feature__media img { width: 100%; height: 100%; object-fit: cover; } .post-feature__body { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; gap: 18px; } .post-feature__body h2 { font-size: clamp(28px, 3vw, 40px); } .post-feature__body h2 a::before { content: ""; position: absolute; inset: 0; } .post-list { display: grid; gap: 12px; } .post-row { display: grid; gap: 20px 32px; padding: 20px; border-radius: var(--r-lg); background: var(--surface); position: relative; align-items: center; } @media (min-width: 800px) { .post-row { grid-template-columns: 280px 1fr; } } .post-row__media { aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; position: relative; background: var(--soft); } .post-row__media img { width: 100%; height: 100%; object-fit: cover; } .post-row h2 { font-size: clamp(22px, 2.2vw, 28px); margin: 10px 0; } .post-row h2 a::before { content: ""; position: absolute; inset: 0; } .progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--accent); width: 0; z-index: 200; } .article-hero__img { border-radius: var(--r-lg); overflow: hidden; margin-top: 32px; aspect-ratio: 16 / 8; position: relative; } .article-hero__img img { width: 100%; height: 100%; object-fit: cover; } .article { display: grid; gap: 48px; } @media (min-width: 1100px) { .article { grid-template-columns: 1fr 320px; gap: 72px; } } .article__foot { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; max-width: 780px; } .author-box { display: flex; gap: 20px; padding: 28px; border-radius: var(--r-lg); background: var(--surface); margin-top: 40px; max-width: 780px; } .author-box img { border-radius: 50%; flex-shrink: 0; } .author-box h3 { font-size: 19px; margin-bottom: 6px; } .post-nav { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-top: 48px; } .post-nav a { display: grid; gap: 6px; padding: 24px; border-radius: var(--r-lg); background: var(--surface); transition: .25s; } .post-nav a:hover { transform: translateY(-3px); } .post-nav small { font: 400 12px var(--font-mono); color: var(--muted); } .post-nav strong { font: 500 19px/1.3 var(--font-display); color: var(--text); } .post-nav .next { text-align: right; } .widget { margin-bottom: 32px; } .widget__title { font: 400 14px var(--font-mono); color: var(--muted); margin-bottom: 16px; } .widget ul li { padding: 10px 0; border-bottom: 1px solid var(--line); } .widget ul li a:hover { color: var(--accent); } .search-form { display: flex; gap: 8px; max-width: 520px; } .search-form input[type="search"] { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; color: var(--text); } .search-form input[type="search"]:focus { outline: none; border-color: var(--brand-ui); } .search-form .btn { padding: 14px 16px; } .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 48px; } .page-numbers { min-width: 48px; height: 48px; padding: 0 14px; border-radius: 12px; background: var(--surface); display: inline-grid; place-items: center; font-weight: 600; color: var(--text); } .page-numbers.current, .page-numbers:hover { background: var(--btn); color: var(--btn-text); } .comments { margin-top: 64px; max-width: 780px; } .comments h2 { font-size: 26px; margin-bottom: 24px; } .comment-list .comment { padding: 24px 0; border-bottom: 1px solid var(--line); } .comment-list .children { padding-left: 32px; } .comment-meta { display: flex; gap: 12px; align-items: center; font-size: 14px; color: var(--muted); margin-bottom: 10px; } .comment-meta img { border-radius: 50%; } .comment-form { display: grid; gap: 16px; } .comment-form input:not([type="checkbox"]):not([type="submit"]), .comment-form textarea { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; color: var(--text); } .comment-form .submit { background: var(--btn); color: var(--btn-text); border: 0; border-radius: 14px; padding: 15px 24px; font-weight: 700; cursor: pointer; } /* ---------- 404 ---------- */ .e404 { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: calc(var(--header-h) + 40px) 0 80px; } .e404__code { font: 400 clamp(140px, 28vw, 340px)/.9 var(--font-mono); letter-spacing: -.08em; color: var(--brand-ui); } .e404__code span { color: var(--accent); } .e404 h1 { font-size: clamp(28px, 3vw, 44px); margin: 20px 0 14px; } .e404 p { color: var(--muted); margin-bottom: 32px; } .e404 .search-form { margin: 32px auto 0; } .e404 .btn-row { justify-content: center; } .grid-bg { display: none; } /* ---------- CTA band ---------- */ .cta-band { border-radius: var(--r-lg); padding: clamp(36px, 5vw, 72px); background: var(--inv-bg); color: var(--inv-muted); display: grid; gap: 28px; align-items: center; position: relative; overflow: hidden; isolation: isolate; } @media (min-width: 900px) { .cta-band { grid-template-columns: 1.4fr auto; } } .cta-band::before { content: ""; position: absolute; right: -10%; top: -40%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 35%, transparent), transparent 65%); z-index: -1; } .cta-band h2 { font-size: clamp(32px, 4vw, 54px); color: #fff; } .cta-band p { margin-top: 14px; max-width: 560px; } .cta-band .btn--primary { background: #fff; color: #111318; } .cta-band .btn--ghost { color: #fff; border-color: rgba(255,255,255,.25); } /* ---------- Footer ---------- */ .site-footer { padding: var(--section) 0 var(--gutter); } .site-footer__card { border-radius: var(--r-lg); background: var(--inv-bg); color: var(--inv-muted); padding: clamp(28px, 4vw, 64px); } .site-footer__card .mono-label { color: var(--inv-muted); } .mega-cta { display: block; padding-bottom: clamp(36px, 5vw, 64px); border-bottom: 1px solid rgba(255,255,255,.1); } .mega-cta__text { display: flex; align-items: center; gap: clamp(16px, 3vw, 36px); flex-wrap: wrap; font: 500 clamp(38px, 6.6vw, 96px)/1 var(--font-display); letter-spacing: -.045em; color: #fff; } .mega-cta__text i { width: clamp(56px, 7vw, 100px); aspect-ratio: 1; border-radius: 22px; background: var(--accent); color: #fff; display: grid; place-items: center; transition: transform .5s var(--ease); flex-shrink: 0; } .mega-cta__text i svg { width: 45%; height: 45%; } .mega-cta:hover .mega-cta__text i { transform: rotate(45deg); } .site-footer__grid { display: grid; gap: 40px; padding-block: clamp(40px, 5vw, 64px); grid-template-columns: 1fr; } @media (min-width: 640px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } } .brand--footer { background: #fff; box-shadow: none; border: 0; } .brand--footer .brand__text strong { color: #174582; } .brand--footer .brand__text small { color: #6b7180; } .site-footer__about p { margin: 22px 0; max-width: 360px; font-size: 15.5px; } .site-footer .socials a { background: rgba(255,255,255,.08); color: #fff; } .site-footer .socials a:hover { background: var(--accent); } .site-footer__title { font: 400 14px var(--font-mono); color: #fff; margin-bottom: 20px; } .site-footer__title::before { content: "_"; color: var(--accent); } .site-footer__links { display: grid; gap: 12px; } .site-footer__links a { font-size: 15.5px; transition: color .2s; } .site-footer__links a:hover, .site-footer .contact-list a:hover { color: #fff; } .site-footer__bottom { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.1); font-size: 14px; } .legal-links { display: flex; gap: 24px; } .legal-links a:hover { color: #fff; } .to-top { width: 46px; height: 46px; border-radius: 14px; background: #fff; color: #111318; display: grid; place-items: center; transform: rotate(-45deg); transition: .25s; } .to-top:hover { background: var(--accent); color: #fff; } .wa-float { position: fixed; left: 20px; bottom: 20px; z-index: 90; width: 54px; height: 54px; border-radius: 16px; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 12px 30px -8px rgba(0,0,0,.4); transition: transform .3s var(--ease); } .wa-float:hover { transform: scale(1.08); } /* ---------- Reveal ---------- */ [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); } [data-reveal].is-in { opacity: 1; transform: none; } .no-js [data-reveal] { opacity: 1; transform: none; } /* ---------- Mobile tweaks ---------- */ @media (max-width: 700px) { .hero__card { min-height: 560px; } .hero__card::before { background: linear-gradient(0deg, color-mix(in srgb, var(--bg) 92%, transparent) 35%, color-mix(in srgb, var(--bg) 30%, transparent) 80%); } .hero__body { padding-right: 28px; padding-bottom: 96px; } .page-hero__card::before { background: linear-gradient(0deg, var(--bg) 35%, color-mix(in srgb, var(--bg) 40%, transparent)); } .section--inverse { margin-inline: 8px; } .accordion__inner { padding-right: 24px; } .tile { padding-right: 28px; padding-bottom: 92px; } .tile--stat { padding-bottom: 28px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1; transform: none; } } @media print { .site-header, .site-footer, .wa-float, .preloader { display: none !important; } } .section--inverse .notch > span { background: #fff; color: #111318; } .section--inverse .card:hover .notch > span { background: var(--accent); color: #fff; } /* Phones: stack hero image above the text for readability */ @media (max-width: 700px) { .hero__card { display: block; min-height: 0; background: var(--surface); } .hero__card .hero__img { position: relative; height: 260px; z-index: 0; } .hero__card::before { display: none; } .hero__body { padding: 24px 24px 100px; } .page-hero__card { display: block; min-height: 0; } .page-hero__card .page-hero__img { position: relative; height: 200px; z-index: 0; } .page-hero__card::before { display: none; } .page-hero__body { padding: 24px; } } /* ========================================================================== v1.2 — layout, sizing and components matched to the reference AI-agency style ========================================================================== */ [data-theme="light"] { --bg: #f0f2f4; --surface: #ffffff; --soft: #e4e7ec; --ink: #1f1f1f; /* near-black panels (services, footer, quotes) */ --ink-2: #1a1a1a; --slate: #5e6884; --inv-bg: var(--ink); --inv-surface: #2a2a2a; } :root { --container: 1380px; --gutter: 20px; --r-lg: 25px; --r: 20px; --header-h: 96px; } [data-theme="dark"] { --ink: #141821; --ink-2: #10131a; --slate: #3c4660; --soft: #121722; --inv-bg: var(--ink); --inv-surface: #1d2230; } @media (max-width: 700px) { :root { --gutter: 12px; --header-h: 80px; } } /* Type scale (100 / 80 / 40 / 30 / 25 / 20) */ .display, .section-head__title { font-size: clamp(38px, 5.6vw, 80px); line-height: 1; letter-spacing: -.05em; margin-bottom: clamp(32px, 4vw, 60px); max-width: 1100px; } .display--md { font-size: clamp(32px, 4.2vw, 60px); } .mono-label, .eyebrow { font: 500 13px/1 var(--font-body); color: var(--text); letter-spacing: 0; margin-bottom: 22px; } .mono-label::before { content: "( "; color: var(--muted); } .mono-label::after { content: " )"; color: var(--muted); } .mono-label::first-letter { color: inherit; } .eyebrow::before { content: "( _"; color: var(--muted); } .eyebrow::after { content: " )"; color: var(--muted); } .services-block .mono-label, .quotes__head .mono-label { color: #fff; } /* Buttons */ .btn { border-radius: 14px; font: 600 13.5px/1 var(--font-body); letter-spacing: .02em; padding: 17px 18px 17px 22px; gap: 22px; } .btn--accent { background: var(--accent); color: #fff; } .btn--accent:hover { background: color-mix(in srgb, var(--accent) 85%, #000); } .btn--outline { border: 1px solid var(--line-2); color: var(--text); background: transparent; } .btn--outline:hover { border-color: var(--text); background: var(--text); color: var(--bg); } .btn--outline-light { border: 1px solid rgba(255,255,255,.35); color: #fff; background: transparent; } .btn--outline-light:hover { background: #fff; color: #111318; } .btn--glass { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(10px); } .btn--glass:hover { background: #fff; color: #111318; } .btn svg { width: 14px; height: 14px; } .u-line { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } /* ---------- Header ---------- */ .site-header { padding-top: 0; } .site-header__inner { padding-block: 14px; transition: background .35s, box-shadow .35s, border-radius .35s; } .site-header__left { display: flex; align-items: center; gap: 22px; } .site-header .brand { background: none; box-shadow: none; border: 0; padding: 0; } .hamburger { width: 44px; height: 44px; position: relative; color: var(--text); border-radius: 12px; transition: background .25s; } .hamburger:hover { background: var(--surface); } .hamburger i { position: absolute; left: 11px; height: 2px; background: currentColor; border-radius: 2px; transition: width .3s var(--ease); } .hamburger i:first-of-type { top: 17px; width: 22px; } .hamburger i:last-of-type { top: 25px; width: 14px; } .hamburger:hover i:last-of-type { width: 22px; } .nav { background: var(--surface); border-radius: 16px; padding: 7px; box-shadow: 0 10px 30px -20px rgba(0,0,0,.25); } .nav__list > li > a { padding: 12px 18px; border-radius: 10px; font-size: 13px; } .site-header__actions { gap: 4px; } .icon-btn { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: var(--text); transition: background .25s; } .icon-btn:hover { background: var(--surface); } .site-header__cta { padding: 19px 28px; margin-left: 8px; } .burger, .site-header__bar { display: none !important; } @media (max-width: 1180px) { .nav { display: none; } .site-header__cta { display: none; } } @media (max-width: 480px) { .icon-btn[data-search-open] { display: none; } } /* ---------- Side panel ---------- */ .side-panel { position: fixed; inset: 0; z-index: 300; visibility: hidden; } .side-panel.is-open { visibility: visible; } .side-panel__backdrop { position: absolute; inset: 0; background: rgba(8, 10, 16, .55); opacity: 0; transition: opacity .45s var(--ease); backdrop-filter: blur(3px); } .side-panel.is-open .side-panel__backdrop { opacity: 1; } .side-panel__card { position: absolute; left: 16px; top: 16px; bottom: 16px; width: min(440px, calc(100vw - 72px)); border-radius: var(--r-lg); background: #1f1f1f; color: #fff; overflow: hidden; transform: translateX(-115%); transition: transform .6s var(--ease); isolation: isolate; } .side-panel.is-open .side-panel__card { transform: none; } .side-panel__bg { position: absolute; inset: auto 0 0 0; width: 100%; height: 55%; object-fit: cover; z-index: -1; opacity: .55; mask-image: linear-gradient(0deg, #000 30%, transparent); -webkit-mask-image: linear-gradient(0deg, #000 30%, transparent); } .side-panel__close { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; font: 500 13px var(--font-body); } .side-panel__close:hover { background: var(--accent); } .side-panel__inner { height: 100%; overflow-y: auto; padding: 50px 44px 40px; display: flex; flex-direction: column; gap: 28px; } .brand--panel { background: #fff !important; padding: 8px 16px 8px 8px !important; border-radius: 14px; width: fit-content; } .brand--panel .brand__text strong { color: #174582; } .side-panel__nav { display: none; } @media (max-width: 1180px) { .side-panel__nav { display: block; } } .panel-menu > li { border-bottom: 1px solid rgba(255,255,255,.1); } .panel-menu > li > a { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; font: 500 22px var(--font-display); letter-spacing: -.03em; } .panel-menu .sub-menu { display: none; padding: 0 0 12px 12px; } .panel-menu li.is-open > .sub-menu { display: block; } .panel-menu .sub-menu a { display: block; padding: 7px 0; color: rgba(255,255,255,.7); font-size: 15px; } .panel-menu .nav__caret { border-top-color: #fff; } .side-panel__label { display: block; font: 600 12px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 20px; } .side-panel__contacts p { font: 500 18px/1.45 var(--font-display); margin-bottom: 22px; letter-spacing: -.02em; } .side-panel__muted { font: 400 13px var(--font-body); color: rgba(255,255,255,.55); letter-spacing: 0; } .side-panel__inner > .btn { width: fit-content; } .socials--panel { margin-top: auto; } .socials--panel a { background: rgba(255,255,255,.08); color: #fff; } body.panel-open { overflow: hidden; } /* Search overlay */ .search-overlay { position: fixed; inset: 0; z-index: 310; background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(10px); display: grid; place-items: center; } .search-overlay[hidden] { display: none; } .search-overlay .search-form { max-width: 760px; } .search-overlay input[type="search"] { font-size: 26px; padding: 22px 26px; } .search-overlay__close { position: absolute; top: 24px; right: 24px; width: 52px; height: 52px; border-radius: 14px; background: var(--surface); display: grid; place-items: center; color: var(--text); } /* ---------- Hero slider ---------- */ .hero { padding-top: var(--header-h); } .hero__slider { position: relative; height: clamp(560px, 82vh, 780px); border-radius: var(--r-lg); overflow: hidden; background: #0b0e16; isolation: isolate; } .hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1s var(--ease), visibility 1s; display: flex; align-items: center; } .hero__slide.is-active { opacity: 1; visibility: visible; } .hero__slide .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.08); transition: transform 7s linear; } .hero__slide.is-active .hero__img { transform: scale(1); } /* Motion background: fades in over the still once it is actually playing */ .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0; transition: opacity 1.2s var(--ease); pointer-events: none; } .hero__video.is-playing { opacity: 1; } @media (prefers-reduced-motion: reduce) { .hero__video { display: none; } } .hero__slide::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,8,16,.72) 0%, rgba(5,8,16,.35) 50%, rgba(5,8,16,.05) 80%); } .hero__body { padding: 0 clamp(24px, 6.5vw, 110px); max-width: 1000px; color: #fff; } .hero__title { font: 500 clamp(40px, 5.6vw, 80px)/1 var(--font-display); letter-spacing: -.05em; color: #fff; margin: 0; } .hero__text { color: rgba(255,255,255,.78); margin-top: 26px; max-width: 560px; font-size: clamp(15px, 1.2vw, 18px); } .hero__slide .hero__title, .hero__slide .hero__text, .hero__slide .btn-row { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .hero__slide.is-active .hero__title { opacity: 1; transform: none; transition-delay: .25s; } .hero__slide.is-active .hero__text { opacity: 1; transform: none; transition-delay: .4s; } .hero__slide.is-active .btn-row { opacity: 1; transform: none; transition-delay: .55s; } .hero__body .btn-row { margin-top: 36px; } .hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 46px; height: 90px; border-radius: 14px; background: #fff; color: #111318; display: grid; place-items: center; transition: background .25s, color .25s; } .hero__arrow:hover { background: var(--accent); color: #fff; } .hero__arrow--prev { left: 18px; } .hero__arrow--next { right: 18px; } .hero__mini { position: absolute; right: 18px; bottom: 18px; z-index: 5; display: flex; align-items: center; gap: 18px; padding: 10px 28px 10px 10px; background: #fff; color: #111318; border-radius: 18px; font: 500 15px var(--font-body); transition: transform .3s var(--ease); } .hero__mini:hover { transform: translateY(-3px); } .hero__mini img { width: 120px; height: 88px; object-fit: cover; border-radius: 12px; } .hero__dots { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 5; } .hero__dots i { width: 28px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.35); transition: background .3s, width .3s; } .hero__dots i.is-active { background: #fff; width: 48px; } .hero__row { grid-template-columns: 1fr; gap: var(--gutter); margin-top: var(--gutter); } @media (min-width: 900px) { .hero__row { grid-template-columns: 1fr 1fr .72fr; } } .tile { min-height: 430px; border-radius: var(--r-lg); --notch-bg: var(--bg); } .tile__big { font-size: clamp(36px, 4.2vw, 60px); max-width: 420px; line-height: 1; letter-spacing: -.05em; } .tile--dark { background: var(--ink); justify-content: flex-start; padding: 18px 96px 70px 18px; } .tile__thumb { width: 100%; height: 190px; object-fit: cover; border-radius: 18px; margin-bottom: 22px; } .tile--dark .tile__title, .tile--dark .tile__text { padding-left: 22px; } .tile--dark .tile__title { font-size: 25px; } .tile--slate { background: var(--slate); color: #fff; padding: 40px; justify-content: space-between; } .tile__icon { width: 56px; height: 56px; border-radius: 16px; background: rgba(255,255,255,.12); display: grid; place-items: center; } .tile--slate .tile__label { font: 500 25px/1.2 var(--font-display); letter-spacing: -.03em; } .tile--slate .tile__num { font: 400 clamp(64px, 7vw, 110px)/1 var(--font-mono); color: #fff; letter-spacing: -.06em; } /* ---------- About ---------- */ .about { padding-block: clamp(80px, 10vw, 150px); overflow: hidden; } .about__grid { display: grid; gap: 40px; } @media (min-width: 1000px) { .about__grid { grid-template-columns: 4fr 8fr; } } .about__visual { position: relative; min-height: 420px; } .about__shape { position: absolute; left: -120px; top: 0; width: 520px; height: 600px; filter: blur(1px); opacity: .9; } .about__shape i { position: absolute; background: var(--soft); border-radius: 60px; } .about__shape i:nth-child(1) { left: 0; top: 160px; width: 260px; height: 260px; } .about__shape i:nth-child(2) { left: 150px; top: 0; width: 200px; height: 600px; } .about__shape i:nth-child(3) { left: 200px; top: 280px; width: 320px; height: 190px; } .about__stats { position: relative; display: grid; gap: 40px; margin: 0; padding-top: 220px; } .about__stats dd { margin: 0; font: 400 clamp(64px, 7vw, 100px)/1 var(--font-mono); letter-spacing: -.06em; color: var(--slate); } [data-theme="dark"] .about__stats dd { color: var(--brand-ui); } .about__stats dt { color: var(--text); font-weight: 600; margin-top: 4px; } .about__stats div { display: flex; flex-direction: column-reverse; } .about__body .display { font-size: clamp(36px, 5vw, 76px); } .swash { font-family: var(--font-mono); font-style: italic; color: var(--accent); letter-spacing: -.06em; } .about__body .lead { max-width: 640px; color: var(--muted); font-size: 16px; } /* Bands */ .bands { padding: 60px 0 90px; } .bands__row--a { transform: rotate(-3deg) scale(1.05); } .bands__row--b { transform: rotate(2deg) scale(1.05); margin-top: -20px; background: var(--slate); } .bands__track { font: 400 clamp(32px, 4.6vw, 70px)/1.15 var(--font-mono); color: #fff; } .bands__row--a .bands__track { color: #fff; } /* ---------- Services block (dark) ---------- */ .services-block { padding-block: var(--gutter); } .services-block__card { background: var(--ink); border-radius: var(--r-lg); padding: clamp(50px, 7vw, 110px) clamp(20px, 3vw, 40px); color: rgba(255,255,255,.7); --notch-bg: var(--ink); } .services-block .display { color: #fff; } .svc-grid { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); } .svc-card { position: relative; height: clamp(380px, 34vw, 500px); border-radius: var(--r); overflow: hidden; display: flex; align-items: flex-end; isolation: isolate; background: #2a2a2a; } .svc-card__img, .svc-card > img, .svc-card .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1s var(--ease); } .svc-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,12,18,0) 35%, rgba(10,12,18,.85)); } .svc-card:hover .svc-card__img, .svc-card:hover > img { transform: scale(1.07); } .svc-card__num { position: absolute; top: 22px; left: 24px; font: 400 14px var(--font-mono); color: #fff; background: rgba(0,0,0,.35); padding: 6px 10px; border-radius: 8px; backdrop-filter: blur(6px); } .svc-card__body { padding: 26px; display: grid; gap: 6px; color: rgba(255,255,255,.8); font-size: 14.5px; } .svc-card__title { font: 500 25px/1.15 var(--font-display); color: #fff; letter-spacing: -.04em; margin-bottom: 8px; } .svc-card__go { position: absolute; top: 18px; right: 18px; width: 50px; height: 50px; border-radius: 14px; background: #fff; color: #111318; display: grid; place-items: center; transform: scale(.6) rotate(-45deg); opacity: 0; transition: .45s var(--ease); } .svc-card:hover .svc-card__go { transform: none; opacity: 1; } /* ---------- Features ---------- */ .features { overflow: hidden; padding-bottom: 0; } .features__grid { display: grid; gap: 40px 30px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); } .feature__title { font: 600 20px var(--font-display); letter-spacing: -.03em; margin-bottom: 14px; } .feature p { color: var(--muted); font-size: 15px; margin-bottom: 28px; } .pixel-icon { display: block; } .outline-text { margin-top: clamp(60px, 8vw, 110px); display: grid; justify-items: center; line-height: .9; pointer-events: none; user-select: none; position: relative; z-index: 1; margin-bottom: -.32em; font: 500 clamp(80px, 15vw, 230px)/.9 var(--font-mono); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px var(--slate); } .outline-text span { display: block; will-change: transform; } .outline-text span:last-child { margin-left: 10vw; } /* ---------- Work accordion ---------- */ .work-block { padding-block: var(--gutter); position: relative; z-index: 0; } .work-block__card { background: var(--soft); border-radius: var(--r-lg); padding: clamp(80px, 9vw, 140px) clamp(20px, 3vw, 40px) clamp(70px, 8vw, 120px); --notch-bg: var(--soft); } [data-theme="dark"] .work-block__card { background: var(--surface); } .work-block__head, .work-list { margin-left: clamp(0px, 18%, 260px); } .work-item { display: grid; grid-template-columns: 1fr; gap: 8px; border-bottom: 1px solid var(--line-2); padding: 26px 0; margin-left: clamp(0px, -12%, 0px); } @media (min-width: 900px) { .work-list { margin-left: clamp(0px, 8%, 120px); } .work-item { grid-template-columns: 140px 1fr; } } .work-item__cat { font-size: 14px; color: var(--muted); padding-top: 8px; } .work-item__head { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; text-align: left; } .work-item__title { font: 500 clamp(22px, 2.2vw, 30px)/1.25 var(--font-display); letter-spacing: -.04em; color: var(--text); max-width: 760px; } .work-item__head i { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--text); margin-top: 14px; transition: transform .4s var(--ease); flex-shrink: 0; } .work-item.is-open .work-item__head i { transform: rotate(180deg); } .work-item__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); } .work-item.is-open .work-item__panel { grid-template-rows: 1fr; } .work-item__inner { overflow: hidden; } .work-item__media { display: block; margin-top: 22px; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 8; position: relative; background: var(--bg); } .work-item__media img, .work-item__media .art { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .work-item__media:hover img { transform: scale(1.04); } .work-item__text { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 18px; color: var(--muted); } .work-list__foot { padding-top: 40px; } /* ---------- Quotes ---------- */ .quotes__grid { display: grid; gap: var(--gutter); } @media (min-width: 1000px) { .quotes__grid { grid-template-columns: 1.35fr 1fr; } } .quotes__media { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 560px; padding: 20px; display: flex; isolation: isolate; } .quotes__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .quotes__card { position: relative; background: var(--ink); color: #fff; border-radius: var(--r); padding: clamp(30px, 4vw, 54px); width: min(100%, 560px); display: flex; flex-direction: column; } .quotes__mark { font: 700 90px/0.6 var(--font-display); color: var(--accent); height: 40px; } .quotes__item { display: none; margin: 0; animation: quoteIn .7s var(--ease); } .quotes__item.is-active { display: block; } @keyframes quoteIn { from { opacity: 0; transform: translateY(14px); } } .quotes__item blockquote { margin: 0 0 28px; font: 500 clamp(20px, 2vw, 26px)/1.45 var(--font-display); letter-spacing: -.03em; } .quotes__item figcaption { display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,.75); font-size: 14px; } .quotes__avatar { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex-shrink: 0; position: relative; background: #333; } .quotes__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .quotes__nav { margin-top: auto; padding-top: 40px; align-self: flex-end; display: flex; gap: 2px; background: #fff; border-radius: 14px; padding: 6px; } .quotes__nav button { width: 44px; height: 40px; border-radius: 10px; color: #111318; display: grid; place-items: center; } .quotes__nav button:hover { background: var(--accent); color: #fff; } .quotes__card .quotes__nav { margin-top: 40px; } .quotes__head { background: var(--ink); border-radius: var(--r-lg); padding: clamp(40px, 5vw, 70px); display: flex; flex-direction: column; justify-content: center; gap: 36px; align-items: flex-start; } .quotes__title { font: 500 clamp(36px, 4.4vw, 64px)/1.02 var(--font-display); letter-spacing: -.05em; color: #fff; margin: 0; } /* ---------- Insights / post cards ---------- */ .insights__grid { display: grid; gap: var(--gutter); } @media (min-width: 900px) { .insights__grid { grid-template-columns: 1fr 2fr; } } .posts-grid { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); } .post-card { background: var(--surface); border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); display: flex; flex-direction: column; transition: transform .45s var(--ease), box-shadow .45s; } .post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .post-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; margin: 10px 10px 0; border-radius: 16px; background: var(--soft); } .insights__grid .post-card:first-child .post-card__media { aspect-ratio: 1 / .9; } .insights__grid .post-card:nth-child(2) .post-card__media { aspect-ratio: 16 / 7.6; } .post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .post-card:hover .post-card__media img { transform: scale(1.05); } .post-card__date { position: absolute; left: 14px; bottom: 14px; background: #1f1f1f; color: #fff; font: 500 12.5px var(--font-body); padding: 9px 14px; border-radius: 10px; } .post-card__body { padding: 28px 30px 32px; display: grid; gap: 14px; } .post-card__title { font: 500 clamp(21px, 1.8vw, 25px)/1.3 var(--font-display); letter-spacing: -.03em; } .insights__grid .post-card:nth-child(2) .post-card__title { font-size: clamp(24px, 2.2vw, 32px); } .post-card__title a:hover { color: var(--accent); } .post-card__cats { font-size: 13px; color: var(--muted); } /* Recognition */ .logo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px 50px; } .logo-row img { height: 64px; width: auto; max-width: 180px; object-fit: contain; filter: grayscale(1); opacity: .6; transition: .35s; } .logo-row img:hover { filter: none; opacity: 1; } [data-theme="dark"] .logo-row img { filter: grayscale(1) brightness(1.6); } /* ---------- Page hero (dark banner) ---------- */ .page-hero { padding-top: var(--header-h); } .page-hero__card { min-height: clamp(380px, 38vw, 500px); background: #0b0e16; color: #fff; display: flex; flex-direction: column; justify-content: space-between; } .page-hero__card::before { background: linear-gradient(90deg, rgba(5,8,16,.78) 0%, rgba(5,8,16,.4) 50%, rgba(5,8,16,.1) 100%); } .page-hero__top { padding: 26px clamp(24px, 4vw, 50px) 0; } .page-hero .crumbs ol { margin: 0; color: rgba(255,255,255,.7); display: inline-flex; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); padding: 10px 16px; border-radius: 12px; font-family: var(--font-body); } .page-hero .crumbs li + li::before { content: "_"; margin-right: 6px; opacity: .8; } .page-hero .crumbs a:hover { color: #fff; } .page-hero__body { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 60px; max-width: none; padding: clamp(24px, 4vw, 50px); } .page-hero__title { color: #fff; font-size: clamp(46px, 7vw, 100px); line-height: 1.02; letter-spacing: -.05em; max-width: 900px; } .page-hero__title em { color: var(--accent); } .page-hero__sub { color: rgba(255,255,255,.75); max-width: 420px; margin: 0 0 12px; font: 500 18px/1.5 var(--font-display); letter-spacing: -.02em; } /* ---------- Services archive ---------- */ .svc-mini-grid { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .svc-mini { position: relative; display: grid; gap: 14px; align-content: start; padding: 34px; border-radius: var(--r); background: var(--surface); min-height: 290px; transition: background .4s var(--ease), color .4s, transform .4s var(--ease); } .svc-mini__icon { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand-ui) 10%, transparent); color: var(--brand-ui); margin-bottom: 10px; transition: .4s; } .svc-mini__title { font: 500 25px/1.2 var(--font-display); letter-spacing: -.04em; color: var(--text); } .svc-mini__text { color: var(--muted); font-size: 15px; } .svc-mini__go { margin-top: auto; padding-top: 10px; font: 600 12.5px var(--font-body); text-transform: uppercase; letter-spacing: .04em; color: var(--text); display: inline-flex; gap: 8px; align-items: center; } .svc-mini:hover { background: var(--ink); transform: translateY(-4px); } .svc-mini:hover .svc-mini__title, .svc-mini:hover .svc-mini__go { color: #fff; } .svc-mini:hover .svc-mini__text { color: rgba(255,255,255,.65); } .svc-mini:hover .svc-mini__icon { background: var(--accent); color: #fff; } .cap-list { position: relative; border-top: 1px solid rgba(255,255,255,.12); } .cap-item { position: relative; z-index: 1; display: grid; grid-template-columns: 60px 1fr; gap: 6px 24px; align-items: center; padding: 30px 0; border-bottom: 1px solid rgba(255,255,255,.12); color: #fff; transition: padding .45s var(--ease); } @media (min-width: 900px) { .cap-item { grid-template-columns: 90px 1.2fr 1fr 60px; } } .cap-item:hover { padding-left: 20px; } .cap-item__num { font: 400 15px var(--font-mono); color: rgba(255,255,255,.5); } .cap-item__title { font: 500 clamp(26px, 3.4vw, 48px)/1.05 var(--font-display); letter-spacing: -.05em; transition: color .3s; } .cap-item:hover .cap-item__title { color: var(--accent); } .cap-item__tags { color: rgba(255,255,255,.55); font-size: 14px; grid-column: 2; } @media (min-width: 900px) { .cap-item__tags { grid-column: auto; } } .cap-item__go { display: none; width: 54px; height: 54px; border-radius: 14px; border: 1px solid rgba(255,255,255,.2); place-items: center; transition: .4s var(--ease); } @media (min-width: 900px) { .cap-item__go { display: grid; } } .cap-item:hover .cap-item__go { background: #fff; color: #111318; transform: rotate(45deg); } .cap-list__float { position: fixed; left: 0; top: 0; width: 300px; height: 220px; object-fit: cover; border-radius: 18px; pointer-events: none; z-index: 0; opacity: 0; transform: translate(-50%, -50%) scale(.8); transition: opacity .35s, transform .35s var(--ease); } .cap-list__float.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); } @media (hover: none) { .cap-list__float { display: none; } } .statement { text-align: center; } .statement__small { color: var(--muted); font: 500 16px var(--font-body); margin-bottom: 18px; } .statement__big { font: 500 clamp(36px, 5.6vw, 80px)/1.02 var(--font-display); letter-spacing: -.05em; color: var(--text); max-width: 1100px; margin: 0 auto 40px; } /* ---------- Detail (single service) ---------- */ .detail { gap: clamp(40px, 5vw, 80px); } @media (min-width: 1000px) { .detail { grid-template-columns: minmax(0, 1fr) 400px; } } .detail__images { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); margin: 44px 0; } .detail__img { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3.4; background: var(--soft); } .detail__img--tall { aspect-ratio: 4 / 4.2; } .detail__img img, .detail__img .art { width: 100%; height: 100%; object-fit: cover; } .how { margin-top: 70px; } .how__list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .how__list li { display: flex; gap: 16px; align-items: flex-start; padding: 24px; border-radius: var(--r); background: var(--surface); color: var(--text); font-weight: 600; } .how__list span { font: 400 14px var(--font-mono); color: var(--accent); padding-top: 3px; } .side-list { display: grid; gap: 8px; } .side-list a { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px; border-radius: 14px; background: var(--surface); color: var(--text); font: 500 17px var(--font-display); letter-spacing: -.02em; transition: .3s var(--ease); } .side-list a svg { opacity: .4; transition: .3s; } .side-list a:hover, .side-list a[aria-current] { background: var(--ink); color: #fff; } .side-list a:hover svg, .side-list a[aria-current] svg { opacity: 1; transform: rotate(45deg); } .brochure { position: relative; margin-top: 20px; border-radius: var(--r); overflow: hidden; background: var(--ink); color: #fff; padding: 36px 32px; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; gap: 24px; isolation: isolate; } .brochure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: .55; } .brochure h3 { color: #fff; font-size: 28px; letter-spacing: -.04em; } .brochure .btn { width: fit-content; } .side-cta { margin-top: 20px; padding: 30px; border-radius: var(--r); background: var(--surface); display: grid; gap: 10px; } .side-cta h3 { font-size: 22px; } .side-cta p { color: var(--muted); font-size: 15px; } .side-cta a { font: 500 22px var(--font-display); color: var(--text); letter-spacing: -.03em; } /* ---------- Contact block ---------- */ .contact-block__grid { display: grid; gap: var(--gutter) 60px; } @media (min-width: 1000px) { .contact-block__grid { grid-template-columns: 1fr 1fr; } } .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 40px 30px; } .info-grid__item h3 { font: 600 18px var(--font-display); letter-spacing: -.02em; margin-bottom: 12px; } .info-grid__item a, .info-grid__item p { display: block; color: var(--body); font-size: 15.5px; margin-bottom: 4px; } .info-grid__item .socials { margin-top: 6px; } .contact-block__form { background: var(--surface); border-radius: var(--r-lg); padding: clamp(28px, 4vw, 54px); } .contact-block__form-title { font-size: 30px; letter-spacing: -.04em; margin-bottom: 10px; } .contact-block__form > .muted { margin-bottom: 28px; } .contact-block__form .form-wrap { background: none; padding: 0; border-radius: 0; } .contact-block__form .field input:not([type="checkbox"]), .contact-block__form .field select, .contact-block__form .field textarea, .contact-block__form .chip span { background: var(--bg); } .contact-block__form .btn--primary { background: var(--accent); color: #fff; } .map-wrap { padding-bottom: var(--gutter); } .map { aspect-ratio: auto; height: 460px; border-radius: var(--r-lg); } /* ---------- Plans ---------- */ .plan { border-radius: var(--r-lg); background: var(--surface); } .plan__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .plan__badge { position: static; } .plan--featured { background: var(--ink); } .plan--featured .plan__name, .plan--featured .plan__price { color: #fff; } .plan--featured .plan__desc { color: rgba(255,255,255,.7); } /* ---------- Footer ---------- */ .site-footer { padding: var(--gutter) 0 var(--gutter); margin-top: clamp(60px, 8vw, 120px); } .site-footer__card { background: var(--ink); border-radius: var(--r-lg); padding: 20px; color: rgba(255,255,255,.7); } .subscribe { background: var(--ink-2); border-radius: var(--r); padding: clamp(36px, 5vw, 76px) clamp(24px, 4vw, 54px); display: grid; gap: 30px 60px; align-items: center; } @media (min-width: 900px) { .subscribe { grid-template-columns: 1fr 1fr; } } [data-theme="light"] .subscribe { background: #1a1a1a; } .subscribe__title { font: 500 clamp(30px, 3vw, 40px)/1.15 var(--font-display); letter-spacing: -.05em; color: #fff; margin-bottom: 18px; max-width: 460px; } .subscribe__text p { font-size: 15px; max-width: 460px; } .subscribe__form { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; } .subscribe__form input[type="email"] { flex: 1 1 240px; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.35); color: #fff; padding: 14px 0; font-size: 16px; } .subscribe__form input[type="email"]:focus { outline: none; border-color: #fff; } .subscribe__form input::placeholder { color: rgba(255,255,255,.5); } .subscribe__msg { flex-basis: 100%; font-size: 14px; color: #fff; } .site-footer__grid { padding: clamp(40px, 5vw, 70px) clamp(16px, 3vw, 34px); gap: 40px; } @media (min-width: 1000px) { .site-footer__grid { grid-template-columns: 1.4fr 1.4fr .8fr .9fr; } } .site-footer__title { font: 600 20px var(--font-display); color: #fff; letter-spacing: -.03em; margin-bottom: 22px; } .site-footer__title::before { content: none; } .site-footer__phone { display: block; font: 500 clamp(24px, 2.2vw, 30px) var(--font-display); color: #fff; letter-spacing: -.04em; margin-bottom: 12px; } .site-footer__contact .u-line { color: #fff; } .site-footer__addr { margin-top: 16px; font-size: 14.5px; max-width: 300px; } .site-footer__links { gap: 10px; } .site-footer__links a { font-size: 15px; color: rgba(255,255,255,.75); } .site-footer__links a:hover { color: #fff; } .site-footer .brand--footer { padding: 8px 16px 8px 8px; border-radius: 14px; } .site-footer__bottom { background: #fff; border-radius: 16px; padding: 18px 26px; border-top: 0; color: #6b7180; font-size: 14px; } /* keep the white bar clear of the floating WhatsApp (left) and back-to-top (right) buttons */ @media (min-width: 701px) { .site-footer__bottom { margin-inline: 64px; } } .site-footer__bottom .legal-links a { color: #6b7180; } .site-footer__bottom .legal-links a:hover { color: #111318; } /* Floating back-to-top */ .to-top { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 48px; height: 52px; border-radius: 14px; background: var(--accent); color: #fff; transform: translateY(20px); opacity: 0; visibility: hidden; transition: .4s var(--ease); display: grid; place-items: center; } .to-top.is-visible { transform: none; opacity: 1; visibility: visible; } .to-top:hover { background: var(--text); color: var(--bg); } /* ---------- Reveal directions & letter animation ---------- */ [data-reveal="left"] { transform: translateX(-50px); } [data-reveal="right"] { transform: translateX(50px); } [data-reveal="up"], [data-reveal=""] { transform: translateY(40px); } [data-reveal].is-in { transform: none; } [data-split] .w { display: inline-block; white-space: nowrap; } [data-split] .c { display: inline-block; opacity: 0; transform: translateY(.45em) rotate(6deg); transform-origin: 0 100%; transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i) * 14ms); } [data-split].is-in .c { opacity: 1; transform: none; } .no-js [data-split] .c { opacity: 1; transform: none; } .swash .c { animation: wave 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * 60ms); } @keyframes wave { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } } @media (prefers-reduced-motion: reduce) { [data-split] .c { opacity: 1; transform: none; transition: none; } .swash .c { animation: none; } .hero__slide .hero__img { transform: none; } } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .work-block__head, .work-list { margin-left: 0; } .about__visual { min-height: 0; order: 2; } .about__shape { display: none; } .about__stats { padding-top: 0; grid-template-columns: 1fr 1fr; } .hero__mini { display: none; } .hero__arrow { width: 40px; height: 64px; top: auto; bottom: 18px; transform: none; } .hero__arrow--prev { left: auto; right: 66px; } .hero__body { padding-bottom: 60px; align-self: flex-end; } .hero__slide { align-items: flex-end; } .quotes__media { min-height: 480px; } .detail__images { grid-template-columns: 1fr; } .tile--dark { padding-bottom: 92px; } } @media (max-width: 700px) { .hero__slider { height: 620px; } .hero__slide::before { background: linear-gradient(0deg, rgba(5,8,16,.85) 15%, rgba(5,8,16,.2) 75%); } .services-block__card, .work-block__card { border-radius: 20px; } .site-footer__bottom { flex-direction: column; align-items: flex-start; } .page-hero__card { display: flex; min-height: 380px; } .page-hero__card .page-hero__img { position: absolute; height: 100%; } .page-hero__card::before { display: block; background: linear-gradient(0deg, rgba(5,8,16,.85) 20%, rgba(5,8,16,.3)); } .wa-float { bottom: 84px; right: 20px; left: auto; width: 48px; height: 48px; } } .page-hero__card { align-items: stretch; } .page-hero__top { align-self: flex-start; } .svc-mini-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); } /* ===== v1.2.1 — edge-to-edge cards like the demo (20px side gap) ===== */ .site-header > .container, .hero > .container, .page-hero > .container, .services-block > .container, .work-block > .container, .site-footer > .container { max-width: none; } @media (min-width: 1000px) { .site-header__inner { padding-inline: calc(var(--gutter) + 20px); } .hero__body { padding-inline: clamp(60px, 6.5vw, 125px); } } /* keep text and grids inside the wide dark cards at a readable width */ .services-block__card, .work-block__card { padding-inline: max(clamp(20px, 3vw, 40px), calc((100% - 1420px) / 2)); } @media (min-width: 1181px) { .nav { padding: 12px; border-radius: 20px; } .nav__list > li > a { padding: 16px 22px; font-size: 15px; } .site-header__cta { padding: 22px 34px; font-size: 15px; } .hero__slider { height: clamp(600px, calc(100vh - var(--header-h) - 20px), 900px); } } @media (min-width: 1181px) { .site-header .btn.site-header__cta { padding: 24px 34px; font-size: 15px; border-radius: 16px; } } html, body { overflow-x: clip; } /* ===== v1.3 — header measured from the demo (66px menu bar, 40px items, 57px button) ===== */ :root { --header-h: 108px; } body:has(.site-header.has-topbar) { --header-h: 150px; } .site-header__inner { padding-block: 11px; } .nav { height: 66px; display: flex; align-items: center; padding: 0 17px; border-radius: 15px; box-shadow: none; } .nav__list { gap: 20px; } .nav__list > li > a { height: 40px; padding: 6px 20px 7px; border-radius: 10px; font: 700 14px/1 var(--font-body); letter-spacing: 0; } .site-header .btn.site-header__cta { height: 57px; padding: 0 40px; font-size: 14px; font-weight: 600; border-radius: 15px; } .site-header__actions { gap: 10px; } @media (max-width: 1500px) { .nav__list { gap: 4px; } .nav__list > li > a { padding-inline: 14px; } } @media (max-width: 1180px) { .site-header .btn.site-header__cta { height: 48px; padding: 0 22px; } } @media (max-width: 700px) { :root, body:has(.site-header.has-topbar) { --header-h: 80px; } } /* contact bar above the header on inner pages */ .topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 10px; } .topbar__left, .topbar__right { display: flex; align-items: center; gap: 6px 28px; background: #111; color: rgba(255,255,255,.7); font-size: 13px; font-weight: 500; height: 34px; padding: 0 20px; border-radius: 10px; } .topbar__left { flex: 1; } .topbar a { color: #fff; } .topbar a:hover { color: var(--accent); } .topbar__left span + span::before { content: "•"; margin-right: 28px; opacity: .6; } .topbar__social { display: flex; gap: 12px; } .topbar__social svg { width: 14px; height: 14px; } .site-header.is-scrolled .topbar { display: none; } @media (max-width: 900px) { .topbar { display: none; } body:has(.site-header.has-topbar) { --header-h: 108px; } } @media (max-width: 700px) { body:has(.site-header.has-topbar) { --header-h: 80px; } } /* ===== v1.3 — page title exactly like the demo ===== */ .page-hero { padding-top: var(--header-h); } .page-hero__card { height: 500px; min-height: 0; padding: 70px 0; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; background: #1f1f1f; border-radius: 25px; overflow: hidden; } .page-hero__card::before { background: linear-gradient(90deg, rgba(8,12,24,.55) 0%, rgba(8,12,24,.25) 45%, rgba(8,12,24,0) 75%); } .page-hero__img { object-fit: cover; } .page-hero__row { position: relative; width: 100%; max-width: 1380px; margin-inline: auto; padding: 0 20px 40px; } .page-hero__title { color: #f5f5f5; font: 500 clamp(52px, 7vw, 100px)/.9 var(--font-display); letter-spacing: -3px; max-width: none; margin: 0; } .page-hero__title em { color: var(--accent); font-style: normal; } .page-hero__vert { position: absolute; right: 30px; top: 50%; transform: translate(50%, -50%) rotate(-90deg); transform-origin: center; white-space: nowrap; font: 500 130px/1 var(--font-mono); letter-spacing: -6.5px; color: rgba(245,245,245,.9); pointer-events: none; z-index: 0; margin-top: -30px; } .page-hero__bar { position: absolute; left: 7px; right: 7px; bottom: 6px; height: 50px; border-radius: 15px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: linear-gradient(-91deg, var(--accent) 0%, var(--brand) 100%); color: #f5f5f5; z-index: 1; } .page-hero__bar .crumbs { padding: 0 30px; } .page-hero__bar .crumbs ol { display: flex; gap: 0; margin: 0; padding: 0; background: none; backdrop-filter: none; border-radius: 0; color: #f5f5f5; font: 600 14px/1 var(--font-body); } .page-hero__bar .crumbs li + li::before { content: "\00a0_"; margin: 0; opacity: 1; } .page-hero__bar .crumbs a { color: #f5f5f5; } .page-hero__bar .crumbs a:hover { opacity: .75; color: #fff; } .page-hero__tag { margin: 0; padding: 0 30px; font: 500 20px/1 var(--font-mono); letter-spacing: -1px; color: #f5f5f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .page-hero__top, .page-hero__body, .page-hero__sub:not(.screen-reader-text) { display: none; } @media (max-width: 1000px) { .page-hero__card { height: 380px; padding: 40px 0; } .page-hero__vert { font-size: 90px; right: 20px; } .page-hero__tag { font-size: 15px; } } @media (max-width: 700px) { .page-hero__card { height: 300px; display: flex; } .page-hero__card .page-hero__img { position: absolute; height: 100%; z-index: -2; } .page-hero__card::before { display: block; background: linear-gradient(0deg, rgba(8,12,24,.5), rgba(8,12,24,.1)); } .page-hero__vert { display: none; } .page-hero__tag { display: none; } .page-hero__bar .crumbs { padding: 0 18px; } .page-hero__row { padding-bottom: 30px; } } /* ===================================================================== v1.3 — alternative homepage designs (AI / Neural Networks / Chatbot) ===================================================================== */ .grad { font-style: normal; background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="dark"] .grad { background: linear-gradient(90deg, #6f9be0 0%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; } .gradient-num { display: block; font: 500 clamp(64px, 7vw, 100px)/1 var(--font-mono); letter-spacing: -.06em; background: linear-gradient(90deg, var(--brand), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="dark"] .gradient-num { background: linear-gradient(90deg, #6f9be0, var(--accent)); -webkit-background-clip: text; background-clip: text; } /* AI hero */ .hero--ai .hero__slider { height: clamp(600px, calc(100vh - var(--header-h) - 20px), 900px); } .hero--ai .hero__slide { align-items: flex-end; } .hero--ai .hero__slide::before { background: linear-gradient(90deg, rgba(8,14,32,.55) 0%, rgba(8,14,32,.25) 55%, rgba(8,14,32,.1) 100%); } .hero-ai__body { width: 100%; padding: 0 clamp(24px, 5.5vw, 105px) clamp(110px, 14vh, 170px); display: grid; gap: 30px 60px; align-items: end; color: #fff; } @media (min-width: 1100px) { .hero-ai__body { grid-template-columns: 1.5fr .65fr; } } .hero-ai__title { font: 500 clamp(44px, 5.5vw, 100px)/.95 var(--font-display); letter-spacing: -.05em; color: #fff; margin: 0; max-width: 1000px; } .hero-ai__side p { color: rgba(255,255,255,.9); font-size: 15px; margin-bottom: 26px; max-width: 360px; } .hero--ai .hero-ai__title, .hero--ai .hero-ai__side { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .hero--ai .hero__slide.is-active .hero-ai__title { opacity: 1; transform: none; transition-delay: .25s; } .hero--ai .hero__slide.is-active .hero-ai__side { opacity: 1; transform: none; transition-delay: .45s; } .hero__dots--pill { left: 18px; bottom: 18px; transform: none; background: #fff; border-radius: 12px; padding: 14px 16px; } .hero__dots--pill i { width: 3px; height: 16px; background: rgba(17,19,24,.25); } .hero__dots--pill i.is-active { width: 3px; background: #111318; } /* about with outline year */ .about2__card { background: var(--surface); border-radius: var(--r-lg); padding: clamp(50px, 7vw, 120px) clamp(20px, 5vw, 100px); } .about2__grid { display: grid; gap: 40px 80px; } @media (min-width: 1000px) { .about2__grid { grid-template-columns: 1fr 1fr; } } .about2__outline { display: block; font: 500 clamp(80px, 10vw, 150px)/1 var(--font-mono); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px var(--brand); margin-bottom: 30px; } [data-theme="dark"] .about2__outline { -webkit-text-stroke-color: #6f9be0; } .about2__strong { color: var(--text); font-weight: 600; } .about2__right p { color: var(--muted); max-width: 560px; } .about2__shape { display: grid; grid-template-columns: repeat(2, 140px); gap: 0; margin-top: 50px; } .about2__shape i { height: 140px; background: var(--soft); border-radius: 30px; } .about2__shape i:nth-child(2) { grid-column: 2; } .about2__shape i:nth-child(1) { grid-column: 1; } .about2__shape i:nth-child(3) { grid-column: 1; } .about2__shape i:nth-child(4) { grid-column: 2; } .about2__stats { display: flex; flex-wrap: wrap; gap: 30px 50px; margin-top: 50px; padding-top: 34px; border-top: 1px solid var(--line); } .about2__stats dd { margin: 0; font: 500 clamp(40px, 4vw, 60px)/1 var(--font-display); letter-spacing: -.05em; color: var(--text); } .about2__stats dt { color: var(--muted); font-size: 14px; margin-top: 8px; } /* project slider */ .proj-slider__head { display: grid; gap: 30px 60px; align-items: end; margin-bottom: clamp(30px, 4vw, 60px); } @media (min-width: 1000px) { .proj-slider__head { grid-template-columns: .6fr 1fr; } } .proj-slider__head .display { margin-bottom: 0; } .proj-slider__count small { display: block; color: var(--muted); font-size: 14px; margin-top: 8px; } .proj-slider__frame { position: relative; height: clamp(420px, 48vw, 720px); border-radius: var(--r-lg); overflow: hidden; background: #0b0e16; isolation: isolate; } .proj-slide { align-items: flex-end; } .proj-slide::before { background: linear-gradient(0deg, rgba(5,8,16,.35), rgba(5,8,16,0) 50%) !important; } .proj-slide__card { margin: 0 0 18px 18px; width: min(420px, calc(100% - 36px)); background: rgba(20,22,28,.92); backdrop-filter: blur(10px); border-radius: 20px; padding: 32px; color: #fff; display: grid; gap: 12px; opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease) .3s, transform .8s var(--ease) .3s; } .proj-slide.is-active .proj-slide__card { opacity: 1; transform: none; } .proj-slide__title { font: 500 clamp(20px, 1.8vw, 26px)/1.25 var(--font-display); letter-spacing: -.03em; } .proj-slide__text { color: rgba(255,255,255,.7); font-size: 14px; } .proj-slider__frame .hero__dots { left: auto; right: 30px; transform: none; } .proj-slider__frame .hero__arrow--prev { left: auto; right: 82px; top: 30px; transform: none; height: 46px; } .proj-slider__frame .hero__arrow--next { top: 30px; transform: none; height: 46px; right: 30px; } /* team */ .team2__grid { display: grid; gap: 40px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: start; } @media (min-width: 1100px) { .team2__grid { grid-template-columns: 1.4fr 1fr 1fr; } .team2__card:nth-child(3) { margin-top: 40px; } } .team2__head .display { font-size: clamp(36px, 4.4vw, 64px); } .team2__card { display: grid; gap: 6px; color: var(--text); } .team2__media { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4/4.4; background: var(--soft); margin-bottom: 18px; } .team2__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .team2__card:hover .team2__media img { transform: scale(1.05); } .team2__word { position: absolute; left: 0; right: 0; bottom: -14px; text-align: center; font: 500 clamp(54px, 5vw, 80px)/1 var(--font-display); letter-spacing: -.05em; color: rgba(255,255,255,.92); } .team2__share { position: absolute; top: 14px; left: 14px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(17,19,24,.55); color: #fff; backdrop-filter: blur(6px); } .team2__role { color: var(--muted); font-size: 13px; } .team2__name { font: 500 22px var(--font-display); letter-spacing: -.03em; } /* steps */ .steps__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: clamp(30px, 4vw, 60px); } .steps__head .display { margin-bottom: 0; } .steps__nav { display: flex; gap: 4px; padding: 4px; border-radius: 14px; border: 1px solid var(--accent); } .steps__nav button { width: 44px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--text); transition: background .25s, color .25s; } .steps__nav button:hover { background: var(--accent); color: #fff; } .steps__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 60px) / 3); gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; padding-bottom: 6px; } .steps__track::-webkit-scrollbar { display: none; } @media (max-width: 1000px) { .steps__track { grid-auto-columns: calc((100% - 30px) / 2); } } @media (max-width: 640px) { .steps__track { grid-auto-columns: 86%; } } .pstep { scroll-snap-align: start; display: flex; gap: 22px; align-items: flex-start; } .pstep__num { flex-shrink: 0; font: 500 clamp(56px, 5vw, 80px)/.85 var(--font-mono); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px var(--brand); } [data-theme="dark"] .pstep__num { -webkit-text-stroke-color: #6f9be0; } .pstep__title { font: 600 20px var(--font-display); letter-spacing: -.03em; margin: 0 0 12px; } .pstep p { color: var(--muted); font-size: 15px; margin: 0; } /* quotes 2 */ .quotes2__head { display: grid; gap: 30px 60px; align-items: end; margin-bottom: clamp(30px, 4vw, 60px); } @media (min-width: 1000px) { .quotes2__head { grid-template-columns: .6fr 1fr; } } .quotes2__head .display { margin-bottom: 0; } .quotes2__frame { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 560px; display: flex; align-items: flex-end; justify-content: flex-end; padding: 18px; isolation: isolate; } .quotes2__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .quotes2__card { position: relative; background: #1f1f1f; color: #fff; border-radius: 20px; padding: clamp(28px, 4vw, 50px); width: min(100%, 560px); } /* FAQ 2 */ .faq2__card { background: var(--surface); border-radius: var(--r-lg); padding: clamp(50px, 7vw, 110px) clamp(20px, 5vw, 100px); display: grid; gap: 40px 80px; align-items: center; overflow: hidden; } @media (min-width: 1000px) { .faq2__card { grid-template-columns: .8fr 1fr; } } .faq2__shape { display: grid; place-items: center; } .faq2__shape img { width: min(100%, 360px); opacity: .12; filter: grayscale(1); } [data-theme="dark"] .faq2__shape img { opacity: .2; filter: grayscale(1) invert(1); } .faq2__body .display { font-size: clamp(34px, 4vw, 60px); } .faq2 .accordion__item { background: transparent; border-bottom: 1px solid var(--line); border-radius: 0; } .faq2 .accordion__q button { padding-inline: 0; } .faq2 .accordion__inner { padding-left: 0; } /* closing CTA */ .cta2__card { position: relative; border-radius: var(--r-lg); overflow: hidden; padding: clamp(70px, 9vw, 150px) clamp(24px, 6vw, 110px); isolation: isolate; color: #fff; } .cta2__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .cta2__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,14,32,.75), rgba(8,14,32,.25)); } .cta2__title { color: #fff; font: 500 clamp(36px, 5vw, 80px)/1 var(--font-display); letter-spacing: -.05em; max-width: 1000px; margin: 0 0 40px; } /* Neural hero */ .hero--neural { padding-top: calc(var(--header-h) + 10px); } .hero-neural__top { display: grid; gap: 30px 60px; align-items: center; padding: clamp(20px, 3vw, 40px) clamp(0px, 3vw, 60px) clamp(30px, 3vw, 50px); } @media (min-width: 1100px) { .hero-neural__top { grid-template-columns: 1.4fr .6fr; } } .hero-neural__title { font: 500 clamp(46px, 6vw, 100px)/.98 var(--font-display); letter-spacing: -.05em; margin: 0; max-width: 1000px; } .hero-neural__side p { color: var(--muted); font-size: 15px; margin-bottom: 26px; max-width: 360px; } .hero-neural__slider { height: clamp(380px, 46vw, 680px); background: var(--soft); } .hero-neural__slider .hero__slide::before { display: none; } .hero-neural__arrows { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); z-index: 5; display: grid; gap: 4px; padding: 6px; background: #fff; border-radius: 14px; } .hero-neural__arrows button { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: #111318; } .hero-neural__arrows button:hover { background: var(--accent); color: #fff; } /* services with icons */ .svc-icons__grid { display: grid; gap: 40px 80px; } @media (min-width: 1000px) { .svc-icons__grid { grid-template-columns: 1fr 1fr; } } .svc-icons__list { display: grid; gap: 40px; } .svc-icon { display: flex; gap: 30px; color: var(--text); } .svc-icon .pixel-icon, .svc-icon svg { flex-shrink: 0; } .svc-icon__title { display: block; font: 600 22px var(--font-display); letter-spacing: -.03em; margin-bottom: 10px; transition: color .25s; } .svc-icon:hover .svc-icon__title { color: var(--accent); } .svc-icon__text { display: block; color: var(--muted); font-size: 15px; } /* feature cards */ .fcards__head { text-align: center; } .fcards__head .display, .fcards__head .mono-label { margin-inline: auto; } .fcards__grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .fcard { position: relative; min-height: 380px; border-radius: 20px; overflow: hidden; padding: 30px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; isolation: isolate; color: var(--text); transition: transform .5s var(--ease); } .fcard:hover { transform: translateY(-6px); } .fcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease); } .fcard:hover .fcard__img { transform: scale(1.06); } .fcard--image, .fcard--light { color: #fff; } .fcard--image::before, .fcard--light::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8,14,32,.8), rgba(8,14,32,.05) 70%); } .fcard--light::before { background: linear-gradient(0deg, rgba(23,69,130,.85), rgba(23,69,130,.15) 70%); } .fcard--dark { background: var(--ink); color: #fff; background-image: radial-gradient(circle at 100% 0%, rgba(231,44,70,.35), transparent 55%); } .fcard svg:first-of-type { position: absolute; top: 30px; left: 30px; } .fcard--image svg:first-of-type, .fcard--light svg:first-of-type, .fcard--dark svg:first-of-type { filter: brightness(0) invert(1); } .fcard__title { font: 500 24px/1.2 var(--font-display); letter-spacing: -.03em; } .fcard__text { font-size: 14px; opacity: .8; } .fcard__go { position: absolute; right: 20px; bottom: 20px; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.15); backdrop-filter: blur(6px); } /* about with image */ .about3__grid { display: grid; gap: 40px 80px; align-items: center; } @media (min-width: 1000px) { .about3__grid { grid-template-columns: .9fr 1.1fr; } } .about3__media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 1/1; background: var(--soft); } .about3__media img { width: 100%; height: 100%; object-fit: cover; } .about3__title { font: 500 clamp(28px, 3vw, 44px)/1.15 var(--font-display); letter-spacing: -.04em; margin: 0 0 24px; } .about3__body p { color: var(--muted); } /* Chatbot hero */ .hero--chat { padding-top: var(--header-h); } .hero-chat__grid { display: grid; gap: 30px; align-items: center; min-height: calc(100vh - var(--header-h)); } @media (min-width: 1000px) { .hero-chat__grid { grid-template-columns: 1.05fr .95fr; } } .hero-chat__body { padding: 30px 0 30px clamp(0px, 5vw, 105px); } .hero-chat__title { font: 500 clamp(44px, 5.4vw, 92px)/1 var(--font-display); letter-spacing: -.05em; margin: 0 0 30px; } .hero-chat__text { color: var(--muted); max-width: 520px; margin-bottom: 40px; } .hero-chat__form { display: flex; gap: 6px; padding: 6px; background: var(--surface); border-radius: 15px; max-width: 520px; box-shadow: 0 20px 40px -30px rgba(0,0,0,.4); flex-wrap: wrap; } .hero-chat__form input[type="email"] { flex: 1 1 200px; border: 0; background: transparent; padding: 0 16px; min-height: 50px; color: var(--text); font: inherit; outline: none; } .hero-chat__form .btn { min-height: 50px; } .hero-chat__form .subscribe__msg { flex-basis: 100%; margin: 6px 12px; font-size: 14px; color: var(--muted); } .hero-chat__checks { display: flex; gap: 24px; margin-top: 18px; color: var(--muted); font-size: 13px; } .hero-chat__checks li { display: flex; align-items: center; gap: 8px; } .hero-chat__checks svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--accent); color: #fff; } .hero-chat__media { position: relative; border-radius: var(--r-lg); overflow: hidden; height: min(calc(100vh - var(--header-h) - 20px), 860px); min-height: 480px; background: #b9bec7; } .hero-chat__media > img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } /* dashboard */ .dash__grid { display: grid; gap: 40px 80px; align-items: center; } @media (min-width: 1000px) { .dash__grid { grid-template-columns: 1.1fr .9fr; } .dash--flip .dash__visual { order: 2; } } .dash__visual { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 1.1/1; isolation: isolate; padding: clamp(30px, 5vw, 70px) 0 0 clamp(30px, 5vw, 70px); } .dash__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .dash__ui { height: 100%; display: grid; grid-template-columns: 70px 1fr; background: rgba(17,19,24,.82); backdrop-filter: blur(14px); border-radius: 20px 0 0 0; color: #fff; overflow: hidden; } .dash__side { display: grid; align-content: start; justify-items: center; gap: 16px; padding: 20px 0; background: rgba(255,255,255,.04); } .dash__side img { width: 34px; margin-bottom: 10px; } .dash__side i { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.08); } .dash__side i.is-on { background: var(--accent); } .dash__main { padding: 26px; display: grid; gap: 18px; align-content: start; } .dash__main b { font: 500 22px var(--font-display); letter-spacing: -.03em; } .dash__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .dash__kpis span { background: rgba(255,255,255,.07); border-radius: 14px; padding: 16px; font: 600 26px var(--font-display); } .dash__kpis small { display: block; font: 500 12px var(--font-body); color: rgba(255,255,255,.6); margin-bottom: 8px; } .dash__chart { width: 100%; height: 90px; color: var(--accent); background: rgba(255,255,255,.04); border-radius: 14px; } .dash__bars { display: flex; align-items: flex-end; gap: 12px; height: 110px; padding: 14px; background: rgba(255,255,255,.04); border-radius: 14px; } .dash__bars i { flex: 1; height: var(--h); border-radius: 6px; background: linear-gradient(180deg, #6f9be0, var(--brand)); } .dash__bars i:nth-child(4) { background: linear-gradient(180deg, #ff6b80, var(--accent)); } .checks { display: grid; gap: 22px; margin: 10px 0 0; } .checks li { display: flex; gap: 14px; align-items: flex-start; } .checks__icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--accent); color: #fff; margin-top: 2px; } .checks b { font: 600 18px var(--font-display); letter-spacing: -.02em; } /* process tabs */ .ptabs__grid { display: grid; gap: 40px 80px; align-items: center; } @media (min-width: 1000px) { .ptabs__grid { grid-template-columns: .9fr 1.1fr; } } .ptabs__list { display: grid; gap: 10px; } .ptab { display: flex; gap: 18px; text-align: left; padding: 22px 24px; border-radius: 20px; color: var(--text); transition: background .3s; align-items: flex-start; } .ptab[aria-selected="true"] { background: var(--surface); box-shadow: 0 20px 40px -30px rgba(0,0,0,.35); } .ptab__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--soft); color: var(--muted); transition: .3s; } .ptab[aria-selected="true"] .ptab__icon { background: var(--accent); color: #fff; } .ptab__title { display: block; font: 600 19px var(--font-display); letter-spacing: -.02em; margin-bottom: 8px; } .ptab__text { display: block; color: var(--muted); font-size: 14px; } .ptab[aria-selected="false"] .ptab__text { opacity: .7; } .ptabs__media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 1.1/1; background: var(--soft); } .ptabs__panel, .ptabs__panel img { width: 100%; height: 100%; object-fit: cover; } .ptabs__panel:not([hidden]) { animation: quoteIn .7s var(--ease); } .page-hero__vert { top: auto; right: auto; left: calc(100% + 14px); bottom: 62px; margin: 0; transform: rotate(-90deg); transform-origin: 0 100%; line-height: .8; } @media (max-width: 1000px) { .page-hero__vert { left: calc(100% + 8px); } } .about2 > .container, .faq2 > .container { max-width: none; } .about2__card, .faq2__card { padding-inline: max(clamp(20px, 5vw, 100px), calc((100% - 1380px) / 2)); } .hero__dots--pill { left: 96px; } .proj-slider > .container:last-child, .quotes2 > .container { max-width: none; } .quotes2__head { max-width: 1380px; margin-inline: auto; } .proj-slider__frame { height: clamp(460px, 44vw, 820px); } .proj-slider__frame .hero__arrow--prev { right: 86px; } .cta2 > .container { max-width: none; } .cta2__card { padding-inline: max(clamp(24px, 6vw, 110px), calc((100% - 1380px) / 2)); } @media (min-width: 1000px) { .fcards__grid { grid-template-columns: repeat(3, 1fr); } .fcard:nth-child(3n+2) { min-height: 440px; } } .quotes2__card .quotes__nav { background: rgba(255,255,255,.08); } .quotes2__card .quotes__nav button { color: #fff; } .hero-neural__arrows { left: 18px; top: 18px; transform: none; } .hero-chat__form { flex-wrap: nowrap; align-items: center; } .hero-chat__form input[type="email"] { width: auto; min-width: 0; flex: 1 1 auto; box-shadow: none; } .hero-chat__form .btn { flex-shrink: 0; } .hero-chat__form:has(.subscribe__msg) { flex-wrap: wrap; } .hero-chat__form .form__hp { position: absolute; left: -9999px; } @media (max-width: 480px) { .hero-chat__form { flex-wrap: wrap; } .hero-chat__form .btn { width: 100%; justify-content: center; } } /* ===== v1.6 ===== */ /* Header: one continuous bar the full width of the page content (logo, menu, icons, button). */ .site-header .site-header__inner { width: calc(100% - 2 * var(--gutter)); margin: 10px auto 0; padding: 8px 10px 8px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 16px 40px -26px rgba(8, 12, 22, .45); backdrop-filter: none; -webkit-backdrop-filter: none; } .site-header.is-scrolled .site-header__inner { background: var(--surface); box-shadow: 0 18px 44px -24px rgba(8, 12, 22, .55); border-radius: 20px; } .site-header .nav { background: transparent; box-shadow: none; height: 60px; } .site-header .icon-btn { background: var(--soft); } .site-header .icon-btn:hover { background: var(--line); } .site-header .site-header__left { background: none; box-shadow: none; padding: 0; } @media (max-width: 700px) { .site-header .site-header__inner { padding: 6px 6px 6px 12px; margin-top: 8px; } } /* Logo: colour version in light mode, white version in dark mode */ .brand .brand__logo { height: 50px; width: auto; max-height: none; display: block; } .brand .brand__logo--dark { display: none; } [data-theme="dark"] .brand .brand__logo--light { display: none; } [data-theme="dark"] .brand .brand__logo--dark { display: block; } @media (max-width: 700px) { .brand .brand__logo { height: 40px; } } .brand--footer .brand__logo { height: 58px; } /* Big outline words: size to the longest word so both always fit, and never slide under the next section */ .outline-text { font-size: clamp(44px, 10.5vw, 190px); margin-bottom: clamp(24px, 4vw, 60px); overflow: visible; } .outline-text span:last-child { margin-left: 4vw; } /* Work section: cards that pin and stack as you scroll */ .work-stack { position: relative; margin-top: clamp(36px, 5vw, 70px); display: grid; gap: clamp(28px, 4vh, 48px); } .stack-card { position: sticky; top: calc(var(--header-h) + 24px + var(--i) * 16px); display: grid; grid-template-columns: 1fr; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 30px 70px -40px rgba(8, 12, 22, .45); transform-origin: 50% 0; will-change: transform; min-height: min(560px, calc(100vh - var(--header-h) - 80px)); } @media (min-width: 900px) { .stack-card { grid-template-columns: 1.15fr 1fr; } } .stack-card__media { position: relative; display: block; min-height: 260px; overflow: hidden; background: var(--soft); } .stack-card__media img, .stack-card__media .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .stack-card:hover .stack-card__media img { transform: scale(1.04); } .stack-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: clamp(26px, 3.4vw, 54px); } .stack-card__top { display: flex; align-items: center; gap: 14px; } .stack-card__num { font: 400 14px var(--font-mono); color: #fff; background: var(--accent); padding: 6px 10px; border-radius: 8px; } .stack-card__cat { font: 500 13px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .stack-card__title { font: 500 clamp(26px, 2.8vw, 42px)/1.1 var(--font-display); letter-spacing: -.04em; margin: 6px 0 0; } .stack-card__title a { color: var(--text); } .stack-card__metric { margin: 0; color: var(--muted); } .stack-card__metric strong { font: 500 clamp(30px, 3vw, 44px)/1 var(--font-mono); color: var(--accent); letter-spacing: -.04em; margin-right: 6px; } .stack-card__text { margin: 0 0 auto; color: var(--body); font-size: 16px; max-width: 520px; } .work-stack + .work-list__foot { padding-top: clamp(40px, 6vw, 80px); } @media (prefers-reduced-motion: reduce) { .stack-card { position: relative; top: auto; } } /* Page title banners (v1.6.2): show the whole illustration, right-aligned above the bottom bar, fading into a matching navy on the left — no top/bottom cropping, no clipped vertical word. */ .page-hero__card { background: radial-gradient(120% 140% at 85% 30%, #1b2547 0%, #10152e 45%, #0b0f22 100%); } .page-hero__card .page-hero__img { position: absolute; inset: 0 0 62px auto; left: auto; width: 78%; height: calc(100% - 62px); object-fit: contain; object-position: right center; z-index: -2; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%); mask-image: linear-gradient(90deg, transparent 0%, #000 26%); } .page-hero__card::before { background: linear-gradient(90deg, rgba(11,15,34,.55) 0%, rgba(11,15,34,.15) 45%, rgba(11,15,34,0) 70%); } .page-hero__vert { display: none !important; } @media (max-width: 700px) { .page-hero__card .page-hero__img { width: 100%; inset: 0 0 62px 0; object-position: right top; opacity: .55; } } /* v1.8: app store buttons on product pages + company profile viewer */ .store-badges { display: flex; flex-wrap: wrap; gap: 10px; } .store-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 12px; background: #0b0e16; color: #fff; border: 1px solid rgba(255,255,255,.12); font: 600 16px/1.1 var(--font-display); transition: transform .25s var(--ease), background .25s; } .store-badge:hover { transform: translateY(-2px); background: #000; color: #fff; } .store-badge small { display: block; font: 500 11px/1.2 var(--font-body); opacity: .75; } [data-theme="dark"] .store-badge { background: #fff; color: #0b0e16; } .profile-viewer__frame { width: 100%; height: min(88vh, 1100px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--soft); } /* ========================================================================== 1.9.0 — services (full-width), services list, logos light/dark, products ========================================================================== */ /* Recognition logos: full colour, separate artwork for light / dark */ .logo-row { justify-content: space-around; gap: 34px 56px; } .logo-row__item { display: inline-flex; align-items: center; justify-content: center; min-height: 64px; } .logo-row img, [data-theme="dark"] .logo-row img { height: clamp(42px, 4.4vw, 62px); width: auto; max-width: 200px; filter: none; opacity: .92; } .logo-row img:hover { opacity: 1; filter: none; } .logo-row .logo--on-dark { display: none; } [data-theme="dark"] .logo-row .logo--on-light { display: none; } [data-theme="dark"] .logo-row .logo--on-dark { display: block; } /* Shared */ .sv-intro__grid, .sv-split, .sv-faq, .prod-intro__grid { display: grid; gap: clamp(32px, 5vw, 80px); align-items: center; } @media (min-width: 960px) { .sv-intro__grid { grid-template-columns: 1.05fr 1fr; } .sv-split { grid-template-columns: 1fr 1fr; } .sv-split--rev .sv-split__media { order: 2; } .sv-faq { grid-template-columns: .8fr 1.2fr; align-items: start; } .prod-intro__grid { grid-template-columns: 1fr 1.1fr; } } .sv-intro__media, .sv-split__media, .prod-intro__media { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--soft); } .sv-intro__media img, .sv-split__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform 1.2s var(--ease); } .sv-intro__media:hover img, .sv-split__media:hover img { transform: scale(1.04); } .sv-intro__media img { aspect-ratio: 4 / 3.4; } /* Service intro */ .sv-intro__body { margin-top: 22px; display: grid; gap: 16px; color: var(--body); font-size: 17px; line-height: 1.75; } .sv-intro__body p { margin: 0; } .sv-intro__cta { margin-top: 30px; } .sv-chip { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--surface); color: var(--text); font: 500 14px var(--font-body); box-shadow: var(--shadow); } .sv-chip svg { color: var(--accent); } .sv-stats { margin-top: clamp(40px, 5vw, 70px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); border-top: 1px solid var(--line-2); } .sv-stat { padding: 26px 24px 4px 0; display: grid; gap: 6px; } .sv-stat + .sv-stat { padding-left: 24px; border-left: 1px solid var(--line); } .sv-stat b { font: 500 clamp(34px, 3.6vw, 50px)/1 var(--font-display); letter-spacing: -.04em; color: var(--text); } .sv-stat span { color: var(--muted); font-size: 15px; } @media (max-width: 760px) { .sv-stat + .sv-stat { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } } /* Deliverables */ .sv-deliver { display: grid; gap: clamp(16px, 1.6vw, 24px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); } @media (min-width: 1040px) { .sv-deliver { grid-template-columns: repeat(3, 1fr); } } .sv-deliver__item { padding: clamp(26px, 2.4vw, 36px); border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); display: grid; gap: 12px; align-content: start; transition: transform .4s var(--ease), border-color .3s; } .sv-deliver__item:hover { transform: translateY(-4px); border-color: var(--accent); } .sv-deliver__icon { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); margin-bottom: 6px; } .sv-deliver__item h3 { font-size: 22px; letter-spacing: -.03em; } .sv-deliver__item p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.65; } /* Use cases */ .sv-uses { list-style: none; margin: 0; padding: 0; display: grid; } .sv-uses li { display: grid; grid-template-columns: 54px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); } .sv-uses li:last-child { border-bottom: 1px solid var(--line); } .sv-uses__num { font: 400 14px var(--font-mono); color: var(--accent); padding-top: 5px; } .sv-uses h3 { font-size: 21px; margin-bottom: 6px; } .sv-uses p { margin: 0; color: var(--muted); font-size: 15.5px; } /* Process */ .sv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(16px, 1.6vw, 24px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); counter-reset: s; } .sv-steps li { position: relative; padding: 30px 26px 30px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); } .sv-steps li::after { content: ""; position: absolute; top: 46px; right: -18px; width: 14px; height: 2px; background: var(--line-2); } .sv-steps li:last-child::after { display: none; } .sv-steps__num { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: #fff; font: 500 14px var(--font-mono); margin-bottom: 18px; } .sv-steps h3 { font-size: 22px; margin-bottom: 10px; } .sv-steps p { margin: 0; color: var(--muted); font-size: 15px; } @media (max-width: 1100px) { .sv-steps li::after { display: none; } } /* Outcomes */ .sv-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .sv-checks li { display: flex; gap: 14px; align-items: flex-start; font-size: 17px; color: var(--text); } .sv-checks svg { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); } .sv-stack-label { margin: 34px 0 12px; font: 400 13px var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } /* FAQ */ .sv-faq__list { display: grid; gap: 12px; } .sv-faq__item { border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); overflow: hidden; } .sv-faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 24px; font: 500 19px/1.35 var(--font-display); color: var(--text); } .sv-faq__item summary::-webkit-details-marker { display: none; } .sv-faq__item summary span { position: relative; flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line-2); } .sv-faq__item summary span::before, .sv-faq__item summary span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: currentColor; transition: transform .3s var(--ease); } .sv-faq__item summary span::after { transform: rotate(90deg); } .sv-faq__item[open] summary span::after { transform: rotate(0); } .sv-faq__item[open] summary span { background: var(--accent); border-color: var(--accent); color: #fff; } .sv-faq__item p { margin: 0; padding: 0 24px 22px; color: var(--body); } /* More services */ .sv-more { display: grid; gap: clamp(14px, 1.4vw, 20px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); } .sv-more__item { display: grid; gap: 12px; } .sv-more__img { display: block; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; background: var(--soft); } .sv-more__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); } .sv-more__item:hover img { transform: scale(1.06); } .sv-more__title { display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 500 18px var(--font-display); color: var(--text); } .sv-more__item:hover .sv-more__title { color: var(--accent); } /* Services list (archive): one row per service */ .svc-rows { display: grid; gap: clamp(20px, 2.4vw, 32px); } .svc-row { display: grid; gap: 0; border-radius: var(--r-lg); background: var(--surface); overflow: hidden; border: 1px solid var(--line); } @media (min-width: 900px) { .svc-row { grid-template-columns: 1.05fr 1fr; min-height: 420px; } .svc-row:nth-child(even) .svc-row__media { order: 2; } } .svc-row__media { position: relative; display: block; overflow: hidden; min-height: 260px; background: var(--soft); } .svc-row__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); } .svc-row:hover .svc-row__media img { transform: scale(1.05); } .svc-row__num { position: absolute; left: 20px; top: 20px; padding: 8px 12px; border-radius: 10px; background: rgba(7, 10, 18, .65); color: #fff; font: 500 13px var(--font-mono); backdrop-filter: blur(6px); } .svc-row__body { padding: clamp(28px, 3.4vw, 54px); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; justify-content: center; } .svc-row__icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); } .svc-row__kicker { margin: 0; font: 400 13px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .svc-row__title { font-size: clamp(28px, 3vw, 42px); letter-spacing: -.04em; } .svc-row__title a:hover { color: var(--accent); } .svc-row__text { margin: 0; color: var(--body); font-size: 17px; max-width: 520px; } .svc-row__list { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 8px 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); width: 100%; } .svc-row__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--text); } .svc-row__list svg { flex: none; color: var(--accent); margin-top: 3px; } /* Products */ .prod-logo { width: 52px; height: 52px; border-radius: 14px; object-fit: contain; background: #fff; padding: 4px; box-shadow: 0 0 0 1px var(--line-2); flex: none; } .prod-logo--lg { width: 84px; height: 84px; border-radius: 22px; padding: 6px; } .project-card__brand { display: flex; align-items: center; gap: 14px; } .project-card__brand .card__title { margin: 0; } .project-card--product .card__media img { object-fit: cover; object-position: left center; } .project-card__site { margin: 0; font-size: 14px; position: relative; z-index: 3; } .project-card__site a { display: inline-flex; gap: 6px; align-items: center; color: var(--accent); } .prod-intro__brand { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; } .prod-intro__brand .mono-label { margin-bottom: 6px; display: block; } .prod-intro__brand h2 { font-size: clamp(34px, 4vw, 56px); letter-spacing: -.045em; } .prod-intro__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .prod-intro__site { margin-top: 16px; } .prod-intro__site a { display: inline-flex; gap: 6px; align-items: center; } .prod-intro__media img { width: 100%; display: block; height: auto; max-height: 600px; object-fit: cover; } .prod-gallery { display: grid; gap: clamp(14px, 1.6vw, 22px); } .prod-gallery figure { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--surface); } .prod-gallery img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .9s var(--ease); } .prod-gallery figure:hover img { transform: scale(1.04); } .prod-gallery--phones { grid-template-columns: repeat(auto-fit, minmax(min(46%, 170px), 1fr)); } .prod-gallery--phones figure { background: linear-gradient(160deg, color-mix(in srgb, #7c5cff 18%, var(--surface)), var(--surface)); padding: 18px 10px 0; } .prod-gallery--phones img { object-fit: contain; aspect-ratio: 339 / 735; height: auto; } .prod-gallery--square { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .prod-gallery--square img { aspect-ratio: 1; } .prod-gallery--cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .prod-gallery--cards img { aspect-ratio: 4 / 3; } .prod-gallery--cards figure:first-child { grid-column: 1 / -1; } .prod-gallery--cards figure:first-child img { aspect-ratio: 1200 / 630; max-height: 520px; } .prod-gallery__more { margin-top: 30px; } /* ========================================================================== 1.10.0 — client marquee, BWJ mark, WhatsApp icon, About sections ========================================================================== */ /* Light / dark artwork switch (anywhere) */ .logo--on-dark { display: none !important; } [data-theme="dark"] .logo--on-light { display: none !important; } [data-theme="dark"] .logo--on-dark { display: block !important; } /* Client marquee — every client logo from the live site, two rows */ .clients { display: grid; gap: 18px; margin-inline: calc(var(--gutter) * -1); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .clients__row { overflow: hidden; } .clients__track { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; animation: bwj-marquee 55s linear infinite; } .clients__row--rev .clients__track { animation-direction: reverse; animation-duration: 62s; } .clients:hover .clients__track { animation-play-state: paused; } .client-tile { flex: none; display: grid; place-items: center; width: clamp(170px, 16vw, 240px); height: clamp(96px, 8vw, 124px); margin-right: 18px; padding: 18px 26px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); transition: border-color .3s, transform .3s var(--ease); } .client-tile:hover { border-color: var(--line-2); transform: translateY(-3px); } .client-tile img { max-width: 100%; max-height: 58px; width: auto; height: auto; object-fit: contain; } @keyframes bwj-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .clients { -webkit-mask-image: none; mask-image: none; margin-inline: 0; } .clients__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 14px; } .client-tile { margin-right: 0; } .client-tile[aria-hidden="true"] { display: none; } } .logo-row--badges { margin-top: clamp(36px, 4vw, 56px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line); justify-content: center; gap: 28px 64px; } .logo-row__label { width: 100%; text-align: center; font: 400 13px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } /* Stats on the homepage: BWJ mark instead of the plus shape */ .about__shape--mark { left: -40px; top: 40px; width: min(480px, 100%); height: auto; filter: none; opacity: 1; color: var(--soft); } .about__shape--mark .bwj-mark { display: block; width: 100%; height: auto; } [data-theme="dark"] .about__shape--mark { color: rgba(255, 255, 255, .045); } /* WhatsApp: bigger glyph, same button */ .wa-float svg { width: 34px; height: 34px; } @media (max-width: 1180px) { .wa-float svg { width: 30px; height: 30px; } } /* About — core values */ .values { display: grid; gap: clamp(14px, 1.4vw, 20px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); } .values__item { position: relative; display: grid; gap: 12px; align-content: start; padding: 30px 26px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); transition: transform .4s var(--ease), border-color .3s; } .values__item:hover { transform: translateY(-4px); border-color: var(--accent); } .values__num { position: absolute; top: 24px; right: 24px; font: 400 13px var(--font-mono); color: var(--muted); } .values__item h3 { font-size: 22px; letter-spacing: -.03em; } .values__item p { margin: 0; color: var(--muted); font-size: 15.5px; } /* About — journey timeline */ .timeline { list-style: none; margin: 0; padding: 0 0 0 34px; position: relative; display: grid; gap: 22px; } .timeline::before { content: ""; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--accent), var(--line-2)); border-radius: 2px; } .timeline__item { position: relative; padding: 26px 28px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); } .timeline__item::before { content: ""; position: absolute; left: -33px; top: 32px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 3px solid var(--accent); } .timeline__year { display: inline-block; font: 500 14px var(--font-mono); color: #fff; background: var(--accent); padding: 5px 10px; border-radius: 8px; margin-bottom: 12px; } .timeline__item h3 { font-size: clamp(21px, 2vw, 26px); margin-bottom: 8px; text-transform: none; } .timeline__item p { margin: 0; color: var(--body); font-size: 16px; line-height: 1.7; } /* About — road map */ .roadmap { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 1.4vw, 20px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); } @media (min-width: 1100px) { .roadmap { grid-template-columns: repeat(4, 1fr); } } .roadmap__item { padding: 28px 26px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); display: grid; gap: 10px; align-content: start; } .roadmap__num { font: 500 clamp(30px, 3vw, 42px)/1 var(--font-mono); letter-spacing: -.04em; color: var(--accent); } .roadmap__item h3 { font-size: 20px; } .roadmap__item p { margin: 0; color: var(--muted); font-size: 15px; } /* About — accreditation */ .creds { display: grid; gap: clamp(14px, 1.6vw, 24px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .cred { display: flex; flex-direction: column; gap: 12px; padding: clamp(26px, 2.6vw, 36px); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); } .cred__logo { height: 76px; display: flex; align-items: center; margin-bottom: 6px; } .cred__logo img { max-height: 70px; max-width: 220px; width: auto; height: auto; } .cred h3 { font-size: 22px; } .cred p { margin: 0; color: var(--muted); font-size: 15.5px; } .cred__id { margin-top: auto !important; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; } .cred__id span { font: 400 12px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; } .cred__id b { font: 500 14px var(--font-mono); color: var(--text); } .cred__link { display: inline-flex; gap: 6px; align-items: center; color: var(--accent); width: fit-content; } /* ========================================================================== 1.11.0 — header on scroll, theme switch, socials, article hero, legal pages ========================================================================== */ /* Header: slides away while scrolling down, returns on scroll up. Sticky elements follow it so nothing jumps or hides under the bar. */ :root { --sticky-top: calc(var(--header-h) + 24px); } :root.header-hidden { --sticky-top: 24px; } .site-header { transition: transform .4s var(--ease); will-change: transform; } .site-header.is-hidden { transform: translateY(calc(-100% - 16px)); } .sticky { top: var(--sticky-top); transition: top .4s var(--ease); } .stack-card { top: calc(var(--sticky-top) + var(--i) * 16px); transition: top .4s var(--ease); } @media (prefers-reduced-motion: reduce) { .site-header, .sticky, .stack-card { transition: none; } } /* Footer colour theme switch */ .theme-switch { display: inline-flex; gap: 4px; padding: 4px; margin-top: 22px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); } .theme-switch button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 0; border-radius: 10px; background: transparent; color: rgba(255, 255, 255, .7); font: 500 13px var(--font-body); cursor: pointer; transition: background .25s, color .25s; } .theme-switch button:hover { color: #fff; } .theme-switch button[aria-checked="true"] { background: #fff; color: #111318; } .theme-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Social icons: centred in their tiles everywhere */ .socials li { display: flex; } .socials a, .info-grid__item .socials a { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; line-height: 1; } .socials a svg { display: block; } .info-grid__item .socials { gap: 10px; } /* Single blog post header (no dark card behind it): readable in light and dark */ .page-hero--article .page-hero__title { color: var(--text); max-width: 1000px; } .page-hero--article .crumbs ol { color: var(--muted); background: var(--surface); border: 1px solid var(--line); backdrop-filter: none; } .page-hero--article .crumbs a { color: var(--body); } .page-hero--article .crumbs a:hover { color: var(--accent); } .page-hero--article .eyebrow { color: var(--muted); } /* Consent links */ .consent a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .consent { max-width: 460px; } /* Legal pages */ .legal-meta { font: 400 14px var(--font-mono); color: var(--muted); } .legal-toc { margin: 32px 0 8px; padding: 24px 28px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); } .legal-toc p { margin: 0 0 10px; } .prose .legal-toc ol { columns: 2 260px; column-gap: 32px; margin: 0; padding-left: 1.3em; font-size: 15.5px; } .prose .legal-toc li { break-inside: avoid; margin: 0 0 6px; } .prose .legal-toc a { text-decoration: none; color: var(--body); } .prose .legal-toc a:hover { color: var(--accent); } .prose h2[id] { scroll-margin-top: calc(var(--header-h) + 24px); } .legal-table-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line); } .legal-table-wrap table { min-width: 620px; margin: 0; } .legal-table-wrap th { background: var(--surface); color: var(--text); font-weight: 600; } /* Logos on a white tile (footer, side panel) always use the colour artwork */ [data-theme="dark"] .brand--footer .brand__logo--light, [data-theme="dark"] .brand--panel .brand__logo--light { display: block; } [data-theme="dark"] .brand--footer .brand__logo--dark, [data-theme="dark"] .brand--panel .brand__logo--dark { display: none; } /* ========================================================================== 1.12.0 — motion loader Draw-on BWJ mark → core pops in → real progress → curtain wipe (base, red, blue) ========================================================================== */ .preloader { --pl-blue: #1f3b79; --pl-red: #e0243a; --pl-ease: cubic-bezier(.77, 0, .18, 1); position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; pointer-events: auto; } [data-theme="dark"] .preloader { --pl-blue: #5b86d6; } .preloader__stage { position: relative; z-index: 2; display: grid; justify-items: center; gap: 18px; transition: opacity .35s ease, transform .5s var(--pl-ease); } .preloader__mark { position: relative; width: clamp(96px, 12vw, 124px); aspect-ratio: 1; display: grid; place-items: center; animation: pl-float 3.2s ease-in-out 1.6s infinite; } .preloader__svg { position: relative; z-index: 2; width: 100%; height: 100%; overflow: visible; } /* 1 — the two rings draw themselves, then fill */ .pl-ring { stroke-width: .7; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; animation: pl-draw 1s var(--pl-ease) .1s forwards, pl-fill .5s ease .85s forwards; } .pl-ring--blue { fill: var(--pl-blue); stroke: var(--pl-blue); animation-delay: .22s, .95s; } .pl-ring--red { fill: var(--pl-red); stroke: var(--pl-red); } /* 2 — the centre "B" pops in */ .pl-core { fill: var(--pl-blue); transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.4) translateY(4px); animation: pl-pop .55s cubic-bezier(.34, 1.56, .64, 1) 1.05s forwards; } .pl-core--b { animation-delay: 1.17s; } /* halo pulse + two orbiting dots */ .preloader__halo { position: absolute; inset: -38%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--pl-red) 22%, transparent) 0%, color-mix(in srgb, var(--pl-blue) 12%, transparent) 42%, transparent 68%); opacity: 0; animation: pl-halo 2.4s ease-in-out 1.1s infinite; } .preloader__orbit { position: absolute; inset: -22%; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--text) 14%, transparent); opacity: 0; animation: pl-in .6s ease 1.2s forwards, pl-spin 3.6s linear 1.2s infinite; } .preloader__orbit i { position: absolute; width: 8px; height: 8px; border-radius: 50%; top: -4px; left: calc(50% - 4px); background: var(--pl-red); box-shadow: 0 0 12px var(--pl-red); } .preloader__orbit i + i { top: auto; bottom: -4px; background: var(--pl-blue); box-shadow: 0 0 12px var(--pl-blue); } /* name, progress bar, percentage */ .preloader__name { margin: 6px 0 0; overflow: hidden; font: 500 13px var(--font-mono); letter-spacing: .32em; text-transform: uppercase; color: var(--text); } .preloader__name span { display: block; transform: translateY(110%); animation: pl-rise .7s var(--pl-ease) 1.15s forwards; } .preloader__bar { position: relative; width: clamp(150px, 18vw, 200px); height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--text) 12%, transparent); overflow: hidden; opacity: 0; animation: pl-in .4s ease .3s forwards; } .preloader__bar i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--pl-red), var(--pl-blue)); } .preloader__pct { margin: 0; font: 400 12px var(--font-mono); letter-spacing: .08em; color: var(--muted); opacity: 0; animation: pl-in .4s ease .4s forwards; } /* exit: stage lifts away; the diagonal reveal is in "1.13.0" below */ .preloader.is-leaving { pointer-events: none; } .preloader.is-leaving .preloader__stage { opacity: 0; transform: translateY(-24px) scale(.96); } .preloader.is-done { visibility: hidden; } /* return visits in the same session: no intro, quick wipe */ .preloader.is-quick .pl-ring { stroke-dashoffset: 0; fill-opacity: 1; animation: none; } .preloader.is-quick .pl-core { opacity: 1; transform: none; animation: none; } .preloader.is-quick .preloader__name span { transform: none; animation: none; } .preloader.is-quick .preloader__orbit { opacity: 1; animation: pl-spin 3.6s linear infinite; } .preloader.is-quick .preloader__bar, .preloader.is-quick .preloader__pct { opacity: 1; animation: none; } @keyframes pl-draw { to { stroke-dashoffset: 0; } } @keyframes pl-fill { to { fill-opacity: 1; stroke-width: 0; } } @keyframes pl-pop { to { opacity: 1; transform: none; } } @keyframes pl-halo { 0%, 100% { opacity: .35; transform: scale(.82); } 50% { opacity: 1; transform: scale(1); } } @keyframes pl-spin { to { transform: rotate(360deg); } } @keyframes pl-in { to { opacity: 1; } } @keyframes pl-rise { to { transform: none; } } @keyframes pl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* No motion: logo shown, simple fade */ @media (prefers-reduced-motion: reduce) { .preloader *, .preloader { animation: none !important; transition: none !important; } .pl-ring { stroke-dashoffset: 0; fill-opacity: 1; } .pl-core, .preloader__bar, .preloader__pct, .preloader__orbit { opacity: 1; transform: none; } .preloader__name span { transform: none; } .preloader.is-leaving { opacity: 0; transition: opacity .3s ease !important; } } /* ========================================================================== 1.13.0 — diagonal glass reveal The screen is two halves split on a diagonal. On exit a glossy red and a glossy blue band ignite along the seam, a highlight sweeps along them, and the halves slide apart in opposite directions with a frosted-glass edge over the page being revealed. ========================================================================== */ .preloader { background: transparent; overflow: hidden; } .preloader__doors { position: absolute; left: 50%; top: 50%; width: 300vmax; height: 300vmax; transform: translate(-50%, -50%) rotate(-28deg); pointer-events: none; } .preloader__door { position: absolute; left: 0; right: 0; height: 50%; background: var(--bg); transition: transform 1.05s var(--pl-ease) .5s; will-change: transform; } .preloader__door--a { top: 0; } .preloader__door--b { bottom: 0; } .preloader__glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(55% 45% at 50% 45%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%); transition: opacity .35s ease; } /* glossy bands on the seam */ .preloader__band { position: absolute; left: 0; right: 0; z-index: 2; height: clamp(10px, 1.5vmin, 16px); overflow: hidden; transform: scaleX(0); transform-origin: 50% 50%; transition: transform .55s var(--pl-ease) .08s; } .preloader__door--a .preloader__band { bottom: 0; } .preloader__door--b .preloader__band { top: 0; } .preloader__band--red { background: linear-gradient(180deg, #ff8a99 0%, #f0384f 30%, #c8162f 68%, #ff5a6e 100%); box-shadow: 0 0 18px rgba(231, 44, 70, .75), 0 0 60px rgba(231, 44, 70, .35); } .preloader__band--blue { background: linear-gradient(180deg, #8fb2ff 0%, #2f5fc4 32%, #163b84 70%, #5d8bff 100%); box-shadow: 0 0 18px rgba(47, 95, 196, .8), 0 0 60px rgba(47, 95, 196, .4); } /* gloss: bright top lip + soft reflection */ .preloader__band::before { content: ""; position: absolute; inset: 0 0 45% 0; background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .08)); mix-blend-mode: screen; } /* travelling shine */ .preloader__band::after { content: ""; position: absolute; top: -50%; bottom: -50%; left: 0; width: 22vmax; background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 70%, transparent 100%); transform: translateX(-30vmax); filter: blur(1px); } /* frosted glass edge that blurs the page as it is revealed */ .preloader__door::after { content: ""; position: absolute; left: 0; right: 0; height: clamp(70px, 9vmin, 120px); opacity: 0; transition: opacity .3s ease .78s; -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); } .preloader__door--a::after { top: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .06)); -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent); mask-image: linear-gradient(180deg, #000 20%, transparent); } .preloader__door--b::after { bottom: 100%; background: linear-gradient(0deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .06)); -webkit-mask-image: linear-gradient(0deg, #000 20%, transparent); mask-image: linear-gradient(0deg, #000 20%, transparent); } [data-theme="dark"] .preloader__door--a::after { background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .02)); } [data-theme="dark"] .preloader__door--b::after { background: linear-gradient(0deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .02)); } /* exit sequence */ .preloader.is-leaving .preloader__glow { opacity: 0; } .preloader.is-leaving .preloader__band { transform: scaleX(1); } .preloader.is-leaving .preloader__band::after { animation: pl-shine 1.15s cubic-bezier(.45, 0, .2, 1) .3s forwards; } .preloader.is-leaving .preloader__door--b .preloader__band::after { animation-name: pl-shine-rev; } .preloader.is-leaving .preloader__door::after { opacity: 1; } .preloader.is-leaving .preloader__door--a { transform: translateY(-46%); } .preloader.is-leaving .preloader__door--b { transform: translateY(46%); } @keyframes pl-shine { from { transform: translateX(-30vmax); } to { transform: translateX(300vmax); } } @keyframes pl-shine-rev { from { transform: translateX(300vmax); } to { transform: translateX(-30vmax); } } /* return visits: same reveal, faster */ .preloader.is-quick .preloader__band { transition-duration: .35s; transition-delay: 0s; } .preloader.is-quick .preloader__door { transition-duration: .75s; transition-delay: .22s; } .preloader.is-quick .preloader__door::after { transition-delay: .42s; } .preloader.is-quick.is-leaving .preloader__band::after { animation-duration: .75s; animation-delay: .1s; } @media (prefers-reduced-motion: reduce) { .preloader__band, .preloader__door::after { display: none; } .preloader.is-leaving .preloader__door { transform: none; } } /* 1.13.8 — legal pages: sticky Contents sidebar with scroll-spy */ .legal-layout { display: grid; grid-template-columns: minmax(230px, 290px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; } .legal-layout .prose { margin: 0; max-width: 820px; } .legal-nav { position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; overscroll-behavior: contain; padding: 22px 18px 22px 22px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); scrollbar-width: thin; } .legal-nav__title { margin: 0 0 12px; font: 500 12px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .legal-nav__list { list-style: none; margin: 0; padding: 0; counter-reset: legal; border-left: 1px solid var(--line); } .legal-nav__list li { counter-increment: legal; } .legal-nav__list a { position: relative; display: block; padding: 7px 8px 7px 16px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14.5px; line-height: 1.4; color: var(--muted); text-decoration: none; transition: color .2s, border-color .2s, background .2s; } .legal-nav__list a::before { content: counter(legal) ". "; opacity: .7; } .legal-nav__list a:hover { color: var(--text); } .legal-nav__list a.is-active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 0 8px 8px 0; } @media (max-width: 960px) { .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; } .legal-nav { position: static; max-height: none; } .legal-nav__list { columns: 2 220px; column-gap: 24px; } .legal-nav__list a { overflow-wrap: anywhere; } .legal-nav__list li { break-inside: avoid; } } /* 1.13.9 — mobile header: hamburger on the left, logo on the right */ @media (max-width: 700px) { .site-header__left { flex: 1 1 auto; justify-content: space-between; gap: 12px; } .site-header__left .brand { order: 2; margin-left: auto; } .site-header__left .hamburger { order: 1; } .site-header__actions { flex: none; } } /* 1.13.9 — mobile header: hamburger on the left, logo on the right */ @media (max-width: 700px) { .site-header__left { flex: 1 1 auto; justify-content: space-between; gap: 12px; } .site-header__left .brand { order: 2; margin-left: auto; } .site-header__left .hamburger { order: 1; } .site-header__actions { flex: none; } } /* 1.13.9 — keep footer text clear of the floating WhatsApp / back-to-top buttons on phones */ @media (max-width: 700px) { .site-footer__bottom { padding-right: 84px; } } @media (max-width: 560px) { .legal-nav__list { columns: 1; } } /* 1.13.11 — slightly tighter gap between the floating navbar and the hero / page banner (~16px desktop, ~13px phone; was ~30 / ~17) */ .hero, .page-hero { padding-top: calc(var(--header-h) - 14px); } @media (max-width: 700px) { .hero, .page-hero { padding-top: calc(var(--header-h) - 4px); } } /* 1.13.10 — loader: the two rotated doors overlap by a few px so no hairline shows along the seam (visible on the light theme) */ .preloader__door { height: calc(50% + 3px); } .preloader__door--a { top: -1px; } .preloader__door--b { bottom: -1px; } /* 1.13.11 — later pages in a visit skip the loader; thin progress bar while the next page loads */ .nav-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; opacity: 0; z-index: 1000; pointer-events: none; background: linear-gradient(90deg, var(--accent), #1f3b79); border-radius: 0 3px 3px 0; transition: width 8s cubic-bezier(.1, .6, .2, 1), opacity .2s; } .is-navigating .nav-progress { width: 85%; opacity: 1; } @media (prefers-reduced-motion: reduce) { .nav-progress { transition: opacity .2s; } .is-navigating .nav-progress { width: 100%; } } /* 1.14.0 — Services as a glossy bento grid (stacked pair · two tall · wide + narrow) */ .svc-bento { --u: clamp(150px, 13.5vw, 200px); grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: calc(var(--u) * 1.8) calc(var(--u) * 1.15) calc(var(--u) * 1.5); gap: 16px; } .svc-bento .svc-card { height: auto; min-height: 0; border-radius: 26px; background: #03050a; border: 1px solid rgba(255, 255, 255, .09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 24px 50px -34px #000; transition: border-color .4s, box-shadow .4s, transform .5s var(--ease); --acc: #e0243a; } .svc-bento .svc-card--ai-transformation { --acc: #ff3b5c; } .svc-bento .svc-card--custom-software { --acc: #2dd4ff; } .svc-bento .svc-card--enterprise-erp { --acc: #a78bfa; } .svc-bento .svc-card--web-ecosystems { --acc: #2ee6c8; } .svc-bento .svc-card--visual-design { --acc: #f472b6; } .svc-bento .svc-card--digital-strategy { --acc: #8cf06a; } .svc-bento .svc-card:nth-child(1) { grid-column: 1; grid-row: 1; } .svc-bento .svc-card:nth-child(2) { grid-column: 1; grid-row: 2; } .svc-bento .svc-card:nth-child(3) { grid-column: 2; grid-row: 1 / 3; } .svc-bento .svc-card:nth-child(4) { grid-column: 3; grid-row: 1 / 3; } .svc-bento .svc-card:nth-child(5) { grid-column: 1 / 3; grid-row: 3; } .svc-bento .svc-card:nth-child(6) { grid-column: 3; grid-row: 3; } .svc-bento .svc-card__img { object-position: 50% 40%; } .svc-bento .svc-card:hover .svc-card__img { transform: scale(1.04); } .svc-bento .svc-card::before { background: linear-gradient(180deg, rgba(8, 10, 20, 0) 38%, rgba(8, 10, 20, .88)); } /* glossy sheen that sweeps across on hover */ .svc-bento .svc-card::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, .16) 50%, transparent 62%); transform: translateX(-130%); transition: transform .9s var(--ease); } .svc-bento .svc-card:hover::after { transform: translateX(130%); } .svc-bento .svc-card:hover { border-color: color-mix(in srgb, var(--acc) 70%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 26px 60px -28px var(--acc); transform: translateY(-4px); } .svc-bento .svc-card__num { z-index: 2; display: inline-flex; align-items: center; gap: 8px; top: 18px; left: 18px; } .svc-bento .svc-card__num::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 10px var(--acc); } .svc-bento .svc-card__body { position: relative; z-index: 2; padding: 22px 92px 22px 24px; } .svc-bento .svc-card__title { font-size: clamp(21px, 1.9vw, 27px); margin-bottom: 4px; } .svc-bento .svc-card__line { font-size: 14px; line-height: 1.4; } .svc-bento .svc-card:nth-child(2) .svc-card__line:nth-of-type(n+2), .svc-bento .svc-card:nth-child(6) .svc-card__line:nth-of-type(n+2) { display: none; } .svc-bento .notch { --notch-bg: var(--ink); width: 70px; height: 70px; } .svc-bento .notch > span { width: 50px; height: 50px; background: #fff; color: #111318; } .svc-bento .svc-card:hover .notch > span { background: var(--acc); color: #0b0f1d; } @media (max-width: 1000px) { .svc-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: clamp(280px, 42vw, 340px); } .svc-bento .svc-card:nth-child(n) { grid-column: auto; grid-row: auto; } .svc-bento .svc-card:nth-child(1), .svc-bento .svc-card:nth-child(5) { grid-column: 1 / -1; } .svc-bento .svc-card:nth-child(5) { order: 6; } .svc-bento .svc-card:nth-child(6) { order: 5; } .svc-bento .svc-card:nth-child(2) .svc-card__line:nth-of-type(n+2), .svc-bento .svc-card:nth-child(6) .svc-card__line:nth-of-type(n+2) { display: grid; } } @media (max-width: 640px) { .svc-bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 320px; } .svc-bento .svc-card:nth-child(n) { grid-column: auto; order: 0; } } /* 1.14.1 — wide illustrations stay whole in the squarer phone / tablet cards (image bg is the same near-black as the card) */ @media (max-width: 1000px) { .svc-bento .svc-card--custom-software .svc-card__img { object-fit: contain; height: 66%; bottom: auto; object-position: 50% 40%; } } @media (max-width: 640px) { .svc-bento .svc-card--visual-design .svc-card__img { object-fit: contain; height: 62%; bottom: auto; object-position: 50% 40%; } } /* 1.14.2 — "Recognised by": three equal columns, larger logos, tighter space below (desktop / tablet only — phones unchanged) */ @media (min-width: 701px) { .logo-row--badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; justify-items: center; align-items: center; padding-top: clamp(24px, 2.6vw, 36px); } .logo-row--badges .logo-row__label { grid-column: 1 / -1; } .logo-row--badges .logo-row__item { width: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; } .logo-row--badges img, [data-theme="dark"] .logo-row--badges img { width: 100%; max-width: 280px; height: clamp(76px, 7.4vw, 112px); object-fit: contain; } .recognition { padding-bottom: clamp(8px, 1.5vw, 24px); } body:has(.recognition) .site-footer { margin-top: clamp(20px, 2.4vw, 40px); } } /* 1.14.2 — mobile: compact privacy bar, and the "Live systems" tile uses the full card width */ @media (max-width: 700px) { .site-footer__bottom { padding: 14px 74px 14px 18px; font-size: 13px; gap: 6px 18px; border-radius: 14px; } .site-footer__bottom p { line-height: 1.45; } .site-footer__bottom .legal-links { gap: 6px 18px; flex-wrap: wrap; } .tile--dark { padding: 14px 14px 84px 14px; } .tile--dark .tile__title, .tile--dark .tile__text { padding-left: 12px; padding-right: 4px; } .tile--dark .tile__thumb { height: 170px; margin-bottom: 18px; } } /* 1.14.3 — team cards: portrait with overlaid name/role, LinkedIn on hover */ .team-card--overlay { display: block; } .team-card--overlay .team-card__media { aspect-ratio: 3 / 4; margin: 0; border-radius: 18px; background: #1b1d22; isolation: isolate; } .team-card--overlay .team-card__media img { object-position: top center; } .team-card--overlay .team-card__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(8,9,12,.86) 0%, rgba(8,9,12,.5) 28%, rgba(8,9,12,0) 55%); } .team-card__link { position: absolute; inset: 0; z-index: 2; } .team-card__info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 0 16px 22px; text-align: center; display: grid; gap: 6px; pointer-events: none; transition: transform .4s var(--ease); } .team-card--overlay .team-card__name { font: 500 clamp(19px, 1.7vw, 24px)/1.15 var(--font-display); letter-spacing: -.02em; color: #fff; margin: 0; } .team-card--overlay .team-card__role { font: 400 14px/1.35 var(--font-body, inherit); color: rgba(255,255,255,.68); } .team-card--overlay .team-card__in { z-index: 4; left: auto; right: 14px; bottom: auto; top: 14px; transform: translateY(-8px); width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #0a66c2; opacity: 0; visibility: hidden; transition: opacity .3s, transform .3s var(--ease), background .25s, color .25s; } .team-card--overlay .team-card__in:hover { background: #0a66c2; color: #fff; } .team-card--overlay:hover .team-card__in, .team-card--overlay:focus-within .team-card__in { opacity: 1; visibility: visible; transform: none; } .team-card--overlay:hover .team-card__info { transform: translateY(-4px); } @media (hover: none) { .team-card--overlay .team-card__in { opacity: 1; visibility: visible; transform: none; } } .team2__card.team-card--overlay { margin-bottom: 0; } /* 1.14.8 — company-profile viewer buttons inside .prose keep button styling */ .prose .profile-viewer a.btn { text-decoration: none; } .prose .profile-viewer a.btn--primary { color: #fff; } .prose .profile-viewer a.btn--outline { color: var(--text); } .prose .profile-viewer a.btn--primary:hover { color: #fff; } /* 1.14.12 — team page: founder feature cards (framed portrait, big name, quote) */ .founders-section { padding-top: clamp(24px, 3vw, 44px); padding-bottom: 0; } .founders-section .section-head { margin-bottom: clamp(22px, 2.4vw, 34px); } .founders { display: grid; gap: clamp(22px, 2.6vw, 40px); } .founder { position: relative; display: grid; grid-template-columns: minmax(240px, 380px) 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(24px, 3.4vw, 52px); border-radius: 32px; background: linear-gradient(135deg, var(--surface) 0%, var(--bg, #fff) 100%); border: 1px solid var(--line); overflow: hidden; isolation: isolate; } .founder:nth-child(even) { grid-template-columns: 1fr minmax(240px, 380px); } .founder:nth-child(even) .founder__figure { order: 2; } .founder::before { content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; right: -160px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(231,44,70,.16), transparent 68%); } .founder:nth-child(even)::before { right: auto; left: -160px; background: radial-gradient(circle, rgba(40,70,170,.18), transparent 68%); } .founder__mark { position: absolute; z-index: -1; right: clamp(-60px, -3vw, -20px); bottom: -70px; width: clamp(220px, 28vw, 380px); color: var(--text); opacity: .05; pointer-events: none; } .founder:nth-child(even) .founder__mark { right: auto; left: clamp(-60px, -3vw, -20px); } .founder__mark .bwj-mark { display: block; width: 100%; height: auto; } .founder__figure { position: relative; padding: 0 16px 16px 0; } .founder:nth-child(even) .founder__figure { padding: 0 0 16px 16px; } .founder__figure::before { content: ""; position: absolute; inset: 16px 0 0 16px; border-radius: 26px; border: 2px solid var(--accent); z-index: -1; } .founder:nth-child(even) .founder__figure::before { inset: 16px 16px 0 0; border-color: #2846aa; } .founder__photo { display: block; aspect-ratio: 4 / 5; border-radius: 26px; overflow: hidden; background: #1b1d22; box-shadow: 0 30px 60px -28px rgba(10,14,30,.55); } .founder__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 1.1s var(--ease); } .founder:hover .founder__photo img { transform: scale(1.05); } .founder__badge { position: absolute; left: 18px; bottom: 34px; padding: 8px 16px; border-radius: 999px; background: var(--accent); color: #fff; font: 500 12px var(--font-mono); text-transform: uppercase; letter-spacing: .1em; box-shadow: 0 10px 24px -8px rgba(231,44,70,.6); } .founder:nth-child(even) .founder__badge { left: 34px; background: #2846aa; box-shadow: 0 10px 24px -8px rgba(40,70,170,.6); } .founder__body { display: grid; gap: 14px; align-content: center; min-width: 0; } .founder__role { font: 500 13px var(--font-mono); color: var(--accent); text-transform: uppercase; letter-spacing: .12em; } .founder__name { font: 500 clamp(36px, 4.6vw, 68px)/1.02 var(--font-display); letter-spacing: -.035em; margin: 0; } .founder__name a { color: inherit; } .founder__intro { margin: 4px 0 0; max-width: 56ch; color: var(--muted); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; } .founder__quote { position: relative; margin: 8px 0 0; padding: 4px 0 4px 26px; max-width: 54ch; border-left: 3px solid var(--accent); font: 500 clamp(18px, 1.5vw, 23px)/1.45 var(--font-display); letter-spacing: -.01em; color: var(--text); } .founder__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 14px; } .founder__in { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px; background: #0a66c2; color: #fff; font-weight: 500; font-size: 15px; box-shadow: 0 14px 28px -14px rgba(10,102,194,.8); transition: transform .25s var(--ease), box-shadow .25s; } .founder__in:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -14px rgba(10,102,194,.9); color: #fff; } .founder__more { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 500; font-size: 15px; } .founder__more:hover { color: var(--accent); } [data-theme="dark"] .founder__mark { opacity: .07; } @media (max-width: 820px) { .founder, .founder:nth-child(even) { grid-template-columns: 1fr; gap: 28px; } .founder:nth-child(even) .founder__figure { order: 0; } .founder__figure, .founder:nth-child(even) .founder__figure { max-width: 380px; width: 100%; margin-inline: auto; padding: 0 14px 14px 0; } .founder:nth-child(even) .founder__figure::before { inset: 16px 0 0 16px; border-color: var(--accent); } .founder:nth-child(even) .founder__badge { left: 18px; background: var(--accent); } } /* 1.14.19 — About page: founders only */ .grid--founders { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); max-width: 660px; } /* 1.15.0 — Industries, Use cases, Technologies (+ homepage bands) */ .ind-intro { padding-bottom: clamp(24px, 3vw, 40px); } .ind-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: clamp(12px, 1.4vw, 18px); } .ind-tile { position: relative; display: grid; gap: 10px; align-content: start; padding: 24px 24px 26px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); color: var(--text); transition: transform .35s var(--ease), border-color .3s, box-shadow .35s; } .ind-tile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 24px 44px -26px rgba(17,19,24,.35); } .ind-tile__icon { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 6px; background: color-mix(in srgb, var(--accent) 11%, transparent); color: var(--accent); transition: background .3s, color .3s; } .ind-tile:hover .ind-tile__icon { background: var(--accent); color: #fff; } .ind-tile__name { font: 500 20px/1.2 var(--font-display); letter-spacing: -.02em; padding-right: 28px; } .ind-tile__line { color: var(--muted); font-size: 14.5px; line-height: 1.55; } .ind-tile__go { position: absolute; top: 22px; right: 22px; color: var(--muted); opacity: .5; transition: .3s; } .ind-tile:hover .ind-tile__go { opacity: 1; color: var(--accent); transform: translate(2px, -2px); } .ind-details { padding-top: clamp(16px, 2vw, 24px); } .ind-details .container { display: grid; gap: clamp(16px, 2vw, 26px); } .ind-detail { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4.5vw, 72px); padding: clamp(26px, 3.6vw, 52px); border-radius: 28px; background: var(--surface); border: 1px solid var(--line); scroll-margin-top: 110px; position: relative; overflow: hidden; } .ind-detail::before { content: ""; position: absolute; top: -180px; right: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); pointer-events: none; } .ind-detail:nth-child(even)::before { right: auto; left: -160px; background: radial-gradient(circle, rgba(40,70,170,.14), transparent 70%); } .ind-detail > * { position: relative; } .ind-detail__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .ind-detail__icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--accent) 80%, transparent); } .ind-detail__num { font: 500 clamp(40px, 4vw, 60px)/1 var(--font-display); color: transparent; -webkit-text-stroke: 1.2px var(--line-2); letter-spacing: -.04em; } .ind-detail__name { font: 500 clamp(30px, 3.4vw, 48px)/1.05 var(--font-display); letter-spacing: -.035em; margin: 0 0 12px; } .ind-detail__line { color: var(--muted); font-size: clamp(15.5px, 1.2vw, 18px); line-height: 1.6; margin: 0 0 26px; max-width: 52ch; } .ind-detail__label { font: 500 12.5px var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 14px; } .ind-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .ind-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; } .ind-list .bwj-icon { flex: none; margin-top: 2px; padding: 3px; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); } .ind-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .ind-stat { display: grid; gap: 2px; min-width: 140px; flex: 1 1 140px; padding: 16px 18px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); color: var(--text); transition: border-color .3s, transform .3s var(--ease); } .ind-stat:hover { border-color: var(--accent); transform: translateY(-2px); } .ind-stat strong { font: 500 clamp(30px, 2.8vw, 40px)/1 var(--font-display); letter-spacing: -.03em; color: var(--accent); } .ind-stat span { font-size: 13.5px; color: var(--text); line-height: 1.35; } .ind-stat small { font: 400 11px var(--font-mono); color: var(--muted); letter-spacing: .08em; margin-top: 4px; } .ind-detail__side { align-self: start; padding: clamp(20px, 2.4vw, 30px); border-radius: 22px; background: var(--bg); border: 1px solid var(--line); } .ind-sol { list-style: none; margin: 0 0 8px; padding: 0; } .ind-sol li + li { border-top: 1px solid var(--line); } .ind-sol a, .ind-sol__item { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 2px; font-size: 15.5px; color: var(--text); } .ind-sol a .bwj-icon { flex: none; color: var(--muted); transition: .25s; } .ind-sol a:hover { color: var(--accent); } .ind-sol a:hover .bwj-icon { color: var(--accent); transform: translate(2px, -2px); } .ind-sol__item::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); flex: none; } .ind-detail__side .ind-detail__label + .ind-logos { margin-top: 0; } .ind-sol + .ind-detail__label { margin-top: 22px; } .ind-logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; } .ind-logos li { display: grid; place-items: center; height: 58px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); } .ind-logos img { max-width: 100%; max-height: 34px; width: auto; height: auto; object-fit: contain; } .ind-logos .logo--on-dark { display: none; } [data-theme="dark"] .ind-logos .logo--on-light { display: none; } [data-theme="dark"] .ind-logos .logo--on-dark { display: block; } @media (max-width: 900px) { .ind-detail { grid-template-columns: 1fr; } } .uc-intro { padding-bottom: clamp(20px, 2.4vw, 32px); } .uc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(12px, 1.4vw, 18px); } .uc-stat { display: grid; gap: 6px; padding: 26px 26px 24px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); color: var(--text); position: relative; overflow: hidden; transition: transform .3s var(--ease), border-color .3s; } .uc-stat::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--accent), #2846aa); transform: scaleX(.25); transform-origin: left; transition: transform .5s var(--ease); } .uc-stat:hover { transform: translateY(-3px); border-color: var(--line-2); } .uc-stat:hover::after { transform: scaleX(1); } .uc-stat strong { font: 500 clamp(46px, 5vw, 72px)/1 var(--font-display); letter-spacing: -.05em; color: var(--accent); } .uc-stat span { font-size: 16px; line-height: 1.35; } .uc-stat small { font: 400 12px var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; } .uc-list { padding-top: clamp(20px, 2.4vw, 32px); } .uc-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(22px, 2.6vw, 34px); } .uc-filter button { padding: 10px 17px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text); font: 500 14px var(--font-body, inherit); cursor: pointer; transition: .2s; } .uc-filter button:hover { border-color: var(--text); } .uc-filter button.is-active { background: var(--btn); color: var(--btn-text); border-color: var(--btn); } .uc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: clamp(14px, 1.6vw, 22px); align-items: stretch; } .uc-card { display: flex; flex-direction: column; gap: 16px; padding: 26px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); scroll-margin-top: 110px; transition: transform .35s var(--ease), box-shadow .35s, border-color .3s; } .uc-card:hover { transform: translateY(-4px); box-shadow: 0 26px 48px -28px rgba(17,19,24,.35); border-color: var(--line-2); } .uc-card:target { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .uc-card[hidden] { display: none; } .uc-card__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .uc-card__code { padding: 6px 11px; border-radius: 8px; background: var(--btn); color: var(--btn-text); font: 500 12px var(--font-mono); letter-spacing: .08em; } .uc-card__ind { font: 400 12px var(--font-mono); color: var(--muted); text-align: right; } .uc-card__stat { display: grid; gap: 4px; padding: 18px 20px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--bg)), var(--bg)); } .uc-card__stat small { font: 400 12px var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; } .uc-card__stat strong { font: 500 clamp(44px, 4vw, 58px)/1 var(--font-display); letter-spacing: -.05em; color: var(--accent); } .uc-card__stat span { font-size: 15px; line-height: 1.4; } .uc-card__stat--icon { grid-template-columns: auto 1fr; align-items: center; gap: 14px; background: var(--bg); } .uc-card__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: #2846aa; color: #fff; } .uc-card__title { font: 500 22px/1.2 var(--font-display); letter-spacing: -.02em; margin: 4px 0 0; } .uc-card__dl { margin: 0; display: grid; gap: 12px; } .uc-card__dl dt { font: 500 11.5px var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 4px; } .uc-card__dl dd { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text); } .uc-card__link { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; width: fit-content; font-weight: 500; font-size: 15px; color: var(--text); } .uc-card__link:hover { color: var(--accent); } .tech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: clamp(14px, 1.6vw, 22px); } .tech-card { display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); position: relative; overflow: hidden; transition: transform .35s var(--ease), border-color .3s, box-shadow .35s; } .tech-card:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 26px 48px -28px rgba(17,19,24,.35); } .tech-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .tech-card__icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 11%, transparent); color: var(--accent); } .tech-card:nth-child(even) .tech-card__icon { background: rgba(40,70,170,.12); color: #2846aa; } [data-theme="dark"] .tech-card:nth-child(even) .tech-card__icon { color: #8aa4ff; } .tech-card__count { font: 500 44px/1 var(--font-display); color: transparent; -webkit-text-stroke: 1.2px var(--line-2); letter-spacing: -.04em; } .tech-card__name { font: 500 24px/1.15 var(--font-display); letter-spacing: -.025em; margin: 0; } .tech-card__line { color: var(--muted); font-size: 15px; line-height: 1.55; margin: 0 0 6px; } .tech-chips { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .tech-chips li { padding: 8px 14px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: 14px; color: var(--text); transition: .2s; } .tech-card:hover .tech-chips li { border-color: var(--line-2); } .ind-home .head-row .btn-row { justify-content: flex-end; } .tech-home { overflow: hidden; padding-bottom: clamp(16px, 2vw, 32px); } .tech-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .tech-marquee + .tech-marquee { margin-top: 14px; } .tech-marquee__track { list-style: none; margin: 0; padding: 4px 0; display: flex; gap: 12px; width: max-content; animation: bwj-marquee 60s linear infinite; } .tech-marquee--rev .tech-marquee__track { animation-direction: reverse; animation-duration: 70s; } .tech-marquee:hover .tech-marquee__track { animation-play-state: paused; } .tech-pill { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font: 500 16px var(--font-display); letter-spacing: -.01em; white-space: nowrap; color: var(--text); } .tech-pill .bwj-icon { color: var(--accent); } .tech-marquee--rev .tech-pill .bwj-icon { color: #2846aa; } [data-theme="dark"] .tech-marquee--rev .tech-pill .bwj-icon { color: #8aa4ff; } @media (prefers-reduced-motion: reduce) { .tech-marquee { -webkit-mask-image: none; mask-image: none; } .tech-marquee__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; padding-inline: 16px; } .tech-pill[aria-hidden="true"] { display: none; } } /* 1.15.1 — tech logos, use-case images */ .tech-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; } .tech-logo { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #fff; border: 1px solid rgba(17,19,24,.08); } .tech-logo img { width: 20px; height: 20px; object-fit: contain; } .tech-logo--icon { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-color: transparent; color: var(--accent); } .tech-card:nth-child(even) .tech-logo--icon { background: rgba(40,70,170,.1); color: #2846aa; } [data-theme="dark"] .tech-card:nth-child(even) .tech-logo--icon { color: #8aa4ff; } .uc-card { padding-top: 14px; } .uc-card__media { margin: 0 -12px 2px; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--soft); } .uc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .uc-card:hover .uc-card__media img { transform: scale(1.05); } .uc-card__media + .uc-card__top { margin-top: 4px; } /* 1.15.2 — footer: Explore column (Industries, Use cases, Technologies) */ @media (min-width: 640px) and (max-width: 999px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .site-footer__grid { grid-template-columns: 1.3fr 1.3fr .8fr .8fr .9fr; } } /* 1.15.3 — homepage: five industries filling the row */ .ind-home .ind-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); } @media (min-width: 1100px) { .ind-home .ind-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }