@import 'EvoWeb.Client.0o9548w7a2.bundle.scp.css'; @import '_content/Blazor.Bootstrap/Blazor.Bootstrap.7t9tbfaemk.bundle.scp.css'; /* /Components/Layout/FooterComponent.razor.rz.scp.css */ .footerNav__soclist_itemText[b-anm3etpb1r] { font-family: "Onest"; color: var(--color-text-base-tertiary); /* Desktop/Body/Small */ font-weight: 400; font-size: 16px; font-style: normal; /* line-height: 1.5;*/ } .footer__nav_container[b-anm3etpb1r] { display: flex; padding: var(--spacing-0); align-items: flex-start; gap: var(--spacing-20); } .footer__nav__qr__container[b-anm3etpb1r] { display: flex; padding: var(--spacing-8); align-items: center; gap: var(--spacing-8); border-radius: var(--border-radius-16); border: var(--border-width-1) solid var(--color-border-base-default); } .footer__barcode__icon[b-anm3etpb1r] { aspect-ratio: 1/1; } .footerNav__storeBadges_container[b-anm3etpb1r] { display: flex; padding-top: var(--spacing-6); flex-direction: column; align-items: flex-start; gap: var(--spacing-16); } .footerNav__storeBadges_container__caption[b-anm3etpb1r] { font-family: "Onest"; color: var(--color-text-base-secondary); /* Mobile/Caption/Medium 500 */ font-size: 12px; font-style: normal; font-weight: 500; /* line-height: 1.6;*/ } .storeBadges__img[b-anm3etpb1r] { transition: transform .1s linear; } .storeBadges__btnBadge:hover .storeBadges__img[b-anm3etpb1r] { transform: scale(1.01); } .footerNav__storeBadges__buttons[b-anm3etpb1r] { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; } .footer__language__dropdown[b-anm3etpb1r] { position: relative; overflow: visible; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; z-index: 999; -webkit-tap-highlight-color: transparent; } .footer-language-arrow-icon[b-anm3etpb1r] { background: url("/acasa/Icons/chevron-bottom.svg") no-repeat center center; background-size: 16px; } .footer__language__dropdown__list[b-anm3etpb1r] { position: absolute; bottom: 100%; margin-bottom: 1px; display: none; opacity: 0; z-index: 1000; list-style: none; width: 172px; padding: var(--spacing-8); flex-direction: column; align-items: flex-start; gap: var(--spacing-4); border-radius: var(--border-radius-16); background: var(--white); pointer-events: none; margin-bottom: 4px; transition: opacity 0.2s ease; /* Drop Shadow/300 */ box-shadow: 0 0 0.5px 0 rgba(0, 0, 0, 0.15), 0 5px 12px 0 rgba(0, 0, 0, 0.08), 0 1px 3px 0 rgba(0, 0, 0, 0.08); -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .footer__language__dropdown__list__item[b-anm3etpb1r] { display: flex; padding: var(--spacing-12) var(--spacing-16); align-items: center; gap: var(--spacing-12); align-self: stretch; border-radius: var(--border-radius-8); background: var(--white); box-shadow: none; } .footer__language__dropdown:focus-within .footer__language__dropdown__list[b-anm3etpb1r], .footer__language__dropdown.is-open .footer__language__dropdown__list[b-anm3etpb1r] { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } .footer__language__dropdown:focus-within .footer-language-button[b-anm3etpb1r], .footer__language__dropdown.is-open .footer-language-button[b-anm3etpb1r] { background: #D9D9D9; } .footer__language__dropdown:focus-within .footer-language-arrow-icon[b-anm3etpb1r], .footer__language__dropdown.is-open .footer-language-arrow-icon[b-anm3etpb1r] { background: url("/acasa/Icons/chevron-top.svg") no-repeat center center; background-size: 16px; } .footer__language__dropdown__list__item.isActive[b-anm3etpb1r] { background: var(--color-background-base-secondary); } .footer__language__dropdown__list__item.isActive:hover[b-anm3etpb1r] { background: var(--color-background-base-secondary); } .footer-language-dropdown-text.isActive[b-anm3etpb1r] { color: var(--color-icon-brand-default); } .footer-language-dropdown-icon.isActive[b-anm3etpb1r] { color: var(--color-icon-brand-default); visibility: visible !important; } .footer__language__dropdown__list__item:hover[b-anm3etpb1r] { background: var(--color-background-base-secondary); cursor: pointer; } .footer__language__dropdown__list__item:has(a:focus-visible)[b-anm3etpb1r] { background: var(--white); box-shadow: 0 0 0 2px #3379DB inset; } .footer-language-button[b-anm3etpb1r] { color: var(--black); border-radius: var(--border-radius-8); background: var(--color-background-base-tertiary); display: flex; height: 36px; min-width: 56px; padding: var(--spacing-0) var(--spacing-8); justify-content: center; align-items: center; gap: var(--spacing-6); border: 0; outline: none; cursor: pointer !important; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1); touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-appearance: button; appearance: button; position: relative; z-index: 1; } .footer-language-button svg[b-anm3etpb1r], .footer-language-button .footer-language-arrow-icon[b-anm3etpb1r], .footer-language-button span[b-anm3etpb1r] { pointer-events: none; } .footer-language-button:hover[b-anm3etpb1r] { cursor: pointer; } .footer-language-button:focus-visible[b-anm3etpb1r] { outline: 2px solid var(--blue-sky-600, #0058d2); outline-offset: 2px; } .footer-language-button:active[b-anm3etpb1r] { background: #D9D9D9; } .footer-language-dropdown-text[b-anm3etpb1r] { flex: 1 1 0; color: #383838; font-family: "Onest"; font-size: 14px; font-weight: 500; line-height: 20px; text-decoration: none; cursor: pointer !important; -webkit-tap-highlight-color: transparent; touch-action: manipulation; display: block; } .footer-language-dropdown-text.isActive[b-anm3etpb1r] { color: var(--color-icon-brand-default); } .footer-language-arrow-icon[b-anm3etpb1r] { width: 16px; height: 16px; display: inline-block; background: url("/acasa/Icons/chevron-bottom.svg") no-repeat center center; background-size: 16px; } .footer-language-dropdown-icon[b-anm3etpb1r] { color: var(--color-icon-brand-default); visibility: hidden; } .footer-language-dropdown-icon.isActive[b-anm3etpb1r] { visibility: visible !important; z-index: 100; } .footer-language-button-text[b-anm3etpb1r] { color: var(--black); text-align: center; font-family: "Onest"; font-size: 14px; font-style: normal; font-weight: 500; pointer-events: none; } .legal-bar[b-anm3etpb1r] { display: flex; padding: var(--spacing-12) var(--spacing-24); justify-content: center; align-items: center; gap: var(--spacing-0); align-self: stretch; background: var(--color-background-base-inverse-default); } .legal-bar-container[b-anm3etpb1r] { display: flex; max-width: 1280px; padding: var(--spacing-0); align-items: center; align-content: center; gap: var(--spacing-12) var(--spacing-24); flex-grow: 1; flex-shrink: 0; flex-basis: 0; flex-wrap: wrap; } .legal-bar-copyright-label[b-anm3etpb1r] { min-width: 460px; flex-grow: 1; flex-shrink: 0; flex-basis: 0; color: var(--white); /* Desktop/Body/Small */ font-family: var(--font-family-primary-font, Onest); font-size: 14px; font-style: normal; font-weight: 400; /*line-height: var(--line-height-lh-20, 20px);*/ /* 142.857% */ } .legal-bar-links[b-anm3etpb1r] { display: flex; padding: var(--spacing-0); align-items: center; gap: var(--spacing-24); } .legal-bar-link[b-anm3etpb1r] { display: flex; padding: var(--spacing-0); flex-direction: column; justify-content: center; align-items: center; gap: var(--spacing-0); color: var(--white); text-decoration: underline; font-size: 14px; line-height: 1.5; font-weight: 400; } @media (max-width: 1280px) { .footer__language__dropdown[b-anm3etpb1r] { margin-right: 40px; } } @media (max-width: 768px) { .legal-bar[b-anm3etpb1r] { padding: var(--spacing-12) var(--spacing-16); flex-direction: column; align-items: flex-start; gap: var(--spacing-12); } .legal-bar-container[b-anm3etpb1r] { max-width: none; flex-grow: unset; flex-shrink: unset; flex-basis: unset; flex-direction: column; gap: 0; } .legal-bar-links[b-anm3etpb1r] { padding-top: var(--spacing-12); align-self: start; } .legal-bar-copyright-label[b-anm3etpb1r] { min-width: auto; flex-grow: unset; flex-shrink: unset; flex-basis: unset; } } /* /Components/Layout/LanguageBar.razor.rz.scp.css */ .isInactive[b-nvu2d10d3h] { text-decoration: none; } @media (max-width: 359px) { .language-bar-container[b-nvu2d10d3h] { display: none; } } /* /Components/Layout/MainLayout.razor.rz.scp.css */ .navProgress[b-vcorz504yr] { position: fixed; top: 0; left: 0; height: 3px; width: calc(var(--nav-progress, 0%) * 1%); background: linear-gradient(90deg, #0B5FFF 0%, #6C5CE7 50%, #00C2FF 100%); opacity: 0; transition: width 140ms linear, opacity 140ms linear; z-index: 9999; } .navProgress.isVisible[b-vcorz504yr] { opacity: 1; } /* Show a quick bar on hard refresh/unload too */ html.nav-hard-loading .navProgress[b-vcorz504yr] { opacity: 1; width: 90%; } /* /Components/Pages/AboutEvo/AboutEvoFeatureCardView.razor.rz.scp.css */ /* ========================================================================= FEATURE CARD (child component) The article element rendered by this component does not inherit the AboutEvoPage CSS-isolation scope. Styles for cards must live here so they get the child component's own scope and actually match the rendered DOM. ========================================================================= */ .aboutEvo__featureCard[b-8vu6gppb0d] { position: relative; background: var(--color-background-base-secondary, #f5f5f5); border-radius: 24px; padding: 24px; overflow: hidden; box-sizing: border-box; /* Three cards per row with a 24px gap totals the 1280px container: (1280 - 48) / 3 ≈ 410.67. */ width: calc((100% - 48px) / 3); height: 330px; display: flex; flex-direction: column; gap: 16px; } /* Wide "docs" card per Figma: 764x320. Combined with the adjacent card and one 24px gap this fills the 1280 row (764 + 24 + 492 = 1280). */ .aboutEvo__featureCard--wide[b-8vu6gppb0d] { width: 764px; height: 320px; } /* The normal card sitting in the same row as a wide card is 492px wide and matches the wide card's height (320px). */ .aboutEvo__featureCard--wide + .aboutEvo__featureCard[b-8vu6gppb0d] { width: 492px; height: 320px; } /* Full-width card — used by the "reminders" card. Takes the entire row. */ .aboutEvo__featureCard--full[b-8vu6gppb0d] { width: 100%; height: 295px; } /* Half-wide card — 2 per row at 629px each (used in the business view). */ .aboutEvo__featureCard--half[b-8vu6gppb0d] { width: calc((100% - 24px) / 2); height: 320px; } .aboutEvo__featureCard--collapsed-hidden[b-8vu6gppb0d] { display: none; } .aboutEvo__featureBadge[b-8vu6gppb0d] { width: 36px; height: 36px; border-radius: 10px; color: #1351ff; display: inline-flex; align-items: center; justify-content: center; } .aboutEvo__featureBadge--blue[b-8vu6gppb0d] { color: #1351ff; } /* EVO brand mark used on the full-width "reminders" card instead of the icon badge. */ .aboutEvo__featureLogo[b-8vu6gppb0d] { display: block; width: 38px; height: 38px; } .aboutEvo__featureCardText[b-8vu6gppb0d] { max-width: 320px; } .aboutEvo__featureCardTitle[b-8vu6gppb0d] { color: var(--color-text-base-default, #121212); font-size: 18px; font-weight: 600; line-height: 26px; letter-spacing: -0.18px; margin: 0 0 8px; } .aboutEvo__featureCardDescription[b-8vu6gppb0d] { color: var(--color-text-base-secondary, #383838); font-size: 16px; font-weight: 400; line-height: 24px; margin: 0; } .aboutEvo__featureCardArt[b-8vu6gppb0d] { margin-top: auto; align-self: flex-end; width: min(280px, 60%); } .aboutEvo__featureCardArt img[b-8vu6gppb0d] { width: 100%; height: auto; display: block; } .aboutEvo__featureCard--wide .aboutEvo__featureCardArt[b-8vu6gppb0d] { position: absolute; right: 24px; bottom: 0; width: 280px; margin-top: 0; } .aboutEvo__featureCard--wide .aboutEvo__featureCardArt--docs[b-8vu6gppb0d] { position: absolute; top: 0; right: 0; bottom: 0; width: auto; height: 100%; aspect-ratio: 426 / 320; margin-top: 0; } .aboutEvo__featureCardArt--docs img[b-8vu6gppb0d] { width: 100%; height: 100%; display: block; object-fit: cover; } /* Generic image visual — default places the image flush to the bottom-right of the card (used by services + the smaller image cards in the lower rows). Per-card overrides further down move the image to top-right or bottom-spanning where Figma asks for that. */ .aboutEvo__featureCardArt--image[b-8vu6gppb0d] { margin-top: auto; align-self: flex-end; max-width: 100%; } .aboutEvo__featureCardArt--image img[b-8vu6gppb0d] { max-width: 100%; width: auto; height: auto; display: block; } /* Pay + official-data: image sits at the TOP of the card (right side). Achieved by ordering the artwork before the badge in the flex flow. */ .aboutEvo__featureCard[data-feature-id="pay"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="biz-pay"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="official-data"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="biz-data"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d] { order: -1; margin-top: 0; margin-bottom: 4px; align-self: flex-end; width: auto; max-width: 280px; } .aboutEvo__featureCard[data-feature-id="pay"] .aboutEvo__featureCardArt--image img[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="biz-pay"] .aboutEvo__featureCardArt--image img[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="official-data"] .aboutEvo__featureCardArt--image img[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="biz-data"] .aboutEvo__featureCardArt--image img[b-8vu6gppb0d] { width: 100%; max-width: 100%; } /* Payouts: 2 payment-card image sits at the BOTTOM of the card, spanning the card width (with the standard 24px side padding). */ .aboutEvo__featureCard[data-feature-id="payouts"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d] { align-self: stretch; margin-top: auto; margin-bottom: -10px; /* small pull-down per Figma "9" bottom inset */ max-width: none; width: 100%; } .aboutEvo__featureCard[data-feature-id="payouts"] .aboutEvo__featureCardArt--image img[b-8vu6gppb0d] { width: 100%; max-width: 100%; } /* Dual-image variant — used by biz-docs (profile switching) and biz-reports (file access). Two phones float on the right side of the full-width card: - .--primary anchored to the BOTTOM of the card - .--secondary anchored to the TOP of the card The two phones overlap slightly to create a staggered/profile-switch feel. */ .aboutEvo__featureCardArt--dual[b-8vu6gppb0d] { position: absolute; top: 0; right: 0; bottom: 0; width: 45%; margin: 0; align-self: auto; overflow: hidden; } .aboutEvo__featureCardArt--dual .aboutEvo__featureCardArt--primary[b-8vu6gppb0d] { position: absolute; bottom: 0; left: 8%; width: 46%; height: auto; max-height: none; display: block; } .aboutEvo__featureCardArt--dual .aboutEvo__featureCardArt--secondary[b-8vu6gppb0d] { position: absolute; top: 0; right: 6%; width: 46%; height: auto; max-height: none; display: block; } /* On the full-width card the dual visual covers the right ~45% of the card. */ .aboutEvo__featureCard--full .aboutEvo__featureCardArt--dual[b-8vu6gppb0d] { width: 45%; } /* Reserve text space on the left of biz-docs / biz-reports so the right-side phones don't overlap the title/description. */ .aboutEvo__featureCard--full .aboutEvo__featureCardText[b-8vu6gppb0d] { max-width: 38%; } /* Half cards ("Programezi fără drumuri inutile" + "Plăți pentru afacerea ta") — phone illustration is absolutely positioned at the top-right of the card (top: 144px, right: 32px, width: 324px per Figma) so its bottom hangs below the 320px card and gets clipped by the card's overflow: hidden. */ .aboutEvo__featureCard[data-feature-id="biz-employees"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="biz-pay"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d] { position: absolute; top: 144px; right: 32px; width: 324px; height: auto; margin: 0; align-self: auto; max-width: none; } .aboutEvo__featureCard[data-feature-id="biz-employees"] .aboutEvo__featureCardArt--image img[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="biz-pay"] .aboutEvo__featureCardArt--image img[b-8vu6gppb0d] { width: 100%; max-width: 100%; height: auto; display: block; } /* Services: small service-card image at BOTTOM-right (default position with a slight right inset). */ .aboutEvo__featureCard[data-feature-id="services"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="biz-services"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d] { margin-top: auto; margin-right: 13px; /* 37 - 24 card padding ≈ 13 */ align-self: flex-end; width: auto; max-width: 220px; } .aboutEvo__featureCard[data-feature-id="services"] .aboutEvo__featureCardArt--image img[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="biz-services"] .aboutEvo__featureCardArt--image img[b-8vu6gppb0d] { width: 100%; max-width: 100%; } /* On the full-width card the image fills the right side, height of the card. */ .aboutEvo__featureCard--full .aboutEvo__featureCardArt--image[b-8vu6gppb0d] { position: absolute; top: 0; right: 0; bottom: 0; margin-top: 0; align-self: auto; width: auto; height: 100%; max-width: 60%; } .aboutEvo__featureCard--full .aboutEvo__featureCardArt--image img[b-8vu6gppb0d] { width: auto; height: 100%; max-width: none; object-fit: contain; object-position: right center; } /* Reserve text space on the left of the full card so the right-side image doesn't overlap the title/description. */ .aboutEvo__featureCard--full .aboutEvo__featureCardText[b-8vu6gppb0d] { max-width: 38%; } /* Pay chip */ .aboutEvo__featurePayChip[b-8vu6gppb0d] { background: #ffffff; border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 12px 32px rgba(20, 22, 60, 0.06); margin-top: auto; } .aboutEvo__featurePayChipDot[b-8vu6gppb0d] { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #f8c97e, #f56565); flex-shrink: 0; } .aboutEvo__featurePayChipText[b-8vu6gppb0d] { display: flex; flex-direction: column; gap: 2px; flex: 1; } .aboutEvo__featurePayChipLine1[b-8vu6gppb0d] { color: #121212; font-size: 13px; font-weight: 600; } .aboutEvo__featurePayChipLine2[b-8vu6gppb0d] { color: #5b6573; font-size: 12px; } .aboutEvo__featurePayChipAmount[b-8vu6gppb0d] { color: #121212; font-size: 13px; font-weight: 600; } /* Payout cards */ .aboutEvo__featurePayoutCards[b-8vu6gppb0d] { margin-top: auto; } .aboutEvo__featurePayoutCard[b-8vu6gppb0d] { background: #ffffff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 12px 32px rgba(20, 22, 60, 0.06); display: flex; flex-direction: column; gap: 4px; } .aboutEvo__featurePayoutCardLabel[b-8vu6gppb0d] { color: #5b6573; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; } .aboutEvo__featurePayoutCardTitle[b-8vu6gppb0d] { color: #121212; font-size: 13px; font-weight: 600; } .aboutEvo__featurePayoutCardBadge[b-8vu6gppb0d] { display: inline-flex; align-self: flex-start; margin-top: 6px; padding: 4px 10px; background: #eaf0ff; color: #1351ff; font-size: 11px; font-weight: 500; border-radius: 999px; } /* Data chips */ .aboutEvo__featureDataChips[b-8vu6gppb0d] { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; } .aboutEvo__featureDataChip[b-8vu6gppb0d] { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: #ffffff; border-radius: 999px; box-shadow: 0 2px 6px rgba(20, 22, 60, 0.05); color: #121212; font-size: 12px; font-weight: 500; } .aboutEvo__featureDataChip .dot[b-8vu6gppb0d] { width: 6px; height: 6px; border-radius: 50%; background: #5b6573; } .aboutEvo__featureDataChip--accent[b-8vu6gppb0d] { background: #fff6c4; } .aboutEvo__featureDataChip--accent .dot[b-8vu6gppb0d] { background: #f59e0b; } .aboutEvo__featureDataChipTag[b-8vu6gppb0d] { background: #fde68a; color: #92400e; padding: 2px 6px; border-radius: 6px; font-size: 10px; font-weight: 600; } /* Service card */ .aboutEvo__featureServiceCard[b-8vu6gppb0d] { background: #ffffff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 12px 32px rgba(20, 22, 60, 0.06); display: flex; flex-direction: column; gap: 4px; margin-top: auto; } .aboutEvo__featureServiceCardLabel[b-8vu6gppb0d] { color: #5b6573; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; } .aboutEvo__featureServiceCardTitle[b-8vu6gppb0d] { color: #121212; font-size: 13px; font-weight: 600; } .aboutEvo__featureServiceCardCta[b-8vu6gppb0d] { display: inline-flex; align-self: stretch; justify-content: center; margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: #1351ff; color: #ffffff; font-size: 12px; font-weight: 600; } .aboutEvo__featureSoonBadge[b-8vu6gppb0d] { position: absolute; top: 20px; right: 20px; z-index: 5; padding: 4px 10px; border-radius: 999px; background: #e0e8ff; color: #1351ff; font-size: 11px; font-weight: 600; } /* ========================================================================= RESPONSIVE ========================================================================= */ @media (max-width: 1100px) { .aboutEvo__featureCard[b-8vu6gppb0d], .aboutEvo__featureCard--half[b-8vu6gppb0d] { width: calc((100% - 24px) / 2); } .aboutEvo__featureCard--wide[b-8vu6gppb0d], .aboutEvo__featureCard--wide + .aboutEvo__featureCard[b-8vu6gppb0d], .aboutEvo__featureCard--full[b-8vu6gppb0d] { width: 100%; } } @media (max-width: 820px) { .aboutEvo__featureCard[b-8vu6gppb0d], .aboutEvo__featureCard--wide[b-8vu6gppb0d], .aboutEvo__featureCard--full[b-8vu6gppb0d], .aboutEvo__featureCard--half[b-8vu6gppb0d], .aboutEvo__featureCard--wide + .aboutEvo__featureCard[b-8vu6gppb0d] { width: 100%; height: auto; min-height: 280px; } .aboutEvo__featureCard--wide .aboutEvo__featureCardArt[b-8vu6gppb0d] { position: static; width: 100%; align-self: center; margin-top: 16px; } .aboutEvo__featureCard--wide .aboutEvo__featureCardArt--docs[b-8vu6gppb0d] { position: static; width: 100%; height: auto; aspect-ratio: auto; margin-top: 16px; } .aboutEvo__featureCard--full .aboutEvo__featureCardArt--image[b-8vu6gppb0d] { position: static; width: 100%; max-width: 100%; height: auto; margin-top: 16px; } .aboutEvo__featureCard--full .aboutEvo__featureCardArt--image img[b-8vu6gppb0d] { width: 100%; height: auto; } .aboutEvo__featureCard--full .aboutEvo__featureCardText[b-8vu6gppb0d] { max-width: 100%; } } /* ========================================================================= FIGMA-EXACT CITIZEN CARD LAYOUT (desktop ≥ 821px) Pixel-matches Figma node 15511-95525 ("Citizens expanded"): every feature image is placed at the size/offset Figma specifies inside its card. Wrapped in a min-width query so the mobile rules above stay the small-screen fallback, and scoped to citizen feature ids so the business cards (biz-*) are left untouched. ========================================================================= */ @media (min-width: 821px) { /* Rows 5–8 are 304px tall in Figma (the reminders row stays 295px). */ .aboutEvo__featureCard[data-feature-id="profiles"][b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="eprescription"][b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="insurance"][b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="files"][b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="devices"][b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="emergency"][b-8vu6gppb0d] { height: 304px; } /* --- Right-side, full-height phone illustrations --- */ .aboutEvo__featureCard[data-feature-id="reminders"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="profiles"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="eprescription"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="files"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="devices"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d] { position: absolute; top: 0; bottom: 0; left: auto; height: 100%; width: auto; margin: 0; align-self: auto; max-width: none; overflow: visible; } .aboutEvo__featureCard[data-feature-id="reminders"] .aboutEvo__featureCardArt--image img[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="profiles"] .aboutEvo__featureCardArt--image img[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="eprescription"] .aboutEvo__featureCardArt--image img[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="files"] .aboutEvo__featureCardArt--image img[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="devices"] .aboutEvo__featureCardArt--image img[b-8vu6gppb0d] { width: auto; height: 100%; max-width: none; display: block; object-fit: contain; object-position: right center; } /* Per-card right gap between the phones and the card edge (from Figma). */ .aboutEvo__featureCard[data-feature-id="reminders"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d] { right: 24px; } .aboutEvo__featureCard[data-feature-id="profiles"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d] { right: 80px; } .aboutEvo__featureCard[data-feature-id="eprescription"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d] { right: 34px; } .aboutEvo__featureCard[data-feature-id="files"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d] { right: 85px; } .aboutEvo__featureCard[data-feature-id="devices"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d] { right: 10px; } /* Keep the heading/description clear of the right-side phones. */ .aboutEvo__featureCard[data-feature-id="reminders"] .aboutEvo__featureCardText[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="profiles"] .aboutEvo__featureCardText[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="files"] .aboutEvo__featureCardText[b-8vu6gppb0d] { max-width: 430px; } /* --- Emergency: stacked icons + helpline card, top-right (not full height) --- */ .aboutEvo__featureCard[data-feature-id="emergency"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d] { position: absolute; top: 61px; right: 22px; left: auto; width: 256px; height: auto; margin: 0; align-self: auto; max-width: none; } /* --- Card-mockup illustrations anchored to the TOP of the card. The PNGs carry a soft drop-shadow, so the container clips to the Figma frame height and the heading is pushed below the artwork. --- */ .aboutEvo__featureCard[data-feature-id="pay"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d] { position: absolute; top: 28px; right: 27px; left: auto; width: 307px; height: 90px; overflow: hidden; margin: 0; align-self: auto; max-width: none; } .aboutEvo__featureCard[data-feature-id="pay"][b-8vu6gppb0d] { padding-top: 121px; } .aboutEvo__featureCard[data-feature-id="official-data"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d] { position: absolute; top: 0; right: 6px; left: auto; width: 267px; height: auto; margin: 0; align-self: auto; max-width: none; } .aboutEvo__featureCard[data-feature-id="official-data"][b-8vu6gppb0d] { padding-top: 147px; } .aboutEvo__featureCard[data-feature-id="alerts"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d] { position: absolute; top: 22px; right: 24px; left: auto; width: 237px; height: 101px; overflow: hidden; margin: 0; align-self: auto; max-width: none; } .aboutEvo__featureCard[data-feature-id="alerts"][b-8vu6gppb0d] { padding-top: 131px; } /* --- Card-mockup illustrations anchored to the BOTTOM of the card. --- */ .aboutEvo__featureCard[data-feature-id="payouts"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d] { position: absolute; top: 195px; left: 67px; right: auto; width: 343px; height: auto; margin: 0; align-self: auto; max-width: none; } .aboutEvo__featureCard[data-feature-id="services"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d] { position: absolute; top: 192px; left: 127px; right: auto; width: 247px; height: auto; margin: 0; align-self: auto; max-width: none; } .aboutEvo__featureCard[data-feature-id="scheduling"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d] { position: absolute; top: 176px; left: 94px; right: auto; width: 294px; height: auto; margin: 0; align-self: auto; max-width: none; } .aboutEvo__featureCard[data-feature-id="poa"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d] { position: absolute; top: 202px; left: 30px; right: auto; width: 357px; height: auto; margin: 0; align-self: auto; max-width: none; } .aboutEvo__featureCard[data-feature-id="insurance"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d] { position: absolute; top: 191px; left: 137px; right: auto; width: 337px; height: auto; margin: 0; align-self: auto; max-width: none; } /* Shared fill for the absolutely-placed card mockups. */ .aboutEvo__featureCard[data-feature-id="pay"] .aboutEvo__featureCardArt--image img[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="official-data"] .aboutEvo__featureCardArt--image img[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="alerts"] .aboutEvo__featureCardArt--image img[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="payouts"] .aboutEvo__featureCardArt--image img[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="services"] .aboutEvo__featureCardArt--image img[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="scheduling"] .aboutEvo__featureCardArt--image img[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="poa"] .aboutEvo__featureCardArt--image img[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="insurance"] .aboutEvo__featureCardArt--image img[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="emergency"] .aboutEvo__featureCardArt--image img[b-8vu6gppb0d] { width: 100%; height: auto; max-width: none; display: block; } } /* ========================================================================= FIGMA-EXACT BUSINESS CARD LAYOUT (desktop ≥ 821px) Pixel-matches Figma node 17912-12774 ("Business expanded"). Same approach as the citizen block above, scoped to the biz-* feature ids. The business catalog layouts already match Figma's rows, so only image placement and the 304px heights of the three full-width cards are set here. ========================================================================= */ @media (min-width: 821px) { /* The three full-width business cards are 304px tall in Figma. */ .aboutEvo__featureCard[data-feature-id="biz-docs"][b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="biz-data"][b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="biz-reports"][b-8vu6gppb0d] { height: 304px; } /* biz-data: single wide two-phone illustration, right, full height. */ .aboutEvo__featureCard[data-feature-id="biz-data"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d] { position: absolute; top: 0; bottom: 0; left: auto; right: 102px; height: 100%; width: auto; margin: 0; align-self: auto; max-width: none; overflow: visible; order: 0; } .aboutEvo__featureCard[data-feature-id="biz-data"] .aboutEvo__featureCardArt--image img[b-8vu6gppb0d] { height: 100%; width: auto; max-width: none; display: block; object-fit: contain; object-position: right center; } .aboutEvo__featureCard[data-feature-id="biz-data"] .aboutEvo__featureCardText[b-8vu6gppb0d] { max-width: 430px; } /* biz-employees / biz-pay: single phone, right, full height. */ .aboutEvo__featureCard[data-feature-id="biz-employees"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d] { position: absolute; top: 0; bottom: 0; left: auto; right: 15px; height: 100%; width: auto; margin: 0; align-self: auto; max-width: none; } .aboutEvo__featureCard[data-feature-id="biz-pay"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d] { position: absolute; top: 0; bottom: 0; left: auto; right: 32px; height: 100%; width: auto; margin: 0; align-self: auto; max-width: none; } .aboutEvo__featureCard[data-feature-id="biz-employees"] .aboutEvo__featureCardArt--image img[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="biz-pay"] .aboutEvo__featureCardArt--image img[b-8vu6gppb0d] { height: 100%; width: auto; max-width: none; display: block; object-fit: contain; object-position: right center; } .aboutEvo__featureCard[data-feature-id="biz-employees"] .aboutEvo__featureCardText[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="biz-pay"] .aboutEvo__featureCardText[b-8vu6gppb0d] { max-width: 300px; } /* biz-notifications: notification stack anchored to the TOP (clipped). */ .aboutEvo__featureCard[data-feature-id="biz-notifications"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d] { position: absolute; top: 26px; right: 21px; left: auto; width: 249px; height: 98px; overflow: hidden; margin: 0; align-self: auto; max-width: none; } .aboutEvo__featureCard[data-feature-id="biz-notifications"][b-8vu6gppb0d] { padding-top: 145px; } .aboutEvo__featureCard[data-feature-id="biz-notifications"] .aboutEvo__featureCardArt--image img[b-8vu6gppb0d] { width: 100%; height: auto; max-width: none; display: block; } /* biz-services: service card anchored to the bottom. */ .aboutEvo__featureCard[data-feature-id="biz-services"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d] { position: absolute; top: 184px; left: 140px; right: auto; bottom: auto; width: 245px; height: auto; margin: 0; align-self: auto; max-width: none; } .aboutEvo__featureCard[data-feature-id="biz-services"] .aboutEvo__featureCardArt--image img[b-8vu6gppb0d] { width: 100%; height: auto; max-width: none; display: block; } /* biz-authorizations: empowerment cards anchored to the bottom. */ .aboutEvo__featureCard[data-feature-id="biz-authorizations"] .aboutEvo__featureCardArt--image[b-8vu6gppb0d] { position: absolute; top: 202px; left: 30px; right: auto; width: 357px; height: auto; margin: 0; align-self: auto; max-width: none; } .aboutEvo__featureCard[data-feature-id="biz-authorizations"] .aboutEvo__featureCardArt--image img[b-8vu6gppb0d] { width: 100%; height: auto; max-width: none; display: block; } /* biz-docs / biz-reports: the two phone illustrations are placed at their exact Figma group offsets. Each phone PNG already matches its group's aspect ratio, so the phone's vertical position (staggered for biz-docs, level for biz-reports) is encoded in the asset. */ .aboutEvo__featureCard[data-feature-id="biz-docs"] .aboutEvo__featureCardArt--dual[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="biz-reports"] .aboutEvo__featureCardArt--dual[b-8vu6gppb0d] { position: absolute; top: 0; bottom: 0; left: auto; height: 100%; margin: 0; align-self: auto; overflow: hidden; } .aboutEvo__featureCard[data-feature-id="biz-docs"] .aboutEvo__featureCardArt--dual[b-8vu6gppb0d] { right: 80px; width: 537px; } .aboutEvo__featureCard[data-feature-id="biz-reports"] .aboutEvo__featureCardArt--dual[b-8vu6gppb0d] { right: 85px; width: 553px; } .aboutEvo__featureCard[data-feature-id="biz-docs"] .aboutEvo__featureCardArt--dual .aboutEvo__featureCardArt--primary[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="biz-reports"] .aboutEvo__featureCardArt--dual .aboutEvo__featureCardArt--primary[b-8vu6gppb0d] { position: absolute; top: 0; bottom: 0; left: 0; right: auto; height: 100%; width: auto; max-height: none; display: block; } .aboutEvo__featureCard[data-feature-id="biz-docs"] .aboutEvo__featureCardArt--dual .aboutEvo__featureCardArt--secondary[b-8vu6gppb0d] { position: absolute; top: 0; bottom: 0; left: 261px; right: auto; height: 100%; width: auto; max-height: none; display: block; } .aboutEvo__featureCard[data-feature-id="biz-reports"] .aboutEvo__featureCardArt--dual .aboutEvo__featureCardArt--secondary[b-8vu6gppb0d] { position: absolute; top: 0; bottom: 0; left: 206px; right: auto; height: 100%; width: auto; max-height: none; display: block; } .aboutEvo__featureCard[data-feature-id="biz-docs"] .aboutEvo__featureCardText[b-8vu6gppb0d], .aboutEvo__featureCard[data-feature-id="biz-reports"] .aboutEvo__featureCardText[b-8vu6gppb0d] { max-width: 430px; } } /* /Components/Pages/AboutEvoPage.razor.rz.scp.css */ /* ========================================================================= ABOUT EVO PAGE ========================================================================= */ .aboutEvo[b-q0w68u7rfe] { --aboutEvo-text: #121212; --aboutEvo-muted: #5b6573; --aboutEvo-line: #e6e8eb; --aboutEvo-surface: #ffffff; --aboutEvo-surface-soft: #f5f6f8; --aboutEvo-radius-lg: 24px; --aboutEvo-radius-md: 16px; --aboutEvo-radius-sm: 12px; --aboutEvo-brand: #1351ff; --aboutEvo-lavender: #ece8ff; --aboutEvo-lavender-strong: #d8d0ff; --aboutEvo-lavender-deep: #c6b9ff; --aboutEvo-shadow: 0 12px 32px rgba(20, 22, 60, 0.06); } .aboutEvo .container-fluid[b-q0w68u7rfe] { margin: 0 auto; max-width: 1280px; } /* The global .container-fluid adds `padding: 0 24px`. The features section needs 1280px of INNER space (so the row 764 + 24 + 492 == 1280 fits), so widen the outer max-width by the 48px of horizontal padding. */ .aboutEvo__features .container-fluid[b-q0w68u7rfe] { max-width: 1328px; } /* Offset in-page anchor scrolling for the sticky header. */ .aboutEvo[id][b-q0w68u7rfe] { scroll-margin-top: 120px; } /* ========================================================================= HERO ========================================================================= */ .aboutEvo__hero[b-q0w68u7rfe] { padding: 0; } /* Hero breaks out of the 1280 container to span the full page width (same as the Home hero). */ .aboutEvo__hero .container-fluid[b-q0w68u7rfe] { max-width: none; padding: 0; } .aboutEvo__heroInner[b-q0w68u7rfe] { position: relative; /* Gradient is constrained to the top 543px so it lines up with the animated curves (.aboutEvo__heroCurves) — the anchor cards sit below this "card" area on the page background. */ background: linear-gradient(101.16deg, #d6e4f8 6.05%, #e6d6fe 57.85%, #ba91ff 95.84%) no-repeat; background-size: 100% 543px; border-radius: 32px; margin: 12px; overflow: hidden; padding: 56px 64px 48px; } /* Wrapper anchors the award to the 1280px page-content edge, not to the gradient card (.aboutEvo__heroInner) edge. */ .aboutEvo__heroAwardWrap[b-q0w68u7rfe] { position: relative; /* Constrained to the 1280 content column so the badge sits inside the container, tucked under the header's "Obține semnătura" button and close to the phone. */ max-width: 1280px; margin: 0 auto; height: 0; z-index: 3; pointer-events: none; } .aboutEvo__heroAward[b-q0w68u7rfe] { position: absolute; top: 8px; /* Sits at the right edge of the 1280 content column (near the phone, under the header's signature button). */ right: 0; width: 120px; height: auto; filter: drop-shadow(0 10px 24px rgba(20, 22, 60, 0.14)); pointer-events: auto; } @media (max-width: 860px) { .aboutEvo__heroAward[b-q0w68u7rfe] { width: 88px; right: 20px; } } @media (max-width: 480px) { .aboutEvo__heroAward[b-q0w68u7rfe] { display: none; } } .aboutEvo__heroCurves[b-q0w68u7rfe] { position: absolute; top: 0; left: 0; right: 0; height: 543px; z-index: 0; overflow: hidden; pointer-events: none; } .aboutEvo__heroContent[b-q0w68u7rfe] { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 32px; align-items: start; padding-bottom: 40px; } .aboutEvo__heroText[b-q0w68u7rfe] { max-width: 560px; padding-top: 8px; align-self: start; } .aboutEvo__heroTitle[b-q0w68u7rfe] { color: var(--aboutEvo-text); font-size: 48px; font-weight: 600; line-height: 56px; letter-spacing: -1px; margin: 0 0 16px; } .aboutEvo__heroSubtitle[b-q0w68u7rfe] { color: #2c2c2c; font-size: 16px; line-height: 24px; margin: 0 0 32px; } .aboutEvo__qrCard[b-q0w68u7rfe] { display: flex; width: 487px; max-width: 100%; padding: var(--spacing-8, 8px); align-items: center; gap: var(--spacing-8, 8px); border-radius: var(--border-radius-16, 16px); border: 1px solid var(--gray-250, #D9D9D9); background: var(--color-background-base-default, #ffffff); margin: 0 0 20px; box-sizing: border-box; } .aboutEvo__qrCardImage[b-q0w68u7rfe] { width: 102px; height: 102px; border-radius: 12px; flex-shrink: 0; } .aboutEvo__qrCardBody[b-q0w68u7rfe] { display: flex; width: 360px; padding: var(--spacing-16, 16px); flex-direction: column; justify-content: center; align-items: center; gap: var(--spacing-20, 20px); flex-shrink: 0; border-radius: var(--border-radius-12, 12px); background: var(--color-background-base-secondary, #f5f5f5); box-sizing: border-box; } .aboutEvo__qrCardTitle[b-q0w68u7rfe] { color: var(--aboutEvo-text); font-size: 14px; font-weight: 600; line-height: 20px; margin: 0; } .aboutEvo__qrCardAvailable[b-q0w68u7rfe] { color: var(--aboutEvo-muted); font-size: 12px; line-height: 16px; margin: 0; } .aboutEvo__storeBadges[b-q0w68u7rfe] { display: flex; gap: 8px; } .aboutEvo__storeBadge img[b-q0w68u7rfe] { height: 32px; width: auto; } .aboutEvo__signatureHint[b-q0w68u7rfe] { color: #3d3d3d; font-size: 13px; line-height: 20px; margin: 0; } .aboutEvo__signatureLink[b-q0w68u7rfe] { color: var(--aboutEvo-brand); display: inline-flex; align-items: center; gap: 4px; font-weight: 500; text-decoration: none; margin-left: 4px; } .aboutEvo__signatureLink:hover[b-q0w68u7rfe] { text-decoration: underline; } /* Keep these inline arrows at 16px (the global .icon rule forces 24px). */ .aboutEvo__signatureLink .icon[b-q0w68u7rfe], .aboutEvo__walletRoadmapBannerCta .icon[b-q0w68u7rfe] { width: 16px; height: 16px; } .aboutEvo__heroPhone[b-q0w68u7rfe] { /* Pull the phone UP so its top sits flush with the top of the hero banner (offsetting the banner's 56px top padding), and shrink its flow contribution so the heroContent row is shorter — that lifts the anchor row below up toward the QR card / signature hint. */ margin-top: -56px; margin-bottom: -96px; align-self: start; } .aboutEvo__heroPhoneImage[b-q0w68u7rfe] { max-width: 100%; width: 420px; height: auto; display: block; } .aboutEvo__heroAnchors[b-q0w68u7rfe] { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .aboutEvo__heroAnchor[b-q0w68u7rfe] { position: relative; background: var(--color-background-base-default, #ffffff); color: var(--aboutEvo-text); padding: 32px; min-height: 112px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; gap: 12px; text-decoration: none; font-size: 18px; font-weight: 600; line-height: 26px; letter-spacing: -0.18px; border-radius: 12px; box-shadow: 0 0 0.5px 0 rgba(0, 0, 0, 0.15), 0 5px 12px 0 rgba(0, 0, 0, 0.08), 0 1px 3px 0 rgba(0, 0, 0, 0.08); transition: background 0.15s ease, box-shadow 0.15s ease; } .aboutEvo__heroAnchor:hover[b-q0w68u7rfe], .aboutEvo__heroAnchor:focus-visible[b-q0w68u7rfe] { background: #f7f5ff; box-shadow: 0 0 0.5px 0 rgba(0, 0, 0, 0.15), 0 10px 24px 0 rgba(0, 0, 0, 0.10), 0 1px 3px 0 rgba(0, 0, 0, 0.08); } .aboutEvo__heroAnchorLabel[b-q0w68u7rfe] { max-width: 100%; } /* The chevron is hidden by default and only fades in when the card is hovered or focused (per Figma 14773-38740). It is pinned to the top-right corner and floats outside the flex flow. */ .aboutEvo__heroAnchorIcon[b-q0w68u7rfe] { position: absolute; top: 20px; right: 24px; width: 24px; height: 24px; flex-shrink: 0; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .aboutEvo__heroAnchor:hover .aboutEvo__heroAnchorIcon[b-q0w68u7rfe], .aboutEvo__heroAnchor:focus-visible .aboutEvo__heroAnchorIcon[b-q0w68u7rfe] { opacity: 1; } /* The wallet anchor uses the inline EU-wallet logo instead of a hover chevron, so never show the chevron arrows there (even on hover/focus). */ .aboutEvo__heroAnchor--wallet .aboutEvo__heroAnchorIcon[b-q0w68u7rfe] { display: none; } /* Wallet anchor shows the EU Digital Identity Wallet logo inline, right after the "…EVO" label (no chevron). */ .aboutEvo__heroAnchorLogo[b-q0w68u7rfe] { display: inline-block; vertical-align: middle; margin-left: 8px; width: 72px; height: 24px; } /* ========================================================================= FEATURES SECTION ========================================================================= */ .aboutEvo__features[b-q0w68u7rfe] { padding: 80px 0 64px; } .aboutEvo__sectionTitle[b-q0w68u7rfe] { color: var(--aboutEvo-text); font-size: 48px; font-weight: 600; line-height: 56px; letter-spacing: -0.96px; margin: 0 0 24px; } .aboutEvo__sectionTitle--center[b-q0w68u7rfe] { text-align: center; margin-bottom: 24px; } .aboutEvo__sectionDescription[b-q0w68u7rfe] { color: var(--aboutEvo-muted); font-size: 16px; line-height: 24px; margin: 0; } .aboutEvo__eyebrow[b-q0w68u7rfe] { color: var(--color-text-base-secondary, #383838); font-size: 16px; font-weight: 600; line-height: 24px; margin: 0 0 12px; letter-spacing: -0.16px; } .aboutEvo__featuresToggle[b-q0w68u7rfe] { display: inline-flex; margin: 0 auto 40px; background: var(--color-background-base-default, #ffffff); border-radius: 999px; padding: 6px; gap: 6px; justify-content: center; } .aboutEvo__features .aboutEvo__featuresToggle[b-q0w68u7rfe] { display: flex; width: fit-content; margin-left: auto; margin-right: auto; } .aboutEvo__featuresToggleBtn[b-q0w68u7rfe] { background: var(--color-background-base-tertiary, #f1f1f1); border: 0; border-radius: 999px; color: var(--aboutEvo-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; font-size: 14px; font-weight: 500; padding: 0 16px; transition: background 0.15s ease, color 0.15s ease; } .aboutEvo__featuresToggleBtn.isActive[b-q0w68u7rfe] { background: var(--color-background-base-inverse-default, #1e1e1e); color: #ffffff; box-shadow: 0 0 0.5px 0 rgba(0, 0, 0, 0.30), 0 1px 3px 0 rgba(0, 0, 0, 0.16); } .aboutEvo__featuresPanel.is-hidden[b-q0w68u7rfe] { display: none; } .aboutEvo__featuresGrid[b-q0w68u7rfe] { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 32px; /* Per Figma every row totals 1280: - row 1: 764 + 24 + 492 = 1280 - rows of 3 normals: ~410 + 24 + ~410 + 24 + ~412 = 1280 - full card: 1280 Fixed max-width keeps wrapping predictable. */ max-width: 1280px; margin-left: auto; margin-right: auto; } /* Card visibility rules that span the parent section and the child cards (rendered by AboutEvoFeatureCardView). The pure-card styling lives in AboutEvoFeatureCardView.razor.css. */ .aboutEvo__features.is-expanded[b-q0w68u7rfe] .aboutEvo__featureCard--collapsed-hidden { display: flex; } .aboutEvo__features:not(.is-expanded) .aboutEvo__featuresPanel[data-audience-panel="citizen"]:not(.is-hidden)[b-q0w68u7rfe] .aboutEvo__featureCard:nth-child(n+7) { display: none; } .aboutEvo__features:not(.is-expanded) .aboutEvo__featuresPanel[data-audience-panel="business"]:not(.is-hidden)[b-q0w68u7rfe] .aboutEvo__featureCard:nth-child(n+5) { display: none; } .aboutEvo__featuresFade[b-q0w68u7rfe] { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-end; /* As tall as the last visible (reminders) card and pulled up over it, so that card sits behind the gradient — only its top peeks until the "Show all" button (sitting at the bottom of the fade) is clicked. */ margin-top: -327px; height: 295px; box-sizing: border-box; padding-top: 0; padding-bottom: 64px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFF 85%); pointer-events: none; } .aboutEvo__features.is-expanded .aboutEvo__featuresFade[b-q0w68u7rfe] { margin-top: 8px; height: auto; padding-top: 0; background: none; } .aboutEvo__showAllButton[b-q0w68u7rfe] { display: inline-flex; height: 48px; min-width: 72px; margin: 0 auto; padding: var(--spacing-0, 0) var(--spacing-20, 20px); justify-content: center; align-items: center; gap: var(--spacing-0, 0); border-radius: var(--border-radius-8, 8px); background: var(--color-background-base-inverse-default, #121212); color: #ffffff; border: 0; font-size: 14px; font-weight: 500; cursor: pointer; pointer-events: auto; transition: background 0.15s ease; } .aboutEvo__showAllButton:hover[b-q0w68u7rfe] { background: #2c2c2c; } .aboutEvo__showAllButton[hidden][b-q0w68u7rfe] { display: none; } .aboutEvo__features.is-expanded .aboutEvo__showAllButton[b-q0w68u7rfe] { display: none; } /* ========================================================================= COMPANION SECTION (Poartă mereu cu tine) ========================================================================= */ .aboutEvo__companion[b-q0w68u7rfe] { padding: 32px 0 80px; } .aboutEvo__companionInner[b-q0w68u7rfe] { background: linear-gradient(135deg, #f4eeff 0%, #e3d4ff 100%); border-radius: 76px; padding: 42px 42px 42px 50px; display: flex; flex-direction: column; gap: 20px; position: relative; overflow: hidden; } .aboutEvo__companionHead[b-q0w68u7rfe] { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; align-items: start; margin-bottom: 0; } .aboutEvo__companionHead .aboutEvo__sectionDescription[b-q0w68u7rfe] { font-size: 18px; line-height: 28px; font-weight: 400; color: var(--color-text-base-default, #1a1a1a); } /* Product names ("EVO Aplicație"/"EVO Cabinet") use Body/Large 500 (Onest Medium) per Figma — not the browser-default 700. ::deep is required because the is injected via MarkupString and therefore does NOT carry this component's CSS-isolation scope attribute; without ::deep the compiled selector (b[b-xxx]) can't match it and the text falls back to bold 700. */ .aboutEvo__companionHead .aboutEvo__sectionDescription[b-q0w68u7rfe] b { font-weight: 500; } .aboutEvo__companionHead .aboutEvo__eyebrow[b-q0w68u7rfe] { margin-bottom: 8px; } /* Companion title is H1 (40/48), not the 48px Display used elsewhere. */ .aboutEvo__companionHead .aboutEvo__sectionTitle[b-q0w68u7rfe] { margin: 0; font-size: 40px; line-height: 48px; letter-spacing: -0.8px; } .aboutEvo__companionMedia[b-q0w68u7rfe] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } .aboutEvo__companionMediaImage[b-q0w68u7rfe] { width: 100%; max-width: 574px; height: auto; aspect-ratio: 574 / 283; display: block; border-radius: 12px; } /* ========================================================================= WALLET SECTION ========================================================================= */ .aboutEvo__wallet[b-q0w68u7rfe] { padding: 32px 0; } .aboutEvo__walletInner[b-q0w68u7rfe] { background: #EEE5F9; border-radius: 30px; /* Full-width purple card — content is constrained by the inner .container-fluid (max-width 1280px). Horizontal padding lives on the container, not on this card, so the hand can hang off the left edge without being clipped by content padding. */ padding: 64px 0; margin: 0 12px; position: relative; overflow: hidden; } .aboutEvo__walletDecor[b-q0w68u7rfe] { position: absolute; inset: 0; background-image: radial-gradient(circle at 0% 60%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 50%); pointer-events: none; } .aboutEvo__walletHand[b-q0w68u7rfe] { position: absolute; /* Anchored to the LEFT edge of the (now full-width) walletInner so it hangs in the outer area, outside the centered 1280 content column. */ left: 0; top: 50%; transform: translateY(-50%); width: 371.73px; height: 374.433px; pointer-events: none; z-index: 0; } .aboutEvo__walletHero[b-q0w68u7rfe] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 40px; align-items: center; position: relative; margin-bottom: 48px; } .aboutEvo__walletEyebrow[b-q0w68u7rfe] { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; } .aboutEvo__walletEyebrowText[b-q0w68u7rfe] { color: var(--aboutEvo-text); font-size: 13px; font-weight: 600; } .aboutEvo__walletEyebrowLogo[b-q0w68u7rfe] { width: 189px; height: 63px; display: block; } .aboutEvo__walletTitle[b-q0w68u7rfe] { color: var(--aboutEvo-text); font-size: 56px; font-weight: 600; line-height: 64px; letter-spacing: -1.12px; margin: 0 0 16px; max-width: 600px; } .aboutEvo__walletTitleHighlight[b-q0w68u7rfe] { color: var(--aboutEvo-brand); } .aboutEvo__walletDescription[b-q0w68u7rfe] { color: #2c2c2c; font-size: 16px; line-height: 24px; margin: 0; max-width: 520px; } /* White rounded card holding the wallet illustration, per Figma. */ .aboutEvo__walletPhone[b-q0w68u7rfe] { width: 100%; max-width: 600px; margin-left: auto; padding: 16px; box-sizing: border-box; border-radius: 24px; background: #ffffff; box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.05), 0 0 0.5px 0 rgba(0, 0, 0, 0.08), 0 16px 48px 0 rgba(0, 0, 0, 0.14), 0 6px 12px 0 rgba(0, 0, 0, 0.10); overflow: hidden; } /* Single combined illustration (phone + "Verificare reușita" badge + QR); transparent PNG that fills the white card. */ .aboutEvo__walletIllustration[b-q0w68u7rfe] { display: block; width: 100%; height: auto; } .aboutEvo__walletBenefits[b-q0w68u7rfe] { position: relative; margin-bottom: 48px; } .aboutEvo__walletBenefitsTitle[b-q0w68u7rfe] { color: var(--aboutEvo-text); font-size: 22px; font-weight: 600; line-height: 28px; margin: 0 0 24px; } .aboutEvo__walletBenefitsGrid[b-q0w68u7rfe] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .aboutEvo__walletBenefit[b-q0w68u7rfe] { background: var(--lavender-200, #DDD2FA); border-radius: 16px; padding: 20px 22px; } .aboutEvo__walletBenefitIcon[b-q0w68u7rfe] { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; color: #1E1E1E; } .aboutEvo__walletBenefitIcon svg[b-q0w68u7rfe] { width: 24px; height: 24px; } .aboutEvo__walletBenefitTitle[b-q0w68u7rfe] { color: var(--aboutEvo-text); font-size: 16px; font-weight: 600; margin: 0 0 8px; } .aboutEvo__walletBenefitDesc[b-q0w68u7rfe] { color: #3d3d3d; font-size: 14px; line-height: 22px; margin: 0; } .aboutEvo__walletRoadmap[b-q0w68u7rfe] { position: relative; } .aboutEvo__walletRoadmapTitle[b-q0w68u7rfe] { color: var(--aboutEvo-text); font-size: 22px; font-weight: 600; line-height: 28px; margin: 0 0 32px; text-align: center; } .aboutEvo__walletRoadmapLine[b-q0w68u7rfe] { position: relative; height: 4px; background: var(--color-border-positive-default, #039855); border-radius: 999px; /* Full-width line; dots are inset by 5% so a green line is visible BEFORE the first dot/check and AFTER the last dot. */ margin: 12px 0 16px; padding: 0 5%; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; } .aboutEvo__walletRoadmapDot[b-q0w68u7rfe] { width: 16px; height: 16px; border-radius: 50%; background: var(--color-border-positive-default, #039855); box-shadow: 0 0 0 4px #EEE5F9; } .aboutEvo__walletRoadmapDot--done[b-q0w68u7rfe] { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--color-border-positive-default, #039855); box-shadow: 0 0 0 4px #EEE5F9; } .aboutEvo__walletRoadmapDot--done svg[b-q0w68u7rfe] { width: 20px; height: 20px; } .aboutEvo__walletRoadmapGrid[b-q0w68u7rfe] { display: grid; grid-template-columns: repeat(4, 281px); justify-content: center; align-items: start; gap: 16px; margin-bottom: 32px; } .aboutEvo__walletRoadmapCard[b-q0w68u7rfe] { background: var(--color-background-base-default, #ffffff); border-radius: 16px; padding: 16px 16px 20px; display: flex; flex-direction: column; gap: 8px; width: 281px; height: 132px; box-sizing: border-box; } /* First roadmap card ("Poți confirma autenticitatea…") is taller. */ .aboutEvo__walletRoadmapCard:first-child[b-q0w68u7rfe] { height: 155px; } .aboutEvo__walletRoadmapBadge[b-q0w68u7rfe] { display: flex; align-items: center; justify-content: center; align-self: flex-start; height: 20px; min-width: 32px; padding: 0 6px; border-radius: 4px; font-size: 11px; font-weight: 600; } .aboutEvo__walletRoadmapBadge--done[b-q0w68u7rfe] { background: #d1fae5; color: #065f46; } .aboutEvo__walletRoadmapBadge--soon[b-q0w68u7rfe] { background: #fde68a; color: #92400e; } .aboutEvo__walletRoadmapBadge--dev[b-q0w68u7rfe] { background: var(--color-background-warning-secondary, #fef0c7); color: #b54708; } .aboutEvo__walletRoadmapBadge--next[b-q0w68u7rfe] { background: #e5e7eb; color: #374151; } .aboutEvo__walletRoadmapText[b-q0w68u7rfe] { color: var(--aboutEvo-text); font-size: 14px; line-height: 20px; margin: 0; } .aboutEvo__walletRoadmapDesc[b-q0w68u7rfe] { color: var(--aboutEvo-muted); font-size: 13px; line-height: 20px; margin: 0; } .aboutEvo__walletRoadmapDoneFooter[b-q0w68u7rfe] { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .aboutEvo__walletRoadmapLink[b-q0w68u7rfe] { color: var(--aboutEvo-text); font-size: 14px; font-weight: 500; text-decoration: underline; } .aboutEvo__walletRoadmapLink:hover[b-q0w68u7rfe] { color: var(--aboutEvo-brand); } .aboutEvo__walletRoadmapIconBtn[b-q0w68u7rfe] { display: flex; width: 32px; height: 32px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 999px; background: var(--color-background-base-inverse-default, #121212); } .aboutEvo__walletRoadmapIconBtn img[b-q0w68u7rfe] { width: 16px; height: 16px; } .aboutEvo__walletRoadmapBanner[b-q0w68u7rfe] { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; background: var(--color-background-base-default, #ffffff); border-radius: 16px; max-width: 604px; min-height: 72px; padding: 12px 20px; box-sizing: border-box; text-decoration: none; color: inherit; box-shadow: 0 6px 16px rgba(20, 22, 60, 0.06); } .aboutEvo__walletRoadmapBannerLogo img[b-q0w68u7rfe] { height: 32px; width: auto; } .aboutEvo__walletRoadmapBannerTitle[b-q0w68u7rfe] { color: var(--aboutEvo-text); font-size: 14px; font-weight: 400; line-height: 20px; } .aboutEvo__walletRoadmapBannerCta[b-q0w68u7rfe] { display: inline-flex; align-items: center; gap: 6px; color: var(--aboutEvo-brand); font-weight: 600; font-size: 14px; white-space: nowrap; } /* ========================================================================= INTEGRATION SECTION ========================================================================= */ .aboutEvo__integration[b-q0w68u7rfe] { padding: 56px 0 64px; } .aboutEvo__integrationHead[b-q0w68u7rfe] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 78px; align-items: end; margin-bottom: 32px; } .aboutEvo__integrationDescription[b-q0w68u7rfe] { color: var(--color-text-base-secondary, #383838); font-size: 18px; font-weight: 400; line-height: 28px; margin: 0; } .aboutEvo__integrationGrid[b-q0w68u7rfe] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; } .aboutEvo__integrationCard[b-q0w68u7rfe] { background: var(--aboutEvo-surface-soft); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 16px; min-height: 220px; } .aboutEvo__integrationCardHead[b-q0w68u7rfe] { height: 40px; display: flex; align-items: center; } .aboutEvo__integrationCardLogo[b-q0w68u7rfe] { max-height: 40px; width: auto; } .aboutEvo__integrationCardTitle[b-q0w68u7rfe] { color: var(--color-text-base-secondary, #383838); font-size: 18px; font-weight: 600; line-height: 26px; letter-spacing: -0.18px; margin: 0; } .aboutEvo__integrationCardDescription[b-q0w68u7rfe] { color: var(--color-text-base-tertiary, #757575); font-size: 16px; font-weight: 400; line-height: 24px; margin: 0; } .aboutEvo__integrationCardCta[b-q0w68u7rfe] { margin-top: auto; align-self: flex-start; display: inline-flex; width: 168px; min-width: 56px; height: 40px; padding: 0 12px 0 16px; justify-content: center; align-items: center; gap: 6px; border-radius: 6px; background: var(--color-background-base-inverse-default, #121212); color: #ffffff; font-size: 14px; font-weight: 500; text-decoration: none; } .aboutEvo__integrationCardCta svg[b-q0w68u7rfe] { width: 20px; height: 20px; flex-shrink: 0; } .aboutEvo__integrationCardCta:hover[b-q0w68u7rfe] { background: #2c2c2c; } /* ========================================================================= FAQ ========================================================================= */ .aboutEvo__faq[b-q0w68u7rfe] { background: #f5f6f8; padding: 64px 0; } .aboutEvo__faqInner[b-q0w68u7rfe] { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 80px; align-items: start; } /* FAQ description text — 16/24, regular weight, secondary text color; the "EVO aplicația și EVO cabinet" inline emphasis is medium weight. */ .aboutEvo__faqHead .aboutEvo__sectionDescription[b-q0w68u7rfe] { align-self: stretch; color: var(--color-text-base-secondary, #383838); font-family: var(--font-family-primary-font, Onest), sans-serif; font-size: var(--font-size-fs-16, 16px); font-weight: var(--font-weight-fw-regular, 400); line-height: var(--line-height-lh-24, 24px); margin: 0; } /* ::deep required: the / come from a MarkupString and don't carry this component's scope attribute (same reason as the companion rule above). */ .aboutEvo__faqHead .aboutEvo__sectionDescription[b-q0w68u7rfe] b, .aboutEvo__faqHead .aboutEvo__sectionDescription[b-q0w68u7rfe] strong { font-weight: var(--font-weight-fw-medium, 500); color: inherit; } .aboutEvo__faqHead .aboutEvo__sectionTitle[b-q0w68u7rfe] { margin-bottom: 24px; } .aboutEvo__faqList[b-q0w68u7rfe] { list-style: none; margin: 0; padding: 0; } .aboutEvo__faqItem[b-q0w68u7rfe] { border-bottom: 1px solid #e3e5e8; } .aboutEvo__faqItem details[b-q0w68u7rfe] { padding: 18px 0; } .aboutEvo__faqQuestion[b-q0w68u7rfe] { color: var(--aboutEvo-text); font-size: 18px; font-weight: 600; line-height: 26px; letter-spacing: -0.18px; display: flex; align-items: center; justify-content: space-between; gap: 24px; list-style: none; cursor: pointer; } .aboutEvo__faqQuestion[b-q0w68u7rfe]::-webkit-details-marker { display: none; } .aboutEvo__faqIcon[b-q0w68u7rfe] { color: var(--aboutEvo-muted); transition: transform 0.2s ease; flex-shrink: 0; } .aboutEvo__faqItem details[open] .aboutEvo__faqIcon[b-q0w68u7rfe] { transform: rotate(180deg); } .aboutEvo__faqAnswer[b-q0w68u7rfe] { color: var(--aboutEvo-muted); font-size: 14px; line-height: 22px; margin-top: 12px; padding-right: 32px; } /* ========================================================================= RESPONSIVE ========================================================================= */ @media (max-width: 1100px) { .aboutEvo__heroInner[b-q0w68u7rfe] { padding: 40px 32px 0; } .aboutEvo__heroTitle[b-q0w68u7rfe] { font-size: 38px; line-height: 46px; } .aboutEvo__walletTitle[b-q0w68u7rfe] { font-size: 36px; line-height: 44px; } .aboutEvo__featuresGrid[b-q0w68u7rfe], .aboutEvo__walletBenefitsGrid[b-q0w68u7rfe], .aboutEvo__walletRoadmapGrid[b-q0w68u7rfe] { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px) { .aboutEvo__hero[b-q0w68u7rfe], .aboutEvo__companion[b-q0w68u7rfe], .aboutEvo__wallet[b-q0w68u7rfe], .aboutEvo__integration[b-q0w68u7rfe], .aboutEvo__faq[b-q0w68u7rfe] { padding-left: 0; padding-right: 0; } .aboutEvo__heroInner[b-q0w68u7rfe] { padding: 32px 24px 0; } .aboutEvo__heroContent[b-q0w68u7rfe] { grid-template-columns: 1fr; gap: 24px; padding-bottom: 48px; } .aboutEvo__heroPhone[b-q0w68u7rfe] { justify-content: center; } .aboutEvo__heroPhoneImage[b-q0w68u7rfe] { max-width: 280px; transform: none; } .aboutEvo__heroAnchors[b-q0w68u7rfe] { grid-template-columns: 1fr; } .aboutEvo__heroAnchor[b-q0w68u7rfe], .aboutEvo__heroAnchor:first-child[b-q0w68u7rfe], .aboutEvo__heroAnchor:last-child[b-q0w68u7rfe] { border-radius: 0; } .aboutEvo__features[b-q0w68u7rfe], .aboutEvo__companion[b-q0w68u7rfe], .aboutEvo__wallet[b-q0w68u7rfe], .aboutEvo__integration[b-q0w68u7rfe], .aboutEvo__faq[b-q0w68u7rfe] { padding-top: 48px; padding-bottom: 48px; } .aboutEvo__sectionTitle[b-q0w68u7rfe] { font-size: 28px; line-height: 36px; } .aboutEvo__featuresGrid[b-q0w68u7rfe], .aboutEvo__walletBenefitsGrid[b-q0w68u7rfe], .aboutEvo__walletRoadmapGrid[b-q0w68u7rfe], .aboutEvo__integrationGrid[b-q0w68u7rfe], .aboutEvo__companionHead[b-q0w68u7rfe], .aboutEvo__companionMedia[b-q0w68u7rfe] { grid-template-columns: 1fr; } .aboutEvo__walletInner[b-q0w68u7rfe], .aboutEvo__companionInner[b-q0w68u7rfe] { padding: 40px 24px; } .aboutEvo__walletHero[b-q0w68u7rfe] { grid-template-columns: 1fr; } .aboutEvo__walletRoadmapLine[b-q0w68u7rfe] { display: none; } .aboutEvo__walletRoadmapBanner[b-q0w68u7rfe] { grid-template-columns: 1fr; gap: 12px; } .aboutEvo__faqInner[b-q0w68u7rfe] { grid-template-columns: 1fr; gap: 24px; } .aboutEvo__integrationHead[b-q0w68u7rfe] { grid-template-columns: 1fr; gap: 16px; } } /* /Components/Pages/CookiePolicyPage.razor.rz.scp.css */ .rteSection[b-0mv7gjwbs4] { padding: 22px 0 32px; min-height: 400px; /* Prevent layout shift by reserving minimum space */ } @media (min-width: 992px) { .rteSection[b-0mv7gjwbs4] { padding: 32px 0; } } .rteSection__btnBackWrap[b-0mv7gjwbs4] { position: sticky; top: 100px; width: 100%; background-color: var(--white, #fff); z-index: 1; margin-bottom: 0; padding-bottom: 0; } .rteSection__btnBack[b-0mv7gjwbs4] { font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--gray-400, #757575); padding: 10px 10px 10px 20px; display: inline-block; position: relative; } .rteSection__btnBack[b-0mv7gjwbs4]::before { content: ''; width: 10px; height: 10px; background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.11602 0.46967C4.82313 0.176777 4.34826 0.176777 4.05536 0.46967L0.76247 3.76256C0.0790539 4.44598 0.079051 5.55402 0.762469 6.23744L4.05536 9.53033C4.34826 9.82322 4.82313 9.82322 5.11602 9.53033C5.40892 9.23744 5.40892 8.76256 5.11602 8.46967L1.82313 5.17678C1.7255 5.07915 1.7255 4.92086 1.82313 4.82322L5.11602 1.53033C5.40892 1.23744 5.40892 0.762563 5.11602 0.46967Z' fill='%23757575'/%3E%3C/svg%3E%0A"); position: absolute; top: 50%; left: 5px; transform: translateY(-50%); } @media (min-width: 992px) { .rteSection__btnBack[b-0mv7gjwbs4] { display: none; } } .rteSection__header > *:not(:last-child)[b-0mv7gjwbs4] { margin-bottom: 12px; } .rteSection__header:not(:last-child)[b-0mv7gjwbs4] { margin-bottom: 24px; } .rteSection__heading[b-0mv7gjwbs4] { font-weight: 600; font-size: 32px; line-height: 1.2; letter-spacing: -0.02em; color: var(--black, #121212); } .rteSection__breadcrumbs[b-0mv7gjwbs4] { display: none; } @media (min-width: 992px) { .rteSection__heading[b-0mv7gjwbs4] { font-size: 40px; } .rteSection__breadcrumbs[b-0mv7gjwbs4] { display: flex; } } .rteSection__information.rte[b-0mv7gjwbs4] { color: #383838; } .updateItem[b-0mv7gjwbs4] { display: flex; align-items: center; gap: 4px; font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--gray-400, #757575); } .updateItem__icon[b-0mv7gjwbs4] { width: 16px; height: 16px; margin-top: -1px; } .rteSection__main[b-0mv7gjwbs4] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; min-height: 200px; /* Prevent layout shift by reserving minimum space */ position: relative; } .rteSection__content[b-0mv7gjwbs4] { position: relative; width: 100%; } .rteSection__wrapper[b-0mv7gjwbs4] { position: relative; } @media (min-width: 992px) { .rteSection__main[b-0mv7gjwbs4] { grid-template-columns: minmax(0, 67%) minmax(0, 1fr); min-height: 300px; /* Prevent layout shift on larger screens */ } .rteSection__dropdown.customDropdown[b-0mv7gjwbs4] { display: none; } .rteSection__information.rte[b-0mv7gjwbs4] [id^='anchor-'] { scroll-margin-top: 120px; } } @media (max-width: 991px) { .rteSection__sidebar[b-0mv7gjwbs4] { display: none; } .rteSection__dropdown.customDropdown[b-0mv7gjwbs4] { position: sticky; top: 140px; left: 0; right: 0; z-index: 1; } .rteSection__information.rte[b-0mv7gjwbs4] [id^='anchor-'] { scroll-margin-top: 220px; } } .sidebar[b-0mv7gjwbs4] { background-color: var(--white, #fff); border: 1px solid var(--gray-250, #d9d9d9); border-radius: var(--border-radius-16, 16px); align-self: flex-start; position: fixed; top: 0; left: 0; right: 0; z-index: 1; height: calc(100vh - 170px); padding: 8px 0; } .sidebar__content[b-0mv7gjwbs4] { padding: 24px; overflow-y: auto; height: 100%; } @media (min-width: 992px) { .sidebar[b-0mv7gjwbs4] { position: sticky; top: 140px; } } .sidebar__top:not(:last-child)[b-0mv7gjwbs4] { margin-bottom: 12px; } .sidebar__title[b-0mv7gjwbs4] { font-weight: 500; font-size: 14px; line-height: 20px; color: var(--gray-400, #757575); } .sidebar__list[b-0mv7gjwbs4] { margin: 0 -24px; } .navList__item[b-0mv7gjwbs4] { cursor: pointer; } .navList__link[b-0mv7gjwbs4] { padding: 12px 24px; display: block; font-weight: 500; font-size: 16px; line-height: 24px; transition: all 0.3s linear; color: var(--gray-700, #383838); border-left: 3px solid transparent; } .navList__link:hover[b-0mv7gjwbs4], .navList__link.active[b-0mv7gjwbs4] { color: var(--blue-sky-600, #0058d2); border-left-color: var(--blue-sky-600, #0058d2); background-color: var(--blue-sky-100, #e8f0fb); } .customDropdown[b-0mv7gjwbs4] { position: relative; } .customDropdown[b-0mv7gjwbs4]::before { content: ''; width: calc(100% + 32px); height: calc(100% + 12px); background-color: var(--white, #fff); position: absolute; top: 0; left: -16px; } .customDropdown.isActive .customDropdown__header[b-0mv7gjwbs4] { border-color: var(--blue-sky-600, #0058d2); box-shadow: 0 0 0 4px #ccdef6; } .customDropdown.isActive .customDropdown__body[b-0mv7gjwbs4] { display: block; } .customDropdown__header[b-0mv7gjwbs4] { display: flex; align-items: center; gap: 8px; width: 100%; border-radius: var(--border-radius-8, 8px); border: 1px solid var(--gray-250, #d9d9d9); padding: 12px 16px; position: relative; z-index: 2; background-color: var(--white, #fff); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--black, #121212); } .customDropdown__icon:last-child[b-0mv7gjwbs4] { margin-left: auto; } .customDropdown__body[b-0mv7gjwbs4] { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1; background-color: var(--white, #fff); display: none; } .customDropdown__body[b-0mv7gjwbs4]::after { content: ''; height: 48px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%); display: block; border-bottom-right-radius: var(--border-radius-8, 8px); border-bottom-left-radius: var(--border-radius-8, 8px); position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; pointer-events: none; } .customDropdown__bodyInner[b-0mv7gjwbs4] { max-height: 300px; overflow-y: auto; overflow-x: hidden; padding: 8px; border-radius: var(--border-radius-8, 8px); box-shadow: 0 5px 12px 0 #00000014; } .customDropdown__item:not(:last-child)[b-0mv7gjwbs4] { margin-bottom: 4px; } .customDropdown__link[b-0mv7gjwbs4] { padding: 12px 16px; border-radius: 8px; display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 14px; line-height: 1.5; color: var(--gray-700, #383838); transition: all 0.3s linear; } .customDropdown__link:hover[b-0mv7gjwbs4], .customDropdown__link.active[b-0mv7gjwbs4] { background-color: var(--gray-100, #f5f5f5); color: var(--blue-sky-600, #0058d2); } .customDropdown__link.active .customDropdown__linkIcon[b-0mv7gjwbs4] { display: block; } .customDropdown__linkIcon[b-0mv7gjwbs4] { margin-left: auto; display: none; } .rteSection__information.rte[b-0mv7gjwbs4] { color: #383838; } .rteSection__information[b-0mv7gjwbs4] h2 { font-size: 24px; font-weight: 700; line-height: 1.4; color: var(--gray-900, #212121); margin-top: 32px; margin-bottom: 16px; } .rteSection__information[b-0mv7gjwbs4] h2:first-child { margin-top: 0; } .rteSection__information[b-0mv7gjwbs4] h3 { font-size: 20px; font-weight: 600; line-height: 1.4; color: var(--gray-900, #212121); margin-top: 24px; margin-bottom: 12px; } .rteSection__information[b-0mv7gjwbs4] p { margin-bottom: 16px; } .rteSection__information[b-0mv7gjwbs4] p:last-child { margin-bottom: 0; } .rteSection__information[b-0mv7gjwbs4] ul, .rteSection__information[b-0mv7gjwbs4] ol { margin-bottom: 16px; padding-left: 24px; } .rteSection__information[b-0mv7gjwbs4] li { margin-bottom: 8px; } .rteSection__information[b-0mv7gjwbs4] li:last-child { margin-bottom: 0; } .rteSection__information[b-0mv7gjwbs4] strong { font-weight: 600; color: var(--gray-900, #212121); } .rteSection__information[b-0mv7gjwbs4] a { color: var(--blue-sky-600, #0058d2); text-decoration: underline; transition: color 0.2s ease; } .rteSection__information[b-0mv7gjwbs4] a:hover { color: var(--blue-sky-700, #004ba0); } /* /Components/Pages/EmergencyNumbersPage.razor.rz.scp.css */ .emergencyNumbers__container[b-rd0xioyvs9] { margin: 0 auto; max-width: 1280px; padding: 32px 0 48px; } .emergencyNumbers__hero[b-rd0xioyvs9] { padding-bottom: 48px; } .emergencyNumbers__title[b-rd0xioyvs9] { color: #121212; font-size: 40px; font-weight: 600; line-height: 48px; letter-spacing: -0.8px; margin: 0 0 8px; } .emergencyNumbers__subtitle[b-rd0xioyvs9] { color: #757575; font-size: 16px; font-weight: 400; line-height: 24px; margin: 0; } .emergencyNumbers__section[b-rd0xioyvs9] { padding: 24px 0 56px; } .emergencyNumbers__sectionTitle[b-rd0xioyvs9] { color: #121212; font-size: 24px; font-weight: 600; line-height: 32px; letter-spacing: -0.24px; margin: 0 0 24px; } .emergencyNumbers__grid[b-rd0xioyvs9] { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .emergencyCard[b-rd0xioyvs9] { background: #f5f5f5; border-radius: 16px; min-height: 270px; overflow: hidden; padding: 24px 32px 20px 24px; position: relative; } .emergencyCard--gradient[b-rd0xioyvs9] { background: linear-gradient(110.47227773493deg, #fbf5f6 0%, #f8fafd 100%); } .emergencyCard__gradientImage[b-rd0xioyvs9] { height: 290px; left: 219px; position: absolute; top: -9px; width: 435px; pointer-events: none; user-select: none; } .emergencyCard__gradientImageBlur[b-rd0xioyvs9] { filter: blur(100px); height: 290px; left: 50%; opacity: 0.4; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 435px; object-fit: cover; } .emergencyCard__gradientImageMain[b-rd0xioyvs9] { height: 278px; left: 50%; position: absolute; top: calc(50% + 4px); transform: translate(-50%, -50%); width: 417px; object-fit: cover; } .emergencyCard__content[b-rd0xioyvs9] { display: flex; flex-direction: column; height: 100%; justify-content: space-between; position: relative; z-index: 1; } .emergencyCard__top[b-rd0xioyvs9] { display: flex; flex-direction: column; gap: 20px; } .emergencyCard__logo112[b-rd0xioyvs9] { height: 56px; width: 103.79px; flex-shrink: 0; object-fit: cover; object-position: center; display: block; } .emergencyCard__icon56[b-rd0xioyvs9] { height: 56px; width: 56px; object-fit: contain; } .emergencyCard__text[b-rd0xioyvs9] { display: flex; flex-direction: column; gap: 6px; } .emergencyCard__title[b-rd0xioyvs9] { color: #383838; font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: -0.2px; } .emergencyCard__description[b-rd0xioyvs9] { color: #383838; font-size: 16px; font-weight: 400; line-height: 24px; } .emergencyCard--gradient .emergencyCard__content[b-rd0xioyvs9] { max-width: 352px; } /* Keep emergency description in 2 rows to avoid overlapping the image */ .emergencyCard--gradient .emergencyCard__description[b-rd0xioyvs9] { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .emergencyCard__bottom[b-rd0xioyvs9] { padding-top: 24px; } .emergencyCard__phoneRow[b-rd0xioyvs9] { align-items: center; display: flex; gap: 16px; } .emergencyCard__phoneActions[b-rd0xioyvs9] { display: none; } .emergencyCard__phoneAction[b-rd0xioyvs9] { display: flex; align-items: center; justify-content: space-between; gap: 0; background: #ffffff; border-radius: 12px; min-height: 40px; padding: 0; overflow: hidden; } .emergencyCard__phoneActionLeft[b-rd0xioyvs9] { display: flex; align-items: center; gap: 16px; min-width: 0; } .emergencyCard__phoneAction--full[b-rd0xioyvs9] { width: 100%; justify-content: flex-start; } .emergencyCard__phoneAction--full .emergencyCard__phoneActionLeft[b-rd0xioyvs9] { flex: 1; } .emergencyCard__phoneAction--full .emergencyCard__copyButton[b-rd0xioyvs9] { margin-left: auto; } .emergencyCard__phoneMain[b-rd0xioyvs9] { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .emergencyCard__phoneMain .icon[b-rd0xioyvs9] { color: #121212; flex-shrink: 0; } .emergencyCard__phoneMain--danger .icon[b-rd0xioyvs9] { color: #d92d20; } .emergencyCard__phoneMeta[b-rd0xioyvs9] { color: #757575; font-size: 12px; font-weight: 400; line-height: 16px; white-space: nowrap; } .emergencyCard__phoneText[b-rd0xioyvs9] { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .emergencyCard__phoneNumber--compact[b-rd0xioyvs9] { font-size: 20px; line-height: 26px; letter-spacing: -0.2px; } .emergencyCard__copyButton[b-rd0xioyvs9] { align-items: center; background: transparent; border: 0; border-radius: 999px; color: #121212; display: inline-flex; height: 40px; justify-content: center; padding: 0; width: 40px; flex-shrink: 0; } .emergencyCard__copyButton--copied[b-rd0xioyvs9] { color: var(--color-icon-positive-default); } .emergencyCard__checkIcon[b-rd0xioyvs9] { display: none; } .emergencyCard__copyButton--copied .emergencyCard__copyIcon[b-rd0xioyvs9] { display: none; } .emergencyCard__copyButton--copied .emergencyCard__checkIcon[b-rd0xioyvs9] { display: inline; } .emergencyCard__copyButton:hover[b-rd0xioyvs9] { background: #f5f5f5; } .emergencyCard__phoneIcon[b-rd0xioyvs9] { align-items: center; background: #ffffff; border-radius: 12px; display: inline-flex; height: 44px; justify-content: center; width: 44px; } .emergencyCard__phoneIcon svg[b-rd0xioyvs9] { color: #D92D20; } .emergencyCard__phoneNumber[b-rd0xioyvs9] { color: #383838; font-size: 24px; font-weight: 600; line-height: 32px; letter-spacing: -0.24px; text-decoration: none; white-space: nowrap; } .emergencyCard__phoneNumber:hover[b-rd0xioyvs9] { text-decoration: underline; } .emergencyCard__phoneNumber--danger[b-rd0xioyvs9] { color: #d92d20; } .emergencyCard__divider[b-rd0xioyvs9] { background: #d9d9d9; height: 20px; width: 1px; } .emergencyCard__meta[b-rd0xioyvs9] { color: #757575; font-size: 12px; font-weight: 400; line-height: 16px; white-space: nowrap; } .emergencyCard__phoneNumberBlock[b-rd0xioyvs9] { align-items: flex-start; display: inline-flex; flex-direction: column; gap: 2px; } .emergencyCard__intlGrid[b-rd0xioyvs9] { display: grid; grid-template-columns: auto 80px; column-gap: 16px; align-items: center; } .emergencyCard__intlGrid .emergencyCard__phoneNumber[b-rd0xioyvs9] { justify-self: start; } .emergencyCard__intlGrid .emergencyCard__note[b-rd0xioyvs9] { justify-self: start; } .emergencyCard__note[b-rd0xioyvs9] { color: #757575; font-size: 12px; font-weight: 400; line-height: 16px; max-width: 80px; white-space: pre-wrap; } .emergencyCard__iconCircle[b-rd0xioyvs9] { align-items: center; border-radius: 999px; display: inline-flex; height: 56px; justify-content: center; width: 56px; } .emergencyCard__iconCircle--child[b-rd0xioyvs9] { border: 2px solid #2d4863; } .emergencyCard__iconCircleInner[b-rd0xioyvs9] { height: 50px; width: 50px; } .emergencyCard__iconViolence[b-rd0xioyvs9] { display: inline-block; height: 56px; position: relative; width: 56px; } .emergencyCard__iconViolenceEllipse[b-rd0xioyvs9] { display: block; height: 56px; left: 0; position: absolute; top: 0; width: 56px; } .emergencyCard__iconViolenceHand[b-rd0xioyvs9] { display: block; height: 36px; left: 14px; position: absolute; top: 10px; width: 28px; } .emergencyCard__iconViolenceSlash[b-rd0xioyvs9] { background: #eb2e32; height: 6px; left: 2px; position: absolute; top: 26px; transform: rotate(-45deg); width: 52px; } .emergencyCard__iconDisability[b-rd0xioyvs9] { border: 2px solid #0365c4; border-radius: 999px; display: inline-flex; height: 56px; padding: 2px; width: 56px; } .emergencyCard__iconDisabilityInner[b-rd0xioyvs9] { background: #0365c4; border-radius: 999px; display: inline-flex; height: 50px; overflow: hidden; width: 50px; } .emergencyCard__iconDisabilityPhoto[b-rd0xioyvs9] { height: 100%; object-fit: cover; width: 100%; } .emergencyNumbers__infoBox[b-rd0xioyvs9] { border: 1px solid #d9d9d9; border-radius: 16px; display: flex; gap: 24px; justify-content: space-between; padding: 32px; align-items: center; } .emergencyNumbers__infoText[b-rd0xioyvs9] { display: flex; flex-direction: column; gap: 8px; max-width: 760px; } .emergencyNumbers__infoTitle[b-rd0xioyvs9] { color: #121212; font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: -0.2px; } .emergencyNumbers__infoDescription[b-rd0xioyvs9] { color: #757575; font-size: 16px; font-weight: 400; line-height: 24px; } .emergencyNumbers__infoButton[b-rd0xioyvs9] { border-radius: 8px; height: 48px; min-width: 160px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; } /* Fraud alert card */ /* Fraud alert card — mirrors Figma node 19203:10354 exactly. Layout uses absolute positioning matching the Figma frame (1280 x 276). */ .emergencyFraudAlert[b-rd0xioyvs9] { background: linear-gradient(132.44deg, rgba(248, 216, 214, 0.112) 6.0485%, rgba(250, 14, 14, 0.1) 57.853%, rgba(250, 14, 14, 0.12) 95.844%), var(--color-background-base-secondary, #f5f5f5); border-radius: var(--border-radius-16, 16px); min-height: 276px; margin-top: 42px; overflow: hidden; position: relative; } .emergencyFraudAlert__background[b-rd0xioyvs9] { /* Lines PNG positioned per Figma inset: top 11.59%, right -5.76%, bottom 4.63%, left 44.53%. On a 1280x276 card this becomes top:32 / right:-73 / left:570 / height:~231 / width:~783. */ inset: 11.59% -5.76% 4.63% 44.53%; pointer-events: none; position: absolute; z-index: 0; } .emergencyFraudAlert__background img[b-rd0xioyvs9] { display: block; height: 100%; max-width: none; object-fit: cover; width: 100%; } .emergencyFraudAlert__content[b-rd0xioyvs9] { /* Figma: absolute left:49 top:32 width:575 — column with 6px gap between title and description. */ color: var(--color-text-base-secondary, #383838); display: flex; flex-direction: column; gap: 6px; left: 49px; position: absolute; top: 32px; width: 575px; word-break: break-word; z-index: 2; } .emergencyFraudAlert__title[b-rd0xioyvs9] { /* Desktop/Heading/H4 — Figma token Desktop/Heading/H4 */ color: var(--color-text-base-secondary, #383838); font-family: var(--font-family-primary-font, Onest), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: var(--font-size-fs-20, 20px); font-weight: var(--font-weight-fw-semibold, 600); letter-spacing: -0.2px; line-height: var(--line-height-lh-28, 28px); margin: 0; width: 100%; } .emergencyFraudAlert__description[b-rd0xioyvs9] { /* Desktop/Body/Default — Figma token Desktop/Body/Default */ color: var(--color-text-base-secondary, #383838); font-family: var(--font-family-primary-font, Onest), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: var(--font-size-fs-16, 16px); font-weight: var(--font-weight-fw-regular, 400); line-height: var(--line-height-lh-24, 24px); margin: 0; width: 100%; } .emergencyFraudAlert__actions[b-rd0xioyvs9] { /* Figma 19203:10359 — absolute left:49 top:193; row of: report button | divider | operators. width/height auto so the two-line operators block (19331:48188) fits; max-width reserves room for the shield on the right and lets the operators wrap on narrower viewports. */ align-items: center; border-radius: var(--border-radius-12, 12px); display: flex; flex-wrap: wrap; gap: 24px; height: auto; left: 49px; max-width: calc(100% - 360px); min-height: 44px; padding: var(--spacing-0, 0); position: absolute; top: 193px; width: auto; z-index: 2; } .emergencyFraudAlert__actionIcon[b-rd0xioyvs9] { /* White 44x44 box that hosts the small cursor-click icon */ align-items: center; background: var(--color-background-base-default, #ffffff); border-radius: var(--border-radius-12, 12px); color: #ec1d26; display: inline-flex; flex-shrink: 0; gap: 8px; height: 44px; justify-content: center; padding: 0; width: 44px; } .emergencyFraudAlert__actionIcon .icon[b-rd0xioyvs9] { height: 20px; width: 20px; } .emergencyFraudAlert__button[b-rd0xioyvs9] { /* Figma: border-radius 8px (--border-radius-8), height 44px, padding 0 20px, min-width 66.4px. */ align-items: center; background: #ec1d26; border: 0; border-radius: var(--border-radius-8, 8px); color: #ffffff; display: flex; font-family: var(--font-family-primary-font, Onest), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-weight: var(--font-weight-fw-medium, 500); gap: var(--spacing-0, 0); height: 44px; justify-content: center; min-width: 66.4px; padding: var(--spacing-0, 0) var(--spacing-20, 20px); text-decoration: none; } /* Lock text to white across every state — prevents the global `a:visited` / default link color from leaking in. Background stays the same red on hover too. */ .emergencyFraudAlert__button[b-rd0xioyvs9], .emergencyFraudAlert__button:link[b-rd0xioyvs9], .emergencyFraudAlert__button:visited[b-rd0xioyvs9], .emergencyFraudAlert__button:hover[b-rd0xioyvs9], .emergencyFraudAlert__button:active[b-rd0xioyvs9], .emergencyFraudAlert__button:focus[b-rd0xioyvs9], .emergencyFraudAlert__button:focus-visible[b-rd0xioyvs9] { background: #ec1d26; color: #ffffff; text-decoration: none; } .emergencyFraudAlert__button:focus-visible[b-rd0xioyvs9] { outline: 2px solid #ec1d26; outline-offset: 2px; } .emergencyFraudAlert__operatorsDivider[b-rd0xioyvs9] { /* Figma Vector 99 — thin vertical separator between the button and the operators. */ align-self: center; background: var(--color-border-base-secondary, #b2b2b2); flex: 0 0 auto; height: 30px; width: 1px; } .emergencyFraudAlert__operators[b-rd0xioyvs9] { /* Operators block — Figma node 19331:48188 (Desktop/Body/Default). */ color: var(--color-text-base-secondary, #383838); font-family: var(--font-family-primary-font, Onest), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: var(--font-size-fs-16, 16px); font-weight: var(--font-weight-fw-regular, 400); line-height: var(--line-height-lh-24, 24px); margin: 0; } .emergencyFraudAlert__operatorsLabel[b-rd0xioyvs9], .emergencyFraudAlert__operatorLinks[b-rd0xioyvs9] { display: block; } .emergencyFraudAlert__operators a[b-rd0xioyvs9] { color: var(--color-text-brand-default, #0058d2); text-decoration: underline; } .emergencyFraudAlert__operatorSep[b-rd0xioyvs9] { color: var(--color-border-base-secondary, #b2b2b2); padding: 0 4px; } .emergencyFraudAlert__image[b-rd0xioyvs9] { /* Shield anchored to the bottom of the card. Native PNG size is 417 x 276 — container width derives from the img's natural ratio so there's no letterboxing whitespace inside object-fit. */ bottom: 0; height: 276px; pointer-events: none; position: absolute; right: 39px; top: auto; width: auto; z-index: 1; } .emergencyFraudAlert__image img[b-rd0xioyvs9] { display: block; height: 100%; width: auto; } /* Emergency app promo */ .emergencyAppPromo[b-rd0xioyvs9] { background: linear-gradient(131.357deg, rgba(248, 216, 214, 0.112) 6.0485%, rgba(255, 86, 86, 0.1) 57.853%, rgba(250, 14, 14, 0.12) 95.844%), #f5f5f5; border-radius: 16px; min-height: 276px; margin-top: 42px; overflow: hidden; position: relative; } .emergencyAppPromo__rings[b-rd0xioyvs9] { align-items: center; display: flex; height: 691px; justify-content: center; left: 728px; pointer-events: none; position: absolute; top: -177px; width: 691px; } .emergencyAppPromo__ring[b-rd0xioyvs9] { align-items: center; border-radius: 9999px; display: flex; justify-content: center; } .emergencyAppPromo__ring--outer[b-rd0xioyvs9] { background: rgba(255, 169, 169, 0.15); height: 691px; width: 691px; } .emergencyAppPromo__ring--mid[b-rd0xioyvs9] { background: rgba(255, 169, 169, 0.15); height: 547px; width: 547px; } .emergencyAppPromo__ring--inner[b-rd0xioyvs9] { background: rgba(255, 169, 169, 0.2); height: 403px; width: 403px; } .emergencyAppPromo__ring--core[b-rd0xioyvs9] { background: rgba(255, 169, 169, 0.31); height: 259px; width: 259px; } .emergencyAppPromo__ringCenter[b-rd0xioyvs9] { background: #ffa9a9; border-radius: 9999px; display: block; height: 115px; width: 115px; } .emergencyAppPromo__left[b-rd0xioyvs9] { box-sizing: border-box; display: flex; flex-direction: column; gap: 24px; padding: 32px 0 32px 49px; position: relative; width: 624px; z-index: 2; } .emergencyAppPromo__content[b-rd0xioyvs9] { color: #383838; display: flex; flex-direction: column; gap: 6px; width: 575px; } .emergencyAppPromo__title[b-rd0xioyvs9] { color: #383838; font-size: 20px; font-weight: 600; letter-spacing: -0.2px; line-height: 28px; margin: 0; } .emergencyAppPromo__description[b-rd0xioyvs9] { color: #383838; font-size: 16px; font-weight: 400; line-height: 24px; margin: 0; } .emergencyAppPromo__stores[b-rd0xioyvs9] { align-items: flex-end; display: flex; gap: 24px; position: relative; width: 408px; } .emergencyAppPromo__qrBox[b-rd0xioyvs9] { background: #ffffff; border-radius: 12px; height: 106px; overflow: hidden; padding: 8px; width: 106px; } .emergencyAppPromo__qrLink[b-rd0xioyvs9] { cursor: pointer; display: block; text-decoration: none; } .emergencyAppPromo__qrImage[b-rd0xioyvs9] { display: block; height: 90px; width: 90px; } .emergencyAppPromo__storeContent[b-rd0xioyvs9] { display: flex; flex-direction: column; gap: 12px; justify-content: center; min-height: 96px; padding: 12px 0; width: 278px; } .emergencyAppPromo__storeLabel[b-rd0xioyvs9] { color: #383838; font-size: 14px; font-weight: 400; line-height: 20px; margin: 0; } .emergencyAppPromo__storeButtons[b-rd0xioyvs9] { display: flex; gap: 8px; } .emergencyAppPromo__storeLink[b-rd0xioyvs9] { border-radius: 6px; display: inline-flex; outline-offset: 2px; } .emergencyAppPromo__storeBadge[b-rd0xioyvs9] { display: block; height: 40px; width: 135px; } .emergencyAppPromo__phone[b-rd0xioyvs9] { height: 500px; left: 746px; pointer-events: none; position: absolute; top: -3px; width: 630px; z-index: 1; } .emergencyAppPromo__phoneImage[b-rd0xioyvs9] { display: block; height: auto; width: 587px; } @media (max-width: 1199px) { .emergencyAppPromo[b-rd0xioyvs9] { background: linear-gradient(124.891deg, rgba(248, 216, 214, 0.112) 6.0485%, rgba(255, 86, 86, 0.1) 57.853%, rgba(250, 14, 14, 0.12) 95.844%), #f5f5f5; } .emergencyAppPromo__rings[b-rd0xioyvs9] { left: 496px; } .emergencyAppPromo__phone[b-rd0xioyvs9] { left: 514px; } .emergencyFraudAlert[b-rd0xioyvs9] { background: linear-gradient(124.891deg, rgba(248, 216, 214, 0.112) 6.0485%, rgba(250, 14, 14, 0.1) 57.853%, rgba(250, 14, 14, 0.12) 95.844%), var(--color-background-base-secondary, #f5f5f5); } } @media (max-width: 1119px) { /* Below ~1120px the desktop layout's fixed widths (content 575 + shield 338 + paddings) no longer fit side-by-side without overlap. Shrink the shield while keeping it anchored to the bottom-right of the card; content narrows accordingly. */ .emergencyFraudAlert[b-rd0xioyvs9] { min-height: 260px; } .emergencyFraudAlert__content[b-rd0xioyvs9] { width: calc(100% - 280px); } .emergencyFraudAlert__actions[b-rd0xioyvs9] { bottom: 24px; top: auto; } .emergencyFraudAlert__operatorsDivider[b-rd0xioyvs9] { /* Decorative divider only reads well when the row stays inline (wide desktop). */ display: none; } .emergencyFraudAlert__image[b-rd0xioyvs9] { bottom: 0; height: 220px; right: 24px; top: auto; width: auto; } .emergencyFraudAlert__background[b-rd0xioyvs9] { inset: 18% -6% 6% 50%; } } @media (max-width: 992px) { .emergencyFraudAlert[b-rd0xioyvs9] { min-height: 260px; } .emergencyFraudAlert__content[b-rd0xioyvs9] { left: 32px; top: 28px; width: calc(100% - 260px); } .emergencyFraudAlert__actions[b-rd0xioyvs9] { left: 32px; top: auto; bottom: 28px; } .emergencyFraudAlert__image[b-rd0xioyvs9] { /* Still pinned to the bottom-right, slightly smaller. */ bottom: 0; height: 200px; right: 16px; top: auto; width: auto; } .emergencyFraudAlert__background[b-rd0xioyvs9] { inset: 20% -8% 8% 50%; } .emergencyNumbers__container[b-rd0xioyvs9] { padding: 32px 0 40px; } .emergencyNumbers__grid[b-rd0xioyvs9] { grid-template-columns: 1fr; } .emergencyCard__gradientImage[b-rd0xioyvs9] { left: 40%; opacity: 0.55; } .emergencyNumbers__infoBox[b-rd0xioyvs9] { align-items: flex-start; flex-direction: column; } .emergencyAppPromo[b-rd0xioyvs9] { min-height: 300px; } .emergencyAppPromo__content[b-rd0xioyvs9] { max-width: none; width: 100%; } .emergencyAppPromo__left[b-rd0xioyvs9] { box-sizing: border-box; gap: 18px; padding: 28px 0 28px 32px; max-width: none; min-width: 0; width: calc(100% - 220px); } .emergencyAppPromo__stores[b-rd0xioyvs9] { width: 408px; } .emergencyAppPromo__rings[b-rd0xioyvs9] { left: calc(100% - 364px); top: -160px; } .emergencyAppPromo__phone[b-rd0xioyvs9] { left: auto; right: -120px; top: 8px; width: 530px; } .emergencyAppPromo__phoneImage[b-rd0xioyvs9] { width: 520px; } } @media (max-width: 765px) { /* Below 765px the shield + lines art collides with wrapping text and looks broken. Hide both decorations and switch the card to a flex column so content + actions can stack naturally. Without this the absolutely-positioned children leave the card with zero in-flow height when min-height drops to 0. */ .emergencyFraudAlert[b-rd0xioyvs9] { display: flex; flex-direction: column; gap: 16px; min-height: 0; padding: 24px 32px; } .emergencyFraudAlert__image[b-rd0xioyvs9], .emergencyFraudAlert__background[b-rd0xioyvs9] { display: none; } .emergencyFraudAlert__content[b-rd0xioyvs9] { bottom: auto; gap: 6px; left: auto; position: static; right: auto; top: auto; width: 100%; } .emergencyFraudAlert__actions[b-rd0xioyvs9] { bottom: auto; height: auto; left: auto; max-width: none; position: static; right: auto; top: auto; width: 100%; } } @media (max-width: 600px) { /* Mobile fine-tuning on top of the ≤765 flex-column layout: tighter padding, smaller fonts, button takes full row. Shield + lines stay hidden (from 765). */ .emergencyFraudAlert[b-rd0xioyvs9] { background: linear-gradient(98.931deg, rgba(248, 216, 214, 0.112) 6.0485%, rgba(250, 14, 14, 0.1) 57.853%, rgba(250, 14, 14, 0.12) 95.844%), var(--color-background-base-secondary, #f5f5f5); margin-top: 24px; padding: 20px; } .emergencyFraudAlert__title[b-rd0xioyvs9] { font-size: 18px; line-height: 24px; } .emergencyFraudAlert__description[b-rd0xioyvs9] { font-size: 14px; line-height: 20px; } .emergencyFraudAlert__actions[b-rd0xioyvs9] { flex-wrap: wrap; } .emergencyFraudAlert__button[b-rd0xioyvs9] { flex: 1 1 auto; justify-content: center; } .emergencyAppPromo[b-rd0xioyvs9] { background: linear-gradient(98.931deg, rgba(248, 216, 214, 0.112) 6.0485%, rgba(255, 86, 86, 0.1) 57.853%, rgba(250, 14, 14, 0.12) 95.844%), #f5f5f5; min-height: 453px; margin-top: 24px; } .emergencyAppPromo__rings[b-rd0xioyvs9] { height: 500px; left: 50%; top: auto; bottom: -264.5px; transform: translateX(-50%); width: 500px; } .emergencyAppPromo__ring--outer[b-rd0xioyvs9] { height: 500px; width: 500px; } .emergencyAppPromo__ring--mid[b-rd0xioyvs9] { height: 395.8px; width: 395.8px; } .emergencyAppPromo__ring--inner[b-rd0xioyvs9] { height: 291.61px; width: 291.61px; } .emergencyAppPromo__ring--core[b-rd0xioyvs9] { height: 187.41px; width: 187.41px; } .emergencyAppPromo__ringCenter[b-rd0xioyvs9] { height: 83.21px; width: 83.21px; } .emergencyAppPromo__content[b-rd0xioyvs9] { width: 100%; max-width: none; } .emergencyAppPromo__left[b-rd0xioyvs9] { box-sizing: border-box; gap: 8px; padding: 24px 16px; width: 100%; max-width: none; } .emergencyAppPromo__title[b-rd0xioyvs9] { font-size: 18px; letter-spacing: -0.18px; line-height: 26px; } .emergencyAppPromo__description[b-rd0xioyvs9] { font-size: 14px; line-height: 20px; } .emergencyAppPromo__stores[b-rd0xioyvs9] { width: 100%; max-width: 278px; } .emergencyAppPromo__qrBox[b-rd0xioyvs9] { display: none; } .emergencyAppPromo__phone[b-rd0xioyvs9] { height: 410px; left: 50%; right: auto; top: auto; bottom: -198px; transform: translateX(-50%); width: 505px; } .emergencyAppPromo__phoneImage[b-rd0xioyvs9] { width: 470px; } } @media (max-width: 576px) { .emergencyNumbers__title[b-rd0xioyvs9] { font-size: 32px; line-height: 40px; letter-spacing: -0.64px; } .emergencyCard[b-rd0xioyvs9] { padding: 20px; } .emergencyCard--gradient .emergencyCard__content[b-rd0xioyvs9] { max-width: none; } .emergencyCard__phoneRow--desktop[b-rd0xioyvs9] { display: none; } .emergencyCard__phoneActions--mobile[b-rd0xioyvs9] { display: flex; flex-direction: column; gap: 4px; } .emergencyCard__phoneActions--mobile .emergencyCard__phoneAction[b-rd0xioyvs9] { background: transparent; } .emergencyCard__bottom[b-rd0xioyvs9] { padding-top: 20px; } .emergencyCard__gradientImage[b-rd0xioyvs9] { display: none; } .emergencyCard__divider[b-rd0xioyvs9] { height: 16px; } .emergencyCard__note[b-rd0xioyvs9] { max-width: none; } .emergencyCard__phoneActions--mobile .emergencyCard__phoneNumber[b-rd0xioyvs9] { color: #121212; } .emergencyCard__phoneActions--mobile .emergencyCard__phoneNumber--danger[b-rd0xioyvs9] { color: #d92d20; } .emergencyAppPromo[b-rd0xioyvs9] { background: linear-gradient(98.931deg, rgba(248, 216, 214, 0.112) 6.0485%, rgba(255, 86, 86, 0.1) 57.853%, rgba(250, 14, 14, 0.12) 95.844%), #f5f5f5; min-height: 500px; margin-top: 24px; } .emergencyAppPromo__rings[b-rd0xioyvs9] { height: 500px; left: 50%; top: auto; bottom: -264.5px; transform: translateX(-50%); width: 500px; } .emergencyAppPromo__ring--outer[b-rd0xioyvs9] { height: 500px; width: 500px; } .emergencyAppPromo__ring--mid[b-rd0xioyvs9] { height: 395.8px; width: 395.8px; } .emergencyAppPromo__ring--inner[b-rd0xioyvs9] { height: 291.61px; width: 291.61px; } .emergencyAppPromo__ring--core[b-rd0xioyvs9] { height: 187.41px; width: 187.41px; } .emergencyAppPromo__ringCenter[b-rd0xioyvs9] { height: 83.21px; width: 83.21px; } .emergencyAppPromo__content[b-rd0xioyvs9] { width: 100%; max-width: none; } .emergencyAppPromo__left[b-rd0xioyvs9] { box-sizing: border-box; gap: 8px; padding: 24px 16px; width: 100%; max-width: none; } .emergencyAppPromo__title[b-rd0xioyvs9] { font-size: 18px; letter-spacing: -0.18px; line-height: 26px; } .emergencyAppPromo__description[b-rd0xioyvs9] { font-size: 14px; line-height: 20px; } .emergencyAppPromo__stores[b-rd0xioyvs9] { width: 100%; max-width: 278px; } .emergencyAppPromo__qrBox[b-rd0xioyvs9] { display: none; } .emergencyAppPromo__phone[b-rd0xioyvs9] { height: 410px; left: 50%; right: auto; top: auto; bottom: -198px; transform: translateX(-50%); width: 505px; } .emergencyAppPromo__phoneImage[b-rd0xioyvs9] { width: 470px; } } /* /Components/Pages/Landing/HeroSection.razor.rz.scp.css */ /* /Components/Pages/PrivacyPolicyPage.razor.rz.scp.css */ .rteSection[b-nh9ok2l6nl] { padding: 22px 0 32px; min-height: 400px; /* Prevent layout shift by reserving minimum space */ } @media (min-width: 992px) { .rteSection[b-nh9ok2l6nl] { padding: 32px 0; } } .rteSection__btnBackWrap[b-nh9ok2l6nl] { position: sticky; top: 100px; width: 100%; background-color: var(--white, #fff); z-index: 1; margin-bottom: 0; padding-bottom: 0; } .rteSection__btnBack[b-nh9ok2l6nl] { font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--gray-400, #757575); padding: 10px 10px 10px 20px; display: inline-block; position: relative; } .rteSection__btnBack[b-nh9ok2l6nl]::before { content: ''; width: 10px; height: 10px; background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.11602 0.46967C4.82313 0.176777 4.34826 0.176777 4.05536 0.46967L0.76247 3.76256C0.0790539 4.44598 0.079051 5.55402 0.762469 6.23744L4.05536 9.53033C4.34826 9.82322 4.82313 9.82322 5.11602 9.53033C5.40892 9.23744 5.40892 8.76256 5.11602 8.46967L1.82313 5.17678C1.7255 5.07915 1.7255 4.92086 1.82313 4.82322L5.11602 1.53033C5.40892 1.23744 5.40892 0.762563 5.11602 0.46967Z' fill='%23757575'/%3E%3C/svg%3E%0A"); position: absolute; top: 50%; left: 5px; transform: translateY(-50%); } @media (min-width: 992px) { .rteSection__btnBack[b-nh9ok2l6nl] { display: none; } } .rteSection__header > *:not(:last-child)[b-nh9ok2l6nl] { margin-bottom: 12px; } .rteSection__header:not(:last-child)[b-nh9ok2l6nl] { margin-bottom: 24px; } .rteSection__heading[b-nh9ok2l6nl] { font-weight: 600; font-size: 32px; line-height: 1.2; letter-spacing: -0.02em; color: var(--black, #121212); } .rteSection__breadcrumbs[b-nh9ok2l6nl] { display: none; } @media (min-width: 992px) { .rteSection__heading[b-nh9ok2l6nl] { font-size: 40px; } .rteSection__breadcrumbs[b-nh9ok2l6nl] { display: flex; } } .rteSection__main[b-nh9ok2l6nl] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; min-height: 200px; /* Prevent layout shift by reserving minimum space */ position: relative; } .rteSection__content[b-nh9ok2l6nl] { position: relative; width: 100%; } @media (min-width: 992px) { .rteSection__main[b-nh9ok2l6nl] { grid-template-columns: minmax(0, 67%) minmax(0, 1fr); min-height: 300px; /* Prevent layout shift on larger screens */ } .rteSection__dropdown.customDropdown[b-nh9ok2l6nl] { display: none; } .rteSection__information.rte[b-nh9ok2l6nl] [id^='anchor-'] { scroll-margin-top: 120px; } } @media (max-width: 991px) { .rteSection__sidebar[b-nh9ok2l6nl] { display: none; } .rteSection__dropdown.customDropdown[b-nh9ok2l6nl] { position: sticky; top: 140px; left: 0; right: 0; z-index: 1; } .rteSection__information.rte[b-nh9ok2l6nl] [id^='anchor-'] { scroll-margin-top: 220px; } } .rteSection__information.rte[b-nh9ok2l6nl] p b { font-weight: 500; } .updateItem[b-nh9ok2l6nl] { display: flex; align-items: center; gap: 4px; font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--gray-400, #757575); } .updateItem__icon[b-nh9ok2l6nl] { width: 16px; height: 16px; margin-top: -1px; } .rteSection__infoBoxes[b-nh9ok2l6nl] { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .rteSection__infoBoxes:not(:last-child)[b-nh9ok2l6nl] { margin-bottom: 36px; } .rteSection__infoBoxes:not(:first-child)[b-nh9ok2l6nl] { margin-top: 20px; } .infoBlock[b-nh9ok2l6nl] { max-width: 300px; border-radius: var(--border-radius-8, 8px); padding: 16px; background-color: var(--gray-100, #f5f5f5); display: flex; align-items: center; gap: 16px; width: 100%; } .infoBlock__iconWrap[b-nh9ok2l6nl] { width: 48px; height: 48px; border-radius: 50%; background-color: var(--white, #fff); display: flex; justify-content: center; align-items: center; } .infoBlock__icon[b-nh9ok2l6nl] { color: var(--gray-400, #757575); } .infoBlock__title[b-nh9ok2l6nl] { font-weight: 600; font-size: 18px; line-height: 1.5; letter-spacing: -0.01em; color: var(--black, #121212); } .infoBlock__link[b-nh9ok2l6nl] { font-weight: 400; font-size: 16px; line-height: 1.5; text-decoration: underline; color: var(--gray-700, #383838); } .infoBlock__link:hover[b-nh9ok2l6nl] { text-decoration: none; } .sidebar[b-nh9ok2l6nl] { background-color: var(--white, #fff); border: 1px solid var(--gray-250, #d9d9d9); border-radius: var(--border-radius-16, 16px); align-self: flex-start; position: fixed; top: 0; left: 0; right: 0; z-index: 1; height: calc(100vh - 170px); padding: 8px 0; } .sidebar__content[b-nh9ok2l6nl] { padding: 24px; overflow-y: auto; height: 100%; } @media (min-width: 992px) { .sidebar[b-nh9ok2l6nl] { position: sticky; top: 140px; } } .sidebar__top:not(:last-child)[b-nh9ok2l6nl] { margin-bottom: 12px; } .sidebar__title[b-nh9ok2l6nl] { font-weight: 500; font-size: 14px; line-height: 20px; color: var(--gray-400, #757575); } .sidebar__list[b-nh9ok2l6nl] { margin: 0 -24px; } .navList__item[b-nh9ok2l6nl] { cursor: pointer; } .navList__link[b-nh9ok2l6nl] { padding: 12px 24px; display: block; font-weight: 500; font-size: 16px; line-height: 24px; transition: all 0.3s linear; color: var(--gray-700, #383838); border-left: 3px solid transparent; } .navList__link:hover[b-nh9ok2l6nl], .navList__link.active[b-nh9ok2l6nl] { color: var(--blue-sky-600, #0058d2); border-left-color: var(--blue-sky-600, #0058d2); background-color: var(--blue-sky-100, #e8f0fb); } .customDropdown[b-nh9ok2l6nl] { position: relative; } .customDropdown[b-nh9ok2l6nl]::before { content: ''; width: calc(100% + 32px); height: calc(100% + 12px); background-color: var(--white, #fff); position: absolute; top: 0; left: -16px; } .customDropdown.isActive .customDropdown__header[b-nh9ok2l6nl] { border-color: var(--blue-sky-600, #0058d2); box-shadow: 0 0 0 4px #ccdef6; } .customDropdown.isActive .customDropdown__body[b-nh9ok2l6nl] { display: block; } .customDropdown__header[b-nh9ok2l6nl] { display: flex; align-items: center; gap: 8px; width: 100%; border-radius: var(--border-radius-8, 8px); border: 1px solid var(--gray-250, #d9d9d9); padding: 12px 16px; position: relative; z-index: 2; background-color: var(--white, #fff); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--black, #121212); } .customDropdown__icon:last-child[b-nh9ok2l6nl] { margin-left: auto; } .customDropdown__body[b-nh9ok2l6nl] { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1; background-color: var(--white, #fff); display: none; } .customDropdown__body[b-nh9ok2l6nl]::after { content: ''; height: 48px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%); display: block; border-bottom-right-radius: var(--border-radius-8, 8px); border-bottom-left-radius: var(--border-radius-8, 8px); position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; pointer-events: none; } .customDropdown__bodyInner[b-nh9ok2l6nl] { max-height: 300px; overflow-y: auto; overflow-x: hidden; padding: 8px; border-radius: var(--border-radius-8, 8px); box-shadow: 0 5px 12px 0 #00000014; } .customDropdown__item:not(:last-child)[b-nh9ok2l6nl] { margin-bottom: 4px; } .customDropdown__link[b-nh9ok2l6nl] { padding: 12px 16px; border-radius: 8px; display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 14px; line-height: 1.5; color: var(--gray-700, #383838); transition: all 0.3s linear; } .customDropdown__link:hover[b-nh9ok2l6nl], .customDropdown__link.active[b-nh9ok2l6nl] { background-color: var(--gray-100, #f5f5f5); color: var(--blue-sky-600, #0058d2); } .customDropdown__link.active .customDropdown__linkIcon[b-nh9ok2l6nl] { display: block; } .customDropdown__linkIcon[b-nh9ok2l6nl] { margin-left: auto; display: none; } /* /Components/Pages/ServiceProvidersCatalog/ReportIssueContainer.razor.rz.scp.css */ @media (max-width: 767.98px) { .providers-catalog-report-title-text[b-7dquczr1cq] { align-self: start; } .providers-catalog-report-btn[b-7dquczr1cq] { width: 100%; } } /* /Components/Pages/ServiceProvidersCatalog/ServiceProvidersCatalogPage.razor.rz.scp.css */ .providers-catalog-page[b-jrvk1t2huj] { display: flex; justify-content: center; } .providers-catalog-page-container[b-jrvk1t2huj] { display: grid; grid-template-columns: 1fr; grid-auto-rows: auto; gap: var(--spacing-56); width: 100%; max-width: 1280px; padding: 0 var(--spacing-0); } @media (min-width: 1024px) and (max-width: 1280px) { } @media (min-width: 768px) and (max-width: 1023.98px) { } @media (min-width: 393px) and (max-width: 767.98px) { } @media (max-width: 392.98px) { } /* /Components/Pages/SignaturePage/BenefitsSection.razor.rz.scp.css */ .benefitsSection[b-mvvowx4mdr] { border-radius: var(--border-radius-32); margin: 12px; } .benefitsSection__header:not(:last-child)[b-mvvowx4mdr] { margin: 0 auto 48px; max-width: 768px; } @media (min-width: 992px) { .benefitsSection__header:not(:last-child)[b-mvvowx4mdr] { margin: 0 auto 80px; } } .benefitsSection__content[b-mvvowx4mdr] { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 992px) { .benefitsSection__content[b-mvvowx4mdr] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } } .benefitsCard[b-mvvowx4mdr] { background: var(--white); padding: 32px 16px; border-radius: var(--border-radius-16); } @media (min-width: 768px) { .benefitsCard[b-mvvowx4mdr] { padding: 32px; } } .benefitsCard__top:not(:last-child)[b-mvvowx4mdr] { margin-bottom: 24px; } .benefitsCard__icon[b-mvvowx4mdr] { color: var(--blue-sky-600, #0058D2); } .benefitsCard__title[b-mvvowx4mdr] { margin: 0; font-weight: 600; font-size: 32px; line-height: 1.25; letter-spacing: -0.02em; color: var(--black, #121212); } .benefitsCard__title:not(:last-child)[b-mvvowx4mdr] { margin-bottom: 16px; } .benefitsList__item[b-mvvowx4mdr] { display: flex; gap: 16px; } .benefitsList__item:not(:last-child)[b-mvvowx4mdr] { margin-bottom: 16px; } .benefitsList__icon[b-mvvowx4mdr] { color: var(--green-600, #039855); } .benefitsList__text[b-mvvowx4mdr] { font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--gray-700, #383838); } /* /Components/Pages/SignaturePage/GuideSection.razor.rz.scp.css */ .guideSection[b-2wcboyfv97] { border-radius: var(--border-radius-32); margin: 12px; } .guideSection__header[b-2wcboyfv97] { max-width: 920px; margin-left: auto; margin-right: auto; } @media (min-width: 768px) { .guideSection__header[b-2wcboyfv97] { text-align: center; } } .guideSection__header:not(:last-child)[b-2wcboyfv97] { margin-bottom: 48px; } @media (min-width: 992px) { .guideSection__header:not(:last-child)[b-2wcboyfv97] { margin-bottom: 80px; } } .guideSection__cards[b-2wcboyfv97] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } @media (min-width: 992px) { .guideSection__cards[b-2wcboyfv97] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } } .guideCard[b-2wcboyfv97] { background-color: var(--white); padding: 24px; border-radius: var(--border-radius-12); display: flex; align-items: center; gap: 12px; } .guideCard__icon[b-2wcboyfv97] { color: var(--blue-sky-600); } .guideCard__text[b-2wcboyfv97] { margin: 0; font-weight: 600; font-size: 20px; line-height: 1.4; letter-spacing: -0.01em; color: var(--black); } /* /Components/Pages/SignaturePage/InfoSection.razor.rz.scp.css */ .infoSection[b-u5mmk57s8f] { padding: 80px 0; } .infoSection__header[b-u5mmk57s8f] { display: flex; justify-content: center; align-items: center; } .infoSection__header .sectionHeader__textContent[b-u5mmk57s8f] { display: flex; flex-direction: column; gap: 8px; max-width: 564px; } .infoSection__header .sectionHeader__heading[b-u5mmk57s8f] { font-size: 32px; font-weight: 600; line-height: 48px; letter-spacing: -0.96px; color: #121212; margin-bottom: 0px; } @media (min-width: 767px) { .infoSection__header .sectionHeader__heading[b-u5mmk57s8f] { font-size: 40px; margin-bottom: 16px; } } @media (min-width: 992px) { .infoSection__header .sectionHeader__heading[b-u5mmk57s8f] { font-size: 48px; line-height: 56px; } } .infoSection__subtitle[b-u5mmk57s8f] { color: #383838; font-family: Onest; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; letter-spacing: -0.36px; } @media (min-width: 767px) { .infoSection__subtitle[b-u5mmk57s8f] { font-size: 18px } } .infoSection__law[b-u5mmk57s8f] { font-family: Onest; font-size: 12px; font-style: normal; font-weight: 400; line-height: 16px; letter-spacing: -0.12px; } .infoSection__lawPrefix[b-u5mmk57s8f] { color: #757575; } .infoSection__lawLink[b-u5mmk57s8f] { color: #383838; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } .infoSection__main[b-u5mmk57s8f] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; } @media (min-width: 992px) { .infoSection__main[b-u5mmk57s8f] { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { .infoSection__main[b-u5mmk57s8f] { gap: 80px; grid-template-columns: minmax(0, 572px) minmax(0, 1fr); } } .infoContent__main[b-u5mmk57s8f] { padding: 0; border-radius: 16px; background-color: #f5f5f5; overflow: hidden; position: relative; } .infoContent__main:not(:last-child)[b-u5mmk57s8f] { margin-bottom: 24px; } .infoContent__previewWrap[b-u5mmk57s8f] { width: 100%; position: relative; margin: 0 auto; overflow: hidden; display: flex; align-items: center; justify-content: center; } .infoContent__previewWrap:not(:last-child)[b-u5mmk57s8f] { margin-bottom: 0; } .infoContent__preview[b-u5mmk57s8f] { width: 100%; height: auto; display: block; object-fit: contain; } .infoContent__preview--mobile[b-u5mmk57s8f] { display: block; } .infoContent__preview--desktop[b-u5mmk57s8f] { display: none; } @media (min-width: 768px) { .infoContent__previewWrap[b-u5mmk57s8f] { height: 168px; } .infoContent__preview[b-u5mmk57s8f] { width: auto; max-width: 100%; height: 168px; object-fit: contain; } .infoContent__preview--mobile[b-u5mmk57s8f] { display: none; } .infoContent__preview--desktop[b-u5mmk57s8f] { display: block; } } .infoContent__desc[b-u5mmk57s8f] { color: #383838; font-family: Onest; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; padding: 0 32px 32px 32px; text-align: left; margin-top: 46px; } .infoList[b-u5mmk57s8f] { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: 32px; } @media (min-width: 992px) { .infoList[b-u5mmk57s8f] { justify-content: start; } } .infoList__item[b-u5mmk57s8f] { display: flex; align-items: center; gap: 8px; } .infoList__icon[b-u5mmk57s8f] { color: var(--green-600); } .infoList__text[b-u5mmk57s8f] { font-weight: 400; font-size: 16px; line-height: 1.3; color: var(--gray-700); } /* /Components/Pages/SignaturePage/SupportSection.razor.rz.scp.css */ .supportSection[b-osvcww6pel] { border-radius: var(--border-radius-32); margin: 12px; } .supportSection__main[b-osvcww6pel] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; } @media (min-width: 1200px) { .supportSection__main[b-osvcww6pel] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; } } .supportSection__card[b-osvcww6pel] { max-width: 580px; } @media (min-width: 1200px) { .supportSection__card[b-osvcww6pel] { max-width: 100%; } } .supportCard[b-osvcww6pel] { padding: 24px; border-radius: var(--border-radius-12); background: var(--white); } .supportCard__desc[b-osvcww6pel] { font-weight: 400; font-size: 18px; line-height: 28px; color: var(--black); } .supportCard__desc:not(:last-child)[b-osvcww6pel] { margin-bottom: 24px; } .supportContacts__item[b-osvcww6pel] { display: flex; align-items: center; gap: 12px; } .supportContacts__item:not(:last-child)[b-osvcww6pel] { margin-bottom: 8px; } .supportContacts__icon[b-osvcww6pel] { color: var(--blue-sky-600); } .supportContacts__text[b-osvcww6pel] { font-weight: 600; font-size: 20px; line-height: 28px; letter-spacing: -0.01em; color: var(--black); } /* /Components/Pages/TermsAndConditionsPage.razor.rz.scp.css */ .rteSection[b-4v52e6mdm5] { padding: 22px 0 32px; min-height: 400px; /* Prevent layout shift by reserving minimum space */ } @media (min-width: 992px) { .rteSection[b-4v52e6mdm5] { padding: 32px 0; } } .rteSection__btnBackWrap[b-4v52e6mdm5] { position: sticky; top: 100px; width: 100%; background-color: var(--white, #fff); z-index: 1; margin-bottom: 0; padding-bottom: 0; } .rteSection__btnBack[b-4v52e6mdm5] { font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--gray-400, #757575); padding: 10px 10px 10px 20px; display: inline-block; position: relative; } .rteSection__btnBack[b-4v52e6mdm5]::before { content: ''; width: 10px; height: 10px; background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.11602 0.46967C4.82313 0.176777 4.34826 0.176777 4.05536 0.46967L0.76247 3.76256C0.0790539 4.44598 0.079051 5.55402 0.762469 6.23744L4.05536 9.53033C4.34826 9.82322 4.82313 9.82322 5.11602 9.53033C5.40892 9.23744 5.40892 8.76256 5.11602 8.46967L1.82313 5.17678C1.7255 5.07915 1.7255 4.92086 1.82313 4.82322L5.11602 1.53033C5.40892 1.23744 5.40892 0.762563 5.11602 0.46967Z' fill='%23757575'/%3E%3C/svg%3E%0A"); position: absolute; top: 50%; left: 5px; transform: translateY(-50%); } @media (min-width: 992px) { .rteSection__btnBack[b-4v52e6mdm5] { display: none; } } .rteSection__header > *:not(:last-child)[b-4v52e6mdm5] { margin-bottom: 12px; } .rteSection__header:not(:last-child)[b-4v52e6mdm5] { margin-bottom: 24px; } .rteSection__heading[b-4v52e6mdm5] { font-weight: 600; font-size: 32px; line-height: 1.2; letter-spacing: -0.02em; color: var(--black, #121212); } .rteSection__breadcrumbs[b-4v52e6mdm5] { display: none; } @media (min-width: 992px) { .rteSection__heading[b-4v52e6mdm5] { font-size: 40px; } .rteSection__breadcrumbs[b-4v52e6mdm5] { display: flex; } } .rteSection__main[b-4v52e6mdm5] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; min-height: 200px; /* Prevent layout shift by reserving minimum space */ position: relative; } .rteSection__content[b-4v52e6mdm5] { position: relative; width: 100%; } @media (min-width: 992px) { .rteSection__main[b-4v52e6mdm5] { grid-template-columns: minmax(0, 67%) minmax(0, 1fr); min-height: 300px; /* Prevent layout shift on larger screens */ } .rteSection__dropdown.customDropdown[b-4v52e6mdm5] { display: none; } .rteSection__information.rte[b-4v52e6mdm5] [id^='anchor-'] { scroll-margin-top: 120px; } } @media (max-width: 991px) { .rteSection__sidebar[b-4v52e6mdm5] { display: none; } .rteSection__dropdown.customDropdown[b-4v52e6mdm5] { position: sticky; top: 140px; left: 0; right: 0; z-index: 1; } .rteSection__information.rte[b-4v52e6mdm5] [id^='anchor-'] { scroll-margin-top: 220px; } } .rteSection__information.rte[b-4v52e6mdm5] { color: #383838; } .updateItem[b-4v52e6mdm5] { display: flex; align-items: center; gap: 4px; font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--gray-400, #757575); } .updateItem__icon[b-4v52e6mdm5] { width: 16px; height: 16px; margin-top: -1px; } .rteSection__infoBoxes[b-4v52e6mdm5] { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .rteSection__infoBoxes:not(:last-child)[b-4v52e6mdm5] { margin-bottom: 36px; } .rteSection__infoBoxes:not(:first-child)[b-4v52e6mdm5] { margin-top: 20px; } .infoBlock[b-4v52e6mdm5] { max-width: 300px; border-radius: var(--border-radius-8, 8px); padding: 16px; background-color: var(--gray-100, #f5f5f5); display: flex; align-items: center; gap: 16px; width: 100%; } .address-block[b-4v52e6mdm5] { max-width: 412px; } .address-block b[b-4v52e6mdm5] { color: #121212; font-weight: 500; } .infoBlock__iconWrap[b-4v52e6mdm5] { width: 48px; height: 48px; border-radius: 50%; background-color: var(--white, #fff); display: flex; justify-content: center; align-items: center; } .infoBlock__icon[b-4v52e6mdm5] { color: var(--gray-400, #757575); } .infoBlock__title[b-4v52e6mdm5] { font-weight: 600; font-size: 18px; line-height: 1.5; letter-spacing: -0.01em; color: var(--black, #121212); } .infoBlock__link[b-4v52e6mdm5] { font-weight: 400; font-size: 16px; line-height: 1.5; text-decoration: underline; color: var(--gray-700, #383838); } .infoBlock__link:hover[b-4v52e6mdm5] { text-decoration: none; } .sidebar[b-4v52e6mdm5] { background-color: var(--white, #fff); border: 1px solid var(--gray-250, #d9d9d9); border-radius: var(--border-radius-16, 16px); align-self: flex-start; position: fixed; top: 0; left: 0; right: 0; z-index: 1; height: calc(100vh - 170px); padding: 8px 0; } .sidebar__content[b-4v52e6mdm5] { padding: 24px; overflow-y: auto; height: 100%; } @media (min-width: 992px) { .sidebar[b-4v52e6mdm5] { position: sticky; top: 140px; } } .sidebar__top:not(:last-child)[b-4v52e6mdm5] { margin-bottom: 12px; } .sidebar__title[b-4v52e6mdm5] { font-weight: 500; font-size: 14px; line-height: 20px; color: var(--gray-400, #757575); } .sidebar__list[b-4v52e6mdm5] { margin: 0 -24px; } .navList__item[b-4v52e6mdm5] { cursor: pointer; } .navList__link[b-4v52e6mdm5] { padding: 12px 24px; display: block; font-weight: 500; font-size: 16px; line-height: 24px; transition: all 0.3s linear; color: var(--gray-700, #383838); border-left: 3px solid transparent; } .navList__link:hover[b-4v52e6mdm5], .navList__link.active[b-4v52e6mdm5] { color: var(--blue-sky-600, #0058d2); border-left-color: var(--blue-sky-600, #0058d2); background-color: var(--blue-sky-100, #e8f0fb); } .customDropdown[b-4v52e6mdm5] { position: relative; } .customDropdown[b-4v52e6mdm5]::before { content: ''; width: calc(100% + 32px); height: calc(100% + 12px); background-color: var(--white, #fff); position: absolute; top: 0; left: -16px; } .customDropdown.isActive .customDropdown__header[b-4v52e6mdm5] { border-color: var(--blue-sky-600, #0058d2); box-shadow: 0 0 0 4px #ccdef6; } .customDropdown.isActive .customDropdown__body[b-4v52e6mdm5] { display: block; } .customDropdown__header[b-4v52e6mdm5] { display: flex; align-items: center; gap: 8px; width: 100%; border-radius: var(--border-radius-8, 8px); border: 1px solid var(--gray-250, #d9d9d9); padding: 12px 16px; position: relative; z-index: 2; background-color: var(--white, #fff); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--black, #121212); } .customDropdown__icon:last-child[b-4v52e6mdm5] { margin-left: auto; } .customDropdown__body[b-4v52e6mdm5] { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1; background-color: var(--white, #fff); display: none; } .customDropdown__body[b-4v52e6mdm5]::after { content: ''; height: 48px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%); display: block; border-bottom-right-radius: var(--border-radius-8, 8px); border-bottom-left-radius: var(--border-radius-8, 8px); position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; pointer-events: none; } .customDropdown__bodyInner[b-4v52e6mdm5] { max-height: 300px; overflow-y: auto; overflow-x: hidden; padding: 8px; border-radius: var(--border-radius-8, 8px); box-shadow: 0 5px 12px 0 #00000014; } .customDropdown__item:not(:last-child)[b-4v52e6mdm5] { margin-bottom: 4px; } .customDropdown__link[b-4v52e6mdm5] { padding: 12px 16px; border-radius: 8px; display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 14px; line-height: 1.5; color: var(--gray-700, #383838); transition: all 0.3s linear; } .customDropdown__link:hover[b-4v52e6mdm5], .customDropdown__link.active[b-4v52e6mdm5] { background-color: var(--gray-100, #f5f5f5); color: var(--blue-sky-600, #0058d2); } .customDropdown__link.active .customDropdown__linkIcon[b-4v52e6mdm5] { display: block; } .customDropdown__linkIcon[b-4v52e6mdm5] { margin-left: auto; display: none; } [b-4v52e6mdm5] .no-margins { margin: 0 !important; }