text/css turf-booking-modern-final.css ( ASCII text )

/*
 * =========================================================
 * THE TURF STATION
 * MODERN BOOKING UI
 *
 * CSS ONLY
 * No Drupal / JS / booking logic changes.
 *
 * Booking states are intentionally preserved.
 * =========================================================
 */


/* =========================================================
   1. PAGE
   ========================================================= */

body.path-frontpage {
  background: #f2f1f6 !important;

  font-family:
    zohopuvi-regular,
    Arial,
    sans-serif !important;

  min-height: 100vh !important;
}


/* =========================================================
   2. PAGE STRUCTURE
   ========================================================= */

/*
 * Keep the overall page as a vertical layout.
 *
 * Header
 * Main content
 * Footer
 *
 * The main area gets the available space.
 */

body.path-frontpage #page {
  min-height: 100vh !important;

  display: flex !important;

  flex-direction: column !important;
}


/*
 * Main wrapper occupies the available space.
 */

body.path-frontpage #main-wrapper {
  background: #ffffff !important;

  flex: 1 1 auto !important;

  min-height: 0 !important;

  display: flex !important;

  flex-direction: column !important;
}


/* =========================================================
   3. MAIN TITLE
   ========================================================= */

body.path-frontpage h1 {
  color: #27213f !important;

  font-size: 32px !important;

  font-weight: 700 !important;

  letter-spacing: -0.7px !important;

  line-height: 1.15 !important;

  margin-top: 24px !important;

  margin-bottom: 28px !important;

  position: relative;

  font-family:
    zohopuvi-regular,
    Arial,
    sans-serif !important;
}


/* Online booking label */

body.path-frontpage h1::before {
  content: "ONLINE BOOKING";

  display: block;

  color: #50487f;

  font-family:
    zohopuvi-regular,
    Arial,
    sans-serif !important;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 1.8px;

  margin-bottom: 7px;
}


/* Purple underline */

body.path-frontpage h1::after {
  content: "";

  display: block;

  width: 42px;

  height: 3px;

  margin-top: 10px;

  border-radius: 10px;

  background: #50487f;
}


/* =========================================================
   4. DATE NAVIGATION
   ========================================================= */

body.path-frontpage .day-navigation {
  position: relative;

  margin-bottom: 26px !important;

  font-family:
    zohopuvi-regular,
    Arial,
    sans-serif !important;
}


/* Date cards */

body.path-frontpage .day-navigation .date-button {
  border-radius: 15px !important;

  border: 1px solid #f0eef4 !important;

  background: #ffffff !important;

  box-shadow:
    0 4px 12px rgba(45, 39, 70, .08) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease !important;

  font-family:
    zohopuvi-regular,
    Arial,
    sans-serif !important;
}


/* Date card hover */

body.path-frontpage .day-navigation .date-button:hover {
  transform: translateY(-3px) !important;

  box-shadow:
    0 9px 20px rgba(45, 39, 70, .13) !important;
}


/* Selected date */

body.path-frontpage .day-navigation .date-button.selected {
  background: #50487f !important;

  border-color: #50487f !important;

  border-radius: 15px !important;

  box-shadow:
    0 9px 20px rgba(80, 72, 127, .30) !important;

  transform: translateY(-2px);
}


/* Selected date text */

body.path-frontpage .day-navigation .date-button.selected * {
  color: #ffffff !important;
}


/* =========================================================
   5. PREVIOUS / NEXT ARROWS
   ========================================================= */

body.path-frontpage .day-navigation > button {
  color: #50487f !important;

  font-size: 20px !important;

  transition:
    transform .15s ease,
    opacity .15s ease !important;

  font-family:
    zohopuvi-regular,
    Arial,
    sans-serif !important;
}


body.path-frontpage .day-navigation > button:hover {
  transform: scale(1.15);

  opacity: .75;
}


/* =========================================================
   6. ORIGINAL SLOT ROW
   ========================================================= */

body.path-frontpage .time-slot-row {
  margin-bottom: 0 !important;
}


/* =========================================================
   7. SLOT BUTTON
   ========================================================= */

body.path-frontpage button.time-slot {
  border-radius: 12px !important;

  box-shadow:
    0 2px 7px rgba(35, 35, 35, .07) !important;

  transition:
    transform .16s ease,
    box-shadow .16s ease !important;

  font-family:
    zohopuvi-regular,
    Arial,
    sans-serif !important;
}


/* Slot hover */

body.path-frontpage button.time-slot:hover {
  transform: translateY(-2px) !important;

  box-shadow:
    0 6px 14px rgba(35, 35, 35, .12) !important;
}


