/* * Floux Theme by Divi - site CSS * Loaded on every front-end page after Divi's stylesheets. * Add site-wide overrides and animation styles here; they survive Divi updates. * * Contents * 1. Global safety (overflow, images, forms) * 2. Header offset + tap targets (Floux header snippet, <=1199px) * 3. Phone layout (<=767px): rhythm, typography, modules, blog templates * 4. Page-specific phone fixes (Home, About, Contact, Testimonials, Services pages) * 5. Tablet (768-980px) */ /* ---------- 1. Global safety ---------- */ #page-container, #et-main-area { overflow-x: clip; } /* Font Awesome faces used by Divi icon settings (accordion "+", blurbs, social icons). Divi's regenerated dynamic CSS references the family but can omit the @font-face, which renders icons as empty boxes. Declared here against Divi's bundled files. */ @font-face { font-family: FontAwesome; font-style: normal; font-weight: 400; font-display: swap; src: url(../../../Divi/core/admin/fonts/fontawesome/fa-regular-400.woff2) format("woff2"), url(../../../Divi/core/admin/fonts/fontawesome/fa-regular-400.woff) format("woff"), url(../../../Divi/core/admin/fonts/fontawesome/fa-regular-400.ttf) format("truetype"); } @font-face { font-family: FontAwesome; font-style: normal; font-weight: 900; font-display: swap; src: url(../../../Divi/core/admin/fonts/fontawesome/fa-solid-900.woff2) format("woff2"), url(../../../Divi/core/admin/fonts/fontawesome/fa-solid-900.woff) format("woff"), url(../../../Divi/core/admin/fonts/fontawesome/fa-solid-900.ttf) format("truetype"); } @font-face { font-family: FontAwesome; font-style: normal; font-weight: 400; font-display: swap; src: url(../../../Divi/core/admin/fonts/fontawesome/fa-brands-400.woff2) format("woff2"), url(../../../Divi/core/admin/fonts/fontawesome/fa-brands-400.woff) format("woff"), url(../../../Divi/core/admin/fonts/fontawesome/fa-brands-400.ttf) format("truetype"); } .et_pb_image, .et_pb_image_wrap, .et_pb_image img { max-width: 100%; } .et_pb_image img { height: auto; } /* Footer (Theme Builder footer 229004), all widths. The scroll-reveal snippet never fires for elements at the very end of the page (it ignores the bottom 8% of the viewport), so the credit line stayed at opacity 0. Footer content is always visible, the divider line is removed, and the page background matches the footer so no white strip can show below it. */ html { background-color: #1c1845; } .et-l--footer .cb-motion-reveal { opacity: 1 !important; transform: none !important; filter: none !important; } .et-l--footer .et_pb_divider_0_tb_footer { display: none !important; } .et-l--footer .et_pb_row_1_tb_footer { padding-top: 28px !important; border-top: 1px solid rgba(255, 255, 255, 0.08); } .et-l--footer .et_pb_text_3_tb_footer { margin-bottom: 0 !important; } .et-l--footer .et_pb_text_3_tb_footer a { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(253, 180, 74, 0.45); text-underline-offset: 3px; transition: text-decoration-color 0.2s ease, opacity 0.2s ease; } .et-l--footer .et_pb_text_3_tb_footer a:hover, .et-l--footer .et_pb_text_3_tb_footer a:focus-visible { text-decoration-color: currentColor; } .et-l--footer .et_pb_text_3_tb_footer a:focus-visible { outline: 2px solid #fdb44a; outline-offset: 3px; border-radius: 2px; } .et-l--footer .et_pb_text_3_tb_footer a:active { opacity: 0.8; } /* Related-posts slider (Code Snippet "viki"), all devices. Removes the large grey drop shadow that spread below the active card (0 24px 66px, clipped by the slider edge) and the glow under the arrow buttons. The card keeps its own soft shadow. */ .vicki .vicki-post-card, .vicki .vicki-post-card.is-active { box-shadow: none !important; } .vicki .vicki-post-card__link, .vicki .vicki-post-card > a:first-child { box-shadow: 0 0 0 1px rgba(28, 24, 69, 0.05), 0 6px 20px rgba(28, 24, 69, 0.10) !important; } .vicki .vicki__button, .vicki .vicki__button:hover, .vicki .vicki__button:focus-visible { box-shadow: none !important; } .vicki .vicki__button:active { transform: translateY(0) scale(0.96); } /* Footer contact line (phone / email) readable on the navy footer */ .et-l--footer .et_pb_text_0_tb_footer a { color: #96C5F2 !important; text-decoration: none; transition: color 0.2s ease; } .et-l--footer .et_pb_text_0_tb_footer a:hover, .et-l--footer .et_pb_text_0_tb_footer a:focus-visible { color: #FDB44A !important; } .et-l--footer .et_pb_text_0_tb_footer a:focus-visible { outline: 2px solid #FDB44A; outline-offset: 2px; } /* FAQ accordions (class cb-faq): readable question size, comfortable answers */ .cb-faq .et_pb_toggle_title { font-size: 20px !important; line-height: 1.4 !important; font-weight: 600 !important; padding-right: 40px; } .cb-faq .et_pb_toggle_content, .cb-faq .et_pb_toggle_content p { font-size: 16px !important; line-height: 1.7 !important; } .cb-faq .et_pb_toggle { padding-top: 18px; padding-bottom: 18px; } @media (max-width: 767px) { .cb-faq .et_pb_toggle_title { font-size: 17px !important; } } /* Text modules: breathing room between a paragraph and a following list */ .et_pb_text_inner p + ul, .et_pb_text_inner p + ol { margin-top: 12px; } /* Articles page "Load more" button: the snippet's `.cb-articles-page a { color: inherit }` out-ranks the button's own white text, leaving grey on blue (about 2.3:1). White is about 7:1. */ .cb-articles-page a.cb-articles-load, .cb-articles-page a.cb-articles-load:visited, .cb-articles-page a.cb-articles-load span { color: #ffffff !important; } .cb-articles-page a.cb-articles-load { text-decoration: none; } .cb-articles-page a.cb-articles-load:hover { background: #014487; color: #ffffff; } .cb-articles-page a.cb-articles-load:focus-visible { outline: 3px solid #FDB44A; outline-offset: 3px; } .cb-articles-page a.cb-articles-load:active { transform: translateY(0) scale(0.97); } /* Long e-mail addresses and URLs must wrap instead of pushing the layout */ .et_pb_text_inner a[href^="mailto:"], .et_pb_blurb_description a[href^="mailto:"], .et_pb_text_inner a[href^="http"] { overflow-wrap: anywhere; } /* Divi carousel dots: keep the 10px dot, grow the touch area to 36px */ .et_pb_group_carousel_dots { gap: 0; } .et_pb_group_carousel_dot { box-sizing: border-box; min-width: 36px; min-height: 36px; border: 13px solid transparent; background-clip: padding-box; } .et_pb_group_carousel_dot:focus-visible { outline: 2px solid #fdb44a; outline-offset: 2px; } /* ---------- 2. Floux header (mobile/tablet bar is opaque) ---------- */ @media (max-width: 1199px) { /* The header bar is fixed and solid white below 1200px; push the page below it */ body:not(.et-fb) { padding-top: 72px; } .fx .fx-search-x, .fx-drawer .fx-close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .fx .fx-search form { height: auto; min-height: 64px; } .fx .fx-search input { min-height: 44px; font-size: 18px; } .fx-drawer .fx-drawer-top a { padding: 10px 0; } .fx-drawer .fx-drawer-btn .fx-btn { min-height: 48px; display: flex; align-items: center; justify-content: center; } .fx-drawer .fx-acc-link, .fx-drawer .fx-acc { min-height: 48px; } .fx-drawer .fx-acc-panel a { padding: 12px 18px; } } /* ---------- 3. Phone layout ---------- */ @media (max-width: 767px) { /* Typography */ .et_pb_text_inner p, .et_pb_text_inner li, .et_pb_toggle_content p, .et_pb_blurb_description, .et_pb_blurb_description p { font-size: max(1em, 16px); line-height: 1.7; } .et_pb_text_inner h1, .et_pb_text_inner h2, .et_pb_heading h1.et_pb_module_header, .et_pb_heading h2.et_pb_module_header { line-height: 1.18 !important; letter-spacing: -0.015em; } .et_pb_text_inner h3, .et_pb_text_inner h4, .et_pb_heading h3.et_pb_module_header, .et_pb_heading h4.et_pb_module_header { line-height: 1.3 !important; } /* Justified copy produces rivers on narrow columns */ .et_pb_toggle_content, .et_pb_toggle_content p, .floux-unjustify { text-align: left !important; } /* Buttons stack full-width with a comfortable height (Divi presets set a fixed width) */ .et_pb_section .et_pb_button_module_wrapper { width: 100%; } .et_pb_section .et_pb_button, .et_pb_contact_form .et_pb_button { display: block; width: 100% !important; max-width: 100% !important; text-align: center; box-sizing: border-box; min-height: 52px; } /* Forms: 16px prevents iOS auto-zoom, fields go full width */ .et_pb_contact_form input[type="text"], .et_pb_contact_form input[type="email"], .et_pb_contact_form textarea, .et_pb_contact_form select, .et_pb_searchform input, .widget_search input, input.et_pb_s { font-size: 16px !important; min-height: 48px; } .et_pb_contact_form .et_pb_contact_field.et_flex_column_12_24 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; } .et_pb_contact_form .et_contact_bottom_container { width: 100%; float: none; } .et_pb_contact_form .et_pb_contact_submit { width: 100%; text-align: center; min-height: 52px; } /* Small inline links and controls: 44px-class touch targets */ .et_pb_breadcrumbs--trail a, .cb-articles-breadcrumbs a, .cb-articles-top, .et-l--body .et_pb_text_inner p a, .cb-search-card__title a { display: inline-block; padding: 10px 0; line-height: 1.3; min-width: 44px; } .cb-search-sort select, .cb-articles-filters select, .cb-articles-filters input { min-height: 44px; font-size: 16px; } .cb-search-pagination .page-numbers, .cb-articles-pagination .page-numbers, .et_pb_pagination a, .pagination a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; } /* Social icons: 44px touch targets */ .et_pb_social_media_follow li a.icon { width: 44px !important; height: 44px !important; } .et_pb_social_media_follow li a.icon::before { width: 44px !important; height: 44px !important; line-height: 44px !important; font-size: 20px !important; } /* Testimonial name / role stacking: see the "max-width: 980px" block (tablets and phones) */ /* Footer (Theme Builder footer 229004) */ .et-l--footer .et_pb_section_0_tb_footer { display: none; } /* empty 100px spacer section */ .et-l--footer .et_pb_section_1_tb_footer { padding-top: 56px !important; padding-bottom: 24px !important; } .et-l--footer .et_pb_row { row-gap: 28px !important; } .et-l--footer .et_pb_column { row-gap: 10px !important; } .et-l--footer .et_pb_module { margin-bottom: 0 !important; } .et-l--footer .et_pb_image { margin-bottom: 8px !important; } .et-l--footer .et_pb_text_0_tb_footer { margin-bottom: 8px !important; } .et-l--footer .et_pb_heading h2, .et-l--footer .et_pb_heading h3, .et-l--footer .et_pb_heading h4 { font-size: 20px !important; } .et-l--footer .et_pb_text_inner p a { display: inline-block; padding: 9px 0; line-height: 1.3; min-width: 44px; } .et-l--footer .et_pb_row_1_tb_footer { margin-top: 8px !important; padding-top: 20px !important; } .et-l--footer .et_pb_text_3_tb_footer p { font-size: 14px; } /* Vicki post slider (Code Snippet "viki") on phones: one wide card at a time, swipe or arrows to move. floux.js tags each card with data-floux-side (active / prev / next) and adds touch swipe; the slider's own JS still decides which card is active. */ .vicki.vicki-post-slider { overflow-x: clip !important; overflow-y: visible !important; padding-top: 4px !important; } .vicki.vicki-enhanced { min-height: 0 !important; padding-bottom: 68px !important; } .vicki .vicki__viewport { min-height: 400px !important; touch-action: pan-y; } .vicki .vicki-post-card { width: calc(100% - 24px) !important; max-width: 440px !important; height: 380px !important; top: 8px !important; filter: none !important; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease !important; } .vicki .vicki-post-card[data-floux-side="active"] { transform: translate3d(-50%, 0, 0) !important; opacity: 1 !important; } .vicki .vicki-post-card[data-floux-side="next"] { transform: translate3d(calc(-50% + 100vw), 0, 0) !important; opacity: 0 !important; } .vicki .vicki-post-card[data-floux-side="prev"] { transform: translate3d(calc(-50% - 100vw), 0, 0) !important; opacity: 0 !important; } .vicki .vicki-post-card.is-active img, .vicki .vicki-post-card.is-active .vicki-post-card__image { transform: none !important; } .vicki .vicki-post-card__media, .vicki .entry-featured-image-url, .vicki .et_pb_image_container, .vicki .et_pb_blog_image_container { height: 200px !important; } .vicki:has(.vicki__center-copy) .vicki-post-card { top: 150px !important; } .vicki:has(.vicki__center-copy) .vicki__viewport { min-height: 560px !important; } .vicki .vicki-post-card__body { padding: 18px 20px 8px !important; } .vicki .vicki-post-card__meta, .vicki .vicki-post-card .post-meta { font-size: 13px !important; padding: 0 20px 18px !important; } .vicki .vicki-post-card__title, .vicki .vicki-post-card h3 { font-size: 19px !important; line-height: 1.3 !important; } .vicki .vicki__controls { bottom: 0 !important; } .vicki .vicki__button { width: 48px; height: 48px; } /* Divi 5 blog post template (Theme Builder "All Posts" body 228977) */ .et-l--body .et_pb_section_0_tb_body { padding-top: 56px !important; padding-bottom: 56px !important; } .et-l--body .et_pb_image_0_tb_body { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .et-l--body .et_pb_row_1_tb_body { margin-top: 32px !important; margin-bottom: 32px !important; } .et-l--body .et_pb_section_1_tb_body { padding-top: 24px !important; padding-bottom: 32px !important; } /* Archive / search template (228960): the 60vh bottom-aligned hero is mostly empty on phones */ body.archive .et-l--body .et_pb_section_0_tb_body, body.search .et-l--body .et_pb_section_0_tb_body { height: auto !important; min-height: 0 !important; padding-top: 64px !important; padding-bottom: 48px !important; } /* 404 template (228950): the big "404" sits behind the title on desktop; stack them on phones */ body.error404 .et-l--body .et_pb_row_0_tb_body { margin-top: 0 !important; } body.error404 .et-l--body .et_pb_heading_0_tb_body h1, body.error404 .et-l--body .et_pb_heading_0_tb_body h2 { font-size: 88px !important; line-height: 1 !important; opacity: 0.9; } body.error404 .et-l--body .et_pb_heading_1_tb_body { margin-top: 8px !important; } /* ---------- 4. Page-specific ---------- */ /* Home (page 60) */ .page-id-60 .et_pb_section_0 { padding-top: 48px !important; padding-bottom: 56px !important; } .page-id-60 .et_pb_section_1 { padding-top: 64px !important; padding-bottom: 64px !important; } .page-id-60 .et_pb_section_2 { padding-top: 64px !important; padding-bottom: 64px !important; } .page-id-60 .et_pb_section_3 { padding-top: 64px !important; padding-bottom: 48px !important; } /* Statistics: one glass card per figure instead of a stacked muddy panel */ .page-id-60 .et_pb_row_5 { background: none !important; padding: 0 !important; gap: 14px; } .page-id-60 .et_pb_column_6, .page-id-60 .et_pb_column_7, .page-id-60 .et_pb_column_8 { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 18px; box-shadow: 0 18px 34px -22px rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); margin-bottom: 0 !important; } .page-id-60 .et_pb_number_counter .percent p { font-size: 44px !important; line-height: 1.1 !important; } .page-id-60 .et_pb_number_counter .title { font-size: 16px !important; margin-top: 4px; } /* About (page 62) */ .page-id-62 .et_pb_section_0 { padding-top: 110px !important; padding-bottom: 96px !important; } .page-id-62 .et_pb_section_1 { padding-top: 64px !important; padding-bottom: 48px !important; } .page-id-62 .et_pb_section_2 { padding-top: 64px !important; padding-bottom: 64px !important; } .page-id-62 .et_pb_section_3 { padding-top: 72px !important; padding-bottom: 72px !important; } .page-id-62 .et_pb_section_3 .et_pb_row { padding-top: 24px !important; padding-bottom: 24px !important; } /* Contact (page 71) */ .page-id-71 .et_pb_section_0 { padding-top: 72px !important; padding-bottom: 250px !important; background-size: 62% auto !important; background-position: right bottom !important; } /* Contact form section: see "Contact form (cb-contact)" at the end of this file */ /* Testimonials (page 69) */ .page-id-69 .et_pb_section_0 { padding-top: 88px !important; padding-bottom: 72px !important; } .page-id-69 .et_pb_section_2 { padding-top: 56px !important; padding-bottom: 48px !important; } /* Recruitment (73), Training (75), Career Coaching (77) */ .page-id-73 .et_pb_section_0, .page-id-75 .et_pb_section_0, .page-id-77 .et_pb_section_0 { padding-top: 96px !important; padding-bottom: 80px !important; } .page-id-73 .et_pb_section_1, .page-id-77 .et_pb_section_1, .page-id-77 .et_pb_section_2, .page-id-77 .et_pb_section_4 { padding-top: 64px !important; padding-bottom: 64px !important; } /* Pages without the builder (e.g. the "Career Services" placeholder) */ body:not(.et_pb_pagebuilder_layout) #main-content .container { padding-top: 40px; } body:not(.et_pb_pagebuilder_layout) #sidebar { display: none; } body:not(.et_pb_pagebuilder_layout) #left-area { width: 100%; padding-right: 0; } } /* ---------- 5. Tablet ---------- */ @media (min-width: 768px) and (max-width: 980px) { .vicki .vicki-post-card { width: min(230px, 32vw) !important; height: 320px !important; } .et_pb_section .et_pb_button { min-height: 48px; } } /* ===================================================================== * Partners of Success: orbit (Testimonials page, section "Partners of Success") * Divi structure (all native modules, classes set in Advanced > Attributes): * Group .cb-orbit * Image .cb-orbit__core Career Boosters icon in the centre * Group .cb-orbit__ring.cb-orbit__ring--inner Image .cb-orbit__logo x N * Group .cb-orbit__ring.cb-orbit__ring--outer Image .cb-orbit__logo x N * Rings turn in opposite directions; each logo counter-rotates so it stays upright. * Positions use CSS trig on percentages, so the whole system scales with its width. * floux.js sets --i / --n per logo, so logos can be added or removed in the builder. * Only transform-family properties (rotate / translate / scale) and opacity animate. * ===================================================================== */ @keyframes cb-orbit-spin { from { rotate: 0deg; } to { rotate: 360deg; } } @keyframes cb-orbit-pulse { 0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.55; } 100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; } } .cb-partners .cb-partners__title h2 { text-align: center; letter-spacing: -0.02em; } html body .cb-orbit { --ring-out: 40%; --ring-in: 21%; --logo-out: 17%; --logo-in: 15.5%; --spin-out: 80s; --spin-in: 56s; position: relative !important; display: block !important; width: min(100%, 620px) !important; max-width: 620px !important; aspect-ratio: 1 / 1; margin: 0 auto !important; padding: 0 !important; isolation: isolate; } /* soft brand-coloured glow behind the system */ html body .cb-orbit::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(253, 180, 74, 0.20) 0%, rgba(253, 180, 74, 0) 34%), radial-gradient(circle at 30% 70%, rgba(1, 83, 165, 0.10) 0%, rgba(1, 83, 165, 0) 55%), radial-gradient(circle at 72% 28%, rgba(28, 24, 69, 0.08) 0%, rgba(28, 24, 69, 0) 50%); z-index: -1; pointer-events: none; } html body .cb-orbit .cb-orbit__ring { position: absolute !important; inset: 0 !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; display: block !important; animation: cb-orbit-spin var(--spin-out) linear infinite; pointer-events: none; } html body .cb-orbit .cb-orbit__ring--outer { --r: var(--ring-out); --s: var(--logo-out); --n: 7; z-index: 1; } html body .cb-orbit .cb-orbit__ring--inner { --r: var(--ring-in); --s: var(--logo-in); --n: 4; z-index: 2; animation-duration: var(--spin-in); animation-direction: reverse; } /* dashed orbit path */ html body .cb-orbit .cb-orbit__ring::before { content: ""; position: absolute; inset: calc(50% - var(--r)); border: 1.5px dashed rgba(28, 24, 69, 0.18); border-radius: 50%; pointer-events: none; } /* logo position on its ring (fallback indices; floux.js writes the real ones) */ html body .cb-orbit .cb-orbit__logo:nth-child(1) { --i: 0; } html body .cb-orbit .cb-orbit__logo:nth-child(2) { --i: 1; } html body .cb-orbit .cb-orbit__logo:nth-child(3) { --i: 2; } html body .cb-orbit .cb-orbit__logo:nth-child(4) { --i: 3; } html body .cb-orbit .cb-orbit__logo:nth-child(5) { --i: 4; } html body .cb-orbit .cb-orbit__logo:nth-child(6) { --i: 5; } html body .cb-orbit .cb-orbit__logo:nth-child(7) { --i: 6; } html body .cb-orbit .cb-orbit__logo:nth-child(8) { --i: 7; } html body .cb-orbit .cb-orbit__logo:nth-child(9) { --i: 8; } html body .cb-orbit .cb-orbit__logo:nth-child(10) { --i: 9; } html body .cb-orbit .cb-orbit__logo { --a: calc(360deg / var(--n) * var(--i) - 90deg); position: absolute !important; left: calc(50% + cos(var(--a)) * var(--r)) !important; top: calc(50% + sin(var(--a)) * var(--r)) !important; width: var(--s) !important; max-width: none !important; aspect-ratio: 1 / 1; margin: 0 !important; padding: 0 !important; translate: -50% -50%; /* counter-rotation: same speed as the ring, opposite direction */ animation: cb-orbit-spin var(--spin-out) linear infinite reverse; pointer-events: auto; z-index: 1; } html body .cb-orbit .cb-orbit__ring--inner .cb-orbit__logo { animation-duration: var(--spin-in); animation-direction: normal; } /* the tile: layered, navy-tinted shadow (base -> elevated) */ html body .cb-orbit .cb-orbit__logo .et_pb_image_wrap { display: block !important; width: 100% !important; height: 100% !important; border-radius: 24%; overflow: hidden; background: #ffffff; box-shadow: 0 0 0 1px rgba(28, 24, 69, 0.06), 0 2px 4px rgba(28, 24, 69, 0.06), 0 12px 28px -10px rgba(28, 24, 69, 0.30); transition: scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; } html body .cb-orbit .cb-orbit__logo img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; } /* centre: the Career Boosters icon with a radiating pulse */ html body .cb-orbit .cb-orbit__core { position: absolute !important; left: 50% !important; top: 50% !important; translate: -50% -50%; width: 17% !important; max-width: none !important; margin: 0 !important; z-index: 3; } html body .cb-orbit .cb-orbit__core .et_pb_image_wrap { display: block; position: relative; } html body .cb-orbit .cb-orbit__core img { display: block; width: 100% !important; height: auto; position: relative; z-index: 1; } html body .cb-orbit .cb-orbit__core::before, html body .cb-orbit .cb-orbit__core::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; border: 2px solid rgba(253, 180, 74, 0.55); transform: translate(-50%, -50%) scale(0.6); opacity: 0; animation: cb-orbit-pulse 4.2s cubic-bezier(0.22, 1, 0.36, 1) infinite; pointer-events: none; } html body .cb-orbit .cb-orbit__core::after { animation-delay: 2.1s; border-color: rgba(1, 83, 165, 0.35); } /* hover (pointer devices): the system pauses and the logo under the cursor lifts */ @media (hover: hover) and (pointer: fine) { html body .cb-orbit:hover .cb-orbit__ring, html body .cb-orbit:hover .cb-orbit__logo { animation-play-state: paused; } html body .cb-orbit .cb-orbit__logo:hover { z-index: 4; } html body .cb-orbit .cb-orbit__logo:hover .et_pb_image_wrap { scale: 1.22; box-shadow: 0 0 0 1px rgba(28, 24, 69, 0.08), 0 4px 8px rgba(28, 24, 69, 0.08), 0 22px 44px -14px rgba(28, 24, 69, 0.45); } } /* entrance: the site-motion reveal must not offset the orbit pieces */ html body .cb-orbit .cb-motion-reveal { transform: none !important; } @media (max-width: 767px) { html body .cb-orbit { --spin-out: 70s; --spin-in: 48s; } html body .cb-orbit .cb-orbit__ring::before { border-width: 1px; } } @media (prefers-reduced-motion: reduce) { html body .cb-orbit .cb-orbit__ring, html body .cb-orbit .cb-orbit__logo, html body .cb-orbit .cb-orbit__core::before, html body .cb-orbit .cb-orbit__core::after { animation: none !important; } } /* ===================================================================== * Career Coaching: "From confusion to clarity" section (.cb-clarity) * Native Divi modules; classes set in Advanced > Attributes. * column .cb-clarity__content: eyebrow, H2, lead, group .cb-clarity__steps (3 x .cb-clarity__step), button * column .cb-clarity__visual : group .cb-clarity__frame > image .cb-clarity__photo + 3 x text .cb-clarity__chip * Motion (transform/opacity only): the photo starts frosted and comes into focus, the 1-2-3 path * draws itself, chips float. Triggered by the site-motion snippet's .cb-motion-visible class. * ===================================================================== */ @keyframes cb-chip-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } } html body .cb-clarity { position: relative; isolation: isolate; background: radial-gradient(55% 80% at 88% 18%, rgba(1, 83, 165, 0.55) 0%, rgba(1, 83, 165, 0) 62%), radial-gradient(40% 60% at 6% 96%, rgba(253, 180, 74, 0.14) 0%, rgba(253, 180, 74, 0) 62%), #1C1845 !important; } html body .cb-clarity .cb-motion-reveal { transform: none !important; } /* copy */ .cb-clarity .cb-clarity__eyebrow p { display: inline-flex; align-items: center; gap: 12px; margin: 0; color: #FDB44A !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.16em; text-transform: uppercase; } .cb-clarity .cb-clarity__eyebrow p::before { content: ""; width: 32px; height: 2px; border-radius: 2px; background: #FDB44A; } html body .cb-clarity .cb-clarity__title h2 { color: #ffffff !important; font-size: clamp(32px, 1.6vw + 22px, 52px) !important; line-height: 1.1 !important; letter-spacing: -0.03em !important; margin: 14px 0 18px !important; } .cb-clarity .cb-clarity__lead p { color: rgba(255, 255, 255, 0.8) !important; font-size: 17px !important; line-height: 1.7 !important; max-width: 34em; margin: 0; } /* 1-2-3 path */ html body .cb-clarity .cb-clarity__steps { position: relative; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 40px 0 44px !important; counter-reset: cb-clarity; } html body .cb-clarity .cb-clarity__steps::before { content: ""; position: absolute; top: 18px; left: 18px; right: calc((100% - 40px) / 3 - 18px); height: 2px; border-radius: 2px; background: linear-gradient(90deg, #FDB44A, #96C5F2); transform-origin: left center; transform: scaleX(1); transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.2s; } html body .cb-clarity .cb-clarity__step { position: relative; margin: 0 !important; padding-top: 56px !important; counter-increment: cb-clarity; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; gap: 8px !important; } html body .cb-clarity .cb-clarity__step > .et_pb_module { margin: 0 !important; padding: 0 !important; width: 100% !important; } html body .cb-clarity .cb-clarity__step::before { content: counter(cb-clarity); position: absolute; top: 0; left: 0; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #1C1845; border: 2px solid #FDB44A; color: #FDB44A; font-family: "Open Sans", sans-serif; font-weight: 700; font-size: 15px; line-height: 1; box-shadow: 0 0 0 6px rgba(253, 180, 74, 0.12); transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease; } html body .cb-clarity .cb-clarity__step--2::before { transition-delay: 0.45s; } html body .cb-clarity .cb-clarity__step--3::before { transition-delay: 0.9s; } html body .cb-clarity .cb-clarity__step-title h3 { color: #ffffff !important; font-size: 18px !important; line-height: 1.3 !important; margin: 0 0 6px !important; } html body .cb-clarity .cb-clarity__step-text p { color: rgba(255, 255, 255, 0.72) !important; font-size: 15px !important; line-height: 1.6 !important; margin: 0; } /* before the path is in view (JS only), the line and dots wait */ body.cb-motion-ready .cb-clarity .cb-clarity__steps:not(.cb-motion-visible)::before { transform: scaleX(0); } body.cb-motion-ready .cb-clarity .cb-clarity__steps:not(.cb-motion-visible) .cb-clarity__step::before { transform: scale(0.4); opacity: 0; } /* button states */ .cb-clarity .cb-clarity__cta .et_pb_button { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease; } .cb-clarity .cb-clarity__cta .et_pb_button:hover { transform: translateY(-2px); } .cb-clarity .cb-clarity__cta .et_pb_button:focus-visible { outline: 3px solid #96C5F2; outline-offset: 3px; } .cb-clarity .cb-clarity__cta .et_pb_button:active { transform: translateY(0) scale(0.97); } /* visual */ html body .cb-clarity .cb-clarity__visual { position: relative; } html body .cb-clarity .cb-clarity__visual::before, html body .cb-clarity .cb-clarity__visual::after { content: ""; position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; } html body .cb-clarity .cb-clarity__visual::before { width: 46%; aspect-ratio: 1; top: -12%; right: -8%; background: #FDB44A; opacity: 0.9; } html body .cb-clarity .cb-clarity__visual::after { width: 34%; aspect-ratio: 1; bottom: -10%; left: -8%; background: #96C5F2; opacity: 0.35; } html body .cb-clarity .cb-clarity__frame { position: relative !important; display: block !important; margin: 0 !important; } html body .cb-clarity .cb-clarity__photo { margin: 0 !important; width: 100% !important; max-width: 100% !important; } html body .cb-clarity .cb-clarity__photo .et_pb_image_wrap { position: relative; display: block; width: 100%; border-radius: 28px; overflow: hidden; box-shadow: 0 2px 6px rgba(4, 4, 20, 0.25), 0 30px 60px -24px rgba(4, 4, 20, 0.7); } html body .cb-clarity .cb-clarity__photo img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; object-position: 62% center; } /* frosted glass that clears when the photo enters the view (opacity only) */ html body .cb-clarity .cb-clarity__photo .et_pb_image_wrap::after { content: ""; position: absolute; inset: 0; background: rgba(28, 24, 69, 0.28); -webkit-backdrop-filter: blur(14px) saturate(0.4); backdrop-filter: blur(14px) saturate(0.4); opacity: 0; transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s; pointer-events: none; } body.cb-motion-ready .cb-clarity .cb-clarity__frame:not(.cb-motion-visible) .cb-clarity__photo .et_pb_image_wrap::after { opacity: 1; transition: none; } /* floating glass chips */ html body .cb-clarity .cb-clarity__chip { position: absolute !important; margin: 0 !important; width: auto !important; z-index: 2; animation: cb-chip-float 6s ease-in-out infinite; } html body .cb-clarity .cb-clarity__chip p { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 10px 16px; border-radius: 999px; white-space: nowrap; background: rgba(28, 24, 69, 0.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: 0 10px 24px -12px rgba(4, 4, 20, 0.6); color: #ffffff !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.2 !important; } html body .cb-clarity .cb-clarity__chip p::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #FDB44A; } html body .cb-clarity .cb-clarity__chip--1 { top: 7%; left: -28px; } html body .cb-clarity .cb-clarity__chip--2 { top: 44%; right: -26px; animation-delay: -2s; } html body .cb-clarity .cb-clarity__chip--3 { bottom: 8%; left: 14%; animation-delay: -4s; } /* tablet: keep chips inside the photo */ @media (max-width: 980px) { html body .cb-clarity .cb-clarity__chip--1 { left: 16px; } html body .cb-clarity .cb-clarity__chip--2 { right: 16px; } html body .cb-clarity .cb-clarity__visual { max-width: 640px; } } /* phone: vertical path, chips become a row under the photo */ @media (max-width: 767px) { html body .cb-clarity .cb-clarity__steps { grid-template-columns: 1fr; gap: 22px; margin: 32px 0 36px !important; } html body .cb-clarity .cb-clarity__steps::before { top: 18px; bottom: 18px; left: 17px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, #FDB44A, #96C5F2); transform-origin: center top; } body.cb-motion-ready .cb-clarity .cb-clarity__steps:not(.cb-motion-visible)::before { transform: scaleY(0); } html body .cb-clarity .cb-clarity__step { padding: 4px 0 0 56px !important; min-height: 36px; } html body .cb-clarity .cb-clarity__frame { display: flex !important; flex-wrap: wrap; gap: 8px; } html body .cb-clarity .cb-clarity__photo { flex: 0 0 100%; margin-bottom: 8px !important; } html body .cb-clarity .cb-clarity__chip { position: static !important; animation: none; } html body .cb-clarity .cb-clarity__chip p { padding: 8px 13px; font-size: 13px !important; } html body .cb-clarity .cb-clarity__visual::before { width: 40%; top: -6%; right: -6%; } html body .cb-clarity .cb-clarity__visual::after { display: none; } } @media (prefers-reduced-motion: reduce) { html body .cb-clarity .cb-clarity__chip { animation: none !important; } html body .cb-clarity .cb-clarity__photo .et_pb_image_wrap::after { display: none !important; } html body .cb-clarity .cb-clarity__steps::before { transform: none !important; transition: none !important; } html body .cb-clarity .cb-clarity__step::before { transform: none !important; opacity: 1 !important; transition: none !important; } } /* ===================================================================== * Branded WhatsApp chat (inc/whatsapp-chat.php). Brand: indigo #1C1845, amber #FDB44A, * blue #0153A5, sky #96C5F2. Motion: transform/opacity only. * ===================================================================== */ @keyframes cb-wa-ring { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(1.55); opacity: 0; } } @keyframes cb-wa-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } } .cb-wa { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 99990; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; font-family: "Poppins", "Open Sans", system-ui, sans-serif; pointer-events: none; } .cb-wa > * { pointer-events: auto; } /* launcher */ .cb-wa__launcher { position: relative; display: inline-flex; align-items: center; gap: 0; height: 60px; min-width: 60px; padding: 0 16px; border: 0; border-radius: 999px; background: #1C1845; color: #ffffff; box-shadow: 0 0 0 3px #FDB44A, 0 12px 28px -10px rgba(28, 24, 69, 0.65), 0 4px 10px rgba(28, 24, 69, 0.25); cursor: pointer; text-decoration: none; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease; } .cb-wa__launcher .cb-wa__glyph { width: 28px; height: 28px; flex: 0 0 28px; color: #ffffff; } .cb-wa__label { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; transition: max-width 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, margin 0.45s ease; } .cb-wa__ring { position: absolute; inset: 0; border-radius: inherit; border: 2px solid #FDB44A; animation: cb-wa-ring 2.6s cubic-bezier(0.22, 1, 0.36, 1) infinite; pointer-events: none; } .cb-wa__launcher:hover { transform: translateY(-2px); background: #0153A5; } .cb-wa__launcher:focus-visible { outline: 3px solid #96C5F2; outline-offset: 4px; } .cb-wa__launcher:active { transform: scale(0.95); } .cb-wa.is-open .cb-wa__ring { animation: none; opacity: 0; } @media (hover: hover) and (min-width: 768px) { .cb-wa__launcher { padding: 0 22px 0 16px; } .cb-wa__label { max-width: 160px; opacity: 1; margin-left: 10px; } } /* panel */ .cb-wa__panel { width: min(360px, calc(100vw - 32px)); border-radius: 22px; overflow: hidden; background: #ffffff; box-shadow: 0 0 0 1px rgba(28, 24, 69, 0.06), 0 8px 18px rgba(28, 24, 69, 0.12), 0 30px 60px -20px rgba(28, 24, 69, 0.45); transform-origin: bottom right; } .cb-wa__panel[hidden] { display: none; } .cb-wa.is-open .cb-wa__panel { animation: cb-wa-in 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .cb-wa__head { position: relative; display: flex; align-items: center; gap: 12px; padding: 18px 18px 18px 20px; background: radial-gradient(120% 140% at 100% 0%, rgba(1, 83, 165, 0.6) 0%, rgba(1, 83, 165, 0) 60%), #1C1845; color: #ffffff; } .cb-wa__avatar { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: #ffffff; display: grid; place-items: center; box-shadow: 0 0 0 2px #FDB44A; } .cb-wa__avatar img { width: 30px; height: 30px; object-fit: contain; } .cb-wa__who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; } .cb-wa__who strong { font-family: "Open Sans", sans-serif; font-size: 16px; font-weight: 700; color: #ffffff; } .cb-wa__who span { font-size: 12.5px; color: #96C5F2; } .cb-wa__close { margin-left: auto; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #ffffff; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; } .cb-wa__close:hover { background: rgba(255, 255, 255, 0.2); } .cb-wa__close:focus-visible { outline: 2px solid #FDB44A; outline-offset: 2px; } .cb-wa__close:active { transform: scale(0.92); } .cb-wa__body { padding: 18px 18px 6px; background: #ecf5fd; } .cb-wa__bubble { position: relative; margin: 0 0 14px; padding: 12px 14px; border-radius: 4px 16px 16px 16px; background: #ffffff; color: #1C1845; font-size: 14.5px; line-height: 1.55; box-shadow: 0 1px 2px rgba(28, 24, 69, 0.08); } .cb-wa__prompt { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #0153A5; } .cb-wa__intents { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; } .cb-wa__intent { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(1, 83, 165, 0.18); background: #ffffff; color: #1C1845; text-decoration: none; font-size: 14.5px; font-weight: 600; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, background-color 0.2s ease; } .cb-wa__intent span { color: #FDB44A; font-size: 18px; transition: transform 0.25s ease; } .cb-wa__intent:hover { border-color: #0153A5; transform: translateX(2px); } .cb-wa__intent:hover span { transform: translateX(3px); } .cb-wa__intent:focus-visible { outline: 2px solid #0153A5; outline-offset: 2px; } .cb-wa__intent:active { transform: scale(0.98); } .cb-wa__start { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 0 18px; min-height: 56px; background: #FDB44A; color: #1C1845; text-decoration: none; font-size: 15px; font-weight: 700; transition: background-color 0.2s ease; } .cb-wa__start .cb-wa__glyph { width: 22px; height: 22px; color: #1C1845; } .cb-wa__start:hover { background: #ffc46b; } .cb-wa__start:focus-visible { outline: 3px solid #0153A5; outline-offset: -3px; } .cb-wa__start:active { background: #f0a432; } /* phones: smaller launcher, panel as a bottom sheet width */ @media (max-width: 767px) { .cb-wa { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); } .cb-wa__launcher { height: 56px; min-width: 56px; padding: 0 14px; } .cb-wa__panel { width: calc(100vw - 28px); } } @media (prefers-reduced-motion: reduce) { .cb-wa__ring { animation: none; opacity: 0; } .cb-wa.is-open .cb-wa__panel { animation: none; } .cb-wa__launcher, .cb-wa__intent, .cb-wa__label { transition: none; } } @media print { .cb-wa { display: none !important; } } /* ===================================================================== * Equal-height cards, every device. * 1. Divi group carousels (testimonials): all slides as tall as the tallest, author line at the bottom. * 2. floux.js (equalizeCards) gives sibling card sets one height and adds .cb-eq-card; * inside those cards the last button / footer is pinned to the bottom. * ===================================================================== */ html body .et_pb_group_carousel_track { align-items: stretch !important; } html body .et_pb_group_carousel_slide { display: flex !important; height: auto !important; } html body .et_pb_group_carousel_slide > div { display: flex !important; flex: 1 1 auto; align-items: stretch !important; height: auto !important; } html body .et_pb_group_carousel_slide > div > .et_pb_group { flex: 1 1 auto; height: auto !important; display: flex !important; flex-direction: column !important; } html body .et_pb_group_carousel_slide > div > .et_pb_group > .et_pb_group:last-child { flex: 0 0 auto !important; margin-top: auto !important; padding-top: 12px; } html body .et_pb_group_carousel_slide > .et_pb_group > .et_pb_group:last-child { flex: 0 0 auto !important; margin-top: auto !important; padding-top: 12px; } /* Tablets and phones: the client's name on one line, their position on the next line */ @media (max-width: 980px) { html body .et_pb_group_carousel .et_pb_group .et_pb_group { flex-direction: column !important; flex-wrap: nowrap !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 4px !important; } html body .et_pb_group_carousel .et_pb_group .et_pb_group > .et_pb_text { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; margin: 0 !important; } html body .et_pb_group_carousel .et_pb_group .et_pb_group > .et_pb_text, html body .et_pb_group_carousel .et_pb_group .et_pb_group > .et_pb_text p { text-align: left !important; } } .cb-eq-card { display: flex !important; flex-direction: column !important; box-sizing: border-box; } .cb-eq-card > .et_pb_button_module_wrapper:last-child, .cb-eq-card > .et_pb_module:last-child:not(:first-child).et_pb_button_module_wrapper { margin-top: auto !important; } /* Articles page cards: read time + tags sit at the bottom of every card */ .cb-articles-card { display: flex; flex-direction: column; } .cb-articles-card__body { flex: 1 1 auto; } .cb-articles-card:not(.cb-articles-card--featured) .cb-articles-card__read { margin-top: auto; } /* Search / category result cards */ .cb-search-card { box-sizing: border-box; } /* ===================================================================== * Contact form (cb-contact) - Contact page, section "Contact form". * Layers: tinted base section -> elevated contact cards -> floating form panel. * Layout, colours, paddings and radii are native Divi settings on the section, * row "Contact split", columns and the two card groups; this block adds what * Divi cannot express (mesh background, grain, field states, card grid). * Motion: transform/opacity only, spring easing. * ===================================================================== */ .cb-contact { --cb-navy: #1c1845; --cb-blue: #0153a5; --cb-amber: #fdb44a; --cb-ink-soft: #5b5f86; --cb-spring: cubic-bezier(.2, .9, .3, 1.25); position: relative; isolation: isolate; background: radial-gradient(42% 52% at 0% 0%, rgba(253, 180, 74, .18), transparent 70%), radial-gradient(46% 60% at 100% 100%, rgba(1, 83, 165, .14), transparent 70%), radial-gradient(30% 40% at 70% 10%, rgba(28, 24, 69, .06), transparent 70%), linear-gradient(180deg, #f4f8fd 0%, #eef4fb 100%) !important; } .cb-contact::before { /* fine grain for depth */ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .09 0 0 0 0 .27 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .cb-contact .et_pb_row { position: relative; } .cb-contact .et_pb_row::before { /* soft amber glow behind the form panel */ content: ""; position: absolute; z-index: 0; pointer-events: none; width: 340px; height: 340px; right: -60px; top: -70px; border-radius: 50%; background: radial-gradient(circle, rgba(253, 180, 74, .38), rgba(253, 180, 74, 0) 68%); } .cb-contact .et_pb_column { position: relative; z-index: 1; } /* Intro */ .cb-contact-intro .et_pb_heading h2 { letter-spacing: -.03em; } .cb-contact-intro > .et_pb_text p { line-height: 1.7; color: var(--cb-ink-soft); } .cb-contact-intro > .et_pb_text { margin-bottom: 12px !important; } /* Contact cards: icon chip | label + value | arrow */ .cb-contact-card { position: relative; display: grid !important; grid-template-columns: 56px minmax(0, 1fr) 40px; column-gap: 16px; row-gap: 2px; align-items: center; box-shadow: 0 1px 2px rgba(28, 24, 69, .05), 0 10px 28px -14px rgba(28, 24, 69, .22); transition: transform .55s var(--cb-spring); cursor: pointer; } .cb-contact-card::after { /* stronger shadow, faded in on hover */ content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: 0 2px 4px rgba(28, 24, 69, .06), 0 22px 44px -18px rgba(1, 83, 165, .38); transition: opacity .4s ease; } .cb-contact-card::before { /* arrow chip */ content: ""; grid-column: 3; grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 50%; background: #ecf5fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230153a5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .55s var(--cb-spring); } .cb-contact-card:hover { transform: translateY(-3px); } .cb-contact-card:hover::after { opacity: 1; } .cb-contact-card:hover::before { transform: translate(2px, -2px) rotate(8deg); } .cb-contact-card:active { transform: translateY(0) scale(.985); transition-duration: .15s; } .cb-contact-card:has(a:focus-visible) { outline: 3px solid var(--cb-blue); outline-offset: 3px; } .cb-contact-card a:focus-visible { outline: none; } .cb-contact-card > .et_pb_heading { grid-column: 2; grid-row: 1; margin: 0 !important; align-self: end; } .cb-contact-card > .et_pb_heading h3 { font-size: 12px !important; line-height: 1.4 !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase; color: var(--cb-ink-soft) !important; padding: 0 !important; margin: 0 !important; } .cb-contact-card > .et_pb_icon { display: contents !important; } .cb-contact-card .et_pb_icon_wrap { grid-column: 1; grid-row: 1 / span 2; width: 56px; height: 56px; border-radius: 16px; display: grid !important; place-items: center; background: linear-gradient(140deg, #ffc56b 0%, var(--cb-amber) 55%, #f39a1f 100%); box-shadow: 0 10px 20px -10px rgba(243, 154, 31, .75), inset 0 1px 0 rgba(255, 255, 255, .45); transition: transform .55s var(--cb-spring); } .cb-contact-card:hover .et_pb_icon_wrap { transform: rotate(-6deg) scale(1.04); } .cb-contact-card .et_pb_icon_wrap .et-pb-icon { font-size: 22px !important; color: var(--cb-navy) !important; line-height: 1 !important; } .cb-contact-card .et_pb_icon > .et_pb_text { grid-column: 2; grid-row: 2; margin: 0 !important; align-self: start; } .cb-contact-card .et_pb_text p { padding: 0 !important; margin: 0 !important; } .cb-contact-card .et_pb_text a, .cb-contact-card .et_pb_text a span { font-family: "Poppins", "Open Sans", sans-serif; font-size: clamp(15px, 1.25vw + 9px, 18px) !important; font-weight: 600 !important; color: var(--cb-navy) !important; text-decoration: none !important; overflow-wrap: anywhere; padding: 0 !important; line-height: 1.4 !important; } /* the whole card is the link (stretched link) */ .cb-contact-card .et_pb_module, .cb-contact-card .et_pb_text_inner, .cb-contact-card .et_pb_text p { position: static !important; } .cb-contact-card .et_pb_text a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 20px; } /* Floating form panel */ .cb-contact-panel { box-shadow: 0 1px 2px rgba(28, 24, 69, .05), 0 24px 48px -24px rgba(28, 24, 69, .24), 0 60px 120px -60px rgba(1, 83, 165, .32); } .cb-contact-panel .et_pb_contact_form_container, .cb-contact-panel .et_pb_contact_form { margin-bottom: 0 !important; } /* Fields: visible labels, soft filled inputs, clear focus and error states */ .cb-contact .et_pb_contact_form { row-gap: 18px; } .cb-contact .et_pb_contact_field { margin-bottom: 0 !important; } .cb-contact .et_pb_contact_form_label { display: block !important; position: static !important; clip: auto !important; width: auto !important; height: auto !important; font-family: "Poppins", "Open Sans", sans-serif; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--cb-navy); margin: 0 0 8px !important; padding: 0 !important; } .cb-contact .et_pb_contact_field:has(.input:focus) .et_pb_contact_form_label { color: var(--cb-blue); } .cb-contact .et_pb_contact_form .input { font-family: "Poppins", "Open Sans", sans-serif !important; font-size: 16px !important; line-height: 1.5 !important; color: var(--cb-navy) !important; background: #f6f9fd !important; border: 1px solid rgba(28, 24, 69, .12) !important; border-radius: 14px !important; padding: 14px 16px !important; min-height: 54px; box-sizing: border-box; width: 100%; } .cb-contact .et_pb_contact_form .input::placeholder { color: rgba(91, 95, 134, .6) !important; opacity: 1; } .cb-contact .et_pb_contact_form .input:hover { border-color: rgba(28, 24, 69, .26) !important; } .cb-contact .et_pb_contact_form .input:focus { outline: none; background-color: #fff !important; border-color: var(--cb-blue) !important; box-shadow: 0 0 0 4px rgba(1, 83, 165, .13) !important; } .cb-contact .et_pb_contact_form textarea.input { min-height: 150px; resize: vertical; } .cb-contact .et_pb_contact_form select.input { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 48px !important; background: #f6f9fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1845' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 18px center / 18px no-repeat !important; } .cb-contact .et_pb_contact_form select.input:focus { background-color: #fff !important; } .cb-contact .et_pb_contact_field[data-type="select"]::after { display: none !important; } .cb-contact .et_pb_contact_form .input.et_contact_error { border-color: #d14343 !important; background-color: #fff6f6 !important; box-shadow: 0 0 0 4px rgba(209, 67, 67, .1) !important; } /* Submit */ .cb-contact .et_contact_bottom_container { display: flex; width: 100%; float: none !important; margin-top: 6px; } .cb-contact .et_pb_contact_submit.et_pb_button { width: 100% !important; max-width: none !important; min-height: 56px; margin: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; font-family: "Poppins", "Open Sans", sans-serif !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: .01em; color: #fff !important; border: 0 !important; border-radius: 999px !important; padding: 14px 28px !important; background: linear-gradient(120deg, var(--cb-navy) 0%, #2a2470 45%, var(--cb-blue) 100%) !important; box-shadow: 0 1px 2px rgba(28, 24, 69, .2), 0 16px 30px -14px rgba(1, 83, 165, .65); transition: transform .5s var(--cb-spring) !important; } .cb-contact .et_pb_contact_submit.et_pb_button::after { content: "" !important; position: static !important; display: inline-block !important; opacity: 1 !important; margin: 0 !important; width: 18px; height: 18px; font-size: 0 !important; background: var(--cb-amber); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .5s var(--cb-spring); } .cb-contact .et_pb_contact_submit.et_pb_button:hover { transform: translateY(-2px); } .cb-contact .et_pb_contact_submit.et_pb_button:hover::after { transform: translateX(4px); } .cb-contact .et_pb_contact_submit.et_pb_button:active { transform: translateY(0) scale(.985); transition-duration: .15s !important; } .cb-contact .et_pb_contact_submit.et_pb_button:focus-visible { outline: 3px solid var(--cb-amber); outline-offset: 3px; } /* Success / error message after submit */ .cb-contact .et-pb-contact-message p, .cb-contact .et-pb-contact-message ul { font-family: "Poppins", "Open Sans", sans-serif; font-size: 15px; line-height: 1.6; color: var(--cb-navy); background: #ecf5fd; border: 1px solid rgba(1, 83, 165, .18); border-radius: 14px; padding: 14px 16px; margin: 0 0 18px; } /* Tablet and phone */ @media (max-width: 980px) { .cb-contact .et_pb_row::before { width: 240px; height: 240px; right: -80px; top: auto; bottom: 30%; } } @media (max-width: 767px) { .cb-contact-card { grid-template-columns: 48px minmax(0, 1fr) 34px; column-gap: 14px; } .cb-contact-card .et_pb_icon_wrap { width: 48px; height: 48px; border-radius: 14px; } .cb-contact-card .et_pb_icon_wrap .et-pb-icon { font-size: 19px !important; } .cb-contact-card::before { width: 34px; height: 34px; background-size: 14px; } .cb-contact .et_pb_contact_form { row-gap: 16px; } } @media (prefers-reduced-motion: reduce) { .cb-contact-card, .cb-contact-card::before, .cb-contact-card .et_pb_icon_wrap, .cb-contact .et_pb_contact_submit.et_pb_button, .cb-contact .et_pb_contact_submit.et_pb_button::after { transition: none !important; } } /* Contact form (cb-contact), refinements */ .cb-contact-intro .et_pb_heading h2 { line-height: 1.12 !important; font-size: clamp(32px, 2.2vw + 14px, 46px) !important; } .cb-contact-card .et_pb_text p > span:first-child:not(:only-child) { display: none; } /* stray leading space in the email text */ .cb-contact-card .et_pb_text a, .cb-contact-card .et_pb_text a span { white-space: nowrap; font-size: clamp(15px, .5vw + 11px, 17px) !important; } .cb-contact .et_pb_contact_form .input::placeholder { font-family: "Poppins", "Open Sans", sans-serif !important; font-size: 15px !important; } .cb-contact .et_pb_contact_form select.input:has(option[value=""]:checked) { color: rgba(91, 95, 134, .75) !important; } .cb-contact .et_pb_contact_form select.input option { color: #1c1845; } .cb-contact .et_pb_button_wrapper { min-width: 220px; } html body .cb-contact .et_pb_contact_form_container .et_pb_contact_submit.et_pb_button::after, html body .cb-contact .et_pb_contact_form_container .et_pb_contact_submit.et_pb_button:hover::after { display: inline-block !important; } @media (max-width: 767px) { .cb-contact .et_pb_button_wrapper { width: 100%; } } /* Size the phone number / email from the real column width so the address never breaks */ .cb-contact-intro { container-type: inline-size; } .cb-contact-card .et_pb_text a, .cb-contact-card .et_pb_text a span { font-size: clamp(13px, calc((100cqi - 180px) / 14.4), 17px) !important; } @container (max-width: 399px) { .cb-contact-card { grid-template-columns: 48px minmax(0, 1fr); } .cb-contact-card::before { display: none; } .cb-contact-card .et_pb_text a, .cb-contact-card .et_pb_text a span { font-size: clamp(13px, calc((100cqi - 120px) / 14.4), 17px) !important; } } .cb-contact .et_pb_contact_submit.et_pb_button { line-height: 1.2 !important; } @media (max-width: 767px) { @container (max-width: 399px) { .cb-contact-card .et_pb_text a, .cb-contact-card .et_pb_text a span { font-size: clamp(13px, calc((100cqi - 104px) / 14.2), 17px) !important; } } } /* Send button arrow: cancel Divi's translateY(-50%) icon offset so it sits on the text's centre line, and slide only sideways on hover (no vertical jump). */ html body .cb-contact .et_pb_contact_form_container .et_pb_contact_submit.et_pb_button::after { top: auto !important; translate: none !important; align-self: center !important; transform: translate3d(0, 0, 0) !important; transition: transform .45s cubic-bezier(.2, .9, .3, 1.35) !important; } html body .cb-contact .et_pb_contact_form_container .et_pb_contact_submit.et_pb_button:hover::after, html body .cb-contact .et_pb_contact_form_container .et_pb_contact_submit.et_pb_button:focus-visible::after { transform: translate3d(5px, 0, 0) !important; } html body .cb-contact .et_pb_contact_form_container .et_pb_contact_submit.et_pb_button:active::after { transform: translate3d(2px, 0, 0) !important; transition-duration: .12s !important; } .cb-contact .et-pb-contact-message > p:only-child { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 16px; padding: 18px 20px; } .cb-contact .et-pb-contact-message > p:only-child::before { content: ""; flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--cb-amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1845' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 16px no-repeat; } /* ===================================================================== * Policy pages (cb-legal): Privacy Policy and Cookie Policy. * Native Divi: section "… content", row "Policy layout", columns "On this page" * and "… text", group "At a glance", one Text module per policy section. * ===================================================================== */ .cb-legal { --cb-navy: #1c1845; --cb-blue: #0153a5; --cb-amber: #fdb44a; --cb-ink-soft: #4d5178; --cb-spring: cubic-bezier(.2, .9, .3, 1.25); position: relative; isolation: isolate; background: radial-gradient(40% 30% at 0% 0%, rgba(253, 180, 74, .14), transparent 70%), radial-gradient(40% 40% at 100% 60%, rgba(1, 83, 165, .10), transparent 70%), linear-gradient(180deg, #f4f8fd 0%, #eef4fb 100%) !important; } .cb-legal::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .3; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .09 0 0 0 0 .27 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Table of contents: sticky card on desktop */ .cb-legal-toc { align-self: flex-start; } @media (min-width: 981px) { .cb-legal-toc { position: sticky !important; top: 120px; } } .cb-legal-toc__list { background: #fff; border: 1px solid rgba(28, 24, 69, .08); border-radius: 20px; padding: 24px 22px 18px; box-shadow: 0 1px 2px rgba(28, 24, 69, .05), 0 14px 32px -18px rgba(28, 24, 69, .22); } .cb-legal-toc__list .cb-legal-toc__title { font-family: "Poppins", "Open Sans", sans-serif; font-size: 12px !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cb-ink-soft) !important; margin: 0 0 12px !important; padding: 0 !important; } .cb-legal-toc__list ol { list-style: none; margin: 0 !important; padding: 0 !important; counter-reset: toc; } .cb-legal-toc__list li { counter-increment: toc; margin: 0 !important; padding: 0 !important; } .cb-legal-toc__list li a { position: relative; display: flex; gap: 10px; align-items: baseline; padding: 8px 10px !important; border-radius: 10px; font-family: "Poppins", "Open Sans", sans-serif; font-size: 14px !important; line-height: 1.45 !important; font-weight: 500; color: var(--cb-navy) !important; text-decoration: none !important; min-width: 0 !important; } .cb-legal-toc__list li a::before { content: counter(toc, decimal-leading-zero); flex: 0 0 auto; font-size: 11px; font-weight: 700; color: rgba(28, 24, 69, .45); letter-spacing: .04em; } .cb-legal-toc__list li a::after { /* hover / active pill, faded with opacity */ content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #ecf5fd; opacity: 0; transition: opacity .25s ease; } .cb-legal-toc__list li a:hover::after, .cb-legal-toc__list li a.is-active::after { opacity: 1; } .cb-legal-toc__list li a.is-active { color: var(--cb-blue) !important; } .cb-legal-toc__list li a.is-active::before { color: var(--cb-amber); } .cb-legal-toc__list li a:focus-visible { outline: 3px solid var(--cb-blue); outline-offset: 1px; } .cb-legal-toc__list li a:active { transform: scale(.98); } @media (max-width: 980px) { .cb-legal-toc__list ol { columns: 2; column-gap: 12px; } .cb-legal-toc__list li { break-inside: avoid; } } @media (max-width: 600px) { .cb-legal-toc__list ol { columns: 1; } .cb-legal-toc__list { padding: 20px 14px 12px; } } /* At a glance: navy card with amber checks */ .cb-legal-summary { position: relative; overflow: hidden; margin-bottom: 20px !important; box-shadow: 0 2px 4px rgba(28, 24, 69, .12), 0 30px 60px -30px rgba(28, 24, 69, .55); background-image: radial-gradient(60% 80% at 100% 0%, rgba(253, 180, 74, .22), transparent 70%), radial-gradient(50% 70% at 0% 100%, rgba(1, 83, 165, .45), transparent 70%) !important; } .cb-legal-summary h2 { font-size: clamp(22px, 1.2vw + 14px, 28px) !important; line-height: 1.2 !important; letter-spacing: -.02em; color: #fff !important; margin: 0 0 14px !important; padding: 0 !important; } .cb-legal-summary .cb-legal-checks { list-style: none; margin: 0 !important; padding: 0 !important; } .cb-legal-summary .cb-legal-checks li { position: relative; padding: 6px 0 6px 34px !important; margin: 0 !important; font-size: 15px !important; line-height: 1.6 !important; color: rgba(255, 255, 255, .9) !important; } .cb-legal-summary .cb-legal-checks li::before { content: ""; position: absolute; left: 0; top: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--cb-amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1845' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat; } .cb-legal-summary a { color: var(--cb-amber) !important; text-decoration: underline !important; text-underline-offset: 3px; padding: 0 !important; display: inline !important; } /* Policy sections: elevated cards */ .cb-legal-section { background: #fff; border: 1px solid rgba(28, 24, 69, .07); border-radius: 22px; padding: 34px 40px 26px !important; margin-bottom: 16px !important; box-shadow: 0 1px 2px rgba(28, 24, 69, .04), 0 12px 30px -20px rgba(28, 24, 69, .2); } .cb-legal-section h2 { display: flex; align-items: center; gap: 14px; scroll-margin-top: 120px; font-size: clamp(21px, .9vw + 14px, 26px) !important; line-height: 1.25 !important; letter-spacing: -.02em; color: var(--cb-navy) !important; margin: 0 0 16px !important; padding: 0 !important; } .cb-legal-num { flex: 0 0 auto; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--cb-navy); background: linear-gradient(140deg, #ffc56b, var(--cb-amber) 60%, #f39a1f); box-shadow: 0 8px 16px -8px rgba(243, 154, 31, .7); } .cb-legal-section h3 { font-size: 17px !important; line-height: 1.4 !important; color: var(--cb-navy) !important; margin: 22px 0 8px !important; padding: 0 !important; } .cb-legal-section p, .cb-legal-section li { font-size: 16px !important; line-height: 1.75 !important; color: var(--cb-ink-soft) !important; } .cb-legal-section p { margin: 0 0 14px !important; padding: 0 !important; } .cb-legal-section strong { color: var(--cb-navy); font-weight: 600; } .cb-legal-section ul { list-style: none; margin: 0 0 14px !important; padding: 0 !important; } .cb-legal-section ul li { position: relative; padding: 3px 0 3px 22px !important; margin: 0 !important; } .cb-legal-section ul li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 8px; height: 8px; border-radius: 50%; background: var(--cb-amber); box-shadow: 0 0 0 3px rgba(253, 180, 74, .22); } .cb-legal-section a:not(.cb-legal-btn) { color: var(--cb-blue) !important; text-decoration: underline !important; text-decoration-thickness: 1px; text-underline-offset: 3px; display: inline !important; padding: 0 !important; min-width: 0 !important; } .cb-legal-section a:not(.cb-legal-btn):hover { color: var(--cb-navy) !important; } .cb-legal-section a:focus-visible { outline: 3px solid var(--cb-blue); outline-offset: 2px; border-radius: 4px; } .cb-legal-section code { font-size: 13px; background: #ecf5fd; color: var(--cb-navy); padding: 2px 6px; border-radius: 6px; white-space: nowrap; } .cb-legal-updated { font-size: 14px !important; font-weight: 600; color: var(--cb-navy) !important; margin-top: 18px !important; } /* Tables: scroll sideways on small screens instead of squashing */ .cb-legal-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 6px 0 16px; border: 1px solid rgba(28, 24, 69, .1); border-radius: 16px; } .cb-legal-table table { width: 100%; min-width: 520px; border-collapse: collapse; margin: 0 !important; border: 0 !important; } .cb-legal-table th, .cb-legal-table td { text-align: left; vertical-align: top; padding: 12px 16px !important; font-size: 14.5px !important; line-height: 1.55 !important; border: 0 !important; border-bottom: 1px solid rgba(28, 24, 69, .08) !important; } .cb-legal-table th { background: #1c1845; color: #fff !important; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 13px !important; letter-spacing: .02em; } .cb-legal-table td { color: var(--cb-ink-soft); background: #fff; } .cb-legal-table tbody tr:nth-child(even) td { background: #f8fbfe; } .cb-legal-table tbody tr:last-child td { border-bottom: 0 !important; } .cb-legal-table td:first-child { color: var(--cb-navy); font-weight: 600; } /* "Open cookie settings" button inside the policies */ .cb-legal-btn { display: inline-flex !important; align-items: center; gap: 10px; min-height: 48px; padding: 12px 22px !important; border-radius: 999px; font-family: "Poppins", sans-serif; font-size: 15px !important; font-weight: 600; color: #fff !important; text-decoration: none !important; background: linear-gradient(120deg, #1c1845, #2a2470 45%, #0153a5); box-shadow: 0 14px 26px -14px rgba(1, 83, 165, .65); transition: transform .5s var(--cb-spring); } .cb-legal-btn::before { content: ""; width: 18px; height: 18px; background: var(--cb-amber); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E") center / contain no-repeat; } .cb-legal-btn:hover { transform: translateY(-2px); } .cb-legal-btn:active { transform: translateY(0) scale(.98); } .cb-legal-btn:focus-visible { outline: 3px solid var(--cb-amber); outline-offset: 3px; } @media (max-width: 767px) { .cb-legal-section { padding: 24px 20px 16px !important; border-radius: 18px; } .cb-legal-section h2 { gap: 12px; } .cb-legal-num { width: 34px; height: 34px; border-radius: 10px; font-size: 13px; } .cb-legal-section p, .cb-legal-section li { font-size: 15.5px !important; } .cb-legal-btn { width: 100%; justify-content: center; } } /* ===================================================================== * Cookie consent banner (cb-cc) - inc/cookie-consent.php + assets/js/cookie-consent.js * Floating card bottom-left on desktop, bottom sheet on phones. * ===================================================================== */ .cb-cc { --cb-navy: #1c1845; --cb-blue: #0153a5; --cb-amber: #fdb44a; --cb-ink-soft: #4d5178; position: fixed; z-index: 100000; left: 24px; bottom: 24px; width: min(440px, calc(100vw - 48px)); font-family: "Poppins", "Open Sans", system-ui, sans-serif; opacity: 0; transform: translateY(24px) scale(.98); transition: opacity .3s ease, transform .55s cubic-bezier(.2, .9, .3, 1.2); } .cb-cc[hidden] { display: none !important; } .cb-cc.is-visible { opacity: 1; transform: none; } .cb-cc__card { position: relative; background: #fff; color: var(--cb-navy); border-radius: 24px; padding: 24px 24px 20px; border: 1px solid rgba(28, 24, 69, .08); box-shadow: 0 2px 4px rgba(28, 24, 69, .06), 0 24px 48px -16px rgba(28, 24, 69, .32), 0 60px 100px -50px rgba(1, 83, 165, .35); max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; } .cb-cc__card::before { /* brand accent line */ content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--cb-amber), #f39a1f 40%, var(--cb-blue)); } .cb-cc__card:focus { outline: none; } .cb-cc__card:focus-visible { outline: 3px solid var(--cb-blue); outline-offset: 3px; } .cb-cc__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .cb-cc__icon { flex: 0 0 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--cb-navy); background: linear-gradient(140deg, #ffc56b, var(--cb-amber) 60%, #f39a1f); box-shadow: 0 8px 16px -8px rgba(243, 154, 31, .7); } .cb-cc__title { font-family: "Open Sans", sans-serif; font-size: 19px !important; line-height: 1.25 !important; font-weight: 700; letter-spacing: -.02em; color: var(--cb-navy) !important; margin: 0 !important; padding: 0 !important; } .cb-cc__text { font-size: 14px !important; line-height: 1.65 !important; color: var(--cb-ink-soft) !important; margin: 0 0 16px !important; padding: 0 !important; } .cb-cc__text a { color: var(--cb-blue) !important; text-decoration: underline !important; text-underline-offset: 3px; font-weight: 500; } .cb-cc__text a:focus-visible { outline: 2px solid var(--cb-blue); outline-offset: 2px; border-radius: 3px; } /* Categories */ .cb-cc__prefs { display: grid; gap: 10px; margin: 0 0 16px; } .cb-cc__prefs[hidden] { display: none; } .cb-cc__cat { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: #f4f8fd; border: 1px solid rgba(28, 24, 69, .06); } .cb-cc__cat-text { flex: 1 1 auto; min-width: 0; } .cb-cc__cat-title { display: block; font-size: 14px; font-weight: 600; color: var(--cb-navy); cursor: pointer; } .cb-cc__cat-desc { font-size: 12.5px !important; line-height: 1.5 !important; color: var(--cb-ink-soft) !important; margin: 2px 0 0 !important; padding: 0 !important; } .cb-cc__switch { -webkit-appearance: none; appearance: none; flex: 0 0 46px; width: 46px; height: 28px; margin: 0; border-radius: 999px; cursor: pointer; position: relative; background: #c9cfe2; border: 0; box-shadow: inset 0 1px 2px rgba(28, 24, 69, .18); } .cb-cc__switch::before { /* on-state fill, faded with opacity */ content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, var(--cb-navy), var(--cb-blue)); opacity: 0; transition: opacity .25s ease; } .cb-cc__switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(28, 24, 69, .3); transition: transform .45s cubic-bezier(.2, .9, .3, 1.3); } .cb-cc__switch:checked::before { opacity: 1; } .cb-cc__switch:checked::after { transform: translateX(18px); } .cb-cc__switch:hover:not(:disabled)::after { box-shadow: 0 2px 6px rgba(28, 24, 69, .4), 0 0 0 4px rgba(1, 83, 165, .12); } .cb-cc__switch:focus-visible { outline: 3px solid var(--cb-amber); outline-offset: 2px; } .cb-cc__switch:active:not(:disabled)::after { transform: scale(.9); } .cb-cc__switch:checked:active:not(:disabled)::after { transform: translateX(18px) scale(.9); } .cb-cc__switch:disabled { cursor: not-allowed; opacity: .55; } /* Buttons: Accept and Reject carry equal weight */ .cb-cc__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cb-cc__btn { min-height: 48px; padding: 10px 16px; border-radius: 999px; border: 0; cursor: pointer; font-family: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.2; letter-spacing: .01em; transition: transform .45s cubic-bezier(.2, .9, .3, 1.25); } .cb-cc__btn[hidden] { display: none; } .cb-cc__btn:hover { transform: translateY(-2px); } .cb-cc__btn:active { transform: translateY(0) scale(.97); transition-duration: .12s; } .cb-cc__btn:focus-visible { outline: 3px solid var(--cb-amber); outline-offset: 2px; } .cb-cc__btn--primary { color: #fff; background: linear-gradient(120deg, var(--cb-navy), #2a2470 45%, var(--cb-blue)); box-shadow: 0 12px 22px -12px rgba(1, 83, 165, .7); } .cb-cc__btn--secondary { color: var(--cb-navy); background: #ecf5fd; box-shadow: inset 0 0 0 1.5px rgba(28, 24, 69, .55); } .cb-cc__btn--ghost, .cb-cc__btn--save { grid-column: 1 / -1; } .cb-cc__btn--ghost { min-height: 40px; color: var(--cb-navy); background: transparent; text-decoration: underline; text-underline-offset: 4px; font-weight: 500; } .cb-cc__btn--save { color: var(--cb-navy); background: linear-gradient(140deg, #ffc56b, var(--cb-amber) 60%, #f39a1f); box-shadow: 0 12px 22px -12px rgba(243, 154, 31, .8); } .cb-cc__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0 !important; padding: 0 !important; } /* Phones: bottom sheet; the WhatsApp button moves above it */ @media (max-width: 600px) { .cb-cc { left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); width: auto; } .cb-cc__card { padding: 22px 18px 16px; border-radius: 22px; max-height: calc(100vh - 20px); } .cb-cc__title { font-size: 17px !important; } .cb-cc__text { font-size: 13.5px !important; } } .cb-wa { transition: transform .5s cubic-bezier(.2, .9, .3, 1.2); } @media (max-width: 600px) { body.cb-cc-open .cb-wa { transform: translateY(calc(-1 * var(--cb-cc-h, 0px) - 4px)); } } @media (prefers-reduced-motion: reduce) { .cb-cc, .cb-cc__btn, .cb-cc__switch::after, .cb-cc__switch::before, .cb-wa, .cb-legal-btn { transition: none !important; } } @media print { .cb-cc { display: none !important; } } /* Footer legal links */ .cb-footer-legal a { white-space: nowrap; } .cb-footer-legal .cb-footer-legal__sep { opacity: .45; margin: 0 8px; } .cb-footer-legal a { color: rgba(255, 255, 255, .82) !important; text-decoration: none !important; padding: 10px 2px !important; display: inline-block; min-width: 0 !important; } .cb-footer-legal a:hover { color: #fdb44a !important; } .cb-footer-legal a:focus-visible { outline: 2px solid #fdb44a; outline-offset: 2px; border-radius: 4px; } .cb-footer-legal a:active { opacity: .75; } /* Policy pages: refinements */ .cb-legal-section h2, .cb-legal-summary h2 { font-weight: 700 !important; } .cb-legal-section h3 { font-weight: 700 !important; } .cb-legal-summary a[href^="mailto:"], .cb-legal-section a[href^="mailto:"] { white-space: nowrap; } @media (max-width: 600px) { /* tables become stacked cards: "Column: value" per line */ .cb-legal-table { border: 0; border-radius: 0; overflow: visible; } .cb-legal-table table { min-width: 0; } .cb-legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .cb-legal-table table, .cb-legal-table tbody, .cb-legal-table tr, .cb-legal-table td { display: block; width: 100%; box-sizing: border-box; } .cb-legal-table tr { margin: 0 0 10px; border: 1px solid rgba(28, 24, 69, .1); border-radius: 14px; overflow: hidden; background: #fff; } .cb-legal-table tbody tr:nth-child(even) td { background: #fff; } .cb-legal-table td { padding: 10px 14px !important; border-bottom: 1px solid rgba(28, 24, 69, .06) !important; } .cb-legal-table td:last-child { border-bottom: 0 !important; } .cb-legal-table td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: "Poppins", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #0153a5; } .cb-legal-table td:first-child { background: #1c1845 !important; color: #fff !important; } .cb-legal-table td:first-child::before { color: #fdb44a; } .cb-legal-table td:first-child code { background: rgba(255, 255, 255, .12); color: #fff; } } /* Cookie switches: beat site-wide input styles on phones */ html body .cb-cc input.cb-cc__switch { -webkit-appearance: none !important; appearance: none !important; box-sizing: border-box !important; width: 46px !important; height: 28px !important; min-width: 46px !important; min-height: 0 !important; max-width: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 999px !important; outline-offset: 2px; background: #c9cfe2 !important; font-size: 0 !important; line-height: 0 !important; } /* Footer "Contact" block under Follow Us (same look as the old contact line) */ .et-l--footer .cb-footer-contact a { color: #96C5F2 !important; text-decoration: none; transition: color 0.2s ease; } .et-l--footer .cb-footer-contact a:hover, .et-l--footer .cb-footer-contact a:focus-visible { color: #FDB44A !important; } .et-l--footer .cb-footer-contact a:focus-visible { outline: 2px solid #FDB44A; outline-offset: 2px; } .et-l--footer .cb-footer-contact a:active { opacity: .75; } .et-l--footer .cb-footer-contact, .et-l--footer .cb-footer-contact p, .et-l--footer .cb-footer-contact a { font-weight: 300 !important; font-size: 15px !important; line-height: 1.75 !important; } .et-l--footer .cb-footer-contact p { color: #ffffff !important; } .et-l--footer .cb-footer-contact a[href^="mailto:"] { white-space: nowrap; } @media (min-width: 981px) and (max-width: 1500px) { .et-l--footer .cb-footer-contact a[href^="mailto:"] { font-size: 14px !important; } } @media (max-width: 767px) { .cb-footer-legal .cb-footer-legal__sep { display: none; } .cb-footer-legal a { margin: 0 10px; } } /* ===================================================================== * Footer links: accessible hover, focus and active states (all footer links). * - Hover: amber colour + underline that grows from the left (not colour alone). * - Keyboard focus: 2px amber ring with offset, same underline. * - Active: slight press. Motion: transform/opacity only; off for reduced motion. * ===================================================================== */ .et-l--footer .et_pb_text a { position: relative; display: inline-block; padding-top: 2px !important; padding-bottom: 4px !important; text-decoration: none !important; transition: color .2s ease, transform .2s ease; } .et-l--footer .et_pb_text a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 2px; border-radius: 2px; background: #fdb44a; transform: scaleX(0); transform-origin: left center; transition: transform .35s cubic-bezier(.2, .9, .3, 1.15); pointer-events: none; } .et-l--footer .et_pb_text a:hover, .et-l--footer .et_pb_text a:focus-visible { color: #fdb44a !important; } .et-l--footer .et_pb_text a:hover::after, .et-l--footer .et_pb_text a:focus-visible::after { transform: scaleX(1); } .et-l--footer .et_pb_text a:active { transform: translateY(1px); opacity: .8; } /* Legal links keep their 10px tap padding: underline sits under the text */ .et-l--footer .cb-footer-legal a { padding-top: 10px !important; padding-bottom: 10px !important; } .et-l--footer .cb-footer-legal a::after { bottom: 8px; } /* Credit link: readable contrast on navy (was 2.2:1) */ .et-l--footer .et_pb_text a[href*="floux.net"] { color: #96C5F2 !important; } .et-l--footer .et_pb_text a[href*="floux.net"]:hover, .et-l--footer .et_pb_text a[href*="floux.net"]:focus-visible { color: #fdb44a !important; } /* One clear focus ring for every footer link, icon and the logo */ .et-l--footer a:focus { outline: none; } .et-l--footer a:focus-visible { outline: 2px solid #fdb44a !important; outline-offset: 4px; border-radius: 6px; } /* Social icons: lift, amber glyph, soft ring on hover / focus */ .et-l--footer .et_pb_social_media_follow li a.icon { transition: transform .35s cubic-bezier(.2, .9, .3, 1.3); border-radius: 50%; } .et-l--footer .et_pb_social_media_follow li a.icon::before { transition: color .2s ease; } .et-l--footer .et_pb_social_media_follow li a.icon::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: rgba(253, 180, 74, .14); box-shadow: inset 0 0 0 1px rgba(253, 180, 74, .45); opacity: 0; transform: scale(.7); transition: opacity .25s ease, transform .35s cubic-bezier(.2, .9, .3, 1.3); pointer-events: none; } .et-l--footer .et_pb_social_media_follow li a.icon:hover, .et-l--footer .et_pb_social_media_follow li a.icon:focus-visible { transform: translateY(-3px); } .et-l--footer .et_pb_social_media_follow li a.icon:hover::before, .et-l--footer .et_pb_social_media_follow li a.icon:focus-visible::before { color: #fdb44a !important; } .et-l--footer .et_pb_social_media_follow li a.icon:hover::after, .et-l--footer .et_pb_social_media_follow li a.icon:focus-visible::after { opacity: 1; transform: scale(1); } .et-l--footer .et_pb_social_media_follow li a.icon:active { transform: translateY(0) scale(.94); } /* Logo link */ .et-l--footer .et_pb_image a { display: inline-block; transition: opacity .2s ease, transform .3s ease; } .et-l--footer .et_pb_image a:hover { opacity: .85; } .et-l--footer .et_pb_image a:active { transform: scale(.98); } @media (prefers-reduced-motion: reduce) { .et-l--footer .et_pb_text a, .et-l--footer .et_pb_text a::after, .et-l--footer .et_pb_social_media_follow li a.icon, .et-l--footer .et_pb_social_media_follow li a.icon::after, .et-l--footer .et_pb_image a { transition: none !important; } } /* Links inside light-on-dark text (Divi preset "Body-light"): readable on navy, underlined, amber on hover */ .preset--module--divi-text--aze1jtwvgg a:not(.et_pb_button) { color: #96c5f2 !important; text-decoration: underline !important; text-decoration-thickness: 1px; text-underline-offset: 3px; } .preset--module--divi-text--aze1jtwvgg a:not(.et_pb_button):hover, .preset--module--divi-text--aze1jtwvgg a:not(.et_pb_button):focus-visible { color: #fdb44a !important; } .preset--module--divi-text--aze1jtwvgg a:not(.et_pb_button):focus-visible { outline: 2px solid #fdb44a; outline-offset: 2px; border-radius: 3px; } .preset--module--divi-text--aze1jtwvgg a:not(.et_pb_button):active { opacity: .8; }