/* ========================================================================= Brand light theme — loaded LAST on every customer page. The checkout flow inherited a dark hero (near-black -> #082E18 -> dark green) that the marketing site does not use, and then placed solid green controls on top of it. That is the green-on-green: a surface and its controls sharing one hue, with only lightness separating them. communityfiber.net does the opposite. Its ground is #F8FAFC, green appears as accent and call-to-action, and its gradient travels through hue (#03A63C -> #73bf4b -> #bdd63a) rather than through shade. This file moves the flow onto that footing: ground #F8FAFC, with a low-alpha ambient glow instead of a colour slab headings ink (#141414), with .text-gradient for the emphasised phrase accents the brand gradient as a 4px underline or hairline rule green reserved for primary buttons and status Page stylesheets are untouched; deleting this one restores the old look exactly. ========================================================================= */ /* ========================================================================= 1. Page grounds ========================================================================= */ /* query.html and signup.html painted the dark gradient on itself. */ body.brand-light, body.brand-light html { background: var(--npt-white) !important; color: var(--npt-black); } /* The dot pattern was white-on-dark; at 3-5% white it is invisible on a light ground. Same texture, inverted to ink. */ body.brand-light::before { background-image: radial-gradient(rgba(20, 20, 20, 0.05) 1px, transparent 1px) !important; background-size: 30px 30px; } /* Ambient brand glow, the marketing site's replacement for a colour block. */ body.brand-light::after { content: ""; position: fixed; z-index: 0; pointer-events: none; width: min(52vw, 720px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(3, 166, 60, 0.13), rgba(189, 214, 58, 0.07) 45%, transparent 70%); top: -18%; right: -12%; } /* ========================================================================= 2. Hero band (pricing.html .header-box) ========================================================================= */ .brand-light .header-box { background: var(--npt-white) !important; color: var(--npt-black); } /* Dotted texture and the diagonal wedge both assumed a dark ground. */ .brand-light .header-box::before { background-image: radial-gradient(rgba(20, 20, 20, 0.045) 1px, transparent 1px) !important; } .brand-light .header-box::after { background: var(--npt-white) !important; } .brand-light .header-box h1 { color: var(--npt-black); } .brand-light .header-box h1 i { /* The tick was light green for contrast on dark; on light it needs the core green. */ color: var(--cfn-green); } .brand-light .header-box p { color: #475569; opacity: 1; } /* The address was white with a white underline. Ink text, gradient underline. */ .brand-light .header-box #display-address, .brand-light .header-box strong #display-address { color: var(--npt-black) !important; border-bottom: 2px solid transparent; background-image: var(--cfn-gradient-flat); background-repeat: no-repeat; background-size: 100% 2px; background-position: 0 100%; padding-bottom: 2px; } /* ========================================================================= 3. Controls that used to sit on the dark hero ========================================================================= */ /* White-on-dark button becomes the brand primary now that the ground is light. */ .brand-light .save-quote-btn { background: var(--cfn-gradient-solid); color: #ffffff; box-shadow: 0 8px 16px rgba(3, 166, 60, 0.25), 0 2px 4px rgba(0, 0, 0, 0.1); } .brand-light .save-quote-btn:hover { background: var(--cfn-gradient-solid-hover); color: #ffffff; box-shadow: 0 12px 24px rgba(3, 166, 60, 0.35), 0 4px 8px rgba(0, 0, 0, 0.15); } /* The residential/business note was translucent white on dark. Targeted by class, not by [style]: that also caught the button wrapper and painted a band behind it. */ .brand-light .hero-note-card { background-color: transparent !important; border: 1px solid var(--npt-grey) !important; box-shadow: none !important; padding: 12px 22px !important; margin-top: 22px !important; } .brand-light .hero-note-card span, .brand-light .hero-note-card strong { color: #475569 !important; } .brand-light .hero-note-card a { color: var(--cfn-dark-green) !important; } /* A lone hairline once the note wraps to two lines; the statements read fine stacked. */ .brand-light .hero-note-card .desktop-divider { display: none !important; } /* The button needs no surface of its own. */ .brand-light .hero-cta { background: transparent !important; margin-top: 4px; } /* ========================================================================= 4. Checkout progress shells These were dark-green slabs sitting inside white cards. ========================================================================= */ .brand-light .checkout-progress-shell, .brand-light .checkout-progress-shell--embedded, .brand-light .checkout-progress-shell--hero { background: #ffffff !important; border: 1px solid var(--npt-grey); border-radius: 16px; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05); } .brand-light .checkout-progress-card { background: transparent; } .brand-light .checkout-progress-kicker { color: var(--cfn-dark-green); } .brand-light .checkout-progress-copy strong { color: var(--npt-black); } .brand-light .checkout-progress-step { color: #94a3b8; } .brand-light .checkout-progress-step.is-complete, .brand-light .checkout-progress-step.is-active { color: var(--cfn-dark-green); } /* Page sheets set these to #ffffff or near-white for the dark slab; each needs an explicit ink value now, including the hero variant pricing.css defines separately. */ .brand-light .checkout-progress-copy strong, .brand-light .checkout-progress-shell--hero .checkout-progress-copy strong { color: var(--npt-black) !important; } .brand-light .checkout-progress-shell--hero .checkout-progress-kicker { color: var(--cfn-dark-green) !important; } .brand-light .checkout-progress-shell--hero .checkout-progress-step { color: #94a3b8 !important; } .brand-light .checkout-progress-shell--hero .checkout-progress-step.is-complete, .brand-light .checkout-progress-shell--hero .checkout-progress-step.is-active { color: var(--cfn-dark-green) !important; } /* pricing.css sets the hero variant's copy to near-white separately from its strong. */ .brand-light .checkout-progress-shell--hero .checkout-progress-copy { color: #475569 !important; } /* "Order Preview" was rgba(255,255,255,0.8) for the old dark ground: white on white. */ .brand-light .summary-container h3 { color: var(--npt-black) !important; } /* The site header floated on a dark ground; on light it needs a hairline. */ .brand-light .site-header { background-color: #ffffff; border-bottom: 1px solid var(--npt-grey); box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04); } /* The connector between completed steps carries the gradient. */ .brand-light .checkout-progress-step.is-complete:not(:last-child)::after { background: var(--cfn-gradient-flat) !important; } /* ========================================================================= 5. Accent bars and banners ========================================================================= */ /* Card top rules and section accents move from two greens to the brand ramp. */ .brand-light .card::before, .brand-light .plan-display-card::before { background: var(--cfn-gradient-flat) !important; } /* Tier banner was a dark-green block on a white card. */ .brand-light .tier-billing-banner { background: var(--cfn-gradient-solid) !important; color: #ffffff; } /* ========================================================================= Promo pill ("Celebrate our 125th year!"). pricing.css gave it --npt-blue-soft/--npt-blue/--npt-lt-blue, which this tenant maps onto the greens, so a green chip sat on a green-tinted card with green text. It now reads as a label: white ground, deep green text, and the brand hue ramp carried in the border rather than the fill. ========================================================================= */ .brand-light .promo-tag, .brand-light .checkout-promo-tag { background: #ffffff !important; color: #065f46 !important; border: 2px solid var(--cfn-light-green); border-image: var(--cfn-gradient-flat) 1; border-radius: 0 !important; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06); } /* border-image squares the corners off, so the rounded pill is restored with a wrapper-free inset shadow instead. */ @supports not (border-image: linear-gradient(90deg, #000, #fff) 1) { .brand-light .promo-tag, .brand-light .checkout-promo-tag { border-radius: 50px !important; border-color: var(--cfn-light-green); } } /* ========================================================================= "Best value" badge vs the billing banner. Both occupy the top edge of the card, so on a card with both they collided. The badge moves to the corner, clear of the full-width strip. ========================================================================= */ .brand-light .pricing-box:has(.tier-billing-banner) .popular-badge { left: auto; right: 18px; top: -14px; transform: none; } /* Emphasised words in headings: gradient text rather than flat green. */ .brand-light .highlight-green { background: -webkit-linear-gradient(45deg, var(--cfn-green), var(--cfn-lime), var(--cfn-chartreuse)); background: var(--cfn-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--cfn-green); } /* ========================================================================= 6. Buttons across the flow Any solid-green fill becomes the brand's vertical blend with its shadow, so a button reads as raised rather than as a green patch on green. ========================================================================= */ .brand-light .sign-up-btn, .brand-light .stage-next-btn, .brand-light #submit-btn, .brand-light .service-step-next { background: var(--cfn-gradient-solid); color: #ffffff; box-shadow: 0 8px 16px rgba(3, 166, 60, 0.25), 0 2px 4px rgba(0, 0, 0, 0.1); transition: all 0.2s ease-in-out; } .brand-light .sign-up-btn:hover, .brand-light .stage-next-btn:hover, .brand-light #submit-btn:hover, .brand-light .service-step-next:hover { background: var(--cfn-gradient-solid-hover); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(3, 166, 60, 0.35), 0 4px 8px rgba(0, 0, 0, 0.15); } /* ========================================================================= 7. Content surfaces that sat on the dark ground ========================================================================= */ .brand-light .main-wrapper, .brand-light .form-container { position: relative; z-index: 1; } /* .summary-container is deliberately NOT given `position: relative` here. The same element carries .summary-card, which service-step.css makes `position: sticky; top: 88px`. Overriding position to relative turned that offset into a permanent 88px shove down the page and stopped the sidebar sticking on scroll. It is a grid item on the checkout steps and a flex item on signup, and z-index applies to those without positioning, so the stacking this rule was added for still works. */ .brand-light .summary-container { z-index: 1; } @media (prefers-reduced-motion: reduce) { .brand-light .sign-up-btn:hover, .brand-light .stage-next-btn:hover, .brand-light #submit-btn:hover, .brand-light .save-quote-btn:hover { transform: none; } } /* ========================================================================= 8. Checkout progress track Every page styled this for a dark slab, in two different broken ways: signup / connection / add-ons dot rgba(255,255,255,0.2) on a white border connector rgba(255,255,255,0.15) ...all of which is invisible on a light ground. pricing (.checkout-progress-shell--hero) dot rgba(15,23,42,0.78) -> heavy black blobs for upcoming steps connector rgba(255,255,255,0.2) -> the track after the active step vanished, leaving the right half disconnected. One light treatment for all of them: hollow dots on a grey track, green for done, a green ring for where you are, and the brand ramp on the completed segment. Scoped under .brand-light and loaded last, so it outranks both the base rules and the --hero variant. ========================================================================= */ /* Upcoming: hollow dot, grey ring. */ .brand-light .checkout-progress-step::before { background: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: 0 0 0 4px rgba(248, 250, 252, 0.95) !important; } /* The track itself, visible along its whole length. */ .brand-light .checkout-progress-step:not(:last-child)::after { background: #dbe6f1 !important; } /* Where you are: white centre, green ring, soft green halo. */ .brand-light .checkout-progress-step.is-active::before { background: #ffffff !important; border-color: var(--cfn-green) !important; box-shadow: 0 0 0 5px rgba(139, 217, 173, 0.28) !important; } /* Done: filled green. */ .brand-light .checkout-progress-step.is-complete::before { background: var(--cfn-green) !important; border-color: var(--cfn-green) !important; box-shadow: 0 0 0 4px rgba(230, 247, 236, 0.95) !important; } /* Completed segments carry the brand hue ramp rather than a flat green. */ .brand-light .checkout-progress-step.is-complete:not(:last-child)::after { background: var(--cfn-gradient-flat) !important; } /* Labels: muted ahead, ink where you are, green behind you. */ .brand-light .checkout-progress-step { color: #94a3b8 !important; } .brand-light .checkout-progress-step.is-active { color: var(--npt-black) !important; font-weight: 700; } .brand-light .checkout-progress-step.is-complete { color: var(--cfn-dark-green) !important; } /* The shell was stretched edge to edge, which spread four steps very thin. */ .brand-light .checkout-progress-shell--hero .checkout-progress-card, .brand-light .checkout-progress-shell .checkout-progress-card { max-width: 780px; margin: 0 auto; } /* ========================================================================= 9. Hero group as one card The headline, the territory line, the address, the residential note, the alerts button and the progress track are one thought: "here is your result, here is where you are". They now sit in a single white card on the light ground rather than floating as separate fragments, and the pieces inside it lose their own borders so there are no boxes within boxes. ========================================================================= */ .brand-light .header-box .content-width { background: #ffffff; border: 1px solid var(--npt-grey); border-radius: 22px; box-shadow: 0 18px 44px rgba(15, 23, 42, 0.07); padding: 40px 44px 32px; /* Matches .pricing-container so the card's edges line up with the tier row beneath it. pricing.css caps .content-width at 1000px, which left the card noticeably narrower than the cards it sits above. */ max-width: 1400px; } /* A 1400px card must not become a 1400px line of text. The headline and the copy keep a readable measure inside it; the note and the progress track are allowed to run wider because they are structured, not prose. */ .brand-light .header-box h1, .brand-light .header-box p { max-width: 780px; margin-left: auto; margin-right: auto; } .brand-light .header-box .hero-note-card { max-width: 900px !important; margin-left: auto !important; margin-right: auto !important; } /* pricing.css sets this to 300, which reads thin and washed out now that it is dark text on white rather than light text on a dark slab. */ .brand-light .header-box p { font-weight: 500; color: #475569; opacity: 1; } .brand-light .header-box { /* The card carries the padding now. */ padding-top: 44px; } /* Inside the card these become sections, separated by rules rather than boxes. */ .brand-light .header-box .hero-note-card { border: 0 !important; border-top: 1px solid var(--npt-grey) !important; border-radius: 0 !important; background: transparent !important; width: 100% !important; max-width: none !important; margin: 26px 0 0 !important; padding: 20px 0 0 !important; box-shadow: none !important; } .brand-light .header-box .hero-cta { margin-top: 18px; } .brand-light .header-box .checkout-progress-shell, .brand-light .header-box .checkout-progress-shell--hero { background: transparent !important; border: 0 !important; border-top: 1px solid var(--npt-grey) !important; border-radius: 0 !important; box-shadow: none !important; margin-top: 26px; padding: 22px 0 0 !important; } @media (max-width: 640px) { .brand-light .header-box .content-width { padding: 26px 20px 22px; border-radius: 18px; } } /* ========================================================================= 10. 125 Years ribbon (query page) It was a green gradient panel carrying green headings, green years and a green timeline — the same green-on-green, just in a corner. White card, ink copy, and the brand ramp kept for the two things worth accenting: the numeral and the timeline thread. ========================================================================= */ .brand-light .celebration-ribbon { background: #ffffff !important; border: 1px solid var(--npt-grey) !important; box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08), inset 0 1px 0 #ffffff !important; } /* Ambient glow instead of a colour wash, at the brand's own alpha. */ .brand-light .celebration-ribbon::before { background: radial-gradient(circle, rgba(3, 166, 60, 0.13), rgba(189, 214, 58, 0.07) 45%, transparent 70%) !important; } /* The numeral is the one place the full gradient earns its keep. */ .brand-light .celebration-title .year-number { background: -webkit-linear-gradient(45deg, var(--cfn-green), var(--cfn-lime), var(--cfn-chartreuse)); background: var(--cfn-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--cfn-green); } .brand-light .celebration-title .year-label { color: #64748b; } .brand-light .ribbon-content p { color: #475569 !important; } .brand-light .ribbon-content strong { color: var(--cfn-dark-green) !important; } .brand-light .heritage-year { color: #94a3b8 !important; } /* The thread between 1901 and 2026 carries the ramp top to bottom. */ .brand-light .heritage-line { background: linear-gradient(180deg, var(--cfn-green), var(--cfn-lime), var(--cfn-chartreuse)) !important; opacity: 0.9; } .brand-light .ribbon-footer { border-top: 1px solid var(--npt-grey); } .brand-light .ribbon-footer .slogan { color: #334155 !important; } /* ========================================================================= 11. Perks ("Stickers / Perks" in Admin) These were literal stickers: five candy fills (#facc15, #ec4899, #22d3ee…), a random rotation per item, a scale-3 "slap" entrance, a grain texture and a scroll-driven shimmer. Playful, but it read as a toy next to the rest of the flow, and a rotated sticker undersells a real inclusion. The replacement keeps the job — make the extras impossible to miss and make them feel like something you would normally pay for — and drops the costume: - a bordered panel, so the perks are one object rather than confetti - an eyebrow, "Included — normally extra", which is the actual message - the brand ramp as a 3px cap, with a slow travel so it has life - a gradient check per line, ink label, Montserrat weight The data model is untouched: still comma-separated in Admin. ========================================================================= */ /* The card pads 30px horizontally (24px in the compact tone), so the band pulls back exactly that much to meet the inside edge of the card border. The card's sides are straight, so a square-edged band lines up with them; only the corners are rounded. */ .pricing-box { --tier-pad-x: 30px; } .pricing-box.tier-tone-compact { --tier-pad-x: 24px; } .perk-panel { position: relative; margin: 20px calc(-1 * var(--tier-pad-x, 30px)); padding: 14px var(--tier-pad-x, 30px) 13px; border: 0; border-top: 1px solid rgba(3, 166, 60, 0.16); border-bottom: 1px solid rgba(3, 166, 60, 0.16); border-radius: 0; background: linear-gradient( 90deg, rgba(3, 166, 60, 0.09) 0%, rgba(139, 217, 173, 0.15) 45%, rgba(189, 214, 58, 0.10) 100% ); box-shadow: none; overflow: hidden; text-align: left; } /* Perks lie along the band rather than stacking down it. */ .perk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; } /* The brand ramp runs the full width of the band, travelling slowly so it has life without anything moving on the page. */ .perk-panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--cfn-green), var(--cfn-lime), var(--cfn-chartreuse), var(--cfn-lime), var(--cfn-green)); background-size: 200% 100%; animation: perk-cap-travel 7s linear infinite; } @keyframes perk-cap-travel { from { background-position: 0% 0; } to { background-position: 200% 0; } } .perk-panel-label { font-family: var(--font-heading); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cfn-dark-green); margin-bottom: 8px; } .perk-item { display: flex; align-items: center; gap: 10px; } .perk-check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; border-radius: 999px; background: var(--cfn-gradient-solid); color: #ffffff; font-size: 0.6rem; box-shadow: 0 2px 6px rgba(3, 166, 60, 0.3); } .perk-text { font-family: var(--font-heading); font-size: 0.92rem; font-weight: 700; line-height: 1.35; color: var(--npt-black); } /* ========================================================================= The same perks appear as a compact row in the checkout summary and add-ons (.plan-stickers-row / .sticker-badge). Same language, smaller. ========================================================================= */ .brand-light .plan-stickers-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .brand-light .sticker-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 9px; border: 1px solid rgba(3, 166, 60, 0.22); border-radius: 999px; background: #ffffff; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700; color: var(--npt-black); transform: none; } .brand-light .sticker-badge i { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 999px; background: var(--cfn-gradient-solid); color: #ffffff !important; font-size: 0.5rem; } @media (prefers-reduced-motion: reduce) { .perk-panel::before { animation: none; background-position: 0 0; } } /* On a phone the card is ~86% of the viewport; two perks side by side get tight. */ @media (max-width: 640px) { .perk-list { flex-direction: column; gap: 8px; } } /* ========================================================================= 12. "Who it's for" pricing.css renders this as a green-tinted box with a 4px green left bar and dark green text. Two problems: it is green on green, and a left-barred panel is the shape of an alert, so plain guidance read as a warning. It also sat directly beneath the perk band, so two green-washed blocks stacked up. It is guidance, so it is now typographic rather than boxed: a quiet label, the audience sentence carrying weight, and the detail beneath it. ========================================================================= */ .brand-light .plan-description { display: block; background: none; border: 0; border-top: 1px solid var(--npt-grey); border-radius: 0; min-height: 0; margin: 4px 0 18px; padding: 14px 0 0; text-align: left; color: inherit; } .brand-light .plan-description-label { display: block; margin-bottom: 6px; font-family: var(--font-heading); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #94a3b8; } .brand-light .plan-description-lead { display: block; margin-bottom: 4px; font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; line-height: 1.4; color: var(--npt-black); } .brand-light .plan-description-detail { display: block; font-family: var(--font-body); font-size: 0.88rem; font-weight: 400; line-height: 1.6; color: #64748b; }