PageSourceSearch

https://effulgent-boba-a50341.netlify.app/gallery

html effulgent-boba-a50341.netlify.app collected 2026-10-03 10:41:06 UTC 38,299 bytes, 1,193 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
5<link rel="icon" type="image/x-icon" href="/favicon.ico">
6<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
7<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
8<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
9<title>Gallery — EverLume Permanent Lighting</title>
10<meta name="description" content="Real EverLume permanent lighting installs. See what your home could look like tonight.">
11<link rel="canonical" href="https://everlume.pro/gallery.html">
12<!-- Open Graph -->
13<meta property="og:type" content="website">
14<meta property="og:url" content="https://everlume.pro/gallery.html">
15<meta property="og:title" content="Real Installs, Not Renderings — EverLume Gallery">
16<meta property="og:description" content="See EverLume permanent architectural lighting on real homes across California and Tennessee — warm white every night, full color on command.">
17<meta property="og:image" content="https://everlume.pro/fowler-install-2-hero.jpg">
18<meta property="og:site_name" content="EverLume Permanent Lighting">
19<!-- Twitter -->
20<meta name="twitter:card" content="summary_large_image">
21<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=DM+Mono:wght@300;400;500&display=swap" rel="stylesheet">
22<style>
23
24:root {
25  --stone:    #f5f2eb;
26  --stone-mid:#ede8dc;
27  --stone-dk: #d4ccb8;
28  --brass:    #b08d57;
29  --brass-lt: #c9a96e;
30  --brass-dk: #7a5f30;
31  --brass-text: #866a3f;
32  --ink:      #1c1a16;
33  --ink-soft: #3a3630;
34  --ink-mute: #7a7060;
35  --cream:    #faf8f3;
36  --rule:     #ddd8cc;
37  --white:    #ffffff;
38}
39
40*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
41
42html { scroll-behavior: smooth; }
43
44body {
45  background: var(--cream);
46  color: var(--ink);
47  font-family: 'DM Mono', monospace;
48  font-size: 13px;
49  line-height: 1.7;
50}
51
52/* ── PAGE TABS ── */
53
54
55/* ── PAGE SECTIONS ── */
56.page { display: none; }
57.page.active { display: block; }
58
59/* ── SITE NAV ── */
60nav {
61  display: flex;
62  align-items: center;
63  justify-content: space-between;
64  padding: 20px 60px;
65  border-bottom: 1px solid var(--rule);
66  background: var(--cream);
67}
68.nav-logo {
69  font-family: 'Cormorant Garamond', serif;
70  font-size: 22px;
71  font-weight: 300;
72  letter-spacing: .15em;
73  text-transform: uppercase;
74  color: var(--ink);
75}
76.nav-logo span { color: var(--brass-text); }
77.nav-links {
78  display: flex;
79  gap: 32px;
80  list-style: none;
81}
82.nav-links a {
83  font-size: 10px;
84  letter-spacing: .18em;
85  text-transform: uppercase;
86  color: var(--ink-mute);
87  text-decoration: none;
88  transition: color .2s;
89}
90.nav-links a:hover { color: var(--ink); }
91.nav-cta {
92  font-size: 10px;
93  letter-spacing: .18em;
94  text-transform: uppercase;
95  color: var(--brass-text);
96  text-decoration: none;
97  border-bottom: 1px solid var(--brass);
98  padding-bottom: 2px;
99}
100.nav-cta:hover { color: var(--brass-dk); }
101.nav-hamburger {
102  display: none;
103  flex-direction: column;
104  justify-content: center;
105  gap: 5px;
106  background: none;
107  border: none;
108  cursor: pointer;
109  padding: 6px;
110  margin-left: 16px;
111}
112.nav-hamburger span {
113  display: block;
114  width: 22px;
115  height: 2px;
116  background: var(--ink);
117  transition: transform .25s ease, opacity .2s ease;
118}
119.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
120.nav-hamburger.open span:nth-child(2) { opacity: 0; }
121.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
122
123
124/* ── HERO ── */
125.hero {
126  padding: 100px 60px 80px;
127  background: var(--cream);
128  position: relative;
129  overflow: hidden;
130}
131.hero::before {
132  content: '';
133  position: absolute;
134  top: 0; right: 0;
135  width: 50%;
136  height: 100%;
137  background: var(--stone);
138  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%);
139}
140.hero-inner {
141  position: relative;
142  max-width: 1080px;
143  margin: 0 auto;
144}
145.hero-eyebrow {
146  font-size: 10px;
147  letter-spacing: .22em;
148  text-transform: uppercase;
149  color: var(--brass-text);
150  margin-bottom: 28px;
151  display: flex;
152  align-items: center;
153  gap: 12px;
154}
155.hero-eyebrow::before {
156  content: '';
157  display: inline-block;
158  width: 32px;
159  height: 1px;
160  background: var(--brass);
161}
162.hero h1 {
163  font-family: 'Cormorant Garamond', serif;
164  font-size: clamp(52px, 7vw, 90px);
165  font-weight: 300;
166  line-height: 1.0;
167  letter-spacing: -.01em;
168  color: var(--ink);
169  max-width: 700px;
170  margin-bottom: 32px;
171}
172.hero h1 em {
173  font-style: italic;
174  color: var(--brass-text);
175}
176.hero-sub {
177  font-size: 14px;
178  color: var(--ink-mute);
179  max-width: 480px;
180  line-height: 1.8;
181  margin-bottom: 48px;
182  font-family: 'DM Mono', monospace;
183}
184.btn-primary {
185  display: inline-block;
186  background: var(--ink);
187  color: var(--stone);
188  font-size: 10px;
189  letter-spacing: .2em;
190  text-transform: uppercase;
191  text-decoration: none;
192  padding: 16px 32px;
193  transition: background .2s;
194  cursor: pointer;
195  border: none;
196}
197.btn-primary:hover { background: var(--brass-dk); }
198.btn-ghost {
199  display: inline-block;
200  color: var(--ink);
201  font-size: 10px;
202  letter-spacing: .2em;
203  text-transform: uppercase;
204  text-decoration: none;
205  padding: 16px 32px;
206  border: 1px solid var(--rule);
207  margin-left: 12px;
208  transition: border-color .2s, color .2s;
209  cursor: pointer;
210  background: transparent;
211}
212.btn-ghost:hover { border-color: var(--ink); }
213.hero-stats {
214  display: flex;
215  gap: 48px;
216  margin-top: 72px;
217  padding-top: 40px;
218  border-top: 1px solid var(--rule);
219}
220.hero-stat-val {
221  font-family: 'Cormorant Garamond', serif;
222  font-size: 36px;
223  font-weight: 300;
224  color: var(--ink);
225  line-height: 1;
226  margin-bottom: 4px;
227}
228.hero-stat-label {
229  font-size: 10px;
230  letter-spacing: .14em;
231  text-transform: uppercase;
232  color: var(--ink-mute);
233}
234
235/* ── SECTION WRAPPER ── */
236.section {
237  padding: 80px 60px;
238  max-width: 1080px;
239  margin: 0 auto;
240}
241.section-full {
242  padding: 80px 60px;
243}
244.section-label {
245  display: flex;
246  align-items: center;
247  gap: 16px;
248  margin-bottom: 48px;
249}
250.section-label span {
251  font-size: 10px;
252  letter-spacing: .22em;
253  text-transform: uppercase;
254  color: var(--brass-text);
255}
256.section-label::after {
257  content: '';
258  flex: 1;
259  height: 1px;
260  background: var(--rule);
261}
262.section-heading {
263  font-family: 'Cormorant Garamond', serif;
264  font-size: clamp(32px, 4vw, 52px);
265  font-weight: 300;
266  line-height: 1.15;
267  color: var(--ink);
268  margin-bottom: 16px;
269}
270.section-heading em { font-style: italic; color: var(--brass-text); }
271
272/* ── WHY GRID ── */
273.why-grid {
274  display: grid;
275  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
276  gap: 1px;
277  background: var(--rule);
278  border: 1px solid var(--rule);
279  margin-top: 16px;
280}
281.why-card {
282  background: var(--cream);
283  padding: 36px 32px;
284}
285.why-num {
286  font-family: 'Cormorant Garamond', serif;
287  font-size: 48px;
288  font-weight: 300;
289  color: var(--stone-dk);
290  line-height: 1;
291  margin-bottom: 16px;
292}
293.why-title {
294  font-family: 'Cormorant Garamond', serif;
295  font-size: 20px;
296  font-weight: 400;
297  color: var(--ink);
298  margin-bottom: 10px;
299}
300.why-body {
301  font-size: 12px;
302  color: var(--ink-mute);
303  line-height: 1.75;
304}
305
306/* ── PROCESS ── */
307.process-steps {
308  display: grid;
309  grid-template-columns: 1fr;
310  gap: 0;
311}
312.process-step {
313  display: grid;
314  grid-template-columns: 80px 1fr;
315  gap: 32px;
316  padding: 36px 0;
317  border-bottom: 1px solid var(--rule);
318  align-items: start;
319}
320.process-step:last-child { border-bottom: none; }
321.step-num {
322  font-family: 'Cormorant Garamond', serif;
323  font-size: 56px;
324  font-weight: 300;
325  color: var(--stone-dk);
326  line-height: 1;
327  text-align: right;
328  padding-right: 24px;
329  border-right: 1px solid var(--rule);
330}
331.step-content {}
332.step-title {
333  font-family: 'Cormorant Garamond', serif;
334  font-size: 24px;
335  font-weight: 400;
336  color: var(--ink);
337  margin-bottom: 8px;
338  margin-top: 4px;
339}
340.step-body {
341  font-size: 12px;
342  color: var(--ink-mute);
343  line-height: 1.8;
344  max-width: 560px;
345}
346.step-meta {
347  font-size: 10px;
348  letter-spacing: .14em;
349  text-transform: uppercase;
350  color: var(--brass-text);
351  margin-top: 12px;
352}
353
354/* ── TESTIMONIALS ── */
355.testimonial-grid {
356  display: grid;
357  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
358  gap: 24px;
359  margin-top: 16px;
360}
361.testimonial {
362  background: var(--stone);
363  padding: 32px;
364  border-left: 3px solid var(--brass);
365}
366.testimonial-stars {
367  font-size: 11px;
368  letter-spacing: .1em;
369  color: var(--brass-text);
370  margin-bottom: 16px;
371}
372.testimonial-body {
373  font-family: 'Cormorant Garamond', serif;
374  font-size: 18px;
375  font-weight: 300;
376  font-style: italic;
377  line-height: 1.6;
378  color: var(--ink);
379  margin-bottom: 20px;
380}
381.testimonial-name {
382  font-size: 10px;
383  letter-spacing: .18em;
384  text-transform: uppercase;
385  color: var(--ink-mute);
386}
387
388/* ── CTA BAND ── */
389.cta-band {
390  background: var(--ink);
391  padding: 80px 60px;
392  text-align: center;
393}
394.cta-band h2 {
395  font-family: 'Cormorant Garamond', serif;
396  font-size: clamp(32px, 4vw, 56px);
397  font-weight: 300;
398  color: var(--stone);
399  line-height: 1.2;
400  margin-bottom: 16px;
401}
402.cta-band h2 em { font-style: italic; color: var(--brass-lt); }
403.cta-band p {
404  color: var(--ink-mute);
405  font-size: 12px;
406  margin-bottom: 40px;
407  max-width: 480px;
408  margin-left: auto;
409  margin-right: auto;
410  line-height: 1.8;
411}
412.btn-light {
413  display: inline-block;
414  background: var(--stone);
415  color: var(--ink);
416  font-size: 10px;
417  letter-spacing: .2em;
418  text-transform: uppercase;
419  text-decoration: none;
420  padding: 16px 36px;
421  cursor: pointer;
422  border: none;
423  transition: background .2s;
424}
425.btn-light:hover { background: var(--brass-lt); color: var(--white); }
426
427/* ── PRICING ── */
428.pricing-grid {
429  display: grid;
430  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
431  gap: 1px;
432  background: var(--rule);
433  border: 1px solid var(--rule);
434}
435.pricing-card {
436  background: var(--cream);
437  padding: 40px 32px;
438  position: relative;
439}
440.pricing-card.featured {
441  background: var(--ink);
442}
443.pricing-badge {
444  font-size: 9px;
445  letter-spacing: .2em;
446  text-transform: uppercase;
447  color: var(--brass-lt);
448  margin-bottom: 20px;
449  display: block;
450}
451.pricing-tier {
452  font-family: 'Cormorant Garamond', serif;
453  font-size: 28px;
454  font-weight: 300;
455  color: var(--ink);
456  margin-bottom: 4px;
457}
458.pricing-card.featured .pricing-tier { color: var(--stone); }
459.pricing-price {
460  font-family: 'Cormorant Garamond', serif;
461  font-size: 48px;
462  font-weight: 300;
463  color: var(--brass-text);
464  line-height: 1;
465  margin: 16px 0 4px;
466}
467.pricing-from {
468  font-size: 10px;
469  letter-spacing: .1em;
470  text-transform: uppercase;
471  color: var(--ink-mute);
472  margin-bottom: 24px;
473}
474.pricing-card.featured .pricing-from { color: #6a6050; }
475.pricing-divider {
476  height: 1px;
477  background: var(--rule);
478  margin: 24px 0;
479}
480.pricing-card.featured .pricing-divider { background: rgba(255,255,255,.1); }
481.pricing-features {
482  list-style: none;
483  margin-bottom: 32px;
484}
485.pricing-features li {
486  font-size: 12px;
487  color: var(--ink-soft);
488  padding: 6px 0;
489  border-bottom: 1px solid var(--rule);
490  display: flex;
491  align-items: center;
492  gap: 10px;
493}
494.pricing-card.featured .pricing-features li { color: #aaa090; border-bottom-color: rgba(255,255,255,.07); }
495.pricing-features li::before {
496  content: '';
497  width: 4px;
498  height: 4px;
499  border-radius: 50%;
500  background: var(--brass);
501  flex-shrink: 0;
502}
503.pricing-features li:last-child { border-bottom: none; }
504
505/* ── ADD ONS ── */
506.addon-grid {
507  display: grid;
508  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
509  gap: 24px;
510  margin-top: 16px;
511}
512.addon-card {
513  border: 1px solid var(--rule);
514  padding: 28px 24px;
515}
516.addon-title {
517  font-family: 'Cormorant Garamond', serif;
518  font-size: 20px;
519  font-weight: 400;
520  color: var(--ink);
521  margin-bottom: 8px;
522}
523.addon-desc {
524  font-size: 12px;
525  color: var(--ink-mute);
526  line-height: 1.7;
527  margin-bottom: 16px;
528}
529.addon-price {
530  font-size: 10px;
531  letter-spacing: .1em;
532  text-transform: uppercase;
533  color: var(--brass-text);
534}
535
536/* ── FAQ ── */
537.faq-list { margin-top: 16px; }
538.faq-item {
539  border-bottom: 1px solid var(--rule);
540  padding: 24px 0;
541}
542.faq-q {
543  font-family: 'Cormorant Garamond', serif;
544  font-size: 20px;
545  font-weight: 400;
546  color: var(--ink);
547  margin-bottom: 12px;
548  display: flex;
549  align-items: flex-start;
550  gap: 16px;
551}
552.faq-q::before {
553  content: 'Q';
554  font-size: 12px;
555  letter-spacing: .1em;
556  color: var(--brass-text);
557  margin-top: 4px;
558  flex-shrink: 0;
559}
560.faq-a {
561  font-size: 12px;
562  color: var(--ink-mute);
563  line-height: 1.8;
564  padding-left: 28px;
565  max-width: 640px;
566}
567
568/* ── ABOUT ── */
569.about-split {
570  display: grid;
571  grid-template-columns: 1fr 1fr;
572  gap: 80px;
573  align-items: start;
574}
575@media (max-width: 720px) { .about-split { grid-template-columns: 1fr; gap: 40px; } }
576.about-copy { font-size: 14px; color: var(--ink-soft); line-height: 1.9; }
577.about-copy p + p { margin-top: 20px; }
578.about-values {
579  display: grid;
580  grid-template-columns: 1fr;
581  gap: 0;
582}
583.about-value {
584  padding: 24px 0;
585  border-bottom: 1px solid var(--rule);
586}
587.about-value:last-child { border-bottom: none; }
588.about-value-title {
589  font-family: 'Cormorant Garamond', serif;
590  font-size: 18px;
591  font-weight: 400;
592  color: var(--ink);
593  margin-bottom: 6px;
594  display: flex;
595  align-items: center;
596  gap: 12px;
597}
598.about-value-title::before {
599  content: '';
600  width: 20px;
601  height: 1px;
602  background: var(--brass);
603}
604.about-value-desc {
605  font-size: 12px;
606  color: var(--ink-mute);
607  line-height: 1.7;
608  padding-left: 32px;
609}
610
611/* ── SERVICE AREA ── */
612.area-grid {
613  display: grid;
614  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
615  gap: 1px;
616  background: var(--rule);
617  border: 1px solid var(--rule);
618  margin-top: 16px;
619}
620.area-item {
621  background: var(--cream);
622  padding: 20px 24px;
623}
624.area-city {
625  font-family: 'Cormorant Garamond', serif;
626  font-size: 18px;
627  font-weight: 400;
628  color: var(--ink);
629  margin-bottom: 2px;
630}
631.area-status {
632  font-size: 9px;
633  letter-spacing: .14em;
634  text-transform: uppercase;
635  color: var(--ink-mute);
636}
637.area-status.primary { color: var(--brass-text); }
638
639/* ── ESTIMATE FORM ── */
640.estimate-layout {
641  display: grid;
642  grid-template-columns: 1fr 380px;
643  gap: 80px;
644  align-items: start;
645}
646@media (max-width: 800px) { .estimate-layout { grid-template-columns: 1fr; } }
647.form-group {
648  margin-bottom: 24px;
649}
650.form-label {
651  display: block;
652  font-size: 10px;
653  letter-spacing: .18em;
654  text-transform: uppercase;
655  color: var(--ink-mute);
656  margin-bottom: 8px;
657}
658.form-input {
659  width: 100%;
660  padding: 12px 16px;
661  border: 1px solid var(--rule);
662  background: var(--white);
663  font-family: 'DM Mono', monospace;
664  font-size: 13px;
665  color: var(--ink);
666  outline: none;
667  transition: border-color .2s;
668  -webkit-appearance: none;
669  border-radius: 0;
670}
671.form-input:focus { border-color: var(--brass-text); }
672.form-select {
673  width: 100%;
674  padding: 12px 16px;
675  border: 1px solid var(--rule);
676  background: var(--white);
677  font-family: 'DM Mono', monospace;
678  font-size: 13px;
679  color: var(--ink);
680  outline: none;
681  cursor: pointer;
682  border-radius: 0;
683  -webkit-appearance: none;
684}
685.form-row {
686  display: grid;
687  grid-template-columns: 1fr 1fr;
688  gap: 16px;
689}
690.form-hint {
691  font-size: 11px;
692  color: var(--ink-mute);
693  margin-top: 6px;
694}
695.radio-group {
696  display: grid;
697  grid-template-columns: 1fr 1fr;
698  gap: 8px;
699}
700.radio-option {
701  border: 1px solid var(--rule);
702  padding: 12px 16px;
703  cursor: pointer;
704  transition: border-color .2s;
705  display: flex;
706  align-items: center;
707  gap: 10px;
708}
709.radio-option:hover { border-color: var(--brass-text); }
710.radio-option input { cursor: pointer; accent-color: var(--brass-text); }
711.radio-label { font-size: 12px; color: var(--ink-soft); }
712.estimate-aside {
713  background: var(--stone);
714  padding: 40px 32px;
715  position: sticky;
716  top: 60px;
717}
718.aside-title {
719  font-family: 'Cormorant Garamond', serif;
720  font-size: 24px;
721  font-weight: 300;
722  color: var(--ink);
723  margin-bottom: 24px;
724}
725.aside-points { list-style: none; }
726.aside-points li {
727  font-size: 12px;
728  color: var(--ink-mute);
729  padding: 14px 0;
730  border-bottom: 1px solid var(--rule);
731  display: flex;
732  align-items: flex-start;
733  gap: 12px;
734  line-height: 1.6;
735}
736.aside-points li:last-child { border-bottom: none; }
737.aside-points li::before {
738  content: '';
739  width: 4px;
740  height: 4px;
741  border-radius: 50%;
742  background: var(--brass);
743  margin-top: 6px;
744  flex-shrink: 0;
745}
746.aside-contact {
747  margin-top: 32px;
748  padding-top: 24px;
749  border-top: 1px solid var(--rule);
750}
751.aside-contact-label {
752  font-size: 10px;
753  letter-spacing: .18em;
754  text-transform: uppercase;
755  color: var(--ink-mute);
756  margin-bottom: 8px;
757}
758.aside-contact-num {
759  font-family: 'Cormorant Garamond', serif;
760  font-size: 26px;
761  font-weight: 300;
762  color: var(--ink);
763}
764
765/* ── GALLERY ── */
766.gallery-grid {
767  display: grid;
768  grid-template-columns: repeat(3, 1fr);
769  gap: 1px;
770  background: var(--rule);
771  border: 1px solid var(--rule);
772}
773@media (max-width: 640px) { .gallery-grid { grid-template-columns: 1fr 1fr; } }
774
775.gallery-item {
776  position: relative;
777  overflow: hidden;
778  display: flex;
779  align-items: flex-end;
780  aspect-ratio: 4/3;
781  background: #111;
782}
783.gallery-item img {
784  position: absolute;
785  inset: 0;
786  width: 100%;
787  height: 100%;
788  object-fit: cover;
789  object-position: center;
790  transition: transform .5s ease;
791}
792.gallery-item:hover img { transform: scale(1.03); }
793
794/* Simulated warm-white light dots */
795.gallery-dots {
796  position: absolute;
797  top: 40%;
798  left: 0; right: 0;
799  display: flex;
800  justify-content: space-evenly;
801}
802.gallery-dot {
803  width: 6px;
804  height: 6px;
805  border-radius: 50%;
806  background: #f4d58d;
807  box-shadow: 0 0 12px 4px rgba(244,213,141,.4);
808}
809
810/* ── FOOTER ── */
811footer {
812  background: var(--ink);
813  padding: 60px;
814  display: grid;
815  grid-template-columns: 1fr 1fr 1fr;
816  gap: 40px;
817}
818@media (max-width: 640px) { footer { grid-template-columns: 1fr; padding: 40px 24px; } }
819.footer-brand {
820  font-family: 'Cormorant Garamond', serif;
821  font-size: 20px;
822  font-weight: 300;
823  letter-spacing: .15em;
824  text-transform: uppercase;
825  color: var(--stone);
826  margin-bottom: 12px;
827}
828.footer-brand span { color: var(--brass-lt); }
829.footer-tagline {
830  font-size: 10px;
831  letter-spacing: .14em;
832  text-transform: uppercase;
833  color: #4a4640;
834  margin-bottom: 20px;
835}
836.footer-loc {
837  font-size: 11px;
838  color: #5a5650;
839  line-height: 1.8;
840}
841.footer-col-title {
842  font-size: 10px;
843  letter-spacing: .18em;
844  text-transform: uppercase;
845  color: #4a4640;
846  margin-bottom: 16px;
847}
848.footer-col-links {
849  list-style: none;
850}
851.footer-col-links li {
852  margin-bottom: 10px;
853}
854.footer-col-links a {
855  font-size: 12px;
856  color: #6a6460;
857  text-decoration: none;
858  transition: color .2s;
859}
860.footer-col-links a:hover { color: var(--brass-lt); }
861.footer-bottom {
862  background: #111009;
863  padding: 16px 60px;
864  display: flex;
865  justify-content: space-between;
866  align-items: center;
867  flex-wrap: wrap;
868  gap: 8px;
869}
870.footer-bottom-text {
871  font-size: 10px;
872  letter-spacing: .1em;
873  color: #3a3830;
874}
875
876/* ── PAGE HEADER (inner pages) ── */
877.page-header {
878  background: var(--stone);
879  padding: 60px 60px 48px;
880  border-bottom: 1px solid var(--rule);
881}
882.page-header-eyebrow {
883  font-size: 10px;
884  letter-spacing: .22em;
885  text-transform: uppercase;
886  color: var(--brass-text);
887  margin-bottom: 16px;
888  display: flex;
889  align-items: center;
890  gap: 12px;
891}
892.page-header-eyebrow::before {
893  content: '';
894  width: 24px;
895  height: 1px;
896  background: var(--brass);
897}
898.page-header h1 {
899  font-family: 'Cormorant Garamond', serif;
900  font-size: clamp(40px, 5vw, 64px);
901  font-weight: 300;
902  line-height: 1.1;
903  color: var(--ink);
904}
905.page-header h1 em { font-style: italic; color: var(--brass-text); }
906.page-header-sub {
907  font-size: 13px;
908  color: var(--ink-mute);
909  margin-top: 16px;
910  max-width: 560px;
911  line-height: 1.8;
912}
913
914@media (max-width: 700px) {
915  nav { padding: 16px 20px; }
916  nav { position: relative; justify-content: flex-start; }
917  .nav-logo-text { font-size: 24px; }
918  .nav-cta { margin-left: 12px; font-size: 9px; white-space: nowrap; }
919  .nav-hamburger { display: flex; margin-left: auto; }
920  .nav-links {
921    display: none;
922    position: absolute;
923    top: 100%; left: 0; right: 0;
924    flex-direction: column;
925    gap: 0;
926    background: var(--cream);
927    border-top: 1px solid var(--rule);
928    border-bottom: 1px solid var(--rule);
929    padding: 4px 0;
930    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
931    z-index: 150;
932  }
933  .nav-links.open { display: flex; }
934  .nav-links li { width: 100%; }
935  .nav-links a {
936    display: block;
937    padding: 14px 24px;
938    font-size: 12px;
939    border-bottom: 1px solid var(--rule);
940  }
941  .nav-links li:last-child a { border-bottom: none; }
942  .hero { padding: 60px 20px 48px; }
943  .hero::before { display: none; }
944  .section, .section-full, .cta-band, footer { padding-left: 24px; padding-right: 24px; }
945  .hero-stats { flex-wrap: wrap; gap: 24px; }
946  .page-header { padding: 40px 24px; }
947  .footer-bottom { padding: 16px 24px; }
948  .pricing-grid { grid-template-columns: 1fr; }
949  .gallery-grid { grid-template-columns: 1fr 1fr; }
950  .estimate-layout { grid-template-columns: 1fr; }
951  .form-row { grid-template-columns: 1fr; }
952  .radio-group { grid-template-columns: 1fr; }
953}
954
955
956.nav-logo {
957  display: flex;
958  align-items: center;
959  gap: 12px;
960  text-decoration: none;
961}
962.nav-logo-img {
963  height: 46px;
964  width: 46px;
965  object-fit: contain;
966}
967.nav-logo-text {
968  font-family: 'Cormorant Garamond', serif;
969  font-size: 27px;
970  font-weight: 300;
971  letter-spacing: .15em;
972  text-transform: uppercase;
973  color: var(--ink);
974}
975.nav-logo-text span { color: var(--brass-text); }
976
977</style>
978<!-- Meta Pixel Code -->
979<script>
vendor: 399 bytes, lines 979-988
979
980!function(f,b,e,v,n,t,s)
981{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
982n.callMethod.apply(n,arguments):n.queue.push(arguments)};
983if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
984n.queue=[];t=b.createElement(e);t.async=!0;
985t.src=v;s=b.getElementsByTagName(e)[0];
986s.parentNode.insertBefore(t,s)}(window, document,'script',
987'https://connect.facebook.net/en_US/fbevents.js');
988fbq('init', '
9881018309977796765
vendor: 30 bytes, lines 988-989
988');
989fbq('track', 'PageView');
990</script>
990
991<noscript><img height="1" width="1" style="display:none"
992src="https://www.facebook.com/tr?id=1018309977796765&ev=PageView&noscript=1"
993/></noscript>
994<!-- End Meta Pixel Code -->
995</head>
996<body>
997<nav>
998    <a href="/" class="nav-logo"><img class="nav-logo-img" src="/logo.png" alt="EverLume"><span class="nav-logo-text">Ever<span>Lume</span></span></a>
999    <ul class="nav-links">
1000      <li><a href="/">Home</a></li>
1001      <li><a href='/gallery' style='color: var(--brass-text);'>Gallery</a></li>
1002      <li><a href='/how-it-works'>How It Works</a></li>
1003      <li><a href='/pricing'>Pricing</a></li>
1004      <li><a href='/about'>About</a></li>
1005      <li><a href='/faq'>FAQ</a></li>
1006    </ul>
1007    <a class='nav-cta' href='/estimate'>Free Estimate →</a>
1008    <button class="nav-hamburger" id="navHamburger" onclick="toggleMobileNav()" aria-label="Toggle menu"><span></span><span></span><span></span></button>
1009  </nav>
1010
1011<div class="hero" style="padding:52px 60px 40px;">
1012  <div class="hero-inner">
1013    <div class="hero-eyebrow">Portfolio</div>
1014    <h1 style="font-size:clamp(40px,5vw,68px);">Real homes.<br><em>Real installs.</em></h1>
1015    <p class="hero-sub">Every photo below is from an actual EverLume installation — no renderings, no stock images. This is what your home could look like tonight.</p>
1016  </div>
1017</div>
1018<div class="section">
1019  <div style="margin-bottom:3px;">
1020    <img src="/IMG_5297.jpeg" alt="EverLume permanent roofline lighting at golden hour"
1021      style="width:100%;height:520px;object-fit:cover;object-position:center 40%;display:block;">
1022  </div>
1023  <div style="display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-bottom:3px;">
1024    <img src="/IMG_5295.jpeg" alt="Wide view of EverLume permanent roofline lighting at dusk"
1025      style="width:100%;height:380px;object-fit:cover;object-position:center 30%;display:block;">
1026    <img src="/IMG_5302.jpeg" alt="EverLume lighting tracing entry arch and roofline"
1027      style="width:100%;height:380px;object-fit:cover;display:block;">
1028  </div>
1029  <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px;margin-bottom:48px;">
1030    <img src="/IMG_5303.jpeg" alt="EverLume LED detail on roofline peak"
1031      style="width:100%;height:280px;object-fit:cover;display:block;">
1032    <img src="/IMG_5300.jpeg" alt="EverLume permanent lighting on garage eave"
1033      style="width:100%;height:280px;object-fit:cover;object-position:center 20%;display:block;">
1034    <img src="/IMG_5293.jpeg" alt="Full house with EverLume permanent roofline lighting"
1035      style="width:100%;height:280px;object-fit:cover;object-position:center 30%;display:block;">
1036  </div>
1037  <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-bottom:60px;">
1038    <div style="background:var(--stone);padding:20px 24px;">
1039      <div style="font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-text);margin-bottom:6px;">Home Style</div>
1040      <div style="font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:300;color:var(--ink);">Single Story</div>
1041      <div style="font-size:11px;color:var(--ink-mute);margin-top:3px;">Full exterior roofline</div>
1042    </div>
1043    <div style="background:var(--cream);padding:20px 24px;">
1044      <div style="font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-text);margin-bottom:6px;">Coverage</div>
1045      <div style="font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:300;color:var(--ink);">Full Roofline</div>
1046      <div style="font-size:11px;color:var(--ink-mute);margin-top:3px;">Eaves · Peaks · Entry arch</div>
1047    </div>
1048    <div style="background:var(--stone);padding:20px 24px;">
1049      <div style="font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-text);margin-bottom:6px;">Install Time</div>
1050      <div style="font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:300;color:var(--ink);">Single Day</div>
1051      <div style="font-size:11px;color:var(--ink-mute);margin-top:3px;">Start to finish · Same-day walkthrough</div>
1052    </div>
1053  </div>
1054
1055  <div style="height:1px;background:var(--rule);margin:56px 0 48px;"></div>
1056  <div style="margin-bottom:3px;">
1057    <img src="/fowler-install-2-hero.jpg" alt="EverLume permanent roofline lighting at dusk"
1058      style="width:100%;height:520px;object-fit:cover;object-position:center 40%;display:block;">
1059  </div>
1060  <div style="display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-bottom:3px;">
1061    <img src="/fowler-install-2-patio-a.jpg" alt="Patio seating area under EverLume roofline lighting at dusk"
1062      style="width:100%;height:380px;object-fit:cover;display:block;">
1063    <img src="/fowler-install-2-patio-b.jpg" alt="Window nook and landscaping lit by EverLume permanent lighting"
1064      style="width:100%;height:380px;object-fit:cover;display:block;">
1065  </div>
1066  <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px;margin-bottom:48px;">
1067    <img src="/fowler-install-2-garage.jpg" alt="Garage and driveway roofline lit by EverLume permanent lighting"
1068      style="width:100%;height:280px;object-fit:cover;display:block;">
1069    <img src="/fowler-install-2-entry.jpg" alt="Entry landscaping detail with EverLume permanent lighting"
1070      style="width:100%;height:280px;object-fit:cover;display:block;">
1071    <img src="/fowler-install-2-color.jpg" alt="EverLume system switched to red and purple accent colors"
1072      style="width:100%;height:280px;object-fit:cover;object-position:center 30%;display:block;">
1073  </div>
1074  <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-bottom:60px;">
1075    <div style="background:var(--stone);padding:20px 24px;">
1076      <div style="font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-text);margin-bottom:6px;">Home Style</div>
1077      <div style="font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:300;color:var(--ink);">Single Story</div>
1078      <div style="font-size:11px;color:var(--ink-mute);margin-top:3px;">Full exterior roofline</div>
1079    </div>
1080    <div style="background:var(--cream);padding:20px 24px;">
1081      <div style="font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-text);margin-bottom:6px;">
1081Coverage</div>
1082      <div style="font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:300;color:var(--ink);">Full Roofline</div>
1083      <div style="font-size:11px;color:var(--ink-mute);margin-top:3px;">Eaves · Peaks · Patio</div>
1084    </div>
1085    <div style="background:var(--stone);padding:20px 24px;">
1086      <div style="font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-text);margin-bottom:6px;">Install Time</div>
1087      <div style="font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:300;color:var(--ink);">Single Day</div>
1088      <div style="font-size:11px;color:var(--ink-mute);margin-top:3px;">Start to finish · Same-day walkthrough</div>
1089    </div>
1090  </div>
1091
1092  <div style="height:1px;background:var(--rule);margin:56px 0 48px;"></div>
1093  <div style="margin-bottom:3px;">
1094    <img src="/install-a-hero.jpg" alt="EverLume permanent roofline lighting at dusk, full house view"
1095      style="width:100%;height:520px;object-fit:cover;object-position:center 45%;display:block;">
1096  </div>
1097  <div style="margin-bottom:48px;">
1098    <img src="/install-a-detail.jpg" alt="Close detail of EverLume LED strip along roofline and siding"
1099      style="width:100%;height:420px;object-fit:cover;object-position:center 30%;display:block;">
1100  </div>
1101  <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-bottom:60px;">
1102    <div style="background:var(--stone);padding:20px 24px;">
1103      <div style="font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-text);margin-bottom:6px;">Home Style</div>
1104      <div style="font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:300;color:var(--ink);">Single Story</div>
1105      <div style="font-size:11px;color:var(--ink-mute);margin-top:3px;">Full exterior roofline</div>
1106    </div>
1107    <div style="background:var(--cream);padding:20px 24px;">
1108      <div style="font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-text);margin-bottom:6px;">Coverage</div>
1109      <div style="font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:300;color:var(--ink);">Full Roofline</div>
1110      <div style="font-size:11px;color:var(--ink-mute);margin-top:3px;">Eaves · Peaks · Gables</div>
1111    </div>
1112    <div style="background:var(--stone);padding:20px 24px;">
1113      <div style="font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-text);margin-bottom:6px;">Install Time</div>
1114      <div style="font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:300;color:var(--ink);">Single Day</div>
1115      <div style="font-size:11px;color:var(--ink-mute);margin-top:3px;">Start to finish · Same-day walkthrough</div>
1116    </div>
1117  </div>
1118
1119  <div style="height:1px;background:var(--rule);margin:56px 0 48px;"></div>
1120  <div style="margin-bottom:3px;">
1121    <img src="/install-b-hero.jpg" alt="EverLume permanent lighting along a two-story home's covered patio at dusk"
1122      style="width:100%;height:520px;object-fit:cover;object-position:center 40%;display:block;">
1123  </div>
1124  <div style="display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-bottom:48px;">
1125    <img src="/install-b-entertaining.jpg" alt="Covered patio and firepit seating area lit by EverLume permanent lighting"
1126      style="width:100%;height:380px;object-fit:cover;object-position:center 35%;display:block;">
1127    <img src="/install-b-patio.jpg" alt="Screened porch and covered patio lit warm white at dusk"
1128      style="width:100%;height:380px;object-fit:cover;object-position:center 25%;display:block;">
1129  </div>
1130  <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-bottom:60px;">
1131    <div style="background:var(--stone);padding:20px 24px;">
1132      <div style="font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-text);margin-bottom:6px;">Home Style</div>
1133      <div style="font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:300;color:var(--ink);">Two Story</div>
1134      <div style="font-size:11px;color:var(--ink-mute);margin-top:3px;">Covered patio + screened porch</div>
1135    </div>
1136    <div style="background:var(--cream);padding:20px 24px;">
1137      <div style="font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-text);margin-bottom:6px;">
1137Coverage</div>
1138      <div style="font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:300;color:var(--ink);">Patio + Roofline</div>
1139      <div style="font-size:11px;color:var(--ink-mute);margin-top:3px;">Outdoor living focus</div>
1140    </div>
1141    <div style="background:var(--stone);padding:20px 24px;">
1142      <div style="font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-text);margin-bottom:6px;">Install Time</div>
1143      <div style="font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:300;color:var(--ink);">Single Day</div>
1144      <div style="font-size:11px;color:var(--ink-mute);margin-top:3px;">Start to finish · Same-day walkthrough</div>
1145    </div>
1146  </div>
1147
1148  <div style="height:1px;background:var(--rule);margin:56px 0 48px;"></div>
1149  <div style="margin-bottom:3px;">
1150    <img src="/install-c-entry.jpg" alt="EverLume permanent lighting tracing timber gables at dusk, front entry view"
1151      style="width:100%;height:520px;object-fit:cover;object-position:center 35%;display:block;">
1152  </div>
1153  <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-bottom:60px;">
1154    <div style="background:var(--stone);padding:20px 24px;">
1155      <div style="font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-text);margin-bottom:6px;">Home Style</div>
1156      <div style="font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:300;color:var(--ink);">Craftsman</div>
1157      <div style="font-size:11px;color:var(--ink-mute);margin-top:3px;">Timber gables · Cedar accents</div>
1158    </div>
1159    <div style="background:var(--cream);padding:20px 24px;">
1160      <div style="font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-text);margin-bottom:6px;">Coverage</div>
1161      <div style="font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:300;color:var(--ink);">Full Roofline</div>
1162      <div style="font-size:11px;color:var(--ink-mute);margin-top:3px;">Gables · Garage · Entry</div>
1163    </div>
1164    <div style="background:var(--stone);padding:20px 24px;">
1165      <div style="font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-text);margin-bottom:6px;">Install Time</div>
1166      <div style="font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:300;color:var(--ink);">Single Day</div>
1167      <div style="font-size:11px;color:var(--ink-mute);margin-top:3px;">Start to finish · Same-day walkthrough</div>
1168    </div>
1169  </div>
1170
1171  <div style="background:var(--ink);padding:48px 60px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;">
1172    <div>
1173      <div style="font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-lt);margin-bottom:10px;">This is warm white — one of 19 million+ colors</div>
1174      <div style="font-family:'Cormorant Garamond',serif;font-size:clamp(22px,3vw,36px);font-weight:300;color:var(--stone);line-height:1.2;">Christmas red. Halloween orange.<br><em>Game day blue. Every evening.</em></div>
1175      <p style="font-size:12px;color:#5a5650;line-height:1.85;margin-top:12px;max-width:480px;">These photos show warm white — the everyday scene. The same system switches to any color from your phone in seconds. One install covers every occasion.</p>
1176    </div>
1177    <a class='btn-primary' href='/estimate' style='white-space:nowrap;flex-shrink:0;'>Get Your Free Estimate →</a>
1178  </div>
1179</div>
1180
1181<footer><div><div class="footer-brand" style="display:flex;align-items:center;gap:10px;"><img src="/logo.png" alt="EverLume" style="height:28px;width:28px;object-fit:contain;filter:brightness(0.85);"><span>Ever<span>Lume</span></span></div><div class="footer-tagline">Architectural Lighting · Installed Once</div><div class="footer-loc">Serving California · Tennessee<br>Licensed · Insured · Local</div></div><div><div class="footer-col-title">Pages</div><ul class="footer-col-links"><li><a href="/">Home</a></li><li><a href='/gallery'>Gallery</a></li><li><a href='/how-it-works'>How It Works</a></li><li><a href='/pricing'>Pricing</a></li><li><a href='/about'>About</a></li><li><a href='/estimate'>Free Estimate</a></li><li><a href='/faq'>FAQ</a></li></ul></div><div><div class="footer-col-title">Service Areas</div><ul class="footer-col-links"><li><a href='/california'>Central Valley, CA</a></li><li><a href='/tennessee'>Tellico Village, TN</a></li><li><a href='/california'>Fresno · Clovis · Visalia</a></li><li><a href='/tennessee'>Knoxville · Loudon · TN</a></li></ul></div></footer>
1182  <div class="footer-bottom">
1183    <span class="footer-bottom-text">© 2026 EverLume Permanent Lighting · Serving CA & TN</span>
1184    <span class="footer-bottom-text"><a href='/privacy' style='color:inherit;text-decoration:none;'>Privacy Policy</a> · <a href='/terms' style='color:inherit;text-decoration:none;'>Terms</a> · (559) 344-8004</span>
1185  </div>
1186<script>
1187function toggleMobileNav() {
1188  document.querySelector('.nav-links').classList.toggle('open');
1189  document.getElementById('navHamburger').classList.toggle('open');
1190}
1191</script>
1191
1192</body>
1193</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.