// cms-skin.jsx — TechReady "Soft & Rounded" skin. // Registers via CMS.defineSkin("soft", …). Every section is a pure function of // its `content` prop (+ shared `theme`/`colors`). No copy lives here. // // All CSS is scoped under `.trs` so it can coexist in with other skins' // stylesheets (both skin files inject at load; only one renders at a time). // // Load AFTER React + tr-icons.js + cms-core.js + cms-data.js. const { useState: useSoftState, useEffect: useSoftEffect } = React; // Inject this skin's stylesheet once. (function injectSoftCSS() { if (document.getElementById("trs-css")) return; const s = document.createElement("style"); s.id = "trs-css"; s.textContent = ` .trs{ --blue:#00A8E8; --blue-d:#0086c4; --blue-deep:#0a5a82; --sky:#dff3fd; --sky-2:#eef9ff; --mint:#e6f7f0; --peach:#fff1e6; --ink:#1f3947; --soft:#5c7585; --paper:#fcfdff; --line:#e7eff5; --r:26px; --hw:var(--trs-hw,700); } .trs a{ color:inherit; text-decoration:none; } .trs h1,.trs h2,.trs h3,.trs .fk{ font-family:var(--fg-head,'Baloo 2',sans-serif); font-weight:var(--hw); line-height:1.08; letter-spacing:-.01em; overflow-wrap:break-word; } .trs .wrap{ max-width:1140px; margin:0 auto; padding:0 clamp(28px,5vw,44px); position:relative; } .trs section{ padding:96px 0; position:relative; } .trs .ico{ flex:none; } .trs .btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--fg-head,'Baloo 2',sans-serif); font-weight:600; font-size:17px; padding:15px 28px; border-radius:999px; border:3px solid transparent; cursor:pointer; transition:.18s; white-space:nowrap; } .trs .btn-primary{ background:var(--blue); color:#fff; box-shadow:0 10px 22px -8px rgba(0,168,232,.6); } .trs .btn-primary:hover{ transform:translateY(-3px); box-shadow:0 16px 28px -10px rgba(0,168,232,.65); } .trs .btn-soft{ background:#fff; color:var(--blue-d); border-color:#cdeafb; } .trs .btn-soft:hover{ border-color:var(--blue); transform:translateY(-3px); } .trs .eyebrow{ font-family:var(--fg-head,'Baloo 2',sans-serif); font-weight:600; font-size:15px; color:var(--blue-d); background:var(--sky); padding:7px 16px; border-radius:999px; display:inline-block; } .trs .hl{ color:var(--blue); } /* NAV */ .trs .nav{ position:sticky; top:var(--fg-nav-top,0); z-index:60; background:rgba(252,253,255,.85); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); } .trs .nav-inner{ display:flex; align-items:center; justify-content:space-between; height:80px; } .trs .brand{ display:inline-flex; align-items:center; } .trs .brand img{ height:37px; width:auto; display:block; } .trs .nav-links{ display:flex; gap:28px; font-family:var(--fg-head,'Baloo 2',sans-serif); font-weight:500; font-size:16px; color:var(--soft); } .trs .nav-links a:hover{ color:var(--blue-d); } .trs .nav .btn{ padding:11px 22px; font-size:16px; } .trs .nav-burger{ display:none; width:42px; height:42px; border:none; background:transparent; cursor:pointer; flex-direction:column; gap:5px; align-items:center; justify-content:center; padding:0; } .trs .nav-burger span{ width:22px; height:2.5px; background:var(--ink); border-radius:2px; transition:.2s; } .trs .nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); } .trs .nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .trs .nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); } .trs .nav-mobile{ display:none; flex-direction:column; padding:6px 28px 20px; background:rgba(252,253,255,.97); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid var(--line); } .trs .nav-mobile a:not(.btn){ padding:14px 2px; font-family:var(--fg-head,'Baloo 2',sans-serif); font-weight:600; font-size:17px; color:var(--ink); border-bottom:1px solid var(--line); } .trs .nav-mobile .btn{ margin-top:14px; justify-content:center; } @media(max-width:880px){ .trs .nav-links,.trs .nav-cta{ display:none; } .trs .nav-burger{ display:flex; } .trs .nav-mobile.open{ display:flex; } } /* HERO */ .trs .hero{ overflow:hidden; background:linear-gradient(158deg,var(--blue) 0%,var(--blue-d) 58%,#066a98 100%); color:#fff; } .trs .hero .b1{ position:absolute; width:560px; height:560px; background:rgba(255,255,255,.12); border-radius:46% 54% 60% 40%/55% 45% 55% 45%; top:-150px; right:-130px; } .trs .hero .b2{ position:absolute; width:340px; height:340px; background:rgba(255,255,255,.10); border-radius:50%; bottom:-120px; left:-90px; } .trs .hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; grid-template-areas:"eyebrow art" "title art" "lead art" "feats art" "cta art"; column-gap:48px; row-gap:0; align-items:start; padding-top:80px; padding-bottom:92px; } .trs .hero-inner>*{ min-width:0; } .trs .h-eyebrow{ grid-area:eyebrow; } .trs .h-title{ grid-area:title; margin-top:18px; } .trs .h-lead{ grid-area:lead; } .trs .h-cta{ grid-area:cta; margin-top:30px; } .trs .h-feats{ grid-area:feats; } .trs .hero h1{ font-size:clamp(42px,5.6vw,68px); color:#fff; } .trs .hero h1 .hl{ color:#bfeeff; } .trs .hero .eyebrow{ background:rgba(255,255,255,.18); color:#fff; } .trs .hero .lead{ font-size:20px; color:rgba(255,255,255,.92); max-width:34ch; margin:22px 0 0; } .trs .hero-cta{ display:flex; gap:14px; flex-wrap:wrap; } .trs .hero .btn-primary{ background:#fff; color:var(--blue-d); box-shadow:0 14px 28px -10px rgba(0,40,70,.5); } .trs .hero .btn-soft{ background:transparent; color:#fff; box-shadow:0 0 0 2.5px rgba(255,255,255,.65) inset; } .trs .hero .btn-soft:hover{ box-shadow:0 0 0 2.5px #fff inset; } .trs .hero-feats{ display:flex; align-items:center; margin-top:34px; flex-wrap:wrap; row-gap:10px; } .trs .feat-label{ font-family:var(--fg-head,'Baloo 2',sans-serif); font-weight:600; font-size:15px; color:rgba(255,255,255,.82); } .trs .hero-feats .feat{ display:inline-flex; align-items:center; gap:9px; font-family:var(--fg-head,'Baloo 2',sans-serif); font-weight:500; font-size:16px; color:rgba(255,255,255,.94); padding:0 16px; } .trs .hero-feats .feat:not(:last-child){ border-right:1px solid rgba(255,255,255,.3); } .trs .hero-feats .ico{ color:#fff; opacity:.9; } .trs .hero-art{ grid-area:art; align-self:center; position:relative; display:grid; place-items:center; width:100%; } .trs .face{ position:relative; width:84%; max-width:380px; padding:28px 0; background:#fff; border-radius:36px; box-shadow:0 36px 70px -28px rgba(0,40,70,.55); display:grid; place-items:center; overflow:hidden; } .trs .scene{ width:80%; display:flex; flex-direction:column; gap:12px; } .trs .bubble{ display:flex; gap:12px; align-items:center; background:var(--sky-2); border-radius:18px; padding:13px 15px; } .trs .bubble.alt{ background:var(--mint); } .trs .bubble.alt2{ background:var(--peach); } .trs .bubble .ic{ width:40px; height:40px; border-radius:13px; background:var(--blue); display:grid; place-items:center; flex:none; color:#fff; } .trs .bubble.alt .ic{ background:#27b083; } .trs .bubble.alt2 .ic{ background:#f0954b; } .trs .bubble b{ font-family:var(--fg-head,'Baloo 2',sans-serif); font-size:15px; display:block; color:var(--ink); } .trs .bubble small{ font-size:13px; color:var(--soft); } .trs .see-all{ margin-top:4px; display:flex; align-items:center; justify-content:center; gap:8px; width:100%; background:var(--ink); color:#fff; font-family:var(--fg-head,'Baloo 2',sans-serif); font-weight:600; font-size:14.5px; border:none; border-radius:14px; padding:12px; cursor:pointer; transition:.18s; } .trs .see-all:hover{ background:var(--blue-d); } .trs .see-all .ico{ transition:.18s; } .trs .see-all:hover .ico{ transform:translateX(3px); } .trs .all-tech{ display:none; flex-direction:column; width:84%; } .trs .face.techopen .scene{ display:none; } .trs .face.techopen .all-tech{ display:flex; } .trs .all-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; } .trs .all-head b{ font-family:var(--fg-head,'Baloo 2',sans-serif); font-size:18px; color:var(--ink); } .trs .all-close{ width:34px; height:34px; border-radius:11px; border:none; background:var(--sky-2); color:var(--blue-d); display:grid; place-items:center; cursor:pointer; } .trs .tech-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; align-content:start; } .trs .tech-chip{ display:flex; align-items:center; gap:9px; background:var(--sky-2); border-radius:12px; padding:9px 11px; font-size:13px; font-weight:700; color:var(--ink); line-height:1.2; } .trs .tech-chip .ico{ color:var(--blue-d); flex:none; } .trs .badge-ic{ position:absolute; width:60px; height:60px; border-radius:20px; background:#fff; box-shadow:0 16px 30px -12px rgba(0,40,70,.5); display:grid; place-items:center; z-index:4; } .trs .badge-ic.bi1{ top:13%; right:-5%; transform:rotate(8deg); color:#27b083; } .trs .badge-ic.bi2{ bottom:19%; left:-6%; transform:rotate(-8deg); color:var(--blue); } /* HELP */ .trs .center{ text-align:center; max-width:640px; margin:0 auto 50px; } .trs .center h2{ font-size:clamp(32px,4vw,46px); margin:16px 0 12px; color:var(--ink); } .trs .center p{ color:var(--soft); font-size:18px; } .trs .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .trs .card{ background:#fff; border:2px solid var(--line); border-radius:var(--r); padding:30px; transition:.2s; text-align:center; } .trs .card:hover{ transform:translateY(-6px); border-color:#bfe6fb; box-shadow:0 24px 44px -26px rgba(10,90,130,.4); } .trs .card .ig{ width:84px; height:84px; border-radius:24px; display:grid; place-items:center; margin:0 auto 20px; } .trs .card:nth-child(3n+1) .ig{ background:var(--sky); color:var(--blue-d); } .trs .card:nth-child(3n+2) .ig{ background:var(--mint); color:#1f9b73; } .trs .card:nth-child(3n+3) .ig{ background:var(--peach); color:#e08236; } .trs .card h3{ font-size:23px; margin-bottom:10px; color:var(--ink); } .trs .card p{ color:var(--soft); font-size:15.5px; } /* WHY */ .trs .why{ background:var(--sky-2); position:relative; overflow:hidden; } .trs .why-bg{ position:absolute; left:-26px; bottom:-96px; color:var(--blue); opacity:.06; line-height:0; pointer-events:none; z-index:0; transform:rotate(-5deg); transform-origin:bottom left; } @media(max-width:760px){ .trs .why-bg{ display:none; } } .trs .why-wrap{ position:relative; z-index:1; display:grid; grid-template-columns:.82fr 1.18fr; gap:56px; align-items:start; } .trs .why-intro h2{ font-size:clamp(30px,3.6vw,44px); line-height:1.08; margin-top:14px; color:var(--ink); } .trs .why-intro .lead{ color:var(--soft); font-size:17px; margin-top:16px; } .trs .why-creds{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; } .trs .why-cred{ display:inline-flex; align-items:center; gap:8px; background:#fff; border-radius:999px; padding:9px 15px; font-family:var(--fg-head,'Baloo 2',sans-serif); font-weight:600; font-size:13.5px; color:var(--ink); box-shadow:0 12px 26px -18px rgba(10,90,130,.6); } .trs .why-cred .ico{ color:var(--blue-d); } .trs .guarantee{ margin-top:28px; background:#fff; border-radius:24px; padding:22px; display:flex; gap:18px; align-items:center; box-shadow:0 22px 46px -28px rgba(10,90,130,.5); } .trs .seal{ width:74px; height:74px; flex:none; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--blue-d)); color:#fff; display:grid; place-items:center; text-align:center; font-family:var(--fg-head,'Baloo 2',sans-serif); line-height:.92; box-shadow:0 10px 22px -8px rgba(0,130,196,.7); } .trs .seal b{ font-size:27px; display:block; } .trs .seal span{ font-size:11px; letter-spacing:.05em; } .trs .gt b{ font-family:var(--fg-head,'Baloo 2',sans-serif); font-size:17px; display:block; margin-bottom:3px; color:var(--ink); } .trs .gt p{ color:var(--soft); font-size:14px; } .trs .promise-list{ display:flex; flex-direction:column; gap:14px; } .trs .promise-row{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; background:#fff; border-radius:22px; padding:22px 24px; transition:.2s ease; } .trs .promise-row:hover{ transform:translateX(5px); box-shadow:0 20px 40px -26px rgba(10,90,130,.55); } .trs .promise-row .ic{ width:56px; height:56px; flex:none; border-radius:18px; display:grid; place-items:center; color:#fff; } .trs .promise-row:nth-child(4n+1) .ic{ background:var(--blue); } .trs .promise-row:nth-child(4n+2) .ic{ background:#27b083; } .trs .promise-row:nth-child(4n+3) .ic{ background:#f0954b; } .trs .promise-row:nth-child(4n+4) .ic{ background:#5b8dff; } .trs .promise-row h3{ font-size:20px; margin:0 0 5px; color:var(--ink); } .trs .promise-row p{ color:var(--soft); font-size:15px; } /* AREA */ .trs .area-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start; } .trs .map{ position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; border:3px solid #fff; box-shadow:0 24px 50px -28px rgba(10,90,130,.4); background:linear-gradient(180deg,#eaf5ec,#e3efe7); } .trs .map .roads{ position:absolute; inset:0; opacity:.5; } .trs .map .water{ position:absolute; right:-12%; bottom:-16%; width:60%; height:56%; background:#97d4f0; border-radius:50%; } .trs .map .zone{ position:absolute; left:14%; top:18%; width:48%; height:54%; background:rgba(0,168,232,.18); border:3px dashed var(--blue-d); border-radius:46% 54% 50% 50%; } .trs .map .pin{ position:absolute; left:32%; top:38%; width:40px; height:40px; background:var(--blue); border-radius:50% 50% 50% 0; transform:rotate(-45deg); box-shadow:0 12px 22px -8px rgba(0,0,0,.4); display:grid; place-items:center; } .trs .map .pin::after{ content:""; width:15px; height:15px; background:#fff; border-radius:50%; } .trs .map .cbd-city{ position:absolute; right:9%; top:16%; width:52px; height:auto; color:var(--ink); opacity:.5; } .trs .area h2{ font-size:clamp(30px,3.6vw,42px); margin:16px 0 16px; color:var(--ink); } .trs .area p{ color:var(--soft); font-size:16px; margin-bottom:14px; } .trs .area .note{ background:var(--mint); border-radius:18px; padding:18px 20px; font-size:15px; color:var(--ink); } .trs .pc-check{ margin-top:20px; background:#fff; border:2px solid var(--line); border-radius:18px; padding:18px; transition:background-color .45s ease, border-color .45s ease; } .trs .pc-check.is-onsite{ background:var(--mint); border-color:transparent; } .trs .pc-check.is-remote{ background:var(--sky-2); border-color:transparent; } .trs .pc-check.is-invalid{ background:#fff4e6; border-color:transparent; } .trs .pc-h{ font-family:var(--fg-head,'Baloo 2',sans-serif); font-weight:600; font-size:16px; margin-bottom:12px; color:var(--ink); } .trs .pc-form{ display:flex; gap:10px; background:transparent; border:0; box-shadow:none; padding:0; border-radius:0; } .trs .pc-input{ flex:1; min-width:0; border:2px solid var(--line); border-radius:12px; padding:12px 15px; font:inherit; font-size:15px; font-weight:600; background:#fff; color:var(--ink); } .trs .pc-input:focus{ outline:none; border-color:var(--blue); } .trs .pc-btn{ flex:none; background:var(--blue); color:#fff; border:none; border-radius:12px; font-family:var(--fg-head,'Baloo 2',sans-serif); font-weight:600; font-size:15px; padding:0 24px; cursor:pointer; transition:.18s; } .trs .pc-btn:hover{ background:var(--blue-d); } .trs .pc-reveal{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s ease; } .trs .pc-reveal.open{ grid-template-rows:1fr; } .trs .pc-reveal-in{ overflow:hidden; min-height:0; } .trs .pc-result{ margin-top:14px; font-size:14.5px; } .trs .pc-result p{ margin:0; } .trs .pc-fine{ margin-top:8px !important; font-size:13px; opacity:.82; } .trs .pc-result.invalid{ color:#9a5b00; } .trs .pc-result.onsite{ color:#14653f; } .trs .pc-result.remote{ color:var(--blue-deep); } .trs .pc-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; } .trs .pc-badge{ display:inline-flex; align-items:center; gap:7px; background:#fff; border-radius:999px; padding:6px 12px; font-family:var(--fg-head,'Baloo 2',sans-serif); font-weight:600; font-size:13px; color:var(--ink); } .trs .pc-badge .ico{ color:var(--blue-d); } .trs .pc-badge.ok .ico{ color:#1c9d5e; } /* PRICING */ .trs .pricing{ background:var(--sky-2); } .trs .pill-row{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-bottom:40px; } .trs .pill-row .p{ background:#fff; border-radius:999px; padding:11px 20px; font-family:var(--fg-head,'Baloo 2',sans-serif); font-size:15px; display:flex; gap:9px; align-items:center; color:var(--ink); } .trs .pill-row .ico{ color:var(--blue); } .trs .price-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:880px; margin:0 auto; } .trs .plan{ background:#fff; border-radius:var(--r); padding:32px; border:3px solid #fff; } .trs .plan.fav{ border-color:var(--blue); position:relative; } .trs .plan.fav .tag{ position:absolute; top:-15px; left:32px; background:var(--blue); color:#fff; font-family:var(--fg-head,'Baloo 2',sans-serif); font-size:13px; padding:5px 16px; border-radius:999px; } .trs .plan h3{ font-size:23px; display:flex; gap:10px; align-items:center; color:var(--ink); } .trs .plan h3 .ico{ color:var(--blue); } .trs .prow{ display:flex; justify-content:space-between; padding:13px 0; border-bottom:2px dotted var(--line); font-size:15.5px; color:var(--ink); } .trs .prow b{ font-family:var(--fg-head,'Baloo 2',sans-serif); font-size:18px; } .trs .grp{ font-family:var(--fg-head,'Baloo 2',sans-serif); font-size:13px; color:var(--blue-d); margin:18px 0 2px; } .trs .gst{ font-size:13px; color:var(--soft); margin-top:14px; } /* FINAL CTA */ .trs .final{ text-align:center; } .trs .final-box{ background:var(--blue); border-radius:40px; padding:64px 32px; color:#fff; position:relative; overflow:hidden; } .trs .final-box::before{ content:""; position:absolute; width:300px; height:300px; background:rgba(255,255,255,.1); border-radius:50%; top:-120px; left:-60px; } .trs .final-box::after{ content:""; position:absolute; width:240px; height:240px; background:rgba(255,255,255,.1); border-radius:50%; bottom:-110px; right:-50px; } .trs .final h2{ font-size:clamp(32px,4.4vw,52px); position:relative; } .trs .final p{ font-size:19px; color:rgba(255,255,255,.92); max-width:44ch; margin:16px auto 28px; position:relative; } .trs .final .hero-cta{ justify-content:center; position:relative; display:flex; gap:14px; flex-wrap:wrap; } .trs .final .btn-primary{ background:#fff; color:var(--blue-d); box-shadow:none; } .trs .final .btn-soft{ background:transparent; color:#fff; box-shadow:0 0 0 2.5px #fff inset; } /* CONTACT */ .trs .form-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:start; } .trs .form-aside h2{ font-size:clamp(30px,3.6vw,42px); margin:14px 0 16px; color:var(--ink); } .trs .form-aside p{ color:var(--soft); font-size:17px; margin-bottom:24px; } .trs .cr{ display:flex; gap:13px; align-items:center; padding:13px 0; } .trs .cr .ic{ width:48px; height:48px; border-radius:16px; background:var(--sky); display:grid; place-items:center; color:var(--blue-d); flex:none; } .trs .cr b{ font-family:var(--fg-head,'Baloo 2',sans-serif); display:block; font-size:16px; color:var(--ink); } .trs .cr span{ font-size:14px; color:var(--soft); } .trs form{ color-scheme:light; background:#fff; border-radius:var(--r); padding:32px; border:2px solid var(--line); box-shadow:0 24px 50px -32px rgba(10,90,130,.35); } .trs .field{ margin-bottom:18px; } .trs .field label{ font-family:var(--fg-head,'Baloo 2',sans-serif); font-weight:600; font-size:15px; display:block; margin-bottom:7px; color:var(--ink); } .trs .field input,.trs .field select,.trs .field textarea{ width:100%; border:2px solid var(--line); border-radius:14px; padding:13px 16px; font:inherit; font-size:15px; font-weight:600; background:var(--sky-2); transition:.15s; color:var(--ink); } .trs .field input:focus,.trs .field select:focus,.trs .field textarea:focus{ outline:none; border-color:var(--blue); background:#fff; } .trs .field textarea{ min-height:120px; resize:vertical; } .trs .two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .trs .robot{ display:flex; gap:10px; align-items:center; font-size:14px; color:var(--soft); margin:4px 0 18px; } .trs .robot input{ width:18px; height:18px; accent-color:var(--blue); } .trs form .btn-primary{ width:100%; justify-content:center; background:var(--blue); color:#fff; } .trs form .btn-primary:disabled{ opacity:.6; cursor:default; } .trs .field select{ color-scheme:light; -webkit-appearance:none; appearance:none; background-color:var(--sky-2); background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 15px center; padding-right:42px; } .trs .hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; } .trs .form-err{ background:#fff4e6; color:#9a5b00; border-radius:12px; padding:10px 14px; font-size:14px; margin-bottom:12px; } .trs .form-done{ display:flex; gap:13px; align-items:center; background:var(--mint); border-radius:16px; padding:22px 24px; } .trs .form-done-ico{ width:40px; height:40px; flex:none; border-radius:50%; background:#fff; display:grid; place-items:center; color:#1c9d5e; } .trs .form-done p{ margin:0; font-family:var(--fg-head,'Baloo 2',sans-serif); font-weight:600; font-size:16px; color:#14653f; } /* FOOTER */ .trs .foot{ padding:46px 0; background:var(--paper); } .trs .fi{ display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; border-top:2px solid var(--line); padding-top:32px; } .trs .fi .brand img{ height:28px; } .trs .fl{ display:flex; gap:22px; font-family:var(--fg-head,'Baloo 2',sans-serif); font-size:15px; color:var(--soft); } .trs .fl a:hover{ color:var(--blue-d); } .trs .foot small{ font-size:13px; color:var(--soft); } @media(max-width:1024px){ .trs .hero-inner{ display:flex; flex-direction:column; align-items:flex-start; } .trs .h-eyebrow{ order:1; } .trs .h-title{ order:2; width:100%; } .trs .h-lead{ order:3; width:100%; } .trs .h-feats{ order:4; } .trs .h-cta{ order:5; } .trs .hero-art{ order:6; margin-top:30px; width:100%; max-width:440px; align-self:flex-start; } .trs .badge-ic{ display:none; } } @media(max-width:880px){ .trs .why-wrap,.trs .area-grid,.trs .form-grid{ grid-template-columns:1fr; gap:40px; } .trs .cards,.trs .price-grid,.trs .two{ grid-template-columns:1fr; } .trs section{ padding:66px 0; } /* iOS Safari auto-zooms on focus of any input under 16px and never zooms back — keep all form fields at 16px on touch widths to prevent the page locking zoomed-in. */ .trs .pc-input,.trs .field input,.trs .field select,.trs .field textarea{ font-size:16px; } } @media(max-width:560px){ .trs section{ padding:52px 0; } .trs .hero-inner{ padding-top:46px; padding-bottom:58px; } .trs .hero .lead{ font-size:18px; } .trs .hero-cta{ gap:10px; } .trs .hero-cta .btn{ flex:1 1 auto; justify-content:center; } .trs .hero-feats{ margin-top:26px; row-gap:8px; } .trs .hero-feats .feat{ padding:0 12px; font-size:15px; } .trs .center{ margin-bottom:36px; } .trs .center h2{ font-size:28px; } .trs .center p{ font-size:16px; } .trs .cards{ gap:16px; } .trs .card{ padding:26px; } .trs .why-wrap{ gap:26px; } .trs .guarantee{ padding:18px; gap:14px; } .trs .promise-row{ padding:18px; gap:14px; } .trs .promise-row .ic{ width:48px; height:48px; } .trs .price-grid{ gap:18px; } .trs .plan{ padding:26px; } .trs .final-box{ padding:46px 20px; border-radius:28px; } .trs form{ padding:22px; } .trs .fi{ flex-direction:column; align-items:flex-start; gap:16px; } /* Hero art card spans the same width as the hero text/buttons on phones. */ .trs .hero-art{ max-width:none; } .trs .face{ width:100%; max-width:none; } } .trs .x-narrow{ max-width:820px; } .trs section.x-tint{ background:var(--sky-2); } .trs .x-tgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .trs .x-tcard{ margin:0; background:#fff; border:2px solid var(--line); border-radius:var(--r); padding:26px; } .trs .x-stars{ display:flex; gap:2px; font-size:16px; margin-bottom:12px; } .trs .x-stars span{ color:var(--line); } .trs .x-stars .on{ color:#f5a623; } .trs .x-tcard blockquote{ margin:0 0 16px; font-size:16px; line-height:1.6; color:var(--ink); } .trs .x-tcard figcaption b{ font-family:var(--fg-head,'Baloo 2',sans-serif); font-size:15px; color:var(--ink); display:block; } .trs .x-tcard figcaption span{ font-size:13px; color:var(--soft); } .trs .x-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .trs .x-step{ position:relative; background:#fff; border:2px solid var(--line); border-radius:var(--r); padding:32px 26px 28px; text-align:center; } .trs .x-stepnum{ position:absolute; top:-16px; left:50%; transform:translateX(-50%); width:34px; height:34px; border-radius:50%; background:var(--blue); color:#fff; font-family:var(--fg-head,'Baloo 2',sans-serif); font-weight:700; display:grid; place-items:center; } .trs .x-stepic{ display:grid; place-items:center; width:64px; height:64px; border-radius:20px; background:var(--sky); color:var(--blue-d); margin:6px auto 16px; } .trs .x-step h3{ font-size:20px; color:var(--ink); margin-bottom:8px; } .trs .x-step p{ color:var(--soft); font-size:15px; } .trs .x-faq{ display:flex; flex-direction:column; gap:10px; } .trs .x-faqitem{ background:#fff; border:2px solid var(--line); border-radius:16px; overflow:hidden; } .trs .x-faqq{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; background:none; border:0; cursor:pointer; padding:18px 20px; font-family:var(--fg-head,'Baloo 2',sans-serif); font-weight:600; font-size:16px; color:var(--ink); text-align:left; } .trs .x-faqplus{ position:relative; width:16px; height:16px; flex:none; } .trs .x-faqplus::before,.trs .x-faqplus::after{ content:""; position:absolute; background:var(--blue); border-radius:2px; } .trs .x-faqplus::before{ left:0; top:7px; width:16px; height:2px; } .trs .x-faqplus::after{ left:7px; top:0; width:2px; height:16px; transition:transform .2s; } .trs .x-faqitem.open .x-faqplus::after{ transform:scaleY(0); } .trs .x-faqa{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .24s ease; } .trs .x-faqitem.open .x-faqa{ grid-template-rows:1fr; } .trs .x-faqa-in{ overflow:hidden; } .trs .x-faqa p{ margin:0; padding:0 20px 18px; color:var(--soft); font-size:15px; line-height:1.6; } .trs .x-team{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .trs .x-tm{ background:#fff; border:2px solid var(--line); border-radius:var(--r); padding:28px; text-align:center; } .trs .x-av{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center; margin:0 auto 14px; font-family:var(--fg-head,'Baloo 2',sans-serif); font-weight:700; font-size:22px; color:#fff; background:var(--blue); } .trs .x-av[data-i="1"]{ background:#27b083; } .trs .x-av[data-i="2"]{ background:#f0954b; } .trs .x-av[data-i="3"]{ background:#5b8dff; } .trs .x-tm b{ font-family:var(--fg-head,'Baloo 2',sans-serif); font-size:18px; color:var(--ink); display:block; } .trs .x-role{ font-size:13px; color:var(--blue-d); font-weight:700; display:block; margin:2px 0 10px; } .trs .x-tm p{ color:var(--soft); font-size:14.5px; } .trs .x-sup{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } .trs .x-sup-card{ background:#fff; border:2px solid var(--line); border-radius:var(--r); padding:30px; } .trs section.x-tint .x-sup-card{ border-color:#fff; } .trs .x-sup-top{ display:flex; align-items:center; gap:15px; margin-bottom:16px; } .trs .x-sup-ic{ width:60px; height:60px; flex:none; border-radius:18px; background:var(--sky); color:var(--blue-d); display:grid; place-items:center; } .trs .x-sup-card:nth-child(2) .x-sup-ic{ background:var(--mint); color:#1f9b73; } .trs .x-sup-ht{ display:flex; flex-direction:column; gap:3px; } .trs .x-sup-ht h3{ font-size:22px; color:var(--ink); line-height:1.12; } .trs .x-sup-tag{ font-family:var(--fg-head,'Baloo 2',sans-serif); font-weight:600; font-size:13.5px; color:var(--blue-d); } .trs .x-sup-card:nth-child(2) .x-sup-tag{ color:#1f9b73; } .trs .x-sup-body{ color:var(--soft); font-size:15.5px; margin-bottom:18px; } .trs .x-sup-points{ list-style:none; display:flex; flex-direction:column; gap:11px; } .trs .x-sup-points li{ display:flex; gap:11px; align-items:flex-start; font-size:15px; color:var(--ink); } .trs .x-sup-points .ico{ color:#1c9d5e; flex:none; margin-top:3px; } @media(max-width:760px){ .trs .x-sup{ grid-template-columns:1fr; } } .trs .x-sup-where{ position:relative; overflow:hidden; margin-top:24px; border-radius:var(--r); padding:34px 36px; background:linear-gradient(150deg,var(--blue),var(--blue-d)); color:#fff; } .trs .x-sup-where-bg{ position:absolute; left:18px; bottom:-46px; color:#fff; opacity:.065; transform:rotate(-5deg); transform-origin:bottom left; line-height:0; pointer-events:none; z-index:0; } .trs .x-sup-where-grid{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:34px; align-items:start; } .trs .x-sup-where-intro h3{ color:#fff; font-size:24px; line-height:1.14; } .trs .x-sup-where-intro p{ color:rgba(255,255,255,.9); font-size:15.5px; margin-top:10px; } .trs .x-sup-checker{ background:#fff; border-radius:18px; padding:22px; transition:background-color .45s ease; box-shadow:0 22px 46px -28px rgba(0,40,70,.5); } .trs .x-sup-checker.is-onsite{ background:var(--mint); } .trs .x-sup-checker.is-remote{ background:var(--sky-2); } .trs .x-sup-checker.is-invalid{ background:#fff4e6; } @media(max-width:760px){ .trs .x-sup-where{ padding:26px 22px; } .trs .x-sup-where-grid{ grid-template-columns:minmax(0,1fr); gap:22px; } .trs .x-sup-where-bg{ display:none; } } .trs .x-trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; } .trs .x-tb{ display:inline-flex; align-items:center; gap:9px; background:#fff; border:2px solid var(--line); border-radius:999px; padding:11px 18px; font-family:var(--fg-head,'Baloo 2',sans-serif); font-weight:600; font-size:15px; color:var(--ink); } .trs .x-tb .ico{ color:var(--blue-d); } .trs .x-plat{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:26px; padding-top:24px; border-top:1px solid var(--line); } .trs .x-plat-label{ font-size:14px; color:var(--soft); font-weight:600; } .trs .x-plat-list{ display:flex; gap:10px; flex-wrap:wrap; } .trs .x-pl{ font-family:var(--fg-head,'Baloo 2',sans-serif); font-weight:600; font-size:15px; color:var(--ink); background:var(--sky-2); border-radius:10px; padding:8px 14px; } @media(max-width:880px){ .trs .x-tgrid,.trs .x-steps,.trs .x-team{ grid-template-columns:1fr; } } `; document.head.appendChild(s); })(); // Highlight *asterisk-wrapped* spans in the brand blue. function softAccent(text) { return String(text == null ? "" : text).split(/(\*[^*\n]+\*)/g).map((chunk, i) => /^\*[^*\n]+\*$/.test(chunk) ? {chunk.slice(1, -1)} : {chunk}); } const I = (name, size, sw) => window.TRIcon(name, { size: size || 20, sw: sw || 2.2, className: "ico" }); const wrap = (theme, children, extra) => (
{children}
); // ── NAV ─────────────────────────────────────────────────────────── function SoftNav({ content, theme }) { const [menu, setMenu] = useSoftState(false); const links = content.links || []; return wrap(theme, (
TechReady {content.cta}
{links.map((l, i) => setMenu(false)}>{l.label})} setMenu(false)}>{content.cta}
)); } // ── HERO ────────────────────────────────────────────────────────── function SoftHero({ content }) { const [open, setOpen] = useSoftState(false); useSoftEffect(() => { const onKey = (e) => { if (e.key === "Escape") setOpen(false); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, []); const bubbleClass = ["", "alt", "alt2"]; return wrap(null, (
{content.eyebrow ? {content.eyebrow} : null}

