body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f9fd; color: #333; /* Prevent accidental horizontal scrolling on the element itself */ overflow-x: hidden; } /* ==================================================================================== Global layout helpers ------------------------------------------------------------------------------------ 1. Ensure the visual viewport never requires horizontal scrolling by preventing any child element from growing wider than the viewport. 2. Use the “border-box” sizing model everywhere so padding and border are included in an element’s declared width. This eliminates many common overflow issues that stem from the default “content-box” behaviour. 3. Provide sensible defaults for media and long, unbroken strings so that they also obey the viewport width. ==================================================================================== */ /* 1 & 2 — adopt a global border-box model and hide accidental overflows */ html { box-sizing: border-box; /* Prevent rare cases where 100vw also counts the scrollbar width (especially on mobile browsers) which could introduce a few extra pixels of horizontal scroll. */ overflow-x: hidden; } *, *::before, *::after { box-sizing: inherit; } /* 3 — all media should never exceed its container */ img, svg, video, iframe { max-width: 100%; height: auto; } /* Break long words / URLs that could otherwise stretch the viewport */ :where(p, li, h1, h2, h3, h4, h5, h6, caption, th, td) { overflow-wrap: anywhere; } /* ------------------------------------------------------------------------- Navigation menu --------------------------------------------------------------------- */ /* The global helper above purposefully enables very aggressive word breaking (overflow-wrap:anywhere) to guarantee that long, unbroken strings inside content areas never stretch the viewport. Unfortunately, that rule also applies to the

