Skip to Content

Wiki source code of VFax User Guide:

Version 1.1 by Chris Workman on 2026/08/20 21:49
Hide last authors
Chris Workman 1.1 1 {{html}}
2 <!--
3   XWiki usage: paste everything below into an HTML macro on the customer-
4   facing VFAX User Instructions wiki page:
5
6   {{html clean="false"}}
7   ... paste this whole file's contents here ...
8   {{/html}}
9
10   This is a self-contained FRAGMENT (no <html>/<head>/<body>/<!DOCTYPE> tags)
11   scoped under .fd-vfax so it will not leak styles onto the rest of the XWiki
12   page, and it will not get double-rendered inside XWiki's own page shell.
13
14   Content matches the source "VFAX User Instructions" document exactly --
15   nothing added, only organized and styled to the FirstDigital brand guide
16   (customer-facing tone, no internal admin chrome).
17
18   Notes:
19   - Text color, font-family, list-style, and border are all set EXPLICITLY
20     on every element (not just inherited from the wrapper), and border
21     shorthands are reset with border:none before the specific side is
22     reapplied. This protects the page from an XWiki skin's own bare-tag
23     rules (e.g. "p{color:...}" or "ul{list-style:none}"), which would
24     otherwise win over an inherited value or a partial override.
25   - Google Fonts is loaded via @import inside <style> rather than a <link>
26     tag, since <link> only works in a document <head>, which a fragment
27     does not have.
28 -->
29 <style>
30 @import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@400;500;700;800&display=swap');
31
32 .fd-vfax{
33   --fd-navy:#003366;
34   --fd-blue:#307ab2;
35   --fd-bright:#38b2e3;
36   --fd-red:#cf333d;
37   --fd-ink:#2e404d;
38   --fd-muted:#8f9499;
39   --fd-line:#dedede;
40   --fd-bg:#f0f0f0;
41   --fd-tint-navy:#e6edf3;
42   --fd-tint-blue:#e8f2f9;
43   --fd-tint-bright:#eaf7fd;
44   --fd-tint-red:#fbeaec;
45 }
46
47 .fd-vfax, .fd-vfax *, .fd-vfax *::before, .fd-vfax *::after{
48   box-sizing:border-box;
49 }
50
51 .fd-vfax{
52   font-family:"Host Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
53   font-weight:400;
54   font-size:16.5px;
55   line-height:1.72;
56   color:var(--fd-ink);
57   background:var(--fd-bg);
58   -webkit-font-smoothing:antialiased;
59   text-rendering:optimizeLegibility;
60   padding:0;
61   margin:0;
62 }
63
64 .fd-vfax .page-wrap{
65   max-width:760px;
66   margin:0 auto;
67   padding:44px 40px 60px;
68   background:#fff;
69   border:1px solid var(--fd-line);
70   border-radius:10px;
71 }
72
73 /* ===== defensive text/font reset — explicit, not inherited ===== */
74 .fd-vfax,
75 .fd-vfax p,
76 .fd-vfax li,
77 .fd-vfax dd,
78 .fd-vfax dt,
79 .fd-vfax td,
80 .fd-vfax th,
81 .fd-vfax span{
82   font-family:"Host Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
83   color:var(--fd-ink);
84 }
85
86 /* ===== brand header block ===== */
87 .fd-vfax .fd-brandbar{
88   display:flex;
89   align-items:center;
90   gap:14px;
91   margin-bottom:8px;
92 }
93 .fd-vfax .fd-brandbar svg{display:block;height:34px;width:auto}
94
95 /* ===== headings (brand: Extra Bold) ===== */
96 .fd-vfax h1{
97   font-size:2rem;
98   font-weight:800;
99   color:var(--fd-navy);
100   line-height:1.2;
101   letter-spacing:-.015em;
102   margin:.6em 0 .5em;
103   padding-bottom:.3em;
104   border-bottom:2px solid var(--fd-line);
105   position:relative;
106 }
107 .fd-vfax h1::after{
108   content:"";
109   position:absolute; left:0; bottom:-2px;
110   width:64px; height:2px;
111   background:var(--fd-bright);
112 }
113 .fd-vfax h2{
114   font-size:1.18rem;
115   font-weight:800;
116   color:var(--fd-navy);
117   margin:1.9em 0 .6em;
118 }
119 .fd-vfax h3{
120   font-size:1.02rem;
121   font-weight:700;
122   color:var(--fd-blue);
123   margin:1.4em 0 .4em;
124 }
125
126 /* ===== text ===== */
127 .fd-vfax p{margin:0 0 1em}
128 .fd-vfax strong{font-weight:700;color:var(--fd-navy)}
129 .fd-vfax em{font-style:italic}
130 .fd-vfax a{
131   color:var(--fd-blue);
132   text-decoration:none;
133   border-bottom:1px solid rgba(48,122,178,.28);
134   transition:.15s;
135 }
136 .fd-vfax a:hover{color:var(--fd-navy);border-bottom-color:var(--fd-navy)}
137
138 /* ===== lists — explicit list-style so a host reset can't erase bullets ===== */
139 .fd-vfax ol{
140   list-style:decimal outside;
141   margin:.5em 0 1.2em 1.5em;
142   padding:0;
143 }
144 .fd-vfax ul{
145   list-style:disc outside;
146   margin:.4em 0 1em 1.5em;
147   padding:0;
148 }
149 .fd-vfax li{margin-bottom:.55em}
150 .fd-vfax li:last-child{margin-bottom:0}
151 .fd-vfax li > ul{margin-top:.4em;margin-bottom:.4em}
152
153 /* ===== callout — "check your email" confirmation notes ===== */
154 .fd-vfax .fd-callout{
155   border:none;
156   border-left:4px solid var(--fd-bright);
157   background:var(--fd-tint-bright);
158   padding:12px 18px;
159   margin:.7em 0 1.3em;
160   border-radius:0 6px 6px 0;
161   color:var(--fd-ink);
162 }
163 .fd-vfax .fd-callout ul{margin:0 0 0 1.3em}
164 .fd-vfax .fd-callout li{margin-bottom:0}
165 .fd-vfax .fd-callout strong{color:var(--fd-navy)}
166
167 /* ===== inline mono for example addresses ===== */
168 .fd-vfax code{
169   font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
170   font-size:.87em;
171   background:var(--fd-bg);
172   border:1px solid var(--fd-line);
173   border-radius:4px;
174   padding:1px 6px;
175   color:var(--fd-red);
176   font-weight:500;
177 }
178
179 /* ===== section divider ===== */
180 .fd-vfax hr{
181   border:none;
182   border-top:1px solid var(--fd-line);
183   margin:2em 0;
184 }
185
186 @media (max-width:600px){
187   .fd-vfax .page-wrap{padding:28px 20px 40px}
188   .fd-vfax h1{font-size:1.5rem}
189 }
190 </style>
191
192 <div class="fd-vfax">
193   <div class="page-wrap">
194
195     <div class="fd-brandbar">
196       <svg viewBox="0 0 220 60" xmlns="http://www.w3.org/2000/svg" aria-label="FirstDigital">
197         <path d="M8 40 C 40 12, 70 8, 96 10" fill="none" stroke="#cf333d" stroke-width="3" stroke-linecap="round"/>
198         <polygon points="96,4 100,15 112,15 102,22 106,33 96,26 86,33 90,22 80,15 92,15" fill="#cf333d"/>
199         <text x="4" y="52" font-family="Host Grotesk, Helvetica Neue, Arial, sans-serif" font-weight="800" font-size="34" fill="#307ab2">First<tspan fill="#003366">Digital</tspan></text>
200       </svg>
201     </div>
202
203     <h1>VFAX User Instructions</h1>
204
205     <h2>Your Inbound Fax Number</h2>
206     <div class="fd-callout">
207       <ul>
208         <li>Refer to the email for fax number confirmation.</li>
209       </ul>
210     </div>
211
212     <h2>Where Inbound Faxes Arrive</h2>
213     <p>Inbound faxes will be sent to the email address we have on file for this VFAX.</p>
214     <div class="fd-callout">
215       <ul>
216         <li>Refer to the email for email address confirmation.</li>
217       </ul>
218     </div>
219
220     <p>Outbound faxes can only be sent from the email referenced above. Additional senders can be added upon request.</p>
221
222     <h2>Outbound Fax Using Email</h2>
223     <ol>
224       <li>In the &ldquo;To:&rdquo; field, enter the 10 or 11 digit number of the fax machine you are sending to (i.e. <code>801xxxxxxx@fax.firstdigital.com</code>).</li>
225       <li>The &ldquo;Subject:&rdquo; field is equal to the &ldquo;RE:&rdquo; field of a fax cover sheet &mdash; basically, a brief description/reason for the fax.</li>
226       <li>Body of the email: the email acts as a fax cover page. Add additional information you would like to provide to the fax recipient.</li>
227       <li>Attachments: attach documentation to the email as a PDF and hit send.</li>
228     </ol>
229
230     <h2>Inbound Faxing</h2>
231     <ol>
232       <li>Sender faxes to your fax number like a normal physical fax machine.</li>
233       <li>When someone faxes your fax number, the fax will be converted to a PDF.</li>
234       <li>The fax will come to the inbox of the email address mentioned above.</li>
235       <li>You can review the fax via your computer.</li>
236     </ol>
237
238   </div>
239 </div>
240 {{/html}}