/* =========================
P.Ai Global Health — styles.css
(AJ-safe, minimalist, consistent)
========================= */
/* Base */
:root{
--brand-blue: #2563eb;
--brand-indigo: #4f46e5;
--text: #111827;
--muted: #6b7280;
--border: #e5e7eb;
--bg: #ffffff;
}
html, body {
height: 100%;
}
body{
font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color
Emoji","Segoe UI Emoji";
color: var(--text);
}
/* Focus styles (keyboard accessibility) */
:focus-visible{
outline: 2px solid var(--brand-blue);
outline-offset: 3px;
border-radius: 10px;
}
/* Small utility: prevent layout shift when fixed nav exists */
main[id="main"]{
scroll-margin-top: 110px;
}
/* =========================
Identity Strip (Frozen Tagline Strip)
Add this block in HTML where needed; CSS supports it here.
========================= */
.identity-strip{
margin-top: 72px; /* space under fixed nav */
background: #0b1220;
color: #e5e7eb;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.identity-strip .identity-inner{
max-width: 80rem;
margin: 0 auto;
padding: 14px 24px;
}
.identity-strip .line1{
font-weight: 700;
color: #ffffff;
font-size: 0.95rem;
}
.identity-strip .line2{
margin-top: 4px;
color: #cbd5e1;
font-size: 0.9rem;
}
/* =========================
Workflow diagram components (product.html)
========================= */
.workflow-node{
border-radius: 16px;
padding: 18px 18px 16px 18px;
border: 2px solid #e5e7eb;
box-shadow: 0 10px 20px rgba(17,24,39,0.06);
text-align: center;
}
.workflow-arrow{
display: flex;
justify-content: center;
color: #6b7280;
}
/* =========================
Mockup windows (product.html)
========================= */
.mockup-window{
border-radius: 18px;
border: 1px solid var(--border);
background: #fff;
overflow: hidden;
box-shadow: 0 18px 40px rgba(17,24,39,0.10);
}
.mockup-browser-bar{
background: #f3f4f6;
border-bottom: 1px solid var(--border);
padding: 10px 14px;
display: flex;
align-items: center;
}
.mockup-dots{
display: flex;
gap: 6px;
}
.mockup-dot{
width: 10px;
height: 10px;
border-radius: 999px;
}
.mockup-dot-red{ background: #ef4444; }
.mockup-dot-yellow{ background: #f59e0b; }
.mockup-dot-green{ background: #22c55e; }
/* Inputs inside mockups */
.mockup-input{
width: 100%;
border: 2px solid #d1d5db;
border-radius: 12px;
padding: 12px 12px;
font-size: 0.95rem;
line-height: 1.35rem;
background: #ffffff;
transition: border-color .15s ease, box-shadow .15s ease;
}
.mockup-input:focus{
outline: none;
border-color: var(--brand-blue);
box-shadow: 0 0 0 4px rgba(37,99,235,0.18);
}
.mockup-button{
padding: 12px 18px;
border-radius: 12px;
font-weight: 700;
color: #ffffff;
background: linear-gradient(90deg, #2563eb, #4f46e5);
box-shadow: 0 10px 20px rgba(37,99,235,0.18);
transition: transform .15s ease, box-shadow .15s ease;
}
.mockup-button:hover{
transform: translateY(-1px);
box-shadow: 0 14px 24px rgba(37,99,235,0.22);
}
.mockup-button:active{
transform: translateY(0px);
box-shadow: 0 10px 20px rgba(37,99,235,0.18);
}
/* =========================
Timeline (product mockups)
========================= */
.timeline-item::before{
content: "";
position: absolute;
left: 19px;
top: 40px;
bottom: -24px;
width: 2px;
background: #e5e7eb;
z-index: 0;
}
.timeline-item:last-child::before{
display: none;
}
/* =========================
Footer / Links minor polish
========================= */
a{
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
a:hover{
text-decoration-thickness: 2px;
}
/* =========================
Responsive helpers
========================= */
@media (max-width: 768px){
.identity-strip{
margin-top: 64px;
}
main[id="main"]{
scroll-margin-top: 96px;
}
}