/* ========================================================================== TORQUEFUSION ROBOTICS — style.css Design system: Graphite & Copper You normally do not need to edit this file. Colours are at the top. ========================================================================== */ /* --- 1. DESIGN TOKENS ---------------------------------------------------- */ :root { /* Colour — monochrome base from the logo, with cool tints for secondary text and a trace of rust in the corners. */ --void: #000000; /* page background */ --graphite: #0B0C0D; /* raised panels */ --graphite2: #141618; /* hover panels */ --steel: #333A3F; /* borders, rules */ --steel-dim: #202528; /* faint rules */ --accent: #FFFFFF; /* highlight */ --accent-lt: #FFFFFF; --accent-dk: #5A6166; --ice: #9FB6C4; /* faded blue — data, part codes, spec labels */ --sage: #9CC2AC; /* faded green — section eyebrows */ --rust: #B2643A; /* rusty orange — corner atmosphere */ --rust-lt: #D98A4E; /* rusty orange — line work */ --violet: #7C6BF0; /* tech accent — structure, systems */ --cyan: #22D3EE; /* tech accent — sensing, vision */ --amber: #E0A23C; /* tech accent — power, drive */ /* Per-page accent. Each page sets --page on ; textures and eyebrows pick it up so the sections read as different rooms in the same building. */ --page: var(--ice); --mist: #A9B4BA; /* body text */ --mist-dim: #7C878E; /* captions */ --white: #FFFFFF; /* headings */ /* Type */ --f-display: "Archivo", "Arial Black", sans-serif; --f-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, "Courier New", monospace; /* Layout */ --gutter: 40px; --maxw: 1320px; --nav-h: 84px; /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* --- 2. RESET ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--void); color: var(--mist); font-family: var(--f-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } h1, h2, h3, h4 { margin: 0; color: var(--white); font-family: var(--f-display); } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } ::selection { background: var(--accent); color: #000; } /* Rust in the corners. Fixed, behind everything, deliberately faint. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(58vw 46vh at 0% 0%, rgba(178,100,58,.085), transparent 68%), radial-gradient(52vw 44vh at 100% 12%, rgba(178,100,58,.055), transparent 68%), radial-gradient(60vw 48vh at 100% 100%, rgba(178,100,58,.075), transparent 68%), radial-gradient(46vw 40vh at 0% 92%, rgba(178,100,58,.05), transparent 68%); } body > * { position: relative; z-index: 1; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* --- 3. LAYOUT PRIMITIVES ------------------------------------------------ */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: 130px; position: relative; } .section--tight { padding-block: 90px; } /* Hairline rule between sections — reads like a drawing border */ /* Doubled hairline — the logo's two-bar element */ .rule-top { border-top: 1px solid var(--steel-dim); position: relative; } .rule-top::after { content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 1px; background: var(--steel-dim); } /* Blueprint grid background */ .grid-bg::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--steel-dim) 1px, transparent 1px), linear-gradient(90deg, var(--steel-dim) 1px, transparent 1px); background-size: 68px 68px; opacity: .5; mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%); pointer-events: none; z-index: 0; } .grid-bg > * { position: relative; z-index: 1; } /* --- 4. TYPE SCALE ------------------------------------------------------- */ .eyebrow { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--sage); display: flex; align-items: center; gap: 12px; margin-bottom: 26px; } .eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--sage); flex: none; } .eyebrow--plain::before { display: none; } .h-xl { font-size: clamp(2.9rem, 7.2vw, 5.6rem); font-weight: 800; line-height: .96; letter-spacing: -.03em; font-stretch: 112%; text-transform: uppercase; } .h-lg { font-size: clamp(1.95rem, 3.7vw, 2.95rem); font-weight: 800; line-height: 1.03; letter-spacing: -.025em; font-stretch: 108%; text-transform: uppercase; } .h-md { font-size: clamp(1.4rem, 2.3vw, 1.85rem); font-weight: 700; line-height: 1.18; letter-spacing: -.015em; } .h-sm { font-size: 1.06rem; font-weight: 700; line-height: 1.35; letter-spacing: -.005em; } .lead { font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.7; color: var(--mist); max-width: 62ch; } /* Outlined display type — echoes the logo's parallel-stroke mark */ .hl { color: transparent; -webkit-text-stroke: 1.6px var(--white); paint-order: stroke fill; } @supports not (-webkit-text-stroke: 1px #fff) { .hl { color: var(--mist); } } .hl-solid { color: var(--white); } .mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mist-dim); } /* --- 5. BUTTONS ---------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 11px; padding: 15px 26px; font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--steel); background: transparent; color: var(--white); transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); white-space: nowrap; } .btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(255,255,255,.08); } .btn svg { width: 15px; height: 15px; flex: none; transition: transform .3s var(--ease); } .btn:hover svg { transform: translateX(4px); } .btn--solid { background: var(--white); border-color: var(--white); color: #000; } .btn--solid:hover { background: var(--mist); border-color: var(--mist); color: #000; } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; } /* --- 6. NAVIGATION ------------------------------------------------------- */ .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 100; display: flex; align-items: center; border-bottom: 1px solid transparent; transition: background .4s var(--ease), border-color .4s var(--ease), height .4s var(--ease); } .nav.is-stuck { background: rgba(10,12,13,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--steel-dim); height: 64px; } .nav__inner { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 30px; } .logo { display: flex; align-items: center; } .logo img { height: 36px; width: auto; transition: opacity .3s var(--ease); } .logo:hover img { opacity: .78; } .nav.is-stuck .logo img { height: 30px; } .footer .logo img { height: 52px; } .mobile-menu .logo img { height: 34px; } .logo__mark { font-family: var(--f-display); font-weight: 800; font-size: 1.16rem; letter-spacing: -.02em; color: var(--white); text-transform: uppercase; font-stretch: 110%; } .logo__mark em { font-style: normal; color: var(--accent); } .logo__sub { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .28em; color: var(--mist-dim); text-transform: uppercase; } .nav__links { display: flex; align-items: center; gap: 34px; } .nav__links a { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--mist); position: relative; padding-block: 6px; transition: color .25s var(--ease); } .nav__links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--accent); transition: width .3s var(--ease); } .nav__links a:hover, .nav__links a.is-active { color: var(--white); } .nav__links a:hover::after, .nav__links a.is-active::after { width: 100%; } .nav__cta { display: flex; align-items: center; gap: 14px; } .nav__cta .btn { padding: 11px 19px; } .burger { display: none; width: 42px; height: 42px; background: none; border: 1px solid var(--steel); position: relative; } .burger span { position: absolute; left: 11px; width: 18px; height: 1.5px; background: var(--white); transition: transform .3s var(--ease), opacity .2s; } .burger span:nth-child(1) { top: 15px; } .burger span:nth-child(2) { top: 20px; } .burger span:nth-child(3) { top: 25px; } .burger.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); } .burger.is-open span:nth-child(2) { opacity: 0; } .burger.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } .mobile-menu { position: fixed; inset: 0; background: var(--void); z-index: 99; padding: calc(var(--nav-h) + 40px) var(--gutter) 40px; display: flex; flex-direction: column; gap: 4px; transform: translateY(-100%); transition: transform .5s var(--ease); overflow-y: auto; } .mobile-menu.is-open { transform: translateY(0); } .mobile-menu a:not(.btn) { font-family: var(--f-display); font-size: 2rem; font-weight: 800; text-transform: uppercase; color: var(--white); padding-block: 15px; border-bottom: 1px solid var(--steel-dim); letter-spacing: -.02em; } .mobile-menu .btn { margin-top: 34px; justify-content: center; color: #000; } /* --- 7. HERO ------------------------------------------------------------- */ .hero { min-height: 100svh; padding-top: calc(var(--nav-h) + 60px); padding-bottom: 60px; display: flex; align-items: center; position: relative; overflow: hidden; } .hero__glow { position: absolute; width: 900px; height: 900px; right: -240px; top: 50%; transform: translateY(-50%); background: radial-gradient(circle, rgba(255,255,255,.055) 0%, transparent 62%); pointer-events: none; z-index: 0; } .hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.02fr .98fr; gap: 60px; align-items: center; width: 100%; } .hero__title { margin-bottom: 32px; font-size: clamp(2.05rem, 4.7vw, 3.85rem); } .hero__title .line { display: block; overflow: hidden; } .hero__title .line > span { display: block; white-space: nowrap; } .hero__stats { display: flex; gap: 0; margin-top: 44px; border-top: 1px solid var(--steel-dim); flex-wrap: nowrap; } .hero__stat { padding: 20px 18px 0 0; margin-right: 18px; flex: 1 1 0; min-width: 0; border-right: 1px solid var(--steel-dim); } .hero__stat:last-child { border-right: none; margin-right: 0; } .hero__stat > b { display: block; font-family: var(--f-display); font-size: 1.72rem; font-weight: 800; color: var(--white); line-height: 1; letter-spacing: -.02em; } .hero__stat > span { font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ice); display: block; margin-top: 9px; } /* --- 8. SIGNATURE: TECHNICAL DRAWING FRAME ------------------------------- */ /* Product images sit inside a GA-drawing style frame with dimension lines */ .tdf { position: relative; padding: 46px; } .tdf__corner { position: absolute; width: 24px; height: 24px; border: 1px solid var(--accent); opacity: .8; } .tdf__corner--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; } .tdf__corner--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; } .tdf__corner--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; } .tdf__corner--br { bottom: 0; right: 0; border-left: 0; border-top: 0; } .tdf__stage { position: relative; overflow: hidden; aspect-ratio: 1 / 1; display: grid; place-items: center; border: 1px solid var(--steel-dim); background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.05), transparent 60%), var(--graphite); } .tdf__stage img { width: 82%; object-fit: contain; } /* Technical schematics — drawn, not photographed */ .schem { width: 84%; height: auto; } .schem__spin { transform-origin: 200px 200px; animation: spin 90s linear infinite; } .tdf__stage--flat .schem__spin { animation: none; } /* Crosshair reticle */ .tdf__stage::before, .tdf__stage::after { content: ""; position: absolute; background: var(--steel); opacity: .55; } .tdf__stage::before { left: 0; right: 0; top: 50%; height: 1px; } .tdf__stage::after { top: 0; bottom: 0; left: 50%; width: 1px; } .tdf__tag { position: absolute; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ice); background: var(--void); padding: 4px 9px; border: 1px solid var(--steel); z-index: 3; white-space: nowrap; } .tdf__tag--tl { top: 34px; left: 34px; } .tdf__tag--br { bottom: 34px; right: 34px; color: var(--sage); border-color: var(--accent-dk); } /* Rotating product */ .spin { animation: spin 46s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* --- 9. MARQUEE ---------------------------------------------------------- */ .marquee { border-block: 1px solid var(--steel-dim); padding-block: 22px; overflow: hidden; background: var(--graphite); } .marquee__track { display: flex; gap: 60px; width: max-content; animation: slide 38s linear infinite; } .marquee__track span { font-family: var(--f-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--mist-dim); display: flex; align-items: center; gap: 60px; white-space: nowrap; } .marquee__track span::after { content: ""; width: 16px; height: 5px; border-top: 1px solid var(--mist-dim); border-bottom: 1px solid var(--mist-dim); } @keyframes slide { to { transform: translateX(-50%); } } /* --- 10. SECTION HEADER -------------------------------------------------- */ .sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 70px; } .sec-head--center { grid-template-columns: 1fr; text-align: center; max-width: 760px; margin-inline: auto; } .sec-head--center .eyebrow { justify-content: center; } .sec-head--center .lead { margin-inline: auto; } /* --- 11. CARDS ----------------------------------------------------------- */ .cards { display: grid; gap: 1px; background: var(--steel-dim); border: 1px solid var(--steel-dim); } .cards--3 { grid-template-columns: repeat(3, 1fr); } .cards--2 { grid-template-columns: repeat(2, 1fr); } .cards--4 { grid-template-columns: repeat(4, 1fr); } .card { background: var(--void); padding: 44px 36px; transition: background .4s var(--ease); position: relative; } .card:hover { background: var(--graphite); } .card__no { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em; color: var(--ice); display: block; margin-bottom: 26px; } .card h3 { margin-bottom: 14px; } .card p { font-size: 15px; color: var(--mist); } .card__ico { width: 34px; height: 34px; stroke: var(--accent); stroke-width: 1.4; fill: none; margin-bottom: 24px; } /* --- 12. PRODUCT BLOCK --------------------------------------------------- */ .prod { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; padding-block: 90px; border-top: 1px solid var(--steel-dim); } .prod--flip .prod__media { order: 2; } .prod__name { display: block; font-family: var(--f-display); font-size: clamp(3.6rem, 7.4vw, 6rem); font-weight: 900; font-stretch: 118%; letter-spacing: -.05em; -webkit-text-stroke: .5px currentColor; line-height: .86; color: var(--white); margin-bottom: 10px; position: relative; display: inline-block; } .prod__name::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 5px; background: var(--page, var(--ice)); } .prod__name em { font-style: normal; color: transparent; -webkit-text-stroke: 1.5px var(--ice); } .prod__kind { display: block; font-family: var(--f-mono); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--page, var(--ice)); margin-top: 16px; margin-bottom: 26px; } .prod__code { font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; color: var(--ice); margin-bottom: 18px; display: block; } .prod h2 { margin-bottom: 18px; } /* Spec table — reads like a datasheet */ .spec { width: 100%; border-collapse: collapse; margin-top: 34px; font-family: var(--f-mono); font-size: 12.5px; } .spec tr { border-bottom: 1px solid var(--steel-dim); } .spec tr:first-child { border-top: 1px solid var(--steel-dim); } .spec td { padding: 13px 0; } .spec td:first-child { color: var(--ice); letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; width: 52%; } .spec td:last-child { color: var(--white); text-align: right; font-weight: 500; } /* --- 13. STAT BAND ------------------------------------------------------- */ .band { background: var(--graphite); border-block: 1px solid var(--steel-dim); } .band__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--steel-dim); } .band__cell { background: var(--graphite); padding: 52px 34px; text-align: center; } .band__cell > b { display: block; font-family: var(--f-display); font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; color: var(--accent); line-height: 1; letter-spacing: -.03em; } .band__cell > span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ice); display: block; margin-top: 15px; } /* --- 14. SPLIT / FEATURE ------------------------------------------------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .split--wide { grid-template-columns: 1.15fr .85fr; } .checklist li { display: flex; gap: 15px; padding-block: 15px; border-bottom: 1px solid var(--steel-dim); font-size: 15px; align-items: flex-start; } .checklist li::before { content: ""; width: 6px; height: 6px; background: var(--white); transform: rotate(45deg); margin-top: 9px; flex: none; } .checklist li b { color: var(--white); font-weight: 600; } /* --- 15. TIMELINE / PROCESS --------------------------------------------- */ .steps { border-top: 1px solid var(--steel-dim); } .step { display: grid; grid-template-columns: 120px 1fr 1.4fr; gap: 40px; padding-block: 34px; border-bottom: 1px solid var(--steel-dim); align-items: baseline; transition: background .35s var(--ease); } .step:hover { background: var(--graphite); } .step__no { font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; color: var(--ice); } .step p { font-size: 15px; } /* --- 16. CTA BLOCK ------------------------------------------------------- */ .cta-block { border: 1px solid var(--steel); padding: 76px 60px; text-align: center; background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(255,255,255,.05), transparent 70%), var(--graphite); } .cta-block .btn-row { justify-content: center; } /* --- 17. FORM ------------------------------------------------------------ */ .form { display: grid; gap: 20px; } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .field label { font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ice); display: block; margin-bottom: 9px; } .field input, .field textarea, .field select { width: 100%; background: var(--graphite); border: 1px solid var(--steel); color: var(--white); padding: 14px 16px; font-family: var(--f-body); font-size: 15px; transition: border-color .3s var(--ease), background .3s var(--ease); } .field textarea { resize: vertical; min-height: 130px; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); background: var(--graphite2); } .field input::placeholder, .field textarea::placeholder { color: var(--mist-dim); } /* --- 18. FOOTER ---------------------------------------------------------- */ .footer { border-top: 1px solid var(--steel-dim); padding-top: 80px; } .footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 50px; padding-bottom: 60px; } .footer h4 { font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ice); margin-bottom: 22px; } .footer__links li { margin-bottom: 12px; } .footer__links a { font-size: 14.5px; color: var(--mist); transition: color .25s; } .footer__links a:hover { color: var(--accent); } .footer__bottom { border-top: 1px solid var(--steel-dim); padding-block: 28px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mist-dim); } /* --- 20. PAGE HEADER (inner pages) -------------------------------------- */ .pagehead { padding-top: calc(var(--nav-h) + 110px); padding-bottom: 90px; position: relative; overflow: hidden; border-bottom: 1px solid var(--steel-dim); } .pagehead .lead { margin-top: 26px; } /* --- 21. ANIMATION HOOKS ------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(28px); } .js-off .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } .reveal { opacity: 1 !important; transform: none !important; } html { scroll-behavior: auto; } .spin, .marquee__track { animation: none !important; } } /* --- 22. RESPONSIVE ------------------------------------------------------ */ @media (max-width: 1080px) { :root { --gutter: 28px; } .cards--4 { grid-template-columns: repeat(2, 1fr); } .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .nav__links { display: none; } .nav__cta .btn { display: none; } .burger { display: block; } .hero__inner { grid-template-columns: 1fr; gap: 50px; } .hero { padding-top: calc(var(--nav-h) + 44px); min-height: auto; } .sec-head { grid-template-columns: 1fr; gap: 26px; } .cards--3, .cards--2 { grid-template-columns: 1fr; } .prod, .split, .split--wide { grid-template-columns: 1fr; gap: 44px; } .prod--flip .prod__media { order: 0; } .band__grid { grid-template-columns: repeat(2, 1fr); } .step { grid-template-columns: 1fr; gap: 12px; } .section { padding-block: 84px; } .cta-block { padding: 50px 26px; } .form__row { grid-template-columns: 1fr; } .tdf { padding: 26px; } } @media (max-width: 560px) { .band__grid { grid-template-columns: 1fr; } .hero__stats { flex-wrap: wrap; } .hero__stat { flex: 1 1 45%; border-right: none; } .footer__grid { grid-template-columns: 1fr; gap: 36px; } .hero__stat { padding-right: 20px; margin-right: 20px; } .hero__stat > b { font-size: 1.5rem; } .card { padding: 34px 24px; } .mobile-menu a:not(.btn) { font-size: 1.5rem; } }