/* ========================================================================== Triple Boost - main stylesheet World: "Midnight studio". Near-black rooms alternate with rooms drenched in TripleBoost blue; both carry a fine film grain and a directional light from the upper left. Surfaces are slabs turned toward that light, UI fragments float on real shadows, and Birzia Light carries the sentence while Birzia Black carries the point. Hand-drawn Lottie doodles are the human layer. RTL-first. home.css adds the front page's stage on top. ========================================================================== */ /* Fonts ------------------------------------------------------------------ Birzia ships four cuts: Light 300, Medium 500, Bold 700, Black 900. There is no 400/600/800, so every rule below uses the four real weights through the --fw-* tokens and the browser never synthesizes a cut. Birzia draws Latin as capitals only, so Latin letters fall through to a Latin-only subset of Rubik (same weight axis) and "Meta" / an email stay in their real case. Digits, punctuation and ₪ stay in Birzia. */ @font-face { font-family: "Birzia"; src: url("../fonts/Birzia-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0000-0040, U+005B-0060, U+007B-00BF, U+0590-05FF, U+2000-206F, U+20AA, U+FB1D-FB4F; } @font-face { font-family: "Birzia"; src: url("../fonts/Birzia-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-0040, U+005B-0060, U+007B-00BF, U+0590-05FF, U+2000-206F, U+20AA, U+FB1D-FB4F; } @font-face { font-family: "Birzia"; src: url("../fonts/Birzia-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-0040, U+005B-0060, U+007B-00BF, U+0590-05FF, U+2000-206F, U+20AA, U+FB1D-FB4F; } @font-face { font-family: "Birzia"; src: url("../fonts/Birzia-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; unicode-range: U+0000-0040, U+005B-0060, U+007B-00BF, U+0590-05FF, U+2000-206F, U+20AA, U+FB1D-FB4F; } @font-face { font-family: "TB Latin"; src: url("../fonts/Rubik-Latin.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; } :root { /* Brand (from the logo) */ --tb-blue: #0253FC; --tb-blue-deep: #0142CC; --tb-cyan: #02CDFD; --tb-black: #0A0A0A; --tb-white: #FFFFFF; /* Kept for the service illustrations: the old gradient token is now flat signal blue. */ --tb-grad: linear-gradient(var(--tb-blue), var(--tb-blue)); /* The night rooms (default context). Paper survives only inside real UI surfaces: forms, mockups, .tb-paper. */ --n0: #06070A; --n1: #0A0C10; --n2: #0F1217; --n3: #161A21; --tb-bg: var(--n0); --tb-surface: var(--n2); --tb-surface-2: var(--n3); --tb-fill: rgba(255, 255, 255, .05); --tb-fill-strong: rgba(255, 255, 255, .1); --tb-line: rgba(255, 255, 255, .11); --tb-line-strong: rgba(255, 255, 255, .26); --tb-rule: rgba(255, 255, 255, .5); --tb-text: rgba(255, 255, 255, .74); --tb-muted: rgba(255, 255, 255, .58); --tb-heading: #FFFFFF; --tb-accent: var(--tb-cyan); --tb-tint: rgba(2, 83, 252, .16); /* The lit blue: a slab of brand blue turned toward a light at the upper left. */ --tb-lit-blue: linear-gradient(158deg, #1F6BFF 0%, #0A5AFF 22%, #0253FC 42%, #0140D2 76%, #01288C 100%); --tb-lit-dark: linear-gradient(152deg, #16254F 0%, #0B1330 38%, #080B14 72%, #06070A 100%); --tb-slab: linear-gradient(160deg, #13171E, #0C0F14); --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* Type: Birzia, four real weights */ --tb-font: "Birzia", "TB Latin", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --fw-light: 300; --fw-medium: 500; --fw-bold: 700; --fw-black: 900; --tb-h1: clamp(2.75rem, 1.1rem + 4.6vw, 5.75rem); --tb-h2: clamp(2.2rem, 1.3rem + 3vw, 4.25rem); --tb-h3: clamp(1.25rem, 1.08rem + .55vw, 1.6rem); /* Layout */ --tb-radius: 0px; --tb-radius-sm: 0px; --tb-container: 1280px; --tb-gutter: clamp(20px, 4vw, 40px); --tb-section: clamp(80px, 9vw, 144px); --tb-header: 84px; --tb-ease: cubic-bezier(.16, 1, .3, 1); --tb-shadow: 0 50px 100px -30px rgba(0, 0, 0, .9); } /* Colour fields -------------------------------------------------------------- A field re-declares the tokens, so everything inside it (headings, rules, buttons, doodles) re-inks itself. */ .tb-field--blue { --tb-bg: var(--tb-blue); --tb-surface: var(--tb-blue); --tb-heading: #FFFFFF; --tb-text: rgba(255, 255, 255, .92); --tb-muted: rgba(255, 255, 255, .8); --tb-line: rgba(255, 255, 255, .3); --tb-line-strong: rgba(255, 255, 255, .6); --tb-rule: #FFFFFF; --tb-accent: var(--tb-black); --tb-fill: rgba(255, 255, 255, .1); --tb-fill-strong: rgba(255, 255, 255, .18); background: var(--tb-blue); color: var(--tb-text); } .tb-field--ink { --tb-bg: var(--tb-black); --tb-surface: #16171B; --tb-heading: #FFFFFF; --tb-text: rgba(255, 255, 255, .86); --tb-muted: rgba(255, 255, 255, .66); --tb-line: rgba(255, 255, 255, .16); --tb-line-strong: rgba(255, 255, 255, .34); --tb-rule: #FFFFFF; --tb-accent: var(--tb-cyan); --tb-fill: rgba(255, 255, 255, .06); --tb-fill-strong: rgba(255, 255, 255, .12); background: var(--tb-black); color: var(--tb-text); } /* Paper panels inside a field reset to the paper context. */ .tb-paper { --tb-bg: var(--tb-white); --tb-surface: #F1F2F5; --tb-heading: var(--tb-black); --tb-text: #22252D; --tb-muted: #555A66; --tb-line: rgba(10, 10, 10, .14); --tb-line-strong: rgba(10, 10, 10, .3); --tb-rule: var(--tb-black); --tb-accent: var(--tb-blue); --tb-fill: rgba(10, 10, 10, .05); --tb-fill-strong: rgba(10, 10, 10, .1); background: var(--tb-white); color: var(--tb-text); } /* Base ------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--tb-header) + 16px); } body { position: relative; margin: 0; background: var(--tb-bg); color: var(--tb-text); font-family: var(--tb-font); font-weight: var(--fw-light); font-size: 1.125rem; line-height: 1.7; direction: rtl; overflow-x: clip; font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { color: var(--tb-heading); margin: 0; font-weight: var(--fw-bold); line-height: 1.08; letter-spacing: -.01em; } strong, b { font-weight: var(--fw-bold); } p { margin: 0; } h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } ul, ol { margin: 0; padding: 0; list-style: none; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--tb-accent); outline-offset: 3px; } .tb-field--blue :focus-visible { outline-color: #fff; } ::selection { background: var(--tb-black); color: #fff; } .tb-skip { position: fixed; right: 16px; top: -80px; z-index: 100; background: var(--tb-black); color: #fff; padding: 12px 18px; font-weight: var(--fw-medium); } .tb-skip:focus { top: 16px; } .tb-container { width: 100%; max-width: calc(var(--tb-container) + 2 * var(--tb-gutter)); margin-inline: auto; padding-inline: var(--tb-gutter); } .tb-section { padding-block: var(--tb-section); } .tb-main { padding-top: var(--tb-header); } .tb-icon { width: 1.25em; height: 1.25em; flex: none; } /* Type ------------------------------------------------------------------- */ .tb-h1 { font-size: var(--tb-h1); font-weight: var(--fw-black); letter-spacing: -.025em; line-height: 1; } .tb-h2 { font-size: var(--tb-h2); font-weight: var(--fw-black); letter-spacing: -.02em; line-height: 1.02; } .tb-h3 { font-size: var(--tb-h3); font-weight: var(--fw-bold); line-height: 1.2; } .tb-lead { font-size: clamp(1.1rem, 1.02rem + .3vw, 1.28rem); line-height: 1.65; color: var(--tb-text); max-width: 58ch; } /* Emphasis is colour, never a gradient: blue on paper, ink on blue, cyan on ink. */ .tb-grad { color: var(--tb-accent); } /* Running head: the section's name sits on a rule above the headline. */ .tb-label { display: flex; align-items: center; gap: 14px; font-size: .95rem; font-weight: var(--fw-medium); color: var(--tb-heading); line-height: 1; } .tb-label::before { content: ""; flex: none; width: 36px; height: 4px; background: var(--tb-accent); } .tb-field--blue .tb-label::before { background: #fff; } .tb-head { display: grid; justify-items: start; gap: 22px; margin-bottom: clamp(44px, 5vw, 80px); max-width: 920px; } .tb-head--center { margin-inline: auto; text-align: center; justify-items: center; } .tb-head .tb-lead { color: var(--tb-muted); } .tb-split-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-bottom: clamp(44px, 5vw, 80px); } .tb-split-head .tb-head { margin-bottom: 0; } /* Buttons ---------------------------------------------------------------- */ .tb-btn { --btn-bg: var(--tb-black); --btn-fg: #fff; --btn-bd: var(--tb-black); --btn-bg-h: var(--tb-blue); --btn-fg-h: #fff; --btn-bd-h: var(--tb-blue); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 58px; padding: 0 30px; border: 2px solid var(--btn-bd); border-radius: 0; background: var(--btn-bg); color: var(--btn-fg); font-weight: var(--fw-bold); font-size: 1.05rem; line-height: 1; cursor: pointer; white-space: nowrap; transition: background-color .35s var(--tb-ease), color .35s var(--tb-ease), border-color .35s var(--tb-ease); } .tb-btn .tb-icon { width: 1.15em; height: 1.15em; stroke-width: 2.2; transition: transform .45s var(--tb-ease); } .tb-btn:hover { background: var(--btn-bg-h); color: var(--btn-fg-h); border-color: var(--btn-bd-h); } .tb-btn:hover .tb-icon { transform: translateX(-6px); } .tb-btn:active { transform: translateY(1px); } .tb-btn--outline, .tb-btn--ghost { --btn-bg: transparent; --btn-fg: var(--tb-heading); --btn-bd: var(--tb-heading); --btn-bg-h: var(--tb-heading); --btn-fg-h: var(--tb-bg); --btn-bd-h: var(--tb-heading); } .tb-btn--sm { min-height: 46px; padding: 0 20px; font-size: .98rem; } /* On blue the primary is paper; on ink it turns blue on hover. */ .tb-field--blue .tb-btn--primary { --btn-bg: #fff; --btn-fg: var(--tb-black); --btn-bd: #fff; --btn-bg-h: var(--tb-black); --btn-fg-h: #fff; --btn-bd-h: var(--tb-black); } .tb-field--blue .tb-btn--outline, .tb-field--blue .tb-btn--ghost { --btn-fg-h: var(--tb-blue); } .tb-field--ink .tb-btn--primary { --btn-bg: #fff; --btn-fg: var(--tb-black); --btn-bd: #fff; } .tb-field--blue .tb-paper .tb-btn--primary, .tb-field--ink .tb-paper .tb-btn--primary { --btn-bg: var(--tb-black); --btn-fg: #fff; --btn-bd: var(--tb-black); --btn-bg-h: var(--tb-blue); --btn-fg-h: #fff; --btn-bd-h: var(--tb-blue); } .tb-link { display: inline-flex; align-items: center; gap: 10px; color: var(--tb-heading); font-weight: var(--fw-bold); border-bottom: 2px solid var(--tb-accent); padding-bottom: 4px; transition: gap .35s var(--tb-ease); } .tb-link:hover { gap: 16px; } .tb-icon-btn { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 0; background: transparent; border: 2px solid var(--tb-black); color: var(--tb-heading); cursor: pointer; } .tb-icon-btn:hover { background: var(--tb-black); color: #fff; } /* Cards & tags: ruled cells, not floating tiles ---------------------------- */ .tb-card { position: relative; background: var(--tb-bg); border: 1.5px solid var(--tb-line); border-radius: 0; padding: clamp(24px, 2.6vw, 36px); transition: border-color .35s var(--tb-ease); } .tb-card:hover { border-color: var(--tb-heading); } .tb-tags { display: flex; flex-wrap: wrap; gap: 8px; } .tb-tag { font-size: .82rem; font-weight: var(--fw-medium); line-height: 1; padding: 7px 11px; border: 1.5px solid var(--tb-line-strong); color: var(--tb-heading); } /* Doodles (Lottie) --------------------------------------------------------- */ .tb-doodle { display: block; aspect-ratio: 1; flex: none; } .tb-doodle svg { width: 100% !important; height: 100% !important; } /* Header ----------------------------------------------------------------- */ .tb-header { position: fixed; inset-inline: 0; top: 0; z-index: 50; background: var(--tb-white); border-bottom: 1.5px solid transparent; transition: border-color .3s; } .tb-header.is-scrolled { border-color: var(--tb-black); } .tb-header__inner { display: flex; align-items: center; gap: 28px; height: var(--tb-header); } .tb-header__logo .tb-logo { width: 168px; height: auto; } .tb-nav { margin-inline-start: auto; } .tb-nav__list { display: flex; align-items: center; gap: 2px; } .tb-nav__list > li > a { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--tb-black); font-weight: var(--fw-medium); font-size: 1.02rem; } .tb-nav__list > li > a::after { content: ""; position: absolute; inset-inline: 14px; bottom: 2px; height: 3px; background: var(--tb-blue); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--tb-ease); } .tb-nav__list > li > a:hover::after, .tb-nav__list > li > a.is-current::after { transform: scaleX(1); } .tb-caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); } .tb-header__actions { display: flex; align-items: center; gap: 10px; } .tb-header__cta { flex: none; } .tb-burger { display: none; } .tb-burger .is-open-shown { display: none; } .tb-nav__mega { position: relative; } .tb-mega { position: absolute; top: calc(100% + 18px); inset-inline-start: 50%; transform: translate(50%, 10px); display: grid; grid-template-columns: repeat(3, 240px); gap: 0; background: var(--tb-white); border: 1.5px solid var(--tb-black); box-shadow: var(--tb-shadow); opacity: 0; visibility: hidden; transition: opacity .25s, transform .35s var(--tb-ease), visibility .25s; } .tb-mega::before { content: ""; position: absolute; inset-inline: 0; top: -20px; height: 20px; } .tb-nav__mega:hover .tb-mega, .tb-nav__mega:focus-within .tb-mega { opacity: 1; visibility: visible; transform: translate(50%, 0); } .tb-mega__col { padding: 18px 14px; } .tb-mega__col + .tb-mega__col { border-inline-start: 1.5px solid var(--tb-line); } .tb-mega__title { display: block; font-size: .85rem; font-weight: var(--fw-bold); color: var(--tb-blue); padding: 4px 10px 12px; } .tb-mega__link { display: flex; align-items: center; gap: 12px; padding: 10px; color: var(--tb-black); font-size: 1rem; font-weight: var(--fw-medium); transition: background-color .2s, color .2s; } .tb-mega__link .tb-icon { color: var(--tb-blue); } .tb-mega__link:hover { background: var(--tb-blue); color: #fff; } .tb-mega__link:hover .tb-icon { color: #fff; } /* Home hero: the poster ------------------------------------------------------ */ .tb-hero { position: relative; isolation: isolate; } .tb-hero__glow { display: none; } .tb-hero--home { overflow: hidden; border-bottom: 1.5px solid var(--tb-black); } .tb-hero__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); min-height: calc(100svh - var(--tb-header)); } .tb-hero__copy { display: flex; flex-direction: column; justify-content: center; gap: 30px; padding-block: clamp(48px, 6vw, 96px); padding-inline-end: clamp(24px, 4vw, 64px); } .tb-hero__mast { display: flex; align-items: center; gap: 16px; font-size: 1rem; font-weight: var(--fw-medium); color: var(--tb-black); } .tb-hero__mast-rule { flex: 1; height: 1.5px; background: var(--tb-black); max-width: 180px; } .tb-hero__mast-tag { font-weight: var(--fw-black); color: var(--tb-blue); direction: ltr; unicode-bidi: isolate; } .tb-hero__title { font-size: clamp(2.9rem, 1rem + 4.4vw, 5.6rem); line-height: 1.02; } .tb-hero__line { display: block; } .tb-type { display: block; min-height: 2.04em; color: var(--tb-blue); } .tb-type__caret { display: inline-block; width: .09em; height: .78em; margin-inline-start: .08em; vertical-align: -.04em; background: var(--tb-blue); animation: tb-blink 1s steps(1) infinite; } @keyframes tb-blink { 50% { opacity: 0; } } .tb-hero__lead { font-size: clamp(1.12rem, 1rem + .45vw, 1.35rem); line-height: 1.6; max-width: 44ch; color: var(--tb-text); } .tb-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; } /* The blue slab bleeds to the viewport edge on the inline-end side. */ .tb-hero__slab { position: relative; display: grid; grid-template-rows: 1fr auto; overflow: hidden; margin-inline-end: calc(-1 * max(var(--tb-gutter), (100vw - var(--tb-container)) / 2)); padding: clamp(28px, 3.4vw, 56px); background: var(--tb-blue); color: #fff; clip-path: inset(0 0 0 0); animation: tb-slab 1.1s var(--tb-ease) both; } @keyframes tb-slab { from { clip-path: inset(0 0 0 100%); } } .tb-hero__loop { align-self: center; justify-self: center; width: min(100%, 520px); overflow: visible; } .tb-hero__loop path { fill: none; stroke-linecap: round; stroke-linejoin: round; } .tb-hero__loop-base { stroke: #fff; stroke-width: 1.7; stroke-dasharray: 100; stroke-dashoffset: 100; animation: tb-draw 2.2s var(--tb-ease) .5s forwards; } .tb-hero__loop-run { stroke: var(--tb-black); stroke-width: .5; stroke-dasharray: 7 93; stroke-dashoffset: 100; opacity: 0; animation: tb-run 7s linear 2.4s infinite, tb-fade .6s ease 2.4s forwards; } @keyframes tb-draw { to { stroke-dashoffset: 0; } } @keyframes tb-run { to { stroke-dashoffset: 0; } } @keyframes tb-fade { to { opacity: 1; } } .tb-hero__slab .tb-hero__doodle { position: absolute; top: clamp(20px, 2.6vw, 40px); inset-inline-start: clamp(20px, 2.6vw, 40px); width: clamp(84px, 8vw, 128px); } .tb-hero__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; } .tb-hero__stats li { display: grid; gap: 6px; padding-top: 18px; border-top: 1.5px solid rgba(255, 255, 255, .55); } .tb-hero__stats strong { font-size: clamp(1.9rem, 1rem + 2.1vw, 3.4rem); font-weight: var(--fw-black); line-height: 1; letter-spacing: -.02em; color: #fff; white-space: nowrap; direction: ltr; unicode-bidi: isolate; justify-self: start; font-variant-numeric: tabular-nums; } .tb-hero__stats span { font-size: .98rem; font-weight: var(--fw-medium); color: rgba(255, 255, 255, .88); } /* Hero entrance: copy rises in order, the slab wipes open. */ .tb-hero--home .tb-hero__mast { animation: tb-rise .9s var(--tb-ease) both; } .tb-hero--home .tb-hero__title { animation: tb-rise 1s var(--tb-ease) .08s both; } .tb-hero--home .tb-hero__lead { animation: tb-rise 1s var(--tb-ease) .2s both; } .tb-hero--home .tb-hero__actions { animation: tb-rise 1s var(--tb-ease) .32s both; } @keyframes tb-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } /* Logos band -------------------------------------------------------------- */ .tb-logos { display: flex; align-items: center; gap: 0; background: var(--tb-black); color: #fff; } .tb-logos__title { flex: none; max-width: 24ch; padding: 22px var(--tb-gutter); font-size: .98rem; font-weight: var(--fw-medium); line-height: 1.35; border-inline-end: 1.5px solid rgba(255, 255, 255, .2); } .tb-marquee { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .tb-marquee__track { display: flex; width: max-content; animation: tb-marquee 60s linear infinite; } .tb-marquee:hover .tb-marquee__track { animation-play-state: paused; } .tb-marquee__item { display: flex; align-items: center; gap: 36px; flex: none; height: 84px; padding-inline-start: 36px; font-weight: var(--fw-bold); font-size: 1.05rem; white-space: nowrap; } .tb-marquee__item::after { content: ""; width: 10px; height: 10px; background: var(--tb-blue); } .tb-marquee__item img { width: auto; max-width: 150px; height: 40px; object-fit: contain; filter: brightness(0) invert(1); opacity: .9; } .tb-marquee__item--placeholder { color: rgba(255, 255, 255, .6); } @keyframes tb-marquee { to { transform: translateX(50%); } } /* About ------------------------------------------------------------------ */ .tb-about__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: center; } .tb-about__body { display: grid; gap: 32px; justify-items: start; } .tb-about__text .tb-head { margin-bottom: 32px; } .tb-checks { display: grid; width: 100%; max-width: 560px; border-top: 1.5px solid var(--tb-rule); } .tb-checks li { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--tb-line); color: var(--tb-heading); font-weight: var(--fw-medium); } .tb-checks .tb-icon { width: 22px; height: 22px; color: var(--tb-blue); stroke-width: 2.6; } /* Platform orbit, flattened into a modernist diagram ------------------------- */ .tb-orbit { --chip: clamp(56px, 5.4vw, 76px); position: relative; width: 100%; max-width: 540px; aspect-ratio: 1; margin-inline: auto; } .tb-orbit__halo, .tb-orbit__spark, .tb-orbit__wave { display: none; } .tb-orbit::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--tb-surface); } .tb-orbit__ring { position: absolute; border-radius: 50%; border: 1.5px solid var(--tb-black); animation: tb-spin var(--dur) linear infinite; } .tb-orbit__ring--inner { inset: 24%; --dur: 48s; } .tb-orbit__ring--outer { inset: 5%; --dur: 72s; animation-direction: reverse; border-color: rgba(10, 10, 10, .28); } @keyframes tb-spin { to { transform: rotate(360deg); } } .tb-orbit__arm { position: absolute; inset: 0; transform: rotate(var(--a)); } .tb-orbit__item { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%) rotate(calc(-1 * var(--a))); } .tb-orbit__chip { position: relative; display: grid; place-items: center; width: var(--chip); height: var(--chip); border-radius: 50%; background: var(--tb-white); border: 1.5px solid var(--tb-black); animation: tb-spin var(--dur) linear infinite reverse; transition: background-color .3s; } .tb-orbit__ring--outer .tb-orbit__chip { animation-direction: normal; } .tb-orbit__chip svg { width: 50%; height: 50%; } .tb-orbit__label { position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% 0; white-space: nowrap; font-size: .8rem; font-weight: var(--fw-medium); color: var(--tb-black); } .tb-orbit__core { position: absolute; inset: 38%; display: grid; place-items: center; align-content: center; gap: 2px; border-radius: 50%; background: var(--tb-blue); } .tb-orbit__core svg { width: 58%; } .tb-orbit__core-label { color: #fff; font-weight: var(--fw-black); font-size: clamp(.8rem, .6rem + .45vw, 1.05rem); direction: ltr; } /* Services on the blue field: a numbered poster index ------------------------ */ .tb-index { border-top: 2px solid var(--tb-rule); counter-reset: none; } .tb-index__row { position: relative; display: grid; align-items: center; gap: clamp(20px, 2.6vw, 40px); grid-template-columns: 4rem minmax(0, 1.05fr) minmax(0, 1.35fr) clamp(76px, 7vw, 104px) 52px; padding-block: clamp(24px, 2.6vw, 36px); border-bottom: 1.5px solid var(--tb-line); } .tb-index__num, .tb-index__title, .tb-index__body { transition: translate .5s var(--tb-ease), color .35s var(--tb-ease), opacity .3s; } .tb-index__num { font-size: 1.05rem; font-weight: var(--fw-black); color: var(--tb-heading); opacity: .6; font-variant-numeric: tabular-nums; } .tb-index__title { font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.7rem); font-weight: var(--fw-black); line-height: 1.02; letter-spacing: -.02em; color: var(--tb-heading); } .tb-index__body { display: grid; gap: 14px; justify-items: start; } .tb-index__text { color: var(--tb-text); line-height: 1.55; max-width: 46ch; } .tb-index__go { display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid var(--tb-rule); color: var(--tb-heading); transition: background-color .35s var(--tb-ease), color .35s var(--tb-ease); } .tb-index__go .tb-icon { width: 22px; height: 22px; stroke-width: 2.2; transition: transform .45s var(--tb-ease); } .tb-index__row:hover :is(.tb-index__num, .tb-index__title, .tb-index__body) { translate: -14px 0; } .tb-index__row:hover .tb-index__title { color: var(--tb-accent); } .tb-index__row:hover .tb-index__num { opacity: 1; } .tb-index__row:hover .tb-index__go { background: #fff; color: var(--tb-blue); } .tb-index__row:hover .tb-index__go .tb-icon { transform: translateX(-4px); } .tb-field--blue .tb-tag { border-color: rgba(255, 255, 255, .55); color: #fff; } /* Why ------------------------------------------------------------------ */ .tb-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--tb-rule); } .tb-why__item { display: grid; align-content: start; gap: 16px; padding: 36px clamp(20px, 2.6vw, 40px) 8px; } .tb-why__item:first-child { padding-inline-start: 0; } .tb-why__item + .tb-why__item { border-inline-start: 1.5px solid var(--tb-line); } .tb-why__doodle { width: clamp(96px, 9vw, 136px); margin-bottom: 8px; } .tb-why__item .tb-h3 { font-size: clamp(1.45rem, 1.2rem + .8vw, 2rem); font-weight: var(--fw-black); } .tb-why__item p { color: var(--tb-muted); max-width: 36ch; } /* Process ------------------------------------------------------------------ */ .tb-process__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .tb-process__step { position: relative; display: grid; align-content: start; gap: 14px; padding: 32px clamp(18px, 2vw, 32px) 8px; border-top: 1.5px solid var(--tb-line-strong); } .tb-process__step:first-child { padding-inline-start: 0; } .tb-process__step + .tb-process__step { border-inline-start: 1.5px solid var(--tb-line); } .tb-process__step::before { content: ""; position: absolute; top: -1.5px; inset-inline: 0; height: 4px; background: var(--tb-accent); transform: scaleX(0); transform-origin: right; transition: transform 1.2s var(--tb-ease) .25s; } .tb-process__step.is-in::before { transform: scaleX(1); } .tb-process__doodle { width: clamp(84px, 7vw, 112px); margin-bottom: 6px; } .tb-process__num { font-size: .95rem; font-weight: var(--fw-bold); color: var(--tb-accent); } .tb-process__num::before { content: "שלב "; } .tb-process__step .tb-h3 { font-weight: var(--fw-black); } .tb-process__step p { color: var(--tb-muted); } /* Press strip ------------------------------------------------------------ */ .tb-press { border-bottom: 1.5px solid var(--tb-black); background: var(--tb-white); } .tb-press__inner { display: flex; align-items: center; gap: 28px 44px; padding-block: 36px; flex-wrap: wrap; justify-content: space-between; } .tb-press__title { font-size: 1rem; font-weight: var(--fw-medium); color: var(--tb-heading); } .tb-press__list { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 44px; } .tb-press__list li { font-size: 1.35rem; font-weight: var(--fw-bold); color: var(--tb-heading); } .tb-press__list img { height: 34px; width: auto; max-width: 150px; object-fit: contain; } .tb-press__list li:has(img) { transition: transform .35s var(--tb-ease); } .tb-press__list li:has(img):hover { transform: translateY(-3px); } .tb-press--big .tb-press__list img { height: 46px; max-width: 190px; } .tb-press--big .tb-press__list li { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); } /* Work / testimonials (used when content exists) ---------------------------- */ .tb-work__grid { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: repeat(2, minmax(240px, 1fr)); gap: 16px; } .tb-work__item { position: relative; overflow: hidden; background: var(--tb-surface-2); min-height: 240px; } .tb-work__item:first-child { grid-row: span 2; } .tb-work__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--tb-ease); } .tb-work__item:hover img { transform: scale(1.04); } .tb-work__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,10,.72), transparent 55%); } .tb-work__meta { position: absolute; inset-inline: 24px; bottom: 24px; z-index: 1; display: grid; gap: 10px; justify-items: start; } .tb-work__meta .tb-h3 { color: #fff; } .tb-work__meta .tb-tag { border-color: rgba(255,255,255,.6); color: #fff; } .tb-work__item--placeholder { background: var(--tb-blue); } .tb-testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .tb-quote { margin: 0; display: grid; gap: 18px; align-content: start; } .tb-quote__video { aspect-ratio: 9 / 11; background: var(--tb-blue); display: grid; place-items: center; } .tb-quote__play { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: #fff; color: var(--tb-blue); transition: transform .35s var(--tb-ease); } .tb-quote__play:hover { transform: scale(1.08); } .tb-quote blockquote { margin: 0; color: var(--tb-heading); font-size: 1.1rem; font-weight: var(--fw-medium); } .tb-quote figcaption { display: grid; } .tb-quote figcaption strong { color: var(--tb-heading); } .tb-quote figcaption span { color: var(--tb-muted); font-size: .95rem; } /* FAQ: ruled rows -------------------------------------------------------- */ .tb-faq__grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(40px, 7vw, 120px); align-items: start; } .tb-accordion { display: grid; border-top: 2px solid var(--tb-rule); } .tb-accordion__item { border-bottom: 1.5px solid var(--tb-line); transition: border-color .3s; } .tb-accordion__item[open] { border-color: var(--tb-heading); } .tb-accordion__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; cursor: pointer; list-style: none; color: var(--tb-heading); font-weight: var(--fw-bold); font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem); transition: color .25s; } .tb-accordion__item summary:hover { color: var(--tb-accent); } .tb-accordion__item summary::-webkit-details-marker { display: none; } .tb-accordion__item summary .tb-icon { flex: none; width: 40px; height: 40px; padding: 9px; border: 2px solid var(--tb-heading); color: var(--tb-heading); stroke-width: 2.2; transition: background-color .3s, color .3s, border-color .3s; } .tb-accordion__item summary .tb-icon path { transform-box: fill-box; transform-origin: center; transition: transform .45s var(--tb-ease); } .tb-accordion__item[open] summary .tb-icon { background: var(--tb-blue); border-color: var(--tb-blue); color: #fff; } .tb-accordion__item[open] summary .tb-icon path { transform: rotate(45deg); } .tb-accordion__item p { padding: 0 0 26px; padding-inline-end: 60px; color: var(--tb-muted); max-width: 66ch; } /* Blog ------------------------------------------------------------------- */ .tb-blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 36px); } .tb-post { display: grid; align-content: start; gap: 14px; padding: 0; border: 0; background: none; } .tb-post__img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tb-surface-2); } .tb-post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--tb-ease); } .tb-post:hover .tb-post__img img { transform: scale(1.04); } .tb-post__date { color: var(--tb-muted); font-size: .92rem; font-weight: var(--fw-medium); padding-top: 4px; border-top: 1.5px solid var(--tb-rule); padding-top: 14px; } .tb-post .tb-h3 { font-weight: var(--fw-black); transition: color .25s; } .tb-post:hover .tb-h3 { color: var(--tb-accent); } .tb-post__ph { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; background: var(--tb-blue); color: #fff; } .tb-post__ph svg { position: absolute; width: 120%; inset-inline-start: -10%; opacity: .35; fill: none; stroke: #fff; stroke-width: 1.2; transition: transform 1.2s var(--tb-ease); } .tb-post:hover .tb-post__ph svg { transform: rotate(-6deg) scale(1.05); } .tb-post__ph span { position: relative; padding: 8px 16px; background: #fff; color: var(--tb-black); font-weight: var(--fw-bold); } /* Contact & forms -------------------------------------------------------- */ .tb-contact { position: relative; isolation: isolate; overflow: hidden; } .tb-contact__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 7vw, 120px); align-items: center; } .tb-contact__copy { display: grid; gap: 8px; } .tb-contact__doodle { width: clamp(110px, 11vw, 168px); } .tb-contact__form { padding: clamp(28px, 3.4vw, 52px); border: 0; box-shadow: 0 40px 80px -40px rgba(1, 20, 90, .6); } .tb-contact__form, .tb-audit__form { --tb-bg: var(--tb-white); --tb-heading: var(--tb-black); --tb-text: #22252D; --tb-muted: #555A66; --tb-line: rgba(10,10,10,.14); --tb-line-strong: rgba(10,10,10,.3); --tb-rule: var(--tb-black); --tb-accent: var(--tb-blue); background: var(--tb-white); color: var(--tb-text); } .tb-field--blue .tb-contact__form .tb-btn--primary, .tb-field--blue .tb-audit__form .tb-btn--primary { --btn-bg: var(--tb-black); --btn-fg: #fff; --btn-bd: var(--tb-black); --btn-bg-h: var(--tb-blue); --btn-fg-h: #fff; --btn-bd-h: var(--tb-blue); } .tb-contact__form:hover { border-color: transparent; } .tb-form { display: grid; gap: 22px; } .tb-form__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .tb-field { display: grid; gap: 8px; } .tb-field--wide { grid-column: 1 / -1; } .tb-field label { font-size: .92rem; font-weight: var(--fw-medium); color: var(--tb-heading); } .tb-field label span { color: var(--tb-blue); } .tb-field input, .tb-field select, .tb-field textarea { width: 100%; min-height: 56px; padding: 14px 16px; border-radius: 0; background: var(--tb-white); border: 1.5px solid var(--tb-line-strong); color: var(--tb-black); font-weight: var(--fw-medium); transition: border-color .2s, box-shadow .2s; } .tb-field textarea { min-height: 120px; } .tb-field input::placeholder, .tb-field textarea::placeholder { color: #6B707C; font-weight: var(--fw-light); } .tb-field input[dir="ltr"] { text-align: right; } .tb-field input:hover, .tb-field select:hover, .tb-field textarea:hover { border-color: var(--tb-black); } .tb-field input:focus, .tb-field select:focus, .tb-field textarea:focus { outline: none; border-color: var(--tb-blue); box-shadow: inset 0 0 0 1.5px var(--tb-blue); } .tb-form .tb-btn { justify-self: start; } .tb-form__note { font-size: .86rem; color: var(--tb-muted); } .tb-form__note a { text-decoration: underline; text-underline-offset: 3px; } .tb-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .tb-notice { padding: 16px 18px; background: var(--tb-tint); border-inline-start: 1.5px solid var(--tb-blue); color: var(--tb-black); font-weight: var(--fw-medium); margin-bottom: 18px; } .tb-form--newsletter .tb-form__grid { grid-template-columns: 1fr; } .tb-form--newsletter .tb-field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .tb-form--newsletter { grid-template-columns: 1fr auto; gap: 8px; align-items: end; } .tb-form--newsletter .tb-btn { min-height: 56px; } .tb-form--newsletter .tb-btn .tb-icon { display: none; } /* Footer ----------------------------------------------------------------- */ .tb-footer { --tb-bg: var(--tb-black); --tb-surface: #16171B; --tb-line: rgba(255,255,255,.14); --tb-line-strong: rgba(255,255,255,.3); --tb-text: rgba(255,255,255,.82); --tb-muted: rgba(255,255,255,.64); --tb-heading: #FFFFFF; --tb-rule: #fff; --tb-accent: var(--tb-cyan); color: var(--tb-text); padding-top: clamp(64px, 7vw, 112px); background: var(--tb-black); } .tb-footer .tb-btn--primary { --btn-bg: #fff; --btn-fg: var(--tb-black); --btn-bd: #fff; } .tb-footer__cta { display: flex; align-items: end; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding-bottom: clamp(48px, 5vw, 80px); border-bottom: 1.5px solid var(--tb-line-strong); } .tb-footer__big { font-size: clamp(2.4rem, 1.2rem + 4vw, 5rem); max-width: 14ch; font-weight: var(--fw-black); line-height: 1; letter-spacing: -.02em; } .tb-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px; padding-block: 64px; } .tb-footer__brand { display: grid; gap: 20px; align-content: start; } .tb-footer__brand .tb-logo { width: 176px; } .tb-footer__brand p { color: var(--tb-muted); max-width: 36ch; } .tb-footer__title { font-size: 1rem; font-weight: var(--fw-bold); margin-bottom: 18px; color: #fff; } .tb-footer__title:not(:first-child) { margin-top: 28px; } .tb-footer__links { display: grid; gap: 10px; } .tb-footer__links a, .tb-footer__contact a, .tb-social a { color: var(--tb-muted); transition: color .2s; } .tb-footer__links a:hover, .tb-footer__contact a:hover { color: #fff; } .tb-footer__contact { display: grid; gap: 12px; } .tb-footer__contact li { display: flex; align-items: center; gap: 10px; } .tb-footer__contact .tb-icon { color: var(--tb-cyan); } .tb-social { display: flex; flex-wrap: wrap; gap: 10px; } .tb-social a { display: grid; place-items: center; width: 46px; height: 46px; border: 1.5px solid rgba(255,255,255,.3); color: #fff; transition: background-color .3s, border-color .3s, color .3s; } .tb-social a:hover { background: #fff; border-color: #fff; color: var(--tb-black); } .tb-social .tb-icon { width: 20px; height: 20px; } .tb-footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 26px; border-top: 1.5px solid var(--tb-line); color: var(--tb-muted); font-size: .92rem; } .tb-footer__bottom nav { display: flex; gap: 22px; flex-wrap: wrap; } .tb-footer__bottom a:hover { color: #fff; } .tb-whatsapp { position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 40; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #25D366; color: #fff; box-shadow: 0 14px 28px -12px rgba(10, 10, 10, .45); transition: transform .35s var(--tb-ease); } @media (hover: hover) { .tb-whatsapp:hover { transform: scale(1.08); } } /* Touch screens: anchor to the top using the small viewport height, so the button does not jump when the browser's address bar hides/shows while scrolling */ @media (max-width: 960px) { .tb-whatsapp { bottom: auto; top: calc(100vh - 52px - 16px - env(safe-area-inset-bottom, 0px)); top: calc(100svh - 52px - 16px - env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; inset-inline-end: 16px; transform: translateZ(0); will-change: transform; } } .tb-whatsapp .tb-icon { width: 28px; height: 28px; } /* Inner-page heroes: a blue poster field ------------------------------------ */ .tb-hero--inner, .tb-page-hero, .tb-404, .tb-audit { --tb-bg: var(--tb-blue); --tb-surface: var(--tb-blue); --tb-heading: #FFFFFF; --tb-text: rgba(255, 255, 255, .92); --tb-muted: rgba(255, 255, 255, .8); --tb-line: rgba(255, 255, 255, .3); --tb-line-strong: rgba(255, 255, 255, .6); --tb-rule: #FFFFFF; --tb-accent: var(--tb-black); position: relative; isolation: isolate; overflow: hidden; background: var(--tb-blue); color: var(--tb-text); padding-top: clamp(64px, 7vw, 112px); padding-bottom: clamp(64px, 7vw, 112px); } /* The logo's loop, drawn huge and cropped by the field edge. */ .tb-hero--inner::after, .tb-page-hero::after, .tb-404::after { content: ""; position: absolute; z-index: -1; pointer-events: none; width: clamp(420px, 52vw, 820px); aspect-ratio: 2 / 1; inset-inline-end: clamp(-260px, -12vw, -120px); bottom: -18%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1 7 22 10'%3E%3Cpath d='M12 12c-2-2.7-4-4-6-4a4 4 0 0 0 0 8c2 0 4-1.3 6-4zm0 0c2 2.7 4 4 6 4a4 4 0 0 0 0-8c-2 0-4 1.3-6 4z' fill='none' stroke='%23fff' stroke-opacity='.22' stroke-width='.55' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; } .tb-hero--inner .tb-btn--primary, .tb-page-hero .tb-btn--primary, .tb-404 .tb-btn--primary { --btn-bg: #fff; --btn-fg: var(--tb-black); --btn-bd: #fff; --btn-bg-h: var(--tb-black); --btn-fg-h: #fff; --btn-bd-h: var(--tb-black); } .tb-hero--inner .tb-btn--outline, .tb-hero--inner .tb-btn--ghost, .tb-404 .tb-btn--outline, .tb-404 .tb-btn--ghost { --btn-fg-h: var(--tb-blue); } .tb-hero__inner { position: relative; display: grid; justify-items: start; gap: 24px; } .tb-hero--inner .tb-hero__inner, .tb-404 .tb-hero__inner { padding-inline-end: clamp(0px, 22vw, 320px); } .tb-h1--inner { font-size: clamp(2.6rem, 1.3rem + 4vw, 5.25rem); max-width: 16ch; } .tb-h1--post { font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.8rem); max-width: 22ch; } .tb-hero__lead--strong { font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem); font-weight: var(--fw-bold); color: #fff; } .tb-hero--inner .tb-hero__lead { max-width: 56ch; } .tb-hero--inner .tb-hero__doodle, .tb-404 .tb-hero__doodle { position: absolute; top: 50%; inset-inline-end: 0; translate: 0 -50%; width: clamp(150px, 17vw, 250px); } .tb-hero--inner .tb-hero__stats { grid-template-columns: repeat(2, minmax(0, 260px)); width: 100%; margin-top: 12px; } .tb-hero--inner > .tb-container > *, .tb-404 > .tb-container > * { animation: tb-rise .9s var(--tb-ease) both; } .tb-hero--inner .tb-hero__inner > * { animation: tb-rise .9s var(--tb-ease) both; } .tb-hero--inner .tb-hero__inner > :nth-child(2) { animation-delay: .06s; } .tb-hero--inner .tb-hero__inner > :nth-child(3) { animation-delay: .12s; } .tb-hero--inner .tb-hero__inner > :nth-child(4) { animation-delay: .18s; } .tb-hero--inner .tb-hero__inner > :nth-child(n+5) { animation-delay: .24s; } .tb-hero--inner .tb-hero__doodle { animation: none; } .tb-crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: .95rem; font-weight: var(--fw-medium); color: var(--tb-muted); } .tb-crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; } .tb-crumbs > * + *::before { content: "/"; margin-inline-end: 10px; opacity: .6; } .tb-crumbs span { color: #fff; } .tb-page-hero .tb-h1, .tb-page-hero h1 { color: #fff; } .tb-prose { max-width: 760px; font-size: 1.15rem; line-height: 1.8; } .tb-prose > * + *, .tb-prose__body > * + * { margin-top: 1.1em; } .tb-prose h2, .tb-prose h3 { margin-top: 1.9em; font-weight: var(--fw-black); } .tb-prose h2 { font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem); } .tb-prose h3 { font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem); } .tb-prose strong { font-weight: var(--fw-bold); color: var(--tb-heading); } .tb-prose a:not(.tb-btn) { color: var(--tb-blue); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; } .tb-prose ul { list-style: square; padding-inline-start: 1.3em; } .tb-prose ul li::marker { color: var(--tb-blue); } .tb-prose blockquote { margin: 1.6em 0; padding: 6px 24px; border-inline-start: 1.5px solid var(--tb-black); font-size: 1.3rem; font-weight: var(--fw-medium); color: var(--tb-heading); } .tb-prose [id] { scroll-margin-top: 110px; } .tb-prose img { display: block; max-width: 100%; height: auto; } /* Motion ----------------------------------------------------------------- */ .js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--tb-ease), transform .9s var(--tb-ease); } .js [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .js [data-reveal] { opacity: 1; transform: none; } html { scroll-behavior: auto; } .tb-hero__loop-base { stroke-dashoffset: 0; } .tb-hero__loop-run { display: none; } .tb-process__step::before { transform: none; } } /* Responsive ------------------------------------------------------------- */ @media (max-width: 1100px) { .tb-index__row { grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1.2fr) 72px; } .tb-index__go { display: none; } .tb-process__list { grid-template-columns: repeat(2, 1fr); } .tb-process__step:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; } .tb-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 960px) { :root { --tb-header: 72px; } .tb-burger { display: inline-grid; } .tb-header__cta { display: none; } .tb-nav { position: fixed; inset: var(--tb-header) 0 0; margin: 0; padding: 12px var(--tb-gutter) 40px; overflow-y: auto; background: var(--tb-white); border-top: 1.5px solid var(--tb-black); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; } .nav-open .tb-nav { opacity: 1; visibility: visible; } .nav-open { overflow: hidden; } .nav-open .tb-burger .is-open-hidden { display: none; } .nav-open .tb-burger .is-open-shown { display: block; } .tb-nav__list { flex-direction: column; align-items: stretch; gap: 0; } .tb-nav__list > li > a { font-size: 1.6rem; font-weight: var(--fw-black); padding: 16px 0; border-bottom: 1.5px solid var(--tb-line); width: 100%; } .tb-nav__list > li > a::after { display: none; } .tb-nav__list > li > a.is-current { color: var(--tb-blue); } .tb-mega { position: static; transform: none; opacity: 1; visibility: inherit; grid-template-columns: 1fr; padding: 4px 0 12px; background: none; border: 0; box-shadow: none; } .tb-mega__col { padding: 8px 0; } .tb-mega__col + .tb-mega__col { border: 0; } .tb-nav__mega:hover .tb-mega, .tb-nav__mega:focus-within .tb-mega { transform: none; } .tb-caret { display: none; } .tb-hero__grid { grid-template-columns: 1fr; min-height: 0; } .tb-hero__copy { padding-inline-end: 0; padding-block: 44px 40px; gap: 24px; } .tb-hero__slab { margin-inline: calc(-1 * var(--tb-gutter)); min-height: 420px; } .tb-hero__loop { width: min(78%, 360px); margin-block: 24px 36px; } .tb-about__grid, .tb-faq__grid, .tb-contact__grid { grid-template-columns: 1fr; } .tb-why__grid { grid-template-columns: 1fr; } .tb-why__item, .tb-why__item:first-child { padding: 28px 0; display: grid; grid-template-columns: 96px 1fr; column-gap: 20px; } .tb-why__item + .tb-why__item { border-inline-start: 0; border-top: 1.5px solid var(--tb-line); } .tb-why__doodle { grid-row: span 2; width: 96px; margin: 0; } .tb-testimonials__grid, .tb-blog__grid { grid-template-columns: 1fr; } .tb-work__grid { grid-template-columns: 1fr; grid-template-rows: none; } .tb-work__item:first-child { grid-row: auto; min-height: 320px; } .tb-hero--inner .tb-hero__inner, .tb-404 .tb-hero__inner { padding-inline-end: var(--tb-gutter); } .tb-hero--inner .tb-hero__doodle, .tb-404 .tb-hero__doodle { position: static; translate: none; width: 104px; order: -1; } } @media (max-width: 640px) { body { font-size: 1.0625rem; } .tb-header__logo .tb-logo { width: 134px; } /* Mobile: the consultation CTA lives in the fixed header (floats on every page); the home hero buttons are hidden */ .tb-header__cta { display: inline-flex; min-height: 42px; padding: 0 14px; font-size: .92rem; gap: 8px; } .tb-header__cta .tb-icon { width: 16px; height: 16px; } .home .tb-hero__actions { display: none; } .tb-hero__title { font-size: clamp(2.5rem, 1rem + 7.4vw, 3.4rem); } .tb-hero__stats { grid-template-columns: 1fr; gap: 18px; } .tb-logos { flex-direction: column; align-items: stretch; } .tb-logos__title { max-width: none; padding-block: 18px 0; border: 0; text-align: start; } .tb-marquee__item { height: 64px; } .tb-index__row { grid-template-columns: 2.25rem minmax(0, 1fr) 64px; row-gap: 12px; padding-block: 24px; } .tb-index__num { grid-row: 1; align-self: start; padding-top: .35em; } .tb-index__title { grid-column: 2; } .tb-index__doodle { grid-column: 3; grid-row: 1 / span 2; align-self: start; width: 64px; } .tb-index__body { grid-column: 2; } .tb-index__row:hover :is(.tb-index__num, .tb-index__title, .tb-index__body) { translate: none; } .tb-process__list { grid-template-columns: 1fr; } .tb-process__step, .tb-process__step:first-child, .tb-process__step:nth-child(3) { padding-inline: 0; border-inline-start: 0; display: grid; grid-template-columns: 76px 1fr; column-gap: 18px; } .tb-process__doodle { grid-row: span 3; width: 76px; } .tb-form__grid { grid-template-columns: 1fr; } .tb-footer__grid { grid-template-columns: 1fr; } .tb-btn { white-space: normal; text-align: center; } .tb-accordion__item p { padding-inline-end: 0; } .tb-hero--inner .tb-hero__stats { grid-template-columns: 1fr; } } /* ========================================================================== Inner pages ========================================================================== */ .tb-services { background: var(--tb-surface); } .tb-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1.5px solid var(--tb-black); border-inline-start: 1.5px solid var(--tb-line); } .tb-services__grid > .tb-card { border-width: 0 0 1.5px; border-inline-end: 1.5px solid var(--tb-line); } .tb-services__grid > .tb-card:hover { background: var(--tb-blue); color: #fff; --tb-heading: #fff; --tb-muted: rgba(255,255,255,.82); --tb-line-strong: rgba(255,255,255,.55); } .tb-service { position: relative; display: grid; align-content: start; gap: 16px; min-height: 300px; overflow: hidden; transition: background-color .4s var(--tb-ease), color .4s var(--tb-ease); } .tb-service__num { position: absolute; top: clamp(24px, 2.6vw, 36px); left: clamp(24px, 2.6vw, 36px); direction: ltr; unicode-bidi: isolate; color: var(--tb-muted); font-size: .92rem; font-weight: var(--fw-black); line-height: 1; } .tb-service__icon { position: relative; order: -1; justify-self: start; margin-bottom: 6px; display: grid; place-items: center; width: 56px; height: 56px; border: 1.5px solid var(--tb-heading); color: var(--tb-heading); transition: background-color .35s, color .35s, border-color .35s; } .tb-service__icon .tb-icon { width: 26px; height: 26px; } .tb-service:hover .tb-service__icon { background: #fff; border-color: #fff; color: var(--tb-blue); } .tb-service .tb-h3 { font-weight: var(--fw-black); } .tb-service p { color: var(--tb-muted); transition: color .4s; } .tb-service .tb-tags { margin-top: auto; padding-top: 8px; } .tb-service__go { position: absolute; bottom: clamp(24px, 2.6vw, 36px); inset-inline-end: clamp(24px, 2.6vw, 36px); width: 44px; height: 44px; display: grid; place-items: center; background: #fff; color: var(--tb-blue); transform: scale(0); transition: transform .45s var(--tb-ease); } .tb-service:hover .tb-service__go { transform: scale(1); } .tb-service--featured .tb-h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); } .tb-service__icon--static { position: static; flex: none; } .tb-services__grid--4 { grid-template-columns: repeat(4, 1fr); } .tb-matrix { margin-top: 24px; display: grid; gap: 18px; } .tb-matrix__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1.5px solid var(--tb-black); } .tb-matrix__grid div { display: grid; gap: 4px; padding: 18px; border-bottom: 1px solid var(--tb-line); border-inline-start: 1px solid var(--tb-line); } .tb-matrix__grid strong { color: var(--tb-heading); font-weight: var(--fw-bold); } .tb-matrix__grid span { color: var(--tb-blue); font-weight: var(--fw-medium); } .tb-pains__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 7vw, 120px); align-items: start; } .tb-pains__list { display: grid; border-top: 2px solid var(--tb-rule); } .tb-pains__list li { display: flex; align-items: center; gap: 18px; padding: 20px 0; border: 0; border-bottom: 1.5px solid var(--tb-line); color: var(--tb-heading); font-weight: var(--fw-medium); background: none; } .tb-pains__list li:hover { border-color: var(--tb-line); } .tb-pains__x { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1.5px solid var(--tb-black); color: var(--tb-black); font-size: .8rem; font-weight: var(--fw-black); } .tb-includes { background: var(--tb-surface); } .tb-includes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1.5px solid var(--tb-black); } .tb-includes__grid li { display: flex; align-items: flex-start; gap: 14px; background: none; border: 0; border-bottom: 1.5px solid var(--tb-line); color: var(--tb-heading); font-weight: var(--fw-medium); padding: 22px 0; padding-inline-end: 24px; } .tb-includes__grid .tb-icon { flex: none; width: 24px; height: 24px; color: var(--tb-blue); stroke-width: 2.6; } .tb-process__list[style*="--steps"] { grid-template-columns: repeat(var(--steps), 1fr); } .tb-metrics { background: var(--tb-black); color: #fff; } .tb-metrics__inner { display: flex; align-items: center; gap: 24px 40px; flex-wrap: wrap; padding-block: 36px; } .tb-metrics__title { color: rgba(255,255,255,.66); font-weight: var(--fw-medium); } .tb-metrics__list { display: flex; flex-wrap: wrap; gap: 10px; } .tb-metrics__list li { padding: 10px 18px; border: 1.5px solid rgba(255,255,255,.3); font-weight: var(--fw-medium); } .tb-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .tb-gallery__item { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--tb-surface-2); } .tb-gallery__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--tb-ease); } .tb-gallery__item:hover img { transform: scale(1.05); } .tb-gallery__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,10,.7), transparent 50%); } .tb-gallery__item > span { position: absolute; z-index: 1; inset-inline: 20px; bottom: 18px; display: grid; color: #fff; font-weight: var(--fw-bold); font-size: 1.15rem; } .tb-gallery__item small { font-weight: var(--fw-light); font-size: .88rem; opacity: .85; } .tb-gallery__item--placeholder { background: var(--tb-blue); } .tb-gallery__item.is-hidden { display: none; } .tb-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; } .tb-filters button { min-height: 44px; padding: 0 18px; border: 1.5px solid var(--tb-black); background: var(--tb-white); cursor: pointer; font-weight: var(--fw-medium); transition: background-color .2s, color .2s; } .tb-filters button:hover { background: var(--tb-black); color: #fff; } .tb-filters button.is-active { background: var(--tb-blue); border-color: var(--tb-blue); color: #fff; } .tb-group__head { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 44px; max-width: 860px; } .tb-group__num { font-size: clamp(3rem, 2rem + 3vw, 5rem); font-weight: var(--fw-black); line-height: .9; color: var(--tb-blue); } .tb-group__head .tb-lead { color: var(--tb-muted); margin-top: 10px; } .tb-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--tb-rule); } .tb-values .tb-why__item { background: none; border: 0; padding-inline: 0 24px; } .tb-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .tb-team__item { margin: 0; display: grid; gap: 14px; } .tb-team__img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--tb-blue); display: grid; place-items: center; color: #fff; font-size: 4rem; font-weight: var(--fw-black); } .tb-team__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--tb-ease); } .tb-team__item:hover .tb-team__img img { transform: scale(1.04); } .tb-team__item figcaption { display: grid; gap: 2px; } .tb-team__item strong { color: var(--tb-heading); font-size: 1.15rem; } .tb-team__item figcaption span { color: var(--tb-muted); } .tb-contact--page .tb-contact__grid { align-items: start; } .tb-contact__info { display: grid; gap: 0; border-top: 2px solid var(--tb-rule); } .tb-contact__item { display: flex; align-items: center; gap: 18px; padding: 20px 0; border: 0; border-bottom: 1.5px solid var(--tb-line); background: none; } .tb-contact__item .tb-service__icon { margin: 0; order: 0; } a.tb-contact__item:hover .tb-service__icon { background: var(--tb-blue); border-color: var(--tb-blue); color: #fff; } .tb-contact__item > span:last-child { display: grid; color: var(--tb-muted); } .tb-contact__item strong { color: var(--tb-heading); } .tb-contact__form .tb-h3 { margin-bottom: 20px; font-weight: var(--fw-black); } .tb-thanks { min-height: calc(100svh - var(--tb-header) - 200px); display: grid; align-items: center; } .tb-post-meta { color: var(--tb-muted); font-weight: var(--fw-medium); } .tb-post-cover img { width: 100%; max-height: 560px; object-fit: cover; } .tb-inline-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 44px; background: var(--tb-blue); border: 0; color: #fff; --tb-heading: #fff; } .tb-inline-cta strong { color: #fff; font-size: 1.2rem; font-weight: var(--fw-black); } .tb-inline-cta .tb-btn--primary { --btn-bg: #fff; --btn-fg: var(--tb-black); --btn-bd: #fff; --btn-bg-h: var(--tb-black); --btn-fg-h: #fff; --btn-bd-h: var(--tb-black); } @media (max-width: 1100px) { .tb-services__grid, .tb-services__grid--4, .tb-matrix__grid, .tb-values, .tb-team { grid-template-columns: repeat(2, 1fr); } .tb-includes__grid, .tb-gallery { grid-template-columns: repeat(2, 1fr); } .tb-process__list[style*="--steps"] { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 960px) { .tb-pains__grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .tb-services__grid, .tb-services__grid--4, .tb-matrix__grid, .tb-values, .tb-includes__grid, .tb-process__list[style*="--steps"] { grid-template-columns: 1fr; } .tb-gallery, .tb-team { grid-template-columns: repeat(2, 1fr); gap: 10px; } .tb-group__head { flex-direction: column; gap: 8px; } .tb-service { min-height: 0; } } /* Landing page (free audit) --------------------------------------------- */ .tb-landing .tb-nav, .tb-landing .tb-header__cta, .tb-landing .tb-burger, .tb-landing .tb-footer__grid, .tb-landing .tb-footer__cta { display: none; } .tb-landing .tb-footer { padding-top: 0; } .tb-audit { text-align: start; } .tb-audit .tb-hero__inner { display: block; } .tb-audit__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: center; } .tb-audit__copy { display: grid; gap: 26px; justify-items: start; } .tb-audit__copy .tb-hero__lead { max-width: 52ch; } .tb-audit__proof { display: flex; gap: 32px; flex-wrap: wrap; border-top: 1.5px solid rgba(255,255,255,.55); } .tb-audit__proof li { display: grid; padding-top: 18px; } .tb-audit__proof strong { font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem); font-weight: var(--fw-black); color: #fff; direction: ltr; unicode-bidi: isolate; justify-self: start; } .tb-audit__proof span { color: rgba(255,255,255,.85); font-size: .95rem; } .tb-audit__note { color: var(--tb-muted); margin: -8px 0 20px; } .tb-audit__form { padding: clamp(28px, 3.4vw, 48px); border: 0; box-shadow: 0 40px 80px -40px rgba(1, 20, 90, .6); } .tb-audit .tb-btn--primary { --btn-bg: #fff; --btn-fg: var(--tb-black); --btn-bd: #fff; --btn-bg-h: var(--tb-black); --btn-fg-h: #fff; --btn-bd-h: var(--tb-black); } .tb-audit .tb-audit__form .tb-btn--primary { --btn-bg: var(--tb-black); --btn-fg: #fff; --btn-bd: var(--tb-black); --btn-bg-h: var(--tb-blue); --btn-fg-h: #fff; --btn-bd-h: var(--tb-blue); } /* FAQ page -------------------------------------------------------------- */ .tb-faq-page { display: grid; grid-template-columns: 240px 1fr; gap: clamp(24px, 5vw, 72px); align-items: start; } .tb-faq-page__nav { position: sticky; top: calc(var(--tb-header) + 24px); display: grid; border-top: 2px solid var(--tb-black); } .tb-faq-page__nav a { padding: 12px 0; border-bottom: 1px solid var(--tb-line); color: var(--tb-heading); font-weight: var(--fw-medium); transition: color .2s; } .tb-faq-page__nav a:hover { color: var(--tb-blue); } .tb-faq-page__groups { display: grid; gap: 56px; } .tb-faq-page__group { scroll-margin-top: 110px; } .tb-faq-page__group > .tb-h3 { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); font-weight: var(--fw-black); } .tb-faq-page__group .tb-link { font-size: .95rem; } /* Case studies ---------------------------------------------------------- */ .tb-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .tb-case { display: grid; gap: 18px; padding: 0 0 24px; align-content: start; border: 0; border-bottom: 1.5px solid var(--tb-line); background: none; } .tb-case__img { display: block; aspect-ratio: 16 / 11; overflow: hidden; background: var(--tb-surface-2); } .tb-case__img img { width: 100%; height: 100%; object-fit: cover; } .tb-case__img--placeholder { background: var(--tb-blue); } .tb-case__body { display: grid; gap: 12px; justify-items: start; } .tb-case__results { display: flex; gap: 24px; flex-wrap: wrap; } .tb-case__results span { display: grid; color: var(--tb-muted); font-size: .92rem; } .tb-case__results strong { font-size: 2.2rem; font-weight: var(--fw-black); color: var(--tb-blue); direction: ltr; unicode-bidi: isolate; justify-self: start; } .tb-case-story { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 44px; } .tb-case-story .tb-card { display: grid; gap: 16px; justify-items: start; } @media (max-width: 960px) { .tb-audit__grid, .tb-faq-page, .tb-case-story { grid-template-columns: 1fr; } .tb-faq-page__nav { position: static; display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; margin-inline: calc(-1 * var(--tb-gutter)); padding: 0 var(--tb-gutter) 6px; border: 0; scrollbar-width: none; } .tb-faq-page__nav::-webkit-scrollbar { display: none; } .tb-faq-page__nav a { flex: none; white-space: nowrap; border: 1.5px solid var(--tb-black); padding: 8px 14px; font-size: .92rem; } .tb-cases { grid-template-columns: 1fr; } } /* WhatsApp-first CTAs */ .tb-btn .tb-icon + span { line-height: 1; } .tb-icon-btn--wa { color: #25D366; } /* ========================================================================== Mobile refinements ========================================================================== */ .tb-more-btn, .tb-press__marquee, .tb-carousel__dots { display: none; } @media (max-width: 640px) { /* Home services: first 4, then "show more" */ [data-more-grid]:not(.is-open) .tb-service--more { display: none; } .tb-more-btn { display: flex; width: 100%; margin-top: 20px; } .tb-more-btn .tb-icon { transition: transform .35s var(--tb-ease); } .tb-more-btn[aria-expanded="true"] .tb-icon { transform: rotate(45deg); } /* News logos become a moving strip */ .tb-press__list { display: none; } .tb-press__marquee { display: block; margin-inline: calc(-1 * var(--tb-gutter)); width: calc(100% + 2 * var(--tb-gutter)); } .tb-press__marquee .tb-marquee__track { animation-duration: 30s; } .tb-press__marquee .tb-marquee__item { gap: 0; padding-inline: 22px; height: 56px; } .tb-press__marquee .tb-marquee__item::after { display: none; } .tb-press__marquee img { height: 30px; width: auto; max-width: 130px; object-fit: contain; filter: none; opacity: 1; } .tb-press__inner { justify-content: center; text-align: center; gap: 18px; } /* Testimonials: swipeable carousel, current card centered, neighbours peeking */ .tb-testimonials__grid[data-carousel] { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--tb-gutter)); padding: 6px 12% 18px; scrollbar-width: none; } .tb-testimonials__grid[data-carousel]::-webkit-scrollbar { display: none; } .tb-testimonials__grid[data-carousel] > .tb-quote { flex: 0 0 76%; scroll-snap-align: center; transition: transform .35s var(--tb-ease), opacity .35s; } .tb-testimonials__grid[data-carousel] > .tb-quote:not(.is-current) { transform: scale(.92); opacity: .6; } .tb-testimonials__grid[data-carousel] .tb-quote__video { aspect-ratio: 4 / 5; } .tb-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 6px; } .tb-carousel__dots button { width: 10px; height: 10px; padding: 0; border: 0; background: var(--tb-line-strong); cursor: pointer; transition: width .35s var(--tb-ease), background-color .3s; } .tb-carousel__dots button.is-active { width: 28px; background: var(--tb-blue); } .tb-audit__proof { gap: 10px 24px; } } /* Cookie consent ------------------------------------------------------- */ .tb-consent { position: fixed; z-index: 70; bottom: 22px; inset-inline-end: 100px; width: min(440px, calc(100% - 120px)); display: grid; gap: 16px; padding: 22px 24px; background: var(--tb-white); border: 1.5px solid var(--tb-black); box-shadow: var(--tb-shadow); font-size: .95rem; color: var(--tb-text); opacity: 0; transform: translateY(20px); transition: opacity .4s var(--tb-ease), transform .5s var(--tb-ease); } .tb-consent[hidden] { display: none; } .tb-consent:not(.is-in) { pointer-events: none; visibility: hidden; } .tb-consent.is-in { opacity: 1; transform: none; visibility: visible; } .tb-consent a { color: var(--tb-blue); text-decoration: underline; text-underline-offset: 3px; } .tb-consent__actions { display: flex; gap: 10px; flex-wrap: wrap; } @media (max-width: 640px) { .tb-consent { inset-inline: 12px; bottom: 12px; width: auto; } .tb-consent__actions .tb-btn { flex: 1; } .has-consent .tb-whatsapp { opacity: 0; pointer-events: none; } } .tb-related .tb-service { min-height: 240px; } /* Blog share */ .tb-share { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 44px; padding-top: 24px; border-top: 1.5px solid var(--tb-black); color: var(--tb-muted); } .tb-share a, .tb-share button { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding-inline: 12px; border: 1.5px solid var(--tb-black); background: var(--tb-white); color: var(--tb-black); font-weight: var(--fw-bold); text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s; } .tb-share button { display: inline-flex; gap: 6px; font-weight: var(--fw-medium); } .tb-share a:hover, .tb-share button:hover { background: var(--tb-black); color: #fff; } .tb-share__done { display: none; } .tb-share button.is-done { background: var(--tb-blue); border-color: var(--tb-blue); color: #fff; } .tb-share button.is-done .tb-share__done { display: block; } .tb-prose .tb-share a { text-decoration: none; color: var(--tb-black); } .tb-prose .tb-share a:hover { color: #fff; } /* Blog post: tighter gap between title and article */ .tb-post-hero + *, article > .tb-section { padding-top: clamp(40px, 5vw, 72px); } #contact { scroll-margin-top: calc(var(--tb-header) + 8px); } /* Campaigns: business goal ------------------------------------------------ */ .tb-goals__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .tb-goal-card { display: grid; gap: 14px; align-content: start; background: var(--tb-white); } .tb-goal-card__step { position: absolute; top: 22px; inset-inline-end: 24px; font-size: 2.6rem; font-weight: var(--fw-black); line-height: 1; color: var(--tb-surface-2); } .tb-goal-card p { color: var(--tb-muted); } .tb-goal-card__tools { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--tb-line); font-size: .85rem; font-weight: var(--fw-medium); color: var(--tb-blue); } .tb-goal-card:hover .tb-service__icon { background: var(--tb-grad); color: #fff; } /* KPI rings -------------------------------------------------------------- */ .tb-kpis { position: relative; isolation: isolate; overflow: hidden; background: var(--tb-black); color: #C9CCD3; --tb-heading: #fff; --tb-muted: #9AA0AC; --tb-line: rgba(255,255,255,.1); --tb-surface: #141518; } .tb-kpis .tb-label { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #fff; } .tb-kpis__glow { position: absolute; inset: -20% 10% auto; height: 70%; z-index: -1; background: radial-gradient(50% 60% at 50% 40%, rgba(1, 46, 251, .35), transparent 70%); pointer-events: none; } .tb-kpis__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .tb-kpi { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 28px 18px; border-radius: var(--tb-radius); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); } .tb-kpi p { font-size: .92rem; color: var(--tb-muted); } .tb-kpi__ring { position: relative; width: 150px; aspect-ratio: 1; display: grid; place-items: center; } .tb-kpi__ring svg { position: absolute; inset: 0; transform: rotate(-90deg) scaleX(-1); } .tb-kpi__track { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 9; } .tb-kpi__bar { fill: none; stroke: url(#tbKpiGrad); stroke-width: 9; stroke-linecap: round; stroke-dashoffset: var(--circ); transition: stroke-dashoffset 2.4s var(--tb-ease) .2s; filter: drop-shadow(0 0 6px rgba(2, 205, 253, .45)); } .tb-kpi.is-in .tb-kpi__bar, .no-js .tb-kpi__bar { stroke-dashoffset: calc(var(--circ) - var(--circ) * var(--p) / 100); } .tb-kpi__ring strong { font-size: 2.1rem; font-weight: var(--fw-black); color: #fff; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; } @media (max-width: 1100px) { .tb-goals__grid, .tb-kpis__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .tb-goals__grid { grid-template-columns: 1fr; } .tb-kpis__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .tb-kpi { padding: 20px 10px; } .tb-kpi__ring { width: 118px; } .tb-kpi__ring strong { font-size: 1.6rem; } .tb-kpi .tb-h3 { font-size: 1rem; } } @media (prefers-reduced-motion: reduce) { .tb-kpi__bar { stroke-dashoffset: calc(var(--circ) - var(--circ) * var(--p) / 100); } } /* Cold outreach: sniper scope ------------------------------------------ */ .tb-scope { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1; margin-inline: auto; border-radius: 50%; background: radial-gradient(circle, rgba(2, 116, 252, .08), rgba(2, 205, 253, .03) 55%, transparent 70%); } .tb-scope__field { position: absolute; inset: 0; width: 100%; height: 100%; } .tb-scope__ring { fill: none; stroke: rgba(2, 83, 252, .16); stroke-width: 1.2; stroke-dasharray: 4 6; } .tb-scope__axis { stroke: rgba(2, 83, 252, .12); stroke-width: 1; } .tb-scope__dot { fill: #C5CCDA; } .tb-scope__target { fill: var(--tb-blue); animation: tb-lock 9s infinite; transform-box: fill-box; transform-origin: center; } .tb-scope__target--1 { animation-delay: 3s; } .tb-scope__target--2 { animation-delay: 6s; } @keyframes tb-lock { 0%, 5% { fill: var(--tb-blue); transform: scale(1); } 12%, 28% { fill: var(--tb-cyan); transform: scale(1.5); filter: drop-shadow(0 0 6px var(--tb-cyan)); } 34%, 100% { fill: var(--tb-blue); transform: scale(1); } } .tb-scope__sweep { position: absolute; inset: 5%; border-radius: 50%; background: conic-gradient(from 0deg, rgba(2, 205, 253, .22), transparent 18%); animation: tb-spin 6s linear infinite; mix-blend-mode: multiply; pointer-events: none; } .tb-scope__reticle { position: absolute; width: 22%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 2px solid var(--tb-blue); box-shadow: 0 0 0 6px rgba(2, 83, 252, .08), 0 10px 30px -10px rgba(2, 83, 252, .6); animation: tb-aim 9s cubic-bezier(.65, 0, .35, 1) infinite; } .tb-scope__reticle::before, .tb-scope__reticle::after { content: ""; position: absolute; background: var(--tb-blue); } .tb-scope__reticle::before { width: 2px; inset-block: -12%; left: calc(50% - 1px); } .tb-scope__reticle::after { height: 2px; inset-inline: -12%; top: calc(50% - 1px); } .tb-scope__reticle span { position: absolute; inset: 38%; border-radius: 50%; background: var(--tb-grad); opacity: .9; } @keyframes tb-aim { 0%, 26% { left: 32%; top: 33%; } 33%, 59% { left: 67%; top: 40.5%; } 66%, 92% { left: 46.5%; top: 71.5%; } 100% { left: 32%; top: 33%; } } .tb-scope__chip { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--tb-line); box-shadow: 0 18px 40px -18px rgba(2, 38, 120, .35); font-size: .82rem; color: var(--tb-muted); white-space: nowrap; opacity: 0; translate: 0 12px; transition: opacity .6s var(--tb-ease), translate .6s var(--tb-ease); } .tb-scope__chip strong { display: block; color: var(--tb-heading); font-size: .88rem; } .tb-scope__chip span { display: grid; } .tb-scope__chip .tb-icon { width: 30px; height: 30px; padding: 6px; border-radius: 10px; background: var(--tb-tint); color: var(--tb-blue); } .tb-scope__chip--1 { top: 6%; inset-inline-end: -4%; } .tb-scope__chip--2 { top: 46%; inset-inline-start: 2%; } .tb-scope__chip--3 { bottom: 4%; inset-inline-end: 2%; } .tb-scope__chip--3 .tb-icon { background: var(--tb-grad); color: #fff; } .tb-scope.is-in .tb-scope__chip { opacity: 1; translate: 0 0; animation: tb-bob 5s ease-in-out infinite; } .tb-scope.is-in .tb-scope__chip--1 { transition-delay: .6s; animation-delay: 1.2s; } .tb-scope.is-in .tb-scope__chip--2 { transition-delay: 1.6s; animation-delay: 2.2s; } .tb-scope.is-in .tb-scope__chip--3 { transition-delay: 2.6s; animation-delay: 3.2s; } /* Broad vs direct ------------------------------------------------------- */ .tb-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; max-width: 980px; margin-inline: auto; } .tb-compare__col { display: grid; gap: 14px; align-content: start; background: var(--tb-white); } .tb-compare__col ul { display: grid; gap: 10px; margin-top: 4px; } .tb-compare__col li { position: relative; padding-inline-start: 28px; color: var(--tb-heading); } .tb-compare__col li::before { content: ""; position: absolute; inset-inline-start: 0; top: .35em; width: 18px; height: 18px; border-radius: 50%; } .tb-compare__col--muted { opacity: .85; } .tb-compare__col--muted p, .tb-compare__col--muted li { color: var(--tb-muted); } .tb-compare__col--muted li::before { background: rgba(10,10,10,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E") center/12px no-repeat; } .tb-compare__col--muted .tb-service__icon { background: rgba(10,10,10,.06); color: var(--tb-muted); } .tb-compare__col--win { border-color: transparent; background: linear-gradient(var(--tb-white), var(--tb-white)) padding-box, var(--tb-grad) border-box; border: 2px solid transparent; box-shadow: 0 30px 60px -30px rgba(2, 83, 252, .5); } .tb-compare__col--win li::before { background: var(--tb-grad) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat; } .tb-compare__col--win .tb-service__icon { background: var(--tb-grad); color: #fff; } .tb-compare__vs { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--tb-black); color: #fff; font-weight: var(--fw-black); font-size: .9rem; } /* Channels -------------------------------------------------------------- */ .tb-channels__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .tb-channel { display: grid; gap: 18px; align-content: start; } .tb-channel__head { display: flex; align-items: center; gap: 14px; } .tb-channel__bubble { position: relative; padding: 16px 18px; border-radius: 18px 18px 18px 4px; background: var(--tb-white); border: 1px solid var(--tb-line); box-shadow: 0 12px 30px -20px rgba(2, 38, 120, .35); } .tb-channel__meta { display: block; font-size: .78rem; font-weight: var(--fw-bold); color: var(--tb-blue); margin-bottom: 6px; } .tb-channel__bubble p { font-size: .95rem; color: var(--tb-heading); } .tb-channel__reply { justify-self: end; padding: 10px 16px; border-radius: 18px 18px 4px 18px; background: var(--tb-grad); } .tb-channel__typing { display: flex; gap: 4px; } .tb-channel__typing i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: tb-typing 1.2s infinite ease-in-out; } .tb-channel__typing i:nth-child(2) { animation-delay: .15s; } .tb-channel__typing i:nth-child(3) { animation-delay: .3s; } @keyframes tb-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } } @media (max-width: 960px) { .tb-compare { grid-template-columns: 1fr; } .tb-compare__vs { justify-self: center; } .tb-channels__grid { grid-template-columns: 1fr; } .tb-scope { max-width: 400px; margin-top: 12px; } } @media (max-width: 640px) { .tb-scope__chip { font-size: .72rem; padding: 8px 10px; } .tb-scope__chip strong { font-size: .78rem; } .tb-scope__chip .tb-icon { width: 26px; height: 26px; } .tb-scope__chip--1 { inset-inline-end: 0; } } @media (prefers-reduced-motion: reduce) { .tb-scope__reticle { left: 32%; top: 33%; } } /* Header CTA never shrinks */ .tb-header__actions { flex: none; } .tb-header__cta { flex: none; } @media (max-width: 1100px) and (min-width: 961px) { .tb-nav__list > li > a { padding-inline: 10px; } } /* Social media: phone feed ------------------------------------------------ */ .tb-phone-wrap { position: relative; width: 100%; max-width: 480px; min-height: 560px; margin-inline: auto; display: grid; place-items: center; } .tb-phone-wrap::before { content: ""; position: absolute; inset: 8% 4%; border-radius: 50%; background: radial-gradient(circle, rgba(2, 116, 252, .16), rgba(2, 205, 253, .06) 50%, transparent 70%); animation: tb-breathe 6s ease-in-out infinite; } .tb-phone { position: relative; width: 258px; height: 520px; border-radius: 42px; padding: 12px; background: #0A0A0A; box-shadow: 0 40px 80px -30px rgba(2, 38, 120, .55), inset 0 0 0 2px rgba(255,255,255,.08); } .tb-phone__notch { position: absolute; top: 12px; left: 50%; translate: -50% 0; width: 90px; height: 22px; border-radius: 0 0 14px 14px; background: #0A0A0A; z-index: 3; } .tb-phone__head { position: absolute; inset-inline: 12px; top: 12px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 36px 14px 10px; border-radius: 30px 30px 0 0; background: #fff; border-bottom: 1px solid rgba(10, 10, 10, .08); } .tb-phone__head strong { display: block; font-size: .85rem; color: var(--tb-heading); direction: ltr; text-align: right; } .tb-phone__head small { color: var(--tb-muted); font-size: .72rem; } .tb-phone__avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tb-grad); color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #E1306C; } .tb-phone__avatar .tb-icon { width: 18px; height: 18px; } .tb-phone__feed { position: relative; height: 100%; overflow: hidden; border-radius: 30px; background: #fff; } .tb-phone__track { display: grid; gap: 14px; padding: 104px 14px 14px; animation: tb-feed 22s linear infinite; } .tb-phone:hover .tb-phone__track { animation-play-state: paused; } @keyframes tb-feed { to { transform: translateY(-50%); } } .tb-phone__post { display: grid; gap: 8px; } .tb-phone__media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 16px; color: #fff; overflow: hidden; } .tb-phone__media .tb-icon { width: 42px; height: 42px; opacity: .9; } .tb-phone__media span { position: absolute; top: 10px; inset-inline-start: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.22); backdrop-filter: blur(6px); font-size: .7rem; font-weight: var(--fw-bold); } .tb-phone__post p { font-size: .76rem; font-weight: var(--fw-medium); color: var(--tb-heading); line-height: 1.4; } .tb-phone__post--0 .tb-phone__media { background: linear-gradient(135deg, #012EFB, #02CDFD); } .tb-phone__post--1 .tb-phone__media { background: linear-gradient(135deg, #0A0A0A, #1B3A8A); } .tb-phone__post--2 .tb-phone__media { background: linear-gradient(135deg, #0274FC, #7B61FF); } .tb-phone__post--3 .tb-phone__media { background: linear-gradient(135deg, #02CDFD, #0253FC); } .tb-phone__post--4 .tb-phone__media { background: linear-gradient(135deg, #1B1C1F, #0274FC); } .tb-phone__chip { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--tb-line); box-shadow: 0 18px 40px -18px rgba(2, 38, 120, .4); font-size: .78rem; color: var(--tb-muted); white-space: nowrap; opacity: 0; translate: 0 14px; transition: opacity .6s var(--tb-ease), translate .6s var(--tb-ease); } .tb-phone__chip span:last-child { display: grid; } .tb-phone__chip strong { color: var(--tb-heading); font-size: 1rem; direction: ltr; text-align: right; } .tb-phone__chip .tb-icon { width: 30px; height: 30px; padding: 7px; border-radius: 10px; background: var(--tb-grad); color: #fff; } .tb-phone__heart { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: #FFE8EE; color: #E5245B; font-size: 1rem; animation: tb-heart 1.6s ease-in-out infinite; } @keyframes tb-heart { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } } .tb-phone__chip--1 { top: 16%; inset-inline-end: 0; } .tb-phone__chip--2 { top: 48%; inset-inline-start: 0; } .tb-phone__chip--3 { bottom: 10%; inset-inline-end: 2%; } .tb-phone-wrap.is-in .tb-phone__chip { opacity: 1; translate: 0 0; animation: tb-bob 5s ease-in-out infinite; } .tb-phone-wrap.is-in .tb-phone__chip--1 { transition-delay: .5s; animation-delay: 1s; } .tb-phone-wrap.is-in .tb-phone__chip--2 { transition-delay: 1.1s; animation-delay: 1.6s; } .tb-phone-wrap.is-in .tb-phone__chip--3 { transition-delay: 1.7s; animation-delay: 2.2s; } .tb-phone__float { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #fff; box-shadow: 0 14px 30px -14px rgba(2, 38, 120, .4); animation: tb-bob 6s ease-in-out infinite; } .tb-phone__float .tb-icon { width: 22px; height: 22px; } .tb-phone__float--ig { top: 4%; inset-inline-start: 12%; color: #E1306C; } .tb-phone__float--tt { bottom: 22%; inset-inline-start: 6%; color: #0A0A0A; animation-delay: 1.5s; } .tb-phone__float--fb { top: 34%; inset-inline-end: 4%; color: #1877F2; animation-delay: 3s; } .tb-pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 1100px) { .tb-pillars__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .tb-pillars__grid { grid-template-columns: 1fr; } .tb-phone-wrap { min-height: 500px; } .tb-phone { width: 220px; height: 450px; border-radius: 36px; } .tb-phone__chip { font-size: .7rem; padding: 8px 10px; } .tb-phone__chip strong { font-size: .88rem; } .tb-phone__float { width: 38px; height: 38px; } } @media (prefers-reduced-motion: reduce) { .tb-phone__track { animation: none; } } /* Press: article mockup ------------------------------------------------- */ .tb-article-wrap { position: relative; width: 100%; max-width: 480px; margin-inline: auto; padding: 30px 20px; } .tb-article-wrap::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(2, 116, 252, .14), transparent 68%); z-index: -1; } .tb-article { border-radius: 18px; background: #fff; border: 1px solid var(--tb-line); box-shadow: 0 40px 80px -36px rgba(2, 38, 120, .5); overflow: hidden; rotate: -2deg; transition: rotate .6s var(--tb-ease); } .tb-article-wrap:hover .tb-article { rotate: 0deg; } .tb-article__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--tb-surface); border-bottom: 1px solid var(--tb-line); direction: ltr; } .tb-article__bar i { width: 9px; height: 9px; border-radius: 50%; background: #D5DAE3; } .tb-article__bar span { margin-inline-start: 10px; padding: 3px 12px; border-radius: 999px; background: #fff; font-size: .72rem; color: var(--tb-muted); } .tb-article__masthead { padding: 12px 18px; border-bottom: 3px solid #DE1C24; } .tb-article__masthead img { height: 30px; width: auto; } .tb-article__body { display: grid; gap: 10px; padding: 18px; } .tb-article__tag { justify-self: start; padding: 2px 10px; border-radius: 6px; background: #F1F3F7; font-size: .7rem; color: var(--tb-muted); } .tb-article__body h3 { font-size: 1.15rem; line-height: 1.3; } .tb-article__img { display: grid; place-items: center; aspect-ratio: 16 / 8; border-radius: 12px; background: radial-gradient(80% 90% at 80% 10%, rgba(2, 205, 253, .55), transparent 65%), var(--tb-grad); color: #fff; } .tb-article__img .tb-icon { width: 54px; height: 54px; opacity: .9; } .tb-article__line { height: 8px; border-radius: 4px; background: #EDF0F5; } .tb-article__line--short { width: 60%; } .tb-article__link { justify-self: start; color: var(--tb-blue); font-weight: var(--fw-bold); font-size: .85rem; text-decoration: underline; animation: tb-pulse-text 2.4s ease-in-out infinite; } @keyframes tb-pulse-text { 50% { color: var(--tb-cyan); } } .tb-article__badge { position: absolute; top: 8px; inset-inline-start: -6px; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; background: var(--tb-black); color: #fff; font-size: .78rem; font-weight: var(--fw-bold); box-shadow: 0 16px 36px -16px rgba(0,0,0,.6); animation: tb-bob 5s ease-in-out infinite; } .tb-article__badge img { height: 20px; width: auto; background: #fff; border-radius: 4px; padding: 2px 4px; } .tb-article__chip { position: absolute; } .tb-article__chip--1 { bottom: 26%; inset-inline-end: -12px; } .tb-article__chip--2 { bottom: 2%; inset-inline-start: 4%; } .tb-article-wrap.is-in .tb-article__chip { opacity: 1; translate: 0 0; animation: tb-bob 5s ease-in-out infinite; } .tb-article-wrap.is-in .tb-article__chip--1 { transition-delay: .7s; animation-delay: 1.2s; } .tb-article-wrap.is-in .tb-article__chip--2 { transition-delay: 1.3s; animation-delay: 1.8s; } /* Press: funnel ---------------------------------------------------------- */ .tb-funnel__steps { display: grid; grid-template-columns: 1fr 80px 1fr 80px 1fr; align-items: stretch; gap: 0; } .tb-funnel__step { position: relative; display: grid; gap: 12px; align-content: start; background: var(--tb-white); } .tb-funnel__step p { color: var(--tb-muted); } .tb-funnel__num { position: absolute; top: 20px; inset-inline-end: 22px; font-size: 2.6rem; font-weight: var(--fw-black); line-height: 1; color: var(--tb-surface-2); } .tb-funnel__step--hot { border: 2px solid transparent; background: linear-gradient(var(--tb-white), var(--tb-white)) padding-box, var(--tb-grad) border-box; box-shadow: 0 30px 60px -30px rgba(2, 83, 252, .5); } .tb-funnel__step--hot .tb-service__icon { background: var(--tb-grad); color: #fff; } .tb-funnel__arrow { position: relative; display: grid; place-items: center; } .tb-funnel__arrow span { position: relative; width: 100%; height: 2px; background: repeating-linear-gradient(to left, var(--tb-blue) 0 6px, transparent 6px 12px); opacity: .5; } .tb-funnel__arrow span::after { content: ""; position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--tb-cyan); box-shadow: 0 0 10px var(--tb-cyan); animation: tb-flow-dot 2.2s linear infinite; } @keyframes tb-flow-dot { from { right: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { right: calc(100% - 10px); opacity: 0; } } .tb-heat { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; max-width: 760px; margin: 40px auto 0; } .tb-heat__label { font-weight: var(--fw-bold); color: var(--tb-muted); white-space: nowrap; } .tb-heat__label--hot { color: #E5484D; } .tb-heat__bar { position: relative; height: 12px; border-radius: 999px; background: #E6EAF1; overflow: visible; } .tb-heat__fill { position: absolute; inset-block: 0; right: 0; width: 0; border-radius: 999px; background: linear-gradient(to left, #9AB6FF, #0274FC 45%, #FF8A3D 80%, #E5484D); transition: width 2.6s var(--tb-ease) .3s; } .tb-heat.is-in .tb-heat__fill { width: 100%; } .tb-heat__dot { position: absolute; top: 50%; right: 0; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: #fff; border: 3px solid #E5484D; box-shadow: 0 6px 16px -6px rgba(229, 72, 77, .7); transition: right 2.6s var(--tb-ease) .3s; } .tb-heat.is-in .tb-heat__dot { right: calc(100% - 22px); } @media (max-width: 960px) { .tb-funnel__steps { grid-template-columns: 1fr; gap: 0; } .tb-funnel__arrow { height: 48px; } .tb-funnel__arrow span { width: 2px; height: 100%; background: repeating-linear-gradient(to bottom, var(--tb-blue) 0 6px, transparent 6px 12px); } .tb-funnel__arrow span::after { left: 50%; margin-left: -5px; margin-top: 0; animation-name: tb-flow-dot-v; } .tb-article-wrap { max-width: 400px; margin-top: 16px; } } @keyframes tb-flow-dot-v { from { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { top: calc(100% - 10px); opacity: 0; } } @media (max-width: 640px) { .tb-heat { grid-template-columns: 1fr 1fr; } .tb-heat__bar { grid-column: 1 / -1; grid-row: 1; } .tb-heat__label--hot { justify-self: end; } .tb-article__chip--1 { inset-inline-end: 0; } .tb-article__badge { inset-inline-start: 0; } } /* Photo shoots: viewfinder ------------------------------------------------ */ .tb-viewfinder-wrap { position: relative; width: 100%; max-width: 520px; margin-inline: auto; padding: 36px 16px; } .tb-viewfinder { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: #0A0A0A; box-shadow: 0 40px 80px -30px rgba(2, 38, 120, .55); } .tb-viewfinder__scene { position: absolute; inset: 0; background: linear-gradient(180deg, #0B2C8F 0%, #0274FC 45%, #6FD8FF 100%); animation: tb-pan 14s ease-in-out infinite alternate; } @keyframes tb-pan { from { transform: scale(1.12) translateX(3%); } to { transform: scale(1.02) translateX(-3%); } } .tb-viewfinder__sun { position: absolute; top: 18%; left: 22%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #FFF6D5, #FFD36E 60%, transparent 70%); filter: blur(1px); } .tb-viewfinder__hill { position: absolute; bottom: -30%; border-radius: 50%; } .tb-viewfinder__hill--1 { left: -20%; width: 90%; height: 70%; background: #0A1E5E; } .tb-viewfinder__hill--2 { right: -25%; width: 100%; height: 62%; background: #07143F; } .tb-viewfinder__subject { position: absolute; bottom: 14%; left: 56%; width: 9%; height: 34%; border-radius: 40% 40% 12% 12%; background: #0A0A0A; box-shadow: 0 -30% 0 -5% #0A0A0A; } .tb-viewfinder__subject::before { content: ""; position: absolute; top: -34%; left: 18%; width: 64%; aspect-ratio: 1; border-radius: 50%; background: #0A0A0A; } .tb-viewfinder__grid { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 33.1%, rgba(255,255,255,.35) 33.3%, transparent 33.5%, transparent 66.5%, rgba(255,255,255,.35) 66.7%, transparent 66.9%), linear-gradient(transparent 33.1%, rgba(255,255,255,.35) 33.3%, transparent 33.5%, transparent 66.5%, rgba(255,255,255,.35) 66.7%, transparent 66.9%); } .tb-viewfinder__corner { position: absolute; width: 26px; height: 26px; border: 3px solid #fff; } .tb-viewfinder__corner--tl { top: 16px; left: 16px; border-right: 0; border-bottom: 0; } .tb-viewfinder__corner--tr { top: 16px; right: 16px; border-left: 0; border-bottom: 0; } .tb-viewfinder__corner--bl { bottom: 16px; left: 16px; border-right: 0; border-top: 0; } .tb-viewfinder__corner--br { bottom: 16px; right: 16px; border-left: 0; border-top: 0; } .tb-viewfinder__focus { position: absolute; left: 53%; top: 44%; width: 16%; aspect-ratio: 1; border: 2px solid #FFD36E; animation: tb-focus 4s ease-in-out infinite; } @keyframes tb-focus { 0%, 100% { transform: scale(1.3); opacity: .4; } 20%, 70% { transform: scale(1); opacity: 1; } } .tb-viewfinder__hud { position: absolute; inset-inline: 22px; display: flex; justify-content: space-between; gap: 12px; color: #fff; font: 700 .78rem/1 ui-monospace, "SF Mono", Menlo, monospace; direction: ltr; text-shadow: 0 1px 4px rgba(0,0,0,.5); } .tb-viewfinder__hud--top { top: 50px; } .tb-viewfinder__hud--bottom { bottom: 50px; justify-content: center; gap: 24px; opacity: .85; } .tb-viewfinder__rec { display: inline-flex; align-items: center; gap: 6px; } .tb-viewfinder__rec::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #FF3B3B; animation: tb-blink 1s steps(1) infinite; } .tb-shoot__chip { position: absolute; } .tb-shoot__chip--1 { top: 2%; inset-inline-end: -8px; } .tb-shoot__chip--2 { top: 44%; inset-inline-start: -10px; } .tb-shoot__chip--3 { bottom: 0; inset-inline-end: 8%; } .tb-viewfinder-wrap.is-in .tb-shoot__chip { opacity: 1; translate: 0 0; animation: tb-bob 5s ease-in-out infinite; } .tb-viewfinder-wrap.is-in .tb-shoot__chip--1 { transition-delay: .5s; animation-delay: 1s; } .tb-viewfinder-wrap.is-in .tb-shoot__chip--2 { transition-delay: 1.1s; animation-delay: 1.6s; } .tb-viewfinder-wrap.is-in .tb-shoot__chip--3 { transition-delay: 1.7s; animation-delay: 2.2s; } /* Production pipeline as a film strip */ .tb-film { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; padding: 26px 12px; border-radius: var(--tb-radius); background: #0A0A0A; position: relative; } .tb-film::before, .tb-film::after { content: ""; position: absolute; inset-inline: 12px; height: 10px; background: repeating-linear-gradient(to left, rgba(255,255,255,.28) 0 14px, transparent 14px 28px); border-radius: 3px; } .tb-film::before { top: 8px; } .tb-film::after { bottom: 8px; } .tb-film__frame { position: relative; display: grid; gap: 10px; align-content: start; margin: 0 6px; padding: 22px 18px; border-radius: 14px; background: #16181D; color: #9AA0AC; transition: background .3s, translate .3s var(--tb-ease); } .tb-film__frame:hover { background: #1C2030; translate: 0 -4px; } .tb-film__frame .tb-h3 { color: #fff; font-size: 1.1rem; } .tb-film__frame p { font-size: .9rem; } .tb-film__num { position: absolute; top: 16px; inset-inline-end: 16px; font-weight: var(--fw-black); font-size: 1.6rem; background: var(--tb-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .tb-film__frame .tb-service__icon { background: rgba(2, 116, 252, .18); color: var(--tb-cyan); } /* Video reels */ .tb-reels { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; } .tb-reel { position: relative; display: block; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: var(--tb-radius); overflow: hidden; cursor: pointer; background: radial-gradient(80% 70% at 70% 20%, rgba(2, 205, 253, .5), transparent 70%), var(--tb-grad); color: #fff; text-align: right; font: inherit; } .tb-reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--tb-ease); } .tb-reel:hover video { transform: scale(1.04); } .tb-reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,10,.7), transparent 45%); pointer-events: none; } .tb-reel__play { position: absolute; top: 50%; left: 50%; z-index: 1; translate: -50% -50%; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.22); backdrop-filter: blur(8px); box-shadow: 0 0 0 8px rgba(255,255,255,.12); transition: opacity .3s, scale .3s var(--tb-ease); } .tb-reel:hover .tb-reel__play { opacity: 0; scale: .8; } .tb-reel--placeholder:hover .tb-reel__play { opacity: 1; scale: 1; } .tb-reel__title { position: absolute; z-index: 1; inset-inline: 16px; bottom: 16px; display: grid; font-weight: var(--fw-bold); } .tb-reel__title small { font-weight: var(--fw-light); opacity: .8; font-size: .82rem; } /* Lightbox */ .tb-lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 60px 16px 24px; background: rgba(5, 7, 15, .88); backdrop-filter: blur(8px); } .tb-lightbox[hidden] { display: none; } .tb-lightbox__stage { width: min(420px, 100%); max-height: 100%; } .tb-lightbox__stage video, .tb-lightbox__stage iframe { display: block; width: 100%; max-height: calc(100vh - 100px); aspect-ratio: 9 / 16; border: 0; border-radius: 16px; background: #000; } .tb-lightbox__close { position: absolute; top: 16px; inset-inline-end: 16px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; } @media (max-width: 1100px) { } @media (max-width: 900px) { .tb-film { grid-template-columns: repeat(2, 1fr); row-gap: 12px; } .tb-film__frame:last-child { grid-column: 1 / -1; } } @media (max-width: 640px) { .tb-film { grid-template-columns: 1fr; padding: 26px 8px; } .tb-reels { grid-template-columns: repeat(2, 1fr); gap: 10px; } .tb-shoot__chip--1 { inset-inline-end: 0; } .tb-shoot__chip--2 { inset-inline-start: 0; } .tb-viewfinder__hud { font-size: .66rem; inset-inline: 14px; } .tb-viewfinder__hud--top { top: 40px; } .tb-viewfinder__hud--bottom { bottom: 40px; gap: 12px; } } /* Creative: design canvas ------------------------------------------------ */ .tb-canvas-wrap { position: relative; width: 100%; max-width: 520px; margin-inline: auto; padding: 20px 0; } .tb-canvas-wrap::before { content: ""; position: absolute; inset: 0 -6%; border-radius: 50%; background: radial-gradient(circle, rgba(2, 116, 252, .14), transparent 68%); z-index: -1; } .tb-canvas { display: grid; grid-template-columns: 1fr 120px; grid-template-rows: auto 1fr; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--tb-line); box-shadow: 0 40px 80px -34px rgba(2, 38, 120, .5); direction: ltr; } .tb-canvas__bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #1B1C1F; } .tb-canvas__bar i { width: 9px; height: 9px; border-radius: 50%; background: #3A3D45; } .tb-canvas__bar span { margin-left: 10px; color: #9AA0AC; font: 500 .72rem/1 ui-monospace, Menlo, monospace; } .tb-canvas__board { position: relative; display: grid; place-items: center; padding: 26px; background-color: #F1F3F7; background-image: radial-gradient(#D5DAE3 1px, transparent 1px); background-size: 14px 14px; } .tb-canvas__art { position: relative; width: 78%; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; box-shadow: 0 16px 34px -18px rgba(2, 38, 120, .5); direction: rtl; } .tb-canvas__layer { position: absolute; opacity: 0; } .tb-canvas__layer--bg { inset: 0; background: var(--tb-grad); animation: tb-layer-bg 8s var(--tb-ease) infinite; } .tb-canvas__layer--shape { width: 70%; aspect-ratio: 1; top: -18%; left: -22%; border-radius: 50%; background: rgba(255,255,255,.18); animation: tb-layer-shape 8s var(--tb-ease) infinite; } .tb-canvas__layer--title { inset-inline: 12%; top: 30%; color: #fff; font-weight: var(--fw-black); font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem); line-height: 1.05; animation: tb-layer-title 8s var(--tb-ease) infinite; } .tb-canvas__layer--title small { font-size: .5em; font-weight: var(--fw-medium); opacity: .85; } .tb-canvas__layer--cta { inset-inline-start: 12%; bottom: 12%; padding: 8px 16px; border-radius: 999px; background: #0A0A0A; color: #fff; font-weight: var(--fw-bold); font-size: .8rem; animation: tb-layer-cta 8s var(--tb-ease) infinite; } .tb-canvas__select { position: absolute; border: 1.5px solid #02CDFD; box-shadow: 0 0 0 1px rgba(255,255,255,.4); animation: tb-select 8s var(--tb-ease) infinite; pointer-events: none; } @keyframes tb-select { 0%, 12% { inset: 0; opacity: 0; } 14%, 22% { inset: 2%; opacity: 1; } 30%, 40% { inset: 28% 10% 44% 10%; opacity: 1; } 48%, 60% { inset: 80% 12% 10% 55%; opacity: 1; } 66%, 100% { inset: 80% 12% 10% 55%; opacity: 0; } } .tb-canvas__cursor { position: absolute; top: 0; left: 0; display: flex; align-items: flex-start; gap: 2px; animation: tb-cursor 8s var(--tb-ease) infinite; pointer-events: none; } .tb-canvas__cursor svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); } .tb-canvas__cursor em { margin-top: 16px; padding: 3px 8px; border-radius: 6px; background: var(--tb-blue); color: #fff; font-style: normal; font-size: .68rem; font-weight: var(--fw-bold); white-space: nowrap; direction: rtl; } @keyframes tb-cursor { 0% { transform: translate(260px, 300px); } 14%, 22% { transform: translate(210px, 60px); } 30%, 40% { transform: translate(120px, 150px); } 48%, 60% { transform: translate(90px, 260px); } 80%, 100% { transform: translate(260px, 300px); } } .tb-canvas__panel { display: grid; align-content: start; gap: 10px; padding: 16px 12px; background: #fff; border-left: 1px solid var(--tb-line); direction: rtl; } .tb-canvas__panel-title { font-size: .66rem; font-weight: var(--fw-bold); color: var(--tb-muted); letter-spacing: .02em; } .tb-canvas__swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 8px; } .tb-canvas__swatches i { aspect-ratio: 1; border-radius: 8px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); animation: tb-swatch 8s ease-in-out infinite; } .tb-canvas__swatches i:nth-child(2) { animation-delay: .4s; } .tb-canvas__swatches i:nth-child(3) { animation-delay: .8s; } .tb-canvas__swatches i:nth-child(4) { animation-delay: 1.2s; } @keyframes tb-swatch { 0%, 8%, 100% { transform: scale(1); } 4% { transform: scale(1.15); } } .tb-canvas__type { font-size: 2rem; font-weight: var(--fw-black); line-height: 1; color: var(--tb-heading); } .tb-canvas__type small { display: block; margin-top: 4px; font-size: .64rem; font-weight: var(--fw-medium); color: var(--tb-muted); } .tb-goals__grid--5 { grid-template-columns: repeat(5, 1fr); } /* One idea, three formats */ .tb-formats__row { display: flex; align-items: flex-end; justify-content: center; gap: 24px; flex-wrap: wrap; } .tb-format { margin: 0; display: grid; gap: 10px; justify-items: center; } .tb-format figcaption { font-size: .85rem; font-weight: var(--fw-medium); color: var(--tb-muted); } .tb-format__art { position: relative; display: grid; align-content: space-between; padding: 18px; border-radius: 16px; overflow: hidden; color: #fff; background: radial-gradient(70% 60% at 85% 10%, rgba(255,255,255,.25), transparent 60%), var(--tb-grad); box-shadow: 0 30px 60px -30px rgba(2, 83, 252, .6); transition: transform .4s var(--tb-ease); } .tb-format:hover .tb-format__art { transform: translateY(-6px); } .tb-format__logo { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: var(--fw-bold); opacity: .9; } .tb-format__logo .tb-icon { width: 18px; height: 18px; } .tb-format__art strong { font-size: 1.2rem; font-weight: var(--fw-black); line-height: 1.15; } .tb-format__cta { justify-self: start; padding: 6px 14px; border-radius: 999px; background: #0A0A0A; font-size: .75rem; font-weight: var(--fw-bold); } .tb-format--story .tb-format__art { width: 180px; aspect-ratio: 9 / 16; } .tb-format--post .tb-format__art { width: 250px; aspect-ratio: 4 / 5; } .tb-format--post .tb-format__art strong { font-size: 1.5rem; } .tb-format--banner .tb-format__art { width: 340px; aspect-ratio: 16 / 9; } @media (max-width: 1100px) { .tb-goals__grid--5 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .tb-goals__grid--5 { grid-template-columns: 1fr; } .tb-canvas { grid-template-columns: 1fr 88px; } .tb-canvas__type { font-size: 1.5rem; } .tb-format--story .tb-format__art { width: 130px; } .tb-format--post .tb-format__art { width: 170px; } .tb-format--banner .tb-format__art { width: 100%; max-width: 320px; } .tb-format--banner { width: 100%; } } @media (prefers-reduced-motion: reduce) { .tb-canvas__layer { opacity: 1; } .tb-canvas__select, .tb-canvas__cursor { display: none; } } /* Branding: positioning map ---------------------------------------------- */ .tb-pos-steps { display: grid; gap: 14px; } .tb-pos-steps li { display: flex; gap: 14px; align-items: flex-start; } .tb-pos-steps li > span { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--tb-grad); color: #fff; font-weight: var(--fw-bold); } .tb-pos-steps strong { display: block; color: var(--tb-heading); } .tb-pos-steps div { color: var(--tb-muted); } .tb-posmap-wrap { width: 100%; max-width: 500px; margin-inline: auto; padding: 10px; } .tb-posmap { position: relative; aspect-ratio: 1; border-radius: 24px; background: #fff; border: 1px solid var(--tb-line); box-shadow: 0 40px 80px -36px rgba(2, 38, 120, .45); background-image: linear-gradient(rgba(2, 83, 252, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(2, 83, 252, .05) 1px, transparent 1px); background-size: 10% 10%; } .tb-posmap__axis { position: absolute; background: rgba(10, 10, 10, .18); } .tb-posmap__axis--x { left: 8%; right: 8%; top: 50%; height: 1.5px; } .tb-posmap__axis--y { top: 8%; bottom: 8%; left: 50%; width: 1.5px; } .tb-posmap__label { position: absolute; font-size: .74rem; font-weight: var(--fw-bold); color: var(--tb-muted); white-space: nowrap; } .tb-posmap__label--right { right: 3%; top: calc(50% + 8px); } .tb-posmap__label--left { left: 3%; top: calc(50% + 8px); } .tb-posmap__label--top { top: 3%; left: 50%; translate: -50% 0; } .tb-posmap__label--bottom { bottom: 3%; left: 50%; translate: -50% 0; } .tb-posmap__zone { position: absolute; left: 10%; top: 12%; width: 32%; aspect-ratio: 1; display: grid; place-items: end center; padding-bottom: 8px; border-radius: 50%; border: 2px dashed rgba(2, 116, 252, .45); background: radial-gradient(circle, rgba(2, 205, 253, .14), transparent 70%); font-size: .7rem; font-weight: var(--fw-bold); color: var(--tb-blue); opacity: 0; transition: opacity .8s var(--tb-ease) 1.2s; } .tb-posmap-wrap.is-in .tb-posmap__zone { opacity: 1; animation: tb-breathe 4s ease-in-out 2s infinite; } .tb-posmap__dot { position: absolute; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: #B9C1CF; box-shadow: 0 0 0 4px rgba(185, 193, 207, .25); opacity: 0; transform: scale(.3); transition: opacity .5s, transform .5s var(--tb-ease); transition-delay: calc(var(--d) * 80ms + .2s); } .tb-posmap-wrap.is-in .tb-posmap__dot { opacity: 1; transform: none; } .tb-posmap__you { position: absolute; right: 38%; bottom: 36%; translate: 50% 50%; display: grid; justify-items: center; gap: 4px; z-index: 2; transition: right 1.6s cubic-bezier(.65, 0, .35, 1) 1.4s, bottom 1.6s cubic-bezier(.65, 0, .35, 1) 1.4s; } .tb-posmap-wrap.is-in .tb-posmap__you { right: 74%; bottom: 72%; } .tb-posmap__you-pin { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tb-grad); color: #fff; box-shadow: 0 0 0 8px rgba(2, 116, 252, .15), 0 14px 30px -10px rgba(2, 83, 252, .8); } .tb-posmap__you-pin .tb-icon { width: 24px; height: 24px; } .tb-posmap__you em { font-style: normal; font-size: .74rem; font-weight: var(--fw-bold); color: var(--tb-heading); background: #fff; padding: 2px 8px; border-radius: 6px; box-shadow: 0 6px 14px -8px rgba(0,0,0,.3); white-space: nowrap; } /* Branding: brand book --------------------------------------------------- */ .tb-identity .tb-about__grid { align-items: center; } .tb-brandbook-wrap { width: 100%; max-width: 520px; margin-inline: auto; perspective: 1400px; } .tb-brandbook { display: grid; grid-template-columns: 1fr 1fr; border-radius: 14px; box-shadow: 0 50px 90px -40px rgba(2, 38, 120, .55); transform: rotateX(8deg) rotateY(-6deg); transition: transform .8s var(--tb-ease); } .tb-brandbook-wrap:hover .tb-brandbook { transform: none; } .tb-brandbook__page { display: grid; align-content: start; gap: 12px; padding: 24px 20px; min-height: 330px; background: #fff; } .tb-brandbook__page--right { border-radius: 0 14px 14px 0; background: linear-gradient(90deg, #EEF1F6, #fff 12%); box-shadow: inset 1px 0 0 rgba(0,0,0,.06); } .tb-brandbook__page--left { border-radius: 14px 0 0 14px; background: linear-gradient(270deg, #EEF1F6, #fff 12%); } .tb-brandbook__kicker { font-size: .7rem; font-weight: var(--fw-bold); letter-spacing: .04em; color: var(--tb-blue); } .tb-brandbook__logo { display: grid; place-items: center; width: 92px; height: 92px; margin: 14px auto 0; border-radius: 26px; background: var(--tb-grad); color: #fff; box-shadow: 0 18px 36px -14px rgba(2, 83, 252, .7); transform: scale(.6); opacity: 0; transition: transform .8s var(--tb-ease) .4s, opacity .8s .4s; } .tb-brandbook__logo .tb-icon { width: 54px; height: 54px; } .tb-brandbook__name { text-align: center; font-weight: var(--fw-black); font-size: 1.1rem; color: var(--tb-heading); } .tb-brandbook__values { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; } .tb-brandbook__values i { font-style: normal; font-size: .7rem; padding: 3px 10px; border-radius: 999px; background: var(--tb-tint); color: var(--tb-blue); } .tb-brandbook__palette { display: grid; gap: 6px; margin-bottom: 8px; } .tb-brandbook__palette i { display: flex; align-items: flex-end; height: 44px; padding: 6px 8px; border-radius: 8px; background: var(--c); transform-origin: right; transform: scaleX(0); transition: transform .7s var(--tb-ease); } .tb-brandbook__palette i:nth-child(1) { transition-delay: .8s; } .tb-brandbook__palette i:nth-child(2) { transition-delay: 1s; } .tb-brandbook__palette i:nth-child(3) { transition-delay: 1.2s; } .tb-brandbook__palette b { font: 700 .66rem/1 ui-monospace, Menlo, monospace; color: #fff; direction: ltr; } .tb-brandbook__type strong { display: block; font-size: 2.2rem; font-weight: var(--fw-black); line-height: 1; color: var(--tb-heading); } .tb-brandbook__type small { font-size: .7rem; color: var(--tb-muted); } .tb-brandbook-wrap.is-in .tb-brandbook__logo { transform: none; opacity: 1; } .tb-brandbook-wrap.is-in .tb-brandbook__palette i { transform: none; } .tb-deliverables { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; margin-top: 28px; } .tb-deliverable { display: flex; gap: 12px; align-items: flex-start; } .tb-deliverable .tb-service__icon { width: 44px; height: 44px; border-radius: 12px; } .tb-deliverable .tb-service__icon .tb-icon { width: 22px; height: 22px; } .tb-deliverable strong { display: block; color: var(--tb-heading); } .tb-deliverable span { font-size: .9rem; color: var(--tb-muted); } @media (max-width: 960px) { .tb-identity .tb-brandbook-wrap { order: 2; margin-top: 24px; } } @media (max-width: 640px) { .tb-deliverables { grid-template-columns: 1fr; } .tb-brandbook__page { min-height: 260px; padding: 18px 14px; } .tb-brandbook__logo { width: 70px; height: 70px; } .tb-posmap__label { font-size: .64rem; } } /* Websites: browser build ----------------------------------------------- */ .tb-browser-wrap { position: relative; width: 100%; max-width: 540px; margin-inline: auto; padding: 24px 0 40px; } .tb-browser-wrap::before { content: ""; position: absolute; inset: 0 -6%; border-radius: 50%; background: radial-gradient(circle, rgba(2, 116, 252, .14), transparent 68%); z-index: -1; } .tb-browser { border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--tb-line); box-shadow: 0 40px 80px -34px rgba(2, 38, 120, .5); } .tb-browser__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--tb-surface); border-bottom: 1px solid var(--tb-line); direction: ltr; } .tb-browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: #D5DAE3; } .tb-browser__bar span { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; padding: 4px 12px; border-radius: 999px; background: #fff; font-size: .72rem; color: var(--tb-muted); } .tb-browser__bar .tb-icon { width: 12px; height: 12px; color: #22A06B; } .tb-browser__page { display: grid; gap: 14px; padding: 16px; min-height: 290px; } .tb-browser__page > * { opacity: 0; transform: translateY(12px); animation: tb-build 9s var(--tb-ease) infinite; } .tb-browser__nav { display: flex; align-items: center; gap: 10px; } .tb-browser__nav span { height: 7px; width: 34px; border-radius: 4px; background: #E1E6EE; } .tb-browser__nav .tb-browser__logo { width: 54px; height: 16px; border-radius: 5px; background: var(--tb-grad); margin-inline-end: auto; } .tb-browser__nav em { width: 60px; height: 20px; border-radius: 999px; background: var(--tb-black); } .tb-browser__hero { display: grid; gap: 8px; justify-items: center; padding: 22px 12px; border-radius: 12px; background: radial-gradient(80% 90% at 50% 0%, rgba(2, 116, 252, .18), transparent 70%), var(--tb-surface); animation-delay: .5s; } .tb-browser__hero b { display: block; height: 12px; width: 70%; border-radius: 6px; background: var(--tb-heading); } .tb-browser__hero b + b { width: 50%; background: var(--tb-grad); } .tb-browser__hero em { width: 90px; height: 22px; margin-top: 6px; border-radius: 999px; background: var(--tb-grad); } .tb-browser__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; animation-delay: 1s; } .tb-browser__cards span { height: 58px; border-radius: 10px; background: var(--tb-surface); border: 1px solid var(--tb-line); } .tb-browser__row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; animation-delay: 1.5s; } .tb-browser__row span { height: 44px; border-radius: 10px; background: #EEF1F6; } .tb-browser__row span:last-child { background: var(--tb-tint); } @keyframes tb-build { 0% { opacity: 0; transform: translateY(12px); } 8%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } } .tb-browser__phone { position: absolute; bottom: 0; inset-inline-end: -10px; width: 118px; aspect-ratio: 9 / 18.5; padding: 7px; border-radius: 22px; background: #0A0A0A; box-shadow: 0 30px 60px -26px rgba(2, 38, 120, .6); animation: tb-bob 6s ease-in-out infinite; } .tb-browser__phone-screen { display: grid; align-content: start; gap: 7px; height: 100%; padding: 16px 9px; border-radius: 16px; background: #fff; } .tb-browser__phone-screen b { height: 7px; border-radius: 4px; background: var(--tb-heading); } .tb-browser__phone-screen b + b { width: 70%; background: var(--tb-grad); } .tb-browser__phone-screen em { width: 60%; height: 14px; margin: 4px 0 6px; border-radius: 999px; background: var(--tb-grad); } .tb-browser__phone-screen span { height: 40px; border-radius: 8px; background: var(--tb-surface); } .tb-web__chip { position: absolute; } .tb-web__chip--1 { top: 2%; inset-inline-end: -14px; } .tb-web__chip--2 { bottom: 8%; inset-inline-start: -10px; } .tb-browser-wrap.is-in .tb-web__chip { opacity: 1; translate: 0 0; animation: tb-bob 5s ease-in-out infinite; } .tb-browser-wrap.is-in .tb-web__chip--1 { transition-delay: .6s; animation-delay: 1.1s; } .tb-browser-wrap.is-in .tb-web__chip--2 { transition-delay: 1.2s; animation-delay: 1.7s; } /* Site types */ .tb-sitetypes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; } .tb-sitetype { display: grid; gap: 12px; align-content: start; background: var(--tb-white); } .tb-sitetype__goal { justify-self: start; padding: 4px 12px; border-radius: 999px; background: var(--tb-tint); color: var(--tb-blue); font-size: .8rem; font-weight: var(--fw-bold); } .tb-sitetype p { color: var(--tb-muted); } .tb-sitetype__list { display: grid; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--tb-line); } .tb-sitetype__list li { display: flex; align-items: center; gap: 8px; color: var(--tb-heading); font-size: .95rem; } .tb-sitetype__list .tb-icon { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--tb-grad); color: #fff; } .tb-sitetype--featured { border: 2px solid transparent; background: linear-gradient(var(--tb-white), var(--tb-white)) padding-box, var(--tb-grad) border-box; box-shadow: 0 30px 60px -30px rgba(2, 83, 252, .5); } .tb-sitetype--featured .tb-service__icon { background: var(--tb-grad); color: #fff; } /* Feature grid */ .tb-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .tb-feature { display: flex; gap: 12px; align-items: flex-start; padding: 18px; } .tb-feature .tb-service__icon { width: 42px; height: 42px; border-radius: 12px; } .tb-feature .tb-service__icon .tb-icon { width: 20px; height: 20px; } .tb-feature strong { display: block; color: var(--tb-heading); } .tb-feature span { font-size: .88rem; color: var(--tb-muted); } @media (max-width: 1100px) { .tb-features { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 960px) { .tb-sitetypes__grid { grid-template-columns: 1fr; } .tb-features { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .tb-features { grid-template-columns: 1fr; } .tb-browser__phone { width: 92px; inset-inline-end: 0; } .tb-web__chip--1 { inset-inline-end: 0; } .tb-web__chip--2 { inset-inline-start: 0; } } @media (prefers-reduced-motion: reduce) { .tb-browser__page > * { opacity: 1; transform: none; } } /* Automation: workflow diagram ------------------------------------------- */ .tb-flow-wrap { position: relative; width: 100%; max-width: 440px; aspect-ratio: 400 / 420; margin-inline: auto; } .tb-flow-wrap::before { content: ""; position: absolute; inset: 0 -8%; border-radius: 50%; background: radial-gradient(circle, rgba(2, 116, 252, .12), transparent 68%); z-index: -1; } .tb-flow__lines { position: absolute; inset: 0; width: 100%; height: 100%; } .tb-flow__path { fill: none; stroke: rgba(2, 83, 252, .2); stroke-width: 2; stroke-dasharray: 5 6; } .tb-flow__pulse { fill: none; stroke: url(#tbFlowGrad); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 24 400; stroke-dashoffset: 24; animation: tb-pulse-line 3.2s linear infinite; filter: drop-shadow(0 0 4px rgba(2, 205, 253, .8)); } .tb-flow__pulse--1, .tb-flow__pulse--2, .tb-flow__pulse--3 { animation-name: tb-pulse-line-2; } @keyframes tb-pulse-line { 0% { stroke-dashoffset: 24; opacity: 1; } 30% { stroke-dashoffset: -110; opacity: 1; } 31%, 100% { opacity: 0; } } @keyframes tb-pulse-line-2 { 0%, 38% { stroke-dashoffset: 24; opacity: 0; } 40% { opacity: 1; } 75% { stroke-dashoffset: -170; opacity: 1; } 76%, 100% { opacity: 0; } } .tb-flow__node { position: absolute; translate: -50% -50%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--tb-line); box-shadow: 0 16px 34px -18px rgba(2, 38, 120, .4); font-size: .76rem; color: var(--tb-muted); white-space: nowrap; } .tb-flow__node span:last-child { display: grid; } .tb-flow__node strong { color: var(--tb-heading); font-size: .86rem; } .tb-flow__node > .tb-icon { width: 30px; height: 30px; padding: 6px; border-radius: 10px; background: var(--tb-tint); color: var(--tb-blue); } .tb-flow__node--start { left: 50%; top: 11%; } .tb-flow__node--ai { left: 50%; top: 47.6%; padding: 14px 18px; border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--tb-grad) border-box; box-shadow: 0 24px 50px -20px rgba(2, 83, 252, .55); } .tb-flow__brain { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tb-grad); color: #fff; animation: tb-think 3.2s ease-in-out infinite; } .tb-flow__brain .tb-icon { width: 24px; height: 24px; } @keyframes tb-think { 30%, 40% { box-shadow: 0 0 0 8px rgba(2, 205, 253, .25); } 0%, 20%, 60%, 100% { box-shadow: 0 0 0 0 rgba(2, 205, 253, 0); } } .tb-flow__node--out { top: 86%; flex-direction: column; gap: 6px; padding: 10px; text-align: center; } .tb-flow__node--out span:last-child { justify-items: center; } .tb-flow__node--a { left: 17.5%; } .tb-flow__node--b { left: 50%; } .tb-flow__node--c { left: 82.5%; } .tb-flow__node--a > .tb-icon { background: #E7F8EE; color: #25D366; } .tb-flow__node--out { animation: tb-node-hit 3.2s ease-in-out infinite; } @keyframes tb-node-hit { 0%, 72% { transform: none; border-color: var(--tb-line); } 78% { transform: scale(1.06); border-color: rgba(2, 116, 252, .5); } 90%, 100% { transform: none; border-color: var(--tb-line); } } /* Automation: bot chat demo ---------------------------------------------- */ .tb-approach__steps { margin-top: 8px; } .tb-chat { width: 100%; max-width: 400px; margin-inline: auto; border-radius: 22px; overflow: hidden; background: #ECE5DD; box-shadow: 0 40px 80px -34px rgba(2, 38, 120, .5); } .tb-chat__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #075E54; color: #fff; } .tb-chat__head strong { display: block; font-size: .9rem; } .tb-chat__head small { opacity: .8; font-size: .72rem; } .tb-chat__avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tb-grad); } .tb-chat__avatar .tb-icon { width: 20px; height: 20px; } .tb-chat__body { display: grid; gap: 8px; padding: 16px 14px 20px; min-height: 340px; align-content: start; } .tb-chat__msg { max-width: 82%; padding: 8px 12px; border-radius: 12px; font-size: .86rem; line-height: 1.45; color: #111; box-shadow: 0 1px 1px rgba(0,0,0,.08); opacity: 0; translate: 0 8px; transition: opacity .4s, translate .4s var(--tb-ease); } .tb-chat__msg--in { justify-self: start; background: #fff; border-start-start-radius: 2px; } .tb-chat__msg--out { justify-self: end; background: #DCF8C6; border-start-end-radius: 2px; } .tb-chat__msg--ok { display: flex; align-items: center; gap: 6px; font-weight: var(--fw-bold); } .tb-chat__msg--ok .tb-icon { width: 18px; height: 18px; color: #128C7E; } .tb-chat.is-in .tb-chat__msg { opacity: 1; translate: 0 0; } .tb-chat.is-in .tb-chat__msg:nth-child(1) { transition-delay: .3s; } .tb-chat.is-in .tb-chat__msg:nth-child(2) { transition-delay: 1.1s; } .tb-chat.is-in .tb-chat__msg:nth-child(3) { transition-delay: 1.9s; } .tb-chat.is-in .tb-chat__msg:nth-child(4) { transition-delay: 2.7s; } .tb-chat.is-in .tb-chat__msg:nth-child(5) { transition-delay: 3.5s; } .tb-chat.is-in .tb-chat__msg:nth-child(6) { transition-delay: 4.3s; } @media (max-width: 960px) { .tb-approach .tb-chat { margin-top: 24px; } } @media (max-width: 640px) { .tb-flow__node { font-size: .66rem; padding: 8px 10px; } .tb-flow__node strong { font-size: .74rem; } .tb-flow__node > .tb-icon { width: 24px; height: 24px; padding: 4px; } .tb-flow__node--ai { padding: 10px 12px; } .tb-flow__brain { width: 32px; height: 32px; } } @media (prefers-reduced-motion: reduce) { .tb-chat__msg { opacity: 1; translate: 0 0; } } /* ========================================================================== Mobile overlap guard: floating tags never sit on text ========================================================================== */ @media (max-width: 640px) { /* Orbit: inner-ring names hidden (the logos speak for themselves), smaller core */ .tb-orbit__ring--inner .tb-orbit__label { display: none; } .tb-orbit__core { inset: 41%; } .tb-orbit__core-label { display: none; } /* Press article: tags move under the article */ .tb-article-wrap { padding-bottom: 78px; } .tb-article__chip--1, .tb-article__chip--2 { top: auto; bottom: 10px; } .tb-article__chip--1 { inset-inline-end: auto; inset-inline-start: 0; } .tb-article__chip--2 { inset-inline-start: auto; inset-inline-end: 0; } .tb-article-wrap.is-in .tb-article__chip { animation: none; } /* Social phone: tags move under the phone */ .tb-phone-wrap { min-height: 0; padding-bottom: 128px; } .tb-phone__chip { animation: none !important; } .tb-phone__chip--1 { top: auto; bottom: 66px; inset-inline-end: auto; inset-inline-start: 0; } .tb-phone__chip--2 { top: auto; bottom: 66px; inset-inline-start: auto; inset-inline-end: 0; } .tb-phone__chip--3 { top: auto; bottom: 4px; inset-inline: 0; margin-inline: auto; width: max-content; } .tb-phone__float--fb { inset-inline-end: 0; } /* Website browser: tags and phone move under the browser */ .tb-browser-wrap { padding-bottom: 76px; } .tb-browser__phone { bottom: 64px; } .tb-web__chip--1, .tb-web__chip--2 { top: auto; bottom: 6px; } .tb-web__chip--1 { inset-inline-end: auto; inset-inline-start: 0; } .tb-web__chip--2 { inset-inline-start: auto; inset-inline-end: 0; } .tb-browser-wrap.is-in .tb-web__chip { animation: none; } /* Viewfinder: figure stays clear of the bottom HUD */ .tb-viewfinder__subject { bottom: 30%; height: 28%; } .tb-viewfinder__hud--bottom { bottom: 26px; } /* Scope & shoot tags: keep inside the frame edges */ .tb-scope__chip--1, .tb-shoot__chip--1 { inset-inline-end: 0; } .tb-scope__chip--2, .tb-shoot__chip--2 { inset-inline-start: 0; } } .tb-service .tb-tags { padding-inline-end: 52px; } @media (max-width: 640px) { .tb-article-wrap { padding-top: 50px; } .tb-article__badge { top: 0; } .tb-reel__play { top: 40%; width: 46px; height: 46px; box-shadow: 0 0 0 6px rgba(255,255,255,.12); } .tb-reel__title { inset-inline: 12px; bottom: 12px; font-size: .85rem; line-height: 1.3; } .tb-reel__title small { font-size: .74rem; } } @media (max-width: 640px) { /* Leave room so the floating WhatsApp button never covers the last footer line */ .tb-footer__bottom { padding-bottom: 92px; } } /* ========================================================================== Service illustrations: brought into the poster world (the mockups keep their own device shapes; halos and glows are gone, and every weight maps to a real Birzia cut) ========================================================================== */ .tb-kpis { --tb-accent: var(--tb-cyan); --tb-rule: #fff; --tb-line-strong: rgba(255,255,255,.34); } .tb-kpis__glow, .tb-phone-wrap::before, .tb-article-wrap::before, .tb-canvas-wrap::before, .tb-scope__sweep { display: none; } .tb-kpi__bar { filter: none; stroke: var(--tb-cyan); stroke-linecap: butt; } .tb-scope__field { background: var(--tb-surface); } .tb-goal-card, .tb-funnel__step, .tb-compare__col, .tb-sitetype, .tb-feature, .tb-deliverable, .tb-channel__bubble { border-radius: 0; } .tb-goal-card__step, .tb-funnel__num { color: var(--tb-blue); opacity: .18; } .tb-film__num { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--tb-cyan); } .tb-compare__col--win, .tb-funnel__step--hot { background: var(--tb-white); border: 2px solid var(--tb-blue); box-shadow: none; } .tb-compare__col--win li::before { background-color: var(--tb-blue); } .tb-compare__vs { border-radius: 0; } .tb-pos-steps li > span { border-radius: 0; } .tb-hero__lead--strong .tb-grad { color: #fff; } /* Service illustrations, second pass: flat media, square chips, ruled goal cells */ .tb-contact__form, .tb-audit__form { box-shadow: none; } .tb-phone__post--0 .tb-phone__media, .tb-phone__post--3 .tb-phone__media { background: var(--tb-blue); } .tb-phone__post--1 .tb-phone__media, .tb-phone__post--4 .tb-phone__media { background: var(--tb-black); } .tb-phone__post--2 .tb-phone__media { background: var(--tb-cyan); } .tb-phone__chip, .tb-scope__chip, .tb-article__chip, .tb-web__chip, .tb-shoot__chip, .tb-phone__float { border-radius: 0; border: 1.5px solid var(--tb-black); box-shadow: none; } .tb-phone__chip .tb-icon, .tb-scope__chip .tb-icon { border-radius: 0; } .tb-goals__grid { gap: 0; border-top: 1.5px solid var(--tb-black); border-inline-start: 1.5px solid var(--tb-line); } .tb-goals__grid > .tb-goal-card { border-width: 0 0 1.5px; border-inline-end: 1.5px solid var(--tb-line); } .tb-goal-card:hover { background: var(--tb-blue); color: #fff; --tb-heading: #fff; --tb-muted: rgba(255,255,255,.82); --tb-line: rgba(255,255,255,.3); } .tb-goal-card:hover .tb-goal-card__tools { color: #fff; } .tb-goal-card__step { display: none; } @media (max-width: 960px) { .tb-contact__doodle { width: 88px; } } /* ========================================================================== Midnight studio, site-wide Every page lives in the home page's world: dark rooms, blue rooms, grain, one light from the upper left. Rules here override the older poster rules above; the front page refines them in home.css. ========================================================================== */ /* Ground, grain, selection --------------------------------------------------- */ body { background: var(--n0); color: var(--tb-text); } body::after { content: ""; position: fixed; inset: 0; z-index: 45; pointer-events: none; background: var(--grain); background-size: 180px; opacity: .055; } ::selection { background: var(--tb-blue); color: #fff; } :focus-visible { outline-color: var(--tb-cyan); } /* Paper survives only inside real UI surfaces. */ .tb-paper, .tb-contact__form, .tb-audit__form, .tb-article, .tb-browser, .tb-canvas, .tb-posmap, .tb-brandbook, .tb-phone__feed, .tb-phone__head, .tb-channel__bubble, .tb-compare__col--muted { --tb-bg: var(--tb-white); --tb-surface: #F1F2F5; --tb-surface-2: #E6E8EE; --tb-heading: var(--tb-black); --tb-text: #22252D; --tb-muted: #555A66; --tb-line: rgba(10, 10, 10, .14); --tb-line-strong: rgba(10, 10, 10, .3); --tb-rule: var(--tb-black); --tb-accent: var(--tb-blue); --tb-fill: rgba(10, 10, 10, .05); --tb-fill-strong: rgba(10, 10, 10, .1); --tb-tint: rgba(2, 83, 252, .08); } /* Type: Light carries the sentence, Black carries the point. ----------------- */ .tb-h2 { font-size: clamp(2.3rem, 1.1rem + 3.4vw, 4.6rem); font-weight: var(--fw-light); letter-spacing: -.035em; line-height: 1.02; color: var(--tb-heading); } .tb-h2 .tb-grad, .tb-h1 .tb-grad, .tb-footer__big .tb-grad { font-weight: var(--fw-black); color: var(--tb-heading); letter-spacing: -.03em; } .tb-h1--inner { font-weight: var(--fw-light); letter-spacing: -.04em; line-height: .98; } .tb-h1--inner:not(:has(.tb-grad)) { font-weight: var(--fw-black); letter-spacing: -.03em; } .tb-label { font-size: .9rem; color: var(--tb-muted); letter-spacing: .02em; } .tb-label::before { width: 28px; height: 2px; background: var(--tb-accent); } .tb-label__tag { font-weight: var(--fw-black); color: var(--tb-cyan); direction: ltr; unicode-bidi: isolate; } .tb-head { gap: 26px; } /* Buttons: paper on the night, ink inside paper -------------------------------- */ .tb-btn { --btn-bg: #fff; --btn-fg: var(--tb-black); --btn-bd: #fff; --btn-bg-h: var(--tb-blue); --btn-fg-h: #fff; --btn-bd-h: var(--tb-blue); min-height: 60px; } .tb-btn--sm { min-height: 46px; } .tb-btn--outline, .tb-btn--ghost { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .34); --btn-bg-h: #fff; --btn-fg-h: var(--tb-black); --btn-bd-h: #fff; } .tb-paper .tb-btn--primary, .tb-contact__form .tb-btn--primary, .tb-audit__form .tb-btn--primary, .tb-field--blue .tb-contact__form .tb-btn--primary, .tb-audit .tb-audit__form .tb-btn--primary { --btn-bg: var(--tb-black); --btn-fg: #fff; --btn-bd: var(--tb-black); --btn-bg-h: var(--tb-blue); --btn-fg-h: #fff; --btn-bd-h: var(--tb-blue); } .tb-icon-btn { border: 1px solid rgba(255, 255, 255, .34); color: #fff; } .tb-icon-btn:hover { background: #fff; color: var(--tb-black); } .tb-tag { border: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .84); padding: 8px 12px; } .tb-link { border-bottom-width: 2px; } /* Header: transparent over the hero, smoked glass once scrolled --------------- */ .tb-header { background: transparent; border-bottom: 1px solid transparent; transition: background-color .4s, border-color .4s; } .tb-header.is-scrolled { background: rgba(6, 7, 10, .8); border-color: rgba(255, 255, 255, .09); -webkit-backdrop-filter: saturate(140%) blur(16px); backdrop-filter: saturate(140%) blur(16px); } .tb-nav__list > li > a { color: rgba(255, 255, 255, .84); } .tb-nav__list > li > a:hover, .tb-nav__list > li > a.is-current { color: #fff; } .tb-nav__list > li > a::after { height: 2px; background: var(--tb-cyan); } .tb-mega { background: var(--n2); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .9); } .tb-mega__col + .tb-mega__col { border-color: rgba(255, 255, 255, .08); } .tb-mega__title { color: var(--tb-cyan); } .tb-mega__link { color: rgba(255, 255, 255, .88); } .tb-mega__link .tb-icon { color: var(--tb-cyan); } .tb-mega__link:hover { background: var(--tb-blue); color: #fff; } .tb-mega__link:hover .tb-icon { color: #fff; } body:not(.home) .tb-main { padding-top: 0; } /* Materials ------------------------------------------------------------------- A blue room: brand blue lit from the upper left, fine rules, grain. A lit panel: a dark screen with a wedge of blue light and a faint grid. A slab: a dark plate with a lit top edge. */ .tb-field--blue, .tb-room--blue, .tb-hero--inner, .tb-page-hero, .tb-404, .tb-audit { --tb-bg: var(--tb-blue); --tb-surface: rgba(0, 18, 80, .28); --tb-heading: #FFFFFF; --tb-text: rgba(255, 255, 255, .9); --tb-muted: rgba(255, 255, 255, .8); --tb-line: rgba(255, 255, 255, .24); --tb-line-strong: rgba(255, 255, 255, .5); --tb-rule: rgba(255, 255, 255, .85); --tb-accent: #fff; --tb-fill: rgba(255, 255, 255, .1); --tb-fill-strong: rgba(255, 255, 255, .18); position: relative; isolation: isolate; overflow: hidden; background: var(--tb-lit-blue); color: var(--tb-text); } .tb-field--blue::before, .tb-room--blue::before, .tb-hero--inner::before, .tb-page-hero::before, .tb-404::before, .tb-audit::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--grain), repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 64px), linear-gradient(118deg, rgba(255, 255, 255, var(--fan, .12)) 0%, transparent 36%); background-size: 180px, auto, auto; mix-blend-mode: soft-light; } .tb-field--blue .tb-label::before, .tb-room--blue .tb-label::before { background: #fff; } .tb-field--blue .tb-label, .tb-room--blue .tb-label { color: rgba(255, 255, 255, .86); } .tb-field--blue .tb-tag, .tb-room--blue .tb-tag, .tb-hero--inner .tb-tag { border-color: rgba(255, 255, 255, .45); color: #fff; } .tb-field--blue .tb-btn--primary, .tb-room--blue .tb-btn--primary, .tb-hero--inner .tb-btn--primary, .tb-audit .tb-btn--primary { --btn-bg: #fff; --btn-fg: var(--tb-black); --btn-bd: #fff; --btn-bg-h: var(--tb-black); --btn-fg-h: #fff; --btn-bd-h: var(--tb-black); } .tb-field--blue .tb-btn--outline, .tb-field--blue .tb-btn--ghost, .tb-room--blue .tb-btn--ghost, .tb-hero--inner .tb-btn--ghost { --btn-bd: rgba(255, 255, 255, .6); --btn-fg-h: var(--tb-blue); } .tb-field--blue :focus-visible, .tb-room--blue :focus-visible, .tb-hero--inner :focus-visible { outline-color: #fff; } .tb-room--blue .tb-checks .tb-icon, .tb-hero--inner .tb-checks .tb-icon, .tb-audit .tb-checks .tb-icon { color: #fff; } .tb-room--blue .tb-checks li { color: #fff; } .tb-room--dark { position: relative; background: var(--n1); border-top: 1px solid rgba(255, 255, 255, .06); } .tb-services:not(.tb-room--blue):not(.tb-field--blue) { background: var(--n1); border-top: 1px solid rgba(255, 255, 255, .06); } /* The lit panel that holds every illustration. */ .tb-lit { position: relative; isolation: isolate; display: grid; place-items: center; min-width: 0; padding: clamp(36px, 4.4vw, 72px) clamp(20px, 3.4vw, 56px); background: var(--tb-lit-dark); border: 1px solid rgba(255, 255, 255, .09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 60px 120px -50px rgba(0, 0, 0, 1); } .tb-lit::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(122deg, rgba(2, 83, 252, .5) 0%, rgba(2, 83, 252, .12) 28%, transparent 52%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 12.5%), repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 10%); -webkit-mask-image: linear-gradient(200deg, #000 20%, rgba(0, 0, 0, .35) 80%); mask-image: linear-gradient(200deg, #000 20%, rgba(0, 0, 0, .35) 80%); } .tb-lit::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--grain); background-size: 180px; opacity: .12; mix-blend-mode: overlay; } .tb-room--blue .tb-lit, .tb-field--blue .tb-lit { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 70px 120px -50px rgba(0, 12, 60, .95), 0 20px 40px -20px rgba(0, 12, 60, .5); } .tb-lit > * { width: 100%; } /* Inner heroes: the blue room, with a smoked slab carrying the doodle --------- */ .tb-hero--inner, .tb-page-hero, .tb-404, .tb-audit { padding-top: calc(var(--tb-header) + clamp(56px, 6vw, 104px)); padding-bottom: clamp(72px, 8vw, 128px); } .tb-hero--inner::after, .tb-page-hero::after, .tb-404::after, .tb-audit::after { /* The floor: a receding plane of rules catching the light. */ content: ""; position: absolute; z-index: -1; pointer-events: none; left: -20%; right: -20%; bottom: 0; width: auto; height: 42%; aspect-ratio: auto; inset-inline-end: auto; background: linear-gradient(to top, rgba(1, 40, 140, .55) 0%, rgba(2, 83, 252, 0) 100%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .14) 0 1px, transparent 1px 88px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .1) 0 1px, transparent 1px 88px); transform: perspective(700px) rotateX(64deg); transform-origin: bottom center; -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 90%); mask-image: linear-gradient(to top, #000 0%, transparent 90%); } .tb-hero--inner .tb-hero__inner, .tb-404 .tb-hero__inner { --plate: clamp(300px, 31vw, 450px); padding-inline-end: calc(var(--plate) + clamp(32px, 4vw, 72px)); min-height: calc(var(--plate) * 1.02); align-content: center; gap: 26px; } .tb-hero--inner .tb-hero__inner:not(:has(.tb-plate)) { padding-inline-end: var(--tb-gutter); min-height: 0; } .tb-hero--inner .tb-hero__lead { color: rgba(255, 255, 255, .86); max-width: 50ch; } .tb-hero__lead--strong { font-weight: var(--fw-bold); } .tb-hero--inner .tb-h1--inner { font-size: clamp(2.8rem, 1rem + 4.6vw, 6rem); max-width: 14ch; color: rgba(255, 255, 255, .9); } .tb-hero--inner .tb-h1--post { font-size: clamp(2.2rem, 1.1rem + 2.8vw, 4rem); max-width: 20ch; } .tb-hero--inner .tb-hero__actions .tb-btn { min-height: 64px; padding-inline: 34px; font-size: 1.1rem; } .tb-hero--inner .tb-label { color: rgba(255, 255, 255, .86); } .tb-crumbs { color: rgba(255, 255, 255, .72); } .tb-post-meta { color: rgba(255, 255, 255, .8); } /* Count-up figures: the final value sits invisibly under the running number, so the width is fixed from the start. */ /* (the stat rows style every span inside them as a caption; these two must inherit the figure's type instead) */ .tb-count { display: inline-grid; justify-items: start; } strong.tb-count > span:is(.tb-count__val, .tb-count__sizer) { grid-area: 1 / 1; display: block; max-width: none; margin: 0; padding: 0; border: 0; font: inherit; letter-spacing: inherit; color: inherit; text-shadow: inherit; white-space: nowrap; } strong.tb-count > span.tb-count__sizer { visibility: hidden; } /* Stats in a hero: huge Light figures on a hairline, like the front page. */ .tb-hero--inner .tb-hero__stats { display: flex; flex-wrap: wrap; gap: 20px clamp(40px, 5vw, 90px); width: 100%; margin-top: 18px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .3); grid-template-columns: none; } .tb-hero--inner .tb-hero__stats li { display: flex; align-items: baseline; gap: 16px; padding: 0; border: 0; } .tb-hero--inner .tb-hero__stats strong { font-size: clamp(2.2rem, 1.2rem + 2.4vw, 3.8rem); font-weight: var(--fw-light); letter-spacing: -.03em; } .tb-hero--inner .tb-hero__stats span { font-size: .98rem; color: rgba(255, 255, 255, .78); max-width: 12ch; line-height: 1.3; font-weight: var(--fw-medium); } /* The plate */ .tb-plate { position: absolute; top: 50%; inset-inline-end: 0; width: var(--plate, 380px); translate: 0 -50%; } .tb-plate__face { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1.02; overflow: hidden; background: var(--tb-lit-dark); transform: perspective(1400px) rotateY(-16deg) rotateX(4deg); transform-origin: 40% 50%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset -1px 0 0 rgba(255, 255, 255, .1), 0 70px 110px -40px rgba(0, 10, 50, .95), 0 22px 40px -18px rgba(0, 10, 50, .6); } .tb-plate__face::before { content: ""; position: absolute; inset: 0; background: linear-gradient(122deg, rgba(58, 124, 255, .55) 0%, rgba(2, 83, 252, .14) 30%, transparent 55%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 12.5%); } .tb-plate__face::after { content: ""; position: absolute; inset: 0; background: var(--grain); background-size: 180px; opacity: .16; mix-blend-mode: overlay; } .tb-plate__doodle { position: relative; z-index: 1; width: 64%; margin-top: -8%; } .tb-plate__loop { position: absolute; z-index: 1; left: 10%; right: 10%; bottom: 7%; width: 80%; overflow: visible; } .tb-plate__loop path { fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: .14; stroke-linecap: round; } /* A small interface fragment pinned over the slab's lower corner. */ .tb-plate__chip { position: absolute; inset-inline-start: -14%; bottom: 14%; z-index: 2; display: flex; align-items: center; gap: 14px; width: 58%; padding: 14px 16px; background: rgba(15, 18, 23, .92); border: 1px solid rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 30px 60px -20px rgba(0, 10, 50, .95); rotate: -3deg; animation: tb-bob 6s ease-in-out 1.6s infinite; } .tb-plate__chip > i { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--tb-blue); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); } .tb-plate__greek { display: grid; gap: 8px; flex: 1; } .tb-plate__greek b { display: block; width: var(--w); height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .22); } .tb-plate__greek b:first-child { background: rgba(255, 255, 255, .55); } /* Rooms after the hero ---------------------------------------------------------- */ .tb-section .tb-about__grid { gap: clamp(40px, 6vw, 110px); } .tb-checks { border-top: 1px solid var(--tb-rule); } .tb-checks li { color: var(--tb-heading); border-color: var(--tb-line); padding-block: 18px; } .tb-checks .tb-icon { color: var(--tb-accent); } .tb-lead { color: var(--tb-text); } .tb-head .tb-lead { color: var(--tb-muted); } /* Index rows (services page, related services): Light names that turn Black. */ .tb-index { border-top: 1px solid var(--tb-rule); } .tb-index__row { border-bottom: 1px solid var(--tb-line); grid-template-columns: 3.4rem minmax(0, 1.05fr) minmax(0, 1.2fr) clamp(76px, 7vw, 104px) 52px; } .tb-index__num { font-size: .92rem; font-weight: var(--fw-medium); opacity: 1; color: var(--tb-muted); font-variant-numeric: tabular-nums; } .tb-index__title { font-size: clamp(1.7rem, 1rem + 1.9vw, 3rem); font-weight: var(--fw-light); letter-spacing: -.03em; color: var(--tb-heading); transition: color .35s, font-weight 0s; } .tb-index__text { color: var(--tb-muted); } .tb-index__go { border: 1px solid var(--tb-line-strong); color: var(--tb-heading); } .tb-index__row:hover .tb-index__title { color: var(--tb-heading); font-weight: var(--fw-black); } .tb-index__row:hover .tb-index__num { color: var(--tb-accent); } .tb-index__row:hover .tb-index__go { background: #fff; border-color: #fff; color: var(--tb-black); } .tb-room--blue .tb-index__row:hover .tb-index__go { color: var(--tb-blue); } .tb-index__doodle { width: 100%; } .tb-index--compact .tb-index__title { font-size: clamp(1.5rem, 1rem + 1.3vw, 2.4rem); } .tb-group__head { align-items: flex-end; gap: clamp(20px, 3vw, 48px); max-width: none; } .tb-group__num { font-size: clamp(5rem, 3rem + 6vw, 10rem); font-weight: var(--fw-light); line-height: .8; letter-spacing: -.06em; color: rgba(255, 255, 255, .16); direction: ltr; } .tb-room--blue .tb-group__num { color: rgba(255, 255, 255, .32); } .tb-group__head .tb-lead { color: var(--tb-muted); } /* Slab grids: one lit slab, the rest dark, and never all the same size ------------ */ .tb-goals__grid, .tb-pillars__grid, .tb-values { display: grid; gap: 16px; border: 0; grid-auto-flow: dense; grid-template-columns: repeat(3, minmax(0, 1fr)); } .tb-goals__grid > .tb-card, .tb-pillars__grid > .tb-card, .tb-values > .tb-card, .tb-values .tb-why__item { position: relative; display: grid; align-content: end; gap: 12px; overflow: hidden; padding: clamp(26px, 2.6vw, 40px); min-height: 250px; background: var(--tb-slab); border: 1px solid rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); --tb-heading: #fff; --tb-muted: rgba(255, 255, 255, .64); --tb-line: rgba(255, 255, 255, .12); color: var(--tb-muted); transition: border-color .35s; } .tb-goals__grid > .tb-card:hover, .tb-pillars__grid > .tb-card:hover, .tb-values > .tb-card:hover { background: var(--tb-slab); border-color: rgba(255, 255, 255, .24); --tb-heading: #fff; --tb-muted: rgba(255, 255, 255, .64); } .tb-goal-card .tb-h3, .tb-values .tb-h3 { font-size: clamp(1.4rem, 1.1rem + .9vw, 2rem); font-weight: var(--fw-black); letter-spacing: -.02em; } .tb-goal-card p, .tb-values p { max-width: 40ch; } .tb-goal-card__tools { color: var(--tb-cyan); border-color: var(--tb-line); } .tb-goal-card:hover .tb-goal-card__tools { color: var(--tb-cyan); } .tb-goal-card__step { display: block; position: absolute; top: clamp(18px, 2vw, 28px); inset-inline-end: clamp(22px, 2.4vw, 36px); direction: ltr; font-size: clamp(3.2rem, 2rem + 3vw, 5.4rem); font-weight: var(--fw-light); line-height: .9; letter-spacing: -.06em; color: rgba(255, 255, 255, .12); opacity: 1; } .tb-goals__grid .tb-service__icon, .tb-pillars__grid .tb-service__icon, .tb-values .tb-service__icon { order: 0; width: 48px; height: 48px; margin-bottom: auto; border: 1px solid rgba(255, 255, 255, .22); color: var(--tb-cyan); background: none; } .tb-goal-card:hover .tb-service__icon { background: none; color: var(--tb-cyan); } /* The first slab is lit: brand blue, grain, light on its face, and larger. */ .tb-goals__grid > .tb-card:first-child, .tb-pillars__grid > .tb-card:first-child, .tb-values > .tb-card:first-child { background: var(--tb-lit-blue); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 60px 120px -60px rgba(2, 83, 252, .5); --tb-muted: rgba(255, 255, 255, .86); color: rgba(255, 255, 255, .86); } .tb-goals__grid > .tb-card:first-child::before, .tb-pillars__grid > .tb-card:first-child::before, .tb-values > .tb-card:first-child::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--grain), linear-gradient(118deg, rgba(255, 255, 255, .22) 0%, transparent 36%); background-size: 180px, auto; mix-blend-mode: soft-light; } .tb-goals__grid > .tb-card:first-child .tb-service__icon, .tb-pillars__grid > .tb-card:first-child .tb-service__icon, .tb-values > .tb-card:first-child .tb-service__icon { width: 72px; height: 72px; color: #fff; border-color: rgba(255, 255, 255, .5); } .tb-goals__grid > .tb-card:first-child .tb-service__icon .tb-icon, .tb-pillars__grid > .tb-card:first-child .tb-service__icon .tb-icon, .tb-values > .tb-card:first-child .tb-service__icon .tb-icon { width: 34px; height: 34px; } .tb-goals__grid > .tb-card:first-child .tb-h3, .tb-pillars__grid > .tb-card:first-child .tb-h3, .tb-values > .tb-card:first-child .tb-h3 { font-size: clamp(2rem, 1.2rem + 2.2vw, 3.4rem); line-height: 1; } .tb-goals__grid > .tb-card:first-child .tb-goal-card__step, .tb-pillars__grid > .tb-card:first-child .tb-goal-card__step { color: rgba(255, 255, 255, .3); font-size: clamp(5rem, 3rem + 5vw, 9rem); } .tb-goals__grid > .tb-card:first-child .tb-goal-card__tools { color: #fff; border-color: rgba(255, 255, 255, .3); } /* Quantity layouts: 6 = a 2x2 lead; 5 = a tall lead; 4 = a tall lead beside a stack; 3 = lead + two. */ .tb-goals__grid > :first-child:nth-last-child(6), .tb-pillars__grid > :first-child:nth-last-child(6) { grid-column: span 2; grid-row: span 2; } .tb-goals__grid > :first-child:nth-last-child(5), .tb-pillars__grid > :first-child:nth-last-child(5) { grid-row: span 2; } .tb-goals__grid:has(> :first-child:nth-last-child(4)), .tb-values:has(> :first-child:nth-last-child(4)) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); } .tb-goals__grid > :first-child:nth-last-child(4), .tb-values > :first-child:nth-last-child(4) { grid-row: span 2; } .tb-goals__grid > :first-child:nth-last-child(4) ~ :last-child, .tb-values > :first-child:nth-last-child(4) ~ :last-child { grid-column: span 2; min-height: 200px; } .tb-goals__grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Inside a blue room the slabs invert: the lead goes dark, the rest are blue glass. */ .tb-room--blue .tb-goals__grid > .tb-card, .tb-room--blue .tb-pillars__grid > .tb-card { background: rgba(0, 20, 90, .26); border-color: rgba(255, 255, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); --tb-muted: rgba(255, 255, 255, .84); color: rgba(255, 255, 255, .84); } .tb-room--blue .tb-goals__grid > .tb-card:hover, .tb-room--blue .tb-pillars__grid > .tb-card:hover { background: rgba(0, 20, 90, .38); border-color: rgba(255, 255, 255, .4); --tb-muted: rgba(255, 255, 255, .84); } .tb-room--blue .tb-goals__grid > .tb-card:first-child, .tb-room--blue .tb-pillars__grid > .tb-card:first-child { background: var(--tb-lit-dark); border-color: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 70px 120px -50px rgba(0, 12, 60, .95), 0 20px 40px -20px rgba(0, 12, 60, .5); --tb-muted: rgba(255, 255, 255, .7); color: rgba(255, 255, 255, .7); } .tb-room--blue .tb-goals__grid > .tb-card:first-child::before, .tb-room--blue .tb-pillars__grid > .tb-card:first-child::before { background: linear-gradient(122deg, rgba(2, 83, 252, .55) 0%, rgba(2, 83, 252, .1) 30%, transparent 55%); mix-blend-mode: normal; } .tb-room--blue .tb-goals__grid .tb-service__icon, .tb-room--blue .tb-pillars__grid .tb-service__icon { color: #fff; border-color: rgba(255, 255, 255, .4); } .tb-room--blue .tb-goals__grid > .tb-card:first-child .tb-service__icon, .tb-room--blue .tb-pillars__grid > .tb-card:first-child .tb-service__icon { color: var(--tb-cyan); border-color: rgba(255, 255, 255, .3); } .tb-room--blue .tb-goal-card__tools { color: #fff; } .tb-room--blue .tb-goals__grid > .tb-card:first-child .tb-goal-card__tools { color: var(--tb-cyan); } .tb-room--blue .tb-goal-card__step { color: rgba(255, 255, 255, .22); } /* Service page illustrations on the night: chips become floating glass ------------ */ .tb-scope__chip, .tb-phone__chip, .tb-article__chip, .tb-web__chip, .tb-shoot__chip, .tb-flow__node { background: rgba(24, 28, 35, .94); border: 1px solid rgba(255, 255, 255, .14); border-radius: 0; color: rgba(255, 255, 255, .66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 30px 60px -20px rgba(0, 0, 0, .95); --tb-heading: #fff; --tb-muted: rgba(255, 255, 255, .66); } .tb-scope__chip .tb-icon, .tb-phone__chip .tb-icon, .tb-flow__node > .tb-icon { background: rgba(2, 83, 252, .22); color: var(--tb-cyan); border-radius: 0; } .tb-scope__chip--3 .tb-icon, .tb-phone__chip .tb-icon { background: var(--tb-blue); color: #fff; } .tb-phone__heart { border-radius: 0; background: rgba(229, 36, 91, .18); } .tb-phone__float { border-radius: 0; background: var(--n3); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .95); } .tb-phone__float--tt { color: #fff; } .tb-phone { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 60px 110px -40px rgba(0, 0, 0, 1); } .tb-phone-wrap { min-height: 580px; } .tb-scope { max-width: 460px; background: none; } .tb-scope__field { background: none; } .tb-scope__ring { stroke: rgba(255, 255, 255, .16); } .tb-scope__axis { stroke: rgba(255, 255, 255, .12); } .tb-scope__dot { fill: rgba(255, 255, 255, .34); } .tb-scope__reticle { border-color: var(--tb-cyan); box-shadow: 0 0 0 6px rgba(2, 205, 253, .1); } .tb-scope__reticle::before, .tb-scope__reticle::after { background: var(--tb-cyan); } .tb-scope__target { fill: var(--tb-cyan); } .tb-article, .tb-browser, .tb-canvas, .tb-posmap, .tb-brandbook, .tb-chat, .tb-viewfinder { box-shadow: 0 60px 110px -40px rgba(0, 0, 0, 1), 0 18px 36px -18px rgba(0, 0, 0, .7); } .tb-article__badge { border-radius: 0; background: var(--n3); border: 1px solid rgba(255, 255, 255, .14); } .tb-flow__path { stroke: rgba(255, 255, 255, .2); } .tb-flow__pulse { stroke: var(--tb-cyan); filter: none; } .tb-flow__node--ai { border: 1px solid var(--tb-blue); background: linear-gradient(160deg, #13204A, #0B1330); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 30px 60px -20px rgba(2, 83, 252, .6); } .tb-flow__brain { border-radius: 0; background: var(--tb-blue); } .tb-flow__node--a > .tb-icon { background: rgba(37, 211, 102, .16); } @keyframes tb-node-hit { 0%, 72% { transform: none; border-color: rgba(255, 255, 255, .14); } 78% { transform: scale(1.06); border-color: var(--tb-cyan); } 90%, 100% { transform: none; border-color: rgba(255, 255, 255, .14); } } .tb-lit--orbit { padding-block: clamp(56px, 6vw, 96px); } .tb-orbit::before { background: linear-gradient(150deg, #18203A 0%, #0D1120 45%, #07090E 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 60px 120px -50px rgba(0, 0, 0, .9); } .tb-orbit__ring { border: 1px solid rgba(255, 255, 255, .22); } .tb-orbit__ring--outer { border-color: rgba(255, 255, 255, .1); } .tb-orbit__chip { background: #12151C; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .9); } .tb-orbit__label { color: rgba(255, 255, 255, .62); } .tb-orbit__core { background: linear-gradient(150deg, #4B87FF, #0253FC 45%, #0136B8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 30px 60px -20px rgba(2, 83, 252, .55); } .tb-pos-steps li > span { background: var(--tb-blue); } .tb-canvas__bar { background: #1B1C1F; } /* Compare, funnel, film, site types, channels, features on their rooms ------------- */ .tb-compare__col { position: relative; } .tb-compare__col--muted { background: rgba(0, 20, 90, .26); border: 1px solid rgba(255, 255, 255, .18); opacity: 1; --tb-heading: #fff; --tb-muted: rgba(255, 255, 255, .78); color: rgba(255, 255, 255, .78); } .tb-compare__col--muted .tb-service__icon { background: none; color: #fff; border-color: rgba(255, 255, 255, .4); } .tb-compare__col--muted li::before { background-color: rgba(255, 255, 255, .5); } .tb-compare__col--win, .tb-funnel__step--hot, .tb-sitetype--featured { background: var(--tb-lit-dark); border: 1px solid rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 70px 120px -50px rgba(0, 12, 60, .95), 0 20px 40px -20px rgba(0, 12, 60, .5); --tb-heading: #fff; --tb-muted: rgba(255, 255, 255, .7); color: rgba(255, 255, 255, .7); } .tb-compare__col--win li::before { background-color: var(--tb-cyan); } .tb-compare__col--win .tb-service__icon, .tb-funnel__step--hot .tb-service__icon, .tb-sitetype--featured .tb-service__icon { background: var(--tb-blue); border-color: var(--tb-blue); color: #fff; } .tb-compare__vs { background: #fff; color: var(--tb-blue); } .tb-funnel__step, .tb-sitetype { background: rgba(0, 20, 90, .26); border: 1px solid rgba(255, 255, 255, .18); --tb-heading: #fff; --tb-muted: rgba(255, 255, 255, .8); } .tb-funnel__step .tb-service__icon, .tb-sitetype .tb-service__icon { color: #fff; border-color: rgba(255, 255, 255, .4); } .tb-funnel__num { color: #fff; opacity: .22; font-weight: var(--fw-light); font-size: 3.4rem; } .tb-funnel__arrow span { background: repeating-linear-gradient(to left, #fff 0 6px, transparent 6px 12px); opacity: .5; } .tb-heat__bar { background: rgba(255, 255, 255, .2); } .tb-heat__label { color: rgba(255, 255, 255, .8); } .tb-heat__label--hot { color: #fff; } .tb-sitetype__goal { background: rgba(255, 255, 255, .14); color: #fff; border-radius: 0; } .tb-sitetype--featured .tb-sitetype__goal { background: var(--tb-blue); } .tb-sitetype__list .tb-icon { background: #fff; color: var(--tb-blue); border-radius: 0; } .tb-sitetype--featured .tb-sitetype__list .tb-icon { background: var(--tb-cyan); color: var(--tb-black); } .tb-film { background: #06070A; box-shadow: 0 70px 120px -50px rgba(0, 12, 60, .95); } .tb-film__frame { border-radius: 0; background: #12151C; } .tb-film__frame .tb-service__icon { background: none; border-color: rgba(255, 255, 255, .2); color: var(--tb-cyan); } .tb-film__num { font-weight: var(--fw-light); font-size: 2rem; } .tb-channels__grid { gap: 16px; } .tb-channel { background: var(--tb-slab); border: 1px solid rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); } .tb-channel__bubble { box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9); } .tb-channel__reply { background: var(--tb-blue); border-radius: 0; } .tb-features { gap: 0; border-top: 1px solid var(--tb-rule); } .tb-feature { padding: 22px 0; padding-inline-end: 24px; border: 0; border-bottom: 1px solid var(--tb-line); background: none; } .tb-feature .tb-service__icon, .tb-deliverable .tb-service__icon, .tb-contact__item .tb-service__icon { border-radius: 0; background: none; border: 1px solid var(--tb-line-strong); color: var(--tb-accent); } .tb-service__icon { border: 1px solid var(--tb-line-strong); color: var(--tb-heading); } .tb-format__art { background: var(--tb-lit-blue); border-radius: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 50px 90px -40px rgba(0, 0, 0, 1); } .tb-format__cta { border-radius: 0; } .tb-format figcaption { color: var(--tb-muted); } .tb-reel { border-radius: 0; background: var(--tb-lit-blue); } .tb-kpis { background: var(--n1); } .tb-kpi { background: var(--tb-slab); border-color: rgba(255, 255, 255, .08); } .tb-kpi__ring strong { font-weight: var(--fw-light); } .tb-deliverable strong { color: #fff; } .tb-identity .tb-deliverable span { color: rgba(255, 255, 255, .8); } /* Service pages: pains, includes, process, metrics (when filled in wp-admin) */ .tb-pains__x { border-color: var(--tb-line-strong); color: var(--tb-accent); } .tb-includes { background: var(--n1); } .tb-includes__grid { border-top-color: var(--tb-rule); } .tb-includes__grid .tb-icon { color: var(--tb-accent); } .tb-matrix__grid { border-top-color: var(--tb-rule); } .tb-matrix__grid span { color: var(--tb-accent); } .tb-metrics { background: var(--n1); border-block: 1px solid rgba(255, 255, 255, .06); } /* Newsprint band: the outlets, printed on paper between the rooms --------------- */ .tb-newsprint { --tb-heading: var(--tb-black); --tb-text: #22252D; --tb-muted: #555A66; --tb-accent: var(--tb-blue); position: relative; background: #F2F0EB; color: var(--tb-black); border: 0; } .tb-newsprint::before { content: ""; position: absolute; inset: 0; background: var(--grain); background-size: 180px; filter: invert(1); opacity: .22; mix-blend-mode: multiply; pointer-events: none; } .tb-newsprint .tb-press__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); align-items: center; gap: 32px clamp(32px, 5vw, 80px); padding-block: clamp(56px, 6vw, 96px); } .tb-newsprint .tb-press__title { font-size: clamp(1.8rem, 1.1rem + 2vw, 3rem); font-weight: var(--fw-light); line-height: 1.05; letter-spacing: -.03em; color: var(--tb-black); } .tb-newsprint .tb-press__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(10, 10, 10, .9); } .tb-newsprint .tb-press__list li { display: grid; place-items: center; height: clamp(96px, 8vw, 124px); border-bottom: 1px solid rgba(10, 10, 10, .14); } .tb-newsprint .tb-press__list li:not(:nth-child(3n + 1)) { border-inline-start: 1px solid rgba(10, 10, 10, .14); } .tb-newsprint .tb-press__list img { height: clamp(34px, 3vw, 48px); max-width: 70%; mix-blend-mode: multiply; } .tb-newsprint .tb-marquee { mask-image: none; -webkit-mask-image: none; } .tb-newsprint .tb-press__marquee img { mix-blend-mode: multiply; } /* Contact rooms ---------------------------------------------------------------- */ .tb-contact__form { box-shadow: 0 70px 120px -50px rgba(0, 12, 60, .95), 0 20px 40px -20px rgba(0, 12, 60, .5); } .tb-contact--page .tb-contact__form, .tb-audit__form { box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 1), 0 20px 40px -20px rgba(0, 0, 0, .6); } .tb-audit__form { box-shadow: 0 70px 120px -50px rgba(0, 12, 60, .95), 0 20px 40px -20px rgba(0, 12, 60, .5); } .tb-contact--page { background: var(--n0); } .tb-contact__info { border-top: 1px solid var(--tb-rule); } .tb-contact__item { border-bottom: 1px solid var(--tb-line); } .tb-contact__item strong { font-weight: var(--fw-bold); } a.tb-contact__item:hover .tb-service__icon { background: var(--tb-blue); border-color: var(--tb-blue); color: #fff; } .tb-audit__proof { border-top: 1px solid rgba(255, 255, 255, .3); } .tb-audit__proof strong { font-weight: var(--fw-light); font-size: clamp(2rem, 1.3rem + 1.8vw, 3.2rem); letter-spacing: -.03em; } .tb-audit .tb-checks { border-top-color: rgba(255, 255, 255, .5); } .tb-audit .tb-checks li { color: #fff; border-color: rgba(255, 255, 255, .2); } .tb-audit__copy .tb-h1--inner { font-size: clamp(2.6rem, 1rem + 4vw, 5.2rem); } .tb-audit .tb-label { color: #fff; } .tb-audit .tb-label::before { background: #fff; } /* FAQ page -------------------------------------------------------------------- */ .tb-faq-page__nav { border-top: 1px solid var(--tb-rule); } .tb-faq-page__nav a { color: rgba(255, 255, 255, .72); border-color: var(--tb-line); } .tb-faq-page__nav a:hover { color: #fff; } .tb-faq-page__group > .tb-h3 { font-weight: var(--fw-light); font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem); letter-spacing: -.03em; } .tb-accordion { border-top: 1px solid var(--tb-rule); } .tb-accordion__item { border-color: var(--tb-line); } .tb-accordion__item[open] { border-color: rgba(255, 255, 255, .3); } .tb-accordion__item summary { font-weight: var(--fw-medium); font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); padding-block: 26px; } .tb-accordion__item[open] summary { font-weight: var(--fw-bold); } .tb-accordion__item summary .tb-icon { border: 1px solid var(--tb-line-strong); } .tb-accordion__item[open] summary .tb-icon { background: var(--tb-blue); border-color: var(--tb-blue); color: #fff; } /* Blog post ---------------------------------------------------------------------- */ .tb-prose { color: rgba(255, 255, 255, .8); } .tb-prose a:not(.tb-btn) { color: #7FA8FF; } .tb-prose ul li::marker { color: var(--tb-cyan); } .tb-prose blockquote { border-inline-start: 2px solid var(--tb-cyan); font-weight: var(--fw-light); font-size: 1.5rem; } .tb-share { border-top: 1px solid var(--tb-line); } .tb-share a, .tb-share button, .tb-prose .tb-share a { background: transparent; color: #fff; border: 1px solid var(--tb-line-strong); } .tb-share a:hover, .tb-share button:hover, .tb-prose .tb-share a:hover { background: #fff; color: var(--tb-black); } .tb-inline-cta { position: relative; overflow: hidden; background: var(--tb-lit-blue); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 50px 90px -40px rgba(2, 83, 252, .45); } .tb-post__date { border-top: 1px solid var(--tb-rule); } .tb-post__ph { background: var(--tb-lit-blue); } /* Filters, gallery, team, cases (content-driven pages) */ .tb-filters button { background: transparent; border: 1px solid var(--tb-line-strong); } .tb-filters button:hover { background: #fff; color: var(--tb-black); } .tb-case__results strong { color: #fff; font-weight: var(--fw-light); } .tb-team__img { background: var(--tb-lit-blue); } /* Footer: the same night ground ------------------------------------------------ */ .tb-footer { background: var(--n0); border-top: 1px solid rgba(255, 255, 255, .06); --tb-accent: var(--tb-cyan); } .tb-footer__big { font-weight: var(--fw-light); letter-spacing: -.035em; } .tb-footer__cta { border-bottom: 1px solid var(--tb-line); } .tb-footer__bottom { border-top: 1px solid var(--tb-line); } .tb-social a { border: 1px solid rgba(255, 255, 255, .3); } /* Consent: a smoked panel, not a paper slip */ .tb-consent { background: rgba(15, 18, 23, .96); border: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .8); box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .tb-consent a { color: #fff; } .tb-notice { color: var(--tb-black); } /* Responsive ---------------------------------------------------------------------- */ @media (max-width: 1100px) { .tb-index__row { grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1.2fr) 72px; } .tb-pillars__grid, .tb-goals__grid, .tb-goals__grid--5, .tb-values, .tb-goals__grid:has(> :first-child:nth-last-child(4)), .tb-values:has(> :first-child:nth-last-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tb-goals__grid > :first-child:nth-last-child(6), .tb-pillars__grid > :first-child:nth-last-child(6) { grid-row: span 1; } .tb-goals__grid > :first-child:nth-last-child(4) ~ :last-child, .tb-values > :first-child:nth-last-child(4) ~ :last-child { grid-column: auto; } .tb-goals__grid > :first-child:nth-last-child(4), .tb-values > :first-child:nth-last-child(4) { grid-row: span 3; } } @media (max-width: 960px) { .tb-nav { background: var(--n0); border-top: 1px solid rgba(255, 255, 255, .1); } .tb-nav__list > li > a { color: #fff; border-color: rgba(255, 255, 255, .1); } .tb-nav__list > li > a.is-current { color: var(--tb-cyan); } .tb-mega { background: none; border: 0; box-shadow: none; } .nav-open .tb-header { background: var(--n0); } .tb-hero--inner .tb-hero__inner, .tb-404 .tb-hero__inner { padding-inline-end: var(--tb-gutter); min-height: 0; } .tb-plate { position: relative; top: auto; translate: none; justify-self: center; width: min(78%, 340px); margin-top: 20px; order: 99; } .tb-plate__face { transform: perspective(1200px) rotateY(-10deg) rotateX(3deg); } .tb-plate__chip { inset-inline-start: -10%; } .tb-hero--inner::after, .tb-page-hero::after, .tb-404::after, .tb-audit::after { height: 30%; } .tb-lit { padding: 40px 18px; } .tb-identity .tb-lit { order: 2; margin-top: 24px; } .tb-approach .tb-lit { margin-top: 24px; } .tb-group__head { flex-direction: column; align-items: flex-start; gap: 6px; } .tb-newsprint .tb-press__inner { grid-template-columns: 1fr; } .tb-channels__grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .tb-header__cta { --btn-bg: #fff; --btn-fg: var(--tb-black); min-height: 42px; } .tb-hero--inner, .tb-page-hero, .tb-404, .tb-audit { padding-top: calc(var(--tb-header) + 40px); padding-bottom: 64px; } .tb-hero--inner .tb-h1--inner { font-size: clamp(2.5rem, .9rem + 8vw, 3.3rem); } .tb-hero--inner .tb-h1--post { font-size: clamp(2rem, 1rem + 5vw, 2.6rem); } .tb-hero--inner .tb-hero__stats { flex-direction: column; gap: 14px; } .tb-hero--inner .tb-hero__stats li { display: grid; gap: 4px; } .tb-hero--inner .tb-hero__stats span { max-width: none; } .tb-hero--inner .tb-hero__actions .tb-btn { width: 100%; } .tb-plate { width: min(84%, 300px); } .tb-h2 { font-size: clamp(2.2rem, 1rem + 6vw, 2.9rem); } .tb-index__row { grid-template-columns: 2.25rem minmax(0, 1fr) 64px; } .tb-index__title { font-size: clamp(1.5rem, 1rem + 3vw, 2rem); font-weight: var(--fw-bold); } .tb-pillars__grid, .tb-goals__grid, .tb-goals__grid--5, .tb-values, .tb-goals__grid:has(> :first-child:nth-last-child(4)), .tb-values:has(> :first-child:nth-last-child(4)) { grid-template-columns: 1fr; } .tb-goals__grid > :first-child, .tb-pillars__grid > :first-child, .tb-values > :first-child { grid-row: auto !important; grid-column: auto !important; min-height: 320px; } .tb-goals__grid > .tb-card, .tb-pillars__grid > .tb-card, .tb-values > .tb-card { min-height: 0; padding: 28px 24px; } .tb-goals__grid .tb-service__icon, .tb-pillars__grid .tb-service__icon, .tb-values .tb-service__icon { margin-bottom: 12px; } .tb-group__num { font-size: 5rem; } .tb-newsprint .tb-press__title { font-size: 1.9rem; } .tb-newsprint .tb-press__list { display: none; } .tb-newsprint .tb-press__marquee { border-block: 1px solid rgba(10, 10, 10, .14); } .tb-contact__doodle { width: 120px; } .tb-phone-wrap { min-height: 0; } } @media (prefers-reduced-motion: reduce) { .tb-plate, .tb-plate__chip { animation: none; translate: 0 -50%; } } @media (prefers-reduced-motion: reduce) and (max-width: 960px) { .tb-plate { translate: none; } } /* The plate enters by its face only (scale, no opacity) so it is never caught invisible. */ .tb-hero--inner .tb-hero__inner > .tb-plate { animation: none; } .tb-plate__face { animation: tb-face-in 1.4s var(--tb-ease) both; } @keyframes tb-face-in { from { scale: .94; } } /* Slab numerals sit opposite the icon so the two never collide. */ .tb-goals__grid .tb-service__icon, .tb-pillars__grid .tb-service__icon, .tb-values .tb-service__icon { justify-self: end; } .tb-goal-card__step { inset-inline: auto; left: auto; right: clamp(22px, 2.4vw, 36px); } /* the numeral is set LTR, so it is placed physically: the start (right) side, opposite the icon */ .tb-hero--inner .tb-hero__inner:has(.tb-plate) { min-height: calc(var(--plate) * 1.12); } /* Fix batch 1 ------------------------------------------------------------------ */ /* The lead slab of a six takes the reading start (the right, column 1 in RTL). */ .tb-goals__grid > :first-child:nth-last-child(6), .tb-pillars__grid > :first-child:nth-last-child(6) { grid-column: 1 / span 2; grid-row: 1 / span 2; } /* Featured cells beat the glass cells they share a room with. */ .tb-funnel__steps .tb-funnel__step--hot, .tb-sitetypes__grid .tb-sitetype--featured, .tb-compare .tb-compare__col--win { background: var(--tb-lit-dark); border: 1px solid rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 70px 120px -50px rgba(0, 12, 60, .95), 0 20px 40px -20px rgba(0, 12, 60, .5); --tb-heading: #fff; --tb-muted: rgba(255, 255, 255, .7); } .tb-sitetypes__grid .tb-sitetype--featured { translate: 0 -14px; } .tb-audit .tb-label__tag { color: #fff; } /* Pages that are only a hero fill the first screen. */ .tb-thanks, .tb-404 { min-height: 100svh; display: grid; align-content: center; } @media (max-width: 1100px) { .tb-goals__grid > :first-child:nth-last-child(6), .tb-pillars__grid > :first-child:nth-last-child(6) { grid-column: 1 / -1; grid-row: auto; } } @media (max-width: 960px) { .tb-sitetypes__grid .tb-sitetype--featured { translate: none; } } /* Fix batch 2 ------------------------------------------------------------------ */ /* Blue rooms: all text is pure white (the lit corner is kept below #1F6BFF). */ .tb-field--blue, .tb-room--blue, .tb-hero--inner, .tb-page-hero, .tb-404, .tb-audit { --tb-text: #fff; --tb-muted: #fff; } .tb-hero--inner .tb-hero__lead, .tb-hero--inner .tb-label, .tb-crumbs, .tb-post-meta, .tb-hero--inner .tb-hero__stats span, .tb-field--blue .tb-label, .tb-room--blue .tb-label, .tb-audit .tb-audit__proof span, .tb-field--blue .tb-head .tb-lead, .tb-room--blue .tb-head .tb-lead { color: #fff; } .tb-hero--inner .tb-h1--inner { color: #fff; } @media (max-width: 640px) { .tb-field--blue, .tb-room--blue, .tb-hero--inner, .tb-page-hero, .tb-404, .tb-audit { --fan: .06; } } /* The logo over a blue hero turns all white (its blue loop would vanish), and takes its colour back on the smoked glass. */ .tb-header--on-blue:not(.is-scrolled) .tb-header__logo .tb-logo { filter: brightness(0) invert(1); } .nav-open .tb-header--on-blue .tb-header__logo .tb-logo { filter: none; } .tb-header__logo .tb-logo { transition: filter .4s; } /* Home hero CTA enters by movement only, so no capture or slow frame can catch it at opacity 0. */ .tb-hero--home .tb-hero__actions { animation-name: tb-rise-still; } @keyframes tb-rise-still { from { transform: translateY(26px); } to { transform: none; } } /* Hero text column never grows past the gutter. */ .tb-hero__inner { grid-template-columns: minmax(0, 1fr); } .tb-hero__inner > * { min-width: 0; max-width: 100%; } .tb-hero--inner .tb-hero__inner > .tb-hero__lead { max-width: min(50ch, 100%); } .tb-hero--inner .tb-hero__inner > .tb-h1--inner { max-width: min(14ch, 100%); } .tb-hero--inner .tb-hero__inner > .tb-h1--post { max-width: min(20ch, 100%); } /* Hero plate: varied per page. Turned the other way, bleeding off the edge, small, loop only where there is room. */ .tb-plate__loop { left: 20%; right: 20%; bottom: 6%; width: 60%; } .tb-plate--loop .tb-plate__doodle { width: 54%; margin-top: -24%; } .tb-plate:has(.tb-plate__chip) .tb-plate__doodle { width: 58%; margin-top: -18%; } .tb-plate--out .tb-plate__face { transform: perspective(1400px) rotateY(16deg) rotateX(4deg); transform-origin: 60% 50%; } .tb-plate--out .tb-plate__chip { rotate: 2deg; } .tb-plate--bleed { inset-inline-end: -8vw; width: calc(var(--plate) * 1.1); } .tb-plate--bleed .tb-plate__doodle { translate: 20% 0; } /* the doodle sits on the part of the slab that stays on the page */ .tb-plate--bleed .tb-plate__chip { inset-inline-start: -8%; bottom: 18%; } .tb-plate--sm { width: calc(var(--plate) * .74); } .tb-hero--inner .tb-hero__inner:has(.tb-plate--sm) { min-height: calc(var(--plate) * .8); } .tb-plate__chip { width: auto; min-width: 54%; max-width: 92%; gap: 14px; padding: 12px 18px 12px 14px; } .tb-plate__chip > i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 0; color: #fff; } .tb-plate__chip > i .tb-icon { width: 21px; height: 21px; } .tb-plate__chip-text { display: grid; gap: 5px; min-width: 0; } .tb-plate__chip-text strong { color: #fff; font-size: 1.02rem; font-weight: var(--fw-bold); line-height: 1.1; white-space: nowrap; } .tb-plate__chip-text strong[dir="ltr"] { justify-self: start; font-size: 1.3rem; font-weight: var(--fw-black); letter-spacing: -.02em; } .tb-plate__chip-text small { color: rgba(255, 255, 255, .74); font-size: .84rem; font-weight: var(--fw-medium); line-height: 1.2; white-space: nowrap; } .tb-plate__tags { display: flex; gap: 6px; } .tb-plate__tags em { padding: 3px 8px; border: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .88); font-size: .74rem; font-style: normal; font-weight: var(--fw-medium); white-space: nowrap; direction: ltr; unicode-bidi: isolate; } @media (max-width: 960px) { .tb-plate--bleed { inset-inline-end: auto; width: min(78%, 340px); } .tb-plate--bleed .tb-plate__doodle { translate: none; } .tb-plate--out .tb-plate__face { transform: perspective(1200px) rotateY(10deg) rotateX(3deg); } } @media (max-width: 640px) { .tb-hero--inner, .tb-page-hero, .tb-404, .tb-audit { padding-bottom: 48px; } .tb-plate, .tb-plate--bleed { width: min(64%, 240px); margin-top: 8px; } .tb-plate--no-mobile { display: none; } .tb-plate__chip { padding: 10px 12px; gap: 10px; } .tb-plate__chip > i { width: 34px; height: 34px; } .tb-plate__chip-text strong { font-size: .9rem; } .tb-plate__chip-text small { font-size: .74rem; } .tb-hero--inner .tb-h1--inner { font-size: clamp(2.2rem, 1rem + 6.2vw, 2.9rem); } } /* Lead slabs that span rows carry the item's doodle in their upper field. */ .tb-goal-card__doodle { display: none; } @media (min-width: 1101px) { .tb-goals__grid > .tb-card:first-child:is(:nth-last-child(4), :nth-last-child(5), :nth-last-child(6)) .tb-goal-card__doodle, .tb-pillars__grid > .tb-card:first-child:is(:nth-last-child(4), :nth-last-child(5), :nth-last-child(6)) .tb-goal-card__doodle, .tb-values > .tb-card:first-child:nth-last-child(4) .tb-goal-card__doodle { display: block; position: absolute; z-index: 0; top: 24%; left: 50%; translate: -50% 0; width: clamp(140px, 12vw, 190px); pointer-events: none; } .tb-goals__grid--5 > .tb-card:first-child .tb-goal-card__doodle { top: 31%; } .tb-goals__grid > .tb-card:first-child > :not(.tb-goal-card__doodle), .tb-pillars__grid > .tb-card:first-child > :not(.tb-goal-card__doodle), .tb-values > .tb-card:first-child > :not(.tb-goal-card__doodle) { position: relative; z-index: 1; } .tb-goals__grid > .tb-card:first-child > .tb-goal-card__step, .tb-pillars__grid > .tb-card:first-child > .tb-goal-card__step { position: absolute; } } /* Cards in a blue room: panes of lighter glass with a lit top edge, like the home process stair. */ .tb-room--blue .tb-goals__grid > .tb-card:not(:first-child), .tb-room--blue .tb-pillars__grid > .tb-card:not(:first-child), .tb-room--blue .tb-funnel__step:not(.tb-funnel__step--hot), .tb-room--blue .tb-sitetype:not(.tb-sitetype--featured), .tb-compare .tb-compare__col--muted { background: linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .04) 100%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .14); border-top-color: rgba(255, 255, 255, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 24px 48px -20px rgba(0, 20, 90, .6); --tb-heading: #fff; --tb-muted: #fff; color: #fff; } .tb-room--blue .tb-goals__grid > .tb-card:not(:first-child):hover, .tb-room--blue .tb-pillars__grid > .tb-card:not(:first-child):hover { background: linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .06) 100%); border-color: rgba(255, 255, 255, .3); border-top-color: #fff; --tb-muted: #fff; } .tb-room--blue .tb-goals__grid > .tb-card:not(:first-child) p, .tb-room--blue .tb-pillars__grid > .tb-card:not(:first-child) p, .tb-room--blue .tb-sitetype p, .tb-room--blue .tb-funnel__step p, .tb-compare .tb-compare__col--muted li { color: #fff; } /* Contact band: the form is a dark glass slab standing in the blue, not a white plugin box. */ .tb-contact.tb-field--blue .tb-contact__form { --tb-heading: #fff; --tb-text: rgba(255, 255, 255, .86); --tb-muted: rgba(255, 255, 255, .66); --tb-line: rgba(255, 255, 255, .14); --tb-line-strong: rgba(255, 255, 255, .22); --tb-accent: var(--tb-cyan); --tb-tint: rgba(2, 205, 253, .12); position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(165deg, rgba(25, 30, 42, .95) 0%, rgba(11, 14, 20, .95) 52%, rgba(8, 10, 15, .96) 100%); border: 1px solid rgba(255, 255, 255, .1); color: var(--tb-text); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 80px 140px -50px rgba(0, 10, 60, .95), 0 24px 48px -20px rgba(0, 10, 60, .6); } .tb-contact.tb-field--blue .tb-contact__form::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(122deg, rgba(2, 83, 252, .34) 0%, rgba(2, 83, 252, .08) 30%, transparent 52%); } .tb-contact__form-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, .12); } .tb-contact__form-head .tb-h3 { color: #fff; font-size: clamp(1.35rem, 1.1rem + .7vw, 1.8rem); font-weight: var(--fw-bold); letter-spacing: -.01em; } .tb-contact__form-head .tb-contact__doodle { flex: none; width: 64px; margin: 0; } .tb-contact.tb-field--blue .tb-field label { color: rgba(255, 255, 255, .86); } .tb-contact.tb-field--blue .tb-field label span { color: var(--tb-cyan); } .tb-contact.tb-field--blue .tb-field input, .tb-contact.tb-field--blue .tb-field select, .tb-contact.tb-field--blue .tb-field textarea { min-height: 52px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: #fff; } .tb-contact.tb-field--blue .tb-field input:hover, .tb-contact.tb-field--blue .tb-field textarea:hover { border-color: rgba(255, 255, 255, .34); } .tb-contact.tb-field--blue .tb-field input:focus, .tb-contact.tb-field--blue .tb-field textarea:focus { border-color: var(--tb-cyan); box-shadow: inset 0 0 0 1px var(--tb-cyan); background: rgba(255, 255, 255, .09); } .tb-contact.tb-field--blue .tb-field input::placeholder { color: rgba(255, 255, 255, .45); } .tb-contact.tb-field--blue .tb-contact__form .tb-btn--primary { --btn-bg: #fff; --btn-fg: var(--tb-black); --btn-bd: #fff; --btn-bg-h: var(--tb-blue); --btn-fg-h: #fff; --btn-bd-h: var(--tb-blue); } .tb-contact.tb-field--blue .tb-form__note { color: rgba(255, 255, 255, .62); } .tb-contact.tb-field--blue .tb-form__note a { color: #fff; } .tb-contact.tb-field--blue .tb-notice { color: #fff; background: rgba(2, 205, 253, .12); border-color: var(--tb-cyan); } /* Direct channels under the band's copy: WhatsApp and mail, the real ways in. */ .tb-contact__copy .tb-head { margin-bottom: 0; } .tb-contact__channels { display: grid; max-width: 460px; margin-top: clamp(28px, 3vw, 44px); border-top: 1px solid rgba(255, 255, 255, .5); } .tb-contact__channels a { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .24); color: #fff; } .tb-contact__channels .tb-icon { flex: none; width: 46px; height: 46px; padding: 12px; border: 1px solid rgba(255, 255, 255, .45); transition: background-color .25s, color .25s; } .tb-contact__channels a:hover .tb-icon { background: #fff; color: var(--tb-blue); } .tb-contact__channels span { display: grid; gap: 2px; font-weight: var(--fw-medium); font-size: 1.02rem; } .tb-contact__channels strong { font-weight: var(--fw-bold); font-size: .86rem; letter-spacing: .02em; } .tb-contact__channels bdi { justify-self: start; } .tb-footer__contact li bdi, .tb-contact__item bdi { unicode-bidi: isolate; } /* About values on phones: icon, title, then the text across the whole card. */ @media (max-width: 960px) { .tb-values .tb-why__item, .tb-values .tb-why__item:first-child { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; } .tb-values .tb-why__item > * { grid-column: 1 / -1; } .tb-values .tb-why__item .tb-service__icon { justify-self: start; } } /* FAQ with a single category: no side menu, one centred column. */ .tb-faq-page--single { grid-template-columns: minmax(0, 1fr); max-width: calc(860px + 2 * var(--tb-gutter)); } /* Blog post: the article gets a real room gap under the hero. */ .tb-post-hero + *, article > .tb-section { padding-top: clamp(48px, 7vw, 104px); } /* Creative canvas: the composed ad is the resting state; it is rebuilt only once the panel is in view. */ .tb-canvas__layer { opacity: 1; } .tb-canvas-wrap:not(.is-in) .tb-canvas__layer { animation: none; } .tb-canvas-wrap:not(.is-in) .tb-canvas__select, .tb-canvas-wrap:not(.is-in) .tb-canvas__cursor { animation: none; opacity: 0; } .tb-canvas-wrap.is-in .tb-canvas__layer { animation-iteration-count: 1; animation-fill-mode: both; } @keyframes tb-layer-bg { 0% { opacity: 0; } 8%, 100% { opacity: 1; } } @keyframes tb-layer-shape { 0%, 16% { opacity: 0; transform: scale(.6); } 24%, 100% { opacity: 1; transform: none; } } @keyframes tb-layer-title { 0%, 30% { opacity: 0; transform: translateY(14px); } 38%, 100% { opacity: 1; transform: none; } } @keyframes tb-layer-cta { 0%, 48% { opacity: 0; transform: scale(.6); } 56%, 100% { opacity: 1; transform: none; } } /* Websites browser mock: same rule as the canvas, the built page is the resting state and is built once in view. */ .tb-browser__page > * { opacity: 1; transform: none; } .tb-browser-wrap:not(.is-in) .tb-browser__page > * { animation: none; } .tb-browser-wrap.is-in .tb-browser__page > * { animation-name: tb-build-once; animation-iteration-count: 1; animation-fill-mode: both; animation-duration: 3s; } @keyframes tb-build-once { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* Mobile menu: a backdrop-filter on the header turns it into the containing block for the fixed menu panel, which then collapses to the header's height. Never blur while open. */ body.nav-open .tb-header, body.nav-open .tb-header.is-scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; }