/* ============================================================= ORD — Design Tokens Palette taken from the ORD logo: signal red + deep navy, on a navy-black (dark) or clean white (light) base. Type: Poppins (display) / Inter (body) / JetBrains Mono (data) ============================================================= */ :root { --ord-bg: #070D1E; --ord-bg-alt: #0A1329; --ord-panel: #0F1A38; --ord-panel-2: #142347; --ord-border: rgba(255,255,255,.10); --ord-border-2: rgba(255,255,255,.16); --ord-text: #E8ECF8; --ord-text-dim: #A9B3CF; --ord-text-dim-2:#7C88AC; --ord-heading: #FFFFFF; --ord-primary: #E30B17; /* logo red — buttons, fills */ --ord-accent: #FF5A66; /* red for text/icons on dark */ --ord-secondary: #86ABFF; /* light navy-blue for text/icons on dark */ --ord-navy: #0A2C6B; /* logo navy */ --ord-royal: #2A63D8; --ord-grad-brand: linear-gradient(120deg, #E30B17 0%, #BB0B36 52%, #1B4CB4 100%); --ord-grad-glow: radial-gradient(circle, rgba(227,11,23,.32), transparent 70%); --ord-veil-1: rgba(255,255,255,.015); --ord-veil-2: rgba(255,255,255,.02); --ord-veil-3: rgba(255,255,255,.03); --ord-veil-4: rgba(255,255,255,.05); --ord-star-empty: rgba(255,255,255,.15); --ord-header-bg: rgba(7,13,30,0); --ord-header-bg-scrolled: rgba(7,13,30,.88); --ord-mobile-nav-bg: rgba(7,13,30,.98); --ord-map-filter: invert(92%) hue-rotate(180deg) brightness(95%) contrast(90%); --ord-logo-card-bg: var(--ord-panel-2); --ord-logo-card-bg-hover: #1B2E5C; --ord-logo-card-border: var(--ord-border-2); --ord-font-display: 'Poppins', 'Segoe UI', sans-serif; --ord-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ord-font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace; --ord-radius-sm: 10px; --ord-radius: 16px; --ord-radius-lg: 24px; --ord-container: 1220px; --ord-header-h: 84px; --ord-ease: cubic-bezier(.22,1,.36,1); color-scheme: dark; } /* ============================================================= Light mode — toggled via [data-theme="light"] on , set by inline anti-flash script (header.php) + main.js ============================================================= */ :root[data-theme="light"] { --ord-bg: #F7F8FC; --ord-bg-alt: #EDF0F8; --ord-panel: #FFFFFF; --ord-panel-2: #F3F5FB; --ord-border: rgba(10,31,77,.10); --ord-border-2: rgba(10,31,77,.17); --ord-text: #27304A; --ord-text-dim: #566079; --ord-text-dim-2:#76819B; --ord-heading: #0A1F4D; --ord-accent: #C8091A; --ord-secondary: #0A2C6B; --ord-veil-1: rgba(10,31,77,.02); --ord-veil-2: rgba(10,31,77,.03); --ord-veil-3: rgba(10,31,77,.045); --ord-veil-4: rgba(10,31,77,.065); --ord-star-empty: rgba(10,31,77,.18); --ord-header-bg: rgba(247,248,252,0); --ord-header-bg-scrolled: rgba(255,255,255,.92); --ord-mobile-nav-bg: rgba(255,255,255,.99); --ord-map-filter: none; --ord-logo-card-bg: #FFFFFF; --ord-logo-card-bg-hover: #F2F6FF; --ord-logo-card-border: rgba(10,31,77,.10); color-scheme: light; } /* Smooth dark/light theme switching. Components with their own transition list (cards, buttons, etc.) declare background-color/border-color/color directly in that list — a second `transition` rule here would be silently overridden rather than merged, since transition is a shorthand. This rule only needs to cover elements that don't declare their own transition, which in practice is almost all plain text and a few simple containers. */ body, .ord-site-header, .ord-primary-nav, .ord-download-row, .ord-testimonial-card, .ord-form-field input, .ord-form-field textarea, h1, h2, h3, h4, h5, p, span, li, label, td, th { transition: background-color .3s var(--ord-ease), border-color .3s var(--ord-ease), color .3s var(--ord-ease); } /* ============================================================= Reset ============================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--ord-header-h); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } body { margin: 0; background: var(--ord-bg); color: var(--ord-text); font-family: var(--ord-font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; height: auto; } /* Icon sizing — ord_icon() SVGs ship without width/height attributes, so without this rule browsers fall back to their default replaced-element size (huge). */ svg.ord-icon { width: 22px; height: 22px; flex-shrink: 0; } svg.ord-icon-sm { width: 16px; height: 16px; flex-shrink: 0; } svg.ord-icon-xs { width: 13px; height: 13px; flex-shrink: 0; } svg.ord-icon-lg { width: 40px; height: 40px; flex-shrink: 0; color: var(--ord-text-dim-2); } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } h1, h2, h3, h4, h5 { font-family: var(--ord-font-display); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; color: var(--ord-heading); } p { margin: 0 0 1em; color: var(--ord-text-dim); } button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; appearance: none; -webkit-appearance: none; } input, textarea { font-family: inherit; } .screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); overflow: hidden; height: 1px; width: 1px; } .skip-link { top: -50px; left: 10px; position: fixed; z-index: 10000; background: var(--ord-primary); color: #fff; padding: 10px 18px; border-radius: 8px; transition: top .2s; } .skip-link:focus { top: 10px; position: fixed; clip: auto; width: auto; height: auto; } :focus-visible { outline: 2px solid var(--ord-accent); outline-offset: 3px; border-radius: 4px; } .ord-container { max-width: var(--ord-container); margin: 0 auto; padding: 0 28px; position: relative; } .ord-noise-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E"); mix-blend-mode: overlay; } /* ============================================================= Header / Nav ============================================================= */ .ord-site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 500; height: var(--ord-header-h); display: flex; align-items: center; background: var(--ord-header-bg); border-bottom: 1px solid transparent; transition: background .35s var(--ord-ease), border-color .35s var(--ord-ease), height .3s var(--ord-ease); } .ord-site-header.is-scrolled { background: var(--ord-header-bg-scrolled); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--ord-border); height: 72px; } /* backdrop-filter creates a new containing block for position:fixed descendants — without this, the fixed mobile nav panel (a descendant of the header) would position itself relative to the header's own small box instead of the viewport as soon as the header is scrolled and gains backdrop-filter, collapsing the open menu to near-zero visible height. */ .ord-site-header.ord-nav-open { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .ord-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .ord-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .ord-logo-mark { color: var(--ord-accent); display: flex; } .ord-logo-mark svg { filter: drop-shadow(0 0 10px rgba(227,11,23,.45)); } .ord-logo-text { font-family: var(--ord-font-display); font-weight: 700; font-size: clamp(1.05rem, 0.9rem + 0.4vw, 1.35rem); color: var(--ord-heading); letter-spacing: -.01em; white-space: nowrap; } .ord-logo-text span { color: var(--ord-secondary); } .custom-logo { max-height: 52px; width: auto; } .ord-primary-nav { min-width: 0; } .ord-primary-nav .nav-menu { display: flex; align-items: center; gap: clamp(0px, 0.4vw, 6px); } .ord-primary-nav .nav-menu > li { flex-shrink: 0; } /* The header is transparent until scrolled, so *by default* nav text just uses the normal theme color — correct for every interior page, since those only have a plain network-canvas header sitting on the page's own (light or dark) background, not a photo. The front-page hero slider and any page with an uploaded banner image ARE real photos though (reliably dark), so on those two cases only, force light nav text until scrolled — this is what was missing before, and forcing light text everywhere is what made the menu unreadable on plain light-theme interior pages. */ .ord-primary-nav .nav-menu > li > a { display: inline-block; white-space: nowrap; padding: 10px clamp(9px, 0.5vw + 6px, 16px); font-size: clamp(0.82rem, 0.7rem + 0.45vw, 0.945rem); font-weight: 500; color: var(--ord-text-dim); position: relative; border-radius: 999px; transition: color .25s, background .25s; } .ord-primary-nav .nav-menu > li > a::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; background: var(--ord-grad-brand); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ord-ease); } .ord-primary-nav .nav-menu > li > a:hover, .ord-primary-nav .nav-menu > li > a:focus-visible { color: var(--ord-heading); } .ord-primary-nav .nav-menu > li > a:hover::after, .ord-primary-nav .nav-menu > li > a:focus-visible::after, .ord-primary-nav .nav-menu > li.current-menu-item > a::after { transform: scaleX(1); } .ord-primary-nav .nav-menu > li.current-menu-item > a { color: var(--ord-heading); } body.ord-home .ord-site-header:not(.is-scrolled) .ord-primary-nav .nav-menu > li > a, body:has(.ord-page-header.has-banner) .ord-site-header:not(.is-scrolled) .ord-primary-nav .nav-menu > li > a { color: rgba(255,255,255,.85); } body.ord-home .ord-site-header:not(.is-scrolled) .ord-primary-nav .nav-menu > li > a:hover, body.ord-home .ord-site-header:not(.is-scrolled) .ord-primary-nav .nav-menu > li.current-menu-item > a, body:has(.ord-page-header.has-banner) .ord-site-header:not(.is-scrolled) .ord-primary-nav .nav-menu > li > a:hover, body:has(.ord-page-header.has-banner) .ord-site-header:not(.is-scrolled) .ord-primary-nav .nav-menu > li.current-menu-item > a { color: #fff; } /* ...except the mobile dropdown panel itself, which always has its own solid, theme-matched background (see ord-mobile-nav-bg / .is-open below) — so once it's open, its links should always read with the normal theme color, never the forced-light one above. */ body.ord-home .ord-site-header:not(.is-scrolled) .ord-primary-nav.is-open .nav-menu > li > a, body:has(.ord-page-header.has-banner) .ord-site-header:not(.is-scrolled) .ord-primary-nav.is-open .nav-menu > li > a { color: var(--ord-text-dim); } .ord-header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; margin-left: auto; } .ord-theme-toggle { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--ord-border-2); background: var(--ord-veil-2); color: var(--ord-text-dim); flex-shrink: 0; transition: color .25s, border-color .25s, background .25s, transform .25s var(--ord-ease); } .ord-theme-toggle:hover { color: var(--ord-heading); border-color: var(--ord-accent); transform: rotate(-8deg); } .ord-theme-toggle .ord-theme-icon-moon { display: block; } .ord-theme-toggle .ord-theme-icon-sun { display: none; } :root[data-theme="light"] .ord-theme-toggle .ord-theme-icon-moon { display: none; } :root[data-theme="light"] .ord-theme-toggle .ord-theme-icon-sun { display: block; } .ord-menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; border: 1px solid var(--ord-border-2); border-radius: 10px; background: var(--ord-veil-3); align-items: center; transition: background-color .3s var(--ord-ease), border-color .3s var(--ord-ease); } .ord-menu-toggle span { width: 18px; height: 2px; background: var(--ord-heading); border-radius: 2px; transition: transform .3s var(--ord-ease), opacity .2s, background-color .3s var(--ord-ease); } .ord-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .ord-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .ord-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Same reasoning as the nav links above: default to the normal theme color, and only force a light icon while floating transparently over a real photo hero (front-page slider, or a page with an uploaded banner) — never on a plain interior header. */ .ord-theme-toggle { color: var(--ord-text-dim); border-color: var(--ord-border-2); } .ord-theme-toggle:hover { color: var(--ord-heading); } .ord-menu-toggle span { background: var(--ord-text-dim); } body.ord-home .ord-site-header:not(.is-scrolled) .ord-theme-toggle, body:has(.ord-page-header.has-banner) .ord-site-header:not(.is-scrolled) .ord-theme-toggle { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.35); } body.ord-home .ord-site-header:not(.is-scrolled) .ord-theme-toggle:hover, body:has(.ord-page-header.has-banner) .ord-site-header:not(.is-scrolled) .ord-theme-toggle:hover { color: #fff; } body.ord-home .ord-site-header:not(.is-scrolled) .ord-menu-toggle span, body:has(.ord-page-header.has-banner) .ord-site-header:not(.is-scrolled) .ord-menu-toggle span { background: rgba(255,255,255,.9); } /* ============================================================= Buttons ============================================================= */ .ord-btn { display: inline-flex; align-items: center; gap: 9px; justify-content: center; padding: 13px 24px; border-radius: 999px; font-weight: 600; font-size: .95rem; border: 1px solid transparent; white-space: nowrap; transition: transform .25s var(--ord-ease), box-shadow .25s, background .25s, color .25s, border-color .25s; position: relative; overflow: hidden; } .ord-btn svg { width: 16px; height: 16px; transition: transform .3s var(--ord-ease); } .ord-btn:hover svg { transform: translateX(3px); } .ord-btn-primary { background: var(--ord-grad-brand); color: #FFFFFF; box-shadow: 0 8px 24px -8px rgba(42,99,216,.45); } .ord-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px rgba(227,11,23,.55); } .ord-btn-ghost { color: var(--ord-text); border-color: var(--ord-border-2); background: var(--ord-veil-2); } .ord-btn-ghost:hover { border-color: var(--ord-accent); color: var(--ord-heading); background: rgba(227,11,23,.08); } .ord-btn-outline { color: var(--ord-text); border-color: var(--ord-border-2); background: transparent; } .ord-btn-outline:hover { border-color: var(--ord-secondary); color: var(--ord-secondary); background: var(--ord-veil-2); } .ord-btn-sm { padding: 9px 18px; font-size: .85rem; } .ord-btn-lg { padding: 16px 30px; font-size: 1rem; } .ord-btn:disabled { opacity: .6; cursor: not-allowed; transform: none !important; } .ord-link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--ord-secondary); font-weight: 600; } .ord-link-arrow svg { width: 16px; height: 16px; transition: transform .3s var(--ord-ease); } .ord-link-arrow:hover svg { transform: translateX(4px); } /* ============================================================= Hero ============================================================= */ .ord-hero { position: relative; padding: calc(var(--ord-header-h) + 96px) 0 0; overflow: hidden; isolation: isolate; } #ord-network-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: .75; } .ord-hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); z-index: -1; pointer-events: none; } .ord-hero-glow-1 { width: 560px; height: 560px; top: -180px; right: -160px; background: radial-gradient(circle, rgba(227,11,23,.32), transparent 70%); } .ord-hero-glow-2 { width: 460px; height: 460px; bottom: -220px; left: -140px; background: radial-gradient(circle, rgba(42,99,216,.22), transparent 70%); } /* ---- Floating research decoration (book / glasses / pencil) ---- Replaces the old plain glow blobs behind every interior-page hero, giving those headers a research-y feel instead of abstract shapes. */ .ord-floating-deco { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .ord-float-item { position: absolute; color: var(--ord-secondary); opacity: .16; } .ord-float-item svg { display: block; filter: drop-shadow(0 10px 24px rgba(0,0,0,.15)); } .ord-float-book-1 { width: 150px; top: 14%; right: 8%; animation: ord-float-a 9s ease-in-out infinite; } .ord-float-glasses { width: 110px; top: 58%; right: 22%; color: var(--ord-accent); opacity: .14; animation: ord-float-b 11s ease-in-out infinite; animation-delay: -3s; } .ord-float-book-2 { width: 100px; top: 20%; left: 6%; animation: ord-float-b 10s ease-in-out infinite; animation-delay: -1.5s; } .ord-float-pencil { width: 74px; top: 66%; left: 16%; color: var(--ord-accent); opacity: .15; animation: ord-float-a 8s ease-in-out infinite; animation-delay: -4s; } @keyframes ord-float-a { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-18px) rotate(3deg); } } @keyframes ord-float-b { 0%, 100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(16px) rotate(-4deg); } } @media (max-width: 720px) { .ord-float-book-1 { width: 100px; right: 2%; } .ord-float-glasses { width: 76px; right: 8%; } .ord-float-book-2, .ord-float-pencil { display: none; } } .ord-hero-inner { max-width: 780px; text-align: left; padding-bottom: 64px; } .ord-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ord-font-mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ord-secondary); padding: 6px 14px; border: 1px solid rgba(42,99,216,.3); border-radius: 999px; background: rgba(42,99,216,.06); } .ord-hero-title { font-size: clamp(2.4rem, 5.4vw, 4.1rem); margin: 22px 0 20px; } .ord-text-gradient { background: var(--ord-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } .ord-hero-desc { max-width: 620px; font-size: 1.1rem; color: var(--ord-text-dim); } .ord-hero-actions { display: flex; gap: 16px; margin-top: 30px; flex-wrap: wrap; } .ord-hero-stats { border-top: 1px solid var(--ord-border); background: var(--ord-veil-1); backdrop-filter: blur(6px); } .ord-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); } .ord-stat { padding: 30px 20px; text-align: center; border-right: 1px solid var(--ord-border); } .ord-stat:last-child { border-right: none; } .ord-stat-num { display: block; font-family: var(--ord-font-mono); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--ord-heading); } .ord-stat-label { display: block; margin-top: 6px; font-size: .85rem; color: var(--ord-text-dim); } /* ============================================================= Sections ============================================================= */ .ord-main { position: relative; z-index: 2; } .ord-section { padding: 76px 0; } .ord-section-panel { background: linear-gradient(180deg, var(--ord-bg-alt), var(--ord-bg)); border-top: 1px solid var(--ord-border); border-bottom: 1px solid var(--ord-border); } .ord-section-heading { max-width: 680px; margin: 0 auto 40px; } .ord-section-heading.align-center { text-align: center; } .ord-section-heading.align-left { text-align: left; margin-left: 0; } .ord-section-heading h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-top: 14px; } .ord-section-heading p { font-size: 1.05rem; margin-top: 10px; } .ord-lead { font-size: 1.08rem; color: var(--ord-text-dim); } .ord-highlight { color: var(--ord-heading); font-family: var(--ord-font-display); font-size: 1.2rem; padding-left: 18px; border-left: 3px solid var(--ord-secondary); } /* Page header (interior pages) */ .ord-page-header { padding: calc(var(--ord-header-h) + 52px) 0 44px; text-align: left; position: relative; overflow: hidden; isolation: isolate; } .ord-page-header h1 { font-size: clamp(2rem, 4.4vw, 3rem); margin-top: 16px; } .ord-page-subtitle { max-width: 620px; font-size: 1.08rem; } .ord-page-header + .ord-section { padding-top: 24px; } /*added later*/ /* Service detail page header — icon sits between the eyebrow and title, so it needs its own explicit spacing rather than relying on h1's default margin-top (meant for eyebrow-directly-above-h1), since adjacent margins collapse to the larger value instead of adding together. */ .ord-service-detail-header h1 { margin-top: 0; } .ord-service-detail-thumb { margin: 0 0 20px; border-radius: var(--ord-radius-lg); overflow: hidden; } .ord-service-detail-thumb img { width: 100%; height: auto; display: block; } /* ============================================================= Services grid ============================================================= */ .ord-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .ord-service-card { background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius); padding: 32px 26px; transition: transform .35s var(--ord-ease), border-color .35s var(--ord-ease), background .35s var(--ord-ease), color .35s var(--ord-ease); } .ord-service-card:hover { transform: translateY(-6px); border-color: rgba(227,11,23,.4); background: var(--ord-panel-2); } .ord-service-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(227,11,23,.18), rgba(42,99,216,.14)); color: var(--ord-accent); margin-bottom: 18px; } .ord-service-icon svg { width: 24px; height: 24px; } .ord-service-card h3 { font-size: 1.15rem; margin-bottom: 8px; } .ord-service-card p { font-size: .95rem; margin: 0; } .ord-service-card-lg .ord-service-body { font-size: .95rem; } /* Service detail page */ .ord-service-detail-icon { width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(227,11,23,.2), rgba(42,99,216,.16)); color: var(--ord-accent); margin: 24px 0 28px; box-shadow: 0 10px 26px -12px rgba(227,11,23,.35); } .ord-service-detail-icon svg { width: 28px; height: 28px; } .ord-service-detail-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: start; } .ord-service-detail-content { max-width: none; } .ord-service-detail-sidebar { position: sticky; top: calc(var(--ord-header-h) + 24px); display: flex; flex-direction: column; gap: 24px; } .ord-benefit-list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .ord-benefit-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .96rem; color: var(--ord-text); } .ord-benefit-list svg { color: var(--ord-secondary); margin-top: 3px; flex-shrink: 0; } .ord-advantage-panel { padding: 28px; border-radius: var(--ord-radius); background: linear-gradient(160deg, rgba(227,11,23,.12), rgba(42,99,216,.08)); border: 1px solid rgba(227,11,23,.25); } .ord-advantage-panel h3 { font-size: 1.15rem; margin: 8px 0 16px; } .ord-advantage-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .ord-advantage-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--ord-text-dim); } .ord-advantage-list svg { color: var(--ord-accent); margin-top: 2px; flex-shrink: 0; } .ord-service-cta-panel { padding: 28px; border-radius: var(--ord-radius); background: var(--ord-panel); border: 1px solid var(--ord-border); text-align: center; } .ord-service-cta-panel h3 { font-size: 1.1rem; margin-bottom: 8px; } .ord-service-cta-panel p { font-size: .88rem; margin-bottom: 18px; } .ord-service-cta-panel .ord-btn { width: 100%; justify-content: center; } /* ============================================================= Why choose us ============================================================= */ .ord-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; } .ord-why-grid h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); margin-top: 12px; } .ord-why-list { display: grid; gap: 18px; } .ord-why-item { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: var(--ord-radius-sm); border: 1px solid var(--ord-border); background: var(--ord-veil-1); transition: border-color .3s, background .3s; } .ord-why-item:hover { border-color: rgba(42,99,216,.35); background: rgba(42,99,216,.04); } .ord-why-item svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--ord-secondary); margin-top: 2px; } .ord-why-item h4 { font-size: 1rem; margin-bottom: 4px; } .ord-why-item p { font-size: .9rem; margin: 0; } /* ============================================================= Testimonials ============================================================= */ .ord-testimonial-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .ord-testimonial-card { background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius); padding: 30px; display: flex; flex-direction: column; gap: 14px; } .ord-quote-icon { width: 30px; height: 30px; color: var(--ord-royal); opacity: .8; } .ord-stars { display: flex; gap: 3px; } .ord-star { fill: var(--ord-star-empty); color: transparent; } .ord-star.is-filled { fill: #FFC94D; } .ord-testimonial-quote { color: var(--ord-text); font-size: .98rem; flex-grow: 1; } .ord-testimonial-author { display: flex; align-items: center; gap: 12px; padding-top: 6px; border-top: 1px solid var(--ord-border); transition: border-color .3s var(--ord-ease); } .ord-avatar-initials { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ord-grad-brand); color: #FFFFFF; font-weight: 700; font-family: var(--ord-font-display); flex-shrink: 0; } .ord-avatar-lg { width: 84px; height: 84px; font-size: 1.4rem; } .ord-avatar-img { width: 46px; height: 46px; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--ord-logo-card-bg); display: flex; align-items: center; justify-content: center; } .ord-avatar-img img { max-width: 78%; max-height: 78%; width: auto; height: auto; object-fit: contain; display: block; } .ord-testimonial-author strong { display: block; font-size: .92rem; color: var(--ord-heading); } .ord-testimonial-author span { font-size: .82rem; color: var(--ord-text-dim); } /* ============================================================= FAQ Accordion ============================================================= */ .ord-faq-wrap { max-width: 820px; position: relative; } .ord-faq-section .ord-container { overflow: visible; } .ord-accordion-item { border-bottom: 1px solid var(--ord-border); transition: border-color .3s var(--ord-ease); } .ord-accordion-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: none; border: none; color: var(--ord-heading); text-align: left; padding: 22px 4px; font-family: var(--ord-font-display); font-size: 1.05rem; font-weight: 600; } .ord-accordion-icon { position: relative; width: 20px; height: 20px; flex-shrink: 0; } .ord-accordion-icon::before, .ord-accordion-icon::after { content: ''; position: absolute; background: var(--ord-secondary); border-radius: 2px; transition: transform .3s var(--ord-ease); } .ord-accordion-icon::before { width: 100%; height: 2px; top: 50%; left: 0; transform: translateY(-50%); } .ord-accordion-icon::after { width: 2px; height: 100%; left: 50%; top: 0; transform: translateX(-50%); } .ord-accordion-trigger[aria-expanded="true"] .ord-accordion-icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; } .ord-accordion-panel { overflow: hidden; padding-bottom: 22px; } .ord-accordion-panel p { font-size: .96rem; margin: 0; } /* ============================================================= CTA ============================================================= */ .ord-cta { padding: 64px 0; position: relative; } .ord-cta-inner { text-align: center; max-width: 680px; margin: 0 auto; padding: 60px 40px; border-radius: var(--ord-radius-lg); background: linear-gradient(135deg, rgba(227,11,23,.16), rgba(42,99,216,.10)); border: 1px solid rgba(227,11,23,.28); position: relative; overflow: hidden; } .ord-cta-inner::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 1px; background: var(--ord-grad-brand); opacity: .35; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .ord-cta-inner h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); } .ord-cta-inner .ord-btn { margin-top: 20px; } /* ============================================================= Footer ============================================================= */ .ord-site-footer { position: relative; padding: 80px 0 0; background: var(--ord-bg-alt); border-top: 1px solid var(--ord-border); overflow: hidden; transition: background-color .3s var(--ord-ease), border-color .3s var(--ord-ease); } .ord-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 50px; } .ord-footer-tagline { font-size: .92rem; margin: 18px 0 20px; max-width: 280px; } .ord-footer-tagline em { color: var(--ord-secondary); font-style: normal; } .footer-widget-title { font-size: .95rem; color: var(--ord-heading); margin-bottom: 18px; } .ord-footer-col ul li { margin-bottom: 11px; } .ord-footer-col ul a { font-size: .9rem; color: var(--ord-text-dim); transition: color .2s; } .ord-footer-col ul a:hover { color: var(--ord-secondary); } .ord-footer-contact li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; font-size: .88rem; color: var(--ord-text-dim); } .ord-footer-contact svg { flex-shrink: 0; margin-top: 2px; color: var(--ord-accent); } .ord-footer-contact a { color: var(--ord-text-dim); } .ord-footer-contact a:hover { color: var(--ord-heading); } .ord-social-links { display: flex; gap: 10px; } .ord-social-links a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ord-border-2); display: flex; align-items: center; justify-content: center; color: var(--ord-text-dim); transition: all .25s; } .ord-social-links a:hover { color: #FFFFFF; background: var(--ord-grad-brand); border-color: transparent; } .ord-social-links svg { width: 17px; height: 17px; } .ord-social-links-lg a { width: 46px; height: 46px; } .ord-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 24px 0; border-top: 1px solid var(--ord-border); font-size: .84rem; color: var(--ord-text-dim-2); transition: border-color .3s var(--ord-ease), color .3s var(--ord-ease); } .ord-footer-bottom p { margin: 0; } .ord-footer-legal { display: flex; gap: 22px; } .ord-footer-legal a:hover { color: var(--ord-secondary); } .ord-footer-wave { position: absolute; top: -1px; left: 0; right: 0; height: 140px; background: var(--ord-grad-glow); opacity: .5; pointer-events: none; } .ord-back-to-top { position: fixed; right: 26px; bottom: 26px; z-index: 400; width: 46px; height: 46px; border-radius: 50%; background: var(--ord-grad-brand); color: #FFFFFF; border: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px -8px rgba(42,99,216,.5); opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: opacity .3s, transform .3s var(--ord-ease); } .ord-back-to-top.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } /* ============================================================= About page ============================================================= */ .ord-about-hero { position: relative; } .ord-about-content-wrap { position: relative; overflow: hidden; } .ord-about-content-glow { width: 420px; height: 420px; right: -140px; top: 50%; transform: translateY(-50%); background: radial-gradient(circle, rgba(42,99,216,.20), transparent 70%); display: none; } @media (min-width: 1300px) { .ord-about-content-glow { display: block; } } .ord-section-tight-top { padding-top: 4px; } .ord-values-grid, .ord-process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .ord-value-card { background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius); padding: 28px 26px; transition: transform .3s var(--ord-ease), border-color .3s var(--ord-ease), background-color .3s var(--ord-ease), color .3s var(--ord-ease), box-shadow .3s var(--ord-ease); } .ord-value-card:hover { transform: translateY(-4px); border-color: rgba(42,99,216,.35); box-shadow: 0 16px 34px -20px rgba(0,0,0,.4); } .ord-value-card svg { width: 26px; height: 26px; color: var(--ord-accent); margin-bottom: 16px; } .ord-value-card h4 { font-size: 1.02rem; margin-bottom: 8px; letter-spacing: -.01em; } .ord-value-card p { font-size: .9rem; line-height: 1.6; margin: 0; color: var(--ord-text-dim); } .ord-process-card { padding: 30px 28px; border-radius: var(--ord-radius); background: var(--ord-veil-2); border: 1px solid var(--ord-border); transition: transform .3s var(--ord-ease), border-color .3s var(--ord-ease), background-color .3s var(--ord-ease); } .ord-process-card:hover { transform: translateY(-4px); border-color: rgba(227,11,23,.3); } .ord-process-card p { color: var(--ord-text); font-size: 1rem; line-height: 1.65; margin-top: 12px; } .ord-timeline { display: flex; flex-direction: column; gap: 18px; max-width: 780px; border-left: 2px solid var(--ord-border); } .ord-timeline-item { position: relative; margin-left: 32px; padding: 20px 24px; background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius); transition: transform .3s var(--ord-ease), border-color .3s var(--ord-ease), background-color .3s var(--ord-ease), box-shadow .3s var(--ord-ease); } .ord-timeline-item:hover { transform: translateX(4px); border-color: rgba(42,99,216,.3); box-shadow: 0 14px 30px -18px rgba(0,0,0,.4); } .ord-timeline-item::before { content: ''; position: absolute; left: -39px; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--ord-grad-brand); box-shadow: 0 0 0 4px var(--ord-bg); } .ord-timeline-year { display: inline-block; font-family: var(--ord-font-mono); font-weight: 600; color: var(--ord-secondary); font-size: 1.05rem; margin-bottom: 8px; } .ord-timeline-item p { margin: 0; font-size: .96rem; line-height: 1.6; color: var(--ord-text-dim); } /* ============================================================= Services page extras ============================================================= */ .ord-services-grid-detailed { grid-template-columns: repeat(2, 1fr); } .ord-tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; } .ord-tag { font-size: .88rem; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--ord-border-2); color: var(--ord-text-dim); background: var(--ord-veil-2); transition: all .2s; } .ord-tag:hover { color: var(--ord-heading); border-color: var(--ord-secondary); } /* ============================================================= Team ============================================================= */ /* .ord-team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .ord-team-card { background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius); padding: 26px; text-align: center; transition: transform .3s var(--ord-ease), border-color .3s var(--ord-ease), background-color .3s var(--ord-ease), color .3s var(--ord-ease); } */ .ord-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, max-content)); gap: 22px; justify-content: center; /* centers the row when fewer cards */ } .ord-team-card { background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius); padding: 26px; text-align: center; transition: transform .3s var(--ord-ease), border-color .3s var(--ord-ease), background-color .3s var(--ord-ease), color .3s var(--ord-ease); } .ord-team-card:hover { transform: translateY(-5px); border-color: rgba(227,11,23,.4); } .ord-team-photo { width: 96px; height: 96px; margin: 0 auto 16px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--ord-panel-2); } .ord-team-photo img { width: 100%; height: 100%; object-fit: cover; } .ord-team-card h3 { font-size: 1.02rem; margin-bottom: 4px; } .ord-team-role { font-size: .86rem; color: var(--ord-accent); margin-bottom: 10px; } .ord-team-bio { font-size: .85rem; color: var(--ord-text-dim); margin-bottom: 10px; } .ord-team-linkedin { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--ord-border-2); align-items: center; justify-content: center; color: var(--ord-text-dim); } .ord-team-linkedin:hover { color: #FFFFFF; background: var(--ord-grad-brand); border-color: transparent; } /* Hierarchy groups */ .ord-team-groups { display: flex; flex-direction: column; gap: 56px; } /* .ord-team-group-heading { display: flex; align-items: baseline; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; } */ /* .ord-team-group-heading h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0; } .ord-team-group-count { font-family: var(--ord-font-mono); font-size: .8rem; color: var(--ord-text-dim-2); padding: 4px 12px; border: 1px solid var(--ord-border-2); border-radius: 999px; } */ .ord-team-group-heading { display: flex; align-items: center; /* aligns h2 and badge vertically */ justify-content: center; /* centers the whole heading block horizontally */ gap: 12px; margin-bottom: 24px; flex-wrap: wrap; text-align: center; } .ord-team-group-heading h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0; } .ord-team-group-count { font-family: var(--ord-font-mono); font-size: .8rem; color: var(--ord-text-dim-2); padding: 4px 12px; border: 1px solid var(--ord-border-2); border-radius: 999px; display: inline-flex; /* makes pill behave consistently */ align-items: center; /* centers text vertically inside pill */ justify-content: center; /* centers text horizontally inside pill */ } .ord-team-card { cursor: pointer; } .ord-team-card:focus-visible { outline: 2px solid var(--ord-accent); outline-offset: 3px; } .ord-team-readmore { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--ord-secondary); margin-top: 4px; } .ord-team-readmore svg { width: 13px; height: 13px; transition: transform .3s var(--ord-ease); } .ord-team-card:hover .ord-team-readmore svg { transform: translateX(3px); } .ord-avatar-xl { width: 100%; height: 100%; font-size: 2.6rem; border-radius: var(--ord-radius); } /* Team bio modal — mirrors the video modal's open/close mechanics */ .ord-team-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: calc(var(--ord-header-h) + 20px) 24px 24px; opacity: 0; visibility: hidden; transition: opacity .3s var(--ord-ease), visibility 0s linear .3s; overflow: hidden; } .ord-team-modal.is-open { opacity: 1; visibility: visible; transition: opacity .3s var(--ord-ease); } .ord-team-modal-backdrop { position: absolute; inset: 0; background: rgba(5,8,16,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .ord-team-modal-inner { position: relative; width: 100%; max-width: 700px; max-height: calc(100vh - var(--ord-header-h) - 40px); overflow-y: auto; background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius-lg); box-shadow: 0 24px 64px -12px rgba(0,0,0,.5), 0 8px 24px -8px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04) inset; transform: scale(.94) translateY(8px); transition: transform .3s var(--ord-ease), background-color .3s var(--ord-ease), border-color .3s var(--ord-ease); } .ord-team-modal.is-open .ord-team-modal-inner { transform: scale(1) translateY(0); } .ord-team-modal-body { display: grid; grid-template-columns: 220px 1fr; align-items: start; } .ord-team-modal-close.ord-team-modal-close { position: absolute; top: 16px; right: 16px; z-index: 3; background: var(--ord-veil-4); border: 1px solid var(--ord-border-2); color: var(--ord-heading); box-shadow: 0 4px 12px rgba(0,0,0,.2); } .ord-team-modal-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 36px; height: 36px; border-radius: 50%; background: var(--ord-veil-4); border: 1px solid var(--ord-border-2); color: var(--ord-heading); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,.2); transition: background-color .2s, border-color .2s, transform .2s; } .ord-team-modal-nav:hover { border-color: var(--ord-accent); transform: translateY(-50%) scale(1.08); } .ord-team-modal-prev { left: 12px; } .ord-team-modal-next { right: 12px; } /* Photo is a fixed, always-fully-visible square (like a profile picture) that stays pinned in view while the bio column scrolls, instead of a tall image force-cropped to fill the column. */ .ord-team-modal-photo { position: sticky; top: 0; z-index: 1; aspect-ratio: 1 / 1; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--ord-panel-2); border-right: 1px solid var(--ord-border); border-top-left-radius: calc(var(--ord-radius-lg) - 1px); border-bottom-left-radius: calc(var(--ord-radius-lg) - 1px); box-shadow: 4px 0 20px -8px rgba(0,0,0,.3); } .ord-team-modal-photo img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; } .ord-team-modal-photo .ord-avatar-initials { position: static; width: 68%; height: 68%; font-size: 2.2rem; } .ord-team-modal-info { padding: 30px 30px 32px; } .ord-team-modal-info h3 { font-size: 1.32rem; letter-spacing: -.01em; margin-bottom: 4px; } .ord-team-modal-role { display: inline-flex; font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--ord-accent); background: rgba(227,11,23,.12); border: 1px solid rgba(227,11,23,.25); border-radius: 999px; padding: 4px 12px; margin-bottom: 18px; } .ord-team-modal-expertise { font-size: .82rem; color: var(--ord-text-dim); margin-bottom: 22px; line-height: 1.5; background: var(--ord-panel-2); border: 1px solid var(--ord-border); border-radius: var(--ord-radius-sm); padding: 14px 16px; } .ord-team-modal-expertise strong { display: flex; align-items: center; gap: 6px; color: var(--ord-heading); margin-bottom: 6px; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; } .ord-team-modal-bio { font-size: .92rem; line-height: 1.7; margin-bottom: 20px; } .ord-team-modal-bio p { margin-bottom: 1em; } .ord-team-modal-bio p:last-child { margin-bottom: 0; } .ord-admin-note { margin-top: 26px; padding: 16px 20px; border-radius: var(--ord-radius-sm); border: 1px dashed var(--ord-border-2); font-size: .88rem; color: var(--ord-text-dim); } /* ============================================================= Careers ============================================================= */ .ord-jobs-list { display: flex; flex-direction: column; gap: 16px; } .ord-job-card { display: flex; align-items: center; gap: 22px; padding: 26px; background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius); transition: border-color .3s var(--ord-ease), transform .3s var(--ord-ease), background-color .3s var(--ord-ease), color .3s var(--ord-ease); } .ord-job-card:hover { border-color: rgba(42,99,216,.35); transform: translateY(-3px); } .ord-job-icon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px; background: rgba(227,11,23,.12); display: flex; align-items: center; justify-content: center; color: var(--ord-accent); } .ord-job-icon svg { width: 24px; height: 24px; } .ord-job-info { flex-grow: 1; min-width: 0; } .ord-job-info h3 { font-size: 1.1rem; margin-bottom: 6px; } .ord-job-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: .82rem; color: var(--ord-text-dim); margin-bottom: 8px; font-family: var(--ord-font-mono); } .ord-job-meta-single { margin: 18px 0 0; font-size: .84rem; } .ord-service-detail-layout + .ord-job-apply { margin-top: 40px; } .ord-job-meta span, .ord-event-meta span, .ord-event-detail-meta span, .ord-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: rgba(227,11,23,.1); border: 1px solid rgba(227,11,23,.22); color: var(--ord-accent); line-height: 1.2; transition: background-color .3s var(--ord-ease), border-color .3s var(--ord-ease), color .3s var(--ord-ease); } .ord-pill-accent, .ord-job-meta span:last-child:not(:only-child) { background: rgba(42,99,216,.1); border-color: rgba(42,99,216,.28); color: var(--ord-secondary); } .ord-job-desc p { font-size: .92rem; margin: 0; } /* ============================================================= Downloads ============================================================= */ .ord-downloads-list { display: flex; flex-direction: column; gap: 14px; } .ord-download-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 20px 24px; background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius); } .ord-download-icon { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; background: rgba(42,99,216,.14); color: var(--ord-royal); display: flex; align-items: center; justify-content: center; } .ord-download-info { flex: 1 1 220px; min-width: 0; } .ord-download-info h3 { font-size: 1rem; margin-bottom: 2px; overflow-wrap: break-word; } .ord-download-info p { font-size: .86rem; margin: 0; overflow-wrap: break-word; } .ord-download-btn { flex-shrink: 0; } .ord-download-pending { flex-shrink: 0; font-size: .82rem; color: var(--ord-text-dim-2); font-style: italic; } /* ============================================================= Contact ============================================================= */ .ord-contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; } .ord-contact-details { display: flex; flex-direction: column; gap: 20px; margin: 28px 0; } .ord-contact-details li { display: flex; gap: 14px; align-items: flex-start; } .ord-contact-details svg { width: 24px; height: 24px; color: var(--ord-secondary); flex-shrink: 0; margin-top: 2px; } .ord-contact-details span:first-child { display: block; font-size: .8rem; color: var(--ord-text-dim-2); margin-bottom: 2px; } .ord-contact-details a, .ord-contact-details div span:last-child { color: var(--ord-heading); font-size: 1rem; } .ord-contact-form-wrap { background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius-lg); padding: 36px; } .ord-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .ord-form-field { margin-bottom: 18px; } .ord-form-field label { display: block; font-size: .85rem; color: var(--ord-text-dim); margin-bottom: 8px; } .ord-form-field input, .ord-form-field textarea { width: 100%; padding: 13px 16px; border-radius: 10px; border: 1px solid var(--ord-border-2); background: var(--ord-veil-3); color: var(--ord-heading); font-size: .95rem; transition: border-color .2s, background .2s; resize: vertical; } .ord-form-field input:focus, .ord-form-field textarea:focus { outline: none; border-color: var(--ord-accent); background: var(--ord-veil-4); } .ord-hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } .ord-form-submit { width: 100%; position: relative; } .ord-btn-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35); border-top-color: #FFFFFF; border-radius: 50%; animation: ord-spin .7s linear infinite; } @keyframes ord-spin { to { transform: rotate(360deg); } } .ord-form-status { margin-top: 14px; font-size: .9rem; min-height: 1.2em; } .ord-form-status.is-success { color: var(--ord-secondary); } .ord-form-status.is-error { color: #FF7A7A; } /* ============================================================= Our Work / Portfolio ============================================================= */ .ord-portfolio-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; } .ord-portfolio-filter { padding: 10px 20px; border-radius: 999px; border: 1px solid var(--ord-border-2); background: var(--ord-veil-2); color: var(--ord-text-dim); font-size: .87rem; font-weight: 600; transition: background .35s var(--ord-ease), border-color .3s var(--ord-ease), color .3s var(--ord-ease), transform .3s var(--ord-ease), box-shadow .35s var(--ord-ease); } .ord-portfolio-filter:hover { border-color: var(--ord-accent); color: var(--ord-heading); } .ord-portfolio-filter.is-active { background: var(--ord-grad-brand); color: #FFFFFF; border-color: transparent; transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(227,11,23,.55); } .ord-portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px; } .ord-portfolio-card { position: relative; display: flex; flex-direction: column; border-radius: var(--ord-radius); overflow: hidden; background: var(--ord-panel); border: 1px solid var(--ord-border); transition: transform .35s var(--ord-ease), border-color .35s var(--ord-ease), background-color .35s var(--ord-ease), color .35s var(--ord-ease), opacity .35s var(--ord-ease), box-shadow .35s var(--ord-ease); } .ord-portfolio-card:hover { transform: translateY(-5px); border-color: rgba(227,11,23,.35); box-shadow: 0 16px 36px -18px rgba(0,0,0,.5); } .ord-portfolio-card:hover, .ord-portfolio-card:focus-within { will-change: transform; } .ord-portfolio-card:hover .ord-device-screen img { will-change: transform; } .ord-portfolio-card.is-hidden { opacity: 0; transform: scale(.92); pointer-events: none; } .ord-portfolio-media { position: relative; padding: 30px 30px 0; background: linear-gradient(160deg, var(--ord-panel-2), var(--ord-bg-alt)); flex-shrink: 0; } /* Browser/laptop chassis frame around the screenshot */ .ord-device-frame { position: relative; border-radius: 10px 10px 3px 3px; overflow: hidden; background: linear-gradient(180deg, #1c2540, #10182a); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 26px 50px -26px rgba(0,0,0,.65); transition: transform .5s var(--ord-ease); } .ord-device-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; } .ord-device-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.16); } .ord-device-dot:nth-child(1) { background: #ff5f57; } .ord-device-dot:nth-child(2) { background: #febc2e; } .ord-device-dot:nth-child(3) { background: #28c840; } .ord-device-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ord-logo-card-bg); } .ord-device-screen img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; transition: transform .6s var(--ord-ease); } .ord-portfolio-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ord-text-dim-2); } .ord-portfolio-placeholder svg { width: 34px; height: 34px; } /* "Laptop base" ledge beneath the browser chassis */ .ord-device-frame::after { content: ''; display: block; height: 9px; margin: 0 -6px; background: linear-gradient(180deg, #1c2540, #0a0f1e); border-radius: 0 0 8px 8px; box-shadow: 0 8px 16px -8px rgba(0,0,0,.55); } .ord-portfolio-badge { position: absolute; top: 20px; left: 20px; z-index: 2; padding: 5px 12px; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; background: var(--ord-grad-brand); color: #FFFFFF; box-shadow: 0 8px 18px -8px rgba(42,99,216,.55); } .ord-portfolio-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; width: 60px; height: 60px; border-radius: 50%; background: rgba(9,13,24,.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.28); color: #fff; display: flex; align-items: center; justify-content: center; transition: transform .3s var(--ord-ease), background .3s; } .ord-portfolio-play svg { width: 20px; height: 20px; margin-left: 3px; } .ord-portfolio-play:hover { transform: translate(-50%, -50%) scale(1.1); background: var(--ord-primary); border-color: transparent; } /* pointer-events:none by default so the overlay never blocks clicks to what's underneath it (e.g. the video play button) — only its own interactive children opt back in. This matters most once the overlay expands to cover the whole card on hover (see the hover-mode block below). */ .ord-portfolio-overlay { position: relative; z-index: 1; padding: 26px 28px 26px; flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; } .ord-portfolio-overlay a { pointer-events: auto; } .ord-portfolio-client-logo { display: block; background: var(--ord-logo-card-bg); padding: 5px 12px; border-radius: 6px; height: 28px; width: auto; max-width: 140px; object-fit: contain; margin-bottom: 12px; transition: background-color .3s var(--ord-ease); } .ord-portfolio-overlay h3 { font-size: 1.18rem; margin-bottom: 3px; } .ord-portfolio-client { display: block; font-size: .85rem; margin-bottom: 10px; } .ord-portfolio-desc { font-size: .92rem; line-height: 1.55; margin-bottom: 14px; } .ord-portfolio-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; margin-bottom: 6px; } .ord-portfolio-tag { display: inline-block; font-size: .74rem; padding: 4px 12px; border-radius: 999px; } .ord-portfolio-overlay .ord-link-arrow { font-size: .9rem; margin-top: 6px; } /* Static (touch / no-hover) context: the overlay sits in normal flow below the screenshot on the card's own background, so it should use the theme-aware text colors like the rest of the site. */ .ord-portfolio-client { color: var(--ord-accent); } .ord-portfolio-desc { color: var(--ord-text-dim); } .ord-portfolio-tag { background: var(--ord-veil-3); color: var(--ord-text-dim); } /* Desktop enhancement: turn the always-visible info panel into a hover-reveal overlay on devices that actually support hover, so mouse users get the richer "hover to see details" interaction while touch users keep the static, always-visible version below the image. */ @media (hover: hover) and (pointer: fine) { .ord-portfolio-card:hover .ord-device-frame { transform: translateY(-4px); } .ord-portfolio-card:hover .ord-device-screen img { transform: scale(1.08); } .ord-portfolio-overlay { position: absolute; inset: 0; padding-top: 45%; background: linear-gradient(180deg, transparent 0%, rgba(6,10,20,.68) 35%, rgba(6,10,20,.97) 100%); opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ord-ease), transform .35s var(--ord-ease); } .ord-portfolio-card:hover .ord-portfolio-overlay, .ord-portfolio-card:focus-within .ord-portfolio-overlay { opacity: 1; transform: translateY(0); } /* On this dark scrim, text must stay light regardless of site-wide theme — the background here is always dark (it's an image overlay, not a themed panel), so text tied to the light/dark text variables would go dark-on-dark and disappear in light mode. */ .ord-portfolio-overlay h3 { color: #fff; } .ord-portfolio-overlay .ord-portfolio-client { color: #BBD3FF; } .ord-portfolio-overlay .ord-portfolio-desc { color: rgba(255,255,255,.78); } .ord-portfolio-overlay .ord-portfolio-tag { background: rgba(255,255,255,.14); color: rgba(255,255,255,.9); } } /* Single project page layout */ .ord-project-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 44px; align-items: start; } .ord-project-main { display: flex; flex-direction: column; gap: 28px; min-width: 0; } .ord-device-frame-lg { max-width: 100%; } .ord-project-sidebar { display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: var(--ord-radius); background: var(--ord-panel); border: 1px solid var(--ord-border); position: sticky; top: calc(var(--ord-header-h) + 24px); } .ord-project-client-logo { max-height: 40px; width: auto; max-width: 160px; object-fit: contain; background: var(--ord-logo-card-bg); padding: 6px 12px; border-radius: 8px; align-self: flex-start; transition: background-color .3s var(--ord-ease); } .ord-project-meta-row { display: flex; flex-direction: column; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--ord-border); } .ord-project-meta-row:last-of-type { border-bottom: none; padding-bottom: 0; } .ord-project-meta-row span { font-size: .78rem; color: var(--ord-text-dim-2); text-transform: uppercase; letter-spacing: .04em; } .ord-project-meta-row strong { font-size: .98rem; color: var(--ord-heading); font-weight: 600; } .ord-project-content { max-width: none; } /* Video lightbox modal */ .ord-video-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity .3s var(--ord-ease), visibility 0s linear .3s; } .ord-video-modal.is-open { opacity: 1; visibility: visible; transition: opacity .3s var(--ord-ease); } .ord-video-modal-backdrop { position: absolute; inset: 0; background: rgba(5,8,16,.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .ord-video-modal-inner { position: relative; width: 100%; max-width: 960px; transform: scale(.94); transition: transform .3s var(--ord-ease); } .ord-video-modal.is-open .ord-video-modal-inner { transform: scale(1); } .ord-video-modal-close { position: absolute; top: -48px; right: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--ord-panel); border: 1px solid var(--ord-border-2); color: var(--ord-heading); display: flex; align-items: center; justify-content: center; transition: border-color .2s; } .ord-video-modal-close:hover { border-color: var(--ord-accent); } .ord-video-modal-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--ord-radius); overflow: hidden; background: #000; box-shadow: 0 30px 70px -20px rgba(0,0,0,.7); } .ord-video-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ============================================================= Our Clients ============================================================= */ /* .ord-clients-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .ord-client-card { display: flex; align-items: center; justify-content: center; height: 140px; padding: 28px; background: rgba(255,255,255,.94); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-radius: var(--ord-radius); border: 1px solid rgba(15,23,42,.06); box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: transform .3s var(--ord-ease), box-shadow .3s var(--ord-ease), background-color .3s var(--ord-ease); } .ord-client-card:hover { transform: translateY(-4px); background: rgba(255,255,255,1); box-shadow: 0 18px 34px -18px rgba(0,0,0,.4); } .ord-client-card img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .ord-client-name { font-family: var(--ord-font-display); font-weight: 600; color: #1d2327; text-align: center; font-size: .95rem; } */ /* ============================================================= Our Clients ============================================================= */ .ord-clients-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 200px)); /* fixed width */ gap: 24px; justify-content: center; /* centers when fewer cards */ margin: 0 auto; /* centers the whole block */ } .ord-client-card { display: flex; align-items: center; justify-content: center; height: 140px; padding: 28px; background: var(--ord-logo-card-bg); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-radius: var(--ord-radius); border: 1px solid var(--ord-logo-card-border); box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: transform .3s var(--ord-ease), box-shadow .3s var(--ord-ease), background-color .3s var(--ord-ease), border-color .3s var(--ord-ease); } .ord-client-card:hover { transform: translateY(-4px); background: var(--ord-logo-card-bg-hover); border-color: rgba(227,11,23,.45); box-shadow: 0 18px 34px -14px rgba(227,11,23,.35); } .ord-client-card img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .ord-client-name { font-family: var(--ord-font-display); font-weight: 600; color: #1d2327; text-align: center; font-size: .95rem; } /* ============================================================= Our Partners (grouped by category) ============================================================= */ /* .ord-partner-group { margin-bottom: 44px; } .ord-partner-group:last-child { margin-bottom: 0; } .ord-partner-group-title { font-size: 1rem; font-weight: 600; color: var(--ord-text-dim); margin: 0 0 20px; display: flex; align-items: center; gap: 14px; } .ord-partner-group-title::after { content: ''; flex: 1; height: 1px; background: var(--ord-border); } */ .ord-partner-group { margin-bottom: 44px; } .ord-partner-group:last-child { margin-bottom: 0; } .ord-partner-group-title { font-size: 1rem; font-weight: 600; color: var(--ord-text-dim); margin: 0 0 20px; display: flex; align-items: center; justify-content: center; /* centers heading + line */ gap: 14px; flex-wrap: wrap; text-align: center; } .ord-partner-group-title::before, .ord-partner-group-title::after { content: ''; flex: 1; height: 1px; background: var(--ord-border); } /* ============================================================= Blog / generic content ============================================================= */ .ord-blog-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; } .ord-blog-filter { padding: 10px 20px; border-radius: 999px; border: 1px solid var(--ord-border-2); background: var(--ord-veil-2); color: var(--ord-text-dim); font-size: .87rem; font-weight: 600; transition: background .35s var(--ord-ease), border-color .3s var(--ord-ease), color .3s var(--ord-ease), transform .3s var(--ord-ease), box-shadow .35s var(--ord-ease); } .ord-blog-filter:hover { border-color: var(--ord-accent); color: var(--ord-heading); } .ord-blog-filter.is-active { background: var(--ord-grad-brand); color: #FFFFFF; border-color: transparent; transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(227,11,23,.55); } .ord-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .ord-blog-card { background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius); overflow: hidden; transition: transform .35s var(--ord-ease), border-color .35s var(--ord-ease), background-color .35s var(--ord-ease), color .35s var(--ord-ease), opacity .35s var(--ord-ease), box-shadow .35s var(--ord-ease); } .ord-blog-card:hover { transform: translateY(-4px); border-color: rgba(227,11,23,.3); box-shadow: 0 16px 36px -18px rgba(0,0,0,.4); } .ord-blog-card.is-hidden { opacity: 0; transform: scale(.92); pointer-events: none; } .ord-blog-thumb { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--ord-veil-3); } .ord-blog-thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--ord-ease); } .ord-blog-card:hover .ord-blog-thumb img { transform: scale(1.035); } .ord-blog-card-body { padding: 20px 22px 22px; } .ord-blog-card h3 { font-size: 1.05rem; margin: 0 0 6px; } .ord-blog-card p { font-size: .9rem; margin: 0 0 10px; } .ord-blog-card .ord-link-arrow { margin-top: 2px; } .ord-pagination { margin-top: 40px; text-align: center; } .ord-blog-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; font-family: var(--ord-font-mono); font-size: .72rem; } .ord-blog-meta span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; background: var(--ord-veil-3); border: 1px solid var(--ord-border); color: var(--ord-text-dim-2); transition: background-color .3s var(--ord-ease), border-color .3s var(--ord-ease); } .ord-blog-meta-single { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--ord-border); } .ord-blog-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; } .ord-prose img { border-radius: var(--ord-radius-sm); height: auto; margin: 1.4em 0; } .ord-prose figure { margin: 1.4em 0; } .ord-prose figcaption { font-size: .85rem; color: var(--ord-text-dim-2); text-align: center; margin-top: 8px; } /* ============================================================= Comments ============================================================= */ .ord-comments { max-width: 780px; margin: 56px auto 0; } .ord-comments-title { font-size: 1.3rem; margin-bottom: 24px; } .ord-comment-list, .ord-comment-list ol { list-style: none; margin: 0; padding: 0; } .ord-comment-list .children { list-style: none; margin: 20px 0 0; padding: 0 0 0 32px; border-left: 1px solid var(--ord-border); } .ord-comment { margin-bottom: 24px; } .ord-comment-body { display: flex; gap: 14px; } .ord-comment-avatar { flex-shrink: 0; } .ord-comment-avatar img { width: 44px; height: 44px; border-radius: 50%; display: block; } .ord-comment-content { flex: 1; min-width: 0; } .ord-comment-meta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .ord-comment-author { font-size: .95rem; color: var(--ord-heading); } .ord-comment-date a { font-size: .78rem; color: var(--ord-text-dim-2); } .ord-comment-date a:hover { color: var(--ord-secondary); } .ord-comment-pending { font-size: .82rem; color: var(--ord-accent); font-style: italic; margin-bottom: 8px; } .ord-comment-text { font-size: .92rem; color: var(--ord-text-dim); } .ord-comment-text p { margin-bottom: .8em; } .ord-comment-reply { margin-top: 8px; } .ord-comment-reply a { font-size: .78rem; font-weight: 600; color: var(--ord-secondary); } .ord-comment-reply a:hover { text-decoration: underline; } .ord-comment-form-wrap { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--ord-border); } .ord-comment-form-wrap #reply-title { font-size: 1.1rem; margin-bottom: 6px; } .ord-comment-form-note { font-size: .85rem; color: var(--ord-text-dim-2); margin-bottom: 20px; } .ord-comment-form-wrap .comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: .82rem; color: var(--ord-text-dim); } .ord-comment-form-wrap .comment-form-cookies-consent input { margin: 0; } #cancel-comment-reply-link { display: inline-block; margin-left: 12px; font-size: .82rem; color: var(--ord-text-dim-2); } #cancel-comment-reply-link:hover { color: var(--ord-secondary); } .ord-prose { max-width: 780px; margin-inline: auto; font-size: 1.02rem; } .ord-prose h2, .ord-prose h3 { margin-top: 1.6em; } .ord-prose > p, .ord-prose li { max-width: 68ch; text-align: justify; text-align-last: left; line-height: 1.75; } .ord-prose > p:last-child { margin-bottom: 0; } .ord-prose blockquote { max-width: 68ch; } /* A padded, bordered panel for text-heavy single-post/page content, so long-form copy doesn't just float loose in open space. Line length is capped on the paragraphs above (68ch) regardless of how wide the card itself is, so text stays comfortable to read even in a full-width card. */ .ord-text-card { background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius); padding: 44px clamp(24px, 5vw, 56px); transition: border-color .3s var(--ord-ease), background-color .3s var(--ord-ease); } .ord-text-card-lg { max-width: none; padding: clamp(28px, 4vw, 48px) clamp(24px, 6vw, 64px); } @media (max-width: 600px) { .ord-text-card { padding: 28px 22px; } .ord-cta-inner { padding: 44px 26px; } .ord-cta-inner h2 { font-size: clamp(1.4rem, 6vw, 1.8rem); line-height: 1.3; } .ord-cta-inner p { margin-top: 12px; } .ord-cta-inner .ord-btn { margin-top: 26px; width: 100%; } } @media (max-width: 900px) { .ord-cta .ord-container { padding: 0 24px; } } .ord-404 { padding: 160px 0 140px; position: relative; overflow: hidden; isolation: isolate; } .ord-404-code { font-size: clamp(2.2rem, 6vw, 3.4rem); margin: 14px 0; } /* ============================================================= Scroll reveal ============================================================= */ .reveal-up { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ord-ease), transform .7s var(--ord-ease); transition-delay: calc(var(--d, 0) * 90ms); } .reveal-up.is-visible { opacity: 1; transform: translateY(0); } .ord-form-field input[type="file"] { padding: 10px 14px; font-size: .88rem; color: var(--ord-text-dim); } .ord-form-field input[type="file"]::-webkit-file-upload-button { margin-right: 12px; padding: 7px 14px; border-radius: 999px; border: none; background: var(--ord-grad-brand); color: #FFFFFF; font-weight: 600; font-size: .82rem; cursor: pointer; } .ord-field-hint { font-weight: 400; color: var(--ord-text-dim-2); font-size: .78rem; } .ord-file-error { color: #FF7A7A; font-size: .82rem; margin: 8px 0 0; } .ord-form-field.has-error input, .ord-form-field.has-error input[type="file"] { border-color: #FF7A7A; } .ord-job-apply { margin-top: 20px; padding: 22px; border-radius: var(--ord-radius); background: var(--ord-veil-2); border: 1px solid var(--ord-border); } .ord-job-apply .ord-form-submit { width: auto; padding: 12px 26px; } .ord-apply-toggle[aria-expanded="true"] { border-color: var(--ord-secondary); color: var(--ord-secondary); } .ord-apply-toggle { flex-shrink: 0; } .ord-job-apply-animated { opacity: 0; transform: translateY(-10px); transition: opacity .35s var(--ord-ease), transform .35s var(--ord-ease); } .ord-job-apply-animated.is-open { opacity: 1; transform: translateY(0); } .ord-job-full-desc { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--ord-border); } .ord-job-full-desc:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .ord-map-embed { border-radius: var(--ord-radius); overflow: hidden; border: 1px solid var(--ord-border); line-height: 0; } .ord-map-embed iframe { display: block; filter: var(--ord-map-filter); } /* ============================================================= Responsive ============================================================= */ @media (max-width: 1080px) { .ord-services-grid { grid-template-columns: repeat(2, 1fr); } .ord-testimonial-track { grid-template-columns: repeat(2, 1fr); } .ord-team-grid { grid-template-columns: repeat(3, 1fr); } .ord-portfolio-grid { gap: 24px; } .ord-footer-grid { grid-template-columns: 1fr 1fr; } .ord-clients-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .ord-container { padding: 0 20px; } .ord-why-grid, .ord-contact-grid, .ord-project-layout, .ord-service-detail-layout { grid-template-columns: 1fr; gap: 36px; } .ord-service-detail-sidebar { position: static; } .ord-team-modal-body { grid-template-columns: 1fr; } .ord-comment-list .children { padding-left: 16px; } .ord-comment-avatar img { width: 36px; height: 36px; } .ord-team-modal-photo { position: static; width: 148px; aspect-ratio: 1 / 1; margin: 24px auto 0; border-radius: 50%; border: 2px solid var(--ord-border-2); box-shadow: 0 8px 24px -6px rgba(0,0,0,.35); } .ord-team-modal-photo .ord-avatar-initials { border-radius: 50%; } .ord-team-modal-prev { left: 8px; } .ord-team-modal-next { right: 8px; } .ord-team-modal-info { padding: 16px 24px 28px; text-align: center; } .ord-team-modal-expertise { text-align: left; } .ord-team-modal-bio { text-align: left; } .ord-project-sidebar { position: static; } .ord-values-grid, .ord-process-grid { grid-template-columns: repeat(2, 1fr); } .ord-services-grid-detailed { grid-template-columns: 1fr; } } @media (max-width: 720px) { .ord-stats-grid { grid-template-columns: 1fr; } .ord-stat { border-right: none; border-bottom: 1px solid var(--ord-border); } .ord-stat:last-child { border-bottom: none; } .ord-services-grid, .ord-testimonial-track, .ord-team-grid, .ord-blog-grid, .ord-portfolio-grid, .ord-clients-grid { grid-template-columns: 1fr; } .ord-values-grid, .ord-process-grid { grid-template-columns: 1fr; } .ord-footer-grid { grid-template-columns: 1fr; text-align: center; } .ord-footer-brand { display: flex; flex-direction: column; align-items: center; } .ord-footer-col ul { padding: 0; } .ord-footer-contact li { justify-content: center; } .ord-social-links { justify-content: center; } .ord-footer-bottom { flex-direction: column; text-align: center; justify-content: center; } .ord-footer-legal { justify-content: center; } .ord-form-row { grid-template-columns: 1fr; } .ord-job-card { flex-direction: column; align-items: flex-start; } .ord-download-row { flex-direction: column; align-items: stretch; text-align: center; } .ord-download-icon { margin: 0 auto; } .ord-download-info { text-align: center; } .ord-download-btn { width: 100%; justify-content: center; } .ord-hero-title { font-size: clamp(2rem, 8vw, 2.6rem); } .ord-section { padding: 52px 0; } } /* ============================================================= Events (mirrors the Careers list/detail pattern) ============================================================= */ .ord-events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .ord-event-card { display: flex; flex-direction: column; background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius); overflow: hidden; transition: transform .35s var(--ord-ease), border-color .35s var(--ord-ease), background-color .35s var(--ord-ease), box-shadow .35s var(--ord-ease); } .ord-event-card:hover { transform: translateY(-5px); border-color: rgba(42,99,216,.35); box-shadow: 0 18px 38px -20px rgba(0,0,0,.5); } .ord-event-media { position: relative; aspect-ratio: 16/10; background: var(--ord-logo-card-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: background-color .3s var(--ord-ease); } .ord-event-media img { width: 100%; height: 100%; object-fit: contain; padding: 18px; } .ord-event-date-badge { position: absolute; top: 14px; left: 14px; z-index: 2; text-align: center; background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius-sm); padding: 8px 12px; box-shadow: 0 8px 18px -10px rgba(0,0,0,.4); line-height: 1.1; } .ord-event-date-badge .ord-event-day { display: block; font-family: var(--ord-font-display); font-weight: 700; font-size: 1.15rem; color: var(--ord-heading); } .ord-event-date-badge .ord-event-mon { display: block; font-family: var(--ord-font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ord-accent); margin-top: 2px; } .ord-event-body { padding: 20px 22px 24px; flex-grow: 1; display: flex; flex-direction: column; } .ord-event-body h3 { font-size: 1.08rem; margin: 0 0 10px; } .ord-event-body h3 a { color: inherit; } .ord-event-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; } .ord-event-meta span { font-size: .74rem; padding: 5px 12px; } .ord-event-detail-layout { display: grid; grid-template-columns: minmax(0, 460px) 1fr; gap: 48px; align-items: start; } .ord-event-detail-media { background: var(--ord-logo-card-bg); border-radius: var(--ord-radius); border: 1px solid var(--ord-logo-card-border); padding: 24px; display: flex; align-items: center; justify-content: center; transition: background-color .3s var(--ord-ease), border-color .3s var(--ord-ease); } .ord-event-detail-media img { width: 100%; height: auto; object-fit: contain; } .ord-event-detail-meta { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; margin: 18px 0 22px; } .ord-event-detail-meta span { font-size: .88rem; padding: 8px 16px; } .ord-event-detail-meta span svg { flex-shrink: 0; } .ord-event-empty { padding: 60px 24px; text-align: center; border: 1px dashed var(--ord-border-2); border-radius: var(--ord-radius); color: var(--ord-text-dim); } @media (max-width: 900px) { .ord-events-grid { grid-template-columns: repeat(2, 1fr); } .ord-event-detail-layout { grid-template-columns: 1fr; gap: 30px; } .ord-cta { padding-top: 44px; } } @media (max-width: 720px) { .ord-events-grid { grid-template-columns: 1fr; } } /* Page scroll progress bar — thin gradient line pinned to the very top, above the header, filling left-to-right as the visitor scrolls down. */ .ord-scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 999; background: transparent; pointer-events: none; } .ord-scroll-progress span { display: block; height: 100%; width: 0%; background: var(--ord-grad-brand); transition: width .1s linear; } /* ============================================================= ORD additions ============================================================= */ /* ---- Logo (image, theme-aware) ---- */ .ord-logo { gap: 12px; } .ord-logo-img { display: block; height: 56px; width: auto; max-width: none; } .ord-logo .ord-logo-dark { display: block; } .ord-logo .ord-logo-light { display: none; } :root[data-theme="light"] .ord-logo .ord-logo-dark { display: none; } :root[data-theme="light"] .ord-logo .ord-logo-light { display: block; } .ord-site-header.is-scrolled .ord-logo-img { height: 46px; } .ord-logo-img { transition: height .3s var(--ord-ease); } .ord-footer-brand .ord-logo-img { height: 84px; } .custom-logo { max-height: 56px; width: auto; } .ord-logo-text { line-height: 1.1; } .ord-logo-text small { display: block; font-family: var(--ord-font-body); font-size: .62rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ord-text-dim); } /* ---- Primary nav: dropdown sub-menus (desktop) ---- */ .ord-primary-nav .nav-menu { gap: 0; flex-wrap: nowrap; } .ord-primary-nav .nav-menu > li { position: relative; } .ord-primary-nav .nav-menu > li > a { padding: 10px clamp(7px, .55vw, 12px); font-size: clamp(.8rem, .5vw + .5rem, .9rem); } .ord-primary-nav .nav-menu > li > a::after { left: 10px; right: 10px; } .ord-primary-nav .menu-item-has-children > a { padding-right: 24px; } .ord-primary-nav .menu-item-has-children > a::before { content: ''; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .25s var(--ord-ease); opacity: .7; } .ord-primary-nav .menu-item-has-children:hover > a::before, .ord-primary-nav .menu-item-has-children.is-expanded > a::before { transform: rotate(225deg); margin-top: -1px; } .ord-primary-nav .sub-menu { position: absolute; top: 100%; left: 0; min-width: 240px; padding: 8px; background: var(--ord-panel); border: 1px solid var(--ord-border-2); border-radius: var(--ord-radius); box-shadow: 0 24px 50px -20px rgba(0,0,0,.5); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s var(--ord-ease), transform .25s var(--ord-ease), visibility .2s; z-index: 20; } .ord-primary-nav .sub-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* hover bridge */ .ord-primary-nav .menu-item-has-children:hover > .sub-menu, .ord-primary-nav .menu-item-has-children:focus-within > .sub-menu, .ord-primary-nav .menu-item-has-children.is-expanded > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .ord-primary-nav .sub-menu a { display: block; padding: 10px 14px; border-radius: 10px; font-size: .88rem; color: var(--ord-text-dim); white-space: nowrap; transition: background .2s, color .2s; } .ord-primary-nav .sub-menu a:hover, .ord-primary-nav .sub-menu a:focus-visible { background: var(--ord-veil-4); color: var(--ord-heading); } .ord-primary-nav .sub-menu li.current-menu-item > a { color: var(--ord-accent); } .ord-primary-nav .nav-menu > li:nth-last-child(-n+3) > .sub-menu { left: auto; right: 0; } .ord-primary-nav .ord-menu-cta > a { background: var(--ord-grad-brand); color: #fff !important; margin-left: 6px; padding-right: clamp(12px, .9vw, 18px); } .ord-primary-nav .ord-menu-cta > a::after { display: none; } .ord-primary-nav .ord-menu-cta > a:hover { box-shadow: 0 8px 22px -8px rgba(227,11,23,.6); } .ord-submenu-toggle { display: none; } @media (max-width: 1180px) { .ord-primary-nav { position: absolute; top: calc(100% + 10px); left: 4px; right: 4px; max-height: min(76vh, 520px); overflow-y: auto; background: var(--ord-mobile-nav-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--ord-border); border-radius: var(--ord-radius); box-shadow: 0 28px 60px -20px rgba(0,0,0,.55); transform: translateY(-10px) scale(.98); opacity: 0; pointer-events: none; transition: transform .3s var(--ord-ease), opacity .25s var(--ord-ease), background-color .3s var(--ord-ease), border-color .3s var(--ord-ease); padding: 12px 8px; } .ord-primary-nav.is-open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; } .ord-primary-nav .nav-menu { flex-direction: column; align-items: stretch; padding: 4px; gap: 3px; } .ord-primary-nav .nav-menu > li > a { display: block; padding: 14px 18px; font-size: 1.02rem; border-radius: var(--ord-radius-sm); } .ord-primary-nav .nav-menu > li > a:hover, .ord-primary-nav .nav-menu > li > a:focus-visible { background: var(--ord-veil-3); } .ord-btn.ord-mobile-nav-cta { display: flex; align-items: center; justify-content: center; margin: 10px 8px 4px; padding: 14px 20px; } .ord-menu-toggle { display: flex; } .ord-header-actions .ord-btn-primary.ord-btn-sm { display: none; } .ord-header-actions { gap: 10px; } .ord-container { padding: 0 20px; } .ord-primary-nav .nav-menu > li > a::after { display: none; } .ord-primary-nav .menu-item-has-children > a { padding-right: 56px; } .ord-primary-nav .menu-item-has-children > a::before { display: none; } .ord-primary-nav .menu-item-has-children { position: relative; } .ord-submenu-toggle { display: flex; position: absolute; right: 6px; top: 6px; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 10px; color: var(--ord-text-dim); } .ord-submenu-toggle::before { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px,-2px); transition: transform .25s var(--ord-ease); } .is-expanded > .ord-submenu-toggle::before { transform: rotate(225deg) translate(-2px,-2px); } .ord-primary-nav .sub-menu { position: static; min-width: 0; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; background: transparent; padding: 0 0 6px 14px; display: none; border-left: 2px solid var(--ord-border-2); margin: 0 0 6px 20px; } .ord-primary-nav .sub-menu::before { display: none; } .ord-primary-nav .is-expanded > .sub-menu { display: block; } .ord-primary-nav .menu-item-has-children:hover > .sub-menu { display: none; } .ord-primary-nav .menu-item-has-children.is-expanded:hover > .sub-menu { display: block; } .ord-primary-nav .sub-menu a { white-space: normal; padding: 11px 12px; font-size: .95rem; } .ord-primary-nav .ord-menu-cta > a { margin: 8px 6px 4px; text-align: center; padding: 14px 18px; } .ord-primary-nav { max-height: min(80vh, 640px); } } /* ---- Hero slider ---- */ .ord-slider { position: relative; isolation: isolate; overflow: hidden; background: var(--ord-navy); color: #fff; } .ord-slider-track { position: relative; height: clamp(520px, 82vh, 780px); min-height: 520px; } .ord-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s var(--ord-ease), visibility .9s; display: flex; align-items: center; } .ord-slide.is-active { opacity: 1; visibility: visible; z-index: 2; } .ord-slide-media, .ord-slide-media picture, .ord-slide-media img { position: absolute; inset: 0; width: 100%; height: 100%; } .ord-slide-media img { object-fit: cover; object-position: var(--focus, center); transform: scale(1.06); transition: transform 7s linear; max-width: none; } .ord-slide.is-active .ord-slide-media img { transform: scale(1); } .ord-slide-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,14,38,.88) 0%, rgba(5,14,38,.62) 45%, rgba(5,14,38,.18) 100%), linear-gradient(0deg, rgba(5,14,38,.55), transparent 40%); } /* No-image fallback art: brand gradient + big check-mark motif from the logo */ .ord-slide-art { position: absolute; inset: 0; background: radial-gradient(60% 80% at 85% 20%, rgba(227,11,23,.45), transparent 60%), radial-gradient(70% 70% at 10% 90%, rgba(42,99,216,.45), transparent 60%), linear-gradient(135deg, #071633 0%, #0A2C6B 100%); } .ord-slide-art::before { content: ''; position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(circle at 70% 40%, #000, transparent 70%); -webkit-mask-image: radial-gradient(circle at 70% 40%, #000, transparent 70%); } .ord-slide-art::after { content: ''; position: absolute; right: 6%; bottom: -8%; width: min(46vw, 520px); aspect-ratio: 1; opacity: .9; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M6 56c6 1 12 6 18 17 12-30 34-52 70-66-30 20-46 46-58 90-4-2-8-12-16-24-4-8-9-13-14-17Z' fill='%23E30B17'/%3E%3C/svg%3E") no-repeat center / contain; filter: drop-shadow(0 20px 40px rgba(227,11,23,.35)); } .ord-slide-art-2 { background: radial-gradient(60% 80% at 15% 15%, rgba(227,11,23,.4), transparent 60%), radial-gradient(70% 70% at 90% 90%, rgba(42,99,216,.5), transparent 60%), linear-gradient(225deg, #071633 0%, #0A2C6B 100%); } .ord-slide-art-3 { background: radial-gradient(60% 80% at 50% 0%, rgba(227,11,23,.35), transparent 60%), radial-gradient(80% 70% at 0% 100%, rgba(42,99,216,.55), transparent 60%), linear-gradient(180deg, #071633 0%, #0B3382 100%); } .ord-slide-inner { position: relative; z-index: 3; padding-top: var(--ord-header-h); padding-bottom: 96px; } .ord-slide-copy { max-width: 720px; } .ord-slide .ord-eyebrow { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); } .ord-slide-title { color: #fff; font-size: clamp(2.2rem, 5vw, 3.8rem); margin: 22px 0 18px; text-shadow: 0 2px 20px rgba(0,0,0,.25); } .ord-slide-desc { color: rgba(255,255,255,.88); font-size: 1.1rem; max-width: 600px; } .ord-slide .ord-btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.08); } .ord-slide .ord-btn-ghost:hover { background: rgba(255,255,255,.18); border-color: #fff; color: #fff; } .ord-slide .ord-hero-actions { margin-top: 28px; } .ord-slide.is-active .ord-slide-copy > * { animation: ord-slide-in .8s var(--ord-ease) both; } .ord-slide.is-active .ord-slide-copy > *:nth-child(2) { animation-delay: .1s; } .ord-slide.is-active .ord-slide-copy > *:nth-child(3) { animation-delay: .2s; } .ord-slide.is-active .ord-slide-copy > *:nth-child(4) { animation-delay: .3s; } @keyframes ord-slide-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } .ord-slider-controls { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 5; } .ord-slider-controls .ord-container { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .ord-slider-dots { display: flex; gap: 10px; } .ord-slider-dot { width: 34px; height: 5px; border-radius: 4px; background: rgba(255,255,255,.35); position: relative; overflow: hidden; padding: 0; } .ord-slider-dot::after { content: ''; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; } .ord-slider-dot.is-active::after { transform: scaleX(1); } .ord-slider.is-playing .ord-slider-dot.is-active::after { animation: ord-dot-fill var(--interval, 6500ms) linear both; } @keyframes ord-dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } .ord-slider-arrows { display: flex; gap: 10px; } .ord-slider-arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(5,14,38,.45); color: #fff; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); transition: background .25s, transform .25s var(--ord-ease); } .ord-slider-arrow:hover { background: var(--ord-primary); border-color: var(--ord-primary); transform: scale(1.06); } .ord-slider-arrow svg { width: 18px; height: 18px; } .ord-slider-pause { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(5,14,38,.45); color: #fff; display: flex; align-items: center; justify-content: center; } .ord-slider-pause svg { width: 16px; height: 16px; } .ord-slider-pause .ord-icon-play { display: none; } .ord-slider.is-paused .ord-slider-pause .ord-icon-play { display: block; } .ord-slider.is-paused .ord-slider-pause .ord-icon-pause { display: none; } .ord-slider-actions { display: flex; gap: 10px; align-items: center; } @media (max-width: 720px) { .ord-slider-track { height: clamp(560px, 88vh, 700px); } .ord-slide-inner { padding-bottom: 120px; } .ord-slider-arrow, .ord-slider-pause { width: 40px; height: 40px; } .ord-slider-dot { width: 22px; } .ord-slide-media::after { background: linear-gradient(0deg, rgba(5,14,38,.92) 0%, rgba(5,14,38,.55) 60%, rgba(5,14,38,.35) 100%); } .ord-slide-art::after { opacity: .35; right: -10%; } } /* ---- Stats strip beneath slider ---- */ .ord-stats-strip { background: var(--ord-panel); border-bottom: 1px solid var(--ord-border); } .ord-stats-strip .ord-stats-grid { grid-template-columns: repeat(3, 1fr); } .ord-stats-strip .ord-stat { padding: 26px 16px; } .ord-stats-strip .ord-stat-num { font-family: var(--ord-font-display); color: var(--ord-accent); } /* ---- Inner page banner (with optional uploaded image) ---- */ .ord-page-header.has-banner { padding-bottom: 64px; min-height: 300px; display: flex; align-items: flex-end; color: #fff; } .ord-page-header.has-banner .ord-container { width: 100%; } .ord-banner-media, .ord-banner-media img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; } .ord-banner-media img { object-fit: cover; object-position: var(--focus, center); max-width: none; } .ord-banner-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,14,38,.9), rgba(5,14,38,.55) 55%, rgba(5,14,38,.25)); } .ord-page-header.has-banner h1 { color: #fff; } .ord-page-header.has-banner .ord-page-subtitle { color: rgba(255,255,255,.88); } .ord-page-header.has-banner .ord-eyebrow { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); } .ord-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; font-size: .82rem; color: var(--ord-text-dim-2); } .ord-breadcrumb a:hover { color: var(--ord-accent); } .ord-page-header.has-banner .ord-breadcrumb, .ord-page-header.has-banner .ord-breadcrumb a { color: rgba(255,255,255,.75); } /* ---- Collaboration section ---- */ .ord-collab-points { display: grid; gap: 14px; margin-top: 26px; } .ord-collab-point { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--ord-border); border-radius: var(--ord-radius); background: var(--ord-panel); } .ord-collab-point svg { color: var(--ord-accent); margin-top: 2px; } .ord-collab-point h4 { margin: 0 0 2px; font-size: 1rem; } .ord-collab-point p { margin: 0; font-size: .9rem; } .ord-partners-note { text-align: center; margin-top: 18px; } /* ---- About: vision / mission / objectives / values ---- */ .ord-vmov-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .ord-vmov-card { position: relative; padding: 32px 30px; border-radius: var(--ord-radius); background: var(--ord-panel); border: 1px solid var(--ord-border); overflow: hidden; } .ord-vmov-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ord-grad-brand); } .ord-vmov-card .ord-service-icon { margin-bottom: 14px; } .ord-vmov-card h3 { font-size: 1.3rem; } .ord-vmov-card p { margin: 0; font-size: 1rem; } @media (max-width: 720px) { .ord-vmov-grid { grid-template-columns: 1fr; } } /* ---- Team page: group anchors ---- */ .ord-team-group { scroll-margin-top: calc(var(--ord-header-h) + 20px); } .ord-team-empty { padding: 36px; text-align: center; border: 1px dashed var(--ord-border-2); border-radius: var(--ord-radius); color: var(--ord-text-dim); } /* ---- Filter chips row / sub-navigation ---- */ .ord-subnav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; } .ord-subnav a { padding: 8px 18px; border-radius: 999px; border: 1px solid var(--ord-border-2); font-size: .88rem; color: var(--ord-text-dim); transition: all .25s; } .ord-subnav a:hover, .ord-subnav a.is-active { color: #fff; background: var(--ord-grad-brand); border-color: transparent; } /* ---- Hub cards (Resources / Publications) ---- */ .ord-hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .ord-hub-card { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: var(--ord-radius); background: var(--ord-panel); border: 1px solid var(--ord-border); transition: transform .3s var(--ord-ease), border-color .3s, background-color .3s; } .ord-hub-card:hover { transform: translateY(-5px); border-color: rgba(227,11,23,.4); background: var(--ord-panel-2); } .ord-hub-card h3 { margin: 0; font-size: 1.15rem; } .ord-hub-card p { margin: 0; font-size: .92rem; flex-grow: 1; } @media (max-width: 900px) { .ord-hub-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .ord-hub-grid { grid-template-columns: 1fr; } } /* ---- Publications / catalogue list ---- */ .ord-pub-list { display: grid; gap: 16px; } .ord-pub-row { display: flex; gap: 24px; align-items: center; padding: 24px 28px; border-radius: var(--ord-radius); background: var(--ord-panel); border: 1px solid var(--ord-border); transition: border-color .3s, transform .3s var(--ord-ease); } .ord-pub-row:hover { border-color: rgba(227,11,23,.35); transform: translateY(-2px); } /* object-fit: contain (not cover) so an uploaded cover/brochure image is always shown in full, whatever its own aspect ratio — cropping it to a fixed frame was cutting off most of the artwork. */ .ord-pub-cover { width: 96px; height: 118px; border-radius: 8px; overflow: hidden; background: var(--ord-logo-card-bg); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--ord-text-dim-2); padding: 6px; } .ord-pub-cover img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .ord-pub-info { flex: 1; min-width: 0; } .ord-pub-info h3 { font-size: 1.08rem; margin: 0 0 6px; } .ord-pub-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .82rem; color: var(--ord-text-dim-2); margin-bottom: 8px; } .ord-pub-meta span { display: inline-flex; align-items: center; gap: 6px; } .ord-pub-info p { font-size: .92rem; margin: 0; } .ord-pub-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; margin-left: auto; } .ord-pub-actions .ord-btn { white-space: nowrap; } @media (max-width: 720px) { .ord-pub-row { flex-wrap: wrap; padding: 20px; } .ord-pub-cover { width: 76px; height: 96px; } .ord-pub-actions { flex-direction: row; align-items: center; margin-left: 0; width: 100%; padding-left: calc(76px + 20px); } } @media (max-width: 480px) { .ord-pub-actions { padding-left: 0; } } .ord-collection-intro { margin-bottom: 30px; } /* ---- Podcast ---- */ .ord-podcast-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .ord-podcast-card { padding: 26px; border-radius: var(--ord-radius); background: var(--ord-panel); border: 1px solid var(--ord-border); display: flex; flex-direction: column; gap: 10px; } .ord-podcast-card h3 { margin: 0; font-size: 1.1rem; } .ord-podcast-card audio { width: 100%; margin-top: 6px; } .ord-podcast-head { display: flex; gap: 14px; align-items: center; } .ord-podcast-head .ord-service-icon { margin: 0; flex-shrink: 0; } @media (max-width: 800px) { .ord-podcast-grid { grid-template-columns: 1fr; } } /* ---- Gallery ---- */ .ord-gallery-grid { columns: 3 260px; column-gap: 18px; } .ord-gallery-item { position: relative; display: block; width: 100%; margin: 0 0 18px; border-radius: var(--ord-radius); overflow: hidden; break-inside: avoid; background: var(--ord-panel); border: 1px solid var(--ord-border); cursor: zoom-in; padding: 0; text-align: left; } .ord-gallery-item img { width: 100%; height: auto; transition: transform .6s var(--ord-ease); } .ord-gallery-item:hover img { transform: scale(1.04); } .ord-gallery-item figcaption, .ord-gallery-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 14px; font-size: .88rem; color: #fff; background: linear-gradient(0deg, rgba(5,14,38,.85), transparent); opacity: 0; transition: opacity .3s; } .ord-gallery-item:hover .ord-gallery-cap, .ord-gallery-item:focus-visible .ord-gallery-cap { opacity: 1; } .ord-gallery-play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; background: rgba(227,11,23,.92); color: #fff; display: flex; align-items: center; justify-content: center; } .ord-gallery-play svg { width: 20px; height: 20px; } .ord-video-modal-frame img { width: 100%; height: auto; max-height: 82vh; object-fit: contain; border-radius: 12px; background: #000; } /* ---- Join Us ---- */ .ord-role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .ord-role-chip { position: relative; } .ord-role-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; } .ord-role-chip span { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--ord-border-2); background: var(--ord-veil-2); font-size: .9rem; color: var(--ord-text-dim); transition: all .2s; } .ord-role-chip span svg { width: 16px; height: 16px; color: var(--ord-text-dim-2); } .ord-role-chip input:checked + span { border-color: var(--ord-primary); background: rgba(227,11,23,.12); color: var(--ord-heading); } .ord-role-chip input:checked + span svg { color: var(--ord-accent); } .ord-role-chip input:focus-visible + span { outline: 2px solid var(--ord-accent); outline-offset: 2px; } .ord-join-roles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 22px; } .ord-join-role { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--ord-border); background: var(--ord-panel); } .ord-join-role h4 { font-size: .98rem; margin: 0 0 4px; display: flex; gap: 8px; align-items: center; } .ord-join-role h4 svg { width: 18px; height: 18px; color: var(--ord-accent); } .ord-join-role p { margin: 0; font-size: .85rem; } .ord-form-field select { width: 100%; padding: 14px 16px; border-radius: var(--ord-radius-sm); border: 1px solid var(--ord-border-2); background: var(--ord-veil-2); color: var(--ord-text); font-size: 1rem; } .ord-form-legend { display: block; font-size: .88rem; font-weight: 500; color: var(--ord-text); margin-bottom: 10px; } @media (max-width: 600px) { .ord-join-roles { grid-template-columns: 1fr; } } /* ---- Events (upcoming / previous) ---- */ .ord-events-block { scroll-margin-top: calc(var(--ord-header-h) + 20px); } .ord-events-block + .ord-events-block { margin-top: 64px; } .ord-events-block-title { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; } .ord-events-block-title h2 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); } .ord-events-block-title::after { content: ''; flex: 1; height: 1px; background: var(--ord-border-2); } .ord-event-card.is-past .ord-event-media img { filter: grayscale(.4); opacity: .85; } .ord-event-card .ord-event-status { position: absolute; top: 14px; right: 14px; z-index: 2; padding: 4px 12px; border-radius: 999px; background: var(--ord-primary); color: #fff; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; } .ord-event-card.is-past .ord-event-status { background: var(--ord-navy); } /* ---- Contact channels ---- */ .ord-channel-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .ord-channel { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--ord-border-2); font-size: .88rem; color: var(--ord-text-dim); transition: all .25s; } .ord-channel:hover { color: #fff; background: var(--ord-grad-brand); border-color: transparent; } /* ---- Stories ---- */ .ord-story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .ord-story-card { border-radius: var(--ord-radius); overflow: hidden; background: var(--ord-panel); border: 1px solid var(--ord-border); display: flex; flex-direction: column; transition: transform .3s var(--ord-ease), border-color .3s; } .ord-story-card:hover { transform: translateY(-5px); border-color: rgba(227,11,23,.4); } .ord-story-thumb { aspect-ratio: 16/10; background: var(--ord-logo-card-bg); overflow: hidden; display: flex; align-items: center; justify-content: center; } .ord-story-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .ord-story-body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; } .ord-story-body h3 { margin: 0; font-size: 1.1rem; } .ord-story-body p { margin: 0; font-size: .92rem; flex-grow: 1; } .ord-story-client { font-size: .78rem; font-family: var(--ord-font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--ord-accent); } @media (max-width: 900px) { .ord-story-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .ord-story-grid { grid-template-columns: 1fr; } } /* ---- Partners grid: 12 slots ---- */ .ord-clients-grid.ord-partners-grid { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .ord-clients-grid.ord-partners-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .ord-clients-grid.ord-partners-grid { grid-template-columns: repeat(2, 1fr); } } /* ---- Featured programs (home) ---- */ .ord-programs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .ord-program-chip { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: var(--ord-radius); background: var(--ord-panel); border: 1px solid var(--ord-border); transition: transform .3s var(--ord-ease), border-color .3s, background-color .3s; } .ord-program-chip:hover { transform: translateY(-4px); border-color: rgba(227,11,23,.4); background: var(--ord-panel-2); } .ord-program-chip .ord-service-icon { margin: 0; flex-shrink: 0; } .ord-program-chip h3 { margin: 0; font-size: 1rem; line-height: 1.3; } @media (max-width: 900px) { .ord-programs-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .ord-programs-grid { grid-template-columns: 1fr; } } /* ---- Footer tweaks ---- */ .ord-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } @media (max-width: 1080px) { .ord-footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .ord-footer-grid { grid-template-columns: 1fr; } } /* ---- Small fill-ins ---- */ .ord-contact-info { display: flex; flex-direction: column; } .ord-single-thumb { border-radius: var(--ord-radius); overflow: hidden; margin-bottom: 28px; } .ord-single-thumb img { width: 100%; height: auto; display: block; } /* ============================================================= Mascot — the illustrated ORD girl, dropped into different sections with a different pose/animation each time. ============================================================= */ .ord-mascot { position: absolute; z-index: 4; pointer-events: none; filter: drop-shadow(0 18px 28px rgba(0,0,0,.28)); } .ord-mascot img { width: 100%; height: auto; display: block; } .ord-hero-slider-wrap { position: relative; } /* Sized and positioned to clear the slider's own bottom-right controls (dots/arrows/ pause sit at bottom:34px, ~150px wide) — anchored well above and left of them instead of overlapping. */ .ord-mascot-hero { width: clamp(170px, 15vw, 260px); right: clamp(70px, 9vw, 160px); bottom: clamp(104px, 15vh, 168px); z-index: 6; animation: ord-mascot-peek 6s ease-in-out infinite; } .ord-mascot-collab { width: clamp(90px, 8vw, 130px); top: -34px; right: 6%; animation: ord-mascot-tilt 7s ease-in-out infinite; } .ord-mascot-faq { width: clamp(90px, 8vw, 140px); right: -6px; top: -40px; animation: ord-mascot-wave 4.5s ease-in-out infinite; transform-origin: bottom center; } .ord-mascot-cta { width: clamp(90px, 9vw, 150px); left: 50%; bottom: -6px; margin-left: clamp(140px, 22vw, 280px); animation: ord-mascot-bounce 3.2s ease-in-out infinite; } @keyframes ord-mascot-peek { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(-2deg); } } @keyframes ord-mascot-tilt { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } } @keyframes ord-mascot-wave { 0%, 100% { transform: rotate(-3deg) translateY(0); } 25% { transform: rotate(4deg) translateY(-4px); } 50% { transform: rotate(-2deg) translateY(0); } 75% { transform: rotate(3deg) translateY(-3px); } } @keyframes ord-mascot-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } } @media (max-width: 900px) { .ord-mascot-collab, .ord-mascot-faq { display: none; } /* avoid crowding narrow layouts already tight on space */ .ord-mascot-hero { width: 100px; right: 14px; bottom: 96px; } .ord-mascot-cta { display: none; } } /* ============================================================= Homepage teasers — success stories & publications ============================================================= */ .ord-story-teaser-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; } .ord-story-teaser-card { background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius); overflow: hidden; transition: transform .3s var(--ord-ease), border-color .3s, background-color .3s; } .ord-story-teaser-card:hover { transform: translateY(-4px); border-color: rgba(227,11,23,.3); } .ord-story-teaser-media { aspect-ratio: 16/10; background: var(--ord-logo-card-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; } .ord-story-teaser-media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .ord-story-teaser-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; } .ord-story-teaser-body h3 { font-size: 1.02rem; margin: 4px 0 2px; } .ord-story-teaser-body p { font-size: .88rem; margin: 0; } .ord-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--ord-veil-3); border: 1px solid var(--ord-border); color: var(--ord-text-dim-2); font-size: .74rem; width: fit-content; } /* ============================================================= Fixes: partner/client cards, testimonials — contrast, cut-off avatars, and cards not re-centering when a group has few items ============================================================= */ .ord-client-name { color: var(--ord-heading); } .ord-testimonial-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; justify-content: center; } .ord-testimonial-card { min-width: 0; } .ord-quote-icon { flex-shrink: 0; } .ord-testimonial-author { min-width: 0; } .ord-avatar-img { width: 46px; height: 46px; aspect-ratio: 1 / 1; border: 1px solid var(--ord-border); } .ord-testimonial-author > div { min-width: 0; } .ord-testimonial-author strong, .ord-testimonial-author span { overflow-wrap: anywhere; }