/* Apply these rules to every HTML element. */
* {
/* Remove the browser's default outside spacing. */
margin: 0;
/* Remove the browser's default inside spacing. */
padding: 0;
/*
Make width and height calculations easier.
Padding and borders will be included inside
an element's defined width and height.
*/
box-sizing: border-box;
}
/* Set the default appearance for the entire webpage. */
body {
/*
Use Cause as the main font.
"cursive" is the backup font category if Cause cannot load.
*/
font-family: "Cause", cursive;
/* Set the default text color to dark blue. */
color: var(--tlc-navy);
/* Set the webpage background to white. */
background-color: var(--tlc-white);
}
/* Style the main heading levels used throughout the website. */
h1,
h2,
h3 {
/*
Use Playfair Display for headings.
"serif" is the backup font category.
*/
font-family: "Playfair Display", serif;
}
/* Style paragraph text. */
p {
/* Use Cause for normal paragraph text. */
font-family: "Cause", cursive;
/*
Set the paragraph font to a heavy/bold weight.
700 is approximately the same as bold.
*/
font-weight: 700;
}
/* Style the main navigation container. */
nav {
/*
Turn the navigation into a Flexbox container.
This allows the logo, menu, and button
to sit next to each other horizontally.
*/
display: flex;
/*
Vertically center the items inside the navigation.
*/
align-items: center;
/*
Spread the logo, navigation links, and button
across the available horizontal space.
*/
justify-content: space-between;
/*
Prevent the navigation from becoming wider
than 1200 pixels on large screens.
*/
max-width: 1200px;
/*
0 = no top/bottom outside margin.
auto = automatically center the navigation
horizontally on the page.
*/
margin: 0 auto;
/*
Add space inside the navigation.
20px = top and bottom.
40px = left and right.
*/
padding: 20px 40px;
}
/* Style only images located inside the .logo container. */
.logo img {
/* Make the logo 140 pixels wide. */
width: 140px;
/*
Automatically calculate the height
so the logo keeps its original proportions.
*/
height: auto;
}
/* Style the unordered list containing the navigation links. */
.nav-links {
/*
Place the navigation list items
next to each other horizontally.
*/
display: flex;
/* Remove the normal bullet points from the list. */
list-style: none;
/* Add 35 pixels of space between each navigation item. */
gap: 35px;
}
/* Style links located inside the .nav-links list. */
.nav-links a {
/* Remove the browser's default underline from links. */
text-decoration: none;
/* Set navigation text to a dark gray/black color. */
color: #222;
/* Use Playfair Display for navigation links. */
font-family: "Playfair Display", serif;
/*
Set the font weight slightly heavier
than normal text.
*/
font-weight: 500;
}
/*
Change the navigation link appearance
when the mouse pointer is placed over it.
*/
.nav-links a:hover {
/* Change the link color to teal. */
color: var(--tlc-teal);
}
/* Style the special button located in the navigation bar. */
.nav-button {
/* Remove the normal underline from the link. */
text-decoration: none;
/* Give the button TLC's bright pink background. */
background-color: #ff176b;
/* Make the button text white. */
color: white;
/*
Add space inside the button.
12px = top and bottom.
24px = left and right.
*/
padding: 12px 24px;
/*
Round the corners to create
the pill-shaped button appearance.
*/
border-radius: 30px;
/* Make the button text bold. */
font-weight: bold;
}
/* ========================================
HERO SECTION
======================================== */
/* Style the main Hero section at the top of the homepage. */
.hero {
/*
Turn the Hero section into a Flexbox container.
The direct children are:
1. .hero-content
2. .hero-image
Flexbox will place them next to each other horizontally.
*/
display: flex;
/*
Vertically center the text and image
relative to each other.
*/
align-items: center;
/*
Put space between the text side
and the image side.
*/
justify-content: space-between;
/*
Prevent the Hero section from becoming
excessively wide on large screens.
*/
max-width: 1200px;
/*
Center the Hero section horizontally.
0 = no top/bottom outside margin.
auto = automatically center left/right.
*/
margin: 0 auto;
/*
Add space inside the Hero section.
60px = top and bottom.
40px = left and right.
*/
padding: 70px 40px;
/*
Add space between the two Flexbox children
if they begin getting close together.
*/
gap: 40px;
/*
Add multiple decorative background layers.
First image = left tropical artwork.
Second image = right tropical artwork.
Third layer = soft warm gradient.
*/
/* Needed so ::before stays inside the Hero section. */
position: relative;
/* Prevent decorative artwork from extending outside the Hero. */
overflow: hidden;
/* Keep only the soft background gradient here. */
background: linear-gradient(
135deg,
#ffffff 0%,
#fffaf5 50%,
#ffffff 100%
);
}
.hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 320px;
background-image: url("#");
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
opacity: 0.35;
pointer-events: none;
z-index: 0;
}
/* Style the text/content side of the Hero section. */
.hero-content {
.hero-image {
position: relative;
z-index: 1;
}
/*
Allow the text side to use approximately
half of the available Hero width.
*/
flex: 1;
/*
Prevent the text from becoming too wide,
which makes paragraphs harder to read.
*/
max-width: 550px;
}
/* Style the large primary heading inside the Hero section. */
.hero-content h1 {
/* Make the Hero heading large and prominent. */
font-size: 48px;
/*
Control the vertical spacing between
each line of the heading.
*/
line-height: 1.15;
/*
Use a bold version of Playfair Display.
*/
font-weight: 700;
/* Give the heading the TLC dark blue color. */
color: #153b5c;
/* Add space underneath the heading. */
margin-bottom: 20px;
}
/* Style the introductory paragraph in the Hero section. */
.hero-content p {
/* Set a readable paragraph font size. */
font-size: 16px;
/*
Increase the space between lines
so the paragraph is easier to read.
*/
line-height: 1.7;
/*
Use a slightly softer color than the heading
so the heading remains visually dominant.
*/
color: #333333;
/* Add space below the paragraph. */
margin-bottom: 30px;
}
/* Arrange the Hero buttons next to each other. */
.hero-buttons {
/*
Turn the button container into Flexbox
so the buttons sit horizontally.
*/
display: flex;
/* Add space between the two buttons. */
gap: 15px;
/*
Vertically align the buttons
if their sizes are slightly different.
*/
align-items: center;
}
/* Style the primary call-to-action button. */
.primary-button {
/* Remove the normal hyperlink underline. */
text-decoration: none;
/* Use TLC pink for the button background. */
background-color: #ff176b;
/* Make the button text white. */
color: #ffffff;
/*
Add space inside the button.
14px = top/bottom.
24px = left/right.
*/
padding: 14px 24px;
/* Create the rounded pill shape. */
border-radius: 30px;
/* Make the button text bold. */
font-weight: 700;
}
/* Change the primary button when the mouse hovers over it. */
.primary-button:hover {
background-color: #d9125a;
}
/* Style the secondary Hero button. */
.secondary-button {
/* Remove the normal hyperlink underline. */
text-decoration: none;
/* Use TLC teal for the text. */
color: #008c95;
/* Keep the inside of the button white. */
background-color: #ffffff;
/*
Add a thin teal border around the button.
1px = border thickness.
solid = continuous line.
*/
border: 1px solid #008c95;
/* Add space inside the button. */
padding: 14px 24px;
/* Create the rounded pill shape. */
border-radius: 30px;
/* Make the button text slightly bold. */
font-weight: 700;
}
/* Change the secondary button when the mouse hovers over it. */
.secondary-button:hover {
background-color: #008c95;
color: #ffffff;
}
/* Style the image side of the Hero section. */
.hero-image {
/*
Allow the image side to use
the remaining available space.
*/
flex: 1;
/*
Use Flexbox inside this container
so we can easily position the image.
*/
display: flex;
/*
Push the image toward the right side
of its container.
*/
justify-content: center;
/* Vertically center the image. */
align-items: center;
}
/* Style the image located inside the Hero image container. */
.hero-image img {
/*
Allow the image to use up to 500 pixels
of horizontal space.
*/
max-width: 500px;
/*
Prevent the image from becoming wider
than its available container.
*/
width: 100%;
/*
Automatically calculate the image height
so its proportions remain correct.
*/
height: auto;
}
/* ========================================
BRANDS & DIVISIONS SECTION
======================================== */
/* Style the entire Brands and Divisions section. */
.brands-section {
/*
Prevent the section content from becoming
excessively wide on large monitors.
*/
max-width: 1100px;
/*
Center the section horizontally.
auto calculates equal left and right margins.
*/
margin: 0 auto;
/*
Add vertical and horizontal space
inside the section.
*/
padding: 80px 40px;
background: linear-gradient(
180deg,
var(--tlc-white),
var(--tlc-cream)
);
}
/* Style the heading area above the brand cards. */
.section-heading {
/* Center the heading and paragraph text. */
text-align: center;
/*
Add space between the heading area
and the brand grid underneath it.
*/
margin-bottom: 50px;
}
/* Style the Brands and Divisions heading. */
.section-heading h2 {
/* Make the section heading large and noticeable. */
font-size: 38px;
/* Use the TLC dark blue color. */
color: #153b5c;
/* Add space underneath the heading. */
margin-bottom: 12px;
}
/* Style the introductory paragraph below the section heading. */
.section-heading p {
/*
Limit the width so the paragraph doesn't
stretch too far across the screen.
*/
max-width: 650px;
/*
Center the paragraph within its parent.
*/
margin: 0 auto;
/* Improve readability. */
line-height: 1.6;
/* Use a softer text color. */
color: #555555;
}
/* Create the 2 x 2 layout for the brand cards. */
.brands-grid {
/*
Turn this container into a CSS Grid.
*/
display: grid;
/*
Create two equal-width columns.
1fr = one fraction of the available space.
1fr 1fr = split the available width evenly.
*/
grid-template-columns: repeat(2, 1fr);
/*
Add 30 pixels of space between
both the rows and columns.
*/
gap: 30px;
}
/* Style each individual brand card. */
.brand-card {
/*
Give each card a white background.
*/
background-color: #ffffff;
/*
Add space inside each card so the text
does not touch the card edges.
*/
padding: 40px;
/*
Slightly round the corners.
*/
border-radius: 20px;
/*
Add a subtle border around the card.
*/
border: 1px solid #eeeeee;
/*
Give the card some vertical height
so all four cards feel substantial.
*/
min-height: 250px;
/*
Smoothly animate visual changes
instead of changing instantly.
*/
transition: 0.3s ease;
/*
Needed so decorative artwork can be
positioned relative to this card.
*/
position: relative;
/*
Clip artwork at the rounded card edges.
The artwork can reach the edge without
spilling outside the card.
*/
overflow: hidden;
}
/* Create decorative artwork inside every brand card. */
.brand-card::before {
/* Required for a pseudo-element. */
content: "";
/*
Position the artwork independently
inside the card.
*/
position: absolute;
/*
Stretch the decorative layer across
the entire card.
*/
inset: 0;
/* Load the image assigned to each brand. */
background-image: var(--brand-art);
/* Prevent the artwork from repeating. */
background-repeat: no-repeat;
/*
Make the artwork large enough to reach
toward the card edges.
*/
background-size: 100% auto;
/* Position the artwork toward the top. */
background-position: center top;
/*
Keep the artwork somewhat subtle
behind the real content.
*/
opacity: 0.35;
/* Place decoration behind the card content. */
z-index: 0;
/*
Prevent the decorative layer from
interfering with links/buttons.
*/
pointer-events: none;
}
/* Style the title inside each brand card. */
.brand-card h3 {
/* Make the brand name prominent. */
font-size: 26px;
/* Use TLC dark blue. */
color: #153b5c;
/* Add space underneath the heading. */
margin-bottom: 15px;
}
/* Style the description inside each brand card. */
.brand-card p {
/* Use a comfortable reading size. */
font-size: 16px;
/* Improve spacing between lines. */
line-height: 1.7;
/* Use a softer text color. */
color: #555555;
/*
Add space between the description
and the link underneath.
*/
margin-bottom: 25px;
}
.brand-card a {
position: relative;
z-index: 1;
}
/* Style the link inside each brand card. */
.brand-link {
/* Remove the standard link underline. */
text-decoration: none;
/* Use TLC teal. */
color: #008c95;
/* Make the link stand out. */
font-weight: 700;
}
/* Change the brand link when the mouse hovers over it. */
.brand-link:hover {
/* Change from teal to TLC pink. */
color: #ff176b;
}
/* Change the card appearance when the mouse hovers over it. */
.brand-card:hover {
/*
Move the card upward by 5 pixels.
Negative Y means move upward.
*/
transform: translateY(-5px);
/*
Add a soft shadow underneath the card.
*/
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
/* Annie's Paint Lab accent. */
.annies-card {
--brand-art: url("../images/annies-card.png");
border-top: 5px solid var(--tlc-teal);
}
.annies-card::before {
background-position: left top;
background-size: 115% auto;
}
/* Zy's Bakes accent. */
.zys-card {
--brand-art: url("../images/zys-card.png");
border-top: 5px solid var(--tlc-pink);
}
.zys-card::before {
background-position: right top;
background-size: 110% auto;
}
/* Technology Services accent. */
.tech-card {
--brand-art: url("../images/tech-card.png");
border-top: 5px solid var(--tlc-navy);
}
.tech-card::before {
background-position: center top;
background-size: 120% auto;
}
/* Future Ventures accent. */
.future-card {
--brand-art: url("../images/futures-card.png");
border-top: 5px solid var(--tlc-orange);
}
.future-card::before {
background-position: center top;
background-size: 120% auto;
}
/* ========================================
ABOUT US PREVIEW SECTION
======================================== */
/* Create the large rounded container for the About section. */
.about-section {
/*
Use CSS Grid because this section has
three distinct columns:
image | text | highlights
*/
display: grid;
/*
Left image is smaller.
Middle content receives the most space.
Right highlights receive medium space.
*/
grid-template-columns: 220px 1.5fr 1fr;
/* Vertically center everything inside the section. */
align-items: center;
/* Add space between the three columns. */
gap: 35px;
/* Limit the section width on large monitors. */
max-width: 1200px;
/* Center the section horizontally. */
margin: 40px auto;
/* Add internal spacing. */
padding: 35px 40px;
/* Give the section a white background. */
background-color: var(--tlc-white);
/* Create the large rounded corners seen in the mockup. */
border-radius: 25px;
/* Add a soft border. */
border: 1px solid #eeeeee;
/* Add a very subtle shadow underneath. */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
position: relative;
overflow: hidden;
}
.about-section::after {
/*
Pseudo-elements require content,
even when no text is displayed.
*/
content: "";
position: absolute;
right: -20px;
bottom: -20px;
width: 180px;
height: 180px;
background-image: url("#");
background-size: contain;
background-repeat: no-repeat;
/*
Make the artwork subtle so it does
not compete with the text.
*/
opacity: 0.15;
/*
Keep decorative artwork behind
the section content.
*/
z-index: 0;
}
/* Style the image container on the left. */
.about-image {
display: flex;
justify-content: center;
align-items: center;
}
/* Style the actual About image. */
.about-image img {
/* Create a square image area. */
width: 200px;
height: 200px;
/*
Make the image circular.
50% creates a circle when width and height are equal.
*/
border-radius: 50%;
/*
Fill the circle without stretching
the original photograph.
*/
object-fit: cover;
}
/* Style the small ABOUT US label. */
.about-content .section-label {
color: #ff176b;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
margin-bottom: 8px;
}
/* Style the main About heading. */
.about-content h2 {
font-size: 30px;
color: #153b5c;
line-height: 1.2;
margin-bottom: 12px;
}
/* Style paragraphs inside the About content. */
.about-content p:not(.section-label) {
font-size: 14px;
line-height: 1.7;
color: #555555;
margin-bottom: 8px;
}
/* Stack the About highlights vertically. */
.about-highlights {
display: flex;
flex-direction: column;
gap: 18px;
}
/* Place each checkmark beside its statement. */
.highlight-item {
display: flex;
align-items: flex-start;
gap: 12px;
}
/* Style the teal circular checkmark. */
.check-icon {
/* Give the checkmark its own small circle. */
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
/* Prevent Flexbox from shrinking the circle. */
flex-shrink: 0;
background-color: #00a5a5;
color: #ffffff;
border-radius: 50%;
font-size: 13px;
font-weight: bold;
}
/* Style the highlight statement text. */
.highlight-item p {
font-size: 14px;
line-height: 1.5;
color: #153b5c;
font-weight: 700;
}
/* ========================================
FEATURED GALLERY SECTION
======================================== */
/* Style the entire Featured Gallery section. */
.gallery-preview {
max-width: 1200px;
margin: 0 auto;
padding: 55px 40px 75px;
background: linear-gradient(
180deg,
var(--tlc-white) 0%,
#fff6f8 50%,
var(--tlc-white) 100%
);
}
/* Center the gallery heading. */
.gallery-heading {
text-align: center;
margin-bottom: 25px;
}
/* Style the small FEATURED GALLERY label. */
.gallery-heading .section-label {
color: #ff176b;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
margin-bottom: 8px;
}
/* Style the main gallery heading. */
.gallery-heading h2 {
font-size: 30px;
color: #153b5c;
}
/* Create a six-column image gallery. */
.gallery-grid {
/* Use CSS Grid for the images. */
display: grid;
/* Create six equal-width columns. */
grid-template-columns: repeat(6, 1fr);
/* Create small spaces between images. */
gap: 10px;
}
/* Style every image inside the gallery. */
.gallery-grid img {
/* Fill the width of each grid cell. */
width: 100%;
/* Give all gallery pictures equal height. */
height: 150px;
/*
Crop images as necessary instead
of stretching them.
*/
object-fit: cover;
/* Slightly round the image corners. */
border-radius: 12px;
/*
Smoothly animate changes when
hovering over an image.
*/
transition: 0.3s ease;
}
/* Add a subtle interaction to gallery images. */
.gallery-grid img:hover {
/* Slightly enlarge the image. */
transform: scale(1.03);
}
/* ========================================
FOOTER
======================================== */
/* Style the entire website footer. */
.site-footer {
/*
Use TLC's dark teal/blue color
as the footer background.
*/
background:
linear-gradient(
135deg,
#006f7a,
#004f68
);
background-color: var(--tlc-dark-teal);
/* Make default footer text white. */
color: #ffffff;
/*
Add space above the footer content.
Bottom padding is handled partly
by the copyright section.
*/
padding-top: 35px;
}
/* Control the main content inside the footer. */
.footer-container {
/*
Use CSS Grid because the footer
contains four distinct areas.
*/
display: grid;
/*
Create four columns.
Logo = smaller
Tagline = larger
Social = medium
Contact = larger
*/
grid-template-columns: 160px 1.4fr 1fr 1.2fr;
/* Vertically center all footer sections. */
align-items: center;
/* Add space between each column. */
gap: 35px;
/* Prevent the footer content from becoming too wide. */
max-width: 1200px;
/* Center the footer content horizontally. */
margin: 0 auto;
/* Add left/right and bottom spacing. */
padding: 20px 40px 30px;
}
/* Style the TLC logo inside the footer. */
.footer-logo img {
/* Control the logo width. */
width: 140px;
/*
Automatically preserve the
logo's original proportions.
*/
height: auto;
}
/* Style the TLC footer tagline. */
.footer-tagline p {
/* Use Playfair Display for an elegant look. */
font-family: "Playfair Display", serif;
/* Increase the text size slightly. */
font-size: 18px;
/* Improve spacing between lines. */
line-height: 1.5;
/* Keep footer text white. */
color: #ffffff;
}
/* Style the Connect With Us heading. */
.footer-social h3 {
/* Use white text. */
color: #ffffff;
/* Use a readable heading size. */
font-size: 16px;
/* Add space underneath the heading. */
margin-bottom: 15px;
}
/* Arrange the social links horizontally. */
.social-links {
/* Use Flexbox to place icons side-by-side. */
display: flex;
/* Add space between each social icon. */
gap: 12px;
}
/* Style each social media link as a circle. */
.social-links a {
/*
Use Flexbox so the symbol can
be perfectly centered inside the circle.
*/
display: flex;
align-items: center;
justify-content: center;
/* Set the circle size. */
width: 38px;
height: 38px;
/* Give the circle a white background. */
background-color: #ffffff;
/* Use TLC dark blue for the symbol. */
color: #153b5c;
/* Remove normal hyperlink underlines. */
text-decoration: none;
/* Turn the square into a circle. */
border-radius: 50%;
/* Make the symbol bold. */
font-weight: 700;
/* Smooth hover changes. */
transition: 0.3s ease;
}
/* Change social icons when hovered. */
.social-links a:hover {
/* Use TLC pink. */
background-color: #ff176b;
/* Keep the symbol white. */
color: #ffffff;
/* Slightly move the icon upward. */
transform: translateY(-3px);
}
/* Style the footer contact heading. */
.footer-contact h3 {
/* Keep heading white. */
color: #ffffff;
/* Set heading size. */
font-size: 17px;
/* Add space underneath. */
margin-bottom: 5px;
}
/* Style the short contact message. */
.footer-contact p {
/* Use a smaller supporting font size. */
font-size: 14px;
/* Use white text. */
color: #ffffff;
/* Add space between the message and button. */
margin-bottom: 15px;
}
/* Style the footer Contact Us button. */
.footer-button {
/*
Allow padding to create a
proper button shape.
*/
display: inline-block;
/* Remove the normal hyperlink underline. */
text-decoration: none;
/* Use TLC pink. */
background-color: #ff176b;
/* Use white text. */
color: #ffffff;
/* Add internal spacing. */
padding: 12px 24px;
/* Create the rounded pill shape. */
border-radius: 30px;
/* Make the button text bold. */
font-weight: 700;
/* Smooth hover changes. */
transition: 0.3s ease;
}
/* Change the footer button when hovered. */
.footer-button:hover {
/* Use a slightly darker pink. */
background-color: #d9125a;
/* Slightly lift the button upward. */
transform: translateY(-2px);
}
/* Style the bottom copyright area. */
.footer-bottom {
/*
Add a subtle divider line above
the copyright text.
*/
border-top: 1px solid rgba(255, 255, 255, 0.20);
/* Center the copyright text. */
text-align: center;
/* Add vertical spacing. */
padding: 15px 20px;
}
/* Style the copyright text. */
.footer-bottom p {
/* Keep text small and subtle. */
font-size: 13px;
/* Use slightly transparent white. */
color: rgba(255, 255, 255, 0.85);
/* Remove unnecessary paragraph spacing. */
margin: 0;
}
/* ========================================
UNDER CONSTRUCTION PAGE
======================================== */
/* Main construction page container. */
.construction-page {
/*
Use Flexbox so the content can
easily be centered.
*/
display: flex;
justify-content: center;
align-items: center;
/*
Give the page enough vertical space
so it doesn't feel empty.
*/
min-height: 650px;
/* Add space around the content. */
padding: 70px 20px;
/*
Add a soft TLC tropical background.
*/
background:
radial-gradient(
circle at top left,
rgba(0, 165, 165, 0.10),
transparent 35%
),
radial-gradient(
circle at bottom right,
rgba(255, 23, 107, 0.10),
transparent 35%
),
linear-gradient(
135deg,
var(--tlc-white),
var(--tlc-cream)
);
}
/* Center the construction page content. */
.construction-content {
text-align: center;
max-width: 700px;
width: 100%;
background-color: rgba(255, 255, 255, 0.90);
padding: 55px 40px;
border-radius: 30px;
border: 1px solid #eeeeee;
box-shadow:
0 15px 40px rgba(0, 0, 0, 0.08);
}
/* TLC logo displayed on the construction page. */
.construction-logo {
width: 180px;
height: auto;
margin-bottom: 20px;
}
/* Small page identifier above the heading. */
.construction-label {
color: var(--tlc-pink);
font-size: 14px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 12px;
}
/* Main Under Construction heading. */
.construction-content h1 {
font-family: "Playfair Display", serif;
color: var(--tlc-navy);
font-size: 48px;
line-height: 1.15;
margin-bottom: 20px;
}
/* Main explanatory message. */
.construction-message {
color: var(--tlc-muted);
font-size: 17px;
line-height: 1.8;
max-width: 560px;
margin:
0 auto
30px;
}
/* Page construction status message. */
.construction-status {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
color: var(--tlc-teal);
font-weight: 700;
margin-bottom: 30px;
}
/* Decorative icons surrounding the status message. */
.status-icon {
color: var(--tlc-orange);
font-size: 20px;
}
/* ========================================
RESPONSIVE DESIGN - TABLETS
======================================== */
/*
Apply these rules when the browser
is 1024px wide or smaller.
*/
@media (max-width: 1024px) {
/* --------------------
NAVIGATION
-------------------- */
nav {
padding: 20px 25px;
gap: 20px;
}
.logo img {
width: 120px;
}
.nav-links {
gap: 20px;
}
.nav-links a {
font-size: 14px;
}
.nav-button {
padding: 10px 18px;
font-size: 14px;
}
/* --------------------
HERO
-------------------- */
.hero {
padding: 60px 30px;
gap: 30px;
}
.hero-content h1 {
font-size: 40px;
}
.hero-image img {
max-width: 420px;
}
/*
Make the tropical artwork slightly smaller
on tablet screens.
*/
.hero::before {
width: 260px;
}
/* --------------------
BRANDS
-------------------- */
.brands-section {
padding: 70px 30px;
}
.brand-card {
padding: 30px;
}
/* --------------------
ABOUT
-------------------- */
.about-section {
/*
Change the three desktop columns into
two columns.
Image gets its own column.
Text/highlights use remaining space.
*/
grid-template-columns: 180px 1fr;
padding: 30px;
margin: 30px 25px;
}
.about-image img {
width: 160px;
height: 160px;
}
/*
Let the highlights use the entire
second row.
*/
.about-highlights {
grid-column: 1 / -1;
/*
Put the three highlights beside
each other on tablets.
*/
flex-direction: row;
justify-content: space-between;
}
.highlight-item {
flex: 1;
}
/* --------------------
GALLERY
-------------------- */
.gallery-grid {
/*
Change from six images across
to three images across.
*/
grid-template-columns: repeat(3, 1fr);
}
/* --------------------
FOOTER
-------------------- */
.footer-container {
/*
Change the four-column footer
into two columns.
*/
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
}
/* ========================================
RESPONSIVE DESIGN - PHONES
======================================== */
/*
Apply these rules when the browser
is 768px wide or smaller.
*/
@media (max-width: 768px) {
/* --------------------
NAVIGATION
-------------------- */
nav {
/*
Stack the navigation instead
of forcing everything onto one row.
*/
flex-direction: column;
gap: 15px;
padding: 15px 20px;
}
.logo img {
width: 110px;
}
.nav-links {
/*
Allow navigation links to move
onto another line if necessary.
*/
flex-wrap: wrap;
justify-content: center;
gap: 12px 20px;
}
.nav-links a {
font-size: 14px;
}
.nav-button {
padding: 10px 20px;
}
/* --------------------
HERO
-------------------- */
.hero {
/*
Change the Hero from:
TEXT | IMAGE
into:
TEXT
IMAGE
*/
flex-direction: column;
text-align: center;
padding: 45px 20px;
gap: 35px;
}
.hero-content {
max-width: 100%;
}
.hero-content h1 {
font-size: 36px;
}
.hero-content p {
font-size: 15px;
}
/* Center the Hero buttons. */
.hero-buttons {
justify-content: center;
flex-wrap: wrap;
}
/* Make the logo smaller on phones. */
.hero-image img {
max-width: 350px;
}
/*
Reduce the tropical artwork so it
does not overpower the text.
*/
.hero::before {
width: 220px;
opacity: 0.15;
}
/* --------------------
SECTION HEADINGS
-------------------- */
.section-heading h2 {
font-size: 32px;
}
/* --------------------
BRANDS
-------------------- */
.brands-section {
padding: 55px 20px;
}
.brands-grid {
/*
Change:
CARD | CARD
CARD | CARD
into:
CARD
CARD
CARD
CARD
*/
grid-template-columns: 1fr;
}
.brand-card {
padding: 30px;
min-height: 220px;
}
/* --------------------
ABOUT
-------------------- */
.about-section {
/*
Stack all About content
vertically.
*/
grid-template-columns: 1fr;
text-align: center;
gap: 25px;
padding: 30px 20px;
margin: 25px 15px;
}
.about-image {
justify-content: center;
}
.about-image img {
width: 180px;
height: 180px;
}
.about-content h2 {
font-size: 28px;
}
/*
Highlights return to a vertical
layout on smaller screens.
*/
.about-highlights {
grid-column: auto;
flex-direction: column;
align-items: flex-start;
max-width: 350px;
margin: 0 auto;
text-align: left;
}
/* --------------------
GALLERY
-------------------- */
.gallery-preview {
padding: 45px 20px 55px;
}
.gallery-grid {
/*
Two gallery images per row.
*/
grid-template-columns: repeat(2, 1fr);
}
.gallery-grid img {
height: 160px;
}
/* --------------------
FOOTER
-------------------- */
.footer-container {
/*
Stack footer sections.
*/
grid-template-columns: 1fr;
text-align: center;
padding: 25px 20px;
}
.footer-logo {
display: flex;
justify-content: center;
}
.social-links {
justify-content: center;
}
/* --------------------
UNDER CONSTRUCTION PAGE
-------------------- */
.construction-page {
min-height: 550px;
padding: 40px 15px;
}
.construction-content {
padding: 40px 25px;
}
.construction-logo {
width: 150px;
}
.construction-content h1 {
font-size: 36px;
}
.construction-message {
font-size: 15px;
}
}
/* ========================================
RESPONSIVE DESIGN - SMALL PHONES
======================================== */
@media (max-width: 480px) {
/* --------------------
NAVIGATION
-------------------- */
.nav-links {
gap: 10px 14px;
}
.nav-links a {
font-size: 13px;
}
/* --------------------
HERO
-------------------- */
.hero {
padding: 35px 15px;
}
.hero-content h1 {
font-size: 30px;
line-height: 1.2;
}
.hero-content p {
font-size: 14px;
}
/*
Stack the Hero buttons vertically
on very narrow phones.
*/
.hero-buttons {
flex-direction: column;
}
.primary-button,
.secondary-button {
width: 100%;
text-align: center;
}
/* Make the Hero logo smaller. */
.hero-image img {
max-width: 280px;
}
/* --------------------
BRANDS
-------------------- */
.section-heading h2 {
font-size: 28px;
}
.brand-card {
padding: 25px;
}
.brand-card h3 {
font-size: 23px;
}
/* --------------------
ABOUT
-------------------- */
.about-content h2 {
font-size: 25px;
}
/* --------------------
GALLERY
-------------------- */
.gallery-grid {
/*
Keep two images across but
reduce image height.
*/
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.gallery-grid img {
height: 125px;
}
/* --------------------
FOOTER
-------------------- */
.footer-tagline p {
font-size: 16px;
}
/* --------------------
UNDER CONSTRUCTION PAGE
-------------------- */
.construction-content {
padding: 35px 20px;
}
.construction-logo {
width: 130px;
}
.construction-content h1 {
font-size: 30px;
}
.construction-status {
font-size: 14px;
}
}
/* ========================================
TLC COLOR PALETTE
======================================== */
:root {
/* Main TLC dark blue used for headings. */
--tlc-navy: #153b5c;
/* Main tropical teal. */
--tlc-teal: #00a5a5;
/* Darker teal used for the footer. */
--tlc-dark-teal: #006f7a;
/* Bright TLC pink used for buttons and accents. */
--tlc-pink: #ff176b;
/* Slightly darker pink for hover effects. */
--tlc-dark-pink: #d9125a;
/* Tropical orange accent. */
--tlc-orange: #ff8a00;
/* Tropical green accent. */
--tlc-green: #65a844;
/* Main dark paragraph color. */
--tlc-text: #333333;
/* Softer paragraph text. */
--tlc-muted: #555555;
/* Soft warm background color. */
--tlc-cream: #fffaf5;
/* Very light tropical aqua. */
--tlc-aqua-light: #eefafa;
/* Standard white. */
--tlc-white: #ffffff;
}
/* ========================================
FULL ABOUT PAGE
======================================== */
/* Show visitors which navigation page is active. */
.nav-links a[aria-current="page"] {
color: var(--tlc-teal);
font-weight: 700;
}
/* Shared small pink labels used throughout the About page. */
.about-page-label {
color: var(--tlc-pink);
font-size: 13px;
font-weight: 800;
letter-spacing: 1.8px;
text-transform: uppercase;
margin-bottom: 12px;
}
/* --------------------
ABOUT HERO
-------------------- */
.about-page-hero {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
align-items: center;
gap: 55px;
max-width: 1200px;
margin: 0 auto;
padding: 80px 40px 90px;
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 5% 15%, rgba(0, 165, 165, 0.11), transparent 28%),
radial-gradient(circle at 95% 85%, rgba(255, 23, 107, 0.10), transparent 30%),
linear-gradient(135deg, var(--tlc-white), var(--tlc-cream));
}
.about-page-hero-copy,
.about-page-hero-art {
position: relative;
z-index: 1;
}
.about-page-hero h1 {
color: var(--tlc-navy);
font-size: 54px;
line-height: 1.08;
margin-bottom: 24px;
}
.about-page-hero-copy > p:not(.about-page-label) {
color: var(--tlc-muted);
font-size: 17px;
line-height: 1.8;
margin-bottom: 15px;
}
.about-page-hero-copy .about-page-lead {
color: var(--tlc-navy);
font-size: 19px;
}
.about-page-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 30px;
}
.about-page-hero-art {
text-align: center;
}
.about-page-logo-card {
max-width: 430px;
margin: 0 auto 18px;
padding: 25px;
background-color: rgba(255, 255, 255, 0.84);
border: 1px solid rgba(0, 165, 165, 0.18);
border-radius: 34px;
box-shadow: 0 18px 45px rgba(21, 59, 92, 0.10);
}
.about-page-logo-card img {
display: block;
width: 100%;
height: auto;
}
.about-page-hero-art > p {
color: var(--tlc-navy);
font-family: "Playfair Display", serif;
font-size: 18px;
line-height: 1.5;
}
/* --------------------
MISSION
-------------------- */
.about-page-mission {
display: grid;
grid-template-columns: minmax(280px, 0.85fr) 1.35fr;
align-items: center;
gap: 65px;
max-width: 1150px;
margin: 0 auto;
padding: 90px 40px;
}
.about-page-family-image {
display: flex;
justify-content: center;
}
.about-page-family-image img {
width: min(100%, 390px);
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 50%;
border: 8px solid var(--tlc-white);
box-shadow: 0 15px 35px rgba(21, 59, 92, 0.12);
outline: 18px solid rgba(0, 165, 165, 0.08);
}
.about-page-mission h2 {
color: var(--tlc-navy);
font-size: 40px;
line-height: 1.18;
margin-bottom: 20px;
}
.about-page-mission-copy > p:not(.about-page-label) {
color: var(--tlc-muted);
font-size: 16px;
line-height: 1.8;
margin-bottom: 16px;
}
.about-page-callout {
display: flex;
align-items: flex-start;
gap: 15px;
margin-top: 28px;
padding: 22px 24px;
border-left: 5px solid var(--tlc-teal);
border-radius: 0 18px 18px 0;
background-color: var(--tlc-aqua-light);
}
.about-page-callout > span {
color: var(--tlc-pink);
font-size: 26px;
line-height: 1;
}
.about-page-callout p {
color: var(--tlc-navy);
font-size: 15px;
line-height: 1.65;
}
/* --------------------
SECTION HEADING
-------------------- */
.about-page-heading {
max-width: 760px;
margin: 0 auto 50px;
text-align: center;
}
.about-page-heading-left {
margin-left: 0;
text-align: left;
}
.about-page-heading h2 {
color: var(--tlc-navy);
font-size: 40px;
margin-bottom: 14px;
}
.about-page-heading > p:not(.about-page-label) {
color: var(--tlc-muted);
font-size: 16px;
line-height: 1.7;
}
/* --------------------
VALUES
-------------------- */
.about-page-values {
padding: 90px 40px;
background:
radial-gradient(circle at top right, rgba(255, 138, 0, 0.08), transparent 25%),
linear-gradient(180deg, var(--tlc-cream), var(--tlc-white));
}
.about-page-values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
max-width: 1120px;
margin: 0 auto;
}
.about-value-card {
min-height: 260px;
padding: 30px;
border-radius: 22px;
background-color: var(--tlc-white);
border: 1px solid #eeeeee;
box-shadow: 0 10px 28px rgba(21, 59, 92, 0.06);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.about-value-card:hover {
transform: translateY(-5px);
box-shadow: 0 16px 34px rgba(21, 59, 92, 0.10);
}
.about-value-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-bottom: 20px;
border-radius: 50%;
color: var(--tlc-white);
font-size: 22px;
font-weight: 800;
}
.about-value-card h3 {
color: var(--tlc-navy);
font-size: 24px;
margin-bottom: 12px;
}
.about-value-card p {
color: var(--tlc-muted);
font-size: 14px;
line-height: 1.7;
}
.value-family { border-top: 5px solid var(--tlc-teal); }
.value-family .about-value-icon { background-color: var(--tlc-teal); }
.value-faith { border-top: 5px solid var(--tlc-orange); }
.value-faith .about-value-icon { background-color: var(--tlc-orange); }
.value-love { border-top: 5px solid var(--tlc-pink); }
.value-love .about-value-icon { background-color: var(--tlc-pink); }
.value-creativity { border-top: 5px solid #b46bc7; }
.value-creativity .about-value-icon { background-color: #b46bc7; }
.value-technology { border-top: 5px solid var(--tlc-navy); }
.value-technology .about-value-icon { background-color: var(--tlc-navy); }
.value-service { border-top: 5px solid var(--tlc-green); }
.value-service .about-value-icon { background-color: var(--tlc-green); }
/* --------------------
UMBRELLA STRUCTURE
-------------------- */
.about-page-umbrella {
max-width: 1150px;
margin: 0 auto;
padding: 95px 40px;
}
.about-page-umbrella-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.about-page-umbrella-grid article {
min-height: 280px;
padding: 34px 30px;
border-radius: 24px;
background: linear-gradient(145deg, #ffffff, #f9ffff);
border: 1px solid rgba(0, 165, 165, 0.17);
}
.about-page-umbrella-grid article > span {
display: block;
margin-bottom: 28px;
color: rgba(0, 165, 165, 0.42);
font-family: "Playfair Display", serif;
font-size: 40px;
font-weight: 800;
}
.about-page-umbrella-grid h3 {
color: var(--tlc-navy);
font-size: 24px;
margin-bottom: 12px;
}
.about-page-umbrella-grid p {
color: var(--tlc-muted);
font-size: 14px;
line-height: 1.75;
}
.about-page-center-action {
margin-top: 35px;
}
/* --------------------
LEGACY
-------------------- */
.about-page-legacy {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 70px;
max-width: 1200px;
margin: 0 auto 90px;
padding: 65px 55px;
border-radius: 34px;
background:
radial-gradient(circle at bottom left, rgba(255, 138, 0, 0.13), transparent 32%),
radial-gradient(circle at top right, rgba(255, 23, 107, 0.11), transparent 30%),
linear-gradient(135deg, #f5ffff, #fff8f4);
border: 1px solid rgba(0, 165, 165, 0.14);
}
.about-page-legacy h2 {
color: var(--tlc-navy);
font-size: 40px;
line-height: 1.15;
margin-bottom: 22px;
}
.about-page-legacy-copy > p:not(.about-page-label) {
color: var(--tlc-muted);
font-size: 15px;
line-height: 1.8;
margin-bottom: 15px;
}
.about-page-legacy-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.about-page-legacy-list article {
display: grid;
grid-template-columns: 48px 1fr;
gap: 17px;
align-items: flex-start;
padding: 22px;
background-color: rgba(255, 255, 255, 0.88);
border-radius: 20px;
border: 1px solid rgba(21, 59, 92, 0.08);
}
.about-page-legacy-list article > span {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background-color: var(--tlc-navy);
color: var(--tlc-white);
font-family: "Playfair Display", serif;
font-weight: 800;
}
.about-page-legacy-list h3 {
color: var(--tlc-navy);
font-size: 20px;
margin-bottom: 7px;
}
.about-page-legacy-list p {
color: var(--tlc-muted);
font-size: 13px;
line-height: 1.65;
}
/* --------------------
CLOSING CALL TO ACTION
-------------------- */
.about-page-closing {
padding: 90px 40px;
text-align: center;
background: linear-gradient(135deg, #006f7a, #004f68);
}
.about-page-closing > div {
max-width: 760px;
margin: 0 auto;
}
.about-page-closing .about-page-label {
color: #ffb5cf;
}
.about-page-closing h2 {
color: var(--tlc-white);
font-size: 44px;
line-height: 1.15;
margin-bottom: 20px;
}
.about-page-closing p:not(.about-page-label) {
color: rgba(255, 255, 255, 0.92);
font-size: 16px;
line-height: 1.8;
}
.about-page-actions-center {
justify-content: center;
}
.about-page-closing .secondary-button {
border-color: var(--tlc-white);
color: var(--tlc-white);
background-color: transparent;
}
.about-page-closing .secondary-button:hover {
background-color: var(--tlc-white);
color: var(--tlc-dark-teal);
}
/* --------------------
ABOUT PAGE RESPONSIVE
-------------------- */
@media (max-width: 1024px) {
.about-page-hero {
grid-template-columns: 1fr 0.8fr;
gap: 40px;
padding: 70px 30px 80px;
}
.about-page-hero h1 {
font-size: 46px;
}
.about-page-mission {
gap: 45px;
padding: 75px 30px;
}
.about-page-values {
padding: 75px 30px;
}
.about-page-values-grid {
grid-template-columns: repeat(2, 1fr);
}
.about-page-umbrella {
padding: 80px 30px;
}
.about-page-legacy {
margin: 0 25px 75px;
padding: 55px 40px;
gap: 45px;
}
}
@media (max-width: 768px) {
.about-page-hero,
.about-page-mission,
.about-page-legacy {
grid-template-columns: 1fr;
}
.about-page-hero {
text-align: center;
padding: 55px 20px 65px;
}
.about-page-hero h1 {
font-size: 40px;
}
.about-page-actions {
justify-content: center;
}
.about-page-logo-card {
max-width: 340px;
}
.about-page-mission {
gap: 45px;
padding: 65px 20px;
text-align: center;
}
.about-page-family-image img {
max-width: 330px;
}
.about-page-callout {
text-align: left;
}
.about-page-values {
padding: 65px 20px;
}
.about-page-values-grid {
grid-template-columns: 1fr;
max-width: 560px;
}
.about-page-umbrella {
padding: 70px 20px;
}
.about-page-heading-left {
margin-left: auto;
text-align: center;
}
.about-page-umbrella-grid {
grid-template-columns: 1fr;
max-width: 620px;
margin: 0 auto;
}
.about-page-center-action {
text-align: center;
}
.about-page-legacy {
margin: 0 15px 65px;
padding: 45px 25px;
gap: 35px;
}
.about-page-legacy-copy {
text-align: center;
}
.about-page-closing {
padding: 70px 20px;
}
}
@media (max-width: 480px) {
.about-page-hero {
padding: 45px 15px 55px;
}
.about-page-hero h1 {
font-size: 34px;
}
.about-page-hero-copy > p:not(.about-page-label) {
font-size: 15px;
}
.about-page-actions {
flex-direction: column;
}
.about-page-actions .primary-button,
.about-page-actions .secondary-button {
width: 100%;
text-align: center;
}
.about-page-mission h2,
.about-page-heading h2,
.about-page-legacy h2 {
font-size: 30px;
}
.about-page-family-image img {
max-width: 265px;
}
.about-value-card,
.about-page-umbrella-grid article {
min-height: 0;
padding: 26px 24px;
}
.about-page-legacy {
padding: 38px 20px;
}
.about-page-legacy-list article {
grid-template-columns: 1fr;
}
.about-page-closing h2 {
font-size: 32px;
}
}
/* ========================================
RESPONSIVE HEADER DROPDOWN MENUS
======================================== */
/*
Desktop:
- Brands and Services open only on hover/focus.
Mobile/tablet:
- Brands and Services open by tapping.
- JavaScript ensures only one can be open at a time.
*/
.nav-dropdown {
position: relative;
}
/*
Button is styled to look exactly like
the normal header text links.
*/
.dropdown-label {
appearance: none;
-webkit-appearance: none;
background: none;
border: 0;
padding: 0;
margin: 0;
font-family: "Playfair Display", serif;
font-size: inherit;
font-weight: 500;
color: #222222;
cursor: default;
white-space: nowrap;
}
/* Match TLC navigation hover styling. */
.nav-dropdown:hover > .dropdown-label,
.nav-dropdown:focus-within > .dropdown-label {
color: var(--tlc-teal);
}
/* Dropdown panel is hidden by default. */
.dropdown-menu {
position: absolute;
top: calc(100% + 12px);
left: 50%;
transform:
translateX(-50%)
translateY(-5px);
min-width: 220px;
padding: 9px;
background-color: var(--tlc-white);
border:
1px solid
rgba(21, 59, 92, 0.10);
border-radius: 14px;
box-shadow:
0 14px 35px
rgba(21, 59, 92, 0.14);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.18s ease,
transform 0.18s ease,
visibility 0.18s ease;
z-index: 1000;
}
/*
Invisible bridge between the header label
and dropdown so the menu doesn't disappear
while moving the mouse down into it.
*/
.dropdown-menu::before {
content: "";
position: absolute;
top: -14px;
left: 0;
width: 100%;
height: 14px;
}
/*
DESKTOP BEHAVIOR:
Only the dropdown being hovered/focused opens.
*/
@media (min-width: 769px) {
.nav-dropdown:hover > .dropdown-menu,
.nav-dropdown:focus-within > .dropdown-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform:
translateX(-50%)
translateY(0);
}
}
/* Style links inside dropdowns. */
.nav-links .dropdown-menu a {
display: block;
padding: 11px 13px;
border-radius: 9px;
color: var(--tlc-navy);
text-decoration: none;
font-family: "Cause", cursive;
font-size: 14px;
font-weight: 700;
white-space: nowrap;
transition:
background-color 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
}
/* TLC hover styling for submenu items. */
.nav-links .dropdown-menu a:hover,
.nav-links .dropdown-menu a:focus {
background-color: var(--tlc-aqua-light);
color: var(--tlc-teal);
transform: translateX(3px);
}
/* Keyboard focus. */
.dropdown-label:focus-visible,
.nav-links .dropdown-menu a:focus-visible {
outline:
2px solid
var(--tlc-pink);
outline-offset: 3px;
}
/* ========================================
MOBILE / TABLET TAP MENU
======================================== */
@media (max-width: 768px) {
/*
The site's existing responsive nav stacks
the header items. Keep dropdown labels
centered with the other navigation choices.
*/
.nav-dropdown {
width: auto;
}
.dropdown-label {
font-size: 14px;
cursor: pointer;
}
/*
On touch screens, hover is ignored.
Only the .is-open class added by JavaScript
displays the selected dropdown.
*/
.nav-dropdown.is-open > .dropdown-label {
color: var(--tlc-teal);
}
.nav-dropdown.is-open > .dropdown-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform:
translateX(-50%)
translateY(0);
}
.dropdown-menu {
min-width: 215px;
}
}
@media (max-width: 480px) {
.dropdown-label {
font-size: 13px;
}
.dropdown-menu {
min-width: 205px;
}
}