style.css

/* The RML CSS was inspired by Emma Scott's work for RichmondMakerLabs. Emma where every you are, thank you very much! */

@font-face {
  font-family: 'droidserif';
  src: local('droidserif'),
    url('./assets/fonts/droidserif/DroidSerif-BoldItalic.ttf'),
    format('truetype')
      url('./assets/fonts/droidserif/droidserif-bolditalic-webfont.woff2')
      format('woff2'),
    url('/assets/fonts/droidserif/droidserif-bolditalic-webfont.woff')
      format('woff');
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: 'lato-black';
  src: local('lato'),
    url('./assets/fonts/Lato/Lato-Black.ttf') format('truetype'),
    url('./assets/fonts/Lato/lato-black-webfont.woff2') format('woff2'),
    url('/assets/fonts/Lato/lato-black-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'lato';
  src: local('lato'),
    url('./assets/fonts/Lato/Lato-Regular.ttf') format('truetype'),
    url('./assets/fonts/Lato/lato-regular-webfont.woff2') format('woff2'),
    url('/assets/fonts/Lato/lato-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Cabin_Sketch';
  src: local('Cabin_Sketch'),
    url('./assets/fonts/Cabin_Sketch/CabinSketch-Bold.ttf') format('truetype'),
    url('./assets/fonts/Cabin_Sketch/cabinsketch-bold-webfont.woff2')
      format('woff2'),
    url('/assets/fonts/Cabin_Sketch/cabinsketch-bold-webfont.woff')
      format('woff');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: local('Montserrat'),
    url('./assets/fonts/Montserrat/fonts/ttf/Montserrat-Bold.ttf')
      format('truetype'),
    url('./assets/fonts/Montserrat/fonts/webfonts/Montserrat-Bold.woff2')
      format('woff2'),
    url('./assets/fonts/Montserrat/fonts/webfonts/Montserrat-Bold.woff')
      format('woff');
  font-weight: bold;
  font-style: normal;
}

:root {
  /* root template content: RTC */
  /* font related stuff */
  --rtc-font-primary: lato;
  --rtc-font-primary-strong: lato-black;
  --rtc-font-aside: droidserif;
  --rtc-font-heading1: Cabin_Sketch;
  --rtc-font-heading2: Montserrat;
  --rtc-font-heading3-subheadings: lato-black;
  /* --font-size-base: 16px; */
  /* --font-size-slightlyLarger: 20px; */

  /* spacings, caps and margins */

  --rtc-margin-xs: 10px;
  --rtc-margin-s: 20px;
  --rtc-margin-m: 30px;
  --rtc-margin-l: 40px;
  --rtc-margin-xl: 50px;
  --rtc-margin-section: 100px;

  --rtc-padding-xs: 10px;
  --rtc-padding-s: 20px;
  --rtc-padding-m: 30px;
  --rtc-padding-l: 40px;
  --rtc-padding-xl: 50px;

  --rtc-gap-xs: 10px;
  --rtc-gap-s: 20px;
  --rtc-gap-m: 30px;
  --rtc-gap-l: 40px;
  --rtc-gap-xl: 50px;
  /* --spacing-small: 0.5rem; 8px */
  /* --spacing-medium: 1rem; 16px */
  /* --spacing-med-lg: 1.5rem; */
  /* --spacing-large: 2rem; 32px */
  /* --spacing-xlarge: 4rem; 64px */
  --rtc-max-width: 1000px;
  --rtc-tablet-width: 800px;
  --rtc-phone-width: 370px;

  /*Branding colors*/
  --rtc-color: #50763d;
  --rtc-color-1: #224099;
  --rtc-color-2: #189d98;
  --rtc-color-3: #78c486;
  --rtc-color-4: #f9d445;
  --rtc-color-5: #c09201;
  --rtc-color-text: #5a4a42;
  /* background colours */
  --rtc-bg-primary: var(--rtc-color);
  --rtc-bg-mesh-color: #28a9e11f;
  --rtc-bg-transparency: rgba(250, 250, 250, 0.9);
  --rtc-bg-blank-color: #ffffff;
  /* font colours */
  --rtc-font-color-p: var(--rtc-color-text);
  /* aside is another word for pull quotes */
  --rtc-font-color-aside1: var(--rtc-color-1);
  --rtc-font-color-aside2: var(--rtc-color-2);
  --rtc-font-color-aside3: var(--rtc-color-3);
  --rtc-font-color-aside4: var(--rtc-color-4);
  --rtc-font-color-aside5: var(--rtc-color-5);
  /* heading colours */
  --rtc-font-color-h1-impact: var(--rtc-color-1);
  --rtc-font-color-h2: var(--rtc-color);
  --rtc-font-color-h2-span: var(--rtc-color-3);
  --rtc-font-color-subheading: var(--rtc-color-text);
  /* BORDER RADIUS */
  --rtc-primary-br: 4px;
  --rtc-secondary-br: 2px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--rtc-font-primary);
  color: var(--rtc-font-color-p);
}

ul,
ol {
  list-style: none;
}
a {
  text-decoration: none;
}
p,
h3,
li,
figcaption,
button,
a {
  color: var(--rtc-font-color-p);
}
p,
h3,
figcaption,
button,
a {
  text-align: center;
}
a:hover,
details,
button,
summary.menu {
  cursor: pointer;
  font-size: larger;
}

button {
  background-color: var(--rtc-bg-primary);
}
h1 {
  /* color: var(--rtc-font-color-h1-impact); */
  color: var(--rtc-bg-blank-color);
  font-family: var(--rtc-font-heading1);
}
h2 {
  color: var(--rtc-font-color-h2);
  font-family: var(--rtc-font-heading2);
  font-weight: bolder;
  text-transform: uppercase;
  /* font-size: var(--font-size-base); */
  text-align: center;
  padding-bottom: var(--rtc-gap-m);
}
h2 > span {
  color: var(--rtc-font-color-h2-span);
}
h3,
h4,
h5,
h6 {
  font-family: var(--rtc-font-heading3-subheadings);

  font-weight: bolder;
  text-transform: capitalize;
  /* font-size: var(--rtc-gap-s); */
  text-align: center;
}
body {
  background-color: var(--rtc-primary-bg);
  padding-bottom: 100px;
}
html {
  scroll-behavior: smooth;

  scroll-padding-top: 10svh; /* height of sticky header */
}
header {
  /* padding: var(--rtc-padding-m); */
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 10svh;
  height: fit-content;
  background-color: var(--rtc-bg-primary);
  z-index: 99;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: var(--rtc-gap-m);
  /* margin-bottom: var(--rtc-margin-m); */
  align-items: center;
  align-items: start;
}
header a,
summary {
  font-weight: 500;
  color: var(--rtc-bg-blank-color);
  font-family: var(--rtc-font-heading1);
}

.flex-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--rtc-gap-s);
}
.column {
  flex-direction: column;
}
.row {
  flex-direction: row;
}