{softAccent(content.headline)}

{content.lead ?

{content.lead}

: null}
{(content.bubbles || []).map((b, i) => (
{I(b.icon, 20, 2.2)}
{b.title}{b.sub}
))} {(content.technologies || []).length > 0 && ( )}
{content.techHeading || "Everything we help with"}
{(content.technologies || []).map((t, i) => ( {I(t.icon, 17, 2)}{t.label} ))}
{I("phoneCall")}{content.primaryCta} {content.secondaryCta}
{(content.features || []).length > 0 && (
{content.featuresLabel ? {content.featuresLabel} : null} {content.features.map((f, i) => {I(f.icon, 20, 2.4)}{f.label})}
)}
)); } // ── HELP ────────────────────────────────────────────────────────── function SoftHelp({ content }) { return wrap(null, (
{content.eyebrow ? {content.eyebrow} : null}

{content.heading}

{content.sub ?

{content.sub}

: null}
{(content.cards || []).map((c, i) => (
{I(c.icon, 38, 2.2)}

{c.title}

{c.body}

))}
)); } // ── WHY ─────────────────────────────────────────────────────────── function SoftWhy({ content }) { return wrap(null, (
{content.bgIcon ? : null}
{content.eyebrow ? {content.eyebrow} : null}

{content.heading}