elements used in the site navigation causing each menu label to break after every single character on narrow screens. We revert that behaviour for the primary navigation so that labels can wrap only at normal word boundaries (spaces / hyphens) which is the expected UX for menus. */ header nav li, header nav a { overflow-wrap: normal; /* disable aggressive character-level wrapping */ word-break: normal; white-space: normal; /* allow wrapping at spaces if needed */ } /* Сохраняем нормальный перенос у названия ассоциации и подзаголовка */ #site-title, #site-tagline { overflow-wrap: normal; word-break: normal; } /* Flexbox lists that previously didn’t wrap could push the layout horizontally on small screens. Allow them to wrap gracefully. */ .project-list { flex-wrap: wrap; } /* Ensure project cards shrink gracefully without forcing horizontal scroll */ .project-list article { flex: 1 1 250px; min-width: 250px; } header { background-color: #0a8ed9; color: #fff; padding: 1rem; display: flex; /* Allow items to move onto the next line if there isn’t enough horizontal space – это предотвратит «выпадение» donate-кнопки за пределы экрана. */ flex-wrap: wrap; align-items: center; justify-content: space-between; } #nav-toggle { background: none; border: none; color: #fff; font-size: 1.5rem; display: none; /* shown on mobile */ margin-inline-end: 0.5rem; cursor: pointer; } #nav-toggle[aria-expanded="true"] { color: #ffeb3b; } /* hide nav on mobile when collapsed */ @media (max-width: 768px) { nav[aria-hidden="true"] { display: none; } } #site-tagline { margin: 0; font-size: 1rem; } header nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; flex-wrap: wrap; /* позволяет переносить пункты меню целиком */ } header nav li { padding: 0.2rem 0.5rem; border-radius: 4px; } header nav a { color: #fff; text-decoration: none; } header nav li:hover { background-color: rgba(255, 255, 255, 0.2); } header nav a:hover { text-decoration: underline; } .donate-btn { background-color: #ff6b6b; color: #fff; padding: 0.5rem 1rem; border-radius: 4px; text-decoration: none; margin-inline-start: 1rem; white-space: nowrap; } .donate-btn:hover { opacity: 0.9; } section { padding: 2rem; } .project-list { display: flex; gap: 1rem; } .project-list article { background: #fff; padding: 1rem; border: 1px solid #eee; /* Let the cards grow and shrink while respecting a reasonable minimum width */ flex: 1 1 250px; min-width: 250px; } button { background-color: #3cb371; border: none; color: #fff; padding: 0.5rem 1rem; margin-inline-end: 0.5rem; margin-bottom: 0.5rem; cursor: pointer; } button:hover { opacity: 0.9; } footer { background-color: #eee; text-align: center; padding: 1rem; } /* Social media icons */ .social-icons { margin-top: 0.5rem; display: flex; justify-content: center; gap: 1rem; } .social-icon { display: inline-block; width: 28px; height: 28px; background-size: contain; background-repeat: no-repeat; } .social-icon.facebook { background-image: url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 24 24%22 fill%3D%22%234267B2%22%3E%3Cpath d%3D%22M22.675 0h-21.35C.593 0 0 .594 0 1.326v21.348C0 23.406.593 24 1.325 24H12.82v-9.294H9.692V11.41h3.128V8.797c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.464.098 2.795.142v3.24l-1.918.001c-1.504 0-1.796.716-1.796 1.766v2.317h3.587l-.467 3.296h-3.12V24h6.116C23.406 24 24 23.406 24 22.674V1.326C24 .594 23.406 0 22.675 0z%22/%3E%3C/svg%3E'); } .social-icon.instagram { background-image: url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 24 24%22 fill%3D%22%23E4405F%22%3E%3Cpath d%3D%22M12 2.163c3.204 0 3.584.012 4.849.07 1.366.062 2.633.332 3.608 1.308.975.976 1.246 2.243 1.308 3.608.058 1.265.069 1.645.069 4.849s-.012 3.584-.07 4.849c-.062 1.366-.331 2.633-1.308 3.609-.976.975-2.243 1.246-3.608 1.307-1.265.059-1.645.07-4.849.07s-3.584-.012-4.849-.07c-1.366-.062-2.633-.332-3.608-1.308-.976-.976-1.246-2.243-1.308-3.608C2.175 15.647 2.163 15.267 2.163 12c0-3.204.012-3.584.07-4.849.062-1.366.332-2.633 1.308-3.608C4.516 2.565 5.783 2.294 7.149 2.233 8.414 2.175 8.794 2.163 12 2.163zm0-2.163C8.741 0 8.332.013 7.052.072 5.772.131 4.602.403 3.607 1.398 2.612 2.393 2.34 3.564 2.281 4.844.012 8.332 0 8.741 0 12s.013 3.668.072 4.948c.059 1.28.331 2.451 1.326 3.446.995.995 2.166 1.267 3.446 1.326C8.332 23.987 8.741 24 12 24s3.668-.013 4.948-.072c1.28-.059 2.451-.331 3.446-1.326.995-.995 1.267-2.166 1.326-3.446.059-1.28.072-1.689.072-4.948s-.013-3.668-.072-4.948c-.059-1.28-.331-2.451-1.326-3.446C19.399.403 18.228.131 16.948.072 15.668.013 15.259 0 12 0z%22/%3E%3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%223.5%22/%3E%3Cpath d%3D%22M18.406 4.594a1.44 1.44 0 11-2.881 0 1.44 1.44 0 012.881 0z%22/%3E%3C/svg%3E'); } .social-icon.telegram { background-image: url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 24 24%22 fill%3D%22%2300A0E3%22%3E%3Cpath d%3D%22M9.993 17.674l-.498 4.859c.712 0 1.022-.306 1.404-.672l3.371-3.209 6.991 5.087c1.281.705 2.207.333 2.528-1.188l4.588-21.508C28.933.294 28.02-.159 27.235.118L1.237 9.112C-.502 9.827-.514 10.885.941 11.332l5.951 1.861 13.807-8.693c.65-.424 1.243-.19.756.242L9.993 17.674z%22/%3E%3C/svg%3E'); } /* Responsive styles */ @media (max-width: 768px) { header { flex-direction: column; align-items: flex-start; } #nav-toggle { display: block; } nav { width: 100%; } header nav ul { flex-direction: column; gap: 0; width: 100%; } .donate-btn { margin-top: 0.5rem; } section { padding: 1rem; } .project-list { flex-direction: column; } button { margin-block-end: 0.5rem; } .floating-support, .floating-contact, .floating-project { display: block; } } @media (max-width: 480px) { #site-title { font-size: 1.5rem; } #site-tagline { font-size: 0.9rem; } header nav ul { flex-direction: column; width: 100%; } header nav li { padding: 0.5rem 0; } /* hide long tagline on very small screens */ #site-tagline { display: none; } /* reduce media block heights */ .stories-slide img { max-height: 250px; } .calendar-embed iframe { height: 300px; } .map-embed iframe { height: 200px; } } .floating-support { position: fixed; bottom: 1rem; inset-inline-end: 1rem; background-color: #3cb371; color: #fff; padding: 0.75rem 1rem; border-radius: 4px; text-decoration: none; display: none; } .floating-contact, .floating-project { position: fixed; inset-inline-end: 1rem; background-color: #0a8ed9; color: #fff; padding: 0.75rem 1rem; border-radius: 4px; text-decoration: none; display: none; } .floating-contact { bottom: 4rem; } .floating-project { bottom: 7rem; } .contact-link { margin-inline-end: 0.5rem; } /* Map embed */ .map-embed iframe { border: 0; border-radius: 4px; width: 100%; height: 300px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); } /* Stories slider */ .stories-slider { position: relative; max-width: 800px; margin: 0 auto; overflow: hidden; } .stories-slide { display: none; text-align: center; } .stories-slide.active { display: block; } .stories-slide img { width: 100%; max-height: 350px; object-fit: cover; border-radius: 4px; } .stories-prev, .stories-next { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0,0,0,0.5); color: #fff; border: none; padding: 0.5rem 0.75rem; cursor: pointer; border-radius: 50%; } .stories-prev { inset-inline-start: 10px; } .stories-next { inset-inline-end: 10px; } .projects-carousel { position: relative; max-width: 900px; margin: 2rem auto 0; overflow: hidden; } .project-slide { display: none; } .project-slide.active { display: block; } .project-slide article { background: #fff; border: 1px solid #eee; padding: 1.5rem; border-radius: 4px; text-align: center; } .projects-prev, .projects-next { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0,0,0,0.5); color: #fff; border: none; padding: 0.5rem 0.75rem; cursor: pointer; border-radius: 50%; } .projects-prev { inset-inline-start: 10px; } .projects-next { inset-inline-end: 10px; } /* Calendar embed */ .calendar-embed iframe { width: 100%; max-width: 800px; height: 400px; border: 0; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); display: block; margin: 1rem auto 0; }