/* ============================================================= FARIZON — Core stylesheet (shared, direction-agnostic) Holds: design tokens, reset, base type, shared components. Language sheets (style-en.css / style-ar.css) only set fonts and direction-specific fixes. Uses CSS logical properties so RTL works automatically when . ============================================================= */ /* ---------- Design tokens ---------- */ :root { /* Brand palette (extracted from Farizon assets) */ --c-bg: #0A0E17; /* deep near-black navy */ --c-bg-2: #0F1422; /* raised panel */ --c-bg-3: #151C2E; /* card on dark */ --c-surface: #FFFFFF; /* light section */ --c-surface-2: #F3F6FB; /* light gray section */ --c-surface-3: #E9EEF6; --c-ink: #0B1020; /* text on light */ --c-ink-2: #515b70; /* muted on light */ --c-text: #E8ECF5; /* text on dark */ --c-text-2: #9AA4BA; /* muted on dark */ --c-primary: #1F6BFF; /* electric blue */ --c-primary-2: #4E8DFF; --c-primary-d: #1550CC; --c-green: #15C98C; /* sustainability accent */ --c-glow: rgba(31,107,255,.55); --c-line-dark: rgba(255,255,255,.10); --c-line-light: rgba(11,16,32,.10); /* Typography (families overridden by language sheet) */ --ff-head: 'Poppins', system-ui, sans-serif; --ff-body: 'Inter', system-ui, sans-serif; --fs-eyebrow: .82rem; --fs-h1: clamp(2.4rem, 1.2rem + 4.4vw, 4.6rem); --fs-h2: clamp(1.95rem, 1.2rem + 2.6vw, 3.1rem); --fs-h3: clamp(1.3rem, 1.05rem + 1vw, 1.7rem); --fs-lead: clamp(1.02rem, .96rem + .4vw, 1.22rem); --fs-body: 1rem; --fs-sm: .9rem; /* Spacing / layout */ --container: 1240px; --gap: clamp(1rem, .6rem + 1.6vw, 2rem); --section-y: clamp(4rem, 2.5rem + 5vw, 8rem); --radius: 18px; --radius-sm: 12px; --radius-lg: 28px; /* Effects */ --shadow-sm: 0 6px 20px rgba(8,12,24,.10); --shadow-md: 0 18px 50px rgba(8,12,24,.16); --shadow-glow: 0 12px 40px rgba(31,107,255,.35); --ease: cubic-bezier(.22,.61,.36,1); --t-fast: .25s var(--ease); --t: .4s var(--ease); --t-slow: .6s var(--ease); --header-h: 84px; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--ff-body); font-size: var(--fs-body); line-height: 1.65; color: var(--c-ink); background: var(--c-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul { list-style: none; padding: 0; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; } input, textarea, select { font: inherit; } h1, h2, h3, h4 { font-family: var(--ff-head); line-height: 1.12; font-weight: 700; letter-spacing: -.01em; } :focus-visible { outline: 2px solid var(--c-primary-2); outline-offset: 3px; border-radius: 4px; } /* ---------- Layout helpers ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.1rem, .6rem + 2vw, 2.2rem); } .section { padding-block: var(--section-y); position: relative; } .section--dark { background: var(--c-bg); color: var(--c-text); } .section--panel { background: var(--c-bg-2); color: var(--c-text); } .section--light { background: var(--c-surface); color: var(--c-ink); } .section--gray { background: var(--c-surface-2); color: var(--c-ink); } .section__head { max-width: 720px; margin-bottom: clamp(2.2rem, 1.5rem + 2vw, 3.6rem); } .section__head--center { margin-inline: auto; text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--ff-head); font-weight: 600; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .18em; color: var(--c-primary-2); margin-bottom: 1rem; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; } .section__head--center .eyebrow::before { display: none; } .section__title { font-size: var(--fs-h2); } .section--dark .section__title, .section--panel .section__title { color: #fff; } .section__desc { margin-top: 1rem; font-size: var(--fs-lead); color: var(--c-ink-2); } .section--dark .section__desc, .section--panel .section__desc { color: var(--c-text-2); } .text-grad { background: linear-gradient(100deg, #fff 0%, var(--c-primary-2) 55%, var(--c-primary) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- Buttons ---------- */ .btn { --btn-bg: var(--c-primary); --btn-fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .92em 1.7em; border-radius: 999px; font-family: var(--ff-head); font-weight: 600; font-size: .98rem; letter-spacing: .01em; background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid transparent; position: relative; overflow: hidden; transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast); white-space: nowrap; } .btn svg { width: 1.1em; height: 1.1em; } .btn:hover { transform: translateY(-3px); } .btn:active { transform: translateY(-1px); } .btn--primary { box-shadow: var(--shadow-glow); } .btn--primary:hover { background: var(--c-primary-2); box-shadow: 0 16px 46px rgba(31,107,255,.5); } .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); } .btn--ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; } .btn--light { background: #fff; color: var(--c-ink); } .btn--light:hover { background: #fff; box-shadow: var(--shadow-md); } .btn--dark { background: var(--c-ink); color: #fff; } .btn--dark:hover { background: #000; } .btn--play { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.3); backdrop-filter: blur(6px); } .btn--play:hover { background: rgba(255,255,255,.18); } .btn--play .play-ic { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--c-primary); margin-inline-start: -.4em; } .btn--play .play-ic svg { width: .8em; height: .8em; fill: #fff; } .link-more { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--ff-head); font-weight: 600; font-size: .94rem; color: var(--c-primary); transition: gap var(--t-fast), color var(--t-fast); } .link-more .arrow { transition: transform var(--t-fast); } .link-more:hover { gap: .85rem; } [dir="rtl"] .link-more .arrow { transform: scaleX(-1); } [dir="rtl"] .link-more:hover .arrow { transform: scaleX(-1) translateX(3px); } /* ============================================================ HEADER / NAV ============================================================ */ .site-header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; transition: background var(--t), backdrop-filter var(--t), box-shadow var(--t), padding var(--t); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: var(--header-h); transition: height var(--t); } .brand { display: inline-flex; align-items: center; z-index: 2; } .brand img { height: 30px; width: auto; } .site-header.scrolled { background: rgba(10,14,23,.82); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 1px 0 var(--c-line-dark); } .site-header.scrolled .site-header__inner { height: 66px; } .nav { display: flex; align-items: center; gap: clamp(1rem, .3rem + 1.6vw, 2.4rem); } .nav__list { display: flex; align-items: center; gap: clamp(1rem, .2rem + 1.4vw, 2.2rem); } .nav__link { position: relative; font-family: var(--ff-head); font-weight: 500; font-size: .98rem; color: rgba(255,255,255,.86); padding-block: .4rem; transition: color var(--t-fast); } .nav__link::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; width: 0; height: 2px; background: var(--c-primary-2); border-radius: 2px; transition: width var(--t-fast); } .nav__link:hover, .nav__link.is-active { color: #fff; } .nav__link:hover::after, .nav__link.is-active::after { width: 100%; } .lang-switch { font-family: var(--ff-head); font-weight: 600; font-size: .9rem; color: #fff; border: 1.5px solid rgba(255,255,255,.3); border-radius: 999px; padding: .4em .9em; transition: background var(--t-fast), border-color var(--t-fast); } .lang-switch:hover { background: rgba(255,255,255,.1); border-color: #fff; } .nav-toggle { display: none; width: 44px; height: 44px; position: relative; z-index: 110; } .nav-toggle span { position: absolute; inset-inline: 10px; height: 2px; background: #fff; border-radius: 2px; transition: transform var(--t), opacity var(--t-fast), top var(--t); } .nav-toggle span:nth-child(1) { top: 15px; } .nav-toggle span:nth-child(2) { top: 21px; } .nav-toggle span:nth-child(3) { top: 27px; } body.nav-open .nav-toggle span:nth-child(1) { top: 21px; transform: rotate(45deg); } body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle span:nth-child(3) { top: 21px; transform: rotate(-45deg); } /* ============================================================ HERO SLIDER ============================================================ */ .hero { position: relative; height: 100svh; min-height: 620px; background: var(--c-bg); } .hero .swiper, .hero .swiper-wrapper, .hero .swiper-slide { height: 100%; } .hero__slide { position: relative; overflow: hidden; display: flex; align-items: center; } .hero__bg, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hero__bg { transform: scale(1.12); transition: transform 7s linear; } .swiper-slide-active .hero__bg { transform: scale(1); } .hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(10,14,23,.92) 0%, rgba(10,14,23,.35) 45%, rgba(10,14,23,.55) 100%), radial-gradient(120% 80% at 75% 30%, rgba(31,107,255,.20), transparent 60%); } .hero__content { position: relative; z-index: 2; width: 100%; padding-block: var(--header-h) 4rem; } .hero__inner { max-width: 760px; } .hero__eyebrow { display: inline-flex; align-items: center; gap: .6rem; padding: .5em 1.1em; margin-bottom: 1.4rem; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(255,255,255,.06); backdrop-filter: blur(6px); color: #fff; font-family: var(--ff-head); font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; } .hero__eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-green); box-shadow: 0 0 0 4px rgba(21,201,140,.25); } .hero__title { font-size: var(--fs-h1); color: #fff; } .hero__title .accent { color: var(--c-primary-2); } .hero__text { margin-top: 1.4rem; max-width: 560px; font-size: var(--fs-lead); color: rgba(255,255,255,.82); } .hero__actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; } /* Slide entrance animation (driven by Swiper active class) */ .hero__inner > * { opacity: 0; transform: translateY(34px); } .swiper-slide-active .hero__inner > * { animation: heroIn .9s var(--ease) forwards; } .swiper-slide-active .hero__inner > *:nth-child(1) { animation-delay: .15s; } .swiper-slide-active .hero__inner > *:nth-child(2) { animation-delay: .3s; } .swiper-slide-active .hero__inner > *:nth-child(3) { animation-delay: .45s; } .swiper-slide-active .hero__inner > *:nth-child(4) { animation-delay: .6s; } @keyframes heroIn { to { opacity: 1; transform: none; } } /* Swiper controls */ .hero .swiper-pagination { inset-block-end: 30px !important; display: flex; gap: .6rem; justify-content: center; } .hero .swiper-pagination-bullet { width: 30px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.4); opacity: 1; transition: background var(--t-fast), width var(--t-fast); } .hero .swiper-pagination-bullet-active { background: var(--c-primary-2); width: 48px; } .hero .swiper-button-next, .hero .swiper-button-prev { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(6px); color: #fff; transition: background var(--t-fast), border-color var(--t-fast); } .hero .swiper-button-next:hover, .hero .swiper-button-prev:hover { background: var(--c-primary); border-color: var(--c-primary); } .hero .swiper-button-next::after, .hero .swiper-button-prev::after { font-size: 18px; font-weight: 700; } .hero__scroll { position: absolute; inset-block-end: 26px; inset-inline-end: clamp(1.1rem, 2vw, 2.2rem); z-index: 3; display: flex; align-items: center; gap: .6rem; color: rgba(255,255,255,.7); font-family: var(--ff-head); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; } .hero__scroll .mouse { width: 22px; height: 36px; border: 2px solid rgba(255,255,255,.6); border-radius: 14px; position: relative; } .hero__scroll .mouse::after { content: ""; position: absolute; inset-inline-start: 50%; top: 7px; width: 3px; height: 7px; background: #fff; border-radius: 2px; transform: translateX(-50%); animation: wheel 1.6s infinite; } @keyframes wheel { 0% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 12px); } } /* ============================================================ ABOUT ============================================================ */ .about__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; } .about__media { position: relative; } .about__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .about__media::before { content: ""; position: absolute; inset-inline-start: -22px; inset-block-start: -22px; width: 120px; height: 120px; border-radius: 20px; background: linear-gradient(135deg, var(--c-primary), transparent); opacity: .4; z-index: -1; } .badge { position: absolute; display: flex; align-items: center; gap: .7rem; padding: .8rem 1.1rem; background: rgba(15,20,34,.92); color: #fff; border: 1px solid var(--c-line-dark); border-radius: 14px; box-shadow: var(--shadow-md); backdrop-filter: blur(8px); } .badge__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(31,107,255,.18); color: var(--c-primary-2); } .badge__ic svg { width: 20px; height: 20px; } .badge strong { font-family: var(--ff-head); font-size: 1.1rem; display: block; line-height: 1.1; } .badge span { font-size: .78rem; color: var(--c-text-2); } .badge--a { inset-block-end: 28px; inset-inline-start: -26px; } .badge--b { inset-block-start: 30px; inset-inline-end: -22px; } .about__body .btn { margin-top: 1.8rem; } .about__list { margin-top: 1.6rem; display: grid; gap: .9rem; } .about__list li { display: flex; gap: .8rem; align-items: flex-start; color: var(--c-ink-2); } .about__list .tick { flex: none; width: 24px; height: 24px; border-radius: 50%; background: rgba(21,201,140,.15); color: var(--c-green); display: grid; place-items: center; } .about__list .tick svg { width: 13px; height: 13px; } /* ============================================================ IMPACT (sustainability + world map) ============================================================ */ .impact { position: relative; overflow: hidden; } .impact__map { position: absolute; inset: 0; z-index: 0; background: center/cover no-repeat var(--c-bg); opacity: .5; -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 55%, transparent 100%); mask-image: radial-gradient(120% 90% at 50% 40%, #000 55%, transparent 100%); } .impact .container { position: relative; z-index: 2; } .impact__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, .4rem + 2vw, 2.4rem); margin-top: 3rem; } .stat { text-align: center; padding: 1.4rem 1rem; border-radius: var(--radius); background: rgba(255,255,255,.04); border: 1px solid var(--c-line-dark); transition: transform var(--t), border-color var(--t), background var(--t); } .stat:hover { transform: translateY(-6px); border-color: rgba(31,107,255,.5); background: rgba(31,107,255,.07); } .stat__num { font-family: var(--ff-head); font-weight: 800; font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem); line-height: 1; color: #fff; } .stat__num .suffix { color: var(--c-primary-2); } .stat__label { margin-top: .55rem; font-family: var(--ff-head); font-weight: 600; color: #fff; } .stat__sub { font-size: .82rem; color: var(--c-text-2); } .map-dot { position: absolute; z-index: 1; width: 11px; height: 11px; border-radius: 50%; background: var(--c-primary-2); box-shadow: 0 0 0 0 var(--c-glow); animation: ping 2.6s infinite var(--ease); } @keyframes ping { 0% { box-shadow: 0 0 0 0 var(--c-glow); } 70% { box-shadow: 0 0 0 16px rgba(31,107,255,0); } 100% { box-shadow: 0 0 0 0 rgba(31,107,255,0); } } /* ============================================================ LINEUP (premium vehicle lineup) ============================================================ */ .lineup__card { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, .5rem + 3vw, 3.5rem); align-items: center; background: var(--c-surface); border: 1px solid var(--c-line-light); border-radius: var(--radius-lg); padding: clamp(1.5rem, 1rem + 2vw, 3rem); box-shadow: var(--shadow-sm); } .lineup__media { position: relative; } .lineup__media img { width: 100%; } .lineup__name { font-size: var(--fs-h3); } .lineup__tag { color: var(--c-ink-2); margin-top: .5rem; } .specs { margin-top: 1.8rem; display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--c-line-light); border: 1px solid var(--c-line-light); border-radius: var(--radius-sm); overflow: hidden; } .spec { background: var(--c-surface); padding: 1.1rem 1.2rem; } .spec__label { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--c-ink-2); } .spec__val { font-family: var(--ff-head); font-weight: 700; font-size: 1.5rem; margin-top: .2rem; } .spec__val .u { font-size: .9rem; font-weight: 600; color: var(--c-primary); } .lineup__actions { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: .8rem; } /* ============================================================ PORTFOLIO ============================================================ */ .portfolio__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } .pcard { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--c-surface); border: 1px solid var(--c-line-light); box-shadow: var(--shadow-sm); transition: transform var(--t), box-shadow var(--t); } .pcard:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); } .pcard__media { position: relative; aspect-ratio: 16/11; overflow: hidden; background: var(--c-surface-3); } .pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); } .pcard:hover .pcard__media img { transform: scale(1.07); } .pcard__body { padding: 1.5rem 1.5rem 1.7rem; } .pcard__title { font-size: 1.22rem; } .pcard__text { margin-top: .5rem; color: var(--c-ink-2); font-size: .96rem; } .pcard__body .link-more { margin-top: 1.1rem; } /* ============================================================ FEATURES (why choose) ============================================================ */ .features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, .4rem + 1.6vw, 1.8rem); } .feature { padding: 2rem 1.8rem; border-radius: var(--radius); background: var(--c-bg-3); border: 1px solid var(--c-line-dark); position: relative; overflow: hidden; transition: transform var(--t), border-color var(--t), background var(--t); } .feature::after { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--c-primary), var(--c-green)); transform: scaleX(0); transform-origin: inline-start; transition: transform var(--t); } .feature:hover { transform: translateY(-6px); border-color: rgba(31,107,255,.4); background: #19223a; } .feature:hover::after { transform: scaleX(1); } .feature__icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; background: linear-gradient(135deg, rgba(31,107,255,.22), rgba(21,201,140,.14)); color: var(--c-primary-2); margin-bottom: 1.3rem; } .feature__icon svg { width: 28px; height: 28px; } .feature__title { color: #fff; font-size: 1.18rem; } .feature__text { margin-top: .55rem; color: var(--c-text-2); font-size: .95rem; } /* ============================================================ NEWS ============================================================ */ .news__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } .ncard { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--c-surface); border: 1px solid var(--c-line-light); box-shadow: var(--shadow-sm); transition: transform var(--t), box-shadow var(--t); } .ncard:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); } .ncard__media { position: relative; aspect-ratio: 16/10; overflow: hidden; } .ncard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); } .ncard:hover .ncard__media img { transform: scale(1.07); } .ncard__tag { position: absolute; inset-block-start: 14px; inset-inline-start: 14px; padding: .4em .9em; border-radius: 999px; background: rgba(10,14,23,.78); backdrop-filter: blur(6px); color: #fff; font-family: var(--ff-head); font-weight: 600; font-size: .76rem; letter-spacing: .04em; } .ncard__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; } .ncard__meta { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--c-ink-2); } .ncard__meta .dot-sep { width: 4px; height: 4px; border-radius: 50%; background: currentColor; } .ncard__title { margin-top: .7rem; font-size: 1.2rem; line-height: 1.3; } .ncard:hover .ncard__title { color: var(--c-primary); } .ncard__excerpt { margin-top: .7rem; color: var(--c-ink-2); font-size: .94rem; flex: 1; } .ncard__body .link-more { margin-top: 1.2rem; } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: var(--c-bg); color: var(--c-text-2); border-top: 1px solid var(--c-line-dark); padding-block: clamp(3rem, 2rem + 3vw, 5rem) 2rem; } .footer__top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(1.5rem, .5rem + 3vw, 3.5rem); } .footer__brand img { height: 30px; margin-bottom: 1.2rem; } .footer__brand p { max-width: 320px; font-size: .95rem; } .footer__social { display: flex; gap: .7rem; margin-top: 1.5rem; } .footer__social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--c-line-dark); color: #fff; transition: background var(--t-fast), transform var(--t-fast), border-color var(--t-fast); } .footer__social a:hover { background: var(--c-primary); border-color: var(--c-primary); transform: translateY(-3px); } .footer__social svg { width: 18px; height: 18px; } .footer__col h4 { color: #fff; font-size: 1rem; margin-bottom: 1.2rem; } .footer__col li { margin-bottom: .7rem; } .footer__col a { font-size: .94rem; transition: color var(--t-fast), padding-inline-start var(--t-fast); } .footer__col a:hover { color: #fff; padding-inline-start: 5px; } .footer__bottom { margin-top: clamp(2rem, 1rem + 2vw, 3.5rem); padding-top: 1.6rem; border-top: 1px solid var(--c-line-dark); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; font-size: .88rem; } .footer__legal { display: flex; flex-wrap: wrap; gap: 1.4rem; } .footer__legal a:hover { color: #fff; } /* ============================================================ VIDEO MODAL ============================================================ */ .video-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1.2rem; visibility: hidden; opacity: 0; transition: opacity var(--t), visibility var(--t); } .video-modal.open { visibility: visible; opacity: 1; } .video-modal__backdrop { position: absolute; inset: 0; background: rgba(5,8,15,.82); backdrop-filter: blur(8px); } .video-modal__dialog { position: relative; width: min(960px, 100%); aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: 0 40px 120px rgba(0,0,0,.6); transform: scale(.92) translateY(12px); transition: transform var(--t-slow); } .video-modal.open .video-modal__dialog { transform: scale(1) translateY(0); } .video-modal__dialog video, .video-modal__dialog iframe { width: 100%; height: 100%; border: 0; display: block; } .video-modal__close { position: absolute; inset-block-start: -14px; inset-inline-end: -14px; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--c-ink); display: grid; place-items: center; box-shadow: var(--shadow-md); transition: transform var(--t-fast), background var(--t-fast); z-index: 2; } .video-modal__close:hover { transform: rotate(90deg); background: var(--c-primary); color: #fff; } .video-modal__close svg { width: 20px; height: 20px; } @media (max-width: 560px) { .video-modal__close { inset-block-start: 8px; inset-inline-end: 8px; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { :root { --header-h: 74px; } .about__grid { grid-template-columns: 1fr; } .about__media { order: -1; max-width: 560px; } .lineup__card { grid-template-columns: 1fr; } .impact__stats { grid-template-columns: repeat(2, 1fr); } .features__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .nav-toggle { display: block; } .nav { position: fixed; inset-block-start: 0; inset-inline-end: 0; height: 100svh; width: min(380px, 86vw); flex-direction: column; justify-content: center; gap: 2rem; padding: 2rem; background: rgba(10,14,23,.97); backdrop-filter: blur(16px); border-inline-start: 1px solid var(--c-line-dark); transform: translateX(100%); transition: transform var(--t); z-index: 105; } [dir="rtl"] .nav { inset-inline-end: auto; inset-inline-start: 0; border-inline-start: 0; border-inline-end: 1px solid var(--c-line-dark); transform: translateX(-100%); } body.nav-open .nav { transform: translateX(0); } .nav__list { flex-direction: column; gap: 1.6rem; } .nav__link { font-size: 1.3rem; } body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(5,8,15,.5); z-index: 104; } } @media (max-width: 760px) { .portfolio__grid, .news__grid, .features__grid { grid-template-columns: 1fr; } .footer__top { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } .specs { grid-template-columns: repeat(2, 1fr); } .hero__actions .btn { flex: 1 1 auto; } } @media (max-width: 480px) { .impact__stats { grid-template-columns: 1fr 1fr; } .footer__top { grid-template-columns: 1fr; } .badge--a { inset-inline-start: 8px; } .badge--b { inset-inline-end: 8px; } .hero .swiper-button-next, .hero .swiper-button-prev { display: none; } } /* ============================================================ HERO — full-image key-visual slide (faithful brand artwork) ============================================================ */ .hero__slide--full { display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 100% at 72% 32%, #18253f 0%, #0a1020 55%, #05080f 100%); } .hero__full-img { position: relative; z-index: 2; max-width: min(1280px, 94%); max-height: 86%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 30px 80px rgba(0,0,0,.5)); } /* ============================================================ PIONEERING showcase (fleet arc + floating badges) ============================================================ */ .pioneer { overflow: hidden; } .pioneer .section__title em { font-style: italic; } .pioneer__stage { position: relative; max-width: 1040px; margin: clamp(1.5rem,1rem+2vw,3rem) auto 0; } .pioneer__glow { position: absolute; inset: -6% -4% 14%; z-index: 0; pointer-events: none; background: radial-gradient(60% 70% at 50% 30%, rgba(31,107,255,.10), transparent 70%); } .pioneer__stage::after { /* ground reflection ellipse */ content: ""; position: absolute; inset-inline: 12%; inset-block-end: 6%; height: 60px; z-index: 0; background: radial-gradient(50% 100% at 50% 0%, rgba(10,14,23,.16), transparent 72%); filter: blur(4px); } .pioneer__img { position: relative; z-index: 1; width: 100%; display: block; } .pioneer .badge { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; min-width: 92px; padding: 1rem 1.1rem; background: var(--c-surface); border: 1px solid var(--c-line-light); border-radius: 16px; box-shadow: var(--shadow-md); } .pioneer .badge__ic { width: 38px; height: 38px; border-radius: 11px; background: var(--c-surface-2); color: var(--c-ink); } .pioneer .badge__ic svg { width: 19px; height: 19px; } .pioneer .badge strong { font-family: var(--ff-head); font-weight: 700; font-size: 1.02rem; line-height: 1.05; color: var(--c-ink); } .pioneer .badge span { font-size: .74rem; color: var(--c-ink-2); } .pioneer .badge--left { inset-block-start: 6%; inset-inline-start: 1%; } .pioneer .badge--right { inset-block-start: 16%; inset-inline-end: 3%; } /* ============================================================ LINEUP — coverflow slider ============================================================ */ .lineup-slider { position: relative; } .lineup-swiper { overflow: hidden; padding-block: .5rem 1rem; } .lineup-swiper .swiper-wrapper { align-items: stretch; } .lineup-slide { width: min(560px, 82vw); box-sizing: border-box; transition: opacity var(--t); display: flex; flex-direction: column; } .lineup-swiper .swiper-slide:not(.swiper-slide-active) { opacity: .4; } .lineup-slide__img { position: relative; aspect-ratio: 16/10; border-radius: var(--radius-lg); background: radial-gradient(70% 90% at 50% 40%, #f3f6fc, var(--c-surface-2)); display: grid; place-items: center; padding: 1rem; } .lineup-slide__img img { width: 100%; height: 100%; object-fit: contain; } .lineup-slide__card { position: relative; z-index: 2; margin: -3rem auto 0; width: min(440px, 92%); background: var(--c-surface); border: 1px solid var(--c-line-light); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 1.6rem 1.7rem; text-align: center; transition: opacity .45s var(--ease), transform .45s var(--ease); } .lineup-swiper .swiper-slide:not(.swiper-slide-active) .lineup-slide__card { opacity: 0; visibility: hidden; transform: translateY(14px); } .lineup-slide__card .lineup__name { font-size: 1.4rem; } .lineup-slide__card .lineup__tag { margin-top: .4rem; } .lineup-slide__card .specs { text-align: start; } .lineup-slide__card .lineup__actions { justify-content: center; } /* shared section slider controls (lineup + portfolio) */ .sec-nav { position: absolute; inset-block-start: 38%; transform: translateY(-50%); z-index: 6; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-line-light); box-shadow: var(--shadow-md); transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast); } .sec-nav:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); } .sec-nav svg { width: 20px; height: 20px; } .sec-nav.is-prev { inset-inline-start: -6px; } .sec-nav.is-next { inset-inline-end: -6px; } .sec-nav.swiper-button-disabled { opacity: .35; cursor: default; } [dir="rtl"] .sec-nav svg { transform: scaleX(-1); } .sec-pagination { position: static !important; margin-top: 2.2rem; display: flex; gap: .5rem; justify-content: center; } .sec-pagination .swiper-pagination-bullet { width: 9px; height: 9px; background: var(--c-ink-2); opacity: .3; border-radius: 999px; transition: width var(--t), opacity var(--t), background var(--t); } .sec-pagination .swiper-pagination-bullet-active { opacity: 1; width: 30px; background: var(--c-primary); } .portfolio .sec-pagination .swiper-pagination-bullet { background: var(--c-ink); } /* ============================================================ PORTFOLIO — overlay-card slider ============================================================ */ .portfolio-slider { position: relative; } .portfolio-swiper { overflow: hidden; padding-block: .5rem; } .portfolio-swiper .swiper-slide { height: auto; } .pcard--overlay { position: relative; display: block; height: 100%; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 0; } .pcard--overlay img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); } .pcard--overlay:hover img { transform: scale(1.07); } .pcard__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,11,20,.9) 2%, rgba(7,11,20,.35) 45%, transparent 72%); } .pcard__content { position: absolute; inset-block-end: 0; inset-inline: 0; z-index: 2; padding: 1.7rem; color: #fff; } .pcard__content .pcard__title { color: #fff; font-size: 1.32rem; } .pcard__content .pcard__text { color: rgba(255,255,255,.82); margin-top: .45rem; font-size: .93rem; } .pcard__content .link-more { color: #fff; margin-top: 1rem; } .pcard__content .link-more:hover { color: var(--c-primary-2); } /* ============================================================ RESPONSIVE — home redesign additions ============================================================ */ @media (max-width: 768px) { .lineup-slide__card { margin-top: -2rem; padding: 1.3rem 1.2rem; } .lineup-slide__card .lineup__name { font-size: 1.2rem; } .pioneer .badge { min-width: 78px; padding: .7rem .8rem; } .pioneer .badge strong { font-size: .9rem; } .pioneer .badge--left { inset-inline-start: -2%; } .pioneer .badge--right { inset-inline-end: -2%; } .sec-nav { width: 42px; height: 42px; inset-block-start: 32%; } } @media (max-width: 480px) { .pioneer .badge span { display: none; } .lineup-slide__card .specs { grid-template-columns: 1fr 1fr; } } /* ============================================================ KEY-VISUAL BANNER (full-width Homtruck artwork slider) ============================================================ */ .keyvisual { position: relative; background: #05080f; overflow: hidden; } .keyvisual-swiper { width: 100%; } .keyvisual-slide { position: relative; aspect-ratio: 1920 / 951; display: grid; place-items: center; background: #05080f; } .keyvisual-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .keyvisual .sec-nav { inset-block-start: 50%; background: rgba(255,255,255,.92); } .keyvisual .sec-nav.is-prev { inset-inline-start: 18px; } .keyvisual .sec-nav.is-next { inset-inline-end: 18px; } .keyvisual .sec-pagination { position: absolute; inset-block-end: 18px; inset-inline: 0; margin-top: 0; z-index: 5; } .keyvisual .sec-pagination .swiper-pagination-bullet { background: #fff; } @media (max-width: 768px) { .keyvisual .sec-nav { width: 40px; height: 40px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .hero__bg { transform: none !important; } }