ul.general {
  display: inline;
  width: fit-content;
  padding: 0px;
  list-style-position: inside;
  list-style: none;
}
article ul.general > li + li {
  margin-top: var(--rtc-gap-s);
}
article li::before {
  content: '⬢ ';
  color: var(--main-color-text);
}
nav > ul li {
  list-style-type: none;
  block-size: fit-content;
}

header > a > img {
  width: calc(var(--spacing-gap) * 2);
}
header > a {
  flex-grow: 1;
  /* min-width: 100 px; */
  width: 10%;
}
header > h1.RML {
  /* font-family: var(--rtc-font-heading1);
  font-family: 'Cabin_Sketch'; */
  color: var(--main-color-1);
  font-size: var(--spacing-large);
  text-transform: capitalize;
  text-align: center;
  margin: auto;
  display: flex;
  flex-grow: 4;
  justify-content: center;
}
header > nav {
  display: flex;
  flex-direction: column;
  justify-content: right;
  flex-grow: 1;

  width: 10%;
}
.nav-list {
  display: flex;
  justify-content: space-evenly;
  width: 100%;

  /* list-style: none; */
}
header details {
  display: none;
}
main {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
section.hero {
  padding-top: var(--rtc-padding-xl);
  background-image: url('./assets/images/RML-Panorama.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  /* height: 80dvh; */
  height: fit-content;
  justify-content: start;
  padding: var(--rtc-padding-xl);
}
article.RML {
  background-color: var(--rtc-bg-blank-color);
  border: 0.2rem solid var(--rtc-bg-mesh-color);
  /* opacity: 1; */

  /* background-image: linear-gradient(
      var(--rtc-bg-mesh-color) 1.9px,
      transparent 1.9px
    ),
    linear-gradient(to right, var(--rtc-bg-mesh-color) 1.9px, transparent 1.9px);
  background-size: var(--rtc-gap-l) var(--rtc-gap-l);
  background-repeat: repeat, repeat;
  background-position: center, center; */
  padding: var(--rtc-gap-s);
  margin: 0px;
  padding-top: var(--rtc-gap-xl);
}
.splatter {
  background-image: url(./assets/images/BlueSplatter.png),
    url(./assets/images/pink-splatter.png),
    url(./assets/images/yellow-splatter.png),
    url(./assets/images/green-splatter.png),
    url(./assets/images/OrangeSplatter.png);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom right, bottom left, left;
}
.multi-bg-example {
  background-image: url(./assets/images/BlueSplatter.png),
    url(./assets/images/pink-splatter.png),
    linear-gradient(to right, rgb(30 75 115 / 100%), rgb(255 255 255 / 0%));
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: top left, top right, center;
  /* background-size:  */
  /* 100% 100%  1.2em; */
}
.Rtimes5 {
  min-height: 50px;
  border: 0.2rem solid var(--rtc-bg-mesh-color);
  background-image: url(./assets/images/BlueSplatter.png),
    url(./assets/images/pink-splatter.png);
  background-repeat: no-repeat, no-repeat;
  background-position: top left, top right;
  /* background-size:  */
  /* 100% 100%  1.2em; */
}

.multi-bg {
  /* background-color: var(--rtc-bg-blank-color);  */
  border: 0.2rem solid var(--rtc-bg-mesh-color);
  background-image: url(./assets/images/chemical.png),
    url(./assets/images/gears.png), url(./assets/images/drill.png),
    url(./assets/images/ruler.png), url(./assets/images/bulb.png),
    url(./assets/images/scissors.png), url(./assets/images/laptop.png);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat;
  background-position: bottom left, top right, bottom, top left, bottom right,
    left, right;
}
article {
  padding: var(--rtc-gap-s);
  margin: 0px;
  padding-top: var(--rtc-gap-xl);
}

.cuadricula {
  background-image: linear-gradient(
      var(--rtc-bg-mesh-color) 1.9px,
      transparent 1.9px
    ),
    linear-gradient(to right, var(--rtc-bg-mesh-color) 1.9px, transparent 1.9px);
  background-size: var(--rtc-gap-l) var(--rtc-gap-l);
  background-repeat: repeat, repeat;
  background-position: center, center;
}

article.RML-LinedPaper {
  /* background-color: var(--rtc-bg-blank-color); */
  border: 0.2rem solid var(--rtc-bg-mesh-color);

  background-image: linear-gradient(
      90deg,
      transparent 30px,
      #abced4 30px,
      #abced4 32px,
      transparent 32px
    ),
    linear-gradient(#eee 0.1em, transparent 0.1em);
  background-size: 100% 1.2em;
  /* background-repeat: no-repeat, no-repeat, repeat; */

  padding-left: var(--rtc-gap-l);
}
article.side-box {
  border-radius: var(--rtc-primary-br);
  max-width: var(--rtc-phone-width);
}

article.RML #topLogo {
  display: block;
  width: 200px;
}

aside.color2 {
  font-family: var(--rtc-font-aside);
  color: var(--rtc-font-color-aside2);
}
aside.color3 {
  font-family: var(--rtc-font-aside);
  color: var(--rtc-font-color-aside3);
}
aside.color4 {
  font-family: var(--rtc-font-aside);
  color: var(--rtc-font-color-aside4);
}
aside.color5 {
  font-family: var(--rtc-font-aside);
  color: var(--rtc-font-color-aside5);
}
aside.color1 {
  font-family: var(--rtc-font-aside);
  color: var(--rtc-font-color-aside1);
}
article.RML p {
  color: var(--rtc-color-text);
  text-align: center;
}
ul.aside-list {
  display: flex;
  justify-content: center;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0;
}
ul.aside-list > li {
  list-style-type: none;
  padding-left: 20px;
  width: 100px;
  display: flex;
  flex-direction: row;
}
section.join {
  padding-top: var(--rtc-padding-xl);
  background-image: url('./assets/images/3DPrinter-2.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  height: 80dvh;
  justify-content: end;
  padding: var(--rtc-padding-xl);
}
section.join > article.join {
  float: right;
}

li:has(figure)::before {
  content: none;
}
/* section.facilities {
  padding-top: 10svh;
} */
ul.facilities {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 20px;
  padding: 0;
  list-style: none;
  max-width: 1200px;
}

ul.facilities li {
  flex: 1 1 210px; /* Adjust the width as needed for responsiveness */
  max-width: 205px;
  min-width: 200px; /* Adjust the max-width as needed for responsiveness */
  text-align: center;
  margin-bottom: 20px;
}

ul.facilities figure {
  margin: 0;
}
ul.facilities figure figcaption {
  padding: 3px;
  text-align: center;
}

ul.facilities figure img {
  max-width: 100%;
  /* height: auto; */
  border-radius: var(--rtc-primary-br);
  /* float: left; */
  width: 205px;
  height: 94px;
  object-fit: cover;
}
section#first-visit {
  align-items: stretch;
  /* justify-content: start; */
  justify-content: center;
  /* TODO why in laptop screen this moves up? */
}

section#first-visit > a > figure > img {
  max-width: 700px;
  width: 100vw;
  object-fit: cover;
  overflow: hidden;
  display: block;
}
section#first-visit > article.first-visit {
  min-width: 200px;
  max-width: 800px;
  flex-direction: column;
  justify-content: center;
}
section#first-visit > article.first-visit > p {
  text-align: left;
}
* p figcaption a,
.inText {
  color: var(--rtc-color);
  text-decoration-line: underline;
}

