/* ====================================================================
CSS CUSTOM PROPERTIES (Variables)
====================================================================
CSS variables allow us to define values once and reuse them.
They enable the dark/light theme toggle - when data-theme="light"
is set, these values automatically update everywhere.
Syntax: --variable-name: value;
Usage: property: var(--variable-name);
Benefits:
• Single source of truth for colors
• Easy theme switching
• Maintainable and consistent design
*/
/* --------------------------
Web Fonts
--------------------------
@import loads Google Fonts:
• Roboto Condensed - Body text (clean, readable)
• Sansation - Headings (modern, distinctive)
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Sansation:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
/* --------------------------
Dark Theme (Default)
--------------------------
:root is the highest-level selector (same as html but more specific).
These are the default colors for dark mode.
*/
:root{
--bg:#0f1720; /* Page background - dark blue-gray */
--card:#0f172030; /* Card backgrounds with transparency */
--accent:#c8e89a; /* Primary accent - soft lime green */
--muted:#e8f0dc; /* Secondary text - off-white green tint */
--text:#ffffff; /* Primary text - white */
--max-width:1100px; /* Content max width for readability */
--radius:12px; /* Border radius for rounded corners */
--button-bg: rgba(255,255,255,0.03); /* Subtle button background */
/* Smooth color transitions when the theme is toggled */
transition: color .18s ease, background .25s ease;
}
/* --------------------------
Light Theme Overrides
--------------------------
When the HTML element has data-theme="light", these values override :root.
The CSS variables automatically update throughout the page.
Process flow:
1. JavaScript adds data-theme="light" to the element
2. This selector becomes active
3. All var(--accent), var(--text), etc. reference the new values
4. The transition property creates smooth color animation
*/
html[data-theme="light"] {
--bg: white; /* Clean white background */
--button-bg: rgba(0, 0, 0, 0.03); /* Subtle dark button bg */
--card: rgba(255,255,255,0.9); /* Near-white cards */
--muted: #1a2628; /* Dark teal for secondary text */
--text: #0a0c0d; /* Near-black for readability */
--accent: #1f4a2a; /* Dark forest green accent */
}
/* ====================================================================
CSS RESET & BASE STYLES
====================================================================
These normalize browser defaults for consistent cross-browser rendering.
*/
/* Universal box-sizing: includes padding/border in element width */
* { box-sizing: border-box; }
/* Base document styles */
html, body {
height: 100%;
font-family: 'Roboto Condensed', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
color: var(--text);
-webkit-font-smoothing: antialiased; /* Smoother fonts on Mac */
overflow: visible;
overflow-x: clip; /* Prevent horizontal scroll from animations */
}
/* Section default spacing - creates visual separation between content areas */
section { padding: 64px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
/* Image defaults - responsive images that never exceed container */
img { max-width: 1000%; height: auto; }
/* Link reset - inherit color from parent, no underline */
a { color: inherit; text-decoration: none; }
/* Icon utility class */
.icon { width: 24px; height: 24px; }
/* --------------------------
Horizontal Rule Styling
--------------------------
Custom
elements as section dividers.
Uses high-contrast gold color for visibility.
*/
hr {
border: none;
height: 2px;
background: #ffdb70; /* Gold - good contrast on dark background */
opacity: 1;
}
html[data-theme="light"] hr {
background: #9a7000; /* Darker gold for light theme contrast */
}
/* --------------------------
SVG Icon Colors (Light Theme)
--------------------------
Override SVG fill colors in light theme for proper contrast.
The dark theme uses #ffdb70 (gold), light theme needs darker #9a7000.
These selectors target SVG icons in specific sections to ensure
they remain visible against the light background.
*/
html[data-theme="light"] .provide svg,
html[data-theme="light"] #oursecurity svg,
html[data-theme="light"] #moreinfo svg,
html[data-theme="light"] #booking summary svg,
html[data-theme="light"] footer summary svg,
html[data-theme="light"] .abt svg,
html[data-theme="light"] footer .wrap svg {
fill: #9a7000; /* Dark gold - 4.5:1+ contrast on white */
}
/* ====================================================================
LAYOUT COMPONENTS
====================================================================
*/
/* --------------------------
Content Wrapper
--------------------------
Centers content and adds horizontal padding.
max-width prevents lines from becoming too long (hard to read).
*/
.wrap { max-width: var(--max-width); margin: 0 auto; padding: 36px 20px; }
/* --------------------------
Navigation Bar
--------------------------
Sticky positioning keeps nav visible while scrolling.
Uses flexbox for horizontal layout.
*/
nav {
position: sticky; /* Sticks to viewport while scrolling */
top: 12px; /* 12px from top when stuck */
z-index: 40; /* Above other content */
display: flex;
align-items: center;
justify-content: center;
padding: 0 18px;
font-family: 'Roboto Condensed';
width: 100dvw; /* Full viewport width */
}
/* Inner nav container with glass-morphism effect */
.nav-inner {
width: 100%;
max-width: var(--max-width);
display: flex;
align-items: center;
gap: 16px;
background: rgba(30, 40, 50, 0.92); /* Semi-transparent dark */
backdrop-filter: blur(3px); /* Frosted glass effect */
border-radius: 18px;
padding: 10px 18px;
border: 2px solid #9ac465; /* Green border for definition */
}
/* --------------------------
Brand/Logo Area
--------------------------
Flexbox aligns logo image with text.
margin-right: auto pushes nav links to the right.
*/
.brand { display:flex; align-items:center; gap:5px; margin-right:auto; font-weight:700; font-family:'Sansation',sans-serif; color:var(--accent); }
.brand .logo { width:44px; height:44px; border-radius:2.75px; object-fit:cover; }
/* --------------------------
Desktop Navigation Links
--------------------------
Horizontal list of page section links.
Light background for contrast on dark nav bar.
*/
.nav-links { display:flex; gap:13px; align-items:center; flex-wrap:wrap; }
.nav-links a { padding:10px 12px; border-radius:10px; color:#1a1f14; font-weight:600; background: #f5f7f2; border: 2px solid #9ac465; }
/* --------------------------
Mobile Navigation
--------------------------
nav-toggle: Hamburger menu button (hidden on desktop)
nav-overlay: Full-screen menu that appears on mobile
The overlay uses position:fixed and inset:0 to cover entire screen.
visibility:hidden instead of display:none for smoother transitions.
*/
.nav-toggle { display:none; background:transparent; border:0; color:var(--text); cursor:pointer; width:44px; height:44px; border-radius:8px; }
.nav-overlay { visibility: hidden; align-items:center; justify-content:center; position:fixed; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0.55),rgba(0,0,0,0.75)); z-index:80; padding:30px; color:white}
.nav-overlay .links { display:grid; gap:10px; text-align:center; color: white;}
.nav-overlay a {
font-size: 18px;
padding: 14px;
border-radius: 8px;
background: transparent;
color: white;
}
/* Close button for mobile overlay */
.nav-overlay-close {
position: absolute;
top: 16px;
right: 16px;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
color: var(--text);
cursor: pointer;
transition: all 0.2s ease;
}
.nav-overlay-close:hover {
background: rgba(255, 255, 255, 0.12);
transform: scale(1.05);
}
.nav-overlay-close:active {
transform: scale(0.95);
}
/* ====================================================================
INTERACTIVE ELEMENT STYLES
====================================================================
Unified hover/active states for buttons and clickable elements.
Consistent transitions create a polished, professional feel.
*/
/* Apply smooth transition to all interactive elements */
.nav-links a,
.theme-toggle,
summary {
transition: all 0.2s ease;
}
/* Nav link hover state - displays slight lift effect and color transition */
.nav-links a:hover {
background: #e8f0dc;
color: #1a1f14;
transform: translateY(-1px); /* Subtle "lift" effect */
border-color: #7fac52;
}
/* Nav link active (clicked) - press down effect */
.nav-links a:active {
transform: translateY(0); /* Return to original position */
background: #dbe8cf;
}
/* Theme toggle button hover */
.theme-toggle:hover {
background: rgba(127, 172, 82, 0.12);
color: var(--text);
transform: translateY(-1px);
}
/* --------------------------
/ Elements
--------------------------
HTML5 disclosure widgets for expandable content.
This pattern is implemented for phone number reveal and credits section.
Structure explanation:
Click to expand
Hidden content here
The element toggles visibility of sibling content when clicked.
*/
details {
margin: 0 auto;
max-width: 200px;
}
summary {
border-radius: 5px;
padding: 10px;
background-color: #f5f7f2; /* Light background for contrast */
color: #1a1f14; /* Dark text */
width: 100%;
border: 2px solid #9ac465;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
summary:hover {
background: #e8f0dc !important;
border-color: #7fac52 !important;
transform: translateY(-2px) scale(1.02);
box-shadow: 0 4px 12px rgba(127, 172, 82, 0.2);
}
summary:active {
transform: translateY(0) scale(0.98);
background: #dbe8cf !important;
}
/* When details is open, remove bottom border-radius for seamless connection */
details[open] summary {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/* Content revealed when is open */
details > p,
details > img {
background: transparent;
color: #1a1f14;
padding: 12px;
margin: 0;
border: none;
border-radius: 0;
}
/* Centered summary variant - applies to phone number and credits sections */
summary.summary-centered {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
text-align: center;
margin: 0 auto;
}
/* --------------------------
Light Theme Overrides
--------------------------
These rules override colors for light mode.
Darker greens provide better contrast against light backgrounds.
*/
html[data-theme="light"] .nav-links a:hover {
background: #cddfc0;
color: #0a0c0d;
}
html[data-theme="light"] .nav-links a:active, html[data-theme="light"] summary:active {
background: #bfd4b0;
}
html[data-theme="light"] .nav-links a {
background: #e8f0e0;
color: #0a0c0d;
border-color: #2d5a38; /* Darker green border */
}
html[data-theme="light"] .theme-toggle:hover {
background: #cddfc0;
}
html[data-theme="light"] summary {
background: #e8f0e0;
color: #0a0c0d;
border-color: #2d5a38;
}
html[data-theme="light"] summary:hover {
background: #cddfc0 !important;
border-color: #1a3d22 !important;
box-shadow: 0 4px 12px rgba(45, 90, 56, 0.25);
}
html[data-theme="light"] details > p,
html[data-theme="light"] details > img {
background: transparent;
color: #0a0c0d;
border: none;
}
/* ====================================================================
HERO SECTION
====================================================================
Full-width banner at top of page with background image/video.
Uses viewport units (dvh/dvw) for responsive sizing.
dvh = Dynamic Viewport Height (accounts for mobile browser UI)
dvw = Dynamic Viewport Width
*/
#hero { position:relative; }
#hero-image{
height:82.98dvh; /* ~83% of viewport height */
background-image:url("sookasemgif.gif"); /* Animated GIF background */
background-size:cover; /* Cover entire area, crop if needed */
background-position:center; /* Keep center of image visible */
display:flex;
width:97.64dvw; /* Slightly less than full width */
box-shadow: black 0px -60px 10rem inset; /* Dark gradient overlay from bottom */
}
/* Center all content within hero */
#hero * { justify-content:center; align-items:center; }
/* Hero text content */
.hero-text { position:relative; z-index:2; text-align:center; padding:48px 22px; color:var(--text); }
/* Hero title - uses clamp() for responsive sizing:
clamp(min, preferred, max) = fluid typography
At narrow screens: 36px, at wide screens: 64px, scales with 8vw between */
.hero-title { font-family:'Sansation', sans-serif; font-size:clamp(36px,8vw,64px);color:white; margin:0 0 8px; font-weight:700; letter-spacing:0.6px; display:flex; }
.hero-sub { color:white; font-size:clamp(36px,8vw,64px); margin:0 0 10px; font-family: Sansation;}
.hero-down { display:inline-block; margin-top:18px; color:white; font-size:20px; opacity:1; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
/* ====================================================================
CONTENT COMPONENTS
====================================================================
*/
/* --------------------------
Typography
--------------------------
*/
h1,h2,h3 { color:var(--accent); margin:0 0 12px; font-family:'Sansation',sans-serif; font-weight: 700; }
p { color:var(--muted); line-height:1.5; margin:0 0 12px; }
/* --------------------------
Semantic List Styling (grid-container)
--------------------------
Reset list styles for semantic lists used in "What We Provide"
and "Our Security" sections. List items inherit paragraph styling.
*/
.grid-container { list-style: none; padding: 0; margin: 0; }
.grid-container li { color:var(--muted); line-height:1.5; margin:0 0 12px; }
/* --------------------------
Horizontal Scroll Gallery ("Near Us" Section)
--------------------------
This creates the horizontal scrolling effect for nearby locations.
The scroll animation is controlled by GSAP in index.js.
flex-flow: row nowrap keeps items in a single horizontal line.
Large gap (30rem) creates spacing between images.
*/
#wrap-scroll { display:flex; flex-flow: row nowrap; gap: 30rem; }
#wrap-scroll img { width: 30rem; height: 20rem; }
/* --------------------------
Pricing Table
--------------------------
Displays rental information in a structured table format.
Uses semantic | elements for accessibility (screen readers
announce column headers with each cell).
*/
table.t {
width:100%;
max-width:900px;
border-radius:10px;
overflow:hidden; /* Clips content to rounded corners */
background: rgba(30, 40, 50, 0.85);
border: 2px solid #9ac465;
border-collapse: collapse; /* Removes gaps between cells */
}
/* Table header cells */
table.t th {
padding: 16px 18px;
text-align: left;
color: #c8e89a; /* Accent green */
font-weight: 700;
font-family: 'Sansation', sans-serif;
background: rgba(20, 30, 40, 0.9);
border-bottom: 2px solid #9ac465;
}
/* Table data cells */
table.t td { padding:14px 18px; border-bottom:1px solid #6b9241; vertical-align:middle; color: #e8f0dc; }
table.t tbody tr:last-child td { border-bottom:0; } /* No border on last row */
/* Table light theme overrides */
html[data-theme="light"] table.t {
background: rgba(255, 255, 255, 0.95);
border-color: #2d5a38;
}
html[data-theme="light"] table.t th {
color: #1f4a2a;
background: rgba(232, 240, 224, 0.95);
border-bottom-color: #2d5a38;
}
html[data-theme="light"] table.t td {
color: #1a2628;
border-bottom-color: #3b6b47;
}
/* --------------------------
Footer
--------------------------
*/
footer {
padding: 48px 20px;
border-top: 2px solid #c8e89a;
margin-top: 64px;
}
footer h1 {
color: #c8e89a;
margin: 0 0 8px;
font-weight: 700;
}
footer p {
color: #e8f0dc;
margin: 0;
}
footer a {
color: #c8e89a;
transition: color 0.2s ease;
text-decoration: underline;
font-weight: 600;
}
footer a:hover {
color: #ffffff;
}
html[data-theme="light"] footer {
border-top-color: #1f4a2a;
}
html[data-theme="light"] footer h1 {
color: #1f4a2a;
font-weight: 700;
}
html[data-theme="light"] footer p {
color: #1a2628;
}
html[data-theme="light"] footer a {
color: #0d3318;
font-weight: 600;
}
html[data-theme="light"] footer a:hover {
color: #0a0c0d;
}
/* --------------------------
Photo Gallery Grid
--------------------------
CSS Grid layout for the "About" section images.
1fr 1fr = two equal-width columns.
object-fit: cover ensures images fill their container
without distortion (cropping if needed).
*/
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.grid2 img { box-sizing: border-box; height: 300px; width: 100%; object-fit: cover; object-position: center; display: block; }
/* --------------------------
Utility Classes
--------------------------
Small helper classes for quick styling.
*/
.muted { color: var(--muted); }
.accent { color: var(--accent); }
html { scroll-behavior: smooth; } /* Smooth anchor link scrolling */
/* --------------------------
Theme Toggle Button
--------------------------
Button in nav that switches between dark/light themes.
Uses CSS Grid (place-items) to perfectly center the icon.
*/
.theme-toggle {
margin-left: 18px;
display:inline-grid;
place-items:center; /* Centers icon both horizontally and vertically */
width:44px;
height:44px;
border: 2px solid #9ac465;
border-radius: 10px;
background: #f5f7f2;
color: #1a1f14;
cursor:pointer;
transition:transform .12s ease, background .15s;
}
.theme-toggle:active{ transform: scale(0.95); transform:translateY(0) }
.theme-toggle svg{ width:20px;height:20px; display:block; fill: #1a1f14; }
/* Light theme nav overrides */
html[data-theme="light"] .nav-inner { background: rgba(255, 255, 255, 0.95); border-color: #2d5a38; }
html[data-theme="light"] .theme-toggle { background: #e8f0e0; border-color: #2d5a38; }
html[data-theme="light"] .theme-toggle svg { fill: #0a0c0d; }
html[data-theme="light"] .nav-links a:hover, .theme-toggle:hover, summary:hover { background: #dbe8cf; color: #1a1f14; }
/* Pointer cursor on interactive elements */
.nav-links a:hover, .theme-toggle:hover, summary:hover {
cursor: pointer;
}
/* ====================================================================
ACCESSIBILITY HELPERS
====================================================================
*/
/* --------------------------
Skip Link
--------------------------
A hidden link that appears when focused (via Tab key).
Allows keyboard users to skip past navigation and jump
directly to main content.
Hidden off-screen by default (left:-999px).
When focused (:focus), slides into view.
Why this matters:
Keyboard users would otherwise have to Tab through
EVERY nav link before reaching content. This lets
them skip right to the important stuff.
*/
.skip-link {
position:absolute; left:-999px; top:-999px;
background: var(--accent); color:#0b0b0b; padding:8px 12px; border-radius:6px; z-index:1000; transition:transform .12s ease;
}
.skip-link:focus { left:16px; top:12px; transform:translateY(0); outline:3px solid rgba(198,207,124,.3); }
/* --------------------------
Google Maps Embed
--------------------------
Responsive container for embedded Google Map.
*/
.map-wrap { max-width:100%; width:100%; display:block; border-radius:10px; overflow:hidden; }
.map-wrap iframe { width:100%; height:360px; border:0; display:block; }
/* Text alignment utility */
.text-center { text-align:center; }
/* ====================================================================
REGISTRATION FORM
====================================================================
Contact/booking form styled with consistent design language.
Uses FormSubmit.co for backend-free form submission.
How FormSubmit works:
1. Form action points to: https://formsubmit.co/your@email.com
2. When submitted, FormSubmit sends an email with form data
3. No server-side code required!
*/
.reg-form {
max-width: 600px;
margin: 32px auto;
background: rgba(30, 40, 50, 0.85);
border: 2px solid #9ac465;
border-radius: 12px;
padding: 40px;
backdrop-filter: blur(3px); /* Frosted glass effect */
}
/* Form field container - uses flexbox column layout */
.form-group {
margin-bottom: 24px;
display: flex;
flex-direction: column;
}
/* Form labels - styled as uppercase for visual hierarchy */
.form-group label {
color: #f0f5e8;
font-weight: 700;
margin-bottom: 8px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Form inputs, textareas, and selects - consistent styling */
.form-group input,
.form-group textarea,
.form-group select {
padding: 12px 16px;
border: 2px solid #9ac465;
border-radius: 8px;
background: #f5f7f2; /* Light background for contrast */
color: #1a1f14; /* Dark text for readability */
font-family: 'Roboto Condensed', system-ui;
font-size: 14px;
transition: all 0.2s ease;
}
/* Focus state - enhanced visibility for accessibility */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: #9fc76a;
background: #ffffff;
box-shadow: 0 0 0 4px rgba(127, 172, 82, 0.5); /* Focus ring */
}
.form-group select option {
color: #1a1f14;
}
/* Placeholder text styling - #667557 provides 4.58:1 contrast ratio on #f5f7f2 */
.form-group input::placeholder,
.form-group textarea::placeholder {
color: #667557;
}
.form-group textarea {
resize: vertical;
min-height: 100px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-group.checkbox {
flex-direction: row;
align-items: center;
margin-bottom: 32px;
}
/* Checkbox input sizing */
.form-group.checkbox input {
width: 20px;
height: 20px;
margin-right: 12px;
margin-bottom: 0;
cursor: pointer;
accent-color: var(--accent); /* Colors the checkbox with accent color */
}
/* Checkbox label styling (different from regular labels) */
.form-group.checkbox label {
margin: 0;
text-transform: none;
letter-spacing: normal;
font-weight: 400;
cursor: pointer;
}
/* --------------------------
Submit Button
--------------------------
Uses gradient background and shadow for depth.
Hover/active states provide tactile feedback.
*/
.btn-submit {
width: 100%;
padding: 14px 28px;
background: linear-gradient(135deg, var(--accent), #6b9241); /* Gradient for visual interest */
border: none;
border-radius: 8px;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.6px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(127, 172, 82, 0.3); /* Subtle shadow for depth */
font-family: "Roboto Condensed";
color: white
}
/* Submit button hover - lifts up slightly */
.btn-submit:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(127, 172, 82, 0.4);
}
/* Submit button active (clicked) - presses down */
.btn-submit:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(127, 172, 82, 0.25);
}
/* Light theme form overrides */
html[data-theme="light"] .btn-submit:hover {
box-shadow: 0 6px 16px rgba(59, 107, 71, 0.35);
}
html[data-theme="light"] .btn-submit:active {
box-shadow: 0 2px 8px rgba(59, 107, 71, 0.2);
}
html[data-theme="light"] .reg-form {
background: rgba(255, 255, 255, 0.95);
border: 2px solid #2d5a38;
}
html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group textarea,
html[data-theme="light"] .form-group select {
background: #e8f0e0;
border: 2px solid #2d5a38;
color: #0a0c0d;
}
html[data-theme="light"] .form-group input::placeholder,
html[data-theme="light"] .form-group textarea::placeholder {
color: #5a6b5e;
}
html[data-theme="light"] .form-group input:focus,
html[data-theme="light"] .form-group textarea:focus,
html[data-theme="light"] .form-group select:focus {
background: #dbe8cf;
border-color: #1a3d22;
box-shadow: 0 0 0 4px rgba(45, 90, 56, 0.5);
}
html[data-theme="light"] .form-group label {
color: #0a0c0d;
}
/* --------------------------
Booking Section Layout
--------------------------
Centered container for the booking form area.
*/
#booking {
max-width: 700px;
margin: 0 auto;
padding: 64px 20px;
box-sizing: border-box;
}
#booking h1,
#booking h2 {
text-align: center;
margin: 0 0 12px;
}
#booking > svg {
display: block;
margin: 18px auto;
}
#booking details {
max-width: 200px;
margin: 0 auto 28px;
text-align: center;
}
#booking .registration {
padding: 0;
border: none;
}
#booking .registration .reg-form {
margin: 24px auto 0;
max-width: 600px;
}
/* ====================================================================
RESPONSIVE DESIGN / MEDIA QUERIES
====================================================================
Media queries apply styles ONLY when screen matches the condition.
Mobile-first vs Desktop-first:
- This uses desktop-first (max-width breakpoints)
- Styles are written for desktop, then overridden for smaller screens
Common breakpoints:
- 860px: Tablets (landscape) and below
- 600px: Mobile phones
- 1295px: Smaller laptops/large tablets
*/
/* Tablet breakpoint (≤860px) */
@media (max-width:860px) {
:root { --max-width:920px; }
.nav-links { display:none; } /* Hide desktop nav links */
.nav-toggle { display:inline-flex; } /* Show hamburger menu */
.grid2 img { height:200px; } /* Smaller gallery images */
#hero-image { min-height:420px; } /* Ensure hero isn't too short */
}
/* Mobile breakpoint (≤600px) */
@media (max-width:600px) {
.reg-form {
padding: 24px; /* Less padding on small screens */
}
.form-row {
grid-template-columns: 1fr; /* Stack form fields vertically */
gap: 16px;
}
.btn-submit {
padding: 12px 20px;
font-size: 14px;
}
}
/* Smaller desktop / large tablet breakpoint (≤1295px) */
@media screen and (max-width:1295px) {
/* Make gallery responsive with auto-fit grid */
.grid2 > div { display:flex; justify-content:center; align-items:center; }
.grid2 > div > img { width:100%; height:100%; object-fit:cover; }
/* auto-fit: Creates as many columns as will fit
minmax(250px, 1fr): Each column is at least 250px, grows to fill space
grid-auto-flow: dense: Fills in gaps in the grid */
.grid2 { display:grid; grid-gap:10px; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); grid-auto-rows:200px; grid-auto-flow:dense; }
.grid2 img { max-width:100%; height:auto; vertical-align:middle; display:inline-block; }
}
/* ====================================================================
REDUCED MOTION ACCESSIBILITY
====================================================================
Respects user preference for reduced motion (accessibility setting).
Disables animations and replaces animated GIF with static background.
*/
@media (prefers-reduced-motion: reduce) {
/* Disable all CSS transitions */
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
/* Replace animated GIF with static background color */
#hero-image {
background-image: none;
background-color: var(--bg);
}
/* Fix hero text contrast when background becomes var(--bg) */
.hero-title, .hero-sub, .hero-down {
color: var(--text);
}
/* Disable smooth scrolling */
html {
scroll-behavior: auto;
}
/* Fallback layout for horizontal scroll gallery when animations are disabled.
Without GSAP, the row nowrap layout pushes items offscreen.
This wrapping layout keeps all content accessible. */
#wrap-scroll {
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
}
#wrap-scroll img {
width: min(30rem, 90vw);
height: auto;
}
}
|