/* ================================================================ DIGITAL NOMAD COUNTRY PROGRAM PAGE STYLES (PIXEL-PERFECT FIGMA) Figma Source: Frame 274:5 (1920px Canvas, 1800px Content) Prefix: .dn- ================================================================ */ :root { --dn-coral: #FB724E; --dn-coral-hover: #E95F3A; --dn-coral-light: #FB896A; --dn-coral-subtle: #FFF1EC; --dn-beige: #F6F1ED; --dn-beige-alt: #F4EFEA; --dn-dark: #2B2B2B; --dn-dark-hover: #1A1A1A; --dn-border: #E0E0E0; --dn-border-light: #ECEAE7; --dn-white: #FFFFFF; --dn-text: #2B2B2B; --dn-text-secondary: #555555; --dn-text-muted: #7A7A7A; --dn-font: 'Inter', 'Onest', -apple-system, BlinkMacSystemFont, sans-serif; --dn-font-title: 'Bounded', 'Unbounded', sans-serif; --dn-wrap: 1440px; } /* Page Base */ html { overflow-x: clip !important; } body.page-template-template-digital-nomad, body.page-template-template-digital-nomad-php, body.page-template-page-templatetemplate-digital-nomad-php { overflow-x: clip !important; overflow-y: visible !important; } .digital-nomad-page { font-family: var(--dn-font); font-size: 18px; line-height: 1.5; color: var(--dn-text); background: var(--dn-beige); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: visible !important; } .digital-nomad-page *, .digital-nomad-page *::before, .digital-nomad-page *::after { box-sizing: border-box; } .dn-wrap { width: calc(100% - 120px) !important; max-width: 1440px !important; margin-left: auto !important; margin-right: auto !important; padding: 0 !important; box-sizing: border-box !important; } @media (max-width: 1599px) { .dn-wrap { width: calc(100% - 60px) !important; max-width: 1440px !important; } } @media (max-width: 1199px) { .dn-wrap { width: calc(100% - 30px) !important; max-width: 1440px !important; } } @media (max-width: 768px) { .dn-wrap { width: calc(100% - 48px) !important; max-width: 327px !important; margin-left: auto !important; margin-right: auto !important; padding: 0 !important; } } /* Typography Helpers */ .dn-h2 { font-family: var(--dn-font-title); font-weight: 600; font-size: clamp(28px, 2.6vw, 45px); line-height: 1.18; letter-spacing: -0.01em; text-transform: uppercase; color: var(--dn-text); margin: 0 0 18px; } .dn-h2--sub { font-size: clamp(22px, 2vw, 36px); margin-bottom: 20px; } .dn-lead { font-size: clamp(16px, 1.1vw, 18px); line-height: 1.55; color: var(--dn-text); margin: 0 0 24px; } .dn-supertitle { display: inline-block; font-family: var(--dn-font); font-size: 15px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #111; margin-bottom: 12px; } /* Buttons */ .dn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--dn-font); font-size: 18px; font-weight: 500; line-height: 1; padding: 16px 32px; border-radius: 100px; border: 1.5px solid transparent; cursor: pointer; text-decoration: none; transition: all 0.22s ease; white-space: nowrap; } .dn-btn__arrow { display: inline-block; font-size: 20px; line-height: 1; transition: transform 0.2s ease; } .dn-btn:hover .dn-btn__arrow { transform: translateX(4px); } .dn-btn--coral { background: var(--dn-coral); color: var(--dn-white); border-color: var(--dn-coral); } .dn-btn--coral:hover { background: var(--dn-coral-hover); border-color: var(--dn-coral-hover); color: var(--dn-white); } .dn-btn--white { background: var(--dn-white); color: var(--dn-dark); border-color: var(--dn-white); } .dn-btn--white:hover { background: var(--dn-beige); color: var(--dn-dark); } .dn-btn--arrow-split { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px 6px 24px; } .dn-btn__circle-arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #FFF; color: var(--dn-coral); font-size: 16px; font-weight: 700; flex-shrink: 0; transition: transform var(--dn-ease); } .dn-btn--coral .dn-btn__circle-arrow { background: #FFF; color: var(--dn-coral); } .dn-btn--white .dn-btn__circle-arrow { background: var(--dn-coral); color: #FFF; } .dn-btn--arrow-split:hover .dn-btn__circle-arrow { transform: translateX(3px); } .dn-btn--hero-white { background: var(--dn-white); color: var(--dn-dark); padding: 18px 36px; font-weight: 600; } .dn-btn--hero-white:hover { background: var(--dn-beige); transform: translateY(-1px); } .dn-btn--hero-outline { background: transparent; border-color: var(--dn-white); color: var(--dn-white); padding: 18px 32px; } .dn-btn--hero-outline:hover { background: rgba(255, 255, 255, 0.15); } .dn-btn--outline-dark { background: var(--dn-white); border-color: #888888; color: var(--dn-dark); } .dn-btn--outline-dark:hover { border-color: var(--dn-dark); background: var(--dn-beige); } .dn-btn--outline-coral { background: transparent; border-color: var(--dn-coral); color: var(--dn-coral); } .dn-btn--outline-coral:hover { background: var(--dn-coral); color: var(--dn-white); } .dn-btn--block { width: 100%; } .dn-btn--pill { border-radius: 100px; } .dn-btn--sm { padding: 12px 24px; font-size: 15px; } /* ================================================================ READING PROGRESS BAR ================================================================ */ .dn-read-progress { position: fixed; top: 0; left: 0; height: 4px; background: var(--dn-coral); width: 0%; z-index: 10000; transition: width 0.1s linear; } /* ================================================================ SIGNATURE NOTCHED CARDS (FIGMA UNION CARDS) ================================================================ */ .dn-card { position: relative; background: var(--dn-white); border: none; border-radius: 30px; margin-top: 55px; } .dn-card__inner { padding: 40px !important; } @media (max-width: 992px) { .dn-card__inner { padding: 40px !important; } } .dn-card-notch { position: absolute; top: -40px; left: 45px; height: 41px; padding: 0 28px; display: inline-flex; align-items: center; justify-content: center; background: var(--dn-white); border: 1px solid var(--dn-border); border-bottom: 2px solid var(--dn-white); border-radius: 20px 20px 0 0; font-family: var(--dn-font); font-size: 15px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #111111; z-index: 3; } .dn-card-notch--coral { background: var(--dn-coral); color: var(--dn-white); border: 1px solid var(--dn-coral); border-bottom: 2px solid var(--dn-coral); } .dn-card-divider { border: none; border-top: 1px solid var(--dn-border); margin: 40px 0; } /* ================================================================ 1. HERO SECTION ================================================================ */ .dn-hero { padding: 30px 0 30px; } .dn-hero__container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; gap: 15px; align-items: stretch; } @media (max-width: 1400px) { .dn-hero__container { grid-template-columns: 1fr 1fr; } } @media (max-width: 992px) { .dn-hero__container { grid-template-columns: 1fr; } } /* Left Photo Card */ .dn-hero__visual { position: relative; min-height: 800px; border-radius: 30px; } @media (max-width: 1200px) { .dn-hero__visual { min-height: 650px; } } @media (max-width: 768px) { .dn-hero__visual { min-height: 520px; } } .dn-hero__img { width: 100%; height: 100%; border-radius: 30px; background-size: cover; background-position: center; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 40px; } .dn-hero__decor-text { position: absolute; left: 50%; bottom: 160px; transform: translateX(-50%); font-family: var(--dn-font-title); font-weight: 500; font-size: clamp(90px, 11vw, 200px); line-height: 0.9; text-transform: uppercase; color: transparent; background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 80%); -webkit-background-clip: text; background-clip: text; pointer-events: none; user-select: none; white-space: nowrap; } .dn-hero__pills { position: relative; z-index: 2; margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 768px) { .dn-hero__pills { grid-template-columns: 1fr; gap: 8px; } } .dn-hero__pill { background: var(--dn-beige); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; } .dn-hero__pill-val { font-family: var(--dn-font-title); font-weight: 600; font-size: clamp(18px, 1.4vw, 25px); color: var(--dn-dark); line-height: 1.15; } .dn-hero__pill-label { font-size: 15px; color: var(--dn-dark); line-height: 1.25; } /* Center Arrow Circle */ .dn-hero__circle-arrow { position: absolute; right: -48px; top: 50%; transform: translateY(-50%); width: 96px; height: 96px; border-radius: 50%; background: var(--dn-beige); display: flex; align-items: center; justify-content: center; z-index: 5; text-decoration: none; transition: transform 0.22s ease; } .dn-hero__circle-arrow-inner { width: 65px; height: 65px; border-radius: 50%; background: var(--dn-dark); display: flex; align-items: center; justify-content: center; color: var(--dn-white); transition: background 0.22s ease; } .dn-hero__circle-arrow:hover { transform: translateY(-50%) scale(1.05); } .dn-hero__circle-arrow:hover .dn-hero__circle-arrow-inner { background: var(--dn-coral); } @media (max-width: 1400px) { .dn-hero__circle-arrow { display: none; } } /* Right Coral Card */ .dn-hero__card { background: var(--dn-coral); border-radius: 30px; padding: 55px 60px 45px; color: var(--dn-white); display: flex; flex-direction: column; justify-content: space-between; min-height: 800px; position: relative; } @media (max-width: 1200px) { .dn-hero__card { padding: 40px 32px; min-height: 650px; } } @media (max-width: 768px) { .dn-hero__card { padding: 30px 20px; min-height: auto; } } .dn-hero__card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } .dn-crumbs { display: flex; align-items: center; gap: 12px; font-family: var(--dn-font); font-size: 14px; font-weight: 500; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.95); white-space: nowrap; } .dn-crumbs__link { color: rgba(255, 255, 255, 0.85); text-decoration: none; transition: color 0.2s ease; } .dn-crumbs__link:hover { color: #FFFFFF; } .dn-crumbs__sep { color: rgba(255, 255, 255, 0.5); user-select: none; } .dn-crumbs__current { color: #FFFFFF; } .dn-hero__flag-badge { width: 94px; height: 94px; border-radius: 50%; background: var(--dn-beige); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dn-hero__flag-badge img { width: 71px; height: 71px; border-radius: 50%; object-fit: cover; } @media (max-width: 768px) { .dn-hero__flag-badge { width: 60px; height: 60px; } .dn-hero__flag-badge img { width: 46px; height: 46px; } } .dn-hero__title { font-family: var(--dn-font-title); font-weight: 600; font-size: 50px !important; line-height: 1.2 !important; /* 60px in Figma 292:297 */ text-transform: uppercase; color: var(--dn-white); margin: 20px 0 0; display: flex; flex-direction: column; } .dn-hero__title span { font-size: 50px !important; line-height: 1.2 !important; } .dn-hero__subtitle { font-size: clamp(18px, 1.5vw, 24px); line-height: 1.4; color: rgba(255, 255, 255, 0.95); margin: 24px 0 35px; max-width: 650px; } .dn-hero__actions { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; margin-bottom: 30px; } .dn-btn--hero-outline { display: inline-flex; align-items: center; justify-content: center; height: 70px; padding: 0 40px; border-radius: 100px; border: 1px solid #FFFFFF; background: transparent; color: #FFFFFF; font-family: var(--dn-font); font-size: 20px; font-weight: 500; text-decoration: none; transition: all 0.22s ease; box-sizing: border-box; } .dn-btn--hero-outline:hover { background: rgba(255, 255, 255, 0.25); border-color: #FFFFFF; transform: translateY(-2px); } /* Split Button Component */ .dn-btn-split { display: inline-flex; align-items: center; gap: 0; border: none; background: transparent; padding: 0; cursor: pointer; text-decoration: none; user-select: none; transition: transform 0.22s ease; } .dn-btn-split:hover { transform: translateY(-2px); } .dn-btn-split--hero-white .dn-btn-split__label { display: inline-flex; align-items: center; justify-content: center; height: 70px; padding: 0 40px; background: #FFFFFF; color: var(--dn-dark); font-family: var(--dn-font); font-size: 20px; font-weight: 500; border-radius: 100px; transition: background 0.22s ease, color 0.22s ease; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } .dn-btn-split--hero-white .dn-btn-split__circle { display: inline-flex; align-items: center; justify-content: center; width: 70px; height: 70px; background: #FFFFFF; color: var(--dn-dark); border-radius: 50%; border: none; transition: background 0.22s ease, color 0.22s ease; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } .dn-btn-split--hero-white .dn-btn-split__circle svg { transition: transform 0.22s ease; } .dn-btn-split--hero-white:hover .dn-btn-split__label, .dn-btn-split--hero-white:hover .dn-btn-split__circle { background: #F4EFEA; color: var(--dn-dark-hover); } .dn-btn-split--hero-white:hover .dn-btn-split__circle svg { transform: translateX(4px); } .dn-hero__trust-badge { background: var(--dn-coral-light); border-radius: 12px; padding: 14px 24px; display: inline-flex; align-items: center; gap: 16px; align-self: flex-end; margin-top: auto; } .dn-hero__trust-percent { font-family: var(--dn-font-title); font-weight: 600; font-size: clamp(32px, 2.8vw, 48px); line-height: 1; color: var(--dn-white); } .dn-hero__trust-text { font-size: 16px; line-height: 1.25; color: var(--dn-white); max-width: 140px; } /* ================================================================ 2-COLUMN LAYOUT: STICKY TOC + ARTICLE ================================================================ */ .dn-layout { display: grid; grid-template-columns: 319px minmax(0, 1fr); gap: 30px; align-items: start; margin-top: 20px; margin-bottom: 50px; width: 100%; box-sizing: border-box; } @media (max-width: 1200px) { .dn-layout { grid-template-columns: 340px minmax(0, 1fr); gap: 20px; } } @media (max-width: 960px) { .dn-layout { grid-template-columns: 1fr; } } /* Left TOC Sidebar (Sticky) */ .dn-toc-wrap { position: sticky; top: 120px; align-self: start; z-index: 20; width: 100%; box-sizing: border-box; } .dn-toc-card { position: relative; background: var(--dn-white); border: none; border-radius: 30px; padding: 45px 35px 35px; box-shadow: none; margin-top: 55px; } .dn-toc__list { list-style: none; margin: 0 0 35px 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .dn-toc__list li { margin: 0; padding: 0; list-style: none; } .dn-toc__list a { display: block; font-family: var(--dn-font); font-size: 18px; line-height: 1.35; font-weight: 400; color: var(--dn-text); text-decoration: none; padding: 2px 0; transition: color 0.18s ease, font-weight 0.18s ease; } .dn-toc__list a:hover { color: var(--dn-coral); } .dn-toc__list a.is-active { font-weight: 600; color: var(--dn-dark); } .dn-toc-cta { background: #2C2C2C; border-radius: 18px; padding: 24px 20px; color: #FFF; } .dn-toc-cta strong { display: block; font-family: var(--dn-font-title); font-weight: 600; font-size: 20px; line-height: 1.2; margin-bottom: 8px; color: #FFF; } .dn-toc-cta p { font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, 0.85); margin: 0 0 16px; } /* Right Content Column */ .dn-article { min-width: 0; width: 100%; max-width: none; box-sizing: border-box; display: flex; flex-direction: column; gap: 30px; } /* Base Card with Protruding Union Tab */ .dn-card { position: relative; background: var(--dn-white); border: none; border-radius: 30px; padding: 0; margin-top: 55px; margin-bottom: 50px; box-shadow: none; } @media (max-width: 768px) { .dn-card { padding: 0; border-radius: 24px; margin-top: 45px; margin-bottom: 35px; } } /* Notch Tab (Union Shape - Standard new-design.css implementation) */ .dn-card-notch { position: absolute; top: -52px; left: 60px; height: 52px; background: #FFFFFF; border: none; border-top-left-radius: 30px; border-top-right-radius: 30px; padding: 0 37px; display: flex; align-items: center; justify-content: center; font-family: var(--dn-font); font-weight: 500; font-size: 20px; line-height: 1; text-transform: uppercase; letter-spacing: 0.04em; color: #000000; white-space: nowrap; z-index: 5; } .dn-card-notch::before { content: ''; position: absolute; bottom: 0; left: -30px; width: 30px; height: 30px; background: radial-gradient(circle at top left, transparent 29.5px, #FFFFFF 30px); pointer-events: none; z-index: 5; } .dn-card-notch::after { content: ''; position: absolute; bottom: 0; right: -30px; width: 30px; height: 30px; background: radial-gradient(circle at top right, transparent 29.5px, #FFFFFF 30px); pointer-events: none; z-index: 5; } @media (max-width: 768px) { .dn-card-notch { top: -42px; left: 20px; height: 44px; font-size: 15px; padding: 0 20px; border-radius: 18px 18px 0 0; } } .dn-criteria-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 992px) { .dn-criteria-grid { grid-template-columns: 1fr; } } .dn-criterion-card { background: var(--dn-beige); border-radius: 12px; padding: 24px 22px; display: flex; flex-direction: column; } .dn-criterion-card__icon { width: 44px; height: 44px; border-radius: 6px; background: var(--dn-coral); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .dn-criterion-card__title { font-family: var(--dn-font-title); font-weight: 600; font-size: 18px; line-height: 1.3; text-transform: uppercase; color: var(--dn-dark); margin-bottom: 10px; } .dn-criterion-card__val { font-size: 16px; line-height: 1.45; color: var(--dn-dark); margin-top: auto; } /* Quiz Block */ .dn-quiz__row { display: grid; grid-template-columns: 465fr 800fr; gap: 40px; align-items: stretch; } @media (max-width: 992px) { .dn-quiz__row { grid-template-columns: 1fr; } } .dn-quiz__photo { border-radius: 24px; background-size: cover; background-position: center; min-height: 400px; } .dn-quiz__progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 30px; } .dn-quiz__bar { height: 6px; border-radius: 3px; background: var(--dn-beige); transition: background 0.25s ease; } .dn-quiz__bar.is-active { background: var(--dn-coral); } .dn-quiz__q-title { font-family: var(--dn-font-title); font-weight: 600; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.3; color: var(--dn-dark); margin: 0 0 12px; } .dn-quiz__q-hint { font-size: 17px; color: var(--dn-text-secondary); margin: 0 0 24px; } .dn-check__q { display: none; } .dn-check__q.is-active { display: block; } .dn-check__answers { display: flex; gap: 16px; } .dn-check__result { display: none; background: var(--dn-beige); border-radius: 18px; padding: 30px; margin-top: 10px; } .dn-check__result.is-active { display: block; } /* ================================================================ SECTION 2: КАЛЬКУЛЯТОР ДОХОДА ================================================================ */ .dn-calc { display: grid; grid-template-columns: 830fr 405fr; gap: 20px; align-items: stretch; } @media (max-width: 992px) { .dn-calc { grid-template-columns: 1fr; } } .dn-calc__controls { background: var(--dn-beige); border-radius: 24px; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; } .dn-calc__inputs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; } @media (max-width: 600px) { .dn-calc__inputs-grid { grid-template-columns: 1fr; } } .dn-calc__field { background: var(--dn-white); border-radius: 16px; padding: 24px 26px; display: flex; align-items: center; justify-content: space-between; } .dn-calc__label { font-size: 22px; font-weight: 500; color: var(--dn-dark); } /* Custom Toggle Switch */ .dn-toggle { position: relative; display: inline-block; width: 80px; height: 42px; cursor: pointer; } .dn-toggle input { opacity: 0; width: 0; height: 0; } .dn-toggle__slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--dn-beige); border-radius: 30px; transition: 0.25s; } .dn-toggle__slider::before { position: absolute; content: ""; height: 32px; width: 32px; left: 5px; bottom: 5px; background: var(--dn-coral); border-radius: 50%; transition: 0.25s; } .dn-toggle input:checked + .dn-toggle__slider::before { transform: translateX(38px); } /* Stepper */ .dn-stepper { display: flex; align-items: center; gap: 16px; } .dn-stepper__btn { width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--dn-beige); color: var(--dn-dark); font-size: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease; } .dn-stepper__btn:hover { background: var(--dn-border); } .dn-stepper__val { font-size: 26px; font-weight: 600; color: var(--dn-dark); min-width: 24px; text-align: center; } .dn-calc__note { font-size: 15px; color: #555555; margin: 0; } /* Right Dark Summary (#2C2C2C) */ .dn-calc__summary { background: var(--dn-dark); border-radius: 24px; padding: 36px 32px; display: flex; flex-direction: column; justify-content: space-between; color: var(--dn-white); } /* Calculator Desktop vs Mobile Mode Switch */ .dn-calc__summary-mobile { display: none !important; } .dn-calc__btn-submit--mobile { display: none !important; } .dn-calc__note--mobile { display: none !important; } .dn-calc__summary-desktop { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; } .dn-calc__btn-submit--desktop { display: flex !important; } .dn-calc__note--desktop { display: block !important; } .dn-calc__amount { font-family: var(--dn-font-title); font-weight: 600; font-size: clamp(34px, 3.2vw, 44px); color: var(--dn-white); line-height: 1.1; margin-bottom: 8px; } .dn-calc__caption { font-size: 17px; line-height: 1.35; color: rgba(255, 255, 255, 0.85); margin-bottom: 24px; } /* ================================================================ SECTION 3: ГДЕ ПОДАВАТЬ ================================================================ */ .dn-sec-head--with-thumb { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; } .dn-sec-head__thumb { border-radius: 18px; object-fit: cover; } @media (max-width: 768px) { .dn-sec-head__thumb { display: none; } } .dn-where-table-wrap { overflow-x: auto; margin-bottom: 24px; } .dn-where-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--dn-border); border-radius: 16px; overflow: hidden; } .dn-where-table th, .dn-where-table td { padding: 22px 26px; text-align: left; border-bottom: 1px solid var(--dn-border); border-right: 1px solid var(--dn-border); } .dn-where-table th:last-child, .dn-where-table td:last-child { border-right: none; } .dn-where-table tr:last-child td { border-bottom: none; } .dn-where-th--title { width: 25%; font-size: 16px; font-weight: 600; text-transform: uppercase; color: #777; background: var(--dn-white); } .dn-where-th--beige { width: 37.5%; background: var(--dn-beige); } .dn-where-th--coral { width: 37.5%; background: var(--dn-coral); color: var(--dn-white); } .dn-where-th__content { display: flex; align-items: center; gap: 12px; font-family: var(--dn-font-title); font-weight: 600; font-size: 20px; text-transform: uppercase; } .dn-where-th__icon { width: 40px; height: 40px; border-radius: 6px; background: var(--dn-coral); display: flex; align-items: center; justify-content: center; } .dn-where-th__icon--white { background: var(--dn-white); } .dn-where-td--label { font-weight: 500; color: #666; } .dn-where-td--val { font-size: 18px; color: var(--dn-dark); } .dn-where-tr--tint { background: var(--dn-beige); } .dn-alert-box { display: flex; align-items: center; gap: 20px; padding: 20px 24px; border-top: 1px solid var(--dn-border); } @media (max-width: 600px) { .dn-alert-box { flex-direction: column; align-items: flex-start; } } .dn-alert-box__badge { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .dn-alert-box__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--dn-coral); color: var(--dn-white); font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .dn-alert-box__title { font-size: 20px; font-weight: 600; color: var(--dn-dark); } .dn-alert-box__text { font-size: 16px; line-height: 1.5; color: var(--dn-dark); margin: 0; } /* ================================================================ SECTION 4: СТОИМОСТЬ И НАЛОГИ ================================================================ */ .dn-price-row { display: grid; grid-template-columns: 587fr 648fr; gap: 24px; align-items: stretch; } @media (max-width: 992px) { .dn-price-row { grid-template-columns: 1fr; } } .dn-price-card { background: var(--dn-dark); border-radius: 24px; padding: 36px; color: var(--dn-white); display: flex; flex-direction: column; justify-content: space-between; } .dn-price-card__header { display: flex; justify-content: space-between; align-items: center; gap: 16px; } .dn-price-card__title { font-family: var(--dn-font-title); font-weight: 600; font-size: 24px; text-transform: uppercase; color: var(--dn-white); margin: 0; } .dn-price-card__avatar { width: 56px; height: 56px; border-radius: 50%; background-size: cover; background-position: center; border: 2px solid var(--dn-white); } .dn-price-card__val { font-family: var(--dn-font-title); font-weight: 600; font-size: clamp(34px, 3.2vw, 42px); color: var(--dn-white); margin: 24px 0 30px; } .dn-advantage-card { background: var(--dn-beige); border-radius: 24px; padding: 36px; display: flex; flex-direction: column; justify-content: space-between; } .dn-advantage-card__tag { font-size: 20px; font-weight: 600; color: var(--dn-dark); margin-bottom: 12px; } .dn-advantage-card__text { font-size: 18px; line-height: 1.5; color: var(--dn-dark); margin: 0 0 24px; } .dn-advantage-card__photo { height: 170px; border-radius: 16px; background-size: cover; background-position: center; } /* ================================================================ SECTION 5: ГРАНИЦЫ — ТОЛЬКО НА КАРТЕ ================================================================ */ .dn-services-block { margin-top: 60px; } .dn-services-block__head { margin-bottom: 28px; } .dn-subtitle { font-size: 20px; color: var(--dn-text); margin: 0; } .dn-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 992px) { .dn-services-grid { grid-template-columns: 1fr; } } .dn-service-tile { background: var(--dn-white); border: 1px solid var(--dn-border); border-radius: 24px; padding: 18px; text-decoration: none; display: flex; flex-direction: column; transition: transform 0.22s ease, box-shadow 0.22s ease; } .dn-service-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); } .dn-service-tile__visual { height: 220px; border-radius: 18px; background-size: cover; background-position: center; position: relative; margin-bottom: 20px; } .dn-service-tile__arrow { position: absolute; right: 16px; bottom: 16px; width: 48px; height: 48px; border-radius: 50%; background: var(--dn-coral); color: var(--dn-white); display: flex; align-items: center; justify-content: center; font-size: 22px; transition: transform 0.2s ease; } .dn-service-tile:hover .dn-service-tile__arrow { transform: scale(1.1); } .dn-service-tile__title { font-family: var(--dn-font-title); font-weight: 600; font-size: 22px; line-height: 1.25; text-transform: uppercase; color: var(--dn-dark); margin: 0 0 8px; } .dn-service-tile__desc { font-size: 17px; color: #111; margin: 0; } /* ================================================================ SECTION 6: ОСНОВНЫЕ ДОКУМЕНТЫ ================================================================ */ .dn-docs-layout { display: grid; grid-template-columns: 324fr 850fr; gap: 28px; align-items: stretch; margin-bottom: 24px; } @media (max-width: 992px) { .dn-docs-layout { grid-template-columns: 1fr; } } .dn-docs-visual { border-radius: 16px; background-size: cover; background-position: center; min-height: 380px; } .dn-docs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 600px) { .dn-docs-grid { grid-template-columns: 1fr; } } .dn-doc-item { background: var(--dn-beige); border: 1px solid var(--dn-border); border-radius: 12px; padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start; } .dn-doc-item__check { width: 26px; height: 26px; border-radius: 6px; background: var(--dn-coral); color: var(--dn-white); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; flex-shrink: 0; margin-top: 2px; } .dn-doc-item__title { font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--dn-dark); } .dn-doc-item__hint { font-size: 15px; color: #666; margin-top: 4px; } .dn-docs-notice { background: var(--dn-dark); border-radius: 12px; padding: 20px 26px; display: flex; align-items: center; gap: 16px; } .dn-docs-notice__bar { width: 4px; height: 34px; border-radius: 2px; background: var(--dn-coral); flex-shrink: 0; } .dn-docs-notice__text { font-size: 18px; color: var(--dn-white); } /* ================================================================ SECTION 7: ЭТАПЫ И FAQ ================================================================ */ .dn-steps-faq-block { margin-top: 60px; } .dn-steps-faq-block__head { margin-bottom: 28px; } .dn-steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 60px; } @media (max-width: 1200px) { .dn-steps-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 650px) { .dn-steps-grid { grid-template-columns: 1fr; } } .dn-step-card { background: var(--dn-white); border-radius: 24px; padding: 28px 24px; position: relative; display: flex; flex-direction: column; min-height: 270px; } .dn-step-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .dn-step-dots { display: flex; gap: 6px; align-items: center; } .dn-step-dot { width: 8px; height: 8px; border-radius: 50%; background: #E5E5E5; } .dn-step-dot.is-active { background: var(--dn-coral); } .dn-step-icon { width: 42px; height: 42px; border-radius: 12px; background: #FDF1ED; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dn-step-card__title { font-family: var(--dn-font-title); font-weight: 600; font-size: 19px; line-height: 1.25; text-transform: uppercase; color: var(--dn-dark); margin: 0 0 12px; } .dn-step-card__desc { font-size: 15px; line-height: 1.45; color: #666; margin: 0; } .dn-step-card__photo { margin-top: 16px; height: 95px; border-radius: 14px; background-size: cover; background-position: center; } /* FAQ Section */ .dn-faq-section { margin-top: 40px; } .dn-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 992px) { .dn-faq-grid { grid-template-columns: 1fr; } } .dn-faq-card { background: var(--dn-white); border: 1px solid var(--dn-border); border-radius: 20px; padding: 24px 28px; cursor: pointer; } .dn-faq-card__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; } .dn-faq-card__q { font-size: 21px; font-weight: 500; line-height: 1.35; color: #111; } .dn-faq-card__toggle { width: 48px; height: 48px; border-radius: 8px; border: 1px solid var(--dn-border); background: var(--dn-beige); font-size: 26px; color: var(--dn-dark); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .dn-faq-card__answer { display: none; margin-top: 18px; } .dn-faq-card.is-open .dn-faq-card__answer { display: block; } .dn-faq-card__answer-box { background: var(--dn-beige); border-radius: 14px; padding: 20px 24px; display: flex; gap: 16px; } .dn-faq-card__accent-bar { width: 4px; border-radius: 2px; background: var(--dn-coral); flex-shrink: 0; } .dn-faq-card__answer-box p { font-size: 18px; line-height: 1.5; color: #111; margin: 0; } /* ================================================================ BAND 1: ПОЧЕМУ МЫ (В ЦИФРАХ) ================================================================ */ .dn-band { margin: 60px 0; } .dn-card--band { margin-top: 55px; } .dn-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 30px; } @media (max-width: 992px) { .dn-why-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 576px) { .dn-why-grid { grid-template-columns: 1fr; } } .dn-why-card { background: var(--dn-beige); border: 1px solid var(--dn-border); border-radius: 20px; padding: 30px 26px; display: flex; flex-direction: column; justify-content: space-between; } .dn-why-card__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .dn-why-card__val { font-family: var(--dn-font-title); font-weight: 600; font-size: clamp(32px, 2.5vw, 42px); color: var(--dn-dark); line-height: 1; } .dn-why-card__icon-box { width: 44px; height: 44px; border-radius: 12px; background: var(--dn-coral); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dn-why-card__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--dn-coral); } .dn-why-card__label { font-size: 18px; line-height: 1.45; color: #111; } /* ================================================================ BAND 2: ТАБЛИЦА СТРАН ================================================================ */ .dn-band-head-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; gap: 20px; } @media (max-width: 768px) { .dn-band-head-row { flex-direction: column; align-items: flex-start; } } .dn-countries-table-wrap { overflow-x: auto; } .dn-countries-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--dn-beige); border: 1px solid var(--dn-border); border-radius: 20px; overflow: hidden; } .dn-countries-table th, .dn-countries-table td { padding: 24px 30px; text-align: left; border-bottom: 1px solid var(--dn-border); } .dn-countries-table th { font-size: 18px; font-weight: 600; text-transform: uppercase; color: #111; } .dn-countries-table tr:last-child td { border-bottom: none; } .dn-countries-table tr.is-selected { background: var(--dn-white); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); } .dn-ct-col-country { display: flex; align-items: center; gap: 16px; } .dn-ct-flag { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; } .dn-ct-name { font-family: var(--dn-font-title); font-weight: 600; font-size: 24px; text-transform: uppercase; color: var(--dn-dark); } .dn-ct-col-time { font-size: 22px; font-weight: 500; color: #111; } .dn-ct-col-price { font-family: var(--dn-font-title); font-weight: 600; font-size: 24px; text-transform: uppercase; color: var(--dn-dark); } .dn-ct-badge-here { display: inline-block; font-size: 18px; font-weight: 700; text-transform: uppercase; color: var(--dn-coral); } .dn-ct-link { font-size: 18px; font-weight: 500; color: #111; text-decoration: none; } .dn-ct-link:hover { color: var(--dn-coral); } /* ================================================================ BAND 3: КЕЙС И ОТЗЫВЫ ================================================================ */ .dn-proof-row { display: grid; grid-template-columns: 829fr 832fr; gap: 24px; align-items: stretch; } @media (max-width: 992px) { .dn-proof-row { grid-template-columns: 1fr; } } .dn-case-card { background: var(--dn-dark); border-radius: 24px; padding: 40px 0 40px 40px; color: var(--dn-white); display: grid; grid-template-columns: 1fr 293px; gap: 24px; align-items: center; position: relative; overflow: hidden; } @media (max-width: 768px) { .dn-case-card { grid-template-columns: 1fr; padding: 30px; } } .dn-case-card__tag { font-size: 20px; font-weight: 500; color: var(--dn-coral); margin-bottom: 16px; } .dn-case-card__title { font-family: var(--dn-font-title); font-weight: 600; font-size: clamp(22px, 2vw, 30px); line-height: 1.25; color: var(--dn-white); margin: 0 0 20px; } .dn-case-card__result { font-size: 20px; color: var(--dn-white); margin: 0 0 30px; } .dn-case-card__actions { display: flex; align-items: center; gap: 16px; } .dn-case-card__badge { background: var(--dn-beige); color: var(--dn-dark); border-radius: 100px; padding: 12px 20px; font-size: 16px; font-weight: 500; } .dn-case-card__media { height: 100%; min-height: 320px; border-radius: 20px 0 0 20px; background-size: cover; background-position: center; } .dn-reviews-col { display: flex; flex-direction: column; gap: 20px; } .dn-review-item { background: var(--dn-white); border: 1px solid var(--dn-border); border-radius: 20px; padding: 30px 32px; } .dn-review-item__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } .dn-review-item__author { display: flex; align-items: center; gap: 16px; } .dn-review-item__avatar { width: 50px; height: 50px; border-radius: 50%; background: var(--dn-beige); color: var(--dn-coral); font-family: var(--dn-font-title); font-weight: 600; font-size: 20px; display: flex; align-items: center; justify-content: center; } .dn-review-item__name { font-size: 22px; font-weight: 700; color: var(--dn-dark); } .dn-review-item__country { font-size: 16px; color: #888; } .dn-review-item__quote { font-family: var(--dn-font-title); font-size: 55px; line-height: 0.5; color: var(--dn-coral); } .dn-review-item__text { font-size: 18px; line-height: 1.5; color: var(--dn-dark); margin: 0; } /* ================================================================ BAND 4: БЕСПЛАТНАЯ КОНСУЛЬТАЦИЯ (ФОРМА) ================================================================ */ .dn-consult-card { background: var(--dn-white); border-radius: 30px; padding: 60px; display: grid; grid-template-columns: 800fr 830fr; gap: 50px; align-items: center; position: relative; overflow: hidden; } @media (max-width: 1200px) { .dn-consult-card { grid-template-columns: 1fr; padding: 36px 24px; } } .dn-consult-card__items { display: flex; flex-direction: column; gap: 16px; margin: 32px 0 24px; } .dn-consult-bullet { background: var(--dn-beige); border: 1px solid var(--dn-border); border-radius: 20px; padding: 16px 22px; display: flex; align-items: center; gap: 16px; font-size: 19px; font-weight: 500; color: var(--dn-dark); } .dn-consult-bullet__icon { width: 38px; height: 38px; border-radius: 6px; background: var(--dn-coral); color: var(--dn-white); font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dn-consult-card__bg-photo { height: 160px; border-radius: 20px; background-size: cover; background-position: center; margin-top: 20px; } .dn-consult-card__route-graphic { position: relative; height: 110px; margin-top: 15px; background-image: radial-gradient(circle, #FB724E 1.5px, transparent 1.5px); background-size: 16px 16px; border-radius: 16px; opacity: 0.85; } .dn-consult-avatar { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 3px solid #FFF; background-size: cover; background-position: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .dn-consult-avatar--1 { top: 10px; left: 20%; } .dn-consult-avatar--2 { bottom: 10px; right: 25%; } .dn-consult-card__form-card { background: var(--dn-beige); border: 1px solid var(--dn-border); border-radius: 24px; padding: 40px; } @media (max-width: 600px) { .dn-consult-card__form-card { padding: 24px 18px; } } .dn-lead-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; } @media (max-width: 600px) { .dn-lead-form__row { grid-template-columns: 1fr; } } .dn-form-field { display: flex; flex-direction: column; gap: 8px; } .dn-form-field__label { font-size: 16px; font-weight: 500; color: var(--dn-dark); } .dn-input { width: 100%; height: 60px; background: var(--dn-white); border: 1px solid var(--dn-border); border-radius: 16px; padding: 0 20px; font-size: 17px; color: var(--dn-dark); outline: none; transition: border-color 0.2s ease; } .dn-input:focus { border-color: var(--dn-coral); } .dn-input-phone-wrap { position: relative; display: flex; align-items: center; } .dn-phone-flag { position: absolute; left: 18px; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; pointer-events: none; } .dn-input--phone { padding-left: 54px; } .dn-form-channels { margin-bottom: 28px; } .dn-form-channels__title { display: block; font-size: 17px; font-weight: 500; color: var(--dn-dark); margin-bottom: 12px; } .dn-channels-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 500px) { .dn-channels-options { grid-template-columns: 1fr; } } .dn-channel-pill { background: var(--dn-white); border: 1px solid var(--dn-border); border-radius: 16px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: border-color 0.2s ease; } .dn-channel-pill input { display: none; } .dn-channel-pill__radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--dn-border); display: flex; align-items: center; justify-content: center; transition: border-color 0.2s ease; } .dn-channel-pill input:checked + .dn-channel-pill__radio { border-color: var(--dn-coral); } .dn-channel-pill input:checked + .dn-channel-pill__radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dn-coral); } .dn-channel-pill.is-active, .dn-channel-pill:has(input:checked) { border-color: var(--dn-coral); } .dn-channel-pill__text { font-size: 17px; font-weight: 500; color: var(--dn-dark); } .dn-btn--submit { width: 100%; padding: 18px 32px; font-size: 19px; margin-bottom: 16px; } .dn-lead-form__legal { font-size: 14px; line-height: 1.4; color: var(--dn-text-secondary); margin: 0; text-align: center; } .dn-lead-form__legal a { color: var(--dn-dark); text-decoration: underline; } /* ================================================================ BAND 5: ДРУГИЕ СТРАНЫ ================================================================ */ .dn-countries-cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 1200px) { .dn-countries-cards-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .dn-countries-cards-grid { grid-template-columns: 1fr; } } .dn-country-card { background: var(--dn-white); border: 1px solid var(--dn-border); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; } .dn-country-card__media { height: 200px; border-radius: 16px; background-size: cover; background-position: center; position: relative; margin-bottom: 18px; clip-path: url(#dnCountryCardClip); -webkit-clip-path: url(#dnCountryCardClip); } .dn-country-card__flag { position: absolute; top: 4px; right: 4px; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; z-index: 2; } .dn-country-card__name { font-family: var(--dn-font-title); font-weight: 600; font-size: 24px; text-transform: uppercase; color: var(--dn-dark); margin: 0 0 6px; } .dn-country-card__type { font-size: 17px; color: #111; margin: 0 0 16px; } .dn-country-card__badge { background: var(--dn-white); border: 1px solid var(--dn-border); border-radius: 10px; padding: 10px 14px; font-size: 16px; color: #111; margin-bottom: 20px; } .dn-country-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; } .dn-country-card__more { font-size: 16px; font-weight: 500; color: #111; text-decoration: none; } .dn-country-card__more:hover { color: var(--dn-coral); } /* ================================================================ BAND 6: ФИНАЛЬНЫЙ CTA (ЭКСПЕРТ) ================================================================ */ .dn-expert-cta-card { background: var(--dn-coral); border-radius: 30px; padding: 60px; display: grid; grid-template-columns: 800fr 800fr; gap: 40px; align-items: center; color: var(--dn-white); position: relative; overflow: hidden; min-height: 550px; } @media (max-width: 992px) { .dn-expert-cta-card { grid-template-columns: 1fr; padding: 36px 24px; } } .dn-expert-cta-card__tag { font-size: 20px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); margin-bottom: 16px; } .dn-expert-cta-card__title { font-family: var(--dn-font-title); font-weight: 600; font-size: clamp(32px, 3.2vw, 48px); line-height: 1.15; text-transform: uppercase; color: var(--dn-white); margin: 0 0 20px; } .dn-expert-cta-card__desc { font-size: 20px; line-height: 1.45; color: rgba(255, 255, 255, 0.95); margin: 0 0 36px; max-width: 580px; } .dn-expert-cta-buttons { display: flex; gap: 16px; flex-wrap: wrap; } .dn-expert-cta-buttons .dn-btn--white { background: var(--dn-white); color: var(--dn-dark); font-weight: 700; padding: 16px 36px; font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 100px; } .dn-expert-cta-buttons .dn-btn--white:hover { background: #FFF; color: var(--dn-coral); transform: translateY(-2px); } .dn-expert-cta-card__watermark { margin-bottom: 24px; } .dn-expert-cta-card__media { height: 100%; min-height: 420px; border-radius: 20px; background-size: cover; background-position: center; } /* ================================================================ FLOATING BOTTOM DOCK PILL (Фиксация элемента 2) ================================================================ */ .dn-dock { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120px); background: rgba(29, 29, 29, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 100px; padding: 10px 14px 10px 24px; display: flex; align-items: center; gap: 18px; z-index: 9999; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease; opacity: 0; pointer-events: none; } .dn-dock.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; } .dn-dock__dot { width: 10px; height: 10px; border-radius: 50%; background: #34C759; flex-shrink: 0; } .dn-dock__text { font-size: 16px; color: var(--dn-white); white-space: nowrap; } .dn-dock__text b { color: var(--dn-white); font-weight: 700; } .dn-dock__divider { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.2); } .dn-dock__tg { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.9); text-decoration: none; font-size: 15px; font-weight: 500; transition: color 0.2s ease; } .dn-dock__tg:hover { color: var(--dn-white); } .dn-dock__btn { padding: 12px 24px; font-size: 15px; } @media (max-width: 768px) { .dn-dock { display: none !important; } } /* Mobile Sticky Bar */ .dn-sticky-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--dn-white); border-top: 1px solid var(--dn-border); padding: 12px 16px; gap: 12px; z-index: 9998; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08); } .dn-sticky-cta .dn-btn { flex: 1; padding: 14px 20px; font-size: 16px; } @media (max-width: 768px) { .dn-sticky-cta { display: flex; } } /* ================================================================ NEW FIGMA 292:297 & 292:953 PIXEL-PERFECT COMPLIANCE STYLES ================================================================ */ /* Hero Flag badge & mobile pills mobile vs desktop */ .dn-hero__flag-badge--mobile { display: none !important; } .dn-hero__pills--mobile { display: none !important; } .dn-hero__pill--mobile-trust { display: none !important; } .dn-expert-mobile-card { display: none !important; } /* Desktop 1440px layout sub-elements (matching 1440px header container) */ @media (min-width: 769px) { .dn-hero__container { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; } .dn-hero__visual, .dn-hero__card { width: 100% !important; max-width: none !important; } .dn-hero__pills--desktop { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; left: 20px !important; right: 20px !important; bottom: 20px !important; } .dn-hero__pill { width: 100% !important; max-width: none !important; } .dn-layout { display: grid !important; grid-template-columns: 320px minmax(0, 1fr) !important; gap: 24px !important; } .dn-toc-wrap { width: 320px !important; max-width: 320px !important; } .dn-article { width: 100% !important; max-width: none !important; min-width: 0 !important; } .dn-card { width: 100% !important; max-width: none !important; } .dn-card__inner { padding: 40px !important; width: 100% !important; } /* Section 1 */ .dn-banner-banner { width: 100% !important; max-width: none !important; height: 280px !important; margin-bottom: 20px !important; } .dn-criteria-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; width: 100% !important; max-width: none !important; } .dn-criterion-card { width: 100% !important; max-width: none !important; min-height: 168px !important; } /* Section 2 Quiz */ .dn-quiz-block { width: 100% !important; max-width: none !important; } .dn-quiz-block .dn-quiz__row { display: grid !important; grid-template-columns: 360px 1fr !important; gap: 20px !important; width: 100% !important; } .dn-quiz-block .dn-quiz__photo { width: 100% !important; max-width: none !important; } .dn-quiz-block .dn-quiz__content { width: 100% !important; max-width: none !important; } /* Section 3 Calculator */ .dn-calc { display: grid !important; grid-template-columns: 1fr 340px !important; gap: 20px !important; width: 100% !important; max-width: none !important; } .dn-calc__controls { width: 100% !important; } .dn-calc__summary { width: 340px !important; } /* Section 4 Where to apply table */ .dn-where-table-wrap, .dn-where-table { width: 100% !important; max-width: none !important; } /* Section 5 Price & Advantages */ .dn-price-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; width: 100% !important; max-width: none !important; } .dn-price-card, .dn-advantage-card { width: 100% !important; max-width: none !important; } /* Section 6 Services */ .dn-services-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; width: 100% !important; max-width: none !important; } .dn-service-tile { width: 100% !important; max-width: none !important; } /* Section 7 Documents */ .dn-docs-layout { display: grid !important; grid-template-columns: 300px 1fr !important; gap: 20px !important; width: 100% !important; max-width: none !important; } .dn-docs-visual { width: 100% !important; max-width: none !important; height: 100% !important; } .dn-docs-right { width: 100% !important; } .dn-docs-columns { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; width: 100% !important; } .dn-doc-item { width: 100% !important; } .dn-docs-notice { width: 100% !important; max-width: none !important; } /* Section 8 Steps */ .dn-steps-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; width: 100% !important; max-width: none !important; } .dn-step-card { width: 100% !important; max-width: none !important; } /* Bottom Bands max-width 1440px */ .dn-card--band, .dn-consult-card { width: 100% !important; max-width: 1440px !important; } .dn-why-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; width: 100% !important; max-width: none !important; } .dn-proof-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; width: 100% !important; max-width: none !important; } .dn-case-card, .dn-reviews-col, .dn-review-item { width: 100% !important; max-width: none !important; } } /* ================================================================ MOBILE PIXEL-PERFECT OVERRIDES (FIGMA 292:953, 375px CANVAS) ================================================================ */ @media (max-width: 768px) { .dn-wrap { width: calc(100% - 48px) !important; max-width: 327px !important; margin-left: auto !important; margin-right: auto !important; padding: 0 !important; } /* Hero Mobile */ .dn-hero { padding: 10px 0 20px !important; } .dn-hero__container { display: flex !important; flex-direction: column !important; gap: 15px !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; box-sizing: border-box !important; } /* Order: Coral Card 1st, Photo Card 2nd, Pills 3rd */ .dn-hero__card { order: 1 !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 418px !important; border-radius: 24px !important; padding: 24px 20px !important; box-sizing: border-box !important; } .dn-hero__card .dn-hero__flag-badge { display: none !important; } .dn-crumbs { font-size: 11px !important; gap: 6px !important; } .dn-hero__title { font-size: 28px !important; line-height: 1.1 !important; margin: 12px 0 10px !important; } .dn-hero__subtitle { font-size: 14px !important; line-height: 1.35 !important; margin: 0 0 20px !important; } .dn-hero__actions { width: 100% !important; gap: 10px !important; align-items: stretch !important; } .dn-btn--hero-outline { width: 100% !important; max-width: 287px !important; height: 50px !important; padding: 0 20px !important; font-size: 15px !important; } .dn-btn-split { width: 100% !important; max-width: 287px !important; height: 50px !important; } .dn-btn-split__label { height: 50px !important; font-size: 15px !important; padding: 0 20px !important; } .dn-btn-split__circle { width: 50px !important; height: 50px !important; } .dn-hero__trust-badge { display: none !important; } /* Photo Card */ .dn-hero__visual { order: 2 !important; width: 100% !important; max-width: 100% !important; height: 317px !important; min-height: 317px !important; border-radius: 24px !important; overflow: hidden !important; margin-top: 0 !important; box-sizing: border-box !important; } .dn-hero__circle-arrow { display: none !important; } .dn-hero__flag-badge--mobile { display: flex !important; position: absolute !important; top: 16px !important; right: 16px !important; width: 48px !important; height: 48px !important; border-radius: 50% !important; background: #FFF !important; padding: 4px !important; z-index: 5 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; } .dn-hero__decor-text { font-size: 75px !important; bottom: 10px !important; left: 15px !important; } .dn-hero__visual .dn-hero__pills { display: none !important; } /* Separate mobile fact pills grid (Order 3) */ .dn-hero__container > .dn-hero__visual + .dn-hero__card + .dn-hero__pills, .dn-hero__pills { order: 3 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin-top: 0 !important; box-sizing: border-box !important; } .dn-hero__pill { width: 100% !important; max-width: 100% !important; min-height: 67px !important; height: auto !important; border-radius: 16px !important; padding: 12px 14px !important; background: var(--dn-white) !important; box-sizing: border-box !important; } .dn-hero__pill-val { font-size: 17px !important; } .dn-hero__pill-label { font-size: 11px !important; } .dn-hero__pill--mobile-trust { display: flex !important; } /* Layout Mobile */ .dn-layout { display: flex !important; flex-direction: column !important; width: 327px !important; max-width: 327px !important; gap: 20px !important; margin: 20px auto 0 !important; } .dn-toc-wrap { position: static !important; width: 327px !important; max-width: 327px !important; } .dn-toc-card { border-radius: 24px !important; padding: 30px 20px 20px !important; width: 327px !important; max-width: 327px !important; } .dn-toc-cta { border-radius: 16px !important; padding: 20px 16px !important; width: 100% !important; } .dn-article { width: 327px !important; max-width: 327px !important; gap: 20px !important; } .dn-card { width: 327px !important; max-width: 327px !important; border-radius: 24px !important; margin-top: 55px !important; } .dn-card-notch { height: 54px !important; top: -46px !important; left: 20px !important; font-size: 16px !important; padding: 0 20px !important; border-radius: 18px 18px 0 0 !important; } .dn-card__inner { padding: 30px 20px 20px !important; } .dn-banner-banner { width: 287px !important; max-width: 287px !important; height: 170px !important; border-radius: 16px !important; margin: 16px 0 !important; } .dn-expert-overlay { display: none !important; } .dn-expert-mobile-card { display: flex !important; flex-direction: column !important; background: #2C2C2C !important; color: #FFF !important; border-radius: 16px !important; padding: 16px !important; margin-top: 15px !important; width: 287px !important; max-width: 287px !important; } .dn-expert-mobile-card__top { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 8px !important; } .dn-expert-mobile-card__photo { width: 44px !important; height: 44px !important; border-radius: 50% !important; object-fit: cover !important; } .dn-expert-mobile-card__name { font-size: 15px !important; font-weight: 600 !important; color: #FFF !important; } .dn-expert-mobile-card__role { font-size: 13px !important; color: rgba(255, 255, 255, 0.75) !important; } .dn-expert-mobile-card__desc { font-size: 13px !important; line-height: 1.35 !important; color: rgba(255, 255, 255, 0.9) !important; margin: 0 !important; } .dn-criteria-grid { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 287px !important; max-width: 287px !important; } .dn-criterion-card { width: 287px !important; max-width: 287px !important; min-height: auto !important; border-radius: 16px !important; padding: 16px !important; } /* Quiz Mobile */ .dn-quiz-block { width: 327px !important; max-width: 327px !important; } .dn-quiz-block .dn-quiz__row { display: flex !important; flex-direction: column !important; gap: 12px !important; width: 327px !important; max-width: 327px !important; } .dn-quiz-block .dn-quiz__photo { width: 327px !important; max-width: 327px !important; height: 264px !important; border-radius: 20px !important; } .dn-quiz-block .dn-quiz__content { width: 327px !important; max-width: 327px !important; min-height: auto !important; border-radius: 20px !important; padding: 24px 20px !important; } /* Calc Mobile */ .dn-calc { display: flex !important; flex-direction: column !important; gap: 12px !important; width: 287px !important; max-width: 287px !important; } .dn-calc__controls { width: 287px !important; max-width: 287px !important; border-radius: 16px !important; padding: 18px 16px !important; } .dn-calc__summary { width: 287px !important; max-width: 287px !important; border-radius: 16px !important; padding: 20px 16px !important; } /* Table Mobile */ .dn-where-table-wrap { width: 287px !important; max-width: 287px !important; } .dn-where-table { width: 287px !important; max-width: 287px !important; } /* Price & Taxes Mobile */ .dn-price-row { display: flex !important; flex-direction: column !important; gap: 12px !important; width: 287px !important; max-width: 287px !important; } .dn-price-card { width: 287px !important; max-width: 287px !important; min-height: auto !important; border-radius: 16px !important; padding: 20px 16px !important; } .dn-advantage-card { width: 287px !important; max-width: 287px !important; min-height: auto !important; border-radius: 16px !important; padding: 20px 16px !important; } /* Services Mobile */ .dn-services-grid { display: flex !important; flex-direction: column !important; gap: 15px !important; width: 327px !important; max-width: 327px !important; } .dn-service-tile { width: 327px !important; max-width: 327px !important; height: 231px !important; } /* Docs Mobile */ .dn-docs-layout { display: flex !important; flex-direction: column !important; gap: 15px !important; width: 287px !important; max-width: 287px !important; } .dn-docs-visual { width: 287px !important; max-width: 287px !important; height: 180px !important; border-radius: 16px !important; } .dn-docs-grid { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 287px !important; max-width: 287px !important; } .dn-docs-notice { width: 287px !important; max-width: 287px !important; } /* Steps Mobile */ .dn-steps-grid { display: flex !important; flex-direction: column !important; gap: 12px !important; width: 327px !important; max-width: 327px !important; } .dn-step-card { width: 327px !important; max-width: 327px !important; min-height: auto !important; } /* Bottom Bands Mobile */ .dn-card--band { width: 327px !important; max-width: 327px !important; border-radius: 24px !important; } .dn-why-grid { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 287px !important; max-width: 287px !important; } .dn-why-card { width: 287px !important; max-width: 287px !important; min-height: 88px !important; padding: 16px 20px !important; } .dn-proof-row { display: flex !important; flex-direction: column !important; gap: 15px !important; width: 327px !important; max-width: 327px !important; } .dn-case-card { width: 327px !important; max-width: 327px !important; height: auto !important; display: flex !important; flex-direction: column !important; } .dn-reviews-col { width: 327px !important; max-width: 327px !important; } .dn-review-item { width: 327px !important; max-width: 327px !important; } .dn-consult-card { display: flex !important; flex-direction: column !important; gap: 20px !important; width: 327px !important; max-width: 327px !important; padding: 30px 20px !important; } .dn-consult-card__form-card { width: 100% !important; padding: 24px 18px !important; } .dn-countries-cards-grid { display: flex !important; flex-direction: column !important; gap: 15px !important; width: 327px !important; max-width: 327px !important; } .dn-country-card { width: 327px !important; max-width: 327px !important; } .dn-expert-cta-card { width: 327px !important; max-width: 327px !important; } } /* Exact circle arrow between Hero cards (Figma: 68x68 outer, 52x52 inner) */ @media (min-width: 769px) { .dn-hero__circle-arrow { position: absolute !important; top: 50% !important; left: calc(100% + 10px) !important; right: auto !important; transform: translate(-50%, -50%) !important; width: 68px !important; height: 68px !important; border-radius: 50% !important; background: var(--dn-beige) !important; /* #F6F1ED cutout around button */ display: flex !important; align-items: center !important; justify-content: center !important; z-index: 10 !important; box-shadow: none !important; text-decoration: none !important; transition: transform 0.22s ease !important; } .dn-hero__circle-arrow:hover { transform: translate(-50%, -50%) scale(1.05) !important; } .dn-hero__circle-arrow-inner { width: 52px !important; height: 52px !important; border-radius: 50% !important; background: #2C2C2C !important; border: none !important; color: #FFFFFF !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: background 0.22s ease !important; } .dn-hero__circle-arrow:hover .dn-hero__circle-arrow-inner { background: var(--dn-coral) !important; } .dn-hero__circle-arrow-inner svg { width: 22px !important; height: 22px !important; } .dn-hero__circle-arrow-inner svg path { stroke: #FFFFFF !important; } .dn-hero__pills--desktop { position: absolute !important; bottom: 20px !important; left: 20px !important; right: 20px !important; z-index: 2 !important; display: grid !important; grid-template-columns: repeat(3, 197px) !important; gap: 10px !important; padding: 0 !important; } /* Hero bottom row (Button + 97% trust badge side-by-side) */ .dn-hero__bottom-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; margin-top: 15px !important; width: 100% !important; } .dn-hero__bottom-row .dn-btn-split { flex: 0 0 311px !important; width: 311px !important; margin: 0 !important; } .dn-hero__bottom-row .dn-hero__trust-badge { flex: 0 0 234px !important; width: 234px !important; height: 82px !important; background: #FF8566 !important; border-radius: 16px !important; padding: 12px 18px !important; display: flex !important; align-items: center !important; gap: 14px !important; color: #FFF !important; margin: 0 !important; align-self: auto !important; } /* Section 1 header */ #kto-mozhet .dn-sec-head, #dohod .dn-sec-head { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; gap: 30px !important; margin-bottom: 24px !important; } #kto-mozhet .dn-sec-head .dn-h2 { max-width: 380px !important; margin: 0 !important; font-size: 34px !important; font-weight: 800 !important; line-height: 1.15 !important; text-transform: uppercase !important; } #kto-mozhet .dn-sec-head .dn-lead { max-width: 480px !important; margin: 0 !important; font-size: 15px !important; line-height: 1.5 !important; color: #555 !important; } /* Madrid Banner */ .dn-banner-banner { position: relative !important; width: 100% !important; max-width: none !important; height: 265px !important; border-radius: 20px !important; background-size: cover !important; background-position: center 65% !important; background-repeat: no-repeat !important; overflow: hidden !important; margin-bottom: 20px !important; } .dn-expert-overlay { position: absolute !important; right: 20px !important; bottom: 20px !important; width: 316px !important; background: rgba(30, 30, 30, 0.85) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border-radius: 16px !important; padding: 14px 18px !important; color: #FFF !important; } /* Criteria Cards */ .dn-criteria-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 15px !important; max-width: none !important; width: 100% !important; } .dn-criterion-card { position: relative !important; width: 100% !important; min-height: 168px !important; background: #F7F5F2 !important; border: 1px solid #EAE6E1 !important; border-radius: 16px !important; padding: 22px 55px 22px 22px !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; } .dn-criterion-card__icon { position: absolute !important; top: 20px !important; right: 20px !important; width: 32px !important; height: 32px !important; border-radius: 8px !important; background: #FB724E !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 0 !important; } /* Quiz Supertitle */ .dn-quiz__supertitle { font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; color: #FB724E !important; text-transform: uppercase !important; margin-bottom: 10px !important; } /* Documents Layout */ .dn-docs-layout { display: grid !important; grid-template-columns: 300px 1fr !important; gap: 20px !important; align-items: stretch !important; width: 100% !important; max-width: none !important; margin-bottom: 0 !important; } .dn-docs-visual { width: 100% !important; max-width: none !important; min-height: 360px !important; height: 100% !important; border-radius: 20px !important; background-size: cover !important; background-position: center !important; } .dn-docs-right { display: flex !important; flex-direction: column !important; justify-content: space-between !important; gap: 14px !important; width: 100% !important; } .dn-docs-columns { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; align-items: stretch !important; width: 100% !important; } .dn-docs-col { display: flex !important; flex-direction: column !important; gap: 10px !important; } .dn-doc-item { background: #F7F5F2 !important; border: 1px solid #EAE6E1 !important; border-radius: 14px !important; padding: 14px 16px !important; display: flex !important; align-items: flex-start !important; gap: 12px !important; width: 100% !important; } .dn-doc-item--tall { min-height: 110px !important; } .dn-docs-notice { width: 100% !important; max-width: none !important; background: #2C2C2C !important; border-radius: 14px !important; padding: 14px 20px !important; display: flex !important; align-items: center !important; gap: 14px !important; color: #FFF !important; font-size: 14px !important; margin: 0 !important; } .dn-docs-notice__bar { width: 4px !important; height: 20px !important; background: #FB724E !important; border-radius: 2px !important; flex-shrink: 0 !important; } /* FAQ single full column */ .dn-faq-grid { display: flex !important; flex-direction: column !important; gap: 12px !important; width: 100% !important; max-width: 100% !important; } .dn-faq-card { width: 100% !important; border-radius: 16px !important; border: 1px solid #EAE6E1 !important; background: #FFF !important; padding: 20px 24px !important; } } /* ================================================================ MOBILE OVERRIDES (<= 768px) ================================================================ */ @media (max-width: 768px) { .dn-hero__circle-arrow { display: none !important; } .dn-hero__pills--desktop { display: none !important; } .dn-hero__pills--mobile { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; order: 3 !important; margin: 15px auto 0 !important; padding: 0 !important; box-sizing: border-box !important; } .dn-hero__pill { width: 100% !important; max-width: 100% !important; min-height: 67px !important; height: auto !important; border-radius: 16px !important; padding: 12px 14px !important; background: var(--dn-white) !important; box-sizing: border-box !important; } .dn-hero__bottom-row { display: flex !important; flex-direction: column !important; width: 100% !important; gap: 12px !important; margin-top: 12px !important; } .dn-hero__bottom-row .dn-btn-split { width: 100% !important; max-width: 287px !important; } .dn-hero__bottom-row .dn-hero__trust-badge { display: none !important; } #kto-mozhet .dn-sec-head, #dohod .dn-sec-head { display: flex !important; flex-direction: column !important; gap: 12px !important; margin-bottom: 18px !important; } #kto-mozhet .dn-sec-head .dn-h2, #dohod .dn-sec-head .dn-h2 { max-width: 100% !important; font-size: 24px !important; } #kto-mozhet .dn-sec-head .dn-lead, #dohod .dn-sec-head .dn-lead { max-width: 100% !important; font-size: 14px !important; } .dn-banner-banner { width: 287px !important; height: 180px !important; border-radius: 16px !important; margin-bottom: 15px !important; } .dn-expert-overlay { display: none !important; } .dn-expert-mobile-card { display: flex !important; width: 287px !important; max-width: 287px !important; } .dn-criteria-grid { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 287px !important; max-width: 287px !important; } .dn-criterion-card { width: 287px !important; min-height: auto !important; padding: 18px 45px 18px 18px !important; } .dn-criterion-card__icon { top: 16px !important; right: 16px !important; width: 28px !important; height: 28px !important; } .dn-docs-layout { display: flex !important; flex-direction: column !important; width: 287px !important; gap: 12px !important; } .dn-docs-visual { display: none !important; } .dn-docs-right { width: 287px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; } .dn-docs-columns { display: flex !important; flex-direction: column !important; width: 287px !important; gap: 10px !important; } .dn-docs-col { display: flex !important; flex-direction: column !important; width: 287px !important; gap: 10px !important; } .dn-doc-item { width: 287px !important; min-height: auto !important; } .dn-docs-notice { width: 287px !important; max-width: 287px !important; font-size: 13px !important; padding: 12px 16px !important; } .dn-article section.dn-card, .dn-article section.dn-quiz-block, .dn-article section.dn-services-block, .dn-article section.dn-steps-faq-block { width: 327px !important; max-width: 327px !important; margin-left: auto !important; margin-right: auto !important; } .dn-faq-section { width: 327px !important; max-width: 327px !important; } .dn-faq-grid { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 287px !important; max-width: 287px !important; } .dn-faq-card { width: 287px !important; max-width: 287px !important; } } /* ========================================================================== FIGMA 292:297 DESKTOP TYPOGRAPHY SYSTEM (100% PIXEL-PERFECT AUDIT FIXES) ========================================================================== */ @media (min-width: 769px) { /* --- 1. GENERAL HEADINGS & NOTCHES --- */ .dn-h2 { font-size: 35px !important; line-height: 42px !important; letter-spacing: 0 !important; } .dn-h2--sub { font-size: 35px !important; line-height: 42px !important; } .dn-card-notch { font-size: 18px !important; line-height: 24px !important; font-weight: 500 !important; } .dn-lead, .dn-card__lead { font-size: 18px !important; line-height: 1.4 !important; font-weight: 400 !important; } /* --- 2. HERO SECTION --- */ .dn-hero__title, .dn-hero__title span { font-size: 50px !important; line-height: 60px !important; } .dn-hero__subtitle { font-size: 25px !important; line-height: 35px !important; font-weight: 400 !important; } .dn-hero__decor-text { font-size: 167px !important; line-height: 150px !important; } .dn-hero__pill-val { font-size: 20px !important; line-height: 25px !important; font-weight: 600 !important; } .dn-hero__pill-label { font-size: 14px !important; line-height: 17.5px !important; font-weight: 400 !important; } .dn-hero__trust-percent { font-size: 36px !important; line-height: 45px !important; font-weight: 600 !important; } .dn-hero__trust-text { font-size: 14px !important; line-height: 15px !important; font-weight: 400 !important; } .dn-btn--hero-outline { font-size: 18px !important; line-height: 22px !important; font-weight: 500 !important; } .dn-btn-split__label { font-size: 20px !important; line-height: 27px !important; font-weight: 500 !important; } .dn-crumbs { font-size: 14px !important; line-height: 20px !important; } /* --- 3. SECTION 1: TOC & WHO CAN APPLY --- */ .dn-toc__list a { font-size: 16px !important; line-height: 20px !important; } .dn-toc-cta__title, .dn-toc-card h3 { font-size: 20px !important; line-height: 24px !important; font-weight: 600 !important; } .dn-toc-cta__text, .dn-toc-card p { font-size: 16px !important; line-height: 21px !important; font-weight: 400 !important; } .dn-toc-cta__btn, .dn-toc-card .dn-btn { font-size: 18px !important; line-height: 22px !important; font-weight: 500 !important; } .dn-expert-overlay__name { font-size: 14px !important; line-height: 17.5px !important; font-weight: 600 !important; } .dn-expert-overlay__role { font-size: 13px !important; line-height: 16.2px !important; font-weight: 400 !important; } .dn-expert-overlay__desc { font-size: 14px !important; line-height: 17.5px !important; font-weight: 400 !important; } .dn-criterion-card__title, .dn-criteria-card__title { font-size: 18px !important; line-height: 22.5px !important; font-weight: 600 !important; } .dn-criterion-card__text, .dn-criteria-card__text { font-size: 16px !important; line-height: 20px !important; font-weight: 400 !important; } /* --- 4. SECTION 2: QUIZ --- */ .dn-quiz__supertitle, .dn-quiz__tag { font-size: 16px !important; line-height: 22.4px !important; font-weight: 500 !important; } .dn-quiz__q-title { font-size: 20px !important; line-height: 25px !important; font-weight: 600 !important; } .dn-quiz__q-sub { font-size: 18px !important; line-height: 23.4px !important; font-weight: 400 !important; } .dn-quiz__opt-btn, .dn-quiz__btn { font-size: 18px !important; line-height: 22px !important; font-weight: 500 !important; } /* --- 5. SECTION 3: CALCULATOR --- */ .dn-calc__label, .dn-calc__counter-label { font-size: 20px !important; line-height: 32px !important; font-weight: 500 !important; } .dn-calc__btn { font-size: 30px !important; line-height: 37px !important; font-weight: 500 !important; } .dn-calc__val { font-size: 29px !important; line-height: 38px !important; font-weight: 600 !important; } .dn-calc__amount { font-size: 34px !important; line-height: 58px !important; font-weight: 600 !important; } .dn-calc__amount-sub, .dn-calc__hint { font-size: 16px !important; line-height: 28px !important; font-weight: 400 !important; } .dn-calc__btn-submit, .dn-calc__summary .dn-btn { font-size: 16px !important; line-height: 23px !important; font-weight: 500 !important; } .dn-calc__note { font-size: 14px !important; line-height: 21px !important; font-weight: 400 !important; } /* --- 6. SECTION 4: WHERE TO APPLY TABLE --- */ .dn-where-table__header-text, .dn-where-th { font-size: 16px !important; line-height: 31px !important; font-weight: 600 !important; } .dn-where-td--label, .dn-where-td--val, .dn-where-table td { font-size: 16px !important; line-height: 22px !important; } .dn-alert-box__title, .dn-alert__badge { font-size: 18px !important; line-height: 27px !important; font-weight: 600 !important; } .dn-alert-box__text, .dn-alert__text { font-size: 16px !important; line-height: 25px !important; font-weight: 400 !important; } /* --- 7. SECTION 5: COST & TAXES / SERVICES --- */ .dn-price-card__title, .dn-price-card__tag { font-size: 20px !important; line-height: 31px !important; font-weight: 600 !important; } .dn-price-card__val { font-size: 34px !important; line-height: 58px !important; font-weight: 600 !important; } .dn-price-card__btn, .dn-price-card .dn-btn { font-size: 16px !important; line-height: 22px !important; font-weight: 500 !important; } .dn-advantage-card__tag { font-size: 18px !important; line-height: 27px !important; font-weight: 600 !important; } .dn-advantage-card__text { font-size: 16px !important; line-height: 22px !important; font-weight: 400 !important; } .dn-services__subtitle, .dn-services-block .dn-card__lead { font-size: 20px !important; line-height: 27px !important; font-weight: 500 !important; } .dn-service-tile__title, .dn-service-card__title { font-size: 20px !important; line-height: 24px !important; font-weight: 600 !important; } .dn-service-tile__sub, .dn-service-card__sub { font-size: 16px !important; line-height: 22.4px !important; font-weight: 400 !important; } /* --- 8. SECTION 6: REQUIRED DOCUMENTS --- */ .dn-doc-item__title { font-size: 16px !important; line-height: 20px !important; font-weight: 600 !important; } .dn-doc-item__sub, .dn-doc-item__meta { font-size: 14px !important; line-height: 17px !important; font-weight: 400 !important; } .dn-docs-notice__text, .dn-docs-notice { font-size: 16px !important; line-height: 22px !important; font-weight: 400 !important; } /* --- 9. SECTION 7: STAGES (HOW IT WORKS) --- */ .dn-supertitle { font-size: 18px !important; line-height: 31px !important; font-weight: 500 !important; } .dn-step-card__title { font-size: 17px !important; line-height: 20.4px !important; font-weight: 600 !important; } .dn-step-card__desc { font-size: 16px !important; line-height: 22px !important; font-weight: 400 !important; } /* --- 10. SECTION 8: FAQ --- */ .dn-faq-card__q, .dn-faq__question { font-size: 18px !important; line-height: 25.2px !important; font-weight: 500 !important; } .dn-faq-card__a, .dn-faq__answer { font-size: 16px !important; line-height: 22px !important; font-weight: 400 !important; } /* --- 11. SECTION 9: IN FIGURES ("ПОЧЕМУ С НАМИ СПОКОЙНЕЕ") --- */ .dn-why-card__val { font-size: 30px !important; line-height: 36px !important; font-weight: 600 !important; } .dn-why-card__label, .dn-why-card__text { font-size: 16px !important; line-height: 22.4px !important; font-weight: 400 !important; } /* --- 12. SECTION 10: COUNTRY COMPARISON TABLE --- */ .dn-countries-table-sec .dn-btn { font-size: 16px !important; line-height: 21.6px !important; font-weight: 500 !important; } .dn-ct-th, .dn-countries-table th, .dn-country-table__th { font-size: 16px !important; line-height: 21.6px !important; font-weight: 600 !important; } .dn-ct-name, .dn-country-table__name { font-size: 20px !important; line-height: 24px !important; font-weight: 600 !important; } .dn-ct-col-time, .dn-country-table__term { font-size: 18px !important; line-height: 25.2px !important; font-weight: 500 !important; } .dn-ct-col-price, .dn-country-table__price { font-size: 20px !important; line-height: 24px !important; font-weight: 600 !important; } .dn-ct-badge-here { font-size: 16px !important; line-height: 21.6px !important; font-weight: 700 !important; } .dn-ct-link { font-size: 16px !important; line-height: 21.6px !important; font-weight: 500 !important; } /* --- 13. SECTION 11: REVIEWS & CASES --- */ .dn-case-card__tag { font-size: 16px !important; line-height: 20.8px !important; font-weight: 500 !important; } .dn-case-card__title { font-size: 22px !important; line-height: 26.4px !important; font-weight: 600 !important; } .dn-case-card__result { font-size: 16px !important; line-height: 21.6px !important; font-weight: 400 !important; } .dn-case-card__badge { font-size: 14px !important; line-height: 18.2px !important; font-weight: 500 !important; } .dn-review-item__name, .dn-review-card__author { font-size: 18px !important; line-height: 25.2px !important; font-weight: 700 !important; } .dn-review-item__text, .dn-review-card__text { font-size: 16px !important; line-height: 22.4px !important; font-weight: 400 !important; } /* --- 14. SECTION 12: LEAD CONSULTATION FORM --- */ .dn-form-field__label { font-size: 14px !important; line-height: 16.8px !important; font-weight: 500 !important; } .dn-form-field__input { font-size: 14px !important; line-height: 16.8px !important; } .dn-channel-picker__title { font-size: 16px !important; line-height: 19.2px !important; font-weight: 500 !important; } .dn-channel-pill__text { font-size: 14px !important; line-height: 16.8px !important; font-weight: 500 !important; } .dn-form-submit { font-size: 16px !important; line-height: 21.6px !important; font-weight: 500 !important; } .dn-consult-benefits li { font-size: 16px !important; line-height: 20px !important; font-weight: 500 !important; } .dn-form-policy { font-size: 12px !important; line-height: 15.6px !important; font-weight: 400 !important; } /* --- 15. SECTION 13: OTHER COUNTRIES CAROUSEL --- */ .dn-country-card__name { font-size: 20px !important; line-height: 24px !important; font-weight: 600 !important; } .dn-country-card__type { font-size: 15px !important; line-height: 21px !important; font-weight: 400 !important; } .dn-country-card__meta, .dn-country-card__metrics { font-size: 14px !important; line-height: 19.6px !important; font-weight: 400 !important; } .dn-country-card__actions .dn-btn { font-size: 14px !important; line-height: 18.9px !important; font-weight: 500 !important; } /* --- 16. SECTION 14: EXPERT CTA BANNER --- */ .dn-expert-cta-card__title { font-size: 35px !important; line-height: 42px !important; font-weight: 600 !important; } .dn-expert-cta-card__desc { font-size: 16px !important; line-height: 22.4px !important; font-weight: 400 !important; } .dn-expert-cta-card__btn, .dn-expert-cta-card .dn-btn { font-size: 20px !important; line-height: 27px !important; font-weight: 500 !important; } /* Button text consistency */ .dn-countries-table-sec .dn-btn, .dn-countries-table-sec .dn-btn span, .dn-proof .dn-btn, .dn-proof .dn-btn span, .dn-other-countries .dn-btn, .dn-other-countries .dn-btn span { font-size: 16px !important; line-height: 21.6px !important; font-weight: 500 !important; } /* Form Benefits text */ .dn-consult-benefits li, .dn-consult-benefits li span { font-size: 16px !important; line-height: 20px !important; font-weight: 500 !important; } /* Floating Dock typography */ .dn-dock__text { font-size: 18px !important; line-height: 24px !important; } .dn-dock__text b { font-size: 20px !important; line-height: 24px !important; } .dn-dock .dn-btn, .dn-dock .dn-btn span { font-size: 14px !important; line-height: 18px !important; font-weight: 500 !important; } } /* ========================================================================== PRECISION FIXES: 5 USER ISSUES (SPAIN, BUTTON, NOTCH FILLETS, TOC MARKER, EXPERT OVERLAY) ========================================================================== */ @media (min-width: 769px) { /* 1. SPAIN DECOR TEXT (Figma: top: 555px from card top, Unbounded 500, 167px, gradient to 83%) */ .dn-hero__decor-text { position: absolute !important; top: 555px !important; bottom: auto !important; left: 50% !important; transform: translateX(-50%) !important; font-family: 'Unbounded', sans-serif !important; font-weight: 500 !important; font-size: 167px !important; line-height: 150px !important; letter-spacing: 0 !important; text-transform: uppercase !important; color: transparent !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 83%) !important; -webkit-background-clip: text !important; background-clip: text !important; pointer-events: none !important; user-select: none !important; white-space: nowrap !important; z-index: 1 !important; } .dn-hero__pills--desktop { z-index: 2 !important; } /* 2. HERO 'ПОЛУЧИТЬ ВИЗУ' BUTTON (Figma: pill 241x70 + touching circle 70x70 with arrow) */ .dn-btn-split--hero-white { display: inline-flex !important; align-items: center !important; gap: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; cursor: pointer !important; padding: 0 !important; } .dn-btn-split--hero-white .dn-btn-split__label { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 70px !important; padding: 0 40px !important; background: #FFFFFF !important; color: #111111 !important; font-family: var(--dn-font) !important; font-size: 20px !important; line-height: 27px !important; font-weight: 500 !important; border-radius: 100px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important; border: none !important; transition: background 0.22s ease, color 0.22s ease !important; } .dn-btn-split--hero-white .dn-btn-split__circle { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 70px !important; height: 70px !important; background: #FFFFFF !important; color: #111111 !important; border-radius: 50% !important; border: none !important; border-left: none !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important; margin-left: 0 !important; transition: background 0.22s ease, color 0.22s ease !important; } .dn-btn-split--hero-white:hover .dn-btn-split__label, .dn-btn-split--hero-white:hover .dn-btn-split__circle { background: #F4EFEA !important; color: var(--dn-dark-hover) !important; } .dn-btn-split--hero-white:hover .dn-btn-split__circle svg { transform: translateX(4px) !important; } /* 3. NOTCH TABS & CONCAVE FILLETS (PIXEL PERFECT FIGMA / EXACT NEW-DESIGN.CSS) */ .dn-card, .dn-toc-card, .dn-card--band { position: relative !important; background: #FFFFFF !important; border: none !important; border-radius: 30px !important; box-shadow: none !important; } .dn-expert-cta-card { position: relative !important; background: var(--dn-coral, #FB724E) !important; border: none !important; border-radius: 30px !important; box-shadow: none !important; } .dn-card-notch { position: absolute !important; top: -52px !important; left: 60px !important; height: 52px !important; background: #FFFFFF !important; border: none !important; border-top-left-radius: 30px !important; border-top-right-radius: 30px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 37px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-family: var(--dn-font, var(--font-main, 'Montserrat', sans-serif)) !important; font-weight: 500 !important; font-size: 20px !important; line-height: 1 !important; color: #000000 !important; white-space: nowrap !important; z-index: 5 !important; } .dn-toc-wrap .dn-card-notch { left: 64px !important; padding: 0 23px !important; } /* Left concave fillet */ .dn-card-notch::before { content: '' !important; position: absolute !important; bottom: 0 !important; left: -30px !important; width: 30px !important; height: 30px !important; background: radial-gradient(circle at top left, transparent 29.5px, #FFFFFF 30px) !important; border: none !important; pointer-events: none !important; z-index: 5 !important; } /* Right concave fillet */ .dn-card-notch::after { content: '' !important; position: absolute !important; bottom: 0 !important; right: -30px !important; width: 30px !important; height: 30px !important; background: radial-gradient(circle at top right, transparent 29.5px, #FFFFFF 30px) !important; border: none !important; pointer-events: none !important; z-index: 5 !important; } /* Coral notch fillets (Expert CTA Banner) */ .dn-card-notch--coral { background: #FB724E !important; color: #FFFFFF !important; } .dn-card-notch--coral::before { background: radial-gradient(circle at top left, transparent 29.5px, #FB724E 30px) !important; } .dn-card-notch--coral::after { background: radial-gradient(circle at top right, transparent 29.5px, #FB724E 30px) !important; } /* 4. TOC ACTIVE ITEM ORANGE MARKER (Figma: 3px wide, 28px high, #FB724E, radius 2px, left: -15px) */ .dn-toc__list a.is-active, .dn-toc a.is-active, #dn-toc-list a.is-active { font-weight: 600 !important; color: var(--dn-dark) !important; position: relative !important; } .dn-toc__list a.is-active::before, .dn-toc a.is-active::before, #dn-toc-list a.is-active::before { content: '' !important; position: absolute !important; left: -15px !important; top: 50% !important; transform: translateY(-50%) !important; width: 3px !important; height: 28px !important; background: #FB724E !important; border-radius: 2px !important; } /* 5. EXPERT OVERLAY IN WHO CAN APPLY (Figma: 250x170px, rgba(0,0,0,0.3), blur 20px, radius 10px) */ .dn-expert-overlay { position: absolute !important; right: 20px !important; bottom: 20px !important; width: 250px !important; min-height: 170px !important; max-height: 175px !important; background: rgba(0, 0, 0, 0.3) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-radius: 10px !important; padding: 16px !important; box-sizing: border-box !important; color: #FFF !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; gap: 12px !important; border: none !important; } .dn-expert-overlay__header { display: flex !important; align-items: center !important; gap: 12px !important; } .dn-expert-overlay__photo { width: 50px !important; height: 50px !important; border-radius: 50% !important; object-fit: cover !important; background: #FFF !important; flex-shrink: 0 !important; margin: 0 !important; } .dn-expert-overlay__meta { display: flex !important; flex-direction: column !important; gap: 2px !important; } .dn-expert-overlay__name { font-size: 14px !important; line-height: 18px !important; font-weight: 600 !important; color: #FFFFFF !important; } .dn-expert-overlay__role { font-size: 13px !important; line-height: 16px !important; font-weight: 400 !important; color: #A5A5A5 !important; } .dn-expert-overlay__desc { font-size: 14px !important; line-height: 18px !important; font-weight: 400 !important; color: #FFFFFF !important; margin: 0 !important; } } /* ========================================================================== #EXACT FIGMA 292:297: CRITERIA CARDS & QUIZ SECTION (PIXEL PERFECT) ========================================================================== */ /* 1. CRITERIA CARDS (DESKTOP) */ @media (min-width: 993px) { .dn-criteria-grid { display: grid !important; grid-template-columns: repeat(3, 292px) !important; gap: 15px !important; width: 906px !important; max-width: 906px !important; margin: 20px 0 0 0 !important; box-sizing: border-box !important; } .dn-criterion-card { position: relative !important; width: 292px !important; height: 168px !important; background: #F6F1ED !important; border: none !important; border-radius: 10px !important; padding: 20px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; box-shadow: none !important; } .dn-criterion-card__icon { position: absolute !important; top: 20px !important; right: 20px !important; width: 30px !important; height: 30px !important; border-radius: 5px !important; background: #FB724E !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; border: none !important; box-shadow: none !important; } .dn-criterion-card__icon svg { display: block !important; width: auto !important; height: auto !important; max-width: 20px !important; max-height: 20px !important; } .dn-criterion-card__title { font-family: var(--dn-font, var(--font-heading, 'Bounded', sans-serif)) !important; font-size: 18px !important; line-height: 22.5px !important; font-weight: 600 !important; text-transform: uppercase !important; color: #2C2C2C !important; max-width: 207px !important; margin: 0 !important; letter-spacing: 0 !important; } .dn-criterion-card__val { font-family: var(--dn-font-main, 'Inter', sans-serif) !important; font-size: 16px !important; line-height: 20px !important; font-weight: 400 !important; color: #2C2C2C !important; margin: 0 !important; letter-spacing: 0 !important; } } /* 2. QUIZ SECTION (DESKTOP FIGMA 292:297) */ @media (min-width: 993px) { .dn-quiz-block { margin-top: 55px !important; margin-bottom: 50px !important; width: 986px !important; max-width: 986px !important; box-sizing: border-box !important; } .dn-quiz { width: 986px !important; max-width: 986px !important; box-sizing: border-box !important; } .dn-quiz__row { display: grid !important; grid-template-columns: 319px 652px !important; gap: 15px !important; width: 986px !important; height: 500px !important; box-sizing: border-box !important; align-items: stretch !important; } .dn-quiz__photo { width: 319px !important; height: 500px !important; border-radius: 30px !important; background-image: url('../images/spain/quiz_consult_photo.webp') !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; box-sizing: border-box !important; } .dn-quiz__content { width: 652px !important; height: 500px !important; background: #FFFFFF !important; border: none !important; border-radius: 30px !important; padding: 28px 40px 40px 40px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; position: relative !important; box-shadow: none !important; } .dn-quiz__supertitle { font-family: var(--dn-font-main, 'Inter', sans-serif) !important; font-weight: 500 !important; font-size: 16px !important; line-height: 22.4px !important; text-transform: uppercase !important; color: #FB724E !important; letter-spacing: 0 !important; margin: 0 0 8px 0 !important; } .dn-quiz__title { font-family: var(--dn-font, var(--font-heading, 'Bounded', sans-serif)) !important; font-weight: 600 !important; font-size: 35px !important; line-height: 41.3px !important; text-transform: uppercase !important; color: #2C2C2C !important; letter-spacing: 0 !important; margin: 0 0 28px 0 !important; } .dn-quiz__progress { display: flex !important; gap: 16px !important; margin: 0 0 34px 0 !important; width: 572px !important; } .dn-quiz__bar { width: 131px !important; height: 6px !important; border-radius: 3px !important; background: #F6F1ED !important; flex: 0 0 131px !important; transition: background 0.25s ease !important; } .dn-quiz__bar.is-active { background: #FB724E !important; } .dn-check__q { display: none !important; flex-direction: column !important; height: 100% !important; } .dn-check__q.is-active { display: flex !important; } .dn-quiz__q-title { font-family: var(--dn-font, var(--font-heading, 'Bounded', sans-serif)) !important; font-weight: 600 !important; font-size: 20px !important; line-height: 25px !important; color: #2C2C2C !important; margin: 0 0 14px 0 !important; max-width: 530px !important; letter-spacing: 0 !important; } .dn-quiz__q-hint { font-family: var(--dn-font-main, 'Inter', sans-serif) !important; font-weight: 400 !important; font-size: 18px !important; line-height: 23.4px !important; color: #2C2C2C !important; margin: 0 0 30px 0 !important; max-width: 500px !important; letter-spacing: 0 !important; } .dn-check__answers { display: flex !important; gap: 15px !important; margin-top: auto !important; } .dn-check__answers button[data-yes], .dn-check__answers .dn-btn--coral { width: 180px !important; height: 60px !important; border-radius: 100px !important; background: #FB724E !important; color: #FFFFFF !important; border: none !important; font-family: var(--dn-font-main, 'Inter', sans-serif) !important; font-size: 18px !important; font-weight: 500 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; box-shadow: none !important; padding: 0 !important; text-transform: uppercase !important; transition: background 0.2s ease !important; } .dn-check__answers button[data-yes]:hover, .dn-check__answers .dn-btn--coral:hover { background: #e5603c !important; } .dn-check__answers button[data-no], .dn-check__answers .dn-btn--outline-dark { width: 180px !important; height: 60px !important; border-radius: 100px !important; background: #FFFFFF !important; color: #2C2C2C !important; border: 1px solid #7F7F7F !important; font-family: var(--dn-font-main, 'Inter', sans-serif) !important; font-size: 18px !important; font-weight: 500 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; box-shadow: none !important; padding: 0 !important; text-transform: uppercase !important; transition: background 0.2s ease, border-color 0.2s ease !important; } .dn-check__answers button[data-no]:hover, .dn-check__answers .dn-btn--outline-dark:hover { background: #F6F1ED !important; border-color: #2C2C2C !important; } /* Result state in quiz */ .dn-check__result { display: none !important; flex-direction: column !important; height: 100% !important; background: transparent !important; padding: 0 !important; } .dn-check__result.is-active { display: flex !important; } } /* 3. MOBILE ADAPTATIONS (< 769px) */ @media (max-width: 768px) { .dn-criteria-grid { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 287px !important; max-width: 287px !important; margin: 16px auto 0 !important; } .dn-criterion-card { position: relative !important; width: 287px !important; min-height: 110px !important; height: auto !important; background: #F6F1ED !important; border-radius: 10px !important; padding: 16px 50px 16px 16px !important; box-sizing: border-box !important; } .dn-criterion-card__icon { position: absolute !important; top: 16px !important; right: 16px !important; width: 32px !important; height: 32px !important; border-radius: 6px !important; background: #FB724E !important; display: flex !important; align-items: center !important; justify-content: center !important; } .dn-criterion-card__icon svg { max-width: 18px !important; max-height: 18px !important; } .dn-quiz-block { width: 327px !important; max-width: 327px !important; margin: 35px auto !important; } .dn-quiz { width: 327px !important; max-width: 327px !important; } .dn-quiz__row { display: flex !important; flex-direction: column !important; gap: 12px !important; width: 327px !important; height: auto !important; } .dn-quiz__photo { width: 327px !important; height: 264px !important; border-radius: 20px !important; background-size: cover !important; background-position: center !important; } .dn-quiz__content { width: 327px !important; height: auto !important; min-height: 370px !important; background: #FFFFFF !important; border-radius: 20px !important; padding: 24px 20px !important; box-sizing: border-box !important; } .dn-quiz__title { font-size: 24px !important; line-height: 30px !important; } .dn-quiz__progress { display: flex !important; gap: 8px !important; width: 100% !important; margin-bottom: 20px !important; } .dn-quiz__bar { flex: 1 1 auto !important; width: auto !important; height: 4px !important; } .dn-check__answers { display: flex !important; gap: 10px !important; } .dn-check__answers button[data-yes], .dn-check__answers button[data-no] { flex: 1 !important; width: auto !important; height: 52px !important; } } /* ================================================================ PIXEL-PERFECT FIXES: #dohod, #kak-podat, #stoimost (Desktop 993px+) ================================================================ */ @media (min-width: 993px) { /* 1. #dohod: Заголовок и вертикальное расположение Супруг(а) и Детей */ #dohod .dn-sec-head { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; gap: 20px !important; margin-bottom: 24px !important; width: 906px !important; } #dohod .dn-sec-head .dn-h2 { font-family: var(--dn-font-title, 'Bounded', sans-serif) !important; font-size: 35px !important; font-weight: 600 !important; line-height: 1.1 !important; text-transform: uppercase !important; max-width: 500px !important; color: #2C2C2C !important; margin: 0 !important; } #dohod .dn-sec-head .dn-lead { font-family: var(--dn-font-main, 'Inter', sans-serif) !important; font-size: 16px !important; line-height: 1.4 !important; color: #2C2C2C !important; max-width: 386px !important; margin: 0 !important; } .dn-calc { display: grid !important; grid-template-columns: 560px 331px !important; gap: 15px !important; width: 906px !important; align-items: stretch !important; } .dn-calc__controls { width: 560px !important; height: 250px !important; border-radius: 24px !important; background: #F6F1ED !important; padding: 20px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; } .dn-calc__inputs-grid { display: flex !important; flex-direction: column !important; gap: 10px !important; margin-bottom: 0 !important; width: 100% !important; } .dn-calc__field { width: 520px !important; max-width: 520px !important; height: 66px !important; border-radius: 13px !important; background: #FFFFFF !important; padding: 0 20px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: space-between !important; } .dn-calc__label { font-family: var(--dn-font-main, 'Inter', sans-serif) !important; font-size: 20px !important; font-weight: 500 !important; color: #2C2C2C !important; margin: 0 !important; } .dn-calc__note { font-family: var(--dn-font-main, 'Inter', sans-serif) !important; font-size: 14px !important; line-height: 21px !important; color: #777777 !important; margin: 0 !important; max-width: 520px !important; } .dn-calc__summary { width: 331px !important; height: 250px !important; border-radius: 24px !important; background: #2C2C2C !important; padding: 21px 24px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; color: #FFFFFF !important; } .dn-calc__amount { font-family: var(--dn-font-title, 'Bounded', sans-serif) !important; font-size: 34px !important; font-weight: 600 !important; line-height: 1.1 !important; color: #FFFFFF !important; margin: 0 0 4px !important; } .dn-calc__caption { font-family: var(--dn-font-main, 'Inter', sans-serif) !important; font-size: 16px !important; line-height: 1.4 !important; color: #8E8E93 !important; margin: 0 !important; } .dn-calc__summary .dn-btn, .dn-calc__btn-submit { width: 283px !important; height: 61px !important; border-radius: 100px !important; background: #FB724E !important; padding: 0 10px 0 24px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; margin-top: auto !important; color: #FFFFFF !important; font-family: var(--dn-font-main, 'Inter', sans-serif) !important; font-size: 16px !important; font-weight: 500 !important; } /* 2. #kak-podat: Заголовок, миниатюра Испании 130x77, таблица */ #kak-podat .dn-sec-head--with-thumb { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 24px !important; width: 906px !important; } #kak-podat .dn-sec-head .dn-h2 { font-family: var(--dn-font-title, 'Bounded', sans-serif) !important; font-size: 35px !important; font-weight: 600 !important; line-height: 1.1 !important; text-transform: uppercase !important; color: #2C2C2C !important; margin: 0 !important; } #kak-podat .dn-sec-head__thumb { width: 130px !important; max-width: 130px !important; height: 77px !important; border-radius: 18px !important; object-fit: cover !important; flex-shrink: 0 !important; } .dn-where-table-wrap { width: 906px !important; max-width: 906px !important; border-radius: 5px !important; border: 1px solid #D9D5D2 !important; overflow: hidden !important; margin-bottom: 24px !important; } .dn-where-table { width: 100% !important; border-collapse: collapse !important; border-spacing: 0 !important; border: none !important; table-layout: fixed !important; } .dn-where-table th, .dn-where-table td { border-bottom: 1px solid #D9D5D2 !important; border-right: 1px solid #D9D5D2 !important; vertical-align: middle !important; box-sizing: border-box !important; } .dn-where-table th:last-child, .dn-where-table td:last-child { border-right: none !important; } .dn-where-table tr:last-child td { border-bottom: none !important; } .dn-where-table th { height: 62px !important; padding: 0 16px !important; } .dn-where-th--title, .dn-where-table td:first-child { width: 180px !important; padding: 0 20px !important; } .dn-where-th--beige, .dn-where-table td:nth-child(2) { width: 363px !important; padding: 0 24px !important; } .dn-where-th--coral, .dn-where-table td:nth-child(3) { width: 363px !important; padding: 0 24px !important; } .dn-where-th--title { background: #FFFFFF !important; font-family: var(--dn-font-main, 'Inter', sans-serif) !important; font-size: 16px !important; font-weight: 500 !important; color: #777777 !important; text-transform: none !important; } .dn-where-th--beige { background: #F6F1ED !important; color: #2C2C2C !important; } .dn-where-th--coral { background: #FB724E !important; color: #FFFFFF !important; } .dn-where-th__content { display: flex !important; align-items: center !important; gap: 12px !important; font-family: var(--dn-font-title, 'Bounded', sans-serif) !important; font-size: 16px !important; font-weight: 600 !important; text-transform: none !important; } .dn-where-th__icon { width: 32px !important; height: 32px !important; min-width: 32px !important; border-radius: 5px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } .dn-where-table tbody tr:nth-child(1) td { height: 70px !important; background: #FFFFFF !important; } .dn-where-table tbody tr:nth-child(2) td, .dn-where-tr--tint td { height: 80px !important; background: #F6F1ED !important; } .dn-where-table tbody tr:nth-child(3) td { height: 70px !important; background: #FFFFFF !important; } .dn-where-td--label, .dn-where-td--val, .dn-where-table td { font-family: var(--dn-font-main, 'Inter', sans-serif) !important; font-size: 16px !important; line-height: 1.4 !important; color: #2C2C2C !important; } /* 3 & 4. #stoimost: Карточка цен 390px, аватар 90x90, налоги 501px, фото 453x92 */ #stoimost .dn-sec-head .dn-h2 { font-family: var(--dn-font-title, 'Bounded', sans-serif) !important; font-size: 35px !important; font-weight: 600 !important; line-height: 1.1 !important; text-transform: uppercase !important; color: #2C2C2C !important; margin: 0 0 10px !important; } #stoimost .dn-sec-head .dn-lead { font-family: var(--dn-font-main, 'Inter', sans-serif) !important; font-size: 18px !important; line-height: 1.4 !important; color: #2C2C2C !important; max-width: 684px !important; margin: 0 0 24px !important; } .dn-price-row { display: grid !important; grid-template-columns: 390px 501px !important; gap: 15px !important; width: 906px !important; max-width: 906px !important; align-items: stretch !important; margin-bottom: 24px !important; } .dn-price-card { width: 390px !important; height: 280px !important; border-radius: 24px !important; background: #2C2C2C !important; padding: 24px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; } .dn-price-card__header { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; } .dn-price-card__title { font-family: var(--dn-font-title, 'Bounded', sans-serif) !important; font-size: 20px !important; font-weight: 600 !important; line-height: 1.2 !important; color: #FFFFFF !important; max-width: 240px !important; margin: 0 !important; text-transform: none !important; } .dn-price-card__avatar { width: 90px !important; height: 90px !important; min-width: 90px !important; border-radius: 50% !important; border: 1px solid #FFFFFF !important; background-size: cover !important; background-position: center !important; margin: 0 !important; flex-shrink: 0 !important; } .dn-price-card__val { font-family: var(--dn-font-title, 'Bounded', sans-serif) !important; font-size: 34px !important; font-weight: 600 !important; line-height: 1.1 !important; color: #FFFFFF !important; margin: 0 !important; } .dn-price-card__btn, .dn-price-card .dn-btn { width: 342px !important; height: 54px !important; border-radius: 100px !important; background: #FB724E !important; color: #FFFFFF !important; font-family: var(--dn-font-main, 'Inter', sans-serif) !important; font-size: 16px !important; font-weight: 500 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 10px 0 24px !important; box-sizing: border-box !important; margin: 0 !important; } .dn-advantage-card { width: 501px !important; height: 280px !important; border-radius: 24px !important; background: #F6F1ED !important; padding: 24px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; } .dn-advantage-card__tag { font-family: var(--dn-font-main, 'Inter', sans-serif) !important; font-size: 18px !important; font-weight: 600 !important; line-height: 1.3 !important; color: #2C2C2C !important; margin: 0 0 8px !important; } .dn-advantage-card__text { font-family: var(--dn-font-main, 'Inter', sans-serif) !important; font-size: 16px !important; line-height: 22px !important; color: #2C2C2C !important; margin: 0 0 12px !important; max-width: 453px !important; } .dn-advantage-card__photo { width: 100% !important; max-width: 453px !important; height: 92px !important; min-height: 92px !important; border-radius: 15px !important; background-size: cover !important; background-position: center !important; margin: auto 0 0 0 !important; flex-shrink: 0 !important; } } @media (max-width: 992px) { .dn-price-card__avatar { display: none !important; } .dn-advantage-card__photo { display: none !important; } .dn-price-card { width: 287px !important; max-width: 100% !important; min-height: auto !important; padding: 20px !important; box-sizing: border-box !important; } .dn-advantage-card { width: 287px !important; max-width: 100% !important; min-height: auto !important; padding: 20px !important; box-sizing: border-box !important; } .dn-price-card__header { display: block !important; } .dn-price-card__title { max-width: 100% !important; font-size: 18px !important; margin-bottom: 12px !important; } } @media (max-width: 992px) { .dn-price-card .dn-btn, .dn-price-card__btn { width: 100% !important; max-width: 100% !important; height: 48px !important; font-size: 14px !important; padding: 0 16px !important; white-space: normal !important; text-align: center !important; justify-content: center !important; } .dn-price-card .dn-btn span, .dn-price-card__btn span { font-size: 14px !important; } } /* ================================================================ PIXEL-PERFECT FIXES (6 USER ISSUES) 1. #stoimost button: orange button with white arrow (NO white circle) 2. #stoimost advantage card: width 100% to section edge 3. #uslugi photo notch: concave cutout + orange circle arrow 4. #dohod calc button: white circle with arrow 5. #kto-mozhet criteria cards: 3 cards full width 6. #etapy: connecting bridges + original Figma SVG icons ================================================================ */ /* 1. #stoimost button */ .dn-price-card__btn { display: inline-flex !important; align-items: center !important; justify-content: space-between !important; background: #FB724E !important; color: #FFFFFF !important; border-radius: 100px !important; height: 60px !important; padding: 0 28px !important; font-size: 16px !important; font-weight: 600 !important; box-shadow: 0 4px 14px rgba(251, 114, 78, 0.35) !important; text-decoration: none !important; border: none !important; box-sizing: border-box !important; cursor: pointer !important; transition: background 0.2s ease, transform 0.2s ease !important; } .dn-price-card__btn:hover { background: #E85E3A !important; } .dn-price-card__btn .dn-btn__arrow-icon { display: flex !important; align-items: center !important; justify-content: center !important; margin-left: 14px !important; flex-shrink: 0 !important; } .dn-price-card__btn .dn-btn__circle-arrow { display: none !important; } /* 2. #stoimost section full width */ @media (min-width: 993px) { .dn-price-row { display: grid !important; grid-template-columns: 390px 1fr !important; gap: 20px !important; width: 100% !important; max-width: 100% !important; align-items: stretch !important; margin-bottom: 24px !important; box-sizing: border-box !important; } .dn-price-card { width: 390px !important; max-width: 390px !important; min-height: 280px !important; height: 280px !important; box-sizing: border-box !important; } .dn-advantage-card { width: 100% !important; max-width: 100% !important; min-height: 280px !important; height: 280px !important; box-sizing: border-box !important; } .dn-advantage-card__text { max-width: 100% !important; } .dn-advantage-card__photo { width: 100% !important; max-width: 100% !important; } } /* 3. #uslugi photo notch */ .dn-service-tile__media-wrap { position: relative !important; width: 100% !important; height: 170px !important; margin-bottom: 16px !important; overflow: visible !important; } .dn-service-tile__photo { width: 100% !important; height: 170px !important; background-size: cover !important; background-position: center !important; clip-path: url(#serviceTileClip) !important; -webkit-clip-path: url(#serviceTileClip) !important; } .dn-service-tile__arrow { position: absolute !important; right: 0 !important; bottom: 0 !important; width: 48px !important; height: 48px !important; background: #FB724E !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 2 !important; box-shadow: 0 4px 12px rgba(251, 114, 78, 0.35) !important; transition: transform 0.2s ease, background 0.2s ease !important; } .dn-service-tile:hover .dn-service-tile__arrow { background: #E85E3A !important; transform: scale(1.05) !important; } /* 4. #dohod calc button */ .dn-calc__btn-submit { display: flex !important; align-items: center !important; justify-content: space-between !important; background: #FB724E !important; color: #FFFFFF !important; border-radius: 100px !important; height: 60px !important; padding: 7px 7px 7px 28px !important; font-size: 16px !important; font-weight: 600 !important; box-shadow: 0 4px 14px rgba(251, 114, 78, 0.35) !important; border: none !important; cursor: pointer !important; box-sizing: border-box !important; transition: background 0.2s ease, transform 0.2s ease !important; } .dn-calc__btn-submit:hover { background: #E85E3A !important; } .dn-calc__btn-circle { width: 46px !important; height: 46px !important; background: #FFFFFF !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .dn-calc__btn-circle svg { display: block !important; } /* 5. #kto-mozhet criteria cards full width */ @media (min-width: 993px) { .dn-criteria-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; width: 100% !important; max-width: 100% !important; margin: 20px 0 0 0 !important; box-sizing: border-box !important; } .dn-criterion-card { width: 100% !important; max-width: 100% !important; height: 168px !important; box-sizing: border-box !important; } } /* 6. #etapy bridges + icons */ @media (min-width: 993px) { .dn-steps-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; width: 100% !important; max-width: 100% !important; margin-bottom: 60px !important; position: relative !important; box-sizing: border-box !important; } .dn-step-card { position: relative !important; width: 100% !important; max-width: 100% !important; min-height: 261px !important; border-radius: 20px !important; padding: 24px 20px !important; box-sizing: border-box !important; } .dn-step-card:nth-child(1)::after { content: '' !important; position: absolute !important; right: -20px !important; top: 73px !important; width: 20px !important; height: 117px !important; background: url('../images/spain/step_bridge_1_2.svg') no-repeat center !important; background-size: contain !important; z-index: 2 !important; pointer-events: none !important; } .dn-step-card:nth-child(2)::after { content: '' !important; position: absolute !important; right: -20px !important; top: 73px !important; width: 20px !important; height: 117px !important; background: url('../images/spain/step_bridge_2_3.svg') no-repeat center !important; background-size: contain !important; z-index: 2 !important; pointer-events: none !important; } .dn-step-card:nth-child(3)::after { content: '' !important; position: absolute !important; right: -20px !important; top: 73px !important; width: 20px !important; height: 117px !important; background: url('../images/spain/step_bridge_3_4.svg') no-repeat center !important; background-size: contain !important; z-index: 2 !important; pointer-events: none !important; } .dn-step-card:nth-child(4)::after { display: none !important; } } .dn-step-icon { width: 40px !important; height: 40px !important; border-radius: 5px !important; background: #F6F1ED !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .dn-step-icon img { display: block !important; max-width: 100% !important; height: auto !important; } /* Guarantee button widths and alignments */ .dn-price-card .dn-price-card__btn { width: 100% !important; max-width: 100% !important; height: 60px !important; background: #FB724E !important; color: #FFFFFF !important; border-radius: 100px !important; padding: 0 24px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; font-family: var(--dn-font-main, 'Inter', sans-serif) !important; font-size: 16px !important; font-weight: 600 !important; border: none !important; cursor: pointer !important; box-shadow: 0 4px 14px rgba(251, 114, 78, 0.35) !important; box-sizing: border-box !important; } .dn-price-card .dn-price-card__btn .dn-btn__arrow-icon { display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border-radius: 0 !important; width: auto !important; height: auto !important; } .dn-calc__summary .dn-calc__btn-submit { width: 100% !important; max-width: 100% !important; height: 60px !important; background: #FB724E !important; color: #FFFFFF !important; border-radius: 100px !important; padding: 7px 7px 7px 24px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; font-family: var(--dn-font-main, 'Inter', sans-serif) !important; font-size: 16px !important; font-weight: 600 !important; border: none !important; cursor: pointer !important; box-shadow: 0 4px 14px rgba(251, 114, 78, 0.35) !important; box-sizing: border-box !important; } .dn-calc__summary .dn-calc__btn-submit .dn-calc__btn-circle { width: 46px !important; height: 46px !important; background: #FFFFFF !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .dn-calc__summary .dn-calc__btn-submit .dn-calc__btn-circle svg { display: block !important; width: 24px !important; height: 24px !important; } /* ================================================================ SPLIT BUTTON IN #STOIMOST: PILL + CIRCLE CONNECTED AT TOUCH POINT ================================================================ */ .dn-price-card__split-btn { display: flex !important; align-items: center !important; width: 100% !important; max-width: 342px !important; background: transparent !important; border: none !important; padding: 0 !important; cursor: pointer !important; text-decoration: none !important; gap: 0 !important; box-shadow: none !important; box-sizing: border-box !important; transition: transform 0.2s ease !important; } .dn-price-card__split-btn:hover { transform: translateY(-2px) !important; } .dn-price-card__split-btn:active { transform: scale(0.98) !important; } .dn-price-card__split-btn .dn-btn-split__label { flex: 1 !important; height: 54px !important; background: #FB724E !important; color: #FFFFFF !important; border-radius: 100px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-family: var(--dn-font-main, 'Inter', sans-serif) !important; font-size: 16px !important; font-weight: 600 !important; padding: 0 16px !important; white-space: nowrap !important; box-shadow: 0 4px 14px rgba(251, 114, 78, 0.35) !important; transition: background 0.2s ease !important; box-sizing: border-box !important; } .dn-price-card__split-btn .dn-btn-split__circle { width: 54px !important; height: 54px !important; background: #FB724E !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; box-shadow: 0 4px 14px rgba(251, 114, 78, 0.35) !important; transition: background 0.2s ease !important; box-sizing: border-box !important; margin-left: 0 !important; } .dn-price-card__split-btn:hover .dn-btn-split__label, .dn-price-card__split-btn:hover .dn-btn-split__circle { background: #E85E3A !important; } .dn-price-card__split-btn .dn-btn-split__circle svg { display: block !important; transition: transform 0.2s ease !important; } .dn-price-card__split-btn:hover .dn-btn-split__circle svg { transform: translateX(3px) !important; } @media (max-width: 480px) { .dn-price-card__split-btn .dn-btn-split__label { font-size: 14px !important; padding: 0 10px !important; } } /* ================================================================ SERVICES CARDS (#USLUGI): EXACT FIGMA CONCAVE NOTCH & ARROW ================================================================ */ .dn-services-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .dn-service-tile { background: #FFFFFF !important; border-radius: 24px !important; padding: 16px !important; box-sizing: border-box !important; text-decoration: none !important; display: flex !important; flex-direction: column !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } .dn-service-tile:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important; } .dn-service-tile__visual-wrap { position: relative !important; width: 100% !important; height: 170px !important; margin-bottom: 20px !important; overflow: visible !important; } .dn-service-tile__photo { width: 100% !important; height: 170px !important; background-size: cover !important; background-position: center !important; clip-path: url(#serviceTileClip) !important; -webkit-clip-path: url(#serviceTileClip) !important; } .dn-service-tile__arrow { position: absolute !important; right: 0 !important; bottom: 0 !important; width: 48px !important; height: 48px !important; background: #FB724E !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 2 !important; box-shadow: 0 4px 14px rgba(251, 114, 78, 0.35) !important; transition: transform 0.2s ease, background 0.2s ease !important; } .dn-service-tile:hover .dn-service-tile__arrow { background: #E85E3A !important; transform: scale(1.06) !important; } .dn-service-tile__arrow svg { display: block !important; width: 17px !important; height: 15px !important; } .dn-service-tile__title { font-family: var(--dn-font-title, 'Inter', sans-serif) !important; font-weight: 700 !important; font-size: 19px !important; line-height: 1.25 !important; text-transform: uppercase !important; color: #2C2C2C !important; margin: 0 0 8px 0 !important; } .dn-service-tile__desc { font-family: var(--dn-font-main, 'Inter', sans-serif) !important; font-size: 15px !important; line-height: 1.4 !important; color: #777777 !important; margin: 0 !important; } @media (max-width: 992px) { .dn-services-grid { display: flex !important; flex-direction: column !important; gap: 16px !important; } .dn-service-tile { width: 100% !important; max-width: 327px !important; margin: 0 auto !important; } } /* ================================================================ 7 FIGMA VERIFICATION FIXES (ISSUE 1..7) ================================================================ */ /* Issue 1: Folder logo in #dokumenty */ .dn-docs-visual { position: relative !important; } .dn-docs-visual__logo { position: absolute !important; left: 46% !important; top: 45% !important; transform: translate(-50%, -50%) !important; width: 41px !important; height: 31px !important; pointer-events: none !important; z-index: 2 !important; } /* Issue 2: Vertical alignment of checkbox and title in #dokumenty */ .dn-doc-item { display: flex !important; align-items: center !important; } .dn-doc-item--tall, .dn-doc-item:has(.dn-doc-item__hint), .dn-doc-item:has(.dn-doc-item__sub) { align-items: flex-start !important; } .dn-doc-item__check { margin-top: 0 !important; flex-shrink: 0 !important; } .dn-doc-item--tall .dn-doc-item__check, .dn-doc-item:has(.dn-doc-item__hint) .dn-doc-item__check { margin-top: 2px !important; } .dn-doc-item__title { margin: 0 !important; line-height: 1.25 !important; } /* Issue 4: Exact Figma stat icons in "Почему с нами спокойнее" */ .dn-why-card__icon-box { width: 40px !important; height: 40px !important; border-radius: 6px !important; background: transparent !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; flex-shrink: 0 !important; } .dn-why-card__badge-img { width: 40px !important; height: 40px !important; display: block !important; } /* Issue 5: Spacing above .dn-band from floating sidebar & between sections */ #dn-content.dn-layout { margin-bottom: 80px !important; } .dn-band--why { margin-top: 40px !important; margin-bottom: 80px !important; } .dn-band--countries-table, .dn-band--table { margin-top: 40px !important; margin-bottom: 80px !important; } /* Issue 6: Split button for "Помогите выбрать" */ .dn-btn-split--coral { display: inline-flex !important; align-items: center !important; gap: 0 !important; background: transparent !important; border: none !important; cursor: pointer !important; padding: 0 !important; text-decoration: none !important; transition: transform 0.2s ease !important; } .dn-btn-split--coral:hover { transform: translateY(-2px) !important; } .dn-btn-split--coral:active { transform: translateY(0) !important; } .dn-btn-split--coral .dn-btn-split__label { height: 55px !important; background: #FB724E !important; color: #FFFFFF !important; border-radius: 100px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-family: var(--dn-font, var(--font-main, 'Montserrat', sans-serif)) !important; font-size: 16px !important; font-weight: 500 !important; padding: 0 32px !important; white-space: nowrap !important; box-shadow: 0 4px 15px rgba(243, 104, 73, 0.2) !important; transition: background 0.2s ease, box-shadow 0.2s ease !important; border: none !important; } .dn-btn-split--coral .dn-btn-split__circle { width: 55px !important; height: 55px !important; background: #FB724E !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; margin-left: -2px !important; box-shadow: 0 4px 15px rgba(243, 104, 73, 0.2) !important; transition: background 0.2s ease, box-shadow 0.2s ease !important; border: none !important; } .dn-btn-split--coral:hover .dn-btn-split__label, .dn-btn-split--coral:hover .dn-btn-split__circle { background: #E55839 !important; box-shadow: 0 10px 25px rgba(243, 104, 73, 0.35) !important; } .dn-btn-split--coral .dn-btn-split__circle svg { display: block !important; transition: transform 0.2s ease !important; } .dn-btn-split--coral:hover .dn-btn-split__circle svg { transform: translateX(3px) !important; } /* Issue 7: Compact table rows matching Figma 58px */ .dn-countries-table th { padding: 16px 24px !important; font-size: 14px !important; font-weight: 500 !important; color: #777777 !important; } .dn-countries-table td { padding: 11px 24px !important; height: 58px !important; box-sizing: border-box !important; font-size: 16px !important; } .dn-countries-table tr.is-selected td { height: 58px !important; background: #FFFFFF !important; } /* Service tiles arrow alignment */ .dn-service-tile__arrow { display: inline-flex !important; align-items: center !important; justify-content: center !important; } .dn-service-tile__arrow svg { display: block !important; } /* ================================================================ FIX: TABLE OF COUNTRIES STRICT ALIGNMENT & CONTINUOUS DIVIDERS ================================================================ */ .dn-countries-table { border-collapse: separate !important; border-spacing: 0 !important; width: 100% !important; } .dn-countries-table tr { height: 58px !important; } .dn-countries-table th { padding: 16px 24px !important; font-size: 14px !important; font-weight: 500 !important; color: #777777 !important; text-align: left !important; vertical-align: middle !important; border-bottom: 1px solid #EAE6E1 !important; } .dn-countries-table td { display: table-cell !important; height: 58px !important; padding: 0 24px !important; vertical-align: middle !important; box-sizing: border-box !important; font-size: 16px !important; border-bottom: 1px solid #EAE6E1 !important; border-top: none !important; } .dn-countries-table tr:last-child td { border-bottom: none !important; } .dn-ct-col-country { display: table-cell !important; vertical-align: middle !important; padding: 0 24px !important; white-space: nowrap !important; } .dn-ct-country-wrap { display: inline-flex !important; align-items: center !important; gap: 14px !important; white-space: nowrap !important; } .dn-ct-flag { width: 36px !important; height: 36px !important; border-radius: 50% !important; display: block !important; object-fit: cover !important; flex-shrink: 0 !important; margin: 0 !important; } .dn-ct-name { font-family: var(--dn-font, var(--font-main, 'Montserrat', sans-serif)) !important; font-size: 18px !important; font-weight: 600 !important; text-transform: uppercase !important; color: #111111 !important; } /* Active Selected Row (Spain) */ .dn-countries-table tr.is-selected td { background: #FFFFFF !important; height: 58px !important; border-bottom: 1px solid #EAE6E1 !important; } .dn-countries-table tr.is-selected td:first-child { border-left: 4px solid #FB724E !important; padding-left: 20px !important; } /* ========================================================================== FIXES FOR 8 USER REMARKS (Desktop 3392px / 1440px / Mobile) ========================================================================== */ /* 1. Country table links: Orange vector arrow */ .dn-ct-link { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-size: 16px !important; line-height: 22px !important; font-weight: 500 !important; color: #2B2B2B !important; text-decoration: none !important; transition: color 0.2s ease !important; } .dn-ct-link__arrow { width: 12px !important; height: 11px !important; flex-shrink: 0 !important; transition: transform 0.2s ease !important; } .dn-ct-link:hover { color: #FB724E !important; } .dn-ct-link:hover .dn-ct-link__arrow { transform: translateX(3px) !important; } /* 2. Split Button for Case Card ('Все кейсы') */ .dn-btn-split--case { display: inline-flex !important; align-items: center !important; text-decoration: none !important; cursor: pointer !important; border: none !important; background: transparent !important; padding: 0 !important; user-select: none !important; } .dn-btn-split--case .dn-btn-split__label { height: 50px !important; padding: 0 28px !important; background: #FB724E !important; color: #FFFFFF !important; font-family: var(--dn-font, 'Montserrat', sans-serif) !important; font-size: 16px !important; font-weight: 600 !important; border-radius: 100px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 15px rgba(243, 104, 73, 0.2) !important; transition: background 0.2s ease, box-shadow 0.2s ease !important; white-space: nowrap !important; border: none !important; } .dn-btn-split--case .dn-btn-split__circle { width: 50px !important; height: 50px !important; background: #FB724E !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; margin-left: -2px !important; box-shadow: 0 4px 15px rgba(243, 104, 73, 0.2) !important; transition: background 0.2s ease, box-shadow 0.2s ease !important; border: none !important; } .dn-btn-split--case:hover .dn-btn-split__label, .dn-btn-split--case:hover .dn-btn-split__circle { background: #E55839 !important; box-shadow: 0 10px 25px rgba(243, 104, 73, 0.35) !important; } .dn-btn-split--case .dn-btn-split__circle svg { display: block !important; transition: transform 0.2s ease !important; } .dn-btn-split--case:hover .dn-btn-split__circle svg { transform: translateX(3px) !important; } /* 3, 4, 5. Proof section: equal heights (365px), tall media, badge on photo */ .dn-proof-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; align-items: stretch !important; } .dn-case-card { background: #2B2B2B !important; border-radius: 20px !important; padding: 0 !important; display: grid !important; grid-template-columns: 1fr 220px !important; overflow: hidden !important; height: 365px !important; box-sizing: border-box !important; } .dn-case-card__content { padding: 36px 30px 36px 36px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; box-sizing: border-box !important; } .dn-case-card__tag { font-size: 16px !important; font-weight: 500 !important; color: #FB724E !important; margin-bottom: 8px !important; } .dn-case-card__title { font-size: 22px !important; line-height: 1.25 !important; font-weight: 600 !important; color: #FFFFFF !important; margin: 0 !important; } .dn-case-card__result { font-size: 16px !important; color: #CCCCCC !important; margin: 0 !important; } .dn-case-card__actions { display: flex !important; align-items: center !important; margin-top: 10px !important; } /* Media photo occupies right 220px and full 365px height */ .dn-case-card__media { position: relative !important; width: 220px !important; height: 365px !important; min-height: 365px !important; background-size: cover !important; background-position: center !important; border-radius: 0 20px 20px 0 !important; overflow: hidden !important; } /* 3. Badge 13 рабочих дней ON THE PHOTO */ .dn-case-card__badge { position: absolute !important; bottom: 20px !important; left: 50% !important; transform: translateX(-50%) !important; width: 170px !important; height: 44px !important; background: #F6F1ED !important; border-radius: 28px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; box-sizing: border-box !important; color: #2B2B2B !important; font-size: 14px !important; font-weight: 500 !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important; white-space: nowrap !important; z-index: 2 !important; padding: 0 !important; } .dn-case-card__badge-icon { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; } /* 5. Reviews Column: exactly 365px height in total (175 + 15 + 175) */ .dn-reviews-col { display: flex !important; flex-direction: column !important; gap: 15px !important; height: 365px !important; box-sizing: border-box !important; } .dn-review-item { flex: 1 1 0 !important; height: 175px !important; min-height: 175px !important; max-height: 175px !important; background: #FFFFFF !important; border: 1px solid #E0E0E0 !important; border-radius: 20px !important; padding: 22px 28px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; } .dn-review-item__head { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 6px !important; } .dn-review-item__author { display: flex !important; align-items: center !important; gap: 14px !important; } .dn-review-item__avatar { width: 50px !important; height: 50px !important; border-radius: 50% !important; background: #F6F1ED !important; color: #FB724E !important; font-weight: 700 !important; font-size: 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .dn-review-item__name { font-size: 18px !important; font-weight: 700 !important; color: #2B2B2B !important; line-height: 1.2 !important; } .dn-review-item__country { font-size: 14px !important; color: #777777 !important; margin-top: 2px !important; } .dn-review-item__quote { font-size: 38px !important; line-height: 1 !important; color: #FB724E !important; font-family: Georgia, serif !important; opacity: 0.8 !important; } .dn-review-item__text { font-size: 15px !important; line-height: 1.4 !important; color: #555555 !important; margin: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } @media (max-width: 992px) { .dn-case-card { height: auto !important; grid-template-columns: 1fr !important; } .dn-case-card__media { width: 100% !important; height: 260px !important; min-height: 260px !important; border-radius: 0 0 20px 20px !important; } .dn-reviews-col { height: auto !important; } .dn-review-item { height: auto !important; min-height: auto !important; max-height: none !important; } } /* 6. Consultation Route Graphic in background */ .dn-consult-card { position: relative !important; overflow: hidden !important; background: var(--dn-white) !important; border-radius: 26px !important; padding: 50px 60px !important; display: grid !important; grid-template-columns: 1fr 610px !important; gap: 40px !important; align-items: center !important; } .dn-consult-card__info, .dn-consult-card__form-card { position: relative !important; z-index: 2 !important; } .dn-consult-card__route-graphic { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; pointer-events: none !important; z-index: 1 !important; overflow: hidden !important; } .dn-consult-route-line { position: absolute !important; left: 20% !important; top: 25% !important; width: 60% !important; max-width: 774px !important; height: auto !important; opacity: 0.85 !important; pointer-events: none !important; } .dn-consult-route-float { position: absolute !important; border-radius: 50% !important; pointer-events: none !important; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.08)) !important; } .dn-consult-route-float--spain { width: 78px !important; height: 78px !important; left: 33% !important; top: 34% !important; } .dn-consult-route-float--traveler { width: 85px !important; height: 85px !important; left: 42% !important; top: 45% !important; } .dn-consult-route-float--icon1 { width: 42px !important; height: 42px !important; left: 40% !important; top: 68% !important; } .dn-consult-route-float--icon2 { width: 42px !important; height: 42px !important; left: 44% !important; top: 28% !important; } @media (max-width: 1200px) { .dn-consult-card { grid-template-columns: 1fr !important; padding: 36px 24px !important; } .dn-consult-card__route-graphic { display: none !important; } } /* 7. Consultation items: background fits text width (not 100%) */ .dn-consult-card__items { display: flex !important; flex-direction: column !important; align-items: flex-start !important; /* ensures items don't stretch */ gap: 15px !important; margin: 32px 0 0 !important; } .dn-consult-bullet { width: fit-content !important; max-width: 100% !important; display: inline-flex !important; align-items: center !important; gap: 14px !important; padding: 0 24px 0 16px !important; height: 55px !important; border-radius: 20px !important; background: #F6F1ED !important; border: 1px solid #E0E0E0 !important; box-sizing: border-box !important; font-size: 16px !important; font-weight: 500 !important; color: #2B2B2B !important; } .dn-consult-bullet__icon { width: 32px !important; height: 32px !important; border-radius: 8px !important; background: #FB724E !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } /* 8. Split Button for Consultation Form */ .dn-btn-split--submit { width: 100% !important; display: flex !important; align-items: center !important; cursor: pointer !important; border: none !important; background: transparent !important; padding: 0 !important; margin-top: 24px !important; user-select: none !important; } .dn-btn-split--submit .dn-btn-split__label { flex: 1 1 auto !important; height: 60px !important; background: #FB724E !important; color: #FFFFFF !important; font-family: var(--dn-font, 'Montserrat', sans-serif) !important; font-size: 16px !important; font-weight: 600 !important; border-radius: 100px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 15px rgba(243, 104, 73, 0.2) !important; transition: background 0.2s ease, box-shadow 0.2s ease !important; border: none !important; } .dn-btn-split--submit .dn-btn-split__circle { width: 60px !important; height: 60px !important; background: #FB724E !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; margin-left: -2px !important; box-shadow: 0 4px 15px rgba(243, 104, 73, 0.2) !important; transition: background 0.2s ease, box-shadow 0.2s ease !important; border: none !important; } .dn-btn-split--submit:hover .dn-btn-split__label, .dn-btn-split--submit:hover .dn-btn-split__circle { background: #E55839 !important; box-shadow: 0 10px 25px rgba(243, 104, 73, 0.35) !important; } .dn-btn-split--submit .dn-btn-split__circle svg { display: block !important; transition: transform 0.2s ease !important; } .dn-btn-split--submit:hover .dn-btn-split__circle svg { transform: translateX(4px) !important; } /* ================= 4 FIXES ADDITIONS ================= */ .dn-consult-route-float--icon1, .dn-consult-route-float--icon2 { width: 42px !important; height: 42px !important; background: #F6F1ED !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important; } .dn-consult-route-float--icon1 svg, .dn-consult-route-float--icon2 svg { display: block; } .sec11-buttons-group { display: flex; gap: 16px; align-items: center; position: relative; z-index: 2; } .sec11-buttons-group .sec11-btn { border: none; background: transparent; padding: 0; } .sec11-buttons-group .sec11-btn__text { min-width: 170px; height: 60px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); } @media (max-width: 767px) { .sec11-buttons-group { flex-direction: column; width: 100%; gap: 10px; } .sec11-buttons-group .sec11-btn { width: 100%; } .sec11-buttons-group .sec11-btn__text { width: 100%; height: 50px; } } /* ========================================================================== MOBILE AUDIT FIX: REDUCED SIDE MARGINS, ADAPTIVE TYPOGRAPHY & TABLE OVERFLOW Applied strictly for screens <= 768px (Mobile & Tablet portrait) ========================================================================== */ @media (max-width: 768px) { /* --- 1. VIEWPORT & WRAPPER: REDUCED SIDE MARGINS (15px each side instead of 24px-33px) --- */ html, body, .digital-nomad-page { overflow-x: hidden !important; max-width: 100vw !important; } .dn-wrap, .dn-hero__container.dn-wrap, .dn-layout.dn-wrap { width: calc(100% - 30px) !important; max-width: 500px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* Make all top-level mobile sections and cards 100% fluid inside the wrap */ .dn-hero, .dn-hero__card, .dn-hero__visual, .dn-layout, .dn-article, .dn-article section.dn-card, .dn-article section.dn-quiz-block, .dn-article section.dn-services-block, .dn-article section.dn-steps-faq-block, .dn-faq-section, .dn-card, .dn-calc, .dn-calc__controls, .dn-calc__summary, .dn-price-card, .dn-advantage-card, .dn-expert-cta-card, .dn-proof-card, .dn-consult-card, .dn-telegram-card, .dn-toc-wrap, .dn-where-table-wrap, .dn-countries-table-wrap { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Inner card padding - balanced for mobile */ .dn-card__inner { padding: 22px 16px !important; width: 100% !important; box-sizing: border-box !important; } /* Make all child blocks fill 100% of inner card */ .dn-criteria-grid, .dn-criterion-card, .dn-docs-layout, .dn-docs-right, .dn-docs-columns, .dn-docs-col, .dn-doc-item, .dn-docs-notice, .dn-faq-grid, .dn-faq-card, .dn-banner-banner, .dn-calc__field, .dn-calc__inputs-grid, .dn-expert-mobile-card, .dn-quiz-block .dn-quiz__row, .dn-quiz-block .dn-quiz__content, .dn-consult-card__route-wrap, .dn-consult-card__items { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* --- 2. ADAPTIVE FLUID TYPOGRAPHY --- */ /* Hero Main Title & Spans */ .dn-hero__title, .dn-hero__title span { font-size: clamp(20px, 5.8vw, 27px) !important; line-height: 1.15 !important; letter-spacing: -0.01em !important; text-transform: uppercase !important; overflow-wrap: break-word !important; word-break: normal !important; display: block !important; } .dn-hero__title { margin: 12px 0 10px !important; } /* Hero Subtitle */ .dn-hero__subtitle { font-size: clamp(13px, 3.8vw, 15px) !important; line-height: 1.35 !important; margin: 0 0 20px !important; overflow-wrap: break-word !important; } /* Hero Breadcrumbs */ .dn-crumbs { font-size: clamp(9px, 2.5vw, 11px) !important; gap: 4px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; display: flex !important; align-items: center !important; } .dn-crumbs__current { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* All Section H2 Headings */ .dn-h2, .dn-h2--sub { font-size: clamp(20px, 5.5vw, 26px) !important; line-height: 1.2 !important; letter-spacing: 0 !important; overflow-wrap: break-word !important; word-break: normal !important; } /* Card Notches (Надзаголовки) */ .dn-card-notch { font-size: clamp(12px, 3.2vw, 14px) !important; line-height: 1.2 !important; } /* Leads */ .dn-lead, .dn-card__lead { font-size: clamp(14px, 3.6vw, 16px) !important; line-height: 1.4 !important; overflow-wrap: break-word !important; } /* Criteria Card Titles */ .dn-criterion-card__title { font-size: clamp(15px, 4.2vw, 18px) !important; line-height: 1.25 !important; max-width: calc(100% - 40px) !important; } .dn-criterion-card__text { font-size: clamp(13px, 3.5vw, 14px) !important; line-height: 1.35 !important; } /* Calculator Amounts */ .dn-calc__amount, .dn-calc__amount span { font-size: clamp(24px, 6.5vw, 32px) !important; line-height: 1.1 !important; } /* Price Card Amounts */ .dn-price-card__amount, .dn-price-card__amount span { font-size: clamp(26px, 7vw, 34px) !important; line-height: 1.1 !important; } /* Button Labels */ .dn-btn, .dn-btn span, .dn-btn-split__label { font-size: clamp(13px, 3.8vw, 16px) !important; line-height: 1.2 !important; } /* Hero Mobile Pills Grid (2x2) */ .dn-hero__pills--mobile { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; order: 3 !important; margin: 15px auto 0 !important; padding: 0 !important; box-sizing: border-box !important; } .dn-hero__pill { width: 100% !important; max-width: 100% !important; min-height: 67px !important; height: auto !important; box-sizing: border-box !important; } /* --- 3. SECTION 3 (#kak-podat): FIX TABLE OVERFLOW (FIGMA 292:953 COMPACT 2-COL CARDS) --- */ .dn-where-table-wrap { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; margin-bottom: 20px !important; box-sizing: border-box !important; } .dn-where-table { display: block !important; width: 100% !important; max-width: 100% !important; border: 1px solid var(--dn-border) !important; border-radius: 16px !important; overflow: hidden !important; background: #FFFFFF !important; box-sizing: border-box !important; } .dn-where-table thead { display: block !important; width: 100% !important; } .dn-where-table thead tr { display: flex !important; width: 100% !important; } .dn-where-th--title { display: none !important; /* Hide 'Параметр' header column */ } .dn-where-th--beige { flex: 1 1 50% !important; width: 50% !important; padding: 12px 10px !important; box-sizing: border-box !important; background: var(--dn-beige) !important; border-right: 1px solid var(--dn-border) !important; border-bottom: 1px solid var(--dn-border) !important; } .dn-where-th--coral { flex: 1 1 50% !important; width: 50% !important; padding: 12px 10px !important; box-sizing: border-box !important; background: var(--dn-coral) !important; border-bottom: 1px solid var(--dn-border) !important; color: #FFFFFF !important; } .dn-where-th__content { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 13px !important; font-weight: 600 !important; } .dn-where-th__icon { width: 24px !important; height: 24px !important; flex-shrink: 0 !important; } .dn-where-th__icon svg { width: 24px !important; height: 24px !important; display: block !important; } .dn-where-table tbody { display: block !important; width: 100% !important; } .dn-where-table tbody tr { display: flex !important; flex-wrap: wrap !important; width: 100% !important; border-bottom: 1px solid var(--dn-border) !important; padding: 12px 12px !important; box-sizing: border-box !important; height: auto !important; min-height: auto !important; background: #FFFFFF !important; } .dn-where-table tbody tr.dn-where-tr--tint { background: #FDFBF9 !important; } .dn-where-table tbody tr:last-child { border-bottom: none !important; } .dn-where-td--label { width: 100% !important; flex: 0 0 100% !important; font-size: 12px !important; font-weight: 600 !important; color: #8C8C8C !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; padding: 0 0 6px 0 !important; border: none !important; height: auto !important; background: transparent !important; } .dn-where-td--val { width: 50% !important; flex: 0 0 50% !important; font-size: 13px !important; line-height: 1.35 !important; color: #2C2C2C !important; padding: 0 8px 0 0 !important; border: none !important; height: auto !important; box-sizing: border-box !important; background: transparent !important; } .dn-where-td--val:last-child { padding: 0 0 0 8px !important; border-left: 1px solid rgba(0, 0, 0, 0.08) !important; } /* --- 4. COUNTRIES COMPARISON TABLE (#sravnenie) WRAPPER ISOLATION --- */ .dn-countries-table-sec, .dn-countries-table-wrap { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; box-sizing: border-box !important; } } /* ========================================================================== DESKTOP AUDIT USER-REQUESTED FIXES (PIXEL PERFECT 1680px) ========================================================================== */ /* 1. All H2 headings MUST be uppercase as requested by user */ .dn-h2, #kto-mozhet .dn-h2, #check .dn-h2, #dohod .dn-h2, #kak-podat .dn-h2, #stoimost .dn-h2, #uslugi .dn-h2, #dokumenty .dn-h2, #etapy .dn-h2, .dn-band--why .dn-h2, .dn-band--countries-table .dn-h2, .dn-band--proof .dn-h2, .dn-band--consult .dn-h2, .dn-band--other-countries .dn-h2, .section-telegram .sec11-title { text-transform: uppercase !important; } @media (min-width: 1025px) { /* 2. Hero: flag border smaller + 3 pills span full width */ .dn-hero__flag-badge, .dn-hero__flag-badge--mobile { padding: 2px !important; } .dn-hero__pills--desktop { position: absolute !important; bottom: 20px !important; left: 20px !important; right: 20px !important; z-index: 2 !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; padding: 0 !important; width: auto !important; } /* 3. Expand TOC Sidebar to 374px */ .dn-layout { display: grid !important; grid-template-columns: 374px minmax(0, 1fr) !important; gap: 24px !important; } .dn-toc-wrap, .dn-toc-card { width: 374px !important; max-width: 374px !important; } /* 4. Quiz: full width matching other blocks */ .dn-quiz-block { width: 100% !important; max-width: 100% !important; } .dn-quiz { width: 100% !important; max-width: 100% !important; } .dn-quiz__row { display: grid !important; grid-template-columns: 374px 1fr !important; gap: 20px !important; width: 100% !important; height: 500px !important; box-sizing: border-box !important; } .dn-quiz__photo { width: 374px !important; height: 500px !important; border-radius: 30px !important; } .dn-quiz__content { width: 100% !important; height: 500px !important; } /* 5. Dohod: move right dark card and lead text closer to right edge */ #dohod .dn-sec-head { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; width: 100% !important; gap: 24px !important; } #dohod .dn-sec-head .dn-lead { max-width: 440px !important; margin-left: auto !important; text-align: left !important; } #dohod .dn-calc { display: grid !important; grid-template-columns: 1fr 331px !important; gap: 20px !important; width: 100% !important; max-width: 100% !important; } #dohod .dn-calc__summary { width: 331px !important; margin-left: auto !important; } .dn-calc__btn-submit { width: 100% !important; height: 60px !important; background: #FB724E !important; color: #FFFFFF !important; border-radius: 100px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; font-family: var(--dn-font-main, 'Inter', sans-serif) !important; font-size: 16px !important; font-weight: 500 !important; border: none !important; cursor: pointer !important; padding: 0 20px !important; box-shadow: 0 4px 14px rgba(251, 114, 78, 0.35) !important; transition: background 0.2s ease, transform 0.2s ease !important; } .dn-calc__btn-submit:hover { background: #E85E3A !important; transform: translateY(-2px) !important; } .dn-calc__btn-submit .dn-calc__btn-circle { background: transparent !important; width: auto !important; height: auto !important; display: flex !important; align-items: center !important; margin: 0 !important; } .dn-calc__btn-submit .dn-calc__btn-circle svg { width: 20px !important; height: 20px !important; } .dn-calc__btn-submit .dn-calc__btn-circle svg path { stroke: #FFFFFF !important; stroke-width: 2.2 !important; } /* 6. Kak podat: table full width without empty space on right, compact rows */ .dn-where-table-wrap { width: 100% !important; max-width: 100% !important; } .dn-where-table { width: 100% !important; max-width: 100% !important; table-layout: auto !important; } .dn-where-table th { height: 52px !important; padding: 0 20px !important; } .dn-where-table td:first-child { width: 24% !important; padding: 0 20px !important; } .dn-where-table td:nth-child(2) { width: 38% !important; padding: 0 20px !important; } .dn-where-table td:nth-child(3) { width: 38% !important; padding: 0 20px !important; } .dn-where-table tbody tr:nth-child(1) td { height: 60px !important; } .dn-where-table tbody tr:nth-child(2) td, .dn-where-tr--tint td { height: 65px !important; } .dn-where-table tbody tr:nth-child(3) td { height: 60px !important; } /* 8. Dokumenty: logo horizontally centered on folder */ .dn-docs-visual__logo { position: absolute !important; left: 50% !important; top: 45% !important; transform: translate(-50%, -50%) !important; } /* 9. Countries Table: larger font + right aligned action column */ .dn-countries-table { width: 100% !important; } .dn-ct-name { font-size: 20px !important; line-height: 24px !important; font-weight: 600 !important; } .dn-ct-col-time { font-size: 18px !important; line-height: 24px !important; font-weight: 500 !important; } .dn-ct-col-price { font-size: 20px !important; line-height: 24px !important; font-weight: 600 !important; } .dn-ct-badge-here { font-size: 16px !important; font-weight: 700 !important; } .dn-ct-link { font-size: 16px !important; font-weight: 500 !important; } .dn-countries-table th { font-size: 16px !important; font-weight: 600 !important; } .dn-countries-table th:last-child, .dn-ct-col-action { text-align: right !important; padding-right: 40px !important; } /* 10. Reviews SVG quote */ .dn-review-item__quote { display: flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 26px !important; font-size: 0 !important; } .dn-review-item__quote svg { display: block !important; width: 32px !important; height: 26px !important; } /* 11. Consult: remove dot background + legal checkbox */ .dn-consult-card__route-graphic { display: block !important; background: transparent !important; background-image: none !important; } .dn-lead-form__consent { display: flex !important; align-items: flex-start !important; gap: 10px !important; margin: 16px 0 20px 0 !important; cursor: pointer !important; } .dn-lead-form__checkbox { width: 18px !important; height: 18px !important; accent-color: #FB724E !important; margin-top: 2px !important; flex-shrink: 0 !important; cursor: pointer !important; } .dn-lead-form__consent-text { font-family: var(--dn-font-main, 'Inter', sans-serif) !important; font-size: 13px !important; line-height: 1.4 !important; color: #777777 !important; } .dn-lead-form__consent-text a { color: #FB724E !important; text-decoration: underline !important; } } /* ========================================================================== 24 USER AUDIT FIXES & #USLUGI PIXEL PERFECT FIGMA OVERRIDES ========================================================================== */ /* --- Item 1 & 2: Hero card H1 up, actions down (Desktop) --- */ @media (min-width: 993px) { .dn-hero__card { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; padding: 36px !important; box-sizing: border-box !important; } .dn-hero__card-top { margin-bottom: 20px !important; } .dn-hero__title { margin: 0 0 16px 0 !important; } .dn-hero__subtitle { margin: 0 0 24px 0 !important; } .dn-hero__actions { margin-top: auto !important; margin-bottom: 0 !important; display: flex !important; flex-direction: column !important; gap: 16px !important; } } /* --- Items 3, 4, 7, 8, 9, 10: #kto-mozhet section --- */ #kto-mozhet .dn-h2 { font-family: var(--dn-font-title, 'Bounded', sans-serif) !important; font-size: 35px !important; font-weight: 700 !important; line-height: 1.2 !important; text-transform: uppercase !important; color: #2C2C2C !important; } .dn-criterion-card { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; gap: 6px !important; min-height: 160px !important; box-sizing: border-box !important; } .dn-criterion-card__title { font-family: var(--dn-font-title, 'Bounded', sans-serif) !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.25 !important; text-transform: uppercase !important; color: #2C2C2C !important; margin: 0 !important; } .dn-criterion-card__val { font-family: var(--dn-font-main, 'Inter', sans-serif) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.4 !important; color: #2C2C2C !important; margin-top: 4px !important; } /* --- Items 5 & 6: Quiz section #check --- */ .dn-quiz__photo { width: 100% !important; height: 100% !important; min-height: 480px !important; background-image: url('../images/spain/quiz_consult_photo.webp') !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; border-radius: 20px !important; } #check .dn-quiz__title, .dn-quiz__title { font-family: var(--dn-font-title, 'Bounded', sans-serif) !important; font-size: 35px !important; font-weight: 600 !important; line-height: 1.2 !important; text-transform: none !important; color: #2C2C2C !important; } /* --- Items 11, 12, 13, 14, 15: Headings & Tables NOT uppercase --- */ #dohod .dn-h2 { font-family: var(--dn-font-title, "Bounded", sans-serif) !important; font-size: 35px !important; font-weight: 600 !important; line-height: 1.2 !important; text-transform: uppercase !important; color: #2C2C2C !important; } #kak-podat .dn-h2 { font-family: var(--dn-font-title, "Bounded", sans-serif) !important; font-size: 35px !important; font-weight: 600 !important; line-height: 1.2 !important; text-transform: uppercase !important; color: #2C2C2C !important; } #kak-podat .dn-where-th__content span, #kak-podat .dn-where-table th { text-transform: uppercase !important; } #stoimost .dn-h2 { font-family: var(--dn-font-title, "Bounded", sans-serif) !important; font-size: 35px !important; font-weight: 600 !important; line-height: 1.2 !important; text-transform: uppercase !important; color: #2C2C2C !important; } /* --- Item 16: Price card value centered vertically --- */ .dn-price-card { display: flex !important; flex-direction: column !important; } .dn-price-card__val { margin: auto 0 !important; } /* --- Item 17: Step card desc pure black --- */ .dn-step-card__desc { color: #111111 !important; } /* --- Item 18: FAQ toggle button & SVG --- */ .dn-faq-card__toggle { background: transparent !important; border: none !important; cursor: pointer !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; flex-shrink: 0 !important; transition: transform 0.25s ease !important; } .dn-faq-card.is-open .dn-faq-card__toggle { transform: rotate(180deg) !important; } .dn-faq-card__toggle svg { display: block !important; width: 24px !important; height: 24px !important; } /* --- Item 20: Country table country name --- */ .dn-ct-name { font-family: var(--dn-font-title, 'Bounded', sans-serif) !important; font-size: 20px !important; font-weight: 600 !important; text-transform: uppercase !important; color: #2C2C2C !important; } /* --- Items 21 & 24: Outline coral buttons text black --- */ .dn-band--proof .dn-band-head-row .dn-btn, .dn-band--other-countries .dn-band-head-row .dn-btn { color: #2C2C2C !important; border-color: #E0E0E0 !important; background: transparent !important; transition: all 0.2s ease !important; } .dn-band--proof .dn-band-head-row .dn-btn:hover, .dn-band--other-countries .dn-band-head-row .dn-btn:hover { background: #2C2C2C !important; color: #FFFFFF !important; border-color: #2C2C2C !important; } /* --- #uslugi: Services block 3 cards with concave cutout & crisp arrows --- */ .dn-services-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; width: 100% !important; box-sizing: border-box !important; } .dn-service-tile { background: #FFFFFF !important; border-radius: 24px !important; padding: 16px !important; box-sizing: border-box !important; text-decoration: none !important; display: flex !important; flex-direction: column !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } .dn-service-tile:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important; } .dn-service-tile__visual-wrap { position: relative !important; width: 100% !important; aspect-ratio: 375 / 199 !important; height: auto !important; margin-bottom: 16px !important; overflow: visible !important; } .dn-service-tile__photo { width: 100% !important; height: 100% !important; background-size: cover !important; background-position: center !important; clip-path: url(#serviceTileClip) !important; -webkit-clip-path: url(#serviceTileClip) !important; display: block !important; } .dn-service-tile__arrow { position: absolute !important; right: 0 !important; bottom: 0 !important; width: 16% !important; aspect-ratio: 1 !important; height: auto !important; background: #FB724E !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 2 !important; box-shadow: 0 4px 12px rgba(251, 114, 78, 0.35) !important; transition: transform 0.2s ease, background 0.2s ease !important; } .dn-service-tile:hover .dn-service-tile__arrow { background: #E85E3A !important; transform: scale(1.06) !important; } .dn-service-tile__arrow svg { display: block !important; width: 45% !important; height: 45% !important; } .dn-service-tile__title { font-family: var(--dn-font-title, 'Bounded', sans-serif) !important; font-weight: 700 !important; font-size: 19px !important; line-height: 1.25 !important; text-transform: uppercase !important; color: #2C2C2C !important; margin: 0 0 6px 0 !important; } .dn-service-tile__desc { font-family: var(--dn-font-main, 'Inter', sans-serif) !important; font-size: 15px !important; line-height: 1.4 !important; color: #777777 !important; margin: 0 !important; } @media (max-width: 992px) { .dn-services-grid { grid-template-columns: 1fr !important; } .dn-service-tile { width: 100% !important; max-width: 340px !important; margin: 0 auto !important; } } /* --- Mobile Hero Title Overflow Fix --- */ @media (max-width: 768px) { .dn-hero__title, .dn-hero__title span { font-size: clamp(18px, 5.2vw, 24px) !important; line-height: 1.15 !important; letter-spacing: -0.01em !important; overflow-wrap: break-word !important; word-break: normal !important; max-width: 100% !important; box-sizing: border-box !important; } .dn-hero__card { overflow: hidden !important; } } /* ========================================================================== USER REPORT 9 FIXES (PIXEL PERFECT FIGMA 292:297) ========================================================================== */ /* 1 & 2. [#dohod] Calculator Amount Caption & Submit Button Arrow */ #dohod .dn-calc__caption { color: #FFFFFF !important; opacity: 1 !important; } .dn-calc__btn-submit { display: flex !important; align-items: center !important; justify-content: space-between !important; background: #FB724E !important; color: #FFFFFF !important; border-radius: 100px !important; padding: 8px 10px 8px 24px !important; } .dn-calc__btn-submit .dn-calc__btn-circle { width: 44px !important; height: 44px !important; min-width: 44px !important; background: #FFFFFF !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-left: 16px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important; } .dn-calc__btn-submit .dn-calc__btn-circle svg { display: block !important; width: 22px !important; height: 22px !important; } .dn-calc__btn-submit .dn-calc__btn-circle svg path { stroke: #2C2C2C !important; stroke-width: 2.2 !important; } /* 3, 4, 5, 6. Headings & Table Headers: ALL UPPERCASE per Figma */ h2.dn-h2, .dn-h2, .dn-card .dn-h2, .dn-band .dn-h2, #kak-podat .dn-h2, #stoimost .dn-h2, #dohod .dn-h2, #kto-mozhet .dn-h2, #uslugi .dn-h2, #dokumenty .dn-h2, #etapy .dn-h2, #faq .dn-h2 { text-transform: uppercase !important; } #kak-podat .dn-where-table th, #kak-podat .dn-where-th__content span, #kak-podat .dn-where-th--title, #kak-podat .dn-where-th--beige .dn-where-th__content, #kak-podat .dn-where-th--coral .dn-where-th__content { text-transform: uppercase !important; } /* 7 & 8. [.dn-band] (.dn-consult-card): Route Graphic Exact Alignment & Orange Border Circles */ .dn-consult-card__route-graphic { position: absolute !important; inset: 0 !important; pointer-events: none !important; z-index: 1 !important; overflow: hidden !important; } .dn-consult-route-line { position: absolute !important; left: 14.95% !important; top: 43.14% !important; width: 82.19% !important; max-width: 1085px !important; height: auto !important; opacity: 1 !important; pointer-events: none !important; } .dn-consult-route-float { position: absolute !important; border-radius: 50% !important; transform: translate(-50%, -50%) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important; pointer-events: none !important; } .dn-consult-route-float--spain { left: 38.93% !important; top: 58.26% !important; width: 96px !important; height: 96px !important; object-fit: cover !important; } .dn-consult-route-float--traveler { left: 43.70% !important; top: 65.55% !important; width: 104px !important; height: 104px !important; object-fit: cover !important; } .dn-consult-route-float--icon1, .dn-consult-route-float--icon2 { width: 52px !important; height: 52px !important; background: #FFFFFF !important; border: 2px solid #FB724E !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } .dn-consult-route-float--icon2 { /* ID card / contact top */ left: 43.94% !important; top: 47.55% !important; } .dn-consult-route-float--icon1 { /* Chat icon bottom */ left: 40.53% !important; top: 77.96% !important; } .dn-consult-route-float--icon1 svg, .dn-consult-route-float--icon2 svg { display: block !important; } /* 9. [.dn-band] (.dn-btn): Orange Border for "Все отзывы" and "Все страны" */ .dn-band--proof .dn-band-head-row .dn-btn, .dn-band--other-countries .dn-band-head-row .dn-btn { color: #2C2C2C !important; border: 1px solid #FB724E !important; background: transparent !important; border-radius: 100px !important; transition: all 0.2s ease !important; } .dn-band--proof .dn-band-head-row .dn-btn:hover, .dn-band--other-countries .dn-band-head-row .dn-btn:hover { background: #FB724E !important; color: #FFFFFF !important; border-color: #FB724E !important; } /* Countries Table full-width continuous borders */ .dn-countries-table tr.is-selected td { border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; } /* Mobile Hero Title Adaptivity: No Right Overflow */ @media (max-width: 768px) { .dn-hero__card { box-sizing: border-box !important; max-width: 100% !important; overflow: hidden !important; } .dn-hero__title { font-size: clamp(18px, 5.2vw, 24px) !important; line-height: 1.15 !important; letter-spacing: -0.01em !important; overflow-wrap: break-word !important; word-break: normal !important; max-width: 100% !important; box-sizing: border-box !important; margin: 12px 0 10px !important; } .dn-hero__title span { font-size: inherit !important; line-height: inherit !important; display: block !important; max-width: 100% !important; } } /* ULTRA SPECIFIC UPPERCASE OVERRIDE FOR ALL HEADINGS PER USER INSTRUCTION */ html body .dn-card .dn-sec-head .dn-h2, html body .dn-sec-head .dn-h2, html body #dohod .dn-sec-head .dn-h2, html body #kak-podat .dn-sec-head .dn-h2, html body #stoimost .dn-sec-head .dn-h2, html body #kto-mozhet .dn-sec-head .dn-h2, html body #uslugi .dn-sec-head .dn-h2, html body #dokumenty .dn-sec-head .dn-h2, html body #etapy .dn-sec-head .dn-h2, html body #faq .dn-sec-head .dn-h2, html body .dn-band .dn-h2, html body .dn-h2 { text-transform: uppercase !important; } /* ========================================================================== MOBILE PIXEL-PERFECT AUDIT FIXES (428px & 375px) - 26 ITEMS ========================================================================== */ @media (max-width: 768px) { /* Item 1: Hero H1 title font size matching Figma (30px / 36px) without overflow */ .dn-hero__title, .dn-hero__title span { font-family: var(--dn-font-title, 'Bounded', sans-serif) !important; font-size: clamp(25px, 6.8vw, 29px) !important; line-height: 1.15 !important; letter-spacing: -0.01em !important; text-transform: uppercase !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; max-width: 100% !important; } .dn-hero__title { margin: 14px 0 16px 0 !important; } /* Item 2: Hero button split - white pill + attached white circle with arrow */ .dn-hero a.dn-btn-split, .dn-hero .dn-btn-split--hero-white { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: transparent !important; padding: 0 !important; border: none !important; text-decoration: none !important; } .dn-hero .dn-btn-split--hero-white .dn-btn-split__label { background: #FFFFFF !important; color: #000000 !important; height: 50px !important; border-radius: 100px !important; display: inline-flex !important; align-items: center !important; padding: 0 28px !important; font-size: 15px !important; font-weight: 500 !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important; } .dn-hero .dn-btn-split--hero-white .dn-btn-split__circle { width: 50px !important; height: 50px !important; min-width: 50px !important; border-radius: 50% !important; background: #FFFFFF !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important; } .dn-hero .dn-btn-split--hero-white .dn-btn-split__circle svg, .dn-hero .dn-btn-split--hero-white .dn-btn-split__circle svg path { stroke: #000000 !important; fill: none !important; } /* Item 3: SPAIN text centered under hero photo */ .dn-hero__decor-text, .dn-hero-spain-word, .dn-hero__img .dn-hero__decor-text { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; text-align: center !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; } /* Item 4: 4 pills under photo stretch to full width of content (2x2 grid) */ .dn-hero__pills, .dn-hero__pills--mobile { width: 100% !important; max-width: 100% !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; padding: 0 !important; margin: 16px 0 0 !important; box-sizing: border-box !important; } .dn-hero__pill { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 12px 14px !important; } /* Item 5: Table of contents (TOC) full width */ .dn-toc-wrap, .dn-toc-card, .dn-toc, .dn-card--toc { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* Item 6: #kto-mozhet Madrid banner photo shows full city (not just sky) */ .dn-card--sec1 .dn-banner-banner, .dn-card--sec1 .dn-sec-head__thumb, #kto-mozhet .dn-banner-banner, #kto-mozhet .dn-sec-head__thumb { aspect-ratio: 287 / 170 !important; width: 100% !important; height: auto !important; min-height: 160px !important; background-size: cover !important; background-position: center 65% !important; border-radius: 16px !important; } /* Item 7: #kto-mozhet criteria cards compact without whitespace */ .dn-criterion-card { min-height: auto !important; height: auto !important; padding: 14px 16px !important; } /* Item 8 & 9: #check Victoria photo & quiz content full width */ #check .dn-quiz__photo { width: 100% !important; max-width: 100% !important; border-radius: 20px !important; overflow: hidden !important; margin: 0 0 16px 0 !important; } #check .dn-quiz__photo img { width: 100% !important; height: auto !important; object-fit: cover !important; display: block !important; } #check .dn-quiz__content, #check .dn-quiz__card { width: 100% !important; max-width: 100% !important; margin: 0 !important; } /* Item 10: #dohod note placed strictly UNDER the dark summary block */ #dohod .dn-calc { display: flex !important; flex-direction: column !important; } #dohod .dn-calc__inputs-grid { order: 1 !important; } #dohod .dn-calc__summary { order: 2 !important; } #dohod .dn-calc__note { order: 3 !important; margin: 14px 0 0 !important; text-align: center !important; color: #FFFFFF !important; } #dohod .dn-calc__btn-submit { order: 4 !important; margin-top: 16px !important; } /* Item 11: #kak-podat notch offset so fillet does not glitch outside card */ .dn-card-notch { left: 32px !important; } /* Item 12: #kak-podat alert box dark #2C2C2C with rounded corners */ .dn-alert-box { background: #2C2C2C !important; border: none !important; border-radius: 14px !important; padding: 20px 22px !important; color: #FFFFFF !important; margin-top: 24px !important; display: flex !important; align-items: flex-start !important; gap: 16px !important; } .dn-alert-box__title { color: #FFFFFF !important; font-size: 18px !important; font-weight: 600 !important; margin-bottom: 6px !important; } .dn-alert-box__text { color: rgba(255, 255, 255, 0.85) !important; font-size: 15px !important; line-height: 1.45 !important; } .dn-alert-box__icon { background: #FB724E !important; color: #FFFFFF !important; border-radius: 9px !important; width: 32px !important; height: 32px !important; font-size: 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } /* Item 13 & 14: #stoimost price card and advantage card full width */ .dn-price-card, .dn-advantage-card { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* Item 15: #uslugi service tile title font size 15px without overflow */ .dn-service-tile__title, h3.dn-service-tile__title { font-size: 15px !important; line-height: 1.25 !important; word-break: break-word !important; hyphens: auto !important; } /* Item 16: #dokumenty folder image with logo visible under heading */ .dn-docs-layout { display: flex !important; flex-direction: column !important; gap: 16px !important; } .dn-docs-visual { display: block !important; width: 100% !important; max-width: 100% !important; height: 180px !important; min-height: 180px !important; border-radius: 16px !important; background-size: cover !important; background-position: center !important; position: relative !important; margin-bottom: 12px !important; } .dn-docs-visual__logo { display: block !important; position: absolute !important; left: 46% !important; top: 45% !important; transform: translate(-50%, -50%) !important; width: 41px !important; height: 31px !important; } /* Item 17: #etapy step cards vertical connectors (спайки) */ .dn-steps-grid { display: flex !important; flex-direction: column !important; gap: 20px !important; position: relative !important; } .dn-step-card { position: relative !important; width: 100% !important; } .dn-step-card:not(:last-child)::after { content: '' !important; position: absolute !important; bottom: -20px !important; left: 50% !important; transform: translateX(-50%) !important; width: 117px !important; height: 20px !important; background: #FFFFFF !important; z-index: 2 !important; } /* Item 18: Why cards full width */ .dn-why-card { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Item 19: Country table button moved UNDER table on mobile */ .dn-band--countries-table .dn-card__inner { display: flex !important; flex-direction: column !important; } .dn-band--countries-table .dn-band-head-row { display: contents !important; } .dn-band--countries-table .dn-band-head-row .dn-h2 { order: 1 !important; margin-bottom: 20px !important; } .dn-band--countries-table .dn-countries-table-wrap { order: 2 !important; } .dn-band--countries-table .dn-btn-split { order: 3 !important; margin-top: 20px !important; align-self: center !important; } /* Item 20, 21, 22, 23: Reviews & Case layout */ .dn-band--proof .dn-wrap { display: flex !important; flex-direction: column !important; } .dn-band--proof .dn-band-head-row { display: contents !important; } .dn-band--proof .dn-band-head-row .dn-h2 { order: 1 !important; margin-bottom: 20px !important; } .dn-band--proof .dn-proof-row { order: 2 !important; display: flex !important; flex-direction: column !important; gap: 20px !important; } .dn-case-card { order: 1 !important; width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: column !important; } .dn-case-card__media { order: -1 !important; /* Image on top */ width: 100% !important; height: 180px !important; border-radius: 16px 16px 0 0 !important; } .dn-case-card__content { order: 1 !important; padding: 20px !important; } .dn-reviews-col { order: 2 !important; /* Reviews below case card */ width: 100% !important; display: flex !important; flex-direction: column !important; gap: 16px !important; } .dn-band--proof .dn-band-head-row .dn-btn { order: 3 !important; /* Все отзывы at bottom */ margin-top: 24px !important; align-self: center !important; } /* Item 25: Other country cards full width */ .dn-country-card, article.country-card { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Item 26: Telegram banner smooth rounded cutout */ .sec11-photo-wrap { border-radius: 20px !important; overflow: hidden !important; } .sec11-photo { border-radius: 20px !important; display: block !important; width: 100% !important; } } /* Calculator note desktop vs mobile switch */ .dn-calc__note--mobile { display: none !important; } @media (max-width: 768px) { .dn-calc__note--desktop { display: none !important; } .dn-calc__note--mobile { display: block !important; text-align: center !important; margin: 14px auto 0 !important; font-size: 13px !important; line-height: 1.4 !important; color: #666666 !important; width: 100% !important; max-width: 320px !important; order: 3 !important; } } /* Ensure quiz heading and all subheadings are also uppercase per user requirement */ html body .dn-quiz__title, html body .dn-h2--sub, html body h3.dn-h2, html body .dn-h2 { text-transform: uppercase !important; } /* Specificity override for quiz title uppercase */ html body #check .dn-quiz__title, html body #check .dn-h2, html body #check h3.dn-h2, html body #check h3 { text-transform: uppercase !important; } /* ========================================================================== FINAL 19 MOBILE FIXES & FLUID ADAPTIVITY (USER REQUEST 428px & 375px) ========================================================================== */ @media (max-width: 768px) { /* GLOBAL: Compact 16px side margins across mobile site */ .dn-wrap, .dn-hero__container, .dn-main-layout, .dn-article, .dn-band .dn-wrap, .section-telegram__container { width: 100% !important; max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* GLOBAL: Cards stretch full width of container */ .dn-card, .dn-toc-card, .dn-hero__card, .dn-calc, .dn-why-card, .dn-price-card, .dn-advantage-card, .dn-step-card, .dn-steps-grid, .dn-case-card, .dn-review-item, .dn-reviews-col, .dn-consult-card, .dn-consult-bullet, .dn-expert-cta-card, .dn-services-block, .dn-docs-layout { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* FLUID TYPOGRAPHY: Adaptive Headings (No right overflows) */ .dn-hero__title, .dn-hero__title span { font-family: var(--dn-font-title, 'Bounded', sans-serif) !important; font-size: clamp(20px, 6.2vw, 27px) !important; line-height: 1.05 !important; letter-spacing: -0.02em !important; text-transform: uppercase !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; max-width: 100% !important; box-sizing: border-box !important; } .dn-hero__title { margin: 12px 0 14px 0 !important; } .dn-hero__title span { display: block !important; width: 100% !important; } .dn-h2, .dn-sec-head .dn-h2, .dn-band .dn-h2 { font-family: var(--dn-font-title, 'Bounded', sans-serif) !important; font-size: clamp(20px, 5.5vw, 28px) !important; line-height: 1.15 !important; text-transform: uppercase !important; word-break: normal !important; overflow-wrap: break-word !important; } /* 1. [.dn-hero] Split Button: Attached arrow circle (gap: 0) as on desktop */ .dn-hero a.dn-btn-split, .dn-hero button.dn-btn-split, .dn-hero .dn-btn-split--hero-white { display: inline-flex !important; align-items: center !important; gap: 0 !important; background: transparent !important; padding: 0 !important; border: none !important; text-decoration: none !important; } .dn-hero .dn-btn-split--hero-white .dn-btn-split__label { background: #FFFFFF !important; color: #000000 !important; height: 48px !important; border-radius: 100px !important; display: inline-flex !important; align-items: center !important; padding: 0 24px !important; font-size: 15px !important; font-weight: 500 !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important; border: none !important; z-index: 1 !important; } .dn-hero .dn-btn-split--hero-white .dn-btn-split__circle { width: 48px !important; height: 48px !important; min-width: 48px !important; border-radius: 50% !important; border: none !important; border-left: none !important; margin-left: 0 !important; background: #FFFFFF !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important; z-index: 2 !important; } .dn-hero .dn-btn-split--hero-white .dn-btn-split__circle svg path { stroke: #000000 !important; } /* 2. [.dn-hero] Pills: Stretch to full content width across ALL mobile viewports */ .dn-hero .dn-hero__container > .dn-hero__visual + .dn-hero__card + .dn-hero__pills, .dn-hero .dn-hero__container > .dn-hero__pills, .dn-hero .dn-hero__pills, .dn-hero .dn-hero__pills--mobile { width: 100% !important; max-width: 100% !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; box-sizing: border-box !important; margin: 14px 0 0 !important; padding: 0 !important; } .dn-hero .dn-hero__pills .dn-hero__pill, .dn-hero .dn-hero__pills--mobile .dn-hero__pill, .dn-hero__pill { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 12px 14px !important; } /* 3 & 4. [#check] Victoria photo horizontal + full-width quiz */ #check, #check .dn-quiz, #check .dn-quiz-block { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; background: transparent !important; overflow: hidden !important; } #check .dn-quiz__row { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; height: auto !important; gap: 12px !important; margin: 0 !important; } #check .dn-quiz__photo { width: 100% !important; max-width: 100% !important; height: 230px !important; min-height: 230px !important; max-height: 230px !important; border-radius: 20px !important; background-image: url('../images/spain/quiz_consult_photo.webp') !important; background-size: cover !important; background-position: center 20% !important; background-repeat: no-repeat !important; margin: 0 !important; overflow: hidden !important; } #check .dn-quiz__content, #check .dn-quiz__card { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: auto !important; border-radius: 20px !important; padding: 24px 20px !important; box-sizing: border-box !important; margin: 0 !important; background: #FFFFFF !important; } #check .dn-quiz__title { font-size: clamp(18px, 5.2vw, 24px) !important; line-height: 1.18 !important; text-transform: uppercase !important; word-break: normal !important; overflow-wrap: break-word !important; } /* 5. [#dohod] Calculator Note: Dark readable color */ #dohod .dn-calc__note, .dn-calc__note--mobile { color: #666666 !important; background: transparent !important; font-size: 13px !important; text-align: center !important; margin: 12px auto 0 !important; order: 3 !important; display: block !important; width: 100% !important; max-width: 320px !important; } /* 6 & 8. [#stoimost] Price Card & Advantage Card: Full width */ #stoimost .dn-price-card, #stoimost .dn-advantage-card { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; } /* 7. [#stoimost] Button: Pill without arrow circle */ #stoimost .dn-btn-split__circle { display: none !important; } #stoimost .dn-btn-split, #stoimost .dn-btn-split__label { border-radius: 100px !important; width: 100% !important; text-align: center !important; justify-content: center !important; height: 50px !important; background: var(--dn-coral) !important; color: #FFFFFF !important; font-size: 15px !important; font-weight: 500 !important; display: flex !important; align-items: center !important; } /* 9. [#uslugi] Service Desc: Height auto so text does not overflow card */ #uslugi .dn-service-tile { height: auto !important; min-height: auto !important; width: 100% !important; max-width: 100% !important; padding-bottom: 22px !important; box-sizing: border-box !important; } #uslugi .dn-service-tile__visual-wrap, #uslugi .dn-service-tile__photo { height: 170px !important; max-height: 170px !important; } #uslugi .dn-service-tile__desc { display: block !important; overflow: visible !important; margin-top: 6px !important; line-height: 1.35 !important; } /* 10 & 11. [#etapy] Steps Grid & Step Card: Full width */ #etapy .dn-steps-grid, #etapy .dn-step-card { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* 12. [.dn-band] Why cards: Full width */ .dn-why-card, .dn-why-grid { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* 13. [.dn-band] Countries Table: Mobile vertical country cards stack */ .dn-countries-table, .dn-countries-table tbody { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; } .dn-countries-table thead { display: none !important; } .dn-countries-table tr { display: grid !important; grid-template-columns: auto 1fr auto !important; grid-template-areas: "flag name price" "flag time action" !important; column-gap: 12px !important; row-gap: 2px !important; align-items: center !important; width: 100% !important; max-width: 100% !important; padding: 12px 16px !important; border-radius: 16px !important; border: 1px solid var(--dn-border) !important; background: #FFFFFF !important; box-sizing: border-box !important; } .dn-countries-table tr.is-selected { background: #F6F1ED !important; border-color: transparent !important; } .dn-countries-table td { padding: 0 !important; border: none !important; background: transparent !important; } .dn-countries-table td.dn-ct-col-country { grid-area: name !important; display: contents !important; } .dn-countries-table td.dn-ct-col-country .dn-ct-country-wrap { display: contents !important; } .dn-countries-table td.dn-ct-col-country .dn-ct-flag { grid-area: flag !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; } .dn-countries-table td.dn-ct-col-country .dn-ct-name { grid-area: name !important; font-weight: 600 !important; font-size: 15px !important; color: #2C2C2C !important; } .dn-countries-table td.dn-ct-col-time { grid-area: time !important; font-size: 13px !important; color: #888888 !important; } .dn-countries-table td.dn-ct-col-price { grid-area: price !important; text-align: right !important; font-weight: 600 !important; font-size: 15px !important; color: #2C2C2C !important; } .dn-countries-table td.dn-ct-col-action { grid-area: action !important; text-align: right !important; font-size: 13px !important; } .dn-countries-table .dn-ct-badge-here { font-size: 12px !important; color: #888888 !important; } .dn-countries-table .dn-ct-link { font-size: 12px !important; color: #FB724E !important; text-decoration: none !important; } /* 14. [.dn-band] Countries Table Button: No arrow circle */ .dn-band--countries-table .dn-btn-split__circle { display: none !important; } .dn-band--countries-table .dn-btn-split, .dn-band--countries-table .dn-btn-split__label { border-radius: 100px !important; padding: 0 32px !important; width: 100% !important; max-width: 320px !important; height: 50px !important; text-align: center !important; justify-content: center !important; background: var(--dn-coral) !important; color: #FFFFFF !important; font-size: 15px !important; font-weight: 500 !important; display: flex !important; align-items: center !important; margin: 18px auto 0 !important; } /* 15 & 16. [.dn-band] Case card & Reviews: Full width */ .dn-case-card, .dn-review-item, .dn-reviews-col, .dn-band--proof .dn-wrap { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* 17. [.dn-band] Consult bullets: Full width */ .dn-consult-bullet, .dn-consult-card__route-bullets, .dn-consult-card__items { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* 18. [.dn-band] Other countries: Horizontal touch carousel */ .dn-countries-cards-grid { display: flex !important; flex-direction: row !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; gap: 16px !important; width: 100% !important; max-width: 100% !important; padding: 0 0 16px 0 !important; box-sizing: border-box !important; scrollbar-width: none !important; } .dn-countries-cards-grid::-webkit-scrollbar { display: none !important; } .dn-countries-cards-grid .country-card, .dn-countries-cards-grid .dn-country-card { flex: 0 0 290px !important; width: 290px !important; max-width: 290px !important; scroll-snap-align: start !important; box-sizing: border-box !important; } /* 19. [.section-telegram] Photo with smooth rounded notch cut */ .section-telegram .sec11-photo-wrap { position: relative !important; width: 100% !important; height: auto !important; margin-top: 14px !important; border-radius: 0 !important; overflow: visible !important; clip-path: none !important; -webkit-clip-path: none !important; background: transparent !important; } .section-telegram .sec11-photo-wrap picture { display: block !important; width: 100% !important; height: auto !important; } .section-telegram .sec11-photo { width: 100% !important; height: auto !important; max-width: 100% !important; object-fit: contain !important; display: block !important; border-radius: 0 !important; clip-path: none !important; -webkit-clip-path: none !important; background: transparent !important; } .sec11-bottom-tab { display: block !important; position: absolute !important; bottom: -18px !important; left: 50% !important; transform: translateX(-50%) !important; width: 200px !important; height: 20px !important; background: #FB724E !important; border-bottom-left-radius: 16px !important; border-bottom-right-radius: 16px !important; z-index: 5 !important; } /* Refinement: Countries Table Mobile Cards Polish */ .dn-countries-table, .dn-countries-table tbody { display: flex !important; flex-direction: column !important; gap: 12px !important; width: 100% !important; } .dn-countries-table tr { display: grid !important; grid-template-columns: 44px 1fr auto !important; grid-template-rows: auto auto !important; grid-template-areas: "flag name price" "flag time action" !important; column-gap: 14px !important; row-gap: 4px !important; align-items: center !important; width: 100% !important; min-height: 68px !important; height: auto !important; padding: 14px 16px !important; border-radius: 16px !important; border: 1px solid var(--dn-border) !important; background: #FFFFFF !important; box-sizing: border-box !important; } .dn-countries-table td { height: auto !important; min-height: auto !important; padding: 0 !important; border: none !important; background: transparent !important; line-height: 1.25 !important; } .dn-countries-table td.dn-ct-col-country { grid-area: name !important; display: contents !important; } .dn-countries-table td.dn-ct-col-country .dn-ct-country-wrap { display: contents !important; } .dn-countries-table td.dn-ct-col-country .dn-ct-flag { grid-area: flag !important; width: 40px !important; height: 40px !important; min-width: 40px !important; border-radius: 50% !important; object-fit: cover !important; display: block !important; margin: 0 !important; } .dn-countries-table td.dn-ct-col-country .dn-ct-name { grid-area: name !important; font-weight: 700 !important; font-size: 15px !important; color: #2C2C2C !important; text-transform: uppercase !important; } .dn-countries-table td.dn-ct-col-time { grid-area: time !important; font-size: 13px !important; color: #777777 !important; } .dn-countries-table td.dn-ct-col-price { grid-area: price !important; text-align: right !important; font-weight: 700 !important; font-size: 15px !important; color: #2C2C2C !important; } .dn-countries-table td.dn-ct-col-action { grid-area: action !important; text-align: right !important; font-size: 13px !important; } .dn-countries-table .dn-ct-badge-here { font-size: 12px !important; color: #777777 !important; } .dn-countries-table .dn-ct-link { font-size: 12px !important; color: #FB724E !important; text-decoration: none !important; } /* Refinement: Hide desktop notch on mobile telegram section */ .section-telegram .sec11-notch { display: none !important; } /* ========================================================================== #dohod Mobile Calculator (Strict Figma match) ========================================================================== */ #dohod .dn-calc { display: flex !important; flex-direction: column !important; gap: 12px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* 1. Controls box */ #dohod .dn-calc__controls { width: 100% !important; max-width: 100% !important; background: #FFFFFF !important; border-radius: 20px !important; padding: 16px !important; box-sizing: border-box !important; margin: 0 !important; } #dohod .dn-calc__inputs-grid { display: flex !important; flex-direction: column !important; gap: 10px !important; margin: 0 !important; width: 100% !important; } #dohod .dn-calc__field { background: #F6F1ED !important; border-radius: 12px !important; padding: 12px 14px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; box-sizing: border-box !important; } #dohod .dn-calc__label { font-size: 15px !important; font-weight: 500 !important; color: #2C2C2C !important; } #dohod .dn-calc__note--desktop { display: none !important; } /* 2. Dark Summary box (Compact, strictly no button inside) */ #dohod .dn-calc__summary { width: 100% !important; max-width: 100% !important; background: #2C2C2C !important; border-radius: 16px !important; padding: 16px 20px !important; box-sizing: border-box !important; min-height: auto !important; height: auto !important; margin: 0 !important; display: block !important; } #dohod .dn-calc__summary-desktop { display: none !important; } #dohod .dn-calc__summary-mobile { display: flex !important; flex-direction: column !important; gap: 4px !important; } #dohod .dn-calc__caption-mobile { font-family: var(--dn-font, sans-serif) !important; font-size: 13px !important; font-weight: 400 !important; color: #999999 !important; line-height: 1.2 !important; } #dohod .dn-calc__val-row-mobile { display: flex !important; align-items: baseline !important; gap: 6px !important; } #dohod .dn-calc__amount-mobile { font-family: var(--dn-font-title, 'Bounded', sans-serif) !important; font-size: 26px !important; font-weight: 700 !important; color: #FFFFFF !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; } #dohod .dn-calc__period-mobile { font-family: var(--dn-font, sans-serif) !important; font-size: 15px !important; font-weight: 400 !important; color: #AAAAAA !important; line-height: 1.1 !important; } /* 3. Note strictly UNDER the dark summary box */ #dohod .dn-calc__note--mobile { display: block !important; font-size: 12px !important; line-height: 1.35 !important; color: #777777 !important; text-align: left !important; margin: 4px 0 2px 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; background: transparent !important; } /* 4. Action button strictly UNDER the note, full width, NO circle/arrow */ #dohod .dn-calc__btn-submit--desktop { display: none !important; } #dohod .dn-calc__btn-submit--mobile { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; height: 52px !important; background: #FB724E !important; color: #FFFFFF !important; font-family: var(--dn-font, sans-serif) !important; font-size: 15px !important; font-weight: 600 !important; border-radius: 100px !important; border: none !important; padding: 0 20px !important; box-sizing: border-box !important; cursor: pointer !important; margin: 4px 0 0 0 !important; text-align: center !important; box-shadow: 0 4px 14px rgba(251, 114, 78, 0.25) !important; transition: background 0.2s ease, transform 0.2s ease !important; } #dohod .dn-calc__btn-submit--mobile:hover { background: #E85E3A !important; transform: translateY(-1px) !important; } /* ========================================================================== #kak-podat: Mobile Heading & Table Polish (Strict Figma Match) ========================================================================== */ #kak-podat .dn-sec-head .dn-h2, #kak-podat .dn-h2, html body #kak-podat .dn-sec-head .dn-h2, html body #kak-podat .dn-h2 { font-family: var(--dn-font-title, 'Bounded', sans-serif) !important; font-size: clamp(19px, 5.5vw, 24px) !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; text-transform: uppercase !important; word-break: normal !important; overflow-wrap: break-word !important; hyphens: none !important; max-width: 100% !important; box-sizing: border-box !important; } /* Table container & structure on mobile */ #kak-podat .dn-where-table-wrap { width: 100% !important; max-width: 100% !important; margin-bottom: 20px !important; box-sizing: border-box !important; overflow: hidden !important; } #kak-podat .dn-where-table { width: 100% !important; max-width: 100% !important; display: block !important; border-radius: 16px !important; border: 1px solid var(--dn-border, #E5DFD9) !important; overflow: hidden !important; box-sizing: border-box !important; } #kak-podat .dn-where-table thead { display: block !important; width: 100% !important; } #kak-podat .dn-where-table thead tr { display: flex !important; width: 100% !important; } #kak-podat .dn-where-table th.dn-where-th--title { display: none !important; } /* Both mobile column headers take exactly 50% width */ #kak-podat .dn-where-table th.dn-where-th--beige, #kak-podat .dn-where-table th.dn-where-th--coral { flex: 1 1 50% !important; width: 50% !important; max-width: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; height: auto !important; min-height: 48px !important; padding: 10px 4px !important; box-sizing: border-box !important; text-align: center !important; border: none !important; } #kak-podat .dn-where-table th.dn-where-th--beige { background: #F6F1ED !important; } #kak-podat .dn-where-table th.dn-where-th--coral { background: #FB724E !important; } /* HIDE ICONS in table headers on mobile (per Figma and user request) */ #kak-podat .dn-where-th__icon, .dn-where-table .dn-where-th__icon { display: none !important; } /* Table Header Text styling (2 clean lines, perfectly fits narrow screens) */ #kak-podat .dn-where-th__content { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0 !important; width: 100% !important; text-align: center !important; margin: 0 !important; padding: 0 !important; } #kak-podat .dn-where-th__content span, #kak-podat .dn-where-table th { font-family: var(--dn-font-title, 'Bounded', sans-serif) !important; font-size: clamp(11.5px, 3.2vw, 13.5px) !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-align: center !important; text-transform: uppercase !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; } #kak-podat .dn-where-th--beige .dn-where-th__content span { color: #2C2C2C !important; } #kak-podat .dn-where-th--coral .dn-where-th__content span { color: #FFFFFF !important; } } /* ================================================================ PERFECT VERIFIED FIXES FOR 8 MOBILE ISSUES (375px - 428px) ================================================================ */ /* 1. [#dohod] slider border */ .dn-toggle__slider { border: 1px solid var(--dn-border, #E5DFD9) !important; box-sizing: border-box !important; } @media (max-width: 768px) { /* 2. [#dohod] caption white text */ #dohod .dn-calc__caption-mobile, .dn-calc__caption-mobile { color: #FFFFFF !important; } /* 3. [#dohod] note black text */ #dohod .dn-calc__note, #dohod .dn-calc__note--mobile, .dn-calc__note--mobile { color: #2C2C2C !important; } /* 4. [#stoimost] price card & advantage card: 100% full width */ #stoimost .dn-price-row, .dn-price-row { width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: column !important; gap: 12px !important; box-sizing: border-box !important; } #stoimost .dn-price-card, .dn-price-card, #stoimost .dn-advantage-card, .dn-advantage-card { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; } /* 5. [#etapy] smooth curved fillets connecting step cards */ #etapy .dn-steps-grid { display: flex !important; flex-direction: column !important; gap: 20px !important; align-items: center !important; width: 100% !important; } #etapy .dn-step-card { position: relative !important; width: 100% !important; max-width: 100% !important; border-radius: 12px !important; box-sizing: border-box !important; } #etapy .dn-step-card:not(:last-child)::after { content: '' !important; position: absolute !important; bottom: -20px !important; left: 50% !important; transform: translateX(-50%) !important; width: 117px !important; height: 20px !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='117' height='20' viewBox='0 0 117 20' fill='none'%3E%3Cpath d='M0 20C5.52285 20 10 15.5228 10 10C10 4.47715 5.52285 0 0 0L117 0C111.477 0 107 4.47715 107 10C107 15.5228 111.477 20 117 20L0 20Z' fill='%23FFFFFF'/%3E%3C/svg%3E") no-repeat center !important; background-size: 117px 20px !important; z-index: 5 !important; pointer-events: none !important; display: block !important; } /* 6. [.dn-band] countries table tr.is-selected top row fixed height & grid */ .dn-countries-table tr.is-selected { display: grid !important; grid-template-columns: 44px 1fr auto !important; grid-template-rows: auto auto !important; grid-template-areas: "flag name price" "flag time action" !important; column-gap: 14px !important; row-gap: 4px !important; align-items: center !important; width: 100% !important; min-height: auto !important; height: auto !important; padding: 14px 16px !important; border-radius: 16px !important; box-sizing: border-box !important; background: #F6F1ED !important; border: 1px solid transparent !important; } .dn-countries-table tr.is-selected td, .dn-countries-table tr td { height: auto !important; min-height: auto !important; padding: 0 !important; border: none !important; background: transparent !important; } /* 7. [.dn-band] countries table country name: lowercase, smaller font */ .dn-countries-table .dn-ct-name, .dn-countries-table td.dn-ct-col-country .dn-ct-name { text-transform: none !important; font-size: 13.5px !important; font-weight: 600 !important; } /* 8. [.dn-band] case card and container full width */ .dn-band--proof .dn-proof-row, .dn-proof-row { width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: column !important; gap: 15px !important; box-sizing: border-box !important; } .dn-band--proof .dn-case-card, .dn-case-card, .dn-case-card__content { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } } /* ================================================================ CONSULTATION CARD: PIXEL-PERFECT DESKTOP & MOBILE (FIGMA 1680) ================================================================ */ .dn-band--consult { position: relative !important; width: 100% !important; box-sizing: border-box !important; } .dn-consult-card { position: relative !important; width: 100% !important; max-width: 1440px !important; min-height: 540px !important; height: 540px !important; margin: 0 auto !important; background: #FFFFFF !important; border-radius: 20px !important; overflow: hidden !important; display: grid !important; grid-template-columns: 1fr 610px !important; gap: 40px !important; align-items: center !important; padding: 55px 40px !important; box-sizing: border-box !important; } /* Info column (left) */ .dn-consult-card__info { position: relative !important; z-index: 2 !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; max-width: 560px !important; } .dn-consult-card__info .dn-h2 { font-family: var(--dn-font-title, 'Bounded', sans-serif) !important; font-size: clamp(28px, 2.5vw, 40px) !important; font-weight: 700 !important; line-height: 1.15 !important; color: #2C2C2C !important; text-transform: uppercase !important; margin: 0 0 40px 0 !important; } .dn-consult-card__items { display: flex !important; flex-direction: column !important; gap: 15px !important; } .dn-consult-bullet { display: inline-flex !important; align-items: center !important; gap: 12px !important; background: #F6F1ED !important; border-radius: 100px !important; padding: 10px 24px 10px 12px !important; width: fit-content !important; max-width: 100% !important; box-sizing: border-box !important; } /* Form column (right) */ .dn-consult-card__form-card { position: relative !important; z-index: 2 !important; width: 610px !important; max-width: 100% !important; min-height: 430px !important; background: #F6F1ED !important; border-radius: 20px !important; padding: 35px !important; box-sizing: border-box !important; margin-left: auto !important; } /* Background route graphic layer */ .dn-consult-card__route-graphic { position: absolute !important; left: 0 !important; top: 0 !important; margin: 0 !important; padding: 0 !important; width: 100% !important; height: 100% !important; pointer-events: none !important; overflow: hidden !important; z-index: 1 !important; } /* Dashed route curve SVG: Figma node 292:769, 773.5x394.5 at rel (265.5, 145.0) in 1320x540 card */ .dn-consult-route-line { position: absolute !important; left: calc(265.5 / 1320 * 100%) !important; top: calc(145 / 540 * 100%) !important; width: calc(773.5 / 1320 * 100%) !important; height: calc(394.5 / 540 * 100%) !important; margin: 0 !important; padding: 0 !important; max-width: none !important; object-fit: fill !important; pointer-events: none !important; z-index: 1 !important; } /* Float circular items positioned exactly on the dashed curve */ .dn-consult-route-float { position: absolute !important; border-radius: 50% !important; transform: translate(-50%, -50%) !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; } /* 1. Lake photo (Spain): Figma node 292:770, 78x78, center at rel (458.0, 223.0) */ .dn-consult-route-float--spain { left: calc(458 / 1320 * 100%) !important; top: calc(223 / 540 * 100%) !important; width: 78px !important; height: 78px !important; object-fit: cover !important; border: 5px solid #F6F1ED !important; box-sizing: border-box !important; z-index: 2 !important; } /* 2. Traveler photo: Figma node 292:771, 85x85, center at rel (578.5, 286.5) */ .dn-consult-route-float--traveler { left: calc(578.5 / 1320 * 100%) !important; top: calc(286.5 / 540 * 100%) !important; width: 85px !important; height: 85px !important; object-fit: cover !important; border: 5px solid #F6F1ED !important; box-sizing: border-box !important; z-index: 2 !important; } /* 3. Icon 2 (ID badge top): Figma node 292:773, 42x42, center at rel (580.0, 175.0) */ .dn-consult-route-float--icon2 { left: calc(580 / 1320 * 100%) !important; top: calc(175 / 540 * 100%) !important; width: 42px !important; height: 42px !important; background: #FFFFFF !important; border: 1px solid #FB724E !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; z-index: 3 !important; } /* 4. Icon 1 (Chat bubbles bottom): Figma node 292:772, 42x42, center at rel (534.0, 389.0) */ .dn-consult-route-float--icon1 { left: calc(534 / 1320 * 100%) !important; top: calc(389 / 540 * 100%) !important; width: 42px !important; height: 42px !important; background: #FFFFFF !important; border: 1px solid #FB724E !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; z-index: 3 !important; } /* Responsive adjustments for tablet / mobile */ @media (max-width: 1199px) and (min-width: 992px) { .dn-consult-card { grid-template-columns: 1fr 520px !important; gap: 20px !important; padding: 40px 30px !important; } .dn-consult-card__form-card { width: 520px !important; padding: 24px !important; } } @media (max-width: 991px) { .dn-consult-card { display: flex !important; flex-direction: column !important; gap: 30px !important; padding: 30px 20px !important; min-height: auto !important; height: auto !important; } .dn-consult-card__route-graphic { display: none !important; } .dn-consult-card__info { width: 100% !important; max-width: 100% !important; } .dn-consult-card__form-card { width: 100% !important; max-width: 100% !important; min-height: auto !important; padding: 24px 16px !important; margin-left: 0 !important; } .dn-consult-bullet { width: 100% !important; } }