/* Theme Name: GateKey Docs Theme URI: https://docs.gatekey.money/ Author: Priya Think and Development Software Private Limited Author URI: https://www.thinkanddevelop.co.in/ Description: designed and developed by Priya Think and Development Software Private Limited Version: 1.0.7 Requires at least: 5.8 Requires PHP: 7.4 Tested up to: 6.6 Text Domain: GateKey Docs Tags: two-columns, three-columns, custom-menu, custom-colors, developer, documentation, elementor */ :root{ --bg:#FFFFFF; --panel:#F7F8FA; --panel-2:#EFF1F5; --border:#E2E5EB; --ink:#12172A; --ink-dim:#586178; --ink-faint:#94A0B8; --accent:#1A9E5C; --accent-dim:rgba(26,158,92,.10); --post:#1A9E5C; --put:#1A9E5C; --delete:#D6483B; --get:#2563EB; --radius:8px; --mono:'JetBrains Mono', ui-monospace, monospace; --sans:'Inter', system-ui, sans-serif; --code-ink:#2B3245; --shadow:rgba(18,23,42,.08); } /* Dark mode — toggled by setting data-theme="dark" on */ html[data-theme="dark"]{ --bg:#0B0F19; --panel:#111827; --panel-2:#182234; --border:#232E45; --ink:#EDF0F7; --ink-dim:#9AA5BD; --ink-faint:#66718C; --accent:#2FC17A; --accent-dim:rgba(47,193,122,.14); --post:#34C77E; --put:#2FC17A; --delete:#EB6459; --get:#5B9CFF; --code-ink:#C6CDE0; --shadow:rgba(0,0,0,.35); } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6; transition:background-color .2s ease, color .2s ease;} a{color:inherit;text-decoration:none;} img{max-width:100%;height:auto;} ::selection{background:var(--accent-dim);color:var(--ink);} .topbar,.sidebar,.codepanel,.code-block,.baseurl,.callout,.nav-link,.method-badge,.env-pill,.merchant-login,.theme-toggle{ transition:background-color .2s ease, border-color .2s ease, color .2s ease; } .shell{display:grid;grid-template-columns:260px 1fr 400px;min-height:100vh;} @media (max-width:1150px){ .shell{grid-template-columns:240px 1fr;} .codepanel{display:none;} } @media (max-width:760px){ .shell{grid-template-columns:1fr;} .sidebar{display:none;} } .topbar{grid-column:1/-1;display:flex;align-items:center;gap:16px;padding:0 24px;height:56px; border-bottom:1px solid var(--border);background:var(--panel);position:sticky;top:0;z-index:30;} .brand{display:flex;align-items:center;gap:10px;font-weight:700;} .brand img{display:block;height:20px;width:auto;} .brand-name{font-family:var(--mono);font-size:14px;} .brand-name b{color:var(--accent);} /* Light/dark logo swap — only one is shown depending on data-theme on . These use the same "class + element" specificity as ".brand img" above so they actually win instead of being overridden by it. */ .brand img.brand-logo-dark{display:none;} html[data-theme="dark"] .brand img.brand-logo-light{display:none;} html[data-theme="dark"] .brand img.brand-logo-dark{display:block;} .topbar-search{flex:1;max-width:420px;display:flex;align-items:center;gap:8px; background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius); padding:7px 12px;color:var(--ink-faint);font-family:var(--mono);font-size:13px;} .topbar-search input{background:none;border:0;outline:0;color:var(--ink);font-family:var(--mono);font-size:13px;width:100%;} .topbar-search kbd{font-family:var(--mono);font-size:11px;color:var(--ink-faint);border:1px solid var(--border);border-radius:4px;padding:1px 5px;} .topbar-right{margin-left:auto;display:flex;gap:10px;align-items:center;} /* Merchant Login link — replaces the old "Sandbox" env pill */ .merchant-login{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--accent); background:var(--accent-dim);border:1px solid rgba(26,158,92,.25);padding:6px 12px; border-radius:999px;display:flex;align-items:center;gap:6px;} html[data-theme="dark"] .merchant-login{border-color:rgba(47,193,122,.3);} .merchant-login:hover{background:var(--accent);color:#fff;} .merchant-login svg{flex:none;} /* Day/night toggle */ .theme-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:32px; border-radius:8px;border:1px solid var(--border);background:var(--panel-2);color:var(--ink-dim); cursor:pointer;flex:none;} .theme-toggle:hover{color:var(--ink);border-color:var(--ink-faint);} .theme-toggle .icon-sun,.theme-toggle .icon-moon{font-size:15px;line-height:1;} .theme-toggle .icon-moon{display:none;} html[data-theme="dark"] .theme-toggle .icon-sun{display:none;} html[data-theme="dark"] .theme-toggle .icon-moon{display:block;} /* Mobile hamburger */ .menu-toggle{display:none;background:none;border:1px solid var(--border);border-radius:6px;padding:6px 8px;cursor:pointer;} .menu-toggle span{display:block;width:16px;height:2px;background:var(--ink);margin:3px 0;} @media (max-width:760px){ .menu-toggle{display:inline-block;} .topbar-search{max-width:none;} } .sidebar{border-right:1px solid var(--border);padding:20px 12px 40px;overflow-y:auto; position:sticky;top:56px;height:calc(100vh - 56px);background:var(--bg);} .sidebar-group{margin-bottom:22px;} .sidebar-group h4{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-faint);padding:0 10px;margin:0 0 6px;font-weight:600;} .sidebar-subhead{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase; color:var(--ink-faint);opacity:.75;padding:10px 10px 4px;margin:0;} .sidebar-subhead:first-of-type{padding-top:0;} .nav-link{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;font-size:13.5px;color:var(--ink-dim);position:relative;} .nav-link:hover{background:var(--panel-2);color:var(--ink);} .nav-link.active{background:var(--accent-dim);color:var(--accent);font-weight:600;} .nav-link .beacon{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;opacity:0;margin-left:auto;} .nav-link.active .beacon{opacity:1;animation:pulse 1.8s ease-in-out infinite;} .nav-link .method-dot{width:6px;height:6px;border-radius:50%;flex:none;} .nav-link .dot-spacer{background:transparent;} /* Every sidebar row reserves the same icon column so labels line up on one even vertical rule, whether the row is an endpoint (colored dot) or a plain link (invisible spacer of the same size). */ .sidebar-group{display:flex;flex-direction:column;} @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(26,158,92,.4);}50%{box-shadow:0 0 0 4px rgba(26,158,92,0);}} /* Must be taken out of grid flow on EVERY viewport size, not just mobile — otherwise this being a normal static-positioned grid child shifts every column after it by one slot on desktop. */ .nav-overlay{position:fixed;inset:0;display:none;z-index:50;background:rgba(18,23,42,.45);} body.nav-open .nav-overlay{display:block;} /* Off-canvas sidebar on mobile */ @media (max-width:760px){ .sidebar{display:block;position:fixed;left:0;top:0;bottom:0;height:100dvh;width:82%;max-width:300px;z-index:60; transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 0 0 100vw rgba(0,0,0,0);} body.nav-open .sidebar{transform:translateX(0);box-shadow:20px 0 60px rgba(0,0,0,.15);} } /* Prevent the page behind the drawer from scrolling while it's open — otherwise fixed sidebar/overlay stay put but the content behind them shifts, exposing gaps like the one under a too-short sidebar. */ body.nav-open{overflow:hidden;} main{padding:40px 48px 120px;max-width:760px;} @media (max-width:760px){ main{padding:24px 18px 100px;} } /* Only one "page" (Introduction / an endpoint / Signature Generation / WordPress Plugin) is shown at a time — sidebar links behave like page loads rather than scroll-to-anchor. */ .vx-page{display:none;} .vx-page.active{display:block;padding-top:0!important;border-top:0!important;margin-top:0!important;} .intro h1{font-size:32px;margin:0 0 6px;letter-spacing:-.02em;} .intro .intro-tagline{font-size:16px;font-weight:600;color:var(--accent);margin:0 0 18px;} .intro .lede{color:var(--ink-dim);font-size:16px;max-width:60ch;margin:0 0 16px;} .intro .lede p{margin:0 0 16px;} .intro .lede p:last-child{margin-bottom:0;} .baseurl{font-family:var(--mono);font-size:13px;background:var(--panel);border:1px solid var(--border); border-radius:var(--radius);padding:12px 14px;color:var(--ink-dim);margin-bottom:24px;word-break:break-all;} .baseurl b{color:var(--ink);} .base-urls{display:flex;flex-direction:column;gap:10px;margin:0 0 28px;} .base-urls .baseurl{margin-bottom:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;} .base-urls .baseurl code{font-family:var(--mono);color:var(--ink);word-break:break-all;} .env-label{font-family:var(--mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em; border-radius:5px;padding:3px 9px;flex:none;} .env-label.env-staging{color:var(--put);background:rgba(26,158,92,.10);} .env-label.env-live{color:var(--post);background:rgba(26,158,92,.10);} .callout{ background:rgba(214,72,59,.06);border:1px solid rgba(214,72,59,.25); border-radius:var(--radius);padding:14px 16px;margin-bottom:40px; font-size:13.5px;color:var(--ink-dim); } .callout b{color:var(--delete);font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em;display:block;margin-bottom:4px;} .endpoint{padding-top:56px;border-top:1px solid var(--border);margin-top:8px;} .endpoint:first-of-type{border-top:0;} .endpoint-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap;} .method-badge{font-family:var(--mono);font-weight:700;font-size:12px;padding:3px 8px;border-radius:5px;} .m-post{background:rgba(26,158,92,.10);color:var(--post);} .m-get{background:rgba(37,99,235,.10);color:var(--get);} .m-put{background:rgba(26,158,92,.10);color:var(--put);} .m-delete{background:rgba(214,72,59,.10);color:var(--delete);} .endpoint-path{font-family:var(--mono);font-size:15px;color:var(--ink);word-break:break-all;} .endpoint h2{font-size:20px;margin:0 0 8px;} .endpoint p.desc{color:var(--ink-dim);margin:0 0 22px;max-width:60ch;} .warn-inline{ display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px; color:var(--delete);background:rgba(214,72,59,.07);border:1px solid rgba(214,72,59,.25); padding:3px 8px;border-radius:5px;margin-left:4px;vertical-align:middle; } h3.section-label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em; color:var(--ink-faint);margin:26px 0 10px;font-weight:600;} table.params{width:100%;border-collapse:collapse;font-size:13.5px;display:block;overflow-x:auto;} table.params th{text-align:left;color:var(--ink-faint);font-weight:600;font-size:11px;text-transform:uppercase; letter-spacing:.05em;padding:0 0 8px;border-bottom:1px solid var(--border);white-space:nowrap;} table.params td{padding:10px 12px 10px 0;border-bottom:1px solid var(--border);vertical-align:top;} table.params tr:last-child td{border-bottom:0;} .param-name{font-family:var(--mono);color:var(--ink);} .param-type{font-family:var(--mono);color:var(--accent);font-size:12px;} .param-req{font-size:11px;color:var(--delete);font-family:var(--mono);} .param-opt{font-size:11px;color:var(--ink-faint);font-family:var(--mono);} .param-desc{color:var(--ink-dim);} .status-row{display:flex;gap:8px;align-items:center;margin:14px 0 6px;flex-wrap:wrap;} .status-code{font-family:var(--mono);font-size:12px;font-weight:700;padding:2px 7px;border-radius:4px;} .s-200{background:rgba(26,158,92,.10);color:var(--post);} .s-400{background:rgba(26,158,92,.10);color:var(--put);} .s-401{background:rgba(214,72,59,.10);color:var(--delete);} .status-desc{color:var(--ink-dim);font-size:13px;} /* Mobile "view code" trigger — shown only when the sticky code panel is hidden */ .mobile-code-btn{display:none;} @media (max-width:1150px){ .mobile-code-btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px; background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:7px 12px;cursor:pointer;color:var(--ink-dim);margin-top:10px;} .mobile-code-btn:hover{color:var(--ink);border-color:var(--ink-faint);} } .codepanel{border-left:1px solid var(--border);padding:20px;position:sticky;top:56px; height:calc(100vh - 56px);overflow-y:auto;} .code-block{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:16px;} .code-tabs{display:flex;border-bottom:1px solid var(--border);} .code-tab{font-family:var(--mono);font-size:12px;padding:9px 14px;color:var(--ink-faint);cursor:pointer;border-bottom:2px solid transparent;} .code-tab.active{color:var(--ink);border-bottom-color:var(--accent);} .code-body{padding:16px;font-family:var(--mono);font-size:12px;color:var(--code-ink);overflow-x:auto;white-space:pre;line-height:1.6;} .code-body .kw{color:var(--accent);} .code-body .str{color:var(--post);} .code-body .com{color:var(--ink-faint);} .code-lang-content{display:none;} .code-lang-content.active{display:block;} .copy-btn{position:absolute;top:9px;right:12px;font-family:var(--mono);font-size:11px;color:var(--ink-faint); background:none;border:1px solid var(--border);border-radius:5px;padding:3px 8px;cursor:pointer;} .copy-btn:hover{color:var(--ink);border-color:var(--ink-faint);} .code-block-wrap{position:relative;} .resp-label{font-family:var(--mono);font-size:11px;color:var(--ink-faint);text-transform:uppercase; letter-spacing:.06em;margin:20px 0 8px;} .resp-note{font-size:11px;color:var(--ink-faint);margin:-4px 0 12px;font-style:italic;} /* Mobile bottom-sheet modal for code (reuses same markup as .codepanel) */ .code-modal{display:none;position:fixed;inset:0;z-index:80;} .code-modal.open{display:block;} .code-modal .modal-overlay{position:absolute;inset:0;background:rgba(18,23,42,.5);} .code-modal .modal-sheet{position:absolute;left:0;right:0;bottom:0;max-height:82vh;overflow-y:auto; background:var(--bg);border-radius:16px 16px 0 0;padding:16px 16px 30px;box-shadow:0 -10px 40px rgba(0,0,0,.2);} .code-modal .modal-handle{width:36px;height:4px;border-radius:4px;background:var(--border);margin:0 auto 14px;} .code-modal .modal-close{position:absolute;top:14px;right:16px;background:none;border:0;font-size:20px;color:var(--ink-faint);cursor:pointer;} /* Elementor / WP admin bar friendliness */ .admin-bar .topbar{top:32px;} @media screen and (max-width:782px){ .admin-bar .topbar{top:46px;} } ::-webkit-scrollbar{width:9px;height:9px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:var(--border);border-radius:20px;} /* Elementor canvas pages that embed [vaultx_docs] shouldn't fight theme padding */ .elementor-page .shell{min-height:auto;} /* WordPress plugin installation section (injected after Payment-Status) */ .doc-section{padding-top:56px;border-top:1px solid var(--border);margin-top:8px;} .doc-section .plugin-icon{display:inline-flex;align-items:center;justify-content:center; width:36px;height:36px;border-radius:8px;background:var(--accent-dim);color:var(--accent);margin-bottom:14px;} .doc-section h2{font-size:20px;margin:0 0 8px;} .doc-section p.desc{color:var(--ink-dim);margin:0 0 20px;max-width:60ch;} .plugin-download{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px; font-weight:600;color:#fff;background:var(--accent);border-radius:var(--radius);padding:10px 18px;margin-bottom:28px;} .plugin-download:hover{opacity:.9;} ol.plugin-steps{margin:0 0 8px;padding-left:20px;color:var(--ink-dim);font-size:14px;} ol.plugin-steps li{margin-bottom:10px;} ol.plugin-steps code{font-family:var(--mono);font-size:12.5px;color:var(--ink);background:var(--panel); border:1px solid var(--border);border-radius:4px;padding:1px 6px;} /* Overview page quick-links grid */ .quick-links{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 8px;} @media (max-width:600px){ .quick-links{grid-template-columns:1fr;} } .quick-link{display:flex;flex-direction:column;gap:3px;background:var(--panel);border:1px solid var(--border); border-radius:var(--radius);padding:14px 16px;color:var(--ink-dim);} .quick-link:hover{border-color:var(--ink-faint);color:var(--ink);} .quick-link b{color:var(--ink);font-size:13.5px;} .quick-link span{font-size:12.5px;} /* Prerequisites / Merchant Portal simple lists */ ul.req-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;} ul.req-list li{padding-left:20px;position:relative;color:var(--ink-dim);font-size:14px;} ul.req-list li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--accent);} ul.req-list li b{display:block;color:var(--ink);font-size:14px;margin-bottom:2px;} ul.req-list li span{font-size:13px;} ul.portal-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;} @media (max-width:600px){ ul.portal-grid{grid-template-columns:1fr;} } /* FAQ accordion */ .faq-list{display:flex;flex-direction:column;gap:8px;margin-top:8px;} .faq-item{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:2px 16px;} .faq-item summary{cursor:pointer;padding:14px 0;font-size:14px;font-weight:600;color:var(--ink);list-style:none;} .faq-item summary::-webkit-details-marker{display:none;} .faq-item summary::before{content:"+";display:inline-block;width:16px;color:var(--accent);font-weight:700;} .faq-item[open] summary::before{content:"–";} .faq-item p{color:var(--ink-dim);font-size:13.5px;margin:0 0 16px 16px;max-width:60ch;} /* Signature generation section */ .sig-headers{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0 24px;} .sig-headers th{text-align:left;color:var(--ink-faint);font-weight:600;font-size:11px;text-transform:uppercase; letter-spacing:.05em;padding:0 0 8px;border-bottom:1px solid var(--border);} .sig-headers td{padding:9px 12px 9px 0;border-bottom:1px solid var(--border);vertical-align:top;color:var(--ink-dim);} .sig-headers tr:last-child td{border-bottom:0;} .sig-headers code{font-family:var(--mono);font-size:12.5px;color:var(--accent);} .sig-formula{font-family:var(--mono);font-size:13px;color:var(--ink);background:var(--panel); border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin:0 0 24px; overflow-x:auto;white-space:pre;line-height:1.7;}