{content.lead ?

{content.lead}

: null} {(content.credentials || []).length > 0 && (
{content.credentials.map((c, i) => ( {I(c.icon, 17, 2.2)}{c.label} ))}
)}
{(content.rows || []).map((r, i) => (
{I(r.icon, 27, 2.2)}

{r.title}

{r.body}

))}
)); } // ── AREA ────────────────────────────────────────────────────────── function SoftArea({ content }) { const [pc, setPc] = useSoftState(""); const [res, setRes] = useSoftState(null); const approved = (content.approvedPostcodes || []).map((p) => String(p).trim()); const check = (e) => { e.preventDefault(); const v = pc.trim(); if (!/^\d{3,4}$/.test(v)) { setRes("invalid"); return; } setRes(approved.indexOf(v) >= 0 ? "onsite" : "remote"); }; return wrap(null, (
{content.eyebrow ? {content.eyebrow} : null}

{content.heading}

{content.body ?

{content.body}

: null} {content.note ?
{content.note}
: null} {(content.checkHeading || (content.approvedPostcodes || []).length > 0) && (
{content.checkHeading ?
{content.checkHeading}
: null}
{ setPc(e.target.value.replace(/\D/g, "").slice(0, 4)); setRes(null); }} />
{res === "invalid" &&
Please enter a valid 4-digit postcode.
} {res === "onsite" && (
{I("home", 16, 2.2)}On-site visits {I("laptop", 16, 2.2)}Remote support
{content.onsiteMsg ?

{content.onsiteMsg}

: null}
)} {res === "remote" && (
{I("laptop", 16, 2.2)}Remote support
{content.remoteMsg ?

{content.remoteMsg}

: null} {content.outsideNote ?

{content.outsideNote}

: null}
)}
)}
)); } // ── PRICING ─────────────────────────────────────────────────────── function SoftPricing({ content }) { return wrap(null, (
{content.eyebrow ? {content.eyebrow} : null}

