/*! * Zero2Kombat landing — premium preview styles * Brand colors locked: #1f2e4d navy, #d0f0ff ice, #edeae5 sand, #111211 ink, #ffffff * Single accent: #ffe14a (championship yellow), used sparingly. */ @font-face { font-family: "PYMLand Bebas"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/BebasNeue-Regular.ttf") format("truetype"); } /* Anti-FOUC reveal: pairs with the inline `[data-pymland-root]{visibility:hidden;opacity:0;transition:opacity 0.32s ease-out}` */ /* guard printed in by PYMLand_Page_Templates::print_reset_styles(). */ /* This rule is more specific (0,2,0 vs 0,1,0), so it wins as soon as this */ /* stylesheet is parsed. On the normal load path, both rules are parsed */ /* together → element renders at opacity:1 → no transition fires → no flash. */ /* On the rare FOUC-recovery path (linked CSS deferred by an optimisation */ /* plugin), the inline rule's transition smoothly fades the element in. */ .pymland[data-pymland-root] { visibility: visible; opacity: 1; } /* ============================================================ * Scroll-reveal (smooth fade + slight rise as elements enter the viewport). * ---------------------------------------------------------------------- * The reveal is gated by `.is-reveal-ready` on the landing root, which is * added by the frontend script BEFORE the first paint of below-the-fold * content. Above-the-fold elements are pre-marked `.is-revealed` by the * script so they never flicker. If JS fails to run or IntersectionObserver * is unsupported, `.is-reveal-ready` is never added → all elements remain * fully visible (graceful, accessible fallback). * Honours the user's `prefers-reduced-motion` system preference. * ============================================================ */ @media (prefers-reduced-motion: no-preference) { .pymland.is-reveal-ready .pymland-reveal { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; } .pymland.is-reveal-ready .pymland-reveal.is-revealed { opacity: 1; transform: none; } } .pymland { --pymland-color-primary: #1f2e4d; --pymland-color-primary-2: #28406b; --pymland-color-primary-deep: #0e1629; --pymland-color-bg: #d0f0ff; --pymland-color-bg-soft: #edeae5; --pymland-color-text: #111211; --pymland-color-text-soft: #2b2f34; --pymland-color-white: #ffffff; --pymland-color-accent: #ffe14a; --pymland-color-success: #1b7f4b; --pymland-color-danger: #b1321e; --pymland-radius: 16px; --pymland-radius-sm: 10px; --pymland-radius-lg: 24px; --pymland-shadow: 0 18px 60px rgba(31, 46, 77, 0.12); --pymland-shadow-sm: 0 6px 18px rgba(31, 46, 77, 0.08); --pymland-shadow-lift: 0 24px 70px rgba(14, 22, 41, 0.45); --pymland-font-display: "PYMLand Bebas", "Oswald", "Arial Narrow", Impact, sans-serif; --pymland-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--pymland-color-text); font-family: var(--pymland-font-body); font-size: 16px; line-height: 1.55; background: var(--pymland-color-bg-soft); -webkit-font-smoothing: antialiased; } .pymland *, .pymland *::before, .pymland *::after { box-sizing: border-box; } .pymland img { max-width: 100%; height: auto; display: block; } .pymland a { color: var(--pymland-color-primary); text-decoration: none; transition: color 0.15s ease, opacity 0.15s ease; } .pymland a:hover, .pymland a:focus-visible { text-decoration: underline; } .pymland-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; } .pymland-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; } /* ============================================================ * ============================================================ */ .pymland-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--pymland-font-display); font-size: 13px; letter-spacing: 4px; text-transform: uppercase; color: var(--pymland-color-primary); margin-bottom: 14px; } .pymland-eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--pymland-color-accent); display: inline-block; } .pymland-eyebrow--light { color: rgba(255, 255, 255, 0.85); } .pymland-eyebrow--light::before { background: var(--pymland-color-accent); } .pymland-section__head { text-align: center; margin-bottom: 48px; max-width: 720px; margin-left: auto; margin-right: auto; } .pymland-section__title { font-family: var(--pymland-font-display); font-size: clamp(34px, 5vw, 60px); letter-spacing: 1.5px; text-transform: uppercase; color: var(--pymland-color-primary); margin: 0 0 12px 0; line-height: 1; } .pymland-section__head--light .pymland-section__title { color: var(--pymland-color-primary); } .pymland-section__sub { font-size: 17px; color: var(--pymland-color-text-soft); margin: 0; line-height: 1.55; } /* ============================================================ * ============================================================ */ .pymland-topbar { height: 4px; background: linear-gradient( 90deg, var(--pymland-color-primary) 0%, var(--pymland-color-primary-2) 25%, var(--pymland-color-accent) 50%, var(--pymland-color-primary-2) 75%, var(--pymland-color-primary) 100% ); } .pymland-header { background: rgba(31, 46, 77, 0.92); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); color: var(--pymland-color-white); padding: 14px 0; position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(208, 240, 255, 0.08); transition: padding 0.2s ease, background-color 0.2s ease; } .pymland-header.is-scrolled { padding: 8px 0; background: rgba(14, 22, 41, 0.96); } .pymland-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .pymland-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--pymland-color-white) !important; text-decoration: none; } .pymland-brand:hover, .pymland-brand:focus-visible { text-decoration: none; opacity: 0.9; } .pymland-brand__glyph { display: inline-flex; align-items: center; justify-content: center; color: var(--pymland-color-white); } .pymland-brand__name { font-family: var(--pymland-font-display); font-size: clamp(20px, 2vw, 24px); letter-spacing: 3px; text-transform: uppercase; line-height: 1; } .pymland-brand__num { color: var(--pymland-color-accent); font-weight: 400; } .pymland-header__nav { display: none; gap: 28px; margin-left: auto; margin-right: 16px; } @media (min-width: 820px) { .pymland-header__nav { display: inline-flex; } } .pymland-header__nav-link { color: rgba(255, 255, 255, 0.78) !important; font-size: 14px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; text-decoration: none; position: relative; padding: 4px 0; } .pymland-header__nav-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--pymland-color-accent); transition: right 0.2s ease; } .pymland-header__nav-link:hover, .pymland-header__nav-link:focus-visible { color: var(--pymland-color-white) !important; text-decoration: none; } .pymland-header__nav-link:hover::after, .pymland-header__nav-link:focus-visible::after { right: 0; } .pymland-header__yt { display: inline-flex; align-items: center; gap: 10px; color: var(--pymland-color-white) !important; font-size: 13px; padding: 8px 14px 8px 8px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; text-decoration: none; background: rgba(255, 255, 255, 0.04); transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .pymland-header__yt:hover, .pymland-header__yt:focus-visible { background: rgba(255, 225, 74, 0.1); border-color: rgba(255, 225, 74, 0.4); text-decoration: none; transform: translateY(-1px); } .pymland-yt-bubble { width: 28px; height: 28px; background: var(--pymland-color-accent); color: var(--pymland-color-primary); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .pymland-header__yt-text { display: flex; flex-direction: column; line-height: 1; gap: 2px; } .pymland-header__yt-label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; opacity: 0.7; } .pymland-header__yt-name { font-size: 13px; font-weight: 700; letter-spacing: 1px; } @media (max-width: 540px) { .pymland-header__yt-text { display: none; } .pymland-header__yt { padding: 4px; border-color: transparent; } } /* ============================================================ * ============================================================ */ .pymland-hero { position: relative; background: var(--pymland-color-primary-deep); color: var(--pymland-color-white); padding: clamp(48px, 8vw, 110px) 0 clamp(60px, 9vw, 140px); overflow: hidden; isolation: isolate; } /* Background layers */ .pymland-hero__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient( 1200px 700px at 100% -10%, rgba(208, 240, 255, 0.16), transparent 60% ), radial-gradient( 900px 600px at -10% 110%, rgba(208, 240, 255, 0.08), transparent 60% ), linear-gradient(180deg, #1f2e4d 0%, #0e1629 100%); } .pymland-hero__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(208, 240, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(208, 240, 255, 0.07) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient( ellipse 80% 70% at 50% 40%, #000 35%, transparent 80% ); -webkit-mask-image: radial-gradient( ellipse 80% 70% at 50% 40%, #000 35%, transparent 80% ); } .pymland-hero__halftone { position: absolute; right: -80px; top: -60px; width: 360px; height: 360px; background-image: radial-gradient( rgba(255, 225, 74, 0.5) 1.6px, transparent 1.8px ); background-size: 16px 16px; mask-image: radial-gradient(circle, #000 0%, transparent 65%); -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 65%); opacity: 0.55; } .pymland-hero__spot { position: absolute; left: 50%; top: -10%; width: 900px; height: 700px; transform: translateX(-50%); background: conic-gradient( from 200deg at 50% 50%, transparent 0deg, rgba(208, 240, 255, 0.08) 60deg, transparent 130deg ); filter: blur(20px); opacity: 0.7; } .pymland-hero__watermark { position: absolute; left: -40px; bottom: -40px; font-family: var(--pymland-font-display); font-size: clamp(220px, 32vw, 480px); letter-spacing: -8px; color: rgba(208, 240, 255, 0.04); line-height: 0.85; white-space: nowrap; font-weight: 400; user-select: none; pointer-events: none; } .pymland-hero__corner { position: absolute; width: 80px; height: 80px; border: 2px solid var(--pymland-color-accent); opacity: 0.55; } .pymland-hero__corner--tr { right: 28px; top: 28px; border-left: 0; border-bottom: 0; } .pymland-hero__corner--bl { left: 28px; bottom: 80px; border-right: 0; border-top: 0; } @media (max-width: 720px) { .pymland-hero__corner { display: none; } } .pymland-hero__inner { position: relative; z-index: 1; display: grid; gap: clamp(36px, 5vw, 64px); grid-template-columns: 1fr; align-items: center; } @media (min-width: 960px) { .pymland-hero__inner { grid-template-columns: 1.1fr 1fr; } } /* Pre-headline trust badge */ .pymland-prebadge { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(208, 240, 255, 0.18); border-radius: 999px; margin-bottom: 24px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .pymland-prebadge__stars { display: inline-flex; } .pymland-prebadge__text { font-size: 13px; color: rgba(255, 255, 255, 0.92); letter-spacing: 0.3px; } .pymland-prebadge__text strong { color: var(--pymland-color-white); font-weight: 700; } .pymland-hero__headline { font-family: var(--pymland-font-display); font-size: clamp(44px, 7vw, 84px); font-weight: bold; line-height: 0.95; letter-spacing: 1.5px; text-transform: uppercase; margin: 0 0 18px 0; color: var(--pymland-color-white); } .pymland-hero__headline-num { color: var(--pymland-color-accent); display: inline-block; position: relative; } .pymland-hero__headline-num::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6%; height: 8px; background: rgba(255, 225, 74, 0.28); z-index: -1; } .pymland-hero__sub { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: rgba(255, 255, 255, 0.82); margin: 0 0 32px 0; max-width: 54ch; } .pymland-hero__sub strong { color: var(--pymland-color-white); font-weight: 600; } .pymland-hero__form-wrap { background: var(--pymland-color-white); color: var(--pymland-color-text); border-radius: var(--pymland-radius-lg); padding: clamp(20px, 2.4vw, 26px); box-shadow: var(--pymland-shadow); position: relative; } .pymland-hero__form-wrap::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient( 135deg, rgba(255, 225, 74, 0.6), transparent 35%, transparent 65%, rgba(208, 240, 255, 0.6) ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* Hero proof row (avatars + count) */ .pymland-hero__proof { display: flex; align-items: center; gap: 14px; margin-top: 26px; } .pymland-avatars { list-style: none; margin: 0; padding: 0; display: inline-flex; } .pymland-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--c, #d0f0ff); color: var(--t, #1f2e4d); border: 2px solid var(--pymland-color-primary-deep); font-family: var(--pymland-font-display); font-size: 13px; letter-spacing: 1px; display: inline-flex; align-items: center; justify-content: center; margin-left: -10px; } .pymland-avatar:first-child { margin-left: 0; } .pymland-hero__proof-text { margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, 0.78); } .pymland-hero__proof-text strong { color: var(--pymland-color-white); } /* Hero visual */ .pymland-hero__visual { display: flex; justify-content: center; position: relative; } .pymland-hero__visual-stage { position: relative; width: 100%; max-width: 560px; } .pymland-hero__glow { position: absolute; inset: -10% -10% 0 -10%; background: radial-gradient( closest-side, rgba(208, 240, 255, 0.25), transparent 70% ); filter: blur(40px); z-index: 0; } .pymland-hero__mockup { margin: 0; width: 100%; padding: 14px; border-radius: var(--pymland-radius-lg); background: linear-gradient( 180deg, rgba(208, 240, 255, 0.18), rgba(208, 240, 255, 0.04) ); box-shadow: var(--pymland-shadow-lift); position: relative; z-index: 1; transform: rotate(-1.5deg); } .pymland-hero__img { width: 100%; height: auto; border-radius: var(--pymland-radius); display: block; background: var(--pymland-color-bg); } /* Floating stickers */ .pymland-sticker { position: absolute; z-index: 2; font-family: var(--pymland-font-display); letter-spacing: 1px; box-shadow: var(--pymland-shadow-sm); } .pymland-sticker--free { left: -10px; top: -16px; width: 96px; height: 96px; background: var(--pymland-color-accent); color: var(--pymland-color-primary); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-12deg); border: 3px solid var(--pymland-color-primary); } .pymland-sticker__top { font-size: 14px; letter-spacing: 2px; opacity: 0.85; } .pymland-sticker__big { font-size: 30px; line-height: 1; } .pymland-sticker--tag { right: -8px; top: 24px; background: var(--pymland-color-white); color: var(--pymland-color-primary); padding: 8px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-family: var(--pymland-font-body); font-weight: 700; } .pymland-sticker--instant { right: -4px; bottom: 14px; background: var(--pymland-color-primary); color: var(--pymland-color-white); padding: 8px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-family: var(--pymland-font-body); font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.25); } @media (max-width: 720px) { .pymland-sticker--free { width: 76px; height: 76px; left: -4px; top: -10px; } .pymland-sticker__big { font-size: 22px; } .pymland-sticker__top { font-size: 11px; } } /* Hero diagonal divider */ .pymland-hero__divider { position: absolute; bottom: -1px; left: 0; right: 0; width: 100%; height: 60px; display: block; z-index: 2; } /* ============================================================ * ============================================================ */ .pymland-form { position: relative; } .pymland-form__row { display: grid; gap: 10px; position: relative; transform: translateY(-25px) !important; } @media (min-width: 580px) { .pymland-form__row { grid-template-columns: 1fr auto; } } .pymland-form__icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: rgba(31, 46, 77, 0.55); pointer-events: none; z-index: 1; } @media (min-width: 580px) { .pymland-form__icon { left: 18px; } } .pymland-form__input { -webkit-appearance: none; appearance: none; width: 100%; font: inherit; color: var(--pymland-color-text); background: var(--pymland-color-bg-soft); border: 2px solid transparent; border-radius: 999px; padding: 16px 20px 16px 46px; min-height: 56px; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .pymland-form__input::placeholder { color: rgba(17, 18, 17, 0.4); } .pymland-form__input:focus-visible { outline: none; border-color: var(--pymland-color-primary); background: var(--pymland-color-white); box-shadow: 0 0 0 4px rgba(31, 46, 77, 0.12); } .pymland-form.is-invalid .pymland-form__input { border-color: var(--pymland-color-danger); background: #fff6f4; } .pymland-form__antispam { margin: 16px 0 0 0; font-size: 12.5px; color: var(--pymland-color-text-soft); opacity: 0.85; text-align: center; display: inline-flex; align-items: center; gap: 6px; width: 100%; justify-content: center; } .pymland-form__spam-notice { margin: 8px auto 0 auto; width: fit-content; max-width: 100%; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255, 225, 74, 0.42); background: rgba(255, 225, 74, 0.14); color: #f59e0b; font-size: 12px; font-weight: 800; line-height: 1.35; text-align: center; letter-spacing: 0.2px; } .pymland-form__status { margin: 14px 0 0 0; padding: 0 4px; font-size: 14px; min-height: 1.2em; line-height: 1.4; } .pymland-form__status.is-error { color: var(--pymland-color-danger); } .pymland-form__status.is-success { color: var(--pymland-color-success); font-weight: 600; } .pymland-form.is-submitting .pymland-form__input, .pymland-form.is-submitting .pymland-btn { opacity: 0.7; pointer-events: none; } .pymland-hp { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; } /* ============================================================ * ============================================================ */ .pymland-btn { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: inherit; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; font-family: var(--pymland-font-display); font-size: 16px; line-height: 1; min-height: 56px; padding: 12px 28px; border: 0; border-radius: 999px; cursor: pointer; transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; text-decoration: none !important; white-space: nowrap; } .pymland-btn--primary { background: var(--pymland-color-primary); color: var(--pymland-color-white); box-shadow: 0 8px 22px rgba(31, 46, 77, 0.28); position: relative; overflow: hidden; } .pymland-btn--primary::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, transparent 30%, rgba(255, 225, 74, 0.18) 50%, transparent 70% ); transform: translateX(-100%); transition: transform 0.55s ease; } .pymland-btn--primary:hover, .pymland-btn--primary:focus-visible { background: var(--pymland-color-primary-2); box-shadow: 0 14px 32px rgba(31, 46, 77, 0.36); transform: translateY(-2px); } .pymland-btn--primary:hover::before, .pymland-btn--primary:focus-visible::before { transform: translateX(100%); } .pymland-btn--primary:active { transform: translateY(0); } .pymland-btn[disabled] { opacity: 0.6; cursor: progress; transform: none; } .pymland-btn__arrow { transition: transform 0.2s ease; } .pymland-btn--primary:hover .pymland-btn__arrow, .pymland-btn--primary:focus-visible .pymland-btn__arrow { transform: translateX(3px); } /* ============================================================ * ============================================================ */ .pymland-benefits { background: var(--pymland-color-bg-soft); padding: clamp(56px, 7vw, 96px) 0; position: relative; } .pymland-benefits__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: 1fr; } @media (min-width: 620px) { .pymland-benefits__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .pymland-benefits__grid { grid-template-columns: repeat(4, 1fr); } } .pymland-benefit { background: var(--pymland-color-white); border-radius: var(--pymland-radius); padding: 28px 24px 26px; box-shadow: var(--pymland-shadow-sm); position: relative; overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease; border: 1px solid rgba(31, 46, 77, 0.06); } .pymland-benefit::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pymland-color-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; } .pymland-benefit:hover { transform: translateY(-4px); box-shadow: var(--pymland-shadow); } .pymland-benefit:hover::after { transform: scaleX(1); } .pymland-benefit__num { position: absolute; right: 18px; top: 14px; font-family: var(--pymland-font-display); font-size: 38px; color: rgba(31, 46, 77, 0.08); letter-spacing: 0; line-height: 1; pointer-events: none; } .pymland-benefit__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--pymland-color-bg); color: var(--pymland-color-primary); margin-bottom: 16px; } .pymland-benefit__label { font-family: var(--pymland-font-display); font-size: 24px; letter-spacing: 1.5px; text-transform: uppercase; margin: 0 0 6px 0; color: var(--pymland-color-primary); line-height: 1.05; } .pymland-benefit__desc { margin: 0; font-size: 14.5px; color: var(--pymland-color-text-soft); line-height: 1.55; } /* ============================================================ * ============================================================ */ .pymland-plans { background: var(--pymland-color-white); padding: clamp(64px, 8vw, 110px) 0; position: relative; } .pymland-plans__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: 1fr; } @media (min-width: 620px) { .pymland-plans__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .pymland-plans__grid { grid-template-columns: repeat(3, 1fr); } } .pymland-plan { border-radius: var(--pymland-radius); padding: 24px 22px 22px; display: flex; flex-direction: column; gap: 12px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; position: relative; overflow: hidden; border: 1.5px solid transparent; } .pymland-plan[data-tone="navy"] { background: var(--pymland-color-primary); color: var(--pymland-color-white); border-color: rgba(208, 240, 255, 0.08); } .pymland-plan[data-tone="navy"]::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at 100% 0%, rgba(208, 240, 255, 0.14), transparent 50% ), linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 60%); pointer-events: none; } .pymland-plan[data-tone="ice"] { background: var(--pymland-color-bg-soft); color: var(--pymland-color-text); border-color: rgba(31, 46, 77, 0.06); } .pymland-plan[data-tone="ice"]::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at 100% 0%, rgba(208, 240, 255, 0.5), transparent 60% ); pointer-events: none; } .pymland-plan:hover { transform: translateY(-4px); box-shadow: var(--pymland-shadow); } .pymland-plan > * { position: relative; z-index: 1; } .pymland-plan__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .pymland-plan__badge { font-family: var(--pymland-font-display); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); } .pymland-plan[data-tone="ice"] .pymland-plan__badge { background: var(--pymland-color-primary); color: var(--pymland-color-white); border-color: transparent; } .pymland-plan__lock { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.18); } .pymland-plan[data-tone="ice"] .pymland-plan__lock { background: rgba(31, 46, 77, 0.08); color: rgba(31, 46, 77, 0.6); border-color: rgba(31, 46, 77, 0.12); } .pymland-plan__title { font-family: var(--pymland-font-display); font-size: 32px; letter-spacing: 1px; text-transform: uppercase; margin: 4px 0 6px 0; line-height: 1; color: inherit; } .pymland-plan[data-tone="ice"] .pymland-plan__title { color: var(--pymland-color-primary); } .pymland-plan__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .pymland-plan__chips li { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); } .pymland-plan[data-tone="ice"] .pymland-plan__chips li { background: rgba(31, 46, 77, 0.06); border-color: rgba(31, 46, 77, 0.1); color: var(--pymland-color-primary); } .pymland-plan__meter { display: inline-flex; gap: 4px; margin-top: 4px; } .pymland-plan__meter span { width: 22px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); } .pymland-plan__meter span.is-on { background: var(--pymland-color-accent); } .pymland-plan[data-tone="ice"] .pymland-plan__meter span { background: rgba(31, 46, 77, 0.12); } .pymland-plan[data-tone="ice"] .pymland-plan__meter span.is-on { background: var(--pymland-color-primary); } .pymland-plan__hint { margin: 10px 0 0 0; font-size: 12.5px; letter-spacing: 0.3px; opacity: 0.7; } .pymland-plan--featured { box-shadow: 0 18px 50px rgba(31, 46, 77, 0.25); transform: translateY(-2px); } .pymland-plan--featured .pymland-plan__featured-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: var(--pymland-color-accent); color: var(--pymland-color-primary); } /* ============================================================ * ============================================================ */ .pymland-trust { background: linear-gradient(180deg, var(--pymland-color-bg) 0%, #b8e7fb 100%); padding: clamp(64px, 8vw, 110px) 0; text-align: center; } .pymland-trust__inner { max-width: 980px; margin: 0 auto; } .pymland-stats { list-style: none; margin: 0 0 56px 0; padding: 32px 24px; display: grid; gap: 22px; grid-template-columns: repeat(2, 1fr); background: var(--pymland-color-white); border-radius: var(--pymland-radius); box-shadow: var(--pymland-shadow); } @media (min-width: 720px) { .pymland-stats { grid-template-columns: repeat(4, 1fr); } } .pymland-stat { text-align: center; border-right: 1px solid rgba(31, 46, 77, 0.08); } .pymland-stat:last-child { border-right: 0; } @media (max-width: 720px) { .pymland-stat { border-right: 0; } .pymland-stat:nth-child(odd) { border-right: 1px solid rgba(31, 46, 77, 0.08); } } .pymland-stat__num { display: block; font-family: var(--pymland-font-display); font-size: clamp(36px, 4.5vw, 56px); letter-spacing: 1px; color: var(--pymland-color-primary); line-height: 1; margin-bottom: 6px; } .pymland-stat__label { display: block; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--pymland-color-text-soft); } .pymland-quote { background: var(--pymland-color-white); border-radius: var(--pymland-radius); padding: clamp(28px, 4vw, 44px); margin: 0 auto; max-width: 760px; box-shadow: var(--pymland-shadow-sm); text-align: left; position: relative; } .pymland-quote__mark { position: absolute; top: 18px; right: 22px; color: var(--pymland-color-accent); opacity: 0.9; } @media (max-width: 580px) { .pymland-quote__mark { top: 2px; right: 16px; width: 24px; height: 24px; } } .pymland-quote blockquote { margin: 0 0 22px 0; font-size: clamp(17px, 2vw, 21px); line-height: 1.45; color: var(--pymland-color-text); } .pymland-quote blockquote p { margin: 0; } .pymland-quote figcaption { display: flex; align-items: center; gap: 14px; } .pymland-quote__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--pymland-color-primary); color: var(--pymland-color-white); font-family: var(--pymland-font-display); letter-spacing: 1.5px; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; } .pymland-quote__who { display: flex; flex-direction: column; font-size: 14px; color: var(--pymland-color-text-soft); } .pymland-quote__who strong { color: var(--pymland-color-primary); font-size: 15px; letter-spacing: 0.3px; } /* ============================================================ * ============================================================ */ .pymland-cta-bottom { background: var(--pymland-color-primary-deep); color: var(--pymland-color-white); padding: clamp(64px, 8vw, 110px) 0; text-align: center; position: relative; overflow: hidden; isolation: isolate; } .pymland-cta-bottom__bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient( 800px 500px at 100% 0%, rgba(255, 225, 74, 0.08), transparent 60% ), radial-gradient( 700px 500px at 0% 100%, rgba(208, 240, 255, 0.08), transparent 60% ), linear-gradient(180deg, #1f2e4d, #0e1629); } .pymland-cta-bottom__bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(208, 240, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(208, 240, 255, 0.05) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient( ellipse 70% 70% at 50% 50%, #000 35%, transparent 80% ); -webkit-mask-image: radial-gradient( ellipse 70% 70% at 50% 50%, #000 35%, transparent 80% ); } .pymland-cta-bottom__inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; } .pymland-cta-bottom__title { font-family: var(--pymland-font-display); font-size: clamp(36px, 5.5vw, 64px); letter-spacing: 1.5px; text-transform: uppercase; margin: 0 0 12px 0; line-height: 1; } .pymland-cta-bottom__sub { font-size: 17px; margin: 0 0 32px 0; opacity: 0.85; line-height: 1.55; } .pymland-cta-bottom__form { background: var(--pymland-color-white); color: var(--pymland-color-text); border-radius: var(--pymland-radius-lg); padding: clamp(20px, 2.4vw, 26px); box-shadow: var(--pymland-shadow); text-align: left; position: relative; } .pymland-cta-bottom__form::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient( 135deg, rgba(255, 225, 74, 0.6), transparent 35%, transparent 65%, rgba(208, 240, 255, 0.6) ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .pymland-cta-bottom__proof { margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 14px; color: rgba(255, 255, 255, 0.78); font-size: 13.5px; } .pymland-cta-bottom__proof p { margin: 0; } .pymland-cta-bottom__proof .pymland-avatar { border-color: var(--pymland-color-primary-deep); } /* ============================================================ * ============================================================ */ .pymland-footer { background: #0a1120; color: rgba(255, 255, 255, 0.7); padding: 64px 0 28px; position: relative; overflow: hidden; } .pymland-footer__watermark { position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); font-family: var(--pymland-font-display); font-size: clamp(120px, 18vw, 240px); color: rgba(208, 240, 255, 0.04); letter-spacing: 4px; line-height: 0.85; white-space: nowrap; pointer-events: none; user-select: none; } .pymland-footer__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 40px; } .pymland-footer__main { display: grid; gap: 32px; grid-template-columns: 1fr; } @media (min-width: 720px) { .pymland-footer__main { grid-template-columns: 1.4fr 1fr 1fr 1fr; } } .pymland-brand--footer { margin-bottom: 14px; } .pymland-footer__about { font-size: 14px; color: rgba(255, 255, 255, 0.6); line-height: 1.6; max-width: 32ch; margin: 0 0 20px 0; } .pymland-footer__social { list-style: none; margin: 0; padding: 0; display: inline-flex; gap: 10px; } .pymland-footer__social a { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.08); transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .pymland-footer__social a:hover, .pymland-footer__social a:focus-visible { background: var(--pymland-color-accent); color: var(--pymland-color-primary) !important; transform: translateY(-2px); text-decoration: none; } .pymland-footer__heading { font-family: var(--pymland-font-display); font-size: 14px; letter-spacing: 3px; text-transform: uppercase; color: var(--pymland-color-white); margin: 0 0 14px 0; } .pymland-footer__links { list-style: none; margin: 0; padding: 0; } .pymland-footer__links--col li { font-size: 14px; color: rgba(255, 255, 255, 0.65); margin-bottom: 8px; } .pymland-footer__links a { color: rgba(255, 255, 255, 0.85) !important; } .pymland-footer__link-disabled { color: rgba(255, 255, 255, 0.4); cursor: default; } .pymland-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 22px; display: flex; flex-direction: column; gap: 10px; } .pymland-footer__disclaimer { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); max-width: 780px; margin: 0; line-height: 1.55; } .pymland-footer__copy { font-size: 12px; color: rgba(255, 255, 255, 0.4); margin: 0; } /* ============================================================ * ============================================================ */ @media (prefers-reduced-motion: reduce) { .pymland *, .pymland *::before, .pymland *::after { transition: none !important; animation: none !important; } .pymland-hero__mockup { transform: none; } } /* ============================================================ * Keeps the Premium template visually identical to the approved LTR preview * even inside RTL themes and opinionated form/button styles. * ============================================================ */ .pymland.pymland--premium, .pymland.pymland--premium * { direction: ltr !important; } .pymland.pymland--premium { --pymland-premium-header-offset: 68px; --pymland-premium-hero-divider-guard: 65px; text-align: left !important; unicode-bidi: isolate !important; font-family: var(--pymland-font-body) !important; background: #edeae5 !important; margin: 0 !important; padding: 0 !important; } .pymland.pymland--premium h1, .pymland.pymland--premium h2, .pymland.pymland--premium h3, .pymland.pymland--premium h4, .pymland.pymland--premium p, .pymland.pymland--premium ul, .pymland.pymland--premium li, .pymland.pymland--premium figure, .pymland.pymland--premium blockquote, .pymland.pymland--premium form { text-align: inherit; } .pymland.pymland--premium .pymland-header__inner, .pymland.pymland--premium .pymland-brand, .pymland.pymland--premium .pymland-header__nav, .pymland.pymland--premium .pymland-header__yt, .pymland.pymland--premium .pymland-form__row, .pymland.pymland--premium .pymland-btn, .pymland.pymland--premium .pymland-form__antispam, .pymland.pymland--premium .pymland-hero__proof, .pymland.pymland--premium .pymland-avatars, .pymland.pymland--premium .pymland-footer__social, .pymland.pymland--premium .pymland-quote figcaption, .pymland.pymland--premium .pymland-stats, .pymland.pymland--premium .pymland-footer__main { direction: ltr !important; } .pymland.pymland--premium a, .pymland.pymland--premium a:hover, .pymland.pymland--premium a:focus, .pymland.pymland--premium a:focus-visible { text-decoration: none !important; box-shadow: none !important; } .pymland.pymland--premium .pymland-brand, .pymland.pymland--premium .pymland-brand:hover, .pymland.pymland--premium .pymland-brand:focus-visible, .pymland.pymland--premium .pymland-header__nav-link, .pymland.pymland--premium .pymland-header__yt, .pymland.pymland--premium .pymland-header__yt:hover, .pymland.pymland--premium .pymland-header__yt:focus-visible, .pymland.pymland--premium .pymland-footer a, .pymland.pymland--premium .pymland-footer a:hover, .pymland.pymland--premium .pymland-footer a:focus-visible { color: inherit !important; } .pymland.pymland--premium .pymland-header, .pymland.pymland--premium .pymland-hero, .pymland.pymland--premium .pymland-cta-bottom, .pymland.pymland--premium .pymland-footer { text-align: left !important; } .pymland.pymland--premium .pymland-form__input { -webkit-appearance: none !important; appearance: none !important; display: block !important; width: 100% !important; max-width: none !important; min-height: 56px !important; height: auto !important; font-family: var(--pymland-font-body) !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.55 !important; letter-spacing: 0 !important; color: var(--pymland-color-text) !important; background: var(--pymland-color-bg-soft) !important; border: 2px solid transparent !important; border-radius: 999px !important; padding: 16px 20px 16px 46px !important; margin: 0 !important; box-shadow: none !important; outline: none !important; text-align: left !important; direction: ltr !important; } .pymland.pymland--premium .pymland-form__input::placeholder { color: rgba(17, 18, 17, 0.4) !important; opacity: 1 !important; } .pymland.pymland--premium .pymland-form__input:focus, .pymland.pymland--premium .pymland-form__input:focus-visible { border-color: var(--pymland-color-primary) !important; background: var(--pymland-color-white) !important; box-shadow: 0 0 0 4px rgba(31, 46, 77, 0.12) !important; } /* * The envelope icon is absolutely positioned inside `.pymland-form__row`. * With `top: 50%` + `translateY(-50%)` it lands at the *geometric* centre of * the row, but the placeholder's *optical* centre sits a few pixels lower * due to font metrics (ascender > descender). A fixed `top: 35px` aligns the * icon's visual centre with the placeholder text across desktop AND mobile. * The `translateY(-50%)` is still inherited from the base rule, so the * element is kept centred around its own height, only the anchor shifts. */ .pymland.pymland--premium .pymland-form__icon { left: 18px !important; right: auto !important; top: 35px !important; } @media (max-width: 580px) { .pymland.pymland--premium .pymland-form__icon { left: 15px !important; right: auto !important; top: 35px !important; } } .pymland.pymland--premium .pymland-btn, .pymland.pymland--premium button.pymland-btn, .pymland.pymland--premium input[type="submit"].pymland-btn { -webkit-appearance: none !important; appearance: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; min-height: 56px !important; height: auto !important; padding: 12px 28px !important; margin: 0 !important; border: 0 !important; border-radius: 999px !important; font-family: var(--pymland-font-display) !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; white-space: nowrap !important; box-shadow: 0 8px 22px rgba(31, 46, 77, 0.28) !important; cursor: pointer !important; text-align: center !important; direction: ltr !important; } .pymland.pymland--premium .pymland-btn--primary, .pymland.pymland--premium button.pymland-btn--primary { background: var(--pymland-color-primary) !important; color: var(--pymland-color-white) !important; } .pymland.pymland--premium .pymland-btn--primary:hover, .pymland.pymland--premium .pymland-btn--primary:focus, .pymland.pymland--premium .pymland-btn--primary:focus-visible, .pymland.pymland--premium button.pymland-btn--primary:hover, .pymland.pymland--premium button.pymland-btn--primary:focus { background: var(--pymland-color-primary-2) !important; color: var(--pymland-color-white) !important; box-shadow: 0 14px 32px rgba(31, 46, 77, 0.36) !important; } .pymland.pymland--premium .pymland-btn--primary .pymland-btn__arrow { margin: 0 !important; transform-origin: center !important; } .pymland-page--premium, .pymland-template-premium { background: #edeae5 !important; } /* ============================================================ * PREMIUM FORM SPACING TUNE — v1.3.2 * Restores the exact approved preview rhythm: the input row stays near the * top of the card, while the anti-spam line keeps the same lower spacing. * ============================================================ */ .pymland.pymland--premium .pymland-hero__form-wrap { padding: clamp(20px, 2.4vw, 26px) !important; } .pymland.pymland--premium .pymland-hero__form-wrap .pymland-form__row { transform: translateY(-25px) !important; } .pymland.pymland--premium .pymland-form__status:empty { display: none !important; visibility: hidden !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: 0 !important; line-height: 0 !important; } .pymland.pymland--premium .pymland-form__antispam { margin: 16px 0 0 0 !important; } .pymland.pymland--premium .pymland-form__spam-notice { color: #ff854a !important; background: rgba(255, 133, 74, 0.12) !important; border-color: rgba(255, 159, 74, 0.38) !important; box-shadow: 0 10px 24px rgba(255, 159, 74, 0.12) !important; font-size: 12px !important; } .pymland.pymland--premium .pymland-hero { min-height: calc( 100vh - var(--pymland-premium-header-offset) + var(--pymland-premium-hero-divider-guard) ) !important; min-height: calc( 100svh - var(--pymland-premium-header-offset) + var(--pymland-premium-hero-divider-guard) ) !important; min-height: calc( 100dvh - var(--pymland-premium-header-offset) + var(--pymland-premium-hero-divider-guard) ) !important; } /* ------------------------------------------------------------ * Theme-proofing: many WordPress themes apply a default * `form { margin-bottom: 20px }` (or similar padding/border). * That extra outer space inflates the form-wrap height beyond * the approved preview rhythm (e.g. 202.58px instead of 182.58px). * Reset the form to a neutral block so the wrap measures the * same as the standalone preview, regardless of active theme. * ------------------------------------------------------------ */ .pymland.pymland--premium .pymland-form, .pymland.pymland--premium form.pymland-form { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } /* ============================================================ * Premium v1.4.5 — mobile swipe quotes, local SVG icons, clean footer, * and YouTube comments slider. * ============================================================ */ .pymland-plan__chips { gap: 5px; } .pymland-plan__chips li { padding: 4px 8px; letter-spacing: 1.4px; font-size: 10px; } .pymland-plan__meter { width: min(100%, 190px); display: flex; gap: 4px; } .pymland-plan__meter span { flex: 1 1 0; width: auto; min-width: 12px; } .pymland-plan__meter span.is-on { background: linear-gradient(90deg, var(--pymland-color-accent), #fff2a8); } .pymland-plan[data-tone="ice"] .pymland-plan__meter span.is-on { background: linear-gradient(90deg, var(--pymland-color-primary), #4b628f); } .pymland-inline-heart { display: inline-block; width: 1em; height: 1em; margin-left: 0.18em; vertical-align: -0.14em; color: #ff335f; filter: drop-shadow(0 4px 10px rgba(255, 51, 95, 0.22)); } .pymland-inline-heart svg { display: block; width: 100%; height: 100%; } .pymland-quote--slider { overflow: hidden; user-select: none; -webkit-user-select: none; min-height: 292px; } .pymland-quote__source { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px 0; padding: 7px 12px; border-radius: 999px; background: rgba(31, 46, 77, 0.06); color: var(--pymland-color-primary); font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; } .pymland-quote__source-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff0033; box-shadow: 0 0 0 4px rgba(255, 0, 51, 0.1); } .pymland-quote__viewport { position: relative; touch-action: pan-y; cursor: grab; min-height: 170px; } .pymland-quote__viewport:active { cursor: grabbing; } .pymland-quote__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateX(18px); transition: opacity 280ms ease, transform 280ms ease, visibility 280ms ease; } .pymland-quote__slide.is-active { position: relative; opacity: 1; visibility: visible; transform: translateX(0); } .pymland-quote__slide blockquote { margin-bottom: 22px; } .pymland-quote__dots { display: flex; gap: 8px; justify-content: flex-start; margin-top: 22px; } .pymland-quote__dots button { appearance: none; width: 9px; height: 9px; border: 0; border-radius: 999px; padding: 0; cursor: pointer; background: rgba(31, 46, 77, 0.2); transition: width 220ms ease, background 220ms ease, transform 220ms ease; } .pymland-quote__dots button.is-active { width: 28px; background: var(--pymland-color-primary); } .pymland-quote__dots button:focus-visible { outline: 3px solid rgba(255, 225, 74, 0.8); outline-offset: 3px; } @media (max-width: 580px) { .pymland-plan__chips li { font-size: 9.5px; padding-inline: 7px; } .pymland-quote--slider { min-height: 330px; } .pymland-quote__source { max-width: calc(100% - 36px); } } /* Premium v1.4.5 footer cleanup */ .pymland-footer__main--clean { align-items: start; } @media (min-width: 720px) { .pymland-footer__main--clean { grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.6fr); } .pymland-footer__main--clean .pymland-footer__col--contact { justify-self: end; } } /* ============================================================ * Premium v1.4.6 — compact one-line weekly chips and accurate meters. * ============================================================ */ .pymland-plan__chips { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 4px !important; overflow: visible !important; white-space: nowrap !important; } .pymland-plan__chips li { flex: 0 1 auto !important; min-width: 0 !important; padding: 4px 7px !important; font-size: 9.5px !important; letter-spacing: 1.05px !important; line-height: 1 !important; } .pymland-plan__meter { width: auto !important; max-width: none !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; } .pymland-plan__meter span { flex: 0 0 24px !important; width: 24px !important; min-width: 24px !important; height: 5px !important; } @media (max-width: 390px) { .pymland-plan__chips { gap: 3px !important; } .pymland-plan__chips li { padding-inline: 6px !important; font-size: 9px !important; letter-spacing: .85px !important; } } /* Security captcha — v1.6.6 */ .pymland-captcha { width: 100%; margin: 10px 0 0; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; color: var(--pymland-color-text-soft); font-size: 13px; line-height: 1.35; } .pymland-captcha__label { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 0; font-weight: 700; } .pymland-captcha__text { opacity: .86; } .pymland-captcha__challenge { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 10px; border-radius: 999px; background: rgba(31, 46, 77, .08); color: var(--pymland-color-text); font-weight: 900; letter-spacing: .2px; } .pymland-captcha__input { width: 88px; min-height: 38px; border: 1px solid rgba(31, 46, 77, .18); border-radius: 14px; padding: 8px 10px; background: var(--pymland-color-white); color: var(--pymland-color-text); font: inherit; font-weight: 800; text-align: center; outline: none; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; } .pymland-captcha__input:focus-visible { border-color: var(--pymland-color-primary); box-shadow: 0 0 0 4px rgba(31, 46, 77, .12); } .pymland-form.is-invalid .pymland-captcha__input:invalid { border-color: var(--pymland-color-danger); background: #fff6f4; } .pymland.pymland--premium .pymland-captcha { margin-top: -12px; } @media (max-width: 579px) { .pymland-captcha { justify-content: stretch; } .pymland-captcha__label { width: 100%; } .pymland-captcha__input { width: 100%; } }