@import url('fonts.css'); /* ========================================================================== Dr Aleksandra — design tokens Palette and type are lifted from the original site; the motion layer is new. ========================================================================== */ :root { --cream: #f8f7f3; --gold: #b8a073; --gold-deep: #a68d5e; --tan: #bda689; --tan-deep: #b09a85; --sand: #fceddb; --ink: #2a2521; --ink-soft: #777; --line: rgba(42, 37, 33, 0.12); --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-quote: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-meta: 'Oswald', system-ui, -apple-system, 'Segoe UI', sans-serif; --shell: 1140px; --gutter: 20px; /* One easing curve for the whole site keeps the motion feeling like one hand. */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --reveal-dur: 900ms; } /* ========================================================================== Reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-body); font-size: 16px; font-weight: 300; line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, p, figure, figcaption, blockquote { margin: 0; } a { color: inherit; } button, input, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; } .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ========================================================================== Motion primitive Every scroll reveal on the site is this one transition, staggered with --d. ========================================================================== */ /* Gated behind .js, which is set by an inline script in . If JavaScript is off — or main.js fails to load — nothing is ever hidden, so the page degrades to plain content instead of a blank column below the hero. */ .js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease); transition-delay: var(--d, 0ms); will-change: opacity, transform; } .js [data-reveal].is-visible { opacity: 1; transform: none; will-change: auto; } /* ========================================================================== Buttons ========================================================================== */ .btn { --btn-bg: var(--gold); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 26px; border: 0; border-radius: 40px; background: var(--btn-bg); color: #fff; font-family: var(--font-body); font-size: 11px; font-weight: 400; letter-spacing: 0.09em; line-height: 1; text-decoration: none; cursor: pointer; position: relative; overflow: hidden; isolation: isolate; transition: transform 500ms var(--ease), box-shadow 500ms var(--ease); } /* A slow warm sheen crosses the pill on hover — the one flourish on the CTA. */ .btn::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--gold-deep); transform: translate3d(-101%, 0, 0); transition: transform 620ms var(--ease); } .btn:hover, .btn:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(42, 37, 33, 0.55); } .btn:hover::after, .btn:focus-visible::after { transform: translate3d(0, 0, 0); } .btn:active { transform: translateY(0); } .btn__icon { width: 13px; height: 13px; flex: none; fill: currentColor; } .btn--lg { padding: 14px 34px; font-size: 12px; } /* ========================================================================== Header ========================================================================== */ /* The header floats over the hero photograph rather than sitting above it, which is why the wordmark is white. Taking it out of flow lets the image start at the very top of the page. */ .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; padding-block: 18px; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .site-header__logo { display: block; flex: none; transition: opacity 400ms var(--ease); } .site-header__logo img { width: 225px; height: auto; } .site-header__logo:hover { opacity: 0.75; } /* The original hides the appointment button on phones and centres the logo. */ @media (max-width: 767px) { .site-header__inner { justify-content: center; } .site-header__cta { display: none; } .site-header__logo img { width: 200px; } } /* ========================================================================== Hero ========================================================================== */ /* Text sits on the floor of the hero, not across her face. */ .hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; /* The original scales the hero with the viewport (80vh), which is what keeps the portrait's face in frame on every screen. The floor stops it collapsing on short landscape phones. */ min-height: max(460px, 80vh); padding: 110px var(--gutter) 21px; overflow: hidden; isolation: isolate; } /* Anchored to the top so the portrait's face stays in frame at every viewport ratio. The parallax drift only ever exposes slack above the hero, which is off-screen by the time it appears. */ .hero__media { position: absolute; inset: 0; z-index: -2; height: 100%; } .hero__media img { width: 100%; height: 100%; object-fit: cover; /* Wide viewports crop the portrait vertically. Pinning to 0 left a band of empty backdrop above her hair and pushed the face down; 35% slides the crop window down the source so her eyes land around 40% of the hero. On narrow screens the image is height-constrained, so this is inert. */ object-position: 50% 35%; /* Page-load settle: the photograph eases out of a slow push-in. */ transform: scale(1.08); transition: transform 2200ms var(--ease); } .is-loaded .hero__media img { transform: scale(1); } /* A whisper of shade so 200-weight white type keeps its edge on the gold. */ .hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 180deg, rgba(42, 37, 33, 0.22) 0%, rgba(42, 37, 33, 0.06) 45%, rgba(42, 37, 33, 0.24) 100% ); } /* 1016px of text, matching the original's measure so the lines break the same. */ .hero__body { max-width: 1056px; text-align: center; } .hero__lede { color: #fff; font-size: clamp(16px, 1.55vw, 19px); font-weight: 200; line-height: 1.5; text-wrap: pretty; text-shadow: 0 1px 22px rgba(42, 37, 33, 0.4); opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 1200ms var(--ease) 380ms, transform 1200ms var(--ease) 380ms; } .is-loaded .hero__lede { opacity: 1; transform: none; } .hero__shape { position: absolute; left: 0; bottom: -1px; width: 100%; line-height: 0; z-index: 1; transform: translate3d(0, 100%, 0); transition: transform 1100ms var(--ease) 220ms; } .is-loaded .hero__shape { transform: none; } /* Rotated 180deg, as Elementor does for a bottom divider, and run slightly wide so the diagonal clears the edges. The rotation lives on the svg so it doesn't collide with the slide-up transform on the wrapper. */ .hero__shape svg { display: block; width: 106%; margin-left: -3%; height: 25px; transform: rotate(180deg); } .hero__shape path { fill: var(--cream); } @media (max-width: 767px) { .hero { padding-block: 90px 21px; } } /* ========================================================================== Services ========================================================================== */ .services { padding: 84px 0 18px; } .services__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 46px 40px; } .service { text-align: center; } .service__icon { width: 54px; height: 54px; margin: 0 auto 20px; transition: transform 600ms var(--ease); } .service:hover .service__icon { transform: scale(1.08); } /* 24px caps on a 19px leading is the original's setting — Playfair's caps have almost no descender, so the tight lockup reads as editorial rather than cramped. */ .service__title { margin-bottom: 5px; color: var(--gold); font-family: var(--font-display); font-size: 24px; font-weight: 500; line-height: 19px; text-transform: uppercase; } .service__text { color: var(--ink-soft); font-size: 13px; font-weight: 300; line-height: 1.5; text-wrap: pretty; } @media (max-width: 1024px) { .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 28px; } } @media (max-width: 520px) { .services { padding-top: 62px; } .services__grid { grid-template-columns: minmax(0, 1fr); gap: 42px; } } /* ========================================================================== Centred call to action ========================================================================== */ .cta-row { padding: 26px 0 76px; text-align: center; } /* ========================================================================== Testimonials ========================================================================== */ .testimonials { padding: 70px 0 96px; background: var(--cream); overflow: hidden; } .testimonials__viewport { overflow: hidden; } .testimonials__track { display: flex; align-items: stretch; gap: 36px; transition: transform 900ms var(--ease); } .testimonial { flex: 0 0 calc((100% - 36px) / 2); display: flex; flex-direction: column; gap: 18px; padding: 30px 30px 34px; border-radius: 10px; background: var(--tan); color: #fff; transition: transform 600ms var(--ease), box-shadow 600ms var(--ease); } .testimonial:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(42, 37, 33, 0.6); } .testimonial__meta { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .testimonial__avatar { width: 85px; height: 85px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); } .testimonial__name { font-family: var(--font-meta); font-size: 15px; font-weight: 500; letter-spacing: 0.03em; line-height: 1.5; } .testimonial__place { color: var(--sand); font-family: var(--font-quote); font-size: 11px; font-weight: 400; letter-spacing: 0.05em; line-height: 1.5; text-transform: uppercase; } .testimonial__quote { display: flex; flex-direction: column; gap: 14px; font-family: var(--font-quote); font-size: 16px; letter-spacing: 0.025em; line-height: 1.5; text-wrap: pretty; } .testimonials__controls { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 40px; } .carousel-arrow { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background 450ms var(--ease), color 450ms var(--ease), border-color 450ms var(--ease), transform 450ms var(--ease); } .carousel-arrow svg { width: 15px; height: 15px; fill: currentColor; } .carousel-arrow:hover { border-color: var(--gold); background: var(--gold); color: #fff; transform: scale(1.06); } .testimonials__dots { display: flex; align-items: center; gap: 10px; } .carousel-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(42, 37, 33, 0.22); cursor: pointer; transition: width 500ms var(--ease), background 500ms var(--ease), border-radius 500ms var(--ease); } .carousel-dot[aria-current='true'] { width: 26px; border-radius: 4px; background: var(--gold); } @media (max-width: 900px) { .testimonial { flex-basis: 100%; } .testimonials__track { gap: 24px; } } @media (max-width: 520px) { .testimonials { padding: 52px 0 72px; } .testimonial { padding: 26px 22px 28px; } } /* ========================================================================== Footer ========================================================================== */ .site-footer { padding: 58px 0; background: var(--tan); color: #fff; } .site-footer__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: start; } .site-footer__logo img { width: 280px; height: auto; margin-bottom: 22px; } .site-footer__tagline { max-width: 460px; color: #e6e6e6; font-size: 14px; font-weight: 300; line-height: 1.5; text-wrap: pretty; } .newsletter__title { margin-bottom: 18px; font-family: var(--font-quote); font-size: 18px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } .newsletter__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; } .newsletter__row { display: flex; } .newsletter input { width: 100%; height: 45px; padding: 0 15px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 4px; background: transparent; color: #fff; font-size: 14px; font-weight: 400; transition: border-color 400ms var(--ease), background 400ms var(--ease); } .newsletter__row input { border-radius: 4px 0 0 4px; border-right: 0; } .newsletter input::placeholder { color: rgba(255, 255, 255, 0.72); } .newsletter input:hover, .newsletter input:focus { border-color: #fff; background: rgba(255, 255, 255, 0.08); outline: none; } .newsletter__submit { flex: none; width: 157px; height: 45px; border: 0; border-radius: 0 4px 4px 0; background: var(--tan-deep); color: #fff; font-size: 14px; cursor: pointer; transition: background 450ms var(--ease); } .newsletter__submit:hover { background: var(--gold-deep); } @media (max-width: 900px) { .site-footer__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; } } @media (max-width: 520px) { .newsletter__grid { grid-template-columns: minmax(0, 1fr); } .newsletter__row { flex-direction: column; gap: 12px; } .newsletter__row input { border-radius: 4px; border-right: 1px solid rgba(255, 255, 255, 0.45); } .newsletter__submit { width: 100%; border-radius: 4px; } .site-footer__logo img { width: 230px; } } /* ========================================================================== Form status messages (shared by both forms) ========================================================================== */ .form-status { margin-top: 14px; font-size: 13px; line-height: 1.5; opacity: 0; transform: translateY(-4px); transition: opacity 450ms var(--ease), transform 450ms var(--ease); } .form-status.is-shown { opacity: 1; transform: none; } .form-status[data-state='error'] { color: #8c2f2f; } .newsletter .form-status[data-state='error'] { color: #ffe0e0; } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .is-busy { opacity: 0.6; pointer-events: none; } /* ========================================================================== Contact page ========================================================================== */ .page-banner { position: relative; min-height: 372px; border-radius: 0 0 40px 40px; overflow: hidden; isolation: isolate; } .page-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 50%; transform: scale(1.06); transition: transform 2200ms var(--ease); } .is-loaded .page-banner img { transform: scale(1); } .contact { padding: 40px 0 150px; } /* The original centres a ~820px block rather than filling the shell, and weights the form column wider than the text column. */ .contact__grid { display: grid; grid-template-columns: minmax(0, 348fr) minmax(0, 402fr); gap: 70px; align-items: start; max-width: 820px; margin-inline: auto; } .contact__title { margin-bottom: 18px; color: #111; font-family: var(--font-display); font-size: clamp(27px, 3vw, 34px); font-weight: 400; line-height: 1.2; } .contact__text { margin-bottom: 30px; color: var(--ink-soft); font-size: 14px; font-weight: 300; line-height: 1.5; text-wrap: pretty; } .contact__photo { overflow: hidden; } .contact__photo img { width: 100%; transition: transform 1200ms var(--ease); } .contact__photo:hover img { transform: scale(1.03); } /* Underline-only fields on the bare cream background — no card, no boxes. */ .contact-form { display: flex; flex-direction: column; gap: 34px; } .contact-form input, .contact-form textarea { width: 100%; padding: 0 5px 6px 6px; border: 0; border-bottom: 1px solid var(--gold); border-radius: 0; background: transparent; color: var(--ink); font-size: 13px; font-weight: 400; transition: border-color 400ms var(--ease), box-shadow 400ms var(--ease); } .contact-form textarea { min-height: 137px; resize: vertical; } .contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--ink-soft); } /* The rule thickens into the field on focus rather than drawing a box. */ .contact-form input:focus, .contact-form textarea:focus { border-bottom-color: var(--ink); box-shadow: 0 1px 0 0 var(--ink); outline: none; } .contact-form__submit { width: 100%; padding: 8px 16px; min-height: 40px; margin-top: 6px; border: 0; border-radius: 4px; background: var(--gold); color: #fff; font-size: 16px; cursor: pointer; transition: background 450ms var(--ease), transform 450ms var(--ease); } .contact-form__submit:hover { background: var(--gold-deep); transform: translateY(-1px); } @media (max-width: 900px) { .contact__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; } .page-banner { min-height: 260px; border-radius: 0 0 28px 28px; } .contact { padding: 54px 0 72px; } } @media (max-width: 520px) { .contact-form { padding: 24px; } } /* ========================================================================== Reduced motion — everything resolves to its final state instantly. ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } .js [data-reveal] { opacity: 1; transform: none; } .hero__media img, .page-banner img { transform: none; } .hero__lede { opacity: 1; transform: none; } .hero__shape { transform: none; } }