/* ========================================================= VetHelp – main stylesheet Дизайн-токени відтворюють затверджений шаблон (Woldlife): акцентний синій (за логотипом VetHelp), темна шапка, шрифти Crimson Pro / Nunito Sans. ========================================================= */ :root { --color-accent: #4a63c9; --color-accent-dark: #262c78; --color-dark: #14183f; --color-dark-soft: #1c2150; --color-brand: #262c78; --color-heading: #1a1a1a; --color-text: #55595e; --color-text-light: #6b6f75; --color-border: #e7e5e1; --color-surface: #f7f6f3; --color-white: #ffffff; --font-heading: 'Crimson Pro', Georgia, 'Times New Roman', serif; --font-body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --container: 1220px; --container-narrow: 800px; --radius-sm: 6px; --radius: 10px; --radius-lg: 20px; --shadow: 0 10px 30px rgba(20, 20, 20, 0.08); --shadow-lg: 0 20px 50px rgba(20, 20, 20, 0.16); --transition: 0.3s ease; } /* -------------------- Reset -------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--color-text); background: var(--color-white); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul, ol { margin: 0; padding: 0; list-style: none; } button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; } input, textarea, select { font: inherit; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--color-heading); line-height: 1.25; margin: 0 0 0.5em; font-weight: 700; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .skip-link { position: fixed; top: -100px; left: 1rem; z-index: 9999; background: var(--color-dark); color: #fff; padding: 0.75rem 1.25rem; border-radius: var(--radius-sm); transition: top 0.2s; } .skip-link:focus { top: 1rem; } .container { max-width: var(--container); margin: 0 auto; padding: 0 20px; } .container--narrow { max-width: var(--container-narrow); } section { padding: 80px 0; } @media (max-width: 782px) { section { padding: 50px 0; } } .eyebrow { display: inline-block; color: var(--color-accent-dark); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; margin-bottom: 0.75rem; } .section-heading { max-width: 700px; margin: 0 0 3rem; text-align: left; } .section-heading h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); } .section-heading--center { text-align: center; margin-left: auto; margin-right: auto; } .section-heading--split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .section-heading--split h2 { margin-bottom: 0; } /* -------------------- Icons -------------------- */ .icon { width: 22px; height: 22px; flex-shrink: 0; } .icon-sm { width: 16px; height: 16px; } .icon-lg { width: 34px; height: 34px; } .icon-xl { width: 48px; height: 48px; } .icon-star { width: 16px; height: 16px; color: var(--color-accent); } .icon-placeholder { width: 40px; height: 40px; color: #c7c3ba; } .icon-chevron { width: 14px; height: 14px; transition: transform var(--transition); } /* -------------------- Buttons -------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 1.6rem; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.95rem; transition: all var(--transition); white-space: nowrap; } .btn--primary { background: var(--color-accent); color: #fff; } .btn--primary:hover { background: var(--color-accent-dark); transform: translateY(-2px); } .btn--dark { background: var(--color-dark); color: #fff; } .btn--dark:hover { background: #000; transform: translateY(-2px); } .btn--outline { background: transparent; color: var(--color-dark); border: 1.5px solid var(--color-border); } .btn--outline:hover { border-color: var(--color-dark); background: var(--color-dark); color: #fff; } .btn--ghost { background: transparent; padding: 0.6rem; } .btn--ghost-light { border: 1.5px solid rgba(255,255,255,0.5); color: #fff; } .btn--ghost-light:hover { background: rgba(255,255,255,0.12); } .btn--lg { padding: 1.125rem 2.5rem; font-size: 1.125rem; font-weight: 600; border-radius: 5px; } .btn--sm { padding: 0.55rem 1.1rem; font-size: 0.85rem; } .check-list li { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.75rem; } .check-list .icon { color: var(--color-accent-dark); margin-top: 3px; } .check-list.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } @media (max-width: 600px) { .check-list.two-col { grid-template-columns: 1fr; } } .img-placeholder { background: linear-gradient(135deg, var(--color-surface), #ece9e2); display: flex; align-items: center; justify-content: center; border: 1px dashed #d8d4cb; min-height: 160px; } .img-placeholder--sm { width: 56px; height: 56px; border-radius: var(--radius-sm); flex-shrink: 0; } .empty-state { text-align: center; padding: 3rem 1.5rem; background: var(--color-surface); border-radius: var(--radius); color: var(--color-text-light); font-style: italic; } /* -------------------- Scroll reveal -------------------- */ .reveal-fade, .reveal-left { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; transition-delay: var(--delay, 0s); } .reveal-left { transform: translateX(-24px); } .reveal-fade.is-visible, .reveal-left.is-visible { opacity: 1; transform: none; } /* ========================================================= HEADER ========================================================= */ .site-header { position: sticky; top: 0; z-index: 200; } .header-top { background: var(--color-dark); color: #cfcfcf; font-size: 0.85rem; } .header-top__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; } .header-top__info { display: flex; gap: 1.5rem; flex-wrap: wrap; } .header-top__info li { display: flex; align-items: center; gap: 0.4rem; } .header-top__info a:hover { color: var(--color-accent); } .header-top__social { display: flex; gap: 0.6rem; } .header-top__social a { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; transition: background var(--transition); } .header-top__social a:hover { background: var(--color-accent); color: #fff; } .header-main { background: #fff; box-shadow: none; transition: box-shadow var(--transition); } /* Sticky header blends into white page content once scrolled – add a clear shadow only while scrolled, so it visibly separates from what's underneath (no shadow needed at the very top, over the hero photo). */ .site-header.is-scrolled .header-main { box-shadow: 0 8px 24px rgba(20, 24, 63, 0.16); } .header-main__inner { display: flex; align-items: center; gap: 1.5rem; padding-top: 14px; padding-bottom: 14px; } .site-logo { flex-shrink: 0; } .site-logo img { height: 60px; width: auto; } .main-nav { flex: 1; } .main-nav__list { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; } .main-nav__list > li { position: relative; } .main-nav__list > li > a { display: flex; align-items: center; gap: 4px; padding: 0.9rem 0.9rem; font-weight: 700; color: var(--color-heading); transition: color var(--transition); } .main-nav__list > li > a:hover, .main-nav__list > li.current-menu-item > a { color: var(--color-accent-dark); } /* Underline for the current page's menu item (also previews on hover for every item), drawn under just the label text – not the dropdown chevron. */ .main-nav__list > li > a > span { position: relative; } .main-nav__list > li > a > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; border-radius: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--transition); } .main-nav__list > li > a:hover > span::after { transform: scaleX(1); } .main-nav__list > li.current-menu-item > a > span::after { transform: scaleX(1); background: var(--color-accent-dark); } .main-nav .sub-menu { position: absolute; top: 100%; left: 0; min-width: 240px; background: #fff; box-shadow: var(--shadow-lg); border-radius: var(--radius-sm); padding: 0.5rem; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all var(--transition); z-index: 50; } .main-nav .has-children:hover > .sub-menu, .main-nav .has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } .main-nav .sub-menu li a { display: block; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); font-weight: 600; color: var(--color-text); } .main-nav .sub-menu li a:hover { background: var(--color-surface); color: var(--color-accent-dark); } .header-main__actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; } .menu-toggle { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; position: relative; } .menu-toggle .icon-close { display: none; } .menu-toggle[aria-expanded="true"] .icon-open { display: none; } .menu-toggle[aria-expanded="true"] .icon-close { display: block; } .search-panel__form { max-width: var(--container); margin: 0 auto; padding: 1rem 20px; display: flex; align-items: center; gap: 0.75rem; } .search-panel__form input { flex: 1; border: none; background: transparent; font-size: 1.1rem; outline: none; } .search-panel__form--404 { max-width: 420px; margin: 1.5rem auto; background: var(--color-surface); border-radius: var(--radius-sm); border: 1px solid var(--color-border); } /* Search widget form (sidebar, footer, etc. – see get_search_form filter * in inc/template-helpers.php: vethelp_search_form()). The field fills * the width, the submit button sits inside it as a small icon-only * circle instead of a separate full-height "Пошук" button. */ .search-form { position: relative; display: flex; } .search-form .search-field { width: 100%; padding: 0.75rem 3rem 0.75rem 1rem; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border); background: #fff; font-size: 0.95rem; font-family: inherit; color: var(--color-text); outline: none; transition: border-color var(--transition); } .search-form .search-field::placeholder { color: var(--color-text-light); } .search-form .search-field:focus { border-color: var(--color-accent); } .search-form .search-submit { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 34px; height: 34px; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-sm); background: var(--color-accent); color: #fff; cursor: pointer; transition: background var(--transition); } .search-form .search-submit:hover { background: var(--color-accent-dark); } .search-form .search-submit .icon { width: 1rem; height: 1rem; } @media (max-width: 992px) { .header-main__inner { flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; } .site-logo img { height: 48px; } .header-main__actions { gap: 0.5rem; } .header-main__actions .btn--primary { padding: 0.65rem 1.1rem; font-size: 0.9rem; } .menu-toggle { display: flex; width: 38px; height: 38px; } .main-nav { order: 10; flex-basis: 100%; max-height: 0; overflow: hidden; transition: max-height var(--transition); } .main-nav.is-open { max-height: 1200px; } .main-nav__list { flex-direction: column; align-items: stretch; padding: 1rem 0; } .main-nav__list > li > a { padding: 0.75rem 0.25rem; justify-content: space-between; border-bottom: 1px solid var(--color-border); } .main-nav .sub-menu { position: static; box-shadow: none; opacity: 1; visibility: visible; transform: none; max-height: 0; overflow: hidden; padding: 0; background: var(--color-surface); transition: max-height var(--transition), padding var(--transition); } .main-nav .has-children.is-open > .sub-menu { max-height: 600px; padding: 0.5rem; } .main-nav .has-children > a .icon-chevron { transition: transform var(--transition); } .main-nav .has-children.is-open > a .icon-chevron { transform: rotate(90deg); } .header-top__info li:nth-child(1), .header-top__info li:nth-child(3) { display: none; } } @media (max-width: 480px) { .site-logo img { height: 40px; } .header-main__inner { padding-top: 10px; padding-bottom: 10px; } .header-main__actions .btn--primary span, .header-main__actions .btn--primary { padding: 0.6rem 0.9rem; font-size: 0.82rem; } } /* ========================================================= PAGE HEADER (breadcrumb banner) ========================================================= */ .page-header { background: var(--color-dark); background-image: radial-gradient(circle at 15% 20%, rgba(74,99,201,0.22), transparent 45%); color: #fff; padding: 70px 0 50px; text-align: center; } .page-header__title { color: #fff; margin-bottom: 0.5rem; font-size: clamp(1.8rem, 4vw, 2.6rem); position: relative; z-index: 2; } .page-header__subtitle { color: #cfcfcf; max-width: 560px; margin: 0 auto 1rem; position: relative; z-index: 2; } /* Optional taller banner with a photo/video background – only applied when Customizer → «Фон хедера внутрішніх сторінок» has something set (see template-parts/page-header.php). Smaller than the homepage hero (.hero, ~86vh) but noticeably bigger than the plain bar above. */ .page-header--media { position: relative; overflow: hidden; min-height: 380px; padding: 160px 0 70px; background: var(--color-dark); } .page-header--media .breadcrumb { position: relative; z-index: 2; } .page-header__media { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; background-color: var(--color-dark); } .page-header__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .page-header__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,10,30,0.35) 0%, rgba(8,10,30,0.75) 100%); } @media (max-width: 700px) { .page-header--media { min-height: 300px; padding: 130px 0 50px; } } .breadcrumb ol { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; color: #b7b7b7; font-size: 0.9rem; } .breadcrumb li:not(:last-child)::after { content: '/'; margin-left: 0.5rem; color: #6a6a6a; } .breadcrumb a:hover { color: var(--color-accent); } .breadcrumb li[aria-current] { color: var(--color-accent); } /* ========================================================= HERO SLIDER – full-bleed, matches the approved (Woldlife) layout: near full-height slides, minimal chevrons, large "N / total" counter bottom-right instead of dots. ========================================================= */ .hero { position: relative; overflow: hidden; height: 86vh; min-height: 620px; max-height: 850px; padding: 0; } .hero__track { position: relative; width: 100%; height: 100%; } .hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; /* visibility is listed here too (same duration) purely so its switch to hidden is deferred to the END of the fade instead of happening the instant .is-active is removed – without it the outgoing slide (photo + text + button) disappears in a single frame while the incoming one is still fading in from opacity 0, which is what read as a flicker right where the button sits. */ transition: opacity 0.9s ease, visibility 0.9s ease; } .hero__slide.is-active { opacity: 1; visibility: visible; z-index: 1; } .hero__media { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: #2b2b2b; } .hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero__media--placeholder { background-image: radial-gradient(circle at 20% 30%, rgba(95,134,204,0.4), transparent 45%), radial-gradient(circle at 80% 70%, rgba(38,44,120,0.55), transparent 50%), linear-gradient(135deg, #1c2150, #14183f); } .hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,10,30,0.58) 0%, rgba(8,10,30,0.28) 55%, rgba(8,10,30,0.06) 100%); } /* .hero__content also carries the site's ".container" class (same max-width/gutters as every other section) – the old fixed 680px cap here made it sit centered with huge equal gaps on both sides, very different from the approved design's wide, left-hugging text column. Dropping the cap lets it use the normal container width; the heading itself still wraps at a readable measure via its own max-width. */ .hero__content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; /* padding-top guards against a long heading (4+ wrapped lines) landing flush against the very top edge of the slide – without it, justify-content: flex-end only ever reserved space at the bottom. Longhand top/bottom only (not the old "90px 0 100px" shorthand) – that shorthand also set left/right to 0, which – same bug as .single-post__grid above – wiped out this same element's own .container padding:0 20px, leaving the badge/heading/text flush against the screen edge on a narrow viewport. */ padding-top: 90px; padding-bottom: 150px; color: #fff; } /* Used only for a split-second by initHeroSlider()'s syncHeroHeight() to measure this slide's real content height (badge+heading+text+button) – height:auto lets it size to its natural content instead of the fixed height:100% above, so JS can grow .hero itself when needed instead of letting content quietly get clipped off the top. Never seen visually: toggled on, measured, toggled off again in the same tick. */ .hero__content.is-measuring { height: auto; } .hero__content h1 { color: #fff; font-size: clamp(2.2rem, 4.6vw, 5rem); line-height: 1.08; margin: 0.3em 0 0.35em; max-width: 820px; } .hero__content p { color: #f0f0f0; max-width: 640px; margin-bottom: 1.75rem; font-size: 1.125rem; font-weight: 700; } .badge { display: inline-flex; background: var(--color-accent); color: #fff; font-weight: 700; padding: 0.55rem 1.3rem; border-radius: 999px; font-size: 0.95rem; /* Довжина напису – довільна (редагується в Customizer), тож бейдж не має фіксованої ширини: fit-content дає йому природний розмір під короткий текст, а max-width + normal white-space – гарантія, що довший текст переноситься у 2 рядки всередині самого бейджа, а не вилазить за межі блоку чи екрана. */ width: fit-content; max-width: min(640px, 100%); white-space: normal; word-break: break-word; line-height: 1.3; text-align: left; } .hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 0; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5)); transition: color var(--transition), transform var(--transition); } .hero__arrow .icon { width: 30px; height: 30px; } .hero__arrow:hover { background: transparent; color: var(--color-accent); transform: translateY(-50%) scale(1.12); } .hero__arrow--prev { left: 28px; } .hero__arrow--next { right: 28px; } /* Dot pagination – replaces the old "1 / 3" counter and the thumbnail strip that used to sit below the slider. */ .hero__dots { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 10px; } .hero__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,0.45); cursor: pointer; transition: background var(--transition), transform var(--transition); } .hero__dot:hover { background: rgba(255,255,255,0.75); } .hero__dot.is-active { background: #fff; transform: scale(1.3); } @media (max-width: 782px) { /* 78vh of a tall modern phone (844–926px) is 660–720px – far more than the badge+heading+text+button stack actually needs, and since that stack is anchored to the BOTTOM (.hero__content's justify-content: flex-end), all the leftover space lands above it as one big empty gap under the header, with the text pushed down near the bottom. Capping the height keeps the hero full-bleed on a phone without that gap; syncHeroHeight() in main.js still grows it automatically on any slide whose text genuinely needs more room than this. */ .hero { height: 78vh; min-height: 480px; max-height: 600px; } .hero__arrow .icon { width: 22px; height: 22px; } .hero__arrow--prev { left: 12px; } .hero__arrow--next { right: 12px; } .hero__dots { bottom: 14px; } .hero__content { padding-top: 32px; padding-bottom: 56px; } } /* ========================================================= VIDEO FEATURE SECTION – short intro text + video thumbnail with a play button (matches the approved design's "Zoo Animals Features" block right after the hero). ========================================================= */ .video-feature__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .video-feature__content .eyebrow { display: block; } .video-feature__content h2 { margin: 0.3em 0 0.75rem; } .video-feature__content p { color: var(--color-text); margin-bottom: 1.5rem; max-width: 480px; } .video-feature__media { position: relative; } .video-feature__poster { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-color: var(--color-surface); display: flex; align-items: center; justify-content: center; } .video-feature__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; border-radius: 50%; background: var(--color-accent); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,0.25); transition: transform var(--transition), background var(--transition); animation: vethelp-play-pulse 2.4s ease-out infinite; } .video-feature__play .icon { width: 30px; height: 30px; margin-left: 3px; } .video-feature__play:hover { transform: translate(-50%, -50%) scale(1.08); background: var(--color-accent-dark); } /* A soft ring that repeatedly expands out from the button and fades – draws the eye to "press play" without anything else on the block moving. rgba here is #4a63c9 (--color-accent) spelled out, since a CSS variable can't be split into rgba() channels on its own – keep the two in sync if the accent colour ever changes. */ @keyframes vethelp-play-pulse { 0% { box-shadow: 0 10px 30px rgba(0,0,0,0.25), 0 0 0 0 rgba(74,99,201,0.55); } 70% { box-shadow: 0 10px 30px rgba(0,0,0,0.25), 0 0 0 18px rgba(74,99,201,0); } 100% { box-shadow: 0 10px 30px rgba(0,0,0,0.25), 0 0 0 0 rgba(74,99,201,0); } } @media (prefers-reduced-motion: reduce) { .video-feature__play { animation: none; } } @media (max-width: 900px) { .video-feature__grid { grid-template-columns: 1fr; gap: 2rem; } } /* ========================================================= INTRO SECTION ========================================================= */ .intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .intro__media { position: relative; } .intro__media-main { position: relative; width: 62%; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; background-size: cover; background-position: center; } /* Same fix as .intro__media-sub.media-slider below: without this, the generic .media-slider rule's width:100% (it sits later in this file, so wins the equal-specificity tie) overrides the 62% above and the main photo renders full width again, leaving the small photo nowhere to sit but on top of it. */ .intro__media-main.media-slider { width: 62%; height: auto; aspect-ratio: 4/5; } /* Sits beside the main photo (not on top of it, as on the reference layout) in the space .intro__media-main's own 62% width leaves free – only a small corner overlap, and flush with the main photo's bottom edge. */ .intro__media-sub { position: absolute; width: 40%; aspect-ratio: 1/1; right: 6%; bottom: 0; border-radius: var(--radius); border: 6px solid #fff; box-shadow: var(--shadow-lg); background-size: cover; background-position: center; overflow: hidden; } /* Higher specificity than the generic .media-slider rule below (which sets width/height:100%) so the sub media slot keeps its own box size even when it also carries the .media-slider class – this was the cause of the "small block became huge" bug: equal-specificity + later source order let .media-slider win and stretch the box to the size of its containing block. */ .intro__media-sub.media-slider { width: 40%; height: auto; aspect-ratio: 1/1; } /* Floats in the gap above the small photo (not on the main photo's corner), matching the reference layout. */ .intro__badge { position: absolute; left: 64%; top: 6%; background: #fff; box-shadow: var(--shadow-lg); border-radius: var(--radius); width: 110px; height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.1; z-index: 2; } .intro__badge strong { font-family: var(--font-heading); font-size: 1.8rem; color: var(--color-accent-dark); } .intro__badge span { font-size: 0.72rem; color: var(--color-text-light); padding: 0 8px; } .intro__heading h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); } .intro__actions { display: flex; align-items: center; gap: 1.5rem; margin-top: 1.75rem; flex-wrap: wrap; } .intro__phone { display: flex; align-items: center; gap: 0.75rem; } .intro__phone-icon { width: 46px; height: 46px; border-radius: 50%; background: var(--color-surface); display: flex; align-items: center; justify-content: center; color: var(--color-accent-dark); } .intro__phone small { display: block; color: var(--color-text-light); font-size: 0.78rem; } .intro__phone strong { font-size: 1.05rem; } @media (max-width: 900px) { .intro__grid { grid-template-columns: 1fr; gap: 3rem; } /* On mobile only, split the heading out and let it lead: heading, then the photo/video collage, then the text + buttons. Desktop keeps its normal two-column layout untouched – .intro__text-group only becomes `display: contents` here, so .intro__heading and .intro__content act as independent grid items just for this breakpoint and can be reordered with `order`. */ .intro__text-group { display: contents; } .intro__heading { order: 1; } .intro__media { order: 2; } .intro__content { order: 3; } /* width:100% is required alongside max-width here: .intro__media is a CSS grid item with auto margins and no other explicit width, so without it the browser falls back to shrink-to-fit sizing based on its CHILDREN – but .intro__media-main's own width is 62% of THIS box, a circular dependency the browser resolves by collapsing .intro__media to 0x0. That silently deleted the whole photo/video collage on mobile (confirmed live via getBoundingClientRect: 0x0), leaving only the absolutely-positioned .intro__badge visible – which is exactly why it looked like it was "floating alone". */ .intro__media { width: 100%; max-width: 420px; margin: 0 auto 2rem; } .intro__badge { /* bottom:0 lines the badge's bottom edge up with .intro__media's bottom edge (the same line .intro__media-sub sits flush against), then translateY(50%) drops it down by exactly half of its OWN rendered height – computed live by the browser, so it always straddles that line half-on/half-off the photo no matter how tall the pill ends up (long label, font scaling, etc). The old fixed bottom:-18px guessed a pixel offset that didn't match the badge's real height, so most of it hung below the photo with a visible gap – reading as a disconnected floating pill. */ left: auto; right: 6%; top: auto; bottom: 0; transform: translateY(50%); flex-direction: row; gap: 10px; width: auto; height: auto; padding: 10px 18px; border-radius: 999px; } .intro__badge strong { font-size: 1.3rem; } .intro__badge span { padding: 0; text-align: left; } } /* ========================================================= SERVICES GRID ========================================================= */ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } .services-grid--archive { grid-template-columns: repeat(3, 1fr); } .service-card { position: relative; overflow: hidden; background: var(--color-surface); border-radius: var(--radius); padding: 2.2rem 1.8rem; transition: transform var(--transition), box-shadow var(--transition), background var(--transition); border: 1px solid transparent; /* Flex column so .service-card__footer (margin-top: auto) always lands on the same bottom edge across a row, no matter how many lines the title/excerpt above it wrap to. */ display: flex; flex-direction: column; } .service-card:hover { background: #fff; box-shadow: var(--shadow-lg); border-color: var(--color-border); transform: translateY(-6px); } /* Photo reveal on hover – only for cards that have an image (service's featured image in wp-admin); cards without one keep the plain hover above untouched. Matches the approved design's "featured" card look. */ .service-card__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.06); transition: opacity var(--transition), transform var(--transition); z-index: 0; } .service-card__scrim { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(20,24,63,0.45) 0%, rgba(20,24,63,0.82) 100%); opacity: 0; transition: opacity var(--transition); } .service-card.has-bg:hover .service-card__bg { opacity: 1; transform: scale(1); } .service-card.has-bg:hover .service-card__scrim { opacity: 1; } .service-card.has-bg:hover { border-color: transparent; } .service-card__icon { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 74px; height: 74px; border-radius: var(--radius); background: #fff; color: var(--color-accent-dark); margin-bottom: 1.25rem; box-shadow: var(--shadow); transition: background var(--transition), color var(--transition); } .service-card.has-bg:hover .service-card__icon { background: rgba(255,255,255,0.18); color: #fff; box-shadow: none; } .service-card h3, .service-card h2 { position: relative; z-index: 1; font-size: 1.2rem; margin-bottom: 0.6rem; transition: color var(--transition); } .service-card h3 a, .service-card h2 a { transition: color var(--transition); } .service-card h3 a:hover, .service-card h2 a:hover { color: var(--color-accent-dark); } .service-card.has-bg:hover h3 a, .service-card.has-bg:hover h2 a { color: #fff; } .service-card p { position: relative; z-index: 1; color: var(--color-text-light); font-size: 0.95rem; transition: color var(--transition); } .service-card.has-bg:hover p { color: rgba(255,255,255,0.88); } .service-card__footer { position: relative; z-index: 1; margin-top: auto; padding-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .service-card__more { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--color-heading); transition: color var(--transition); } .service-card__more:hover { color: var(--color-accent-dark); gap: 0.6rem; } .service-card.has-bg:hover .service-card__more { color: #fff; } .service-card.has-bg:hover .service-card__more:hover { color: var(--color-accent); } .service-card.has-bg:hover .service-card__footer .btn--primary { background: #fff; color: var(--color-dark); } .service-card.has-bg:hover .service-card__footer .btn--primary:hover { background: var(--color-accent); color: #fff; } /* Touch devices have no :hover, so the scroll-driven "active" card (see initServiceCardScrollActive in main.js) gets an .is-inview class that mirrors every rule above 1:1. Scoped to (hover: none) so it never fires on a mouse/desktop visitor, where the real :hover already works. */ @media (hover: none) { .service-card.is-inview { background: #fff; box-shadow: var(--shadow-lg); border-color: var(--color-border); transform: translateY(-6px); } .service-card.has-bg.is-inview .service-card__bg { opacity: 1; transform: scale(1); } .service-card.has-bg.is-inview .service-card__scrim { opacity: 1; } .service-card.has-bg.is-inview { border-color: transparent; } .service-card.has-bg.is-inview .service-card__icon { background: rgba(255,255,255,0.18); color: #fff; box-shadow: none; } .service-card.has-bg.is-inview h3 a, .service-card.has-bg.is-inview h2 a { color: #fff; } .service-card.has-bg.is-inview p { color: rgba(255,255,255,0.88); } .service-card.has-bg.is-inview .service-card__more { color: #fff; } .service-card.has-bg.is-inview .service-card__footer .btn--primary { background: #fff; color: var(--color-dark); } } .services-section { position: relative; } .services-section--video { overflow: hidden; } .services-section__bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .services-section__scrim { position: absolute; inset: 0; background: rgba(255,255,255,0.88); z-index: 0; } .services-section--video > .container { position: relative; z-index: 1; } .services-section__footer { text-align: center; margin-top: 3rem; } @media (max-width: 992px) { .services-grid, .services-grid--archive { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .services-grid, .services-grid--archive { grid-template-columns: 1fr; } } /* ========================================================= PETS TABS ========================================================= */ .pets-tabs { background: var(--color-surface); border-radius: var(--radius-lg); padding: 2.5rem; display: grid; grid-template-columns: 260px 1fr; gap: 2.5rem; } .pets-tabs__list { display: flex; flex-direction: column; gap: 0.5rem; } .pets-tabs__tab { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1.1rem; border-radius: var(--radius-sm); background: #fff; font-weight: 700; text-align: left; color: var(--color-text); transition: all var(--transition); } .pets-tabs__tab:hover { color: var(--color-accent-dark); } .pets-tabs__tab.is-active { background: var(--color-accent); color: #fff; box-shadow: var(--shadow); } .pets-tabs__panel { display: none; } .pets-tabs__panel.is-active { display: block; animation: fadeIn 0.4s ease; } .pets-tabs__icon { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: #fff; color: var(--color-accent-dark); margin-bottom: 1.25rem; box-shadow: var(--shadow); } .pets-tabs__panel h3 { font-size: 1.5rem; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: none; } } @media (max-width: 782px) { .pets-tabs { grid-template-columns: 1fr; padding: 1.5rem; } .pets-tabs__list { flex-direction: row; flex-wrap: wrap; } .pets-tabs__tab { flex: 1 1 45%; } } /* ========================================================= WHY US (dark section + counters) ========================================================= */ .why-us { position: relative; background: var(--color-dark) center/cover no-repeat; color: #fff; overflow: hidden; } .why-us--placeholder { background: linear-gradient(135deg, #1c1c1c, #262523); } .why-us__scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10,10,10,0.92) 20%, rgba(10,10,10,0.55) 100%); } .why-us__bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .why-us__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; } .why-us__content h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.3rem); } .why-us__content p { color: #d6d6d6; max-width: 460px; } .why-us__actions { display: flex; gap: 1rem; margin-top: 1.75rem; flex-wrap: wrap; } .why-us__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; } .stat:first-child { grid-column: 1 / -1; } .stat__number { font-family: var(--font-heading); font-size: 2.8rem; font-weight: 700; color: var(--color-accent); display: block; } .stat h3 { color: #fff; font-size: 1.05rem; margin: 0.25rem 0 0.35rem; } .stat p { color: #b9b9b9; font-size: 0.88rem; } @media (max-width: 900px) { .why-us__grid { grid-template-columns: 1fr; } .why-us__stats { grid-template-columns: 1fr 1fr; } .stat:first-child { grid-column: auto; } } /* ========================================================= TEAM ========================================================= */ .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; } /* display:flex + height:100% (grid rows already stretch items to equal height) + margin-top:auto on the button – without this, two cards in the same row with a different amount of position text (one line vs two) ended up with their "Детальніше" button sitting at a different vertical position, even though the cards themselves were equal height. */ .team-card { text-align: center; display: flex; flex-direction: column; align-items: center; height: 100%; } .team-card__photo { width: 100%; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1/1; margin-bottom: 1rem; background: var(--color-surface); } .team-card__photo img, .team-card__photo .img-placeholder { width: 100%; height: 100%; object-fit: cover; } .team-card h3 { font-size: 1.1rem; margin-bottom: 0.2rem; } .team-card p { color: var(--color-accent-dark); font-weight: 700; font-size: 0.9rem; } .team-card__bio { color: var(--color-text-light); font-size: 0.9rem; margin-top: 0.5rem; } button.team-card__photo { display: block; width: 100%; padding: 0; margin: 0 0 1rem; border: 0; background: var(--color-surface); font-family: inherit; cursor: pointer; } .team-card__more { margin-top: auto; } @media (max-width: 992px) { .team-grid { grid-template-columns: repeat(2, 1fr); } } /* Doctors page (page-team.php): 3-column grid, photo on top, name and specialization tags underneath. Bio / quote still render if filled in. */ .team-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .team-doctor { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.1rem; } .team-doctor__photo { width: 100%; aspect-ratio: 1/1; border-radius: var(--radius); overflow: hidden; background: var(--color-surface); } .team-doctor__photo img, .team-doctor__photo .img-placeholder { width: 100%; height: 100%; object-fit: cover; } .team-doctor__body { width: 100%; min-width: 0; } .team-doctor__body h3 { font-size: 1.25rem; margin-bottom: 0.6rem; } .team-doctor__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 0.5rem; } .team-doctor__tag { display: inline-block; padding: 0.3rem 0.85rem; border-radius: 999px; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-accent-dark); font-weight: 700; font-size: 0.82rem; } .team-doctor__bio { color: var(--color-text); margin: 0.5rem 0 1rem; } .team-doctor__bio p:last-child { margin-bottom: 0; } .team-doctor__quote { font-style: italic; font-weight: 700; color: var(--color-heading); margin-bottom: 1rem; } @media (max-width: 992px) { .team-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .team-list { grid-template-columns: 1fr; } .team-doctor__photo { max-width: 360px; } } /* ========================================================= GALLERY ========================================================= */ .slider-arrows { display: flex; gap: 0.6rem; } .slider-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--color-border); display: flex; align-items: center; justify-content: center; transition: all var(--transition); } .slider-arrow:hover { background: var(--color-dark); color: #fff; border-color: var(--color-dark); } .gallery-track { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 0.5rem; } .gallery-track::-webkit-scrollbar { display: none; } .gallery-track__item { flex: 0 0 clamp(220px, 26vw, 300px); scroll-snap-align: start; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; position: relative; } .gallery-track__item img, .gallery-track__item video { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .gallery-track__item:hover img, .gallery-track__item:hover video { transform: scale(1.08); } .gallery-filters { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 2rem; } .gallery-filters__btn { padding: 0.55rem 1.2rem; border-radius: 999px; border: 1.5px solid var(--color-border); font-weight: 700; font-size: 0.88rem; transition: all var(--transition); } .gallery-filters__btn.is-active, .gallery-filters__btn:hover { background: var(--color-dark); color: #fff; border-color: var(--color-dark); } /* A uniform grid, not a Pinterest-style masonry – photos and (especially) * video posters come in all sorts of aspect ratios, and letting a CSS * column layout stack them at their natural height produced a ragged * look with uneven column bottoms, worst of all once the Фото/Відео * filter hides most items and leaves lopsided gaps. Every tile is now * the same 4:3 box (cropped via object-fit, same technique already used * for the homepage preview strip – see .gallery-track__item above). */ .gallery-masonry { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 1.5rem; } .gallery-masonry__item { display: block; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; box-shadow: 0 6px 18px rgba(20,20,30,.06); transition: box-shadow 0.3s ease; } .gallery-masonry__item img, .gallery-masonry__item video { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.5s ease; } .gallery-masonry__item:hover { box-shadow: 0 12px 28px rgba(20,20,30,.12); } .gallery-masonry__item:hover img, .gallery-masonry__item:hover video { transform: scale(1.06); } .gallery-masonry__item.is-hidden { display: none; } @media (max-width: 900px) { .gallery-masonry { grid-template-columns: repeat( 2, 1fr ); } } @media (max-width: 560px) { .gallery-masonry { grid-template-columns: 1fr; gap: 1rem; } } /* Gallery cards (photo/video) – shared look for both the homepage preview strip (.gallery-track__item, a