/* ============================================================= 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: #A9B3CF; --ord-text-dim-2:#7C88AC; --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; } .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); } .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); } /* ============================================================= 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%); } .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; } .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: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .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; } .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: 20px; align-items: flex-start; padding: 22px; 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); } .ord-pub-cover { width: 84px; aspect-ratio: 3/4; border-radius: 8px; overflow: hidden; background: var(--ord-panel-2); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--ord-text-dim-2); } .ord-pub-cover img { width: 100%; height: 100%; object-fit: cover; } .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 0 12px; } .ord-pub-actions { display: flex; flex-wrap: wrap; gap: 10px; } .ord-collection-intro { margin-bottom: 30px; } @media (max-width: 600px) { .ord-pub-row { flex-direction: column; } .ord-pub-cover { width: 110px; } } /* ---- 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-panel-2); overflow: hidden; display: flex; align-items: center; justify-content: center; } .ord-story-thumb img { width: 100%; height: 100%; object-fit: cover; } .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; }