/* RotoTech Pro — visual system (Design Guideline). tokens → base → layout → components → sections → pages → plugins → motion */ /* ---------- Tokens ---------- */ :root { /* RotoTech palette */ --rt-primary: #123B63; --rt-primary-light: #1B557F; --rt-accent: #DD9618; --rt-deep: #081C2C; --rt-dark: #0D1720; --rt-white: #FFFFFF; --rt-surface: #F6F8FA; --rt-text: #17212B; --rt-muted: #687783; --rt-border: #DDE3E8; /* Derived from the palette for contrast, not new colours */ --rt-accent-ink: color-mix(in srgb, var(--rt-accent) 60%, var(--rt-dark)); /* amber as text on light: 5.1:1 on surface */ --rt-muted-ink: color-mix(in srgb, var(--rt-muted) 90%, var(--rt-text)); /* muted text on surface: 4.9:1 */ --rt-line-dark: color-mix(in srgb, var(--rt-white) 13%, transparent); --rt-text-dark: color-mix(in srgb, var(--rt-white) 74%, transparent); --muted-text: var(--rt-muted); --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --max: 1320px; --gutter: clamp(16px, 4vw, 48px); --col-gap: clamp(16px, 2.5vw, 40px); --sec: clamp(56px, 6vw, 96px); --hdr: 88px; /* header bar (turbointernacional.com proportions) */ --meta: 46px; /* top rail above it */ --r: 4px; --r-img: 8px; --ease: cubic-bezier(.22, 1, .36, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { font: 400 1rem/1.7 var(--font); color: var(--rt-text); background: var(--rt-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } img, svg, video, iframe { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } ul[class], ol[class] { list-style: none; } strong, b { font-weight: 700; } :focus-visible { outline: 2px solid var(--rt-primary-light); outline-offset: 3px; border-radius: 2px; } :is(.hero, .phero, .section--dark, .cta, .ftr, .lightbox) :focus-visible, .rt-dark-top .hdr:not(.is-scrolled) :focus-visible { outline-color: var(--rt-accent); } ::selection { background: var(--rt-primary); color: var(--rt-white); } /* ---------- Type ---------- */ .display, .h1, .h2, .h3, .h4, .h5, h1, h2, h3, h4, h5 { font-weight: 800; letter-spacing: -.025em; line-height: 1.1; text-wrap: balance; } .display { font-size: clamp(2.5rem, 1.1rem + 5vw, 5.75rem); line-height: .98; letter-spacing: -.04em; } .h1 { font-size: clamp(1.875rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1.06; letter-spacing: -.035em; } .h2 { font-size: clamp(1.5rem, 1.15rem + 1vw, 2.125rem); line-height: 1.08; letter-spacing: -.03em; } .h3 { font-size: clamp(1.1875rem, 1.05rem + .45vw, 1.4375rem); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; } .h4 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; } .h5 { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; } .lead { font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.6; color: var(--muted-text); text-wrap: pretty; } p { text-wrap: pretty; } .label { display: inline-flex; align-items: center; gap: 14px; font-size: .75rem; font-weight: 700; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; color: var(--rt-primary); } .label::before { content: ""; flex: none; width: 34px; height: 7px; color: var(--rt-accent); background: linear-gradient(currentColor 0 0) 0 100% / 100% 1px no-repeat, repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 11px) 0 100% / 100% 4px no-repeat, linear-gradient(currentColor 0 0) 0 0 / 1px 100% no-repeat; } .label--light, .section--dark .label, .phero .label { color: var(--rt-accent); } h2.label, h3.label, h4.label { letter-spacing: .16em; } .num { font-weight: 800; letter-spacing: -.045em; line-height: .9; font-variant-numeric: tabular-nums lining-nums; } .hl { font-weight: 800; color: var(--rt-accent-ink); white-space: nowrap; } .section--dark .hl, .section--dark .idx { color: var(--rt-accent); } .section--soft { --muted-text: var(--rt-muted-ink); } .idx { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; color: var(--rt-accent-ink); font-variant-numeric: tabular-nums; } .ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .ic--lg { width: 34px; height: 34px; stroke-width: 1.15; } /* ---------- Layout ---------- */ .wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); } .grid > * { grid-column: 1 / -1; } .section { position: relative; padding-block: var(--sec); } .section--soft { background: var(--rt-surface); } .section--dark { background: var(--rt-deep); color: var(--rt-white); } .section--dark .lead, .section--dark p { color: var(--rt-text-dark); } .section--dark :is(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5) { color: var(--rt-white); } .section > .wrap, .cta > .wrap, .hero > .wrap, .phero > .wrap { position: relative; z-index: 2; } .head-split { display: grid; gap: 20px 40px; margin-bottom: clamp(32px, 4vw, 56px); } .head-split .h1 { margin-top: 16px; max-width: 16ch; } .head-split .lead { max-width: 46ch; } .head-split .link { margin-top: 24px; } @media (min-width: 900px) { .head-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } .head-split--end > :last-child { justify-self: end; } } /* Technical grid: static, ~4.5% */ .tech-grid { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 88px 88px, linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 88px 88px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent); } .blueprint { fill: none; stroke: var(--rt-primary-light); stroke-width: 1; vector-effect: non-scaling-stroke; } .blueprint * { vector-effect: non-scaling-stroke; } /* ---------- Components ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 26px; border: 1px solid transparent; border-radius: var(--r); font-size: .9375rem; font-weight: 700; letter-spacing: .005em; line-height: 1.2; white-space: nowrap; transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); } .btn--primary { background: var(--rt-primary); color: var(--rt-white); } .btn--primary:hover { background: var(--rt-primary-light); } .btn--outline { border-color: var(--rt-primary); color: var(--rt-primary); } .btn--outline:hover { background: var(--rt-primary); color: var(--rt-white); } .btn--light { background: var(--rt-white); color: var(--rt-primary); } .btn--light:hover { background: var(--rt-deep); color: var(--rt-white); } /* Over dark imagery a blue button would sit blue-on-navy (1.5:1), so the header CTA turns white there */ .arr { display: inline-block; transition: transform .25s var(--ease); } .btn--primary:hover .arr, .btn--outline:hover .arr, .btn--light:hover .arr { color: var(--rt-accent); } .btn:hover .arr, .link:hover .arr, .svc__row:hover .arr { transform: translateX(5px); } .link { position: relative; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9375rem; color: var(--rt-primary); } .link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--rt-accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .link:hover::after { transform: scaleX(1); } .section--dark .link { color: var(--rt-accent); } .rule { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--rt-border); transform-origin: left; } .rule::before { content: ""; position: absolute; left: 0; top: -1px; width: 56px; height: 3px; background: var(--rt-accent); } .section--dark .rule { background: var(--rt-line-dark); } .img-frame { position: relative; display: block; overflow: hidden; border-radius: var(--r-img); background: var(--rt-border); isolation: isolate; } .img-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } a.img-frame:hover img { transform: scale(1.025); } .section--dark .img-frame { background: var(--rt-dark); } .tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; border-top: 1px solid var(--rt-border); } .tags li { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--rt-border); font-size: .9375rem; font-weight: 600; } .tags li::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--rt-accent); } .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rt-primary); } .meta > * + *::before { content: ""; display: inline-block; vertical-align: middle; width: 16px; height: 1px; margin-right: 16px; background: var(--rt-border); } .meta > * + * { color: var(--muted-text); } .meta a:hover { color: var(--rt-primary); } /* ---------- Progress ---------- */ .progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; pointer-events: none; } .progress span { display: block; height: 100%; background: var(--rt-accent); transform: scaleX(0); transform-origin: left; } /* ---------- Header (after turbointernacional.com, in RotoTech colours) ---------- 46px top rail + 88px bar over the hero, transparent with a soft navy fade behind it; once scrolled the rail folds away and the bar becomes a 64px deep-navy strip. Menu: 15px semibold white links, small carets on items with a submenu, amber on hover. The Services mega menu and the mobile panel keep their own design. */ :root { --hdr-steel: color-mix(in srgb, var(--rt-white) 70%, var(--rt-primary-light)); } /* light steel for the current menu item */ .hdr { position: fixed; inset: 0 0 auto; z-index: 50; padding-top: var(--meta); color: var(--rt-white); background: transparent; transition: background-color .2s, box-shadow .2s, padding-top .2s; } .hdr::before { content: ""; position: absolute; inset: 0 0 auto; height: 168px; z-index: -1; pointer-events: none; background: linear-gradient(color-mix(in srgb, var(--rt-primary) 30%, transparent), color-mix(in srgb, var(--rt-primary) 26%, transparent) 28%, color-mix(in srgb, var(--rt-primary) 16%, transparent) 60%, color-mix(in srgb, var(--rt-primary) 6%, transparent) 82%, transparent); transition: opacity .2s; } .hdr.is-scrolled, body:not(.rt-dark-top) .hdr { padding-top: 0; } /* the scrolled header as frosted glass (client request 2026-10-29): the page blurred through a translucent navy with a fine light edge below. On a layer of its own, not the header, so the header's fixed scrim and panels keep the page as frame. */ .hdr::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: linear-gradient(color-mix(in srgb, var(--rt-deep) 80%, transparent), color-mix(in srgb, var(--rt-deep) 66%, transparent)); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--rt-white) 10%, transparent), 0 14px 32px -18px color-mix(in srgb, var(--rt-deep) 70%, transparent); transition: opacity .25s; } .hdr.is-scrolled::after, body:not(.rt-dark-top) .hdr::after { opacity: 1; } .hdr.is-scrolled::before, body:not(.rt-dark-top) .hdr::before { opacity: 0; } .hdr__bar { position: relative; display: flex; align-items: center; gap: 26px; height: var(--hdr); max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); transition: height .2s; } .hdr.is-scrolled .hdr__bar { height: 64px; } .hdr__brand { position: relative; z-index: 2; display: flex; align-items: center; flex: none; min-height: 44px; } .hdr__brand { --logo-h: 32px; gap: calc(var(--logo-h) * .3); align-items: flex-start; transition: gap .2s; } /* a short gap, about two typed spaces (client request, 2026-10-27) */ .hdr__emblem { width: auto; height: var(--logo-h); flex: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: height .2s; } .hdr__gear { fill: currentColor; fill-opacity: .14; } /* the emblem's gears turn slowly and stay meshed (12 and 10 teeth: the small one 1.2x faster, the other way); hovering the logo spools them up (main.js) */ .hdr__spin { transform-box: view-box; } .hdr__spin--big { animation: gear-cw 12s linear infinite; } .hdr__spin--small { animation: gear-ccw 10s linear infinite; } @keyframes gear-cw { to { rotate: 360deg; } } @keyframes gear-ccw { to { rotate: -360deg; } } /* hovering the logo: the emblem alone grows (with a little overshoot), spins up (main.js) and throws amber sparks from the point where the teeth meet, along the big gear's direction of travel (client request, 2026-10-27) */ .hdr__emblem { transition: height .2s, transform .45s cubic-bezier(.34, 1.56, .64, 1); } .hdr__brand:is(:hover, :focus-visible) .hdr__emblem { transform: scale(1.35); } .hdr__spark { stroke: var(--rt-accent); stroke-width: 1.8; opacity: 0; } .hdr__spark--hot { stroke: color-mix(in srgb, var(--rt-accent) 45%, var(--rt-white)); stroke-width: 1.4; } .hdr__flash { fill: color-mix(in srgb, var(--rt-accent) 55%, var(--rt-white)); stroke: none; opacity: 0; } .hdr__brand:is(:hover, :focus-visible) .hdr__spark { animation: hdr-spark var(--t) var(--d) cubic-bezier(.2, .6, .4, 1) infinite; } .hdr__brand:is(:hover, :focus-visible) .hdr__flash { animation: hdr-flash .32s ease-out infinite; } @keyframes hdr-flash { 0% { opacity: .95; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.8); } } @keyframes hdr-spark { 0% { opacity: 0; transform: rotate(var(--a)) translateX(1px) scaleX(.6); } 12% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--l)) scaleX(.25); } } @media (prefers-reduced-motion: reduce) { .hdr__spin, .hdr__brand:is(:hover, :focus-visible) :is(.hdr__spark, .hdr__flash) { animation: none; } .hdr__emblem { transition: none; } } .hdr__word { display: flex; flex-direction: column; } .hdr__tagline { margin-top: .45em; font-size: calc(var(--logo-h) * .28); font-weight: 700; line-height: 1; letter-spacing: .28em; margin-right: -.28em; text-transform: uppercase; white-space: nowrap; opacity: .75; transition: font-size .2s; } /* "Bangladesh Limited", small under the wordmark and spaced to its width (client request, 2026-10-08) */ .hdr__logo { width: auto; height: var(--logo-h); filter: brightness(0) invert(1); transition: height .2s, filter .2s; } .hdr.is-scrolled .hdr__brand { --logo-h: 24px; } .hdr__actions { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; margin-left: auto; } .hdr__icon { display: grid; place-items: center; width: 44px; height: 44px; } /* burger: the ☰ in a 44px circle */ .hdr__burger { gap: 0; border: 1px solid rgb(255 255 255 / .3); border-radius: 999px; transition: border-color .2s; } .hdr__burger span { grid-area: 1 / 1; width: 16px; height: 2px; border-radius: 1px; background: currentColor; transition: transform .35s var(--ease), opacity .2s; } .hdr__burger span:first-child { transform: translateY(-5px); } .hdr__burger span:last-child { transform: translateY(5px); } .nav-open .hdr__burger span:first-child { transform: rotate(45deg); } .nav-open .hdr__burger span:nth-child(2) { opacity: 0; } .nav-open .hdr__burger span:last-child { transform: rotate(-45deg); } .nav-caret { width: 9px; height: 6px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; opacity: .6; transition: transform .18s; } .menu a { transition: color .12s; } .menu .sub-menu { list-style: none; } .hdr__meta { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: .8125rem; line-height: 1.5; } .hdr__meta span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; overflow-wrap: anywhere; } .hdr__meta .ic { width: 15px; height: 15px; opacity: .8; } .hdr__meta a:hover { text-decoration: underline; text-underline-offset: 3px; } /* top rail: "24/7 Emergency Support" | phone · email (their text slides out on hover) */ .hdr__top { position: absolute; top: 0; left: 0; right: 0; height: var(--meta); border-bottom: 1px solid rgb(255 255 255 / .13); transition: opacity .2s, visibility .2s; } .hdr.is-scrolled .hdr__top, body:not(.rt-dark-top) .hdr__top { opacity: 0; visibility: hidden; } .hdr__top-in { display: flex; justify-content: flex-end; align-items: center; height: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: rgb(255 255 255 / .72); } .ebar__hot { display: flex; align-items: center; gap: 9px; padding-right: 16px; color: var(--rt-white); } .ebar__hot .ic { width: 16px; height: 16px; stroke-width: 2; color: var(--rt-accent); } .ebar__div { width: 1px; height: 14px; flex: none; background: rgb(255 255 255 / .22); } .ebar__link { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; letter-spacing: .12em; transition: color .15s; } .ebar__link[href^="mailto"] { text-transform: none; letter-spacing: .06em; } .ebar__link .ic { width: 14px; height: 14px; stroke-width: 1.9; } .ebar__txt { display: inline-block; max-width: 0; overflow: hidden; opacity: 0; transition: max-width .28s cubic-bezier(.22, 1, .36, 1), opacity .18s, margin-left .28s cubic-bezier(.22, 1, .36, 1); } @media (hover: hover) { .ebar__link:hover { color: var(--rt-accent); } .ebar__link:hover .ebar__txt { max-width: 260px; opacity: 1; margin-left: 9px; } } .ebar__link:focus-visible .ebar__txt { max-width: 260px; opacity: 1; margin-left: 9px; } @media (prefers-reduced-motion: reduce) { .ebar__txt { transition: none; } } @media (max-width: 640px) { .hdr__top-in { justify-content: center; } } /* Desktop navigation */ @media (min-width: 1041px) { .hdr__bar { position: static; } .hdr__burger, .hdr__actions { display: none; } .hdr__nav { position: static; display: flex; align-items: center; margin-left: auto; } .hdr__meta { display: none; } /* the top rail carries the contacts on desktop; this copy is for the mobile panel */ .menu { display: flex; align-items: center; gap: 2px; } .menu > li { position: relative; } .menu > li > a { display: flex; align-items: center; gap: 6px; padding: 10px 7px; font-size: 15px; font-weight: 600; line-height: 1.65; white-space: nowrap; color: rgb(255 255 255 / .86); } .menu > li > a:hover, .menu > li:focus-within > a, .menu > li.is-open > a { color: var(--rt-accent); } .menu > .current-menu-item > a, .menu > .current-menu-ancestor > a, .menu > .current-menu-parent > a { color: var(--hdr-steel); } .menu > li:hover > a .nav-caret, .menu > li:focus-within > a .nav-caret, .menu > li.is-open > a .nav-caret { transform: rotate(180deg); } .hdr.is-scrolled .menu > li > a { padding: 8px 13px; font-size: 13px; } .hdr.is-scrolled .nav-caret { display: none; } .menu .sub-menu { position: absolute; top: calc(100% + 8px); left: -24px; min-width: 320px; padding: 10px 0; background: var(--rt-white); color: var(--rt-text); border: 1px solid var(--rt-border); border-radius: var(--r); box-shadow: 0 16px 40px color-mix(in srgb, var(--rt-deep) 8%, transparent); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .25s var(--ease), transform .3s var(--ease), visibility .25s; } .menu .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } .menu > li:hover > .sub-menu, .menu > li:focus-within > .sub-menu, .menu > li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; } .menu .sub-menu a { display: block; padding: 10px 24px; font-size: .875rem; font-weight: 500; } .menu .sub-menu a:hover, .menu .sub-menu .current-menu-item > a { color: var(--rt-primary); background: var(--rt-surface); } } @media (min-width: 1201px) { .menu > li > a { padding-inline: 10px; } } /* Mobile / tablet navigation, after turbointernacional.com (client request, 2026-10-11): the header stays navy and a white panel drops from under it (no duplicated markup); each item is its label (with the caret) and, for submenus, a +/− toggle on the right; submenus open in place as one flat list under small uppercase headings. The page behind is not dimmed. */ @media (max-width: 1040.98px) { :root { --hdr: 64px; } .hdr__brand { --logo-h: 24px; } .hdr__nav { position: absolute; top: 100%; left: 0; right: 0; z-index: 1; display: none; flex-direction: column; max-height: calc(100dvh - var(--hdr) - var(--meta)); overflow-y: auto; overscroll-behavior: contain; padding: 10px var(--gutter) 20px; background: var(--rt-white); color: var(--rt-text); border-bottom: 1px solid var(--rt-border); } .nav-open .hdr__nav { display: flex; } .nav-open .hdr { background: var(--rt-deep); } .nav-open .hdr::before { opacity: 0; } .nav-open body { overflow: hidden; } .hdr__scrim { position: fixed; inset: 0; z-index: 0; display: none; } .nav-open .hdr__scrim { display: block; } /* clear: a tap beside the panel closes it */ .menu > li { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; } .menu > li > a { grid-column: 1; display: flex; align-items: center; gap: 6px; padding: 13px 6px; font-size: 15px; font-weight: 600; line-height: 1.65; color: var(--rt-primary); transition: background-color .12s, color .12s; } .menu > li > a:only-child { grid-column: 1 / -1; } .menu > .current-menu-item > a, .menu > .current-menu-ancestor > a { background: var(--rt-surface); box-shadow: inset 3px 0 0 var(--rt-accent); } .menu > li > a:active { background: var(--rt-accent); color: var(--rt-deep); box-shadow: none; } @media (hover: hover) { .menu > li > a:hover { background: var(--rt-accent); color: var(--rt-deep); box-shadow: none; } } .menu > li > .sub-menu, .menu > li > .mega { grid-column: 1 / -1; } .menu .sub-menu { display: none; padding-left: 14px; } .menu li.is-open > .sub-menu { display: block; } .menu .sub-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 20px; font-size: 14px; font-weight: 600; color: var(--rt-text); } .nav-plus { position: relative; grid-column: 2; display: grid; place-items: center; width: 44px; height: 44px; color: var(--rt-primary); } .nav-plus::before, .nav-plus::after { content: ""; grid-area: 1 / 1; width: 12px; height: 1.5px; background: currentColor; transition: transform .25s var(--ease); } .nav-plus::after { transform: rotate(90deg); } .is-open > .nav-plus::after { transform: rotate(0deg); } /* + turns to − */ .hdr__meta { flex-direction: column; gap: 8px; margin-top: 10px; padding: 14px 6px 0; border-top: 1px solid var(--rt-border); color: var(--muted-text); } .hdr__meta .ic { color: var(--rt-accent); } } @media (min-width: 1041px) { .nav-plus { display: none; } } @media (max-width: 559.98px) { .hdr__brand { --logo-h: 22px; } } /* Phones: call / quote bar pinned to the foot of the screen, after turbointernacional.com (client request, 2026-10-11); the page keeps 52px clear under it. Under the header, so the open menu covers it. */ .mbar { display: none; } @media (max-width: 640px) { body { padding-bottom: 52px; } .mbar { position: fixed; inset: auto 0 0; z-index: 45; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); box-shadow: 0 -2px 14px color-mix(in srgb, var(--rt-deep) 22%, transparent); } .mbar a { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-align: center; text-transform: uppercase; transition: background-color .12s, color .12s; } .mbar__call { background: var(--rt-accent); color: var(--rt-deep); } .mbar__quote { background: var(--rt-primary); color: var(--rt-white); border-left: 1px solid var(--rt-line-dark); } .mbar__call:active { background: var(--rt-primary); color: var(--rt-accent); } .mbar__quote:active { background: var(--rt-accent); color: var(--rt-deep); } } /* ---------- Services mega menu ---------- Desktop: one full-width white sheet unfolds from under the header (its height animates, Apple's nav curve .32/.72/0/1; open .42s, close .32s). Group tabs on the right (client request), the active group's links on the left; switching groups morphs the height and crossfades, links rise in with a short stagger. The page behind dims and blurs. Mobile: the same markup is a nested accordion inside the off-canvas menu. */ .mega__group > .ic { width: 16px; height: 16px; transition: transform .3s var(--ease), color .25s var(--ease); } .mega__links a { display: block; transition: color .2s var(--ease), transform .25s var(--ease); } .mega-scrim { display: none; } @media (min-width: 1041px) { .menu > li.has-mega { position: static; } .mega { --g: 280px; position: absolute; top: 100%; left: 0; right: 0; z-index: 2; height: 0; overflow: hidden; visibility: hidden; background: var(--rt-white); color: var(--rt-text); border-top: 1px solid var(--rt-border); box-shadow: 0 18px 40px color-mix(in srgb, var(--rt-deep) 10%, transparent); transition: height .32s cubic-bezier(.32, .72, 0, 1), visibility 0s .32s; } .has-mega.is-open > .mega { height: var(--mega-h, auto); visibility: visible; transition: height .42s cubic-bezier(.32, .72, 0, 1), visibility 0s; } .mega__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--g); column-gap: 48px; align-content: start; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding: 28px var(--gutter) 36px; } .mega__grp { display: contents; } .mega__group { grid-column: 2; position: relative; display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 13px 16px; border-radius: var(--r); text-align: right; font-size: .9375rem; font-weight: 600; color: var(--rt-text); transition: background-color .25s var(--ease), color .25s var(--ease); } .mega__group::before { content: ""; position: absolute; right: 0; top: 10px; bottom: 10px; width: 3px; background: var(--rt-accent); transform: scaleY(0); transition: transform .3s var(--ease); } .mega__group > .ic { margin-right: auto; color: var(--rt-muted); rotate: 180deg; } /* chevron points at the links */ .mega__grp.is-active .mega__group { background: var(--rt-surface); color: var(--rt-primary); } .mega__grp.is-active .mega__group::before { transform: scaleY(1); } .mega__grp.is-active .mega__group > .ic { color: var(--rt-accent-ink); transform: translateX(3px); } /* rotated, so this moves it left */ /* the tab's icon tile (navy with an amber icon when active or hovered) and its number of pages (2026-10-24) */ .mega__group { justify-content: flex-start; padding-block: 9px; } .mega__gi { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 1px solid var(--rt-border); border-radius: 9px; background: var(--rt-white); color: var(--rt-primary); transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .3s var(--ease); } .mega__gi .ic { width: 17px; height: 17px; } .mega__grp.is-active .mega__gi, .mega__group:hover .mega__gi { background: var(--rt-primary); border-color: var(--rt-primary); color: var(--rt-accent); } .mega__grp.is-active .mega__gi { transform: translateY(-1px); } .mega__gn { font-size: 11px; font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--rt-muted); transition: color .25s; } .mega__grp.is-active .mega__gn { color: var(--rt-accent-ink); } .mega__group:hover { color: var(--rt-primary); } /* Only the active panel is in flow, so the sheet's height follows it */ .mega__panel { position: absolute; top: 28px; left: var(--gutter); right: calc(var(--gutter) + var(--g) + 48px); display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 48px; padding-right: 48px; border-right: 1px solid var(--rt-border); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s .2s; } .mega__grp.is-active .mega__panel { position: relative; top: auto; left: auto; right: auto; grid-column: 1; grid-row: 1 / span 20; opacity: 1; visibility: visible; transition: opacity .3s ease; } :is(.mega__links, .mtiles) li { opacity: 0; transform: translateY(12px); transition: opacity .18s ease, transform .18s ease; } .has-mega.is-open .mega__grp.is-active :is(.mega__links, .mtiles) li { opacity: 1; transform: none; transition: opacity .45s ease calc(.06s + var(--i) * .025s), transform .55s cubic-bezier(.32, .72, 0, 1) calc(.06s + var(--i) * .025s); } .mega__links a { position: relative; padding: 7px 0; font-size: .9375rem; color: var(--rt-text); } .mega__links a::before { content: ""; position: absolute; left: -14px; top: 50%; width: 8px; height: 1px; background: var(--rt-accent); opacity: 0; transition: opacity .2s var(--ease); } .mega__links a:hover, .mega__links a:focus-visible { color: var(--rt-primary); transform: translateX(6px); } .mega__links a:hover::before, .mega__links a:focus-visible::before { opacity: 1; } .mega-scrim { display: block; position: absolute; top: 100%; left: 0; right: 0; height: 100vh; z-index: 1; pointer-events: none; background: color-mix(in srgb, var(--rt-deep) 30%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; visibility: hidden; transition: opacity .32s ease, visibility 0s .32s; } .has-mega.is-open > .mega-scrim { opacity: 1; visibility: visible; transition: opacity .42s ease; } .menu > li.has-mega.is-open > a::after { transform: scaleX(1); } } @media (max-width: 1040.98px) { .mega { display: none; padding-left: 14px; } .has-mega.is-open > .mega { display: block; } .mega__group { display: block; width: 100%; padding: 12px 18px 4px; font-size: 11px; font-weight: 600; line-height: 1.65; letter-spacing: .1em; text-align: left; text-transform: uppercase; color: var(--rt-muted); } .mega__group { pointer-events: none; color: var(--rt-primary); font-weight: 700; } /* on phones every group is open: its name is a heading */ .mega__group .ic, .mega__gi, .mega__gn, .mega__grp:only-child > .mega__group { display: none; } /* Company: one group, its name would repeat the menu item */ .mega__links a { display: flex; align-items: center; min-height: 44px; padding: 0 20px; font-size: 14px; font-weight: 600; color: var(--rt-text); transition: background-color .12s, color .12s, box-shadow .12s; } .mega__links a:active { background: var(--rt-surface); color: var(--rt-primary); box-shadow: inset 3px 0 0 var(--rt-accent); } @media (hover: hover) { .mega__links a:hover { background: var(--rt-surface); color: var(--rt-primary); box-shadow: inset 3px 0 0 var(--rt-accent); } } } /* a menu entry without a page (About us, 2026-10-27): the tile as a still label */ .mtile--static { cursor: default; } @media (min-width: 1041px) { .mtile--static:hover { transform: none; box-shadow: none; } .mtile--static:hover .mtile__img img { transform: scale(1.06); } } @media (max-width: 1040.98px) { .mtile--static:hover, .mtile--static:active { background: none; box-shadow: none; color: var(--rt-text); } } /* Panel cards and tiles (Projects panel, 2026-10-24; Services and Company after it the same day): a titled section is headed by its photo card (navy veil, amber tag, Montserrat title, arrow disc) with its links under it in two columns; an untitled list shows each page as a photo tile (number, title, arrow disc), three or four to a row, a lone page as one wide tile. Cards and tiles rise in with the links; on hover the photo eases in and the tile lifts. */ :is(.mproj__img, .mtile__img) img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 1041px) { .mega__panel:has(.mproj) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; } .mega__sec--tiles { grid-column: 1 / -1; } .mtiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } /* a short last row sits centred */ .mtiles li { flex: 0 0 calc((100% - (var(--c, 3) - 1) * 12px) / var(--c, 3)); } .mtile { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-height: 124px; padding: 16px 62px 16px 18px; overflow: hidden; border-radius: var(--r); background: var(--rt-deep); color: var(--rt-white); transition: transform .45s var(--ease), box-shadow .45s var(--ease); } .mtiles li:only-child .mtile { min-height: 170px; padding: 24px 80px 24px 26px; } .mtile__img { position: absolute; inset: 0; z-index: -1; } .mtile__img img { transform: scale(1.06); transition: transform 1s var(--ease); } .mtile__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(15deg, color-mix(in srgb, var(--rt-deep) 94%, transparent) 25%, color-mix(in srgb, var(--rt-deep) 40%, transparent)); } .mtile__no { font-size: 11px; font-weight: 700; letter-spacing: .14em; font-variant-numeric: tabular-nums; color: var(--rt-accent); } .mtile__t { margin-top: 6px; font-family: "Montserrat", var(--font); font-size: 13.5px; font-weight: 700; line-height: 1.3; text-transform: uppercase; } .mtiles li:only-child .mtile__t { font-size: 18px; } .mtile__go { position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid color-mix(in srgb, var(--rt-white) 35%, transparent); border-radius: 50%; transition: background-color .3s, border-color .3s, color .3s, transform .4s var(--ease); } .mtile__go .ic { width: 15px; height: 15px; } .mtile:is(:hover, :focus-visible) { transform: translateY(-4px); box-shadow: 0 22px 40px -22px color-mix(in srgb, var(--rt-deep) 70%, transparent); } .mtile:is(:hover, :focus-visible) .mtile__img img { transform: none; } .mtile:is(:hover, :focus-visible) .mtile__go { background: var(--rt-accent); border-color: var(--rt-accent); color: var(--rt-deep); transform: translateX(3px); } .mproj { position: relative; isolation: isolate; display: grid; align-content: end; min-height: 150px; margin-bottom: 14px; padding: 18px 70px 18px 22px; overflow: hidden; border-radius: var(--r); background: var(--rt-deep); color: var(--rt-white); opacity: 0; transform: translateY(14px); transition: opacity .18s ease, transform .18s ease, box-shadow .4s var(--ease); } .has-mega.is-open .mega__grp.is-active .mproj { opacity: 1; transform: none; transition: opacity .45s ease calc(.04s + var(--i) * .08s), transform .6s cubic-bezier(.32, .72, 0, 1) calc(.04s + var(--i) * .08s), box-shadow .4s var(--ease); } .mproj__img { position: absolute; inset: 0; z-index: -1; } .mproj__img img { transform: scale(1.06); transition: transform 1s var(--ease); } .mproj__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, color-mix(in srgb, var(--rt-deep) 92%, transparent) 30%, color-mix(in srgb, var(--rt-deep) 45%, transparent)); transition: opacity .4s; } .mproj__tag { display: flex; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rt-accent); } .mproj__tag b { font-weight: 500; color: color-mix(in srgb, var(--rt-white) 60%, transparent); } .mproj__t { margin-top: 6px; font-family: "Montserrat", var(--font); font-size: 17px; font-weight: 700; line-height: 1.25; text-transform: uppercase; } .mproj__go { position: absolute; right: 20px; bottom: 18px; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid color-mix(in srgb, var(--rt-white) 35%, transparent); border-radius: 50%; transition: background-color .3s, border-color .3s, color .3s, transform .4s var(--ease); } .mproj__go .ic { width: 16px; height: 16px; } .mproj:is(:hover, :focus-visible) { box-shadow: 0 22px 40px -22px color-mix(in srgb, var(--rt-deep) 70%, transparent); } .mproj:is(:hover, :focus-visible) .mproj__img img { transform: none; } .mproj:is(:hover, :focus-visible) .mproj__go { background: var(--rt-accent); border-color: var(--rt-accent); color: var(--rt-deep); transform: translateX(4px); } /* a card's links: a two-column grid of one-line rows (icon tile, short label, arrow), each on a hairline; on hover the row tints, an amber bar grows on its left, the tile turns navy with an amber icon and the arrow slides in */ .mega__sec:has(> .mproj) { container-type: inline-size; } .mega__sec:has(> .mproj) .mega__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; } .mega__sec:has(> .mproj) .mega__links--one { grid-template-columns: minmax(0, 1fr); } /* a short list (Workshop Capabilities, Field Service): one column */ @container (max-width: 439px) { .mega__sec:has(> .mproj) .mega__links { grid-template-columns: minmax(0, 1fr); } } /* narrower desktops: one column, no label cut */ .mega__links .mlink { display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 4px; border-bottom: 1px solid var(--rt-border); border-radius: 0; font-size: .875rem; font-weight: 500; white-space: nowrap; transition: background-color .25s var(--ease), color .2s, padding .35s var(--ease); } .mega__links .mlink::before { left: 0; top: 8px; bottom: 8px; width: 2px; height: auto; transform: scaleY(0); opacity: 1; transition: transform .3s var(--ease); } .mega__links .mlink:is(:hover, :focus-visible) { transform: none; padding-left: 12px; background: var(--rt-surface); } .mega__links .mlink:is(:hover, :focus-visible)::before { transform: scaleY(1); } .mlink__ic { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1px solid var(--rt-border); border-radius: 8px; background: var(--rt-white); color: var(--rt-primary); transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); } .mlink__ic .ic { width: 15px; height: 15px; } .mlink__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .mlink__go { display: flex; flex: none; color: var(--rt-accent-ink); opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .35s var(--ease); } .mlink__go .ic { width: 14px; height: 14px; } .mlink:is(:hover, :focus-visible) .mlink__ic { background: var(--rt-primary); border-color: var(--rt-primary); color: var(--rt-accent); } .mlink:is(:hover, :focus-visible) .mlink__go { opacity: 1; transform: none; } } @media (max-width: 1040.98px) { /* phones: a section card is its small heading (Projects: the page as a plain row, its services left out); tiles are rows */ .mproj { display: block; padding: 12px 18px 4px; font-size: 11px; font-weight: 600; line-height: 1.65; letter-spacing: .1em; text-transform: uppercase; color: var(--rt-muted); } .mega-projects .mproj { display: flex; align-items: center; min-height: 44px; padding: 0 20px; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--rt-text); } .mproj__img, .mproj__tag, .mproj__go, .mega-projects .mega__links, .mtile__img, .mtile__no, .mtile__go, .mlink__ic, .mlink__go { display: none; } .mtile { display: flex; align-items: center; min-height: 44px; padding: 0 20px; font-size: 14px; font-weight: 600; color: var(--rt-text); transition: background-color .12s, color .12s, box-shadow .12s; } .mtile:active { background: var(--rt-surface); color: var(--rt-primary); box-shadow: inset 3px 0 0 var(--rt-accent); } @media (hover: hover) { .mtile:hover { background: var(--rt-surface); color: var(--rt-primary); box-shadow: inset 3px 0 0 var(--rt-accent); } } } @media (prefers-reduced-motion: reduce) { .mega, .mega__panel, .mega__links li, .mtiles li, .mega-scrim, .mproj, .mtile { transition-duration: .01ms !important; transition-delay: 0s !important; } } /* ---------- Elevated image tiles (Home, Facilities): contact shadow + soft ambient lift; deeper on navy ---------- */ :root { --img-elev: 0 2px 6px color-mix(in srgb, var(--rt-deep) 12%, transparent), 0 18px 36px -10px color-mix(in srgb, var(--rt-deep) 26%, transparent), 0 46px 84px -28px color-mix(in srgb, var(--rt-deep) 36%, transparent); --img-elev-dark: 0 2px 6px rgb(0 0 0 / .3), 0 18px 40px -10px rgb(0 0 0 / .5), 0 40px 80px -28px rgb(0 0 0 / .6); } .home #main .img-frame, .infra .img-frame { box-shadow: var(--img-elev); } /* Home: every image square-cornered, as on turbointernacional.com (client request, 2026-10-16) */ .home #main { --r-img: 0; } .home #main .svc__fig, .home #main .ccard { border-radius: 0; } .home #main .section--dark .img-frame, .infra .section--dark .img-frame, .infra .igal__item { box-shadow: var(--img-elev-dark); } .home #main .svc__fig { box-shadow: 0 2px 4px color-mix(in srgb, var(--rt-deep) 8%, transparent), 0 8px 18px -6px color-mix(in srgb, var(--rt-deep) 18%, transparent); } /* small phone thumbnails */ .proj__media { filter: drop-shadow(0 18px 26px color-mix(in srgb, var(--rt-deep) 28%, transparent)) drop-shadow(0 2px 4px color-mix(in srgb, var(--rt-deep) 12%, transparent)); } /* slanted photo: the shadow follows the cut */ /* ---------- Pencil sketches behind light home sections (decorative) ---------- */ .sk-defs { position: absolute; width: 0; height: 0; overflow: hidden; } .sk-g { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: url(#sk-pencil); } .sk-pass { stroke-width: 1; opacity: .6; } .sk-pass--3 { stroke-width: .7; opacity: .45; } .sk-con { stroke-width: .8; stroke-dasharray: 16 5 2 5; opacity: .85; } .has-sketch { position: relative; overflow: clip; } .has-sketch > :not(.sketch) { position: relative; z-index: 1; } /* steel blue graphite, blended into the paper and fading out towards its own edges */ .sketch { position: absolute; z-index: 0; pointer-events: none; color: var(--rt-primary-light); opacity: .34; mix-blend-mode: multiply; width: var(--sk-w); aspect-ratio: 1; -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 100%); mask-image: radial-gradient(closest-side, #000 35%, transparent 100%); } .sketch--adv { --sk-w: clamp(280px, 36vw, 540px); left: -9%; bottom: -12%; } .sketch--svc { --sk-w: clamp(260px, 32vw, 500px); left: -9%; bottom: -10%; rotate: -12deg; } .sketch--proj { --sk-w: clamp(260px, 34vw, 520px); right: -7%; top: -6%; } .sketch--cred { --sk-w: clamp(320px, 42vw, 640px); right: -4%; top: 1%; aspect-ratio: 620 / 260; rotate: -4deg; } @media (max-width: 767.98px) { .sketch { opacity: .26; } } /* ---------- Hero (home), after turbointernacional.com in RotoTech colours ---------- Navy ground, the photos at 60% under a 100° navy shade (crossfading slowly like their background video), Montserrat ExtraBold uppercase headline (white to light steel, second line amber), a short amber seam, intro, two pill buttons, and the numbers in a ruled column on the right; a mouse-wheel scroll cue. */ .hero { position: relative; display: flex; align-items: center; overflow: hidden; min-height: 100svh; background: var(--rt-primary); color: var(--rt-white); } .hero__media { position: absolute; inset: 0; opacity: .6; } .hero__img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75); } /* Home hero film (2026-10-28): six shots cut like footage. Each shot runs its own camera move (--o origin, --s0/--s1 scale, --x/--y drift, set per shot in front-page.php) for its --shot time plus the dissolve; the next shot dissolves in on top while the last keeps moving underneath, so the picture never stops. Film grain and a vignette sit over it, live sparks fly from the grinder in shot 01, and a reel along the foot fills shot by shot. main.js cuts every --shot seconds. */ .hero { --fade: 1.4s; } .hero__media--film { opacity: .8; animation: hero-open 2s cubic-bezier(.2, .6, .2, 1) both; } .hero__slide { position: absolute; inset: 0; opacity: 0; overflow: hidden; } .hero__slide.is-prev { opacity: 1; } .hero__slide.is-active { z-index: 1; opacity: 1; transition: opacity var(--fade) cubic-bezier(.45, 0, .55, 1); } .hero__shot { position: absolute; inset: 0; transform-origin: var(--o); } .hero__shot .hero__img { filter: saturate(.86) contrast(1.05); } .hero__slide:is(.is-active, .is-prev) .hero__shot { animation: hero-cam calc(var(--shot) + var(--fade)) cubic-bezier(.33, 0, .67, 1) both; will-change: transform; } @keyframes hero-cam { from { transform: translate(var(--x0), var(--y0)) scale(var(--s0)); } to { transform: translate(var(--x1), var(--y1)) scale(var(--s1)); } } @keyframes hero-open { from { opacity: .15; } } /* sparks: drawn by main.js on the canvas over the shade (so they glow), anchored to the marker in shot 01 */ .hero__fx { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; } .hero__sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* grain jitters about 8 times a second; the vignette pulls the eye in and seats the header and the reel */ .hero__film { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(120% 90% at 46% 48%, transparent 52%, rgb(4 14 24 / .5)); } .hero__film::before { content: ""; position: absolute; inset: -10%; opacity: .14; mix-blend-mode: overlay; background: 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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px; animation: hero-grain .75s steps(1) infinite; } @keyframes hero-grain { 0% { transform: none; } 17% { transform: translate(-5%, 3%); } 33% { transform: translate(4%, -6%); } 50% { transform: translate(-2%, 6%); } 67% { transform: translate(6%, 1%); } 83% { transform: translate(-6%, -4%); } } /* the reel: shot number over six segments, the running one fills in amber over its --shot */ .hero__reel { position: absolute; z-index: 4; left: max(var(--gutter), calc((100% - var(--max)) / 2)); bottom: 34px; display: flex; align-items: center; gap: 18px; color: rgb(255 255 255 / .72); } .hero__count { font-family: "Montserrat", var(--font); font-size: 12px; font-weight: 600; letter-spacing: .14em; font-variant-numeric: tabular-nums; } .hero__count b { font-weight: 800; color: var(--rt-white); } .hero__segs { display: flex; gap: 6px; } .hero__seg { position: relative; width: 38px; height: 16px; cursor: pointer; } .hero__seg i { position: absolute; inset: 7px 0; overflow: hidden; background: rgb(255 255 255 / .26); } .hero__seg i::after { content: ""; position: absolute; inset: 0; background: var(--rt-accent); transform: scaleX(0); transform-origin: left; } .hero__seg.is-done i::after { transform: none; background: rgb(255 255 255 / .7); } .hero__seg.is-on i::after { animation: hero-seg var(--shot) linear both; } .hero__seg:hover i { background: rgb(255 255 255 / .5); } @keyframes hero-seg { to { transform: none; } } @media (max-width: 640px) { .hero__reel { display: none; } } /* the phone's call bar sits over the hero's foot */ .hero__shade { position: absolute; inset: 0; background: linear-gradient(100deg, color-mix(in srgb, var(--rt-primary) 62.4%, transparent) 30%, color-mix(in srgb, var(--rt-primary) 56%, transparent) 75%, color-mix(in srgb, var(--rt-primary) 52%, transparent)); } .hero__wrap { position: relative; z-index: 3; width: 100%; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 64px; align-items: center; padding-top: calc(var(--hdr) + var(--meta) + 34px); padding-bottom: 110px; } .hero__title { margin-bottom: 24px; font-family: "Montserrat", var(--font); font-size: 54px; font-weight: 800; line-height: 1.08; letter-spacing: 0; text-transform: uppercase; text-wrap: initial; color: var(--rt-white); background: linear-gradient(90deg, var(--rt-white) 0%, var(--hdr-steel) 72%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero__tag { margin-bottom: 22px; font-size: 13px; font-weight: 600; line-height: 1.65; letter-spacing: .14em; text-transform: uppercase; color: var(--rt-accent); } .hero__title { max-width: 480px; } /* stacks word by word like the reference's headline block */ /* Short page hero, after turbointernacional.com/contact: the photo stays fixed behind the band (clip-path keeps it inside), a ruled breadcrumb whose line fades out from an amber centre, then tag, 40px title, seam and intro. */ .hero--sub { min-height: 0; clip-path: inset(0); } .hero--sub .hero__media { position: fixed; } .hero--sub .hero__shade { background: linear-gradient(100deg, color-mix(in srgb, var(--rt-primary) 94%, transparent) 25%, color-mix(in srgb, var(--rt-primary) 65%, transparent) 80%); } .hero--sub .hero__wrap { display: block; padding-top: calc(var(--hdr) + var(--meta) + 30px); padding-bottom: 70px; } .hero__crumbs { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; font-size: 11px; font-weight: 500; line-height: 1.65; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--rt-white) 91%, var(--rt-primary-light)); } /* the rule carries an amber spark across every 19s and fades out to the right, as on the reference */ .hero__crumbs::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--rt-accent) 50%, transparent) no-repeat, rgb(242 246 251 / .3); background-size: 180px 100%, 100% 100%; -webkit-mask-image: linear-gradient(90deg, #000, rgb(0 0 0 / .22) 74%, transparent); mask-image: linear-gradient(90deg, #000, rgb(0 0 0 / .22) 74%, transparent); animation: crumb-spark 19s linear infinite; } @keyframes crumb-spark { from { background-position: -180px 0, 0 0; } to { background-position: calc(100% + 180px) 0, 0 0; } } @media (prefers-reduced-motion: reduce) { .hero__crumbs::after { animation: none; } } .hero__sep::before { content: "›"; color: rgb(242 246 251 / .5); } .hero__here { font-weight: 400; color: color-mix(in srgb, var(--rt-white) 70%, var(--rt-primary-light)); } .hero__crumbs-txt { display: flex; align-items: baseline; gap: 10px; } .hero__crumbs a { color: var(--rt-white); } .hero__crumbs a:hover { color: var(--rt-accent); } .hero--sub .hero__tag { margin-bottom: 16px; } .hero--sub .hero__title { max-width: 820px; margin-bottom: 18px; font-size: 40px; } .hero--sub .hero__seam { margin-bottom: 18px; } .hero--sub .hero__lead { max-width: 640px; } .hero--sub .hero__wrap > :last-child { margin-bottom: 0; } @media (max-width: 640px) { .hero--sub .hero__title { font-size: 32px; } } .hero__alt { color: var(--rt-accent); -webkit-text-fill-color: var(--rt-accent); } .hero__seam { width: 64px; height: 6px; margin-bottom: 24px; border-radius: 3px; background: var(--rt-accent); } .hero__lead { max-width: 540px; margin-bottom: 34px; font-size: 17px; line-height: 1.65; color: color-mix(in srgb, var(--rt-white) 91%, var(--rt-primary-light)); } .hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; } .pill { display: inline-block; padding: 14px 26px; border: 1px solid var(--rt-accent); border-radius: 999px; background: var(--rt-accent); color: var(--rt-deep); font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s; } .pill--outline { background: transparent; border-color: var(--hdr-steel); color: var(--rt-white); } /* Button states after turbointernacional.com, in RotoTech colours (client request, 2026-10-17): the main pill is amber; hovered on a light ground it turns navy, on a dark ground (heroes, photo bands, navy sections) an amber outline; pressed it is navy with amber text, so the press ripple glows amber. Outline pills: amber on hover; pressed, navy. */ @media (hover: hover) { .pill:hover { background: var(--rt-primary); color: var(--rt-accent); border-color: var(--rt-primary); } :is(.hero, .phero, .thero, .nphoto, .sdark, .section--dark, .cta, .ftr) .pill:not(.pill--outline):hover { background: transparent; color: var(--rt-accent); border-color: var(--rt-accent); } .pill--outline:hover { background: transparent; border-color: var(--rt-accent); color: var(--rt-accent); } } .pill:focus-visible { outline: 2px solid var(--rt-accent); outline-offset: 3px; } /* Press ripple (main.js; after turbointernacional.com, client request 2026-10-17): a soft disc of the text colour grows from the press point, clipped to the button and under its label */ :is(.pill, .btn, .stabs__t, .qa > summary) { isolation: isolate; } .rip { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; } .rip > i { position: absolute; top: 0; left: 0; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, currentColor max(calc(100% - 70px), 65%), transparent 100%); transition: opacity .375s linear; } .rip > i.on { opacity: .25; transition-duration: .105s; } .hero__side { display: flex; flex-direction: column; gap: 28px; padding-left: 44px; border-left: 1px solid rgb(242 246 251 / .65); } .hero__stats { display: flex; flex-direction: column; gap: 28px; } .hero__dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--rt-accent); vertical-align: middle; } .hero__stat { display: flex; flex-direction: column-reverse; } .hero__stat dd { font-family: "Montserrat", var(--font); font-size: 40px; font-weight: 800; line-height: 1; color: var(--rt-white); } .hero__stat dt { margin-top: 6px; font-size: 11px; font-weight: 600; line-height: 1.65; letter-spacing: .12em; text-transform: uppercase; color: var(--rt-white); } /* scroll cue: a mouse whose wheel slides down, and a chevron that nudges (2.1s loop) */ .hero__cue { position: absolute; left: 50%; bottom: 26px; translate: -50% 0; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 9px; pointer-events: none; color: rgb(255 255 255 / .72); } .hero__mouse { position: relative; width: 26px; height: 42px; border: 2px solid; border-radius: 999px; } .hero__wheel { position: absolute; left: 50%; top: 7px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: currentColor; animation: hero-cue-wheel 2.1s cubic-bezier(.4, 0, .2, 1) infinite; } .hero__chev { width: 16px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: hero-cue-chev 2.1s cubic-bezier(.4, 0, .2, 1) infinite; } @keyframes hero-cue-wheel { 0%, 8% { transform: translateY(0); opacity: 0; } 22% { opacity: 1; } 62%, 100% { transform: translateY(15px); opacity: 0; } } @keyframes hero-cue-chev { 0%, 28% { transform: translateY(0); opacity: .5; } 55% { transform: translateY(4px); opacity: 1; } 82%, 100% { transform: translateY(0); opacity: .5; } } @media (prefers-reduced-motion: reduce) { .hero__wheel, .hero__chev { animation: none; } .hero__wheel { opacity: .9; } } @media (max-width: 640px), (max-height: 700px) { .hero__cue { display: none; } } @media (max-width: 1040px) { .hero__wrap { grid-template-columns: minmax(0, 1fr); gap: 44px; } .hero__side { padding: 32px 0 0; border-left: 0; border-top: 1px solid rgb(242 246 251 / .65); } .hero__stats { flex-flow: row wrap; gap: 32px; } } @media (max-width: 640px) { .hero__title { font-size: 34px; } } .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; } .line > span { display: inline-block; } /* Ruler on every hero (client request, 2026-10-08), centred in the right gutter so it never touches the content */ .hero__scale { position: absolute; z-index: 2; right: calc(var(--gutter) / 2 - 7px); top: 18%; bottom: 50%; width: 14px; display: none; background: linear-gradient(rgba(255, 255, 255, .35) 0 0) 100% 0 / 1px 100% no-repeat, repeating-linear-gradient(180deg, rgba(255, 255, 255, .35) 0 1px, transparent 1px 12px) 100% 0 / 6px 100% no-repeat, repeating-linear-gradient(180deg, rgba(255, 255, 255, .5) 0 1px, transparent 1px 60px) 100% 0 / 14px 100% no-repeat; } @media (min-width: 1100px) { .hero__scale { display: block; } } .hero--sub .hero__scale, .phero .hero__scale, .thero .hero__scale { top: calc(var(--hdr) + var(--meta) + 30px); bottom: 48px; } /* short heroes: below the header to near the foot */ .num__s { color: var(--rt-accent-ink); } /* ---------- Advantage ---------- */ .adv__head .h1 { margin-top: 22px; max-width: 13ch; } .adv__items { display: grid; gap: 40px var(--col-gap); margin-top: clamp(32px, 4vw, 48px); } .adv__item { position: relative; padding-top: 28px; } .adv__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; color: var(--rt-primary-light); } .adv__item h3 { margin-bottom: 12px; } .adv__item p { color: var(--muted-text); max-width: 42ch; } @media (min-width: 700px) { .adv__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .adv__head { grid-column: 1 / span 5; align-self: start; position: sticky; top: 132px; } .adv__items { grid-column: 7 / -1; margin-top: 0; row-gap: 48px; } } /* ---------- Service index ---------- */ .svc__list { border-top: 1px solid var(--rt-border); counter-reset: svc; } .svc__row { position: relative; display: grid; gap: 20px; padding-block: clamp(20px, 2vw, 28px); border-bottom: 1px solid var(--rt-border); } .svc__row::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--rt-accent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); } .svc__row.is-active::before, .svc__row:hover::before { transform: scaleX(1); } .svc__fig { aspect-ratio: 4 / 3; } .svc__body { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: baseline; } .svc__body > :not(.idx) { grid-column: 2; } .svc__body .idx { grid-row: 1; } .svc__body h3 { transition: color .3s var(--ease); } .svc__body p { margin-top: 10px; color: var(--muted-text); max-width: 54ch; } .svc__x { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } /* the full intro is on the service page */ .svc__body .link { margin-top: 18px; justify-self: start; } .svc__row.is-active h3, .svc__row:hover h3 { color: var(--rt-primary); } .link--stretch::before { content: ""; position: absolute; inset: 0; z-index: 1; } .svc__stage { display: none; } /* Lens: a raised white tile that glides to the active row (scroll or pointer) and stretches to its height; the row inside it magnifies slightly while the photo stage changes beside it. */ .svc__rows { position: relative; } .svc__lens { position: absolute; z-index: 0; top: 0; left: -14px; right: -14px; height: 0; pointer-events: none; background: var(--rt-white); border-radius: 0; opacity: 0; /* square corners (client request, 2026-10-17) */ box-shadow: 0 18px 44px color-mix(in srgb, var(--rt-deep) 10%, transparent), 0 2px 6px color-mix(in srgb, var(--rt-deep) 6%, transparent); } .svc__lens::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; background: var(--rt-accent); } .svc__lens.is-ready { opacity: 1; transition: transform .6s cubic-bezier(.22, 1, .36, 1), height .6s cubic-bezier(.22, 1, .36, 1), opacity .3s; } .svc__row { z-index: 1; transition: border-color .35s var(--ease); } .svc__row::before { display: none; } .svc__row.is-active, .svc__row:has(+ .is-active) { border-bottom-color: transparent; } .svc__list:has(> .is-active:first-child) { border-top-color: transparent; } .svc__body { transform-origin: 0 50%; transition: transform .6s cubic-bezier(.22, 1, .36, 1); } @media (min-width: 1024px) { .svc__lens { left: -20px; right: -20px; } .svc__row.is-active .svc__body { transform: scale(1.025); } } @media (max-width: 1023.98px) { .svc__row { grid-template-columns: 96px minmax(0, 1fr); align-items: start; } .svc__fig { border-radius: var(--r); } .svc__body { grid-template-columns: minmax(0, 1fr); } .svc__body > :not(.idx) { grid-column: 1; } .svc__body .idx { margin-bottom: 4px; } } @media (min-width: 1024px) { .svc__index { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 96px); align-items: start; } .svc__fig { display: none; } .svc__body { grid-template-columns: 72px minmax(0, 1fr); } .svc__stage { display: block; position: sticky; top: 112px; aspect-ratio: 3 / 4; max-height: calc(100svh - 140px); } .svc__slide { position: absolute; inset: 0; z-index: 0; clip-path: inset(100% 0 0 0); } .svc__slide.is-prev { z-index: 1; clip-path: inset(0); } .svc__slide.is-active { z-index: 2; clip-path: inset(0); transition: clip-path .9s var(--ease); } .svc__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s var(--ease); } .svc__slide.is-active img { transform: none; } } /* ---------- Workshop, after turbointernacional.com's in-house workshop section (client request, 2026-10-11) ---------- on the service-page styles (.spad / .ssplit / .chev): photo with its place caption, text column, button; then the capabilities in TI's ruled cell grid (.cov). */ .ws { border-bottom: 1px solid var(--rt-border); } .ws__fig { margin: 0; } .ws__place { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rt-muted); } .ws__place span + span { color: var(--rt-accent-ink); } .cov { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 26px; margin-top: 64px; } .cov__cell { padding: 14px 0 13px; border-top: 1px solid var(--rt-border); } .cov__b { display: block; font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: .07em; text-transform: uppercase; color: var(--rt-primary); } .cov__f { display: block; margin-top: 5px; font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: .05em; text-transform: uppercase; color: var(--rt-muted); } @media (max-width: 1040px) { .cov { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin-top: 48px; } } /* ---------- Projects: two columns split by a hairline; each with a pale number, text, a slanted photo and its tag list ---------- */ .proj__head { display: grid; gap: 16px var(--col-gap); margin-bottom: clamp(32px, 4vw, 56px); } .proj__head .h1 { margin-top: 14px; max-width: 18ch; } .proj__head .lead { max-width: 46ch; } @media (min-width: 900px) { .proj__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; } .proj__head .lead { padding-left: clamp(24px, 3vw, 40px); border-left: 1px solid var(--rt-border); } } .proj__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px var(--col-gap); } .proj__item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-content: start; } .proj__item > * { min-width: 0; } .proj__no { font-size: clamp(3rem, 2.2rem + 2.4vw, 4.5rem); line-height: .9; color: color-mix(in srgb, var(--rt-primary-light) 32%, var(--rt-white)); margin-bottom: 14px; } .proj__text .h2 { margin: 14px 0 14px; max-width: 18ch; } .proj__desc { color: var(--muted-text); max-width: 46ch; } .proj__media { position: relative; min-height: 220px; } .proj__img { position: absolute; inset: 0; overflow: hidden; clip-path: polygon(26% 0, 100% 0, 100% 100%, 0 100%); -webkit-mask-image: linear-gradient(200deg, #000 58%, transparent 100%); mask-image: linear-gradient(200deg, #000 58%, transparent 100%); } .proj__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); } .proj__item:hover .proj__img img { transform: scale(1.04); } .proj__slash { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .proj__slash line { stroke: var(--rt-accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; } @media (min-width: 900px) { .proj__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; } /* both columns share the rows, so the tag lists start level */ .proj__item { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); grid-template-rows: subgrid; grid-row: span 2; row-gap: 28px; column-gap: 0; padding-right: clamp(24px, 3vw, 44px); } .proj__item + .proj__item { padding: 0 0 0 clamp(24px, 3vw, 44px); border-left: 1px solid var(--rt-border); } .proj__media { min-height: 0; margin-right: calc(-1 * clamp(0px, 1vw, 12px)); } .proj__item .tags { grid-column: 1 / -1; align-self: start; } } @media (max-width: 899.98px) { .proj__media { min-height: 0; aspect-ratio: 16 / 9; } } .proj__item h3 a { transition: color .25s var(--ease); } .proj__item h3 a:hover, .proj__item:has(.proj__media:hover) h3 a { color: var(--rt-primary-light); } .proj__go { margin-top: 18px; } .proj__go .arr { transition: transform .3s var(--ease); } .proj__go:hover .arr { transform: translateX(5px); } a.proj__media { display: block; } /* the services link to their sections on the project page: the row tints, the amber mark grows into a bar and an arrow slides in */ .tags--go li { padding: 0; } .tags--go a { position: relative; display: flex; flex: 1; align-items: center; gap: 10px; min-height: 48px; padding: 12px 0; transition: color .25s var(--ease), padding .35s var(--ease); } .tags--go li::before { transition: height .35s var(--ease), background-color .25s; } .tags--go a .ic { width: 15px; height: 15px; margin-left: auto; color: var(--rt-accent); opacity: 0; transform: translateX(-8px); transition: opacity .25s, transform .35s var(--ease); } .tags--go li:hover::before, .tags--go li:focus-within::before { height: 18px; } .tags--go a:is(:hover, :focus-visible) { padding-left: 4px; color: var(--rt-primary); } .tags--go a:is(:hover, :focus-visible) .ic { opacity: 1; transform: none; } /* "Have a Project in Mind?" (2026-10-29): a navy panel with a faint blueprint grid, an amber edge, a glass icon badge, the text and the amber pill */ .band { position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px 32px; margin-top: clamp(40px, 5vw, 64px); padding: clamp(26px, 3.4vw, 40px) clamp(22px, 3.6vw, 48px); overflow: hidden; border-radius: var(--r); background: radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--rt-primary-light) 85%, transparent), transparent 55%), linear-gradient(115deg, var(--rt-deep), var(--rt-primary)); color: var(--rt-white); box-shadow: 0 36px 64px -36px color-mix(in srgb, var(--rt-deep) 75%, transparent); } .band::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(color-mix(in srgb, var(--rt-white) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--rt-white) 7%, transparent) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000); mask-image: linear-gradient(100deg, transparent 30%, #000); } .band::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--rt-accent); } .band__ic { display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid color-mix(in srgb, var(--rt-white) 18%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--rt-white) 8%, transparent); color: var(--rt-accent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .band__ic .ic { width: 28px; height: 28px; } .band__t { font-family: "Montserrat", var(--font); font-size: clamp(19px, 1.2rem + .5vw, 26px); font-weight: 800; line-height: 1.2; text-transform: uppercase; color: var(--rt-white); } .band p { margin-top: 8px; max-width: 62ch; color: var(--rt-text-dark); } @media (max-width: 760px) { .band { grid-template-columns: minmax(0, 1fr); } .band__ic { width: 52px; height: 52px; } .band .pill { justify-self: start; } } /* ---------- Industries, after turbointernacional.com's sectors section (client request, 2026-10-16), on the navy photo ground: the heading in white; ten compact tiles in two rows of five, each its own photo darkened as the background (client request) under an amber top edge, with "Sector 01" in amber, the name in white Montserrat capitals and its line over the darkest part; on hover the tile lifts, the photo eases in and the shade lifts a little. Three, then two to a row on smaller screens. */ .spad.ind .eyebrow { color: var(--rt-text-dark); } /* over .spad .eyebrow */ .ind .sh2 { color: var(--rt-white); } .ind .shead .stext { color: var(--rt-text-dark); } .isec { display: grid; gap: 14px; } .isec__row { display: flex; gap: 14px; } .isec__row--short { justify-self: center; width: calc((100% - 4 * 14px) / 5 * var(--n) + (var(--n) - 1) * 14px); } /* a shorter row keeps the panel width, centred */ .isec__i { position: relative; isolation: isolate; display: flex; flex: 1 1 0; flex-direction: column; justify-content: flex-end; min-width: 0; min-height: 300px; overflow: hidden; border-radius: var(--r); background: var(--rt-deep); box-shadow: 0 24px 44px -30px rgb(0 0 0 / .7); transition: flex-grow .7s cubic-bezier(.32, .72, 0, 1), box-shadow .45s var(--ease); } .isec__i::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 2; height: 3px; background: var(--rt-accent); transform: scaleX(.18); transform-origin: left; transition: transform .7s cubic-bezier(.32, .72, 0, 1); } .isec__img { position: absolute; inset: 0; z-index: -1; } .isec__img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transform: scale(1.04); transition: transform 1.1s var(--ease), filter .6s var(--ease); } .isec__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--rt-deep) 96%, transparent) 0%, color-mix(in srgb, var(--rt-deep) 70%, transparent) 42%, color-mix(in srgb, var(--rt-deep) 18%, transparent) 100%); transition: opacity .6s var(--ease); } .isec__no { position: absolute; top: 14px; left: 18px; font-family: "Montserrat", var(--font); font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--rt-white) 45%, transparent); transition: -webkit-text-stroke-color .45s, transform .6s var(--ease); } .isec__ic { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid color-mix(in srgb, var(--rt-white) 28%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--rt-deep) 35%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--rt-accent); transition: background-color .4s, border-color .4s, color .4s, transform .5s var(--ease); } .isec__ic .ic { width: 19px; height: 19px; } .isec__body { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 20px; } .isec__t { font-family: "Montserrat", var(--font); font-size: 15px; font-weight: 700; line-height: 1.25; text-transform: uppercase; color: var(--rt-white); } .isec__x { min-height: 3em; font-size: 13px; line-height: 1.5; color: color-mix(in srgb, var(--rt-white) 82%, transparent); } /* two lines kept, so the names line up */ @media (hover: hover) and (min-width: 1041px) { .isec__row:hover .isec__i { flex-grow: .78; } .isec__row .isec__i:hover { flex-grow: 2.1; box-shadow: 0 34px 56px -30px rgb(0 0 0 / .8); } .isec__i:hover::before { transform: scaleX(1); } .isec__i:hover .isec__img img { transform: none; filter: saturate(1.05); } .isec__i:hover .isec__img::after { opacity: .78; } .isec__i:hover .isec__no { -webkit-text-stroke-color: var(--rt-accent); transform: translateY(-2px); } .isec__i:hover .isec__ic { background: var(--rt-accent); border-color: var(--rt-accent); color: var(--rt-deep); transform: rotate(-8deg) scale(1.06); } } @media (prefers-reduced-motion: reduce) { .isec__i, .isec__i::before, .isec__img img, .isec__img::after, .isec__no, .isec__ic { transition: none; } } @media (max-width: 1040px) { .isec { grid-template-columns: repeat(3, minmax(0, 1fr)); } .isec__row { display: contents; } .isec__i { min-height: 240px; } } @media (max-width: 760px) { .isec__i:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); } .isec { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .isec__i { min-height: 200px; } .isec__body { padding: 12px 12px 14px; } .isec__t { font-size: 13px; } .isec__no { font-size: 34px; } .isec__ic { width: 34px; height: 34px; } } /* ---------- Credentials: two seamless sliding strips (cards, then client logos the other way) ---------- */ .cred__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(24px, 3vw, 36px); } .cred__head .label { margin-bottom: 12px; } .cred__clients-t { margin: clamp(28px, 3.4vw, 44px) 0 14px; } .mq-toggle { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid var(--rt-border); border-radius: var(--r); color: var(--rt-primary); transition: border-color .25s var(--ease), color .25s var(--ease); } .mq-toggle:hover { border-color: var(--rt-accent); color: var(--rt-accent-ink); } .mq-toggle[hidden] { display: none; } .mq-toggle .ic { width: 16px; height: 16px; } .mq-toggle__play, .is-paused .mq-toggle__pause { display: none; } .is-paused .mq-toggle__play { display: block; } .marquee { position: relative; z-index: 1; display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .marquee__track { display: flex; flex: none; animation: mq var(--mq-dur, 60s) linear infinite; } .marquee--logos .marquee__track { --mq-dur: 48s; animation-direction: reverse; } .marquee:hover .marquee__track, .marquee:focus-within .marquee__track, .is-paused .marquee__track { animation-play-state: paused; } @keyframes mq { to { transform: translateX(-100%); } } /* credential cards */ .ccard { display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 4px 16px; align-items: start; flex: none; width: 340px; margin-right: 16px; padding: 18px 20px; background: var(--rt-white); border: 1px solid var(--rt-border); border-radius: var(--r); transition: border-color .3s var(--ease); } .ccard__logo { grid-row: span 2; display: grid; place-items: center; height: 76px; } .ccard__logo img { max-width: 100%; max-height: 68px; width: auto; object-fit: contain; } /* original colours (2026-10-08) */ .ccard p { font-size: .8125rem; line-height: 1.5; color: var(--muted-text); } .ccard:hover { border-color: color-mix(in srgb, var(--rt-primary) 35%, var(--rt-border)); } /* client logos */ .marquee--logos { border-block: 1px solid var(--rt-border); } .marquee--logos li { display: grid; place-items: center; flex: none; width: 210px; height: 108px; padding: 14px 22px; border-right: 1px solid var(--rt-border); } .marquee--logos img { max-width: 100%; max-height: 72px; width: auto; object-fit: contain; } /* original colours (2026-10-08) */ @media (max-width: 599.98px) { .ccard { width: 288px; grid-template-columns: 96px minmax(0, 1fr); } .marquee--logos li { width: 150px; height: 84px; } .marquee--logos img { max-height: 56px; } } @media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; scrollbar-width: thin; } .marquee__track { animation: none; } .marquee__copy { display: none; } } /* ---------- Quality & Recognition, after turbointernacional.com's multi-brand section (client request, 2026-10-11) ---------- label, heading block with TI's animated button (an amber disc that fills into a pill), then the certificates as ruled cells (logo, name, line) that turn amber on hover; a cell opens its certificate in the viewer. */ .qual { border-top: 1px solid var(--rt-border); } .qual__top { margin-bottom: 30px; } .qual__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 26px; } .qual__head .stext { max-width: 62ch; margin-bottom: 0; } .qcov { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 26px; } .qcov li { border-top: 1px solid var(--rt-border); transition: border-color .15s; } .qcov__a { display: flex; flex-direction: column; gap: 5px; height: 100%; margin: 0 -10px; padding: 14px 10px 13px; transition: background-color .15s; } .qcov__logo { display: flex; align-items: center; height: 48px; margin-bottom: 8px; color: var(--rt-primary); } .qcov .qseal { width: 44px; height: 44px; } .qcov__img { width: auto; max-width: 110px; max-height: 44px; object-fit: contain; mix-blend-mode: multiply; } .qcov__img[src*="Garrett"] { max-width: 150px; max-height: 76px; margin-block: -16px; } /* the file carries wide margins */ .qcov__word { font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--rt-primary); } @media (hover: hover) { .qcov li:hover { border-top-color: var(--rt-primary); } .qcov__a:hover { background: var(--rt-accent); } .qcov__a:hover .cov__f { color: var(--rt-deep); } } @media (max-width: 1040px) { .qcov { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; } } @media (max-width: 640px) { .qcov { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; } } .qseal { width: 72px; height: 72px; fill: none; stroke: currentColor; stroke-width: 1.5; } .qseal__in { stroke-width: 1; stroke-dasharray: 2 3; opacity: .55; } .qseal text { fill: currentColor; stroke: none; font: 800 22px/1 Manrope, sans-serif; letter-spacing: -.02em; } /* TI's "All brands" button */ .mbtn { position: relative; isolation: isolate; flex: none; display: inline-flex; align-items: center; min-height: 44px; padding-right: 16px; overflow: hidden; border-radius: 22px; } .mbtn__fill { position: absolute; inset: 0; z-index: -1; background: var(--rt-accent); clip-path: inset(0 calc(100% - 44px) 0 0 round 22px); transition: clip-path .45s cubic-bezier(.25, .8, .3, 1); } .mbtn:hover .mbtn__fill, .mbtn:focus-visible .mbtn__fill { clip-path: inset(0 round 22px); } .mbtn__ic { display: flex; align-items: center; justify-content: center; width: 44px; color: var(--rt-deep); } .mbtn__ic .ic { width: 15px; height: 15px; transition: transform .45s cubic-bezier(.25, .8, .3, 1); } .mbtn:hover .mbtn__ic .ic { transform: translateX(6px); } .mbtn__t { margin-left: 10px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rt-primary); } @media (prefers-reduced-motion: reduce) { .mbtn__fill, .mbtn__ic .ic { transition: none; } } /* ---------- Home news, after turbointernacional.com's (client request, 2026-10-16: compact): the heading block with the animated "All Posts" button level with it, then one row of the News page's cards ---------- */ .news__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 46px; } .news__head .shead { margin-bottom: 0; } .news__head .mbtn { flex: none; } .news .ncard__x { -webkit-line-clamp: 3; } @media (min-width: 761px) and (max-width: 1040px) { .news .ncards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .news .ncard__body { padding: 18px 18px 22px; } } @media (max-width: 760px) { /* phones: the three cards as a swipe row */ .news .ncards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 8px; } .news .ncard { scroll-snap-align: start; } } @media (max-width: 640px) { .news__head { flex-direction: column; align-items: flex-start; margin-bottom: 32px; } } /* ---------- Quote CTA ---------- */ .cta { position: relative; overflow: hidden; padding-block: var(--sec); background: var(--rt-primary); color: var(--rt-white); } .cta .tech-grid { background-size: 64px 64px; opacity: 1.3; } /* Navy over a photo, as turbointernacional.com's navy sections (quote band; Industries We Power, client request 2026-10-11): the workshop photo stays fixed while the page scrolls (clip-path keeps it inside the section), at 60% under a 78% navy veil; the content sits above. */ .nphoto { position: relative; clip-path: inset(0); background: var(--rt-primary); color: var(--rt-white); } .nphoto__media { position: fixed; inset: 0; opacity: .6; } .nphoto__media img { width: 100%; height: 100%; object-fit: cover; } .nphoto::before { content: ""; position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--rt-primary) 78%, transparent); } .nphoto > :not(.nphoto__media) { position: relative; z-index: 2; } /* Quote band after turbointernacional.com (client request, 2026-10-08): 84px band on the navy photo, centred seam, 40px Montserrat headline (second line amber), the intro in light steel and two pills. */ .qband { padding: 84px 0; text-align: center; } .qband__seam { margin: 0 auto 26px; } .qband__t { margin-bottom: 12px; font-family: "Montserrat", var(--font); font-size: 40px; font-weight: 800; line-height: 1.08; letter-spacing: 0; text-transform: uppercase; } .qband__alt { color: var(--rt-accent); } .qband__x { max-width: 720px; margin: 0 auto 32px; font-size: 15px; line-height: 1.65; color: var(--hdr-steel); } .qband__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } @media (max-width: 640px) { .qband__t { font-size: 32px; } } @media (min-width: 700px) { .cta__side { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cta .btn { grid-column: 1 / -1; } } @media (min-width: 1100px) { .cta__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } } /* ---------- Footer ---------- */ /* Compact: the long Facilities & Projects list runs in two columns on wide screens, so no column outgrows the brand text */ /* Logo bar above the footer, after turbointernacional.com's (client request, 2026-10-08; compact premium pass 2026-10-29): light band with a hairline on top; wide screens: the label, a hairline divider, then the logos spread across one row; narrow screens: label above, the logos gliding by in one seamless row (twice in the markup, 40s loop, still on hover or with reduced motion). Logos 26px tall in grey at 60% take their colours on hover (multiply drops white JPG grounds). */ .cbar { padding: 18px 0; border-top: 1px solid var(--rt-border); background: var(--rt-surface); } .cbar__in { display: flex; align-items: center; gap: 32px; } .cbar__t { flex: none; font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--rt-muted); } .cbar__view { flex: 1; min-width: 0; padding-left: 32px; border-left: 1px solid var(--rt-border); } .cbar__logos { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .cbar__dup { display: none; } .cbar__logos img { flex: none; width: auto; height: 26px; max-width: 92px; object-fit: contain; filter: grayscale(1); opacity: .6; mix-blend-mode: multiply; transition: filter .18s, opacity .18s; } .cbar__logos img:hover { filter: none; opacity: 1; } /* optical sizes: the files carry different margins (as on the reference, per logo) */ .cbar__logos img[src*="Napier"] { height: 42px; max-width: 96px; margin-block: -8px; } .cbar__logos img[src*="Garrett"] { height: 39px; margin-block: -7px; } .cbar__logos img[src*="Jaka"] { height: 19px; } .cbar__logos img[src*="iMAK"] { height: 32px; margin-block: -3px; } .cbar__logos img[src*="Turbogeneral"] { height: 23px; } @media (max-width: 1040px) { .cbar { padding: 14px 0 16px; } .cbar__in { flex-direction: column; gap: 10px; } .cbar__view { align-self: stretch; padding-left: 0; border-left: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .cbar__logos { width: max-content; gap: 0; background: var(--rt-surface); } /* the moving row is its own layer: multiply needs the band's ground inside it */ .cbar__logos img { margin-inline-end: 40px; } /* a margin, not a gap: the loop's two halves then measure the same */ .cbar__dup { display: contents; } } @media (max-width: 1040px) and (prefers-reduced-motion: no-preference) { .cbar__logos { animation: cbar-glide 40s linear infinite; } .cbar__view:hover .cbar__logos, .cbar__view:active .cbar__logos { animation-play-state: paused; } } @keyframes cbar-glide { to { transform: translateX(-50%); } } @media (max-width: 1040px) and (prefers-reduced-motion: reduce) { .cbar__view { -webkit-mask-image: none; mask-image: none; } .cbar__logos { width: auto; flex-wrap: wrap; justify-content: center; row-gap: 12px; } .cbar__logos img { margin-inline: 18px; } .cbar__dup { display: none; } } /* Footer, compact premium pass (client request, 2026-10-29): brand column (logo, tagline, company, address), contact and two link lists on one line rhythm (--ftr-row) with small amber titles; a slim bar under a rule carrying an amber spark (7s loop) holds the copyright and two round buttons. Deep-navy ground and technical grid as before. */ .ftr { position: relative; overflow: hidden; padding: 48px 0 0; background: var(--rt-deep); color: var(--rt-white); font-size: 14px; } .ftr__in { position: relative; z-index: 2; } /* above the technical grid (client request, 2026-10-08) */ .ftr__cols { --ftr-row: 26px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.15fr) minmax(0, .9fr) minmax(0, 1fr); gap: 32px 48px; } .ftr__brand { --logo-h: 26px; display: inline-flex; margin-bottom: 14px; } .ftr__slogan { max-width: 34ch; margin-bottom: 16px; font-size: 15px; font-weight: 600; line-height: 1.5; color: rgb(255 255 255 / .92); } .ftr__alt { color: var(--rt-accent); } .ftr__t { margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .14em; line-height: var(--ftr-row); text-transform: uppercase; color: var(--rt-accent); } .ftr__cols p.ftr__addr { line-height: 1.6; color: rgb(255 255 255 / .7); } .ftr__reach { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 14px; line-height: var(--ftr-row); font-variant-numeric: tabular-nums; } .ftr__reach dt { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .45); } .ftr__reach dd > span { display: block; } .ftr__reach a, .ftr__links a { display: inline-block; padding-block: var(--ftr-pad, 0px); color: rgb(255 255 255 / .82); transition: color .15s; } .ftr__links li { display: flex; align-items: flex-start; gap: 12px; line-height: var(--ftr-row); } .ftr__links li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: calc(var(--ftr-pad, 0px) + (var(--ftr-row) - 5px) / 2); border-radius: 50%; background: var(--rt-accent); transition: transform .15s; } /* level with the first line */ .ftr__bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 36px; padding: 16px 0 20px; } .ftr__line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgb(255 255 255 / .14); } .ftr__line::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--rt-accent) 50%, transparent) no-repeat; background-size: 180px 100%; animation: ftr-spark 7s linear infinite; } @keyframes ftr-spark { 0% { background-position: -180px 0; opacity: 0; } 10%, 86% { opacity: 1; } 100% { background-position: 100% 0; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ftr__line::before { animation: none; opacity: 0; } } .ftr__legal { font-size: 12.5px; line-height: 1.6; color: rgb(255 255 255 / .55); } .ftr__icons { display: flex; flex: none; gap: 10px; } .ftr__icons a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid rgb(255 255 255 / .3); border-radius: 50%; color: var(--rt-white); transition: border-color .15s, color .15s, background-color .15s; } .ftr__icons .ic { width: 15px; height: 15px; } .ftr__icons .ftr__up { rotate: -90deg; } @media (hover: hover) { .ftr__reach a:hover, .ftr__links a:hover { color: var(--rt-white); } .ftr__links li:hover::before { transform: scale(1.6); } .ftr__icons a:hover { border-color: var(--rt-accent); color: var(--rt-accent); } .ftr .hdr__brand:hover { color: var(--rt-white); } } @media (max-width: 1040px) { .ftr__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* brand | contact, then the two lists */ @media (max-width: 640px) { .ftr { padding-top: 40px; } .ftr__cols { --ftr-pad: 6px; gap: 28px 20px; } /* padded links: comfortable tap targets; the two lists stay side by side */ .ftr__about, .ftr__cols > :nth-child(2) { grid-column: 1 / -1; } .ftr__bar { flex-wrap: wrap; margin-top: 28px; } } /* ---------- Lightbox ---------- */ /* The page stays visible behind the viewer, blurred and tinted; the photo flies in from its thumbnail (main.js) */ .lightbox { width: 100%; height: 100%; max-width: none; max-height: none; padding: 0; border: 0; background: transparent; color: var(--rt-white); overflow: hidden; } .lightbox::backdrop { background: color-mix(in srgb, var(--rt-deep) 48%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); opacity: 0; transition: opacity .42s var(--ease); } .lightbox.is-shown::backdrop { opacity: 1; } .lightbox__btn, .lightbox__fig figcaption { opacity: 0; transition: opacity .35s var(--ease), background-color .25s, border-color .25s; } .lightbox.is-shown .lightbox__btn, .lightbox.is-shown .lightbox__fig figcaption { opacity: 1; } .lightbox__fig img { box-shadow: 0 30px 80px color-mix(in srgb, var(--rt-deep) 45%, transparent); transform-origin: 0 0; will-change: transform; } .lightbox__fig { display: grid; place-items: center; align-content: center; gap: 16px; height: 100%; padding: 72px clamp(16px, 7vw, 96px); } .lightbox__fig img { max-width: 100%; max-height: calc(100dvh - 190px); width: auto; object-fit: contain; border-radius: var(--r); } .lightbox__fig figcaption { max-width: 60ch; text-align: center; font-size: .9375rem; color: rgba(255, 255, 255, .82); } .lightbox__btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--r); color: var(--rt-white); background: color-mix(in srgb, var(--rt-deep) 35%, transparent); } .lightbox__btn:hover { background: rgba(255, 255, 255, .08); border-color: var(--rt-white); } .lightbox__close { top: 16px; right: 16px; } .lightbox__prev, .lightbox__next { top: 50%; translate: 0 -50%; } .lightbox__prev { left: 16px; } .lightbox__next { right: 16px; } .lightbox[data-single] .lightbox__prev, .lightbox[data-single] .lightbox__next { display: none; } @media (max-width: 599.98px) { .lightbox__prev, .lightbox__next { top: auto; bottom: 16px; translate: none; } } /* ===================================================================== Inner pages ===================================================================== */ .phero { position: relative; overflow: hidden; padding: calc(var(--hdr) + var(--meta) + clamp(56px, 8vw, 128px)) 0 clamp(48px, 6vw, 88px); background: var(--rt-deep); color: var(--rt-white); } .phero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255, 255, 255, .1); } .phero__inner { position: relative; z-index: 2; } .phero__title { font-size: clamp(2.35rem, 1.3rem + 3.9vw, 5.25rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; max-width: 18ch; } .phero__title--long { font-size: clamp(1.9rem, 1.15rem + 2.6vw, 3.75rem); line-height: 1.06; max-width: 26ch; } .crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: clamp(24px, 3vw, 40px); font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .6); } .crumbs a { color: var(--rt-white); } .crumbs a:hover { color: var(--rt-accent); } .phero .meta { margin-bottom: 24px; color: var(--rt-accent); } .phero .meta > * + * { color: rgba(255, 255, 255, .7); } .phero .meta > * + *::before { background: rgba(255, 255, 255, .25); } .blueprint--hero { position: absolute; z-index: 1; width: min(46vw, 620px); right: -8vw; top: 50%; translate: 0 -46%; stroke: color-mix(in srgb, var(--rt-primary-light) 60%, transparent); } @media (max-width: 699.98px) { .blueprint--hero { width: 92vw; right: -40vw; opacity: .7; } } /* Editorial split: heading column + text column */ .split { display: grid; gap: 28px var(--col-gap); } .split + .split { margin-top: clamp(48px, 5vw, 72px); } .split__head .label + * { margin-top: 18px; } @media (min-width: 1024px) { .split { grid-template-columns: repeat(12, minmax(0, 1fr)); } .split__head { grid-column: 1 / span 4; align-self: start; position: sticky; top: 128px; } .split__body { grid-column: 6 / -1; } } .prose { font-size: 1.0625rem; line-height: 1.78; } .prose > * + * { margin-top: 1.1em; } .prose a, .entry a { color: var(--rt-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .prose a:hover, .entry a:hover { color: var(--rt-primary-light); } .lead-xl { font-size: clamp(1.1875rem, 1rem + .6vw, 1.5rem); font-weight: 600; line-height: 1.35; letter-spacing: -.02em; color: var(--rt-text); text-wrap: pretty; } .section--dark .lead-xl { color: var(--rt-white); } .list { display: grid; } .list li { position: relative; padding: 18px 0 18px 32px; border-bottom: 1px solid var(--rt-border); } .list li:first-child { border-top: 1px solid var(--rt-border); } .list li::before { content: ""; position: absolute; left: 0; top: 1.62em; width: 14px; height: 1px; background: var(--rt-accent); } .list strong { color: var(--rt-text); } .section--dark .list li { border-color: var(--rt-line-dark); color: var(--rt-text-dark); } .section--dark .list strong { color: var(--rt-white); } .section--dark .list li::before { background: var(--rt-accent); } /* Numbered editorial blocks */ .chapters { display: grid; gap: clamp(40px, 4.5vw, 64px); } .chapter { position: relative; display: grid; gap: 20px var(--col-gap); padding-top: 28px; } .chapter > .idx { font-size: .875rem; color: var(--rt-accent-ink); } @media (min-width: 1024px) { .chapter { grid-template-columns: repeat(12, minmax(0, 1fr)); } .chapter > .idx { grid-column: 1 / span 1; } .chapter__head { grid-column: 2 / span 4; } .chapter__body { grid-column: 6 / -1; } } /* ---------- Infrastructure facility ---------- */ /* Echo: display copy of a figure already in the adjacent text (aria-hidden); large only where the figure matters */ .echo { --echo: clamp(2.75rem, 1.9rem + 2.8vw, 4.5rem); display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .14em; font-size: var(--echo); font-weight: 800; line-height: .9; letter-spacing: -.045em; color: var(--rt-primary); font-variant-numeric: tabular-nums lining-nums; } .echo__v { margin-left: -.05em; } /* optical: big numerals carry side bearing */ .echo--tight { column-gap: .02em; } .echo__u { font-size: max(.9375rem, .3em); font-weight: 700; letter-spacing: -.01em; color: var(--rt-accent-ink); } .section--dark .echo { color: var(--rt-white); } .section--dark .echo__u { color: var(--rt-accent); } /* hero with photo: compact band under a flat navy scrim */ .ihero { position: relative; display: flex; align-items: flex-end; overflow: hidden; min-height: max(520px, 72svh); padding: calc(var(--hdr) + var(--meta) + 64px) 0 clamp(56px, 7vw, 112px); background: var(--rt-deep); color: var(--rt-white); } .ihero__media { position: absolute; inset: 0; z-index: 0; } .ihero__img { width: 100%; height: 100%; object-fit: cover; } .ihero::after { content: ""; position: absolute; inset: 0; z-index: 0; background: color-mix(in srgb, var(--rt-deep) 76%, transparent); } .ihero__inner { position: relative; z-index: 2; } .ihero__title { font-size: clamp(3rem, 1.2rem + 7vw, 8.5rem); line-height: .9; letter-spacing: -.05em; max-width: 11ch; } .ihero__title .line { padding-bottom: .12em; margin-bottom: -.12em; } @media (min-width: 1024px) { .ihero { min-height: max(640px, 92svh); } } /* Scroll cue: straddles the hero's bottom edge; the wheel's speed (--spin 0..1) comes from main.js */ .scue-wrap { position: relative; z-index: 6; height: 0; display: flex; justify-content: center; } .scue { --spin: 0; position: relative; display: grid; place-items: center; width: 68px; height: 68px; margin-top: -34px; border-radius: 50%; background: var(--rt-white); color: var(--rt-primary); box-shadow: 0 2px 6px color-mix(in srgb, var(--rt-deep) 14%, transparent), 0 16px 32px -10px color-mix(in srgb, var(--rt-deep) 32%, transparent); transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .scue:hover { transform: translateY(2px); } .scue:focus-visible { outline: 2px solid var(--rt-accent); outline-offset: 4px; } .scue__wheel { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; will-change: transform; } .scue__wheel path { opacity: calc(1 - var(--spin) * .65); } /* blades blur away at speed… */ .scue__wheel .scue__split { stroke-width: 1.1; } .scue__disc { fill: currentColor; stroke: none; opacity: calc(var(--spin) * .16); } /* …into a spinning disc */ .scue__nut { fill: var(--rt-accent); stroke: none; } .scue__chev { position: absolute; top: calc(100% + 6px); left: 50%; width: 20px; height: 20px; margin-left: -10px; fill: none; stroke: var(--rt-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; animation: scue-nudge 1.8s cubic-bezier(.45, 0, .55, 1) infinite; } .scue__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--rt-primary-light) 45%, transparent); animation: scue-air 2.6s cubic-bezier(.22, 1, .36, 1) infinite; pointer-events: none; } @keyframes scue-nudge { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(6px); opacity: 1; } } @keyframes scue-air { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } } @media (max-width: 599.98px) { .scue { width: 56px; height: 56px; margin-top: -28px; } .scue__wheel { width: 34px; height: 34px; } } @media (prefers-reduced-motion: reduce) { .scue__chev, .scue__ring { animation: none; } } /* dynamic balancing: turbointernacional.com's workshop split (client request, 2026-10-11), on the service-page styles (.spad / .ssplit / .sledger): heading, seam, intro and the two machines as ledger rows, photo beside. */ .slrow--fig { align-items: baseline; } .slrow--fig .slrow__t { flex: 0 0 120px; font-size: 24px; font-weight: 800; text-transform: none; } .slrow__d strong { color: var(--rt-primary); } /* the rest of the walk-through, after turbointernacional.com (client request, 2026-10-11) on the service-page styles: figures in TI's stat style, ledger rows for the setups and the power units, chevron lists, a navy closing band */ .spad .echo { --echo: 40px; margin-bottom: 18px; font-family: "Montserrat", var(--font); letter-spacing: 0; line-height: 1; } .spad .echo__u { font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rt-muted); } .spad .echo--tight .echo__u { font-family: "Montserrat", var(--font); font-size: 24px; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--rt-primary); } /* "3-ton" stays one figure */ .slrow--top { align-items: baseline; } .slrow--top .slrow__d { font-size: 15px; color: var(--rt-muted-ink); } .slrow--spec { padding-block: 14px; } .slrow--spec .slrow__t { flex-basis: 130px; } .slrow--spec .slrow__d { font-size: 15px; color: var(--rt-muted-ink); } .sh3 { margin-bottom: 14px; font-family: "Montserrat", var(--font); font-size: 15px; font-weight: 700; text-transform: uppercase; color: var(--rt-primary); } .chev + .stext--after { margin-top: 16px; } .instr__sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* the sentence's commas, kept for reading aloud */ .fpower { margin-top: 84px; } .fclose { padding: 84px 0; text-align: center; } .fclose__seam { margin: 0 auto 26px; } .fclose__t { max-width: 62ch; margin-inline: auto; font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem); line-height: 1.6; color: var(--rt-white); } @media (max-width: 640px) { .fpower { margin-top: 56px; } .slrow--spec .slrow__t { flex: 0 0 100%; max-width: none; } } /* photographs (client request, 2026-10-11): the original brick strip (its tile sizes, white above / dark band behind the lower part), packed with no space between photos. Each column holds two photos splitting its height at its own ratio (--t) and drops by its own --y, so the seams and the edges step like bricks; widths follow the original six-tile rhythm. The strip drifts in a seamless loop. */ .igal { --u: clamp(112px, 14vw, 210px); --pad: clamp(40px, 4vw, 64px); --gap: clamp(16px, 2.2vw, 32px); position: relative; overflow: hidden; padding: var(--pad) 0 clamp(32px, 4vw, 56px); background: var(--rt-white); } .igal::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--pad) + .8 * var(--u)); background: var(--rt-dark); } .igal__scroller { position: relative; z-index: 1; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .igal__scroller::-webkit-scrollbar { display: none; } /* With JS the strip loops by transform: the scroller clips, horizontal drags go to the strip, vertical ones to the page */ .igal__scroller.is-auto { overflow: hidden; touch-action: pan-y; cursor: grab; } .igal__scroller.is-auto .igal__row { will-change: transform; } .igal__scroller.is-dragging { cursor: grabbing; } .igal__track { width: max-content; padding-inline: var(--gutter); } .igal__row { display: flex; align-items: flex-start; gap: var(--gap); } /* each column drops by its own --y, so the strip's top and bottom edges step up and down like the original */ .igal__col { flex: none; display: flex; flex-direction: column; gap: var(--gap); height: calc(3.4 * var(--u)); margin-top: var(--y, 0px); } .igal__col > .igal__item { flex: 1 1 0; min-height: 0; } .igal__col > .igal__item:first-child { flex-grow: var(--t, 1); } .igal__col > .igal__item:last-child:not(:first-child) { flex-grow: calc(1 - var(--t)); } .igal__col--c1 { width: calc(1.4 * var(--u)); --t: .56; --y: calc(.55 * var(--u)); } .igal__col--c2 { width: calc(2.2 * var(--u)); --t: .42; } .igal__col--c3 { width: calc(1.95 * var(--u)); --t: .6; --y: calc(.18 * var(--u)); } .igal__col--c4 { width: calc(1.05 * var(--u)); --t: .48; --y: calc(.7 * var(--u)); } .igal__col--c5 { width: calc(2.6 * var(--u)); --t: .4; --y: calc(.08 * var(--u)); } .igal__col--c6 { width: calc(1.7 * var(--u)); --t: .55; --y: calc(.42 * var(--u)); } .igal__col--solo { width: calc(1.4 * var(--u)); --y: calc(.3 * var(--u)); } .igal__item { border-radius: var(--r); background: var(--rt-deep); } .igal__item img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; } .igal__nav { position: relative; z-index: 1; display: flex; justify-content: flex-end; gap: 8px; margin-top: clamp(20px, 2.4vw, 32px); } .igal__btn { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--r); color: var(--rt-white); transition: border-color .25s var(--ease), color .25s var(--ease); } .igal__btn:hover { border-color: var(--rt-accent); color: var(--rt-accent); } .igal__play, [data-igal-toggle].is-paused .igal__pause { display: none; } [data-igal-toggle].is-paused .igal__play { display: block; } .igal__nav [data-igal-toggle] { margin-right: auto; } .igal__nav [data-igal-toggle]:not(.is-ready) { display: none; } .igal :focus-visible { outline-color: var(--rt-accent); } /* ---------- About, after turbointernacional.com's company page (client request, 2026-10-11) ---------- on the service-page styles; here only TI's stats band, the certificate, the closing motto and the contact rows. */ .sstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 64px; border-block: 1px solid var(--rt-border); } .sstats__cell { padding: 26px 26px 24px; } .sstats__cell + .sstats__cell { border-left: 1px solid var(--rt-border); } .sstats__cell:first-child { padding-left: 0; } .sstats b { display: block; font-family: "Montserrat", var(--font); font-size: 40px; font-weight: 800; line-height: 1; color: var(--rt-primary); } .sstats small { margin-left: 6px; font-size: 15px; font-weight: 700; color: var(--rt-accent-ink); } .sstats__cell > span { display: block; margin-top: 10px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rt-muted); } .stext--lead { font-size: 17px; color: var(--rt-text); } /* Our Standard: the figures band inside the mission column, the limits' note and closing line */ .sstats--in { margin: 28px 0 0; } .sstats--in .sstats__cell { padding: 20px 20px 18px; } .sstats--in .sstats__cell:first-child { padding-left: 0; } .slim__note { max-width: 70ch; margin: 40px 0 0; font-size: 17px; color: var(--rt-text); } .slim__never { margin-top: 18px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rt-primary); } .hero__lead + .hero__lead { margin-top: -18px; } .chev--2 + .stext, .stext + .chev { margin-top: 4px; } @media (max-width: 640px) { .sstats { grid-template-columns: minmax(0, 1fr); border-bottom: 0; } .sstats__cell { padding: 20px 0; border-bottom: 1px solid var(--rt-border); } .sstats__cell + .sstats__cell { border-left: 0; } } /* ---------- Contacts (client reference layout) ---------- */ .cpage .label { margin-bottom: 14px; } /* Contacts tiles: one layered elevation (contact shadow + soft ambient lift) */ .cpage { --tile-shadow: 0 1px 2px color-mix(in srgb, var(--rt-deep) 7%, transparent), 0 10px 24px -6px color-mix(in srgb, var(--rt-deep) 12%, transparent), 0 28px 56px -18px color-mix(in srgb, var(--rt-deep) 18%, transparent); } .cpage .ctype, .cpage .cpanel, .cpage .cloc__map { border-color: color-mix(in srgb, var(--rt-border) 70%, transparent); box-shadow: var(--tile-shadow); } /* enquiry types */ .cpage__types { padding-block: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 40px); } .ctypes { display: grid; gap: 16px; } .ctype { position: relative; display: grid; align-content: start; padding: 22px 22px 20px; background: var(--rt-white); border: 1px solid var(--rt-border); border-radius: 10px; } .ctype__no { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: color-mix(in srgb, var(--rt-primary-light) 32%, var(--rt-white)); } .ctype__no::after { content: ""; display: block; width: 24px; height: 2px; margin: 10px 0 14px; background: var(--rt-accent); } .ctype__ic { position: absolute; top: 22px; right: 22px; width: 28px; height: 28px; stroke-width: 1.3; color: var(--rt-primary); } .ctype__t { font-size: 1.125rem; font-weight: 700; color: var(--rt-primary); } .ctype__x { margin: 6px 0 16px; font-size: .9375rem; color: var(--muted-text); } .ctype__a { justify-self: start; margin-top: auto; white-space: nowrap; } @media (min-width: 640px) { .ctypes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { .ctypes { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* form + direct contacts panel */ .cpage__main { padding-bottom: var(--sec); scroll-margin-top: 90px; } .cpanel { display: grid; border: 1px solid var(--rt-border); border-radius: 12px; background: var(--rt-white); overflow: hidden; } .cpanel__form, .cpanel__info { padding: clamp(22px, 3vw, 40px); } .cpanel__info { background: var(--rt-surface); border-top: 1px solid var(--rt-border); } .cpanel__intro { margin: 8px 0 20px; color: var(--muted-text); max-width: 52ch; } @media (min-width: 1024px) { .cpanel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .cpanel__info { border-top: 0; border-left: 1px solid var(--rt-border); } } /* Contact Form 7 output, whatever fields the site's form has */ .cform .wpcf7-form { display: grid; gap: 14px 20px; } .cform .cf-grid { display: grid; gap: 14px 20px; } @media (min-width: 640px) { .cform .cf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .cform .req { color: #b42318; } .cform .wpcf7-form > p { margin: 0; } .cform label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 4px; font-size: .875rem; font-weight: 600; color: var(--rt-text); } .cform .wpcf7-form-control-wrap { display: block; flex-basis: 100%; } .cform br { display: none; } .cform input:not([type=submit]):not([type=checkbox]):not([type=radio]), .cform select, .cform textarea { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--rt-border); border-radius: var(--r); background: var(--rt-white); font-size: .9375rem; font-weight: 400; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .cform textarea { height: 96px; min-height: 72px; resize: vertical; } .cform input:focus, .cform select:focus, .cform textarea:focus { outline: none; border-color: var(--rt-primary-light); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rt-primary-light) 18%, transparent); } .cform input[type=submit], .cform .wpcf7-submit { justify-self: start; min-height: 46px; padding: 0 26px; border: 0; border-radius: var(--r); background: var(--rt-primary); color: var(--rt-white); font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background-color .25s var(--ease); } .cform input[type=submit]:hover { background: var(--rt-primary-light); } .cform .wpcf7-not-valid-tip { margin-top: 4px; font-size: .8125rem; color: #b42318; } .cform .wpcf7-response-output { margin: 4px 0 0 !important; padding: 10px 14px !important; border-radius: var(--r); font-size: .875rem; } .cform .wpcf7-spinner { margin-left: 12px; } /* the spinner (hidden until sending) sits beside the button, not on a row of its own, so the form ends at the button */ .cform .wpcf7-form { grid-template-columns: auto minmax(0, 1fr); } .cform .wpcf7-form > * { grid-column: 1 / -1; } .cform .wpcf7-form > .wpcf7-submit { grid-column: 1; } .cform .wpcf7-form > .wpcf7-spinner { grid-column: 2; align-self: center; } .cinfo { display: grid; } .cinfo__row { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 6px 16px; padding: 16px 0; border-top: 1px solid var(--rt-border); } /* side by side, the contact list fills the info panel: rows share the form's height and the last rule meets the form's bottom edge */ @media (min-width: 1024px) { .cpanel__info { display: flex; flex-direction: column; } .cinfo { flex: 1; grid-auto-rows: 1fr; border-bottom: 1px solid var(--rt-border); } .cinfo__row { align-content: center; } } .cinfo__row dt { display: flex; align-items: flex-start; gap: 10px; white-space: nowrap; font-size: .875rem; font-weight: 700; color: var(--rt-primary); } .cinfo__row dt .ic { flex: none; width: 20px; height: 20px; color: var(--rt-primary-light); } .cinfo__row dd { font-size: .875rem; line-height: 1.6; color: var(--muted-text); overflow-wrap: anywhere; } .cinfo__row dd a:hover { color: var(--rt-primary); } @media (max-width: 479.98px) { .cinfo__row { grid-template-columns: 1fr; } } /* emergency band */ .cemerg { position: relative; overflow: hidden; padding-block: clamp(36px, 4vw, 52px); background: var(--rt-deep); color: var(--rt-white); } .cemerg__media { position: absolute; inset: 0 0 0 auto; width: 70%; opacity: .22; -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%); mask-image: linear-gradient(90deg, transparent, #000 50%); } .cemerg__media img { width: 100%; height: 100%; object-fit: cover; } .cemerg__inner { position: relative; display: grid; gap: 24px var(--col-gap); align-items: center; } .cemerg .h2 { color: var(--rt-white); } .cemerg p { margin-top: 6px; color: var(--rt-text-dark); } .cemerg__line { display: flex; align-items: center; gap: 16px; } .cemerg__line p { display: grid; margin: 0; } .cemerg__ring { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border: 1.5px solid var(--rt-accent); border-radius: 50%; color: var(--rt-accent); } .cemerg__k { font-size: .875rem; color: var(--rt-accent); } .cemerg__num { font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem); font-weight: 800; letter-spacing: -.01em; color: var(--rt-white); white-space: nowrap; } .cemerg__avail { font-size: .8125rem; color: var(--rt-text-dark); } .cemerg__cta { justify-self: start; background: var(--rt-accent); color: var(--rt-deep); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; } .cemerg__cta:hover { background: color-mix(in srgb, var(--rt-accent) 85%, var(--rt-white)); } @media (min-width: 1024px) { .cemerg__inner { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: clamp(28px, 4vw, 64px); } .cemerg__cta { justify-self: end; } } /* response process */ .cproc { padding-block: clamp(40px, 4vw, 56px); border-bottom: 1px solid var(--rt-border); } .cproc__grid { display: grid; gap: 28px var(--col-gap); } .cproc__head p:not(.label) { margin-top: 8px; color: var(--muted-text); max-width: 40ch; } .cproc__head .label { white-space: nowrap; } .csteps { display: grid; gap: 24px; } .cstep { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 16px; align-content: start; } .cstep__ic { grid-row: span 3; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--rt-border); border-radius: 50%; background: var(--rt-white); color: var(--rt-primary); } .cstep__ic .ic { width: 22px; height: 22px; } .cstep__no { font-size: 1.5rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: color-mix(in srgb, var(--rt-primary-light) 32%, var(--rt-white)); } .cstep h3 { color: var(--rt-primary); } .cstep p { font-size: .875rem; color: var(--muted-text); } .cstep__arrow { display: none; } @media (min-width: 1024px) { .cproc__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); align-items: center; } .csteps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .cstep__arrow { display: block; position: absolute; top: 6px; right: 0; width: 18px; height: 18px; color: var(--rt-primary-light); } } /* location */ .cloc { padding-block: clamp(36px, 4vw, 56px) var(--sec); } .cloc__grid { display: grid; gap: 28px var(--col-gap); align-items: center; } .cloc__text .lead { margin-top: 8px; } .cloc__btn { margin-top: 22px; min-height: 46px; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; } .cloc__btn .ic { width: 16px; height: 16px; } .cloc__map { aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--rt-border); border-radius: 12px; background: var(--rt-surface); } .cloc__map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.35) contrast(1.02); } @media (min-width: 1024px) { .cloc__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } } /* Figures / galleries */ .figs { display: grid; gap: clamp(16px, 2vw, 28px) var(--col-gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); } .figs--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); } @media (min-width: 900px) { .figs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .figs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .fig .img-frame { aspect-ratio: 4 / 3; cursor: zoom-in; } .figs--portrait { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 900px) { .figs--portrait { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } } .figs--portrait .fig .img-frame { aspect-ratio: 3 / 4; background: var(--rt-white); border: 1px solid var(--rt-border); } .figs--portrait .img-frame img { object-fit: contain; padding: 12px; } .fig figcaption { display: flex; gap: 12px; margin-top: 10px; font-size: .9375rem; font-weight: 600; line-height: 1.45; } .fig figcaption::before { content: ""; flex: none; width: 14px; height: 1px; margin-top: .72em; background: var(--rt-accent); } .section--dark .fig figcaption { color: var(--rt-white); } .block-gap { margin-top: clamp(40px, 5vw, 72px); } /* Service rows (services index) */ /* Services index: compact ruled list */ .sindex { border-bottom: 1px solid var(--rt-border); } .sindex__row { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px 20px; align-items: start; padding-block: clamp(16px, 1.8vw, 22px); border-top: 1px solid var(--rt-border); } .sindex__row::before { content: ""; position: absolute; left: 0; top: -2px; width: 0; height: 3px; background: var(--rt-accent); transition: width .45s var(--ease); } .sindex__row:hover::before, .sindex__row:focus-within::before { width: 56px; } .sindex__idx { display: none; font-size: .75rem; font-weight: 700; letter-spacing: .08em; color: var(--rt-accent-ink); font-variant-numeric: tabular-nums; } .sindex__fig { aspect-ratio: 4 / 3; border-radius: var(--r); } .sindex__body p { margin-top: 6px; color: var(--muted-text); max-width: 64ch; } .sindex__link { grid-column: 2; justify-self: start; } .sindex__row h2 { transition: color .25s var(--ease); } .sindex__row:hover h2 { color: var(--rt-primary); } @media (min-width: 1024px) { .sindex__row { grid-template-columns: 48px 144px minmax(0, 1fr) auto; column-gap: var(--col-gap); align-items: center; } .sindex__idx { display: block; } .sindex__link { grid-column: 4; white-space: nowrap; } } /* Post lists (News, archives, search), after turbointernacional.com/news: bordered white cards in three columns (photo, month / year, title, four lines of excerpt; the photo eases in on hover), then Newer · n / N · Older. */ .ncards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .ncard__a { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--rt-border); background: var(--rt-white); transition: border-color .2s, box-shadow .25s; } .ncard__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--rt-surface); } .ncard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .ncard__body { display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 28px; } .ncard__date { font-size: 11px; font-weight: 600; letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--rt-muted); } .ncard__t { font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--rt-primary); } .ncard__x { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; font-size: 13px; line-height: 1.65; color: var(--rt-muted-ink); } @media (hover: hover) { .ncard__a:hover { border-color: color-mix(in srgb, var(--rt-primary) 30%, var(--rt-border)); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--rt-primary) 45%, transparent); } .ncard__a:hover .ncard__img img { transform: scale(1.04); } } /* News filter (client request, 2026-10-29): a round search field and year menu, topic chips with counts (pressed: navy with an amber count), the live result count and Clear; filtered-out cards are hidden. */ .nfilter { display: grid; gap: 16px; margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1px solid var(--rt-border); } .nfilter[hidden], .nfilter__none[hidden], .ncard[hidden] { display: none; } .nfilter__row { display: flex; flex-wrap: wrap; gap: 12px; } .nfilter__search { position: relative; flex: 1 1 320px; } .nfilter__search .ic { position: absolute; left: 18px; top: 50%; width: 18px; height: 18px; translate: 0 -50%; color: var(--rt-muted); pointer-events: none; } .nfilter__search input, .nfilter__year select { height: 50px; border: 1px solid var(--rt-border); border-radius: 999px; background-color: var(--rt-white); font: inherit; transition: border-color .15s, box-shadow .15s; } .nfilter__search input { width: 100%; padding: 0 20px 0 48px; font-size: 15px; color: var(--rt-text); } .nfilter__search input::placeholder { color: var(--rt-muted); } .nfilter__year select { padding: 0 46px 0 22px; appearance: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--rt-primary); background: var(--rt-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23123B63' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 20px center / 12px 8px; } .nfilter__search input:focus, .nfilter__year select:focus { outline: none; border-color: var(--rt-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rt-primary) 14%, transparent); } .nfilter__chips { display: flex; flex-wrap: wrap; gap: 8px; } .nfilter__chip { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; border: 1px solid var(--rt-border); border-radius: 999px; background: var(--rt-white); font: inherit; font-size: 13px; font-weight: 600; color: var(--rt-primary); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; } .nfilter__chip span { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--rt-muted); transition: color .15s; } .nfilter__chip:hover { border-color: var(--rt-primary); } .nfilter__chip[aria-pressed="true"] { border-color: var(--rt-primary); background: var(--rt-primary); color: var(--rt-white); } .nfilter__chip[aria-pressed="true"] span { color: var(--rt-accent); } .nfilter__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 24px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rt-muted); } .nfilter__clear { padding: 4px 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--rt-accent-ink); cursor: pointer; } .nfilter__clear:hover { color: var(--rt-primary); } .nfilter__none { padding: 56px 0 24px; font-size: 15px; text-align: center; color: var(--rt-muted); } @media (max-width: 640px) { .nfilter__row { flex-wrap: nowrap; gap: 8px; } .nfilter__search { flex: 1 1 auto; min-width: 0; } .nfilter__search input, .nfilter__year select { height: 46px; } .nfilter__year select { padding: 0 34px 0 16px; background-position: right 14px center; } .nfilter__chips { gap: 6px; } .nfilter__chip { min-height: 34px; padding: 0 12px; gap: 6px; font-size: 12.5px; } } .npager { display: flex; justify-content: center; align-items: center; gap: 28px; margin-top: 56px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .npager a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--rt-primary); transition: color .15s; } .npager a:hover { color: var(--rt-accent-ink); } .npager__off { color: color-mix(in srgb, var(--rt-muted) 55%, transparent); } .npager__n { font-variant-numeric: tabular-nums; color: var(--rt-muted); } @media (max-width: 1040px) { .ncards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .ncards { grid-template-columns: minmax(0, 1fr); gap: 16px; } .npager { margin-top: 40px; } } .article { display: grid; gap: 40px var(--col-gap); } @media (min-width: 1100px) { .article { grid-template-columns: repeat(12, minmax(0, 1fr)); } .article__main { grid-column: 1 / span 8; } .article__side { grid-column: 10 / -1; } } .article__fig { margin-bottom: clamp(24px, 3vw, 40px); } .entry { font-size: 1.0625rem; line-height: 1.8; max-width: 72ch; } .entry > * + * { margin-top: 1.15em; } .entry h2, .entry h3, .entry h4 { margin-top: 1.8em; } .entry img { border-radius: var(--r-img); } .entry figure { margin-block: 2em; } .entry figcaption { margin-top: 10px; font-size: .875rem; color: var(--muted-text); } .entry ul, .entry ol { padding-left: 1.3em; } .entry li + li { margin-top: .4em; } .entry blockquote { padding-left: 24px; border-left: 2px solid var(--rt-accent); font-size: 1.25rem; font-weight: 600; } .entry .wp-block-image img { height: auto; } .entry .wp-block-gallery { gap: 12px; } .article__foot { display: grid; gap: 24px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--rt-border); max-width: 72ch; } .article__tags a { color: var(--rt-primary); } .share { display: flex; flex-wrap: wrap; gap: 8px; } .share a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--rt-border); border-radius: var(--r); font-size: .8125rem; font-weight: 700; transition: border-color .25s, color .25s; } .share a:hover { border-color: var(--rt-primary); color: var(--rt-primary); } .post-nav { display: grid; gap: 16px; margin-top: 40px; } .post-nav a { display: grid; gap: 6px; padding: 24px 0; border-top: 1px solid var(--rt-border); font-weight: 700; } .post-nav a span { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rt-primary); } .post-nav a:hover { color: var(--rt-primary); } @media (min-width: 700px) { .post-nav { grid-template-columns: 1fr 1fr; } .post-nav .next { text-align: right; } } .widget + .widget { margin-top: 48px; } .widget__title { margin-bottom: 16px; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rt-primary); } .widget ul { list-style: none; border-top: 1px solid var(--rt-border); } .widget li { padding: 12px 0; border-bottom: 1px solid var(--rt-border); font-size: .9375rem; } .widget li a:hover { color: var(--rt-primary); } .widget .post-date { display: block; font-size: .8125rem; color: var(--muted-text); } .search-form { display: flex; gap: 8px; } .search-form label { flex: 1; } .search-form .search-field { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--rt-border); border-radius: var(--r); background: var(--rt-white); } .search-form .search-submit { height: 48px; padding: 0 18px; border-radius: var(--r); background: var(--rt-primary); color: var(--rt-white); font-weight: 700; } /* Comments */ /* Statements, two-up blocks */ .statement.lead-xl, .statement .lead-xl { max-width: 36ch; } .statement--wide.lead-xl { max-width: 48ch; } .statement .label { margin-bottom: 28px; } .block-end { margin-bottom: clamp(32px, 4vw, 48px); max-width: 16ch; } .chapter-g + .chapter-g { margin-top: 0; } /* chapter photos sit under the text column (5/7), not full width */ @media (min-width: 1024px) { .chapter-g > .figs { margin-left: calc((100% + var(--col-gap)) * 5 / 12); } .chapter-g > .figs:not(.figs--2):not(.figs--portrait) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 599.98px) { .figs:not(.figs--portrait) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .fig figcaption { margin-top: 8px; font-size: .8125rem; gap: 8px; } .fig figcaption::before { width: 8px; } } .chapter .rule { top: 0; } .chapter__head h2 { max-width: 20ch; } .cert { row-gap: 40px; align-items: center; } .cert__text .lead { margin-top: 28px; max-width: 46ch; } .cert__fig { max-width: 360px; } @media (min-width: 1024px) { .cert__text { grid-column: 1 / span 6; } .cert__fig { grid-column: 8 / -1; } } .section--dark .figs--portrait .img-frame { border-color: var(--rt-line-dark); } .more { margin-top: 72px; padding-top: 32px; border-top: 2px solid var(--rt-dark); } .more__grid { display: grid; gap: 24px var(--col-gap); margin-top: 24px; } .more__item { padding-top: 16px; border-top: 1px solid var(--rt-border); } .more__item h3 { margin-top: 10px; } .more__item a:hover { color: var(--rt-primary); } @media (min-width: 700px) { .more__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Generic page content (page.php fallback / search / 404) */ .page-body { padding-block: var(--sec); } /* ---------- Workshop Capabilities (workshop.php): technical hero, numbered sections, capability rows, specs, process ---------- */ /* hero: compact dark band (~460–560px desktop), text with metadata beside a framed photo */ .thero { position: relative; overflow: hidden; padding: calc(var(--hdr) + var(--meta) + clamp(28px, 4vw, 56px)) 0 clamp(40px, 5vw, 64px); background: var(--rt-deep); color: var(--rt-white); } .thero > .wrap { position: relative; z-index: 2; } .thero__grid { display: grid; gap: 32px var(--col-gap); align-items: center; } .thero__eyebrow { flex-wrap: wrap; row-gap: 6px; } .thero__no { font-variant-numeric: tabular-nums; } .thero__no span { color: var(--rt-text-dark); } .thero__title { margin-top: 18px; max-width: 18ch; font-size: clamp(2.25rem, 1.5rem + 2.6vw, 4rem); line-height: 1; letter-spacing: -.04em; } .thero__title .line { padding-bottom: .1em; margin-bottom: -.1em; } .thero__intro { margin-top: 18px; max-width: 54ch; font-size: clamp(1rem, .95rem + .25vw, 1.125rem); line-height: 1.6; color: var(--rt-text-dark); } .thero__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; margin-top: clamp(24px, 3vw, 36px); } .thero__meta > div { position: relative; padding-top: 12px; border-top: 1px solid var(--rt-line-dark); } .thero__meta > div::before { content: ""; position: absolute; left: 0; top: -1px; width: 16px; height: 1px; background: var(--rt-accent); } .thero__meta dt { font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rt-text-dark); } .thero__meta dd { margin-top: 6px; font-size: .9375rem; font-weight: 700; line-height: 1.35; color: var(--rt-white); } .thero__fig { position: relative; margin: 0; } .thero__img { aspect-ratio: 4 / 3; } .thero__img img { object-position: var(--pos, 50% 50%); } .thero--graphic .thero__fig { display: grid; place-items: center; aspect-ratio: 4 / 3; border: 1px solid var(--rt-line-dark); border-radius: var(--r-img); } .thero__blueprint { width: 64%; stroke: color-mix(in srgb, var(--rt-primary-light) 70%, var(--rt-white)); opacity: .7; } .thero__dim { position: absolute; border: 0 solid color-mix(in srgb, var(--rt-accent) 70%, transparent); } .thero__dim--h { left: 18%; right: 18%; bottom: 6%; height: 9px; border-inline-width: 1px; background: linear-gradient(color-mix(in srgb, var(--rt-accent) 70%, transparent) 0 0) 0 50% / 100% 1px no-repeat; } .thero__dim--v { top: 18%; bottom: 18%; right: 5%; width: 9px; border-block-width: 1px; background: linear-gradient(color-mix(in srgb, var(--rt-accent) 70%, transparent) 0 0) 50% 0 / 1px 100% no-repeat; } @media (min-width: 600px) { .thero__meta { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } } @media (min-width: 1024px) { .thero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } .thero__text { grid-column: 1 / span 7; } .thero__fig { grid-column: 8 / -1; } } /* crop frame: two amber corner ticks just outside an image (on a wrapper, so the image's clip reveal never cuts them) */ .cframe { position: relative; } .cframe::before, .cframe::after { content: ""; position: absolute; z-index: 2; width: 18px; height: 18px; border: 0 solid var(--rt-accent); pointer-events: none; } .cframe::before { top: -7px; left: -7px; border-top-width: 1px; border-left-width: 1px; } .cframe::after { right: -7px; bottom: -7px; border-right-width: 1px; border-bottom-width: 1px; } /* numbered sections: rail (number + label) beside the body */ .wsec { padding-block: clamp(48px, 5vw, 80px); } .wsec__grid { display: grid; gap: 18px var(--col-gap); } .wsec__rail { display: flex; align-items: center; gap: 14px; } .wsec__no { font-size: .75rem; font-weight: 700; letter-spacing: .08em; color: var(--rt-accent-ink); font-variant-numeric: tabular-nums; } .section--dark .wsec__no { color: var(--rt-accent); } .wsec__rail .label a:hover { color: var(--rt-accent-ink); } .wsec__lead { max-width: 62ch; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.55; color: var(--rt-text); text-wrap: pretty; } .section--dark .wsec__lead { color: var(--rt-white); } .wsec__sub { margin: 28px 0 12px; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rt-primary); } @media (min-width: 1024px) { .wsec__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } .wsec__rail { grid-column: 1 / span 3; flex-direction: column; align-items: flex-start; gap: 10px; align-self: start; position: sticky; top: 120px; } .wsec__body { grid-column: 4 / -1; } } /* text + photo */ .wsplit { display: grid; gap: 32px var(--col-gap); } .wsplit__fig .img-frame { aspect-ratio: 4 / 3; } @media (min-width: 900px) { .wsplit { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } } /* specification rows: label | value on hairlines */ .wspec { border-top: 1px solid var(--rt-border); } .wspec__row { display: grid; gap: 4px 24px; padding-block: 14px; border-bottom: 1px solid var(--rt-border); } .wspec dt { font-size: .75rem; font-weight: 700; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; color: var(--rt-primary); } .wspec dd { font-weight: 600; line-height: 1.5; color: var(--rt-text); } @media (min-width: 700px) { .wspec__row { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: baseline; } } /* process: numbered steps on a segmented rule */ .wsteps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--col-gap); } .wsteps__i { position: relative; padding-top: 16px; border-top: 1px solid var(--rt-border); } .wsteps__i::before { content: ""; position: absolute; left: 0; top: -1px; width: 24px; height: 3px; background: var(--rt-accent); } .wsteps__no { font-size: .75rem; font-weight: 700; letter-spacing: .08em; color: var(--rt-accent-ink); font-variant-numeric: tabular-nums; } .wsteps__t { margin-top: 8px; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; } .wsteps__i p { margin-top: 6px; font-size: .9375rem; line-height: 1.55; color: var(--muted-text); } @media (min-width: 1024px) { .wsteps { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } } .wfigs { margin-top: clamp(28px, 3vw, 40px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); } /* applications / outcome / key activities */ .wcols { display: grid; gap: 28px var(--col-gap); } .wcols .wsec__sub { margin-top: 0; } .wlist { grid-template-columns: minmax(0, 1fr); } /* Core service pages (service.php), after turbointernacional.com's service pages (client request, 2026-10-11), in RotoTech colours: 84px sections alternating white / light, eyebrow + 32px Montserrat capitals + seam, chevron lists, 50/50 splits with a 420px photo, ledger rows (hover tint; linked rows turn amber, arrow slides), a 24/7 strip. Like the reference, nothing animates in on scroll; the motion is in the hovers and the breadcrumb spark. */ .spad { padding: 84px 0; } .spad--bone { background: var(--rt-surface); } .spage .eyebrow, .spad .eyebrow { margin-bottom: 14px; font-size: 13px; font-weight: 600; line-height: 1.65; letter-spacing: .14em; text-transform: uppercase; color: var(--rt-muted); } .sh2 { margin-bottom: 14px; font-family: "Montserrat", var(--font); font-size: 32px; font-weight: 800; line-height: 1.08; letter-spacing: 0; text-transform: uppercase; color: var(--rt-primary); } .spage .hero__seam, .spad .hero__seam { margin-bottom: 26px; } .shead { max-width: 720px; margin-bottom: 46px; } .shead .hero__seam:last-child { margin-bottom: 0; } .stext { margin-bottom: 16px; font-size: 15px; line-height: 1.65; color: var(--rt-muted-ink); } .shead .stext { margin: 26px 0 0; } .ssplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; } .sph img { width: 100%; height: 420px; object-fit: cover; } .sblk + .sblk { margin-top: 40px; } .sgrid2 > .sblk + .sblk { margin-top: 0; } /* side by side, not stacked */ .sgrid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; } .chev li { padding: 8px 0 8px 26px; text-indent: -26px; border-bottom: 1px solid var(--rt-border); font-size: 15px; line-height: 1.65; color: var(--rt-muted-ink); } .chev li::before { content: ""; display: inline-block; width: 10px; height: 12px; margin-right: 16px; vertical-align: middle; text-indent: 0; background: var(--rt-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1.9 1.6 5.9 6l-4 4.4' fill='none' stroke='%23000' stroke-width='2.75'/%3E%3C/svg%3E") no-repeat center / 7px 11px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1.9 1.6 5.9 6l-4 4.4' fill='none' stroke='%23000' stroke-width='2.75'/%3E%3C/svg%3E") no-repeat center / 7px 11px; } .chev li:first-child { padding-top: 0; } .chev strong { font-weight: 700; color: var(--rt-primary); } .chev--2 { columns: 2; column-gap: 64px; } .chev--2 li { break-inside: avoid; } .chev--2 li:first-child { padding-top: 8px; } .sbtn { margin-top: 24px; } .pill--navy { background: var(--rt-primary); border-color: var(--rt-primary); color: var(--rt-accent); } @media (hover: hover) { .pill--navy:hover { background: var(--rt-accent); border-color: var(--rt-accent); color: var(--rt-deep); } } .sledger { border-top: 1px solid var(--rt-border); } .slrow { display: flex; align-items: center; gap: 26px; padding: 22px 6px; border-bottom: 1px solid var(--rt-border); transition: background-color .18s; } .slrow:hover { background: var(--rt-surface); } .spad--bone .slrow:hover { background: var(--rt-white); } .slrow__no { flex: none; font-size: 13px; font-weight: 500; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--rt-muted); transition: color .18s; } /* a step's icon in place of its number: a soft tile that turns navy with an amber icon as the row is hovered */ .slrow:has(.slrow__no--ic) { padding-block: 16px; } .slrow__no--ic { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--rt-border); border-radius: 12px; background: var(--rt-surface); color: var(--rt-primary); box-shadow: 0 1px 2px color-mix(in srgb, var(--rt-deep) 6%, transparent); transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); } .spad--bone .slrow__no--ic { background: var(--rt-white); } .slrow__no--ic .ic { width: 22px; height: 22px; } .slrow:hover .slrow__no--ic { background: var(--rt-primary); border-color: var(--rt-primary); color: var(--rt-accent); transform: translateY(-2px); box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--rt-primary) 70%, transparent); } .slrow__t { flex: 0 0 290px; font-family: "Montserrat", var(--font); font-size: 15px; font-weight: 700; line-height: 1.3; text-transform: uppercase; color: var(--rt-primary); } .slrow__d { flex: 1; font-size: 13px; line-height: 1.65; color: var(--rt-muted); transition: color .18s; } .slrow--link { margin-inline: -12px; padding-inline: 18px; } .slrow--link .slrow__t { flex: 1; } .slrow__go { display: flex; color: var(--rt-primary); transition: transform .45s cubic-bezier(.25, .8, .3, 1); } .slrow__go .ic { width: 18px; height: 18px; } .slrow--link:hover, .slrow--link.is-current, .spad--bone .slrow--link:hover { background: var(--rt-accent); } .slrow--link:hover .slrow__no, .slrow--link.is-current .slrow__no { color: var(--rt-deep); } .slrow--link:hover .slrow__go { transform: translateX(6px); } .sgal { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 28vw), 1fr)); gap: 12px; } .sgal__i { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--rt-border); } .sgal__i img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .sgal__i:hover img { transform: scale(1.05); } /* FAQ page (faq.php), after turbointernacional.com/faq: questions as ruled rows (Montserrat capitals, chevron) that open in place; on hover the row tints with the amber edge. */ .qa-list { max-width: 820px; } /* FAQ sections sit in the middle: centred heading, seam, list and button (client request, 2026-10-17); answers stay left-aligned */ .sfaq .shead { margin-inline: auto; text-align: center; } .sfaq .shead .hero__seam { margin-inline: auto; } .sfaq .qa-list { margin-inline: auto; } .sfaq .sbtn { display: table; margin-inline: auto; } .qa { border-bottom: 1px solid var(--rt-border); } .qa:first-child { border-top: 1px solid var(--rt-border); } .qa > summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-left: -14px; padding: 18px 12px 18px 14px; cursor: pointer; list-style: none; font-family: "Montserrat", var(--font); font-size: 15px; font-weight: 700; line-height: 1.25; text-transform: uppercase; color: var(--rt-primary); transition: background-color .18s, box-shadow .18s; } .qa > summary::-webkit-details-marker { display: none; } .qa > summary > h3 { flex: 1; min-width: 0; font: inherit; color: inherit; } .qa > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-top: 4px; border-right: 2px solid var(--rt-muted); border-bottom: 2px solid var(--rt-muted); transform: rotate(45deg); transition: transform .2s ease, border-color .18s; } .qa[open] > summary::after { margin-top: 7px; transform: rotate(-135deg); } @media (hover: hover) { .qa > summary:hover { background: var(--rt-surface); box-shadow: inset 3px 0 0 var(--rt-accent); } .spad--bone .qa > summary:hover { background: var(--rt-white); } .qa > summary:hover::after { border-color: var(--rt-primary); } } .qa__a { padding: 0 0 20px; animation: qa-in .22s ease-out; } .qa__a p { margin-bottom: 12px; font-size: 15px; line-height: 1.65; color: var(--rt-muted-ink); } .qa__a .chev { margin-bottom: 12px; } .qa__a > :last-child { margin-bottom: 0; } .qa__contact { display: flex; align-items: center; gap: 10px; } .qa__contact .ic { width: 16px; height: 16px; flex: none; color: var(--rt-accent-ink); } .qa__contact a { color: var(--rt-primary); font-weight: 600; } .qa__a .pill { margin-top: 6px; } @keyframes qa-in { from { opacity: 0; transform: translateY(-4px); } } @media (prefers-reduced-motion: reduce) { .qa > summary, .qa > summary::after { transition: none; } .qa__a { animation: none; } } /* Quality & Certifications page (quality.php), after turbointernacional.com/quality: the accreditation cards (white on the light section: logo, Montserrat capitals name, line) and the certificates as framed documents opening full size. */ .qcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .qcard { padding: 28px 24px 26px; background: var(--rt-white); transition: box-shadow .25s, transform .25s; } .qcard:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--rt-primary) 45%, transparent); } .qcard__logo { display: flex; align-items: center; height: 48px; margin-bottom: 18px; } .qcard__logo img { width: auto; height: 40px; max-width: none; object-fit: contain; mix-blend-mode: multiply; } /* per-file sizes: the files carry white margins of their own, so each mark shows about 32px tall and starts at the text's edge */ .qcard__logo img[src*="Napier"] { height: 76px; margin: -14px 0 -14px -36px; } .qcard__logo img[src*="VVK"] { height: 34px; margin-left: -10px; } .qcard__logo img[src*="Garrett"] { height: 96px; margin: -24px 0 -24px -41px; } .qcard__logo img[src*="Jaka"] { height: 28px; } .qcard__logo img[src*="Turbogeneral"] { height: 44px; } .qcard__logo img[src*="iMAK"] { height: 90px; margin: -21px 0 -21px -21px; } .qcard__t { margin-bottom: 8px; font-family: "Montserrat", var(--font); font-size: 15px; font-weight: 800; line-height: 1.3; text-transform: uppercase; color: var(--rt-primary); } .qcard__d { font-size: 13px; line-height: 1.65; color: var(--rt-muted); } .qdocs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px; } .qdoc { display: flex; flex-direction: column; height: 100%; } .qdoc__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; margin-bottom: 18px; padding: 16px; overflow: hidden; background: var(--rt-surface); border-top: 2px solid var(--rt-border); transition: border-color .2s; } .qdoc__img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 6px 18px -10px rgb(0 0 0 / .45); transition: transform .6s var(--ease); } .qdoc:hover .qdoc__img { border-color: var(--rt-accent); } .qdoc:hover .qdoc__img img { transform: scale(1.04); } .qdoc__no { margin-bottom: 6px; font-size: 13px; font-weight: 500; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--rt-muted); } .qdoc__t { font-family: "Montserrat", var(--font); font-size: 15px; font-weight: 800; line-height: 1.3; text-transform: uppercase; color: var(--rt-primary); } .qdoc__d { margin-top: 4px; font-size: 13px; line-height: 1.65; color: var(--rt-muted); } @media (max-width: 1040px) { .qcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qdocs { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .qcards { grid-template-columns: minmax(0, 1fr); gap: 16px; } .qdocs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; } } .semerg { padding: 56px 0; border-top: 1px solid var(--rt-border); } .semerg__in { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; } .semerg__t { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--rt-primary); } .semerg__t a { font-weight: 700; } .semerg__in .hero__dot { margin-right: -14px; } /* Service pages: the FAQ's outline button on light ground; the services as one compact row of tiles (photo under a navy veil on hover / focus, the arrow slides; this page's tile navy with an amber edge; a swipeable strip below desktop). */ .spad .pill--outline { border-color: var(--rt-primary); color: var(--rt-primary); } @media (hover: hover) { .spad .pill--outline:hover { background: var(--rt-accent); border-color: var(--rt-accent); color: var(--rt-deep); } } .pill:active, :is(.hero, .phero, .thero, .nphoto, .sdark, .section--dark, .cta, .ftr) .pill:not(.pill--outline):active { background: var(--rt-primary); border-color: var(--rt-accent); color: var(--rt-accent); } .pill--outline:active { background: var(--rt-primary-light); border-color: var(--rt-accent); color: var(--rt-accent); } .spad:not(.sdark) .pill--outline:active { background: var(--rt-primary); border-color: var(--rt-primary); color: var(--rt-white); } .qa-list + .sbtn { margin-top: 28px; } .spad--tight { padding: 56px 0; } .spad--tight .shead { margin-bottom: 24px; } .score { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); gap: 1px; border: 1px solid var(--rt-border); background: var(--rt-border); } .score__i { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 132px; padding: 16px 16px 14px; overflow: hidden; background: var(--rt-white); color: var(--rt-primary); transition: color .25s; } .score__img { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s var(--ease); } .score__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform .8s var(--ease); } .score__img::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--rt-deep) 78%, transparent); } .score__no { font-size: 11px; font-weight: 500; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--rt-muted); transition: color .25s; } .score__t { margin-top: 8px; font-family: "Montserrat", var(--font); font-size: 12px; font-weight: 700; line-height: 1.35; letter-spacing: .02em; text-transform: uppercase; } .score__go { display: flex; margin-top: auto; padding-top: 12px; transition: transform .45s cubic-bezier(.25, .8, .3, 1); } .score__go .ic { width: 16px; height: 16px; } .score__i:is(:hover, :focus-visible) { color: var(--rt-white); } .score__i:is(:hover, :focus-visible) .score__img { opacity: 1; } .score__i:is(:hover, :focus-visible) .score__img img { transform: none; } .score__i:is(:hover, :focus-visible) .score__no { color: var(--rt-accent); } .score__i:is(:hover, :focus-visible) .score__go { transform: translateX(6px); } .score__i.is-current { background: var(--rt-primary); color: var(--rt-white); box-shadow: inset 0 3px 0 var(--rt-accent); } .score__i.is-current .score__no { color: var(--rt-accent); } @media (max-width: 1040px) { .score { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(150px, 40vw); /* a third tile peeks in */ overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; } .score__i { scroll-snap-align: start; } } @media (prefers-reduced-motion: reduce) { .score__i, .score__img, .score__img img, .score__go { transition: none; } } /* ---------- Turbocharger make pages (brand.php) and the make buttons under the turbocharger page's make tabs ---------- The buttons are the site's own pills (navy; outline for secondary actions), their arrow easing forward on hover as the site's links do; in a make tab the button fades up as the tab opens (client: the earlier designs did not fit the site). */ .bpill { max-width: 100%; white-space: normal; text-align: center; } /* a long label wraps on a phone */ .bpill .arr { display: inline-block; margin-left: 8px; transition: transform .25s var(--ease); } @media (hover: hover) { .bpill:hover .arr { transform: translateX(5px); } } .bbtns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .stabs__go { margin-top: 26px; } .stabs__p.is-on .stabs__go { animation: bbtn-in .5s var(--ease) .1s both; } @keyframes bbtn-in { from { opacity: 0; transform: translateY(8px); } } /* hero: the make's series as glass chips that rise in one after another */ .bseries { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; } .bseries li { padding: 6px 13px; border: 1px solid rgb(255 255 255 / .26); border-radius: 999px; background: rgb(255 255 255 / .07); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--rt-white); font-size: 12px; font-weight: 600; letter-spacing: .08em; animation: bchip .6s var(--ease) both; animation-delay: calc(.45s + var(--i) * 70ms); } @keyframes bchip { from { opacity: 0; transform: translateY(10px); } } /* the Napier certificate in place of the focus photo (opens in the viewer) */ .bcert { display: block; justify-self: center; width: min(100%, 380px); padding: 10px; border: 1px solid var(--rt-border); background: var(--rt-white); box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--rt-deep) 45%, transparent); cursor: zoom-in; transition: transform .45s var(--ease), box-shadow .45s var(--ease); } .bcert img { display: block; width: 100%; height: auto; } .bcert:is(:hover, :focus-visible) { transform: translateY(-4px); box-shadow: 0 32px 56px -24px color-mix(in srgb, var(--rt-deep) 55%, transparent); } .bposts { margin-top: 40px; } .score--brands { grid-template-columns: repeat(6, minmax(0, 1fr)); } .score--brands + .bbtns { margin-top: 24px; } @media (prefers-reduced-motion: reduce) { .stabs__p.is-on .stabs__go, .bseries li { animation: none; } .bpill .arr, .bcert { transition: none; } } /* Dynamic service page (Full-Scope Turbocharger, 2026-10-17): key figures under the hero; a section bar that stays under the header and marks the section in view; the "Inside a turbocharger" drawing (the chosen part lit in amber, its note opening in the list); makes as tabs; a section on the navy photo ground with dark cards. */ .sfacts { border-bottom: 1px solid var(--rt-border); background: var(--rt-white); } .sfacts__in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .sfacts__c { padding: 30px 24px 28px; } .sfacts__c + .sfacts__c { border-left: 1px solid var(--rt-border); } .sfacts__c:first-child { padding-left: 0; } .sfacts dt { font-family: "Montserrat", var(--font); font-size: 40px; font-weight: 800; line-height: 1; color: var(--rt-primary); overflow-wrap: anywhere; } /* a long figure wraps rather than widening a phone page */ .sfacts dd { margin-top: 10px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rt-muted); } .snav { position: sticky; top: 64px; z-index: 30; border-bottom: 1px solid var(--rt-border); background: color-mix(in srgb, var(--rt-white) 78%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); } .snav__in { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; } .snav__in::-webkit-scrollbar { display: none; } .snav a { position: relative; flex: none; padding: 16px 12px 15px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--rt-muted); transition: color .35s; } .snav a:hover, .snav a.is-on { color: var(--rt-primary); } /* Docked under the header (.is-stuck, set in main.js) the bar becomes the header's navy: ground and links cross-fade and an amber line draws along its foot. The active section's underline glides from link to link (.snav__bar). */ .snav { transition: background-color .5s var(--ease), border-color .5s, box-shadow .5s; } .snav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--rt-accent), color-mix(in srgb, var(--rt-accent) 0%, transparent) 75%); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); } .snav__in { position: relative; } .snav__bar { position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--rt-accent); transition: transform .45s var(--ease), width .45s var(--ease); } /* docked: frosted glass like the scrolled header above it (client request 2026-10-29), the page blurred through translucent navy */ .snav.is-stuck { border-color: transparent; background: linear-gradient(color-mix(in srgb, var(--rt-deep) 74%, transparent), color-mix(in srgb, var(--rt-deep) 64%, transparent)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .07), 0 16px 32px -20px rgb(0 0 0 / .6); } .snav.is-stuck::after { transform: scaleX(1); } .snav.is-stuck a { color: rgb(255 255 255 / .74); } .snav.is-stuck a:hover, .snav.is-stuck a.is-on { color: var(--rt-white); } .snav.is-stuck :focus-visible { outline-color: var(--rt-accent); } .spage section[id] { scroll-margin-top: 112px; } /* clear of the header and the section bar */ .anat { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 48px; align-items: center; } .anat__fig { padding: 24px; border: 1px solid var(--rt-border); background-color: var(--rt-white); background-image: linear-gradient(color-mix(in srgb, var(--rt-border) 55%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--rt-border) 55%, transparent) 1px, transparent 1px); background-size: 24px 24px; } .anat__svg { display: block; width: 100%; height: auto; overflow: visible; } .anat__p path, .anat__p rect { fill: color-mix(in srgb, var(--rt-primary) 7%, var(--rt-white)); stroke: var(--rt-primary); stroke-width: 1.6; stroke-linejoin: round; transition: fill .3s, stroke .3s; } .anat__p .anat__ln { fill: none; stroke-width: 1; opacity: .6; } .anat__ctx { fill: none; stroke: var(--rt-muted); stroke-width: 1.2; stroke-dasharray: 4 4; } .anat__p.is-on path, .anat__p.is-on rect { fill: color-mix(in srgb, var(--rt-accent) 26%, var(--rt-white)); stroke: var(--rt-accent-ink); } .anat__flow path { fill: none; stroke-width: 2; stroke-dasharray: 6 5; animation: anat-flow 1.2s linear infinite; } .anat__flow--air { color: var(--rt-primary-light); stroke: var(--rt-primary-light); } .anat__flow--gas { color: var(--rt-accent); stroke: var(--rt-accent); } .anat__flow text { fill: currentColor; stroke: none; font: 600 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; } @keyframes anat-flow { to { stroke-dashoffset: -22; } } .anat__spot { cursor: pointer; } .anat__spot circle { fill: var(--rt-primary); stroke: var(--rt-white); stroke-width: 2; transition: fill .2s, r .2s; } .anat__spot text { fill: var(--rt-white); font: 700 12px/1 var(--font); text-anchor: middle; pointer-events: none; } .anat__spot.is-on circle, .anat__spot:hover circle { fill: var(--rt-accent); } .anat__spot.is-on circle { animation: anat-pulse 1.6s ease-out infinite; } @keyframes anat-pulse { 0% { stroke-width: 2; stroke-opacity: 1; } 100% { stroke-width: 14; stroke-opacity: 0; } } .anat__list { border-top: 1px solid var(--rt-border); } .anat__i { border-bottom: 1px solid var(--rt-border); } .anat__b { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 4px; font-family: "Montserrat", var(--font); font-size: 14px; font-weight: 700; text-align: left; text-transform: uppercase; color: var(--rt-primary); } .anat__n { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--rt-surface); font: 700 12px/1 var(--font); color: var(--rt-primary); transition: background-color .2s, color .2s; } .anat__i.is-on .anat__n { background: var(--rt-accent); color: var(--rt-deep); } .anat__x { display: none; padding: 0 4px 16px 44px; font-size: 14px; line-height: 1.6; color: var(--rt-muted-ink); } .anat__i.is-on .anat__x, html:not(.js) .anat__x { display: block; } .stabs__list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; } .stabs__t { padding: 10px 16px; border: 1px solid var(--rt-border); background: var(--rt-white); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rt-primary); transition: background-color .2s, border-color .2s, color .2s; } .stabs__t:hover { border-color: var(--rt-primary); } .stabs__t[aria-selected="true"] { background: var(--rt-primary); border-color: var(--rt-primary); color: var(--rt-white); box-shadow: inset 0 -3px 0 var(--rt-accent); } .stabs__p { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; padding: 32px; border: 1px solid var(--rt-border); border-top: 3px solid var(--rt-accent); background: var(--rt-white); } .js .stabs__p:not(.is-on) { display: none; } .stabs__p.is-on { animation: stab-in .35s var(--ease); } @keyframes stab-in { from { opacity: 0; transform: translateY(6px); } } .stabs__h { margin-bottom: 18px; font-family: "Montserrat", var(--font); font-size: 26px; font-weight: 800; text-transform: uppercase; color: var(--rt-primary); } .stabs__p .scells { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } .stabs__k { margin-bottom: 12px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rt-muted); } .stabs__p { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); } .smod { border-bottom: 1px solid var(--rt-border); } .smod__g { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-top: 1px solid var(--rt-border); } .smod dt { padding-top: 3px; font-family: "Montserrat", var(--font); font-size: 12px; font-weight: 700; line-height: 1.35; text-transform: uppercase; color: var(--rt-primary); } .smod dd { display: flex; flex-wrap: wrap; gap: 4px; } .smod dd span { padding: 3px 7px; border: 1px solid var(--rt-border); background: var(--rt-surface); font-size: 11.5px; font-weight: 500; line-height: 1.4; font-variant-numeric: tabular-nums; color: var(--rt-primary); transition: border-color .15s, background-color .15s; } .smod dd span:hover { border-color: var(--rt-accent); background: var(--rt-white); } @media (max-width: 640px) { .smod__g { grid-template-columns: minmax(0, 1fr); gap: 6px; } .smod dd span { font-size: 11px; padding: 2px 6px; } } .sdark .eyebrow, .spad.sdark .eyebrow { color: var(--rt-text-dark); } .sdark .sh2 { color: var(--rt-white); } .sdark .shead .stext { color: var(--rt-text-dark); } .sdark .qcard { border: 1px solid var(--rt-line-dark); border-top: 3px solid var(--rt-accent); background: color-mix(in srgb, var(--rt-deep) 88%, transparent); } .sdark .qcard__t { color: var(--rt-white); } .sdark .qcard__d { color: var(--rt-text-dark); } .sdark .scard__tag { color: var(--rt-accent); } /* a case and ruled cells on the navy ground (Gearbox's Selection, 2026-10-20) */ .sdark .ssub { color: var(--rt-white); } .sdark .ssplit .stext { color: var(--rt-text-dark); } .sdark .scells li { border-top-color: var(--rt-line-dark); color: var(--rt-white); } @media (min-width: 1041px) { .sfeat--flip > .sph { order: 2; } } /* the photo on the right, so cases alternate sides */ /* a tight rich page (Gearbox, client request 2026-10-20): shorter sections; case photos cropped low in a narrower column */ .spage--tight .spad { padding: 60px 0; } .spage--tight .shead { margin-bottom: 28px; } .spage--tight .sfeat .sph img { height: 260px; object-fit: cover; } /* its case photos as raised tiles (client request, 2026-10-20): a white frame and a deep shadow; on hover the tile lifts, the photo eases in and a zoom badge shows; a click opens the photo full size */ .spage--tight .sph { position: relative; } .sph__a { position: relative; display: block; padding: 8px; background: var(--rt-white); cursor: zoom-in; box-shadow: 0 36px 64px -30px color-mix(in srgb, var(--rt-deep) 55%, transparent), 0 14px 28px -14px color-mix(in srgb, var(--rt-deep) 28%, transparent); transition: transform .5s var(--ease), box-shadow .5s var(--ease); } .sph__a::before { content: ""; position: absolute; inset: 8px; z-index: 1; border: 1px solid color-mix(in srgb, var(--rt-white) 35%, transparent); pointer-events: none; } .sph__a > img { display: block; transition: transform 1s var(--ease); } .sph__a { overflow: hidden; } .sph__a:is(:hover, :focus-visible) { transform: translateY(-6px); box-shadow: 0 48px 80px -32px color-mix(in srgb, var(--rt-deep) 65%, transparent), 0 18px 32px -14px color-mix(in srgb, var(--rt-deep) 32%, transparent); } .sph__a:is(:hover, :focus-visible) > img { transform: scale(1.05); } .sph__zoom { position: absolute; right: 22px; bottom: 22px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--rt-white) 94%, transparent); color: var(--rt-primary); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--rt-deep) 60%, transparent); opacity: 0; transform: scale(.8); transition: opacity .3s, transform .4s var(--ease); } .sph__zoom .ic { width: 20px; height: 20px; } .sph__a:is(:hover, :focus-visible) .sph__zoom { opacity: 1; transform: none; } .sdark .sph__a { background: color-mix(in srgb, var(--rt-white) 10%, var(--rt-deep)); } .spage--tight .sfeat:not(:last-child) { margin-bottom: 32px; } .spage--tight .sfeat__ic { width: 46px; height: 46px; margin-bottom: 14px; } .spage--tight .sfeat__ic .ic { width: 22px; height: 22px; } .spage--tight .ssplit .ssub { margin: 0 0 12px; font-size: 19px; } .sfeat .stabs__k { margin: 20px 0 4px; } /* the cells' lead-in, inside a case */ .sfeat .scells { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sdark .stabs__k { color: var(--rt-text-dark); } @media (min-width: 1041px) { .spage--tight .sfeat { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; } .spage--tight .sfeat--flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } } @media (max-width: 1040.98px) { .spage--tight .sfeat .sph img { height: 220px; } } /* a case's service icon on a badge above its heading; navy with an amber icon when the case is hovered */ .sfeat__ic { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 22px; border: 1px solid var(--rt-border); border-radius: 14px; background: var(--rt-white); color: var(--rt-primary); box-shadow: 0 14px 28px -18px color-mix(in srgb, var(--rt-deep) 45%, transparent); transition: background-color .35s, border-color .35s, color .35s, transform .45s var(--ease); } .sfeat__ic .ic { width: 26px; height: 26px; } .sdark .sfeat__ic { border-color: var(--rt-line-dark); background: color-mix(in srgb, var(--rt-deep) 70%, transparent); color: var(--rt-accent); } .sfeat:hover .sfeat__ic { background: var(--rt-primary); border-color: var(--rt-primary); color: var(--rt-accent); transform: translateY(-3px); } @media (max-width: 1040px) { .sfacts__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sfacts__c:nth-child(3) { border-left: 0; padding-left: 0; } .sfacts__c:nth-child(n + 3) { border-top: 1px solid var(--rt-border); } .anat { grid-template-columns: minmax(0, 1fr); gap: 28px; } .stabs__p { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .sfacts dt { font-size: 30px; } .sfacts__c { padding: 22px 14px 20px; } .anat__fig { padding: 6px; } .anat__spot circle { r: 24px; } /* hotspots stay finger-sized when the drawing shrinks */ .anat__spot text { font-size: 22px; transform: translateY(4px); } .anat__flow text { font-size: 20px; } .stabs__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); } .stabs__t { flex: none; } .stabs__p { padding: 22px 18px; } .stabs__h { font-size: 21px; } } @media (prefers-reduced-motion: reduce) { .anat__flow path, .anat__spot.is-on circle, .stabs__p.is-on { animation: none; } } /* Rich service blocks (Engine Overhauling, the client's technical profile, 2026-10-16), in turbointernacional.com's service-page parts: light Montserrat capitals over two-column lists ("Components" / "Failure modes"), the process as a crumb-like line, short steps and names as ruled cells (their multi-brand grid), the running hours as their figures band, tables ruled like the ledger, plain notes, reference cards, a captioned photo plate. */ .ssub { margin: 0 0 18px; font-family: "Montserrat", var(--font); font-size: 22px; font-weight: 400; line-height: 1.2; text-transform: uppercase; color: var(--rt-primary); } .ssplit .ssub { margin-top: 28px; } .scols { margin-top: 48px; row-gap: 48px; } .shead + .scols { margin-top: 0; } .scols .stext { margin-bottom: 18px; } .scols .slrow__t { flex-basis: 110px; } /* short labels (Respond, Balancing…) in a half-width column */ .scols .slrow { gap: 16px; } .sflow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin-top: 26px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rt-primary); } .sflow li + li::before { content: "›"; margin: 0 10px; color: var(--rt-muted); } .sflow li:last-child { color: var(--rt-accent-ink); } .scells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 26px; } .scols .scells { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin-top: 24px; } .scells li { padding: 14px 0 13px; border-top: 1px solid var(--rt-border); font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: .07em; text-transform: uppercase; color: var(--rt-primary); } .scells b { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 500; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--rt-muted); } .sstats--hours { grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; } .sstats--fig { margin: 0 0 48px; } .sfeat { margin-top: 48px; } .shead + .sfeat, .sstats--fig + .sfeat { margin-top: 0; } .sfeat .stext:last-child { margin-bottom: 0; } .sfeat .sph img { height: auto; } /* case photos and slides shown whole, at their own shape */ .sfeat:not(:last-child) { margin-bottom: 48px; } /* room before steps or a subhead that follow the case */ @media (min-width: 1041px) { .scards:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* four cards in one row */ @media (min-width: 641px) { .scards:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* two cards share the row */ .scompact .wrap { display: grid; gap: 28px 64px; align-items: center; } .scompact .shead { margin-bottom: 0; } .scompact .scards { grid-template-columns: minmax(0, 1fr); } @media (min-width: 1041px) { .scompact .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* compact band: heading left, card right */ @media (max-width: 640px) { /* the case figures stay three across */ .sstats--fig { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sstats--fig .sstats__cell { padding: 16px 8px 14px; border-top: 0; } .sstats--fig .sstats__cell + .sstats__cell { border-left: 1px solid var(--rt-border); } .sstats--fig .sstats__cell:first-child { padding-left: 0; } .sstats--fig b { font-size: 19px; } .sstats--fig .sstats__cell > span { font-size: 10px; letter-spacing: .08em; } } .sstats--hours b { font-size: 30px; } .sstats--hours .sstats__cell { padding: 24px 18px 22px; } .sstats--hours .sstats__cell:first-child { padding-left: 0; } .stable { width: 100%; border-collapse: collapse; border-top: 1px solid var(--rt-border); } .stable th, .stable td { padding: 22px 18px 22px 6px; border-bottom: 1px solid var(--rt-border); text-align: left; vertical-align: top; } .stable thead th { padding-block: 12px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rt-muted); } .stable tbody th { font-family: "Montserrat", var(--font); font-size: 15px; font-weight: 700; line-height: 1.3; text-transform: uppercase; color: var(--rt-primary); } .stable td { font-size: 13px; line-height: 1.65; color: var(--rt-muted); } .stable tbody tr { transition: background-color .18s; } .stable tbody tr:hover { background: var(--rt-surface); } .spad--bone .stable tbody tr:hover { background: var(--rt-white); } .snote { max-width: 760px; margin-top: 20px; font-size: 13px; line-height: 1.65; color: var(--rt-muted); } .spad:not(.spad--bone) .qcard { border: 1px solid var(--rt-border); } .scard__tag { margin-bottom: 10px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rt-muted); } .qcards + .scells { margin-top: 40px; grid-template-columns: repeat(5, minmax(0, 1fr)); } .splate { margin: 48px 0 14px; font-size: 13px; font-weight: 600; line-height: 1.65; letter-spacing: .14em; text-transform: uppercase; color: var(--rt-muted); } /* photo strips: one height, natural shapes, captions under; arrows (circle buttons) off at the ends */ .sstrip { margin-top: 48px; } .sstrip__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .sstrip__head .splate { margin: 0; } .sstrip__nav { display: flex; gap: 8px; } .sstrip.is-static .sstrip__nav { display: none; } .shead + .sstrip--bare { margin-top: -58px; } /* under a section heading (Gallery): the arrows sit beside the seam, the photos keep the usual gap */ .shead + .sstrip--bare.is-static { margin-top: 0; } .sstrip__btn { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--rt-border); border-radius: 50%; background: var(--rt-white); color: var(--rt-primary); transition: background-color .15s, border-color .15s, color .15s, opacity .15s; } .sstrip__btn .ic { width: 18px; height: 18px; } .sstrip__btn:disabled { opacity: .35; cursor: default; } @media (hover: hover) { .sstrip__btn:not(:disabled):hover { background: var(--rt-primary); border-color: var(--rt-primary); color: var(--rt-white); } } .sstrip__track { --h: clamp(210px, 21vw, 300px); display: flex; gap: 16px; padding-bottom: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--rt-border) transparent; } .sstrip__i { flex: none; width: calc(var(--h) * var(--r)); scroll-snap-align: start; } .sstrip__i a { display: block; height: var(--h); overflow: hidden; background: var(--rt-surface); } .sstrip__i img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } @media (hover: hover) { .sstrip__i a:hover img { transform: scale(1.04); } } .sstrip__cap { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--rt-muted); } .sstrip__cap b { margin-right: 8px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--rt-primary); } @media (prefers-reduced-motion: reduce) { .sstrip__track { scroll-behavior: auto; } .sstrip__i img { transition: none; } } @media (max-width: 640px) { .sstrip__track { --h: 200px; gap: 12px; } .sstrip { margin-top: 36px; } } @media (max-width: 1040px) { .sstats--hours { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sstats--hours .sstats__cell:nth-child(4) { border-left: 0; padding-left: 0; } .scells, .qcards + .scells { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .scells, .qcards + .scells { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } .sstats--hours { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sstats--hours b { font-size: 24px; white-space: nowrap; } .sstats--hours .sstats__cell:nth-child(odd) { border-left: 0; padding-left: 0; } .sstats--hours .sstats__cell:nth-child(4) { border-left: 1px solid var(--rt-border); padding-left: 18px; } .ssub { font-size: 19px; } .stable thead { display: none; } .stable tr { display: block; padding: 16px 0; border-bottom: 1px solid var(--rt-border); } .stable th, .stable td { display: block; padding: 2px 0; border: 0; } .stable tbody th { margin-bottom: 6px; } .stable td::before { content: attr(data-th) ": "; font-weight: 600; color: var(--rt-muted-ink); } } @media (max-width: 1040px) { .ssplit { grid-template-columns: minmax(0, 1fr); gap: 36px; } } @media (max-width: 640px) { .spad { padding: 56px 0; } .sh2 { font-size: 26px; } .sgrid2 { grid-template-columns: minmax(0, 1fr); } .chev--2 { columns: 1; } .sph img { height: 280px; } .slrow { flex-wrap: wrap; row-gap: 4px; } .slrow__t { flex: 1 0 auto; max-width: calc(100% - 50px); } .slrow__no--ic { width: 40px; height: 40px; border-radius: 10px; } .slrow:has(.slrow__no--ic) .slrow__t { max-width: calc(100% - 70px); } .slrow:has(.slrow__no--ic) .slrow__d { padding-left: 66px; } /* the text lines up under the title, not the tile */ .slrow__d { flex: 0 0 100%; } /* the reference hides it on phones; ours stays */ .slrow--link .slrow__t { max-width: none; flex: 1; } .semerg__in .pill { margin-left: 0; } .semerg__in .hero__dot { display: none; } /* alone on its own line at this width */ } @media (min-width: 900px) { .wcols { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } } .wposts__list { border-top: 1px solid var(--rt-border); } .wposts a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding-block: 13px; border-bottom: 1px solid var(--rt-border); } .wposts__t { font-size: .9375rem; font-weight: 700; line-height: 1.4; transition: color .25s var(--ease); } .wposts .ic { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 16px; height: 16px; color: var(--rt-primary); transition: transform .25s var(--ease); } .wposts a:hover .wposts__t { color: var(--rt-primary); } .wposts a:hover .ic { transform: translateX(4px); } /* capability index: ruled rows, the whole row is the link */ .wrows { border-top: 1px solid var(--rt-border); } .wrow { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) 20px; gap: 8px 16px; align-items: start; padding-block: 18px; border-bottom: 1px solid var(--rt-border); } .wrow::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 2px; background: var(--rt-accent); transition: width .4s var(--ease); } .wrow__no { padding-top: .35em; font-size: .75rem; font-weight: 700; letter-spacing: .08em; color: var(--rt-accent-ink); font-variant-numeric: tabular-nums; } .wrow__t { font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem); font-weight: 700; line-height: 1.25; letter-spacing: -.015em; transition: color .25s var(--ease); } .wrow__go { grid-column: 3; grid-row: 1; align-self: center; display: flex; color: var(--rt-primary); transition: transform .3s var(--ease); } .wrow__go .ic { width: 18px; height: 18px; } .wrow:hover::before, .wrow:focus-within::before, .wrow.is-current::before { width: 48px; } .wrow:hover .wrow__t, .wrow.is-current .wrow__t { color: var(--rt-primary); } .wrow:hover .wrow__go { transform: translateX(6px); } .wrows--compact { display: grid; column-gap: var(--col-gap); } .wrows--compact .wrow { align-items: center; padding-block: 13px; } .wrows--compact .wrow__no { padding-top: 0; } .wrows--compact .wrow__t { font-size: 1rem; } @media (min-width: 700px) { .wrows--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* contact band, compact */ /* ---------- Other Service pages (content/other-services.json, drawn by service.php, 2026-10-20) ---------- The opening block's index of the page's services: icon, name, link to its section; amber on hover. */ .oidx { position: relative; padding: 26px 28px 10px; border: 1px solid var(--rt-border); background: var(--rt-white); box-shadow: 0 24px 48px -36px color-mix(in srgb, var(--rt-deep) 55%, transparent); } .oidx::before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px; background: var(--rt-accent); } .oidx ol { margin: 0; padding: 0; list-style: none; } .oidx__h { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 14px; } .oidx__h span { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rt-muted-ink); } .oidx__h b { font-family: "Montserrat", var(--font); font-size: 34px; font-weight: 800; line-height: 1; color: var(--rt-primary); } .oidx a { display: grid; grid-template-columns: 34px minmax(0, 1fr) 16px; gap: 10px; align-items: center; padding: 13px 0; border-top: 1px solid var(--rt-border); font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--rt-primary); transition: color .2s, padding .3s var(--ease); } .oidx__n { font-size: 12px; font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--rt-muted); transition: color .2s; } .oidx a > .ic { width: 16px; height: 16px; color: var(--rt-accent); opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .35s var(--ease); } .oidx a:is(:hover, :focus-visible) { padding-left: 6px; } .oidx a:is(:hover, :focus-visible) .oidx__n { color: var(--rt-accent); } .oidx a:is(:hover, :focus-visible) > .ic { opacity: 1; transform: none; } .oidx__n .ic { width: 20px; height: 20px; } @media (max-width: 640px) { .oidx { padding: 22px 20px 6px; } .sfeat .scells { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* figures bands of three (most Other Service pages) */ .sfacts__in:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* a case's second photo (Commissioning & Testing, 2026-10-24): a small raised tile on the photo's top corner, over the gap beside it */ .sph__in { position: absolute; z-index: 2; top: -22px; right: -26px; width: 26%; padding: 6px; } .sph__in::before { inset: 6px; } .spage--tight .sfeat .sph__in > img { width: 100%; height: auto; aspect-ratio: auto; } .sph__in:is(:hover, :focus-visible) { transform: translateY(-4px) rotate(-1deg); } @media (min-width: 1041px) { .sfeat--flip .sph__in { right: auto; left: -26px; } .sfeat--flip .sph__in:is(:hover, :focus-visible) { transform: translateY(-4px) rotate(1deg); } } /* a photo on the right: the inset leans toward the text */ @media (max-width: 1040.98px) { .sph__in { top: auto; right: 14px; bottom: -18px; width: 22%; max-width: 120px; } .sph--duo { margin-bottom: 18px; } } /* the two project pages: two wide tiles, the photo faintly there at rest */ .score--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } .score--wide .score__i { min-height: 168px; padding: 22px 24px 20px; } .score--wide .score__t { font-size: 15px; } .score--wide .score__img { opacity: .12; } @media (max-width: 1040.98px) { .score.score--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; overflow: visible; } .score--wide .score__i { min-height: 140px; padding: 16px; } .score--wide .score__t { font-size: 12px; } } /* ---------- Company pages in the Project Execution pages' style (client request, 2026-10-24): a section's icon badge above its eyebrow (navy with an amber icon while the section is hovered); credential cards that lift with an amber edge; the certificates on the navy photo ground with a zoom badge ---------- */ :is(.shead, .ssplit > div, .sblk) > .sfeat__ic { margin-bottom: 18px; } :is(.shead, .ssplit > div, .sblk):hover > .sfeat__ic { background: var(--rt-primary); border-color: var(--rt-primary); color: var(--rt-accent); transform: translateY(-3px); } .sdark :is(.shead, .ssplit > div, .sblk):hover > .sfeat__ic { background: var(--rt-accent); border-color: var(--rt-accent); color: var(--rt-deep); } .qcards--lift .qcard { position: relative; overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease); } .qcards--lift .qcard::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--rt-accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); } .qcards--lift .qcard:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px color-mix(in srgb, var(--rt-deep) 55%, transparent), 0 10px 20px -12px color-mix(in srgb, var(--rt-deep) 20%, transparent); } .qcards--lift .qcard:hover::before { transform: scaleX(1); } .qcards--lift .qcard__logo img { transition: transform .5s var(--ease); } .qcards--lift .qcard:hover .qcard__logo img { transform: scale(1.06); } .qdoc__img { position: relative; } .qdoc:is(:hover, :focus-visible) .sph__zoom { opacity: 1; transform: none; } .sdark .qdoc__img { background: color-mix(in srgb, var(--rt-white) 7%, transparent); border-top-color: var(--rt-line-dark); box-shadow: 0 30px 50px -30px rgb(0 0 0 / .6); transition: border-color .2s, transform .45s var(--ease); } .sdark .qdoc:hover .qdoc__img { border-color: var(--rt-accent); transform: translateY(-6px); } .sdark .qdoc__t { color: var(--rt-white); } .sdark :is(.qdoc__no, .qdoc__d) { color: var(--rt-text-dark); } /* text on the navy photo ground (Facilities testing, 2026-10-24) */ .sdark .stext, .sdark .chev li { color: var(--rt-text-dark); } .sdark .chev li { border-color: var(--rt-line-dark); } .sdark .chev strong { color: var(--rt-white); } /* News (2026-10-24): cards lift with an amber edge on hover. Compact premium pass (2026-10-29): on the News page four columns on wide screens, each card a 16:10 photo, date · topic, a three-line title, a two-line excerpt and an arrow disc at its foot; the newest post runs the full row as the lead story, photo beside the text. Other lists keep three columns. */ .ncard__a { position: relative; transition: border-color .2s, box-shadow .45s var(--ease), transform .45s var(--ease); } .ncard__a::before { content: ""; position: absolute; inset: -1px -1px auto; z-index: 1; height: 3px; background: var(--rt-accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); } @media (hover: hover) { .ncards .ncard__a:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -28px color-mix(in srgb, var(--rt-deep) 55%, transparent), 0 8px 18px -12px color-mix(in srgb, var(--rt-deep) 18%, transparent); } .ncard__a:hover::before { transform: scaleX(1); } } .ncard__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; } .ncard__topic { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rt-accent-ink); } .ncard__go { display: none; } .ncards--news { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .ncards--news .ncard__img { aspect-ratio: 16 / 10; } .ncards--news .ncard__body { flex: 1; gap: 8px; padding: 18px 20px 20px; } .ncards--news .ncard__t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 15.5px; line-height: 1.35; } .ncards--news .ncard__x { -webkit-line-clamp: 2; line-height: 1.6; } .ncards--news .ncard__go { display: grid; place-items: center; align-self: flex-end; width: 34px; height: 34px; margin-top: auto; border: 1px solid var(--rt-border); border-radius: 50%; color: var(--rt-primary); transition: background-color .2s, border-color .2s, color .2s, transform .35s var(--ease); } .ncards--news .ncard__go .ic { width: 15px; height: 15px; } @media (hover: hover) { .ncards--news .ncard__a:hover .ncard__go { background: var(--rt-accent); border-color: var(--rt-accent); color: var(--rt-deep); transform: translateX(3px); } } @media (max-width: 1240px) { .ncards--news { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1040px) { .ncards--news { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { /* phones: the lead story as a card, every other post a compact row: square photo, date · topic, title */ .ncards--news { grid-template-columns: minmax(0, 1fr); gap: 12px; } .ncards--news .ncard__a { flex-direction: row; min-height: 112px; } .ncards--news .ncard__img { flex: 0 0 112px; aspect-ratio: 1; } .ncards--news .ncard__body { gap: 6px; padding: 12px 14px; justify-content: center; } .ncards--news .ncard__t { font-size: 14.5px; } .ncards--news .ncard__x, .ncards--news .ncard__go { display: none; } .ncards--lead > .ncard:first-child .ncard__a { flex-direction: column; } .ncards--lead > .ncard:first-child .ncard__img { flex: none; aspect-ratio: 16 / 10; } .ncards--lead > .ncard:first-child .ncard__body { padding: 18px 20px 20px; } .ncards--lead > .ncard:first-child .ncard__t { font-size: 17px; } .ncards--lead > .ncard:first-child .ncard__x { display: -webkit-box; } } @media (min-width: 641px) { .ncards--lead > .ncard:first-child { grid-column: 1 / -1; } .ncards--lead > .ncard:first-child .ncard__a { flex-direction: row; min-height: 340px; } .ncards--lead > .ncard:first-child .ncard__img { position: relative; flex: 0 0 56%; aspect-ratio: auto; } /* the photo fills the row, it does not set its height */ .ncards--lead > .ncard:first-child .ncard__img img { position: absolute; inset: 0; } .ncards--lead > .ncard:first-child .ncard__body { justify-content: center; gap: 14px; padding: 36px 40px; } .ncards--lead > .ncard:first-child .ncard__t { -webkit-line-clamp: 4; font-family: "Montserrat", var(--font); font-size: 24px; font-weight: 800; line-height: 1.2; text-transform: uppercase; } .ncards--lead > .ncard:first-child .ncard__x { -webkit-line-clamp: 3; font-size: 15px; } .ncards--lead > .ncard:first-child .ncard__go { width: 46px; height: 46px; margin-top: 8px; align-self: flex-start; } .ncards--lead > .ncard:first-child .ncard__go .ic { width: 18px; height: 18px; } } @media (min-width: 641px) and (max-width: 900px) { .ncards--lead > .ncard:first-child .ncard__a { min-height: 280px; } .ncards--lead > .ncard:first-child .ncard__img { flex-basis: 48%; } .ncards--lead > .ncard:first-child .ncard__body { padding: 26px 28px; } .ncards--lead > .ncard:first-child .ncard__t { font-size: 19px; } } /* FAQ topics (2026-10-24): the topic's badge, heading and question count stay beside its questions while they scroll */ @media (min-width: 1041px) { .sfaq2 .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; align-items: start; } .sfaq2 .shead { position: sticky; top: 150px; margin: 0; } } .sfaq2__n { display: flex; align-items: baseline; gap: 10px; margin-top: 22px; } .sfaq2__n b { font-family: "Montserrat", var(--font); font-size: 28px; font-weight: 800; line-height: 1; color: var(--rt-primary); } .sfaq2__n span { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rt-muted); } /* a photo strip on the navy photo ground (On-site balancing, 2026-10-27): light captions, arrows on glass */ .sdark .sstrip__cap { color: var(--rt-text-dark); } .sdark .sstrip__cap b { color: var(--rt-accent); } .sdark .sstrip__btn { border-color: var(--rt-line-dark); background: color-mix(in srgb, var(--rt-white) 8%, transparent); color: var(--rt-white); } /* a closing note on the navy photo ground (Rim and face alignment, 2026-10-27); a ledger description split from its label (Laser alignment's What we do) starts with a capital, the text itself unchanged */ .sdark .snote { color: var(--rt-text-dark); } .slrow__d::first-letter { text-transform: uppercase; } /* ---------- News article (2026-10-27, premium like the service pages): the article beside a sticky aside of recent posts; the featured photo as a raised tile; previous / next as photo cards ---------- */ .particle { display: grid; gap: 48px 64px; align-items: start; } @media (min-width: 1041px) { .particle:not(.particle--solo) { grid-template-columns: minmax(0, 1fr) 320px; } } .particle__main { min-width: 0; } .particle__main > .particle__fig { margin-bottom: 36px; } .particle__fig .sph__a > img { width: 100%; height: auto; } .particle--solo .entry { max-width: 820px; } .particle-page .hero--sub .hero__title.particle__title { max-width: 900px; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.15; } .particle__foot { display: grid; gap: 20px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--rt-border); } .particle__k { margin-bottom: 14px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rt-muted); } @media (min-width: 1041px) { .particle__aside { position: sticky; top: 100px; } } .particle__aside { padding: 24px; border: 1px solid var(--rt-border); border-top: 3px solid var(--rt-accent); background: var(--rt-white); box-shadow: 0 24px 44px -32px color-mix(in srgb, var(--rt-deep) 45%, transparent); } .rposts li + li { border-top: 1px solid var(--rt-border); } .rpost { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 0; } .rpost__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--rt-surface); } .rpost__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .rpost__d { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--rt-muted); } .rpost__t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--rt-primary); transition: color .2s; } .rpost:hover .rpost__img img { transform: scale(1.06); } .rpost:hover .rpost__t { color: var(--rt-accent-ink); } .particle__all { display: inline-flex; margin-top: 16px; } .pnav { display: grid; gap: 16px; margin-top: 40px; } @media (min-width: 700px) { .pnav { grid-template-columns: 1fr 1fr; } } .pnav__a { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px 14px 14px; border: 1px solid var(--rt-border); background: var(--rt-white); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .2s; } .pnav__a:not(:has(.pnav__img)) { grid-template-columns: minmax(0, 1fr) auto; } .pnav__a--next { grid-column: -2; } .pnav__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); } .pnav__img img { width: 100%; height: 100%; object-fit: cover; } .pnav__k { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rt-accent-ink); } .pnav__t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--rt-primary); } .pnav__go { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--rt-border); border-radius: 50%; color: var(--rt-primary); transition: background-color .3s, border-color .3s, color .3s, transform .4s var(--ease); } .pnav__go .ic { width: 15px; height: 15px; } .pnav__a--prev .pnav__go { transform: rotate(180deg); } .pnav__a:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--rt-primary) 30%, var(--rt-border)); box-shadow: 0 24px 40px -28px color-mix(in srgb, var(--rt-deep) 55%, transparent); } .pnav__a:hover .pnav__go { background: var(--rt-accent); border-color: var(--rt-accent); color: var(--rt-deep); } /* ---------- Services hub (2026-10-27, client request "super premium … group wise"): group heads with an icon badge and number; tall photo cards (photo full bleed under a navy gradient, number, title, opening sentence, Read More) that lift while the photo eases in; a short last row centred; the one-service group as a feature on the navy photo ground with the page's figures; Projects as two large cards with their services as chips ---------- */ .hhead { max-width: none; } .hhead .sfeat__ic { margin-bottom: 16px; } .hsub { display: flex; align-items: baseline; gap: 12px; margin: 8px 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--rt-border); font-family: "Montserrat", var(--font); font-size: 17px; font-weight: 700; text-transform: uppercase; color: var(--rt-primary); } .hsub b { font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--rt-accent-ink); } .hcards + .hsub { margin-top: 44px; } .hcards { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; } .hcards > li { flex: 0 0 calc((100% - (var(--c, 4) - 1) * 18px) / var(--c, 4)); } .hcard { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-height: 380px; overflow: hidden; border-radius: var(--r); background: var(--rt-deep); color: var(--rt-white); box-shadow: 0 28px 48px -32px color-mix(in srgb, var(--rt-deep) 70%, transparent); transition: transform .5s var(--ease), box-shadow .5s var(--ease); } .hcard::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 2; height: 3px; background: var(--rt-accent); transform: scaleX(.2); transform-origin: left; transition: transform .7s cubic-bezier(.32, .72, 0, 1); } .hcard__img { position: absolute; inset: 0; z-index: -1; } .hcard__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.1s var(--ease); } .hcard__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--rt-deep) 97%, transparent) 0%, color-mix(in srgb, var(--rt-deep) 78%, transparent) 40%, color-mix(in srgb, var(--rt-deep) 12%, transparent) 100%); transition: opacity .6s; } .hcard__no { position: absolute; top: 16px; left: 20px; font-family: "Montserrat", var(--font); font-size: 40px; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--rt-white) 50%, transparent); transition: -webkit-text-stroke-color .4s; } .hcard__body { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 24px; } .hcard__t { font-family: "Montserrat", var(--font); font-size: 16px; font-weight: 700; line-height: 1.25; text-transform: uppercase; } .hcard__x { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 13.5px; line-height: 1.55; color: color-mix(in srgb, var(--rt-white) 80%, transparent); } .hcard__go { margin-top: 6px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--rt-accent); } .hcard__go .arr { display: inline-block; transition: transform .35s var(--ease); } .hcard:is(:hover, :focus-visible) { transform: translateY(-6px); box-shadow: 0 40px 64px -34px color-mix(in srgb, var(--rt-deep) 80%, transparent); } .hcard:is(:hover, :focus-visible)::before { transform: scaleX(1); } .hcard:is(:hover, :focus-visible) .hcard__img img { transform: none; } .hcard:is(:hover, :focus-visible) .hcard__img::after { opacity: .85; } .hcard:is(:hover, :focus-visible) .hcard__no { -webkit-text-stroke-color: var(--rt-accent); } .hcard:is(:hover, :focus-visible) .hcard__go .arr { transform: translateX(5px); } .hfeat { align-items: center; } .hfeat__t { margin-bottom: 14px; font-family: "Montserrat", var(--font); font-size: 24px; font-weight: 800; line-height: 1.2; text-transform: uppercase; color: var(--rt-white); } .hfeat__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 22px 0 26px; } .hfeat__facts > div { padding: 14px 0; border-top: 1px solid var(--rt-line-dark); } .hfeat__facts dt { font-family: "Montserrat", var(--font); font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--rt-white); } .hfeat__facts dd { margin-top: 6px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rt-text-dark); } .hproj { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .hproj__i { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--rt-border); border-radius: var(--r); background: var(--rt-white); box-shadow: 0 28px 48px -36px color-mix(in srgb, var(--rt-deep) 60%, transparent); transition: transform .5s var(--ease), box-shadow .5s var(--ease); } .hproj__i:hover { transform: translateY(-6px); box-shadow: 0 40px 64px -36px color-mix(in srgb, var(--rt-deep) 70%, transparent); } .hproj__img { position: relative; display: block; aspect-ratio: 16 / 8; overflow: hidden; } .hproj__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .hproj__i:hover .hproj__img img { transform: scale(1.05); } .hproj__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--rt-deep) 75%, transparent), transparent 55%); } .hproj__tag { position: absolute; left: 22px; bottom: 18px; z-index: 1; display: flex; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rt-accent); } .hproj__tag b { font-weight: 500; color: color-mix(in srgb, var(--rt-white) 75%, transparent); } .hproj__body { display: flex; flex-direction: column; gap: 12px; padding: 24px 26px 26px; } .hproj__t { font-family: "Montserrat", var(--font); font-size: 20px; font-weight: 800; line-height: 1.2; text-transform: uppercase; color: var(--rt-primary); } .hproj__t a:hover { color: var(--rt-accent-ink); } .hproj__x { font-size: 14px; line-height: 1.6; color: var(--rt-muted-ink); } .hchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .hchips a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid var(--rt-border); border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--rt-primary); transition: background-color .25s, border-color .25s, color .25s; } .hchips a:hover { background: var(--rt-primary); border-color: var(--rt-primary); color: var(--rt-white); } @media (max-width: 1040px) { .hcards > li { flex-basis: calc((100% - 18px) / 2); } .hcard { min-height: 340px; } } @media (max-width: 640px) { .hcards > li { flex-basis: 100%; } .hcard { min-height: 300px; } .hproj { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .hcard, .hcard::before, .hcard__img img, .hproj__i, .hproj__img img { transition: none; } } /* reference cards across a full section: a short last row sits centred (Engine Overhauling's seven sites, 2026-10-27) */ .spad:not(.scompact) > .wrap > .scards { display: flex; flex-wrap: wrap; justify-content: center; } .spad:not(.scompact) > .wrap > .scards > li { flex: 0 0 calc((100% - 48px) / 3); } @media (max-width: 1040px) { .spad:not(.scompact) > .wrap > .scards > li { flex-basis: calc((100% - 24px) / 2); } } @media (max-width: 640px) { .spad:not(.scompact) > .wrap > .scards > li { flex-basis: 100%; } } /* the contact a page's closing band names (2026-10-27): email and phone as light links with amber icons */ .qband__contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: -8px 0 26px; } .qband__contact a { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--rt-white); transition: color .2s; } .qband__contact a:hover { color: var(--rt-accent); } .qband__contact .ic { width: 17px; height: 17px; color: var(--rt-accent); } /* a cut-out on white shows whole in its photo tile */ .sph--contain .sph__a > img { padding: 12px; background: var(--rt-white); object-fit: contain; } /* ---------- Plugins ---------- */ /* The Events Calendar (Media) */ body:not(.rt-dark-top) .hdr + * { padding-top: calc(var(--hdr) + var(--meta) + 48px); overflow-x: clip; } @media (max-width: 1040.98px) { body:not(.rt-dark-top) .hdr + * { padding-top: calc(var(--hdr) + 40px); } } :root:root { --tec-color-accent-primary: var(--rt-primary); --tec-color-accent-primary-hover: var(--rt-primary-light); --tec-color-accent-primary-active: var(--rt-primary-light); --tec-color-accent-primary-background: var(--rt-primary); --tec-color-button-primary: var(--rt-primary); --tec-color-button-primary-hover: var(--rt-primary-light); --tec-color-button-primary-active: var(--rt-primary-light); --tec-color-button-primary-background: var(--rt-primary); --tec-color-link-accent: var(--rt-primary); --tec-color-link-accent-hover: var(--rt-primary-light); --tec-color-icon-focus: var(--rt-primary); --tec-color-event-icon-hover: var(--rt-primary); --tec-color-background-primary-multiday: var(--rt-primary); --tec-color-background-primary-multiday-hover: var(--rt-primary-light); --tec-color-text-primary: var(--rt-text); --tec-color-text-secondary: var(--muted-text); --tec-color-border-default: var(--rt-border); --tec-font-family-sans-serif: var(--font); --tec-font-family-base: var(--font); --tec-border-radius-default: 4px; } .tribe-events-pg-template { max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); padding-bottom: var(--sec); } /* Contact Form 7 (if a form is embedded in post content) */ .wpcf7 input:not([type=submit]):not([type=checkbox]):not([type=radio]), .wpcf7 textarea, .wpcf7 select { width: 100%; padding: 12px 14px; border: 1px solid var(--rt-border); border-radius: var(--r); background: var(--rt-white); } .wpcf7 input[type=submit] { min-height: 52px; padding: 0 26px; border: 0; border-radius: var(--r); background: var(--rt-primary); color: var(--rt-white); font-weight: 700; cursor: pointer; } /* Cookie banner (CookieYes) — typography and geometry only */ .cky-consent-container, .cky-modal { font-family: var(--font) !important; } .cky-consent-container .cky-consent-bar, .cky-modal .cky-modal-content { border-radius: var(--r) !important; } .cky-btn { border-radius: var(--r) !important; font-weight: 700 !important; } /* ---------- Motion (initial states only when JS + motion allowed) ---------- */ @media (prefers-reduced-motion: no-preference) { .js [data-reveal], .js [data-reveal-group] > *, .js [data-hero-item] { opacity: 0; } .js .hero__title .line > span, .js .phero__title .line > span, .js [data-mask] .line > span { transform: translateY(105%); } .js [data-image] { clip-path: inset(0 100% 0 0); } .js [data-image="right"] { clip-path: inset(0 0 0 100%); } .js .rule { transform: scaleX(0); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* Accessible-only text (WordPress convention) */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .search-form .search-submit { display: grid; place-items: center; width: 48px; padding: 0; } .meta__count { display: inline-flex; align-items: center; gap: 6px; } .meta__count .ic { width: 15px; height: 15px; } /* Grid items never grow past their track because of long content */ .grid > *, .split > *, .chapter > *, .row > *, .article > *, .posts > *, .figs > *, .head-split > * { min-width: 0; } .entry { overflow-wrap: break-word; } .entry img, .entry video, .entry iframe { max-width: 100%; height: auto; } .entry figure { max-width: 100%; } /* ---------- About us (2026-10-28, the client's document; client request "best premium animated dynamic"): the client's stamps floating on the hero; founders as glass cards with initials; the timeline after the document's reference (dashed centre line that fills amber on scroll, a dot per entry lighting as it passes, entries alternating sides, one column on phones); certificate badges with their numbers that open the scans; partner logos in two labelled rows; the location beside the map with the figures; workshop photos ---------- */ .abt { --tile-shadow: 0 1px 2px color-mix(in srgb, var(--rt-deep) 7%, transparent), 0 10px 24px -6px color-mix(in srgb, var(--rt-deep) 12%, transparent), 0 28px 56px -18px color-mix(in srgb, var(--rt-deep) 18%, transparent); } .abt-stamps { position: absolute; z-index: 3; right: max(24px, calc(50% - 600px)); top: calc(50% + (var(--hdr) + var(--meta)) / 2); display: flex; transform: translateY(-50%); } .abt-stamps img { width: 140px; height: auto; filter: drop-shadow(0 18px 30px color-mix(in srgb, var(--rt-deep) 60%, transparent)); animation: abt-float 6s ease-in-out infinite; } .abt-stamps img + img { margin-left: 18px; animation-delay: -3s; } @keyframes abt-float { 50% { transform: translateY(-10px) rotate(-3deg); } } /* timeline */ .tl { position: relative; padding: 22px 0 6px; } .tl__line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--rt-white) 35%, transparent) 0 8px, transparent 8px 16px); } .tl__fill { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, var(--rt-accent) 0 8px, transparent 8px 16px); transform-origin: top; } .tl__list { position: relative; display: grid; gap: 38px; } .tl__i { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: center; column-gap: 26px; } .tl__dot { grid-column: 2; grid-row: 1; justify-self: center; width: 26px; height: 26px; border-radius: 50%; background: var(--rt-white); box-shadow: 0 0 0 7px color-mix(in srgb, var(--rt-primary-light) 90%, transparent); transition: background-color .4s, box-shadow .4s; } .tl__i.is-on .tl__dot { background: var(--rt-accent); box-shadow: 0 0 0 7px color-mix(in srgb, var(--rt-accent) 30%, transparent), 0 0 30px color-mix(in srgb, var(--rt-accent) 60%, transparent); } .tl__when { display: flex; flex-direction: column; gap: 6px; } .tl__y { font-family: "Montserrat", var(--font); font-size: 52px; font-weight: 800; line-height: 1; color: var(--rt-white); } .tl__d { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rt-accent); } .tl__what { max-width: 400px; } .tl__t { font-family: "Montserrat", var(--font); font-size: 15px; font-weight: 700; line-height: 1.4; letter-spacing: .03em; text-transform: uppercase; color: var(--rt-white); } .tl__x { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--rt-text-dark); } /* the first entry and every second one: caption left, year right; the others the other way round (the document's reference) */ .tl__i:nth-child(odd) .tl__what { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; } .tl__i:nth-child(odd) .tl__when { grid-column: 3; grid-row: 1; align-items: flex-start; } .tl__i:nth-child(even) .tl__when { grid-column: 1; grid-row: 1; align-items: flex-end; } .tl__i:nth-child(even) .tl__what { grid-column: 3; grid-row: 1; } /* founders: two cards side by side, opening in from their sides; the head on navy with the portrait in a slowly turning amber ring, name, title and previous role; the message below, its opening line large, its closing line set apart */ .abt-fd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; } .abt-fd__card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--rt-border); border-radius: var(--r); background: var(--rt-white); box-shadow: var(--tile-shadow); transition: transform .5s var(--ease), box-shadow .5s var(--ease); } .abt-fd__card:hover { transform: translateY(-5px); box-shadow: 0 40px 64px -34px color-mix(in srgb, var(--rt-deep) 55%, transparent); } .abt-fd__head { position: relative; display: flex; align-items: center; gap: 22px; padding: 26px 28px; overflow: hidden; border-bottom: 3px solid var(--rt-accent); background: radial-gradient(circle at 12% 30%, var(--rt-primary-light), var(--rt-primary) 50%, var(--rt-deep)); color: var(--rt-white); } .abt-fd__av { position: relative; flex: none; width: 104px; height: 104px; padding: 4px; border-radius: 50%; isolation: isolate; } .abt-fd__av::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: conic-gradient(var(--rt-accent), color-mix(in srgb, var(--rt-accent) 10%, transparent) 35%, var(--rt-accent) 70%, color-mix(in srgb, var(--rt-accent) 10%, transparent) 85%, var(--rt-accent)); animation: abt-ring 9s linear infinite; } .abt-fd__av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--rt-primary); } @keyframes abt-ring { to { transform: rotate(1turn); } } .abt-fd__n { font-family: "Montserrat", var(--font); font-size: 20px; font-weight: 800; line-height: 1.2; text-transform: uppercase; } .abt-fd__t { margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rt-accent); } .abt-fd__prev { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rt-line-dark); font-size: 13px; line-height: 1.45; color: var(--rt-white); } .abt-fd__prev small { display: block; margin-bottom: 2px; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rt-text-dark); } .abt-fd__q { position: absolute; top: 18px; right: 22px; width: 64px; height: auto; fill: color-mix(in srgb, var(--rt-accent) 30%, transparent); animation: abt-float 7s ease-in-out infinite; } .abt-fd__msg { display: flex; flex: 1; flex-direction: column; gap: 12px; margin: 0; padding: 26px 28px 28px; font-size: 14px; line-height: 1.7; color: var(--rt-muted-ink); } .abt-fd__msg p { margin: 0; } .abt-fd__lead { font-family: "Montserrat", var(--font); font-size: 17px; font-style: italic; font-weight: 600; line-height: 1.5; color: var(--rt-primary); } .abt-fd__close { margin-top: auto; padding: 14px 18px; border-left: 3px solid var(--rt-accent); border-radius: 0 12px 12px 0; background: var(--rt-surface); font-style: italic; font-weight: 700; line-height: 1.55; color: var(--rt-primary); } .abt-mark { padding: 0 2px; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--rt-accent) 40%, transparent) 62%); font-weight: 700; color: var(--rt-primary); } /* certificates */ .abt-certs { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; } .abt-certs > li { flex: 0 0 calc((100% - 4 * 18px) / 5); } .abt-cert { position: relative; display: flex; flex-direction: column; height: 100%; padding: 28px 20px 20px; overflow: hidden; border: 1px solid var(--rt-border); border-radius: var(--r); background: var(--rt-white); text-align: center; box-shadow: var(--tile-shadow); transition: transform .5s var(--ease), box-shadow .5s var(--ease); } .abt-cert::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--rt-accent); transform: scaleX(.2); transform-origin: left; transition: transform .7s cubic-bezier(.32, .72, 0, 1); } .abt-cert__logo { display: grid; place-items: center; height: 112px; margin-bottom: 18px; color: var(--rt-primary); } .abt-cert__logo img { width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; transition: transform .7s var(--ease); } .abt-cert__logo--stamp img { height: 112px; filter: drop-shadow(0 10px 16px color-mix(in srgb, var(--rt-deep) 28%, transparent)); } .abt-cert__logo .qseal { width: 100px; height: 100px; transition: transform .7s var(--ease); } .abt-word { font-family: "Montserrat", var(--font); font-size: 19px; font-weight: 800; line-height: 1.15; color: var(--rt-primary); } .abt-cert__t { font-family: "Montserrat", var(--font); font-size: 14.5px; font-weight: 800; line-height: 1.3; text-transform: uppercase; color: var(--rt-primary); } .abt-cert__x { margin: 6px 0 18px; font-size: 13px; line-height: 1.5; color: var(--rt-muted-ink); } .abt-cert__meta { display: grid; gap: 7px; margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--rt-border); } .abt-cert__meta > span { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; text-align: right; } .abt-cert__meta small { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rt-muted-ink); } .abt-cert__meta b { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rt-primary); overflow-wrap: anywhere; } .abt-cert__zoom { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--rt-primary); color: var(--rt-white); opacity: 0; transform: scale(.8); transition: opacity .3s, transform .4s var(--ease); } .abt-cert__zoom .ic { width: 15px; height: 15px; } .abt-cert:is(:hover, :focus-visible) { transform: translateY(-6px); box-shadow: 0 40px 64px -34px color-mix(in srgb, var(--rt-deep) 55%, transparent); } .abt-cert:is(:hover, :focus-visible)::before { transform: scaleX(1); } .abt-cert:is(:hover, :focus-visible) .abt-cert__zoom { opacity: 1; transform: none; } .abt-cert:is(:hover, :focus-visible) :is(.abt-cert__logo img, .qseal) { transform: scale(1.06) rotate(-4deg); } /* services: the document's whole text on each card */ .hcards--full .hcard { min-height: 400px; } .hcards--full .hcard__x { display: block; overflow: visible; } /* partners */ .abt-partners { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .abt-partners + .hsub { margin-top: 40px; } .abt-partner { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; padding: 22px 18px; border: 1px solid var(--rt-border); border-radius: var(--r); background: var(--rt-white); text-align: center; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s; } .abt-partner:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--rt-accent) 55%, var(--rt-border)); box-shadow: var(--tile-shadow); } .abt-partner__logo { display: grid; place-items: center; align-self: stretch; height: 92px; margin-bottom: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--rt-border); } .abt-partner__logo img { width: auto; max-width: min(170px, 100%); height: auto; max-height: 70px; object-fit: contain; transition: transform .6s var(--ease); } .abt-partner:hover .abt-partner__logo img { transform: scale(1.06); } .abt-partner__n { font-family: "Montserrat", var(--font); font-size: 14px; font-weight: 800; line-height: 1.3; text-transform: uppercase; color: var(--rt-primary); } .abt-partner__s { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 10.5px; font-weight: 700; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--rt-accent-ink); } .abt-partner__s .ic { flex: none; width: 14px; height: 14px; } /* location */ .abt-loc { align-items: stretch; } .abt-loc__lead { margin: -4px 0 16px; font-family: "Montserrat", var(--font); font-size: 18px; font-weight: 800; text-transform: uppercase; color: var(--rt-accent-ink); } .abt-loc__addr { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; padding: 16px 18px; border-left: 3px solid var(--rt-accent); border-radius: 0 12px 12px 0; background: var(--rt-surface); font-weight: 600; color: var(--rt-primary); } .abt-loc__addr .ic { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--rt-accent); } .abt-loc__addr small { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--rt-muted-ink); } .abt-loc__facts { margin-bottom: 28px; } .abt-loc__facts > div { border-top-color: var(--rt-border); } .abt-loc__facts dt { font-size: 22px; color: var(--rt-primary); } .abt-loc__facts dd { color: var(--rt-muted-ink); } .abt-loc__map { aspect-ratio: auto; height: 100%; min-height: 440px; box-shadow: var(--tile-shadow); } .abt-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 44px; } .abt-photos .sph__a > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } @media (max-width: 1040px) { .abt-stamps { display: none; } .abt-certs > li { flex-basis: calc((100% - 2 * 18px) / 3); } .abt-partners { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .abt-fd { grid-template-columns: minmax(0, 1fr); gap: 18px; } .abt-fd__head { gap: 16px; padding: 20px; } .abt-fd__av { width: 80px; height: 80px; padding: 3px; } .abt-fd__n { font-size: 17px; } .abt-fd__q { display: none; } /* phones: the name needs the width */ .abt-fd__msg { padding: 22px 20px; } .abt-fd__lead { font-size: 16px; } .abt-certs > li { flex-basis: calc((100% - 18px) / 2); } .abt-loc__map { min-height: 320px; } /* timeline in one column: the line on the left, the year above the caption */ .tl__line { left: 13px; } .tl__list { gap: 30px; } .tl__i { grid-template-columns: 26px minmax(0, 1fr); column-gap: 20px; align-items: start; } .tl__dot { grid-column: 1; grid-row: 1 / span 2; width: 20px; height: 20px; margin-top: 8px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--rt-primary-light) 90%, transparent); } .tl__i:nth-child(n) .tl__when { grid-column: 2; grid-row: 1; align-items: flex-start; } .tl__i:nth-child(n) .tl__what { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 10px; text-align: left; } .tl__y { font-size: 38px; } } @media (max-width: 760px) { /* phones: the workshop photos as a swipe row */ .abt-photos { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; margin-inline: -16px; padding: 0 16px 28px; scroll-snap-type: x mandatory; scrollbar-width: none; } .abt-photos > li { scroll-snap-align: center; } } @media (max-width: 420px) { /* phones: each certificate as one compact row, the badge beside its text */ .abt-certs > li { flex-basis: 100%; } .abt-cert { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; padding: 20px 18px; text-align: left; } .abt-cert__logo { grid-row: 1 / span 3; height: 76px; margin: 0; } .abt-cert__logo--stamp img { height: 76px; } .abt-cert__logo .qseal { width: 68px; height: 68px; } .abt-cert__logo .abt-word { font-size: 14px; } .abt-cert__x { margin-bottom: 12px; } } @media (prefers-reduced-motion: reduce) { .abt-stamps img, .abt-fd__av::before, .abt-fd__q { animation: none; } .abt-cert, .abt-partner, .abt-fd__card, .tl__dot { transition: none; } }