/* ============================================================
EVmotoX Brand Styles — version 0.9.1 — saved 2026-05-21
(CSS class names retained as .emotex-* per partner decision —
file renamed in copy only, not in class identifiers.)
Loaded LAST in so rules here override template defaults.
Keep original Oswan template files (style.css, responsive.css)
untouched so future template updates remain safe.
Versioning convention: Major.Minor.Patch
- Patch: small fix (one value, one selector)
- Minor: new section / new component
- Major: stays at 0 until site release
Bump version stamp on every backup snapshot.
============================================================ */
/* ----------------------------------------------------------
1. Inline header logo (replaces ![]()
for uniform letter
spacing and automatic color swap on sticky header)
---------------------------------------------------------- */
.emotex-logo {
font-family: 'Anton', 'Impact', sans-serif;
font-size: 36px;
line-height: 1;
letter-spacing: 5px;
text-decoration: none;
display: inline-block;
white-space: nowrap;
user-select: none;
}
.emotex-logo:hover,
.emotex-logo:focus {
text-decoration: none;
}
/* Yellow E — same on all backgrounds */
.emotex-logo .emotex-e {
color: #ffb52f;
}
/* Default: dark hero background → MOTEX is white */
.emotex-logo .emotex-rest {
color: #ffffff;
transition: color 0.3s ease;
}
/* Sticky header (white background) → MOTEX becomes navy */
.transparent-bar.stick .emotex-logo .emotex-rest {
color: #001232;
}
/* Footer logo — larger size on dark footer background */
.emotex-logo-footer {
font-size: 48px;
letter-spacing: 6px;
}
/* ----------------------------------------------------------
2. Responsive logo sizing
---------------------------------------------------------- */
/* Tablet */
@media (max-width: 991px) {
.emotex-logo {
font-size: 32px;
letter-spacing: 3px;
}
}
/* Mobile */
@media (max-width: 575px) {
.emotex-logo {
font-size: 28px;
letter-spacing: 3px;
}
}
/* ----------------------------------------------------------
2b. SVG logo images (v0.9.0)
Replaces the old typographic E + MOTEX spans.
Two variants live inside .emotex-logo:
.evmotox-logo-img-on-dark → yellow + white (default,
shown on dark hero header and dark footer)
.evmotox-logo-img-on-light → yellow + navy (shown
when the header becomes sticky over white bg)
Heights chosen to match the visual footprint of the
previous Anton word-mark at each breakpoint.
---------------------------------------------------------- */
.emotex-logo .evmotox-logo-img {
display: inline-block;
height: 38px;
width: auto;
max-width: 100%; /* never overflow the parent column */
vertical-align: middle;
}
/* On dark backgrounds (default header + footer) show the on-dark variant */
.emotex-logo .evmotox-logo-img-on-light {
display: none;
}
/* Footer logo — sized to fit comfortably inside the col-lg-3 footer column.
v0.9.1: reduced from 50px (overflowed column) to 38px + max-width safety. */
.emotex-logo-footer .evmotox-logo-img {
height: 38px;
}
/* When the header becomes sticky (white background), swap to the
on-light variant so the navy "moto" letters are visible. */
.transparent-bar.stick .emotex-logo .evmotox-logo-img-on-dark {
display: none;
}
.transparent-bar.stick .emotex-logo .evmotox-logo-img-on-light {
display: inline-block;
}
/* Responsive sizing for the SVG logo */
@media (max-width: 991px) {
.emotex-logo .evmotox-logo-img {
height: 32px;
}
.emotex-logo-footer .evmotox-logo-img {
height: 32px;
}
}
@media (max-width: 575px) {
.emotex-logo .evmotox-logo-img {
height: 28px;
}
.emotex-logo-footer .evmotox-logo-img {
height: 28px;
}
}
/* ----------------------------------------------------------
3. Hero slider — labeled model-selector buttons
Dots are styled as labeled pills (EM-5 / EM-5 PRO) so
visitors immediately understand the slider holds two
models, and can jump directly to the one they want.
---------------------------------------------------------- */
.latest-product-slider .owl-dots {
text-align: center;
margin-top: 20px;
position: relative;
z-index: 5;
display: flex;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
.latest-product-slider .owl-dots .owl-dot {
background: transparent;
border: 2px solid rgba(255, 255, 255, 0.4);
color: #ffffff;
font-family: 'Oswald', sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 9px 22px;
border-radius: 30px;
cursor: pointer;
transition: all 0.3s ease;
line-height: 1;
}
.latest-product-slider .owl-dots .owl-dot:hover {
border-color: #ffb52f;
color: #ffb52f;
}
.latest-product-slider .owl-dots .owl-dot.active {
background: #ffb52f;
border-color: #ffb52f;
color: #001232;
}
/* ============================================================
4. Trust Strip — anchored to bottom of hero (Sketch 4)
Lives INSIDE .latest-product-area as the last child.
Full-width navy band with 4 evenly-spaced advantage items.
Hidden on mobile (advantage panel S6 covers it there).
============================================================ */
.latest-product-img {
position: relative;
}
.trust-strip {
background-color: #001232;
padding: 30px 0;
/* Sit flush at the bottom edge of the hero */
}
/* Hero now contains the trust strip — zero out its bottom padding on
desktop so the strip anchors flush to the hero's bottom edge.
Mobile rule below overrides this with its own value. */
@media (min-width: 768px) {
.latest-product-area.pb-145 {
padding-bottom: 0 !important;
}
/* Bike image: cap at 85% of column for breathing room around the bike.
Centered horizontally so the breathing room splits evenly. */
.latest-product-img img {
max-width: 85%;
height: auto;
display: block;
margin: 0 auto;
}
/* CTA buttons (S8): equal top + bottom margin to separate them from
the price block above and from the trust strip below. */
.latext-btn {
margin: 30px 0 30px !important;
}
/* Selector pills (S3): on desktop these render at the bottom of the
slider stage, just above the trust strip. Add bottom margin so
they don't sit flush against S9. */
.latest-product-slider .owl-dots {
margin-bottom: 30px !important;
}
}
/* ============================================================
5. Global hides
- Top-right "Place an Order" pill removed from all viewports
per Sketch 4 (replaced by the trust strip + main hero CTA).
- Bike-image overlay removed from all viewports (replaced
by the trust strip).
============================================================ */
.header-cart-wrapper {
display: none !important;
}
.bike-image-overlay {
display: none !important;
}
/* ============================================================
6. Advantage Panel — Sketch 2 mobile component
Hidden on desktop (advantages live in the trust strip there).
Shown on mobile as a highlighted dark panel with yellow accent
stripe on the left side.
============================================================ */
.advantage-panel {
display: none; /* default — hidden on desktop */
}
/* ============================================================
6. MOBILE OPTIMIZATIONS (≤ 767px)
============================================================ */
@media (max-width: 767px) {
/* ---- Hero section padding ---- */
.latest-product-area.pt-205 {
padding-top: 84px !important;
}
.latest-product-area.pb-145 {
padding-bottom: 18px !important;
}
.latest-product-area .container-fluid {
padding: 0 16px !important;
}
/* ---- Header padding ---- */
.header-area .container,
header .container {
padding-left: 16px !important;
padding-right: 16px !important;
}
/* ---- HIDE inline mobile "Order Now" pill (cart-small-device).
The desktop .header-cart-wrapper is hidden globally above. ---- */
.header-cart.cart-small-device {
display: none !important;
}
/* ---- Bike image: capped size so buttons stay above fold ---- */
.latest-product-img {
margin: 0 !important;
text-align: center;
}
.latest-product-img picture,
.latest-product-img img {
display: block;
margin: 0 auto;
max-width: 75%;
max-height: 280px;
width: auto;
height: auto;
}
/* ---- HIDE bike-image overlay on mobile (advantage panel takes over) ---- */
.bike-image-overlay {
display: none !important;
}
/* ---- Slide content: flex column, custom order ---- */
.latest-product-content {
padding-right: 0 !important;
margin-top: 8px;
display: flex;
flex-direction: column;
}
/* ---- HIDE the desktop title entirely on mobile.
The selector pills act as the title (EM-5 / EM-5 PRO) ---- */
.latest-product-content > h2,
.latest-product-content > p {
display: none !important;
}
/* ---- Spec grid: ALL 6 specs in 3 columns × 2 rows on mobile.
HTML has 6 specs grouped into 3 inner d-flex rows (2 each).
We use display:contents on the row groups to flatten and
render them as direct grid children. ---- */
.latest-product-content .animated.mt-3.mb-4 {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 6px !important;
text-align: left !important;
margin: 0 !important;
max-width: 100%;
order: 2;
}
/* Flatten template's nested d-flex row groupings */
.latest-product-content .animated.mt-3.mb-4 > .d-flex {
display: contents !important;
}
/* Each spec item — tighter bordered tile */
.latest-product-content .animated.mt-3.mb-4 > .d-flex > .d-flex {
min-width: 0 !important;
gap: 6px !important;
align-items: center;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 6px;
padding: 6px 6px;
}
.latest-product-content .animated.mt-3.mb-4 .d-flex .bi {
font-size: 1.15rem !important;
}
.latest-product-content .animated.mt-3.mb-4 .d-flex > div > div:first-child {
font-size: 0.82rem !important;
font-weight: 700;
line-height: 1.1 !important;
}
.latest-product-content .animated.mt-3.mb-4 .d-flex > div > div:last-child {
font-size: 0.62rem !important;
line-height: 1.2 !important;
}
/* ---- Selector pills (placed by JS into top of active slide content on mobile) ---- */
.latest-product-slider .owl-dots {
margin: 12px 0 22px;
gap: 10px;
}
.latest-product-slider .owl-dots .owl-dot {
font-size: 13px;
padding: 7px 16px;
}
/* ---- ADVANTAGE PANEL (Sketch 2 hero element) ---- */
.advantage-panel {
display: flex !important;
flex-direction: column;
gap: 10px;
background: #050d22;
border-left: 4px solid #ffb52f;
padding: 12px 12px 12px 14px;
margin: 12px 0 24px;
border-radius: 4px;
order: 3;
text-align: left !important;
}
.advantage-item {
display: flex;
align-items: center;
gap: 12px;
text-align: left !important;
}
.advantage-item > div {
text-align: left !important;
}
.advantage-item .bi {
font-size: 1.7rem;
color: #ffb52f;
flex-shrink: 0;
line-height: 1;
}
.advantage-title {
font-size: 1rem;
font-weight: 700;
color: #ffffff;
line-height: 1.15;
margin-bottom: 1px;
text-align: left !important;
}
.advantage-sub {
font-size: 0.72rem;
color: #b8c2d4;
line-height: 1.25;
text-align: left !important;
}
/* ---- Price block: RIGHT-aligned, smaller, with breathing room ---- */
.latest-price {
margin: 0 0 24px !important;
text-align: right !important;
padding: 0 4px;
order: 4;
}
.latest-price > h3 {
font-size: 26px !important;
}
.latest-price > span {
font-size: 13px !important;
margin-top: 2px;
}
/* ---- Buttons: side-by-side equal width ---- */
.latext-btn {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
order: 5;
}
.latext-btn > a {
flex: 1 1 140px;
max-width: 200px;
text-align: center;
padding: 12px 16px !important;
margin: 0 !important;
font-size: 16px;
}
/* ---- Trust strip: HIDE on mobile.
The advantage panel inside the hero (S6) already shows
"Fits any SUV" + "2-person carry" — so this strip would
be a duplicate on mobile. Desktop keeps it. ---- */
.trust-strip {
display: none !important;
}
}
/* Extra-tight phones (≤ 380px) */
@media (max-width: 380px) {
.latest-price > h3 {
font-size: 24px !important;
}
.latext-btn > a {
font-size: 14px;
padding: 10px 12px !important;
}
.latest-product-content .animated.mt-3.mb-4 .d-flex .bi {
font-size: 1.2rem !important;
}
.latest-product-content .animated.mt-3.mb-4 .d-flex > div > div:first-child {
font-size: 0.85rem !important;
}
.latest-product-content .animated.mt-3.mb-4 .d-flex > div > div:last-child {
font-size: 0.65rem !important;
}
.advantage-title {
font-size: 1rem;
}
.advantage-sub {
font-size: 0.72rem;
}
}
/* ============================================================
12. EM-5 Detail Page — Tab-style photo gallery
One big image visible at a time, 4 thumbnails beneath.
Click a thumbnail to swap the main image (Bootstrap tabs).
Same pattern on desktop and mobile (4 thumbs always visible).
============================================================ */
.em5-thumb-nav {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 10px;
margin-top: 12px;
padding: 0;
list-style: none;
}
.em5-thumb {
flex: 1 1 0;
min-width: 0;
display: block;
border: 2px solid transparent;
border-radius: 4px;
overflow: hidden;
background: #fff;
transition: border-color 0.15s ease;
cursor: pointer;
}
.em5-thumb:hover {
border-color: #ffb52f;
}
.em5-thumb.active {
border-color: #ffb52f;
}
.em5-thumb img {
width: 100%;
height: auto;
display: block;
}
/* The main image area — let it breathe with a subtle frame */
.product-details-large {
background: #fff;
border: 1px solid #eee;
border-radius: 4px;
overflow: hidden;
}
.product-details-large .tab-pane img {
width: 100%;
height: auto;
display: block;
}
/* Mobile: keep 4 thumbs visible, tighter gap */
@media (max-width: 767px) {
.em5-thumb-nav {
gap: 6px;
margin-top: 10px;
}
/* Remove the 40px right margin on mobile (single column stack) */
.product-details-tab.mr-40 {
margin-right: 0 !important;
}
}
/* ============================================================
13. Homepage H3 — Bike Comparison Cards
Two side-by-side cards (EM-5 + EM-5 Pro). Hover lifts card.
Whole card is clickable → product detail page.
============================================================ */
.bike-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 28px rgba(0, 18, 50, 0.12) !important;
text-decoration: none !important;
color: inherit !important;
}
.bike-card:hover .bike-card-body div[style*="border:2px solid"] {
background: #001232;
color: #fff;
}
/* ============================================================
14. Order Page — form layout
Uses class-based selectors (not inline styles) so template's
default `input { width: 100% }` doesn't fight the radio button.
All rules use !important to win over template's input styles.
============================================================ */
.order-intro-text {
font-size: 17px;
color: #333;
line-height: 1.65;
max-width: 600px;
margin: 0 auto;
}
.emotex-order-form .hp-field {
display: none;
}
.order-section {
margin-bottom: 30px;
}
.order-section-models {
background: #f6f7fa;
border-left: 4px solid #ffb52f;
padding: 28px 30px;
}
.order-section-title {
font-family: 'Oswald', sans-serif;
font-weight: 700;
color: #001232;
font-size: 18px;
letter-spacing: 1.5px;
margin-bottom: 20px;
}
/* Model option — radio + name + description, all on ONE row */
.model-option {
display: flex !important;
align-items: center;
padding: 14px 18px;
background: #fff;
border: 2px solid #e0e0e0;
border-radius: 4px;
margin-bottom: 12px;
cursor: pointer;
transition: border-color 0.15s ease;
}
.model-option:hover {
border-color: #b8c2d4;
}
.model-option.is-selected {
border-color: #ffb52f;
}
/* The radio input itself — kill template's width:100% */
.model-option input[type="radio"] {
width: 18px !important;
height: 18px !important;
min-width: 18px;
margin: 0 14px 0 0 !important;
padding: 0 !important;
flex: 0 0 18px;
cursor: pointer;
accent-color: #ffb52f;
}
.model-option-text {
flex: 1 1 auto;
min-width: 0;
}
.model-option-name {
font-family: 'Oswald', sans-serif;
font-weight: 700;
color: #001232;
font-size: 17px;
line-height: 1.3;
}
.model-option-desc {
font-size: 13px;
color: #666;
line-height: 1.4;
margin-top: 2px;
}
/* Standard form inputs — override template */
.order-label {
display: block !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #001232 !important;
margin-bottom: 6px !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
.order-input {
width: 100% !important;
padding: 12px 14px !important;
border: 1px solid #d0d0d0 !important;
border-radius: 4px !important;
font-size: 15px !important;
background: #fff !important;
box-shadow: none !important;
height: auto !important;
line-height: 1.4 !important;
color: #333 !important;
}
.order-input:focus {
border-color: #ffb52f !important;
outline: none !important;
}
.order-textarea {
resize: vertical;
min-height: 100px;
}
/* Submit button + helper note */
.order-submit-wrap {
text-align: center;
margin-top: 10px;
}
.order-submit-btn {
background: #ffb52f;
color: #001232;
font-family: 'Oswald', sans-serif;
font-weight: 700;
padding: 16px 48px;
border: none;
border-radius: 3px;
font-size: 16px;
letter-spacing: 1.5px;
cursor: pointer;
transition: background 0.15s ease;
}
.order-submit-btn:hover {
background: #e0a020;
}
.order-submit-note {
font-size: 13px;
color: #666;
margin-top: 14px;
}
/* Mobile: tighten the model-option padding */
@media (max-width: 767px) {
.order-section-models {
padding: 20px 18px;
}
.model-option {
padding: 12px 14px;
}
.model-option-name {
font-size: 16px;
}
.model-option-desc {
font-size: 12px;
}
}
/* Helper hint text below an input — used for phone format note */
.order-input-hint {
font-size: 12px;
color: #888;
margin-top: 5px;
line-height: 1.3;
}
/* ============================================================
15. Order Success page — confirmation card after submission
============================================================ */
.order-success-card {
background: #fff;
border-radius: 6px;
box-shadow: 0 8px 30px rgba(0, 18, 50, 0.08);
padding: 50px 40px;
border-top: 4px solid #ffb52f;
}
.order-success-icon {
font-size: 64px;
color: #ffb52f;
display: block;
margin-bottom: 20px;
line-height: 1;
}
.order-success-title {
font-family: 'Oswald', sans-serif;
font-weight: 700;
color: #001232;
margin-bottom: 14px;
letter-spacing: 1.5px;
}
.order-success-text {
font-size: 17px;
color: #333;
line-height: 1.65;
margin-bottom: 20px;
}
.order-success-followup {
font-size: 14px;
color: #666;
margin-bottom: 36px;
}
.order-success-followup a {
color: #001232;
font-weight: 600;
text-decoration: underline;
}
.order-success-actions {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
.order-success-btn-primary,
.order-success-btn-secondary {
font-family: 'Oswald', sans-serif;
font-weight: 700;
padding: 14px 32px;
text-decoration: none;
border-radius: 3px;
font-size: 15px;
letter-spacing: 1px;
display: inline-block;
transition: all 0.15s ease;
}
.order-success-btn-primary {
background: #001232;
color: #fff;
border: 2px solid #001232;
}
.order-success-btn-primary:hover {
background: #ffb52f;
color: #001232;
border-color: #ffb52f;
text-decoration: none;
}
.order-success-btn-secondary {
background: transparent;
color: #001232;
border: 2px solid #001232;
}
.order-success-btn-secondary:hover {
background: #001232;
color: #fff;
text-decoration: none;
}
@media (max-width: 767px) {
.order-success-card {
padding: 36px 24px;
}
.order-success-icon {
font-size: 52px;
}
.order-success-actions {
flex-direction: column;
}
.order-success-btn-primary,
.order-success-btn-secondary {
width: 100%;
}
}
/* ============================================================
16. FAQ Page — Bootstrap accordion, EVmotoX-styled
============================================================ */
.faq-intro {
font-size: 17px;
color: #333;
line-height: 1.65;
margin-bottom: 50px;
text-align: center;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.faq-intro a {
color: #001232;
font-weight: 600;
text-decoration: underline;
}
.faq-section {
margin-bottom: 50px;
}
.faq-section-title {
font-family: 'Oswald', sans-serif;
font-weight: 700;
color: #001232;
font-size: 18px;
letter-spacing: 1.5px;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 3px solid #ffb52f;
}
.emotex-faq .accordion-item {
border: 1px solid #e0e0e0 !important;
border-radius: 4px !important;
margin-bottom: 10px;
overflow: hidden;
background: #fff;
}
.emotex-faq .accordion-button {
font-family: 'Oswald', sans-serif !important;
font-weight: 600 !important;
color: #001232 !important;
font-size: 16px !important;
background: #fff !important;
padding: 18px 22px !important;
border: none !important;
box-shadow: none !important;
text-transform: none !important;
letter-spacing: 0 !important;
line-height: 1.4 !important;
}
.emotex-faq .accordion-button:not(.collapsed) {
background: #f6f7fa !important;
color: #001232 !important;
border-bottom: 2px solid #ffb52f !important;
}
.emotex-faq .accordion-button:focus {
box-shadow: none !important;
border-color: #ffb52f !important;
}
.emotex-faq .accordion-button::after {
background-size: 16px !important;
width: 16px !important;
height: 16px !important;
flex-shrink: 0;
}
.emotex-faq .accordion-body {
padding: 20px 22px !important;
color: #444 !important;
font-size: 15px !important;
line-height: 1.7 !important;
background: #fff;
}
.emotex-faq .accordion-body a {
color: #001232;
font-weight: 600;
text-decoration: underline;
}
.emotex-faq .accordion-body strong {
color: #001232;
}
/* FAQ bottom CTA */
.faq-cta {
background: #001232;
padding: 50px 40px;
text-align: center;
border-radius: 6px;
margin-top: 40px;
}
.faq-cta h3 {
font-family: 'Oswald', sans-serif;
font-weight: 700;
color: #fff;
margin-bottom: 14px;
letter-spacing: 1.5px;
}
.faq-cta p {
color: #b8c2d4;
font-size: 16px;
margin-bottom: 24px;
max-width: 540px;
margin-left: auto;
margin-right: auto;
}
.faq-cta-btn {
background: #ffb52f;
color: #001232;
font-family: 'Oswald', sans-serif;
font-weight: 700;
padding: 14px 36px;
text-decoration: none;
border-radius: 3px;
font-size: 15px;
letter-spacing: 1.5px;
display: inline-block;
transition: background 0.15s ease;
}
.faq-cta-btn:hover {
background: #fff;
color: #001232;
text-decoration: none;
}
@media (max-width: 767px) {
.emotex-faq .accordion-button {
font-size: 15px !important;
padding: 16px 18px !important;
}
.emotex-faq .accordion-body {
padding: 18px !important;
font-size: 14px !important;
}
.faq-cta {
padding: 36px 24px;
}
}
/* ============================================================
17. Contact Page — service-area card + form
============================================================ */
.contact-block-title {
font-family: 'Oswald', sans-serif;
font-weight: 700;
color: #001232;
font-size: 18px;
letter-spacing: 1.5px;
margin-bottom: 24px;
padding-bottom: 12px;
border-bottom: 3px solid #ffb52f;
}
/* Location card */
.contact-location-card {
background: #f6f7fa;
border-left: 4px solid #ffb52f;
padding: 24px 26px;
margin-bottom: 24px;
display: flex;
align-items: flex-start;
gap: 18px;
}
.contact-location-icon i {
font-size: 32px;
color: #ffb52f;
line-height: 1;
}
.contact-location-text h4 {
font-family: 'Oswald', sans-serif;
font-weight: 700;
color: #001232;
font-size: 22px;
margin-bottom: 6px;
letter-spacing: 0.5px;
}
.contact-location-text p {
color: #555;
font-size: 14px;
line-height: 1.5;
margin: 0;
}
/* Three-row info block */
.contact-info-block {
margin-bottom: 30px;
}
.contact-info-item {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid #eee;
}
.contact-info-item:last-child {
border-bottom: none;
}
.contact-info-item i {
font-size: 22px;
color: #ffb52f;
flex-shrink: 0;
margin-top: 2px;
}
.contact-info-item strong {
display: block;
color: #001232;
font-family: 'Oswald', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
margin-bottom: 4px;
}
.contact-info-item span {
color: #555;
font-size: 14px;
line-height: 1.5;
}
/* CTA card */
.contact-cta-card {
background: #001232;
padding: 22px 24px;
border-radius: 4px;
}
.contact-cta-card p {
color: #e1e1e1;
font-size: 14px;
line-height: 1.5;
margin-bottom: 14px;
}
.contact-cta-card p strong {
color: #ffb52f;
}
.contact-cta-btn {
background: #ffb52f;
color: #001232;
font-family: 'Oswald', sans-serif;
font-weight: 700;
padding: 12px 24px;
text-decoration: none;
border-radius: 3px;
font-size: 14px;
letter-spacing: 1.5px;
display: inline-block;
transition: background 0.15s ease;
}
.contact-cta-btn:hover {
background: #fff;
color: #001232;
text-decoration: none;
}
/* Contact form — same input pattern as order form */
.emotex-contact-form .hp-field {
display: none;
}
.contact-label {
display: block !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #001232 !important;
margin-bottom: 6px !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
.contact-input {
width: 100% !important;
padding: 12px 14px !important;
border: 1px solid #d0d0d0 !important;
border-radius: 4px !important;
font-size: 15px !important;
background: #fff !important;
box-shadow: none !important;
height: auto !important;
line-height: 1.4 !important;
color: #333 !important;
font-family: inherit !important;
}
.contact-input:focus {
border-color: #ffb52f !important;
outline: none !important;
}
.contact-textarea {
resize: vertical;
min-height: 140px;
}
.contact-submit-wrap {
text-align: left;
margin-top: 10px;
}
.contact-submit-btn {
background: #ffb52f;
color: #001232;
font-family: 'Oswald', sans-serif;
font-weight: 700;
padding: 16px 40px;
border: none;
border-radius: 3px;
font-size: 15px;
letter-spacing: 1.5px;
cursor: pointer;
transition: background 0.15s ease;
}
.contact-submit-btn:hover {
background: #e0a020;
}
.contact-submit-note {
font-size: 13px;
color: #666;
margin-top: 12px;
}
@media (max-width: 991px) {
.contact-block-title {
margin-top: 20px;
}
}
@media (max-width: 767px) {
.contact-location-card {
padding: 20px;
gap: 14px;
}
.contact-cta-card {
padding: 20px;
}
}
/* ============================================================
18. Homepage H3 — Bike Grid Cards (3-column)
Two functional cards (EM-5 + Pro) + 1 placeholder card.
Layout: title at top, then 2-column body (image + spec ribbon),
then right-aligned price block, then action buttons.
============================================================ */
.bike-grid-card {
background: #f6f7fa;
border-radius: 6px;
padding: 24px 22px 22px;
height: 100%;
display: flex;
flex-direction: column;
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
overflow: hidden;
}
.bike-grid-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 18, 50, 0.10);
}
/* Card title — "VALTINSU EM-5" at top of card */
.bike-grid-title {
font-family: 'Oswald', sans-serif;
font-weight: 700;
color: #001232;
font-size: 24px;
letter-spacing: 0.5px;
line-height: 1.1;
margin: 0 0 18px 0;
}
.bike-grid-title span {
color: #ffb52f;
}
/* Card body — image left, spec ribbon right */
.bike-grid-body {
display: flex;
align-items: center;
gap: 14px;
flex: 1 1 auto;
margin-bottom: 18px;
}
/* Bike image area */
.bike-grid-img-wrap {
flex: 1 1 60%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.bike-grid-img-wrap img {
max-width: 100%;
max-height: 220px;
width: auto;
height: auto;
display: block;
}
/* Spec ribbon — 4 vertical rows, transparent background */
.bike-grid-specs {
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: 14px;
}
.bike-grid-spec-row {
display: flex;
align-items: center;
gap: 9px;
}
.bike-grid-spec-icon {
font-size: 22px;
color: #ffb52f;
line-height: 1;
flex-shrink: 0;
}
.bike-grid-spec-text {
min-width: 0;
}
.bike-grid-spec-value {
font-family: 'Oswald', sans-serif;
font-weight: 700;
color: #001232;
font-size: 17px;
line-height: 1;
white-space: nowrap;
}
.bike-grid-spec-label {
font-size: 9px;
letter-spacing: 0.6px;
color: #9b9b9b;
margin-top: 3px;
white-space: nowrap;
text-transform: uppercase;
}
/* Price block — right-aligned */
.bike-grid-price-row {
text-align: right;
margin-bottom: 16px;
padding-top: 14px;
border-top: 1px solid #e0e0e0;
}
.bike-grid-price {
font-family: 'Oswald', sans-serif;
font-weight: 700;
color: #001232;
font-size: 22px;
line-height: 1.2;
}
.bike-grid-pickup {
font-size: 12px;
color: #9b9b9b;
margin-top: 2px;
}
/* Action buttons — always visible (no hover-only) */
.bike-grid-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
/* When .emotex-btn-* lives inside .bike-grid-actions, share row width */
.bike-grid-actions .emotex-btn-primary,
.bike-grid-actions .emotex-btn-secondary {
flex: 1 1 0;
padding: 11px 8px !important;
font-size: 12px !important;
}
/* Coming Soon placeholder card */
.bike-grid-card-empty {
background: #fafafa;
border: 2px dashed #d0d0d0;
align-items: center;
justify-content: center;
padding: 60px 30px;
text-align: center;
}
.bike-grid-card-empty:hover {
transform: none;
box-shadow: none;
}
.bike-grid-empty-content {
color: #888;
}
.bike-grid-empty-icon {
font-size: 48px;
color: #c0c0c0;
display: block;
margin-bottom: 18px;
line-height: 1;
}
.bike-grid-card-empty h3 {
font-family: 'Oswald', sans-serif;
font-weight: 700;
color: #888;
font-size: 20px;
letter-spacing: 1px;
margin-bottom: 12px;
line-height: 1.3;
}
.bike-grid-card-empty p {
color: #999;
font-size: 14px;
line-height: 1.5;
margin: 0;
max-width: 220px;
margin-left: auto;
margin-right: auto;
}
/* Tablet: tighten spec ribbon a bit */
@media (max-width: 991px) and (min-width: 768px) {
.bike-grid-body {
gap: 10px;
}
.bike-grid-img-wrap img {
max-height: 180px;
}
.bike-grid-spec-value {
font-size: 15px;
}
.bike-grid-spec-icon {
font-size: 18px;
}
.bike-grid-specs {
gap: 11px;
}
}
/* Mobile: stack vertically — image on top, spec ribbon below as a 2-column grid */
@media (max-width: 767px) {
.bike-grid-card {
padding: 22px 20px 20px;
}
.bike-grid-body {
flex-direction: column;
gap: 18px;
}
.bike-grid-img-wrap {
flex: 0 0 auto;
width: 100%;
}
.bike-grid-img-wrap img {
max-height: 240px;
}
.bike-grid-specs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 18px;
width: 100%;
}
.bike-grid-spec-value {
font-size: 18px;
}
.bike-grid-card-empty {
padding: 50px 24px;
}
}
/* ============================================================
19. Order form — validation error state
Inline red error messages under invalid fields.
============================================================ */
.order-input-error {
font-size: 13px;
color: #d9534f;
margin-top: 5px;
line-height: 1.3;
display: none;
font-weight: 500;
}
.order-input-error.is-active {
display: block;
}
.order-input.has-error {
border-color: #d9534f !important;
background: #fdf6f6 !important;
}
.order-input.has-error:focus {
border-color: #d9534f !important;
box-shadow: 0 0 0 2px rgba(217, 83, 79, 0.15) !important;
}
/* ============================================================
20. Section anchors for in-page navigation
When user arrives via a hash-link (e.g., index.html#models from
another page), browser scrolls to the anchor element. We use a
dedicated invisible anchor div placed ABOVE the section, with
scroll-margin equal to the transparent header's height. This
way the user lands with the section title clearly visible at
the top of the viewport.
Also setting scroll-padding-top on html as a global fallback,
which applies to ALL hash navigation in modern browsers.
============================================================ */
html {
scroll-padding-top: 90px;
}
@media (max-width: 991px) {
html {
scroll-padding-top: 60px;
}
}
.section-anchor {
display: block;
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
/* Belt-and-suspenders: also set scroll-margin in case
scroll-padding on isn't honored by the browser */
scroll-margin-top: 90px;
}
@media (max-width: 991px) {
.section-anchor {
scroll-margin-top: 60px;
}
}
/* ============================================================
21. EVmotoX H1 — "HAVE ANY QUESTION?" widget as a clickable link
The entire mini-card now navigates to contact.html. We make
the wrapping behave like a block, preserve template styling
inside, and add a subtle hover state so the card feels alive.
============================================================ */
.question-area-link {
display: inline-block;
text-decoration: none !important;
color: inherit;
transition: transform 0.15s ease, opacity 0.15s ease;
}
.question-area-link:hover,
.question-area-link:focus {
text-decoration: none !important;
color: inherit;
opacity: 0.85;
transform: translateY(-2px);
}
.question-area-link h4,
.question-area-link h6 {
transition: color 0.15s ease;
}
.question-area-link:hover h6 {
color: #ffb52f;
}
/* ============================================================
22. Homepage H5 — Newsletter section repurposed as Contact CTA
Three blocks side-by-side on desktop:
[1 BLUE IMAGE] [2 TEXT centered] [3 BUTTON centered]
On mobile, all three stack vertically in the same order.
Typography and button match Oswan template's primary CTA
pattern (.latext-btn > a) and newsletter-title style:
dark navy text on yellow, Oswald bold, white-bg button.
============================================================ */
/* Make the row a flex container so all three columns share equal height */
.newsletter-row {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
/* Block 2 — Text: vertically + horizontally centered inside the column */
.newsletter-col-text {
display: flex;
align-items: center;
justify-content: center;
padding: 30px 25px;
}
.newsletter-cta-text {
text-align: center;
}
.newsletter-cta-text h3 {
font-family: 'Oswald', sans-serif;
font-weight: bold;
color: #001232;
font-size: 28px;
letter-spacing: 1px;
margin-bottom: 14px;
text-transform: uppercase;
line-height: 1.2;
}
.newsletter-cta-text p {
color: #001232;
font-size: 15px;
line-height: 1.6;
margin: 0 auto;
max-width: 360px;
font-weight: 500;
}
/* Block 3 — Button: vertically + horizontally centered inside the column.
Style matches Oswan's primary CTA (.latext-btn > a):
white background, navy text, Oswald bold. */
.newsletter-col-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 30px 25px;
}
/* Mobile: stack vertically — image on top, text in middle, button at bottom */
@media (max-width: 991px) {
.newsletter-row {
flex-direction: column;
}
.newsletter-col-text {
padding: 30px 20px 20px;
}
.newsletter-col-btn {
padding: 0 20px 35px;
}
.newsletter-cta-text h3 {
font-size: 24px;
}
.newsletter-cta-text p {
font-size: 14px;
}
}
/* ============================================================
23. CANONICAL BUTTON SYSTEM — site-wide
Four reusable button classes that cover every CTA context:
.emotex-btn-primary — yellow bg, navy text
(use on light backgrounds)
.emotex-btn-primary-inverted — navy bg, white text
(use on yellow backgrounds)
.emotex-btn-secondary — navy outline, navy text
(use on light backgrounds)
.emotex-btn-secondary-on-dark — white outline, white text
(use on dark navy backgrounds)
We adapt the template to OUR brand, not the other way around.
These classes own all CTA styling — never use inline styles
for buttons. Form submit buttons and existing component
buttons (newsletter, bike grid) inherit from this system.
!important is used to win specificity against the Oswan
template's anchor reset rules in style.css.
============================================================ */
/* --- Shared base --- */
.emotex-btn-primary,
.emotex-btn-primary-inverted,
.emotex-btn-secondary,
.emotex-btn-secondary-on-dark {
display: inline-block;
font-family: 'Oswald', sans-serif !important;
font-weight: 700 !important;
font-size: 14px !important;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
padding: 13px 28px !important;
border-radius: 3px;
line-height: 1.2;
text-decoration: none !important;
transition: all 0.18s ease;
cursor: pointer;
}
/* --- PRIMARY — yellow bg, navy text (use on light backgrounds) --- */
.emotex-btn-primary {
background-color: #ffb52f !important;
color: #001232 !important;
border: 2px solid #ffb52f !important;
}
.emotex-btn-primary:hover,
.emotex-btn-primary:focus {
background-color: #001232 !important;
color: #ffb52f !important;
border-color: #001232 !important;
text-decoration: none !important;
}
/* --- PRIMARY INVERTED — navy bg, white text (use on yellow bg) --- */
.emotex-btn-primary-inverted {
background-color: #001232 !important;
color: #fff !important;
border: 2px solid #001232 !important;
box-shadow: 0 4px 12px rgba(0, 18, 50, 0.25);
}
.emotex-btn-primary-inverted:hover,
.emotex-btn-primary-inverted:focus {
background-color: #fff !important;
color: #001232 !important;
border-color: #fff !important;
text-decoration: none !important;
box-shadow: 0 6px 16px rgba(0, 18, 50, 0.3);
}
/* --- SECONDARY — navy outline, navy text (use on light backgrounds) --- */
.emotex-btn-secondary {
background-color: transparent !important;
color: #001232 !important;
border: 2px solid #001232 !important;
}
.emotex-btn-secondary:hover,
.emotex-btn-secondary:focus {
background-color: #001232 !important;
color: #fff !important;
border-color: #001232 !important;
text-decoration: none !important;
}
/* --- SECONDARY ON DARK — white outline, white text (use on dark navy bg) --- */
.emotex-btn-secondary-on-dark {
background-color: transparent !important;
color: #fff !important;
border: 2px solid #fff !important;
}
.emotex-btn-secondary-on-dark:hover,
.emotex-btn-secondary-on-dark:focus {
background-color: #fff !important;
color: #001232 !important;
border-color: #fff !important;
text-decoration: none !important;
}
/* --- Form submit buttons inherit primary visual identity --- */
.order-submit-btn,
.contact-submit-btn {
background-color: #ffb52f !important;
color: #001232 !important;
border: 2px solid #ffb52f !important;
font-family: 'Oswald', sans-serif !important;
font-weight: 700 !important;
font-size: 14px !important;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
padding: 13px 28px !important;
border-radius: 3px;
line-height: 1.2;
cursor: pointer;
transition: all 0.18s ease;
}
.order-submit-btn:hover,
.order-submit-btn:focus,
.contact-submit-btn:hover,
.contact-submit-btn:focus {
background-color: #001232 !important;
color: #ffb52f !important;
border-color: #001232 !important;
}
/* ============================================================
24. Detail Page CTA Layout Helpers
These sit INSIDE .emotex-btn-* on detail pages and adjust
only sizing for the page context (info column / dark CTA band).
The button styling itself is owned by Section 23.
============================================================ */
/* Info column buttons (under spec ribbon, light background) */
.product-info-btn {
flex: 1 1 160px;
max-width: 240px;
font-size: 14px !important;
padding: 13px 20px !important;
}
/* Bottom CTA band buttons (dark navy section, larger) */
.cta-band-btn {
min-width: 200px;
font-size: 14px !important;
padding: 14px 32px !important;
}