/* Dark Velocity — SHH Keng Hwa Auto Co. */ /* Fonts are loaded from in each page head, not @import — see note in the page . Keeping them here would delay every font behind this file. */ :root { --bg: #050505; --bg-2: #0a0a0a; --bg-3: #111; --fg: #ffffff; --muted: rgba(255,255,255,0.5); --muted-2: rgba(255,255,255,0.6); --border: rgba(255,255,255,0.08); --gold: #D4A843; --gold-deep: #B8923A; --gold-bright: #F4D68C; --gold-dim: rgba(212,168,67,0.3); } * { box-sizing: border-box; margin: 0; padding: 0; } /* text-size-adjust stops iOS Safari inflating text on rotation — reachable when an iPhone user picks "Request Desktop Site" and gets this stylesheet. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--bg); color: var(--fg); font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-weight: 300; overflow-x: hidden; -webkit-font-smoothing: antialiased; line-height: 1.5; } h1, h2, h3, h4, h5, h6 { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; } a { color: inherit; text-decoration: none; } button { font: inherit; background: none; border: none; color: inherit; cursor: pointer; } img { max-width: 100%; display: block; } .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; } @media (min-width: 1024px) { .container { padding: 0 32px; } } /* Utility — gold gradient text */ .gold-gradient { background: linear-gradient(135deg, #D4A843 0%, #F4D68C 50%, #D4A843 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .gold-line { background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%); height: 1px; } .eyebrow { color: var(--gold); font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3em; } .glass-card { background: rgba(255,255,255,0.04); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); transition: border-color 0.5s, transform 0.5s; } .glass-card:hover { border-color: rgba(212,168,67,0.25); } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #0a0a0a; } ::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--gold-bright); } /* Fade-in reveal */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .reveal.in { opacity: 1; transform: none; } .reveal.from-left { transform: translateX(-40px); } .reveal.from-left.in { transform: none; } .reveal.from-right { transform: translateX(40px); } .reveal.from-right.in { transform: none; } /* ====================== NAVBAR ====================== */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background 0.4s, border 0.4s, backdrop-filter 0.4s; border-bottom: 1px solid transparent; } .nav.scrolled { background: rgba(0,0,0,0.8); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom-color: rgba(255,255,255,0.05); } .nav-inner { /* Full-width header: the logo lines up with the left page rail and the Visit Us button with the fixed chat button, instead of both being pulled inward by a 1280px centred container. The 28px matches the chat button's own inset. */ max-width: none; margin: 0; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; height: 80px; position: relative; } .nav-logo { display: flex; align-items: center; gap: 12px; } .nav-logo img { width: 40px; height: 40px; object-fit: contain; } .nav-logo-text { display: flex; flex-direction: column; line-height: 1.2; } .nav-logo-title { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.05em; transition: color 0.3s; } .nav-logo:hover .nav-logo-title { color: var(--gold); } .nav-logo-sub { font-size: 10px; color: rgba(255,255,255,0.6); letter-spacing: 0.2em; text-transform: uppercase; } .nav-links { display: none; align-items: center; gap: 32px; } .nav-links a { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.6); transition: color 0.3s; } .nav-links a:hover { color: var(--gold); } .nav-cta { display: none; align-items: center; gap: 16px; } .nav-phone { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.5); transition: color 0.3s; } .nav-phone:hover { color: var(--gold); } .nav-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; background: var(--gold); color: #000; font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; border-radius: 2px; transition: background 0.3s; } .nav-btn:hover { background: var(--gold-bright); } .nav-burger { color: rgba(255,255,255,0.7); } .nav-burger:hover { color: var(--gold); } @media (min-width: 1024px) { .nav-links { display: flex; position: absolute; left: 50%; transform: translateX(-50%); } .nav-cta { display: flex; } .nav-burger { display: none; } } .mobile-menu { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,0.95); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: 96px 24px 24px; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .mobile-menu.open { opacity: 1; pointer-events: auto; } .mobile-menu a { display: block; font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 22px; font-weight: 600; padding: 12px 0; color: rgba(255,255,255,0.8); } .mobile-menu a:hover { color: var(--gold); } /* ====================== HERO ====================== */ .hero { position: relative; min-height: 100vh; height: auto; } /* Clip the decorative layers, not the section that holds the text. */ .hero-canvas-wrap, .hero-overlay { overflow: hidden; } .hero-canvas-wrap { position: absolute; inset: 0; background: #000; } .hero-canvas { width: 100%; height: 100%; display: block; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.2) 40%, rgba(0,0,0,0.8)); z-index: 1; } .hero-content { position: relative; z-index: 2; box-sizing: border-box; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 24px; } /* Founding mark: the year set as an engraved figure, the branches on their own flanked line, the country a step quieter beneath them. */ .hero-badge { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0; border: 0; margin-bottom: 32px; animation: fadeUp 0.8s 0.3s both; } .hb-year { display: flex; align-items: baseline; gap: 10px; font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 37px; font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1; line-height: 0.9; letter-spacing: 0.01em; color: var(--gold); } .hb-year em { font-style: normal; text-transform: uppercase; font-size: 37px; color: inherit; } .hb-loc { display: flex; align-items: center; gap: 13px; font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-weight: 400; font-size: 13px; line-height: 1.55; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255,255,255,0.7); } .hb-loc::before, .hb-loc::after { content: ""; height: 1px; width: clamp(26px, 5vw, 56px); background: rgba(212,168,67,0.28); } .hb-country { margin-top: -12px; font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-weight: 400; font-size: 13px; text-transform: uppercase; letter-spacing: 0.28em; text-indent: 0.28em; color: rgba(255,255,255,0.7); } .hero-title { color: #fff; font-weight: 700; animation: fadeUp 0.8s 0.5s both; } .hero-title span { display: block; font-size: clamp(56px, 12vw, 160px); line-height: 0.95; letter-spacing: -0.03em; } .hero-sub { margin-top: 24px; max-width: 640px; color: rgba(255,255,255,0.6); font-size: clamp(16px, 1.6vw, 20px); font-weight: 300; line-height: 1.55; animation: fadeUp 0.8s 0.7s both; } .hero-ctas { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; animation: fadeUp 0.8s 0.9s both; } .btn-primary, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; border-radius: 2px; text-align: center; transition: all 0.3s; } .btn-primary { background: var(--gold); color: #000; } .btn-primary:hover { background: var(--gold-bright); } .btn-ghost { border: 1px solid rgba(255,255,255,0.2); color: #fff; } .btn-ghost:hover { border-color: var(--gold); color: var(--gold); } .hero-chevron { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); color: rgba(212,168,67,0.6); animation: bounce 2s ease-in-out infinite; } .hero-side { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); z-index: 2; display: none; flex-direction: column; align-items: center; gap: 12px; } .hero-side-line { width: 1px; height: 64px; } .hero-side-line.t { background: linear-gradient(to bottom, transparent, rgba(212,168,67,0.4)); } .hero-side-line.b { background: linear-gradient(to bottom, rgba(212,168,67,0.4), transparent); } .hero-side-text { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 10px; color: rgba(212,168,67,0.5); letter-spacing: 0.3em; text-transform: uppercase; writing-mode: vertical-rl; } @media (min-width: 1280px) { .hero-side { display: flex; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } @keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } } /* ====================== STATS ====================== */ .stats { position: relative; z-index: 10; margin-top: -1px; background: linear-gradient(to right, #0a0a0a, #111, #0a0a0a); border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); } .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; padding: 56px 0; } @media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 64px 0; } } .stat { text-align: center; } .stat-number { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-weight: 700; font-size: clamp(36px, 4vw, 56px); line-height: 1; margin-bottom: 10px; font-variant-numeric: tabular-nums; } .stat-label { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 12px; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.15em; } /* ====================== SECTIONS ====================== */ section[data-section] { position: relative; padding: 96px 0; overflow: hidden; } @media (min-width: 768px) { section[data-section] { padding: 144px 0; } } .section-head { margin-bottom: 64px; } .section-head.center { text-align: center; } .section-head h2 { font-size: clamp(36px, 5vw, 64px); color: #fff; margin-top: 16px; } .section-head p { margin-top: 16px; color: rgba(255,255,255,0.6); font-size: clamp(16px, 1.3vw, 18px); max-width: 640px; } .section-head.center p { margin-left: auto; margin-right: auto; } .section-head .line { margin-top: 24px; width: 96px; height: 1px; } .section-head.center .line { margin-left: auto; margin-right: auto; } .section-head .line.short { width: 64px; margin-left: 0; } .section-head.center .line.short { margin-left: auto; margin-right: auto; } /* Heritage */ .heritage { background: linear-gradient(to bottom, #0a0a0a, #080808, #0a0a0a); } .heritage-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; } @media (min-width: 1024px) { .heritage-grid { grid-template-columns: 1fr 1fr; gap: 80px; } } .heritage-img-wrap { position: relative; } .heritage-img { position: relative; overflow: hidden; border-radius: 2px; } .heritage-img img { width: 100%; height: 400px; object-fit: cover; } @media (min-width: 768px) { .heritage-img img { height: 500px; } } .heritage-img-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 50%); } .heritage-year { position: absolute; bottom: 24px; left: 24px; font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-weight: 700; font-size: clamp(72px, 10vw, 128px); color: rgba(255,255,255,0.1); line-height: 1; } .heritage-border { position: absolute; right: -12px; bottom: -12px; width: 100%; height: 100%; border: 1px solid rgba(212,168,67,0.2); z-index: -1; border-radius: 2px; } .heritage-text h2 { font-size: clamp(36px, 5vw, 64px); color: #fff; } .heritage-text p { margin-top: 20px; color: rgba(255,255,255,0.6); font-size: clamp(15px, 1.2vw, 17px); font-weight: 300; line-height: 1.7; } .heritage-text p strong { color: rgba(255,255,255,0.85); font-weight: 400; } .heritage-quote { margin-top: 32px; border-left: 2px solid rgba(212,168,67,0.4); padding-left: 24px; } .heritage-quote p { color: rgba(255,255,255,0.5); font-style: italic; margin: 0; } .heritage-quote .attr { margin-top: 8px; color: var(--gold); font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 13px; } /* Greatest callout */ .greatest { position: relative; padding: 128px 0; text-align: center; } @media (min-width: 768px) { .greatest { padding: 176px 0; } } .greatest-bg { position: absolute; inset: 0; } .greatest-bg img { width: 100%; height: 100%; object-fit: cover; } .greatest-bg::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.75); } .greatest-top, .greatest-bottom { position: absolute; left: 0; right: 0; height: 1px; opacity: 0.3; } .greatest-top { top: 0; } .greatest-bottom { bottom: 0; } .greatest-content { position: relative; z-index: 2; max-width: 960px; margin: 0 auto; padding: 0 24px; } .greatest h2 { font-size: clamp(40px, 8vw, 128px); margin-top: 24px; line-height: 1.05; } .greatest-sub { margin: 32px auto 0; max-width: 640px; color: rgba(255,255,255,0.6); font-size: clamp(16px, 1.4vw, 20px); font-weight: 300; line-height: 1.6; } .greatest-metrics { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: center; gap: 48px; } .greatest-metric .v { display: block; font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-weight: 700; font-size: clamp(28px, 3vw, 40px); color: var(--gold); } .greatest-metric .l { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 11px; color: rgba(255,255,255,0.6); letter-spacing: 0.15em; text-transform: uppercase; } /* Achievements */ #achievements { position: relative; overflow: hidden; background: radial-gradient(ellipse 60% 50% at 88% 4%, rgba(212,168,67,0.12), transparent 60%), radial-gradient(ellipse 55% 45% at 8% 96%, rgba(212,168,67,0.08), transparent 60%), linear-gradient(to bottom, #060504, #0c0a06 48%, #060504); } .achievements-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .achievements-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.10; filter: saturate(1.1) contrast(1.05); } .achievements-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(8,7,5,0.45), rgba(8,7,5,0.86) 80%), linear-gradient(to bottom, rgba(8,7,5,0.8), rgba(8,7,5,0.5) 40%, rgba(8,7,5,0.92)); } /* faint gold grid texture for depth */ .achievements-bg::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(212,168,67,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(212,168,67,0.04) 1px, transparent 1px); background-size: 70px 70px; -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 45%, #000 25%, transparent 80%); mask-image: radial-gradient(ellipse 80% 75% at 50% 45%, #000 25%, transparent 80%); opacity: 0.5; } #achievements > .container { position: relative; z-index: 1; } /* Lighten the Achievements section eyebrow + heading for better contrast */ #achievements .eyebrow { color: #E9BE5A; } #achievements .section-head h2 { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,0.8), 0 0 60px rgba(212,168,67,0.15); } #achievements .section-head p { color: rgba(255,255,255,0.75); } /* ===== Achievements showcase: left selector + right preview ===== */ .ach-showcase { display: grid; grid-template-columns: 1fr; gap: 26px; } @media (min-width: 900px) { .ach-showcase { grid-template-columns: 0.9fr 1.1fr; gap: 44px; align-items: start; } } .ach-list { display: flex; flex-direction: column; } .ach-item { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; position: relative; padding: 18px 8px; border: none; border-bottom: 1px solid rgba(255,255,255,0.09); background: none; cursor: pointer; color: #fff; transition: padding-left 0.4s cubic-bezier(.2,.8,.2,1); } .ach-progress { display: none; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); box-shadow: 0 0 8px rgba(212,168,67,0.5); } .ach-item.active .ach-progress { animation: achProg 5600ms linear both; } .ach-showcase:hover .ach-item.active .ach-progress { animation-play-state: paused; } @keyframes achProg { from { width: 0; } to { width: 100%; } } .ach-list .ach-item:first-child { border-top: 1px solid rgba(255,255,255,0.09); } .ach-item:hover, .ach-item.active { padding-left: 14px; } .ach-item-icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(212,168,67,0.12); color: var(--gold); transition: background 0.3s, color 0.3s; } .ach-item-icon svg { width: 20px; height: 20px; } .ach-item.active .ach-item-icon { background: var(--gold); color: #000; } .ach-item-text { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; } .ach-item-title { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: clamp(15px, 1.5vw, 18px); font-weight: 600; color: rgba(255,255,255,0.68); line-height: 1.2; transition: color 0.3s; } .ach-item:hover .ach-item-title, .ach-item.active .ach-item-title { color: #fff; } .ach-item-badge { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); border: 1px solid rgba(212,168,67,0.4); padding: 2px 7px; border-radius: 2px; flex-shrink: 0; } .ach-item-arrow { flex-shrink: 0; color: rgba(255,255,255,0.55); transform: translateX(-6px); opacity: 0; transition: transform 0.4s cubic-bezier(.2,.8,.2,1), opacity 0.4s, color 0.3s; } .ach-item:hover .ach-item-arrow, .ach-item.active .ach-item-arrow { opacity: 1; transform: none; color: var(--gold); } .ach-preview { display: flex; flex-direction: column; gap: 18px; } .ach-stage { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; border: 1px solid rgba(212,168,67,0.2); background: #0d0b08; cursor: pointer; box-shadow: 0 30px 64px -26px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.02); } .ach-stage-img { width: 100%; height: 100%; object-fit: cover; display: block; animation: achKen 8.5s ease-out both; } .ach-stage.fit-contain .ach-stage-img { object-fit: contain; animation: achFadeImg 0.7s ease both; } @keyframes achKen { 0% { opacity: 0; transform: scale(1.015); } 16% { opacity: 1; } 100% { opacity: 1; transform: scale(1.05); } } @keyframes achFadeImg { from { opacity: 0; } to { opacity: 1; } } .ach-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70px; height: 70px; border-radius: 50%; background: rgba(0,0,0,0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1.5px solid rgba(212,168,67,0.8); color: #D4A843; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: transform 0.35s cubic-bezier(.2,.8,.2,1), background 0.35s, color 0.35s; } .ach-stage:hover .ach-play { transform: translate(-50%, -50%) scale(1.08); background: rgba(212,168,67,0.95); color: #000; } .ach-play svg { margin-left: 3px; } .ach-expand { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; color: #fff; transition: background 0.3s, color 0.3s; } .ach-stage:hover .ach-expand { background: var(--gold); color: #000; } .ach-caption { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .ach-caption.swap { animation: achFade 0.55s ease both; } @keyframes achFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .ach-caption h3 { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; color: #fff; margin-top: 4px; } .ach-caption p { color: rgba(255,255,255,0.62); font-size: 14.5px; line-height: 1.6; max-width: 520px; } /* ===== Interactive Bento Gallery (Achievements) ===== */ .bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 140px; grid-auto-flow: dense; gap: 14px; max-width: 1180px; margin: 0 auto; } @media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; } } @media (max-width: 520px) { .bento { grid-template-columns: 1fr; grid-auto-rows: 220px; } } .bento-card { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid rgba(255,255,255,0.06); cursor: pointer; background: #111; transition: transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.4s, box-shadow 0.4s; } .bento-card:hover { transform: translateY(-4px) scale(1.01); border-color: rgba(212,168,67,0.35); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,168,67,0.1); } /* Spans tuned to media aspect ratios + clean packing. 6-col grid: Rows 1-3: span-big (4×3, landscape) | span-tall (2×3, portrait workshop) Rows 4-5: span-square (4×2, banner) | span-wide (2×2, ~square hks) Rows 6-7: span-half (3×2) | span-half (3×2) */ .bento-card.span-big { grid-column: span 4; grid-row: span 3; } .bento-card.span-square { grid-column: span 4; grid-row: span 2; } .bento-card.span-tall { grid-column: span 2; grid-row: span 3; } .bento-card.span-wide { grid-column: span 2; grid-row: span 2; } .bento-card.span-half { grid-column: span 3; grid-row: span 2; } @media (max-width: 900px) { .bento-card.span-tall, .bento-card.span-square, .bento-card.span-wide, .bento-card.span-big, .bento-card.span-half { grid-column: span 2; grid-row: span 2; } } @media (max-width: 520px) { .bento-card.span-tall, .bento-card.span-square, .bento-card.span-wide, .bento-card.span-big, .bento-card.span-half { grid-column: span 1; grid-row: span 2; } } .bento-media { position: absolute; inset: 0; width: 100%; height: 100%; background: #0a0a0a; } .bento-media img, .bento-media video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s; } .bento-card:hover .bento-media img, .bento-card:hover .bento-media video { transform: scale(1.06); } /* Show full image (no crop) for cards flagged with fit-contain */ .bento-card.fit-contain .bento-media { background: #fff; } .bento-card.fit-contain .bento-media img { object-fit: contain; } .bento-card.fit-contain .bento-overlay { background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 30%, transparent 55%); } .bento-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px 18px; background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.15) 70%, transparent); z-index: 2; } .bento-icon { position: absolute; top: 14px; left: 14px; width: 38px; height: 38px; border-radius: 8px; background: rgba(212,168,67,0.95); color: #000; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.4); z-index: 3; } .bento-icon svg { width: 18px; height: 18px; } .bento-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; border-radius: 50%; background: rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1.5px solid rgba(212,168,67,0.8); color: #D4A843; display: flex; align-items: center; justify-content: center; z-index: 3; pointer-events: none; box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 0 0 rgba(212,168,67,0.35); transition: transform 0.35s cubic-bezier(.2,.8,.2,1), background 0.35s; animation: pulseGlow 2.4s ease-in-out infinite; } .bento-play svg { margin-left: 3px; } .bento-card:hover .bento-play { transform: translate(-50%, -50%) scale(1.08); background: rgba(212,168,67,0.95); color: #000; } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 0 0 rgba(212,168,67,0.35); } 50% { box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 0 12px rgba(212,168,67,0); } } .bento-title { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.25; margin-bottom: 4px; text-shadow: 0 1px 8px rgba(0,0,0,0.6); } .bento-desc { font-size: 12px; color: rgba(255,255,255,0.75); line-height: 1.45; font-weight: 300; opacity: 0; max-height: 0; transform: translateY(6px); transition: opacity 0.35s, max-height 0.35s, transform 0.35s; } .bento-card:hover .bento-desc { opacity: 1; max-height: 80px; transform: none; } .bento-expand { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.15); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0; transition: opacity 0.3s, background 0.3s; z-index: 3; } .bento-card:hover .bento-expand { opacity: 1; } .bento-expand:hover { background: var(--gold); color: #000; } /* Lightbox modal */ .lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.92); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s, visibility 0s linear 0.3s; } .lightbox.open { opacity: 1; visibility: visible; pointer-events: auto; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: opacity 0.3s, visibility 0s; } .lightbox-content { position: relative; width: 100%; max-width: 960px; max-height: 82vh; border-radius: 12px; overflow: hidden; background: #0a0a0a; border: 1px solid rgba(212,168,67,0.2); transform: scale(0.96); transition: transform 0.35s cubic-bezier(.2,.8,.2,1); } .lightbox.open .lightbox-content { transform: scale(1); } .lightbox-media { width: 100%; max-height: 70vh; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; } .lightbox-media img, .lightbox-media video { max-width: 100%; max-height: 70vh; width: auto; height: auto; object-fit: contain; display: block; } /* Fallback aspect ratio for empty media container */ .lightbox-media:empty { aspect-ratio: 16/10; } .lightbox-caption { padding: 20px 28px 24px; border-top: 1px solid rgba(255,255,255,0.05); } .lightbox-caption .eyebrow { font-size: 10px; } .lightbox-caption h3 { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 24px; font-weight: 700; color: #fff; margin: 8px 0 8px; } .lightbox-caption p { color: rgba(255,255,255,0.65); font-size: 15px; line-height: 1.6; font-weight: 300; } .lightbox-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 3; transition: background 0.3s; } .lightbox-close:hover { background: var(--gold); color: #000; } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,0.55); border: 1px solid rgba(212,168,67,0.45); color: var(--gold); display: flex; align-items: center; justify-content: center; z-index: 3; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background 0.3s, color 0.3s, transform 0.15s; } .lightbox-nav.prev { left: 12px; } .lightbox-nav.next { right: 12px; } .lightbox-nav:hover { background: var(--gold); color: #000; } .lightbox-nav:active { transform: translateY(-50%) scale(0.9); } .lightbox-dock { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); display: flex; gap: 6px; padding: 8px 12px; background: rgba(212,168,67,0.15); border: 1px solid rgba(212,168,67,0.3); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 14px; z-index: 101; } .lightbox-thumb { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; cursor: pointer; transition: transform 0.25s, border-color 0.25s; flex-shrink: 0; background: #222; } .lightbox-thumb:hover { transform: translateY(-3px); } .lightbox-thumb.active { border-color: #fff; transform: scale(1.15) translateY(-4px); } .lightbox-thumb img, .lightbox-thumb video { width: 100%; height: 100%; object-fit: cover; } /* Services */ .services { background: #060606; } /* ===== Branches carousel (Gallery4-style) ===== */ .branches-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; } .branches-head .section-head { margin-bottom: 0; } .branch-nav { display: none; gap: 10px; flex-shrink: 0; } @media (min-width: 768px) { .branch-nav { display: flex; } } .branch-arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.03); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s; } .branch-arrow:hover { background: var(--gold); border-color: var(--gold); color: #000; } .branch-arrow:disabled { opacity: 0.3; cursor: default; pointer-events: none; } .branch-carousel { width: 100%; overflow: hidden; } .branch-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 8px max(24px, calc(50vw - 700px)) 16px; cursor: grab; } .branch-track.dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; } .branch-track::-webkit-scrollbar { display: none; } .br-slide { position: relative; flex: 0 0 300px; height: 430px; border-radius: 16px; overflow: hidden; scroll-snap-align: start; cursor: pointer; border: 1px solid rgba(255,255,255,0.07); background: #0d0d0d; transition: transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.4s, box-shadow 0.4s; } @media (min-width: 1024px) { .br-slide { flex-basis: 360px; height: 470px; } } .br-slide:hover { border-color: rgba(212,168,67,0.4); box-shadow: 0 28px 56px -22px rgba(0,0,0,0.8); } .branch-card-img { position: absolute; inset: 0; } .branch-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.2,.8,.2,1); } .br-slide:hover .branch-card-img img { transform: scale(1.06); } .branch-card-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,5,5,0.9) 2%, rgba(5,5,5,0.28) 34%, transparent 58%); } .branch-card-body { position: absolute; inset-inline: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 26px 24px 24px; z-index: 2; }.branch-card-badge { display: inline-flex; align-items: center; gap: 7px; font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); background: rgba(8,8,8,0.65); border: 1px solid rgba(212,168,67,0.4); padding: 5px 11px; border-radius: 2px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .branch-card-badge svg { width: 13px; height: 13px; } .branch-card-body h3 { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 22px; font-weight: 700; color: #fff; line-height: 1.15; margin-top: 2px; } .branch-card-body p { color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .branch-card-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold); } .branch-card-more svg { transition: transform 0.3s; } .br-slide:hover .branch-card-more svg { transform: translateX(4px); } .branch-dots { display: flex; justify-content: center; gap: 9px; margin-top: 28px; } .branch-dot { width: 8px; height: 8px; border-radius: 50%; border: none; cursor: pointer; background: rgba(212,168,67,0.25); transition: background 0.3s, transform 0.3s; } .branch-dot.active { background: var(--gold); transform: scale(1.3); } /* Branch detail modal */ .branch-modal { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s, visibility 0s linear 0.3s; } .branch-modal.open { opacity: 1; visibility: visible; pointer-events: auto; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: opacity 0.3s, visibility 0s; } .branch-modal-card { position: relative; width: 100%; max-width: 1000px; max-height: 90vh; display: flex; flex-direction: column; align-items: stretch; overflow: hidden; background: #0b0b0b; border: 1px solid rgba(212,168,67,0.2); border-radius: 16px; transform: scale(0.96); transition: transform 0.35s cubic-bezier(.2,.8,.2,1); } @media (min-width: 760px) { .branch-modal-card { flex-direction: row; } } .branch-modal.open .branch-modal-card { transform: scale(1); } .branch-modal-media { position: relative; width: 100%; flex-shrink: 0; height: 240px; overflow: hidden; background: #050505; } @media (min-width: 760px) { .branch-modal-media { width: 42%; height: auto; } } .branch-modal-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .branch-modal-body { width: 100%; overflow-y: auto; padding: 34px 38px; display: flex; flex-direction: column; justify-content: center; scrollbar-width: none; } .branch-modal-body::-webkit-scrollbar { display: none; } @media (min-width: 760px) { .branch-modal-body { width: 58%; } } .branch-modal-badge { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); background: rgba(212,168,67,0.1); border: 1px solid rgba(212,168,67,0.35); padding: 6px 14px; border-radius: 999px; } .branch-modal-badge svg { width: 14px; height: 14px; } .branch-modal-body h3 { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: clamp(24px, 3vw, 32px); font-weight: 700; color: #fff; margin: 16px 0 0; } .branch-modal-body > p { color: rgba(255,255,255,0.65); font-size: 15px; line-height: 1.75; margin-top: 14px; } .branch-modal-features { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; } @media (min-width: 640px) { .branch-modal-features { grid-template-columns: repeat(3, 1fr); } } .branch-modal-feature { display: flex; align-items: flex-start; gap: 9px; color: rgba(255,255,255,0.72); font-size: 14px; line-height: 1.4; } .branch-modal-feature::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex-shrink: 0; margin-top: 6px; } /* Branch modal — merged contact block (Visit Us folded in) */ .bm-contact { margin-top: 30px; padding: 28px 30px; border-radius: 16px; background: radial-gradient(ellipse 120% 80% at 0% 0%, rgba(212,168,67,0.12), transparent 55%), rgba(255,255,255,0.022); border: 1px solid rgba(212,168,67,0.22); } .bm-contact-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; } .bm-contact-kicker { display: inline-flex; align-items: center; gap: 10px; font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); } .bm-contact-kicker svg { width: 18px; height: 18px; } .bm-contact-head::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(212,168,67,0.4), transparent); } .bm-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 36px; } .bm-crow:first-child { grid-column: 1 / -1; } .bm-crow { display: flex; gap: 12px; align-items: flex-start; } .bm-crow svg { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; margin-top: 2px; } .bm-ccol { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .bm-crow span, .bm-crow a { color: rgba(255,255,255,0.72); font-size: 14.5px; line-height: 1.55; } .bm-crow a { transition: color 0.25s; } .bm-crow a:hover { color: var(--gold); } .bm-dir { display: inline-flex; align-items: center; gap: 6px; color: var(--gold) !important; font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 12.5px; font-weight: 600; margin-top: 3px; } .bm-contact-actions { display: flex; gap: 14px; margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.07); flex-wrap: wrap; } .bm-cbtn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; padding: 0 22px; border-radius: 4px; font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; transition: all 0.25s; } .bm-cbtn svg { width: 16px; height: 16px; } .bm-wa { background: #25D366; color: #fff; flex: 1; min-width: 180px; } .bm-wa:hover { background: #1fb955; } .bm-call { border: 1px solid rgba(212,168,67,0.5); color: var(--gold); } .bm-call:hover { background: var(--gold); color: #000; } .branches-note { text-align: center; color: rgba(255,255,255,0.5); font-size: 14px; line-height: 1.6; max-width: 520px; margin: 28px auto 0; } /* ===== Our Branches — showroom layout (Option C) ===== */ .vcard-kick { display:inline-flex; align-items:center; gap:10px; font-family:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; } .vcard-kick svg { width:17px; height:17px; } .vrow { display:flex; gap:13px; align-items:flex-start; margin-bottom:13px; } .vrow svg { width:18px; height:18px; color:var(--gold); flex-shrink:0; margin-top:2px; } .vrow .vcol { display:flex; flex-direction:column; gap:3px; } .vrow span, .vrow a { color: rgba(255,255,255,.74); font-size:14.5px; line-height:1.55; } .vrow a:hover { color: var(--gold); } .vdir { color:var(--gold)!important; font-family:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; font-size:13px; font-weight:600; display:inline-flex; gap:6px; align-items:center; } .vacts { display:flex; gap:12px; margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); flex-wrap:wrap; } .vbtn { display:inline-flex; align-items:center; justify-content:center; gap:9px; height:46px; padding:0 22px; border-radius:4px; font-family:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; font-weight:600; font-size:13px; } .vbtn svg{width:16px;height:16px;} .vwa { background:#25D366; color:#fff; flex:1; min-width:170px; } .vcall { border:1px solid rgba(212,168,67,.5); color:var(--gold); } .vcall:hover{ background:var(--gold); color:#000; } section#services.services .section-head { margin-bottom: 32px; } section#services.services { padding-top: 80px; padding-bottom: 80px; scroll-margin-top: 72px; } .mC2 { display:grid; grid-template-columns:1fr; gap:16px; margin-top:6px; } @media (min-width:920px){ .mC2{ grid-template-columns:1.35fr 1fr; align-items:stretch; } } .mC2-feature { position:relative; border-radius:18px; overflow:hidden; min-height:330px; border:1px solid rgba(255,255,255,.08); } .mC2-feature img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .35s; } .mC2-feature::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(6,6,5,.92) 4%, rgba(6,6,5,.12) 50%, transparent 78%); } .mC2-feature-cap { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:26px 30px; } .mC2-badge { display:inline-flex; align-items:center; gap:8px; font-family:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); border:1px solid rgba(212,168,67,.5); background:rgba(8,8,8,.5); padding:6px 13px; border-radius:3px; -webkit-backdrop-filter: blur(6px); backdrop-filter:blur(6px); } .mC2-feature-cap h3 { font-family:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; font-size:clamp(24px,3vw,36px); letter-spacing:-.025em; margin-top:12px; color:#fff; } .mC2-side { display:flex; flex-direction:column; gap:14px; } .mC2-detail { background: radial-gradient(ellipse 120% 80% at 0% 0%, rgba(212,168,67,.1), transparent 55%), rgba(255,255,255,.025); border:1px solid rgba(212,168,67,.22); border-radius:16px; padding:20px 24px; } .mC2-thumbs { display:grid; grid-template-columns:repeat(2,1fr); gap:13px; margin:0 0 18px; } .mC2 { overflow: hidden; max-height: 1600px; opacity: 1; transform: translateY(0); transition: max-height 0.55s cubic-bezier(.2,.8,.2,1), opacity 0.45s ease, transform 0.55s cubic-bezier(.2,.8,.2,1), margin 0.45s ease; } .mC2.collapsed { max-height: 0; opacity: 0; transform: translateY(-12px); margin: 0; pointer-events: none; } .mC2-prompt { text-align:center; color: rgba(255,255,255,0.6); font-family:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; font-size:clamp(16px, 1.3vw, 18px); letter-spacing:0.02em; padding: 8px 0 4px; } @media (min-width:760px){ .mC2-thumbs{ grid-template-columns:repeat(4,1fr); } } .mC2-thumb { position:relative; aspect-ratio:1/1; height:auto; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.08); cursor:pointer; transition:border-color .3s, transform .3s; display:flex; align-items:flex-end; justify-content:flex-start; } .mC2-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s; } .mC2-thumb::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.85) 5%, rgba(0,0,0,.2) 45%, transparent 75%); } .mC2-thumb span{ position:relative; z-index:2; text-align:left; padding:0 16px 16px; font-family:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; font-size:18px; font-weight:700; letter-spacing:-.01em; color:#fff; line-height:1.15; text-shadow:0 2px 10px rgba(0,0,0,.85); } .mC2-thumb:hover{ transform:translateY(-3px); border-color:rgba(212,168,67,.4); } .mC2-thumb:hover img{ transform:scale(1.06); } .mC2-thumb.active{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset; } .mC2-services { flex:1; background: radial-gradient(ellipse 120% 90% at 100% 0%, rgba(212,168,67,.14), transparent 60%), rgba(255,255,255,.03); border:1px solid rgba(212,168,67,.2); border-radius:16px; padding:20px 24px; } .mC2-svc-kick { display:inline-flex; align-items:center; gap:9px; font-family:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; } .mC2-svc-desc { color:rgba(255,255,255,.6); font-size:13.5px; line-height:1.55; margin-bottom:14px; } .mC2-feats { display:grid; grid-template-columns:1fr 1fr; gap:11px 18px; } .mC2-feat { display:flex; gap:9px; align-items:flex-start; color:rgba(255,255,255,.74); font-size:13.5px; line-height:1.4; } .mC2-feat::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--gold); flex-shrink:0; margin-top:6px; } .branch-modal-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; transition: background 0.3s, color 0.3s; } .branch-modal-close:hover { background: var(--gold); color: #000; } .branch-modal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,0.55); border: 1px solid rgba(212,168,67,0.45); color: var(--gold); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background 0.3s, color 0.3s, transform 0.15s; } .branch-modal-nav.prev { left: 12px; } .branch-modal-nav.next { right: 12px; } .branch-modal-nav:hover { background: var(--gold); color: #000; } .branch-modal-nav:active { transform: translateY(-50%) scale(0.9); } @media (max-width: 600px) { .br-slide { flex-basis: 78vw; height: 400px; } .branch-track { padding: 8px 18px 16px; } .branch-modal-features { grid-template-columns: 1fr 1fr; } } /* ===================================================== OUR BRANCHES BACKGROUND — faint themed photo wash (matches the Achievements treatment, workshop imagery) ===================================================== */ section#services.services { position: relative; background: linear-gradient(to bottom, #060606, #080806 50%, #060606); overflow: hidden; } section#services.services::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url('assets/cdn/modern-workshop-XM7tCNFV5kTDdD36tfpzfb.png') center/cover no-repeat; opacity: 0.07; } section#services.services::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 65% 50% at 85% 8%, rgba(212,168,67,0.12), transparent 60%), linear-gradient(to bottom, rgba(6,6,6,0.86), rgba(6,6,6,0.7) 45%, rgba(6,6,6,0.94)); } section#services.services .container { position: relative; z-index: 1; } .service-block { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; margin-bottom: 96px; } @media (min-width: 1024px) { .service-block { grid-template-columns: 1fr 1fr; gap: 64px; margin-bottom: 144px; } .service-block.rev .service-img { order: 2; } .service-block.rev .service-text { order: 1; } } .service-block:last-child { margin-bottom: 0; } .service-img { position: relative; overflow: hidden; border-radius: 2px; } .service-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; filter: blur(26px) brightness(0.5); transform: scale(1.15); } .service-img img { position: relative; z-index: 1; width: 100%; height: 350px; object-fit: cover; transition: transform 0.7s; } .service-img.fit-contain img { object-fit: cover; height: 100%; } .service-img.fit-contain { aspect-ratio: 4 / 3; } .service-img.fit-contain img, .service-img.fit-contain .service-bg { height: 100%; } @media (min-width: 768px) { .service-img.fit-contain { height: auto; } .service-img.fit-contain img { height: 100%; } } @media (min-width: 768px) { .service-img img { height: 450px; } } .service-img:hover img { transform: scale(1.05); } .service-img.fit-contain:hover img { transform: scale(1.02); } .service-img::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,0.5), transparent 50%); pointer-events: none; } .service-badge { position: absolute; top: 24px; left: 24px; z-index: 2; padding: 6px 12px; background: var(--gold); color: #000; font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; border-radius: 2px; display: flex; align-items: center; gap: 8px; } .service-text h3 { font-size: clamp(28px, 3vw, 40px); color: #fff; margin-bottom: 20px; } .service-text p { color: rgba(255,255,255,0.5); font-size: clamp(15px, 1.1vw, 17px); font-weight: 300; line-height: 1.7; } .service-features { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .service-feature { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.6); font-size: 14px; } .service-feature::before { content: ''; width: 5px; height: 5px; background: var(--gold); border-radius: 50%; flex-shrink: 0; } /* Timeline */ .timeline { background: linear-gradient(to bottom, #060606, #0a0a0a, #060606); } /* ===== 21st.dev vertical accordion (desktop horizontal) ===== */ .vacc-pc { display: flex; gap: 10px; height: 460px; max-width: 1180px; margin: 0 auto; } .vpanel-pc { position: relative; flex: 1 1 0; min-width: 0; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); background-size: cover; background-position: center; cursor: pointer; transition: flex-grow 0.4s cubic-bezier(.22,.61,.36,1); } .vpanel-pc.open { flex-grow: 7; } .vpanel-pc-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(5,5,5,0.6), rgba(5,5,5,0.55)); transition: background 0.35s; } .vpanel-pc.open .vpanel-pc-scrim { background: linear-gradient(to top, rgba(5,5,5,0.92) 4%, rgba(5,5,5,0.25) 55%, rgba(5,5,5,0.5)); } .vpanel-pc-tab { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 0; transition: opacity 0.3s; } .vpanel-pc.open .vpanel-pc-tab { opacity: 0; pointer-events: none; } .vpanel-pc-tabyear { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-weight: 700; font-size: 16px; color: var(--gold); letter-spacing: 0.02em; white-space: nowrap; text-shadow: 0 2px 10px rgba(0,0,0,0.6); } .vpanel-pc-vtitle { writing-mode: vertical-rl; transform: rotate(180deg); font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-weight: 600; font-size: 18px; color: #fff; letter-spacing: 0.02em; white-space: nowrap; margin: auto 0; text-shadow: 0 2px 12px rgba(0,0,0,0.6); } .vpanel-pc-icon { width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0; background: linear-gradient(135deg, var(--gold-bright), var(--gold) 60%, #B8923A); color: #1a1206; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px -6px rgba(0,0,0,0.6); } .vpanel-pc-icon svg { width: 20px; height: 20px; } .vpanel-pc-content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 34px; opacity: 0; transition: opacity 0.3s 0.06s; } .vpanel-pc.open .vpanel-pc-content { opacity: 1; } .vpanel-pc-bigyear { display: inline-flex; align-items: center; font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-weight: 700; font-size: 60px; line-height: 1; letter-spacing: -0.03em; color: var(--gold); -webkit-text-stroke: 0; } .vpanel-pc-content h3 { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 30px; font-weight: 700; color: #fff; margin: 12px 0 12px; letter-spacing: -0.02em; } .vpanel-pc-content p { color: rgba(255,255,255,0.78); font-size: 15.5px; line-height: 1.65; max-width: 540px; } @media (max-width: 760px) { .vacc-pc { flex-direction: column; height: auto; } .vpanel-pc { height: 90px; } .vpanel-pc.open { height: 380px; flex-grow: 1; } .vpanel-pc-vtitle { writing-mode: horizontal-tb; transform: none; margin: 0; } .vpanel-pc-tab { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 0 20px; align-items: center; } } .timeline-wrap { max-width: 960px; margin: 0 auto; position: relative; } .timeline-line { position: absolute; left: 24px; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, rgba(212,168,67,0.6), rgba(212,168,67,0.3), transparent); } @media (min-width: 768px) { .timeline-line { left: 50%; transform: translateX(-0.5px); } } .timeline-event { position: relative; display: flex; margin-bottom: 64px; } @media (min-width: 768px) { .timeline-event { margin-bottom: 96px; } .timeline-event.right { flex-direction: row-reverse; } } .timeline-dot { position: absolute; left: 24px; top: 24px; transform: translateX(-50%); z-index: 3; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 20px rgba(212,168,67,0.5); } .timeline-dot::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(212,168,67,0.3); animation: ping 2s ease-out infinite; } @media (min-width: 768px) { .timeline-dot { left: 50%; } } @keyframes ping { 0% { transform: scale(1); opacity: 1; } 75%, 100% { transform: scale(2); opacity: 0; } } .timeline-card { margin-left: 56px; width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.05); transition: border-color 0.5s; } @media (min-width: 768px) { .timeline-card { margin-left: 0; width: calc(50% - 40px); } .timeline-event:not(.right) .timeline-card { margin-right: auto; } .timeline-event.right .timeline-card { margin-left: auto; } } .timeline-card:hover { border-color: rgba(212,168,67,0.25); } .timeline-img-wrap { position: relative; height: 208px; overflow: hidden; } @media (min-width: 768px) { .timeline-img-wrap { height: 256px; } } .timeline-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; } .timeline-card:hover .timeline-img-wrap img { transform: scale(1.1); } .timeline-img-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.4) 50%, transparent); } .timeline-year { position: absolute; top: 16px; left: 16px; padding: 4px 12px; background: rgba(212,168,67,0.9); color: #000; font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; border-radius: 2px; } .timeline-title { position: absolute; bottom: 16px; left: 16px; right: 16px; font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: clamp(18px, 2vw, 24px); font-weight: 700; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.5); } .timeline-body { padding: 20px 24px; background: rgba(17,17,17,0.9); } .timeline-body p { color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.65; font-weight: 300; } .timeline-accent { margin-top: 16px; width: 48px; height: 1px; background: linear-gradient(to right, rgba(212,168,67,0.6), transparent); transition: width 0.5s; } .timeline-card:hover .timeline-accent { width: 80px; } /* Brands */ .brands { background: linear-gradient(to bottom, #111, #161616, #111); padding: 80px 0 112px; overflow: hidden; } .brands-head { text-align: center; margin-bottom: 56px; padding: 0 24px; } .brands-head h2 { font-size: clamp(28px, 3vw, 40px); margin-top: 16px; } .brands-head p:not(.brands-sub) { margin: 16px auto 0; max-width: 512px; color: rgba(255,255,255,0.5); font-size: clamp(14px, 1vw, 16px); } .marquee { position: relative; margin-bottom: 16px; overflow: hidden; } .marquee::before, .marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; } @media (min-width: 768px) { .marquee::before, .marquee::after { width: 128px; } } .marquee::before { left: 0; background: linear-gradient(to right, #131313, transparent); } .marquee::after { right: 0; background: linear-gradient(to left, #131313, transparent); } .marquee-track { display: flex; width: fit-content; } .marquee-track.left { animation: marquee-left 110s linear infinite; } .marquee-track.right { animation: marquee-right 100s linear infinite; } @keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } } .brand { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 24px; flex-shrink: 0; } @media (min-width: 768px) { .brand { padding: 26px 44px; } } .brand-logo { width: 80px; height: 80px; background: rgba(255,255,255,0.95); padding: 12px; border-radius: 8px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.2); transition: transform 0.5s, box-shadow 0.5s; } @media (min-width: 768px) { .brand-logo { width: 112px; height: 112px; } } .brand:hover .brand-logo { transform: scale(1.05); box-shadow: 0 4px 16px rgba(212,168,67,0.2); } /* ===== Brands strip (replaces stats bar) — groundedevs-style flowing logos ===== */ .brandstrip { position: relative; z-index: 10; margin-top: -1px; background: linear-gradient(to right, #0a0a0a, #121212, #0a0a0a); border-top: 1px solid rgba(212,168,67,0.2); border-bottom: 1px solid rgba(212,168,67,0.2); overflow: hidden; padding: 22px 0; } .brandstrip::before, .brandstrip::after { content: ''; position: absolute; top: 0; bottom: 0; width: 100px; z-index: 2; pointer-events: none; } .brandstrip::before { left: 0; background: linear-gradient(to right, #0c0c0c, transparent); } .brandstrip::after { right: 0; background: linear-gradient(to left, #0c0c0c, transparent); } .brandstrip-rail { display: flex; align-items: center; width: max-content; animation: marquee-left 115s linear infinite; } .brandstrip-rail.rev { margin-top: 14px; animation: marquee-right 130s linear infinite; } .bs-logo { flex-shrink: 0; width: 132px; height: 72px; margin: 0 14px; padding: 7px 11px; overflow: hidden; /* guard: keep art inside the rounded tile */ background: rgba(255,255,255,0.96); border-radius: 12px; box-shadow: 0 4px 14px -6px rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; transition: transform 0.4s, box-shadow 0.4s; } @media (min-width: 768px) { .bs-logo { width: 156px; height: 84px; margin: 0 18px; } } .bs-logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .brandstrip:hover .brandstrip-rail { animation-play-state: running; } .brand-logo img { width: 100%; height: 100%; object-fit: contain; opacity: 0.85; transition: opacity 0.5s; } .brand:hover .brand-logo img { opacity: 1; } .brand-name { margin-top: 12px; font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.15em; transition: color 0.5s; white-space: nowrap; } .brand:hover .brand-name { color: var(--gold); } /* Contact */ .contact { background: linear-gradient(to bottom, #060606, #0a0a0a, #000); } .branches { display: grid; grid-template-columns: 1fr; gap: 32px; max-width: 896px; margin: 0 auto; } @media (min-width: 768px) { .branches { grid-template-columns: 1fr 1fr; } } .branch-card { padding: 32px; border-radius: 2px; display: flex; flex-direction: column; } .branch-card h3 { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 18px; font-weight: 600; color: #fff; margin-bottom: 24px; } .branch-row { display: flex; gap: 12px; margin-bottom: 16px; align-items: flex-start; } .branch-row svg { color: var(--gold); flex-shrink: 0; margin-top: 2px; } .branch-row a, .branch-row span { color: rgba(255,255,255,0.5); font-size: 14px; line-height: 1.5; transition: color 0.3s; } .branch-row a:hover { color: var(--gold); } .branch-row .col { display: flex; flex-direction: column; gap: 2px; } .branch-whatsapp { margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.05); } .branch-whatsapp a { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 14px; font-weight: 500; transition: color 0.3s; } .branch-whatsapp a:hover { color: var(--gold-bright); } .workshops { margin-top: 64px; max-width: 896px; margin-left: auto; margin-right: auto; } .workshops-head { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; } .workshops-head svg { color: var(--gold); } .workshops-head h3 { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 20px; font-weight: 600; } .workshops-head h3 span { color: var(--gold); font-weight: 600; } .workshops-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 640px) { .workshops-grid { grid-template-columns: 1fr 1fr; } } .workshop-card { padding: 20px; border-radius: 2px; } .workshop-card h4 { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 13px; font-weight: 600; margin-bottom: 12px; } .workshop-card p { color: rgba(255,255,255,0.6); font-size: 12px; line-height: 1.5; margin-bottom: 8px; } .workshop-card a { color: var(--gold); font-size: 12px; transition: color 0.3s; } .workshop-card a:hover { color: var(--gold-bright); } .workshops-note { margin-top: 16px; text-align: center; color: rgba(255,255,255,0.6); font-size: 12px; } .socials { margin-top: 64px; text-align: center; } .socials-label { color: rgba(255,255,255,0.6); font-size: 14px; margin-bottom: 16px; } .socials-links { display: flex; justify-content: center; gap: 24px; } .socials-links a { color: rgba(255,255,255,0.6); font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; transition: color 0.3s; } .socials-links a:hover { color: var(--gold); } .socials-sep { color: rgba(255,255,255,0.1); } /* Footer */ .footer { background: #000; border-top: 1px solid rgba(255,255,255,0.05); padding: 48px 0; } .footer-inner { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; } @media (min-width: 768px) { .footer-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; text-align: left; } /* outer columns push away from the centre so the middle stays true */ .footer-inner > .footer-brand { justify-self: start; } .footer-inner > .footer-copy { justify-self: end; text-align: right; } } .footer-brand { display: flex; align-items: center; gap: 12px; } .footer-brand img { width: 32px; height: 32px; object-fit: contain; } .footer-brand-text { display: flex; flex-direction: column; } .footer-brand-title { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.7); } .footer-brand-quote { color: rgba(255,255,255,0.6); font-size: 11px; font-style: italic; margin-top: 2px; } .footer-copy { color: rgba(255,255,255,0.5); font-size: 12px; } .footer-copy .sub { margin-top: 4px; color: rgba(255,255,255,0.5); } .footer-social { text-align: center; } .footer-social-label { color: rgba(255,255,255,0.6); font-size: 13px; margin-bottom: 14px; } .footer-social-links { display: flex; justify-content: center; gap: 16px; } .footer-social-links a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.6); transition: color 0.3s, border-color 0.3s, background 0.3s, transform 0.3s; } .footer-social-links a svg { width: 19px; height: 19px; } .footer-social-links a:hover { color: var(--gold); border-color: var(--gold); transform: translateY(-3px); } /* brand colors */ .footer-social-links a[aria-label="Facebook"] { color: #1877F2; border-color: rgba(24,119,242,0.4); } .footer-social-links a[aria-label="Instagram"] { color: #E1306C; border-color: rgba(225,48,108,0.4); } .footer-social-links a[aria-label="TikTok"] { color: #fff; border-color: rgba(255,255,255,0.6); } .footer-social-links a[aria-label="TikTok"] svg { filter: drop-shadow(1px 0 0 #25F4EE) drop-shadow(-1px 0 0 #FE2C55); } .footer-social-links a[aria-label="Facebook"]:hover { color: #fff; background: #1877F2; border-color: #1877F2; } .footer-social-links a[aria-label="Instagram"]:hover { color: #fff; background: linear-gradient(45deg,#F58529,#DD2A7B 50%,#8134AF); border-color: transparent; } .footer-social-links a[aria-label="TikTok"]:hover { color: #fff; background: #111; border-color: #fff; transform: translateY(-3px); } /* ===================================================== MOCK DESIGN OVERRIDES — audit-driven iteration ===================================================== */ /* --- 4. Visual restraint: flat gold headings everywhere except hero --- */ .section-head h2 .gold-gradient, .heritage-text h2 .gold-gradient, .greatest h2 .gold-gradient, .brands-head h2 .gold-gradient, .stat-number.gold-gradient { background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: var(--gold); color: var(--gold); } /* Kill infinite decorative loops (premium = calm) */ .timeline-dot::before { animation: none; opacity: 0; } .bento-play { animation: none; } /* Unify radii: 12px family */ .bento-card { border-radius: 12px; } .lightbox-dock { border-radius: 12px; } /* Multi-brand banner card: sit on dark, not white */ .bento-card.fit-contain .bento-media { background: #0d0d0d; } /* --- 5. Accessibility: contrast + label sizes --- */ .eyebrow { font-size: 13px; } .stat-label { color: rgba(255,255,255,0.55); } .section-head p { color: rgba(255,255,255,0.55); } .greatest-sub { color: rgba(255,255,255,0.55); } .timeline-body p { color: rgba(255,255,255,0.7); } .workshop-card p { color: rgba(255,255,255,0.55); font-size: 13px; } .workshops-note { color: rgba(255,255,255,0.6); font-size: 13px; } .socials-label { color: rgba(255,255,255,0.6); } .socials-links a { color: rgba(255,255,255,0.5); } .footer-copy { color: rgba(255,255,255,0.5); } .footer-copy .sub { color: rgba(255,255,255,0.5); } .nav-logo-sub { color: rgba(255,255,255,0.55); } .bento-desc { color: rgba(255,255,255,0.85); font-size: 13px; } .branch-row a, .branch-row span { color: rgba(255,255,255,0.65); } .hero-sub { color: rgba(255,255,255,0.7); } .heritage-text p { color: rgba(255,255,255,0.7); } .service-text p { color: rgba(255,255,255,0.65); } .service-feature { color: rgba(255,255,255,0.7); } /* (removed reduced-motion blanket — it killed marquee + reveals on some systems) */ /* --- Nav polish: persistent underline track + gold fill + active state --- */ .nav-links a { position: relative; padding-bottom: 5px; color: rgba(255,255,255,0.72); } .nav-links a::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: rgba(255,255,255,0.16); } .nav-links a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--gold); transition: width 0.3s ease; } .nav-links a:hover { color: var(--gold); } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } .nav-links a.active { color: var(--gold); } /* --- Hero: balanced scale + generous internal air --- */ /* Reserve the fixed nav at every height; the hero grows rather than clipping, so this no longer compresses the column. */ .hero-content { padding-top: 96px; padding-bottom: 64px; } .hero-badge { margin-bottom: 64px; padding: 0; } .hero-title span { font-size: clamp(44px, 9vw, 112px); } .hero-sub { margin-top: 42px; line-height: 1.65; } .hero-ctas { margin-top: 44px; } .hero-chevron { bottom: 16px; opacity: 0.65; } @media (max-height: 800px) { .hero-chevron { display: none; } } /* --- Editorial section numbering (removed per feedback) --- */ /* --- CTA band (pre-footer conversion) --- */ .cta-band { position: relative; background: linear-gradient(135deg, #0d0a04, #1a1408 50%, #0d0a04); border-top: 1px solid rgba(212,168,67,0.25); border-bottom: 1px solid rgba(212,168,67,0.25); padding: 72px 0; overflow: hidden; } .cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(212,168,67,0.08), transparent); pointer-events: none; } .cta-band-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; } .cta-band h2 { font-size: clamp(28px, 3.4vw, 44px); color: #fff; } .cta-band h2 .gold { color: var(--gold); } .cta-band p { margin-top: 12px; color: rgba(255,255,255,0.6); font-size: clamp(15px, 1.2vw, 17px); max-width: 520px; } .cta-band-actions { display: flex; flex-wrap: wrap; gap: 16px; } .cta-band-actions .btn-primary, .cta-band-actions .btn-ghost { display: inline-flex; align-items: center; gap: 10px; } /* --- 2. Sticky quick actions (mobile-first conversion layer) --- */ .quick-actions { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; gap: 10px; } .qa-btn { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,0.45); transition: transform 0.25s, box-shadow 0.25s; } .qa-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.55); } .qa-wa { background: rgba(12,11,9,0.32); border: 1px solid rgba(212,168,67,0.45); color: var(--gold); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .qa-call { background: var(--gold); color: #000; } .qa-top { background: transparent; border: 1px solid rgba(212,168,67,0.45); color: var(--gold); opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none; } .qa-top.show { opacity: 1; transform: none; pointer-events: auto; } .qa-top:hover { background: rgba(212,168,67,0.12); } /* Branch card maps link */ .branch-maps { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--gold) !important; font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 13px; } .branch-maps:hover { color: var(--gold-bright) !important; } /* Mobile menu actions */ .mobile-menu-actions { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 16px; } .mobile-menu-phone { display: flex !important; align-items: center; gap: 10px; font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 18px !important; font-weight: 500; color: var(--gold) !important; padding: 0 !important; } .mobile-menu-visit { display: inline-flex !important; align-items: center; justify-content: center; padding: 14px 24px !important; background: var(--gold); color: #000 !important; font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 14px !important; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; border-radius: 2px; } /* ===================================================== SPACING RHYTHM PASS — consistent vertical cadence Base unit: 8px. Sections: 96px desktop / 72px mobile. ===================================================== */ section[data-section] { padding: 72px 0; } @media (min-width: 768px) { section[data-section] { padding: 104px 0; } } .section-head { margin-bottom: 56px; } /* Greatest callout: was 176px — oversized vs siblings */ .greatest { padding: 104px 0; } @media (min-width: 768px) { .greatest { padding: 128px 0; } } /* Brands: tighter section + larger heading */ .brands { padding: 18px 0 0; border-top: 1px solid rgba(212,168,67,0.2); border-bottom: 1px solid rgba(212,168,67,0.2); } .brands-head { margin-bottom: 14px; } .brands .eyebrow { font-size: 17px; letter-spacing: 0.28em; } .brands-sub { margin-top: 0; font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-weight: 700; color: rgba(255,255,255,0.5); font-size: 20px; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } .brands-head .line { margin: 24px auto 0; width: 96px; height: 1px; } /* Services list: 144px between blocks was cavernous */ .service-block { margin-bottom: 72px; } @media (min-width: 1024px) { .service-block { margin-bottom: 104px; } } /* Timeline events: tighten 96 → 72 */ @media (min-width: 768px) { .timeline-event { margin-bottom: 72px; } } /* ===================================================== TIMELINE — image-led cards. Every milestone shows a uniform feature image (cover-cropped so mixed source ratios all look consistent), year badge overlaid. ===================================================== */ .timeline-card.tl-card { overflow: hidden; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.025); border-radius: 14px; padding: 0; } .timeline-card.tl-card:hover { border-color: rgba(212,168,67,0.3); } .tl-media { position: relative; width: 100%; height: 220px; overflow: hidden; background: #0d0d0d; } .tl-media-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; filter: blur(22px) brightness(0.5); transform: scale(1.15); } .tl-media-img { position: absolute; inset: 0; z-index: 1; background-size: cover; background-position: center; transition: transform 0.6s cubic-bezier(.2,.8,.2,1); } /* Contain mode: show the whole photo, blurred fill behind */ .tl-media.fit-contain .tl-media-img { background-size: contain; background-repeat: no-repeat; } .timeline-card.tl-card:hover .tl-media.fit-contain .tl-media-img, .tl-media.fit-contain:hover .tl-media-img { transform: scale(1.02); } /* Natural mode: card height follows the image — no bars, full context */ .tl-media.fit-natural { height: auto; } .tl-media-photo { display: block; width: 100%; height: auto; transition: transform 0.6s cubic-bezier(.2,.8,.2,1); } .timeline-card.tl-card:hover .tl-media-photo { transform: scale(1.04); } /* On hover, subtle zoom */ .timeline-card.tl-card:hover .tl-media-img { transform: scale(1.06); } /* Film grain + vignette overlay for archival character */ .tl-media::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 55%, rgba(0,0,0,0.4) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); background-size: cover, 140px 140px; mix-blend-mode: overlay; opacity: 0.5; } .tl-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.55), transparent 45%); pointer-events: none; } .tl-year-badge { position: absolute; top: 14px; left: 14px; z-index: 2; font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.04em; color: #000; background: var(--gold); padding: 6px 13px; border-radius: 3px; box-shadow: 0 4px 14px rgba(0,0,0,0.4); } .tl-body { padding: 22px 24px 24px; } .timeline-card.tl-card h3 { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: clamp(19px, 2vw, 23px); font-weight: 600; color: #fff; line-height: 1.2; margin-bottom: 10px; } .timeline-card.tl-card p { color: rgba(255,255,255,0.68); font-size: 14px; line-height: 1.65; font-weight: 300; } .timeline-card.tl-card .timeline-accent { margin-top: 16px; width: 48px; height: 1px; background: linear-gradient(to right, rgba(212,168,67,0.6), transparent); transition: width 0.5s; } .timeline-card.tl-card:hover .timeline-accent { width: 80px; } /* ===================================================== TIMELINE BACKGROUND — faint vintage founding photo (1958 heritage imagery, matches Achievements wash) ===================================================== */ section#timeline.timeline { position: relative; background: linear-gradient(to bottom, #050505, #0a0906 45%, #050505); overflow: hidden; } /* Faint heritage photo */ section#timeline.timeline::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url('assets/cdn/vintage-brunei_9a565d8e.jpg') center/cover no-repeat; opacity: 0.06; filter: sepia(0.4); } /* Dark wash + gold glow for contrast */ section#timeline.timeline::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 70% 45% at 18% 10%, rgba(212,168,67,0.12), transparent 60%), radial-gradient(ellipse 55% 40% at 88% 92%, rgba(212,168,67,0.08), transparent 60%), linear-gradient(to bottom, rgba(5,5,5,0.9), rgba(5,5,5,0.74) 45%, rgba(5,5,5,0.95)); } section#timeline.timeline .container { position: relative; z-index: 1; } /* Brighten the central spine to anchor the richer bg */ section#timeline.timeline .timeline-line { width: 2px; background: linear-gradient(to bottom, rgba(212,168,67,0.8), rgba(212,168,67,0.35) 50%, rgba(212,168,67,0.05)); box-shadow: 0 0 14px rgba(212,168,67,0.25); } /* Lift cards off the photo backdrop */ section#timeline.timeline .timeline-card.tl-card { background: rgba(14,12,8,0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 18px 44px -22px rgba(0,0,0,0.8); } /* Contact: large dead zone above CTA band — trim tail spacing */ .workshops { margin-top: 56px; } .socials { margin-top: 48px; } section#contact.contact { padding-bottom: 56px; } /* CTA band: balanced 64px */ .cta-band { padding: 64px 0; } /* Stats strip: slightly tighter */ @media (min-width: 768px) { .stats-grid { padding: 56px 0; } } /* ===================================================== LIGHTBOX — hug the media's natural shape. Portrait videos no longer leave giant black side panels; caption clears the thumbnail dock. ===================================================== */ .lightbox { padding: 24px 24px 110px; } .lightbox-content { width: auto; max-width: min(960px, 92vw); max-height: none; display: flex; flex-direction: column; } .lightbox-media { max-height: 58vh; aspect-ratio: auto; width: 100%; } .lightbox-media img, .lightbox-media video { width: 100%; height: auto; max-height: 58vh; object-fit: contain; } .lightbox-media:empty { aspect-ratio: auto; } .lightbox-caption { padding: 16px 28px 20px; /* width:0 + min-width:100% → caption text can no longer expand the flex container; the media's natural width drives the box size */ width: 0; min-width: 100%; box-sizing: border-box; } .lightbox-caption h3 { font-size: 20px; margin: 6px 0; } .lightbox-caption p { font-size: 14px; } .lightbox-dock { bottom: 20px; } /* ===================================================== STATS BAR — give it presence: gold glow, hairline dividers between figures, framed top/bottom rules ===================================================== */ .stats { background: radial-gradient(ellipse 55% 90% at 50% 0%, rgba(212,168,67,0.08), transparent 65%), linear-gradient(to right, #0a0a0a, #121212, #0a0a0a); border-top: 1px solid rgba(212,168,67,0.2); border-bottom: 1px solid rgba(212,168,67,0.2); } .stat { position: relative; } @media (min-width: 768px) { .stat + .stat::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 64px; width: 1px; background: linear-gradient(to bottom, transparent, rgba(212,168,67,0.35), transparent); } } /* ===================================================== FEATURED PRODUCTS — commercial-first showcase ===================================================== */ .featured { background: linear-gradient(to bottom, #060606, #0a0a0a); } /* ===================================================== FEATURED PRODUCTS BACKGROUND — faint parts-shelf photo (matches the Achievements wash treatment) ===================================================== */ section#products.featured { position: relative; background: linear-gradient(to bottom, #060606, #0a0a0a); overflow: hidden; } section#products.featured::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url('assets/cdn/storefront-parts-v2_3f714752.webp') center/cover no-repeat; opacity: 0.07; } section#products.featured::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 60% 45% at 12% 6%, rgba(212,168,67,0.1), transparent 60%), linear-gradient(to bottom, rgba(6,6,6,0.88), rgba(6,6,6,0.72) 45%, rgba(10,10,10,0.95)); } section#products.featured .container { position: relative; z-index: 1; } section#products.featured { padding-top: 72px; padding-bottom: 88px; scroll-margin-top: 72px; } section#products .section-head { margin-bottom: 36px; } section#products .section-head p { margin-top: 12px; } /* ===== Featured products — Grounded-style image grid ===== */ /* Staggered one-by-one blur reveal for service tiles (21st.dev revealVariants) */ .prodgrid.stagger { opacity: 1; transform: none; transition: none; } .prodgrid.stagger > .ptile-upcoming { opacity: 0; transform: translateY(-20px); filter: blur(10px); transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.22,1,.36,1), filter 1.2s ease; } .prodgrid.stagger.in > .ptile-upcoming { opacity: 1; transform: none; filter: blur(0px); transition-delay: .6s; } .prodgrid.stagger > .ptile { opacity: 0; transform: translateY(-20px); filter: blur(10px); transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.22,1,.36,1), filter 1.2s ease; } .prodgrid.stagger.in > .ptile { opacity: 1; transform: none; filter: blur(0px); } .prodgrid.stagger.in > .ptile:nth-child(1) { transition-delay: 0s; } .prodgrid.stagger.in > .ptile:nth-child(2) { transition-delay: .3s; } .prodgrid.stagger.in > .ptile:nth-child(3) { transition-delay: .6s; } .prodgrid.stagger.in > .ptile:nth-child(4) { transition-delay: .9s; } .prodgrid.stagger.in > .ptile:nth-child(5) { transition-delay: 1.2s; } .prodgrid.stagger.in > .ptile:nth-child(6) { transition-delay: 1.5s; } @media (prefers-reduced-motion: reduce) { /* keep the gentle one-by-one opacity fade; drop only the slide + blur */ .prodgrid.stagger > .ptile-upcoming, .prodgrid.stagger > .ptile { transform: none; filter: none; transition: opacity 1.2s ease; } .prodgrid.stagger.in > .ptile { transform: none; filter: none; } } .prodgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 920px; margin: 0 auto; } @media (min-width: 720px) { .prodgrid { grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 900px; } .prodgrid > .ptile { grid-column: auto; } } .ptile { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); background: #0d0d0d; transition: transform 0.45s cubic-bezier(.2,.8,.2,1), border-color 0.4s, box-shadow 0.4s; } .ptile:hover { transform: translateY(-4px); border-color: rgba(212,168,67,0.4); } .ptile-media { position: absolute; inset: 0; } .ptile-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(.2,.8,.2,1); } .ptile:hover .ptile-media img { transform: scale(1.06); } /* logo tiles: white bg, contained, not cropped */ .ptile-media.logo { background: #fff; } .ptile-media.logo img { object-fit: contain; padding: 22px 26px 58px; } .ptile-scrim { display: none; } .ptile-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 22px 24px; z-index: 2; } .ptile-hint { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: var(--gold); max-height: 0; opacity: 0; overflow: hidden; transform: translateY(4px); transition: opacity 0.35s, transform 0.35s, max-height 0.35s; } .ptile:hover .ptile-hint { opacity: 1; transform: none; max-height: 24px; } /* Superseded by the group labels above each grid — kept for other pages. */ .prodgrid.svc-enquire .ptile-badge, .prodgrid.svc-browse .ptile-badge { display: none; } .ptile-badge { position: absolute; top: 14px; left: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .ptile-badge svg { width: 12px; height: 12px; } .ptile-badge.enquire { background: rgba(37,211,102,0.16); color: #2f9e57; border: 1px solid rgba(37,211,102,0.45); } .ptile-badge.browse { background: rgba(212,168,67,0.18); color: var(--gold-deep, #b8923a); border: 1px solid rgba(212,168,67,0.5); } .ptile-tag { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(212,168,67,0.45); background: rgba(8,8,8,0.5); padding: 4px 10px; border-radius: 3px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .ptile-title { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: clamp(19px, 1.6vw, 23px); font-weight: 700; letter-spacing: -0.02em; color: #0a0a0a; line-height: 1.1; } .ptile-go { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0.02em; color: rgba(0,0,0,0.55); opacity: 0; transform: translateY(4px); transition: opacity 0.35s, transform 0.35s, color 0.3s; } .ptile:hover .ptile-go { opacity: 1; transform: none; color: var(--gold-deep, #B8923A); } .ptile-soon { display: inline-flex; align-items: center; gap: 7px; font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 11px; font-weight: 500; color: rgba(0,0,0,0.55); letter-spacing: 0.03em; } /* "Coming soon" status hint on Car Parts Finder */ .product-soon { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.05em; color: rgba(255,255,255,0.6); } .soon-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(212,168,67,0.55); animation: soonPulse 2.4s ease-out infinite; } @keyframes soonPulse { 0% { box-shadow: 0 0 0 0 rgba(212,168,67,0.5); } 70% { box-shadow: 0 0 0 6px rgba(212,168,67,0); } 100% { box-shadow: 0 0 0 0 rgba(212,168,67,0); } } /* ===================================================== ACHIEVEMENTS BENTO — smaller tiles, aspect-matched so each photo fills its box without visible cropping. 8 rows × 6 cols, fully packed: rows 1-3: storefront 4×3 (~2.0) | HKS 2×4 (contain, rows 1-4) rows 4-6: banner 4×3 (2.03 ✓) | workshop 2×4 (portrait, rows 5-8) rows 7-8: OEM 2×2 (~1.5) + team 2×2 (~1.5) ===================================================== */ .bento { grid-auto-rows: 120px; } @media (min-width: 901px) { .bento-card.span-big { grid-column: span 4; grid-row: span 3; } .bento-card.span-square { grid-column: span 4; grid-row: span 3; } .bento-card.span-tall { grid-column: span 2; grid-row: span 4; } .bento-card.span-wide { grid-column: span 2; grid-row: span 4; } .bento-card.span-half { grid-column: span 2; grid-row: span 2; } } /* ===================================================== MOBILE OPTIMIZATION PASS (≤600px phones) ===================================================== */ @media (max-width: 600px) { /* Neutralize horizontal slide-ins on mobile — they shift content 40px sideways pre-reveal and can poke past a narrow viewport. Vertical only. */ .reveal.from-left, .reveal.from-right { transform: translateY(30px); } .reveal.from-left.in, .reveal.from-right.in { transform: none; } /* Container + section rhythm: tighter on phones */ .container { padding: 0 18px; } section[data-section] { padding: 56px 0; } .section-head { margin-bottom: 36px; } section#products.featured { padding-top: 52px; padding-bottom: 64px; } /* Nav: trim height + logo so the burger has room */ .nav-inner { height: 64px; padding: 0 18px; } .nav-logo img { width: 34px; height: 34px; } .nav-logo-title { font-size: 12px; } .nav-logo-sub { font-size: 9px; } .mobile-menu { padding: 84px 24px 32px; } /* Hero: fit comfortably, no oversized type */ .hero { min-height: 560px; } .hero-badge { margin-bottom: 28px; } .hero-title span { font-size: clamp(40px, 13vw, 60px); } .hero-sub { margin-top: 20px; font-size: 15px; } .hero-ctas { margin-top: 32px; gap: 12px; width: 100%; } .hero-ctas .btn-primary, .hero-ctas .btn-ghost { flex: 1; text-align: center; justify-content: center; } /* Stats: keep 2×2 but tighten */ .stats-grid { gap: 24px 16px; padding: 40px 0; } .stat-number { font-size: clamp(32px, 9vw, 44px); } .stat + .stat::before { display: none; } /* Section headings scale down */ .section-head h2 { font-size: clamp(30px, 8vw, 40px); } .heritage-text h2 { font-size: clamp(30px, 8vw, 42px); } .greatest h2 { font-size: clamp(36px, 12vw, 64px); } .greatest { padding: 80px 0; } .greatest-metrics { gap: 28px; } /* Featured products: comfortable 1-col stack on small phones */ .product-row { grid-template-columns: 1fr; gap: 16px; } .prod-img { height: 170px; } /* Heritage / services images shorter */ .heritage-img img { height: 320px; } .service-img img { height: 280px; } .service-block { margin-bottom: 56px; gap: 28px; } /* Timeline: pull cards closer to the rail, tighten */ .timeline-event { margin-bottom: 36px; } .timeline-card.tl-card { margin-left: 52px; width: auto; flex: 1; min-width: 0; } .tl-media { height: 190px; } .tl-body { padding: 20px 20px 22px; } /* CTA band stacks cleanly */ .cta-band { padding: 52px 0; } .cta-band-inner { gap: 24px; } .cta-band-actions { width: 100%; } .cta-band-actions .btn-primary, .cta-band-actions .btn-ghost { flex: 1; justify-content: center; } /* Contact: full-width cards, comfy padding */ .branch-card { padding: 24px; } .workshops-grid { grid-template-columns: 1fr; } /* Brand marquee logos a touch smaller */ .brand { padding: 20px 22px; } .brand-logo { width: 68px; height: 68px; } /* Sticky quick actions: smaller, lifted above iOS toolbars */ .quick-actions { right: 14px; bottom: 14px; gap: 8px; } .qa-btn { width: 48px; height: 48px; } /* Lightbox: full-width media, dock clears caption */ .lightbox { padding: 16px 16px 96px; } .lightbox-content { max-width: 94vw; } .lightbox-media, .lightbox-media img, .lightbox-media video { max-height: 50vh; } .lightbox-caption { padding: 14px 18px 16px; } .lightbox-caption h3 { font-size: 18px; } .lightbox-dock { bottom: 14px; padding: 6px 8px; } .lightbox-thumb { width: 34px; height: 34px; } } /* Very small phones (≤380px): final squeeze */ @media (max-width: 380px) { .hero-title span { font-size: clamp(34px, 12vw, 46px); } .nav-logo-sub { display: none; } .stat-label { font-size: 10px; letter-spacing: 0.1em; } } /* Short landscape phones: hide the bouncing chevron, shrink hero */ @media (max-height: 560px) and (orientation: landscape) { .hero { min-height: 480px; } .hero-chevron { display: none; } } /* === Enquiry modal (editable before send) === */ .enq-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s; } .enq-modal.open { opacity: 1; visibility: visible; transition: opacity .3s; } .enq-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.78); } .enq-card { position: relative; width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; background: #0c0b09; border: 1px solid rgba(212,168,67,.25); border-radius: 18px; padding: 30px 30px 26px; transform: scale(.96) translateY(8px); transition: transform .35s cubic-bezier(.2,.8,.2,1); } .enq-modal.open .enq-card { transform: none; } .enq-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .25s; } .enq-close:hover { background: var(--gold); color: #000; } .enq-kicker { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); } .enq-head h3 { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 24px; color: #fff; margin: 8px 0 6px; letter-spacing: -.02em; } .enq-head p { color: rgba(255,255,255,.55); font-size: 14px; line-height: 1.55; } .enq-form { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; } .enq-row { display: flex; flex-direction: column; gap: 7px; } .enq-label { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); letter-spacing: .01em; } .enq-opt { font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(127,179,255,.85); background: rgba(80,150,240,.13); border: 1px solid rgba(80,150,240,.3); border-radius: 5px; padding: 1px 6px; margin-left: 7px; vertical-align: 1px; } .enq-input { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 13px 15px; color: #fff; font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 15px; transition: border-color .25s, background .25s; } .enq-input::placeholder { color: rgba(255,255,255,0.5); } .enq-input:focus { outline: none; border-color: var(--gold); background: rgba(212,168,67,.06); } .enq-help { margin-top: 20px; background: linear-gradient(160deg, rgba(42,111,219,.13), rgba(42,111,219,.04)); border: 1px solid rgba(80,150,240,.35); border-left: 3px solid #4d90ee; border-radius: 12px; padding: 15px 17px; } .enq-help-head { display: flex; align-items: center; gap: 8px; color: #7fb3ff; font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; margin-bottom: 9px; } .enq-help p { color: rgba(255,255,255,.72); font-size: 12.5px; line-height: 1.5; margin: 5px 0 0; } .enq-help p b { color: #fff; } .enq-send { margin-top: 22px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; border: none; border-radius: 12px; background: #25D366; color: #062b16; font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .01em; cursor: pointer; transition: filter .25s, transform .15s; } .enq-send:hover { filter: brightness(1.08); } .enq-send:active { transform: scale(.985); } .enq-foot { margin-top: 12px; text-align: center; color: rgba(255,255,255,0.6); font-size: 12px; line-height: 1.5; } .enq-soon { margin-top: 16px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 11px; background: rgba(212,168,67,0.1); border: 1px solid rgba(212,168,67,0.28); color: var(--gold); font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 13px; font-weight: 500; } .enq-soon-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(212,168,67,0.55); animation: soonPulse 2.4s ease-out infinite; flex-shrink: 0; } /* === Enquiry branch picker === */ .enq-branches { display: flex; flex-direction: column; gap: 10px; } .enq-branch { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #fff; cursor: pointer; position: relative; transition: border-color .25s, background .25s, transform .15s; } .enq-branch:hover { border-color: var(--gold); background: rgba(212,168,67,.08); } .enq-branch:active { transform: scale(.99); } .enq-branch-name { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 15px; font-weight: 600; } .enq-branch-sub { font-size: 12.5px; color: rgba(255,255,255,.5); } .enq-branch-go { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--gold); opacity: .55; transition: opacity .25s, transform .25s; } .enq-branch:hover .enq-branch-go { opacity: 1; transform: translateY(-50%) translateX(3px); } @media (hover: hover) { .vcall, .bm-call { cursor: copy; } } #shh-copy-toast { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.94); z-index: 4000; display: flex; align-items: center; gap: 14px; padding: 18px 26px; border-radius: 6px; background: rgba(14,14,15,.96); border: 1px solid rgba(212,168,67,.45); box-shadow: 0 24px 70px rgba(0,0,0,.6); color: #f1f0ed; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, transform .22s cubic-bezier(.2,.8,.2,1), visibility .22s; } #shh-copy-toast.show { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } #shh-copy-toast svg { width: 26px; height: 26px; flex: 0 0 auto; color: var(--gold); } #shh-copy-toast.is-fallback { border-color: rgba(212,168,67,.55); } #shh-copy-toast.is-fallback svg { color: #d4a843; } #shh-copy-toast span { display: flex; flex-direction: column; gap: 3px; } #shh-copy-toast b { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .04em; } #shh-copy-toast em { font-style: normal; font-size: 13px; color: rgba(241,240,237,.6); font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { #shh-copy-toast { transition: opacity .15s ease, visibility .15s; transform: translate(-50%,-50%); } #shh-copy-toast.show { transform: translate(-50%,-50%); } } /* Hero fallback — only applied when the graphics chip is unavailable and the shader canvas has been hidden. Invisible on every device that renders it. */ .no-shader .hero { background: radial-gradient(120% 92% at 24% 14%, rgba(212,168,67,0.30), transparent 58%), radial-gradient(90% 70% at 82% 8%, rgba(70,130,160,0.16), transparent 62%), linear-gradient(158deg, #17171a 0%, #0b0b0c 62%, #060605 100%); } /* ===== Services — group labels (Enquire vs Browse) ===== Splits the tiles into two labelled groups so the visitor can tell at a glance which services are a WhatsApp message and which open a catalogue. */ .svc-group-label { max-width: 900px; font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 auto 14px; display: flex; align-items: center; gap: 9px; } .svc-group-label.enquire { color: #42d97f; } .svc-group-label.browse { color: var(--gold); } .prodgrid + .svc-group-label { margin-top: 30px; } @media (min-width: 720px) { .prodgrid.svc-enquire { grid-template-columns: repeat(3, 1fr); } .prodgrid.svc-browse { grid-template-columns: repeat(3, 1fr); } } /* ===== Services — upcoming-catalogue placeholder ===== Deliberately unlike the live tiles: dark not white, dashed not solid, and not a link. Reads as a reserved slot rather than a card that failed to load. NB: .ptile-soon / soonPulse are already used elsewhere — hence these names. */ .ptile-upcoming { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 16px; border: 1px dashed rgba(212,168,67,0.34); background: radial-gradient(120% 90% at 50% 12%, rgba(212,168,67,0.09), transparent 62%), repeating-linear-gradient(135deg, rgba(212,168,67,0.03) 0 8px, transparent 8px 16px), rgba(255,255,255,0.015); cursor: default; overflow: hidden; } .ptile-upcoming-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; padding: 26px; text-align: center; } .ptile-upcoming-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(212,168,67,0.55); animation: upcomingPulse 2.4s ease-out infinite; } @keyframes upcomingPulse { 0% { box-shadow: 0 0 0 0 rgba(212,168,67,0.5); } 70% { box-shadow: 0 0 0 15px rgba(212,168,67,0); } 100% { box-shadow: 0 0 0 0 rgba(212,168,67,0); } } .ptile-upcoming-kicker { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--gold); } .ptile-upcoming-title { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 21px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: rgba(242,240,234,0.9); } .ptile-upcoming-sub { font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 13.5px; line-height: 1.5; color: rgba(242,240,234,0.42); max-width: 24ch; } @media (prefers-reduced-motion: reduce) { .ptile-upcoming-dot { animation: none; } } /* ===== Per-brand optical sizing ===== The PNGs are not uniformly trimmed: the wordmarks all carry ~74px of ink width (so contain already equalises them), the square badges only ~64px, and nissan / hks fill their frame edge-to-edge at ~96px. Scales below normalise max(ink) to ~76px inside the 96px tile — measured, not eyeballed. */ .brand-logo { overflow: hidden; } /* guard: no scale can spill the tile */ .brand-logo[data-logo="bmw"] img, .brand-logo[data-logo="mitsubishi"] img, .brand-logo[data-logo="mazda"] img { transform: scale(1.19); } .brand-logo[data-logo="nissan"] img, .brand-logo[data-logo="hks-logo-real"] img { transform: scale(0.79); } /* superseded by the wordmark block below — width-equal is not size-equal */ /* Wordmark presence: all wordmark PNGs share a 308px ink width in a 400px frame, so they render 86px wide inside the 112px tile — 1.30 is the overflow ceiling. The flattest marks take the full lift; the taller ones need less. */ .brand-logo[data-logo="honda"] img, .brand-logo[data-logo="subaru"] img, .brand-logo[data-logo="toyota"] img, .brand-logo[data-logo="isuzu"] img, .brand-logo[data-logo="suzuki"] img, .brand-logo[data-logo="volkswagen"] img { transform: scale(1.28); } .brand-logo[data-logo="mercedes-benz"] img { transform: scale(1.24); } .brand-logo[data-logo="audi"] img { transform: scale(1.18); } .brand-logo[data-logo="kia"] img { transform: scale(1.12); } /* ===== Header trading status (replaces the old Visit Us button) ===== Two-line lockup: state on top, the next thing that changes beneath it. Small-caps on both lines so it pairs with the logo lockup on the opposite edge. Weight 600 on the detail line because Outfit's figures read lighter than its capitals at .2em. */ .nav-status { /* nav-status plate — everything else in the bar is anchored (the logo has a mark, the links an underline rail), so the badge needs an edge of its own or it reads as leftover text on the dark corner. */ display: inline-flex; align-items: center; gap: 11px; padding: 9px 15px; border-radius: 10px; /* See-through: a light dark wash over a blur, so the hero shader reads through the plate instead of being covered by it. The blur is what keeps the text legible over a moving, multi-coloured background. */ background: rgba(0,0,0,0.26); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); border: 1px solid rgba(255,255,255,0.16); white-space: nowrap; } .nav-status .ns-dot { position: relative; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; } .nav-status .ns-col { display: flex; flex-direction: column; line-height: 1.25; text-align: left; } .nav-status .ns-state { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; } .nav-status .ns-detail { font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.66); } /* open */ .nav-status.is-open .ns-dot { background: #4ec98a; } .nav-status.is-open .ns-state { color: #4ec98a; } .nav-status.is-open .ns-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #4ec98a; opacity: .5; animation: nsPulse 2.4s ease-in-out infinite; } /* Sunday — usually trading, but not every week */ .nav-status.is-maybe .ns-dot { background: var(--gold); } .nav-status.is-maybe .ns-state { color: var(--gold); } .nav-status.is-maybe .ns-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--gold); opacity: .5; animation: nsPulse 2.4s ease-in-out infinite; } /* closed */ .nav-status.is-shut .ns-dot { background: rgba(242,240,234,0.55); } .nav-status.is-shut .ns-state { color: rgba(242,240,234,0.55); } @keyframes nsPulse { 0%, 100% { transform: scale(.72); opacity: .55; } 50% { transform: scale(1.15); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .nav-status .ns-dot::after { animation: none; } } /* ===== Enquiry field info tip (ⓘ) ===== Shows on hover and on keyboard focus. Bubble is positioned above the icon and never captures the pointer, so it cannot block the input underneath. */ .enq-tip { position: relative; display: inline-flex; align-items: center; margin-left: 6px; color: rgba(255,255,255,0.5); line-height: 1; cursor: help; outline: none; vertical-align: -2px; } .enq-tip svg { display: block; } .enq-tip:hover, .enq-tip:focus { color: var(--gold); } .enq-tip-bubble { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%); width: 208px; padding: 9px 12px; border-radius: 9px; background: #1c1b18; border: 1px solid rgba(212,168,67,0.45); color: rgba(255,255,255,0.88); font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 12.5px; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; text-align: left; opacity: 0; visibility: hidden; transition: opacity 0.18s ease; pointer-events: none; z-index: 30; box-shadow: 0 8px 22px rgba(0,0,0,0.45); } .enq-tip-bubble::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: rgba(212,168,67,0.45); } .enq-tip:hover .enq-tip-bubble, .enq-tip:focus .enq-tip-bubble { opacity: 1; visibility: visible; } /* Zero-height alias target for /#branches. 72px matches the scroll-margin the real sections use, so both anchors land identically under the fixed header. */ .anchor-alias { display: block; height: 0; scroll-margin-top: 72px; }