/* Start custom CSS for html, class: .elementor-element-ad3aa07 */Done — the dark hero now spans the full browser width, while its text remains aligned with the centred timetable content.




can we remove the padding above the hero section and also make  training time. in that section the blue we have been using

Done:

Removed all padding above the hero

Changed the headline to “Find Your Training Time.”

“Training Time.” now uses the existing Total Grappling blue

Files:



<section class="td-timetable" aria-labelledby="td-timetable-title">
  <header class="td-timetable__hero">
    <p class="td-kicker">Total Dojo · Weekly Schedule</p>
    <h1 id="td-timetable-title">Find your <em>fight time.</em></h1>
    <p>All 41 weekly classes for adults and children across our three Milton Keynes venues.</p>
    <div class="td-key" aria-label="Class colour key">
      <span><i class="td-dot td-dot--kids"></i>Kids</span>
      <span><i class="td-dot td-dot--striking"></i>Striking &amp; fitness</span>
      <span><i class="td-dot td-dot--grappling"></i>Jiu-Jitsu &amp; grappling</span>
    </div>
  </header>

  <div class="td-week">
    <section class="td-day">
      <header><span>01</span><h2>Monday</h2><b>8 classes</b></header>
      <div class="td-day__classes">
        <article class="td-class td-class--kids"><time>15:45–16:15</time><h3>Foundation</h3><p>4–5 yrs</p><small>Total Dojo</small></article>
        <article class="td-class td-class--kids"><time>16:15–17:00</time><h3>Little Dragons</h3><p>5–8 yrs</p><small>Total Dojo</small></article>
        <article class="td-class td-class--kids"><time>17:00–17:45</time><h3>Cadets</h3><p>9–11 yrs</p><small>Total Dojo</small></article>
        <article class="td-class td-class--kids"><time>17:45–18:30</time><h3>Junior Adults</h3><p>12–16 yrs</p><small>Total Dojo</small></article>
        <article class="td-class td-class--striking"><time>18:30–19:30</time><h3>Muay Thai</h3><p>16+ yrs</p><small>Total Dojo</small></article>
        <article class="td-class td-class--grappling"><time>19:00–20:30</time><h3>Nogi Submission Grappling</h3><p>14+ yrs</p><small>Muscle Hut</small></article>
        <article class="td-class td-class--striking"><time>19:30–20:30</time><h3>Kickboxing</h3><p>16+ yrs</p><small>Total Dojo</small></article>
        <article class="td-class td-class--striking"><time>20:00–21:00</time><h3>Self Defence</h3><p>16+ yrs</p><small>Shenley Brook End School</small></article>
      </div>
    </section>

    <section class="td-day">
      <header><span>02</span><h2>Tuesday</h2><b>8 classes</b></header>
      <div class="td-day__classes">
        <article class="td-class td-class--striking"><time>09:30–10:30</time><h3>Kickboxing</h3><p>16+ yrs</p><small>Total Dojo</small></article>
        <article class="td-class td-class--kids"><time>16:15–17:00</time><h3>Little Dragons</h3><p>5–8 yrs</p><small>Total Dojo</small></article>
        <article class="td-class td-class--kids"><time>17:00–17:45</time><h3>Cadets</h3><p>9–11 yrs</p><small>Total Dojo</small></article>
        <article class="td-class td-class--kids"><time>17:45–18:30</time><h3>Junior Adults</h3><p>12–16 yrs</p><small>Total Dojo</small></article>
        <article class="td-class td-class--grappling"><time>17:45–18:30</time><h3>Kids BJJ</h3><p>6–13 yrs</p><small>Muscle Hut</small></article>
        <article class="td-class td-class--striking"><time>18:30–19:30</time><h3>Kickboxing</h3><p>16+ yrs</p><small>Total Dojo</small></article>



7e80a05e-76d0-4e71-a5a7-ef3dca3d8ea9.png
can we make this black bar above the hero be black rather than white

Done — the transparent site header and the small Elementor gap above the hero will now use the same near-black background.




Library
/
total-dojo-timetable.css


.tg-header,
#tgHeader {
  background: #0d0d0d !important;
}

.tg-header .tg-desktop-nav a,
.tg-header .tg-menu-toggle {
  color: #fff !important;
}

