/* Ennora Commerce overrides - loaded after main.css */ :root{ --en-void:#07080D; --en-carbon:#12141C; --en-graphite:#2A2E3D; --en-frost:#F4F6FF; --en-volt:#3B5BFF; --en-cyan:#2EE6FF; --en-violet:#8B5CFF; } /* ---------- logos ---------- */ /* header bars use the horizontal lockup so the bar keeps the template's slim height */ .header-elements .site-logo img, .mobile-header-elements .mobile-logo img { height: 50px !important; width: auto !important; } /* stacked lockup has room in the side panels and the footer */ .sidebar .logo img, .mobile-sidebar .logo-m img { height: 96px !important; width: auto !important; } .footer5 .heading1 .logo img { height: 104px !important; width: auto !important; } .span img, .title .span img { width: 18px; height: 18px; object-fit: contain; } /* ---------- dark header bar (the only dark surface on the page) ---------- */ .header-area5 .header-elements, .header-area-all .header-elements { background: #0F1118 !important; border: 1px solid #2A2E3D; box-shadow: 0 10px 30px rgba(7, 8, 13, .18); } .header-area5 .main-menu-ex > ul > li > a, .header-area-all .main-menu-ex > ul > li > a { color: #E6E9F5 !important; } .header-area5 .main-menu-ex > ul > li > a:hover, .header-area-all .main-menu-ex > ul > li > a:hover { color: #2EE6FF !important; } .header-area5 .main-menu-ex > ul > li > a i { color: inherit !important; } .main-menu-ex ul li .sub-menu { background: #12141C !important; border: 1px solid #2A2E3D; } .main-menu-ex ul li .sub-menu li a { color: #C9CEE0 !important; } .main-menu-ex ul li .sub-menu li a:hover { color: #2EE6FF !important; } /* only the small grid icon is inverted - never the button */ .header1-buttons > span > img[src*="sidebar-icon"], .mobile-header img[src*="sidebar-icon"] { filter: brightness(0) invert(1); } /* mobile header bar matches */ .mobile-header, .mobile-header-elements { background: #0F1118 !important; } .mobile-header i { color: #E6E9F5 !important; } /* ---------- hero: ring keeps spinning, portrait centred inside it ---------- */ /* the theme spins the ring forwards then unwinds it (animation-direction: alternate); the ring SVG now spins continuously on its own, so the outer animation is off */ .hero5 .main-images .image2.round-circle { animation: none; } .hero5 .main-images { height: 560px; } .hero5 .main-images .image1, .hero5 .main-images .image2.round-circle { position: absolute; top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; } /* absolutely-positioned boxes at left:50% shrink to the space on the right, so they need explicit widths */ .hero5 .main-images .image2.round-circle { width: min(540px, 92%); } .hero5 .main-images .image1 { width: min(366px, 62%); } .hero5 .main-images .image2.round-circle img, .hero5 .main-images .image1 img { width: 100%; max-width: 100%; max-height: none; height: auto; } @media (max-width: 1199px) { .hero5 .main-images { height: 470px; } .hero5 .main-images .image2.round-circle { width: min(440px, 92%); } .hero5 .main-images .image1 { width: min(300px, 62%); } } @media (max-width: 767px) { .hero5 .main-images { height: 380px; } .hero5 .main-images .image2.round-circle { width: min(340px, 94%); } .hero5 .main-images .image1 { width: min(232px, 64%); } } /* ---------- rotating ring behind the work section ---------- */ #work { position: relative; overflow: hidden; } #work .en-work-ring { position: absolute; top: 40px; right: -120px; width: 460px; max-width: 46vw; opacity: 0.5; pointer-events: none; z-index: 0; } #work .container { position: relative; z-index: 1; } @media (max-width: 991px) { #work .en-work-ring { display: none; } } /* ============================================================ EN-STICKY: at the top of the page the bar is dark (white lockup). Once it sticks, the template turns the bar white, so the dark lockup, dark links and the dark grid icon take over. ============================================================ */ .header-area5 .site-logo .en-logo-light { display: none; } .header-area5.sticky .site-logo .en-logo-dark { display: none; } .header-area5.sticky .site-logo .en-logo-light { display: inline-block; } .header-area5.sticky { background-color: #FFFFFF !important; box-shadow: rgba(7,8,13,.10) 0px 18px 30px !important; } .header-area5.sticky .header-elements { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } .header-area5.sticky .main-menu-ex > ul > li > a { color: #07080D !important; } .header-area5.sticky .main-menu-ex > ul > li > a:hover { color: #3B5BFF !important; } .header-area5.sticky .header1-buttons > span > img[src*="sidebar-icon"] { filter: none !important; } /* ---------- audit form feedback ---------- */ .en-form-note { margin: 12px 4px 0; font-size: 15px; line-height: 1.5; max-width: 560px; } .en-form-note[data-state="ok"] { color: #1E7A4B; } .en-form-note[data-state="error"] { color: #C2401F; } .cta2 .en-form-note { color: #F4F6FF; } .cta2 .en-form-note[data-state="error"] { color: #FFD3C9; } .form-area input { cursor: text; } /* ---------- live store analysis ---------- */ .en-audit { padding: 40px 0 10px; } .en-audit[hidden] { display: none !important; } .en-audit-card { background: #FFFFFF; border: 1px solid #E4E7F2; border-radius: 28px; padding: clamp(22px, 3vw, 40px); box-shadow: 0 30px 60px rgba(7,8,13,.08); } .en-audit-head { display: flex; gap: 24px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; } .en-audit-eyebrow { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #3B5BFF; margin: 0 0 6px; font-weight: 600; } .en-audit-store { font-size: clamp(22px, 3vw, 32px); margin: 0 0 6px; word-break: break-word; } .en-audit-sub { color: #5A6079; margin: 0; font-size: 15px; } .en-audit-score { min-width: 118px; text-align: center; border-radius: 20px; padding: 14px 18px; background: linear-gradient(135deg,#3B5BFF 0%,#8B5CFF 100%); color: #fff; } .en-audit-score[data-band="mid"] { background: linear-gradient(135deg,#F0A020 0%,#E0651A 100%); } .en-audit-score[data-band="low"] { background: linear-gradient(135deg,#E2503C 0%,#B32B2B 100%); } .en-audit-score-num { font-size: 40px; font-weight: 800; line-height: 1.1; } .en-audit-score-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; } .en-audit-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 14px; margin: 26px 0 8px; } .en-stat { background: #F4F6FF; border: 1px solid #E4E7F2; border-radius: 16px; padding: 14px 16px; } .en-stat-num { display: block; font-size: 26px; font-weight: 800; color: #07080D; line-height: 1.2; } .en-stat-label { font-size: 13px; color: #5A6079; } .en-audit-findings { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; } .en-finding { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 14px 16px; border: 1px solid #E4E7F2; border-radius: 16px; background: #FCFDFF; } .en-finding-flag { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; white-space: nowrap; } .en-finding[data-level="pass"] .en-finding-flag { background: #E2F3EA; color: #1E7A4B; } .en-finding[data-level="warn"] .en-finding-flag { background: #FBF0D9; color: #8A5600; } .en-finding[data-level="fail"] .en-finding-flag { background: #F9E3E0; color: #B32B2B; } .en-finding[data-level="fail"] { border-color: #F3CFC9; } .en-finding-title { margin: 0 0 3px; font-weight: 700; color: #07080D; font-size: 16px; } .en-finding-detail { margin: 0; color: #5A6079; font-size: 14.5px; line-height: 1.55; } .en-finding-detail b { color: #07080D; font-weight: 600; } .en-audit-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 24px; } .en-audit-close { background: none; border: 1px solid #E4E7F2; border-radius: 999px; padding: 12px 22px; cursor: pointer; color: #5A6079; } .en-audit-close:hover { border-color: #3B5BFF; color: #3B5BFF; } .en-audit-foot { margin: 16px 0 0; font-size: 13.5px; color: #7A819A; } /* ---------- report page ---------- */ .en-report-page { padding: 150px 0 90px; background: #F4F6FF; min-height: 70vh; } .en-report-page .en-audit-card { margin: 0 auto; max-width: 980px; } .en-audit-loading .en-audit-bar { margin-top: 20px; height: 6px; border-radius: 999px; background: #E4E7F2; overflow: hidden; } .en-audit-loading .en-audit-bar span { display: block; height: 100%; width: 40%; border-radius: 999px; background: linear-gradient(135deg,#3B5BFF 0%,#8B5CFF 100%); animation: enBar 1.1s ease-in-out infinite; } @keyframes enBar { 0% { margin-left: -40%; } 100% { margin-left: 100%; } } .en-finding-examples { margin: 6px 0 0; font-size: 13.5px; color: #7A819A; } .en-again-wrap { max-width: 980px; margin: 26px auto 0; } .en-again-label { font-size: 14px; color: #5A6079; margin: 0 0 10px; } .en-again { display: flex; gap: 10px; flex-wrap: wrap; background: #FFFFFF; border: 1px solid #E4E7F2; border-radius: 999px; padding: 8px 8px 8px 22px; align-items: center; max-width: 560px; } .en-again input { flex: 1 1 200px; border: none; outline: none; font-size: 16px; background: transparent; min-width: 0; } a.en-audit-close { display: inline-flex; align-items: center; text-decoration: none; } @media (prefers-reduced-motion: reduce) { .en-audit-loading .en-audit-bar span { animation: none; } } /* ---------- speed & SEO report ---------- */ .en-scores { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 14px; margin: 26px 0 6px; } .en-score { border-radius: 20px; padding: 18px; text-align: center; color: #fff; } .en-score[data-band="good"] { background: linear-gradient(135deg,#1E7A4B 0%,#2EA86A 100%); } .en-score[data-band="mid"] { background: linear-gradient(135deg,#C97A12 0%,#E9A93A 100%); } .en-score[data-band="low"] { background: linear-gradient(135deg,#B32B2B 0%,#E2503C 100%); } .en-score-num { font-size: 42px; font-weight: 800; line-height: 1.05; } .en-score-label { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .9; margin-top: 4px; } .en-block { margin-top: 30px; } .en-block-title { font-size: 20px; margin: 0 0 12px; color: #07080D; } .en-vitals { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 12px; } .en-vital { border: 1px solid #E4E7F2; border-radius: 16px; padding: 14px 16px; background: #FCFDFF; } .en-vital[data-band="good"] { border-color: #BCE3CD; } .en-vital[data-band="mid"] { border-color: #F3DCB0; } .en-vital[data-band="low"] { border-color: #F3CFC9; } .en-vital-value { display: block; font-size: 24px; font-weight: 800; color: #07080D; } .en-vital-label { display: block; font-weight: 600; color: #07080D; font-size: 14.5px; margin-top: 2px; } .en-vital-hint { display: block; color: #7A819A; font-size: 13px; margin-top: 4px; line-height: 1.45; } .en-shot { flex: 0 0 auto; text-align: center; } .en-shot img { width: 150px; border-radius: 14px; border: 1px solid #E4E7F2; box-shadow: 0 16px 30px rgba(7,8,13,.12); } .en-shot span { display: block; font-size: 12.5px; color: #7A819A; margin-top: 6px; } .en-audit-extra code { background: #F4F6FF; border: 1px solid #E4E7F2; border-radius: 6px; padding: 1px 6px; font-size: 13px; } /* ---------- photo in the first service card ---------- */ .service5 .service5-items .images .image2 img[src*="service-store-design"] { width: 287px; height: 333px; max-width: 100%; object-fit: cover; border-radius: 22px; box-shadow: 0 24px 50px rgba(7,8,13,.28); } @media (max-width: 991px) { .service5 .service5-items .images .image2 img[src*="service-store-design"] { width: 240px; height: 280px; } } /* ---------- photos in the service cards ---------- */ .service5 .service5-items .images .image3 img[src*="service-store-inset"] { width: 220px; height: 210px; max-width: 100%; object-fit: cover; border-radius: 18px; border: 5px solid #FFFFFF; box-shadow: 0 20px 40px rgba(7,8,13,.30); } .service5 .service5-items .images .image2 img[src*="service-theme-custom"] { width: 333px; height: 356px; max-width: 100%; object-fit: cover; border-radius: 22px; box-shadow: 0 24px 50px rgba(7,8,13,.28); } @media (max-width: 991px) { .service5 .service5-items .images .image3 img[src*="service-store-inset"] { width: 170px; height: 162px; } .service5 .service5-items .images .image2 img[src*="service-theme-custom"] { width: 270px; height: 288px; } } /* ---------- photos in service cards 3 and 4 ---------- */ .service5 .service5-items .images .image2 img[src*="service-product-setup"], .service5 .service5-items .images .image2 img[src*="service-conversion"] { width: 286px; height: 324px; max-width: 100%; object-fit: cover; border-radius: 22px; box-shadow: 0 24px 50px rgba(7,8,13,.28); } .service5 .service5-items .images .image3 img[src*="service-product-inset"] { width: 257px; height: 202px; max-width: 100%; object-fit: cover; border-radius: 18px; border: 5px solid #FFFFFF; box-shadow: 0 20px 40px rgba(7,8,13,.30); } @media (max-width: 991px) { .service5 .service5-items .images .image2 img[src*="service-product-setup"], .service5 .service5-items .images .image2 img[src*="service-conversion"] { width: 240px; height: 272px; } .service5 .service5-items .images .image3 img[src*="service-product-inset"] { width: 200px; height: 157px; } } /* ---------- two extra service cards ---------- */ .service5 .service5-items.service5-items5::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-image: url(../img/bg/service5-single-bg2.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; border-radius: 8px; z-index: -3; } .service5 .service5-items.service5-items6::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-image: url(../img/bg/service5-single-bg3.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; border-radius: 8px; z-index: -3; } .service5 .service5-items .images .image2 img[src*="service-seo"], .service5 .service5-items .images .image2 img[src*="service-apps"] { width: 286px; height: 324px; max-width: 100%; object-fit: cover; border-radius: 22px; box-shadow: 0 24px 50px rgba(7,8,13,.28); } @media (max-width: 991px) { .service5 .service5-items .images .image2 img[src*="service-seo"], .service5 .service5-items .images .image2 img[src*="service-apps"] { width: 240px; height: 272px; } } /* ---------- photo in the Why Ennora section ---------- */ .about5 .images-all .image1 img[src*="about-owner"] { width: 470px; height: 530px; max-width: 100%; object-fit: cover; border-radius: 24px; box-shadow: 0 30px 60px rgba(7,8,13,.30); } @media only screen and (min-width: 768px) and (max-width: 991px) { .about5 .images-all .image1 img[src*="about-owner"] { width: 400px; height: 452px; } } @media (max-width: 767px) { .about5 .images-all .image1 img[src*="about-owner"] { width: 100%; height: 400px; } } /* the floating metric cards were sitting over the POS tablet - push them out to the corners so they straddle the photo edge instead of hiding the subject */ .about5 .images-all { margin-bottom: 110px; } .about5 .images-all .image2 { right: -90px; bottom: -90px; } @media (max-width: 991px) { .about5 .images-all { margin-bottom: 60px; } .about5 .images-all .image2 { right: auto; bottom: -40px; } } /* third floating tile, top-left, so the cards spread across the photo instead of clustering on one side. slower float (animate3) so it does not move in lockstep with the pair on the right */ .about5 .images-all .image3.en-float3 { position: absolute; top: 24px; left: -54px; right: auto; bottom: auto; width: 208px; z-index: 2; } .about5 .images-all .image3.en-float3 img { width: 100%; height: auto; } /* the container narrows faster than the tile does, so below 1400 it stops hanging off the left edge or it would clip against the viewport */ @media (max-width: 1399px) { .about5 .images-all .image3.en-float3 { left: -14px; width: 190px; } } @media (max-width: 1199px) { .about5 .images-all .image3.en-float3 { left: 0; width: 176px; } } @media (max-width: 991px) { .about5 .images-all .image3.en-float3 { left: 0; top: 12px; width: 160px; } } /* ---------- service cards 7 and 8 ---------- */ .service5 .service5-items.service5-items7::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-image: url(../img/bg/service5-single-bg4.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; border-radius: 8px; z-index: -3; } .service5 .service5-items.service5-items8::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-image: url(../img/bg/service5-single-bg2.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; border-radius: 8px; z-index: -3; } .service5 .service5-items .images .image2 img[src*="service-speed"], .service5 .service5-items .images .image2 img[src*="service-migration"] { width: 286px; height: 324px; max-width: 100%; object-fit: cover; border-radius: 22px; box-shadow: 0 24px 50px rgba(7,8,13,.28); } @media (max-width: 991px) { .service5 .service5-items .images .image2 img[src*="service-speed"], .service5 .service5-items .images .image2 img[src*="service-migration"] { width: 240px; height: 272px; } } /* ---------- service cards 9 to 12 ---------- */ .service5 .service5-items.service5-items9::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-image: url(../img/bg/service5-single-bg3.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; border-radius: 8px; z-index: -3; } .service5 .service5-items.service5-items10::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-image: url(../img/bg/service5-single-bg1.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; border-radius: 8px; z-index: -3; } .service5 .service5-items.service5-items11::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-image: url(../img/bg/service5-single-bg2.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; border-radius: 8px; z-index: -3; } .service5 .service5-items.service5-items12::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-image: url(../img/bg/service5-single-bg4.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; border-radius: 8px; z-index: -3; } .service5 .service5-items .images .image2 img[src*="service-email"], .service5 .service5-items .images .image2 img[src*="service-analytics"], .service5 .service5-items .images .image2 img[src*="service-landing"], .service5 .service5-items .images .image2 img[src*="service-support"] { width: 286px; height: 324px; max-width: 100%; object-fit: cover; border-radius: 22px; box-shadow: 0 24px 50px rgba(7,8,13,.28); } @media (max-width: 991px) { .service5 .service5-items .images .image2 img[src*="service-email"], .service5 .service5-items .images .image2 img[src*="service-analytics"], .service5 .service5-items .images .image2 img[src*="service-landing"], .service5 .service5-items .images .image2 img[src*="service-support"] { width: 240px; height: 272px; } } /* ---------- Our Work is a slider, not a grid ---------- */ #work .case1-slider { margin: 0 -15px; } #work .case1-slider .slick-slide { height: auto; } #work .case1-slider .single-slider { padding: 0 15px; } /* the store shots are all 640x480, so a fixed tile height keeps every slide the same size instead of letting the tallest one set the track height */ #work .case1-slider .single-slider .image { border-radius: 16px; overflow: hidden; } #work .case1-slider .single-slider .image img { display: block; width: 100%; height: 290px; object-fit: cover; object-position: top center; } #work .en-work-buttons { display: flex; gap: 12px; justify-content: center; margin-top: 22px; } #work .en-work-buttons button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid #D9DEF2; background: #FFFFFF; color: #07080D; display: inline-flex; align-items: center; justify-content: center; transition: all .25s ease; cursor: pointer; } #work .en-work-buttons button:hover { background: linear-gradient(135deg,#3B5BFF 0%,#8B5CFF 100%); border-color: transparent; color: #FFFFFF; } /* ---------- store walkthrough clips in How We Work ---------- */ .what-we-do5 .en-clips { margin-top: 46px; } .what-we-do5 .en-clips .col-lg-4 { margin-bottom: 30px; } .what-we-do5 .en-clip-box { position: relative; border-radius: 18px; overflow: hidden; background: #0F1118; aspect-ratio: 16 / 9; box-shadow: 0 20px 44px rgba(7,8,13,.16); transition: transform .3s ease, box-shadow .3s ease; } .what-we-do5 .en-clip-box:hover { transform: translateY(-4px); box-shadow: 0 28px 56px rgba(7,8,13,.24); } .what-we-do5 .en-clip-box video { display: block; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 767px) { .what-we-do5 .en-clips { margin-top: 32px; } .what-we-do5 .en-clips .col-lg-4 { margin-bottom: 22px; } } /* ---------- service cards 13 and 14 ---------- */ .service5 .service5-items.service5-items13::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-image: url(../img/bg/service5-single-bg3.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; border-radius: 8px; z-index: -3; } .service5 .service5-items.service5-items14::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-image: url(../img/bg/service5-single-bg2.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; border-radius: 8px; z-index: -3; } .service5 .service5-items .images .image2 img[src*="service-photography"], .service5 .service5-items .images .image2 img[src*="service-international"] { width: 286px; height: 324px; max-width: 100%; object-fit: cover; border-radius: 22px; box-shadow: 0 24px 50px rgba(7,8,13,.28); } @media (max-width: 991px) { .service5 .service5-items .images .image2 img[src*="service-photography"], .service5 .service5-items .images .image2 img[src*="service-international"] { width: 240px; height: 272px; } } /* ---------- photo banner on each package card ---------- */ /* .pricing-box has 32px padding and overflow:hidden, so the banner is pulled out to the card edges and the rounded top corners are inherited */ .pricing5 .pricing-box .pkg-image { margin: -32px -32px 24px; line-height: 0; background: #0F1118; } .pricing5 .pricing-box .pkg-image img { display: block; width: 100%; height: 170px; object-fit: cover; } @media (max-width: 991px) { .pricing5 .pricing-box .pkg-image img { height: 150px; } } /* ---------- review avatars ---------- */ .testimonials-box-2 .bottom .info .image img[src*="avatar-"] { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid #FFFFFF; box-shadow: 0 6px 16px rgba(7,8,13,.18); } /* ---------- blog card photos ---------- */ .blog1 .blog-box .image img[src*="blog-theme"], .blog1 .blog-box .image img[src*="blog-checklist"], .blog1 .blog-box .image img[src*="blog-product"] { display: block; width: 100%; height: 240px; object-fit: cover; border-radius: 12px; } @media (max-width: 991px) { .blog1 .blog-box .image img[src*="blog-theme"], .blog1 .blog-box .image img[src*="blog-checklist"], .blog1 .blog-box .image img[src*="blog-product"] { height: 210px; } } /* ---------- review side panel ---------- */ .iamge-slider .image img[src*="review-store-"] { display: block; width: 100%; height: 396px; object-fit: cover; border-radius: 20px; } @media (max-width: 991px) { .iamge-slider .image img[src*="review-store-"] { height: 320px; } } /* ---------- blog article page ---------- */ /* the header sits over the top of the page, so the article has to start below it */ .en-article { padding: clamp(140px, 15vw, 200px) 0 90px; } .en-article-eyebrow { margin: 0 0 14px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; } .en-article-eyebrow a { color: #3B5BFF; } .en-article h1 { font-size: clamp(30px, 4.4vw, 50px); line-height: 1.18; margin: 0 0 18px; } .en-article-meta { color: #5A6079; font-size: 15px; margin: 0 0 30px; } .en-article-meta .en-dot { margin: 0 8px; opacity: .55; } .en-article-hero { border-radius: 20px; overflow: hidden; margin-bottom: 40px; } .en-article-hero img { display: block; width: 100%; height: clamp(220px, 34vw, 420px); object-fit: cover; } .en-article-body { font-size: 17px; line-height: 1.75; color: #3A3F52; } .en-article-body .en-lead { font-size: 20px; line-height: 1.65; color: #23283A; } .en-article-body p { margin: 0 0 20px; } .en-article-body h2 { font-size: clamp(21px, 2.4vw, 27px); line-height: 1.3; margin: 40px 0 14px; color: #07080D; } .en-article-cta { margin: 50px 0 26px; padding: clamp(24px, 3vw, 38px); border-radius: 22px; background: linear-gradient(135deg, #F4F6FF 0%, #ECEFFF 100%); border: 1px solid #E1E6FA; } .en-article-cta h3 { margin: 0 0 10px; font-size: clamp(20px, 2.4vw, 26px); } .en-article-cta p { margin: 0 0 22px; color: #5A6079; } .en-article-back { margin: 0; } .en-article-back a { color: #3B5BFF; font-weight: 600; } /* initials marks stand in until a real photo of the client exists */ .testimonials-box-2 .bottom .info .image img[src*="avatar-client"], .testimonials-box-2 .bottom .info .image img[src*="avatar-client"] { width: 60px; height: 60px; border-radius: 50%; box-shadow: 0 6px 16px rgba(7,8,13,.18); } /* ---------- floating WhatsApp button ---------- */ /* sits directly above the scroll-to-top control, which is fixed at right 30 / bottom 30 */ .en-whatsapp { position: fixed; right: 26px; bottom: 102px; width: 94px; height: 94px; border-radius: 50%; background: #25D366; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 50px; line-height: 1; z-index: 99; box-shadow: 0 10px 28px rgba(7, 8, 13, .26); transition: transform .25s ease, box-shadow .25s ease; } .en-whatsapp:hover, .en-whatsapp:focus { color: #FFFFFF; transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 30px rgba(37, 211, 102, .45); } /* On a phone a 76px circle sat on top of whatever you were reading. Smaller, tucked further into the corner, and above the scroll-to-top control. */ @media (max-width: 767px) { .en-whatsapp { right: 14px; bottom: 82px; width: 58px; height: 58px; font-size: 30px; } } @media (max-width: 400px) { .en-whatsapp { right: 12px; bottom: 76px; width: 54px; height: 54px; font-size: 28px; } } @media (prefers-reduced-motion: reduce) { .en-whatsapp { transition: none; } .en-whatsapp:hover, .en-whatsapp:focus { transform: none; } } /* ---------- the "analyse my store" form on small screens ---------- */ /* The template puts the button inside the input with position:absolute. That works at desktop widths; on a phone the button covered the field, so the placeholder read "yourstore.mysho" and you could not see what you typed. Below 576px the two stack instead. */ @media (max-width: 575px) { .hero5 .form-area input, .cta2 .form-area input { width: 100%; text-align: center; padding-right: 22px; } .hero5 .form-area .form-btn, .cta2 .form-area .form-btn { position: static; margin-top: 12px; } .hero5 .form-area .form-btn .theme-btn3, .cta2 .form-area .form-btn .theme-btn3 { width: 100%; display: inline-flex; align-items: center; justify-content: center; } /* 16px stops iOS zooming the whole page in when the field is focused */ .hero5 .form-area input, .cta2 .form-area input, .footer1 .form-area input { font-size: 16px; } } /* ---------- comfortable tap targets ---------- */ /* Measured on a 390px screen: footer and contact links came out 16px tall, the store names under "Our Work" 20px, and the blog dates 11px. Google wants at least 24px and a thumb wants more. Vertical padding gives them height without moving anything else on the page. */ @media (max-width: 991px) { .menu-list li a, .menu-list .contact-box .pera a { display: inline-block; padding-top: 6px; padding-bottom: 6px; } .single-slider .heading-area a { display: inline-block; padding-top: 5px; padding-bottom: 5px; } .blog-box .heading1 a.date { display: inline-flex; align-items: center; gap: 6px; padding-top: 7px; padding-bottom: 7px; } .social-links a { padding: 7px; } } /* ---------- blog post: author, share, related ---------- */ .en-post-extras { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: 46px 0 10px; padding: 26px 0; border-top: 1px solid #E4E7F2; border-bottom: 1px solid #E4E7F2; } .en-author { display: flex; gap: 16px; align-items: flex-start; flex: 1 1 320px; } .en-author-mark { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: #F4F6FF; border: 1px solid #E4E7F2; display: flex; align-items: center; justify-content: center; } .en-author-mark img { width: 26px; height: 26px; object-fit: contain; } .en-author-body { display: block; } .en-author-name { display: block; font-weight: 700; color: #07080D; margin-bottom: 3px; } .en-author-bio { display: block; font-size: 14px; line-height: 1.6; color: #5A6079; max-width: 46ch; } .en-share { display: flex; align-items: center; gap: 10px; } .en-share-label { font-size: 13px; font-weight: 600; color: #5A6079; margin-right: 2px; } .en-share-btn { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; color: #FFFFFF; transition: transform .2s ease, box-shadow .2s ease; } .en-share-btn:hover { color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(7,8,13,.18); } .en-share-wa { background: #25D366; } .en-share-li { background: #0A66C2; } .en-share-x { background: #07080D; } .en-related { margin-top: 44px; } .en-related-heading { font-size: clamp(20px, 2.4vw, 26px); margin: 0 0 20px; } .en-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; } .en-related-card { display: block; border: 1px solid #E4E7F2; border-radius: 18px; overflow: hidden; background: #FFFFFF; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .en-related-card:hover { transform: translateY(-4px); border-color: #C9D3FF; box-shadow: 0 18px 38px rgba(7,8,13,.10); } .en-related-img { display: block; } .en-related-img img { display: block; width: 100%; height: 150px; object-fit: cover; } .en-related-body { display: block; padding: 16px 18px 20px; } .en-related-cat { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #3B5BFF; background: #EEF1FF; border-radius: 999px; padding: 4px 10px; margin-bottom: 10px; } .en-related-title { display: block; font-weight: 700; color: #07080D; line-height: 1.4; margin-bottom: 6px; } .en-related-meta { display: block; font-size: 13px; color: #5A6079; } @media (max-width: 575px) { .en-post-extras { gap: 18px; } .en-share { width: 100%; } } /* ---------- who we are ---------- */ .en-who .title { margin-bottom: 14px; } .en-who h2 { font-size: clamp(27px, 3.4vw, 42px); line-height: 1.22; } .en-who p { color: #5A6079; line-height: 1.75; } .en-who-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .en-who-card { background: #FFFFFF; border: 1px solid #E4E7F2; border-radius: 20px; padding: 26px 22px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .en-who-card:hover { transform: translateY(-4px); border-color: #C9D3FF; box-shadow: 0 18px 38px rgba(7,8,13,.09); } .en-who-icon { width: 46px; height: 46px; border-radius: 14px; margin-bottom: 16px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #3B5BFF 0%, #8B5CFF 100%); color: #FFFFFF; font-size: 19px; } .en-who-card h3 { font-size: 18px; margin: 0 0 8px; color: #07080D; } .en-who-card p { font-size: 14.5px; line-height: 1.65; margin: 0; } @media (max-width: 575px) { .en-who-grid { grid-template-columns: 1fr; } } /* ---------- faq ---------- */ .en-faq { background: #F7F9FF; } .en-faq .title { margin-bottom: 14px; } .en-faq h2 { font-size: clamp(27px, 3.4vw, 42px); line-height: 1.22; } .en-faq-item { background: #FFFFFF; border: 1px solid #E4E7F2; border-radius: 16px; margin-bottom: 14px; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; } .en-faq-item[open] { border-color: #C9D3FF; box-shadow: 0 14px 30px rgba(7,8,13,.07); } .en-faq-item summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 24px; position: relative; font-weight: 700; color: #07080D; font-size: 17px; line-height: 1.45; } .en-faq-item summary::-webkit-details-marker { display: none; } .en-faq-item summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; color: #3B5BFF; line-height: 1; transition: transform .2s ease; } .en-faq-item[open] summary::after { content: "\2013"; } .en-faq-item summary:hover { color: #3B5BFF; } .en-faq-a { padding: 0 24px 22px; } .en-faq-a p { margin: 0 0 12px; color: #5A6079; line-height: 1.75; font-size: 15.5px; } .en-faq-a p:last-child { margin-bottom: 0; } /* ---------- read next strip ---------- */ .en-readnext { padding-top: 0; } .en-readnext .en-related-heading { text-align: center; margin-bottom: 26px; } /* ---------- faq side image ---------- */ .en-faq-visual { position: relative; padding-bottom: 70px; } .en-faq-visual > img { display: block; width: 100%; height: 470px; object-fit: cover; object-position: center 35%; border-radius: 22px; box-shadow: 0 24px 50px rgba(7,8,13,.16); } .en-faq-visual-card { position: absolute; left: 20px; right: 20px; bottom: 0; background: #FFFFFF; border: 1px solid #E4E7F2; border-radius: 18px; padding: 20px 22px; box-shadow: 0 18px 40px rgba(7,8,13,.14); } .en-faq-visual-title { display: block; font-weight: 700; color: #07080D; margin-bottom: 5px; } .en-faq-visual-text { display: block; font-size: 14px; line-height: 1.6; color: #5A6079; margin-bottom: 14px; } .en-faq-visual-btn { display: inline-flex; align-items: center; gap: 8px; background: #25D366; color: #FFFFFF; font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: 999px; transition: transform .2s ease, box-shadow .2s ease; } .en-faq-visual-btn:hover { color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(37,211,102,.4); } @media (max-width: 991px) { .en-faq-visual { max-width: 460px; margin: 0 auto 44px; } .en-faq-visual > img { height: 380px; } } /* ---------- footer email box ---------- */ .footer5 .form-area { position: relative; } .footer5 .en-footer-note { margin: 10px 2px 0; font-size: 13px; line-height: 1.5; color: #5A6079; } .footer5 .en-footer-note[data-state="ok"] { color: #1E7A4B; } .footer5 .en-footer-note[data-state="error"] { color: #C2401F; } .footer5 .en-footer-send { cursor: pointer; } /* ---------- services page ---------- */ .en-svc-page { padding: clamp(140px, 15vw, 200px) 0 90px; } .en-svc-page h1 { font-size: clamp(30px, 4.4vw, 50px); line-height: 1.18; margin: 0 0 18px; } .en-svc-intro { font-size: 18px; line-height: 1.7; color: #5A6079; max-width: 62ch; } .en-svc-toc { display: flex; flex-wrap: wrap; gap: 10px; margin: 34px 0 10px; padding: 24px; background: #F4F6FF; border: 1px solid #E4E7F2; border-radius: 20px; } .en-svc-toc a { font-size: 14px; font-weight: 600; color: #3B5BFF; background: #FFFFFF; border: 1px solid #E1E6FA; border-radius: 999px; padding: 8px 15px; transition: all .2s ease; } .en-svc-toc a:hover { background: #3B5BFF; border-color: #3B5BFF; color: #FFFFFF; } .en-svc { padding: 58px 0; border-bottom: 1px solid #EEF0F8; scroll-margin-top: 120px; } .en-svc:last-of-type { border-bottom: none; } .en-svc-img img { display: block; width: 100%; height: 330px; object-fit: cover; border-radius: 22px; box-shadow: 0 22px 46px rgba(7,8,13,.14); } .en-svc-num { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .14em; color: #3B5BFF; background: #EEF1FF; border-radius: 999px; padding: 5px 12px; margin-bottom: 12px; } .en-svc h2 { font-size: clamp(23px, 2.8vw, 32px); line-height: 1.25; margin: 0 0 12px; } .en-svc > .row > div > p { color: #5A6079; line-height: 1.75; margin: 0 0 18px; } .en-svc-list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; } .en-svc-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 15px; color: #3A3F52; } .en-svc-list .icon { color: #3B5BFF; font-size: 13px; margin-top: 3px; } .en-svc-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .en-svc-ask { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: #25D366; } .en-svc-ask:hover { color: #1da851; } @media (max-width: 991px) { .en-svc { padding: 40px 0; } .en-svc-img { margin-bottom: 26px; } .en-svc-img img { height: 260px; } } @media (max-width: 575px) { .en-svc-list { grid-template-columns: 1fr; } } /* ---------- header must stay on one line ---------- below ~1400px the menu and the button were both wrapping, which pushed the bar from 86px to 118px on most laptop screens. The gap between items comes from BOTH the li margin and the link's own padding, and the theme's font-size rule outranks ours, hence !important */ .header-area5 .main-menu-ex > ul > li > a, .header-area5 .header1-buttons .theme-btn3 { white-space: nowrap; } @media (min-width: 992px) and (max-width: 1399px) { .header-area5 .main-menu-ex { padding-left: 10px !important; padding-right: 10px !important; } .header-area5 .main-menu-ex > ul > li { margin: 0 5px !important; } .header-area5 .main-menu-ex > ul > li > a { font-size: 16px !important; padding-left: 7px !important; padding-right: 7px !important; } } @media (min-width: 992px) and (max-width: 1199px) { .header-area5 .main-menu-ex { padding-left: 4px !important; padding-right: 4px !important; } .header-area5 .main-menu-ex > ul > li { margin: 0 2px !important; } .header-area5 .main-menu-ex > ul > li > a { font-size: 15px !important; padding-left: 6px !important; padding-right: 6px !important; } .header-area5 .header1-buttons .theme-btn3 { padding-left: 16px !important; padding-right: 10px !important; } } /* ---------- confirmation toast ---------- */ .en-toast { position: fixed; left: 50%; bottom: 32px; z-index: 1000; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #0F1118; color: #F4F6FF; border: 1px solid #2A2E3D; padding: 14px 22px; border-radius: 999px; font-size: 15px; font-weight: 500; box-shadow: 0 18px 40px rgba(7,8,13,.30); transition: opacity .25s ease, transform .25s ease; max-width: calc(100vw - 32px); text-align: center; } .en-toast.is-on { opacity: 1; transform: translate(-50%, 0); } @media (prefers-reduced-motion: reduce) { .en-toast { transition: none; } } /* anchors land below the header rather than underneath it */ html { scroll-padding-top: 110px; } @media (max-width: 991px) { html { scroll-padding-top: 80px; } } /* ---------- pagespeed report (PageSpeed Insights visual language) ---------- */ .en-ps { max-width: 980px; margin: 0 auto 26px; } .psi { --pass: #0c6; --pass-ink: #080; --pass-bg: rgba(0,204,102,.10); --avg: #fa3; --avg-ink: #c33300; --avg-bg: rgba(255,170,51,.10); --fail: #f33; --fail-ink: #c00; --fail-bg: rgba(255,51,51,.10); --na: #9aa0b4; --na-ink: #5a6079; --na-bg: rgba(90,96,121,.08); background: #FFFFFF; border: 1px solid #E4E7F2; border-radius: 28px; padding: clamp(22px, 3vw, 40px); box-shadow: 0 30px 60px rgba(7,8,13,.08); } .psi [data-band="pass"] { --c: var(--pass); --ink: var(--pass-ink); --bg: var(--pass-bg); } .psi [data-band="average"] { --c: var(--avg); --ink: var(--avg-ink); --bg: var(--avg-bg); } .psi [data-band="fail"] { --c: var(--fail); --ink: var(--fail-ink); --bg: var(--fail-bg); } .psi [data-band="na"] { --c: var(--na); --ink: var(--na-ink); --bg: var(--na-bg); } .psi-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; } .psi-heading { font-size: clamp(20px, 2.6vw, 28px); margin: 0; word-break: break-word; } /* tabs */ .psi-tabs { display: inline-flex; gap: 4px; border-bottom: 1px solid #E4E7F2; } .psi-tab { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 18px 11px; margin-bottom: -1px; font: inherit; font-size: 15px; font-weight: 600; color: #5A6079; cursor: pointer; transition: color .2s ease, border-color .2s ease; } .psi-tab svg { width: 18px; height: 18px; } .psi-tab:hover { color: #1B1F2E; } .psi-tab.is-active { color: #1a73e8; border-bottom-color: #1a73e8; } .psi-tab:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; border-radius: 6px; } /* gauges */ .psi-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 6px 0 30px; border-bottom: 1px solid #EEF0F8; } .psi-gauge { display: flex; flex-direction: column; align-items: center; text-align: center; } .psi-g-ring { position: relative; width: 96px; height: 96px; } .psi-g-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .psi-g-base { fill: var(--bg); stroke: var(--bg); stroke-width: 8; } .psi-g-arc { fill: none; stroke: var(--c); stroke-width: 8; transition: stroke-dasharray 1.1s cubic-bezier(.2,.7,.2,1); } .psi-g-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; } .psi-g-label { margin-top: 12px; font-size: 15px; font-weight: 500; color: #1B1F2E; line-height: 1.3; } .psi-gauge--big .psi-g-ring { width: 150px; height: 150px; } .psi-gauge--big .psi-g-num { font-size: 46px; } /* loading skeleton */ .psi-gauge--skel .psi-skel-disc { position: absolute; inset: 0; border-radius: 50%; border: 8px solid #EEF0F8; background: #F7F8FC; animation: psiPulse 1.3s ease-in-out infinite; } .psi-skel-bar { display: block; width: 90px; height: 12px; margin-top: 14px; border-radius: 6px; background: #EEF0F8; animation: psiPulse 1.3s ease-in-out infinite; } @keyframes psiPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } } .psi-wait { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 22px 0 0; color: #5A6079; font-size: 15px; } .psi-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid #D5DAEE; border-top-color: #1a73e8; animation: psiSpin .8s linear infinite; } @keyframes psiSpin { to { transform: rotate(360deg); } } /* performance focus */ .psi-perf { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; padding: 34px 0 30px; border-bottom: 1px solid #EEF0F8; } .psi-perf-main { display: flex; flex-direction: column; align-items: center; text-align: center; } .psi-perf-title { font-size: 22px; font-weight: 500; margin: 16px 0 10px; } .psi-perf-note { max-width: 44ch; color: #5A6079; font-size: 14px; line-height: 1.6; margin: 0 0 18px; } .psi-legend { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; font-size: 13.5px; color: #5A6079; } .psi-legend span { display: inline-flex; align-items: center; gap: 7px; } .psi-perf-shot { width: 190px; border-radius: 14px; overflow: hidden; border: 1px solid #E4E7F2; box-shadow: 0 12px 28px rgba(7,8,13,.10); background: #F7F8FC; } .psi-perf-shot img { display: block; width: 100%; height: auto; } /* the triangle / square / circle markers */ .psi-shape { display: inline-block; flex: 0 0 auto; width: 12px; height: 12px; background: var(--c); } .psi-shape[data-band="pass"] { border-radius: 50%; } .psi-shape[data-band="average"] { border-radius: 1px; } .psi-shape[data-band="fail"] { clip-path: polygon(50% 0, 100% 100%, 0 100%); } .psi-shape[data-band="na"] { border-radius: 50%; } /* metrics grid */ .psi-metrics { padding-top: 26px; } .psi-metrics-head { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5A6079; padding-bottom: 12px; border-bottom: 1px solid #EEF0F8; } .psi-metric-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; } .psi-metric { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid #EEF0F8; } .psi-metric .psi-shape { margin-top: 6px; } .psi-metric-body { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; width: 100%; } .psi-metric-name { font-size: 15px; color: #1B1F2E; } .psi-metric-val { font-size: 22px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; grid-row: span 2; align-self: center; } .psi-metric-hint { font-size: 13px; color: #7A8099; line-height: 1.5; margin-top: 3px; } .psi-stamp { margin: 18px 0 0; font-size: 12.5px; color: #7A8099; } .psi-source { margin: 14px 0 0; padding-top: 14px; border-top: 1px dashed #E4E7F2; font-size: 12.5px; color: #7A8099; } .psi-error { display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px; border-radius: 16px; background: var(--fail-bg); border: 1px solid rgba(255,51,51,.25); } .psi-error .psi-shape { margin-top: 5px; } .psi-error strong { display: block; color: #1B1F2E; margin-bottom: 4px; } .psi-error span { display: block; color: #5A6079; font-size: 14.5px; line-height: 1.6; } @media (max-width: 767px) { .psi-summary { grid-template-columns: repeat(2, 1fr); row-gap: 24px; } /* two per row leaves each tile ~170px, so the longer labels such as "Things costing sales" have to be allowed to wrap rather than run off the edge of the screen */ .psi-gauge, .hr-count { min-width: 0; } .psi-g-label { font-size: 13.5px; margin-top: 9px; overflow-wrap: break-word; hyphens: auto; padding: 0 2px; } .psi-g-ring { width: 104px; height: 104px; } .psi-g-num { font-size: 26px; } .hr-count-num { width: 84px; height: 84px; font-size: 30px; border-width: 7px; } .hr-count-sub { font-size: 11px; } .psi-perf { grid-template-columns: 1fr; } .psi-perf-shot { margin: 0 auto; } .psi-metric-grid { grid-template-columns: 1fr; } .psi-tabs { width: 100%; } .psi-tab { flex: 1; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .psi-g-arc, .psi-skel-disc, .psi-skel-bar, .psi-spinner { transition: none; animation: none; } } /* ---------- pagespeed report: real shoppers, fixes, apps ---------- */ .psi-sec { padding: 30px 0; border-bottom: 1px solid #EEF0F8; } .psi-panel > .psi-sec:first-child { padding-top: 4px; } .psi-sec .psi-summary { border-bottom: none; padding-bottom: 10px; } .psi-sec .psi-perf { border-bottom: none; padding-bottom: 10px; } .psi-sec-head { margin-bottom: 20px; } .psi-sec-head h3 { font-size: 19px; font-weight: 600; margin: 0 0 4px; color: #07080D; } .psi-sec-head p { margin: 0; font-size: 14px; color: #5A6079; line-height: 1.6; } .psi-sec-head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; } /* real shoppers */ .psi-verdict { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px; border-radius: 12px; background: var(--bg); margin-bottom: 16px; font-size: 15px; } .psi-verdict strong { color: var(--ink); font-size: 16px; } .psi-verdict-label { color: #1B1F2E; } .psi-scope { margin: -6px 0 16px; font-size: 13px; color: #7A8099; } .psi-fm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 34px; } .psi-fm { padding: 14px 0; border-bottom: 1px solid #EEF0F8; } .psi-fm-top { display: flex; align-items: center; gap: 10px; } .psi-fm-name { font-size: 14.5px; color: #1B1F2E; flex: 1; } .psi-fm.is-core .psi-fm-name { font-weight: 600; } .psi-fm-val { font-size: 18px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; } .psi-dist { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin: 10px 0 6px; background: #EEF0F8; } .psi-dist span { display: block; height: 100%; background: var(--c); } .psi-dist-key { font-size: 12.5px; color: #7A8099; } .psi-nodata { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 16px; background: #F4F6FF; border: 1px solid #E4E7F2; } .psi-nodata .psi-shape { margin-top: 5px; } .psi-nodata strong { display: block; color: #1B1F2E; margin-bottom: 4px; } .psi-nodata span { display: block; color: #5A6079; font-size: 14.5px; line-height: 1.6; } /* what is slowing it down */ .psi-weight { font-size: 14px; color: #5A6079; background: #F4F6FF; border: 1px solid #E4E7F2; border-radius: 999px; padding: 6px 14px; white-space: nowrap; } .psi-weight strong { color: #07080D; } .psi-ins-list { list-style: none; margin: 0; padding: 0; } .psi-ins { display: flex; gap: 14px; align-items: flex-start; padding: 15px 0; border-top: 1px solid #EEF0F8; } .psi-ins .psi-shape { margin-top: 6px; } .psi-ins-body { flex: 1; min-width: 0; } .psi-ins-title { display: block; font-size: 15px; color: #1B1F2E; font-weight: 500; } .psi-ins-plain { display: block; font-size: 13.5px; color: #5A6079; line-height: 1.55; margin-top: 3px; } .psi-ins-save { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; margin-top: 2px; } .psi-allclear { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; color: #1B1F2E; } /* apps and third parties */ .psi-tp-head, .psi-tp { display: grid; grid-template-columns: minmax(130px, 1.2fr) 2fr 80px 80px; gap: 14px; align-items: center; } .psi-tp-head { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7A8099; padding-bottom: 8px; } .psi-tp-head span:nth-child(3), .psi-tp-head span:nth-child(4) { text-align: right; } .psi-tp-list { list-style: none; margin: 0; padding: 0; } .psi-tp { padding: 11px 0; border-top: 1px solid #EEF0F8; font-size: 14px; } .psi-tp-name { color: #1B1F2E; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .psi-tp-name em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #7A8099; background: #F4F6FF; border-radius: 999px; padding: 2px 8px; margin-left: 4px; } .psi-tp-bar { display: block; height: 8px; background: #EEF0F8; border-radius: 4px; overflow: hidden; } .psi-tp-bar span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #3B5BFF, #8B5CFF); } .psi-tp.is-platform .psi-tp-bar span { background: #B8BFD6; } .psi-tp-size, .psi-tp-time { text-align: right; color: #1B1F2E; font-variant-numeric: tabular-nums; } .psi-tp-time { color: #5A6079; } /* call to action */ .psi-cta { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin: 28px 0 4px; padding: 22px 24px; border-radius: 20px; background: linear-gradient(135deg, #F4F6FF 0%, #ECEFFF 100%); border: 1px solid #E1E6FA; } .psi-cta strong { display: block; font-size: 17px; color: #07080D; margin-bottom: 4px; } .psi-cta span { display: block; font-size: 14px; color: #5A6079; line-height: 1.6; max-width: 46ch; } .psi-cta-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .psi-cta-wa { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #1da851; } .psi-cta-wa:hover { color: #178a43; } @media (max-width: 767px) { .psi-fm-grid { grid-template-columns: 1fr; } .psi-tp-head, .psi-tp { grid-template-columns: 1fr 70px 70px; } .psi-tp-head span:nth-child(2), .psi-tp-bar { display: none; } } /* ---------- store health report: summary, sales, SEO ---------- */ .hr .psi { padding-top: clamp(26px, 3.4vw, 44px); } .hr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .hr-head > div:first-child { flex: 1 1 320px; min-width: 0; } .hr-title { font-size: clamp(26px, 3.6vw, 40px); margin: 0 0 6px; word-break: break-word; } .hr-sub { margin: 0 0 26px; color: #5A6079; font-size: 15px; } .hr-tiles { padding-bottom: 28px; } /* ---------- download the report as a PDF ---------- */ /* a