/** * Inadev 2026 — front-end stylesheet (classic theme). * * Mobile-first: base rules target small screens; min-width media queries * scale up at 600px (large phone/small tablet), 782px (tablet), 1024px * (small desktop), and 1280px (desktop). * * Section index: * 1. Base / resets * 2. Site header / footer * 3. Shared section helpers (.section-eyebrow) * 4. Home hero (.home-hero*) * 5. Core capabilities (.cap-card*, .core-capabilities-grid) * 6. Industries teaser (.industries-row*) — alternating rows * 7. Enterprise solutions teaser (.solutions-grid*, .solutions-card*) * 8. Client logos (.client-logos*) * 9. Home intro (.home-intro*) * 10. Meet Ceebit (.home-meet-ceebit*) * 11. News (.home-news*) * 12. Blog (.home-blog*) * 13. Testimonial (.home-testimonial*) * 14. Careers teaser (.home-careers-teaser*) * 15. Reduced motion * 16. Primary nav dropdown (.site-header__nav .dropdown-*) * 17. Industry hero (.industry-hero*) * 18. Carousel scroll — shared (.carousel-scroll*) * 19. Mission areas (.mission-card*) * 20. AWS expertise (.aws-expertise*) * 21. Success stories (.success-story-card*) * 22. Industry final CTA (.industry-final-cta*) * 23. Enterprise Solutions detail page (.solution-row*) * 24. Ceebit page (.ceebit-capabilities*, .ceebit-benefits*, .ceebit-callout*) * 25. Insights page (.insights-hero*, .insights-press-*, .insights-white-paper-*, .insights-blog-*, .insights-success-stories*) * 26. Primary nav active state (.current-menu-item, .current-menu-parent) */ /* 1. Base / resets */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; } img { max-width: 100%; height: auto; display: block; } /* 2. Site header / footer */ .site-header { position: sticky; top: 0; z-index: 100; background-color: var(--white); } .site-header__nav { flex-wrap: wrap; } .site-header__nav .nav-link { color: var(--brand-navy); font-size: var(--fs-small); font-weight: 500; } .nav-link:focus-visible{ box-shadow: none; } .site-footer { margin-top: auto; background-color: var(--gray-50); background-image: radial-gradient(circle, rgba(4, 45, 98, 0.08) 1px, transparent 1px); background-size: 18px 18px; } .site-footer__top { gap: var(--spacing-40); margin-bottom: var(--spacing-20); } .site-footer__right { flex: 1 1 auto; } .site-footer__nav-row { display: flex; justify-content: space-between; width: 100%; margin-bottom: var(--spacing-70); } .site-footer__nav-row a { color: var(--brand-navy); font-weight: 500; text-decoration: none; } .site-footer__regions { gap: var(--spacing-60); margin-bottom: var(--spacing-40); padding-left: var(--spacing-100); } .site-footer__region-ribbon { width: 72px; height: 4px; opacity: 1; background-color: var(--brand-orange); border: none; margin: 0 0 var(--spacing-10); } .site-footer__region-label { font-weight: 400; color: var(--dark-gray); margin-bottom: var(--spacing-10); } .site-footer__region-linkedin { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; background-color: var(--blue-linkedin); color: #ffffff; } .site-footer__hq-email { color: var(--blue-link); text-decoration: none; } /* Home only: transparent header overlaying the hero — position:fixed so it never reserves flow space (hero image stays at the true top, header floats over it), while still staying pinned during scroll (WP adds ".home" to via is_front_page()). Turns solid once scrolled past the hero — see .is-scrolled, toggled by header-scroll.js. */ .home .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; background-color: transparent !important; transition: background-color 0.25s ease; } .home .site-header__logo img { filter: brightness(0) invert(1); transition: filter 0.25s ease; } .home .site-header__nav .nav-link { color: #ffffff !important; transition: color 0.25s ease; } /* Reference design shows Contact Us as a plain link, not a filled button, in the transparent home overlay. */ .home .site-header__nav .site-header__cta { background-color: transparent !important; padding: 0; } /* Solid state once scrolled past the hero — matches every other page's header. */ .home .site-header.is-scrolled { background-color: var(--white) !important; } .home .site-header.is-scrolled .site-header__logo img { filter: none; } .home .site-header.is-scrolled .site-header__nav .nav-link { color: var(--brand-navy) !important; } /* Safety net: keep the open mobile nav overlay readable on every page, including home (dark brand background, no white box). */ .navbar-collapse.show, .navbar-collapse.collapsing { background-color: var(--brand-navy); color: #ffffff; padding: var(--spacing-40); } .navbar-collapse.show .nav-link, .navbar-collapse.collapsing .nav-link { color: #ffffff !important; } /* 3. Shared section helpers */ .section-eyebrow { letter-spacing: 0.08em; font-weight: 600; text-transform: uppercase; } /* 4. Home hero */ .home-hero { position: relative; overflow: hidden; background: var(--gradient-navy-to-blue); } .home-hero__media { position: relative; z-index: 0; line-height: 0; } .home-hero__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(4, 45, 98, 0.35); } .home-hero__image { display: block; width: 100%; height: auto; } /* 5. Core capabilities */ .core-capabilities-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-40); } .core-capabilities__ribbon { width: 72px; height: 8px; border: 0; opacity: 1; margin: 0 0 var(--spacing-20); background-color: var(--green-light); } .cap-card { position: relative; min-height: 240px; padding: 0; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; border: 1px solid #e0e0e0; } .cap-card--charcoal { background: linear-gradient(to bottom, #242E3D 0 72%, #ffffff 72% 100%) !important; } .cap-card--orange { background: linear-gradient(to bottom, #F26633 0 72%, #ffffff 72% 100%) !important; } .cap-card--cyan { background: linear-gradient(to bottom, #1BC5EB 0 72%, #ffffff 72% 100%) !important; } .cap-card--blue { background: linear-gradient(to bottom, #3F83FF 0 72%, #ffffff 72% 100%) !important; } .cap-card--navy { background: linear-gradient(to bottom, #042D62 0 72%, #ffffff 72% 100%) !important; } .core-capabilities-grid .cap-card .cap-card__icon { width: 100%; height: 72%; flex: 0 0 72%; margin: 0; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .core-capabilities-grid .cap-card .cap-card__icon img { width: 120px; height: 120px; max-width: none; } .core-capabilities-grid .cap-card .cap-card__label { margin: 0; width: 100%; height: 28%; flex: 0 0 28%; padding: var(--spacing-20) var(--spacing-20); text-align: center; display: flex; align-items: center; justify-content: center; color: var(--dark-gray) !important; } .cap-card__title-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-20); width: 100%; text-decoration: none; color: var(--dark-gray); } .cap-card__title-link:focus-visible { outline: 2px solid var(--dark-gray); outline-offset: 2px; } .cap-card__title-text { font-size: 1rem; font-weight: 600; line-height: 1.3; } .cap-card__arrow { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1.5px solid currentColor; font-size: 1rem; line-height: 1; color: var(--brand-orange); } .cap-card__hover { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-30); padding: var(--spacing-40); text-align: center; color: #ffffff; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .cap-card--charcoal .cap-card__hover { background-color: #242E3D; } .cap-card--orange .cap-card__hover { background-color: #F26633; } .cap-card--cyan .cap-card__hover { background-color: #1BC5EB; } .cap-card--blue .cap-card__hover { background-color: #3F83FF; } .cap-card--navy .cap-card__hover { background-color: #042D62; } .cap-card:hover .cap-card__hover, .cap-card:focus-within .cap-card__hover { opacity: 1; pointer-events: auto; } .cap-card__hover-text { margin: 0; font-size: var(--fs-small); line-height: 1.5; } .cap-card__hover-btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-10) var(--spacing-30); border: 1.5px solid #ffffff; border-radius: 999px; color: #ffffff; font-size: var(--fs-small); font-weight: 600; text-decoration: none; white-space: nowrap; } .cap-card__hover-btn:hover, .cap-card__hover-btn:focus-visible { background-color: #ffffff; color: var(--dark-gray); } .cap-card--callout { grid-column: 1 / -1; padding: var(--spacing-60); justify-content: center; align-items: flex-start; text-align: left; } .cap-card--callout p { margin: 0; font-size: var(--fs-heading-5); font-weight: 700; line-height: 1.35; color: var(--dark-gray); } @media (min-width: 600px) { .core-capabilities-grid { grid-template-columns: repeat(2, 1fr); } .cap-card { min-height: 260px; } .core-capabilities-grid .cap-card .cap-card__icon img { width: 128px; height: 128px; } } @media (min-width: 1024px) { .core-capabilities-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-40); } .cap-card { min-height: 280px; } .core-capabilities-grid .cap-card .cap-card__icon img { width: 140px; height: 140px; } .cap-card--ai { grid-column: 1 / span 1; } .cap-card--callout-wide { grid-column: 2 / -1; } } @media (min-width: 1280px) { .core-capabilities-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* 6. Industries teaser (alternating rows) */ .industries-row + .industries-row { margin-top: var(--spacing-80); } .industries-row__bar { width: 64px; height: 8px; border: 0; background-color: var(--brand-orange); opacity: 1; margin: 0 0 var(--spacing-40); } .industries-row__image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; } /* 7. Enterprise solutions teaser */ .solutions-heading__ribbon { width: 72px; height: 8px; border: 0; opacity: 1; margin: 0 0 var(--spacing-20) auto; background-color: var(--brand-orange); } .solutions-heading { text-align: right; } .solutions-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-40); } .solutions-card { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 3 / 2; background-size: cover; background-position: center; } .solutions-card__overlay { position: absolute; inset: 0; background-color: var(--charcoal); opacity: 0.6; } .solutions-card__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--spacing-20); padding: var(--spacing-40); width: 100%; height: 100%; } .solutions-card__logo img { max-height: 48px; width: auto; margin: 0 auto; } .solutions-card__logo a { inset: 0; z-index: 2; } .solutions-card__arrow { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1.5px solid #fff; color: #fff; font-size: 1rem; } .solutions-card--text { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; padding: var(--spacing-40); text-align: center; background-color: var(--white); border-radius: 8px; } @media (min-width: 782px) { .solutions-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .solutions-grid { grid-template-columns: repeat(3, 1fr); } } /* 8. Client logos */ .client-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--spacing-50); } .client-logos__item { display: flex; align-items: center; justify-content: center; flex: 0 1 140px; } .client-logos__image { height: 48px; width: auto; max-width: 100%; object-fit: contain; filter: none; opacity: 1; transition: none; } /* 9. Home intro */ .home-intro__ribbon { width: 72px; height: 8px; border: none; opacity: 1; margin: 0 0 var(--spacing-30); background: var(--brand-cyan); } .home-intro__heading { line-height: 1.15; margin: 0; } .home-intro__industries-lead { margin-top: var(--spacing-80) !important; margin-bottom: 0 !important; padding-top: var(--spacing-30); padding-bottom: 0; text-align: left; text-transform: none; letter-spacing: 0; color: #000000; } .home-intro { padding-bottom: var(--spacing-40) !important; } /* 10. Meet Ceebit */ .home-meet-ceebit { background-image: url("../images/home/meet-ceebit-bg.png"); background-size: cover; background-position: center; background-repeat: no-repeat; } .home-meet-ceebit__ribbon { width: 72px; height: 8px; border: 0; opacity: 1; margin: 0 0 var(--spacing-20); background-color: var(--brand-orange); } .home-meet-ceebit__subtitle { font-weight: 700; } .home-meet-ceebit__columns { align-items: flex-start !important; } .home-meet-ceebit__stat strong { color: var(--brand-orange); } .home-meet-ceebit-button{ align-self: flex-start; padding: 0.6rem 1rem; background-color: var(--white); color: var(--brand-orange); font-weight: 600; font-size: var(--fs-small); border-radius: 6px; text-decoration: none; border: 1.5px solid var(--white); transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } .home-meet-ceebit__video { position: relative; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-30); text-align: center; padding: var(--spacing-50); background-color: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; } .home-meet-ceebit__play { position: relative; width: 3.5rem; height: 3.5rem; border-radius: 50%; border: 2px solid #fff; } .home-meet-ceebit__play::before { content: ""; position: absolute; top: 50%; left: 55%; transform: translate(-50%, -50%); border-style: solid; border-width: 0.5rem 0 0.5rem 0.85rem; border-color: transparent transparent transparent #fff; } .home-meet-ceebit__video-label { margin: 0; font-size: var(--fs-small); color: rgba(255, 255, 255, 0.7); } @media (min-width: 782px) { .home-meet-ceebit__video { min-height: 320px; } } /* 11. News */ .home-news__ribbon { width: 72px; height: 8px; border: 0; opacity: 1; margin: 0 0 var(--spacing-20); background-color: var(--brand-cyan); } @media (min-width: 1024px) { .home-news__heading { text-align: right; } .home-news__ribbon { margin-left: auto; } } /* Wraps the carousel so prev/next can be absolutely positioned beside it. */ .home-news__carousel-wrap { position: relative; } .home-news__image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; } .home-news__caption { display: block; margin-top: var(--spacing-30); font-size: var(--fs-small); color: var(--blue-link); text-decoration: none; } .home-news__caption:hover, .home-news__caption:focus-visible { text-decoration: underline; } /* 12. Blog */ .home-blog__ribbon { width: 72px; height: 8px; border: 0; opacity: 1; margin: 0 0 var(--spacing-20); background-color: var(--blue-medium); } .home-blog__featured { align-items: flex-start !important; } .home-blog__image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; } .home-blog__byline { display: flex; align-items: center; gap: var(--spacing-20); } .home-blog__avatar { display: inline-block; width: 28px; height: 28px; border-radius: 50%; background-color: var(--gray-50); border: 1px solid #e0e0e0; flex-shrink: 0; } /* 13. Testimonial */ .home-testimonial { text-align: center; } .home-testimonial__logo { display: inline-block; padding: var(--spacing-20) var(--spacing-40); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; font-size: var(--fs-caption); color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 0.06em; } .home-testimonial__quote { font-style: italic; margin-bottom: 0; } /* 14. Careers teaser */ .home-careers-teaser__row { align-items: flex-start !important; } .home-careers-teaser__image img { width: 100%; object-fit: contain; border-radius: 8px; } /* 15. Reduced motion */ @media (prefers-reduced-motion: reduce) { .client-logos__image { transition: none; } } /* Breakpoint: ~600px — large phone / small tablet */ @media (min-width: 600px) { .industries-row__image img { aspect-ratio: 16 / 10; } } /* Breakpoint: ~782px — tablet */ @media (min-width: 782px) { .industries-row__image img { width: 94%; margin-left: auto; margin-right: auto; } .client-logos__image { height: 52px; } } /* Breakpoint: ~1024px — small desktop */ @media (min-width: 1024px) { .industries-row__image img { width: 90%; } .cap-card { min-height: 330px; } .cap-card__icon img { width: 140px; height: 140px; } .client-logos { flex-wrap: nowrap; justify-content: space-between; gap: var(--spacing-40); } .client-logos__item { flex: 1 1 0; min-width: 0; } .client-logos__image { margin: 0 auto; } } /* 16. Primary nav dropdown */ .site-header__nav .dropdown-toggle { background: none; border: 0; cursor: pointer; } .site-header__nav .dropdown-menu { border: 0; border-radius: 8px; box-shadow: 0 8px 24px rgba(4, 45, 98, 0.15); padding: var(--spacing-20) 0; } .site-header__nav .dropdown-item { padding: var(--spacing-20) var(--spacing-50); color: var(--brand-navy); } .site-header__nav .dropdown-item:hover, .site-header__nav .dropdown-item:focus-visible { background-color: var(--gray-50); color: var(--brand-orange); } /* 17. Industry hero */ .industry-hero { position: relative; overflow: visible; } .industry-hero__ribbon { width: 72px; height: 8px; border: 0; opacity: 1; margin: 0 0 var(--spacing-20); background-color: var(--brand-orange); } .industry-hero__content h1 { color: #000; } .industry-hero__subtitle { font-weight: 700; color: #000; max-width: 34ch; } .industry-hero__cta { display: inline-block; color: var(--brand-orange); background-color: transparent; font-weight: 600; font-size: var(--fs-small); padding: 0.55rem 1.5rem; border-radius: 4px; border: 1.5px solid var(--gray-100); text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease; } .industry-hero__cta:hover, .industry-hero__cta:focus-visible { background-color: var(--brand-orange); color: var(--white); } .btn-brand-no-border__cta { display: inline-block; color: var(--brand-white-token); background-color: var(--brand-orange); border: 1px solid var(--white); font-weight: 600; font-size: var(--fs-small); padding: 0.55rem 1.5rem; border-radius: 4px; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease; } .btn-brand-no-border__cta:hover, .btn-brand-no-border__cta:focus-visible { background-color: transparent; border: 1px solid var(--white); color: var(--white); } /* Bleeds past the .container to the browser's right edge on large screens; stacks back into normal flow below the text on smaller screens. */ .industry-hero__media { margin-top: var(--spacing-60); } .industry-hero__frame { position: relative; margin: 0 auto; width: 86%; max-width: 480px; } /* .industry-hero__frame::before, .industry-hero__frame::after { content: ""; position: absolute; border-radius: 50% / 42%; pointer-events: none; } .industry-hero__frame::before { inset: -16px; border: 2px solid var(--brand-orange); } .industry-hero__frame::after { inset: -7px; border: 2px solid var(--blue-medium); } */ .industry-hero__image { display: block; width: 100%; height: auto; position: relative; z-index: 1; } @media (min-width: 1024px) { .industry-hero__content { padding-right: var(--spacing-40); } .industry-hero__media { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 46%; margin-top: 0; } .industry-hero__frame { width: 100%; max-width: none; } } /* 18. Carousel scroll — shared (mission areas + client logos) */ .carousel-scroll { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .carousel-scroll::-webkit-scrollbar { display: none; } .carousel-scroll__track { display: flex; align-items: stretch; gap: var(--spacing-40); } /* Mobile-first: 1 card per view. Overridden at tablet/desktop below. */ .carousel-scroll__item { flex: 0 0 auto; scroll-snap-align: start; width: 100%; } .carousel-scroll--logos .carousel-scroll__item { width: 140px; display: flex; align-items: center; justify-content: center; } /* Wraps the carousel so prev/next can be absolutely positioned beside it. */ .mission-areas__carousel-wrap { position: relative; } .carousel-scroll__btn { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--blue-medium); background: var(--white); color: var(--blue-medium); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .carousel-scroll__btn:hover, .carousel-scroll__btn:focus-visible { background-color: var(--blue-medium); color: var(--white); } .carousel-scroll__btn--prev, .carousel-scroll__btn--next { display: none; } .carousel-scroll__dots { display: flex; justify-content: center; align-items: center; gap: var(--spacing-10); margin-top: var(--spacing-50); } .carousel-scroll__dot { width: 10px; height: 10px; border-radius: 5px; padding: 0; border: 1px solid var(--white); background: transparent; cursor: pointer; } .carousel-scroll__dot.is-active { background-color: var(--brand-orange); border-color: var(--brand-orange); } @media (min-width: 768px) { .carousel-scroll__item { width: calc((100% - var(--spacing-40)) / 2); } } @media (min-width: 1024px) { .carousel-scroll { /* Reserves breathing room between the cards and the beside-carousel arrows. */ padding: 0 var(--spacing-60); } .carousel-scroll__track { /* Centers the row when there are fewer items than fit one view (e.g. 3 Mission Areas on State & Local / Financial Markets). */ justify-content: center; } .carousel-scroll__item { width: calc((100% - 3 * var(--spacing-40)) / 4); } /* Desktop only: arrows sit beside the carousel, vertically centered. */ .carousel-scroll__btn--prev, .carousel-scroll__btn--next { display: flex; align-items: center; justify-content: center; position: absolute; top: 55%; transform: translateY(-50%); z-index: 2; box-shadow: 0 2px 8px rgba(4, 45, 98, 0.12); } .carousel-scroll__btn--prev { left: -20px; } .carousel-scroll__btn--next { right: -20px; } } /* 19. Mission areas */ .mission-areas__ribbon { width: 72px; height: 8px; border: 0; opacity: 1; margin: 0 0 var(--spacing-20); background-color: var(--brand-cyan); } @media (min-width: 1024px) { .mission-areas__heading { text-align: right; } .mission-areas__ribbon { margin-left: auto; } } .mission-card { border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; } .mission-card__image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .mission-card__body { padding: var(--spacing-40); display: flex; flex-direction: column; flex-grow: 1; } .mission-card__title { color: var(--brand-navy); } .mission-card__desc { flex-grow: 1; /* Caps description length so varying content can't stretch card heights. */ display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .mission-card__btn { align-self: flex-start; margin-top: auto; } /* 20. AWS expertise */ .aws-expertise { background: var(--gradient-navy-to-blue); background-image: url("../images/industry/aws-expertise-bg.png"); background-size: cover; background-position: center; background-repeat: no-repeat; color: var(--white); } .aws-expertise__ribbon { width: 72px; height: 8px; border: 0; opacity: 1; margin: 0 0 var(--spacing-20); background-color: var(--brand-cyan); } .aws-expertise__subtitle { color: rgba(255, 255, 255, 0.85); } .aws-expertise__list li { display: flex; color: var(--brand-orange); font-weight: 600; align-items: flex-start; gap: var(--spacing-20); margin-bottom: var(--spacing-20); } .aws-expertise__check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px; color: var(--gray-300); font-size: var(--fs-heading-5); flex-shrink: 0; } .aws-expertise__badge { /*width: 110px;*/ height: auto; } .aws-expertise__badge-lines { font-size: var(--fs-small); } .aws-expertise__badge-lines li { margin-bottom: var(--spacing-10); } /* 21. Success stories */ .success-stories__ribbon { width: 72px; height: 8px; border: 0; opacity: 1; margin: 0 0 var(--spacing-20); background-color: var(--brand-orange); } @media (min-width: 1024px) { .success-stories__heading { text-align: right; } .success-stories__ribbon { margin-left: auto; } } .success-story-card { padding: var(--spacing-40); gap: var(--spacing-40); height: 100%; } .success-story-card__body { display: flex; flex-direction: column; flex-grow: 1; } .success-story-card__desc { flex-grow: 1; /* Caps description length so varying content can't stretch card heights. */ display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .success-story-card__btn { align-self: flex-start; margin-top: auto; } .success-story-card__icon { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; } /* Shown until an admin uploads a real Thumbnail Image — a generic document-style graphic with the current Industry's name as a badge. */ .success-story-card__placeholder { position: relative; width: 72px; height: 96px; flex-shrink: 0; border: 1px solid #e0e0e0; border-radius: 6px; padding: var(--spacing-10) var(--spacing-20); display: flex; flex-direction: column; gap: var(--spacing-10); justify-content: center; } .success-story-card__placeholder-line { display: block; height: 3px; border-radius: 2px; background-color: #d9d9d9; } .success-story-card__placeholder-badge { display: inline-flex; align-items: center; justify-content: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: var(--brand-orange); color: var(--white); font-size: 10px; font-weight: 600; white-space: nowrap; padding: 0.2rem 0.5rem; border-radius: 3px; } .success-story-card__title { color: var(--brand-navy); } /* 22. Industry final CTA */ .industry-final-cta { background-color: var(--blue-medium); background-image: url("../images/industry/final-cta-bg.png"); background-size: cover; background-position: center; background-repeat: no-repeat; color: var(--white); } /* 23. Enterprise Solutions detail page (reuses .industries-row layout/alternation) */ .solution-row + .solution-row { margin-top: var(--spacing-80); } .solution-row__ribbon { width: 64px; height: 8px; border: 0; opacity: 1; margin: 0 0 var(--spacing-40); background-color: var(--brand-orange); } .solution-row--cyan .solution-row__ribbon { background-color: var(--brand-cyan); } .solution-row__media { position: relative; border-radius: 8px; overflow: hidden; } .solution-row__media img:first-child { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .solution-row__overlay { position: absolute; inset: 0; background-color: var(--charcoal); opacity: 0.55; } .solution-row__logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; max-height: 64px; width: auto; } .solution-row__bullets { list-style: none; padding: 0; margin: var(--spacing-20) 0 0; } .solution-row__bullets li { position: relative; padding-left: 1.2em; font-size: var(--fs-small); color: var(--dark-gray); } .solution-row__bullets li + li { margin-top: var(--spacing-10); } .solution-row__bullets li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 5px; height: 5px; border-radius: 50%; background-color: currentColor; } /* 24. Ceebit page */ .ceebit-capabilities__ribbon { width: 72px; height: 8px; border: 0; opacity: 1; margin: 0 0 var(--spacing-20); background-color: var(--brand-orange); } .ceebit-capabilities__list { list-style: none; padding: 0; margin: 0; columns: 1; column-gap: var(--spacing-60); } .ceebit-capabilities__list li { display: flex; align-items: flex-start; gap: var(--spacing-10); font-size: var(--fs-small); color: var(--dark-gray); font-weight: 600; break-inside: avoid; margin-bottom: var(--spacing-20); } .ceebit-capabilities__check { flex: 0 0 auto; color: var(--blue-medium); line-height: 0; margin-top: 0.2em; } @media (min-width: 768px) { .ceebit-capabilities__list { columns: 2; } } .ceebit-benefits__label { color: var(--brand-orange); font-weight: 700; font-size: var(--fs-heading-6); margin: 0 0 var(--spacing-40); } .ceebit-benefits__grid { display: flex; flex-wrap: wrap; gap: var(--spacing-50) var(--spacing-40); } .ceebit-benefits__item { display: flex; flex-direction: column; align-items: center; text-align: center; width: calc((100% - 3 * var(--spacing-40)) / 4); min-width: 140px; } .ceebit-benefits__icon { width: 48px; height: 48px; margin-bottom: var(--spacing-20); } .ceebit-benefits__text { font-size: var(--fs-small); font-weight: 700; color: var(--dark-gray); } .ceebit-callout { padding: var(--spacing-40) 0; border-top: 1.5px dotted var(--dark-gray); border-bottom: 1.5px dotted var(--dark-gray); } .ceebit-callout__line { display: flex; align-items: center; gap: var(--spacing-60); color: var(--brand-orange); font-weight: 800; font-size: var(--fs-heading-1); line-height: 1.15; margin: 0; } .ceebit-callout__line + .ceebit-callout__line { margin-top: var(--spacing-60); padding-top: var(--spacing-30); } .ceebit-callout__arrow { color: var(--gray-300); font-size: var(--fs-heading-1); } /* 25. Insights page */ .insights-hero__category { margin-top: var(--spacing-30); } .insights-hero__category-select { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--spacing-40); min-width: 300px; padding: 0.5rem 0.5rem 0.5rem 1.4rem; background-color: var(--white); color: var(--brand-navy); font-weight: 600; border: 1px solid var(--gray-50); border-radius: 10px; box-shadow: 0 2px 10px rgba(4, 45, 98, 0.08); } .insights-hero__category-select::after { display: none; } .insights-hero__category-arrow { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--brand-orange); color: var(--brand-orange); font-size: 1rem; line-height: 1; } .insights-hero__category-menu { border: 0; border-radius: 8px; box-shadow: 0 8px 24px rgba(4, 45, 98, 0.15); padding: var(--spacing-20) 0; } .insights-hero__category-menu .dropdown-item { padding: var(--spacing-10) var(--spacing-40); color: var(--brand-navy); } .insights-hero__category-menu .dropdown-item:hover, .insights-hero__category-menu .dropdown-item:focus-visible { background-color: var(--gray-50); color: var(--brand-orange); } .insights-press-releases__ribbon { width: 72px; height: 8px; border: 0; opacity: 1; margin: 0 0 var(--spacing-20); background-color: var(--brand-cyan); } .insights-press-card { height: 100%; gap: var(--spacing-30); } .insights-press-card__image { flex: 0 0 auto; width: 140px; height: 140px; object-fit: cover; border-radius: 8px; } .insights-press-card__body { display: flex; flex-direction: column; flex-grow: 1; } .insights-press-card__date { margin: 0 0 var(--spacing-10); } .insights-press-card__title { color: var(--dark-gray); margin-bottom: var(--spacing-20); } .insights-press-card__btn { align-self: flex-start; margin-top: auto; } .insights-white-papers { background: var(--gradient-navy-to-blue); background-image: url("../images/industry/aws-expertise-bg.png"); background-size: cover; background-position: center; background-repeat: no-repeat; color: var(--white); } .insights-white-papers__ribbon { width: 72px; height: 8px; border: 0; opacity: 1; margin: 0 0 var(--spacing-20); background-color: var(--brand-cyan); } .insights-white-paper-card { gap: var(--spacing-30); height: 100%; } .insights-white-paper-card__thumb { flex: 0 0 auto; width: 120px; height: 120px; border-radius: 8px; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.2); } .insights-white-paper-card__thumb--placeholder { background: var(--gradient-navy-to-blue); } .insights-white-paper-card__body { display: flex; flex-direction: column; gap: var(--spacing-20); } .insights-white-paper-card__text { color: var(--white); margin: 0; } .insights-white-paper-card__btn { align-self: flex-start; padding: 0.30rem 1.5rem; background-color: var(--white); font-weight: 600; font-size: var(--fs-small); border-radius: 6px; text-decoration: none; border: 1.5px solid var(--white); transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } .insights-blog__ribbon { width: 72px; height: 8px; border: 0; opacity: 1; margin: 0 0 var(--spacing-20); background-color: var(--brand-orange); } .insights-blog-card { height: 100%; gap: var(--spacing-30); } .insights-blog-card__image { flex: 0 0 auto; width: 160px; } .insights-blog-card__image img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; } .insights-blog-card__body { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; } .insights-blog-card__meta { display: flex; align-items: center; gap: var(--spacing-20); margin: 0 0 var(--spacing-10); } .insights-blog-card__avatar { display: inline-block; width: 28px; height: 28px; border-radius: 50%; background-color: var(--gray-50); border: 1px solid #e0e0e0; flex-shrink: 0; } .insights-blog-card__avatar-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .insights-blog-card__title { color: var(--dark-gray); margin-bottom: var(--spacing-10); } .insights-blog-card__byline { display: flex; align-items: center; gap: var(--spacing-20); margin-bottom: var(--spacing-10); } .insights-blog-card__btn { align-self: flex-start; margin-top: auto; } .insights-success-stories { background: var(--gradient-navy-to-blue); color: var(--white); } .insights-success-stories__ribbon { width: 72px; height: 8px; border: 0; opacity: 1; margin: 0 0 var(--spacing-20); background-color: var(--brand-cyan); } .insights-success-stories .success-story-card { background-color: var(--white); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } /* 26. Primary nav active state */ .site-header__nav .current-menu-item > .nav-link, .site-header__nav .current-menu-parent > .nav-link, .site-header__nav .current-menu-ancestor > .nav-link { color: var(--brand-orange); } /* 27. About page */ /* -- Hero -- */ .about-hero__ribbon { width: 72px; height: 8px; opacity: 1; border: 0; margin: 0 0 var(--spacing-20); background-color: var(--brand-orange); } .about-hero__content h1 { color: #000; } .about-hero__subtitle { font-weight: 700; color: #000; max-width: 34ch; } .about-hero__description { max-width: 46ch; } /* -- About Inadev -- */ .about-inadev__ribbon { width: 72px; height: 8px; opacity: 1; border: 0; margin: 0 0 var(--spacing-20); background-color: var(--brand-orange); } .about-inadev__list li { display: flex; align-items: flex-start; gap: var(--spacing-10); margin-bottom: var(--spacing-10); } .about-inadev__bullet { color: var(--brand-orange); font-weight: 700; } .about-inadev__image { width: 100%; height: auto; border-radius: 8px; display: block; } /* -- Our Mission -- */ .about-mission { background-color: var(--brand-navy); } .about-mission__ribbon { width: 72px; height: 8px; opacity: 1; border: 0; margin: 0 0 var(--spacing-20); background-color: var(--brand-cyan); } .about-mission__image { width: 100%; height: auto; border-radius: 8px; display: block; } .about-mission__body { max-width: 50ch; } /* -- Our Vision -- */ .about-vision__ribbon { width: 72px; height: 8px; opacity: 1; border: 0; margin: 0 0 var(--spacing-20); background-color: var(--brand-orange); } .about-vision__image { width: 100%; height: auto; border-radius: 8px; display: block; } .about-vision__placeholder { min-height: 260px; border-radius: 8px; background-color: #6e4a3b; color: var(--white); font-weight: 700; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--spacing-20); } /* -- Values -- */ .about-values__ribbon { width: 72px; height: 8px; opacity: 1; border: 0; margin: 0 0 var(--spacing-20); background-color: var(--blue-medium); } .about-values__subtitle { max-width: 60ch; } @media (min-width: 1024px) { .about-values__heading { text-align: right; } .about-values__ribbon { margin-left: auto; } .about-values__subtitle { margin-left: auto; } } .about-values__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-30); margin-top: var(--spacing-40); } .value-card { position: relative; display: block; min-height: 200px; border-radius: 8px; overflow: hidden; background-size: cover; background-position: center; background-color: var(--gray-200); text-decoration: none; } .value-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(4, 45, 98, 0.8), rgba(4, 45, 98, 0.15)); } .value-card__content { position: absolute; left: var(--spacing-20); right: var(--spacing-20); bottom: var(--spacing-20); display: flex; flex-direction: column; align-items: center; gap: var(--spacing-10); text-align: center; } .value-card__label { color: var(--white); font-weight: 700; font-size: var(--fs-body-large); } .value-card__icon { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--white); color: var(--white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } @media (min-width: 768px) { .about-values__grid { grid-template-columns: repeat(3, 1fr); } } /* -- Global Footprint -- */ .about-footprint { background-color: var(--gray-50); background-image: radial-gradient(circle, rgba(4, 45, 98, 0.08) 1px, transparent 1px); background-size: 18px 18px; } .about-footprint__ribbon { width: 72px; height: 8px; opacity: 1; border: 0; margin: 0 0 var(--spacing-20); background-color: var(--blue-medium); } .about-footprint__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-60); margin-top: var(--spacing-40); text-align: center; } .about-footprint__stat-number { font-size: var(--fs-heading-1); font-weight: 800; color: var(--brand-orange); line-height: 1; } .about-footprint__stat-label { font-weight: 600; color: var(--black); margin-top: var(--spacing-50); } /* -- Certifications & Partnerships -- */ .about-certifications__ribbon { width: 72px; height: 8px; opacity: 1; border: 0; margin: 0 0 var(--spacing-20); background-color: var(--blue-medium); } @media (min-width: 1024px) { .about-certifications__heading { text-align: right; } .about-certifications__ribbon { margin-left: auto; } .about-certifications__subtitle { margin-left: auto; } } .about-certifications__group { margin-top: var(--spacing-50); text-align: center; } .about-certifications__group-title { color: var(--dark-gray); margin-bottom: var(--spacing-30); } .about-certifications__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-40); } .cert-item { width: 140px; display: flex; flex-direction: column; align-items: center; text-align: center; } .cert-item__logo { max-width: 100%; max-height: 56px; object-fit: contain; margin-bottom: var(--spacing-10); } .cert-item__name { font-weight: 700; color: var(--dark-gray); } .cert-item__caption { font-size: var(--fs-small); color: var(--black); border-top: 1px solid var(--black); } /* -- Leadership -- */ .about-leadership { background-color: var(--brand-navy); } .about-leadership__ribbon { width: 72px; height: 8px; opacity: 1; border: 0; margin: 0 0 var(--spacing-20); background-color: var(--blue-medium); } .about-leadership__carousel-wrap { position: relative; } .carousel-scroll--leadership .carousel-scroll__item { width: 100%; } /* Overrides the shared "center a short row" rule — each leadership slide is always a full page, so the track must stay left-aligned for scroll-snap paging to land exactly on each slide instead of drifting off-center. */ .carousel-scroll--leadership .carousel-scroll__track { justify-content: flex-start; } /* Overrides the shared arrow-spacing padding — that reserves ~64px so narrower multi-up cards (Mission Areas etc.) clear the beside-carousel arrows, but here it made each 100%-wide slide narrower than the visible scroll viewport, letting the neighboring slide peek in and throwing off the itemsPerView/page-count math (wrong dot count). Full-page slides need to exactly match the viewport width instead. */ .carousel-scroll--leadership { padding: 0; } .about-leadership__slide { padding: 0 var(--spacing-10); } .about-leadership__category { color: var(--white); margin-bottom: var(--spacing-30); } .about-leadership__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-40) var(--spacing-20); } .leadership-card { text-align: center; } .leadership-card__photo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin: 0 auto var(--spacing-10); display: block; } .leadership-card__photo--placeholder { background-color: rgba(255, 255, 255, 0.15); } .leadership-card__name { color: var(--white); font-weight: 700; } .leadership-card__title { color: rgba(255, 255, 255, 0.75); font-size: var(--fs-small); } @media (min-width: 600px) { .about-leadership__grid { grid-template-columns: repeat(4, 1fr); } } /* -- Final CTA -- */ .about-final-cta { background-color: var(--blue-medium); } .about-final-cta__title { margin-bottom: var(--spacing-20); } /* -- Contract Vehicles -- */ .about-contract-vehicles__ribbon { width: 72px; height: 8px; opacity: 1; border: 0; margin: 0 0 var(--spacing-20); background-color: var(--blue-medium); } .about-contract-vehicles__subtitle { max-width: 70ch; margin-bottom: var(--spacing-40); } .about-contract-vehicles__grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-30); } .contract-vehicle-card { display: flex; gap: var(--spacing-20); padding: var(--spacing-30); border: 1px solid var(--gray-100); border-radius: 8px; } .contract-vehicle-card__logo { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; } .contract-vehicle-card__title { color: var(--brand-navy); margin-bottom: var(--spacing-10); } .contract-vehicle-card__contract-number, .contract-vehicle-card__desc { margin-bottom: var(--spacing-10); } @media (min-width: 768px) { .about-contract-vehicles__grid { grid-template-columns: repeat(2, 1fr); } .contract-vehicle-card:last-child:nth-child(odd) { grid-column: 1 / -1; } } /* 28. Careers page */ .careers-hero__tagline { color: var(--brand-orange); font-weight: 700; margin-top: var(--spacing-20); } .careers-regions__image-wrap { display: flex; align-items: center; justify-content: center; height: 160px; } .careers-regions__image { max-width: 60%; max-height: 100%; width: auto; height: auto; object-fit: contain; margin-inline: auto; } .careers-regions__bar { width: 40px; height: 8px; opacity: 1; background-color: var(--brand-orange); border: none; margin: var(--spacing-40) 0 var(--spacing-20); } .careers-regions__label { font-weight: 700; color: var(--dark-gray); margin-bottom: var(--spacing-20); text-align: left; } .careers-team{ margin-top: 50px; } .careers-team__ribbon, .careers-values__ribbon, .careers-recognition__ribbon { width: 72px; height: 8px; opacity: 1; background-color: var(--brand-cyan); border: none; margin: 0 0 var(--spacing-20); } .careers-values__ribbon { background-color: var(--brand-orange); } .careers-team__body { max-width: 70ch; } .careers-team__strive-label { color: var(--brand-orange); font-weight: 700; margin-top: var(--spacing-30); } .careers-team__bullets { list-style: none; margin: 0; padding: 0; } .careers-team__bullets li { position: relative; padding-left: var(--spacing-40); margin-bottom: var(--spacing-20); color: var(--dark-gray); } .careers-team__bullets li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background-color: var(--brand-orange); } .careers-values__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-60) var(--spacing-40); } .careers-values__item { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 0 0 140px; } .careers-values__badge { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; border: 3px solid var(--gray-200); margin-bottom: var(--spacing-30); } .careers-values__badge img { width: 36px; height: 36px; object-fit: contain; } .careers-values__item--1 .careers-values__badge { border-color: var(--brand-orange); } .careers-values__item--2 .careers-values__badge { border-color: var(--blue-medium); } .careers-values__item--3 .careers-values__badge { border-color: var(--brand-navy); } .careers-values__item--4 .careers-values__badge { border-color: var(--brand-cyan); } .careers-values__item--5 .careers-values__badge { border-color: var(--purple); } .careers-values__label { font-weight: 600; color: var(--dark-gray); } .careers-recognition__heading-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--spacing-30); margin-bottom: var(--spacing-60); } .careers-recognition__glassdoor { display: flex; flex-direction: column; align-items: flex-end; text-align: right; } .careers-recognition__glassdoor-name { color: var(--green); font-weight: 700; font-size: var(--fs-heading-4); } .careers-recognition__glassdoor-rating { color: var(--green); font-weight: 600; font-size: var(--fs-heading-5); } .careers-recognition__stars { color: var(--green); letter-spacing: 1px; font-size: var(--fs-heading-5); } .careers-recognition__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-40); } .careers-recognition__cell { display: flex; align-items: center; justify-content: center; min-height: 110px; padding: var(--spacing-10); border: 1px solid var(--gray-200); border-radius: 8px; } .careers-recognition__cell img { max-width: 100%; object-fit: contain; } .careers-recognition__placeholder { color: var(--dark-gray); font-weight: 600; text-align: center; } @media (min-width: 768px) { .careers-recognition__grid { grid-template-columns: repeat(3, 1fr); } } /* 29. Contact page */ .contact-form-section .wpcf7-form-control { width: 100%; padding: var(--spacing-20); border: 1px solid var(--gray-200); border-radius: 4px; font-size: var(--fs-body); color: var(--white); } .contact-form-section textarea.wpcf7-form-control { min-height: 160px; resize: vertical; } .contact-form-section .wpcf7-form-control:focus { outline: none; border-color: var(--brand-orange); } .contact-form-section .wpcf7-submit { margin-top: var(--spacing-10); } .contact-form-section .wpcf7-not-valid-tip { color: #d63638; font-size: var(--fs-caption); margin-top: var(--spacing-10); } .contact-form-section .wpcf7-response-output { margin-top: var(--spacing-20); padding: var(--spacing-20); border-radius: 4px; } .contact-presence__maps { display: flex; align-items: center; justify-content: center; gap: var(--spacing-60); margin-bottom: var(--spacing-40); } .contact-presence__map { max-width: 220px; width: 100%; height: auto; object-fit: contain; opacity: 0.35; } .contact-presence__description { max-width: 70ch; } .contact-addresses__ribbon { width: 72px; height: 4px; opacity: 1; background-color: var(--brand-orange); border: none; margin: 0 0 var(--spacing-20); } .contact-addresses__group-title { font-weight: 700; color: var(--dark-gray); margin-bottom: var(--spacing-20); } .contact-addresses__ribbon--hidden, .contact-addresses__group-title--hidden { visibility: hidden; } .contact-addresses__location { font-weight: 700; color: var(--dark-gray); margin-bottom: var(--spacing-10); } .contact-addresses__text { color: var(--dark-gray); margin-bottom: var(--spacing-10); } .contact-addresses__linkedin { display: inline-flex; align-items: center; justify-content: center; color: var(--white); background-color: var(--blue-linkedin); padding: 0.1rem; border-radius: 2px; margin-top: var(--spacing-10); }