/* ================================================================= Inga Kreivėnaitė – front-end styles Structured to map cleanly onto a future WordPress theme: - Design tokens (CSS custom properties) → future WP theme.json - Section class names mirror WP template-part names ================================================================= */ /* ---------- Design tokens ---------- */ :root { /* Colors */ --color-green-dark: #354d3f; /* nav, section backgrounds, about box */ --color-olive: #acb193; /* page background */ --color-grey-light: #dfe1e1; /* overlay boxes, service cards */ --color-footer-bottom: #2d2d2d; --color-text-dark: #000000; --color-text-light: #ffffff; /* Fonts */ --font-head: "Bebas Neue", "Arial Narrow", sans-serif; --font-body: "Outfit", system-ui, sans-serif; --font-contact: "Inter", system-ui, sans-serif; /* Layout */ --page-width: 1280px; /* Shared left edge for: hero slogan box, about container, psichoterapija/mokymai text, supervizijos image container */ --content-align: 93px; /* Homepage content column (wide screens get equal side gutters) */ --home-content-max: 1280px; --cta-bottom: 48px; /* Bio grid: two equal columns + gap (text and images share the same tracks) */ --bio-gap: 129px; --bio-col: 482px; --bio-span: calc(var(--bio-col) * 2 + var(--bio-gap)); --bio-frame-offset: 24px; --bio-divider-space: 80px; } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background-color: var(--color-olive); color: var(--color-text-dark); font-family: var(--font-body); font-weight: 500; line-height: 1.4; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } /* Centered / constrained content (not full-bleed). Do NOT target `.page` — WordPress adds that class to on pages, which would shrink the whole site to --page-width. */ .site-header__inner, .service-cards__inner { width: 100%; max-width: var(--page-width); margin-left: auto; margin-right: auto; } /* ---------- Shared bits ---------- */ .section-title { font-family: var(--font-head); font-weight: 400; font-size: 32px; line-height: 1; letter-spacing: 0.02em; margin: 0 0 24px; } .section-title--light { color: var(--color-text-light); } .section-title--dark { color: var(--color-text-dark); } /* ---------- CTA button ---------- */ .cta-more { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 3; font-family: var(--font-head); font-size: 22px; letter-spacing: 0.04em; line-height: 1; text-align: center; color: var(--color-green-dark); background-color: #c8d4ca; border: none; border-radius: 0; padding: 16px 36px; transition: background-color 0.2s ease; } .cta-more:hover { background-color: #d4ded6; } .cta-more__arrow { display: block; width: 22px; height: 11px; background: currentColor; clip-path: polygon(0 40%, 70% 40%, 70% 0, 100% 50%, 70% 100%, 70% 60%, 0 60%); } /* ---------- Site header / nav ---------- */ .site-header { background-color: var(--color-green-dark); position: sticky; top: 0; z-index: 100; } .site-header__inner { display: flex; align-items: center; justify-content: flex-end; height: 125px; padding: 0 36px 0 32px; } .primary-nav ul { display: flex; align-items: center; gap: 30px; } .primary-nav a { font-family: var(--font-head); font-size: 24px; letter-spacing: 0.02em; color: var(--color-text-light); opacity: 0.55; position: relative; padding-bottom: 6px; transition: opacity 0.25s ease; } .primary-nav a:hover { opacity: 0.85; } .primary-nav a.is-active { opacity: 1; } /* Subtle underline marker for the current page */ .primary-nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; opacity: 0.7; } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; } .nav-toggle span { width: 26px; height: 2px; background: var(--color-text-light); transition: transform 0.25s ease, opacity 0.25s ease; } /* ---------- Hero (full-bleed) ---------- */ .hero { position: relative; width: 100%; max-width: none; height: 849px; overflow: hidden; } .hero__image { position: absolute; inset: 0; background-size: cover; background-position: center; } .hero__overlay { position: absolute; left: var(--content-align); top: 172px; width: 280px; height: 130px; background-color: rgba(223, 225, 225, 0.72); display: flex; align-items: center; padding: 0 18px; } .hero__title { font-family: var(--font-head); font-weight: 400; color: var(--color-text-dark); margin: 0; line-height: 1.05; font-size: 32px; } .hero__title-line { white-space: nowrap; } .hero__title-emphasis { font-size: 32px; } /* ---------- About (Apie mane) ---------- Pattern A: gap on LEFT, container flush RIGHT */ .about { position: relative; margin-top: -207px; /* overlap hero bottom */ z-index: 2; } .about__inner { position: relative; display: flex; gap: 56px; background-color: var(--color-green-dark); height: 575px; margin-left: var(--content-align); margin-right: 0; width: calc(100% - var(--content-align)); max-width: none; box-shadow: 0 8px 28px rgba(45, 45, 45, 0.12); } .about__text { flex: 0 0 620px; display: flex; flex-direction: column; padding: 56px 48px 48px 86px; color: var(--color-text-light); min-width: 0; } .about__body { column-count: 2; column-gap: 28px; column-fill: auto; flex: 1; min-height: 0; overflow: hidden; } .about__body p { font-size: 14px; line-height: 1.5; margin: 0 0 16px; break-inside: avoid; } .about__body p:last-child { margin-bottom: 0; } .about__text > .cta-more { margin-top: 32px; align-self: flex-start; } .about__photo { flex: 1; min-width: 0; overflow: hidden; position: relative; } /* Fill the photo area edge-to-edge; shift crop down so person sits higher (less black above the head, more of the body visible) */ .about__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 68%; } /* ---------- Service cards grid ---------- */ .service-cards { padding: 130px 0 40px; /* space after Apie mane + before Psichoterapija section */ } .service-cards__inner { display: flex; justify-content: center; gap: 71px; padding: 0 90px; } .service-card { width: 319px; height: 319px; /* nearer to square than the taller 379 Figma frame */ background-color: var(--color-grey-light); border: 1px solid rgba(45, 45, 45, 0.08); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 36px 24px 28px; transition: transform 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease, border-color 0.35s ease; } .service-card:hover { transform: translateY(-10px); box-shadow: 0 18px 40px rgba(53, 77, 63, 0.22); background-color: #e8eae8; border-color: rgba(45, 45, 45, 0.12); } .service-card__image { width: 198px; height: 198px; /* square crop matching the visual in Figma */ overflow: hidden; } .service-card__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.45s ease; } .service-card:hover .service-card__image img { transform: scale(1.08); } .service-card__label { font-family: var(--font-head); font-weight: 400; font-size: 32px; letter-spacing: 0.02em; margin: 0; padding: 0; text-align: center; line-height: 1; transition: letter-spacing 0.35s ease; } .service-card:hover .service-card__label { letter-spacing: 0.06em; } /* ---------- Detailed service sections ---------- Alternating full-bleed: A (image-left / about): gap LEFT, flush RIGHT B (text-left): flush LEFT, gap RIGHT */ .service-detail { position: relative; margin-top: 60px; width: calc(100% - var(--content-align)); max-width: none; height: 497px; background-color: var(--color-green-dark); color: var(--color-text-light); box-shadow: 0 8px 28px rgba(45, 45, 45, 0.12); } /* Pattern B – Psichoterapija, Mokymai */ .service-detail--text-left { margin-left: 0; margin-right: var(--content-align); } /* Pattern A – Supervizijos (same as Apie mane) */ .service-detail--image-left { margin-left: var(--content-align); margin-right: 0; } .service-detail__inner { display: flex; height: 100%; width: 100%; max-width: none; margin: 0; } .service-detail__inner--reverse { flex-direction: row-reverse; } .service-detail__content { flex: 1; display: flex; flex-direction: column; padding: 56px 40px 48px var(--content-align); min-width: 0; } /* Supervizijos: text after photo, keep gutter from image */ .service-detail--image-left .service-detail__content { padding: 56px 83px 48px 87px; } .service-detail__photo { flex: 0 0 38%; max-width: 520px; min-width: 320px; overflow: hidden; position: relative; } .service-detail--image-left .service-detail__photo { flex: 0 0 430px; max-width: 430px; } .service-detail__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .service-detail--image-left .service-detail__photo img { top: -9.85%; height: 129.78%; max-width: none; } .service-detail__body { column-count: 2; column-gap: 40px; column-fill: auto; max-width: 640px; flex: 1; min-height: 0; overflow: hidden; } .service-detail__body p { font-size: 14px; line-height: 1.5; margin: 0 0 16px; break-inside: avoid; } .service-detail__body p:last-child { margin-bottom: 0; } .service-detail__body strong { font-weight: 700; } .service-detail__content > .cta-more { margin-top: 32px; align-self: flex-start; } /* ---------- Home only: centered content column + full-bleed green ---------- Content (hero slogan, about, services, susisiek) shares one left edge: --home-inline = side gutter of a --home-content-max column. Green panels still run flush to the LEFT or RIGHT viewport edge. */ body.home { --home-inline: max(var(--content-align), calc((100vw - var(--home-content-max)) / 2)); /* Equal space: Apie mane ↔ service cards ↔ Psichoterapija */ --home-band-gap: 120px; } /* Hero slogan box */ body.home .hero__overlay { left: var(--home-inline); } /* Apie mane — ~800px text; photo flush right; single-column copy. */ body.home .about__inner { margin-left: var(--home-inline); width: calc(100vw - var(--home-inline)); max-width: none; height: auto; min-height: 0; overflow: hidden; gap: 0; align-items: stretch; } body.home .about__text { flex: 0 0 800px; max-width: 800px; padding: 76px 40px 68px 64px; box-sizing: border-box; } body.home .about__body { column-count: 1; overflow: visible; flex: 0 1 auto; } body.home .about__text > .cta-more { margin-top: 28px; } body.home .about__photo { flex: 1 1 auto; min-width: 0; align-self: stretch; } /* Shared service-detail content width */ body.home .service-detail { width: min(var(--home-content-max), calc(100% - var(--home-inline))); max-width: var(--home-content-max); overflow: visible; } /* Psichoterapija / Mokymai — content column; green bleeds to the LEFT edge */ body.home .service-detail--text-left { margin-left: var(--home-inline); margin-right: auto; } body.home .service-detail--text-left::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--home-inline)); width: calc(var(--home-inline) + 100%); background-color: var(--color-green-dark); z-index: -1; pointer-events: none; } body.home .service-detail--text-left .service-detail__content { padding-left: 0; } /* Supervizijos — content column; green bleeds to the RIGHT edge */ body.home .service-detail--image-left { margin-left: var(--home-inline); margin-right: 0; } body.home .service-detail--image-left::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: calc(100vw - var(--home-inline)); background-color: var(--color-green-dark); z-index: -1; pointer-events: none; } /* Susisiek card */ body.home .site-footer__overlay { left: var(--home-inline); } /* Service cards — equal gap above (after Apie mane) and below (before Psichoterapija) */ body.home .service-cards { padding: var(--home-band-gap) 0; } body.home .service-cards + .service-detail { margin-top: 0; } /* Service cards sit in the same column */ body.home .service-cards__inner { max-width: var(--home-content-max); padding-left: 0; padding-right: 0; } /* ---------- Footer / contact ---------- Flower crop matches Figma (img scaled 194.28%, shifted up 94.28%). SUSISIEK card sits on top of the picture. */ .site-footer { position: relative; width: 100%; max-width: none; margin: 260px 0 0; /* space after MOKYMAI + room for larger SUSISIEK overhang */ height: 472px; /* 437 image + 35 bottom bar */ } .site-footer--no-card { margin-top: 80px; } .site-footer__image { position: absolute; inset: 0 0 35px 0; overflow: hidden; } /* Exact Figma framing for the flower field */ .site-footer__image img { position: absolute; left: -0.02%; top: -94.28%; width: 100.04%; height: 194.28%; max-width: none; } .site-footer__overlay { position: absolute; left: var(--content-align); top: -140px; width: 320px; height: 240px; background-color: rgba(223, 225, 225, 0.72); padding: 40px 32px 0; color: var(--color-text-dark); z-index: 2; transition: transform 0.25s ease, box-shadow 0.25s ease; } .site-footer__overlay:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); } .site-footer__overlay .section-title { font-size: 32px; margin-bottom: 28px; } .contact-list { font-family: var(--font-contact); } .contact-list li { font-size: 18px; font-weight: 500; line-height: 1.75; } .contact-list a:hover { text-decoration: underline; } .site-footer__bottom { position: absolute; left: 0; bottom: 0; width: 100%; height: 35px; background-color: var(--color-footer-bottom); } /* ================================================================= Content page (apie-mane, psichoterapija, supervizijos, mokymai) Reusable template — only text and images change between pages. ================================================================= */ .content-page { position: relative; width: 100%; max-width: none; } /* Page title — same horizontal system as bio-block text */ .content-page__title { font-family: var(--font-head); font-weight: 400; font-size: 72px; letter-spacing: 0.02em; color: var(--color-green-dark); max-width: 1280px; margin: 106px auto var(--bio-divider-space); padding-left: var(--content-align); line-height: 1; } .error-404__actions { max-width: 1280px; margin: 0 auto 120px; padding-left: var(--content-align); } .form-result__actions { max-width: 1280px; margin: 0 auto 120px; padding-left: var(--content-align); } .form-result--error .content-page__title { max-width: 900px; } /* Dividers: identical clear space above & below on every divider */ .content-divider { border: 0; height: 1px; max-width: var(--page-width); width: 100%; margin: var(--bio-divider-space) auto; background-image: linear-gradient(var(--color-green-dark), var(--color-green-dark)); background-repeat: no-repeat; background-size: min(var(--bio-span), calc(100% - var(--content-align))) 1px; background-position: var(--content-align) center; } /* Bio blocks — shared 2-column grid so pictures/text align across sections. Padding only on the side where the green frame extends, so that frame counts toward the divider distance (clear 80px from outermost edge). */ .bio-block { display: grid; grid-template-columns: var(--bio-col) var(--bio-col); column-gap: var(--bio-gap); align-items: start; padding: 0 0 0 var(--content-align); max-width: 1280px; margin: 0 auto; box-sizing: border-box; } .bio-block--image-right { padding-top: var(--bio-frame-offset); /* room for frame above the photo */ } .bio-block--image-left { padding-bottom: var(--bio-frame-offset); /* room for frame below the photo */ } .bio-block--image-right .bio-block__text { grid-column: 1; } .bio-block--image-right .bio-block__image { grid-column: 2; } .bio-block--image-left .bio-block__image { grid-column: 1; } .bio-block--image-left .bio-block__text { grid-column: 2; } .bio-block__text { width: 100%; color: var(--color-green-dark); font-size: 15px; line-height: 26px; font-weight: 500; } .bio-block__text p { margin: 0 0 26px; } .bio-block__text p:last-child { margin-bottom: 0; } .bio-block__text strong { font-weight: 700; } .bio-block__heading { font-size: 22px; font-weight: 700; line-height: 28px; margin: 0 0 26px; } .bio-block__text > .bio-block__heading:not(:first-child) { margin-top: 26px; } .bio-block__text p.bio-block__quote { margin-bottom: 8px; } .bio-block__text p.bio-block__credit { margin: 0; font-weight: 500; line-height: 1.35; } .bio-block__text ul { list-style: disc; margin: 0 0 26px; padding-left: 22px; } .bio-block__text li { margin: 0 0 12px; padding-left: 4px; } .bio-block__text li:last-child { margin-bottom: 0; } /* Testimonials carousel (Mokymai) — full site-container width, same frosted grey panel as the SUSISIEK footer card. */ .testimonials { width: 100%; max-width: var(--page-width); margin: var(--bio-divider-space) auto; box-sizing: border-box; background-color: rgba(223, 225, 225, 0.72); color: var(--color-text-dark); } .testimonials__inner { padding: 56px var(--content-align); box-sizing: border-box; } .testimonials__title { margin: 0 0 28px; font-family: var(--font-body); font-size: 22px; font-weight: 700; line-height: 28px; color: var(--color-text-dark); } .testimonials__viewport { position: relative; overflow: hidden; } .testimonials__track { position: relative; } .testimonials__slide { margin: 0; opacity: 0; visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; transition: opacity 0.35s ease; pointer-events: none; } .testimonials__slide.is-active { position: relative; opacity: 1; visibility: visible; pointer-events: auto; } .testimonials__quote { margin: 0; font-size: 18px; line-height: 28px; font-weight: 500; color: var(--color-text-dark); } .testimonials__author { display: block; margin-top: 14px; font-style: normal; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--color-text-dark); white-space: pre-line; } .testimonials__controls { display: flex; align-items: center; gap: 16px; margin-top: 28px; } .testimonials__btn { appearance: none; border: 1.5px solid var(--color-text-dark); background: transparent; color: var(--color-text-dark); width: 40px; height: 40px; padding: 0; font-size: 24px; line-height: 1; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .testimonials__btn:hover, .testimonials__btn:focus-visible { background: var(--color-text-dark); color: var(--color-text-light); outline: none; } .testimonials__dots { display: flex; align-items: center; gap: 10px; flex: 1; justify-content: center; } .testimonials__dot { appearance: none; border: 0; padding: 0; width: 9px; height: 9px; border-radius: 50%; background: rgba(0, 0, 0, 0.22); cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; } .testimonials__dot.is-active { background: var(--color-text-dark); transform: scale(1.15); } .testimonials__dot:focus-visible { outline: 2px solid var(--color-text-dark); outline-offset: 2px; } /* Images fill their grid column; same height everywhere */ .bio-block__image { position: relative; width: 100%; height: 598px; } .bio-block__image img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 2; box-shadow: 0 8px 28px rgba(45, 45, 45, 0.12); } .bio-block__img--down-5 { object-position: center 55%; } /* Green frame behind image — original corner offsets */ .bio-block__image::before { content: ""; position: absolute; background-color: var(--color-green-dark); z-index: 1; box-shadow: 0 8px 28px rgba(45, 45, 45, 0.12); } /* Image right → frame offset top-left */ .bio-block--image-right .bio-block__image::before { top: calc(-1 * var(--bio-frame-offset)); left: calc(-1 * var(--bio-frame-offset)); width: calc(100% - 66px); height: calc(100% - 26px); } /* Image left → frame offset bottom-right */ .bio-block--image-left .bio-block__image::before { bottom: calc(-1 * var(--bio-frame-offset)); right: calc(-1 * var(--bio-frame-offset)); width: calc(100% - 90px); height: calc(100% - 61px); } /* Education / qualifications list — same left edge */ .qualifications { display: flex; align-items: flex-start; gap: 80px; padding: 0 0 var(--bio-divider-space) var(--content-align); max-width: 1280px; margin: 0 auto; } .qualifications__list { flex: 0 0 803px; color: var(--color-green-dark); font-size: 15px; line-height: 26px; font-weight: 600; } .qualifications__list p { margin: 0 0 4px; } .qualifications__list a, .bio-block__text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .qualifications__decor { flex: 0 0 auto; max-width: 396px; width: min(100%, 320px); margin-left: auto; } .qualifications__decor img { width: 100%; height: auto; object-fit: contain; } /* Practical-info closing block (service pages) — shorter copy + illustration */ .qualifications--practical { align-items: center; /* Sit doodle in the middle of the open space under the bio span */ gap: calc((var(--bio-col) + var(--bio-gap) - 220px) / 2); } .qualifications--practical .qualifications__list { flex: 0 0 var(--bio-col); font-weight: 500; } .qualifications--practical .qualifications__list strong { font-weight: 700; } .qualifications--practical .qualifications__decor { width: 220px; max-width: 220px; margin-left: 0; } /* ---------- Kontaktai page ---------- */ .contact-page__list { list-style: none; margin: 0 0 32px; padding: 0; font-size: 15px; line-height: 26px; font-weight: 500; color: var(--color-green-dark); } .contact-page__list li { margin: 0 0 8px; } .contact-page__list a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .contact-form { position: relative; display: flex; flex-direction: column; gap: 20px; color: var(--color-green-dark); } .contact-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .contact-form__field { display: flex; flex-direction: column; gap: 8px; font-size: 15px; font-weight: 600; line-height: 1.4; } .contact-form__field input, .contact-form__field textarea { width: 100%; margin: 0; padding: 14px 16px; border: 1px solid rgba(53, 77, 63, 0.35); border-radius: 0; background-color: rgba(223, 225, 225, 0.72); color: var(--color-text-dark); font-family: var(--font-body); font-size: 15px; font-weight: 500; line-height: 1.4; outline: none; transition: border-color 0.2s ease, background-color 0.2s ease; resize: vertical; } .contact-form__field input:focus, .contact-form__field textarea:focus { border-color: var(--color-green-dark); background-color: rgba(223, 225, 225, 0.92); } .contact-form__field textarea { min-height: 140px; } .contact-form__submit { align-self: flex-start; margin-top: 8px; cursor: pointer; border: none; } /* ================================================================= Responsive – scale the fixed 1280px design down on smaller screens ================================================================= */ @media (max-width: 1280px) { .site-header__inner, .hero, .service-cards__inner { margin-left: 0; margin-right: 0; } } @media (max-width: 1024px) { .primary-nav ul { gap: 22px; } .primary-nav a { font-size: 20px; } .hero { height: 620px; } .hero__overlay { left: 48px; top: 120px; width: 255px; height: 120px; padding: 0 16px; } .hero__title { font-size: 28px; } .hero__title-emphasis { font-size: 28px; } /* Home: one shared edge inset (match Apie mane) for all green bands + cards */ body.home { --home-edge: 32px; } body.home .hero__overlay { left: var(--home-edge); } body.home .about__inner, body.home .service-detail, body.home .service-detail--text-left, body.home .service-detail--image-left { margin-left: var(--home-edge); margin-right: 0; width: calc(100% - var(--home-edge)); max-width: none; } body.home .service-detail--text-left::before, body.home .service-detail--image-left::before { display: none; } body.home .service-cards__inner { max-width: none; padding-left: var(--home-edge); padding-right: var(--home-edge); } .about { margin-top: -140px; } .about__inner { height: auto; flex-direction: column; margin-left: 32px; margin-right: 0; width: calc(100% - 32px); } body.home .about__inner { margin-left: var(--home-edge); width: calc(100% - var(--home-edge)); max-width: none; } .about__text { flex: none; width: 100%; padding: 48px 32px; } body.home .about__text { flex: 1 1 auto; width: 100%; max-width: 100%; min-width: 0; padding: 48px 32px; } .about__body { column-count: 1; } body.home .about__body { min-width: 0; overflow-wrap: anywhere; } .about__photo { flex: none; width: 100%; height: 480px; } body.home .about__photo { flex: none; width: 100%; min-height: 0; } .about__photo img { inset: 0; height: 100%; top: auto; object-fit: cover; object-position: center 65%; } .service-cards__inner { flex-wrap: wrap; gap: 32px; padding: 0 32px; } .service-card { width: 100%; max-width: 319px; height: 319px; margin: 0 auto; } .service-detail { width: calc(100% - 32px); height: auto; margin-top: 32px; } .service-detail--text-left { margin-left: 0; margin-right: 32px; } .service-detail--image-left { margin-left: 32px; margin-right: 0; } .service-detail__inner { flex-direction: column !important; } .service-detail__content, .service-detail--image-left .service-detail__content { padding: 48px 32px; } body.home .service-detail__content, body.home .service-detail--image-left .service-detail__content, body.home .service-detail--text-left .service-detail__content { padding: 48px 32px; } .service-detail__body { column-count: 1; max-width: 100%; } .service-detail__photo, .service-detail--image-left .service-detail__photo { flex: none; max-width: none; min-width: 0; height: 400px; width: 100%; } .service-detail__photo img, .service-detail--image-left .service-detail__photo img { top: 0; height: 100%; object-fit: cover; } #psichoterapija .service-detail__photo img { object-position: center 35%; } #supervizijos .service-detail__photo img { object-position: center 24%; } #mokymai .service-detail__photo img { object-position: center 35%; } .site-footer { height: auto; margin-top: 80px; } .site-footer__image { position: relative; height: 320px; } .site-footer__image img { top: -60%; height: 180%; } .site-footer__overlay { position: relative; left: 0; top: auto; width: 100%; margin: 0 0 -100px; padding: 48px 32px; } body.home .site-footer__overlay { left: auto; width: auto; margin-left: var(--home-edge); margin-right: var(--home-edge); } .site-footer__bottom { position: relative; } /* Content page */ .content-page__title { padding-left: 32px; margin: 80px auto 60px; font-size: 56px; } .error-404__actions { padding-left: 32px; margin-bottom: 80px; } .form-result__actions { padding-left: 32px; margin-bottom: 80px; } .content-divider { margin: 60px auto; background-size: calc(100% - 32px) 1px; background-position: 32px center; } .bio-block { grid-template-columns: 1fr; column-gap: 0; row-gap: 48px; padding: 0 32px; } .bio-block--image-right .bio-block__text, .bio-block--image-right .bio-block__image, .bio-block--image-left .bio-block__image, .bio-block--image-left .bio-block__text { grid-column: 1; } /* Always text then image on mobile, even for image-left blocks */ .bio-block--image-left .bio-block__text { order: 1; } .bio-block--image-left .bio-block__image { order: 2; } .bio-block__text { width: 100%; } .bio-block__image { width: 100%; height: 480px; } .testimonials { margin: 60px auto; } .testimonials__inner { padding: 48px 32px; } .qualifications { flex-direction: column; gap: 40px; padding: 0 0 60px 32px; } .qualifications__list { flex: none; width: 100%; } .qualifications__decor { display: none; } } @media (max-width: 640px) { .site-header__inner { height: 80px; padding: 0 20px; justify-content: flex-end; } .nav-toggle { display: flex; } .primary-nav { position: fixed; inset: 80px 0 auto 0; background: var(--color-green-dark); padding: 24px 32px; transform: translateY(-120%); transition: transform 0.3s ease; z-index: 99; } .primary-nav.is-open { transform: translateY(0); } .primary-nav ul { flex-direction: column; align-items: flex-start; gap: 18px; } .primary-nav a { font-size: 22px; } .hero { height: 460px; } .hero__overlay { left: 24px; top: 80px; width: 215px; height: 100px; padding: 0 14px; } .hero__title { font-size: 24px; } .hero__title-emphasis { font-size: 24px; } .about { margin-top: -80px; } .about__inner { margin-left: 16px; width: calc(100% - 16px); } body.home { --home-edge: 16px; } body.home .about__inner { margin-left: var(--home-edge); width: calc(100% - var(--home-edge)); } .about__text { padding: 36px 24px; } body.home .about__text { padding: 36px 24px; max-width: 100%; } .about__photo { height: 400px; } .about__photo img { object-position: center 65%; } .service-cards { padding-top: 60px; } .service-cards__inner { padding: 0 16px; gap: 24px; } body.home .service-cards__inner { padding-left: var(--home-edge); padding-right: var(--home-edge); } .service-detail { width: calc(100% - 16px); } .service-detail--text-left { margin-right: 16px; } .service-detail--image-left { margin-left: 16px; } body.home .service-detail, body.home .service-detail--text-left, body.home .service-detail--image-left { margin-left: var(--home-edge); margin-right: 0; width: calc(100% - var(--home-edge)); } .service-detail__content, .service-detail--image-left .service-detail__content { padding: 36px 24px; } body.home .service-detail__content, body.home .service-detail--image-left .service-detail__content, body.home .service-detail--text-left .service-detail__content { padding: 36px 24px; } .service-detail__photo, .service-detail--image-left .service-detail__photo { height: 360px; } .site-footer__overlay { padding: 36px 24px; } body.home .site-footer__overlay { margin-left: var(--home-edge); margin-right: var(--home-edge); } /* Content page */ .content-page__title { padding-left: 24px; margin: 60px auto 48px; font-size: 42px; } .error-404__actions { padding-left: 24px; margin-bottom: 60px; } .form-result__actions { padding-left: 24px; margin-bottom: 60px; } .content-divider { margin: 48px auto; background-size: calc(100% - 24px) 1px; background-position: 24px center; } .bio-block { grid-template-columns: 1fr; column-gap: 0; row-gap: 40px; padding: 0 24px; } .bio-block--image-right .bio-block__text, .bio-block--image-right .bio-block__image, .bio-block--image-left .bio-block__image, .bio-block--image-left .bio-block__text { grid-column: 1; } .bio-block--image-left .bio-block__text { order: 1; } .bio-block--image-left .bio-block__image { order: 2; } .bio-block__text { width: 100%; } .bio-block__image { width: 100%; height: 420px; } .testimonials__inner { padding: 40px 24px; } .testimonials__quote { font-size: 16px; line-height: 26px; } .qualifications { flex-direction: column; gap: 32px; padding: 0 0 48px 24px; } .qualifications__list { flex: none; width: 100%; } .qualifications__decor { display: none; } }