/* ========================================================================== COMPONENTS — повторно використовувані елементи інтерфейсу 1. Іконки 2. Кнопки 3. Орнамент (золотий роздільник) 4. Посилання зі стрілкою 5. Поля форми 6. Соцмережі ========================================================================== */ /* ========================================================================== 1. ІКОНКИ Кожна іконка — у спрайті на початку ; у розмітці ставиться . Колір успадковується від тексту (усередині символів fill/stroke=currentColor), розмір задається через --icon-size (висота) і --icon-ratio (ширина / висота). Вихідні файли лежать в assets/icons/ — саме з них зібрано спрайт. ========================================================================== */ /* контейнер спрайта нічого не малює */ .svg-sprite { display: none; } .icon { display: inline-block; flex: none; width: calc(var(--icon-size, 1em) * var(--icon-ratio, 1)); height: var(--icon-size, 1em); } .icon--cross { --icon-ratio: .692; } .icon--calendar { --icon-ratio: 1.083; } .icon--phone { --icon-ratio: .889; } .icon--mail { --icon-ratio: 1.357; } .icon--facebook { --icon-ratio: .5; } .icon--youtube { --icon-ratio: 1.4; } .icon--play { --icon-ratio: .853; } .icon--landmark { --icon-ratio: .906; } .icon--arrow-right { --icon-size: .5rem; --icon-ratio: 2.375; } .icon--caret { --icon-size: .5rem; --icon-ratio: 1.625; } /* силуети храмів у табах розкладу */ .icon--temple-kostel { --icon-ratio: .634; } .icon--temple-mykolai { --icon-ratio: .952; } .icon--temple-chapel { --icon-ratio: .512; } /* ========================================================================== 2. КНОПКИ ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .625rem; padding: .6875rem 1.25rem; font-family: var(--font-body); font-size: var(--fs-body); font-weight: 500; line-height: 1.5; text-align: center; transition: background-color var(--transition), color var(--transition), border-color var(--transition); } .btn--primary { color: var(--c-white); background-color: var(--c-blue); } .btn--primary:hover, .btn--primary:focus-visible { background-color: var(--c-blue-light); } .btn--lg { padding: .875rem 1.5rem; } .btn--cream { padding: .5625rem 1rem; font-size: var(--fs-xs); color: var(--c-brown); background-color: var(--c-cream); } .btn--cream:hover, .btn--cream:focus-visible { background-color: var(--c-white); } /* вторинна дія — вохра (напр. «Розклад богослужінь») */ .btn--ochre { color: var(--c-white); background-color: var(--c-brown); } .btn--ochre:hover, .btn--ochre:focus-visible { background-color: var(--c-ochre); } /* кнопка з іконкою зліва та текстом, вирівняним по лівому краю */ .btn--icon-start { justify-content: flex-start; gap: .75rem; font-size: var(--fs-sm); text-align: left; } .btn--icon-start .icon { --icon-size: 1.125rem; } /* «Наживо» — індикатор трансляції у шапці (ширина 130px як у макеті) */ .btn--live { gap: .5625rem; min-width: 8.125rem; padding: .3125rem .75rem; font-size: var(--fs-sm); color: var(--c-blue); background-color: rgba(255, 255, 255, .7); border: 1px solid var(--c-white); border-radius: 4px; } .btn--live:hover, .btn--live:focus-visible { background-color: var(--c-white); } .btn__dot { width: .875rem; height: .875rem; border-radius: 50%; background-color: var(--c-live); } @media (prefers-reduced-motion: no-preference) { .btn__dot { animation: pulse 2s ease-in-out infinite; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } /* ========================================================================== 3. ОРНАМЕНТ — золота лінія з різьбленим хрестом посередині ========================================================================== */ .ornament { display: flex; align-items: center; gap: 2rem; width: 100%; max-width: 21.75rem; height: 1.75rem; margin-inline: auto; background: url(../assets/icons/ornament-cross.svg) center / auto 1.75rem no-repeat; } .ornament::before, .ornament::after { content: ""; flex: 1 1 auto; height: 1px; background-image: var(--gold-h); } /* варіант із вирівнюванням по лівому краю (банер) */ .ornament--start { margin-inline: 0 auto; } /* кнопка-контур (соцмережі на сторінці контактів) */ .btn--outline { gap: .625rem; min-width: 9rem; padding: .5rem 1.25rem; font-size: var(--fs-sm); color: var(--c-brown); background-color: var(--c-cream); border: 1px solid var(--c-brown); } .btn--outline:hover, .btn--outline:focus-visible { color: var(--c-white); background-color: var(--c-brown); } .btn--outline .icon--facebook { --icon-size: 1rem; } .btn--outline .icon--youtube { --icon-size: .875rem; } /* ========================================================================== 4. ПОСИЛАННЯ ЗІ СТРІЛКОЮ ========================================================================== */ .link-arrow { display: inline-flex; align-items: center; gap: .75rem; padding-bottom: .3125rem; border-bottom: 1px solid currentColor; transition: gap var(--transition), color var(--transition); } .link-arrow:hover, .link-arrow:focus-visible { gap: 1.125rem; color: var(--c-brown); } /* «Читати» / «Детальніше» в картках */ .link-more { display: inline-flex; align-items: center; gap: .75rem; padding-bottom: .25rem; font-size: var(--fs-sm); font-weight: 500; color: var(--c-blue); border-bottom: 1px solid currentColor; transition: gap var(--transition), color var(--transition); } .link-more:hover, .link-more:focus-visible { gap: 1.125rem; /* не вохра: на кремовому вона дає контраст 2.92 замість потрібних 4.5 */ color: var(--c-brown); } /* ========================================================================== ХЛІБНІ КРИХТИ ========================================================================== */ .breadcrumbs { padding-block: 1.125rem; font-size: var(--fs-sm); } .breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .breadcrumbs li + li::before { content: "»"; margin-right: .5rem; color: var(--c-ink-muted); } .breadcrumbs a { color: var(--c-ink); transition: color var(--transition); } .breadcrumbs a:hover, .breadcrumbs a:focus-visible { color: var(--c-blue); } .breadcrumbs [aria-current] { color: var(--c-ink-muted); } /* ========================================================================== ПІДПИС + ЗНАЧЕННЯ (адреса, маршрут, розклад…) ========================================================================== */ .info-item__label { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 500; line-height: 1; text-transform: uppercase; color: var(--c-brown); } .info-item__label .icon { --icon-size: 1.125rem; } .info-item__value { font-family: var(--font-ui); font-size: var(--fs-body); font-weight: 500; } /* ========================================================================== МЕТА-РЯДОК КАРТКИ (дата • рубрика) ========================================================================== */ .card-meta { display: flex; align-items: center; gap: 1rem; font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 500; text-transform: uppercase; color: var(--c-brown); } .card-meta__dot { width: 5px; height: 5px; flex: none; border-radius: 50%; background-color: currentColor; } /* ========================================================================== 5. ПОЛЯ ФОРМИ ========================================================================== */ .field { display: flex; flex-direction: column; gap: .625rem; min-width: 0; } .field__label { font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 500; line-height: 1.2; text-transform: uppercase; color: var(--c-brown); } .field__control { width: 100%; padding: .625rem; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 400; line-height: 1.5; color: var(--c-ink); background-color: var(--c-white); box-shadow: var(--shadow-card); transition: box-shadow var(--transition); } .field__control::placeholder { font-weight: 300; color: rgba(0, 0, 0, .45); } .field__control:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 0; } .field__control--area { min-height: 7.1875rem; line-height: 1.6; } .field__select { position: relative; display: flex; } .field__select .field__control { appearance: none; padding-right: 2.25rem; font-weight: 500; cursor: pointer; } .field__select .icon, .field__date .icon { position: absolute; top: 50%; right: .75rem; translate: 0 -50%; pointer-events: none; } /* поле дати: ховаємо нативну іконку й показуємо ту, що в макеті. Прозорий індикатор розтягнутий на все поле — клік будь-де відкриває календар. */ .field__date { position: relative; display: flex; } .field__date .field__control { padding-right: 2.25rem; cursor: pointer; } .field__date .field__control::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: auto; cursor: pointer; opacity: 0; } /* повідомлення про результат відправки форми */ .form-status { font-size: var(--fs-sm); font-weight: 500; color: var(--c-brown); } .form-status.is-error { color: var(--c-live); } /* --- Панель форми --------------------------------------------------------- Одна й та сама форма стоїть на головній (запис на молитву) і на сторінці контактів (запитання до священника), тому вона тут, а не в sections.css. -------------------------------------------------------------------------- */ .prayer-form { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.5rem); max-width: 53.6875rem; margin-inline: auto; padding: clamp(1.5rem, 4vw, 3.875rem) clamp(1.25rem, 6vw, 6.875rem); background-color: var(--c-cream); } .prayer-form__row { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); } .prayer-form__submit { width: 100%; max-width: 21.1875rem; align-self: center; } @media (min-width: 640px) { .prayer-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } } /* ========================================================================== 6. СОЦМЕРЕЖІ ========================================================================== */ .socials { display: flex; align-items: center; gap: 1.25rem; } .socials__link { display: grid; place-items: center; width: 1.875rem; height: 1.875rem; color: var(--c-brown-dark); background-color: var(--c-white); border-radius: 50%; transition: background-color var(--transition), color var(--transition); } .socials__link:hover, .socials__link:focus-visible { color: var(--c-white); background-color: var(--c-ochre); } .socials .icon--facebook { --icon-size: 1.0625rem; } .socials .icon--youtube { --icon-size: .9375rem; }