* figcaption a {
  color: var(--rtc-color);
  text-decoration-line: underline;
}
footer h3.subheading {
  font-family: 'lato-black';
  color: var(--main-color-text);
  font-weight: bolder;
  text-transform: capitalize;
  font-size: var(--spacing-med-lg);
  text-align: center;
}
footer {
  font-family: lato;
  font-size: var(--font-size-base);
  color: var(--main-color-text);
  text-align: center;
}
@media (width >800px) {
  ul.facilities li {
    /* flex: 2 1 350px; */
    flex: 300px;
    max-width: 300px;
  }
}
@media (width <=800px) {
  header h1 {
    display: none;
  }
  .multi-bg {
    /* background-color: var(--rtc-bg-blank-color);  */
    border: 0.2rem solid var(--rtc-bg-mesh-color);
    background-image: url(./assets/images/chemical.png),
      url(./assets/images/gears.png), url(./assets/images/drill.png),
      url(./assets/images/ruler.png), url(./assets/images/bulb.png);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
      no-repeat;
    background-position: bottom left, top right, bottom, top left, bottom right;
  }
}
@media (width <= 500px) {
  header > nav {
    display: none;
  }
  header h1 {
    display: none;
  }
  article > figure.logo {
    display: none;
  }
  article.RML > ul.aside-list {
    display: none;
  }
  header details {
    display: block;
    font-weight: 500;
    color: var(--rtc-bg-blank-color);
  }

  * p {
    font-size: var(--font-size-slightlyLarger);
    line-height: 1.5;
  }
}

@media (width <= 300px) {
  section#top {
    padding: 0;
  }
}