/* ============================================================ TEKTRONIX GLOBAL — Design System Dark + teal/cyan, enterprise security-tech, bilingual RTL-ready ============================================================ */ /* ---- Fonts ---- */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap'); :root { /* Brand */ --accent: #1FD1B8; /* teal */ --accent-bright: #2BE3CC; --accent-2: #38C6F0; /* cyan */ --accent-deep: #0E9E8C; --accent-glow: rgba(31, 209, 184, 0.32); /* Surfaces — dark theme (matches tektronixllc.com) */ --bg: #070B11; --bg-1: #0A1016; --bg-2: #0B111A; --surface: #111A25; --surface-2: #18222F; --line: rgba(255,255,255,0.09); --line-strong: rgba(255,255,255,0.17); /* Text */ --text: #EAF1F6; --text-soft: #9FB0BE; --text-mute: #66798A; /* Layout */ --maxw: 1240px; --radius: 16px; --radius-sm: 10px; --radius-lg: 26px; --shadow: 0 24px 60px -24px rgba(0,0,0,0.7); --shadow-glow: 0 0 0 1px var(--line), 0 30px 70px -30px var(--accent-glow); /* Type */ --font-head: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; --font-body: 'IBM Plex Sans', system-ui, sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* Arabic fonts swap in when */ html[dir="rtl"] { --font-head: 'IBM Plex Sans Arabic', 'Space Grotesk', sans-serif; --font-body: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.6; font-size: 17px; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } h1,h2,h3,h4 { font-family: var(--font-head); line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 { letter-spacing: 0; } ::selection { background: var(--accent); color: #fff; } /* ---- Layout helpers ---- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 28px; } .section { padding-block: clamp(34px, 4vw, 64px); position: relative; } .section--tight { padding-block: clamp(26px, 3vw, 44px); } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 600; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent); display: inline-block; } html[dir="rtl"] .eyebrow { letter-spacing: 0.05em; } .h-display { font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.04; } .h-section { font-size: clamp(1.9rem, 3.6vw, 3rem); } .lead { color: var(--text-soft); font-size: clamp(1.05rem, 1.4vw, 1.28rem); max-width: 62ch; } .text-grad { background: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 600; font-size: 15px; padding: 15px 28px; border-radius: 999px; cursor: pointer; border: 1px solid transparent; transition: all .35s var(--ease); white-space: nowrap; } .btn svg { width: 18px; height: 18px; transition: transform .35s var(--ease); } html[dir="rtl"] .btn svg { transform: scaleX(-1); } .btn-primary { background: linear-gradient(100deg, var(--accent-bright), var(--accent)); color: #042A24; box-shadow: 0 12px 30px -10px var(--accent-glow); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px var(--accent-glow); } .btn-primary:hover svg { transform: translateX(4px); } html[dir="rtl"] .btn-primary:hover svg { transform: scaleX(-1) translateX(4px); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } /* ---- Header ---- */ .site-header { --surface: #FFFFFF; --surface-2: #EEF3F6; --bg-2: #F4F8FA; --text: #0F1B22; --text-soft: #51626E; --text-mute: #8493A0; --line: rgba(15,30,40,0.10); --line-strong: rgba(15,30,40,0.18); --accent: #0C8475; position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s; border-block-end: 1px solid transparent; } .site-header { background: rgba(255,255,255,0.92); backdrop-filter: blur(16px) saturate(150%); border-block-end-color: var(--line); } .site-header.scrolled { background: rgba(255,255,255,0.96); box-shadow: 0 6px 24px -14px rgba(15,40,50,0.20); } .nav { display: flex; align-items: center; gap: 32px; height: 78px; } .nav__logo { display: flex; align-items: center; gap: 12px; font-family: var(--font-head); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; } .nav__logo--img img { height: 46px; width: auto; display: block; aspect-ratio: 1400 / 667; } .nav .nav__logo--img { flex-shrink: 0; } .nav__logo .mark { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent-bright), var(--accent-2)); color: #fff; font-weight: 700; font-size: 20px; box-shadow: 0 8px 22px -8px var(--accent-glow); } .nav__logo .mark span { transform: translateY(-1px); } .nav__logo small { display: block; font-size: 10px; letter-spacing: 0.22em; color: var(--text-mute); font-weight: 500; text-transform: uppercase; } html[dir="rtl"] .nav__logo small { letter-spacing: 0.08em; } .nav__links { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; } .nav__links a { font-size: 15px; font-weight: 500; color: var(--text-soft); padding: 10px 15px; border-radius: 999px; transition: color .25s, background .25s; position: relative; white-space: nowrap; } .nav__links a:hover, .nav__links a.active { color: var(--text); } .nav__links a.active { color: var(--accent); } .nav__has-drop { position: relative; } .nav__drop { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; min-width: 280px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .28s var(--ease); } .nav__has-drop:hover .nav__drop { opacity: 1; visibility: visible; transform: translateY(0); } .nav__has-drop.open .nav__drop { opacity: 1; visibility: visible; transform: translateY(0); } .nav__drop a { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border-radius: var(--radius-sm); color: var(--text); } .nav__drop a span { font-size: 12.5px; color: var(--text-mute); font-weight: 400; } .nav__drop a:hover { background: var(--surface-2); color: var(--accent); } /* Access Control dedicated dropdown */ .nav__drop--ac { min-width: 300px; } .nav__drop--ac .nav__drop-hd { font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); padding: 6px 14px 10px; border-block-end: 1px solid var(--line); margin-block-end: 6px; } .nav__drop--ac .nav__drop-hd--sub { margin-block-start: 8px; padding-block-start: 11px; border-block-start: 1px solid var(--line); } html[dir="rtl"] .nav__drop--ac .nav__drop-hd { letter-spacing: 0.02em; } .nav__drop--ac a { flex-direction: row !important; align-items: center; font-size: 14px; padding: 9px 14px; } .nav__drop--simple { min-width: 300px; } .nav__drop--simple .mega-col__items { display: flex; flex-direction: column; } .nav__drop--simple .mega-col__items a { display: block; font-size: 14px; padding: 9px 14px; color: var(--text); border-radius: var(--radius-sm); } .nav__drop--simple .mega-col__items a:hover { background: var(--surface-2); color: var(--accent); } .nav__drop--simple .mega-col__more { display: block; margin-block-start: 6px; padding: 10px 14px 4px; border-block-start: 1px solid var(--line); color: var(--accent); font-weight: 600; font-size: 13.5px; font-family: var(--font-head); } .nav__drop--ac .nav__drop-all { margin-block-start: 6px; padding-block-start: 11px; border-block-start: 1px solid var(--line); color: var(--accent); font-weight: 600; font-size: 13.5px; font-family: var(--font-head); } .nav__drop--ac .nav__drop-all:hover { background: transparent; padding-inline-start: 18px; } /* mega menu — 8-category grid (mirrors tektronixllc.com) */ .nav__drop--mega.mega-grid { position: fixed; inset-block-start: 78px; left: 50%; right: auto; width: min(1180px, 96vw); display: block; padding: 0; overflow: hidden; transform: translateX(-50%) translateY(8px); } .nav__has-drop:hover .nav__drop--mega.mega-grid { transform: translateX(-50%) translateY(0); } .nav__has-drop.open .nav__drop--mega.mega-grid { transform: translateX(-50%) translateY(0); } .mega-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 30px; padding: 26px 30px 22px; } .mega-col { min-width: 0; } .mega-col__hd { display: flex !important; align-items: center; gap: 10px; padding: 0 0 10px !important; font-family: var(--font-head); font-size: 14.5px; font-weight: 700; color: var(--text) !important; border-block-end: 1px solid var(--line); margin-block-end: 8px; line-height: 1.2; } .mega-col__hd:hover { background: transparent !important; color: var(--accent) !important; } .mega-col__ic { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: rgba(22,201,182,0.14); color: var(--accent); } .mega-col__ic svg { width: 18px; height: 18px; } .mega-col__items { display: flex; flex-direction: column; gap: 1px; } .mega-col__items a { display: block; padding: 5px 8px !important; border-radius: 8px !important; font-size: 13px; color: var(--text-soft) !important; line-height: 1.35; } .mega-col__items a:hover { background: var(--surface-2) !important; color: var(--accent) !important; padding-inline-start: 12px !important; } .mega-col__more { display: inline-block; margin-block-start: 6px; padding: 5px 8px !important; font-family: var(--font-head); font-weight: 700; font-size: 12.5px; color: var(--accent) !important; } .mega-col__more:hover { background: transparent !important; gap: 6px; } .mega-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 13px 30px; border-block-start: 1px solid var(--line); background: linear-gradient(160deg, rgba(22,201,182,0.08), rgba(11,17,26,0)); } .mega-foot__regions { font-size: 12px; color: var(--text-soft); } .mega-foot__regions b { color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; font-weight: 800; margin-inline-end: 6px; } html[dir="rtl"] .mega-foot__regions b { letter-spacing: 0.02em; } .mega-foot__all { font-family: var(--font-head); font-weight: 600; font-size: 13px; color: var(--accent) !important; white-space: nowrap; } .mega-foot__all:hover { background: transparent !important; text-decoration: underline; } @media (max-width: 1080px) { .mega-cols { grid-template-columns: repeat(2, 1fr); } } /* animated AI dot-wave background (heroes) */ .hero, .page-hero { position: relative; } .tk-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: 0.85; } .hero--slider .hero__slides { z-index: 0; } .hero .container, .page-hero .container, .hero__arrows, .hero__dots { position: relative; z-index: 3; } .nav__actions { display: flex; align-items: center; gap: 14px; } .lang-toggle { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 600; font-size: 13px; color: var(--text-soft); border: 1px solid var(--line-strong); padding: 9px 14px; border-radius: 999px; cursor: pointer; background: transparent; transition: all .25s; } .lang-toggle:hover { border-color: var(--accent); color: var(--accent); } .nav__cta { display: inline-flex; } .nav__burger { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 8px; } .nav__burger span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: .3s; } /* mobile drawer */ .mobile-nav { position: fixed; inset: 0; z-index: 99; background: var(--bg-2); padding: 100px 28px 40px; transform: translateX(100%); transition: transform .45s var(--ease); display: flex; flex-direction: column; gap: 8px; overflow-y: auto; } html[dir="rtl"] .mobile-nav { transform: translateX(-100%); } .mobile-nav.open { transform: translateX(0); } .mobile-nav a { font-family: var(--font-head); font-size: 22px; font-weight: 600; padding: 14px 0; border-block-end: 1px solid var(--line); } .mobile-nav a:hover { color: var(--accent); } .mobile-nav a.mobile-nav__hd { font-family: var(--font-head); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-block: 16px 2px; padding: 6px 0; border-block-end: none; } html[dir="rtl"] .mobile-nav a.mobile-nav__hd { letter-spacing: 0.04em; } /* ---- Footer ---- */ .site-footer { position: relative; background: rgba(255,255,255,0.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-block-start: 1px solid var(--line); padding-block: 56px 24px; color: #0F1B22; } .site-footer::before { content: ""; position: absolute; inset-block-start: -1px; inset-inline: 0; height: 3px; background: linear-gradient(90deg, var(--accent), color-mix(in oklch, var(--accent) 55%, #2A6FDB)); opacity: .9; } .site-footer .footer-about p, .site-footer .footer-grid a, .site-footer .contact-info p, .site-footer .contact-info a { color: #344049; } .site-footer .footer-grid h4 { color: #0F1B22; } .site-footer .footer-grid a:hover, .site-footer .footer-bottom a:hover, .site-footer .contact-info a:hover { color: var(--accent); } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 40px; padding-block-end: 8px; } .footer-grid h4 { font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #0F1B22; margin-block-end: 18px; font-weight: 700; position: relative; padding-block-end: 12px; } .footer-grid h4::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; width: 26px; height: 2px; background: var(--accent); border-radius: 2px; } html[dir="rtl"] .footer-grid h4 { letter-spacing: 0.04em; } .footer-grid ul { display: flex; flex-direction: column; gap: 11px; } .footer-grid a { color: #344049; transition: color .2s, padding-inline-start .2s; font-size: 15px; } .footer-grid a:hover { color: var(--accent); padding-inline-start: 4px; } .footer-about p { color: #344049; font-size: 15px; margin-block: 14px 18px; max-width: 34ch; line-height: 1.6; } .footer-news { display: flex; gap: 8px; margin-block-start: 16px; } .footer-news input { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 12px 18px; color: var(--text); font-family: var(--font-body); font-size: 16px; } .footer-news input:focus { outline: none; border-color: var(--accent); } .footer-news button { background: var(--accent); color: #fff; border: none; border-radius: 999px; padding: 0 20px; font-weight: 600; cursor: pointer; font-family: var(--font-head); } .footer-social { display: flex; gap: 10px; margin-block-start: 18px; } .footer-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; color: #344049; transition: transform .25s, background .25s, color .25s, border-color .25s; } .footer-social a:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-3px); } .footer-social svg { width: 18px; height: 18px; } .footer-contact h4 { margin: 0 0 16px; } .footer-contact .fc-row { display: flex; align-items: flex-start; gap: 12px; margin-block-end: 14px; color: #344049; font-size: 14px; line-height: 1.55; text-decoration: none; } .footer-contact a.fc-row:hover { color: var(--accent); } .footer-contact .fc-row svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); margin-block-start: 1px; } .footer-contact .fc-row--addr { align-items: flex-start; } .footer-contact .fc-row--addr strong { display: block; color: #0F1B22; font-weight: 600; margin-block-end: 2px; } .footer-bottom a { color: #344049; text-decoration: none; } .footer-bottom a:hover { color: var(--accent); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-block-start: 40px; padding-block-start: 24px; border-block-start: 1px solid var(--line); color: #5A6770; font-size: 13.5px; flex-wrap: wrap; } /* ---- Cards & common ---- */ /* ---- Floating quick "Get in Touch" tab (upper-left, every page) ---- */ .tk-quick-tab { position: fixed; inset-inline-start: 0; inset-block-end: 110px; z-index: 60; display: flex; align-items: center; gap: 8px; background: var(--accent); color: #06201c; font-family: var(--font-head); font-weight: 700; font-size: 13.5px; padding: 12px 18px 12px 14px; border-radius: 0 999px 999px 0; box-shadow: 0 10px 26px -8px rgba(0,0,0,0.45); cursor: pointer; border: none; transition: padding-inline-start .25s var(--ease), transform .25s var(--ease), box-shadow .25s; opacity: 0; pointer-events: none; } .tk-quick-tab.is-visible { opacity: 1; pointer-events: auto; } .tk-quick-tab:hover { padding-inline-start: 20px; transform: translateX(4px); box-shadow: 0 14px 30px -6px rgba(0,0,0,0.5); } .tk-quick-tab svg { width: 17px; height: 17px; flex: none; } html[dir="rtl"] .tk-quick-tab { inset-inline-start: 0; border-radius: 999px 0 0 999px; } @media (max-width: 860px) { .tk-quick-tab { inset-block-end: 172px; font-size: 12.5px; padding: 10px 16px 10px 12px; } } /* ---- Cards & common ---- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .4s var(--ease), border-color .4s, box-shadow .4s; } .card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--shadow); } .pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; color: var(--text-soft); font-weight: 500; } .glow-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.4; pointer-events: none; z-index: 0; } /* reveal on scroll */ [data-reveal] { opacity: 0; transform: translateY(30px) scale(.985); filter: blur(6px); transition: opacity .85s var(--ease), transform .85s var(--ease), filter .85s var(--ease); will-change: opacity, transform, filter; } [data-reveal].in { opacity: 1; transform: none; filter: none; } [data-reveal][data-reveal-x="left"] { transform: translateX(-36px); } [data-reveal][data-reveal-x="right"] { transform: translateX(36px); } @media (prefers-reduced-motion: reduce) { [data-reveal] { transition: none; opacity: 1; transform: none; filter: none; } } /* ---- Page hero (inner pages) ---- */ .page-hero { padding-block: 170px 80px; position: relative; overflow: hidden; border-block-end: 1px solid var(--line); background: var(--bg-2); } .page-hero .breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--text-mute); font-size: 14px; margin-block-end: 26px; row-gap: 6px; } .page-hero .breadcrumb a:hover { color: var(--accent); } /* ---- Responsive ---- */ @media (max-width: 1080px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } } @media (max-width: 1150px) { .nav__links, .nav__cta { display: none; } .nav__burger { display: flex; } } @media (max-width: 640px) { body { font-size: 16px; } .container { padding-inline: 18px; } .footer-grid { grid-template-columns: 1fr; gap: 30px; } .footer-bottom { flex-direction: column; align-items: flex-start; } .site-footer { padding-block: 44px 26px; } } /* ---- Mobile spacing + responsive tightening (all pages) ---- */ @media (max-width: 768px) { .section { padding-block: 34px; } .section--tight { padding-block: 24px; } .sec-head { margin-block-end: 26px; } .page-hero { padding-block: 120px 44px; } .solution-hero { padding-block: 120px 50px; } .hero { min-height: auto; padding-block: 116px 56px; } .h-section, .h-hero { line-height: 1.18; } .who-stats { gap: 18px 22px; margin-block-start: 30px; } .deploy-cat { margin-block-start: 40px; } } @media (max-width: 480px) { .section { padding-block: 28px; } .container { padding-inline: 16px; } .who-stats { grid-template-columns: 1fr 1fr; } .stats { grid-template-columns: 1fr 1fr; } .hero { padding-block: 104px 44px; } .page-hero, .solution-hero { padding-block: 104px 36px; } }html[data-theme="light"]{--bg:#F5F9FA;--bg-1:#FFFFFF;--bg-2:#EEF4F5;--surface:#FFFFFF;--surface-2:#F1F6F7;--line:rgba(10,25,30,.10);--line-strong:rgba(10,25,30,.18);--text:#0B1B22;--text-soft:#4B6270;--text-mute:#7C93A0;--shadow:0 24px 60px -24px rgba(20,40,50,.18)} .theme-toggle{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:999px;padding:9px;cursor:pointer;background:transparent;color:var(--text-soft);transition:all .25s;flex:none} .theme-toggle:hover{border-color:var(--accent);color:var(--accent)} .theme-toggle svg{width:16px;height:16px;display:block} .theme-toggle__ic--light{display:none} html[data-theme="light"] .theme-toggle__ic--dark{display:none} html[data-theme="light"] .theme-toggle__ic--light{display:block} }