/* ============================================================ OSAKA AUTO — Landing Dark premium theme · brand red ============================================================ */ :root{ /* Brand */ --red: #e50813; --red-bright: #ff3d43; --red-deep: #b1040c; --red-soft: rgba(240,28,40,.14); --grad-red: linear-gradient(135deg, #ff5a5f 0%, #e50813 45%, #b1040c 100%); /* Surfaces */ --bg: #0a0a0c; --bg-2: #0d0d10; --surface: #141417; --surface-2: #18181c; --surface-3: #1f1f25; --border: rgba(255,255,255,.08); --border-2: rgba(255,255,255,.12); /* Text */ --text: #f4f4f6; --text-dim: #b6b6c0; --text-mute: #7c7c87; /* System */ --radius: 18px; --radius-sm: 12px; --radius-lg: 26px; --maxw: 1200px; --gut: clamp(20px, 5vw, 40px); --ease: cubic-bezier(.22,.61,.36,1); --shadow: 0 24px 60px -20px rgba(0,0,0,.7); --shadow-red: 0 18px 50px -12px rgba(240,28,40,.5); --z-header: 100; --z-menu: 120; --z-fab: 90; --z-toast: 200; } /* ---------- Reset ---------- */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } /* Lock horizontal scroll on mobile/tablet (iOS rubber-band). Scoped so it never turns into a scroll container on desktop (that breaks sticky). */ @media (max-width:1080px){ html{ overflow-x:hidden; } } body{ font-family:'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background:var(--bg); color:var(--text); line-height:1.6; font-size:16px; overflow-x:hidden; position:relative; width:100%; max-width:100%; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; } ul{ list-style:none; } svg.icon{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; } /* ---------- Background ambience ---------- */ body::before{ content:""; position:fixed; inset:0; z-index:-2; background: radial-gradient(900px 600px at 80% -5%, rgba(240,28,40,.10), transparent 60%), radial-gradient(700px 500px at 0% 30%, rgba(240,28,40,.06), transparent 55%), var(--bg); } body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); } .container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); } /* ---------- Accent helpers ---------- */ .accent{ color:var(--red-bright); background:linear-gradient(180deg,#ff5a5f,#e50813); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-dim); padding:8px 16px; border:1px solid var(--border-2); border-radius:100px; background:rgba(255,255,255,.03); backdrop-filter:blur(6px); } .eyebrow__dot{ width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 0 4px var(--red-soft); animation:pulse 2s infinite; } /* ============================================================ BUTTONS ============================================================ */ .btn{ --bg-btn:transparent; display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:700; font-size:15px; line-height:1; padding:14px 24px; border-radius:100px; cursor:pointer; white-space:nowrap; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), color .2s; position:relative; isolation:isolate; } .btn .icon{ width:18px; height:18px; } .btn--lg{ padding:17px 30px; font-size:16px; } .btn--block{ width:100%; } .btn--icon{ min-width:54px; } .btn--primary{ color:#fff; background:var(--grad-red); box-shadow:var(--shadow-red); } .btn--primary::before{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; background:linear-gradient(135deg,#ff5a5f,#e50813); opacity:0; transition:opacity .25s var(--ease); } .btn--primary:hover{ transform:translateY(-2px); box-shadow:0 22px 60px -12px rgba(240,28,40,.65); } .btn--primary:hover::before{ opacity:1; } .btn--primary:active{ transform:translateY(0); } .btn--ghost{ color:var(--text); background:rgba(255,255,255,.04); border:1px solid var(--border-2); } .btn--ghost:hover{ background:rgba(255,255,255,.08); border-color:var(--red); color:#fff; transform:translateY(-2px); } /* ============================================================ HEADER ============================================================ */ .header{ position:fixed; top:0; left:0; right:0; z-index:var(--z-header); transition:background-color .3s var(--ease), border-color .3s, backdrop-filter .3s; border-bottom:1px solid transparent; } .header.is-scrolled{ background:rgba(10,10,12,.82); backdrop-filter:blur(16px) saturate(140%); border-bottom-color:var(--border); } .header__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:76px; } .brand{ display:inline-flex; align-items:center; gap:12px; flex-shrink:0; } .brand__logo{ width:44px; height:44px; border-radius:50%; object-fit:cover; box-shadow:0 4px 14px rgba(240,28,40,.35); } .brand__text{ display:flex; flex-direction:column; line-height:1.05; } .brand__name{ font-weight:800; font-size:17px; letter-spacing:-.01em; } .brand__city{ font-size:12px; color:var(--text-mute); font-weight:600; letter-spacing:.06em; text-transform:uppercase; } .nav{ display:flex; align-items:center; gap:2px; } .nav__link{ font-size:15px; font-weight:600; color:var(--text-dim); white-space:nowrap; padding:9px 11px; border-radius:100px; position:relative; transition:color .2s, background-color .2s; } .nav__link:hover{ color:#fff; background:rgba(255,255,255,.05); } .header__actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; } /* redundant with the visible phone + hero CTAs; dropped so the 7-item nav fits */ .header__cta{ display:none; } .header__phone{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px; color:var(--text); transition:color .2s; } .header__phone .icon{ width:18px; height:18px; color:var(--red); } .header__phone:hover{ color:var(--red-bright); } .header__phone span{ white-space:nowrap; } /* Burger */ .burger{ display:none; width:46px; height:46px; border-radius:12px; border:1px solid var(--border-2); background:rgba(255,255,255,.04); flex-direction:column; align-items:center; justify-content:center; gap:5px; } .burger span{ display:block; width:20px; height:2px; background:var(--text); border-radius:2px; transition:transform .3s var(--ease), opacity .2s; } .burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .burger.is-open span:nth-child(2){ opacity:0; } .burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* Mobile menu */ .mobile-menu{ position:fixed; inset:76px 0 0; z-index:var(--z-menu); background:rgba(10,10,12,.98); backdrop-filter:blur(20px); padding:30px var(--gut) 40px; display:flex; flex-direction:column; justify-content:space-between; transform:translateX(100%); transition:transform .4s var(--ease); visibility:hidden; } .mobile-menu.is-open{ transform:translateX(0); visibility:visible; } .mobile-menu__nav{ display:flex; flex-direction:column; gap:6px; } .mobile-menu__link{ font-size:22px; font-weight:700; padding:14px 4px; border-bottom:1px solid var(--border); transition:color .2s, padding-left .2s; } .mobile-menu__link:hover{ color:var(--red-bright); padding-left:10px; } .mobile-menu__footer{ display:flex; flex-direction:column; gap:12px; margin-top:30px; } /* ============================================================ HERO ============================================================ */ .hero{ position:relative; padding-top:120px; padding-bottom:44px; overflow:hidden; } .hero__glow{ position:absolute; top:-10%; right:-5%; width:60vw; height:60vw; max-width:780px; max-height:780px; background:radial-gradient(circle, rgba(240,28,40,.28), transparent 62%); filter:blur(20px); pointer-events:none; z-index:0; } .hero__grid-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 80% 70% at 50% 20%, #000 30%, transparent 75%); -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 20%, #000 30%, transparent 75%); } .hero__inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; min-height:clamp(420px, 56vh, 560px); } .hero__title{ font-size:clamp(36px, 5.2vw, 68px); font-weight:800; line-height:1.04; letter-spacing:-.02em; margin:22px 0 20px; } .hero__lead{ font-size:clamp(16px,1.4vw,19px); color:var(--text-dim); max-width:540px; } .hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin:32px 0 28px; } .manager-card{ display:inline-flex; align-items:center; gap:14px; padding:12px 18px 12px 12px; border-radius:100px; background:var(--surface-2); border:1px solid var(--border-2); position:relative; transition:border-color .25s, transform .25s, background-color .25s; max-width:max-content; } .manager-card:hover{ border-color:var(--red); transform:translateY(-2px); background:var(--surface-3); } .manager-card__avatar{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:18px; color:#fff; background:var(--grad-red); flex-shrink:0; } .manager-card__info{ display:flex; flex-direction:column; line-height:1.25; } .manager-card__name{ font-size:13px; color:var(--text-mute); font-weight:600; } .manager-card__phone{ font-size:17px; font-weight:800; letter-spacing:-.01em; } .manager-card__pulse{ width:9px; height:9px; border-radius:50%; background:#34d36b; margin-left:6px; box-shadow:0 0 0 0 rgba(52,211,107,.6); animation:pulse-green 1.8s infinite; } /* Hero visual */ .hero__visual{ position:relative; display:grid; place-items:center; min-height:340px; } /* red backlight halo behind the car */ .hero__sun{ position:absolute; top:46%; left:50%; transform:translate(-50%,-50%); width:90%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(240,28,40,.5) 0%, rgba(240,28,40,.18) 42%, transparent 66%); filter:blur(55px); opacity:.85; z-index:0; } /* Default: frameless floating cut-out (transparent PNG hero-car-cut.webp) */ .hero__stage{ position:relative; z-index:2; width:100%; display:grid; place-items:center; animation:float 7s ease-in-out infinite; } .hero__stage .hero__car{ display:block; width:104%; max-width:none; height:auto; filter:drop-shadow(0 0 30px rgba(240,28,40,.4)) drop-shadow(0 22px 26px rgba(0,0,0,.45)); } .hero__stage-badge{ display:none; } /* Fallback: framed showcase (added by onerror when transparent PNG is absent) */ .hero__stage--framed{ max-width:600px; border-radius:24px; overflow:hidden; place-items:stretch; border:1px solid rgba(255,255,255,.10); background:#08080a; box-shadow:0 34px 80px -28px rgba(0,0,0,.85), 0 0 110px -34px rgba(240,28,40,.5); } .hero__stage--framed .hero__car{ width:100%; filter:none; } .hero__stage--framed::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -50px 60px -34px rgba(8,8,10,.7); } .hero__stage--framed .hero__stage-badge{ position:absolute; left:16px; bottom:16px; z-index:3; display:inline-flex; align-items:center; font-size:12px; font-weight:700; letter-spacing:.03em; color:#fff; padding:8px 14px; border-radius:100px; background:rgba(10,10,12,.6); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(8px); } /* Stats */ .stats{ margin-top:36px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; } .stat{ background:var(--surface); padding:26px 24px; transition:background-color .25s; } .stat:hover{ background:var(--surface-2); } .stat__num{ display:block; font-size:clamp(28px,3.4vw,40px); font-weight:800; letter-spacing:-.02em; background:linear-gradient(180deg,#fff,#ffb0b0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .stat__label{ display:block; margin-top:6px; font-size:14px; color:var(--text-mute); } /* ============================================================ SECTION SHELL ============================================================ */ .section{ padding:clamp(42px, 5vw, 74px) 0; position:relative; } .section--alt{ background:linear-gradient(180deg, var(--bg-2), transparent 30%, transparent 70%, var(--bg-2)); } .section__head{ max-width:680px; margin:0 auto clamp(28px,3.4vw,44px); text-align:center; } .section__head--left{ margin-inline:0; text-align:left; } .section__tag{ display:inline-block; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--red-bright); padding:7px 15px; border-radius:100px; background:var(--red-soft); border:1px solid rgba(240,28,40,.25); margin-bottom:18px; } .section__title{ font-size:clamp(30px,4.2vw,52px); font-weight:800; line-height:1.08; letter-spacing:-.02em; } .section__sub{ margin-top:16px; font-size:clamp(15px,1.3vw,18px); color:var(--text-dim); } /* ============================================================ FEATURES (bento) ============================================================ */ .features{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .feature{ position:relative; padding:30px; border-radius:var(--radius); min-height:236px; background:var(--surface); border:1px solid var(--border); transition:transform .3s var(--ease), border-color .3s, background-color .3s; overflow:hidden; isolation:isolate; } .feature__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.52; transition:opacity .45s var(--ease), transform .6s var(--ease); } .feature::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit; background: linear-gradient(100deg, var(--surface) 16%, rgba(20,20,23,.62) 52%, rgba(20,20,23,.20) 100%), linear-gradient(0deg, rgba(10,10,12,.82) 6%, transparent 58%); } .feature::after{ content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; pointer-events:none; background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(240,28,40,.16), transparent 45%); opacity:0; transition:opacity .3s; } .feature > .feature__icon, .feature > .feature__title, .feature > .feature__text{ position:relative; z-index:3; } .feature:hover{ transform:translateY(-4px); border-color:var(--red); } .feature:hover::after{ opacity:1; } .feature:hover .feature__bg{ opacity:.68; transform:scale(1.05); } .feature__icon{ display:grid; place-items:center; width:54px; height:54px; border-radius:14px; background:var(--red-soft); border:1px solid rgba(240,28,40,.25); color:var(--red-bright); margin-bottom:20px; transition:transform .3s var(--ease); } .feature:hover .feature__icon{ transform:scale(1.06) rotate(-3deg); } .feature__title{ font-size:20px; font-weight:700; letter-spacing:-.01em; margin-bottom:10px; } .feature__text{ font-size:15px; color:var(--text-dim); } .badges{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:28px; } .badge{ display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:15px; padding:13px 22px; border-radius:100px; background:var(--surface); border:1px solid var(--border); color:var(--text-dim); transition:border-color .25s, color .25s; } .badge .icon{ width:20px; height:20px; color:var(--red-bright); } .badge:hover{ border-color:var(--red); color:#fff; } /* ============================================================ STEPS ============================================================ */ .steps{ position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:16px; } .steps__line{ position:absolute; top:34px; left:6%; right:6%; height:2px; z-index:0; background:linear-gradient(90deg, transparent, rgba(240,28,40,.5), rgba(240,28,40,.5), transparent); } .step{ position:relative; z-index:1; padding:24px 20px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); transition:transform .3s var(--ease), border-color .3s, background-color .3s; } .step:hover{ transform:translateY(-4px); border-color:var(--red); background:var(--surface-2); } .step__num{ display:inline-grid; place-items:center; width:46px; height:46px; border-radius:50%; font-weight:800; font-size:16px; color:#fff; background:var(--grad-red); box-shadow:0 8px 22px -6px rgba(240,28,40,.6); margin-bottom:16px; } .step__title{ font-size:18px; font-weight:700; margin-bottom:8px; } .step__text{ font-size:14px; color:var(--text-dim); } /* Countries */ .countries{ margin-top:30px; padding:clamp(24px,3vw,40px); border-radius:var(--radius-lg); background:linear-gradient(135deg, var(--surface-2), var(--surface)); border:1px solid var(--border); position:relative; overflow:hidden; } .countries::before{ content:""; position:absolute; top:-30%; right:-10%; width:420px; height:420px; background:radial-gradient(circle, rgba(240,28,40,.18), transparent 60%); pointer-events:none; } .countries__head{ position:relative; margin-bottom:26px; } .countries__title{ font-size:clamp(22px,2.6vw,30px); font-weight:800; letter-spacing:-.01em; } .countries__sub{ color:var(--text-dim); margin-top:8px; } .countries__grid{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .country{ display:flex; flex-direction:column; border-radius:var(--radius); overflow:hidden; background:rgba(10,10,12,.55); border:1px solid var(--border); transition:transform .3s var(--ease), border-color .3s; } .country:hover{ transform:translateY(-4px); border-color:var(--red); } .country__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:#000; } .country__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); } .country:hover .country__media img{ transform:scale(1.06); } .country__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 52%, rgba(10,10,12,.9) 100%); } .country__body{ padding:18px 20px 20px; } .country__row{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .country__body h4{ font-size:19px; font-weight:800; } .country__body p{ font-size:14px; color:var(--text-dim); margin-top:6px; } .country__chip{ font-size:12px; font-weight:700; color:var(--red-bright); white-space:nowrap; padding:6px 12px; border-radius:100px; background:var(--red-soft); border:1px solid rgba(240,28,40,.25); } /* Logistics (route map + ship) */ .logistics{ position:relative; display:grid; grid-template-columns:1.55fr 1fr; gap:16px; margin-top:24px; } .logistics__map{ position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border-2); min-height:300px; background:#000; } .logistics__map img{ width:100%; height:100%; object-fit:cover; } .logistics__map::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,12,.15), transparent 32%, rgba(10,10,12,.6)); } .logistics__cap{ position:absolute; left:22px; right:22px; bottom:20px; z-index:2; } .logistics__cap-tag{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--red-bright); padding:7px 14px; border-radius:100px; background:rgba(10,10,12,.7); border:1px solid rgba(240,28,40,.3); backdrop-filter:blur(6px); } .logistics__cap-tag .icon{ width:15px; height:15px; } .logistics__cap strong{ display:block; margin-top:12px; font-size:clamp(17px,1.9vw,24px); font-weight:800; letter-spacing:-.01em; text-shadow:0 2px 22px rgba(0,0,0,.85); } .logistics__side{ display:flex; flex-direction:column; gap:16px; } .logistics__ship{ position:relative; flex:1; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border-2); min-height:178px; background:#000; } .logistics__ship img{ width:100%; height:100%; object-fit:cover; } .logistics__ship::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 38%, rgba(10,10,12,.88)); } .logistics__ship figcaption{ position:absolute; left:18px; right:18px; bottom:16px; z-index:2; } .logistics__ship figcaption strong{ display:block; font-size:17px; font-weight:800; } .logistics__ship figcaption span{ display:block; font-size:13px; color:var(--text-dim); margin-top:3px; } /* ============================================================ REVIEWS ============================================================ */ .reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .review{ display:flex; flex-direction:column; border-radius:var(--radius); overflow:hidden; background:var(--surface); border:1px solid var(--border); transition:transform .3s var(--ease), border-color .3s; } .review:hover{ transform:translateY(-4px); border-color:var(--border-2); } .review__photo{ aspect-ratio:4/3; overflow:hidden; background:var(--surface-3); } .review__photo img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); } .review:hover .review__photo img{ transform:scale(1.05); } .review__body{ padding:22px; display:flex; flex-direction:column; gap:12px; flex:1; } .review__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .review__name{ display:block; font-weight:700; font-size:16px; } .review__car{ display:block; font-size:13px; color:var(--red-bright); font-weight:600; margin-top:2px; } .stars{ color:#ffb020; font-size:15px; letter-spacing:1px; flex-shrink:0; } .review__text{ font-size:14.5px; color:var(--text-dim); } .reviews__cta{ margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; padding:24px clamp(22px,3vw,34px); border-radius:var(--radius-lg); background:linear-gradient(135deg, rgba(240,28,40,.14), var(--surface)); border:1px solid rgba(240,28,40,.25); } .reviews__cta-text{ display:flex; flex-direction:column; } .reviews__cta-text strong{ font-size:18px; } .reviews__cta-text span{ color:var(--text-dim); font-size:14px; } .reviews__cta-links{ display:flex; flex-wrap:wrap; gap:10px; } /* ============================================================ FAQ ============================================================ */ .faq__layout{ display:grid; grid-template-columns:1.3fr .9fr; gap:40px; align-items:start; } .faq__list{ display:flex; flex-direction:column; gap:12px; } .faq__item{ border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); transition:border-color .25s, background-color .25s; overflow:hidden; } .faq__item[open]{ border-color:var(--border-2); background:var(--surface-2); } .faq__item:hover{ border-color:var(--border-2); } .faq__q{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; font-weight:700; font-size:17px; cursor:pointer; list-style:none; user-select:none; } .faq__q::-webkit-details-marker{ display:none; } .faq__plus{ position:relative; width:22px; height:22px; flex-shrink:0; } .faq__plus::before,.faq__plus::after{ content:""; position:absolute; top:50%; left:50%; width:13px; height:2px; background:var(--red-bright); border-radius:2px; transform:translate(-50%,-50%); transition:transform .3s var(--ease); } .faq__plus::after{ transform:translate(-50%,-50%) rotate(90deg); } .faq__item[open] .faq__plus::after{ transform:translate(-50%,-50%) rotate(0); } .faq__a{ padding:0 24px 22px; color:var(--text-dim); font-size:15px; } /* Help card */ .help-card{ position:relative; padding:clamp(24px,3vw,32px); border-radius:var(--radius-lg); background:linear-gradient(160deg, var(--surface-2), var(--surface)); border:1px solid var(--border-2); overflow:hidden; position:sticky; top:96px; } .help-card__glow{ position:absolute; top:-40%; right:-30%; width:340px; height:340px; background:radial-gradient(circle, rgba(240,28,40,.3), transparent 60%); pointer-events:none; } .help-card__top{ position:relative; margin-bottom:22px; } .help-card__title{ font-size:clamp(22px,2.4vw,28px); font-weight:800; margin:12px 0 8px; letter-spacing:-.01em; } .help-card__sub{ color:var(--text-dim); font-size:15px; } .form{ position:relative; display:flex; flex-direction:column; gap:14px; } .field{ display:flex; flex-direction:column; gap:7px; } .field__label{ font-size:13px; font-weight:600; color:var(--text-mute); padding-left:4px; } .field__input{ width:100%; padding:15px 18px; border-radius:var(--radius-sm); font-size:15px; color:var(--text); background:rgba(10,10,12,.6); border:1px solid var(--border-2); transition:border-color .2s, box-shadow .2s; } .field__input::placeholder{ color:var(--text-mute); } .field__input:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 4px var(--red-soft); } .field__input.is-error{ border-color:#ff4d4d; box-shadow:0 0 0 4px rgba(255,77,77,.15); } .form__note{ font-size:12px; color:var(--text-mute); text-align:center; margin-top:2px; } .manager-card--inset{ margin-top:20px; width:100%; max-width:none; background:rgba(10,10,12,.5); } /* ============================================================ CONTACTS ============================================================ */ .contacts{ display:grid; grid-template-columns:1fr 1.1fr; gap:24px; } .contacts__info{ display:flex; flex-direction:column; gap:14px; } .contact-item{ display:flex; align-items:center; gap:16px; padding:20px 22px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); transition:border-color .25s, transform .25s, background-color .25s; } .contact-item:not(.contact-item--static):hover{ border-color:var(--red); transform:translateX(4px); background:var(--surface-2); } .contact-item__icon{ display:grid; place-items:center; width:50px; height:50px; border-radius:14px; flex-shrink:0; background:var(--red-soft); border:1px solid rgba(240,28,40,.25); color:var(--red-bright); } .contact-item__label{ display:block; font-size:13px; color:var(--text-mute); font-weight:600; } .contact-item__value{ display:block; font-size:17px; font-weight:700; margin-top:2px; } .socials{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:4px; } .social{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--border); transition:border-color .25s, transform .25s, background-color .25s; } .social:hover{ border-color:var(--red); transform:translateY(-2px); background:var(--surface-2); } .social__ico{ display:grid; place-items:center; width:44px; height:44px; border-radius:12px; flex-shrink:0; background:var(--red-soft); border:1px solid rgba(240,28,40,.25); color:var(--red-bright); transition:background-color .25s, color .25s, border-color .25s; } .social:hover .social__ico{ background:var(--grad-red); color:#fff; border-color:transparent; } .social__txt{ display:flex; flex-direction:column; gap:2px; min-width:0; } .social__name{ font-weight:800; font-size:16px; } .social__handle{ font-size:13px; color:var(--text-mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .contacts__map{ position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:420px; border:1px solid var(--border-2); display:block; background:var(--surface); transition:border-color .25s; } .contacts__map:hover{ border-color:var(--red); } .map__frame{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.95) saturate(.85); } .map__open{ position:absolute; right:14px; bottom:14px; z-index:3; display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:#fff; padding:11px 18px; border-radius:100px; background:var(--grad-red); box-shadow:var(--shadow-red); transition:transform .25s var(--ease), box-shadow .25s; } .map__open .icon{ width:17px; height:17px; } .map__open:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -10px rgba(240,28,40,.7); } /* ============================================================ FOOTER ============================================================ */ .footer{ border-top:1px solid var(--border); padding-top:clamp(40px,5vw,64px); margin-top:20px; } .footer__inner{ display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:40px; padding-bottom:40px; } .footer__tagline{ color:var(--text-dim); font-size:15px; margin-top:16px; max-width:320px; } .footer__nav{ display:flex; flex-direction:column; gap:12px; } .footer__nav a{ color:var(--text-dim); font-weight:600; transition:color .2s; width:max-content; } .footer__nav a:hover{ color:var(--red-bright); } .footer__contact{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; } .footer__phone{ font-size:22px; font-weight:800; letter-spacing:-.01em; } .footer__phone:hover{ color:var(--red-bright); } .footer__addr{ color:var(--text-dim); font-size:14px; margin-bottom:6px; } .footer__bottom{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; padding:22px 0; border-top:1px solid var(--border); color:var(--text-mute); font-size:14px; } .footer__socials{ display:flex; gap:10px; } /* ============================================================ FAB (mobile floating CTA) ============================================================ */ .fab{ position:fixed; right:18px; bottom:18px; z-index:var(--z-fab); display:none; align-items:center; gap:10px; padding:15px 22px; border-radius:100px; font-weight:700; color:#fff; background:var(--grad-red); box-shadow:var(--shadow-red); animation:fab-in .5s var(--ease) both; } .fab .icon{ width:20px; height:20px; } /* ============================================================ TOAST ============================================================ */ .toast{ position:fixed; left:50%; bottom:28px; transform:translate(-50%,140%); z-index:var(--z-toast); max-width:90vw; display:flex; align-items:center; gap:10px; padding:15px 24px; border-radius:100px; background:var(--surface-3); border:1px solid var(--red); color:#fff; font-weight:600; box-shadow:var(--shadow); opacity:0; visibility:hidden; pointer-events:none; transition:transform .45s var(--ease), opacity .3s var(--ease), visibility .45s; } .toast.is-show{ transform:translate(-50%,0); opacity:1; visibility:visible; pointer-events:auto; } /* ============================================================ REVEAL ANIMATION ============================================================ */ .reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .reveal[data-delay="1"]{ transition-delay:.12s; } .reveal.is-visible{ opacity:1; transform:none; } /* ============================================================ KEYFRAMES ============================================================ */ @keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 var(--red-soft); } 50%{ box-shadow:0 0 0 6px transparent; } } @keyframes pulse-green{ 0%{ box-shadow:0 0 0 0 rgba(52,211,107,.6);} 70%{ box-shadow:0 0 0 8px rgba(52,211,107,0);} 100%{ box-shadow:0 0 0 0 rgba(52,211,107,0);} } @keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} } @keyframes bounce{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} } @keyframes fab-in{ from{ opacity:0; transform:translateY(30px);} to{ opacity:1; transform:none;} } /* ============================================================ RESPONSIVE ============================================================ */ /* Header: switch to burger when the 7-item nav no longer fits */ @media (max-width:1200px){ .nav{ display:none; } .burger{ display:flex; } } @media (max-width:1080px){ .nav{ display:none; } .burger{ display:flex; } .header__cta{ display:none; } .features{ grid-template-columns:repeat(2,1fr); } .steps{ grid-template-columns:repeat(3,1fr); } .steps__line{ display:none; } .reviews{ grid-template-columns:repeat(2,1fr); } .faq__layout{ grid-template-columns:1fr; } .help-card{ position:relative; top:auto; } } @media (max-width:860px){ .hero__inner{ grid-template-columns:1fr; gap:10px; } .hero__visual{ order:-1; min-height:230px; } .hero__stage{ width:100%; max-width:480px; } .stats{ grid-template-columns:repeat(2,1fr); } .countries__grid{ grid-template-columns:1fr; } .contacts{ grid-template-columns:1fr; } .footer__inner{ grid-template-columns:1fr 1fr; } .footer__contact{ grid-column:1/-1; } .fab{ display:inline-flex; } } @media (max-width:640px){ .header__phone span{ display:none; } .header__phone{ width:44px; height:44px; justify-content:center; border:1px solid var(--border-2); border-radius:12px; } .features{ grid-template-columns:1fr; } .steps{ grid-template-columns:1fr 1fr; } .reviews{ grid-template-columns:1fr; } .socials{ grid-template-columns:1fr; } .footer__inner{ grid-template-columns:1fr; } .reviews__cta,.countries__route{ flex-direction:column; align-items:stretch; text-align:center; } .reviews__cta-links{ justify-content:center; } .route{ justify-content:center; } .btn--lg{ width:100%; } .hero__actions{ flex-direction:column; } .hero__actions .btn{ width:100%; } } @media (max-width:380px){ .stats{ grid-template-columns:1fr; } .steps{ grid-template-columns:1fr; } } /* ============================================================ ACCESSIBILITY ============================================================ */ :focus-visible{ outline:3px solid var(--red); outline-offset:3px; border-radius:6px; } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .reveal{ opacity:1; transform:none; } } /* ============================================================ IMAGE INTEGRATION — decor, social icons, help-card bg ============================================================ */ /* Section decorative layers */ .section--decor{ position:relative; overflow:hidden; } .section--decor > .container{ position:relative; z-index:1; } .decor-car{ position:absolute; top:-30px; right:-70px; width:min(440px,44vw); z-index:0; opacity:.30; pointer-events:none; user-select:none; -webkit-mask-image:radial-gradient(72% 72% at 62% 42%, #000, transparent 76%); mask-image:radial-gradient(72% 72% at 62% 42%, #000, transparent 76%); } .decor-wave{ display:none; } .decor-wave--left{ left:-50px; bottom:-30px; width:min(320px,30vw); } .decor-glow{ position:absolute; z-index:0; pointer-events:none; user-select:none; border-radius:50%; aspect-ratio:1; background:radial-gradient(circle, rgba(240,28,40,.22), transparent 68%); filter:blur(38px); } .decor-glow--right{ right:-9%; top:2%; width:min(520px,48vw); } /* Help-card background image */ .help-card__bg{ position:absolute; top:0; left:0; width:100%; height:50%; object-fit:cover; object-position:center 30%; z-index:0; opacity:.5; pointer-events:none; -webkit-mask-image:linear-gradient(180deg, #000 30%, transparent 100%); mask-image:linear-gradient(180deg, #000 30%, transparent 100%); } .help-card__glow{ z-index:1; } .help-card__top, .help-card .form, .help-card .manager-card--inset{ position:relative; z-index:2; } /* Brand social icons */ .ic-soc{ width:20px; height:20px; display:block; color:inherit; } .btn .ic-soc{ width:18px; height:18px; } .soc-btn{ display:inline-grid; place-items:center; width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,.04); border:1px solid var(--border-2); color:var(--text); transition:background-color .25s var(--ease), border-color .25s, color .25s, transform .25s var(--ease), box-shadow .25s; } .soc-btn:hover{ background:var(--grad-red); border-color:transparent; color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-red); } .soc-btn--sm{ width:42px; height:42px; } .soc-btn--sm .ic-soc{ width:18px; height:18px; } /* Responsive — image blocks */ @media (max-width:980px){ .logistics{ grid-template-columns:1fr; } } @media (max-width:860px){ .decor-car{ display:none; } } @media (max-width:640px){ .country__media{ aspect-ratio:16/9; } .feature{ min-height:200px; } .decor-glow{ opacity:.5; } } /* ============================================================ WHOLESALE PARTS ============================================================ */ .parts{ display:grid; grid-template-columns:1.05fr .95fr; gap:18px; align-items:stretch; } .parts__card{ position:relative; overflow:hidden; padding:clamp(24px,3vw,36px); border-radius:var(--radius-lg); border:1px solid var(--border); background:linear-gradient(160deg, var(--surface-2), var(--surface)); } .parts__card--main{ display:flex; flex-direction:column; } .parts__lead{ color:var(--text-dim); font-size:16px; } .parts__list{ display:flex; flex-direction:column; gap:14px; margin:22px 0 24px; } .parts__list li{ display:flex; align-items:center; gap:13px; font-weight:600; font-size:15.5px; } .parts__check{ display:grid; place-items:center; width:27px; height:27px; border-radius:50%; flex-shrink:0; background:var(--grad-red); color:#fff; box-shadow:0 6px 16px -6px rgba(240,28,40,.6); } .parts__check .icon{ width:15px; height:15px; stroke-width:3; } .parts__flags{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; } .parts__flag{ font-size:13px; font-weight:700; color:var(--red-bright); padding:8px 15px; border-radius:100px; background:var(--red-soft); border:1px solid rgba(240,28,40,.25); } .parts__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:auto; } .parts__card--cats{ display:flex; flex-direction:column; } .parts__cats-title{ font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute); margin-bottom:16px; } .parts__cats{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .part-cat{ display:flex; align-items:center; gap:12px; padding:15px 16px; border-radius:var(--radius-sm); background:rgba(10,10,12,.5); border:1px solid var(--border); font-weight:600; font-size:14.5px; transition:border-color .25s, transform .25s, background-color .25s; } .part-cat:hover{ border-color:var(--red); transform:translateY(-2px); background:var(--surface-2); } .part-cat__ico{ display:grid; place-items:center; width:40px; height:40px; border-radius:11px; flex-shrink:0; background:var(--red-soft); border:1px solid rgba(240,28,40,.25); color:var(--red-bright); } .part-cat__ico .icon{ width:20px; height:20px; } .parts__note{ margin-top:18px; font-size:13px; color:var(--text-mute); } .decor-glow--left{ left:-10%; top:4%; width:min(520px,50vw); } @media (max-width:900px){ .parts{ grid-template-columns:1fr; } } @media (max-width:520px){ .parts__cats{ grid-template-columns:1fr; } .parts__cta .btn{ width:100%; } } /* ============================================================ MARKET ACCESS (catalog / calc / stats) ============================================================ */ .access{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .access-card{ display:flex; flex-direction:column; padding:30px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); position:relative; overflow:hidden; transition:transform .3s var(--ease), border-color .3s, background-color .3s; } .access-card:hover{ transform:translateY(-4px); border-color:var(--red); background:var(--surface-2); } .access-card__head{ display:flex; align-items:center; gap:12px; margin-bottom:20px; } .access-card__num{ font-weight:800; font-size:15px; color:var(--red-bright); } .access-card__label{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute); } .access-card__stat{ font-size:clamp(38px,4.4vw,52px); font-weight:800; letter-spacing:-.02em; line-height:1; background:linear-gradient(180deg,#fff,#ffb0b0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .access-card__stat span{ font-size:.42em; -webkit-text-fill-color:var(--red-bright); color:var(--red-bright); margin-left:4px; } .access-card__desc{ font-size:15px; color:var(--text-dim); margin-top:12px; } .access-card__flags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; } .access-flag{ font-size:13px; font-weight:700; color:var(--red-bright); padding:7px 14px; border-radius:100px; background:var(--red-soft); border:1px solid rgba(240,28,40,.25); } .access-card__list{ display:flex; flex-direction:column; gap:11px; margin-top:18px; } .access-card__list li{ position:relative; padding-left:24px; font-size:14.5px; color:var(--text-dim); font-weight:500; } .access-card__list li::before{ content:""; position:absolute; left:3px; top:7px; width:7px; height:7px; border-radius:50%; background:var(--red-bright); box-shadow:0 0 0 4px var(--red-soft); } .access-card__link{ display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:22px; font-weight:700; font-size:15px; color:var(--red-bright); transition:color .2s; } .access-card__link .icon{ width:18px; height:18px; transition:transform .25s var(--ease); } .access-card__link:hover{ color:#fff; } .access-card__link:hover .icon{ transform:translateX(4px); } /* mini bar chart */ .access-chart{ display:flex; align-items:flex-end; gap:10px; height:150px; margin:6px 0 2px; padding-top:26px; } .access-bar{ position:relative; flex:1; height:var(--h,50%); border-radius:8px 8px 2px 2px; background:linear-gradient(180deg, var(--red-bright), var(--red-deep)); box-shadow:0 0 22px -8px rgba(240,28,40,.6); } .access-bar__val{ position:absolute; top:-24px; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:11px; font-weight:700; color:#fff; background:var(--surface-3); border:1px solid var(--border-2); padding:3px 8px; border-radius:100px; } @media (max-width:820px){ .access{ grid-template-columns:1fr; } } @media (max-width:560px){ .access-card{ padding:24px; } } /* "Почему выбирают Осака Авто" — keep on one line on wider screens */ #why .section__head{ max-width:820px; } @media (min-width:600px){ #why .section__title{ white-space:nowrap; } } /* ============================================================ WARRANTY (China used cars) ============================================================ */ .warranty{ display:grid; grid-template-columns:1.25fr .75fr; gap:18px; align-items:stretch; } .warranty__main{ padding:clamp(26px,3vw,40px); border-radius:var(--radius-lg); border:1px solid var(--border); background:linear-gradient(160deg,var(--surface-2),var(--surface)); display:flex; flex-direction:column; } .warranty__icon{ display:grid; place-items:center; width:60px; height:60px; border-radius:16px; background:var(--red-soft); border:1px solid rgba(240,28,40,.25); color:var(--red-bright); margin-bottom:20px; } .warranty__icon .icon{ width:30px; height:30px; } .warranty__title{ font-size:clamp(20px,2.4vw,27px); font-weight:800; letter-spacing:-.01em; } .warranty__text{ font-size:16px; color:var(--text-dim); margin-top:12px; } .warranty__text strong{ color:var(--red-bright); font-weight:800; } .warranty__chips{ display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 26px; } .warranty__chip{ display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--text-dim); padding:9px 15px; border-radius:100px; background:rgba(10,10,12,.5); border:1px solid var(--border); } .warranty__chip::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--red-bright); box-shadow:0 0 0 4px var(--red-soft); } .warranty__main .btn{ margin-top:auto; align-self:flex-start; } .warranty__terms{ position:relative; overflow:hidden; padding:clamp(26px,3vw,36px); border-radius:var(--radius-lg); border:1px solid rgba(240,28,40,.3); background:linear-gradient(160deg, rgba(240,28,40,.16), var(--surface)); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; } .warranty__terms::before{ content:""; position:absolute; top:-30%; right:-25%; width:260px; height:260px; background:radial-gradient(circle, rgba(240,28,40,.28), transparent 60%); pointer-events:none; } .warranty__terms-tag{ position:relative; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--red-bright); } .warranty__nums{ position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; margin:18px 0 12px; } .warranty__term{ display:flex; flex-direction:column; } .warranty__num{ font-size:clamp(42px,6vw,60px); font-weight:800; line-height:1; letter-spacing:-.02em; background:linear-gradient(180deg,#fff,#ffb0b0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .warranty__unit{ font-size:15px; color:var(--text-dim); font-weight:600; margin-top:8px; } .warranty__or{ font-size:13px; font-weight:700; color:var(--text-mute); text-transform:uppercase; letter-spacing:.1em; } .warranty__note{ position:relative; font-size:14px; color:var(--text-dim); margin-top:6px; } @media (max-width:820px){ .warranty{ grid-template-columns:1fr; } }