/* VardaDesk — self-contained, system-font design. */ /* Every colour this page can change with the theme is a token, and every token below holds the value the page has always had in daylight — this list was extracted from the rules, not invented, so light mode renders exactly as it did. The dark half is one block at the end of the file. Three things are deliberately *not* in here and do not move: the product tour, which is a picture of the app (see .workspace below); the security band and the two terminal surfaces, which are dark in daylight already; and the download band, which is VardaDesk blue in both themes. */ :root{--blue:#2463eb;--blue-hover:#164cc3;--navy:#101f3d;--ink:#16243e;--muted:#5e6b80;--line:#e3e8f0;--canvas:#f7f9fc;--soft-blue:#eaf1ff;--radius:18px;--shadow:0 24px 65px -25px #264a8438;--max:1240px; /* page and card surfaces */ --page:#fff;--card:#fff;--header-bg:#ffffffed;--header-line:#e8edf480;--section-line:#edf0f5;--hero-bg:linear-gradient(115deg,#fafbfe 20%,#f1f6fe 100%);--tile-bg:#f0f5ff;--inset-bg:#f6f9ff;--inset-line:#ebf0fa;--mgmt-bg:#edf3fe;--mgmt-line:#dde7f8;--quiet-line:#bccbe3;--nav-pop-shadow:#1a30500a; /* the solid button keeps its own three values: --blue has to get lighter in the dark theme to stay a readable accent, and a button painted that colour could not carry white text */ --btn-bg:#2463eb;--btn-hover:#164cc3;--btn-ink:#fff; /* text that is neither --ink nor --muted */ --nav-ink:#4b5870;--intro-ink:#46556e;--note-ink:#66758c;--note-icon:#52647d;--trust-ink:#61728c;--trust-icon:#6780a5;--trust-line:#dfe6f1;--cap-ink:#52617a;--list-ink:#586a83;--flow-icon:#6883ab;--note-strong:#425777;--foot-p:#4b5b72;--foot-ink:#526078;--foot-span:#5b6980;--foot-link:#5d708c; /* the access diagram: line art, so it follows the page rather than staying a picture the way the product tour does */ --diagram-ink:#5d6e88;--diagram-icon:#4d77ba;--diagram-label:#5a7097;--diagram-line:#c6d9f6;--diagram-arrow:#5381c8; /* the download band is blue in both themes, so this one value is shared. It is not #bfd2ff/#d2e0ff/#dce7ff any more: those measured 3.3–4.4:1 on the band and failed AA for text that size. This clears 4.5:1 on the band's lightest pixel. */ --band-ink:#e4ecff; color-scheme:light;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--page);font-synthesis:none} *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:104px}body{margin:0;font-size:16px;line-height:1.6}button,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:disabled{cursor:not-allowed}img,svg{vertical-align:middle}img{max-width:100%}button,a,summary{touch-action:manipulation}a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--blue);outline-offset:5px}h1,h2,h3,h4,p,figure{margin:0}h1,h2,h3,h4{line-height:1.15;letter-spacing:-.035em}h1{font-size:clamp(3.1rem,4.6vw,4.55rem);font-weight:720;line-height:1.065;letter-spacing:-.057em}h2{font-size:clamp(2.15rem,3.4vw,3.25rem);font-weight:680}h3{font-size:1.16rem;font-weight:650}p{color:var(--muted)}[hidden]{display:none!important}.container{width:min(calc(100% - 96px),var(--max));margin-inline:auto}.section{padding:100px 0}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.eyebrow{font-size:.75rem;line-height:1.5;letter-spacing:.15em;font-weight:750;color:var(--blue);margin-bottom:20px}.small-line{display:inline-block;width:23px;height:2px;margin-right:9px;vertical-align:middle;background:var(--blue)}.button{min-height:52px;padding:13px 22px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;background:var(--btn-bg);color:var(--btn-ink);font-size:.9rem;font-weight:650;line-height:1.5;transition:background .18s,transform .18s,box-shadow .18s;white-space:nowrap}.button:hover{background:var(--btn-hover);box-shadow:0 5px 15px #2463eb20;transform:translateY(-1px)}.button .icon{width:18px;height:18px}.button-small{min-height:42px;padding:9px 17px;font-size:.86rem}.button-quiet{color:var(--ink);background:transparent;border-color:var(--line)}.button-quiet:hover{background:var(--card);border-color:var(--quiet-line);box-shadow:none}.button-row{display:flex;gap:12px;flex-wrap:wrap}.icon-button{background:transparent;border:0;min-width:44px;min-height:44px;display:grid;place-items:center;color:var(--ink);border-radius:8px}.skip-link{position:fixed;z-index:100;top:12px;left:12px;padding:12px 22px;background:var(--card);box-shadow:var(--shadow);transform:translateY(-180%)}.skip-link:focus{transform:none}.site-header{background:var(--header-bg);backdrop-filter:blur(14px);border-bottom:1px solid var(--header-line);position:sticky;top:0;z-index:30}.header-inner{height:86px;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font-size:1.4rem;letter-spacing:-.065em;font-weight:750}.main-nav{display:flex;gap:28px;align-items:center;font-size:.85rem;font-weight:550;color:var(--nav-ink)}.main-nav>a:not(.button):hover{color:var(--blue)}.main-nav .nav-download{margin-left:12px}.menu-toggle{display:none}.hero{background:var(--hero-bg);padding:85px 0 0;overflow:hidden}.hero-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:32px;align-items:center}.hero-copy{position:relative;z-index:2;padding-bottom:20px}.hero h1 span{color:var(--blue)}.hero-intro{font-size:1.1rem;line-height:1.7;max-width:450px;margin-top:26px;color:var(--intro-ink)}.hero-detail{font-size:.95rem;line-height:1.7;margin-top:12px;max-width:440px}.hero .button-row{margin-top:30px}.platform-note{display:flex;align-items:center;gap:13px;margin-top:24px;font-size:.78rem;color:var(--note-ink)}.platform-note .icon{width:15px;height:15px;color:var(--note-icon)}.platform-note span{margin-left:1px}.hero-visual{position:relative;margin-right:-80px;padding:25px 0 42px;min-width:0}.workspace{background:#fff;border:1px solid #dce4f1;border-radius:13px;box-shadow:0 30px 75px -20px #42689b45;overflow:hidden;transform:perspective(1600px) rotateY(-5deg) rotateX(2deg);transform-origin:center}.workspace-bar{height:51px;padding:0 17px;display:flex;align-items:center;border-bottom:1px solid #e8edf4;gap:14px;background:#fff}.mini-brand{font-size:.82rem;font-weight:700;letter-spacing:-.035em;display:flex;align-items:center;gap:7px}.workspace-label{margin-left:auto;font-size:.75rem;color:#7b879b}.avatar{display:grid;place-items:center;width:25px;height:25px;font-size:.65rem;color:#577098;background:#e8eef8;border-radius:50%}.workspace-body{display:flex;min-height:350px}.workspace-sidebar{background:#f9fafe;width:173px;flex-shrink:0;padding:23px 12px 15px;display:flex;flex-direction:column;border-right:1px solid #e8edf4}.workspace-section-label{font-size:.62rem;font-weight:650;letter-spacing:.08em;margin:0 7px 10px;color:#8994a5}.sidebar-item{display:flex;align-items:center;gap:8px;padding:8px 9px;font-size:.73rem;color:#647087}.sidebar-item .icon{width:15px;height:15px}.sidebar-item.active{background:#eaf0ff;border-radius:5px;color:var(--blue);font-weight:600}.sidebar-item span{margin-left:auto;font-size:.6rem;background:#fff;padding:0 5px;border-radius:3px}.device-label{margin-top:28px}.device-item{display:flex;gap:8px;align-items:center;padding:9px 7px;margin-bottom:3px}.device-item .icon{width:18px;height:18px;color:#7486a4}.device-item strong{font-size:.62rem;display:block;font-weight:600;white-space:nowrap}.device-item span{font-size:.58rem;display:block;color:#8893a5}.device-item.selected{background:#edf3ff;border:1px solid #dde8ff;border-radius:6px}.sidebar-bottom{margin-top:auto;font-size:.56rem;color:#7d8ba2;padding-top:26px;display:flex;gap:5px;align-items:center}.sidebar-bottom .icon{width:13px;height:13px}.session{min-width:0;flex:1;background:#fff}.session-heading{height:69px;display:flex;justify-content:space-between;align-items:center;padding:12px 19px}.session-heading strong{display:block;font-size:.83rem;font-weight:650}.session-heading span{font-size:.61rem;color:#78859b;display:block;margin-top:4px}.session-heading .status-dot{display:inline-block;width:5px;height:5px;background:#27a681;border-radius:50%;margin:0 5px 1px 0}.session-shield{color:var(--blue);width:20px;height:20px}.tour-tabs{display:flex;padding:0 14px;gap:4px;border-bottom:1px solid var(--line)}.tour-tab{border:0;background:transparent;border-bottom:2px solid transparent;padding:9px 11px;color:#758097;font-size:.66rem;display:flex;gap:5px;align-items:center}.tour-tab .icon{width:13px;height:13px}.tour-tab[aria-selected=true]{color:var(--blue);border-bottom-color:var(--blue);background:#f6f9ff}.tour-tab:hover{background:#f1f5fb}.tour-panel{height:218px}.remote-desktop{background:linear-gradient(130deg,#e0eafa,#d4e2f8);height:100%;position:relative;padding:26px 25px 38px}.file-window{height:149px;background:#fff;box-shadow:0 9px 20px #41639122;border-radius:5px;overflow:hidden}.file-window-title{height:26px;background:#fbfcff;border-bottom:1px solid #f0f2f6;display:flex;align-items:center;gap:25px;padding:0 10px;font-size:.61rem;color:#6e7a90}.window-dots{display:flex;gap:4px}.window-dots i{width:5px;height:5px;border-radius:50%;background:#dbe1ea}.file-window-body{display:flex;height:123px}.file-sidebar{width:82px;flex-shrink:0;background:#f8fafd;padding:12px 10px;font-size:.54rem;line-height:2.5;color:#8190a4}.file-sidebar b{color:#3869b3;font-weight:600}.folder-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:13px 16px}.folder-grid>div{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px}.folder-grid svg{width:34px;height:29px;fill:#9dc3ff;stroke:#6ea4ef;stroke-width:1;stroke-linejoin:round}.folder-grid span{font-size:.53rem;color:#66778e}.desktop-taskbar{position:absolute;bottom:0;left:0;right:0;height:26px;background:#f9fbffb0;display:flex;align-items:center;justify-content:center;gap:12px}.desktop-taskbar .icon{width:12px;height:12px;color:#5b8dda}.taskbar-search{font-size:.5rem;background:#fff9;border-radius:3px;color:#8b9bb0;padding:1px 11px}.session-footer{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;font-size:.58rem;color:#74869f}.session-footer>span:first-child{display:flex;align-items:center;gap:5px}.session-footer .icon{width:11px;height:11px;color:#5e89c1}.connection-card{display:flex;align-items:center;gap:13px;background:#fff;position:relative;margin:-13px 32px 0 -22px;width:max-content;max-width:calc(100% - 40px);border:1px solid #e3e9f3;border-radius:11px;padding:16px 20px;box-shadow:0 15px 40px #4468991a;z-index:2}.connection-icon{background:#edf4ff;border-radius:10px;width:41px;height:41px;display:grid;place-items:center;color:var(--blue)}.connection-card strong{font-size:.83rem;display:block;font-weight:650}.connection-card span:not(.connection-icon){font-size:.72rem;color:#77859b;display:block}.blue-check{margin-left:19px;color:var(--blue);width:18px;height:18px}.hero-visual figcaption{font-size:.75rem;color:#6c7b92;text-align:center;margin-top:17px}.hero-trust{display:grid;grid-template-columns:repeat(4,1fr);padding-top:33px;padding-bottom:31px;margin-top:55px;border-top:1px solid var(--trust-line);color:var(--trust-ink);font-size:.79rem}.hero-trust>span{display:flex;align-items:center;gap:9px;justify-content:center}.hero-trust>span+span{border-left:1px solid var(--trust-line)}.hero-trust .icon{width:17px;height:17px;color:var(--trust-icon)}.section-heading{max-width:600px;margin-bottom:46px}.section-heading>p:last-child{margin-top:20px;font-size:1rem}.centered{text-align:center;margin-inline:auto}.core-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.core-card{padding:32px 34px;min-width:0}.core-card:nth-child(-n+3){border-bottom:1px solid var(--line)}.core-card:not(:nth-child(3n)){border-right:1px solid var(--line)}.icon-tile{display:grid;place-items:center;width:44px;height:44px;color:var(--blue);background:var(--tile-bg);border-radius:11px;margin-bottom:21px}.icon-tile .icon{width:23px;height:23px}.core-card p{font-size:.9rem;line-height:1.75;margin-top:12px;max-width:305px}.files-panel{padding:24px;background:#f7faff}.transfer-heading{display:flex;align-items:center;gap:12px;color:var(--blue)}.transfer-heading strong,.transfer-heading span{display:block}.transfer-heading strong{font-size:.84rem;color:var(--ink)}.transfer-heading span{font-size:.6rem;color:var(--muted);margin-top:4px}.transfer-item{display:flex;align-items:center;gap:10px;margin-top:19px}.transfer-item .icon{color:#6591d5;width:22px}.transfer-item strong{display:block;font-size:.7rem}.transfer-item span{display:block;font-size:.6rem;color:var(--muted)}.transfer-item .transfer-check{margin-left:auto;color:#168966;width:17px}.transfer-progress{height:4px;background:#77a2f3;border-radius:3px;margin-top:12px}.transfer-caption{font-size:.57rem;margin-top:8px;display:flex;align-items:center;gap:5px}.transfer-caption .icon{width:12px;height:12px}.transfer-tags{display:flex;gap:8px;margin-top:13px;font-size:.54rem;color:#5c789b}.transfer-tags span{background:#eaf1fc;border-radius:3px;padding:3px 8px}.terminal-panel{background:#152039;color:#cdd8ee;padding:17px 20px}.terminal-topline{display:flex;justify-content:space-between;font-size:.58rem;color:#8ca2c6}.terminal-panel pre{font-family:"SFMono-Regular",Consolas,monospace;font-size:.65rem;line-height:1.5;white-space:pre-wrap;margin:16px 0 0}.terminal-panel pre span{color:#91b8fc}.terminal-foot{font-size:.55rem;color:#8da2c2;margin-top:13px}.terminal-cursor{font-weight:400;color:#b1ceff} @media(min-width:1440px){.hero-visual{margin-right:-40px}.hero-grid{gap:50px}} @media(max-width:1190px){.container{width:calc(100% - 64px)}.main-nav{gap:19px;font-size:.8rem}.main-nav .nav-download{margin-left:0}.hero-visual{margin-right:-45px}.workspace-sidebar{width:146px;padding-inline:8px}.device-item strong{font-size:.57rem}.sidebar-bottom{font-size:.5rem}.hero-grid{grid-template-columns:1fr 1fr;gap:25px}.hero .button{padding-inline:15px;font-size:.8rem}.hero-trust{font-size:.72rem}.hero-intro{font-size:1rem}.hero-detail{font-size:.9rem}.file-sidebar{width:62px;font-size:.47rem}.remote-desktop{padding-inline:16px}} @media(max-width:980px){.header-inner{height:76px}.main-nav{gap:14px;font-size:.75rem}.main-nav .button-small{font-size:.75rem;padding:8px 11px}.brand{font-size:1.3rem;gap:8px}.brand img{width:30px;height:30px}.hero{padding-top:65px}.hero-grid{grid-template-columns:1fr}.hero-copy{text-align:center;max-width:690px;margin:auto}.hero h1{font-size:clamp(3.3rem,7.3vw,4.5rem)}.desktop-break{display:none}.hero-intro,.hero-detail{margin-inline:auto;max-width:570px}.hero .button-row,.platform-note{justify-content:center}.hero-visual{width:min(690px,100%);margin:20px auto 0;padding-bottom:20px}.workspace{transform:none}.workspace-sidebar{width:178px}.device-item strong{font-size:.67rem}.sidebar-bottom{font-size:.6rem}.workspace-body{min-height:360px}.tour-panel{height:245px}.remote-desktop{padding:30px 32px 39px}.file-window{height:169px}.file-window-body{height:143px}.file-sidebar{width:95px;font-size:.6rem}.folder-grid svg{width:40px;height:32px}.folder-grid span{font-size:.62rem}.connection-card{margin-left:22px}.hero-trust{margin-top:27px;grid-template-columns:repeat(2,1fr);gap:20px;font-size:.8rem}.hero-trust>span+span{border:0}.section{padding:78px 0}.hero{padding-bottom:0}.core-card{padding:26px}.core-card h3{font-size:1.05rem}.core-card p{font-size:.85rem}.files-panel{padding:26px}.terminal-panel{padding:21px}.terminal-panel pre{font-size:.75rem}} @media(max-width:760px){.container{width:calc(100% - 40px)}.header-inner{height:72px}.menu-toggle{display:grid}.main-nav{display:none;position:absolute;top:72px;left:0;right:0;background:var(--card);border-bottom:1px solid var(--line);padding:18px 20px 24px;box-shadow:0 12px 20px var(--nav-pop-shadow);align-items:stretch;gap:3px}.main-nav.is-open{display:flex;flex-direction:column}.main-nav>a{padding:12px;font-size:.96rem}.main-nav .nav-download{margin-top:8px;font-size:.9rem}.hero{padding-top:54px}.hero-copy{text-align:left}.hero h1{font-size:clamp(2.75rem,8.8vw,4rem)}.hero .eyebrow{font-size:.64rem;letter-spacing:.12em}.hero .button-row,.platform-note{justify-content:flex-start}.hero-intro{font-size:1rem;max-width:none}.hero-detail{font-size:.9rem}.hero .button{font-size:.85rem;padding:13px 17px}.hero-visual{margin-top:25px}.workspace-sidebar{width:141px}.device-item strong{font-size:.57rem}.workspace-section-label{font-size:.54rem}.sidebar-item{font-size:.63rem}.sidebar-bottom{font-size:.5rem}.session-heading{padding-inline:14px}.session-heading strong{font-size:.75rem}.tour-tab{font-size:.6rem;padding:9px}.remote-desktop{padding:26px 19px 40px}.file-sidebar{width:66px;font-size:.5rem}.file-window-title{gap:14px}.connection-card{padding:13px 15px;gap:9px}.connection-card strong{font-size:.75rem}.connection-card span:not(.connection-icon){font-size:.65rem}.connection-icon{width:34px;height:34px}.hero-trust{font-size:.71rem;gap:19px 10px;justify-items:start;padding-block:27px}.hero-trust>span{gap:7px}.hero-trust .icon{width:16px;height:16px}.core-grid{grid-template-columns:1fr 1fr}.core-card:not(:nth-child(3n)){border-right:0}.core-card:nth-child(odd){border-right:1px solid var(--line)}.core-card:nth-child(-n+4){border-bottom:1px solid var(--line)}.core-card{padding:26px 22px}.section{padding:65px 0}.hero{padding-bottom:0}.section-heading{margin-bottom:32px}.section-heading>p:last-child{font-size:.94rem}h2{font-size:2.25rem}.eyebrow{font-size:.68rem;letter-spacing:.12em;margin-bottom:15px}} @media(max-width:480px){.hero h1{font-size:2.95rem}.hero-visual{width:100%;padding-top:12px}.workspace-sidebar{display:none}.workspace-bar{height:45px;padding-inline:13px}.session-heading{height:62px}.workspace-body{min-height:0}.tour-panel{height:230px}.remote-desktop{padding:24px 24px 36px}.file-window{height:168px}.file-window-body{height:142px}.file-sidebar{width:81px;font-size:.58rem}.folder-grid{padding:13px}.folder-grid svg{width:37px;height:30px}.session-footer{padding-block:9px}.workspace-label{font-size:.65rem}.tour-tab{font-size:.73rem;padding:10px 13px}.tour-tab .icon{width:15px;height:15px}.connection-card{margin: -7px auto 0;max-width:calc(100% - 24px);padding:12px 14px}.hero-visual figcaption{font-size:.68rem}.core-card{padding:24px 18px}.core-card h3{font-size:1rem}.core-card p{font-size:.84rem;line-height:1.65}.icon-tile{width:39px;height:39px}.hero-trust{font-size:.66rem}.hero-trust .icon{width:14px;height:14px}.hero .button-row{gap:9px}.hero .button{padding-inline:13px;font-size:.8rem}.platform-note{font-size:.7rem}.wide-only{display:none}.transfer-caption{font-size:.63rem}.transfer-tags{font-size:.63rem}.terminal-topline,.terminal-foot{font-size:.64rem}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}} /* Access and management */ .capabilities-section{background:var(--canvas);border-top:1px solid var(--section-line)}.capabilities-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.capability-card{border:1px solid var(--line);border-radius:var(--radius);padding:36px 38px;background:var(--card);overflow:hidden}.card-kicker{display:flex;align-items:center;gap:10px;color:var(--blue);font-size:.69rem;letter-spacing:.1em;font-weight:700;margin-bottom:25px}.card-kicker .icon{width:21px;height:21px}.capability-card>h3{font-size:1.95rem;font-weight:650;letter-spacing:-.04em;line-height:1.2}.capability-card>p{font-size:.95rem;margin-top:19px;line-height:1.8;max-width:440px}.check-list{list-style:none;padding:0;margin:26px 0 0}.check-list li{font-size:.79rem;color:var(--list-ink);position:relative;padding-left:24px;margin:11px 0}.check-list li::before{content:'✓';color:var(--blue);position:absolute;left:0;font-weight:650}.access-bottom{display:flex;align-items:center;justify-content:center;gap:22px;margin:34px -38px -36px;padding:26px 28px;background:var(--inset-bg);border-top:1px solid var(--inset-line)}.access-device{display:flex;flex-direction:column;align-items:center;gap:11px;font-size:.65rem;color:var(--diagram-ink)}.access-device>.icon{width:35px;height:35px;color:var(--diagram-icon)}.access-path{position:relative;align-self:flex-start;padding-top:9px;flex:1;max-width:120px;text-align:center}.access-path>span{font-size:.5rem;letter-spacing:.1em;color:var(--diagram-label);display:block;margin-bottom:8px}.access-path>div{height:1px;background:var(--diagram-line);width:100%}.access-path>.icon{width:15px;height:15px;background:var(--inset-bg);position:absolute;top:26px;left:calc(50% - 8px);color:var(--diagram-arrow)}.management-card{background:var(--mgmt-bg);border-color:var(--mgmt-line)}.management-card>p{max-width:420px}.code-preview{background:#14233e;color:#bdcde6;border-radius:11px;padding:0 19px 16px;margin-top:31px;box-shadow:0 12px 30px #3559941c}.code-preview-bar{display:flex;gap:15px;align-items:center;border-bottom:1px solid #ffffff0d;height:40px;font-size:.6rem;color:#8d9db7}.code-preview-bar .window-dots i{background:#45546b}.operation{display:flex;align-items:center;gap:15px;padding:12px 0;border-bottom:1px solid #ffffff0d;font-family:"SFMono-Regular",Consolas,monospace;font-size:.65rem;line-height:1.5}.operation>span:first-child{color:#7c97c2}.operation strong{font-weight:400}.operation-check{margin-left:auto;color:#a2c7ff;font-size:.55rem}.operation .icon{margin-left:auto;color:#a2c7ff;width:15px;height:15px}.code-preview>p{margin-top:16px;font-size:.66rem;color:#829abc}.compact-card{display:flex;align-items:flex-start;gap:22px;padding:31px}.compact-card .icon-tile{margin:0;flex-shrink:0}.compact-card h3{font-size:1.19rem;margin-top:2px}.compact-card p{font-size:.88rem;margin-top:13px;line-height:1.8}.workflow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:31px;margin-top:52px}.workflow-grid>article>.icon{width:24px;height:24px;color:var(--flow-icon);margin-bottom:17px}.workflow-grid h3{font-size:.95rem;letter-spacing:-.02em}.workflow-grid p{margin-top:12px;font-size:.83rem;line-height:1.8}.one-app-note{border-top:1px solid var(--line);display:flex;align-items:center;gap:14px;margin-top:43px;padding-top:26px}.one-app-note p{font-size:.78rem}.one-app-note strong{color:var(--note-strong);font-weight:600;margin-right:6px} /* Security */ .security-section{background:#101f39;color:#fff;position:relative}.security-top{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.security-section .eyebrow{color:#81acff}.security-section h2{font-size:clamp(2.4rem,3.5vw,3.45rem);line-height:1.13;letter-spacing:-.044em}.security-section .section-heading{margin:0}.security-section .section-heading>p:last-of-type{color:#a4b2c9;max-width:435px;font-size:.95rem;margin-top:25px;line-height:1.85}.text-link{color:#a3c2ff;font-size:.82rem;font-weight:500;display:inline-flex;gap:12px;align-items:center;margin-top:27px}.text-link .icon{width:16px;height:16px}.text-link:hover{color:#fff}.architecture{padding:26px 23px 24px;border:1px solid #344561;border-radius:14px;background:linear-gradient(150deg,#1b2c48,#15243e);min-width:0}.architecture-topline{display:flex;justify-content:space-between;align-items:center;color:#8297b7;font-size:.6rem;font-weight:600;letter-spacing:.15em}.architecture-topline>.icon{width:15px;height:15px;color:#92b6ed}.endpoints{display:flex;align-items:flex-start;margin-top:33px;gap:12px}.endpoint{display:flex;align-items:center;flex-direction:column;flex:0 0 90px}.endpoint-icon{background:#263e63;border:1px solid #45628b;border-radius:13px;width:68px;height:62px;display:grid;place-items:center;box-shadow:0 0 24px #78a6f40a}.endpoint-icon .icon{width:32px;height:32px;color:#c6deff}.endpoint strong{font-size:.73rem;margin-top:15px;font-weight:500;white-space:nowrap}.endpoint>span{font-size:.6rem;color:#8195b6;margin-top:3px;white-space:nowrap}.encrypted-path{flex:1;min-width:0;text-align:center;padding-top:10px}.encrypted-path>span{font-size:.49rem;letter-spacing:.11em;color:#8dafdf;white-space:nowrap}.path-line{display:flex;align-items:center;margin-top:7px;gap:10px}.path-line i{height:1px;background:#5a8ad5;flex:1}.path-line .icon{width:18px;height:18px;color:#89b0eb}.encrypted-path small{font-size:.62rem;color:#819bbc;display:block;margin-top:8px}.relay-path{margin:19px 42px 0;display:flex;align-items:center;gap:10px}.relay-path>div{flex:1;height:24px;border-bottom:1px dashed #456185;border-left:1px dashed #456185;border-radius:0 0 0 8px;transform:translateY(-11px)}.relay-path>div:last-child{border-left:0;border-right:1px dashed #456185;border-radius:0 0 8px 0}.relay-path>span{font-size:.59rem;color:#a1b2cc;white-space:nowrap;display:flex;gap:6px;align-items:center}.relay-path .icon{width:14px;height:14px}.architecture figcaption{font-size:.68rem;text-align:center;line-height:1.85;color:#8fa2c0;margin-top:25px}.security-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-top:64px;padding-top:39px;border-top:1px solid #2c3c57}.security-grid>article>.icon{width:26px;height:26px;color:#88b2fa;margin-bottom:21px}.security-grid h3{font-size:1.05rem;color:#e9f0fd;letter-spacing:-.025em}.security-grid p{font-size:.8rem;color:#a0b0c9;line-height:1.9;margin-top:14px}.security-details{margin-top:41px}.security-details details{border:1px solid #34435d;border-radius:9px}.security-details summary{padding:18px 23px;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:.82rem;color:#ccdaf0;cursor:pointer}.security-details summary::-webkit-details-marker{display:none}.security-details summary .icon{width:18px;height:18px;color:#8baadb;transition:transform .2s}.security-details details[open] summary .icon{transform:rotate(45deg)}.security-details summary:hover{background:#ffffff04}.security-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:29px 38px;padding:13px 26px 29px}.security-detail-grid h4{font-size:.88rem;color:#dfebfc;font-weight:550;line-height:1.5;letter-spacing:-.015em}.security-detail-grid p{font-size:.79rem;line-height:1.8;color:#9eaec7;margin-top:9px}.standards-line{display:flex;justify-content:center;flex-wrap:wrap;gap:26px;color:#98accd;margin-top:32px;font-size:.72rem}.standards-line>span:first-child{color:#6982a6;font-size:.6rem;letter-spacing:.1em;align-self:center} /* Solutions and download */ .solutions-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:25px;margin-top:54px}.solutions-grid article{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:0 22px 0 0}.solutions-grid article+article{border-left:1px solid var(--line);padding-left:23px;padding-right:0}.solutions-grid .icon{width:28px;height:28px;color:var(--blue);margin-bottom:26px}.solutions-grid h3{font-size:1rem;letter-spacing:-.025em}.solutions-grid p{font-size:.82rem;line-height:1.85;margin-top:17px;margin-bottom:25px}.solutions-grid article>span{font-size:.52rem;font-weight:600;letter-spacing:.07em;color:#6980a4;margin-top:auto;line-height:1.7}.download-section{padding:0 0 15px}.download-inner{border-radius:22px;padding:59px 63px;background:linear-gradient(115deg,#205fe9,#1550d0);display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;overflow:hidden}.download-copy{position:relative;z-index:1}.download-section .eyebrow{color:var(--band-ink);font-size:.65rem}.download-section h2{color:#fff;font-size:2.9rem;line-height:1.12}.download-copy>p:not(.eyebrow){font-size:.9rem;color:var(--band-ink);margin-top:21px;line-height:1.85}.download-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:27px}.download-actions .button{font-size:.82rem;padding:12px 18px;min-height:48px}.button-white{background:#fff;color:#1d4da9;border-color:#fff}.button-white:hover{background:#f0f5ff;box-shadow:0 6px 18px #092d7626}.button-glass{background:#ffffff0e;color:#fff;border-color:#7099ed}.button-glass:hover{background:#ffffff20;border-color:#9ab9f7}.download-copy>.download-note{font-size:.69rem!important;color:var(--band-ink)!important;margin-top:18px!important}.download-copy>.download-status{font-size:.72rem!important;color:#fff!important;margin-top:10px!important;max-width:460px}.download-status:target{background:#ffffff12;border-radius:5px;padding:8px 12px}.download-status.status-emphasis{background:#ffffff14;padding:8px 12px;border-radius:5px}.download-side{display:flex;flex-direction:column;align-items:center;gap:30px;position:relative;z-index:1}.download-brand{display:flex;flex-direction:column;align-items:center;gap:23px;padding:0 20px;color:#ffffffbf}.download-brand img{width:150px;height:150px;border:1px solid #83a9f8;border-radius:43px;box-shadow:0 30px 60px #00297424}.download-brand span{font-size:1.65rem;font-weight:650;letter-spacing:-.06em}.download-actions .button.is-disabled,.download-actions .button.is-disabled:hover{opacity:.5;cursor:not-allowed;background:#ffffff1f;color:#eaf0ffcc;border-color:#ffffff40;box-shadow:none;transform:none}.coming-soon{display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center}.coming-soon-title{font-size:.72rem;font-weight:650;letter-spacing:.03em;color:var(--band-ink);margin:0}.coming-soon-badges{display:flex;gap:11px;flex-wrap:wrap;justify-content:center}.store-badge{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:9px 15px;border-radius:11px;background:#ffffff12;border:1px solid #7099ed;color:#fff}.store-badge .icon{width:21px;height:21px;color:#fff}.store-badge>span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;text-align:left}.store-badge small{font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;color:#fff}.store-badge strong{font-size:.84rem;font-weight:600;letter-spacing:-.01em}.site-footer{padding:66px 0 0}.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:30px;padding-bottom:49px}.footer-brand p{font-size:.82rem;color:var(--foot-p);margin-top:18px}.footer-brand>span{font-size:.75rem;color:#7b8798;margin-top:6px;display:block}.footer-grid nav{display:flex;align-items:flex-start;flex-direction:column;gap:11px}.footer-grid nav h2{font-size:.81rem;letter-spacing:-.01em;font-weight:650;margin-bottom:9px}.footer-grid nav a{font-size:.76rem;color:#738095;line-height:1.5}.footer-grid a:hover,.footer-bottom a:hover{color:var(--blue)}.footer-bottom{border-top:1px solid var(--line);padding:23px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:.69rem;color:#7d899b}.footer-bottom>span:nth-child(2){margin-left:auto}.footer-bottom a{color:var(--foot-link);margin-left:25px} @media(max-width:1190px){.security-top{gap:40px}.capability-card{padding:32px}.access-bottom{margin-inline:-32px;margin-bottom:-32px}.security-grid{gap:27px}.solutions-grid{gap:14px}.solutions-grid article{padding-right:12px}.solutions-grid article+article{padding-left:17px}.solutions-grid h3{font-size:.94rem}.download-inner{padding:49px}.download-brand img{width:130px;height:130px;border-radius:39px}.download-brand span{font-size:1.45rem}.capability-card>h3{font-size:1.78rem}.architecture{padding:23px 15px}.endpoint{flex-basis:83px}.encrypted-path>span{font-size:.44rem}.endpoints{gap:5px}.operation{font-size:.57rem;gap:10px}.compact-card{padding:28px;gap:16px}} @media(max-width:980px){.capability-card{padding:29px}.capability-card>h3{font-size:1.6rem}.capability-card>p{font-size:.89rem}.access-bottom{margin-inline:-29px;margin-bottom:-29px;gap:15px}.check-list li{font-size:.73rem}.compact-card{padding:25px;gap:15px}.compact-card h3{font-size:1.05rem}.compact-card p{font-size:.84rem}.workflow-grid{gap:23px}.workflow-grid h3{font-size:.86rem}.workflow-grid p{font-size:.78rem}.security-top{grid-template-columns:1fr 1fr;gap:30px}.security-section h2{font-size:2.55rem}.security-section .eyebrow{font-size:.6rem}.security-section .section-heading>p:last-of-type{font-size:.88rem}.endpoint{flex-basis:75px}.endpoint-icon{width:57px;height:56px}.endpoint strong{font-size:.64rem}.endpoint>span{font-size:.5rem}.architecture{padding:20px 12px}.architecture-topline{font-size:.5rem}.encrypted-path>span{font-size:.38rem}.encrypted-path small{font-size:.53rem}.relay-path{margin-inline:27px}.security-grid{grid-template-columns:1fr 1fr;gap:32px 40px}.security-grid h3{font-size:1.05rem}.security-grid p{font-size:.87rem}.solutions-grid{grid-template-columns:repeat(3,1fr);gap:32px}.solutions-grid article{padding:0}.solutions-grid article+article{padding:0;border:0}.solutions-grid h3{font-size:1.05rem}.solutions-grid p{font-size:.85rem}.solutions-grid article>span{font-size:.56rem}.download-inner{padding:43px}.download-section h2{font-size:2.55rem}.download-brand{padding:0}.download-brand img{width:104px;height:104px;border-radius:31px}.download-brand span{font-size:1.22rem}.download-actions .button{font-size:.75rem;padding-inline:15px}.footer-grid{gap:25px;grid-template-columns:1.3fr 1fr 1fr 1fr}.footer-brand .brand{font-size:1.2rem}.footer-brand p{font-size:.76rem}.footer-brand>span{font-size:.65rem}.footer-grid nav a{font-size:.71rem}.footer-bottom{font-size:.64rem}} @media(max-width:760px){.capabilities-grid{grid-template-columns:1fr;gap:18px}.capability-card{padding:31px}.capability-card>h3{font-size:1.95rem}.capability-card>p{font-size:.96rem;max-width:none}.check-list li{font-size:.82rem}.access-bottom{margin-inline:-31px;margin-bottom:-31px}.access-device{font-size:.75rem}.operation{font-size:.74rem}.operation-check{font-size:.65rem}.code-preview-bar{font-size:.69rem}.code-preview>p{font-size:.74rem}.compact-card{padding:27px}.compact-card h3{font-size:1.17rem}.compact-card p{font-size:.91rem}.workflow-grid{grid-template-columns:1fr 1fr;gap:32px 25px;margin-top:38px}.workflow-grid h3{font-size:1rem}.workflow-grid p{font-size:.87rem}.one-app-note{align-items:flex-start}.one-app-note img{margin-top:3px}.one-app-note p{font-size:.81rem}.one-app-note strong{display:block;margin-bottom:5px}.security-top{grid-template-columns:1fr;gap:36px}.security-section h2{font-size:2.6rem}.security-section .eyebrow{font-size:.65rem}.security-section .section-heading>p:last-of-type{font-size:.97rem;max-width:540px}.architecture{padding:25px;max-width:530px;width:100%}.architecture-topline{font-size:.61rem}.endpoints{gap:10px}.endpoint{flex-basis:95px}.endpoint-icon{width:68px;height:62px}.endpoint strong{font-size:.76rem}.endpoint>span{font-size:.6rem}.encrypted-path>span{font-size:.5rem}.encrypted-path small{font-size:.62rem}.relay-path{margin-inline:41px}.relay-path>span{font-size:.67rem}.architecture figcaption{font-size:.74rem}.security-grid{margin-top:40px;gap:30px}.security-grid p{font-size:.86rem;line-height:1.85}.security-detail-grid{grid-template-columns:1fr;gap:24px;padding:12px 22px 27px}.security-details summary{padding:18px;font-size:.83rem}.security-detail-grid h4{font-size:.92rem}.security-detail-grid p{font-size:.85rem}.standards-line{gap:13px 22px;font-size:.73rem}.standards-line>span:first-child{flex-basis:100%;text-align:center;font-size:.61rem}.solutions-grid{grid-template-columns:1fr 1fr;gap:35px 29px;margin-top:40px}.solutions-grid article>span{font-size:.54rem}.download-inner{padding:38px 30px;border-radius:18px;flex-direction:column;align-items:stretch;gap:34px}.download-brand{display:none}.download-side{width:100%;align-items:flex-start}.coming-soon{align-items:flex-start;text-align:left}.download-section h2{font-size:2.5rem}.download-copy>p:not(.eyebrow){font-size:.89rem}.download-actions .button{font-size:.78rem;padding-inline:14px}.footer-grid{grid-template-columns:repeat(3,1fr);gap:29px 22px;padding-bottom:35px}.footer-brand{grid-column:1/-1;margin-bottom:5px}.footer-brand .brand{font-size:1.4rem}.footer-brand p{font-size:.84rem;margin-top:12px}.footer-brand>span{font-size:.77rem}.footer-grid nav a{font-size:.77rem}.footer-grid nav h2{font-size:.86rem}.footer-bottom{flex-wrap:wrap;gap:12px;font-size:.7rem}.footer-bottom>span:nth-child(2){margin-left:0}.footer-bottom>span:first-child{flex-basis:100%}.footer-bottom>a{margin-left:auto}.site-footer{padding-top:44px}} @media(max-width:480px){.capability-card{padding:27px 24px}.capability-card>h3{font-size:1.7rem}.capability-card>p{font-size:.9rem}.access-bottom{margin-inline:-24px;margin-bottom:-27px;gap:13px}.access-device{font-size:.66rem}.check-list li{font-size:.75rem}.operation{font-size:.61rem;gap:9px}.operation-check{font-size:.53rem}.compact-card{gap:15px}.compact-card .icon-tile{width:36px;height:36px}.compact-card h3{font-size:1.1rem}.compact-card p{font-size:.85rem}.workflow-grid h3{font-size:.95rem}.workflow-grid p{font-size:.81rem}.security-section h2{font-size:2.37rem}.architecture{padding:24px 14px}.endpoint{flex-basis:82px}.endpoint-icon{width:58px;height:57px}.endpoint strong{font-size:.68rem}.endpoint>span{font-size:.53rem}.encrypted-path>span{font-size:.41rem}.encrypted-path small{font-size:.55rem}.endpoints{gap:5px}.architecture-topline{font-size:.56rem}.security-grid{gap:28px 22px}.security-grid h3{font-size:1rem;line-height:1.3}.security-grid p{font-size:.82rem}.solutions-grid{gap:32px 25px}.solutions-grid p{font-size:.85rem}.solutions-grid h3{font-size:1rem}.solutions-grid article>span{font-size:.51rem}.download-inner{padding:35px 24px}.download-section h2{font-size:2.05rem}.download-copy>p:not(.eyebrow){font-size:.85rem}.download-actions{flex-direction:column;align-items:stretch}.download-actions .button{font-size:.86rem;min-height:50px}.footer-grid{grid-template-columns:1fr 1fr;row-gap:30px}.footer-grid nav:last-child{grid-column:1/-1}.footer-bottom{font-size:.62rem}} @media(max-width:360px){.container{width:calc(100% - 32px)}.hero h1{font-size:2.6rem}.hero .button-row{flex-direction:column;align-items:stretch}.hero-trust{grid-template-columns:1fr;font-size:.8rem}.core-grid{grid-template-columns:1fr}.core-card:nth-child(odd){border-right:0}.core-card:not(:last-child){border-bottom:1px solid var(--line)}.core-card p{font-size:.9rem}.security-grid,.solutions-grid,.workflow-grid{grid-template-columns:1fr}.security-grid p,.solutions-grid p,.workflow-grid p{font-size:.92rem}.security-section h2{font-size:2.1rem}.encrypted-path>span{font-size:.35rem}.endpoints{gap:0}.endpoint{flex-basis:74px}.download-section h2{font-size:1.9rem}} @media print{.site-header{position:static}.menu-toggle,.skip-link,.button-row,.download-actions,.download-status{display:none!important}.section{padding:30px 0}.container{width:100%}.hero-grid{display:block}.hero-visual{width:600px;max-width:100%;margin:20px auto}.security-section{-webkit-print-color-adjust:exact;print-color-adjust:exact}.capability-card,.core-card,.solutions-grid article,.security-grid article{break-inside:avoid}.site-footer{padding-top:30px}} /* Supplied VardaDesk vector identity; the original is preserved in assets. */ .brand{gap:8px}.brand .brand-symbol{width:37px;height:37px;object-fit:contain}.brand .brand-wordmark{width:142px;height:auto}.mini-brand img{width:24px;height:24px}.download-brand img{width:155px;height:155px;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 18px 20px #09296840)} @media(max-width:1190px){.brand .brand-symbol{width:34px;height:34px}.brand .brand-wordmark{width:127px}.main-nav{gap:18px}} @media(max-width:980px) and (min-width:761px){.brand .brand-symbol{width:29px;height:29px}.brand .brand-wordmark{width:105px}.main-nav{gap:12px}} @media(max-width:760px){.brand .brand-symbol{width:35px;height:35px}.brand .brand-wordmark{width:138px}} /* Reading sizes and contrast for the marketing content. */ .core-card p,.capability-card>p,.compact-card p,.workflow-grid p,.security-grid p,.solutions-grid p{font-size:1rem;line-height:1.75}.main-nav{font-size:.875rem}.footer-grid nav a{font-size:.875rem;color:var(--foot-ink)}.footer-grid nav h2{font-size:.875rem}.footer-bottom{color:var(--foot-ink);font-size:.75rem}.footer-brand>span{color:var(--foot-span);font-size:.875rem}.hero-visual figcaption{color:var(--cap-ink)}.tour-tab{color:#56647b;min-height:39px;font-size:.75rem}.tour-tab .icon{width:14px;height:14px}.standards-line>span:first-child{color:#9aaecb;font-size:.75rem}.security-section .section-heading>p:last-of-type,.download-copy>p:not(.eyebrow):not(.download-note):not(.download-status){font-size:1rem}.architecture-topline{font-size:.75rem}.card-kicker{font-size:.75rem}.security-detail-grid p{font-size:.9375rem}.solutions-grid article>span{display:none}.one-app-note p{font-size:.875rem} @media(max-width:1190px) and (min-width:981px){.main-nav{font-size:.8rem;gap:16px}} @media(max-width:980px) and (min-width:761px){.main-nav{font-size:.75rem;gap:11px}.main-nav .button-small{font-size:.75rem}} @media(max-width:760px){.main-nav>a{font-size:1rem}.footer-bottom{font-size:.75rem}.architecture-topline{font-size:.65rem}} @media(max-width:480px){.core-card h3{font-size:1.03rem}.core-card p{font-size:.9375rem}.core-card{padding:24px 16px}.workflow-grid,.security-grid{column-gap:20px}.workflow-grid p,.security-grid p,.solutions-grid p{font-size:.9375rem}.footer-grid nav a{font-size:.84rem}} /* The reading experience and navigation remain available without JavaScript. */ .download-section a:focus-visible,.download-section [tabindex]:focus-visible{outline:3px solid #fff;outline-offset:5px} /* --- Language switch ------------------------------------------------------- The same control as the downloads page at get.vardadesk.com, down to the two-letter labels and the pill shape, so the two sites read as one product and whoever adds theming next has one pattern to theme rather than two. It lives in .header-end, outside .main-nav, because .main-nav collapses into a hamburger menu below 760px and the way out of a language the visitor cannot read must never be behind a menu. The current language is a , not a link to the page you are already on. */ .header-end{display:flex;align-items:center;gap:10px} /* Three children in the header now (brand, nav, end), so the nav is pulled right explicitly instead of relying on space-between to do it. */ .main-nav{margin-left:auto} .lang-switch{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card)} .lang-switch>a,.lang-switch>span{display:grid;place-items:center;min-height:34px;padding:0 12px;font-size:.75rem;font-weight:700;letter-spacing:.04em;color:var(--muted);white-space:nowrap} .lang-switch>a:hover{background:var(--soft-blue);color:var(--blue)} .lang-switch>[aria-current]{background:var(--btn-bg);color:var(--btn-ink)} @media(max-width:760px){.lang-switch>a,.lang-switch>span{min-height:36px;padding:0 11px}} /* The switch costs the header about 80px, which is enough to push the nav text onto two lines in the band just above the hamburger breakpoint. Giving the gaps and the wordmark back closes almost all of it; at the last ~25px before the menu takes over, one nav label still wraps, inside a header that has the height for it. */ @media(max-width:980px) and (min-width:761px){.header-inner{gap:14px}.main-nav{gap:10px}.main-nav .button-small{padding:8px 9px}.brand .brand-wordmark{width:96px}} /* --- The product tour is a picture, so it does not invert -------------------- .workspace and the card overlapping it are a screenshot of the application: its own window chrome, its own sidebar, its own file manager. A screenshot does not turn dark because the page around it did, and half-converting sixty hand-placed greys would read as broken rather than as dark. So the subtree re-declares the daylight tokens it inherits and keeps them in both themes — one rule instead of a second set of colours to maintain, and nothing to remember when a token moves. Text colour has to come along: most of the labels in there inherit it from the page. */ .workspace,.connection-card{--blue:#2463eb;--blue-hover:#164cc3;--ink:#16243e;--muted:#5e6b80;--line:#e3e8f0;color:var(--ink)} /* --- dark ------------------------------------------------------------------- The same palette as get.vardadesk.com and vu.vardadesk.com, so the three read as one product in either theme: a canvas below the brand navy, cards raised on it, headings the brightest text. --blue moves and --btn-bg does not. A link has to lift off a dark background to be a link, so --blue gets lighter; a solid button painted that colour could not carry white text, so the button keeps VardaDesk blue. Three regions sit this out, and all three are deliberate: the product tour above, which is a photograph of the app; the security band and the two terminal surfaces, which are already dark in daylight and are the one piece of this page that needed no work; and the download band, which is the brand's blue in both themes — its text was lightened to clear AA on it, in daylight as well as here. The palette is CSS and not script, so a visitor whose machine asks for dark gets dark with nothing in the way: no script runs before the first paint, so there is nothing for a flash to happen between. assets/theme.js carries only an explicit override, which is the [data-theme] half below. The two blocks hold the same declarations and must stay in step — the first answers the operating system, the second a visitor who overrode it. They cannot be one rule because one of them lives in a media query, and light-dark(), which would collapse them, is dropped as an invalid value by anything older than 2024 — taking the colour with it rather than falling back. -------------------------------------------------------------------- */ @media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--blue:#83aeff;--blue-hover:#a6c6ff;--navy:#f3f7fd;--ink:#e9eff9;--muted:#a8b7d1;--line:#28334f;--canvas:#0e1728;--soft-blue:#1a2a4d;--shadow:0 24px 65px -25px #000000a6; --page:#0a111e;--card:#121d35;--header-bg:#0a111eeb;--header-line:#26315080;--section-line:#1b2440;--hero-bg:linear-gradient(115deg,#0b1424 20%,#101d36 100%);--tile-bg:#1a2a4d;--inset-bg:#0e1830;--inset-line:#263150;--mgmt-bg:#101a2f;--mgmt-line:#263150;--quiet-line:#3f5078;--nav-pop-shadow:#00000066; --btn-bg:#2b6bef;--btn-hover:#3f80f5;--btn-ink:#fff; --nav-ink:#b9c6dd;--intro-ink:#c6d2e6;--note-ink:#a8b7d1;--note-icon:#93a3c0;--trust-ink:#a8b7d1;--trust-icon:#8fb0e8;--trust-line:#263150;--cap-ink:#a8b7d1;--list-ink:#a8b7d1;--flow-icon:#8fb0e8;--note-strong:#dbe4f3;--foot-p:#a8b7d1;--foot-ink:#a8b7d1;--foot-span:#93a3c0;--foot-link:#a8b7d1; --diagram-ink:#a8b7d1;--diagram-icon:#83aeff;--diagram-label:#93a3c0;--diagram-line:#33456e;--diagram-arrow:#83aeff; color-scheme:dark;}} :root[data-theme="dark"]{--blue:#83aeff;--blue-hover:#a6c6ff;--navy:#f3f7fd;--ink:#e9eff9;--muted:#a8b7d1;--line:#28334f;--canvas:#0e1728;--soft-blue:#1a2a4d;--shadow:0 24px 65px -25px #000000a6; --page:#0a111e;--card:#121d35;--header-bg:#0a111eeb;--header-line:#26315080;--section-line:#1b2440;--hero-bg:linear-gradient(115deg,#0b1424 20%,#101d36 100%);--tile-bg:#1a2a4d;--inset-bg:#0e1830;--inset-line:#263150;--mgmt-bg:#101a2f;--mgmt-line:#263150;--quiet-line:#3f5078;--nav-pop-shadow:#00000066; --btn-bg:#2b6bef;--btn-hover:#3f80f5;--btn-ink:#fff; --nav-ink:#b9c6dd;--intro-ink:#c6d2e6;--note-ink:#a8b7d1;--note-icon:#93a3c0;--trust-ink:#a8b7d1;--trust-icon:#8fb0e8;--trust-line:#263150;--cap-ink:#a8b7d1;--list-ink:#a8b7d1;--flow-icon:#8fb0e8;--note-strong:#dbe4f3;--foot-p:#a8b7d1;--foot-ink:#a8b7d1;--foot-span:#93a3c0;--foot-link:#a8b7d1; --diagram-ink:#a8b7d1;--diagram-icon:#83aeff;--diagram-label:#93a3c0;--diagram-line:#33456e;--diagram-arrow:#83aeff; color-scheme:dark;} /* --- the theme control ------------------------------------------------------ One button, not a segmented pair like the language switch beside it, and the same button on all three sites. Language is a choice between two things a visitor can name, so it shows both and marks one. Appearance has a single sensible target at a time, and the header at 375px — brand, language switch, hamburger — has room for a 36px control and not for a third segment. It sits in .header-end with the language switch, outside .main-nav, which is where the language switch already had to be: that menu collapses into a hamburger below 760px, and a control nobody can find is not a control. It goes first in the strip so the two things already anchored to the right edge keep their places. It shows the icon of the theme it will give you, which is also what the label says. The accessible name stays put ("Dark theme") and aria-pressed carries the state, so a screen reader announces a toggle rather than a button whose name changes underneath it. Hidden without JavaScript (see the