Last modified by Chris Workman on 2026/08/17 22:54

From version 1.1
edited by Chris Workman
on 2026/08/17 22:35
Change comment: There is no comment for this version
To version 9.1
edited by Chris Workman
on 2026/08/17 22:54
Change comment: There is no comment for this version

Summary

Details

Page properties
Title
... ... @@ -1,1 +1,1 @@
1 -CNAM Information
1 +Caller ID Name (CNAM) Info:
Content
... ... @@ -1,58 +1,64 @@
1 1  {{html clean="false"}}
2 +<!--
3 + XWiki usage: paste everything below into an HTML macro, e.g.
2 2  
3 -<html lang="en">
4 -<head>
5 -<meta charset="UTF-8">
6 -<meta name="viewport" content="width=device-width, initial-scale=1.0">
7 -<title>Caller ID Name (CNAM) — FirstDigital Wiki</title>
8 -<link rel="preconnect" href="https://fonts.googleapis.com">
9 -<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10 -<link href="https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
5 + {{html clean="false"}}
6 + ... paste this whole file's contents here ...
7 + {{/html}}
8 +
9 + This is a self-contained FRAGMENT (no <html>/<head>/<body> tags), scoped
10 + under the .fd-cnam-wiki wrapper so it won't leak styles onto the rest of
11 + the XWiki page or get double-rendered. Do not paste the old full-page
12 + version (with <!DOCTYPE html>) into the macro -- that caused the
13 + duplicated-page issue, since XWiki's page template already provides its
14 + own <html>/<body> and a second one nested inside gets parsed twice.
15 +-->
11 11  <style>
12 - :root{
13 - --navy:#003366;
14 - --blue:#307ab2;
15 - --sky:#38b2e3;
16 - --red:#cf333d;
17 - --slate:#2e404d;
18 - --grey:#8f9499;
19 - --lightgrey:#dedede;
20 - --offwhite:#f0f0f0;
21 - --max-w: 960px;
22 - }
23 23  
24 - *{ box-sizing:border-box; }
18 + @import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&display=swap');
25 25  
26 - body{
27 - margin:0;
20 + .fd-cnam-wiki, .fd-cnam-wiki *{ box-sizing:border-box; }
21 +
22 + .fd-cnam-wiki{
23 + --fd-navy:#003366;
24 + --fd-blue:#307ab2;
25 + --fd-sky:#38b2e3;
26 + --fd-red:#cf333d;
27 + --fd-slate:#2e404d;
28 + --fd-grey:#8f9499;
29 + --fd-lightgrey:#dedede;
30 + --fd-offwhite:#f0f0f0;
31 + --fd-max-w: 960px;
32 +
33 + display:block;
28 28   font-family:'Host Grotesk','Poppins','Segoe UI',system-ui,sans-serif;
29 - color:var(--slate);
35 + color:var(--fd-slate);
30 30   background:#ffffff;
31 31   font-weight:300;
32 32   line-height:1.6;
33 33   }
34 34  
35 - a{ color:var(--blue); }
41 + .fd-cnam-wiki a{ color:var(--fd-blue); }
36 36  
37 37   /* ---------- HERO ---------- */
38 - .hero{
44 + .fd-cnam-wiki .hero{
39 39   position:relative;
40 - background:var(--navy);
46 + background:var(--fd-navy);
41 41   overflow:hidden;
42 42   padding:52px 32px 64px;
43 43   }
44 - .hero-inner{
45 - max-width:var(--max-w);
50 + .fd-cnam-wiki .hero-inner{
51 + max-width:var(--fd-max-w);
46 46   margin:0 auto;
47 47   position:relative;
48 48   z-index:2;
49 49   }
50 - .hero .logo{
56 + .fd-cnam-wiki .hero .logo{
51 51   height:34px;
52 52   margin-bottom:36px;
53 53   display:block;
54 54   }
55 - .hero h1{
61 + .fd-cnam-wiki .hero h1{
56 56   color:#ffffff;
57 57   font-weight:800;
58 58   font-size:2.4rem;
... ... @@ -59,8 +59,8 @@
59 59   margin:0 0 10px;
60 60   letter-spacing:-0.01em;
61 61   }
62 - .hero p.kicker{
63 - color:var(--sky);
68 + .fd-cnam-wiki .hero p.kicker{
69 + color:var(--fd-sky);
64 64   font-weight:700;
65 65   text-transform:uppercase;
66 66   letter-spacing:.08em;
... ... @@ -67,7 +67,7 @@
67 67   font-size:.8rem;
68 68   margin:0 0 8px;
69 69   }
70 - .hero p.sub{
76 + .fd-cnam-wiki .hero p.sub{
71 71   color:#dbe9f4;
72 72   font-weight:300;
73 73   font-size:1.05rem;
... ... @@ -74,7 +74,7 @@
74 74   max-width:560px;
75 75   margin:0;
76 76   }
77 - .wave{
83 + .fd-cnam-wiki .wave{
78 78   position:absolute;
79 79   top:0; right:0; bottom:0;
80 80   width:70%;
... ... @@ -83,12 +83,12 @@
83 83   }
84 84  
85 85   /* ---------- TOC / QUICK NAV ---------- */
86 - .toc-wrap{
87 - background:var(--offwhite);
88 - border-bottom:1px solid var(--lightgrey);
92 + .fd-cnam-wiki .toc-wrap{
93 + background:var(--fd-offwhite);
94 + border-bottom:1px solid var(--fd-lightgrey);
89 89   }
90 - .toc{
91 - max-width:var(--max-w);
96 + .fd-cnam-wiki .toc{
97 + max-width:var(--fd-max-w);
92 92   margin:0 auto;
93 93   padding:16px 32px;
94 94   display:flex;
... ... @@ -95,9 +95,9 @@
95 95   flex-wrap:wrap;
96 96   gap:6px 28px;
97 97   }
98 - .toc a{
104 + .fd-cnam-wiki .toc a{
99 99   text-decoration:none;
100 - color:var(--navy);
106 + color:var(--fd-navy);
101 101   font-weight:600;
102 102   font-size:.85rem;
103 103   letter-spacing:.02em;
... ... @@ -105,66 +105,66 @@
105 105   border-bottom:2px solid transparent;
106 106   transition:border-color .15s ease;
107 107   }
108 - .toc a:hover{ border-color:var(--sky); }
114 + .fd-cnam-wiki .toc a:hover{ border-color:var(--fd-sky); }
109 109  
110 110   /* ---------- MAIN ---------- */
111 - main{
112 - max-width:var(--max-w);
117 + .fd-cnam-wiki main{
118 + max-width:var(--fd-max-w);
113 113   margin:0 auto;
114 114   padding:48px 32px 16px;
115 115   }
116 116  
117 - section{
123 + .fd-cnam-wiki section{
118 118   margin-bottom:52px;
119 119   padding-top:8px;
120 120   scroll-margin-top:24px;
121 121   }
122 - section:last-of-type{ margin-bottom:32px; }
128 + .fd-cnam-wiki section:last-of-type{ margin-bottom:32px; }
123 123  
124 - h2{
125 - color:var(--navy);
130 + .fd-cnam-wiki h2{
131 + color:var(--fd-navy);
126 126   font-weight:800;
127 127   font-size:1.5rem;
128 128   margin:0 0 6px;
129 129   letter-spacing:-0.005em;
130 130   }
131 - .rule{
137 + .fd-cnam-wiki .rule{
132 132   width:56px;
133 133   height:4px;
134 - background:var(--red);
140 + background:var(--fd-red);
135 135   border:none;
136 136   margin:0 0 20px;
137 137   border-radius:2px;
138 138   }
139 - h3{
140 - color:var(--blue);
145 + .fd-cnam-wiki h3{
146 + color:var(--fd-blue);
141 141   font-weight:700;
142 142   font-size:1.05rem;
143 143   margin:0 0 10px;
144 144   }
145 - p{
151 + .fd-cnam-wiki p{
146 146   margin:0 0 14px;
147 147   font-weight:300;
148 - color:var(--slate);
154 + color:var(--fd-slate);
149 149   }
150 - .lede{
151 - color:var(--blue);
156 + .fd-cnam-wiki .lede{
157 + color:var(--fd-blue);
152 152   font-weight:600;
153 153   font-size:1.1rem;
154 154   }
155 155  
156 - ul.plain{
162 + .fd-cnam-wiki ul.plain{
157 157   margin:0 0 14px;
158 158   padding-left:20px;
159 159   }
160 - ul.plain li{
166 + .fd-cnam-wiki ul.plain li{
161 161   margin-bottom:8px;
162 162   font-weight:300;
163 163   }
164 164  
165 165   /* checklist-style guideline box, echoing the brand guide's column callouts */
166 - .guideline-box{
167 - background:var(--offwhite);
172 + .fd-cnam-wiki .guideline-box{
173 + background:var(--fd-offwhite);
168 168   border-radius:12px;
169 169   padding:28px 32px;
170 170   display:grid;
... ... @@ -171,43 +171,43 @@
171 171   grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
172 172   gap:0;
173 173   }
174 - .guideline-box .item{
180 + .fd-cnam-wiki .guideline-box .item{
175 175   padding:0 24px;
176 - border-left:3px solid var(--red);
182 + border-left:3px solid var(--fd-red);
177 177   }
178 - .guideline-box .item:first-child{
184 + .fd-cnam-wiki .guideline-box .item:first-child{
179 179   border-left:none;
180 180   padding-left:0;
181 181   }
182 - .guideline-box .item p{
188 + .fd-cnam-wiki .guideline-box .item p{
183 183   margin:0;
184 184   font-weight:500;
185 - color:var(--slate);
191 + color:var(--fd-slate);
186 186   font-size:.95rem;
187 187   }
188 188  
189 189   /* prohibited-content callout */
190 - .warning-box{
196 + .fd-cnam-wiki .warning-box{
191 191   background:#ffffff;
192 - border:1px solid var(--lightgrey);
193 - border-left:4px solid var(--red);
198 + border:1px solid var(--fd-lightgrey);
199 + border-left:4px solid var(--fd-red);
194 194   border-radius:8px;
195 195   padding:24px 28px;
196 196   }
197 - .warning-box p.lead{
203 + .fd-cnam-wiki .warning-box p.lead{
198 198   font-weight:300;
199 199   margin-bottom:16px;
200 200   }
201 - .warning-box ul.plain{
207 + .fd-cnam-wiki .warning-box ul.plain{
202 202   margin-bottom:0;
203 203   }
204 - .warning-box ul.plain li::marker{
205 - color:var(--red);
210 + .fd-cnam-wiki .warning-box ul.plain li::marker{
211 + color:var(--fd-red);
206 206   }
207 207  
208 208   /* CTA / update box */
209 - .cta-box{
210 - background:var(--navy);
215 + .fd-cnam-wiki .cta-box{
216 + background:var(--fd-navy);
211 211   border-radius:12px;
212 212   padding:32px 36px;
213 213   display:flex;
... ... @@ -216,16 +216,16 @@
216 216   justify-content:space-between;
217 217   gap:20px;
218 218   }
219 - .cta-box p{
225 + .fd-cnam-wiki .cta-box p{
220 220   color:#e7f1f9;
221 221   font-weight:300;
222 222   margin:0;
223 223   max-width:480px;
224 224   }
225 - .cta-box a.btn{
231 + .fd-cnam-wiki .cta-box a.btn{
226 226   display:inline-block;
227 227   background:transparent;
228 - border:2px solid var(--sky);
234 + border:2px solid var(--fd-sky);
229 229   color:#ffffff;
230 230   text-decoration:none;
231 231   font-weight:700;
... ... @@ -235,34 +235,35 @@
235 235   white-space:nowrap;
236 236   transition:background .15s ease;
237 237   }
238 - .cta-box a.btn:hover{ background:var(--sky); }
244 + .fd-cnam-wiki .cta-box a.btn:hover{ background:var(--fd-sky); }
239 239  
240 - footer{
241 - max-width:var(--max-w);
246 + .fd-cnam-wiki footer{
247 + max-width:var(--fd-max-w);
242 242   margin:0 auto;
243 243   padding:24px 32px 48px;
244 244   display:flex;
245 245   align-items:center;
246 246   gap:12px;
247 - color:var(--grey);
253 + color:var(--fd-grey);
248 248   font-size:.8rem;
249 249   }
250 - footer img{ height:18px; opacity:.8; }
256 + .fd-cnam-wiki footer img{ height:18px; opacity:.8; }
251 251  
252 252   @media (max-width:600px){
253 - .hero{ padding:36px 20px 48px; }
254 - .hero h1{ font-size:1.7rem; }
255 - main{ padding:36px 20px 8px; }
256 - .toc{ padding:14px 20px; }
257 - .guideline-box{ padding:24px; }
258 - .guideline-box .item{ border-left:none; padding:0 0 16px; border-bottom:1px solid var(--lightgrey); }
259 - .guideline-box .item:last-child{ border-bottom:none; padding-bottom:0; }
260 - .cta-box{ flex-direction:column; align-items:flex-start; }
259 + .fd-cnam-wiki .hero{ padding:36px 20px 48px; }
260 + .fd-cnam-wiki .hero h1{ font-size:1.7rem; }
261 + .fd-cnam-wiki main{ padding:36px 20px 8px; }
262 + .fd-cnam-wiki .toc{ padding:14px 20px; }
263 + .fd-cnam-wiki .guideline-box{ padding:24px; }
264 + .fd-cnam-wiki .guideline-box .item{ border-left:none; padding:0 0 16px; border-bottom:1px solid var(--fd-lightgrey); }
265 + .fd-cnam-wiki .guideline-box .item:last-child{ border-bottom:none; padding-bottom:0; }
266 + .fd-cnam-wiki .cta-box{ flex-direction:column; align-items:flex-start; }
261 261   }
268 +
262 262  </style>
263 -</head>
264 -<body>
270 +<div class="fd-cnam-wiki">
265 265  
272 +
266 266  <div class="hero">
267 267   <svg class="wave" viewBox="0 0 800 500" preserveAspectRatio="xMaxYMin slice" xmlns="http://www.w3.org/2000/svg">
268 268   <path d="M800,0 C620,40 560,140 620,220 C680,300 800,300 800,300 Z" fill="#307ab2" opacity="0.35"/>
... ... @@ -347,7 +347,6 @@
347 347   <span>FirstDigital · Internal Wiki</span>
348 348  </footer>
349 349  
350 -</body>
351 -{{/html}}
352 352  
353 -Caller ID Name (CNAM) — FirstDigital Wiki
358 +</div>
359 +{{/html}}