CustomWeatherCard

type: custom:mod-card
style: |
  ha-card {
    background-color: rgba(0, 0, 0, .2); /* Set the entire background color */
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, .1);
    z-index: 1;
  }
card:
  type: custom:layout-card
  layout_type: custom:grid-layout
  layout: {}
  cards:
    - type: weather-forecast
      entity: weather.home
      show_current: true
      show_forecast: false
      secondary_info_attribute: apparent_temperature
      name: " "
      card_mod:
        style: |
          div.temp-attribute {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            position: absolute;
            top: 50%;
            bottom: 50%;
            left: 25%;
            gap: 20px;
          }
          div.name-state > div.state {
            font-size: 28px;
            margin-right: 10px; /* Space between state and temperature */
          }
          div.name-state > div.temp {
            font-size: 28px;
            margin: 0;
            padding: 0;
          }
          div.temp-attribute > div.attribute {
            font-size: 28px;
          }
          div.temp-attribute > div.temp {
            font-size: 28px;
          }
          ha-card {
                    margin-top: -8px;
                    transition: none !important;
                     background-color: rgba(0, 0, 0, 0) !important;
                      --checkbox-color: white !important;
                      --primary-text-color: white !important;
                      --secondary-text-color: white !important;
                      font-family: "Helvetica";
                      border-color: rgba(0, 0, 0, 0);
                    }
    - type: custom:hourly-weather
      entity: weather.home
      icons: true
      show_date: "false"
      show_precipitation_probability: false
      grid_options:
        columns: full
        rows: auto
      label_spacing: "2"
      num_segments: "15"
      name: null
      icon_fill: single
      colors:
        clear-night:
          foreground: "#ffffff"
        cloudy:
          background: "#B0C4DE"
          foreground: "#000000"
        fog:
          foreground: "#ffffff"
        hail:
          foreground: "#ffffff"
        lightning:
          foreground: "#ffffff"
        lightning-rainy:
          foreground: "#ffffff"
        partlycloudy:
          foreground: "#ffffff"
        pouring:
          foreground: "#ffffff"
        rainy:
          background: "#1E90FF"
          foreground: "#FFFFFF"
        snowy:
          foreground: black
        snowy-rainy:
          foreground: "#ffffff"
        sunny:
          background: "#FFD700"
          foreground: "#000000"
        windy:
          foreground: "#ffffff"
        windy-variant:
          foreground: "#ffffff"
        exceptional:
          foreground: "#ffffff"
    - type: custom:weather-chart-card
      entity: weather.home
      show_main: false
      show_temperature: false
      show_current_condition: false
      show_attributes: false
      show_time: false
      show_time_seconds: false
      show_day: false
      show_date: false
      show_humidity: false
      show_pressure: false
      show_wind_direction: false
      show_wind_speed: false
      show_sun: false
      show_feels_like: false
      show_dew_point: false
      show_wind_gust_speed: false
      show_visibility: false
      show_last_changed: false
      use_12hour_format: true
      icons_size: "75"
      animated_icons: true
      icon_style: style1
      autoscroll: true
      forecast:
        precipitation_type: probability
        show_probability: false
        labels_font_size: "24"
        precip_bar_size: "100"
        style: style2
        show_wind_forecast: false
        condition_icons: true
        round_temp: false
        type: daily
        number_of_forecasts: "7"
        disable_animation: true
        disable_tooltips: true
        show_rainfall: false
        chart_height: "310"
        chart_datetime_color: rgba(255, 255, 255, 1)
        temperature2_color: rgba(255, 255, 255, 1)
        precipitation_color: rgba(75, 166, 238, .25)
      units:
        speed: ""
      title: null
      day_date_size: "26"
      current_temp_size: "50"
      card_mod:
        style: |
          ha-card {
            background-color: rgba(0, 0, 0, 0) !important;
            margin-top: -40px;
            margin-left: -40px;
            margin-right: -40px;
            font-family: "Helvetica";
            --primary-text-color: white !important;
            border-color: rgba(0, 0, 0, 0);
            height: 330px; /* Let height adjust dynamically */
            width: auto;
            overflow: hidden;
          }
          div.conditions {
            transform: translateY(-303px); /* Moves the icons up by 10px */
            /position: sticky;
            padding: 38px;

          }
grid_options:
  columns: full
  rows: auto
column_span: 3
visibility:
  - condition: screen
    media_query: "(min-width: 768px)"