/* Quick Discount — front components (all section styles) * Source mirror: resources/css/quick-components.css * Loaded from: main-layout via asset('frontend/css/quick-components.css') */ /* ═══════════════════════════════════════════════════════════════ Shared front utilities (deduplicated across components) ═══════════════════════════════════════════════════════════════ */ .ct-ap__pager, .pd-branches__pager { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(15, 23, 42, 0.08); display: flex; justify-content: center; flex-wrap: wrap; } .ct-ap__pager > nav, .pd-branches__pager > nav { display: flex; justify-content: center; width: 100%; } .ct-ap__pager .pagination, .pd-branches__pager .pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem; margin: 0; padding: 0; list-style: none; } .ct-ap__pager .page-item, .pd-branches__pager .page-item { margin: 0; list-style: none; } .ct-ap__pager .page-link, .pd-branches__pager .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; min-height: 2.5rem; padding: 0.35rem 0.7rem; border-radius: 0.65rem; font-size: 0.875rem; font-weight: 700; line-height: 1.2; color: #334155; background: #ffffff; border: 1.5px solid rgba(15, 23, 42, 0.1); text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; } .ct-ap__pager a.page-link:hover, .pd-branches__pager a.page-link:hover, .ct-ap__pager .page-link:hover, .pd-branches__pager .page-link:hover { border-color: rgba(16, 183, 159, 0.55); color: #0e9d88; background: rgba(16, 183, 159, 0.08); } .ct-ap__pager .page-item.active .page-link, .pd-branches__pager .page-item.active .page-link { color: #ffffff; background: linear-gradient(145deg, #10b79f, #0a8f7a); border-color: transparent; box-shadow: 0 6px 18px -8px rgba(16, 183, 159, 0.55); cursor: default; pointer-events: none; } .ct-ap__pager .page-item.disabled .page-link, .ct-ap__pager .page-item.disabled span.page-link, .pd-branches__pager .page-item.disabled .page-link { opacity: 0.42; cursor: not-allowed; pointer-events: none; color: #64748b; background: #f1f5f9; border-color: rgba(15, 23, 42, 0.06); } /* ── main-layout.blade.php ── */ /* ───────────────────────────────────────────────────────────── Quick Discount — shared brand palette Anchored on the logo's teal (#10B79F). Every front section should consume these tokens rather than hard-coding colors, so backgrounds and accents stay in sync across the page. ───────────────────────────────────────────────────────────── */ :root { /* ─── Brand identity ──────────────────────────────────── The logo carries two equally important brand colors: • Red — the icon background (#e63946 family) • Green — the teal "%" mark (#10B79F family) Plus white as the breathing/contrast canvas. These three colors alternate across home page sections in the order RED → WHITE → GREEN → RED → WHITE → GREEN. */ /* GREEN (teal) — primary brand mark color */ --brand-primary: #10B79F; --brand-primary-deep: #0e9d88; --brand-primary-soft: rgba(16, 183, 159, 0.12); --brand-primary-tint: rgba(16, 183, 159, 0.22); --brand-primary-glow: rgba(16, 183, 159, 0.32); /* RED — logo background color */ --brand-red: #e63946; --brand-red-deep: #c1121f; --brand-red-darker: #8e0e18; --brand-red-darkest: #5a0610; --brand-red-soft: rgba(230, 57, 70, 0.10); --brand-red-tint: rgba(230, 57, 70, 0.22); --brand-red-glow: rgba(230, 57, 70, 0.40); /* Warm accent (used sparingly inside cards/badges) */ --brand-accent: #f59e0b; --brand-accent-soft: rgba(245, 158, 11, 0.18); /* Neutral ink */ --brand-ink: #0f1729; --brand-ink-soft: #2d3a4e; --brand-ink-muted: #5c6570; /* GREEN section canvas — slightly teal-tinted near-black */ --brand-dark-1: #0a1620; --brand-dark-2: #0d2128; --brand-dark-3: #07111a; /* WHITE section canvas */ --brand-white-1: #ffffff; --brand-white-2: #f6f9f8; /* ─── Three canvases the page rotates through ───────── */ /* RED canvas (deep logo red, with subtle highlight + teal complement) */ --brand-bg-red: radial-gradient(ellipse 70% 55% at 15% 0%, rgba(255, 255, 255, 0.06) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 85% 100%, var(--brand-primary-tint) 0%, transparent 60%), linear-gradient(165deg, var(--brand-red-deep) 0%, var(--brand-red-darker) 55%, var(--brand-red-darkest) 100%); /* WHITE canvas (clean, with two faint brand glows for life) */ --brand-bg-white: radial-gradient(ellipse 70% 45% at 15% 0%, var(--brand-primary-soft) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 85% 100%, var(--brand-red-soft) 0%, transparent 60%), linear-gradient(180deg, var(--brand-white-1) 0%, var(--brand-white-2) 100%); /* GREEN canvas (teal-tinted near-black) */ --brand-bg-green: radial-gradient(ellipse 70% 50% at 15% 0%, var(--brand-primary-tint) 0%, transparent 55%), radial-gradient(ellipse 60% 45% at 85% 100%, var(--brand-red-tint) 0%, transparent 60%), linear-gradient(165deg, var(--brand-dark-1) 0%, var(--brand-dark-2) 50%, var(--brand-dark-3) 100%); /* Legacy aliases (kept so older selectors keep working) */ --brand-bg-dark: var(--brand-bg-green); --brand-bg-light: var(--brand-bg-white); } html { overflow-x: clip; } body#page-top { overflow-x: clip; max-width: 100vw; } .front-page-skeleton { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; background: #0f0f10; transition: opacity .45s ease, visibility .45s ease; } .front-page-skeleton.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .front-skel { background: linear-gradient( 90deg, #252528 0%, #35353a 45%, #252528 90% ); background-size: 200% 100%; animation: frontSkelShimmer 1.35s ease-in-out infinite; border-radius: 10px; } .front-skel-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px clamp(16px, 3.8vw, 40px); border-bottom: 1px solid rgba(255, 255, 255, .06); } .front-skel-nav__brand { width: min(160px, 36vw); height: 40px; border-radius: 12px; } .front-skel-nav__links { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; } .front-skel-nav__link { width: 72px; height: 14px; border-radius: 6px; } .front-skel-main { flex: 1; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 36px; max-width: 1240px; width: 100%; margin: 0 auto; padding: 48px clamp(16px, 3.8vw, 40px) 40px; } .front-skel-hero__badge { width: 140px; height: 32px; border-radius: 999px; margin-bottom: 20px; } .front-skel-hero__title { width: 100%; max-width: 520px; height: clamp(36px, 6vw, 48px); border-radius: 12px; margin-bottom: 16px; } .front-skel-hero__title--short { max-width: 380px; height: clamp(36px, 6vw, 48px); margin-bottom: 20px; } .front-skel-hero__line { height: 14px; border-radius: 6px; margin-bottom: 12px; } .front-skel-hero__line:last-of-type { max-width: 85%; margin-bottom: 28px; } .front-skel-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; } .front-skel-hero__btn { width: 148px; height: 44px; border-radius: 10px; } .front-skel-hero__trust { width: min(100%, 420px); height: 16px; border-radius: 6px; margin-top: 20px; } .front-skel-hero__visual { display: flex; justify-content: center; } .front-skel-hero__phone { width: min(280px, 62vw); height: min(520px, 58vh); border-radius: 32px; } @keyframes frontSkelShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @media (max-width: 991px) { .front-skel-main { grid-template-columns: 1fr; padding-top: 32px; } .front-skel-nav__links { display: none; } .front-skel-hero__visual { justify-content: flex-start; } .front-skel-hero__phone { height: min(400px, 50vh); } } @media (prefers-reduced-motion: reduce) { .front-skel { animation: none; background: #2a2a2d; } } /* ── category-all-providers.blade.php ── */ .ct-ap { padding: clamp(2.5rem, 5vw, 4rem) 0; background: #fff; border-top: 1px solid rgba(15,23,42,.06); } .ct-ap__container { max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } .ct-ap__head { text-align: center; margin-bottom: clamp(1.5rem, 3vw, 2rem); } .ct-ap__eyebrow { margin: 0 0 .5rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--brand-primary-deep, #0e9d88); } .ct-ap__title { margin: 0; font-size: clamp(1.35rem, 3vw, 1.85rem); font-weight: 800; letter-spacing: -.02em; color: var(--brand-ink, #12151a); } .ct-ap__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(1rem, 2vw, 1.25rem); } .ct-ap__empty { text-align: center; color: var(--brand-ink-muted, #5c6570); font-size: 1.05rem; margin: 2rem 0; } .ct-ap__pager { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid rgba(15, 23, 42, 0.08); display: flex; justify-content: center; flex-wrap: wrap; } .ct-ap__pager > nav { display: flex; justify-content: center; width: 100%; } .ct-ap__pager .pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem; margin: 0; padding: 0; list-style: none; } .ct-ap__pager .page-item { margin: 0; list-style: none; } .ct-ap__pager .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; min-height: 2.5rem; padding: 0.35rem 0.7rem; border-radius: 0.65rem; font-size: 0.875rem; font-weight: 700; line-height: 1.2; color: #334155; background: #ffffff; border: 1.5px solid rgba(15, 23, 42, 0.1); text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; } .ct-ap__pager a.page-link:hover { border-color: rgba(16, 183, 159, 0.55); color: #0e9d88; background: rgba(16, 183, 159, 0.08); } .ct-ap__pager a.page-link:focus-visible { outline: 2px solid #10b79f; outline-offset: 2px; z-index: 1; } .ct-ap__pager a.page-link:active { transform: scale(0.97); } .ct-ap__pager .page-item.active .page-link { color: #ffffff; background: linear-gradient(145deg, #10b79f, #0a8f7a); border-color: transparent; box-shadow: 0 6px 18px -8px rgba(16, 183, 159, 0.55); cursor: default; pointer-events: none; } .ct-ap__pager .page-item.disabled .page-link, .ct-ap__pager .page-item.disabled span.page-link { opacity: 0.42; cursor: not-allowed; pointer-events: none; color: #64748b; background: #f1f5f9; border-color: rgba(15, 23, 42, 0.06); } @media (max-width: 480px) { .ct-ap__pager .page-link { min-width: 2.25rem; min-height: 2.35rem; padding: 0.3rem 0.5rem; font-size: 0.8125rem; } } /* ── category-detail-hero.blade.php ── */ .ct-hero, .ct-hero * { box-sizing: border-box; } .ct-hero { position: relative; min-height: clamp(320px, 48vw, 520px); display: flex; align-items: center; padding: clamp(72px, 12vw, 120px) 0 clamp(48px, 8vw, 80px); overflow: hidden; isolation: isolate; background: linear-gradient(165deg, rgba(90,6,16,.90) 0%, rgba(14,9,9,.78) 100%), var(--brand-bg-red, #8e0e18); color: #fff; } .ct-hero[style*="--ct-hero-img"] { background: linear-gradient(160deg, rgba(10,6,14,.82) 0%, rgba(90,6,16,.68) 55%, rgba(14,9,9,.75) 100%), var(--ct-hero-img); background-size: cover; background-position: center; } .ct-hero__glow { position: absolute; border-radius: 50%; filter: blur(88px); pointer-events: none; z-index: 0; } .ct-hero__glow--a { width: 480px; height: 480px; inset-block-start: -200px; inset-inline-end: -160px; background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%); } .ct-hero__glow--b { width: 400px; height: 400px; inset-block-end: -200px; inset-inline-start: -120px; background: radial-gradient(circle, rgba(16,183,159,.28) 0%, transparent 70%); } .ct-hero__dots { position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px); background-size: 20px 20px; pointer-events: none; } .ct-hero__container { position: relative; z-index: 1; max-width: 1240px; width: 100%; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; } .ct-hero__bc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.62); } .ct-hero__bc a { color: rgba(255,255,255,.62); text-decoration: none; } .ct-hero__bc a:hover { color: #fff; text-decoration: underline; } .ct-hero__bc [aria-current="page"] { color: #fff; font-weight: 700; } .ct-hero__bc span[aria-hidden] { opacity: .45; } .ct-hero__type { margin-bottom: 0.65rem; } .ct-hero__title { margin: 0; font-size: clamp(2rem, 5.5vw, 3.25rem); font-weight: 900; line-height: 1.08; letter-spacing: -.03em; max-width: 720px; } .ct-hero__desc { margin: 0; max-width: 560px; font-size: clamp(.95rem, 1.7vw, 1.08rem); line-height: 1.65; color: rgba(255,255,255,.82); } .ct-hero__pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .15rem; } .ct-hero__pill { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .85rem; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); font-size: .85rem; font-weight: 700; } .ct-hero__scroll { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 2px solid rgba(255,255,255,.28); color: rgba(255,255,255,.7); margin-top: .5rem; text-decoration: none; transition: border-color .2s, color .2s; } .ct-hero__scroll:hover { border-color: rgba(255,255,255,.65); color: #fff; } .ct-hero__scroll svg { width: 20px; height: 20px; } /* ── category-detail-seo.blade.php ── */ .ct-seo { padding: clamp(2.5rem, 5vw, 4rem) 0; background: #f1f5f9; border-top: 1px solid rgba(15,23,42,.06); } .ct-seo__container { max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } .ct-seo__inner { display: grid; grid-template-columns: 1fr 1.65fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } @media (max-width: 720px) { .ct-seo__inner { grid-template-columns: 1fr; } } .ct-seo__eyebrow { display: inline-flex; margin: 0 0 .75rem; padding: .28rem .8rem; border-radius: 999px; background: rgba(16,183,159,.1); border: 1px solid rgba(16,183,159,.22); color: var(--brand-primary-deep, #0e9d88); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; } .ct-seo__title { margin: 0 0 1rem; font-size: clamp(1.35rem, 3vw, 1.85rem); font-weight: 900; letter-spacing: -.02em; color: var(--brand-ink, #12151a); line-height: 1.2; } .ct-seo__dl { margin: 0 0 1.25rem; } .ct-seo__dt-dd { padding: .65rem .85rem; border-radius: 12px; background: #fff; border: 1px solid rgba(15,23,42,.07); } .ct-seo__dt-dd dt { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-ink-muted, #5c6570); margin-bottom: .2rem; } .ct-seo__dt-dd dd { margin: 0; font-size: 1.45rem; font-weight: 900; color: var(--brand-ink, #12151a); } .ct-seo__back { display: inline-flex; font-size: .88rem; font-weight: 700; color: var(--brand-primary-deep, #0e9d88); text-decoration: none; } .ct-seo__back:hover { text-decoration: underline; } .ct-seo__body p { margin: 0 0 1rem; font-size: clamp(.95rem, 1.7vw, 1.05rem); line-height: 1.75; color: #334155; } .ct-seo__body strong { color: var(--brand-ink, #12151a); } /* ── category-featured-deals.blade.php ── */ .ct-fd { padding: clamp(2.75rem, 5.5vw, 4.25rem) 0; background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 42%, #eef2f7 100%); position: relative; overflow: hidden; } .ct-fd::before { content: ''; position: absolute; inset-inline: 0; inset-block-start: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(16, 183, 159, 0.25), transparent); pointer-events: none; } .ct-fd__shell { position: relative; z-index: 1; } .ct-fd__container { max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); margin-bottom: clamp(1.25rem, 3vw, 1.75rem); } .ct-fd__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; } .ct-fd__head-text { flex: 1; min-width: min(100%, 280px); } .ct-fd__eyebrow { margin: 0 0 0.4rem; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: var(--brand-primary-deep, #0e9d88); } .ct-fd__title { margin: 0 0 0.35rem; font-size: clamp(1.4rem, 3.2vw, 1.95rem); font-weight: 800; letter-spacing: -0.025em; color: var(--brand-ink, #12151a); line-height: 1.15; text-wrap: balance; } .ct-fd__sub { margin: 0; max-width: 42ch; font-size: 0.92rem; line-height: 1.55; color: var(--brand-ink-muted, #5c6570); } .ct-fd__see-all { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.55rem 1rem; border-radius: 999px; font-size: 0.82rem; font-weight: 700; text-decoration: none; color: #fff; background: linear-gradient(145deg, var(--brand-primary, #10b79f), #0a8f7a); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 6px 18px -10px rgba(16, 183, 159, 0.55); transition: transform 0.18s ease, box-shadow 0.18s ease; } .ct-fd__see-all:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(16, 183, 159, 0.65); } .ct-fd__see-all::after { content: ''; display: inline-block; width: 0.4rem; height: 0.4rem; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(-45deg); margin-block-end: 0.12rem; } [dir='rtl'] .ct-fd__see-all::after { transform: rotate(135deg); } /* Full-bleed horizontal strip */ .ct-fd__carousel { position: relative; margin-inline: calc(50% - 50vw); width: 100vw; max-width: 100vw; } .ct-fd__fade { pointer-events: none; position: absolute; inset-block: 0; z-index: 2; width: clamp(28px, 5vw, 56px); } .ct-fd__fade--start { inset-inline-start: 0; background: linear-gradient(to right, rgba(244, 247, 251, 1), rgba(244, 247, 251, 0)); } [dir='rtl'] .ct-fd__fade--start { background: linear-gradient(to left, rgba(244, 247, 251, 1), rgba(244, 247, 251, 0)); } .ct-fd__fade--end { inset-inline-end: 0; background: linear-gradient(to left, rgba(238, 242, 247, 1), rgba(238, 242, 247, 0)); } [dir='rtl'] .ct-fd__fade--end { background: linear-gradient(to right, rgba(238, 242, 247, 1), rgba(238, 242, 247, 0)); } .ct-fd__track-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(16, 183, 159, 0.35) transparent; scroll-snap-type: x proximity; scroll-padding-inline: clamp(20px, 5vw, 48px); padding-block: 0.35rem 0.85rem; } .ct-fd__track-wrap::-webkit-scrollbar { height: 6px; } .ct-fd__track-wrap::-webkit-scrollbar-thumb { background: rgba(16, 183, 159, 0.35); border-radius: 999px; } .ct-fd__track { list-style: none; margin: 0; padding-inline: clamp(20px, 5vw, 48px); padding-block: 0.15rem; display: flex; flex-direction: row; align-items: stretch; gap: clamp(0.65rem, 2vw, 1.15rem); width: max-content; min-height: 0; } .ct-fd__item { flex: 0 0 auto; scroll-snap-align: center; width: clamp(220px, 72vw, 280px); display: flex; } .ct-fd__item > .cat-pc--grid { width: 100%; min-height: 100%; } /* Strip stays compact: title + image + flag + name (+ chips), no long blurbs */ .ct-fd__item .cat-pc--grid .cat-pc__desc { display: none; } @media (max-width: 640px) { .ct-fd__head { flex-direction: column; align-items: stretch; } .ct-fd__see-all { justify-content: center; } } /* ── category-provider-card.blade.php ── */ .cat-pc, .cat-pc * { box-sizing: border-box; } .cat-pc { display: flex; flex-direction: column; text-decoration: none; color: inherit; border-radius: 16px; overflow: hidden; border: 1.5px solid rgba(15,23,42,.08); background: #fff; box-shadow: 0 4px 18px -12px rgba(15,23,42,.2); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .cat-pc:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -16px rgba(15,23,42,.28); border-color: var(--brand-primary, #10B79F); color: inherit; } .cat-pc__media { position: relative; background: #f1f5f9; } .cat-pc--grid .cat-pc__media { aspect-ratio: 16 / 10; min-height: 0; background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); } .cat-pc--row .cat-pc__media { width: 112px; min-width: 112px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; } /* Featured strip: fixed square frame + contain = every logo same outer size */ .cat-pc--circle .cat-pc__media { width: 9.75rem; height: 9.75rem; flex-shrink: 0; margin: 0 auto; border-radius: 50%; overflow: hidden; background: radial-gradient(ellipse 120% 100% at 50% 100%, #eef2f7 0%, #ffffff 55%, #f1f5f9 100%); border: 2px solid rgba(15, 23, 42, 0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 14px -8px rgba(15, 23, 42, 0.18); } .cat-pc__media-fit { position: absolute; inset: 12%; display: flex; align-items: center; justify-content: center; pointer-events: none; } .cat-pc__media-fit--grid { inset: 8%; } .cat-pc--grid .cat-pc__media-fit .cat-pc__img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; } .cat-pc--circle .cat-pc__media-fit .cat-pc__img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; } .cat-pc__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; } .cat-pc--grid:hover .cat-pc__media-fit .cat-pc__img, .cat-pc--row:hover .cat-pc__img { transform: scale(1.04); } .cat-pc--circle:hover .cat-pc__media-fit .cat-pc__img { transform: scale(1.06); } .cat-pc__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #94a3b8; } .cat-pc__ph svg { width: 36px; height: 36px; } .cat-pc__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,23,42,.45) 0%, transparent 50%); pointer-events: none; } .cat-pc--circle .cat-pc__overlay { border-radius: 50%; background: linear-gradient(to top, rgba(15, 23, 42, 0.2) 0%, transparent 58%); } .cat-pc__flag { position: absolute; inset-block-end: 0.55rem; inset-inline-end: 0.55rem; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.06rem; min-width: 3.25rem; padding: 0.28rem 0.5rem 0.32rem; border-radius: 10px; background: linear-gradient(145deg, #c1121f, #8e0e18); color: #fff; line-height: 1.15; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.25); text-align: center; isolation: isolate; z-index: 2; } .cat-pc__flag-pct { font-size: 1rem; font-weight: 900; letter-spacing: 0; line-height: 1.1; } .cat-pc__flag-lbl { font-size: 0.62rem; font-weight: 800; line-height: 1.2; opacity: 0.95; max-width: 6.5rem; text-transform: uppercase; letter-spacing: 0.06em; } [dir='rtl'] .cat-pc__flag-lbl { text-transform: none; letter-spacing: 0; font-size: 0.64rem; } .cat-pc--row .cat-pc__flag { inset-block-end: .35rem; inset-inline-end: .35rem; min-width: 44px; padding: .12rem .32rem; } .cat-pc--row .cat-pc__flag-pct { font-size: .85rem; } /* Column pill: % on top, Arabic label below — no RTL flex row reversal */ .cat-pc--circle .cat-pc__flag { inset-inline-start: auto; inset-inline-end: auto; left: 50%; right: auto; bottom: 0.45rem; transform: translateX(-50%); border-radius: 999px; flex-direction: column; gap: 0.04rem; align-items: center; justify-content: center; min-width: 3rem; padding: 0.2rem 0.55rem 0.28rem; z-index: 2; } .cat-pc--circle .cat-pc__flag-lbl { font-size: 0.58rem; max-width: 5.5rem; } [dir='rtl'] .cat-pc--circle .cat-pc__flag-lbl { letter-spacing: 0; } .cat-pc__mini-badges { position: absolute; inset-block-start: .35rem; inset-inline-start: .35rem; display: flex; gap: .2rem; z-index: 2; } .cat-pc__mini { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .65rem; line-height: 1; border: 1px solid rgba(255,255,255,.4); } .cat-pc__mini--top { background: #f59e0b; color: #1a0a00; } .cat-pc__mini--hot { background: #ef4444; color: #fff; } .cat-pc__body { padding: .85rem 1rem 1rem; flex: 1; display: flex; flex-direction: column; gap: .35rem; } .cat-pc--row { flex-direction: row; align-items: center; gap: 1rem; padding: .65rem .85rem; } .cat-pc--row .cat-pc__body { padding: 0 .5rem 0 0; flex: 1; } .cat-pc--circle { align-items: center; text-align: center; width: 10.5rem; min-width: 10.5rem; max-width: 10.5rem; border: none; background: transparent; box-shadow: none; display: flex; flex-direction: column; gap: 0.65rem; padding: 0.35rem 0.25rem 0.5rem; border-radius: 1.15rem; transition: background 0.2s ease, transform 0.2s ease; } .cat-pc--circle:hover { box-shadow: none; background: rgba(16, 183, 159, 0.06); transform: translateY(-2px); } .cat-pc--circle .cat-pc__body { width: 100%; padding: 0; flex: 0 0 auto; min-height: 2.75rem; display: flex; align-items: flex-start; justify-content: center; } .cat-pc__type { margin-bottom: 0.15rem; } .cat-pc__name { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -.015em; color: var(--brand-ink, #12151a); line-height: 1.25; } .cat-pc__category { margin: 0.2rem 0 0; font-size: 0.8rem; font-weight: 600; line-height: 1.35; color: var(--brand-ink-muted, #5c6570); } .cat-pc--circle .cat-pc__name { font-size: 0.88rem; line-height: 1.35; font-weight: 800; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: break-word; hyphens: auto; max-width: 100%; min-height: calc(2 * 1.35em); text-align: center; } .cat-pc__desc { margin: 0; font-size: .84rem; line-height: 1.5; color: var(--brand-ink-muted, #5c6570); flex: 1; } .cat-pc__chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .15rem; } .cat-pc__chip { font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: .15rem .45rem; border-radius: 999px; background: rgba(16,183,159,.12); color: var(--brand-primary-deep, #0e9d88); } .cat-pc__chip--hot { background: rgba(239,68,68,.12); color: #b91c1c; } [dir='rtl'] .cat-pc__chip { text-transform: none; letter-spacing: 0; } /* ── category-top-providers.blade.php ── */ .ct-tp { padding: clamp(2.5rem, 5vw, 4rem) 0; background: #f8fafc; border-top: 1px solid rgba(15,23,42,.06); } .ct-tp__container { max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } .ct-tp__head { text-align: center; margin-bottom: clamp(1.5rem, 3vw, 2rem); } .ct-tp__eyebrow { margin: 0 0 .5rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: #b45309; } .ct-tp__title { margin: 0 0 .5rem; font-size: clamp(1.35rem, 3vw, 1.85rem); font-weight: 800; letter-spacing: -.02em; color: var(--brand-ink, #12151a); } .ct-tp__lede { margin: 0 auto; max-width: 52ch; font-size: .98rem; line-height: 1.6; color: var(--brand-ink-muted, #5c6570); } .ct-tp__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(1rem, 2vw, 1.25rem); } /* ── contact-section.blade.php ── */ /* ───────────────────────────────────────────────────────────── Contact main section Sits on the brand's white canvas. Mosaic of accent-colored method cards on one side, a glassy form card on the other. ───────────────────────────────────────────────────────────── */ .front-contact { position: relative; padding: clamp(56px, 9vw, 110px) 0; background: var(--brand-bg-white, #ffffff); color: var(--brand-ink, #0f1729); overflow: hidden; isolation: isolate; } .front-contact__bg-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(80px); pointer-events: none; opacity: .55; } .front-contact__bg-glow--one { width: 520px; height: 520px; inset-block-start: -180px; inset-inline-end: -160px; background: radial-gradient(circle, var(--brand-primary-glow, rgba(16,183,159,.32)) 0%, transparent 70%); } .front-contact__bg-glow--two { width: 440px; height: 440px; inset-block-end: -180px; inset-inline-start: -140px; background: radial-gradient(circle, var(--brand-red-glow, rgba(230,57,70,.40)) 0%, transparent 70%); } .front-contact__container { max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } /* ─── Header ──────────────────────────────────────────────── */ .front-contact__header { max-width: 780px; margin: 0 auto clamp(36px, 6vw, 64px); text-align: center; } .front-contact__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 0.9rem; padding: 0.35rem 0.9rem; border-radius: 999px; background: var(--brand-primary-soft, rgba(16,183,159,.12)); color: var(--brand-primary-deep, #0e9d88); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .front-contact__title { margin: 0 0 0.9rem; font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--brand-ink, #0f1729); } .front-contact__lede { margin: 0; font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.65; color: var(--brand-ink-muted, #5c6570); } /* ─── Two-column grid ─────────────────────────────────────── */ .front-contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(24px, 3vw, 40px); align-items: start; } /* ─── Methods column ──────────────────────────────────────── */ .front-contact__info { display: flex; flex-direction: column; gap: clamp(20px, 2.5vw, 28px); } .front-contact__methods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 18px); } .front-contact-method { position: relative; } .front-contact-method__link { position: relative; display: flex; align-items: flex-start; gap: 0.85rem; padding: clamp(16px, 2vw, 22px); border-radius: 18px; background: #ffffff; border: 1px solid rgba(15, 23, 41, 0.06); box-shadow: 0 12px 26px -20px rgba(15, 23, 41, 0.30); color: var(--brand-ink, #0f1729); text-decoration: none; overflow: hidden; isolation: isolate; transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease; } .front-contact-method__link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(140deg, color-mix(in srgb, var(--front-contact-accent, #10B79F) 10%, transparent) 0%, transparent 55%); pointer-events: none; } @supports not (background: color-mix(in srgb, red, white)) { .front-contact-method__link::before { background: linear-gradient(140deg, rgba(16,183,159,.08) 0%, transparent 55%); } } .front-contact-method__link:hover, .front-contact-method__link:focus-visible { transform: translateY(-3px); border-color: color-mix(in srgb, var(--front-contact-accent, #10B79F) 38%, transparent); box-shadow: 0 22px 36px -20px rgba(15, 23, 41, 0.34); color: var(--brand-ink, #0f1729); text-decoration: none; } .front-contact-method__link:focus-visible { outline: 2px solid var(--front-contact-accent, #10B79F); outline-offset: 3px; } .front-contact-method__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px; background: color-mix(in srgb, var(--front-contact-accent, #10B79F) 14%, transparent); color: var(--front-contact-accent, var(--brand-primary, #10B79F)); flex-shrink: 0; } @supports not (background: color-mix(in srgb, red, white)) { .front-contact-method__icon { background: rgba(16, 183, 159, 0.12); } } .front-contact-method__icon svg { width: 22px; height: 22px; } .front-contact-method__body { flex: 1; min-width: 0; } .front-contact-method__label { margin: 0 0 0.2rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--front-contact-accent, var(--brand-primary, #10B79F)); } .front-contact-method__value { margin: 0 0 0.3rem; font-size: 1.02rem; font-weight: 800; color: var(--brand-ink, #0f1729); word-break: break-word; } .front-contact-method__hint { margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--brand-ink-muted, #5c6570); } .front-contact-method__arrow { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; color: var(--brand-ink-muted, #5c6570); opacity: 0.7; transition: opacity 0.24s ease, transform 0.24s ease, color 0.24s ease; } .front-contact-method__link:hover .front-contact-method__arrow, .front-contact-method__link:focus-visible .front-contact-method__arrow { opacity: 1; color: var(--front-contact-accent, var(--brand-primary, #10B79F)); transform: translateX(2px); } .front-contact[dir="rtl"] .front-contact-method__link:hover .front-contact-method__arrow, .front-contact[dir="rtl"] .front-contact-method__link:focus-visible .front-contact-method__arrow { transform: translateX(-2px); } /* ─── Social row ──────────────────────────────────────────── */ .front-contact__social { padding: clamp(16px, 2vw, 22px); border-radius: 18px; background: rgba(15, 23, 41, 0.03); border: 1px solid rgba(15, 23, 41, 0.06); } .front-contact__social-label { margin: 0 0 0.7rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--brand-ink-soft, #2d3a4e); } .front-contact__social-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.55rem; } .front-contact__social-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: #ffffff; border: 1px solid rgba(15, 23, 41, 0.08); color: var(--brand-ink-soft, #2d3a4e); text-decoration: none; transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .front-contact__social-btn svg { width: 18px; height: 18px; } .front-contact__social-btn:hover, .front-contact__social-btn:focus-visible { transform: translateY(-2px); text-decoration: none; } .front-contact__social-btn--youtube:hover, .front-contact__social-btn--youtube:focus-visible { background: #FF0000; border-color: #FF0000; color: #ffffff; } .front-contact__social-btn--instagram:hover, .front-contact__social-btn--instagram:focus-visible { background: #E1306C; border-color: #E1306C; color: #ffffff; } .front-contact__social-btn--facebook:hover, .front-contact__social-btn--facebook:focus-visible { background: #1877F2; border-color: #1877F2; color: #ffffff; } .front-contact__social-btn--tiktok:hover, .front-contact__social-btn--tiktok:focus-visible { background: #000000; border-color: #000000; color: #ffffff; } .front-contact__social-btn--whatsapp:hover, .front-contact__social-btn--whatsapp:focus-visible { background: #25D366; border-color: #25D366; color: #ffffff; } .front-contact__social-btn--phone:hover, .front-contact__social-btn--phone:focus-visible { background: var(--brand-primary, #10B79F); border-color: var(--brand-primary, #10B79F); color: #ffffff; } .front-contact__social-btn--linkedin:hover, .front-contact__social-btn--linkedin:focus-visible { background: #0A66C2; border-color: #0A66C2; color: #ffffff; } .front-contact__social-btn--email:hover, .front-contact__social-btn--email:focus-visible { background: var(--brand-red, #e63946); border-color: var(--brand-red, #e63946); color: #ffffff; } /* ─── Form card ───────────────────────────────────────────── */ .front-contact-form { position: relative; padding: clamp(22px, 3.5vw, 36px); border-radius: 22px; background: #ffffff; border: 1px solid rgba(15, 23, 41, 0.06); box-shadow: 0 1px 0 rgba(15, 23, 41, 0.04), 0 24px 60px -28px rgba(15, 23, 41, 0.30); } /* Defensive reset — the global stylesheet (frontend/css/style.css) ships Bootstrap-era rules that can push label/input layout around (e.g. label { display: inline-block; margin-bottom: .5rem }). Scoping `box-sizing`, `min-width: 0`, and explicit display values here guarantees the form lays out correctly regardless. */ .front-contact-form, .front-contact-form * { box-sizing: border-box; } .front-contact-form__header { margin-bottom: clamp(18px, 2.5vw, 24px); } .front-contact-form__title { margin: 0 0 0.35rem; font-size: clamp(1.25rem, 2.4vw, 1.55rem); font-weight: 800; line-height: 1.25; color: var(--brand-ink, #0f1729); } .front-contact-form__help { margin: 0; font-size: 0.88rem; color: var(--brand-ink-muted, #5c6570); } .front-contact-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 20px); margin: 0 0 clamp(14px, 1.8vw, 20px); } .front-contact-form__field { display: flex; flex-direction: column; gap: 0.45rem; margin: 0 0 clamp(14px, 1.8vw, 20px); /* Grid cells default to `min-width: auto`, which lets the input push the cell wider than its share. Forcing `min-width: 0` lets the input shrink correctly and stops the next cell from visually overlapping. */ min-width: 0; } .front-contact-form__row .front-contact-form__field { margin-bottom: 0; } .front-contact-form__label { display: block; margin: 0; font-size: 0.86rem; font-weight: 700; line-height: 1.35; color: var(--brand-ink-soft, #2d3a4e); } .front-contact-form__label span[aria-hidden="true"] { color: var(--brand-red, #e63946); margin-inline-start: 2px; } .front-contact-form__optional { font-size: 0.78rem; font-weight: 500; color: var(--brand-ink-muted, #5c6570); margin-inline-start: 4px; } .front-contact-form__input { display: block; width: 100%; margin: 0; padding: 0.78rem 0.95rem; background: var(--brand-white-2, #f6f9f8); color: var(--brand-ink, #0f1729); border: 1px solid rgba(15, 23, 41, 0.10); border-radius: 12px; font: inherit; font-size: 0.98rem; line-height: 1.5; appearance: none; -webkit-appearance: none; transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; } .front-contact-form__input::placeholder { color: rgba(92, 101, 112, 0.7); } .front-contact-form__input:hover { border-color: rgba(15, 23, 41, 0.18); } .front-contact-form__input:focus, .front-contact-form__input:focus-visible { outline: none; background: #ffffff; border-color: var(--brand-primary, #10B79F); box-shadow: 0 0 0 4px rgba(16, 183, 159, 0.16); } .front-contact-form__input[aria-invalid="true"] { border-color: var(--brand-red, #e63946); box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.12); } .front-contact-form__textarea { resize: vertical; min-height: 140px; } .front-contact-form__counter { margin: 0.35rem 0 0; font-size: 0.78rem; color: var(--brand-ink-muted, #5c6570); text-align: end; } /* ─── Submit row ──────────────────────────────────────────── */ .front-contact-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(12px, 2vw, 18px); justify-content: space-between; margin-top: clamp(6px, 1vw, 10px); } .front-contact-form__legal { flex: 1 1 240px; margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--brand-ink-muted, #5c6570); } .front-contact-form__submit { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.85rem 1.4rem; border: 0; border-radius: 14px; background: var(--brand-primary, #10B79F); color: #ffffff; font-size: 0.98rem; font-weight: 700; cursor: pointer; box-shadow: 0 14px 28px -10px rgba(16, 183, 159, 0.40); transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease; } .front-contact-form__submit:hover, .front-contact-form__submit:focus-visible { transform: translateY(-2px); background: var(--brand-primary-deep, #0e9d88); box-shadow: 0 18px 32px -10px rgba(14, 157, 136, 0.46); color: #ffffff; } .front-contact-form__submit:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; } .front-contact-form__submit svg { width: 18px; height: 18px; } .front-contact-form__submit-spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #ffffff; border-radius: 50%; animation: frontContactSpin 0.7s linear infinite; } @keyframes frontContactSpin { to { transform: rotate(360deg); } } .front-contact-form.is-sending .front-contact-form__submit { pointer-events: none; opacity: 0.85; } .front-contact-form.is-sending .front-contact-form__submit-icon { display: none; } .front-contact-form.is-sending .front-contact-form__submit-spinner { display: inline-block; } .front-contact-form__status { margin-top: clamp(14px, 2vw, 20px); padding: 0.85rem 1rem; border-radius: 12px; font-size: 0.95rem; line-height: 1.5; } .front-contact-form__status--success { background: var(--brand-primary-soft, rgba(16, 183, 159, 0.12)); border: 1px solid color-mix(in srgb, var(--brand-primary, #10B79F) 35%, transparent); color: var(--brand-primary-deep, #0e9d88); } .front-contact-form__status--error { background: rgba(230, 57, 70, 0.08); border: 1px solid rgba(230, 57, 70, 0.35); color: var(--brand-red, #e63946); } @supports not (border-color: color-mix(in srgb, red, white)) { .front-contact-form__status--success { border-color: rgba(16, 183, 159, 0.35); } } /* ─── Entrance animation ──────────────────────────────────── */ [data-contact-animate] { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease var(--front-contact-stagger, 0ms), transform 0.55s ease var(--front-contact-stagger, 0ms); } [data-contact-animate].is-in { opacity: 1; transform: translateY(0); } /* ─── Responsive ──────────────────────────────────────────── */ @media (max-width: 991px) { .front-contact__grid { grid-template-columns: 1fr; } } @media (max-width: 575px) { .front-contact__methods { grid-template-columns: 1fr; } .front-contact-form__row { grid-template-columns: 1fr; } .front-contact-form__actions { flex-direction: column; align-items: stretch; } .front-contact-form__submit { width: 100%; } } /* ─── Reduced motion ──────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { [data-contact-animate], .front-contact-method__link, .front-contact__social-btn, .front-contact-form__input, .front-contact-form__submit { transition: none !important; } [data-contact-animate] { opacity: 1; transform: none; } .front-contact-form__submit-spinner { animation: none; } } /* ── cta-download-section.blade.php ── */ .front-cta, .front-cta * { box-sizing: border-box; } .front-cta { position: relative; padding: clamp(3.5rem, 8vw, 6rem) 0; /* Brand canvas — GREEN. The conversion moment of the page. */ background: var(--brand-bg-green); color: #f4f7fc; overflow: hidden; isolation: isolate; } /* ─── Decorative background ────────────────────────────────────── */ .front-cta__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .front-cta__glow { position: absolute; border-radius: 50%; filter: blur(80px); } .front-cta__glow--a { width: 460px; height: 460px; top: -160px; inset-inline-start: -140px; background: var(--brand-primary); opacity: 0.45; } .front-cta__glow--b { width: 360px; height: 360px; bottom: -140px; inset-inline-end: -120px; background: var(--brand-red); opacity: 0.28; } .front-cta__shape { position: absolute; color: rgba(255, 255, 255, 0.16); opacity: 0.9; } .front-cta__shape--coin { width: clamp(70px, 9vw, 110px); height: clamp(70px, 9vw, 110px); top: 12%; inset-inline-end: 8%; animation: front-cta-float 9s ease-in-out infinite; } .front-cta__shape--sparkle { width: clamp(28px, 4vw, 44px); height: clamp(28px, 4vw, 44px); bottom: 18%; inset-inline-start: 10%; color: var(--brand-accent); opacity: 0.45; animation: front-cta-twinkle 4s ease-in-out infinite; } @keyframes front-cta-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(8deg); } } @keyframes front-cta-twinkle { 0%, 100% { transform: scale(1); opacity: 0.45; } 50% { transform: scale(1.2); opacity: 0.85; } } /* ─── Container & header ───────────────────────────────────────── */ .front-cta__container { position: relative; z-index: 1; max-width: 920px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 28px); text-align: center; } .front-cta__header { max-width: 44rem; margin: 0 auto clamp(1.5rem, 4vw, 2.25rem); } .front-cta__eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0 1rem; padding: 0.4rem 0.9rem; border-radius: 999px; background: var(--brand-primary-tint); border: 1px solid color-mix(in srgb, var(--brand-primary) 38%, transparent); color: #cbfff7; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; } .front-cta__eyebrow svg { width: 14px; height: 14px; color: var(--brand-accent); } .front-cta__title { margin: 0 0 0.9rem; font-size: clamp(1.7rem, 4.6vw, 2.9rem); font-weight: 900; line-height: 1.15; letter-spacing: -0.025em; color: #ffffff; text-wrap: balance; } .front-cta__lede { margin: 0 auto; max-width: 38rem; color: rgba(255, 255, 255, 0.82); line-height: 1.65; font-size: clamp(1rem, 2vw, 1.12rem); } /* ─── Store badges ─────────────────────────────────────────────── */ .front-cta__actions { margin: clamp(1.5rem, 4vw, 2rem) auto 0; display: flex; flex-wrap: wrap; gap: clamp(10px, 1.6vw, 14px); justify-content: center; } .front-cta-badge { display: inline-flex; align-items: center; gap: 0.75rem; min-width: 200px; padding: 0.7rem 1.15rem; border-radius: 14px; text-decoration: none; background: #0b0f1a; border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32); } .front-cta-badge:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.28); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45); color: #fff; text-decoration: none; } .front-cta-badge:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; } .front-cta-badge__icon { flex-shrink: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; } .front-cta-badge__icon svg { width: 100%; height: 100%; } .front-cta-badge--ios .front-cta-badge__icon { color: #fff; } .front-cta-badge__text { display: flex; flex-direction: column; line-height: 1.1; text-align: start; } .front-cta-badge__text small { font-size: 0.66rem; font-weight: 500; opacity: 0.78; letter-spacing: 0.03em; text-transform: uppercase; } .front-cta-badge__text strong { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; } /* ─── Trust strip ──────────────────────────────────────────────── */ .front-cta__trust { list-style: none; margin: clamp(1.5rem, 4vw, 2.25rem) auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(0.85rem, 2vw, 1.5rem) clamp(1.2rem, 3vw, 2rem); color: rgba(255, 255, 255, 0.78); } .front-cta__trust-item { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; } .front-cta__trust-item svg { width: 18px; height: 18px; color: var(--brand-primary); flex-shrink: 0; } .front-cta__trust-text { display: inline-flex; align-items: baseline; gap: 0.3rem; } .front-cta__trust-text strong { color: #ffffff; font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; } .front-cta__stars { display: inline-flex; gap: 1px; color: var(--brand-accent); } .front-cta__stars svg { width: 15px; height: 15px; color: inherit; } /* ─── Responsive tweaks ────────────────────────────────────────── */ @media (max-width: 575px) { .front-cta-badge { min-width: 0; flex: 1 1 calc(50% - 6px); padding: 0.65rem 0.85rem; } .front-cta-badge__text strong { font-size: 0.95rem; } .front-cta__shape--coin { inset-inline-end: -10%; top: 4%; opacity: 0.4; } .front-cta__shape--sparkle { inset-inline-start: -4%; } } @media (prefers-reduced-motion: reduce) { .front-cta__shape--coin, .front-cta__shape--sparkle, .front-cta-badge { animation: none !important; transition: none !important; } .front-cta-badge:hover { transform: none; } } /* ── entity-type-label.blade.php ── */ .ent-label { display: inline-flex; align-items: center; width: fit-content; padding: 0.22rem 0.62rem; border-radius: 999px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; border: 1px solid transparent; } [dir='rtl'] .ent-label { letter-spacing: 0; text-transform: none; font-size: 0.72rem; } .ent-label--partner { background: rgba(16, 183, 159, 0.14); color: var(--brand-primary-deep, #0e9d88); border-color: rgba(16, 183, 159, 0.28); } .ent-label--service { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; border-color: rgba(59, 130, 246, 0.25); } .ent-label--main-category { background: rgba(15, 23, 42, 0.08); color: var(--brand-ink, #12151a); border-color: rgba(15, 23, 42, 0.12); } .ent-label--sub-category { background: rgba(100, 116, 139, 0.12); color: #334155; border-color: rgba(100, 116, 139, 0.22); } .ent-label--on-dark { background: rgba(255, 255, 255, 0.16); color: #fff; border-color: rgba(255, 255, 255, 0.28); } .ent-label--on-dark.ent-label--service { background: rgba(255, 255, 255, 0.2); color: #fff; border-color: rgba(255, 255, 255, 0.35); } /* ── faq-section.blade.php ── */ .front-faq, .front-faq * { box-sizing: border-box; } .front-faq { position: relative; padding: clamp(3rem, 7vw, 5rem) 0; /* Continues the page rhythm: …GREEN → WHITE. */ background: var(--brand-bg-white); overflow: hidden; isolation: isolate; } .front-faq__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .front-faq__glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.45; } .front-faq__glow--a { width: 360px; height: 360px; top: -120px; inset-inline-start: -120px; background: var(--brand-primary-soft, rgba(16, 183, 159, 0.18)); } .front-faq__glow--b { width: 320px; height: 320px; bottom: -120px; inset-inline-end: -100px; background: var(--brand-red-soft, rgba(230, 57, 70, 0.10)); } .front-faq__container { position: relative; z-index: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 1.5rem); } /* ─── Header ─────────────────────────────────────────────────── */ .front-faq__header { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); } .front-faq__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 0.85rem; padding: 0.32rem 0.9rem; border-radius: 999px; border: 1px solid var(--brand-primary-tint, rgba(16, 183, 159, 0.24)); background: var(--brand-primary-soft, rgba(16, 183, 159, 0.10)); color: var(--brand-primary-deep, #0e9d88); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; } .front-faq__eyebrow svg { width: 16px; height: 16px; } .front-faq__title { margin: 0 0 0.85rem; font-size: clamp(1.65rem, 4.5vw, 2.4rem); font-weight: 800; line-height: 1.18; letter-spacing: -0.02em; color: var(--brand-ink, #12151a); } .front-faq__lede { margin: 0 auto; max-width: 56ch; color: var(--brand-ink-muted, #5c6570); line-height: 1.65; font-size: clamp(0.95rem, 2vw, 1.05rem); } /* ─── Groups ─────────────────────────────────────────────────── */ .front-faq__groups { display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); } .front-faq-group { position: relative; background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.07); border-radius: 22px; padding: clamp(1.1rem, 2.4vw, 1.6rem); box-shadow: 0 10px 30px -18px rgba(15, 23, 42, 0.20); animation: front-faq-rise 0.6s ease both; animation-delay: var(--front-faq-stagger, 0ms); } @media (prefers-reduced-motion: reduce) { .front-faq-group { animation: none; } } @keyframes front-faq-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .front-faq-group__head { display: flex; align-items: center; gap: 0.85rem; padding-bottom: 0.85rem; margin-bottom: 0.5rem; border-bottom: 1px dashed rgba(15, 23, 42, 0.10); } .front-faq-group__icon { flex-shrink: 0; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--brand-primary-soft, rgba(16, 183, 159, 0.12)); color: var(--brand-primary-deep, #0e9d88); } .front-faq-group__icon svg { width: 20px; height: 20px; } .front-faq-group__title { margin: 0; font-size: clamp(1.05rem, 2.4vw, 1.2rem); font-weight: 800; color: var(--brand-ink, #12151a); letter-spacing: -0.01em; } .front-faq-group__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } /* ─── Item / accordion ───────────────────────────────────────── */ .front-faq-item__panel { border-radius: 14px; background: rgba(247, 250, 249, 0.55); border: 1px solid transparent; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .front-faq-item__panel[open] { background: #ffffff; border-color: var(--brand-primary-tint, rgba(16, 183, 159, 0.24)); box-shadow: 0 12px 28px -18px rgba(16, 183, 159, 0.32); } .front-faq-item__summary { list-style: none; /* Firefox */ display: flex; align-items: center; gap: 0.85rem; padding: 0.95rem 1.05rem; font-size: clamp(0.96rem, 1.8vw, 1.02rem); font-weight: 700; line-height: 1.45; color: var(--brand-ink, #12151a); cursor: pointer; border-radius: 14px; transition: color 0.2s ease; } /* Hide the default disclosure triangle */ .front-faq-item__summary::-webkit-details-marker { display: none; } .front-faq-item__summary::marker { content: ''; } .front-faq-item__summary:focus-visible { outline: 2px solid var(--brand-primary, #10B79F); outline-offset: 2px; } .front-faq-item__panel:not([open]) .front-faq-item__summary:hover { color: var(--brand-primary-deep, #0e9d88); } .front-faq-item__q { flex: 1; } .front-faq-item__chevron { flex-shrink: 0; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--brand-primary-soft, rgba(16, 183, 159, 0.10)); color: var(--brand-primary-deep, #0e9d88); transition: transform 0.25s ease, background 0.2s ease, color 0.2s ease; } .front-faq-item__chevron svg { width: 16px; height: 16px; } .front-faq-item__panel[open] .front-faq-item__chevron { transform: rotate(180deg); background: var(--brand-primary, #10B79F); color: #ffffff; } .front-faq-item__answer { padding: 0 1.05rem 1.05rem; color: var(--brand-ink-soft, #2d3a4e); line-height: 1.7; font-size: 0.96rem; animation: front-faq-fade 0.3s ease both; } @keyframes front-faq-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .front-faq-item__chevron, .front-faq-item__answer { animation: none !important; transition: none !important; } } .front-faq-item__answer p { margin: 0; } /* ─── Still-have-question contact card ────────────────────────── */ .front-faq__contact { margin-top: clamp(2rem, 4vw, 3rem); } .front-faq__contact-card { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(1rem, 3vw, 2rem); padding: clamp(1.25rem, 3vw, 1.8rem); border-radius: 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary, #10B79F) 12%, white) 0%, color-mix(in srgb, var(--brand-primary, #10B79F) 4%, white) 100%); border: 1px solid var(--brand-primary-tint, rgba(16, 183, 159, 0.24)); box-shadow: 0 18px 40px -22px rgba(16, 183, 159, 0.32); overflow: hidden; } .front-faq__contact-text { flex: 1 1 240px; } .front-faq__contact-title { margin: 0 0 0.4rem; font-size: clamp(1.1rem, 2.4vw, 1.3rem); font-weight: 800; color: var(--brand-ink, #12151a); letter-spacing: -0.01em; } .front-faq__contact-lede { margin: 0; color: var(--brand-ink-soft, #2d3a4e); line-height: 1.55; font-size: 0.96rem; } .front-faq__contact-actions { display: inline-flex; flex-wrap: wrap; gap: 0.6rem; } .front-faq__contact-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.1rem; border-radius: 999px; font-size: 0.92rem; font-weight: 800; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease; } .front-faq__contact-btn svg { width: 18px; height: 18px; } .front-faq__contact-btn--primary { background: var(--brand-primary, #10B79F); color: #ffffff; box-shadow: 0 10px 22px -12px rgba(16, 183, 159, 0.65); } .front-faq__contact-btn--primary:hover { transform: translateY(-2px); background: var(--brand-primary-deep, #0e9d88); color: #ffffff; box-shadow: 0 14px 28px -12px rgba(16, 183, 159, 0.7); } .front-faq__contact-btn--ghost { background: #ffffff; color: #1d8540; border: 1px solid rgba(37, 211, 102, 0.30); } .front-faq__contact-btn--ghost:hover { transform: translateY(-2px); background: #25d366; color: #ffffff; border-color: #25d366; } /* ─── Small viewports ────────────────────────────────────────── */ @media (max-width: 580px) { .front-faq-item__summary { padding: 0.85rem 0.9rem; gap: 0.6rem; } .front-faq-item__answer { padding: 0 0.9rem 0.95rem; } .front-faq__contact-card { text-align: center; } .front-faq__contact-actions { justify-content: center; width: 100%; } } /* ── features-section.blade.php ── */ .front-features, .front-features * { box-sizing: border-box; } .front-features { padding: clamp(3rem, 7vw, 4.5rem) 0; /* Brand-aligned dark canvas (shared across hero/features/services). */ /* Brand canvas — GREEN. Third in the RED → WHITE → GREEN cycle. */ background: var(--brand-bg-green); overflow: hidden; } .front-features__container { max-width: 1200px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 28px); } .front-features__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 48px); align-items: start; } .front-features__eyebrow { margin: 0 0 0.35rem; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #10b79f; } .front-features__cards-lede { margin: 0 0 1.25rem; font-size: 0.95rem; color: #9ca3af; line-height: 1.5; max-width: 28rem; } .front-features__empty { margin: 0; padding: 2rem; border-radius: 14px; background: rgba(255, 255, 255, 0.04); color: #94a3b8; text-align: center; } .front-features__swiper-shell { max-width: 340px; margin-inline: 0; } .front-features-cards-swiper { padding: 12px 0 28px; overflow: visible; touch-action: pan-y; } .front-features-cards-swiper .swiper-slide { width: 280px; height: 280px; flex-shrink: 0; border-radius: 18px; overflow: hidden; } .front-features-card { width: 100%; height: 100%; border-radius: 18px; overflow: hidden; background: #1a222d; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); } .front-features-card__media { position: relative; width: 100%; height: 100%; min-height: 0; background: linear-gradient(145deg, #243040, #1a222d); } .front-features-card__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; -webkit-user-drag: none; user-select: none; pointer-events: none; } .front-features-card__placeholder { position: absolute; inset: 0; width: 100%; height: 100%; background: repeating-linear-gradient( -12deg, rgba(255, 255, 255, 0.03) 0 12px, rgba(255, 255, 255, 0.06) 12px 24px ); } .front-features-card__flags { position: absolute; inset-inline: 10px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; } .front-features-card__pill { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; backdrop-filter: blur(8px); } .front-features-card__pill--discount { background: rgba(230, 57, 70, 0.92); color: #fff; } .front-features-card__pill--hot { background: rgba(245, 158, 11, 0.95); color: #1c1003; } .front-features-card__pill--top { background: rgba(16, 183, 159, 0.95); color: #041312; } .front-features__detail { margin-bottom: clamp(1.75rem, 4vw, 2.25rem); padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .front-features__detail-label { margin: 0 0 0.4rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #10b79f; } .front-features__detail-name { margin: 0 0 0.65rem; font-size: clamp(1.35rem, 2.5vw, 1.75rem); font-weight: 800; line-height: 1.2; color: #f1f5f9; letter-spacing: -0.02em; } .front-features__detail-desc { margin: 0; font-size: clamp(0.95rem, 1.5vw, 1.05rem); line-height: 1.65; color: #cbd5e1; } .front-features__list-title { margin: 0 0 1rem; font-size: 1.05rem; font-weight: 800; color: #e2e8f0; } .front-features__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; } .front-features__item { display: flex; gap: 12px; align-items: flex-start; font-size: 0.94rem; line-height: 1.55; color: #94a3b8; } .front-features__item-icon { flex-shrink: 0; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(16, 183, 159, 0.15); color: #10b79f; font-size: 1rem; font-weight: 800; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 900px) { .front-features__grid { grid-template-columns: 1fr; } .front-features__swiper-shell { max-width: 300px; margin-inline: auto; } .front-features-cards-swiper .swiper-slide { width: 260px; height: 260px; } .front-features__col--content { order: 2; } .front-features__col--cards { order: 1; } } @media (prefers-reduced-motion: reduce) { .front-features-card { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } } /* ── footer.blade.php ── */ .front-footer, .front-footer * { box-sizing: border-box; } /* The footer doubles as a closing "green" canvas after the white FAQ. */ .front-footer { position: relative; color: rgba(255, 255, 255, 0.86); background: var(--brand-bg-green); padding: clamp(2.75rem, 6vw, 4.25rem) 0 0; overflow: hidden; isolation: isolate; font-size: 0.95rem; line-height: 1.6; } .front-footer__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Decorative glows */ .front-footer__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .front-footer__glow { position: absolute; border-radius: 50%; filter: blur(90px); } .front-footer__glow--a { width: 360px; height: 360px; top: -140px; inset-inline-start: -100px; background: var(--brand-primary, #10B79F); opacity: 0.20; } .front-footer__glow--b { width: 320px; height: 320px; bottom: -120px; inset-inline-end: -120px; background: var(--brand-red, #e63946); opacity: 0.12; } .front-footer__container { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 28px); } /* ─── Grid layout ─────────────────────────────────────────── */ .front-footer__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 3vw, 2.5rem); padding-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid rgba(255, 255, 255, 0.10); } /* Tablet — brand spans full width, rest 2 cols */ @media (min-width: 640px) { .front-footer__grid { grid-template-columns: repeat(2, 1fr); } .front-footer__col--brand, .front-footer__col--download { grid-column: 1 / -1; } } /* Desktop — full 5-column layout */ @media (min-width: 992px) { .front-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr; align-items: flex-start; } .front-footer__col--brand, .front-footer__col--download { grid-column: auto; } } .front-footer__col { min-width: 0; } .front-footer__col-title { margin: 0 0 1rem; font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: #ffffff; position: relative; padding-bottom: 0.55rem; } .front-footer__col-title::after { content: ''; position: absolute; bottom: 0; inset-inline-start: 0; width: 32px; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, var(--brand-primary, #10B79F), color-mix(in srgb, var(--brand-primary, #10B79F) 30%, transparent) ); } /* ─── Brand column ────────────────────────────────────────── */ .front-footer__brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #ffffff; margin-bottom: 1rem; } .front-footer__brand-logo { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: color-mix(in srgb, var(--brand-primary, #10B79F) 24%, transparent); border: 1px solid color-mix(in srgb, var(--brand-primary, #10B79F) 38%, transparent); flex-shrink: 0; } .front-footer__brand-logo img { width: 42px; height: 42px; object-fit: contain; } .front-footer__brand-name { font-size: 1.25rem; font-weight: 900; letter-spacing: -0.01em; color: #ffffff; } .front-footer__tagline { margin: 0 0 1.25rem; color: rgba(255, 255, 255, 0.78); line-height: 1.65; font-size: 0.94rem; max-width: 38ch; } /* ─── Social row ──────────────────────────────────────────── */ .front-footer__social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.55rem; } .front-footer__social-btn { --front-footer-social-bg: rgba(255, 255, 255, 0.08); --front-footer-social-fg: #ffffff; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--front-footer-social-bg); color: var(--front-footer-social-fg); border: 1px solid rgba(255, 255, 255, 0.10); text-decoration: none; transition: transform 0.18s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .front-footer__social-btn svg { width: 18px; height: 18px; } .front-footer__social-btn:hover, .front-footer__social-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32); } .front-footer__social-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* Brand colors on hover for each platform */ .front-footer__social-btn--youtube:hover { background: #ff0000; border-color: #ff0000; color: #fff; } .front-footer__social-btn--facebook:hover { background: #1877F2; border-color: #1877F2; color: #fff; } .front-footer__social-btn--tiktok:hover { background: #000000; border-color: #ffffff; color: #fff; } .front-footer__social-btn--whatsapp:hover { background: #25d366; border-color: #25d366; color: #fff; } .front-footer__social-btn--phone:hover { background: var(--brand-primary, #10B79F); border-color: var(--brand-primary, #10B79F); color: #fff; } .front-footer__social-btn--linkedin:hover { background: #0077B5; border-color: #0077B5; color: #fff; } .front-footer__social-btn--email:hover { background: #ea580c; border-color: #ea580c; color: #fff; } .front-footer__social-btn--instagram:hover { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); border-color: transparent; color: #fff; } /* ─── Link lists ──────────────────────────────────────────── */ .front-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; } .front-footer__link { display: inline-flex; align-items: center; gap: 0.55rem; color: rgba(255, 255, 255, 0.78); text-decoration: none; font-size: 0.94rem; font-weight: 500; line-height: 1.4; /* Unify mixed-case CMS content (e.g. "medical", "eye wear") with properly-cased copy so every link reads with the same rhythm. */ text-transform: capitalize; transition: color 0.18s ease, transform 0.18s ease; } /* The "View all …" trailing link reads as a sentence with its arrow, so opt it out of the per-word capitalization. */ .front-footer__link--more { text-transform: none; } .front-footer__link-dot { flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); transition: background 0.18s ease, transform 0.18s ease; } .front-footer__link:hover, .front-footer__link:focus-visible { color: #ffffff; text-decoration: none; } .front-footer__link:hover .front-footer__link-dot, .front-footer__link:focus-visible .front-footer__link-dot { background: var(--brand-primary, #10B79F); transform: scale(1.6); } .front-footer__link.is-active { color: #ffffff; font-weight: 700; } .front-footer__link.is-active .front-footer__link-dot { background: var(--brand-primary, #10B79F); transform: scale(1.6); } .front-footer__link--more { margin-top: 0.4rem; color: var(--brand-primary, #10B79F); font-weight: 700; } .front-footer__link--more:hover { color: color-mix(in srgb, var(--brand-primary, #10B79F) 50%, white); } /* ─── Download column ─────────────────────────────────────── */ .front-footer__download-lede { margin: 0 0 1rem; color: rgba(255, 255, 255, 0.76); font-size: 0.92rem; line-height: 1.55; max-width: 28ch; } .front-footer__badges { display: flex; flex-wrap: wrap; gap: 0.6rem; } .front-footer-badge { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.95rem; border-radius: 12px; background: #ffffff; color: #0f1729; text-decoration: none; border: 1px solid rgba(15, 23, 42, 0.06); transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; min-width: 150px; } .front-footer-badge:hover, .front-footer-badge:focus-visible { transform: translateY(-2px); background: #ffffff; color: #0f1729; text-decoration: none; box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.5); } .front-footer-badge:focus-visible { outline: 2px solid var(--brand-primary, #10B79F); outline-offset: 3px; } .front-footer-badge__icon { width: 26px; height: 26px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .front-footer-badge__icon svg { width: 100%; height: 100%; } .front-footer-badge__text { display: flex; flex-direction: column; line-height: 1; text-align: start; } .front-footer-badge__text small { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: #5c6570; margin-bottom: 2px; } .front-footer-badge__text strong { font-size: 0.95rem; font-weight: 800; color: #0f1729; } /* ─── Legal strip ─────────────────────────────────────────── */ .front-footer__legal { padding: 1.1rem 0 1.4rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.85rem; } .front-footer__copyright { margin: 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.62); } .front-footer__legal-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.2rem; } .front-footer__legal-link { font-size: 0.85rem; color: rgba(255, 255, 255, 0.70); text-decoration: none; transition: color 0.18s ease; } .front-footer__legal-link:hover, .front-footer__legal-link:focus-visible { color: #ffffff; text-decoration: underline; } /* ─── Small-screen tweaks ─────────────────────────────────── */ @media (max-width: 575px) { .front-footer { padding-top: 2.5rem; font-size: 0.92rem; } .front-footer__brand-logo { width: 48px; height: 48px; border-radius: 12px; } .front-footer__brand-logo img { width: 36px; height: 36px; } .front-footer__brand-name { font-size: 1.1rem; } .front-footer-badge { min-width: 0; flex: 1 1 140px; } .front-footer__legal { flex-direction: column; align-items: flex-start; gap: 0.55rem; } } @media (prefers-reduced-motion: reduce) { .front-footer__social-btn, .front-footer__link, .front-footer__link-dot, .front-footer-badge, .front-footer__legal-link { transition: none !important; } } /* ── hero-section.blade.php ── */ .front-hero, .front-hero * { box-sizing: border-box; } .front-hero { position: relative; overflow: hidden; overflow-x: clip; padding: 72px 0 56px; /* Brand canvas — RED (logo background). First in the RED → WHITE → GREEN cycle. */ background: var(--brand-bg-red); isolation: isolate; } .front-hero__container { width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: clamp(16px, 3.8vw, 40px); } .front-hero__bg-orb { position: absolute; border-radius: 999px; filter: blur(14px); z-index: -1; opacity: .5; } .front-hero__bg-orb--one { width: 420px; height: 420px; top: -120px; inset-inline-start: -120px; background: radial-gradient(circle, var(--brand-primary-glow), rgba(16, 183, 159, 0) 70%); animation: frontHeroFloat 8s ease-in-out infinite; } .front-hero__bg-orb--two { width: 360px; height: 360px; bottom: -130px; inset-inline-end: -90px; background: radial-gradient(circle, var(--brand-accent-soft), rgba(245, 158, 11, 0) 68%); animation: frontHeroFloat 9s ease-in-out infinite reverse; } .front-hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 36px; } .front-hero__content { max-width: 700px; opacity: 0; transform: translateY(22px); } .front-hero__badge { display: inline-flex; margin: 0 0 16px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(16, 183, 159, .52); background: rgba(16, 183, 159, .15); color: #cbfff7; font-size: .9rem; font-weight: 700; } .front-hero__title { margin: 0 0 14px; color: #fff; font-size: clamp(1.65rem, 5vw + 0.35rem, 3.35rem); line-height: 1.2; font-weight: 900; letter-spacing: -.01em; word-wrap: break-word; overflow-wrap: anywhere; } .front-hero__subtitle { margin: 0; color: #d5e3ef; font-size: clamp(0.95rem, 2.8vw + 0.55rem, 1.24rem); line-height: 1.75; max-width: 640px; word-wrap: break-word; overflow-wrap: anywhere; } .front-hero__actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; } /* Store badges — visually identical to the ones in the footer (.front-footer-badge) so the download CTA reads as one consistent component across the site. */ .front-hero-badge { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.95rem; border-radius: 12px; background: #ffffff; color: #0f1729; text-decoration: none; border: 1px solid rgba(15, 23, 42, 0.06); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18); min-width: 160px; transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease; } .front-hero-badge:hover, .front-hero-badge:focus-visible { transform: translateY(-2px); background: #ffffff; color: #0f1729; text-decoration: none; box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28); } .front-hero-badge:focus-visible { outline: 2px solid var(--brand-primary, #10B79F); outline-offset: 3px; } .front-hero-badge__icon { width: 28px; height: 28px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .front-hero-badge__icon svg { width: 100%; height: 100%; } .front-hero-badge__text { display: flex; flex-direction: column; line-height: 1; text-align: start; } .front-hero-badge__text small { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: #5c6570; margin-bottom: 3px; } .front-hero-badge__text strong { font-size: 0.98rem; font-weight: 800; color: #0f1729; } @media (prefers-reduced-motion: reduce) { .front-hero-badge { transition: none; } } .front-hero__trust { margin: 18px 0 0; color: #b9cddd; font-size: .98rem; } .front-hero__visual { position: relative; display: flex; justify-content: center; align-items: flex-start; width: 100%; max-width: 100%; padding-inline: 4px; opacity: 0; transform: translateY(22px); } .front-hero__phone { position: relative; z-index: 1; box-sizing: border-box; width: min(300px, 68vw); aspect-ratio: 10 / 20.5; max-height: min(620px, 78vh); max-height: min(620px, 78dvh); height: auto; padding: 11px; border-radius: 36px; border: 3px solid rgba(45, 45, 52, 0.95); background: linear-gradient(165deg, #3d3d44 0%, #1c1c22 40%, #121218 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 32px 55px rgba(0, 0, 0, 0.45), 0 8px 20px rgba(0, 0, 0, 0.25); } .front-hero__phone-speaker { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 28%; min-width: 64px; height: 26px; border-radius: 999px; background: #0a0a0f; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset; z-index: 3; pointer-events: none; } .front-hero__phone-screen { position: relative; width: 100%; height: 100%; border-radius: 26px; overflow: hidden; background: linear-gradient(180deg, #0f1729 0%, #151b2e 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset; } .front-hero__cube { width: 100%; height: 100%; min-height: 0; touch-action: manipulation; cursor: grab; } .front-hero__cube.swiper-grabbing { cursor: grabbing; } .front-hero__cube .swiper-slide { background: #0f1729; overflow: hidden; } .front-hero__cube .swiper-slide .front-hero__cube-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; box-sizing: border-box; } .front-hero__cube-pagination { position: absolute; bottom: 10px; left: 0; right: 0; z-index: 5; pointer-events: auto; } .front-hero__cube-pagination .swiper-pagination-bullet { width: 7px; height: 7px; background: rgba(255, 255, 255, 0.55); opacity: 1; } .front-hero__cube-pagination .swiper-pagination-bullet-active { background: #10b79f; } .front-hero__floating-card { position: absolute; z-index: 20; padding: 9px 12px; border-radius: 10px; color: #effffc; font-size: .85rem; font-weight: 700; background: rgba(16, 183, 159, .16); border: 1px solid rgba(16, 183, 159, .44); backdrop-filter: blur(8px); white-space: nowrap; pointer-events: none; } .front-hero__floating-card--one { top: 16%; inset-inline-start: -10px; animation: frontHeroCardFloat 4s ease-in-out infinite; } .front-hero__floating-card--two { bottom: 18%; inset-inline-end: -20px; animation: frontHeroCardFloat 4.6s ease-in-out infinite; } .front-hero [data-hero-animate].is-visible { animation: frontHeroReveal .65s ease forwards; } @keyframes frontHeroReveal { to { opacity: 1; transform: translateY(0); } } @keyframes frontHeroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } } @keyframes frontHeroCardFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @media (max-width: 991px) { .front-hero { padding: 40px 0 32px; } .front-hero__bg-orb--one { width: 260px; height: 260px; top: -80px; inset-inline-start: -80px; } .front-hero__bg-orb--two { width: 220px; height: 220px; bottom: -60px; inset-inline-end: -50px; } .front-hero__grid { grid-template-columns: 1fr; gap: 24px; } .front-hero__visual { justify-content: center; margin-top: 8px; } .front-hero__phone { width: min(270px, 76vw); aspect-ratio: 10 / 20.5; max-height: min(560px, 72vh); max-height: min(560px, 72dvh); height: auto; padding: 10px; border-radius: 32px; } .front-hero__phone-speaker { height: 24px; top: 6px; } .front-hero__phone-screen { border-radius: 22px; } } @media (max-width: 575px) { .front-hero { padding: 28px 0 28px; } .front-hero__container { padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right)); } .front-hero__badge { font-size: 0.82rem; padding: 6px 12px; } .front-hero__actions { flex-direction: column; align-items: stretch; } .front-hero-badge { width: 100%; min-width: 0; justify-content: center; padding: 0.7rem 1rem; } .front-hero__trust { font-size: 0.88rem; line-height: 1.55; } .front-hero__phone { width: min(260px, 82vw); aspect-ratio: 10 / 20.5; max-height: min(520px, 80vh); max-height: min(520px, 80svh); height: auto; padding: 9px; border-radius: 30px; margin-inline: auto; } .front-hero__phone-speaker { width: 32%; min-width: 56px; height: 22px; top: 5px; } .front-hero__phone-screen { border-radius: 20px; } .front-hero__floating-card { display: none; } } @media (min-width: 576px) and (max-width: 991px) { .front-hero__floating-card--one { inset-inline-start: 0; top: 10%; } .front-hero__floating-card--two { inset-inline-end: 0; bottom: 12%; } .front-hero__floating-card { font-size: .8rem; white-space: normal; max-width: 160px; } } @media (prefers-reduced-motion: reduce) { .front-hero__bg-orb--one, .front-hero__bg-orb--two, .front-hero__floating-card--one, .front-hero__floating-card--two, .front-hero [data-hero-animate] { animation: none !important; opacity: 1 !important; transform: none !important; } } /* ── how-to-use-section.blade.php ── */ .front-howto, .front-howto * { box-sizing: border-box; } .front-howto { position: relative; padding: clamp(3rem, 7vw, 5rem) 0; /* Brand canvas — WHITE. */ background: var(--brand-bg-white); overflow: hidden; } .front-howto__container { max-width: 1200px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 28px); } .front-howto__header { max-width: 44rem; margin: 0 auto clamp(1.8rem, 4vw, 2.6rem); text-align: center; } .front-howto__eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0 0 0.45rem; padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--brand-red-soft); border: 1px solid color-mix(in srgb, var(--brand-red) 24%, transparent); color: var(--brand-red-deep); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; } .front-howto__title { margin: 0 0 0.65rem; font-size: clamp(1.55rem, 4vw, 2.25rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: #12151a; } .front-howto__lede { margin: 0; color: #5c6570; line-height: 1.6; font-size: clamp(0.95rem, 2vw, 1.05rem); } .front-howto__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center; } @media (min-width: 880px) { .front-howto__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 3.5rem); } } /* ─── Visual / card slot ───────────────────────────────────────── */ .front-howto__visual { position: relative; margin: 0; display: flex; justify-content: center; align-items: center; min-height: 220px; } .front-howto__visual-halo { position: absolute; inset: 0; z-index: 0; background: radial-gradient(60% 50% at 50% 55%, var(--brand-red-glow) 0%, transparent 70%); filter: blur(40px); opacity: 0.55; pointer-events: none; } .front-howto__card-img { position: relative; z-index: 1; width: 100%; max-width: 460px; height: auto; border-radius: 18px; box-shadow: 0 30px 60px -28px rgba(193, 18, 31, 0.45), 0 12px 28px -12px rgba(15, 23, 42, 0.18); transform: rotate(-3deg); transition: transform 0.4s ease, box-shadow 0.4s ease; } @media (hover: hover) and (pointer: fine) { .front-howto__card-img:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 38px 70px -28px rgba(193, 18, 31, 0.55), 0 16px 32px -10px rgba(15, 23, 42, 0.22); } } /* Placeholder "card mock" — used until the real card image is added. */ .front-howto__card-mock { position: relative; z-index: 1; width: 100%; max-width: 440px; aspect-ratio: 1.585 / 1; padding: clamp(0.9rem, 2.2vw, 1.25rem); border-radius: 18px; background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-deep) 60%, var(--brand-red-darker) 100%); color: #fff; box-shadow: 0 30px 60px -28px rgba(193, 18, 31, 0.55), 0 12px 28px -12px rgba(15, 23, 42, 0.18); overflow: hidden; transform: rotate(-3deg); font-family: inherit; } .front-howto__card-mock-pattern { position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 2px); background-size: 14px 14px; opacity: 0.55; pointer-events: none; } .front-howto__card-mock-brand { position: relative; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0.6rem; border-radius: 10px; background: rgba(255, 255, 255, 0.92); color: #c1121f; } .front-howto__card-mock-percent { width: 26px; height: 26px; border-radius: 6px; background: var(--brand-primary); color: #fff; font-weight: 900; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; } .front-howto__card-mock-brand-text { display: flex; flex-direction: column; line-height: 1; font-weight: 800; font-size: 0.85rem; } .front-howto__card-mock-brand-text small { margin-top: 2px; font-size: 0.62rem; font-weight: 600; opacity: 0.8; letter-spacing: 0.04em; } .front-howto__card-mock-qr { position: absolute; top: clamp(0.9rem, 2.2vw, 1.25rem); inset-inline-end: clamp(0.9rem, 2.2vw, 1.25rem); width: 22%; aspect-ratio: 1; background: linear-gradient(45deg, transparent 48%, #fff 48% 52%, transparent 52%) 0 0 / 6px 6px, #fff; border-radius: 6px; border: 3px solid #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25); } .front-howto__card-mock-number { position: absolute; bottom: clamp(2.5rem, 7vw, 3.6rem); inset-inline-start: clamp(0.9rem, 2.2vw, 1.25rem); font-weight: 800; font-size: clamp(1.05rem, 2.4vw, 1.4rem); letter-spacing: 0.06em; } .front-howto__card-mock-name { position: absolute; bottom: clamp(1.6rem, 4vw, 2.2rem); inset-inline-start: clamp(0.9rem, 2.2vw, 1.25rem); font-weight: 700; font-size: clamp(0.78rem, 1.6vw, 0.9rem); opacity: 0.94; } .front-howto__card-mock-meta { position: absolute; bottom: clamp(0.6rem, 1.4vw, 0.85rem); inset-inline-end: clamp(0.9rem, 2.2vw, 1.25rem); display: flex; align-items: flex-end; gap: 0.85rem; text-align: end; } .front-howto__card-mock-exp { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; font-weight: 700; font-size: 0.85rem; } .front-howto__card-mock-exp small { font-size: 0.6rem; font-weight: 600; opacity: 0.78; } .front-howto__card-mock-tier { padding: 3px 9px; border-radius: 999px; background: #f3f4f6; color: #1f2937; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; } /* ─── Steps list ───────────────────────────────────────────────── */ .front-howto__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(0.85rem, 2vw, 1.1rem); } .front-howto-step { position: relative; display: grid; grid-template-columns: auto auto 1fr; align-items: start; gap: 0.85rem; padding: clamp(0.95rem, 2.2vw, 1.15rem); border-radius: 16px; background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.06); box-shadow: 0 8px 24px -16px rgba(15, 23, 42, 0.18); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; animation: front-howto-rise 0.6s ease both; animation-delay: var(--front-howto-stagger, 0ms); } @media (hover: hover) and (pointer: fine) { .front-howto-step:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand-red) 28%, transparent); box-shadow: 0 14px 30px -16px rgba(193, 18, 31, 0.28); } } .front-howto-step__index { flex-shrink: 0; width: 38px; height: 38px; border-radius: 999px; background: var(--brand-red-soft); color: var(--brand-red-deep); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.92rem; letter-spacing: 0.02em; border: 1px solid color-mix(in srgb, var(--brand-red) 22%, transparent); } .front-howto-step__icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--brand-red); background: rgba(230, 57, 70, 0.08); } .front-howto-step__icon svg { width: 20px; height: 20px; } .front-howto-step__body { min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; } .front-howto-step__title { margin: 0; font-size: clamp(1rem, 1.8vw, 1.08rem); font-weight: 800; color: #12151a; line-height: 1.3; letter-spacing: -0.01em; } .front-howto-step__text { margin: 0; color: #5c6570; line-height: 1.6; font-size: 0.93rem; } @keyframes front-howto-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .front-howto-step, .front-howto__card-img, .front-howto__card-mock { animation: none !important; transition: none !important; } .front-howto-step:hover, .front-howto__card-img:hover { transform: none; } } /* Visual tilt flip for RTL so the card leans the other way naturally */ [dir="rtl"] .front-howto__card-img, [dir="rtl"] .front-howto__card-mock { transform: rotate(3deg); } @media (max-width: 575px) { .front-howto-step { grid-template-columns: auto 1fr; row-gap: 0.45rem; } .front-howto-step__icon { display: none; } } /* ── immediate-value-section.blade.php ── */ .front-value, .front-value * { box-sizing: border-box; } .front-value { position: relative; padding: clamp(3rem, 8vw, 4.5rem) 0; /* Brand-aligned light canvas (shared across value/main-categories). */ /* Brand canvas — WHITE. Second in the RED → WHITE → GREEN cycle. */ background: var(--brand-bg-white); overflow: visible; } .front-value__inner { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: clamp(16px, 4vw, 28px); text-align: center; } .front-value__header { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); } .front-value__title { margin: 0 0 0.5rem; font-size: clamp(1.45rem, 4vw, 2rem); font-weight: 800; letter-spacing: -0.02em; color: #12151a; line-height: 1.2; } .front-value__lede { margin: 0 auto; max-width: 36rem; font-size: clamp(0.95rem, 2.2vw, 1.05rem); line-height: 1.55; color: #5c6570; } .front-value__stats { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 0; margin: 0 auto 2.5rem; padding: 0; list-style: none; max-width: 44rem; background: #fff; border-radius: 16px; border: 1px solid rgba(15, 23, 42, 0.06); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.06); } .front-value__stat { flex: 1 1 120px; min-width: 0; padding: 1.15rem 0.75rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; } .front-value__stat[aria-hidden="true"] { flex: 0 0 auto; padding: 0; min-height: 100%; align-self: stretch; } .front-value__stat-value { font-size: clamp(1.5rem, 4vw, 1.85rem); font-weight: 800; color: #0f1729; letter-spacing: -0.02em; line-height: 1.15; } .front-value__stat-star { color: #e6a00a; font-size: 0.92em; margin-inline-start: 0.08em; } .front-value__stat-label { font-size: 0.82rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; } .front-value__stat-divider { display: block; width: 1px; min-height: 3.25rem; margin-block: 0.85rem; background: linear-gradient( 180deg, transparent 0%, rgba(15, 23, 42, 0.12) 20%, rgba(15, 23, 42, 0.12) 80%, transparent 100% ); } .front-value__quotes-heading { margin: 0 0 0.4rem; font-size: 1.05rem; font-weight: 700; color: #10b79f; text-transform: uppercase; letter-spacing: 0.08em; } .front-value__play-source { margin: 0 0 1.75rem; font-size: 0.95rem; color: #6b7280; } .front-value__reviews-wrap { margin-inline: clamp(-12px, -2vw, 0px); padding-block: 12px 32px; overflow: visible; } .front-value-reviews-swiper { width: 100%; padding-bottom: 12px; overflow: visible; } .front-value-reviews-swiper .swiper-slide { width: min(430px, 92vw); height: auto; box-sizing: border-box; } .front-value-reviews-swiper .swiper-slide .front-value__card { height: 100%; } .front-value__card { margin: 0; padding: 1.55rem 1.45rem 1.35rem; background: #fff; border-radius: 18px; border: 1px solid rgba(15, 23, 42, 0.06); box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06); position: relative; text-align: start; display: flex; flex-direction: column; transition: box-shadow 0.25s ease; } .front-value__card::before { content: ''; position: absolute; inset-inline-start: 1.35rem; top: 0; width: 52px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, #10b79f, rgba(16, 183, 159, 0.35)); opacity: 0.9; } .front-value-reviews-swiper .swiper-slide-active .front-value__card { box-shadow: 0 12px 36px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(16, 183, 159, 0.14); } .front-value__card-top { display: flex; align-items: center; gap: 0.85rem; margin-top: 0.55rem; } .front-value__meta { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .front-value__author { font-style: normal; font-size: 1.08rem; font-weight: 700; color: #111827; line-height: 1.25; } .front-value__date { font-size: 0.88rem; font-weight: 600; color: #9ca3af; } .front-value__stars { display: flex; gap: 0.18rem; margin: 0.75rem 0 0.6rem; font-size: 1.15rem; line-height: 1; } .front-value__star { color: #e5e7eb; } .front-value__star.is-on { color: #e6a00a; } .front-value__quote { margin: 0 0 0.85rem; padding: 0; border: none; flex: 1 1 auto; } .front-value__quote p { margin: 0; font-size: 1.06rem; line-height: 1.62; color: #374151; } .front-value__helpful { margin: 0; font-size: 0.88rem; font-weight: 600; color: #6b7280; } .front-value__avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 999px; background: linear-gradient(145deg, rgba(16, 183, 159, 0.22), rgba(16, 183, 159, 0.08)); color: #0d9488; font-size: 0.95rem; font-weight: 800; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 767px) { .front-value__stats { flex-direction: column; border-radius: 14px; } .front-value__stat { padding: 1rem 1rem; } .front-value__stat[aria-hidden="true"] { display: none; } .front-value__stat--metric ~ .front-value__stat--metric { border-top: 1px solid rgba(15, 23, 42, 0.07); } .front-value-reviews-swiper .swiper-slide { width: min(380px, 94vw); } .front-value__quote p { font-size: 1.02rem; } .front-value__author { font-size: 1.02rem; } } @media (prefers-reduced-motion: reduce) { .front-value__card { transition: none; } } /* ── join-requests-section.blade.php ── */ /* ───────────────────────────────────────────────────────────── Join requests / become a partner Sits on the brand RED canvas so it pops between the white contact section above and the dark green CTA below — same three-color rhythm used across the home page. The form card itself stays white so inputs read effortlessly against the intensely colored backdrop. ───────────────────────────────────────────────────────────── */ .front-join { position: relative; padding: clamp(64px, 9vw, 120px) 0; background: var(--brand-bg-red, linear-gradient(165deg, #c1121f 0%, #8e0e18 55%, #5a0610 100%)); color: #ffffff; overflow: hidden; isolation: isolate; } .front-join__bg-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(80px); pointer-events: none; opacity: 0.5; } .front-join__bg-glow--one { width: 520px; height: 520px; inset-block-start: -180px; inset-inline-start: -180px; background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 70%); } .front-join__bg-glow--two { width: 480px; height: 480px; inset-block-end: -200px; inset-inline-end: -160px; background: radial-gradient(circle, var(--brand-primary-glow, rgba(16,183,159,.40)) 0%, transparent 70%); } /* A subtle dotted pattern adds depth without competing with the form. */ .front-join__bg-pattern { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.5px); background-size: 22px 22px; opacity: 0.55; pointer-events: none; } .front-join__container { max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } /* ─── Header ──────────────────────────────────────────────── */ .front-join__header { max-width: 760px; margin: 0 auto clamp(40px, 6vw, 64px); text-align: center; } .front-join__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 0.9rem; padding: 0.35rem 0.95rem; border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: #ffffff; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; backdrop-filter: blur(8px); } .front-join__title { margin: 0 0 0.9rem; font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: #ffffff; text-wrap: balance; } .front-join__lede { margin: 0; font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.65; color: rgba(255, 255, 255, 0.86); } /* ─── Two-column grid ─────────────────────────────────────── */ .front-join__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 3.5vw, 48px); align-items: start; } /* ─── Reasons column ──────────────────────────────────────── */ .front-join__reasons { list-style: none; margin: 0 0 clamp(22px, 3vw, 32px); padding: 0; display: grid; gap: clamp(12px, 1.8vw, 18px); } .front-join-reason { display: flex; align-items: flex-start; gap: 0.95rem; padding: clamp(16px, 2vw, 22px); border-radius: 18px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(10px); transition: transform 0.24s ease, background 0.24s ease, border-color 0.24s ease; } .front-join-reason:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); } .front-join-reason__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; background: rgba(255, 255, 255, 0.16); color: #ffffff; flex-shrink: 0; } .front-join-reason__icon svg { width: 22px; height: 22px; } .front-join-reason__body { min-width: 0; } .front-join-reason__title { margin: 0 0 0.3rem; font-size: 1.02rem; font-weight: 800; line-height: 1.3; color: #ffffff; } .front-join-reason__text { margin: 0; font-size: 0.92rem; line-height: 1.6; color: rgba(255, 255, 255, 0.80); } /* ─── Stats row ───────────────────────────────────────────── */ .front-join__stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.5vw, 14px); } .front-join__stat { padding: clamp(12px, 1.6vw, 16px); border-radius: 14px; background: rgba(0, 0, 0, 0.18); border: 1px solid rgba(255, 255, 255, 0.10); text-align: center; } .front-join__stat-value { display: block; font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 800; line-height: 1.15; color: #ffffff; letter-spacing: -0.01em; } .front-join__stat-label { display: block; margin-top: 0.25rem; font-size: 0.78rem; font-weight: 600; color: rgba(255, 255, 255, 0.74); } /* ─── Form card ───────────────────────────────────────────── */ .front-join-form { position: relative; padding: clamp(22px, 3.5vw, 36px); border-radius: 24px; background: #ffffff; color: var(--brand-ink, #0f1729); border: 1px solid rgba(15, 23, 41, 0.04); box-shadow: 0 1px 0 rgba(15, 23, 41, 0.04), 0 30px 70px -28px rgba(0, 0, 0, 0.45); } /* Same defensive reset used by the contact form — global stylesheet can otherwise inject inline labels or wrong margins. */ .front-join-form, .front-join-form * { box-sizing: border-box; } .front-join-form__header { margin-bottom: clamp(18px, 2.5vw, 24px); } .front-join-form__badge { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0 0.8rem; padding: 0.35rem 0.8rem; border-radius: 999px; background: var(--brand-red-soft, rgba(230,57,70,.10)); color: var(--brand-red-deep, #c1121f); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .front-join-form__badge svg { width: 14px; height: 14px; } .front-join-form__title { margin: 0 0 0.35rem; font-size: clamp(1.3rem, 2.4vw, 1.65rem); font-weight: 800; line-height: 1.25; color: var(--brand-ink, #0f1729); } .front-join-form__help { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--brand-ink-muted, #5c6570); } .front-join-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 20px); margin: 0 0 clamp(14px, 1.8vw, 20px); } .front-join-form__field { display: flex; flex-direction: column; gap: 0.45rem; margin: 0 0 clamp(14px, 1.8vw, 20px); min-width: 0; } .front-join-form__row .front-join-form__field { margin-bottom: 0; } .front-join-form__label { display: block; margin: 0; font-size: 0.86rem; font-weight: 700; line-height: 1.35; color: var(--brand-ink-soft, #2d3a4e); } .front-join-form__label span[aria-hidden="true"] { color: var(--brand-red, #e63946); margin-inline-start: 2px; } .front-join-form__optional { font-size: 0.78rem; font-weight: 500; color: var(--brand-ink-muted, #5c6570); margin-inline-start: 4px; } .front-join-form__input { display: block; width: 100%; margin: 0; padding: 0.78rem 0.95rem; background: var(--brand-white-2, #f6f9f8); color: var(--brand-ink, #0f1729); border: 1px solid rgba(15, 23, 41, 0.10); border-radius: 12px; font: inherit; font-size: 0.98rem; line-height: 1.5; appearance: none; -webkit-appearance: none; transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; } .front-join-form__input::placeholder { color: rgba(92, 101, 112, 0.7); } .front-join-form__input:hover { border-color: rgba(15, 23, 41, 0.18); } .front-join-form__input:focus, .front-join-form__input:focus-visible { outline: none; background: #ffffff; border-color: var(--brand-red, #e63946); box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.14); } .front-join-form__input[aria-invalid="true"] { border-color: var(--brand-red, #e63946); box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.18); } .front-join-form__textarea { resize: vertical; min-height: 120px; } .front-join-form__counter { margin: 0.35rem 0 0; font-size: 0.78rem; color: var(--brand-ink-muted, #5c6570); text-align: end; } /* ─── Submit row ──────────────────────────────────────────── */ .front-join-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(12px, 2vw, 18px); justify-content: space-between; margin-top: clamp(6px, 1vw, 10px); } .front-join-form__legal { flex: 1 1 240px; margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--brand-ink-muted, #5c6570); } .front-join-form__submit { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.9rem 1.5rem; border: 0; border-radius: 14px; background: var(--brand-red, #e63946); color: #ffffff; font-size: 0.98rem; font-weight: 800; cursor: pointer; box-shadow: 0 16px 32px -10px rgba(230, 57, 70, 0.45); transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease; } .front-join-form__submit:hover, .front-join-form__submit:focus-visible { transform: translateY(-2px); background: var(--brand-red-deep, #c1121f); box-shadow: 0 20px 36px -10px rgba(193, 18, 31, 0.52); color: #ffffff; } .front-join-form__submit:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; } .front-join-form__submit svg { width: 18px; height: 18px; } .front-join-form__submit-spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #ffffff; border-radius: 50%; animation: frontJoinSpin 0.7s linear infinite; } @keyframes frontJoinSpin { to { transform: rotate(360deg); } } .front-join-form.is-sending .front-join-form__submit { pointer-events: none; opacity: 0.85; } .front-join-form.is-sending .front-join-form__submit-icon { display: none; } .front-join-form.is-sending .front-join-form__submit-spinner { display: inline-block; } .front-join-form__status { margin-top: clamp(14px, 2vw, 20px); padding: 0.85rem 1rem; border-radius: 12px; font-size: 0.95rem; line-height: 1.5; } .front-join-form__status--success { background: var(--brand-primary-soft, rgba(16, 183, 159, 0.12)); border: 1px solid color-mix(in srgb, var(--brand-primary, #10B79F) 35%, transparent); color: var(--brand-primary-deep, #0e9d88); } .front-join-form__status--error { background: rgba(230, 57, 70, 0.08); border: 1px solid rgba(230, 57, 70, 0.35); color: var(--brand-red, #e63946); } @supports not (border-color: color-mix(in srgb, red, white)) { .front-join-form__status--success { border-color: rgba(16, 183, 159, 0.35); } } /* ─── Entrance animation ──────────────────────────────────── */ [data-join-animate] { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease var(--front-join-stagger, 0ms), transform 0.55s ease var(--front-join-stagger, 0ms); } [data-join-animate].is-in { opacity: 1; transform: translateY(0); } /* ─── Responsive ──────────────────────────────────────────── */ @media (max-width: 991px) { .front-join__grid { grid-template-columns: 1fr; } } @media (max-width: 575px) { .front-join__stats { grid-template-columns: 1fr; } .front-join-form__row { grid-template-columns: 1fr; } .front-join-form__actions { flex-direction: column; align-items: stretch; } .front-join-form__submit { width: 100%; } } /* ─── Reduced motion ──────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { [data-join-animate], .front-join-reason, .front-join-form__input, .front-join-form__submit { transition: none !important; } [data-join-animate] { opacity: 1; transform: none; } .front-join-form__submit-spinner { animation: none; } } /* ── main-categories-grid.blade.php ── */ /* ───────────────────────────────────────────────────────────── Main Categories grid page White canvas — follows the RED (banner) → WHITE (grid) → GREEN (CTA) rhythm of inner pages. ───────────────────────────────────────────────────────────── */ .front-mcg { position: relative; padding: clamp(56px, 8vw, 100px) 0; background: var(--brand-bg-white, #ffffff); color: var(--brand-ink, #0f1729); overflow: hidden; isolation: isolate; } .front-mcg--empty { padding: clamp(48px, 8vw, 80px) 0; } .front-mcg__bg-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(80px); pointer-events: none; opacity: .45; } .front-mcg__bg-glow--one { width: 480px; height: 480px; inset-block-start: -180px; inset-inline-end: -160px; background: radial-gradient(circle, var(--brand-primary-glow, rgba(16,183,159,.32)) 0%, transparent 70%); } .front-mcg__bg-glow--two { width: 420px; height: 420px; inset-block-end: -180px; inset-inline-start: -140px; background: radial-gradient(circle, var(--brand-red-glow, rgba(230,57,70,.28)) 0%, transparent 70%); } /* ── container ─── */ .front-mcg__container { max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } /* ── header ─── */ .front-mcg__header { max-width: 680px; margin: 0 auto clamp(32px, 5vw, 52px); text-align: center; } .front-mcg__eyebrow { display: inline-flex; align-items: center; margin: 0 0 0.8rem; padding: 0.35rem 0.9rem; border-radius: 999px; background: var(--brand-primary-soft, rgba(16,183,159,.12)); color: var(--brand-primary-deep, #0e9d88); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .front-mcg__title { margin: 0 0 0.75rem; font-size: clamp(1.7rem, 3.2vw, 2.35rem); font-weight: 800; line-height: 1.18; letter-spacing: -0.015em; color: var(--brand-ink, #0f1729); text-wrap: balance; } .front-mcg__lede { margin: 0; font-size: clamp(0.98rem, 1.5vw, 1.08rem); line-height: 1.65; color: var(--brand-ink-muted, #5c6570); } .front-mcg__empty { text-align: center; font-size: 1.05rem; color: var(--brand-ink-muted, #5c6570); padding: clamp(32px, 6vw, 56px) 0; } /* ── grid ─── */ .front-mcg__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 26px); } /* ── card wrapper (handles animation stagger) ─── */ .front-mcg-card-wrap { display: flex; } /* ── card ─── */ .front-mcg-card { display: flex; flex-direction: column; width: 100%; border-radius: 22px; background: #ffffff; border: 1px solid rgba(15,23,41,.07); box-shadow: 0 1px 0 rgba(15,23,41,.04), 0 16px 36px -22px rgba(15,23,41,.22); overflow: hidden; text-decoration: none; color: var(--brand-ink, #0f1729); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .front-mcg-card:hover, .front-mcg-card:focus-visible { transform: translateY(-5px); border-color: rgba(16,183,159,.35); box-shadow: 0 1px 0 rgba(15,23,41,.04), 0 28px 52px -22px rgba(15,23,41,.30); text-decoration: none; color: var(--brand-ink, #0f1729); } .front-mcg-card:focus-visible { outline: 2px solid var(--brand-primary, #10B79F); outline-offset: 3px; } /* ── media block ─── */ .front-mcg-card__media { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; flex-shrink: 0; } .front-mcg-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .front-mcg-card:hover .front-mcg-card__img { transform: scale(1.05); } /* Branded placeholder when there's no image */ .front-mcg-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse 70% 60% at 30% 30%, var(--brand-primary-tint, rgba(16,183,159,.22)) 0%, transparent 60%), linear-gradient(140deg, var(--brand-dark-1, #0a1620) 0%, var(--brand-dark-2, #0d2128) 100%); } .front-mcg-card__placeholder-icon { width: 56px; height: 56px; color: rgba(255,255,255,.22); } /* Dark gradient overlay for text legibility over images */ .front-mcg-card__overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(15,23,41,.0) 0%, rgba(15,23,41,.55) 100% ); pointer-events: none; } /* ── card body ─── */ .front-mcg-card__body { flex: 1; display: flex; flex-direction: column; padding: clamp(14px, 2vw, 20px); gap: 0.55rem; } .front-mcg-card__type { margin-bottom: 0.35rem; } .front-mcg-card__name { margin: 0; font-size: clamp(1.05rem, 1.7vw, 1.22rem); font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; color: var(--brand-ink, #0f1729); } .front-mcg-card__desc { margin: 0; font-size: 0.88rem; line-height: 1.6; color: var(--brand-ink-muted, #5c6570); /* Clamp to 3 lines max so the grid stays visually uniform */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } /* Stats row — provider count + sub-category count side by side */ .front-mcg-card__stats { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0; padding: 0.55rem 0.75rem; border-radius: 10px; background: var(--brand-white-2, #f6f9f8); border: 1px solid rgba(15,23,41,.06); } .front-mcg-card__stat { display: inline-flex; align-items: center; gap: 5px; font-size: 0.84rem; font-weight: 500; color: var(--brand-ink-soft, #2d3a4e); white-space: nowrap; } .front-mcg-card__stat strong { font-weight: 800; color: var(--brand-ink, #0f1729); } .front-mcg-card__stat svg { width: 14px; height: 14px; flex-shrink: 0; } .front-mcg-card__stat--providers svg { color: var(--brand-primary, #10B79F); } .front-mcg-card__stat--cats svg { color: var(--brand-red, #e63946); } /* Vertical divider between the two stats */ .front-mcg-card__stat--cats:not(:first-child)::before { content: ""; display: inline-block; width: 1px; height: 12px; background: rgba(15,23,41,.14); margin-inline-end: 0.5rem; } /* "Explore →" CTA line */ .front-mcg-card__cta { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 0.6rem; font-size: 0.86rem; font-weight: 700; color: var(--brand-primary-deep, #0e9d88); transition: gap 0.2s ease, color 0.2s ease; } .front-mcg-card:hover .front-mcg-card__cta, .front-mcg-card:focus-visible .front-mcg-card__cta { color: var(--brand-primary, #10B79F); gap: 9px; } .front-mcg-card__arrow { font-style: normal; transition: transform 0.2s ease; } .front-mcg-card:hover .front-mcg-card__arrow, .front-mcg-card:focus-visible .front-mcg-card__arrow { transform: translateX(3px); } [dir="rtl"] .front-mcg-card:hover .front-mcg-card__arrow, [dir="rtl"] .front-mcg-card:focus-visible .front-mcg-card__arrow { transform: translateX(-3px); } /* ── entrance animation ─── */ [data-mcg-animate] { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease var(--front-mcg-stagger, 0ms), transform 0.5s ease var(--front-mcg-stagger, 0ms); } [data-mcg-animate].is-in { opacity: 1; transform: translateY(0); } /* ── responsive ─── */ @media (max-width: 991px) { .front-mcg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575px) { .front-mcg__grid { grid-template-columns: 1fr; } .front-mcg-card__media { aspect-ratio: 4 / 3; } } /* ── reduced motion ─── */ @media (prefers-reduced-motion: reduce) { [data-mcg-animate] { opacity: 1; transform: none; transition: none; } .front-mcg-card, .front-mcg-card__img, .front-mcg-card__cta, .front-mcg-card__arrow { transition: none !important; } } /* ── main-categories-section.blade.php ── */ .front-mc, .front-mc * { box-sizing: border-box; } .front-mc { position: relative; padding: clamp(3rem, 7vw, 4.5rem) 0; /* Brand canvas — WHITE. Cycle: RED → WHITE → GREEN → WHITE → GREEN → RED. */ background: var(--brand-bg-white); overflow: hidden; } .front-mc__container { max-width: 1200px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 28px); } .front-mc__header { max-width: 44rem; margin: 0 auto clamp(1.75rem, 4vw, 2.5rem); text-align: center; } .front-mc__banner { margin: 0 0 clamp(1.5rem, 4vw, 2.25rem); border-radius: 20px; overflow: hidden; box-shadow: 0 18px 48px -28px rgba(15, 23, 42, 0.45); } .front-mc__banner-img { display: block; width: 100%; height: auto; object-fit: cover; } .front-mc__eyebrow { margin: 0 0 0.4rem; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #10b79f; } .front-mc__title { margin: 0 0 0.65rem; font-size: clamp(1.5rem, 4vw, 2.15rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: #12151a; } .front-mc__lede { margin: 0; color: #5c6570; line-height: 1.6; font-size: clamp(0.95rem, 2vw, 1.05rem); } /* Scoped responsive flex grid (Bootstrap-like, no global dependency) */ .front-mc__row { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; margin-inline: calc(-1 * clamp(8px, 1.1vw, 11px)); } .front-mc__row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; min-width: 0; padding-inline: clamp(8px, 1.1vw, 11px); margin-bottom: clamp(14px, 2vw, 22px); } @media (min-width: 768px) { .front-mc__row > .col-md-6 { flex: 0 0 50%; max-width: 50%; } } @media (min-width: 992px) { .front-mc__row > .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } } .front-mc-card { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; text-decoration: none; color: inherit; background: #fff; border-radius: 18px; overflow: hidden; border: 1px solid rgba(15, 23, 42, 0.06); box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; isolation: isolate; } .front-mc-card:focus-visible { outline: 2px solid #10b79f; outline-offset: 3px; } @media (hover: hover) and (pointer: fine) { .front-mc-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12); border-color: rgba(16, 183, 159, 0.24); } .front-mc-card:hover .front-mc-card__img { transform: scale(1.06); } .front-mc-card:hover .front-mc-card__arrow { transform: translateX(0.25rem); } [dir="rtl"] .front-mc-card:hover .front-mc-card__arrow { transform: translateX(-0.25rem); } } .front-mc-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(145deg, #e2e8f0, #cbd5e1); } .front-mc-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.5s ease; -webkit-user-drag: none; user-select: none; } .front-mc-card__img--placeholder { background: radial-gradient(circle at 30% 30%, rgba(16, 183, 159, 0.25), transparent 60%), repeating-linear-gradient(-12deg, rgba(255, 255, 255, 0.4) 0 12px, rgba(255, 255, 255, 0.15) 12px 24px); } .front-mc-card__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 23, 42, 0) 35%, rgba(15, 23, 42, 0.55) 100%); } .front-mc-card__count { position: absolute; top: 12px; inset-inline-end: 12px; display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #0f1729; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18); backdrop-filter: blur(6px); font-size: 0.82rem; font-weight: 800; white-space: nowrap; } .front-mc-card__body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1 1 auto; } .front-mc-card__name { margin: 0; font-size: 1.05rem; font-weight: 800; color: #12151a; line-height: 1.3; letter-spacing: -0.01em; } .front-mc-card__desc { margin: 0; font-size: 0.9rem; line-height: 1.5; color: #6b7280; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .front-mc-card__cta { margin-top: auto; padding-top: 0.5rem; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 700; color: #10b79f; text-transform: uppercase; letter-spacing: 0.06em; } .front-mc-card__arrow { display: inline-block; transition: transform 0.25s ease; } @media (max-width: 575px) { .front-mc-card__media { aspect-ratio: 4 / 3; } .front-mc-card__body { padding: 0.85rem 0.95rem 1rem; gap: 0.3rem; } .front-mc-card__name { font-size: 0.98rem; } .front-mc-card__desc { display: none; } .front-mc-card__cta { font-size: 0.78rem; } .front-mc-card__count { top: 8px; inset-inline-end: 8px; padding: 4px 9px; font-size: 0.75rem; } } @media (prefers-reduced-motion: reduce) { .front-mc-card, .front-mc-card__img, .front-mc-card__arrow { transition: none !important; } .front-mc-card:hover { transform: none; } } /* ── main-layout.blade.php ── */ /* ───────────────────────────────────────────────────────────── Quick Discount — shared brand palette Anchored on the logo's teal (#10B79F). Every front section should consume these tokens rather than hard-coding colors, so backgrounds and accents stay in sync across the page. ───────────────────────────────────────────────────────────── */ :root { /* ─── Brand identity ──────────────────────────────────── The logo carries two equally important brand colors: • Red — the icon background (#e63946 family) • Green — the teal "%" mark (#10B79F family) Plus white as the breathing/contrast canvas. These three colors alternate across home page sections in the order RED → WHITE → GREEN → RED → WHITE → GREEN. */ /* GREEN (teal) — primary brand mark color */ --brand-primary: #10B79F; --brand-primary-deep: #0e9d88; --brand-primary-soft: rgba(16, 183, 159, 0.12); --brand-primary-tint: rgba(16, 183, 159, 0.22); --brand-primary-glow: rgba(16, 183, 159, 0.32); /* RED — logo background color */ --brand-red: #e63946; --brand-red-deep: #c1121f; --brand-red-darker: #8e0e18; --brand-red-darkest: #5a0610; --brand-red-soft: rgba(230, 57, 70, 0.10); --brand-red-tint: rgba(230, 57, 70, 0.22); --brand-red-glow: rgba(230, 57, 70, 0.40); /* Warm accent (used sparingly inside cards/badges) */ --brand-accent: #f59e0b; --brand-accent-soft: rgba(245, 158, 11, 0.18); /* Neutral ink */ --brand-ink: #0f1729; --brand-ink-soft: #2d3a4e; --brand-ink-muted: #5c6570; /* GREEN section canvas — slightly teal-tinted near-black */ --brand-dark-1: #0a1620; --brand-dark-2: #0d2128; --brand-dark-3: #07111a; /* WHITE section canvas */ --brand-white-1: #ffffff; --brand-white-2: #f6f9f8; /* ─── Three canvases the page rotates through ───────── */ /* RED canvas (deep logo red, with subtle highlight + teal complement) */ --brand-bg-red: radial-gradient(ellipse 70% 55% at 15% 0%, rgba(255, 255, 255, 0.06) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 85% 100%, var(--brand-primary-tint) 0%, transparent 60%), linear-gradient(165deg, var(--brand-red-deep) 0%, var(--brand-red-darker) 55%, var(--brand-red-darkest) 100%); /* WHITE canvas (clean, with two faint brand glows for life) */ --brand-bg-white: radial-gradient(ellipse 70% 45% at 15% 0%, var(--brand-primary-soft) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 85% 100%, var(--brand-red-soft) 0%, transparent 60%), linear-gradient(180deg, var(--brand-white-1) 0%, var(--brand-white-2) 100%); /* GREEN canvas (teal-tinted near-black) */ --brand-bg-green: radial-gradient(ellipse 70% 50% at 15% 0%, var(--brand-primary-tint) 0%, transparent 55%), radial-gradient(ellipse 60% 45% at 85% 100%, var(--brand-red-tint) 0%, transparent 60%), linear-gradient(165deg, var(--brand-dark-1) 0%, var(--brand-dark-2) 50%, var(--brand-dark-3) 100%); /* Legacy aliases (kept so older selectors keep working) */ --brand-bg-dark: var(--brand-bg-green); --brand-bg-light: var(--brand-bg-white); } html { overflow-x: clip; } body#page-top { overflow-x: clip; max-width: 100vw; } .front-page-skeleton { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; background: #0f0f10; transition: opacity .45s ease, visibility .45s ease; } .front-page-skeleton.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .front-skel { background: linear-gradient( 90deg, #252528 0%, #35353a 45%, #252528 90% ); background-size: 200% 100%; animation: frontSkelShimmer 1.35s ease-in-out infinite; border-radius: 10px; } .front-skel-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px clamp(16px, 3.8vw, 40px); border-bottom: 1px solid rgba(255, 255, 255, .06); } .front-skel-nav__brand { width: min(160px, 36vw); height: 40px; border-radius: 12px; } .front-skel-nav__links { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; } .front-skel-nav__link { width: 72px; height: 14px; border-radius: 6px; } .front-skel-main { flex: 1; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 36px; max-width: 1240px; width: 100%; margin: 0 auto; padding: 48px clamp(16px, 3.8vw, 40px) 40px; } .front-skel-hero__badge { width: 140px; height: 32px; border-radius: 999px; margin-bottom: 20px; } .front-skel-hero__title { width: 100%; max-width: 520px; height: clamp(36px, 6vw, 48px); border-radius: 12px; margin-bottom: 16px; } .front-skel-hero__title--short { max-width: 380px; height: clamp(36px, 6vw, 48px); margin-bottom: 20px; } .front-skel-hero__line { height: 14px; border-radius: 6px; margin-bottom: 12px; } .front-skel-hero__line:last-of-type { max-width: 85%; margin-bottom: 28px; } .front-skel-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; } .front-skel-hero__btn { width: 148px; height: 44px; border-radius: 10px; } .front-skel-hero__trust { width: min(100%, 420px); height: 16px; border-radius: 6px; margin-top: 20px; } .front-skel-hero__visual { display: flex; justify-content: center; } .front-skel-hero__phone { width: min(280px, 62vw); height: min(520px, 58vh); border-radius: 32px; } @keyframes frontSkelShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @media (max-width: 991px) { .front-skel-main { grid-template-columns: 1fr; padding-top: 32px; } .front-skel-nav__links { display: none; } .front-skel-hero__visual { justify-content: flex-start; } .front-skel-hero__phone { height: min(400px, 50vh); } } @media (prefers-reduced-motion: reduce) { .front-skel { animation: none; background: #2a2a2d; } } /* ── mc-detail-featured-providers.blade.php ── */ .mc-dfp, .mc-dfp * { box-sizing: border-box; } .mc-dfp { position: relative; padding: clamp(3rem, 6vw, 5rem) 0; background: #f8fafc; overflow: hidden; isolation: isolate; } .mc-dfp__glow { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; } .mc-dfp__glow--a { width: 380px; height: 380px; inset-block-start: -140px; inset-inline-end: -100px; background: rgba(16,183,159,.12); } .mc-dfp__glow--b { width: 300px; height: 300px; inset-block-end: -120px; inset-inline-start: -80px; background: rgba(193,18,31,.08); } .mc-dfp__container { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } /* ── Header ── */ .mc-dfp__header { text-align: center; margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); } .mc-dfp__eyebrow { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .85rem; padding: .32rem .9rem; border-radius: 999px; background: rgba(255,193,7,.13); border: 1px solid rgba(255,193,7,.30); color: #b45309; font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; } .mc-dfp__eyebrow svg { width: 13px; height: 13px; color: #f59e0b; } .mc-dfp__title { margin: 0 0 .7rem; font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; color: var(--brand-ink, #12151a); text-wrap: balance; } .mc-dfp__lede { margin: 0 auto; max-width: 52ch; font-size: clamp(.95rem, 1.8vw, 1.05rem); line-height: 1.65; color: var(--brand-ink-muted, #5c6570); } /* ── Grid ── */ .mc-dfp__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(1rem, 2vw, 1.4rem); } .mc-dfp-card-wrap { animation: mc-dfp-rise .55s ease both; animation-delay: var(--mc-dfp-stagger, 0ms); } @keyframes mc-dfp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .mc-dfp-card-wrap { animation: none; } } /* ── Card ── */ .mc-dfp-card { display: flex; flex-direction: column; height: 100%; border-radius: 20px; overflow: hidden; border: 1.5px solid rgba(15,23,42,.07); background: #ffffff; text-decoration: none; color: inherit; box-shadow: 0 4px 20px -12px rgba(15,23,42,.16); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .mc-dfp-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(15,23,42,.24); border-color: var(--brand-primary, #10B79F); color: inherit; text-decoration: none; } /* Media */ .mc-dfp-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: linear-gradient(135deg, rgba(16,183,159,.15) 0%, rgba(193,18,31,.10) 100%); } .mc-dfp-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .mc-dfp-card:hover .mc-dfp-card__img { transform: scale(1.06); } .mc-dfp-card__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--brand-primary-deep, #0e9d88); } .mc-dfp-card__placeholder svg { width: 40px; height: 40px; opacity: .5; } .mc-dfp-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,23,42,.55) 0%, transparent 55%); pointer-events: none; } /* Badges */ .mc-dfp-card__badges { position: absolute; inset-block-start: .6rem; inset-inline-start: .6rem; display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; } .mc-dfp-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .mc-dfp-badge svg { width: 10px; height: 10px; } .mc-dfp-badge--top { background: #f59e0b; color: #1a0a00; } .mc-dfp-badge--hot { background: #ef4444; color: #fff; } .mc-dfp-card__discount { position: absolute; inset-block-end: .6rem; inset-inline-end: .6rem; padding: .28rem .7rem; border-radius: 999px; background: rgba(193,18,31,.90); color: #fff; font-size: .78rem; font-weight: 700; backdrop-filter: blur(4px); } .mc-dfp-card__discount strong { font-size: .92rem; } /* Body */ .mc-dfp-card__body { flex: 1; display: flex; flex-direction: column; padding: 1rem 1.1rem 1.1rem; gap: .4rem; } .mc-dfp-card__name { margin: 0; font-size: 1.03rem; font-weight: 800; color: var(--brand-ink, #12151a); letter-spacing: -.01em; } .mc-dfp-card__desc { margin: 0; flex: 1; font-size: .89rem; line-height: 1.6; color: var(--brand-ink-muted, #5c6570); } .mc-dfp-card__cta { display: inline-flex; align-items: center; gap: .35rem; margin-top: .4rem; font-size: .87rem; font-weight: 800; color: var(--brand-primary, #10B79F); transition: gap .2s ease; } .mc-dfp-card__cta svg { width: 14px; height: 14px; } .mc-dfp-card:hover .mc-dfp-card__cta { gap: .55rem; } /* ── mc-detail-hero.blade.php ── */ .mc-dh, .mc-dh * { box-sizing: border-box; } .mc-dh { position: relative; min-height: clamp(360px, 52vw, 600px); display: flex; align-items: center; padding: clamp(80px, 14vw, 140px) 0 clamp(60px, 10vw, 100px); overflow: hidden; isolation: isolate; /* Dark gradient base — replaced by image overlay when --mc-dh-img is set */ background: linear-gradient(165deg, rgba(90,6,16,.90) 0%, rgba(14,9,9,.78) 100%), var(--brand-bg-red, #8e0e18); color: #ffffff; } /* When a real image is supplied */ .mc-dh[style*="--mc-dh-img"] { background: linear-gradient(160deg, rgba(10,6,14,.82) 0%, rgba(90,6,16,.68) 55%, rgba(14,9,9,.75) 100%), var(--mc-dh-img); background-size: cover; background-position: center; } /* ── Decorative ── */ .mc-dh__glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: -1; } .mc-dh__glow--a { width: 560px; height: 560px; inset-block-start: -260px; inset-inline-end: -180px; background: radial-gradient(circle, rgba(255,255,255,.10) 0%, transparent 70%); } .mc-dh__glow--b { width: 460px; height: 460px; inset-block-end: -240px; inset-inline-start: -160px; background: radial-gradient(circle, rgba(16,183,159,.30) 0%, transparent 70%); } .mc-dh__dots { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.5px); background-size: 22px 22px; pointer-events: none; } /* ── Layout ── */ .mc-dh__container { position: relative; z-index: 1; max-width: 1240px; width: 100%; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); display: flex; flex-direction: column; align-items: flex-start; gap: clamp(.8rem, 1.8vw, 1.2rem); } /* ── Breadcrumb ── */ .mc-dh__breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; } .mc-dh__breadcrumb li { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.65); } .mc-dh__breadcrumb a { color: rgba(255,255,255,.65); text-decoration: none; transition: color .18s; } .mc-dh__breadcrumb a:hover { color: #fff; text-decoration: underline; } .mc-dh__breadcrumb [aria-current="page"] { color: #fff; font-weight: 700; } .mc-dh__breadcrumb span[aria-hidden] { opacity: .45; } /* ── Headline ── */ .mc-dh__type { margin-bottom: 0.65rem; } .mc-dh__title { margin: 0; font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 900; line-height: 1.08; letter-spacing: -.03em; color: #ffffff; text-wrap: balance; max-width: 760px; } /* ── Description ── */ .mc-dh__desc { margin: 0; max-width: 600px; font-size: clamp(1rem, 1.8vw, 1.15rem); line-height: 1.65; color: rgba(255,255,255,.82); } /* ── Pills ── */ .mc-dh__pills { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .2rem; } .mc-dh__pill { display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .9rem; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); font-size: .88rem; font-weight: 700; color: #fff; backdrop-filter: blur(6px); } .mc-dh__pill svg { width: 15px; height: 15px; } /* ── Scroll cue ── */ .mc-dh__scroll { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,.30); color: rgba(255,255,255,.70); text-decoration: none; margin-top: clamp(.5rem, 1.5vw, 1rem); animation: mc-dh-bob 2.2s ease-in-out infinite; transition: border-color .2s, color .2s; } .mc-dh__scroll:hover { border-color: rgba(255,255,255,.70); color: #fff; } .mc-dh__scroll svg { width: 22px; height: 22px; } @keyframes mc-dh-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { .mc-dh__scroll { animation: none; } } @media (max-width: 575px) { .mc-dh { min-height: 0; } .mc-dh__title { font-size: clamp(1.9rem, 10vw, 2.6rem); } } /* ── mc-detail-seo.blade.php ── */ .mc-dseo, .mc-dseo * { box-sizing: border-box; } .mc-dseo { padding: clamp(3rem, 6vw, 5rem) 0; background: #f1f5f9; border-top: 1px solid rgba(15,23,42,.06); } .mc-dseo__container { max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } .mc-dseo__inner { display: grid; grid-template-columns: 1fr 1.7fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (max-width: 720px) { .mc-dseo__inner { grid-template-columns: 1fr; } } /* ── Aside ── */ .mc-dseo__eyebrow { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 1rem; padding: .3rem .85rem; border-radius: 999px; background: rgba(16,183,159,.10); border: 1px solid rgba(16,183,159,.24); color: var(--brand-primary-deep, #0e9d88); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; } .mc-dseo__eyebrow svg { width: 14px; height: 14px; } .mc-dseo__title { margin: 0 0 1.25rem; font-size: clamp(1.4rem, 3.2vw, 2rem); font-weight: 900; letter-spacing: -.025em; color: var(--brand-ink, #12151a); text-wrap: balance; line-height: 1.2; } /* Stats DL */ .mc-dseo__dl { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 0 0 1.4rem; } .mc-dseo__dt-dd { padding: .65rem .85rem; border-radius: 12px; background: #fff; border: 1px solid rgba(15,23,42,.07); } .mc-dseo__dt-dd dt { font-size: .73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-ink-muted, #5c6570); margin-bottom: .2rem; } .mc-dseo__dt-dd dd { margin: 0; font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; color: var(--brand-ink, #12151a); } /* Back link */ .mc-dseo__back { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; font-weight: 700; color: var(--brand-primary-deep, #0e9d88); text-decoration: none; transition: gap .18s ease, color .18s ease; } .mc-dseo__back svg { width: 16px; height: 16px; } .mc-dseo__back:hover { gap: .65rem; color: var(--brand-primary, #10B79F); } /* ── Body ── */ .mc-dseo__body { display: flex; flex-direction: column; gap: 1.1rem; } .mc-dseo__body p { margin: 0; font-size: clamp(.97rem, 1.8vw, 1.06rem); line-height: 1.78; color: var(--brand-ink-soft, #2d3a4e); } .mc-dseo__body strong { color: var(--brand-ink, #12151a); font-weight: 700; } /* ── mc-detail-subcategories.blade.php ── */ .mc-dsub, .mc-dsub * { box-sizing: border-box; } .mc-dsub { padding: clamp(3rem, 6vw, 5rem) 0; background: #ffffff; } .mc-dsub__container { max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } /* ── Header ── */ .mc-dsub__header { text-align: center; margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); } .mc-dsub__eyebrow { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .85rem; padding: .32rem .9rem; border-radius: 999px; background: rgba(16,183,159,.10); border: 1px solid rgba(16,183,159,.24); color: var(--brand-primary-deep, #0e9d88); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; } .mc-dsub__eyebrow svg { width: 14px; height: 14px; } .mc-dsub__title { margin: 0 0 .7rem; font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; color: var(--brand-ink, #12151a); text-wrap: balance; } .mc-dsub__lede { margin: 0 auto; max-width: 52ch; font-size: clamp(.95rem, 1.8vw, 1.05rem); line-height: 1.65; color: var(--brand-ink-muted, #5c6570); } /* ── Grid ── */ .mc-dsub__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: clamp(.9rem, 1.8vw, 1.25rem); } .mc-dsub-card-wrap { animation: mc-dsub-rise .5s ease both; animation-delay: var(--mc-dsub-stagger, 0ms); } @keyframes mc-dsub-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .mc-dsub-card-wrap { animation: none; } } /* ── Card ── */ .mc-dsub-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; border: 1.5px solid rgba(15,23,42,.07); text-decoration: none; color: inherit; background: #fff; box-shadow: 0 4px 16px -10px rgba(15,23,42,.14); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .mc-dsub-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px -16px rgba(15,23,42,.22); border-color: var(--brand-primary, #10B79F); color: inherit; text-decoration: none; } /* Media */ .mc-dsub-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: linear-gradient(135deg, rgba(16,183,159,.15) 0%, rgba(193,18,31,.10) 100%); } .mc-dsub-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .mc-dsub-card:hover .mc-dsub-card__img { transform: scale(1.05); } .mc-dsub-card__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--brand-primary-deep, #0e9d88); } .mc-dsub-card__placeholder svg { width: 40px; height: 40px; opacity: .55; } .mc-dsub-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,23,42,.50) 0%, transparent 55%); pointer-events: none; } .mc-dsub-card__badge { position: absolute; inset-block-end: .6rem; inset-inline-end: .6rem; padding: .25rem .65rem; border-radius: 999px; background: var(--brand-primary, #10B79F); color: #fff; font-size: .75rem; font-weight: 800; letter-spacing: .01em; } /* Body */ .mc-dsub-card__body { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .85rem 1rem; } .mc-dsub-card__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; } .mc-dsub-card__name { margin: 0; font-size: 1.02rem; font-weight: 800; color: var(--brand-ink, #12151a); letter-spacing: -.01em; } .mc-dsub-card__arrow { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: rgba(16,183,159,.10); color: var(--brand-primary-deep, #0e9d88); display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; } .mc-dsub-card__arrow svg { width: 14px; height: 14px; } .mc-dsub-card:hover .mc-dsub-card__arrow { background: var(--brand-primary, #10B79F); color: #fff; } /* ── mc-detail-trending.blade.php ── */ .mc-dtr, .mc-dtr * { box-sizing: border-box; } .mc-dtr { position: relative; padding: clamp(3rem, 6vw, 4.5rem) 0; background: var(--brand-bg-red, linear-gradient(145deg, #8e0e18 0%, #c1121f 60%, #9b111e 100%)); color: #fff; overflow: hidden; isolation: isolate; } .mc-dtr__glow { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; } .mc-dtr__glow--a { width: 420px; height: 420px; inset-block-start: -180px; inset-inline-end: -120px; background: rgba(255,255,255,.08); } .mc-dtr__glow--b { width: 340px; height: 340px; inset-block-end: -160px; inset-inline-start: -80px; background: rgba(16,183,159,.18); } .mc-dtr__container { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } /* ── Header ── */ .mc-dtr__header { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); } .mc-dtr__eyebrow { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .85rem; border-radius: 999px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.22); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #fff; white-space: nowrap; } .mc-dtr__eyebrow svg { width: 13px; height: 13px; color: #fca5a5; } .mc-dtr__title { margin: 0; font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; color: #fff; } /* ── Horizontal scroll track ── */ .mc-dtr__track-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; } .mc-dtr__track-wrap::-webkit-scrollbar { display: none; } .mc-dtr__track { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(.75rem, 1.4vw, 1rem); width: max-content; } .mc-dtr__item { flex-shrink: 0; animation: mc-dtr-rise .5s ease both; animation-delay: var(--mc-dtr-stagger, 0ms); } @keyframes mc-dtr-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .mc-dtr__item { animation: none; } } /* ── Card ── */ .mc-dtr-card { display: flex; flex-direction: column; align-items: center; gap: .65rem; text-decoration: none; color: #fff; width: clamp(120px, 14vw, 150px); transition: transform .22s ease; } .mc-dtr-card:hover { transform: translateY(-4px); color: #fff; text-decoration: none; } /* Media circle */ .mc-dtr-card__media { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 3px solid rgba(255,255,255,.25); background: rgba(255,255,255,.10); transition: border-color .22s ease, box-shadow .22s ease; } .mc-dtr-card:hover .mc-dtr-card__media { border-color: rgba(255,255,255,.65); box-shadow: 0 10px 28px -8px rgba(0,0,0,.35); } .mc-dtr-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .mc-dtr-card:hover .mc-dtr-card__img { transform: scale(1.08); } .mc-dtr-card__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.55); } .mc-dtr-card__placeholder svg { width: 36px; height: 36px; } /* Discount badge — positioned at the bottom of the circle */ .mc-dtr-card__pct { position: absolute; inset-block-end: -2px; inset-inline-start: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0; padding: .18rem .55rem; border-radius: 999px; background: #c1121f; border: 2px solid rgba(255,255,255,.30); color: #fff; min-width: 48px; text-align: center; white-space: nowrap; } .mc-dtr-card__pct strong { font-size: .88rem; font-weight: 900; line-height: 1.1; } .mc-dtr-card__pct small { font-size: .62rem; font-weight: 700; opacity: .85; letter-spacing: .04em; } /* Name */ .mc-dtr-card__name { font-size: .85rem; font-weight: 700; color: rgba(255,255,255,.90); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* ── mc-popular-categories.blade.php ── */ .front-mcp, .front-mcp * { box-sizing: border-box; } .front-mcp { padding: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(2rem, 4vw, 3rem); background: var(--brand-bg-white, #ffffff); border-bottom: 1px solid rgba(15, 23, 42, .06); } .front-mcp__container { max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } /* ── Header ── */ .front-mcp__header { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-bottom: clamp(1.2rem, 2.5vw, 1.75rem); } .front-mcp__eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0.32rem 0.85rem; border-radius: 999px; background: rgba(255, 193, 7, .13); border: 1px solid rgba(255, 193, 7, .30); color: #b45309; font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; } .front-mcp__eyebrow svg { width: 13px; height: 13px; color: #f59e0b; } .front-mcp__title { margin: 0; font-size: clamp(1.15rem, 2.8vw, 1.5rem); font-weight: 800; color: var(--brand-ink, #12151a); letter-spacing: -.02em; } /* ── Horizontal scrollable track ── */ .front-mcp__track-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; /* room for focus rings */ } .front-mcp__track-wrap::-webkit-scrollbar { display: none; } .front-mcp__track { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(10px, 1.4vw, 14px); width: max-content; } .front-mcp__item { flex-shrink: 0; animation: front-mcp-rise .5s ease both; animation-delay: var(--front-mcp-stagger, 0ms); } @keyframes front-mcp-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .front-mcp__item { animation: none; } } /* ── Chip ── */ .front-mcp-chip { display: inline-flex; align-items: center; gap: .75rem; padding: .65rem .9rem .65rem .65rem; border-radius: 18px; background: #f8fafc; border: 1.5px solid rgba(15, 23, 42, .08); text-decoration: none; color: inherit; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease; min-width: 200px; max-width: 260px; } .front-mcp-chip:hover { border-color: var(--brand-primary, #10B79F); box-shadow: 0 8px 24px -12px rgba(16, 183, 159, .38); transform: translateY(-2px); background: #ffffff; color: inherit; text-decoration: none; } .front-mcp-chip:focus-visible { outline: 2px solid var(--brand-primary, #10B79F); outline-offset: 3px; } /* Thumbnail */ .front-mcp-chip__thumb { flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, rgba(16, 183, 159, .15) 0%, rgba(193, 18, 31, .10) 100%); display: flex; align-items: center; justify-content: center; color: var(--brand-primary-deep, #0e9d88); } .front-mcp-chip__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .front-mcp-chip__thumb svg { width: 22px; height: 22px; } /* Body */ .front-mcp-chip__body { flex: 1; display: flex; flex-direction: column; gap: .18rem; min-width: 0; } .front-mcp-chip__name { font-size: .97rem; font-weight: 700; color: var(--brand-ink, #12151a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; } .front-mcp-chip__count { font-size: .78rem; font-weight: 600; color: var(--brand-ink-muted, #5c6570); white-space: nowrap; } /* Arrow */ .front-mcp-chip__arrow { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-primary-soft, rgba(16, 183, 159, .10)); color: var(--brand-primary-deep, #0e9d88); display: flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease; } .front-mcp-chip__arrow svg { width: 14px; height: 14px; } .front-mcp-chip:hover .front-mcp-chip__arrow { background: var(--brand-primary, #10B79F); color: #ffffff; } /* ── mc-search-filter.blade.php ── */ .front-mcsf, .front-mcsf * { box-sizing: border-box; } .front-mcsf { background: #f1f5f9; border-bottom: 1px solid rgba(15, 23, 42, .07); padding: clamp(1.5rem, 3.5vw, 2.25rem) 0; } .front-mcsf__container { max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); display: flex; flex-direction: column; gap: 1rem; } /* ── Label ── */ .front-mcsf__label { display: block; margin-bottom: .5rem; font-size: .82rem; font-weight: 700; color: var(--brand-ink-muted, #5c6570); letter-spacing: .04em; text-transform: uppercase; } /* ── Input wrapper ── */ .front-mcsf__input-wrap { position: relative; max-width: 640px; } .front-mcsf__input-icon { position: absolute; inset-block: 0; inset-inline-start: 1rem; display: flex; align-items: center; color: var(--brand-ink-muted, #5c6570); pointer-events: none; } .front-mcsf__input-icon svg { width: 18px; height: 18px; } .front-mcsf__input { width: 100%; padding: .8rem 3rem .8rem 2.9rem; border-radius: 14px; border: 1.5px solid rgba(15, 23, 42, .12); background: #ffffff; font-size: 1rem; font-family: inherit; color: var(--brand-ink, #12151a); outline: none; transition: border-color .2s ease, box-shadow .2s ease; appearance: none; } [dir="rtl"] .front-mcsf__input { padding-inline-start: 3rem; padding-inline-end: 2.9rem; } .front-mcsf__input:focus { border-color: var(--brand-primary, #10B79F); box-shadow: 0 0 0 3px rgba(16, 183, 159, .18); } .front-mcsf__input::-webkit-search-cancel-button { display: none; } .front-mcsf__clear { position: absolute; inset-block: 0; inset-inline-end: .8rem; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: auto 0; border: none; border-radius: 50%; background: rgba(15, 23, 42, .08); color: var(--brand-ink-muted, #5c6570); cursor: pointer; transition: background .18s ease, color .18s ease; } .front-mcsf__clear svg { width: 14px; height: 14px; } .front-mcsf__clear:hover { background: rgba(193, 18, 31, .12); color: #c1121f; } /* ── Chips ── */ .front-mcsf__chips { display: flex; flex-wrap: wrap; gap: .5rem; } .front-mcsf-chip { padding: .38rem .85rem; border-radius: 999px; border: 1.5px solid rgba(15, 23, 42, .12); background: #ffffff; font-size: .85rem; font-weight: 600; font-family: inherit; color: var(--brand-ink-muted, #5c6570); cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease; white-space: nowrap; } .front-mcsf-chip:hover { border-color: var(--brand-primary, #10B79F); color: var(--brand-primary-deep, #0e9d88); background: rgba(16, 183, 159, .07); } .front-mcsf-chip--active { border-color: var(--brand-primary, #10B79F); background: var(--brand-primary, #10B79F); color: #ffffff; box-shadow: 0 4px 12px -6px rgba(16, 183, 159, .55); } .front-mcsf-chip--active:hover { background: var(--brand-primary-deep, #0e9d88); color: #ffffff; } /* ── Result count ── */ .front-mcsf__count { margin: 0; font-size: .86rem; font-weight: 600; color: var(--brand-ink-muted, #5c6570); min-height: 1.3em; } /* ── No-results state (injected by JS) ── */ .front-mcg-no-results { grid-column: 1 / -1; padding: 3rem 1.5rem; text-align: center; font-size: 1.05rem; font-weight: 600; color: var(--brand-ink-muted, #5c6570); border: 2px dashed rgba(15, 23, 42, .10); border-radius: 18px; list-style: none; } /* ── mc-seo-text.blade.php ── */ .front-mcseo, .front-mcseo * { box-sizing: border-box; } .front-mcseo { padding: clamp(3rem, 6vw, 5rem) 0; background: #f8fafc; border-top: 1px solid rgba(15, 23, 42, .06); border-bottom: 1px solid rgba(15, 23, 42, .06); } .front-mcseo__container { max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } .front-mcseo__inner { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (max-width: 720px) { .front-mcseo__inner { grid-template-columns: 1fr; } } /* ── Aside ── */ .front-mcseo__eyebrow { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 1rem; padding: .32rem .85rem; border-radius: 999px; background: rgba(16, 183, 159, .10); border: 1px solid rgba(16, 183, 159, .24); color: var(--brand-primary-deep, #0e9d88); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; } .front-mcseo__eyebrow svg { width: 14px; height: 14px; } .front-mcseo__title { margin: 0 0 1.5rem; font-size: clamp(1.5rem, 3.5vw, 2.1rem); font-weight: 900; line-height: 1.18; letter-spacing: -.025em; color: var(--brand-ink, #12151a); text-wrap: balance; } .front-mcseo__cta { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.2rem; border-radius: 999px; background: var(--brand-primary, #10B79F); color: #ffffff; font-size: .92rem; font-weight: 800; text-decoration: none; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; box-shadow: 0 8px 20px -10px rgba(16, 183, 159, .6); } .front-mcseo__cta svg { width: 16px; height: 16px; } .front-mcseo__cta:hover { background: var(--brand-primary-deep, #0e9d88); transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(16, 183, 159, .7); color: #ffffff; text-decoration: none; } /* ── Body ── */ .front-mcseo__body { display: flex; flex-direction: column; gap: 1.1rem; } .front-mcseo__body p { margin: 0; font-size: clamp(.97rem, 1.8vw, 1.06rem); line-height: 1.78; color: var(--brand-ink-soft, #2d3a4e); } .front-mcseo__body strong { color: var(--brand-ink, #12151a); font-weight: 700; } .front-mcseo__list { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; } .front-mcseo__list li { display: flex; align-items: center; gap: .65rem; font-size: .97rem; font-weight: 600; color: var(--brand-ink, #12151a); } .front-mcseo__list svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--brand-primary, #10B79F); } /* ── mc-stats.blade.php ── */ .front-mcst, .front-mcst * { box-sizing: border-box; } .front-mcst { position: relative; padding: clamp(2.5rem, 5vw, 3.5rem) 0; background: var(--brand-bg-green, linear-gradient(145deg, #0a5e52 0%, #0e9d88 55%, #10B79F 100%)); color: #ffffff; overflow: hidden; isolation: isolate; } .front-mcst__glow { position: absolute; border-radius: 50%; filter: blur(72px); pointer-events: none; z-index: 0; } .front-mcst__glow--a { width: 400px; height: 400px; inset-block-start: -160px; inset-inline-end: -120px; background: rgba(255, 255, 255, .10); } .front-mcst__glow--b { width: 320px; height: 320px; inset-block-end: -140px; inset-inline-start: -80px; background: rgba(193, 18, 31, .20); } .front-mcst__container { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } .front-mcst__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); } @media (max-width: 580px) { .front-mcst__grid { grid-template-columns: 1fr; } } .front-mcst__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .55rem; padding: clamp(1.2rem, 2.5vw, 1.75rem); border-radius: 20px; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(8px); animation: front-mcst-rise .55s ease both; animation-delay: var(--front-mcst-stagger, 0ms); transition: background .2s ease, transform .2s ease; } .front-mcst__item:hover { background: rgba(255, 255, 255, .16); transform: translateY(-3px); } @keyframes front-mcst-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .front-mcst__item { animation: none; } } .front-mcst__icon { width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, .15); display: flex; align-items: center; justify-content: center; color: #ffffff; flex-shrink: 0; } .front-mcst__icon svg { width: 26px; height: 26px; } .front-mcst__value { font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 900; letter-spacing: -.03em; color: #ffffff; line-height: 1; } .front-mcst__label { font-size: clamp(.88rem, 1.8vw, 1rem); font-weight: 600; color: rgba(255, 255, 255, .80); letter-spacing: .01em; } /* Utility: screen-reader only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ── mission-vision-values.blade.php ── */ /* ───────────────────────────────────────────────────────────── Mission / Vision / Values Sits on the white brand canvas so it feels editorial after the page hero. All decorative accents flow from the shared brand tokens (teal, red, amber). ───────────────────────────────────────────────────────────── */ .front-mvv { position: relative; padding: clamp(64px, 9vw, 120px) 0; background: var(--brand-bg-white, #ffffff); color: var(--brand-ink, #0f1729); overflow: hidden; isolation: isolate; } .front-mvv__bg-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(80px); pointer-events: none; } .front-mvv__bg-glow--one { width: 520px; height: 520px; inset-block-start: -160px; inset-inline-end: -160px; background: radial-gradient(circle, var(--brand-primary-glow, rgba(16,183,159,.32)) 0%, transparent 70%); } .front-mvv__bg-glow--two { width: 460px; height: 460px; inset-block-end: -180px; inset-inline-start: -140px; background: radial-gradient(circle, var(--brand-red-glow, rgba(230,57,70,.40)) 0%, transparent 70%); opacity: .55; } .front-mvv__container { max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } /* ─── Header ──────────────────────────────────────────────── */ .front-mvv__header { max-width: 760px; margin: 0 auto clamp(40px, 6vw, 64px); text-align: center; } .front-mvv__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 0.9rem; padding: 0.35rem 0.9rem; border-radius: 999px; background: var(--brand-primary-soft, rgba(16,183,159,.12)); color: var(--brand-primary-deep, #0e9d88); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .front-mvv__eyebrow--soft { background: rgba(15, 23, 41, 0.06); color: var(--brand-ink-soft, #2d3a4e); } .front-mvv__title { margin: 0 0 0.9rem; font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--brand-ink, #0f1729); } .front-mvv__lede { margin: 0; font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.65; color: var(--brand-ink-muted, #5c6570); } /* ─── Mission + Vision pillars ────────────────────────────── */ .front-mvv__pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 28px); margin-bottom: clamp(56px, 8vw, 88px); } .front-mvv-pillar { position: relative; padding: clamp(22px, 3vw, 32px); border-radius: 22px; background: #ffffff; border: 1px solid rgba(15, 23, 41, 0.06); box-shadow: 0 1px 0 rgba(15, 23, 41, 0.04), 0 18px 40px -22px rgba(15, 23, 41, 0.18); overflow: hidden; isolation: isolate; transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .front-mvv-pillar:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(15, 23, 41, 0.04), 0 28px 52px -22px rgba(15, 23, 41, 0.28); } /* Soft tinted backdrop strip — Mission = red, Vision = teal — so each card is recognizable at a glance without shouting. */ .front-mvv-pillar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(140deg, var(--front-mvv-pillar-tint, rgba(16, 183, 159, 0.10)) 0%, transparent 55%); pointer-events: none; } .front-mvv-pillar--mission { --front-mvv-pillar-accent: var(--brand-red, #e63946); --front-mvv-pillar-accent-soft: var(--brand-red-soft, rgba(230, 57, 70, 0.10)); --front-mvv-pillar-tint: rgba(230, 57, 70, 0.10); } .front-mvv-pillar--vision { --front-mvv-pillar-accent: var(--brand-primary, #10B79F); --front-mvv-pillar-accent-soft: var(--brand-primary-soft, rgba(16, 183, 159, 0.12)); --front-mvv-pillar-tint: rgba(16, 183, 159, 0.10); } .front-mvv-pillar__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: var(--front-mvv-pillar-accent-soft); color: var(--front-mvv-pillar-accent); margin-bottom: 1.1rem; } .front-mvv-pillar__icon svg { width: 28px; height: 28px; } .front-mvv-pillar__eyebrow { margin: 0 0 0.35rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--front-mvv-pillar-accent); } .front-mvv-pillar__title { margin: 0 0 0.7rem; font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: var(--brand-ink, #0f1729); } .front-mvv-pillar__body { margin: 0; font-size: clamp(0.98rem, 1.4vw, 1.05rem); line-height: 1.75; color: var(--brand-ink-soft, #2d3a4e); } .front-mvv-pillar__corner { position: absolute; inset-block-start: -40px; inset-inline-end: -40px; width: 160px; height: 160px; border-radius: 50%; background: var(--front-mvv-pillar-accent); opacity: 0.05; pointer-events: none; } /* ─── Values sub-header ───────────────────────────────────── */ .front-mvv__values-header { max-width: 720px; margin: 0 auto clamp(28px, 4vw, 40px); text-align: center; } .front-mvv__values-title { margin: 0; font-size: clamp(1.55rem, 2.8vw, 2.05rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: var(--brand-ink, #0f1729); } /* ─── Values grid ─────────────────────────────────────────── */ .front-mvv__values { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); } .front-mvv-value { position: relative; padding: clamp(18px, 2.4vw, 24px); border-radius: 18px; background: #ffffff; border: 1px solid rgba(15, 23, 41, 0.06); box-shadow: 0 10px 24px -18px rgba(15, 23, 41, 0.30); transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease; } .front-mvv-value::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 100%; height: 3px; border-radius: 18px 18px 0 0; background: var(--front-mvv-accent, var(--brand-primary, #10B79F)); opacity: 0; transform: scaleX(0.5); transform-origin: inline-start; transition: opacity 0.24s ease, transform 0.24s ease; } .front-mvv-value:hover, .front-mvv-value:focus-within { transform: translateY(-3px); border-color: color-mix(in srgb, var(--front-mvv-accent, #10B79F) 35%, transparent); box-shadow: 0 22px 38px -18px rgba(15, 23, 41, 0.30); } .front-mvv-value:hover::before, .front-mvv-value:focus-within::before { opacity: 1; transform: scaleX(1); } .front-mvv-value__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--front-mvv-accent, #10B79F) 14%, transparent); color: var(--front-mvv-accent, var(--brand-primary, #10B79F)); margin-bottom: 0.95rem; } @supports not (background: color-mix(in srgb, red, white)) { .front-mvv-value__icon { background: rgba(16, 183, 159, 0.12); } } .front-mvv-value__icon svg { width: 22px; height: 22px; } .front-mvv-value__title { margin: 0 0 0.4rem; font-size: 1.02rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.005em; color: var(--brand-ink, #0f1729); } .front-mvv-value__body { margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--brand-ink-muted, #5c6570); } /* ─── Entrance animation ──────────────────────────────────── */ [data-mvv-animate] { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease var(--front-mvv-stagger, 0ms), transform 0.55s ease var(--front-mvv-stagger, 0ms); } [data-mvv-animate].is-in { opacity: 1; transform: translateY(0); } /* ─── Responsive ──────────────────────────────────────────── */ @media (max-width: 991px) { .front-mvv__values { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 767px) { .front-mvv__pillars { grid-template-columns: 1fr; } .front-mvv__values { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 479px) { .front-mvv { padding: clamp(48px, 14vw, 72px) 0; } .front-mvv__values { grid-template-columns: 1fr; } .front-mvv-pillar__icon { width: 48px; height: 48px; } .front-mvv-pillar__icon svg { width: 24px; height: 24px; } } /* ─── Accessibility ───────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { [data-mvv-animate], .front-mvv-pillar, .front-mvv-value, .front-mvv-value::before { transition: none !important; } [data-mvv-animate] { opacity: 1; transform: none; } } /* ── mockup-slider.blade.php ── */ .front-mock-slider { padding: 48px 0 56px; background: linear-gradient(180deg, #0f0f12 0%, #14141a 50%, #0c0c10 100%); } .front-mock-slider__container { max-width: 1240px; margin: 0 auto; padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right)); } .front-mock-slider__intro { max-width: 640px; margin-bottom: 28px; } .front-mock-slider__heading { margin: 0 0 10px; font-size: clamp(1.35rem, 2.5vw, 1.85rem); font-weight: 800; color: #f4f4f8; line-height: 1.25; } .front-mock-slider__lede { margin: 0; color: #a8a8b8; font-size: clamp(0.95rem, 1.4vw, 1.05rem); line-height: 1.65; } .front-mock-swiper { width: 100%; padding: 24px 0 48px; overflow: visible; } .front-mock-swiper .swiper-slide { width: min(260px, 78vw); height: auto; perspective: 1200px; } .front-mock-slider__figure { margin: 0; text-align: center; } .front-mock-slider__device { position: relative; margin: 0 auto; padding: 9px; border-radius: 28px; border: 3px solid #2c2c32; background: linear-gradient(160deg, #3a3a42, #18181c); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset, 0 24px 48px rgba(0, 0, 0, 0.45), 0 12px 24px rgba(0, 0, 0, 0.3); transform-style: preserve-3d; transition: transform 0.35s ease, box-shadow 0.35s ease; } .front-mock-swiper .swiper-slide-active .front-mock-slider__device { box-shadow: 0 0 0 1px rgba(16, 183, 159, 0.35) inset, 0 32px 64px rgba(0, 0, 0, 0.5), 0 0 40px rgba(16, 183, 159, 0.12); } .front-mock-slider__device-notch { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 30%; min-width: 56px; height: 20px; border-radius: 999px; background: #0a0a0f; z-index: 2; pointer-events: none; } .front-mock-slider__device-screen { border-radius: 20px; overflow: hidden; background: #0f1729; line-height: 0; aspect-ratio: 390 / 844; } .front-mock-slider__device-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .front-mock-slider__caption { margin-top: 14px; padding: 0 8px; font-size: 0.88rem; color: #9090a0; line-height: 1.45; } .front-mock-swiper__pagination { position: relative; margin-top: 8px; } .front-mock-swiper__pagination .swiper-pagination-bullet { background: rgba(255, 255, 255, 0.35); opacity: 1; } .front-mock-swiper__pagination .swiper-pagination-bullet-active { background: #10b79f; } .front-mock-swiper__nav { color: #10b79f; width: 44px; height: 44px; margin-top: 0; } .front-mock-swiper__nav::after { font-size: 18px; font-weight: 700; } @media (max-width: 575px) { .front-mock-slider { padding: 32px 0 40px; } .front-mock-swiper .swiper-slide { width: min(220px, 72vw); } .front-mock-swiper__nav { display: none; } } @media (prefers-reduced-motion: reduce) { .front-mock-slider__device { transition: none; } } /* ── navbar.blade.php ── */ .front-nav-glass, .front-nav-glass * { box-sizing: border-box; } .front-nav-glass { position: sticky; top: 14px; z-index: 100; width: 100%; padding: 0 max(0px, env(safe-area-inset-right)) 0 max(0px, env(safe-area-inset-left)); } .front-nav-glass__container { position: relative; width: 100%; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 14px; overflow: visible; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.35); background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.42)); box-shadow: 0 10px 36px rgba(15, 22, 41, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.55); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); } .front-nav-glass__brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: #0f1729; font-weight: 700; white-space: nowrap; font-size: 20px; min-width: 0; flex: 1 1 auto; } .front-nav-glass__brand-name { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px; min-width: 0; font-size: clamp(1.18rem, 1.4vw, 1.55rem); font-weight: 900; letter-spacing: 0.03em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 14px rgba(16, 183, 159, 0.2); line-height: 1.15; font-family: "Segoe UI", "Poppins", "Inter", sans-serif; } .front-nav-glass__brand-primary { color: #0f1729; } .front-nav-glass__brand-accent { color: var(--front-theme); position: relative; } .front-nav-glass__brand-accent::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--front-theme), transparent); opacity: .9; } .front-nav-glass__logo-wrap { width: 88px; height: 88px; display: inline-flex; align-items: center; justify-content: center; border-radius: 20px; background: color-mix(in srgb, var(--front-theme) 24%, white); box-shadow: 0 6px 20px color-mix(in srgb, var(--front-theme) 30%, transparent); } .front-nav-glass__brand img { width: 72px; height: 72px; object-fit: contain; } .front-nav-glass__menu { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; justify-content: flex-end; min-width: 0; } .front-nav-glass__lang { display: inline-flex; align-items: center; flex-shrink: 0; gap: 6px; padding: 4px; border-radius: 12px; background: color-mix(in srgb, var(--front-theme) 8%, white); border: 1px solid color-mix(in srgb, var(--front-theme) 18%, white); } /* Social row lives in the mobile offcanvas only; the desktop layout uses the floating right-edge rail rendered globally. */ .front-nav-glass__social { display: none; } .front-nav-glass__lang-btn { text-decoration: none; font-size: 13px; font-weight: 800; padding: 8px 12px; border-radius: 9px; color: #2d3a4e; transition: background .2s ease, color .2s ease, box-shadow .2s ease; white-space: nowrap; } .front-nav-glass__lang-btn:hover { color: var(--front-theme); background: rgba(255, 255, 255, 0.75); } .front-nav-glass__lang-btn.is-active { color: #fff; background: var(--front-theme); box-shadow: 0 4px 12px color-mix(in srgb, var(--front-theme) 35%, transparent); } .front-nav-glass__lang-btn:focus-visible { outline: 2px solid var(--front-theme); outline-offset: 2px; } .front-nav-glass__links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 8px; } .front-nav-glass__links a { text-decoration: none; color: #2d3a4e; font-weight: 700; font-size: 16px; padding: 10px 16px; border-radius: 999px; transition: all .2s ease; border: 1px solid transparent; } .front-nav-glass__links a:hover, .front-nav-glass__links a.is-active { color: var(--front-theme); background: color-mix(in srgb, var(--front-theme) 16%, white); border-color: color-mix(in srgb, var(--front-theme) 36%, white); box-shadow: 0 6px 18px color-mix(in srgb, var(--front-theme) 22%, transparent); } .front-nav-glass__actions { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; } .nav-search-trigger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin: 0; border: 1px solid rgba(16, 183, 159, 0.35); border-radius: 10px; background: #ffffff; color: #334155; cursor: pointer; line-height: 0; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08); transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s; } .nav-search-trigger:hover, .nav-search-trigger.is-active { color: #10B79F; border-color: #10B79F; background: rgba(16, 183, 159, 0.1); box-shadow: 0 4px 12px rgba(16, 183, 159, 0.2); } .nav-search-trigger svg { width: 18px !important; height: 18px !important; max-width: 18px !important; max-height: 18px !important; display: block; flex-shrink: 0; } html.partner-search-open { overflow: hidden; } .partner-search-layer { position: fixed; inset: 0; z-index: 400; visibility: hidden; pointer-events: none; transition: visibility 0s linear 0.25s; } .partner-search-layer.is-open { visibility: visible; pointer-events: auto; transition: visibility 0s; } .partner-search-layer__backdrop { position: absolute; inset: 0; border: 0; padding: 0; margin: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; opacity: 0; transition: opacity 0.25s ease; } .partner-search-layer.is-open .partner-search-layer__backdrop { opacity: 1; } .partner-search-layer__panel { position: absolute; top: var(--partner-search-top, 100px); left: 0; right: 0; margin-inline: auto; width: min(680px, calc(100vw - 32px)); opacity: 0; transform: translateY(-12px); transition: opacity 0.25s ease, transform 0.25s ease; z-index: 1; } .partner-search-layer.is-open .partner-search-layer__panel { opacity: 1; transform: translateY(0); } .partner-search-layer__bar { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 0 14px 0 18px; background: #ffffff; border: 1px solid rgba(16, 183, 159, 0.45); border-radius: 16px; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18); } .partner-search-layer__icon { width: 20px !important; height: 20px !important; flex-shrink: 0; color: #10B79F; } .partner-search-layer__input { flex: 1; min-width: 0; height: 52px; border: 0; background: transparent; font-size: 17px; font-weight: 600; color: #0f1729; outline: none; padding: 0; } .partner-search-layer__input::placeholder { color: #94a3b8; font-weight: 500; } .partner-search-layer__input::-webkit-search-cancel-button { display: none; } .partner-search-layer__close { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: #f1f5f9; color: #475569; cursor: pointer; font-size: 12px; font-weight: 700; line-height: 1; } .partner-search-layer__close:hover { background: #e2e8f0; color: #0f1729; } .partner-search-layer__close svg { width: 14px !important; height: 14px !important; } .partner-search-layer__esc { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #64748b; } .partner-search-layer__results { margin-top: 10px; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 20px 48px rgba(15, 23, 42, 0.16); overflow: hidden; max-height: min(420px, 55vh); display: flex; flex-direction: column; } .partner-search-layer__results[hidden] { display: none !important; } .partner-search-layer__hint, .partner-search-layer__loading, .partner-search-layer__empty { margin: 0; padding: 20px 18px; text-align: center; font-size: 14px; color: #64748b; } .partner-search-layer__loading { color: #10B79F; font-weight: 600; } .partner-search-layer__list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1; min-height: 0; } .partner-search-layer__link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: inherit; transition: background 0.15s; } .partner-search-layer__link:hover, .partner-search-layer__link.is-focused { background: rgba(16, 183, 159, 0.12); } .partner-search-layer__thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; background: #f8fafc; flex-shrink: 0; } .partner-search-layer__text { flex: 1; min-width: 0; } .partner-search-layer__name { display: block; font-size: 15px; font-weight: 700; color: #0f1729; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .partner-search-layer__meta { display: block; font-size: 13px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .partner-search-layer__disc { font-size: 12px; font-weight: 800; color: #fff; background: #c1121f; padding: 3px 8px; border-radius: 6px; flex-shrink: 0; } .partner-search-layer__all { display: block; padding: 14px; text-align: center; font-size: 14px; font-weight: 700; color: #10B79F; text-decoration: none; border-top: 1px solid #f1f5f9; background: #f8fafc; } .partner-search-layer__all:hover { background: rgba(16, 183, 159, 0.08); } .partner-search-layer__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } @media (max-width: 991px) { .partner-search-layer__panel { width: calc(100vw - 24px); } .partner-search-layer__bar { min-height: 52px; padding-inline: 12px; } .partner-search-layer__input { font-size: 16px; height: 48px; } .partner-search-layer__esc { display: none; } } .front-nav-glass__toggle { display: none; flex-shrink: 0; border: 1px solid color-mix(in srgb, var(--front-theme) 22%, white); border-radius: 12px; background: color-mix(in srgb, var(--front-theme) 10%, white); width: 44px; height: 44px; padding: 0 11px; cursor: pointer; touch-action: manipulation; } .front-nav-glass__toggle span { display: block; width: 100%; height: 2px; background: #1b2a3f; margin: 4px 0; transition: transform .2s ease, opacity .2s ease; } .front-nav-glass__toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .front-nav-glass__toggle.is-open span:nth-child(2) { opacity: 0; } .front-nav-glass__toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 991px) { .front-nav-glass { top: max(8px, env(safe-area-inset-top)); padding-inline: 12px; } .front-nav-glass__container { padding: 10px 12px; border-radius: 14px; } .front-nav-glass__brand { font-size: 17px; gap: 10px; white-space: normal; } .front-nav-glass__brand-name { font-size: clamp(1rem, 4.2vw, 1.2rem); } .front-nav-glass__logo-wrap { width: 72px; height: 72px; border-radius: 12px; } .front-nav-glass__brand img { width: 58px; height: 58px; } .front-nav-glass__toggle { display: inline-block; } .front-nav-glass__menu { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 200; background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(218, 223, 236, 0.9); border-radius: 14px; padding: 8px 12px 12px; display: none; max-height: min(72vh, 28rem); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; box-shadow: 0 12px 34px rgba(15, 22, 41, 0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .front-nav-glass__menu.is-open { display: block; } .front-nav-glass__menu { flex-direction: column; align-items: stretch; gap: 0; } .front-nav-glass__links { flex-direction: column; align-items: stretch; gap: 4px; } .front-nav-glass__links a { display: block; border-radius: 10px; font-size: 15px; padding: 12px 14px; } .front-nav-glass__lang { justify-content: stretch; margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(218, 223, 236, 0.95); border-radius: 12px; } .front-nav-glass__lang-btn { flex: 1; text-align: center; padding: 10px 12px; } .front-nav-glass__social { display: block; } } @media (max-width: 380px) { .front-nav-glass__logo-wrap { width: 56px; height: 56px; } .front-nav-glass__brand img { width: 46px; height: 46px; } } /* ── page-banner.blade.php ── */ /* ───────────────────────────────────────────────────────────── Page banner — reusable hero strip used at the top of inner pages (Main Categories, About, Contact …). Sits on the brand RED canvas (same as hero / why-choosing). ───────────────────────────────────────────────────────────── */ .front-page-banner { position: relative; min-height: clamp(200px, 30vw, 320px); display: flex; align-items: center; padding: clamp(56px, 9vw, 96px) 0 clamp(44px, 7vw, 72px); background: var(--brand-bg-red, linear-gradient(165deg, #c1121f 0%, #8e0e18 55%, #5a0610 100%)); color: #ffffff; overflow: hidden; isolation: isolate; } /* When a real image is provided, overlay it under the gradient */ .front-page-banner[style*="--front-banner-bg-img"] { background-image: linear-gradient(160deg, rgba(90,6,16,.82) 0%, rgba(14,9,9,.65) 100%), var(--front-banner-bg-img); background-size: cover; background-position: center; } /* ── decorative elements ─── */ .front-page-banner__glow { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: -1; } .front-page-banner__glow--one { width: 520px; height: 520px; inset-block-start: -240px; inset-inline-end: -160px; background: radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 70%); } .front-page-banner__glow--two { width: 440px; height: 440px; inset-block-end: -220px; inset-inline-start: -140px; background: radial-gradient(circle, var(--brand-primary-glow, rgba(16,183,159,.38)) 0%, transparent 70%); } .front-page-banner__dots { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.5px); background-size: 22px 22px; opacity: .55; pointer-events: none; } /* ── layout ─── */ .front-page-banner__container { max-width: 1240px; width: 100%; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } /* ── breadcrumb ─── */ .front-page-banner__breadcrumb ol { list-style: none; margin: 0 0 clamp(12px, 2vw, 20px); padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; } .front-page-banner__breadcrumb li { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.84rem; font-weight: 600; color: rgba(255,255,255,.72); } .front-page-banner__breadcrumb a { color: rgba(255,255,255,.72); text-decoration: none; transition: color 0.18s ease; } .front-page-banner__breadcrumb a:hover { color: #ffffff; text-decoration: underline; } .front-page-banner__breadcrumb [aria-current="page"] { color: #ffffff; font-weight: 700; } .front-page-banner__sep { opacity: .55; font-size: .9em; } /* ── text ─── */ .front-page-banner__title { margin: 0 0 0.55rem; font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.025em; color: #ffffff; text-wrap: balance; } .front-page-banner__subtitle { margin: 0; max-width: 640px; font-size: clamp(1rem, 1.8vw, 1.18rem); line-height: 1.6; color: rgba(255,255,255,.84); } /* ── responsive ─── */ @media (max-width: 575px) { .front-page-banner { min-height: 0; } .front-page-banner__title { font-size: clamp(1.7rem, 9vw, 2.4rem); } } /* ── reduced motion ─── */ @media (prefers-reduced-motion: reduce) { .front-page-banner__glow { display: none; } } /* ── provider-detail-about.blade.php ── */ .pd-about, .pd-about * { box-sizing: border-box; } .pd-about { padding: clamp(2.75rem, 5vw, 4rem) 0; background: #fff; } .pd-about__container { max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } .pd-about__header { margin-bottom: clamp(1.25rem, 3vw, 1.75rem); } .pd-about__eyebrow { margin: 0 0 .4rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--brand-primary-deep, #0e9d88); } .pd-about__title { margin: 0; font-size: clamp(1.35rem, 3vw, 1.85rem); font-weight: 800; color: var(--brand-ink, #12151a); letter-spacing: -.02em; } .pd-about__panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1.25rem; } .pd-about__panel { padding: 1.25rem 1.35rem; border-radius: 16px; background: #f8fafc; border: 1px solid rgba(15,23,42,.07); } .pd-about__panel--policy { background: #fff; border-color: rgba(16,183,159,.2); } .pd-about__panel-title { margin: 0 0 .75rem; font-size: 1rem; font-weight: 800; color: var(--brand-ink, #12151a); } .pd-about__prose { margin: 0; font-size: .98rem; line-height: 1.75; color: var(--brand-ink-soft, #2d3a4e); } .pd-about__social { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; } .pd-about__social-label { font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-ink-muted, #5c6570); } /* ── provider-detail-branches.blade.php ── */ .pd-branches, .pd-branches * { box-sizing: border-box; } .pd-branches { padding: clamp(2.75rem, 5vw, 4rem) 0; background: linear-gradient(180deg, #f8fafc 0%, #fff 100%); border-top: 1px solid rgba(15, 23, 42, 0.06); } .pd-branches__container { max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } .pd-branches__header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: 1.5rem; } .pd-branches__eyebrow { margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--brand-primary-deep, #0e9d88); } .pd-branches__title { margin: 0 0 0.35rem; font-size: clamp(1.35rem, 3vw, 1.85rem); font-weight: 800; color: var(--brand-ink, #12151a); letter-spacing: -0.02em; } .pd-branches__subtitle { margin: 0; font-size: 0.95rem; color: #64748b; max-width: 36rem; } .pd-branches__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .pd-branches__sorted-badge { display: inline-flex; align-items: center; padding: 0.35rem 0.75rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; color: #0e9d88; background: rgba(16, 183, 159, 0.12); border: 1px solid rgba(16, 183, 159, 0.25); } .pd-branches__btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1rem; border-radius: 999px; font-size: 0.88rem; font-weight: 800; cursor: pointer; border: 0; transition: transform 0.15s, box-shadow 0.15s, background 0.15s; } .pd-branches__btn svg { width: 16px; height: 16px; flex-shrink: 0; } .pd-branches__btn:disabled { opacity: 0.65; cursor: wait; } .pd-branches__btn--primary { background: var(--brand-primary, #10B79F); color: #fff; box-shadow: 0 8px 20px -10px rgba(16, 183, 159, 0.55); } .pd-branches__btn--primary:hover:not(:disabled) { transform: translateY(-1px); } .pd-branches__btn--ghost { background: #fff; color: #475569; border: 1px solid #e2e8f0; } .pd-branches__btn--ghost:hover:not(:disabled) { background: #f8fafc; } .pd-branches__location-prompt { margin-bottom: 1.25rem; padding: 1rem 1.15rem; border-radius: 14px; background: #fff; border: 1px solid rgba(16, 183, 159, 0.35); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); } .pd-branches__location-prompt[hidden] { display: none !important; } .pd-branches__location-prompt-text { margin: 0 0 0.85rem; font-size: 0.92rem; line-height: 1.5; color: #334155; font-weight: 600; } .pd-branches__location-prompt-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .pd-branches__status-wrap { margin-bottom: 1.25rem; padding: 0.85rem 1rem; border-radius: 12px; background: #fff; border: 1px solid #e2e8f0; } .pd-branches__status-wrap[hidden] { display: none !important; } .pd-branches__status { margin: 0; font-size: 0.88rem; font-weight: 600; line-height: 1.45; } .pd-branches__status-wrap.is-error { background: #fef2f2; border-color: #fecaca; } .pd-branches__status-wrap.is-error .pd-branches__status { color: #b91c1c; } .pd-branches__status-wrap.is-info { background: #f0fdfa; border-color: #99f6e4; } .pd-branches__status-wrap.is-info .pd-branches__status { color: #0f766e; } .pd-branches__retry { margin-top: 0.65rem; } .pd-branches__retry[hidden] { display: none !important; } .pd-branches__content.is-loading { opacity: 0.55; pointer-events: none; } .pd-branches__loading { margin: 2rem 0; text-align: center; font-size: 0.95rem; font-weight: 600; color: #64748b; } .pd-branches__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; } .pd-branches__card { height: 100%; display: flex; flex-direction: column; gap: 0.65rem; padding: 1.1rem 1.15rem; border-radius: 16px; background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05); } .pd-branches__card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; } .pd-branches__name { margin: 0; font-size: 1.05rem; font-weight: 800; color: #0f1729; line-height: 1.25; } .pd-branches__distance { display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0; padding: 0.2rem 0.5rem; border-radius: 8px; font-size: 0.75rem; font-weight: 800; color: #0e9d88; background: rgba(16, 183, 159, 0.1); } .pd-branches__distance svg { width: 14px; height: 14px; } .pd-branches__meta { display: flex; flex-wrap: wrap; gap: 0.35rem; } .pd-branches__tag { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 6px; font-size: 0.75rem; font-weight: 700; color: #475569; background: #f1f5f9; } .pd-branches__address { margin: 0; font-size: 0.9rem; line-height: 1.5; color: #475569; } .pd-branches__contacts { display: flex; flex-direction: column; gap: 0.35rem; } .pd-branches__contact { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; font-weight: 600; color: #0f1729; text-decoration: none; } .pd-branches__contact svg { width: 14px; height: 14px; color: #10B79F; } .pd-branches__contact:hover { color: #10B79F; } .pd-branches__map { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: auto; padding-top: 0.35rem; font-size: 0.85rem; font-weight: 800; color: #10B79F; text-decoration: none; } .pd-branches__map svg { width: 14px; height: 14px; } .pd-branches__map:hover { text-decoration: underline; } .pd-branches__empty { text-align: center; color: #64748b; margin: 2rem 0; } /* ── provider-detail-category-services.blade.php ── */ .pd-svc, .pd-svc * { box-sizing: border-box; } .pd-svc { padding: clamp(2.75rem, 5vw, 4rem) 0; background: linear-gradient(180deg, #f4f7fb 0%, #fff 100%); } .pd-svc__container { max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } .pd-svc__header { margin-bottom: 1.5rem; } .pd-svc__eyebrow { margin: 0 0 .35rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--brand-primary-deep, #0e9d88); } .pd-svc__title { margin: 0; font-size: clamp(1.3rem, 3vw, 1.75rem); font-weight: 800; color: var(--brand-ink, #12151a); letter-spacing: -.02em; } .pd-svc__taxonomy { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .85rem; margin-bottom: 1.75rem; } .pd-svc__tax-card { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.15rem; border-radius: 14px; background: #fff; border: 1.5px solid rgba(15,23,42,.08); text-decoration: none; color: inherit; transition: border-color .2s, transform .2s, box-shadow .2s; } .pd-svc__tax-card:hover { border-color: var(--brand-primary, #10B79F); transform: translateY(-2px); box-shadow: 0 12px 28px -18px rgba(15,23,42,.2); color: inherit; } .pd-svc__tax-card--cat { border-color: rgba(16,183,159,.25); background: rgba(16,183,159,.04); } .pd-svc__tax-label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-ink-muted, #5c6570); } .pd-svc__tax-name { font-size: 1.05rem; font-weight: 800; color: var(--brand-ink, #12151a); } .pd-svc__sub { margin: 0 0 1rem; font-size: 1.05rem; font-weight: 800; color: var(--brand-ink, #12151a); } .pd-svc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .65rem; } .pd-svc__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 1.1rem; border-radius: 12px; background: #fff; border: 1px solid rgba(15,23,42,.07); } .pd-svc__item-name { font-size: .98rem; font-weight: 700; color: var(--brand-ink, #12151a); text-decoration: none; } .pd-svc__item-name:hover { color: var(--brand-primary-deep, #0e9d88); text-decoration: underline; } .pd-svc__item-discounts { display: flex; flex-wrap: wrap; gap: .45rem; } .pd-svc__disc { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 700; } .pd-svc__disc--member { background: rgba(193,18,31,.1); color: #9f1239; border: 1px solid rgba(193,18,31,.2); } .pd-svc__disc--std { background: rgba(16,183,159,.1); color: #0e9d88; border: 1px solid rgba(16,183,159,.22); } .pd-svc__disc strong { font-weight: 900; } .pd-svc__note, .pd-svc__empty { margin: 1.25rem 0 0; font-size: .92rem; line-height: 1.6; color: var(--brand-ink-muted, #5c6570); } /* ── provider-detail-hero.blade.php ── */ .pd-hero, .pd-hero * { box-sizing: border-box; } .pd-hero { position: relative; min-height: clamp(360px, 52vw, 580px); display: flex; align-items: center; padding: clamp(80px, 12vw, 120px) 0 clamp(48px, 8vw, 72px); overflow: hidden; isolation: isolate; background: linear-gradient(165deg, rgba(90,6,16,.92) 0%, rgba(14,9,9,.82) 100%), var(--brand-bg-red, #8e0e18); color: #fff; } .pd-hero[style*="--pd-hero-img"] { background: linear-gradient(160deg, rgba(10,6,14,.88) 0%, rgba(90,6,16,.75) 50%, rgba(14,9,9,.85) 100%), var(--pd-hero-img); background-size: cover; background-position: center; } .pd-hero__glow { position: absolute; border-radius: 50%; filter: blur(88px); pointer-events: none; z-index: 0; } .pd-hero__glow--a { width: 480px; height: 480px; inset-block-start: -200px; inset-inline-end: -160px; background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%); } .pd-hero__glow--b { width: 400px; height: 400px; inset-block-end: -200px; inset-inline-start: -120px; background: radial-gradient(circle, rgba(16,183,159,.28) 0%, transparent 70%); } .pd-hero__dots { position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px); background-size: 20px 20px; pointer-events: none; } .pd-hero__container { position: relative; z-index: 1; max-width: 1240px; width: 100%; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } .pd-hero__bc ol { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.62); } .pd-hero__bc a { color: rgba(255,255,255,.62); text-decoration: none; } .pd-hero__bc a:hover { color: #fff; text-decoration: underline; } .pd-hero__bc [aria-current="page"] { color: #fff; font-weight: 700; } .pd-hero__bc span[aria-hidden] { opacity: .45; } .pd-hero__grid { display: grid; grid-template-columns: 1fr auto; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center; } @media (max-width: 768px) { .pd-hero__grid { grid-template-columns: 1fr; } .pd-hero__visual { justify-self: center; } } .pd-hero__badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .65rem; } .pd-hero__badge { display: inline-flex; align-items: center; padding: .24rem .72rem; border-radius: 999px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; line-height: 1.2; border: 1px solid transparent; box-shadow: 0 2px 8px -4px rgba(0, 0, 0, .35); } .pd-hero__badge--top { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); color: #1a0a00; box-shadow: 0 4px 14px -6px rgba(245, 158, 11, .65); } .pd-hero__badge--hot { background: linear-gradient(135deg, #f87171 0%, #dc2626 100%); color: #fff; box-shadow: 0 4px 14px -6px rgba(239, 68, 68, .6); } .pd-hero__badge--featured { background: linear-gradient(135deg, #2dd4bf 0%, #10b79f 100%); color: #042f2a; box-shadow: 0 4px 14px -6px rgba(16, 183, 159, .55); } .pd-hero__badge--new { background: linear-gradient(135deg, #7dd3fc 0%, #0ea5e9 100%); color: #0c2340; box-shadow: 0 4px 14px -6px rgba(14, 165, 233, .5); } .pd-hero__badge--popular { background: linear-gradient(135deg, #c4b5fd 0%, #7c3aed 100%); color: #fff; box-shadow: 0 4px 14px -6px rgba(124, 58, 237, .55); } .pd-hero__badge--best { background: linear-gradient(135deg, #6ee7b7 0%, #059669 100%); color: #052e1f; box-shadow: 0 4px 14px -6px rgba(5, 150, 105, .5); } .pd-hero__type { margin-bottom: 0.65rem; } .pd-hero__title { margin: 0 0 .5rem; font-size: clamp(1.85rem, 5vw, 3rem); font-weight: 900; line-height: 1.1; letter-spacing: -.03em; max-width: 720px; } .pd-hero__cat { margin: 0 0 .75rem; font-size: .95rem; } .pd-hero__cat a { color: rgba(255,255,255,.85); font-weight: 700; text-decoration: none; } .pd-hero__cat a:hover { color: #fff; text-decoration: underline; } .pd-hero__cat span { opacity: .5; margin-inline: .35rem; } .pd-hero__pills { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.1rem; } .pd-hero__pill { display: inline-flex; align-items: center; gap: .3rem; padding: .32rem .85rem; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); font-size: .85rem; font-weight: 700; } .pd-hero__pill--deal { background: rgba(193,18,31,.85); border-color: rgba(255,255,255,.15); } .pd-hero__pill--link { text-decoration: none; color: inherit; transition: background .18s, border-color .18s; } .pd-hero__pill--link:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.35); color: #fff; } .pd-hero .pd-social--hero { margin-bottom: 1rem; } .pd-hero__actions { display: flex; flex-wrap: wrap; gap: .6rem; } .pd-hero__btn { display: inline-flex; align-items: center; padding: .6rem 1.15rem; border-radius: 999px; font-size: .9rem; font-weight: 800; text-decoration: none; transition: transform .18s, box-shadow .18s, background .18s; } .pd-hero__btn--primary { background: var(--brand-primary, #10B79F); color: #fff; box-shadow: 0 8px 20px -10px rgba(16,183,159,.6); } .pd-hero__btn--primary:hover { color: #fff; transform: translateY(-2px); } .pd-hero__btn--ghost { border: 2px solid rgba(255,255,255,.35); color: #fff; } .pd-hero__btn--ghost:hover { border-color: #fff; color: #fff; } .pd-hero__visual { flex-shrink: 0; } .pd-hero__logo { width: clamp(120px, 22vw, 180px); height: clamp(120px, 22vw, 180px); object-fit: cover; border-radius: 22px; border: 3px solid rgba(255,255,255,.25); box-shadow: 0 20px 50px -20px rgba(0,0,0,.5); background: #fff; } /* ── provider-detail-seo.blade.php ── */ .pd-seo, .pd-seo * { box-sizing: border-box; } .pd-seo { padding: clamp(3rem, 6vw, 5rem) 0; background: #f1f5f9; border-top: 1px solid rgba(15,23,42,.06); } .pd-seo__container { max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } .pd-seo__inner { display: grid; grid-template-columns: 1fr 1.7fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (max-width: 720px) { .pd-seo__inner { grid-template-columns: 1fr; } } .pd-seo__eyebrow { display: inline-flex; margin: 0 0 1rem; padding: .3rem .85rem; border-radius: 999px; background: rgba(16,183,159,.10); border: 1px solid rgba(16,183,159,.24); color: var(--brand-primary-deep, #0e9d88); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; } .pd-seo__title { margin: 0 0 1.25rem; font-size: clamp(1.35rem, 3vw, 1.9rem); font-weight: 900; letter-spacing: -.02em; color: var(--brand-ink, #12151a); line-height: 1.2; } .pd-seo__dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; margin: 0 0 1.4rem; } .pd-seo__dt-dd { padding: .65rem .85rem; border-radius: 12px; background: #fff; border: 1px solid rgba(15,23,42,.07); } .pd-seo__dt-dd dt { font-size: .73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-ink-muted, #5c6570); margin-bottom: .2rem; } .pd-seo__dt-dd dd { margin: 0; font-size: 1.45rem; font-weight: 900; color: var(--brand-ink, #12151a); } .pd-seo__back { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; font-weight: 700; color: var(--brand-primary-deep, #0e9d88); text-decoration: none; } .pd-seo__back svg { width: 16px; height: 16px; } .pd-seo__back:hover { color: var(--brand-primary, #10B79F); } .pd-seo__body { display: flex; flex-direction: column; gap: 1rem; } .pd-seo__body p { margin: 0; font-size: clamp(.97rem, 1.8vw, 1.06rem); line-height: 1.78; color: var(--brand-ink-soft, #2d3a4e); } .pd-seo__body strong { color: var(--brand-ink, #12151a); font-weight: 700; } /* ── provider-detail-testimonials.blade.php ── */ .pd-test, .pd-test * { box-sizing: border-box; } .pd-test { padding: clamp(2.75rem, 5vw, 4rem) 0; background: var(--brand-bg-green, #0f1729); color: #e2e8f0; overflow: hidden; } .pd-test__container { max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } .pd-test__header { margin-bottom: 1.5rem; max-width: 40rem; } .pd-test__eyebrow { margin: 0 0 .35rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: #10b79f; } .pd-test__title { margin: 0 0 .4rem; font-size: clamp(1.3rem, 3vw, 1.85rem); font-weight: 800; color: #f1f5f9; letter-spacing: -.02em; } .pd-test__sub { margin: 0; font-size: .92rem; color: #94a3b8; } .pd-test__wrap { position: relative; } .pd-test-swiper { padding: 8px 4px 20px; overflow: visible; } .pd-test-swiper .swiper-slide { width: min(100%, 360px); height: auto; } .pd-test__card { margin: 0; padding: 1.15rem 1.25rem; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); height: 100%; display: flex; flex-direction: column; gap: .65rem; } .pd-test__card-top { display: flex; align-items: center; gap: .65rem; } .pd-test__avatar { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(16, 183, 159, .25); color: #10b79f; font-size: .85rem; font-weight: 800; flex-shrink: 0; } .pd-test__author { font-style: normal; font-weight: 700; color: #f1f5f9; font-size: .95rem; } .pd-test__date { display: block; font-size: .78rem; color: #94a3b8; margin-top: .1rem; } .pd-test__stars { display: flex; gap: 2px; color: #fbbf24; font-size: .9rem; } .pd-test__quote { margin: 0; flex: 1; } .pd-test__quote p { margin: 0; font-size: .95rem; line-height: 1.65; color: #cbd5e1; } .pd-test__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .15); background: rgba(15, 23, 42, .8); color: #e2e8f0; font-size: 1.3rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .pd-test__nav:hover { background: #10b79f; border-color: #10b79f; color: #fff; } .pd-test__nav.swiper-button-disabled { opacity: .35; pointer-events: none; } .pd-test__nav--prev { inset-inline-start: -4px; } .pd-test__nav--next { inset-inline-end: -4px; } .pd-test__empty { margin: 0; padding: 2rem; text-align: center; border-radius: 14px; background: rgba(255, 255, 255, .04); color: #94a3b8; line-height: 1.6; } @media (max-width: 575px) { .pd-test__nav { display: none; } .pd-test-swiper .swiper-slide { width: 88vw; } } /* ── provider-images-section.blade.php ── */ /* ───────────────────────────────────────────────────────────── Partners marquee Sits on the brand's white canvas so partner logos (varied colors and densities) read cleanly. Soft brand glows at the corners keep the section tied to the rest of the page. ───────────────────────────────────────────────────────────── */ .front-partners { position: relative; padding: clamp(56px, 8vw, 96px) 0; background: var(--brand-bg-white, #ffffff); color: var(--brand-ink, #0f1729); overflow: hidden; isolation: isolate; } .front-partners__bg-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(80px); pointer-events: none; opacity: .55; } .front-partners__bg-glow--one { width: 460px; height: 460px; inset-block-start: -180px; inset-inline-start: -120px; background: radial-gradient(circle, var(--brand-primary-glow, rgba(16,183,159,.32)) 0%, transparent 70%); } .front-partners__bg-glow--two { width: 420px; height: 420px; inset-block-end: -160px; inset-inline-end: -140px; background: radial-gradient(circle, var(--brand-red-glow, rgba(230,57,70,.40)) 0%, transparent 70%); } .front-partners__container { max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } /* ─── Header ──────────────────────────────────────────────── */ .front-partners__header { max-width: 720px; margin: 0 auto clamp(32px, 4vw, 48px); text-align: center; } .front-partners__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 0.8rem; padding: 0.35rem 0.9rem; border-radius: 999px; background: var(--brand-primary-soft, rgba(16,183,159,.12)); color: var(--brand-primary-deep, #0e9d88); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .front-partners__title { margin: 0 0 0.7rem; font-size: clamp(1.7rem, 3.2vw, 2.35rem); font-weight: 800; line-height: 1.18; letter-spacing: -0.015em; color: var(--brand-ink, #0f1729); } .front-partners__lede { margin: 0; font-size: clamp(0.98rem, 1.5vw, 1.08rem); line-height: 1.65; color: var(--brand-ink-muted, #5c6570); } /* ─── Marquee shell ───────────────────────────────────────── */ .front-partners__swiper { position: relative; padding-block: 4px; width: 100%; overflow: hidden; } .front-partners__track { /* Linear transition keeps the strip moving at constant speed without the eased ramp Swiper applies by default. */ transition-timing-function: linear !important; align-items: center; } /* Each slide takes only the width of its tile so 'auto' slides work. */ .front-partners__slide { width: auto !important; height: auto; flex-shrink: 0; } /* ─── Logo tile ───────────────────────────────────────────── */ a.front-partners__tile { text-decoration: none; color: inherit; } a.front-partners__tile:focus-visible { outline: 2px solid var(--brand-primary, #10B79F); outline-offset: 3px; } .front-partners__tile { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.45rem; width: clamp(140px, 18vw, 200px); min-height: clamp(110px, 14vw, 148px); padding-block: clamp(8px, 1vw, 10px) clamp(10px, 1.2vw, 12px); /* Tight inner padding so each logo fills its tile edge-to-edge. The tile itself still provides visual separation via the rounded border + soft shadow. */ padding-inline: clamp(8px, 0.9vw, 12px); background: #ffffff; border: 1px solid rgba(15, 23, 41, 0.08); border-radius: 16px; box-shadow: 0 1px 0 rgba(15, 23, 41, 0.04), 0 14px 28px -20px rgba(15, 23, 41, 0.22); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .front-partners__tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand-primary, #10B79F) 40%, transparent); box-shadow: 0 1px 0 rgba(15, 23, 41, 0.04), 0 24px 38px -20px rgba(15, 23, 41, 0.30); } @supports not (border-color: color-mix(in srgb, red, white)) { .front-partners__tile:hover { border-color: rgba(16, 183, 159, 0.45); } } .front-partners__logo-wrap { display: flex; align-items: center; justify-content: center; width: 100%; flex: 1 1 auto; min-height: clamp(64px, 8vw, 88px); max-height: clamp(72px, 9vw, 96px); } .front-partners__logo { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; /* Logos arrive in many palettes — a touch of saturation pull-back keeps the band feeling unified without going monochrome. */ filter: saturate(0.92); transition: filter 0.28s ease, transform 0.28s ease; } .front-partners__tile:hover .front-partners__logo { filter: saturate(1.05); transform: scale(1.04); } .front-partners__name { width: 100%; padding-inline: 0.15rem; font-size: 0.78rem; font-weight: 700; line-height: 1.3; text-align: center; color: var(--brand-ink, #0f1729); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-word; } /* ─── Edge masks (so logos fade in/out at the section edges) */ .front-partners__edge { position: absolute; inset-block-start: 0; inset-block-end: 0; width: clamp(40px, 6vw, 90px); z-index: 2; pointer-events: none; } .front-partners__edge--start { inset-inline-start: 0; background: linear-gradient( to right, var(--brand-white-1, #ffffff) 0%, rgba(255, 255, 255, 0) 100% ); } .front-partners__edge--end { inset-inline-end: 0; background: linear-gradient( to left, var(--brand-white-1, #ffffff) 0%, rgba(255, 255, 255, 0) 100% ); } /* In RTL, the same logical-property `to right / to left` keywords still describe the *physical* direction of the gradient. The inset-inline-* anchors keep each mask glued to the correct edge, so we only need to swap the gradient directions. */ .front-partners[dir="rtl"] .front-partners__edge--start { background: linear-gradient( to left, var(--brand-white-1, #ffffff) 0%, rgba(255, 255, 255, 0) 100% ); } .front-partners[dir="rtl"] .front-partners__edge--end { background: linear-gradient( to right, var(--brand-white-1, #ffffff) 0%, rgba(255, 255, 255, 0) 100% ); } /* ─── Responsive ──────────────────────────────────────────── */ @media (max-width: 575px) { .front-partners { padding: clamp(40px, 12vw, 64px) 0; } .front-partners__edge { width: 36px; } } /* ─── Reduced motion ──────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .front-partners__track { transition: none !important; } .front-partners__tile, .front-partners__logo { transition: none !important; } /* Swiper still animates frame-by-frame because autoplay is JS-driven; kill it by hiding the auto-scroll while keeping the strip readable. */ .front-partners__swiper .swiper-wrapper { transform: none !important; flex-wrap: wrap; justify-content: center; gap: 18px; } .front-partners__edge { display: none; } } /* ── provider-social-links.blade.php ── */ .pd-social, .pd-social * { box-sizing: border-box; } .pd-social { display: flex; flex-wrap: wrap; gap: .5rem; } .pd-social__link { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .95rem; border-radius: 999px; font-size: .85rem; font-weight: 700; text-decoration: none; transition: background .2s, border-color .2s, color .2s, transform .2s; } .pd-social__icon { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; } .pd-social__icon svg { width: 100%; height: 100%; } .pd-social--inline .pd-social__link { background: rgba(16, 183, 159, .1); border: 1px solid rgba(16, 183, 159, .28); color: var(--brand-primary-deep, #0e9d88); } .pd-social--inline .pd-social__link:hover { background: var(--brand-primary, #10B79F); border-color: var(--brand-primary, #10B79F); color: #fff; transform: translateY(-1px); } .pd-social--hero .pd-social__link { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); color: #fff; } .pd-social--hero .pd-social__link:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .5); color: #fff; transform: translateY(-1px); } .pd-social--hero .pd-social__link--wa:hover { background: rgba(37, 211, 102, .35); border-color: rgba(37, 211, 102, .6); } .pd-social--hero .pd-social__link--fb:hover { background: rgba(24, 119, 242, .35); border-color: rgba(24, 119, 242, .55); } /* ── providers-hero.blade.php ── */ .pv-hero, .pv-hero * { box-sizing: border-box; } .pv-hero { position: relative; min-height: clamp(340px, 50vw, 560px); display: flex; align-items: center; padding: clamp(80px, 13vw, 130px) 0 clamp(56px, 9vw, 88px); overflow: hidden; isolation: isolate; background: linear-gradient(160deg, rgba(10,6,14,.84) 0%, rgba(90,6,16,.72) 50%, rgba(14,9,9,.78) 100%), var(--pv-hero-img); background-size: cover; background-position: center; color: #fff; } .pv-hero__glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; } .pv-hero__glow--a { width: 520px; height: 520px; inset-block-start: -220px; inset-inline-end: -160px; background: radial-gradient(circle, rgba(255,255,255,.10) 0%, transparent 70%); } .pv-hero__glow--b { width: 440px; height: 440px; inset-block-end: -200px; inset-inline-start: -140px; background: radial-gradient(circle, rgba(16,183,159,.32) 0%, transparent 70%); } .pv-hero__dots { position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.5px); background-size: 22px 22px; pointer-events: none; } .pv-hero__container { position: relative; z-index: 1; max-width: 1240px; width: 100%; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); display: flex; flex-direction: column; align-items: flex-start; gap: clamp(.75rem, 1.6vw, 1.1rem); } .pv-hero__breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; } .pv-hero__breadcrumb li { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.65); } .pv-hero__breadcrumb a { color: rgba(255,255,255,.65); text-decoration: none; transition: color .18s; } .pv-hero__breadcrumb a:hover { color: #fff; text-decoration: underline; } .pv-hero__breadcrumb [aria-current="page"] { color: #fff; font-weight: 700; } .pv-hero__breadcrumb span[aria-hidden] { opacity: .45; } .pv-hero__title { margin: 0; font-size: clamp(2.2rem, 6vw, 3.75rem); font-weight: 900; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; max-width: 780px; } .pv-hero__desc { margin: 0; max-width: 620px; font-size: clamp(1rem, 1.8vw, 1.12rem); line-height: 1.65; color: rgba(255,255,255,.84); } .pv-hero__pills { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .15rem; } .pv-hero__pill { display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .92rem; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); font-size: .88rem; font-weight: 700; backdrop-filter: blur(6px); } .pv-hero__pill--accent { background: rgba(245, 158, 11, .22); border-color: rgba(245, 158, 11, .45); } .pv-hero__pill svg { width: 15px; height: 15px; flex-shrink: 0; } .pv-hero__scroll { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,.30); color: rgba(255,255,255,.72); text-decoration: none; margin-top: clamp(.35rem, 1.2vw, .75rem); animation: pv-hero-bob 2.2s ease-in-out infinite; transition: border-color .2s, color .2s; } .pv-hero__scroll:hover { border-color: rgba(255,255,255,.70); color: #fff; } .pv-hero__scroll svg { width: 22px; height: 22px; } @keyframes pv-hero-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { .pv-hero__scroll { animation: none; } } @media (max-width: 575px) { .pv-hero { min-height: 0; } .pv-hero__title { font-size: clamp(1.9rem, 10vw, 2.6rem); } } /* ── providers-search-results.blade.php ── */ .pv-search, .pv-search * { box-sizing: border-box; } .pv-search { padding: clamp(2rem, 5vw, 3rem) 0; background: #f8fafc; } .pv-search__container { max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } .pv-search__header { margin-bottom: 1.5rem; } .pv-search__eyebrow { margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--brand-primary-deep, #0e9d88); } [dir='rtl'] .pv-search__eyebrow { text-transform: none; letter-spacing: 0; } .pv-search__title { margin: 0 0 0.5rem; font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 900; color: var(--brand-ink, #12151a); } .pv-search__clear-link { font-size: 0.88rem; font-weight: 700; color: var(--brand-primary-deep, #0e9d88); text-decoration: none; } .pv-search__clear-link:hover { text-decoration: underline; } .pv-search__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; } .pv-search__empty { margin: 0 0 1rem; font-size: 1rem; color: var(--brand-ink-muted, #5c6570); } .pv-search__browse { display: inline-flex; padding: 0.55rem 1.1rem; border-radius: 999px; background: var(--brand-primary, #10B79F); color: #fff; font-weight: 800; text-decoration: none; } /* ── providers-seo.blade.php ── */ .pv-seo, .pv-seo * { box-sizing: border-box; } .pv-seo { padding: clamp(3rem, 6vw, 5rem) 0; background: #f1f5f9; border-top: 1px solid rgba(15, 23, 42, .06); } .pv-seo__container { max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } .pv-seo__inner { display: grid; grid-template-columns: 1fr 1.7fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (max-width: 720px) { .pv-seo__inner { grid-template-columns: 1fr; } } .pv-seo__eyebrow { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 1rem; padding: .3rem .85rem; border-radius: 999px; background: rgba(16, 183, 159, .10); border: 1px solid rgba(16, 183, 159, .24); color: var(--brand-primary-deep, #0e9d88); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; } .pv-seo__eyebrow svg { width: 14px; height: 14px; } .pv-seo__title { margin: 0 0 1.25rem; font-size: clamp(1.4rem, 3.2vw, 2rem); font-weight: 900; letter-spacing: -.025em; color: var(--brand-ink, #12151a); text-wrap: balance; line-height: 1.2; } .pv-seo__dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem; margin: 0 0 1.4rem; } .pv-seo__dt-dd { padding: .65rem .85rem; border-radius: 12px; background: #fff; border: 1px solid rgba(15, 23, 42, .07); } .pv-seo__dt-dd dt { font-size: .73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-ink-muted, #5c6570); margin-bottom: .2rem; } .pv-seo__dt-dd dd { margin: 0; font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; color: var(--brand-ink, #12151a); } .pv-seo__back { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; font-weight: 700; color: var(--brand-primary-deep, #0e9d88); text-decoration: none; transition: gap .18s ease, color .18s ease; } .pv-seo__back svg { width: 16px; height: 16px; } .pv-seo__back:hover { gap: .65rem; color: var(--brand-primary, #10B79F); } .pv-seo__body { display: flex; flex-direction: column; gap: 1.1rem; } .pv-seo__body p { margin: 0; font-size: clamp(.97rem, 1.8vw, 1.06rem); line-height: 1.78; color: var(--brand-ink-soft, #2d3a4e); } .pv-seo__body strong { color: var(--brand-ink, #12151a); font-weight: 700; } .pv-seo__list { list-style: none; margin: .25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; } .pv-seo__list li { display: flex; align-items: flex-start; gap: .65rem; font-size: .97rem; font-weight: 600; color: var(--brand-ink, #12151a); line-height: 1.5; } .pv-seo__list svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: .15rem; color: var(--brand-primary, #10B79F); } /* ── providers-slider.blade.php ── */ .pv-slider, .pv-slider * { box-sizing: border-box; } .pv-slider { padding: clamp(2.5rem, 5vw, 3.75rem) 0; position: relative; overflow: hidden; } .pv-slider--light { background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%); } .pv-slider--white { background: #ffffff; } .pv-slider--mint { background: linear-gradient(180deg, #f0fdf9 0%, #ffffff 100%); } .pv-slider__container { max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } .pv-slider__header { margin-bottom: clamp(1.15rem, 2.5vw, 1.65rem); } .pv-slider__eyebrow { margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--brand-primary-deep, #0e9d88); } .pv-slider__title { margin: 0 0 0.35rem; font-size: clamp(1.35rem, 3vw, 1.85rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--brand-ink, #12151a); text-wrap: balance; } .pv-slider__sub { margin: 0; max-width: 48ch; font-size: 0.92rem; line-height: 1.55; color: var(--brand-ink-muted, #5c6570); } .pv-slider__wrap { position: relative; } .pv-slider__swiper { width: 100%; padding: 8px 4px 16px; overflow: visible; } .pv-slider__swiper .swiper-slide { width: clamp(220px, 72vw, 280px); height: auto; display: flex; } .pv-slider__swiper .swiper-slide > .cat-pc--grid { width: 100%; min-height: 100%; } .pv-slider__swiper .swiper-slide .cat-pc__desc { display: none; } .pv-slider__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 42px; height: 42px; border-radius: 999px; border: 1px solid rgba(15, 23, 42, 0.1); background: rgba(255, 255, 255, 0.95); color: var(--brand-ink, #12151a); font-size: 1.35rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 22px -12px rgba(15, 23, 42, 0.35); transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease; } .pv-slider__nav:hover { background: var(--brand-primary, #10b79f); border-color: var(--brand-primary, #10b79f); color: #fff; } .pv-slider__nav:focus-visible { outline: 2px solid var(--brand-primary, #10b79f); outline-offset: 2px; } .pv-slider__nav.swiper-button-disabled { opacity: 0.35; cursor: default; pointer-events: none; } .pv-slider__nav--prev { inset-inline-start: clamp(-6px, -0.5vw, 4px); } .pv-slider__nav--next { inset-inline-end: clamp(-6px, -0.5vw, 4px); } @media (max-width: 575px) { .pv-slider__nav { display: none; } .pv-slider__swiper .swiper-slide { width: 78vw; max-width: 300px; } } /* ── service-card.blade.php ── */ .svc-card, .svc-card * { box-sizing: border-box; } .svc-card { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; border-radius: 18px; overflow: hidden; background: #fff; border: 1.5px solid rgba(15, 23, 42, .08); box-shadow: 0 4px 20px -14px rgba(15, 23, 42, .2); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .svc-card:hover { transform: translateY(-4px); border-color: var(--brand-primary, #10B79F); box-shadow: 0 16px 36px -18px rgba(15, 23, 42, .25); color: inherit; } .svc-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: linear-gradient(135deg, rgba(16,183,159,.12), rgba(193,18,31,.08)); } .svc-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .svc-card:hover .svc-card__img { transform: scale(1.05); } .svc-card__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--brand-primary-deep, #0e9d88); opacity: .45; } .svc-card__ph svg { width: 40px; height: 40px; } .svc-card__badge { position: absolute; inset-block-end: .55rem; inset-inline-start: .55rem; padding: .28rem .65rem; border-radius: 999px; background: rgba(193, 18, 31, .92); color: #fff; font-size: .72rem; font-weight: 800; } .svc-card__body { flex: 1; display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.05rem 1.1rem; } .svc-card__type { margin-bottom: 0.2rem; } .svc-card__name { margin: 0; font-size: 1.08rem; font-weight: 800; color: var(--brand-ink, #12151a); line-height: 1.3; } .svc-card__desc { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--brand-ink-muted, #5c6570); flex: 1; } .svc-card__count { margin-top: auto; font-size: .82rem; font-weight: 600; color: var(--brand-primary-deep, #0e9d88); } .svc-card--chip { flex-direction: row; align-items: center; border-radius: 14px; } .svc-card--chip .svc-card__media { width: 56px; height: 56px; aspect-ratio: 1; flex-shrink: 0; border-radius: 12px; margin: .65rem; margin-inline-end: 0; } .svc-card--chip .svc-card__body { padding: .65rem .85rem .65rem 0; } .svc-card--chip .svc-card__desc { display: none; } .svc-card--chip .svc-card__badge { font-size: .65rem; padding: .2rem .45rem; } /* ── service-detail-hero.blade.php ── */ .sd-hero, .sd-hero * { box-sizing: border-box; } .sd-hero { position: relative; min-height: clamp(340px, 50vw, 560px); display: flex; align-items: center; padding: clamp(80px, 12vw, 120px) 0 clamp(48px, 8vw, 72px); overflow: hidden; isolation: isolate; background: linear-gradient(165deg, rgba(10, 94, 82, .92) 0%, rgba(14, 9, 9, .82) 100%), var(--brand-bg-green, #0e9d88); color: #fff; } .sd-hero[style*="--sd-hero-img"] { background: linear-gradient(160deg, rgba(10, 6, 14, .88) 0%, rgba(10, 94, 82, .75) 50%, rgba(14, 9, 9, .85) 100%), var(--sd-hero-img); background-size: cover; background-position: center; } .sd-hero__glow { position: absolute; border-radius: 50%; filter: blur(88px); pointer-events: none; z-index: 0; } .sd-hero__glow--a { width: 480px; height: 480px; inset-block-start: -200px; inset-inline-end: -160px; background: radial-gradient(circle, rgba(255,255,255,.1) 0%, transparent 70%); } .sd-hero__glow--b { width: 400px; height: 400px; inset-block-end: -200px; inset-inline-start: -120px; background: radial-gradient(circle, rgba(16,183,159,.3) 0%, transparent 70%); } .sd-hero__dots { position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.5px); background-size: 20px 20px; pointer-events: none; } .sd-hero__container { position: relative; z-index: 1; max-width: 1240px; width: 100%; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } .sd-hero__bc ol { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.65); } .sd-hero__bc a { color: rgba(255,255,255,.65); text-decoration: none; } .sd-hero__bc a:hover { color: #fff; text-decoration: underline; } .sd-hero__bc [aria-current="page"] { color: #fff; font-weight: 700; } .sd-hero__grid { display: grid; grid-template-columns: 1fr auto; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center; } @media (max-width: 768px) { .sd-hero__grid { grid-template-columns: 1fr; } .sd-hero__visual { justify-self: center; } } .sd-hero__badge { display: inline-flex; margin: 0 0 .65rem; padding: .28rem .75rem; border-radius: 999px; background: rgba(193,18,31,.85); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .sd-hero__type { margin-bottom: 0.65rem; } .sd-hero__title { margin: 0 0 .5rem; font-size: clamp(1.85rem, 5vw, 3rem); font-weight: 900; line-height: 1.1; letter-spacing: -.03em; max-width: 720px; } .sd-hero__desc { margin: 0 0 .85rem; max-width: 580px; font-size: clamp(.95rem, 1.7vw, 1.08rem); line-height: 1.65; color: rgba(255,255,255,.84); } .sd-hero__pills { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.1rem; } .sd-hero__pill { display: inline-flex; align-items: center; gap: .3rem; padding: .32rem .85rem; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); font-size: .85rem; font-weight: 700; } .sd-hero__pill--deal { background: rgba(245, 158, 11, .22); border-color: rgba(245, 158, 11, .45); } .sd-hero__actions { display: flex; flex-wrap: wrap; gap: .6rem; } .sd-hero__btn { display: inline-flex; padding: .6rem 1.15rem; border-radius: 999px; font-size: .9rem; font-weight: 800; text-decoration: none; transition: transform .18s, background .18s; } .sd-hero__btn--primary { background: var(--brand-primary, #10B79F); color: #fff; box-shadow: 0 8px 20px -10px rgba(16,183,159,.6); } .sd-hero__btn--primary:hover { color: #fff; transform: translateY(-2px); } .sd-hero__btn--ghost { border: 2px solid rgba(255,255,255,.35); color: #fff; } .sd-hero__btn--ghost:hover { border-color: #fff; color: #fff; } .sd-hero__logo { width: clamp(120px, 22vw, 180px); height: clamp(120px, 22vw, 180px); object-fit: cover; border-radius: 22px; border: 3px solid rgba(255,255,255,.25); box-shadow: 0 20px 50px -20px rgba(0,0,0,.5); background: #fff; } /* ── service-detail-seo.blade.php ── */ .sd-seo, .sd-seo * { box-sizing: border-box; } .sd-seo { padding: clamp(3rem, 6vw, 5rem) 0; background: #f1f5f9; border-top: 1px solid rgba(15,23,42,.06); } .sd-seo__container { max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } .sd-seo__inner { display: grid; grid-template-columns: 1fr 1.7fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (max-width: 720px) { .sd-seo__inner { grid-template-columns: 1fr; } } .sd-seo__eyebrow { display: inline-flex; margin: 0 0 1rem; padding: .3rem .85rem; border-radius: 999px; background: rgba(16,183,159,.1); border: 1px solid rgba(16,183,159,.24); color: var(--brand-primary-deep, #0e9d88); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; } .sd-seo__title { margin: 0 0 1.25rem; font-size: clamp(1.35rem, 3vw, 1.9rem); font-weight: 900; color: var(--brand-ink, #12151a); line-height: 1.2; } .sd-seo__dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; margin: 0 0 1.25rem; } .sd-seo__dt-dd { padding: .65rem .85rem; border-radius: 12px; background: #fff; border: 1px solid rgba(15,23,42,.07); } .sd-seo__dt-dd dt { font-size: .73rem; font-weight: 700; text-transform: uppercase; color: var(--brand-ink-muted, #5c6570); margin-bottom: .2rem; } .sd-seo__dt-dd dd { margin: 0; font-size: 1.45rem; font-weight: 900; color: var(--brand-ink, #12151a); } .sd-seo__back { font-size: .88rem; font-weight: 700; color: var(--brand-primary-deep, #0e9d88); text-decoration: none; } .sd-seo__back:hover { text-decoration: underline; } .sd-seo__body p { margin: 0 0 1rem; font-size: clamp(.97rem, 1.8vw, 1.06rem); line-height: 1.78; color: var(--brand-ink-soft, #2d3a4e); } .sd-seo__body strong { color: var(--brand-ink, #12151a); } /* ── service-detail-stats.blade.php ── */ .sd-stat, .sd-stat * { box-sizing: border-box; } .sd-stat { position: relative; padding: clamp(2.5rem, 5vw, 3.5rem) 0; background: linear-gradient(145deg, #0a5e52 0%, #0e9d88 55%, #10B79F 100%); color: #fff; overflow: hidden; } .sd-stat__glow { position: absolute; width: 400px; height: 400px; inset-block-start: -160px; inset-inline-end: -120px; border-radius: 50%; filter: blur(72px); background: rgba(255,255,255,.1); pointer-events: none; } .sd-stat__container { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } .sd-stat__header { margin-bottom: 1.35rem; text-align: center; } .sd-stat__eyebrow { margin: 0 0 .35rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.75); } .sd-stat__title { margin: 0; font-size: clamp(1.3rem, 3vw, 1.75rem); font-weight: 800; } .sd-stat__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } @media (max-width: 900px) { .sd-stat__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .sd-stat__grid { grid-template-columns: 1fr; } } .sd-stat__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .45rem; padding: 1.15rem; border-radius: 18px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); animation: sd-stat-rise .5s ease both; animation-delay: var(--sd-stat-stagger, 0ms); } .sd-stat__icon { width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; } .sd-stat__icon svg { width: 22px; height: 22px; } .sd-stat__value { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 900; line-height: 1; } .sd-stat__label { font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.82); } @keyframes sd-stat-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ── services-featured-offers.blade.php ── */ .sv-feat, .sv-feat * { box-sizing: border-box; } .sv-feat { padding: clamp(2.75rem, 5vw, 4rem) 0; background: var(--brand-bg-green, #0f1729); overflow: hidden; } .sv-feat__container { max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } .sv-feat__header { max-width: 44rem; margin-bottom: 1.5rem; } .sv-feat__eyebrow { margin: 0 0 .4rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: #10b79f; } .sv-feat__title { margin: 0 0 .5rem; font-size: clamp(1.35rem, 3vw, 1.85rem); font-weight: 800; color: #f1f5f9; letter-spacing: -.02em; } .sv-feat__sub { margin: 0; font-size: .95rem; line-height: 1.55; color: #94a3b8; } .sv-feat__wrap { position: relative; } .sv-feat-swiper { padding: 8px 4px 16px; overflow: visible; } .sv-feat-swiper .swiper-slide { width: clamp(220px, 72vw, 280px); height: auto; display: flex; } .sv-feat-swiper .swiper-slide .svc-card { width: 100%; } .sv-feat-swiper .svc-card__desc { display: none; } .sv-feat__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background: rgba(15,23,42,.75); color: #e2e8f0; font-size: 1.35rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .sv-feat__nav:hover { background: #10b79f; border-color: #10b79f; color: #fff; } .sv-feat__nav.swiper-button-disabled { opacity: .35; pointer-events: none; } .sv-feat__nav--prev { inset-inline-start: -4px; } .sv-feat__nav--next { inset-inline-end: -4px; } @media (max-width: 575px) { .sv-feat__nav { display: none; } .sv-feat-swiper .swiper-slide { width: 78vw; } } /* ── services-grid.blade.php ── */ .sv-grid, .sv-grid * { box-sizing: border-box; } .sv-grid { position: relative; padding: clamp(2.75rem, 5vw, 4rem) 0; background: linear-gradient(180deg, #f4f7fb 0%, #fff 100%); overflow: hidden; } .sv-grid__glow { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; } .sv-grid__glow--a { width: 360px; height: 360px; inset-block-start: -120px; inset-inline-end: -100px; background: rgba(16,183,159,.1); } .sv-grid__container { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } .sv-grid__header { margin-bottom: clamp(1.25rem, 3vw, 1.75rem); } .sv-grid__eyebrow { margin: 0 0 .35rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--brand-primary-deep, #0e9d88); } .sv-grid__title { margin: 0 0 .35rem; font-size: clamp(1.35rem, 3vw, 1.85rem); font-weight: 800; color: var(--brand-ink, #12151a); } .sv-grid__sub { margin: 0; max-width: 52ch; font-size: .92rem; line-height: 1.55; color: var(--brand-ink-muted, #5c6570); } .sv-grid__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(.85rem, 2vw, 1.25rem); } .sv-grid__item { animation: sv-grid-rise .5s ease both; animation-delay: var(--sv-grid-stagger, 0ms); } @keyframes sv-grid-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .sv-grid__item { animation: none; } } /* ── services-hero.blade.php ── */ .sv-hero, .sv-hero * { box-sizing: border-box; } .sv-hero { position: relative; min-height: clamp(320px, 48vw, 520px); display: flex; align-items: center; padding: clamp(80px, 13vw, 120px) 0 clamp(48px, 8vw, 80px); overflow: hidden; isolation: isolate; background: linear-gradient(165deg, rgba(10, 94, 82, .92) 0%, rgba(14, 9, 9, .82) 100%), var(--brand-bg-green, #0e9d88); color: #fff; } .sv-hero[style*="--sv-hero-bg-img"] { background-image: linear-gradient(165deg, rgba(10, 94, 82, .88) 0%, rgba(14, 9, 9, .78) 100%), var(--sv-hero-bg-img); background-size: cover; background-position: center; } .sv-hero__glow { position: absolute; border-radius: 50%; filter: blur(88px); pointer-events: none; z-index: 0; } .sv-hero__glow--a { width: 480px; height: 480px; inset-block-start: -200px; inset-inline-end: -160px; background: radial-gradient(circle, rgba(255,255,255,.1) 0%, transparent 70%); } .sv-hero__glow--b { width: 400px; height: 400px; inset-block-end: -200px; inset-inline-start: -120px; background: radial-gradient(circle, rgba(193,18,31,.25) 0%, transparent 70%); } .sv-hero__dots { position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.5px); background-size: 20px 20px; pointer-events: none; } .sv-hero__container { position: relative; z-index: 1; max-width: 1240px; width: 100%; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; } .sv-hero__bc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.65); } .sv-hero__bc a { color: rgba(255,255,255,.65); text-decoration: none; } .sv-hero__bc a:hover { color: #fff; text-decoration: underline; } .sv-hero__bc [aria-current="page"] { color: #fff; font-weight: 700; } .sv-hero__title { margin: 0; font-size: clamp(2rem, 5.5vw, 3.25rem); font-weight: 900; line-height: 1.08; letter-spacing: -.03em; max-width: 720px; } .sv-hero__desc { margin: 0; max-width: 580px; font-size: clamp(.95rem, 1.7vw, 1.08rem); line-height: 1.65; color: rgba(255,255,255,.84); } .sv-hero__pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .15rem; } .sv-hero__pill { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .85rem; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); font-size: .85rem; font-weight: 700; } .sv-hero__pill--accent { background: rgba(245, 158, 11, .22); border-color: rgba(245, 158, 11, .45); } .sv-hero__scroll { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); color: rgba(255,255,255,.72); text-decoration: none; margin-top: .5rem; animation: sv-hero-bob 2.2s ease-in-out infinite; } .sv-hero__scroll:hover { border-color: rgba(255,255,255,.7); color: #fff; } .sv-hero__scroll svg { width: 22px; height: 22px; } @keyframes sv-hero-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { .sv-hero__scroll { animation: none; } } /* ── services-popular.blade.php ── */ .sv-pop, .sv-pop * { box-sizing: border-box; } .sv-pop { padding: clamp(2.5rem, 5vw, 3.75rem) 0; background: #fff; } .sv-pop__container { max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } .sv-pop__header { margin-bottom: 1.35rem; } .sv-pop__eyebrow { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; padding: .3rem .85rem; border-radius: 999px; background: rgba(16,183,159,.1); border: 1px solid rgba(16,183,159,.24); color: var(--brand-primary-deep, #0e9d88); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; } .sv-pop__eyebrow svg { width: 13px; height: 13px; } .sv-pop__title { margin: 0 0 .35rem; font-size: clamp(1.35rem, 3vw, 1.85rem); font-weight: 800; color: var(--brand-ink, #12151a); letter-spacing: -.02em; } .sv-pop__sub { margin: 0; max-width: 48ch; font-size: .92rem; line-height: 1.55; color: var(--brand-ink-muted, #5c6570); } .sv-pop__track-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: .5rem; } .sv-pop__track { list-style: none; margin: 0; padding: 0; display: flex; gap: .75rem; width: max-content; } .sv-pop__item { flex: 0 0 auto; width: clamp(260px, 70vw, 320px); animation: sv-pop-rise .5s ease both; animation-delay: var(--sv-pop-stagger, 0ms); } @keyframes sv-pop-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .sv-pop__item { animation: none; } } /* ── services-section.blade.php ── */ .front-services, .front-services * { box-sizing: border-box; } .front-services { position: relative; padding: clamp(2.75rem, 6vw, 4.25rem) 0; background: var(--brand-bg-green, #0f1729); overflow: hidden; } .front-services__glow { position: absolute; inset: -20% -10% auto; height: 55%; background: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(16, 183, 159, 0.22), transparent 68%); pointer-events: none; } .front-services__container { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 32px); } .front-services__banner { margin: 0 0 clamp(1.35rem, 3.5vw, 2rem); border-radius: 18px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 20px 50px -28px rgba(0, 0, 0, 0.55); } .front-services__banner-img { display: block; width: 100%; height: auto; max-height: clamp(140px, 22vw, 220px); object-fit: cover; object-position: center; } .front-services__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: clamp(1.25rem, 3vw, 1.75rem); } .front-services__copy { flex: 1 1 280px; max-width: 40rem; } .front-services__eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0 0.55rem; padding: 0.32rem 0.85rem; border-radius: 999px; background: rgba(16, 183, 159, 0.14); border: 1px solid rgba(16, 183, 159, 0.32); color: #6ee7d6; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; } [dir='rtl'] .front-services__eyebrow { letter-spacing: 0; text-transform: none; font-size: 0.78rem; } .front-services__eyebrow-icon { width: 13px; height: 13px; flex-shrink: 0; } .front-services__title { margin: 0 0 0.5rem; font-size: clamp(1.5rem, 3.6vw, 2.05rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.18; color: #f8fafc; } .front-services__lede { margin: 0; color: #94a3b8; line-height: 1.6; font-size: clamp(0.94rem, 1.7vw, 1.04rem); max-width: 52ch; } .front-services__cta { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.62rem 1.15rem; border-radius: 999px; text-decoration: none; font-size: 0.88rem; font-weight: 800; color: #0f1729; background: #fff; border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.45); transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease; flex-shrink: 0; } .front-services__cta:hover { color: #fff; background: var(--brand-primary, #10b79f); border-color: var(--brand-primary, #10b79f); transform: translateY(-2px); } .front-services__cta:focus-visible { outline: 2px solid #6ee7d6; outline-offset: 3px; } .front-services__cta-arrow { font-size: 1.05rem; line-height: 1; } .front-services__slider-wrap { position: relative; } .front-services-swiper { width: 100%; padding: 10px 4px 16px; overflow: visible; } .front-services-swiper .swiper-slide { width: clamp(288px, 42vw, 340px); height: auto; display: flex; } .front-svc-card { display: flex; align-items: center; gap: 0.85rem; width: 100%; min-height: 108px; padding: 0.75rem 0.85rem 0.75rem 0.75rem; text-decoration: none; color: inherit; background: #fff; border: 1.5px solid rgba(15, 23, 42, 0.07); border-radius: 16px; box-shadow: 0 10px 28px -18px rgba(0, 0, 0, 0.45); transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; } .front-svc-card:focus-visible { outline: 2px solid #10b79f; outline-offset: 3px; } @media (hover: hover) and (pointer: fine) { .front-svc-card:hover { transform: translateY(-3px); border-color: rgba(16, 183, 159, 0.45); box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.4); } .front-svc-card:hover .front-svc-card__img { transform: scale(1.05); } .front-svc-card:hover .front-svc-card__go { color: var(--brand-primary, #10b79f); transform: translateX(3px); } [dir='rtl'] .front-svc-card:hover .front-svc-card__go { transform: translateX(-3px); } } .front-svc-card__media { position: relative; flex-shrink: 0; width: 88px; height: 88px; border-radius: 14px; overflow: hidden; background: linear-gradient(145deg, rgba(16, 183, 159, 0.12), rgba(15, 23, 42, 0.06)); } .front-svc-card__img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.4s ease; -webkit-user-drag: none; user-select: none; } .front-svc-card__img--placeholder { display: flex; align-items: center; justify-content: center; color: var(--brand-primary-deep, #0e9d88); opacity: 0.45; } .front-svc-card__img--placeholder svg { width: 36px; height: 36px; } .front-svc-card__badge { position: absolute; inset-block-end: 0.35rem; inset-inline-start: 0.35rem; inset-inline-end: 0.35rem; padding: 0.2rem 0.45rem; font-size: 0.62rem; font-weight: 800; line-height: 1.25; text-align: center; color: #fff; background: rgba(193, 18, 31, 0.94); border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); } .front-svc-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; padding-inline-end: 0.15rem; } .front-svc-card__name { margin: 0; font-size: 1.02rem; font-weight: 800; line-height: 1.28; letter-spacing: -0.015em; color: var(--brand-ink, #12151a); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .front-svc-card__meta { display: flex; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.8rem; font-weight: 600; color: var(--brand-primary-deep, #0e9d88); } .front-svc-card__meta-icon { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.85; } .front-svc-card__go { flex-shrink: 0; font-size: 1.35rem; font-weight: 700; line-height: 1; color: #cbd5e1; transition: transform 0.22s ease, color 0.22s ease; } .front-services__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 42px; height: 42px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(15, 23, 42, 0.8); color: #e2e8f0; font-size: 1.35rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(8px); transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; } .front-services__nav:hover { background: var(--brand-primary, #10b79f); border-color: var(--brand-primary, #10b79f); color: #fff; } .front-services__nav:focus-visible { outline: 2px solid #6ee7d6; outline-offset: 2px; } .front-services__nav.swiper-button-disabled { opacity: 0.35; cursor: default; pointer-events: none; } .front-services__nav--prev { inset-inline-start: clamp(-6px, -0.5vw, 4px); } .front-services__nav--next { inset-inline-end: clamp(-6px, -0.5vw, 4px); } @media (max-width: 575px) { .front-services__head { flex-direction: column; align-items: stretch; } .front-services__cta { align-self: flex-start; } .front-services-swiper .swiper-slide { width: min(88vw, 340px); } .front-services__nav { display: none; } } @media (prefers-reduced-motion: reduce) { .front-svc-card, .front-svc-card__img, .front-svc-card__go, .front-services__cta { transition: none !important; } .front-svc-card:hover { transform: none; } } /* ── services-seo.blade.php ── */ .sv-seo, .sv-seo * { box-sizing: border-box; } .sv-seo { padding: clamp(3rem, 6vw, 5rem) 0; background: #f1f5f9; border-top: 1px solid rgba(15,23,42,.06); } .sv-seo__container { max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } .sv-seo__inner { display: grid; grid-template-columns: 1fr 1.7fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (max-width: 720px) { .sv-seo__inner { grid-template-columns: 1fr; } } .sv-seo__eyebrow { display: inline-flex; margin: 0 0 1rem; padding: .3rem .85rem; border-radius: 999px; background: rgba(16,183,159,.1); border: 1px solid rgba(16,183,159,.24); color: var(--brand-primary-deep, #0e9d88); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; } .sv-seo__title { margin: 0 0 1.25rem; font-size: clamp(1.4rem, 3.2vw, 2rem); font-weight: 900; color: var(--brand-ink, #12151a); line-height: 1.2; } .sv-seo__dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; margin: 0 0 1.25rem; } .sv-seo__dt-dd { padding: .65rem .85rem; border-radius: 12px; background: #fff; border: 1px solid rgba(15,23,42,.07); } .sv-seo__dt-dd dt { font-size: .73rem; font-weight: 700; text-transform: uppercase; color: var(--brand-ink-muted, #5c6570); margin-bottom: .2rem; } .sv-seo__dt-dd dd { margin: 0; font-size: 1.45rem; font-weight: 900; color: var(--brand-ink, #12151a); } .sv-seo__back { font-size: .88rem; font-weight: 700; color: var(--brand-primary-deep, #0e9d88); text-decoration: none; } .sv-seo__back:hover { text-decoration: underline; } .sv-seo__body p { margin: 0 0 1rem; font-size: clamp(.97rem, 1.8vw, 1.06rem); line-height: 1.78; color: var(--brand-ink-soft, #2d3a4e); } .sv-seo__list { margin: .5rem 0 0; padding-inline-start: 1.2rem; color: var(--brand-ink, #12151a); line-height: 1.7; } /* ── services-stats.blade.php ── */ .sv-stat, .sv-stat * { box-sizing: border-box; } .sv-stat { position: relative; padding: clamp(2.5rem, 5vw, 3.5rem) 0; background: linear-gradient(145deg, #0a5e52 0%, #0e9d88 55%, #10B79F 100%); color: #fff; overflow: hidden; } .sv-stat__glow { position: absolute; border-radius: 50%; filter: blur(72px); pointer-events: none; } .sv-stat__glow--a { width: 400px; height: 400px; inset-block-start: -160px; inset-inline-end: -120px; background: rgba(255,255,255,.1); } .sv-stat__container { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); } .sv-stat__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } @media (max-width: 580px) { .sv-stat__grid { grid-template-columns: 1fr; } } .sv-stat__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; padding: 1.25rem; border-radius: 18px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); animation: sv-stat-rise .5s ease both; animation-delay: var(--sv-stat-stagger, 0ms); } .sv-stat__icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; } .sv-stat__icon svg { width: 24px; height: 24px; } .sv-stat__value { font-size: clamp(2rem, 4.5vw, 2.75rem); font-weight: 900; line-height: 1; } .sv-stat__label { font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.82); } @keyframes sv-stat-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ── social-floating.blade.php ── */ .front-social, .front-social * { box-sizing: border-box; } /* Hidden on phones/tablets — the mobile offcanvas carries the row below 992px (see inside the navbar). */ .front-social { display: none; } @media (min-width: 992px) { .front-social { display: block; position: fixed; top: 50%; inset-inline-end: 0; transform: translateY(-50%); z-index: 1000; pointer-events: none; /* let children claim pointer events */ } } .front-social__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; /* Each row should hug its content and stick to the rail's edge, so an expanding sibling never stretches the inactive rows. */ align-items: flex-end; gap: 0; filter: drop-shadow(0 10px 24px rgba(15, 23, 42, 0.18)); } .front-social__item { --front-social-bg: #1f2937; --front-social-fg: #ffffff; position: relative; pointer-events: auto; overflow: hidden; /* clip label so it slides out */ width: auto; /* never inherit a stretched width from the column */ } /* Round the outer edges of the stack */ .front-social__item:first-child .front-social__link { border-start-start-radius: 10px; } .front-social__item:last-child .front-social__link { border-end-start-radius: 10px; } .front-social__link { position: relative; display: flex; align-items: center; gap: 0.6rem; width: 44px; height: 44px; padding: 0 12px; text-decoration: none; color: var(--front-social-fg); background: var(--front-social-bg); transition: width 0.28s ease, transform 0.22s ease, filter 0.22s ease; overflow: hidden; } .front-social__link:hover, .front-social__link:focus-visible { width: 168px; text-decoration: none; color: var(--front-social-fg); filter: brightness(1.08); } .front-social__link:focus-visible { outline: 2px solid #fff; outline-offset: -3px; } .front-social__icon { flex-shrink: 0; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; margin-inline-start: -2px; /* nudge so it stays centered in the 44px square */ } .front-social__icon svg { width: 100%; height: 100%; } .front-social__label { flex: 0 0 auto; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: opacity 0.22s ease, transform 0.22s ease; transition-delay: 0s; } [dir="rtl"] .front-social__label { transform: translateX(6px); } .front-social__link:hover .front-social__label, .front-social__link:focus-visible .front-social__label { opacity: 1; transform: translateX(0); transition-delay: 0.06s; } /* ─── Brand colors per platform ────────────────────────────────── */ .front-social--youtube { --front-social-bg: #ff0000; } .front-social--facebook { --front-social-bg: #1877F2; } .front-social--tiktok { --front-social-bg: #000000; } .front-social--whatsapp { --front-social-bg: #25d366; } .front-social--phone { --front-social-bg: var(--brand-primary, #10B79F); } .front-social--linkedin { --front-social-bg: #0077B5; } .front-social--email { --front-social-bg: #ea580c; } /* Instagram needs a gradient — apply directly so brightness still hovers nicely. */ .front-social--instagram .front-social__link { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); } /* RTL handling is automatic — the corner radii above use logical border-*-start-radius properties, which flip to the correct outward-facing side under [dir="rtl"] without an explicit override. */ @media (prefers-reduced-motion: reduce) { .front-social__link, .front-social__label { transition: none !important; } } /* When printing, hide entirely */ @media print { .front-social { display: none !important; } } /* ── social-row.blade.php ── */ .front-social-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(15, 22, 41, 0.10); } .front-social-row__btn { --front-social-row-bg: #1f2937; --front-social-row-fg: #ffffff; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; text-decoration: none; color: var(--front-social-row-fg); background: var(--front-social-row-bg); box-shadow: 0 4px 12px rgba(15, 22, 41, 0.12); transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; -webkit-tap-highlight-color: transparent; } .front-social-row__btn:hover, .front-social-row__btn:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15, 22, 41, 0.18); filter: brightness(1.08); color: var(--front-social-row-fg); text-decoration: none; } .front-social-row__btn:focus-visible { outline: 2px solid #fff; outline-offset: -3px; } .front-social-row__btn:active { transform: translateY(0); } .front-social-row__icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; } .front-social-row__icon svg { width: 100%; height: 100%; } /* Brand colors per platform (mirror the floating rail). */ .front-social-row__btn--youtube { --front-social-row-bg: #ff0000; } .front-social-row__btn--facebook { --front-social-row-bg: #1877F2; } .front-social-row__btn--tiktok { --front-social-row-bg: #000000; } .front-social-row__btn--whatsapp { --front-social-row-bg: #25d366; } .front-social-row__btn--phone { --front-social-row-bg: var(--brand-primary, #10B79F); } .front-social-row__btn--linkedin { --front-social-row-bg: #0077B5; } .front-social-row__btn--email { --front-social-row-bg: #ea580c; } .front-social-row__btn--instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); } @media (prefers-reduced-motion: reduce) { .front-social-row__btn { transition: none !important; } } /* ── why-choosing-section.blade.php ── */ .front-why, .front-why * { box-sizing: border-box; } .front-why { position: relative; padding: clamp(3.5rem, 8vw, 6rem) 0; /* Brand canvas — RED (logo background). */ background: var(--brand-bg-red); color: #fff; overflow: hidden; } .front-why__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .front-why__glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55; } .front-why__glow--a { width: 380px; height: 380px; top: -140px; inset-inline-start: -120px; background: var(--brand-red-darker); opacity: 0.7; } .front-why__glow--b { width: 320px; height: 320px; bottom: -120px; inset-inline-end: -100px; background: var(--brand-primary); opacity: 0.32; } .front-why__glow--c { width: 260px; height: 260px; top: 40%; left: 50%; transform: translateX(-50%); background: #ffffff; opacity: 0.10; } .front-why__container { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 28px); } .front-why__header { max-width: 44rem; margin: 0 auto clamp(2.25rem, 5vw, 3.25rem); text-align: center; } .front-why__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 0.6rem; padding: 0.3rem 0.85rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.12); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: #ffffff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .front-why__title { margin: 0 0 0.85rem; font-size: clamp(1.6rem, 4.2vw, 2.4rem); font-weight: 800; line-height: 1.18; letter-spacing: -0.02em; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); } .front-why__lede { margin: 0; color: rgba(255, 255, 255, 0.88); line-height: 1.65; font-size: clamp(0.95rem, 2vw, 1.05rem); } .front-why__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 22px); counter-reset: front-why; } @media (min-width: 720px) { .front-why__grid { grid-template-columns: repeat(2, 1fr); } /* When the count is odd (e.g. 3 cards on a 2-col grid), center the orphan card so it doesn't sit alone on the left. */ .front-why-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: calc(50% - (clamp(14px, 2vw, 22px) / 2)); } } @media (min-width: 992px) { .front-why__grid { grid-template-columns: repeat(3, 1fr); } /* Reset on desktop where 3 cards fill the row naturally. */ .front-why-card:last-child:nth-child(odd) { grid-column: auto; justify-self: stretch; max-width: none; } } .front-why-card { --front-why-accent: #10b79f; --front-why-accent-soft: rgba(16, 183, 159, 0.20); position: relative; display: flex; flex-direction: column; gap: 0.85rem; padding: clamp(1.2rem, 2.4vw, 1.6rem); border-radius: 18px; /* Dark-burgundy glass that reads cleanly on the red canvas. */ background: linear-gradient(180deg, rgba(20, 0, 4, 0.55), rgba(20, 0, 4, 0.30)); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 24px 48px -22px rgba(50, 0, 6, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06); overflow: hidden; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; animation: front-why-rise 0.65s ease both; animation-delay: var(--front-why-stagger, 0ms); } .front-why-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 100% 0%, var(--front-why-accent-soft) 0%, transparent 55%); pointer-events: none; opacity: 0.85; } .front-why-card--teal { --front-why-accent: var(--brand-primary); --front-why-accent-soft: var(--brand-primary-tint); } .front-why-card--amber { --front-why-accent: var(--brand-accent); --front-why-accent-soft: var(--brand-accent-soft); } .front-why-card--teal-deep { --front-why-accent: var(--brand-primary-deep); --front-why-accent-soft: rgba(14, 157, 136, 0.24); } @media (hover: hover) and (pointer: fine) { .front-why-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--front-why-accent) 46%, transparent); box-shadow: 0 36px 64px -22px rgba(40, 0, 6, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.08); } } .front-why-card__head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /* Decorative oversized numeral sitting behind the card content. */ .front-why-card__num-bg { position: absolute; top: -18px; inset-inline-end: -6px; font-size: clamp(7rem, 14vw, 10rem); font-weight: 900; line-height: 1; letter-spacing: -0.06em; color: var(--front-why-accent); opacity: 0.14; pointer-events: none; user-select: none; z-index: 0; font-family: "Segoe UI", "Inter", "Poppins", sans-serif; text-shadow: 0 2px 12px color-mix(in srgb, var(--front-why-accent) 50%, transparent); } /* In-card "Reason 01" pill — replaces the previous outline-text index. */ .front-why-card__index { display: inline-flex; align-items: baseline; gap: 0.5rem; padding: 0.45rem 0.85rem; border-radius: 999px; background: color-mix(in srgb, var(--front-why-accent) 22%, transparent); border: 1px solid color-mix(in srgb, var(--front-why-accent) 42%, transparent); color: var(--front-why-accent); line-height: 1; white-space: nowrap; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .front-why-card__index-num { font-size: 1.15rem; font-weight: 900; letter-spacing: -0.02em; color: #ffffff; } .front-why-card__index-label { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: color-mix(in srgb, var(--front-why-accent) 85%, white); } .front-why-card__icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: color-mix(in srgb, var(--front-why-accent) 18%, transparent); color: var(--front-why-accent); border: 1px solid color-mix(in srgb, var(--front-why-accent) 30%, transparent); flex-shrink: 0; } .front-why-card__icon svg { width: 22px; height: 22px; } .front-why-card__eyebrow { position: relative; z-index: 1; margin: 0.25rem 0 0; font-size: clamp(1.45rem, 3.4vw, 1.75rem); font-weight: 800; line-height: 1.22; letter-spacing: -0.015em; /* Tint the title with the card's own accent so each reason carries its color signature (teal / amber / teal-deep). The mix toward white keeps it bright and legible on the burgundy glass card. */ color: color-mix(in srgb, var(--front-why-accent) 70%, #ffffff); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22); } @supports not (color: color-mix(in srgb, red, blue)) { .front-why-card__eyebrow { color: var(--front-why-accent); } } .front-why-card__lede { position: relative; z-index: 1; margin: 0; font-size: clamp(1rem, 1.9vw, 1.1rem); font-weight: 700; line-height: 1.45; color: rgba(255, 255, 255, 0.94); letter-spacing: -0.005em; } .front-why-card__body { position: relative; z-index: 1; margin: 0; color: rgba(255, 255, 255, 0.82); line-height: 1.7; font-size: 0.95rem; } .front-why-card__footer { position: relative; z-index: 1; margin: auto 0 0; padding-top: 0.9rem; border-top: 1px dashed rgba(255, 255, 255, 0.22); font-size: 0.88rem; line-height: 1.55; color: rgba(255, 255, 255, 0.92); display: flex; gap: 0.55rem; align-items: flex-start; } .front-why-card__footer-mark { flex-shrink: 0; margin-top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--front-why-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--front-why-accent) 20%, transparent); } @keyframes front-why-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .front-why-card { animation: none !important; transition: none !important; } .front-why-card:hover { transform: none; } } [dir="rtl"] .front-why-card__footer { text-align: start; } @media (max-width: 575px) { .front-why { padding: clamp(2.5rem, 9vw, 3.5rem) 0; } .front-why-card { border-radius: 16px; padding: 1.05rem 1rem 1.1rem; } .front-why-card__head { gap: 0.65rem; } .front-why-card__icon { width: 38px; height: 38px; border-radius: 10px; } .front-why-card__icon svg { width: 20px; height: 20px; } .front-why-card__index { padding: 0.35rem 0.7rem; gap: 0.4rem; } .front-why-card__index-num { font-size: 1rem; } .front-why-card__index-label { font-size: 0.62rem; letter-spacing: 0.12em; } .front-why-card__num-bg { font-size: 6.5rem; top: -10px; inset-inline-end: -2px; } .front-why-card__eyebrow { font-size: 1.3rem; } .front-why-card__lede { font-size: 0.98rem; } .front-why-card__body { font-size: 0.9rem; } .front-why-card__footer { font-size: 0.82rem; } } /* ═══════════════════════════════════════════════════════════════ Dark hero page titles — override global h1 { color: #333 } in style.css ═══════════════════════════════════════════════════════════════ */ .pd-hero__title, .pv-hero__title, .sv-hero__title, .sd-hero__title { color: #ffffff; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); } /* ═══════════════════════════════════════════════════════════════ SEO sections — layout (load last; wins over per-component rules) ═══════════════════════════════════════════════════════════════ */ @media (min-width: 992px) { .pd-seo__aside, .pv-seo__aside, .mc-dseo__aside, .front-mcseo__aside { position: sticky; top: 5rem; align-self: start; } } @media (max-width: 991px) { .pd-seo, .pv-seo, .mc-dseo, .front-mcseo, .ct-seo, .sd-seo, .sv-seo { overflow: hidden; } .pd-seo__inner, .pv-seo__inner, .mc-dseo__inner, .front-mcseo__inner, .ct-seo__inner, .sd-seo__inner, .sv-seo__inner { display: flex !important; flex-direction: column !important; grid-template-columns: unset !important; gap: 2rem !important; align-items: stretch !important; } .pd-seo__aside, .pv-seo__aside, .mc-dseo__aside, .front-mcseo__aside, .pd-seo__body, .pv-seo__body, .mc-dseo__body, .front-mcseo__body, .ct-seo__body, .sd-seo__body, .sv-seo__body { position: static !important; top: auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; z-index: auto !important; transform: none !important; } .pd-seo__aside, .pv-seo__aside, .mc-dseo__aside, .front-mcseo__aside { order: 1; padding-bottom: 1.5rem; margin-bottom: 0; border-bottom: 1px solid rgba(15, 23, 42, 0.1); } .pd-seo__body, .pv-seo__body, .mc-dseo__body, .front-mcseo__body, .ct-seo__body, .sd-seo__body, .sv-seo__body { order: 2; } .pd-seo__title, .pv-seo__title, .mc-dseo__title, .front-mcseo__title, .ct-seo__title, .sd-seo__title, .sv-seo__title { font-size: clamp(1.15rem, 5vw, 1.5rem) !important; line-height: 1.25 !important; margin-bottom: 1rem !important; overflow-wrap: anywhere; word-break: break-word; } .pd-seo__body p, .pv-seo__body p, .mc-dseo__body p, .front-mcseo__body p, .ct-seo__body p, .sd-seo__body p, .sv-seo__body p { line-height: 1.7 !important; margin: 0 0 1rem !important; } .pd-seo__dl, .pv-seo__dl, .sd-seo__dl, .mc-dseo__dl { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.6rem !important; margin-bottom: 1.25rem !important; } .pd-seo__dt-dd, .pv-seo__dt-dd, .sd-seo__dt-dd, .mc-dseo__dt-dd { position: relative !important; z-index: auto !important; } .pd-seo__back, .pv-seo__back, .mc-dseo__back, .front-mcseo__cta { margin-top: 0.25rem; } }