/* Theme and reset */ /* Default (light) theme variables so first paint is light-mode */ :root{ --bg:#f6f8fb; --text:#0b0e13; --muted:#4b5563; --accent:#16a34a; --brand:#ffffff; --panel:#ffffff; --border:#e5e7eb; --ring:#2563eb; } /* Dark theme override when data-theme="dark" is set on */ [data-theme="dark"], html.theme-dark{ --bg:#0b0e13; --text:#e9eef5; --muted:#b7c0cc; --accent:#25D366; /* WhatsApp green */ --brand:#111823; /* deep blue-black */ --panel:#0f1521; /* slightly cleaner dark */ --border:#1b2434; /* subtle border */ --ring:#3b82f6; /* focus ring */ } *{ box-sizing:border-box } html,body{ margin:0; padding:0 } body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Ensure form controls use the site font/colors like links */ button, input, select, textarea{ font: inherit; color: inherit } a{ color:inherit } img{ max-width:100%; display:block } /* Focus outlines for accessibility */ :where(a, button, .btn, .lang-btn, .tab-link):focus-visible{ outline: 2px solid var(--ring); outline-offset: 2px; } /* Also show focus outline on pointer (mouse/touch) click, not only keyboard */ :where(a, button, .btn, .lang-btn, .tab-link):focus{ outline: 2px solid var(--ring); outline-offset: 2px; } /* =========================== HEADER =========================== */ /* Header with gradient overlay on hero (via ::before for smoother fade) */ .site-header{ position:fixed; top:0; left:0; width:100%; z-index:9999; background: transparent; /* transparent while over hero */ padding:14px 0; transition: background-color .45s ease, box-shadow .35s ease, border-color .35s ease, color .35s ease, backdrop-filter .35s ease, opacity .35s ease; will-change: background-color, box-shadow, border-color, color, backdrop-filter, opacity; color:#fff; /* white text over hero */ } .site-header::before{ content:""; position:absolute; inset:0; background:linear-gradient( 180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.05) 100% ); opacity:1; pointer-events:none; transition: opacity .45s ease; } /* Solid header after hero */ .site-header.is-solid{ background: var(--brand); /* solid background once past hero */ border-bottom:1px solid var(--border); color: var(--text); box-shadow: 0 8px 24px rgba(0,0,0,0.06); backdrop-filter: saturate(120%) blur(8px); } .site-header.is-solid::before{ opacity:0; } /* Ensure clean fade on leaving hero */ .site-header:not(.is-solid){ box-shadow:none; backdrop-filter:none; } /* Make header respect dark theme even when it's over the hero (not .is-solid). By default the header uses a hardcoded white-on-gradient look to ensure readability over bright hero images; this override lets the dark theme switch the header to theme colors for consistency. */ [data-theme="dark"] .site-header::before, html.theme-dark .site-header::before{ background:linear-gradient( 180deg, rgba(11,14,19,0.9) 0%, rgba(11,14,19,0.55) 60%, rgba(11,14,19,0.06) 100% ); } /* Core header layout */ .site-header .header-bar{ width:100%; max-width:1200px; margin:0 auto; padding:0 20px; position:relative; display:grid; grid-template-columns: 1fr auto 1fr; /* left | logo | right */ align-items:center; gap:10px; } /* flex-center-enabled keeps logo truly centered while sides are flexible */ .site-header .header-bar.flex-center-enabled{ min-height:68px; } .site-header .header-group{ display:flex; align-items:center; gap:12px; flex-wrap:nowrap; position:relative; z-index:80; } .site-header .header-group.left{ flex:1; justify-content:flex-end; gap:10px; padding-right:0; } .site-header .header-group.right{ flex:1; justify-content:flex-start; gap:10px; padding-left:0; } /* Logo centered in grid middle column */ .logo-block{ font-size:1.9rem; font-weight:800; letter-spacing:.06em; text-align:center; position:static; transform:none; z-index:70; padding:0 8px; justify-self:center; } .logo-block img{ height:60px; width:auto; display:block; margin:0 auto; } @media (max-width: 640px){ .logo-block img{ height:52px; } } .logo-block a{ text-decoration:none; color:var(--text); display:inline-block; } /* Navigation links */ .site-header nav a{ text-decoration:none; font-weight:600; padding:8px 12px; border-radius:999px; border:1px solid var(--border); opacity:.95; transition:opacity .2s ease, background .2s ease, border-color .2s ease; white-space:nowrap; } .site-header nav a:hover{ opacity:1; background:rgba(255,255,255,0.06); } .site-header .header-group.left nav, .site-header .header-group.right nav{ display:flex; gap:10px; align-items:center; white-space:nowrap; } /* Portfolio button */ .portfolio-wrap{ position:relative; display:inline-block; } .portfolio-btn{ background:transparent; border:1px solid var(--border); color:var(--text); padding:10px 18px; border-radius:999px; font-weight:600; cursor:pointer; position:relative; transition:background .2s ease, border-color .2s ease, color .2s ease; gap:8px; display:inline-flex; align-items:center; } .portfolio-btn::after{ content:""; display:inline-block; width:0; height:0; margin-left:6px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid currentColor; } .portfolio-btn:hover{ background:rgba(255,255,255,0.06); } .portfolio-btn[aria-expanded="true"]{ background:rgba(255,255,255,0.06); } /* Portfolio dropdown */ .portfolio-dropdown{ position:absolute; top:calc(100% + 8px); left:0; min-width:240px; max-height:70vh; overflow:auto; background:var(--panel); backdrop-filter:blur(6px); border:1px solid var(--border); border-radius:14px; padding:10px 10px 12px; display:flex; flex-direction:column; gap:4px; box-shadow:0 12px 32px -8px rgba(0,0,0,.5); z-index:80; } .portfolio-dropdown[hidden]{ display:none; } .portfolio-dropdown a{ padding:8px 10px; border-radius:8px; text-decoration:none; font-size:.95rem; opacity:.9; font-weight:600; color:var(--text); } .portfolio-dropdown a:hover{ opacity:1; background:rgba(0,0,0,0.06); } /* Header controls inherit color while over hero; when solid they use theme variables */ .site-header nav a, .site-header .btn-outline, .site-header .portfolio-btn, .site-header .lang-btn{ color:inherit; background:transparent; } .site-header:not(.is-solid) nav a, .site-header:not(.is-solid) .btn-outline, .site-header:not(.is-solid) .portfolio-btn, .site-header:not(.is-solid) .lang-btn{ border-color: rgba(255,255,255,0.18); } .site-header.is-solid nav a, .site-header.is-solid .btn-outline, .site-header.is-solid .portfolio-btn, .site-header.is-solid .lang-btn{ border-color: var(--border); color: var(--text); } /* Light mode: make header control borders darker to match dark text */ [data-theme="light"] .site-header.is-solid nav a, [data-theme="light"] .site-header.is-solid .btn-outline, [data-theme="light"] .site-header.is-solid .portfolio-btn, [data-theme="light"] .site-header.is-solid .lang-btn{ border-color: rgba(11,14,19,0.28); } [data-theme="light"] .site-header.is-solid .portfolio-btn:hover, [data-theme="light"] .site-header.is-solid nav a:hover, [data-theme="light"] .site-header.is-solid .lang-btn:hover{ background: rgba(11,14,19,0.06); } /* Language switch in header */ .site-header .lang-switch{ display:flex; gap:8px; align-items:center; } .site-header .lang-btn{ border:none; background:transparent; color:inherit; padding:6px 6px; border-radius:6px; cursor:pointer; font-weight:700; opacity:.9; } .site-header .lang-btn:hover{ opacity:1; } .site-header .lang-btn:not(:first-child){ position:relative; } .site-header .lang-btn:not(:first-child)::before{ content:""; position:absolute; left:-8px; top:50%; width:1px; height:14px; background:currentColor; opacity:.25; transform:translateY(-50%); } .site-header .lang-btn.active{ background: var(--text); color: var(--bg); text-underline-offset:3px; } /* "Questions" link only on index: add class="nav-questions" to that link and on inner pages set */ .no-hero .nav-questions{ display:none !important; } /* WhatsApp buttons */ .btn, .btn-outline{ display:inline-flex; align-items:center; gap:8px; border-radius:10px; font-weight:600; text-decoration:none; transition:transform .05s ease, box-shadow .2s ease; cursor:pointer; } .btn{ background:var(--accent); color:#ffffff; /* white text on accent background */ border:1px solid #1aae55; padding:10px 14px; box-shadow: 0 6px 22px rgba(37,211,102,0.18); } .btn:hover{ transform: translateY(-1px); } .btn:active{ transform: translateY(0); } .btn-outline{ background:transparent; color:var(--text); border:1px solid var(--border); padding:10px 14px; border-radius:999px; } /* WhatsApp subtle attention for header version */ .btn.whatsapp-animate{ position:relative; } .btn.whatsapp-animate:before{ content:""; position:absolute; inset:-4px; border:2px solid rgba(37,211,102,0.45); border-radius:14px; opacity:0; transform:scale(.85); transition:transform .6s ease, opacity .6s ease; } .btn.whatsapp-animate:hover:before{ opacity:1; transform:scale(1); } @media (prefers-reduced-motion: reduce){ .btn.whatsapp-animate:before{ transition:none; } } /* Theme toggle switch in header */ .theme-toggle.switch{ width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; border:1px solid var(--border); background:var(--panel); color:var(--text); position:relative; z-index:90; cursor:pointer; font-size:18px; margin-left:4px; } .theme-toggle.switch::before{ content:"☀️"; display:block; } .theme-toggle.switch[aria-pressed="true"]::before{ content:"🌙"; } .theme-toggle.switch:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; } /* Floating theme toggle (optional, not currently used) */ .theme-fab{ position:fixed; top:max(10px, env(safe-area-inset-top)); right:12px; width:44px; height:44px; z-index:110; display:none; } @media (max-width: 640px){ .theme-fab{ display:inline-flex; top:auto; right:auto; bottom: max(16px, calc(env(safe-area-inset-bottom) + 16px)); left: max(16px, calc(env(safe-area-inset-left) + 16px)); } } /* Desktop: keep logo centered with flexible side groups */ @media (min-width: 641px){ .site-header .header-bar.flex-center-enabled{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; position:static; /* allow absolute toggle relative to header instead */ } .site-header .header-bar.flex-center-enabled .logo-block{ position:static; transform:none; margin:0; padding:0; } .site-header .header-bar.flex-center-enabled .header-group.left{ padding-right:0; justify-content:flex-end; } .site-header .header-bar.flex-center-enabled .header-group.right{ padding-left:0; justify-content:flex-start; } /* Show theme toggle on desktop header */ .site-header .theme-toggle.switch{ display:inline-flex; } /* Hide WhatsApp button on desktop header */ .site-header .btn.whatsapp-animate{ display:none !important; } /* Push theme toggle to far right (separated) */ .site-header .header-group.right{ display:flex; } .site-header .header-group.right .theme-toggle.switch{ margin-left:auto; } /* Make theme toggle sit even further right (outside flow) */ /* Absolute edge-aligned theme toggle (outside header-bar) */ .site-header > .theme-toggle.switch{ position:absolute; right:18px; top:50%; transform:translateY(-50%); z-index:9999; } /* Unify desktop header button sizing */ .site-header .header-group.left nav a, .site-header .header-group.right nav a, .site-header .portfolio-btn, .site-header .lang-btn{ padding:8px 14px; border-radius:999px; } } /* WhatsApp floating action button */ .whatsapp-fab{ position:fixed; right:20px; bottom:20px; z-index:60; box-shadow:0 10px 26px rgba(37,211,102,0.3); animation:pulseWhats 4s ease-in-out infinite; will-change: transform, bottom; } @keyframes pulseWhats{ 0%{ transform:scale(1); box-shadow:0 10px 26px rgba(37,211,102,0.3); } 50%{ transform:scale(1.045); box-shadow:0 12px 34px rgba(37,211,102,0.42); } 100%{ transform:scale(1); box-shadow:0 10px 26px rgba(37,211,102,0.3); } } @media (prefers-reduced-motion: reduce){ .whatsapp-fab{ animation:none; } } /* Mobile menu button */ .mobile-menu-btn{ position:absolute; top:8px; left:16px; width:42px; height:40px; display:inline-flex; align-items:center; justify-content:center; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:8px; font-size:20px; cursor:pointer; z-index:90; } .mobile-menu-btn:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; } @media (min-width: 641px){ .mobile-menu-btn{ display:none; } } /* Mobile menu overlay */ .mobile-menu{ position:fixed; top:0; left:0; right:0; max-height:100vh; overflow-y:auto; background:var(--panel); color:var(--text); /* ensure dark text even when header is light/gradient */ border:1px solid var(--border); border-top:none; border-radius:0 0 24px 24px; padding:70px 20px 28px; display:flex; flex-direction:column; gap:22px; transform:translateY(-100%); transition:transform .35s cubic-bezier(.4,.0,.2,1); z-index:10000; /* above header */ box-shadow:0 22px 48px -12px rgba(0,0,0,.35); } .mobile-menu .close-menu-btn{ position:absolute; top:16px; right:16px; width:42px; height:40px; display:inline-flex; align-items:center; justify-content:center; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:8px; font-size:18px; cursor:pointer; } .mobile-menu .close-menu-btn:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; } .mobile-menu.open{ transform:translateY(0); } .mobile-menu a{ text-decoration:none; font-weight:600; padding:10px 12px; background:rgba(255,255,255,0.03); border:1px solid rgba(0,0,0,0.12); border-radius:14px; display:block; color:var(--text); /* explicit to avoid inheriting header white */ } .mobile-menu a:hover{ background:rgba(255,255,255,0.12); } .mobile-menu .mobile-section{ display:flex; flex-direction:column; gap:10px; } .mobile-menu .mobile-portfolio strong{ font-size:1rem; letter-spacing:.05em; } .mobile-menu .portfolio-cats{ display:grid; gap:10px; } @media (min-width: 641px){ .mobile-menu{ display:none; } } /* Clean language switch inside mobile menu */ .mobile-menu .lang-switch{ display:flex; gap:12px; align-items:center; } .mobile-menu .lang-switch .lang-btn{ border:none; background:transparent; color:var(--text); padding:10px 6px; border-radius:8px; font-weight:700; font-size:1.05rem; } .mobile-menu .lang-switch .lang-btn:not(:first-child){ position:relative; } .mobile-menu .lang-switch .lang-btn:not(:first-child)::before{ content:""; position:absolute; left:-10px; top:50%; width:1px; height:16px; background:currentColor; opacity:.25; transform:translateY(-50%); } .mobile-menu .lang-switch .lang-btn.active{ text-decoration:underline; text-underline-offset:4px; } /* Mobile utilities row (theme + language) */ .mobile-utilities{ display:flex; align-items:center; justify-content:flex-start; gap:12px; flex-wrap:wrap; /* allow wrapping when space is tight */ padding:12px 14px; border:1px solid var(--border); border-radius:16px; background:rgba(255,255,255,0.04); } .mobile-utilities .theme-toggle.switch{ position:static; width:44px; height:44px; font-size:20px; border:1px solid var(--border); background:var(--panel); color:var(--text); flex:0 0 auto; order:99; margin-left:auto; box-shadow:0 4px 12px rgba(0,0,0,.12); } /* Ensure theme toggle always visible inside mobile menu */ .mobile-menu .theme-toggle.switch{ display:inline-flex !important; } .mobile-utilities .lang-switch{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; } .mobile-utilities .lang-btn{ padding:8px 10px; font-weight:700; background:transparent; border:none; cursor:pointer; white-space:nowrap; border-radius:8px; } .mobile-utilities .lang-btn.active{ text-decoration:underline; text-underline-offset:4px; } /* =========================== HERO / SLIDER =========================== */ .hero{ position:relative; } .slider{ position:relative; height:100vh; min-height:560px; overflow:hidden; touch-action: pan-y; } .slide{ position:absolute; inset:0; opacity:0; transition:opacity .8s ease; } .slide.active{ opacity:1; } .slide img{ width:100%; height:100%; object-fit:cover; object-position:center center; /* default focus */ filter:contrast(1.04) saturate(1.02); } @media (max-width:640px){ /* Provide a gentler default centering; custom data-mobile-focus overrides inline */ .slider .slide img{ object-position:center 30%; } } /* Slider dots */ .slider-dots{ position:absolute; bottom:14px; left:16px; right:auto; transform:none; display:flex; gap:10px; padding:0; background:transparent; border-radius:999px; border:none; z-index:2; } .dot{ width:18px; height:18px; border-radius:50%; background:rgba(0,0,0,0.42); border:1px solid rgba(255,255,255,0.55); cursor:pointer; opacity:.55; display:inline-flex; box-sizing:border-box; align-items:center; justify-content:center; transition:opacity .25s ease, background .25s ease, border-color .25s ease, transform .25s ease; position:relative; } .dot::before{ content:""; width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,0.18) inset; transition:background .25s ease, transform .25s ease; transform:scale(.85); } .slider-dots{ gap:6px; } .dot:hover{ opacity:.95; background:rgba(0,0,0,0.6); border-color:rgba(255,255,255,0.7); } .dot.active{ opacity:1; background:rgba(0,0,0,0.75); border-color:rgba(255,255,255,0.85); transform:scale(1.1); } .dot.active::before{ background:#fff; transform:scale(1); } .dot:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; opacity:1; } @media (prefers-reduced-motion: reduce){ .dot{ transition:none; } .dot::before{ transition:none; } } /* Responsive dot sizing refinements */ @media (max-width: 900px){ .slider-dots .dot{ width:16px; height:16px; } .slider-dots .dot.active{ transform:none; } } @media (max-width: 640px){ .slider-dots .dot{ width:15px; height:15px; } .slider-dots .dot::before{ width:6px; height:6px; } } @media (max-width: 480px){ .slider-dots .dot{ width:14px; height:14px; } .slider-dots .dot::before{ width:6px; height:6px; } } /* Hero gradient overlay */ .hero-gradient-overlay{ position:absolute; inset:0; background:linear-gradient( 180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0.15) 75%, rgba(0,0,0,0) 100% ); pointer-events:none; z-index:1; } /* Scroll down cue */ .scroll-down{ position:absolute; left:50%; transform:translateX(-50%); bottom:18px; width:38px; height:38px; border-radius:999px; background:#ffffff; border:1px solid rgba(0,0,0,0.15); cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2; animation:scrollBounce 2.2s ease-in-out infinite; } .scroll-down::after{ content:""; width:0; height:0; border-left:7px solid transparent; border-right:7px solid transparent; border-top:9px solid var(--text); opacity:.95; } .scroll-down:hover{ box-shadow:0 6px 22px rgba(0,0,0,0.12); } @keyframes scrollBounce{ 0%, 100%{ transform: translateX(-50%) translateY(0); } 50%{ transform: translateX(-50%) translateY(-8px); } } /* Subtle arrow navigation */ .slider-arrow{ position:absolute; top:50%; width:42px; height:42px; margin-top:-21px; display:inline-flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.35); color:#fff; border:1px solid rgba(255,255,255,0.4); border-radius:50%; cursor:pointer; opacity:.35; transition:opacity .25s ease, background .25s ease, border-color .25s ease; font-size:18px; line-height:1; } .slider-arrow:hover{ opacity:.85; background:rgba(0,0,0,0.55); border-color:rgba(255,255,255,0.6); } .slider-arrow:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; opacity:.95; } .slider-arrow-prev{ left:12px; } .slider-arrow-next{ right:12px; } .slider-arrow-prev::before{ content:'←'; } .slider-arrow-next::before{ content:'→'; } @media (prefers-reduced-motion: reduce){ .slider-arrow{ transition:none; } } /* Visually hidden utility */ .visually-hidden{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; } /* =========================== LAYOUT / CONTENT =========================== */ .header-inner{ max-width:1200px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; } /* Stats bar under slider */ .stats-bar{ background: transparent; padding:0; margin-top:48px; } .stats-bar-inner{ max-width:1200px; margin:0 auto; padding:0 20px; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; } .stats-bar .stat{ background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:12px; padding:12px; text-align:center; } .stats-bar .stat .num{ font-size:1.4rem; font-weight:800; display:block; } .stats-bar .stat .label{ color:var(--muted); font-size:.95rem; } /* Sections */ .section{ max-width:1200px; margin:56px auto; padding:0 20px; } .section h2{ margin:0 0 16px; font-size:1.75rem; letter-spacing:.01em; } .grid{ display:grid; gap:14px; } .note{ color: var(--muted); opacity:.95; } .grid.cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.cols-5{ grid-template-columns: repeat(5, minmax(0, 1fr)); } .card{ background:var(--panel); border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset; } .card-body{ padding:12px 14px; color:var(--muted); } /* Clickable card with overlay title */ .card-link{ position:relative; display:block; background:transparent; border-color:var(--border); } .card-link img{ display:block; width:100%; height:260px; object-fit:cover; } .card-link .card-title{ position:absolute; left:0; right:0; bottom:0; padding:12px 14px; background:linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.75) 100% ); font-weight:700; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.4); } .card-link .card-title .top3{ display:inline-block; margin-left:6px; padding:2px 6px 2px; background:rgba(255,255,255,0.15); color:#fff; font-size:.55em; font-weight:700; letter-spacing:.08em; border-radius:6px; text-transform:uppercase; vertical-align:middle; } @media (hover:hover){ .card-link:hover .card-title .top3{ background:rgba(255,255,255,0.25); } } .card-link:hover .card-title{ background:linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.85) 100% ); } /* Stats counters section */ .stats{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; } .stat{ background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:18px; text-align:center; } .stat .num{ font-size:2rem; font-weight:800; display:block; } .stat .label{ color:var(--muted); } /* Featured photos */ .featured .grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } .featured img{ height:220px; object-fit:cover; } /* FAQ */ .faq-grid{ display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:14px; } .faq-item{ background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:12px; } .faq-q{ font-weight:700; margin:0 0 6px; } .faq-a{ color:var(--muted); margin:0; } /* Trustpilot placeholder */ .trustpilot{ background:linear-gradient(140deg, var(--panel) 0%, var(--bg) 55%); border-top:1px solid var(--border); padding:72px 0 84px; position:relative; } .trustpilot:before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 75% 30%, var(--accent) 0%, transparent 62%), radial-gradient(circle at 15% 70%, var(--ring) 0%, transparent 65%); opacity:.08; pointer-events:none; } .trustpilot:after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,0)); pointer-events:none; mix-blend-mode:multiply; opacity:.25; } [data-theme="dark"] .trustpilot, html.theme-dark .trustpilot{ background:linear-gradient(150deg, var(--brand) 0%, #121a26 55%); } [data-theme="dark"] .trustpilot:after, html.theme-dark .trustpilot:after{ background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)); mix-blend-mode:normal; opacity:1; } .trustpilot-inner{ position:relative; z-index:2; display:grid; gap:28px; } .trustpilot-company{ display:flex; justify-content:space-between; align-items:center; gap:24px; background:#ffffff; border:1px solid var(--border); border-radius:24px; padding:20px 26px; box-shadow:0 10px 30px -8px rgba(0,0,0,.18); position:relative; overflow:hidden; color:#0b0e13; } .trustpilot-company:before{ content:""; position:absolute; inset:0; background:linear-gradient(110deg, rgba(255,255,255,.16), rgba(255,255,255,0)); pointer-events:none; mix-blend-mode:overlay; } [data-theme="dark"] .trustpilot-company, html.theme-dark .trustpilot-company{ background:#ffffff; color:#0b0e13; box-shadow:0 10px 30px -8px rgba(0,0,0,.4); } .tp-co-left{ display:flex; align-items:center; gap:18px; } .tp-co-logo-wrap{ width:82px; height:50px; display:flex; align-items:center; justify-content:center; } .tp-co-logo{ max-width:100%; max-height:50px; border-radius:8px; box-shadow:0 4px 14px -4px rgba(0,0,0,.35); } .tp-co-meta{ display:grid; gap:4px; } .tp-co-name{ font-size:1.25rem; font-weight:700; letter-spacing:.02em; } .tp-co-score{ font-size:.85rem; color:var(--muted); } .tp-co-count{ font-size:.75rem; color:var(--muted); } .tp-co-btn{ text-decoration:none; font-weight:600; padding:10px 16px; border:1px solid var(--border); border-radius:12px; background:var(--panel); color:var(--text); font-size:.85rem; box-shadow:0 4px 14px rgba(0,0,0,.07); transition:background .2s ease, box-shadow .2s ease; } .tp-co-btn:hover{ background:rgba(0,0,0,.05); box-shadow:0 6px 20px rgba(0,0,0,.12); } @media (max-width:640px){ .trustpilot-company{ flex-direction:column; align-items:stretch; padding:18px 20px; } .tp-co-left{ width:100%; justify-content:flex-start; } .tp-co-btn{ width:100%; text-align:center; } } .trustpilot-header{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; } .trustpilot-header h2{ margin:0; font-size:2rem; letter-spacing:.02em; } .tp-all-link{ text-decoration:none; font-weight:600; padding:10px 16px; border:1px solid var(--border); border-radius:10px; background:var(--panel); color:var(--text); box-shadow:0 4px 12px rgba(0,0,0,.06); transition:background .2s ease, box-shadow .2s ease; } .tp-all-link:hover{ background:rgba(0,0,0,.05); box-shadow:0 6px 18px rgba(0,0,0,.09); } .trustpilot-widget-shell{ min-height:140px; padding:28px 26px 30px; background:#ffffff; border:1px solid var(--border); border-radius:24px; box-shadow:0 12px 34px -10px rgba(0,0,0,.18); position:relative; overflow:hidden; color:#0b0e13; } .trustpilot-widget-shell:after{ content:""; position:absolute; inset:0; background:linear-gradient(110deg, rgba(255,255,255,.18), rgba(255,255,255,0)); mix-blend-mode:overlay; pointer-events:none; } [data-theme="dark"] .trustpilot-widget-shell, html.theme-dark .trustpilot-widget-shell{ background:#ffffff; color:#0b0e13; box-shadow:0 12px 34px -10px rgba(0,0,0,.45); } .tp-skeleton{ display:grid; gap:14px; animation:tpPulse 1.8s ease-in-out infinite; } @keyframes tpPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.55 } } .tp-row{ display:flex; align-items:center; justify-content:space-between; gap:18px; } .tp-stars{ display:flex; gap:6px; } .tp-star{ width:26px; height:26px; background:linear-gradient(180deg,#ffe78a,#f5c34c); clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); filter:drop-shadow(0 2px 4px rgba(0,0,0,.15)); } .tp-rating-num{ font-size:1.8rem; font-weight:800; } .tp-bar{ height:8px; width:100%; background:linear-gradient(90deg,var(--accent),rgba(37,211,102,.4)); border-radius:6px; } .tp-line{ height:12px; width:100%; background:var(--panel); border-radius:6px; box-shadow:0 1px 0 rgba(0,0,0,.08) inset; } .tp-line.short{ width:60%; } .tp-summary{ margin:0; color:var(--muted); font-size:1rem; } .trustpilot-widget iframe{ border-radius:14px !important; } @media (max-width: 640px){ .trustpilot-header h2{ font-size:1.6rem; } .trustpilot-widget-shell{ padding:22px 20px 24px; border-radius:20px; } .tp-star{ width:22px; height:22px; } .tp-rating-num{ font-size:1.5rem; } } /* Featured reviews carousel */ .tp-featured{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 0 4px; -webkit-overflow-scrolling:touch; } .tp-featured::-webkit-scrollbar{ height:10px; } .tp-featured::-webkit-scrollbar-track{ background:var(--panel); border-radius:999px; } .tp-featured::-webkit-scrollbar-thumb{ background:var(--accent); border-radius:999px; } .tp-review-card{ flex:0 0 300px; scroll-snap-align:start; background:#ffffff; /* persistent white frame */ color:#0b0e13; border:1px solid var(--border); border-radius:20px; padding:18px 20px 22px; display:grid; gap:12px; position:relative; box-shadow:0 8px 26px -6px rgba(0,0,0,.18); transition:transform .25s ease, box-shadow .25s ease; } .tp-review-card:hover{ transform:translateY(-4px); box-shadow:0 14px 40px -10px rgba(0,0,0,.25); } /* Dark theme: keep cards white */ [data-theme="dark"] .tp-review-card, html.theme-dark .tp-review-card{ background:#ffffff; color:#0b0e13; box-shadow:0 8px 26px -6px rgba(0,0,0,.38); } [data-theme="dark"] .tp-review-card:hover, html.theme-dark .tp-review-card:hover{ box-shadow:0 14px 40px -10px rgba(0,0,0,.48); } .tp-review-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; } .tp-review-author{ font-weight:700; font-size:.95rem; letter-spacing:.02em; } .tp-review-stars{ display:flex; gap:4px; } .tp-review-stars .star{ width:16px; height:16px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); } .tp-review-text{ font-size:.9rem; line-height:1.4; color:var(--muted); max-height:140px; overflow:hidden; position:relative; } .tp-review-text:after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,0), #ffffff 92%); pointer-events:none; } [data-theme="dark"] .tp-review-text:after, html.theme-dark .tp-review-text:after{ background:linear-gradient(180deg, rgba(255,255,255,0), #ffffff 92%); } .tp-review-link{ text-decoration:none; font-weight:600; font-size:.8rem; color:var(--accent); display:inline-flex; align-items:center; gap:4px; } .tp-review-link:hover{ text-decoration:underline; } .tp-featured-empty{ font-size:.9rem; color:var(--muted); } @media (max-width:640px){ .tp-review-card{ flex:0 0 260px; } } /* Desktop/grid alignment: switch to 4-column grid for wide screens to align with index sections */ @media (min-width:900px){ .tp-featured{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:visible; scroll-snap-type:none; padding:0; gap:20px; } .tp-featured::-webkit-scrollbar{ display:none; } .tp-review-card{ flex:initial; width:100%; } } .star{ width:18px; height:18px; background:linear-gradient(180deg, #ffe78a, #f5c34c); clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% ); } /* Footer */ .site-footer{ max-width:1200px; margin:0 auto; padding:30px 20px; color:var(--muted); } .site-footer .row{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; } /* Non-hero pages spacing */ .no-hero .section:first-of-type{ margin-top:128px; } /* =========================== RESPONSIVE =========================== */ @media (max-width: 1024px){ .grid.cols-5{ grid-template-columns: repeat(3, minmax(0,1fr)); } .faq-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } .featured .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } } /* Mobile layout */ @media (max-width: 640px){ /* Header: keep same contents on hero vs scrolled */ .site-header{ padding:8px 0; pointer-events:auto; backdrop-filter: blur(8px); } .site-header.is-solid{ background: var(--brand); } .site-header .header-bar{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:12px; padding:0 12px; } /* Show mobile menu button */ .site-header .mobile-menu-btn{ display:inline-flex; position:static; /* participate in header grid for alignment */ left:auto; top:auto; margin:0; width:42px; height:40px; /* ensure consistent sizing */ align-self:center; /* vertical centering in grid cell */ } /* Logo nicely centered */ .logo-block{ font-size:1.8rem; position:static; transform:none; left:auto; z-index:70; text-align:center; } .logo-block img{ height:60px; } /* Use mobile menu for nav links; keep Portfolio, WhatsApp, language & theme in header */ .site-header .header-group.left{ justify-content:flex-start; } .site-header .header-group.right{ justify-content:flex-end; gap:8px; flex-wrap:nowrap; } /* Hide right nav links only while header is over hero (not solid); show when solid */ .site-header:not(.is-solid) .header-group.right nav{ display:none } /* Keep Portfolio button visible in header on mobile */ .portfolio-wrap{ display:inline-block; } .site-header .lang-switch{ display:flex; } .site-header .btn.whatsapp-animate{ display:inline-flex; } /* Hide header theme toggle on mobile; show only inside mobile menu utilities */ .site-header .theme-toggle.switch{ display:none !important; } /* Mobile header: hide all buttons; keep logo + menu icon */ .site-header .header-group.left nav, .site-header .header-group.right nav, .site-header .portfolio-wrap, .site-header .btn.whatsapp-animate, .site-header .btn-outline, .site-header .btn{ display:none !important; } /* Stats & grids stack */ .stats{ grid-template-columns: 1fr; gap:12px; } .stats-bar-inner{ grid-template-columns: 1fr; } .grid.cols-3{ grid-template-columns: 1fr; } .grid.cols-5{ grid-template-columns: 1fr 1fr; } .faq-grid{ grid-template-columns: 1fr; } .slider{ height:100svh; min-height:480px; } @supports not (height: 100svh){ .slider{ height:100vh; } } /* Portfolio dropdown becomes flat when opened on mobile */ .portfolio-dropdown{ position:static; width:100%; box-shadow:none; backdrop-filter:none; background:var(--panel); margin-top:6px; } /* Allow theme toggle inside mobile menu utilities if present */ .mobile-utilities .theme-toggle.switch, .mobile-menu .theme-toggle.switch{ display:inline-flex !important; position:static; box-shadow:0 4px 14px rgba(0,0,0,.12); } } /* Floating theme FAB remains hidden unless explicitly re-enabled elsewhere */ /* .theme-fab{ display:none !important; } */ /* Reduced motion: keep transitions subtle */ @media (prefers-reduced-motion: reduce){ .slide{ transition:none; } }