/* ============================================================ Buoy IT Solutions — site theme (deploy/ pages + ui_kits/website cards only) Adopted Oct 2026 from the approved "Space Indigo & Flag Red + Gold" trial. Layers the brand treatment over the page modules: deep hero, dark header with gold wordmark, gold CTAs, indigo icon tiles + gold icons, gold labels, indigo card outlines. Not part of styles.css on purpose: these #root rules are site-specific and must not restyle consuming projects. Fold into _site-src over time; until then, every deploy page must link this file after styles.css. ============================================================ */ /* Deep hero */ #root header + section:has(h1){background:#1D3557!important;background-image:none!important} /* TRY: badge navy */ #root header + section:has(h1) :is(h1,p):not(section [style*="background"] *):not(button *):not(button){color:var(--honeydew)!important} #root header + section:has(h1) [style*="--red"]:not(section [style*="background"] *):not(button *):not(button){color:var(--accent)!important} #root header + section:has(h1) [style*="--steel"]:not(section [style*="background"] *):not(button *):not(button){color:var(--powder)!important} body{background:var(--bg-page)} /* Accent words on dark surfaces ("done properly", etc.): gold, not pink-red */ [style*="#ea4854"],[style*="rgb(234, 72, 84)"],#root [style*="var(--accent)"]:not(button):not(button *):not([style*="solid var(--accent)"]){color:var(--accent)!important} #root header + section:has(h1) svg:not([style*="--powder"] svg):not([style*="--honeydew"] svg):not([style*="--white"] svg):not([style*="#fff"] svg), #root section[style*="var(--navy"] [style*="--accent"] svg, #root section[style*="var(--navy"] svg[style*="--accent"]{color:var(--accent)!important} /* ---- More gold (dark surfaces only — every use below sits on Space Indigo / navy-900) ---- */ /* Hero: accent words in the H1 and the eyebrow label */ #root header + section:has(h1) h1 [style*="--red"]{color:var(--accent)!important} #root header + section:has(h1) [style*="uppercase"]:not([style*="--powder"] *):not([style*="--honeydew"] *):not([style*="--white"] *){color:var(--accent)!important} /* Dark bands (WiFi, Steady Hands, Reviews, CTA): eyebrows, headline accents, icons, active dot */ #root section[style*="var(--navy"] [style*="uppercase"]{color:var(--accent)!important} #root section[style*="var(--navy"] h2 [style*="--red"]{color:var(--accent)!important} #root section[style*="var(--navy"] svg:not(button svg):not([style*="--powder"] svg):not([style*="--honeydew"] svg):not([style*="--white"] svg){color:var(--accent)!important} #root section[style*="var(--navy"] button[aria-label^="Testimonial"][style*="--red"]{background:var(--accent)!important} /* Footer: column headings + icons */ #root footer h4,#root footer [style*="uppercase"]:not([style*="--red"]){color:var(--accent)!important} #root footer svg:not(button svg):not([style*="--powder"] svg):not([style*="--honeydew"] svg):not([style*="--white"] svg){color:var(--accent)!important} /* Icon tiles on light sections: dark tile + gold icon (gold on Space Indigo = 7.63:1) */ #root :is(span,div)[style*="background: var(--powder-100)"]:has(> svg){background:var(--navy)!important} #root :is(span,div)[style*="background: var(--powder-100)"]:has(> svg) > svg{color:var(--accent)!important} /* Steady Hands band CTA: gold fill, Space Indigo text (7.63:1) */ #root section:has(> img) button[style*="--red"]{background:var(--accent)!important;color:var(--navy)!important;border-color:var(--accent)!important} #root section:has(> img) button[style*="--red"] svg{color:var(--navy)!important} /* Get in touch contact icons: same dark tile + gold icon as the other icon tiles */ #root :is(span,div)[style*="background: var(--white)"]:has(> svg):not(:has(input,textarea,select)){background:var(--navy)!important;border-color:var(--navy)!important} #root :is(span,div)[style*="background: var(--white)"]:has(> svg):not(:has(input,textarea,select)) > svg{color:var(--accent)!important} /* Photo band overlay for the sunset-buoys photo: the bright peach horizon sits behind the copy, so the hold has to be heavier than the dark-water photo needed. */ #root section:has(> img) > div[style*="linear-gradient"]:not(.steady-scrim){background:linear-gradient(90deg, color-mix(in srgb, var(--navy) 60%, transparent) 0%, color-mix(in srgb, var(--navy) 60%, transparent) 42%, color-mix(in srgb, var(--navy) 0%, transparent) 50%)!important} /* Body copy in the photo band: lavender grey (#8D99AE) only just passes on SOLID indigo and drops to ~3.5:1 once photo shows through the overlay. Use the lighter steel step instead. */ #root section:has(> img) p{color:var(--honeydew)!important} #root section:has(> img) :is(h2,p,[style*="uppercase"]){text-shadow:0 1px 14px rgba(26,27,40,.55)} #root section:has(> img) :is(h2,p){max-width:470px!important} /* Section labels in gold. Gold TEXT on the light sections is ~1.6:1 (unreadable), so on light backgrounds the label sits in a Space Indigo pill — gold on indigo is 7.63:1. On dark sections it is plain gold text, as before. */ #root span[style*="text-transform: uppercase"][style*="letter-spacing: var(--tracking-wider)"]{color:var(--accent)!important} #root span[style*="text-transform: uppercase"][style*="letter-spacing: var(--tracking-wider)"] svg{color:var(--accent)!important} #root section:not([style*="var(--navy"]):not(:has(> img)) span[style*="text-transform: uppercase"][style*="letter-spacing: var(--tracking-wider)"]{background:var(--navy);padding:7px 12px 7px 10px;border-radius:999px} #root header + section:has(h1) span[style*="text-transform: uppercase"][style*="letter-spacing: var(--tracking-wider)"]{background:none;padding:0} /* Cards on light sections: Space Indigo outline */ #root section:not([style*="var(--navy"]) div[style*="border: var(--border-w) solid var(--border)"][style*="border-radius: var(--radius-lg)"]{border-color:var(--navy)!important;border-width:2px!important} /* Hero label anchor: gold, matching its text */ #root header + section:has(h1) span[style*="text-transform: uppercase"] svg, #root header + section:has(h1) span[style*="text-transform: uppercase"] svg *{color:var(--accent)!important;stroke:var(--accent)!important} /* ALL CTAs: gold fill, Space Indigo label + icon (7.63:1). Covers the hover state too, which swaps the inline fill to --red-600. */ #root button:is([style*="var(--red-ink)"],[style*="var(--red-600)"],[style*="var(--accent"]), .bits-cc-b1{background:var(--accent)!important;color:var(--navy)!important;border-color:var(--accent)!important} #root button:is([style*="var(--red-ink)"],[style*="var(--red-600)"],[style*="var(--accent"]) svg{color:var(--navy)!important} #root button:is([style*="var(--red-ink)"],[style*="var(--red-600)"],[style*="var(--accent"]):hover{filter:brightness(1.06)} /* Footer wordmark "SOLUTIONS": gold on dark (Ryanne's call). */ #root footer span[style*="--red"]{color:var(--accent)!important} /* Footer contact + social icons: gold */ #root footer svg, #root footer svg *{color:var(--accent)!important} #root footer svg[fill="none"] *{stroke:var(--accent)!important} #root footer span[style*="width: 40px"]{border-color:color-mix(in srgb, var(--accent) 45%, transparent)!important} /* Wave into the dark footer: drop the white crest line, which read as a stray rule on navy */ #root svg:has(path[fill="var(--navy)"]) path[fill="none"][stroke="#ffffff"]{display:none} /* Space Indigo outline on every light-surface card, form field and choice button. (The earlier card rule missed the services grid and the form fields.) */ #root [style*="solid var(--border)"]:not([style*="background: var(--navy"]):not(section[style*="var(--navy"] *){border-color:var(--navy)!important;border-width:2px!important} #root form textarea,#root form input:not([type=radio]):not([type=checkbox]):not([type=hidden]){border-color:var(--navy)!important} /* Residential / Business choice: navy icon + label; selected = gold fill */ #root form label:has(input[type=radio]) svg{color:var(--navy)!important} #root form label:has(input[type=radio]){color:var(--navy)!important} #root form label:has(input[type=radio]:checked){background:var(--navy)!important;border-color:var(--navy)!important;color:var(--honeydew)!important} #root form label:has(input[type=radio]:checked) svg{color:var(--accent)!important} #root form label:has(input[type=radio]:focus-visible){outline:2px solid var(--navy);outline-offset:2px} /* ---- TRIAL: dark header + gold wordmark ---- Header goes navy-900 (#1A1B28), one step darker than the Space Indigo hero, with a thin gold rule so the two dark surfaces read as separate bands rather than one block. Logo swaps to the knockout badge; "BUOY IT" honeydew, "SOLUTIONS" gold (7.63:1+). */ /* TRY: light header so a garnet "SOLUTIONS" can read (7.8:1+ on cream). Previous dark header kept below, commented out. */ #root header{background:#FAF5EF!important;border-bottom:2px solid color-mix(in srgb, var(--navy) 14%, transparent)!important} #root header .site-logo img{content:url("assets/logo.svg")} #root header .site-logo span span:first-child{color:var(--navy)!important} #root header .site-logo span span:last-child{color:#A50044!important} #root header .site-nav a{color:var(--navy)!important} #root header .site-nav a:hover{color:#A50044!important} #root header .site-burger{border-color:color-mix(in srgb, var(--navy) 30%, transparent)!important} #root header .site-burger svg{color:var(--navy)!important} #root header .site-menu{background:#FAF5EF!important} #root header .site-menu a{color:var(--navy)!important;border-color:color-mix(in srgb, var(--navy) 14%, transparent)!important} /* DARK HEADER (previous) — #root header{background:#142843!important; /* TRY: darker shade of badge navy *\/border-bottom:2px solid color-mix(in srgb, var(--accent) 55%, transparent)!important} #root header .site-logo img{content:url("assets/logo-white.svg")} #root header .site-logo span span:first-child{color:var(--honeydew)!important} #root header .site-logo span span:last-child{color:#A50044!important} /* TRY: garnet. Fallback: var(--red-400) #A50044 *\/ #root header .site-nav a{color:var(--steel-400)!important} #root header .site-nav a:hover{color:var(--honeydew)!important} #root header .site-burger{border-color:color-mix(in srgb, var(--accent) 45%, transparent)!important} #root header .site-burger svg{color:var(--honeydew)!important} #root header .site-menu{background:var(--navy-900)!important} #root header .site-menu a{color:var(--honeydew)!important;border-color:var(--navy)!important} */ #root header .site-nav a{font-size:17px!important} /* Form consistency: every field gets the same 1.5px Space Indigo edge. The text inputs draw their border on a wrapper div (border-strong), which is why they stayed grey. */ #root form div[style*="solid var(--border-strong)"]{border:2px solid var(--navy)!important} #root form textarea{border-width:2px!important} #root form label:has(input[type=radio]){border-width:2px!important} #root form div[style*="solid var(--border-strong)"]:focus-within,#root form textarea:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent)!important} /* Sensitive-info note: it used a negative top margin and overlapped the message box */ #root form p[style*="calc(var(--space-2) * -1)"]{margin:8px 0 0!important;font-size:14px!important;color:var(--steel-600)!important} /* Closing CTA band directly above the footer: light, not navy. Two navy surfaces back to back read as one heavy block. Matches the homepage, where the light contact section meets the footer's wave. Gold button stays (Space Indigo label, 7.63:1). */ #root section[style*="var(--navy"]:has(+ footer){background:var(--powder-100)!important} #root section[style*="var(--navy"]:has(+ footer) h2{color:var(--navy)!important} #root section[style*="var(--navy"]:has(+ footer) h2 [style*="--red"]{color:var(--red-on-tint)!important} #root section[style*="var(--navy"]:has(+ footer) p{color:var(--steel-600)!important} #root section[style*="var(--navy"]:has(+ footer) [style*="uppercase"]{color:var(--navy)!important} /* Button icons: the hero/dark-band rules paint every svg gold, which included the arrow inside the gold CTA — gold on gold, invisible, so the label looked pushed left. */ #root button[style*="var(--accent"] svg,#root button[style*="var(--accent"] svg *, #root button[style*="var(--red-ink)"] svg,#root button[style*="var(--red-ink)"] svg *, #root button[style*="var(--red-600)"] svg,#root button[style*="var(--red-600)"] svg *{color:var(--navy)!important;stroke:var(--navy)!important} /* Secondary buttons on dark surfaces: one line, readable label + icon */ #root button{white-space:nowrap} #root :is(section[style*="var(--navy"],header + section:has(h1)) button:not([style*="var(--red-ink)"]):not([style*="var(--red-600)"]):not([style*="var(--accent"]){color:var(--honeydew)!important;border-color:color-mix(in srgb, var(--honeydew) 55%, transparent)!important} #root :is(section[style*="var(--navy"],header + section:has(h1)) button:not([style*="var(--red-ink)"]):not([style*="var(--red-600)"]):not([style*="var(--accent"]) svg{color:var(--accent)!important} /* Outline "Call" links styled as buttons (they're , not