/* ═══════════════════════════════════════════════════════════════════
AUTMAN ROBOTICS — styles.css
Single stylesheet. Load order matters: later blocks intentionally win
on cascade order rather than by escalating specificity.
HOW THIS FILE IS ORGANISED
1. Design tokens ......... :root — fonts, accent, surface colours
2. Base ................... reset, typography, legacy component CSS
3. Layout sections ........ hero, technology, about, careers, contact
4. Override blocks ........ later fixes, applied in cascade order
5. Scroll & stability ..... scroll-margin, layout-shift prevention
CONVENTIONS FOR THE NEXT DEVELOPER
- Fonts are ONLY ever referenced through --main-font / --heading-font
/ --mono-font. Never hardcode a family; changing a token should
re-skin the whole site.
- Accent colour is --accent-color. Every highlight, hover, focus ring
and glowing line resolves through it.
- The heavy !important usage is inherited, not aspirational. New rules
are appended at the END of the file so source order decides them.
- clamp() drives fluid type: clamp(min, preferred-vw, max) scales with
the viewport without media queries and without ever dropping below
the readable minimum. Do not convert these back to fixed px.
═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;700&family=Plus+Jakarta+Sans:wght@700;800&display=swap');
html {
scroll-behavior: smooth;
}
.navbar .nav-links .nav-item.active {
color: #ffffff;
border-bottom: 2px solid #6d8995;
padding-bottom: 4px;
}
.navbar .nav-links .nav-item:hover {
color: #6d8995;
}
.navbar.navbar-hidden {
transform: translateY(-100%);
}
body, html {
margin: 0;
padding: 0;
width: 100%;
min-height: 100vh;
background-color: #020203 !important;
color: #FFFFFF;
font-family: Arial, sans-serif;
}
body {
position: relative;
background: #020203 !important;
background-attachment: fixed;
}
body::before {
content: "";
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='20' y1='0' x2='20' y2='40' stroke='rgba(255,255,255,0.03)' stroke-width='1'/%3E%3Cline x1='0' y1='20' x2='40' y2='20' stroke='rgba(255,255,255,0.03)' stroke-width='1'/%3E%3Cline x1='18' y1='20' x2='22' y2='20' stroke='rgba(255,255,255,0.2)' stroke-width='1'/%3E%3Cline x1='20' y1='18' x2='20' y2='22' stroke='rgba(255,255,255,0.2)' stroke-width='1'/%3E%3C/svg%3E");
background-size: 40px 40px;
background-position: center bottom;
opacity: 0.9;
pointer-events: none;
z-index: 0;
mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0) 90%);
-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0) 90%);
}
body::after {
content: "";
position: fixed;
inset: 0;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
opacity: 0.08;
mix-blend-mode: screen;
pointer-events: none;
z-index: 0;
}
h1, h2, h3 {
font-family: var(--heading-font);
font-weight: 800;
}
.section-container {
max-width: 90%;
margin: 0 auto;
padding: 100px 0;
}
.navbar {
position: fixed !important;
top: 0;
width: 100%;
z-index: 9000 !important;
transition: transform 0.3s ease-in-out;
background-color: #000000;
left: 0;
border-bottom: 1px solid #222222;
}
.nav-container {
max-width: 90%;
margin: 0 auto;
padding: 25px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo-img {
height: 65px;
width: auto;
max-width: 250px;
object-fit: contain;
}
.logo-link {
text-decoration: none;
display: flex;
align-items: center;
}
.nav-links {
display: flex;
align-items: center;
gap: 40px;
}
.nav-item {
font-family: Arial, sans-serif;
font-size: 1.6rem;
color: #CCCCCC;
text-decoration: none;
transition: color 0.2s ease;
}
.nav-item:hover {
color: #8cb0bd;
}
.btn-primary, .btn-secondary, .submit-btn {
font-family: var(--mono-font);
font-size: 1.1rem;
padding: 15px 35px;
text-decoration: none;
transition: all 0.2s ease;
border-radius: 2px;
}
.btn-primary {
color: #000000;
background-color: #6d8995;
font-weight: bold;
border: 1px solid #6d8995;
}
.btn-primary:hover {
background-color: transparent;
color: #6d8995;
}
.btn-secondary {
color: #FFFFFF;
background-color: transparent;
border: 1px solid #FFFFFF;
}
.btn-secondary:hover {
background-color: #FFFFFF;
color: #000000;
}
.footer {
background-color: #050505;
border-top: 1px solid #222222;
padding: 80px 0 20px 0;
margin-top: 60px;
}
.footer-container {
max-width: 90%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 50px;
margin-bottom: 60px;
align-items: stretch;
}
.footer-brand {
flex: 2;
min-width: 250px;
max-width: 400px;
}
.footer-logo {
height: 40px;
width: auto;
margin-bottom: 20px;
opacity: 0.8;
transition: opacity 0.3s ease;
}
.footer-logo:hover {
opacity: 1;
}
.footer-links-group, .footer-contact {
flex: 1;
min-width: 200px;
display: flex;
flex-direction: column;
gap: 15px;
}
.footer-heading {
font-family: var(--mono-font);
font-size: 0.9rem;
color: #6d8995;
margin-bottom: 10px;
letter-spacing: 1px;
}
.footer-link, .footer-text {
font-size: 1rem;
color: #CCCCCC;
text-decoration: none;
transition: color 0.2s ease;
}
.footer-text {
color: #888888;
}
.footer-link:hover {
color: #6d8995;
}
.social-links {
display: flex;
gap: 15px;
margin-top: 10px;
}
.footer-bottom {
max-width: 90%;
margin: 0 auto;
border-top: 1px solid #1a1a1a;
padding-top: 20px;
text-align: center;
}
.footer-bottom p {
font-family: var(--mono-font);
font-size: 0.85rem;
color: #444444;
}
.scroll-reveal {
opacity: 0;
transform: translateY(20px);
animation: simpleFadeIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.team-card-exec::before, .team-card-leader::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 80%;
background: radial-gradient(circle, rgba(109, 137, 149, 0.3) 0%, rgba(10, 15, 22, 0.5) 50%, transparent 70%);
pointer-events: none;
z-index: 1;
}
.about-image img, .team-card-exec img, .team-card-leader img {
position: relative;
z-index: 2;
}
.about-vision-mission, section {
position: relative;
z-index: 1;
}
.about-vision-mission, section, footer {
position: relative;
z-index: 1;
}
footer {
background-color: #020203;
}
.social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid #333333;
border-radius: 4px;
transition: all 0.2s ease;
}
.social-icon svg {
width: 20px;
height: 20px;
fill: #FFFFFF;
transition: fill 0.2s ease;
}
.social-icon:hover {
border-color: #6d8995;
color: #6d8995;
background-color: rgba(109, 137, 149, 0.05);
}
.social-icon:hover svg {
fill: #6d8995;
}
.backed-text {
font-family: var(--mono-font);
font-size: 0.75rem;
color: #6d8995;
text-transform: uppercase;
letter-spacing: 1px;
transform: translateY(1px);
}
.sfc-logo {
height: 45px !important;
width: auto !important;
opacity: 0.9;
transition: opacity 0.3s ease;
max-width: none;
object-fit: contain;
display: block;
border-radius: 3px;
margin-left: 12px !important;
}
.sfc-logo:hover {
opacity: 1;
}
section {
scroll-margin-top: 100px;
padding: 60px 0 !important;
margin: 0 auto !important;
}
.mobile-menu-btn {
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
background: transparent;
border: none;
cursor: pointer;
z-index: 9999;
position: relative;
pointer-events: auto;
}
.mobile-menu-btn span {
display: block;
width: 100%;
height: 2px;
background-color: #ffffff;
transition: all 0.3s ease;
}
section, .team-hierarchy, .partners-section, .blog-section, .tech-showcase, .about-section, .timeline-section, .careers-section, .contact-section {
padding-top: 30px !important;
padding-bottom: 30px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.partners-section .section-container, .partners-section img {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
.careers-section .section-container, .careers-section h2, .careers-section .section-title {
padding-top: 0 !important;
margin-top: 0 !important;
}
.careers-section .section-container, .careers-section > div {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
.contact-section .section-container, .contact-section h2, .contact-section h2.section-title {
padding-top: 0 !important;
margin-top: 0 !important;
}
.team-section .section-container, .team-section h2.section-title {
padding-top: 0 !important;
margin-top: 0 !important;
}
.team-section {
padding-top: 0 !important;
margin-top: 40px !important;
padding-bottom: 10px !important;
margin-bottom: 0 !important;
}
.section-title {
font-size: 1rem !important;
color: #ffffff !important;
margin-bottom: 50px;
border-bottom: 1px solid #222222;
padding-bottom: 20px;
display: flex !important;
margin: 0 auto 60px auto !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 5px !important;
padding: 14px 36px !important;
border: 1px solid rgba(109, 137, 149, 0.35) !important;
box-shadow: 6px 6px 0px rgba(109, 137, 149, 0.3) !important;
background-color: #0b1118 !important;
position: relative !important;
font-family: var(--mono-font);
line-height: 1.4 !important;
background: radial-gradient(circle, rgba(109, 137, 149, 0.15) 0%, rgba(11, 17, 24, 0.95) 80%) !important;
border-radius: 4px !important;
align-items: center !important;
justify-content: center !important;
width: fit-content !important;
text-align: center !important;
overflow: hidden !important;
animation: autmanRadarGlow 3s ease-in-out infinite alternate;
min-height: 52px !important;
box-sizing: border-box !important;
}
.custom-modal {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(5px);
align-items: center;
justify-content: center;
}
.modal-content {
background-color: #0b1118;
border: 1px solid rgba(109, 137, 149, 0.3);
border-radius: 12px;
width: 90%;
max-width: 650px;
max-height: 80vh;
overflow-y: auto;
padding: 40px;
position: relative;
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.close-modal {
color: #6d8995;
position: absolute;
top: 20px;
right: 25px;
font-size: 32px;
font-weight: bold;
cursor: pointer;
transition: color 0.3s ease;
}
.close-modal:hover {
color: #ffffff;
}
.modal-body p {
color: #b0c4de;
font-size: 1.1rem;
line-height: 1.6;
}
.blog-video-container, .blog-card > img, .blog-card > div:first-child {
height: 220px !important;
width: 100% !important;
overflow: hidden !important;
flex-shrink: 0 !important;
}
.blog-video-container video, .blog-card img {
height: 100% !important;
width: 100% !important;
object-fit: cover !important;
}
.read-more-btn {
margin-top: auto !important;
}
.section-title.align-left {
margin: 0 0 40px 0 !important;
}
.custom-modal, .modal-content, .modal-body p, .modal-body strong, .modal-content .blog-title {
font-family: inherit !important;
}
.modal-content .blog-date {
font-family: var(--mono-font);
}
.tech-carousel .swiper-slide:not(.swiper-slide-active) {
filter: brightness(0.25);
opacity: 0.8;
}
.tech-carousel .swiper-slide-active {
filter: brightness(1);
opacity: 1;
}
.tech-carousel .swiper-slide img {
width: 100%;
height: 100%;
object-fit: contain !important;
}
.carousel-text-container, .single-card-container {
transition: opacity 0.3s ease-in-out !important;
}
.tech-carousel .swiper-slide.swiper-slide-active {
opacity: 1 !important;
visibility: visible !important;
filter: brightness(1) !important;
}
.tech-carousel .swiper-slide.swiper-slide-prev, .tech-carousel .swiper-slide.swiper-slide-next {
opacity: 0.8 !important;
visibility: visible !important;
filter: brightness(0.25) !important;
}
.submit-btn {
background-color: #6d8995;
color: #000000 !important;
font-weight: bold;
border: 1px solid #6d8995;
cursor: pointer;
}
.submit-btn:hover {
background-color: transparent;
color: #6d8995 !important;
}
.footer-backed {
position: relative;
top: 75px;
display: flex;
align-items: center;
gap: 12px;
}
.footer-backed .sfc-logo {
margin: 0 !important;
display: block !important;
height: 45px !important;
width: auto !important;
transform: none !important;
}
.footer-backed .backed-text {
margin: 0 !important;
line-height: 1 !important;
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 1.1rem !important;
transform: translateY(-10px) !important;
}
.contact-section {
padding-top: 0 !important;
margin-top: 0 !important;
}
.contact-section .section-container {
padding-top: 40px !important;
}
.careers-section {
padding-top: 30px !important;
margin-top: 0px !important;
padding-bottom: 10px !important;
margin-bottom: 0 !important;
min-height: auto !important;
display: block !important;
}
.careers-section .section-container {
margin-bottom: 10px !important;
}
html, body {
overflow-x: hidden !important;
max-width: 100vw !important;
}
.hero-section .hero-container {
padding-left: 0px !important;
justify-content: space-between !important;
}
.hero-section .about-text {
margin-left: 0 !important;
padding-left: 0 !important;
}
.hero-section .about-image {
margin-left: 0 !important;
justify-content: flex-end !important;
position: relative !important;
left: 80px !important;
display: flex !important;
}
.about-section p {
text-align: justify !important;
}
.partners-section img, .partners-section svg {
width: 250px !important;
max-width: none !important;
height: auto !important;
margin: 0 40px !important;
}
.hero-section {
padding-top: 100px;
min-height: 100vh;
padding-bottom: 30px !important;
overflow-x: hidden !important;
display: flex;
align-items: center;
}
.hero-container {
max-width: 90%;
margin: 0 auto;
width: 100%;
}
.hero-title {
font-size: 4.5rem;
line-height: 1.1;
color: #FFFFFF;
margin-bottom: 25px;
max-width: 1100px;
}
.highlight {
color: #6d8995;
}
.hero-subtitle {
margin-left: 0 !important;
padding-left: 0 !important;
font-family: var(--mono-font);
font-size: 1.5rem;
color: #A0A0A0;
margin-bottom: 50px;
}
.hero-buttons {
display: flex;
gap: 20px;
align-items: center;
}
.about-content {
display: flex;
gap: 60px;
align-items: center;
flex-wrap: wrap;
}
.about-text, .about-image {
flex: 1;
min-width: 400px;
}
.about-text p {
font-family: Arial, sans-serif;
font-size: 1.15rem;
color: #A0A0A0;
line-height: 1.8;
margin-bottom: 25px;
}
.blog-section {
margin-bottom: 80px !important;
padding-bottom: 0 !important;
margin-top: 20px !important;
padding-top: 0 !important;
max-width: 1100px;
margin: 120px auto 80px auto;
padding: 0 20px;
}
.blog-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 40px;
}
.blog-header h2 {
font-size: 2.5rem;
color: #ffffff;
}
.view-all {
color: #6d8995;
text-decoration: none;
font-family: var(--mono-font);
font-size: 0.95rem;
transition: color 0.2s ease;
}
.view-all:hover {
color: #ffffff;
}
.blog-grid {
display: flex;
gap: 30px;
}
.blog-card {
display: flex !important;
flex-direction: column !important;
height: auto !important;
flex: 1;
background: rgba(255, 255, 255, 0.02);
border: 1px solid #222222;
border-radius: 8px;
overflow: hidden;
transition: transform 0.3s ease, border-color 0.3s ease;
}
.blog-card:hover {
transform: translateY(-8px);
border-color: #6d8995;
}
.blog-content {
display: flex !important;
flex-direction: column !important;
flex-grow: 1 !important;
padding: 30px;
}
.blog-date {
display: block;
font-family: var(--mono-font);
font-size: 0.75rem;
color: #6d8995;
margin-bottom: 12px;
text-transform: uppercase;
}
.blog-content h3 {
font-size: 1.3rem;
color: #ffffff;
margin-bottom: 15px;
}
.blog-content p {
color: #999999;
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 25px;
}
.blog-slider-wrapper {
position: relative;
width: 100%;
height: 220px;
}
.blog-slider-container {
display: flex !important;
align-items: stretch !important;
width: 100%;
height: 100%;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.blog-slider-container::-webkit-scrollbar {
display: none;
}
.blog-slider-track {
display: flex;
height: 100%;
gap: 8px;
}
.blog-slide-img {
flex: 0 0 100%;
height: 100%;
object-fit: cover;
scroll-snap-align: start;
border-radius: 4px;
}
.slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.6);
color: white;
border: none;
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: background 0.2s ease;
}
.slider-arrow:hover {
background: rgba(0, 0, 0, 0.8);
}
.prev-arrow {
left: 8px;
}
.next-arrow {
right: 8px;
}
.blog-card .read-more-btn, .blog-card a {
color: var(--accent-color);
text-decoration: underline;
font-weight: 500;
}
.blog-card .read-more-btn:hover, .blog-card a:hover {
color: var(--accent-hover);
}
.blog-video-container {
width: 100%;
height: 220px;
background: #000;
overflow: hidden;
position: relative;
}
.blog-video-player {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
}
.tech-showcase {
margin-top: 0 !important;
padding-top: 10px !important;
padding-bottom: 150px !important;
max-width: 1200px;
margin: 120px auto 30px auto;
padding: 0 20px;
}
.tech-intro {
text-align: center;
max-width: 850px;
margin: 0 auto 60px auto;
}
.tech-intro h2 {
font-size: 2.8rem;
color: #ffffff;
margin-bottom: 15px;
}
.tech-intro p {
color: #888888;
font-size: 1.15rem;
}
.diagnostic-section {
max-width: 650px;
margin: 0 auto 40px auto;
padding: 0 20px;
text-align: left;
}
.diagnostic-heading {
text-align: center !important;
font-family: var(--heading-font);
font-size: 2.4rem;
color: #ffffff;
margin-bottom: 30px;
line-height: 1.1;
letter-spacing: -0.5px;
}
.diagnostic-list {
list-style: none;
padding: 0;
margin-bottom: 50px;
display: flex;
flex-direction: column;
gap: 15px;
}
.diagnostic-list li {
padding: 22px 30px;
font-family: Arial, sans-serif;
font-size: 1.1rem;
color: #A0A0A0;
line-height: 1.5;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(5px);
transition: all 0.4s ease;
cursor: default;
}
.diagnostic-list li:hover {
border-color: #6d8995;
color: #ffffff;
background: linear-gradient(90deg, rgba(109, 137, 149, 0.15) 0%, transparent 100%);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
transform: translateY(-2px);
}
.single-card-container {
display: none !important;
}
.single-card-container .product-card {
width: 100%;
opacity: 1;
border-color: #6d8995;
background: rgba(109, 137, 149, 0.05);
padding: 24px;
border-radius: 12px;
border-style: solid;
border-width: 1px;
text-align: center;
}
.product-card h3 {
font-family: var(--heading-font);
font-size: 1.25rem;
color: #ffffff;
margin-bottom: 4px;
}
.product-card p {
font-size: 0.85rem;
color: #999999;
line-height: 1.3;
margin: 0;
}
.stage-container {
height: auto;
overflow: visible;
position: relative;
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
--floor-rise: 0px;
--panel-ratio: 0.925;
}
.tech-carousel .swiper-wrapper {
transition-timing-function: cubic-bezier(0.28, 0.10, 0.37, 0.95);
}
.tech-carousel .swiper-slide {
width: 34%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
background: transparent !important;
border: none !important;
transition: opacity 0.4s ease, filter 0.4s ease !important;
pointer-events: none;
opacity: 0 !important;
visibility: hidden !important;
}
.wall-panel {
position: relative;
width: 98%;
aspect-ratio: var(--panel-ratio) / 1;
border-radius: 10px;
overflow: hidden;
background: none;
box-shadow: none;
}
.wall-panel::after {
content: "";
position: absolute;
inset: 0;
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 10px;
pointer-events: none;
z-index: 2;
border-color: transparent;
}
.wall-panel img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
transform: translateY(var(--img-shift, 0)) scale(var(--img-scale, 1));
transform-origin: center center;
filter: brightness(0.34) blur(2px);
transition: filter 1800ms cubic-bezier(0.28, 0.10, 0.37, 0.95);
will-change: filter;
}
.tech-carousel .swiper-slide-active .wall-panel img {
filter: brightness(1) blur(0px);
}
.tech-carousel .swiper-slide[data-index="0"] .wall-panel {
--img-scale: 1;
--img-shift: 0;
}
.tech-carousel .swiper-slide[data-index="1"] .wall-panel {
--img-scale: 0.982;
--img-shift: 3.40%;
}
.tech-carousel .swiper-slide[data-index="2"] .wall-panel {
--img-scale: 0.997;
--img-shift: 2.83%;
}
.wall-floor {
position: absolute;
left: 50%;
top: calc(100% - var(--floor-rise));
transform: translateX(-50%);
width: 132%;
height: 300px;
border-radius: 50%;
z-index: 1;
pointer-events: none;
background: radial-gradient(
ellipse 55% 62% at 50% 8%,
rgba(150, 185, 200, 0.18) 0%,
rgba(109, 137, 149, 0.09) 38%,
rgba(10, 16, 22, 0.0) 74%
);
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.32),
inset 0 12px 36px rgba(109, 137, 149, 0.22),
inset 0 -40px 60px rgba(0, 0, 0, 0.55);
mask-image: radial-gradient(ellipse 62% 100% at 50% 0%, #000 42%, transparent 78%);
-webkit-mask-image: radial-gradient(ellipse 62% 100% at 50% 0%, #000 42%, transparent 78%);
}
.wall-floor::before {
content: "";
position: absolute;
left: 50%;
top: -26px;
transform: translateX(-50%);
width: 44%;
height: 80px;
border-radius: 50%;
background: radial-gradient(ellipse at center,
rgba(0, 0, 0, 0.70) 0%,
rgba(0, 0, 0, 0.30) 48%,
transparent 76%);
filter: blur(16px);
}
.tech-section-wrapper::before, .tech-section-wrapper::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 14%;
z-index: 5;
pointer-events: none;
}
.tech-section-wrapper::before {
left: 0;
background: linear-gradient(to right, #020203 10%, transparent);
}
.tech-section-wrapper::after {
right: 0;
background: linear-gradient(to left, #020203 10%, transparent);
}
.nav-arrow {
z-index: 10;
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(4px);
border-radius: 50%;
width: 50px;
height: 50px;
color: white;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.nav-arrow:hover {
background: rgba(109, 137, 149, 0.15);
border-color: #6d8995;
color: #6d8995;
transform: translateY(-50%) scale(1.1);
}
.left-arrow {
left: 40px;
}
.right-arrow {
right: 40px;
}
.carousel-text-container {
margin-bottom: 40px !important;
position: relative;
z-index: 3;
margin-top: 40px !important;
min-height: 120px;
margin: 10px auto 10px auto;
height: auto;
max-width: 800px;
text-align: center;
transition: opacity 0.3s ease;
}
.carousel-text-container h3 {
font-family: var(--heading-font);
font-size: 2.8rem;
font-weight: 400;
margin-bottom: 10px;
letter-spacing: 0px;
/* Accent blue — matches the "factories can too" span in the closing block. */
color: var(--accent-color);
}
.carousel-text-container p {
font-family: var(--main-font);
font-size: 1.4rem;
font-weight: 300;
/* Full white rather than muted: this copy carries the product explanation. */
color: #ffffff;
margin: 0;
}
#technology.tech-showcase {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.tech-section-wrapper {
position: relative;
width: 100%;
min-height: 450px !important;
margin-top: 20px;
z-index: 5;
overflow: visible;
}
.tech-carousel {
width: 100%;
height: 100%;
overflow: hidden;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.about-section {
padding-top: 140px;
margin-top: 20px !important;
padding-bottom: 20px;
margin-bottom: 0 !important;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}
.philosophy-layout {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
.philosophy-intro {
text-align: center;
max-width: 800px;
margin-bottom: 60px;
}
.philosophy-hook {
text-align: center !important;
font-family: var(--heading-font);
font-size: 2.2rem;
color: #ffffff;
line-height: 1.3;
margin-bottom: 25px;
}
.highlight-text {
color: #6d8995;
}
.timeline-section {
padding-top: 0 !important;
margin-top: -40px !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
max-width: 100%;
margin: 20px 0 100px 0;
padding: 0 20px;
overflow: hidden;
}
.timeline-heading {
text-align: center;
font-size: 2.5rem;
color: #ffffff;
margin-bottom: 50px;
}
.timeline-container {
width: 100%;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding-bottom: 20px;
padding-left: max(5vw, 50vw) !important;
scroll-behavior: smooth;
scroll-padding-right: 50vw !important;
padding-right: max(5vw, 50vw) !important;
scroll-padding-left: 50vw !important;
}
.timeline-container::-webkit-scrollbar {
display: none;
}
.timeline-track {
display: flex;
gap: 40px;
width: max-content;
padding-right: max(5vw, 50vw) !important;
position: relative;
align-items: stretch !important;
--rail-y: 86px;
--fill: 0px;
padding-left: 0 !important;
}
.timeline-card {
width: 320px !important;
flex-shrink: 0;
scroll-snap-align: start;
background: rgba(11, 17, 24, 0.8);
border: 1px solid rgba(109, 137, 149, 0.28);
border-radius: 8px;
padding: 30px;
position: relative;
transition: opacity 0.45s ease,
transform 0.45s cubic-bezier(0.28,0.10,0.37,0.95),
border-color 0.45s ease,
background 0.45s ease,
box-shadow 0.45s ease;
z-index: 2;
opacity: 0.42;
transform: translateY(0);
cursor: pointer;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
height: auto !important;
}
.timeline-card:hover {
border-color: rgba(109, 137, 149, 0.45);
opacity: 0.62;
}
.timeline-year {
display: block;
font-family: var(--main-font);
font-size: 1.5rem;
color: #6d8995;
margin-bottom: 20px;
transition: color 0.45s ease, font-weight 0.45s ease;
}
.timeline-dot {
width: 14px !important;
height: 14px !important;
background-color: #6d8995;
border-radius: 50%;
margin-bottom: 20px;
box-shadow: 0 0 10px rgba(109, 137, 149, 0.5);
background: #0a1016 !important;
border: 1px solid rgba(109, 137, 149, 0.5);
margin: 20px 0;
position: relative;
transition: all 0.45s ease;
}
.timeline-card h3 {
font-size: 1.3rem;
color: #ffffff;
margin-bottom: 15px;
font-weight: 600;
}
.timeline-card p {
font-size: 0.95rem;
color: #999999;
line-height: 1.6;
}
.team-hierarchy {
display: flex;
flex-direction: column;
gap: 30px;
margin-top: 50px;
}
.team-row-founders {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.team-row-leaders {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.team-card-exec, .team-card-leader {
position: relative;
border-radius: 12px;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.03);
border: 1px solid #222222;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.team-card-exec {
height: 380px;
}
.team-card-leader {
height: 360px;
}
.team-card-exec img, .team-card-leader img {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 95%;
object-fit: contain;
object-position: bottom center;
z-index: 1;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.exec-info, .leader-info {
position: relative;
z-index: 3;
width: 100%;
background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.8) 40%, transparent 100%);
transform: translateY(10px);
transition: transform 0.4s ease;
}
.exec-info {
padding: 50px 30px 25px 30px;
}
.leader-info {
padding: 40px 20px 20px 20px;
}
.exec-info h3 {
font-size: 1.6rem;
color: #ffffff;
margin-bottom: 5px;
}
.leader-info h3 {
font-size: 1.1rem;
color: #ffffff;
margin-bottom: 5px;
}
.team-role {
display: block;
font-family: var(--mono-font);
font-size: 0.85rem;
color: #999999;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 1px;
}
.team-card-exec:hover img {
transform: scale(1.05);
}
.team-card-leader:hover img {
transform: scale(1.05);
}
.team-card-exec:hover .exec-info, .team-card-leader:hover .leader-info {
transform: translateY(0);
}
.team-linkedin {
display: inline-flex;
align-items: center;
margin-top: 8px;
}
.team-linkedin svg {
width: 20px;
height: 20px;
fill: #888888;
transition: fill 0.3s ease, transform 0.3s ease;
}
.team-linkedin:hover svg {
fill: #ffffff;
transform: translateY(-2px);
}
.team-card-leader:nth-child(4) img {
transform: scale(0.85);
transform-origin: bottom center;
}
.team-card-leader:nth-child(4):hover img {
transform: scale(0.88);
}
.team-card-leader:nth-child(1) img {
transform: scale(0.85) translateX(25px);
transform-origin: bottom center;
}
.team-card-leader:nth-child(1):hover img {
transform: scale(0.88) translateX(25px);
}
.team-card-leader:nth-child(2) img {
transform: scale(1.25);
transform-origin: bottom center;
}
.team-card-leader:nth-child(2):hover img {
transform: scale(1.3);
}
.partners-section {
padding-bottom: 20px !important;
margin-bottom: 0px !important;
padding-top: 20px !important;
margin-top: 0 !important;
max-width: 1000px;
margin: 30px auto 60px auto;
text-align: center;
padding: 0 20px;
}
.partners-heading {
font-size: 2.2rem;
color: #ffffff;
margin-bottom: 15px;
}
.partners-subtext {
font-size: 1.1rem;
color: #888888;
margin-bottom: 50px;
}
.partners-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 60px;
}
.partner-logo {
flex: 0 1 150px;
display: flex;
justify-content: center;
}
.partner-logo img {
max-width: 100%;
height: 35px;
width: auto;
object-fit: contain;
}
.partner-logo:nth-child(2) img {
transform: scale(1.15);
}
.about-section .section-title {
text-align: center;
border-bottom: none;
margin-bottom: 20px;
}
.philosophy-intro p {
font-size: 1.15rem;
color: #A0A0A0;
line-height: 1.8;
margin-bottom: 15px;
max-width: 750px;
margin-left: auto;
margin-right: auto;
}
.about-vision-mission {
width: 100%;
max-width: 900px;
margin: 40px auto 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
grid-column: 1 / -1;
gap: 30px;
}
.vm-card {
width: 100%;
text-align: center;
background: rgba(10, 15, 22, 0.6);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 40px 50px;
margin-bottom: 20px;
backdrop-filter: blur(10px);
border-radius: 12px;
transition: border-color 0.3s ease;
}
.vm-card:hover {
border-color: rgba(109, 137, 149, 0.5);
}
.vm-card p {
font-size: 1.4rem;
line-height: 1.5;
color: #ffffff;
font-weight: 600;
text-shadow: none;
margin: 0 auto;
max-width: 750px;
font-family: var(--heading-font);
text-align: center !important;
}
.vm-card h3 {
font-size: 1.6rem;
text-transform: none;
letter-spacing: normal;
color: #6d8995;
font-weight: 800;
margin-bottom: 15px;
font-family: var(--heading-font);
}
.team-section .section-container {
padding-bottom: 0 !important;
}
.contact-layout {
display: flex;
gap: 80px;
flex-wrap: wrap;
align-items: flex-start;
margin-top: 0;
}
.contact-info {
flex: 1;
min-width: 300px;
}
.contact-info h3 {
font-family: var(--mono-font);
font-size: 0.9rem;
color: #6d8995;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 10px;
}
.info-text {
font-size: 1.2rem;
color: #FFFFFF;
}
.mt-40 {
margin-top: 40px;
}
.contact-form-wrapper {
flex: 2;
min-width: 400px;
background-color: rgba(15, 15, 15, 0.8);
border: 1px solid #222222;
padding: 40px;
border-radius: 4px;
}
.lead-form {
display: flex;
flex-direction: column;
gap: 25px;
}
.form-row {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.form-group {
flex: 1;
min-width: 200px;
display: flex;
flex-direction: column;
gap: 8px;
}
.form-group label {
font-family: var(--mono-font);
font-size: 0.85rem;
color: #A0A0A0;
}
.form-group input, .form-group select, .form-group textarea {
background-color: #000000;
border: 1px solid #333333;
padding: 15px;
color: #FFFFFF;
font-size: 1rem;
border-radius: 2px;
transition: border-color 0.2s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
outline: none;
border-color: #6d8995;
}
.tech-carousel .swiper-slide-active .wall-panel {
background: linear-gradient(160deg,
rgba(255, 255, 255, 0.05) 0%,
rgba(255, 255, 255, 0.012) 40%,
rgba(109, 137, 149, 0.035) 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10),
inset 0 -1px 0 rgba(255, 255, 255, 0.03),
0 24px 60px rgba(0, 0, 0, 0.55);
}
.tech-carousel .swiper-slide-active .wall-panel::after {
border-color: rgba(255, 255, 255, 0.10);
}
#video-showcase {
padding-left: 24px !important;
padding-right: 24px !important;
}
#video-showcase .section-container {
max-width: 1100px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.section-title::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(109, 137, 149, 0.25), transparent);
animation: autmanEnergySweep 3s linear infinite;
}
.section-header-container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-bottom: 40px;
padding: 0 5%;
}
.shining-line {
flex-grow: 1;
height: 1px;
background: rgba(109, 137, 149, 0.35);
margin: 0 20px;
position: relative;
overflow: hidden;
box-shadow: 0 0 8px rgba(109, 137, 149, 0.2);
}
.shining-line::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
animation: autmanEnergySweep 3s linear infinite;
}
.section-header-container .section-title {
margin-bottom: 0 !important;
}
.contact-section .section-title {
min-height: 56px !important;
padding: 16px 48px !important;
font-size: 1.1rem !important;
letter-spacing: 6px !important;
box-shadow: 0 0 15px rgba(109, 137, 149, 0.2), inset 0 0 15px rgba(109, 137, 149, 0.15) !important;
}
.timeline-track::before {
content: '';
position: absolute;
top: var(--rail-y);
left: 0;
width: 100%;
height: 1px;
background: repeating-linear-gradient(90deg,
rgba(109,137,149,0.28) 0 6px,
transparent 6px 12px);
z-index: 0;
}
.timeline-track::after {
content: '';
position: absolute;
top: var(--rail-y);
left: 0;
width: var(--fill);
height: 1px;
background: linear-gradient(90deg,
rgba(109,137,149,0.35) 0%,
rgba(109,137,149,0.95) 88%,
#cfe6ee 100%);
box-shadow: 0 0 12px rgba(109,137,149,0.8);
transition: width 0.5s cubic-bezier(0.28,0.10,0.37,0.95);
z-index: 1;
}
.timeline-card.passed {
opacity: 0.72;
border-color: rgba(109, 137, 149, 0.35);
}
.timeline-card.passed .timeline-dot {
background: #6d8995 !important;
border-color: #6d8995;
}
.timeline-card.passed .timeline-year {
color: #9bb5c8;
}
.timeline-card.active {
opacity: 1;
transform: translateY(-8px);
background: rgba(11, 17, 24, 0.95);
border-color: rgba(109, 137, 149, 0.65);
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55),
0 0 26px rgba(109, 137, 149, 0.22),
inset 0 0 16px rgba(109, 137, 149, 0.08);
}
.timeline-card.active .timeline-year {
color: #cfe6ee;
font-weight: 700;
}
.timeline-card.active .timeline-dot {
background: #cfe6ee !important;
border-color: #cfe6ee;
box-shadow: 0 0 16px rgba(109, 137, 149, 0.9) !important;
}
.timeline-card.active .timeline-dot::after {
content: '';
position: absolute;
inset: -9px;
border: 1px solid rgba(109, 137, 149, 0.55);
border-radius: 50%;
animation: waypointLock 2s ease-out infinite;
}
/* ── keyframes & other at-rules ── */
@keyframes simpleFadeIn { to { opacity: 1; transform: translateY(0); } }
@keyframes autmanRadarGlow {
0% { box-shadow: 0 0 10px rgba(109, 137, 149, 0.1), inset 0 0 10px rgba(109, 137, 149, 0.1); }
100% { box-shadow: 0 0 25px rgba(109, 137, 149, 0.35), inset 0 0 20px rgba(109, 137, 149, 0.25); }
}
@keyframes autmanEnergySweep {
0% { left: -100%; }
100% { left: 100%; }
}
@keyframes waypointLock {
0% { transform: scale(0.7); opacity: 0; }
35% { opacity: 0.9; }
100% { transform: scale(1.5); opacity: 0; }
}
/* ── responsive ── */
@media (max-width: 1024px) {
.hero-title {
font-size: 3.4rem;
}
.hero-section .about-image {
left: 0 !important;
}
.tech-carousel .swiper-slide {
width: 42%;
}
.hero-section .hero-container {
max-width: 100% !important;
padding-left: 28px !important;
padding-right: 28px !important;
}
.hero-section .about-text {
padding-left: 0 !important;
padding-right: 0 !important;
}
.hero-section {
min-height: 0 !important;
height: auto !important;
padding-top: 130px !important;
padding-bottom: 70px !important;
}
.about-content {
align-items: center;
}
}
@media (max-width: 950px) {
.blog-grid {
flex-direction: column !important;
}
.contact-layout {
flex-direction: column !important;
gap: 40px !important;
}
.contact-info, .contact-form-wrapper {
min-width: 100% !important;
}
}
@media (min-width: 950px) {
.hero-subtitle {
margin-left: 0 !important;
}
}
@media (max-width: 900px) {
.mobile-menu-btn {
display: flex;
z-index: 9002 !important;
}
.nav-links {
position: fixed;
top: 0;
right: -100%;
width: 75%;
max-width: 300px;
height: 100vh;
background-color: #050505;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 30px;
box-shadow: -10px 0 30px rgba(0,0,0,0.8);
border-left: 1px solid #222222;
transition: right 0.4s cubic-bezier(0.25, 1, 0.5, 1);
z-index: 9001 !important;
}
.nav-links.active {
right: 0;
}
.mobile-menu-btn.active span:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}
.mobile-menu-btn.active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-btn.active span:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}
.tech-carousel .swiper-slide {
width: 62%;
}
.wall-panel {
width: 94%;
}
.left-arrow {
left: 10px;
}
.right-arrow {
right: 10px;
}
.team-row-founders {
grid-template-columns: 1fr;
}
.team-row-leaders {
grid-template-columns: 1fr 1fr;
}
.about-content {
gap: 32px;
}
.about-text, .about-image {
min-width: 100%;
flex: 1 1 100%;
}
.hero-image-wrap {
margin-left: 0;
justify-content: center;
}
.hero-section .about-image {
left: 0 !important;
justify-content: center !important;
}
.hero-subtitle-indent {
margin-left: 0;
}
.partners-section img,
.partners-section svg {
width: 180px !important;
margin: 0 20px !important;
}
.about-section p {
text-align: left !important;
}
.vm-card {
padding: 28px 22px;
}
.vm-card p {
font-size: 1.15rem !important;
line-height: 1.5 !important;
}
.philosophy-intro p {
text-align: left !important;
}
body.menu-open {
overflow: hidden;
}
.about-section p, .philosophy-intro p {
text-align: left !important;
}
}
@media (max-width: 768px) {
.hero-title {
font-size: 2.8rem !important;
line-height: 1.2 !important;
}
.section-title {
font-size: 2rem !important;
}
.carousel-text-container h3 {
font-size: 2.2rem !important;
}
.diagnostic-heading {
font-size: 1.8rem !important;
}
.vm-card p {
font-size: 1.2rem !important;
line-height: 1.4 !important;
}
.philosophy-hook {
font-size: 1.8rem !important;
}
.form-row {
flex-direction: column !important;
gap: 25px !important;
}
.modal-content {
padding: 25px !important;
}
.vm-pillar-container {
grid-template-columns: 1fr;
}
.hero-section {
padding-top: 120px;
}
.hero-buttons {
flex-wrap: wrap;
}
.tech-showcase {
margin-top: 60px;
}
.timeline-section {
margin-bottom: 60px;
}
.footer-container {
flex-direction: column;
gap: 40px;
}
.footer-backed {
margin-top: 24px !important;
}
.partners-grid {
gap: 30px;
}
.partners-section img,
.partners-section svg {
width: 150px !important;
margin: 0 12px !important;
}
.timeline-card {
width: 260px !important;
min-width: 260px !important;
padding: 22px;
}
}
@media (max-width: 600px) {
.team-row-leaders {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.tech-carousel .swiper-slide {
width: 86% !important;
height: auto !important;
}
.wall-panel {
width: 100%;
}
.tech-section-wrapper {
min-height: 0 !important;
}
.wall-floor {
height: 180px;
}
.nav-arrow {
width: 40px;
height: 40px;
font-size: 1rem;
}
.single-card-container {
max-width: 90%;
}
.carousel-text-container p {
font-size: 1.1rem;
}
.timeline-card {
width: 260px;
padding: 22px;
}
.contact-form-wrapper {
padding: 20px;
}
.sfc-logo {
height: 34px !important;
}
.footer-container {
flex-direction: column;
gap: 40px;
}
.partners-section img,
.partners-section svg {
width: 150px !important;
margin: 0 12px !important;
}
}
@media (max-width: 550px) {
.tech-carousel .swiper-slide {
width: 320px !important;
height: 300px !important;
}
.tech-section-wrapper {
min-height: 350px !important;
}
.contact-form-wrapper {
padding: 20px !important;
}
.footer-container {
flex-direction: column !important;
gap: 40px !important;
}
}
@media (max-width: 420px) {
.hero-title {
font-size: 2.2rem !important;
}
.section-title {
font-size: 1.7rem !important;
}
.carousel-text-container h3 {
font-size: 1.8rem !important;
}
.tech-carousel .swiper-slide {
width: 92% !important;
}
.partners-section img,
.partners-section svg {
width: 130px !important;
margin: 0 8px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.timeline-card, .timeline-card.active .timeline-dot::after {
transition: none;
animation: none;
}
}
/* ── contact form status message ── */
.form-status {
margin-top: 16px;
font-family: var(--mono-font);
font-size: 0.9rem;
min-height: 1.2em;
}
.form-status.is-success { color: #7fd1a8; }
.form-status.is-error { color: #e08a7a; }
/* ── Footer brand alignment (replaces the previous --brand-w block) ── */
.footer-brand {
--brand-w: auto;
}
.footer-logo {
width: auto;
height: 40px; /* back to the original sizing */
}
.footer-backed {
width: auto;
justify-content: flex-start;
gap: 12px;
}
/* ── Hero robot: blend into the background ── */
.hero-section .about-image {
position: relative;
}
/* Ambient glow behind the robot — implies a light source in the scene */
.hero-section .about-image::before {
content: '';
position: absolute;
top: 42%;
left: 52%;
width: 78%;
aspect-ratio: 1;
transform: translate(-50%, -50%);
background: radial-gradient(circle,
rgba(109, 137, 149, 0.20) 0%,
rgba(109, 137, 149, 0.09) 35%,
transparent 68%);
filter: blur(42px);
pointer-events: none;
z-index: 0;
}
.hero-section .about-image img {
position: relative;
z-index: 1;
/* Bottom edge dissolves instead of stopping at a hard cut */
-webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 99%);
mask-image: linear-gradient(to bottom, #000 76%, transparent 99%);
}
/* ── Footer: neutralise the desktop offset once columns stack ── */
@media (max-width: 900px) {
.footer-backed {
position: static;
top: auto;
margin-top: 32px; /* real spacing that the layout accounts for */
}
}
/* ═══════════════════════════════════════════════════════════════
SECTION TITLES — single source of truth. Nothing after this
should define .section-title in any section-specific context.
═══════════════════════════════════════════════════════════════ */
.section-title,
.about-section .section-title,
.team-section h2.section-title,
.careers-section .section-title,
.contact-section .section-title,
.contact-section h2.section-title,
.section-header-container .section-title {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: fit-content !important;
min-height: 52px !important;
padding: 14px 36px !important;
margin: 0 auto 40px auto !important;
font-family: var(--mono-font);
font-size: 1rem !important;
font-weight: 600 !important;
letter-spacing: 5px !important;
line-height: 1.4 !important;
text-transform: uppercase !important;
text-align: center !important;
color: #ffffff !important;
border: 1px solid rgba(109, 137, 149, 0.35) !important;
border-radius: 4px !important;
background: radial-gradient(circle,
rgba(109, 137, 149, 0.15) 0%,
rgba(11, 17, 24, 0.95) 80%) !important;
box-shadow: none !important;
position: relative !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* ═══════════════════════════════════════════════════════════════
FIXES — Thomas scale, header line alignment
═══════════════════════════════════════════════════════════════ */
/* ── 1. Thomas: his source photo is a tighter crop than the others ── */
.team-card-leader:nth-child(1) img {
transform: scale(0.66);
transform-origin: bottom center;
}
.team-card-leader:nth-child(1):hover img {
transform: scale(0.69);
}
/* ── 2. Header lines: equal length, vertically centred ── */
.section-header-container {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 24px;
padding: 0 5%;
}
.shining-line {
flex: 1 1 0 !important; /* was flex-grow:1 with no basis — unequal lengths */
margin: 0 !important;
align-self: center !important;
}
/* ═══════════════════════════════════════════════════════════════
FINAL FIXES — header lines + Thomas photo scale
Appended last: overrides everything above.
═══════════════════════════════════════════════════════════════ */
/* ---- Section header: equal lines, vertically centred --------------
Cause 1: `margin: 0 auto` on the title absorbed the flex free space,
so the two lines got unequal leftovers.
Cause 2: the title's 40px bottom margin made the flex container
taller than the box, so a centred line sat below its midline.
Fix: no auto side margins, no bottom margin on the title; move the
spacing onto the container itself. */
.section-header-container {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 24px !important;
width: 100%;
padding: 0 5% !important;
margin-bottom: 40px !important;
}
.section-header-container .section-title {
margin: 0 !important; /* kills the auto side margins AND the 40px */
flex: 0 0 auto !important; /* box sizes to its text, never flexes */
}
.section-header-container .shining-line {
flex: 1 1 0 !important; /* equal share of remaining space */
margin: 0 !important;
align-self: center !important;
min-width: 0;
}
/* ---- Thomas: source photo is a tighter crop than the other three ---
Same technique already used for Deepak (nth-child(4), scale .85). */
.team-row-leaders .team-card-leader:nth-child(1) img {
transform: scale(0.62) !important;
transform-origin: bottom center !important;
}
.team-row-leaders .team-card-leader:nth-child(1):hover img {
transform: scale(0.65) !important;
}
/* ═══════════════════════════════════════════════════════════════
FINAL FIXES — header lines + Thomas photo scale
Appended last: overrides everything above.
═══════════════════════════════════════════════════════════════ */
/* ---- Section header: equal lines, vertically centred -------------- */
.section-header-container {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 24px !important;
width: 100%;
padding: 0 5% !important;
margin-bottom: 40px !important;
}
/* Increased CSS specificity so it overrides ALL older section margin rules */
div.section-header-container > h2.section-title,
section .section-header-container .section-title {
margin: 0 !important; /* Kills the 40px bottom margin pulling the lines down */
flex: 0 0 auto !important; /* Box sizes to its text, never flexes */
}
.section-header-container .shining-line {
flex: 1 1 0 !important; /* Equal share of remaining space */
margin: 0 !important;
align-self: center !important;
min-width: 0;
}
/* ---- Thomas: source photo is a tighter crop than the other three --- */
.team-row-leaders .team-card-leader:nth-child(1) img {
/* Scale UP to 1.2 to fill the frame, push slightly down to anchor crop */
transform: scale(1.2) translateY(5px) !important;
transform-origin: bottom center !important;
}
.team-row-leaders .team-card-leader:nth-child(1):hover img {
transform: scale(1.25) translateY(5px) !important;
}
/* 1. Thomas (Slid down to match Kishan/Deepak) */
.team-row-leaders .team-card-leader:nth-child(1) img {
transform: scale(0.95) translateY(-15px) !important;
transform-origin: bottom center !important;
}
.team-row-leaders .team-card-leader:nth-child(1):hover img {
transform: scale(0.98) translateY(-15px) !important;
}
/* 2. Kishan (The Anchor: baseline size) */
.team-row-leaders .team-card-leader:nth-child(2) img {
transform: scale(1.15) translateY(0px) !important;
transform-origin: bottom center !important;
}
.team-row-leaders .team-card-leader:nth-child(2):hover img {
transform: scale(1.18) translateY(0px) !important;
}
/* 3. Martin (Slid down to match Kishan/Deepak) */
.team-row-leaders .team-card-leader:nth-child(3) img {
transform: scale(1.05) translateY(-5px) !important;
transform-origin: bottom center !important;
}
.team-row-leaders .team-card-leader:nth-child(3):hover img {
transform: scale(1.08) translateY(-5px) !important;
}
/* 4. Deepak (Needs sizing down and sliding up) */
.team-row-leaders .team-card-leader:nth-child(4) img {
transform: scale(0.90) translateY(-30px) !important;
transform-origin: bottom center !important;
}
.team-row-leaders .team-card-leader:nth-child(4):hover img {
transform: scale(0.93) translateY(-30px) !important;
}
/* ═══════════════════════════════════════════════════════════════
HERO SECTION: MAX SCALE, ALIGNMENT & VERTICAL CENTERING
═══════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
/* 1. Visual Centering: Push content down to balance the navbar overlap */
.hero-section {
padding-top: 150px !important;
padding-bottom: 30px !important;
display: flex !important;
align-items: center !important;
min-height: 100vh !important;
}
/* 2. Lock outer bounds exactly to Navbar (90% width) */
.hero-section .hero-container {
max-width: 90% !important;
margin: 0 auto !important;
padding: 0 !important;
width: 100% !important;
}
/* THE FIX: Force side-by-side layout and forbid wrapping */
.about-content {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important; /* Stops the robot from dropping down */
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
gap: 40px !important; /* Gap between text and robot */
}
/* 3. Text Box: Left Aligned to Logo */
.hero-section .about-text {
flex: 0 1 55% !important; /* Takes 55% of space, allowed to shrink */
margin: 0 !important;
padding: 0 !important;
}
.hero-title {
font-size: 5.2rem !important; /* Dialed down slightly so words don't break */
line-height: 1.05 !important;
margin-bottom: 25px !important;
}
.hero-subtitle {
margin-left: 0 !important; /* Kills the old inline 50px margin */
font-size: 1.6rem !important;
}
/* 4. Robot Box: Right Aligned to Contact */
.hero-section .about-image {
flex: 0 1 45% !important; /* Takes remaining 45% of space */
display: flex !important;
justify-content: flex-end !important; /* Snaps image perfectly to the right border */
margin: 0 !important; /* Kills the old inline -100px margin */
}
.hero-section .about-image img {
width: 100% !important;
max-width: 750px !important; /* Allows robot to grow safely */
height: auto !important;
object-fit: contain !important;
object-position: right center !important; /* Forces rightmost pixels to touch edge */
}
}
/* 3. Text Box: Left Aligned to Logo, Perfect Typesetting */
.hero-section .about-text {
flex: 0 1 55% !important;
max-width: 680px !important; /* Slightly wider to let the text breathe */
margin: 0 !important;
padding: 0 !important;
}
.hero-title {
font-size: 5.2rem !important;
line-height: 1.05 !important;
margin-bottom: 25px !important;
text-wrap: balance !important; /* MAGIC CSS: Automatically balances line lengths perfectly! */
}
/* Adds a futuristic teal glow to "Doesn't Follow Scripts." */
.hero-title .highlight {
text-shadow: 0 0 30px rgba(109, 137, 149, 0.4) !important;
}
.hero-subtitle {
margin-left: 0 !important;
font-size: 1.45rem !important; /* Slightly more refined size */
color: #A0A0A0 !important;
max-width: 100% !important; /* Stops the word "limitless." from wrapping alone */
letter-spacing: 0.5px !important;
margin-bottom: 40px !important; /* Creates breathing room above buttons */
}
.hero-section .hero-buttons {
gap: 24px !important; /* Spreads the buttons out slightly for better visual weight */
}
/* ═══════════════════════════════════════════════════════════════
CORRECTIONS — title spacing (padding, not margin), headline, hero
═══════════════════════════════════════════════════════════════ */
/* ---- 1. content-visibility was collapsing the title spacing.
Removed. Speed comes from lazy images + video preload instead. */
.team-section,
.partners-section,
.careers-section,
.blog-section,
.timeline-section {
content-visibility: visible !important;
contain-intrinsic-size: auto !important;
}
/* ---- 2. TITLE SPACING via padding — margins collapse, padding never does */
.section-header-container {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 130px !important;
padding-bottom: 110px !important;
box-sizing: content-box !important;
}
.contact-section .section-header-container {
padding-top: 0 !important;
padding-bottom: 40px !important;
}
/* ---- 3. ABOUT HEADLINE — centred, as originally intended */
.philosophy-hook {
text-align: center !important;
max-width: none !important;
margin-left: auto !important;
margin-right: auto !important;
line-height: 1.3 !important;
}
/* ---- 4. HERO — taller, reaching up behind the navbar */
.hero-section {
min-height: 100vh !important;
padding-top: 0 !important; /* was pushing content below the nav */
display: flex !important;
align-items: center !important;
}
.hero-section .about-image img,
.hero-image-wrap img {
max-height: 88vh !important;
height: auto;
width: auto;
max-width: 100%;
}
@media (max-width: 1024px) {
.section-header-container {
padding-top: 85px !important;
padding-bottom: 70px !important;
}
.hero-section {
min-height: auto !important;
padding-top: 120px !important;
padding-bottom: 60px !important;
}
.hero-section .about-image img,
.hero-image-wrap img { max-height: 55vh !important; }
}
/* ═══════════════════════════════════════════════════════════════
HERO VERTICAL CENTERING FIX
═══════════════════════════════════════════════════════════════ */
section#home.hero-section {
min-height: 100vh !important;
padding-top: 120px !important;
padding-bottom: 20px !important;
display: flex !important;
align-items: center !important;
}
/* ═══════════════════════════════════════════════════════════════
SECTION TITLES: PERFECT CENTER ALIGNMENT FIX
═══════════════════════════════════════════════════════════════ */
.section-header-container {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: 100% !important;
/* Strip away asymmetrical padding causing the right-shift */
padding-left: 0 !important;
padding-right: 0 !important;
gap: 30px !important; /* Cleanly spaces the lines from the box */
box-sizing: border-box !important;
}
.section-header-container .shining-line {
flex: 1 1 0% !important; /* Forces the browser to calculate both lines exactly equally */
width: 100% !important;
min-width: 20px !important;
margin: 0 !important; /* Kills old inherited margins */
}
div.section-header-container > h2.section-title,
section .section-header-container .section-title {
flex: 0 0 auto !important; /* Prevents the box from stretching */
margin-left: 0 !important;
margin-right: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════
CAROUSEL: REMOVE SIDE FADE OVERLAYS
═══════════════════════════════════════════════════════════════ */
.tech-section-wrapper::before,
.tech-section-wrapper::after {
display: none !important; /* Removes the black gradient boxes on the left and right */
}
/* ═══════════════════════════════════════════════════════════════
CAROUSEL: REMOVE DARKENING ON INACTIVE SLIDES
═══════════════════════════════════════════════════════════════ */
/* 1. Forces the side slide containers to full brightness and opacity */
.tech-carousel .swiper-slide:not(.swiper-slide-active),
.tech-carousel .swiper-slide.swiper-slide-prev,
.tech-carousel .swiper-slide.swiper-slide-next {
filter: brightness(1) !important;
opacity: 1 !important;
}
/* 2. Removes the dark filter and blur from the actual robot images */
.wall-panel img {
filter: brightness(1) blur(0px) !important;
}
/* ═══════════════════════════════════════════════════════════════
SECTION TITLES: THE ULTIMATE UNIFORM WIDTH OVERRIDE
═══════════════════════════════════════════════════════════════ */
/* Adding "html body" forces this rule to outrank almost everything else */
html body .section-header-container .section-title,
html body section .section-header-container h2.section-title,
html body div .section-header-container h2.section-title {
width: 280px !important;
min-width: 280px !important;
max-width: 280px !important; /* Stops it from expanding */
flex: 0 0 280px !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
justify-content: center !important;
text-align: center !important;
}
/* Mobile safety net, also upgraded for maximum priority */
@media (max-width: 450px) {
html body .section-header-container .section-title,
html body section .section-header-container h2.section-title,
html body div .section-header-container h2.section-title {
width: 220px !important;
min-width: 220px !important;
max-width: 220px !important;
flex: 0 0 220px !important;
}
}
/* ═══════════════════════════════════════════════════════════════
TECHNOLOGY SECTION WORDMARK LOGO FIX
═══════════════════════════════════════════════════════════════ */
.tech-wordmark {
display: flex !important;
justify-content: center !important;
align-items: center !important;
margin: 0 auto 12px auto !important;
line-height: 0 !important;
border: none !important;
}
.tech-wordmark img {
width: auto;
height: 108px;
clip-path: inset(0 0 46% 0); /* Cuts off 'ROBOTICS' from the bottom */
margin-bottom: -52px; /* Pulls subtitle up smoothly */
opacity: 0.95;
}
/* ═══════════════════════════════════════════════════════════════
CONTACT SECTION: HEADER ALIGNMENT FIX
═══════════════════════════════════════════════════════════════ */
/* 1. Reset the contact header container to standard centering */
.contact-info .section-header-container {
display: flex !important;
justify-content: center !important;
padding: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* 2. Force the 'Get In Touch' title box to center properly */
.contact-info .section-header-container .section-title {
margin: 0 auto !important;
}
/* 3. Ensure the left line fills the space evenly */
.contact-info .section-header-container .shining-line:first-child {
display: block !important;
flex-grow: 1 !important;
}
/* ═══════════════════════════════════════════════════════════════
PHILOSOPHY HOOK: CLEAN CENTERED TYPOGRAPHY
═══════════════════════════════════════════════════════════════ */
.philosophy-hook {
text-align: center !important;
font-size: 2.2rem !important;
line-height: 1.4 !important;
max-width: 800px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ╔═══════════════════════════════════════════════════════════════════╗
║ AUTMAN ROBOTICS — UNIFIED THEME (v5) ║
║ ║
║ Single source of truth for fonts, accent colour, page background ║
║ and the About / Careers / Contact sections. ║
║ ║
║ MUST BE THE LAST BLOCK IN styles.css — many legacy rules above ║
║ use !important, so this block wins on cascade order. ║
║ ║
║ CONTENTS ║
║ 1 Tokens (:root) — fonts + accent ║
║ 2 Global font application ║
║ 3 Seamless background ║
║ 4 Accent unification sweep (legacy teal → --accent-color) ║
║ 5 Section title badge ← letter-clipping fix ║
║ 6 "Our Journey" overlap fix ║
║ 7 About Us ║
║ 8 Careers ║
║ 9 Contact ║
║ 10 Focus states ║
║ 11 Responsive ║
║ 12 Motion preferences ║
║ ║
║ Animations touch transform / opacity / colour only — never ║
║ width, height, margin, padding, top or left. ║
╚═══════════════════════════════════════════════════════════════════╝ */
/* ═══════════════════════════════════════════════════════════════════
1. TOKENS — change these, the whole site follows
═══════════════════════════════════════════════════════════════════ */
:root {
/* ── ACCENT ──
#3b82f6 is the blue already used by the locked Hero and
Technology sections, so this value unifies rather than
introduces a new shade. */
--accent-color: #3b82f6;
/* Tints of --accent-color. Held as literal tokens because
colour-mix() is unreliable on older Safari. If you change
--accent-color, update these four to match. */
--accent-hover: #2f6fe0;
--accent-soft: #a8bce8;
--accent-line: rgba(59, 130, 246, .45);
--accent-glow: rgba(59, 130, 246, .16);
--accent-faint: rgba(59, 130, 246, .07);
/* ── FONTS ──
Swap the first family in each stack to re-skin the site. All
three are already loaded by the tags in index.html; if
you change one, update that link too. */
--main-font: 'Inter', Arial, Helvetica, sans-serif;
--heading-font: 'Plus Jakarta Sans', 'Inter', sans-serif;
--mono-font: 'JetBrains Mono', 'Courier New', monospace;
/* ── SURFACE ── */
--page-bg: #05070c;
--surface: rgba(255, 255, 255, .022);
--hairline: rgba(255, 255, 255, .09);
/* ── TYPE COLOUR ── */
--ink: #ffffff;
--slate: #98a3b4;
--slate-dim: #6b7585;
--ease: cubic-bezier(.22, 1, .36, 1);
}
/* ═══════════════════════════════════════════════════════════════════
2. GLOBAL FONT APPLICATION
Body copy takes --main-font, every heading takes --heading-font.
The locked Hero and Technology sections declare their own families
in hero.css / technology.css, which load after this file, so they
are unaffected either way.
═══════════════════════════════════════════════════════════════════ */
body,
html {
font-family: var(--main-font);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--heading-font);
}
input,
select,
textarea,
button {
font-family: var(--main-font);
}
/* ═══════════════════════════════════════════════════════════════════
3. SEAMLESS BACKGROUND
Painted once on . Every section is forced transparent so it
can never introduce a seam.
Safe for the locked sections: the Hero paints with gradient
background-IMAGES (a background-color reset does not touch those),
and .tech-flow's #05070c is identical to --page-bg, so clearing its
colour is a visual no-op.
═══════════════════════════════════════════════════════════════════ */
html {
background-color: var(--page-bg);
}
body,
html {
background-color: var(--page-bg) !important;
}
body {
background: var(--page-bg) !important;
background-attachment: scroll;
}
section {
background-color: transparent !important;
}
.footer {
background-color: transparent !important;
border-top: 1px solid var(--hairline);
margin-top: 0;
}
/* The one exception is a gradient IMAGE, not a colour: this bridges
the Hero's closing tone (#0a1526) into the page field and removes
the only hard edge on the page. */
#video-showcase {
background-image: linear-gradient(180deg, #0a1526 0%, var(--page-bg) 100%);
}
/* ═══════════════════════════════════════════════════════════════════
4. ACCENT UNIFICATION SWEEP
The original stylesheet used a slate-teal (#6d8995) across 48 rules.
Every still-live component is retargeted to var(--accent-color)
here, so the timeline, blog, footer, team and modal all match the
Hero and Technology blue.
Deliberately excluded: the carousel internals inside #technology
(.wall-floor, .nav-arrow, .single-card-container) — that section is
locked, so its own stylesheet keeps authority.
═══════════════════════════════════════════════════════════════════ */
/* ── Navigation ── */
.navbar .nav-links .nav-item:hover {
color: var(--accent-color);
}
/* ── Legacy buttons (kept in sync in case they are reused) ── */
.btn-primary {
border-color: var(--accent-color);
color: var(--accent-color);
}
.btn-primary:hover {
background-color: var(--accent-color);
border-color: var(--accent-color);
color: #ffffff;
}
.submit-btn {
border-color: var(--accent-color);
background-color: var(--accent-color);
color: #ffffff;
}
.submit-btn:hover {
background-color: var(--accent-hover);
border-color: var(--accent-hover);
}
/* ── Our Journey timeline ── */
.timeline-card {
border-color: var(--hairline);
}
.timeline-card:hover {
border-color: var(--accent-color);
}
.timeline-year {
color: var(--slate-dim);
}
.timeline-dot {
background-color: var(--slate-dim);
border-color: var(--page-bg);
}
.timeline-card.passed .timeline-dot {
background-color: var(--accent-line);
}
.timeline-card.passed .timeline-year {
color: var(--slate);
}
.timeline-card.active {
border-color: var(--accent-color);
}
.timeline-card.active .timeline-year {
color: var(--accent-color);
}
.timeline-card.active .timeline-dot {
background-color: var(--accent-color);
box-shadow: 0 0 0 4px var(--accent-glow);
}
.timeline-track::before {
background-image: repeating-linear-gradient(90deg,
var(--accent-faint) 0 6px,
transparent 6px 12px);
background-color: transparent;
}
.timeline-track::after {
background-image: linear-gradient(90deg,
var(--accent-line) 0%,
var(--accent-color) 88%,
var(--accent-soft) 100%);
background-color: transparent;
box-shadow: 0 0 12px var(--accent-glow);
}
/* ── Blog ── */
.blog-card:hover {
border-color: var(--accent-color);
}
.blog-date {
color: var(--accent-color);
}
.read-more-btn,
.blog-card a {
color: var(--accent-color);
}
.read-more-btn:hover,
.blog-card a:hover {
color: var(--accent-soft);
}
.slider-arrow:hover {
background-color: var(--accent-color);
}
/* ── Footer ── */
.footer-heading {
color: var(--accent-color);
}
.footer-link:hover {
color: var(--accent-color);
}
.social-icon:hover {
border-color: var(--accent-color);
}
.social-icon:hover svg {
fill: var(--accent-color);
}
.backed-text {
color: var(--slate-dim);
}
/* ── Team ── */
.team-card-exec::before,
.team-card-leader::before {
background-color: var(--accent-glow);
}
/* ── Blog modal ── */
.modal-content {
border-color: var(--accent-line);
}
.close-modal:hover {
color: var(--accent-color);
}
/* ═══════════════════════════════════════════════════════════════════
5. "OUR JOURNEY" OVERLAP FIX (moved section 4 to absolute end)
Three separate legacy rules were colliding here.
═══════════════════════════════════════════════════════════════════ */
.section-header-container {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin: 0 auto !important;
padding: clamp(70px, 9vw, 118px) 0 clamp(44px, 5.5vw, 70px) !important;
box-sizing: border-box !important;
overflow: visible !important;
}
.shining-line {
flex: 1 1 auto;
min-width: 0;
height: 1px;
margin: 0;
border: 0;
overflow: hidden;
background-color: transparent;
background-image: linear-gradient(to right,
transparent 0%,
var(--accent-faint) 40%,
var(--accent-line) 100%);
box-shadow: none;
}
.section-header-container .shining-line:last-child {
background-image: linear-gradient(to left,
transparent 0%,
var(--accent-faint) 40%,
var(--accent-line) 100%);
}
.shining-line::before,
.shining-line::after {
content: none !important;
animation: none !important;
}
/* ═══════════════════════════════════════════════════════════════════
6. "OUR JOURNEY" OVERLAP FIX
Three separate legacy rules were colliding here:
a) `.timeline-section { margin-top: -40px !important }` hauled the
whole timeline up over the Vision / Mission cards.
b) the global `section {...}` rule forces
`padding-bottom: 30px !important` on every section, so About
had almost no clearance underneath.
c) `.section-header-container { padding: 130px 0 110px !important }`
from an old corrections block made spacing arbitrary.
Clearance is now asserted from BOTH sides — About's bottom padding
and the timeline's own top padding — so neither rule can starve it.
No negative margins, no absolute positioning.
═══════════════════════════════════════════════════════════════════ */
.about-v3 {
padding-bottom: clamp(100px, 13vw, 170px) !important;
}
.timeline-section {
position: static !important;
margin-top: 0 !important;
margin-bottom: clamp(70px, 9vw, 120px) !important;
padding-top: clamp(40px, 6vw, 80px) !important;
padding-bottom: 0 !important;
}
.timeline-heading {
margin-top: 0 !important;
padding-top: 0 !important;
margin-bottom: clamp(36px, 4.5vw, 56px) !important;
font-family: var(--heading-font);
font-weight: 800;
font-size: clamp(1.7rem, 3.2vw, 2.5rem);
letter-spacing: -.03em;
color: var(--ink);
text-align: center;
}
/* ═══════════════════════════════════════════════════════════════════
7. ABOUT US (#about)
═══════════════════════════════════════════════════════════════════ */
.about-v3,
.careers-v3,
.contact-v3 {
position: relative;
z-index: 1;
}
.about-v3 .v3-wrap,
.careers-v3 .v3-wrap,
.contact-v3 .v3-wrap {
width: 90%;
max-width: 1120px;
margin: 0 auto;
}
/* Reveal stagger — offsets the existing .scroll-reveal keyframe only */
.about-v3 .av-card.scroll-reveal:nth-child(2) { animation-delay: .09s; }
.careers-v3 .cr-card.scroll-reveal { animation-delay: .09s; }
.contact-v3 .ct-form-wrap.scroll-reveal { animation-delay: .1s; }
.about-v3 .av-intro {
max-width: 900px;
margin: 0 auto clamp(64px, 8vw, 104px);
text-align: center;
}
.about-v3 .av-hook {
margin: 0 0 clamp(28px, 3.4vw, 44px);
font-family: var(--heading-font);
font-weight: 800;
font-size: clamp(1.7rem, 3.9vw, 3.1rem);
line-height: 1.16;
letter-spacing: -.032em;
color: var(--ink);
text-wrap: balance;
}
.about-v3 .av-hook__turn {
display: block;
color: var(--accent-color);
}
.about-v3 .av-text {
max-width: 68ch;
margin: 0 auto 18px;
font-family: var(--main-font);
font-size: clamp(1rem, 1.2vw, 1.15rem);
line-height: 1.72;
color: var(--slate);
text-wrap: pretty;
}
.about-v3 .av-text:last-child {
margin-bottom: 0;
}
/* ── Vision / Mission pillars ── */
.about-v3 .av-pillars {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(20px, 2.6vw, 30px);
margin: 0;
}
.about-v3 .av-card {
position: relative;
padding: clamp(30px, 3.6vw, 48px);
border: 1px solid var(--hairline);
border-radius: 4px;
background-color: var(--surface);
transition: transform .45s var(--ease),
border-color .45s var(--ease),
box-shadow .45s var(--ease);
will-change: transform;
}
.about-v3 .av-card:hover,
.about-v3 .av-card:focus-within {
transform: translate3d(0, -5px, 0);
border-color: var(--accent-color);
box-shadow: 0 0 0 1px var(--accent-glow),
0 18px 44px -26px rgba(0, 0, 0, .95);
}
.about-v3 .av-card__title {
margin: 0 0 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--hairline);
font-family: var(--mono-font);
font-weight: 500;
font-size: .84rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--accent-color);
}
.about-v3 .av-card__text {
margin: 0;
font-family: var(--main-font);
font-size: clamp(1rem, 1.2vw, 1.14rem);
line-height: 1.7;
color: var(--slate);
text-wrap: pretty;
}
/* ═══════════════════════════════════════════════════════════════════
8. CAREERS (#careers)
═══════════════════════════════════════════════════════════════════ */
.careers-v3 {
padding-bottom: clamp(90px, 11vw, 150px) !important;
}
.careers-v3 .cr-intro {
max-width: 820px;
margin: 0 auto clamp(44px, 5.5vw, 68px);
text-align: center;
}
.careers-v3 .cr-hook {
margin: 0 0 20px;
font-family: var(--heading-font);
font-weight: 800;
font-size: clamp(1.6rem, 3.3vw, 2.6rem);
line-height: 1.16;
letter-spacing: -.03em;
color: var(--ink);
}
.careers-v3 .cr-text {
max-width: 64ch;
margin: 0 auto;
font-family: var(--main-font);
font-size: clamp(1rem, 1.2vw, 1.14rem);
line-height: 1.72;
color: var(--slate);
text-wrap: pretty;
}
/* ── The existing listing, as a terminal card ── */
.careers-v3 .cr-card {
position: relative;
max-width: 780px;
margin: 0 auto;
padding: clamp(38px, 4.6vw, 60px) clamp(26px, 3.4vw, 48px);
text-align: center;
border: 1px solid var(--hairline);
border-top: 2px solid var(--accent-color);
border-radius: 4px;
background-color: var(--surface);
transition: transform .45s var(--ease),
border-color .45s var(--ease),
box-shadow .45s var(--ease);
will-change: transform;
}
.careers-v3 .cr-card:hover,
.careers-v3 .cr-card:focus-within {
transform: translate3d(0, -4px, 0);
border-color: var(--accent-color);
box-shadow: 0 0 0 1px var(--accent-glow),
0 18px 44px -26px rgba(0, 0, 0, .95);
}
.careers-v3 .cr-card__title {
margin: 0 0 16px;
font-family: var(--heading-font);
font-weight: 700;
font-size: clamp(1.25rem, 2vw, 1.7rem);
letter-spacing: -.02em;
color: var(--ink);
}
.careers-v3 .cr-card__text {
max-width: 52ch;
margin: 0 auto 32px;
font-family: var(--main-font);
font-size: clamp(.98rem, 1.15vw, 1.1rem);
line-height: 1.7;
color: var(--slate);
}
/* Same accent and geometry as the Hero CTA and the form submit */
.careers-v3 .cr-card__cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 34px;
font-family: var(--mono-font);
font-size: .95rem;
letter-spacing: .05em;
text-decoration: none;
color: #ffffff;
background-color: var(--accent-color);
border: 1px solid var(--accent-color);
border-radius: 3px;
transition: transform .3s var(--ease),
background-color .3s var(--ease),
border-color .3s var(--ease);
will-change: transform;
}
.careers-v3 .cr-card__cta:hover {
transform: translate3d(0, -2px, 0);
background-color: var(--accent-hover);
border-color: var(--accent-hover);
}
/* ═══════════════════════════════════════════════════════════════════
9. CONTACT (#contact)
═══════════════════════════════════════════════════════════════════ */
.contact-v3 {
padding-bottom: clamp(90px, 11vw, 150px) !important;
}
.contact-v3 .ct-layout {
display: grid;
grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
gap: clamp(36px, 5vw, 76px);
align-items: start;
}
/* ── Info column ── */
.contact-v3 .ct-info__title {
margin: 0 0 10px;
font-family: var(--mono-font);
font-weight: 500;
font-size: .76rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--accent-color);
}
.contact-v3 .ct-info__title + .ct-info__text {
margin-bottom: 34px;
}
.contact-v3 .ct-info__text {
margin: 0;
font-family: var(--heading-font);
font-weight: 600;
font-size: clamp(1.05rem, 1.4vw, 1.26rem);
line-height: 1.45;
letter-spacing: -.01em;
color: var(--ink);
}
.contact-v3 .ct-info__text:last-child {
margin-bottom: 0;
}
.contact-v3 .ct-info__link {
color: var(--ink);
text-decoration: none;
padding-bottom: 2px;
border-bottom: 1px solid var(--accent-line);
transition: color .3s var(--ease), border-color .3s var(--ease);
}
.contact-v3 .ct-info__link:hover {
color: var(--accent-soft);
border-color: var(--accent-color);
}
/* ── Form shell ── */
.contact-v3 .ct-form {
display: grid;
gap: 20px;
padding: clamp(26px, 3.2vw, 40px);
border: 1px solid var(--hairline);
border-radius: 4px;
background-color: rgba(255, 255, 255, .016);
}
/* Honeypot — out of flow and out of the accessibility tree */
.contact-v3 .ct-honeypot {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.contact-v3 .ct-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.contact-v3 .ct-field {
display: flex;
flex-direction: column;
gap: 9px;
margin: 0;
min-width: 0;
}
.contact-v3 .ct-label {
font-family: var(--mono-font);
font-size: .73rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--slate-dim);
}
/* ── Inputs ──
Focus fades a pre-declared box-shadow and never changes
border-width, so tabbing through the form cannot reflow it. */
.contact-v3 .ct-input {
width: 100%;
box-sizing: border-box;
padding: 14px 16px;
font-family: var(--main-font);
font-size: 1rem;
line-height: 1.4;
color: var(--ink);
background-color: rgba(0, 0, 0, .5);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 3px;
outline: none;
-webkit-appearance: none;
appearance: none;
transition: border-color .28s var(--ease),
box-shadow .28s var(--ease),
background-color .28s var(--ease);
}
.contact-v3 .ct-input::placeholder {
color: #5a6472;
}
.contact-v3 .ct-input:hover {
border-color: rgba(255, 255, 255, .22);
}
/* The illuminating focus state — same accent as everything else */
.contact-v3 .ct-input:focus,
.contact-v3 .ct-input:focus-visible {
border-color: var(--accent-color);
background-color: rgba(0, 0, 0, .62);
box-shadow: 0 0 0 3px var(--accent-glow);
}
/* Only flag invalid once the user has actually typed */
.contact-v3 .ct-input:not(:placeholder-shown):invalid {
border-color: rgba(239, 92, 92, .55);
}
.contact-v3 .ct-textarea {
min-height: 130px;
resize: vertical;
}
.contact-v3 .ct-select {
padding-right: 44px;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2398a3b4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 15px 15px;
}
.contact-v3 .ct-select option {
background-color: #0a0e16;
color: var(--ink);
}
/* ── Submit ──
Identical geometry and accent to the Hero CTA and Careers CTA.
Text-only by design: main.js swaps button.textContent to
"Sending..." mid-submit, which would destroy any child element. */
.contact-v3 .ct-submit {
justify-self: start;
padding: 16px 38px;
font-family: var(--mono-font);
font-size: 1rem;
letter-spacing: .02em;
color: #ffffff;
background-color: var(--accent-color);
border: 1px solid var(--accent-color);
border-radius: 3px;
cursor: pointer;
transition: transform .3s var(--ease),
background-color .3s var(--ease),
border-color .3s var(--ease),
opacity .3s var(--ease);
will-change: transform;
}
.contact-v3 .ct-submit:hover:not(:disabled) {
transform: translate3d(0, -2px, 0);
background-color: var(--accent-hover);
border-color: var(--accent-hover);
}
.contact-v3 .ct-submit:active:not(:disabled) {
transform: translate3d(0, 0, 0);
}
.contact-v3 .ct-submit:disabled {
opacity: .55;
cursor: progress;
}
/* Status line injected by main.js */
.contact-v3 .form-status {
margin: 0;
font-family: var(--mono-font);
font-size: .86rem;
line-height: 1.5;
color: var(--slate);
}
.contact-v3 .form-status.is-success { color: #4ade80; }
.contact-v3 .form-status.is-error { color: #f87171; }
/* ═══════════════════════════════════════════════════════════════════
10. FOCUS STATES — same accent, keyboard users only
═══════════════════════════════════════════════════════════════════ */
.about-v3 a:focus-visible,
.careers-v3 a:focus-visible,
.contact-v3 a:focus-visible,
.contact-v3 .ct-submit:focus-visible,
.timeline-card:focus-visible,
.footer-link:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 3px;
border-radius: 3px;
}
/* ═══════════════════════════════════════════════════════════════════
11. RESPONSIVE
═══════════════════════════════════════════════════════════════════ */
/* ── Tablet landscape ── */
@media (max-width: 1024px) {
/* Neutralises the legacy 85px/70px header override as well */
.section-header-container {
padding: clamp(60px, 8vw, 90px) 0 clamp(36px, 5vw, 56px) !important;
}
.contact-v3 .ct-layout {
grid-template-columns: 1fr;
gap: 40px;
}
}
/* ── Tablet portrait ── */
@media (max-width: 860px) {
.about-v3 .av-pillars {
grid-template-columns: 1fr;
}
/* Touch devices have no hover — a tap must not leave a card
stuck in its lifted transform */
.about-v3 .av-card:hover,
.careers-v3 .cr-card:hover {
transform: none;
}
}
/* ── Phone ──
The badge is allowed to wrap here. Tracking drops to .22em, so the
right-padding trim drops to match, keeping the optical centring
correct at the smaller value. */
@media (max-width: 640px) {
.about-v3 .v3-wrap,
.careers-v3 .v3-wrap,
.contact-v3 .v3-wrap {
width: 88%;
}
.section-title {
white-space: normal !important;
min-width: 0;
max-width: 78vw !important;
letter-spacing: .22em !important;
margin: 0 10px !important;
padding-left: 20px !important;
padding-right: calc(20px - .22em) !important;
}
.contact-v3 .ct-row {
grid-template-columns: 1fr;
}
.contact-v3 .ct-submit {
justify-self: stretch;
text-align: center;
}
/* 16px minimum stops iOS Safari zooming on focus */
.contact-v3 .ct-input {
font-size: 16px;
}
}
/* ── Small phone ── */
@media (max-width: 420px) {
.about-v3 .av-card,
.careers-v3 .cr-card {
padding-left: 22px;
padding-right: 22px;
}
.careers-v3 .cr-card__cta {
width: 100%;
}
}
/* ═══════════════════════════════════════════════════════════════════
12. MOTION PREFERENCES
═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
.about-v3 .scroll-reveal,
.careers-v3 .scroll-reveal,
.contact-v3 .scroll-reveal {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
.about-v3 .av-card,
.careers-v3 .cr-card,
.careers-v3 .cr-card__cta,
.contact-v3 .ct-input,
.contact-v3 .ct-submit {
transition-duration: .01ms;
}
.about-v3 .av-card:hover,
.careers-v3 .cr-card:hover,
.careers-v3 .cr-card__cta:hover,
.contact-v3 .ct-submit:hover:not(:disabled) {
transform: none;
}
}
/* ═══════════════════════════ END v5 BLOCK ═══════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
SECTION TITLE BADGE OVERRIDE — moved to absolute end for cascade win
This rule must sit after every other rule so overflow: visible wins
over the legacy overflow: hidden !important elsewhere in the file.
═══════════════════════════════════════════════════════════════════ */
.section-title {
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
min-width: -webkit-max-content;
min-width: max-content;
min-height: 0 !important;
overflow: visible !important;
text-overflow: clip !important;
white-space: nowrap !important;
position: relative !important;
z-index: 1;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
margin: 0 clamp(16px, 2.6vw, 32px) !important;
padding-top: clamp(12px, 1.5vw, 16px) !important;
padding-bottom: clamp(12px, 1.5vw, 16px) !important;
padding-left: clamp(26px, 3.4vw, 46px) !important;
padding-right: calc(clamp(26px, 3.4vw, 46px) - .3em) !important;
font-family: var(--mono-font) !important;
font-size: clamp(.7rem, 1vw, .82rem) !important;
font-weight: 500 !important;
line-height: 1.25 !important;
letter-spacing: .3em !important;
text-transform: uppercase !important;
text-align: center !important;
text-indent: 0 !important;
color: var(--accent-soft) !important;
background-color: rgba(9, 13, 21, .9) !important;
background-image: none !important;
border: 1px solid var(--accent-line) !important;
border-radius: 2px !important;
box-shadow:
inset 0 0 24px var(--accent-faint),
0 10px 30px -18px rgba(0, 0, 0, .95) !important;
animation: none !important;
}
.section-title::before,
.section-title::after {
content: '';
position: absolute;
width: 7px;
height: 7px;
background: none;
pointer-events: none;
animation: none !important;
}
.section-title::before {
top: -1px;
left: -1px;
border-top: 1px solid var(--accent-color);
border-left: 1px solid var(--accent-color);
}
.section-title::after {
bottom: -1px;
right: -1px;
border-bottom: 1px solid var(--accent-color);
border-right: 1px solid var(--accent-color);
}
.section-title.align-left {
margin: 0 0 40px 0 !important;
}
@media (max-width: 640px) {
.section-title {
white-space: normal !important;
min-width: 0;
max-width: 78vw !important;
letter-spacing: .22em !important;
margin: 0 10px !important;
padding-left: 20px !important;
padding-right: calc(20px - .22em) !important;
}
}
/* ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
STAGGERED SCROLL REVEAL + SOLID FOOTER
Must stay at the end of the file. Everything below is gated behind
the `.js-reveal` class, which main.js adds to only after the
reveal module has successfully initialised.
If JS fails, is blocked, IntersectionObserver is unsupported, or the
user prefers reduced motion, `.js-reveal` never appears — none of
these rules match, and the original .scroll-reveal keyframe fade
plays untouched. That is the graceful degradation path.
═══════════════════════════════════════════════════════════════════ */
/* Hand control from the keyframe to our transition, but ONLY when JS
is driving. Without this the two would fire at once. */
.js-reveal .sr-group,
.js-reveal .sr-child {
animation: none !important;
opacity: 1;
transform: none;
}
/* Resting state: down and invisible. transform + opacity only, so
every reveal is composited and never triggers layout. */
.js-reveal .sr-child {
opacity: 0;
transform: translate3d(0, 18px, 0);
transition: opacity .7s cubic-bezier(.22, 1, .36, 1),
transform .7s cubic-bezier(.22, 1, .36, 1);
/* Per-element offset written by main.js — 0ms, 80ms, 160ms, ... */
transition-delay: var(--sr-delay, 0ms);
}
/* Revealed state. The second selector covers a group with no element
children, where the group itself is the animated target. */
.js-reveal .sr-group.sr-in .sr-child,
.js-reveal .sr-group.sr-in.sr-child {
opacity: 1;
transform: translate3d(0, 0, 0);
}
/* Belt and braces: if a group somehow never receives .sr-in (observer
dropped, element detached), show its children after 3s rather than
leaving content permanently invisible. */
@media (prefers-reduced-motion: no-preference) {
.js-reveal .sr-child {
animation: srFailsafe 0s linear 3s forwards !important;
}
.js-reveal .sr-group.sr-in .sr-child,
.js-reveal .sr-group.sr-in.sr-child {
animation: none !important;
}
}
@keyframes srFailsafe {
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
/* ═══════════════════════════════════════════════════════════════════
FOOTER — solid black anchor
Overrides the global transparent-section rule for this element only.
═══════════════════════════════════════════════════════════════════ */
footer,
.footer {
background-color: #000000 !important;
background-image: none !important;
border-top: 1px solid var(--accent-line);
}
/* ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
EMERGENCY OVERRIDE: CLIPPED SECTION TITLE FIX
═══════════════════════════════════════════════════════════════ */
html body .section-header-container .section-title,
html body section .section-header-container h2.section-title,
html body div .section-header-container h2.section-title {
width: max-content !important;
min-width: 280px !important;
max-width: 90vw !important;
flex: 0 0 auto !important;
padding-left: 36px !important;
padding-right: calc(36px - 0.3em) !important;
box-sizing: border-box !important;
justify-content: center !important;
text-align: center !important;
overflow: visible !important;
white-space: nowrap !important;
}
/* Mobile safety net */
@media (max-width: 560px) {
html body .section-header-container .section-title,
html body section .section-header-container h2.section-title,
html body div .section-header-container h2.section-title {
width: auto !important;
min-width: 220px !important;
padding-left: 20px !important;
padding-right: calc(20px - 0.22em) !important;
white-space: normal !important;
}
}
/* ═══════════════════════════════════════════════════════════════
TIMELINE OVERRIDE: SCROLL HINT & GAP FIX
═══════════════════════════════════════════════════════════════ */
/* 1. Add a subtle, animated scroll hint below the title */
html body .timeline-heading::after {
content: '← SWIPE TO EXPLORE →';
display: block;
font-family: var(--mono-font);
font-size: 0.75rem;
color: var(--accent-color, #3b82f6);
margin-top: 16px;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 500;
animation: slideHint 2s ease-in-out infinite alternate;
}
@keyframes slideHint {
0% { transform: translateX(-4px); opacity: 0.4; }
100% { transform: translateX(4px); opacity: 1; }
}
/* 2. Destroy the massive empty gap above the cards */
html body .timeline-heading {
margin-bottom: 25px !important;
}
/* 3. Shift the start position slightly left so the 2nd card peeks in */
html body .timeline-container {
padding-top: 0 !important;
padding-left: max(5vw, 35vw) !important;
scroll-padding-left: max(5vw, 35vw) !important;
}
/* ═══════════════════════════════════════════════════════════════
EMERGENCY OVERRIDE: ABOUT & TIMELINE GAP FIX
═══════════════════════════════════════════════════════════════ */
/* 1. Pull the bottom of the About section up */
html body .about-v3 {
padding-bottom: 50px !important;
}
/* 2. Pull the top of the Timeline section up */
html body .timeline-section {
padding-top: 20px !important;
margin-top: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════
EMERGENCY OVERRIDE: TIMELINE & TEAM GAP FIX
═══════════════════════════════════════════════════════════════ */
/* 1. Kill the massive bottom margin on the timeline */
html body .timeline-section {
margin-bottom: 20px !important;
}
/* 2. Pull the Team section and its header up */
html body .team-section {
margin-top: 0 !important;
padding-top: 20px !important;
}
html body .team-section .section-header-container {
padding-top: 20px !important; /* Overrides the global 130px top padding just for the Team section */
}
/* ═══════════════════════════════════════════════════════════════
EMERGENCY OVERRIDE: TECHNOLOGY & ABOUT GAP FIX
═══════════════════════════════════════════════════════════════ */
/* 1. Reduce the bottom padding on the closing Technology block */
html body .tech-flow {
padding-bottom: 0 !important;
}
html body .tech-flow .tf-close {
padding-bottom: 20px !important;
}
/* 2. Pull the About Us section and its header container up */
html body .about-v3 {
padding-top: 20px !important;
margin-top: 0 !important;
}
html body .about-v3 .section-header-container {
padding-top: 40px !important; /* Overrides the global 130px top padding just for About Us */
}
/* ═══════════════════════════════════════════════════════════════
EMERGENCY OVERRIDE: TECHNOLOGY HEADER GAP FIX (V2)
═══════════════════════════════════════════════════════════════ */
/* 1. Crush the bottom padding/margin of the Technology title badge */
html body #technology .section-header-container {
padding-bottom: 0 !important;
margin-bottom: 90px !important;
}
/* 2. Crush the hidden responsive top padding pushing the text down */
html body #technology .tf-hook {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════
EMERGENCY OVERRIDE: NARRATIVE FLOW ALIGNMENT
═══════════════════════════════════════════════════════════════ */
html body #technology .tf-bridge {
text-align: center !important;
display: flex;
flex-direction: column;
align-items: center;
}
html body #technology .tf-bridge__title {
margin-left: auto !important;
margin-right: auto !important;
}
/* ═══════════════════════════════════════════════════════════════
EMERGENCY OVERRIDE: TIMELINE CARD CLIPPING FIX
═══════════════════════════════════════════════════════════════ */
html body .timeline-container {
padding-top: 20px !important; /* Restores just enough space for the active card to float up without being clipped */
}
/* ═══════════════════════════════════════════════════════════════
EMERGENCY OVERRIDE: BLUE HEADLINE HIGHLIGHT
═══════════════════════════════════════════════════════════════ */
html body #technology .tf-bridge__next {
color: #3b82f6 !important; /* Applies the Autman Blue */
}
/* ═══════════════════════════════════════════════════════════════
EMERGENCY OVERRIDE: WHITE HEADLINE FIX
═══════════════════════════════════════════════════════════════ */
html body #technology .tf-bridge__title {
color: #ffffff !important;
}
/* ═══════════════════════════════════════════════════════════════
EMERGENCY OVERRIDE: BRIDGE TO SHOWCASE SPACING FIX
═══════════════════════════════════════════════════════════════ */
html body #technology .tf-showcase {
padding-top: 100px !important; /* Injects breathing room above the ONE INTELLIGENCE headline */
}
/* ═══════════════════════════════════════════════════════════════
EMERGENCY OVERRIDE: ALL SECTION BADGES BLUE OUTLINE
═══════════════════════════════════════════════════════════════ */
html body .section-title,
html body .section-header-container .section-title {
background-color: rgba(9, 13, 21, 0.9) !important; /* Keeps the inside dark */
background-image: none !important; /* Removes any default gradients */
border: 1px solid #3b82f6 !important; /* Adds the crisp blue border */
color: #ffffff !important; /* Keeps text bright white */
box-shadow: 0 0 15px rgba(59, 130, 246, 0.25), inset 0 0 10px rgba(59, 130, 246, 0.15) !important; /* Subtle blue glow */
}
/* ═══════════════════════════════════════════════════════════════
EMERGENCY OVERRIDE: CENTER DIAGNOSTIC BLOCK
═══════════════════════════════════════════════════════════════ */
/* 1. Center the headline and main wrapper */
html body #technology .tf-hook,
html body #technology .diagnostic-section {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
display: flex;
flex-direction: column;
align-items: center;
}
/* 2. Center the checklist group, but keep the checkboxes themselves neatly aligned to the left */
html body #technology .diagnostic-list,
html body #technology .tf-hook ul {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
html body #technology .diagnostic-list > *,
html body #technology .tf-hook ul > * {
width: 100%;
max-width: 650px; /* Keeps the boxes constrained nicely */
text-align: left !important;
}
/* 3. Center the closing statement and remove the floating left border */
html body #technology .tf-close {
text-align: center !important;
justify-content: center !important;
border-left: none !important;
padding-left: 0 !important;
width: 100%;
}
/* ═══════════════════════════════════════════════════════════════
EMERGENCY OVERRIDE: PARTNERS & CAREERS GAP FIX (V2)
═══════════════════════════════════════════════════════════════ */
/* 1. Keep the bottom of Partners clean */
html body .partners-section,
html body .industrial-partners,
html body #partners {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* 2. Dial the top padding of Careers back up to a comfortable gap */
html body #careers,
html body .careers-section {
padding-top: 80px !important; /* Increased from 20px to give it proper breathing room */
margin-top: 0 !important;
}
html body #careers .section-header-container,
html body .careers-section .section-header-container {
padding-top: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════
EMERGENCY OVERRIDE: CENTER CONTACT SUBMIT BUTTON
═══════════════════════════════════════════════════════════════ */
html body #contact form button,
html body .contact-form button,
html body .contact-section button[type="submit"] {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ═══════════ HERO — hero.css ═══════════ */
/* ═══════════════════════════════════════════════════════════
AUTMAN Robotics — hero.css
Landing hero section. Load AFTER styles.css.
SCOPE CONTRACT
Every selector in this file is prefixed with .hero-lp, except
the small navbar block at the top, which is limited to
.navbar .nav-links and the new .nav-cta class. Nothing here
touches body, html, global resets, or shared container rules.
Delete this file + revert index.html to undo cleanly.
═══════════════════════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────
NAVBAR — CONTACT button + tighter link scale
This is the only block outside .hero-lp. If you'd rather keep
the original oversized nav links, delete the .nav-item rule
below; the CONTACT button works independently of it.
─────────────────────────────────────────────────────────── */
.navbar .nav-container {
padding: 18px 0;
}
.navbar .nav-links .nav-item {
font-family: var(--mono-font);
font-size: 1.02rem;
letter-spacing: .005em;
}
/* Active link — matches the underline in the mockup.
Overrides only the colour of the existing .active rule. */
.navbar .nav-links .nav-item.active {
border-bottom-color: #3b82f6;
}
/* CONTACT — outlined button, not a text link */
.navbar .nav-links .nav-cta {
padding: 11px 26px;
border: 1px solid rgba(255, 255, 255, .28);
border-radius: 3px;
color: #ffffff;
font-family: var(--mono-font);
font-size: .82rem;
letter-spacing: .13em;
text-transform: uppercase;
transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.navbar .nav-links .nav-cta:hover {
color: #ffffff;
border-color: #3b82f6;
background-color: rgba(59, 130, 246, .12);
}
/* ═══════════════════════════════════════════════════════════
HERO
═══════════════════════════════════════════════════════════ */
.hero-lp {
/* Palette lives here, not in :root — one place to retune,
zero chance of leaking into other sections. */
--h-bg-top: #030810;
--h-bg-bottom: #0b1628;
--h-blue: #3b82f6;
--h-blue-soft: #a8bce8;
--h-ink: #ffffff;
--h-mute: #97a3b6;
--h-label: #7c8798;
--h-hair: rgba(255, 255, 255, .1);
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100svh;
/* Top pad clears the fixed navbar. Bottom pad is 0 by design —
the specs bar is the last thing in the box. */
padding: 104px 0 0;
margin: 0;
overflow: hidden;
background:
radial-gradient(85% 70% at 72% 45%, rgba(40, 90, 180, .18) 0%, transparent 60%),
radial-gradient(50% 50% at 65% 55%, rgba(59, 130, 246, .08) 0%, transparent 70%),
linear-gradient(180deg, var(--h-bg-top) 0%, var(--h-bg-bottom) 100%);
}
/* Dot matrix. Decorative layer, sits behind everything. */
.hero-lp__ambient {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px);
background-size: 34px 34px;
/* Fade the grid out toward the edges so it reads as atmosphere */
-webkit-mask-image: radial-gradient(110% 90% at 50% 40%, #000 30%, transparent 100%);
mask-image: radial-gradient(110% 90% at 50% 40%, #000 30%, transparent 100%);
opacity: .55;
}
/* Body takes the free space; specs bar gets pushed to the edge */
.hero-lp__body {
flex: 1 1 auto;
display: flex;
align-items: center;
width: 100%;
min-height: 0;
}
.hero-lp__inner {
width: 90%;
max-width: 1500px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
align-items: center;
gap: 40px;
}
/* ── Copy column ── */
.hero-lp__copy {
position: relative;
z-index: 2;
}
.hero-lp__title {
margin: 0 0 26px;
font-family: var(--heading-font);
font-weight: 800;
font-size: clamp(2.35rem, 4.9vw, 4.6rem);
line-height: 1.06;
letter-spacing: -.035em;
color: var(--h-ink);
text-wrap: balance;
}
.hero-lp__accent-soft { color: var(--h-blue-soft); }
.hero-lp__accent { color: var(--h-blue); }
.hero-lp__sub {
margin: 0 0 40px;
max-width: 40ch;
font-family: var(--main-font);
font-size: clamp(1rem, 1.12vw, 1.16rem);
line-height: 1.62;
color: var(--h-mute);
}
/* ── CTAs ── */
.hero-lp__actions {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.hero-lp__cta,
.hero-lp__cta-alt {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--mono-font);
font-size: 1rem;
letter-spacing: .02em;
text-decoration: none;
padding: 16px 32px;
border-radius: 3px;
transition: background-color .2s ease, border-color .2s ease,
color .2s ease, transform .2s ease;
}
.hero-lp__cta {
color: #ffffff;
background-color: var(--h-blue);
border: 1px solid var(--h-blue);
}
.hero-lp__cta:hover {
background-color: #2f6fe0;
border-color: #2f6fe0;
transform: translateY(-1px);
}
.hero-lp__cta-alt {
color: #ffffff;
background-color: transparent;
border: 1px solid rgba(255, 255, 255, .26);
}
.hero-lp__cta-alt:hover {
border-color: #ffffff;
background-color: rgba(255, 255, 255, .06);
}
/* ── Visual column ── */
.hero-lp__visual {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-width: 0;
}
/* MOUNT POINT for the 3D render.
Swap .hero-background__render for a