/* ========================================================================== GUJRAT RISHTA CENTER — Design System Palette derived from the brand logo (deep crimson + warm gold). Type: Fraunces (display/heading) + Plus Jakarta Sans (body/UI) Fonts are loaded via tags in the HTML (with preconnect hints), not via @import here -- @import serializes font discovery behind this stylesheet's own download, adding a needless extra round-trip. ========================================================================== */ :root { /* ---- Brand palette (from logo extraction) ---- */ --maroon-950: #24080D; --maroon-900: #3D0B14; --maroon-800: #650D1B; --maroon-700: #8A1020; --maroon-600: #A6111F; --maroon-500: #C21C2C; --gold-700: #8C6412; --gold-600: #A97A1E; --gold-500: #C9971F; --gold-400: #DDAE3E; --gold-300: #E8C468; --gold-100: #F6E7C1; --emerald-700: #1F5C46; --emerald-50: #E9F3EE; --blush-50: #FBF2EC; --blush-25: #FEFAF7; --cream: #FFFDFB; --ink: #2A1013; --ink-soft: #6E4B4D; --ink-faint: #A98A8B; --line: #E9D6C9; /* ---- Type ---- */ --font-display: 'Fraunces', 'Georgia', serif; --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; /* ---- Spacing scale ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; /* ---- Shape / shadow ---- */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --radius-pill: 999px; --shadow-sm: 0 2px 8px rgba(61, 11, 20, 0.08); --shadow-md: 0 8px 28px rgba(61, 11, 20, 0.12); --shadow-lg: 0 20px 48px rgba(61, 11, 20, 0.18); --container-w: 1180px; } /* ---------------------------------------------------------------------- */ /* Reset */ /* ---------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; } ul[class], ol[class] { padding: 0; list-style: none; } img, picture { max-width: 100%; display: block; } button, input, textarea, select { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } body { font-family: var(--font-body); background: var(--blush-50); color: var(--ink); line-height: 1.6; font-size: 17px; overflow-x: hidden; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--maroon-900); line-height: 1.15; font-weight: 600; } h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 500; letter-spacing: -0.01em; } h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); } h3 { font-size: 1.3rem; } p { color: var(--ink-soft); } strong { color: var(--ink); } .container { max-width: var(--container-w); margin: 0 auto; padding: 0 var(--space-6); } @media (max-width: 640px) { .container { padding: 0 var(--space-4); } } /* Skip link (accessibility) */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--maroon-800); color: var(--cream); padding: 12px 20px; border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; } :focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; } /* ---------------------------------------------------------------------- */ /* Signature motif — interlocking rings (echoes the logo) */ /* ---------------------------------------------------------------------- */ .ring-divider { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin: var(--space-7) 0; color: var(--gold-500); } .ring-divider::before, .ring-divider::after { content: ""; height: 1px; flex: 1; max-width: 160px; background: linear-gradient(90deg, transparent, var(--gold-400)); } .ring-divider::after { background: linear-gradient(90deg, var(--gold-400), transparent); } .ring-divider svg { width: 28px; height: 20px; flex-shrink: 0; } .motif-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .motif-bg svg { position: absolute; opacity: 0.08; } /* ---------------------------------------------------------------------- */ /* Header */ /* ---------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(251, 242, 236, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .header-inner { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) 0; gap: var(--space-5); } .brand { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; } .brand img { height: 46px; width: auto; } .brand-text { font-family: var(--font-display); line-height: 1.05; } .brand-text .brand-name { display: block; font-size: 1.15rem; font-weight: 600; color: var(--maroon-800); } .brand-text .brand-tag { display: block; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-600); font-family: var(--font-body); font-weight: 700; } .main-nav { display: flex; align-items: center; gap: var(--space-6); } .main-nav ul { display: flex; gap: var(--space-5); align-items: center; } .main-nav a:not(.btn) { font-size: 0.94rem; font-weight: 600; color: var(--ink); padding: 12px 4px; border-bottom: 2px solid transparent; transition: border-color 0.15s ease, color 0.15s ease; } .main-nav a:not(.btn):hover { color: var(--maroon-700); border-color: var(--gold-500); } .menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; width: 44px; height: 44px; } .menu-toggle span { display: block; width: 22px; height: 2px; background: var(--maroon-800); margin: 5px auto; transition: 0.2s; } @media (max-width: 860px) { .main-nav { position: fixed; inset: 0 0 0 auto; width: min(320px, 82vw); height: 100vh; background: var(--cream); flex-direction: column; align-items: flex-start; padding: var(--space-8) var(--space-6); transform: translateX(100%); transition: transform 0.28s ease; box-shadow: var(--shadow-lg); } .main-nav.is-open { transform: translateX(0); } .main-nav ul { flex-direction: column; align-items: flex-start; gap: var(--space-5); width: 100%; } .main-nav .btn { width: 100%; text-align: center; margin-top: var(--space-4); } .menu-toggle { display: block; } .nav-scrim { display: none; position: fixed; inset: 0; background: rgba(42,16,19,0.4); z-index: 90; } .nav-scrim.is-open { display: block; } } /* ---------------------------------------------------------------------- */ /* Buttons */ /* ---------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 0.98rem; padding: 14px 28px; border-radius: var(--radius-pill); border: 2px solid transparent; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; min-height: 44px; } .btn--primary { background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); color: var(--maroon-950); box-shadow: var(--shadow-sm); } .btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn--secondary { background: transparent; border-color: var(--maroon-700); color: var(--maroon-700); } .btn--secondary:hover { background: var(--maroon-700); color: var(--cream); } .btn--on-dark { background: transparent; border-color: var(--gold-400); color: var(--gold-300); } .btn--on-dark:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--maroon-950); } .btn--block { width: 100%; } .btn--sm { padding: 9px 18px; font-size: 0.85rem; min-height: 36px; } /* ---------------------------------------------------------------------- */ /* Breadcrumb */ /* ---------------------------------------------------------------------- */ .breadcrumb { padding: var(--space-4) 0 0; } .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px; font-size: 0.82rem; color: var(--ink-soft); } .breadcrumb li { display: flex; align-items: center; gap: 4px; } .breadcrumb li + li::before { content: "›"; margin-right: 4px; color: var(--gold-500); } .breadcrumb a { color: var(--maroon-700); font-weight: 600; display: inline-block; padding: 12px 2px; } .breadcrumb a:hover { text-decoration: underline; } /* ---------------------------------------------------------------------- */ /* Hero */ /* ---------------------------------------------------------------------- */ .hero { position: relative; padding: var(--space-8) 0 var(--space-7); overflow: hidden; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--maroon-700); background: var(--gold-100); padding: 7px 16px; border-radius: var(--radius-pill); margin-bottom: var(--space-5); } .hero h1 { max-width: 20ch; margin-bottom: var(--space-4); } .hero .lede { font-size: 1.15rem; max-width: 56ch; margin-bottom: var(--space-6); } .hero-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-7); } .hero-facts { display: flex; flex-wrap: wrap; gap: var(--space-6); font-size: 0.88rem; color: var(--ink-soft); } .hero-facts strong { font-family: var(--font-display); font-size: 1.3rem; color: var(--maroon-800); display: block; } .hero--page { padding: var(--space-7) 0 var(--space-6); } /* Homepage-only large hero */ .hero--home { padding: var(--space-9) 0 var(--space-8); } .hero--home h1 { max-width: 16ch; font-size: clamp(2.4rem, 5.6vw, 4rem); } /* ---------------------------------------------------------------------- */ /* Sections */ /* ---------------------------------------------------------------------- */ .section { padding: var(--space-8) 0; } .section--tight { padding: var(--space-6) 0; } .section--tint { background: var(--gold-100); } .section--dark { background: linear-gradient(160deg, var(--maroon-900), var(--maroon-800) 60%, var(--maroon-700)); color: var(--blush-50); position: relative; } .section--dark h2, .section--dark h3 { color: var(--cream); } .section--dark p { color: rgba(251, 242, 236, 0.82); } .section-head { max-width: 62ch; margin-bottom: var(--space-7); } .section-head .eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-700); margin-bottom: var(--space-3); display: block; } .section--dark .section-head .eyebrow { color: var(--gold-300); } .section-head p { margin-top: var(--space-3); font-size: 1.05rem; } /* ---------------------------------------------------------------------- */ /* Value props / feature grid */ /* ---------------------------------------------------------------------- */ .value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-6); } .value-item { padding: var(--space-5); } .value-icon { width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--gold-500); color: var(--maroon-950); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); } .section--dark .value-icon { background: rgba(255,255,255,0.12); color: var(--gold-300); } .value-item h3 { font-size: 1.1rem; margin-bottom: var(--space-2); } .value-item p { font-size: 0.95rem; } .section--dark .value-item p { color: rgba(251, 242, 236, 0.75); } /* ---------------------------------------------------------------------- */ /* Cards (community / clan tiles) */ /* ---------------------------------------------------------------------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-5); } .clan-card { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-5); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .clan-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold-400); } .clan-card h3 { font-size: 1.05rem; margin-bottom: var(--space-2); } .clan-card p { font-size: 0.88rem; margin-bottom: var(--space-4); } .clan-card .card-links { display: flex; flex-wrap: wrap; gap: 6px; } .clan-card .card-links a { font-size: 0.78rem; font-weight: 600; color: var(--maroon-700); background: var(--blush-50); padding: 12px 14px; border-radius: var(--radius-pill); border: 1px solid var(--line); } .clan-card .card-links a:hover { background: var(--gold-100); border-color: var(--gold-400); } .category-block { margin-bottom: var(--space-8); } .category-block > h2 { margin-bottom: var(--space-2); } .category-block > .cat-desc { max-width: 68ch; margin-bottom: var(--space-5); } .chip-list { display: flex; flex-wrap: wrap; gap: 8px; } .chip-list a { font-size: 0.84rem; font-weight: 600; color: var(--maroon-800); background: var(--blush-25); border: 1px solid var(--line); padding: 12px 16px; border-radius: var(--radius-pill); transition: background 0.15s ease, border-color 0.15s ease; } .chip-list a:hover { background: var(--gold-100); border-color: var(--gold-400); } /* ---------------------------------------------------------------------- */ /* FAQ */ /* ---------------------------------------------------------------------- */ .faq-list { max-width: 74ch; } .faq-item { border-bottom: 1px solid var(--line); } .faq-item:first-child { border-top: 1px solid var(--line); } .faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5) 0; font-family: var(--font-display); font-size: 1.05rem; color: var(--maroon-900); font-weight: 500; } .faq-q .plus { flex-shrink: 0; width: 24px; height: 24px; position: relative; } .faq-q .plus::before, .faq-q .plus::after { content:""; position:absolute; background: var(--gold-600); top: 50%; left: 50%; transform: translate(-50%,-50%); } .faq-q .plus::before { width: 14px; height: 2px; } .faq-q .plus::after { width: 2px; height: 14px; transition: transform 0.2s ease; } .faq-item.is-open .faq-q .plus::after { transform: translate(-50%,-50%) rotate(90deg) scale(0); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } .faq-item.is-open .faq-a { max-height: 400px; } .faq-a p { padding-bottom: var(--space-5); font-size: 0.96rem; } /* ---------------------------------------------------------------------- */ /* CTA banner */ /* ---------------------------------------------------------------------- */ .cta-banner { background: linear-gradient(135deg, var(--maroon-800), var(--maroon-600)); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-7); text-align: center; position: relative; overflow: hidden; } .cta-banner h2 { color: var(--cream); max-width: 26ch; margin: 0 auto var(--space-3); } .cta-banner p { color: rgba(251,242,236,0.85); max-width: 50ch; margin: 0 auto var(--space-6); } /* ---------------------------------------------------------------------- */ /* Footer */ /* ---------------------------------------------------------------------- */ .site-footer { background: var(--maroon-950); color: rgba(251,242,236,0.75); padding: var(--space-8) 0 var(--space-5); } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); padding-bottom: var(--space-7); } @media (max-width: 780px) { .footer-top { grid-template-columns: 1fr 1fr; } } .footer-brand { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-4); } .footer-brand img { height: 40px; } .footer-brand .brand-name { color: var(--cream); font-family: var(--font-display); font-size: 1.1rem; } .footer-tagline { font-size: 0.88rem; max-width: 30ch; } .footer-col h4 { color: var(--gold-300); font-family: var(--font-body); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--space-4); } .footer-col ul { display: flex; flex-direction: column; gap: 0; } .footer-col a { font-size: 0.92rem; display: inline-block; padding: 12px 0; } .footer-col a:hover { color: var(--gold-300); } .footer-bottom { border-top: 1px solid rgba(251,242,236,0.12); padding-top: var(--space-5); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); font-size: 0.82rem; } .footer-bottom a:hover { color: var(--gold-300); } .footer-legal { display: flex; gap: var(--space-4); flex-wrap: wrap; } .footer-legal a { display: inline-block; padding: 12px 4px; } /* ---------------------------------------------------------------------- */ /* Quick-find (homepage community picker) */ /* ---------------------------------------------------------------------- */ .quick-find { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-md); } .quick-find-row { display: flex; gap: var(--space-3); flex-wrap: wrap; } .quick-find select { flex: 1; min-width: 200px; padding: 13px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--blush-25); font-size: 0.95rem; } .quick-find label { font-size: 0.85rem; font-weight: 700; color: var(--maroon-800); display: block; margin-bottom: 8px; } /* ---------------------------------------------------------------------- */ /* Misc utility */ /* ---------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; color: var(--emerald-700); background: var(--emerald-50); padding: 5px 12px; border-radius: var(--radius-pill); } .two-col { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); align-items: start; } @media (max-width: 780px) { .two-col { grid-template-columns: 1fr; } } .stat-strip { display: flex; flex-wrap: wrap; gap: var(--space-7); padding: var(--space-6) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: var(--space-7) 0; } .stat-strip .stat strong { display: block; font-family: var(--font-display); font-size: 1.7rem; color: var(--maroon-800); } .stat-strip .stat span { font-size: 0.85rem; color: var(--ink-soft); } .table-wrap { overflow-x: auto; } table.compare { width: 100%; border-collapse: collapse; font-size: 0.92rem; } table.compare th, table.compare td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); } table.compare th { font-family: var(--font-display); color: var(--maroon-800); } .form-field { margin-bottom: var(--space-4); } .form-field label { display: block; font-size: 0.88rem; font-weight: 700; margin-bottom: 6px; color: var(--maroon-800); } .form-field input, .form-field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--cream); font-size: 0.95rem; } .form-field input:focus, .form-field textarea:focus { border-color: var(--gold-500); } .contact-card { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); } .contact-card h2 { font-size: 1rem; margin-bottom: var(--space-2); } .contact-methods { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-5); } .contact-methods a { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--maroon-800); } .contact-methods .icn { width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--gold-100); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .notice-box { border: 1px dashed var(--gold-500); background: var(--gold-100); border-radius: var(--radius-md); padding: var(--space-5); font-size: 0.92rem; } @media (max-width: 640px) { .hero-actions .btn { width: 100%; } .footer-top { grid-template-columns: 1fr; } }