/* =========================================================
REOP AI GOV: HEADER + FOOTER (WordPress-safe CSS only)
Targets ONLY your .reop-page shell
Goals:
– Stronger emerald + gold + sheen
– Cleaner header nav + CTA
– Footer links brighter (remove “greyed out” / small URL-like subtext)
– “Connect” GitHub becomes an icon button (not plain text)
– Better spacing + mobile menu behavior
========================================================= */
/* ———- 0) TOKENS (safe fallbacks) ———- */
.reop-page.reop-ai-gov{
–reop-emerald: #19c37d;
–reop-emerald-2: #0b8f66;
–reop-gold: #d4a843;
–reop-gold-2: #f3e3bf;
–reop-ink: rgba(0,0,0,.92);
–reop-text: rgba(243,227,191,.82);
–reop-text-strong: rgba(243,227,191,.92);
–reop-border-gold: rgba(212,168,67,.28);
–reop-border-emerald: rgba(25,195,125,.22);
–reop-panel: rgba(0,0,0,.46);
–reop-panel-2: rgba(0,0,0,.62);
–reop-glow-gold: 0 0 26px rgba(212,168,67,.22);
–reop-glow-emerald: 0 0 26px rgba(25,195,125,.18);
}
/* ———- 1) HEADER BACKPLATE + GRAIN ———- */
.reop-page.reop-ai-gov .reop-header{
position: sticky;
top: 0;
z-index: 9999;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background:
radial-gradient(900px 220px at 16% 10%, rgba(25,195,125,.18), transparent 58%),
radial-gradient(900px 240px at 82% 12%, rgba(212,168,67,.16), transparent 60%),
linear-gradient(180deg, rgba(0,0,0,.74), rgba(0,0,0,.38));
border-bottom: 1px solid rgba(212,168,67,.18);
box-shadow:
0 18px 55px rgba(0,0,0,.55),
inset 0 1px 0 rgba(255,255,255,.05);
}
.reop-page.reop-ai-gov .reop-header::after{
content:””;
position:absolute;
inset:0;
pointer-events:none;
background-image: url(“data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ width=’160′ height=’160’%3E%3Cfilter id=’n’%3E%3CfeTurbulence type=’fractalNoise’ baseFrequency=’0.85′ numOctaves=’3′ stitchTiles=’stitch’/%3E%3C/filter%3E%3Crect width=’160′ height=’160′ filter=’url(%23n)’ opacity=’0.06’/%3E%3C/svg%3E”);
mix-blend-mode: overlay;
opacity: .85;
}
/* ———- 2) HEADER LAYOUT + BRAND ———- */
.reop-page.reop-ai-gov .reop-header-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap: 16px;
padding: 12px 0;
}
.reop-page.reop-ai-gov .reop-brand{
display:flex;
align-items:center;
gap: 12px;
text-decoration:none;
color: var(–reop-gold-2);
}
.reop-page.reop-ai-gov .reop-brand img{
border-radius: 14px;
box-shadow:
0 10px 30px rgba(0,0,0,.6),
0 0 28px rgba(212,168,67,.18);
border: 1px solid rgba(212,168,67,.22);
}
.reop-page.reop-ai-gov .reop-brand-name{
font-weight: 600;
letter-spacing: .35px;
text-shadow: 0 8px 26px rgba(0,0,0,.55);
}
/* ———- 3) NAV LINKS + CTA (more emerald + sheen) ———- */
.reop-page.reop-ai-gov .reop-nav{
display:flex;
align-items:center;
gap: 10px;
flex-wrap: wrap;
}
.reop-page.reop-ai-gov .reop-nav-link{
text-decoration:none;
color: rgba(243,227,191,.88);
font-size: .95rem;
padding: 9px 12px;
border-radius: 999px;
border: 1px solid rgba(212,168,67,.16);
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,.06), transparent 60%),
linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.42));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 10px 28px rgba(0,0,0,.38);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}
.reop-page.reop-ai-gov .reop-nav-link:hover{
transform: translateY(-2px);
border-color: rgba(25,195,125,.30);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
0 14px 34px rgba(0,0,0,.48),
var(–reop-glow-emerald);
filter: saturate(1.1);
}
.reop-page.reop-ai-gov .reop-nav-cta{
text-decoration:none;
color: rgba(8,22,16,.92);
font-weight: 650;
padding: 10px 14px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.12);
background:
radial-gradient(circle at 24% 22%, rgba(255,255,255,.40), transparent 46%),
radial-gradient(circle at 70% 70%, rgba(0,0,0,.18), transparent 62%),
linear-gradient(180deg, rgba(243,227,191,.72), rgba(212,168,67,.96) 40%, rgba(25,195,125,.50) 100%);
box-shadow:
inset 0 6px 12px rgba(255,255,255,.22),
inset 0 -14px 22px rgba(0,0,0,.34),
0 18px 44px rgba(0,0,0,.55),
var(–reop-glow-gold);
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.reop-page.reop-ai-gov .reop-nav-cta:hover{
transform: translateY(-2px);
filter: saturate(1.08) brightness(1.03);
box-shadow:
inset 0 6px 12px rgba(255,255,255,.26),
inset 0 -16px 26px rgba(0,0,0,.36),
0 22px 55px rgba(0,0,0,.62),
0 0 34px rgba(25,195,125,.20),
0 0 30px rgba(212,168,67,.26);
}
/* ———- 4) MOBILE MENU (WordPress-safe) ———- */
.reop-page.reop-ai-gov .reop-menu-toggle{
display:none;
appearance:none;
border: 1px solid rgba(212,168,67,.20);
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,.08), transparent 60%),
linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.50));
border-radius: 14px;
padding: 10px 12px;
box-shadow: 0 12px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.reop-page.reop-ai-gov .reop-menu-icon{
display:block;
width: 22px;
height: 2px;
background: rgba(243,227,191,.88);
position: relative;
}
.reop-page.reop-ai-gov .reop-menu-icon::before,
.reop-page.reop-ai-gov .reop-menu-icon::after{
content:””;
position:absolute;
left:0;
width:22px;
height:2px;
background: rgba(243,227,191,.88);
}
.reop-page.reop-ai-gov .reop-menu-icon::before{ top:-7px; }
.reop-page.reop-ai-gov .reop-menu-icon::after{ top:7px; }
@media (max-width: 980px){
.reop-page.reop-ai-gov .reop-menu-toggle{ display:inline-flex; align-items:center; justify-content:center; }
.reop-page.reop-ai-gov .reop-nav{
position:absolute;
right: 12px;
top: 64px;
display:none;
width: min(520px, calc(100vw – 24px));
padding: 14px;
gap: 10px;
border-radius: 18px;
background:
radial-gradient(900px 260px at 18% 10%, rgba(25,195,125,.16), transparent 62%),
radial-gradient(900px 260px at 82% 12%, rgba(212,168,67,.14), transparent 62%),
linear-gradient(180deg, rgba(0,0,0,.64), rgba(0,0,0,.78));
border: 1px solid rgba(212,168,67,.20);
box-shadow: 0 24px 70px rgba(0,0,0,.68), inset 0 1px 0 rgba(255,255,255,.06);
}
.reop-page.reop-ai-gov .reop-nav.is-open{ display:flex; flex-direction:column; align-items:stretch; }
.reop-page.reop-ai-gov .reop-nav-link,
.reop-page.reop-ai-gov .reop-nav-cta{ justify-content:center; text-align:center; }
}
/* ———- 5) FOOTER: BRIGHTER, MORE EMERALD + GOLD ———- */
.reop-page.reop-ai-gov .reop-footer{
margin-top: 68px;
padding: 54px 0 22px;
background:
radial-gradient(900px 360px at 16% 20%, rgba(25,195,125,.16), transparent 60%),
radial-gradient(900px 360px at 82% 22%, rgba(212,168,67,.14), transparent 62%),
linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,.86));
border-top: 1px solid rgba(212,168,67,.18);
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
position: relative;
}
.reop-page.reop-ai-gov .reop-footer::before{
content:””;
position:absolute;
inset:0;
pointer-events:none;
background-image: url(“data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ width=’180′ height=’180’%3E%3Cfilter id=’n’%3E%3CfeTurbulence type=’fractalNoise’ baseFrequency=’0.78′ numOctaves=’4′ stitchTiles=’stitch’/%3E%3C/filter%3E%3Crect width=’180′ height=’180′ filter=’url(%23n)’ opacity=’0.06’/%3E%3C/svg%3E”);
mix-blend-mode: overlay;
opacity: .8;
}
.reop-page.reop-ai-gov .reop-footer-grid{
display:grid;
grid-template-columns: 1.2fr 1fr 1fr .9fr;
gap: 22px 26px;
}
@media (max-width: 980px){
.reop-page.reop-ai-gov .reop-footer-grid{
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 620px){
.reop-page.reop-ai-gov .reop-footer-grid{
grid-template-columns: 1fr;
}
}
/* Footer headings */
.reop-page.reop-ai-gov .reop-footer-h{
color: rgba(212,168,67,.95);
letter-spacing: .35px;
font-weight: 650;
margin-bottom: 10px;
text-shadow: 0 10px 28px rgba(0,0,0,.55);
}
/* Footer body */
.reop-page.reop-ai-gov .reop-footer-p{
color: rgba(243,227,191,.78);
line-height: 1.65;
margin: 0;
}
/* Footer links: brighter + no underlines, no “greyed out” subtext */
.reop-page.reop-ai-gov .reop-footer a{
display:inline-flex;
align-items:center;
gap: 10px;
color: rgba(243,227,191,.86);
text-decoration:none;
padding: 6px 0;
font-size: .98rem;
text-shadow: 0 10px 24px rgba(0,0,0,.55);
transition: color .18s ease, transform .18s ease, filter .18s ease;
}
.reop-page.reop-ai-gov .reop-footer a:hover{
color: rgba(243,227,191,.95);
transform: translateY(-1px);
filter: saturate(1.08);
}
/* If your theme injects little grey URL/subtext spans, kill them */
.reop-page.reop-ai-gov .reop-footer a small,
.reop-page.reop-ai-gov .reop-footer a .sub,
.reop-page.reop-ai-gov .reop-footer a .url,
.reop-page.reop-ai-gov .reop-footer a .path{
display:none !important;
}
/* Footer bottom */
.reop-page.reop-ai-gov .reop-footer-bottom{
margin-top: 26px;
padding-top: 16px;
border-top: 1px solid rgba(212,168,67,.14);
}
.reop-page.reop-ai-gov .reop-footer-small{
color: rgba(243,227,191,.62);
}
/* ———- 6) CONNECT: GITHUB ICON BUTTON (not plain text) ———- */
.reop-page.reop-ai-gov .reop-footer .reop-social{
margin-top: 6px;
padding: 10px 14px;
border-radius: 14px;
border: 1px solid rgba(212,168,67,.20);
background:
radial-gradient(circle at 26% 22%, rgba(255,255,255,.10), transparent 55%),
radial-gradient(circle at 70% 78%, rgba(25,195,125,.10), transparent 60%),
linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.48));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 14px 34px rgba(0,0,0,.50);
position: relative;
}
/* Replace “GitHub” text with an icon + label that looks intentional */
.reop-page.reop-ai-gov .reop-footer .reop-social::before{
content:””;
width: 22px;
height: 22px;
display:inline-block;
flex: 0 0 22px;
background-repeat:no-repeat;
background-position:center;
background-size: contain;
filter: drop-shadow(0 8px 18px rgba(0,0,0,.55));
/* inline SVG github mark */
background-image: url(“data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ viewBox=’0 0 24 24’%3E%3Cpath fill=’%23f3e3bf’ d=’M12 2.6a9.6 9.6 0 0 0-3 18.7c.5.1.7-.2.7-.5v-1.7c-2.8.6-3.4-1.2-3.4-1.2-.4-1-1-1.3-1-1.3-.8-.6.1-.6.1-.6.9.1 1.4.9 1.4.9.8 1.4 2.1 1 2.7.8.1-.6.3-1 .6-1.2-2.2-.3-4.5-1.1-4.5-5a3.9 3.9 0 0 1 1-2.7 3.6 3.6 0 0 1 .1-2.7s.8-.3 2.7 1a9.4 9.4 0 0 1 5 0c1.9-1.3 2.7-1 2.7-1 .5 1.3.2 2.3.1 2.7a3.9 3.9 0 0 1 1 2.7c0 3.9-2.3 4.7-4.5 5 .3.3.7.9.7 1.8v2.7c0 .3.2.6.7.5A9.6 9.6 0 0 0 12 2.6Z’/%3E%3C/svg%3E”);
}
/* Hover sheen */
.reop-page.reop-ai-gov .reop-footer .reop-social:hover{
border-color: rgba(25,195,125,.28);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
0 18px 44px rgba(0,0,0,.58),
0 0 24px rgba(25,195,125,.18),
0 0 26px rgba(212,168,67,.18);
}
/* ———- 7) GENERAL “no underline” inside this page ———- */
.reop-page.reop-ai-gov a,
.reop-page.reop-ai-gov a:visited{
text-decoration: none;
}
/* ———- 8) OPTIONAL: brighten section headings slightly ———- */
.reop-page.reop-ai-gov .reop-h2,
.reop-page.reop-ai-gov .reop-h3{
text-shadow: 0 12px 30px rgba(0,0,0,.55);
}