/* ===================================================================== AllPossible Studio — site styles Fonts: Guisol (hero), Montreux Classic Outline/Black (display), Montreux Classic DemiBold (paragraphs), Poppins (UI) ===================================================================== */ @font-face { font-family: 'Guisol'; src: url('../fonts/Guisol.woff2') format('woff2'), url('../fonts/Guisol.woff') format('woff'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Montreux Outline'; src: url('../fonts/montreux-classic-outline.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Montreux Black'; src: url('../fonts/montreux-classic-black.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Montreux DemiBold'; src: url('../fonts/montreux-classic-demibold.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Montreux Grotesk'; src: url('../fonts/montreux-grotesk-demibold.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/poppins-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/poppins-500.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/poppins-600.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/poppins-700.woff2') format('woff2'); font-weight: 700; font-display: swap; } :root { --brand: #681CFF; --brand-dark: #552EA5; --bg: #0A0A0A; --text: #FFFFFF; --muted: #FFFFFF63; --font-ui: 'Poppins', sans-serif; --font-body: 'Montreux DemiBold', 'Poppins', sans-serif; --font-outline: 'Montreux Outline', 'Poppins', sans-serif; --font-black: 'Montreux Black', 'Poppins', sans-serif; --font-hero: 'Guisol', 'Montreux Black', sans-serif; --container: 1520px; --radius-card: 8px 24px 8px 24px; --radius-field: 16px 32px 16px 32px; /* target-style cursor for the flip cards */ --cursor-target: url("data:image/svg+xml;utf8,") 18 18, pointer; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 16px; line-height: 1.5; overflow-x: hidden; } /* iOS Safari ignores overflow-x on ; clip the page wrapper instead (clip keeps position:sticky working) */ .page-wrap { position: relative; width: 100%; max-width: 100vw; overflow-x: clip; } @supports not (overflow-x: clip) { .page-wrap { overflow-x: hidden; } } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } p { margin: 0; } h1, h2, h3, h4 { margin: 0; font-weight: normal; } button { font: inherit; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 30px; } .divider { border: 0; border-top: 2.2px solid var(--muted); margin: 34px 0 0; } .divider--short { max-width: 60%; margin: 60px auto 0; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-ui); font-weight: 500; font-size: 18px; line-height: 1.2; padding: 12px 20px; border-radius: 8px 16px 8px 16px; border: 1px solid transparent; color: #fff; cursor: pointer; transition: background .25s, color .25s, border-color .25s, border-radius .25s, transform .2s; } .btn--primary { background: var(--brand); } .btn--primary:hover { background: var(--brand-dark); } .btn--outline { background: var(--bg); border-color: #fff; } .btn--outline:hover { background: #fff; color: #000; } .btn--pill { background: var(--brand); border-radius: 20px; font-size: 14px; padding: 12px 14px; } .btn--pill:hover { background: var(--brand-dark); } .btn--small { font-size: 14px; padding: 9px 14px; } .btn:active { transform: translateY(1px); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; padding: 20px 15px; transition: background .3s, box-shadow .3s; } .site-header.is-stuck { background: #00000063; box-shadow: 2px 0 12px rgba(0,0,0,.15); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .site-header__inner { display: flex; align-items: center; gap: 20px; } .site-header__logo { flex: 0 0 auto; width: 10.968%; min-width: 70px; } .site-header__logo img { width: 70px; } .site-nav { flex: 1; display: flex; justify-content: center; gap: 32px; } .site-nav a { font-weight: 600; font-size: 16px; color: #fff; transition: color .2s; } .site-nav a:hover, .site-nav a.is-active { color: var(--brand); } .site-header__cta { flex: 0 0 auto; } .site-header__burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; cursor: pointer; margin-left: auto; } .site-header__burger span { display: block; width: 26px; height: 2px; background: #fff; } .mobile-menu { position: fixed; inset: 0; z-index: 100; } .mobile-menu[hidden] { display: none; } .mobile-menu__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); } .mobile-menu__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 85%); background: #111; padding: 70px 30px; box-shadow: -10px 0 30px rgba(0,0,0,.5); animation: slideIn .25s ease; } @keyframes slideIn { from { transform: translateX(100%); } to { transform: none; } } .mobile-menu__close { position: absolute; top: 16px; right: 18px; background: none; border: 0; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; } .mobile-menu__nav { display: flex; flex-direction: column; gap: 22px; } .mobile-menu__nav a { font-size: 22px; font-weight: 600; color: #fff; } .mobile-menu__nav a:hover { color: var(--brand); } /* ---------- Pills / section heads ---------- */ .pill { display: inline-flex; align-items: center; gap: 9px; padding: 5px 12px 5px 8px; border-radius: 100px; background: #000; font-family: var(--font-ui); font-weight: 500; font-size: 14px; color: #fff; white-space: nowrap; } .pill--glow { box-shadow: 0 0 10px rgba(255,255,255,.5); } .pill img { width: 30px; } .pill__dot { width: 9px; height: 9px; border-radius: 50%; background: #17e94a; box-shadow: 0 0 6px #17e94a; } .pill__svg { width: 16px; height: 16px; } .section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; padding: 90px 0 0; } .section-head__text, .hero__text { font-family: var(--font-body); font-size: 16px; line-height: 23px; text-align: right; flex: 1 1 auto; max-width: 1100px; } /* ---------- Hero ---------- */ .hero { padding-top: 60px; } .hero__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; } .hero__heading { font-family: var(--font-hero); font-size: 140px; line-height: .8em; text-transform: uppercase; margin: 70px 0 30px; letter-spacing: .01em; } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; } .clients { margin-top: 44px; } .marquee--logos .marquee__group { gap: 0; } .marquee--logos .marquee__track { animation-direction: reverse; } /* client logos travel left → right */ .clients__logo { display: inline-flex; align-items: center; justify-content: center; width: 300px; height: 60px; padding: 0 30px; } .clients__logo img { max-height: 40px; width: auto; max-width: 180px; object-fit: contain; } /* ---------- Marquee ---------- */ .marquee { overflow: hidden; width: 100%; } .marquee__track { display: flex; width: max-content; animation: marquee var(--marquee-duration, 20s) linear infinite; will-change: transform; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__group { display: flex; align-items: center; gap: 0 28px; padding-right: 28px; flex-shrink: 0; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marq-text { font-size: 90px; line-height: 1; white-space: nowrap; text-transform: uppercase; } .marq-text--fill { font-family: var(--font-black); color: #fff; } .marq-text--outline { font-family: var(--font-outline); color: #fff; } .marq-text--fill-purple { font-family: var(--font-black); color: var(--brand); } .marq-text--outline-purple { font-family: var(--font-outline); color: var(--brand); } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } } /* ---------- Works ---------- */ .works { padding-top: 80px; position: relative; } .marquee--works { position: relative; z-index: 2; --marquee-duration: 24s; } .marquee--works .marq-text { font-size: 150px; } .works__carousel { margin-top: 150px; overflow: visible; padding: 0 6%; position: relative; z-index: 1; } .works__slide { border-radius: 16px; overflow: hidden; } .works__slide img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; } .works .swiper-pagination { position: static; margin-top: 26px; } .works .swiper-pagination-bullet { background: #fff; opacity: .35; width: 9px; height: 9px; } .works .swiper-pagination-bullet-active { background: var(--brand); opacity: 1; } .works__cta { text-align: center; margin-top: 40px; position: relative; z-index: 3; } /* ---------- Services rows (home + services page) ---------- */ .services { padding-bottom: 40px; } .features-list { margin-top: 60px; } .features { position: relative; height: 190px; overflow: hidden; max-width: 1250px; margin: 0 auto; border-bottom: 1px solid #fff; text-align: center; outline: none; cursor: default; } .feature-heading { font-family: var(--font-outline); font-size: 200px; line-height: 1; color: #fff; margin-top: 30px; text-transform: uppercase; transition: margin .5s, transform .5s; white-space: nowrap; } .features:hover .feature-heading, .features:focus-visible .feature-heading, .features.is-touched .feature-heading { font-family: var(--font-black); margin-top: -40px; } /* floating tags: hidden until hover, then each drifts in its OWN random direction */ .floating-tag { position: absolute; left: 50%; top: 50%; z-index: 3; display: inline-block; padding: 7px 16px; border-radius: 100px; font-family: var(--font-ui); font-weight: 500; font-size: 16px; color: #fff; white-space: nowrap; visibility: hidden; opacity: 0; transition: visibility 0s .5s, opacity .5s linear; pointer-events: none; will-change: transform; } .features:hover .floating-tag, .features:focus-visible .floating-tag, .features.is-touched .floating-tag { visibility: visible; opacity: 1; transition: visibility 0s, opacity .5s linear; animation: tag-drift var(--dur, 4s) ease-in-out var(--delay, 0s) infinite alternate; } @keyframes tag-drift { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(var(--dx, 20px), var(--dy, -14px)) rotate(var(--rot, 0deg)); } } @media (prefers-reduced-motion: reduce) { .floating-tag { animation: none !important; } } /* ---------- Why choose us: flip cards ---------- */ .why { padding-bottom: 60px; } .flip-grid { display: flex; justify-content: center; align-items: stretch; gap: 40px; max-width: 1300px; margin: 70px auto 0; padding: 40px 20px; } .flip-grid__col { display: flex; flex-direction: column; justify-content: center; gap: 70px; flex: 0 0 380px; } .flip-card { width: 380px; height: 480px; perspective: 1500px; cursor: var(--cursor-target); outline: none; position: relative; z-index: 1; transition: z-index 0s .3s; } .flip-card--tilt-left { rotate: -6deg; } .flip-card--tilt-right { rotate: 6deg; } .flip-card:hover, .flip-card.is-flipped { z-index: 2; transition: z-index 0s; } .flip-card__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; --mx: 0px; --my: 0px; --flip: 0deg; transform: translate3d(var(--mx), var(--my), 0) rotateY(var(--flip)); transition: transform .7s cubic-bezier(.4, .2, .2, 1); } .flip-card.is-flipped .flip-card__inner { --flip: 180deg; } .flip-card:focus-visible .flip-card__inner { box-shadow: 0 0 0 4px var(--brand); border-radius: var(--radius-card); } /* gentle floating: every card drifts on its own path/tempo (translate is separate from the tilt "rotate") */ .flip-card { animation: card-float var(--float-dur, 7s) ease-in-out var(--float-delay, 0s) infinite; } .flip-grid__col--1 .flip-card:nth-child(1) { --float-dur: 7s; --float-delay: 0s; } .flip-grid__col--1 .flip-card:nth-child(2) { --float-dur: 8.5s; --float-delay: -3s; } .flip-grid__col--2 .flip-card:nth-child(1) { --float-dur: 6.5s; --float-delay: -1.5s; } .flip-grid__col--2 .flip-card:nth-child(2) { --float-dur: 8s; --float-delay: -5s; } .flip-grid__col--3 .flip-card:nth-child(1) { --float-dur: 7.5s; --float-delay: -4s; } .flip-grid__col--3 .flip-card:nth-child(2) { --float-dur: 9s; --float-delay: -2s; } @keyframes card-float { 0% { translate: 0 0; } 25% { translate: 10px -14px; } 50% { translate: -9px -4px; } 75% { translate: 6px 12px; } 100% { translate: 0 0; } } @media (prefers-reduced-motion: reduce) { .flip-card { animation: none; } .flip-card__inner { --mx: 0px !important; --my: 0px !important; } } .flip-card__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--radius-card); border: 2px solid #000; color: #000; overflow: hidden; } .flip-card__front { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 30px; text-align: center; } .flip-card__icon { display: block; width: 70px; height: 70px; } .flip-card__icon svg { width: 100%; height: 100%; fill: #000; } .flip-card__title { font-family: var(--font-black); font-size: 23px; line-height: 1.2em; text-transform: uppercase; } .flip-card__back { transform: rotateY(180deg); padding: 30px 32px; overflow-y: auto; } .flip-card__icon--small { width: 30px; height: 30px; margin-left: auto; } .flip-card__subtitle { font-family: var(--font-black); font-size: 16px; margin: 6px 0 8px; } .flip-card__body { font-family: var(--font-body); font-size: 16px; line-height: 1.4; } .flip-card__image { margin: 20px auto 0; max-width: 290px; } /* hover tooltip that follows the cursor */ .flip-tooltip { position: fixed; z-index: 200; left: 0; top: 0; pointer-events: none; opacity: 0; transform: translate(-50%, -160%) scale(.9); transition: opacity .18s, transform .18s; background: #fff; color: #000; font-family: var(--font-ui); font-weight: 600; font-size: 13px; letter-spacing: .02em; padding: 7px 12px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.35); white-space: nowrap; } .flip-tooltip::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #fff; } .flip-tooltip.is-visible { opacity: 1; transform: translate(-50%, -160%) scale(1); } /* ---------- Contact ---------- */ .contact { padding-top: 90px; } .marquee--contact { --marquee-duration: 22s; margin: 60px 0 40px; } .marquee--contact .marq-text { font-size: 100px; letter-spacing: 10px; } .contact .section-head { padding-top: 90px; } .contact-form { display: flex; flex-wrap: wrap; margin-top: 60px; padding-left: 20px; } .contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .contact-form__col { width: 50%; padding: 15px; } .contact-form__submit { width: 100%; padding: 15px; } .field { display: block; border: 2px solid grey; border-radius: var(--radius-field); padding: 10px; margin-bottom: 30px; color: #fff; font-family: var(--font-body); font-size: 21px; transition: border-color .25s; } .field:focus-within { border-color: var(--brand); } .field--input { height: 140px; } .field--textarea { height: 310px; } .field__label { display: block; } .field input, .field textarea { width: 100%; background: transparent; border: 0; outline: 0; color: #d0d0d0; font-family: var(--font-body); font-size: 40px; padding-left: 10px; text-transform: uppercase; } .field input { height: 98px; } .field textarea { height: 260px; resize: none; line-height: 1.3; } .field ::placeholder { color: #777; } .submit-btn { width: 100%; display: block; color: #fff; font-family: var(--font-body); font-size: 60px; font-weight: bold; text-transform: uppercase; padding: 30px; background: transparent; border: 5px solid var(--brand); border-radius: var(--radius-field); cursor: pointer; transition: background .3s, border-radius .3s; } .submit-btn:hover, .submit-btn:focus-visible { background: var(--brand); border-radius: 16px; } .form-alert { margin-top: 40px; padding: 18px 24px; border-radius: 12px; font-family: var(--font-body); font-size: 18px; } .form-alert[hidden] { display: none; } .form-alert--success { background: #12331f; border: 1px solid #1f9d55; color: #b9ffd2; } .form-alert--error { background: #3a1216; border: 1px solid #c53030; color: #ffc9cf; } /* ---------- Footer ---------- */ .site-footer { padding: 70px 30px 30px; text-align: center; background: var(--bg); } .site-footer__address { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 16px; color: #fff; } .site-footer__pin { width: 52px; height: 52px; color: #ff1e1e; } .site-footer__address:hover span { text-decoration: underline; } .site-footer__logo { margin: 70px auto 20px; max-width: 1600px; } .site-footer__logo img { width: 100%; } .site-footer__bar { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-family: var(--font-body); font-size: 16px; max-width: 1600px; margin: 0 auto; } .site-footer__bar a:hover { color: var(--brand); } /* ---------- Floating widgets ---------- */ .whatsapp { position: fixed; left: 20px; bottom: 20px; z-index: 60; display: flex; align-items: center; gap: 12px; } .whatsapp__icon { width: 54px; height: 54px; border-radius: 50%; background: #49E670; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: transform .2s; } .whatsapp__icon svg { width: 34px; height: 34px; } .whatsapp:hover .whatsapp__icon { transform: scale(1.08); } .whatsapp__label { background: #fff; color: #333; font-family: var(--font-ui); font-size: 14px; padding: 8px 14px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.25); position: relative; } .whatsapp__label::before { content: ''; position: absolute; left: -6px; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left: 0; border-right-color: #fff; } .back-top { position: fixed; right: 30px; bottom: 55px; z-index: 60; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: #222; border: 0; display: grid; place-items: center; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s, transform .3s, visibility .3s; box-shadow: 0 6px 20px rgba(0,0,0,.35); } .back-top svg { width: 20px; height: 20px; } .back-top.is-visible { opacity: 1; visibility: visible; transform: none; } /* ---------- Services page ---------- */ .service-page { padding-top: 10px; } .service-page__nav { position: sticky; top: 112px; z-index: 40; display: flex; gap: 10px; padding: 8px 15px; } .service-block { padding: 40px 0 20px; } .marquee--service { --marquee-duration: 26s; margin: 30px 0 20px; } .marquee--service .marq-text { letter-spacing: -1px; } .service-row { display: flex; align-items: center; gap: 30px; padding: 60px 0; max-width: 1400px; margin: 0 auto; } .service-row--reverse { flex-direction: row-reverse; } .service-row > * { flex: 1 1 50%; } .features--page { height: 190px; border-bottom-color: var(--brand); } .features--page .feature-heading { font-size: 120px; margin-top: 84px; } .features--page:hover .feature-heading, .features--page:focus-visible .feature-heading, .features--page.is-touched .feature-heading { margin-top: 28px; } .service-row__text { font-family: var(--font-body); font-size: 18px; line-height: 25px; padding: 30px; } /* ---------- Scroll-driven zoom / parallax (see site.js) ---------- */ [data-fx-scale], [data-fx-y] { will-change: transform; transform-origin: center center; } @media (prefers-reduced-motion: reduce) { [data-fx-scale], [data-fx-y] { transform: none !important; } } /* ---------- Responsive ---------- */ @media (max-width: 1400px) { .hero__heading { font-size: 110px; } .feature-heading { font-size: 150px; } .features { height: 150px; } .flip-grid__col { flex-basis: 320px; gap: 50px; } .flip-card { width: 320px; height: 430px; } } @media (max-width: 1100px) { .marq-text, .marquee--contact .marq-text { font-size: 70px; letter-spacing: 4px; } .flip-grid { flex-wrap: wrap; } .flip-grid__col { flex-basis: 300px; } .flip-card { width: 300px; height: 400px; } .service-row { flex-direction: column; } .features--page .feature-heading { font-size: 90px; margin-top: 66px; } .features--page:hover .feature-heading, .features--page.is-touched .feature-heading { margin-top: 20px; } .features--page { height: 150px; } } @media (max-width: 992px) { .site-nav, .site-header__cta { display: none; } .site-header__burger { display: flex; } .site-header__logo img { width: 50px; } .hero { padding-top: 30px; text-align: center; } .hero__top { flex-direction: column; align-items: center; } .hero__text, .section-head__text { text-align: center; } .hero__heading { font-size: 64px; line-height: 1.05; margin: 30px 0 24px; } .hero__actions { justify-content: center; } .section-head { flex-direction: column; align-items: center; padding-top: 60px; } .feature-heading { font-size: 90px; margin-top: 40px; } .features { height: 110px; } .features:hover .feature-heading, .features.is-touched .feature-heading { margin-top: -4px; } .floating-tag { font-size: 13px; padding: 5px 12px; } .works { padding-top: 40px; } .works__carousel { margin-top: 30px; padding: 0 4%; margin-bottom: 20px; } .marquee--works .marq-text { font-size: 64px; } .works .swiper-pagination { margin-top: 18px; } .marq-text, .marquee--contact .marq-text { font-size: 52px; letter-spacing: 2px; } .flip-grid { gap: 30px; padding: 20px 10px; } .flip-grid__col { flex-basis: 100%; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 30px; } .flip-card--tilt-left { rotate: -5deg; } .flip-card--tilt-right { rotate: 5deg; } .flip-grid__col { gap: 44px; } .contact-form { padding-left: 0; } .contact-form__col { width: 100%; padding: 5px 0; } .field { font-size: 16px; } .field--input { height: 100px; } .field input { height: 60px; font-size: 25px; } .field textarea { font-size: 25px; height: 220px; } .field--textarea { height: 270px; } .submit-btn { font-size: 40px; padding: 15px; width: 90%; margin: 0 auto; } .site-footer__bar { justify-content: center; text-align: center; } .service-page__nav { top: 92px; flex-wrap: wrap; } .service-row__text { padding: 10px 0; font-size: 16px; } } @media (max-width: 560px) { .container { padding: 0 18px; } .hero__heading { font-size: 44px; line-height: 62px; } .feature-heading { font-size: 60px; margin-top: 30px; } .features { height: 80px; } .features:hover .feature-heading, .features.is-touched .feature-heading { margin-top: -2px; } .features--page { height: 92px; } .features--page .feature-heading { font-size: 60px; margin-top: 40px; } .features--page:hover .feature-heading, .features--page.is-touched .feature-heading { margin-top: 10px; } .flip-card { width: 100%; max-width: 320px; height: 410px; } .flip-grid { padding: 20px 24px; } .marq-text, .marquee--contact .marq-text { font-size: 38px; } .clients__logo { width: 180px; padding: 0 16px; } .back-top { right: 16px; bottom: 90px; } }