/* ========================================================================= TAURO STEELS — COMPLETE WEBSITE CSS Premium CNC / Precision Engineering Design ========================================================================= */ /* ========================================================================= 01. DESIGN SYSTEM ========================================================================= */ :root { /* Main Colors */ --ink: #14181c; --navy: #16232e; --navy-2: #1d3140; /* Steel */ --steel: #5b6670; --steel-light: #9aa4ac; /* Light Sections */ --paper: #f3f4f5; --paper-2: #e8eaec; /* White */ --white: #ffffff; /* Brand Accent */ --rust: #a8471f; --rust-light: #c25a2c; --rust-dark: #7c3417; /* Lines */ --line: rgba(20, 24, 28, 0.10); --line-light: rgba(255, 255, 255, 0.14); /* Fonts */ --font-display: "Oswald", "Arial Narrow", sans-serif; --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", "Courier New", monospace; /* Layout */ --container: 1280px; --radius: 6px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ========================================================================= 02. RESET ========================================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--white); line-height: 1.6; font-size: 16px; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; } h1, h2, h3, h4, h5, h6, .display { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; font-weight: 600; line-height: 1.08; color: var(--ink); margin: 0; } p { margin: 0; } .container-xl { max-width: var(--container); margin: 0 auto; padding: 0 24px; } ::selection { background: var(--rust); color: var(--white); } :focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; } /* ========================================================================= 03. GENERAL SECTIONS ========================================================================= */ section { position: relative; } .section-pad { padding: 100px 0; } @media (max-width: 767px) { .section-pad { padding: 64px 0; } } .bg-white { background: var(--white); } .bg-paper { background: var(--paper); } .bg-navy { background: var(--navy); color: #cdd6dc; } .bg-navy h2, .bg-navy h3, .bg-navy h4 { color: var(--white); } .bg-ink { background: var(--ink); color: #cdd6dc; } /* ========================================================================= 04. EYEBROW / SECTION LABEL ========================================================================= */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rust); margin-bottom: 14px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--rust); display: inline-block; } .eyebrow.on-dark { color: #e8926a; } .section-head { max-width: 640px; margin-bottom: 56px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head h2 { font-size: clamp(30px, 3.6vw, 46px); margin-bottom: 14px; } .section-head .sub { font-size: 17px; color: var(--steel); font-weight: 500; } /* ========================================================================= 05. BUTTONS ========================================================================= */ .btn { border-radius: 2px; font-family: var(--font-body); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; font-size: 13.5px; padding: 14px 30px; border: 1px solid transparent; transition: all 0.3s var(--ease); display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; } .btn-rust { background: var(--rust); color: var(--white); border-color: var(--rust); } .btn-rust:hover { background: var(--rust-dark); border-color: var(--rust-dark); color: var(--white); transform: translateY(-2px); } .btn-outline-light { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.5); } .btn-outline-light:hover { background: var(--white); color: var(--ink); border-color: var(--white); transform: translateY(-2px); } .btn-outline-dark { background: transparent; color: var(--ink); border-color: var(--ink); } .btn-outline-dark:hover { background: var(--ink); color: var(--white); transform: translateY(-2px); } .btn-ghost-rust { background: transparent; color: var(--rust); border-color: var(--rust); } .btn-ghost-rust:hover { background: var(--rust); color: var(--white); } /* ========================================================================= 06. NAVBAR ========================================================================= */ .tauro-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 22px 0; transition: all 0.35s var(--ease); background: transparent; } .tauro-nav.is-scrolled { padding: 12px 0; background: rgba(20, 24, 28, 0.97); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); backdrop-filter: blur(8px); } .tauro-nav .nav-inner { display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); text-transform: uppercase; } .brand-mark { width: 42px; height: 42px; border: 2px solid var(--rust); display: flex; align-items: center; justify-content: center; color: var(--rust); font-weight: 700; font-size: 17px; flex-shrink: 0; position: relative; } .brand-mark::after { content: ""; position: absolute; inset: -6px; border: 1px solid rgba(168, 71, 31, 0.35); } .brand-name { color: var(--white); font-size: 21px; font-weight: 600; letter-spacing: 0.03em; line-height: 1.1; } .brand-name small { display: block; font-family: var(--font-mono); text-transform: uppercase; font-size: 9.5px; letter-spacing: 0.22em; color: var(--steel-light); font-weight: 500; margin-top: 3px; } .nav-links { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; } .nav-links li { position: relative; } .nav-links a:not(.btn) { display: block; padding: 10px 16px; color: rgba(255, 255, 255, 0.88); font-family: var(--font-body); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.03em; position: relative; } .nav-links a:not(.btn)::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; background: var(--rust); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); } .nav-links a:not(.btn):hover::after, .nav-links a.active::after { transform: scaleX(1); } .nav-links a.active { color: var(--white); } .nav-cta { margin-left: 12px; } .nav-toggle { display: none; background: none; border: 1px solid rgba(255, 255, 255, 0.3); width: 44px; height: 44px; color: var(--white); font-size: 20px; } @media (max-width: 991px) { .nav-toggle { display: flex; align-items: center; justify-content: center; } .nav-links { position: fixed; top: 0; right: 0; height: 100vh; width: min(320px, 84vw); background: var(--ink); flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 100px 28px 40px; gap: 4px; transform: translateX(100%); transition: transform 0.4s var(--ease); z-index: 1001; } .nav-links.is-open { transform: translateX(0); box-shadow: -20px 0 60px rgba(0, 0, 0, 0.4); } .nav-links a:not(.btn) { padding: 16px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .nav-cta { margin-left: 0; margin-top: 14px; } .nav-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .nav-overlay.is-open { opacity: 1; pointer-events: auto; } } /* ========================================================================= 07. PAGE BANNER ========================================================================= */ .page-banner { padding: 200px 0 90px; background: var(--ink); color: var(--white); position: relative; overflow: hidden; background-size: cover; background-position: center; } .page-banner .overlay { position: absolute; inset: 0; background: linear-gradient( 100deg, rgba(20, 24, 28, 0.94) 20%, rgba(20, 24, 28, 0.72) 100% ); } .page-banner .inner { position: relative; z-index: 2; } .page-banner h1 { font-size: clamp(34px, 5vw, 58px); color: var(--white); } .breadcrumb { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 18px; color: var(--steel-light); } .breadcrumb a { color: var(--steel-light); } .breadcrumb a:hover { color: var(--rust); } .breadcrumb .sep { margin: 0 8px; color: var(--rust); } /* ========================================================================= 08. HERO ========================================================================= */ .hero { min-height: 100vh; display: flex; align-items: center; position: relative; color: var(--white); background-size: cover; background-position: center; background-repeat: no-repeat; } .hero .hero-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(15, 18, 21, 0.55), rgba(12, 15, 17, 0.90) ); } .hero .container-xl { position: relative; z-index: 2; padding-top: 80px; } .hero-label { font-family: var(--font-mono); letter-spacing: 0.24em; text-transform: uppercase; font-size: 13px; color: var(--rust-light); margin-bottom: 22px; display: flex; align-items: center; gap: 12px; } .hero-label::before { content: ""; width: 34px; height: 1px; background: var(--rust-light); } .hero h1 { font-size: clamp(42px, 6.6vw, 84px); color: var(--white); max-width: 900px; } .hero p.lead { font-size: 19px; max-width: 560px; margin: 26px 0 40px; color: rgba(255, 255, 255, 0.82); font-weight: 500; } .hero-actions { display: flex; gap: 18px; flex-wrap: wrap; } .hero-scroll { position: absolute; bottom: 34px; left: 24px; z-index: 2; display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, 0.65); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; } .hero-scroll .line { width: 1px; height: 44px; background: rgba(255, 255, 255, 0.35); position: relative; overflow: hidden; } .hero-scroll .line::after { content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: var(--rust); animation: scrollLine 2.2s ease-in-out infinite; } @keyframes scrollLine { 0% { top: -100%; } 60% { top: 100%; } 100% { top: 100%; } } /* ========================================================================= 09. SCROLL REVEAL ========================================================================= */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } /* ========================================================================= 10. SIGNATURE TAG FRAME ========================================================================= */ .tag-frame { position: relative; } .tag-frame::before, .tag-frame::after { content: ""; position: absolute; width: 18px; height: 18px; border-color: var(--rust); border-style: solid; opacity: 0; transition: opacity 0.35s var(--ease), width 0.35s var(--ease), height 0.35s var(--ease); } .tag-frame::before { top: 10px; left: 10px; border-width: 2px 0 0 2px; } .tag-frame::after { bottom: 10px; right: 10px; border-width: 0 2px 2px 0; } .tag-frame:hover::before, .tag-frame:hover::after, .tag-frame:focus-within::before, .tag-frame:focus-within::after { opacity: 1; width: 26px; height: 26px; } /* ========================================================================= 11. STANDARD PRODUCT CARDS ========================================================================= */ .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; } .product-card { position: relative; height: 440px; overflow: hidden; border-radius: var(--radius); background: var(--ink); transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease); } .product-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(20, 24, 28, 0.28); } .product-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .product-card:hover img { transform: scale(1.09); } .product-card .card-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(20, 24, 28, 0) 30%, rgba(20, 24, 28, 0.92) 100% ); transition: background 0.4s var(--ease); } .product-card:hover .card-overlay { background: linear-gradient( 180deg, rgba(20, 24, 28, 0.25) 0%, rgba(20, 24, 28, 0.96) 65% ); } .product-card .card-tag { position: absolute; top: 18px; left: 18px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.35); padding: 4px 9px; text-transform: uppercase; } .product-card .card-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px; color: var(--white); } .product-card h3 { font-size: 21px; color: var(--white); margin-bottom: 8px; } .product-card p { font-size: 14px; color: rgba(255, 255, 255, 0.72); max-height: 0; opacity: 0; overflow: hidden; transition: all 0.4s var(--ease); } .product-card:hover p { max-height: 80px; opacity: 1; margin-top: 4px; } .product-card .card-explore { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--rust-light); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0; transform: translateY(8px); transition: all 0.4s var(--ease) 0.05s; } .product-card:hover .card-explore { opacity: 1; transform: translateY(0); } .product-card .card-explore i { transition: transform 0.3s var(--ease); } .product-card:hover .card-explore i { transform: translateX(4px); } /* ========================================================================= 12. ABOUT ========================================================================= */ .about-media { position: relative; } .about-media .frame-img { width: 100%; height: 520px; object-fit: cover; border-radius: var(--radius); } .about-media .stat-chip { position: absolute; bottom: -28px; left: -28px; background: var(--ink); color: var(--white); padding: 26px 30px; border-radius: var(--radius); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.25); } .about-media .stat-chip .num { font-family: var(--font-display); font-size: 42px; color: var(--rust-light); line-height: 1; } .about-media .stat-chip .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel-light); margin-top: 6px; } .info-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; background: var(--white); transition: all 0.35s var(--ease); } .info-box:hover { border-color: var(--rust); box-shadow: 0 20px 40px rgba(20, 24, 28, 0.08); transform: translateY(-4px); } .info-box .ic { width: 48px; height: 48px; border-radius: 4px; background: rgba(168, 71, 31, 0.10); color: var(--rust); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 16px; } .info-box h4 { font-size: 18px; margin-bottom: 8px; } .info-box p { color: var(--steel); font-size: 14.5px; } /* ========================================================================= 13. INDUSTRIES ========================================================================= */ .industry-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 130px; gap: 18px; } .ind-card { position: relative; overflow: hidden; border-radius: var(--radius); grid-column: span 2; grid-row: span 2; transition: transform 0.35s var(--ease); } .ind-card.i-lg { grid-column: span 4; grid-row: span 3; } .ind-card.i-tall { grid-row: span 3; } .ind-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .ind-card .ov { position: absolute; inset: 0; background: linear-gradient( 200deg, rgba(20, 24, 28, 0.15) 20%, rgba(20, 24, 28, 0.92) 100% ); transition: opacity 0.4s var(--ease); } .ind-card:hover img { transform: scale(1.08); } .ind-card .body { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; color: var(--white); } .ind-card h3 { font-size: 19px; color: var(--white); display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ind-card h3 i { transition: transform 0.35s var(--ease); color: var(--rust-light); } .ind-card:hover h3 i { transform: translateX(6px); } .ind-card p { font-size: 13.5px; color: rgba(255, 255, 255, 0.75); max-height: 0; opacity: 0; overflow: hidden; transition: all 0.35s var(--ease); margin-top: 6px; } .ind-card:hover p { max-height: 60px; opacity: 1; } .ind-card:hover { transform: translateY(-4px); } /* ========================================================================= 14. MATERIAL SOLUTIONS ========================================================================= */ .material-solutions-section { position: relative; width: 100%; min-height: 680px; padding: 55px 20px 60px; overflow: hidden; background: linear-gradient( rgba(20, 24, 28, 0.90), rgba(22, 35, 46, 0.94) ), url(''); background-size: cover; background-position: center; color: var(--white); } .material-bg-overlay { position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(20, 24, 28, 0.15), rgba(29, 49, 64, 0.12) ); pointer-events: none; } .material-solutions-container { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; } /* Heading */ .material-heading { text-align: center; margin-bottom: 45px; } .material-heading h2 { display: inline-block; margin: 0 0 18px; padding: 0; background: transparent; color: var(--white); font-family: var(--font-display); font-size: clamp(27px, 3vw, 36px); font-weight: 600; line-height: 1.2; text-transform: uppercase; } .material-heading h2::after { content: ""; display: block; width: 55px; height: 3px; margin: 12px auto 0; background: var(--rust); } .material-heading p { max-width: 760px; margin: 0 auto; color: #d5dade; font-family: var(--font-body); font-size: 14.5px; font-weight: 400; line-height: 1.7; } /* Material grid */ .material-grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 30px; row-gap: 58px; max-width: 900px; margin: 0 auto; } .material-item { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; } /* Circular images */ .material-circle { width: 180px; height: 180px; border-radius: 50%; overflow: hidden; border: 2px solid #d7dde0; background: var(--navy); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.50); transition: transform 0.4s var(--ease), border-color 0.4s ease, box-shadow 0.4s ease; } .material-circle img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.5s var(--ease); } /* Material title */ .material-item h3 { margin: 20px 0 0; max-width: 210px; color: var(--white); font-family: var(--font-display); font-size: 17px; font-weight: 500; line-height: 1.45; text-align: center; text-transform: uppercase; transition: color 0.3s ease; } /* Hover */ .material-item:hover .material-circle { transform: translateY(-7px); border-color: var(--rust-light); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(168, 71, 31, 0.18); } .material-item:hover .material-circle img { transform: scale(1.08); } .material-item:hover h3 { color: var(--rust-light); } /* 5th item centered */ .material-item-bottom { grid-column: 2 / 4; justify-self: center; } /* ========================================================================= 15. CAPABILITIES ========================================================================= */ .cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-light); border: 1px solid var(--line-light); } .cap-item { background: var(--navy); padding: 34px 28px; position: relative; transition: background 0.3s var(--ease); } .cap-item:hover { background: var(--navy-2); } .cap-item .idx { font-family: var(--font-mono); font-size: 12px; color: var(--rust-light); letter-spacing: 0.1em; } .cap-item .ic { width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--rust-light); font-size: 19px; margin: 16px 0 18px; } .cap-item h4 { color: var(--white); font-size: 16.5px; margin-bottom: 8px; } .cap-item p { font-size: 13.5px; color: var(--steel-light); } /* ========================================================================= 16. WHY CHOOSE US ========================================================================= */ .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .why-card { padding: 34px 28px; border: 1px solid var(--line); border-radius: var(--radius); transition: all 0.35s var(--ease); background: var(--white); } .why-card:hover { transform: translateY(-6px); box-shadow: 0 24px 46px rgba(20, 24, 28, 0.09); border-color: var(--rust); } .why-card .ic { font-size: 26px; color: var(--rust); margin-bottom: 18px; } .why-card h4 { font-size: 17.5px; margin-bottom: 8px; } .why-card p { font-size: 14px; color: var(--steel); } /* ========================================================================= 17. GALLERY ========================================================================= */ .gallery-grid { columns: 4 260px; column-gap: 18px; } .gallery-item { break-inside: avoid; margin-bottom: 18px; position: relative; overflow: hidden; border-radius: var(--radius); cursor: pointer; } .gallery-item img { width: 100%; display: block; transition: transform 0.5s var(--ease); } .gallery-item:hover img { transform: scale(1.08); } .gallery-item .gi-ov { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(20, 24, 28, 0) 50%, rgba(20, 24, 28, 0.85) 100% ); opacity: 0; transition: opacity 0.35s var(--ease); display: flex; align-items: flex-end; padding: 18px; } .gallery-item:hover .gi-ov { opacity: 1; } .gallery-item .gi-ov span { color: var(--white); font-weight: 700; font-size: 14px; } .gallery-item .gi-zoom { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--ink); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.7); transition: all 0.3s var(--ease); } .gallery-item:hover .gi-zoom { opacity: 1; transform: scale(1); } /* Gallery filters */ .filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; } .filter-btn { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 20px; border: 1px solid var(--line); background: transparent; color: var(--steel); transition: all 0.3s var(--ease); border-radius: 2px; cursor: pointer; } .filter-btn:hover { border-color: var(--rust); color: var(--rust); } .filter-btn.active { background: var(--ink); color: var(--white); border-color: var(--ink); } /* ========================================================================= 18. CTA BAND ========================================================================= */ .cta-band { position: relative; color: var(--white); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 110px 0; text-align: center; } .cta-band .cta-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(15, 18, 21, 0.72), rgba(12, 15, 17, 0.92) ); } .cta-band .container-xl { position: relative; z-index: 2; } .cta-band h2 { color: var(--white); font-size: clamp(30px, 4vw, 50px); } .cta-band p { font-size: 18px; color: rgba(255, 255, 255, 0.82); margin: 18px 0 36px; } /* ========================================================================= 19. HAZARD DIVIDER ========================================================================= */ .hazard-divider { height: 7px; background-image: repeating-linear-gradient( 135deg, var(--rust) 0 18px, var(--ink) 18px 36px ); } /* ========================================================================= 20. FORMS ========================================================================= */ .form-control, .form-select { border-radius: 2px; border: 1px solid var(--line); padding: 13px 16px; font-size: 14.5px; background: var(--white); color: var(--ink); } .form-control:focus, .form-select:focus { border-color: var(--rust); box-shadow: 0 0 0 3px rgba(168, 71, 31, 0.12); outline: none; } .form-label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); font-weight: 600; margin-bottom: 8px; } .form-panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px; box-shadow: 0 30px 60px rgba(20, 24, 28, 0.06); } /* ========================================================================= 21. FOOTER ========================================================================= */ .site-footer { background: var(--ink); color: var(--steel-light); padding: 84px 0 0; } .site-footer h5 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); margin-bottom: 22px; } .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer li { margin-bottom: 12px; } .site-footer a { color: var(--steel-light); font-size: 14.5px; transition: color 0.25s var(--ease); margin-top: -2px; } .site-footer a:hover { color: var(--rust-light); } .footer-desc { font-size: 14.5px; color: var(--steel-light); margin: -91px 0 22px; max-width: 300px; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: 60px; padding: 26px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 13px; } .social-row { display: flex; gap: 12px; margin-top: 168px; } .social-row a { width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .social-row a:hover { border-color: var(--rust); background: var(--rust); color: var(--white); } /* ========================================================================= 22. FLOATING WHATSAPP ========================================================================= */ .floating-wa { position: fixed; bottom: 26px; right: 26px; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25); z-index: 900; transition: transform 0.3s var(--ease); } .floating-wa:hover { transform: scale(1.08); color: var(--white); } /* ========================================================================= 23. MOBILE QUOTE BAR ========================================================================= */ .mobile-quote-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 899; background: var(--ink); padding: 12px 18px; display: none; box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.2); } .mobile-quote-bar .btn { width: 100%; justify-content: center; } /* ========================================================================= 24. BACK TO TOP ========================================================================= */ .to-top { position: fixed; bottom: 26px; left: 26px; width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: var(--white); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: all 0.3s var(--ease); z-index: 900; } .to-top.is-visible { opacity: 1; pointer-events: auto; } .to-top:hover { background: var(--rust); } /* ========================================================================= 25. COUNTERS ========================================================================= */ .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .stat-item { text-align: center; padding: 20px; } .stat-item .num { font-family: var(--font-display); font-size: clamp(36px, 4vw, 52px); color: var(--rust-light); } .stat-item .lbl { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel-light); margin-top: 8px; } /* ========================================================================= 26. RELATED PRODUCTS ========================================================================= */ .related-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: all 0.3s var(--ease); background: var(--white); } .related-card:hover { transform: translateY(-6px); box-shadow: 0 24px 46px rgba(20, 24, 28, 0.1); border-color: var(--rust); } .related-card img { height: 200px; width: 100%; object-fit: cover; } .related-card .rc-body { padding: 20px; } .related-card h5 { font-size: 16px; margin-bottom: 8px; } /* ========================================================================= 27. SPEC TABLE ========================================================================= */ .spec-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 13.5px; } .spec-table tr { border-bottom: 1px solid var(--line); } .spec-table td { padding: 14px 16px; } .spec-table td:first-child { color: var(--steel); text-transform: uppercase; letter-spacing: 0.05em; width: 40%; } .spec-table td:last-child { font-weight: 600; } .spec-table tr:nth-child(odd) { background: var(--paper); } /* ========================================================================= 28. FEATURE LIST ========================================================================= */ .feature-list { list-style: none; margin: 0; padding: 0; } .feature-list li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; } .feature-list li:last-child { border-bottom: none; } .feature-list i { color: var(--rust); margin-top: 3px; } /* ========================================================================= 29. UTILITY ========================================================================= */ .text-rust { color: var(--rust); } .fw-display { font-family: var(--font-display); text-transform: uppercase; } /* ========================================================================= 30. TAURO PRODUCTS — 4 CARDS / 1 ROW ========================================================================= */ .tauro-products-section { width: 100%; padding: 0; margin: 0; overflow: hidden; background: var(--ink); } .tauro-products-grid { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 450px; height: 450px; } /* PRODUCT CARD */ .tauro-product-item { position: relative; width: 100%; height: 450px; overflow: hidden; display: block; background: var(--navy); text-decoration: none; cursor: pointer; } /* IMAGE */ .tauro-product-image { width: 100%; height: 315px; overflow: hidden; } .tauro-product-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.6s var(--ease); } /* TITLE AREA */ .tauro-product-title { width: 100%; height: 135px; display: flex; align-items: center; justify-content: center; padding: 15px; background: var(--navy); text-align: center; position: relative; z-index: 2; border-top: 3px solid var(--rust); } .tauro-product-title h3 { margin: 0; color: var(--white); font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.45; text-transform: uppercase; } /* HOVER OVERLAY */ .tauro-hover-info { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 25px; text-align: center; background: linear-gradient( 145deg, rgba(20, 24, 28, 0.97), rgba(22, 35, 46, 0.94) ); opacity: 0; visibility: hidden; transform: scale(0.96); transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease; } /* HOVER CONTENT */ .tauro-hover-content { width: 100%; transform: translateY(20px); transition: transform 0.4s var(--ease); } .tauro-hover-content h3 { margin: 0 0 15px; color: var(--white); font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.4; text-transform: uppercase; } .tauro-hover-content p { max-width: 280px; margin: 0 auto 25px; color: var(--steel-light); font-family: var(--font-body); font-size: 14px; line-height: 1.7; } /* EXPLORE BUTTON */ .tauro-explore-btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 22px; background: var(--rust); color: var(--white); border-radius: 3px; font-family: var(--font-body); font-size: 14px; font-weight: 700; white-space: nowrap; transition: background 0.3s ease, transform 0.3s ease; } .tauro-explore-btn:hover { background: var(--rust-light); color: var(--white); transform: translateY(-2px); } /* CARD HOVER */ .tauro-product-item:hover .tauro-hover-info { opacity: 1; visibility: visible; transform: scale(1); } .tauro-product-item:hover .tauro-hover-content { transform: translateY(0); } .tauro-product-item:hover .tauro-product-image img { transform: scale(1.08); } /* ========================================================================= 31. TAURO PRODUCTS — TABLET ========================================================================= */ @media (max-width: 991px) { .tauro-products-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; height: auto; } .tauro-product-item { height: 400px; } .tauro-product-image { height: 280px; } .tauro-product-title { height: 120px; } .tauro-product-title h3 { font-size: 19px; } } /* ========================================================================= 32. TAURO PRODUCTS — MOBILE ========================================================================= */ @media (max-width: 576px) { .tauro-products-grid { display: block; height: auto; } .tauro-product-item { width: 100%; height: 360px; } .tauro-product-image { height: 245px; } .tauro-product-title { height: 115px; } .tauro-product-title h3 { font-size: 19px; } .tauro-hover-content { padding: 15px; } .tauro-hover-content h3 { font-size: 20px; } .tauro-hover-content p { font-size: 14px; } } /* ========================================================================= 33. MATERIAL SOLUTIONS — TABLET ========================================================================= */ @media (max-width: 991px) { .material-solutions-section { min-height: auto; padding: 50px 20px 60px; } .material-grid { grid-template-columns: repeat(4, 1fr); column-gap: 15px; max-width: 100%; } .material-circle { width: 150px; height: 150px; } .material-item h3 { font-size: 15px; } } /* ========================================================================= 34. MATERIAL SOLUTIONS — MOBILE ========================================================================= */ @media (max-width: 767px) { .material-solutions-section { padding: 45px 15px 55px; } .material-heading { margin-bottom: 35px; } .material-heading h2 { font-size: 25px; } .material-heading p { font-size: 13px; } .material-grid { grid-template-columns: repeat(2, 1fr); gap: 42px 15px; } .material-circle { width: 140px; height: 140px; } .material-item h3 { margin-top: 15px; font-size: 14px; line-height: 1.4; } .material-item-bottom { grid-column: 1 / 3; justify-self: center; } } /* ========================================================================= 35. SMALL MOBILE ========================================================================= */ @media (max-width: 420px) { .material-circle { width: 125px; height: 125px; } .material-item h3 { font-size: 13px; } } /* ========================================================================= 36. OTHER RESPONSIVE ========================================================================= */ @media (max-width: 991px) { .industry-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; } .ind-card, .ind-card.i-lg, .ind-card.i-tall { grid-column: span 1; grid-row: span 1; } .cap-grid { grid-template-columns: repeat(2, 1fr); } .why-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .about-media .stat-chip { left: 0; bottom: -20px; padding: 18px 22px; } .stat-row { grid-template-columns: repeat(2, 1fr); } .mobile-quote-bar { display: block; } .floating-wa { bottom: 92px; } body { padding-bottom: 78px; } } @media (max-width: 575px) { .product-grid { grid-template-columns: 1fr; } .cap-grid { grid-template-columns: 1fr; } .why-grid { grid-template-columns: 1fr; } .form-panel { padding: 26px; } } /* ========================= COPYRIGHT ========================= */ .footer-bottom { width: 100%; margin-top: 45px; padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); text-align: center; } .footer_2_copyright { width: 100%; } .footer_2_copyright .container { max-width: 100%; } .footer_2_copyright_text { text-align: center; } .footer_2_copyright_text p { margin: 0; color: rgba(255, 255, 255, 0.65); font-size: 14px; line-height: 1.7; } .footer_2_copyright_text strong { color: #ffffff; font-weight: 600; } .footer_2_copyright_text a { color: #e85d04; text-decoration: none; font-weight: 600; transition: 0.3s ease; } .footer_2_copyright_text a:hover { color: #ff7a1a; text-decoration: underline; } /* ========================================= OUR CAPABILITY DROPDOWN ========================================= */ .nav-dropdown { position: relative; } /* Main link */ .nav-dropdown > a { display: flex; align-items: center; gap: 8px; } .nav-dropdown > a i { font-size: 10px; transition: transform 0.3s ease; } /* ========================================= DESKTOP ========================================= */ .capability-dropdown { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px); width: 250px; margin: 0; padding: 8px 0; list-style: none; background: #14181c; border: 1px solid rgba(255,255,255,0.12); border-top: 3px solid #a8471f; box-shadow: 0 15px 35px rgba(0,0,0,0.3); opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.25s ease; z-index: 9999; } /* Invisible mouse bridge */ .capability-dropdown::before { content: ""; position: absolute; top: -12px; left: 0; width: 100%; height: 12px; } /* Orange arrow */ .capability-dropdown::after { content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #a8471f; } /* Desktop hover */ @media (min-width: 992px) { .nav-dropdown:hover .capability-dropdown, .nav-dropdown:focus-within .capability-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-dropdown:hover > a i { transform: rotate(180deg); } } /* ========================================= DROPDOWN LINKS ========================================= */ .capability-dropdown li { margin: 0; padding: 0; } .capability-dropdown li a { display: block; padding: 13px 20px; color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; transition: 0.25s ease; } .capability-dropdown li a:hover { color: #e86a32; background: rgba(168,71,31,0.15); padding-left: 27px; } /* ========================================= MOBILE ========================================= */ @media (max-width: 991px) { .nav-dropdown { width: 100%; } .nav-dropdown > a { width: 100%; display: flex; align-items: center; justify-content: space-between; cursor: pointer; } /* Hide dropdown by default */ .nav-dropdown .capability-dropdown { position: static; display: none; width: 100%; margin: 8px 0 10px; padding: 5px 0; transform: none !important; background: rgba(255,255,255,0.04); border: 0; border-left: 3px solid #a8471f; box-shadow: none; opacity: 1; visibility: visible; pointer-events: auto; } /* SHOW WHEN OPEN */ .nav-dropdown.open .capability-dropdown { display: block; } /* Rotate arrow */ .nav-dropdown.open > a i { transform: rotate(180deg); } /* Remove desktop arrow */ .capability-dropdown::before, .capability-dropdown::after { display: none; } /* Mobile links */ .capability-dropdown li a { display: block; padding: 13px 20px 13px 25px; color: rgba(255,255,255,0.8); font-size: 14px; } .capability-dropdown li a:hover { padding-left: 30px; color: #e86a32; background: rgba(168,71,31,0.12); } } /* ========================================================= Tauro Steels — style.css Global theme + navbar styles referenced by header.php Palette: near-black #14181c, rust accent #a8471f Fonts: Oswald (headings/brand), Manrope (body), IBM Plex Mono (labels/data) ========================================================= */ :root { --tauro-dark: #14181c; --tauro-dark-2: #1c2126; --tauro-rust: #a8471f; --tauro-rust-light: #c95a2b; --tauro-white: #f5f5f3; --tauro-grey: #9aa0a6; --tauro-border: rgba(255, 255, 255, 0.08); --font-heading: 'Oswald', sans-serif; --font-body: 'Manrope', sans-serif; --font-mono: 'IBM Plex Mono', monospace; } * { box-sizing: border-box; } body { font-family: var(--font-body); color: var(--tauro-white); background: var(--tauro-dark); margin: 0; } a { text-decoration: none; color: inherit; } /* ============================= NAVBAR ============================= */ .tauro-nav { position: sticky; top: 0; z-index: 1000; background: var(--tauro-dark); border-bottom: 1px solid var(--tauro-border); transition: background 0.3s ease, box-shadow 0.3s ease; } .tauro-nav.scrolled { background: var(--tauro-dark-2); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; } /* Brand / logo */ .brand { display: flex; align-items: center; gap: 12px; } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 6px; background: var(--tauro-rust); color: var(--tauro-white); font-family: var(--font-heading); font-weight: 700; font-size: 20px; line-height: 1; } .brand-name { display: flex; flex-direction: column; font-family: var(--font-heading); font-weight: 600; font-size: 20px; letter-spacing: 0.02em; color: var(--tauro-white); } .brand-name small { font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tauro-grey); } /* Nav links */ .nav-links { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; } .nav-links > li > a { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--tauro-white); padding: 8px 2px; position: relative; transition: color 0.2s ease; } .nav-links > li > a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--tauro-rust); transition: width 0.25s ease; } .nav-links > li > a:hover, .nav-links > li > a.active { color: var(--tauro-rust-light); } .nav-links > li > a:hover::after, .nav-links > li > a.active::after { width: 100%; } /* Dropdown */ .nav-dropdown { position: relative; } .capability-toggle { display: inline-flex; align-items: center; gap: 6px; } .capability-toggle i { font-size: 12px; transition: transform 0.2s ease; } .nav-dropdown:hover .capability-toggle i, .nav-dropdown:focus-within .capability-toggle i { transform: rotate(180deg); } .capability-dropdown { position: absolute; top: calc(100% + 14px); left: 0; min-width: 220px; background: var(--tauro-dark-2); border: 1px solid var(--tauro-border); border-radius: 8px; padding: 8px; list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4); } .nav-dropdown:hover .capability-dropdown, .nav-dropdown:focus-within .capability-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .capability-dropdown li a { display: block; padding: 10px 12px; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--tauro-white); } .capability-dropdown li a:hover { background: rgba(168, 71, 31, 0.15); color: var(--tauro-rust-light); } /* CTA button */ .btn-rust { display: inline-block; background: var(--tauro-rust); color: var(--tauro-white) !important; font-family: var(--font-body); font-weight: 700; font-size: 14px; letter-spacing: 0.02em; padding: 10px 22px; border-radius: 6px; border: none; transition: background 0.2s ease, transform 0.15s ease; } .btn-rust:hover { background: var(--tauro-rust-light); transform: translateY(-1px); } /* Mobile toggle button */ .nav-toggle { display: none; background: none; border: none; color: var(--tauro-white); font-size: 28px; cursor: pointer; } /* Overlay for mobile menu */ .nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 999; } .nav-overlay.active { display: block; } /* ============================= RESPONSIVE ============================= */ @media (max-width: 991px) { .nav-toggle { display: block; } .nav-links { position: fixed; top: 0; right: 0; height: 100vh; width: 280px; max-width: 80%; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--tauro-dark-2); padding: 90px 24px 24px; transform: translateX(100%); transition: transform 0.3s ease; z-index: 1001; overflow-y: auto; } .nav-links.active { transform: translateX(0); } .nav-links > li { width: 100%; } .nav-links > li > a { display: block; width: 100%; padding: 14px 0; border-bottom: 1px solid var(--tauro-border); } .capability-dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; background: transparent; padding: 0 0 0 12px; display: none; } .nav-dropdown.open .capability-dropdown { display: block; } .nav-cta { margin-top: 12px; } .btn-rust { width: 100%; text-align: center; } } /* ========================================================= TAURO STEELS HEADER / NAVBAR ========================================================= */ :root { --tauro-dark: #14181c; --tauro-dark-2: #1b2025; --tauro-white: #ffffff; --tauro-muted: #b9bec2; --tauro-rust: #b84d24; --tauro-rust-hover: #ce5b2b; } /* ========================================================= HEADER ========================================================= */ header { position: relative; width: 100%; z-index: 9999; } /* ========================================================= NAVBAR ========================================================= */ .tauro-nav { position: relative; width: 100%; height: 115px; background: var(--tauro-dark); display: flex; align-items: center; z-index: 9999; } /* ========================================================= NAV INNER ========================================================= */ .tauro-nav .nav-inner { width: 100%; max-width: 1280px; height: 100%; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; } /* ========================================================= LOGO ========================================================= */ .brand { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; height: 100%; } .brand-logo { display: block; width: 145px; height: auto; max-height: 91px; object-fit: contain; transition: opacity .3s ease, transform .3s ease; } .brand:hover .brand-logo { opacity: .9; transform: scale(1.02); } /* ========================================================= NAVIGATION ========================================================= */ .nav-links { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; gap: 48px; } .nav-links > li { position: relative; margin: 0; padding: 0; } /* ========================================================= NAV LINKS ========================================================= */ .nav-links > li > a:not(.btn) { position: relative; display: flex; align-items: center; gap: 5px; height: 115px; color: #0c0c0c; font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 700; text-decoration: none; text-transform: uppercase; white-space: nowrap; transition: color .3s ease; } /* Hover */ .nav-links > li > a:not(.btn):hover { color: #d05c2d; } /* Active */ .nav-links > li > a.active { color: #d05c2d; } /* ========================================================= UNDERLINE HOVER ========================================================= */ .nav-links > li > a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: 32px; width: 0; height: 2px; background: var(--tauro-rust); transition: width .3s ease; } .nav-links > li > a:not(.btn):hover::after, .nav-links > li > a.active::after { width: 100%; } /* ========================================================= CAPABILITY ARROW ========================================================= */ .capability-toggle i { font-size: 10px; transition: transform .3s ease; } .nav-dropdown:hover .capability-toggle i { transform: rotate(180deg); } /* ========================================================= DROPDOWN ========================================================= */ .nav-dropdown { position: relative; } .capability-dropdown { position: absolute; top: calc(100% - 1px); left: 50%; min-width: 220px; margin: 0; padding: 10px 0; list-style: none; background: #1a1f23; border-top: 2px solid var(--tauro-rust); box-shadow: 0 15px 35px rgba(0, 0, 0, .35); opacity: 0; visibility: hidden; transform: translate(-50%, 12px); transition: opacity .3s ease, visibility .3s ease, transform .3s ease; z-index: 99999; } .nav-dropdown:hover .capability-dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); } /* Dropdown links */ .capability-dropdown li { margin: 0; padding: 0; } .capability-dropdown li a { display: block; padding: 12px 20px; color: #d7dadd; font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 600; text-decoration: none; transition: color .25s ease, background .25s ease, padding-left .25s ease; } .capability-dropdown li a:hover { color: #ffffff; background: rgba(184, 77, 36, .12); padding-left: 25px; } /* ========================================================= REQUEST QUOTE BUTTON ========================================================= */ .nav-links .nav-cta { margin-left: 4px; } .nav-links .btn-rust { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 15px; border: 0; border-radius: 6px; background: var(--tauro-rust); color: #ffffff; font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 800; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background .3s ease, transform .3s ease, box-shadow .3s ease; } .nav-links .btn-rust:hover { background: var(--tauro-rust-hover); color: #ffffff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(184, 77, 36, .25); } /* ========================================================= MOBILE TOGGLE ========================================================= */ .nav-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .15); border-radius: 4px; background: transparent; color: #ffffff; align-items: center; justify-content: center; font-size: 25px; cursor: pointer; transition: background .3s ease, border-color .3s ease; } .nav-toggle:hover { background: var(--tauro-rust); border-color: var(--tauro-rust); } /* ========================================================= MOBILE OVERLAY ========================================================= */ .nav-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .65); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; z-index: 9997; } .nav-overlay.active { opacity: 1; visibility: visible; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1100px) { .tauro-nav { height: 90px; } .tauro-nav .nav-inner { padding: 0 22px; } .brand-logo { width: 130px; } .nav-links { gap: 25px; } .nav-links > li > a:not(.btn) { height: 90px; font-size: 11px; } .nav-links > li > a:not(.btn)::after { bottom: 25px; } .nav-links .btn-rust { min-height: 38px; padding: 0 12px; font-size: 11px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 991px) { .tauro-nav { height: 75px; } .tauro-nav .nav-inner { padding: 0 20px; } .brand-logo { width: 125px; max-height: 55px; } /* Show menu button */ .nav-toggle { display: flex; position: relative; z-index: 10001; } /* Mobile navigation */ .nav-links { position: fixed; top: 0; right: 0; width: min(320px, 85vw); height: 100vh; padding: 95px 25px 30px; display: flex; flex-direction: column; align-items: stretch; gap: 0; background: #151a1e; box-shadow: -10px 0 35px rgba(0, 0, 0, .35); overflow-y: auto; transform: translateX(100%); transition: transform .35s cubic-bezier(.4, 0, .2, 1); z-index: 10000; } .nav-links.active { transform: translateX(0); } /* Mobile links */ .nav-links > li { width: 100%; } .nav-links > li > a:not(.btn) { width: 100%; height: auto; min-height: 55px; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 13px; } .nav-links > li > a:not(.btn)::after { display: none; } /* Mobile dropdown */ .nav-dropdown { width: 100%; } .capability-toggle { justify-content: space-between; } .capability-dropdown { position: static; width: 100%; min-width: 0; padding: 5px 0; border-top: 0; background: rgba(255, 255, 255, .025); box-shadow: none; opacity: 1; visibility: visible; transform: none; display: none; } .nav-dropdown.active .capability-dropdown { display: block; } .capability-dropdown li a { padding: 12px 15px 12px 20px; font-size: 12px; } .nav-dropdown:hover .capability-dropdown { transform: none; } /* Quote button */ .nav-links .nav-cta { margin: 25px 0 0; } .nav-links .btn-rust { width: 100%; min-height: 45px; font-size: 12px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .tauro-nav { height: 70px; } .tauro-nav .nav-inner { padding: 0 15px; } .brand-logo { width: 110px; max-height: 50px; } .nav-toggle { width: 40px; height: 40px; font-size: 23px; } .nav-links { width: 85vw; padding-left: 20px; padding-right: 20px; } } /* ========================================= INDUSTRIES SECTION ========================================= */ .industries-section { width: 100%; padding: 90px 20px 80px; background: #fff; overflow: hidden; } .industries-container { width: 100%; max-width: 980px; margin: 0 auto; } /* ========================================= HEADING ========================================= */ .industries-heading { text-align: center; margin-bottom: 30px; } .industries-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; font-family: Arial, sans-serif; font-size: 8px; font-weight: 600; letter-spacing: 2px; color: #bd6848; text-transform: uppercase; } .industries-eyebrow > span { width: 12px; height: 1px; background: #bd6848; display: inline-block; } .industries-heading h2 { margin: 0; font-family: Impact, "Arial Narrow", sans-serif; font-size: 31px; line-height: .98; font-weight: 400; letter-spacing: .3px; color: #17232b; } .industries-heading p { margin: 10px 0 0; font-family: Arial, sans-serif; font-size: 9px; line-height: 1.5; color: #68727a; } /* ========================================= INDUSTRIES GRID ========================================= */ .industries-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 140px 140px 140px; gap: 8px; } /* ========================================= CARD ========================================= */ .industry-card { position: relative; display: block; overflow: hidden; min-width: 0; border-radius: 3px; text-decoration: none; background: #20272b; isolation: isolate; } /* ========================================= IMAGE ========================================= */ .industry-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2,.65,.2,1), filter .5s ease; } /* ========================================= DARK IMAGE OVERLAY ========================================= */ .industry-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( to bottom, rgba(5, 12, 17, .02) 15%, rgba(5, 12, 17, .15) 45%, rgba(5, 12, 17, .85) 100% ); transition: background .5s ease; } /* ========================================= CONTENT ========================================= */ .industry-content { position: absolute; left: 11px; right: 10px; bottom: 10px; z-index: 3; display: flex; align-items: center; justify-content: space-between; } .industry-content h3 { margin: 0; font-family: Impact, "Arial Narrow", sans-serif; font-size: 10px; line-height: 1; font-weight: 400; letter-spacing: .15px; color: #fff; transition: transform .4s ease, letter-spacing .4s ease; } /* ========================================= ARROW ========================================= */ .industry-arrow { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-family: Arial, sans-serif; font-size: 15px; font-weight: 300; color: #d45d35; transition: transform .4s ease, color .4s ease; } /* ========================================= CARD POSITIONS ========================================= */ /* AUTOMOTIVE - LARGE */ .automotive { grid-column: 1 / 3; grid-row: 1 / 3; } /* ENGINEERING - SMALL TOP RIGHT */ .engineering { grid-column: 3; grid-row: 1; } /* MANUFACTURING - TALL RIGHT */ .manufacturing { grid-column: 3; grid-row: 2 / 4; } /* ENERGY - BOTTOM LEFT */ .energy { grid-column: 1; grid-row: 3; } /* AERO SPACE - BOTTOM CENTER */ .fabrication { grid-column: 2; grid-row: 3; } /* ========================================= HOVER ========================================= */ .industry-card:hover img { transform: scale(1.09); filter: brightness(.78); } .industry-card:hover .industry-overlay { background: linear-gradient( to bottom, rgba(5, 12, 17, .08) 10%, rgba(5, 12, 17, .30) 45%, rgba(5, 12, 17, .92) 100% ); } .industry-card:hover .industry-content h3 { transform: translateX(3px); letter-spacing: .6px; } .industry-card:hover .industry-arrow { transform: translate(4px, -4px); color: #fff; } /* ========================================= ORANGE BOTTOM LINE ========================================= */ .industry-card::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; z-index: 5; background: #d45d35; transition: width .45s ease; } .industry-card:hover::after { width: 100%; } /* ========================================= TABLET ========================================= */ @media (max-width: 768px) { .industries-section { padding: 70px 18px; } .industries-container { max-width: 700px; } .industries-heading h2 { font-size: 27px; } .industries-grid { grid-template-rows: 120px 120px 120px; gap: 7px; } .industry-content h3 { font-size: 9px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 576px) { .industries-section { padding: 60px 15px; } .industries-heading { margin-bottom: 22px; } .industries-heading h2 { font-size: 25px; } .industries-heading p { font-size: 10px; padding: 0 10px; } .industries-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 160px 110px 110px 110px; gap: 7px; } /* Automotive */ .automotive { grid-column: 1 / 3; grid-row: 1; } /* Engineering */ .engineering { grid-column: 1; grid-row: 2; } /* Manufacturing */ .manufacturing { grid-column: 2; grid-row: 2 / 4; } /* Energy */ .energy { grid-column: 1; grid-row: 3; } /* Aero Space */ .fabrication { grid-column: 1 / 3; grid-row: 4; } .industry-content { left: 9px; right: 8px; bottom: 8px; } .industry-content h3 { font-size: 9px; } .industry-arrow { width: 16px; height: 16px; font-size: 13px; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 380px) { .industries-heading h2 { font-size: 22px; } .industries-grid { grid-template-rows: 145px 100px 100px 100px; } } /* ========================================================= TAURO TEAM SECTION ========================================================= */ .tauro-team-section { position: relative; padding: 110px 0; background: #f5f4f0; overflow: hidden; } /* ========================================================= HEADING ========================================================= */ .tauro-team-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; margin-bottom: 70px; } .team-heading-left { max-width: 600px; } .team-heading-left .eyebrow { display: inline-flex; align-items: center; margin-bottom: 18px; color: #b84d24; font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; } .team-heading-left .eyebrow::before { content: ""; width: 30px; height: 1px; margin-right: 10px; background: #b84d24; } .team-heading-left h2 { margin: 0; color: #14181c; font-family: "Oswald", sans-serif; font-size: clamp(42px, 5vw, 68px); font-weight: 600; line-height: .98; text-transform: uppercase; } .team-heading-left h2 span { color: #b84d24; } .team-heading-right { width: 380px; padding-bottom: 5px; } .team-heading-right p { margin: 0; color: #697076; font-family: "Manrope", sans-serif; font-size: 15px; line-height: 1.8; } /* ========================================================= TEAM LIST ========================================================= */ .tauro-team-list { display: flex; flex-direction: column; border-top: 1px solid #d8d8d4; } /* ========================================================= TEAM MEMBER ========================================================= */ .tauro-team-member { position: relative; display: grid; grid-template-columns: 70px 300px 1fr 100px; align-items: center; min-height: 360px; padding: 35px 0; border-bottom: 1px solid #d8d8d4; transition: padding .4s ease, background .4s ease; } .tauro-team-member:hover { padding-left: 20px; padding-right: 20px; background: #ffffff; } /* ========================================================= NUMBER ========================================================= */ .team-number { align-self: flex-start; padding-top: 8px; color: #a0a3a4; font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 600; letter-spacing: 1px; } /* ========================================================= PHOTO ========================================================= */ .team-photo { position: relative; width: 270px; height: 290px; overflow: hidden; background: #e6e5e1; } .team-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba(20, 24, 28, .28), transparent 45% ); pointer-events: none; } .team-photo-blank { background: transparent; } .team-photo img { width: 100%; height: 124%; display: block; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); } .tauro-team-member:hover .team-photo img { transform: scale(1.06); } /* ========================================================= TEAM INFORMATION ========================================================= */ .team-info { max-width: 650px; padding: 10px 60px; } .team-role { margin-bottom: 12px; color: #b84d24; font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 600; letter-spacing: 1.8px; } .team-info h3 { margin: 0; color: #14181c; font-family: "Oswald", sans-serif; font-size: 36px; font-weight: 500; text-transform: uppercase; } .team-line { width: 45px; height: 2px; margin: 17px 0 20px; background: #b84d24; transition: width .35s ease; } .tauro-team-member:hover .team-line { width: 80px; } .team-info p { max-width: 600px; margin: 0 0 12px; color: #697076; font-family: "Manrope", sans-serif; font-size: 14px; line-height: 1.75; } .team-info p:last-child { margin-bottom: 0; } /* ========================================================= SIDE LABEL ========================================================= */ .team-side-label { justify-self: end; writing-mode: vertical-rl; transform: rotate(180deg); color: #a3a6a7; font-family: "IBM Plex Mono", monospace; font-size: 9px; font-weight: 600; letter-spacing: 2px; line-height: 1.5; transition: color .3s ease; } .tauro-team-member:hover .team-side-label { color: #b84d24; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1100px) { .tauro-team-section { padding: 90px 0; } .tauro-team-member { grid-template-columns: 50px 250px 1fr 60px; } .team-photo { width: 230px; height: 260px; } .team-info { padding: 10px 35px; } .team-info h3 { font-size: 31px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .tauro-team-section { padding: 70px 0; } /* Heading */ .tauro-team-heading { display: block; margin-bottom: 45px; } .team-heading-left h2 { font-size: 43px; } .team-heading-right { width: 100%; margin-top: 25px; } /* Team */ .tauro-team-member { display: block; padding: 30px 0; } .tauro-team-member:hover { padding-left: 0; padding-right: 0; } /* Number */ .team-number { margin-bottom: 12px; } /* Image */ .team-photo { width: 100%; height: 360px; margin-bottom: 25px; } /* Content */ .team-info { padding: 0; } .team-info h3 { font-size: 32px; } .team-info p { font-size: 14px; } /* Hide side label */ .team-side-label { display: none; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .tauro-team-section { padding: 60px 0; } .team-heading-left h2 { font-size: 37px; } .team-photo { height: 300px; } .team-info h3 { font-size: 28px; } } /* ========================================================= TAURO PRECISION MANUFACTURING DETAIL PAGES ========================================================= */ .machine-page .section-head { margin-bottom: 48px; } .machine-card, .quality-card { border: 1px solid var(--line); background: var(--white); padding: 28px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .machine-card:hover, .quality-card:hover { transform: translateY(-5px); box-shadow: 0 18px 45px rgba(15,20,24,.08); border-color: var(--rust); } .machine-card-top { border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 18px; } .machine-card h3, .quality-card h3 { font-size: 22px; margin: 8px 0 0; } .machine-year { display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.12em; color:var(--rust); text-transform:uppercase; } .machine-card ul { list-style:none; padding:0; margin:0; } .machine-card li { padding:8px 0; color:var(--steel); font-size:14px; border-bottom:1px dashed var(--line); } .machine-card li:last-child { border-bottom:0; } .machine-card li::before { content:'→'; color:var(--rust); margin-right:10px; } .feature-callout { display:flex; gap:18px; align-items:flex-start; margin-top:38px; padding:24px; border-left:3px solid var(--rust); background:var(--paper); } .feature-callout > i { font-size:25px; color:var(--rust); } .feature-callout strong { display:block; margin-bottom:5px; font-size:17px; } .feature-callout p { margin:0; color:var(--steel); } .metric-grid { display:grid; grid-template-columns:repeat(2,1fr); border:1px solid var(--line); } .metric-grid > div { padding:28px 24px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .metric-grid > div:nth-child(2n) { border-right:0; } .metric-grid > div:nth-last-child(-n+2) { border-bottom:0; } .metric-grid strong { display:block; font-family:'Oswald',sans-serif; font-size:31px; line-height:1; margin-bottom:8px; } .metric-grid span { font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--steel); } .capability-strip { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .capability-strip > div { padding:34px; border-right:1px solid var(--line); } .capability-strip > div:last-child { border-right:0; } .capability-strip i { font-size:28px; color:var(--rust); } .capability-strip h4 { margin:16px 0 8px; } .capability-strip p { margin:0; color:var(--steel); font-size:14px; } .accuracy-panel { margin-top:48px; padding-top:35px; border-top:1px solid var(--line); } .quality-card { position:relative; padding:30px; } .quality-number { position:absolute; top:20px; right:22px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--steel-light); } .quality-icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); color:var(--rust); font-size:20px; margin-bottom:24px; } .quality-card p { color:var(--steel); font-size:14px; line-height:1.7; margin:0; } @media (max-width:767px){ .metric-grid { grid-template-columns:1fr; } .metric-grid > div, .metric-grid > div:nth-child(2n) { border-right:0; border-bottom:1px solid var(--line); } .metric-grid > div:last-child { border-bottom:0; } .capability-strip { grid-template-columns:1fr; } .capability-strip > div { border-right:0; border-bottom:1px solid var(--line); } .capability-strip > div:last-child { border-bottom:0; } } /* ========================================================= PRECISION PAGE IMAGE SYSTEM ========================================================= */ .precision-hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; } .precision-hero-img + .overlay { z-index:1; } .precision-hero-img ~ .inner { position:relative; z-index:2; } .machine-card { overflow:hidden; padding:0; } .machine-card-image { width:100%; height:230px; overflow:hidden; background:var(--paper); border-bottom:1px solid var(--line); } .machine-card-image img { width:100%; height:100%; object-fit:contain; padding:18px; transition:transform .35s ease; } .machine-card:hover .machine-card-image img { transform:scale(1.04); } .machine-card-body { padding:28px; } .precision-feature-image { width:100%; height:430px; object-fit:cover; display:block; border:1px solid var(--line); } .precision-image-caption { margin-top:10px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--steel); text-transform:uppercase; letter-spacing:.08em; } .quality-visual { width:100%; height:430px; object-fit:cover; display:block; border:1px solid var(--line); } .quality-visual-card { position:relative; overflow:hidden; } .quality-visual-card .quality-visual-caption { position:absolute; left:0; right:0; bottom:0; padding:18px 20px; color:#fff; background:linear-gradient(transparent,rgba(8,30,45,.9)); font-weight:600; } @media (max-width:767px){ .machine-card-image { height:210px; } .precision-feature-image,.quality-visual { height:300px; } } /* ========================================================= TAURO PRECISION PAGES — REFINED LAYOUT ========================================================= */ .precision-banner{min-height:510px;display:flex;align-items:flex-end;padding:170px 0 78px;background-position:center;background-size:cover}.precision-banner .inner{width:100%}.precision-banner h1{max-width:760px;margin:8px 0 16px}.banner-lead{max-width:680px;color:#e3eaee;font-size:17px;line-height:1.7}.precision-intro{padding-top:92px}.precision-intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}.precision-copy h2{font-size:clamp(34px,4vw,52px);margin-bottom:18px}.precision-copy>p{max-width:680px;color:var(--steel);font-size:16px;line-height:1.85}.precision-image-frame{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--paper);min-height:420px}.precision-image-frame img{width:100%;height:420px;display:block;object-fit:cover}.image-tag{position:absolute;left:18px;bottom:18px;padding:9px 13px;background:rgba(20,24,28,.9);color:#fff;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase}.precision-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:36px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.precision-stats.three{grid-template-columns:repeat(3,1fr)}.precision-stats>div{padding:20px 14px;border-right:1px solid var(--line)}.precision-stats>div:last-child{border-right:0}.precision-stats strong{display:block;font-family:var(--font-display);font-size:28px;line-height:1.05;margin-bottom:7px}.precision-stats span{display:block;font-family:var(--font-mono);font-size:9px;line-height:1.4;text-transform:uppercase;letter-spacing:.08em;color:var(--steel)}.precision-machine-card{height:100%;background:var(--white);border:1px solid var(--line);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.precision-machine-card:hover{transform:translateY(-6px);box-shadow:0 20px 45px rgba(15,20,24,.10);border-color:var(--rust)}.machine-photo{height:210px;background:#f5f6f6;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}.machine-photo img{width:100%;height:100%;object-fit:contain;padding:18px;display:block;transition:transform .35s ease}.precision-machine-card:hover .machine-photo img{transform:scale(1.035)}.machine-photo span{position:absolute;top:13px;right:13px;padding:5px 8px;background:var(--rust);color:#fff;font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase}.machine-body{padding:23px}.machine-body h3{font-size:20px;min-height:50px;margin:0 0 16px}.machine-body ul{list-style:none;padding:0;margin:0}.machine-body li{font-size:13px;color:var(--steel);padding:8px 0;border-bottom:1px dashed var(--line);line-height:1.45}.machine-body li:last-child{border-bottom:0}.machine-body li:before{content:'→';color:var(--rust);margin-right:9px}.precision-note{display:flex;align-items:center;gap:15px;margin-top:28px;padding:18px 20px;background:var(--navy);color:#dbe4e9}.precision-note i{font-size:22px;color:#e8926a}.precision-note strong{color:#fff}.precision-wide-image{width:100%;height:430px;display:block;object-fit:cover;border:1px solid var(--line)}.mini-metrics{display:grid;grid-template-columns:1fr 1fr;margin-top:30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.mini-metrics div{padding:20px;border-right:1px solid var(--line)}.mini-metrics div:last-child{border-right:0}.mini-metrics strong{display:block;font-family:var(--font-display);font-size:27px}.mini-metrics span{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--steel)}.application-list{margin-top:28px}.application-list>div{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--line)}.application-list i{color:var(--rust);font-size:22px;margin-top:2px}.application-list h4{font-size:18px;margin:0 0 4px}.application-list p{font-size:14px;color:var(--steel)}.accuracy-box{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);margin-top:28px}.accuracy-box>div{padding:22px 14px;border-right:1px solid var(--line)}.accuracy-box>div:last-child{border-right:0}.accuracy-box strong{display:block;font-family:var(--font-display);font-size:25px}.accuracy-box span{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--steel)}.accuracy-box--large>div{padding:28px 18px}.accuracy-box--large strong{font-size:28px}.quality-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.quality-hero-image{position:relative;min-height:450px;overflow:hidden;border:1px solid var(--line)}.quality-hero-image img{width:100%;height:450px;object-fit:cover;display:block}.quality-badge{display:flex;align-items:center;gap:15px;margin-top:30px;padding:18px;border:1px solid var(--line);width:max-content;min-width:240px}.quality-badge i{font-size:28px;color:var(--rust)}.quality-badge strong,.quality-badge span{display:block}.quality-badge strong{font-size:18px}.quality-badge span{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;color:var(--steel);letter-spacing:.1em}.quality-practice{height:100%;padding:28px;background:#fff;border:1px solid var(--line);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.quality-practice:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(15,20,24,.08);border-color:var(--rust)}.quality-practice-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.quality-practice-top span{font-family:var(--font-mono);font-size:11px;color:var(--steel-light);letter-spacing:.12em}.quality-practice-top i{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);color:var(--rust);font-size:20px}.quality-practice h3{font-size:21px;margin-bottom:10px}.quality-practice p{font-size:14px;color:var(--steel);line-height:1.7}.precision-cta p{color:var(--steel-light);max-width:650px;margin:0 auto 28px}.precision-cta h2{margin-bottom:16px} @media(max-width:991px){.precision-intro-grid,.quality-hero-grid{grid-template-columns:1fr;gap:40px}.precision-stats{grid-template-columns:repeat(2,1fr)}.precision-stats>div:nth-child(2){border-right:0}.precision-stats>div{border-bottom:1px solid var(--line)}.precision-stats>div:nth-last-child(-n+2){border-bottom:0}.precision-image-frame,.precision-image-frame img,.quality-hero-image,.quality-hero-image img{height:360px;min-height:360px}.accuracy-box{grid-template-columns:repeat(2,1fr)}.accuracy-box>div:nth-child(2){border-right:0}.accuracy-box>div:nth-child(-n+2){border-bottom:1px solid var(--line)}} @media(max-width:767px){.precision-banner{min-height:470px;padding:145px 0 58px}.banner-lead{font-size:15px}.precision-intro{padding-top:64px}.precision-stats,.precision-stats.three{grid-template-columns:1fr 1fr}.precision-stats>div:nth-child(odd){border-right:1px solid var(--line)}.precision-stats>div:nth-child(even){border-right:0}.precision-stats>div:last-child{border-bottom:0}.machine-photo{height:220px}.precision-wide-image{height:300px}.mini-metrics{grid-template-columns:1fr}.mini-metrics div{border-right:0;border-bottom:1px solid var(--line)}.mini-metrics div:last-child{border-bottom:0}.accuracy-box{grid-template-columns:1fr 1fr}.accuracy-box>div{border-bottom:1px solid var(--line)}.accuracy-box>div:nth-child(2){border-right:0}.accuracy-box>div:nth-child(3){border-right:1px solid var(--line)}.accuracy-box>div:last-child{border-bottom:0}.accuracy-box>div:nth-last-child(2){border-bottom:0}.quality-hero-image,.quality-hero-image img,.precision-image-frame,.precision-image-frame img{height:300px;min-height:300px}} @media(max-width:480px){.precision-stats,.precision-stats.three,.accuracy-box{grid-template-columns:1fr}.precision-stats>div,.precision-stats>div:nth-child(odd),.precision-stats>div:nth-child(even),.accuracy-box>div,.accuracy-box>div:nth-child(3){border-right:0;border-bottom:1px solid var(--line)}.precision-stats>div:last-child,.accuracy-box>div:last-child{border-bottom:0}.machine-photo{height:200px}.precision-note{align-items:flex-start}.quality-badge{width:100%;min-width:0}} /* ========================================================= TAURO STEEL — FINAL BRAND SYSTEM / GLOBAL POLISH Consistent industrial palette, typography and components ========================================================= */ :root{ --ink:#10202f; --navy:#0b2035; --navy-2:#153a56; --steel:#5c6b78; --steel-light:#9aa8b4; --paper:#f4f7f9; --paper-2:#e8eef2; --white:#fff; --rust:#f47a1f; --rust-light:#ff9a4a; --rust-dark:#cf5e0b; --line:rgba(16,32,47,.11); --line-light:rgba(255,255,255,.15); --font-display:"Barlow Condensed","Arial Narrow",sans-serif; --font-body:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-mono:"IBM Plex Mono","Courier New",monospace; --radius:10px; } html,body{font-family:var(--font-body);color:var(--ink);background:var(--white)} body{font-size:16px;line-height:1.7} h1,h2,h3,h4,h5,h6,.display{font-family:var(--font-display);letter-spacing:.015em;color:var(--ink);font-weight:600} h1,h2,h3{text-wrap:balance} p{color:inherit} ::selection{background:var(--rust);color:#fff} /* Global surfaces */ .bg-paper{background:var(--paper)} .bg-navy{background:var(--navy);color:#dce7ee} .bg-ink{background:#071522;color:#dce7ee} .section-head .sub{color:var(--steel)} .eyebrow{color:var(--rust)} .eyebrow::before{background:var(--rust)} .eyebrow.on-dark{color:#ffad6b} /* Buttons */ .btn{border-radius:7px;padding:13px 24px;font-weight:800;letter-spacing:.045em;box-shadow:0 8px 20px rgba(11,32,53,.08)} .btn-rust{background:var(--rust);border-color:var(--rust);color:#fff} .btn-rust:hover{background:var(--rust-dark);border-color:var(--rust-dark);color:#fff;transform:translateY(-2px);box-shadow:0 12px 24px rgba(244,122,31,.25)} .btn-outline-dark{border-color:var(--navy);color:var(--navy)} .btn-outline-dark:hover{background:var(--navy);border-color:var(--navy);color:#fff} .btn-ghost-rust{border-color:var(--rust);color:var(--rust)} .btn-ghost-rust:hover{background:var(--rust);color:#fff} /* Navbar */ .tauro-nav{padding:13px 0;background:rgba(255,255,255,.97);box-shadow:0 5px 24px rgba(11,32,53,.08);backdrop-filter:blur(12px)} .tauro-nav.is-scrolled{padding:10px 0;background:rgba(255,255,255,.99);box-shadow:0 8px 28px rgba(11,32,53,.12)} .brand-logo{width:178px;height:84px;object-fit:contain;object-position:left center} .nav-links{gap:2px} .nav-links a:not(.btn){color:var(--navy);font-size:13px;padding:11px 14px;font-weight:800} .nav-links a:not(.btn)::after{background:var(--rust);left:14px;right:14px;bottom:4px} .nav-links a:not(.btn):hover,.nav-links a.active{color:var(--rust)} .nav-toggle{color:var(--navy);border-color:rgba(11,32,53,.2);background:#fff;border-radius:7px} .nav-toggle:hover{color:var(--rust);border-color:var(--rust)} .nav-cta{margin-left:8px} .capability-dropdown{background:#fff!important;border:1px solid var(--line)!important;border-top:3px solid var(--rust)!important;border-radius:0 0 10px 10px!important;box-shadow:0 18px 45px rgba(11,32,53,.14)!important} .capability-dropdown li a{color:var(--navy)!important} .capability-dropdown li a:hover{background:var(--paper)!important;color:var(--rust)!important} /* Hero / banners */ .page-banner{padding:180px 0 84px;background-color:var(--navy)} .page-banner .overlay{background:linear-gradient(105deg,rgba(7,21,34,.94),rgba(11,32,53,.62))} .page-banner h1{color:#fff;font-size:clamp(40px,5vw,64px)} .breadcrumb{color:#b9c7d1} .breadcrumb a{color:#d5e0e7} .breadcrumb a:hover{color:var(--rust-light)} .hero .hero-overlay{background:linear-gradient(90deg,rgba(7,21,34,.9),rgba(11,32,53,.48))} .hero h1,.hero p.lead{color:#fff} .hero-label{color:var(--rust-light)} /* Cards / content */ .form-panel,.machine-card,.quality-card,.precision-machine-card,.quality-practice,.info-box{border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:0 12px 35px rgba(11,32,53,.06)} .machine-card:hover,.quality-card:hover,.precision-machine-card:hover,.quality-practice:hover,.info-box:hover{border-color:rgba(244,122,31,.55);box-shadow:0 18px 45px rgba(11,32,53,.11)} .machine-photo,.machine-card-image{background:linear-gradient(145deg,#f8fafb,#edf2f5);border-bottom:1px solid var(--line)} .machine-photo span{background:var(--rust)} .machine-body h3,.machine-card h3,.quality-card h3{color:var(--navy)} .machine-body li,.machine-card li,.quality-card p,.precision-copy>p,.application-list p{color:var(--steel)} .machine-body li:before,.machine-card li:before,.application-list i,.quality-icon,.quality-badge i{color:var(--rust)} .feature-callout{background:#eef4f7;border-left-color:var(--rust);border-radius:0 8px 8px 0} .precision-note{background:linear-gradient(100deg,var(--navy),var(--navy-2));border-radius:8px;color:#dce7ee} .precision-note i{color:var(--rust-light)} .precision-note strong{color:#fff} .precision-stats,.accuracy-box,.metric-grid,.capability-strip{border-color:var(--line)} .precision-stats>div,.accuracy-box>div,.metric-grid>div,.capability-strip>div{border-color:var(--line)} .precision-stats strong,.metric-grid strong,.accuracy-box strong{color:var(--navy)} .precision-stats span,.accuracy-box span,.metric-grid span{color:var(--steel)} /* Forms */ .form-panel{padding:38px} .form-label{color:var(--navy);font-weight:800} .form-control,.form-select{border:1px solid #d4dee5;border-radius:7px;color:var(--ink);background:#fff;padding:12px 14px;min-height:48px} .form-control::placeholder{color:#9aa7b1} .form-control:focus,.form-select:focus{border-color:var(--rust);box-shadow:0 0 0 4px rgba(244,122,31,.12)} .alert-success{border:1px solid #b9dec8;background:#eefaf3;color:#175b36;border-radius:8px} /* Quote page */ .quote-side-panel{position:sticky;top:105px;background:linear-gradient(145deg,var(--navy),#123653);color:#dce7ee;padding:38px;border-radius:12px;box-shadow:0 24px 55px rgba(11,32,53,.16);overflow:hidden} .quote-side-panel:after{content:"";position:absolute;width:180px;height:180px;right:-70px;bottom:-70px;border:1px solid rgba(255,255,255,.10);border-radius:50%;box-shadow:0 0 0 28px rgba(255,255,255,.025),0 0 0 56px rgba(255,255,255,.018)} .quote-side-panel h2{color:#fff;font-size:clamp(32px,3vw,46px);margin:10px 0 16px} .quote-side-panel>p{color:#c9d7df;line-height:1.8;margin-bottom:28px} .quote-side-panel .eyebrow{color:var(--rust-light)} .quote-side-list{border-top:1px solid rgba(255,255,255,.13);margin-top:25px} .quote-side-list>div{display:flex;gap:15px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.10)} .quote-side-list i{width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(244,122,31,.4);color:var(--rust-light);border-radius:7px;flex:0 0 auto} .quote-side-list span{display:flex;flex-direction:column} .quote-side-list small{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#9fb0bc;margin-bottom:2px} .quote-side-list a,.quote-side-list strong{color:#fff;font-weight:700} .quote-side-note{display:flex;gap:12px;align-items:center;margin-top:22px;padding:15px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:8px} .quote-side-note i{font-size:24px;color:var(--rust-light)} .quote-map-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 14px 40px rgba(11,32,53,.07)} .quote-map-head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 28px;border-bottom:1px solid var(--line)} .quote-map-head h3{font-size:27px;color:var(--navy);margin:3px 0 5px} .quote-map-head p{font-size:13px;color:var(--steel);max-width:620px;margin:0} .map-directions{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;padding:11px 15px;background:var(--navy);color:#fff;border-radius:7px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em} .map-directions:hover{background:var(--rust);color:#fff} .quote-map-frame{height:360px;background:#e9eef1} .quote-map-frame iframe{width:100%;height:100%;border:0;display:block} /* Footer */ .site-footer{background:#071522;color:#aebdc7;padding:78px 0 0} .site-footer h5{color:#fff} .site-footer a{color:#aebdc7} .site-footer a:hover{color:var(--rust-light)} .footer-brand{display:flex;align-items:center;gap:14px;margin-bottom:20px} .footer-logo{width:155px;height:77px;object-fit:contain;object-position:left center;filter:drop-shadow(0 3px 10px rgba(0,0,0,.16))} .footer-brand-text{display:flex;flex-direction:column;border-left:1px solid rgba(255,255,255,.14);padding-left:14px} .footer-brand-text strong{font-family:var(--font-display);font-size:20px;letter-spacing:.08em;color:#fff} .footer-brand-text small{font-family:var(--font-mono);font-size:8px;letter-spacing:.14em;color:#8fa2af;margin-top:2px} .footer-desc{margin:0 0 22px;max-width:360px;color:#9fb0bc} .social-row{margin-top:0} .social-row a{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.14);border-radius:7px} .footer-bottom{border-top:1px solid rgba(255,255,255,.09);margin-top:55px;padding:24px 0} /* Floating controls */ .floating-wa{background:#1faa59!important;box-shadow:0 12px 28px rgba(11,32,53,.2)} .floating-wa:hover{background:#168c48!important} .to-top{background:var(--navy)!important;color:#fff!important;border-color:var(--navy)!important;border-radius:7px!important} .to-top:hover{background:var(--rust)!important;border-color:var(--rust)!important} .mobile-quote-bar{background:#fff!important;border-top:1px solid var(--line)!important;box-shadow:0 -8px 24px rgba(11,32,53,.08)} /* Better responsive spacing */ @media(max-width:991px){ .tauro-nav{padding:9px 0} .brand-logo{width:155px;height:89px} .nav-links{background:var(--navy)!important} .nav-links a:not(.btn){color:#fff!important} .nav-links a:not(.btn):hover,.nav-links a.active{color:var(--rust-light)!important} .quote-side-panel{position:relative;top:auto} .quote-map-head{align-items:flex-start;flex-direction:column} } @media(max-width:767px){ .section-pad{padding:72px 0} .form-panel{padding:24px 18px} .quote-side-panel{padding:28px 22px} .quote-map-head{padding:22px 18px} .quote-map-frame{height:300px} .map-directions{width:100%;justify-content:center} .footer-brand{align-items:flex-start} .footer-logo{width:135px} } /* ========================================================================= TAURO EXPERIENCE — 40+ YEARS ========================================================================= */ .tauro-experience-section { position: relative; overflow: hidden; } .tauro-experience-section h2 { color: var(--ink); margin: 12px 0 20px; line-height: 1.08; } .experience-lead { color: var(--steel); font-size: 18px; line-height: 1.75; max-width: 760px; margin-bottom: 14px; } .experience-copy { color: var(--steel); font-size: 16px; line-height: 1.8; max-width: 720px; margin-bottom: 28px; } .experience-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .experience-stat { min-height: 118px; padding: 20px 16px; background: var(--white); border: 1px solid rgba(20, 24, 28, 0.09); border-top: 3px solid var(--rust); box-shadow: 0 12px 30px rgba(20, 24, 28, 0.06); display: flex; flex-direction: column; justify-content: center; } .experience-stat strong { display: block; color: var(--ink); font-family: var(--font-head); font-size: 32px; line-height: 1; margin-bottom: 8px; } .experience-stat span { color: var(--steel); font-family: var(--font-mono); font-size: 11px; line-height: 1.45; letter-spacing: 0.07em; text-transform: uppercase; } .experience-highlight { position: relative; min-height: 390px; padding: 42px 38px; background: linear-gradient(145deg, var(--ink), #233744); color: var(--white); overflow: hidden; box-shadow: 0 24px 55px rgba(20, 24, 28, 0.18); } .experience-highlight::after { content: "40+"; position: absolute; right: -18px; bottom: -38px; font-family: var(--font-head); font-size: 170px; line-height: 1; font-weight: 700; color: rgba(255, 255, 255, 0.045); pointer-events: none; } .experience-icon { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 26px; background: var(--rust); color: var(--white); font-size: 25px; } .experience-highlight > span { position: relative; z-index: 1; display: block; margin-bottom: 12px; color: var(--rust-light); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; } .experience-highlight h3 { position: relative; z-index: 1; max-width: 400px; margin: 0 0 18px; color: var(--white); font-family: var(--font-head); font-size: 32px; line-height: 1.08; } .experience-highlight p { position: relative; z-index: 1; max-width: 420px; margin: 0; color: rgba(255, 255, 255, 0.78); font-size: 15px; line-height: 1.75; } .experience-badge { position: absolute; right: 30px; top: 32px; z-index: 2; display: flex; align-items: baseline; gap: 7px; padding: 9px 13px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); } .experience-badge span { color: rgba(255, 255, 255, 0.58); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; } .experience-badge strong { color: var(--rust-light); font-family: var(--font-head); font-size: 22px; } @media (max-width: 991px) { .experience-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .experience-highlight { min-height: 340px; } } @media (max-width: 575px) { .experience-stats { grid-template-columns: 1fr 1fr; gap: 10px; } .experience-stat { min-height: 105px; padding: 15px 13px; } .experience-stat strong { font-size: 27px; } .experience-highlight { padding: 34px 25px; } .experience-highlight h3 { font-size: 28px; } .experience-badge { position: static; width: fit-content; margin-top: 24px; } } /* ========================================================================= OUR MACHINES — ADDITIONAL PAGE ONLY Existing site styles remain unchanged. ========================================================================= */ .machines-hero{min-height:680px;background:var(--ink);position:relative;overflow:hidden;display:flex;align-items:center;color:#fff} .machines-hero-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,24,28,.97) 0%,rgba(20,24,28,.86) 48%,rgba(20,24,28,.45) 100%),url('../images/precision/cnc-zone.jpg') center/cover no-repeat;transform:scale(1.02)} .machines-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,24,28,.55),transparent 35%);pointer-events:none} .machines-hero-inner{width:100%;position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:60px;padding-top:90px;padding-bottom:70px} .machines-hero-copy{max-width:760px} .machines-hero .breadcrumb{display:flex;gap:12px;align-items:center;margin-bottom:34px;color:#cdd6dc;font-size:13px}.machines-hero .breadcrumb a{color:#fff}.machines-hero .breadcrumb span{opacity:.55} .machines-hero h1{font-size:clamp(58px,8vw,112px);color:#fff;letter-spacing:-.025em;margin-bottom:20px} .machines-hero-copy>p:not(.breadcrumb){max-width:650px;color:#cdd6dc;font-size:18px;line-height:1.75} .machines-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px} .machines-hero-stamp{width:178px;height:178px;border:1px solid rgba(255,255,255,.35);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;position:relative;background:rgba(10,14,18,.22);backdrop-filter:blur(5px)} .machines-hero-stamp::before{content:"";position:absolute;inset:9px;border:1px dashed rgba(255,255,255,.22);border-radius:50%}.machines-hero-stamp span{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em}.machines-hero-stamp strong{font-family:var(--font-display);font-size:52px;line-height:.95;color:#fff}.machines-hero-stamp small{text-align:center;font-family:var(--font-mono);font-size:8px;letter-spacing:.14em;color:#cdd6dc} .machines-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)} .machines-stat{padding:32px 24px;text-align:center;border-right:1px solid var(--line)}.machines-stat:last-child{border-right:0}.machines-stat strong{display:block;font-family:var(--font-display);font-size:42px;line-height:1;color:var(--ink)}.machines-stat span{display:block;margin-top:8px;color:var(--steel);font-family:var(--font-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase} .machines-intro{padding-top:78px;padding-bottom:78px}.machines-intro h2{font-size:clamp(34px,4.5vw,58px)}.machines-intro .col-lg-5 p{font-size:16px;color:var(--steel);line-height:1.8;max-width:520px;margin-left:auto} .machines-fleet{background:#fff;padding-top:95px}.machine-group{padding-bottom:96px}.machine-group+.machine-group{padding-top:96px;border-top:1px solid var(--line)}.machine-group-head{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:end;margin-bottom:42px}.machine-group-head h2{font-size:clamp(32px,4vw,52px)}.machine-group-head>p{color:var(--steel);font-size:15.5px;line-height:1.8;max-width:520px;margin:0 0 3px auto} .machine-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.machine-group:nth-child(n+2) .machine-grid{grid-template-columns:repeat(4,1fr)}.machine-card{background:var(--paper);border:1px solid var(--line);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}.machine-card:hover{transform:translateY(-7px);box-shadow:0 18px 45px rgba(20,24,28,.12);border-color:rgba(168,71,31,.35)}.machine-image-wrap{height:235px;position:relative;overflow:hidden;background:#dfe2e4}.machine-image-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(10,14,18,.52));pointer-events:none}.machine-image-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}.machine-card:hover .machine-image-wrap img{transform:scale(1.06)}.machine-year{position:absolute;top:14px;right:14px;z-index:2;background:var(--rust);color:#fff;padding:7px 10px;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em}.machine-number{position:absolute;left:15px;bottom:12px;z-index:2;color:#fff;font-size:18px}.machine-card-body{padding:22px 20px 23px}.machine-card-body h3{font-size:22px;margin-bottom:17px;min-height:48px}.machine-card-body ul{list-style:none;padding:0;margin:0}.machine-card-body li{font-size:12.5px;color:var(--steel);display:flex;gap:5px;line-height:1.5;padding:5px 0;border-top:1px solid var(--line)}.machine-card-body li i{color:var(--rust);font-size:17px;line-height:1.1}.machine-note{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 17px;border-left:2px solid var(--rust);background:var(--paper);color:var(--steel);font-size:12.5px}.machine-note i{color:var(--rust);font-size:18px;flex-shrink:0} .machines-precision{overflow:hidden}.machines-precision h2{font-size:clamp(34px,4.4vw,58px);color:#fff;max-width:620px;margin-bottom:20px}.machines-dark-copy{color:#bfc9cf;max-width:600px;font-size:16px;line-height:1.8}.machines-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.machines-badges span{border:1px solid var(--line-light);padding:11px 13px;color:#e8eaec;font-size:11px;font-family:var(--font-mono);letter-spacing:.06em}.machines-badges i{color:#e8926a;margin-right:7px}.machines-feature-image{height:420px;position:relative;overflow:hidden;background:#0f171d}.machines-feature-image img{width:100%;height:100%;object-fit:cover;opacity:.9}.machines-feature-caption{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;background:linear-gradient(transparent,rgba(0,0,0,.9));color:#fff;padding-top:70px}.machines-feature-caption span{font-family:var(--font-mono);color:#e8926a;font-size:11px;margin-right:10px}.machines-feature-caption strong{font-family:var(--font-display);font-size:23px;text-transform:uppercase}.machines-feature-caption small{display:block;color:#cdd6dc;margin:5px 0 0 27px} .machines-cta{background:var(--paper)}.machines-cta-box{background:#fff;border:1px solid var(--line);padding:45px 50px;display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;overflow:hidden}.machines-cta-box::after{content:"TAURO";position:absolute;right:-12px;bottom:-45px;font-family:var(--font-display);font-size:160px;line-height:1;color:rgba(20,24,28,.035);pointer-events:none}.machines-cta-box h2{font-size:clamp(34px,4vw,52px);margin-bottom:9px}.machines-cta-box p{color:var(--steel)}.machines-cta-box .btn{position:relative;z-index:1;flex-shrink:0} @media (max-width: 1199px){ .machines-hero-inner{gap:35px} .machines-hero-copy{max-width:680px} .machine-grid,.machine-group:nth-child(n+2) .machine-grid{grid-template-columns:repeat(3,1fr)} .machine-image-wrap{height:245px} } @media (max-width: 991px){ .machines-hero{min-height:610px} .machines-hero-inner{padding-top:105px;padding-bottom:65px} .machines-hero-copy{max-width:100%} .machines-hero-stamp{width:135px;height:135px} .machines-hero-stamp strong{font-size:40px} .machines-hero h1{font-size:clamp(58px,9vw,82px)} .machines-hero-copy>p:not(.breadcrumb){font-size:16px;max-width:620px} .machine-group-head{grid-template-columns:1fr;gap:18px;align-items:start} .machine-group-head>p{margin:0;max-width:650px} .machine-grid,.machine-group:nth-child(n+2) .machine-grid{grid-template-columns:repeat(2,1fr)} .machines-intro{padding-top:65px;padding-bottom:65px} .machines-cta-box{padding:38px 35px} } @media (max-width: 767px){ .machines-hero{min-height:640px} .machines-hero-inner{padding-top:92px;padding-bottom:55px;display:block} .machines-hero-stamp{display:none} .machines-hero .breadcrumb{margin-bottom:25px;font-size:12px;gap:9px} .machines-hero h1{font-size:58px;line-height:.98;margin-bottom:18px} .machines-hero-copy>p:not(.breadcrumb){font-size:15px;line-height:1.7} .machines-hero-actions{margin-top:27px;gap:10px} .machines-hero-actions .btn{width:100%;justify-content:center} .machines-stat-grid{grid-template-columns:repeat(2,1fr)} .machines-stat{padding:24px 10px} .machines-stat:nth-child(2){border-right:0} .machines-stat:nth-child(-n+2){border-bottom:1px solid var(--line)} .machines-stat strong{font-size:34px} .machines-stat span{font-size:9px;line-height:1.45} .machines-intro{padding-top:58px;padding-bottom:58px} .machines-intro h2{font-size:39px;line-height:1.03} .machines-intro .col-lg-5 p{margin-left:0;font-size:15px;line-height:1.75} .machine-group{padding-bottom:62px} .machine-group+.machine-group{padding-top:62px} .machine-group-head{display:block;margin-bottom:30px} .machine-group-head h2{font-size:39px;line-height:1.03} .machine-group-head>p{margin:15px 0 0;font-size:14px;line-height:1.75} .machine-grid,.machine-group:nth-child(n+2) .machine-grid{grid-template-columns:1fr;gap:16px} .machine-image-wrap{height:250px} .machine-card-body{padding:20px 18px 21px} .machine-card-body h3{font-size:21px;min-height:0;margin-bottom:14px} .machine-card-body li{font-size:12px} .machine-note{align-items:flex-start;font-size:12px;line-height:1.55} .machines-cta{padding-top:58px;padding-bottom:58px} .machines-cta-box{padding:30px 23px;display:block} .machines-cta-box h2{font-size:39px;line-height:1.03} .machines-cta-box p{font-size:14px;line-height:1.7} .machines-cta-box .btn{margin-top:22px;width:100%;justify-content:center} } @media (max-width: 420px){ .machines-hero h1{font-size:51px} .machines-stat strong{font-size:30px} .machines-intro h2,.machine-group-head h2,.machines-cta-box h2{font-size:34px} .machine-image-wrap{height:220px} }