/* ========================================================================== Ramatech Machine Tools — Design System Brand: cyan-blue (#0FA3DE) primary · red (#E8262C) accent · deep ink text Fonts: Outfit (headings) · Inter (body) ========================================================================== */ /* ---------- 1. Tokens ---------------------------------------------------- */ :root { --rm-blue: #0FA3DE; --rm-blue-600: #0B87BC; --rm-blue-700: #086C97; --rm-blue-soft: #E8F6FD; --rm-red: #E8262C; --rm-red-600: #C51A20; --rm-red-soft: #FDECEC; --rm-ink: #0C1C2C; --rm-ink-2: #1D3247; --rm-body: #5C6E7E; --rm-line: #E2ECF3; --rm-soft: #F4F9FC; --rm-white: #ffffff; --rm-grad: linear-gradient(135deg, var(--rm-blue) 0%, var(--rm-blue-700) 100%); --rm-grad-red: linear-gradient(135deg, var(--rm-red) 0%, var(--rm-red-600) 100%); --rm-shadow-sm: 0 2px 10px rgba(12, 28, 44, .06); --rm-shadow: 0 12px 34px rgba(12, 28, 44, .09); --rm-shadow-lg: 0 24px 60px rgba(12, 28, 44, .14); --rm-radius: 14px; --rm-radius-lg: 22px; --rm-ease: cubic-bezier(.4, 0, .2, 1); --rm-head: 'Outfit', sans-serif; --rm-text: 'Inter', sans-serif; } /* ---------- 2. Base ------------------------------------------------------ */ * { box-sizing: border-box; } /* The closed off-canvas drawer sits at translateX(105%); without clipping on too it widens the document and lets the page scroll sideways. `clip` rather than `hidden`: hidden turns html/body into scroll containers, and a position:sticky descendant then has nothing to stick to — it scrolls away instead. `hidden` is kept first as the fallback for browsers that do not know `clip` (they lose sticky, not the clipping). */ html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; } body { margin: 0; font-family: var(--rm-text); font-size: 16px; line-height: 1.75; color: var(--rm-body); background: var(--rm-white); overflow-x: hidden; overflow-x: clip; /* see the note on above */ -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--rm-head); color: var(--rm-ink); font-weight: 700; line-height: 1.22; margin: 0 0 14px; letter-spacing: -.015em; } h1 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); font-weight: 800; } h2 { font-size: clamp(1.75rem, 3.1vw, 2.6rem); } h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); } h4 { font-size: 1.15rem; } p { margin: 0 0 16px; } p:last-child { margin-bottom: 0; } /* ---- Justified body copy ------------------------------------------------ hyphens:auto goes with it: without hyphenation, justifying a narrow card column stretches the word spacing into visible "rivers" of white. It relies on , which is set. */ main p, .rm-footer-top p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; } /* Text that must not be justified — either it is centred, or it is short enough that justifying only opens gaps in a line or two. */ .rm-head-center p, .rm-hero-lead, .rm-page-banner-lead, .rm-counter-num, .rm-counter-sub, .rm-testi-stars, .rm-about-exp, .rm-about-call, .rm-section-more, .rm-cta-copy p, .rm-faq-help p, /* the form's success/error line — justifying a one-off status message spaces its words right across the panel */ .rm-form-note, .rm-post-meta, .rm-side-cta p, .rm-footer-cities { text-align: initial; -webkit-hyphens: manual; hyphens: manual; } .rm-head-center p { text-align: center; } a { color: var(--rm-blue); text-decoration: none; transition: color .25s var(--rm-ease); } a:hover { color: var(--rm-red); } img { max-width: 100%; height: auto; display: block; } ul { margin: 0; padding: 0; list-style: none; } ::selection { background: var(--rm-blue); color: #fff; } .rm-soft-bg { background: var(--rm-soft); } .rm-ink-bg { background: var(--rm-ink); } /* Available to screen readers, removed from the visual layout. Used for the section headings that carry a landmark's accessible name but would be redundant on screen (the capability strip, the counters band). */ .rm-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Keyboard-only shortcut past the header into the page content. */ .rm-skip { position: absolute; left: 16px; top: -100px; z-index: 2000; background: var(--rm-ink); color: #fff; font-family: var(--rm-head); font-weight: 600; font-size: 14px; padding: 12px 20px; border-radius: 0 0 10px 10px; transition: top .25s var(--rm-ease); } .rm-skip:focus { top: 0; color: #fff; } /* centred "view all" row under a grid or slider */ .rm-section-more { text-align: center; margin: 40px 0 0; } .rm-section-more-tight { margin-top: 30px; } /* Bootstrap's container falls to 12px of side padding below 576px, which leaves text almost touching the screen edge on a phone. */ @media (max-width: 575px) { .container { padding-left: 20px; padding-right: 20px; } } /* The bundled bootstrap.min.css ships a customised xxl container of 1429px — on a 1440 screen that leaves 5px of margin and every section runs to the window edges. Restored to Bootstrap's own 1320px. Overridden here rather than patched in the vendor file so a Bootstrap update cannot silently undo it. */ @media (min-width: 1400px) { .container { max-width: 1320px; } } section { position: relative; } .rm-section { padding: 100px 0; } .rm-section-sm { padding: 70px 0; } /* ---------- 3. Buttons --------------------------------------------------- */ .rm-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--rm-head); font-weight: 600; font-size: 15px; line-height: 1; padding: 16px 30px; border-radius: 10px; border: 0; cursor: pointer; position: relative; overflow: hidden; transition: all .3s var(--rm-ease); white-space: nowrap; } .rm-btn i { font-size: 14px; transition: transform .3s var(--rm-ease); } .rm-btn:hover i { transform: translateX(4px); } .rm-btn-primary { background: var(--rm-grad); color: #fff; box-shadow: 0 10px 24px rgba(15, 163, 222, .3); } .rm-btn-primary:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 16px 32px rgba(15, 163, 222, .4); } .rm-btn-red { background: var(--rm-grad-red); color: #fff; box-shadow: 0 10px 24px rgba(232, 38, 44, .28); } .rm-btn-red:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 16px 32px rgba(232, 38, 44, .38); } .rm-btn-ghost { background: transparent; color: var(--rm-ink); border: 1.5px solid var(--rm-line); } .rm-btn-ghost:hover { background: var(--rm-ink); border-color: var(--rm-ink); color: #fff; transform: translateY(-3px); } .rm-btn-white { background: #fff; color: var(--rm-ink); box-shadow: var(--rm-shadow); } .rm-btn-white:hover { color: var(--rm-blue); transform: translateY(-3px); } .rm-btn-sm { padding: 12px 22px; font-size: 14px; } /* ---------- 4. Section heading ------------------------------------------ */ .rm-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--rm-head); font-weight: 600; font-size: 13px; letter-spacing: .13em; text-transform: uppercase; color: var(--rm-red); background: var(--rm-red-soft); padding: 8px 18px; border-radius: 60px; margin-bottom: 18px; } .rm-eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--rm-red); border-radius: 2px; } .rm-eyebrow.is-blue { color: var(--rm-blue-700); background: var(--rm-blue-soft); } .rm-eyebrow.is-blue::before { background: var(--rm-blue); } .rm-eyebrow.on-dark { color: #fff; background: rgba(255, 255, 255, .12); } .rm-eyebrow.on-dark::before { background: var(--rm-red); } .rm-head-center { text-align: center; max-width: 800px; margin: 0 auto 55px; } .rm-head-center p { color: var(--rm-body); } .rm-head-left { max-width: 640px; margin-bottom: 45px; } .rm-title-line { color: var(--rm-blue); } /* ---------- 5. Header top bar ------------------------------------------- */ .rm-topbar { background: var(--rm-ink); color: rgba(255, 255, 255, .78); font-size: 14px; padding: 10px 0; } .rm-topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .rm-topbar-left { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .rm-topbar a { color: rgba(255, 255, 255, .78); display: inline-flex; align-items: center; gap: 8px; } .rm-topbar a:hover { color: var(--rm-blue); } .rm-topbar i { color: var(--rm-blue); font-size: 14px; } .rm-topbar-social { display: flex; align-items: center; gap: 10px; } .rm-topbar-social span { font-size: 13px; letter-spacing: .04em; } .rm-topbar-social ul { display: flex; gap: 7px; } .rm-topbar-social a { width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .09); display: grid; place-items: center; font-size: 13px; } .rm-topbar-social a i { color: #fff; } .rm-topbar-social a svg { display: block; } .rm-topbar-social a:hover { background: var(--rm-blue); } /* ---------- 6. Main header / nav ---------------------------------------- */ .rm-header { position: relative; z-index: 900; } .rm-header-main { background: #fff; border-bottom: 1px solid var(--rm-line); transition: box-shadow .3s var(--rm-ease); } .rm-header-main.is-stuck { position: fixed; top: 0; left: 0; right: 0; z-index: 950; box-shadow: 0 6px 24px rgba(12, 28, 44, .1); animation: rmDrop .4s var(--rm-ease); } @keyframes rmDrop { from { transform: translateY(-100%); } to { transform: translateY(0); } } .rm-header-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 100px; } .rm-logo img { max-height: 68px; width: auto; } .rm-nav > ul { display: flex; align-items: center; gap: 4px; } .rm-nav > ul > li { position: relative; } .rm-nav > ul > li > a { font-family: var(--rm-head); font-weight: 600; font-size: 15.5px; color: var(--rm-ink); padding: 32px 15px; display: inline-flex; align-items: center; gap: 7px; position: relative; } .rm-nav > ul > li > a::after { content: ''; position: absolute; left: 15px; right: 15px; bottom: 24px; height: 2px; background: var(--rm-red); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--rm-ease); } .rm-nav > ul > li:hover > a, .rm-nav > ul > li.is-active > a { color: var(--rm-blue); } .rm-nav > ul > li:hover > a::after, .rm-nav > ul > li.is-active > a::after { transform: scaleX(1); } .rm-nav .rm-caret { font-size: 11px; transition: transform .3s var(--rm-ease); } .rm-nav > ul > li:hover .rm-caret { transform: rotate(180deg); } /* dropdown */ .rm-submenu { position: absolute; top: 100%; left: 0; min-width: 250px; background: #fff; border-radius: 12px; box-shadow: var(--rm-shadow-lg); padding: 12px; border-top: 3px solid var(--rm-blue); opacity: 0; visibility: hidden; transform: translateY(14px); transition: all .3s var(--rm-ease); } .rm-nav li:hover > .rm-submenu { opacity: 1; visibility: visible; transform: translateY(0); } .rm-submenu a { display: block; padding: 10px 14px; border-radius: 8px; color: var(--rm-ink-2); font-size: 15px; font-weight: 500; } .rm-submenu a:hover { background: var(--rm-blue-soft); color: var(--rm-blue-700); padding-left: 20px; } /* mega menu — anchored to the header container so it lines up with the grid */ .rm-header-in { position: relative; } .rm-nav > ul > li.has-mega { position: static; } .rm-mega { position: absolute; top: 100%; left: 0; right: 0; transform: translateY(14px); background: #fff; border-radius: 0 0 16px 16px; box-shadow: var(--rm-shadow-lg); border-top: 3px solid var(--rm-blue); overflow: hidden; display: grid; grid-template-columns: 300px 1fr; opacity: 0; visibility: hidden; transition: all .32s var(--rm-ease); } .rm-nav li:hover > .rm-mega { opacity: 1; visibility: visible; transform: translateY(0); } /* left rail: vertical category tabs */ .rm-mega-tabs { background: var(--rm-soft); border-right: 1px solid var(--rm-line); padding: 20px 16px; display: flex; flex-direction: column; gap: 6px; } .rm-mega-tab { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 11px; padding: 13px 14px; cursor: pointer; color: var(--rm-ink); transition: all .28s var(--rm-ease); } .rm-mega-tab > i:first-child { width: 40px; height: 40px; border-radius: 10px; background: #fff; border: 1px solid var(--rm-line); color: var(--rm-blue); display: grid; place-items: center; font-size: 16px; flex-shrink: 0; transition: all .28s var(--rm-ease); } .rm-mega-tab span { flex: 1; min-width: 0; } .rm-mega-tab b { display: block; font-family: var(--rm-head); font-weight: 600; font-size: 14.8px; line-height: 1.3; } .rm-mega-tab small { font-size: 12.3px; color: var(--rm-body); } .rm-mega-tab-arrow { font-size: 12px; color: var(--rm-body); transition: transform .28s var(--rm-ease); } .rm-mega-tab:hover { background: #fff; } .rm-mega-tab.is-active { background: var(--rm-grad); color: #fff; box-shadow: 0 8px 20px rgba(15, 163, 222, .28); } .rm-mega-tab.is-active > i:first-child { background: rgba(255, 255, 255, .18); border-color: transparent; color: #fff; } .rm-mega-tab.is-active small { color: rgba(255, 255, 255, .8); } .rm-mega-tab.is-active .rm-mega-tab-arrow { color: #fff; transform: translateX(3px); } .rm-mega-all { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rm-line); display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--rm-head); font-weight: 600; font-size: 14px; color: var(--rm-red); } .rm-mega-all i { transition: transform .28s var(--rm-ease); } .rm-mega-all:hover i { transform: translateX(4px); } /* Right pane: product cards for the active category. No height cap — the panel grows to whatever the category needs so every machine is visible at once. min-height keeps the short ranges (4 and 5 cards) from looking stunted next to the tab rail. */ .rm-mega-panels { padding: 22px; min-height: 300px; } .rm-mega-panel { display: none; grid-template-columns: repeat(5, 1fr); gap: 14px; } .rm-mega-panel.is-active { display: grid; animation: rmFadeIn .3s var(--rm-ease); } @keyframes rmFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .rm-mega-prod { display: block; border: 1px solid var(--rm-line); border-radius: 11px; padding: 10px; transition: all .28s var(--rm-ease); } .rm-mega-prod:hover { border-color: var(--rm-blue); box-shadow: 0 10px 22px rgba(12, 28, 44, .09); transform: translateY(-4px); } .rm-mega-prod-img { display: block; background: var(--rm-soft); border-radius: 8px; overflow: hidden; margin-bottom: 9px; } .rm-mega-prod-img img { width: 100%; aspect-ratio: 1/1; object-fit: contain; mix-blend-mode: multiply; transition: transform .4s var(--rm-ease); } .rm-mega-prod:hover .rm-mega-prod-img img { transform: scale(1.07); } .rm-mega-prod-name { display: block; font-family: var(--rm-head); font-weight: 500; font-size: 12.8px; line-height: 1.4; color: var(--rm-ink-2); } .rm-mega-prod:hover .rm-mega-prod-name { color: var(--rm-blue-700); } .rm-header-end { display: flex; align-items: center; gap: 14px; } .rm-burger { display: none; width: 46px; height: 46px; border-radius: 10px; background: var(--rm-blue-soft); color: var(--rm-blue-700); border: 0; font-size: 19px; cursor: pointer; place-items: center; } /* ---------- 7. Mobile offcanvas ----------------------------------------- */ /* Three tabs across the top — Menu, Products, Contact. The panel is a flex column so the head and the tab bar stay put while only the pane scrolls; the range panels slide in over the top from the same edge. */ .rm-offcanvas { position: fixed; top: 0; right: 0; width: min(380px, 88vw); height: 100%; background: #fff; z-index: 1100; display: flex; flex-direction: column; overflow: hidden; /* the panes scroll, not the shell */ transform: translateX(105%); transition: transform .4s var(--rm-ease); box-shadow: -10px 0 40px rgba(12, 28, 44, .18); } .rm-offcanvas.is-open { transform: translateX(0); } .rm-offcanvas-top { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--rm-line); background: #fff; } /* width:auto keeps the logo on its own aspect ratio — the img carries width/height attributes so the browser can reserve space before it loads, and without this those attributes would stretch it to the container. */ .rm-offcanvas-top img { max-height: 42px; width: auto; } .rm-oc-close { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 9px; border: 0; background: var(--rm-red-soft); color: var(--rm-red); font-size: 17px; cursor: pointer; } /* ---- tabs ---- */ .rm-oc-tabs { flex: 0 0 auto; display: flex; background: var(--rm-soft); border-bottom: 1px solid var(--rm-line); } .rm-oc-tab { flex: 1 1 0; padding: 13px 6px; border: 0; border-bottom: 2px solid transparent; background: transparent; font-family: var(--rm-head); font-weight: 700; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--rm-body); cursor: pointer; transition: all .25s var(--rm-ease); } .rm-oc-tab.is-on { background: #fff; color: var(--rm-blue-700); border-bottom-color: var(--rm-blue); } /* ---- panes ---- */ .rm-oc-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .rm-oc-pane { display: none; } .rm-oc-pane.is-on { display: block; } .rm-oc-list > li { border-bottom: 1px solid var(--rm-line); } .rm-oc-list > li > a, .rm-oc-cat { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 18px; font-family: var(--rm-head); font-weight: 600; font-size: 15.4px; line-height: 1.4; color: var(--rm-ink); background: none; border: 0; text-align: left; cursor: pointer; transition: all .25s var(--rm-ease); } .rm-oc-list > li > a:hover, .rm-oc-cat:hover { background: var(--rm-soft); color: var(--rm-blue-700); } .rm-oc-list > li > a.is-active { color: var(--rm-blue-700); background: var(--rm-blue-soft); box-shadow: inset 3px 0 0 var(--rm-blue); } .rm-oc-cat > span:nth-child(2) { flex: 1; min-width: 0; } .rm-oc-cat b { display: block; font-weight: 600; } .rm-oc-cat small { font-size: 12.4px; font-weight: 400; color: var(--rm-body); } .rm-oc-cat-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--rm-blue-soft); color: var(--rm-blue-700); display: grid; place-items: center; font-size: 15px; flex-shrink: 0; } .rm-oc-all { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 16px 18px 22px; padding: 12px; border-radius: 10px; background: var(--rm-grad); color: #fff; font-family: var(--rm-head); font-weight: 600; font-size: 14.5px; } .rm-oc-all:hover { color: #fff; opacity: .92; } /* ---- second level: one panel per range ---- */ .rm-oc-sub { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; background: #fff; transform: translateX(100%); transition: transform .34s var(--rm-ease); } .rm-oc-sub[hidden] { display: none; } .rm-oc-sub.is-on { transform: translateX(0); } .rm-oc-back { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--rm-head); font-weight: 600; font-size: 15.4px; color: var(--rm-ink); } .rm-oc-back i { width: 32px; height: 32px; border-radius: 9px; background: var(--rm-soft); border: 1px solid var(--rm-line); color: var(--rm-blue-700); display: grid; place-items: center; font-size: 14px; flex-shrink: 0; } .rm-oc-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rm-oc-sub .rm-oc-list > li > a { font-size: 14.4px; font-weight: 500; } /* ---- contact pane ---- */ .rm-oc-contact { padding: 18px; } .rm-oc-contact a, .rm-oc-contact p { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; margin: 0; color: var(--rm-ink-2); font-size: 15px; line-height: 1.5; } .rm-oc-contact i { flex: 0 0 18px; margin-top: 3px; color: var(--rm-blue); text-align: center; } .rm-oc-phone span { font-family: var(--rm-head); font-size: 18px; font-weight: 700; color: var(--rm-ink); } .rm-oc-wa i { color: #25D366; } .rm-oc-addr { color: var(--rm-body); font-size: 14px; } .rm-oc-quote { width: 100%; justify-content: center; margin-top: 14px; } .rm-overlay { position: fixed; inset: 0; background: rgba(12, 28, 44, .5); backdrop-filter: blur(3px); z-index: 1050; opacity: 0; visibility: hidden; transition: all .35s var(--rm-ease); } .rm-overlay.is-open { opacity: 1; visibility: visible; } /* ---------- 8. Hero ------------------------------------------------------ */ /* Desktop runs Ramatech's own designed banner (1920x750) full-bleed: its left ~47% is deliberately empty for copy, the right half carries the red panel and the three hexagon machine shots. Below 992px that empty strip is far too narrow for a headline, so the banner steps aside and each slide shows its own machine card instead — see the tablet/mobile blocks in the responsive section. */ .rm-hero { position: relative; background: var(--rm-soft); overflow: hidden; } .rm-hero::before { content: ''; position: absolute; top: -180px; right: -140px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(15, 163, 222, .18) 0%, transparent 68%); border-radius: 50%; } .rm-hero-slide { padding: 90px 0 100px; } /* Banner artwork sits behind each slide's copy. Off by default: below 992px the strip is far too narrow for a headline, so the slide falls back to the machine card instead. Switched on in the desktop block in section 23. */ .rm-hero-bg { display: none; } .rm-hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 50px; align-items: center; position: relative; z-index: 2; } /* Only the first slide carries the page's

; the other two are

, so the slide headline is styled by class rather than by tag. */ .rm-hero .rm-hero-title { font-size: clamp(2.1rem, 4.2vw, 3.6rem); font-weight: 800; margin-bottom: 20px; } .rm-hero .rm-hero-title span { color: var(--rm-blue); } .rm-hero-lead { font-size: 17px; max-width: 560px; margin-bottom: 30px; } .rm-hero-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; } .rm-hero-visual { position: relative; } /* Offset brand frame behind the stage — gives the photo a deliberate, engineered edge instead of leaving it floating on the background. It offsets down-left because the card already sits flush with the container's right edge; offsetting right would push the line off-screen. */ .rm-hero-hex { position: absolute; inset: 24px 24px -20px -20px; border: 2px solid var(--rm-red); border-radius: 26px; opacity: .5; z-index: 0; } .rm-hero-hex::after { content: ''; position: absolute; top: -52px; right: -14px; width: 108px; height: 120px; background: var(--rm-blue); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); opacity: .14; } .rm-hero-visual-main { position: relative; z-index: 1; border-radius: 26px; overflow: hidden; box-shadow: 0 30px 70px rgba(12, 28, 44, .17); } /* The machine photos are square and ship on the same pale-blue-to-white studio backdrop. A near-square card lets the photo fill the panel edge to edge — no letterbox seam — while the ~10% vertical crop stays inside the wide empty margin every shot has, so no part of the machine is lost. */ /* Crop budget, measured from the three source photos: the machine occupies rows 316-962 / 388-982 / 412-960 of 1000, i.e. at least 31% empty backdrop above but as little as 1.8% below the feet. A 6% total excess biased 86% to the top takes 5.2% off the sky and only 0.8% off the floor, so every machine keeps its legs while the photo still fills the card edge to edge. */ .rm-hero-visual-main img { width: 100%; aspect-ratio: 1/0.94; object-fit: cover; object-position: 50% 86%; background: linear-gradient(180deg, #D2E9F7 0%, #E4F2FB 38%, #F6FBFE 70%, #FFFFFF 100%); } .rm-hero-tag { position: absolute; top: 20px; left: 20px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .82); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .9); color: var(--rm-ink); font-family: var(--rm-head); font-weight: 600; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 15px; border-radius: 60px; box-shadow: 0 6px 18px rgba(12, 28, 44, .08); } .rm-hero-tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--rm-red); } .rm-hero-badge { position: absolute; left: -22px; bottom: 30px; z-index: 2; background: #fff; border-radius: 16px; padding: 16px 20px; box-shadow: 0 18px 40px rgba(12, 28, 44, .14); display: flex; align-items: center; gap: 13px; max-width: 250px; } .rm-hero-badge-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--rm-grad-red); color: #fff; display: grid; place-items: center; font-size: 19px; flex-shrink: 0; } .rm-hero-badge b { display: block; font-family: var(--rm-head); color: var(--rm-ink); font-size: 15px; line-height: 1.3; } .rm-hero-badge small { font-size: 12.5px; color: var(--rm-body); } /* Bullets are rendered as numbered progress tracks — see the pagination block in the responsive section for their styling. */ .rm-hero .swiper-pagination { position: static; margin-top: 8px; } /* ---------- 8b. Inner-page banner --------------------------------------- */ /* Contained and light: the panel sits inside the container so it never runs to the window edges, and the workshop photo fades in from the right instead of sitting under a dark scrim. */ .rm-page-banner { padding: 34px 0 0; background: #fff; } .rm-page-banner-panel { position: relative; overflow: hidden; isolation: isolate; border-radius: 26px; border: 1px solid var(--rm-line); padding: 66px 48px; background: linear-gradient(112deg, #E9F4FB 0%, #F4FAFD 48%, #FFFFFF 100%); } /* photo occupies the right half and dissolves into the gradient */ .rm-page-banner-bg { position: absolute; right: 0; top: 0; bottom: 0; z-index: -2; width: 60%; height: 100%; object-fit: cover; object-position: right center; opacity: .85; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%); mask-image: linear-gradient(to right, transparent 0%, #000 45%); } .rm-page-banner-hex { position: absolute; top: -54px; right: 7%; z-index: -1; width: 210px; height: 234px; background: var(--rm-red); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); opacity: .1; } .rm-page-banner-in { max-width: 640px; } .rm-page-banner h1 { color: var(--rm-ink); font-size: clamp(2rem, 3.6vw, 3.1rem); margin-bottom: 14px; } .rm-page-banner-lead { color: var(--rm-body); font-size: 16.5px; margin-bottom: 22px; max-width: 560px; } /* breadcrumb */ .rm-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--rm-head); font-size: 14.2px; font-weight: 500; } .rm-crumbs li { display: flex; align-items: center; gap: 8px; color: var(--rm-body); } .rm-crumbs li + li::before { content: '\f054'; font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free'; font-weight: 900; font-size: 9px; color: var(--rm-red); } .rm-crumbs a { color: var(--rm-body); } .rm-crumbs a:hover { color: var(--rm-blue); } .rm-crumbs [aria-current="page"] span { color: var(--rm-ink); font-weight: 600; } /* ---------- 9. Capability strip ----------------------------------------- */ /* Cards on a tinted band rather than one flush row: the cards reflow cleanly at every breakpoint (no divider bookkeeping) and the tint separates the strip from both the banner above and the white About section below. */ .rm-trust { background: var(--rm-soft); border-bottom: 1px solid var(--rm-line); padding: 36px 0; } .rm-trust-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } /* Stacked at the 5-column width: side-by-side leaves only ~150px for the label and breaks most of them over two lines. Below 1200px the cards get wide enough that the horizontal form reads better — see the responsive section. */ .rm-trust-item { background: #fff; border: 1px solid var(--rm-line); border-radius: var(--rm-radius); padding: 24px 20px; transition: all .32s var(--rm-ease); } .rm-trust-item:hover { transform: translateY(-5px); border-color: transparent; box-shadow: var(--rm-shadow); } .rm-trust-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--rm-blue-soft); color: var(--rm-blue-700); display: grid; place-items: center; font-size: 19px; flex-shrink: 0; margin-bottom: 15px; transition: all .32s var(--rm-ease); } .rm-trust-item:hover .rm-trust-icon { background: var(--rm-grad); color: #fff; box-shadow: 0 8px 18px rgba(15, 163, 222, .32); } .rm-trust-item:nth-child(2n) .rm-trust-icon { background: var(--rm-red-soft); color: var(--rm-red-600); } .rm-trust-item:nth-child(2n):hover .rm-trust-icon { background: var(--rm-grad-red); color: #fff; box-shadow: 0 8px 18px rgba(232, 38, 44, .3); } .rm-trust-copy { display: block; min-width: 0; } .rm-trust-copy b { display: block; font-family: var(--rm-head); font-weight: 600; font-size: 15px; line-height: 1.32; color: var(--rm-ink); margin-bottom: 3px; } .rm-trust-copy small { font-size: 12.7px; line-height: 1.45; display: block; color: var(--rm-body); } /* ---------- 10. About ---------------------------------------------------- */ /* No padding-right any more: it used to hold the gap for a second, smaller image that overhung this block on the right. That inset is gone, so the photo takes the full column. */ .rm-about-media { position: relative; } .rm-about-img-1 { border-radius: 22px; overflow: hidden; box-shadow: var(--rm-shadow); } .rm-about-img-1 img { width: 100%; aspect-ratio: 4/4.4; object-fit: cover; } .rm-about-exp { position: absolute; left: -18px; top: 32px; background: var(--rm-grad); color: #fff; border-radius: 16px; padding: 18px 22px; margin: 0; text-align: center; box-shadow: 0 14px 34px rgba(15, 163, 222, .35); } .rm-about-exp strong { display: block; font-family: var(--rm-head); font-size: 2.4rem; font-weight: 800; line-height: 1; } .rm-about-exp strong em { font-style: normal; font-size: 1.4rem; } .rm-about-exp span { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; } .rm-about-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 26px 0 30px; } .rm-about-point { display: flex; align-items: flex-start; gap: 11px; background: var(--rm-soft); border-radius: 12px; padding: 14px 16px; border-left: 3px solid var(--rm-blue); } .rm-about-point i { color: var(--rm-blue); font-size: 15px; margin-top: 4px; } .rm-about-point b { font-family: var(--rm-head); color: var(--rm-ink); font-size: 15px; display: block; } .rm-about-point small { font-size: 13px; line-height: 1.5; display: block; } .rm-about-sign { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid var(--rm-line); } .rm-about-call { display: flex; align-items: center; gap: 13px; margin: 0; } .rm-about-call-icon { width: 50px; height: 50px; border-radius: 50%; background: var(--rm-red-soft); color: var(--rm-red); display: grid; place-items: center; font-size: 19px; } .rm-about-call small { display: block; font-size: 13px; } .rm-about-call a { font-family: var(--rm-head); font-weight: 700; font-size: 18px; color: var(--rm-ink); } .rm-about-call a:hover { color: var(--rm-blue); } /* ---------- 10b. Pull quote (About) ------------------------------------- */ .rm-quote-note { display: flex; gap: 14px; background: var(--rm-blue-soft); border-left: 3px solid var(--rm-blue); border-radius: 0 12px 12px 0; padding: 18px 20px; margin: 26px 0 30px; } .rm-quote-note > i { color: var(--rm-blue); font-size: 18px; margin-top: 3px; flex-shrink: 0; } .rm-quote-note p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--rm-ink-2); } .rm-quote-note strong { color: var(--rm-ink); } /* ---------- 10c. Mission / vision / values ------------------------------ */ .rm-mv-card { background: #fff; border: 1px solid var(--rm-line); border-radius: var(--rm-radius-lg); padding: 34px 30px; height: 100%; transition: all .35s var(--rm-ease); } .rm-mv-card:hover { border-color: transparent; box-shadow: var(--rm-shadow); transform: translateY(-6px); } .rm-mv-icon { width: 60px; height: 60px; border-radius: 16px; background: var(--rm-grad); color: #fff; display: grid; place-items: center; font-size: 23px; margin-bottom: 20px; transition: all .35s var(--rm-ease); } .rm-mv-card:nth-child(2) .rm-mv-icon { background: var(--rm-grad-red); } .rm-mv-card:hover .rm-mv-icon { transform: scale(1.06) rotate(-4deg); } .rm-mv-card h3 { font-size: 19px; margin-bottom: 10px; } .rm-mv-card p { font-size: 14.8px; line-height: 1.72; margin: 0; } /* ---------- 10d. Strengths grid ----------------------------------------- */ .rm-strength-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .rm-strength-card { background: var(--rm-soft); border: 1px solid var(--rm-line); border-radius: var(--rm-radius); padding: 28px 24px; transition: all .35s var(--rm-ease); } .rm-strength-card:hover { background: #fff; border-color: transparent; box-shadow: var(--rm-shadow); transform: translateY(-6px); } .rm-strength-icon { width: 50px; height: 50px; border-radius: 13px; background: #fff; border: 1px solid var(--rm-line); color: var(--rm-blue); display: grid; place-items: center; font-size: 19px; margin-bottom: 17px; transition: all .35s var(--rm-ease); } .rm-strength-card:hover .rm-strength-icon { background: var(--rm-grad); border-color: transparent; color: #fff; box-shadow: 0 8px 18px rgba(15, 163, 222, .3); } .rm-strength-card h3 { font-size: 17px; margin-bottom: 8px; } .rm-strength-card p { font-size: 14.3px; line-height: 1.65; margin: 0; } /* ---------- 10e. FAQ accordion ------------------------------------------ */ .rm-faq-item { background: #fff; border: 1px solid var(--rm-line); border-radius: var(--rm-radius); margin-bottom: 12px; overflow: hidden; transition: all .3s var(--rm-ease); } .rm-faq-item.is-open { border-color: var(--rm-blue); box-shadow: var(--rm-shadow-sm); } .rm-faq-item h3 { margin: 0; font-size: inherit; } .rm-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; background: none; border: 0; cursor: pointer; padding: 19px 22px; font-family: var(--rm-head); font-weight: 600; font-size: 16px; line-height: 1.4; color: var(--rm-ink); transition: color .25s var(--rm-ease); } .rm-faq-q:hover { color: var(--rm-blue); } .rm-faq-item.is-open .rm-faq-q { color: var(--rm-blue-700); } .rm-faq-q i { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: var(--rm-blue-soft); color: var(--rm-blue-700); display: grid; place-items: center; font-size: 12px; transition: all .3s var(--rm-ease); } .rm-faq-item.is-open .rm-faq-q i { background: var(--rm-grad); color: #fff; transform: rotate(135deg); } /* height is animated from JS, which measures scrollHeight */ .rm-faq-a { height: 0; overflow: hidden; transition: height .32s var(--rm-ease); } .rm-faq-a p { padding: 0 22px 20px; margin: 0; font-size: 14.9px; line-height: 1.75; } .rm-faq-help { display: flex; gap: 14px; align-items: flex-start; background: var(--rm-soft); border-radius: var(--rm-radius); padding: 18px 20px; margin: 24px 0 26px; } .rm-faq-help-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--rm-grad-red); color: #fff; display: grid; place-items: center; font-size: 18px; flex-shrink: 0; } .rm-faq-help b { display: block; font-family: var(--rm-head); color: var(--rm-ink); font-size: 15.5px; margin-bottom: 3px; } .rm-faq-help a { display: block; font-size: 14.6px; color: var(--rm-ink-2); overflow-wrap: anywhere; } .rm-faq-help a:hover { color: var(--rm-blue); } /* ---------- 10f. Quality page ------------------------------------------- */ /* two shop-floor photos, the second overlapping the first */ .rm-quality-media { position: relative; padding: 0 0 60px 60px; } /* ratios kept close to the sources (1.19 and 1.31) so the crop stays light */ .rm-quality-media img:first-child { width: 100%; aspect-ratio: 1/0.82; object-fit: cover; border-radius: 22px; box-shadow: var(--rm-shadow); } .rm-quality-media img:last-child { position: absolute; left: 0; bottom: 0; width: 48%; aspect-ratio: 1/0.78; object-fit: cover; border-radius: 18px; border: 7px solid #fff; box-shadow: var(--rm-shadow); } /* 3:2 variant, for the wider shop-floor shots used on the category pages */ .rm-media-wide img:first-child, .rm-media-wide img:last-child { aspect-ratio: 1/0.67; } /* the assurance strip runs four across rather than five */ .rm-trust-grid-4 { grid-template-columns: repeat(4, 1fr); } /* numbered build process */ .rm-process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: none; } .rm-process-step { position: relative; display: flex; gap: 16px; background: #fff; border: 1px solid var(--rm-line); border-radius: var(--rm-radius); padding: 26px 24px; transition: all .35s var(--rm-ease); } .rm-process-step:hover { border-color: transparent; box-shadow: var(--rm-shadow); transform: translateY(-6px); } .rm-process-num { flex-shrink: 0; font-family: var(--rm-head); font-weight: 800; font-size: 30px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--rm-blue); transition: all .35s var(--rm-ease); } .rm-process-step:hover .rm-process-num { color: var(--rm-blue); -webkit-text-stroke-color: transparent; } .rm-process-step:nth-child(3n+2) .rm-process-num { -webkit-text-stroke-color: var(--rm-red); } .rm-process-step:nth-child(3n+2):hover .rm-process-num { color: var(--rm-red); } .rm-process-body { min-width: 0; } .rm-process-body h3 { font-size: 17.5px; margin-bottom: 9px; } .rm-process-body p { font-size: 14.4px; line-height: 1.68; margin: 0; } /* closing promise panel */ .rm-promise { display: flex; gap: 30px; align-items: flex-start; background: #fff; border: 1px solid var(--rm-line); border-radius: var(--rm-radius-lg); padding: 44px 42px; box-shadow: var(--rm-shadow-sm); } .rm-promise-mark { flex-shrink: 0; width: 78px; height: 78px; border-radius: 20px; background: var(--rm-grad); color: #fff; display: grid; place-items: center; font-size: 30px; box-shadow: 0 14px 30px rgba(15, 163, 222, .3); } .rm-promise h2 { margin-bottom: 12px; } .rm-promise p { margin-bottom: 24px; } /* ---------- 10g. Application page --------------------------------------- */ /* what gets printed */ .rm-mark-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .rm-mark-card { display: flex; gap: 15px; background: var(--rm-soft); border: 1px solid var(--rm-line); border-radius: var(--rm-radius); padding: 24px 22px; transition: all .35s var(--rm-ease); } .rm-mark-card:hover { background: #fff; border-color: transparent; box-shadow: var(--rm-shadow); transform: translateY(-5px); } .rm-mark-icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 13px; background: #fff; border: 1px solid var(--rm-line); color: var(--rm-blue); display: grid; place-items: center; font-size: 18px; transition: all .35s var(--rm-ease); } .rm-mark-card:hover .rm-mark-icon { background: var(--rm-grad); border-color: transparent; color: #fff; } .rm-mark-card:nth-child(3n+2):hover .rm-mark-icon { background: var(--rm-grad-red); } .rm-mark-card h3 { font-size: 16.5px; margin-bottom: 7px; } .rm-mark-card p { font-size: 14.2px; line-height: 1.62; margin: 0; } /* industry cards with copy */ .rm-app-card { background: #fff; border: 1px solid var(--rm-line); border-radius: var(--rm-radius-lg); overflow: hidden; height: 100%; transition: all .35s var(--rm-ease); } .rm-app-card:hover { border-color: transparent; box-shadow: var(--rm-shadow-lg); transform: translateY(-7px); } .rm-app-thumb { position: relative; overflow: hidden; } /* 3/2 matches the 600x400 sources exactly, so nothing is cropped */ .rm-app-thumb img { width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform .6s var(--rm-ease); } .rm-app-card:hover .rm-app-thumb img { transform: scale(1.07); } /* Sits in the body and is pulled up over the image by its negative margin — placing it in .rm-app-thumb would put it under that element's overflow:hidden and slice the badge in half. */ .rm-app-icon { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--rm-grad); color: #fff; font-size: 19px; margin: -26px 0 16px; box-shadow: 0 10px 22px rgba(15, 163, 222, .32); } .rm-app-body { padding: 0 24px 26px; } .rm-app-body h3 { font-size: 18px; margin-bottom: 10px; } .rm-app-body p { font-size: 14.4px; line-height: 1.68; margin: 0; } /* job → machine matcher */ .rm-match-list { display: flex; flex-direction: column; gap: 14px; } .rm-match-row { display: grid; grid-template-columns: 60px 230px 1fr 46px; align-items: center; gap: 20px; background: #fff; border: 1px solid var(--rm-line); border-radius: var(--rm-radius); padding: 20px 22px; transition: all .32s var(--rm-ease); } .rm-match-row:hover { border-color: var(--rm-blue); box-shadow: var(--rm-shadow); } .rm-match-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--rm-blue-soft); color: var(--rm-blue-700); display: grid; place-items: center; font-size: 20px; transition: all .32s var(--rm-ease); } .rm-match-row:hover .rm-match-icon { background: var(--rm-grad); color: #fff; } .rm-match-job { font-family: var(--rm-head); font-weight: 600; font-size: 16px; color: var(--rm-ink); line-height: 1.35; } .rm-match-sol { min-width: 0; } .rm-match-sol b { display: block; font-family: var(--rm-head); font-size: 15px; color: var(--rm-blue-700); margin-bottom: 3px; } .rm-match-sol small { font-size: 14px; line-height: 1.6; color: var(--rm-body); display: block; } .rm-match-link { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--rm-line); color: var(--rm-ink); display: grid; place-items: center; font-size: 14px; transition: all .3s var(--rm-ease); } .rm-match-row:hover .rm-match-link { background: var(--rm-grad-red); border-color: transparent; color: #fff; } /* ---------- 11. Category cards ------------------------------------------ */ .rm-cat-card { position: relative; border-radius: var(--rm-radius-lg); overflow: hidden; background: #fff; box-shadow: var(--rm-shadow-sm); border: 1px solid var(--rm-line); height: 100%; transition: all .38s var(--rm-ease); } .rm-cat-card:hover { transform: translateY(-8px); box-shadow: var(--rm-shadow-lg); border-color: transparent; } .rm-cat-thumb { position: relative; overflow: hidden; background: var(--rm-soft); } /* Same crop budget as the hero. These are the identical square studio shots (machine occupies rows 316-962 / 388-982 / 412-960 of 1000), so a 4:3 box with a centred crop sliced the machines' legs off. A near-square box biased 86% to the top takes 5.2% off the empty backdrop and 0.8% off the floor. */ .rm-cat-thumb img { width: 100%; aspect-ratio: 1/0.94; object-fit: cover; object-position: 50% 86%; transition: transform .6s var(--rm-ease); } /* Zoom from the bottom edge so the growth eats into the empty backdrop above the machine instead of clipping the legs the crop was tuned to preserve. */ .rm-cat-card:hover .rm-cat-thumb img { transform: scale(1.07); transform-origin: 50% 100%; } .rm-cat-body { padding: 26px 26px 28px; } .rm-cat-body h3 { margin-bottom: 10px; } .rm-cat-body h3 a { color: inherit; } .rm-cat-card:hover .rm-cat-body h3 a { color: var(--rm-blue); } .rm-cat-body p { font-size: 14.8px; margin-bottom: 18px; } .rm-cat-link { display: inline-flex; align-items: center; gap: 9px; font-family: var(--rm-head); font-weight: 600; font-size: 14.5px; color: var(--rm-red); } .rm-cat-link i { transition: transform .3s var(--rm-ease); } .rm-cat-link:hover i { transform: translateX(5px); } /* ---------- 12. Product cards ------------------------------------------- */ .rm-prod-card { background: #fff; border: 1px solid var(--rm-line); border-radius: var(--rm-radius); overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: all .35s var(--rm-ease); } .rm-prod-card:hover { border-color: var(--rm-blue); box-shadow: var(--rm-shadow); transform: translateY(-6px); } .rm-prod-thumb { position: relative; background: var(--rm-soft); overflow: hidden; padding: 14px; } .rm-prod-thumb img { width: 100%; aspect-ratio: 1/1; object-fit: contain; transition: transform .5s var(--rm-ease); mix-blend-mode: multiply; } .rm-prod-card:hover .rm-prod-thumb img { transform: scale(1.06); } .rm-prod-tag { position: absolute; top: 12px; right: 12px; background: var(--rm-blue-soft); color: var(--rm-blue-700); font-size: 11.5px; font-weight: 600; font-family: var(--rm-head); padding: 5px 11px; border-radius: 60px; letter-spacing: .04em; } .rm-prod-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; } .rm-prod-body h3 { font-size: 16.5px; line-height: 1.4; margin-bottom: 14px; } .rm-prod-body h3 a { color: inherit; } .rm-prod-card:hover h3 a { color: var(--rm-blue); } .rm-prod-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; } .rm-prod-foot .rm-btn { flex: 1; justify-content: center; padding: 11px 14px; font-size: 13.5px; } .rm-prod-wa { width: 42px; height: 42px; border-radius: 9px; background: #25D366; color: #fff; display: grid; place-items: center; font-size: 17px; flex-shrink: 0; transition: all .3s var(--rm-ease); } .rm-prod-wa:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(37, 211, 102, .35); } /* --- product slider controls -------------------------------------------- */ .rm-prod-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 34px; } .rm-prod-nav { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--rm-line); background: #fff; color: var(--rm-ink); font-size: 15px; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; transition: all .3s var(--rm-ease); } .rm-prod-nav:hover { background: var(--rm-grad); border-color: transparent; color: #fff; transform: translateY(-3px); box-shadow: 0 10px 22px rgba(15, 163, 222, .32); } .rm-prod-nav.swiper-button-disabled { opacity: .35; cursor: default; transform: none; box-shadow: none; } .rm-prod-pagination { position: static; width: auto !important; display: flex; align-items: center; justify-content: center; gap: 7px; } .rm-prod-pagination .swiper-pagination-bullet { width: 9px; height: 9px; margin: 0 !important; background: var(--rm-ink); opacity: .2; transition: all .3s var(--rm-ease); } .rm-prod-pagination .swiper-pagination-bullet-active { opacity: 1; background: var(--rm-blue); width: 26px; border-radius: 5px; } /* Three dots, not twelve. dynamicBullets alone does not do this: Swiper leaves every bullet in the row and merely scales the distant ones down, so twelve machines still produced a long trail of specks. Only the active dot and its two neighbours are shown here, which keeps the row the same width wherever the slider is. The container transform is Swiper sliding its window along the full strip — with a fixed three-dot row there is nothing to slide, so it is reset. */ .rm-prod-pagination.swiper-pagination-bullets-dynamic { transform: none !important; overflow: visible; white-space: nowrap; } /* position:static matters. Swiper slides its window by writing an inline `left` on every bullet — 52px on the first slide, easing to 0 by the third. With the row trimmed to three that offset has nothing to compensate for and simply pushed the dots to the right until you had swiped a few times. Taking the bullets out of relative positioning ignores it, so flex centres them from the first paint. */ .rm-prod-pagination.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: none; position: static; } .rm-prod-pagination.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main, .rm-prod-pagination.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev, .rm-prod-pagination.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { display: block; transform: none !important; } /* At the very first dot there is no -prev, which would leave only two. Borrow the next one along so the count holds. Browsers without :has() simply show two dots on that one position — no worse than before. */ .rm-prod-pagination.swiper-pagination-bullets-dynamic:not(:has(.swiper-pagination-bullet-active-prev)) .swiper-pagination-bullet-active-next-next, .rm-prod-pagination.swiper-pagination-bullets-dynamic:not(:has(.swiper-pagination-bullet-active-next)) .swiper-pagination-bullet-active-prev-prev { display: block; transform: none !important; } /* ---------- 12b. Machine cards (category pages) -------------------------- */ .rm-machine-card { background: #fff; border: 1px solid var(--rm-line); border-radius: var(--rm-radius-lg); overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: all .35s var(--rm-ease); } .rm-machine-card:hover { border-color: transparent; box-shadow: var(--rm-shadow-lg); transform: translateY(-7px); } .rm-machine-thumb { display: block; background: var(--rm-soft); padding: 16px; overflow: hidden; } .rm-machine-thumb img { width: 100%; aspect-ratio: 1/1; object-fit: contain; mix-blend-mode: multiply; transition: transform .5s var(--rm-ease); } .rm-machine-card:hover .rm-machine-thumb img { transform: scale(1.06); } .rm-machine-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; } /* a machine can sit in more than one range, so this may show two tags */ .rm-machine-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; } .rm-machine-tags span { background: var(--rm-blue-soft); color: var(--rm-blue-700); font-family: var(--rm-head); font-weight: 600; font-size: 11.5px; letter-spacing: .03em; padding: 4px 11px; border-radius: 60px; } .rm-machine-body h3 { font-size: 17.5px; line-height: 1.4; margin-bottom: 10px; } .rm-machine-body h3 a { color: inherit; } .rm-machine-card:hover .rm-machine-body h3 a { color: var(--rm-blue); } .rm-machine-body p { font-size: 14.3px; line-height: 1.68; margin-bottom: 18px; } .rm-machine-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; } /* --- city pages ------------------------------------------------------------- Machines are grouped under a range heading, so the tile title drops from h3 to h4 to keep the outline correct. Same look, one level down. */ .rm-machine-body h4 { font-size: 17.5px; line-height: 1.4; margin-bottom: 0; } .rm-machine-body h4 a { color: inherit; } .rm-machine-card:hover .rm-machine-body h4 a { color: var(--rm-blue); } .rm-city-range + .rm-city-range { margin-top: 54px; } .rm-city-range-title { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px 18px; font-size: clamp(1.15rem, 1.7vw, 1.45rem); margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--rm-line); } .rm-city-range-title a { font-family: var(--rm-body); font-size: 14.5px; font-weight: 600; color: var(--rm-blue); white-space: nowrap; } .rm-city-range-title a i { font-size: 12px; margin-left: 5px; transition: transform .3s var(--rm-ease); } .rm-city-range-title a:hover i { transform: translateX(4px); } /* Nearby-city links at the foot of a city page. */ .rm-city-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; } .rm-city-links a { display: block; padding: 15px 18px; border: 1px solid var(--rm-line); border-radius: 12px; background: #fff; font-size: 14.8px; font-weight: 600; color: var(--rm-ink); transition: border-color .3s var(--rm-ease), color .3s var(--rm-ease), transform .3s var(--rm-ease); } .rm-city-links a:hover { border-color: var(--rm-blue); color: var(--rm-blue); transform: translateY(-2px); } /* The footer's full city list — 49 links, so it stays compact and quiet. */ /* The city list sits on the light .rm-footer-base band, so hover goes darker, not lighter — white here was invisible against the background. */ .rm-footer-cities a { color: inherit; transition: color .25s var(--rm-ease); } .rm-footer-cities a:hover { color: var(--rm-ink); text-decoration: underline; } .rm-machine-foot .rm-btn { flex: 1; justify-content: center; } /* ---------- 12c. Product page ------------------------------------------- */ .rm-product-hero { padding: 70px 0 76px; } /* The machine photo's stage. It borrows the home page hero's offset frame, tag and floating badge wholesale — only the fit differs, because product shots are cut-outs on a studio backdrop and must be contained, where a category photo is cropped to fill. The wrapper is .rm-pvisual, not .rm-hero-visual: that one is set to display:none from 992px up, where the home hero switches to a full-bleed backdrop and drops its separate photo column. */ .rm-pvisual { position: relative; } .rm-pshot { position: relative; z-index: 1; margin: 0; padding: 26px; background: linear-gradient(150deg, #ffffff 0%, var(--rm-blue-soft) 100%); border-radius: 26px; overflow: hidden; box-shadow: 0 30px 70px rgba(12, 28, 44, .17); } .rm-pshot img { width: 100%; aspect-ratio: 1/1; object-fit: contain; mix-blend-mode: multiply; } .rm-product-title { font-size: clamp(1.7rem, 2.5vw, 2.3rem); margin-bottom: 14px; } .rm-product-lead { font-size: 16.2px; line-height: 1.75; margin-bottom: 26px; } /* Highlights are given the same weight as the home page's About points, which occupy the same slot on that page — plain bullets read as filler beside the photo's stage and were a large part of why this page looked empty. */ .rm-product-highlights { display: grid; gap: 10px; margin-bottom: 30px; } .rm-product-highlights li { display: flex; align-items: flex-start; gap: 12px; background: var(--rm-soft); border: 1px solid var(--rm-line); border-radius: 12px; padding: 13px 16px; font-size: 15px; line-height: 1.6; color: var(--rm-ink-2); transition: all .3s var(--rm-ease); } .rm-product-highlights li:hover { background: #fff; border-color: var(--rm-blue); } .rm-product-highlights i { color: var(--rm-blue); font-size: 15px; margin-top: 3px; flex-shrink: 0; } .rm-product-actions { display: flex; flex-wrap: wrap; gap: 12px; } /* Enquiry aside — confirms which machine the form will name, then offers the two ways to skip the form entirely. */ .rm-enq-aside { display: flex; flex-direction: column; gap: 18px; } .rm-enq-thumb { margin: 0; background: linear-gradient(150deg, #ffffff 0%, var(--rm-blue-soft) 100%); border: 1px solid var(--rm-line); border-radius: var(--rm-radius); overflow: hidden; } .rm-enq-thumb img { width: 100%; aspect-ratio: 4/3; object-fit: contain; mix-blend-mode: multiply; padding: 18px 18px 0; } .rm-enq-thumb figcaption { padding: 14px 18px 16px; background: #fff; border-top: 1px solid var(--rm-line); } .rm-enq-thumb small { display: block; font-size: 12.4px; color: var(--rm-body); margin-bottom: 3px; } .rm-enq-thumb b { font-family: var(--rm-head); font-size: 15.4px; color: var(--rm-ink); line-height: 1.35; } .rm-enq-wa { justify-content: center; } /* Quote page — "what happens next" beside the form */ .rm-quote-next { background: var(--rm-soft); border: 1px solid var(--rm-line); border-radius: var(--rm-radius); padding: 26px 24px; } .rm-quote-next h3 { font-size: 18px; margin-bottom: 18px; } .rm-quote-steps { display: grid; gap: 18px; counter-reset: none; } .rm-quote-steps li { display: flex; align-items: flex-start; gap: 14px; } .rm-quote-step-num { width: 34px; height: 34px; border-radius: 50%; background: var(--rm-grad); color: #fff; display: grid; place-items: center; font-family: var(--rm-head); font-weight: 700; font-size: 14.5px; flex-shrink: 0; box-shadow: 0 6px 14px rgba(15, 163, 222, .28); } .rm-quote-steps b { display: block; font-family: var(--rm-head); font-size: 15px; color: var(--rm-ink); line-height: 1.35; margin-bottom: 3px; } .rm-quote-steps small { font-size: 13.2px; line-height: 1.55; color: var(--rm-body); display: block; } .rm-btn-wa { background: #25D366; color: #fff; box-shadow: 0 10px 24px rgba(37, 211, 102, .3); } .rm-btn-wa:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 16px 32px rgba(37, 211, 102, .4); } /* spec table */ /* --- quote dialog --------------------------------------------------------- Opened by anything with data-quote-open. [hidden] does the hiding so the dialog is out of the accessibility tree when closed, not just off screen. */ .rm-modal[hidden] { display: none; } .rm-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-start; justify-content: center; padding: 32px 16px; overflow-y: auto; } .rm-modal-backdrop { position: fixed; inset: 0; background: rgba(12, 28, 44, .62); backdrop-filter: blur(2px); animation: rmModalFade .25s var(--rm-ease); } .rm-modal-dialog { position: relative; z-index: 1; width: 100%; max-width: 720px; margin: auto; background: #fff; border-radius: var(--rm-radius-lg); box-shadow: 0 30px 70px rgba(12, 28, 44, .3); animation: rmModalIn .3s var(--rm-ease); } @keyframes rmModalFade { from { opacity: 0; } to { opacity: 1; } } @keyframes rmModalIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .rm-modal-backdrop, .rm-modal-dialog { animation: none; } } .rm-modal-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; border: 1px solid var(--rm-line); border-radius: 50%; background: #fff; color: var(--rm-ink); font-size: 16px; line-height: 1; cursor: pointer; transition: background .25s var(--rm-ease), color .25s var(--rm-ease); } .rm-modal-close:hover { background: var(--rm-red); border-color: var(--rm-red); color: #fff; } .rm-modal-close:focus-visible { outline: 2px solid var(--rm-blue); outline-offset: 2px; } /* "You are enquiring about " strip, above the form. Product pages pass a machine; city pages do not and the strip is simply absent. */ .rm-modal-product { display: flex; align-items: center; gap: 16px; margin: 0; padding: 18px 62px 18px 24px; background: var(--rm-soft); border-bottom: 1px solid var(--rm-line); border-radius: var(--rm-radius-lg) var(--rm-radius-lg) 0 0; } .rm-modal-product img { width: 62px; height: 62px; flex-shrink: 0; object-fit: contain; mix-blend-mode: multiply; background: #fff; border: 1px solid var(--rm-line); border-radius: 10px; padding: 4px; } .rm-modal-product small { display: block; font-size: 12.5px; color: var(--rm-body); margin-bottom: 2px; } .rm-modal-product b { font-family: var(--rm-head); font-size: 15.5px; line-height: 1.35; color: var(--rm-ink); } .rm-modal-body { padding: 34px 34px 30px; } /* The form panel already carries the site's card styling; inside the dialog it is the dialog that provides the card, so the panel goes flat. */ .rm-modal-body .rm-form-panel { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } .rm-modal-talk { display: flex; align-items: center; gap: 13px; margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--rm-line); font-size: 14.5px; } .rm-modal-talk-icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: var(--rm-soft); color: var(--rm-blue); display: grid; place-items: center; font-size: 17px; } .rm-modal-talk b { display: block; font-family: var(--rm-head); color: var(--rm-ink); font-size: 14.5px; } .rm-modal-talk a { color: var(--rm-blue); font-weight: 600; } .rm-modal-talk a + a { margin-left: 14px; } /* Stops the page behind from scrolling while the dialog is open. */ body.rm-modal-open { overflow: hidden; } @media (max-width: 575px) { .rm-modal { padding: 0; } .rm-modal-dialog { max-width: none; min-height: 100%; border-radius: 0; margin: 0; } .rm-modal-body { padding: 26px 20px 28px; } .rm-modal-talk { flex-wrap: wrap; } } /* --- product page: About / Specifications tabs ---------------------------- One card with the tab bar as its header. Capped at 1080px because the panel holds body prose: at full container width the lines run past 130 characters and stop being comfortable to read. */ .rm-ptabs { max-width: 1080px; margin: 0 auto; background: #fff; border: 1px solid var(--rm-line); border-radius: var(--rm-radius-lg); overflow: hidden; box-shadow: var(--rm-shadow-sm); } .rm-ptabs-nav { display: flex; flex-wrap: wrap; background: var(--rm-soft); border-bottom: 1px solid var(--rm-line); } .rm-ptab { display: inline-flex; align-items: center; gap: 9px; padding: 19px 30px; border: 0; background: none; font-family: var(--rm-head); font-size: 15.5px; font-weight: 600; color: var(--rm-body); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color .25s var(--rm-ease), background .25s var(--rm-ease), border-color .25s var(--rm-ease); } .rm-ptab i { font-size: 14px; } .rm-ptab:hover { color: var(--rm-blue); } .rm-ptab.is-active { background: #fff; color: var(--rm-blue); border-bottom-color: var(--rm-blue); } .rm-ptab:focus-visible { outline: 2px solid var(--rm-blue); outline-offset: -3px; } /* Panels stay in the DOM either way - display is the only thing that changes, so both the prose and the specification table remain crawlable. */ .rm-ptab-panel { display: none; padding: 36px 40px 40px; } .rm-ptab-panel.is-active { display: block; } .rm-ptab-panel:focus { outline: none; } .rm-ptab-title { font-size: clamp(1.35rem, 2.1vw, 1.85rem); margin-bottom: 20px; } /* The spec table brings its own card, which would nest inside this one. */ .rm-ptab-panel .rm-spec-wrap { max-width: none; border: 0; border-radius: 0; background: none; } .rm-ptab-panel .rm-about-sign { margin-top: 30px; } @media (max-width: 767px) { /* Equal halves rather than auto widths: "Technical Specifications" is much longer than "About This Machine" and was being clipped. It wraps to two lines here instead. */ .rm-ptabs-nav { flex-wrap: nowrap; } .rm-ptab { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; white-space: normal; line-height: 1.35; padding: 13px 10px; font-size: 13.5px; } .rm-ptab i { display: none; } .rm-ptab-panel { padding: 26px 22px 30px; } } .rm-spec-wrap { max-width: 900px; margin: 0 auto; background: #fff; border: 1px solid var(--rm-line); border-radius: var(--rm-radius-lg); overflow: hidden; } .rm-spec-table { width: 100%; border-collapse: collapse; } .rm-spec-table th, .rm-spec-table td { text-align: left; padding: 16px 24px; font-size: 15px; line-height: 1.6; border-bottom: 1px solid var(--rm-line); vertical-align: top; } .rm-spec-table th { width: 230px; font-family: var(--rm-head); font-weight: 600; color: var(--rm-ink); background: var(--rm-soft); } .rm-spec-table td { color: var(--rm-body); } .rm-spec-table tr:last-child th, .rm-spec-table tr:last-child td { border-bottom: 0; } .rm-spec-note { display: flex; gap: 10px; align-items: flex-start; background: var(--rm-blue-soft); padding: 16px 24px; margin: 0; font-size: 14.2px; line-height: 1.6; color: var(--rm-ink-2); } .rm-spec-note i { color: var(--rm-blue-700); margin-top: 3px; flex-shrink: 0; } /* ---------- 13. Why choose ---------------------------------------------- */ .rm-why { background: var(--rm-soft); overflow: hidden; } .rm-why::after { content: ''; position: absolute; left: -160px; bottom: -160px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(15, 163, 222, .13) 0%, transparent 70%); border-radius: 50%; } .rm-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; z-index: 2; } .rm-why-card { background: #fff; border: 1px solid var(--rm-line); border-radius: var(--rm-radius); padding: 26px 24px; transition: all .35s var(--rm-ease); } .rm-why-card:hover { border-color: transparent; box-shadow: var(--rm-shadow); transform: translateY(-6px); } .rm-why-num { width: 46px; height: 46px; border-radius: 12px; background: var(--rm-grad); color: #fff; display: grid; place-items: center; font-family: var(--rm-head); font-weight: 700; font-size: 17px; margin-bottom: 16px; } .rm-why-card:nth-child(4n+2) .rm-why-num, .rm-why-card:nth-child(4n+3) .rm-why-num { background: var(--rm-grad-red); } .rm-why-card h3 { font-size: 17px; margin-bottom: 8px; } .rm-why-card p { font-size: 14.3px; line-height: 1.65; margin: 0; } /* ---------- 14. Counter -------------------------------------------------- */ /* Contained rather than full-bleed: edge to edge, the saturated blue reads as a long flat stripe on a wide monitor with the figures stranded in the middle. As a rounded panel inside the container it stays tied to the page grid. */ .rm-counter { padding: 60px 0; background: #fff; } .rm-counter-panel { position: relative; overflow: hidden; border-radius: 26px; background: var(--rm-grad); padding: 56px 44px; box-shadow: 0 24px 60px rgba(15, 163, 222, .22); } /* faint diagonal weave so the panel is not a flat slab of colour */ .rm-counter-panel::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 46px); pointer-events: none; } .rm-counter-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } /* No overflow:hidden here — it would clip the divider, which is drawn just outside the item's left edge. The watermark spills into the section's own padding instead, which is deep enough to contain it. */ .rm-counter-item { position: relative; color: #fff; padding: 6px 26px; } .rm-counter-item + .rm-counter-item::before { content: ''; position: absolute; left: -10px; top: 8%; height: 84%; width: 1px; /* fades out at both ends instead of stopping dead */ background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .32) 22%, rgba(255, 255, 255, .32) 78%, transparent); } /* oversized icon sitting behind the figure rather than a small one above it */ .rm-counter-watermark { position: absolute; right: 14px; top: -6px; font-size: 74px; opacity: .1; line-height: 1; pointer-events: none; } .rm-counter-num { font-family: var(--rm-head); font-size: clamp(2.4rem, 4vw, 3.5rem); font-weight: 800; line-height: 1; display: flex; align-items: flex-start; gap: 3px; margin-bottom: 14px; } /* the plus reads as a superscript accent, not another digit */ .rm-counter-num em { font-style: normal; font-size: .46em; font-weight: 700; line-height: 1; margin-top: .12em; color: rgba(255, 255, 255, .72); } .rm-counter-label { font-family: var(--rm-head); font-size: 16px; font-weight: 600; color: #fff; letter-spacing: .01em; margin: 0 0 5px; position: relative; padding-top: 14px; } .rm-counter-label::before { content: ''; position: absolute; top: 0; left: 0; width: 38px; height: 3px; border-radius: 3px; background: #fff; opacity: .85; } .rm-counter-sub { font-size: 13.4px; line-height: 1.5; color: rgba(255, 255, 255, .78); margin: 0; } /* Key figures on a product page — the same gradient panel, carrying that machine's headline specs instead of company counts. NOTE: this block must stay after .rm-counter above. .rm-figures is a second class on the same element and carries identical specificity, so source order is the only thing that decides the padding; moved earlier, it silently loses. */ .rm-figures { padding: 0 0 66px; } /* Values are short phrases ("30 m/min max."), not integers, so they are set below .rm-counter-num's size and are allowed to wrap to a second line. */ .rm-figure-val { position: relative; z-index: 1; font-family: var(--rm-head); font-size: clamp(1.1rem, 1.45vw, 1.4rem); font-weight: 800; line-height: 1.28; color: #fff; margin: 0 0 10px; } /* ---------- 15. Industries ---------------------------------------------- */ .rm-ind-card { position: relative; border-radius: var(--rm-radius); overflow: hidden; display: block; height: 100%; } .rm-ind-card img { width: 100%; aspect-ratio: 4/3.15; object-fit: cover; transition: transform .6s var(--rm-ease); } .rm-ind-card:hover img { transform: scale(1.09); } .rm-ind-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 28, 44, .9) 0%, rgba(12, 28, 44, .25) 52%, transparent 78%); transition: background .4s var(--rm-ease); } .rm-ind-card:hover::after { background: linear-gradient(to top, rgba(11, 124, 171, .93) 0%, rgba(15, 163, 222, .35) 60%, transparent 85%); } .rm-ind-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; z-index: 2; } .rm-ind-body i { width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(4px); color: #fff; display: grid; place-items: center; font-size: 16px; margin-bottom: 10px; } .rm-ind-body .rm-ind-name { display: block; font-family: var(--rm-head); font-weight: 600; color: #fff; font-size: 16.5px; line-height: 1.3; } /* ---------- 16. Gallery -------------------------------------------------- */ .rm-gal-item { position: relative; border-radius: var(--rm-radius); overflow: hidden; display: block; background: var(--rm-soft); } .rm-gal-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .6s var(--rm-ease); } .rm-gal-item:hover img { transform: scale(1.08); } .rm-gal-item::after { content: '\f00e'; font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free'; font-weight: 900; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 26px; background: rgba(15, 163, 222, .82); opacity: 0; transition: opacity .35s var(--rm-ease); } .rm-gal-item:hover::after { opacity: 1; } /* ---------- 16b. Video cards (Gallery) ---------------------------------- */ .rm-vid-card { background: #fff; border: 1px solid var(--rm-line); border-radius: var(--rm-radius); overflow: hidden; height: 100%; transition: all .35s var(--rm-ease); } .rm-vid-card:hover { border-color: transparent; box-shadow: var(--rm-shadow); transform: translateY(-6px); } .rm-vid-thumb { position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer; overflow: hidden; background: var(--rm-ink); } /* 16/9 matches the YouTube thumbnails exactly, so nothing is cropped */ .rm-vid-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .5s var(--rm-ease), opacity .35s var(--rm-ease); } .rm-vid-card:hover .rm-vid-thumb img { transform: scale(1.05); opacity: .82; } .rm-vid-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, .93); color: var(--rm-red); display: grid; place-items: center; font-size: 17px; padding-left: 3px; transition: all .32s var(--rm-ease); box-shadow: 0 8px 22px rgba(12, 28, 44, .25); } .rm-vid-card:hover .rm-vid-play { background: var(--rm-red); color: #fff; transform: translate(-50%, -50%) scale(1.1); } .rm-vid-time { position: absolute; right: 12px; bottom: 12px; background: rgba(12, 28, 44, .82); backdrop-filter: blur(3px); color: #fff; font-family: var(--rm-head); font-weight: 600; font-size: 12.5px; padding: 4px 10px; border-radius: 60px; } .rm-vid-body { padding: 20px; text-align: left; } .rm-vid-body h3 { font-size: 16.5px; line-height: 1.4; margin-bottom: 8px; } .rm-vid-body p { font-size: 14.2px; line-height: 1.62; margin: 0; } /* player overlay */ .rm-vid-modal { position: fixed; inset: 0; z-index: 1200; background: rgba(8, 18, 28, .93); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 24px; opacity: 0; transition: opacity .28s var(--rm-ease); } .rm-vid-modal[hidden] { display: none; } .rm-vid-modal.is-open { opacity: 1; } .rm-vid-modal-inner { width: min(1000px, 100%); } .rm-vid-modal video { width: 100%; max-height: 78vh; border-radius: 14px; background: #000; display: block; } .rm-vid-modal-title { color: #fff; font-family: var(--rm-head); font-weight: 600; font-size: 16px; text-align: center; margin: 16px 0 0; } .rm-vid-modal-close { position: absolute; top: 20px; right: 24px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 19px; cursor: pointer; transition: all .28s var(--rm-ease); } .rm-vid-modal-close:hover { background: var(--rm-red); } /* ---------- 16c. Contact page ------------------------------------------- */ .rm-contact-card { background: #fff; border: 1px solid var(--rm-line); border-radius: var(--rm-radius-lg); padding: 32px 28px; height: 100%; transition: all .35s var(--rm-ease); } .rm-contact-card:hover { border-color: transparent; box-shadow: var(--rm-shadow); transform: translateY(-6px); } .rm-contact-icon { width: 58px; height: 58px; border-radius: 16px; background: var(--rm-grad); color: #fff; display: grid; place-items: center; font-size: 22px; margin-bottom: 18px; transition: all .35s var(--rm-ease); } .rm-contact-card:hover .rm-contact-icon { transform: scale(1.06) rotate(-4deg); } .rm-contact-card h3 { font-size: 18px; margin-bottom: 12px; } .rm-contact-card ul { margin-bottom: 12px; } .rm-contact-card ul li + li { margin-top: 5px; } .rm-contact-card a { font-size: 15px; color: var(--rm-ink-2); line-height: 1.6; overflow-wrap: anywhere; } .rm-contact-card a:hover { color: var(--rm-blue); } .rm-contact-card small { font-size: 13.2px; color: var(--rm-body); display: block; } /* form */ .rm-form-panel { background: #fff; border: 1px solid var(--rm-line); border-radius: var(--rm-radius-lg); padding: 40px 38px; height: 100%; } .rm-form { margin-top: 26px; } .rm-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .rm-field { margin-bottom: 18px; } .rm-field label { display: block; font-family: var(--rm-head); font-weight: 600; font-size: 14.2px; color: var(--rm-ink); margin-bottom: 7px; } .rm-field label span { color: var(--rm-red); } .rm-field input, .rm-field select, .rm-field textarea { width: 100%; border: 1px solid var(--rm-line); border-radius: 10px; background: var(--rm-soft); padding: 13px 15px; font-family: var(--rm-text); font-size: 15px; color: var(--rm-ink); transition: all .25s var(--rm-ease); } .rm-field textarea { resize: vertical; min-height: 120px; } .rm-field input:focus, .rm-field select:focus, .rm-field textarea:focus { outline: 0; background: #fff; border-color: var(--rm-blue); box-shadow: 0 0 0 3px rgba(15, 163, 222, .12); } .rm-field input:user-invalid, .rm-field textarea:user-invalid { border-color: var(--rm-red); } .rm-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.6; margin-bottom: 22px; cursor: pointer; } .rm-consent input { margin-top: 3px; accent-color: var(--rm-blue); flex-shrink: 0; width: 16px; height: 16px; } .rm-form button[type="submit"] { min-width: 210px; justify-content: center; } .rm-form-note { font-size: 14.4px; line-height: 1.6; margin: 14px 0 0; } .rm-form-note.is-ok { color: #17864B; } .rm-form-note.is-err { color: var(--rm-red-600); } /* map */ .rm-map-panel { background: #fff; border: 1px solid var(--rm-line); border-radius: var(--rm-radius-lg); overflow: hidden; height: 100%; display: flex; flex-direction: column; } .rm-map { flex: 1; min-height: 300px; background: var(--rm-soft); } .rm-map iframe { width: 100%; height: 100%; min-height: 300px; border: 0; display: block; } .rm-map-foot { padding: 26px 28px 28px; } .rm-map-foot h3 { font-size: 18px; margin-bottom: 8px; } .rm-map-foot p { font-size: 14.4px; line-height: 1.65; margin-bottom: 18px; } .rm-map-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; } .rm-map-social { display: flex; gap: 9px; padding-top: 18px; border-top: 1px solid var(--rm-line); } .rm-map-social a { width: 38px; height: 38px; border-radius: 10px; background: var(--rm-soft); border: 1px solid var(--rm-line); color: var(--rm-ink-2); display: grid; place-items: center; font-size: 15px; transition: all .3s var(--rm-ease); } .rm-map-social a svg { display: block; } .rm-map-social a:hover { background: var(--rm-grad); border-color: transparent; color: #fff; transform: translateY(-3px); } /* ---------- 17. Testimonials -------------------------------------------- */ /* Swiper sizes slides to the tallest by default; letting them auto-size and stretching the card inside keeps every quote card the same height. The wrapper has to be released as well: swiper.css sets .swiper-wrapper { height: 100% }, which resolves to the viewport here — the slide rule alone left the cards viewport-tall, with ~450px of dead space between the title and the button. align-items keeps the row even. */ .rm-testi-swiper .swiper-slide, .rm-prod-swiper .swiper-slide { height: auto; } .rm-testi-swiper .swiper-wrapper, .rm-prod-swiper .swiper-wrapper { height: auto; align-items: stretch; } .rm-testi-card { background: #fff; border: 1px solid var(--rm-line); border-radius: var(--rm-radius-lg); padding: 32px 30px; height: 100%; display: flex; flex-direction: column; position: relative; transition: all .35s var(--rm-ease); } .rm-testi-card:hover { box-shadow: var(--rm-shadow); border-color: transparent; transform: translateY(-5px); } .rm-testi-quote { position: absolute; top: 26px; right: 30px; font-size: 42px; color: var(--rm-blue); opacity: .12; } .rm-testi-stars { color: #F5A524; font-size: 14px; margin-bottom: 14px; display: flex; gap: 3px; } /* browsers indent
by default — the card supplies its own padding */ .rm-testi-card blockquote { margin: 0; } .rm-testi-card p { font-size: 15.2px; line-height: 1.75; margin-bottom: 22px; color: var(--rm-ink-2); } .rm-testi-user { margin-top: auto; display: flex; align-items: center; gap: 13px; padding-top: 18px; border-top: 1px solid var(--rm-line); } .rm-testi-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--rm-grad); color: #fff; display: grid; place-items: center; font-family: var(--rm-head); font-weight: 700; font-size: 17px; flex-shrink: 0; } .rm-testi-user b { display: block; font-family: var(--rm-head); color: var(--rm-ink); font-size: 15.5px; } .rm-testi-user small { font-size: 13px; } .rm-testi-pagination { position: static; margin-top: 26px; } /* ---------- 18. Blog ----------------------------------------------------- */ .rm-blog-card { background: #fff; border: 1px solid var(--rm-line); border-radius: var(--rm-radius); overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: all .35s var(--rm-ease); } .rm-blog-card:hover { box-shadow: var(--rm-shadow); transform: translateY(-6px); border-color: transparent; } .rm-blog-thumb { position: relative; display: block; overflow: hidden; background: var(--rm-soft); } /* 16:9 matches the source covers (800x450) exactly, so nothing is cropped. At 16:10 the box was narrower than the artwork and cover shaved 5% off each side — which clipped the first letter of every title baked into the image. */ .rm-blog-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .6s var(--rm-ease); } /* No zoom here: these covers have the post title baked into the artwork, and any scale-up crops the first letter of every line straight off. */ .rm-blog-card:hover .rm-blog-thumb img { transform: none; } .rm-blog-date { position: absolute; left: 14px; bottom: 14px; background: #fff; border-radius: 10px; padding: 8px 13px; text-align: center; font-family: var(--rm-head); box-shadow: var(--rm-shadow-sm); } .rm-blog-date strong { display: block; font-size: 19px; color: var(--rm-ink); line-height: 1; } .rm-blog-date span { font-size: 11.5px; text-transform: uppercase; color: var(--rm-red); letter-spacing: .06em; } .rm-blog-body { padding: 22px; display: flex; flex-direction: column; flex: 1; } .rm-blog-body h3 { font-size: 17.5px; line-height: 1.42; margin-bottom: 10px; } .rm-blog-body h3 a { color: inherit; } .rm-blog-card:hover h3 a { color: var(--rm-blue); } .rm-blog-body p { font-size: 14.5px; margin-bottom: 16px; } .rm-blog-link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--rm-head); font-weight: 600; font-size: 14.5px; color: var(--rm-red); } .rm-blog-link i { transition: transform .3s var(--rm-ease); } .rm-blog-link:hover i { transform: translateX(5px); } /* --- listing: meta line and filter chips -------------------------------- */ .rm-blog-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 13.2px; color: var(--rm-body); margin-bottom: 11px; } .rm-blog-meta i { color: var(--rm-blue); font-size: 12px; } /* Sits in the meta line, not over the cover — these covers carry the post title as artwork and a badge on top of them hides words. */ .rm-blog-cat { margin-left: auto; background: var(--rm-blue-soft); color: var(--rm-blue-700); font-family: var(--rm-head); font-weight: 600; font-size: 11.5px; letter-spacing: .03em; padding: 4px 11px; border-radius: 60px; white-space: nowrap; } .rm-blog-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 40px; } .rm-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--rm-line); background: #fff; border-radius: 60px; padding: 10px 20px; font-family: var(--rm-head); font-weight: 600; font-size: 14.5px; color: var(--rm-ink); cursor: pointer; transition: all .28s var(--rm-ease); } .rm-chip span { font-size: 12.5px; background: var(--rm-soft); color: var(--rm-body); border-radius: 60px; padding: 2px 9px; transition: all .28s var(--rm-ease); } .rm-chip:hover { border-color: var(--rm-blue); color: var(--rm-blue-700); } .rm-chip.is-active { background: var(--rm-grad); border-color: transparent; color: #fff; box-shadow: 0 8px 20px rgba(15, 163, 222, .28); } .rm-chip.is-active span { background: rgba(255, 255, 255, .22); color: #fff; } .rm-blog-empty { text-align: center; font-size: 15.5px; color: var(--rm-body); margin: 30px 0 0; } /* ---------- 18b. Blog post ---------------------------------------------- */ .rm-post-cover { margin: 0 0 24px; border-radius: var(--rm-radius-lg); overflow: hidden; box-shadow: var(--rm-shadow); } /* 16/9 matches the source artwork; anything taller crops the baked-in title */ .rm-post-cover img { width: 100%; aspect-ratio: 16/9; object-fit: cover; } .rm-post-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--rm-line); font-size: 13.6px; color: var(--rm-body); } .rm-post-meta span { display: inline-flex; align-items: center; gap: 8px; } .rm-post-meta i { color: var(--rm-blue); font-size: 13px; } .rm-post-lead { font-size: 17px; line-height: 1.75; color: var(--rm-ink-2); font-weight: 500; } /* Article typography. Headings need room above them but not below, so the heading reads as attached to the paragraph that follows it. */ .rm-post h2 { font-size: clamp(1.35rem, 2vw, 1.7rem); margin: 38px 0 14px; } .rm-post h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); margin: 32px 0 12px; } .rm-post p { font-size: 15.8px; line-height: 1.85; } .rm-post-list { margin: 0 0 18px; display: grid; gap: 10px; } .rm-post-list li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.7; color: var(--rm-ink-2); } .rm-post-list li::before { content: ''; position: absolute; left: 6px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--rm-grad); } /* Key takeaways — the summary a skim-reader stops on */ .rm-takeaways { background: var(--rm-blue-soft); border: 1px solid rgba(15, 163, 222, .22); border-left: 4px solid var(--rm-blue); border-radius: 14px; padding: 24px 26px; margin: 28px 0 34px; } .rm-takeaways h2 { display: flex; align-items: center; gap: 10px; font-size: 17.5px; margin: 0 0 14px; } .rm-takeaways h2 i { color: var(--rm-red); font-size: 17px; } .rm-takeaways ul { display: grid; gap: 10px; } .rm-takeaways li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.65; color: var(--rm-ink-2); } /* The bundled build is Font Awesome 6 Pro, not Free — the Free family name would silently fall back to the body font and print a blank box. */ .rm-takeaways li::before { content: '\f00c'; font-family: 'Font Awesome 6 Pro'; font-weight: 900; position: absolute; left: 0; top: 1px; font-size: 12.5px; color: var(--rm-blue-700); } .rm-post-share { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--rm-line); } .rm-post-share b { font-family: var(--rm-head); font-size: 15px; color: var(--rm-ink); margin-right: 4px; } .rm-post-share a { width: 38px; height: 38px; border-radius: 10px; background: var(--rm-soft); border: 1px solid var(--rm-line); color: var(--rm-ink-2); display: grid; place-items: center; font-size: 14px; transition: all .28s var(--rm-ease); } .rm-post-share a:hover { background: var(--rm-grad); border-color: transparent; color: #fff; transform: translateY(-3px); } .rm-post-faq { margin-top: 50px; } .rm-post-faq h2 { margin-bottom: 24px; } /* Legal pages reuse the article typography; only the clause spacing differs — a policy is scanned by section, so the headings sit tighter to their text. */ .rm-legal h2 { margin-top: 0; } .rm-legal h3 { margin: 34px 0 12px; } .rm-legal .rm-post-list li { color: var(--rm-ink-2); } .rm-legal-contact { margin-top: 40px; } /* ---- contents rail (left column) ---- */ /* Sticks below the header while the article scrolls past it. max-height is a safety valve, not the normal case: a 15-heading list is ~520px, so the rail only ever scrolls internally on a short laptop screen. */ .rm-rail { position: sticky; top: 110px; display: grid; gap: 20px; max-height: calc(100vh - 130px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .rm-toc { background: var(--rm-soft); border: 1px solid var(--rm-line); border-radius: var(--rm-radius); padding: 22px 20px; } .rm-toc-title { display: flex; align-items: center; gap: 10px; font-size: 16.5px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--rm-line); } .rm-toc-title i { color: var(--rm-blue); font-size: 15px; } .rm-toc ol { counter-reset: toc; display: grid; gap: 2px; } .rm-toc a { display: block; position: relative; padding: 8px 10px 8px 14px; border-radius: 8px; font-size: 14px; line-height: 1.45; color: var(--rm-ink-2); border-left: 2px solid transparent; transition: all .25s var(--rm-ease); } /* h3 entries sit in from their parent so the outline reads as a hierarchy */ .rm-toc li.is-h3 a { padding-left: 26px; font-size: 13.5px; color: var(--rm-body); } .rm-toc a:hover { background: #fff; color: var(--rm-blue-700); } /* set by the scroll spy in main.js as each heading passes under the header */ .rm-toc a.is-current { background: #fff; border-left-color: var(--rm-blue); color: var(--rm-blue-700); font-weight: 600; box-shadow: var(--rm-shadow-sm); } /* Headings are scroll targets, so they must clear the sticky header when the browser jumps to them. */ .rm-post h2[id], .rm-post h3[id] { scroll-margin-top: 110px; } /* compact variant of the quote card, for the rail */ .rm-side-cta-sm { padding: 22px 20px; } .rm-side-cta-sm h2 { font-size: 17px; } .rm-side-cta-sm p { font-size: 13.6px; margin-bottom: 16px; } .rm-side-card { background: var(--rm-soft); border: 1px solid var(--rm-line); border-radius: var(--rm-radius); padding: 24px 22px; } .rm-side-title { font-size: 17px; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--rm-line); } .rm-side-cats { display: grid; gap: 8px; } .rm-side-cats a { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid var(--rm-line); border-radius: 10px; padding: 11px 14px; font-size: 14.4px; color: var(--rm-ink-2); transition: all .28s var(--rm-ease); } .rm-side-cats a:hover { border-color: var(--rm-blue); color: var(--rm-blue-700); transform: translateX(3px); } .rm-side-cats em { font-style: normal; font-family: var(--rm-head); font-size: 12.5px; background: var(--rm-blue-soft); color: var(--rm-blue-700); border-radius: 20px; padding: 2px 9px; flex-shrink: 0; } .rm-side-posts { display: grid; gap: 16px; } .rm-side-posts a { display: flex; align-items: flex-start; gap: 13px; } .rm-side-posts img { width: 78px; aspect-ratio: 16/9; object-fit: cover; border-radius: 9px; flex-shrink: 0; } .rm-side-posts b { display: block; font-family: var(--rm-head); font-weight: 600; font-size: 14px; line-height: 1.4; color: var(--rm-ink); transition: color .28s var(--rm-ease); } .rm-side-posts a:hover b { color: var(--rm-blue-700); } .rm-side-posts small { font-size: 12.4px; color: var(--rm-body); } .rm-side-cta { background: var(--rm-grad); color: #fff; border-radius: var(--rm-radius); padding: 28px 24px; text-align: center; } .rm-side-cta-icon { width: 54px; height: 54px; border-radius: 14px; background: rgba(255, 255, 255, .18); display: grid; place-items: center; font-size: 21px; margin: 0 auto 16px; } .rm-side-cta h2 { color: #fff; font-size: 19px; margin-bottom: 10px; } .rm-side-cta p { font-size: 14.2px; line-height: 1.65; color: rgba(255, 255, 255, .86); margin-bottom: 20px; } .rm-side-cta-tel { display: block; margin-top: 14px; font-family: var(--rm-head); font-weight: 600; font-size: 15px; color: #fff; } .rm-side-cta-tel:hover { color: #fff; opacity: .85; } /* ---------- 19. CTA band (shop-floor video) ------------------------------ */ /* Contained for the same reason as the counters band. isolation:isolate lives on the panel so the video and scrim (z-index -2/-1) paint above the panel's own background but stay behind the copy. */ .rm-cta { padding: 60px 0; background: #fff; } .rm-cta-panel { position: relative; overflow: hidden; border-radius: 26px; padding: 82px 48px; background: var(--rm-ink); isolation: isolate; box-shadow: 0 24px 60px rgba(12, 28, 44, .22); } /* Poster is set on the element itself, so the band is never blank while the video is still un-sourced (or permanently, on mobile / Save-Data). */ .rm-cta-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; pointer-events: none; } .rm-cta-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, rgba(8, 20, 32, .93) 0%, rgba(10, 46, 70, .86) 46%, rgba(11, 124, 171, .74) 100%); } .rm-cta-in { display: flex; align-items: center; justify-content: space-between; gap: 44px; flex-wrap: wrap; } .rm-cta-copy { flex: 1 1 520px; max-width: 700px; } .rm-cta h2 { color: #fff; margin-bottom: 12px; } .rm-cta p { color: rgba(255, 255, 255, .84); margin: 0 0 28px; } .rm-cta-btns { display: flex; gap: 13px; flex-wrap: wrap; } /* video lightbox trigger */ .rm-cta-play { display: flex; align-items: center; gap: 16px; flex-shrink: 0; min-width: 0; } .rm-cta-play-text { min-width: 0; } .rm-cta-play-btn { position: relative; width: 74px; height: 74px; border-radius: 50%; background: #fff; color: var(--rm-red); display: grid; place-items: center; font-size: 22px; padding-left: 4px; flex-shrink: 0; transition: all .32s var(--rm-ease); } .rm-cta-play-btn::before, .rm-cta-play-btn::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5); animation: rmRipple 2.6s ease-out infinite; } .rm-cta-play-btn::after { animation-delay: 1.3s; } @keyframes rmRipple { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.75); opacity: 0; } } .rm-cta-play:hover .rm-cta-play-btn { transform: scale(1.08); background: var(--rm-red); color: #fff; } .rm-cta-play-text b { display: block; font-family: var(--rm-head); font-weight: 600; font-size: 16.5px; color: #fff; line-height: 1.3; } .rm-cta-play-text small { font-size: 13.4px; color: rgba(255, 255, 255, .72); } @media (prefers-reduced-motion: reduce) { .rm-cta-play-btn::before, .rm-cta-play-btn::after { animation: none; opacity: 0; } } /* Light CTA panel, for pages with no video behind the copy. The home page keeps the dark treatment — the shop-floor footage needs a dark scrim for the white text to stay legible over it. NOTE: must sit after the .rm-cta-panel / .rm-cta rules above; they share the same specificity, so an earlier position would lose to them. */ .rm-cta-panel-plain { background: linear-gradient(112deg, #E9F4FB 0%, #F4FAFD 50%, #FFFFFF 100%); border: 1px solid var(--rm-line); box-shadow: 0 20px 50px rgba(12, 28, 44, .07); } .rm-cta-panel-plain h2 { color: var(--rm-ink); } .rm-cta-panel-plain p { color: var(--rm-body); } .rm-cta-panel-plain .rm-eyebrow.on-dark { color: var(--rm-red); background: var(--rm-red-soft); } .rm-cta-panel-plain .rm-eyebrow.on-dark::before { background: var(--rm-red); } /* the white pill button needs an outline once the panel behind it is light */ .rm-cta-panel-plain .rm-btn-white { border: 1px solid var(--rm-line); } /* ---------- 20. Footer --------------------------------------------------- */ /* White, not tinted: the Blog section directly above already uses --rm-soft, so a tinted footer would merge straight into it. */ .rm-footer { background: #fff; border-top: 1px solid var(--rm-line); color: var(--rm-body); font-size: 15px; } .rm-footer-top { padding: 72px 0 48px; } .rm-footer h4 { color: var(--rm-ink); font-size: 17px; margin-bottom: 22px; padding-bottom: 12px; position: relative; } .rm-footer h4::after { content: ''; position: absolute; left: 0; bottom: 0; width: 38px; height: 2px; background: var(--rm-red); border-radius: 2px; } /* The logo sits directly on the footer now — on the old dark footer it needed a white plate behind it, which read as a sticker patched onto the panel. */ .rm-footer-logo { display: inline-block; margin-bottom: 20px; } .rm-footer-logo img { max-height: 120px; width: auto; } .rm-footer p { font-size: 14.6px; line-height: 1.72; } .rm-footer-social { display: flex; gap: 9px; margin-top: 22px; } .rm-footer-social a { width: 38px; height: 38px; border-radius: 10px; background: var(--rm-soft); border: 1px solid var(--rm-line); color: var(--rm-ink-2); display: grid; place-items: center; font-size: 15px; transition: all .3s var(--rm-ease); } .rm-footer-social a svg { display: block; } .rm-footer-social a:hover { background: var(--rm-grad); border-color: transparent; color: #fff; transform: translateY(-3px); box-shadow: 0 8px 18px rgba(15, 163, 222, .3); } .rm-footer-links li a { color: var(--rm-body); display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 14.8px; } .rm-footer-links li a i { font-size: 11px; color: var(--rm-red); transition: transform .3s var(--rm-ease); } .rm-footer-links li a:hover { color: var(--rm-blue); } .rm-footer-links li a:hover i { transform: translateX(3px); } .rm-footer-contact li { display: flex; gap: 13px; padding: 9px 0; align-items: flex-start; } .rm-footer-contact li i { width: 34px; height: 34px; border-radius: 9px; background: var(--rm-blue-soft); color: var(--rm-blue-700); display: grid; place-items: center; font-size: 14px; flex-shrink: 0; margin-top: 2px; } /* The email addresses are single unbreakable tokens ~210px wide; in a narrow footer column they push the whole list past the container without this. */ .rm-footer-contact li > div { min-width: 0; } .rm-footer-contact a { color: var(--rm-ink-2); font-size: 14.7px; display: block; overflow-wrap: anywhere; } .rm-footer-contact a:hover { color: var(--rm-blue); } .rm-footer-contact span { font-size: 14.4px; line-height: 1.6; } .rm-footer-base { background: var(--rm-soft); border-top: 1px solid var(--rm-line); } .rm-footer-cities { font-size: 13px; line-height: 2; color: #8496a5; margin: 0; padding: 22px 0; } .rm-footer-bottom { border-top: 1px solid var(--rm-line); padding: 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--rm-body); } .rm-footer-bottom a { color: var(--rm-body); } .rm-footer-bottom a:hover { color: var(--rm-blue); } /* keep the last row clear of the floating quick-connect buttons */ .rm-footer-bottom-links { display: flex; gap: 8px; align-items: center; padding-right: 96px; } /* ---------- 21. Back to top + floating ---------------------------------- */ /* 190px, not 96px: the quick-connect widget stacks two 58px circles from 28px up, reaching 162px. At 96px this button sat completely behind the WhatsApp circle — the widget's z-index is 9998 against this one's 800, so it was not just hidden, it was unclickable at every width from 768px up. */ .rm-top { position: fixed; right: 24px; bottom: 190px; width: 46px; height: 46px; border-radius: 12px; background: var(--rm-grad); color: #fff; display: grid; place-items: center; border: 0; cursor: pointer; z-index: 800; opacity: 0; visibility: hidden; transform: translateY(14px); transition: all .35s var(--rm-ease); box-shadow: 0 10px 26px rgba(15, 163, 222, .35); } .rm-top.is-show { opacity: 1; visibility: visible; transform: translateY(0); } /* ---------- 22. Quick Connect widget ------------------------------------ */ .rm-qc { position: fixed; right: 24px; bottom: 24px; z-index: 1000; } .rm-qc-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; } .rm-qc-fab { width: 52px; height: 52px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; font-size: 20px; cursor: pointer; transition: all .3s var(--rm-ease); position: relative; } .rm-qc-fab:hover { color: #fff; transform: scale(1.08); } .rm-qc-fab.is-wa { background: #25D366; box-shadow: 0 8px 22px rgba(37, 211, 102, .38); } .rm-qc-fab.is-call { background: var(--rm-grad-red); box-shadow: 0 8px 22px rgba(232, 38, 44, .34); } .rm-qc-fab.is-main { background: var(--rm-grad); box-shadow: 0 8px 22px rgba(15, 163, 222, .38); } .rm-qc-fab.is-main .rm-qc-ico-close, .rm-qc-fab.is-main.is-open .rm-qc-ico-open { display: none; } .rm-qc-fab.is-main.is-open .rm-qc-ico-close { display: block; } .rm-qc-fab.is-call::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--rm-red); animation: rmPulse 2s infinite; } @keyframes rmPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.45); opacity: 0; } } .rm-qc-panel { position: absolute; right: 0; bottom: 72px; width: min(348px, calc(100vw - 40px)); background: #fff; border-radius: 16px; box-shadow: var(--rm-shadow-lg); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.97); transform-origin: bottom right; transition: all .32s var(--rm-ease); } .rm-qc-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .rm-qc-head { background: var(--rm-grad); color: #fff; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .rm-qc-head b { font-family: var(--rm-head); font-size: 16px; display: block; } .rm-qc-head small { font-size: 12.5px; opacity: .85; } .rm-qc-x { width: 30px; height: 30px; border-radius: 8px; border: 0; background: rgba(255, 255, 255, .18); color: #fff; cursor: pointer; flex-shrink: 0; } .rm-qc-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--rm-line); } .rm-qc-tab { border: 0; background: var(--rm-soft); padding: 11px 4px; font-family: var(--rm-head); font-weight: 600; font-size: 12.5px; color: var(--rm-body); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: all .25s var(--rm-ease); } .rm-qc-tab i { font-size: 14px; } .rm-qc-tab.is-active { background: #fff; color: var(--rm-blue-700); box-shadow: inset 0 -2px 0 var(--rm-blue); } .rm-qc-body { padding: 18px; max-height: 60vh; overflow-y: auto; } .rm-qc-pane { display: none; } .rm-qc-pane.is-active { display: block; } .rm-qc-form input, .rm-qc-form textarea { width: 100%; border: 1px solid var(--rm-line); border-radius: 9px; padding: 11px 14px; font-family: var(--rm-text); font-size: 14.4px; color: var(--rm-ink); margin-bottom: 10px; background: var(--rm-soft); transition: all .25s var(--rm-ease); } .rm-qc-form input:focus, .rm-qc-form textarea:focus { outline: 0; border-color: var(--rm-blue); background: #fff; box-shadow: 0 0 0 3px rgba(15, 163, 222, .12); } .rm-qc-form textarea { resize: vertical; } .rm-qc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .rm-qc-row input { margin-bottom: 10px; } .rm-qc-form .rm-btn { width: 100%; justify-content: center; padding: 13px 18px; font-size: 14.5px; } .rm-qc-hp { position: absolute !important; left: -9999px !important; } .rm-qc-note { font-size: 13.4px; margin: 10px 0 0; line-height: 1.55; } .rm-qc-note.is-ok { color: #17864B; } .rm-qc-note.is-err { color: var(--rm-red-600); } /* ---------- 23. Responsive ---------------------------------------------- */ /* Desktop hero: Ramatech's own designed banner (1920x750) runs full-bleed. Its left ~47% is deliberately empty for copy; the right half carries the red panel and the three hexagon machine shots. Below 992px that strip is far too narrow for a headline, so the banner steps aside and each slide falls back to its own machine card (the default styling in section 8). NOTE: this block must sit after the section 8 base rules — a media query adds no specificity, so placing it earlier lets those base rules win. */ @media (min-width: 992px) { /* the banner supplies its own artwork — the decorative glow would muddy it */ .rm-hero::before { display: none; } /* Each slide paints its own banner, so a slide can be swapped without touching the others. Absolute, so it stays out of the slide's flex flow. */ .rm-hero-bg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; } /* lift the copy above the artwork */ .rm-hero-slide > .container { position: relative; z-index: 1; } /* 750/1920 = 39.06vw. Holding the slide to the banner's own aspect ratio is what stops background-size:cover from zooming in and slicing the red panel and machines off the right edge — so the copy has to fit this height. */ .rm-hero-slide { position: relative; min-height: clamp(430px, 39.06vw, 720px); display: flex; align-items: center; padding: 30px 0; } .rm-hero-grid { grid-template-columns: 1fr; } /* 46% of the container keeps the copy clear of the banner's diagonal red edge (which begins at ~47% of the viewport) at every width from 992px up */ .rm-hero-copy { max-width: 46%; } .rm-hero .rm-eyebrow { white-space: nowrap; } .rm-hero .rm-hero-title { font-size: clamp(1.75rem, 2.5vw, 2.55rem); margin-bottom: 16px; } .rm-hero-lead { font-size: 16px; margin-bottom: 26px; } .rm-hero-cta { margin-bottom: 0; } .rm-hero-visual { display: none; } /* --- staggered entrance for the active slide's copy ------------------- */ /* Scoped to .swiper-initialized so the copy is never left invisible if the slider fails to boot. */ .rm-hero-swiper.swiper-initialized .rm-hero-copy > * { opacity: 0; transform: translateY(26px); } .rm-hero-swiper.swiper-initialized .swiper-slide-active .rm-hero-copy > * { animation: rmHeroIn .8s var(--rm-ease) forwards; } /* These must carry the full ancestor chain: the `animation` shorthand above resets animation-delay to 0, and it would out-specify a shorter selector. */ .rm-hero-swiper.swiper-initialized .swiper-slide-active .rm-hero-copy > *:nth-child(1) { animation-delay: .10s; } .rm-hero-swiper.swiper-initialized .swiper-slide-active .rm-hero-copy > *:nth-child(2) { animation-delay: .22s; } .rm-hero-swiper.swiper-initialized .swiper-slide-active .rm-hero-copy > *:nth-child(3) { animation-delay: .34s; } .rm-hero-swiper.swiper-initialized .swiper-slide-active .rm-hero-copy > *:nth-child(4) { animation-delay: .46s; } .rm-hero-swiper.swiper-initialized .swiper-slide-active .rm-hero-copy > *:nth-child(5) { animation-delay: .58s; } /* Float the dots over the banner and align them under the copy. Left in the flow they would add their own height on top of the slide, stretching the background past the banner's aspect ratio and re-introducing the crop. */ .rm-hero-swiper > .container { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 6; } .rm-hero .swiper-pagination { text-align: left; margin: 0; } } /* --- hero copy sits tighter where the banner has the room --------------- */ @media (min-width: 1200px) { .rm-hero .rm-hero-title { margin-bottom: 13px; } .rm-hero-lead { margin-bottom: 22px; } } @keyframes rmHeroIn { to { opacity: 1; transform: translateY(0); } } /* --- numbered pagination with an autoplay progress track ----------------- */ .rm-hero .swiper-pagination { display: flex; gap: 10px; } .rm-hero .rm-hero-bullet { width: auto; height: auto; border: 0; background: transparent; opacity: 1; border-radius: 0; padding: 0; cursor: pointer; display: flex; align-items: center; gap: 9px; font-family: var(--rm-head); font-weight: 600; font-size: 12.5px; color: var(--rm-body); transition: color .3s var(--rm-ease); } .rm-hero .rm-hero-bullet-track { display: block; width: 30px; height: 3px; border-radius: 3px; background: rgba(12, 28, 44, .16); overflow: hidden; transition: width .35s var(--rm-ease); } .rm-hero .rm-hero-bullet-track i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--rm-grad); } .rm-hero .swiper-pagination-bullet-active { color: var(--rm-ink); } .rm-hero .swiper-pagination-bullet-active .rm-hero-bullet-track { width: 62px; } @media (prefers-reduced-motion: reduce) { .rm-hero-swiper.swiper-initialized .rm-hero-copy > * { opacity: 1; transform: none; animation: none; } } @media (max-width: 1199px) { .rm-nav > ul > li > a { padding: 30px 11px; font-size: 15px; } .rm-why-grid { grid-template-columns: repeat(2, 1fr); } .rm-logo img { max-height: 58px; } .rm-header-in { min-height: 90px; } .rm-mega { grid-template-columns: 260px 1fr; } .rm-mega-panel { grid-template-columns: repeat(4, 1fr); } /* fewer, wider cards — the icon reads better beside the text than above it */ .rm-trust-grid { grid-template-columns: repeat(3, 1fr); } .rm-trust-grid-4 { grid-template-columns: repeat(2, 1fr); } .rm-trust-item { display: flex; align-items: center; gap: 14px; padding: 18px; } .rm-trust-icon { margin-bottom: 0; } .rm-strength-grid { grid-template-columns: repeat(2, 1fr); } .rm-process { grid-template-columns: repeat(2, 1fr); } .rm-mark-grid { grid-template-columns: repeat(2, 1fr); } .rm-match-row { grid-template-columns: 52px 200px 1fr 42px; gap: 16px; } } @media (max-width: 991px) { .rm-section { padding: 72px 0; } .rm-nav, .rm-header-end .rm-btn { display: none; } .rm-burger { display: grid; } .rm-header-in { min-height: 80px; } .rm-logo img { max-height: 54px; } .rm-hero-grid { grid-template-columns: 1fr; gap: 40px; } .rm-hero-slide { padding: 60px 0 70px; } /* two per row: keep the rule between the pair, drop it at the row start */ .rm-counter-grid { grid-template-columns: repeat(2, 1fr); row-gap: 34px; } .rm-counter-panel { padding: 46px 30px; } .rm-counter-item { padding: 6px 18px; } .rm-counter-item:nth-child(odd)::before { display: none; } /* The overlap image is offset by -14px into the column's right padding; that padding is dropped here, so without this it hangs past the container and gets shaved off at the viewport edge. */ /* 60px used to clear the inset image that hung below this block. With only one photo left, this is just the gap before the copy. */ .rm-about-media { margin-bottom: 34px; } /* the rail drops above the article here, so there is nothing to stick to and no reason to cap its height */ .rm-rail { position: static; max-height: none; overflow: visible; } .rm-topbar-left { gap: 16px; } .rm-trust-grid { grid-template-columns: repeat(2, 1fr); } .rm-quality-media { padding: 0 0 44px 40px; margin-bottom: 20px; } .rm-promise { flex-direction: column; gap: 22px; padding: 34px 28px; } .rm-page-banner-panel { padding: 48px 32px; } .rm-page-banner-hex { width: 170px; height: 190px; } /* the photo would sit under the copy at this width, so it steps back */ .rm-page-banner-bg { width: 62%; opacity: .5; } } @media (max-width: 767px) { body { font-size: 15.4px; } .rm-section { padding: 58px 0; } .rm-topbar { display: none; } .rm-about-points { grid-template-columns: 1fr; } .rm-why-grid { grid-template-columns: 1fr; } .rm-form-row { grid-template-columns: 1fr; gap: 0; } .rm-product-hero { padding: 44px 0 52px; } .rm-figures { padding: 0 0 44px; } .rm-pshot { padding: 16px; border-radius: 18px; } .rm-product-actions .rm-btn { width: 100%; justify-content: center; } /* the label column cannot hold 230px at phone width — stack the rows */ .rm-spec-table th, .rm-spec-table td { display: block; width: auto; padding: 12px 18px; } .rm-spec-table th { border-bottom: 0; } .rm-spec-note { padding: 14px 18px; } .rm-form-panel { padding: 30px 22px; } .rm-map-foot { padding: 22px; } .rm-strength-grid { grid-template-columns: 1fr; } .rm-process { grid-template-columns: 1fr; } .rm-mark-grid { grid-template-columns: 1fr; } /* the four-column row cannot hold at phone width — it stacks */ .rm-match-row { grid-template-columns: 52px 1fr; row-gap: 14px; } .rm-match-sol { grid-column: 1 / -1; } .rm-match-link { grid-column: 1 / -1; width: 100%; border-radius: 10px; } .rm-page-banner { padding: 22px 0 0; } .rm-page-banner-panel { padding: 36px 22px; border-radius: 18px; } .rm-page-banner-bg { width: 100%; opacity: .16; -webkit-mask-image: none; mask-image: none; } .rm-page-banner-hex { display: none; } .rm-mv-card { padding: 28px 24px; } .rm-faq-q { padding: 16px 18px; font-size: 15.2px; } .rm-faq-a p { padding: 0 18px 18px; } .rm-head-center { margin-bottom: 38px; } .rm-cta { padding: 34px 0; } .rm-cta-panel { padding: 46px 24px; border-radius: 18px; } .rm-cta-in { gap: 30px; } .rm-cta-play-btn { width: 62px; height: 62px; font-size: 19px; } .rm-counter { padding: 34px 0; } .rm-counter-panel { padding: 40px 22px; border-radius: 18px; } .rm-footer-top { padding: 56px 0 34px; } /* On a phone the card is small enough that a floating badge would sit on top of the machine, and the offset frame would run off the screen edge — so the badge drops below the image and the frame is dropped entirely. */ .rm-hero-hex { display: none; } .rm-hero-tag { font-size: 11.5px; padding: 7px 13px; top: 14px; left: 14px; } .rm-hero-badge { position: static; margin-top: 14px; max-width: none; padding: 14px 16px; box-shadow: var(--rm-shadow-sm); border: 1px solid var(--rm-line); } .rm-about-exp { left: 8px; padding: 14px 17px; } .rm-footer-bottom { justify-content: center; text-align: center; padding-bottom: 76px; } .rm-footer-bottom-links { padding-right: 0; } .rm-qc { right: 16px; bottom: 16px; } .rm-qc-fab { width: 46px; height: 46px; font-size: 18px; } .rm-top { right: 16px; bottom: 190px; } } @media (max-width: 575px) { /* let the play row shrink and wrap instead of holding its max-content width */ .rm-cta-play { flex-shrink: 1; flex-wrap: wrap; gap: 12px; } /* 12 dots + two 46px arrows + gaps overrun a 320px viewport at full size */ .rm-prod-controls { gap: 12px; } .rm-prod-nav { width: 40px; height: 40px; font-size: 13px; } .rm-prod-pagination { gap: 5px; flex-wrap: wrap; } .rm-prod-pagination .swiper-pagination-bullet { width: 7px; height: 7px; } .rm-prod-pagination .swiper-pagination-bullet-active { width: 20px; } /* nowrap keeps buttons tidy on desktop, but a long label like "View All Batch Coding Machines" is wider than a 320px screen can hold */ .rm-btn { white-space: normal; text-align: center; } .rm-counter-grid { grid-template-columns: 1fr; row-gap: 28px; } .rm-counter-item { padding: 0 0 0 2px; } .rm-counter-item::before { display: none !important; } .rm-counter-watermark { font-size: 62px; right: 4px; } .rm-trust-grid { grid-template-columns: 1fr; } .rm-trust { padding: 26px 0; } .rm-hero-cta .rm-btn { width: 100%; justify-content: center; } } /* Below 480px the quick-connect widget stops being a vertical stack of two 58px circles and becomes a single 46px row across the foot of the screen. The 190px of clearance set at 767px was measured against the tall stack, so at phone sizes this button was left floating a third of the way up. 86px keeps the same 28px gap above the widget that the wider breakpoints have. Must stay after the 767px and 575px blocks above — same specificity, so the later rule is the one that wins. */ @media (max-width: 480px) { .rm-top { bottom: 86px; } }