/* ============================================================ COLISSO HOME — PREMIUM v2 Scoped via .home-page on to avoid leaking into other pages. ============================================================ */ .home-page { --ink: #0b0f19; --ink-soft: #2a3142; --muted: #5d6577; --paper: #ffffff; --soft: #f5f7fb; --line: rgba(15, 23, 42, 0.08); --line-soft: rgba(15, 23, 42, 0.05); --blue: #1768ff; --blue-soft: #e8eeff; --blue-deep: #0b3c91; --red: #ff4d43; --gold: #f8b72f; --green: #13a46b; --saramaya: #d71920; --saramaya-deep: #7a0910; --rakieta: #1768ff; --tcv: #13a46b; --shadow-1: 0 12px 30px rgba(20, 39, 85, 0.08); --shadow-2: 0 24px 60px rgba(20, 39, 85, 0.12); --shadow-3: 0 48px 130px rgba(20, 39, 85, 0.20); --radius: 22px; --radius-sm: 12px; --radius-lg: 32px; --max: 1240px; font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-feature-settings: "ss01", "cv11"; background: var(--paper); color: var(--ink); } .home-page * { box-sizing: border-box; } /* serif accent for italics */ .home-page i, .home-page .italic, .home-page .text-italic { font-family: "Instrument Serif", ui-serif, "Iowan Old Style", Georgia, serif; font-style: italic; font-weight: 400; } /* ============ scroll progress ============ */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; background: transparent; pointer-events: none; } .scroll-progress span { display: block; width: 0%; height: 100%; background: linear-gradient(90deg, var(--blue), var(--red), var(--gold)); border-radius: 0 999px 999px 0; transition: width 80ms linear; } /* ============ topbar overrides ============ */ .home-page .home-topbar { background: rgba(255, 255, 255, 0.62); border-bottom: 1px solid rgba(15, 23, 42, 0.04); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); } .home-page .home-topbar.scrolled { background: rgba(255, 255, 255, 0.92); border-bottom-color: rgba(15, 23, 42, 0.08); } .home-page .menu a { position: relative; padding: 6px 2px; color: var(--ink-soft); font-weight: 600; font-size: 0.92rem; letter-spacing: -0.005em; transition: color 200ms ease; } .home-page .menu a::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 0; height: 2px; background: var(--blue); border-radius: 2px; transform: translateX(-50%); transition: width 260ms cubic-bezier(.2,.9,.3,1.1); } .home-page .menu a:hover::after, .home-page .menu a.is-active::after { width: calc(100% - 4px); } .home-page .menu-cta { padding: 10px 16px; color: #fff !important; background: var(--ink); border-radius: 999px; font-weight: 700; transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease; } .home-page .menu-cta::after { display: none; } .home-page .menu-cta:hover { transform: translateY(-1px); background: var(--blue); box-shadow: 0 12px 24px rgba(23, 104, 255, 0.32); } /* ============================================================ HERO V2 ============================================================ */ .hero-v2 { position: relative; min-height: 100vh; padding: 120px 0 80px; overflow: hidden; isolation: isolate; } .hero-mesh { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(ellipse at top, #ffffff 0%, #f4f7fe 60%, #eef3fc 100%); } .hero-mesh .orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.65; animation: float-orb 18s ease-in-out infinite; will-change: transform; } .hero-mesh .orb-blue { top: -8%; right: -6%; width: 560px; height: 560px; background: radial-gradient(circle, rgba(23, 104, 255, 0.55), transparent 70%); animation-delay: 0s; } .hero-mesh .orb-red { top: 18%; left: -8%; width: 460px; height: 460px; background: radial-gradient(circle, rgba(255, 77, 67, 0.42), transparent 70%); animation-delay: -4s; } .hero-mesh .orb-gold { bottom: 8%; right: 14%; width: 380px; height: 380px; background: radial-gradient(circle, rgba(248, 183, 47, 0.32), transparent 70%); animation-delay: -8s; } .hero-mesh .orb-green { bottom: -12%; left: 28%; width: 420px; height: 420px; background: radial-gradient(circle, rgba(19, 164, 107, 0.22), transparent 70%); animation-delay: -12s; } @keyframes float-orb { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -30px) scale(1.08); } 66% { transform: translate(-30px, 40px) scale(0.94); } } .grid-noise { position: absolute; inset: 0; background-image: linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 70% 20%, #000 0%, transparent 60%); -webkit-mask-image: radial-gradient(ellipse at 70% 20%, #000 0%, transparent 60%); opacity: 0.7; } .hero-v2-inner { position: relative; z-index: 1; width: min(var(--max), calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr); align-items: center; gap: 60px; } .hero-v2-copy { max-width: 640px; } .eyebrow-v2 { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 6px 14px 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.7); color: var(--ink-soft); font-size: 0.78rem; font-weight: 600; letter-spacing: -0.005em; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(19, 164, 107, 0.18); animation: pulse-dot 2.4s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 4px rgba(19, 164, 107, 0.18); } 50% { box-shadow: 0 0 0 8px rgba(19, 164, 107, 0.06); } } .hero-v2-title { margin: 0; font-size: clamp(2.8rem, 6.6vw, 6.2rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.04em; color: var(--ink); } .hero-v2-title .word { display: inline-block; opacity: 0; transform: translateY(60%) rotateX(-30deg); transform-origin: 50% 100%; animation: word-in 900ms cubic-bezier(.2,.9,.2,1) forwards; } .hero-v2-title .word:nth-child(1) { animation-delay: 80ms; } .hero-v2-title .word:nth-child(2) { animation-delay: 200ms; } .hero-v2-title .word:nth-child(4) { animation-delay: 380ms; } .hero-v2-title .word:nth-child(5) { animation-delay: 480ms; } .hero-v2-title .word:nth-child(6) { animation-delay: 580ms; } .hero-v2-title .italic { font-family: "Instrument Serif", ui-serif, Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.02em; color: transparent; background: linear-gradient(120deg, var(--blue) 0%, var(--red) 50%, var(--gold) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding: 0 0.02em; } @keyframes word-in { to { opacity: 1; transform: translateY(0) rotateX(0); } } .hero-v2-lead { max-width: 580px; margin: 28px 0 0; color: var(--muted); font-size: 1.18rem; line-height: 1.55; letter-spacing: -0.01em; } .hero-v2-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } /* ============ buttons ============ */ .btn-primary, .btn-ghost { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 22px; border-radius: 999px; font-size: 0.96rem; font-weight: 700; letter-spacing: -0.01em; transition: transform 200ms cubic-bezier(.2,.9,.3,1.1), box-shadow 240ms ease, background 200ms ease; white-space: nowrap; } .btn-primary { position: relative; color: #fff; background: var(--ink); box-shadow: 0 12px 30px rgba(11, 15, 25, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.12); overflow: hidden; } .btn-primary::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%); transform: translateX(-110%); transition: transform 700ms ease; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(11, 15, 25, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .btn-primary:hover::before { transform: translateX(110%); } .btn-primary svg { width: 18px; height: 18px; transition: transform 200ms ease; } .btn-primary:hover svg { transform: translateX(3px); } .btn-primary.big { height: 60px; padding: 0 30px; font-size: 1.04rem; } .btn-ghost { color: var(--ink); background: rgba(255, 255, 255, 0.78); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .btn-ghost:hover { transform: translateY(-2px); background: #fff; box-shadow: var(--shadow-1); } .btn-ghost.big { height: 60px; padding: 0 30px; font-size: 1.04rem; } .dot-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(255, 77, 67, 0.16); animation: pulse-red 1.6s ease-in-out infinite; } @keyframes pulse-red { 0%, 100% { box-shadow: 0 0 0 4px rgba(255, 77, 67, 0.16); } 50% { box-shadow: 0 0 0 8px rgba(255, 77, 67, 0.04); } } /* ============ hero stats ============ */ .hero-v2-stats { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); } .stat { display: flex; flex-direction: column; gap: 4px; } .stat strong { display: inline-flex; align-items: baseline; gap: 2px; font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); } .stat strong i { font-family: "Instrument Serif", ui-serif, Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.4rem; color: var(--blue); } .stat small { color: var(--muted); font-size: 0.82rem; font-weight: 500; } /* ============ hero stage ============ */ .hero-v2-stage { position: relative; min-height: 560px; perspective: 1400px; } .browser-stack { position: relative; width: 100%; height: 100%; min-height: 560px; transform-style: preserve-3d; } .browser-mock { position: absolute; border-radius: 20px; background: #fff; overflow: hidden; box-shadow: var(--shadow-3); transform-style: preserve-3d; transition: transform 600ms cubic-bezier(.2,.9,.3,1.1); } .browser-mock.layer-1 { top: 70px; right: 0; width: 92%; z-index: 3; transform: rotateX(2deg) rotateY(-12deg) translateZ(40px); animation: float-mock-1 9s ease-in-out infinite; } .browser-mock.layer-2 { top: 30px; right: 6%; width: 80%; z-index: 2; opacity: 0.92; transform: rotateX(4deg) rotateY(-14deg) translateZ(0); animation: float-mock-2 9s ease-in-out infinite; } .browser-mock.layer-3 { top: 0; right: 12%; width: 70%; z-index: 1; opacity: 0.6; transform: rotateX(6deg) rotateY(-16deg) translateZ(-40px); animation: float-mock-3 9s ease-in-out infinite; } @keyframes float-mock-1 { 0%, 100% { transform: rotateX(2deg) rotateY(-12deg) translate3d(0, 0, 40px); } 50% { transform: rotateX(2deg) rotateY(-12deg) translate3d(0, -12px, 40px); } } @keyframes float-mock-2 { 0%, 100% { transform: rotateX(4deg) rotateY(-14deg) translate3d(0, 0, 0); } 50% { transform: rotateX(4deg) rotateY(-14deg) translate3d(0, -8px, 0); } } @keyframes float-mock-3 { 0%, 100% { transform: rotateX(6deg) rotateY(-16deg) translate3d(0, 0, -40px); } 50% { transform: rotateX(6deg) rotateY(-16deg) translate3d(0, -6px, -40px); } } .browser-chrome { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid rgba(15, 23, 42, 0.06); background: rgba(248, 249, 252, 0.92); } .browser-chrome .dot { width: 10px; height: 10px; border-radius: 50%; } .browser-chrome .dot.r { background: #ff605c; } .browser-chrome .dot.y { background: #ffbd44; } .browser-chrome .dot.g { background: #00ca4e; } .browser-url { margin-left: 14px; padding: 4px 12px; border-radius: 999px; background: #fff; color: var(--ink-soft); font-size: 0.74rem; font-weight: 600; letter-spacing: -0.005em; } .browser-body { padding: 22px 22px 26px; min-height: 220px; } .browser-body.theme-saramaya { background: linear-gradient(180deg, #fffbfa 0%, #ffeae9 100%); color: var(--saramaya-deep); } .browser-body.theme-rakieta { background: linear-gradient(180deg, #f6f9ff 0%, #dde9ff 100%); color: var(--blue-deep); } .browser-body.theme-tcv { background: linear-gradient(180deg, #f0fbf6 0%, #d6f0e3 100%); color: #07523a; } .browser-eyebrow { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; } .browser-title { display: block; margin-top: 14px; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; } .mock-row { display: flex; gap: 6px; margin-top: 14px; } .mock-pill { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); font-size: 0.78rem; font-weight: 700; } .mock-price { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(122, 9, 16, 0.12); } .mock-price small { font-size: 0.76rem; opacity: 0.7; } .mock-price strong { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; } .mock-cta { margin-top: 14px; padding: 12px; border-radius: 14px; background: var(--saramaya-deep); color: #fff; text-align: center; font-weight: 800; font-size: 0.9rem; } /* floating pills */ .float-pill { position: absolute; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--line); box-shadow: var(--shadow-1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 0.78rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; opacity: 0; animation: pill-pop 900ms cubic-bezier(.2,.9,.3,1.2) forwards; } .float-pill-1 { top: 12%; left: -4%; color: var(--blue); animation-delay: 700ms; } .float-pill-2 { top: 38%; left: -8%; animation-delay: 900ms; } .float-pill-3 { top: 62%; left: 2%; animation-delay: 1100ms; } .float-pill-4 { bottom: 4%; left: 22%; animation-delay: 1300ms; } @keyframes pill-pop { 0% { opacity: 0; transform: translateY(20px) scale(0.9); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .float-ticket { position: absolute; bottom: 10%; right: 4%; width: 220px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(140deg, #0b0f19, #1a2540); color: #fff; box-shadow: var(--shadow-3); transform: rotate(6deg); opacity: 0; animation: pill-pop 900ms cubic-bezier(.2,.9,.3,1.2) 1500ms forwards; } .float-ticket-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); } .float-ticket-head b { color: var(--gold); font-family: "JetBrains Mono", ui-monospace, "Menlo", monospace; font-size: 0.74rem; } .float-ticket-body strong { display: block; font-size: 1.16rem; font-weight: 800; letter-spacing: -0.01em; } .float-ticket-body small { display: block; margin-top: 4px; color: rgba(255, 255, 255, 0.7); font-size: 0.78rem; } /* scroll indicator */ .hero-v2-scroll { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0.5; } .hero-v2-scroll span { width: 20px; height: 32px; border: 2px solid var(--ink); border-radius: 999px; position: relative; } .hero-v2-scroll span::after { content: ""; position: absolute; top: 6px; left: 50%; width: 3px; height: 6px; border-radius: 999px; background: var(--ink); transform: translateX(-50%); animation: scroll-tick 1.8s ease-in-out infinite; } .hero-v2-scroll small { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } @keyframes scroll-tick { 0% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 12px); } } /* ============================================================ MARQUEE ============================================================ */ .marquee-section { padding: 32px 0; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee-track { display: flex; align-items: center; gap: 28px; width: max-content; animation: marquee 40s linear infinite; color: var(--ink-soft); font-family: "Instrument Serif", ui-serif, Georgia, serif; font-style: italic; font-size: 2rem; font-weight: 400; letter-spacing: -0.02em; white-space: nowrap; } .marquee-track span:nth-child(even) { color: var(--blue); font-family: "Inter", sans-serif; font-style: normal; font-size: 1.4rem; opacity: 0.4; } @keyframes marquee { to { transform: translateX(-50%); } } /* ============================================================ BENTO ============================================================ */ .bento { padding: 120px 0 60px; background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%); } .section-head-v2 { width: min(820px, calc(100% - 40px)); margin: 0 auto 56px; text-align: center; } .section-head-v2 h2 { margin: 0; font-size: clamp(2.2rem, 4.8vw, 4rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; color: var(--ink); } .section-head-v2 h2 .text-mute { color: var(--muted); font-weight: 700; } .section-head-v2 h2 i { color: var(--blue); } .section-head-v2 .section-lead { max-width: 580px; margin: 20px auto 0; color: var(--muted); font-size: 1.06rem; line-height: 1.55; } .bento-grid { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 400px; gap: 16px; } .bento-card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); overflow: hidden; cursor: pointer; transition: transform 360ms cubic-bezier(.2,.9,.3,1.1), box-shadow 360ms ease, border-color 200ms ease; isolation: isolate; } .bento-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: rgba(15, 23, 42, 0.12); } .bento-big { background: #0b0f19; color: #fff; } .bento-card-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; } .bento-card-bg .orb-mini { position: absolute; border-radius: 50%; filter: blur(50px); opacity: 0.45; } .bg-sites .orb-mini.blue { top: -20%; right: -10%; width: 280px; height: 280px; background: rgba(23, 104, 255, 0.85); } .bg-sites .orb-mini.red { bottom: -30%; left: 20%; width: 220px; height: 220px; background: rgba(255, 77, 67, 0.7); } .bento-card-stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; padding: 28px 28px 0; overflow: hidden; } .bento-card-foot { padding: 22px 26px 26px; } .bento-card-foot span { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(23, 104, 255, 0.12); color: var(--blue); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; } .bento-big .bento-card-foot span { background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.9); } .bento-card-foot strong { display: block; margin-bottom: 6px; font-size: 1.32rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; } .bento-big .bento-card-foot strong { font-size: 1.6rem; } .bento-card-foot small { display: block; color: var(--muted); font-size: 0.94rem; line-height: 1.45; } .bento-big .bento-card-foot small { color: rgba(255, 255, 255, 0.7); } /* domain cycle */ .domain-cycle { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 10px; } .domain-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.94rem; font-weight: 600; letter-spacing: -0.01em; transition: background 400ms ease, border-color 400ms ease, opacity 400ms ease; opacity: 0.55; } .domain-row.active { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.22); opacity: 1; } .domain-host { color: #fff; } .domain-status { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.6); font-family: "Inter", sans-serif; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; } .domain-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); } .domain-row.active .domain-status { color: rgba(255, 255, 255, 0.95); } .domain-row.active .domain-status::before { box-shadow: 0 0 0 4px rgba(19, 164, 107, 0.22); animation: pulse-dot 1.8s ease-in-out infinite; } .domain-status.soon::before { background: var(--gold); box-shadow: none; animation: none; } /* seat mini (tickets) */ .seat-mini { width: 220px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 22px; border-radius: 18px; background: linear-gradient(180deg, #f6f9ff, #e8eeff); } .seat-mini span { aspect-ratio: 1; border-radius: 8px; background: #ffffff; box-shadow: inset 0 -2px 0 rgba(15, 23, 42, 0.06); } .seat-mini .active { background: var(--blue); box-shadow: 0 6px 16px rgba(23, 104, 255, 0.32); animation: seat-pop 1.2s ease-in-out infinite alternate; } @keyframes seat-pop { to { transform: scale(1.06); } } .seat-mini .busy { background: #d3dbeb; position: relative; } .seat-mini .busy::after { content: ""; position: absolute; inset: 30% 26%; border-top: 2px solid #8794ad; transform: rotate(45deg); } .seat-mini-cta { position: absolute; bottom: 22px; right: 22px; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 0.8rem; font-weight: 700; box-shadow: var(--shadow-2); } .seat-mini-cta strong { color: var(--gold); } /* parcel mini */ .parcel-mini { width: 100%; max-width: 260px; padding: 18px; border-radius: 18px; background: linear-gradient(135deg, var(--blue), #4d8aff); color: #fff; box-shadow: 0 20px 50px rgba(23, 104, 255, 0.32); } .parcel-mini-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 14px; } .parcel-mini-head span { font-family: "JetBrains Mono", monospace; opacity: 0.8; } .parcel-mini-bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); overflow: hidden; margin-bottom: 12px; } .parcel-mini-bar i { display: block; width: 68%; height: 100%; background: linear-gradient(90deg, var(--gold), #fff); border-radius: inherit; animation: parcel-bar 2.2s ease-in-out infinite; } @keyframes parcel-bar { 0%, 100% { width: 64%; } 50% { width: 72%; } } .parcel-mini-steps { display: flex; justify-content: space-between; font-size: 0.7rem; font-weight: 700; } .parcel-mini-steps span { opacity: 0.5; } .parcel-mini-steps span.done { opacity: 0.9; } .parcel-mini-steps span.current { opacity: 1; color: var(--gold); position: relative; } .parcel-mini-steps span.current::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); transform: translateX(-50%); box-shadow: 0 0 0 4px rgba(248, 183, 47, 0.32); animation: pulse-dot 1.6s ease-in-out infinite; } /* cockpit mini */ .cockpit-mini { width: 100%; max-width: 260px; padding: 18px; border-radius: 18px; background: #0b0f19; color: #fff; box-shadow: 0 20px 50px rgba(11, 15, 25, 0.34); } .kpi-mini small { display: block; color: rgba(255, 255, 255, 0.6); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } .kpi-mini strong { display: block; margin-top: 4px; font-size: 1.8rem; font-weight: 800; letter-spacing: -0.02em; color: var(--gold); } .bars-mini { display: flex; align-items: flex-end; gap: 6px; height: 70px; margin-top: 14px; } .bars-mini i { flex: 1; height: 0; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--blue), rgba(23, 104, 255, 0.4)); animation: bar-up 1.4s cubic-bezier(.2,.9,.3,1.1) forwards; transform-origin: bottom; } .bars-mini i:nth-child(1) { animation-delay: 100ms; --h: 38%; } .bars-mini i:nth-child(2) { animation-delay: 180ms; --h: 62%; } .bars-mini i:nth-child(3) { animation-delay: 260ms; --h: 50%; } .bars-mini i:nth-child(4) { animation-delay: 340ms; --h: 86%; } .bars-mini i:nth-child(5) { animation-delay: 420ms; --h: 72%; } .bars-mini i:nth-child(6) { animation-delay: 500ms; --h: 94%; } @keyframes bar-up { to { height: var(--h); } } /* ============================================================ SHOWCASE ============================================================ */ .showcase { padding: 120px 0; background: #fff; overflow: hidden; } .showcase-grid { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 1fr); align-items: center; gap: 80px; } .showcase-copy h2 { margin: 14px 0 22px; font-size: clamp(2.2rem, 4.6vw, 3.8rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; } .showcase-copy h2 i { color: var(--red); } .showcase-copy p { margin: 0; color: var(--muted); font-size: 1.1rem; line-height: 1.55; } .showcase-list { margin: 28px 0 0; padding: 0; list-style: none; } .showcase-list li { position: relative; padding: 14px 0 14px 32px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 1rem; line-height: 1.5; } .showcase-list li:first-child { border-top: 0; } .showcase-list li::before { content: ""; position: absolute; left: 0; top: 18px; width: 18px; height: 18px; border-radius: 50%; background: var(--blue); background-image: linear-gradient(135deg, var(--blue), var(--blue-deep)); box-shadow: 0 0 0 4px var(--blue-soft); } .showcase-list li::after { content: ""; position: absolute; left: 4px; top: 22px; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); } .showcase-list b { font-weight: 800; color: var(--ink); } /* phone mock */ .showcase-visual { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; } .phone-mock { position: relative; width: 320px; height: 580px; padding: 14px; border-radius: 44px; background: linear-gradient(160deg, #1a2540, #0b0f19); box-shadow: var(--shadow-3), inset 0 0 0 1px rgba(255, 255, 255, 0.08); } .phone-notch { position: absolute; top: 24px; left: 50%; width: 96px; height: 22px; border-radius: 999px; background: #0b0f19; transform: translateX(-50%); z-index: 2; } .phone-screen { position: relative; width: 100%; height: 100%; border-radius: 30px; overflow: hidden; background: #fff; } .phone-skin { position: absolute; inset: 0; padding: 64px 22px 22px; display: flex; flex-direction: column; gap: 18px; opacity: 0; transform: translateY(40px) scale(0.96); transition: opacity 500ms ease, transform 600ms cubic-bezier(.2,.9,.3,1.1); pointer-events: none; } .phone-skin.active { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .phone-skin.theme-saramaya { background: linear-gradient(180deg, #fff5f4 0%, #ffd9d7 100%); color: var(--saramaya-deep); } .phone-skin.theme-rakieta { background: linear-gradient(180deg, #eef4ff 0%, #c9dcff 100%); color: var(--blue-deep); } .phone-skin.theme-tcv { background: linear-gradient(180deg, #effbf5 0%, #c2ecd5 100%); color: #07523a; } .phone-header { display: flex; justify-content: space-between; align-items: center; } .phone-brand { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; } .phone-icon { width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(135deg, currentColor, transparent); opacity: 0.7; } .phone-card { margin-top: auto; padding: 22px; border-radius: 22px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 18px 42px rgba(11, 15, 25, 0.14); color: var(--ink); } .phone-card small { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); } .phone-card strong { display: block; margin: 8px 0; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; } .phone-card span { color: var(--muted); } .phone-cta { height: 52px; border: 0; border-radius: 16px; cursor: pointer; font: inherit; font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; color: #fff; margin-bottom: 18px; transition: transform 200ms ease, box-shadow 200ms ease; } .phone-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18); } .theme-saramaya .phone-cta { background: linear-gradient(135deg, var(--saramaya-deep), var(--saramaya)); } .theme-rakieta .phone-cta { background: linear-gradient(135deg, var(--blue-deep), var(--blue)); } .theme-tcv .phone-cta { background: linear-gradient(135deg, #07523a, var(--tcv)); } .showcase-tabs { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); } .showcase-tabs button { height: 38px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; font: inherit; font-size: 0.88rem; font-weight: 700; color: var(--muted); transition: all 220ms ease; } .showcase-tabs button:hover { color: var(--ink); } .showcase-tabs button.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); } /* ============================================================ DEMO LIVE ============================================================ */ .demo-section { padding: 120px 0; background: linear-gradient(180deg, #f6f9ff 0%, #ffffff 100%); } .demo-card { width: min(960px, calc(100% - 40px)); margin: 0 auto; padding: 32px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-2); } .demo-route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin-bottom: 24px; } .route-end small { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); } .route-end strong { display: block; margin-top: 4px; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; } .route-line { position: relative; height: 40px; } .route-line svg { width: 100%; height: 100%; overflow: visible; } [data-route-dash] { animation: dash-flow 12s linear infinite; } @keyframes dash-flow { to { stroke-dashoffset: -200; } } [data-route-bus] { animation: bus-travel 8s ease-in-out infinite; } @keyframes bus-travel { 0% { transform: translateX(4px); } 50% { transform: translateX(370px); } 100% { transform: translateX(4px); } } .demo-trips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; } .demo-trip { position: relative; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff; cursor: pointer; transition: all 240ms cubic-bezier(.2,.9,.3,1.1); } .demo-trip:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); border-color: rgba(23, 104, 255, 0.34); } .demo-trip.is-selected { border-color: var(--blue); background: linear-gradient(180deg, #fff, #f5f8ff); box-shadow: 0 0 0 3px rgba(23, 104, 255, 0.14); } .demo-trip-time strong { display: block; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; } .demo-trip-time span { display: block; margin-top: 2px; color: var(--muted); font-size: 0.88rem; } .demo-trip-meta { display: flex; gap: 8px; align-items: center; margin: 12px 0; color: var(--muted); font-size: 0.84rem; } .demo-trip-meta .badge { padding: 3px 10px; border-radius: 999px; background: rgba(215, 25, 32, 0.1); color: var(--saramaya); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.01em; } .demo-trip-price { display: block; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; color: var(--blue); } .demo-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .demo-foot small { color: var(--muted); font-size: 0.82rem; } /* ============================================================ STATS ============================================================ */ .stats-section { padding: 100px 0; background: #0b0f19; color: #fff; overflow: hidden; } .stats-grid { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .stat-big strong { display: flex; align-items: baseline; gap: 4px; font-size: clamp(3rem, 5.4vw, 4.6rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: #fff; background: linear-gradient(180deg, #fff 50%, rgba(255, 255, 255, 0.6)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .stat-big strong i { font-size: 0.5em; color: var(--gold); -webkit-text-fill-color: var(--gold); } .stat-big span { display: block; margin-top: 12px; color: rgba(255, 255, 255, 0.7); font-size: 1rem; line-height: 1.45; } /* ============================================================ TESTIMONIALS ============================================================ */ .testimonials { padding: 120px 0; background: linear-gradient(180deg, #fff 0%, #f8fbff 100%); } .testimonial-rail { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .testimonial { display: flex; flex-direction: column; gap: 22px; padding: 32px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); position: relative; transition: transform 300ms ease, box-shadow 300ms ease; } .testimonial:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } .testimonial::before { content: "“"; position: absolute; top: 10px; right: 22px; font-family: "Instrument Serif", serif; font-size: 7rem; line-height: 1; color: var(--blue); opacity: 0.16; } .testimonial p { margin: 0; font-size: 1.04rem; line-height: 1.55; letter-spacing: -0.005em; color: var(--ink-soft); } .testimonial footer { display: flex; flex-direction: column; gap: 2px; } .testimonial footer strong { font-weight: 800; letter-spacing: -0.01em; } .testimonial footer small { color: var(--muted); font-size: 0.86rem; } /* ============================================================ CTA FINAL ============================================================ */ .cta-final { position: relative; padding: 140px 0; background: #0b0f19; color: #fff; overflow: hidden; isolation: isolate; } .cta-final-glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 30% 50%, rgba(23, 104, 255, 0.35), transparent 40%), radial-gradient(circle at 70% 50%, rgba(255, 77, 67, 0.28), transparent 40%), radial-gradient(circle at 50% 90%, rgba(248, 183, 47, 0.22), transparent 50%); animation: cta-glow 14s ease-in-out infinite; } @keyframes cta-glow { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.08) rotate(2deg); } } .cta-final-inner { width: min(900px, calc(100% - 40px)); margin: 0 auto; text-align: center; } .cta-final h2 { margin: 0; font-size: clamp(2.4rem, 5.4vw, 4.6rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; } .cta-final h2 i { color: transparent; background: linear-gradient(120deg, var(--blue), var(--red), var(--gold)); -webkit-background-clip: text; background-clip: text; } .cta-final p { max-width: 540px; margin: 22px auto 0; color: rgba(255, 255, 255, 0.74); font-size: 1.16rem; line-height: 1.55; } .cta-final-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 42px; } .cta-final .btn-ghost { color: #fff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); } .cta-final .btn-ghost:hover { background: rgba(255, 255, 255, 0.14); } /* ============================================================ FOOTER ============================================================ */ .footer-v2 { padding: 80px 0 32px; background: #fff; border-top: 1px solid var(--line); } .footer-grid { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; } .footer-brand .brand { font-size: 1.04rem; font-weight: 800; } .footer-brand p { max-width: 280px; margin: 14px 0 0; color: var(--muted); font-size: 0.94rem; line-height: 1.5; } .footer-col { display: flex; flex-direction: column; gap: 10px; } .footer-col small { margin-bottom: 6px; color: var(--ink); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .footer-col a { color: var(--muted); font-size: 0.94rem; transition: color 200ms ease; } .footer-col a:hover { color: var(--blue); } .footer-bottom { width: min(var(--max), calc(100% - 40px)); margin: 60px auto 0; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--muted); font-size: 0.88rem; } /* ============================================================ PAGE HERO (sites, tickets, colis, gestion, contact) ============================================================ */ .page-hero-v2 { position: relative; padding: 140px 0 80px; overflow: hidden; isolation: isolate; text-align: center; } .page-hero-v2 .hero-mesh { height: 100%; } .page-hero-v2-inner { position: relative; z-index: 1; width: min(880px, calc(100% - 40px)); margin: 0 auto; } .page-hero-v2 h1 { margin: 18px 0 0; font-size: clamp(2.6rem, 6vw, 5.6rem); font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; color: var(--ink); } .page-hero-v2 h1 i { color: transparent; background: linear-gradient(120deg, var(--blue), var(--red)); -webkit-background-clip: text; background-clip: text; } .page-hero-v2 .lead { max-width: 620px; margin: 22px auto 0; color: var(--muted); font-size: 1.16rem; line-height: 1.55; } /* ============================================================ SITES — premium grid of compagnies ============================================================ */ .sites-grid { width: min(var(--max), calc(100% - 40px)); margin: 24px auto 120px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .site-card-v2 { position: relative; display: flex; flex-direction: column; min-height: 380px; padding: 28px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); overflow: hidden; transition: transform 300ms cubic-bezier(.2,.9,.3,1.1), box-shadow 300ms ease; isolation: isolate; } .site-card-v2:hover { transform: translateY(-6px); box-shadow: var(--shadow-3); } .site-card-v2.theme-colisso { background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%); } .site-card-v2.theme-saramaya { background: linear-gradient(135deg, #7a0910 0%, #d71920 100%); color: #fff; border-color: rgba(122, 9, 16, 0.3); } .site-card-v2.theme-rakieta { background: linear-gradient(135deg, #0b3c91 0%, #1768ff 100%); color: #fff; border-color: rgba(11, 60, 145, 0.3); } .site-card-v2.theme-tcv { background: linear-gradient(135deg, #07523a 0%, #13a46b 100%); color: #fff; border-color: rgba(7, 82, 58, 0.3); } .site-card-v2.theme-rahimo { background: linear-gradient(135deg, #4d2c00 0%, #f8b72f 100%); color: #fff; border-color: rgba(77, 44, 0, 0.3); } .site-card-v2-domain { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.78rem; font-weight: 600; letter-spacing: -0.01em; align-self: flex-start; } .site-card-v2-logo { width: 64px; height: 64px; margin: 22px 0 0; border-radius: 18px; background: rgba(255, 255, 255, 0.92); display: grid; place-items: center; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.6); overflow: hidden; font-weight: 900; font-size: 1.7rem; letter-spacing: -0.04em; transition: transform 360ms cubic-bezier(.2,.9,.3,1.1); } .site-card-v2:hover .site-card-v2-logo { transform: translateY(-4px) rotate(-3deg); } .site-card-v2-logo img { width: 100%; height: 100%; object-fit: cover; } .site-card-v2.theme-colisso .site-card-v2-logo { background: linear-gradient(135deg, var(--blue), var(--blue-deep)); color: #fff; } .site-card-v2.theme-saramaya .site-card-v2-logo { background: #fff; color: var(--saramaya-deep); } .site-card-v2.theme-rakieta .site-card-v2-logo { background: #fff; color: var(--blue-deep); } .site-card-v2.theme-tcv .site-card-v2-logo { background: #fff; color: #07523a; } .site-card-v2.theme-rahimo .site-card-v2-logo { background: #fff; } .site-card-v2:not([class*="theme-"]) .site-card-v2-logo { background: linear-gradient(135deg, #1a2540, #0b0f19); color: #fff; } .site-card-v2.theme-colisso .site-card-v2-domain { background: rgba(23, 104, 255, 0.1); color: var(--blue); } .site-card-v2-domain::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(19, 164, 107, 0.22); } .site-card-v2-body { margin-top: auto; } .site-card-v2-body strong { display: block; margin-bottom: 8px; font-size: 1.8rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; } .site-card-v2-body p { margin: 0; opacity: 0.78; font-size: 0.96rem; line-height: 1.45; } .site-card-v2-cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 16px; font-size: 0.9rem; font-weight: 700; transition: gap 200ms ease; } .site-card-v2:hover .site-card-v2-cta { gap: 8px; } .site-card-v2-cta::after { content: "→"; } /* ============================================================ TICKETS — premium booking ============================================================ */ .booking-v2 { width: min(var(--max), calc(100% - 40px)); margin: 24px auto 120px; } .booking-search-v2 { display: grid; grid-template-columns: 1fr 1fr 160px 130px 160px; gap: 8px; padding: 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.86); border: 1px solid var(--line); box-shadow: var(--shadow-2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .booking-search-v2 label { display: grid; gap: 4px; padding: 8px 10px; border-radius: 12px; transition: background 200ms ease; } .booking-search-v2 label:focus-within { background: rgba(23, 104, 255, 0.06); } .booking-search-v2 span { color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; } .booking-search-v2 input, .booking-search-v2 select { width: 100%; height: 34px; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; font-family: inherit; } .booking-search-v2 input:focus, .booking-search-v2 select:focus { outline: none; } .booking-search-v2 button { align-self: stretch; height: 100%; min-height: 56px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 800; letter-spacing: -0.01em; cursor: pointer; transition: transform 180ms ease, box-shadow 200ms ease, background 200ms ease; } .booking-search-v2 button:hover { background: var(--blue); transform: translateY(-1px); box-shadow: 0 14px 28px rgba(23, 104, 255, 0.28); } .booking-layout-v2 { display: grid; grid-template-columns: minmax(0, 1.2fr) 400px; gap: 16px; margin-top: 16px; } .trip-panel, .seat-panel-v2 { padding: 24px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); } .panel-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 16px; } .panel-head span { display: block; color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; } .panel-head strong { display: block; margin-top: 2px; font-size: 1.24rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; } .trip-list-v2 { display: grid; gap: 10px; } .trip-card-v2, .trip-list-v2 .trip-card { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, #fff, #f8fbff); cursor: pointer; transition: all 240ms cubic-bezier(.2,.9,.3,1.1); } .trip-card-v2:hover, .trip-list-v2 .trip-card:hover { transform: translateY(-2px); border-color: rgba(23, 104, 255, 0.32); box-shadow: var(--shadow-1); } .trip-card-v2.is-selected, .trip-list-v2 .trip-card.is-selected { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23, 104, 255, 0.14); } .trip-card-v2 .trip-time, .trip-list-v2 .trip-card .trip-time { display: flex; align-items: center; gap: 12px; } .trip-card-v2 .trip-time strong, .trip-list-v2 .trip-card .trip-time strong { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; } .trip-card-v2 .trip-time i, .trip-list-v2 .trip-card .trip-time i { width: 36px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--red)); } .trip-card-v2 .trip-meta, .trip-list-v2 .trip-card .trip-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; color: var(--muted); font-size: 0.88rem; } .trip-card-v2 button, .trip-list-v2 .trip-card button { min-width: 110px; height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--blue); color: #fff; font: inherit; font-weight: 800; cursor: pointer; transition: transform 180ms ease; } .trip-card-v2 button:hover, .trip-list-v2 .trip-card button:hover { transform: translateY(-1px); } .seat-board-v2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; } .seat-board-v2 .seat-button { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 12px; background: #f5f7fb; color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; transition: all 180ms ease; } .seat-board-v2 .seat-button:hover:not(:disabled) { background: #fff; border-color: var(--blue); transform: scale(1.04); } .seat-board-v2 .seat-button.is-selected { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 8px 20px rgba(23, 104, 255, 0.32); } .seat-board-v2 .seat-button:disabled { background: #e1e7f0; color: #8b95a8; cursor: not-allowed; text-decoration: line-through; } .booking-summary-v2 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(180deg, #f6f9ff, #eef3ff); } .booking-summary-v2 span { color: var(--muted); } .booking-summary-v2 strong { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; color: var(--blue); } .payment-choice-v2 { display: grid; gap: 6px; margin-bottom: 14px; } .payment-choice-v2 span { color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; } .payment-choice-v2 select { height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-weight: 600; } .confirm-btn { width: 100%; height: 54px; border: 0; border-radius: 14px; background: var(--ink); color: #fff; font: inherit; font-size: 1rem; font-weight: 800; cursor: pointer; transition: all 200ms ease; } .confirm-btn:not(:disabled):hover { background: var(--blue); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(23, 104, 255, 0.3); } .confirm-btn:disabled { background: #d4dae6; color: #8a93a4; cursor: not-allowed; } .empty-state-v2 { padding: 22px; border: 1px dashed rgba(15, 23, 42, 0.2); border-radius: 14px; background: #f8fbff; color: var(--muted); text-align: center; } /* ============================================================ COLIS — premium tracking ============================================================ */ .tracking-v2 { width: min(var(--max), calc(100% - 40px)); margin: 24px auto 120px; } .tracking-search-v2 { display: grid; grid-template-columns: 1fr 160px; gap: 8px; padding: 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.86); border: 1px solid var(--line); box-shadow: var(--shadow-2); backdrop-filter: blur(20px); } .tracking-search-v2 label { display: grid; gap: 4px; padding: 8px 14px; } .tracking-search-v2 span { color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; } .tracking-search-v2 input { height: 34px; border: 0; background: transparent; font: inherit; font-size: 1.04rem; font-weight: 700; letter-spacing: -0.01em; font-family: "JetBrains Mono", ui-monospace, monospace; } .tracking-search-v2 input:focus { outline: none; } .tracking-search-v2 button { height: 100%; min-height: 56px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--ink); color: #fff; font: inherit; font-weight: 800; cursor: pointer; transition: all 200ms ease; } .tracking-search-v2 button:hover { background: var(--blue); transform: translateY(-1px); box-shadow: 0 14px 28px rgba(23, 104, 255, 0.28); } .tracking-layout-v2 { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 16px; margin-top: 16px; } .tracking-result-v2 { padding: 28px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--blue), #4d8aff); color: #fff; box-shadow: 0 30px 60px rgba(23, 104, 255, 0.32); } .tracking-code-v2 small { color: rgba(255, 255, 255, 0.8); font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; } .tracking-code-v2 strong { display: block; margin-top: 8px; font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .tracking-progress-v2 { height: 10px; margin: 24px 0; border-radius: 999px; background: rgba(255, 255, 255, 0.22); overflow: hidden; } .tracking-progress-v2 span { display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), #fff); box-shadow: 0 0 14px rgba(248, 183, 47, 0.55); transition: width 600ms cubic-bezier(.2,.9,.3,1.1); } .tracking-meta-v2 { display: grid; gap: 14px; margin: 24px 0 0; } .tracking-meta-v2 div { padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.18); } .tracking-meta-v2 dt { color: rgba(255, 255, 255, 0.7); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; } .tracking-meta-v2 dd { margin: 4px 0 0; font-size: 1.06rem; font-weight: 700; } .tracking-timeline-v2 { margin: 0; padding: 28px; list-style: none; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); } .tracking-timeline-v2 li { position: relative; display: grid; grid-template-columns: 24px 1fr auto; gap: 14px; padding: 0 0 22px; } .tracking-timeline-v2 li:last-child { padding-bottom: 0; } .tracking-timeline-v2 li::before { content: ""; width: 14px; height: 14px; margin-top: 4px; border-radius: 50%; background: #d8dfeb; z-index: 2; } .tracking-timeline-v2 li.is-done::before { background: var(--green); box-shadow: 0 0 0 4px rgba(19, 164, 107, 0.18); } .tracking-timeline-v2 li.is-current::before { background: var(--blue); box-shadow: 0 0 0 5px rgba(23, 104, 255, 0.18); animation: pulse-dot 1.8s ease-in-out infinite; } .tracking-timeline-v2 li:not(:last-child)::after { content: ""; position: absolute; top: 18px; left: 6px; bottom: -10px; width: 2px; background: linear-gradient(180deg, #d8dfeb 0%, #e8edf5 100%); z-index: 1; } .tracking-timeline-v2 li.is-done:not(:last-child)::after, .tracking-timeline-v2 li.is-current:not(:last-child)::after { background: linear-gradient(180deg, var(--green), var(--blue)); } .tracking-timeline-v2 strong { display: block; font-size: 1.04rem; font-weight: 800; letter-spacing: -0.01em; } .tracking-timeline-v2 span { display: block; margin-top: 2px; color: var(--muted); font-size: 0.92rem; } .tracking-timeline-v2 time { color: var(--muted); font-size: 0.86rem; font-weight: 600; } /* ============================================================ GESTION — premium cockpit ============================================================ */ .cockpit-v2 { width: min(var(--max), calc(100% - 40px)); margin: 24px auto 120px; display: grid; grid-template-columns: 110px minmax(0, 1fr); border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-2); overflow: hidden; } .cockpit-nav-v2 { background: linear-gradient(180deg, #0b0f19 0%, #1a2540 100%); padding: 28px 0; display: grid; align-content: start; gap: 14px; justify-items: center; } .cockpit-nav-v2 i { width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); display: grid; place-items: center; color: rgba(255, 255, 255, 0.7); font-style: normal; font-weight: 800; font-size: 0.86rem; } .cockpit-nav-v2 i.active { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 10px 22px rgba(23, 104, 255, 0.4); } .cockpit-main-v2 { padding: 36px; } .kpis-v2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .kpi-card { padding: 22px; border-radius: 18px; background: linear-gradient(135deg, #f5f7fb 0%, #eef3fb 100%); border: 1px solid var(--line-soft); } .kpi-card small { display: block; color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; } .kpi-card strong { display: block; margin-top: 8px; font-size: 2.2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); } .kpi-card .trend { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 2px 10px; border-radius: 999px; background: rgba(19, 164, 107, 0.12); color: var(--green); font-size: 0.78rem; font-weight: 700; } .kpi-card .trend.down { background: rgba(255, 77, 67, 0.1); color: var(--red); } .bars-v2 { height: 220px; display: flex; align-items: end; gap: 12px; margin-top: 24px; padding: 24px; border-radius: 18px; background: linear-gradient(180deg, #f7faff 0%, #ecf2ff 100%); } .bars-v2 i { flex: 1; border-radius: 8px 8px 2px 2px; background: linear-gradient(180deg, var(--blue), rgba(23, 104, 255, 0.4)); animation: bar-rise-v2 1300ms cubic-bezier(.2,.9,.2,1) both; transform-origin: bottom; } .bars-v2 i:nth-child(1) { height: 38%; animation-delay: 100ms; } .bars-v2 i:nth-child(2) { height: 62%; animation-delay: 180ms; } .bars-v2 i:nth-child(3) { height: 50%; animation-delay: 260ms; } .bars-v2 i:nth-child(4) { height: 86%; animation-delay: 340ms; } .bars-v2 i:nth-child(5) { height: 72%; animation-delay: 420ms; } .bars-v2 i:nth-child(6) { height: 94%; animation-delay: 500ms; } .bars-v2 i:nth-child(7) { height: 70%; animation-delay: 580ms; } @keyframes bar-rise-v2 { from { transform: scaleY(0); } to { transform: scaleY(1); } } .cockpit-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; } .feature-tile { padding: 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); } .feature-tile strong { display: block; margin-bottom: 4px; font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; } .feature-tile small { color: var(--muted); font-size: 0.86rem; line-height: 1.4; } /* ============================================================ CONTACT — premium form ============================================================ */ .contact-v2 { position: relative; padding: 80px 0 140px; overflow: hidden; isolation: isolate; } .contact-panel-v2 { position: relative; z-index: 2; width: min(620px, calc(100% - 40px)); margin: 0 auto; padding: 42px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(255, 255, 255, 0.84); box-shadow: var(--shadow-3); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); } .contact-panel-v2 h2 { margin: 14px 0 0; font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; } .contact-panel-v2 > p { margin: 14px 0 0; color: var(--muted); font-size: 1.04rem; line-height: 1.5; } .contact-form-v2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; } .contact-form-v2 label { display: grid; gap: 6px; } .contact-form-v2 label span { color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; } .contact-form-v2 input, .contact-form-v2 select, .contact-form-v2 textarea { width: 100%; height: 50px; padding: 0 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); font: inherit; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; transition: border-color 200ms ease, box-shadow 200ms ease; } .contact-form-v2 textarea { height: auto; min-height: 120px; padding: 14px 16px; resize: vertical; } .contact-form-v2 input:focus, .contact-form-v2 select:focus, .contact-form-v2 textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(23, 104, 255, 0.12); } .contact-form-v2 select, .contact-form-v2 textarea, .contact-form-v2 button, .contact-form-v2 .form-status { grid-column: 1 / -1; } .contact-form-v2 button { height: 56px; border: 0; border-radius: 14px; background: var(--ink); color: #fff; font: inherit; font-size: 1rem; font-weight: 800; cursor: pointer; transition: all 200ms ease; position: relative; overflow: hidden; } .contact-form-v2 button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%); transform: translateX(-110%); transition: transform 700ms ease; } .contact-form-v2 button:hover { background: var(--blue); transform: translateY(-2px); box-shadow: 0 16px 32px rgba(23, 104, 255, 0.3); } .contact-form-v2 button:hover::before { transform: translateX(110%); } .contact-form-v2 .form-status { margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(19, 164, 107, 0.1); color: var(--green); font-size: 0.94rem; font-weight: 700; text-align: center; min-height: 0; } .contact-form-v2 .form-status:empty { display: none; } /* ============================================================ REVEAL ON SCROLL ============================================================ */ [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 800ms cubic-bezier(.2,.9,.3,1.1), transform 800ms cubic-bezier(.2,.9,.3,1.1); will-change: opacity, transform; } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } /* no-JS / no-IntersectionObserver fallback — reveal everything */ .no-js [data-reveal] { opacity: 1; transform: none; } /* stagger children when a grid section is revealed */ .bento-grid > [data-reveal]:nth-child(1) { transition-delay: 0ms; } .bento-grid > [data-reveal]:nth-child(2) { transition-delay: 80ms; } .bento-grid > [data-reveal]:nth-child(3) { transition-delay: 160ms; } .bento-grid > [data-reveal]:nth-child(4) { transition-delay: 240ms; } .stats-grid > [data-reveal]:nth-child(1) { transition-delay: 0ms; } .stats-grid > [data-reveal]:nth-child(2) { transition-delay: 100ms; } .stats-grid > [data-reveal]:nth-child(3) { transition-delay: 200ms; } .stats-grid > [data-reveal]:nth-child(4) { transition-delay: 300ms; } .testimonial-rail > [data-reveal]:nth-child(1) { transition-delay: 0ms; } .testimonial-rail > [data-reveal]:nth-child(2) { transition-delay: 100ms; } .testimonial-rail > [data-reveal]:nth-child(3) { transition-delay: 200ms; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .hero-v2-inner { grid-template-columns: 1fr; gap: 80px; } .hero-v2-stage { min-height: 460px; } .browser-mock.layer-1 { width: 88%; } .browser-mock.layer-2 { width: 76%; } .browser-mock.layer-3 { width: 66%; } .bento-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 360px; } .showcase-grid { grid-template-columns: 1fr; gap: 56px; text-align: center; } .showcase-copy { max-width: 640px; margin: 0 auto; } .showcase-list { text-align: left; } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; } .testimonial-rail { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .sites-grid { grid-template-columns: repeat(2, 1fr); } .booking-search-v2 { grid-template-columns: 1fr 1fr; } .booking-search-v2 button { grid-column: 1 / -1; min-height: 50px; } .booking-layout-v2, .tracking-layout-v2 { grid-template-columns: 1fr; } .cockpit-v2 { grid-template-columns: 1fr; } .cockpit-nav-v2 { display: flex; justify-content: center; padding: 18px; } .kpis-v2, .cockpit-feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .hero-v2 { padding: 100px 0 60px; } .hero-v2-stage { min-height: 420px; } .browser-mock.layer-1 { width: 92%; } .float-pill-1, .float-pill-2, .float-pill-3 { display: none; } .hero-v2-stats { gap: 18px; } .stat strong { font-size: 1.6rem; } .bento-grid { grid-template-columns: 1fr; grid-auto-rows: 340px; } .demo-trips { grid-template-columns: 1fr; } .demo-route { grid-template-columns: 1fr; gap: 8px; } .route-line { height: 60px; } .stats-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .hero-v2-scroll { display: none; } .marquee-track { font-size: 1.4rem; } .marquee-track span:nth-child(even) { font-size: 1rem; } .sites-grid { grid-template-columns: 1fr; } .booking-search-v2 { grid-template-columns: 1fr; } .kpis-v2, .cockpit-feature-grid { grid-template-columns: 1fr; } .contact-panel-v2 { padding: 28px; } .contact-form-v2 { grid-template-columns: 1fr; } .page-hero-v2 { padding: 120px 0 60px; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .hero-mesh .orb, .marquee-track { animation: none !important; } [data-reveal] { opacity: 1; transform: none; } .hero-v2-title .word { opacity: 1; transform: none; } }