Weather

    type: custom:button-card
    entity: input_select.column_c1
    show_state: false
    show_name: false
    show_icon: false
    styles:
      grid:
        - grid-template-areas: '"weather" "forecast" "hourly"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr 1fr
        - align-items: start
      card:
        - height: 375px
          width: 302.5px
          padding: 10px 0px 20px 0px
          margin: 0px 0px 0px 0px
          align-content: start
          justify-content: start
          align-self: start
          background: transparent
          border-radius: 30px
          border: solid 2px transparent
          box-shadow: 10 10 10 2px transparent
      custom_fields:
        hourly:
          - margin: 0px 0px 0px 0px
            padding: 0px
            width: 305px
            align-items: center
            align-content: center
            justify-items: center
            background-color: transparent
    custom_fields:
      weather:
        card:
          type: custom:button-card
          styles:
            grid:
              - grid-template-areas: '"icon temp"'
                grid-template-columns: .75fr 1fr
                grid-template-rows: 1fr
            card:
              - background-color: transparent
                margin: 0px 0px 0px 0px
                padding: 0px
                height: 130px
                width: 305px
          custom_fields:
            icon:
              card:
                type: custom:button-card
                show_entity_picture: true
                entity_picture: |
                  [[[
                    return states['sensor.weather_icon_animated'].state;
                  ]]]
                tap_action:
                  action: navigate
                  navigation_path: '#weather'
                styles:
                  card:
                    - padding: 0px 0px 0px 0px
                      margin: 5px 0px 0px 30px
                      background-color: transparent
                      height: 100px
                      align-self: center
                      align-content: center
                      justify-self: right
                      justify-content: right
                  entity_picture:
                    - width: 50px
            temp:
              card:
                type: custom:button-card
                name: >
                  [[[ return
                  Math.round(states['sensor.geelong_racecourse_temp'].state) +
                  '°'; ]]]
                tap_action:
                  action: navigate
                  navigation_path: '#weather'
                show_icon: false
                show_name: true
                show_label: true
                styles:
                  card:
                    - background-color: transparent
                      border-radius: 0px
                      align-self: start
                      align-content: start
                      justify-self: start
                      justify-content: start
                      height: 80px
                      padding: 0px
                      margin: 0px 0px 0px -30px
                  name:
                    - font-size: 55px
                      color: white
                      font-weight: 500
                      align-self: center
                      align-content: center
                      justify-self: center
                      justify-content: center
                      font-family: SF Pro Rounded
                  label:
                    - font-size: 16px
                      color: rgba(255,255,255,0.8)
                      font-weight: 550
                      margin-top: 15px
                      align-self: center
                      align-content: center
                      justify-self: center
                      justify-content: center
      forecast:
        card:
          type: custom:button-card
          show_icon: false
          show_name: true
          show_label: true
          name: |
            [[[ return states['sensor.town_short_text_0'].state; ]]]
          label: |
            [[[
              let highTemp = 'High ' + states['sensor.town_temp_max_0'].state + '°';
              let lowTemp;
              if (states['sensor.town_temp_min_0'].state === 'unknown') {
                lowTemp = 'Low ' + states['sensor.town_temp_min_1'].state + '°';
              } else {
                lowTemp = 'Low ' + states['sensor.town_temp_min_0'].state + '°';
              }
              return highTemp + '   ' + lowTemp;
            ]]]
          tap_action:
            action: navigate
            navigation_path: '#weather'
          styles:
            grid:
              - justify-items: start
            card:
              - background-color: transparent
                border-radius: 0px
                margin: 0px 0px 20px 0px
                height: 70px
                width: 302px
                align-self: start
                align-content: start
                align-items: center
                justify-items: center
            name:
              - font-size: 22px
                font-weight: 550
                margin-top: 0px
                align-self: center
                white-space: normal
                text-align: center
                word-break: break-word
            label:
              - font-size: 16px
                padding-top: 10px
                font-weight: 450
                color: rgba(255,255,255,0.6)
                text-transform: uppercase
                align-self: center
                align-content: center
                justify-self: center
                justify-content: center
      hourly:
        card:
          type: weather-forecast
          show_current: false
          show_forecast: true
          entity: weather.town_bom
          forecast_type: daily
          forecast_slots: 4
          card_mod:
            style: |
              ha-card {
                background-color: transparent;
                padding: 0px;
                font-size: 12px !important;
                margin: 0px 0px 0px 0px;}
    card_mod:
      style: |
        :host {
          display: block;
          position: relative; margin: 0px 6px 0px 0px;
        }

        :host::before {

          content: "";
          position: absolute;
          inset: 0;
          border-radius: 30px;
          -webkit-backdrop-filter: blur(50px);
          z-index: -1;
          padding: .1rem;
          background: linear-gradient(60deg,
              rgba(255,255,255,0.0) 0%,
              rgba(255,255,255,0.2) 49%,
              rgba(255,255,255,0.2) 51%,
              rgba(255,255,255,0.0) 100%);
          -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
          -webkit-mask-composite: xor;
          mask-composite: exclude;
          z-index: 0; filter: saturate(140%);
        }

        :host::after {
          content: "";
          background: linear-gradient(180deg, rgba(255,255,255, 0.1) 20%, rgba(255,255,255, 0.0) 100%);
          position: absolute;
          inset: 0;
          border-radius: 30px;
          box-shadow: inset -8px 10px 15px rgba(0, 0, 0, 0.1);
          z-index: -1;

          -webkit-backdrop-filter:blur(30px) saturate(110%) brightness(90%);
          filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.2)); }

        }