/* Don't lift disabled buttons */

body.path-frontpage button.time-slot:disabled:hover {
  transform: none !important;
}


/* =========================================================
   8. SLOT CONTENT
   ========================================================= */

body.path-frontpage .slot {
  line-height: 1.2;

  font-family:
    zohopuvi-regular,
    Arial,
    sans-serif !important;
}


/* Price */

body.path-frontpage .aboveBtn {
  font-size: 11px !important;

  font-weight: 700 !important;

  line-height: 1.15 !important;
}


/* Start time */

body.path-frontpage .stTime {
  font-size: 11px !important;

  font-weight: 600 !important;

  line-height: 1.25 !important;
}


/* End time */

body.path-frontpage .enTime {
  font-size: 10px !important;

  opacity: .72;
}


/* =========================================================
   9. CART
   ========================================================= */

body.path-frontpage #cartIcon {
  border-radius: 12px 0 0 12px !important;

  box-shadow:
    0 7px 18px rgba(0, 0, 0, .16) !important;

  font-family:
    zohopuvi-regular,
    Arial,
    sans-serif !important;
}


/* =========================================================
   10. BOOK BUTTON
   ========================================================= */

body.path-frontpage #bookSlotsButton {
  border-radius: 13px 13px 0 0 !important;

  box-shadow:
    0 -5px 18px rgba(40, 34, 70, .16) !important;

  font-weight: 700 !important;

  font-family:
    zohopuvi-regular,
    Arial,
    sans-serif !important;
}


/* =========================================================
   FINAL BOOKING GRID + FIXED FOOTER
   ========================================================= */


/* ---------------------------------------------------------
   BOOKING GRID
   --------------------------------------------------------- */

body.path-frontpage .turf-booking-grid {
    display: grid !important;

    grid-template-columns:
        repeat(6, minmax(0, 1fr)) !important;

    column-gap: 10px !important;

    /*
     * Rows are distributed inside the available
     * booking area.
     */
    row-gap: 0 !important;

    width: 100% !important;

    /*
     * Space between date selector and fixed footer.
     *
     * This is the only vertical area we allocate
     * dynamically to the booking grid.
     */
    min-height: calc(100vh - 540px) !important;

    max-height: calc(100vh - 540px) !important;

    margin: 0 auto !important;

    padding: 0 !important;

    box-sizing: border-box !important;

    align-content: space-between !important;

    align-items: start !important;

    font-family:
        zohopuvi-regular,
        Arial,
        sans-serif !important;
}


/* ---------------------------------------------------------
   ORIGINAL SLOT BUTTONS
   --------------------------------------------------------- */

body.path-frontpage
.turf-booking-grid > .time-slot {
    position: static !important;

    left: auto !important;

    top: auto !important;

    float: none !important;

    width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;

    box-sizing: border-box !important;
}


/*
 * IMPORTANT:
 *
 * Do NOT set display:block here.
 *
 * Drupal's display:none on past slots must remain intact.
 */


/* ---------------------------------------------------------
   REMOVE OLD PRICE PSEUDO ELEMENTS
   --------------------------------------------------------- */

body.path-frontpage
.turf-booking-grid > .time-slot::before,

body.path-frontpage
.turf-booking-grid > .time-slot::after {
    content: none !important;

    display: none !important;
}


/* ---------------------------------------------------------
   SLOT TEXT
   --------------------------------------------------------- */

body.path-frontpage
.turf-booking-grid .slot {
    line-height: 1.05 !important;

    font-family:
        zohopuvi-regular,
        Arial,
        sans-serif !important;
}


body.path-frontpage
.turf-booking-grid .aboveBtn {
    font-size: 9px !important;

    line-height: 1.05 !important;

    margin: 0 !important;

    padding: 0 !important;
}


body.path-frontpage
.turf-booking-grid .stTime {
    font-size: 9px !important;

    line-height: 1.05 !important;

    margin: 0 !important;
}


body.path-frontpage
.turf-booking-grid .enTime {
    font-size: 8px !important;

    line-height: 1 !important;

    margin: 0 !important;
}


/* ---------------------------------------------------------
   HIDE ORIGINAL PERIOD HEADINGS
   --------------------------------------------------------- */

body.path-frontpage
.time-slot-period {
    display: none !important;
}


body.path-frontpage
.no-slots {
    display: none !important;
}


/* =========================================================
   FIXED COMPACT FOOTER
   ========================================================= */

body.path-frontpage .site-footer {
    position: fixed !important;

    /*
     * Red Total / Continue bar occupies the bottom.
     * Footer sits immediately above it.
     */
    bottom: 58px !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

    width: 600px !important;

    max-width: 100% !important;

    height: 43px !important;

    min-height: 43px !important;

    margin: 0 !important;

    padding: 0 !important;

    z-index: 900 !important;

    box-sizing: border-box !important;
}


