/* ========================================================================== /assets/css/wsc-skin.css — World Space ID in the World Space Council look. Presentation only: colours, type, corners and chrome. It is loaded last on every page, so it restyles the existing markup without touching any script, form, API call or behaviour. Light (default) and dark mode both follow the World Space Council palette: navy ink #0B1E3D, deep navy #050E1F, gold #FFBF00 on paper #F7F8FB, Figtree, square 3px corners. ========================================================================== */ :root{ --wsc-ink:#0B1E3D;--wsc-deep:#050E1F;--wsc-navy2:#0F2A52;--wsc-gold:#FFBF00;--wsc-gold-dim:#7A5C00; --wsc-paper:#F7F8FB;--wsc-paper-alt:#EDF0F7;--wsc-steel:#4A5A7D;--wsc-line:#D8DEEA; --gold:#FFBF00;--gold-2:#7A5C00;--gold-3:#E0A800;--on-accent:#050E1F; --success:#1B7A3D;--danger:#B3261E;--ease:cubic-bezier(.16,.8,.24,1); --black:#F7F8FB;--deep:#FFFFFF;--cosmic:#EDF0F7;--nebula:#1E4FA3;--nebula-2:#3D6FC4; --ink:#0B1E3D;--muted:#4A5A7D;--muted2:#7C89A6; --line:#D8DEEA;--line-soft:#E6EAF2;--glass:#FFFFFF;--glass2:#EDF0F7; --platinum:#EDF0F7;--titanium:#4A5A7D;--radius:3px; } [data-theme="dark"]{ --gold:#FFBF00;--gold-2:#FFBF00;--gold-3:#E0A800;--on-accent:#050E1F; --success:#2FD46B;--danger:#FF6B61; --black:#050E1F;--deep:#0B1E3D;--cosmic:#0F2A52;--nebula:#6FA3FF;--nebula-2:#9CC0FF; --ink:#FFFFFF;--muted:rgba(255,255,255,.68);--muted2:rgba(255,255,255,.45); --line:rgba(255,255,255,.14);--line-soft:rgba(255,255,255,.08); --glass:rgba(255,255,255,.04);--glass2:rgba(255,255,255,.08); } /* Surfaces that are always navy (status strips, card visuals, the public hero): they keep the bright gold and white text in both modes. */ body > .topbar,body > header,.hero,.hero-card,.db-card,.vcard,.tier-card,.center-card,#fullCard,.wsc-dark,.api-mock,.cta-block,.oneid-hub,body footer, .shell-topbar,.gate-side{ --gold-2:#FFBF00;--ink:#FFFFFF;--muted:rgba(255,255,255,.72);--muted2:rgba(255,255,255,.5); --line:rgba(255,255,255,.16);--line-soft:rgba(255,255,255,.08);--glass:rgba(255,255,255,.05);--glass2:rgba(255,255,255,.1); --deep:#0B1E3D;--black:#050E1F;color:var(--ink); } /* ---- generated: squared corners (WSC uses 3px) ---- */ .org-badge, .sb-link, .menu-btn, .icon-btn, .notif-dropdown, .notif-item, .stat-card, .block, .row-btn, .search-input, .form-error, .field input, .field select, .event-card, .api-key-row, .modal, .member-filters select, .member-filters input, .editor-col textarea#htmlBody, .preview-frame-wrap, .placeholder-btn, .version-row, .logo-preview, .status-item, fieldset, .scope-chip, .dlg, .webhook-box, .offer-card, details.guide, .warn-box, .app .ic, .chip, .edit, .contact-card, .faq-list details, .signup-bonus-toast, .login-hist-row .lh-icon, .ticket-row, .thread-msg, .balance-card, .stat-chip, .activity-icon, .achv, .refer-code, .refer-copy, .wa-btn, .bank-icon, .crypto-row, .disclosure, .benefit-chip, .cp-btn, .card, input, .btn, details, .brand .mark, .cfg-input, .compare-table-wrap, .calculator, .faq-item, .node-list .ni, .oneid-step, .oneid-hub, .oneid-card, .wallet, .wallet-row, .wallet-row .icon, .disclaimer, .map-wrap, .map-media, .event-item, .network-visual, .stat, .api-mock, .cta-block, .footer-social a, .chat-panel, .chat-bubble, .chat-wa-btn, .chat-qr-block, .chat-qr, .countdown-banner, .cb-unit, .tabs, .tab, .social-btn, .form-note, .mfa-icon, .otp-row input, a.btn, .banner, select, textarea, button.action, button, .role-desc, .shell-brand-mark, .shell-link, .shell-menu-btn, .secret-box{border-radius:3px} /* ---- generated: gold used as text reads as dark gold on light surfaces ---- */ :where(html:not([data-theme="dark"])) .topbar-center .tb-sep, :where(html:not([data-theme="dark"])) a, :where(html:not([data-theme="dark"])) .role-tech_support, :where(html:not([data-theme="dark"])) .pending, :where(html:not([data-theme="dark"])) .status-pending, :where(html:not([data-theme="dark"])) .secret-box{color:var(--gold-2)} /* ---- generated: gradient text -> solid ---- */ .balance-num, .balance-num.cyan, .hero h1 .grad, .calc-total, .stat b{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--ink);-webkit-text-fill-color:currentColor} /* ---------- type ---------- */ html body{font-family:'Figtree',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;background:var(--black);color:var(--ink)} h1,h2,h3,h4,.display,.step-title{font-family:'Figtree',system-ui,sans-serif;font-weight:650;letter-spacing:-.01em;color:var(--ink)} h1{letter-spacing:-.02em} ::selection{background:rgba(255,191,0,.4);color:var(--wsc-ink)} :focus-visible{outline:2px solid rgba(255,191,0,.6);outline-offset:1px} a{text-underline-offset:3px} input[type="checkbox"],input[type="radio"],input[type="range"]{accent-color:var(--wsc-gold)} input[type="date"]::-webkit-calendar-picker-indicator,input[type="time"]::-webkit-calendar-picker-indicator,input[type="datetime-local"]::-webkit-calendar-picker-indicator{filter:none;opacity:.6} [data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator{filter:invert(1)} .aurora{display:none!important} [data-theme="dark"] body{background:radial-gradient(1100px 600px at 80% -10%,#0F2A52 0%,transparent 60%),var(--black);background-attachment:fixed} /* ---------- eyebrows / small labels: the WSC gold rule + letter-spaced caps ---------- */ .eyebrow,.tag,.cfg-label,.press-label,.balance-label,.calc-label{letter-spacing:2.2px;font-weight:700;color:var(--gold-2)} .eyebrow{display:inline-flex;align-items:center;gap:10px;border:0!important;background:none!important;padding:0!important;text-transform:uppercase;font-size:12px} .eyebrow .dot{display:none} .eyebrow::before,.tag::before{content:"";width:26px;height:1px;background:currentColor;display:inline-block;vertical-align:middle;margin-right:10px} .tag::before{margin-right:10px} /* ---------- buttons: flat gold primary, outline secondary ---------- */ .btn,button.action,.cp-btn,.wa-btn,.social-btn,.refer-copy,.map-toggle-btn,.cfg-tier{font-weight:650;letter-spacing:.01em;box-shadow:none} .btn-gold,.btn.gold,button.action,.tab.active,.cfg-tier.active,.map-toggle-btn.active{background:var(--wsc-gold)!important;color:var(--wsc-deep)!important;border-color:var(--wsc-gold)!important;box-shadow:none} .btn-gold:hover,.btn.gold:hover,button.action:hover{transform:none!important;box-shadow:0 6px 18px rgba(255,191,0,.35)!important} .btn-ghost,button.ghost,button.secondary{background:transparent!important;border:1px solid var(--line)!important;color:var(--ink)!important} .btn-ghost:hover,button.ghost:hover,button.secondary:hover{border-color:var(--ink)!important;background:transparent!important;transform:none!important} button:hover,.btn:hover{transform:none} button.warn,button.danger,.btn-danger{background:var(--danger);color:#fff} /* ---------- inputs ---------- */ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{border-radius:3px} input:focus,select:focus,textarea:focus{border-color:var(--wsc-gold-dim)!important;box-shadow:0 0 0 2px rgba(255,191,0,.35)} [data-theme="dark"] input:focus,[data-theme="dark"] select:focus,[data-theme="dark"] textarea:focus{border-color:var(--wsc-gold)!important} /* ---------- tables (WSC console style) ---------- */ thead th,.compare-table thead th{background:var(--glass2);color:var(--muted);font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;font-weight:700} .compare-table thead th{font-size:.8rem} tbody tr:hover{background:var(--glass2)} /* ---------- cards & panels: white, hairline border, no blur, square ---------- */ .card,.block,.stat,.stat-card,.stat-chip,.balance-card,.benefit-chip,.achv,.faq-item,.oneid-card,.oneid-step,.miles-card, .event-item,.wallet,.map-wrap,.network-visual,.compare-table-wrap,.calculator,.modal,.notif-dropdown,.ticket-row,.crypto-row{ backdrop-filter:none!important;box-shadow:none} .balance-card,.balance-card.cyan{background:var(--glass)!important;border-top:3px solid var(--wsc-gold)!important} .balance-num,.balance-num.cyan{font-weight:750} .stat b,.stat-chip b,.hero-meta div b{color:var(--ink)} .stats-row .stat b,.stat-card .num{font-weight:750} /* ---------- member / admin shell (/dashboard.html, /admin.html) ---------- */ .sidebar,.shell-sidebar{background:var(--deep);border-right:1px solid var(--line)} .sb-brand,.shell-brand{border-bottom:1px solid var(--line);margin-bottom:10px} .sb-brand b,.shell-brand b{font-weight:750;letter-spacing:-.01em} .sb-brand span{color:var(--gold-2);font-weight:700;letter-spacing:1.6px} .sb-link,.shell-link{border-radius:0!important;border-left:3px solid transparent;font-weight:600} .sb-link:hover,.shell-link:hover{background:var(--glass2)} .sb-link.active,.shell-link.active{background:var(--glass2);color:var(--ink);border-left-color:var(--wsc-gold)} .sb-link.active svg,.shell-link.active svg{color:var(--gold-2)} .nav-tag{background:var(--wsc-gold);color:var(--wsc-deep);border-radius:10px} .sb-avatar{background:var(--wsc-ink);color:#fff;border-radius:3px} .status-pill,.icon-btn,.menu-btn{border-radius:3px} .greeting h1{font-size:1.45rem} .site-footer,.shell-footer{background:var(--wsc-deep)!important;color:rgba(255,255,255,.55)!important;border-top:3px solid var(--wsc-gold)!important} .site-footer a,.shell-footer a{color:rgba(255,255,255,.78)!important} .site-footer a:hover,.shell-footer a:hover{color:var(--wsc-gold)!important} .shell-topbar{background:var(--wsc-ink)!important;color:#fff;border-bottom:0!important} .shell-topbar h1,.shell-topbar b,.shell-topbar strong{color:#fff} .shell-brand-mark{background:var(--wsc-gold);border-radius:3px} .shell-section-label{color:var(--muted2);font-weight:700;letter-spacing:1.2px} .ticker-bar{background:var(--wsc-deep)!important;border-bottom:1px solid rgba(255,255,255,.1)} .ticker-track{color:var(--wsc-gold)} .tab-subnav button{border-radius:20px} .tab-subnav button.active{background:var(--wsc-ink);color:#fff;border-color:var(--wsc-ink)} [data-theme="dark"] .tab-subnav button.active{background:var(--wsc-gold);color:var(--wsc-deep);border-color:var(--wsc-gold)} .toggle.on{background:var(--wsc-gold)} /* ---------- public site (/index.html) — WSC navy header + hero ---------- */ body > .topbar{background:var(--wsc-deep)!important;border-bottom:1px solid rgba(255,255,255,.1)!important} body > header{background:rgba(5,14,31,.92)!important;border-bottom:1px solid rgba(255,255,255,.08)!important} header .brand .word b{color:#fff} header nav.links a{color:rgba(255,255,255,.72)} header nav.links a:hover{color:#fff} .hero{position:relative;background:var(--wsc-deep);box-shadow:0 0 0 100vmax var(--wsc-deep);clip-path:inset(0 -100vmax);color:#fff} /* the glow behind the card: drawn on a layer that spans the full page width, so it fades out softly on every side instead of stopping at the edge of the centred content box (that edge used to show as a straight line) */ .hero::before{content:'';position:absolute;top:0;bottom:0;left:-100vmax;right:-100vmax;z-index:0;pointer-events:none; background:radial-gradient(760px 520px at calc(50% + min(24vw,300px)) 48%,rgba(30,79,163,.55) 0%,rgba(15,42,82,.35) 38%,transparent 70%)} @media (max-width:900px){.hero::before{background:radial-gradient(520px 420px at 50% 72%,rgba(30,79,163,.5) 0%,rgba(15,42,82,.3) 40%,transparent 72%)}} .hero>*{position:relative;z-index:1} .hero h1{color:#fff;font-weight:700} .hero h1 .grad{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--wsc-gold)!important} .hero p{color:rgba(255,255,255,.72)} .hero-meta div b{color:#fff} .hero-meta div span{color:rgba(255,255,255,.5)} .ticker-wrap{background:var(--wsc-paper-alt);border-color:var(--line)} [data-theme="dark"] .ticker-wrap{background:rgba(255,255,255,.03)} .section-head h2{font-weight:650} .cta-block{background:radial-gradient(600px 300px at 50% 0%,#0F2A52,transparent 70%),var(--wsc-deep)!important;border:0!important;border-top:3px solid var(--wsc-gold)!important;color:#fff} .cta-block::before{display:none} .cta-block h2{color:#fff} .oneid-hub{background:var(--wsc-ink)!important;border:0!important;border-top:3px solid var(--wsc-gold)!important;color:#fff} .oneid-hub b{color:#fff} .api-mock{background:var(--wsc-deep)!important} body footer{background:var(--wsc-deep);color:rgba(255,255,255,.72);border-top:3px solid var(--wsc-gold)!important;margin-top:0!important} body footer a:hover{color:var(--wsc-gold)!important} .stat b{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--ink)!important} .story-dot,.fintech-list .fi,.orbit-ring i{box-shadow:none} /* ---------- sign-in pages (login, forgot, reset, profile set-up) — WSC gate ---------- */ body.wsc-gate{--gold-2:#FFBF00;--ink:#FFFFFF;--muted:rgba(255,255,255,.72);--muted2:rgba(255,255,255,.5);--line:rgba(255,255,255,.16);--line-soft:rgba(255,255,255,.08);--glass:rgba(255,255,255,.05);--glass2:rgba(255,255,255,.1);--deep:#0B1E3D;--black:#050E1F;color:var(--ink)} html:not([data-theme="dark"]) body.wsc-gate .card{--gold-2:#7A5C00;--ink:#0B1E3D;--muted:#4A5A7D;--muted2:#7C89A6;--line:#D8DEEA;--line-soft:#E6EAF2;--glass:#FFFFFF;--glass2:#EDF0F7;--deep:#FFFFFF;--black:#F7F8FB;color:var(--ink)} body.wsc-gate h1,body.wsc-gate .sub{color:var(--ink)} body.wsc-gate .card h1,body.wsc-gate .card h2{color:var(--ink)} body.wsc-gate{background:radial-gradient(circle at 78% 20%,#0F2A52 0%,#050E1F 55%,#030814 100%)!important;background-attachment:fixed!important} body.wsc-gate .brand b{color:#fff!important} body.wsc-gate .brand span,body.wsc-gate .back,body.wsc-gate > .wrap > .back{color:rgba(255,255,255,.8)} body.wsc-gate .brand span{color:var(--wsc-gold)!important;letter-spacing:2px;font-weight:700} body.wsc-gate .eco-chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.62);border-radius:20px} body.wsc-gate .card{background:var(--deep)!important;border:0!important;border-top:3px solid var(--wsc-gold)!important;border-radius:0!important;box-shadow:none} body.wsc-gate .back:hover{color:#fff} .tabs{background:var(--glass2)!important;border-radius:3px!important} .tab{border-radius:2px!important} .form-error{background:#FBEAE9;border-color:#efc7c4;color:var(--danger)} .form-note{background:#FFF4DA;border-color:#f3dc9c;color:#6B4E00} [data-theme="dark"] .form-error{background:rgba(179,38,30,.18);border-color:rgba(255,107,97,.4);color:#FFB3AD} [data-theme="dark"] .form-note{background:rgba(255,191,0,.1);border-color:rgba(255,191,0,.35);color:#FFE3A0} .otp-row input{border-radius:3px} .mfa-icon{background:rgba(255,191,0,.12);border-color:rgba(255,191,0,.4);border-radius:3px} .mfa-icon svg{color:var(--gold-2)} /* ---------- small shared bits ---------- */ .pill,.badge,.ticket-status{border-radius:20px} .secret-box{background:rgba(255,191,0,.1)!important;border-color:rgba(255,191,0,.4)!important;color:var(--gold-2)!important;border-radius:3px} #wsidThemeToggle{border-radius:3px!important} /* ========================================================================== Layout standards (every page): consistent gaps between fields, tables that fit their box, and phone / tablet / large-screen layouts. ========================================================================== */ /* two form controls one after the other always have air between them */ :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]),select,textarea) + :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){margin-top:12px} :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea) + :is(label,.muted,.hint,.scopes,.row,.grid){margin-top:14px} :is(input,select,textarea) + :is(button,.btn,a.btn){margin-top:14px} .card > :is(input,select,textarea):first-of-type,.block > :is(input,select,textarea):first-of-type{margin-top:6px} .card > button,.card > .btn,.dlg > button{margin-top:14px} .field + .field{margin-top:12px} :is(.issue-grid,.form-grid,.grid,.grid2,.grid-2,.row-2) > .field + .field{margin-top:0} :is(.issue-grid,.form-grid,.grid2,.grid-2){gap:14px 18px} .card > h3,.block > h3{margin-bottom:14px} .card + .card,.block + .block{margin-top:22px} p + :is(input,select,textarea,table,.table-wrap){margin-top:10px} /* tables: fill the box, never wider than it; long codes and links wrap */ table{width:100%;max-width:100%;min-width:0} th,td{overflow-wrap:anywhere;word-break:normal} td :is(code,.mono,.scope-chip){overflow-wrap:anywhere} .table-wrap,div[style*="overflow-x:auto"]{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} td:last-child:has(button){white-space:normal} /* content width: comfortable on large screens and projectors */ .shell-content,.main > section.panel{max-width:1500px} @media (min-width:1700px){html{font-size:17px}.shell-content,.main > section.panel{max-width:1700px}} @media (min-width:2400px){html{font-size:19px}} /* tablets */ @media (max-width:1100px){ :is(.issue-grid,.form-grid,.grid2,.grid-2,.stats-row){grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important} } /* phones: tables become stacked cards (labels come from the table head — /assets/js/responsive.js) */ @media (max-width:700px){ table.rt-stack{min-width:0!important;border:0} table.rt-stack thead{display:none} table.rt-stack tr{display:block;border:1px solid var(--line);border-radius:var(--radius,3px);margin:0 0 12px;padding:6px 12px;background:var(--glass)} table.rt-stack td{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;border:0;border-bottom:1px solid var(--line-soft);padding:8px 0!important;text-align:right} table.rt-stack td:last-child{border-bottom:0} table.rt-stack td::before{content:attr(data-label);flex:0 0 38%;text-align:left;font-size:.72rem;letter-spacing:.5px;text-transform:uppercase;color:var(--muted2);font-weight:700} table.rt-stack td[data-label=""]::before{display:none} table.rt-stack td[colspan]{display:block;text-align:left} table.rt-stack td .row-actions,table.rt-stack td > div{justify-content:flex-end} .card,.block{padding:16px 14px} .dlg{padding:18px} h1{font-size:1.25rem} button,.btn{min-height:40px} } /* verified ✓ after an email address or phone number confirmed by a one-time code */ .v-tick{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--success);color:#fff!important;font-size:10px;font-weight:800;margin-left:6px;vertical-align:1px;line-height:1} .v-no{display:inline-block;font-size:.7rem;font-weight:700;color:var(--muted2);margin-left:6px;letter-spacing:.3px;text-transform:uppercase} /* ---- phones: toolbars and filter rows line up as full-width controls ---- */ table.rt-stack tr.rt-msg td::before{display:none} @media (max-width:700px){ .block-head > div[style*="flex"],.member-filters,.filters,.toolbar,.tools{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important;width:100%} .block-head > div[style*="flex"] > .search-input,.block-head > div[style*="flex"] > input[type=text],.block-head > div[style*="flex"] > input[type=search], .member-filters > input[type=text],.member-filters > input[type=search],.tools > input[type=search],.toolbar > input:not([type]),.toolbar > input[type=text],.toolbar > input[type=search]{grid-column:1/-1;width:100%!important;max-width:none!important} .member-filters > *,.block-head > div[style*="flex"] > *,.tools > *{width:100%!important;min-width:0;margin:0!important} .block-head{flex-wrap:wrap;gap:12px} } /* ========================================================================== 4.3 — one size for every control that sits in a row /assets/js/responsive.js marks any flex/grid row that holds form controls with .ctl-row; everything in it gets the same height and lines up. ========================================================================== */ :root{--ctl-h:40px} .ctl-row{align-items:center!important} .ctl-row > :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select,button,.btn,a.btn){margin-top:0!important;margin-bottom:0!important;align-self:center} .ctl-row:not(.otp-row) > :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select,button:not(.icon-btn):not(.pw-eye),.btn,a.btn){height:var(--ctl-h);min-height:var(--ctl-h);padding-top:0!important;padding-bottom:0!important;box-sizing:border-box;line-height:1.2} .ctl-row:not(.otp-row) > :is(button:not(.icon-btn):not(.pw-eye),.btn,a.btn){display:inline-flex;align-items:center;justify-content:center;white-space:nowrap} .otp-row > input + input{margin-top:0!important} /* plain buttons with no style of their own follow the theme (outline) */ button:not([class]):not([style*="background"]),.cp-btn{background:transparent!important;border:1px solid var(--line);color:var(--ink);border-radius:3px;padding:8px 14px;font-weight:650;cursor:pointer;font-family:inherit;font-size:.82rem} button:not([class]):not([style*="background"]):hover,.cp-btn:hover{border-color:var(--ink)} button:disabled,.btn:disabled{opacity:.55;cursor:not-allowed} /* password show/hide: the eye never moves on hover or click */ .pw-wrap,.pw-auto{position:relative;display:block} .pw-wrap > input,.pw-auto > input{padding-right:44px!important;margin:0!important} .pw-eye,.pw-eye:hover,.pw-eye:active,.pw-eye:focus{position:absolute!important;right:4px;top:0!important;bottom:0!important;margin:auto 0!important;height:34px;width:34px;min-height:0!important;padding:0!important;display:grid!important;place-items:center;transform:none!important;background:transparent!important;border:0!important;box-shadow:none!important;color:var(--muted2);cursor:pointer} .pw-eye:hover{color:var(--ink)} .pw-eye svg{width:18px;height:18px} .pw-eye[aria-pressed="true"],.pw-eye.showing{color:var(--gold-2)} /* long codes and links inside cards wrap instead of running out of the card */ .card code,.block code,.gw code,.card .mono,.block .mono{overflow-wrap:anywhere;word-break:break-word;white-space:normal} .card,.block,.gw{min-width:0} .card > *,.block > *,.gw > *,[style*="display:grid"] > *{min-width:0} /* one look for every tab strip (monitor, offers & tiers, sub-menus): outline tabs, gold when chosen */ :is(.mon-tabs,.tab-subnav,.tabs-row,body:not(.wsc-gate) .tabs){display:flex;gap:6px;flex-wrap:wrap;background:none!important;padding:0!important;border:0!important} :is(.mon-tabs,.tab-subnav,.tabs-row,body:not(.wsc-gate) .tabs) > button{height:38px;padding:0 16px!important;border-radius:3px!important;border:1px solid var(--line)!important;background:transparent!important;color:var(--muted)!important;font-size:.84rem!important;font-weight:650;display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap} :is(.mon-tabs,.tab-subnav,.tabs-row,body:not(.wsc-gate) .tabs) > button:hover{color:var(--ink)!important;border-color:var(--ink)!important} :is(.mon-tabs,.tab-subnav,.tabs-row,body:not(.wsc-gate) .tabs) > button:is(.on,.active,[aria-selected="true"]){background:var(--wsc-gold)!important;color:var(--wsc-deep)!important;border-color:var(--wsc-gold)!important} /* sidebar header stays at the top while the menu scrolls; it names the signed-in account */ .shell-head{position:sticky;top:-20px;z-index:5;margin:-20px -14px 8px;padding:20px 14px 10px;background:var(--deep);border-bottom:1px solid var(--line-soft)} .shell-head .shell-brand{border-bottom:0;margin-bottom:0;padding-bottom:8px} .shell-who{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:3px;font-size:.76rem;color:var(--muted);min-width:0} .shell-who .dot{width:7px;height:7px;border-radius:50%;background:var(--success);flex:none} .shell-who span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .shell-ticker{height:34px;display:flex;align-items:center;font-size:.8rem;font-weight:600;color:var(--gold-2);background:linear-gradient(90deg,rgba(255,191,0,.14),rgba(78,161,247,.1));border-bottom:1px solid var(--line-soft);padding:0 8px} /* table rows: text and buttons share one middle line */ td{vertical-align:middle} /* no field is ever wider than its box (even with a fixed width written on it) */ input,select,textarea{max-width:100%} input[type=file]{max-width:100%;min-width:0} [style*="display:flex"] > div,[style*="display: flex"] > div{min-width:0} /* 4.4 — the eye never moves: no hover lift, no transition on its position, and the browser's own reveal button (Edge) is hidden so there is only one eye */ .pw-eye,.pw-eye:hover{transition:color .15s ease!important;translate:none!important;scale:none!important;inset-block:0!important} input[type=password]::-ms-reveal,input[type=password]::-ms-clear{display:none} /* ============ 4.4 — one look everywhere ============ */ /* titles above fields: bold, in the site's gold */ .field > label, .fld > label, label.lbl, .f2 > div > label, .form-g > div > label, .sp-grid label, .sp-dlg label, .modal .field label, .card > label:not(.chk):not(.remember), .of-form label, .org-add label { display:block; color:var(--gold-2,#E0A800)!important; font-weight:700!important; font-size:.74rem!important; letter-spacing:.5px!important; text-transform:uppercase!important; margin:0 0 6px!important } /* tick boxes with words: never shouted, always lined up */ label.chk, .chk { display:inline-flex!important; align-items:center; gap:8px; text-transform:none!important; letter-spacing:0!important; font-size:.88rem!important; font-weight:500!important; color:inherit!important; cursor:pointer; margin:6px 0 } label.chk input, .chk input { width:auto!important; margin:0!important; flex:none } /* selects and buttons inside a row of controls keep their natural width */ div[style*="display:flex"] > select:not([style*="width"]), .reply-tools > select, .bar > select { width:auto } /* dark pages ask the browser for dark controls (scrollbars, native lists) */ :root { color-scheme: light } [data-theme="dark"] { color-scheme: dark } input, select, textarea, button { accent-color: var(--gold,#FFBF00) } /* scroll bars in the site colours; pop-ups scroll inside themselves */ * { scrollbar-width: thin; scrollbar-color: var(--gold-2,#E0A800) transparent } *::-webkit-scrollbar { width:10px; height:10px } *::-webkit-scrollbar-track { background:transparent } *::-webkit-scrollbar-thumb { background:rgba(224,168,0,.55); border-radius:10px; border:2px solid transparent; background-clip:padding-box } *::-webkit-scrollbar-thumb:hover { background:var(--gold,#FFBF00); background-clip:padding-box } .modal-backdrop { overflow-y:auto; padding:16px } .modal-backdrop .modal, .sp-dlg > div, .dlg { max-height:calc(100vh - 32px); overflow-y:auto; overscroll-behavior:contain } /* the calendar (flatpickr) in navy and gold */ .flatpickr-calendar { background:var(--deep,#0B1E3D)!important; border:1px solid var(--line)!important; border-top:3px solid var(--gold,#FFBF00)!important; box-shadow:0 18px 40px rgba(0,0,0,.35)!important; border-radius:var(--radius,3px)!important; font-family:inherit } .flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after { border-bottom-color:var(--gold,#FFBF00)!important } .flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after { border-top-color:var(--deep,#0B1E3D)!important } .flatpickr-months .flatpickr-month, .flatpickr-current-month input.cur-year, .flatpickr-current-month .flatpickr-monthDropdown-months, span.flatpickr-weekday, .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color:var(--ink)!important; fill:var(--ink)!important; background:transparent!important } .flatpickr-current-month .flatpickr-monthDropdown-months option { background:var(--deep,#0B1E3D); color:var(--ink) } .flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill:var(--gold,#FFBF00)!important } .flatpickr-day { color:var(--ink)!important; border-radius:3px!important } .flatpickr-day:hover, .flatpickr-day:focus { background:rgba(78,161,247,.18)!important; border-color:transparent!important } .flatpickr-day.today { border-color:var(--gold,#FFBF00)!important } .flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.endRange { background:var(--gold,#FFBF00)!important; border-color:var(--gold,#FFBF00)!important; color:#050E1F!important; font-weight:700 } .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.flatpickr-disabled { color:var(--muted2)!important } .flatpickr-time { border-top:1px solid var(--line)!important } .flatpickr-time input, .flatpickr-time .flatpickr-am-pm, .flatpickr-time .flatpickr-time-separator { color:var(--ink)!important; background:transparent!important } .flatpickr-time input:hover, .flatpickr-time input:focus { background:rgba(78,161,247,.15)!important } .flatpickr-time .numInputWrapper span.arrowUp:after { border-bottom-color:var(--gold,#FFBF00)!important } .flatpickr-time .numInputWrapper span.arrowDown:after { border-top-color:var(--gold,#FFBF00)!important } input.fp-alt { cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E0A800' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:18px; padding-right:36px!important } /* native pickers still shown somewhere (data-native-date): follow the theme */ [data-theme="dark"] input::-webkit-calendar-picker-indicator { filter:invert(.8) sepia(1) saturate(5) hue-rotate(5deg) } /* ========================================================================== 4.4.1 alignment: fields placed side by side line up on one baseline ========================================================================== */ :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]),select){box-sizing:border-box;min-height:42px} select{height:42px;padding-top:0;padding-bottom:0;line-height:normal} select[multiple],select[size]:not([size="1"]){height:auto} :is([style*="display:flex"],[style*="display: flex"],[style*="display:grid"],[style*="display: grid"],.row,.form-row,.f2,.fgrid,.frow,.two,.cols) > .field + .field{margin-top:0} :is([style*="display:flex"],[style*="display: flex"]):has(> .field + .field){align-items:flex-end;flex-wrap:wrap} :is([style*="display:flex"],[style*="display: flex"]) > .field{min-width:min(160px,100%)} :is([style*="display:grid"],[style*="display: grid"],.f2,.fgrid,.form-grid,.issue-grid,.grid2,.grid-2,.row-2):has(> .field,> div > label + :is(input,select)){align-items:end} /* a button that sits in a row of inputs is as tall as they are */ :is([style*="display:flex"],[style*="display: flex"],.row,.toolbar,.filters,.bar):has(> :is(input,select)) > :is(button,.btn,a.btn){min-height:42px;margin-top:0} :is(.sp-grid,.sp-grid2,.f2,.fgrid,.form-grid,.issue-grid) > div > :is(button,.btn):only-child{min-height:42px;margin:0} .sp-grid{align-items:end} :is(.sp-grid,.sp-grid2,.f2,.fgrid,.form-grid,.issue-grid,.grid2,.grid-2,.row-2,[style*="display:grid"],[style*="display:flex"]) > :is(div,.field) > :is(input,select):last-child{margin-bottom:0} /* ========================================================================== 4.4.1 popups: every popup sits centred with equal margins on both sides, never wider than the screen, scrolls inside itself, and goes full width on phones ========================================================================== */ .modal-backdrop{align-items:center;justify-content:center} .modal-backdrop > .modal,.sp-dlg > div,.dlg{width:100%;margin-inline:auto;box-sizing:border-box} .modal-backdrop > .modal.modal-wide{max-width:min(920px,calc(100vw - 48px));padding:28px 32px} .modal-backdrop > .modal *{min-width:0} .modal-backdrop > .modal :is(img,table,pre){max-width:100%} .modal-backdrop > .modal pre,.modal-backdrop > .modal code{overflow-wrap:anywhere;white-space:pre-wrap} .prof-stats{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;gap:12px} .prof-stats .stat-card{min-width:0} .prof-stats .stat-card b{font-size:clamp(1.05rem,2.2vw,1.6rem);overflow-wrap:anywhere} @media (max-width:600px){ .modal-backdrop{padding:10px!important;align-items:flex-start} .modal-backdrop > .modal,.modal-backdrop > .modal.modal-wide{padding:20px 16px;max-width:100%;max-height:calc(100dvh - 20px)} .prof-stats{grid-template-columns:1fr 1fr!important} .modal-backdrop > .modal .prof-acts > *{flex:1 1 140px} } .modal-backdrop{z-index:1200} .uid-chip{min-height:0!important} /* QR codes: gold on navy; a small switch shows a plain black & white copy for older scanner apps */ .qr-sw{display:block;margin:0 auto 12px!important;background:none!important;border:0!important;min-height:0!important;padding:4px!important;font-size:.74rem!important;font-weight:600;color:var(--muted)!important;text-decoration:underline;cursor:pointer} .in-row{margin-top:0!important} /* 4.4.1 dark mode safety net: native controls, scrollbars and pickers follow the mode */ html[data-theme="dark"]{color-scheme:dark} html[data-theme="light"]{color-scheme:light} .faqw-search input{background:var(--deep);color:var(--ink);border:1px solid var(--line);border-radius:3px;padding:0 12px;min-height:42px} /* phones: the top bar keeps its buttons on screen */ @media (max-width:600px){ .topbar .status-pill{display:none!important} .topbar{flex-wrap:wrap!important} .topbar .top-actions{flex:1 1 100%;flex-wrap:wrap;justify-content:flex-end;gap:6px} .topbar{gap:10px} } /* 4.4.2: any form control without its own colours follows dark mode (zero specificity: every page rule still wins) */ :where(html[data-theme="dark"]) :where(select,textarea,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file])){background-color:var(--deep,#0B1E3D);color:var(--ink,#EEF2FA)} /* 4.5 alignment: the live card-number hint under an input no longer pushes the field (and the button or the neighbouring field next to it) out of line when it is empty */ .card-detect:empty{display:none!important} :is(input,select,textarea):has(+ .card-detect){margin-bottom:0!important} /* a field + button on one row (Look up, Search…): the button sits level with the input and is as tall */ [style*="align-items:flex-end"] > .field + :is(button,.btn,.cp-btn){align-self:flex-end;min-height:46px;margin-bottom:0} /* 4.5.1: a button that holds a title and a line of description (choice cards, list rows) grows to fit its text instead of clipping it at the standard button height */ :is(button,.btn,.action):has(> small, > div, > p, > span > small){height:auto!important;min-height:36px;white-space:normal!important;line-height:1.35} /* 4.5.3 — sidebars scroll with a touchpad, a touchscreen, the keyboard or a click — not only a mouse wheel. The scrollbar is visible again (thin, gold), the opened drawer on narrow screens sits ABOVE its dimmed backdrop (it used to sit under it, so nothing in it could be scrolled or tapped), and a "More" button at the bottom of the menu scrolls it for anyone who cannot scroll at all. */ .sidebar,.shell-sidebar{overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-width:thin!important;scrollbar-color:rgba(255,191,0,.5) transparent;-ms-overflow-style:auto!important} .sidebar::-webkit-scrollbar,.shell-sidebar::-webkit-scrollbar{display:block!important;width:6px} .sidebar::-webkit-scrollbar-thumb,.shell-sidebar::-webkit-scrollbar-thumb{background:rgba(255,191,0,.45);border-radius:6px} .sidebar::-webkit-scrollbar-track,.shell-sidebar::-webkit-scrollbar-track{background:transparent} @media (max-width:900px){ .shell{z-index:auto!important} .sidebar,.shell-sidebar{max-height:100vh;max-height:100dvh} } .sb-more{position:sticky;bottom:0;z-index:6;flex:none;display:flex;align-items:center;justify-content:center;gap:6px;width:calc(100% + 8px);margin:6px -4px -8px;padding:10px 10px 12px;border:0;border-top:1px solid var(--line);background:var(--deep);box-shadow:none;color:var(--gold-2,#FFBF00);font:600 .78rem/1 inherit;letter-spacing:.3px;cursor:pointer} .sb-more[hidden]{display:none!important} .sb-more svg{width:14px;height:14px;transition:transform .2s} .sb-more.up svg{transform:rotate(180deg)} /* 4.5.6 — drop-down lists: the open list of a