/* ================================================================ WEL Help Documentation — help.css Template regions marked in _template.html: TEMPLATE:HEAD — contents (meta, title, CSS links) TEMPLATE:HEADER — top site header bar TEMPLATE:NAV — left sidebar navigation TEMPLATE:FOOTER — bottom footer bar CONTENT — per-page article content ================================================================ */ /* --- Custom Properties --------------------------------------- */ :root { /* Brand */ --red: #CC2200; --red-dark: #a01a00; --red-light: #ff4422; --red-bg: #fff5f3; --red-border: #ffd4cc; /* Sidebar / Navy */ --navy: #1a2540; --navy-mid: #243058; --navy-light: #2e3d6e; --sidebar-text: #c8d4e8; --sidebar-muted: #7a92b8; --sidebar-hover: rgba(255,255,255,0.06); --sidebar-active: rgba(204,34,0,0.16); --sidebar-active-text: #ff7755; /* Content */ --bg: #f4f5f7; --surface: #ffffff; --border: #e2e5ec; --border-light: #eef0f4; /* Text */ --text: #141921; --text-body: #3d4559; --text-muted: #6b7585; /* Layout */ --sidebar-w: 240px; --header-h: 56px; --footer-h: 50px; --content-max: 800px; --content-pad: 48px; /* Misc */ --radius: 6px; --radius-lg: 10px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 16px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.05); --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'SF Mono', 'Cascadia Code', Consolas, 'Courier New', monospace; } /* --- Reset -------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 15px; scroll-behavior: smooth; height: 100%; } body { font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.65; min-height: 100%; display: flex; flex-direction: column; } a { color: var(--red); text-decoration: none; } a:hover { color: var(--red-dark); text-decoration: underline; } /* ================================================================ TEMPLATE:HEADER ================================================================ */ .site-header { height: var(--header-h); background: var(--navy); border-bottom: 2px solid var(--red); position: sticky; top: 0; z-index: 100; flex-shrink: 0; display: flex; align-items: center; } .site-header__inner { width: 100%; height: 100%; display: flex; align-items: center; } /* Logo block fills the sidebar width for visual alignment */ .site-header__logo { display: flex; align-items: center; gap: 8px; text-decoration: none; padding: 0 20px; height: 100%; background: var(--red); min-width: var(--sidebar-w); flex-shrink: 0; transition: background 0.15s; } .site-header__logo:hover { background: var(--red-dark); text-decoration: none; } .logo-wel { font-size: 21px; font-weight: 800; letter-spacing: 0.06em; color: #fff; } .logo-corp { font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.72); letter-spacing: 0.02em; padding-top: 2px; } .site-header__section { padding: 0 20px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sidebar-muted); flex: 1; } .site-header__contact { padding: 0 24px; font-size: 13px; color: var(--sidebar-text); } .site-header__contact a { color: var(--sidebar-text); font-weight: 500; text-decoration: none; } .site-header__contact a:hover { color: #fff; } /* Mobile menu toggle — hidden on desktop */ .mobile-nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0 16px; height: 100%; flex-direction: column; gap: 5px; align-items: center; justify-content: center; } .mobile-nav-toggle span { display: block; width: 20px; height: 2px; background: var(--sidebar-text); border-radius: 1px; transition: transform 0.2s; } /* ================================================================ PAGE SHELL — flex row holding nav + content ================================================================ */ .page-shell { display: flex; flex: 1; min-height: calc(100vh - var(--header-h) - var(--footer-h)); } /* ================================================================ TEMPLATE:NAV ================================================================ */ .help-nav { width: var(--sidebar-w); flex-shrink: 0; background: var(--navy); overflow-y: auto; position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h) - var(--footer-h)); padding-bottom: 32px; scrollbar-width: thin; scrollbar-color: var(--navy-light) transparent; } .help-nav::-webkit-scrollbar { width: 4px; } .help-nav::-webkit-scrollbar-thumb { background: var(--navy-light); border-radius: 2px; } /* Search box */ .nav-search-wrap { padding: 12px 14px 10px; border-bottom: 1px solid rgba(255,255,255,0.06); } .nav-search { width: 100%; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius); padding: 7px 10px; font-size: 13px; color: var(--sidebar-text); font-family: var(--font); outline: none; transition: border-color 0.2s, background 0.2s; } .nav-search::placeholder { color: var(--sidebar-muted); } .nav-search:focus { border-color: rgba(204,34,0,0.6); background: rgba(255,255,255,0.10); } /* Nav groups */ .nav-group { padding: 14px 0 4px; } .nav-group + .nav-group { border-top: 1px solid rgba(255,255,255,0.04); } .nav-group__label { padding: 0 16px 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--sidebar-muted); user-select: none; } .nav-link { display: block; padding: 6px 14px 6px 20px; font-size: 13.5px; color: var(--sidebar-text); text-decoration: none; transition: background 0.12s, color 0.12s, border-color 0.12s; border-left: 2px solid transparent; line-height: 1.4; } .nav-link:hover { background: var(--sidebar-hover); color: #fff; text-decoration: none; } .nav-link--active { background: var(--sidebar-active); color: var(--sidebar-active-text) !important; border-left-color: var(--red); font-weight: 500; text-decoration: none; } /* ================================================================ CONTENT AREA ================================================================ */ .help-content { flex: 1; min-width: 0; background: var(--surface); border-left: 1px solid var(--border); } .content-inner { max-width: var(--content-max); padding: 40px var(--content-pad) 72px; } /* Page header within content */ .content-inner .page-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); margin-bottom: 6px; } .content-inner h1 { font-size: 27px; font-weight: 700; color: var(--text); line-height: 1.2; margin-bottom: 6px; } .content-inner .page-intro { font-size: 16px; color: var(--text-muted); margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border); max-width: 680px; } /* Headings */ .content-inner h2 { font-size: 18px; font-weight: 700; color: var(--text); margin: 36px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-light); } .content-inner h2:first-of-type { margin-top: 0; } .content-inner h3 { font-size: 15px; font-weight: 700; color: var(--text-body); margin: 24px 0 8px; } /* Body text */ .content-inner p { color: var(--text-body); margin-bottom: 14px; max-width: 680px; } .content-inner ul, .content-inner ol { padding-left: 22px; margin-bottom: 16px; color: var(--text-body); max-width: 670px; } .content-inner li { margin-bottom: 5px; line-height: 1.55; } .content-inner strong { color: var(--text); font-weight: 600; } .content-inner em { color: var(--text-body); } .content-inner code { font-family: var(--font-mono); font-size: 0.875em; background: var(--bg); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; color: var(--red); } /* Divider */ .content-inner hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; } /* Back to top */ .back-to-top { display: inline-block; font-size: 12px; color: var(--text-muted); text-decoration: none; margin: 6px 0 4px; padding: 2px 0; } .back-to-top:hover { color: var(--red); text-decoration: none; } /* ================================================================ COMPONENTS ================================================================ */ /* --- Callout / Alert boxes ---------------------------------- */ .callout { border-radius: var(--radius); padding: 14px 16px; margin: 20px 0; font-size: 14px; border-left: 3px solid; max-width: 700px; line-height: 1.55; } .callout-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; display: block; margin-bottom: 5px; } .callout--note { background: #eef2ff; border-color: #4a6cf7; color: #1e2d7a; } .callout--note .callout-label { color: #4a6cf7; } .callout--warn { background: var(--red-bg); border-color: var(--red); color: #5c1000; } .callout--warn .callout-label { color: var(--red); } .callout--tip { background: #effaf4; border-color: #2da864; color: #1a5c38; } .callout--tip .callout-label { color: #2da864; } /* --- Feature / benefit list -------------------------------- */ .feature-list { list-style: none; padding: 0; margin: 16px 0 24px; max-width: 700px; } .feature-list li { padding: 10px 0 10px 30px; border-bottom: 1px solid var(--border-light); position: relative; color: var(--text-body); max-width: none; } .feature-list li:last-child { border-bottom: none; } .feature-list li::before { content: ''; position: absolute; left: 0; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); } /* --- Numbered steps ---------------------------------------- */ .steps { list-style: none; padding: 0; margin: 16px 0 24px; counter-reset: step-counter; } .steps > li { counter-increment: step-counter; position: relative; padding: 12px 12px 12px 56px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: var(--radius); max-width: 680px; color: var(--text-body); } .steps > li::before { content: counter(step-counter); position: absolute; left: 14px; top: 18px; width: 28px; height: 28px; background: var(--navy); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } /* Nested lists inside steps — plain bullets, no counter */ .steps > li ul, .steps > li ol { margin: 8px 0 4px; padding-left: 20px; list-style: disc; } .steps > li ul li, .steps > li ol li { counter-increment: none; padding: 4px 0; margin-bottom: 2px; border: none; border-radius: 0; background: none; } .steps > li ul li::before, .steps > li ol li::before { display: none; } /* --- Two-column key-value table ---------------------------- */ .info-table { width: 100%; max-width: 680px; border-collapse: collapse; margin: 16px 0 24px; font-size: 14px; } .info-table th { text-align: left; padding: 10px 14px; background: var(--bg); border: 1px solid var(--border); font-weight: 600; color: var(--text); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; } .info-table td { padding: 10px 14px; border: 1px solid var(--border); color: var(--text-body); vertical-align: top; } .info-table tr:nth-child(even) td { background: var(--bg); } /* --- International rates table (generated by ASP function) -- */ /* Country header rows emitted by GetInternationalRatesTable() */ .info-table tr.bgltblue td, .info-table td.bgltblue { background: var(--navy); color: #fff; font-weight: 600; padding: 8px 12px; border-bottom: 2px solid var(--red); } /* Dial code cell: long strings of comma-separated codes */ .dialcodes { font-size: 12px; color: var(--text-muted); max-width: 160px; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; } /* --- FAQ accordion ----------------------------------------- */ .faq-list { margin: 24px 0; } .faq-item { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 6px; overflow: hidden; } .faq-question { width: 100%; text-align: left; background: var(--bg); border: none; padding: 13px 16px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--font); transition: background 0.12s; line-height: 1.4; } .faq-question:hover { background: var(--border-light); } .faq-icon { flex-shrink: 0; width: 22px; height: 22px; background: var(--navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 300; transition: transform 0.2s, background 0.2s; line-height: 1; } .faq-item.open .faq-icon { transform: rotate(45deg); background: var(--red); } .faq-answer { display: none; padding: 16px 18px; border-top: 1px solid var(--border); font-size: 14px; color: var(--text-body); line-height: 1.65; background: var(--surface); } .faq-item.open .faq-answer { display: block; } .faq-answer p { margin-bottom: 10px; } .faq-answer p:last-child { margin-bottom: 0; } .faq-answer ol, .faq-answer ul { padding-left: 20px; margin: 8px 0 12px; } .faq-answer li { margin-bottom: 5px; } /* ================================================================ TEMPLATE:FOOTER ================================================================ */ .site-footer { background: var(--navy); height: var(--footer-h); flex-shrink: 0; display: flex; align-items: center; border-top: 1px solid rgba(255,255,255,0.05); } .site-footer__inner { width: 100%; display: flex; align-items: center; padding: 0 24px; gap: 24px; } .site-footer__links { display: flex; gap: 20px; flex: 1; flex-wrap: wrap; } .site-footer__links a { font-size: 12px; color: var(--sidebar-muted); text-decoration: none; transition: color 0.15s; } .site-footer__links a:hover { color: var(--sidebar-text); } .site-footer__copy { font-size: 12px; color: var(--sidebar-muted); white-space: nowrap; } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 800px) { :root { --content-pad: 20px; --sidebar-w: 0px; } .help-nav { position: fixed; width: 260px; left: -260px; top: var(--header-h); height: calc(100vh - var(--header-h)); z-index: 200; transition: left 0.25s ease; box-shadow: var(--shadow-md); } .help-nav.is-open { left: 0; } .mobile-nav-toggle { display: flex; } .site-header__logo { min-width: auto; padding: 0 16px; } .site-header__section { display: none; } .content-inner h1 { font-size: 22px; } .content-inner .page-intro { font-size: 15px; } .site-footer__copy { display: none; } } @media (max-width: 480px) { .content-inner { padding: 24px 16px 56px; } .site-footer__links { gap: 12px; } }