/* Telecom DMS landing page. Generated from new_web_page/dist; every class is tdms- prefixed so the theme's Bootstrap cannot collide. */ /* Colors are the theme palette (src/assets/scss/components/bootstrap.scss) via Bootstrap's --bs-* variables. */ .tdms,.tdms-nav,.tdms-footer{ --max:1200px; --font-body:'DM Sans',system-ui,sans-serif; --font-head:'Manrope',system-ui,sans-serif; } .tdms *{box-sizing:border-box} html{scroll-behavior:smooth} .tdms{margin:0;color:var(--bs-dark);background:var(--bs-white-off);font-family:var(--font-body);font-weight:400;-webkit-font-smoothing:antialiased;overflow-wrap:anywhere} /* long words and URLs from the fields wrap instead of widening the grid */ .tdms p{font-weight:400;text-wrap:pretty} /* the theme sets p to 300, which DM Sans does not load */ /* Type roles: display (h1/h2, Manrope 800), title (h3, Manrope 700), body (DM Sans 400), meta (13px). */ .tdms h3{font-family:var(--font-head);font-weight:700;font-size:20px;line-height:1.25;letter-spacing:-.02em;text-wrap:balance} .tdms img{max-width:100%} .tdms figure{margin:0} .tdms button,.tdms a,.tdms input,.tdms select,.tdms textarea{font:inherit} .tdms a{text-decoration:none;color:inherit} .tdms button{cursor:pointer} .tdms h1,.tdms h2,.tdms h3,.tdms p{margin-top:0} .tdms-container{width:min(var(--max),calc(100% - 64px));margin-inline:auto} .tdms-eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:700} .tdms-heading{font-family:var(--font-head);font-weight:800;letter-spacing:-.035em;line-height:1.08;text-wrap:balance} /* Secondary text on light surfaces dims black (Dimmer Rule); --bs-secondary is only legible on dark. */ .tdms-muted{color:var(--bs-dark);opacity:.68} .tdms :focus-visible{outline:2px solid var(--bs-dark);outline-offset:3px} /* Green rings only where the surface is black; on white, off-white and the green contact band they disappear. */ .tdms-hero :focus-visible,.tdms-engine :focus-visible,.tdms-workflow :focus-visible,.tdms-diagram :focus-visible{outline-color:var(--bs-success)} .tdms ::selection{background:var(--bs-success);color:var(--bs-dark)} .tdms .tdms-btn{font-size:15px;font-weight:700;line-height:1.2} .tdms-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:15px 21px;border-radius:9px;font-size:14px;font-weight:700;border:1px solid transparent;transition:transform .2s,background .2s,border-color .2s} .tdms-btn:hover{transform:translateY(-2px)} .tdms-btn:active{transform:translateY(0) scale(.98)} .tdms-btn-green{background:var(--bs-success);color:var(--bs-dark)} .tdms-btn-green:hover{background:var(--bs-success)} .tdms-btn-outline{border-color:var(--bs-secondary);color:var(--bs-white)} .tdms-btn-outline:hover{border-color:var(--bs-white)} .tdms-btn-dark{background:var(--bs-dark);color:var(--bs-white)} .tdms-arrow{font-size:18px;line-height:0} [dir=rtl] .tdms-arrow{display:inline-block;transform:scaleX(-1)} .tdms-hero{overflow:hidden;background:radial-gradient(circle at 84% 25%,var(--bs-dark) 0,transparent 37%),linear-gradient(125deg,var(--bs-dark),var(--bs-dark) 75%);color:var(--bs-white)} .tdms-hero-grid{min-height:640px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:50px;padding:72px 0 88px} .tdms-hero .tdms-eyebrow{color:var(--bs-success)} .tdms-hero h1{font-size:clamp(42px,5vw,72px);max-width:760px;margin:22px 0} .tdms-hero h1 em{font-style:normal;color:var(--bs-success)} .tdms-hero-copy{max-width:560px;line-height:1.8;font-size:16px;color:var(--bs-white-off)} .tdms-hero-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px} .tdms-proof{display:grid;grid-template-columns:repeat(3,auto);gap:22px 34px;margin-top:38px;padding-top:26px;border-top:1px solid var(--bs-secondary);max-width:600px} .tdms-proof b{display:block;font-family:var(--font-head);font-weight:800;font-size:28px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--bs-white)} .tdms-proof span{font-size:13px;color:var(--bs-secondary);line-height:1.5} .tdms-hero-visual{position:relative;min-height:520px} .tdms-orbit{position:absolute;inset-inline-end:40px;top:30px;width:440px;height:440px;border:1px solid var(--bs-success);border-radius:50%;box-shadow:0 0 0 43px transparent,0 0 0 90px transparent} .tdms-dash{position:absolute;inset-inline-end:-20px;top:30px;width:min(100%,580px);background:var(--bs-white);color:var(--bs-dark);border-radius:16px;box-shadow:0 26px 70px rgba(0,0,0,.4);overflow:hidden;transform:rotate(2deg)} .tdms-dash-top{height:38px;background:var(--bs-white-off);display:flex;align-items:center;padding:0 16px;gap:7px;border-bottom:1px solid var(--bs-white-off)} .tdms-dot{width:7px;height:7px;border-radius:50%;background:var(--bs-secondary)} .tdms-dash-title{margin-inline-start:12px;font-weight:800;font-size:11px} .tdms-dash-body{padding:18px} .tdms-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .tdms-kpi{border-radius:9px;padding:10px;background:var(--bs-white)} .tdms-kpi small{display:block;font-size:9px;color:var(--bs-secondary);font-weight:700} .tdms-kpi b{display:block;font-size:17px;letter-spacing:-.03em;margin-top:3px} .tdms-kpi.tdms-ok{background:var(--bs-white-off)} .tdms-kpi.tdms-warn{background:var(--bs-warning)} .tdms-kpi.tdms-bad{background:var(--bs-danger)} .tdms-chart-label{display:flex;justify-content:space-between;font-size:10px;font-weight:700;color:var(--bs-secondary);margin:16px 0 8px} .tdms-bars{display:flex;align-items:flex-end;height:120px;gap:8px;border-bottom:1px solid var(--bs-white-off);padding:0 4px} .tdms-bars i{flex:1;background:linear-gradient(var(--bs-success),var(--bs-white-off));border-radius:4px 4px 0 0} .tdms-days{display:flex;gap:8px;padding:6px 4px 0;font-size:9px;color:var(--bs-secondary)} .tdms-days span{flex:1;text-align:center} .tdms-dash figcaption{padding:10px 16px;text-align:end;font-size:12px;font-weight:700;color:var(--bs-dark);opacity:.68;background:var(--bs-white);border-top:1px solid var(--bs-white-off)} .tdms-hero-phone{position:absolute;inset-inline-start:0;bottom:-24px;width:168px;border-radius:28px;background:var(--bs-dark);border:5px solid var(--bs-dark);overflow:hidden;box-shadow:0 26px 60px rgba(0,0,0,.5);transform:rotate(-6deg);z-index:2} .tdms-hero-phone img{display:block;width:100%;height:auto} .tdms-hero-badge{position:absolute;inset-inline-end:18px;bottom:30px;background:var(--bs-white-off);border-radius:10px;padding:13px 16px;color:var(--bs-dark);font-weight:700;font-size:12px;box-shadow:0 12px 30px rgba(0,0,0,.18);z-index:3} .tdms-strip{background:var(--bs-success);padding:24px 0} .tdms-strip-inner{display:flex;justify-content:space-between;gap:25px;align-items:center} .tdms-strip b{font-size:12px;text-transform:uppercase;letter-spacing:.13em} .tdms-strip-list{display:flex;gap:25px;flex-wrap:wrap;font-size:14px;font-weight:700} .tdms-strip-list span:before{content:'•';margin-inline-end:12px} .tdms-section{padding:104px 0} .tdms-section-header{display:flex;justify-content:space-between;align-items:end;gap:36px;margin-bottom:44px} .tdms-section-header h2{font-size:clamp(32px,3.7vw,52px);max-width:680px;margin:12px 0 0} .tdms-section-header p{max-width:400px;line-height:1.7;font-size:16px;margin:0} .tdms-section .tdms-eyebrow{display:flex;align-items:center;gap:8px;color:var(--bs-dark)} .tdms-section .tdms-eyebrow:before{content:'';flex:0 0 8px;height:8px;border-radius:50%;background:var(--bs-success)} .tdms-intro-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .tdms-pillar{border:1px solid var(--bs-white-off);border-radius:13px;background:var(--bs-white);padding:26px 24px;min-height:230px} .tdms-pillar-num{font-variant-numeric:tabular-nums;display:inline-block;color:var(--bs-dark);background:var(--bs-success);border-radius:6px;padding:4px 8px;font-weight:700;font-size:12px;letter-spacing:.06em} .tdms-pillar h3{margin:22px 0 10px} .tdms-pillar p{color:var(--bs-dark);opacity:.68;font-size:15px;line-height:1.65;margin:0} .tdms-engine{background:var(--bs-dark);color:var(--bs-white)} .tdms-engine .tdms-eyebrow{color:var(--bs-success)} .tdms-engine .tdms-section-header p{color:var(--bs-white-off)} .tdms-engine-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .tdms-engine-card{border:1px solid var(--bs-secondary);border-radius:13px;padding:28px 24px;background:var(--bs-dark)} .tdms-engine-card .tdms-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--bs-dark);background:var(--bs-success);border-radius:6px;padding:4px 8px} .tdms-engine-card h3{margin:20px 0 10px} .tdms-engine-card p{color:var(--bs-white-off);font-size:15px;line-height:1.65;margin:0} .tdms-engine-foot{margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .tdms-engine-foot div{border-top:2px solid var(--bs-success);padding-top:14px;font-size:14px;line-height:1.6;color:var(--bs-white-off)} .tdms-engine-foot b{color:var(--bs-white)} .tdms-mobile-showcase-section{background:var(--bs-white)} .tdms-mobile-shot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .tdms-mobile-shot-card{border:1px solid var(--bs-white-off);background:var(--bs-white);border-radius:16px;padding:22px 16px 23px;text-align:center;box-shadow:0 8px 26px rgba(0,0,0,.035)} .tdms-mobile-shot-card img{width:auto;max-width:100%;height:420px;object-fit:contain;margin:0 auto 19px;display:block} .tdms-mobile-shot-card h3{font-size:17px;margin:0 0 8px} .tdms-mobile-shot-card p{font-size:14px;color:var(--bs-dark);opacity:.68;line-height:1.7;margin:0 auto;max-width:30ch} .tdms-device{height:420px;aspect-ratio:9/19;margin:0 auto 19px;border:7px solid var(--bs-dark);border-radius:30px;background:var(--bs-white);overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.12);display:flex;align-items:flex-start} .tdms-device img{width:100%!important;height:100%!important;max-width:none;object-fit:cover;object-position:top;margin:0!important} .tdms-flow-head{display:flex;align-items:baseline;gap:14px;margin:0 0 18px} .tdms-flow-head h3{font-size:24px;margin:0} .tdms-flow-head span{font-size:14px;color:var(--bs-dark);opacity:.68} .tdms-flow-group+.tdms-flow-group{margin-top:44px} .tdms-flow-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} .tdms-step-no{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--bs-success);color:var(--bs-dark);font-size:12px;font-weight:700;margin-bottom:10px} .tdms-flow-grid .tdms-mobile-shot-card img,.tdms-flow-grid .tdms-device{height:380px} .tdms-flow-3{grid-template-columns:repeat(3,minmax(0,1fr))} .tdms-flow-3 .tdms-mobile-shot-card img,.tdms-flow-3 .tdms-device{height:420px} .tdms-flow-5{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px} .tdms-flow-5 .tdms-mobile-shot-card{padding:18px 12px 20px} .tdms-flow-5 .tdms-mobile-shot-card img,.tdms-flow-5 .tdms-device{height:330px} .tdms-flow-5 .tdms-device{border-width:6px;border-radius:26px} .tdms-review-card{grid-column:1/-1} .tdms-ph{display:grid;place-items:center;text-align:center;gap:6px;border:2px dashed var(--bs-secondary);border-radius:14px;background:repeating-linear-gradient(45deg,var(--bs-white) 0 12px,var(--bs-white-off) 12px 24px);color:var(--bs-secondary);padding:20px} .tdms-ph strong{font-size:13px;color:var(--bs-dark)} .tdms-ph small{font-size:11px;line-height:1.5;max-width:34ch} .tdms-ph-phone{aspect-ratio:608/1268;height:420px;margin:0 auto 19px;width:auto} .tdms-ph-wide{aspect-ratio:2048/1000;width:100%;border-radius:0;border-width:0 0 2px} .tdms-screens-section{background:var(--bs-white-off)} .tdms-screen-showcase{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start} .tdms-screen-card{background:var(--bs-white);border:1px solid var(--bs-white-off);border-radius:16px;box-shadow:0 12px 28px rgba(0,0,0,.05);overflow:hidden} .tdms-screen-card img{display:block;width:100%;height:auto} .tdms-screen-meta{padding:18px 20px} .tdms-screen-meta h3{margin:0 0 6px} .tdms-screen-meta p{margin:0;color:var(--bs-dark);opacity:.68;font-size:14px;line-height:1.7} .tdms-channels-section{background:var(--bs-white)} .tdms-channels-section h2{font-size:clamp(32px,3.7vw,52px);max-width:780px;margin:15px 0 16px} .tdms-channels-intro{max-width:690px;color:var(--bs-dark);opacity:.68;font-size:16px;line-height:1.8;margin-bottom:30px} .tdms-channel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px} .tdms-channel-card{border:1px solid var(--bs-white-off);background:var(--bs-white);border-radius:12px;padding:25px 22px} .tdms-channel-card h3{margin-bottom:12px} .tdms-channel-card p{font-size:14px;line-height:1.7;color:var(--bs-dark);opacity:.68;margin:0} .tdms-modules-section{background:var(--bs-white-off)} .tdms-module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} /* A short last row (5 = 3 + 2) splits the full width instead of leaving a hole. */ @media(min-width:1021px){ .tdms-module-grid{grid-template-columns:repeat(6,minmax(0,1fr))} .tdms-module-card{grid-column:span 2} .tdms-module-card:nth-child(3n+1):nth-last-child(2),.tdms-module-card:nth-child(3n+2):last-child{grid-column:span 3} .tdms-module-card:nth-child(3n+1):last-child{grid-column:1/-1} } .tdms-module-card{background:var(--bs-white);border:1px solid var(--bs-white-off);padding:26px;border-radius:12px;scroll-margin-top:90px} .tdms-module-top{display:flex;align-items:center;justify-content:space-between} .tdms-module-index{font-variant-numeric:tabular-nums;font-size:12px;letter-spacing:.1em;font-weight:700;color:var(--bs-dark);opacity:.68} .tdms-module-symbol{font-size:28px;color:var(--bs-dark)} .tdms-module-card h3{margin:18px 0 8px} .tdms-module-summary{font-size:15px;line-height:1.65;color:var(--bs-dark);opacity:.68} .tdms-feature-list{list-style:none;padding:0;margin:22px 0 0;border-top:1px solid var(--bs-white-off)} .tdms-feature-list li{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--bs-white-off)} .tdms-feature-check{border-radius:6px;background:var(--bs-success);color:var(--bs-dark);flex:0 0 23px;height:23px;text-align:center;line-height:23px;font-size:12px;font-weight:700} .tdms-feature-list strong{font-size:14px;display:block;font-weight:700} .tdms-feature-list small{display:block;color:var(--bs-dark);opacity:.68;font-size:13px;margin-top:2px;line-height:1.5} .tdms-workflow{background:var(--bs-dark);color:var(--bs-white)} .tdms-workflow .tdms-eyebrow{color:var(--bs-success)} .tdms-workflow .tdms-section-header p{color:var(--bs-white-off)} .tdms-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:13px} .tdms-step{border:1px solid var(--bs-secondary);border-radius:12px;padding:25px 22px;background:var(--bs-dark)} .tdms-step .tdms-number{color:var(--bs-success);font-size:12px;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums} .tdms-step h3{margin:26px 0 12px} .tdms-step p{color:var(--bs-white-off);font-size:15px;line-height:1.65;margin:0} .tdms-spotlight{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center} .tdms-spotlight h2{font-size:clamp(32px,3.5vw,50px);margin:12px 0 18px} .tdms-spotlight p{color:var(--bs-dark);opacity:.68;line-height:1.8} .tdms-capability-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px} .tdms-capability-list span{padding:15px;background:var(--bs-white);border-radius:9px;font-size:14px;font-weight:700} .tdms-diagram{background:var(--bs-dark);border-radius:20px;padding:36px;color:var(--bs-white);min-height:390px;display:flex;flex-direction:column;justify-content:center} .tdms-diagram-core{background:var(--bs-success);color:var(--bs-dark);border-radius:15px;text-align:center;padding:23px;font-family:var(--font-head);font-size:22px;font-weight:800;letter-spacing:-.02em} .tdms-diagram-links{height:45px;display:flex;justify-content:space-around} .tdms-diagram-links i{height:100%;width:1px;background:var(--bs-success)} .tdms-diagram-pods{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .tdms-diagram-pods span{border:1px solid var(--bs-secondary);border-radius:9px;padding:16px 8px;text-align:center;font-size:13px} .tdms-diagram-note{color:var(--bs-secondary);text-align:center;font-size:13px;margin-top:25px} .tdms-faq-section{background:var(--bs-white)} .tdms-faq-section .tdms-container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:64px;align-items:start} .tdms-faq-section .tdms-section-header{display:block;margin:0;position:sticky;top:120px} .tdms-faq details:first-child{padding-top:0} .tdms-faq details{border-bottom:1px solid var(--bs-white-off);padding:20px 0} .tdms-faq summary{cursor:pointer;font-family:var(--font-head);font-weight:700;font-size:18px;line-height:1.4;letter-spacing:-.01em;list-style:none;display:flex;justify-content:space-between;gap:20px} .tdms-faq summary::-webkit-details-marker{display:none} .tdms-faq summary:after{content:'+';flex:0 0 28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--bs-success);color:var(--bs-dark);font-size:18px;line-height:1} .tdms-faq details[open] summary:after{content:'–'} .tdms-faq details p{color:var(--bs-dark);opacity:.68;line-height:1.75;margin:12px 0 0;font-size:16px;max-width:68ch} .tdms-closing{background:var(--bs-success);padding:84px 0} .tdms-closing-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start} .tdms-closing h2{font-size:clamp(30px,3.6vw,50px);margin:12px 0} .tdms-closing p{line-height:1.7;max-width:520px} .tdms-form{background:var(--bs-white);border-radius:16px;padding:26px;display:grid;gap:14px;box-shadow:0 20px 50px rgba(0,0,0,.12)} .tdms-form .tdms-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .tdms-form label{display:grid;gap:6px;font-size:13px;font-weight:700;color:var(--bs-dark)} .tdms-form label>:not(.wpcf7-form-control-wrap){opacity:.68} .tdms-form input,.tdms-form select,.tdms-form textarea{border:1px solid var(--bs-dark);border-radius:9px;padding:12px 13px;font-size:16px;font-weight:400;background:var(--bs-white);color:var(--bs-dark);width:100%} .tdms-form textarea{min-height:96px;resize:vertical} .tdms-form .tdms-btn{justify-self:start} .tdms-form-note{font-size:13px;color:var(--bs-dark);opacity:.68;margin:0} [dir=rtl] :is(.tdms,.tdms-nav,.tdms-footer){--font-body:'Almarai',system-ui,sans-serif;--font-head:'Almarai',system-ui,sans-serif} [dir=rtl] .tdms-heading,[dir=rtl] .tdms h1,[dir=rtl] .tdms h2,[dir=rtl] .tdms h3,[dir=rtl] .tdms-proof b{letter-spacing:0} [dir=rtl] .tdms-heading{line-height:1.35} [dir=rtl] .tdms h3{line-height:1.5} [dir=rtl] .tdms-eyebrow,[dir=rtl] .tdms-strip b{letter-spacing:0;text-transform:none;font-size:13px} [dir=rtl] .tdms-hero-copy,[dir=rtl] .tdms p{line-height:1.95} [dir=rtl] .tdms-dash{transform:rotate(-2deg)} [dir=rtl] .tdms-hero-phone{transform:rotate(6deg)} [dir=rtl] .tdms-ltr{direction:ltr;unicode-bidi:isolate} @media(max-width:1020px){ .tdms-intro-grid{grid-template-columns:repeat(2,1fr)} .tdms-engine-grid{grid-template-columns:repeat(2,1fr)} .tdms-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .tdms-module-card:nth-child(odd):last-child{grid-column:1/-1} .tdms-faq-section .tdms-container{grid-template-columns:1fr;gap:32px} .tdms-faq-section .tdms-section-header{position:static} .tdms-steps{grid-template-columns:repeat(2,1fr)} .tdms-channel-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .tdms-mobile-shot-grid,.tdms-flow-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .tdms-hero-grid{grid-template-columns:1fr} .tdms-hero-visual{min-height:520px;max-width:560px;width:100%;margin-inline:auto} } @media(max-width:720px){ .tdms-container{width:calc(100% - 32px)} .tdms-hero-grid{padding:56px 0 40px} .tdms-hero h1{font-size:clamp(38px,11vw,56px)} .tdms-proof{grid-template-columns:1fr 1fr} .tdms-hero-visual{min-height:auto;display:grid;gap:16px} .tdms-orbit,.tdms-hero-badge{display:none} .tdms-dash,.tdms-hero-phone{position:relative;inset:auto;transform:none!important} .tdms-dash{width:100%} .tdms-hero-phone{display:none} .tdms-kpi b{font-size:15px} .tdms-strip-inner{align-items:start;flex-direction:column} .tdms-strip-list{gap:10px} .tdms-section{padding:68px 0} .tdms-section-header{display:block} .tdms-section-header p{margin-top:16px} .tdms-intro-grid,.tdms-module-grid,.tdms-steps,.tdms-spotlight,.tdms-engine-grid,.tdms-engine-foot,.tdms-channel-grid,.tdms-mobile-shot-grid,.tdms-screen-showcase,.tdms-closing-inner,.tdms-form .tdms-row{grid-template-columns:1fr} .tdms-pillar{min-height:auto} .tdms-mobile-shot-card img,.tdms-ph-phone,.tdms-device,.tdms-flow-grid .tdms-mobile-shot-card img,.tdms-flow-grid .tdms-device{height:400px} .tdms-flow-grid,.tdms-flow-3,.tdms-flow-5{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin-inline:-16px;padding:0 16px 8px;scroll-padding-inline:16px;scrollbar-width:thin;scrollbar-color:var(--bs-dark) transparent} .tdms-flow-grid .tdms-mobile-shot-card{scroll-snap-align:start} .tdms-flow-5 .tdms-mobile-shot-card{padding:22px 16px 23px} .tdms-flow-5 .tdms-device{border-width:7px;border-radius:30px} .tdms-flow-head{display:block} .tdms-flow-head span{display:block;margin-top:4px} /* Odd stat count: the first stat takes the full row, so none is left alone on the last one. */ .tdms-proof>:first-child:nth-last-child(odd){grid-column:1/-1} /* Pillars: same cards, tighter, so four of them don't fill three screens. */ .tdms-intro-grid{gap:10px} .tdms-pillar{padding:22px 20px} .tdms-pillar h3{margin:16px 0 8px} /* Capabilities: one rail like the app screens instead of five full-height cards stacked (3,600px). "01 / 05" shows the position. */ .tdms-module-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin-inline:-16px;padding:0 16px 8px;scroll-padding-inline:16px;scrollbar-width:thin;scrollbar-color:var(--bs-dark) transparent} .tdms-module-grid .tdms-module-card{grid-column:auto!important;scroll-snap-align:start;padding:22px 20px} /* Channels: a ruled list instead of four boxed cards. */ .tdms-channel-grid{gap:0} .tdms-channel-card{border:0;border-top:1px solid var(--bs-secondary);border-radius:0;background:transparent;padding:20px 0} .tdms-channel-card:last-child{border-bottom:1px solid var(--bs-secondary)} .tdms-channel-card h3{margin-bottom:8px} /* Workflow: the steps are a sequence, so they read as one timeline rather than four boxes. */ .tdms-steps{gap:0} .tdms-step{position:relative;border:0;border-inline-start:1px solid var(--bs-secondary);border-radius:0;background:transparent;padding:0 0 32px;padding-inline-start:24px} .tdms-step:last-child{padding-bottom:0;border-color:transparent} .tdms-step::before{content:"";position:absolute;inset-inline-start:-5px;top:3px;width:9px;height:9px;border-radius:50%;background:var(--bs-success)} .tdms-step h3{margin:10px 0 8px} } /* The theme's overflow-x:hidden on body makes it a scroll container that never scrolls, which breaks sticky and view timelines. clip keeps the overflow guard without that. */ body.post-template-single-telecom-dms{overflow-x:clip} /* eKYC journey (numbered mobile groups), desktop only: one pinned phone, steps scroll past it. Step i's view timeline (--step, set inline) cross-fades screen i, focuses its text and fills the rail. Without scroll-driven animations, or with reduced motion, the group stays the plain grid above. */ @supports (timeline-scope:--a) and (animation-timeline:view()){ @media(min-width:1021px) and (prefers-reduced-motion:no-preference){ .tdms-journey{--stage:min(70vh,620px);--step-h:70vh;position:relative;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:repeat(var(--n),minmax(var(--step-h),auto));gap:0 72px;view-timeline-name:--tdms-journey} .tdms-journey .tdms-mobile-shot-card{display:contents} .tdms-journey .tdms-shot-media{grid-column:1;grid-row:1/-1;align-self:start;position:sticky;top:calc((100vh - var(--stage))/2);height:var(--stage);display:grid;place-items:center;opacity:0;animation:tdms-shot linear both;animation-timeline:var(--step);animation-range:cover} .tdms-journey .tdms-mobile-shot-card:first-child .tdms-shot-media{animation-name:tdms-shot-first} .tdms-journey .tdms-mobile-shot-card:last-child .tdms-shot-media{animation-name:tdms-shot-last} .tdms-journey .tdms-shot-media img,.tdms-journey .tdms-device{height:var(--stage);margin:0} .tdms-journey .tdms-device{border-width:9px;border-radius:40px;box-shadow:0 30px 60px rgba(0,0,0,.18)} .tdms-journey .tdms-shot-text{grid-column:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:start;padding-inline-start:44px;view-timeline-name:var(--step);animation:tdms-step-focus linear both;animation-timeline:var(--step);animation-range:cover} .tdms-journey .tdms-step-no{width:40px;height:40px;font-size:15px;margin-bottom:18px} .tdms-journey .tdms-shot-text h3{font-size:clamp(26px,2.6vw,36px);letter-spacing:-.03em;margin-bottom:12px} .tdms-journey .tdms-shot-text p{font-size:18px;max-width:34ch;margin:0} .tdms-journey:before,.tdms-journey:after{content:'';position:absolute;inset-inline-start:calc(5 / 11 * (100% - 72px) + 72px);top:calc(var(--step-h) / 2);bottom:calc(var(--step-h) / 2);width:2px;background:var(--bs-white-off)} .tdms-journey:after{background:var(--bs-success);transform-origin:top;animation:tdms-rail linear both;animation-timeline:--tdms-journey;animation-range:contain} } } @keyframes tdms-shot{0%,26%{opacity:0;transform:scale(.96)}32%,68%{opacity:1;transform:none}74%,100%{opacity:0;transform:scale(.96)}} @keyframes tdms-shot-first{0%,68%{opacity:1;transform:none}74%,100%{opacity:0;transform:scale(.96)}} @keyframes tdms-shot-last{0%,26%{opacity:0;transform:scale(.96)}32%,100%{opacity:1;transform:none}} @keyframes tdms-step-focus{0%,22%{opacity:.25}38%,62%{opacity:1}78%,100%{opacity:.25}} @keyframes tdms-rail{from{transform:scaleY(0)}to{transform:scaleY(1)}} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .tdms-btn{transition:none} .tdms-btn:hover,.tdms-btn:active{transform:none} } /* Landing Header and Landing Footer (header-/footer-telecom-dms.php): black, sharing .tdms-container with the sections. */ .tdms-nav,.tdms-footer{background:var(--bs-dark);color:var(--bs-white-off);font-family:var(--font-body);font-size:13px} .tdms-nav a,.tdms-footer a{color:inherit;text-decoration:none} .tdms-nav :focus-visible,.tdms-footer :focus-visible{outline:2px solid var(--bs-success);outline-offset:3px} .tdms-nav{position:sticky;top:0;z-index:1020} .admin-bar .tdms-nav{top:32px} @media(max-width:782px){.admin-bar .tdms-nav{top:46px}} @media(max-width:600px){.admin-bar .tdms-nav{top:0}} /* WordPress unpins the admin bar here */ .tdms-nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px} .tdms-brand{display:flex;flex-shrink:0} .tdms-brand img{display:block;width:auto;height:52px} .tdms-footer .tdms-brand img{height:64px} .tdms-links{display:flex;align-items:center;gap:28px} .tdms-links a{white-space:nowrap} .tdms-links a:hover,.tdms-footer a:hover{color:var(--bs-success)} .tdms-lang{border:1px solid var(--bs-secondary);border-radius:999px;padding:6px 12px;color:var(--bs-white)!important;font-weight:700;transition:border-color .2s} .tdms-lang:hover{border-color:var(--bs-white)} .tdms-nav-cta{border:1px solid var(--bs-secondary);border-radius:9px;padding:10px 15px;color:var(--bs-white)!important;font-weight:700;transition:border-color .2s} .tdms-nav-cta:hover{border-color:var(--bs-white)} .tdms-menu{display:none;place-items:center;width:44px;height:44px;margin-inline-end:-13px;padding:0;background:transparent;border:0;color:var(--bs-white)} .tdms-menu svg{display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} .tdms-menu path{transform-origin:12px 12px;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s} /* Open: the outer bars meet in the middle and cross into an ×, the middle one fades. */ .tdms-menu[aria-expanded=true] path:nth-child(1){transform:rotate(45deg) translateY(6px)} .tdms-menu[aria-expanded=true] path:nth-child(2){opacity:0} .tdms-menu[aria-expanded=true] path:nth-child(3){transform:rotate(-45deg) translateY(-6px)} @media(prefers-reduced-motion:reduce){.tdms-menu path{transition:none}} .tdms-footer{padding:32px 0!important} /* the theme's bundle.css pads every