/* Footer container */

body.path-frontpage
.site-footer .container,

body.path-frontpage
.site-footer .container-fluid {
    padding: 0 !important;

    margin: 0 !important;

    min-height: 0 !important;

    height: 100% !important;
}


/* Footer bottom */

body.path-frontpage
.site-footer__bottom {
    padding: 2px 5px !important;

    margin: 0 !important;

    height: 100% !important;

    min-height: 0 !important;

    box-sizing: border-box !important;
}


/* Footer region */

body.path-frontpage
.region-footer-fifth {
    padding: 0 !important;

    margin: 0 !important;

    height: 100% !important;
}


/* Copyright */

body.path-frontpage
#block-turf-subtheme-copyright,

body.path-frontpage
#block-turf-subtheme-copyright .content,

body.path-frontpage
#block-turf-subtheme-copyright .field__item {
    margin: 0 !important;

    padding: 0 !important;
}


/* Footer text */

body.path-frontpage
#block-turf-subtheme-copyright p {
    margin: 0 !important;

    padding: 0 !important;

    font-size: 9px !important;

    line-height: 10px !important;

    text-align: center !important;
}


/* First line = address */

body.path-frontpage
#block-turf-subtheme-copyright p br:nth-of-type(1) {
    display: block !important;
}


/* Second/third breaks removed */

body.path-frontpage
#block-turf-subtheme-copyright p br:nth-of-type(2),

body.path-frontpage
#block-turf-subtheme-copyright p br:nth-of-type(3) {
    display: none !important;
}


/* Social icons */

body.path-frontpage
#block-turf-subtheme-copyright p br:nth-of-type(4) {
    display: block !important;
}


body.path-frontpage
#block-turf-subtheme-copyright a {
    font-size: 9px !important;

    line-height: 10px !important;

    margin: 0 2px !important;

    padding: 0 !important;

    white-space: nowrap !important;
}


body.path-frontpage
#block-turf-subtheme-copyright img {
    width: 16px !important;

    height: 16px !important;

    margin: 0 2px !important;

    vertical-align: middle !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    body.path-frontpage
    .turf-booking-grid {

        column-gap: 5px !important;

        min-height: calc(100vh - 500px) !important;

        max-height: calc(100vh - 500px) !important;

        row-gap: 0 !important;

        align-content: space-between !important;
    }


    body.path-frontpage
    .site-footer {

        bottom: 58px !important;

        width: 100% !important;

        height: 40px !important;

        min-height: 40px !important;
    }


    body.path-frontpage
    #block-turf-subtheme-copyright p {

        font-size: 8px !important;

        line-height: 9px !important;
    }


    body.path-frontpage
    #block-turf-subtheme-copyright a {

        font-size: 8px !important;
    }


    body.path-frontpage
    #block-turf-subtheme-copyright img {

        width: 15px !important;

        height: 15px !important;
    }

}

/* =========================================================
   FINAL OVERRIDE
   NORMAL BOOKING FLOW
   ========================================================= */


/* ---------------------------------------------------------
   PAGE - NORMAL FLOW
   --------------------------------------------------------- */

body.path-frontpage #page {
    display: block !important;
    min-height: 0 !important;
}


body.path-frontpage #main-wrapper {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    flex: none !important;
}


/* ---------------------------------------------------------
   BOOKING GRID
   --------------------------------------------------------- */

body.path-frontpage .turf-booking-grid {
    display: grid !important;

    grid-template-columns:
        repeat(6, minmax(0, 1fr)) !important;

    column-gap: 10px !important;

    /* Normal compact row spacing */
    row-gap: 36px !important;

    width: 100% !important;

    /* REMOVE ALL VIEWPORT HEIGHT BEHAVIOUR */
    height: auto !important;

    min-height: 0 !important;

    max-height: none !important;

    margin: 0 auto !important;

    padding: 0 !important;

    box-sizing: border-box !important;

    /* DO NOT stretch rows */
    align-content: normal !important;

    align-items: start !important;
}


/* ---------------------------------------------------------
   SLOT BUTTONS
   --------------------------------------------------------- */

body.path-frontpage
.turf-booking-grid > .time-slot {
    position: static !important;

    width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}


/*
 * VERY IMPORTANT:
 *
 * Do NOT force display here.
 *
 * Drupal's display:none for past slots
 * must continue working.
 */


/* ---------------------------------------------------------
   REMOVE OLD PSEUDO PRICE
   --------------------------------------------------------- */

