/* ==========================================================================
BHAGGYA TOURS — SITE FRAMEWORK (separate, sitewide file)
-----------------------------------------------------------------------
हा file प्रत्येक page वर सर्वात आधी load करायचा. यात entire site वर
लागणारा STRUCTURAL SYSTEM आहे — Section → Container → Section Header
→ Section Content — आणि त्याचबरोबर design tokens.
ह्या file नंतर प्रत्येक page/component चा स्वतःचा CSS file (उदा.
destinations.css, hero.css, services.css) वेगळा load करायचा — तो
फक्त component-specific दिसणं (cards, grids, images) handle करेल,
spacing/structure कधीच पुन्हा लिहायचं नाही.
वापर:
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root{
/* ---- Brand palette ---- */
--page-bg:#ffffff;
--ink-900:#211c34;
--ink-800:#241f3a;
--surface:#f0ede6;
--surface-2:#e8e3d8;
--paper:#ffffff;
--marigold:#f2a93b;
--marigold-dim:#a86518;
--peacock:#0f8681;
--peacock-dim:#0c6e6a;
--cream:#211c34;
--cream-dim:#5b5570;
--ring: rgba(242,169,59,0.55);
/* ---- Type scale (Inter) — same scale for every section on the site ---- */
--fs-hero: clamp(2.1rem, 4vw + 1.2rem, 3.75rem);
--lh-hero: clamp(2.5rem, 4vw + 1.4rem, 4.375rem);
--fs-section: clamp(1.85rem, 3.2vw + 1rem, 3rem);
--lh-section: clamp(2.3rem, 3.2vw + 1.2rem, 3.625rem);
--fs-sub: clamp(1.25rem, 1.6vw + 0.9rem, 2rem);
--lh-sub: clamp(1.6rem, 1.6vw + 1.2rem, 2.5rem);
--fs-card-title: clamp(1rem, 1vw + 0.75rem, 1.5rem);
--lh-card-title: clamp(1.35rem, 1vw + 1rem, 2rem);
--fs-body: clamp(0.95rem, 0.4vw + 0.85rem, 1.125rem);
--lh-body: clamp(1.5rem, 0.6vw + 1.3rem, 1.875rem);
--fs-small: clamp(0.85rem, 0.25vw + 0.78rem, 1rem);
--lh-small: clamp(1.3rem, 0.3vw + 1.2rem, 1.625rem);
/* ================= SPACING HIERARCHY (single source of truth) =================
Level 1 Section 100px / 60px
Level 2 Section Header 60px / 40px
Level 3 Grid Gap 30px / 20px
Level 4 Card Internal Gap 16px
================================================================= */
--space-section-y:100px;
--space-section-y-mobile:60px;
--space-header-bottom:60px;
--space-header-bottom-mobile:40px;
--space-grid-gap:30px;
--space-grid-gap-mobile:20px;
--space-card-gap:16px;
/* ---- Container ---- */
--container-max:1360px;
--container-pad:30px;
--container-pad-mobile:20px;
}
img{ max-width:100%; display:block; }
/* ==========================================================================
1. SECTION
Purpose: vertical spacing between website components. Used for every
major block — Hero, About, Services, Products, Features, Gallery,
Testimonials, FAQ, CTA, Contact, Footer.
Rule: never put content directly inside .section — always wrap in .container.
Rule: section controls vertical spacing ONLY, nothing else.
========================================================================== */
.section{
display:block !important;
padding-top:var(--space-section-y) !important;
padding-bottom:var(--space-section-y) !important;
width:100% !important;
}
@media (max-width:768px){
.section{
padding-top:var(--space-section-y-mobile) !important;
padding-bottom:var(--space-section-y-mobile) !important;
}
}
/* ==========================================================================
2. CONTAINER
Purpose: controls content width and alignment. Every section must
contain exactly one container; nothing may exceed container width.
========================================================================== */
.container{
display:block !important;
max-width:var(--container-max) !important;
margin:0 auto !important;
padding-left:var(--container-pad) !important;
padding-right:var(--container-pad) !important;
width:100% !important;
justify-content:normal !important;
align-items:normal !important;
gap:0 !important;
}
@media (max-width:768px){
.container{
padding-left:var(--container-pad-mobile) !important;
padding-right:var(--container-pad-mobile) !important;
}
}
/* ==========================================================================
3. SECTION HEADER
Purpose: holds Heading + Sub Heading, always together.
Structure:
Rule: no cards/images inside section-header.
Rule: alignment stays consistent across all sections (default: center).
========================================================================== */
.section-header{
display:block !important;
max-width:800px !important;
margin:0 auto var(--space-header-bottom) !important;
text-align:center !important;
}
.section-header h2{
font-family:'Inter', sans-serif;
font-weight:600;
font-size:var(--fs-section);
line-height:var(--lh-section);
margin:0 0 12px;
color:var(--cream);
letter-spacing:-0.01em;
}
.section-header p{
font-size:var(--fs-body);
line-height:var(--lh-body);
font-weight:400;
color:var(--cream-dim);
margin:0;
}
.section-header p strong{ color:var(--peacock); font-weight:700; }
/* left-aligned variant — जिथे center नको (उदा. About / Services split-layout) */
.section-header.is-left{
margin-left:0;
text-align:left;
}
@media (max-width:768px){
.section-header{
max-width:100%;
width:100%;
margin-bottom:var(--space-header-bottom-mobile);
}
}
/* optional eyebrow tag — heading च्या वर वापरायचं असेल तर (Hero, Destinations, इ.) */
.eyebrow{
display:inline-flex;
align-items:center;
gap:8px;
font-size:0.72rem;
font-weight:700;
letter-spacing:0.18em;
text-transform:uppercase;
color:var(--marigold);
margin-bottom:16px;
}
.eyebrow::before, .eyebrow::after{
content:"";
width:20px;
height:1px;
background:var(--marigold-dim);
}
.is-left .eyebrow::after{ display:none; }
/* ==========================================================================
4. SECTION CONTENT
Purpose: main content area — cards, grids, images, forms.
Rule: keep consistent gaps (Level-3 / Level-4 of the spacing hierarchy).
========================================================================== */
.section-content{
display:block !important;
width:100% !important;
}
/* Generic grid utility for section-content — component CSS can override
grid-template-columns per section, but the GAP always stays on-hierarchy. */
.grid{
display:grid;
gap:var(--space-grid-gap);
}
@media (max-width:768px){
.grid{ gap:var(--space-grid-gap-mobile); }
}
/* ==========================================================================
5. DIV (card / feature-item / gallery-item, etc.)
Purpose: group content INSIDE section-content. Divs never create page
spacing — only .section does that. Use padding inside divs; internal
gap between a div's own children stays at Level-4 (16px).
========================================================================== */
.card,
.feature-item,
.gallery-item{
display:flex;
flex-direction:column;
gap:var(--space-card-gap);
padding:var(--space-card-gap);
background:var(--paper);
border-radius:16px;
border:1px solid rgba(33,28,52,0.08);
}
/* ==========================================================================
SHARED PRIMITIVES — buttons, focus ring, motion
========================================================================== */
.btn{
display:inline-flex;
align-items:center;
gap:8px;
font-family:inherit;
font-weight:700;
font-size:0.9rem;
letter-spacing:0.02em;
padding:12px 24px;
border-radius:999px;
border:1px solid transparent;
cursor:pointer;
text-decoration:none;
transition:all 0.25s ease;
}
.btn-primary{ background:var(--marigold); color:#ffffff; border-color:var(--marigold); }
.btn-primary:hover{ background:var(--marigold-dim); border-color:var(--marigold-dim); }
.btn-outline{ background:transparent; color:var(--peacock); border-color:var(--peacock); }
.btn-outline:hover{ background:var(--peacock); color:#ffffff; }
:focus-visible{
outline:2px solid var(--ring);
outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
*{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}