From 64e29f4a7b1f6f42baa315159320e12596b3be2a Mon Sep 17 00:00:00 2001 From: suyogdeore08 Date: Thu, 9 Oct 2025 14:20:37 +0530 Subject: [PATCH] Update globals.css --- app/globals.css | 102 +++++++++++++++++++++++++++++++++--------------- 1 file changed, 71 insertions(+), 31 deletions(-) diff --git a/app/globals.css b/app/globals.css index e2646b3a..b38011a3 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,44 +1,84 @@ - +/* Your custom variables */ :root { --dark-bg: #000; --light-bg: #f6f7fbad; - --primary-color: #ecb34a; - --secondary-color: #3c3c3c; - --third-color: black; - --fourth-color: #fee590; + --primary-color: #ecb34a; + --secondary-color: #3c3c3c; --text-color: rgba(255, 255, 255, 0.847); - --text-secondary: #554b92; - --text-color-dark: black; - --text-color-light: #fcf3d4; - --title-color: white; - --border-color: #6a55f8; - --border-color-dark: #27263a; - --border-color-light: #6a55f8; - --shadow: 10px 12px 48px rgba(181, 187, 203, 0.500); + --text-color-dark: #333; } -html { +/* Basic reset */ +html, body { + margin: 0; + padding: 0; + width: 100%; + height: 100%; box-sizing: border-box; + background-color: var(--primary-color); + color: var(--text-color-dark); + overflow: hidden; /* Prevent body from scrolling */ +} + +/* Main containers */ +.app { + height: 100vh; + overflow: hidden; } -body { - color: var(--text-color); - margin: 0 !important; - max-width: 100%; - overflow-x: hidden; - padding: 0 !important; - touch-action: pan-y, pan-x; - transition: all 0.4s cubic-bezier(0.57, 0.25, 0.33, 1) 0s; +.scroll-container { + height: 100%; + width: 100%; + overflow-y: scroll; + scroll-snap-type: y mandatory; + scroll-behavior: smooth; } -.container{ - width:100%; - margin:auto; - overflow:hidden; +/* Base style for ALL scroll sections */ +.scroll-section { + height: 100vh; + width: 100%; + scroll-snap-align: start; + display: flex; + flex-direction: column; + position: relative; + box-sizing: border-box; + overflow: hidden; } -@media (min-width: 1000px){ - .container{ - max-width: 1220px; - } -} \ No newline at end of file +/* Using CSS Grid for a more robust layout in the first section */ +.first-section { + display: grid; + grid-template-rows: auto 1fr; /* Navbar gets its natural height, hero-wrapper gets the rest */ + padding: 0; /* Remove padding to allow components to align to edges */ +} + +/* This wrapper fills the remaining space (from the grid) and also centers the Hero component within that space (using flexbox). */ +.hero-wrapper { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + overflow: hidden; /* Prevents hero content from spilling out */ +} + +/* Default for standard, centered content */ +.middle-section { + justify-content: center; + align-items: center; + padding: 2rem; +} + +/* Special class for TALL content like Testimonials */ +.tall-content-section { + justify-content: flex-start; + overflow-y: auto; + padding: 4rem 2rem; +} + +/* Section for the Footer */ +.last-section { + justify-content: flex-end; + background-color: var(--primary-color); + padding: 0; +}