/* ================================================================ APNA PARIVAR KALYAN SAMITI — style.css Website: yourwebsite.com ================================================================ */ /* ── GOOGLE FONTS (also in HTML for faster load) ── */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@300;400;500;600;700;800&family=Outfit:wght@300;400;500;600;700;800&display=swap'); /* ================================================================ 1. CSS VARIABLES ================================================================ */ :root { /* Brand Colors */ --s : #E8590C; /* saffron — primary */ --sl : #FF7A35; /* saffron light */ --sp : #FFF3ED; /* saffron pale */ --n : #0B1D3A; /* navy */ --nm : #132952; /* navy mid */ --g : #C8900A; /* gold */ --gl : #F0C040; /* gold light */ /* Neutrals */ --wh : #FFFFFF; --cr : #FDFAF6; /* cream bg */ --g50 : #F8F7F2; --g100: #EEEDE5; --g200: #DDDCD2; --g400: #9A9890; --g600: #5C5A52; --g800: #1E1D17; /* Status */ --ok : #157A3C; --err : #C0392B; --warn: #B45309; /* Typography */ --fh : 'Noto Sans Devanagari', sans-serif; --fb : 'Outfit', sans-serif; /* Border Radius */ --r6 : 6px; --r8 : 8px; --r12 : 12px; --r16 : 16px; --r24 : 24px; --r999: 999px; /* Shadows */ --sh1 : 0 2px 8px rgba(11,29,58,.07); --sh2 : 0 4px 16px rgba(11,29,58,.12); --sh3 : 0 12px 40px rgba(11,29,58,.16); --sh4 : 0 24px 80px rgba(11,29,58,.20); } /* ================================================================ 2. RESET ================================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--fh); background: var(--cr); color: var(--g800); overflow-x: hidden; line-height: 1.6; } a { text-decoration: none; color: inherit; } button { cursor: pointer; font-family: inherit; border: none; background: none; } input, select, textarea { font-family: inherit; } img { max-width: 100%; height: auto; display: block; } ul, ol { list-style: none; } /* Scrollbar */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-thumb { background: var(--s); border-radius: 2px; } /* ================================================================ 3. UTILITY CLASSES ================================================================ */ .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; } .section { padding: 80px 24px; } .sec-alt { background: var(--g50); } .tc { text-align: center; } .tc .sec-desc { margin: 0 auto; } /* Section Labels */ .sec-label { display: inline-flex; align-items: center; gap: 8px; color: var(--s); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; font-family: var(--fb); } .sec-label::before { content: ''; width: 18px; height: 2px; background: var(--s); border-radius: 2px; } .sec-h2 { font-size: clamp(22px, 3.5vw, 38px); font-weight: 800; color: var(--n); line-height: 1.25; margin-bottom: 14px; } .sec-desc { font-size: 15px; color: var(--g600); line-height: 1.8; max-width: 580px; } .sec-head { margin-bottom: 44px; } /* Buttons */ .btn-p { display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; background: linear-gradient(135deg, var(--s), var(--sl)); color: #fff; border-radius: var(--r999); font-size: 14px; font-weight: 600; box-shadow: 0 4px 16px rgba(232,89,12,.3); transition: .25s; cursor: pointer; font-family: var(--fh); } .btn-p:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(232,89,12,.42); } .btn-o { display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; background: transparent; color: rgba(255,255,255,.85); border: 1.5px solid rgba(255,255,255,.3); border-radius: var(--r999); font-size: 14px; font-weight: 500; transition: .25s; cursor: pointer; font-family: var(--fh); } .btn-o:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); } /* Reveal Animation */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; } .reveal.shown { opacity: 1; transform: translateY(0); } .d1 { transition-delay: .12s; } .d2 { transition-delay: .22s; } .d3 { transition-delay: .32s; } /* ================================================================ 4. GOVT BAR ================================================================ */ .govt-bar { background: var(--n); padding: 6px 20px; } .gb-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 12px; font-family: var(--fb); font-size: 11.5px; color: rgba(255,255,255,.65); } .gb-divider { width: 1px; height: 12px; background: rgba(255,255,255,.2); margin: 0 4px; } /* ================================================================ 5. NEWS TICKER ================================================================ */ .ticker-wrap { background: var(--s); padding: 7px 0; display: flex; align-items: center; overflow: hidden; } .ticker-badge { background: var(--n); color: var(--gl); font-size: 10px; font-weight: 700; padding: 2px 14px; white-space: nowrap; letter-spacing: .1em; font-family: var(--fb); flex-shrink: 0; } .ticker-scroll { flex: 1; overflow: hidden; } .ticker-inner { display: inline-block; white-space: nowrap; animation: tick 35s linear infinite; font-size: 12px; color: #fff; font-family: var(--fb); font-weight: 500; padding-left: 24px; } @keyframes tick { from { transform: translateX(100vw); } to { transform: translateX(-100%); } } /* ================================================================ 6. NAVBAR ================================================================ */ #navbar { position: sticky; top: 0; z-index: 900; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); border-bottom: 1px solid var(--g100); transition: box-shadow .3s; } #navbar.scrolled { box-shadow: var(--sh2); } .nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .nav-brand { display: flex; align-items: center; gap: 10px; cursor: pointer; } .brand-icon { width: 40px; height: 40px; background: linear-gradient(135deg, var(--s), var(--g)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .brand-h { font-size: 13.5px; font-weight: 700; color: var(--n); line-height: 1.2; display: block; } .brand-s { font-size: 10.5px; color: var(--s); font-weight: 500; display: block; } .nav-links { display: flex; align-items: center; } .nav-a { padding: 8px 10px; font-size: 12.5px; font-weight: 500; color: var(--g600); border-radius: var(--r8); transition: .2s; cursor: pointer; white-space: nowrap; } .nav-a:hover, .nav-a.active { color: var(--s); background: var(--sp); } .nav-actions { display: flex; align-items: center; gap: 10px; } .lang-switch { display: flex; background: var(--g50); border-radius: var(--r999); padding: 3px; gap: 2px; border: 1px solid var(--g200); } .ls-btn { padding: 3px 10px; border-radius: var(--r999); font-size: 11px; font-weight: 700; color: var(--g600); transition: .2s; font-family: var(--fb); } .ls-btn.active { background: var(--n); color: #fff; } .nav-cta { padding: 9px 18px; background: linear-gradient(135deg, var(--s), var(--sl)); color: #fff; border-radius: var(--r999); font-size: 12.5px; font-weight: 600; box-shadow: 0 3px 12px rgba(232,89,12,.3); transition: .25s; cursor: pointer; } .nav-cta:hover { transform: translateY(-1px); } /* Hamburger */ .hamburger { display: none; flex-direction: column; gap: 4px; padding: 8px; border-radius: var(--r8); } .hamburger span { width: 22px; height: 2px; background: var(--n); border-radius: 2px; transition: .3s; display: block; } .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); } /* Mobile Drawer */ .mob-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 300px; background: var(--wh); z-index: 1000; transform: translateX(-100%); transition: .3s ease; box-shadow: var(--sh4); display: flex; flex-direction: column; padding: 24px; } .mob-drawer.open { transform: translateX(0); } .mob-close { align-self: flex-end; font-size: 20px; color: var(--g600); padding: 4px 8px; border-radius: var(--r8); } .mob-brand { font-size: 14px; font-weight: 700; color: var(--n); padding: 16px 0 20px; border-bottom: 1px solid var(--g100); } .mob-nav { display: flex; flex-direction: column; gap: 2px; padding: 16px 0; flex: 1; overflow-y: auto; } .mob-nav a { font-size: 15px; padding: 12px; border-radius: var(--r8); color: var(--g600); transition: .2s; cursor: pointer; display: block; } .mob-nav a:hover { background: var(--sp); color: var(--s); } .mob-lang { display: flex; gap: 8px; padding-top: 16px; border-top: 1px solid var(--g100); } .mob-lang button { flex: 1; padding: 10px; border-radius: var(--r8); background: var(--g50); font-size: 13px; font-weight: 600; color: var(--n); border: 1px solid var(--g200); } .mob-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 999; display: none; } .mob-overlay.show { display: block; } /* ================================================================ 7. HERO ================================================================ */ .hero { min-height: 90vh; background: linear-gradient(135deg, #060F1E 0%, #0B1D3A 50%, #0A231E 100%); position: relative; overflow: hidden; display: flex; flex-direction: column; } .hero-bg { position: absolute; inset: 0; pointer-events: none; } .hblob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .35; } .hb1 { width: 600px; height: 600px; background: radial-gradient(circle, #E8590C 0%, transparent 70%); top: -200px; right: -150px; } .hb2 { width: 450px; height: 450px; background: radial-gradient(circle, #157A3C 0%, transparent 70%); bottom: -150px; left: -100px; } .hb3 { width: 300px; height: 300px; background: radial-gradient(circle, #C8900A 0%, transparent 70%); top: 50%; left: 40%; } .hero-pat { position: absolute; inset: 0; opacity: .04; background-image: repeating-linear-gradient(0deg, #fff 0, #fff 1px, transparent 0, transparent 44px), repeating-linear-gradient(90deg, #fff 0, #fff 1px, transparent 0, transparent 44px); } .hero-content { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 80px 24px 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; width: 100%; flex: 1; } .hero-tag { display: inline-flex; align-items: center; gap: 8px; background: rgba(232,89,12,.15); border: 1px solid rgba(232,89,12,.4); color: var(--gl); padding: 5px 14px; border-radius: var(--r999); font-size: 11.5px; font-weight: 600; margin-bottom: 20px; font-family: var(--fb); } .tag-dot { width: 6px; height: 6px; background: var(--s); border-radius: 50%; animation: pulseD 2s infinite; display: inline-block; } @keyframes pulseD { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.5; transform:scale(1.4); } } .h1-sm { display: block; font-size: clamp(18px,2.5vw,28px); font-weight: 400; color: rgba(255,255,255,.7); margin-bottom: 4px; } .h1-big { display: block; font-size: clamp(34px,5vw,64px); font-weight: 800; color: #fff; line-height: 1.05; letter-spacing: -.02em; } .h1-pl { display: block; font-size: clamp(14px,1.8vw,20px); font-weight: 300; color: rgba(255,255,255,.5); margin-top: 8px; font-family: var(--fb); } .hero-sub { font-size: 15px; color: rgba(255,255,255,.65); line-height: 1.85; margin-bottom: 32px; max-width: 520px; } .hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 44px; } .hero-stats { display: flex; gap: 0; flex-wrap: wrap; } .hst { padding: 0 28px 0 0; } .hst-n { display: block; font-size: 28px; font-weight: 800; color: var(--gl); line-height: 1; font-family: var(--fb); } .hst-l { display: block; font-size: 11px; color: rgba(255,255,255,.5); margin-top: 4px; } .hst-div { width: 1px; background: rgba(255,255,255,.15); margin: 0 28px 0 0; height: 36px; align-self: center; } /* Hero Cards */ .hcards { display: flex; flex-direction: column; gap: 10px; } .hcard { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r12); padding: 16px 18px; cursor: pointer; transition: .3s; position: relative; } .hcard:hover { background: rgba(255,255,255,.11); transform: translateX(6px); border-color: rgba(232,89,12,.4); } .hcard-ic { font-size: 22px; width: 44px; height: 44px; background: rgba(255,255,255,.08); border-radius: var(--r8); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hcard-t { font-size: 13.5px; font-weight: 600; color: #fff; } .hcard-s { font-size: 11.5px; color: rgba(255,255,255,.5); margin-top: 2px; } .hcard-ar { position: absolute; right: 16px; font-size: 16px; color: rgba(255,255,255,.3); transition: .3s; } .hcard:hover .hcard-ar { color: var(--s); transform: translateX(4px); } .hero-scroll { text-align: center; padding: 0 24px 24px; color: rgba(255,255,255,.35); font-size: 11px; font-family: var(--fb); display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 1; } .sarr { width: 18px; height: 18px; border-right: 2px solid rgba(255,255,255,.3); border-bottom: 2px solid rgba(255,255,255,.3); transform: rotate(45deg); animation: sb .8s ease-in-out infinite alternate; } @keyframes sb { from { transform: rotate(45deg) translate(-2px,-2px); } to { transform: rotate(45deg) translate(2px,2px); } } /* ================================================================ 8. STATS BAND ================================================================ */ .stats-band { background: linear-gradient(135deg, var(--n), #071526); padding: 52px 24px; } .sb-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; } .sb-item { text-align: center; padding: 0 52px; } .sb-n { font-size: 48px; font-weight: 800; color: var(--gl); font-family: var(--fb); line-height: 1; display: inline; } .sb-pl { font-size: 28px; color: var(--s); font-weight: 700; font-family: var(--fb); } .sb-l { display: block; font-size: 12px; color: rgba(255,255,255,.55); margin-top: 6px; font-weight: 500; } .sb-div { width: 1px; height: 56px; background: rgba(255,255,255,.1); } /* ================================================================ 9. ABOUT ================================================================ */ .about-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: center; } .av-main { background: linear-gradient(135deg, var(--sp), #FFF7F0); border-radius: var(--r24); min-height: 380px; display: flex; align-items: center; justify-content: center; border: 1.5px solid rgba(232,89,12,.15); position: relative; font-size: 100px; } .av-badge { position: absolute; bottom: -12px; right: -12px; background: var(--n); color: #fff; border-radius: var(--r16); padding: 18px 22px; box-shadow: var(--sh3); text-align: center; } .avb-n { font-size: 26px; font-weight: 800; color: var(--gl); font-family: var(--fb); line-height: 1; } .avb-l { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 4px; } .av-card { position: absolute; background: var(--wh); border-radius: var(--r8); padding: 10px 14px; font-size: 12px; font-weight: 600; color: var(--n); display: flex; align-items: center; gap: 8px; box-shadow: var(--sh2); } .ac1 { top: 20px; left: -16px; } .ac2 { top: 80px; left: -16px; } .about-list { list-style: none; margin: 20px 0 28px; } .about-list li { padding: 11px 0; border-bottom: 1px dashed var(--g200); font-size: 14px; color: var(--g600); line-height: 1.7; display: flex; gap: 10px; } .about-list li::before { content: '✦'; color: var(--s); font-size: 9px; margin-top: 5px; flex-shrink: 0; } /* ================================================================ 10. SERVICES ================================================================ */ .svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px,1fr)); gap: 18px; } .svc-card { background: var(--wh); border-radius: var(--r16); padding: 26px; border: 1px solid var(--g200); cursor: pointer; transition: .3s; position: relative; overflow: hidden; } .svc-card:hover { transform: translateY(-5px); box-shadow: var(--sh3); border-color: rgba(232,89,12,.25); } .svc-card:hover .sc-ar { color: var(--s); transform: translateX(4px); } .sc-icon { width: 54px; height: 54px; border-radius: var(--r12); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 16px; } .sc-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; } .sc-tag { padding: 2px 10px; background: var(--sp); color: var(--s); border-radius: var(--r999); font-size: 10.5px; font-weight: 700; } .sc-ar { font-size: 18px; color: var(--g200); transition: .3s; } .svc-card h3 { font-size: 15px; font-weight: 700; color: var(--n); margin-bottom: 8px; } .svc-card p { font-size: 13px; color: var(--g600); line-height: 1.75; } /* ================================================================ 11. YOJANA ================================================================ */ .yoj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 20px; } .ycard { background: linear-gradient(140deg, var(--n), var(--nm)); border-radius: var(--r16); padding: 28px; color: #fff; position: relative; overflow: hidden; transition: .3s; } .ycard::after { content: ''; position: absolute; top: -60px; right: -60px; width: 180px; height: 180px; background: rgba(255,255,255,.025); border-radius: 50%; } .ycard:hover { transform: translateY(-4px); box-shadow: var(--sh4); } .yc-badge { display: inline-block; background: rgba(232,89,12,.2); border: 1px solid rgba(232,89,12,.4); color: #FFB380; padding: 2px 11px; border-radius: var(--r999); font-size: 10px; font-weight: 700; margin-bottom: 14px; font-family: var(--fb); } .yc-ic { font-size: 32px; margin-bottom: 12px; } .ycard h3 { font-size: 16px; font-weight: 700; color: var(--gl); margin-bottom: 10px; } .ycard p { font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.8; margin-bottom: 16px; } .yc-ul { list-style: none; margin-bottom: 20px; } .yc-ul li { font-size: 12.5px; color: rgba(255,255,255,.6); padding: 4px 0; display: flex; gap: 8px; } .yc-ul li::before { content: '→'; color: var(--s); flex-shrink: 0; } .yc-btn { padding: 9px 20px; background: var(--s); color: #fff; border-radius: var(--r999); font-size: 13px; font-weight: 600; transition: .2s; font-family: var(--fh); cursor: pointer; } .yc-btn:hover { background: var(--sl); transform: translateY(-1px); } /* ================================================================ 12. REGISTRATION FORMS ================================================================ */ .reg-wrap { background: var(--wh); border-radius: var(--r24); box-shadow: var(--sh3); overflow: hidden; border: 1px solid var(--g100); } .reg-tabs { display: flex; background: var(--g50); border-bottom: 1px solid var(--g200); overflow-x: auto; } .rtab { flex: 1; padding: 14px 12px; text-align: center; font-size: 13px; font-weight: 500; color: var(--g600); transition: .2s; border-bottom: 2px solid transparent; white-space: nowrap; min-width: 100px; cursor: pointer; } .rtab.active { color: var(--s); border-bottom-color: var(--s); background: var(--wh); font-weight: 600; } .reg-body { display: grid; grid-template-columns: 280px 1fr; } .reg-side { background: linear-gradient(170deg, var(--n), #071A2E); padding: 36px 28px; color: #fff; } .reg-side h3 { font-size: 17px; font-weight: 700; margin-bottom: 24px; color: var(--gl); } .rsb-item { display: flex; gap: 12px; margin-bottom: 18px; align-items: flex-start; } .rsb-ic { font-size: 18px; width: 36px; height: 36px; background: rgba(255,255,255,.07); border-radius: var(--r8); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .rsb-item strong { display: block; font-size: 13px; color: #fff; margin-bottom: 2px; } .rsb-item small { font-size: 11.5px; color: rgba(255,255,255,.5); } .reg-forms { padding: 32px 28px; } .rform { display: none; } .rform.active { display: block; } .fg { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .fg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .fg label { font-size: 11.5px; font-weight: 600; color: var(--g600); text-transform: uppercase; letter-spacing: .05em; } .fg input, .fg select, .fg textarea { padding: 11px 14px; border: 1.5px solid var(--g200); border-radius: var(--r8); font-size: 14px; color: var(--g800); background: var(--g50); outline: none; transition: .2s; -webkit-appearance: none; } .fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--s); background: var(--wh); box-shadow: 0 0 0 3px rgba(232,89,12,.1); } .fg textarea { resize: vertical; min-height: 90px; } .fsub { width: 100%; padding: 14px; background: linear-gradient(135deg, var(--s), var(--sl)); color: #fff; border-radius: var(--r8); font-size: 15px; font-weight: 600; box-shadow: 0 4px 16px rgba(232,89,12,.3); transition: .25s; margin-top: 8px; font-family: var(--fh); cursor: pointer; } .fsub:hover { transform: translateY(-2px); } .fsub:disabled { opacity: .6; cursor: not-allowed; transform: none; } /* ================================================================ 13. EVENTS ================================================================ */ .ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px,1fr)); gap: 22px; } .ev-card { background: var(--wh); border-radius: var(--r16); overflow: hidden; border: 1px solid var(--g200); transition: .3s; } .ev-card:hover { transform: translateY(-4px); box-shadow: var(--sh3); } .ev-top { background: linear-gradient(135deg, var(--n), var(--nm)); padding: 22px; display: flex; justify-content: space-between; align-items: flex-start; } .ev-dd { font-size: 36px; font-weight: 800; color: var(--gl); line-height: 1; font-family: var(--fb); display: block; } .ev-mm { font-size: 11px; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; display: block; } .ev-type { background: rgba(232,89,12,.2); border: 1px solid rgba(232,89,12,.4); color: #FFB380; padding: 3px 12px; border-radius: var(--r999); font-size: 11px; font-weight: 600; white-space: nowrap; } .ev-body { padding: 20px; } .ev-body h3 { font-size: 15.5px; font-weight: 700; color: var(--n); margin-bottom: 8px; } .ev-body p { font-size: 13px; color: var(--g600); line-height: 1.7; margin-bottom: 14px; } .ev-meta { display: flex; gap: 16px; flex-wrap: wrap; } .ev-meta span { font-size: 12px; color: var(--g400); } .ev-rbtn { display: block; width: calc(100% - 32px); margin: 10px 16px 16px; padding: 10px; background: var(--sp); color: var(--s); border-radius: var(--r8); font-size: 13px; font-weight: 600; text-align: center; transition: .2s; font-family: var(--fh); cursor: pointer; } .ev-rbtn:hover { background: var(--s); color: #fff; } /* ================================================================ 14. TEAM / MEMBERS ================================================================ */ .btabs { display: flex; gap: 6px; justify-content: center; margin-bottom: 40px; flex-wrap: wrap; } .btab { padding: 9px 22px; border-radius: var(--r999); border: 1.5px solid var(--g200); color: var(--g600); font-size: 13px; font-weight: 500; transition: .25s; cursor: pointer; } .btab.active { background: var(--n); border-color: var(--n); color: #fff; } .bsec { display: none; } .bsec.active { display: block; } .feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; } .feat-card { background: linear-gradient(135deg, var(--n), var(--nm)); border-radius: var(--r16); padding: 26px; display: flex; gap: 18px; align-items: flex-start; } .fc-ph { width: 84px; height: 84px; border-radius: var(--r12); background: linear-gradient(135deg, var(--s), var(--g)); display: flex; align-items: center; justify-content: center; font-size: 36px; flex-shrink: 0; border: 3px solid rgba(255,255,255,.1); } .fc-badge { display: inline-block; background: rgba(232,89,12,.2); border: 1px solid rgba(232,89,12,.4); color: #FFB380; padding: 2px 11px; border-radius: var(--r999); font-size: 10px; font-weight: 700; margin-bottom: 8px; } .fc-info h3 { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 3px; } .fc-info p { font-size: 12.5px; color: var(--gl); margin-bottom: 12px; } .fc-contacts { display: flex; flex-direction: column; gap: 6px; } .fc-contacts a, .fc-contacts span { font-size: 12px; color: rgba(255,255,255,.6); display: flex; align-items: center; gap: 6px; } .fc-contacts a:hover { color: var(--gl); } .mem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 14px; } .mem-card { background: var(--wh); border-radius: 14px; border: 1px solid var(--g200); overflow: hidden; transition: .3s; } .mem-card:hover { transform: translateY(-4px); box-shadow: var(--sh3); border-color: rgba(232,89,12,.25); } .mc-top { padding: 22px 16px 16px; text-align: center; position: relative; background: linear-gradient(135deg, var(--sp), #FFF8F5); } .mc-since { position: absolute; top: 8px; right: 8px; background: rgba(232,89,12,.1); color: var(--s); font-size: 9.5px; padding: 2px 6px; border-radius: 4px; font-weight: 700; font-family: var(--fb); } .mc-ph { width: 68px; height: 68px; border-radius: 50%; background: linear-gradient(135deg, var(--s), var(--g)); display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 10px; border: 3px solid var(--wh); box-shadow: 0 4px 14px rgba(0,0,0,.1); overflow: hidden; } .mc-ph img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; display: block; } .fc-ph { width: 84px; height: 84px; border-radius: var(--r12); background: linear-gradient(135deg, var(--s), var(--g)); display: flex; align-items: center; justify-content: center; font-size: 36px; flex-shrink: 0; border: 3px solid rgba(255,255,255,.1); overflow: hidden; } .fc-ph img { width: 84px; height: 84px; border-radius: var(--r12); object-fit: cover; display: block; } .mc-top h4 { font-size: 13.5px; font-weight: 700; color: var(--n); } .mc-role { display: inline-block; font-size: 10.5px; font-weight: 600; color: var(--s); background: var(--wh); padding: 2px 9px; border-radius: var(--r999); margin-top: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.07); } .mc-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; } .mc-body a, .mc-body span { font-size: 12px; color: var(--g600); display: flex; align-items: center; gap: 6px; } .mc-body a:hover { color: var(--s); } /* ================================================================ 15. GALLERY ================================================================ */ .gal-filters { display: flex; gap: 8px; justify-content: center; margin-bottom: 28px; flex-wrap: wrap; } .gfbtn { padding: 7px 18px; border-radius: var(--r999); border: 1.5px solid var(--g200); background: transparent; color: var(--g600); font-size: 13px; transition: .2s; cursor: pointer; } .gfbtn.active, .gfbtn:hover { background: var(--s); border-color: var(--s); color: #fff; } .gal-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; } .gitem { border-radius: var(--r12); overflow: hidden; cursor: pointer; transition: .3s; position: relative; aspect-ratio: 1; } .gi-lg { grid-column: span 2; grid-row: span 2; } .gitem:hover { transform: scale(1.02); box-shadow: var(--sh3); } .gi-in { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; } .gitem:nth-child(3n+1) .gi-in { background: linear-gradient(135deg,#FFF0E8,#FFE0CC); } .gitem:nth-child(3n+2) .gi-in { background: linear-gradient(135deg,#E8F5EE,#CCF0DA); } .gitem:nth-child(3n) .gi-in { background: linear-gradient(135deg,#E8EEFF,#D4DDFF); } .gi-em { font-size: 38px; position: relative; z-index: 1; } .gi-lg .gi-em { font-size: 72px; } .gi-ov { position: absolute; inset: 0; background: linear-gradient(to top,rgba(11,29,58,.92),transparent); opacity: 0; transition: .3s; display: flex; align-items: flex-end; padding: 14px; z-index: 2; } .gi-ov span { color: #fff; font-size: 12.5px; font-weight: 600; } .gitem:hover .gi-ov { opacity: 1; } /* ================================================================ 16. TESTIMONIALS ================================================================ */ .testi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 20px; } .tcard { background: var(--wh); border-radius: var(--r16); padding: 26px; border: 1px solid var(--g200); position: relative; transition: .3s; } .tcard:hover { box-shadow: var(--sh2); } .tc-q { position: absolute; top: 12px; right: 18px; font-size: 80px; color: var(--s); opacity: .08; font-family: Georgia,serif; line-height: 1; pointer-events: none; } .tstars { color: var(--g); font-size: 13px; margin-bottom: 10px; letter-spacing: 2px; } .tcard p { font-size: 13.5px; color: var(--g600); line-height: 1.85; font-style: italic; margin-bottom: 18px; position: relative; } .tc-author { display: flex; align-items: center; gap: 12px; } .tca-av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,var(--s),var(--g)); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; } .tc-author strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--n); } .tc-author small { font-size: 11.5px; color: var(--g400); } /* ================================================================ 17. CONTACT ================================================================ */ .ct-grid { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr; gap: 22px; align-items: start; } .ci-card { background: var(--n); border-radius: var(--r16); padding: 28px; color: #fff; } .ci-item { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.07); } .ci-item:last-of-type { border-bottom: none; } .ci-ic { font-size: 20px; width: 40px; height: 40px; background: rgba(232,89,12,.15); border-radius: var(--r8); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ci-item strong { display: block; font-size: 11px; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 3px; } .ci-item span, .ci-item a { font-size: 13.5px; color: #fff; font-weight: 500; display: block; } .ci-item a:hover { color: var(--gl); } .soc-row { display: flex; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.07); flex-wrap: wrap; } .soc-btn { width: 38px; height: 38px; border-radius: var(--r8); display: flex; align-items: center; justify-content: center; transition: .25s; } .soc-btn svg { width: 17px; height: 17px; } .soc-btn.fb { background: #1877F2; color: #fff; } .soc-btn.ig { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: #fff; } .soc-btn.yt { background: #FF0000; color: #fff; } .soc-btn.wa { background: #25D366; color: #fff; } .soc-btn:hover { opacity: .85; transform: translateY(-2px); } .cf-card { background: var(--g50); border-radius: var(--r16); padding: 28px; border: 1px solid var(--g200); } .cf-card h3 { font-size: 17px; font-weight: 700; color: var(--n); margin-bottom: 20px; } .map-card { border-radius: var(--r16); overflow: hidden; border: 1px solid var(--g200); box-shadow: var(--sh2); } .map-card iframe { width: 100%; height: 260px; border: none; display: block; } .map-tag { padding: 14px 16px; background: var(--wh); } .map-tag strong { display: block; font-size: 13px; font-weight: 700; color: var(--n); margin-bottom: 3px; } .map-tag span { display: block; font-size: 12px; color: var(--g600); margin-bottom: 6px; } .map-tag a { font-size: 12.5px; color: var(--s); font-weight: 600; } .map-tag a:hover { text-decoration: underline; } /* ================================================================ 18. MODALS & OVERLAYS ================================================================ */ .sov-bg { position: fixed; inset: 0; background: rgba(0,0,0,.72); z-index: 1100; display: none; backdrop-filter: blur(4px); } .sov-bg.show { display: block; } .sov-box { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.94); background: var(--wh); border-radius: var(--r24); padding: 44px; max-width: 680px; width: calc(100% - 40px); z-index: 1101; opacity: 0; transition: .3s ease; pointer-events: none; max-height: 90vh; overflow-y: auto; } .sov-box.show { opacity: 1; transform: translate(-50%,-50%) scale(1); pointer-events: all; } .sov-close { position: absolute; top: 16px; right: 16px; font-size: 18px; color: var(--g600); padding: 6px 10px; border-radius: var(--r8); background: var(--g50); transition: .2s; } .sov-close:hover { background: var(--g100); } .modal-ov { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(4px); } .modal-ov.show { display: flex; } .modal-box { background: var(--wh); border-radius: var(--r24); padding: 40px; max-width: 440px; width: 100%; text-align: center; animation: mIn .3s ease; } @keyframes mIn { from { opacity:0; transform:scale(.92) translateY(16px); } to { opacity:1; transform:scale(1) translateY(0); } } .mb-ic { font-size: 60px; margin-bottom: 14px; } .modal-box h3 { font-size: 22px; font-weight: 800; color: var(--n); margin-bottom: 8px; } .modal-box p { font-size: 14px; color: var(--g600); line-height: 1.8; margin-bottom: 24px; } /* ================================================================ 19. FOOTER ================================================================ */ footer { background: var(--n); color: rgba(255,255,255,.65); padding: 60px 24px 0; } .foot-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 44px; padding-bottom: 48px; } .foot-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .foot-brand p { font-size: 13px; line-height: 1.8; margin-bottom: 18px; } .foot-soc { display: flex; gap: 8px; flex-wrap: wrap; } .fs-a { width: 36px; height: 36px; border-radius: var(--r8); display: flex; align-items: center; justify-content: center; transition: .2s; } .fs-a:hover { opacity: .85; transform: translateY(-2px); } .fs-a svg { width: 15px; height: 15px; } .fs-a.fb { background: #1877F2; color: #fff; } .fs-a.ig { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: #fff; } .fs-a.yt { background: #FF0000; color: #fff; } .fs-a.wa { background: #25D366; color: #fff; } .foot-col h4 { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 16px; text-transform: uppercase; letter-spacing: .06em; } .foot-col ul li { margin-bottom: 10px; } .foot-col ul li a, .foot-col ul li span { font-size: 13px; color: rgba(255,255,255,.55); cursor: pointer; transition: .2s; } .foot-col ul li a:hover, .foot-col ul li span:hover { color: var(--s); } .foot-btm { border-top: 1px solid rgba(255,255,255,.07); padding: 18px 0; max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; font-size: 12px; flex-wrap: wrap; gap: 8px; } /* ================================================================ 20. FLOATING ELEMENTS ================================================================ */ .wa-float { position: fixed; bottom: 30px; right: 28px; width: 58px; height: 58px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37,211,102,.4); z-index: 800; transition: .3s; animation: waF 3s ease-in-out infinite; text-decoration: none; } .wa-float svg { width: 30px; height: 30px; color: #fff; } @keyframes waF { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .wa-float:hover { background: #20b957; transform: scale(1.1); animation: none; } .wa-tip { position: absolute; right: 70px; background: var(--n); color: #fff; padding: 6px 12px; border-radius: var(--r8); font-size: 12px; white-space: nowrap; opacity: 0; transition: .2s; pointer-events: none; font-family: var(--fb); } .wa-float:hover .wa-tip { opacity: 1; } .btt { position: fixed; bottom: 96px; right: 28px; width: 44px; height: 44px; background: var(--n); color: #fff; border-radius: var(--r8); font-size: 18px; box-shadow: var(--sh2); display: none; align-items: center; justify-content: center; z-index: 799; transition: .25s; border: 1px solid rgba(255,255,255,.1); cursor: pointer; } .btt.show { display: flex; } .btt:hover { background: var(--s); transform: translateY(-2px); } .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--n); color: #fff; padding: 12px 24px; border-radius: var(--r8); font-size: 14px; font-weight: 500; z-index: 9999; opacity: 0; transition: .35s; pointer-events: none; box-shadow: var(--sh3); white-space: nowrap; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ================================================================ 21. RESPONSIVE ================================================================ */ @media (max-width: 1024px) { .hero-content { grid-template-columns: 1fr; } .hcards { display: none; } .hero-btns { justify-content: center; } .hero-stats { justify-content: center; } .about-grid { grid-template-columns: 1fr; } .about-visual { display: none; } .ct-grid { grid-template-columns: 1fr 1fr; } .foot-inner { grid-template-columns: 1fr 1fr; } .feat-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .nav-links, .nav-cta { display: none; } .hamburger { display: flex; } .section { padding: 60px 18px; } .stats-band { padding: 40px 18px; } .sb-item { padding: 0 20px; } .gal-grid { grid-template-columns: repeat(2,1fr); } .gi-lg { grid-column: span 2; } .reg-body { grid-template-columns: 1fr; } .reg-side { display: none; } .fg2 { grid-template-columns: 1fr; } .ct-grid { grid-template-columns: 1fr; } .foot-inner { grid-template-columns: 1fr; } .foot-btm { flex-direction: column; text-align: center; } .mem-grid { grid-template-columns: 1fr 1fr; } .testi-grid { grid-template-columns: 1fr; } .feat-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .mem-grid { grid-template-columns: 1fr; } .sb-inner { flex-direction: column; gap: 24px; } .sb-div { width: 60px; height: 1px; } .yoj-grid { grid-template-columns: 1fr; } }