{"id":4125,"date":"2024-12-03T01:25:35","date_gmt":"2024-12-03T01:25:35","guid":{"rendered":"https:\/\/whitewhale.com\/stacking-cards-with-color-overrides\/"},"modified":"2025-06-02T12:52:17","modified_gmt":"2025-06-02T12:52:17","slug":"stacking-cards-with-color-overrides","status":"publish","type":"page","link":"https:\/\/whitewhale.com\/ar\/stacking-cards-with-color-overrides\/","title":{"rendered":"Stacking Cards With Color Overrides"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"4125\" class=\"elementor elementor-4125\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f8963d3 e-flex e-con-boxed e-con e-parent\" data-id=\"f8963d3\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-a7ac077 e-con-full e-flex e-con e-child\" data-id=\"a7ac077\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-0904a4c e-con-full e-flex e-con e-child\" data-id=\"0904a4c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;sticky&quot;:&quot;top&quot;,&quot;sticky_offset&quot;:150,&quot;sticky_effects_offset&quot;:60,&quot;sticky_anchor_link_offset&quot;:24,&quot;sticky_parent&quot;:&quot;yes&quot;,&quot;sticky_on&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;]}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d31089b elementor-widget elementor-widget-heading\" data-id=\"d31089b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">The gateway To<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a56af3f elementor-widget elementor-widget-heading\" data-id=\"a56af3f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Your Complete Workplace Experience<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ab97428 elementor-widget elementor-widget-heading\" data-id=\"ab97428\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">Access everything you need to thrive at work - from seamless operations and career growth to financial flexibility and exclusive rewards - all in one integrated platform. <\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ddbc7a7 elementor-widget elementor-widget-button\" data-id=\"ddbc7a7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Access Workplace Hub<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-46c3fb1 elementor-widget__width-initial elementor-widget elementor-widget-ucaddon_stacking_cards\" data-id=\"46c3fb1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"ucaddon_stacking_cards.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- start Stacking Cards -->\n\t\t<link id='font-awesome-css' href='https:\/\/whitewhale.com\/wp-content\/plugins\/unlimited-elements-for-elementor-premium\/assets_libraries\/font-awesome5\/css\/fontawesome-all.min.css' type='text\/css' rel='stylesheet' >\n\t\t<link id='font-awesome-4-shim-css' href='https:\/\/whitewhale.com\/wp-content\/plugins\/unlimited-elements-for-elementor-premium\/assets_libraries\/font-awesome5\/css\/fontawesome-v4-shims.css' type='text\/css' rel='stylesheet' >\n\t\t<link id='fancybox-css' href='https:\/\/whitewhale.com\/wp-content\/plugins\/unlimited-elements-for-elementor-premium\/assets_libraries\/fancybox3\/jquery.fancybox.min.css' type='text\/css' rel='stylesheet' >\n\n\t\t\t<style type=\"text\/css\">\/* widget: Stacking Cards *\/\n\n#uc_stacking_cards_elementor_46c3fb1 {\n\twidth: 100%;\n\tmargin: 0 auto;\n\t--card-top-offset: 31px;\n    --card-height:480px;\n}\n\n@media (max-width: 1024px) {\n  #uc_stacking_cards_elementor_46c3fb1 {\n\t--card-top-offset:  31px;\n    --card-height:480px;\n  }\n}\n@media (max-width: 767px) {\n  #uc_stacking_cards_elementor_46c3fb1 {\n\t--card-top-offset:  31px;\n    --card-height:700px ;\n  }\n}\n\n\n#uc_stacking_cards_elementor_46c3fb1 .ue_cards_wrapper {\n    padding-bottom: calc(4 * var(--card-top-offset)); \/* Make place at bottom, as items will slide to that position*\/\n  \tdisplay: grid;\n    justify-items: center;\n\tgrid-template-columns: 1fr;\n    grid-template-rows: repeat(4, var(--card-height));\n    \/* margin-bottom: var(--card-margin);\n\tgap: var(--card-margin); *\/\n}\n\n#uc_stacking_cards_elementor_46c3fb1 .ue_stacking_card_item {\n\t\/*position: sticky;*\/\/* will be nabled in js to allow calc of start position of the cards *\/\n    padding-top: var(--card-top-offset);\n\ttransform-origin: 48% 0%;\n\twill-change: transform;\n}\n\n#uc_stacking_cards_elementor_46c3fb1 .ue_card_content {\n    height: var(--card-height);\n    min-height: var(--card-height);\n\toverflow: hidden;\n\tdisplay: flex;\n\talign-items: stretch;\n}\n\n\n#uc_stacking_cards_elementor_46c3fb1 .ue_content_left {\n\t\/*place-self: center;*\/\n\t\/*display: grid;*\/\n    display: flex;\n    flex-direction: column;\n    flex-shrink: 0;\n    }\n\n#uc_stacking_cards_elementor_46c3fb1 .ue_card_content > figure {\n\toverflow: hidden;\n    flex-grow: 1;\n}\n\n#uc_stacking_cards_elementor_46c3fb1 .ue_card_content > figure .ue_sc_img,\n#uc_stacking_cards_elementor_46c3fb1 .ue_card_content > figure > a{\n\twidth: 100%;\n\theight: 100%;\n}\n\n#uc_stacking_cards_elementor_46c3fb1 .ue_sc_button {\n\tdisplay: inline-block;\n    height: fit-content;\n    overflow:hidden;\n}\n\n #uc_stacking_cards_elementor_46c3fb1 .ue_sc_graphic_el{\n   display:flex;\n   justify-content:center;\n   align-content:center;\n   align-items:center;\n   overflow:hidden;\n   flex-shrink: 0;\n }\n #uc_stacking_cards_elementor_46c3fb1 .ue_sc_graphic_el svg{\n  width:1em;\n  height:1em;\n }\n\n #uc_stacking_cards_elementor_46c3fb1 .ue_stacking_card_item{\n  transform: translate3d(0px, 0px, 0px) rotate(-1deg);\n  filter: blur(0px) grayscale(0%);\n }\n\n\/* soft styles*\/\n.ue_sc_title {\n\tfont-weight: 300;\n\tfont-size: 2.4em;\n    line-height: 1.2;\n}\n\n.ue_sc_desc {\n\tfont-weight: 300;\n\tline-height: 1.42;\n}\n.ue_stacking_card_item {\n  width:100%;\n}\n.ue_card_content {\n\tbox-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.30);\n}\n\/* *\/\n\n\/* start creative button hover styles *\/\n#uc_stacking_cards_elementor_46c3fb1 .uc_content{\n  display: flex;\n  flex-wrap: wrap;\n}\n\n\/* GENERAL BUTTON STYLING *\/\n#uc_stacking_cards_elementor_46c3fb1 .uc_button {\n  overflow:hidden;\n  flex-shrink: 0;\n}\n\n#uc_stacking_cards_elementor_46c3fb1 .uc_button,\n#uc_stacking_cards_elementor_46c3fb1 .uc_button::after {\n\ttransition: all 0.3s;\n}\n\n#uc_stacking_cards_elementor_46c3fb1 .uc_button {\n  position: relative;\n}\n\n#uc_stacking_cards_elementor_46c3fb1 .uc_button span{\n  z-index: 2;\n  position: relative;\n  display: block;\n}\n\n#uc_stacking_cards_elementor_46c3fb1 .uc_button::before,\n#uc_stacking_cards_elementor_46c3fb1 .uc_button::after {\n  content: '';\n  position: absolute;\n  z-index: 1;\n}\n\n\/* BUTTON 1 *\/\n#uc_stacking_cards_elementor_46c3fb1 .uc_btn-1::after {\n  height: 0;\n  left: 0;\n  top: 0;\n  width: 100%;\n}\n\n#uc_stacking_cards_elementor_46c3fb1 .uc_btn-1:hover:after {\n  height: 100%;\n}\n\n\/* BUTTON 7 *\/\n#uc_stacking_cards_elementor_46c3fb1 .uc_btn-7::after {\n  height: 0;\n  left: 0;\n  bottom: 0;\n  width: 100%;\n}\n\n#uc_stacking_cards_elementor_46c3fb1 .uc_btn-7:hover:after {\n  height: 100%;\n}\n\n\/* BUTTON 2 *\/\n#uc_stacking_cards_elementor_46c3fb1 .uc_btn-2::after {\n  height: 100%;\n  left: 0;\n  top: 0;\n  width: 0;\n}\n\n#uc_stacking_cards_elementor_46c3fb1 .uc_btn-2:hover:after {\n  width: 100%;\n}\n\n\/* BUTTON 6 *\/\n#uc_stacking_cards_elementor_46c3fb1 .uc_btn-6::after {\n  height: 100%;\n  right: 0;\n  top: 0;\n  width: 0;\n}\n\n#uc_stacking_cards_elementor_46c3fb1 .uc_btn-6:hover:after {\n  width: 100%;\n}\n\n\/* BUTTON 3 *\/\n#uc_stacking_cards_elementor_46c3fb1 .uc_btn-3::after {\n  height: 0;\n  left: 50%;\n  top: 50%;\n  width: 0;\n}\n\n#uc_stacking_cards_elementor_46c3fb1 .uc_btn-3:hover:after {\n  height: 100%;\n  left: 0;\n  top: 0;\n  width: 100%;\n}\n\n\n\/* BUTTON 4 *\/\n#uc_stacking_cards_elementor_46c3fb1 .uc_btn-4::before {\n}\n\n#uc_stacking_cards_elementor_46c3fb1 .uc_btn-4::after {\n  height: 100%;\n  left: 0;\n  top: 0;\n  width: 100%;\n}\n\n#uc_stacking_cards_elementor_46c3fb1 .uc_btn-4:hover:after{\n  height: 0;\n  left: 50%;\n  top: 50%;\n  width: 0;\n}\n\n\n\/* BUTTON 5 *\/\n#uc_stacking_cards_elementor_46c3fb1 .uc_btn-5 {\n  overflow: hidden;\n}\n\n#uc_stacking_cards_elementor_46c3fb1 .uc_btn-5::after {\n  height: 100%;\n  left: -100%;\n  top: 0;\n  transform: skew(50deg);\n  transition-duration: 0.6s;\n  transform-origin: top left;\n  width: 0;\n}\n\n#uc_stacking_cards_elementor_46c3fb1 .uc_btn-5:hover:after {\n  height: 100%;\n  width: 200%;\n}\n\/* end styles *\/\n#uc_stacking_cards_elementor_46c3fb1 .ue_content_wrapper {\n  display: flex;\n  align-items: stretch;\n  position:relative;\n  height:100%;\n  width: 100%;\n}\n#uc_stacking_cards_elementor_46c3fb1 .ue_stacking_card_item.uc-item-error .ue_content_wrapper,\n#uc_stacking_cards_elementor_46c3fb1 .ue_stacking_card_item.uc-item-message .ue_content_wrapper{\n  justify-content: center;\n  align-items: center;\n}\n#uc_stacking_cards_elementor_46c3fb1 .uc-error{\n  color:red;\n  font-weight:500;\n}\n#uc_stacking_cards_elementor_46c3fb1 .uc-message{\n  font-weight:500;\n}\n.elementor-repeater-item-dd81142 {\n  padding-top: calc(1 * var(--card-top-offset))!important;\n}\n.elementor-repeater-item-8765d51 {\n  padding-top: calc(2 * var(--card-top-offset))!important;\n}\n.elementor-repeater-item-2b5934e {\n  padding-top: calc(3 * var(--card-top-offset))!important;\n}\n.elementor-repeater-item-b6b1343 {\n  padding-top: calc(4 * var(--card-top-offset))!important;\n}\n\n\n<\/style>\n\n\t\t\t<div id=\"uc_stacking_cards_elementor_46c3fb1\" data-editor=\"no\" data-errors=\"false\" data-show-section=\"false\" class=\"ue_stacking_cards_widget uc_creative_buttons  \"   dir=\"ltr\">\n\t<div class=\"ue_cards_wrapper uc-items-wrapper\">\n      <div class=\"ue_stacking_card_item elementor-repeater-item-dd81142 ueitem-1\" data-source=\"normal\" data-id=\"\">\n  <div class=\"ue_card_content\" >\n    \n          <div class=\"ue_content_left\">\n                  <div class=\"ue_sc_graphic_el\">\n            <i class='fas fa-briefcase'><\/i>                                  <\/div>\n                <div class=\"ue_sc_title\">Operations<\/div>        <div class=\"ue_sc_desc\">Streamline your operational workflows and enhance team coordination with our comprehensive suite of tools. Monitor your organization's performance through real-time project dashboards.<\/div>\t    <a href=\"#\"  class=\"ue_sc_button uc_button none\"><span>View Analytics \u2192<\/span><\/a>      <\/div>\n\t          <figure>\n                      <img decoding=\"async\" class=\"ue_sc_img\" src=\"https:\/\/whitewhale.com\/wp-content\/uploads\/2025\/06\/Frame-8421.svg\" alt=\"Image description\"  src=\"https:\/\/whitewhale.com\/wp-content\/uploads\/2025\/06\/Frame-8421.svg\" alt=\"Frame 8421\" width=\"768\" height=\"0\" alt=\"Frame 8421\" title=\"Frame 8421\">\n            \t\t<\/figure>\n            \n      \n      \n  <\/div>\n<\/div>\n<div class=\"ue_stacking_card_item elementor-repeater-item-8765d51 ueitem-2\" data-source=\"normal\" data-id=\"\">\n  <div class=\"ue_card_content\" >\n    \n          <div class=\"ue_content_left\">\n                  <div class=\"ue_sc_graphic_el\">\n            <i class='fas fa-chart-line'><\/i>                                  <\/div>\n                <div class=\"ue_sc_title\">Personnel Development<\/div>        <div class=\"ue_sc_desc\">Accelerate your team's professional growth through our targeted development initiatives. Our platform enables the creation of personalized learning paths that align perfectly with your business objectives and individual career goals. <\/div>\t    <a href=\"#\"  class=\"ue_sc_button uc_button none\"><span>View Analytics \u2192<\/span><\/a>      <\/div>\n\t          <figure>\n                      <img decoding=\"async\" class=\"ue_sc_img\" src=\"https:\/\/whitewhale.com\/wp-content\/uploads\/2025\/06\/undraw_shared_goals_re_jvqd-1.svg\" alt=\"Image description\"  src=\"https:\/\/whitewhale.com\/wp-content\/uploads\/2025\/06\/undraw_shared_goals_re_jvqd-1.svg\" alt=\"undraw_shared_goals_re_jvqd 1\" width=\"768\" height=\"0\" alt=\"undraw_shared_goals_re_jvqd 1\" title=\"undraw_shared_goals_re_jvqd 1\">\n            \t\t<\/figure>\n            \n      \n      \n  <\/div>\n<\/div>\n<div class=\"ue_stacking_card_item elementor-repeater-item-2b5934e ueitem-3\" data-source=\"normal\" data-id=\"\">\n  <div class=\"ue_card_content\" >\n    \n          <div class=\"ue_content_left\">\n                  <div class=\"ue_sc_graphic_el\">\n            <i class='fas fa-wallet'><\/i>                                  <\/div>\n                <div class=\"ue_sc_title\">Finance Management<\/div>        <div class=\"ue_sc_desc\">Optimize your financial operations with our intelligent suite of tools and comprehensive insights. Our system automatically generates detailed financial reports and forecasts, enabling proactive decision-making.<\/div>\t    <a href=\"#\"  class=\"ue_sc_button uc_button none\"><span>View Analytics \u2192<\/span><\/a>      <\/div>\n\t          <figure>\n                      <img fetchpriority=\"high\" decoding=\"async\" class=\"ue_sc_img\" src=\"https:\/\/whitewhale.com\/wp-content\/uploads\/2025\/06\/undraw_projections_re_ulc6-1.svg\" alt=\"Image description\"  src=\"https:\/\/whitewhale.com\/wp-content\/uploads\/2025\/06\/undraw_projections_re_ulc6-1.svg\" alt=\"undraw_projections_re_ulc6 1\" width=\"642\" height=\"627\" alt=\"undraw_projections_re_ulc6 1\" title=\"undraw_projections_re_ulc6 1\">\n            \t\t<\/figure>\n            \n      \n      \n  <\/div>\n<\/div>\n<div class=\"ue_stacking_card_item elementor-repeater-item-b6b1343 ueitem-4\" data-source=\"normal\" data-id=\"\">\n  <div class=\"ue_card_content\" >\n    \n          <div class=\"ue_content_left\">\n                  <div class=\"ue_sc_graphic_el\">\n            <i class='fas fa-star'><\/i>                                  <\/div>\n                <div class=\"ue_sc_title\">Employee Experience<\/div>        <div class=\"ue_sc_desc\">Enhance workplace satisfaction through our comprehensive benefits and support system. Our platform provides seamless access to wellness programs and health resources.<\/div>\t    <a href=\"#\"  class=\"ue_sc_button uc_button none\"><span>View Analytics \u2192<\/span><\/a>      <\/div>\n\t          <figure>\n                      <img loading=\"lazy\" decoding=\"async\" class=\"ue_sc_img\" src=\"https:\/\/whitewhale.com\/wp-content\/uploads\/2025\/06\/undraw_positive_attitude_re_wu7d-1-1.svg\" alt=\"Image description\"  src=\"https:\/\/whitewhale.com\/wp-content\/uploads\/2025\/06\/undraw_positive_attitude_re_wu7d-1-1.svg\" alt=\"undraw_positive_attitude_re_wu7d 1 (1)\" width=\"768\" height=\"0\" alt=\"undraw_positive_attitude_re_wu7d 1 (1)\" title=\"undraw_positive_attitude_re_wu7d 1 (1)\">\n            \t\t<\/figure>\n            \n      \n      \n  <\/div>\n<\/div>\n\n\t<\/div>\n<\/div>\n\t\t\t<!-- end Stacking Cards -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>The gateway To Your Complete Workplace Experience Access everything you need to thrive at work &#8211; from seamless operations and<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"class_list":["post-4125","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/whitewhale.com\/ar\/wp-json\/wp\/v2\/pages\/4125","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/whitewhale.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/whitewhale.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/whitewhale.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/whitewhale.com\/ar\/wp-json\/wp\/v2\/comments?post=4125"}],"version-history":[{"count":1,"href":"https:\/\/whitewhale.com\/ar\/wp-json\/wp\/v2\/pages\/4125\/revisions"}],"predecessor-version":[{"id":4126,"href":"https:\/\/whitewhale.com\/ar\/wp-json\/wp\/v2\/pages\/4125\/revisions\/4126"}],"wp:attachment":[{"href":"https:\/\/whitewhale.com\/ar\/wp-json\/wp\/v2\/media?parent=4125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}