/* General Styles */
html {
scroll-behavior: smooth;
/* Guard against horizontal scrolling. Applied to , NOT : putting
it on the (100%-height) body turns the body into its own scroll container,
which stops window scroll events from firing and breaks the
navbar-on-scroll color change and the mobile parallax. */
overflow-x: hidden;
}
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Times New Roman";
}
body,
html {
height: 100%;
color: #777;
line-height: 1.8;
}
/* Parallax Settings */
.bgimg-1,
.bgimg-2,
.bgimg-3,
.bgimg-4 {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Image Assets (Updated with full URLs for testing) */
.bgimg-1 {
background-image: url("images/img1.jpg");
min-height: 100%;
}
.bgimg-2 {
background-image: url("images/img2.jpg");
min-height: 400px;
}
.bgimg-3 {
background-image: url("images/img3.jpg");
min-height: 400px;
}
.bgimg-4 {
background-image: url("images/img4.jpg");
min-height: 400px;
}
.w3-wide {
letter-spacing: 10px;
}
.w3-hover-opacity {
cursor: pointer;
}
/* Inspiration text card sits over the parallax canyon photo. */
.inspiration-card {
background-color: rgba(255, 255, 255, 0.92);
}
/* Vertically center the photo and text columns in the about & land sections.
Only applies at the W3.CSS medium breakpoint (>=601px), where the columns
sit side by side; below that they stack normally. */
@media (min-width: 601px) {
.vcenter-row {
display: flex;
align-items: center;
}
}
/* Responsive: Turn off parallax for mobile/tablets only.
(Was max-device-width: 1600px, which disabled parallax on virtually
every laptop/desktop, so the effect never showed.) */
@media only screen and (max-width: 768px) {
/* Mobile browsers don't support fixed-attachment parallax, so the
backgrounds simply scroll normally here. */
.bgimg-1,
.bgimg-2,
.bgimg-3,
.bgimg-4 {
background-attachment: scroll;
min-height: 400px;
}
/* The 10px tracking overflows narrow screens; tighten it on mobile. */
.w3-wide {
letter-spacing: 3px;
}
/* On phones the card filled the screen and hid the canyon. Make it more
transparent and let the photo show as a frame around it. */
.inspiration-card {
background-color: rgba(255, 255, 255, 0.8);
max-width: 88% !important;
}
}