{"id":900,"date":"2024-03-26T13:10:23","date_gmt":"2024-03-26T13:10:23","guid":{"rendered":"https:\/\/kimaya.com.au\/?page_id=900"},"modified":"2024-03-26T13:11:50","modified_gmt":"2024-03-26T13:11:50","slug":"test","status":"publish","type":"page","link":"https:\/\/kimaya.com.au\/index.php\/test\/","title":{"rendered":"test"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"900\" class=\"elementor elementor-900\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2f8aca2 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2f8aca2\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f745b68\" data-id=\"f745b68\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ec63bdb elementor-widget elementor-widget-html\" data-id=\"ec63bdb\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n@import \"bourbon\";\r\n\r\n@import 'https:\/\/fonts.googleapis.com\/css?family=Montserrat:400,700|Raleway:300,400';\r\n\r\n\r\n\/* colors *\/\r\n$blue: #428BFF;\r\n$red: #FF4A53;\r\n$dark: #333;\r\n\r\n$accent: $blue;\r\n$accent-inactive: desaturate($accent, 85%);\r\n$secondary: $accent-inactive;\r\n\r\n\r\n\/* tab setting *\/\r\n$tab-count: 4;\r\n$indicator-width: 50px;\r\n$indicator-height: 4px;\r\n\r\n\/* breakpoints *\/\r\n$breakpoints: (\r\n  medium: #{$tab-count*250px},\r\n  small: #{$tab-count*150px}\r\n);\r\n\r\n\r\n\/* selectors relative to radio inputs *\/\r\n$label-selector: \"~ ul > li\";\r\n$slider-selector: \"~ .slider\";\r\n$content-selector: \"~ .content > section\";\r\n\r\n@mixin tabs(\r\n  $label-selector: $label-selector,\r\n  $slider-selector: $slider-selector,\r\n  $content-selector: $content-selector) {\r\n    \r\n  @for $i from 1 through $tab-count {\r\n    &:nth-of-type(#{$i}):checked {\r\n      #{$label-selector}:nth-child(#{$i}) {\r\n        @content;\r\n      }\r\n\r\n      #{$slider-selector} {\r\n        transform: translateX(#{100% * ($i - 1)});\r\n      }\r\n\r\n      #{$content-selector}:nth-child(#{$i}) {\r\n        display: block;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nhtml {\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\nbody {\r\n  background: #efefef;\r\n  color: $dark;\r\n  font-family: \"Raleway\";\r\n  height: 100%;\r\n  \r\n  h1 {\r\n    text-align: center;\r\n    color: $accent;\r\n    font-weight: 300;\r\n    padding: 40px 0 20px 0;\r\n    margin: 0;\r\n  }\r\n}\r\n\r\n.tabs {\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  position: relative;\r\n  background: white;\r\n  padding: 50px;\r\n  padding-bottom: 80px;\r\n  width: 70%;\r\n  height: 250px;\r\n  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);\r\n  border-radius: 5px;\r\n  min-width: #{$tab-count * 60px};\r\n  input[name=\"tab-control\"] {\r\n    display: none;\r\n  }\r\n  \r\n  .content section h2,\r\n  ul li label {\r\n    font-family: \"Montserrat\";\r\n    font-weight: bold;\r\n    font-size: 18px;\r\n    color: $accent;\r\n  }\r\n  \r\n  ul {\r\n    list-style-type: none;\r\n    padding-left: 0;\r\n    display: flex;\r\n    flex-direction: row;\r\n    margin-bottom: 10px;\r\n    justify-content: space-between;\r\n    align-items: flex-end;\r\n    flex-wrap: wrap;\r\n    \r\n    li {\r\n      box-sizing: border-box;\r\n      flex: 1;\r\n      width: #{100%\/$tab-count};\r\n      padding: 0 10px;\r\n      text-align: center;\r\n      \r\n      label {\r\n        transition: all 0.3s ease-in-out;\r\n        color: $secondary;\r\n        padding: 5px auto;\r\n        overflow: hidden;\r\n        text-overflow: ellipsis;\r\n        display: block;\r\n        cursor: pointer;\r\n        transition: all 0.2s ease-in-out;\r\n        white-space: nowrap;\r\n        -webkit-touch-callout: none;\r\n        @include user-select(none);\r\n        \r\n        br {\r\n          display: none;\r\n        }\r\n        \r\n        svg {\r\n          fill: $secondary;\r\n          height: 1.2em;\r\n          vertical-align: bottom;\r\n          margin-right: 0.2em;\r\n          transition: all 0.2s ease-in-out;\r\n        }\r\n        \r\n        &:hover,\r\n        &:focus,\r\n        &:active {\r\n          outline: 0;\r\n          color: lighten($secondary, 15%);\r\n          svg {\r\n            fill: lighten($secondary, 15%);\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n  \r\n  .slider {\r\n    position: relative;\r\n    width: #{100%\/$tab-count};\r\n    transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);\r\n    .indicator {\r\n      position: relative;\r\n      width: $indicator-width;\r\n      max-width: 100%;\r\n      margin: 0 auto;\r\n      height: $indicator-height;\r\n      background: $accent;\r\n      border-radius: 1px;     \r\n    }\r\n\r\n  }\r\n  \r\n  .content {\r\n    margin-top: 30px;\r\n    \r\n    section {\r\n      display: none;\r\n      animation: {\r\n        name: content;\r\n        direction: normal;\r\n        duration: 0.3s;\r\n        timing-function: ease-in-out;\r\n        iteration-count: 1;\r\n      }\r\n      line-height: 1.4;\r\n      \r\n      h2 {\r\n        color: $accent;\r\n        display: none;\r\n        &::after {\r\n          content: \"\";\r\n          position: relative;\r\n          display: block;\r\n          width: 30px;\r\n          height: 3px;\r\n          background: $accent;\r\n          margin-top: 5px;\r\n          left: 1px;\r\n        }\r\n      }\r\n    }\r\n  }\r\n  \r\n  input[name=\"tab-control\"] {\r\n    @include tabs {\r\n      > label {\r\n        cursor: default;\r\n        color: $accent;\r\n        \r\n        svg {\r\n          fill: $accent;\r\n        }\r\n        \r\n        @media (max-width: map-get($breakpoints, small)) {\r\n          background: rgba(0, 0, 0, 0.08);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  @keyframes content {\r\n    from {\r\n      opacity: 0;\r\n      transform: translateY(5%);\r\n    }\r\n    to {\r\n      opacity: 1;\r\n      transform: translateY(0%);\r\n    }\r\n  }\r\n  \r\n  @media (max-width: map-get($breakpoints, medium)) {\r\n    ul li label {\r\n      white-space: initial;\r\n      \r\n      br {\r\n        display: initial;\r\n      }\r\n      \r\n      svg {\r\n        height: 1.5em;\r\n      }\r\n    }\r\n  }\r\n  \r\n  @media (max-width: map-get($breakpoints, small)) {\r\n    ul li label {\r\n      padding: 5px;\r\n      border-radius: 5px;\r\n      \r\n      span {\r\n        display: none;\r\n      }\r\n    }\r\n    \r\n    .slider {\r\n      display: none;\r\n    }\r\n    \r\n    .content {\r\n      margin-top: 20px; \r\n      section h2 {\r\n        display: block;\r\n      }\r\n    }\r\n  }\r\n}\r\n<\/style>\r\n\r\n\r\n<h1>Pure CSS Tabs With Indicator<\/h1>\r\n<div class=\"tabs\">\r\n  \r\n  <input type=\"radio\" id=\"tab1\" name=\"tab-control\" checked>\r\n  <input type=\"radio\" id=\"tab2\" name=\"tab-control\">\r\n  <input type=\"radio\" id=\"tab3\" name=\"tab-control\">  \r\n  <input type=\"radio\" id=\"tab4\" name=\"tab-control\">\r\n  <ul>\r\n    <li title=\"Features\"><label for=\"tab1\" role=\"button\"><svg viewBox=\"0 0 24 24\"><path d=\"M14,2A8,8 0 0,0 6,10A8,8 0 0,0 14,18A8,8 0 0,0 22,10H20C20,13.32 17.32,16 14,16A6,6 0 0,1 8,10A6,6 0 0,1 14,4C14.43,4 14.86,4.05 15.27,4.14L16.88,2.54C15.96,2.18 15,2 14,2M20.59,3.58L14,10.17L11.62,7.79L10.21,9.21L14,13L22,5M4.93,5.82C3.08,7.34 2,9.61 2,12A8,8 0 0,0 10,20C10.64,20 11.27,19.92 11.88,19.77C10.12,19.38 8.5,18.5 7.17,17.29C5.22,16.25 4,14.21 4,12C4,11.7 4.03,11.41 4.07,11.11C4.03,10.74 4,10.37 4,10C4,8.56 4.32,7.13 4.93,5.82Z\"\/>\r\n<\/svg><br><span>Features<\/span><\/label><\/li>\r\n    <li title=\"Delivery Contents\"><label for=\"tab2\" role=\"button\"><svg viewBox=\"0 0 24 24\"><path d=\"M2,10.96C1.5,10.68 1.35,10.07 1.63,9.59L3.13,7C3.24,6.8 3.41,6.66 3.6,6.58L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.66,6.72 20.82,6.88 20.91,7.08L22.36,9.6C22.64,10.08 22.47,10.69 22,10.96L21,11.54V16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V10.96C2.7,11.13 2.32,11.14 2,10.96M12,4.15V4.15L12,10.85V10.85L17.96,7.5L12,4.15M5,15.91L11,19.29V12.58L5,9.21V15.91M19,15.91V12.69L14,15.59C13.67,15.77 13.3,15.76 13,15.6V19.29L19,15.91M13.85,13.36L20.13,9.73L19.55,8.72L13.27,12.35L13.85,13.36Z\" \/>\r\n<\/svg><br><span>Delivery Contents<\/span><\/label><\/li>\r\n    <li title=\"Shipping\"><label for=\"tab3\" role=\"button\"><svg viewBox=\"0 0 24 24\">\r\n    <path d=\"M3,4A2,2 0 0,0 1,6V17H3A3,3 0 0,0 6,20A3,3 0 0,0 9,17H15A3,3 0 0,0 18,20A3,3 0 0,0 21,17H23V12L20,8H17V4M10,6L14,10L10,14V11H4V9H10M17,9.5H19.5L21.47,12H17M6,15.5A1.5,1.5 0 0,1 7.5,17A1.5,1.5 0 0,1 6,18.5A1.5,1.5 0 0,1 4.5,17A1.5,1.5 0 0,1 6,15.5M18,15.5A1.5,1.5 0 0,1 19.5,17A1.5,1.5 0 0,1 18,18.5A1.5,1.5 0 0,1 16.5,17A1.5,1.5 0 0,1 18,15.5Z\" \/>\r\n<\/svg><br><span>Shipping<\/span><\/label><\/li>    <li title=\"Returns\"><label for=\"tab4\" role=\"button\"><svg viewBox=\"0 0 24 24\">\r\n    <path d=\"M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z\" \/>\r\n<\/svg><br><span>Returns<\/span><\/label><\/li>\r\n  <\/ul>\r\n  \r\n  <div class=\"slider\"><div class=\"indicator\"><\/div><\/div>\r\n  <div class=\"content\">\r\n    <section>\r\n      <h2>Features<\/h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolorem sequi, quo tempore in eum obcaecati atque quibusdam officiis est dolorum minima deleniti ratione molestias numquam. Voluptas voluptates quibusdam cum?<\/section>\r\n        <section>\r\n          <h2>Delivery Contents<\/h2>\r\n          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem quas adipisci a accusantium eius ut voluptatibus ad impedit nulla, ipsa qui. Quasi temporibus eos commodi aliquid impedit amet, similique nulla.<\/section>\r\n        <section>\r\n          <h2>Shipping<\/h2>\r\n          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam nemo ducimus eius, magnam error quisquam sunt voluptate labore, excepturi numquam! Alias libero optio sed harum debitis! Veniam, quia in eum.<\/section>\r\n    <section>\r\n          <h2>Returns<\/h2>\r\n          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dicta vero rerum? Eaque repudiandae architecto libero reprehenderit aliquam magnam ratione quidem? Nobis doloribus molestiae enim deserunt necessitatibus eaque quidem incidunt.<\/section>\r\n  <\/div>\r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Pure CSS Tabs With Indicator Features Delivery Contents Shipping Returns Features Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-900","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kimaya.com.au\/index.php\/wp-json\/wp\/v2\/pages\/900","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kimaya.com.au\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kimaya.com.au\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kimaya.com.au\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kimaya.com.au\/index.php\/wp-json\/wp\/v2\/comments?post=900"}],"version-history":[{"count":7,"href":"https:\/\/kimaya.com.au\/index.php\/wp-json\/wp\/v2\/pages\/900\/revisions"}],"predecessor-version":[{"id":907,"href":"https:\/\/kimaya.com.au\/index.php\/wp-json\/wp\/v2\/pages\/900\/revisions\/907"}],"wp:attachment":[{"href":"https:\/\/kimaya.com.au\/index.php\/wp-json\/wp\/v2\/media?parent=900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}