/* ============================================
EVERYDAYCUTZ - MAIN STYLESHEET
This file controls how ALL your pages look.
Link it in every HTML page's like this:
============================================ */
/* ---- FONT IMPORT ----
This pulls in 2 fonts from Google Fonts:
- Bebas Neue: bold, tall, great for big headlines (barbershop feel)
- Poppins: clean, modern, easy to read for paragraphs/body text
Add this @import at the very TOP of your CSS file, before anything else. */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@400;500;600;700&display=swap');
/* ============================================
1. GLOBAL RESET / BASE STYLES
These apply to the whole page unless overridden
============================================ */
body {
margin: 0;
padding: 0;
font-family: 'Georgia', sans-serif; /* body text uses Poppins */
background-color: #000000; /* dark charcoal background - classic barbershop look */
color: #f5f5f5; /* light gray/white text so it's readable on dark bg */
line-height: 1.5; /* adds space between lines so text isn't cramped */
}
/* Every heading uses the bold condensed font for that "barbershop sign" feel */
h1, h2, h3 {
font-family: 'Ariel', sans-serif;
font-size: 10rem;
letter-spacing: 1px; /* adds a little breathing room between letters */
color: #ffffff; /* gold accent color - classic barber pole/upscale feel */
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
border-bottom: 2px solid #d4af37; /* small gold underline under section titles */
padding-bottom: 8px;
margin-top: 40px;
}
h3 {
font-size: 1.4rem;
color: #ffffff; /* service titles in white so gold doesn't overwhelm the page */
}
/* Horizontal rule () - you're using a LOT of these as spacers.
This makes them subtle instead of a harsh black line. */
hr {
border: none; /* removes the default 3D border look */
border-top: 1px solid #333; /* thin, subtle divider line */
margin: 20px 0;
}
/* ============================================
2. NAVIGATION BAR
You built this using a
.
Tables aren't the "modern" way to do nav bars, but since
that's your current structure, this styles it to LOOK
like a proper nav bar using flexbox-like table display.
============================================ */
table.navigation {
width: 100%;
border-collapse: collapse; /* removes gaps between table cells */
background-color: #000000;
margin-bottom: 0;
}
table.navigation td {
border: none; /* removes the border="5" look from your HTML */
text-align: center;
padding: 15px 10px;
}
table.navigation a {
color: #f5f5f5;
text-decoration: none; /* removes the underline from links */
font-family: 'Bebas Neue', sans-serif;
font-size: 1.1rem;
letter-spacing: 5px;
transition: color 0.2s ease; /* smooth color change on hover */
}
table.navigation a:hover {
color: #d4af37; /* links turn gold when you hover over them */
}
/* ============================================
3. HERO / TITLE SECTION
Targets your
and
which both wrap the big "EVERYDAYCUTZ" h1
============================================ */
table.Home,
table.title {
width: 100%;
border-collapse: collapse;
text-align: center;
padding: 40px 0;
}
table.Home td,
table.title td {
border: none;
padding: 20px;
}
h1.Home,
h1.title {
font-size: 4rem;
margin: 0;
}
/* ============================================
4. FIGURE / HERO IMAGE + CAPTION
Styles your barbershop.jpg image and its figcaption
============================================ */
figure {
margin: 0;
text-align: center;
}
figure img {
width: 100%;
max-width: 800px; /* keeps the image from stretching too large on big screens */
height: auto; /* keeps the image's proportions correct */
border-radius: 6px; /* slightly rounded corners, softer look */
}
.hero-image {
display: block;
width: 200px;
max-width: 100%;
height: auto;
margin: 0 auto;
border-radius: 8px;
}
figcaption {
font-style: italic;
color: #cccccc;
margin-top: 10px;
font-size: 1.1rem;
}
/* ============================================
5. PARAGRAPH TEXT
============================================ */
p {
max-width: 700px; /* stops paragraphs from stretching edge-to-edge on wide screens */
margin: 15px auto; /* centers the paragraph block itself */
padding: 0 20px;
font-size: 20px;
color: #dcdcdc;
}
/* ============================================
6. SERVICES SECTION
Targets h3.services (Fades, Taper fades, Line ups, etc.)
and the
that lists them
============================================ */
ul {
list-style: none; /* removes the default bullet points */
padding: 0;
max-width: 700px;
margin: 0 auto;
}
li {
background-color: #242424;
padding: 20px;
margin: 15px auto;
border-radius: 100px;
border-left: 4px solid #d4af37; /* gold accent stripe on the left of each service */
color: #a5d8fa;
}
h3.services {
margin-top: 40px;
}
/* ============================================
7. GALLERY
Targets the .gallery div holding your images
============================================ */
.gallery {
display: flex; /* lines images up side-by-side */
flex-wrap: wrap; /* lets images drop to a new row on small screens */
justify-content: center;
gap: 15px; /* spacing between each image */
padding: 20px;
}
.gallery img {
width: 250px;
height: 200px;
object-fit: cover; /* crops images to fill the box neatly instead of stretching them */
border-radius: 6px;
border: 2px solid #d4af37;
}
/* ============================================
8. FORMS (Contact page + Booking page)
============================================ */
form {
max-width: 500px;
margin: 20px auto;
padding: 25px;
background-color: #242424;
border-radius: 8px;
}
form label {
display: block; /* puts each label on its own line */
margin-bottom: 6px;
font-weight: 600;
color: #f5f5f5;
}
form input,
form textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #444;
border-radius: 4px;
background-color: #1a1a1a;
color: #f5f5f5;
font-family: 'Poppins', sans-serif;
box-sizing: border-box; /* makes sure padding doesn't push the width past 100% */
}
form input[type="submit"] {
background-color: #d4af37;
color: #1a1a1a;
font-weight: 700;
border: none;
cursor: pointer; /* shows a hand cursor so people know it's clickable */
transition: background-color 0.2s ease;
}
form input[type="submit"]:hover {
background-color: #b8952c; /* slightly darker gold on hover */
}
/* ============================================
9. MAP (iframe on contact page)
============================================ */
iframe {
display: block;
margin: 20px auto;
border-radius: 6px;
max-width: 100%; /* keeps the map from overflowing on mobile screens */
}
/* ============================================
10. FOOTER
============================================ */
footer {
background-color: #000000;
padding: 30px 20px;
text-align: center;
margin-top: 40px;
}
footer p {
color: #999999;
font-size: 0.9rem;
}
footer a {
color: #d4af37;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
/* ============================================
11. "RESERVE NOW" BUTTON
Targets the Doc--primary button on your homepage
============================================ */
.Doc--primary {
display: inline-block;
background-color: #d4af37;
color: #1a1a1a !important; /* !important overrides the link's default blue/underline color */
font-family: 'Bebas Neue', sans-serif;
font-size: 1.3rem;
letter-spacing: 1px;
padding: 15px 40px;
border-radius: 4px;
text-decoration: none;
margin: 20px 0;
transition: background-color 0.2s ease;
}
.Doc--primary:hover {
background-color: #b8952c;
}
.Doc--center {
text-align: center;
}
#next {
font-family: 'Ariel', sans-serif;
background-color: #d4af37;
padding: 10px;
margin: 10px auto;
text-emphasis-color: #000000;
color: inherit; /* Inherit text color from parent */
text-decoration: none;
color: #000000;
border-radius: 10px;
border-left: 4px solid #b38a07; /* gold accent stripe on the left of each service */
border-right: 4px solid #b38a07;
border-top: 4px solid #b38a07;
border-bottom: 4px solid #b38a07;
}
hr {
border: none; /* removes the default 3D border look */
border-top: 1px solid #b38a07; /* thin, subtle divider line */
margin: 20px 0;
}
#gallery {
display: block;
margin: 20px auto;
border-radius: 6px;
max-width: 100%; /* keeps the gallery image from overflowing on mobile screens */
border-top: 2px solid #b38a07;
border-bottom: 2px solid #b38a07;
border-left: 2px solid #b38a07;
border-right: 2px solid #b38a07;
}