{content.heading}

{(content.badges || []).length > 0 && (
{content.badges.map((b, i) => {I(b.icon, 18, 2.2)}{b.label})}
)}
{(content.plans || []).map((p, i) => (
{p.featured === "yes" && p.tag ? {p.tag} : null}

{I(p.icon, 24, 2.2)}{p.title}

Weekdays

First hour{p.weekdayHour}
Each extra 30 min{p.weekdayHalf}

Weekends & public holidays

First hour{p.weekendHour}
Each extra 30 min{p.weekendHalf}
{p.note ?

{p.note}

: null}
))}
)); } // ── FINAL CTA ───────────────────────────────────────────────────── function SoftFinalCta({ content }) { return wrap(null, (

{content.heading}

{content.body ?

{content.body}

: null}
{I("phoneCall")}{content.primaryCta} {content.secondaryCta}
)); } // ── CONTACT ─────────────────────────────────────────────────────── function SoftContact({ content }) { const [sent, setSent] = useSoftState(false); return wrap(null, (
{content.eyebrow ? {content.eyebrow} : null}

{content.heading}

{content.body ?

{content.body}

: null} {(content.methods || []).map((m, i) => (
{I(m.icon, 20, 2.2)}
{m.label}{(m.value||'').indexOf('@')>=0 ? window.TR_ObfEmail(m.value) : /call|phone|mobile|tel/i.test(m.label||'') ? window.TR_ObfPhone(m.value) : m.value}
))}
{React.createElement(window.TRContactForm, { content })}
)); } // ── FOOTER ──────────────────────────────────────────────────────── function SoftFooter({ content }) { return wrap(null, ( )); } window.CMS.defineSkin("soft", { label: "Soft & Rounded", components: { nav: SoftNav, hero: SoftHero, help: SoftHelp, why: SoftWhy, pricing: SoftPricing, finalcta: SoftFinalCta, contact: SoftContact, footer: SoftFooter, testimonials: (p) => wrap(null, React.createElement(window.TRTestimonials, p)), process: (p) => wrap(null, React.createElement(window.TRProcess, p)), support: (p) => wrap(null, React.createElement(window.TRSupport, p)), faq: (p) => wrap(null, React.createElement(window.TRFaq, p)), about: (p) => wrap(null, React.createElement(window.TRAbout, p)), }, });