/* ========================================================= WADI JABAL JES — Brand Theme (Bronze & Pearl) Fonts: Barlow Condensed (headings) + Barlow (text), one family, motorsport feel. Flow: bronze hero -> light sections -> dark sections -> footer. Change a colour here and the whole site updates. ========================================================= */ /* ---------- Fonts (files in the fonts folder) ---------- */ @font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('fonts/barlow-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url('fonts/barlow-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('fonts/barlow-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Barlow Condensed'; font-weight: 500; font-display: swap; src: url('fonts/barlow-condensed-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url('fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url('fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-display: swap; src: url('fonts/barlow-condensed-latin-800-normal.woff2') format('woff2'); } :root { --bronze: #8D6613; /* Bronze - main colour */ --bronze-dark: #6B4D0E; /* Deep Bronze - hover, small accent text on light */ --honey: #F2D2A2; /* Honey - text and accents on dark */ --pearl: #EDE8E4; /* Pearl - light background */ --pearl-2: #E5DED7; /* slightly deeper pearl - alternate light section */ --sand: #DCD2C7; /* photo boxes */ --ink: #1C1612; /* Ink - dark sections */ --ink-2: #261E18; /* boxes on dark */ --text: #2A221C; /* body text on light */ --text-soft: #5E5044; /* small text on light */ --text-dark-soft: #BFB3A8; /* small text on dark */ --line: #D3C8BD; /* borders on light */ --line-dark: rgba(242, 210, 162, 0.14); /* borders on dark */ --card: #FFFFFF; --muted: #8C7F74; /* placeholders and small print */ --footer: #120E0B; /* footer, one step darker than ink */ --radius: 4px; --font-body: 'Barlow', 'Segoe UI', Arial, sans-serif; --font-head: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; --ease: cubic-bezier(.2, .7, .2, 1); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 72px; } body { background: var(--pearl); color: var(--text); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--bronze); color: #FFFFFF; } img { max-width: 100%; display: block; } a { color: var(--bronze-dark); text-decoration: none; } a:hover { color: var(--bronze); } h1, h2, h3 { font-family: var(--font-head); font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: .01em; color: var(--ink); text-wrap: balance; } h2 em { font-style: normal; color: var(--bronze); } .container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px; } :focus-visible { outline: 2px solid var(--honey); outline-offset: 3px; } .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-head); font-weight: 600; color: var(--bronze-dark); text-transform: uppercase; letter-spacing: .24em; font-size: 14px; margin-bottom: 18px; } .eyebrow .rule { width: 34px; height: 2px; background: currentColor; } .center-rule { justify-content: center; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 30px; border-radius: 4px; font-family: var(--font-head); font-weight: 600; font-size: 16px; letter-spacing: .12em; text-transform: uppercase; line-height: 1; border: 1px solid transparent; transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease); cursor: pointer; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn .arrow { display: inline-block; transition: transform .3s var(--ease); } .btn:hover .arrow { transform: translateX(4px); } .bike-card .btn-block { padding: 13px 12px; font-size: 14px; } .bike-card .btn-block::after { content: '\2192'; transition: transform .3s var(--ease); } .bike-card .btn-block:hover::after { transform: translateX(4px); } /* Main button (class name kept so the bike card template does not change) */ .btn-gold { background: var(--bronze); color: #FFFFFF; } .btn-gold:hover { background: var(--bronze-dark); color: #FFFFFF; } .btn-light { background: var(--pearl); color: var(--ink); } .btn-light:hover { background: #FFFFFF; color: var(--ink); } .btn-ghost { border-color: rgba(237,232,228,.55); color: var(--pearl); } .btn-ghost:hover { background: var(--pearl); color: var(--ink); } .btn-sm { padding: 12px 22px; font-size: 14px; } .btn-block { display: flex; width: 100%; } /* ---------- Header ---------- */ .header { position: sticky; top: 0; z-index: 100; background: var(--bronze); transition: background .3s, box-shadow .3s; } .header.scrolled { background: var(--ink); box-shadow: 0 10px 30px -18px rgba(0,0,0,.7); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(242,210,162,.12); } .progress span { display: block; height: 100%; background: var(--honey); transform: scaleX(0); transform-origin: left; } .logo { display: flex; align-items: center; gap: 12px; color: var(--pearl); } .logo:hover { color: var(--pearl); } .logo-img { height: 40px; width: auto; } .logo-img-round { height: 52px; width: 52px; border-radius: 50%; } .logo-text { font-family: var(--font-head); font-size: 17px; letter-spacing: .2em; font-weight: 600; } .logo-text strong { font-weight: 800; color: var(--honey); } .nav { display: flex; align-items: center; gap: 34px; } .nav a:not(.btn) { font-family: var(--font-head); color: rgba(237,232,228,.82); font-weight: 600; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; } .nav a:not(.btn) { position: relative; } .nav a:not(.btn)::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: var(--honey); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .nav a:not(.btn):hover { color: #FFFFFF; } .nav a:not(.btn):hover::after, .nav a.active::after { transform: scaleX(1); } .nav a.active { color: #FFFFFF; } .nav-num, .nav-panel-head, .nav-panel-foot { display: none; } .nav .btn-gold { background: var(--pearl); color: var(--ink); padding: 11px 20px; font-size: 14px; } .nav .btn-gold:hover { background: #FFFFFF; color: var(--ink); } .menu-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; } .menu-toggle span { display: block; width: 24px; height: 2px; background: var(--pearl); margin: 5px 0; } /* ========================================================= HERO — bronze field, giant word, bike in front ========================================================= */ .hero { position: relative; overflow: hidden; background: radial-gradient(ellipse 60% 55% at 50% 55%, rgba(242,210,162,.28) 0%, transparent 70%), linear-gradient(170deg, #9C731A 0%, var(--bronze) 50%, #6E500F 100%); color: var(--pearl); } .hero::before { /* fine grain */ content: ''; position: absolute; inset: 0; opacity: .14; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .hero-inner { position: relative; min-height: calc(100vh - 72px); max-height: 940px; min-height: max(620px, calc(100vh - 72px)); display: grid; grid-template-rows: 1fr auto; padding-top: 44px; } /* top-left intro */ .hero-intro { position: absolute; top: 44px; left: 28px; z-index: 3; } .hero .eyebrow { color: var(--honey); } .hero h1 { font-size: clamp(34px, 3.6vw, 52px); font-weight: 700; color: #FFFFFF; margin-bottom: 24px; line-height: .98; } /* giant word + bike */ .hero-stage { position: relative; display: grid; place-items: center; min-height: 380px; } .hero-word { position: absolute; inset: 60px 0 0; z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 1%; font-family: var(--font-head); font-weight: 800; font-size: clamp(120px, 21vw, 330px); line-height: .8; letter-spacing: -.005em; color: rgba(242, 210, 162, .2); pointer-events: none; user-select: none; white-space: nowrap; } .hero-bike { position: relative; z-index: 2; width: min(100%, 64vh * 1.8, 860px); margin: 150px 0 0 12%; } .hero-bike img { width: 100%; height: auto; filter: drop-shadow(0 36px 34px rgba(28,22,18,.5)); } .hero-bike::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: 3%; height: 30px; border-radius: 50%; background: radial-gradient(ellipse, rgba(28,22,18,.5), transparent 70%); z-index: -1; } /* bottom row */ .hero-bottom { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; border-top: 1px solid rgba(242,210,162,.28); padding: 22px 0 28px; } .hero-note { display: flex; align-items: center; gap: 22px; max-width: 560px; } .hero-note p { font-size: 15px; color: rgba(237,232,228,.85); max-width: 360px; line-height: 1.5; } .hero-stats { list-style: none; display: flex; } .hero-stats li { padding: 0 30px; display: grid; gap: 4px; } .hero-stats li + li { border-left: 1px solid rgba(242,210,162,.28); } .hero-stats li:last-child { padding-right: 0; } .hero-stats span { font-family: var(--font-head); font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(237,232,228,.7); } .hero-stats strong { font-family: var(--font-head); font-size: 30px; font-weight: 700; color: #FFFFFF; line-height: 1; text-transform: uppercase; letter-spacing: .02em; } /* entrance animation (plays once on load) */ @media (prefers-reduced-motion: no-preference) { .hero-word { animation: wordIn 1.2s var(--ease) both; } .hero-bike { animation: bikeIn 1.3s var(--ease) .15s both; } .hero-intro, .hero-bottom { animation: fadeUp 1s var(--ease) .35s both; } @keyframes wordIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } } @keyframes bikeIn { from { opacity: 0; transform: translateX(-80px); } to { opacity: 1; transform: none; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } } /* ========================================================= SECTIONS ========================================================= */ .section { padding: 112px 0; } .section-alt { background: var(--pearl-2); } .section-dark { background: var(--ink); color: var(--pearl); } .section-dark h2, .section-dark h3 { color: var(--pearl); } .section-dark h2 em { color: var(--honey); } .section-dark .eyebrow { color: var(--honey); } .section-dark .section-sub { color: var(--text-dark-soft); } .section-head { text-align: center; max-width: 680px; margin: 0 auto 60px; } .section-head h2 { font-size: clamp(44px, 6vw, 76px); } .section-head.split { text-align: left; max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; } .section-head.split .section-sub { justify-self: end; max-width: 420px; margin: 0; padding-bottom: 8px; } .section-sub { color: var(--text-soft); margin-top: 14px; } /* ---------- Bike Cards ---------- */ .bike-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 22px; } .bike-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: border-color .3s, transform .45s var(--ease), box-shadow .45s var(--ease); } .bike-card:hover { border-color: var(--bronze); transform: translateY(-5px); box-shadow: 0 22px 40px -24px rgba(28,22,18,.45); } .bike-img { position: relative; aspect-ratio: 4 / 3; background: var(--sand); display: grid; place-items: center; overflow: hidden; } .bike-img::before { content: 'Photo coming soon'; font-family: var(--font-head); color: var(--text-soft); font-size: 14px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; } .bike-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); } .bike-card:hover .bike-img img { transform: scale(1.05); } .badge { position: absolute; top: 14px; left: 14px; z-index: 1; background: var(--ink); color: var(--honey); font-family: var(--font-head); font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: 3px; text-transform: uppercase; letter-spacing: .18em; line-height: 1; } .bike-info { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; } .bike-info h3 { font-size: 24px; margin-bottom: 14px; } .bike-specs { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 22px; } .bike-specs li { padding: 12px 4px; text-align: center; font-family: var(--font-head); font-weight: 700; font-size: 19px; color: var(--ink); font-variant-numeric: tabular-nums; } .bike-specs li + li { border-left: 1px solid var(--line); } .bike-specs span { display: block; font-family: var(--font-body); color: var(--text-soft); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; margin-bottom: 2px; } .bike-price { font-family: var(--font-head); color: var(--ink); font-size: 30px; font-weight: 700; line-height: 1; margin-bottom: 20px; margin-top: auto; font-variant-numeric: tabular-nums; } /* "Can't find your bike" band */ .source-band { margin-top: 56px; padding: 34px 38px; border-radius: var(--radius); background: var(--bronze); color: var(--pearl); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .source-band h3 { color: #FFFFFF; font-size: 34px; margin-bottom: 6px; } .source-band p { color: rgba(237,232,228,.88); max-width: 520px; } .source-band .btn-gold { background: var(--ink); } .source-band .btn-gold:hover { background: var(--ink-2); } /* ---------- How It Works (light) ---------- */ /* ---------- About ---------- */ /* ---------- Export (dark) ---------- */ /* ---------- Contact (dark) ---------- */ /* ---------- Footer ---------- */ .footer { position: relative; overflow: hidden; background: var(--footer); color: var(--pearl); padding: 0 0 0; } .footer-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 72px 0 56px; border-bottom: 1px solid var(--line-dark); } .footer-cta h2 { color: var(--pearl); font-size: clamp(40px, 5vw, 64px); } .footer-cta h2 em { color: var(--honey); } .footer .logo, .footer .logo:hover { color: var(--pearl); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 22px 0 28px; border-top: 1px solid var(--line-dark); position: relative; z-index: 1; } .footer-bottom p { color: var(--muted); font-size: 13px; letter-spacing: .04em; } .to-top { font-family: var(--font-head); font-weight: 600; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--honey); } .to-top:hover { color: #FFFFFF; } /* ---------- Side rail (large screens) ---------- */ .side-rail { position: fixed; left: 26px; top: 50%; transform: translateY(-50%); z-index: 90; display: none; flex-direction: column; gap: 14px; } .side-rail a { position: relative; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--bronze); background: rgba(237,232,228,.25); box-shadow: 0 0 0 3px rgba(237,232,228,.18); transition: background .3s, border-color .3s, transform .3s; } .side-rail a:hover, .side-rail a.active { background: var(--bronze); border-color: var(--bronze); transform: scale(1.2); } .side-rail span { position: absolute; left: 20px; top: 50%; transform: translate(-6px, -50%); opacity: 0; white-space: nowrap; pointer-events: none; font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; background: var(--ink); color: var(--honey); padding: 5px 9px; border-radius: 3px; transition: opacity .25s, transform .25s; } .side-rail a:hover span { opacity: 1; transform: translate(0, -50%); } @media (min-width: 1360px) { .side-rail { display: flex; } } /* ---------- Floating WhatsApp ---------- */ .whatsapp-float { position: fixed; right: 22px; bottom: 22px; z-index: 200; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #FFFFFF; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(28,22,18,.35); transition: transform .3s var(--ease); } .whatsapp-float:hover { transform: scale(1.06); color: #FFFFFF; } .js .whatsapp-float { opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .35s, transform .35s var(--ease); } .js .whatsapp-float.show { opacity: 1; pointer-events: auto; transform: none; } /* ---------- Scroll fade-in (only when JavaScript runs) ---------- */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .js .reveal.in { opacity: 1; transform: none; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1024px) { .hero-stats li { padding: 0 20px; } } @media (max-width: 860px) { .hero-inner { min-height: 0; max-height: none; padding-top: 32px; grid-template-rows: auto auto auto; } .hero-intro { position: static; } .hero-word { inset: 0; } .hero-stage { min-height: 0; padding: 30px 0 10px; } .hero-word { font-size: clamp(96px, 30vw, 220px); } .hero-bike { margin: 60px 0 0; } .hero-bottom { flex-direction: column; align-items: stretch; gap: 22px; } .hero-note { flex-direction: column; align-items: flex-start; gap: 14px; max-width: none; } .hero-stats { justify-content: space-between; border-top: 1px solid rgba(242,210,162,.28); padding-top: 20px; } .hero-stats li { padding: 0 12px; } .hero-stats li:first-child { padding-left: 0; } .section-head.split { grid-template-columns: 1fr; gap: 0; } .section-head.split .section-sub { justify-self: start; margin-top: 16px; } } @media (max-width: 768px) { .to-top { padding: 12px 0; } .menu-toggle { display: block; } .nav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 300; width: min(86vw, 360px); flex-direction: column; align-items: stretch; gap: 0; background: var(--ink); padding: 0 28px 28px; transform: translateX(100%); transition: transform .45s var(--ease), visibility 0s linear .45s; visibility: hidden; } .nav.open { transform: none; visibility: visible; transition: transform .45s var(--ease); box-shadow: -20px 0 50px rgba(0,0,0,.35); } .nav-panel-head { display: flex; align-items: center; justify-content: space-between; height: 72px; border-bottom: 1px solid var(--line-dark); margin-bottom: 12px; color: var(--pearl); } .nav-close { background: none; border: 0; color: var(--honey); font-size: 34px; line-height: 1; cursor: pointer; padding: 4px 8px; } .nav a:not(.btn) { display: flex; align-items: baseline; gap: 14px; padding: 16px 0; font-size: 22px; color: var(--pearl); border-bottom: 1px solid var(--line-dark); } .nav a:not(.btn)::after { display: none; } .nav a.active { color: var(--honey); } .nav-num { display: inline; font-size: 13px; color: var(--honey); letter-spacing: .1em; } .nav .nav-cta { margin-top: 26px; width: 100%; padding: 16px; font-size: 15px; } .nav-panel-foot { display: block; margin-top: auto; color: var(--text-dark-soft); font-size: 14px; line-height: 1.8; } .nav-overlay { position: fixed; inset: 0; z-index: 250; background: rgba(12,9,7,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } body.menu-open { overflow: hidden; } .section { padding: 76px 0; } .section-head { margin-bottom: 40px; } .source-band { padding: 28px 24px; } .footer-cta { padding: 56px 0 44px; } } @media (max-width: 520px) { body { font-size: 16px; } .hero-stage { padding: 16px 0 4px; } .hero-bike { margin: 40px 0 0; } .hero h1 { margin-bottom: 18px; } .container { padding: 0 18px; } .hero h1 { font-size: 40px; } .hero-stats strong { font-size: 22px; } .hero-stats span { font-size: 10px; letter-spacing: .14em; } .hero-stats li { padding: 0 8px; } .logo-text { font-size: 14px; letter-spacing: .14em; } .logo-img { height: 34px; } } [hidden] { display: none !important; } body.menu-open .header { z-index: 400; } /* Bike cards: 2 per row on phones, compact */ @media (max-width: 600px) { .bike-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .bike-info { padding: 12px 12px 14px; } .bike-info h3 { font-size: 17px; margin-bottom: 10px; } .bike-card .bike-specs { margin-bottom: 12px; } .bike-card .bike-specs li { font-size: 13px; padding: 7px 2px; } .bike-card .bike-specs span { font-size: 8px; letter-spacing: .1em; } .bike-price { font-size: 21px; margin-bottom: 12px; } .badge { top: 8px; left: 8px; font-size: 9px; padding: 5px 7px; letter-spacing: .12em; } .bike-img::before { font-size: 10px; letter-spacing: .1em; } .bike-card .btn-block { padding: 11px 6px; font-size: 11px; letter-spacing: .06em; gap: 5px; } } /* Bikes loaded from the Admin Panel */ .bike-empty { text-align: center; padding: 40px 16px; color: var(--text-soft); border: 1px dashed var(--line); border-radius: var(--radius); } .bike-card.is-sold .bike-img img { filter: grayscale(.6); opacity: .8; } .btn-sold { background: var(--sand); color: var(--text-soft); cursor: default; } .btn-sold:hover { transform: none; } .bike-card .btn-sold::after { content: none; } /* ---------- Bike card extras ---------- */ .bike-open { color: inherit; display: block; } .bike-open:hover { color: inherit; } .bike-info h3 a:hover { color: var(--bronze); } .chips { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; z-index: 1; } .chip { background: rgba(28,22,18,.82); color: #FFFFFF; font-family: var(--font-head); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 3px; line-height: 1; } .bike-more { display: block; text-align: center; margin-top: 12px; font-family: var(--font-head); font-weight: 600; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze-dark); } .bike-more:hover { color: var(--bronze); } /* ---------- Bike details window ---------- */ body.modal-open { overflow: hidden; } .bike-modal { position: fixed; inset: 0; z-index: 500; background: rgba(12,9,7,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 24px; opacity: 0; transition: opacity .25s; } .bike-modal.show { opacity: 1; } .bm-panel { position: relative; width: min(1080px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: var(--pearl); border-radius: 6px; display: grid; grid-template-columns: 1.25fr 1fr; transform: translateY(16px); transition: transform .35s var(--ease); } .bike-modal.show .bm-panel { transform: none; } .bm-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--ink); color: var(--honey); font-size: 28px; line-height: 1; cursor: pointer; } .bm-gallery { background: var(--ink); display: flex; flex-direction: column; min-width: 0; } .bm-stage { position: relative; flex: 1; min-height: 340px; background: var(--ink); display: grid; place-items: center; overflow: hidden; } .bm-stage img { width: 100%; height: 100%; object-fit: contain; } .bm-gallery.empty .bm-stage::before { content: 'Photos coming soon'; font-family: var(--font-head); color: var(--text-dark-soft); letter-spacing: .16em; text-transform: uppercase; } .bm-stage .badge { top: 14px; left: 14px; } .bm-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(237,232,228,.9); color: var(--ink); font-size: 30px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding-bottom: 4px; } .bm-nav.prev { left: 12px; } .bm-nav.next { right: 12px; } .bm-count { position: absolute; right: 12px; bottom: 12px; background: rgba(28,22,18,.8); color: #fff; font-size: 13px; font-weight: 600; padding: 4px 9px; border-radius: 3px; } .bm-gallery.single .bm-nav, .bm-gallery.single .bm-count, .bm-gallery.empty .bm-nav, .bm-gallery.empty .bm-count { display: none; } .bm-thumbs { display: flex; gap: 8px; padding: 10px; overflow-x: auto; scrollbar-width: thin; } .bm-thumbs:empty { display: none; } .bm-thumbs button { flex: 0 0 76px; height: 57px; border-radius: 4px; overflow: hidden; border: 2px solid transparent; padding: 0; background: var(--ink-2); cursor: pointer; opacity: .6; } .bm-thumbs button.on { border-color: var(--honey); opacity: 1; } .bm-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; } .bm-info { padding: 34px 30px 30px; display: flex; flex-direction: column; min-width: 0; } .bm-info h2 { font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 20px; padding-right: 40px; } .bm-info .bike-specs { margin-bottom: 18px; } .bm-info .bike-price { margin: 0 0 18px; font-size: 38px; } .bm-desc { white-space: pre-line; color: var(--text); font-size: 16px; margin-bottom: 20px; } .bm-video { margin-bottom: 20px; display: grid; gap: 10px; } .bm-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--ink); } .bm-frame.tall { aspect-ratio: 9 / 14; max-height: 520px; } .bm-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .btn-ghost-dark { border: 1px solid var(--ink); color: var(--ink); } .btn-ghost-dark:hover { background: var(--ink); color: var(--pearl); } .bm-cta { margin-top: auto; display: grid; gap: 10px; padding-top: 6px; } .bm-cta .btn-sold::after, .bm-cta .btn::after { content: none; } @media (max-width: 860px) { .bike-modal { padding: 0; place-items: stretch; } .bm-panel { grid-template-columns: 1fr; max-height: none; height: 100%; border-radius: 0; align-content: start; } .bm-stage { flex: none; min-height: 0; aspect-ratio: 4 / 3; } .bm-info { padding: 24px 18px calc(28px + env(safe-area-inset-bottom, 0px)); } .bm-close { top: 10px; right: 10px; } .bm-cta { position: sticky; bottom: 0; background: var(--pearl); padding: 12px 0 4px; margin-top: 8px; } } @media (max-width: 600px) { .chips { right: 6px; bottom: 6px; gap: 4px; } .chip { font-size: 9px; padding: 4px 5px; letter-spacing: .04em; } .bike-more { font-size: 11px; margin-top: 8px; letter-spacing: .1em; } } /* ========================================================= FIND A BIKE: search, filters, sort ========================================================= */ .finder { margin: -8px 0 32px; display: grid; gap: 14px; } .search { position: relative; flex: 0 1 460px; display: flex; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 8px; transition: border-color .2s, box-shadow .2s; } .search:focus-within { border-color: var(--bronze); box-shadow: 0 0 0 4px rgba(141,102,19,.12); } .search svg { position: absolute; left: 16px; color: var(--text-soft); pointer-events: none; } .search input { width: 100%; height: 52px; border: 0; background: transparent; font-family: var(--font-body); font-size: 16px; color: var(--ink); padding: 0 48px 0 46px; outline: none; } .search input::-webkit-search-cancel-button { display: none; } .search input::placeholder { color: var(--muted); } .search-clear { position: absolute; right: 10px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--pearl-2); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center; } .search-clear:hover { background: var(--sand); } /* Buttons that open the menu */ .picker { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; height: 44px; padding: 0 16px 0 18px; border-radius: 50px; background: var(--card); border: 1px solid var(--line); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1; white-space: nowrap; transition: border-color .2s, background .2s, color .2s, box-shadow .2s; } .picker:hover { border-color: #B9AB9C; } .picker:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(141,102,19,.18); border-color: var(--bronze); } .picker .pl { color: var(--text-soft); font-weight: 400; } .picker .pv { font-weight: 600; color: var(--ink); } .picker .chev { color: var(--text-soft); transition: transform .25s var(--ease); flex: none; } .picker.open { border-color: var(--ink); } .picker.open .chev { transform: rotate(180deg); } .picker.on { background: var(--ink); border-color: var(--ink); } .picker.on .pl { color: rgba(242,210,162,.75); } .picker.on .pv { color: var(--honey); } .picker.on .chev { color: var(--honey); } .sort { margin-left: auto; height: 52px; border-radius: 8px; padding: 0 18px; } .finder-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .seg { display: inline-flex; margin-left: auto; background: var(--card); border: 1px solid var(--line); border-radius: 50px; padding: 3px; height: 44px; } .seg button { border: 0; background: transparent; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--text-soft); padding: 0 18px; border-radius: 50px; transition: background .2s, color .2s; } .seg button:hover { color: var(--ink); } .seg button.on { background: var(--ink); color: var(--honey); } .seg button:focus-visible { outline: 2px solid var(--bronze); outline-offset: 1px; } .finder-meta { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; min-height: 32px; } .count { font-size: 14px; color: var(--text-soft); font-variant-numeric: tabular-nums; } .f-active { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .achip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--bronze); cursor: pointer; background: rgba(141,102,19,.08); color: var(--bronze-dark); font-family: var(--font-body); font-weight: 600; font-size: 13px; padding: 6px 10px 6px 12px; border-radius: 50px; } .achip span { font-size: 16px; line-height: 1; opacity: .7; } .achip:hover { background: var(--bronze); color: #FFFFFF; } .aclear { border: 0; background: none; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--text-soft); text-decoration: underline; text-underline-offset: 3px; padding: 6px 2px; } .aclear:hover { color: var(--ink); } .no-match { text-align: center; padding: 48px 16px; border: 1px dashed var(--line); border-radius: var(--radius); display: grid; gap: 16px; justify-items: center; color: var(--text-soft); } /* The menu itself */ .dd-backdrop { position: fixed; inset: 0; z-index: 390; background: transparent; } .dd { position: fixed; z-index: 400; min-width: 240px; max-width: calc(100vw - 32px); background: #FFFFFF; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 24px 48px -16px rgba(28,22,18,.35), 0 2px 6px rgba(28,22,18,.06); padding: 6px; opacity: 0; transform: translateY(-6px); transition: opacity .18s, transform .18s var(--ease); } .dd.show { opacity: 1; transform: none; } .dd-head { display: none; } .dd-list { display: grid; gap: 2px; max-height: 340px; overflow-y: auto; } .dd-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; border: 0; background: transparent; border-radius: 8px; padding: 11px 12px; font-family: var(--font-body); font-size: 15px; color: var(--ink); } .dd-opt span { flex: 1; } .dd-opt em { font-style: normal; font-size: 13px; color: var(--text-soft); background: var(--pearl); border-radius: 50px; padding: 1px 8px; font-variant-numeric: tabular-nums; } .dd-opt .tick { color: var(--bronze); opacity: 0; flex: none; } .dd-opt:hover, .dd-opt:focus-visible { background: var(--pearl); outline: none; } .dd-opt.sel { font-weight: 600; } .dd-opt.sel .tick { opacity: 1; } @media (max-width: 860px) { .search { flex: 1 1 100%; } .sort { margin-left: 0; flex: 1 1 100%; justify-content: flex-start; } .sort .chev { margin-left: auto; } .finder-filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 -28px; padding: 2px 28px 8px; scrollbar-width: none; } .finder-filters::-webkit-scrollbar { display: none; } .picker.fchip, .seg { flex: 0 0 auto; } .seg { margin-left: 0; } } /* Phones: the menu opens as a sheet from the bottom of the screen */ @media (max-width: 600px) { .dd-backdrop { background: rgba(12,9,7,.45); opacity: 0; transition: opacity .18s; } .dd-backdrop.show { opacity: 1; } .dd { left: 0 !important; right: 0; top: auto !important; bottom: 0; min-width: 0 !important; max-width: none; border-radius: 16px 16px 0 0; padding: 8px 10px calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform .28s var(--ease), opacity .2s; } .dd.show { transform: none; } .dd-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px 8px; border-bottom: 1px solid var(--pearl-2); margin-bottom: 6px; } .dd-head::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--line); } .dd-title { font-family: var(--font-head); font-weight: 700; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; margin-top: 8px; } .dd-close { border: 0; background: var(--pearl); width: 36px; height: 36px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; margin-top: 8px; } .dd-list { max-height: 60vh; } .dd-opt { padding: 15px 12px; font-size: 16px; } } .bike-img:has(img)::before, .bm-stage:has(img[src])::before { content: none; } /* ---------- Badges (one per bike) ---------- */ .badge.b-new { background: var(--honey); color: var(--ink); } .badge.b-drop { background: var(--bronze-dark); color: var(--pearl); } .badge.b-hot { background: var(--bronze); color: var(--pearl); } .badge.b-featured { background: var(--ink); color: var(--honey); box-shadow: inset 0 0 0 1px rgba(242,210,162,.4); } .badge.b-sold { background: #9B2C22; color: #FFFFFF; } .bike-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; } .old-price { font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--text-soft); text-decoration-thickness: 1.5px; order: 2; } .bike-price .old-price + span { color: var(--bronze-dark); } .bm-info .old-price { font-size: 18px; } @media (max-width: 600px) { .old-price { font-size: 12px; } } /* ---------- Why Buyers Trust Us ---------- */ .trust-stats { list-style: none; display: flex; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 48px; } .trust-stats li { flex: 1 1 0; min-width: 0; padding: 30px 24px; display: grid; gap: 8px; align-content: start; } .trust-stats li:not([hidden]) ~ li:not([hidden]) { border-left: 1px solid var(--line); } .trust-stats strong { font-family: var(--font-head); font-weight: 800; font-size: clamp(52px, 6vw, 80px); line-height: .9; color: var(--bronze); font-variant-numeric: tabular-nums; } .trust-stats span { font-family: var(--font-head); font-weight: 600; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-soft); } .trust-points { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .trust-points li { display: grid; gap: 14px; align-content: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; } .trust-points h3 { font-size: 21px; margin-bottom: 6px; } .trust-points p { color: var(--text-soft); font-size: 15px; } .trust-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; } .trust-foot:not(:has(> :not([hidden]))) { display: none; } .license { font-size: 14px; color: var(--text-soft); letter-spacing: .02em; } @media (max-width: 1024px) { .trust-points { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .trust-stats li { padding: 20px 10px; } .trust-stats li:first-child { padding-left: 0; } .trust-stats strong { font-size: 44px; } .trust-stats span { font-size: 11px; letter-spacing: .08em; } .trust-points { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); } .trust-points li { grid-template-columns: 30px 1fr; gap: 14px; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 20px 0; } } /* ---------- Header phone number (large screens) ---------- */ .nav-phone { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: 15px; letter-spacing: .08em; color: var(--pearl) !important; white-space: nowrap; } .nav-phone svg { color: var(--honey); } .nav-phone::after { display: none !important; } @media (max-width: 1239px) { .nav-phone { display: none; } } /* ---------- Phone: Call | WhatsApp bar ---------- */ .mbar { display: none; } @media (max-width: 768px) { .whatsapp-float { display: none; } .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 210; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(28,22,18,.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--line-dark); transform: translateY(110%); transition: transform .35s var(--ease); } .mbar.show { transform: none; } body.modal-open .mbar, body.menu-open .mbar { transform: translateY(110%); } .mbar a { display: flex; align-items: center; justify-content: center; gap: 10px; height: 50px; border-radius: 6px; font-family: var(--font-head); font-weight: 700; font-size: 16px; letter-spacing: .12em; text-transform: uppercase; } .mbar-call { background: var(--bronze); color: var(--pearl); } .mbar-call:hover, .mbar-call:active { background: var(--bronze-dark); color: var(--pearl); } .mbar-wa { background: #25D366; color: #FFFFFF; } .mbar-wa:hover, .mbar-wa:active { background: #1FB858; color: #FFFFFF; } .footer { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } } /* ---------- Share ---------- */ .bike-card { position: relative; } .card-share { position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: rgba(237,232,228,.92); color: var(--ink); box-shadow: 0 4px 12px rgba(28,22,18,.18); transition: background .2s, color .2s, transform .2s; } .card-share:hover { background: var(--bronze); color: var(--pearl); transform: scale(1.05); } .card-share:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; } .bm-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 0 18px; margin-bottom: 4px; border-top: 1px solid var(--line); } .bm-share > span { font-family: var(--font-head); font-weight: 600; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-soft); margin-right: 4px; } .sh-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 50px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 14px; transition: border-color .2s, background .2s, color .2s; } .sh-btn svg { color: var(--bronze); } .sh-btn:hover { border-color: var(--bronze); } .toast { position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); z-index: 700; transform: translate(-50%, 12px); opacity: 0; background: var(--ink); color: var(--pearl); padding: 12px 20px; border-radius: 50px; font-weight: 600; font-size: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.3); transition: opacity .25s, transform .25s var(--ease); max-width: calc(100vw - 32px); } .toast.show { opacity: 1; transform: translate(-50%, 0); } @media (max-width: 768px) { .toast { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 600px) { .card-share { top: 6px; right: 6px; width: 32px; height: 32px; } .card-share svg { width: 15px; height: 15px; } } .bm-cta { position: sticky; bottom: 0; background: var(--pearl); padding-bottom: 2px; z-index: 2; } .bm-frame { max-height: 42vh; } /* ---------- Loading skeleton ---------- */ .skel-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .skel { position: relative; overflow: hidden; background: var(--sand); border-radius: 4px; } .skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(242,210,162,.55), transparent); animation: shimmer 1.4s infinite; } @keyframes shimmer { to { transform: translateX(100%); } } .skel-img { aspect-ratio: 4 / 3; border-radius: 0; } .skel-body { padding: 20px; display: grid; gap: 14px; } .skel-line { height: 18px; } .skel-line.tall { height: 28px; } .w70 { width: 70%; } .w45 { width: 45%; } .skel-specs { height: 50px; } .skel-btn { height: 44px; border-radius: 4px; } @media (max-width: 600px) { .skel-body { padding: 12px; gap: 10px; } .skel-specs { height: 38px; } .skel-btn { height: 36px; } } @media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } } /* ---------- FAQ ---------- */ .faq-list { border-top: 1px solid var(--line); } .faq-item { border-bottom: 1px solid var(--line); } .faq-item h2 { margin: 0; font-size: inherit; } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; text-align: left; cursor: pointer; background: none; border: 0; padding: 22px 4px; color: var(--ink); font-family: var(--font-head); font-weight: 700; font-size: 21px; letter-spacing: .02em; text-transform: uppercase; line-height: 1.15; } .faq-q:hover { color: var(--bronze-dark); } .faq-q:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; border-radius: 4px; } .faq-chev { flex: none; color: var(--bronze); transition: transform .3s var(--ease); } .faq-item.open .faq-chev { transform: rotate(180deg); } .faq-item.open .faq-q { color: var(--bronze-dark); } .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); } .faq-a > div { overflow: hidden; } .faq-item.open .faq-a { grid-template-rows: 1fr; } .faq-a p { color: var(--text-soft); font-size: 16px; line-height: 1.65; padding: 0 44px 22px 4px; max-width: 64ch; } @media (prefers-reduced-motion: reduce) { .faq-a, .faq-chev { transition: none; } } @media (max-width: 600px) { .faq-q { font-size: 18px; padding: 18px 2px; } .faq-a p { padding-right: 8px; font-size: 15px; } } /* ---------- FAQ link band (home page) ---------- */ .faq-band { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 26px 30px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); transition: border-color .25s, box-shadow .3s; } .faq-band:hover { border-color: var(--bronze); box-shadow: 0 16px 34px -22px rgba(28,22,18,.4); color: var(--ink); } .faq-band .fb-text { display: grid; gap: 4px; } .faq-band .eyebrow { margin: 0; } .faq-band strong { font-family: var(--font-head); font-weight: 700; font-size: clamp(20px, 2.4vw, 28px); text-transform: uppercase; line-height: 1.1; } @media (max-width: 768px) { .faq-band { padding: 22px 20px; } .faq-band .btn { width: 100%; } } .faq-band { margin-top: 28px; } /* ---------- FAQ page ---------- */ .faq-page { background: var(--pearl); } .fp-top-links { display: flex; align-items: center; gap: 22px; } .fp-back { font-family: var(--font-head); font-weight: 600; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: rgba(237,232,228,.85); } .fp-back:hover { color: #FFFFFF; } .fp-hero { background: linear-gradient(170deg, #9C731A 0%, var(--bronze) 55%, #6E500F 100%); color: var(--pearl); padding: 64px 0 56px; } .fp-hero .eyebrow { color: var(--honey); } .fp-hero h1 { color: #FFFFFF; font-size: clamp(40px, 6vw, 72px); margin-bottom: 12px; } .fp-hero p:last-child { color: rgba(237,232,228,.88); font-size: 18px; } .fp-body { padding-top: 56px; } .fp-wrap { max-width: 860px; } .fp-ask { margin-top: 44px; padding: 28px 30px; border-radius: var(--radius); background: var(--ink); color: var(--pearl); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .fp-ask h2 { color: var(--pearl); font-size: 28px; margin-bottom: 4px; } .fp-ask p { color: var(--text-dark-soft); } .fp-home { margin-top: 24px; } .fp-home a { font-family: var(--font-head); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 14px; } .fp-foot { background: var(--footer); color: var(--muted); font-size: 13px; padding: 22px 0; } @media (max-width: 600px) { .fp-back span, .faq-page .logo-text { display: none; } .fp-back { font-size: 20px; } .fp-hero { padding: 44px 0 40px; } .fp-ask .btn { width: 100%; } } /* ---------- Export quote form ---------- */ button.btn { font-family: var(--font-head); } .qmodal { position: fixed; inset: 0; z-index: 520; background: rgba(12,9,7,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 24px; opacity: 0; transition: opacity .25s; } .qmodal.show { opacity: 1; } .q-panel { position: relative; width: min(680px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: var(--pearl); border-radius: 6px; padding: 36px 34px 28px; transform: translateY(16px); transition: transform .35s var(--ease); } .qmodal.show .q-panel { transform: none; } .q-head { margin-bottom: 24px; padding-right: 40px; } .q-head h2 { font-size: clamp(32px, 4vw, 44px); margin-bottom: 8px; } .q-head p:last-child { color: var(--text-soft); } .q-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; } .q-full { grid-column: 1 / -1; } .q-field label { display: block; margin-bottom: 6px; font-family: var(--font-head); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); } .q-field label b { color: var(--bronze); } .q-field label span { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 400; } .q-field input, .q-field textarea { width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 13px 14px; transition: border-color .2s, box-shadow .2s; } .q-field textarea { resize: vertical; min-height: 88px; } .q-field input:focus, .q-field textarea:focus { outline: none; border-color: var(--bronze); box-shadow: 0 0 0 4px rgba(141,102,19,.12); } .q-field input::placeholder, .q-field textarea::placeholder { color: var(--muted); } .q-field .bad { border-color: #9B2C22; box-shadow: 0 0 0 4px rgba(155,44,34,.1); } .qchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .qchip { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 50px; padding: 6px 12px; font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s; } .qchip:hover { border-color: var(--bronze); } .qchip.on { background: var(--ink); border-color: var(--ink); color: var(--honey); } .q-error { margin-top: 14px; background: #F6E1DE; color: #9B2C22; border-radius: 8px; padding: 12px 14px; font-weight: 600; font-size: 14px; } .q-send { margin-top: 20px; } .q-send::after { content: none; } .q-note { margin-top: 10px; text-align: center; font-size: 13px; color: var(--text-soft); } @media (max-width: 600px) { .qmodal { padding: 0; place-items: stretch; } .q-panel { max-height: none; height: 100%; border-radius: 0; padding: 26px 18px calc(24px + env(safe-area-inset-bottom, 0px)); } .q-grid { grid-template-columns: 1fr 1fr; gap: 14px 10px; } .q-grid > .q-field:nth-child(1), .q-grid > .q-field:nth-child(2) { grid-column: 1 / -1; } .q-send { position: sticky; bottom: 0; font-size: 14px; } } /* ---------- Live video inspection ---------- */ .vi-top { display: flex; gap: 14px; align-items: flex-start; } .vi-top svg { flex: none; color: var(--bronze); margin-top: 2px; } .vi-top strong { display: block; font-family: var(--font-head); font-weight: 700; font-size: 20px; text-transform: uppercase; letter-spacing: .02em; line-height: 1.1; } .vi-top span { display: block; font-size: 14px; color: var(--text-soft); margin-top: 4px; } .vi-box { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 18px; margin-bottom: 18px; display: grid; gap: 14px; } .vi-chips { display: flex; gap: 6px; flex-wrap: wrap; } .vi-chip { border: 1px solid var(--line); background: var(--pearl); color: var(--ink); border-radius: 50px; padding: 7px 13px; font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s; } .vi-chip:hover { border-color: var(--bronze); } .vi-chip.on { background: var(--ink); border-color: var(--ink); color: var(--honey); } .vi-box .btn::after { content: none; } button.btn-ghost-dark { background: transparent; } button.btn-ghost-dark:hover { background: var(--ink); color: var(--pearl); } /* ---------- Condition report ---------- */ .cond { margin-bottom: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; } .cond-title { font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; padding: 12px 16px; background: var(--pearl-2); color: var(--ink); } .cond ul { list-style: none; display: grid; grid-template-columns: 1fr; } .cond li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; border-top: 1px solid var(--pearl-2); font-size: 14px; } .cond li span { color: var(--text-soft); } .cond li b { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink); text-align: right; } .cond li b::before { content: ''; flex: none; width: 16px; height: 16px; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: 10px; } .cond .lv-good b::before { background-color: #2E6B45; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .cond .lv-warn b::before { background-color: #B07A1A; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 12'%3E%3Cpath d='M2 1v6M2 10.5v.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: 4px 10px; } .cond .lv-bad b::before { background-color: #9B2C22; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 2l6 6M8 2l-6 6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: 8px; } .bm-stage img:not([src]) { display: none; } /* ---------- Payment methods ---------- */ .pay-list { display: flex; flex-wrap: wrap; gap: 8px; } .pay-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line-dark); border-radius: 50px; font-weight: 600; font-size: 14px; color: var(--pearl); } .pay-chip svg { color: var(--honey); } .bm-pay { font-size: 13px; color: var(--text-soft); margin: 0 0 12px; text-align: center; } /* ---------- Recently sold ---------- */ .recent-sold { padding-top: 0; } .recent-sold .section-sub strong { font-family: var(--font-head); font-size: 22px; color: var(--bronze-dark); } .sold-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } .sold-card { display: grid; gap: 8px; color: var(--ink); } .sold-card:hover { color: var(--ink); } .sold-img { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--sand); } .sold-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(.95); opacity: .75; transition: filter .4s, opacity .4s; } .sold-card:hover .sold-img img { filter: grayscale(.3); opacity: 1; } .stamp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-12deg); border: 2px solid #9B2C22; color: #9B2C22; background: rgba(237,232,228,.85); font-family: var(--font-head); font-weight: 800; font-size: 18px; letter-spacing: .2em; text-transform: uppercase; padding: 3px 12px 3px 15px; border-radius: 4px; } .sold-name { font-family: var(--font-head); font-weight: 700; font-size: 16px; text-transform: uppercase; line-height: 1.1; } .sold-when { font-size: 12px; color: var(--text-soft); margin-top: -4px; } .sold-more { margin-top: 28px; } .sold-more a { font-family: var(--font-head); font-weight: 600; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; } @media (max-width: 1024px) { .sold-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .sold-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .stamp { font-size: 14px; } } /* ---------- Micro-animations (subtle) ---------- */ .btn:active { transform: translateY(0) scale(.98); transition-duration: .08s; } @media (prefers-reduced-motion: no-preference) { /* The short line next to each section label draws itself in */ .js .reveal .eyebrow .rule { transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease) .15s; } .js .reveal .center-rule .rule:first-child { transform-origin: right; } .js .reveal.in .eyebrow .rule { transform: none; } } /* ---------- Privacy & Terms pages ---------- */ .lp-updated { font-size: 14px; color: var(--text-soft); margin-bottom: 22px; } .lp-toc { background: var(--pearl-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; margin-bottom: 40px; } .lp-toc > p { font-family: var(--font-head); font-weight: 600; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze); margin-bottom: 10px; } .lp-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; } .lp-toc li { padding: 3px 0; break-inside: avoid; } .lp-toc a { color: var(--text); } .lp-toc a:hover { color: var(--bronze); } .lp-sec { padding: 26px 0; border-top: 1px solid var(--line); scroll-margin-top: 96px; } .lp-sec h2 { font-size: clamp(24px, 3vw, 30px); margin-bottom: 12px; } .lp-sec p { margin-bottom: 12px; line-height: 1.7; } .lp-sec p:last-child { margin-bottom: 0; } .lp-sec ul { margin: 0 0 12px; padding-left: 20px; } .lp-sec li { padding: 4px 0; line-height: 1.65; } .lp-sec li::marker { color: var(--bronze); } .lp-sec a { color: var(--bronze); text-decoration: underline; text-underline-offset: 3px; } .lp-sep { color: var(--text-soft); margin: 0 8px; } .footer-legal { display: flex; gap: 18px; flex-wrap: wrap; } .footer-legal a { color: #8C7F74; font-size: 13px; letter-spacing: .04em; } .footer-legal a:hover { color: var(--honey); } .fp-foot .container { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .fp-foot a { color: #8C7F74; } .fp-foot a:hover { color: var(--honey); } @media (max-width: 640px) { .lp-toc ol { columns: 1; } .lp-toc { padding: 18px 20px; } } .footer-legal { align-items: center; } /* ---------- About (short version) ---------- */ /* ---------- Footer (simple version) ---------- */ .footer-mini { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; padding: 36px 0; } .footer-mini .logo-img-round { width: 44px; height: 44px; } .footer-links { display: flex; gap: 8px 28px; flex-wrap: wrap; } .footer-links a { font-family: var(--font-head); font-weight: 600; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dark-soft); } .footer-links a:hover { color: #FFFFFF; } .footer-bottom { padding: 20px 0 26px; } @media (max-width: 640px) { .footer-mini { flex-direction: column; align-items: flex-start; gap: 18px; padding: 28px 0; } .footer-links { gap: 4px 22px; } .footer-links a { padding: 8px 0; } } /* ---------- Video inspection: one short line in Contact ---------- */ .vi-line { margin-top: 24px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--text-dark-soft); font-size: 16px; } .vi-line svg { color: var(--honey); flex: none; } .vi-line a { color: var(--honey); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(242,210,162,.4); } .vi-line a:hover { color: #FFFFFF; text-decoration-color: currentColor; } .vi-line .arrow { display: inline-block; transition: transform .3s var(--ease); } .vi-line a:hover .arrow { transform: translateX(4px); } /* ---------- Trust: numbers sit next to the heading ---------- */ .trust-head { margin-bottom: 48px; } .trust-head .trust-stats { justify-self: end; margin: 0; border: 0; gap: 0; } .trust-head .trust-stats li { flex: none; padding: 4px 36px; } .trust-head .trust-stats li:last-child { padding-right: 0; } .trust-head .trust-stats strong { font-size: clamp(48px, 5vw, 72px); } @media (max-width: 860px) { .trust-head .trust-stats { justify-self: stretch; margin-top: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .trust-head .trust-stats li { flex: 1 1 0; padding: 18px 12px; } .trust-head .trust-stats li:first-child { padding-left: 0; } } @media (max-width: 860px) { .trust-head { margin-bottom: 0; } .trust-head .trust-stats { border-bottom: 0; } } /* ---------- Contact (compact: tiles + map strip) ---------- */ #contact .section-head { margin-bottom: 40px; } .c-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .c-tile { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: center; padding: 20px 22px; border: 1px solid var(--line-dark); border-radius: var(--radius); background: var(--ink-2); color: var(--pearl); transition: border-color .25s, transform .3s var(--ease), background .25s; } .c-tile svg { grid-row: 1 / 3; color: var(--honey); } .c-tile:hover { color: var(--pearl); border-color: var(--honey); transform: translateY(-3px); } .c-k { font-family: var(--font-head); font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--honey); } .c-v { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .c-tile-main { background: var(--bronze); border-color: var(--bronze); } .c-tile-main svg, .c-tile-main .c-k { color: #FFFFFF; } .c-tile-main .c-k { opacity: .8; } .c-tile-main:hover { background: var(--bronze-dark); border-color: var(--honey); } .map-strip { position: relative; margin-top: 14px; height: 280px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-dark); background: var(--ink-2); } .map-strip iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(.35) sepia(.15); } .map-card { position: absolute; left: 18px; top: 18px; bottom: 18px; width: 250px; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 22px 24px; background: rgba(28,22,18,.94); border: 1px solid var(--line-dark); border-radius: 8px; box-shadow: 0 18px 40px -20px rgba(0,0,0,.6); } .map-card .c-k { margin-bottom: 4px; } .map-hours { display: flex; justify-content: space-between; gap: 12px; color: var(--text-dark-soft); font-size: 14px; } .map-hours strong { color: var(--pearl); font-weight: 600; } .map-dir { margin-top: 10px; font-family: var(--font-head); font-weight: 600; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--honey); } .map-dir:hover { color: #FFFFFF; } .map-dir .arrow { display: inline-block; transition: transform .3s var(--ease); } .map-dir:hover .arrow { transform: translateX(4px); } .c-foot { margin-top: 22px; display: flex; justify-content: space-between; align-items: center; gap: 14px 24px; flex-wrap: wrap; } .c-foot .pay-list { align-items: center; } .c-foot-k { color: var(--text-dark-soft); font-size: 14px; margin-right: 4px; } .c-foot .vi-line { margin: 0; } @media (max-width: 1100px) { .c-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { #contact .section-head { margin-bottom: 28px; } .c-tiles { gap: 10px; } .c-tile { grid-template-columns: 1fr; padding: 16px; row-gap: 4px; } .c-tile svg { grid-row: auto; margin-bottom: 6px; } .c-v { font-size: 14px; } .map-strip { height: auto; display: flex; flex-direction: column-reverse; } .map-strip iframe { height: 200px; } .map-card { position: static; width: auto; border: 0; border-bottom: 1px solid var(--line-dark); border-radius: 0; box-shadow: none; padding: 18px; background: var(--ink-2); } .c-foot { flex-direction: column; align-items: flex-start; } } @media (min-width: 641px) { .map-card { top: 50%; bottom: auto; transform: translateY(-50%); justify-content: flex-start; } } /* ---------- Header on tablets (769-1024px): keep the menu on one line ---------- */ @media (min-width: 769px) and (max-width: 1024px) { .nav { gap: 22px; } .nav a:not(.btn) { font-size: 13px; letter-spacing: .1em; white-space: nowrap; } .header .logo-text { display: none; } } /* ---------- Bike cards: smaller on laptops and desktops ---------- */ @media (min-width: 601px) { .bike-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; } .bike-img { aspect-ratio: 16 / 11; } .bike-img::before { font-size: 12px; letter-spacing: .14em; } .bike-info { padding: 16px 16px 16px; } .bike-info h3 { font-size: 20px; margin-bottom: 12px; } .bike-card .bike-specs { margin-bottom: 16px; } .bike-card .bike-specs li { padding: 9px 2px; font-size: 16px; } .bike-card .bike-specs span { font-size: 10px; letter-spacing: .12em; } .bike-price { font-size: 24px; margin-bottom: 14px; } .bike-card .btn-block { padding: 11px 10px; font-size: 13px; } .bike-more { font-size: 12px; margin-top: 10px; } .card-share { width: 36px; height: 36px; top: 10px; right: 10px; } .card-share svg { width: 16px; height: 16px; } } @media (min-width: 1200px) { .bike-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ---------- Hero: always fits one screen (laptops too) ---------- */ @media (min-width: 861px) { .hero-inner { min-height: 0; height: max(560px, calc(100svh - 72px)); max-height: 900px; } .hero-stage { min-height: 0; } .hero-bike { width: min(100%, 860px, calc((100svh - 330px) * 1.8)); margin: clamp(40px, 11vh, 130px) 0 0 12%; } } /* Less empty space between the menu and the hero heading */ .hero-inner { padding-top: 20px; } .hero-intro { top: 20px; } @media (max-width: 860px) { .hero-inner { padding-top: 16px; } } /* ---------- Export (compact: intro + 4 short items) ---------- */ .export-compact { padding-block: 88px; } .export-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .export-intro h2 { font-size: clamp(40px, 5vw, 64px); } .export-intro .section-sub { color: var(--text-dark-soft); margin: 12px 0 26px; max-width: 440px; } .export-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-dark); } .export-list li { display: flex; align-items: center; gap: 16px; padding: 24px 12px 24px 0; border-bottom: 1px solid var(--line-dark); font-family: var(--font-head); font-weight: 700; font-size: 21px; text-transform: uppercase; letter-spacing: .03em; color: var(--pearl); } .export-list li:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--line-dark); } .export-list span { font-size: 14px; font-weight: 600; letter-spacing: .12em; color: var(--honey); } @media (max-width: 860px) { .export-compact { padding-block: 60px; } .export-wrap { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 520px) { .export-intro .btn { width: 100%; } .export-list li { font-size: 16px; gap: 10px; padding: 18px 8px 18px 0; } .export-list li:nth-child(even) { padding-left: 14px; } .export-list span { font-size: 12px; } } /* ---------- Bikes for Sale: one tidy search bar + one status row ---------- */ .bikes-head { margin-bottom: 36px; } .finder { margin: 0 0 28px; gap: 14px; } .finder-bar { display: flex; gap: 8px; align-items: center; } .finder-bar .finder-filters { flex-wrap: nowrap; gap: 8px; } .finder-bar .sort { margin-left: 0; } .finder-meta .seg { margin-left: 0; height: 40px; } .finder-meta .count { margin-left: auto; order: 3; } .finder-meta .f-active { order: 2; } @media (min-width: 861px) { .finder-bar { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 8px; box-shadow: 0 10px 30px -22px rgba(28,22,18,.35); } .finder-bar .search { flex: 1 1 auto; min-width: 200px; border: 0; background: var(--pearl); border-radius: 8px; } .finder-bar .search:focus-within { box-shadow: 0 0 0 3px rgba(141,102,19,.18); } .finder-bar .search input { height: 48px; } .finder-bar .picker { height: 48px; border-radius: 8px; border: 0; background: var(--pearl); padding: 0 14px 0 16px; font-size: 14px; } .finder-bar .picker:hover { background: var(--pearl-2); } .finder-bar .picker.on { background: var(--ink); } } @media (min-width: 861px) and (max-width: 1150px) { .finder-bar { flex-wrap: wrap; } .finder-bar .search { flex-basis: 100%; } .finder-bar .finder-filters { flex-wrap: wrap; } } @media (max-width: 860px) { .finder-bar { flex-direction: column; align-items: stretch; } .finder-bar .search { flex: none; } .finder-bar .sort { flex: 0 0 auto; } .finder-meta .count { margin-left: 0; order: 0; flex-basis: 100%; } } .finder { grid-template-columns: minmax(0, 1fr); } .finder-bar, .finder-bar .finder-filters { min-width: 0; } /* ---------- Footer social icons ---------- */ .footer-social { display: flex; gap: 10px; } .footer-social a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line-dark); border-radius: 50%; color: var(--text-dark-soft); transition: color .2s, border-color .2s, background .2s, transform .25s var(--ease); } .footer-social a:hover { color: var(--ink); background: var(--honey); border-color: var(--honey); transform: translateY(-2px); } @media (min-width: 641px) { .footer-mini .footer-links { margin-left: auto; } } /* Brand colours for the social icons */ .footer-social a { border: 0; color: #FFFFFF; } .footer-social a:hover { color: #FFFFFF; transform: translateY(-2px) scale(1.06); } .footer-social .soc-ig, .footer-social .soc-ig:hover { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); } .footer-social .soc-tt, .footer-social .soc-tt:hover { background: #000000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); } .footer-social .soc-tt svg { filter: drop-shadow(-1.2px -1.2px 0 #25F4EE) drop-shadow(1.2px 1.2px 0 #FE2C55); } .footer-social .soc-mail, .footer-social .soc-mail:hover { background: #EA4335; } .footer-social .soc-tt svg { filter: none; } /* ---------- Contact on a light background (between dark Export and dark Footer) ---------- */ .contact-light { background: var(--pearl); color: var(--text); } .contact-light .c-tile { background: var(--card); border-color: var(--line); color: var(--ink); } .contact-light .c-tile svg, .contact-light .c-k { color: var(--bronze); } .contact-light .c-tile:hover { color: var(--ink); border-color: var(--bronze); } .contact-light .c-tile-main { background: var(--bronze); border-color: var(--bronze); color: #FFFFFF; } .contact-light .c-tile-main svg, .contact-light .c-tile-main .c-k { color: #FFFFFF; } .contact-light .c-tile-main:hover { background: var(--bronze-dark); color: #FFFFFF; } .contact-light .map-strip { border-color: var(--line); background: var(--pearl-2); } .contact-light .map-card { background: rgba(255,255,255,.96); border-color: var(--line); box-shadow: 0 18px 40px -22px rgba(28,22,18,.35); } .contact-light .map-card .c-k { color: var(--bronze); } .contact-light .map-hours { color: var(--text-soft); } .contact-light .map-hours strong { color: var(--ink); } .contact-light .map-dir { color: var(--bronze); } .contact-light .map-dir:hover { color: var(--ink); } .contact-light .c-foot-k { color: var(--text-soft); } .contact-light .pay-chip { border-color: var(--line); color: var(--ink); background: var(--card); } .contact-light .pay-chip svg { color: var(--bronze); } .contact-light .vi-line { color: var(--text-soft); } .contact-light .vi-line svg { color: var(--bronze); } .contact-light .vi-line a { color: var(--bronze-dark); text-decoration-color: rgba(141,102,19,.35); } .contact-light .vi-line a:hover { color: var(--ink); } @media (max-width: 640px) { .contact-light .map-card { background: var(--card); border-bottom-color: var(--line); } } /* ========================================================= Polish from the beauty guide (accessibility + details) ========================================================= */ /* Skip link: hidden until a keyboard user presses Tab */ .skip-link { position: absolute; left: 16px; top: -60px; z-index: 1000; background: var(--ink); color: var(--honey); padding: 12px 18px; border-radius: 4px; font-family: var(--font-head); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 14px; transition: top .2s; } .skip-link:focus { top: 12px; color: var(--honey); } main:focus { outline: none; } /* Focus ring: deep bronze on light areas, honey on dark areas */ :focus-visible { outline: 2px solid var(--bronze-dark); outline-offset: 2px; } .header :focus-visible, .hero :focus-visible, .section-dark :focus-visible, .footer :focus-visible, .fp-hero :focus-visible, .fp-foot :focus-visible, .nf :focus-visible, .source-band :focus-visible, .c-tile-main:focus-visible, .fp-ask :focus-visible, .bm-gallery :focus-visible, .mbar :focus-visible, .skip-link:focus-visible { outline-color: var(--honey); } /* Small bronze text on light backgrounds uses Deep Bronze (easier to read) */ a:hover { color: var(--bronze-dark); } .bike-more:hover, .lp-toc a:hover { color: var(--bronze-dark); } .lp-toc > p, .lp-sec a, .q-field label b { color: var(--bronze-dark); } .contact-light .c-k, .contact-light .map-card .c-k, .contact-light .map-dir { color: var(--bronze-dark); } .contact-light .c-tile-main .c-k { color: #FFFFFF; } /* Map: soft grey, full colour on hover */ .map-strip iframe { transition: filter .4s var(--ease); } .map-strip:hover iframe { filter: none; } /* Hours card sits on the right, so Google's own place label (top-left) and the pin stay visible */ @media (min-width: 641px) { .map-card { left: auto; right: 18px; } } /* Only weights 400-600 of Barlow are loaded, so bold text uses 600 */ .lp-sec strong, .q-field label b, .fp-body strong { font-weight: 600; } /* People who turn off animations in their phone settings get a still page */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } @media (max-width: 520px) { .finder-filters { margin: 0 -18px; padding: 2px 18px 8px; } } /* ========================================================= Hand-made feel: fewer effects (owner's "vibecoded" checklist) ========================================================= */ /* No lifting / zooming on hover. Only the colour of the border changes. */ .btn:hover, .bike-card:hover, .c-tile:hover, .card-share:hover, .whatsapp-float:hover, .footer-social a:hover { transform: none; } .bike-card:hover { box-shadow: none; } .bike-card:hover .bike-img img { transform: none; } /* Arrows move only on the main (bronze) buttons */ .btn:not(.btn-gold):hover .arrow, .bike-card .btn-block:hover::after, .map-dir:hover .arrow, .vi-line a:hover .arrow { transform: none; } /* Softer, flatter shadows */ .finder-bar { box-shadow: none !important; } .faq-band:hover { box-shadow: none; } .map-card, .contact-light .map-card { box-shadow: 0 2px 8px rgba(28,22,18,.08); } /* Trust points: a clean ruled list instead of icon cards */ .trust-points { gap: 0; border-top: 1px solid var(--line); } .trust-points li { background: none; border: 0; border-radius: 0; padding: 26px 24px 26px 0; } .trust-points li + li { border-left: 1px solid var(--line); padding-left: 24px; } @media (max-width: 1024px) { .trust-points li { border-bottom: 1px solid var(--line); } .trust-points li:nth-child(odd) { border-left: 0; padding-left: 0; } } @media (max-width: 600px) { .trust-points li, .trust-points li + li { grid-template-columns: 1fr; border-left: 0; padding: 20px 0; } } /* Trust numbers go under the heading on tablets too, so they never squeeze */ @media (min-width: 861px) and (max-width: 1100px) { .section-head.split.trust-head { grid-template-columns: 1fr; gap: 24px; } .trust-head .trust-stats { justify-self: stretch; } .trust-head .trust-stats li { flex: 1 1 0; min-width: 0; padding: 4px 20px; } .trust-head .trust-stats li:first-child { padding-left: 0; } } /* ---------- Bigger, bolder hero heading (owner's choice) ---------- */ .hero h1 { font-weight: 800; letter-spacing: .005em; line-height: .92; } @media (min-width: 861px) { .hero h1 { font-size: clamp(60px, min(6.2vw, 11vh), 96px); } /* the bike moves right so it never covers the heading */ .hero-bike { width: min(64%, 820px, calc((100svh - 300px) * 1.8)); margin: clamp(60px, 16vh, 190px) 0 0 34%; } } @media (max-width: 860px) { .hero h1 { font-size: clamp(44px, 12.5vw, 64px); } } /* Logo text readable on the bronze header (before scrolling); honey "JES" returns on the dark header */ .header:not(.scrolled) .logo-text { color: #FFFFFF; } .header:not(.scrolled) .logo-text strong { color: #FFFFFF; } /* ===== Section connectors: FAQ card bridges Trust -> Export; logo badge on the dark/light joins ===== */ :root { --ov: 64px; } #trust { padding-bottom: 0; } #trust .faq-band { position: relative; z-index: 5; margin-bottom: calc(-1 * var(--ov)); box-shadow: 0 22px 44px -24px rgba(0,0,0,.55); } #export.export-compact { padding-top: calc(var(--ov) + 88px); } #export, #contact { position: relative; } #export { z-index: 4; } #contact { z-index: 3; } .footer { z-index: 1; } @media (max-width: 768px) { :root { --ov: 48px; } #export.export-compact { padding-top: calc(var(--ov) + 60px); } } /* Seam medallion: logo stays still, the text ring turns slowly */ .seam-badge { position: absolute; left: 50%; bottom: 0; width: 116px; height: 116px; transform: translate(-50%, 50%); z-index: 4; pointer-events: none; border-radius: 50%; box-shadow: 0 0 0 6px var(--pearl); } .seam-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .sr-disc { fill: var(--ink); stroke: rgba(242,210,162,.55); stroke-width: 1; } .sr-inner { fill: none; stroke: rgba(242,210,162,.35); stroke-width: 1; } .sr-text { fill: var(--honey); font-family: var(--font-head); font-weight: 600; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; } .seam-badge img { position: absolute; left: 50%; top: 50%; width: 55.2%; height: 55.2%; transform: translate(-50%, -50%); border-radius: 50%; } @media (prefers-reduced-motion: no-preference) { .seam-ring { animation: seamSpin 26s linear infinite; transform-origin: 50% 50%; } } @keyframes seamSpin { to { transform: rotate(360deg); } } #export.export-compact, #contact { padding-bottom: calc(88px + 34px); } @media (max-width: 768px) { .seam-badge { width: 96px; height: 96px; box-shadow: 0 0 0 5px var(--pearl); } #export.export-compact, #contact { padding-bottom: calc(60px + 30px); } } /* ===== Hero join: search bar card sits across the hero and Bikes ===== */ .seam-search { position: relative; z-index: 6; margin: -40px 0 64px; } .seam-search[hidden] { display: none; } #bikes.has-seam { padding-top: 0; } .seam-search .finder-bar { box-shadow: 0 22px 44px -24px rgba(28,22,18,.45); } @media (min-width: 861px) { .hero .hero-bottom { padding-bottom: 64px; } } @media (max-width: 860px) { .hero .hero-bottom { padding-bottom: 44px; } .seam-search { margin: -32px 0 44px; } .seam-search .search { background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 18px 36px -20px rgba(28,22,18,.45); } } /* ===== Export join: quote card sits across Export and Contact ===== */ #export.export-compact { padding-bottom: 0; } .quote-card { position: relative; z-index: 6; margin: 56px 0 -52px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; box-shadow: 0 22px 44px -24px rgba(0,0,0,.6); } .quote-card .eyebrow { margin: 0 0 4px; color: var(--bronze-dark); } .quote-card strong { display: block; font-family: var(--font-head); font-weight: 700; font-size: clamp(20px, 2.4vw, 28px); text-transform: uppercase; line-height: 1.1; } #contact { padding-top: 150px; } @media (max-width: 768px) { .quote-card { margin-top: 40px; padding: 22px 20px; } .quote-card .btn { width: 100%; } #contact { padding-top: 110px; } } /* ===== Bikes grid: fewer than 4 bikes fill the row neatly; nicer photo placeholder ===== */ @media (min-width: 861px) { .bike-grid[data-few] { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); max-width: calc(var(--n) * 400px); } } .bike-img::before { box-sizing: content-box; width: 170px; max-width: 90%; text-align: center; padding-top: 74px; background: url(images/logo-bike-sm.webp) center top / 110px 65px no-repeat; opacity: .55; } @media (max-width: 768px) { .bike-img::before { width: 130px; padding-top: 58px; background-size: 86px 51px; } } .seam-search { margin-bottom: 48px; } .bikes-head { margin-bottom: 28px; } @media (max-width: 860px) { .seam-search { margin-bottom: 36px; } .bikes-head { margin-bottom: 22px; } } /* ===== Fix: quote card really sits across Export -> Contact (stop margin collapsing) ===== */ #export.export-compact { display: flow-root; } /* ===== "Can't see the bike" band: compact, less empty space around it ===== */ .source-band { margin-top: 44px; padding: 26px 32px; } .source-band h3 { font-size: 28px; margin-bottom: 4px; } .source-band p { max-width: 640px; } @media (min-width: 861px) { #bikes { padding-bottom: 80px; } #trust { padding-top: 88px; } } @media (max-width: 768px) { .source-band { margin-top: 32px; padding: 22px 20px; } .source-band h3 { font-size: 24px; } .source-band .btn { width: 100%; } } /* ===== Mobile fixes ===== */ @media (max-width: 860px) { /* Filters: tidy grid (2 per row on phones) instead of a sideways row that gets cut off */ .finder-filters, .finder-bar .finder-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; overflow: visible; margin: 0; padding: 0; } .finder-filters .picker { width: 100%; min-width: 0; } .finder-filters .picker .chev { margin-left: auto; } .finder-filters .sort { grid-column: 1 / -1; } } @media (max-width: 768px) { /* Bike cards: titles take 2 lines of space so specs and prices line up side by side */ .bike-info h3 { line-height: 1.15; min-height: 2.3em; } /* Less empty space at the top of Export */ #export.export-compact { padding-top: calc(var(--ov) + 44px); } } /* Bike popup: the video-call box no longer spills over its border */ .vi-box > *, .vi-top > div { min-width: 0; } .vi-box .btn { white-space: normal; text-align: center; line-height: 1.3; } @media (max-width: 400px) { .vi-box .btn { font-size: 13px; letter-spacing: .1em; padding-left: 12px; padding-right: 12px; } } @media (max-width: 640px) { /* Contact: one tile per row, icon on the left, so email and address are never cut off */ .c-tiles { grid-template-columns: 1fr; } .c-tile { grid-template-columns: auto 1fr; padding: 14px 16px; column-gap: 14px; } .c-tile svg { grid-row: 1 / 3; margin-bottom: 0; } } /* ===== Smoother, quicker opening (especially on phones) ===== */ @media (prefers-reduced-motion: no-preference) { .hero-word { animation-duration: .8s; } .hero-bike { animation: bikeIn .8s var(--ease) .05s both; } .hero-intro, .hero-bottom { animation: fadeUp .6s var(--ease) .1s both; } } .mbar { -webkit-backdrop-filter: none; backdrop-filter: none; } @media (max-width: 860px) { .hero::before { display: none; } /* grain layer: expensive blending on phones */ .hero-bike img { filter: none; } /* big soft shadow filter: expensive on phones */ .hero-bike::after { bottom: 1%; height: 26px; background: radial-gradient(ellipse, rgba(28,22,18,.6), transparent 70%); } .bike-modal, .qmodal, .nav-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; } .bike-modal, .qmodal { background: rgba(12,9,7,.84); } .js .reveal { transform: translateY(12px); transition-duration: .5s; } } @media (max-width: 860px) and (prefers-reduced-motion: no-preference) { .hero-bike { animation-name: bikeInSm; } @keyframes bikeInSm { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } } } /* ===== Close (X) buttons: icon drawn as a shape, always dead centre ===== */ .bm-close, .nav-close, .dd-close, .search-clear { display: grid; place-items: center; padding: 0; font-size: 0; } .nav-close { width: 44px; height: 44px; } .bm-close svg, .nav-close svg, .dd-close svg, .search-clear svg { display: block; } /* ===== Join cards: the section edge always runs through the middle of the card (heights measured by the script) ===== */ #trust .faq-band { margin-bottom: calc(-1 * var(--faq-half, 64px)); } #export.export-compact { padding-top: calc(var(--faq-half, 64px) + 88px); } .quote-card { margin-bottom: calc(-1 * var(--quote-half, 52px)); } #contact { padding-top: calc(var(--quote-half, 52px) + 98px); } .seam-search { margin-top: calc(-1 * var(--search-half, 40px)); } @media (min-width: 861px) { .hero .hero-bottom { padding-bottom: calc(var(--search-half, 40px) + 24px); } } @media (max-width: 860px) { .hero .hero-bottom { padding-bottom: calc(var(--search-half, 32px) + 14px); } } @media (max-width: 768px) { #export.export-compact { padding-top: calc(var(--faq-half, 48px) + 44px); } #contact { padding-top: calc(var(--quote-half, 52px) + 58px); } } #trust { display: flow-root; } /* ===== Eyebrow mark: fading line ending in a small diamond ===== */ .eyebrow { gap: 16px; } .eyebrow .rule { position: relative; flex: none; width: 28px; height: 1.5px; background: linear-gradient(90deg, transparent, currentColor); } .eyebrow .rule::after { content: ''; position: absolute; right: -4px; top: 50%; width: 7px; height: 7px; background: currentColor; transform: translateY(-50%) rotate(45deg); } @media (max-width: 640px) { .eyebrow { gap: 14px; } .eyebrow .rule { width: 22px; } .eyebrow .rule::after { width: 6px; height: 6px; } } @media (prefers-reduced-motion: no-preference) { .js .reveal .eyebrow .rule { transform: translateX(-10px); opacity: 0; transition: transform .5s var(--ease) .15s, opacity .5s var(--ease) .15s; } .js .reveal.in .eyebrow .rule { transform: none; opacity: 1; } } /* ===== Filter menus: premium type, section title, counts ===== */ .dd { padding: 8px; border-radius: 8px; min-width: 264px; } .dd-opt { font-family: var(--font-head); font-weight: 600; font-size: 16px; letter-spacing: .05em; text-transform: uppercase; color: var(--text); padding: 12px 12px; border-radius: 6px; gap: 14px; } .dd-opt em { font-family: var(--font-head); font-weight: 600; font-size: 12px; letter-spacing: .04em; min-width: 26px; text-align: center; padding: 3px 8px; background: var(--pearl); color: var(--text-soft); border-radius: 50px; } .dd-opt:hover, .dd-opt:focus-visible { background: var(--pearl); color: var(--ink); } .dd-opt.sel { color: var(--bronze-dark); font-weight: 700; background: rgba(141,102,19,.08); } .dd-opt.sel em { background: var(--bronze); color: #FFFFFF; } .dd-opt.zero { opacity: .45; } @media (min-width: 601px) { .dd-head { display: block; padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--pearl-2); } .dd-title { font-family: var(--font-head); font-weight: 600; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--bronze-dark); } .dd-close { display: none; } } @media (max-width: 600px) { .dd-opt { font-size: 17px; padding: 15px 12px; } } /* ===== Share menu on bike cards ===== */ .share-pop { position: fixed; z-index: 450; min-width: 210px; padding: 8px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 24px 48px -16px rgba(28,22,18,.35), 0 2px 6px rgba(28,22,18,.06); } .share-pop[hidden] { display: none; } .sp-title { padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--pearl-2); font-family: var(--font-head); font-weight: 600; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--bronze-dark); } .share-pop button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; text-align: left; font-family: var(--font-head); font-weight: 600; font-size: 16px; letter-spacing: .05em; text-transform: uppercase; color: var(--text); } .share-pop button[hidden] { display: none; } .share-pop button svg { flex: none; color: var(--bronze); } .share-pop button:hover, .share-pop button:focus-visible { background: var(--pearl); color: var(--ink); outline: none; } /* ===== Readability: menu text on the bronze header is pure white (passes the 4.5:1 contrast rule) ===== */ @media (min-width: 861px) { .header:not(.scrolled) .nav a:not(.btn), .header:not(.scrolled) .nav-phone { color: #FFFFFF !important; } } /* ===== Touch targets and small text on phones (easier to tap, easier to read) ===== */ @media (max-width: 600px) { .card-share { width: 40px; height: 40px; top: 6px; right: 6px; } .badge { font-size: 10px; } .chip { font-size: 10px; padding: 4px 6px; } .bike-card .bike-specs span { font-size: 9.5px; } .bike-card .btn-block { min-height: 40px; font-size: 12px; } .bike-more { padding: 10px 0 4px; margin-top: 2px; font-size: 12px; } } @media (max-width: 860px) { .finder-meta .seg { height: 44px; } } .map-dir { display: inline-block; padding: 10px 0; margin-top: 0; } .side-rail a::before { content: ''; position: absolute; inset: -10px; } /* ===== Phone turned sideways: the hero fits the short screen ===== */ @media (max-width: 860px) and (max-height: 500px) and (orientation: landscape) { .hero-inner { height: auto; min-height: 0; max-height: none; padding-bottom: 8px; } .hero h1 { font-size: 44px; } .hero-word { display: none; } .hero-bike { width: min(56%, 480px); margin: -150px 0 0 auto; } } /* ===== Very large screens (2K / 4K): scale the whole page up so it doesn't look tiny ===== */ @media (min-width: 2000px) { html { zoom: 1.25; } } @media (min-width: 2800px) { html { zoom: 1.6; } } @media (min-width: 3600px) { html { zoom: 2; } } .nf-eyebrow { color: var(--honey); margin: 0; } /* ===== Hero bike lights: tail light then headlight switch on once, like starting the bike ===== */ .hero-bike img { display: block; } .bike-light { position: absolute; pointer-events: none; z-index: 3; } /* tail light (rear tip of the seat) */ .bl-tail { left: 9.2%; top: 12.2%; width: 7%; height: 9%; opacity: .8; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,70,50,.95) 0%, rgba(255,40,30,.55) 28%, rgba(220,20,10,.18) 55%, transparent 72%); } /* headlight: bright LED strip + warm bloom around it */ .bl-head { left: 79.5%; top: 20.5%; width: 15%; height: 24%; opacity: .9; background: radial-gradient(ellipse 48% 42% at 54% 52%, rgba(255,250,236,.9) 0%, rgba(242,210,162,.45) 32%, rgba(242,210,162,.14) 58%, transparent 76%); } .bl-head i { position: absolute; left: 27%; top: 38%; width: 50%; height: 16%; border-radius: 50%; transform: rotate(35deg); background: radial-gradient(ellipse 50% 50% at 50% 50%, #FFFFFF 0%, rgba(255,250,236,.9) 30%, rgba(255,240,210,.35) 60%, transparent 78%); } @media (prefers-reduced-motion: no-preference) { .bl-tail { opacity: 0; animation: tailOn .5s steps(1, end) .95s forwards, tailGlow .6s ease-out 1.45s forwards; } .bl-head { opacity: 0; animation: headOn 1s cubic-bezier(.2,.7,.2,1) 1.35s forwards; } @keyframes tailOn { 0% { opacity: .9; } 30% { opacity: .2; } 55% { opacity: 1; } 100% { opacity: .85; } } @keyframes tailGlow { to { opacity: .8; } } @keyframes headOn { 0% { opacity: 0; transform: scale(.7); } 28% { opacity: 1; transform: scale(1.18); } 60% { opacity: .75; transform: scale(1); } 100% { opacity: .9; transform: scale(1); } } } /* ===== Hero intro (first visit only): bike rides in with spinning wheels, then lights, then text ===== */ .hero-bike .bike-base { position: relative; z-index: 2; } .bike-wheels { display: none; position: absolute; inset: 0; z-index: 1; pointer-events: none; } .hero-bike .bw { position: absolute; display: block; height: auto; filter: none; } .hero-bike .bw-rear { left: 5.4286%; top: 47.748%; width: 21.2857%; height: 38.353%; transform-origin: 50.168% 50.07%; } .hero-bike .bw-front { left: 73.714%; top: 49.807%; width: 21.857%; height: 39.382%; transform-origin: 50.229% 50.065%; } .hero-bike .bw-under { position: absolute; display: block; filter: none; } /* what is seen through the spokes: stays still (same boxes as the wheels) */ .hero-bike .bike-top { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; filter: none; pointer-events: none; } /* fades in at the end of the ride */ .hero-bike.spinning .bike-wheels { display: block; } .hero-bike.spinning .bike-base { -webkit-clip-path: url(#wjjBikeClip); clip-path: url(#wjjBikeClip); } /* cuts the round wheel holes out of the photo while the wheels spin (shape is inside index.html, nothing to download) */ .bike-clip { position: absolute; width: 0; height: 0; overflow: hidden; } .intro .hero-bike { animation: none; opacity: 0; } .intro.intro-run .hero-bike { opacity: 1; } .intro .hero-intro, .intro .hero-bottom, .intro .hero-word, .intro .seam-search { animation: none; opacity: 0; } .intro.intro-text .hero-intro, .intro.intro-text .hero-bottom, .intro.intro-text .seam-search { animation: fadeUp .6s var(--ease) both; opacity: 1; } .intro.intro-text .hero-bottom { animation-delay: .08s; } .intro.intro-text .seam-search { animation-delay: .16s; } .intro.intro-text .hero-word { animation: wordIn .8s var(--ease) both; opacity: 1; } .intro .bike-light { animation: none; opacity: 0; } .intro .hero-bike.lit .bl-tail { animation: tailOn .5s steps(1, end) forwards, tailGlow .6s ease-out .5s forwards; } .intro .hero-bike.lit .bl-head { animation: headOn 1s cubic-bezier(.2,.7,.2,1) .4s forwards; } @keyframes introShow { to { opacity: 1; } } /* safety net: if the script never runs, everything still appears */ .intro:not(.intro-run) .hero-bike, .intro:not(.intro-text) .hero-intro, .intro:not(.intro-text) .hero-bottom, .intro:not(.intro-text) .hero-word, .intro:not(.intro-text) .seam-search { animation: introShow .01s 2.2s forwards; } .intro:not(.intro-done) .bike-light { animation: introShow .01s 4s forwards; } /* while spinning, the soft shadow is drawn by the whole bike (photo + wheels), so the photo's cut-outs don't clip it */ @media (min-width: 861px) { .hero-bike.spinning { filter: drop-shadow(0 36px 34px rgba(28,22,18,.5)); } .hero-bike.spinning .bike-base { filter: none; } } /* ---------- Bike details: what's included + hold line; export small print ---------- */ .bm-docs { border-top: 1px solid var(--line); color: var(--text-soft); margin: 2px 0 14px; padding: 14px 0 0; font-size: 14px; line-height: 1.55; } .bm-docs p { margin: 0 0 6px; } .bm-docs b { color: var(--ink); font-weight: 600; } .export-terms { color: var(--text-dark-soft); max-width: 520px; margin-top: 18px; font-size: 13px; line-height: 1.65; } /* ---------- Calmer details: arrows stay still on hover, no blur behind overlays ---------- */ .btn:hover .arrow,.map-dir:hover .arrow,.vi-line a:hover .arrow{transform:none} .nav-overlay,.bike-modal,.qmodal,.mbar{-webkit-backdrop-filter:none;backdrop-filter:none} .nav-overlay{background:#0c0907b8} .bike-modal,.qmodal{background:#0c0907d6} /* Reserved bikes + US dollar price */ .b-reserved{background:var(--pearl);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}.bike-price .usd{order:3;flex-basis:100%;font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--text-soft);letter-spacing:0;line-height:1.3}#bmPrice .usd{font-size:15px}.btn-reserved{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}.btn-reserved:hover{background:var(--ink);color:var(--pearl)}.btn-sold.btn-res{background:var(--pearl);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)} /* Small bronze labels a shade darker, easier to read in sunlight */ .lp-toc>p,.lp-sec a,.contact-light .c-tile:not(.c-tile-main) .c-k,.contact-light .map-card .c-k,.contact-light .map-dir{color:var(--bronze-dark)} /* softer, rounder floor shadow (no flat band) */ .hero-bike:after{left:14%;right:14%;height:28px;bottom:1.5%;background:radial-gradient(closest-side,rgba(28,22,18,.55),rgba(28,22,18,0));border-radius:50%} /* Dark Ink hero (chosen 11 Oct 2026) */ .header{background:var(--ink)} .hero{background:radial-gradient(ellipse 55% 50% at 64% 56%,rgba(141,102,19,.42) 0%,rgba(141,102,19,.12) 45%,transparent 72%),linear-gradient(135deg,#1C1612 0%,#261E18 55%,#1C1612 100%)} .hero-word{color:rgba(237,232,228,.05)} .hero-stage:before{content:"";position:absolute;inset:18% 4% 10% 10%;background:radial-gradient(closest-side,rgba(242,210,162,.22),rgba(242,210,162,0));pointer-events:none;z-index:1} .hero .eyebrow{color:var(--honey)} .hero h1{color:var(--pearl)} .hero .btn-light{background:var(--bronze);color:#fff} .hero .btn-light:hover{background:var(--bronze-dark);color:#fff} .header .nav-cta{background:transparent;color:var(--honey);box-shadow:inset 0 0 0 1.5px var(--honey)} .header .nav-cta:hover{background:var(--honey);color:var(--ink)} .hero-note p{color:var(--pearl);font-size:16px} .hero-stats span{color:var(--text-dark-soft)} .hero-stats strong{color:var(--honey)} .hero-bottom,.hero-stats{border-color:rgba(211,200,189,.2)} .hero-stats li+li{border-left-color:rgba(211,200,189,.2)} /* Dark theme on the other pages too */ .fp-hero{background:radial-gradient(ellipse 60% 75% at 82% 40%,rgba(141,102,19,.38) 0%,rgba(141,102,19,0) 72%),linear-gradient(135deg,#1C1612 0%,#261E18 55%,#1C1612 100%)} .header .btn-light.btn-sm,.nf-top .btn-light.btn-sm{background:transparent;color:var(--honey);box-shadow:inset 0 0 0 1.5px var(--honey)} .header .btn-light.btn-sm:hover,.nf-top .btn-light.btn-sm:hover{background:var(--honey);color:var(--ink)} /* Bikes for Sale: premium cards + dark "Bike not listed?" band (11 Oct 2026) */ .bike-card{border-radius:8px;box-shadow:0 1px 2px rgba(28,22,18,.04),0 10px 26px -18px rgba(28,22,18,.22)} .bike-card:hover{border-color:var(--bronze);box-shadow:0 1px 2px rgba(28,22,18,.05),0 20px 38px -22px rgba(28,22,18,.38)} .bike-info h3 .nw{white-space:nowrap} .source-band{position:relative;overflow:hidden;border-radius:8px;background:radial-gradient(ellipse 50% 120% at 88% 50%,rgba(141,102,19,.38) 0%,rgba(141,102,19,0) 70%),linear-gradient(135deg,#1C1612 0%,#261E18 60%,#1C1612 100%)} .source-band h3{color:var(--pearl)} .source-band p{color:var(--text-dark-soft)} .source-band .btn-gold{background:var(--bronze);color:#fff} .source-band .btn-gold:hover{background:var(--bronze-dark);color:#fff} @media (width<=600px){ .bike-grid{grid-template-columns:1fr;gap:18px} .bike-info h3{font-size:22px;min-height:0;margin-bottom:12px} .bike-card .bike-specs li{padding:9px 2px;font-size:16px} .bike-card .bike-specs span{letter-spacing:.12em;font-size:10px} .bike-card .btn-block{min-height:48px;padding:13px 12px;font-size:14px;letter-spacing:.08em} .bike-card .bike-price{font-size:26px} } /* Phone (1 column): badge, photo count and share button a bit bigger */ @media (width<=600px){.bike-card .badge{letter-spacing:.16em;padding:7px 11px;font-size:11px;top:12px;left:12px}.bike-card .chip{letter-spacing:.06em;padding:5px 8px;font-size:11px}.bike-card .chips{bottom:12px;right:12px}.bike-card .card-share{top:10px;right:10px}} /* Hero balance (11 Oct 2026): watermark always fits above the bottom line, text block sits lower to balance the bike, bigger View Bikes button */ @media (width>=861px){.hero-word{font-size:clamp(120px,min(21vw,(100svh - 222px)*.52),330px)}.hero-intro{top:max(20px,calc(44% - 190px))}.hero .hero-intro .btn{min-height:56px;padding:0 36px;font-size:15px;letter-spacing:.16em}} @media (width<=860px){.hero .hero-intro .btn{min-height:52px;padding:0 30px;font-size:15px}} /* Bikes for Sale (11 Oct 2026): warmer section, cream cards, badge right + share button left */ #bikes{background:var(--pearl-2)} .bike-card{background:var(--pearl)} .bike-card .badge{left:auto;right:14px} .bike-card .card-share{right:auto;left:10px} @media (width<=600px){.bike-card .badge{left:auto;right:12px}.bike-card .card-share{right:auto;left:10px}} /* About section (11 Oct 2026): Pearl background, trust points in one bordered box with bronze outline icons, dark FAQ band */ #trust{background:var(--pearl)} .trust-points{border:1px solid var(--line);border-radius:8px;overflow:hidden;gap:0;background:var(--pearl);box-shadow:0 1px 2px rgba(28,22,18,.04),0 10px 26px -18px rgba(28,22,18,.22)} #trust .trust-points li{border:0;border-radius:0;background:0 0;padding:30px 26px;gap:16px;grid-template-columns:1fr} #trust .trust-points li+li{border-left:1px solid var(--line)} .tp-icon{width:30px;height:30px;color:var(--bronze)} #trust .faq-band{background:radial-gradient(ellipse 45% 140% at 90% 50%,rgba(141,102,19,.36) 0%,rgba(141,102,19,0) 70%),linear-gradient(135deg,#1C1612 0%,#261E18 60%,#1C1612 100%);border-color:rgba(242,210,162,.22);border-radius:8px;color:var(--pearl)} #trust .faq-band:hover{border-color:rgba(242,210,162,.5);color:var(--pearl)} #trust .faq-band strong{color:var(--pearl)} #trust .faq-band .eyebrow{color:var(--honey)} @media (width<=1024px){#trust .trust-points li:nth-child(odd){border-left:0}#trust .trust-points li:nth-child(-n+2){border-bottom:1px solid var(--line)}} @media (width<=600px){#trust .trust-points li,#trust .trust-points li+li{border-left:0;padding:24px 20px}#trust .trust-points li:not(:last-child){border-bottom:1px solid var(--line)}} /* Export section (11 Oct 2026): bronze corner glow, numbered steps with icons, terms as a bullet box, 1 column on phones */ #export:before{content:"";position:absolute;top:0;right:0;width:min(640px,90vw);height:640px;background:radial-gradient(closest-side,rgba(141,102,19,.22),rgba(141,102,19,0));pointer-events:none;z-index:-1} .export-list li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px} .export-list .ex-num{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(242,210,162,.55);color:var(--honey);font-size:13px;letter-spacing:.06em;line-height:1} .export-list .ex-t{display:grid;gap:6px} .export-list .ex-t p{font-family:var(--font-body);text-transform:none;letter-spacing:0;font-weight:400;font-size:15px;line-height:1.5;color:var(--text-dark-soft)} .ex-icon{width:24px;height:24px;color:var(--honey);opacity:.8} .export-terms{max-width:520px;margin-top:26px;padding:20px 24px;border:1px solid rgba(211,200,189,.16);border-radius:8px;background:var(--ink-2);font-size:14px;line-height:1.55} .export-terms .et-title{font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--honey);margin-bottom:12px} .export-terms ul{list-style:none;display:grid;gap:8px} .export-terms li{position:relative;padding-left:20px;color:var(--text-dark-soft)} .export-terms li:before{content:"";position:absolute;left:0;top:.68em;width:10px;height:1.5px;background:var(--bronze)} @media (width<=600px){.export-list{grid-template-columns:1fr}.export-list li,.export-list li:nth-child(2n){border-left:0;padding:20px 0;font-size:18px;gap:14px}.export-list .ex-num{width:34px;height:34px;font-size:12px}.export-terms{padding:18px 18px}}.export-list .ex-t b{font-weight:700;line-height:1.15}@media (width>=861px){.export-list li{font-size:19px;padding:26px 18px 26px 0}.export-list li:nth-child(2n){padding-left:22px;padding-right:0}}.export-list li{align-items:start}.export-list .ex-icon{margin-top:7px}.export-list .ex-num{margin-top:-2px} /* Export quote card dark (11 Oct 2026) + roomier steps */ .quote-card{background:radial-gradient(ellipse 45% 140% at 90% 50%,rgba(141,102,19,.36) 0%,rgba(141,102,19,0) 70%),linear-gradient(135deg,#1C1612 0%,#261E18 60%,#1C1612 100%);color:var(--pearl);border-color:rgba(242,210,162,.22);border-radius:8px;box-shadow:0 22px 44px -24px rgba(0,0,0,.55)} .quote-card .eyebrow{color:var(--honey)} .quote-card strong{color:var(--pearl)} @media (width>=861px){.export-list li{padding:32px 20px 32px 0}.export-list li:nth-child(2n){padding-left:28px;padding-right:0}} @media (width<=600px){.export-list li,.export-list li:nth-child(2n){padding:24px 0}} /* Change 2 (owner request 12 Oct 2026): 12px cards, soft shadow, lift + photo zoom on hover (mouse only, not with reduced motion) */ .bike-card{border-radius:12px;box-shadow:0 4px 12px rgba(28,22,18,.06);transition:border-color .3s ease-out,transform .3s ease-out,box-shadow .3s ease-out} .bike-card .bike-img img{transition:transform .5s ease-out} @media (hover:hover) and (prefers-reduced-motion:no-preference){.bike-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(28,22,18,.14)}.bike-card:hover .bike-img img{transform:scale(1.05)}} /* Change 3 (owner request 12 Oct 2026): "Inquire on WhatsApp" card button - Barlow Condensed uppercase, hover Bronze-deep #6B4D0E, arrow moves right on hover (mouse only, not with reduced motion) */ .bike-card .btn-gold.btn-block{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;transition:background-color .3s ease-out,color .3s ease-out}.bike-card .btn-gold.btn-block::after{display:inline-block;transition:transform .3s ease-out}.bike-card .btn-gold.btn-block:hover{background:var(--bronze-dark);color:#fff}@media (hover:hover) and (prefers-reduced-motion:no-preference){.bike-card .btn-gold.btn-block:hover::after{transform:translateX(4px)}} /* About change 1 (owner request 12 Oct 2026): About section top padding 100px, 60px on phones. Background was already Pearl #EDE8E4 (line 1475). Bottom padding stays 0 because the FAQ banner overlaps the edge into the Export section. */ #trust{padding-top:100px}@media (width<=600px){#trust{padding-top:60px}} /* About change 2 (owner request 12 Oct 2026): 4 trust columns as one grid box - grid background Line #D3C8BD with 1px gap makes the thin lines, each column Pearl #EDE8E4, padding 32px 24px, icons stay Bronze */ #trust .trust-points{gap:1px;background:var(--line);border:1px solid var(--line)}#trust .trust-points>li:nth-child(n){background:var(--pearl);border:0;padding:32px 24px} /* About change 3 (owner request 12 Oct 2026): FAQ banner - Ink background with the bronze glow kept (owner choice), Pearl text, Bronze button (already set at lines 1480-1483); now 12px corners and 40px padding */ #trust .faq-band{border-radius:12px;padding:40px} /* Hero polish (owner request 12 Oct 2026): View Bikes button - one soft honey shine sweeps across once after the page loads (phones too); on mouse hover the shine sweeps again, a soft bronze glow appears and the arrow moves right. Off when the visitor has reduced motion on. */ .hero .hero-intro .btn-light{position:relative;overflow:hidden;isolation:isolate}.hero .hero-intro .btn-light::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(242,210,162,.38) 50%,transparent 70%);transform:translateX(-120%)}@keyframes wjjSheenA{from{transform:translateX(-120%)}to{transform:translateX(120%)}}@keyframes wjjSheenB{from{transform:translateX(-120%)}to{transform:translateX(120%)}}@media (prefers-reduced-motion:no-preference){.hero .hero-intro .btn-light::before{animation:wjjSheenA 1.1s ease-out 1.2s 1}}@media (hover:hover) and (prefers-reduced-motion:no-preference){.hero .hero-intro .btn-light:hover{box-shadow:0 12px 26px -12px rgba(141,102,19,.75)}.hero .hero-intro .btn-light:hover::before{animation:wjjSheenB .9s ease-out 1}.hero .hero-intro .btn-light:hover .arrow{transform:translateX(4px)}} /* Export quote banner (owner request 12 Oct 2026): "Buying for Export?" banner was already Ink with bronze glow, Honey eyebrow, Pearl heading, Bronze button (lines 1502-1504); now 12px corners and 40px padding, matching the FAQ banner */ .quote-card{border-radius:12px;padding:40px} /* Contact change 1 (owner request 12 Oct 2026): background was already Pearl #EDE8E4. Space 100px top/bottom (60px phones); top is counted from the bottom of the export quote banner that overlaps in, bottom keeps extra room for the footer badge. Heading to boxes 64px. */ #contact{padding-top:calc(var(--quote-half,52px) + 100px);padding-bottom:calc(100px + 34px)}#contact .section-head{margin-bottom:64px}@media (width<=600px){#contact{padding-top:calc(var(--quote-half,52px) + 60px);padding-bottom:calc(60px + 30px)}} /* Contact change 2 (owner request 12 Oct 2026): 4 contact boxes - 8px corners, soft shadow, padding 24px; WhatsApp box stays Bronze, the other 3 are Pearl #EDE8E4 (their existing 1px Line border is kept so they stay visible on the Pearl section) */ .contact-light .c-tile{border-radius:8px;box-shadow:0 4px 12px rgba(28,22,18,.06);padding:24px}.contact-light .c-tile:not(.c-tile-main){background:var(--pearl)} /* Contact change 3 (owner request 12 Oct 2026): map container 12px corners + 1px Line #D3C8BD border; "We accept" / "Book a video inspection" row 32px below the map. Desktop: both sides already sit on one centred line. Phones: "We accept" on its own line so both payment chips fit in one neat row, 16px gap before the video line. */ .contact-light .map-strip{border-radius:12px;border:1px solid var(--line)}.c-foot{margin-top:32px}@media (width<=600px){.c-foot{gap:16px}.c-foot .c-foot-k{flex-basis:100%;margin:0 0 2px}} /* Footer change 1 (owner request 12 Oct 2026): Instagram, TikTok and Email icons in brand style - Pearl outline (no brand gradients/black/red), 20px icons, 12px gap; hover fills the circle Bronze #8D6613 (owner chose this over Bronze-deep, which disappears on the dark footer). CTA banner and stamp untouched. */ .footer .footer-social{gap:12px}.footer .footer-social a[class]{background:0 0;border:1px solid rgba(237,232,228,.45);color:var(--pearl);box-shadow:none;transition:background-color .25s ease-out,border-color .25s ease-out,color .25s ease-out}.footer .footer-social a[class] svg{width:20px;height:20px;filter:none}.footer .footer-social a[class]:hover,.footer .footer-social a[class]:focus-visible{background:var(--bronze);border-color:var(--bronze);color:var(--pearl)}.footer .footer-social .soc-tt svg path{fill:currentColor}.footer .footer-social .soc-tt svg path:not(:last-of-type){display:none} /* Footer change 2 (owner request 12 Oct 2026): footer links moved into the bottom bar (index.html). Bottom bar = one row: copyright left, links centre, Back to top right, all vertically centred. 1201-1340px screens get 80px right space so the floating WhatsApp button never covers Back to top. 1200px and below (tablets, phones): stacked, left aligned. CTA banner and stamp untouched. */ .footer-bottom{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:32px;row-gap:14px}.footer-bottom .footer-links{justify-self:center;margin:0}.footer-bottom .to-top{justify-self:end}@media (1201px<=width<=1340px){.footer-bottom{padding-right:80px}}@media (width<=1200px){.footer-bottom{grid-template-columns:1fr;justify-items:start}.footer-bottom .footer-links,.footer-bottom .to-top{justify-self:start}} /* Pre-launch audit fix (12 Oct 2026): on very small phones (under 360px) the export quote banner uses less padding so its button text is not cut */ @media (width<=359px){.quote-card{padding:24px 18px}.quote-card .btn{white-space:normal}} /* Visual audit fixes (13 Oct 2026): phone bar WhatsApp text dark on the green (was white, hard to read) and Call Now text white; 10px labels raised to 11px on phones/tablets; bigger tap areas for subpage links on phones; export steps on laptop: number + icon on top, text full width below */ .mbar-wa,.mbar-wa:hover,.mbar-wa:active{color:#0B2E18}.mbar-call,.mbar-call:hover,.mbar-call:active{color:#fff}@media (width<=1024px){.hero-stats span{font-size:11px}.bike-card .bike-specs span{font-size:11px}}@media (width<=600px){.lp-toc li{padding:0}.lp-toc a{display:inline-block;padding:7px 0}.fp-foot .footer-legal a{display:inline-block;padding:11px 6px}.fp-home a{display:inline-block;padding:11px 0}.fp-back{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}}@media (width>=861px){.export-list li{grid-template-columns:auto 1fr;grid-template-areas:"n i" "t t";row-gap:16px;align-content:start}.export-list .ex-num{grid-area:n}.export-list .ex-icon{grid-area:i;justify-self:end;margin-top:5px}.export-list .ex-t{grid-area:t}} /* Phones (14 Oct 2026, owner choice): 2 bikes per line instead of 1; compact card text; card button says just "WhatsApp" on phones (the "Inquire on" part is hidden) */ @media (width<=600px){.bike-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.bike-card .bike-info{padding:10px 10px 12px}.bike-card .bike-info h3{font-size:15px;line-height:1.15;min-height:2.3em;margin-bottom:8px}.bike-card .bike-specs{margin-bottom:10px}.bike-card .bike-specs li{font-size:12px;padding:6px 1px}.bike-card .bike-specs span{font-size:10px;letter-spacing:.04em}.bike-card .bike-price{font-size:18px;margin-bottom:8px;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px}.bike-card .bike-price .old-price{font-size:12px}.bike-card .btn-block{min-height:42px;font-size:12px;padding:8px 4px;letter-spacing:.06em}.bike-card .ib-long{display:none}.bike-card .bike-more{font-size:11px}.bike-card .badge{font-size:9px;letter-spacing:.1em;padding:4px 6px;top:8px;right:8px}.bike-card .card-share{width:32px;height:32px;top:8px;left:8px}.bike-card .chips{bottom:8px;right:8px}.bike-card .chip{font-size:9px;padding:3px 6px}} /* Show more bikes (14 Oct 2026, owner approved): 12 bikes first, then "Show 12 more bikes" button with a small progress line */ .more-wrap{display:grid;justify-items:center;gap:12px;margin-top:28px;text-align:center}.more-count{font-size:14px;color:var(--text-soft)}.more-bar{width:min(240px,70%);height:3px;border-radius:3px;background:var(--line);overflow:hidden}.more-bar span{display:block;height:100%;background:var(--bronze);transition:width .4s ease-out}.more-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 28px;border-radius:8px;background:transparent;border:1.5px solid var(--bronze);color:var(--bronze-dark);font-family:var(--font-head);font-weight:700;font-size:15px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background-color .25s ease-out,color .25s ease-out}.more-btn:hover,.more-btn:focus-visible{background:var(--bronze);color:#fff}@media (width<=600px){.more-wrap{margin-top:20px}.more-btn{width:100%}} /* Google reviews section + one page per bike (bike.php) (14 Oct 2026) */ .rv{margin:40px 0 0}.rv-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-bottom:18px}.rv-score{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;color:var(--text-soft);font-size:15px}.rv-score b{font-family:var(--font-head);font-weight:700;font-size:40px;line-height:1;color:var(--ink)}.rv-stars{color:var(--bronze);letter-spacing:.08em;font-size:17px;line-height:1}.rv-stars i{font-style:normal;color:var(--line)}.rv-link{font-family:var(--font-head);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-dark);text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(141,102,19,.35);padding:10px 0}.rv-link:hover{color:var(--ink)}.rv-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}.rv-card{display:grid;align-content:start;gap:12px;background:var(--pearl);border:1px solid var(--line);border-radius:12px;padding:24px;box-shadow:0 4px 12px rgba(28,22,18,.06)}.rv-card blockquote{margin:0;font-size:16px;line-height:1.6;color:var(--text)}.rv-who{display:grid;gap:2px;font-size:14px;color:var(--text-soft)}.rv-who b{font-family:var(--font-head);font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}@media (width<=600px){.rv{margin-top:32px}.rv-card{padding:20px}.rv-score b{font-size:34px}}.bp{padding:28px 0 72px;background:var(--pearl)}.bp-crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:14px;color:var(--text-soft);margin-bottom:22px}.bp-crumbs a{color:var(--bronze-dark);padding:6px 0}.bp-crumbs a:hover{color:var(--ink)}.bp-crumbs span[aria-current]{color:var(--ink);padding:6px 0}.bp-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:start}.bp-gallery{position:sticky;top:96px;display:grid;gap:10px}.bp-main{position:relative;border-radius:12px;overflow:hidden;background:var(--sand);aspect-ratio:3/2}.bp-main img{width:100%;height:100%;object-fit:cover;display:block}.bp-main .badge{top:14px;right:14px;left:auto}.bp-nophoto{display:grid;place-items:center;height:100%;color:var(--text-soft);font-family:var(--font-head);letter-spacing:.14em;text-transform:uppercase}.bp-count{position:absolute;right:14px;bottom:14px;background:rgba(28,22,18,.78);color:#fff;font-family:var(--font-head);font-weight:600;font-size:13px;letter-spacing:.1em;padding:5px 10px;border-radius:4px}.bp-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}.bp-thumbs button{padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:var(--sand);cursor:pointer;aspect-ratio:3/2}.bp-thumbs button[aria-current]{border-color:var(--bronze)}.bp-thumbs img{width:100%;height:100%;object-fit:cover;display:block}.bp-info h1{font-family:var(--font-head);font-weight:800;font-size:clamp(32px,4vw,48px);line-height:1.02;text-transform:uppercase;color:var(--ink);margin:10px 0 20px}.bp-info .bike-specs{margin-bottom:20px}.bp-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:18px}.bp-price span{font-family:var(--font-head);font-weight:800;font-size:38px;line-height:1;color:var(--ink)}.bp-price.is-drop span{color:var(--bronze-dark)}.bp-price .old-price{font-size:18px;color:var(--muted)}.bp-price .usd{flex-basis:100%;font-size:14px;color:var(--text-soft)}.bp-note{margin:-4px 0 14px;color:var(--text-soft)}.bp-cta{min-height:54px;font-size:16px}.bp-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin:12px 0 26px}.bp-act{display:flex;align-items:center;justify-content:center;min-height:46px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--pearl);color:var(--ink);font-family:var(--font-head);font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:border-color .25s ease-out,color .25s ease-out}.bp-act:hover{border-color:var(--bronze);color:var(--bronze-dark)}.bp-desc{font-size:16px;line-height:1.7;color:var(--text);margin-bottom:16px}.bp-incl{font-size:15px;color:var(--text-soft);margin-bottom:20px}.bp-incl b{color:var(--ink)}.bp-video{margin:4px 0 22px}.bp-trust{list-style:none;display:grid;gap:10px;margin-top:6px;padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--pearl-2)}.bp-trust li{position:relative;padding-left:26px;font-size:15px;color:var(--text)}.bp-trust li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:var(--bronze) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat}.bp-more{margin-top:64px}.bp-more h2{font-family:var(--font-head);font-weight:800;font-size:clamp(28px,3vw,38px);text-transform:uppercase;color:var(--ink);margin-bottom:20px}.bp-more-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.bp-mini{display:grid;gap:6px;background:var(--pearl);border:1px solid var(--line);border-radius:12px;overflow:hidden;padding-bottom:14px;box-shadow:0 4px 12px rgba(28,22,18,.06);transition:border-color .25s ease-out}.bp-mini:hover{border-color:var(--bronze)}.bp-mini-img{aspect-ratio:3/2;background:var(--sand);display:block}.bp-mini-img img{width:100%;height:100%;object-fit:cover;display:block}.bp-mini-t{padding:6px 14px 0;font-family:var(--font-head);font-weight:700;font-size:16px;line-height:1.15;text-transform:uppercase;color:var(--ink)}.bp-mini-p{padding:0 14px;font-size:14px;color:var(--text-soft)}.bp-all{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:10px 0;font-family:var(--font-head);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-dark)}@media (width<=960px){.bp-grid{grid-template-columns:1fr;gap:24px}.bp-gallery{position:static}.bp-more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=768px){.bike-page{padding-bottom:calc(76px + env(safe-area-inset-bottom))}}@media (width<=600px){.bike-page .logo-text,.bike-page .fp-back span{display:none}.bp{padding:16px 0 48px}.bp-price span{font-size:32px}.bp-more{margin-top:44px}.bp-more-grid{gap:10px}.bp-mini-t{font-size:14px;padding:4px 10px 0}.bp-mini-p{padding:0 10px;font-size:13px}} .bike-page{background:var(--footer)}.nw{white-space:nowrap}@media (width<=600px){.bp-thumbs{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.bp-act{font-size:13px;letter-spacing:.08em}} .bp-crumbs{align-items:center} /* Video as the last slide of the photo slider (Oct 2026) */ .bm-nav,.bm-count,.bm-stage .badge,.bp-count,.bp-main .badge{z-index:3}.bm-vslide{position:absolute;inset:0;z-index:2;display:grid;place-items:center}.bm-stage.is-video img,.bp-main.is-video img{filter:brightness(.42)}.bm-play{display:grid;justify-items:center;gap:14px;background:none;border:0;color:var(--pearl);cursor:pointer;font-family:var(--font-head);font-weight:700;font-size:15px;letter-spacing:.16em;text-transform:uppercase;padding:12px}.bm-play i{width:80px;height:80px;border-radius:50%;background:var(--bronze);color:var(--pearl);display:grid;place-items:center;box-shadow:0 10px 28px rgba(0,0,0,.45),0 0 0 6px rgba(237,232,228,.18);transition:transform .25s ease-out,background-color .25s ease-out}.bm-play svg{width:34px;height:34px;margin-left:5px}.bm-play:hover i,.bm-play:focus-visible i{transform:scale(1.07);background:var(--bronze-dark)}.bm-vframe{position:absolute;inset:0;display:none;place-items:center;background:#000}.bm-vslide.playing .bm-vframe{display:grid}.bm-vslide.playing .bm-play{display:none}.bm-vframe iframe{display:block;width:100%;height:auto;max-height:100%;aspect-ratio:16/9;border:0}.bm-vframe.tall iframe{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:auto;height:min(100%,80vh);max-width:100%;aspect-ratio:9/16}.bm-vopen{position:absolute;left:12px;bottom:12px;z-index:3;background:rgba(28,22,18,.8);color:#fff;font-size:13px;font-weight:600;padding:4px 9px;border-radius:3px;text-decoration:none}.bm-vopen:hover{background:var(--bronze)}.bm-thumbs .th-vid,.bp-thumbs .th-vid{position:relative;background:var(--ink-2)}.bm-thumbs .th-vid::after,.bp-thumbs .th-vid::after{content:"";position:absolute;inset:0;background:rgba(28,22,18,.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%238D6613'/%3E%3Cpath d='M10 7.5v9l7-4.5z' fill='%23EDE8E4'/%3E%3C/svg%3E") center/26px no-repeat}@media (max-width:860px){.bm-stage.v-tall,.bp-main.v-tall{aspect-ratio:3/4;transition:aspect-ratio .3s}}@media (min-width:861px){.bm-gallery{position:sticky;top:0;align-self:start;height:calc(100vh - 48px)}} @media (width<=600px){.bp-thumbs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 18px)/4);overflow-x:auto;scrollbar-width:none}.bp-thumbs::-webkit-scrollbar{display:none}} /* Condition report photos: open from the report only (Oct 2026) */ .cond li.has-ph{display:grid;grid-template-columns:1fr auto;align-items:center;row-gap:8px}.cond-ph{grid-column:2;justify-self:end;display:flex;border-radius:6px;align-items:center;justify-content:flex-end;gap:10px;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:var(--bronze-dark);font-weight:600;font-size:13px;letter-spacing:.04em}.cond-ph img{width:56px;height:40px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}.cond-ph span{text-decoration:underline;text-underline-offset:3px}.cond-ph:hover span{color:var(--bronze)}.cond-lb{position:fixed;inset:0;z-index:700;background:rgba(12,9,7,.97);display:grid;place-items:center;padding:56px 16px 24px}.cond-lb figure{margin:0;display:grid;gap:12px;justify-items:center;max-width:min(960px,100%)}.cond-lb img{max-width:100%;max-height:calc(100vh - 140px);border-radius:10px;object-fit:contain}.cond-lb figcaption{color:var(--pearl);font-family:var(--font-head);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:15px;text-align:center}.cond-lb-x{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:0;background:var(--pearl);color:var(--ink);font-size:28px;line-height:1;cursor:pointer} /* Photo slider controls: outline arrows + progress line + 01 / 04 (Oct 2026) */ .bm-nav{width:44px;height:44px;padding:0;background:rgba(28,22,18,.28);border:1px solid rgba(237,232,228,.75);color:#fff;transition:background-color .25s ease-out,border-color .25s ease-out}@media (hover:hover){.bm-nav:hover{background:var(--bronze);border-color:var(--bronze)}}.bm-nav:focus-visible{background:var(--bronze);border-color:var(--bronze)}.bm-nav svg{display:block}.bm-track{position:absolute;left:16px;right:96px;bottom:22px;height:2px;background:rgba(237,232,228,.3);z-index:3;pointer-events:none}.bm-track i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--honey);transition:width .35s ease-out}.bm-count{bottom:12px;right:16px;padding:0;background:none;font-family:var(--font-head);font-weight:600;font-size:18px;letter-spacing:.14em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6)}.bm-count em{font-style:normal;color:rgba(237,232,228,.65)}.bm-gallery.single .bm-track,.bm-gallery.empty .bm-track{display:none}.bm-stage.is-video .bm-track{display:none} /* The Showroom: "Inside Wadi Jabal Jes" photo section (Oct 2026) */ .sr{margin:0 0 110px}.sr-head{display:grid;grid-template-columns:1fr minmax(0,420px);gap:40px;align-items:end;margin-bottom:40px}.sr-head h2{font-size:clamp(44px,6vw,76px);line-height:.92}.sr-head h2 em{font-style:normal;color:var(--bronze)}.sr-head .eyebrow{color:var(--bronze-dark)}.sr-sub{color:var(--text-soft);font-size:17px;line-height:1.6;padding-bottom:6px}.sr-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:12px}.sr-grid[data-n="1"]{grid-template-columns:1fr;grid-auto-rows:520px}.sr-grid[data-n="2"] .sr-tile{grid-column:span 2;grid-row:span 2}.sr-tile{position:relative;overflow:hidden;border:0;padding:0;border-radius:12px;background:var(--ink);cursor:zoom-in;display:block;width:100%;height:100%;isolation:isolate}.sr-main{grid-column:span 2;grid-row:span 2}.sr-grid[data-n="3"] .sr-tile:not(.sr-main){grid-column:span 2}.sr-grid[data-n="4"] .sr-tile:nth-child(4){grid-column:span 2}.sr-grid[data-n="6"] .sr-tile:nth-child(6){grid-column:span 4}.sr-grid[data-n="7"] .sr-tile:nth-child(n+6){grid-column:span 2}.sr-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease),filter .6s ease}.sr-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(12,9,7,.72));pointer-events:none;z-index:1}@media (hover:hover){.sr-tile:hover img{transform:scale(1.045)}}.sr-num{position:absolute;top:14px;left:16px;z-index:2;font-family:var(--font-head);font-weight:600;font-size:14px;letter-spacing:.2em;color:var(--honey);text-shadow:0 1px 8px rgba(0,0,0,.75)}.sr-tile::before{content:"";position:absolute;inset:0 0 auto;height:70px;background:linear-gradient(rgba(12,9,7,.45),transparent);z-index:1;pointer-events:none}.sr-cap{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;text-align:left;font-family:var(--font-head);font-weight:700;font-size:17px;letter-spacing:.08em;text-transform:uppercase;color:#fff}.sr-main .sr-cap{font-size:22px;left:24px;bottom:22px}.sr-main .sr-num{left:24px;top:22px}.sr-more{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:rgba(12,9,7,.6);font-family:var(--font-head);font-weight:800;font-size:44px;color:#fff}.sr-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line);flex-wrap:wrap}.sr-facts{display:flex;gap:34px;flex-wrap:wrap;color:var(--text-soft);font-size:15px}.sr-facts b{display:block;font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze-dark);margin-bottom:2px}.sr-dir{font-family:var(--font-head);font-weight:700;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--bronze);padding-bottom:4px}.sr-dir:hover{color:var(--bronze)}.sr-lb figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:20px;width:100%}.sr-lb figcaption em{font-style:normal;color:var(--honey);letter-spacing:.16em;font-size:14px}.sr-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid rgba(237,232,228,.7);background:rgba(28,22,18,.4);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:2}.sr-lb-nav.prev{left:16px}.sr-lb-nav.next{right:16px}@media (hover:hover){.sr-lb-nav:hover{background:var(--bronze);border-color:var(--bronze)}}.sr-lb.single .sr-lb-nav{display:none}@media (max-width:860px){.sr{margin-bottom:72px}.sr-head{grid-template-columns:1fr;gap:14px;margin-bottom:26px}.sr-grid{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:8px}.sr-main,.sr-grid[data-n="2"] .sr-tile{grid-column:span 2;grid-row:span 2}.sr-grid .sr-tile:not(.sr-main){grid-column:span 1!important;grid-row:span 1}.sr-grid[data-n="2"] .sr-tile{grid-column:span 2!important}.sr-grid[data-n="1"]{grid-auto-rows:280px;grid-template-columns:1fr}.sr-grid[data-n="3"] .sr-tile:not(.sr-main),.sr-grid[data-n="5"] .sr-tile:not(.sr-main),.sr-grid[data-n="7"] .sr-tile:not(.sr-main){grid-column:span 1!important}.sr-grid[data-n="4"] .sr-tile:nth-child(4),.sr-grid[data-n="6"] .sr-tile:nth-child(6){grid-column:span 2!important}.sr-cap{font-size:13px;left:12px;bottom:10px}.sr-num{font-size:12px;left:12px;top:10px}.sr-main .sr-cap{font-size:17px;left:16px;bottom:14px}.sr-main .sr-num{left:16px;top:14px}.sr-facts{gap:20px}.sr-lb-nav{width:42px;height:42px}.sr-lb-nav.prev{left:8px}.sr-lb-nav.next{right:8px}} /* Audit 26 Oct: readable chips/badges, bigger tap areas, even mini cards */ .bike-card .chip{font-size:10px}.bike-card .badge{font-size:10px}@media (max-width:600px){.bike-card .chip{font-size:10px!important}.bike-card .badge{font-size:10px!important}}.card-share::after{content:"";position:absolute;inset:-6px}.sr-dir{display:inline-block;padding:12px 0 6px}.bp-mini{align-content:start} /* Phone: WhatsApp icon only (Call/WhatsApp bar removed) */ .bp-wa{display:none!important} @media (max-width:768px){.mbar{display:none!important}.whatsapp-float{display:grid;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}.bp-wa{display:grid!important}body.modal-open .whatsapp-float,body.menu-open .whatsapp-float{opacity:0!important;pointer-events:none!important}}