.elementor-widget-html:has(.td-timetable),
.elementor-widget-html:has(.td-timetable) > .elementor-widget-container,
.e-con:has(.td-timetable) {
  background-color: #0d0d0d;
}

.td-timetable {
  --tg-black: #0d0d0d;
  --tg-blue: #3863ad;
  --tg-orange: #ff7114;
  --tg-panel: #f2f3f5;
  --tg-line: #d6d8dc;
  --tg-muted: #6b6e73;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(22px, 5.5vw, 74px) clamp(70px, 8vw, 120px);
  background: #fff;
  color: var(--tg-black);
  font-family: Arial, Helvetica, sans-serif;
}

.td-timetable *,
.td-timetable *::before,
.td-timetable *::after { box-sizing: border-box; }

.td-timetable__hero {
  position: relative;
  left: 50%;
  width: 100vw;
  max-width: none;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-bottom: clamp(54px, 7vw, 90px);
  padding: clamp(44px, 6vw, 80px) max(clamp(22px, 5.5vw, 74px), calc((100vw - 1320px) / 2 + 74px));
  background: var(--tg-black);
  border-right: 8px solid var(--tg-orange);
}

.td-kicker {
  margin: 0 0 20px;
  color: var(--tg-orange);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.td-timetable h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(54px, 7.5vw, 104px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.9;
  text-transform: uppercase;
}

.td-timetable h1 em {
  color: var(--tg-blue);
  font: inherit;
  font-style: normal;
}

.td-timetable__hero > p:not(.td-kicker) {
  max-width: 720px;
  margin: 30px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 17px;
  line-height: 1.65;
}

.td-week {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.td-day {
  min-width: 0;
  padding: clamp(25px, 3vw, 38px) clamp(22px, 3vw, 34px);
  background: var(--tg-panel);
  border-top: 5px solid var(--tg-blue);
}

.td-day > header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 58px;
  padding-bottom: 25px;
  border-bottom: 1px solid var(--tg-line);
}

.td-day > header span {
  color: var(--tg-orange);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
}

.td-day h2 {
  margin: 0;
  text-align: right;
  color: var(--tg-black);
  font-size: clamp(22px, 2.2vw, 31px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
  text-transform: uppercase;
}

.td-day > header b {
  min-width: 66px;
  text-align: right;
  color: var(--tg-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.td-day__classes { display: block; }

.td-class {
  display: grid;
  grid-template-columns: minmax(105px, 0.7fr) minmax(0, 1.8fr);
  grid-template-rows: auto auto;
  column-gap: 26px;
  align-items: start;
  min-height: 98px;
  padding: 28px 0;
  border-bottom: 1px solid var(--tg-line);
}

.td-class:last-child { border-bottom: 0; }

.td-class time {
  grid-row: 1 / span 3;
  color: var(--tg-blue);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.td-class h3 {
  grid-column: 2;
  margin: -2px 0 8px;
  color: var(--tg-black);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.td-class p {
  grid-column: 2;
  margin: 0 0 8px;
  color: var(--tg-muted);
  font-size: 11px;
  line-height: 1.3;
}

.td-class small {
  grid-column: 2;
  display: block;
  color: var(--tg-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  line-height: 1.3;
  text-transform: uppercase;
}

.td-class small::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--tg-orange);
  vertical-align: 1px;
}

.td-day:last-child { grid-column: 1 / -1; }
.td-day:last-child .td-day__classes { max-width: 50%; }

@media (max-width: 900px) {
  .td-week { grid-template-columns: 1fr; }
  .td-day:last-child { grid-column: auto; }
  .td-day:last-child .td-day__classes { max-width: none; }
}

@media (max-width: 600px) {
  .td-timetable { padding: 0 16px 60px; }
  .td-timetable h1 { font-size: clamp(48px, 16vw, 72px); }
  .td-timetable__hero > p:not(.td-kicker) { font-size: 15px; }
  .td-timetable__hero { padding: 38px 24px; border-right-width: 5px; }
  .td-day { padding: 24px 20px; }
  .td-day > header { grid-template-columns: auto 1fr; }
  .td-day > header b { display: none; }
  .td-class { grid-template-columns: 1fr; grid-template-rows: auto; gap: 8px; padding: 23px 0; }
  .td-class time { grid-row: auto; }
  .td-class h3, .td-class p, .td-class small { grid-column: auto; }
  .td-class h3 { margin: 0; }
}/* End custom CSS */