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.