/* ========================================================= MEDCARE-THEME — design tokens Retint by editing the 6 color tokens below (--primary/-dark/-light, --red/-dark, --purple, --gold) — every component derives from these, nothing else in this file needs to change for a new brand's palette. See ~/.claude/skills/medcare-theme/SKILL.md for the full checklist. ========================================================= */ :root { --primary: #155d40; --primary-dark: #0d3d2a; --primary-light: #4a9174; --red: #d9432f; --red-dark: #b23222; --purple: #6a3fa0; --gold: #d99a00; --ink: #1c2430; --ink-soft: #5b6472; --bg: #f7f9fc; --bg-alt: #eef2fb; --bg-pink: #fdf1f3; --white: #ffffff; --border: #e2e8f5; --shadow-sm: 0 4px 14px rgba(14, 38, 87, .08); --shadow-md: 0 16px 36px rgba(14, 38, 87, .14); --radius: 18px; --radius-sm: 10px; --header-h: 78px; --font-head: 'Poppins', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', sans-serif; } /* Poppins/Inter have no Tamil glyphs — swap both font tokens for Noto Sans Tamil when Tamil is active (main.js sets ). Every heading/body/button/nav selector already reads its font from these two vars, so this one rule re-fonts the whole page. font-size:92% compensates for a real metrics difference: Noto Sans Tamil's glyph height runs ~8% taller than Inter's at an identical declared font-size, and every font-size in this stylesheet is in rem — without this, Tamil text reads visibly bigger/bulkier than the English version everywhere at once (confirmed and fixed the same way on murugan-skin-clinic; see that project's CLAUDE.md for the measurement). */ html[lang="ta"] { --font-head: 'Noto Sans Tamil', 'Inter', sans-serif; --font-body: 'Noto Sans Tamil', 'Inter', sans-serif; font-size: 92%; } html.lang-pending body { visibility: hidden; } * { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; /* overflow-x:clip, not hidden — clip never establishes a scroll container, so it doesn't hijack position:sticky's containing-block search. `hidden` does: per spec, setting only overflow-x forces the other axis to auto too, which made body a scroll container and broke the sticky header (it scrolled away with the page instead of sticking to the viewport — confirmed via getBoundingClientRect() after a scroll, not visible from a static screenshot). html keeps overflow-x:hidden, which is fine since root-element overflow propagates to the viewport instead of creating this problem. */ overflow-x: clip; width: 100%; position: relative; } h1, h2, h3, h4, h5 { font-family: var(--font-head); color: var(--primary-dark); margin: 0 0 .5em; line-height: 1.2; } p { line-height: 1.75; color: var(--ink-soft); margin: 0 0 1em; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } img { max-width: 100%; display: block; } .container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; } .ic { width: 1.1em; height: 1.1em; fill: currentColor; vertical-align: -.15em; } section { padding: 88px 0; } .section-alt { background: var(--bg-alt); } .section-head { text-align: center; max-width: 640px; margin: 0 auto 52px; } .kicker { display: inline-block; background: var(--bg-pink); color: var(--red); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; padding: 7px 16px; border-radius: 999px; margin-bottom: 16px; } .section-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); } /* reveal on scroll */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; } .reveal.in-view { opacity: 1; transform: none; } /* ========================================================= Buttons ========================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: 999px; font-weight: 600; font-size: .95rem; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .2s ease; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: linear-gradient(135deg, var(--red), var(--red-dark)); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { box-shadow: var(--shadow-md); } .btn-outline { background: var(--white); border-color: var(--primary); color: var(--primary); } .btn-outline:hover { background: var(--primary); color: #fff; } .btn-whatsapp { background: #25d366; color: #fff; } .btn-whatsapp:hover { box-shadow: 0 14px 30px rgba(37, 211, 102, .35); } .btn-youtube { background: #ff0000; color: #fff; } .btn-youtube:hover { box-shadow: 0 14px 30px rgba(255, 0, 0, .3); } .btn-instagram { background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4); color: #fff; } .btn-instagram:hover { box-shadow: 0 14px 30px rgba(129, 52, 175, .3); } .btn-lg { padding: 16px 32px; font-size: 1rem; } .btn-sm { padding: 10px 20px; font-size: .85rem; } .btn-block { width: 100%; } /* ========================================================= Header / Nav No topbar, no off-canvas panel — mobile/tablet (≤1024px) navigation is the fixed bottom tab bar (#bottomNav) instead; the header there is just brand + a "Book" pill (.header-book). See CLAUDE.md "Structural alignment with murugan-skin-clinic". ========================================================= */ .site-header { position: sticky; top: 0; z-index: 650; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: box-shadow .2s ease, border-color .2s ease; } .site-header.scrolled { box-shadow: var(--shadow-sm); border-color: var(--border); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 16px; } /* order values keep .header-social's DESKTOP position (visually right before the lang toggle/CTA cluster, same spot it held back when it was nested inside .header-tools) even though it's now a direct sibling of .brand in the markup — promoted out of .header-tools so its position can be overridden independently at mobile widths, see the ≤480px block below ("Header social icons repositioned next to brand"). */ .brand { order: 1; display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--primary); } .brand-mark { height: 40px; width: 40px; display: block; } .brand-text { line-height: 1.15; } .brand-text small { display: block; font-family: var(--font-body); font-weight: 600; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--red); } .main-nav { order: 2; display: flex; align-items: center; gap: 24px; } .main-nav ul { display: flex; gap: 20px; } /* white-space:nowrap matters specifically for the 2-word Tamil links (nav.about = "எங்களைப் பற்றி") — without it, once the nav is squeezed narrow enough, the second word wraps onto its own line inside the link instead of the whole nav-cta/lang-toggle getting pushed further right; confirmed as a real bug at 1025px Tamil (screenshot showed "பற்றி" sitting alone on a wrapped second line, AND the lang toggle still clipped off the actual viewport edge — scrollWidth read 0 throughout, same false-negative as every other overflow bug in this file). */ .nav-link { font-weight: 600; font-size: .92rem; color: var(--ink); position: relative; padding: 6px 0; white-space: nowrap; } .nav-link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--red); transition: width .2s ease; } .nav-link:hover::after { width: 100%; } .nav-link.is-active { color: var(--red-dark); } .nav-link.is-active::after { width: 100%; } .nav-cta { display: flex; align-items: center; gap: 10px; } /* header-tools (lang toggle + mobile Book pill) shows at every width, but the Book pill itself is redundant ≥1025px where #mainNav's own nav-cta already has a Book Appointment button — hidden there so desktop never shows two Book buttons. */ .header-tools { order: 4; display: flex; align-items: center; gap: 8px; } /* "Book" → "Appointment" (11 chars, up from 4) no longer fits this pill's original 10px/22px, .9rem sizing on an actual phone — confirmed via screenshot, not just the scrollWidth check (which read 0 the whole time): the pill rendered past the viewport's right edge with its text cut off mid-word. .header-book only ever appears ≤1024px (hidden ≥1025px below), so its base size can just be the compact mobile one directly, no separate narrow-breakpoint override needed. */ .header-book { padding: 8px 14px; font-size: .8rem; } @media (min-width: 1025px) { .header-book { display: none; } } .lang-toggle { background: var(--white); border: 2px solid var(--primary); color: var(--primary-dark); font: 700 .76rem var(--font-body); padding: 6px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; } .lang-toggle:hover { background: var(--primary); color: #fff; } /* Social icons projected into the header itself (previously only in the footer/Contact section), desktop-only quicklink. order:3 (see .brand's order comment above) keeps it next to the lang toggle, same spot it held when nested inside .header-tools. Hidden ≤1024px now — mobile got its own floating side buttons instead (see .social-fab below), replacing the earlier "next to the brand name" mobile treatment rather than showing the same two icons twice on one screen. */ .header-social { order: 3; display: flex; align-items: center; gap: 6px; } .header-social a { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-alt); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s ease, color .15s ease; } .header-social a:hover { background: var(--primary); color: #fff; } .header-social .ic { width: 15px; height: 15px; } @media (max-width: 1024px) { .header-social { display: none; } } /* The 1025-1392px "hide .header-social" band this comment used to describe is gone: it existed to offset the desktop nav-cta's Email button reappearing and pushing .header-tools past the real viewport in that range. The nav-cta Email button was removed entirely (kept only in the Contact section/footer), so nav-cta is now a single button at every desktop width — re-verified via getBoundingClientRect with .header-social forced visible across 1025-1389px and every width has 8px+ of real spare margin, so the quicklinks can just stay visible everywhere now. */ /* ========================================================= Timings strip ========================================================= */ .timings-strip { background: var(--primary-dark); color: #fff; } .timings-strip-inner { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; padding: 10px 24px; font-size: .85rem; font-weight: 600; } .timings-strip-item { display: inline-flex; align-items: center; gap: 6px; } .timings-strip-label { display: inline-flex; align-items: center; gap: 6px; } .timings-strip-item .ic { width: 15px; height: 15px; } .timings-strip-link { margin-left: 6px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; color: #fff; } .timings-strip-link:hover { color: var(--gold); } /* ========================================================= Hero ========================================================= */ .hero { position: relative; padding: 48px 0 64px; overflow: hidden; background: linear-gradient(160deg, var(--bg-pink) 0%, var(--bg-alt) 55%, var(--bg) 100%); } .hero-shape { position: absolute; border-radius: 50%; filter: blur(2px); z-index: 0; } .hero-shape-1 { width: 460px; height: 460px; top: -180px; right: -140px; background: radial-gradient(circle, rgba(224,51,44,.14) 0%, transparent 70%); } .hero-shape-2 { width: 360px; height: 360px; bottom: -160px; left: -130px; background: radial-gradient(circle, rgba(22,58,128,.12) 0%, transparent 70%); } .hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; } /* Grid items default to min-width:auto, which lets their intrinsic min-content width (driven by the longest unbreakable text run) force the box wider than its track — a real bug hit on mobile once Tamil copy went live: the hero H1's second line rendered ~22px wider than the 390px viewport and was silently clipped by overflow-x:hidden instead of wrapping, because this site's overflow-x:hidden clips overflow rather than growing scrollWidth (the same false-negative documented in murugan-skin-clinic's CLAUDE.md — scrollWidth-clientWidth read 0 the whole time). min-width:0 lets the item shrink below that content minimum so text wraps normally within the constrained column; applied to every grid item that holds paragraph/heading text, not just the hero, since the same failure mode applies to any of them once long Tamil words are in play. */ .hero-content, .hero-visual, .about-content, .visit-grid > div, .contact-card, .form-field { min-width: 0; } /* Doctor profile pill — merged into the top of the content column instead of a separate large photo card (see CLAUDE.md "Hero"). */ .hero-doctor { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .hero-doctor-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow-sm); border: 3px solid var(--white); } .hero-doctor-info { display: flex; flex-direction: column; } .hero-doctor-info strong { font-family: var(--font-head); font-size: 1rem; color: var(--primary-dark); } .hero-doctor-info span { font-size: .82rem; color: var(--ink-soft); font-weight: 500; } .hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.15rem); font-weight: 700; letter-spacing: -.01em; } .hero h1 .hero-line1 { display: block; } .hero h1 .hero-line2 { color: var(--red); display: block; } .hero p.lead { font-size: 1.08rem; max-width: 48ch; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 30px 0 20px; } .hero-trust { font-size: .85rem; font-weight: 600; color: var(--primary-dark); margin-bottom: 0; } /* Conditions quick-link card, replacing the old doctor photo card in the hero's right column — reuses the same icons/labels as #conditions. */ .hero-visual { position: relative; display: flex; justify-content: center; align-items: center; } .hero-conditions { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 30px 26px; width: min(340px, calc(100vw - 48px)); } .hero-conditions-title { font-size: 1.02rem; text-align: center; margin-bottom: 18px; } .hero-conditions-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .hero-cond { flex: 0 1 calc(50% - 6px); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; background: var(--bg-alt); border-radius: var(--radius-sm); padding: 16px 10px; font-size: .8rem; font-weight: 700; color: var(--primary-dark); transition: transform .15s ease, background .15s ease; } .hero-cond:hover { transform: translateY(-3px); background: var(--bg-pink); } .hero-cond .ic { width: 26px; height: 26px; color: var(--red); } /* Eyebrow pill — used on the carousel's promo slides (book / course) in place of the doctor pill, which only makes sense on slide 1. */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--white); box-shadow: var(--shadow-sm); color: var(--primary); font-weight: 700; font-size: .82rem; padding: 8px 18px; border-radius: 999px; margin-bottom: 20px; } .eyebrow .ic { color: var(--red); } /* Real-photo promo card for the book/course carousel slides — same visual weight (rounded, shadow, capped width) as .hero-conditions on slide 1, so switching slides doesn't jump in size. Default aspect-ratio suits the portrait book cover; .landscape switches to the course thumbnail's real 4:3 ratio instead of cropping it into a portrait frame. */ .hero-promo-card { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); width: min(360px, calc(100vw - 48px)); aspect-ratio: 4 / 5; } .hero-promo-card.landscape { aspect-ratio: 4 / 3; width: min(420px, calc(100vw - 48px)); } .hero-promo-card img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ========================================================= Hero carousel 3 slides, each a full .hero-inner (see CLAUDE.md "Hero carousel"). Slides sit side by side in a flex row with align-items:stretch (the flex default — left implicit) so every slide's box is forced to the SAME height (the tallest slide's natural content height) instead of each sizing to its own content — requested explicitly so navigating between slides never visibly resizes the carousel. .carousel-slide's own align-items:center then centers a shorter slide's content within that shared height, rather than leaving it pinned to the top with dead space only below it. (Previously this used align-items:flex-start + JS-driven per-slide height — reverted per explicit request for equal sizing across all slides.) */ /* Card treatment: before this, .carousel was full-bleed with no background/shadow/edge of its own — it read as a plain flat section, not a distinct "carousel" component (confirmed via screenshot: the slide content just floated directly on .hero's gradient backdrop with nothing framing it, same complaint the user raised — "very plain"). Capping width + centering + giving it its own white surface/shadow/ radius turns it into a raised card sitting on that gradient backdrop instead. On phones narrower than the 1180px cap the card still spans edge-to-edge (no outer margin, since max-width doesn't bind below its own value) but keeps the rounded top/bottom corners + shadow, which already reads as "a card" without sacrificing width; the gradient backdrop only peeks on the sides once the viewport is wide enough for the margin:auto centering to matter. .carousel's own padding is VERTICAL ONLY, not horizontal — this is load-bearing, not a style choice. Off-screen slides sit at huge x offsets (3 slides × ~1130px each) purely via flex layout, clipped by this element's own overflow:hidden. Adding horizontal padding to THIS SAME element reproducibly broke that clip in both Chromium and Firefox (confirmed headed, not just headless-screenshot noise, and confirmed via elementFromPoint that hit-testing still matched the geometry — only the PAINT ignored the clip): slide 2/3's text visibly bled out to the right past the card's rounded edge. Bisected via inline-style experiments: vertical-only padding on .carousel never triggers it; horizontal padding does, whether placed on .carousel itself or on .carousel-track — apparently a real engine bug in how the clip rect is computed for a horizontally-padded overflow:hidden ancestor of a flex row whose children overflow it by multiples of its own width. Workaround: keep .carousel's horizontal padding at 0 and put the equivalent 24px gutter on .hero-inner instead (matching .container's own gutter elsewhere on the page, not stacked on top of it — .carousel-slide .hero-inner below cancels .container's own max-width so this is the ONLY horizontal inset, not a doubled one). */ .carousel { position: relative; overflow: hidden; max-width: 1180px; margin: 0 auto; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 40px 0 56px; } .carousel-track { display: flex; transition: transform .5s ease; } .carousel-slide { flex: 0 0 100%; width: 100%; display: flex; align-items: center; min-width: 0; } .carousel-slide .hero-inner { width: 100%; max-width: none; padding: 0 24px; margin: 0; } .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-sm); border: 1px solid var(--border); color: var(--primary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, box-shadow .15s ease; } .carousel-arrow:hover { background: var(--primary); color: #fff; box-shadow: var(--shadow-md); } .carousel-arrow .ic { width: 20px; height: 20px; } .carousel-arrow.prev { left: 16px; } .carousel-arrow.prev .ic { transform: rotate(90deg); } .carousel-arrow.next { right: 16px; } .carousel-arrow.next .ic { transform: rotate(-90deg); } .carousel-dots { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2; display: flex; gap: 8px; } .carousel-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; background: rgba(14,38,87,.22); cursor: pointer; transition: background .15s ease, transform .15s ease; } .carousel-dots button.is-active { background: var(--red); transform: scale(1.25); } /* ========================================================= About ========================================================= */ .about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; } .about-visual { position: relative; } /* padding (not a shrunk img% + dashed inner ring) is the frame: an optional real photo (see SKILL.md "About photo" option) fills the padded content box directly, so almost the whole circle is real photo instead of decorative gradient margin. */ .about-ring { aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); position: relative; overflow: hidden; padding: 10px; } .about-ring .ic { width: 42%; height: 42%; color: #fff; } .about-ring img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .about-content ul { margin-top: 22px; } .about-content li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; font-weight: 600; color: var(--primary-dark); font-size: .96rem; } .about-content li .ic-wrap { width: 28px; height: 28px; border-radius: 8px; background: var(--bg-pink); color: var(--red); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } /* ========================================================= Services ========================================================= */ /* flex-wrap + justify-content:center (not grid) so a card count that isn't a multiple of 3 doesn't leave a lone last-row card stranded next to dead empty columns — it centers under the row above instead. Same pattern on .facility-grid and .why-grid below. */ .services-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; } .service-card { flex: 0 1 360px; } .service-card { background: var(--white); border-radius: var(--radius); padding: 32px 26px; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; border-top: 4px solid var(--card-color, var(--primary)); } .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .service-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; background: color-mix(in srgb, var(--card-color, var(--primary)) 14%, white); color: var(--card-color, var(--primary)); } .service-icon .ic { width: 28px; height: 28px; } .service-card h3 { font-size: 1.08rem; margin-bottom: 8px; } .service-card p { font-size: .92rem; margin-bottom: 0; } /* ========================================================= Facilities banner ========================================================= */ .facilities { background: linear-gradient(135deg, var(--purple), #4a2a72); } .facilities .section-head h2, .facilities .section-head p { color: #fff; } .facilities .kicker { background: rgba(255,255,255,.15); color: #f4dcff; } .facility-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; } .facility-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); padding: 30px 24px; text-align: center; backdrop-filter: blur(4px); flex: 0 1 340px; } .facility-icon { width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; } .facility-icon .ic { width: 30px; height: 30px; color: #fff; } .facility-card.pink .facility-icon { background: linear-gradient(135deg,#ec4899,#db2777); } .facility-card.orange .facility-icon { background: linear-gradient(135deg,#f59e0b,#d97706); } .facility-card.green .facility-icon { background: linear-gradient(135deg,#22c55e,#16a34a); } .facility-card h3 { color: #fff; font-size: 1.05rem; margin-bottom: 8px; } .facility-card p { color: #e6d9f2; font-size: .9rem; margin-bottom: 0; } /* ========================================================= Why choose us ========================================================= */ .why-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; } .why-card { display: flex; gap: 16px; align-items: flex-start; padding: 8px; flex: 0 1 360px; } .why-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--bg-alt); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .why-card h3 { font-size: 1rem; margin-bottom: 6px; } .why-card p { font-size: .9rem; margin-bottom: 0; } /* ========================================================= Courses ========================================================= */ .course-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; } .course-card { flex: 0 1 460px; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; } .course-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .course-card img { width: 100%; height: 230px; object-fit: cover; } .course-body { padding: 26px 28px 30px; } .course-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-pink); color: var(--red); font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; } .course-body h3 { font-size: 1.2rem; margin-bottom: 10px; } .course-points { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 22px; } .course-points li { display: flex; align-items: flex-start; gap: 8px; font-size: .88rem; color: var(--ink-soft); font-weight: 500; } .course-points .ic { color: var(--primary); flex-shrink: 0; margin-top: 3px; } /* ========================================================= Blog ========================================================= */ .blog-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; } .blog-card { flex: 0 1 420px; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; } .blog-card img { width: 100%; height: 190px; object-fit: cover; } .blog-body { padding: 24px 24px 28px; display: flex; flex-direction: column; flex: 1; } .blog-meta { font-size: .78rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; } .blog-body h3 { font-size: 1.05rem; margin-bottom: 10px; line-height: 1.4; } .blog-body p { font-size: .9rem; margin-bottom: 14px; } .blog-body .btn { margin-top: auto; align-self: flex-start; } .blog-expand { margin-top: auto; border-top: 1px solid var(--border); padding-top: 14px; } .blog-expand summary { cursor: pointer; list-style: none; font-weight: 700; color: var(--primary); font-size: .88rem; display: flex; align-items: center; gap: 6px; } .blog-expand summary::-webkit-details-marker { display: none; } .blog-expand summary .ic { transition: transform .2s ease; width: 16px; height: 16px; } .blog-expand[open] summary .ic { transform: rotate(180deg); } .blog-full { margin-top: 16px; max-height: 480px; overflow-y: auto; padding-right: 6px; } .blog-full h4 { font-size: .95rem; color: var(--primary-dark); margin: 18px 0 6px; } .blog-full p, .blog-full li { font-size: .88rem; } .blog-full ul { padding-left: 4px; margin-bottom: 1em; } .blog-full li { list-style: disc; margin-left: 18px; margin-bottom: 6px; } /* ========================================================= Videos Each card is a real youtube-nocookie.com