/* Custom Fonts */ @font-face { font-family: 'wspserif'; src: url('../fonts/wspserif.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'wspregular'; src: url('../fonts/wspregular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'wsplight'; src: url('../fonts/wsplight.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } /* BODY & HTML */ body { background:#fcfcfc; } a { color:#333; text-decoration: none; } a:visited { text-decoration: underline; } a:hover { color:#00A9F4; text-decoration: none; } a:active { text-decoration: none; } mark { background-color: #BEE0EE; padding: 2px 4px; border-radius: 3px; } .mycursor { cursor:pointer; } .noselect { -webkit-touch-callout:none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .my-rotate-90 { transform: rotate(90deg); } ::selection { background: #FDD8DC; color: #000; } ::-moz-selection { background: #FDD8DC; color: #333; } /* Watermarks */ /* WATERMARKS */ .fullhero_watermark { background: #051C2C; background: linear-gradient(180deg, rgba(5, 28, 44, 0.9) 24%, rgba(5, 28, 44, 0.8) 50%, rgba(5, 28, 44, 0) 100%); } .watermark_fixed { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .watermark_1 { background: #051C2C; background: linear-gradient(0deg, rgba(5, 28, 44, 0.9) 30%, rgba(5, 28, 44, 0.8) 50%, rgba(5, 28, 44, 0) 100%); } .watermark_2 { background: #051C2C; background: linear-gradient(180deg, rgba(5, 28, 44, 0.9) 30%, rgba(5, 28, 44, 0.8) 50%, rgba(5, 28, 44, 0.35) 100%); } .watermark_4 { background: #051C2C; background: linear-gradient(180deg, rgba(5, 28, 44, 0.9) 30%, rgba(5, 28, 44, 0.8) 50%, rgba(5, 28, 44, 0.35) 100%); } /* Backgrounds */ .bg_aside { background:#FFF; } .bg_0 { background: #051C2C; } .bg_1 { background: #2255FF; } .bg_2 { background: #00A9F4; } .bg_3 { background: #9ED0E6; } .bg_4 { background: #BEE0EE; } .bg_5 { background: #B1E4FB; } /* Focus */ .bg_6 { background: #D8EFEF; } .bg_7 { background: #D9DEDD; } /* Case */ .bg_8 { background: #B2BDBA; } .bg_9 { background: #9CABA7; } /* Report */ .bg_10 { background: #572F89; } .bg_11 { background: #CAB3E5; } .bg_12 { background: #3B2654; } .bg_13 { background: #0A1B48; } .bg_14 { background: #041725; } .bg_15 { background: #020712; } .bg_16 { background: #4C1E4F; } .bg_17 { background: #B5A886; } .bg_18 { background: #022B3A; } .bg_19 { background: #393E41; } .bg_20 { background: #D8F1FD; } .c_0 { color: #051C2C; } .c_1 { color: #2255FF; } .c_2 { color: #00A9F4; } .c_3 { color: #9ED0E6; } .c_4 { color: #BEE0EE; } .c_5 { color: #B1E4FB; } /* Focus */ .c_6 { color: #D8EFEF; } .c_7 { color: #D9DEDD; } /* Case */ .c_8 { color: #B2BDBA; } .c_9 { color: #9CABA7; } /* Report */ .c_10 { color: #572F89; } .c_11 { color: #CAB3E5; } .c_12 { color: #3B2654; } .c_13 { color: #0A1B48; } .c_14 { color: #041725; } .c_15 { color: #020712; } .c_16 { color: #4C1E4F; } .c_17 { color: #B5A886; } .c_18 { color: #022B3A; } .c_19 { color: #393E41; } .c_20 { color: #D8F1FD; } /* Palette Diagram Base */ .diagram_palette_base_0 { cursor: pointer; background:#051C2C; color:#FFF; transition: 0.3s ease; } .diagram_palette_base_1 { cursor: pointer; background:#2255FF; color:#FFF; transition: 0.3s ease; } .diagram_palette_base_2 { cursor: pointer; background:#00A9F4; color:#000; transition: 0.3s ease; } .diagram_palette_base_3 { cursor: pointer; background:#9ED0E6; color:#000; transition: 0.3s ease; } .diagram_palette_base_4 { cursor: pointer; background:#572F89; color:#FFF; transition: 0.3s ease; } .diagram_palette_base_5 { cursor: pointer; background:#FFCE00; color:#000; transition: 0.3s ease; } /* Hover Diagram Palette Base */ .diagram_palette_base_0:hover, .diagram_palette_base_1:hover, .diagram_palette_base_2:hover, .diagram_palette_base_3:hover, .diagram_palette_base_4:hover, .diagram_palette_base_5:hover { opacity: 0.7; } /* ROOT */ :root { --wsp_hp_title:clamp(3.4rem, 3vw, 3.6rem); --wsp_hp_subtitle:clamp(1.6rem, 3vw, 1.6rem); --wsp_hero_title:clamp(3.2rem, 3vw, 3.2rem); --wsp_hero_subtitle:clamp(1.6rem, 3vw, 1.6rem); --wsp_title:clamp(2.2rem, 3vw, 2.4rem); --wsp_title_md:clamp(2rem, 3vw, 2rem); --wsp_title_sm:clamp(1.6rem, 3vw, 1.6rem); --wsp_title_xs:clamp(1.2rem, 3vw, 1.2rem); --wsp_subtitle:clamp(1.5rem, 3vw, 1.5rem); --wsp_text:clamp(1.2rem, 3vw, 1.2rem); --wsp_text_md:clamp(1.1rem, 3vw, 1.1rem); --wsp_note:clamp(0.9rem, 3vw, 0.9rem); --wsp_card_title:clamp(1.6rem, 3vw, 1.6rem); --wsp_card_title_serif:clamp(1.8rem, 3vw, 2rem); --wsp_card_text:clamp(1.10rem, 3vw, 1.10rem); --wsp_citation:clamp(1.6rem, 3vw, 1.6rem); } .wsp_hp_title { font-family: wspserif, serif; font-size: var(--wsp_hp_title); font-weight: normal; } .wsp_hp_subtitle { font-family: wsplight, sans-serif; font-size: var(--wsp_hp_subtitle); font-weight: normal; } .wsp_hero_title { font-family: wspserif, serif; font-size: var(--wsp_hero_title); font-weight: normal; } .wsp_hero_subtitle { font-family: wsplight, sans-serif; font-size: var(--wsp_hero_subtitle); font-weight: normal; } .wsp_title { font-family: wspserif, serif; font-size: var(--wsp_title); font-weight: normal; } .wsp_title_md { font-family: wspserif, serif; font-size: var(--wsp_title_md); font-weight: normal; } .wsp_title_sm { font-family: wspserif, serif; font-size: var(--wsp_title_sm); font-weight: normal; } .wsp_title_xs { font-family: wspserif, serif; font-size: var(--wsp_title_xs); font-weight: normal; } .wsp_subtitle { font-family: wsplight, sans-serif; font-size: var(--wsp_subtitle); font-weight: normal; } .wsp_text { font-family: wspregular, sans-serif; font-size: var(--wsp_text); font-weight: normal; } .wsp_text_md { font-family: wspregular, sans-serif; font-size: var(--wsp_text_md); font-weight: normal; } .wsp_note { font-family: wspregular, sans-serif; font-size: var(--wsp_note); font-weight: normal; } .wsp_card_title_serif { font-family: wspserif, serif; font-size: var(--wsp_card_title_serif); font-weight: normal; } .wsp_card_title { font-family: wspregular, sans-serif; font-size: var(--wsp_card_title); font-weight: normal; } .wsp_card_text { font-family: wspregular, sans-serif; font-size: var(--wsp_card_text); font-weight: normal; } .wsp_citation { font-family: wspserif, serif; font-style: italic; font-size: var(--wsp_citation); font-weight: normal; } /* Logos */ .wsp_logo_header { font-family: wspserif, serif; font-size: 2rem; font-weight: normal; } .wsp_logo_footer { font-family: wspserif, serif; font-size: 1.4rem; font-weight: normal; } /* Text Colors */ .wsp_text_hl_primary { color:#2255FF; } /* Footer fonts */ .wsp_footer_link { cursor: pointer; color:#000; font-family: wspregular, sans-serif; font-size: 1.3rem; font-weight: bold; } .wsp_footer_link:hover { text-decoration: underline; color:#2255FF; } /* Box Solutions */ .wsp_card_solutions { cursor: pointer; border: 1px solid #ddd; padding: 0px; -webkit-box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.0); -moz-box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.0); box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.0); } .wsp_card_solutions:hover { -webkit-box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.4); -moz-box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.4); box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.4); transition: all 0.1s linear; } .card.wsp_card_solutions:hover { box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.4) !important; } .wsp_card_image_wrapper { overflow: hidden; } .wsp_card_image { transition: transform 0.35s ease, filter 0.35s ease; } .wsp_card_solutions.card-image-zoom:hover .wsp_card_image { transform: scale(1.08); } .wsp_card_solutions.card-image-bn-effect .wsp_card_image { filter: grayscale(100%); } .wsp_card_solutions.card-image-bn-effect:hover .wsp_card_image { filter: grayscale(0%); } .wsp_card_solutions:hover .wsp_card_title { color: #2255FF; transition: color 0.25s ease; } .card.card-image-zoom:hover .wsp_card_bg { transform: scale(1.08); } .card.card-image-bn-effect .wsp_card_bg { filter: grayscale(100%); } .card.card-image-bn-effect:hover .wsp_card_bg { filter: grayscale(0%); } .card:hover .wsp_card_title { color: #2255FF; transition: color 0.25s ease; } .wsp_card_image_wrapper { overflow: hidden; } .wsp_card_bg { width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; transition: transform 0.35s ease, filter 0.35s ease; } .wsp_card_solutions.card-image-zoom:hover .wsp_card_bg { transform: scale(1.08); } .wsp_card_solutions.card-image-bn-effect .wsp_card_bg { filter: grayscale(100%); } .wsp_card_solutions.card-image-bn-effect:hover .wsp_card_bg { filter: grayscale(0%); } .wsp_card_solutions:hover .wsp_card_title { color: #2255FF; transition: color 0.25s ease; } /* Card Border Effects */ .card-body { position: relative; } .box_top_effect_1 { height: 4px; width: 0%; background:#2255FF; position: absolute; top: 0; left: 0; transition: width 0.3s ease; } .box_top_effect_2 { height: 4px; width: 0%; background:#00A9F4; position: absolute; top: 0; left: 0; transition: width 0.3s ease; } .box_top_effect_3 { height: 4px; width: 0%; background:#000; position: absolute; top: 0; left: 0; transition: width 0.3s ease; } .box_top_effect_4 { height: 4px; width: 0%; background:#FFF; position: absolute; top: 0; left: 0; transition: width 0.3s ease; } .card:hover .box_top_effect_1, .card:hover .box_top_effect_2, .card:hover .box_top_effect_3, .card:hover .box_top_effect_4 { width: 100%; } /* ICONS EFFECTS */ .icon_hwh svg { width: 32px; height: 32px; stroke-width: 0.5; stroke: #333; transition: transform 0.6s ease, stroke 0.4s ease; } .icon_keypillar svg { width: 80px; height: 80px; stroke-width: 0.5; stroke: #000; transition: transform 0.6s ease, stroke 0.4s ease; } .icon_keypillar2 svg { width: 80px; height: 80px; stroke-width: 0.5; stroke: #fff; transition: transform 0.6s ease, stroke 0.4s ease; } .icon_industry_links svg { width: 64px; height: 64px; stroke-width: 1; stroke: #000; transition: transform 0.6s ease, stroke 0.4s ease; } /* Effetto rotazione su keypillars */ .icon-card.rotate-effect:hover .icon_keypillar svg { transform: rotate(360deg); stroke: #2255FF; } .icon-card.rotate-effect:hover .icon_keypillar2 svg { transform: rotate(360deg); stroke: #00A9F4; } /* Effetto specchio (flip orizzontale) */ .icon-card.mirror-effect:hover .icon_keypillar svg { transform: scaleX(-1); stroke: #2255FF; } /* Base Parantesi Graffa */ .pgraph { --pgraph-color: #00A9F4; /* colore di default */ position: relative; padding-left: 20px; border-left: 6px solid var(--pgraph-color); display: inline-block; padding-top: 5%; padding-bottom: 5%; } .pgraph::before, .pgraph::after { content: ""; position: absolute; left: 0; height: 6px; width: 20px; background: var(--pgraph-color); } .pgraph::before { top: 0; transform: translateY(-2%); } .pgraph::after { bottom: 0; transform: translateY(2%); } /* HEADER */ #header1 { display: block; width: 100%; position: fixed; top:0px; left:0px; z-index: 9999999999; background:transparent; border:none; } .header_reading { width: 100%; background-color:transparent; } .header_reading h2 { text-align: center; } .progress-container { width: 100%; height:0px; background-color:transparent; border:none; } .progress-bar { height: 4px; background:#00A9F4; width: 0%; } .wsp_breadcumbs_borders { border:none; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;} /* PAGE EFFECTS */ .fade-up-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; will-change: opacity, transform; } .fade-up-on-scroll.visible { opacity: 1; transform: translateY(0); } /* ASIDE */ .wsp_aside_item_link { cursor: pointer; font-family: wspregular, sans-serif; font-size: 1.3rem; font-weight: normal; color:#000 } .wsp_aside_item_link:hover { color:#2255FF; background-color: rgba(255, 255, 255, .1) !important; } /* SOCIAL BUTTONS */ .btn-social { cursor: pointer; background-color: #000; transition: background-color 0.3s ease; } .btn-social:hover { background-color: #2255FF; } .btn-social-hero { cursor: pointer; background-color: #fff; transition: background-color 0.3s ease; } .btn-social-hero:hover { background-color: #2255FF; } .btn-social-hero img { filter: brightness(0) invert(0); transition: filter 0.3s ease; } .btn-social-hero:hover img { filter: brightness(0) invert(1); } .btn-social-white { cursor: pointer; background-color: #FFF; transition: background-color 0.3s ease; } .btn-social-white:hover { background-color: #2255FF; } .btn-social-hero.light { background-color: #fff; } .btn-social-hero.light img { filter: none; } .btn-social-hero.dark { background-color: #000; } .btn-social-hero.dark img { filter: none; } .btn-social-hero:hover { background-color: #2255FF; } .btn-social-hero:hover img { filter: brightness(0) invert(1); } /* Share On Twitter InPage */ #twitterTooltip { position: absolute; background-color: #FFF; color: #333; padding: 6px 10px; border-radius: 5px; cursor: pointer; font-size: 14px; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); display: none; } /* ReadingBar */ .readingBar { position: fixed; top: 5; left: 0; width: 100%; background: #FFF; padding: 15px 20px; text-align: left; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); transform: translateY(-100%); transition: transform 0.3s ease-in-out; z-index: 99999; } .readingBar.visible { transform: translateY(0); } /* Cookies Modal */ .modal-dialog-bottom { position: fixed; bottom: 0; width: 100%; max-width: 100%; transition: transform 0.4s ease-out; } .modal.fade .modal-dialog.modal-dialog-bottom { transform: translateY(100%); } .modal.show .modal-dialog.modal-dialog-bottom { transform: translateY(0); } /* Articles Not Free Area */ .full-content { display: block; } .partial-content { max-height: 700px; overflow: hidden; position: relative; } .partial-content::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 100px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); } /* Articles Not Free Area */ .full-content { display: block; } .partial-content { max-height: 700px; overflow: hidden; position: relative; } .partial-content::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 100px; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)); pointer-events: none; } .box-analytics-data-and-decision-intelligence { background-image:url('../../_assets/box/analytics-data-and-decision-intelligence.webp'); background-repeat: no-repeat; background-position: center; background-size: cover;}