/* ============================================================ Stomatologia Ratajczak — global styles Foundation: tokens, reset, typography, layout, buttons ============================================================ */ /* ---- Fonts ---- */ /* Switzer (headings) via Fontshare, Inter + Poppins via Google (loaded in ) */ :root { /* ===== Brand palette — Stomatologia Ratajczak ===== */ /* neutrals */ --white: #FFFFFF; --porcelain: #FBFAF7; --mist: #F3F1EC; --stone: #E6E2DA; --warm-gray: #75726B; /* indigo (primary) */ --blue-50: #F5F6FD; --blue-100: #ECEEFB; --blue-400: #6E78DD; --blue-600: #4C5BD4; --blue-800: #3340A8; /* rose (secondary) */ --rose-50: #FBEDF0; --rose-100: #F4CDD8; --rose-400: #E59FAE; --rose-600: #CC6B82; --rose-700: #B85571; --rose-800: #9E3D55; /* sky (cool accent) */ --sky-50: #EDF2F6; --sky-200: #B8CBDB; --sky-500: #7B9BB6; --sky-800: #3F586B; /* ===== Semantic (mapped onto existing variable names) ===== */ --blue: var(--blue-600); /* primary: CTA, links, active */ --blue-hover: var(--blue-800); --primary-tint: var(--blue-100); --secondary: var(--rose-600); --secondary-hover: var(--rose-700); --secondary-tint: var(--rose-100); --accent: var(--sky-500); --accent-tint: var(--sky-50); --ink: #1E1E2A; /* headings / main text */ --muted: #75726B; /* secondary text */ --muted-2: #908C84; /* lighter warm gray */ --line: #E6E2DA; /* borders / dividers */ --bg: #FBFAF7; /* page background (warm white) */ --bg-alt: #F3F1EC; /* subtle sections */ --teal: #3340A8; /* CTA card — deep indigo */ --card: #F3F1EC; --focus-ring: #ECEEFB; /* type */ --f-head: "Switzer", "Inter", system-ui, sans-serif; --f-body: "Inter Display", "Inter", system-ui, sans-serif; --f-logo: "Poppins", "Inter", sans-serif; /* layout */ --frame: 1440px; --gutter: 40px; --content: 1360px; --radius-btn: 12px; --radius-card: 20px; --radius-lg: 28px; --shadow-pill: 0 0 8px 0 rgba(30,30,42,.08); --shadow-card: 0 18px 40px -18px rgba(30,30,42,.18); } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--f-body); color: var(--ink); background: var(--bg); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; overflow-wrap: break-word; /* safety net: long unbreakable strings (emails, URLs) never overflow */ } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ul { list-style: none; } h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 600; color: var(--ink); letter-spacing: -.01em; } /* ---- Layout helpers ---- */ .frame { max-width: var(--frame); margin-inline: auto; } .container { width: 100%; max-width: var(--frame); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: 96px; } .section--alt { background: var(--bg-alt); } /* ---- Typography utilities ---- */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-body); font-weight: 500; font-size: 16px; color: var(--ink); letter-spacing: .01em; } .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); display: inline-block; } .h-xl { font-size: 64px; line-height: 1.1; } .h-lg { font-size: 48px; line-height: 1.3; } .h-md { font-size: 32px; line-height: 1.3; } .h-sm { font-size: 24px; line-height: 1.3; } .lead { font-family: var(--f-body); font-size: 16px; line-height: 1.5; color: var(--muted); } .muted { color: var(--muted); } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-body); font-weight: 500; font-size: 16px; padding: 13px 22px; border-radius: var(--radius-btn); transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease; white-space: nowrap; line-height: 1; } .btn svg { width: 18px; height: 18px; flex: none; } .btn--primary { background: var(--blue); color: #fff; } .btn--primary:hover { background: var(--blue-hover); } .btn--white { background: #fff; color: var(--ink); box-shadow: var(--shadow-pill); } .btn--white:hover { transform: translateY(-2px); } .btn--dark { background: var(--ink); color: #fff; } .btn--ghost { background: transparent; color: var(--ink); } .btn--block { width: 100%; justify-content: center; } /* arrow nudges on hover */ .btn:hover svg.arrow { transform: translateX(4px); } .btn svg.arrow { transition: transform .25s ease; } /* ---- Scroll reveal ---- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } } /* ============================================================ HEADER ============================================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 24px var(--gutter) 0; } .nav-pill { max-width: calc(var(--frame) - 2*var(--gutter)); margin-inline: auto; height: 78px; background: #fff; border-radius: 18px; box-shadow: var(--shadow-pill); display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 28px; } .brand { display: inline-flex; align-items: center; gap: 12px; } .brand .logo-tooth { width: 32px; height: 32px; } .brand .logo-word { font-family: var(--f-logo); font-weight: 600; font-size: 23px; color: var(--ink); letter-spacing: -.01em; } .nav-links { display: flex; align-items: center; gap: 36px; } .nav-links a { font-family: var(--f-body); font-size: 16px; font-weight: 500; color: var(--ink); transition: color .2s; } .nav-links a:hover { color: var(--blue); } .nav-cta { display: flex; align-items: center; } .nav-cta .btn { padding: 15px 28px; } .nav-toggle { display: none; width: 48px; height: 48px; border-radius: 12px; align-items: center; justify-content: center; } .nav-toggle svg { width: 24px; height: 24px; } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: #fff; padding-block: 72px 40px; } .footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; } .footer-brand .brand { margin-bottom: 22px; } .footer-brand p { max-width: 360px; color: var(--muted); font-size: 16px; line-height: 1.6; } .footer-col h4 { font-family: var(--f-head); font-size: 20px; margin-bottom: 22px; } .footer-col ul { display: flex; flex-direction: column; gap: 16px; } .footer-col a { color: var(--muted); font-size: 16px; transition: color .2s; } .footer-col a:hover { color: var(--ink); } .footer-divider { height: 1px; background: var(--line); margin: 44px 0 24px; } .footer-bottom { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 15px; } .footer-bottom .legal { display: flex; gap: 14px; align-items: center; } .footer-bottom .legal span { color: var(--line); } /* responsive bits live in style.css continued / responsive.css */ /* ============================================================ HERO ============================================================ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: 0; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } .hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,18,38,.86) 0%, rgba(16,18,38,.62) 42%, rgba(16,18,38,.28) 100%), linear-gradient(0deg, rgba(16,18,38,.72) 0%, rgba(16,18,38,.18) 42%, rgba(16,18,38,0) 70%); } .hero__inner { position: relative; z-index: 2; width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding-bottom: 64px; padding-top: 160px; } .eyebrow--light { color: #fff; } .hero__title { color: #fff; font-size: 64px; line-height: 1.1; letter-spacing: -.02em; margin: 22px 0 18px; } .hero__sub { color: #e8e8e8; font-size: 16px; line-height: 1.6; margin-bottom: 28px; } .hero__cta { font-weight: 600; } /* expert floating card */ .expert-card { display: flex; gap: 16px; align-items: center; background: #fff; border-radius: 16px; padding: 12px; width: 420px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.45); } .expert-card__thumb { position: relative; width: 120px; height: 100px; border-radius: 10px; overflow: hidden; flex: none; } .expert-card__thumb img { width: 100%; height: 100%; object-fit: cover; } .expert-card__play { position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.9); display: grid; place-items: center; } .expert-card__play svg { width: 16px; height: 16px; color: var(--ink); margin-left: 2px; } .expert-card__text { display: flex; flex-direction: column; gap: 6px; padding-right: 8px; } .expert-card__text strong { font-family: var(--f-head); font-size: 18px; color: var(--ink); } .expert-card__text span { font-size: 14px; line-height: 1.45; color: var(--muted); } /* ============================================================ STATS + MARQUEE + SERVICE CARDS ============================================================ */ .stats { padding-block: 36px 96px; } .stats__bar { display: flex; align-items: center; gap: 36px; padding-block: 28px 64px; } .stats__reviews { flex: none; } .stats__reviews-head { font-family: var(--f-head); font-weight: 600; font-size: 18px; margin-bottom: 14px; } .stats__reviews-row { display: flex; align-items: center; gap: 16px; } .avatar-stack { display: flex; } .avatar-stack img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg-alt); margin-left: -12px; } .avatar-stack img:first-child { margin-left: 0; } .stats__served { display: flex; flex-direction: column; line-height: 1.2; } .stats__served strong { font-family: var(--f-head); font-size: 20px; } .stats__served span { font-size: 13px; color: var(--muted); } .stats__divider { width: 1px; align-self: stretch; background: #E6E2DA; } .marquee { overflow: hidden; flex: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .marquee__track { display: flex; align-items: center; gap: 24px; width: max-content; animation: marquee 32s linear infinite; } .marquee__item { flex: none; height: 70px; display: grid; place-items: center; padding: 0 28px; } .marquee__item img { height: 30px; width: auto; opacity: .9; } @keyframes marquee { to { transform: translateX(-50%); } } .svc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .svc-card { padding: 8px 56px 8px 0; } .svc-card__icon { display: inline-flex; } .svc-card__icon svg { width: 56px; height: 56px; color: #C7C1B6; } .svc-card__title { font-size: 24px; margin: 28px 0 14px; } .svc-card__text { color: var(--muted); font-size: 16px; line-height: 1.6; } /* ============================================================ PRIORITY ============================================================ */ .priority__grid { display: grid; grid-template-columns: 660px 1fr; gap: 80px; align-items: center; } .priority__media { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .priority__col { display: flex; flex-direction: column; gap: 20px; } .priority__col:last-child { padding-top: 40px; } .priority__img { width: 100%; border-radius: 16px; object-fit: cover; aspect-ratio: 1/.78; } .priority__img--tall { aspect-ratio: 1/1.18; } .priority__copy h2 { margin-bottom: 20px; } .priority__copy .lead { max-width: 520px; margin-bottom: 26px; } .checklist { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; } .checklist li { display: flex; align-items: center; gap: 12px; font-size: 17px; color: var(--ink); font-family: var(--f-body); font-weight: 500; } .checklist__tick { width: 22px; height: 22px; color: var(--blue); flex: none; } .checklist__tick svg { width: 22px; height: 22px; } /* ============================================================ SERVICES ACCORDION ============================================================ */ .services { padding-block: 96px; } .services__head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-bottom: 56px; } .services__head-right { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; } .services__head-right .lead { max-width: 460px; font-size: 17px; } .accordion__item { border-top: 1px solid #E6E2DA; } .accordion__item:last-child { border-bottom: 1px solid #E6E2DA; } .accordion__header { display: grid; grid-template-columns: 120px 1fr 48px; align-items: center; width: 100%; text-align: left; padding: 30px 0; gap: 24px; } .accordion__num { color: #A39E94; font-size: 16px; font-family: var(--f-body); } .accordion__title { font-family: var(--f-head); font-weight: 600; font-size: 32px; color: var(--ink); } .accordion__toggle { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; justify-self: end; border: 1px solid #E6E2DA; transition: background .25s, border-color .25s; } .accordion__toggle svg { width: 20px; height: 20px; color: var(--ink); } .accordion__toggle .i-minus { display: none; color: #fff; } .accordion__item.is-open .accordion__toggle { background: var(--blue); border-color: var(--blue); } .accordion__item.is-open .i-plus { display: none; } .accordion__item.is-open .i-minus { display: block; } .accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; } .accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; } .accordion__panel-inner { overflow: hidden; display: grid; grid-template-columns: 1fr 480px; gap: 60px; } .accordion__body { padding: 0 0 40px; align-self: center; grid-column: 1; padding-left: 144px; } .accordion__body p { color: var(--muted); font-size: 17px; line-height: 1.6; max-width: 520px; margin-bottom: 40px; } .accordion__book { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-body); font-weight: 600; color: var(--ink); } .accordion__book svg { width: 18px; height: 18px; } .accordion__media { grid-column: 2; } .accordion__media img { width: 100%; height: 220px; object-fit: cover; border-radius: 16px; margin-bottom: 30px; } /* ============================================================ PROMISE / ACHIEVEMENTS ============================================================ */ .promise { position: relative; padding-block: 90px; overflow: hidden; } .promise__bg { position: absolute; inset: 0; z-index: 0; } .promise__bg img { width: 100%; height: 100%; object-fit: cover; } .promise__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,12,18,.55), rgba(10,12,18,.35)); } .promise__inner { position: relative; z-index: 2; } .promise__title { color: #fff; font-size: 48px; line-height: 1.3; text-align: center; margin-bottom: 56px; } .promise__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .glass-card { position: relative; height: 290px; border-radius: 16px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(150deg, #ffffff 0%, #fbfbfc 58%, #f2f2f4 100%); box-shadow: 0 24px 54px -30px rgba(0,0,0,.5); } .glass-card__num { color: #908C84; font-size: 15px; font-family: var(--f-body); } .glass-card__foot { display: flex; flex-direction: column; gap: 10px; } .glass-card__stat { font-family: var(--f-head); font-weight: 600; font-size: 56px; line-height: 1; color: #1E1E2A; } .glass-card__label { font-size: 15px; color: #75726B; } /* ============================================================ EXPERT CARE ============================================================ */ .expert__grid { display: grid; grid-template-columns: 620px 1fr; gap: 80px; align-items: center; } .expert__media { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .expert__media img { width: 100%; aspect-ratio: 1/1.18; object-fit: cover; border-radius: 16px; } .expert__copy h2 { margin-bottom: 20px; } .expert__copy .lead { max-width: 480px; margin-bottom: 28px; } /* ============================================================ STEPS ============================================================ */ .steps__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .steps__copy { position: sticky; top: 140px; } .steps__copy h2 { margin-bottom: 20px; } .steps__copy .lead { max-width: 420px; margin-bottom: 30px; } .steps__list { display: flex; flex-direction: column; gap: 22px; } .step-card { position: relative; border: 1px solid #E6E2DA; border-radius: 18px; padding: 36px 36px 32px; overflow: hidden; background: #fff; } .step-card__num { position: absolute; top: 18px; left: 30px; font-family: var(--f-head); font-weight: 700; font-size: 64px; color: #F3F1EC; line-height: 1; } .step-card__body { position: relative; padding-top: 60px; } .step-card__title { font-size: 22px; margin-bottom: 10px; } .step-card__body p { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 460px; } /* ============================================================ SECTION HEAD (centered) ============================================================ */ .section-head { text-align: center; max-width: 760px; margin: 0 auto 56px; } .section-head h2 { margin-bottom: 18px; } .section-head .lead { font-size: 17px; } /* ============================================================ TEAM ============================================================ */ .team__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .team-card { display: flex; flex-direction: column; gap: 18px; } .team-card__photo { background: var(--bg-alt); border-radius: 18px; overflow: hidden; aspect-ratio: 1/1.06; } .team-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .5s ease; } .team-card:hover .team-card__photo img { transform: scale(1.04); } .team-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .team-card__info { display: flex; flex-direction: column; gap: 4px; } .team-card__info strong { font-family: var(--f-head); font-weight: 600; font-size: 20px; color: var(--ink); } .team-card__info span { font-size: 15px; color: var(--muted); } .team-card__link { width: 44px; height: 44px; border-radius: 12px; border: 1px solid #E6E2DA; display: grid; place-items: center; color: var(--ink); transition: background .25s, color .25s; } .team-card__link svg { width: 20px; height: 20px; } .team-card__link:hover { background: var(--blue); color: #fff; border-color: var(--blue); } /* ============================================================ TESTIMONIALS ============================================================ */ .testi { padding-block: 96px; } .testi__viewport { overflow: hidden; } .testi__track { display: flex; gap: 28px; transition: transform .5s cubic-bezier(.22,.61,.36,1); } .testi-card { flex: 0 0 calc((100% - 56px) / 3); background: #fff; border-radius: 18px; padding: 34px; display: flex; flex-direction: column; gap: 22px; } .testi-card__stars { display: flex; gap: 4px; color: #f5b50a; } .testi-card__stars svg { width: 20px; height: 20px; } .testi-card__quote { color: #1E1E2A; font-size: 16px; line-height: 1.6; flex: 1; } .testi-card__person { display: flex; align-items: center; gap: 14px; } .testi-card__person img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; } .testi-card__person strong { display: block; font-family: var(--f-head); font-weight: 600; font-size: 17px; } .testi-card__person span { font-size: 14px; color: var(--muted); } .testi__nav { display: flex; justify-content: center; gap: 16px; margin-top: 44px; } .testi__btn { width: 52px; height: 52px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; transition: background .25s, transform .25s; } .testi__btn:hover { background: var(--blue-hover); } .testi__btn svg { width: 22px; height: 22px; } /* ============================================================ FAQ ============================================================ */ .faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .faq__intro { position: sticky; top: 140px; } .faq__intro h2 { margin-bottom: 18px; } .faq__intro .lead { max-width: 380px; } .faq__list { display: flex; flex-direction: column; gap: 16px; } .faq-item { border: 1px solid #E6E2DA; border-radius: 14px; background: #fff; overflow: hidden; } .faq-item__header { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; text-align: left; padding: 22px 24px; } .faq-item__header span:first-child { font-family: var(--f-head); font-weight: 600; font-size: 18px; color: var(--ink); } .faq-item__chevron { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #E6E2DA; display: grid; place-items: center; flex: none; transition: transform .3s ease, background .25s; } .faq-item__chevron svg { width: 18px; height: 18px; color: var(--ink); } .faq-item.is-open .faq-item__chevron { transform: rotate(180deg); } .faq-item__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; } .faq-item.is-open .faq-item__panel { grid-template-rows: 1fr; } .faq-item__panel-inner { overflow: hidden; padding: 0 24px; color: var(--muted); font-size: 16px; line-height: 1.65; } .faq-item.is-open .faq-item__panel-inner { padding-bottom: 24px; } /* ============================================================ CTA ============================================================ */ .cta { padding-block: 40px 96px; } .cta__card { position: relative; background: var(--teal); border-radius: 28px; overflow: hidden; display: grid; grid-template-columns: 1fr 600px; gap: 40px; align-items: center; padding: 64px; min-height: 440px; } .cta__wave { position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 75% 0%, rgba(255,255,255,.12), transparent 55%), radial-gradient(80% 80% at 100% 100%, rgba(255,255,255,.06), transparent 60%); } .cta__copy { position: relative; z-index: 2; } .cta__title { color: #fff; font-size: 48px; line-height: 1.25; margin-bottom: 18px; } .cta__title .d-br { display: inline; } @media (max-width: 720px) { .cta__title .d-br { display: none; } } .cta__copy p { color: rgba(255,255,255,.82); font-size: 16px; line-height: 1.6; max-width: 460px; margin-bottom: 30px; } .cta__media { position: relative; z-index: 2; border-radius: 20px; overflow: hidden; height: 360px; background: rgba(255,255,255,.08); } .cta__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; mix-blend-mode: luminosity; opacity: .92; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1100px) { :root { --gutter: 28px; } .h-xl, .hero__title { font-size: 52px; } .h-lg, .promise__title, .cta__title { font-size: 40px; } .priority__grid, .expert__grid { grid-template-columns: 1fr 1fr; gap: 48px; } .priority__grid { grid-template-columns: 1fr 1fr; } .steps__grid, .faq__grid { grid-template-columns: 1fr 1fr; gap: 48px; } .promise__cards { grid-template-columns: repeat(2, 1fr); } .cta__card { grid-template-columns: 1fr 1fr; padding: 48px; } .accordion__panel-inner { grid-template-columns: 1fr 360px; gap: 36px; } .accordion__body { padding-left: 0; } .testi-card { flex: 0 0 calc((100% - 28px) / 2); } } @media (max-width: 860px) { .nav-links { display: none; } .nav-cta .nav-contact { display: none; } .nav-toggle { display: flex; } .testi-card { flex: 0 0 100%; } .svc-cards { grid-template-columns: 1fr; gap: 36px; } .svc-card { padding: 0; } .stats__bar { flex-direction: column; align-items: flex-start; gap: 24px; } .stats__divider { display: none; } .marquee { width: 100%; } } @media (max-width: 720px) { :root { --gutter: 20px; } .section { padding-block: 64px; } .hero { min-height: 92vh; } .hero__inner { flex-direction: column; align-items: flex-start; gap: 32px; padding-top: 130px; padding-bottom: 40px; } .hero__title, .h-xl { font-size: 40px; } .expert-card { width: 100%; max-width: 460px; } .h-lg, .promise__title, .cta__title, .section-head h2 { font-size: 32px; } .priority__grid, .expert__grid, .steps__grid, .faq__grid { grid-template-columns: 1fr; gap: 36px; } .priority__media, .expert__media { grid-template-columns: 1fr 1fr; } .promise__cards { grid-template-columns: 1fr 1fr; gap: 16px; } .team__grid { grid-template-columns: 1fr; gap: 36px; } .services__head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 36px; } .accordion__header { grid-template-columns: 60px 1fr 44px; gap: 14px; padding: 22px 0; } .accordion__title { font-size: 22px; } .accordion__panel-inner { grid-template-columns: 1fr; gap: 20px; } .accordion__media { grid-column: 1; grid-row: 1; } .accordion__body { grid-column: 1; padding-bottom: 28px; } .cta__card { grid-template-columns: 1fr; padding: 32px; } .cta__media { height: 280px; } .steps__copy, .faq__intro { position: static; } .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } .footer-brand { grid-column: 1 / -1; } .footer-bottom { flex-direction: column; gap: 14px; align-items: flex-start; } .glass-card { height: 220px; } .glass-card__stat { font-size: 42px; } } /* ---- mobile drawer ---- */ .mobile-drawer { position: fixed; inset: 0; z-index: 99; background: rgba(255,255,255,.98); backdrop-filter: blur(6px); display: grid; place-items: center; } .mobile-drawer[hidden] { display: none; } .mobile-drawer ul { display: flex; flex-direction: column; gap: 22px; text-align: center; width: 80%; max-width: 320px; } .mobile-drawer a { font-family: var(--f-head); font-weight: 600; font-size: 24px; color: var(--ink); } .mobile-drawer .btn { font-size: 18px; } .mobile-drawer .btn--primary { color: #fff; } body.menu-open { overflow: hidden; } /* ============================================================ SUBPAGES (Services / Team / About Us) ============================================================ */ .nav-links a.active { color: var(--blue); } /* centered page hero with faint grid (Services + About) */ .page-hero { position: relative; padding: 180px 0 72px; text-align: center; overflow: hidden; background: #fff; } .about-hero { position: relative; padding: 180px 0 40px; overflow: hidden; background: #fff; } .page-hero__grid { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(rgba(30,30,42,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(30,30,42,.045) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(120% 75% at 50% 0%, #000 28%, transparent 72%); mask-image: radial-gradient(120% 75% at 50% 0%, #000 28%, transparent 72%); } .page-hero .container, .about-hero .container { position: relative; z-index: 1; } .page-hero__title { font-size: 64px; line-height: 1.1; letter-spacing: -.02em; } .page-hero__sub { margin: 18px auto 0; max-width: 640px; color: var(--muted); font-size: 17px; line-height: 1.6; } /* services page: accordion directly under hero */ .services--page { padding: 8px 0 96px; background: #fff; } /* team page hero */ .team-hero { padding: 150px 0 60px; } .team-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .team-hero__copy h1 { margin-bottom: 22px; } .team-hero__copy .lead { max-width: 480px; margin-bottom: 28px; font-size: 17px; } .team-hero__media img { width: 100%; border-radius: 24px; object-fit: contain; } /* about hero images */ .about-hero__head { text-align: center; margin-bottom: 46px; } .about-hero__media { display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; } .about-hero__img { width: 100%; height: 600px; object-fit: cover; border-radius: 20px; } /* excellence orbit */ .excellence__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .excellence__visual { background: var(--bg-alt); border-radius: 24px; padding: 40px; aspect-ratio: 1 / .9; display: grid; place-items: center; } .orbit { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; display: grid; place-items: center; } .orbit__ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid #e2e2e6; } .orbit__ring--1 { width: 430px; height: 430px; } .orbit__ring--2 { width: 300px; height: 300px; border-style: dashed; opacity: .55; } .orbit__center { width: 230px; height: 230px; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow-card); position: relative; z-index: 2; } .orbit__center img { width: 100%; height: 100%; object-fit: cover; } .orbit__dot { position: absolute; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; left: 50%; top: 50%; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))); box-shadow: 0 6px 16px rgba(0,0,0,.12); background: #fff; z-index: 3; } .orbit__dot img { width: 100%; height: 100%; object-fit: cover; } .excellence__copy h2 { margin-bottom: 18px; } .excellence__copy .lead { max-width: 500px; margin-bottom: 34px; } .excellence__points { display: flex; flex-direction: column; gap: 26px; } .excellence__point h3 { font-family: var(--f-head); font-weight: 600; font-size: 22px; margin-bottom: 8px; } .excellence__point p { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 440px; } @media (max-width: 1100px) { .page-hero__title { font-size: 52px; } .team-hero__grid, .excellence__grid { gap: 40px; } } @media (max-width: 720px) { .page-hero { padding: 128px 0 48px; } .about-hero { padding: 128px 0 32px; } .team-hero { padding: 118px 0 40px; } .page-hero__title { font-size: 34px; } .team-hero__grid, .excellence__grid, .about-hero__media { grid-template-columns: 1fr; gap: 32px; } .about-hero__img { height: 300px; } .about-hero__img--sm { height: 240px; } .orbit { max-width: 340px; } .orbit__ring--1 { width: 300px; height: 300px; } .orbit__ring--2 { width: 208px; height: 208px; } .orbit__center { width: 150px; height: 150px; } .orbit__dot { width: 46px; height: 46px; transform: translate(calc(-50% + var(--x) * .7), calc(-50% + var(--y) * .7)); } } /* ============================================================ LEGAL PAGES (Privacy Policy / Terms) ============================================================ */ .legal-hero { position: relative; padding: 180px 0 36px; text-align: center; overflow: hidden; background: #fff; } .legal-hero .container { position: relative; z-index: 1; } .legal-updated { display: inline-block; margin-top: 22px; background: #fff; box-shadow: var(--shadow-pill); border-radius: 10px; padding: 10px 18px; font-size: 15px; color: var(--muted); } .legal-updated strong { color: var(--ink); font-weight: 600; } .legal-body { padding: 16px 0 96px; background: #fff; } .legal-body__inner { max-width: 800px; margin: 0 auto; padding-inline: var(--gutter); } .legal-body__title { font-family: var(--f-head); font-weight: 600; font-size: 30px; margin-bottom: 16px; } .legal-body h3 { font-family: var(--f-head); font-weight: 600; font-size: 24px; color: var(--ink); margin: 38px 0 14px; } .legal-body p { color: var(--muted); font-size: 16px; line-height: 1.75; margin-bottom: 14px; } .legal-body p strong { color: var(--ink); font-weight: 600; } .legal-list { list-style: disc; padding-left: 22px; margin: 4px 0 18px; display: flex; flex-direction: column; gap: 9px; } .legal-list li { color: var(--muted); font-size: 16px; line-height: 1.6; } @media (max-width: 720px) { .legal-hero { padding: 128px 0 28px; } .legal-hero .page-hero__title { font-size: 34px; } .legal-body h3 { font-size: 21px; } } /* ============================================================ PL REBRAND ADJUSTMENTS (Ratajczak) ============================================================ */ /* logo word: "Stomatologia Ratajczak" */ .brand .logo-word { font-size: 18px; font-weight: 500; color: var(--muted-2); white-space: nowrap; line-height: 1; } .brand .logo-word strong { color: var(--ink); font-weight: 700; } /* nav now has 6 longer PL labels — tighten + collapse earlier */ .nav-links { gap: 24px; } @media (max-width: 1080px) { .nav-links { display: none; } .nav-cta .nav-contact { display: none; } .nav-toggle { display: flex; } } /* stats marquee → text chips */ .marquee__chip { height: auto; padding: 0; font-family: var(--f-head); font-weight: 600; font-size: 18px; color: #A39E94; white-space: nowrap; } .marquee__chip::after { content: "•"; margin-left: 24px; color: #CFC9BE; } /* ============================================================ CONTACT PAGE ============================================================ */ .contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } .contact__info h2 { margin-bottom: 14px; } .contact__lead { margin-bottom: 28px; } .contact__locations { display: flex; flex-direction: column; gap: 20px; margin-bottom: 24px; } .contact__loc { padding: 22px 24px; border: 1px solid var(--line); border-radius: 16px; } .contact__loc h3 { font-family: var(--f-head); font-weight: 600; font-size: 20px; margin-bottom: 10px; } .contact__addr { color: var(--muted); margin-bottom: 12px; line-height: 1.6; font-size: 15px; } .contact__row { display: flex; gap: 12px; color: var(--ink); font-size: 15px; margin-bottom: 6px; line-height: 1.5; } .contact__row span { color: var(--muted); min-width: 130px; flex: none; } .contact__row a { color: var(--blue); min-width: 0; overflow-wrap: anywhere; } .contact__meta { display: flex; flex-direction: column; gap: 6px; } .contact__card { background: var(--bg-alt); border-radius: 24px; padding: 36px; } .contact-form { display: flex; flex-direction: column; gap: 18px; } .contact-form label { display: flex; flex-direction: column; gap: 8px; font-family: var(--f-body); font-weight: 500; font-size: 15px; color: var(--ink); } .contact-form input, .contact-form textarea { font-family: var(--f-body); font-size: 15px; color: var(--ink); background: #fff; border: 1px solid #E6E2DA; border-radius: 12px; padding: 13px 16px; outline: none; transition: border-color .2s; } .contact-form input::placeholder, .contact-form textarea::placeholder { color: #A39E94; } .contact-form input:focus, .contact-form textarea:focus { border-color: var(--blue); } .contact-form textarea { resize: vertical; } .contact-form .btn { margin-top: 6px; } .contact-map { padding-block: 80px; } .contact-map__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .contact-map__item { background: #fff; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); } .contact-map__item iframe { width: 100%; height: 320px; border: 0; display: block; } .contact-map__cap { padding: 18px 22px; display: flex; flex-direction: column; gap: 4px; } .contact-map__cap strong { font-family: var(--f-head); font-weight: 600; font-size: 17px; } .contact-map__cap span { color: var(--muted); font-size: 14px; } @media (max-width: 860px) { .contact__grid, .contact-map__grid { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 480px) { /* stack label above value so long e-mails/values never get clipped */ .contact__row { flex-direction: column; gap: 2px; } .contact__row span { min-width: 0; } } /* ============================================================ A11Y + PERF (skip-link, focus, reduced-motion, tablet band) ============================================================ */ .skip-link { position: absolute; left: 12px; top: -64px; z-index: 200; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 10px; font-family: var(--f-body); font-weight: 600; transition: top .2s ease; } .skip-link:focus { top: 12px; } main:focus { outline: none; } :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; } .btn:focus-visible, .testi__btn:focus-visible, .nav-toggle:focus-visible, .team-card__link:focus-visible { outline-offset: 3px; } .hero :focus-visible, .promise :focus-visible, .cta__card :focus-visible, .testi__btn:focus-visible { outline-color: #fff; } .contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .marquee__track { animation: none; } .team-card:hover .team-card__photo img { transform: none; } } /* tablet band 721–1100: stack hero + excellence orbit to avoid crush/overflow */ @media (min-width: 721px) and (max-width: 1100px) { .hero__inner { flex-direction: column; align-items: flex-start; gap: 28px; } .expert-card { width: 100%; max-width: 460px; } .excellence__grid { grid-template-columns: 1fr; gap: 36px; } .orbit { max-width: 440px; margin-inline: auto; } } /* scrolled nav shadow (toggled by JS) */ .nav-pill.scrolled { box-shadow: 0 8px 30px -8px rgba(30,30,42,.18); } /* 404 page */ .error-page { min-height: 68vh; display: grid; place-items: center; text-align: center; padding: 180px 0 96px; } .error-page__code { font-family: var(--f-head); font-weight: 700; font-size: 120px; line-height: 1; color: var(--blue); display: block; margin-bottom: 6px; } .error-page h1 { margin-bottom: 14px; } .error-page .lead { max-width: 480px; margin: 0 auto 28px; font-size: 17px; } .error-page__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } @media (max-width: 720px) { .error-page__code { font-size: 84px; } .error-page { padding: 130px 0 64px; } } /* footer contact column (replaces social) */ .footer-top { grid-template-columns: 1.4fr 0.8fr 1.5fr; } .footer-contact ul { gap: 20px; } .footer-contact__item { display: flex; flex-direction: column; gap: 5px; } .footer-contact__name { display: flex; align-items: center; gap: 8px; font-family: var(--f-head); font-weight: 600; font-size: 15px; color: var(--ink); } .footer-contact__addr { color: var(--muted); font-size: 14px; line-height: 1.5; padding-left: 26px; } .footer-contact__phone { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 15px; font-weight: 500; transition: color .2s; } .footer-contact__phone:hover { color: var(--blue); } .fc-ico { width: 18px; height: 18px; flex: none; color: var(--blue); } @media (max-width: 720px) { .footer-top { grid-template-columns: 1fr; } .footer-contact { grid-column: auto; } } /* ============================================================ DOCTOR PROFILE (/zespol/) ============================================================ */ .doctor { padding: 140px 0 96px; } .doctor__back { display: inline-flex; align-items: center; gap: 10px; color: var(--blue); font-family: var(--f-body); font-weight: 600; font-size: 15px; margin-bottom: 36px; transition: gap .2s ease; } .doctor__back:hover { gap: 14px; } .doctor__back-ico { width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; flex: none; } .doctor__back-ico svg { width: 18px; height: 18px; } .doctor__grid { display: grid; grid-template-columns: 380px 1fr; gap: 64px; align-items: start; } .doctor__aside { position: sticky; top: 120px; } .doctor__photo { border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-alt); aspect-ratio: 1 / 1.12; margin-bottom: 8px; } .doctor__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .doctor__subhead { font-family: var(--f-head); font-weight: 600; font-size: 22px; margin: 30px 0 16px; } .doctor__tags { display: flex; flex-wrap: wrap; gap: 10px; } .doctor__tag { background: var(--bg-alt); color: var(--ink); font-family: var(--f-body); font-weight: 500; font-size: 14px; padding: 9px 16px; border-radius: 999px; } .doctor__contact { display: flex; flex-direction: column; gap: 14px; } .doctor__contact a { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); font-size: 16px; font-weight: 500; transition: color .2s; } .doctor__contact a:hover { color: var(--blue); } .d-ico { width: 20px; height: 20px; flex: none; color: var(--blue); } .doctor__title-tag { color: var(--blue); font-family: var(--f-body); font-weight: 600; font-size: 15px; letter-spacing: .02em; margin-bottom: 12px; } .doctor__name { font-family: var(--f-head); font-weight: 600; font-size: 64px; line-height: 1.05; letter-spacing: -.02em; margin-bottom: 14px; } .doctor__role { color: var(--muted); font-size: 20px; margin-bottom: 24px; } .doctor__bio { color: var(--muted); font-size: 17px; line-height: 1.7; max-width: 640px; margin-bottom: 30px; } .doctor__cta { font-weight: 600; } .doctor__divider { height: 1px; background: var(--line); margin: 44px 0 32px; } .doctor__section-head { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; } .doctor__sec-icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(76,91,212,.1); color: var(--blue); display: grid; place-items: center; flex: none; } .doctor__sec-icon svg { width: 26px; height: 26px; } .doctor__section-head h2 { font-family: var(--f-head); font-weight: 600; font-size: 30px; } .doctor__rows { display: flex; flex-direction: column; gap: 26px; } .doctor__row { display: grid; grid-template-columns: 210px 1fr; gap: 24px; } .doctor__row-when { color: var(--muted); font-size: 16px; } .doctor__row-what strong { display: block; font-family: var(--f-head); font-weight: 600; font-size: 19px; color: var(--ink); margin-bottom: 6px; } .doctor__row-what span { color: var(--muted); font-size: 16px; line-height: 1.6; } @media (max-width: 980px) { .doctor__grid { grid-template-columns: 320px 1fr; gap: 40px; } .doctor__name { font-size: 48px; } } @media (max-width: 720px) { .doctor { padding: 118px 0 64px; } .doctor__grid { grid-template-columns: 1fr; gap: 32px; } .doctor__aside { position: static; } .doctor__photo { max-width: 420px; } .doctor__name { font-size: 38px; } .doctor__row { grid-template-columns: 1fr; gap: 6px; } } /* hero call-card (replaces video card) */ .expert-card__thumb--photo { background: var(--bg-alt); } .expert-card__thumb--photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .expert-card__phone { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-body); font-weight: 600; font-size: 16px; color: var(--ink); } .expert-card__addr { font-size: 13px; color: var(--muted); } .ec-ico { width: 18px; height: 18px; color: var(--blue); flex: none; } /* doctor certificates list (dense) */ .doctor__rows--certs { gap: 18px; } .doctor__rows--certs .doctor__row { grid-template-columns: 132px 1fr; gap: 22px; } .doctor__rows--certs .doctor__row-when { font-size: 14px; padding-top: 2px; } .doctor__rows--certs .doctor__row-what strong { font-size: 16px; line-height: 1.4; margin-bottom: 4px; } .doctor__rows--certs .doctor__row-what span { font-size: 14px; } @media (max-width: 720px) { .doctor__rows--certs .doctor__row { grid-template-columns: 1fr; gap: 4px; } }