@mundogamernetwork/shared-ui 1.1.36 → 1.1.38

package/pages/magazine/[slug]/preview.vue

@@ -0,0 +1,920 @@
+<script setup lang="ts">
+import { useRoute, useRouter } from "vue-router";
+import type { PageData } from "@mundogamernetwork/mgn-flipbook";
+import type { MagazinePage } from "../../../types/magazine";
+import { getMagazinePageHotspots } from "../../../utils/magazineHotspots";
+
+useSeoMeta({
+	title: "MGN Magazine",
+	description:
+		"Discover, be inspired and connect in the magazine that breathes digital gaming. Welcome to your new source of gamer passion!",
+	ogTitle: "MGN Magazine",
+	ogDescription:
+		"Discover, be inspired and connect in the magazine that breathes digital gaming. Welcome to your new source of gamer passion!",
+	ogImage: "/imgs/seo-magazine-image.jpg",
+	ogUrl: "/magazine",
+	twitterTitle: "MGN Magazine",
+	twitterDescription:
+		"Discover, be inspired and connect in the magazine that breathes digital gaming. Welcome to your new source of gamer passion!",
+	twitterImage: "/imgs/seo-magazine-image.jpg",
+	twitterCard: "summary",
+});
+
+interface MagazineItem {
+	id: string;
+	edition_number: number;
+	language: {
+		id: string;
+	};
+}
+
+interface LanguageItem {
+	id: string;
+	localized_name: string;
+	magazine_slug: string;
+}
+
+interface ReadingProgress {
+	lastPage: number;
+	maxPageReached: number;
+	updatedAt: string;
+}
+
+const route = useRoute();
+const router = useRouter();
+const locale = useNuxtApp().$i18n.locale;
+const slug = computed(() => route.params.slug as string);
+
+const magazineStore = useMagazineStore();
+const { magazine, magazines, magazinePages } = magazineStore;
+const institutionalStore = useInstitutionalStore();
+const { language } = institutionalStore;
+
+const languages: Ref<LanguageItem[]> = ref([]);
+const languageId = ref("");
+const authStore = useAuthStore();
+const { user, signedIn } = storeToRefs(authStore);
+
+const {
+	public: { apiBaseURL },
+} = useRuntimeConfig();
+
+const status = ref("init");
+const startPage = ref(0);
+
+const readingProgressStorageKey = computed(
+	() => `mgn-magazine-progress:${slug.value}`,
+);
+
+function getStoredReadingProgress(): ReadingProgress | null {
+	if (typeof window === "undefined") return null;
+
+	try {
+		const raw = window.localStorage.getItem(readingProgressStorageKey.value);
+		if (!raw) return null;
+		const parsed = JSON.parse(raw) as Partial<ReadingProgress>;
+		if (
+			typeof parsed.lastPage !== "number" ||
+			typeof parsed.maxPageReached !== "number"
+		) {
+			return null;
+		}
+
+		return {
+			lastPage: parsed.lastPage,
+			maxPageReached: parsed.maxPageReached,
+			updatedAt:
+				typeof parsed.updatedAt === "string"
+					? parsed.updatedAt
+					: new Date().toISOString(),
+		};
+	} catch (error) {
+		console.error("Error restoring reading progress:", error);
+		return null;
+	}
+}
+
+function saveReadingProgress(page: number) {
+	if (typeof window === "undefined") return;
+	if (!Number.isFinite(page) || page < 0) return;
+
+	const current = getStoredReadingProgress();
+	const nextProgress: ReadingProgress = {
+		lastPage: page,
+		maxPageReached: Math.max(current?.maxPageReached ?? 0, page),
+		updatedAt: new Date().toISOString(),
+	};
+
+	window.localStorage.setItem(
+		readingProgressStorageKey.value,
+		JSON.stringify(nextProgress),
+	);
+}
+
+function restoreReadingProgress() {
+	const progress = getStoredReadingProgress();
+	if (!progress) {
+		startPage.value = 0;
+		return;
+	}
+
+	const totalPages = magazinePages.data?.length ?? 0;
+	if (!totalPages) {
+		startPage.value = 0;
+		return;
+	}
+
+	startPage.value = Math.min(
+		Math.max(progress.lastPage, 0),
+		Math.max(totalPages - 1, 0),
+	);
+}
+
+// Lead capture modal
+const showLeadModal = ref(false);
+const leadForm = reactive({ name: "", email: "" });
+const leadSubmitting = ref(false);
+const leadCaptured = ref(false);
+
+// Download gating
+const downloadPending = ref(false);
+const showDownloadGateMessage = ref("");
+
+// Flipbook pages mapped for MgnFlipbook
+const flipbookPages = computed<PageData[]>(() => {
+	if (!magazinePages.data || magazinePages.data.length === 0) return [];
+	return magazinePages.data.map((page: MagazinePage) => ({
+		index: page.page_number - 1,
+		thumbnailUrl: page.thumbnail_url,
+		imageUrl: page.image_url,
+		hiresUrl: page.hires_url,
+		hotspots: getMagazinePageHotspots({
+			page,
+			flipbookCode: magazine.data?.flipbook_code,
+		}),
+	}));
+});
+
+// Determine if lead capture modal should show
+const requiresLeadCapture = computed(() => {
+	if (leadCaptured.value) return false;
+	if (!magazinePages.meta) return false;
+	return magazinePages.meta.requires_lead || magazinePages.meta.capture_leads;
+});
+
+async function getMagazineData() {
+	try {
+		await magazineStore.getMagazine(slug.value);
+		status.value = magazine.status;
+	} catch (error) {
+		console.error("Error fetching magazine:", error);
+	}
+}
+
+async function loadFlipbookPages() {
+	try {
+		await magazineStore.fetchMagazinePages(slug.value);
+		restoreReadingProgress();
+
+		// Track view analytic
+		magazineStore.trackAnalytic(slug.value, "view");
+
+		// Show lead capture if needed
+		if (requiresLeadCapture.value) {
+			showLeadModal.value = true;
+		}
+	} catch (error) {
+		console.error("Error fetching magazine pages:", error);
+	}
+}
+
+function downloadPdf() {
+	if (magazine.data.pdf_url_src) {
+		window.open(magazine.data.pdf_url_src, "_blank");
+		magazineStore.trackAnalytic(slug.value, "download");
+	}
+}
+
+/**
+ * Download gating logic:
+ * 1. Premium magazine → must be subscriber
+ * 2. Non-public magazine → must be logged in (user_id)
+ * 3. Public magazine → unlock with name + email (lead capture / newsletter)
+ * 4. Logged in user → download directly (no lead capture needed)
+ */
+function handleFlipbookDownload() {
+	// Gate 1: Premium magazine - need active subscription
+	if (magazine.data.premium === true) {
+		showDownloadGateMessage.value = "premium";
+		return;
+	}
+
+	// Gate 2: Non-public magazine - must be registered/signed in
+	if (magazine.data.public === false && signedIn.value === false) {
+		showDownloadGateMessage.value = "signin";
+		return;
+	}
+
+	// Gate 3: Signed-in users can always download (no lead capture needed)
+	if (signedIn.value === true) {
+		downloadPdf();
+		return;
+	}
+
+	// Gate 4: Public magazine + not signed in → need lead capture (name + email)
+	if (!leadCaptured.value) {
+		downloadPending.value = true;
+		showLeadModal.value = true;
+		return;
+	}
+
+	// All gates passed - download
+	downloadPdf();
+}
+
+async function submitLead() {
+	if (!leadForm.name || !leadForm.email) return;
+	leadSubmitting.value = true;
+	const success = await magazineStore.captureLead(
+		slug.value,
+		leadForm.name,
+		leadForm.email,
+	);
+	leadSubmitting.value = false;
+	if (success) {
+		leadCaptured.value = true;
+		showLeadModal.value = false;
+
+		// Auto-trigger download if lead was captured for download purpose
+		if (downloadPending.value) {
+			downloadPending.value = false;
+			downloadPdf();
+		}
+	}
+}
+
+function closeLeadModal() {
+	showLeadModal.value = false;
+	downloadPending.value = false;
+}
+
+function onPageChange(page: number) {
+	saveReadingProgress(page);
+}
+
+function onHotspotClick(
+	hotspotId: string,
+	page: number,
+	data?: unknown,
+) {
+	saveReadingProgress(page);
+	const analyticsEvent =
+		typeof data === "object" &&
+		data !== null &&
+		"analyticsEvent" in data &&
+		typeof data.analyticsEvent === "string"
+			? data.analyticsEvent
+			: "ad_click";
+
+	magazineStore.trackAnalytic(slug.value, analyticsEvent);
+
+	if (typeof window === "undefined") return;
+
+	try {
+		window.dispatchEvent(
+			new CustomEvent("mgn-magazine-hotspot-click", {
+				detail: {
+					slug,
+					hotspotId,
+					page,
+					data,
+				},
+			}),
+		);
+	} catch (error) {
+		console.error("Error dispatching hotspot click event:", error);
+	}
+}
+
+async function fetchMagazine() {
+	try {
+		await magazineStore.fetchMagazine({
+			filter: {
+				status: 1,
+				edition_number: magazine.data.edition_number,
+				platform_id: import.meta.env.VITE_SYSTEM_ID,
+			},
+			sort: "id",
+			order: "desc",
+			per_page: "all",
+			page: 1,
+		});
+
+		filterLanguages();
+	} catch (error) {
+		console.error("Error fetching magazine:", error);
+	}
+}
+
+async function fetchLanguage() {
+	try {
+		await institutionalStore.fetchLanguage({});
+	} catch (error) {
+		console.error("Error fetching languages:", error);
+	}
+}
+
+function filterLanguages() {
+	if (magazine.data && magazines.data && magazines.data.length > 0) {
+		languageId.value = magazine.data.language.id;
+		const languageIds = magazines.data.map(
+			(item: MagazineItem) => item.language.id,
+		);
+		languages.value = language.data.filter((language: LanguageItem) =>
+			languageIds.includes(language.id),
+		);
+		languages.value.forEach((language: LanguageItem) => {
+			const magazineItem = magazines.data.find(
+				(item: MagazineItem) => item.language.id === language.id,
+			);
+			if (magazineItem) {
+				language.magazine_slug = magazineItem.slug;
+			}
+		});
+	}
+}
+
+const handleChangeLanguage = () => {
+	const selectedLanguage = languages.value.find(
+		(lang: LanguageItem) => lang.id === languageId.value,
+	);
+
+	if (selectedLanguage) {
+		const magazineSlug = selectedLanguage.magazine_slug;
+		router.push(`/${locale.value}/magazine/${magazineSlug}/preview`);
+	}
+};
+
+async function loadPreviewData() {
+	status.value = "init";
+	await fetchLanguage();
+	await getMagazineData();
+	await fetchMagazine();
+	await loadFlipbookPages();
+	if (import.meta.client) {
+		nextTick(() => {
+			const element = document.getElementById("header");
+			element?.scrollIntoView();
+		});
+	}
+}
+
+watch(slug, () => {
+	loadPreviewData();
+}, { immediate: true });
+
+const runtimeConfig = useRuntimeConfig();
+
+const accountsRegisterUrl = computed(() => {
+	const base_url = runtimeConfig.public.accountsBaseUrl;
+	if (typeof window !== 'undefined') {
+		const current = window.location.href;
+		return `${base_url}/register?redirect_to=${encodeURIComponent(current)}&system_id=${runtimeConfig.public.platformId}`;
+	}
+	return `${base_url}/register?system_id=${runtimeConfig.public.platformId}`;
+});
+</script>
+
+<template>
+	<div class="container magazine-inside">
+		<section v-if="!magazine.data || status !== 'success'">
+			<MagazinePreviewSkelectonLoading />
+		</section>
+		<section v-else>
+			<ClientOnly>
+				<MgnFlipbook
+					v-if="flipbookPages.length > 0 || magazine.data.pdf_url_src"
+					:pages="flipbookPages.length > 0 ? flipbookPages : undefined"
+					:pdf-url="magazine.data.pdf_url_src"
+					:start-page="startPage"
+					:enable-sound="true"
+					:enable-zoom="true"
+					:enable-fullscreen="true"
+					:enable-keyboard="true"
+					:enable-download="true"
+					theme="mgn"
+					@page-change="onPageChange"
+					@download="handleFlipbookDownload"
+					@hotspot-click="onHotspotClick"
+				/>
+				<template #fallback>
+					<MagazineFlipBookSkelectonLoading />
+				</template>
+			</ClientOnly>
+			<div
+				v-if="!flipbookPages.length && !magazine.data.pdf_url_src && (magazinePages.status === 'pending' || magazinePages.status === 'init')"
+			>
+				<MagazineFlipBookSkelectonLoading />
+			</div>
+			<div class="actions">
+				<select
+					v-model="languageId"
+					class="select"
+					@change="handleChangeLanguage"
+				>
+					<option :key="'none'" :value="'none'">
+						{{ $t("more.magazine.text_3") }}
+					</option>
+					<option v-for="lang in languages" :key="lang.id" :value="lang.id">
+						{{ lang.localized_name }}
+					</option>
+				</select>
+			</div>
+			<div class="description">
+				{{ magazine.data.short_description }}
+			</div>
+			<br />
+			<div class="description" v-html="magazine.data.description"></div>
+			<div class="condition">
+				<div
+					v-if="magazine.data.public === false && signedIn === false"
+					class="signin"
+				>
+					{{ $t("more.magazine.text_2") }}
+					<a class="btn primary" :href="accountsRegisterUrl">{{
+						$t("more.magazine.btn_4")
+					}}</a>
+				</div>
+				<div v-else-if="magazine.data.premium === true" class="signin">
+					{{ $t("more.magazine.text_4") }}
+					<button class="btn primary">
+						{{ $t("more.magazine.btn_5") }}
+					</button>
+				</div>
+				<div v-else class="download">
+					<button
+						class="btn primary"
+						:disabled="!magazine.data.pdf_url"
+						@click="downloadPdf"
+					>
+						{{ $t("more.magazine.btn_2") }}
+					</button>
+				</div>
+			</div>
+
+			<!-- Lead Capture Modal (for viewing or download) -->
+			<Teleport to="body">
+				<div v-if="showLeadModal" class="lead-modal-overlay" @click.self="closeLeadModal">
+					<div class="lead-modal">
+						<h3>{{
+							downloadPending
+								? $t("more.magazine.download_lead_title", "Download this magazine")
+								: $t("more.magazine.lead_title", "Access this magazine")
+						}}</h3>
+						<p>{{
+							downloadPending
+								? $t("more.magazine.download_lead_desc", "Enter your name and email to download.")
+								: $t("more.magazine.lead_desc", "Enter your details to continue reading.")
+						}}</p>
+						<form @submit.prevent="submitLead">
+							<input
+								v-model="leadForm.name"
+								type="text"
+								:placeholder="$t('name', 'Name')"
+								required
+								class="lead-input"
+							/>
+							<input
+								v-model="leadForm.email"
+								type="email"
+								:placeholder="$t('email', 'Email')"
+								required
+								class="lead-input"
+							/>
+							<button
+								type="submit"
+								class="btn primary lead-btn"
+								:disabled="leadSubmitting"
+							>
+								{{
+									leadSubmitting
+										? "..."
+										: downloadPending
+											? $t("more.magazine.download_lead_submit", "Download")
+											: $t("more.magazine.lead_submit", "Continue")
+								}}
+							</button>
+						</form>
+						<button class="lead-close" @click="closeLeadModal">&times;</button>
+					</div>
+				</div>
+			</Teleport>
+
+			<!-- Download Gate Messages -->
+			<Teleport to="body">
+				<div v-if="showDownloadGateMessage" class="lead-modal-overlay" @click.self="showDownloadGateMessage = ''">
+					<div class="lead-modal">
+						<!-- Premium gate -->
+						<template v-if="showDownloadGateMessage === 'premium'">
+							<h3>{{ $t("more.magazine.premium_download_title", "Premium Content") }}</h3>
+							<p>{{ $t("more.magazine.premium_download_desc", "Upgrade to premium to download this magazine.") }}</p>
+							<button class="btn primary lead-btn" @click="showDownloadGateMessage = ''">
+								{{ $t("more.magazine.btn_5", "Upgrade") }}
+							</button>
+						</template>
+
+						<!-- Signin gate -->
+						<template v-else-if="showDownloadGateMessage === 'signin'">
+							<h3>{{ $t("more.magazine.signin_download_title", "Sign in to download") }}</h3>
+							<p>{{ $t("more.magazine.signin_download_desc", "Create an account or sign in to download this magazine.") }}</p>
+							<a class="btn primary lead-btn" :href="accountsRegisterUrl" style="text-decoration: none; text-align: center;">
+								{{ $t("more.magazine.btn_4", "Sign up") }}
+							</a>
+						</template>
+
+						<button class="lead-close" @click="showDownloadGateMessage = ''">&times;</button>
+					</div>
+				</div>
+			</Teleport>
+
+			<NewsletterFullWidthComponent />
+			<MagazinesList />
+		</section>
+		<DiscordEmbedComponent class="mt-5" />
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.magazine-inside {
+	h1 {
+		font-family: Roboto;
+		font-size: 32px;
+		font-style: normal;
+		font-weight: 900;
+		line-height: 40px;
+		color: var(--text-magazine);
+	}
+
+	.sub-infos {
+		display: flex;
+		align-items: center;
+		gap: 24px;
+		align-self: stretch;
+		margin-top: 24px;
+
+		.edition {
+			color: var(--text-magazine);
+			font-family: Roboto;
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 20px;
+		}
+
+		.data {
+			font-family: Roboto;
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 20px;
+			color: var(--text-magazine);
+			text-transform: uppercase;
+		}
+	}
+
+	.image-content {
+		margin-top: 40px;
+		margin-bottom: 40px;
+		display: flex;
+		padding: 16px 0px;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		gap: 24px;
+		align-self: stretch;
+
+		.premium-card {
+			position: relative;
+
+			.premium {
+				display: flex;
+				width: 534px;
+				height: 692.757px;
+				padding: 16px;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				flex-shrink: 0;
+				background: rgba(19, 22, 28, 0.5);
+				backdrop-filter: blur(2px);
+				position: absolute;
+				color: var(--text-magazine);
+				text-align: center;
+				font-family: Roboto;
+				font-size: 18px;
+				font-style: normal;
+				font-weight: 600;
+				line-height: 26px;
+
+				img {
+					width: 100%;
+					height: auto;
+					position: relative;
+				}
+			}
+		}
+
+		img {
+			width: 534px;
+			height: 695px;
+			flex-shrink: 0;
+			box-shadow: -7px 1px 12.8px 0px rgba(0, 0, 0, 0.15);
+		}
+	}
+
+	.description {
+		font-family: Roboto;
+		font-size: 16px;
+		font-style: normal;
+		font-weight: 400;
+		color: var(--text-magazine);
+		line-height: 24px;
+		word-break: break-all;
+	}
+
+	.condition {
+		width: 100%;
+		text-align: -webkit-center;
+
+		.signin {
+			display: flex;
+			padding: 8px 16px;
+			flex-direction: column;
+			align-items: center;
+			gap: 16px;
+			align-self: stretch;
+			max-width: 618px;
+			width: 100%;
+			margin-top: 24px;
+			background-color: var(--news-card-bg);
+			color: var(--text-magazine);
+			font-family: Roboto;
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 20px;
+
+			.btn {
+				display: flex;
+				width: 220px;
+				height: 44px;
+				padding: 0px 12px;
+				justify-content: center;
+				font-family: Roboto;
+				font-size: 16px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 24px;
+				align-items: center;
+			}
+		}
+
+		.download {
+			margin-top: 24px;
+			width: 100%;
+			display: flex;
+			gap: 24px;
+			justify-content: flex-end;
+
+			.select {
+				border-style: solid;
+				background: transparent;
+				border-width: 0px 0px 1px 0px;
+				padding: 12px 12px;
+				display: flex;
+				max-width: 224px;
+				flex-direction: row;
+				align-items: center;
+				justify-content: flex-start;
+				align-self: stretch;
+				flex-shrink: 0;
+				margin-right: 16px;
+				color: var(--darkcommunity-content-text-inactive, #aaaaaa);
+				text-align: left;
+				font: var(--body-1, 400 16px/24px "Roboto", sans-serif);
+				position: relative;
+				flex: 1;
+				transition: 0.15s ease-in-out;
+
+				&:last-child {
+					margin-right: 0px;
+				}
+
+				&:focus,
+				&:focus-visible,
+				&:active {
+					transition: 0.15s ease-in-out;
+					border: 2px solid var(--search-bar-active-border-color);
+				}
+
+				option {
+					background: var(--search-bar-bg);
+					padding: 0px 16px;
+					gap: 16px;
+					align-items: center;
+					justify-content: flex-start;
+					height: 48px !important;
+					position: relative;
+					color: var(--active) !important;
+					text-align: left;
+					font: var(--body-1, 400 16px/24px "Roboto", sans-serif) !important;
+				}
+			}
+
+			.btn {
+				display: flex;
+				width: 220px;
+				height: 44px;
+				padding: 0px 12px;
+				justify-content: center;
+				font-family: Roboto;
+				font-size: 16px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 24px;
+				align-items: center;
+			}
+		}
+	}
+}
+
+.actions {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin: 20px auto;
+	.select {
+		border-style: solid;
+		background: transparent;
+		border-width: 0px 0px 1px 0px;
+		padding: 5px 12px;
+		display: flex;
+		flex-direction: row;
+		max-width: 224px;
+		align-items: center;
+		justify-content: flex-start;
+		align-self: stretch;
+		flex-shrink: 0;
+		margin-right: 16px;
+		color: var(--darkcommunity-content-text-inactive, #aaaaaa);
+		text-align: left;
+		font: var(--body-1, 400 16px/24px "Roboto", sans-serif);
+		position: relative;
+		flex: 1;
+		transition: 0.15s ease-in-out;
+
+		&:last-child {
+			margin-right: 0px;
+		}
+
+		&:focus,
+		&:focus-visible,
+		&:active {
+			transition: 0.15s ease-in-out;
+			border: 2px solid var(--search-bar-active-border-color);
+		}
+
+		option {
+			background: var(--search-bar-bg);
+			padding: 0px 16px;
+			gap: 16px;
+			align-items: center;
+			justify-content: flex-start;
+			height: 48px !important;
+			position: relative;
+			color: var(--active) !important;
+			text-align: left;
+			font: var(--body-1, 400 16px/24px "Roboto", sans-serif) !important;
+		}
+	}
+}
+
+@media screen and (max-width: 768px) {
+	.magazine-inside {
+		.image-content {
+			margin-bottom: 300px;
+
+			img {
+				width: 300px;
+				height: 400px;
+				flex-shrink: 0;
+				box-shadow: -7px 1px 12.8px 0px rgba(0, 0, 0, 0.15);
+			}
+
+			.premium-card {
+				.premium {
+					width: 300px;
+					height: 400px;
+				}
+			}
+		}
+	}
+	.actions {
+		flex-direction: row;
+		gap: 1rem;
+	}
+}
+
+@media screen and (min-width: 0px) and (max-width: 460px) {
+	.actions {
+		flex-direction: column !important;
+		gap: 1rem;
+	}
+}
+
+.lead-modal-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(0, 0, 0, 0.7);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 9999;
+}
+
+.lead-modal {
+	background: var(--news-card-bg, #1a1a2e);
+	border-radius: 12px;
+	padding: 32px;
+	max-width: 420px;
+	width: 90%;
+	position: relative;
+	color: var(--text-magazine, #fff);
+
+	h3 {
+		font-family: Roboto;
+		font-size: 20px;
+		font-weight: 700;
+		margin-bottom: 8px;
+	}
+
+	p {
+		font-family: Roboto;
+		font-size: 14px;
+		margin-bottom: 24px;
+		opacity: 0.8;
+	}
+
+	form {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+	}
+
+	.lead-input {
+		width: 100%;
+		padding: 12px 16px;
+		border-radius: 8px;
+		border: 1px solid rgba(255, 255, 255, 0.2);
+		background: rgba(255, 255, 255, 0.05);
+		color: var(--text-magazine, #fff);
+		font-family: Roboto;
+		font-size: 14px;
+		outline: none;
+		box-sizing: border-box;
+
+		&:focus {
+			border-color: var(--primary, #ee3831);
+		}
+
+		&::placeholder {
+			color: rgba(255, 255, 255, 0.4);
+		}
+	}
+
+	.lead-btn {
+		width: 100%;
+		height: 44px;
+		margin-top: 8px;
+	}
+
+	.lead-close {
+		position: absolute;
+		top: 12px;
+		right: 16px;
+		background: none;
+		border: none;
+		color: var(--text-magazine, #fff);
+		font-size: 24px;
+		cursor: pointer;
+		opacity: 0.6;
+
+		&:hover {
+			opacity: 1;
+		}
+	}
+}
+</style>