body.path-frontpage
.turf-booking-grid > .time-slot::before,

body.path-frontpage
.turf-booking-grid > .time-slot::after {
    content: none !important;

    display: none !important;
}


/* ---------------------------------------------------------
   SLOT FONT / SIZE
   --------------------------------------------------------- */

body.path-frontpage
.turf-booking-grid .slot {
    font-family:
        zohopuvi-regular,
        Arial,
        sans-serif !important;

    line-height: 1.05 !important;
}


body.path-frontpage
.turf-booking-grid .aboveBtn {
    font-size: 9px !important;

    line-height: 1.05 !important;

    margin: 0 !important;

    padding: 0 !important;
}


body.path-frontpage
.turf-booking-grid .stTime {
    font-size: 9px !important;

    line-height: 1.05 !important;

    margin: 0 !important;
}


body.path-frontpage
.turf-booking-grid .enTime {
    font-size: 8px !important;

    line-height: 1 !important;
}


/* ---------------------------------------------------------
   FOOTER - STATIC
   --------------------------------------------------------- */

body.path-frontpage .site-footer {
    position: static !important;

    display: block !important;

    transform: none !important;

    left: auto !important;

    right: auto !important;

    bottom: auto !important;

    top: auto !important;

    width: 100% !important;

    height: auto !important;

    min-height: 0 !important;

    max-height: none !important;

    margin: 4px 0 0 !important;

    padding: 0 !important;

    clear: both !important;

    float: none !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   FOOTER CONTAINER
   --------------------------------------------------------- */

body.path-frontpage
.site-footer .container,

body.path-frontpage
.site-footer .container-fluid {
    margin: 0 !important;

    padding-top: 0 !important;

    padding-bottom: 0 !important;

    min-height: 0 !important;

    height: auto !important;
}


body.path-frontpage
.site-footer__bottom {
    margin: 0 !important;

    padding: 2px 5px 3px !important;

    min-height: 0 !important;

    height: auto !important;
}


body.path-frontpage
.region-footer-fifth {
    margin: 0 !important;

    padding: 0 !important;
}


/* ---------------------------------------------------------
   FOOTER CONTENT
   --------------------------------------------------------- */

body.path-frontpage
#block-turf-subtheme-copyright,

body.path-frontpage
#block-turf-subtheme-copyright .content,

body.path-frontpage
#block-turf-subtheme-copyright .field__item {
    margin: 0 !important;

    padding: 0 !important;

    min-height: 0 !important;
}


body.path-frontpage
#block-turf-subtheme-copyright p {
    margin: 0 !important;

    padding: 0 !important;

    font-size: 9px !important;

    line-height: 10px !important;

    text-align: center !important;
}


/* Address line */

body.path-frontpage
#block-turf-subtheme-copyright p br:nth-of-type(1) {
    display: block !important;
}


/* Phone + Terms + Privacy */

body.path-frontpage
#block-turf-subtheme-copyright p br:nth-of-type(2),

body.path-frontpage
#block-turf-subtheme-copyright p br:nth-of-type(3) {
    display: none !important;
}


/* Social icons */

body.path-frontpage
#block-turf-subtheme-copyright p br:nth-of-type(4) {
    display: block !important;
}


body.path-frontpage
#block-turf-subtheme-copyright a {
    font-size: 9px !important;

    line-height: 10px !important;

    margin: 0 2px !important;

    padding: 0 !important;

    white-space: nowrap !important;
}


body.path-frontpage
#block-turf-subtheme-copyright img {
    width: 16px !important;

    height: 16px !important;

    margin: 0 2px !important;

    padding: 0 !important;

    vertical-align: middle !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 600px) {

    body.path-frontpage
    .turf-booking-grid {
        column-gap: 5px !important;

        row-gap: 28px !important;

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;

        align-content: normal !important;
    }


    body.path-frontpage
    .site-footer {
        position: static !important;

        width: 100% !important;

        height: auto !important;

        margin: 3px 0 0 !important;
    }

}

/* =========================================================
   FINAL SLOT SPACING
   Footer remains completely untouched
   ========================================================= */

body.path-frontpage .turf-booking-grid {
    row-gap: clamp(
        36px,
        calc((100vh - 650px) / 2),
        65px
    ) !important;

    height: auto !important;

    min-height: 0 !important;

    max-height: none !important;

    align-content: normal !important;
}


/* Mobile */

@media (max-width: 600px) {

    body.path-frontpage .turf-booking-grid {
        row-gap: clamp(
            28px,
            calc((100vh - 500px) / 3),
            45px
        ) !important;
    }

}