/*----------------------------------------------------------------------------------- RTI (RK42) IT Consulting — brand layer on top of the base theme. Everything here is additive: main.css is kept untouched so the theme can be updated without losing these tweaks. -----------------------------------------------------------------------------------*/ /* 0. Brand colour --------------------------------------------------------------- Palette taken from the supplied RTI Consulting identity: deep navy carries the structure and bronze is reserved for the forward-moving accent. */ :root { --rti-ink: #0F2747; --rti-accent: #B08B6B; --rti-accent-lit: #D4B18F; --rti-soft-white: #F8FAFC; --rti-cool-gray: #9CA3AF; --tp-theme-primary: var(--rti-accent); } /* 1. CJK fallbacks — Sequel Sans / Inter ship no Chinese glyphs ------------------- */ :root { --rti-cjk: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Heiti SC", sans-serif; --tp-ff-body: 'Inter', var(--rti-cjk); --tp-ff-inter: 'Inter', var(--rti-cjk); --tp-ff-p: 'Inter', var(--rti-cjk); --tp-ff-jost: 'Jost', var(--rti-cjk); --tp-ff-heading: 'Sequel Sans Medium Head', var(--rti-cjk); --tp-ff-sequel-medium: 'Sequel Sans Medium Head', var(--rti-cjk); --tp-ff-sequel-roman: 'Sequel Sans Roman Head', var(--rti-cjk); --tp-ff-sequel-bold-head: 'Sequel Sans Bold Head', var(--rti-cjk); --tp-ff-sequel-semi-bold: 'Sequel Sans Semi Bold Head', var(--rti-cjk); --tp-ff-sequel-heavy-disp: 'Sequel Sans Heavy Disp', var(--rti-cjk); } /* Chinese needs a little more room between lines and none between letters */ /* The existing /lang/cn switch changes to zh-CN. In that mode we replace every Latin display-family token, rather than relying on a fallback glyph with mismatched metrics. English keeps the original type system. */ html[lang="zh-CN"] { --tp-ff-body: var(--rti-cjk); --tp-ff-inter: var(--rti-cjk); --tp-ff-p: var(--rti-cjk); --tp-ff-jost: var(--rti-cjk); --tp-ff-heading: var(--rti-cjk); --tp-ff-sequel-medium: var(--rti-cjk); --tp-ff-sequel-roman: var(--rti-cjk); --tp-ff-sequel-bold-head: var(--rti-cjk); --tp-ff-sequel-semi-bold: var(--rti-cjk); --tp-ff-sequel-heavy-disp: var(--rti-cjk); font-synthesis: none; } html[lang="zh-CN"] body, html[lang="zh-CN"] button, html[lang="zh-CN"] input, html[lang="zh-CN"] textarea, html[lang="zh-CN"] select { font-family: var(--rti-cjk); font-kerning: normal; } html[lang="zh-CN"] .tp-hero-title, html[lang="zh-CN"] .tp-section-title, html[lang="zh-CN"] .about-us-title, html[lang="zh-CN"] .tp-breadcrumb-title, html[lang="zh-CN"] .tp-footer-bigtext, html[lang="zh-CN"] .tp-service-title { font-family: var(--rti-cjk); font-kerning: normal; letter-spacing: 0; text-rendering: optimizeLegibility; } html[lang="zh-CN"] .tp-hero-title, html[lang="zh-CN"] .tp-footer-bigtext { font-weight: 800; line-height: 1.16; } html[lang="zh-CN"] .tp-section-title, html[lang="zh-CN"] .about-us-title, html[lang="zh-CN"] .tp-breadcrumb-title, html[lang="zh-CN"] .tp-service-title { font-weight: 700; line-height: 1.28; } html[lang="zh-CN"] .tp-main-menu nav ul li a, html[lang="zh-CN"] .tp-offcanvas-menu > nav > ul > li > a, html[lang="zh-CN"] .tp-footer-subtitle, html[lang="zh-CN"] .rti-preloader-label { font-family: var(--rti-cjk); font-weight: 600; letter-spacing: 0; } html[lang="zh-CN"] .rti-preloader-label { text-transform: none; } /* 1b. Hero headline ------------------------------------------------------------- The theme splits this headline into one inline-block per character, which collapses the spaces between words. Preserving whitespace inside those spans keeps the words apart without resorting to a non-breaking space (which would stop the headline wrapping on narrow screens). */ .tp-title-middle-animetion > span { white-space: pre; } @media (max-width: 767px) { .tp-hero-title { font-size: 52px; overflow-wrap: break-word; } } @media (max-width: 400px) { .tp-hero-title { font-size: 44px; } } /* 2. Logo ------------------------------------------------------------------------ The supplied mark remains vector artwork; all lettering below is real text, not outlined or embedded in an image. */ .rti-signature { --rti-signature-mark: 46px; --rti-signature-name: 27px; --rti-signature-meta: 7px; --rti-signature-gap: 11px; --rti-signature-copy-gap: 5px; --rti-signature-rule: 20px; display: inline-flex; align-items: center; gap: var(--rti-signature-gap); max-width: 100%; color: var(--rti-ink); vertical-align: middle; } .rti-signature__mark { display: block; width: var(--rti-signature-mark); height: auto; max-width: none !important; flex: 0 0 auto; } .rti-signature__mark--on-dark { display: none; } .rti-signature__copy { display: grid; gap: var(--rti-signature-copy-gap); min-width: 0; } .rti-signature__name { display: block; color: var(--rti-ink); font-family: Inter, "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif; font-size: var(--rti-signature-name); font-weight: 600; font-variation-settings: "wght" 600; letter-spacing: -0.05em; line-height: 0.9; white-space: nowrap; } .rti-signature__endorsement { display: flex; align-items: center; gap: 7px; color: #536477; font-family: Inter, "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif; font-size: var(--rti-signature-meta); font-weight: 600; letter-spacing: 0.14em; line-height: 1; white-space: nowrap; } .rti-signature__endorsement strong { color: currentColor; font-size: 1.18em; font-weight: 800; letter-spacing: 0.09em; } .rti-signature__rule { display: block; width: var(--rti-signature-rule); height: 1px; flex: 1 1 var(--rti-signature-rule); background: currentColor; opacity: 0.58; } .rti-signature--header { --rti-signature-mark: 46px; --rti-signature-name: 27px; } .rti-signature--offcanvas { --rti-signature-mark: 42px; --rti-signature-name: 24px; } .rti-signature--menu { --rti-signature-mark: 53px; --rti-signature-name: 30px; --rti-signature-meta: 8px; --rti-signature-rule: 24px; } .rti-signature--footer { --rti-signature-mark: 64px; --rti-signature-name: 36px; --rti-signature-meta: 8px; --rti-signature-rule: 29px; } .rti-signature--preloader { --rti-signature-mark: 54px; --rti-signature-name: 32px; --rti-signature-meta: 8px; --rti-signature-rule: 25px; } .rti-signature--inverse .rti-signature__mark--on-light, .rti-dark .rti-signature:not(.rti-signature--inverse) .rti-signature__mark--on-light { display: none; } .rti-signature--inverse .rti-signature__mark--on-dark, .rti-dark .rti-signature:not(.rti-signature--inverse) .rti-signature__mark--on-dark { display: block; } .rti-signature--inverse .rti-signature__name, .rti-dark .rti-signature:not(.rti-signature--inverse) .rti-signature__name { color: var(--rti-soft-white); } .rti-signature--inverse .rti-signature__endorsement, .rti-dark .rti-signature:not(.rti-signature--inverse) .rti-signature__endorsement { color: var(--rti-cool-gray); } .tp-header-logo > a:focus-visible, .tp-footer-logo > a:focus-visible, .tp-offcanvas-logo > a:focus-visible { outline: 2px solid var(--rti-accent); outline-offset: 5px; } @media (max-width: 1199px) { .rti-signature--header { --rti-signature-mark: 40px; --rti-signature-name: 23px; --rti-signature-meta: 6px; --rti-signature-rule: 15px; --rti-signature-gap: 9px; } } @media (max-width: 575px) { .rti-signature--header { --rti-signature-mark: 32px; --rti-signature-name: 18px; --rti-signature-gap: 7px; } .rti-signature--header .rti-signature__endorsement { display: none; } .rti-signature--footer { --rti-signature-mark: 52px; --rti-signature-name: 29px; } } /* 3. Language switch in the main nav ---------------------------------------------- */ .tp-main-menu nav > ul > li.rti-lang > a { position: relative; /* Keep the language control on the same rhythm as every other menu item. */ padding: 8px 16px; } .tp-main-menu nav > ul > li.rti-lang > a::after { position: absolute; right: 16px; bottom: 4px; left: 16px; height: 1px; content: ''; background: currentColor; opacity: 0.45; transition: opacity 0.2s ease; } .tp-main-menu nav > ul > li.rti-lang > a:hover::after, .tp-main-menu nav > ul > li.rti-lang > a:focus-visible::after { opacity: 1; } /* 4. Partner / technology logo strip ---------------------------------------------- */ .rti-brand-logo { display: flex; align-items: center; justify-content: center; height: 70px; padding: 0 15px; } /* Fixed height rather than max-height, so wordmarks and icon marks all sit on the same optical line no matter what aspect ratio the file has. */ .rti-brand-logo img { height: 26px; width: auto; max-width: 200px; object-fit: contain; opacity: 0.65; filter: grayscale(100%) contrast(1.15); transition: all 0.3s ease; } .rti-brand-logo:hover img { opacity: 1; filter: grayscale(0); } /* 5. Service cards / feature tags -------------------------------------------------- */ .rti-tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .rti-tag-list li { font-family: var(--tp-ff-inter); font-size: 14px; line-height: 1; padding: 9px 16px; border: 1px solid rgba(9, 9, 11, 0.12); border-radius: 40px; color: var(--tp-common-black); } /* 5b. Muted meta line (location · year) on light backgrounds ---------------------- */ .rti-meta { font-family: var(--tp-ff-inter); font-size: 14px; color: var(--tp-common-black); opacity: 0.55; } .rti-meta i { margin-right: 4px; } /* 6. Project cards — screenshots need a consistent frame -------------------------- */ .rti-shot img { width: 100%; height: auto; display: block; background-color: #f4f4f4; } /* 7. Contact: QR codes and info blocks --------------------------------------------- */ .rti-qr { text-align: center; margin-bottom: 30px; } .rti-qr img { width: 100%; max-width: 190px; height: auto; border: 1px solid rgba(9, 9, 11, 0.08); border-radius: 12px; padding: 12px; } .rti-qr span { display: block; margin-top: 12px; font-family: var(--tp-ff-inter); font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6; } /* 8. Numbers strip ----------------------------------------------------------------- */ .rti-fact { margin-bottom: 30px; } .rti-fact-number { display: block; font-family: var(--tp-ff-sequel-bold-head); font-size: 64px; line-height: 1; margin-bottom: 12px; } .rti-fact-label { font-family: var(--tp-ff-inter); font-size: 15px; opacity: 0.6; } @media (max-width: 767px) { .rti-fact-number { font-size: 46px; } } /* 9. Long-form service copy --------------------------------------------------------- */ .rti-prose p { margin-bottom: 20px; } .rti-prose p:last-child { margin-bottom: 0; } /* 10. Preloader ------------------------------------------------------------------- Replaces the template's flat red flood with a counter that runs 00 → 100 on the brand black, then lifts away to reveal the page. */ .rti-preloader { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 48px 46px; background: var(--rti-ink); color: var(--tp-common-white); transition: transform 0.95s cubic-bezier(0.76, 0, 0.24, 1); will-change: transform; /* failsafe: if the script never runs, the page still gets uncovered */ animation: rti-preloader-release 0s linear 8s forwards; } .rti-preloader.is-hidden { transform: translateY(-101%); } @keyframes rti-preloader-release { to { transform: translateY(-101%); } } .rti-preloader-logo { display: block; width: 310px; max-width: 100%; } .rti-preloader-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } .rti-preloader-label { font-family: var(--tp-ff-inter); font-size: 12px; line-height: 1; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); padding-bottom: 10px; } .rti-preloader-count { display: flex; align-items: flex-start; line-height: 0.8; font-family: var(--tp-ff-sequel-bold-head); } .rti-preloader-num { font-size: clamp(72px, 13vw, 168px); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; } .rti-preloader-pct { font-size: clamp(20px, 3vw, 40px); margin-left: 0.12em; color: rgba(255, 255, 255, 0.45); } .rti-preloader-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, 0.14); } .rti-preloader-bar span { display: block; width: 0; height: 100%; background: var(--rti-accent-lit); /* No transition on purpose: the counter already steps every 40ms, and a width transition depends on compositor frames, which a throttled tab may not deliver — leaving the bar stuck behind the number. */ } @media (max-width: 767px) { .rti-preloader { padding: 28px 24px 34px; } .rti-preloader-logo { width: 250px; } .rti-signature--preloader { --rti-signature-mark: 43px; --rti-signature-name: 26px; } } @media (prefers-reduced-motion: reduce) { .rti-preloader { transition-duration: 0.01s; } }