/* ============================================ NOVENT — Digital Marketing Studio Multi-page · light theme · purple accent ============================================ */ :root { --bg: #f0f0ff; --bg-2: #e7e7fb; --fg: #14101f; --muted: #6b6781; --line: rgba(20, 16, 31, 0.10); --accent: #c030f0; --accent-2: #9b1fc9; --dark: #0c0a12; --dark-2: #161320; --radius: 18px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: auto; } /* Lenis smooth-scroll helpers (avoid native/Lenis conflict) */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } body { background: var(--bg); color: var(--fg); font-family: var(--font-body); line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; } body.loading, body.menu-open { overflow: hidden; } a { color: inherit; text-decoration: none; } em { font-style: normal; color: var(--accent); } img { max-width: 100%; display: block; } ::selection { background: var(--accent); color: #fff; } /* ===== Background ===== */ .bg-glow { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60vw 60vw at 78% -10%, rgba(192,48,240,0.16), transparent 60%), radial-gradient(50vw 50vw at 8% 35%, rgba(155,31,201,0.10), transparent 60%); } .bg-grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ===== Loader ===== */ #loader { position: fixed; inset: 0; z-index: 10000; background: var(--dark); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; color: #fff; } #loader h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.35em; font-size: 0.85rem; opacity: 0.7; } #loader-star { width: clamp(150px, 32vw, 240px); height: auto; transform-origin: center; } #loader-number { font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 12vw, 7rem); letter-spacing: -0.02em; } /* Skip the loader instantly on later visits (set by an inline script) */ html.skip-loader #loader { display: none !important; } html.skip-loader body.loading { overflow: visible !important; } /* ===== Page transition panel ===== */ #transition { position: fixed; inset: 0; z-index: 9000; background: var(--dark); transform: translateY(100%); pointer-events: none; display: flex; align-items: center; justify-content: center; } #transition .t-mark { width: 60px; height: 60px; opacity: 0; } /* ===== Custom cursor ===== */ .cursor, .cursor-dot { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 8000; border-radius: 50%; } .cursor { width: 38px; height: 38px; border: 1px solid var(--accent); transform: translate(-50%,-50%); transition: width .3s var(--ease), height .3s var(--ease), background .3s, border-color .3s; } .cursor-dot { width: 5px; height: 5px; background: var(--accent); transform: translate(-50%,-50%); } .cursor.grow { width: 72px; height: 72px; background: rgba(192,48,240,0.12); } .cursor.on-dark { border-color: #fff; } .cursor.on-dark + .cursor-dot, body.menu-open .cursor-dot { background: #fff; } @media (hover: none) { .cursor, .cursor-dot { display: none; } } /* ===== Top bar ===== */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 1.4rem clamp(1.2rem, 4vw, 4rem); transition: padding .4s var(--ease), background .4s, backdrop-filter .4s; } .topbar.scrolled { padding-top: .9rem; padding-bottom: .9rem; background: rgba(240,240,255,0.72); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .topbar__logo { display: inline-flex; align-items: center; } .topbar__logo img { height: 52px; width: auto; display: block; } .topbar__logo span { color: var(--accent); } .topbar__right { display: flex; align-items: center; gap: 1.5rem; } .topbar__loc { font-family: var(--font-display); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .menu-toggle { display: inline-flex; align-items: center; gap: .6rem; background: var(--fg); color: var(--bg); border: none; cursor: pointer; font-family: var(--font-display); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; padding: .65rem 1.1rem; border-radius: 100px; transition: background .3s, color .3s; } .menu-toggle:hover { background: var(--accent); color: #fff; } .menu-toggle__lines { display: inline-flex; flex-direction: column; gap: 4px; } .menu-toggle__lines span { width: 18px; height: 2px; background: currentColor; transition: .3s var(--ease); } /* ===== Fullscreen overlay menu ===== */ .menu { position: fixed; inset: 0; z-index: 500; background: var(--dark); color: #fff; display: flex; flex-direction: column; clip-path: inset(0 0 100% 0); pointer-events: none; } .menu.open { pointer-events: auto; } .menu__top { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem clamp(1.2rem,4vw,4rem); border-bottom: 1px solid rgba(255,255,255,0.08); } .menu__brand { display: inline-flex; align-items: center; } .menu__brand img { height: 48px; width: auto; display: block; } .menu__brand span { color: var(--accent); } .menu__top-right { display: flex; align-items: center; gap: 1.5rem; } .menu__loc { font-family: var(--font-display); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,0.45); } .menu__close { background: rgba(255,255,255,0.1); color: #fff; border: none; cursor: pointer; font-family: var(--font-display); font-size: .78rem; letter-spacing: .14em; padding: .6rem 1.2rem; border-radius: 100px; transition: background .3s; } .menu__close:hover { background: var(--accent); } .menu__list { flex: 1; display: flex; flex-direction: column; justify-content: center; } .menu__item { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(.4rem,1.8vh,1.4rem) clamp(1.2rem,4vw,4rem); border-bottom: 1px solid rgba(255,255,255,0.07); overflow: hidden; } .menu__item:first-child { border-top: 1px solid rgba(255,255,255,0.07); } .menu__item::before { content: ''; position: absolute; inset: 0; background: var(--accent); transform: translateY(101%); transition: transform .5s var(--ease); z-index: 0; } .menu__item:hover::before { transform: translateY(0); } .menu__item > * { position: relative; z-index: 1; } .menu__num { font-family: var(--font-display); font-size: .8rem; color: rgba(255,255,255,0.4); width: 40px; transition: color .4s; } .menu__name { flex: 1; font-family: var(--font-display); font-weight: 700; font-style: italic; text-transform: uppercase; font-size: clamp(2.2rem, 7vw, 5.2rem); line-height: 1; letter-spacing: -0.01em; transition: transform .5s var(--ease), color .4s; } .menu__item:hover .menu__name { transform: translateX(18px); } .menu__meta { display: flex; align-items: center; gap: 1.5rem; } .menu__tags { font-family: var(--font-display); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,0.45); transition: color .4s; } .menu__arrow { width: 20px; height: 20px; opacity: .5; transition: transform .4s var(--ease), opacity .4s; } .menu__item:hover .menu__arrow { transform: translate(4px,-4px); opacity: 1; } .menu__item:hover .menu__num, .menu__item:hover .menu__tags { color: rgba(255,255,255,0.85); } .menu__item.active .menu__name { color: var(--accent); } .menu__item.active:hover .menu__name { color: #fff; } .menu__bottom { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem clamp(1.2rem,4vw,4rem); border-top: 1px solid rgba(255,255,255,0.08); } .menu__btn { display: inline-flex; flex-direction: column; } .menu__btn a { font-family: var(--font-display); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; padding: .6rem 1.2rem; border: 1px solid rgba(255,255,255,0.2); border-radius: 100px; transition: background .3s, color .3s; } .menu__btn a:hover { background: #fff; color: var(--dark); } .menu__btn small { color: rgba(255,255,255,0.4); font-size: .72rem; margin-top: .5rem; letter-spacing: .1em; padding-left: .4rem; } .menu__bottom .right { text-align: right; } .menu__bottom .right small { padding-left: 0; padding-right: .4rem; } /* ===== Shared section helpers ===== */ section { position: relative; z-index: 2; padding: clamp(3.5rem, 8vh, 6rem) clamp(1.2rem, 4vw, 4rem); } .page-hero + section { padding-top: clamp(1.5rem, 4vh, 3rem); } .section-index { display: inline-block; font-family: var(--font-display); font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.5rem; } .section-head { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); } .section-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.05; max-width: 16ch; } .btn-primary { display: inline-flex; align-items: center; gap: .6rem; background: var(--accent); color: #fff; padding: .95rem 2rem; border-radius: 100px; font-family: var(--font-display); font-size: .95rem; border: none; cursor: pointer; transition: transform .3s var(--ease), background .3s; } .btn-primary:hover { transform: translateY(-3px); background: var(--accent-2); } .btn-ghost { display: inline-flex; align-items: center; gap: .6rem; padding: .9rem 1.6rem; border: 1px solid var(--line); border-radius: 100px; font-size: .92rem; transition: gap .3s, background .3s; } .btn-ghost:hover { gap: 1rem; background: rgba(192,48,240,0.06); } /* ===== Page hero (inner pages) ===== */ .page-hero { padding-top: clamp(8rem, 18vh, 12rem); padding-bottom: clamp(3rem, 8vh, 6rem); } .page-hero__eyebrow { font-family: var(--font-display); font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); } .page-hero__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 9vw, 7rem); line-height: .98; letter-spacing: -0.02em; margin: 1.2rem 0; } .page-hero__title em { font-style: italic; } .page-hero__desc { color: var(--muted); max-width: 52ch; font-size: 1.1rem; } .crumbs { display: flex; gap: .6rem; font-family: var(--font-display); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .crumbs span { color: var(--accent); } /* ===== Home hero ===== */ .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 0; overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(40vw 40vw at 80% 20%, rgba(192,48,240,0.26), transparent 60%), radial-gradient(30vw 30vw at 55% 60%, rgba(155,31,201,0.16), transparent 60%); filter: blur(8px); animation: float 12s ease-in-out infinite alternate; } @keyframes float { to { transform: translate(-4%,3%) scale(1.08); } } .hero__content { padding: 0 clamp(1.2rem,4vw,4rem); margin-bottom: 3rem; } .hero__tag { display: inline-flex; align-items: center; gap: .6rem; font-size: .82rem; color: var(--muted); border: 1px solid var(--line); padding: .5rem 1rem; border-radius: 100px; margin-bottom: 2rem; background: rgba(255,255,255,0.5); } .hero__tag .dot { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 10px #16a34a; } .hero__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 8.5vw, 7.5rem); line-height: .98; letter-spacing: -0.02em; } .hero__title .line { display: block; overflow: hidden; } .hero__title .line > span { display: block; } .hero__bottom { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-top: 2.5rem; } .hero__desc { max-width: 44ch; color: var(--muted); font-size: 1.05rem; } .hero__marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.2rem 0; overflow: hidden; white-space: nowrap; } .marquee__track { display: inline-flex; align-items: center; gap: 2.5rem; animation: marquee 24s linear infinite; font-family: var(--font-display); font-size: clamp(1.2rem,3vw,2rem); } .marquee__track i { color: var(--accent); font-style: normal; } .marquee__track span { color: var(--muted); } @keyframes marquee { to { transform: translateX(-50%); } } /* ===== Intro ===== */ .intro__text { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem,4.5vw,3.4rem); line-height: 1.2; max-width: 18ch; } .intro__meta { display: flex; flex-wrap: wrap; gap: 3rem; margin-top: 4rem; } .intro__meta div { display: flex; flex-direction: column; gap: .3rem; } .intro__meta strong { font-family: var(--font-display); font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); } .intro__meta span { color: var(--muted); } /* ===== Services list ===== */ .services__list { display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .service { background: var(--bg); padding: 2.5rem clamp(.5rem,2vw,2rem); display: grid; grid-template-columns: 70px 1.3fr 1.6fr auto; gap: 1.5rem; align-items: start; transition: background .4s var(--ease); } .service:hover { background: var(--bg-2); } .service__num { font-family: var(--font-display); color: var(--accent); font-size: .9rem; } .service h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem,3vw,2.1rem); } .service p { color: var(--muted); max-width: 42ch; } .service__tags { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; } .service__tags span { font-size: .75rem; padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 100px; color: var(--muted); } /* ===== Work / projects ===== */ .work__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(1rem,2vw,2rem); } .project { display: block; } .project__img { aspect-ratio: 16/11; border-radius: var(--radius); background: linear-gradient(135deg, var(--c1), var(--c2)); position: relative; overflow: hidden; transition: transform .6s var(--ease); } .project__img::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 60% at 30% 20%, rgba(255,255,255,0.25), transparent); opacity: 0; transition: opacity .5s; } .project:hover .project__img { transform: scale(1.02); } .project:hover .project__img::after { opacity: 1; } .project__info { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1rem; padding: 0 .2rem; } .project__info h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; } .project__info span { color: var(--muted); font-size: .85rem; } /* ===== Stats (vertical list with detail text) ===== */ .stats { display: flex; flex-direction: column; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .stat { display: flex; align-items: flex-start; gap: clamp(1.5rem,5vw,5rem); padding: clamp(2rem,4vw,3.2rem) clamp(.4rem,2vw,1rem); border-bottom: 1px solid var(--line); transition: background .4s var(--ease); } .stat:last-child { border-bottom: none; } .stat:hover { background: var(--bg-2); } .stat:hover .stat__num, .stat:hover .stat__plus { transform: translateX(8px); } .stat__figure { flex: 0 0 auto; display: flex; align-items: baseline; gap: .05rem; min-width: clamp(110px, 16vw, 200px); } .stat__num, .stat__plus { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.8rem, 7vw, 5rem); line-height: .85; letter-spacing: -0.04em; background: linear-gradient(155deg, var(--accent) 10%, var(--accent-2) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; transition: transform .4s var(--ease); } .stat__plus { font-size: clamp(1.2rem, 3vw, 2rem); vertical-align: top; } .stat__body { flex: 1; max-width: 62ch; } .stat__body h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 2.5vw, 1.7rem); margin-bottom: .55rem; } .stat__body p { color: var(--muted); font-size: 1rem; line-height: 1.55; } /* ===== Testimonials ===== */ .testimonials { overflow: hidden; } .testimonials__track { display: flex; gap: 1.5rem; overflow-x: auto; scrollbar-width: none; } .testimonials__track::-webkit-scrollbar { display: none; } .testi { min-width: min(440px,80vw); flex: 1; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.5rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; } .testi p { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.5; } .testi footer strong { font-family: var(--font-display); display: block; } .testi footer span { color: var(--muted); font-size: .85rem; } /* ===== Team ===== */ .team__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2vw,2rem); } .member__photo { aspect-ratio: 3/4; border-radius: var(--radius); background: linear-gradient(150deg, var(--c1), var(--c2)); margin-bottom: 1rem; transition: transform .6s var(--ease); } .member:hover .member__photo { transform: translateY(-6px); } .member h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; } .member span { color: var(--muted); font-size: .9rem; } /* ===== Values / cards grid ===== */ .cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; } .card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.2rem; transition: transform .5s var(--ease), border-color .4s; } .card:hover { transform: translateY(-6px); border-color: rgba(192,48,240,0.4); } .card__icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 700; margin-bottom: 1.4rem; } .card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin-bottom: .6rem; } .card p { color: var(--muted); } /* ===== Process steps ===== */ .steps { display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .step { background: var(--bg); padding: 2.2rem clamp(.5rem,2vw,2rem); display: grid; grid-template-columns: 90px 1fr 1.4fr; gap: 1.5rem; align-items: baseline; transition: background .4s; } .step:hover { background: var(--bg-2); } .step__num { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--accent); } .step h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; } .step p { color: var(--muted); max-width: 48ch; } /* ===== Pricing ===== */ .pricing__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; } .plan { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.5rem; position: relative; transition: transform .5s var(--ease), border-color .4s; } .plan:hover { transform: translateY(-6px); border-color: rgba(192,48,240,0.4); } .plan--featured { background: linear-gradient(180deg, rgba(192,48,240,0.10), var(--bg-2)); border-color: rgba(192,48,240,0.4); } .plan__badge { position: absolute; top: 1.5rem; right: 1.5rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; background: var(--accent); color: #fff; padding: .3rem .8rem; border-radius: 100px; } .plan__head h3 { font-family: var(--font-display); font-weight: 500; color: var(--muted); font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; } .plan__price { font-family: var(--font-display); font-weight: 700; font-size: 2.8rem; margin-top: .5rem; } .plan__price span { font-size: 1rem; font-weight: 400; color: var(--muted); } .plan__desc { color: var(--muted); margin: 1rem 0 1.5rem; } .plan ul { list-style: none; display: flex; flex-direction: column; gap: .8rem; margin-bottom: 2rem; } .plan li { position: relative; padding-left: 1.6rem; font-size: .95rem; } .plan li::before { content: '✦'; position: absolute; left: 0; color: var(--accent); } .plan__btn { display: block; text-align: center; padding: .9rem; border: 1px solid var(--line); border-radius: 100px; transition: background .3s, color .3s; } .plan__btn:hover { background: rgba(192,48,240,0.08); } .plan__btn--solid { background: var(--accent); border-color: var(--accent); color: #fff; } .plan__btn--solid:hover { background: var(--accent-2); border-color: var(--accent-2); } /* ===== Split (two-column text + media) ===== */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: center; } .split--rev .split__media { order: 2; } .split__media { aspect-ratio: 4/3; border-radius: var(--radius); background: linear-gradient(135deg, var(--c1, var(--accent)), var(--c2, #2563eb)); position: relative; overflow: hidden; } .split__media::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 60% at 30% 20%, rgba(255,255,255,0.22), transparent); } .split__media span { position: absolute; left: 1.4rem; bottom: 1.2rem; z-index: 1; font-family: var(--font-display); font-weight: 600; color: #fff; font-size: 1.1rem; } .split__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .split h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem,4vw,3rem); line-height: 1.08; margin-bottom: 1.2rem; } .split p { color: var(--muted); font-size: 1.05rem; margin-bottom: 1rem; } .split p:last-child { margin-bottom: 0; } .lead { font-size: clamp(1.05rem,2vw,1.35rem); color: var(--muted); max-width: 64ch; line-height: 1.55; } /* ===== Pills ===== */ .pills { display: flex; flex-wrap: wrap; gap: .7rem; } .pills span { font-family: var(--font-display); font-size: .9rem; padding: .6rem 1.2rem; border: 1px solid var(--line); border-radius: 100px; background: var(--bg-2); transition: background .3s, color .3s, border-color .3s; } .pills span:hover { background: var(--accent); color: #fff; border-color: var(--accent); } /* ===== Logos / trust strip ===== */ .trust-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; white-space: nowrap; padding: 1.4rem 0; } .trust-strip .marquee__track { font-size: clamp(1rem,2.4vw,1.5rem); gap: 2rem; } .trust-strip .marquee__track span { font-weight: 600; } /* ===== Service detail blocks ===== */ .svc { padding: clamp(2.5rem,6vw,4.5rem) 0; border-bottom: 1px solid var(--line); } .svc:first-child { border-top: 1px solid var(--line); } .svc__head { max-width: 62ch; margin-bottom: 2.4rem; } .svc__num { font-family: var(--font-display); color: var(--accent); font-size: .95rem; } .svc__head h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem,4vw,3rem); margin: .5rem 0 .8rem; } .svc__head p { color: var(--muted); font-size: 1.05rem; } .svc__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 2rem; } .svc__col h4 { font-family: var(--font-display); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin-bottom: 1rem; } .svc__col ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; } .svc__col li { position: relative; padding-left: 1.4rem; font-size: .95rem; } .svc__col li::before { content: '✦'; position: absolute; left: 0; color: var(--accent); } .svc__tags { margin-top: 2.2rem; font-family: var(--font-display); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } /* ===== Comparison table ===== */ .compare-wrap { overflow-x: auto; margin-top: 2.5rem; } .compare { width: 100%; border-collapse: collapse; min-width: 560px; } .compare th, .compare td { padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--line); text-align: left; } .compare thead th { font-family: var(--font-display); color: var(--accent); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; } .compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; } .compare tbody th { font-family: var(--font-display); font-weight: 600; } .compare tbody tr:hover { background: var(--bg-2); } .compare .featured-col { background: rgba(192,48,240,0.06); } /* ===== Included list ===== */ .included { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 1rem 2rem; margin-top: 2.5rem; } .included li { position: relative; padding-left: 1.6rem; font-size: 1rem; } .included li::before { content: '✦'; position: absolute; left: 0; color: var(--accent); } /* ===== Portfolio detailed ===== */ .filter { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 3rem; } .filter button { font-family: var(--font-display); font-size: .82rem; letter-spacing: .06em; padding: .55rem 1.2rem; border: 1px solid var(--line); border-radius: 100px; background: transparent; color: var(--muted); cursor: pointer; transition: .3s; } .filter button.active, .filter button:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); } .case { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem,4vw,4rem); align-items: center; padding: clamp(2rem,5vw,4rem) 0; border-bottom: 1px solid var(--line); } .case:nth-child(even) .case__media { order: 2; } .case__media { aspect-ratio: 4/3; border-radius: var(--radius); background: linear-gradient(135deg, var(--c1), var(--c2)); } .case__tag { font-family: var(--font-display); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .case h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem,4vw,3rem); margin: .8rem 0; } .case p { color: var(--muted); max-width: 46ch; } .case__metrics { display: flex; gap: 2.5rem; margin-top: 1.8rem; } .case__metrics div strong { font-family: var(--font-display); font-size: 1.8rem; display: block; color: var(--accent); } .case__metrics div span { color: var(--muted); font-size: .82rem; } /* ===== Blog ===== */ .post-featured { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(1.5rem,4vw,3rem); align-items: center; margin-bottom: 4rem; } .post-featured__media { aspect-ratio: 16/10; border-radius: var(--radius); background: linear-gradient(135deg,#c030f0,#2563eb); } .post-cat { font-family: var(--font-display); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .post-featured h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem,4vw,3rem); margin: .8rem 0; line-height: 1.1; } .post-featured p { color: var(--muted); } .post-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2vw,2rem); } .post { display: flex; flex-direction: column; } .post__media { aspect-ratio: 16/11; border-radius: var(--radius); background: linear-gradient(135deg,var(--c1),var(--c2)); margin-bottom: 1.2rem; transition: transform .6s var(--ease); } .post:hover .post__media { transform: scale(1.02); } .post__date { color: var(--muted); font-size: .82rem; margin-top: .6rem; } .post h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin: .5rem 0; line-height: 1.25; } .post p { color: var(--muted); font-size: .92rem; } .newsletter { background: var(--dark); color: #fff; border-radius: var(--radius); padding: clamp(2.5rem,6vw,4.5rem); text-align: center; margin-top: 4rem; } .newsletter h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem,4vw,2.8rem); } .newsletter p { color: rgba(255,255,255,0.6); max-width: 46ch; margin: 1rem auto 2rem; } .newsletter form { display: flex; gap: .8rem; max-width: 480px; margin: 0 auto; } .newsletter input { flex: 1; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #fff; padding: .9rem 1.2rem; border-radius: 100px; } .newsletter input::placeholder { color: rgba(255,255,255,0.4); } /* ===== Contact (trendy) ===== */ .contact__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(1.6rem,4vw,3rem); align-items: start; } .contact__form { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.2rem 1.4rem; padding: clamp(1.4rem, 3vw, 2.6rem); background: linear-gradient(160deg, rgba(255,255,255,.65), rgba(255,255,255,.28)); border: 1px solid rgba(255,255,255,.6); border-radius: 26px; box-shadow: 0 30px 60px -28px rgba(20,16,31,.30), inset 0 1px 0 rgba(255,255,255,.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: relative; overflow: hidden; } .contact__form::before { content: ''; position: absolute; top: -45%; right: -20%; width: 65%; height: 130%; background: radial-gradient(circle, rgba(192,48,240,.22), transparent 60%); pointer-events: none; z-index: 0; } .field { position: relative; z-index: 1; } .field--full { grid-column: 1/-1; } .field input, .field textarea { width: 100%; background: rgba(255,255,255,.55); border: 1px solid var(--line); border-radius: 14px; padding: 1.5rem 1rem .6rem; color: var(--fg); font-family: var(--font-body); font-size: 1rem; resize: none; transition: border-color .3s, box-shadow .3s, background .3s; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px rgba(192,48,240,.13); } .field label { position: absolute; left: 1rem; top: 1.05rem; font-size: 1rem; color: var(--muted); pointer-events: none; transition: .25s var(--ease); } .field input:focus + label, .field input:valid + label, .field textarea:focus + label, .field textarea:valid + label { top: .5rem; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; font-family: var(--font-display); color: var(--accent); } .contact__submit { grid-column: 1/-1; justify-self: stretch; justify-content: center; margin-top: .5rem; padding: 1.1rem 2rem; background: linear-gradient(120deg, var(--accent) 0%, #6d5cf0 55%, #2563eb 100%); background-size: 200% 100%; background-position: 0 0; box-shadow: 0 18px 35px -14px rgba(192,48,240,.6); transition: transform .3s var(--ease), background-position .5s var(--ease), box-shadow .3s; } .contact__submit:hover { transform: translateY(-3px); background-position: 100% 0; box-shadow: 0 24px 45px -14px rgba(37,99,235,.55); } .contact__info { display: flex; flex-direction: column; padding: clamp(1.4rem,3vw,2.2rem); background: rgba(255,255,255,.42); border: 1px solid rgba(255,255,255,.55); border-radius: 22px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 22px 50px -28px rgba(20,16,31,.25); } .contact__info-block { padding: 1.05rem 0; border-bottom: 1px solid var(--line); } .contact__info-block:first-child { padding-top: 0; } .contact__info-block:last-child { padding-bottom: 0; border-bottom: none; } .contact__info-block strong { font-family: var(--font-display); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); display: block; margin-bottom: .45rem; } .contact__info-block a, .contact__info-block p { color: var(--muted); transition: color .3s; } .contact__info-block a:hover { color: var(--accent); } /* ===== Map ===== */ .map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); line-height: 0; } .map iframe { width: 100%; height: clamp(300px, 45vh, 460px); border: 0; display: block; } /* ===== FAQ ===== */ .faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .faq__item { border-bottom: 1px solid var(--line); } .faq__q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 1.6rem 0; display: flex; justify-content: space-between; gap: 1rem; align-items: center; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--fg); } .faq__q span { color: var(--accent); transition: transform .3s; } .faq__item.open .faq__q span { transform: rotate(45deg); } .faq__a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); color: var(--muted); } .faq__a p { padding-bottom: 1.6rem; max-width: 60ch; } /* ===== Reels carousel (auto-scrolling Instagram videos) ===== */ .reel-carousel { position: relative; width: 100%; max-width: 1100px; margin: clamp(2rem,5vw,3rem) auto; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .reel-track { display: flex; gap: 1rem; width: max-content; animation: reelScroll 45s linear infinite; } .reel-carousel:hover .reel-track { animation-play-state: paused; } .reel { position: relative; flex: 0 0 auto; width: clamp(150px, 22vw, 195px); aspect-ratio: 9 / 16; border: none; padding: 0; border-radius: 16px; overflow: hidden; cursor: pointer; background: #0c0a12; box-shadow: 0 12px 30px rgba(12,5,46,.20); transition: transform .35s var(--ease); } .reel:hover { transform: translateY(-6px) scale(1.02); } .reel video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .reel__play { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .3s; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35)); } .reel__play span { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--accent); display: grid; place-items: center; font-size: 1.1rem; padding-left: 3px; } .reel:hover .reel__play { opacity: 1; } @keyframes reelScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Reel lightbox */ .reel-modal { position: fixed; inset: 0; z-index: 9500; background: rgba(8,5,18,.86); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; padding: 1.5rem; } .reel-modal.open { display: flex; } .reel-modal video { max-width: min(420px, 92vw); max-height: 88vh; width: auto; border-radius: 16px; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.5); } .reel-modal__close { position: absolute; top: 1.2rem; right: 1.4rem; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; font-size: 1.1rem; cursor: pointer; transition: background .3s; } .reel-modal__close:hover { background: var(--accent); border-color: var(--accent); } /* ===== CTA band ===== */ .cta-band { text-align: center; } .cta-band h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem,6vw,4.5rem); line-height: 1.05; max-width: 18ch; margin: 0 auto 2rem; } .cta-band h2 em { font-style: italic; } /* ===== Footer ===== */ .footer { position: relative; z-index: 2; padding: clamp(3rem,8vw,6rem) clamp(1.2rem,4vw,4rem) 2rem; border-top: 1px solid var(--line); } .footer__big { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.5rem,18vw,16rem); line-height: .85; letter-spacing: -0.02em; background: linear-gradient(180deg, rgba(20,16,31,0.14), transparent); -webkit-background-clip: text; background-clip: text; color: transparent; } .footer__row { display: flex; flex-wrap: wrap; gap: 3rem; margin: 3rem 0; } .footer__col { display: flex; flex-direction: column; gap: .7rem; } .footer__col strong { font-family: var(--font-display); margin-bottom: .4rem; } .footer__col a { color: var(--muted); font-size: .9rem; transition: color .3s; } .footer__col a:hover { color: var(--fg); } .footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; } /* ===== Half-round orbiting carousel (scoped under .half-orbit) ===== */ .intro-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem,4vw,3.5rem); align-items: center; } /* In the two-column layout the heading should fill its column, not wrap into tiny lines */ .intro-grid .intro__text { max-width: 24ch; font-size: clamp(1.35rem, 2.6vw, 2.2rem); line-height: 1.3; } .intro-grid .intro__meta { margin-top: 2rem; gap: 2rem 2.5rem; } .half-orbit { --rotate-speed: 60; --count: 10; --orbit-ease: cubic-bezier(0.000, 0.37, 1.000, 0.63); position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 1%, #000 22%, #000 100%); mask-image: linear-gradient(90deg, transparent 1%, #000 22%, #000 100%); } .half-orbit__glow { position: absolute; top: 0; left: 0; bottom: 0; width: 55%; z-index: 0; background: radial-gradient(60% 60% at left center, rgba(192,48,240,.16), transparent 70%); } .half-orbit__glow::after { content: ''; position: absolute; left: 0; top: 8%; bottom: 8%; width: 2px; background: linear-gradient(180deg, transparent, var(--accent), transparent); } .half-orbit__stage { position: absolute; top: 0; left: -100%; width: 200%; height: 100%; z-index: 1; } .half-orbit__stage ul { list-style: none; margin: 0; padding: 0; position: relative; width: 100%; height: 100%; } .half-orbit__stage ul:hover * { animation-play-state: paused; } .half-orbit li { position: absolute; top: 50%; width: 100%; transform: translateY(-50%); animation: orbitCW calc(var(--rotate-speed) * 1s) var(--orbit-ease) infinite; will-change: transform; } /* Icon-only cards: transparent, bigger, with a pop glow (geometry width kept) */ .half-orbit .hcard { width: 23%; display: flex; align-items: center; justify-content: center; padding: 0; background: transparent; box-shadow: none; border-radius: 0; animation: orbitCCW calc(var(--rotate-speed) * 1s) var(--orbit-ease) infinite; will-change: transform; } .half-orbit .hcard img { width: clamp(64px, 10vw, 108px); height: auto; object-fit: contain; margin: 0; filter: drop-shadow(0 12px 22px rgba(12,5,46,.28)) drop-shadow(0 4px 10px rgba(192,48,240,.30)); animation: iconPop 3.2s ease-in-out infinite; } .half-orbit .hcard__t, .half-orbit .hcard__d { display: none; } @keyframes iconPop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } } .half-orbit__center { position: absolute; left: 0; top: 50%; transform: translate(-50%,-50%); z-index: 2; width: 30%; aspect-ratio: 1 / 1; background: #fff; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 18px 36px -18px rgba(12,5,46,.3), 0 30px 60px -12px rgba(12,5,46,.25); } .half-orbit__center img { width: 58%; height: auto; } @keyframes orbitCW { from { transform: translate3d(0,-50%,-1px) rotate(-45deg); } to { transform: translate3d(0,-50%,0) rotate(-405deg); } } @keyframes orbitCCW { from { transform: rotate(45deg); } to { transform: rotate(405deg); } } .half-orbit li:nth-child(2), .half-orbit li:nth-child(2) .hcard { animation-delay: calc(var(--rotate-speed)/var(--count) * -1s); } .half-orbit li:nth-child(3), .half-orbit li:nth-child(3) .hcard { animation-delay: calc(var(--rotate-speed)/var(--count) * -2s); } .half-orbit li:nth-child(4), .half-orbit li:nth-child(4) .hcard { animation-delay: calc(var(--rotate-speed)/var(--count) * -3s); } .half-orbit li:nth-child(5), .half-orbit li:nth-child(5) .hcard { animation-delay: calc(var(--rotate-speed)/var(--count) * -4s); } .half-orbit li:nth-child(6), .half-orbit li:nth-child(6) .hcard { animation-delay: calc(var(--rotate-speed)/var(--count) * -5s); } .half-orbit li:nth-child(7), .half-orbit li:nth-child(7) .hcard { animation-delay: calc(var(--rotate-speed)/var(--count) * -6s); } .half-orbit li:nth-child(8), .half-orbit li:nth-child(8) .hcard { animation-delay: calc(var(--rotate-speed)/var(--count) * -7s); } .half-orbit li:nth-child(9), .half-orbit li:nth-child(9) .hcard { animation-delay: calc(var(--rotate-speed)/var(--count) * -8s); } .half-orbit li:nth-child(10), .half-orbit li:nth-child(10) .hcard { animation-delay: calc(var(--rotate-speed)/var(--count) * -9s); } /* ===== Reveal animations ===== CSS-driven and gated behind html.reveal-ready, so if JS ever fails the content stays VISIBLE (never blank). JS only adds .in to play them. */ .reveal, [data-stagger] > * { transition: opacity .85s var(--ease), transform .85s var(--ease); } html.reveal-ready .reveal { opacity: 0; transform: translateY(42px); } html.reveal-ready .reveal.in { opacity: 1; transform: none; } html.reveal-ready .reveal-words .word { opacity: 0; transform: translateY(0.9em); transition: opacity .6s var(--ease), transform .6s var(--ease); } html.reveal-ready .reveal-words.in .word { opacity: 1; transform: none; } html.reveal-ready [data-stagger] > * { opacity: 0; transform: translateY(42px); } html.reveal-ready [data-stagger].in > * { opacity: 1; transform: none; } html.reveal-ready [data-stagger].in > *:nth-child(1){transition-delay:.04s} html.reveal-ready [data-stagger].in > *:nth-child(2){transition-delay:.10s} html.reveal-ready [data-stagger].in > *:nth-child(3){transition-delay:.16s} html.reveal-ready [data-stagger].in > *:nth-child(4){transition-delay:.22s} html.reveal-ready [data-stagger].in > *:nth-child(5){transition-delay:.28s} html.reveal-ready [data-stagger].in > *:nth-child(6){transition-delay:.34s} html.reveal-ready [data-stagger].in > *:nth-child(7){transition-delay:.40s} html.reveal-ready [data-stagger].in > *:nth-child(8){transition-delay:.46s} /* Hero intro */ html.reveal-ready .hero__title .line > span { transform: translateY(110%); transition: transform 1s var(--ease); } html.reveal-ready .hero.in .hero__title .line > span { transform: none; } html.reveal-ready .hero.in .hero__title .line:nth-child(1) > span { transition-delay: .05s; } html.reveal-ready .hero.in .hero__title .line:nth-child(2) > span { transition-delay: .15s; } html.reveal-ready .hero.in .hero__title .line:nth-child(3) > span { transition-delay: .25s; } html.reveal-ready .hero__tag, html.reveal-ready .hero__bottom > * { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); } html.reveal-ready .hero.in .hero__tag { opacity: 1; transform: none; transition-delay: .35s; } html.reveal-ready .hero.in .hero__bottom > * { opacity: 1; transform: none; } html.reveal-ready .hero.in .hero__bottom > *:nth-child(1){transition-delay:.45s} html.reveal-ready .hero.in .hero__bottom > *:nth-child(2){transition-delay:.55s} /* ===== Responsive ===== */ @media (max-width: 980px) { .service { grid-template-columns: 40px 1fr; gap: .6rem 1rem; } .service p, .service__tags { grid-column: 2; justify-content: flex-start; } .step { grid-template-columns: 60px 1fr; } .step p { grid-column: 2; } .work__grid, .pricing__grid, .cards, .post-grid, .post-featured, .case, .contact__grid, .contact__form, .team__grid, .intro__meta, .split { grid-template-columns: 1fr; } .case:nth-child(even) .case__media, .split--rev .split__media { order: 0; } .intro-grid { grid-template-columns: 1fr; } .half-orbit { display: none; } .topbar__loc, .menu__loc { display: none; } } @media (max-width: 560px) { .stat { flex-direction: column; gap: .6rem; } .menu__meta { display: none; } .menu__bottom { flex-direction: column; gap: 1rem; align-items: stretch; } .menu__bottom .right { text-align: left; } .newsletter form { flex-direction: column; } .hero__bottom { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } html.reveal-ready .reveal, html.reveal-ready [data-stagger] > *, html.reveal-ready .reveal-words .word, html.reveal-ready .hero__title .line > span, html.reveal-ready .hero__tag, html.reveal-ready .hero__bottom > * { opacity: 1 !important; transform: none !important; } }