.ar-page .page-main { max-width: 100% !important; }
.ar-page .column.main { padding-bottom: 0px !important; }
.ar-page .breadcrumbs { font-family: RobotoCondensed-Bolditalic, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 15px auto; max-width: 1540px !important; }
.ar-page .items { color: rgb(0, 0, 0) !important; text-align: center; }
.ar-page .items .home { text-transform: uppercase; }
.ar-page .items a { color: rgb(112, 112, 112) !important; }
.ar-page .hero { overflow: hidden; max-width: 100% !important; }
.ar-page .hero__img { display: block; width: 100%; height: auto; }
.ar-page .racing-wheels-container { display: flex; justify-content: center; gap: 20px; max-width: 1540px; margin: 0px auto; padding-top: 150px; padding-bottom: 150px; }
.ar-page .racing-wheel-item { overflow: hidden; width: 100%; }
.ar-page .racing-item-wrap { background-color: rgb(242, 242, 242); border-radius: 4px; }
.ar-page .racing-wheel-image { position: relative; padding: 95px 20px 30px; text-align: center; }
.ar-page .racing-wheel-image img { max-width: 100%; height: auto; display: block; margin: 0px auto; }
.ar-page .racing-wheel-info { padding: 15px 20px 50px; text-align: center; }
.ar-page .racing-wheel-title { font-family: RobotoCondensed-Bolditalic, Helvetica, Arial; font-size: 26px; color: rgb(0, 0, 0); font-weight: 500; margin: 0px 0px 10px; line-height: 1.3; }
.ar-page .racing-wheel-specs { font-family: Roboto-Regular, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; color: rgb(0, 0, 0); padding: 15px 0px; line-height: 1.4; }
.ar-page .racing-wheel-price { display: inline-block; font-family: Roboto-Regular, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; background: linear-gradient(90deg, rgb(238, 114, 3) 0%, rgb(255, 0, 0) 100%) 0% 0% no-repeat padding-box padding-box transparent; padding: 10px 20px; border: unset; border-radius: 21px; text-align: center; text-decoration: none; margin-top: 15px; }
.ar-page .racing-wheel-price .price-button { color: rgb(255, 255, 255); text-decoration: none; text-transform: uppercase; width: 100%; }
.ar-page .racing-slider-wrapper { position: relative; overflow: hidden; }
.ar-page .racing-slider-wrapper .slider-arrow { display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background-color: rgba(255, 255, 255, 0.9); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; font-size: 20px; padding: 5px 10px; cursor: pointer; }
.ar-page .racing-slider-wrapper .slider-arrow.left { left: 0px; transform: rotate(180deg); background: transparent; }
.ar-page .racing-slider-wrapper .slider-arrow.left::before { content: ""; color: rgb(0, 0, 0); font-family: Ascher !important; }
.ar-page .racing-slider-wrapper .slider-arrow.right { right: 0px; background: transparent; transform: rotate(360deg); }
.ar-page .racing-slider-wrapper .slider-arrow.right::before { content: ""; color: rgb(0, 0, 0); font-family: Ascher !important; }
@media screen and (max-width: 768px) {
.ar-page .racing-slider-wrapper .slider-arrow { display: block; }
}
@media screen and (max-width: 768px) {
.ar-page .racing-slider-wrapper { overflow: hidden; }
.ar-page .racing-wheels-container { transition: transform 0.3s; will-change: transform; width: 100%; padding-top: 40px; padding-bottom: 40px; display: flex !important; justify-content: flex-start !important; gap: 0px !important; }
.ar-page .slider-arrow.left { margin-left: 40px; }
.ar-page .slider-arrow.right { margin-right: 40px; }
.ar-page .racing-wheel-item { flex: 0 0 100% !important; max-width: 100% !important; }
.ar-page .racing-item-wrap { width: 72%; margin: 0px auto; }
.ar-page .racing-wheel-image { padding: 67px 20px 30px; }
.ar-page .slider-arrow { display: block; }
}
.ar-page .precision-engineering-section { background-color: rgb(24, 28, 32); color: rgb(255, 255, 255); padding: 80px 0px; position: relative; overflow: hidden; }
.ar-page .precision-content-wrapper { max-width: 1540px; margin: 0px auto; padding: 0px 20px; }
.ar-page .precision-content { margin-bottom: 60px; }
.ar-page .precision-quote-container { display: flex; }
.ar-page .quote-divider { width: 23%; font-size: 34px; text-align: center; border-right: 1px solid rgb(255, 255, 255); margin-right: 50px; }
.ar-page .quote-content { flex: 1 1 0%; color: rgb(255, 255, 255); }
.ar-page .quote-text { font-family: Roboto-Regular, Helvetica, sans-serif; font-size: 50px; font-style: normal; color: rgb(255, 255, 255); line-height: 1.4; margin: 0px 0px 10px; }
.ar-page .quote-author-container { display: flex; align-items: center; margin-bottom: 20px; }
.ar-page .quote-author-image { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; margin-right: 15px; }
.ar-page .quote-author-image img { width: 100%; height: 100%; object-fit: cover; }
.ar-page .quote-author-info { display: flex; flex-direction: column; }
.ar-page .quote-author-name { font-size: 34px; }
.ar-page .quote-author-title { font-family: Roboto-Regular, Helvetica, sans-serif; font-size: 34px; }
.ar-page .quote-signature { margin-left: 90px; }
.ar-page .quote-signature img { height: 60px; width: auto; }
.ar-page .precision-image { width: 100%; }
.ar-page .precision-image img { height: auto; display: block; margin: 0px auto !important; }
.ar-page .realism-section { padding: 140px 0px; }
.ar-page .realism-content-wrapper { display: flex; align-items: center; gap: 60px; }
.ar-page .realism-image-container { flex: 1 1 0%; max-width: 50%; }
.ar-page .realism-image { width: 100%; height: auto; display: block; border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px; }
.ar-page .realism-content { flex: 1 1 0%; max-width: 50%; }
.ar-page .realism-tagline { color: rgb(238, 114, 20); font-family: RobotoCondensed-Bolditalic; font-size: 19px; text-transform: uppercase; text-decoration: underline; margin-bottom: 20px; letter-spacing: 1px; }
.ar-page .realism-heading { width: 80%; font-family: RobotoCondensed-Bolditalic; font-size: 40px; line-height: 66px; color: rgb(0, 0, 0); }
.ar-page .realism-description { width: 80%; font-family: Roboto-Regular, Helvetica, sans-serif; font-size: 20px; color: rgb(0, 0, 0); }
.ar-page .ultimate-tool-section { background-color: rgb(24, 28, 32); color: rgb(255, 255, 255); position: relative; overflow: hidden; }
.ar-page .ultimate-tool-top-image, .ar-page .ultimate-tool-bottom-image { width: 100%; height: auto; overflow: hidden; }
.ar-page .full-width-image { width: 100%; height: auto; display: block; object-fit: cover; }
.ar-page .ultimate-tool-content-wrapper { max-width: 1540px; margin: 0px auto; padding: 100px 20px; }
.ar-page .ultimate-tool-tagline { color: rgb(238, 114, 20); font-family: RobotoCondensed-BoldItalic; font-size: 19px; text-align: center; text-decoration: underline; margin-bottom: 20px; }
.ar-page .ultimate-tool-heading { font-family: RobotoCondensed-Bolditalic; font-size: 50px; text-align: center; }
.ar-page .ultimate-tool-description { font-family: Roboto-Regular, Helvetica, sans-serif; font-size: 19px; color: rgb(255, 255, 255); text-align: center; width: 65%; margin: 0px auto; }
.ar-page .newsletter-section { background-color: rgb(247, 247, 247); padding: 80px 0px; position: relative; overflow: hidden; }
.ar-page .newsletter-section::before { content: ""; position: absolute; inset: 0px; background-image: url("/sites/ascher-racing/pages/ascher-racing.com/static/version1792063045/frontend/KW/AscherRacing/en_GB/images/static/mclaren-category/NL_desktop.webp"); background-size: cover; background-position: center center; opacity: 0.2; z-index: 1; }
.ar-page .newsletter-content-wrapper { margin: 0px auto; padding: 0px 20px; position: relative; z-index: 2; text-align: center; }
.ar-page .newsletter-heading { font-family: RobotoCondensed-Bolditalic; font-size: 50px; margin-bottom: 15px; text-transform: uppercase; color: rgb(0, 0, 0); }
.ar-page .newsletter-subheading { font-family: Roboto-Regular, Helvetica, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.5; color: rgb(0, 0, 0); margin-bottom: 30px; }
.ar-page .newsletter-form { max-width: 800px; display: flex; flex-direction: column; gap: 20px; margin: 0px auto; }
.ar-page .newsletter-form-field { width: 100%; }
.ar-page .newsletter-input { color: rgb(255, 255, 255); background: 0% 0% no-repeat padding-box padding-box rgb(24, 28, 32) !important; border-radius: 33px !important; font-family: RobotoCondensed-Bolditalic, Helvetica, sans-serif !important; font-size: 19px !important; height: 60px !important; padding: 0px 0px 0px 20px !important; }
.ar-page .newsletter-input::placeholder { color: rgb(192, 204, 218) !important; text-transform: uppercase; }
.ar-page .newsletter-input:focus { outline: none; border-color: rgb(238, 114, 3); }
.ar-page .newsletter-consent { text-align: left; margin-top: 10px; }
.ar-page .newsletter-checkbox-label { display: flex; align-items: flex-start; cursor: pointer; }
.ar-page .newsletter-checkbox-label .newsletter-checkbox { position: absolute; opacity: 0; cursor: pointer; height: 0px; width: 0px; }
.ar-page .newsletter-checkbox-label .checkbox-custom { position: relative; top: 2px; display: inline-block; width: 18px; height: 18px; margin-right: 10px; border: 1px solid rgb(104, 116, 132); border-radius: 4px; background-color: rgb(255, 255, 255); flex-shrink: 0; }
.ar-page .newsletter-checkbox-label .checkbox-custom::after { content: ""; position: absolute; display: none; left: 4px; top: 0px; width: 5px; height: 10px; border-style: solid; border-color: rgb(238, 114, 3); border-image: none; border-width: 0px 4px 4px 0px; transform: rotate(45deg); }
.ar-page .newsletter-checkbox-label .newsletter-checkbox:checked ~ .checkbox-custom::after { display: block; }
.ar-page .newsletter-checkbox-label .newsletter-checkbox:focus-visible ~ .checkbox-custom { outline: rgb(238, 114, 3) solid 3px; outline-offset: 3px; }
.ar-page .consent-text { font-family: Roboto-Regular, Helvetica, sans-serif; font-size: 14px; line-height: 1.4; color: rgb(51, 51, 51); }
.ar-page .consent-text a { color: rgb(43, 178, 252); }
.ar-page .newsletter-disclaimer { margin-top: 10px; }
.ar-page .disclaimer-text { font-family: RobotoCondensed-Bolditalic, Helvetica, Arial; font-size: 11px; color: rgb(119, 119, 119); text-align: start; text-transform: uppercase; }
.ar-page .disclaimer-text a { color: rgb(43, 178, 252); }
.ar-page .newsletter-submit { margin-top: 20px; }
.ar-page .newsletter-button { display: inline-block; background: linear-gradient(90deg, rgb(238, 114, 3) 0%, rgb(255, 0, 0) 100%) 0% 0% no-repeat padding-box padding-box transparent; color: rgb(255, 255, 255); font-family: RobotoCondensed-Bolditalic; font-size: 20px; height: 60px; text-transform: uppercase; padding: 12px 40px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 40px; cursor: pointer; transition: transform 0.2s; }
.ar-page .newsletter-button:hover { background: linear-gradient(90deg, rgb(238, 114, 3) 0%, rgb(255, 0, 0) 100%) 0% 0% no-repeat padding-box padding-box transparent; color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; }
.ar-page .ar-page-body.mclaren-newsletter-modal-open { overflow: hidden; }
.ar-page .mclaren-newsletter-modal { position: fixed; inset: 0px; z-index: 10000; display: grid; place-items: center; padding: 24px; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.22s, visibility 0.22s; }
.ar-page .mclaren-newsletter-modal.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
.ar-page .mclaren-newsletter-modal__backdrop { position: absolute; inset: 0px; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; border-radius: 0px; backdrop-filter: blur(6px); cursor: default; background: rgba(4, 6, 8, 0.86) !important; box-shadow: none !important; }
.ar-page .mclaren-newsletter-modal__backdrop:hover, .ar-page .mclaren-newsletter-modal__backdrop:focus, .ar-page .mclaren-newsletter-modal__backdrop:active { border: 0px; outline: 0px; color: transparent; background: rgba(4, 6, 8, 0.86) !important; box-shadow: none !important; }
.ar-page .mclaren-newsletter-modal__dialog { position: relative; box-sizing: border-box; width: 100%; max-width: 620px; overflow: hidden; padding: 58px 64px 52px; border: 1px solid rgba(255, 255, 255, 0.16); background: linear-gradient(145deg, rgb(24, 28, 32) 0%, rgb(9, 11, 13) 72%); box-shadow: rgba(0, 0, 0, 0.55) 0px 30px 90px; color: rgb(255, 255, 255); text-align: center; transform: translateY(18px) scale(0.98); transition: transform 0.22s; }
.ar-page .mclaren-newsletter-modal__dialog::before { content: ""; position: absolute; z-index: 2; top: 0px; right: 0px; left: 0px; height: 7px; background: linear-gradient(90deg, rgb(238, 114, 3) 0%, rgb(255, 0, 0) 100%); }
.ar-page .mclaren-newsletter-modal__dialog::after { content: ""; position: absolute; top: 7px; right: -48px; width: 210px; height: 110px; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.055) 0px, rgba(255, 255, 255, 0.055) 10px, transparent 10px, transparent 22px); transform: skewX(-18deg); pointer-events: none; }
.ar-page .mclaren-newsletter-modal.is-open .mclaren-newsletter-modal__dialog { transform: translateY(0px) scale(1); }
.ar-page .mclaren-newsletter-modal__close { position: absolute; z-index: 3; top: 20px; right: 20px; display: grid; width: 38px; height: 38px; min-width: 0px; padding: 0px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; background: rgba(0, 0, 0, 0.25); color: rgb(255, 255, 255); font: 300 27px / 1 Arial, sans-serif; place-items: center; cursor: pointer; }
.ar-page .mclaren-newsletter-modal__close:hover, .ar-page .mclaren-newsletter-modal__close:focus-visible { border-color: rgb(238, 114, 3); background: rgb(238, 114, 3); color: rgb(255, 255, 255); }
.ar-page .mclaren-newsletter-modal__mark { position: relative; z-index: 1; display: none; width: 72px; height: 72px; margin: 0px auto 26px; border-radius: 50%; color: rgb(255, 255, 255); place-items: center; }
.ar-page .mclaren-newsletter-modal__mark svg { width: 42px; height: 42px; }
.ar-page .mclaren-newsletter-modal__mark path { fill: none; stroke: currentcolor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; }
.ar-page .mclaren-newsletter-modal__mark--success { background: linear-gradient(135deg, rgb(238, 114, 3) 0%, rgb(255, 0, 0) 100%); box-shadow: rgba(238, 67, 3, 0.32) 0px 12px 35px; }
.ar-page .mclaren-newsletter-modal__mark--error { border: 2px solid rgb(255, 59, 48); background: rgba(255, 59, 48, 0.1); color: rgb(255, 98, 89); }
.ar-page .mclaren-newsletter-modal.is-success .mclaren-newsletter-modal__mark--success, .ar-page .mclaren-newsletter-modal.is-error .mclaren-newsletter-modal__mark--error { display: grid; }
.ar-page .mclaren-newsletter-modal h2 { position: relative; z-index: 1; margin: 0px 0px 14px; color: rgb(255, 255, 255); font-family: RobotoCondensed-Bolditalic, Helvetica, Arial, sans-serif; font-size: 52px; font-style: italic; line-height: 0.98; letter-spacing: -0.02em; text-transform: uppercase; }
.ar-page .mclaren-newsletter-modal p { position: relative; z-index: 1; max-width: 460px; margin: 0px auto; color: rgb(198, 204, 209); font-family: Roboto-Regular, Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.55; }
.ar-page .mclaren-newsletter-modal__actions { position: relative; z-index: 1; display: flex; justify-content: center; margin-top: 32px; }
.ar-page .mclaren-newsletter-modal__button { display: none; min-width: 190px; min-height: 54px; padding: 13px 34px; border: 0px; border-radius: 30px; background: linear-gradient(90deg, rgb(238, 114, 3) 0%, rgb(255, 0, 0) 100%); box-shadow: rgba(238, 67, 3, 0.22) 0px 10px 28px; color: rgb(255, 255, 255); font-family: RobotoCondensed-Bolditalic, Helvetica, Arial, sans-serif; font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: transform 0.18s, box-shadow 0.18s; }
.ar-page .mclaren-newsletter-modal__button:hover, .ar-page .mclaren-newsletter-modal__button:focus-visible { border: 0px; background: linear-gradient(90deg, rgb(245, 128, 22) 0%, rgb(255, 23, 23) 100%); box-shadow: rgba(238, 67, 3, 0.34) 0px 13px 34px; color: rgb(255, 255, 255); transform: translateY(-2px); }
.ar-page .mclaren-newsletter-modal.is-success .mclaren-newsletter-modal__button[data-newsletter-close], .ar-page .mclaren-newsletter-modal.is-error .mclaren-newsletter-modal__button[data-newsletter-retry] { display: inline-flex; align-items: center; justify-content: center; }
.ar-page .newsletter-button:disabled { cursor: wait; opacity: 0.65; }
@media (max-width: 600px) {
.ar-page .mclaren-newsletter-modal { padding: 16px; }
.ar-page .mclaren-newsletter-modal__dialog { padding: 52px 24px 34px; }
.ar-page .mclaren-newsletter-modal__close { top: 16px; right: 16px; }
.ar-page .mclaren-newsletter-modal__mark { width: 62px; height: 62px; margin-bottom: 22px; }
.ar-page .mclaren-newsletter-modal h2 { font-size: 36px; }
.ar-page .mclaren-newsletter-modal p { font-size: 15px; }
.ar-page .mclaren-newsletter-modal__button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.ar-page .mclaren-newsletter-modal, .ar-page .mclaren-newsletter-modal__dialog, .ar-page .mclaren-newsletter-modal__button { transition: none; }
}
.ar-page .message-success { background: rgb(230, 255, 237); border-left: 5px solid rgb(40, 167, 69); padding: 10px; margin-top: 20px; }
.ar-page .message-error { background: rgb(255, 230, 230); border-left: 5px solid rgb(220, 53, 69); padding: 10px; margin-top: 20px; }
@media (max-width: 991px) {
.ar-page .ultimate-tool-content-wrapper { padding: 60px 20px; }
.ar-page .ultimate-tool-heading { font-size: 28px; }
.ar-page .ultimate-tool-description { font-size: 16px; }
}
@media (max-width: 1400px) {
.ar-page .realism-heading { width: 95%; }
}
@media (max-width: 1200px) {
.ar-page .realism-heading { font-size: 35px; line-height: 42px; }
}
@media (max-width: 991px) {
.ar-page .precision-heading { font-size: 30px; }
.ar-page .precision-description { font-size: 16px; }
.ar-page .quote-text { font-size: 40px; }
.ar-page .quote-divider { font-size: 30px; }
.ar-page .realism-content-wrapper { gap: 20px; }
.ar-page .realism-image-container, .ar-page .realism-content { max-width: 100%; }
.ar-page .realism-heading { font-size: 28px; }
.ar-page .realism-tagline { font-size: 16px; }
.ar-page .realism-description { font-size: 16px; }
}
@media (min-width: 1056px) and (max-width: 1175px) {
.ar-page .racing-wheel-specs { height: 120px; }
}
@media (min-width: 768px) and (max-width: 1056px) {
.ar-page .racing-item-wrap { height: 600px; }
.ar-page .racing-wheel-info { padding: 20px 10px 50px !important; }
.ar-page .racing-wheel-title { font-size: 23px; }
.ar-page .racing-wheel-specs { height: 120px; }
}
@media (max-width: 768px) {
.ar-page .racing-wheels-container { gap: 15px; }
.ar-page .racing-wheel-item { max-width: 45%; }
.ar-page .precision-engineering-section { padding: 60px 40px 0px; }
.ar-page .precision-heading { font-size: 26px; }
.ar-page .precision-img { display: none !important; }
.ar-page .precision-img-mobile { display: block !important; }
.ar-page .precision-quote-container { margin-top: 40px; }
.ar-page .quote-divider { font-size: 21px; margin-right: 20px; padding-right: 20px; }
.ar-page .quote-text { font-size: 30px; }
.ar-page .realism-content-wrapper { padding-left: 20px; }
.ar-page .realism-section { padding: 60px 0px; }
.ar-page .realism-image { display: none !important; }
.ar-page .realism-image-mobile { display: block !important; }
.ar-page .ultimate-tool-content-wrapper { padding: 50px 20px; }
.ar-page .ultimate-tool-heading { font-size: 24px; }
.ar-page .newsletter-section { padding: 60px 0px; }
.ar-page .newsletter-section::before { background-image: url("/sites/ascher-racing/pages/ascher-racing.com/static/version1792063045/frontend/KW/AscherRacing/en_GB/images/static/mclaren-category/NL_mobiile.webp"); }
.ar-page .newsletter-heading { font-size: 28px; }
.ar-page .newsletter-subheading { font-size: 16px; }
}
@media (max-width: 530px) {
.ar-page .racing-item-wrap { width: 70%; }
}
@media (max-width: 480px) {
.ar-page .racing-wheel-item { max-width: 100%; }
.ar-page .racing-wheel-title { font-size: 24px; }
.ar-page .slider-arrow.left { margin-left: 20px; }
.ar-page .slider-arrow.right { margin-right: 20px; }
.ar-page .precision-engineering-section { padding: 40px 0px; }
.ar-page .precision-heading { font-size: 22px; }
.ar-page .precision-description { font-size: 14px; }
.ar-page .quote-divider { font-size: 12px; }
.ar-page .quote-text { font-size: 20px; }
.ar-page .quote-author-image { width: 50px; height: 50px; }
.ar-page .quote-author-name { font-size: 16px; }
.ar-page .quote-author-title { font-size: 14px; }
.ar-page .quote-signature { margin-left: 50px; }
.ar-page .quote-signature img { height: 40px; }
.ar-page .realism-section { padding: 40px 0px; }
.ar-page .realism-heading { font-size: 20px; line-height: 23px; margin-top: 10px; }
.ar-page .realism-tagline { font-size: 14px; }
.ar-page .realism-description { font-size: 13px; }
.ar-page .ultimate-tool-content-wrapper { padding: 40px 20px; }
.ar-page .ultimate-tool-heading { font-size: 22px; }
.ar-page .ultimate-tool-description { font-size: 14px; width: 95%; }
.ar-page .ultimate-tool-tagline { font-size: 14px; }
.ar-page .newsletter-section { padding: 40px 0px; }
.ar-page .newsletter-section::before { background-size: cover; margin-left: -380px; }
.ar-page .newsletter-heading { font-size: 24px; }
.ar-page .newsletter-subheading { font-size: 14px; }
.ar-page .newsletter-input { height: 45px; font-size: 14px; }
.ar-page .newsletter-button { font-size: 14px; padding: 10px 30px; }
}