/* Project-specific overrides layered on top of the v1 theme CSS. Kept separate so the original theme files stay untouched. */ /* ── Brand palette ───────────────────────────────────────────────────────── The v1 theme's accent (buttons, headings, links — 180+ uses) is teal #3cc1cb; that is the brand colour. The template also shipped two off-brand purple surfaces (.extra-info #3a0939, .mobile-nav #80427e) that clashed — they are re-based onto the teal ramp below so the whole UI is one palette. */ :root { --brand: #3cc1cb; /* primary teal — fills, accents (== --color-primary-500) */ --brand-strong: #1a9aa4; /* darker teal — grips, hover, small text on white */ --brand-dark: #0f5860; /* deep teal — dark panels */ --brand-deep: #0b3d43; /* deepest teal — offcanvas / mobile menu bg */ --ink: #1b2a2b; /* body text */ /* ── Design token scale (brand-color-token-system.md) ────────────────────── The v1 theme hardcodes #3cc1cb in ~180 places, so these tokens don't restyle the theme; they're a documented ramp for NEW custom.css work (hover/border/subtle surfaces) that needs a shade off the base brand. --brand* above stay authoritative for existing rules. */ --color-primary-50: #effbfc; --color-primary-100: #d7f4f6; --color-primary-200: #afe8ec; --color-primary-300: #7ad7dd; --color-primary-400: #58cbd3; --color-primary-500: #3cc1cb; /* base brand */ --color-primary-600: #249da7; --color-primary-700: #217d86; /* accessible teal for white text (4.84:1) */ --color-primary-800: #22646b; --color-primary-900: #21545a; --color-primary-950: #10383d; --color-secondary-500: #34739d; --color-secondary-900: #1b3449; --color-secondary-950: #0b1f30; --color-neutral-0: #ffffff; --color-neutral-50: #f7fafa; --color-neutral-100: #edf3f4; --color-neutral-200: #d9e4e6; --color-neutral-300: #bbcbcd; --color-neutral-400: #8ea4a7; --color-neutral-500: #6f868a; --color-neutral-600: #566b6f; --color-neutral-700: #405256; --color-neutral-800: #29393c; --color-neutral-900: #162629; /* Accessible text colour to sit ON the bright brand fill (7.85:1 vs white's 2.17:1). */ --color-text-on-brand: #0b1f22; /* ── Radius scale (DESIGN_SYSTEM.md §4) — formalises the coherent subset. ── */ --radius-sm: 8px; --radius-md: 10px; /* theme-dominant: buttons, panels */ --radius-lg: 16px; /* feature / service cards */ --radius-xl: 20px; /* modals, hero panels */ --radius-pill: 999px; --radius-circle: 50%; /* ── Shadow elevation (§5) — brand-teal tinted, 3 tiers. ── */ --shadow-1: 0 2px 8px rgba(11,61,67,.08); --shadow-2: 0 12px 24px rgba(11,61,67,.10); --shadow-3: 0 24px 60px rgba(11,61,67,.16); /* ── Spacing scale (§3) — 8px based; use for new custom work. ── */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 40px; --space-7: 56px; --space-8: 72px; --space-9: 96px; --space-10: 128px; /* ── Border (§6). ── */ --border-width: 1px; --border-color: #e2e8ea; /* ── Semantic colours (§1) — none existed at :root before. ── */ --color-success: #12b76a; --color-success-subtle: #ecfdf3; --color-success-border: #b6e0c4; --color-error: #f04438; --color-error-subtle: #fef3f2; --color-error-border: #f3c2c2; --color-warning: #f79009; --color-warning-subtle: #fffaeb; --color-info: #2e90fa; --color-info-subtle: #eff8ff; /* Shared uppercase-label letter-spacing (§2). */ --tracking-label: .14em; } /* Re-brand the two off-brand purple surfaces to the deep-teal end of the ramp. */ .extra-info { background: var(--brand-deep); } .mobile-nav { background: var(--brand-deep); } /* ── Off-brand colour re-brand (audit: DESIGN_SYSTEM.md §1) ──────────────── The theme's base a/button colour and .theme-overlay are an off-brand blue (#1696e7). Re-point to the teal palette. Specific link rules still win. */ a, button { color: var(--color-primary-700); } .theme-overlay::before { background: var(--brand-deep); } /* ── Focus indicator (a11y, WCAG 2.4.7 — DESIGN_SYSTEM.md §8) ────────────── The theme resets outline:none on all interactive elements with NO replacement, leaving keyboard users with zero visible focus. Restore a visible ring on keyboard focus only (:focus-visible), !important to beat the theme's a:focus{outline:none}. Mouse clicks stay ring-free. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .nice-select:focus-visible, .accordion-button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brand-strong) !important; outline-offset: 2px; border-radius: 3px; } /* ── Button contrast (a11y) ──────────────────────────────────────────────── The primary CTA (.btn-1) shipped as bright teal #3cc1cb + white text — only 2.17:1, failing WCAG AA. Keep the vibrant brand fill but switch the label to dark ink (7.85:1). Hover (white fill) gets the darker teal so its text also passes. Theme uses !important, so we match it. */ .btn-1 { color: var(--color-text-on-brand) !important; } .btn-1:hover { color: var(--color-primary-700) !important; } /* One corner radius across the button family (DESIGN_SYSTEM.md §7) — these are already ~10px in the theme; tokenising keeps them in sync with the system. */ .generic-btn, .btn-1, .btn-2, .theme-sm-btn { border-radius: var(--radius-md); } /* .btn-2 shipped with NO hover of its own — it depended on always being paired with .appoint-btn. Give the standalone case an explicit hover (leave the .appoint-btn combo's own hover untouched). */ .btn-2:not(.appoint-btn):hover { background-color: var(--brand-dark); color: #fff; } /* ── Scroll reveal (paired with /js/reveal.js) ───────────────────────────── The .reveal class is added by JS, so no-JS keeps everything visible. Motion is TIERED by element weight rather than one distance for everything — small text barely lifts, cards lift a little, big blocks travel further, and photos scale down into place instead of sliding. That variation is what makes the sequence read as composed instead of mechanical. Easing is an expo-out curve: fast start, long soft settle. Implemented with ANIMATION, not transition: many components already own their `transition` for hover (e.g. .service__box lifts in .28s), and a reveal transition on the same property would either lose to it or slow the hover down. A keyframe animation runs once, then hands the element back to its own transition untouched. Fill-mode stays `none` and `.is-visible` declares the same end state, so nothing flashes when the animation finishes. */ .reveal { opacity: 0; } .reveal.is-visible { opacity: 1; transform: none; will-change: auto; } @keyframes rv-up-sm { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes rv-up-md { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes rv-up-lg { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } } @keyframes rv-zoom { from { opacity: 0; transform: scale(1.045); } to { opacity: 1; transform: none; } } /* fill-mode `backwards` is REQUIRED, not cosmetic: the stagger sets an animation-delay, and without a backwards fill the element paints its `.is-visible` end state (opacity 1) during that delay, then snaps to the keyframe's `from` (opacity 0) the moment the animation starts — a visible flash. `backwards` holds the `from` state through the delay. It does NOT persist after the animation, so component hover transforms still work. */ /* Tier 1 — small type (eyebrows, labels, FAQ rows): a whisper of movement. */ .reveal.reveal-sm.is-visible { animation: rv-up-sm .6s cubic-bezier(.16,1,.3,1) backwards; } /* Tier 2 — cards and text blocks (default weight). */ .reveal.reveal-md.is-visible { animation: rv-up-md .75s cubic-bezier(.16,1,.3,1) backwards; } /* Tier 3 — large panels: more travel, longer settle. */ .reveal.reveal-lg.is-visible { animation: rv-up-lg .9s cubic-bezier(.16,1,.3,1) backwards; } /* Photos: settle from a slight over-scale (no slide) — reads as a lens focusing. */ .reveal.reveal-img.is-visible { animation: rv-zoom .95s cubic-bezier(.16,1,.3,1) backwards; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; animation: none !important; } } /* Unify container width across the whole site (header top bar, nav, all content sections, hero) so everything aligns to one centred column. */ .container, .container-3 { max-width: 1200px; } /* Home "about" section: drop the theme's decorative teal box + baked-in "15+ İllik təcrübə" label — it's absolutely positioned for the theme's wider container (so it breaks at our 1200 width) and the "15+" claim is inaccurate. Two clean images + text remain. */ .about-area__wrapper::before, .about-area__wrapper::after { display: none; } /* Robust side-by-side images (the theme's float rules break at our container). */ .about-area-1 .about-area__wrapper { display: flex; gap: 20px; align-items: flex-start; } .about-area-1 .about__img { width: 50%; float: none; margin: 0; } .about-area-1 .about__img img { width: 100%; height: auto; display: block; } /* Reviews carousel: prev/next arrows instead of the numbered 1·2·3 dots. */ .appoint__active{position:relative} .appoint__active .slick-dots{display:none !important} .appoint__active .appoint-nav{ position:absolute; bottom:-4px; width:46px; height:46px; border-radius:50%; border:0; background:#fff; color:var(--brand-strong,#1a9aa4); font-size:15px; cursor:pointer; box-shadow:var(--shadow-1); z-index:6; display:inline-flex; align-items:center; justify-content:center; transition:background-color .2s, color .2s, transform .2s; } .appoint__active .appoint-nav:hover{background:var(--brand-strong,#1a9aa4); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-2)} .appoint__active .appoint-nav::before{display:none} .appoint__active .appoint-nav{bottom:22px} .appoint__active .appoint-prev{right:58px; left:auto} .appoint__active .appoint-next{right:0; left:auto} /* Home services — premium equal-height cards, aligned titles + descriptions. */ .service-area-1 .service__box{ height:100%; display:flex; flex-direction:column; align-items:center; background:#fff; border:var(--border-width) solid var(--border-color); border-radius:var(--radius-lg); padding:var(--space-6) 26px var(--space-5); transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease; } .service-area-1 .service__box:hover{ transform:translateY(-8px); box-shadow:var(--shadow-2); border-color:rgba(26,154,164,.42); } .service-area-1 .service__icon{margin-bottom:20px} .service-area-1 .service__icon img{height:62px; width:auto} .service-area-1 .service__text{display:flex; flex-direction:column; flex:1; width:100%} .service-area-1 .service__text h3{ min-height:2.5em; display:flex; align-items:center; justify-content:center; margin:0 0 14px; font-size:20px; line-height:1.2; } .service-area-1 .service__text p{margin:0; color:#59696a; font-size:15px; line-height:1.62} /* Card is a link to the matching surgery detail — reset anchor styling and add a "read more" affordance pinned to the bottom (reveals fully on hover). */ .service-area-1 a.service__box{text-decoration:none; color:inherit} .service-area-1 a.service__box:hover{color:inherit} .service-area-1 .service__text h3{color:var(--ink)} /* Review author name switched h5→h3 (heading order); keep its small size, not the big type-scale h3. */ .testimonial__text-4 h3{ font-size:20px; line-height:1; margin-bottom:0; font-weight:600; color:var(--ink); } .service-area-1 .service__more{display:inline-flex; align-self:center; align-items:center; gap:7px; margin-top:auto; padding-top:18px; font-size:14px; font-weight:600; color:var(--color-primary-700); transition:gap .25s} .service-area-1 a.service__box:hover .service__more{gap:11px} /* Keep the main nav on a single line inside the 1200 container: tighter logo and item spacing (theme default is a very wide 50px gap per item). */ .header-bottom .logo img { width: 116px; } .header-nav.header-nav-2 > nav > ul { white-space: nowrap; } /* Direct children only — must NOT leak into .submenu li a, or the dropdown items get uneven left indent (first item 24px, the rest 30px). */ .header-nav.header-nav-2 > nav > ul > li > a { padding-left: 30px; } .header-nav.header-nav-2 > nav > ul > li:first-child > a { padding-left: 24px; } /* Heading font fix: the theme's heading font "Prata" has NO Azerbaijani letters (ə ü ğ ş …), so those glyphs fell back to a mismatched system serif — visibly the wrong size/style. Playfair Display (self-hosted) is the same elegant high-contrast serif but with full Latin-ext + Cyrillic coverage, so AZ & RU render evenly. Applied to every heading. */ h1, h2, h3, h4, h5, h6, .generic-title h4, .slider-text h2, .breadcrumb__title h1, .features__tab ul li button { font-family: 'Playfair Display', serif; } /* ── Modular type scale (DESIGN_SYSTEM.md §2) ────────────────────────────── The theme had 20+ ad-hoc heading sizes with no shared ratio and hand-tuned per-breakpoint tables. Collapse the BARE heading elements (which is what our section titles actually use —

inside .generic-title,

in the page banner) onto one fluid ~1.25 scale via clamp(), so equal-rank headings match across breakpoints without separate media queries. Playfair 400–700 are self-hosted (no 800 → avoid faux-bold). Component overrides (.hero__title, .service__text h4, footer h4.title) are more specific and keep their sizes. */ h1 { font-size: clamp(30px, 4.0vw, 52px); line-height: 1.12; font-weight: 700; } h2 { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.15; font-weight: 600; } h3 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; font-weight: 600; } h4 { font-size: clamp(19px, 1.4vw, 22px); line-height: 1.25; font-weight: 600; } h5 { font-size: 18px; line-height: 1.3; font-weight: 600; } h6 { font-size: 16px; line-height: 1.35; font-weight: 600; } /* Body rhythm: theme set a fixed line-height:30px on

(~1.9 at 16px, too loose). Use a unitless ratio so it scales and reads tighter/standard. */ p { line-height: 1.6; } /* Shared uppercase-label treatment (eyebrows above section titles). */ .generic-title span { letter-spacing: var(--tracking-label); text-transform: uppercase; } /* Eyebrow colour: theme's #3cc1cb on white is only 2.16:1 (WCAG fail). Darken to an AA-safe teal, but leave the white eyebrows on teal panels (.text-white). */ .generic-title span:not(.text-white) { color: var(--color-primary-700); } /* Visually-hidden but screen-reader accessible (single H1 for SEO/a11y). */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Accessibility skip-link: hidden off-screen until keyboard-focused. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; padding: 10px 16px; background: var(--brand-dark); color: #fff; border-radius: 0 0 6px 0; text-decoration: none; } .skip-link:focus { left: 0; } /* Active language pill in the header/mobile switcher. */ .header-left.lang a.active span, .mobile-lang a.active span { font-weight: 700; text-decoration: underline; } /* Top bar: unify the two off-palette colours (lang #2b3137 dark, social #9f9387 tan) onto ONE neutral, with brand teal on hover — so the language switcher and social icons read as one consistent row. */ .header-top .lang a, .header-top .header-social a { color: var(--color-neutral-700); } .header-top .lang a:hover, .header-top .header-social a:hover, .header-top .lang a.active { color: var(--brand-strong); } /* About page (biography): the theme only constrains .about__photo img width below 1200px, so on wide screens the natural-size photo overflows its column and slides under the bio text (the text then reads "on top of" the image). Constrain it at all widths and give the bio comfortable line spacing. */ .about-area-2 .about__photo img { width: 100%; height: auto; display: block; border-radius: 12px; } .about-area-2 .about__text-4 { font-size: 16px; line-height: 1.7; } .about-area-2 .about__text-4 p.desc { margin-bottom: 14px; } /* Desktop offcanvas toggle (fa-bars) styled as an OUTLINE control so it pairs visually with the solid "Ələqə" button beside it (same height, radius, teal). Reads as the secondary counterpart to the primary CTA instead of a stray bare icon. */ /* Desktop offcanvas toggle (opens the .extra-info side panel: logo + contact info + socials) — kept as a proper outline control paired with the CTA. The header-right column is narrow, so: (a) flex-shrink:0 stops it collapsing to a sliver, (b) the CTA + gap are tightened so both fit on one row. */ .header-right { gap: 12px !important; flex-wrap: nowrap; } .header-right .generic-btn.btn-1 { display: inline-flex; align-items: center; height: 48px; padding: 0 22px; font-size: 15px; } /* Desktop only (≥992px): the theme keeps .info-bar as .d-none below lg and shows the separate .mobile-toggle-bar there — so this MUST be media-scoped, otherwise !important would override .d-none and leak the desktop toggle onto mobile (showing two hamburgers). */ @media (min-width: 992px) { .info__toggle-btn.info-bar { display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 auto; width: 48px !important; height: 48px; padding: 0; line-height: 1; border: 2px solid var(--color-primary-700); border-radius: var(--radius-md); color: var(--color-primary-700); font-size: 17px; transition: background-color .2s, color .2s, border-color .2s; } .info__toggle-btn.info-bar:hover { background: var(--color-primary-50); color: var(--color-primary-700); } /* Draw the 3 bars in pure CSS instead of the fa-bars glyph: the light-weight (fal, 300) font strokes render at uneven thickness at this small size. One 2px bar + two box-shadow bars = three IDENTICAL 2px lines in currentColor. */ .info__toggle-btn.info-bar i { font-size: 0 !important; position: relative; width: 20px; height: 2px; } .info__toggle-btn.info-bar i::before { content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 2px; background: currentColor; border-radius: 1px; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; } } /* Make dropdown submenu usable on hover (theme ships the styles; ensure display). */ .header-nav ul li.has-dropdown:hover > ul.submenu { visibility: visible; opacity: 1; } /* ── Inner-page breadcrumb banner: shrink the oversized 500px hero ───────── The theme's .breadcrumb__height is 500px (desktop) with a mt-150 push, so every inner page opens with a huge banner. Trim to a tidy ~300px and drop the big top margin (align-items-center already centres the title). */ /* The header is an absolute overlay (~158px tall on desktop) sitting ON TOP of this banner, so the title must be pushed clear of it. Use top padding for the header clearance (not vertical centering, which put the title behind the nav) plus a small bottom padding — giving a compact banner with the title below the nav. */ .breadcrumb-area { align-items: flex-start !important; padding-top: 190px; padding-bottom: 52px; } .breadcrumb__height { min-height: 0 !important; } .breadcrumb-area .breadcrumb__text { margin-top: 0 !important; } @media (max-width: 991px) { .breadcrumb-area { padding-top: 145px; padding-bottom: 38px; } } /* ── Certificates gallery: uniform tiles, whole cert visible, full-tile click. Theme rendered images at their natural height (ragged rows). Use equal-size tiles with object-fit:contain (documents aren't cropped), and make the whole tile the lightbox trigger. Click still opens the original via magnific. */ .about-area-new .gallery__img { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 300px; padding: 12px; background: var(--color-neutral-50); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; } .about-area-new .gallery__img img { width: auto !important; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } /* Full-tile click target + centred zoom icon (was a tiny centred point). */ .about-area-new .gallery__img a.popup-image { position: absolute; inset: 0; left: 0; top: 0; transform: none; display: flex; align-items: center; justify-content: center; font-size: 26px; } .about-area-new .gallery__img { border-radius: var(--radius-md); } /* ── Treatment / surgery detail body — premium, readable typography ───────── Content is plain text → richtext (

,

for "…:" lines,