/* ========================================================================== Dr. Chassid — Retina Specialist Design system + site styles. Written with CSS *logical properties* throughout (margin-inline-start, inset-inline-end, text-align:start ...), so the Hebrew (RTL) and English (LTR) pages share one stylesheet with zero direction-specific overrides. ========================================================================== */ /* --- 1. Tokens ---------------------------------------------------------- */ :root { /* Brand palette — inherited from the Otzem Chassid clinic system */ --ink: #0a1410; --ink-2: #2c4a41; --ink-3: #6d8d83; --green: #0f6e56; --green-deep: #0a4d3c; --green-lit: #1d9e75; --green-pale: #5dcaa5; --paper: #ffffff; --wash: #f3faf7; --wash-2: #e7f4ee; --line: #dcebe4; --line-soft: #eaf4f0; --dark: #09201a; --dark-2: #0d2a22; /* --- Type ------------------------------------------------------------ HEBREW FONT OPTIONS. To switch, swap the two lines below AND the Google Fonts in the of index.html and en/index.html. Sacramento is the logo wordmark and is needed by every option. 1 · CLASSIC (active) Frank Ruhl Libre + Assistant Serious, establishment, the register Israeli broadsheets use. family=Assistant:wght@300;400;600;700&family=Frank+Ruhl+Libre:wght@400;500;600&family=Sacramento 2 · MODERN Noto Serif Hebrew + Heebo Crisper, more contemporary serif; Heebo is neutral and very legible. family=Heebo:wght@300;400;500;700&family=Noto+Serif+Hebrew:wght@400;500;600&family=Sacramento 3 · CLEAN IBM Plex Sans Hebrew for both roles No serif at all. Precise and technical — the most "current" option. family=IBM+Plex+Sans+Hebrew:wght@300;400;500;600;700&family=Sacramento 4 · FRIENDLY Miriam Libre + Rubik Rounder and warmer. Less formal, more approachable. family=Miriam+Libre:wght@400;700&family=Rubik:wght@300;400;500;700&family=Sacramento 5 · LITERARY David Libre + Heebo David is the classic Hebrew book face — elegant, a little traditional. family=David+Libre:wght@400;500;700&family=Heebo:wght@300;400;500;700&family=Sacramento --------------------------------------------------------------------- */ --serif: "Frank Ruhl Libre", "Times New Roman", Georgia, serif; --sans: "Assistant", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --script: "Sacramento", "Snell Roundhand", cursive; /* Rhythm */ --shell: 1180px; --gutter: clamp(1.25rem, 5vw, 3rem); --section: clamp(4.5rem, 10vw, 8rem); --radius: 14px; --radius-s: 8px; /* Depth — soft, green-tinted, never grey/muddy */ --shadow-s: 0 1px 2px rgba(10, 32, 26, .05), 0 2px 8px rgba(10, 32, 26, .04); --shadow-m: 0 2px 6px rgba(10, 32, 26, .05), 0 12px 32px rgba(10, 32, 26, .07); --shadow-l: 0 4px 12px rgba(10, 32, 26, .06), 0 24px 60px rgba(10, 32, 26, .11); --ease: cubic-bezier(.22, .61, .36, 1); } /* --- 2. Reset & base ---------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-block-start: 6rem; overflow-x: hidden; overflow-x: clip; /* modern form - never creates a scroll container */ } body { margin: 0; background: var(--paper); color: var(--ink-2); font-family: var(--sans); font-size: 1.0625rem; /* 17px — generous for Hebrew readability */ line-height: 1.75; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); font-weight: 500; line-height: 1.2; margin: 0; letter-spacing: -0.01em; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } a { color: var(--green); text-decoration: none; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } ul { margin: 0; padding: 0; list-style: none; } figure, blockquote, dl, dd { margin: 0; } button, input, textarea, select { font: inherit; color: inherit; margin: 0; } button { cursor: pointer; background: none; border: 0; } :focus-visible { outline: 2px solid var(--green-lit); outline-offset: 3px; border-radius: 3px; } ::selection { background: var(--green-pale); color: var(--ink); } html[lang="he"] body { line-height: 1.8; } /* --- 3. Layout helpers -------------------------------------------------- */ .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section); } .section--wash { background: var(--wash); } .section--tight { padding-block: clamp(3rem, 6vw, 4.5rem); } .skip-link { position: absolute; inset-block-start: -100px; inset-inline-start: 1rem; z-index: 999; background: var(--green); color: #fff; padding: .75rem 1.25rem; border-radius: var(--radius-s); transition: inset-block-start .2s var(--ease); } .skip-link:focus { inset-block-start: 1rem; } .sec-head { max-width: 46rem; margin-block-end: clamp(2.5rem, 5vw, 3.5rem); } .sec-head--center { margin-inline: auto; text-align: center; } .eyebrow { display: flex; align-items: center; gap: .7rem; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--green); margin-block-end: 1rem; } .eyebrow::before { content: ""; inline-size: 1.75rem; block-size: 1px; background: var(--green-pale); flex: none; } .sec-head--center .eyebrow { justify-content: center; } .sec-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); } .sec-head .lede { margin-block-start: 1.1rem; font-size: 1.1rem; color: var(--ink-3); max-width: 40rem; } .sec-head--center .lede { margin-inline: auto; } /* --- 4. Logo ------------------------------------------------------------ The clinic system's eye mark paired with a signature-script wordmark. ------------------------------------------------------------------------ */ .logo { display: inline-flex; align-items: center; gap: .95rem; color: var(--ink); line-height: 1; } .logo__mark { inline-size: 34px; block-size: 34px; flex: none; } .logo__word { position: relative; font-family: var(--script); font-size: 2.05rem; font-weight: 400; line-height: 1; white-space: nowrap; direction: ltr; /* the wordmark is always Latin */ unicode-bidi: isolate; /* align-items: center lines up the text BOX, and Sacramento's box is mostly empty ascender space - "Dr. Chassid" has tall D/C/h/d and no descenders, so its ink sat 6.9px above the eye mark's centre. This drops the glyphs onto the mark's optical centre. In em, so it holds at every logo size. (The old padding-block-end here was clearance for the flourish rule that was removed, and it was pushing the text further up.) */ transform: translateY(.12em); } /* The flourish: a hairline that runs through the wordmark and past it. */ .site-head .logo__word { font-size: 1.85rem; } .logo--stack { flex-direction: column; gap: .55rem; } .logo--stack .logo__mark { inline-size: 46px; block-size: 46px; } .logo--stack .logo__word { font-size: 2.6rem; } .logo--light { color: #fff; } /* --- 5. Buttons --------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .85rem 1.7rem; border-radius: 999px; font-size: .975rem; font-weight: 600; letter-spacing: .01em; border: 1px solid transparent; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); white-space: nowrap; } .btn svg { inline-size: 1.05em; block-size: 1.05em; flex: none; } .btn--primary { background: var(--green); color: #fff; box-shadow: 0 1px 2px rgba(10,32,26,.14), 0 8px 20px rgba(15,110,86,.20); } .btn--primary:hover { background: var(--green-deep); transform: translateY(-1px); } .btn--primary:active { transform: translateY(0); } .btn--ghost { background: transparent; color: var(--green); border-color: var(--line); } .btn--ghost:hover { border-color: var(--green-pale); background: var(--wash); } .btn--light { background: #fff; color: var(--green-deep); } .btn--light:hover { background: var(--wash-2); transform: translateY(-1px); } .btn--outline-light { border-color: rgba(255,255,255,.35); color: #fff; } .btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.08); } .btn--sm { padding: .58rem 1.15rem; font-size: .875rem; } .arrow-link { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .95rem; color: var(--green); } .arrow-link .chev { transition: transform .2s var(--ease); } [dir="rtl"] .arrow-link .chev { transform: scaleX(-1); } .arrow-link:hover .chev { transform: translateX(4px); } [dir="rtl"] .arrow-link:hover .chev { transform: scaleX(-1) translateX(4px); } /* --- 6. Top bar + header ------------------------------------------------ */ .topbar { background: var(--dark); color: rgba(255,255,255,.72); font-size: .84rem; } .topbar .shell { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-block-size: 2.75rem; flex-wrap: wrap; } .topbar__facts { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .topbar__fact { display: inline-flex; align-items: center; gap: .45rem; } .topbar__fact svg { inline-size: .95rem; block-size: .95rem; opacity: .7; flex: none; } .topbar a { color: rgba(255,255,255,.82); } .topbar a:hover { color: #fff; } .lang-switch { display: inline-flex; align-items: center; gap: .3rem; } .lang-switch a { padding: .1rem .5rem; border-radius: 999px; font-weight: 600; font-size: .8rem; color: rgba(255,255,255,.6); } .lang-switch a:hover { color: #fff; } .lang-switch a[aria-current="true"] { background: rgba(255,255,255,.14); color: #fff; } .lang-switch .sep { opacity: .3; } .site-head { position: sticky; inset-block-start: 0; z-index: 60; background: rgba(255,255,255,.88); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-block-end: 1px solid transparent; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .site-head.is-stuck { border-block-end-color: var(--line-soft); box-shadow: 0 1px 20px rgba(10,32,26,.05); } .site-head .shell { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-block-size: 4.75rem; } .nav { display: flex; align-items: center; gap: 2rem; } .nav a { position: relative; font-size: .975rem; font-weight: 500; color: var(--ink-2); padding-block: .35rem; transition: color .18s var(--ease); } .nav a::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; inline-size: 0; block-size: 1.5px; background: var(--green-lit); transition: inline-size .22s var(--ease); } .nav a:hover { color: var(--green); } .nav a:hover::after, .nav a.is-active::after { inline-size: 100%; } .nav a.is-active { color: var(--green); } .head-actions { display: flex; align-items: center; gap: .75rem; } .nav-toggle { display: none; inline-size: 2.75rem; block-size: 2.75rem; align-items: center; justify-content: center; border-radius: var(--radius-s); color: var(--ink); } .nav-toggle svg { inline-size: 1.4rem; block-size: 1.4rem; } .nav-toggle .icon-close { display: none; } body.nav-open .nav-toggle .icon-close { display: block; } body.nav-open .nav-toggle .icon-open { display: none; } /* --- 7. Hero ------------------------------------------------------------ */ .hero { position: relative; padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(4rem, 8vw, 6.5rem); background: radial-gradient(120% 90% at 85% 0%, var(--wash) 0%, rgba(243,250,247,0) 62%), var(--paper); overflow: hidden; } .hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; } .hero__kicker { display: inline-flex; align-items: center; gap: .55rem; background: var(--wash-2); color: var(--green-deep); border-radius: 999px; padding: .4rem 1rem; font-size: .84rem; font-weight: 600; letter-spacing: .01em; margin-block-end: 1.5rem; } .hero__kicker .dot { inline-size: .45rem; block-size: .45rem; border-radius: 50%; background: var(--green-lit); flex: none; } .hero h1 { font-size: clamp(2.7rem, 6.2vw, 4.35rem); /* The name is set in the body sans, matching the .sub line under it, rather than in the serif every other heading uses. Assistant ships no 500 instance, so 500 here would silently render as regular 400 and the name would lose its weight against the rest of the hero. */ font-family: var(--sans); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; } .hero h1 .sub { display: block; margin-block-start: .3em; font-size: .385em; font-weight: 400; line-height: 1.35; letter-spacing: -0.005em; color: var(--green); font-family: var(--sans); } .hero__lede { margin-block-start: 1.6rem; font-size: 1.15rem; line-height: 1.8; color: var(--ink-2); max-width: 34rem; } .hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-block-start: 2.25rem; } .hero__note { display: flex; align-items: center; gap: .5rem; margin-block-start: 1.5rem; font-size: .9rem; color: var(--ink-3); } .hero__note svg { inline-size: 1rem; block-size: 1rem; color: var(--green-lit); flex: none; } .hero__media { position: relative; } .hero__frame { position: relative; border-radius: 200px 200px var(--radius) var(--radius); overflow: hidden; box-shadow: var(--shadow-l); aspect-ratio: 4 / 4.6; background: var(--wash-2); } .hero__frame img { inline-size: 100%; block-size: 100%; object-fit: cover; filter: saturate(.86) contrast(1.04) brightness(1.02); } .hero__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,32,26,0) 55%, rgba(9,32,26,.30) 100%); } .hero__badge { position: absolute; inset-block-end: 1.75rem; inset-inline-start: -1.5rem; z-index: 2; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 1rem 1.25rem; box-shadow: var(--shadow-m); display: flex; align-items: center; gap: .85rem; max-inline-size: 15rem; } .hero__badge svg { inline-size: 1.6rem; block-size: 1.6rem; color: var(--green); flex: none; } .hero__badge b { display: block; font-family: var(--serif); font-size: 1.02rem; color: var(--ink); font-weight: 600; } .hero__badge span { font-size: .82rem; line-height: 1.45; color: var(--ink-3); } /* --- 8. Credentials strip ---------------------------------------------- */ .creds { border-block: 1px solid var(--line-soft); background: var(--wash); } .creds__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .creds__item { padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1rem, 2.5vw, 1.75rem); border-inline-start: 1px solid var(--line); text-align: start; } .creds__item:first-child { border-inline-start: 0; } .creds__item svg { inline-size: 1.5rem; block-size: 1.5rem; color: var(--green-lit); margin-block-end: .85rem; } .creds__item b { display: block; font-family: var(--serif); font-size: 1.06rem; font-weight: 600; color: var(--ink); margin-block-end: .3rem; } .creds__item span { font-size: .9rem; line-height: 1.6; color: var(--ink-3); } /* --- 9. About ----------------------------------------------------------- */ .about__grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: start; } .portrait { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--wash-2); border: 1px solid var(--line); } .portrait img { position: absolute; inset: 0; /* covers the card's padding as well */ z-index: 1; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 25%; /* keeps the face high in the frame */ } .about__body p { font-size: 1.1rem; line-height: 1.85; } .about__body p:first-of-type { font-size: 1.28rem; line-height: 1.7; color: var(--ink); font-family: var(--serif); font-weight: 400; } .about__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-block-start: 2.5rem; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .about__fact { background: var(--paper); padding: 1.35rem 1.5rem; } .about__fact b { display: block; font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--green); line-height: 1.1; margin-block-end: .3rem; } .about__fact span { font-size: .88rem; color: var(--ink-3); line-height: 1.5; } .signature { margin-block-start: 2.5rem; padding-block-start: 1.75rem; border-block-start: 1px solid var(--line); display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .signature__name { font-family: var(--script); font-size: 2.2rem; color: var(--ink); line-height: 1; direction: ltr; unicode-bidi: isolate; } .signature__role { font-size: .9rem; color: var(--ink-3); } /* --- 10. Expertise cards ------------------------------------------------ */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.25rem; } .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.85rem 1.75rem; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); border-color: var(--wash-2); } .card__icon { inline-size: 2.85rem; block-size: 2.85rem; border-radius: 10px; background: var(--wash-2); color: var(--green); display: grid; place-items: center; margin-block-end: 1.25rem; } .card__icon svg { inline-size: 1.4rem; block-size: 1.4rem; } .card h3 { font-size: 1.18rem; font-weight: 600; margin-block-end: .6rem; } .card p { font-size: .96rem; line-height: 1.7; color: var(--ink-3); } /* --- 11. Articles ------------------------------------------------------- */ .articles { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.75rem; } .article { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .article:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); } .article__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--wash-2); } .article__img img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .5s var(--ease); filter: saturate(.9); } .article:hover .article__img img { transform: scale(1.045); } .article__body { padding: 1.5rem 1.6rem 1.75rem; display: flex; flex-direction: column; flex: 1; } .article__meta { display: flex; align-items: center; gap: .6rem; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--green); margin-block-end: .75rem; } .article__meta .dot { inline-size: 3px; block-size: 3px; border-radius: 50%; background: var(--green-pale); } .article__meta time { color: var(--ink-3); font-weight: 500; letter-spacing: .04em; } .article h3 { font-size: 1.2rem; font-weight: 600; line-height: 1.35; margin-block-end: .65rem; } .article p { font-size: .95rem; line-height: 1.7; color: var(--ink-3); margin-block-end: 1.25rem; } .article .arrow-link { margin-block-start: auto; } .articles-foot { margin-block-start: 2.75rem; text-align: center; } .article--empty { border-style: dashed; background: var(--wash); display: grid; place-items: center; text-align: center; padding: 3rem 2rem; min-block-size: 16rem; color: var(--ink-3); } .article--empty:hover { transform: none; box-shadow: none; } .article--empty svg { inline-size: 2rem; block-size: 2rem; color: var(--green-pale); margin: 0 auto .9rem; } .article--empty b { display: block; font-family: var(--serif); color: var(--ink-2); margin-block-end: .3rem; } .article--empty span { font-size: .88rem; } /* --- 12. Clinic band (dark) --------------------------------------------- */ .clinic { background: var(--dark); color: rgba(255,255,255,.74); position: relative; overflow: hidden; } .clinic::before { content: ""; position: absolute; inset-block-start: -30%; inset-inline-end: -10%; inline-size: 45rem; block-size: 45rem; background: radial-gradient(circle, rgba(29,158,117,.14) 0%, rgba(29,158,117,0) 68%); pointer-events: none; } .clinic .shell { position: relative; } .clinic h2 { color: #fff; } .clinic .eyebrow { color: var(--green-pale); } .clinic .eyebrow::before { background: rgba(93,202,165,.5); } .clinic__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; } .clinic__list { margin-block-start: 2.25rem; display: grid; gap: 1.5rem; } .clinic__row { display: flex; gap: 1rem; align-items: flex-start; } .clinic__row .ic { inline-size: 2.5rem; block-size: 2.5rem; flex: none; border-radius: 9px; background: rgba(93,202,165,.12); border: 1px solid rgba(93,202,165,.18); color: var(--green-pale); display: grid; place-items: center; } .clinic__row .ic svg { inline-size: 1.15rem; block-size: 1.15rem; } .clinic__row b { display: block; color: #fff; font-family: var(--serif); font-size: 1.02rem; font-weight: 600; margin-block-end: .2rem; } .clinic__row span, .clinic__row a { font-size: .96rem; line-height: 1.65; color: rgba(255,255,255,.7); } .clinic__row a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .clinic__hours { margin: .35rem 0 0; display: grid; gap: .3rem; font-size: .94rem; } .clinic__hours div { display: flex; justify-content: space-between; gap: 1.5rem; max-inline-size: 19rem; } .clinic__hours dt { color: rgba(255,255,255,.55); } .clinic__hours dd { margin: 0; color: rgba(255,255,255,.85); font-variant-numeric: tabular-nums; } .clinic__cta { margin-block-start: 2.5rem; display: flex; gap: .85rem; flex-wrap: wrap; } .clinic__media { border-radius: var(--radius); overflow: hidden; /* The photo's own ratio, so cover() crops nothing and the frame lands level with the details column beside it. */ aspect-ratio: 1100 / 1463; box-shadow: var(--shadow-l); border: 1px solid rgba(255,255,255,.09); } .clinic__media img { inline-size: 100%; block-size: 100%; object-fit: cover; /* The real room is already warm and low-lit; the stock photo's heavier grade would have muddied it. */ filter: saturate(.94) brightness(.99); } /* --- 13. Contact / booking ---------------------------------------------- */ .contact__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: start; } .contact__aside .lede { font-size: 1.08rem; color: var(--ink-2); } .contact__ways { margin-block-start: 2rem; display: grid; gap: 1.1rem; } .contact__way { display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--paper); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .contact__way:hover { border-color: var(--green-pale); box-shadow: var(--shadow-s); } .contact__way .ic { inline-size: 2.25rem; block-size: 2.25rem; flex: none; border-radius: 8px; background: var(--wash-2); color: var(--green); display: grid; place-items: center; } .contact__way .ic svg { inline-size: 1.05rem; block-size: 1.05rem; } .contact__way b { display: block; font-size: .97rem; color: var(--ink); font-weight: 600; } .contact__way span { font-size: .9rem; color: var(--ink-3); } .form { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.75rem, 3.5vw, 2.5rem); box-shadow: var(--shadow-s); } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } .field { margin-block-end: 1.1rem; } .field label { display: block; font-size: .875rem; font-weight: 600; color: var(--ink-2); margin-block-end: .45rem; } .field label .req { color: #c0392b; margin-inline-start: .15rem; } .field input, .field textarea, .field select { inline-size: 100%; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--paper); color: var(--ink); font-size: 1rem; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); } .field textarea { min-block-size: 8rem; resize: vertical; line-height: 1.7; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--green-lit); box-shadow: 0 0 0 3px rgba(29,158,117,.14); } .field input::placeholder, .field textarea::placeholder { color: #a9c2ba; } .segmented { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .35rem; background: var(--wash); border: 1px solid var(--line); border-radius: 999px; margin-block-end: 1.4rem; } .segmented input { position: absolute; opacity: 0; pointer-events: none; } .segmented label { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .65rem 1rem; border-radius: 999px; font-size: .93rem; font-weight: 600; color: var(--ink-3); cursor: pointer; margin: 0; transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); } .segmented label svg { inline-size: 1.05rem; block-size: 1.05rem; } .segmented input:checked + label { background: var(--paper); color: var(--green); box-shadow: var(--shadow-s); } .segmented input:focus-visible + label { outline: 2px solid var(--green-lit); outline-offset: 2px; } .form__consent { display: flex; gap: .65rem; align-items: flex-start; font-size: .85rem; line-height: 1.6; color: var(--ink-3); margin-block-end: 1.4rem; } .form__consent input { inline-size: 1.05rem; block-size: 1.05rem; margin-block-start: .2rem; flex: none; accent-color: var(--green); } .form .btn { inline-size: 100%; } .form__note { margin-block-start: 1rem; font-size: .82rem; color: var(--ink-3); text-align: center; line-height: 1.6; } .form__status { margin-block-start: 1rem; padding: .9rem 1.1rem; border-radius: var(--radius-s); font-size: .93rem; display: none; } .form__status.is-ok { display: block; background: var(--wash-2); color: var(--green-deep); border: 1px solid var(--green-pale); } .form__status.is-err { display: block; background: #fdf0ee; color: #97392c; border: 1px solid #f3c8c0; } /* --- 14. Footer --------------------------------------------------------- */ .site-foot { background: var(--dark-2); color: rgba(255,255,255,.6); font-size: .93rem; /* Bottom padding clears the fixed chat button, which otherwise sits on top of the credit line once the page is scrolled to the end. */ padding-block: clamp(3rem, 6vw, 4.5rem) 6.5rem; } .foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); padding-block-end: 2.5rem; border-block-end: 1px solid rgba(255,255,255,.09); } .foot__about { max-inline-size: 26rem; } .foot__about p { margin-block-start: 1.25rem; line-height: 1.75; } .site-foot h4 { color: #fff; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-family: var(--sans); font-weight: 700; margin-block-end: 1.1rem; } .site-foot ul { display: grid; gap: .65rem; } .site-foot a { color: rgba(255,255,255,.62); } .site-foot a:hover { color: #fff; } .foot__bottom { padding-block-start: 1.75rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .84rem; color: rgba(255,255,255,.42); } .foot__credit a { color: rgba(255,255,255,.72); border-block-end: 1px solid rgba(255,255,255,.22); padding-block-end: 1px; transition: color .18s var(--ease), border-color .18s var(--ease); } .foot__credit a:hover { color: #fff; border-block-end-color: rgba(255,255,255,.65); } .foot__disclaimer { margin-block-start: 1.5rem; font-size: .8rem; line-height: 1.7; color: rgba(255,255,255,.38); max-inline-size: 55rem; } /* --- 15. AI assistant --------------------------------------------------- */ .bot-fab { position: fixed; inset-block-end: 1.5rem; inset-inline-end: 1.5rem; z-index: 80; display: inline-flex; align-items: center; gap: .6rem; padding: .8rem 1.35rem; border-radius: 999px; background: var(--green); color: #fff; font-size: .95rem; font-weight: 600; box-shadow: 0 4px 12px rgba(10,32,26,.18), 0 14px 40px rgba(15,110,86,.28); transition: transform .22s var(--ease), background-color .22s var(--ease), opacity .2s var(--ease); } .bot-fab:hover { transform: translateY(-2px); background: var(--green-deep); } .bot-fab svg { inline-size: 1.35rem; block-size: 1.35rem; flex: none; } body.bot-open .bot-fab { opacity: 0; pointer-events: none; transform: scale(.9); } .bot { position: fixed; inset-block-end: 1.5rem; inset-inline-end: 1.5rem; z-index: 90; inline-size: min(24rem, calc(100vw - 2rem)); block-size: min(35rem, calc(100vh - 3rem)); display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-l); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.97); transition: opacity .22s var(--ease), transform .28s var(--ease), visibility .28s; } body.bot-open .bot { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .bot__head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.15rem; background: var(--dark); color: #fff; flex: none; } .bot__avatar { inline-size: 2.35rem; block-size: 2.35rem; flex: none; border-radius: 50%; background: rgba(93,202,165,.16); border: 1px solid rgba(93,202,165,.28); display: grid; place-items: center; } .bot__avatar svg { inline-size: 1.25rem; block-size: 1.25rem; color: var(--green-pale); } .bot__title { flex: 1; min-inline-size: 0; } .bot__title b { display: block; font-size: .97rem; font-weight: 600; font-family: var(--serif); } .bot__title span { display: flex; align-items: center; gap: .35rem; font-size: .78rem; color: rgba(255,255,255,.6); } .bot__title .online { inline-size: .4rem; block-size: .4rem; border-radius: 50%; background: var(--green-pale); } .bot__close { inline-size: 2rem; block-size: 2rem; border-radius: 8px; color: rgba(255,255,255,.7); display: grid; place-items: center; transition: background-color .18s var(--ease), color .18s var(--ease); } .bot__close:hover { background: rgba(255,255,255,.1); color: #fff; } .bot__close svg { inline-size: 1.05rem; block-size: 1.05rem; } .bot__log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1.15rem; display: flex; flex-direction: column; gap: .8rem; background: var(--wash); scrollbar-width: thin; } .bot__log::-webkit-scrollbar { inline-size: 6px; } .bot__log::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; } .msg { max-inline-size: 84%; padding: .7rem 1rem; border-radius: 14px; font-size: .94rem; line-height: 1.65; animation: msg-in .28s var(--ease) both; } @keyframes msg-in { from { opacity: 0; transform: translateY(6px); } } .msg--bot { align-self: flex-start; background: var(--paper); border: 1px solid var(--line); border-end-start-radius: 4px; color: var(--ink-2); } .msg--me { align-self: flex-end; background: var(--green); color: #fff; border-end-end-radius: 4px; } .msg a { color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .msg--me a { color: #fff; } .msg strong { color: var(--ink); font-weight: 600; } .msg--me strong { color: #fff; } .msg--typing { display: flex; gap: .28rem; align-items: center; padding: .95rem 1rem; } .msg--typing i { inline-size: .42rem; block-size: .42rem; border-radius: 50%; background: var(--green-pale); animation: blink 1.3s infinite; } .msg--typing i:nth-child(2) { animation-delay: .18s; } .msg--typing i:nth-child(3) { animation-delay: .36s; } @keyframes blink { 0%,60%,100% { opacity: .3; } 30% { opacity: 1; } } .bot__chips { display: flex; gap: .45rem; padding: .75rem 1.15rem; overflow-x: auto; background: var(--paper); border-block-start: 1px solid var(--line-soft); flex: none; scrollbar-width: none; } .bot__chips::-webkit-scrollbar { display: none; } .bot__chips button { white-space: nowrap; padding: .42rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-size: .84rem; font-weight: 500; color: var(--green); transition: background-color .18s var(--ease), border-color .18s var(--ease); } .bot__chips button:hover { background: var(--wash-2); border-color: var(--green-pale); } .bot__form { display: flex; gap: .55rem; padding: .85rem 1.15rem 1rem; background: var(--paper); border-block-start: 1px solid var(--line-soft); flex: none; align-items: flex-end; } .bot__form textarea { flex: 1; min-inline-size: 0; min-block-size: 2.6rem; max-block-size: 7rem; padding: .6rem .9rem; border: 1px solid var(--line); border-radius: 14px; resize: none; font-size: .94rem; line-height: 1.5; background: var(--wash); transition: border-color .18s var(--ease), box-shadow .18s var(--ease); } .bot__form textarea:focus { outline: none; border-color: var(--green-lit); background: var(--paper); box-shadow: 0 0 0 3px rgba(29,158,117,.12); } .bot__send { inline-size: 2.6rem; block-size: 2.6rem; flex: none; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; transition: background-color .18s var(--ease), transform .18s var(--ease); } .bot__send:hover { background: var(--green-deep); transform: scale(1.05); } .bot__send svg { inline-size: 1.1rem; block-size: 1.1rem; } [dir="rtl"] .bot__send svg { transform: scaleX(-1); } .bot__legal { padding: 0 1.15rem .85rem; font-size: .72rem; line-height: 1.5; color: var(--ink-3); text-align: center; background: var(--paper); flex: none; } /* --- 16. Scroll reveal -------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(20px); } .reveal.is-in { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); } /* --- 17. Responsive ----------------------------------------------------- */ @media (max-width: 1000px) { .hero__grid { grid-template-columns: 1fr; } .hero__media { max-inline-size: 26rem; margin-inline: auto; } .hero__badge { inset-inline-start: 0; } .about__grid { grid-template-columns: 1fr; } .portrait { max-inline-size: 22rem; } .clinic__grid { grid-template-columns: 1fr; } .contact__grid{ grid-template-columns: 1fr; } .creds__grid { grid-template-columns: 1fr 1fr; } .creds__item:nth-child(odd) { border-inline-start: 0; } .creds__item:nth-child(n+3) { border-block-start: 1px solid var(--line); } .foot__grid { grid-template-columns: 1fr 1fr; } .foot__about { grid-column: 1 / -1; } } @media (max-width: 760px) { .nav-toggle { display: inline-flex; } /* Must stay unset: a backdrop-filter here would become the containing block for the position:fixed menu below and collapse it. */ .site-head { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); } .nav { position: fixed; inset-block-start: var(--nav-top, 4.75rem); inset-inline: 0; inset-block-end: 0; z-index: 55; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); padding: 1.5rem var(--gutter) 2rem; border-block-start: 1px solid var(--line-soft); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; overflow-y: auto; } body.nav-open .nav { opacity: 1; visibility: visible; transform: none; } html.nav-open, body.nav-open { overflow: hidden; } .nav a { padding-block: 1rem; border-block-end: 1px solid var(--line-soft); font-size: 1.08rem; } .nav a::after { display: none; } .head-actions .btn { display: none; } /* The top bar keeps all three facts on a phone instead of dropping the address and the by-arrangement note. `display: contents` dissolves the .topbar__facts wrapper so its three spans become flex items of .shell itself, which lets the language switch sit on the first row beside the phone number and the other two facts wrap onto their own line. The div carries no semantics, so nothing is lost from the accessibility tree. */ .topbar { font-size: .78rem; } .topbar .shell { min-block-size: 0; padding-block: .6rem; justify-content: flex-start; column-gap: 1.05rem; row-gap: .4rem; } .topbar__facts { display: contents; } .topbar__fact svg { inline-size: .85rem; block-size: .85rem; } .topbar__fact--wrap { order: 3; } .lang-switch { order: 2; margin-inline-start: auto; } .hero h1 { font-size: clamp(2.35rem, 9vw, 3rem); } .form__row { grid-template-columns: 1fr; gap: 0; } .creds__grid { grid-template-columns: 1fr; } .creds__item { border-inline-start: 0; } .creds__item + .creds__item { border-block-start: 1px solid var(--line); } .foot__grid { grid-template-columns: 1fr; } .about__facts { grid-template-columns: 1fr; } .signature__name { font-size: 1.9rem; } .bot { inset: .75rem; inline-size: auto; block-size: auto; border-radius: 16px; } .bot-fab { inset-block-end: 1rem; inset-inline-end: 1rem; border-radius: 50%; inline-size: 3.4rem; block-size: 3.4rem; padding: 0; justify-content: center; } .bot-fab .label { display: none; } } /* --- 18. Motion & print ------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms; animation-iteration-count: 1; transition-duration: .001ms; } .reveal { opacity: 1; transform: none; } } @media print { .site-head, .topbar, .bot, .bot-fab, .form, .nav-toggle { display: none; } body { color: #000; } .clinic, .site-foot { background: #fff; color: #000; } .clinic h2, .site-foot h4 { color: #000; } } /* --- 19. Logo mark colour ---------------------------------------------- The eye keeps the clinic system's green on light ground and goes solid white on the dark footer / assistant header. ------------------------------------------------------------------------ */ .logo__mark { color: var(--green-lit); } .logo--light .logo__mark { color: #fff; } /* --- 20. FAQ ------------------------------------------------------------ Real, visible Q&A in the page. Search engines read it for rich results and language models quote it directly, so it must be genuine content — not a keyword dump. ------------------------------------------------------------------------ */ .faq { display: grid; gap: .75rem; max-inline-size: 52rem; margin-inline: auto; } .faq details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .faq details[open] { border-color: var(--green-pale); box-shadow: var(--shadow-s); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.5rem; cursor: pointer; font-family: var(--serif); font-size: 1.06rem; font-weight: 600; color: var(--ink); line-height: 1.45; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::marker { content: ""; } .faq summary:hover { color: var(--green); } .faq summary .ico { flex: none; inline-size: 1.65rem; block-size: 1.65rem; border-radius: 50%; background: var(--wash-2); color: var(--green); display: grid; place-items: center; transition: transform .25s var(--ease), background-color .2s var(--ease); } .faq summary .ico svg { inline-size: .85rem; block-size: .85rem; } .faq details[open] summary .ico { transform: rotate(180deg); background: var(--green-pale); } .faq__answer { padding: 0 1.5rem 1.4rem; font-size: 1rem; line-height: 1.8; color: var(--ink-3); } .faq__answer p + p { margin-block-start: .9rem; } .faq__answer strong { color: var(--ink-2); font-weight: 600; } .faq__answer a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } @media (prefers-reduced-motion: no-preference) { .faq details[open] .faq__answer { animation: faq-open .28s var(--ease) both; } } @keyframes faq-open { from { opacity: 0; transform: translateY(-4px); } }