/* ============================================================
EBBI DESIGN SYSTEM — ebbi.css
Explore Beyond Borders Inc.
explorebeyondborders.ca
HOW TO USE:
Replace whatever CSS link is in each page's with:
All pages: index.html, home.html, services.html,
about.html, contact.html, intake.html
============================================================ */
/* ============================================================
1. DESIGN TOKENS — Color, Type, Space
============================================================ */
:root {
/* --- PRIMARY PALETTE --- */
--navy: #1A3C6B; /* Headers, sidebar, navbar bg */
--navy-dark: #0F2545; /* Navbar hover, footer bg */
--navy-light: #2A5298; /* Section accent, dividers */
--blue: #2563EB; /* CTAs, links, active states */
--blue-hover: #1D4ED8; /* Button hover */
--blue-light: #DBEAFE; /* Badge bg, tinted panels */
--blue-tint: #EFF6FF; /* Card backgrounds, alt rows */
/* --- NEUTRAL PALETTE --- */
--white: #FFFFFF;
--surface: #F8FAFC; /* Page background */
--surface-2: #F1F5F9; /* Card background */
--border: #E2E8F0; /* All borders */
--border-dark: #CBD5E1; /* Stronger dividers */
--text-primary:#1E293B; /* Body copy, labels */
--text-secondary:#475569; /* Muted text, captions */
--text-hint: #94A3B8; /* Placeholders, hints */
/* --- SEMANTIC COLORS --- */
--green: #16A34A; /* Approved, success, growth */
--green-light: #DCFCE7; /* Success badge bg */
--amber: #D97706; /* Deadlines, pending, warnings */
--amber-light: #FEF3C7; /* Warning badge bg */
--red: #DC2626; /* Error, rejected */
--red-light: #FEE2E2; /* Error badge bg */
--gold: #B8860B; /* Premium, authority accent */
/* --- PHILIPPINE FLAG ACCENT --- */
--ph-blue: #0038A8; /* Philippine blue */
--ph-red: #CE1126; /* Philippine red */
--ph-yellow: #FCD116; /* Philippine sun gold */
/* --- TYPOGRAPHY --- */
--font-sans: 'Inter', 'Segoe UI', Arial, sans-serif;
--font-serif: 'Lora', Georgia, serif; /* Letterheads, formal docs only */
--font-mono: 'JetBrains Mono', 'Courier New', monospace;
/* --- TYPE SCALE --- */
--text-xs: 0.75rem; /* 12px — captions, badges */
--text-sm: 0.875rem; /* 14px — meta, footer */
--text-base: 1rem; /* 16px — body */
--text-lg: 1.125rem; /* 18px — lead text */
--text-xl: 1.25rem; /* 20px — card titles */
--text-2xl: 1.5rem; /* 24px — section headings */
--text-3xl: 1.875rem; /* 30px — page headings */
--text-4xl: 2.25rem; /* 36px — hero headline */
--text-5xl: 3rem; /* 48px — landing hero only */
/* --- SPACING --- */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
/* --- LAYOUT --- */
--max-width: 1200px;
--content-width: 900px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;
/* --- SHADOWS --- */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.04);
--shadow-navbar: 0 2px 8px rgba(26,60,107,0.18);
/* --- TRANSITIONS --- */
--transition: 0.18s ease;
}
/* ============================================================
2. RESET & BASE
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: var(--font-sans);
font-size: var(--text-base);
color: var(--text-primary);
background: var(--surface);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--blue);
text-decoration: none;
transition: color var(--transition);
}
a:hover { color: var(--blue-hover); }
ul, ol { list-style: none; }
button, input, select, textarea {
font-family: var(--font-sans);
font-size: var(--text-base);
}
/* ============================================================
3. TYPOGRAPHY
============================================================ */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-sans);
font-weight: 700;
color: var(--navy);
line-height: 1.25;
letter-spacing: -0.01em;
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
p {
color: var(--text-secondary);
line-height: 1.75;
margin-bottom: var(--space-4);
}
p:last-child { margin-bottom: 0; }
strong { color: var(--text-primary); font-weight: 600; }
/* Section eyebrow label */
.eyebrow {
display: inline-block;
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--blue);
background: var(--blue-light);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
margin-bottom: var(--space-4);
}
.section-title {
font-size: var(--text-3xl);
color: var(--navy);
margin-bottom: var(--space-4);
}
.section-subtitle {
font-size: var(--text-lg);
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto var(--space-12);
}
/* ============================================================
4. LAYOUT UTILITIES
============================================================ */
.container {
width: 100%;
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--space-6);
}
.container-narrow {
max-width: var(--content-width);
margin: 0 auto;
padding: 0 var(--space-6);
}
.section {
padding: var(--space-20) 0;
}
.section-sm {
padding: var(--space-12) 0;
}
.section-lg {
padding: var(--space-24) 0;
}
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.grid-2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-6);
}
.grid-3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-6);
}
.grid-4 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-6);
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
/* ============================================================
5. NAVBAR
============================================================ */
.navbar {
position: sticky;
top: 0;
z-index: 1000;
background: var(--navy);
box-shadow: var(--shadow-navbar);
padding: 0;
}
.navbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 68px;
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--space-6);
}
/* Logo */
.navbar-brand {
display: flex;
align-items: center;
gap: var(--space-3);
text-decoration: none;
}
.navbar-logo {
height: 44px;
width: auto;
max-width: 168px;
object-fit: contain;
border-radius: var(--radius-sm);
background: var(--white);
padding: 2px 6px;
}
.navbar-brand-text {
display: none; /* wordmark included in ebbi-logo.png */
}
.navbar-brand-name {
font-size: var(--text-sm);
font-weight: 700;
color: var(--white);
letter-spacing: 0.02em;
}
.navbar-brand-sub {
font-size: 10px;
color: rgba(255,255,255,0.6);
font-weight: 400;
}
/* Nav links */
.navbar-nav {
display: flex;
align-items: center;
gap: var(--space-1);
list-style: none;
}
.navbar-nav a {
display: inline-block;
padding: var(--space-2) var(--space-3);
font-size: var(--text-sm);
font-weight: 500;
color: rgba(255,255,255,0.85);
border-radius: var(--radius-md);
transition: all var(--transition);
text-decoration: none;
}
.navbar-nav a:hover,
.navbar-nav a.active {
color: var(--white);
background: rgba(255,255,255,0.12);
}
/* CTA button in navbar */
.navbar-cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: var(--blue);
color: var(--white) !important;
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: 600;
transition: background var(--transition);
text-decoration: none;
}
.navbar-cta:hover {
background: var(--blue-hover);
color: var(--white) !important;
}
/* Mobile hamburger */
.navbar-toggle {
display: none;
background: none;
border: none;
color: var(--white);
font-size: 1.5rem;
cursor: pointer;
padding: var(--space-2);
line-height: 1;
}
/* Mobile nav drawer */
.navbar-mobile {
display: none;
background: var(--navy-dark);
padding: var(--space-4) var(--space-6);
border-top: 1px solid rgba(255,255,255,0.08);
}
.navbar-mobile.open { display: block; }
.navbar-mobile a {
display: block;
padding: var(--space-3) 0;
color: rgba(255,255,255,0.85);
font-size: var(--text-base);
font-weight: 500;
border-bottom: 1px solid rgba(255,255,255,0.06);
text-decoration: none;
}
.navbar-mobile a:last-child { border-bottom: none; }
.navbar-mobile .navbar-cta {
display: block;
text-align: center;
margin-top: var(--space-4);
padding: var(--space-3) var(--space-4);
}
/* ============================================================
6. HERO — index.html (landing / lawyer profile page)
============================================================ */
.hero-landing {
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
color: var(--white);
padding: var(--space-20) 0;
text-align: center;
position: relative;
overflow: hidden;
}
.hero-landing::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background:
radial-gradient(ellipse at 20% 50%, rgba(37,99,235,0.15) 0%, transparent 60%),
radial-gradient(ellipse at 80% 50%, rgba(26,60,107,0.20) 0%, transparent 60%);
pointer-events: none;
}
.hero-landing .container { position: relative; }
.hero-eagle {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 50%;
border: 3px solid rgba(255,255,255,0.3);
margin: 0 auto var(--space-6);
box-shadow: var(--shadow-lg);
}
.hero-landing h1 {
color: var(--white);
font-size: var(--text-4xl);
margin-bottom: var(--space-2);
}
.hero-landing .subtitle {
color: rgba(255,255,255,0.75);
font-size: var(--text-lg);
margin-bottom: var(--space-6);
}
/* Lawyer profile card on landing */
.profile-card {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
border-radius: var(--radius-xl);
padding: var(--space-8);
max-width: 520px;
margin: var(--space-8) auto;
backdrop-filter: blur(8px);
}
.profile-photo {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
border: 3px solid rgba(255,255,255,0.4);
margin: 0 auto var(--space-4);
display: block;
}
.profile-card .bio-photo-placeholder {
width: 96px;
height: 96px;
margin: 0 auto var(--space-4);
border: 3px solid rgba(255,255,255,0.4);
background: var(--blue);
}
.profile-card .bio-photo-initials {
font-size: 2rem;
}
/* ─── Booking / consultation panel (Calendly-ready) ─── */
.booking-panel {
background: var(--white);
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-md);
border: 1px solid var(--border);
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.booking-panel h2 {
color: var(--navy);
font-size: var(--text-2xl);
margin-bottom: var(--space-2);
}
.booking-panel > p {
color: var(--text-secondary);
margin-bottom: var(--space-6);
line-height: 1.6;
}
.booking-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: center;
}
.booking-calendly {
min-height: 630px;
margin-top: var(--space-4);
}
.booking-calendly[hidden],
.booking-fallback[hidden] {
display: none !important;
}
/* ─── Site entry banners (index vs home.html) ─── */
.site-switch-bar {
background: var(--blue-light);
border-bottom: 1px solid var(--border);
padding: 0.5rem 0;
font-size: var(--text-sm);
text-align: center;
color: var(--navy);
}
.site-switch-bar a {
color: var(--blue);
font-weight: 600;
}
.profile-name {
color: var(--white);
font-size: var(--text-2xl);
font-weight: 700;
margin-bottom: var(--space-1);
}
.profile-title {
color: rgba(255,255,255,0.7);
font-size: var(--text-sm);
margin-bottom: var(--space-6);
}
.profile-creds {
display: flex;
flex-direction: column;
gap: var(--space-2);
text-align: left;
margin-bottom: var(--space-6);
}
.profile-cred {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--text-sm);
color: rgba(255,255,255,0.8);
}
.profile-cred::before {
content: '✓';
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
background: var(--green);
color: white;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
flex-shrink: 0;
}
/* ============================================================
7. HERO — home.html (main site hero)
============================================================ */
.hero-main {
background: linear-gradient(150deg, var(--navy-dark) 0%, var(--navy) 45%, #1e4a8a 100%);
padding: var(--space-20) 0 var(--space-16);
position: relative;
overflow: hidden;
}
.hero-main::before {
content: '';
position: absolute;
top: -15%;
right: 5%;
width: min(520px, 55vw);
height: 70%;
background: radial-gradient(ellipse, rgba(37, 99, 235, 0.22) 0%, transparent 68%);
pointer-events: none;
}
.hero-main::after {
content: '';
position: absolute;
bottom: -2px;
left: 0; right: 0;
height: 60px;
background: var(--surface);
clip-path: ellipse(55% 100% at 50% 100%);
}
.hero-main .container {
position: relative;
z-index: 1;
}
.hero-trust-badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: var(--radius-full);
padding: var(--space-2) var(--space-4);
color: rgba(255,255,255,0.9);
font-size: var(--text-sm);
font-weight: 500;
margin-bottom: var(--space-6);
}
.hero-main h1 {
color: var(--white);
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 800;
line-height: 1.15;
max-width: 700px;
margin-bottom: var(--space-6);
}
.hero-main h1 span {
color: var(--ph-yellow);
}
.hero-main .lead {
color: rgba(255,255,255,0.75);
font-size: var(--text-lg);
max-width: 560px;
margin-bottom: var(--space-8);
line-height: 1.7;
}
.hero-flags {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-8);
}
.hero-flag-badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.18);
border-radius: var(--radius-full);
padding: var(--space-1) var(--space-3);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: rgba(255,255,255,0.9);
}
.hero-main-grid {
display: grid;
grid-template-columns: 1fr minmax(220px, 360px);
gap: var(--space-10);
align-items: center;
}
.hero-main-visual {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.hero-mascot {
width: 100%;
max-width: 320px;
height: auto;
border-radius: var(--radius-xl);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
border: 2px solid rgba(255, 255, 255, 0.2);
object-fit: cover;
}
.hero-mascot-share {
max-width: 480px;
aspect-ratio: 3 / 2;
}
.hero-main-copy .btn-group {
margin-bottom: var(--space-2);
}
.hero-secondary-link {
display: inline-block;
margin-top: var(--space-3);
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.75);
text-decoration: underline;
text-underline-offset: 3px;
}
.hero-secondary-link:hover {
color: var(--white);
}
/* ============================================================
7b. HOW IT WORKS — journey steps
============================================================ */
.journey-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-5);
list-style: none;
padding: 0;
margin: var(--space-8) 0 0;
counter-reset: journey;
}
.journey-step {
position: relative;
padding: var(--space-6) var(--space-5) var(--space-5);
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition), transform var(--transition);
}
.journey-step:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.journey-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: var(--radius-full);
background: var(--blue-light);
color: var(--blue);
font-size: var(--text-sm);
font-weight: 800;
margin-bottom: var(--space-3);
}
.journey-step h3 {
font-size: var(--text-base);
color: var(--navy);
margin-bottom: var(--space-2);
}
.journey-step p {
font-size: var(--text-sm);
color: var(--text-secondary);
margin: 0;
line-height: 1.55;
}
/* Phase 11 — public portal strip + capabilities */
.public-portal-strip {
background: linear-gradient(135deg, var(--navy) 0%, #15325a 100%);
color: rgba(255, 255, 255, 0.92);
padding: var(--space-5) 0;
}
.public-portal-strip-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
}
.public-portal-strip p {
margin: 0;
max-width: 42rem;
line-height: 1.55;
font-size: 0.92rem;
}
.public-portal-strip-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.portal-capabilities-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--space-4);
margin-top: var(--space-5);
}
.portal-cap-card {
padding: var(--space-5);
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.portal-cap-card h3 {
font-size: 0.95rem;
margin: 0 0 0.35rem;
color: var(--navy);
}
.portal-cap-card p {
font-size: 0.82rem;
color: var(--text-secondary);
margin: 0 0 0.65rem;
line-height: 1.5;
}
.cta-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: center;
margin-top: var(--space-4);
}
.cta-actions .btn-outline-light {
background: rgba(255, 255, 255, 0.12);
color: var(--white);
border-color: rgba(255, 255, 255, 0.45);
}
.cta-actions .btn-outline-light:hover {
background: rgba(255, 255, 255, 0.2);
color: var(--white);
}
.section-compact {
padding-top: var(--space-12);
padding-bottom: var(--space-12);
}
/* ============================================================
8. BUTTONS
============================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-md);
font-size: var(--text-base);
font-weight: 600;
cursor: pointer;
transition: all var(--transition);
border: 2px solid transparent;
text-decoration: none;
line-height: 1;
white-space: nowrap;
}
.btn-primary {
background: var(--blue);
color: var(--white);
border-color: var(--blue);
}
.btn-primary:hover {
background: var(--blue-hover);
border-color: var(--blue-hover);
color: var(--white);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(37,99,235,0.35);
}
.btn-outline {
background: transparent;
color: var(--white);
border-color: rgba(255,255,255,0.5);
}
.btn-outline:hover {
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.8);
color: var(--white);
}
.btn-outline-navy {
background: transparent;
color: var(--navy);
border-color: var(--navy);
}
.btn-outline-navy:hover {
background: var(--navy);
color: var(--white);
}
.btn-white {
background: var(--white);
color: var(--navy);
border-color: var(--white);
}
.btn-white:hover {
background: var(--blue-tint);
color: var(--navy-dark);
}
.btn-lg {
padding: var(--space-4) var(--space-8);
font-size: var(--text-lg);
border-radius: var(--radius-lg);
}
.btn-sm {
padding: var(--space-2) var(--space-4);
font-size: var(--text-sm);
}
.btn-group {
display: flex;
align-items: center;
gap: var(--space-4);
flex-wrap: wrap;
}
/* ============================================================
9. CARDS
============================================================ */
/* Standard service card */
.card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-8);
transition: all var(--transition);
position: relative;
overflow: hidden;
}
.card:hover {
border-color: var(--blue);
box-shadow: var(--shadow-lg);
transform: translateY(-3px);
}
.card-icon {
width: 52px;
height: 52px;
background: var(--blue-light);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: var(--space-4);
transition: background var(--transition);
}
.card:hover .card-icon {
background: var(--blue);
}
.card h3 {
font-size: var(--text-xl);
margin-bottom: var(--space-1);
}
.card .card-sub {
font-size: var(--text-sm);
color: var(--blue);
font-weight: 500;
margin-bottom: var(--space-4);
}
.card ul {
list-style: none;
margin-bottom: var(--space-6);
}
.card ul li {
font-size: var(--text-sm);
color: var(--text-secondary);
padding: var(--space-2) 0;
border-bottom: 1px solid var(--border);
display: flex;
align-items: flex-start;
gap: var(--space-2);
}
.card ul li:last-child { border-bottom: none; }
.card ul li::before {
content: '✦';
color: var(--blue);
font-size: 10px;
flex-shrink: 0;
margin-top: 4px;
}
/* Philippine card — special accent */
.card-ph {
border-top: 3px solid var(--ph-blue);
}
.card-ph .card-icon {
background: #EEF2FF;
}
/* Feature card — used on about/home */
.card-feature {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-6);
display: flex;
gap: var(--space-4);
align-items: flex-start;
transition: box-shadow var(--transition);
}
.card-feature:hover {
box-shadow: var(--shadow-md);
}
.card-feature-icon {
width: 44px;
height: 44px;
background: var(--blue-light);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
}
.card-feature-body h4 {
margin-bottom: var(--space-1);
font-size: var(--text-base);
}
.card-feature-body p {
font-size: var(--text-sm);
margin-bottom: 0;
}
/* ============================================================
10. STATS STRIP
============================================================ */
.stats-strip {
background: var(--navy);
padding: var(--space-10) 0;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--space-8);
text-align: center;
}
.stat-number {
font-size: var(--text-4xl);
font-weight: 800;
color: var(--white);
line-height: 1;
margin-bottom: var(--space-2);
}
.stat-number span {
color: var(--ph-yellow);
}
.stat-label {
font-size: var(--text-sm);
color: rgba(255,255,255,0.65);
font-weight: 400;
}
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-5);
margin-top: var(--space-6);
}
.team-card {
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-5);
background: var(--white);
}
.team-card-type {
display: inline-block;
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--navy);
background: var(--blue-light);
padding: 0.2rem 0.55rem;
border-radius: var(--radius-full);
margin-bottom: var(--space-3);
}
.team-card-name {
margin: 0 0 var(--space-1);
font-size: var(--text-lg);
color: var(--navy-dark);
}
.team-card-title,
.team-card-verify,
.team-card-supervised,
.team-card-bio {
font-size: var(--text-sm);
line-height: 1.6;
color: var(--text-secondary);
margin: 0.35rem 0 0;
}
.team-card-verify a,
.team-register-note a {
color: var(--navy);
}
.team-register-note {
margin-top: var(--space-6);
font-size: var(--text-xs);
color: var(--text-secondary);
line-height: 1.65;
text-align: center;
}
.team-card--rcic,
.team-card--risia {
border-left: 4px solid #c8102e;
}
.team-card--lawyer {
border-left: 4px solid var(--navy);
}
.team-admin-row {
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 1rem;
margin-bottom: 0.75rem;
background: var(--surface);
}
.team-admin-row h3 {
margin: 0 0 0.5rem;
font-size: 0.95rem;
color: var(--navy);
}
.team-admin-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 0.75rem;
}
.stats-disclaimer {
margin-top: var(--space-6);
text-align: center;
font-size: var(--text-xs);
color: rgba(255,255,255,0.55);
line-height: 1.6;
max-width: 52rem;
margin-left: auto;
margin-right: auto;
}
.stats-disclaimer a {
color: rgba(255,255,255,0.85);
text-decoration: underline;
}
.form-consent-block {
margin: var(--space-5) 0 var(--space-4);
padding: var(--space-4) var(--space-5);
background: var(--surface, #f8fafc);
border: 1px solid var(--border);
border-radius: var(--radius-md);
border-left: 4px solid var(--navy);
}
.form-consent-note {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: 1.65;
margin: 0 0 var(--space-3);
}
.form-consent-check {
font-size: var(--text-sm);
line-height: 1.55;
}
.footer-compliance {
margin-top: var(--space-4);
padding: var(--space-4) var(--space-5);
background: rgba(255,255,255,0.06);
border-radius: var(--radius-md);
border: 1px solid rgba(255,255,255,0.1);
}
.footer-compliance p {
margin: 0;
font-size: var(--text-xs);
line-height: 1.65;
color: rgba(255,255,255,0.62);
}
.footer-compliance a {
color: rgba(255,255,255,0.88);
text-decoration: underline;
}
.compliance-links-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-8);
}
.start-here-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-5);
}
.start-here-card {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-6);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--white);
text-decoration: none;
color: inherit;
transition: border-color 0.15s, box-shadow 0.15s;
}
.start-here-card:hover {
border-color: var(--navy);
box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.08));
}
.start-here-card h3 {
margin: 0;
font-size: var(--text-lg);
color: var(--navy);
}
.start-here-card p {
margin: 0;
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: 1.55;
flex: 1;
}
.start-here-card .start-here-cta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
font-size: var(--text-sm);
font-weight: 600;
color: var(--navy);
margin-top: var(--space-2);
}
/* ============================================================
11. TRUST BADGES / PILLS
============================================================ */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.02em;
}
.badge-navy { background: var(--navy); color: var(--white); }
.badge-blue { background: var(--blue-light); color: var(--navy); }
.badge-green { background: var(--green-light);color: #14532D; }
.badge-amber { background: var(--amber-light);color: #78350F; }
.badge-red { background: var(--red-light); color: #7F1D1D; }
.badge-gold { background: #FEF3C7; color: #78350F; }
/* Trust strip of badges across a section */
.trust-strip {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: center;
justify-content: center;
padding: var(--space-6) 0;
}
/* ============================================================
12. SECTION BACKGROUNDS
============================================================ */
.bg-white { background: var(--white); }
.bg-surface { background: var(--surface); }
.bg-navy { background: var(--navy); color: var(--white); }
.bg-navy h2, .bg-navy h3, .bg-navy h4 { color: var(--white); }
.bg-navy p { color: rgba(255,255,255,0.75); }
.bg-navy .section-subtitle { color: rgba(255,255,255,0.65); }
.bg-gradient-navy {
background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-light) 100%);
color: var(--white);
}
.bg-blue-tint { background: var(--blue-tint); }
/* ============================================================
13. DIVIDERS & SEPARATORS
============================================================ */
.divider {
border: none;
border-top: 1px solid var(--border);
margin: var(--space-8) 0;
}
.divider-navy {
border-color: rgba(255,255,255,0.12);
}
/* Section label with side lines */
.section-label {
display: flex;
align-items: center;
gap: var(--space-4);
margin-bottom: var(--space-10);
text-align: center;
justify-content: center;
}
.section-label::before,
.section-label::after {
content: '';
flex: 1;
max-width: 80px;
height: 1px;
background: var(--border-dark);
}
/* ============================================================
14. BREADCRUMB
============================================================ */
.breadcrumb {
background: var(--surface-2);
padding: var(--space-3) 0;
border-bottom: 1px solid var(--border);
}
.breadcrumb-inner {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--text-secondary);
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--space-6);
}
.breadcrumb-inner a {
color: var(--blue);
text-decoration: none;
}
.breadcrumb-inner a:hover { text-decoration: underline; }
.breadcrumb-inner .sep {
color: var(--text-hint);
font-size: 10px;
}
.breadcrumb-inner .current {
color: var(--text-primary);
font-weight: 500;
}
/* ============================================================
15. PAGE HERO (inner pages — services, about, contact)
============================================================ */
.page-hero {
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
padding: var(--space-16) 0;
text-align: center;
position: relative;
}
.page-hero h1 {
color: var(--white);
font-size: var(--text-4xl);
margin-bottom: var(--space-4);
}
.page-hero p {
color: rgba(255,255,255,0.75);
font-size: var(--text-lg);
max-width: 600px;
margin: 0 auto;
}
/* ============================================================
16. FORMS
============================================================ */
.form-group {
margin-bottom: var(--space-5);
}
.form-label {
display: block;
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-2);
}
.form-label .required {
color: var(--red);
margin-left: 2px;
}
.form-control {
width: 100%;
padding: var(--space-3) var(--space-4);
font-size: var(--text-base);
color: var(--text-primary);
background: var(--white);
border: 1.5px solid var(--border);
border-radius: var(--radius-md);
transition: border-color var(--transition), box-shadow var(--transition);
outline: none;
line-height: 1.5;
}
.form-control:hover {
border-color: var(--border-dark);
}
.form-control:focus {
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.form-control::placeholder {
color: var(--text-hint);
}
select.form-control {
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394A3B8' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: var(--space-10);
appearance: none;
}
textarea.form-control {
resize: vertical;
min-height: 120px;
}
.form-error {
font-size: var(--text-sm);
color: var(--red);
margin-top: var(--space-1);
display: none;
}
.form-control.is-invalid {
border-color: var(--red);
}
.form-control.is-invalid + .form-error {
display: block;
}
.form-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: var(--space-10);
box-shadow: var(--shadow-md);
}
/* Multi-step forms: class-based visibility (never rely on [hidden] alone) */
#assessmentFormSteps > [id^="step-"]:not(.is-active-step),
#intake-form > [id^="step-"]:not(.is-active-step) {
display: none !important;
}
#assessmentFormSteps > [id^="step-"].is-active-step,
#intake-form > [id^="step-"].is-active-step {
display: block !important;
}
/* ============================================================
17. CONTACT INFO BLOCKS
============================================================ */
.contact-block {
display: flex;
align-items: flex-start;
gap: var(--space-4);
padding: var(--space-5);
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
transition: box-shadow var(--transition);
}
.contact-block:hover {
box-shadow: var(--shadow-md);
}
.contact-icon {
width: 44px;
height: 44px;
background: var(--blue-light);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
}
.contact-label {
font-size: var(--text-xs);
font-weight: 700;
color: var(--text-hint);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: var(--space-1);
}
.contact-value {
font-size: var(--text-base);
color: var(--text-primary);
font-weight: 500;
}
.contact-value a {
color: var(--text-primary);
text-decoration: none;
}
.contact-value a:hover {
color: var(--blue);
}
/* ============================================================
18. LAWYER / AUTHORITY PROFILE BLOCK
============================================================ */
.authority-card {
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
border-radius: var(--radius-xl);
padding: var(--space-10);
color: var(--white);
display: flex;
gap: var(--space-8);
align-items: flex-start;
}
.authority-photo {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
border: 3px solid rgba(255,255,255,0.3);
flex-shrink: 0;
}
.bio-photo-placeholder {
width: 120px;
height: 120px;
border-radius: 50%;
background: var(--blue);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 3px solid rgba(255,255,255,0.3);
}
.bio-photo-initials {
font-size: 2.5rem;
font-weight: 600;
color: var(--white);
line-height: 1;
}
.authority-body h3 {
color: var(--white);
font-size: var(--text-2xl);
margin-bottom: var(--space-1);
}
.authority-title {
color: rgba(255,255,255,0.7);
font-size: var(--text-sm);
margin-bottom: var(--space-6);
}
.authority-body .bio-card-summary {
color: rgba(255,255,255,0.9);
font-size: var(--text-base);
line-height: 1.6;
margin-bottom: var(--space-6);
}
.authority-creds {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.authority-cred {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--text-sm);
color: rgba(255,255,255,0.85);
}
.authority-cred .cred-icon {
font-size: 1rem;
width: 24px;
text-align: center;
flex-shrink: 0;
}
/* ============================================================
19. LEGAL DISCLAIMER BOX
============================================================ */
.disclaimer-box {
background: var(--amber-light);
border: 1px solid #FDE68A;
border-left: 4px solid var(--amber);
border-radius: var(--radius-md);
padding: var(--space-5) var(--space-6);
font-size: var(--text-sm);
color: #78350F;
line-height: 1.65;
}
.disclaimer-box strong {
color: #92400E;
}
.disclaimer-box h4 {
color: #92400E;
font-size: var(--text-sm);
margin-bottom: var(--space-3);
}
.ai-disclaimer {
background: var(--blue-light);
border: 1px solid #BFDBFE;
border-left: 4px solid var(--blue);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5);
font-size: var(--text-sm);
color: var(--navy);
font-style: italic;
}
/* Legal notice / terms — neutral styling (index.html landing page) */
.legal-disclaimer-section {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-8);
margin-top: var(--space-8);
}
.legal-disclaimer-section:first-child {
margin-top: 0;
}
.legal-disclaimer-section h3 {
color: var(--navy-dark);
font-size: var(--text-xl);
margin-bottom: var(--space-4);
}
.legal-disclaimer-section p,
.legal-disclaimer-section li {
color: var(--text-secondary);
font-size: var(--text-sm);
line-height: 1.6;
}
.legal-disclaimer-section p {
margin-bottom: var(--space-4);
}
.legal-disclaimer-section p:last-child {
margin-bottom: 0;
}
.legal-disclaimer-section strong {
color: var(--text-primary);
font-weight: 600;
}
.legal-disclaimer-section ol {
margin: 0;
padding-left: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.legal-disclaimer-section a {
color: var(--blue);
font-weight: 500;
}
.legal-disclaimer-section a:hover {
color: var(--blue-hover);
}
/* Professional Background — homepage + About summary link */
.professional-background-section {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-8);
margin: var(--space-8) 0;
}
.professional-background-section h2 {
color: var(--navy-dark);
font-size: var(--text-xl);
margin-bottom: var(--space-4);
}
.professional-background-grid {
display: grid;
grid-template-columns: minmax(140px, 180px) 1fr;
gap: var(--space-8);
align-items: start;
}
.professional-background-photo {
width: 160px;
height: 160px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--blue);
box-shadow: var(--shadow-md);
justify-self: center;
}
.professional-background-item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.professional-background-item:last-child {
margin-bottom: 0;
}
.professional-background-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
min-width: 22px;
margin-top: 2px;
background: var(--green);
color: var(--white);
border-radius: 50%;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
}
.professional-background-item p {
color: var(--text-secondary);
font-size: var(--text-base);
line-height: 1.5;
margin: 0;
}
.authority-grid {
align-items: start;
}
.credentials-list {
margin: var(--space-6) 0;
}
.credentials-list p {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-base);
color: var(--text-secondary);
margin-bottom: var(--space-2);
}
.credentials-list p:last-child {
margin-bottom: 0;
}
.credentials-list .cred-icon {
width: 24px;
text-align: center;
flex-shrink: 0;
}
.about-authority > p {
max-width: 72ch;
color: var(--text-secondary);
line-height: 1.65;
}
.compliance-section {
margin-top: var(--space-12);
padding-top: var(--space-8);
border-top: 1px solid var(--border);
}
.compliance-section h2 {
color: var(--navy-dark);
font-size: var(--text-xl);
margin-bottom: var(--space-4);
}
.compliance-section .compliance-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-4);
margin: var(--space-6) 0;
}
.compliance-section .btn {
margin-top: var(--space-2);
}
.bio-summary-note {
margin-top: var(--space-6);
}
.bio-summary-note p {
color: var(--text-secondary);
font-size: var(--text-base);
line-height: 1.6;
margin: 0;
}
.bio-summary-note a {
color: var(--blue);
font-weight: 600;
}
.bio-summary-note a:hover {
color: var(--blue-hover);
}
#professional-background.section {
padding-top: var(--space-8);
padding-bottom: var(--space-8);
}
#professional-background .professional-background-section {
margin: 0;
}
/* ============================================================
20. CTA SECTION
============================================================ */
.cta-section {
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
padding: var(--space-20) 0;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-section h2 {
color: var(--white);
font-size: var(--text-3xl);
margin-bottom: var(--space-4);
}
.cta-section p {
color: rgba(255,255,255,0.75);
font-size: var(--text-lg);
margin-bottom: var(--space-8);
max-width: 520px;
margin-left: auto;
margin-right: auto;
}
/* ============================================================
21. FOOTER
============================================================ */
.footer {
background: var(--navy-dark);
color: rgba(255,255,255,0.7);
padding: var(--space-16) 0 var(--space-8);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
gap: var(--space-10);
margin-bottom: var(--space-10);
}
.footer-brand {
max-width: 280px;
}
.footer-logo-row {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.footer-logo {
height: 52px;
width: auto;
max-width: 200px;
object-fit: contain;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.95);
padding: 4px 8px;
}
.footer-brand-name {
font-size: var(--text-base);
font-weight: 700;
color: var(--white);
}
.footer-desc {
font-size: var(--text-sm);
line-height: 1.65;
margin-bottom: var(--space-4);
color: rgba(255,255,255,0.55);
}
.footer-badges {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
}
.footer-badge {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius-full);
padding: 3px 10px;
font-size: 11px;
color: rgba(255,255,255,0.65);
}
.footer-heading {
font-size: var(--text-sm);
font-weight: 700;
color: var(--white);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: var(--space-5);
}
.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.footer-links a {
font-size: var(--text-sm);
color: rgba(255,255,255,0.6);
text-decoration: none;
transition: color var(--transition);
}
.footer-links a:hover { color: var(--white); }
.footer-contact-item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-size: var(--text-sm);
color: rgba(255,255,255,0.6);
margin-bottom: var(--space-3);
}
.footer-contact-item .icon {
color: var(--ph-yellow);
flex-shrink: 0;
font-size: 1rem;
}
.footer-contact-item a {
color: rgba(255,255,255,0.7);
}
.footer-contact-item a:hover { color: var(--white); }
.footer-divider {
border: none;
border-top: 1px solid rgba(255,255,255,0.08);
margin-bottom: var(--space-6);
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-4);
}
.footer-copyright {
font-size: var(--text-sm);
color: rgba(255,255,255,0.45);
}
.footer-legal-links {
display: flex;
gap: var(--space-6);
}
.footer-legal-links a {
font-size: var(--text-sm);
color: rgba(255,255,255,0.45);
text-decoration: none;
}
.footer-legal-links a:hover { color: rgba(255,255,255,0.8); }
/* ============================================================
22. FLOATING CONTACT ICON BUTTONS
============================================================ */
.contact-icon-stack {
position: fixed;
bottom: 24px;
right: 24px;
display: flex;
flex-direction: column;
gap: 12px;
z-index: 1000;
}
.contact-icon-btn {
width: 52px;
height: 52px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
text-decoration: none;
font-size: 22px;
line-height: 1;
color: white;
transition: transform 0.15s ease;
}
.contact-icon-btn:hover {
transform: scale(1.1);
}
.contact-icon-email {
background: var(--navy-dark);
}
.contact-icon-whatsapp {
background: #25D366;
}
.contact-icon-messenger {
background: #0084FF;
}
/* ============================================================
22b. EBBI IMMIGRATION ASSISTANT CHAT WIDGET
============================================================ */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.ebbi-assistant {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 1001;
}
.ebbi-assistant-teaser {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
max-width: min(360px, calc(100vw - 32px));
border: none;
border-radius: 14px;
background: linear-gradient(135deg, var(--navy-dark) 0%, #1a4a7a 100%);
color: #fff;
font-family: inherit;
cursor: pointer;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
text-align: left;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ebbi-assistant-teaser:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
.ebbi-assistant-teaser-icon {
font-size: 24px;
line-height: 1;
flex-shrink: 0;
}
.ebbi-assistant-teaser-text {
display: block;
font-size: 14px;
font-weight: 700;
line-height: 1.25;
}
.ebbi-assistant-teaser-hint {
display: block;
font-size: 11px;
font-weight: 400;
opacity: 0.88;
margin-top: 2px;
}
.ebbi-assistant--open .ebbi-assistant-teaser {
display: none;
}
.ebbi-assistant--closed .ebbi-assistant-panel {
display: none;
}
.ebbi-assistant-panel {
position: fixed;
bottom: 24px;
right: 24px;
width: min(400px, calc(100vw - 32px));
max-height: min(560px, calc(100vh - 48px));
display: flex;
flex-direction: column;
background: #fff;
border-radius: 16px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.08);
z-index: 1002;
}
.ebbi-assistant-header {
flex-shrink: 0;
padding: 14px 14px 10px;
background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
border-bottom: 1px solid #e8edf2;
}
.ebbi-assistant-header-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
}
.ebbi-assistant-title {
margin: 0;
font-size: 15px;
font-weight: 700;
color: var(--navy-dark);
line-height: 1.25;
}
.ebbi-assistant-subtitle {
margin: 4px 0 0;
font-size: 11px;
color: #5a6570;
line-height: 1.35;
}
.ebbi-assistant-close {
flex-shrink: 0;
width: 36px;
height: 36px;
border: none;
border-radius: 8px;
background: transparent;
color: #666;
font-size: 24px;
line-height: 1;
cursor: pointer;
position: relative;
z-index: 2;
}
.ebbi-assistant-close:hover {
background: #eef2f6;
}
.ebbi-assistant-status {
margin: 8px 0 0;
font-size: 12px;
font-weight: 600;
color: #1a7f37;
display: flex;
align-items: center;
gap: 6px;
}
.ebbi-assistant-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}
.ebbi-assistant-disclaimer {
margin: 8px 0 0;
padding: 8px 10px;
font-size: 11px;
line-height: 1.45;
color: #5a4a20;
background: #fffbeb;
border-radius: 8px;
border: 1px solid #fde68a;
}
.ebbi-assistant-contact {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.ebbi-assistant-contact-btn {
display: inline-flex;
align-items: center;
padding: 5px 10px;
font-size: 11px;
font-weight: 600;
border-radius: 999px;
border: 1px solid #c5d4e3;
background: #fff;
color: var(--navy-dark);
text-decoration: none;
cursor: default;
}
a.ebbi-assistant-contact-btn {
cursor: pointer;
}
a.ebbi-assistant-contact-btn:hover {
background: #eef4fa;
border-color: var(--navy-dark);
}
.ebbi-assistant-contact-wechat {
background: #07c160;
border-color: #07c160;
color: #fff;
}
.ebbi-assistant-topics {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.ebbi-assistant-topic {
padding: 5px 9px;
font-size: 11px;
font-family: inherit;
border: 1px solid #d0dae4;
border-radius: 999px;
background: #fff;
color: var(--navy-dark);
cursor: pointer;
transition: background 0.12s, border-color 0.12s;
}
.ebbi-assistant-topic:hover {
background: #eef4fa;
border-color: var(--navy-dark);
}
.ebbi-assistant-lang {
padding: 4px 8px;
font-size: 10px;
font-family: inherit;
border: 1px solid #d0dae4;
border-radius: 999px;
background: #fff;
color: var(--navy-dark);
cursor: pointer;
}
.ebbi-assistant-lang.is-active {
background: var(--navy-dark);
border-color: var(--navy-dark);
color: #fff;
}
.ebbi-intro-strip {
background: linear-gradient(90deg, #0c2340 0%, #1a4480 100%);
color: rgba(255, 255, 255, 0.92);
font-size: 0.82rem;
line-height: 1.55;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.ebbi-intro-strip-inner {
position: relative;
padding: 0.5rem 2.25rem 0.5rem 1rem;
font-size: var(--text-sm);
line-height: 1.5;
}
.ebbi-intro-dismiss {
position: absolute;
top: 0.35rem;
right: 0.5rem;
border: 0;
background: transparent;
color: rgba(255, 255, 255, 0.85);
font-size: 1.25rem;
line-height: 1;
cursor: pointer;
padding: 0.15rem 0.35rem;
}
.ebbi-intro-dismiss:hover { color: #fff; }
body.ebbi-intro-hidden .ebbi-intro-strip { display: none; }
.ebbi-intro-strip a { color: #f5d77a; text-decoration: underline; }
.ebbi-intro-strip a:hover { color: #fff; }
.ebbi-intro-strip strong { color: #fff; }
.client-resource-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1rem;
margin-top: 1.25rem;
}
.client-resource-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.25rem;
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.client-resource-card h3 { font-size: 1rem; color: var(--navy); margin: 0; }
.client-resource-card p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.55; margin: 0; flex: 1; }
.ebbi-assistant-messages {
flex: 1;
overflow-y: auto;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 10px;
min-height: 180px;
background: #f4f7fa;
}
.ebbi-assistant-msg {
display: flex;
}
.ebbi-assistant-msg--user {
justify-content: flex-end;
}
.ebbi-assistant-msg--bot {
justify-content: flex-start;
}
.ebbi-assistant-bubble {
max-width: 92%;
padding: 10px 12px;
border-radius: 12px;
font-size: 13px;
line-height: 1.5;
color: #1a2332;
}
.ebbi-assistant-bubble p {
margin: 0 0 8px;
}
.ebbi-assistant-bubble p:last-child {
margin-bottom: 0;
}
.ebbi-assistant-bubble ul {
margin: 6px 0 8px;
padding-left: 18px;
}
.ebbi-assistant-bubble li {
margin-bottom: 4px;
}
.ebbi-assistant-bubble a {
color: var(--navy-dark);
font-weight: 600;
}
.ebbi-assistant-msg--user .ebbi-assistant-bubble {
background: var(--navy-dark);
color: #fff;
border-bottom-right-radius: 4px;
}
.ebbi-assistant-msg--bot .ebbi-assistant-bubble {
background: #fff;
border: 1px solid #e2e8f0;
border-bottom-left-radius: 4px;
}
.ebbi-assistant-links {
margin: 6px 0 0 !important;
}
.ebbi-assistant-footer {
flex-shrink: 0;
padding: 12px 14px 14px;
border-top: 1px solid #e8edf2;
background: #f8fafc;
}
.ebbi-assistant-footer-text {
margin: 0 0 10px;
font-size: 12px;
line-height: 1.45;
color: #4a5568;
text-align: center;
}
.ebbi-assistant-footer-actions {
display: flex;
flex-direction: column;
gap: 8px;
}
.ebbi-assistant-call-btn {
display: block;
padding: 12px 14px;
border-radius: 10px;
background: var(--navy-dark);
color: #fff;
font-size: 14px;
font-weight: 700;
text-align: center;
text-decoration: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.ebbi-assistant-call-btn:hover {
background: #1a4a7a;
color: #fff;
}
.ebbi-assistant-footer-link {
display: block;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid #cfd8e3;
background: #fff;
color: var(--navy-dark);
font-size: 13px;
font-weight: 600;
text-align: center;
text-decoration: none;
}
.ebbi-assistant-footer-link:hover {
background: #eef4fa;
border-color: var(--navy-dark);
}
@media (max-width: 480px) {
.ebbi-assistant {
right: 16px;
left: 16px;
bottom: 16px;
}
.ebbi-assistant-teaser {
width: 100%;
max-width: none;
}
.ebbi-assistant-panel {
right: 16px;
left: 16px;
bottom: 16px;
width: auto;
max-height: calc(100vh - 32px);
}
.ebbi-assistant-teaser-hint {
display: none;
}
}
/* ============================================================
23. SERVICES — SECTION HEADER WITH FLAG ACCENT
============================================================ */
.service-section-header {
display: flex;
align-items: center;
gap: var(--space-4);
margin-bottom: var(--space-10);
padding-bottom: var(--space-6);
border-bottom: 2px solid var(--border);
}
.service-section-header.ph-header {
border-bottom-color: var(--ph-blue);
}
.service-section-flag {
font-size: 2.5rem;
line-height: 1;
}
.service-section-header h2 {
font-size: var(--text-3xl);
margin-bottom: var(--space-1);
}
.service-section-header p {
font-size: var(--text-base);
margin-bottom: 0;
}
/* ============================================================
24. COMPLIANCE / CHECKLIST BLOCK (about page)
============================================================ */
.compliance-list {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.compliance-list li {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--text-base);
color: var(--text-secondary);
}
.compliance-list li::before {
content: '✓';
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
min-width: 22px;
background: var(--green);
color: var(--white);
border-radius: 50%;
font-size: 12px;
font-weight: 700;
}
/* ============================================================
25. GOOGLE FONTS IMPORT
============================================================ */
/* Paste this at the very top of your in each HTML file:
*/
/* ============================================================
26. RESPONSIVE — MOBILE FIRST BREAKPOINTS
============================================================ */
/* Tablet: ≤ 768px */
@media (max-width: 768px) {
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
.section { padding: var(--space-12) 0; }
.section-lg { padding: var(--space-16) 0; }
.navbar-nav,
.navbar-cta { display: none; }
.navbar-toggle { display: block; }
.hero-main { padding: var(--space-16) 0 var(--space-12); }
.hero-main h1 { font-size: var(--text-3xl); }
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: var(--space-8);
}
.authority-card {
flex-direction: column;
align-items: center;
text-align: center;
}
.authority-cred {
justify-content: center;
}
.footer-bottom {
flex-direction: column;
text-align: center;
}
.btn-group {
justify-content: center;
}
.form-card {
padding: var(--space-6);
}
.page-hero h1 {
font-size: var(--text-3xl);
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Mobile: ≤ 480px */
@media (max-width: 480px) {
.container,
.container-narrow { padding: 0 var(--space-4); }
h1 { font-size: var(--text-2xl); }
.footer-grid { grid-template-columns: 1fr; }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.contact-icon-stack {
bottom: 16px;
right: 16px;
gap: 10px;
}
.contact-icon-btn {
width: 48px;
height: 48px;
font-size: 20px;
}
.profile-card { padding: var(--space-6); }
.btn-lg {
padding: var(--space-3) var(--space-6);
font-size: var(--text-base);
}
}
/* ============================================================
27. ACCESSIBILITY & FOCUS
============================================================ */
:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* Skip to content link for screen readers */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--blue);
color: var(--white);
padding: var(--space-2) var(--space-4);
z-index: 10000;
font-size: var(--text-sm);
font-weight: 600;
border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { top: 0; }
.toast {
display: none;
position: fixed;
bottom: var(--space-6);
left: 50%;
transform: translateX(-50%);
background: var(--navy);
color: var(--white);
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-lg);
font-size: var(--text-sm);
z-index: 10001;
box-shadow: var(--shadow-lg);
}
.toast.error { background: var(--red); }
.toast.success { background: var(--green); }
.form-control.invalid,
.form-input.invalid {
border-color: var(--red);
}
/* ─── Intake form — warnings & file upload helpers ─── */
.warning-box {
background: var(--amber-light);
border: 1px solid #FDE68A;
border-left: 4px solid var(--amber);
border-radius: var(--radius-md);
padding: var(--space-5) var(--space-6);
margin-top: var(--space-3);
}
.warning-box h4 {
color: #92400E;
font-size: var(--text-sm);
margin-bottom: var(--space-3);
}
.warning-box p,
.warning-box li {
font-size: var(--text-sm);
color: #78350F;
}
.warning-box ul {
padding-left: var(--space-6);
margin: var(--space-3) 0;
}
.warning-box li {
list-style: disc;
margin-bottom: var(--space-2);
}
.checkbox-label {
display: flex;
align-items: flex-start;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--text-primary);
margin: var(--space-3) 0;
}
.field-note {
font-size: var(--text-sm);
color: var(--text-secondary);
margin: 0.25rem 0 0.75rem;
line-height: 1.5;
}
/* ── Case Status Page (single column) ───── */
.case-status-page {
padding-top: var(--space-8);
padding-bottom: var(--space-12);
}
.case-status-page .page-header {
text-align: center;
max-width: 720px;
margin: 0 auto var(--space-8);
}
.case-status-page .page-header h1 {
font-size: var(--text-3xl);
color: var(--navy);
margin-bottom: var(--space-3);
}
.case-status-page .page-header .field-note {
margin: 0;
font-size: var(--text-base);
}
.case-status-portal-card {
margin-bottom: var(--space-8);
background: var(--blue-tint);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-5);
}
.how-it-works {
margin-bottom: var(--space-6);
}
.how-it-works h2 {
font-size: var(--text-xl);
color: var(--navy);
margin-bottom: var(--space-4);
}
.step-card {
display: flex;
align-items: flex-start;
gap: var(--space-4);
background: var(--white);
border: 0.5px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-5);
margin-bottom: var(--space-4);
}
.step-number {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--blue);
color: var(--white);
font-weight: 600;
font-size: var(--text-base);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.step-content h3 {
font-size: var(--text-base);
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-1);
}
.step-content p {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: 1.5;
margin: 0;
}
.redirect-shell {
padding: var(--space-16) var(--space-4);
min-height: 50vh;
}
.redirect-shell h1 {
font-size: var(--text-2xl);
color: var(--navy);
margin-bottom: var(--space-3);
}
.redirect-shell p {
color: var(--text-secondary);
line-height: 1.6;
}
.redirect-shell a {
color: var(--blue);
font-weight: 600;
}
.redirect-shell .container-narrow {
max-width: 42rem;
}
.case-status-ref-note {
margin: var(--space-4) 0 var(--space-6);
}
.instant-check-card {
background: var(--blue-tint);
border: 0.5px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-5);
margin-bottom: var(--space-6);
}
.instant-check-card h3 {
font-size: var(--text-lg);
color: var(--navy);
margin: 0 0 var(--space-2);
}
.instant-check-card .field-note {
margin: 0;
}
.case-status-lookup-form {
margin-top: var(--space-4);
}
.case-status-lookup-form .form-group {
margin-bottom: var(--space-3);
}
.case-status-lookup-result:not([hidden]) {
margin-top: var(--space-4);
}
.case-status-readiness-actions {
margin-top: var(--space-3);
}
.status-form-card {
background: var(--white);
border: 0.5px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-8);
max-width: 680px;
margin: 0 auto var(--space-8);
box-shadow: var(--shadow-sm);
}
.status-form-card > h2 {
font-size: var(--text-xl);
color: var(--navy);
margin: 0 0 var(--space-6);
text-align: center;
}
.confirmation-box {
text-align: center;
padding: var(--space-4) 0;
}
.confirmation-box h3 {
color: var(--navy);
font-size: var(--text-xl);
margin-bottom: var(--space-4);
}
.confirmation-box p {
font-size: var(--text-sm);
line-height: 1.6;
color: var(--text-secondary);
margin-bottom: var(--space-3);
}
.ebbi-confirmation-ref {
font-size: var(--text-sm);
line-height: 1.55;
color: var(--navy);
background: var(--blue-light, #f0f4ff);
border: 1px solid var(--border, #dce6f7);
border-radius: var(--radius-md, 8px);
padding: 0.75rem 1rem;
margin: 0.75rem 0 1rem;
text-align: center;
}
.ebbi-confirmation-ref strong {
color: var(--navy);
font-weight: 700;
}
.confirmation-box a {
color: var(--blue);
font-weight: 600;
}
.case-status-contact-note {
text-align: center;
margin-bottom: var(--space-6);
}
.case-status-contact-note .field-note {
margin: 0;
}
.case-status-print-section {
margin-top: var(--space-8);
text-align: center;
padding-bottom: var(--space-4);
}
.case-status-print-section .field-note {
margin: 0 0 var(--space-3);
}
@media (max-width: 640px) {
.status-form-card {
padding: var(--space-5);
}
}
/* ── Services Page ────────────────────────── */
.services-hero {
background: var(--navy);
color: var(--white);
padding: var(--space-12) 0 var(--space-8);
text-align: center;
}
.services-hero h1,
.services-hero-copy > h2#intake-form-hero-title {
font-size: var(--text-3xl);
font-weight: 700;
color: var(--white);
margin-bottom: var(--space-2);
}
.services-hero p {
color: #B5D4F4;
font-size: var(--text-base);
margin-bottom: var(--space-1);
}
.services-hero-sub {
font-size: var(--text-sm) !important;
color: #8FB8E8 !important;
margin-top: var(--space-3) !important;
}
.services-hero-grid {
display: grid;
grid-template-columns: 1fr minmax(180px, 260px);
gap: var(--space-8);
align-items: center;
text-align: left;
}
.services-hero-grid h1,
.services-hero-grid .services-hero-copy > h2#intake-form-hero-title {
text-align: left;
}
.services-hero-grid .services-hero-copy p {
text-align: left;
}
.services-hero-visual {
display: flex;
justify-content: center;
align-items: center;
}
.services-hero-visual .hero-mascot {
max-width: 240px;
}
.services-hero-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-6);
}
.authority-spotlight {
margin-top: var(--space-8);
}
.authority-photo-lg {
width: 140px;
height: 140px;
}
.authority-photo-lg .bio-photo-initials {
font-size: 3rem;
}
.authority-quote {
font-style: italic;
color: rgba(255, 255, 255, 0.88);
border-left: 3px solid var(--gold, #C9A227);
padding-left: var(--space-4);
margin: 0 0 var(--space-6);
line-height: 1.55;
font-size: var(--text-base);
}
.hero-landing-grid {
display: grid;
grid-template-columns: 1fr minmax(220px, 320px);
gap: var(--space-10);
align-items: center;
text-align: left;
}
.hero-landing-grid .hero-landing-copy {
text-align: left;
}
.hero-landing-grid .profile-card {
margin: 0;
text-align: center;
}
.psa-hero-fee {
margin-top: var(--space-3);
font-size: var(--text-sm);
background: rgba(255, 255, 255, 0.15);
padding: 0.6rem 1rem;
border-radius: var(--radius-md);
max-width: 640px;
}
.services-hero-copy .psa-hero-fee,
.services-hero-copy .intake-hero-notice {
margin-left: 0;
margin-right: 0;
}
.contact-confirmation {
text-align: center;
padding: 1.5rem 0.5rem;
}
.contact-confirmation h2 {
color: var(--navy);
font-size: 1.35rem;
margin-bottom: 1rem;
}
.contact-confirmation p {
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 0.75rem;
color: var(--text-primary);
}
.contact-confirmation-note {
font-size: var(--text-sm);
color: var(--text-secondary);
}
.contact-confirmation a {
color: var(--blue);
font-weight: 600;
}
.intake-hero-notice {
display: none;
margin-top: var(--space-3);
font-size: var(--text-sm);
background: rgba(255, 255, 255, 0.15);
padding: 0.6rem 1rem;
border-radius: var(--radius-md);
max-width: 640px;
}
.hero-landing-banner {
margin-bottom: var(--space-6);
max-width: 100%;
}
.services-tabs {
background: var(--white);
border-bottom: 2px solid var(--navy-dark);
position: sticky;
top: 64px;
z-index: 100;
}
.services-tabs .container {
display: flex;
gap: 0;
}
.services-tab {
padding: var(--space-4) var(--space-6);
font-size: var(--text-sm);
font-weight: 500;
cursor: pointer;
border: none;
background: transparent;
color: var(--text-secondary);
border-bottom: 3px solid transparent;
margin-bottom: -2px;
transition: all 0.15s ease;
}
.services-tab:hover {
color: var(--blue);
}
.services-tab.active {
color: var(--blue);
border-bottom: 3px solid var(--blue);
}
.services-panel {
padding: var(--space-8) 0;
background: var(--surface);
}
.services-category {
margin-bottom: var(--space-10);
}
.services-category-label {
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-secondary);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: var(--space-4);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--border);
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--space-4);
align-items: stretch;
}
.service-card {
display: flex;
flex-direction: column;
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.service-card:hover {
border-color: var(--blue);
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.service-card-icon {
height: 100px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
}
.service-card-icon.immigration {
background: #EEF3FB;
color: var(--navy-dark);
}
.service-card-icon.ph-documents {
background: #FEF2F2;
color: #A32D2D;
}
.service-card-icon.family-law {
background: #F0F4FA;
color: #1a3c6b;
}
.service-card-body {
display: flex;
flex-direction: column;
flex: 1;
padding: var(--space-4);
}
.service-card-body h3 {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-1);
}
.service-card-body p {
flex: 1;
font-size: var(--text-xs);
color: var(--text-secondary);
line-height: 1.4;
margin-bottom: var(--space-3);
}
.service-card-body .btn-blue,
.service-card-body .btn-red {
margin-top: auto;
}
.btn-blue {
background: var(--blue);
color: var(--white);
border: none;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-md);
font-size: var(--text-xs);
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease;
text-decoration: none;
display: inline-block;
text-align: center;
}
.btn-blue:hover {
background: #1D4ED8;
color: var(--white);
}
.btn-red {
background: #E24B4A;
color: var(--white);
border: none;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-md);
font-size: var(--text-xs);
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease;
text-decoration: none;
display: inline-block;
text-align: center;
}
.btn-red:hover {
background: #B91C1C;
color: var(--white);
}
.btn-block {
display: block;
width: 100%;
}
@media (max-width: 640px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
.services-tab {
padding: var(--space-3) var(--space-4);
font-size: var(--text-xs);
}
}
/* ── Services page — ad showcase ────────────────────────── */
.services-ad-showcase {
background: linear-gradient(145deg, #0a1628 0%, var(--navy) 45%, #1e4d3a 100%);
color: var(--white);
padding: var(--space-12) 0;
border-bottom: 3px solid var(--gold, #C9A227);
}
.services-ad-showcase-inner {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
gap: var(--space-10);
align-items: center;
}
.services-ad-eyebrow {
display: inline-block;
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #C9A227;
margin-bottom: var(--space-3);
}
.services-ad-showcase-copy h2 {
font-size: clamp(1.35rem, 3vw, 1.85rem);
color: var(--white);
margin-bottom: var(--space-3);
line-height: 1.25;
}
.services-ad-showcase-copy p {
color: rgba(255, 255, 255, 0.88);
font-size: var(--text-sm);
line-height: 1.65;
margin-bottom: var(--space-4);
}
.services-ad-points {
list-style: none;
padding: 0;
margin: 0 0 var(--space-5);
}
.services-ad-points li {
position: relative;
padding-left: 1.25rem;
margin-bottom: var(--space-2);
font-size: var(--text-sm);
color: #B5D4F4;
}
.services-ad-points li::before {
content: "✓";
position: absolute;
left: 0;
color: #C9A227;
font-weight: 700;
}
.btn-gold {
display: inline-block;
background: #C9A227;
color: #0F2545;
font-weight: 700;
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-md);
text-decoration: none;
font-size: var(--text-sm);
transition: filter 0.15s ease;
}
.btn-gold:hover {
filter: brightness(1.08);
color: #0F2545;
}
.services-ad-player {
width: 100%;
}
.services-ad-preview-card--solo {
max-width: none;
}
.services-ad-preview-card--solo .services-ad-preview-frame--landscape {
aspect-ratio: 16 / 9;
max-height: none;
}
.services-ad-previews {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
}
.services-ad-preview-card {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-lg);
padding: var(--space-3);
backdrop-filter: blur(6px);
}
.services-ad-preview-label {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: var(--space-2);
font-size: var(--text-xs);
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
}
.services-ad-preview-format {
font-weight: 500;
color: rgba(255, 255, 255, 0.55);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.services-ad-preview-frame {
position: relative;
display: block;
width: 100%;
padding: 0;
border: none;
border-radius: var(--radius-md);
overflow: hidden;
cursor: pointer;
background: #0a1628;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.services-ad-preview-frame iframe,
.services-ad-preview-frame video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border: none;
pointer-events: none;
}
.services-ad-preview-frame--landscape {
aspect-ratio: 16 / 9;
}
.services-ad-play-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
background: rgba(15, 37, 69, 0.55);
color: var(--white);
font-size: var(--text-xs);
font-weight: 600;
transition: background 0.2s ease;
}
.services-ad-preview-frame:hover .services-ad-play-overlay {
background: rgba(15, 37, 69, 0.72);
}
.services-ad-play-icon {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #C9A227;
color: #0F2545;
font-size: 16px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.services-ad-preview-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-3);
}
.services-ad-preview-actions .btn-outline {
color: var(--white);
border-color: rgba(255, 255, 255, 0.35);
}
.services-ad-preview-actions .btn-outline:hover {
border-color: #C9A227;
background: rgba(201, 162, 39, 0.12);
color: var(--white);
}
.services-ad-modal[hidden] {
display: none !important;
}
.services-ad-modal {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
}
.services-ad-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.78);
}
.services-ad-modal-dialog {
position: relative;
width: min(960px, 96vw);
max-height: 92vh;
background: #0a1628;
border-radius: var(--radius-lg);
border: 1px solid rgba(201, 162, 39, 0.35);
overflow: hidden;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}
.services-ad-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.services-ad-modal-header h3 {
font-size: var(--text-sm);
color: var(--white);
margin: 0;
}
.services-ad-modal-close {
border: none;
background: transparent;
color: var(--white);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
padding: 0 var(--space-2);
}
.services-ad-modal-body iframe,
.services-ad-modal-body video {
display: block;
width: 100%;
height: min(540px, 70vh);
border: none;
background: #000;
}
.services-ad-modal-body video {
height: auto;
max-height: min(540px, 70vh);
}
.services-ad-modal-note {
margin: 0;
padding: var(--space-3) var(--space-4);
font-size: var(--text-xs);
color: rgba(255, 255, 255, 0.65);
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body.services-ad-modal-open {
overflow: hidden;
}
@media (max-width: 900px) {
.services-ad-showcase-inner {
grid-template-columns: 1fr;
gap: var(--space-8);
}
.services-ad-player {
max-width: 640px;
margin: 0 auto;
}
}
@media (max-width: 640px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
.services-tab {
padding: var(--space-3) var(--space-4);
font-size: var(--text-xs);
}
}
/* ── Immigration pathway landing pages ── */
.pathway-content {
max-width: 720px;
margin: 0 auto;
}
.pathway-content h2 {
font-size: 1.15rem;
font-weight: 700;
color: var(--navy);
margin-bottom: var(--space-4);
}
.pathway-content p {
font-size: var(--text-sm);
color: var(--text-primary);
line-height: 1.7;
margin-bottom: var(--space-4);
}
.qualification-check {
background: var(--blue-tint);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-6);
margin: var(--space-6) 0;
}
.qualification-check h3 {
font-size: 1rem;
font-weight: 700;
color: var(--navy);
margin-bottom: var(--space-2);
}
.qualification-list {
padding-left: var(--space-6);
margin-top: var(--space-3);
}
.qualification-list li {
list-style: disc;
margin-bottom: var(--space-2);
line-height: 1.5;
font-size: var(--text-sm);
}
/* P13 — LICO reference table (guide + employer intake) */
.lico-reference-wrap { margin: 1rem 0 1.25rem; }
.lico-reference-meta { margin-bottom: 0.75rem; line-height: 1.55; }
.lico-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lico-reference-table {
width: 100%;
min-width: 28rem;
border-collapse: collapse;
font-size: 0.9rem;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.lico-reference-table caption {
caption-side: top;
text-align: left;
font-weight: 700;
color: #1a3c6b;
padding: 0 0 0.5rem;
font-size: 0.95rem;
}
.lico-reference-table th,
.lico-reference-table td {
padding: 0.6rem 0.85rem;
border-bottom: 1px solid #e2e8f0;
text-align: left;
}
.lico-reference-table th {
background: #1a3c6b;
color: #fff;
font-weight: 600;
font-size: 0.82rem;
letter-spacing: 0.02em;
}
.lico-reference-table tbody tr:nth-child(even) td { background: #f8fafc; }
.lico-reference-table tbody tr:last-child td { border-bottom: none; }
.lico-reference-table td:nth-child(2),
.lico-reference-table td:nth-child(3),
.lico-reference-table th:nth-child(2),
.lico-reference-table th:nth-child(3) { text-align: right; white-space: nowrap; }
.lico-table-note-row td {
font-size: 0.82rem;
color: #475569;
background: #f1f5f9 !important;
font-style: italic;
}
.pathway-decision {
text-align: center;
padding: var(--space-8) 0;
}
.decision-buttons {
display: flex;
justify-content: center;
gap: var(--space-4);
margin-top: var(--space-4);
flex-wrap: wrap;
}
.decision-buttons .btn {
min-width: 200px;
}
.coming-soon-box {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-8);
text-align: center;
max-width: 600px;
margin: var(--space-8) auto;
}
.coming-soon-box p {
font-size: var(--text-sm);
line-height: 1.7;
color: var(--text-primary);
margin-bottom: var(--space-6);
}
@media (max-width: 640px) {
.decision-buttons .btn {
width: 100%;
min-width: 0;
}
}
/* ============================================================
ASSESSMENT FORMS — shared multi-step intake (screen)
============================================================ */
body[data-blank-form] .form-header h1 {
font-size: 1.35rem;
font-weight: 700;
color: #1a3c6b;
margin-bottom: 0.5rem;
}
body[data-blank-form] .form-notice {
background: #f0f4ff;
border-left: 4px solid #2a5298;
padding: 0.65rem 0.85rem;
font-size: 0.88rem;
margin-bottom: 1rem;
line-height: 1.5;
color: #1a2744;
}
body[data-blank-form] .form-meta {
font-size: 0.78rem;
color: var(--text-hint);
margin: 0 0 1.25rem;
letter-spacing: 0.02em;
}
body[data-blank-form] .form-card {
border-top: 3px solid #1a3c6b;
}
body[data-blank-form] .field-note {
font-size: var(--text-sm);
color: var(--text-secondary);
margin: 0.25rem 0 0.75rem;
line-height: 1.5;
}
body[data-blank-form] .form-section-divider {
margin: 1.5rem 0 1rem;
padding: 0;
border-top: none;
}
body[data-blank-form] .form-section-divider h4 {
font-size: 0.92rem;
font-weight: 700;
color: #fff;
background: #1a3c6b;
margin: 0 0 0.75rem;
padding: 0.4rem 0.65rem;
}
body[data-blank-form] .form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
min-width: 0;
width: 100%;
}
body[data-blank-form] .form-row-3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
min-width: 0;
width: 100%;
}
body[data-blank-form] .form-row-4 {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
min-width: 0;
width: 100%;
}
body[data-blank-form] .form-group {
min-width: 0;
}
/* Nested grid rows (legacy markup) span full width */
body[data-blank-form] .form-row .form-row,
body[data-blank-form] .form-row .form-row-3,
body[data-blank-form] .form-row .form-row-4,
body[data-blank-form] .form-row-3 .form-row,
body[data-blank-form] .form-row-3 .form-row-3,
body[data-blank-form] .form-row-3 .form-row-4 {
grid-column: 1 / -1;
}
body[data-blank-form] .form-card {
min-width: 0;
overflow-x: clip;
}
body[data-blank-form] #assessmentFormSteps,
body[data-blank-form] #intake-form,
body[data-blank-form] #intake-form-shell {
min-width: 0;
max-width: 100%;
}
body[data-blank-form] .form-control,
body[data-blank-form] select.form-control,
body[data-blank-form] textarea.form-control {
max-width: 100%;
box-sizing: border-box;
}
body[data-blank-form] .checkbox-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem 1rem;
margin-top: 0.5rem;
}
body[data-blank-form] .checkbox-fieldset {
border: none;
margin: 0 0 1rem;
padding: 0;
min-width: 0;
}
body[data-blank-form] .checkbox-fieldset legend {
padding: 0;
margin-bottom: 0.35rem;
float: left;
width: 100%;
}
body[data-blank-form] .checkbox-fieldset legend.form-label {
font-size: 0.72rem;
font-weight: 700;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.03em;
}
body[data-blank-form] .checkbox-fieldset legend.field-note {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: 1.55;
text-transform: none;
font-weight: 400;
}
body[data-blank-form] .checkbox-fieldset .checkbox-grid {
clear: both;
}
body[data-blank-form] .ga-travel-history-wrap {
overflow-x: auto;
margin-bottom: 1rem;
}
body[data-blank-form] .ga-travel-history-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 0.88rem;
}
body[data-blank-form] .ga-travel-history-table col.col-country { width: 24%; }
body[data-blank-form] .ga-travel-history-table col.col-date { width: 16%; }
body[data-blank-form] .ga-travel-history-table col.col-purpose { width: 38%; }
body[data-blank-form] .ga-travel-history-table col.col-check { width: 6%; }
body[data-blank-form] .ga-travel-history-table thead th {
text-align: left;
font-size: 0.72rem;
font-weight: 700;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 0.35rem 0.4rem;
border-bottom: 2px solid #1a3c6b;
vertical-align: bottom;
}
body[data-blank-form] .ga-travel-history-table thead th:last-child {
text-align: center;
padding-left: 0.15rem;
padding-right: 0.15rem;
}
body[data-blank-form] .ga-travel-history-table td {
padding: 0.35rem 0.4rem;
border-bottom: 1px solid var(--border, #dce6f7);
vertical-align: middle;
}
body[data-blank-form] .ga-travel-history-table .form-control {
font-size: 0.88rem;
padding: 0.4rem 0.5rem;
min-height: 2.25rem;
}
body[data-blank-form] .ga-travel-history-table .ga-travel-check {
width: 2.6rem;
text-align: center;
padding-left: 0.15rem;
padding-right: 0.15rem;
}
body[data-blank-form] .ga-travel-history-table .ga-travel-check label {
display: flex;
justify-content: center;
margin: 0;
}
body[data-blank-form] .ga-travel-history-table .ga-travel-check input {
width: 16px;
height: 16px;
}
@media print {
body[data-blank-form] .ga-travel-history-table .form-control {
border: none;
border-bottom: 1px solid #333;
border-radius: 0;
padding-left: 0;
min-height: 1.35rem;
}
}
body[data-blank-form] .checkbox-grid label {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.88rem;
color: var(--text-primary);
cursor: pointer;
line-height: 1.4;
}
body[data-blank-form] .checkbox-grid input[type="checkbox"],
body[data-blank-form] .checkbox-grid input[type="radio"] {
width: 16px;
height: 16px;
flex-shrink: 0;
margin-top: 0.15rem;
accent-color: var(--blue);
}
body[data-blank-form] .warning-box {
background: #fffbe6;
border: 1px solid var(--ph-yellow);
border-left: 4px solid var(--ph-yellow);
border-radius: var(--radius-md);
padding: 0.75rem 1rem;
margin: 1rem 0;
font-size: 0.88rem;
color: var(--navy);
line-height: 1.5;
}
body[data-blank-form] .declaration-box {
background: #f0f4ff;
border: 1px solid #c5d4f0;
border-left: 4px solid #2a5298;
border-radius: var(--radius-md);
padding: 1.25rem;
margin-bottom: 1.25rem;
}
body[data-blank-form] .declaration-box p {
font-size: 0.88rem;
line-height: 1.6;
margin-bottom: 1rem;
color: var(--text-primary);
}
body[data-blank-form] .checkbox-label {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.88rem;
cursor: pointer;
margin-bottom: 1rem;
line-height: 1.4;
}
body[data-blank-form] .checkbox-label input {
width: 16px;
height: 16px;
flex-shrink: 0;
margin-top: 0.15rem;
accent-color: var(--blue);
}
body[data-blank-form] .optional-tag,
body[data-psa-form] .optional-tag,
body[data-blank-form="nbi"] .optional-tag {
color: var(--text-secondary);
font-weight: 400;
font-size: 0.75rem;
}
/* Contact page — booking + inquiry forms */
body[data-blank-form="contact"] .booking-form {
max-width: 520px;
margin: 0 auto 1.25rem;
text-align: left;
}
body[data-blank-form="contact"] .contact-layout {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
align-items: start;
}
body[data-blank-form="contact"] .form-feedback {
font-size: 0.82rem;
margin-top: 0.75rem;
}
body[data-blank-form="contact"] .form-feedback.is-hidden {
display: none;
}
.section-spaced { margin-top: 2rem; }
@media (max-width: 768px) {
body[data-blank-form="contact"] .contact-layout {
grid-template-columns: 1fr;
}
}
body[data-blank-form="nbi"] .ph-form-notice {
background: #f0f4ff;
border-left: 4px solid #2a5298;
padding: 0.65rem 0.85rem;
font-size: 0.88rem;
margin-bottom: 1rem;
line-height: 1.5;
color: #1a2744;
}
body[data-blank-form="nbi"] .nbi-flow-banner {
margin-bottom: 1.25rem;
border-left-color: var(--ph-yellow, #FCD116);
background: #fffbe6;
}
body[data-blank-form="nbi"] .nbi-process-note {
margin-bottom: 1.25rem;
font-size: 0.87rem;
}
body[data-blank-form="nbi"] .nbi-doc-list {
display: grid;
gap: 0.5rem;
font-size: 0.87rem;
margin-bottom: 1.25rem;
}
body[data-blank-form="nbi"] .nbi-doc-item {
display: flex;
align-items: flex-start;
gap: 0.6rem;
padding: 0.6rem 0.8rem;
background: white;
border: 1px solid #c5d4f0;
border-radius: 8px;
}
body[data-blank-form="nbi"] .nbi-doc-item--highlight {
background: #fffbe6;
border-color: var(--ph-yellow, #FCD116);
}
body[data-blank-form="nbi"] .nbi-highlight {
border: 2px solid #2a5298;
border-radius: var(--radius-lg);
padding: 1.25rem;
}
body[data-blank-form="nbi"] .upload-feedback {
font-size: 0.82rem;
padding: 0.4rem 0.6rem;
border-radius: 6px;
margin-top: 0.3rem;
}
body[data-blank-form="nbi"] .upload-feedback.upload-ok { background: #e8fef0; color: #0d5c2e; }
body[data-blank-form="nbi"] .upload-feedback.upload-warn { background: #fffbe6; color: #8a6c00; }
body[data-blank-form="nbi"] .upload-feedback.upload-err { background: #fff0f0; color: #8b0011; }
body[data-blank-form="nbi"] .success-screen { text-align: center; padding: 3rem; display: none; }
body[data-blank-form="nbi"] .success-icon { font-size: 4rem; margin-bottom: 1rem; }
/* PSA authorization letter template */
body[data-blank-form="psa-auth"] .psa-auth-doc {
font-family: 'Times New Roman', Times, serif;
font-size: 12pt;
color: #000;
max-width: 18cm;
margin: 0 auto;
line-height: 1.9;
}
body[data-blank-form="psa-auth"] .psa-auth-doc p {
margin-bottom: 0.75em;
text-align: justify;
}
body[data-blank-form="psa-auth"] .psa-auth-right { text-align: right; }
body[data-blank-form="psa-auth"] .psa-auth-center { text-align: center; }
body[data-blank-form="psa-auth"] .psa-auth-bold { font-weight: bold; }
body[data-blank-form="psa-auth"] .psa-auth-indent { margin-left: 2em; }
body[data-blank-form="psa-auth"] .psa-auth-underline {
border-bottom: 1px solid #000;
display: inline-block;
min-width: 250px;
}
body[data-blank-form="psa-auth"] .psa-auth-underline-sm {
border-bottom: 1px solid #000;
display: inline-block;
min-width: 120px;
}
body[data-blank-form="psa-auth"] .psa-auth-sig-section { margin-top: 2.5em; }
body[data-blank-form="psa-auth"] .psa-auth-sig-line {
border-bottom: 1px solid #000;
min-width: 220px;
display: inline-block;
height: 1.5em;
}
body[data-blank-form="psa-auth"] .psa-auth-sig-label {
font-size: 10pt;
color: #333;
}
body[data-blank-form="psa-auth"] .psa-auth-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
@media print {
body[data-blank-form="psa-auth"] .psa-auth-actions,
body[data-blank-form="psa-auth"] .navbar,
body[data-blank-form="psa-auth"] .ebbi-intro-strip,
body[data-blank-form="psa-auth"] .breadcrumb,
body[data-blank-form="psa-auth"] .services-hero,
body[data-blank-form="psa-auth"] .footer,
body[data-blank-form="psa-auth"] .ebbi-assistant,
body[data-blank-form="psa-auth"] .psa-form-notice,
body[data-blank-form="psa-auth"] .form-meta,
body[data-blank-form="psa-auth"] .form-print-title {
display: none !important;
}
body[data-blank-form="psa-auth"] .form-card {
border: none;
box-shadow: none;
padding: 0;
}
body[data-blank-form="psa-auth"] .psa-auth-doc {
max-width: none;
}
}
/* PSA application forms — same navy presentation as immigration; no EBBI form header */
body[data-psa-form] .psa-form-notice,
body[data-blank-form="nbi"] .psa-form-notice{
background: #f0f4ff;
border-left: 4px solid #2a5298;
padding: 0.65rem 0.85rem;
font-size: 0.88rem;
margin-bottom: 1rem;
line-height: 1.5;
color: #1a2744;
}
body[data-psa-form] .form-header h1,
body[data-blank-form="nbi"] .form-header h1{
font-size: 1.35rem;
font-weight: 700;
color: var(--navy);
margin-bottom: 0.5rem;
}
body[data-psa-form] .form-step-section,
body[data-blank-form="nbi"] .form-step-section{
margin-bottom: 1.75rem;
padding-bottom: 0.25rem;
}
body[data-psa-form] .preview-screen,
body[data-blank-form="nbi"] .preview-screen{
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-6, 1.5rem);
margin-top: var(--space-4, 1rem);
display: none;
}
body[data-psa-form] .preview-screen-title,
body[data-blank-form="nbi"] .preview-screen-title{
color: var(--navy);
font-size: 1.25rem;
margin-bottom: 0.5rem;
font-weight: 700;
}
body[data-psa-form] .pdf-preview-container,
body[data-blank-form="nbi"] .pdf-preview-container{
margin: var(--space-4, 1rem) 0;
background: var(--surface-2);
border-radius: var(--radius-md);
padding: var(--space-4, 1rem);
}
body[data-psa-form] .preview-actions,
body[data-blank-form="nbi"] .preview-actions{
display: flex;
justify-content: space-between;
gap: var(--space-3, 0.75rem);
margin-top: var(--space-4, 1rem);
flex-wrap: wrap;
}
body[data-psa-form] .preview-actions .btn,
body[data-blank-form="nbi"] .preview-actions .btn{
flex: 1 1 auto;
min-width: 140px;
}
body[data-psa-form] .next-steps-box,
body[data-blank-form="nbi"] .next-steps-box{
background: #f0f4ff;
border: 1px solid #c5d4f0;
border-left: 4px solid #2a5298;
border-radius: var(--radius-md);
padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
margin-top: var(--space-6, 1.5rem);
text-align: left;
}
body[data-psa-form] .next-steps-box h4,
body[data-blank-form="nbi"] .next-steps-box h4{
color: var(--navy);
font-size: 1rem;
margin-bottom: 0.75rem;
font-weight: 700;
}
body[data-psa-form] .simple-steps,
body[data-blank-form="nbi"] .simple-steps{
padding-left: var(--space-6, 1.5rem);
margin: var(--space-3, 0.75rem) 0;
font-size: var(--text-sm);
color: var(--text-primary);
line-height: 1.6;
}
body[data-psa-form] .simple-steps li,
body[data-blank-form="nbi"] .simple-steps li{
margin-bottom: var(--space-3, 0.75rem);
}
body[data-psa-form] .simple-steps ul,
body[data-blank-form="nbi"] .simple-steps ul{
padding-left: var(--space-6, 1.5rem);
margin-top: var(--space-2, 0.5rem);
}
body[data-psa-form] .simple-steps ul li,
body[data-blank-form="nbi"] .simple-steps ul li{
list-style: disc;
margin-bottom: var(--space-1, 0.25rem);
}
body[data-psa-form] .payment-info-box,
body[data-blank-form="nbi"] .payment-info-box{
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
margin: var(--space-4, 1rem) 0;
font-size: var(--text-sm);
line-height: 1.6;
}
body[data-psa-form] .payment-info-box h4,
body[data-blank-form="nbi"] .payment-info-box h4{
color: var(--navy);
font-size: 0.95rem;
margin-bottom: 0.5rem;
font-weight: 700;
}
body[data-psa-form] .payment-info-box ul,
body[data-blank-form="nbi"] .payment-info-box ul{
padding-left: var(--space-6, 1.5rem);
margin-top: var(--space-2, 0.5rem);
}
body[data-psa-form] .payment-info-box li,
body[data-blank-form="nbi"] .payment-info-box li{
list-style: disc;
margin-bottom: var(--space-1, 0.25rem);
}
body[data-psa-form] .fee-banner,
body[data-blank-form="nbi"] .fee-banner{
background: #f0f4ff;
border: 1px solid #c5d4f0;
border-left: 4px solid #2a5298;
border-radius: var(--radius-md);
padding: 0.85rem 1rem;
margin-top: 1.25rem;
font-size: 0.83rem;
color: var(--navy);
line-height: 1.7;
}
@media (max-width: 768px) {
body[data-psa-form] .preview-actions .btn,
body[data-blank-form="nbi"] .preview-actions .btn{
flex: 1 1 calc(50% - 0.375rem);
min-width: 0;
}
}
@media (max-width: 480px) {
body[data-psa-form] .preview-actions .btn,
body[data-blank-form="nbi"] .preview-actions .btn{
flex: 1 1 100%;
}
}
body[data-blank-form] .confirmation-box {
text-align: center;
padding: 2.5rem;
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
border: 1px solid var(--border);
}
body[data-blank-form] .confirmation-box h2 {
color: var(--navy);
font-size: 1.35rem;
margin-bottom: 1rem;
}
body[data-blank-form] .confirmation-box p {
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 0.75rem;
color: var(--text-primary);
}
body[data-blank-form] .step-indicator {
display: flex;
align-items: center;
gap: 0;
margin-bottom: 2rem;
overflow-x: auto;
padding-bottom: 0.25rem;
}
body[data-blank-form] .step-progress-text {
font-size: 0.85rem;
font-weight: 600;
color: var(--navy);
margin: 0 0 0.75rem;
}
body[data-blank-form] .assessment-step-indicator {
position: sticky;
top: 0;
z-index: 20;
background: var(--white);
padding: 0.5rem 0 0.75rem;
margin-bottom: 1.25rem;
border-bottom: 1px solid var(--border);
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
body[data-blank-form] .step {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.72rem;
font-weight: 600;
color: var(--text-hint);
white-space: nowrap;
flex-shrink: 0;
}
body[data-blank-form] .step.active,
body[data-blank-form] .step.done {
color: var(--blue);
}
body[data-blank-form] .step-num {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--blue-light);
color: var(--blue);
font-weight: 700;
font-size: 0.72rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
body[data-blank-form] .step.active .step-num,
body[data-blank-form] .step.done .step-num {
background: var(--blue);
color: var(--white);
}
body[data-blank-form] .step-line {
width: 24px;
height: 2px;
background: var(--blue-light);
flex-shrink: 0;
}
body[data-blank-form] .flex-between {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-top: 1.5rem;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.hero-main-grid {
grid-template-columns: 1fr;
}
.hero-main-visual {
order: -1;
max-width: 200px;
margin: 0 auto var(--space-4);
}
.services-hero-grid,
.hero-landing-grid {
grid-template-columns: 1fr;
text-align: center;
}
.services-hero-grid h1,
.services-hero-grid .services-hero-copy p {
text-align: center;
}
.services-hero-actions {
justify-content: center;
}
.authority-card {
flex-direction: column;
align-items: center;
text-align: center;
}
.authority-quote {
text-align: left;
}
.professional-background-grid {
grid-template-columns: 1fr;
text-align: center;
}
.professional-background-photo {
margin: 0 auto var(--space-4);
}
.journey-steps {
grid-template-columns: 1fr 1fr;
}
body[data-blank-form] .form-row,
body[data-blank-form] .form-row-3,
body[data-blank-form] .form-row-4 {
grid-template-columns: 1fr;
}
body[data-blank-form] .checkbox-grid {
grid-template-columns: 1fr;
}
body[data-blank-form] .flex-between {
flex-direction: column-reverse;
align-items: stretch;
}
body[data-blank-form] .flex-between .btn {
width: 100%;
justify-content: center;
}
body[data-blank-form] .services-hero-actions {
flex-direction: column;
align-items: stretch;
}
body[data-blank-form] .services-hero-actions .btn {
width: 100%;
}
body[data-blank-form] .decision-buttons {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
body[data-blank-form] .decision-buttons .btn {
width: 100%;
}
body[data-blank-form] .form-card {
padding: 1.5rem;
}
body[data-blank-form] .assessment-step-indicator {
margin-left: -0.25rem;
margin-right: -0.25rem;
padding-left: 0.25rem;
padding-right: 0.25rem;
}
}
@media (max-width: 900px) {
body[data-blank-form] .form-row-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 520px) {
body[data-blank-form] .step-indicator .step {
font-size: 0.65rem;
}
body[data-blank-form] .step-line {
width: 12px;
}
.journey-steps {
grid-template-columns: 1fr;
}
.services-hero-grid,
.hero-landing-grid {
grid-template-columns: 1fr;
text-align: center;
}
.services-hero-grid h1,
.services-hero-grid .services-hero-copy p {
text-align: center;
}
.services-hero-actions {
justify-content: center;
}
.authority-card {
flex-direction: column;
align-items: center;
text-align: center;
}
.authority-quote {
text-align: left;
}
}
/* ── Print-only form title (hidden on screen) ─────────────── */
.form-print-title {
display: none;
}
/* ── Print Stylesheet — EBBI assessment & intake forms ────── */
@media print {
/* Hide navigation and web-only UI */
.skip-link,
nav,
.navbar,
.navbar-mobile,
.breadcrumb,
.page-hero,
.services-hero,
.ebbi-intro-strip,
footer,
.footer,
.form-header,
.step-indicator,
.step-line,
.blank-form-banner,
#ebbi-assistant,
.ebbi-assistant,
.toast,
#toast,
.flex-between,
.intake-notice,
#nbi-flow-banner,
#nbi-hero-notice,
[id*="Confirmation"],
[id^="btn-next-"],
[id^="btn-back-"],
button,
input[type="submit"],
input[type="button"],
input[type="file"],
.btn-primary,
.btn-outline-navy,
.btn-blue,
.btn-red,
.btn-gold,
.btn-sm,
.btn-lg,
.btn-back,
.btn-next,
.btn-submit,
#submitBtn {
display: none !important;
}
/* Show every form step panel (override JS show/hide) */
div[id^="step-"]:not([id$="-indicator"]) {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
page-break-inside: auto;
break-inside: auto;
margin-bottom: 0.5rem;
}
/* Section dividers */
.form-section-divider {
border-top: none;
padding-top: 0;
margin-top: 0.65rem;
margin-bottom: 0.35rem;
page-break-after: avoid;
}
.form-section-divider h4,
.intake-card h2,
.form-step-section .form-section-divider h4 {
font-size: 10pt;
font-weight: bold;
color: #fff;
background: #1a3c6b;
padding: 0.2rem 0.45rem;
margin-bottom: 0.5rem;
}
/* Checkbox / radio: keep label beside control */
.checkbox-grid,
.radio-grid,
div:has(> label > input[type="radio"]),
div:has(> label > input[type="checkbox"]),
div:has(> label input[type="radio"]),
div:has(> label input[type="checkbox"]) {
display: block !important;
columns: 1 !important;
column-count: 1 !important;
grid-template-columns: 1fr !important;
float: none !important;
width: 100% !important;
margin: 0.15rem 0 0.4rem !important;
gap: 0 !important;
}
.checkbox-grid label,
.radio-grid label,
.checkbox-label,
label:has(input[type="radio"]),
label:has(input[type="checkbox"]) {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: flex-start !important;
justify-content: flex-start !important;
text-align: left !important;
gap: 6px !important;
margin-bottom: 4px !important;
break-inside: avoid !important;
page-break-inside: avoid !important;
width: 100% !important;
max-width: 100% !important;
float: none !important;
font-weight: normal !important;
}
input[type="radio"],
input[type="checkbox"],
.checkbox-grid input[type="checkbox"],
.checkbox-grid input[type="radio"],
.checkbox-label input[type="checkbox"],
.checkbox-label input[type="radio"] {
flex: 0 0 14px !important;
flex-shrink: 0 !important;
width: 14px !important;
height: 14px !important;
min-width: 14px !important;
max-width: 14px !important;
margin-top: 2px !important;
margin-right: 0 !important;
appearance: auto !important;
border: 1.5px solid #333 !important;
display: inline-block !important;
float: none !important;
position: static !important;
order: 0 !important;
}
input[type="checkbox"],
.checkbox-grid input[type="checkbox"],
.checkbox-label input[type="checkbox"] {
-webkit-appearance: checkbox !important;
}
input[type="radio"],
.checkbox-grid input[type="radio"],
.checkbox-label input[type="radio"] {
-webkit-appearance: radio !important;
}
/* Select → blank underline (no arrow, no placeholder option text) */
select,
select.form-control {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
border: none !important;
border-bottom: 1.5px solid #333 !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
border-radius: 0 !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
color: transparent !important;
min-height: 22px !important;
padding: 0 !important;
font-size: 10pt !important;
width: 100% !important;
}
select + .select-arrow,
select ~ .dropdown-arrow,
.form-select-wrapper::after,
.select-wrapper::after {
display: none !important;
}
/* Textareas → lined writing area, no placeholder */
textarea.form-control {
border: 1px solid #ccc !important;
min-height: 80px !important;
background: transparent !important;
}
/* Suppress ALL placeholder text in print */
input::placeholder,
textarea::placeholder,
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
input::-moz-placeholder,
textarea::-moz-placeholder,
input:-ms-input-placeholder,
textarea:-ms-input-placeholder,
.form-control::placeholder,
input.form-control::placeholder,
textarea.form-control::placeholder,
input:placeholder-shown::placeholder,
textarea:placeholder-shown::placeholder {
color: transparent !important;
opacity: 0 !important;
visibility: hidden !important;
}
textarea.form-control::placeholder {
color: transparent !important;
opacity: 0 !important;
visibility: hidden !important;
}
input[placeholder]:placeholder-shown,
textarea[placeholder]:placeholder-shown,
input[placeholder],
textarea[placeholder] {
color: transparent !important;
}
input:not(:placeholder-shown),
textarea:not(:placeholder-shown) {
color: #000 !important;
}
/* Text / email / tel / number → blank lines (filled values stay visible) */
input[type="text"].form-control,
input[type="email"].form-control,
input[type="tel"].form-control,
input[type="number"].form-control {
border: none !important;
border-bottom: 1.5px solid #333 !important;
border-radius: 0 !important;
background: transparent !important;
padding: 2px 0 !important;
min-height: 24px !important;
width: 100% !important;
}
/* Date inputs → blank line (hide mm/dd/yyyy chrome) */
input[type="date"],
input[type="date"].form-control {
-webkit-appearance: none !important;
appearance: none !important;
border: none !important;
border-bottom: 1.5px solid #333 !important;
border-radius: 0 !important;
background: white !important;
color: white !important;
min-height: 22px !important;
padding: 0 !important;
width: 100% !important;
}
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-clear-button {
display: none !important;
opacity: 0 !important;
}
.form-label {
font-size: 9pt !important;
font-weight: 600 !important;
color: #333 !important;
margin-bottom: 2px !important;
display: block !important;
}
.field-note {
font-size: 8pt !important;
color: #666 !important;
font-style: italic !important;
}
.warning-box,
.declaration-box {
border: 1px solid #999 !important;
background: transparent !important;
padding: 8px !important;
page-break-inside: avoid !important;
}
.form-print-title {
display: block !important;
font-size: 14pt !important;
font-weight: bold !important;
color: #1a3c6b !important;
margin-bottom: 8px !important;
}
body::before {
content: "Explore Beyond Borders Inc. (EBBI) — 3768 Bathurst St., Toronto, ON | EBBI: (647) 780-4069 | Atty. Garvida Unit 306: (416) 638-1529";
display: block !important;
font-size: 8pt !important;
color: #333 !important;
border-bottom: 1px solid #333 !important;
padding-bottom: 6px !important;
margin-bottom: 16px !important;
font-family: Arial, sans-serif !important;
}
.form-group {
page-break-inside: auto;
break-inside: auto;
margin-bottom: 0.45rem;
}
.form-row {
display: block !important;
grid-template-columns: 1fr !important;
}
.form-row > .form-group {
width: 100% !important;
}
.container,
.container-narrow,
.form-container,
.form-card {
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
border: none !important;
}
.intake-card,
.form-step-section,
.service-card,
.form-card {
box-shadow: none !important;
border: none !important;
page-break-inside: auto;
break-inside: auto;
margin-bottom: 0 !important;
padding: 0 !important;
}
.case-status-page .step-card {
box-shadow: none !important;
border: 1px solid #ccc !important;
}
body {
background: #fff !important;
color: #000 !important;
font-size: 10pt !important;
}
@page {
margin: 1.5cm;
}
}
/* ============================================================
Client portal (static shell — auth via backend on production)
============================================================ */
body.portal-page .portal-shell {
max-width: 720px;
margin: 0 auto;
}
body.portal-page .upload-door-grid {
display: grid;
gap: 1rem;
margin: 0.5rem 0 0;
}
@media (min-width: 800px) {
body.portal-page .upload-door-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: start;
}
}
body.portal-page .upload-door-card {
border: 1px solid rgba(26, 60, 107, 0.16);
background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 55%);
padding: 1rem 1rem 1.1rem;
}
body.portal-page .upload-door-title {
font-family: Lora, Georgia, serif;
font-size: 1.05rem;
color: var(--navy, #1A3C6B);
margin: 0 0 0.35rem;
}
body.portal-page .upload-door-form .form-group {
margin-bottom: 0.65rem;
}
body.portal-page .upload-door-form .btn {
width: 100%;
margin-top: 0.25rem;
}
body.portal-page .portal-hub-lead {
font-size: var(--text-sm);
color: var(--text-secondary);
margin: 0.75rem 0 1rem;
line-height: 1.55;
text-align: center;
}
body.portal-page .portal-elevator-grid {
grid-template-columns: 1fr;
gap: 0.85rem;
margin-bottom: 1rem;
}
@media (min-width: 560px) {
body.portal-page .portal-elevator-grid {
grid-template-columns: repeat(3, 1fr);
}
}
body.portal-page .portal-elevator-tile {
min-height: 168px;
}
body.portal-page .portal-floor-back {
margin: 0 0 0.85rem;
font-size: var(--text-sm);
}
body.portal-page .portal-floor-back a {
color: var(--navy);
font-weight: 600;
text-decoration: none;
}
body.portal-page .portal-floor-back a:hover {
text-decoration: underline;
}
body.portal-page .portal-more-panel {
margin-top: 1.25rem;
padding: 0.85rem 1rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
font-size: var(--text-sm);
}
body.portal-page .portal-more-panel > summary {
cursor: pointer;
font-weight: 700;
color: var(--navy);
}
.portal-elevator-tile[data-portal-floor="status"] { border-color: rgba(180, 83, 9, 0.28); }
.portal-elevator-tile[data-portal-floor="status"]:hover { border-color: #B45309; }
.portal-elevator-tile[data-portal-floor="status"] .elevator-tile-icon { background: #FFFBEB; color: #B45309; }
.portal-elevator-tile[data-portal-floor="file"] { border-color: rgba(26, 60, 107, 0.22); }
.portal-elevator-tile[data-portal-floor="file"]:hover { border-color: #1A3C6B; }
.portal-elevator-tile[data-portal-floor="file"] .elevator-tile-icon { background: #EEF3FB; color: #1A3C6B; }
body.portal-page .portal-status-headline {
font-family: Lora, Georgia, serif;
font-size: 1.35rem;
color: var(--navy, #1A3C6B);
margin: 0 0 0.35rem;
}
body.portal-page .portal-status-chips {
list-style: none;
margin: 1rem 0;
padding: 0;
display: grid;
gap: 0.65rem;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
body.portal-page .portal-status-chip {
border: 1px solid rgba(26, 60, 107, 0.14);
background: #F8FAFC;
padding: 0.75rem 0.85rem;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
body.portal-page .portal-status-chip strong {
font-size: 0.82rem;
color: var(--navy, #1A3C6B);
}
body.portal-page .portal-status-chip span {
font-size: 0.78rem;
color: var(--text-secondary, #475569);
}
body.portal-page .portal-status-chip--attention {
border-color: rgba(180, 83, 9, 0.35);
background: #FFFBEB;
}
body.portal-page .portal-status-chip--ok {
border-color: rgba(22, 163, 74, 0.28);
background: #F0FDF4;
}
body.portal-page .portal-status-chip--done {
border-color: rgba(22, 163, 74, 0.4);
background: #DCFCE7;
}
body.portal-page .portal-status-chip--pending {
border-color: rgba(100, 116, 139, 0.25);
background: #F8FAFC;
}
body.portal-page .portal-status-next {
font-size: 0.9rem;
margin: 0.5rem 0 0;
}
body.portal-page .portal-case-filed {
display: inline-block;
margin: 0.25rem 0 0.5rem;
font-size: 0.78rem;
color: #166534;
font-weight: 600;
}
body.portal-page .portal-case-timeline {
margin: 0.5rem 0 0;
padding-left: 1.1rem;
font-size: 0.78rem;
color: var(--text-secondary, #475569);
}
body.portal-page .portal-case-timeline li.is-done {
color: #166534;
text-decoration: line-through;
text-decoration-thickness: 1px;
}
.portal-elevator-tile[data-portal-floor="pay"] { border-color: rgba(22, 163, 74, 0.22); }
.portal-elevator-tile[data-portal-floor="pay"]:hover { border-color: #16A34A; }
.portal-elevator-tile[data-portal-floor="pay"] .elevator-tile-icon { background: #DCFCE7; color: #16A34A; }
.portal-elevator-tile[data-portal-floor="messages"] { border-color: rgba(37, 99, 235, 0.22); }
.portal-elevator-tile[data-portal-floor="messages"]:hover { border-color: #2563EB; }
.portal-elevator-tile[data-portal-floor="messages"] .elevator-tile-icon { background: #EFF6FF; color: #2563EB; }
body.portal-page .portal-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.25rem;
}
body.portal-page .portal-actions .btn {
flex: 1 1 auto;
}
body.portal-page .portal-links {
margin-top: 1.5rem;
font-size: 0.9rem;
line-height: 1.6;
}
body.portal-page .portal-links a {
color: var(--blue);
font-weight: 600;
}
body.portal-page .portal-login-error:not([hidden]) {
display: block;
margin-bottom: var(--space-4);
padding: var(--space-3) var(--space-4);
background: #fff0f0;
border-radius: var(--radius-md);
color: var(--red);
font-size: var(--text-sm);
}
body.portal-page .portal-section-title {
font-size: var(--text-lg);
color: var(--navy);
margin: var(--space-5) 0 var(--space-3);
}
body.portal-page .portal-case-list {
list-style: none;
padding: 0;
margin: 0 0 var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
body.portal-page .portal-case-card {
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-4);
background: var(--surface);
}
body.portal-page .portal-case-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-1);
}
body.portal-page .portal-case-status {
font-size: var(--text-sm);
font-weight: 600;
color: var(--blue);
}
body.portal-page .portal-case-meta {
margin: 0;
font-size: var(--text-sm);
color: var(--text-secondary);
}
body.portal-page .portal-ircc-group {
margin-bottom: var(--space-5);
}
body.portal-page .portal-ircc-case {
font-size: var(--text-base);
color: var(--navy);
margin: 0 0 var(--space-2);
}
body.portal-page .portal-form-list,
body.portal-page .portal-message-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
body.portal-page .portal-form-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
padding: var(--space-3);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--white);
}
body.portal-page .portal-form-label {
flex: 1 1 12rem;
font-weight: 600;
color: var(--navy);
}
body.portal-page .portal-form-status {
font-size: var(--text-sm);
color: var(--text-secondary);
}
body.portal-page .portal-message-card {
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
background: var(--white);
}
body.portal-page .portal-message-head {
display: flex;
justify-content: space-between;
gap: var(--space-2);
margin-bottom: var(--space-1);
font-size: var(--text-sm);
}
body.portal-page .portal-message-head time {
color: var(--text-secondary);
white-space: nowrap;
}
body.portal-page .portal-message-body {
margin: 0;
font-size: var(--text-sm);
line-height: 1.5;
color: var(--text-primary);
}
body.portal-page .portal-message-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
body.portal-page .portal-message-unread {
font-size: var(--text-xs);
font-weight: 700;
color: var(--white);
background: var(--red);
padding: 0.15rem 0.5rem;
border-radius: 999px;
}
body.portal-page .portal-message-thread {
max-height: 22rem;
overflow-y: auto;
padding: var(--space-2);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface);
margin-bottom: var(--space-4);
}
body.portal-page .portal-msg-bubble {
margin-bottom: var(--space-2);
font-size: var(--text-sm);
line-height: 1.45;
}
body.portal-page .portal-msg-bubble.staff {
text-align: right;
}
body.portal-page .portal-msg-bubble .who {
font-size: var(--text-xs);
color: var(--text-secondary);
margin-bottom: 0.15rem;
}
body.portal-page .portal-msg-bubble .txt {
display: inline-block;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
background: var(--white);
border: 1px solid var(--border);
max-width: 85%;
text-align: left;
}
body.portal-page .portal-msg-bubble.staff .txt {
background: #e8eef7;
border-color: #c5d4ef;
}
body.portal-page .portal-msg-bubble.is-unread .who strong::after {
content: ' · New';
color: var(--red);
font-weight: 700;
}
body.portal-page .portal-signed-upload {
margin-top: var(--space-2);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}
body.portal-page .portal-form-badge {
font-size: var(--text-xs);
font-weight: 600;
padding: 0.12rem 0.45rem;
border-radius: 999px;
background: #fff8e6;
color: #8a6200;
}
body.portal-page .portal-form-badge.ready {
background: #e6f4ea;
color: #1e7e34;
}
body.portal-page .portal-consent-box {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-4);
margin-bottom: var(--space-4);
}
body.portal-page .portal-consent-label {
display: flex;
gap: var(--space-3);
font-size: var(--text-sm);
line-height: 1.5;
cursor: pointer;
align-items: flex-start;
}
body.portal-page .portal-consent-label input {
margin-top: 0.2rem;
flex-shrink: 0;
}
body.portal-page .portal-pin-wrap {
position: relative;
}
body.portal-page .portal-pin-wrap .form-control {
padding-right: 4.5rem;
}
body.portal-page .portal-pin-toggle {
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
border: none;
background: transparent;
color: var(--blue);
font-size: var(--text-xs);
font-weight: 700;
cursor: pointer;
padding: 0.25rem 0.35rem;
border-radius: var(--radius-sm);
}
body.portal-page .portal-pin-toggle:hover {
background: var(--surface);
}
body.portal-page .portal-pin-toggle:focus {
outline: 2px solid var(--blue);
outline-offset: 2px;
}
body.portal-page .portal-retainer-box {
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-4);
margin-bottom: var(--space-3);
background: #fffbeb;
}
body.portal-page .portal-retainer-preview {
max-height: 11rem;
overflow: auto;
border: 1px solid var(--border);
background: var(--white);
padding: var(--space-3);
font-size: var(--text-sm);
margin: var(--space-2) 0;
border-radius: var(--radius-sm);
}
body.portal-page .portal-pay-card {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-2);
background: var(--white);
font-size: var(--text-sm);
}
body.portal-page .portal-doc-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
padding: var(--space-3);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--white);
}
body.portal-page .portal-doc-meta {
flex: 1 1 12rem;
font-size: var(--text-sm);
}
body.portal-page .portal-doc-meta strong {
color: var(--navy);
}
body.portal-page .portal-doc-note {
display: block;
margin-top: var(--space-1);
font-size: var(--text-sm);
color: var(--text-secondary, #4a5568);
font-style: italic;
}
body.portal-page .portal-security-panel {
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
margin: var(--space-4) 0;
background: var(--surface);
}
body.portal-page .portal-security-panel summary {
font-weight: 700;
color: var(--navy);
cursor: pointer;
margin-bottom: var(--space-2);
}
body.portal-page .portal-security-list {
margin: var(--space-2) 0 0;
padding-left: 1.25rem;
font-size: var(--text-sm);
line-height: 1.6;
}
body.portal-page .portal-pin-form {
margin: var(--space-3) 0;
max-width: 20rem;
}
body.portal-page .portal-pin-form .form-group {
margin-bottom: var(--space-2);
}
body.portal-page .portal-pin-help {
margin-top: var(--space-3);
font-size: var(--text-sm);
}
body.portal-page .portal-pin-help summary {
cursor: pointer;
color: var(--navy);
font-weight: 600;
}
body.portal-page .portal-inline-upload {
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--border);
}
body.portal-page .portal-inline-upload-title {
font-size: var(--text-base);
font-weight: 700;
color: var(--navy);
margin: 0 0 var(--space-2);
}
body.portal-page .portal-inline-upload-row {
display: flex;
flex-direction: column;
gap: var(--space-2);
max-width: 24rem;
}
body.portal-page .portal-doc-req-card {
padding: var(--space-3);
border: 1px solid var(--border);
border-radius: var(--radius-md);
margin-bottom: var(--space-2);
background: var(--surface);
}
body.portal-page .portal-doc-req-head {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
justify-content: space-between;
align-items: baseline;
margin-bottom: var(--space-2);
}
body.portal-page .portal-req-upload {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-2);
}
body.portal-page .portal-req-upload .portal-req-file {
font-size: var(--text-sm);
max-width: 100%;
}
body.portal-page .portal-req-notes {
font-size: var(--text-sm);
min-height: 3rem;
resize: vertical;
}
body.portal-page .portal-doc-req-card.is-overdue {
border-color: #c53030;
background: #fff5f5;
}
body.portal-page .portal-doc-req-card.is-highlight {
border-color: var(--navy);
background: #ebf8ff;
box-shadow: 0 0 0 2px rgba(26, 54, 93, 0.15);
}
body.portal-page .portal-req-note {
font-size: var(--text-sm);
color: var(--text-secondary, #4a5568);
margin: 0 0 var(--space-2);
line-height: 1.5;
}
body.portal-page .portal-req-due {
font-size: var(--text-sm);
margin: 0 0 var(--space-2);
color: var(--text-secondary, #4a5568);
}
body.portal-page .portal-req-upload-link-wrap {
margin: 0 0 var(--space-2);
}
body.portal-page .portal-req-upload-link {
font-size: var(--text-sm);
font-weight: 600;
}
body.portal-page .portal-req-due.is-overdue,
body.portal-page .portal-form-status.is-overdue {
color: #c53030;
font-weight: 600;
}
body.portal-page .portal-inline-dropzone,
body.portal-page .portal-upload-dropzone {
border: 2px dashed var(--border);
border-radius: var(--radius-md);
padding: var(--space-4);
margin-bottom: var(--space-3);
text-align: center;
background: var(--surface);
transition: border-color 0.15s ease, background 0.15s ease;
}
body.portal-page .portal-inline-dropzone.is-dragover,
body.portal-page .portal-upload-dropzone.is-dragover {
border-color: var(--navy);
background: #f0f4ff;
}
body.portal-page .portal-inline-dropzone-label,
body.portal-page .portal-upload-dropzone-label {
font-size: var(--text-sm);
color: var(--text-secondary, #4a5568);
}
body.portal-page .portal-overdue-badge {
display: inline-block;
margin-left: var(--space-2);
padding: 0.15rem 0.55rem;
border-radius: 999px;
background: #fff5f5;
border: 1px solid #c53030;
color: #c53030;
font-size: var(--text-sm);
font-weight: 600;
text-decoration: none;
}
body.portal-page .portal-overdue-badge:hover,
body.portal-page .portal-overdue-badge:focus {
background: #fed7d7;
text-decoration: none;
}
body.portal-page .portal-actions-summary {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin: var(--space-2) 0 var(--space-4);
padding: var(--space-2) var(--space-3);
background: #f7fafc;
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
body.portal-page .portal-file-banner {
margin: var(--space-3) 0 var(--space-4);
padding: var(--space-4);
border-radius: var(--radius-md);
border: 1px solid #bee3f8;
background: linear-gradient(135deg, #ebf8ff 0%, #f7fafc 100%);
}
body.portal-page .portal-file-banner-head {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
body.portal-page .portal-file-banner-head strong {
display: block;
font-size: 1.05rem;
color: var(--navy);
margin-bottom: 0.35rem;
}
body.portal-page .portal-file-banner-lead {
margin: 0;
font-size: var(--text-sm);
line-height: 1.5;
color: var(--text-secondary, #555);
max-width: 42rem;
}
body.portal-page .portal-file-banner-meter {
min-width: 5.5rem;
text-align: center;
padding: 0.5rem 0.75rem;
border-radius: var(--radius-md);
background: #fff;
border: 1px solid #bee3f8;
}
body.portal-page .portal-file-banner-meter-value {
display: block;
font-size: 1.35rem;
font-weight: 800;
color: var(--navy);
line-height: 1.1;
}
body.portal-page .portal-file-banner-meter-label {
display: block;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary, #666);
}
body.portal-page .portal-file-banner-stats {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-3);
font-size: var(--text-sm);
color: var(--navy);
}
body.portal-page .portal-file-banner-stats span {
padding: 0.15rem 0.55rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.85);
border: 1px solid #bee3f8;
}
body.portal-page .portal-file-banner-section {
margin-bottom: var(--space-3);
}
body.portal-page .portal-file-banner-section-title {
display: block;
font-size: var(--text-sm);
font-weight: 700;
color: var(--navy);
margin-bottom: 0.35rem;
}
body.portal-page .portal-file-banner-list {
margin: 0;
padding-left: 1.15rem;
font-size: var(--text-sm);
color: var(--text-secondary, #555);
}
body.portal-page .portal-file-banner-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
body.case-status-page .case-status-readiness-card {
margin-top: var(--space-3);
padding: var(--space-3);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: #f7fafc;
}
body.case-status-page .case-status-readiness-meter {
display: inline-flex;
flex-direction: column;
align-items: center;
padding: 0.5rem 0.85rem;
margin: 0.5rem 0;
border-radius: var(--radius-md);
border: 1px solid #bee3f8;
background: #fff;
}
body.case-status-page .case-status-readiness-value {
font-size: 1.35rem;
font-weight: 800;
color: var(--navy);
line-height: 1.1;
}
body.case-status-page .case-status-readiness-label {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary, #666);
}
body.case-status-page .case-status-readiness-cases {
margin: 0.5rem 0 0;
padding-left: 1.1rem;
font-size: var(--text-sm);
}
.ebbi-resume-banner {
margin-bottom: var(--space-3);
}
body.portal-page .portal-actions-summary-label {
font-size: var(--text-sm);
font-weight: 700;
color: var(--navy);
}
body.portal-page .portal-actions-badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
body.portal-page .portal-actions-badges .portal-overdue-badge,
body.portal-page .portal-actions-badges .portal-unread-badge,
body.portal-page .portal-actions-badges .portal-retainer-badge,
body.portal-page .portal-actions-badges .portal-payment-badge {
margin-left: 0;
}
body.portal-page .portal-unread-badge {
display: inline-block;
margin-left: var(--space-2);
padding: 0.15rem 0.55rem;
border-radius: 999px;
background: #ebf8ff;
border: 1px solid var(--navy);
color: var(--navy);
font-size: var(--text-sm);
font-weight: 600;
text-decoration: none;
}
body.portal-page .portal-unread-badge:hover,
body.portal-page .portal-unread-badge:focus {
background: #bee3f8;
text-decoration: none;
}
body.portal-page .portal-retainer-badge,
body.portal-page .portal-payment-badge {
display: inline-block;
margin-left: var(--space-2);
padding: 0.15rem 0.55rem;
border-radius: 999px;
font-size: var(--text-sm);
font-weight: 600;
text-decoration: none;
}
body.portal-page .portal-retainer-badge {
background: #fffaf0;
border: 1px solid #d69e2e;
color: #975a16;
}
body.portal-page .portal-retainer-badge:hover,
body.portal-page .portal-retainer-badge:focus {
background: #feebc8;
text-decoration: none;
}
body.portal-page .portal-payment-badge {
background: #f0fff4;
border: 1px solid #38a169;
color: #276749;
}
body.portal-page .portal-payment-badge:hover,
body.portal-page .portal-payment-badge:focus {
background: #c6f6d5;
text-decoration: none;
}
body.portal-page .portal-messages-placeholder-wrap {
min-height: 4.5rem;
display: flex;
align-items: center;
justify-content: center;
}
body.portal-page .portal-req-dropzone {
border: 1px dashed var(--border);
border-radius: var(--radius-md);
padding: var(--space-2) var(--space-3);
margin-top: var(--space-1);
transition: border-color 0.15s ease, background 0.15s ease;
}
body.portal-page .portal-req-dropzone.is-dragover {
border-color: var(--navy);
background: #f0f4ff;
}
body.portal-page .portal-req-dropzone-label {
display: block;
font-size: var(--text-sm);
color: var(--text-secondary, #4a5568);
margin-bottom: var(--space-2);
}
body.portal-page .portal-upload-error:not([hidden]),
body.portal-page .portal-upload-success:not([hidden]) {
display: block;
margin-bottom: var(--space-4);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
font-size: var(--text-sm);
}
body.portal-page .portal-upload-error:not([hidden]) {
background: #fff0f0;
color: var(--red);
}
body.portal-page .portal-upload-success:not([hidden]) {
background: #f0fff4;
color: #0d5c2e;
border: 1px solid #b7e4c7;
}
body.portal-page .portal-upload-success-name {
margin: var(--space-2) 0 0;
font-weight: 600;
}
body.admin-page .admin-nav-links a.is-active {
background: var(--blue-light);
font-weight: 700;
}
body.admin-page .admin-layout {
display: grid;
grid-template-columns: 240px 1fr;
gap: 1.25rem;
align-items: start;
}
body.admin-page .admin-main {
min-width: 0;
}
body.admin-page .admin-sidebar {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 0.65rem;
box-shadow: var(--shadow-sm);
position: sticky;
top: 1rem;
}
body.admin-page .admin-sidebar a {
display: block;
padding: 0.55rem 0.75rem;
border-radius: var(--radius-md);
font-size: var(--text-sm);
color: var(--navy);
text-decoration: none;
margin-bottom: 0.15rem;
font-weight: 600;
}
body.admin-page .admin-sidebar a:hover {
background: var(--surface);
}
body.admin-page .admin-sidebar a.is-active {
background: var(--blue-light);
font-weight: 700;
}
body.admin-page .admin-nav-group {
margin-bottom: 0.65rem;
padding-bottom: 0.55rem;
border-bottom: 1px solid var(--border);
}
body.admin-page .admin-nav-group:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
body.admin-page .admin-nav-group-label {
display: block;
padding: 0.15rem 0.75rem 0.35rem;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--text-secondary);
}
body.admin-page .admin-nav-group--muted .admin-nav-group-label,
body.admin-page .admin-nav-group--muted a {
color: var(--text-secondary);
font-weight: 500;
}
body.admin-page .admin-nav-group--muted a:hover {
color: var(--navy);
}
@media (max-width: 860px) {
body.admin-page .admin-layout {
grid-template-columns: 1fr;
}
body.admin-page .admin-sidebar {
position: static;
}
body.admin-page .admin-sidebar--elevator {
display: block;
}
body.admin-page .admin-floor-panel a {
padding-left: 1.5rem;
}
body.admin-page .admin-nav-group {
flex: 1 1 100%;
border-bottom: none;
margin-bottom: 0.35rem;
}
body.admin-page .admin-nav-group-label {
width: 100%;
}
body.admin-page .admin-nav-external a {
display: block;
text-align: left;
}
}
body[data-blank-form] .step.active:focus-within,
body[data-blank-form] .step.done:focus-within {
outline: 2px solid var(--blue);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
body[data-blank-form] .form-control:focus,
body[data-blank-form] .form-control:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 1px;
border-color: var(--blue);
}
body[data-blank-form] .form-card .btn:focus-visible,
body[data-blank-form] .flex-between .btn:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 2px;
}
body[data-blank-form] .confirmation-box {
outline: none;
}
body[data-blank-form] .confirmation-box:focus-within {
box-shadow: 0 0 0 2px var(--blue-light);
}
/* --- CRS Estimator tool --- */
body[data-crs-tool="estimator"] .crs-estimator-card {
margin-top: 0;
}
.crs-reform-notice {
border-left: 4px solid var(--gold, #c9a227);
}
.crs-step-indicator {
margin-bottom: 1.75rem;
}
.crs-results-panel {
padding: 1.5rem 0 0.5rem;
}
.crs-score-display {
text-align: center;
padding: 1.5rem;
background: linear-gradient(135deg, var(--navy, #0f2744) 0%, #1a3d66 100%);
color: #fff;
border-radius: var(--radius-lg, 12px);
margin-bottom: 1.25rem;
}
.crs-score-label {
margin: 0;
font-size: 0.95rem;
opacity: 0.9;
}
.crs-score-value {
margin: 0.25rem 0;
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.crs-score-max {
margin: 0;
font-size: 0.9rem;
opacity: 0.75;
}
.crs-competitiveness {
margin-bottom: 1rem;
padding: 0.75rem 1rem;
background: var(--surface-alt, #f4f7fb);
border-radius: var(--radius-md, 8px);
}
.crs-breakdown-grid {
display: grid;
gap: 0.35rem;
margin-bottom: 1.25rem;
font-size: 0.95rem;
}
.crs-breakdown-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 0.5rem 0;
border-bottom: 1px solid var(--border, #e2e8f0);
}
.crs-breakdown-row strong {
font-variant-numeric: tabular-nums;
color: var(--navy, #0f2744);
}
.crs-breakdown-sub {
font-size: 0.82rem;
color: var(--text-muted, #64748b);
margin: -0.15rem 0 0.5rem;
line-height: 1.45;
}
.crs-hints h3 {
font-size: 1rem;
margin: 0 0 0.5rem;
}
.crs-hints ul {
margin: 0 0 1rem;
padding-left: 1.25rem;
line-height: 1.55;
}
.crs-results-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1rem;
}
.crs-lang-scores .form-group {
min-width: 0;
}
@media (max-width: 640px) {
.crs-score-value {
font-size: 2.75rem;
}
.crs-results-actions .btn {
width: 100%;
}
}
/* --- Eligibility checker tool --- */
body[data-eligibility-tool="checker"] .eligibility-checker-card {
margin-top: 0;
}
.eligibility-results {
padding: 0.5rem 0 1.5rem;
}
.eligibility-band {
padding: 1.25rem 1.5rem;
border-radius: var(--radius-lg, 12px);
margin-bottom: 1.25rem;
}
.eligibility-band--may_qualify {
background: #ecfdf5;
border: 1px solid #6ee7b7;
}
.eligibility-band--needs_review {
background: #fffbeb;
border: 1px solid #fcd34d;
}
.eligibility-band--likely_not {
background: #fef2f2;
border: 1px solid #fca5a5;
}
.eligibility-band-label {
margin: 0 0 0.35rem;
font-size: 0.85rem;
color: var(--text-muted, #64748b);
}
.eligibility-band h3 {
margin: 0 0 0.5rem;
font-size: 1.2rem;
}
.eligibility-checks-list {
list-style: none;
margin: 0 0 1.25rem;
padding: 0;
}
.eligibility-check-item {
display: flex;
gap: 0.75rem;
align-items: flex-start;
padding: 0.65rem 0;
border-bottom: 1px solid var(--border, #e2e8f0);
}
.eligibility-check-icon {
font-weight: 700;
width: 1.25rem;
flex-shrink: 0;
}
.eligibility-check-pass .eligibility-check-icon { color: #059669; }
.eligibility-check-fail .eligibility-check-icon { color: #dc2626; }
.eligibility-check-review .eligibility-check-icon { color: #d97706; }
.eligibility-hints ul {
margin: 0 0 1rem;
padding-left: 1.25rem;
line-height: 1.55;
}
.eligibility-results-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.eligibility-hub-links {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border, #e2e8f0);
}
.eligibility-hub-links h3 {
font-size: 1rem;
margin: 0 0 0.75rem;
}
.eligibility-quick-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
gap: 0.5rem;
}
.eligibility-quick-card {
display: block;
padding: 0.65rem 0.85rem;
border: 1px solid var(--border, #e2e8f0);
border-radius: var(--radius-md, 8px);
text-decoration: none;
color: var(--navy, #0f2744);
font-size: 0.9rem;
font-weight: 500;
background: var(--surface-alt, #f8fafc);
}
.eligibility-quick-card:hover {
border-color: var(--blue, #2563eb);
background: #fff;
}
.eligibility-lang-fieldset {
border: none;
margin: 0 0 1rem;
padding: 0;
}
@media (max-width: 640px) {
.eligibility-results-actions .btn {
width: 100%;
}
}
/* ============================================================
28. STAFF INTAKE & PATHWAY FORMS (Prompt 7 polish)
Extends existing tokens — no new brand colors
============================================================ */
body.staff-intake-page {
background: var(--surface);
min-height: 100vh;
}
.staff-intake-header {
background: var(--navy);
color: var(--white);
box-shadow: var(--shadow-navbar);
}
.staff-intake-header-bar {
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.staff-intake-header-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--space-3) var(--space-4);
display: flex;
align-items: center;
gap: var(--space-4);
flex-wrap: wrap;
}
.staff-intake-brand {
display: flex;
align-items: center;
gap: var(--space-3);
text-decoration: none;
color: var(--white);
min-width: 0;
}
.staff-intake-brand-text {
display: flex;
flex-direction: column;
line-height: 1.25;
}
.staff-intake-brand-name {
font-weight: 700;
font-size: var(--text-base);
}
.staff-intake-brand-sub {
font-size: var(--text-xs);
opacity: 0.85;
}
.staff-intake-nav {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
margin-left: auto;
}
.staff-intake-nav a,
.staff-intake-mobile-nav a,
.staff-intake-signout {
color: rgba(255, 255, 255, 0.92);
text-decoration: none;
font-size: var(--text-sm);
font-weight: 500;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
transition: background var(--transition);
}
.staff-intake-signout {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.35);
cursor: pointer;
font-family: inherit;
}
.staff-intake-nav a:hover,
.staff-intake-mobile-nav a:hover,
.staff-intake-signout:hover {
background: rgba(255, 255, 255, 0.12);
}
.staff-intake-nav a.is-active,
.staff-intake-mobile-nav a.is-active {
background: rgba(255, 255, 255, 0.18);
font-weight: 600;
}
.staff-intake-menu-toggle {
display: none;
margin-left: auto;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.25);
color: var(--white);
border-radius: var(--radius-md);
padding: var(--space-2) var(--space-3);
font-size: var(--text-sm);
font-weight: 600;
cursor: pointer;
}
.staff-intake-mobile-nav {
display: flex;
flex-direction: column;
padding: var(--space-2) var(--space-4) var(--space-4);
gap: var(--space-1);
}
.staff-intake-mobile-nav[hidden] {
display: none !important;
}
.staff-intake-trust {
background: var(--navy-dark);
color: rgba(255, 255, 255, 0.92);
font-size: var(--text-sm);
line-height: 1.55;
padding: var(--space-3) var(--space-4);
text-align: center;
max-width: 100%;
}
.staff-intake-trust strong {
color: var(--white);
}
.staff-intake-footer {
background: var(--navy-dark);
color: rgba(255, 255, 255, 0.78);
font-size: var(--text-sm);
padding: var(--space-8) var(--space-4);
margin-top: var(--space-8);
}
.staff-intake-footer-inner {
max-width: var(--max-width);
margin: 0 auto;
text-align: center;
line-height: 1.6;
}
.staff-intake-footer a {
color: rgba(255, 255, 255, 0.95);
}
.staff-intake-footer-contact {
margin-top: var(--space-2);
}
.staff-intake-page .intake-shell {
max-width: none;
margin: 0;
padding: 0;
}
body.staff-intake-page .staff-intake-shell-wrap {
max-width: 1280px;
margin: 0 auto;
padding: 1.25rem 1rem 2rem;
}
body.staff-intake-page .staff-intake-main > main.section {
padding: 0;
background: transparent;
}
body.staff-intake-page .staff-intake-top h1 {
font-size: 1.25rem;
}
body.staff-intake-page .staff-intake-trust {
margin-bottom: 1rem;
}
body.staff-intake-page .staff-sidebar a.is-active {
background: var(--blue-light);
font-weight: 700;
}
.staff-intake-page .intake-shell--wide {
max-width: none;
}
.staff-intake-page .intake-page-header {
margin-bottom: var(--space-6);
}
.staff-intake-page .intake-page-header h1 {
font-size: var(--text-2xl);
color: var(--navy);
margin: 0 0 var(--space-2);
line-height: 1.25;
}
.staff-intake-page .intake-page-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
align-items: center;
}
.staff-intake-page .intake-section {
margin-bottom: var(--space-6);
scroll-margin-top: 6rem;
}
.staff-intake-page .intake-section h2 {
font-size: var(--text-lg);
color: var(--navy);
margin: 0 0 var(--space-3);
font-weight: 700;
}
.staff-intake-page .intake-section h3.portal-section-title {
font-size: var(--text-base);
color: var(--navy-light);
margin: var(--space-4) 0 var(--space-2);
}
.staff-intake-page .repeat-block {
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-4);
margin-bottom: var(--space-3);
background: var(--surface);
}
.staff-intake-page .form-card {
padding: var(--space-6);
}
@media (min-width: 768px) {
.staff-intake-page .form-card {
padding: var(--space-8);
}
}
/* Section jump nav */
.intake-section-nav {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-6);
box-shadow: var(--shadow-sm);
}
.intake-section-nav-label {
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary);
margin: 0 0 var(--space-2);
}
.intake-section-nav-list {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin: 0;
padding: 0;
}
.intake-section-nav-list a {
display: inline-block;
font-size: var(--text-sm);
color: var(--navy);
background: var(--blue-tint);
border: 1px solid var(--blue-light);
border-radius: var(--radius-full);
padding: var(--space-1) var(--space-3);
text-decoration: none;
transition: background var(--transition), border-color var(--transition);
}
.intake-section-nav-list a:hover {
background: var(--blue-light);
border-color: var(--blue);
}
@media (min-width: 900px) {
.intake-section-nav {
position: sticky;
top: var(--space-2);
z-index: 5;
}
}
/* Pathway picker */
.local-demo-banner {
background: var(--blue-tint);
border: 1px solid var(--blue-light);
border-left: 4px solid var(--blue);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-6);
font-size: var(--text-sm);
color: var(--text-primary);
}
.pathway-grid {
display: grid;
gap: var(--space-4);
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.pathway-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-5);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: var(--space-3);
transition: box-shadow var(--transition), border-color var(--transition);
}
.pathway-card:hover {
border-color: var(--border-dark);
box-shadow: var(--shadow-md);
}
.pathway-card h3 {
margin: 0;
color: var(--navy);
font-size: var(--text-lg);
}
.pathway-card p {
flex: 1;
font-size: var(--text-sm);
color: var(--text-secondary);
margin: 0;
}
/* Mandatory program status banners — always visible, polished */
.intake-program-banner,
.paused-banner,
.eoi-banner,
.rcip-disclaimer {
border-radius: var(--radius-lg);
padding: var(--space-4) var(--space-5);
margin-bottom: var(--space-6);
line-height: 1.55;
box-shadow: var(--shadow-sm);
}
.intake-program-banner strong,
.paused-banner strong,
.eoi-banner strong {
display: block;
margin-bottom: var(--space-2);
font-size: var(--text-base);
}
.intake-program-banner--critical,
.paused-banner {
background: #FEF7ED;
border: 1px solid #F5D0A9;
border-left: 5px solid var(--amber);
color: var(--navy);
}
.intake-program-banner--critical strong,
.paused-banner strong {
color: #9A3412;
}
.intake-program-banner--notice,
.eoi-banner {
background: var(--blue-tint);
border: 1px solid var(--blue-light);
border-left: 5px solid var(--blue);
color: var(--navy);
}
.intake-program-banner--notice strong,
.eoi-banner strong {
color: var(--navy);
}
/* Staff screening verdict — calm status, not alert boxes */
.intake-verdict,
.cec-verdict,
.fsw-verdict,
.fst-verdict,
.hcw-verdict,
.owp-verdict {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-weight: 600;
font-size: var(--text-base);
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-lg);
margin-bottom: var(--space-4);
border: 1px solid transparent;
line-height: 1.45;
}
.intake-verdict::before,
.cec-verdict::before,
.fsw-verdict::before,
.fst-verdict::before,
.hcw-verdict::before,
.owp-verdict::before {
flex-shrink: 0;
font-size: var(--text-lg);
}
.intake-verdict--meets,
.cec-verdict--meets,
.fst-verdict--meets,
.hcw-verdict--meets,
.owp-verdict--meets,
.fsw-verdict--meets {
background: var(--green-light);
border-color: #86EFAC;
color: #14532D;
}
.intake-verdict--meets::before,
.cec-verdict--meets::before,
.fst-verdict--meets::before,
.hcw-verdict--meets::before,
.owp-verdict--meets::before,
.fsw-verdict--meets::before {
content: "✓";
}
.intake-verdict--gap,
.cec-verdict--gap,
.fst-verdict--gap,
.hcw-verdict--gap,
.owp-verdict--gap,
.cec-verdict--possible,
.fsw-verdict--below {
background: var(--amber-light);
border-color: #FCD34D;
color: #78350F;
}
.intake-verdict--gap::before,
.cec-verdict--gap::before,
.fst-verdict--gap::before,
.hcw-verdict--gap::before,
.owp-verdict--gap::before,
.cec-verdict--possible::before,
.fsw-verdict--below::before {
content: "!";
}
.cec-verdict--gap {
background: var(--amber-light);
border-color: #FCD34D;
color: #78350F;
}
.intake-warnings,
#cec-warnings,
#fsw-warnings,
#fst-warnings,
#hcw-warnings,
#owp-warnings {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5) var(--space-4) var(--space-8);
margin-bottom: var(--space-6);
color: var(--text-secondary);
font-size: var(--text-sm);
}
.intake-warnings li,
#cec-warnings li,
#fsw-warnings li,
#fst-warnings li,
#hcw-warnings li,
#owp-warnings li {
margin-bottom: var(--space-2);
}
.attorney-flag {
background: var(--amber-light);
border: 1px solid #FCD34D;
border-left: 4px solid var(--amber);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-4);
font-size: var(--text-sm);
color: #78350F;
}
.intake-consent-notice {
border-left: 4px solid var(--navy);
margin-bottom: var(--space-6);
}
.clb-display {
font-size: var(--text-sm);
color: var(--text-secondary);
margin-top: var(--space-2);
padding: var(--space-2) var(--space-3);
background: var(--surface-2);
border-radius: var(--radius-md);
}
.fsw-score-panel {
background: var(--white);
border: 1px solid var(--border);
border-left: 4px solid var(--navy);
border-radius: var(--radius-lg);
padding: var(--space-5);
margin-bottom: var(--space-6);
box-shadow: var(--shadow-sm);
}
.fsw-score-total {
font-size: var(--text-3xl);
font-weight: 800;
color: var(--navy);
line-height: 1.1;
}
.fsw-score-panel table {
width: 100%;
font-size: var(--text-sm);
margin-top: var(--space-3);
border-collapse: collapse;
}
.fsw-score-panel td {
padding: var(--space-2) 0;
border-bottom: 1px solid var(--border);
}
.cec-hours-total {
font-size: var(--text-lg);
font-weight: 700;
color: var(--navy);
}
.job-situation-desc {
font-size: var(--text-sm);
color: var(--text-secondary);
margin: var(--space-2) 0 var(--space-3);
}
.staff-intake-page .form-group:has([required]) > .form-label::after,
.staff-intake-page .form-label[for]:has(+ [required])::after {
content: " *";
color: var(--red);
font-weight: 700;
}
.staff-intake-page .form-error[role="alert"]:not([hidden]),
.staff-intake-page .form-success[role="status"]:not([hidden]) {
display: block;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
margin-bottom: var(--space-4);
font-size: var(--text-sm);
font-weight: 500;
}
.staff-intake-page .form-error[role="alert"]:not([hidden]) {
background: var(--red-light);
border: 1px solid #FECACA;
color: #991B1B;
}
.staff-intake-page .form-success[role="status"]:not([hidden]) {
background: var(--green-light);
border: 1px solid #86EFAC;
color: #14532D;
}
.staff-clients-toolbar {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
margin-bottom: var(--space-4);
}
.staff-clients-toolbar input,
.staff-clients-toolbar select {
padding: var(--space-2) var(--space-3);
border: 1.5px solid var(--border);
border-radius: var(--radius-md);
font-size: var(--text-sm);
min-height: 2.5rem;
}
.staff-clients-table-wrap {
overflow-x: auto;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--white);
box-shadow: var(--shadow-sm);
}
.staff-clients-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}
.staff-clients-table th,
.staff-clients-table td {
padding: var(--space-3) var(--space-4);
text-align: left;
border-bottom: 1px solid var(--border);
}
.staff-clients-table th {
background: var(--surface-2);
color: var(--navy);
font-weight: 600;
}
.staff-clients-table tr:last-child td {
border-bottom: none;
}
.staff-clients-empty {
padding: var(--space-8);
text-align: center;
color: var(--text-secondary);
}
/* RCIP public info page */
.rcip-disclaimer {
background: var(--surface-2);
border: 1px solid var(--border);
border-left: 5px solid var(--amber);
color: var(--text-primary);
}
.rcip-status-banner {
background: var(--green-light);
border: 1px solid #86EFAC;
border-left: 5px solid var(--green);
color: var(--navy);
border-radius: var(--radius-lg);
padding: var(--space-4) var(--space-5);
margin-bottom: var(--space-6);
}
.rcip-status-date {
display: block;
font-size: var(--text-sm);
color: var(--text-secondary);
margin-top: var(--space-1);
}
.rcip-community-list {
list-style: none;
padding: 0;
margin: var(--space-4) 0 0;
display: grid;
gap: var(--space-3);
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.rcip-community-item {
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
background: var(--white);
transition: border-color var(--transition), box-shadow var(--transition);
}
.rcip-community-item:hover {
border-color: var(--blue);
box-shadow: var(--shadow-sm);
}
.rcip-community-item a {
font-weight: 600;
color: var(--navy);
}
.rcip-community-item .field-note {
display: block;
margin-top: var(--space-1);
font-size: var(--text-sm);
}
.rcip-process-steps {
padding-left: var(--space-6);
line-height: 1.65;
}
.rcip-process-steps li {
margin-bottom: var(--space-3);
}
.rcip-official-links a {
margin-right: var(--space-4);
}
.pathway-panel[hidden] {
display: none !important;
}
.fst-hours-total {
font-size: var(--text-lg);
font-weight: 700;
color: var(--navy);
}
.noc-flag--bad {
border-left: 4px solid var(--red);
background: var(--red-light);
border-radius: var(--radius-md);
padding: var(--space-3);
}
.noc-flag--ok {
border-left: 4px solid var(--green);
border-radius: var(--radius-md);
padding: var(--space-3);
}
#cert_body_links {
font-size: var(--text-sm);
line-height: 1.8;
}
@media (max-width: 768px) {
.staff-intake-nav {
display: none;
}
.staff-intake-menu-toggle {
display: inline-flex;
}
.staff-intake-page .intake-page-header {
flex-direction: column;
align-items: flex-start;
}
.staff-intake-page .form-row {
flex-direction: column;
}
.staff-intake-page .form-card {
padding: var(--space-4);
}
}
.form8a-table {
width: 100%;
border-collapse: collapse;
margin: 0.75rem 0 1rem;
font-size: 0.86rem;
}
.form8a-table th,
.form8a-table td {
border: 1px solid var(--border);
padding: 0.5rem 0.65rem;
text-align: left;
vertical-align: top;
}
.form8a-table th {
background: #f6f8fc;
color: var(--navy);
}
.form8a-subhead {
font-size: 1rem;
color: var(--navy);
margin: 1.25rem 0 0.5rem;
}
/* Phase 2 — public intake completeness + repeatable rows */
.ebbi-intake-completeness {
margin: 1rem 0 1.25rem;
padding: 0.85rem 1rem;
border: 1px solid var(--border, #d8dee8);
border-radius: 8px;
background: #f8fafc;
}
.ebbi-intake-completeness-head {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9rem;
color: var(--navy, #00205B);
margin-bottom: 0.45rem;
}
.ebbi-intake-completeness-bar {
height: 8px;
border-radius: 999px;
background: #e2e8f0;
overflow: hidden;
}
.ebbi-intake-completeness-bar > div {
height: 100%;
width: 0;
background: linear-gradient(90deg, #0ea5e9, #16a34a);
transition: width 0.25s ease;
}
.ebbi-intake-completeness-missing {
margin: 0.55rem 0 0;
padding-left: 1.1rem;
font-size: 0.82rem;
color: var(--text-secondary, #555);
}
.ebbi-intake-completeness-missing .ebbi-intake-complete {
list-style: none;
margin-left: -1.1rem;
color: #166534;
}
.form-card .ga-travel-history-wrap {
overflow-x: auto;
}
.form-card .ga-travel-history-table {
width: 100%;
border-collapse: collapse;
margin: 0.5rem 0;
font-size: 0.88rem;
}
.form-card .ga-travel-history-table th,
.form-card .ga-travel-history-table td {
border: 1px solid var(--border, #d8dee8);
padding: 0.35rem;
vertical-align: middle;
}
.form-card .ga-travel-history-table th {
background: #f6f8fc;
color: var(--navy, #00205B);
font-weight: 600;
}
.form-card .ga-travel-history-table .form-control {
min-width: 5.5rem;
font-size: 0.85rem;
}
.form-card .ga-travel-history-table .btn-sm {
padding: 0.15rem 0.45rem;
line-height: 1.2;
}
/* ============================================================
ELEVATOR NAVIGATION — /start.html floor tiles + building nav
============================================================ */
:root {
--floor-ca-accent: var(--navy);
--floor-ca-bg: #EEF3FB;
--floor-ca-line: var(--navy-light);
--floor-ph-accent: var(--ph-blue);
--floor-ph-bg: #FEF2F2;
--floor-ph-line: var(--ph-red);
--floor-law-accent: var(--navy-dark);
--floor-law-bg: #F0F4FA;
--floor-law-line: var(--gold);
--floor-client-accent: var(--blue);
--floor-client-bg: var(--blue-tint);
--floor-client-line: var(--blue);
--floor-about-accent: var(--text-secondary);
--floor-about-bg: var(--surface);
--floor-about-line: var(--border-dark);
}
body.elevator-start-page .ebbi-intro-strip {
display: none;
}
.elevator-hero {
padding: var(--space-10) 0 var(--space-6);
background: linear-gradient(150deg, var(--navy-dark) 0%, var(--navy) 55%, #1e4a8a 100%);
color: var(--white);
text-align: center;
}
.elevator-hero .eyebrow {
color: rgba(255, 255, 255, 0.82);
}
.elevator-hero h1 {
font-family: var(--font-serif);
font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
font-weight: 700;
color: var(--white);
margin: var(--space-3) 0 var(--space-2);
}
.elevator-hero .lead {
max-width: 36rem;
margin: 0 auto;
color: rgba(255, 255, 255, 0.9);
font-size: var(--text-lg);
}
.elevator-search-section {
padding: 0 0 var(--space-5);
background: var(--white);
}
.elevator-search-input {
display: block;
width: 100%;
max-width: 32rem;
margin: 0 auto;
padding: 0.85rem 1rem;
font: inherit;
font-size: var(--text-base);
color: var(--navy);
background: var(--white);
border: 1px solid var(--border-dark);
border-radius: var(--radius-lg);
box-shadow: 0 1px 2px rgba(26, 60, 107, 0.06);
}
.elevator-search-input:focus {
outline: 2px solid var(--blue);
outline-offset: 2px;
border-color: var(--blue);
}
.elevator-search-hint {
max-width: 32rem;
margin: var(--space-3) auto 0;
text-align: center;
}
.elevator-tile.is-search-hidden,
.elevator-tile[hidden],
.service-card.is-search-hidden,
.service-card[hidden] {
display: none !important;
}
.hub-search-section {
padding: var(--space-4) 0;
border-bottom: 1px solid var(--border);
background: var(--surface);
}
.elevator-section {
padding: var(--space-8) 0 var(--space-10);
}
.elevator-grid-top {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-6);
margin-bottom: var(--space-6);
}
.elevator-grid-bottom {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-6);
max-width: 56rem;
margin: 0 auto;
}
.elevator-tile {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-3);
min-height: 200px;
padding: var(--space-6);
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
border-top-width: 3px;
text-decoration: none;
color: inherit;
transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
overflow: hidden;
}
.elevator-tile:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.elevator-tile:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 2px;
}
.elevator-tile-code {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-hint);
}
.elevator-tile-icon {
width: 52px;
height: 52px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.elevator-tile-icon svg {
width: 26px;
height: 26px;
stroke: currentColor;
fill: none;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.elevator-tile h2 {
font-family: var(--font-serif);
font-size: var(--text-xl);
font-weight: 600;
color: var(--navy);
margin: 0;
line-height: 1.25;
}
.elevator-tile-tagline {
margin: 0;
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: 1.45;
flex: 1;
}
.elevator-tile-arrow {
font-size: var(--text-sm);
font-weight: 600;
color: var(--blue);
}
.elevator-tile[data-floor="ca"] {
border-top-color: var(--floor-ca-line);
}
.elevator-tile[data-floor="ca"]:hover {
border-color: var(--floor-ca-line);
}
.elevator-tile[data-floor="ca"] .elevator-tile-icon {
background: var(--floor-ca-bg);
color: var(--floor-ca-accent);
}
.elevator-tile[data-floor="ca"]::after {
content: "F1";
position: absolute;
right: var(--space-4);
bottom: var(--space-3);
font-size: 3.5rem;
font-weight: 800;
line-height: 1;
color: var(--floor-ca-accent);
opacity: 0.04;
pointer-events: none;
}
.elevator-tile[data-floor="ph"] {
border-top-color: var(--floor-ph-line);
}
.elevator-tile[data-floor="ph"]:hover {
border-color: var(--floor-ph-line);
}
.elevator-tile[data-floor="ph"] .elevator-tile-icon {
background: var(--floor-ph-bg);
color: var(--floor-ph-accent);
}
.elevator-tile[data-floor="ph"]::after {
content: "F2";
position: absolute;
right: var(--space-4);
bottom: var(--space-3);
font-size: 3.5rem;
font-weight: 800;
line-height: 1;
color: var(--floor-ph-accent);
opacity: 0.04;
pointer-events: none;
}
.elevator-tile[data-floor="law"] {
border-top-color: var(--floor-law-line);
}
.elevator-tile[data-floor="law"]:hover {
border-color: var(--floor-law-line);
}
.elevator-tile[data-floor="law"] .elevator-tile-icon {
background: var(--floor-law-bg);
color: var(--floor-law-accent);
}
.elevator-tile[data-floor="law"]::after {
content: "F3";
position: absolute;
right: var(--space-4);
bottom: var(--space-3);
font-size: 3.5rem;
font-weight: 800;
line-height: 1;
color: var(--floor-law-accent);
opacity: 0.04;
pointer-events: none;
}
.elevator-tile[data-floor="client"] {
border-top-color: var(--floor-client-line);
}
.elevator-tile[data-floor="client"]:hover {
border-color: var(--floor-client-line);
}
.elevator-tile[data-floor="client"] .elevator-tile-icon {
background: var(--floor-client-bg);
color: var(--floor-client-accent);
}
.elevator-tile[data-floor="client"]::after {
content: "F4";
position: absolute;
right: var(--space-4);
bottom: var(--space-3);
font-size: 3.5rem;
font-weight: 800;
line-height: 1;
color: var(--floor-client-accent);
opacity: 0.04;
pointer-events: none;
}
.elevator-tile[data-floor="about"] {
border-top-color: var(--floor-about-line);
}
.elevator-tile[data-floor="about"]:hover {
border-color: var(--floor-about-accent);
}
.elevator-tile[data-floor="about"] .elevator-tile-icon {
background: var(--floor-about-bg);
color: var(--floor-about-accent);
}
.elevator-tile[data-floor="about"]::after {
content: "F5";
position: absolute;
right: var(--space-4);
bottom: var(--space-3);
font-size: 3.5rem;
font-weight: 800;
line-height: 1;
color: var(--floor-about-accent);
opacity: 0.04;
pointer-events: none;
}
/* Admin elevator (P3) */
body.admin-page .admin-nav-links--slim {
max-width: 100%;
}
body.admin-page .admin-sidebar--elevator {
padding: 0.5rem;
}
body.admin-page .admin-sidebar-home {
display: flex;
align-items: center;
gap: 0.45rem;
padding: 0.55rem 0.75rem;
margin-bottom: 0.5rem;
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: 700;
color: var(--navy);
text-decoration: none;
background: var(--surface);
}
body.admin-page .admin-sidebar-home:hover {
background: var(--blue-light);
}
body.admin-page .admin-sidebar-home.is-active {
background: var(--blue-light);
}
body.admin-page .admin-floor {
margin-bottom: 0.35rem;
}
body.admin-page .admin-floor-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
padding: 0.55rem 0.65rem;
border: 1px solid transparent;
border-radius: var(--radius-md);
background: transparent;
font: inherit;
font-weight: 700;
font-size: var(--text-sm);
color: var(--navy);
text-align: left;
cursor: pointer;
}
body.admin-page .admin-floor-toggle:hover {
background: var(--surface);
}
body.admin-page .admin-floor.is-open .admin-floor-toggle {
background: var(--surface);
border-color: var(--border);
}
body.admin-page .admin-floor-code {
flex-shrink: 0;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-secondary);
min-width: 1.35rem;
}
body.admin-page .admin-floor-label {
flex: 1;
line-height: 1.25;
}
body.admin-page .admin-floor-panel {
padding: 0.15rem 0 0.35rem 0.35rem;
}
body.admin-page .admin-floor-panel a {
padding-left: 1.85rem;
font-weight: 600;
}
body.admin-page .admin-floor[data-admin-floor="clients"] .admin-floor-code { color: #2563EB; }
body.admin-page .admin-floor[data-admin-floor="documents"] .admin-floor-code { color: #1A3C6B; }
body.admin-page .admin-floor[data-admin-floor="money"] .admin-floor-code { color: #16A34A; }
body.admin-page .admin-floor[data-admin-floor="marketing"] .admin-floor-code { color: #B8860B; }
body.admin-page .admin-floor[data-admin-floor="system"] .admin-floor-code { color: #475569; }
body.admin-page .admin-nav-external {
margin-top: 0.5rem;
padding-top: 0.55rem;
border-top: 1px solid var(--border);
}
body.admin-page .admin-elevator-section {
margin-bottom: 1.5rem;
}
body.admin-page .admin-elevator-lead {
font-size: var(--text-sm);
color: var(--text-secondary);
margin: 0 0 1rem;
line-height: 1.55;
}
body.admin-page .admin-elevator-grid {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
body.admin-page .admin-elevator-tile {
min-height: 190px;
}
body.admin-page .elevator-tile-meta {
display: block;
font-size: 0.72rem;
color: var(--text-secondary);
margin-top: 0.15rem;
line-height: 1.35;
}
.elevator-tile[data-floor="a1"] {
border-color: rgba(37, 99, 235, 0.25);
}
.elevator-tile[data-floor="a1"]:hover { border-color: #2563EB; }
.elevator-tile[data-floor="a1"] .elevator-tile-icon { background: #EFF6FF; color: #2563EB; }
.elevator-tile[data-floor="a1"]::after {
content: "A1"; position: absolute; right: var(--space-4); bottom: var(--space-3);
font-size: 3.5rem; font-weight: 800; line-height: 1; color: #2563EB; opacity: 0.05; pointer-events: none;
}
.elevator-tile[data-floor="a2"] {
border-color: rgba(26, 60, 107, 0.22);
}
.elevator-tile[data-floor="a2"]:hover { border-color: #1A3C6B; }
.elevator-tile[data-floor="a2"] .elevator-tile-icon { background: #EEF3FB; color: #1A3C6B; }
.elevator-tile[data-floor="a2"]::after {
content: "A2"; position: absolute; right: var(--space-4); bottom: var(--space-3);
font-size: 3.5rem; font-weight: 800; line-height: 1; color: #1A3C6B; opacity: 0.05; pointer-events: none;
}
.elevator-tile[data-floor="a3"] {
border-color: rgba(22, 163, 74, 0.22);
}
.elevator-tile[data-floor="a3"]:hover { border-color: #16A34A; }
.elevator-tile[data-floor="a3"] .elevator-tile-icon { background: #DCFCE7; color: #16A34A; }
.elevator-tile[data-floor="a3"]::after {
content: "A3"; position: absolute; right: var(--space-4); bottom: var(--space-3);
font-size: 3.5rem; font-weight: 800; line-height: 1; color: #16A34A; opacity: 0.05; pointer-events: none;
}
.elevator-tile[data-floor="a4"] {
border-color: rgba(184, 134, 11, 0.25);
}
.elevator-tile[data-floor="a4"]:hover { border-color: #B8860B; }
.elevator-tile[data-floor="a4"] .elevator-tile-icon { background: #FEF3C7; color: #B8860B; }
.elevator-tile[data-floor="a4"]::after {
content: "A4"; position: absolute; right: var(--space-4); bottom: var(--space-3);
font-size: 3.5rem; font-weight: 800; line-height: 1; color: #B8860B; opacity: 0.05; pointer-events: none;
}
.elevator-tile[data-floor="a5"] {
border-color: rgba(71, 85, 105, 0.22);
}
.elevator-tile[data-floor="a5"]:hover { border-color: #475569; }
.elevator-tile[data-floor="a5"] .elevator-tile-icon { background: #F1F5F9; color: #475569; }
.elevator-tile[data-floor="a5"]::after {
content: "A5"; position: absolute; right: var(--space-4); bottom: var(--space-3);
font-size: 3.5rem; font-weight: 800; line-height: 1; color: #475569; opacity: 0.05; pointer-events: none;
}
body.admin-page .settings-area-back {
grid-column: 1 / -1;
margin: 0 0 0.35rem;
font-size: var(--text-sm);
}
body.admin-page .settings-area-back a {
color: var(--navy);
font-weight: 600;
text-decoration: none;
}
body.admin-page .settings-area-back a:hover {
text-decoration: underline;
}
body.admin-page .settings-area-title {
grid-column: 1 / -1;
margin: 0 0 0.5rem;
font-size: 0.82rem;
font-weight: 700;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.06em;
}
body.admin-page .settings-hub-grid {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.settings-area-tile[data-setup-area="ircc"] { border-color: rgba(26, 60, 107, 0.22); }
.settings-area-tile[data-setup-area="ircc"]:hover { border-color: #1A3C6B; }
.settings-area-tile[data-setup-area="ircc"] .elevator-tile-icon { background: #EEF3FB; color: #1A3C6B; }
.settings-area-tile[data-setup-area="email"] { border-color: rgba(37, 99, 235, 0.22); }
.settings-area-tile[data-setup-area="email"]:hover { border-color: #2563EB; }
.settings-area-tile[data-setup-area="email"] .elevator-tile-icon { background: #EFF6FF; color: #2563EB; }
.settings-area-tile[data-setup-area="ai"] { border-color: rgba(124, 58, 237, 0.22); }
.settings-area-tile[data-setup-area="ai"]:hover { border-color: #7C3AED; }
.settings-area-tile[data-setup-area="ai"] .elevator-tile-icon { background: #F3E8FF; color: #7C3AED; }
.settings-area-tile[data-setup-area="team"] { border-color: rgba(71, 85, 105, 0.22); }
.settings-area-tile[data-setup-area="team"]:hover { border-color: #475569; }
.settings-area-tile[data-setup-area="team"] .elevator-tile-icon { background: #F1F5F9; color: #475569; }
body.admin-page .settings-inner {
display: grid;
grid-template-columns: 220px 1fr;
gap: 1.25rem;
align-items: start;
}
body.admin-page .settings-nav a[hidden] {
display: none !important;
}
.elevator-cta-strip {
padding: var(--space-6) 0;
background: var(--surface);
border-top: 1px solid var(--border);
text-align: center;
}
.elevator-cta-strip .btn-group {
justify-content: center;
}
.elevator-nav {
padding: var(--space-4) 0;
background: var(--white);
border-bottom: 1px solid var(--border);
}
.elevator-nav--footer {
border-bottom: none;
border-top: 1px solid var(--border);
background: var(--surface);
}
.elevator-nav-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
}
.elevator-nav-spacer {
flex: 1;
min-width: var(--space-2);
}
.elevator-nav-btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
font-size: var(--text-sm);
font-weight: 600;
color: var(--navy);
background: var(--white);
border: 1px solid var(--border-dark);
border-radius: var(--radius-md);
text-decoration: none;
cursor: pointer;
font-family: inherit;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.elevator-nav-btn:hover {
border-color: var(--blue);
color: var(--blue);
background: var(--blue-tint);
}
.elevator-nav-btn:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 2px;
}
.elevator-nav-btn-primary {
background: var(--blue);
border-color: var(--blue);
color: var(--white);
}
.elevator-nav-btn-primary:hover {
background: var(--blue-hover);
border-color: var(--blue-hover);
color: var(--white);
}
.elevator-nav-btn-next {
margin-left: auto;
}
.breadcrumb-inner .breadcrumb-floor-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 6px;
vertical-align: middle;
}
.breadcrumb-floor-dot[data-floor="ca"] { background: var(--floor-ca-line); }
.breadcrumb-floor-dot[data-floor="ph"] { background: var(--floor-ph-line); }
.breadcrumb-floor-dot[data-floor="law"] { background: var(--floor-law-line); }
.breadcrumb-floor-dot[data-floor="client"] { background: var(--floor-client-line); }
.breadcrumb-floor-dot[data-floor="about"] { background: var(--floor-about-accent); }
@media (max-width: 900px) {
.elevator-grid-top {
grid-template-columns: 1fr;
}
.elevator-grid-bottom {
grid-template-columns: 1fr;
max-width: none;
}
}
@media (max-width: 640px) {
.elevator-nav-inner {
flex-direction: column;
align-items: stretch;
}
.elevator-nav-btn-next {
margin-left: 0;
}
.elevator-nav-spacer {
display: none;
}
body.admin-page .admin-elevator-grid,
body.admin-page .settings-hub-grid {
grid-template-columns: 1fr;
}
body.portal-page .portal-elevator-grid {
grid-template-columns: 1fr;
}
.elevator-tile {
min-height: 0;
padding: var(--space-5);
}
.elevator-search-input {
font-size: 16px;
}
}
.hub-page .hub-panel {
padding: var(--space-6) 0 var(--space-8);
}
.hub-hero {
padding: var(--space-8) 0 var(--space-6);
background: var(--white);
border-bottom: 1px solid var(--border);
}
.hub-hero[data-floor="ca"] {
border-top: 3px solid var(--floor-ca-line);
}
.hub-hero[data-floor="ph"] {
border-top: 3px solid var(--floor-ph-line);
}
.hub-hero[data-floor="law"] {
border-top: 3px solid var(--floor-law-line);
}
.hub-hero-code {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-hint);
margin: 0 0 var(--space-2);
}
.hub-hero h1 {
font-family: var(--font-serif);
font-size: var(--text-3xl);
color: var(--navy);
margin: 0 0 var(--space-2);
}
.hub-hero-lead {
font-size: var(--text-lg);
color: var(--text-secondary);
max-width: 40rem;
margin: 0 auto;
line-height: 1.5;
}
.hub-hero-meta {
margin: var(--space-4) 0 0;
font-size: var(--text-sm);
}
.hub-floor-links {
padding: var(--space-5) 0 var(--space-8);
background: var(--surface);
border-top: 1px solid var(--border);
}
.hub-floor-links-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
}
.hub-floor-links-label {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-secondary);
}
.hub-floor-link {
display: inline-flex;
padding: var(--space-2) var(--space-3);
font-size: var(--text-sm);
font-weight: 600;
color: var(--navy);
background: var(--white);
border: 1px solid var(--border-dark);
border-radius: var(--radius-md);
text-decoration: none;
}
.hub-floor-link:hover {
border-color: var(--blue);
color: var(--blue);
}
.hub-floor-link[aria-current="page"] {
background: var(--blue-tint);
border-color: var(--blue);
color: var(--blue);
}
.hub-page .elevator-tile h2 {
font-family: var(--font-serif);
font-size: var(--text-xl);
color: var(--navy);
margin: 0;
}
@media (max-width: 640px) {
.hub-hero h1 {
font-size: var(--text-2xl);
}
}
/* Intake router (P7A) */
body.intake-page.intake-router-active #intake-form-view {
display: none !important;
}
body.intake-page.intake-form-active #intake-router-view {
display: none !important;
}
.intake-router-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 52rem;
margin: 0 auto var(--space-2);
}
.intake-router-foot {
text-align: center;
max-width: 36rem;
margin: var(--space-6) auto 0;
line-height: 1.6;
}
.intake-router-foot a {
font-weight: 600;
}
@media (max-width: 640px) {
.intake-router-grid {
grid-template-columns: 1fr;
}
}
/* Form traffic chrome (P7C) */
body.form-traffic-page .form-traffic-hero {
padding: var(--space-8) 0 var(--space-5);
border-bottom: 1px solid var(--border);
}
body.form-traffic-page .form-traffic-hero .services-hero-grid {
grid-template-columns: 1fr;
}
body.form-traffic-page .form-traffic-hero .services-hero-visual {
display: none;
}
body.form-traffic-page .form-traffic-hero .services-hero-copy {
max-width: 42rem;
}
body.form-traffic-page .form-traffic-hero h1 {
font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
}
body.form-traffic-page .form-traffic-nav {
border-bottom: 1px solid var(--border);
}
/* Content traffic chrome (P8C immigration info pages) */
body.content-traffic-page .content-traffic-hero {
padding: var(--space-8) 0 var(--space-5);
border-bottom: 1px solid var(--border);
}
body.content-traffic-page .content-traffic-hero .services-hero-grid {
grid-template-columns: 1fr;
}
body.content-traffic-page .content-traffic-hero .services-hero-visual {
display: none;
}
body.content-traffic-page .content-traffic-hero .services-hero-copy {
max-width: 42rem;
}
body.content-traffic-page .content-traffic-hero h1 {
font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
}
body.content-traffic-page .content-traffic-nav {
border-bottom: 1px solid var(--border);
}
/* Services page redirect (P8E) */
.services-directory-banner {
padding: var(--space-6) 0;
background: linear-gradient(180deg, rgba(42, 82, 152, 0.08) 0%, var(--white) 100%);
border-bottom: 1px solid var(--border);
}
.services-directory-banner-inner {
max-width: 40rem;
margin: 0 auto;
text-align: center;
}
.services-directory-banner-text {
margin: 0 0 var(--space-4);
line-height: 1.6;
color: var(--text-secondary);
}
.services-redirect-hero {
padding-bottom: var(--space-4);
}
.services-hub-shortcuts {
padding: var(--space-8) 0 var(--space-10);
}
.services-hub-link-list {
list-style: none;
margin: var(--space-5) auto 0;
padding: 0;
max-width: 28rem;
display: grid;
gap: var(--space-3);
}
.services-hub-link-list a {
display: flex;
align-items: center;
gap: var(--space-2);
padding: 0.75rem 1rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
font-weight: 600;
color: var(--navy);
background: var(--white);
text-decoration: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.services-hub-link-list a:hover {
border-color: var(--blue);
box-shadow: 0 2px 8px rgba(26, 60, 107, 0.08);
}
.services-redirect-foot {
margin-top: var(--space-6);
margin-bottom: 0;
}
.services-redirect-foot code {
font-size: 0.9em;
}
body.client-floor-page .client-floor-hero {
border-top: 3px solid var(--floor-client-line);
}
body.client-floor-page .client-floor-grid-top,
body.client-floor-page .client-floor-grid-bottom {
max-width: 52rem;
margin-left: auto;
margin-right: auto;
}
body.client-floor-page .client-floor-about-text {
line-height: 1.65;
color: var(--text-secondary);
margin-bottom: var(--space-4);
}
body.client-floor-page .client-floor-about-note {
text-align: center;
margin-bottom: 0;
}
body.client-floor-page .client-floor-service-links {
border-top: none;
padding-top: var(--space-4);
}
.elevator-tile[data-client-tool="portal"] {
border-color: rgba(26, 60, 107, 0.22);
}
.elevator-tile[data-client-tool="portal"]:hover {
border-color: #1A3C6B;
}
.elevator-tile[data-client-tool="portal"] .elevator-tile-icon {
background: #EEF3FB;
color: #1A3C6B;
}
body.home-marketing-page .home-marketing-nav {
border-bottom: 1px solid var(--border);
}
body.home-marketing-page .home-floor-picker {
padding-top: var(--space-6);
}
body.home-marketing-page .home-hub-links {
justify-content: center;
}
body.home-marketing-page .home-hub-tiles {
max-width: 52rem;
margin: 0 auto;
}
body.home-marketing-page .home-floor-foot {
margin-top: var(--space-6);
margin-bottom: 0;
}
body.home-marketing-page .home-floor-foot a {
font-weight: 600;
}
@media (max-width: 640px) {
body.home-marketing-page .home-hub-tiles {
grid-template-columns: 1fr;
}
}
/* ============================================================
END OF ebbi.css
============================================================ */