/* SeekRankTech v5.2 — main.css — Full class-mismatch & animation fix */ /* ════════════════════════════════════════════ DESIGN TOKENS ════════════════════════════════════════════ */ :root { --void: #020608; --ink: #050D10; --surface: #080F14; --surface2: #0C1820; --card: #101E28; --card2: #152330; --card-h: #1A2D3C; --teal: #22A99E; --teal-dk: #0A6E69; --teal-lt: rgba(34,169,158,.10); --teal-glow: rgba(34,169,158,.28); --teal-b: rgba(34,169,158,.20); --cyan: #00E5FF; --cyan-lt: rgba(0,229,255,.08); --cyan-glow: rgba(0,229,255,.22); --primary: #22A99E; --primary-dk: #0A6E69; --accent: #00E5FF; --jade: #10D97C; --jade-lt: rgba(16,217,124,.10); --amber: #F5A623; --rose: #F04E8C; --text: #EBF4F5; --text2: #7DA8B0; --text3: #4A7580; --muted: #2C4D58; --border: rgba(34,169,158,.07); --border2: rgba(34,169,158,.14); --border3: rgba(34,169,158,.30); --grad-brand: linear-gradient(90deg,var(--teal) 0%,var(--cyan) 100%); --grad-dark: linear-gradient(135deg,var(--teal-dk) 0%,var(--teal) 100%); --grad-text: linear-gradient(135deg,#fff 0%,var(--text2) 100%); --sh-xl: 0 40px 100px rgba(0,0,0,.80); --sh-lg: 0 24px 64px rgba(0,0,0,.65); --sh-md: 0 12px 36px rgba(0,0,0,.48); --sh-sm: 0 4px 16px rgba(0,0,0,.32); --sh-teal: 0 8px 32px rgba(34,169,158,.24); --sh-cyan: 0 8px 32px rgba(0,229,255,.18); /* BUG-003 FIX: both canonical and alias names */ --r-xl: 24px; --radius-xl: 24px; --r: 16px; --radius: 16px; --r-sm: 10px; --radius-sm: 10px; --r-xs: 6px; --radius-xs: 6px; --r-pill: 50px; --font-h: 'Space Grotesk',-apple-system,sans-serif; --font-b: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif; --font-mono: 'JetBrains Mono','Fira Code',monospace; --ease: cubic-bezier(.4,0,.2,1); --ease-out: cubic-bezier(0,0,.2,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --fast: 160ms; --base: 260ms; --slow: 480ms; --max-w: 1320px; --max-c: 1100px; --max-n: 860px; --px: 40px; --header-h: 72px; } /* ════════════════════════════════════════════ RESET ════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{font-size:16px;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--teal) var(--surface2);overflow-x:hidden} body{font-family:var(--font-b);background:var(--surface);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-wrap:break-word;word-break:break-word} a{color:var(--teal);text-decoration:none;transition:color var(--fast) var(--ease)} a:hover{color:var(--cyan)} img{display:block;max-width:100%;height:auto} button,input,textarea,select{font-family:inherit;font-size:inherit;border:none;background:none;outline:none} ul,ol{list-style:none} ::selection{background:var(--teal);color:#000} :focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:var(--r-xs)} /* ── Scrollbar ── */ ::-webkit-scrollbar{width:5px;height:5px} ::-webkit-scrollbar-track{background:var(--surface2)} ::-webkit-scrollbar-thumb{background:var(--teal);border-radius:3px} /* ── Accessibility ── */ .skip-link{position:absolute;top:-100%;left:16px;background:var(--teal);color:#000;padding:8px 16px;border-radius:var(--r-xs);font-weight:700;font-size:14px;z-index:9999;transition:top var(--fast)} .skip-link:focus{top:16px} .screen-reader-text{clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap} /* ════════════════════════════════════════════ CONTAINERS ════════════════════════════════════════════ */ .srt-wrap{max-width:var(--max-w);margin-inline:auto;padding-inline:var(--px);width:100%;min-width:0} .srt-wrap-md{max-width:var(--max-c);margin-inline:auto;padding-inline:var(--px);width:100%;min-width:0} .srt-wrap-sm{max-width:var(--max-n);margin-inline:auto;padding-inline:var(--px);width:100%;min-width:0} /* ════════════════════════════════════════════ TYPOGRAPHY ════════════════════════════════════════════ */ h1,h2,h3,h4,h5,h6{font-family:var(--font-h);color:var(--text);line-height:1.15;font-weight:700;letter-spacing:-.01em} h1{font-size:clamp(30px,5vw,60px);font-weight:800} h2{font-size:clamp(24px,3.5vw,46px);font-weight:800} h3{font-size:clamp(18px,2.5vw,28px);font-weight:700} h4{font-size:clamp(15px,2vw,20px);font-weight:600} h5{font-size:15px;font-weight:600} h6{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text2)} p{line-height:1.72;color:var(--text2)} .srt-display{font-family:var(--font-h);font-size:clamp(44px,8vw,80px);font-weight:800;line-height:1.04;letter-spacing:-.025em} .srt-lead{font-size:17px;color:var(--text2);line-height:1.74} .srt-mono{font-family:var(--font-mono)} .srt-grad{background:var(--grad-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} /* ════════════════════════════════════════════ BUTTONS ════════════════════════════════════════════ */ .btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 24px;font-family:var(--font-b);font-size:14px;font-weight:600;line-height:1;border-radius:var(--r-pill);cursor:pointer;transition:all var(--base) var(--ease);white-space:nowrap;text-decoration:none;border:1.5px solid transparent} .btn:active{transform:translateY(1px) !important} .btn-primary{background:var(--teal);color:#000;border-color:var(--teal);box-shadow:var(--sh-teal)} .btn-primary:hover{background:var(--cyan);color:#000;border-color:var(--cyan);transform:translateY(-2px);box-shadow:var(--sh-cyan)} .btn-outline{background:transparent;color:var(--teal);border-color:var(--teal)} .btn-outline:hover{background:var(--teal-lt);color:var(--teal)} .btn-ghost{background:transparent;color:var(--text2);border-color:var(--border2)} .btn-ghost:hover{background:var(--teal-lt);color:var(--teal);border-color:var(--teal-b)} .btn-white{background:#fff;color:var(--teal-dk);border-color:#fff;font-weight:700;box-shadow:0 4px 24px rgba(0,0,0,.18)} .btn-white:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,.28);color:var(--teal-dk)} .btn-outline-ghost{background:transparent;color:var(--text2);border-color:var(--border2)} .btn-outline-ghost:hover{background:var(--card);color:var(--text);border-color:var(--border3)} .btn-outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)} .btn-outline-white:hover{background:rgba(255,255,255,.12);color:#fff} .btn-lg{padding:14px 32px;font-size:15px} .btn-sm{padding:8px 18px;font-size:13px} .btn-block{display:flex;width:100%;text-align:center;justify-content:center} .btn-icon{width:42px;height:42px;padding:0;border-radius:50%} /* ════════════════════════════════════════════ KEYFRAMES ════════════════════════════════════════════ */ @keyframes srt-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} @keyframes srt-bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}} @keyframes srt-blink{0%,100%{opacity:1}50%{opacity:0}} @keyframes srt-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} @keyframes srt-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @keyframes srt-pulse-ring{0%{transform:scale(.9);opacity:.8}70%,100%{transform:scale(1.6);opacity:0}} @keyframes srt-glow{0%,100%{box-shadow:0 0 20px var(--teal-glow)}50%{box-shadow:0 0 50px var(--teal-glow),0 0 80px var(--cyan-glow)}} @keyframes srt-fade-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}} @keyframes srt-slide-up{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}} @keyframes srt-down{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}} @keyframes srt-shimmer{0%{background-position:-200% center}100%{background-position:200% center}} @keyframes srt-ripple{to{transform:scale(4);opacity:0}} /* ── Scroll-triggered reveal ── */ .reveal{opacity:0;transform:translateY(26px);transition:opacity var(--slow) var(--ease-out),transform var(--slow) var(--ease-out)} .reveal.up{transform:translateY(26px)} .reveal.left{transform:translateX(-40px)} .reveal.right{transform:translateX(40px)} .reveal.scale{transform:scale(.93)} .reveal.visible{opacity:1;transform:none} .d1{transition-delay:.1s}.d2{transition-delay:.18s}.d3{transition-delay:.26s} .d4{transition-delay:.34s}.d5{transition-delay:.42s}.d6{transition-delay:.50s} /* ════════════════════════════════════════════ PRELOADER ════════════════════════════════════════════ */ #srt-preloader{position:fixed;inset:0;background:var(--void);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;transition:opacity var(--slow),visibility var(--slow)} #srt-preloader.done{opacity:0;visibility:hidden;pointer-events:none} .srt-pre-icon{width:60px;height:60px;background:var(--grad-brand);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:#000;position:relative} .srt-pre-ring{position:absolute;inset:-8px;border:2px solid transparent;border-top-color:var(--teal);border-radius:50%;animation:srt-spin 1s linear infinite} .srt-pre-bar{width:150px;height:2px;background:var(--border2);border-radius:2px;overflow:hidden} .srt-pre-bar-fill{height:100%;background:var(--grad-brand);border-radius:2px;width:60%;background-size:200%;animation:srt-shimmer 1.4s ease-in-out infinite} /* ── Reading progress ── */ #srt-progress{position:fixed;top:0;left:0;height:2px;background:var(--grad-brand);z-index:600;width:0;transition:width .1s linear} /* ════════════════════════════════════════════ HEADER ════════════════════════════════════════════ */ #srt-header{position:sticky;top:0;z-index:500;background:rgba(5,13,16,.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);transition:background var(--base),box-shadow var(--base)} #srt-header.scrolled{background:rgba(5,13,16,.98);box-shadow:0 4px 40px rgba(0,0,0,.5)} .srt-header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--header-h);max-width:var(--max-w);margin-inline:auto;padding-inline:var(--px)} /* Logo */ .srt-logo,.srt-logo-icon-only{display:inline-flex;align-items:center;flex-shrink:0;text-decoration:none;justify-self:start} .srt-logo-img,.srt-logo img,.srt-logo .custom-logo-link img{height:50px;width:auto;display:block;filter:drop-shadow(0 0 12px rgba(34,169,158,.25)) brightness(1.08);transition:filter var(--base),transform var(--base)} .srt-logo:hover .srt-logo-img,.srt-logo:hover img{filter:drop-shadow(0 0 22px rgba(34,169,158,.45)) brightness(1.15);transform:scale(1.02)} .srt-logo-icon-box{width:38px;height:38px;background:var(--grad-brand);border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;color:#000} /* Nav */ .srt-nav{display:flex;align-items:center;justify-content:center} .srt-nav ul{display:flex;align-items:center;gap:2px;padding:0;margin:0} .srt-nav ul li a{display:block;padding:8px 13px;font-size:13.5px;font-weight:500;color:var(--text2);border-radius:var(--r-xs);transition:color var(--fast),background var(--fast);position:relative} .srt-nav ul li a::after{content:'';position:absolute;bottom:4px;left:13px;right:13px;height:1.5px;background:var(--teal);transform:scaleX(0);transition:transform var(--base) var(--ease-spring);border-radius:2px} .srt-nav ul li a:hover{color:var(--text)} .srt-nav ul li a:hover::after,.srt-nav ul li.current-menu-item>a::after{transform:scaleX(1)} .srt-nav ul li.current-menu-item>a{color:var(--teal)} /* Nav actions */ .srt-nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;justify-self:end} /* Mobile toggle */ .srt-mobile-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-xs);color:var(--text2);cursor:pointer;background:var(--card);border:1px solid var(--border);transition:all var(--fast);flex-shrink:0} .srt-mobile-toggle:hover{background:var(--card-h);color:var(--teal);border-color:var(--teal-b)} /* Mobile nav */ .srt-mobile-nav{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;background:rgba(5,13,16,.98);backdrop-filter:blur(20px);z-index:490;padding:28px 20px 40px;overflow-y:auto;transform:translateX(100%);transition:transform var(--slow) var(--ease);border-top:1px solid var(--border)} .srt-mobile-nav.open{transform:translateX(0)} .srt-mobile-nav ul{padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:4px} .srt-mobile-nav ul li a{display:block;padding:14px 16px;font-size:16px;font-weight:500;color:var(--text2);border-radius:var(--r-sm);transition:all var(--fast);border:1px solid transparent} .srt-mobile-nav ul li a:hover,.srt-mobile-nav ul li.current-menu-item>a{background:var(--teal-lt);color:var(--teal);border-color:var(--teal-b)} .srt-mobile-actions{padding-top:16px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px} /* Admin bar offsets */ .admin-bar #srt-header{top:32px} .admin-bar .srt-mobile-nav{top:calc(var(--header-h) + 32px)} @media(max-width:782px){ .admin-bar #srt-header{top:46px} .admin-bar .srt-mobile-nav{top:calc(64px + 46px)} } /* ════════════════════════════════════════════ HERO ★ FLAGSHIP SECTION ════════════════════════════════════════════ */ .srt-hero{position:relative;overflow:hidden;background:var(--void);padding:110px var(--px) 100px;display:flex;flex-direction:column;align-items:center;min-height:680px;justify-content:center;text-align:center;contain:layout paint} /* BG grid */ .srt-hero-grid{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(34,169,158,.13) 1px,transparent 1px);background-size:30px 30px;mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 30%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 30%,transparent 100%);pointer-events:none} /* Orbs */ .srt-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(90px);animation:srt-float linear infinite;max-width:100vw} .srt-orb-1{width:min(600px,140vw);height:min(600px,140vw);background:radial-gradient(circle,rgba(34,169,158,.36) 0%,transparent 70%);top:-140px;left:-100px;opacity:.3;animation-duration:18s} .srt-orb-2{width:min(480px,110vw);height:min(480px,110vw);background:radial-gradient(circle,rgba(0,229,255,.26) 0%,transparent 70%);top:-60px;right:-80px;opacity:.2;animation-duration:24s;animation-delay:-5s} .srt-orb-3{width:min(380px,90vw);height:min(380px,90vw);background:radial-gradient(circle,rgba(10,110,105,.4) 0%,transparent 70%);bottom:-60px;left:50%;transform:translateX(-50%);opacity:.28;animation-duration:16s;animation-delay:-8s} /* Float cards */ .srt-hero-fc{position:absolute;z-index:2;background:rgba(16,30,40,.90);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border2);border-radius:var(--r-sm);padding:14px 18px;box-shadow:var(--sh-md);display:flex;align-items:center;gap:12px;pointer-events:none;max-width:calc(50vw - 40px)} .srt-hero-fc svg{color:var(--teal);flex-shrink:0} .srt-hero-fc-val{font-family:var(--font-mono);font-size:clamp(16px,2vw,20px);font-weight:700;color:var(--teal);display:block;line-height:1.2} .srt-hero-fc-lbl{font-size:11px;color:var(--text2);font-weight:500} .srt-fc-left{left:clamp(12px,3vw,36px);top:38%;animation:srt-float 8s ease-in-out infinite;animation-delay:-2s} .srt-fc-right{right:clamp(12px,3vw,36px);top:54%;animation:srt-float 10s ease-in-out infinite;animation-delay:-5s} /* Hero content */ .srt-hero-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;max-width:980px;width:100%} .srt-hero-badge{display:inline-flex;align-items:center;gap:7px;background:var(--cyan-lt);border:1px solid rgba(0,229,255,.22);color:var(--cyan);font-size:10.5px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;padding:8px 18px;border-radius:var(--r-pill);margin-bottom:28px;animation:srt-down var(--slow) var(--ease-out) both} .srt-hero-title{font-family:var(--font-h);font-size:clamp(36px,5.8vw,78px);font-weight:800;line-height:1.05;letter-spacing:-.025em;max-width:940px;margin-bottom:24px;background:var(--grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .srt-hero-title .hl{background:var(--grad-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .srt-hero-desc{font-size:17px;color:var(--text2);max-width:560px;line-height:1.76;margin-bottom:36px} .srt-hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:48px} /* Trust row */ .srt-hero-trust{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center} .srt-av-stack{display:flex;align-items:center} .srt-av{width:34px;height:34px;border-radius:50%;background:var(--grad-brand);color:#000;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2.5px solid var(--void);margin-left:-8px;font-family:var(--font-h);flex-shrink:0} .srt-av:first-child{margin-left:0} .srt-hero-rating{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text)} .srt-stars{display:flex;gap:2px;color:var(--amber)} .srt-trust-pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--text2)} .srt-trust-pill svg{color:var(--teal);flex-shrink:0} .srt-trust-sep{width:1px;height:22px;background:var(--border2)} /* Typewriter */ .srt-tw::after{content:'|';color:var(--cyan);animation:srt-blink .85s ease-in-out infinite;font-weight:300;margin-left:2px} /* Scroll hint */ .srt-scroll-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);font-size:10px;letter-spacing:.1em;text-transform:uppercase;animation:srt-bob 2.5s ease-in-out infinite} /* ════════════════════════════════════════════ TRUST MARQUEE STRIP ════════════════════════════════════════════ */ .srt-trust-strip{background:var(--ink);border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden;position:relative;padding:16px 0} .srt-trust-strip::before,.srt-trust-strip::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none} .srt-trust-strip::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)} .srt-trust-strip::after{right:0;background:linear-gradient(-90deg,var(--ink),transparent)} .srt-trust-track{display:flex;align-items:center;gap:56px;width:max-content;animation:srt-marquee 30s linear infinite} .srt-trust-track:hover{animation-play-state:paused} .srt-trust-pill-item{display:inline-flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-pill);padding:7px 16px;white-space:nowrap;font-size:12.5px;font-weight:500;color:var(--text2);transition:all var(--fast)} .srt-trust-pill-item svg{color:var(--teal);flex-shrink:0} .srt-trust-pill-item:hover{border-color:var(--teal-b);color:var(--text);background:var(--card-h)} /* ════════════════════════════════════════════ STATS GRID ════════════════════════════════════════════ */ .srt-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--card)} .srt-stat-box{padding:40px 24px;text-align:center;border-right:1px solid var(--border);position:relative;transition:background var(--base),box-shadow var(--base);min-width:0} .srt-stat-box:last-child{border-right:none} .srt-stat-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad-brand);opacity:0;transition:opacity var(--base)} .srt-stat-box:hover{background:var(--teal-lt)} .srt-stat-box:hover::before{opacity:1} .srt-stat-num{display:flex;align-items:baseline;justify-content:center;gap:2px;margin-bottom:8px;flex-wrap:wrap} .srt-stat-val{font-family:var(--font-mono);font-size:clamp(28px,3.5vw,52px);font-weight:800;background:var(--grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1} .srt-stat-sfx{font-family:var(--font-mono);font-size:clamp(18px,2vw,30px);font-weight:700;background:var(--grad-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1} .srt-stat-lbl{font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.08em;text-transform:uppercase} /* ════════════════════════════════════════════ SECTIONS ════════════════════════════════════════════ */ .srt-sec{padding:88px var(--px)} .srt-sec-alt{padding:88px var(--px);background:var(--surface2)} .srt-sec-dark{padding:88px var(--px);background:var(--ink)} .srt-sec-void{padding:88px var(--px);background:var(--void)} .srt-sec-inner{max-width:var(--max-c);margin-inline:auto} .srt-sec-inner-wide{max-width:var(--max-w);margin-inline:auto} /* Section header */ .srt-sec-head{text-align:center;margin-bottom:56px} .srt-sec-head-left{text-align:left;margin-bottom:40px} .srt-kicker{display:inline-flex;align-items:center;gap:10px;font-size:10.5px;font-weight:700;color:var(--teal);letter-spacing:2.5px;text-transform:uppercase;margin-bottom:14px} .srt-kicker::before,.srt-kicker::after{content:'';display:block;width:22px;height:1.5px;background:var(--teal);border-radius:2px} .srt-kicker-left::before,.srt-kicker-left::after{display:none} .srt-sec-title{font-family:var(--font-h);font-size:clamp(24px,3.5vw,46px);font-weight:800;line-height:1.12;color:var(--text);margin-bottom:14px;letter-spacing:-.02em} .srt-sec-title .hl{background:var(--grad-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .srt-sec-desc{font-size:15.5px;color:var(--text2);max-width:520px;margin-inline:auto;line-height:1.74} .srt-sec-head-left .srt-sec-desc{margin-inline:0} /* Divider */ .srt-divider{height:1px;background:linear-gradient(90deg,transparent,var(--teal),var(--cyan),var(--teal),transparent);border:none;opacity:.35;margin:0} /* ════════════════════════════════════════════ SERVICE CARDS ════════════════════════════════════════════ */ .srt-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .srt-svc-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:30px 26px;position:relative;transition:transform var(--base) var(--ease),border-color var(--base),box-shadow var(--base);overflow:hidden;min-width:0} .srt-svc-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-brand);opacity:0;transition:opacity var(--base)} .srt-svc-card:hover{transform:translateY(-8px);border-color:var(--teal-b);box-shadow:var(--sh-teal)} .srt-svc-card:hover::before{opacity:1} .srt-svc-icon{width:52px;height:52px;background:var(--teal-lt);border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--teal);margin-bottom:20px;transition:all var(--base) var(--ease-spring);flex-shrink:0} .srt-svc-card:hover .srt-svc-icon{background:var(--teal);color:#000;transform:scale(1.1) rotate(-4deg)} .srt-svc-card h3{font-size:18px;font-weight:700;margin-bottom:10px;color:var(--text)} .srt-svc-card p{font-size:14px;color:var(--text2);line-height:1.68;margin-bottom:18px} .srt-svc-tags{display:flex;flex-wrap:wrap;gap:7px} .srt-svc-tag{font-size:11px;font-weight:600;color:var(--text3);background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-xs);padding:3px 9px;overflow-wrap:break-word;word-break:break-word} .srt-svc-link{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--teal);margin-top:16px;transition:gap var(--fast),color var(--fast)} .srt-svc-link:hover{gap:9px;color:var(--cyan)} /* ════════════════════════════════════════════ WHY US ════════════════════════════════════════════ */ .srt-why-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .srt-why-list{display:flex;flex-direction:column;gap:12px;margin-top:28px} .srt-why-item{display:flex;align-items:flex-start;gap:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);padding:18px 20px;transition:transform var(--base),border-color var(--base),background var(--base);min-width:0} .srt-why-item:hover{transform:translateX(6px);border-color:var(--teal-b);background:var(--card-h)} .srt-why-ico{width:40px;height:40px;border-radius:var(--r-xs);background:var(--teal-lt);display:flex;align-items:center;justify-content:center;color:var(--teal);flex-shrink:0} .srt-why-item h4{font-size:14.5px;font-weight:700;margin-bottom:3px} .srt-why-item p{font-size:13.5px;color:var(--text2);margin:0} .srt-metric-panel{display:flex;flex-direction:column;gap:14px} .srt-metric-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:26px 22px;position:relative;overflow:hidden} .srt-metric-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad-brand)} .srt-metric-val{font-family:var(--font-mono);font-size:34px;font-weight:800;background:var(--grad-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px} .srt-metric-desc{font-size:13.5px;color:var(--text2)} /* ════════════════════════════════════════════ PROCESS ════════════════════════════════════════════ */ .srt-process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative} .srt-process-grid::before{content:'';position:absolute;top:29px;left:12.5%;right:12.5%;height:1px;background:linear-gradient(90deg,var(--teal),var(--cyan),var(--teal));opacity:.25;z-index:0} .srt-process-step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 18px;position:relative;z-index:1} .srt-process-num{width:58px;height:58px;border-radius:50%;background:var(--grad-dark);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:18px;font-weight:800;color:#000;margin-bottom:18px;flex-shrink:0;transition:transform var(--base) var(--ease-spring)} .srt-process-step:hover .srt-process-num{transform:scale(1.12)} .srt-process-step h4{font-size:15.5px;font-weight:700;margin-bottom:8px} .srt-process-step p{font-size:13.5px;color:var(--text2);line-height:1.6} /* ════════════════════════════════════════════ TESTIMONIALS ════════════════════════════════════════════ */ .srt-testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .srt-testi-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:18px;transition:transform var(--base),border-color var(--base),box-shadow var(--base)} .srt-testi-card:hover{transform:translateY(-6px);border-color:var(--teal-b);box-shadow:var(--sh-teal)} .srt-testi-stars{display:flex;gap:3px} .srt-testi-stars svg{color:var(--amber)} .srt-testi-quote{font-size:14.5px;color:var(--text2);line-height:1.74;flex:1;font-style:italic} .srt-testi-author{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--border)} .srt-testi-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-size:14px;font-weight:800;color:#000;flex-shrink:0;background:var(--grad-brand)} .srt-testi-name{font-size:13.5px;font-weight:700;color:var(--text)} .srt-testi-role{font-size:12px;color:var(--text3);margin-top:2px} .srt-testi-verified{font-size:11px;font-weight:600;color:var(--jade);display:flex;align-items:center;gap:4px;margin-top:4px} /* ════════════════════════════════════════════ CTA BANNER ════════════════════════════════════════════ */ .srt-cta-banner{position:relative;overflow:hidden;padding:80px var(--px);text-align:center;background:var(--grad-dark)} .srt-cta-banner::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(0,0,0,.12) 1px,transparent 1px);background-size:28px 28px;pointer-events:none} .srt-cta-inner{position:relative;z-index:1} .srt-cta-banner h2{color:#000;font-size:clamp(24px,4vw,44px);margin-bottom:14px} .srt-cta-banner p{color:rgba(0,0,0,.72);font-size:17px;max-width:540px;margin:0 auto 32px} .srt-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* ════════════════════════════════════════════ PAGE HERO ════════════════════════════════════════════ */ .srt-page-hero{padding:72px var(--px) 64px;text-align:center;background:var(--ink);border-bottom:1px solid var(--border);position:relative;overflow:hidden} .srt-page-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(34,169,158,.07) 1px,transparent 1px);background-size:28px 28px;pointer-events:none} .srt-page-hero>*{position:relative;z-index:1} .srt-page-hero .srt-badge-pill{margin-bottom:18px} .srt-page-hero h1{font-size:clamp(28px,4.5vw,56px);margin-bottom:14px} .srt-page-hero p{font-size:16.5px;color:var(--text2);max-width:520px;margin:0 auto 28px} .srt-page-hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* Badge pill */ .srt-badge-pill{display:inline-flex;align-items:center;gap:6px;background:var(--teal-lt);border:1px solid var(--teal-b);color:var(--teal);font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:6px 16px;border-radius:var(--r-pill)} /* ════════════════════════════════════════════ CONTACT PAGE ════════════════════════════════════════════ */ .srt-contact-info-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:44px} .srt-contact-info-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:26px 22px;display:flex;align-items:flex-start;gap:14px;transition:border-color var(--base)} .srt-contact-info-card:hover{border-color:var(--teal-b)} .srt-contact-ico{width:44px;height:44px;border-radius:var(--r-xs);background:var(--teal-lt);display:flex;align-items:center;justify-content:center;color:var(--teal);flex-shrink:0} .srt-contact-info-card h4{font-size:13.5px;font-weight:700;margin-bottom:4px;color:var(--text)} .srt-contact-info-card p,.srt-contact-info-card a{font-size:13px;color:var(--text2);margin:0} .srt-contact-info-card a{color:var(--teal);font-weight:600} .srt-contact-layout{display:grid;grid-template-columns:1.85fr 1fr;gap:28px;align-items:start} /* Form card */ .srt-form-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:36px;min-width:0} .srt-form-card h2{font-size:22px;margin-bottom:6px} .srt-form-card>.srt-form-card-desc{font-size:13.5px;color:var(--text2);margin-bottom:28px} /* Aside */ .srt-contact-aside{display:flex;flex-direction:column;gap:16px} .srt-aside-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:22px} .srt-aside-card h4{font-size:14px;font-weight:700;margin-bottom:14px;color:var(--text)} .srt-check-list{display:flex;flex-direction:column;gap:9px} .srt-check-item{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--text2)} .srt-check-item svg{color:var(--teal);flex-shrink:0;margin-top:1px} .srt-next-steps{display:flex;flex-direction:column;gap:10px} .srt-next-step{display:flex;align-items:flex-start;gap:10px} .srt-step-num{width:26px;height:26px;border-radius:50%;background:var(--grad-dark);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;font-weight:800;color:#000;flex-shrink:0;margin-top:2px} .srt-next-step p{font-size:13px;color:var(--text2);margin:0} /* ════════════════════════════════════════════ FORMS ════════════════════════════════════════════ */ .srt-form{display:flex;flex-direction:column;gap:18px} .srt-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .srt-form-group{display:flex;flex-direction:column;gap:6px} .srt-form-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .srt-form-input,.srt-form-select,.srt-form-textarea{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--border2);border-radius:var(--radius-xs);padding:12px 15px;font-size:14px;color:var(--text);font-family:var(--font-b);transition:border-color var(--fast),box-shadow var(--fast),background var(--fast)} .srt-form-input::placeholder,.srt-form-textarea::placeholder{color:var(--text3)} .srt-form-input:focus,.srt-form-select:focus,.srt-form-textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-lt);background:rgba(34,169,158,.04);outline:none} .srt-form-select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237DA8B0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px} .srt-form-select option{background:var(--card);color:var(--text)} .srt-form-textarea{resize:vertical;min-height:120px} .srt-form-group.error .srt-form-input,.srt-form-group.error .srt-form-textarea{border-color:var(--rose);box-shadow:0 0 0 3px rgba(240,78,140,.10)} .srt-form-group.valid .srt-form-input,.srt-form-group.valid .srt-form-textarea{border-color:var(--jade)} .srt-form-err{font-size:11.5px;color:var(--rose);display:none;margin-top:2px} .srt-form-group.error .srt-form-err{display:block} .srt-form-status{padding:13px 16px;border-radius:var(--r-xs);font-size:13.5px;font-weight:500;display:none} .srt-form-status.success{background:var(--jade-lt);border:1px solid rgba(16,217,124,.25);color:var(--jade);display:block} .srt-form-status.error{background:rgba(240,78,140,.08);border:1px solid rgba(240,78,140,.25);color:var(--rose);display:block} /* ════════════════════════════════════════════ ABOUT PAGE ════════════════════════════════════════════ */ .srt-about-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:56px;align-items:start} .srt-mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px} .srt-mini-stat{background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);padding:20px;text-align:center} .srt-mini-stat strong{display:block;font-family:var(--font-mono);font-size:28px;font-weight:800;background:var(--grad-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px} .srt-mini-stat span{font-size:12px;color:var(--text2);font-weight:500} .srt-values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .srt-value-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:30px 22px;text-align:center;transition:transform var(--base),border-color var(--base)} .srt-value-card:hover{transform:translateY(-6px);border-color:var(--teal-b)} .srt-value-ico{width:54px;height:54px;border-radius:var(--r-sm);background:var(--teal-lt);display:flex;align-items:center;justify-content:center;color:var(--teal);margin:0 auto 14px} .srt-value-card h4{font-size:15px;margin-bottom:8px} .srt-value-card p{font-size:13.5px;color:var(--text2);line-height:1.6} .srt-approach-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px} .srt-approach-step{} .srt-approach-num{font-family:var(--font-mono);font-size:44px;font-weight:800;background:var(--grad-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:10px} .srt-approach-step h4{font-size:16px;margin-bottom:7px} .srt-approach-step p{font-size:13.5px;color:var(--text2);line-height:1.6} .srt-team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .srt-team-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:26px 22px;text-align:center;transition:transform var(--base),border-color var(--base)} .srt-team-card:hover{transform:translateY(-6px);border-color:var(--teal-b)} .srt-team-av{width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-size:20px;font-weight:800;color:#000;margin:0 auto 14px;background:var(--grad-brand)} .srt-team-name{font-size:15px;font-weight:700;margin-bottom:4px} .srt-team-role{font-size:12px;color:var(--text3);margin-bottom:10px} .srt-team-bio{font-size:12.5px;color:var(--text2);line-height:1.6;margin-bottom:14px} .srt-team-socials{display:flex;gap:7px;justify-content:center} .srt-team-socials a{width:30px;height:30px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text2);transition:all var(--fast)} .srt-team-socials a:hover{background:var(--teal-lt);color:var(--teal);border-color:var(--teal-b)} /* ════════════════════════════════════════════ SERVICES PAGE ════════════════════════════════════════════ */ .srt-solutions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px} .srt-solution-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:32px 26px;position:relative;overflow:hidden;transition:transform var(--base),border-color var(--base),box-shadow var(--base)} .srt-solution-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-brand)} .srt-solution-card:hover{transform:translateY(-8px);border-color:var(--teal-b);box-shadow:var(--sh-teal)} .srt-solution-label{font-size:10.5px;font-weight:700;color:var(--teal);letter-spacing:2px;text-transform:uppercase;margin-bottom:10px} .srt-solution-card h3{font-size:20px;margin-bottom:10px} .srt-solution-card p{font-size:13.5px;color:var(--text2);line-height:1.68;margin-bottom:20px} .srt-solution-feats{display:flex;flex-direction:column;gap:8px} .srt-solution-feat{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2)} .srt-solution-feat svg{color:var(--jade);flex-shrink:0} /* ════════════════════════════════════════════ BLOG ════════════════════════════════════════════ */ .srt-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .srt-post-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:transform var(--base),border-color var(--base)} .srt-post-card:hover{transform:translateY(-6px);border-color:var(--teal-b)} .srt-post-thumb{overflow:hidden;aspect-ratio:16/9} .srt-post-thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--slow)} .srt-post-card:hover .srt-post-thumb img{transform:scale(1.04)} .srt-post-body{padding:22px} .srt-post-meta{display:flex;gap:12px;align-items:center;margin-bottom:10px;flex-wrap:wrap} .srt-post-cat{font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--teal);background:var(--teal-lt);border-radius:var(--r-xs);padding:3px 9px} .srt-post-date{font-size:12px;color:var(--text3)} .srt-post-title{font-size:17px;font-weight:700;line-height:1.3;margin-bottom:8px} .srt-post-title a{color:var(--text);transition:color var(--fast)} .srt-post-title a:hover{color:var(--teal)} .srt-post-excerpt{font-size:13.5px;color:var(--text2);line-height:1.62;margin-bottom:14px} .srt-post-read{font-size:13px;font-weight:600;color:var(--teal);display:inline-flex;align-items:center;gap:5px} .srt-post-read:hover{color:var(--cyan)} /* ════════════════════════════════════════════ SINGLE POST ════════════════════════════════════════════ */ .srt-post-layout{display:grid;grid-template-columns:1fr 320px;gap:44px;align-items:start} .srt-post-content{min-width:0} .srt-post-hero-img{border-radius:var(--r);overflow:hidden;margin-bottom:36px;aspect-ratio:16/7;background:var(--card)} .srt-post-hero-img img{width:100%;height:100%;object-fit:cover} .srt-post-body{font-size:16px;line-height:1.8;overflow-wrap:break-word;word-break:break-word} .srt-post-body h2{font-size:24px;font-weight:800;margin:36px 0 14px} .srt-post-body h3{font-size:19px;font-weight:700;margin:28px 0 10px} .srt-post-body p{margin-bottom:18px;color:var(--text2)} .srt-post-body ul,.srt-post-body ol{margin:18px 0;padding-left:22px} .srt-post-body ul{list-style:disc}.srt-post-body ol{list-style:decimal} .srt-post-body li{color:var(--text2);margin-bottom:7px} .srt-post-body a{color:var(--teal);text-decoration:underline;text-underline-offset:3px} .srt-post-body blockquote{border-left:3px solid var(--teal);padding:14px 22px;margin:26px 0;background:var(--teal-lt);border-radius:0 var(--r-xs) var(--r-xs) 0;font-style:italic;color:var(--text)} .srt-post-body code{font-family:var(--font-mono);font-size:.875em;background:var(--card2);border:1px solid var(--border);padding:2px 6px;border-radius:var(--r-xs);color:var(--cyan)} .srt-post-body pre{background:var(--card2);border:1px solid var(--border);border-radius:var(--r-sm);padding:18px;overflow-x:auto;margin:22px 0;max-width:100%} .srt-post-body pre code{background:none;border:none;padding:0} .srt-sidebar-widget{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:22px;margin-bottom:18px} .srt-sidebar-widget h5{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text2);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border)} .srt-post-sidebar{position:sticky;top:calc(var(--header-h) + 22px)} /* ════════════════════════════════════════════ FAQ ACCORDION ════════════════════════════════════════════ */ .srt-faq-list{display:flex;flex-direction:column;gap:10px;max-width:740px;margin-inline:auto} .srt-faq-item{background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden} .srt-faq-item.open{border-color:var(--teal-b)} .srt-faq-q{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 20px;font-size:14.5px;font-weight:600;color:var(--text);cursor:pointer;background:none;border:none;border-radius:0;transition:color var(--fast)} .srt-faq-q:hover{color:var(--teal)} .srt-faq-q svg{flex-shrink:0;color:var(--text3);transition:transform var(--base) var(--ease-spring)} .srt-faq-item.open .srt-faq-q svg{transform:rotate(180deg);color:var(--teal)} .srt-faq-a{max-height:0;overflow:hidden;transition:max-height var(--slow) var(--ease)} .srt-faq-item.open .srt-faq-a{max-height:400px} .srt-faq-a-inner{padding:0 20px 18px;font-size:14px;color:var(--text2);line-height:1.72} /* ════════════════════════════════════════════ CASE STUDIES ════════════════════════════════════════════ */ .srt-case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .srt-case-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:28px 24px;transition:transform var(--base),border-color var(--base),box-shadow var(--base)} .srt-case-card:hover{transform:translateY(-6px);border-color:var(--teal-b);box-shadow:var(--sh-teal)} .srt-case-industry{font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--teal);background:var(--teal-lt);border-radius:var(--r-xs);padding:4px 11px;display:inline-block;margin-bottom:14px} .srt-case-card h3{font-size:18px;margin-bottom:7px} .srt-case-card p{font-size:13.5px;color:var(--text2);margin-bottom:18px} .srt-case-metrics{display:flex;gap:14px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--border)} .srt-case-metric strong{display:block;font-family:var(--font-mono);font-size:17px;font-weight:800;color:var(--teal)} .srt-case-metric span{font-size:11px;color:var(--text3)} /* ════════════════════════════════════════════ LEGAL PAGES ════════════════════════════════════════════ */ .srt-legal-layout{display:grid;grid-template-columns:260px 1fr;gap:44px;align-items:start;max-width:var(--max-w);margin-inline:auto;padding:60px var(--px)} .srt-legal-toc{position:sticky;top:calc(var(--header-h) + 20px);background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:22px;min-width:0} .srt-legal-content{min-width:0} .srt-legal-toc h5{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:14px} .srt-legal-toc-links{display:flex;flex-direction:column;gap:4px} .srt-legal-toc-links a{font-size:13px;color:var(--text2);padding:6px 10px;border-radius:var(--r-xs);display:block;transition:all var(--fast)} .srt-legal-toc-links a:hover,.srt-legal-toc-links a.active{color:var(--teal);background:var(--teal-lt)} .srt-legal-content{} .srt-legal-hero{padding:50px 0 36px;border-bottom:1px solid var(--border);margin-bottom:36px} .srt-legal-hero h1{font-size:36px;margin-bottom:6px} .srt-legal-updated{font-size:12.5px;color:var(--text3)} .srt-legal-body h2{font-size:20px;font-weight:800;margin:44px 0 12px;padding-top:22px;border-top:1px solid var(--border);color:var(--text)} .srt-legal-body h3{font-size:16px;font-weight:700;margin:24px 0 8px;color:var(--text)} .srt-legal-body p{font-size:14.5px;color:var(--text2);line-height:1.78;margin-bottom:14px} .srt-legal-body ul,.srt-legal-body ol{margin:14px 0;padding-left:22px} .srt-legal-body ul{list-style:disc}.srt-legal-body ol{list-style:decimal} .srt-legal-body li{color:var(--text2);font-size:14.5px;margin-bottom:7px;line-height:1.7} .srt-legal-body a{color:var(--teal);text-decoration:underline;text-underline-offset:3px} /* ════════════════════════════════════════════ UTILITY PAGES ════════════════════════════════════════════ */ /* 404 */ .srt-404-wrap{min-height:calc(100vh - var(--header-h));display:flex;align-items:center;justify-content:center;text-align:center;padding:80px var(--px)} .srt-404-num{font-family:var(--font-mono);font-size:clamp(72px,14vw,150px);font-weight:800;background:var(--grad-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:10px} /* Thank you */ .srt-ty-wrap{min-height:calc(100vh - var(--header-h));display:flex;align-items:center;justify-content:center;text-align:center;padding:80px var(--px)} .srt-ty-inner{max-width:580px} .srt-ty-icon{width:76px;height:76px;border-radius:50%;background:var(--jade-lt);border:2px solid rgba(16,217,124,.25);display:flex;align-items:center;justify-content:center;color:var(--jade);margin:0 auto 24px} .srt-ty-steps{text-align:left;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:26px;margin:0 auto 32px;max-width:480px} .srt-ty-step{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)} .srt-ty-step:last-child{border-bottom:none} .srt-ty-step-n{width:26px;height:26px;border-radius:50%;background:var(--grad-dark);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;font-weight:800;color:#000;flex-shrink:0} .srt-ty-step p{font-size:13px;color:var(--text2);margin:0;padding-top:3px} /* Coming soon */ .srt-cs-page{min-height:100vh;background:var(--void);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px var(--px);gap:28px} .srt-cd-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:center} .srt-cd-box{background:var(--card);border:1px solid var(--border2);border-radius:var(--r);padding:18px 24px;min-width:80px;text-align:center} .srt-cd-num{font-family:var(--font-mono);font-size:clamp(32px,6vw,58px);font-weight:800;color:var(--teal);line-height:1;display:block} .srt-cd-unit{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-top:5px} .srt-cd-sep{font-family:var(--font-mono);font-size:36px;color:var(--teal);opacity:.5;animation:srt-blink 1s ease-in-out infinite} .srt-cs-notify{display:flex;gap:0;border:1px solid var(--border2);border-radius:var(--r-pill);overflow:hidden;background:var(--card);max-width:380px;width:100%} .srt-cs-notify input{flex:1;padding:12px 18px;background:none;color:var(--text);font-size:13.5px} .srt-cs-notify button{padding:12px 20px;background:var(--teal);color:#000;font-weight:700;cursor:pointer;transition:background var(--fast);white-space:nowrap;font-size:13.5px} .srt-cs-notify button:hover{background:var(--cyan)} /* ════════════════════════════════════════════ FOOTER ════════════════════════════════════════════ */ #srt-footer{background:var(--ink);border-top:1px solid var(--border);padding-top:64px} .srt-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:44px;padding-bottom:52px;border-bottom:1px solid var(--border);max-width:var(--max-w);margin-inline:auto;padding-inline:var(--px)} .srt-footer-logo-wrap{display:inline-flex;margin-bottom:18px} .srt-footer-logo-wrap img{height:44px;width:auto;filter:drop-shadow(0 0 10px rgba(34,169,158,.22)) brightness(1.08)} .srt-footer-logo-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;background:var(--grad-brand);border-radius:var(--r-xs);color:#000;margin-bottom:18px} .srt-footer-desc{font-size:13.5px;color:var(--text2);line-height:1.72;max-width:270px;margin-bottom:22px} .srt-footer-socials{display:flex;gap:9px;flex-wrap:wrap} .srt-social-btn{width:36px;height:36px;border-radius:50%;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text2);transition:all var(--fast)} .srt-social-btn:hover{background:var(--teal-lt);color:var(--teal);border-color:var(--teal-b)} .srt-footer-col h6{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:18px} .srt-footer-links{display:flex;flex-direction:column;gap:9px} .srt-footer-links a{font-size:13.5px;color:var(--text2);transition:color var(--fast)} .srt-footer-links a:hover{color:var(--teal)} .srt-footer-nl{display:flex;gap:0;margin-top:14px;border:1px solid var(--border2);border-radius:var(--r-pill);overflow:hidden;background:var(--card);min-width:0} .srt-footer-nl input{flex:1;padding:10px 16px;background:none;color:var(--text);font-size:12.5px;min-width:0} .srt-footer-nl input::placeholder{color:var(--text3)} .srt-footer-nl button{padding:10px 16px;background:var(--teal);color:#000;font-size:12.5px;font-weight:700;cursor:pointer;transition:background var(--fast);white-space:nowrap} .srt-footer-nl button:hover{background:var(--cyan)} .srt-footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px var(--px);font-size:13px;color:var(--text3);flex-wrap:wrap;max-width:var(--max-w);margin-inline:auto} .srt-footer-legal{display:flex;gap:18px;flex-wrap:wrap} .srt-footer-legal a{color:var(--text3);font-size:13px;transition:color var(--fast)} .srt-footer-legal a:hover{color:var(--teal)} /* ════════════════════════════════════════════ FLOATING WIDGETS ════════════════════════════════════════════ */ /* WhatsApp */ #srt-wa{position:fixed;bottom:88px;right:22px;z-index:600;width:50px;height:50px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 20px rgba(37,211,102,.4);cursor:pointer;transition:transform var(--base) var(--ease-spring),box-shadow var(--base);text-decoration:none} #srt-wa::before{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid #25D366;opacity:.4;animation:srt-pulse-ring 2.5s ease-out infinite} #srt-wa:hover{transform:scale(1.1);box-shadow:0 8px 32px rgba(37,211,102,.5)} /* Scroll top */ #srt-scroll-top{position:fixed;bottom:22px;right:22px;z-index:600;width:46px;height:46px;border-radius:50%;background:var(--teal);color:#000;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;box-shadow:var(--sh-teal);transform:translateY(120%);opacity:0;transition:transform var(--base) var(--ease-spring),opacity var(--base),background var(--fast);pointer-events:none} #srt-scroll-top.visible{transform:translateY(0);opacity:1;pointer-events:auto} #srt-scroll-top:hover{transform:translateY(-3px);background:var(--cyan)} /* Cookie bar */ #srt-cookie{position:fixed;bottom:0;left:0;right:0;background:rgba(5,13,16,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--border2);padding:14px var(--px);z-index:700;display:flex;align-items:center;gap:18px;flex-wrap:wrap;transform:translateY(100%);transition:transform var(--slow) var(--ease)} #srt-cookie.visible{transform:translateY(0)} .srt-cookie-text{font-size:13.5px;color:var(--text2);flex:1;min-width:180px} .srt-cookie-text a{color:var(--teal)} .srt-cookie-acts{display:flex;gap:9px;align-items:center;flex-shrink:0;flex-wrap:wrap} #srt-cookie-ok{background:var(--teal);color:#000;border:none;border-radius:var(--r-pill);padding:9px 20px;font-size:13px;font-weight:700;cursor:pointer;transition:background var(--fast)} #srt-cookie-ok:hover{background:var(--cyan)} #srt-cookie-no{background:transparent;color:var(--text3);border:1px solid var(--border2);border-radius:var(--r-pill);padding:8px 15px;font-size:13px;font-weight:500;cursor:pointer;transition:all var(--fast)} #srt-cookie-no:hover{color:var(--text);border-color:var(--border3)} /* ════════════════════════════════════════════ CATEGORY PILLS ════════════════════════════════════════════ */ .srt-cat-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px;justify-content:center} .srt-cat-pill{padding:7px 18px;border-radius:var(--r-pill);border:1px solid var(--border2);background:transparent;font-size:13px;font-weight:500;color:var(--text2);cursor:pointer;transition:all var(--fast)} .srt-cat-pill:hover,.srt-cat-pill.active{background:var(--teal-lt);border-color:var(--teal-b);color:var(--teal)} /* ════════════════════════════════════════════ PAGINATION ════════════════════════════════════════════ */ .srt-pagination{display:flex;gap:5px;justify-content:center;padding:36px 0 0} .srt-pagination a,.srt-pagination span{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--r-xs);background:var(--card);border:1px solid var(--border);font-size:13.5px;font-weight:500;color:var(--text2);transition:all var(--fast)} .srt-pagination a:hover{border-color:var(--teal-b);color:var(--teal);background:var(--teal-lt)} .srt-pagination .current{background:var(--teal);color:#000;border-color:var(--teal);font-weight:700} /* Breadcrumb */ .srt-breadcrumb{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--text3);flex-wrap:wrap;margin-bottom:20px} .srt-breadcrumb a{color:var(--text3);transition:color var(--fast)} .srt-breadcrumb a:hover{color:var(--teal)} .srt-breadcrumb .current{color:var(--text2)} .srt-bc-sep{display:flex;align-items:center;color:var(--muted)} /* ════════════════════════════════════════════ LOGO (BUG-007 + visibility on dark bg) ════════════════════════════════════════════ */ .srt-logo-img,.srt-logo img,.srt-logo .custom-logo-link img{height:50px;width:auto;display:block;filter:drop-shadow(0 0 14px rgba(34,169,158,.30)) brightness(1.10);transition:filter var(--base),transform var(--base);image-rendering:-webkit-optimize-contrast} .srt-logo:hover .srt-logo-img,.srt-logo:hover img,.srt-logo:hover .custom-logo-link img{filter:drop-shadow(0 0 24px rgba(34,169,158,.50)) brightness(1.18);transform:scale(1.02)} .srt-logo .custom-logo-link{display:inline-flex;align-items:center} .srt-footer-logo-wrap a{display:inline-flex} /* ════════════════════════════════════════════ PRINT ════════════════════════════════════════════ */ @media print{ #srt-header,#srt-footer,#srt-preloader,#srt-scroll-top,#srt-wa,#srt-cookie,#srt-progress{display:none !important} body{background:#fff;color:#000} a::after{content:" (" attr(href) ")";font-size:10px;color:#555} h1,h2,h3,h4,h5,h6{color:#000;-webkit-text-fill-color:#000;background:none} .srt-grad,.srt-hero-title,.srt-stat-val,.srt-stat-sfx{-webkit-text-fill-color:#000;background:none} } /* ════════════════════════════════════════════ REDUCED MOTION ════════════════════════════════════════════ */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important} .srt-orb,.srt-trust-track,.srt-scroll-hint,.srt-tw::after{animation:none} } /* ════════════════════════════════════════════ RESPONSIVE BREAKPOINTS — v5.1 REVISED Agents 1-7 consolidated pass ════════════════════════════════════════════ */ /* ── 1280px: reduce horizontal padding ── */ @media(max-width:1280px){ :root{--px:32px} } /* ── 1100px: collapse multi-col to simpler layouts ── */ @media(max-width:1100px){ /* Float cards off on smaller desktops */ .srt-fc-left,.srt-fc-right{display:none} /* Footer: brand spans full row, then 2 link cols */ .srt-footer-grid{grid-template-columns:1fr 1fr} .srt-footer-grid .srt-footer-brand{grid-column:1/-1} .srt-footer-desc{max-width:none} /* Why-us section: stack */ .srt-why-grid{grid-template-columns:1fr;gap:36px} /* Legal: kill sidebar, stack TOC above content */ .srt-legal-layout{grid-template-columns:1fr;padding:40px var(--px)} .srt-legal-toc{position:static} /* About: stack */ .srt-about-grid{grid-template-columns:1fr;gap:36px} } /* ── 1024px: tablet — shift most 3+ col grids to 2 col ── */ @media(max-width:1024px){ /* Header: switch to 2-col grid (logo | toggle+actions) */ .srt-header-inner{grid-template-columns:auto 1fr} .srt-nav{display:none} .srt-nav-actions{justify-self:end} .srt-mobile-toggle{display:flex} /* Grids */ .srt-svc-grid{grid-template-columns:repeat(2,1fr)} .srt-solutions-grid{grid-template-columns:repeat(2,1fr)} .srt-testi-grid{grid-template-columns:repeat(2,1fr)} .srt-blog-grid{grid-template-columns:repeat(2,1fr)} .srt-case-grid{grid-template-columns:repeat(2,1fr)} .srt-team-grid{grid-template-columns:repeat(3,1fr)} .srt-values-grid{grid-template-columns:repeat(2,1fr)} .srt-approach-grid{grid-template-columns:repeat(2,1fr)} /* Stats: 2×2 with corrected borders */ .srt-stats-grid{grid-template-columns:repeat(2,1fr)} .srt-stat-box:nth-child(2){border-right:none} .srt-stat-box:nth-child(3){border-right:1px solid var(--border);border-top:1px solid var(--border)} .srt-stat-box:nth-child(4){border-right:none;border-top:1px solid var(--border)} /* Process: 2 wide */ .srt-process-grid{grid-template-columns:repeat(2,1fr);gap:28px} .srt-process-grid::before{display:none} /* Contact */ .srt-contact-info-row{grid-template-columns:repeat(2,1fr)} .srt-contact-layout{grid-template-columns:1fr} /* Single post: drop sidebar below */ .srt-post-layout{grid-template-columns:1fr} .srt-post-sidebar{position:static} /* Section padding */ .srt-sec,.srt-sec-alt,.srt-sec-dark,.srt-sec-void{padding:72px var(--px)} } /* ── 768px: mobile — single column, full toggler ── */ @media(max-width:768px){ :root{--px:20px;--header-h:64px} /* Header: 2-col grid (logo | actions) */ .srt-header-inner{grid-template-columns:auto 1fr} .srt-nav{display:none} .srt-nav-actions{justify-self:end;gap:8px} .srt-nav-actions .btn:not(.srt-mobile-toggle){display:none} .srt-mobile-toggle{display:flex} /* Hero */ .srt-hero{padding:80px var(--px) 70px;min-height:auto} .srt-hero-badge{font-size:9.5px;letter-spacing:1.5px} .srt-hero-desc{font-size:15px;max-width:100%} .srt-hero-btns{flex-direction:column;align-items:center;gap:10px} .srt-hero-btns .btn{width:100%;max-width:300px;justify-content:center} .srt-hero-trust{gap:10px;flex-wrap:wrap} .srt-trust-sep{display:none} /* Sections */ .srt-sec,.srt-sec-alt,.srt-sec-dark,.srt-sec-void{padding:56px var(--px)} .srt-sec-head{margin-bottom:36px} .srt-section,.srt-section-alt{padding:56px var(--px)} /* Grids → 1 col */ .srt-svc-grid{grid-template-columns:1fr} .srt-solutions-grid{grid-template-columns:1fr} .srt-testi-grid{grid-template-columns:1fr} .srt-blog-grid{grid-template-columns:1fr} .srt-case-grid{grid-template-columns:1fr} .srt-team-grid{grid-template-columns:repeat(2,1fr)} .srt-values-grid{grid-template-columns:repeat(2,1fr)} .srt-approach-grid{grid-template-columns:1fr} .srt-process-grid{grid-template-columns:repeat(2,1fr);gap:18px} .srt-mini-stats{grid-template-columns:1fr 1fr} /* Stats: 2×2 on mobile */ .srt-stats-grid{grid-template-columns:repeat(2,1fr)} .srt-stat-box{border-right:none;border-bottom:1px solid var(--border)} .srt-stat-box:nth-child(odd){border-right:1px solid var(--border)} .srt-stat-box:last-child{border-bottom:none} /* Contact */ .srt-contact-info-row{grid-template-columns:1fr} .srt-contact-layout{grid-template-columns:1fr} /* Legal */ .srt-legal-layout{grid-template-columns:1fr;padding:32px var(--px)} .srt-legal-toc{position:static} /* About */ .srt-about-grid{grid-template-columns:1fr;gap:28px} .srt-why-grid{grid-template-columns:1fr;gap:24px} /* Footer */ .srt-footer-grid{grid-template-columns:1fr;gap:28px} .srt-footer-grid .srt-footer-brand{grid-column:auto} .srt-footer-bottom{flex-direction:column;text-align:center;gap:10px;padding:16px var(--px)} .srt-footer-legal{justify-content:center;gap:12px} .srt-footer-desc{max-width:none} /* Footer newsletter: prevent overflow */ .srt-footer-nl{flex-direction:row;border-radius:var(--r-pill)} .srt-footer-nl input{min-width:0;flex:1} /* Cookie consent */ #srt-cookie{flex-direction:column;align-items:flex-start;padding:16px var(--px)} .srt-cookie-acts{width:100%;flex-direction:row} #srt-cookie-ok{flex:1;text-align:center} /* Forms */ .srt-form-row{grid-template-columns:1fr} .srt-form-card{padding:24px 20px} /* CTA areas */ .srt-cta-btns{flex-direction:column;align-items:center;gap:10px} .srt-cta-btns .btn{width:100%;max-width:280px;justify-content:center} .srt-page-hero-btns{flex-direction:column;align-items:center;gap:10px} .srt-page-hero-btns .btn{width:100%;max-width:280px;justify-content:center} /* Kicker lines: hide decorative lines, too wide on small */ .srt-kicker::before,.srt-kicker::after{display:none} /* Trust row hero */ .srt-hero-trust{flex-direction:row;flex-wrap:wrap;justify-content:center} } /* ── 600px: cards and process adjustments ── */ @media(max-width:600px){ .srt-process-grid{grid-template-columns:1fr} .srt-team-grid{grid-template-columns:repeat(2,1fr)} .srt-page-hero{padding:52px var(--px) 44px} } /* ── 480px: small phones ── */ @media(max-width:480px){ :root{--px:16px} .srt-hero-title{font-size:clamp(24px,8vw,36px)} .srt-hero-desc{font-size:14.5px} .srt-hero{padding:72px var(--px) 60px} /* All to single column */ .srt-stats-grid{grid-template-columns:1fr} .srt-stat-box{border-right:none;border-bottom:1px solid var(--border)} .srt-stat-box:last-child{border-bottom:none} .srt-stat-box:nth-child(odd){border-right:none} .srt-values-grid{grid-template-columns:1fr} .srt-team-grid{grid-template-columns:1fr} .srt-mini-stats{grid-template-columns:1fr 1fr} .srt-about-grid,.srt-contact-layout,.srt-legal-layout{grid-template-columns:1fr} .srt-hero-trust{flex-direction:column;gap:8px;align-items:center} /* Section padding reduced */ .srt-sec,.srt-sec-alt,.srt-sec-dark,.srt-sec-void{padding:44px var(--px)} .srt-section,.srt-section-alt{padding:44px var(--px)} /* Form card tighter */ .srt-form-card{padding:20px 16px} /* CTA banner */ .srt-cta-banner{padding:56px var(--px)} /* Page hero */ .srt-page-hero{padding:44px var(--px) 36px} .srt-page-hero p{font-size:15px} /* Process single col */ .srt-process-grid{grid-template-columns:1fr} /* Countdown */ .srt-cd-box{min-width:60px;padding:12px 14px} .srt-cs-form{flex-direction:column;border-radius:var(--r);overflow:visible} .srt-cs-form input[type="email"]{border-radius:var(--r-sm);border:1px solid var(--border2)} .srt-cs-form button{border-radius:var(--r-sm);width:100%} /* Footer newsletter: stack on tiny screens */ .srt-footer-nl{flex-direction:column;border-radius:var(--r);overflow:visible} .srt-footer-nl input{border-radius:var(--r-sm) var(--r-sm) 0 0;border:1px solid var(--border2);padding:11px 16px} .srt-footer-nl button{border-radius:0 0 var(--r-sm) var(--r-sm);padding:11px 16px;text-align:center} /* Btn sizes on mobile */ .btn.btn-lg,.srt-btn-primary.srt-btn-lg{padding:13px 22px;font-size:14px} } /* ── 360px: very small phones ── */ @media(max-width:360px){ :root{--px:12px} .srt-hero-title{font-size:22px} .srt-stat-val{font-size:26px} .srt-404-num{font-size:64px} .srt-mini-stats{grid-template-columns:1fr} .srt-hero{padding:60px var(--px) 50px} .srt-sec,.srt-sec-alt,.srt-sec-dark,.srt-sec-void{padding:36px var(--px)} } /* ════════════════════════════════════════════ V5 COMPATIBILITY ALIASES (fixes page-branding, page-careers, index, single, page, search, 404, sidebar classes) ════════════════════════════════════════════ */ /* Section wrappers used in v5.0 pages */ .srt-section { padding: 88px var(--px); } .srt-section-inner { max-width: var(--max-c); margin-inline: auto; } .srt-section-alt { padding: 88px var(--px); background: var(--surface2); } /* Button aliases used in page-branding, page-careers, page-thankyou */ .srt-btn-primary { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 24px; font-family: var(--font-b); font-size: 14px; font-weight: 600; line-height: 1; border-radius: var(--r-pill); cursor: pointer; transition: all var(--base) var(--ease); white-space: nowrap; text-decoration: none; border: 1.5px solid var(--teal); background: var(--teal); color: #000; box-shadow: var(--sh-teal); } .srt-btn-primary:hover { background: var(--cyan); border-color: var(--cyan); color: #000; transform: translateY(-2px); box-shadow: var(--sh-cyan); } .srt-btn-primary:active { transform: translateY(1px); } .srt-btn-lg { padding: 14px 32px; font-size: 15px; } .srt-btn-outline-ghost { background: transparent; color: var(--text2); border: 1.5px solid var(--border2); display: inline-flex; align-items: center; gap: 8px; padding: 11px 24px; font-size: 14px; font-weight: 600; border-radius: var(--r-pill); text-decoration: none; transition: all var(--base) var(--ease); } .srt-btn-outline-ghost:hover { background: var(--card); color: var(--text); border-color: var(--border3); } .srt-btn-white { background: #fff; color: var(--teal-dk); border: 1.5px solid #fff; display: inline-flex; align-items: center; gap: 8px; padding: 11px 24px; font-size: 14px; font-weight: 700; border-radius: var(--r-pill); text-decoration: none; box-shadow: 0 4px 24px rgba(0,0,0,.18); transition: all var(--base) var(--ease); } .srt-btn-white:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,.28); } .srt-btn-ghost { background: transparent; color: var(--text2); border: 1.5px solid var(--border2); display: inline-flex; align-items: center; gap: 8px; padding: 11px 24px; font-size: 14px; font-weight: 600; border-radius: var(--r-pill); text-decoration: none; transition: all var(--base) var(--ease); } .srt-btn-ghost:hover { background: var(--teal-lt); color: var(--teal); border-color: var(--teal-b); } /* Text gradient alias used in page-branding, page-careers hero */ .srt-gradient-text { background: var(--grad-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Badge variant without -pill suffix (page-branding, page-careers, page-case-studies) */ .srt-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--teal-lt); border: 1px solid var(--teal-b); color: var(--teal); font-size: 10.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 6px 16px; border-radius: var(--r-pill); margin-bottom: 18px; } /* Kicker alias used in page-branding.php */ .srt-sec-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 10.5px; font-weight: 700; color: var(--teal); letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 14px; } /* Icon wrapper aliases (page-branding vs helpers) */ .srt-value-icon, .srt-svc-icon-wrap { width: 54px; height: 54px; border-radius: var(--r-sm); background: var(--teal-lt); display: flex; align-items: center; justify-content: center; color: var(--teal); margin-bottom: 14px; } /* Fade-in / stagger classes (page-branding, page-careers) */ .srt-fade-in { opacity: 0; transform: translateY(22px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); } .srt-fade-in.visible { opacity: 1; transform: none; } /* Trigger immediately if IntersectionObserver unavailable */ @media (prefers-reduced-motion: reduce) { .srt-fade-in { opacity: 1; transform: none; transition: none; } } .srt-stagger-1 { transition-delay: 0ms; } .srt-stagger-2 { transition-delay: 80ms; } .srt-stagger-3 { transition-delay: 160ms; } .srt-stagger-4 { transition-delay: 240ms; } /* Typewriter cursor on .srt-typewriter (hero.php) */ .srt-typewriter::after { content: '|'; color: var(--cyan); animation: srt-blink .85s ease-in-out infinite; font-weight: 300; margin-left: 2px; } @media (prefers-reduced-motion: reduce) { .srt-typewriter::after { animation: none; } } /* Responsive overrides for alias sections — merged into main breakpoints above */ /* ════════════════════════════════════════════ MISSING CLASS COMPLETIONS — v5.1 PATCH ════════════════════════════════════════════ */ /* Legal TOC nav — pages use srt-legal-toc-list, CSS only had srt-legal-toc-links */ .srt-legal-toc-list { display:flex;flex-direction:column;gap:4px; } .srt-legal-toc-list a { font-size:13px;color:var(--text2);padding:6px 10px;border-radius:var(--r-xs);display:block;transition:all var(--fast); } .srt-legal-toc-list a:hover, .srt-legal-toc-list a.active { color:var(--teal);background:var(--teal-lt); } /* Footer brand column — responsive breakpoint rule existed but selector missed */ .srt-footer-brand { display:flex;flex-direction:column; } /* Coming Soon page */ .srt-cs-wrap { min-height: 100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:60px var(--px); background:var(--void); gap:24px; } .srt-cs-logo { margin-bottom:8px; } .srt-cs-logo .srt-logo-icon { width:52px;height:52px;background:var(--grad-brand);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:#000;margin:0 auto; } .srt-cs-title { font-family:var(--font-h);font-size:clamp(32px,5vw,64px);font-weight:800;line-height:1.1;color:var(--text);letter-spacing:-.02em;max-width:680px; } .srt-cs-desc { font-size:16px;color:var(--text2);max-width:480px;line-height:1.7; } .srt-cs-form { display:flex;gap:0;border:1px solid var(--border2);border-radius:var(--r-pill);overflow:hidden;background:var(--card);max-width:420px;width:100%;position:relative; } .srt-cs-form input[type="email"] { flex:1;padding:13px 20px;background:none;color:var(--text);font-size:14px;border:none;outline:none; } .srt-cs-form input::placeholder { color:var(--text3); } .srt-cs-form button { padding:12px 22px;background:var(--teal);color:#000;font-size:13.5px;font-weight:700;cursor:pointer;transition:background var(--fast);white-space:nowrap;border:none; } .srt-cs-form button:hover { background:var(--cyan); } .srt-cs-socials { display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px; } /* Countdown — coming soon & any countdown element */ .srt-countdown { display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center; } .srt-cd-sep { font-family:var(--font-mono);font-size:clamp(28px,5vw,48px);font-weight:800;color:var(--teal-b);line-height:1; } .srt-cd-unit { font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-top:6px; } /* srt-svc-link inside service cards */ .srt-svc-link { display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--teal);margin-top:auto;padding-top:14px;transition:gap var(--fast),color var(--fast);text-decoration:none; } .srt-svc-link:hover { gap:10px;color:var(--cyan); } /* srt-svc-icon (singular, used in page-seo.php service articles) */ .srt-svc-icon { width:48px;height:48px;border-radius:var(--r-sm);background:var(--teal-lt);display:flex;align-items:center;justify-content:center;color:var(--teal);margin-bottom:14px;flex-shrink:0; } /* Hero result paragraph (single-srt_case_study) */ .srt-hero-result { font-size:18px;color:var(--teal);font-weight:600;margin-top:12px; } /* Team socials gap */ .srt-team-socials { display:flex;gap:8px;margin-top:10px;justify-content:center; } .srt-team-socials a { width:32px;height:32px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text2);transition:all var(--fast); } .srt-team-socials a:hover { background:var(--teal-lt);color:var(--teal);border-color:var(--teal-b); } /* testi-verified badge */ .srt-testi-verified { display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--jade);font-weight:600;margin-top:4px; } /* Metric panel (front-page why us section) */ .srt-metric-panel { display:grid;grid-template-columns:1fr 1fr;gap:14px;align-self:center; } .srt-metric-card { background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:22px;transition:border-color var(--base),transform var(--base); } .srt-metric-card:hover { border-color:var(--teal-b);transform:translateY(-4px); } .srt-metric-val { font-family:var(--font-mono);font-size:clamp(26px,3vw,38px);font-weight:800;background:var(--grad-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:8px; } .srt-metric-desc { font-size:13px;color:var(--text2);line-height:1.55; } /* Why grid */ .srt-why-grid { display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center; } .srt-why-list { display:flex;flex-direction:column;gap:18px;margin-top:28px; } .srt-why-item { display:flex;align-items:flex-start;gap:16px;padding:16px;border-radius:var(--r-sm);transition:background var(--fast); } .srt-why-item:hover { background:var(--card); } .srt-why-ico { width:40px;height:40px;border-radius:var(--r-xs);background:var(--teal-lt);display:flex;align-items:center;justify-content:center;color:var(--teal);flex-shrink:0; } .srt-why-item h4 { font-size:15px;margin-bottom:5px; } .srt-why-item p { font-size:13.5px;color:var(--text2);line-height:1.6; } /* Trust strip */ .srt-trust-strip { overflow:hidden;background:var(--surface2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:14px 0; } .srt-trust-track { display:flex;gap:0;animation:srt-marquee 28s linear infinite;width:max-content; } .srt-trust-pill-item { display:inline-flex;align-items:center;gap:8px;padding:0 28px;font-size:12.5px;font-weight:600;color:var(--text2);white-space:nowrap; } .srt-trust-pill-item svg { color:var(--teal); } /* Process grid — used on front-page and page-about */ .srt-process-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:24px; } .srt-process-step { background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:28px 20px;position:relative;overflow:hidden;transition:border-color var(--base),transform var(--base); } .srt-process-step:hover { border-color:var(--teal-b);transform:translateY(-4px); } .srt-process-num { font-family:var(--font-mono);font-size:42px;font-weight:800;background:var(--grad-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:14px; } .srt-process-step h4 { font-size:15.5px;font-weight:700;margin-bottom:8px; } .srt-process-step p { font-size:13.5px;color:var(--text2);line-height:1.6; } /* Stat boxes */ .srt-stats-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:18px; } .srt-stat-box { background:rgba(255,255,255,.03);border:1px solid var(--border2);border-radius:var(--r);padding:28px 20px;text-align:center;transition:border-color var(--base); } .srt-stat-box:hover { border-color:var(--teal-b); } .srt-stat-num { display:flex;align-items:baseline;justify-content:center;gap:2px;margin-bottom:8px; } .srt-stat-val { font-family:var(--font-mono);font-size:clamp(32px,4vw,52px);font-weight:800;background:var(--grad-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1; } .srt-stat-sfx { font-family:var(--font-mono);font-size:clamp(20px,2.5vw,30px);font-weight:700;color:var(--teal);line-height:1; } .srt-stat-lbl { font-size:12.5px;color:var(--text2);font-weight:500;letter-spacing:.04em; } /* srt-sec-head alignment */ .srt-sec-head { text-align:center;margin-bottom:56px; } .srt-sec-head-left { text-align:left;margin-bottom:40px; } /* Testi grid */ .srt-testi-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:18px; } .srt-testi-card { background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px 24px;display:flex;flex-direction:column;gap:16px;transition:border-color var(--base),transform var(--base),box-shadow var(--base); } .srt-testi-card:hover { border-color:var(--teal-b);transform:translateY(-6px);box-shadow:var(--sh-teal); } .srt-testi-stars { display:flex;gap:2px;color:var(--amber); } .srt-testi-quote { font-size:14px;color:var(--text2);line-height:1.75;font-style:italic;flex:1; } .srt-testi-author { display:flex;align-items:center;gap:12px;margin-top:auto; } .srt-testi-av { width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-size:14px;font-weight:800;color:#000;flex-shrink:0; } .srt-testi-name { font-size:14px;font-weight:700; } .srt-testi-role { font-size:12px;color:var(--text3); } /* Page hero buttons */ .srt-page-hero-btns { display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px; } /* Metric panel responsive — unique rules not covered above */ @media (max-width: 1100px) { .srt-metric-panel { grid-template-columns:repeat(4,1fr); } } @media (max-width: 768px) { .srt-metric-panel { grid-template-columns:repeat(2,1fr); } .srt-cs-form { flex-direction:column;border-radius:var(--r);overflow:visible; } .srt-cs-form input[type="email"]{ border-radius:var(--r-sm);border:1px solid var(--border2);padding:13px 16px; } .srt-cs-form button { border-radius:var(--r-sm);width:100%; } } @media (max-width: 480px) { .srt-metric-panel { grid-template-columns:1fr 1fr; } .srt-countdown { gap:6px; } } /* ════════════════════════════════════════════ V5.2 COMPREHENSIVE FIX PATCH Resolves all hero.php→CSS class mismatches, missing aliases, animation bugs, and layout issues found in full theme audit. ════════════════════════════════════════════ */ /* ── FIX 1: Hero orb aliases (hero.php uses srt-hero-orb-* but CSS defined srt-orb-*) ── */ .srt-hero-orb { position:absolute;border-radius:50%;pointer-events:none; filter:blur(90px);animation:srt-float linear infinite;max-width:100vw; } .srt-hero-orb-1 { width:min(600px,140vw);height:min(600px,140vw); background:radial-gradient(circle,rgba(34,169,158,.36) 0%,transparent 70%); top:-140px;left:-100px;opacity:.3;animation-duration:18s; } .srt-hero-orb-2 { width:min(480px,110vw);height:min(480px,110vw); background:radial-gradient(circle,rgba(0,229,255,.26) 0%,transparent 70%); top:-60px;right:-80px;opacity:.2;animation-duration:24s;animation-delay:-5s; } /* FIX 1b: Orb-3 centering bug — srt-float overwrites translateX(-50%). Custom keyframe preserves both axes. */ @keyframes srt-orb3-bob { 0%,100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(-14px); } } .srt-hero-orb-3 { width:min(380px,90vw);height:min(380px,90vw); background:radial-gradient(circle,rgba(10,110,105,.4) 0%,transparent 70%); bottom:-60px;left:50%;opacity:.28; animation:srt-orb3-bob 16s ease-in-out infinite;animation-delay:-8s; } /* Also fix the original .srt-orb-3 for backwards compat */ .srt-orb-3 { animation-name:srt-orb3-bob !important; } /* ── FIX 2: Hero float card aliases ── */ .srt-hero-float-card { position:absolute;z-index:2; background:rgba(16,30,40,.90); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border:1px solid var(--border2);border-radius:var(--r-sm); padding:14px 18px;box-shadow:var(--sh-md); display:flex;align-items:center;gap:12px; pointer-events:none;max-width:calc(50vw - 40px); } .srt-hero-float-card svg { color:var(--teal);flex-shrink:0; } .srt-hero-float-left { left:clamp(12px,3vw,36px);top:38%;animation:srt-float 8s ease-in-out infinite;animation-delay:-2s; } .srt-hero-float-right { right:clamp(12px,3vw,36px);top:54%;animation:srt-float 10s ease-in-out infinite;animation-delay:-5s; } .srt-hfc-value { font-family:var(--font-mono);font-size:clamp(16px,2vw,20px); font-weight:700;color:var(--teal);display:block;line-height:1.2; } .srt-hfc-label { font-size:11px;color:var(--text2);font-weight:500; } /* ── FIX 3: Hero avatar stack aliases ── */ .srt-hero-avatars { display:flex;align-items:center; } .srt-hero-av { width:34px;height:34px;border-radius:50%; background:var(--grad-brand);color:#000; font-size:11px;font-weight:800; display:flex;align-items:center;justify-content:center; border:2.5px solid var(--void);margin-left:-8px; font-family:var(--font-h);flex-shrink:0; } .srt-hero-av:first-child { margin-left:0; } /* ── FIX 4: Hero stars alias ── */ .srt-hero-stars { display:flex;gap:2px;color:var(--amber); } .srt-hero-rating { display:flex;align-items:center;gap:6px; font-size:13px;font-weight:600;color:var(--text); } /* ── FIX 5: Hero trust item alias (hero.php uses srt-trust-item, CSS has srt-trust-pill) ── */ .srt-trust-item { display:inline-flex;align-items:center;gap:6px; font-size:12.5px;font-weight:500;color:var(--text2); } .srt-trust-item svg { color:var(--teal);flex-shrink:0; } /* ── FIX 6: Gradient alias — typewriter uses class "grad", CSS only had "srt-grad" ── */ .grad { background:var(--grad-brand); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; } /* ── FIX 7: srt-btn-outline-white alias (CTA banner btn2, CSS only had btn-outline-white) ── */ .srt-btn-outline-white { background:transparent;color:#fff; border:1.5px solid rgba(255,255,255,.45); display:inline-flex;align-items:center;gap:8px; padding:11px 24px;font-size:14px;font-weight:600; border-radius:var(--r-pill);text-decoration:none; transition:all var(--base) var(--ease);white-space:nowrap; } .srt-btn-outline-white:hover { background:rgba(255,255,255,.12);color:#fff; border-color:rgba(255,255,255,.7); } /* Also ensure srt-btn-lg size works with alias variants */ .srt-btn-outline-white.srt-btn-lg, .srt-btn-white.srt-btn-lg { padding:14px 32px;font-size:15px; } /* ── FIX 8: Why-item hover — patch stripped the interactive hover. Restore it. ── */ .srt-why-item { border:1px solid var(--border); border-radius:var(--r-sm); padding:18px 20px; background:var(--card); } .srt-why-item:hover { transform:translateX(6px); border-color:var(--teal-b); background:var(--card-h); box-shadow:var(--sh-sm); } /* ── FIX 9: Footer newsletter — add position:relative so honeypot absolute doesn't escape ── */ .srt-footer-nl { position:relative; } /* Also ensure newsletter status message is outside the flex flow */ .srt-nl-status { position:absolute;bottom:-26px;left:0;right:0; font-size:12px;margin-top:7px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* ── FIX 10: Responsive — hide hero float cards at ≤1100px (new class names) ── */ @media(max-width:1100px) { .srt-hero-float-card { display:none; } } /* ── FIX 11: Mobile hero — trust row spacing ── */ @media(max-width:768px) { .srt-hero-trust { gap:12px; } .srt-trust-item { font-size:12px; } .srt-hero-rating { font-size:12px; } } /* ── FIX 12: Style.css Version bump marker ── */ /* SeekRankTech v5.2 — All class mismatches, orb animation, button aliases resolved */ /* ════════════════════════════════════════════ V5.3 COMPREHENSIVE ARCHITECTURE PATCH Resolves ALL identified mismatches, missing selectors, duplicate conflicts, and responsive gaps found in the full theme audit. ════════════════════════════════════════════ */ /* ────────────────────────────────────────── UTILITIES ────────────────────────────────────────── */ /* Canonical text-centre utility. Replaces one-off srt-text-center (undefined) and the inline style="text-align:center" pattern. */ .srt-u-center { text-align: center; } .srt-u-center-row { display: flex; justify-content: center; } /* Section CTA row — replaces inline style on "View All Services" wrapper. */ .srt-sec-cta-row { text-align: center; margin-top: 36px; } /* Narrow content wrapper for single case studies / legal pages */ .srt-sec-inner--narrow { max-width: 860px; margin-inline: auto; } /* ────────────────────────────────────────── SERVICE GRID 2-COL MODIFIER page-branding.php uses srt-svc-grid--2 to render 2 columns instead of 3. ────────────────────────────────────────── */ .srt-svc-grid.srt-svc-grid--2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 768px) { .srt-svc-grid.srt-svc-grid--2 { grid-template-columns: 1fr; } } /* ────────────────────────────────────────── 404 PAGE — COMPLETE DEFINITIONS All four classes (srt-404-title, srt-404-desc, srt-404-btns, srt-404-links) were referenced in 404.php but only the wrapper had CSS. ────────────────────────────────────────── */ .srt-404-inner { max-width: 560px; margin-inline: auto; } .srt-404-title { font-family: var(--font-h); font-size: clamp(22px, 3vw, 32px); font-weight: 700; color: var(--text); margin-bottom: 14px; margin-top: 8px; line-height: 1.2; } .srt-404-desc { font-size: 16px; color: var(--text2); line-height: 1.72; max-width: 420px; margin-inline: auto; margin-bottom: 28px; } /* Search form inside 404 */ .srt-404-wrap .search-form { display: flex; gap: 0; margin-bottom: 28px; border: 1px solid var(--border2); border-radius: var(--r-pill); overflow: hidden; background: var(--card); } .srt-404-wrap .search-field { flex: 1; padding: 12px 18px; background: none; color: var(--text); font-size: 14px; border: none; outline: none; min-width: 0; } .srt-404-wrap .search-field::placeholder { color: var(--text3); } .srt-404-wrap .search-submit { padding: 11px 20px; background: var(--teal); color: #000; font-size: 13.5px; font-weight: 700; cursor: pointer; border: none; transition: background var(--fast); white-space: nowrap; } .srt-404-wrap .search-submit:hover { background: var(--cyan); } /* CTA buttons row */ .srt-404-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; } /* Quick links row */ .srt-404-links { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--border); } .srt-404-links a { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--text3); transition: color var(--fast); } .srt-404-links a:hover { color: var(--teal); } .srt-404-links a svg { color: var(--teal); flex-shrink: 0; } /* Mobile stacking */ @media (max-width: 480px) { .srt-404-btns { flex-direction: column; align-items: center; } .srt-404-btns .srt-btn-primary, .srt-404-btns .srt-btn-ghost { width: 100%; max-width: 280px; justify-content: center; } } /* ────────────────────────────────────────── THANK YOU PAGE Bug: template used srt-ty-step-num, CSS only had srt-ty-step-n. Alias added. ────────────────────────────────────────── */ /* Alias — maps old class name to canonical styles */ .srt-ty-step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--grad-dark); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-weight: 800; color: #000; flex-shrink: 0; } /* Button row in thank-you page */ .srt-ty-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; } @media (max-width: 480px) { .srt-ty-btns { flex-direction: column; align-items: center; } .srt-ty-btns a { width: 100%; max-width: 280px; justify-content: center; } } /* ────────────────────────────────────────── SIDEBAR / WIDGET SYSTEM srt-widget and srt-widget-title rendered by WordPress dynamic_sidebar() — must be styled. ────────────────────────────────────────── */ /* Dynamic sidebar widget wrapper */ .srt-widget { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 20px 22px; margin-bottom: 16px; overflow-wrap: break-word; word-break: break-word; } .srt-widget:last-child { margin-bottom: 0; } /* Widget title */ .srt-widget-title, .srt-sidebar-widget__title { font-family: var(--font-b); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } /* Widget inner content defaults */ .srt-widget ul { display: flex; flex-direction: column; gap: 8px; list-style: none; padding: 0; margin: 0; } .srt-widget ul li a { font-size: 13.5px; color: var(--text2); transition: color var(--fast); display: block; padding: 3px 0; } .srt-widget ul li a:hover { color: var(--teal); } /* Recent posts fallback list (sidebar.php) */ .srt-recent-posts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .srt-recent-post-link { font-size: 13.5px; font-weight: 500; color: var(--text2); display: block; line-height: 1.45; transition: color var(--fast); padding: 6px 10px; border-radius: var(--r-xs); } .srt-recent-post-link:hover { color: var(--teal); background: var(--teal-lt); } /* Widget search form */ .srt-widget .search-form { display: flex; gap: 0; border: 1px solid var(--border2); border-radius: var(--r-xs); overflow: hidden; } .srt-widget .search-field { flex: 1; padding: 9px 12px; background: none; color: var(--text); font-size: 13px; border: none; outline: none; min-width: 0; } .srt-widget .search-submit { padding: 9px 13px; background: var(--teal); color: #000; border: none; cursor: pointer; font-size: 12.5px; font-weight: 700; transition: background var(--fast); } .srt-widget .search-submit:hover { background: var(--cyan); } /* ────────────────────────────────────────── SINGLE POST — STRUCTURAL FIXES ────────────────────────────────────────── */ /* Class-mismatch fix: single.php used srt-post-content-area, CSS only had srt-post-content. Both now map to the same rules. */ .srt-post-content-area { min-width: 0; /* inherits all srt-post-content rules via adjacent selector */ } /* Merge: srt-post-content-area → srt-post-content shared rules */ .srt-post-content, .srt-post-content-area { min-width: 0; overflow-wrap: break-word; word-break: break-word; } /* Class-mismatch fix: single.php used srt-post-hero, CSS only had srt-post-hero-img. Alias added so old markup still renders. */ .srt-post-hero { border-radius: var(--r); overflow: hidden; margin-bottom: 36px; aspect-ratio: 16 / 7; background: var(--card); } .srt-post-hero img { width: 100%; height: 100%; object-fit: cover; } /* Single post title */ .srt-post-title-single { font-size: clamp(24px, 3.5vw, 44px); line-height: 1.15; margin-bottom: 24px; letter-spacing: -.02em; } /* Post meta top bar */ .srt-post-meta--top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .srt-post-read-time { font-size: 12px; color: var(--text3); } /* Tags row */ .srt-post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); } /* Author box — replaces inline styled div in single.php */ .srt-author-box { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 28px; margin-top: 32px; display: flex; gap: 20px; align-items: flex-start; } .srt-author-av { width: 56px; height: 56px; border-radius: 50%; background: var(--grad-brand); display: flex; align-items: center; justify-content: center; font-family: var(--font-h); font-size: 20px; font-weight: 800; color: #000; flex-shrink: 0; } .srt-author-name { font-size: 15px; font-weight: 700; margin-bottom: 2px; } .srt-author-company { font-size: 12px; color: var(--text3); margin-bottom: 8px; } .srt-author-bio { font-size: 13.5px; color: var(--text2); margin: 0; line-height: 1.65; } @media (max-width: 480px) { .srt-author-box { flex-direction: column; gap: 14px; padding: 20px; } } /* Post navigation — replaces inline styled nav in single.php and case study. Removes onmouseover/onmouseout JS; uses CSS :hover instead. */ .srt-post-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; flex-wrap: wrap; } .srt-post-nav-link { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text2); padding: 12px 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); flex: 1; min-width: 0; transition: color var(--fast), border-color var(--fast), background var(--fast); text-decoration: none; } .srt-post-nav-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .srt-post-nav-link:hover { color: var(--teal); border-color: var(--teal-b); background: var(--teal-lt); } .srt-post-nav-link--next { justify-content: flex-end; text-align: right; } @media (max-width: 600px) { .srt-post-nav { flex-direction: column; } .srt-post-nav-link { flex: none; width: 100%; } } /* ────────────────────────────────────────── PROCESS STEP — CONFLICT RESOLUTION The original definition (centered, no bg) and the v5.1 patch definition (card style) conflicted. Card style is authoritative (used on all pages). This block is the single canonical definition. ────────────────────────────────────────── */ .srt-process-step { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 28px 22px; position: relative; overflow: hidden; transition: border-color var(--base), transform var(--base), box-shadow var(--base); } .srt-process-step:hover { border-color: var(--teal-b); transform: translateY(-4px); box-shadow: var(--sh-sm); } .srt-process-num { font-family: var(--font-mono); font-size: 42px; font-weight: 800; background: var(--grad-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; margin-bottom: 14px; } .srt-process-step h4 { font-size: 15.5px; font-weight: 700; margin-bottom: 8px; } .srt-process-step p { font-size: 13.5px; color: var(--text2); line-height: 1.6; } /* ────────────────────────────────────────── STATS GRID — CONFLICT RESOLUTION Two competing definitions existed with different gaps (0 border-based vs 18px gap). Gap-based is the authoritative modern version. ────────────────────────────────────────── */ .srt-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .srt-stat-box { background: rgba(255, 255, 255, .03); border: 1px solid var(--border2); border-radius: var(--r); padding: 32px 20px; text-align: center; transition: border-color var(--base), transform var(--base); /* Reset: remove old border-right pattern from original definition */ border-right: 1px solid var(--border2); } .srt-stat-box:hover { border-color: var(--teal-b); transform: translateY(-3px); } /* Responsive overrides for stats grid */ @media (max-width: 1024px) { .srt-stats-grid { grid-template-columns: repeat(2, 1fr); } .srt-stat-box { border-right: 1px solid var(--border2) !important; border-top: none !important; } } @media (max-width: 480px) { .srt-stats-grid { grid-template-columns: 1fr; } } /* ────────────────────────────────────────── TESTIMONIAL GRID — CONFLICT RESOLUTION Duplicate definitions with slightly different border-radius and gap values. Canonical: r-xl, gap:20px (premium, consistent with solution cards). ────────────────────────────────────────── */ .srt-testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .srt-testi-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 28px 24px; display: flex; flex-direction: column; gap: 16px; transition: border-color var(--base), transform var(--base), box-shadow var(--base); } .srt-testi-card:hover { border-color: var(--teal-b); transform: translateY(-6px); box-shadow: var(--sh-teal); } @media (max-width: 1024px) { .srt-testi-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .srt-testi-grid { grid-template-columns: 1fr; } } /* ────────────────────────────────────────── WHY GRID — CONFLICT RESOLUTION Two definitions: one with border+background on items, one without. Border version is authoritative. ────────────────────────────────────────── */ .srt-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .srt-why-list { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; } .srt-why-item { display: flex; align-items: flex-start; gap: 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 18px 20px; transition: transform var(--base), border-color var(--base), background var(--base); min-width: 0; } .srt-why-item:hover { transform: translateX(6px); border-color: var(--teal-b); background: var(--card-h); box-shadow: var(--sh-sm); } @media (max-width: 1100px) { .srt-why-grid { grid-template-columns: 1fr; gap: 36px; } } @media (max-width: 768px) { .srt-why-grid { gap: 24px; } } /* ────────────────────────────────────────── METRIC PANEL — CONFLICT RESOLUTION Two definitions with different column counts. 2-col grid is canonical (desktop). ────────────────────────────────────────── */ .srt-metric-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-self: center; } .srt-metric-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 24px 20px; transition: border-color var(--base), transform var(--base); position: relative; overflow: hidden; } .srt-metric-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad-brand); } .srt-metric-card:hover { border-color: var(--teal-b); transform: translateY(-4px); } .srt-metric-val { font-family: var(--font-mono); font-size: clamp(26px, 3vw, 36px); font-weight: 800; background: var(--grad-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; margin-bottom: 8px; } .srt-metric-desc { font-size: 13px; color: var(--text2); line-height: 1.55; } @media (max-width: 768px) { .srt-metric-panel { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .srt-metric-panel { grid-template-columns: 1fr 1fr; } } /* ────────────────────────────────────────── JAVASCRIPT PARALLAX — ORB CLASS NAMES main.js initParallax() targets .srt-orb. hero.php (v5.2+) uses .srt-hero-orb-*. This ensures JS-applied transform works on both. ────────────────────────────────────────── */ .srt-hero-orb-1, .srt-hero-orb-2, .srt-hero-orb-3 { /* Ensure JS can apply transforms without fighting CSS animations */ will-change: transform; } /* ────────────────────────────────────────── TEAM GRID — MOBILE IMPROVEMENTS srt-team-grid remained too dense on small screens. ────────────────────────────────────────── */ @media (max-width: 600px) { .srt-team-grid { grid-template-columns: 1fr 1fr; gap: 14px; } .srt-team-card { padding: 20px 16px; } } @media (max-width: 360px) { .srt-team-grid { grid-template-columns: 1fr; } } /* ────────────────────────────────────────── MINI STATS — MOBILE SINGLE COLUMN ────────────────────────────────────────── */ @media (max-width: 360px) { .srt-mini-stats { grid-template-columns: 1fr; } } /* ────────────────────────────────────────── APPROACH GRID — responsive ────────────────────────────────────────── */ @media (max-width: 768px) { .srt-approach-grid { grid-template-columns: 1fr; } } /* ────────────────────────────────────────── INLINE GRID DECLARATIONS — ELIMINATED page-branding.php formerly had inline style="grid-template-columns:repeat(2,1fr)". Now uses .srt-svc-grid--2 class above. ────────────────────────────────────────── */ /* ────────────────────────────────────────── PROCESS GRID RESPONSIVE UNIFICATION ────────────────────────────────────────── */ @media (max-width: 1024px) { .srt-process-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } } @media (max-width: 600px) { .srt-process-grid { grid-template-columns: 1fr; } } /* ────────────────────────────────────────── VERSION MARKER ────────────────────────────────────────── */ /* SeekRankTech v5.3 — All audit issues resolved: class mismatches, missing definitions, duplicate conflicts, inline style elimination, responsive gaps. */