* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-family:
Inter,
Arial,
Helvetica,
sans-serif;
background:
#f4f7fb;
color:
#152236;
}
a {
color: inherit;
}
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 82px;
padding:
0 6vw;
background:
#07192c;
color:
white;
}
.brand {
text-decoration:
none;
font-size:
1.8rem;
font-weight:
900;
}
.brand span {
color:
#27cc72;
}
.site-header nav {
display: flex;
gap:
28px;
}
.site-header nav a {
text-decoration:
none;
font-weight:
800;
}
.hero {
min-height:
560px;
display: flex;
align-items: center;
padding:
70px 7vw;
color:
white;
background:
radial-gradient(
circle at 80% 15%,
rgba(34,209,119,.25),
transparent 35%
),
linear-gradient(
135deg,
#061529,
#092a42 60%,
#07523d
);
}
.hero-inner {
width:
min(1050px,100%);
}
.eyebrow {
color:
#35df86;
font-size:
.8rem;
font-weight:
900;
letter-spacing:
.17em;
margin-bottom:
12px;
}
.hero h1 {
max-width:
940px;
margin:
0;
font-size:
clamp(
2.7rem,
6vw,
5.5rem
);
line-height:
.98;
}
.hero h1 span {
display:
block;
color:
#45e697;
}
.hero p {
max-width:
760px;
margin:
24px 0;
font-size:
1.25rem;
line-height:
1.6;
color:
rgba(
255,
255,
255,
.82
);
}
.hero-actions {
display:
flex;
flex-wrap:
wrap;
gap:
13px;
}
.button {
display:
inline-block;
padding:
14px 22px;
border:
0;
border-radius:
9px;
text-decoration:
none;
font-weight:
900;
cursor:
pointer;
}
.primary {
background:
#20c875;
color:
#04170d;
}
.secondary {
background:
#1686d9;
color:
white;
}
.stats {
display:
grid;
grid-template-columns:
repeat(
3,
1fr
);
width:
min(1050px,calc(100% - 40px));
margin:
-55px auto 35px;
overflow:
hidden;
border-radius:
15px;
background:
white;
box-shadow:
0 20px 55px
rgba(
6,
30,
55,
.18
);
}
.stats div {
padding:
24px;
text-align:
center;
}
.stats strong {
display:
block;
color:
#087bc0;
font-size:
2rem;
}
.stats span {
color:
#687589;
font-weight:
800;
}
.section {
padding:
65px 22px;
}
.section-inner {
width:
min(1180px,100%);
margin:
auto;
}
.narrow {
width:
min(850px,100%);
}
.section h2,
.dark-section h2 {
margin:
0 0 25px;
font-size:
clamp(
2rem,
4vw,
3.3rem
);
}
.cards {
display:
grid;
gap:
17px;
}
.cards.four {
grid-template-columns:
repeat(
4,
1fr
);
}
.cards article {
padding:
23px;
border-radius:
14px;
background:
white;
box-shadow:
0 12px 35px
rgba(
5,
31,
55,
.09
);
}
.number {
width:
36px;
height:
36px;
display:
flex;
align-items:
center;
justify-content:
center;
border-radius:
50%;
background:
#20c875;
font-weight:
900;
}
.dark-section {
padding:
65px 22px;
background:
#07192c;
color:
white;
}
.categories {
display:
flex;
flex-wrap:
wrap;
gap:
10px;
}
.categories span {
padding:
10px 14px;
border-radius:
999px;
background:
rgba(
255,
255,
255,
.08
);
border:
1px solid
rgba(
65,
225,
150,
.22
);
}
.page-head {
padding:
55px 7vw;
background:
#07192c;
color:
white;
}
.page-head > div {
width:
min(1180px,100%);
margin:
auto;
}
.page-head h1 {
margin:
0;
max-width:
950px;
font-size:
clamp(
2.2rem,
5vw,
4rem
);
}
.search-form {
display:
grid;
grid-template-columns:
1fr 180px auto;
gap:
10px;
margin-bottom:
25px;
}
.search-form input,
.profile-form input,
.profile-form textarea {
width:
100%;
padding:
13px 14px;
border:
1px solid
#bdc9d5;
border-radius:
8px;
background:
white;
font:
inherit;
}
.search-form button {
border:
0;
border-radius:
8px;
padding:
0 24px;
background:
#1686d9;
color:
white;
font-weight:
900;
}
.grant-list {
display:
grid;
gap:
12px;
}
.grant-row,
.grant-card {
display:
block;
padding:
20px;
border-radius:
12px;
background:
white;
text-decoration:
none;
box-shadow:
0 8px 28px
rgba(
9,
34,
55,
.08
);
}
.grant-row {
display:
flex;
justify-content:
space-between;
gap:
15px;
}
.grant-row strong,
.grant-row span {
display:
block;
}
.grant-row span {
margin-top:
5px;
color:
#6a7688;
}
.grant-status,
.status {
color:
#0d8e53;
font-weight:
900;
}
.grant-card-top {
display:
flex;
justify-content:
space-between;
gap:
10px;
}
.source {
color:
#087bc0;
font-weight:
900;
}
.grant-card h3 {
margin:
14px 0 7px;
}
.grant-card p {
color:
#67758a;
}
.grant-meta {
display:
flex;
flex-wrap:
wrap;
gap:
18px;
color:
#667487;
font-size:
.9rem;
}
.profile-form {
display:
grid;
gap:
12px;
}
.profile-form h2 {
margin:
30px 0 4px;
font-size:
1.4rem;
}
.profile-form textarea {
min-height:
120px;
resize:
vertical;
}
.two {
display:
grid;
grid-template-columns:
repeat(
2,
1fr
);
gap:
10px;
}
.three {
display:
grid;
grid-template-columns:
repeat(
3,
1fr
);
gap:
10px;
}
.check-grid {
display:
grid;
grid-template-columns:
repeat(
2,
1fr
);
gap:
9px;
}
.check-grid label {
padding:
12px;
border-radius:
8px;
background:
white;
border:
1px solid
#d6dfe8;
}
.check-grid input {
width:
auto;
margin-right:
8px;
}
.detail-grid {
display:
grid;
grid-template-columns:
repeat(
2,
1fr
);
gap:
12px;
margin-bottom:
30px;
}
.detail-grid div {
padding:
16px;
border-radius:
10px;
background:
white;
}
.detail-grid strong,
.detail-grid span {
display:
block;
}
.detail-grid span {
margin-top:
5px;
color:
#68768b;
}
.notice,
.saved-box {
margin:
25px 0;
padding:
20px;
border-radius:
12px;
background:
#eaf7f1;
border:
1px solid
#bce5d0;
}
.official-link {
display:
inline-block;
margin-top:
18px;
}
.card-actions {
display:
flex;
gap:
14px;
align-items:
center;
margin-top:
18px;
}
.button-small {
padding:
8px 13px;
border-radius:
7px;
background:
#20c875;
text-decoration:
none;
font-weight:
900;
}
footer {
padding:
35px 7vw;
background:
#04111f;
color:
rgba(
255,
255,
255,
.72
);
}
footer strong {
display:
block;
color:
white;
font-size:
1.25rem;
}
footer span {
display:
block;
margin-top:
4px;
}
footer p {
max-width:
800px;
font-size:
.85rem;
line-height:
1.5;
}
@media(max-width:850px) {
.cards.four {
grid-template-columns:
repeat(
2,
1fr
);
}
.search-form {
grid-template-columns:
1fr;
}
.two,
.three {
grid-template-columns:
1fr;
}
}
@media(max-width:560px) {
.site-header {
flex-direction:
column;
gap:
10px;
padding:
18px;
}
.stats {
grid-template-columns:
1fr;
}
.cards.four,
.check-grid,
.detail-grid {
grid-template-columns:
1fr;
}
}
/* ==========================================================
ZGRANTS BRANDING — WALLPAPER + LOGO
========================================================== */
.site-header .brand {
display: flex;
align-items: center;
text-decoration: none;
}
.zgrants-logo {
display: block;
width: clamp(220px, 24vw, 390px);
height: auto;
max-height: 92px;
object-fit: contain;
}
.hero {
position: relative;
overflow: hidden;
background:
linear-gradient(
90deg,
rgba(4, 18, 34, .88) 0%,
rgba(4, 18, 34, .72) 40%,
rgba(4, 18, 34, .28) 68%,
rgba(4, 18, 34, .08) 100%
),
url('/static/img/grants.png');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(4, 18, 34, .10),
rgba(4, 18, 34, .28)
);
pointer-events: none;
}
.hero-inner {
position: relative;
z-index: 2;
}
@media(max-width: 850px) {
.zgrants-logo {
width: clamp(180px, 55vw, 300px);
max-height: 74px;
}
.hero {
background-position: 60% center;
background:
linear-gradient(
90deg,
rgba(4, 18, 34, .92) 0%,
rgba(4, 18, 34, .78) 58%,
rgba(4, 18, 34, .45) 100%
),
url('/static/img/grants.png');
background-size: cover;
}
}
/* ZGRANTS-WALLPAPER-FORCE-START */
.hero {
background-image:
linear-gradient(
90deg,
rgba(3, 18, 34, 0.78) 0%,
rgba(3, 18, 34, 0.58) 42%,
rgba(3, 18, 34, 0.18) 75%,
rgba(3, 18, 34, 0.05) 100%
),
url("/static/img/grants.png") !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-color: #06192c !important;
}
.hero::before {
background: transparent !important;
}
.hero-inner {
position: relative;
z-index: 2;
}
/* ZGRANTS-WALLPAPER-FORCE-END */
/* ZGRANTS-DOUBLE-LOGO-START */
.zgrants-logo {
width: clamp(440px, 48vw, 780px) !important;
max-height: 184px !important;
height: auto !important;
}
.site-header {
min-height: 150px !important;
}
@media(max-width:850px) {
.zgrants-logo {
width: clamp(320px, 85vw, 600px) !important;
max-height: 148px !important;
}
}
/* ZGRANTS-DOUBLE-LOGO-END */
/* ZGRANTS-AI-STYLES-START */
.zg-ai-panel {
margin-bottom: 36px;
padding: 26px;
border-radius: 18px;
background:
linear-gradient(
145deg,
#06192c,
#0a3240
);
color: white;
}
.zg-ai-kicker {
color: #42e394;
font-size: .78rem;
font-weight: 900;
letter-spacing: .15em;
}
.zg-ai-panel h2 {
margin: 6px 0 8px;
color: white;
}
.zg-ai-intro {
max-width: 800px;
color: rgba(255,255,255,.78);
line-height: 1.5;
}
.zg-ai-controls {
display: flex;
align-items: center;
gap: 15px;
margin-top: 18px;
}
#zgRunAi {
padding: 12px 18px;
border: 0;
border-radius: 8px;
background: #25ce7a;
color: #052015;
font-weight: 900;
cursor: pointer;
}
#zgRunAi:disabled {
opacity: .65;
cursor: wait;
}
#zgAiStatus {
color: rgba(255,255,255,.7);
}
.zg-ai-results {
display: grid;
gap: 14px;
margin-top: 20px;
}
.zg-ai-card {
padding: 20px;
border-radius: 13px;
background: white;
color: #172438;
}
.zg-ai-card-head {
display: flex;
align-items: center;
gap: 16px;
}
.zg-ai-score {
flex: 0 0 74px;
width: 74px;
height: 74px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #dcf8e9;
color: #087b45;
font-size: 1.3rem;
font-weight: 900;
}
.zg-ai-agency {
color: #1684c8;
font-size: .78rem;
font-weight: 900;
text-transform: uppercase;
}
.zg-ai-card h3 {
margin: 4px 0;
}
.zg-ai-summary {
color: #4b596d;
line-height: 1.5;
}
.zg-ai-meta {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 8px;
margin-top: 13px;
}
.zg-ai-meta div {
padding: 10px;
border-radius: 8px;
background: #f3f6f9;
}
.zg-ai-meta strong {
display: block;
margin-bottom: 4px;
font-size: .72rem;
text-transform: uppercase;
}
.zg-ai-reason {
margin-top: 12px;
padding: 12px;
border-radius: 8px;
}
.zg-ai-reason.good {
background: #e9f8ef;
}
.zg-ai-reason.warning {
background: #fff3d7;
}
.zg-ai-reason.missing {
background: #edf3f8;
}
.zg-ai-actions {
display: flex;
gap: 14px;
align-items: center;
margin-top: 15px;
}
.zg-ai-apply {
padding: 8px 13px;
border-radius: 7px;
background: #20c875;
color: #061b12;
text-decoration: none;
font-weight: 900;
}
.zg-ai-loading,
.zg-ai-empty,
.zg-ai-error {
padding: 18px;
border-radius: 9px;
background: rgba(255,255,255,.08);
}
.zg-ai-error {
background: #ffe8e8;
color: #812f2f;
}
.zg-ai-note {
margin-top: 14px;
color: rgba(255,255,255,.55);
font-size: .8rem;
}
@media(max-width:700px) {
.zg-ai-controls {
align-items: stretch;
flex-direction: column;
}
.zg-ai-meta {
grid-template-columns: 1fr;
}
}
/* ZGRANTS-AI-STYLES-END */
/* ==========================================================
ZGRANTS-SITEWIDE-WALLPAPER-START
========================================================== */
html {
min-height: 100%;
background: #071827;
}
body {
min-height: 100vh !important;
background:
linear-gradient(
rgba(3, 15, 28, 0.28),
rgba(3, 15, 28, 0.38)
),
url("/static/img/grants.png") center center / cover fixed no-repeat !important;
background-color: #071827 !important;
}
/*
* Keep normal page wrappers transparent so the
* wallpaper remains visible across every route.
*/
main,
.page,
.page-wrap,
.page-wrapper,
.site-main,
.content,
.content-wrap,
.content-wrapper,
.container-page,
.app-shell {
background: transparent !important;
}
/*
* Main sections should float over the wallpaper
* instead of painting an opaque page over it.
*/
section,
.section,
.content-section {
background-color: transparent;
}
/*
* Common content panels receive a readable
* frosted-glass treatment.
*/
.card,
.panel,
.box,
.grant-card,
.business-card,
.application-card,
.detail-card,
.stat-card,
.form-card,
.search-panel,
.results-panel,
.profile-card,
.workspace-card {
background:
rgba(
255,
255,
255,
0.88
) !important;
backdrop-filter:
blur(12px);
-webkit-backdrop-filter:
blur(12px);
}
/*
* Forms remain easy to read.
*/
form,
.form-panel,
.form-section {
background:
rgba(
255,
255,
255,
0.90
);
backdrop-filter:
blur(12px);
-webkit-backdrop-filter:
blur(12px);
}
/*
* Keep tables readable while allowing the
* wallpaper to remain visible around them.
*/
table {
background:
rgba(
255,
255,
255,
0.92
);
}
/*
* AI panel keeps its dark glass look.
*/
.zg-ai-panel {
background:
linear-gradient(
145deg,
rgba(6, 25, 44, 0.94),
rgba(10, 50, 64, 0.92)
) !important;
backdrop-filter:
blur(12px);
-webkit-backdrop-filter:
blur(12px);
}
/*
* Homepage hero may continue using the same
* wallpaper but should not be the only place
* where it appears.
*/
.hero {
background:
linear-gradient(
rgba(3, 15, 28, 0.22),
rgba(3, 15, 28, 0.42)
),
url("/static/img/grants.png") center center / cover no-repeat !important;
}
/*
* Footer remains readable without hiding the
* wallpaper with a solid block.
*/
footer,
.site-footer {
background:
rgba(
5,
19,
32,
0.88
) !important;
backdrop-filter:
blur(10px);
-webkit-backdrop-filter:
blur(10px);
}
/*
* Mobile browsers often handle fixed backgrounds
* poorly, so use normal scrolling there.
*/
@media (max-width: 900px) {
body {
background-attachment:
scroll !important;
}
}
/* ==========================================================
ZGRANTS-SITEWIDE-WALLPAPER-END
========================================================== */
/* ==========================================================
ZGRANTS-FROSTED-PAGE-HEADER-START
Large page-title area: 90% transparent + blurred
========================================================== */
.page-hero,
.page-header,
.inner-hero,
.inner-header,
.grants-hero,
.search-hero,
section.page-hero,
section.page-header {
background:
rgba(
4,
25,
43,
0.10
) !important;
backdrop-filter:
blur(18px)
saturate(125%) !important;
-webkit-backdrop-filter:
blur(18px)
saturate(125%) !important;
border-bottom:
1px solid
rgba(
255,
255,
255,
0.16
) !important;
}
/*
* Some ZGrants templates use the first large section
* directly below the navigation rather than a named
* page-hero class.
*/
body > header + main > section:first-child,
body > nav + main > section:first-child,
main > .section:first-child {
background:
rgba(
4,
25,
43,
0.10
) !important;
backdrop-filter:
blur(18px)
saturate(125%) !important;
-webkit-backdrop-filter:
blur(18px)
saturate(125%) !important;
}
/*
* Keep the title readable against the wallpaper.
*/
.page-hero h1,
.page-header h1,
.inner-hero h1,
.inner-header h1,
.grants-hero h1,
.search-hero h1 {
text-shadow:
0 2px 12px
rgba(
0,
0,
0,
0.55
);
}
/* ==========================================================
ZGRANTS-FROSTED-PAGE-HEADER-END
========================================================== */