Homebrewery White Theme

homebrewery.txt

<style>
/* Font Imports */
  
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');
  
/* Reset CSS */  

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 0;
  margin: 0;
  outline: 0;
}
  
.phb { 
  width : 210mm;
  height : 296.8mm;
  background-size: cover;
  color: black;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background: url('https://i.imgur.com/6cuMDNS.png');
 }
.phb:after { background-image: none }
.phb#p2{ text-align:center; }
.phb#p1:after{ display:none; } 
.phb > h1 { color: black; font-family: 'Poppins', sans-serif; font-weight: 700; border-bottom: 2px solid black; }
.phb > h2 { color: black; font-family: 'Poppins', sans-serif; font-weight: 400; border-bottom: 2px solid black;}
.phb > h3 { color: black; font-family: 'Poppins', sans-serif; font-weight: 400; border-bottom: 2px solid black;}
.phb > h4 { color: black; font-family: 'Poppins', sans-serif; font-weight: 700; border-bottom: 2px solid black; font-size: 0.9rem; }
.phb > h5 { color: black; font-family: 'Poppins', sans-serif; font-weight: 400; border-bottom: 2px solid black; font-size: 0.88rem; }
.phb h1, .phb h4 { font-family: 'Poppins'; }
/* Table */
.phb > table > thead > tr > th { padding: 10px 10px 10px 5px; }
.phb > table > tbody > tr > td { padding: 5px; }
.phb table tbody tr:nth-child(odd) { background-color: rgba(0, 0, 0, 0.1); }
.phb > table { font-family: 'Questrial'; font-size: 1rem; background-color: rgba(0, 0, 0, 0.1); border: 1px solid black; }
  
/* FootNote */  
.phb .pageNumber { color: black; font-size: 1.05rem; }
.phb .footnote { color: black; font-size: 13px; bottom: 13px; }
  
/* Class */
.phb > .classTable { 
  border: 1px solid black; 
  border-image-source: none; 
  border-radius: 8px;
  padding: 10px;
}
.phb > .classTable > table > thead { 
  font-family: 'Questrial';
  font-size: 0.95rem;
}
.phb > .classTable > table > tbody { 
  font-family: 'Poppins'; 
}
.phb > .classTable > table > tbody tr:nth-child(odd) { 
  background-color: rgba(0, 0, 0, 0.1); 
}
  
/* Article */
  
.article {
  background-color: rgba(0, 0, 0, 0.1);
  padding: 10px 5px;  
  border: 1px solid black;
  margin: 10px 0;
}
.article > h4 {
  color: rgba(0, 0, 0, 0.9);
  font-family: 'Questrial', sans-serif;
  font-size: 1.3rem;
  padding-bottom: 5px;
}
  
/* Banner */
  
.banner {
  color: white;
  font-family: 'Questrial';
  font-size: 1.2rem;
  padding: 15px;  
  margin: 20px 0;
} 
.banner > div > h2 {
  font-family: 'Poppins';
  margin-top: 20px;  
  color: black;
  font-size: 1.1rem;
}
.banner > div > span {
  font-size: 1.1rem;
  color: black;
}
.banner::before {
  content: "Text Here";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid black;
  position: relative;
  top: -25px;
  left: -35px;
  height: 20px;
  width: 350px;
  padding: 5px 0;
  font-weight: 500;
  -webkit-box-shadow: 10px 10px 5px -6px rgba(0,0,0,0.3);
  -moz-box-shadow: 10px 10px 5px -6px rgba(0,0,0,0.3);
  box-shadow: 10px 10px 5px -6px rgba(0,0,0,0.3);
}
.banner--blue { background-color: #0097FF; }
.banner--blue::before { background-color: #0097FF; }
.banner--red { background-color: #FF2A2A; }
.banner--red::before { background-color: #FF2A2A; }
.banner--purple { background-color: #642AFF; }
.banner--purple::before { background-color: #642AFF; }
.banner--gray { background-color: #4D4D4D; }
.banner--gray::before { background-color: #4D4D4D; }
.banner--green { background-color: #008402; }
.banner--green::before { background-color: #008402; }
.banner--yellow { background-color: #CBB300; }
.banner--yellow::before { background-color: #CBB300; }
</style>