TAG!
.slide:first-child
{
border-radius: 10px 0px 0px 10px;
}
*/
.slide {
display: flex;
align-items: center;
flex-direction: column;
min-height: 100vh;
width: 100%;
/*background-color: grey;*/
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 1;
/*border-radius: 10px 10px 0px 0px;*/
transition: opacity 0.5s ease-in-out;
}
.slide.active {
opacity: 1;
}
/*.slide.active > p {
display: block;
region-break-before: avoid-column;
}*/
.image-slider >.slider > .slide:not(.active)
{
display: none;
}
/* Navigation Buttons */
/*.nav-buttons {
position: flex;
}*/
.nav-buttons {
display: flex;
gap: 0px;
align-items: center;
justify-content: center;
padding-bottom: 20px;
/*z-index: 999;
position: absolute;
transform: translateY(340px);*/
}
.nav-buttons button {
background: none;
border: none;
cursor: pointer;
}
.nav-buttons button img {
width: 32px;
height: 32px;
}
/* Contact Now Section */
.contact-now {
text-align: center;
padding: 20px;
margin-top: 20px;
background: linear-gradient(0deg, red, lightcoral);
/*border-radius: 0px;*/
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
color: white;
}
.contact-now h2 {
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
.contact-now h2 .header-icon {
width: 32px;
height: 32px;
margin-right: 10px;
}
.contact-buttons {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.contact-buttons button {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
font-size: 16px;
border: 2px solid white;
border-radius: 5px;
background-color: darkred;
color: white;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.contact-buttons button:hover {
background-color: red;
border-color: darkred;
}
.contact-buttons button:active {
transform: scale(0.95);
}
.contact-buttons button .button-icon {
width: 24px;
height: 24px;
}
/* MENU STYLES */
.menu-button {
position: absolute; /* Or 'absolute' if relative to a specific container */
top: 15px;
right: 15px;
z-index: 1001; /* Ensure it's above the menu and other content */
width: 40px;
height: 30px; /* Height includes space between lines */
padding: 0px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-between; /* Distributes space between lines */
}
.menu-line {
display: block;
width: 100%;
height: 1px; /* Line thickness */
background-color: white;
border-radius: 4px;
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Animation */
transform-origin: center; /* Rotate around the center */
}
.menu-line p {
display: block;
}
/*#menu-toggle
{
position: fixed;
}*/
/*#upper-header {
position: relative;
}*/
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 4px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
user-select: none;
-webkit-tap-highlight-color: transparent; /* Prevents tap highlight color on mobile */
-moz-highlight: none; /* Prevents highlight on double-tap in Firefox */
}
.active, .dot:hover {
background-color: #717171;
}
* {
-webkit-tap-highlight-color: transparent; /* Prevents tap highlight color on mobile */
-moz-highlight: none; /* Prevents highlight on double-tap in Firefox */
}
/*.slide-text
{
display: flex;
flex-direction: column-reverse;
color: white;
}*/
/*.slide-new {
display: flex;
align-items: baseline;
justify-content: flex-end;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
border-radius: 10px 10px 10px 10px;
transition: opacity 0.5s ease-in-out;
/*box-sizing: border-box;*/
/*}
.slide-text {
display: flex; /* Existing style */
/*flex-direction: column-reverse; /* Existing style */
/*align-content: space-between;
align-items: baseline;
justify-content:flex-start;
color: white; /* Existing style */
/*padding: 100px; /* Example: Adds 10px padding around the text */
/* Or be more specific: */
/* padding-bottom: 10px; */
/* padding-left: 10px; */
/*margin-top: -20px;
}*/
.slide-text {
display: block;
/*align-content: center;
align-items: center;
text-align: center;
vertical-align: middle;*/
color: white; /* Existing style */
/*padding: 100px; /* Example: Adds 10px padding around the text */
/* Or be more specific: */
/* padding-bottom: 10px; */
/* padding-left: 10px; */
}
.slide-text-2
{
position: relative;
margin: auto 0px;
bottom: 0%;
padding: 5px;
color: white;
text-align: center;
display: inline-block;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
vertical-align: middle;
background: linear-gradient(180deg, grey, #000);
font-size: 45px;
}
.tangerine-regular {
font-family: "Tangerine", cursive;
font-weight: 400;
font-style: normal;
}
.tangerine-bold {
font-family: "Tangerine", cursive;
font-weight: 700;
font-style: normal;
}
.birthstone-regular {
font-family: "Birthstone", cursive;
font-weight: 400;
font-style: normal;
}
/*footer {
position: absolute;
bottom: 0px;
width: 100%;
}*/
/* Media Querys for Devices */
@media (max-width:412px), (max-width:425px), (max-width:426px) /* max-width: 412px */
{
*
{
/*min-width: 10%;*/
}
/*html
{
min-height: 100vh;
}*/
/*.grid-container
{
width: 90%;
max-width: 90%;
}*/
.grid-item h4
{
font-size: 25px;
line-height: normal;
}
.grid-item h6
{
font-size: 13px;
line-height: normal;
}
/*#header-logo
{
width: 70%;
height: 70%;
}*/
/*#header-title
{
font-size: 1.2rem;
line-height: 1.33rem;
}*/
#main-content > h1
{
font-size: 45px;
}
#main-content h5
{
font-size: 30px;
}
.item-4
{
padding: 10px;
}
.text-overlay > p
{
font-size: 30px;
}
.slide
{
background-size: contain;
}
.text-overlay
{
border-radius: 10px;
margin: 5px;
height: 7vh;
}
/*#header-logo
{
/*max-width: 40vw;
max-height: 30vh;
min-width: 20vw;
min-height: 10vh;*/
/*width: 90vw;
height: 25vh;
max-height: 95px;
}*/
.slide-text-2
{
/*font-size: 1rem;*/
}
#upper-header
{
margin-top: 10px;
}
.contact-buttons button
{
padding: 4px;
font-size: 1rem;
}
}
@media (min-width:320px)
{
.contact-buttons button
{
padding: 4px;
font-size: 0.9rem;
}
}
/* C4G RESET */
/* General Styles */
body {
margin: 0px;
font-family: Arial, sans-serif;
/*background: linear-gradient(120deg, #f5f5f5, #ffe5e5);*/
color: black;
background-color: black;
width: 100%;
text-rendering: optimizeLegibility;
}
/*#container {
display: flex;
justify-content: flex-start;
align-content: flex-end;
}*/
header {
display: flex;
justify-content: space-evenly;
background-color: black;
color: white;
padding: 20px;
width: auto;
/*margin: auto;*/
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
height: auto;
}
#container{
/*position: fixed;
top: 0px;
z-index: 999999;*/
justify-content: space-between;
width: auto;
height: auto;
padding-top: 20px;
}
.header-logo {
width: clamp(100px, 30%, 650px);
min-width: 100px;
height: auto;
/*padding: auto;
margin: auto;*/
align-self: center;
object-fit: contain;
}
.header-title {
margin: 0px;
padding: 0px;
width: auto;
text-align: center;
align-self: center;
/*margin-left: 50%;*/
/*font-size-adjust: auto;*/
/*font-size: 55px;*/
letter-spacing: 3px;
font-size: clamp(1.9rem, 5px + 4vw, 75px + 1vw);
filter: drop-shadow(0px 0px 2px red);
}
#house-logo {
width: 10%;
height: 5%;
margin-right: 20px;
align-content: center;
text-align: center;
align-items: center;
}
/*header h1 {
margin: 0;
/*display: none;
}*/
/* Image Slider Section */
.image-slider {
position: relative;
display: block;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
min-height: 100vh;
margin: 0 auto;
/*border-radius: 15px;
border-color: 2px solid white;*/
/*transition: box-shadow 0.3s ease, border 0.3s ease;*/
/*background-color: linear-gradient(180deg, #0000, #eeee);*/
margin-top: 25px;
}
.image-slider:hover {
/*border: 3px solid darkred;*/
/*box-shadow: 0 0 10px 5px rgba(255, 0, 0, 0.5);*/
}
.slider {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
/*background: linear-gradient(180deg, #efefef, #aeaeaeee);*/
/*border-radius: 12px;*/
}
.text-overlay {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
width: 200px;
padding: 5px;
text-align: center;
vertical-align: middle;
font-weight: bolder;
font-size: 200px;
/*background: linear-gradient(10deg, , grey);*/
background-color: #DF1114;
color: black;
border-top-left-radius: 10px;
/*border-bottom-left-radius: 10px;*/
/*border-top-right-radius: 10px;*/
border-bottom-right-radius: 10px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
position: relative;
transform: translateY(0px);
}
.text-overlay h2 {
display: flex;
align-items: center;
font-size: 24px;
margin: 0;
}
.text-overlay h2 .header-icon {
min-width: 24px;
min-height: 24px;
margin-right: 10px;
max-width: 100%;
max-height: 75%;
}
.text-overlay hr {
width: 100%;
height: 2px;
background-color: white;
/*border-bottom: 2px solid rgba(0, 0, 0, 0.3);*/
margin: 10px 0px;
}
.text-overlay p {
font-size: 16px;
line-height: 1.5;
}
/*
* USED WHEN THERE ARE MULTIPLE PICTURES ON ONE SLIDE,
* BUT EACH IMAGE IS INSIDE IT'S OWN
TAG!
.slide:first-child
{
border-radius: 10px 0px 0px 10px;
}
*/
.slide {
display: flex;
align-items: center;
flex-direction: column;
height: 100%;
width: 100%;
background: black; /*linear-gradient(180deg, #efefef, #aeaeaeee);*/
background-position: center;
background-repeat: no-repeat;
background-size: contain;
/*background-size: 50% 100%;*/
opacity: 1;
/*border-radius: 10px;*/
transition: opacity 0.5s ease-in-out;
}
.slide.active {
opacity: 1;
}
/*.slide.active > p {
display: block;
region-break-before: avoid-column;
}*/
.image-slider >.slider > .slide:not(.active)
{
display: none;
}
/* Navigation Buttons */
/*.nav-buttons {
position: flex;
}*/
.nav-buttons {
display: flex;
gap: 0px;
align-items: center;
justify-content: center;
margin-top: 5px;
padding-bottom: 20px;
/*z-index: 999;
position: absolute;
transform: translateY(340px);*/
}
.nav-buttons button {
background: none;
border: none;
cursor: pointer;
}
.nav-buttons button img {
width: 32px;
height: 32px;
}
/* Contact Now Section */
.contact-now {
text-align: center;
padding: 20px;
margin-top: 20px;
background: linear-gradient(0deg, red, lightcoral);
border-radius: 0px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
color: white;
}
.contact-now h2 {
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
.contact-now h2 .header-icon {
width: 32px;
height: 32px;
margin-right: 10px;
}
.contact-buttons {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.contact-buttons button {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
font-size: 16px;
border: 2px solid white;
border-radius: 5px;
background-color: darkred;
color: white;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.contact-buttons button:hover {
background-color: red;
border-color: darkred;
}
.contact-buttons button:active {
transform: scale(0.95);
}
.contact-buttons button .button-icon {
width: 24px;
height: 24px;
}
/* MENU STYLES */
.menu-button {
position: absolute; /* Or 'absolute' if relative to a specific container */
top: 15px;
right: 15px;
z-index: 1001; /* Ensure it's above the menu and other content */
width: 40px;
height: 30px; /* Height includes space between lines */
padding: 0px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-between; /* Distributes space between lines */
}
.menu-line {
display: block;
width: 100%;
height: 1px; /* Line thickness */
background-color: white;
border-radius: 4px;
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Animation */
transform-origin: center; /* Rotate around the center */
}
.menu-line p {
display: block;
}
/*#menu-toggle
{
position: fixed;
}*/
/*#upper-header {
position: relative;
}*/
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 4px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/*.slide-text
{
display: flex;
flex-direction: column-reverse;
color: white;
}*/
/*.slide-new {
display: flex;
align-items: baseline;
justify-content: flex-end;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
border-radius: 10px 10px 10px 10px;
transition: opacity 0.5s ease-in-out;
/*box-sizing: border-box;*/
/*}
.slide-text {
display: flex; /* Existing style */
/*flex-direction: column-reverse; /* Existing style */
/*align-content: space-between;
align-items: baseline;
justify-content:flex-start;
color: white; /* Existing style */
/*padding: 100px; /* Example: Adds 10px padding around the text */
/* Or be more specific: */
/* padding-bottom: 10px; */
/* padding-left: 10px; */
/*margin-top: -20px;
}*/
.slide-text {
display: block;
/*align-content: center;
align-items: center;
text-align: center;
vertical-align: middle;*/
color: white; /* Existing style */
/*padding: 100px; /* Example: Adds 10px padding around the text */
/* Or be more specific: */
/* padding-bottom: 10px; */
/* padding-left: 10px; */
}
.slide-text-2
{
position: relative;
margin: auto 0px;
bottom: 0%;
padding: 5px;
color: white;
text-align: center;
display: inline-block;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
vertical-align: middle;
background: linear-gradient(180deg, grey, #000);
font-size: 45px;
}
.tangerine-regular {
font-family: "Tangerine", cursive;
font-weight: 400;
font-style: normal;
}
.tangerine-bold {
font-family: "Tangerine", cursive;
font-weight: 700;
font-style: normal;
}
.birthstone-regular {
font-family: "Birthstone", cursive;
font-weight: 400;
font-style: normal;
}
footer {
position: relative;
bottom: 0px;
width: 100%;
}
#main-content {
background: linear-gradient(0deg, black, #282828);
width: 90%;
height: 100%;
margin: auto;
color: white;
text-align: center;
font-size: 30px;
border: #B90003 medium solid;
border-radius: 10px;
}
.img-border {
background: linear-gradient(45deg, #FF0000, #890002, #FF0000, #890002);
border-radius: 8px;
padding: 5px;
}
#main-content img {
border-radius: 8px;
}
#main-content > h1
{
text-decoration: underline;
letter-spacing: 4px;
margin: auto;
}
.staff-table {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
}
.staff-table {
width: 100%; /* Or 100% if you want it to fill its container, adjust as needed */
margin: 10px auto; /* Centers the table if its width is less than 100% */
border-collapse: separate; /* Use 'separate' to enable 'border-spacing'. Use 'collapse' if you prefer no space between borders. */
border-spacing: 2px; /* This is similar to cellspacing. Adjust the value for more or less space. Ignored if border-collapse: collapse; */
table-layout: fixed; /* This is important for making column widths behave as specified. */
text-align: center; /* Centers the text within all cells by default */
}
.staff-table th, /* If you add header cells (
) in the future */
.staff-table td {
vertical-align: top; /* Aligns content to the top of the cell */
width: 1%; /* For four equal columns. Adjust if you have a different number of columns. */
padding: auto; /* Adds spacing inside each cell */
/* border: 1px solid #ccc; /* Optional: if you want visible borders for cells */
text-align: center; /* Overrides the table's text-align: center if you want cell content left-aligned */
}
/* You might want to adjust the text alignment for specific columns or cells if needed */
.staff-table td {
text-align: center; /* If you want the names centered, for example */
}
.staff-table hr {
height: 1px;
width: 95%;
margin: -10px auto;
border: none;
border-top: 1px solid white;
}
.staff-table h6 {
font-size: 25px;
margin: 20px auto;
}
.staff-table h4 {
margin: 20px auto;
padding: 0px;
font-size: 30px;
}
#pennyName {
font-size: 20px;
margin: 20px auto;
}
#pennyInfo {
margin: 20px auto;
padding: 0px;
font-size: 20px;
text-align: center;
}
/* Grid Container Styling */
.grid-container {
display: grid;
/* Define 2 columns: first takes 2 fractions, second takes 1 fraction */
/*grid-template-columns: 33% 33% 33%;*/
/*grid-template-rows: auto auto;*/
/* Define 3 rows, each taking equal height */
/*grid-template-rows: repeat(3, 1fr);*/
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 0.5fr);
gap: 5px; /* Equivalent to gap-4 */
min-height: 300px; /* Minimum height for visualization */
/*background-color: #ffffff; /* Equivalent to bg-white */
padding: 1rem; /* Equivalent to p-4 */
border-radius: 0.5rem; /* Equivalent to rounded-lg */
/*box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Equivalent to shadow-md */
max-width: 100%; /* Equivalent to max-w-4xl */
width: 100%; /* Ensure it takes available width up to max-width */
box-sizing: border-box; /* Include padding and border in the element's total width and height */
align-self: center;
}
/* Grid Item Styling */
.grid-item {
border: 1px solid #d1d5db; /* Equivalent to border gray-300 */
border-radius: 0.375rem; /* Equivalent to rounded-md */
padding: 1px; /* Equivalent to p-4 */
display: block;
align-items: center;
justify-content: center;
grid-row-gap: 0fr 0fr;
grid-column-gap: 0fr 0fr;
/*font-family: 'Inter', sans-serif; /* Use Inter font */
box-sizing: content-box; /* Include padding and border in the element's total width and height */
}
.grid-container hr {
width: 80%;
}
/* Specific item placement and styling */
.item-1 {
/*margin: auto;*/
padding: 0;
/* Placed in column 1, row 1 (default) */
/*background-color: #dbeafe; /* Equivalent to bg-blue-100 */
color: white; /* Equivalent to text-blue-800 */
grid-column: 1 / 2; /* Start at col line 1, end before col line 2 */
grid-row: 1;
/*width: 100%;*/
height: auto;
/*height: 100%;
line-height: normal;*/
}
.grid-item h4 {
font-size: 40px;
margin-bottom: 0;
}
.grid-item h6 {
font-size: 30px;
margin-top: auto;
}
.item-2 {
/* Placed in column 1, row 2 (default) */
/*background-color: #d1fae5; /* Equivalent to bg-green-100 */
color: white; /* Equivalent to text-green-800 */
grid-column: 2 / 3; /* Start at col line 1, end before col line 2 */
grid-row: 1;
}
.item-3 {
/* Placed in column 1, row 3 (default) */
/*background-color: #fef3c7; /* Equivalent to bg-yellow-100 */
color: white; /* Equivalent to text-yellow-800 */
grid-column: 3 / 3; /* Start at col line 1, end before col line 2 */
grid-row: 1;
}
.item-4 {
/* Placed in column 2, spanning rows 1 to 3 */
/*background-color: #ede9fe; /* Equivalent to bg-purple-100 */
color: white; /* Equivalent to text-purple-800 */
grid-column: 1 / 4; /* Start at col line 2, end before col line 3 */
grid-row: 2; /* Start at row line 1, end before row line 4 (spans 3 rows) */
/*font-size: 30px;*/
text-rendering: optimizeLegibility;
}
.satisfy-regular {
font-family: "Satisfy", cursive;
font-weight: 400;
font-style: normal;
font-size: 30px;
}
/* Media Querys for Devices */
@media (max-width: 412px) /* max-width: 412px */
{
*
{
/*min-width: 10%;*/
}
/*html
{
min-height: 100vh;
}*/
/*.grid-container
{
width: 90%;
max-width: 90%;
}*/
.grid-item h4
{
font-size: 25px;
line-height: normal;
}
.grid-item h6
{
font-size: 13px;
line-height: normal;
}
/*#header-logo
{
width: 70%;
height: 70%;
}*/
/*#header-title
{
font-size: 25px;
}*/
#main-content > h1
{
font-size: 45px;
}
#main-content h5
{
font-size: 30px;
}
.item-4
{
padding: 10px;
}
}
.copyright-notice p {
text-align: center;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.85);
margin-top: 20px;
margin-bottom: 0px;
}
.created-by-notice {
display: none;
text-align: center;
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
margin-top: 5px;
margin-bottom: 20px;
}
.created-by-notice a {
color: rgba(255, 255, 255, 0.75);
text-decoration: wavy underline;
transition: all 0.3s ease-in-out;
}
.created-by-notice a:hover {
color: rgba(255, 255, 255, 0.85);
text-decoration: wavy underline;
} |