/* ========================================================================== TSP New Energy Technology Sdn. Bhd. — site stylesheet (theme v2) Lithium battery pack manufacturer, Malaysia. Written for this redesign; replaces the "solarsun" Bootstrap theme. ========================================================================== */ /* --- tokens ------------------------------------------------------------- */ :root { --ink: #0A2130; --navy: #10344B; --navy-2: #0E2C40; --primary: #1B87A8; --primary-d: #0E6382; --green: #3FAE79; --green-lt: #6FD3A3; --wa: #25D366; --paper: #FFFFFF; --surface: #F2F6F8; --surface-2: #F7FAFB; --line: #DCE6EC; --line-2: #EDF2F5; --text: #16303F; --muted: #5C7688; --muted-2: #8AA3B2; --on-dark: #A9C2D0; --on-dark-2: #8FA9B9; --wrap: 1200px; --gut: 20px; --radius: 4px; --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --display: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace; } /* --- reset -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* overflow-x on as well as : hidden on body alone does not clip, which is why a single over-wide element could scroll the whole page sideways on a phone. Root causes are fixed; this is the safety net. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; } body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } h1, h2, h3, h4, h5 { font-family: var(--display); margin: 0; letter-spacing: -0.015em; line-height: 1.15; font-weight: 700; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: var(--primary-d); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--primary); } img { max-width: 100%; height: auto; display: block; border: 0; } table { border-collapse: collapse; width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } svg { flex-shrink: 0; } .mono { font-family: var(--mono); } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); } /* skip link for keyboard/screen-reader users */ .skip { position: absolute; left: -9999px; top: 0; background: var(--green); color: #062318; padding: 12px 20px; z-index: 999; font-weight: 600; } .skip:focus { left: 0; } /* --- shared section furniture ------------------------------------------- */ .sec { padding: 78px 0; } .sec--tight { padding: 56px 0; } .sec--surface { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .sec--navy { background: var(--navy-2); color: #fff; } .sec--ink { background: var(--ink); color: #fff; } .eyebrow { font-size: 12px; letter-spacing: .15em; color: var(--primary); font-weight: 700; margin-bottom: 12px; text-transform: uppercase; } .sec--navy .eyebrow, .sec--ink .eyebrow { color: var(--green-lt); } .sec-head { max-width: 740px; margin-bottom: 42px; } .sec-head h2 { font-size: 38px; margin-bottom: 14px; color: var(--ink); } .sec--navy .sec-head h2, .sec--ink .sec-head h2 { color: #fff; } .sec-head p { font-size: 16px; line-height: 1.65; color: var(--muted); text-wrap: pretty; } .sec--navy .sec-head p, .sec--ink .sec-head p { color: var(--on-dark); } .sec-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; max-width: none; } .sec-head--row > div { max-width: 700px; } .more-link { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; border-bottom: 2px solid var(--green); padding-bottom: 4px; } /* --- buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 600; font-size: 15px; padding: 15px 24px; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; text-align: center; transition: background .15s ease, color .15s ease, border-color .15s ease; } .btn--primary { background: var(--green); color: #062318; font-weight: 700; } .btn--primary:hover { background: #37a06e; color: #062318; } .btn--light { background: #fff; color: var(--navy-2); } .btn--light:hover { background: #eef4f7; color: var(--navy-2); } .btn--dark { background: var(--navy-2); color: #fff; } .btn--dark:hover { background: var(--ink); color: #fff; } .btn--ghost { border-color: rgba(255,255,255,.34); color: #fff; } .btn--ghost:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.07); } .btn--outline { border-color: #C9D8E1; color: var(--text); background: #fff; } .btn--outline:hover { border-color: var(--primary); color: var(--primary-d); } .btn--wa { background: var(--wa); color: #062318; font-weight: 700; } .btn--wa:hover { background: #1fbb5a; color: #062318; } .btn--lg { font-size: 16.5px; padding: 17px 32px; } .btn--block { display: flex; width: 100%; } /* --- utility bar -------------------------------------------------------- */ .ubar { background: var(--ink); color: var(--on-dark); font-size: 13px; } .ubar__in { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .ubar__l, .ubar__r { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .ubar a { color: var(--on-dark); } .ubar a:hover { color: #fff; } .ubar span[data-i] { display: inline-flex; align-items: center; gap: 7px; } .ubar svg { stroke: var(--green); } .ubar__wa { display: inline-flex; align-items: center; gap: 7px; background: var(--wa); color: #062318 !important; font-weight: 700; padding: 5px 12px; border-radius: 3px; white-space: nowrap; } .ubar__wa:hover { background: #1fbb5a; color: #062318 !important; } .ubar__wa svg { stroke: currentColor; } .lang { display: inline-flex; align-items: center; gap: 10px; color: var(--on-dark-2); } .lang .is-on { color: #fff; font-weight: 600; } .lang i { opacity: .35; font-style: normal; } /* --- header / nav ------------------------------------------------------- */ .hdr { background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.09); position: relative; z-index: 40; } .hdr__in { height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .hdr__logo img { height: 40px; width: auto; } .hdr__right { display: flex; align-items: center; gap: 28px; } .nav > ul { display: flex; align-items: center; gap: 22px; } .nav > ul > li { position: relative; } .nav > ul > li > a { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 14.5px; font-weight: 500; color: #D3E2EA; padding: 30px 0; border-bottom: 2px solid transparent; } .nav > ul > li > a:hover, .nav > ul > li.is-active > a { color: #fff; border-bottom-color: var(--green); } .nav .caret { transition: transform .18s ease; } .nav > ul > li:hover .caret { transform: rotate(180deg); } .nav__sub { position: absolute; left: 50%; transform: translateX(-50%) translateY(6px); top: 100%; min-width: 300px; background: #fff; box-shadow: 0 22px 48px rgba(10,33,48,.26); border-top: 3px solid var(--green); padding: 12px 0; opacity: 0; visibility: hidden; transition: opacity .16s ease, transform .16s ease; } .nav > ul > li:hover .nav__sub, .nav > ul > li:focus-within .nav__sub { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nav__sub a { display: block; font-size: 14.5px; color: var(--text); padding: 10px 24px; white-space: nowrap; } .nav__sub a:hover { background: var(--surface); color: var(--primary-d); } .hdr__cta { display: inline-flex; align-items: center; gap: 8px; background: var(--green); color: #062318; font-weight: 600; font-size: 14px; padding: 12px 18px; border-radius: var(--radius); white-space: nowrap; } .hdr__cta:hover { background: #37a06e; color: #062318; } .burger { display: none; width: 44px; height: 44px; border: 0; background: rgba(255,255,255,.1); border-radius: var(--radius); align-items: center; justify-content: center; cursor: pointer; } /* mobile drawer */ .drawer { position: fixed; inset: 0 0 0 auto; width: min(88vw, 360px); background: var(--navy); z-index: 120; transform: translateX(100%); transition: transform .24s ease; overflow-y: auto; padding: 20px 20px 40px; } .drawer.is-open { transform: translateX(0); } .drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .drawer__close { width: 44px; height: 44px; border: 0; background: rgba(255,255,255,.1); border-radius: var(--radius); cursor: pointer; } .drawer a { color: #D3E2EA; } .drawer > ul > li { border-bottom: 1px solid rgba(255,255,255,.1); } .drawer > ul > li > a { display: block; padding: 15px 0; font-size: 16px; font-weight: 600; min-height: 48px; } .drawer__sub a { display: block; padding: 11px 0 11px 16px; font-size: 14.5px; color: var(--on-dark); min-height: 44px; } .scrim { position: fixed; inset: 0; background: rgba(4,18,28,.55); z-index: 110; opacity: 0; visibility: hidden; transition: opacity .2s ease; } .scrim.is-open { opacity: 1; visibility: visible; } /* --- hero --------------------------------------------------------------- */ .hero { background: var(--navy-2); position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(760px 460px at 78% 46%, rgba(27,135,168,.30), transparent 70%); } .hero__in { position: relative; padding: 74px 0 78px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .hero h1 { font-size: 52px; color: #fff; text-wrap: balance; margin-bottom: 20px; line-height: 1.08; } .hero__sub { font-size: 20px; line-height: 1.45; color: #9FD3E4; font-weight: 500; margin-bottom: 18px; text-wrap: pretty; } .hero__lede { font-size: 15.5px; line-height: 1.68; color: #B6C9D6; max-width: 540px; margin-bottom: 32px; text-wrap: pretty; } .hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; } .hero__meta { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; font-size: 13px; color: var(--on-dark-2); border-top: 1px solid rgba(255,255,255,.11); padding-top: 20px; } .hero__meta i { opacity: .4; font-style: normal; } .badge { display: inline-flex; align-items: center; gap: 9px; background: rgba(63,174,121,.14); border: 1px solid rgba(63,174,121,.4); color: var(--green-lt); font-size: 12.5px; font-weight: 600; letter-spacing: .07em; padding: 7px 14px; border-radius: 3px; margin-bottom: 24px; text-transform: uppercase; } .hero__art { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; } .hero__art figure { margin: 0; background: #fff; border-radius: 6px; overflow: hidden; position: relative; } .hero__art .is-tall { grid-row: span 2; } .hero__art .is-tall img { width: 100%; height: 100%; object-fit: cover; } .hero__art .is-short { height: 150px; } .hero__art .is-short img { width: 100%; height: 100%; object-fit: cover; } .hero__cap { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, rgba(10,33,48,.86)); padding: 34px 16px 14px; color: #fff; font-size: 12.5px; font-weight: 600; } /* --- trust strip -------------------------------------------------------- */ .trust { background: var(--surface); border-bottom: 1px solid var(--line); } .trust__in { padding: 24px 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 28px; } .trust__i { display: flex; align-items: center; gap: 13px; font-size: 14.5px; font-weight: 600; line-height: 1.3; } .trust__i svg { stroke: var(--primary); } /* --- two-column splits -------------------------------------------------- These MUST be classes, not inline grid-template-columns. An inline declaration outranks every media query, so a fixed px column written inline keeps its width on a phone and pushes the page wider than the screen. That is exactly what broke the landing page (547px wide on a 390px screen) and the contact page (610px). */ .split { display: grid; align-items: start; } .split--aside { grid-template-columns: 340px minmax(0, 1fr); gap: 56px; } .split--wide { grid-template-columns: 1.25fr minmax(0, 1fr); gap: 44px; } @media (max-width: 1023px) { .split--aside, .split--wide { grid-template-columns: minmax(0, 1fr); gap: 34px; } } @media (max-width: 640px) { .split--aside, .split--wide { gap: 24px; } } /* --- generic grids ------------------------------------------------------ */ .grid { display: grid; gap: 22px; } .grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .grid--6 { grid-template-columns: repeat(6, minmax(0,1fr)); gap: 14px; } /* service cards */ .svc { border: 1px solid var(--line); border-top: 3px solid var(--primary); border-radius: var(--radius); padding: 30px 26px 32px; background: #fff; display: block; } .svc:last-child { border-top-color: var(--green); } .svc > svg { stroke: var(--primary); margin-bottom: 20px; } .svc:last-child > svg { stroke: var(--green); } .svc h3 { font-size: 19px; color: var(--ink); margin-bottom: 11px; line-height: 1.25; } .svc p { font-size: 14.5px; line-height: 1.65; color: var(--muted); text-wrap: pretty; } a.svc:hover { border-color: var(--primary); } a.svc:hover h3 { color: var(--primary-d); } /* --- customisation flow ------------------------------------------------- */ .flow { display: grid; grid-template-columns: 1fr auto 1.15fr; gap: 34px; align-items: stretch; margin-bottom: 46px; } .flow__box { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.13); border-radius: 5px; padding: 32px 30px; } .flow__box--out { background: rgba(63,174,121,.09); border-color: rgba(63,174,121,.32); } .flow__hd { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; } .flow__hd span { width: 32px; height: 32px; border-radius: 3px; background: rgba(159,211,228,.16); display: flex; align-items: center; justify-content: center; } .flow__box--out .flow__hd span { background: rgba(63,174,121,.2); } .flow__hd h3 { font-size: 17px; color: #fff; } .flow__box li, .flow__box .li { font-size: 14.5px; color: #C6DAE4; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.08); } .flow__box li:last-child { border-bottom: 0; } .flow__box--out .li { color: #D6EFE3; border-bottom-color: rgba(63,174,121,.18); } .flow__cols { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 28px; } .flow__cols .li:nth-last-child(-n+2) { border-bottom: 0; } .flow__arrow { display: flex; align-items: center; justify-content: center; width: 54px; } .flow__arrow span { width: 46px; height: 46px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; } .caps { border-top: 1px solid rgba(255,255,255,.13); padding-top: 34px; } .caps__hd { font-size: 12px; letter-spacing: .15em; color: var(--on-dark-2); font-weight: 700; margin-bottom: 20px; } .caps__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; } .caps__i { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.05); border-radius: 3px; padding: 15px 16px; font-size: 14px; color: #D9E7EE; } .caps__i svg { stroke: var(--green-lt); } /* --- application tiles -------------------------------------------------- */ .app-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 16px; display: flex; flex-direction: column; gap: 13px; min-height: 108px; } .app-tile svg { stroke: var(--primary); } .app-tile span { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.3; } .app-tile:hover { border-color: var(--primary); background: #fff; } /* --- checklist ---------------------------------------------------------- */ .checks { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 30px; margin-bottom: 34px; } .checks div { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--text); } .checks div:nth-last-child(-n+2) { border-bottom: 0; } .checks svg { stroke: var(--green); } /* --- product tiles ------------------------------------------------------ */ .ptile { background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 18px; display: flex; flex-direction: column; gap: 12px; } .ptile img { width: 100%; height: 158px; object-fit: contain; } .ptile.is-cover img { object-fit: cover; border-radius: 3px; } .ptile span { font-size: 13.5px; font-weight: 600; color: var(--text); } .ptile:hover { border-color: var(--primary); } /* --- why-choose matrix -------------------------------------------------- */ .why { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); } .why > div { background: #fff; padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; } .why svg { stroke: var(--primary); } .why span { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.4; } /* --- process steps ------------------------------------------------------ */ .steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; } .step { background: rgba(255,255,255,.055); border-left: 3px solid var(--primary); padding: 22px 22px 24px; } .step:last-child { border-left-color: var(--green); } .step b { display: block; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--green-lt); margin-bottom: 9px; letter-spacing: .05em; } .step span { font-size: 16px; font-weight: 600; } /* --- case cards --------------------------------------------------------- */ .case { border: 1px solid var(--line); border-radius: 5px; overflow: hidden; background: #fff; display: flex; flex-direction: column; } .case__img { height: 190px; background: var(--surface); position: relative; } .case__img img { width: 100%; height: 100%; object-fit: cover; } .case__tag { position: absolute; top: 12px; left: 12px; background: var(--green); color: #062318; font-size: 11px; font-weight: 700; letter-spacing: .08em; padding: 5px 10px; border-radius: 2px; } .case__tag--alt { background: var(--navy); color: #fff; } .case__body { padding: 24px 22px 26px; } .case__body h3 { font-size: 17.5px; color: var(--ink); margin-bottom: 12px; line-height: 1.3; } .spec { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; font-size: 13.5px; margin-bottom: 16px; } .spec dt { color: var(--muted-2); } .spec dd { margin: 0; color: var(--text); } .case__body p { font-size: 14px; line-height: 1.6; color: var(--muted); } /* --- forms -------------------------------------------------------------- */ .form-card { background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 34px; } .fgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px 20px; } .fgrid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .fgrid--1 { grid-template-columns: 1fr; } .fspan2 { grid-column: span 2; } .field label { display: block; font-size: 12.5px; font-weight: 600; color: #40607A; margin-bottom: 7px; } .field input[type=text], .field input[type=tel], .field input[type=email], .field select, .field textarea { width: 100%; height: 46px; border: 1px solid #C9D8E1; border-radius: 3px; background: #FBFDFE; padding: 0 13px; font-size: 15px; transition: border-color .15s ease, box-shadow .15s ease; } .field textarea { height: 96px; padding: 12px 13px; line-height: 1.55; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(27,135,168,.13); } .field .req { color: #B0611F; } .fsec { border-top: 1px solid var(--line-2); padding-top: 24px; margin-top: 24px; } .fsec__hd { font-size: 12px; letter-spacing: .12em; color: var(--muted-2); font-weight: 700; margin-bottom: 18px; } .fnote { font-size: 12.5px; line-height: 1.55; color: var(--muted-2); } .fsubmit { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 24px; } .ccode { display: flex; align-items: center; gap: 10px; } .ccode input { width: 130px; } .ccode img { height: 46px; width: auto; border-radius: 3px; cursor: pointer; } /* whatsapp side card */ .wa-card { background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 24px 22px; } .wa-card__hd { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 16px; } .wa-msg { background: var(--surface); border-left: 3px solid var(--green); padding: 14px 15px; font-family: var(--mono); font-size: 12.5px; line-height: 1.75; color: #40607A; margin-top: 16px; } /* --- company block ------------------------------------------------------ */ .co-facts { display: grid; grid-template-columns: auto 1fr; gap: 13px 20px; font-size: 14.5px; border-top: 1px solid var(--line); padding-top: 22px; } .co-facts dt { color: var(--muted-2); } .co-facts dd { margin: 0; color: var(--text); } /* --- footer ------------------------------------------------------------- */ .ftr { background: var(--ink); color: var(--on-dark); padding: 58px 0 0; } .ftr__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px; padding-bottom: 44px; } .ftr__brand img { height: 38px; width: auto; margin-bottom: 18px; } .ftr__brand p { font-size: 14px; line-height: 1.7; color: var(--on-dark-2); max-width: 300px; text-wrap: pretty; } .ftr h4 { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .1em; margin-bottom: 16px; text-transform: uppercase; } .ftr li { margin-bottom: 10px; } .ftr a { color: var(--on-dark); font-size: 14px; } .ftr a:hover { color: #fff; } .ftr__bar { border-top: 1px solid rgba(255,255,255,.11); padding: 22px 0 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: #7E9AAC; } .ftr__bar a { color: #7E9AAC; font-size: 13px; } .ftr__bar nav { display: flex; gap: 22px; } /* --- sticky mobile action bar ------------------------------------------- */ .mbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; background: rgba(10,33,48,.96); backdrop-filter: blur(6px); border-top: 1px solid rgba(255,255,255,.12); padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); gap: 9px; align-items: center; } .mbar .btn { flex-grow: 1; min-height: 52px; } .mbar__call { width: 52px; height: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.12); border-radius: 5px; } /* --- breadcrumb / inner page banner ------------------------------------- */ .pbanner { background: var(--navy-2); color: #fff; padding: 54px 0 50px; position: relative; overflow: hidden; } .pbanner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(620px 340px at 80% 40%, rgba(27,135,168,.28), transparent 70%); } .pbanner__in { position: relative; } .pbanner h1 { font-size: 40px; color: #fff; margin-bottom: 12px; text-wrap: balance; } .pbanner p { font-size: 16.5px; line-height: 1.6; color: var(--on-dark); max-width: 720px; text-wrap: pretty; } .crumb { font-size: 13px; color: var(--on-dark-2); margin-bottom: 16px; } .crumb a { color: var(--on-dark-2); } .crumb a:hover { color: #fff; } /* --- article / rich text ------------------------------------------------ */ .rt { font-size: 16px; line-height: 1.75; color: #2A4557; } .rt > * + * { margin-top: 18px; } .rt h2 { font-size: 27px; color: var(--ink); margin-top: 40px; } .rt h3 { font-size: 21px; color: var(--ink); margin-top: 32px; } .rt ul, .rt ol { padding-left: 22px; } .rt ul li { list-style: disc; margin-bottom: 8px; } .rt ol li { list-style: decimal; margin-bottom: 8px; } .rt img { border-radius: 5px; margin: 26px 0; } .rt table { margin: 24px 0; font-size: 15px; } .rt th, .rt td { border: 1px solid var(--line); padding: 11px 14px; text-align: left; } .rt th { background: var(--surface); font-weight: 600; } .rt a { text-decoration: underline; } /* --- paging ------------------------------------------------------------- */ /* PbootCMS prints a hard-coded Chinese "no data" notice from core/view/Paging.php when a list is empty. Hiding it here rather than patching the core file, which a CMS upgrade would overwrite. The prompt block below every list already tells the visitor what to do instead. */ .page-none { display: none !important; } .paging { display: flex; justify-content: center; gap: 8px; margin-top: 46px; flex-wrap: wrap; } .paging:empty { display: none; } /* PbootCMS renders the pager's labels in Chinese from the core Paging class. Relabel them here instead of patching a core file that an upgrade replaces. */ .paging .page-status { display: none; } .paging .page-index a, .paging .page-pre a, .paging .page-next a, .paging .page-last a { font-size: 0; } .paging .page-index a::after { content: "First"; font-size: 14.5px; } .paging .page-pre a::after { content: "Prev"; font-size: 14.5px; } .paging .page-next a::after { content: "Next"; font-size: 14.5px; } .paging .page-last a::after { content: "Last"; font-size: 14.5px; } .paging a, .paging span { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border: 1px solid var(--line); border-radius: 3px; font-size: 14.5px; color: var(--text); background: #fff; } .paging a:hover { border-color: var(--primary); color: var(--primary-d); } .paging .page-num-current, .paging span.current { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; } /* --- news list ---------------------------------------------------------- */ .nitem { display: grid; grid-template-columns: 260px 1fr; gap: 26px; padding: 26px 0; border-bottom: 1px solid var(--line); align-items: start; } .nitem__img { border-radius: 5px; overflow: hidden; background: var(--surface); aspect-ratio: 4 / 3; } .nitem__img img { width: 100%; height: 100%; object-fit: cover; } .nitem h3 { font-size: 20px; color: var(--ink); margin-bottom: 10px; line-height: 1.3; } .nitem time { font-family: var(--mono); font-size: 13px; color: var(--muted-2); display: block; margin-bottom: 10px; } .nitem p { font-size: 14.5px; line-height: 1.65; color: var(--muted); } /* --- faq ---------------------------------------------------------------- */ .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { padding: 22px 0; font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; width: 12px; height: 12px; flex-shrink: 0; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(45deg); transition: transform .2s ease; margin-right: 4px; } .faq details[open] summary::after { transform: rotate(-135deg); } .faq details > div { padding: 0 0 22px; font-size: 14.5px; line-height: 1.68; color: var(--muted); max-width: 860px; text-wrap: pretty; } /* --- spec table --------------------------------------------------------- */ .spec-table { border: 1px solid var(--line); border-radius: 5px; overflow: hidden; } .spec-table th { background: var(--navy); color: #fff; font-size: 12px; letter-spacing: .1em; font-weight: 700; padding: 14px 20px; text-align: left; text-transform: uppercase; } .spec-table td { padding: 15px 20px; font-size: 14.5px; color: #40607A; border-bottom: 1px solid #E6EDF1; } .spec-table tr:last-child td { border-bottom: 0; } .spec-table td:first-child { font-weight: 600; color: var(--ink); background: var(--surface-2); width: 210px; } /* --- misc --------------------------------------------------------------- */ .note { background: var(--surface); border-left: 3px solid var(--green); padding: 18px 20px; } .note b { display: block; font-size: 14px; color: var(--ink); margin-bottom: 7px; } .note p { font-size: 13.5px; line-height: 1.62; color: var(--muted); } .empty { padding: 60px 0; text-align: center; color: var(--muted-2); font-size: 15px; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1120px) { .nav > ul { gap: 15px; } .nav > ul > li > a { font-size: 13.5px; } } @media (max-width: 1023px) { .sec { padding: 56px 0; } .sec-head h2 { font-size: 32px; } .hero__in { grid-template-columns: 1fr; gap: 40px; padding: 56px 0 60px; } .hero h1 { font-size: 40px; } .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid--6 { grid-template-columns: repeat(3, minmax(0,1fr)); } .why { grid-template-columns: repeat(2, minmax(0,1fr)); } .steps { grid-template-columns: repeat(2, minmax(0,1fr)); } .caps__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .flow { grid-template-columns: 1fr; gap: 16px; } .flow__arrow { width: 100%; } .flow__arrow span { transform: rotate(90deg); } .ftr__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px; } .fgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid--2 { grid-template-columns: 1fr; } .sec-head--row { flex-direction: column; align-items: flex-start; gap: 20px; } } @media (max-width: 860px) { .nav, .hdr__cta { display: none; } .burger { display: flex; } .ubar__l { display: none; } .lang { display: none; } /* single language — nothing to switch to */ .ubar__in { justify-content: center; min-height: 38px; } .ubar__r { gap: 14px; justify-content: center; } .hdr__in { height: 62px; } .hdr__logo img { height: 30px; } .mbar { display: flex; } body { padding-bottom: 74px; } .nitem { grid-template-columns: 1fr; gap: 16px; } .nitem__img { max-width: 100%; } } @media (max-width: 640px) { :root { --gut: 16px; } .sec { padding: 40px 0; } .sec--tight { padding: 32px 0; } .sec-head { margin-bottom: 24px; } .sec-head h2 { font-size: 26px; } .sec-head p { font-size: 14.5px; } .hero__in { padding: 26px 0 32px; gap: 28px; } .hero h1 { font-size: 31px; } .hero__sub { font-size: 15.5px; } .hero__lede { font-size: 14px; margin-bottom: 22px; } .hero__btns { flex-direction: column; gap: 10px; } .hero__btns .btn { width: 100%; min-height: 52px; } .badge { font-size: 10.5px; padding: 6px 11px; } .hero__art { grid-template-columns: 1fr; } .hero__art .is-tall { grid-row: auto; } .hero__art .is-short { height: 130px; } .hero__meta { font-size: 12px; gap: 12px; } .trust__in { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; padding: 16px 0; } .trust__i { font-size: 12.5px; gap: 9px; } .trust__i svg { width: 20px; height: 20px; } .grid { gap: 12px; } .grid--3, .grid--4 { grid-template-columns: 1fr; } .grid--6 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } .svc { padding: 20px 18px; border-top-width: 3px; } .svc h3 { font-size: 17px; } .svc p { font-size: 13.5px; } .svc > svg { margin-bottom: 14px; width: 28px; height: 28px; } .app-tile { flex-direction: row; align-items: center; padding: 15px 13px; min-height: 56px; gap: 10px; } .app-tile span { font-size: 12.5px; } .app-tile svg { width: 20px; height: 20px; } .why { grid-template-columns: 1fr; } .why > div { padding: 18px 16px; flex-direction: row; align-items: center; gap: 12px; } .why span { font-size: 14px; } .steps { grid-template-columns: 1fr; gap: 8px; } .step { display: flex; align-items: center; gap: 13px; padding: 13px 15px; } .step b { margin-bottom: 0; } .step span { font-size: 14px; } .caps__grid { grid-template-columns: 1fr; } .checks { grid-template-columns: 1fr; } .checks div:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); } .checks div:last-child { border-bottom: 0; } .ptile img { height: 110px; } .ptile { padding: 13px; } .form-card { padding: 20px 18px; } .fgrid, .fgrid--2 { grid-template-columns: 1fr; gap: 13px; } .fspan2 { grid-column: auto; } .fsubmit { flex-direction: column; align-items: stretch; } .fsubmit .btn { width: 100%; min-height: 52px; } .ftr { padding-top: 34px; } .ftr__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; padding-bottom: 28px; } .ftr__brand { grid-column: span 2; } .ftr__bar { flex-direction: column; align-items: flex-start; gap: 12px; font-size: 12px; } .pbanner { padding: 32px 0 34px; } .pbanner h1 { font-size: 28px; } .pbanner p { font-size: 14.5px; } .spec-table td:first-child { width: 130px; font-size: 13px; } .spec-table td { padding: 12px 14px; font-size: 13.5px; } .rt { font-size: 15.5px; } .rt h2 { font-size: 22px; } .rt h3 { font-size: 18px; } .faq summary { font-size: 15.5px; padding: 18px 0; } } /* --- print / motion ----------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }