/* ============================================================================ Safe Hands Disability - Design System v2 (redesign 2026-05) See memory/project-redesign-2026-05.md for full design DNA + phase plan. Mobile-first, warm + trustworthy, NOT slick SaaS. ============================================================================ */ /* Load Cabinet Grotesk (display) + Inter (body). Preconnected in by pages that opt-in. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); @import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@700,800&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; /* Remove blue tap flash on iOS */ } html { scroll-behavior: smooth; scroll-padding-top: 72px; /* Offset for sticky header so anchor links aren't hidden */ -webkit-text-size-adjust: 100%; /* Prevent iOS from auto-scaling text on orientation change */ text-size-adjust: 100%; } @media (max-width: 768px) { html { scroll-padding-top: 60px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } :root { /* === Color palette (warm, trustworthy, accessible — locked in design DNA) === */ --ink: #1a2238; /* Primary text - warm dark slate */ --ink-muted: #5b6478; /* Secondary text - warm grey */ --ink-subtle: #8b94a8; /* Tertiary text - lighter warm grey */ --surface: #fafaf5; /* Page background - warm off-white */ --surface-alt: #f3f0e8; /* Subtle alt section background - warm cream */ --surface-card:#ffffff; /* Card / elevated surface - clean white */ --border: #e6e1d4; /* Default border - warm cream */ --border-strong: #d4cdba; /* Stronger border for inputs */ --brand: #1a5f9e; /* Brand blue - warmer/softer than original #0052A3 */ --brand-deep: #103e6e; /* Brand blue darker - for hover/active */ --brand-soft: #e8eff7; /* Brand blue background tint */ --accent: #c9784a; /* Single accent - warm terracotta, used sparingly */ --accent-deep: #a55c34; /* Accent for hover/active */ --accent-soft: #f7ede3; /* Accent background tint */ --success: #2e7d4f; /* Green - only for success states, not brand */ --warning: #b27110; /* Amber - for callouts */ --danger: #b3261e; /* Red - for errors only */ /* === Legacy aliases (so existing pages don't break during the redesign) === */ --primary: var(--brand); --secondary: var(--success); --text-dark: var(--ink); --text-light: var(--ink-muted); --bg-light: var(--surface); --bg-white: var(--surface-card); /* === Shadow scale - tinted with brand hue so they don't feel generic black === */ --shadow-xs: 0 1px 2px rgba(26, 34, 56, 0.04); --shadow-sm: 0 2px 6px rgba(26, 34, 56, 0.06); --shadow: 0 8px 24px rgba(26, 34, 56, 0.08); --shadow-lg: 0 16px 48px rgba(26, 34, 56, 0.12); --shadow-xl: 0 24px 64px rgba(26, 34, 56, 0.15); /* === Spacing scale (4px base, modular) === */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* === Type scale (fluid clamp() so it scales naturally) === */ --display-1: clamp(2.4rem, 6vw, 4rem); /* Hero headline */ --display-2: clamp(2rem, 5vw, 3rem); /* Section heading */ --display-3: clamp(1.6rem, 4vw, 2.25rem); /* Subsection heading */ --heading: clamp(1.2rem, 2.6vw, 1.45rem); /* Card heading */ --body-lg: clamp(1.05rem, 2vw, 1.18rem); /* Lead paragraph */ --body: 1rem; /* Default body (16px - prevents iOS zoom) */ --body-sm: 0.92rem; /* Helper text */ --label: 0.78rem; /* Uppercase labels */ /* === Border radius scale === */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 999px; /* === Motion (respect prefers-reduced-motion) === */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration: 220ms; --duration-slow: 380ms; /* === Container === */ --container-max: 1200px; --container-pad: 1.25rem; /* === Font stacks === */ --font-display: 'Cabinet Grotesk', 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif; /* === Nav-specific (keep existing dark mode override pattern) === */ --nav-bg: var(--surface-card); --nav-text: var(--ink); --nav-dropdown-bg: var(--surface-card); --nav-dropdown-sub-bg: var(--surface); --nav-dropdown-border: var(--border); --nav-dropdown-text: var(--ink); --nav-border-bottom: var(--border); } @media (min-width: 768px) { :root { --container-pad: 2rem; } } body { font-family: var(--font-body); font-size: var(--body); font-weight: 400; font-feature-settings: 'cv11', 'ss01'; /* Inter alternative glyphs - friendlier 'a' and 'l' */ color: var(--ink); line-height: 1.6; background: var(--surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Display typography - Cabinet Grotesk with character */ h1, h2, h3, h4, h5, h6, .display { font-family: var(--font-display); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; } h1, .display-1 { font-size: var(--display-1); font-weight: 800; letter-spacing: -0.025em; } h2, .display-2 { font-size: var(--display-2); } h3, .display-3 { font-size: var(--display-3); } p { text-wrap: pretty; } /* Tabular numbers for prices, stats, dates */ .tabular, time, .price, .stat { font-variant-numeric: tabular-nums; } /* Default link style */ a { color: var(--brand); text-decoration: none; transition: color var(--duration) var(--ease-out); } a:hover { color: var(--brand-deep); } /* Visible focus ring for accessibility */ *:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* ============================================================================ v2 HERO - homepage (redesign 2026-05) Mobile-first stack, asymmetric on desktop, no overlay-gradient-on-stock-photo ============================================================================ */ .hero-v2 { position: relative; background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(26, 95, 158, 0.07), transparent 60%), radial-gradient(ellipse 70% 50% at 0% 100%, rgba(201, 120, 74, 0.05), transparent 55%), var(--surface); overflow: hidden; padding: var(--space-10) 0 var(--space-12); } .hero-v2::before { /* Subtle warm grain overlay - adds texture without screaming */ content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); pointer-events: none; opacity: 0.6; z-index: 0; } .hero-v2 .hero-grid { position: relative; z-index: 1; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: center; } @media (min-width: 880px) { .hero-v2 .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-16); } .hero-v2 { padding: var(--space-16) 0 var(--space-16); } } .hero-v2 .hero-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); background: var(--accent-soft); padding: 0.4rem 0.85rem; border-radius: var(--radius-full); margin-bottom: var(--space-6); } .hero-v2 .hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .hero-v2 h1.hero-headline { font-size: var(--display-1); font-weight: 800; line-height: 1.04; letter-spacing: -0.028em; color: var(--ink); margin: 0 0 var(--space-5); } .hero-v2 h1.hero-headline em { font-style: normal; color: var(--brand); /* Subtle underline that doesn't shout */ background-image: linear-gradient(180deg, transparent 78%, rgba(201, 120, 74, 0.28) 78%); background-repeat: no-repeat; background-size: 100% 100%; padding: 0 0.05em; } .hero-v2 .hero-sub { font-size: var(--body-lg); line-height: 1.55; color: var(--ink-muted); max-width: 36em; margin: 0 0 var(--space-8); text-wrap: pretty; } .hero-v2 .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-8); } .hero-v2 .btn-primary { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--ink); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 1rem; padding: 0.95rem 1.6rem; border-radius: var(--radius); border: none; text-decoration: none; transition: background var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); box-shadow: var(--shadow-sm); min-height: 48px; cursor: pointer; } .hero-v2 .btn-primary:hover { background: var(--brand-deep); color: #fff; box-shadow: var(--shadow); transform: translateY(-1px); } .hero-v2 .btn-primary:active { transform: translateY(0) scale(0.98); } .hero-v2 .btn-primary .arrow { transition: transform var(--duration) var(--ease-out); } .hero-v2 .btn-primary:hover .arrow { transform: translateX(3px); } .hero-v2 .hero-call { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-weight: 600; color: var(--ink); text-decoration: none; font-size: 1rem; transition: color var(--duration) var(--ease-out); min-height: 48px; padding: 0.5rem 0; } .hero-v2 .hero-call:hover { color: var(--brand); } .hero-v2 .hero-call .phone-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--brand-soft); color: var(--brand); border-radius: 50%; font-size: 0.85rem; } .hero-v2 .hero-trust { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border); font-size: var(--body-sm); color: var(--ink-muted); } .hero-v2 .hero-trust span { display: inline-flex; align-items: center; gap: var(--space-2); } .hero-v2 .hero-trust .check { color: var(--success); font-size: 0.85rem; } /* === Hero visual (right column on desktop, hidden or top on mobile) === */ .hero-v2 .hero-visual { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); background: linear-gradient(180deg, transparent 55%, rgba(26, 34, 56, 0.18) 100%), url('https://images.pexels.com/photos/5699487/pexels-photo-5699487.jpeg?auto=compress&cs=tinysrgb&w=900&h=1125&fit=crop&fm=webp') center/cover no-repeat; isolation: isolate; order: -1; /* On mobile, show photo above text for emotional grab */ } @media (min-width: 880px) { .hero-v2 .hero-visual { order: 0; /* Right side on desktop */ aspect-ratio: 4 / 4.5; max-height: 580px; } } /* Floating credibility card on the photo - one detail that proves we're real */ .hero-v2 .hero-badge { position: absolute; bottom: var(--space-5); left: var(--space-5); right: var(--space-5); background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; align-items: center; gap: var(--space-3); box-shadow: var(--shadow); z-index: 1; } .hero-v2 .hero-badge .badge-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } .hero-v2 .hero-badge .badge-text { font-size: var(--body-sm); line-height: 1.4; color: var(--ink); } .hero-v2 .hero-badge .badge-text strong { display: block; font-weight: 700; color: var(--ink); margin-bottom: 2px; } /* ============================================================================ v2 SECTIONS - general scaffolding (redesign 2026-05) ============================================================================ */ .section-v2 { padding: clamp(var(--space-10), 5vw, var(--space-16)) 0; position: relative; } .section-v2.surface-alt { background: var(--surface-alt); } .section-v2.surface-card { background: var(--surface-card); } .section-v2 .container-v2 { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); } .section-v2 .section-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: var(--space-4); } .section-v2 .section-eyebrow::before { content: ''; display: inline-block; width: 24px; height: 1.5px; background: var(--accent); } .section-v2 .section-heading { font-family: var(--font-display); font-size: var(--display-2); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 var(--space-5); color: var(--ink); max-width: 22ch; } .section-v2 .section-heading.center { margin-left: auto; margin-right: auto; text-align: center; } .section-v2 .section-lede { font-size: var(--body-lg); color: var(--ink-muted); line-height: 1.6; max-width: 60ch; margin: 0 0 var(--space-8); } .section-v2 .section-lede.center { margin-left: auto; margin-right: auto; text-align: center; } /* Reusable text-link with arrow */ .link-arrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-weight: 600; color: var(--brand); text-decoration: none; transition: color var(--duration) var(--ease-out), gap var(--duration) var(--ease-out); } .link-arrow .arrow { transition: transform var(--duration) var(--ease-out); display: inline-block; } .link-arrow:hover { color: var(--brand-deep); } .link-arrow:hover .arrow { transform: translateX(3px); } /* ============================================================================ v2 ABOUT INTRO - "Who we are" Mobile: stacks. Desktop: photo left (smaller) + content right. ============================================================================ */ .about-v2 { background: var(--surface-card); } .about-v2 .about-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: center; } @media (min-width: 880px) { .about-v2 .about-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-16); } } .about-v2 .about-visual { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); } .about-v2 .about-visual img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Decorative accent shape behind photo on desktop */ .about-v2 .about-visual::before { content: ''; position: absolute; inset: var(--space-6) calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-6); background: var(--accent-soft); border-radius: var(--radius-xl); z-index: -1; display: none; } @media (min-width: 880px) { .about-v2 .about-visual { isolation: isolate; } .about-v2 .about-visual::before { display: block; } } .about-v2 .about-points { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin: var(--space-8) 0; padding-top: var(--space-6); border-top: 1px solid var(--border); } @media (min-width: 600px) { .about-v2 .about-points { grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-6); } } .about-v2 .about-point { display: flex; gap: var(--space-3); align-items: flex-start; } .about-v2 .about-point-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; } .about-v2 .about-point-text strong { display: block; font-weight: 700; color: var(--ink); font-size: 0.96rem; margin-bottom: 2px; } .about-v2 .about-point-text span { font-size: var(--body-sm); color: var(--ink-muted); line-height: 1.5; } /* ============================================================================ v2 SERVICES GRID Mobile: single column. Desktop: 2-col with first card featured (spans 2). Cards have no shadow by default - they earn their existence through spacing and a quiet border, not heavy chrome. ============================================================================ */ .services-v2 { background: var(--surface); } .services-v2 .services-head { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: end; margin-bottom: var(--space-10); } @media (min-width: 880px) { .services-v2 .services-head { grid-template-columns: 1fr auto; } .services-v2 .services-head .section-lede { max-width: 36ch; text-align: left; margin: 0; } .services-v2 .services-head-text { max-width: 32rem; } } .services-v2 .services-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 640px) { .services-v2 .services-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); } } @media (min-width: 960px) { .services-v2 .services-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } /* First card spans 2 columns - breaks the equal-3-tile pattern */ .services-v2 .services-grid > .service-card-v2.featured { grid-column: span 2; grid-row: span 1; } .services-v2 .services-grid > .service-card-v2.featured .service-image { aspect-ratio: 16 / 9; } } .service-card-v2 { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out), transform var(--duration) var(--ease-out); display: flex; flex-direction: column; text-decoration: none; color: inherit; position: relative; isolation: isolate; } .service-card-v2:hover { border-color: var(--ink-muted); box-shadow: var(--shadow); transform: translateY(-2px); } .service-card-v2 .service-image { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-alt); } .service-card-v2 .service-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-out); } .service-card-v2:hover .service-image img { transform: scale(1.04); } .service-card-v2 .service-body { padding: var(--space-5) var(--space-5) var(--space-6); flex: 1; display: flex; flex-direction: column; gap: var(--space-2); } .service-card-v2 h3.service-title { font-family: var(--font-display); font-size: var(--heading); font-weight: 700; letter-spacing: -0.015em; margin: 0; color: var(--ink); line-height: 1.2; } .service-card-v2 p.service-desc { margin: 0; font-size: var(--body-sm); color: var(--ink-muted); line-height: 1.55; flex: 1; } .service-card-v2 .service-cta { margin-top: var(--space-4); font-weight: 600; font-size: 0.92rem; color: var(--brand); display: inline-flex; align-items: center; gap: var(--space-2); } .service-card-v2 .service-cta .arrow { transition: transform var(--duration) var(--ease-out); } .service-card-v2:hover .service-cta .arrow { transform: translateX(3px); } /* "View all services" pill at the bottom of services section */ .services-v2 .services-foot { margin-top: var(--space-10); text-align: center; } .btn-pill { display: inline-flex; align-items: center; gap: var(--space-2); background: transparent; color: var(--ink); border: 1.5px solid var(--border-strong); font-family: var(--font-body); font-weight: 600; font-size: 0.96rem; padding: 0.85rem 1.6rem; border-radius: var(--radius-full); text-decoration: none; transition: background var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out); min-height: 48px; } .btn-pill:hover { background: var(--ink); color: #fff; border-color: var(--ink); } .btn-pill .arrow { transition: transform var(--duration) var(--ease-out); } .btn-pill:hover .arrow { transform: translateX(3px); } /* ============================================================================ v2 HOW IT WORKS — 4-step timeline Mobile: vertical stack with connecting line. Desktop: 4-col with horizontal flow. ============================================================================ */ .howitworks-v2 { background: var(--surface-card); } .howitworks-v2 .how-head { text-align: center; max-width: 48ch; margin: 0 auto var(--space-10); } .howitworks-v2 .how-head .section-eyebrow { display: inline-flex; } .howitworks-v2 .how-head .section-heading { margin-left: auto; margin-right: auto; text-align: center; } .howitworks-v2 .how-steps { display: grid; grid-template-columns: 1fr; gap: var(--space-8); max-width: 720px; margin: 0 auto; position: relative; } @media (min-width: 880px) { .howitworks-v2 .how-steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); max-width: 100%; padding: 0 var(--space-4); } } .howitworks-v2 .how-step { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-4); align-items: start; position: relative; } @media (min-width: 880px) { .howitworks-v2 .how-step { grid-template-columns: 1fr; text-align: left; gap: var(--space-3); } } .howitworks-v2 .how-step-num { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); border: 1.5px solid var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; letter-spacing: -0.02em; flex-shrink: 0; position: relative; z-index: 1; } /* Vertical connecting line (mobile) */ .howitworks-v2 .how-step:not(:last-child)::before { content: ''; position: absolute; left: 27px; top: 56px; bottom: calc(-1 * var(--space-8)); width: 2px; background: linear-gradient(180deg, var(--accent) 0%, var(--accent-soft) 50%, var(--border) 100%); z-index: 0; } @media (min-width: 880px) { .howitworks-v2 .how-step:not(:last-child)::before { /* Horizontal line on desktop */ left: 56px; top: 27px; bottom: auto; right: calc(-1 * var(--space-6)); width: auto; height: 2px; background: linear-gradient(90deg, var(--accent) 0%, var(--accent-soft) 50%, var(--border) 100%); } } .howitworks-v2 .how-step-body h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 var(--space-2); color: var(--ink); line-height: 1.25; } .howitworks-v2 .how-step-body p { margin: 0; font-size: var(--body-sm); color: var(--ink-muted); line-height: 1.55; } .howitworks-v2 .how-foot { text-align: center; margin-top: var(--space-12); } /* ============================================================================ v2 DUAL-PATH — "How would you like to get started" Mobile: stack. Desktop: 2-col side-by-side. Quiet borders, no gradients. ============================================================================ */ .dualpath-v2 { background: var(--surface-alt); } .dualpath-v2 .dual-head { text-align: center; margin: 0 auto var(--space-10); max-width: 48ch; } .dualpath-v2 .dual-head .section-eyebrow { display: inline-flex; } .dualpath-v2 .dual-head .section-heading { margin-left: auto; margin-right: auto; } .dualpath-v2 .dual-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); max-width: 920px; margin: 0 auto; } @media (min-width: 760px) { .dualpath-v2 .dual-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); } } .dual-card-v2 { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-8); display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out), transform var(--duration) var(--ease-out); position: relative; } .dual-card-v2:hover { border-color: var(--ink-muted); box-shadow: var(--shadow); transform: translateY(-2px); } /* Primary one gets a small visual lift */ .dual-card-v2.primary { background: var(--ink); color: #fff; border-color: var(--ink); } .dual-card-v2.primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); } .dual-card-v2 .dual-badge { display: inline-flex; align-items: center; align-self: flex-start; gap: var(--space-2); font-size: var(--label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.35rem 0.75rem; border-radius: var(--radius-full); background: var(--brand-soft); color: var(--brand-deep); margin-bottom: var(--space-5); } .dual-card-v2.primary .dual-badge { background: rgba(255,255,255,0.12); color: #fff; } .dual-card-v2 h3.dual-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 var(--space-3); color: inherit; line-height: 1.2; } .dual-card-v2 .dual-desc { margin: 0 0 var(--space-5); font-size: var(--body); line-height: 1.6; color: var(--ink-muted); flex: 1; } .dual-card-v2.primary .dual-desc { color: rgba(255,255,255,0.85); } .dual-card-v2 .dual-points { list-style: none; padding: 0; margin: 0 0 var(--space-6); display: grid; gap: var(--space-2); } .dual-card-v2 .dual-points li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--body-sm); color: var(--ink); } .dual-card-v2.primary .dual-points li { color: rgba(255,255,255,0.92); } .dual-card-v2 .dual-points li i { color: var(--success); font-size: 0.85rem; flex-shrink: 0; } .dual-card-v2.primary .dual-points li i { color: #7ce0a7; } .dual-card-v2 .dual-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.85rem 1.4rem; border-radius: var(--radius); font-weight: 600; text-decoration: none; font-size: 0.96rem; border: 1.5px solid var(--ink); background: var(--ink); color: #fff; min-height: 48px; transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out); } .dual-card-v2:not(.primary) .dual-cta:hover { background: var(--brand-deep); border-color: var(--brand-deep); } .dual-card-v2.primary .dual-cta { background: #fff; color: var(--ink); border-color: #fff; } .dual-card-v2.primary .dual-cta:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .dual-card-v2 .dual-cta .arrow { transition: transform var(--duration) var(--ease-out); } .dual-card-v2:hover .dual-cta .arrow { transform: translateX(3px); } .dualpath-v2 .dual-foot { text-align: center; margin-top: var(--space-8); font-size: var(--body-sm); color: var(--ink-muted); } .dualpath-v2 .dual-foot a { color: var(--brand); font-weight: 600; } /* ============================================================================ v2 WHY US — 4 differentiators (asymmetric, editorial) Mobile: 2x2 grid. Desktop: 4-col with subtle staggered offset. ============================================================================ */ .whyus-v2 { background: var(--surface-card); } .whyus-v2 .why-head { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: end; margin-bottom: var(--space-10); } @media (min-width: 880px) { .whyus-v2 .why-head { grid-template-columns: 1.2fr 1fr; } .whyus-v2 .why-head .section-lede { max-width: 32ch; margin: 0; } } .whyus-v2 .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); } @media (min-width: 768px) { .whyus-v2 .why-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } } .why-item-v2 { padding: var(--space-6) 0 var(--space-5); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--space-3); position: relative; } .why-item-v2 .why-num { font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em; color: var(--ink-subtle); font-variant-numeric: tabular-nums; } .why-item-v2 .why-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand); font-size: 1.1rem; } .why-item-v2 h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.015em; margin: 0; color: var(--ink); line-height: 1.2; } .why-item-v2 p { font-size: var(--body-sm); color: var(--ink-muted); line-height: 1.55; margin: 0; } /* ============================================================================ v2 LATEST NEWS / RESEARCH — 1+2 asymmetric layout Mobile: stack. Desktop: 1 feature on left + 2 stacked on right. ============================================================================ */ .news-v2 { background: var(--surface); } .news-v2 .news-head { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: end; margin-bottom: var(--space-10); } @media (min-width: 880px) { .news-v2 .news-head { grid-template-columns: 1fr auto; } } .news-v2 .news-head .news-head-link { font-family: var(--font-body); font-weight: 600; color: var(--brand); text-decoration: none; font-size: var(--body-sm); display: inline-flex; align-items: center; gap: var(--space-2); } .news-v2 .news-head-link .arrow { transition: transform var(--duration) var(--ease-out); } .news-v2 .news-head-link:hover .arrow { transform: translateX(3px); } .news-v2 .news-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 880px) { .news-v2 .news-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); } .news-v2 .news-grid .news-side { display: grid; grid-template-columns: 1fr; gap: var(--space-5); } } .news-card-v2 { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out), transform var(--duration) var(--ease-out); } .news-card-v2:hover { border-color: var(--ink-muted); box-shadow: var(--shadow); transform: translateY(-2px); } .news-card-v2 .news-image { aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-alt); } .news-card-v2 .news-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-out); } .news-card-v2:hover .news-image img { transform: scale(1.04); } .news-card-v2 .news-body { padding: var(--space-5) var(--space-5) var(--space-6); flex: 1; display: flex; flex-direction: column; gap: var(--space-2); } .news-card-v2.feature .news-image { aspect-ratio: 4 / 3; } .news-card-v2.feature .news-body { padding: var(--space-6) var(--space-6) var(--space-8); } /* Side cards are horizontal on desktop (image left, text right) */ @media (min-width: 880px) { .news-card-v2.side { display: grid; grid-template-columns: 160px 1fr; } .news-card-v2.side .news-image { aspect-ratio: auto; height: 100%; } .news-card-v2.side .news-body { padding: var(--space-4) var(--space-5); } } .news-v2 .news-meta { font-size: var(--label); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--ink-subtle); font-variant-numeric: tabular-nums; } .news-v2 .news-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; margin: 0; color: var(--ink); } .news-card-v2.feature .news-title { font-size: 1.4rem; } .news-v2 .news-excerpt { font-size: var(--body-sm); color: var(--ink-muted); line-height: 1.55; margin: 0; flex: 1; } .news-card-v2.side .news-excerpt { display: none; } /* ============================================================================ v2 FINAL CTA — dark warm-slate end-of-page invitation Replaces old blue-green gradient SaaS CTA. ============================================================================ */ .finalcta-v2 { background: var(--ink); color: #fff; position: relative; overflow: hidden; } /* Subtle warm gradient + noise so the dark feels alive, not flat */ .finalcta-v2::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 100% 0%, rgba(201, 120, 74, 0.15), transparent 70%), radial-gradient(ellipse 70% 60% at 0% 100%, rgba(26, 95, 158, 0.18), transparent 65%); pointer-events: none; } .finalcta-v2::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); pointer-events: none; opacity: 0.5; } .finalcta-v2 .finalcta-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; text-align: center; padding: 0 var(--container-pad); } .finalcta-v2 .finalcta-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-5); } .finalcta-v2 .finalcta-eyebrow::before { content: ''; display: inline-block; width: 24px; height: 1.5px; background: var(--accent); } .finalcta-v2 h2 { font-family: var(--font-display); font-size: var(--display-2); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 var(--space-5); color: #fff; text-wrap: balance; } .finalcta-v2 p.finalcta-sub { font-size: var(--body-lg); line-height: 1.55; color: rgba(255,255,255,0.78); max-width: 38em; margin: 0 auto var(--space-8); } .finalcta-v2 .finalcta-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3) var(--space-5); } .finalcta-v2 .finalcta-btn { display: inline-flex; align-items: center; gap: var(--space-2); background: #fff; color: var(--ink); font-family: var(--font-body); font-weight: 600; font-size: 1rem; padding: 0.95rem 1.6rem; border-radius: var(--radius); text-decoration: none; transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out); min-height: 48px; border: none; } .finalcta-v2 .finalcta-btn:hover { background: var(--accent); color: #fff; transform: translateY(-1px); } .finalcta-v2 .finalcta-btn .arrow { transition: transform var(--duration) var(--ease-out); } .finalcta-v2 .finalcta-btn:hover .arrow { transform: translateX(3px); } .finalcta-v2 .finalcta-call { color: #fff; font-weight: 600; text-decoration: none; font-size: 1rem; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: 0.5rem 0; } .finalcta-v2 .finalcta-call:hover { color: var(--accent); } .finalcta-v2 .finalcta-call .phone-icon { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.12); display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; color: #fff; } .container { max-width: 1300px; margin: 0 auto; padding: 0 2rem; } /* ========== HEADER & NAV ========== */ header { background: var(--nav-bg); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); position: sticky; top: 0; z-index: 100; } .header-content { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; max-width: 1300px; margin: 0 auto; } .logo { font-size: 1.8rem; font-weight: 800; background: linear-gradient(135deg, var(--primary), var(--secondary)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-decoration: none; } .logo img { display: inline-block; height: 48px; width: auto; object-fit: contain; } nav { display: flex; gap: 1.5rem; align-items: center; } nav a { text-decoration: none; color: var(--nav-text); font-weight: 600; transition: color 0.3s; font-size: 0.95rem; } nav a:hover, nav a:focus-visible { color: var(--secondary); } .nav-btn { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white !important; padding: 0.6rem 1.2rem; border-radius: 50px; font-size: 0.9rem; } .nav-btn:hover { color: white !important; transform: translateY(-2px); } .mobile-menu { display: none; font-size: 1.5rem; cursor: pointer; background: none; border: none; padding: 0.5rem; min-width: 44px; min-height: 44px; color: inherit; touch-action: manipulation; } /* ========== DROPDOWN NAVIGATION ========== */ .nav-dropdown { position: relative; display: inline-block; } .nav-dropdown::after { content: ''; position: absolute; left: 0; top: 100%; width: 100%; height: 12px; } .nav-dropdown > a { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0; } .nav-dropdown-toggle::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.7rem; transition: transform 0.3s; } .nav-dropdown:hover > .nav-dropdown-toggle::after { transform: rotate(180deg); } .dropdown-menu { display: none; position: absolute; background: var(--nav-dropdown-bg); top: 100%; left: 0; min-width: 220px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); border-radius: 8px; margin-top: 0; z-index: 1000; border: 1px solid var(--nav-dropdown-border); } .nav-dropdown:hover > .dropdown-menu { display: block; } .nav-dropdown.open > .dropdown-menu { display: block; } .nav-dropdown.open > .nav-dropdown-toggle::after { transform: rotate(180deg); } .dropdown-menu a { display: block; padding: 0.8rem 1.2rem; color: var(--nav-dropdown-text); text-decoration: none; font-weight: 500; font-size: 0.9rem; transition: all 0.3s; border-left: 3px solid transparent; } .dropdown-menu a:hover, .dropdown-menu a:focus-visible { background: var(--bg-light); color: var(--primary); border-left-color: var(--primary); padding-left: 1.5rem; } .dropdown-menu a:first-child { border-radius: 8px 8px 0 0; } .dropdown-menu a:last-child { border-radius: 0 0 8px 8px; } @media (max-width: 768px) { nav { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--nav-bg); color: var(--nav-text); box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 0.5rem 0; z-index: 999; color-scheme: light; /* Prevent browser auto-dark on nav */ } nav a, nav .nav-dropdown > a { padding: 0.75rem 1.5rem; display: block; color: var(--nav-text); border-bottom: 1px solid var(--nav-border-bottom); } nav .nav-dropdown { display: block; } nav .nav-dropdown::after { display: none; } nav .dropdown-menu { position: static; box-shadow: none; border: none; border-radius: 0; min-width: 0; background: var(--nav-dropdown-sub-bg); display: none; color-scheme: light; } nav .nav-dropdown.open > .dropdown-menu { display: block; } nav .dropdown-menu a { padding-left: 2.5rem; font-size: 0.9rem; border-left: none; color: var(--nav-dropdown-text); border-bottom: 1px solid var(--nav-border-bottom); } nav .dropdown-menu a:hover { padding-left: 2.8rem; } .header-content { padding: 1rem; position: relative; } .mobile-menu { display: block; } } /* ========== HERO SECTION ========== */ .hero { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: white; padding: 3.4rem 1.5rem; text-align: center; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 0; right: -100px; width: 400px; height: 400px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(30px); } } .hero-content { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; } .hero h1 { font-size: 2.35rem; margin-bottom: 0.7rem; font-weight: 800; line-height: 1.2; } .hero p { font-size: 1.02rem; opacity: 0.95; margin-bottom: 1rem; line-height: 1.6; } .hero-buttons { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; } .btn { display: inline-block; padding: 1rem 2.5rem; background: white; color: var(--primary); text-decoration: none; border-radius: 50px; font-weight: 700; transition: all 0.3s; border: 2px solid white; cursor: pointer; font-size: 1rem; } .btn:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); } .btn-secondary { background: rgba(255, 255, 255, 0.2); color: white; border-color: white; } .btn-secondary:hover, .btn-secondary:focus-visible { background: white; color: var(--primary); } .btn-light { background: transparent; color: var(--primary); border: 2px solid var(--primary); } .btn-light:hover, .btn-light:focus-visible { background: var(--primary); color: white; } .btn-accent { background: var(--accent); color: white; border-color: var(--accent); } .btn-accent:hover { background: #e67e22; } .btn-schedule { background: var(--secondary); color: white; border: 2px solid var(--secondary); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2); transition: all 0.25s ease; } .btn-schedule:hover { background: transparent; color: white; border-color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); } @media (max-width: 768px) { .hero { padding: 2.2rem 0.9rem; } .hero h1 { font-size: 1.6rem; } .hero p { font-size: 0.95rem; } .hero-buttons { flex-direction: column; } } /* ========== SECTIONS ========== */ section { padding: 4rem 2rem; background: white; margin: 2rem 0; border-radius: 15px; } h2 { font-size: 2.8rem; margin-bottom: 1rem; color: var(--text-dark); text-align: center; } h3 { color: var(--text-dark); } /* ========== DARK-BG CTA BANNERS (white text on gradient) ========== These classes use gradient backgrounds with light text. The global `h2 { color: var(--text-dark) }` rule above would otherwise win on specificity and make headings unreadable. */ .about-cta, .cta-banner, .cta-section, .cat-header { color: #fff; } .about-cta h1, .about-cta h2, .about-cta h3, .about-cta h4, .cta-banner h1, .cta-banner h2, .cta-banner h3, .cta-banner h4, .cta-section h1, .cta-section h2, .cta-section h3, .cta-section h4, .cat-header h1, .cat-header h2, .cat-header h3, .cat-header h4 { color: #fff; } .about-cta p, .about-cta li, .cta-banner p, .cta-banner li, .cta-section p, .cta-section li { color: rgba(255, 255, 255, 0.93); } /* ========== MOBILE OVERRIDES (improve phone UX) ========== */ @media (max-width: 600px) { .container { padding: 0 1rem; } .header-content { padding: 0.6rem 1rem; gap: 0.6rem; } .logo { font-size: 1.15rem; display: flex; align-items: center; gap: 0.5rem; } .logo img { display: none !important; } .mobile-menu { font-size: 1.6rem; } nav { display: none !important; } .hero { padding: 1.6rem 0.8rem; } .hero h1 { font-size: 1.4rem; } .hero p { font-size: 0.95rem; } .hero-buttons { flex-direction: column; gap: 0.6rem; } .btn { width: 100%; padding: 0.85rem 1rem; border-radius: 10px; font-size: 1rem; } .btn + .btn { margin-top: 0.6rem; } section { padding: 1.2rem; margin: 1rem 0; border-radius: 12px; } h2 { font-size: 1.6rem; } .field-grid { display: block; gap: 0.6rem; } .field { width: 100%; } input, textarea, select, .input { width: 100%; padding: 0.8rem; font-size: 1rem; border-radius: 8px; } textarea { min-height: 110px; } .info-note { font-size: 0.95rem; } .dropdown-selected { padding: 0.6rem; font-size: 0.98rem; } .ndis-card, .ndis-card-body, .ndis-card-header { padding: 0.8rem; } .header-content .logo { flex: 1; } .nav-btn { padding: 0.5rem 0.9rem; } } /* Mobile menu open state: make nav full-width panel */ @media (max-width: 768px) { header.mobile-open nav { display: flex !important; flex-direction: column; position: fixed; top: var(--header-height, 60px); left: 0; right: 0; background: var(--nav-bg); padding: 0.5rem 0 1.2rem 0; box-shadow: 0 12px 30px rgba(0,0,0,0.15); z-index: 1100; max-height: 72vh; overflow-y: auto; border-top: 1px solid var(--nav-dropdown-border); } header.mobile-open .mobile-menu { color: var(--primary); } header.mobile-open nav a { padding: 0.9rem 1.2rem; font-size: 1rem; } } /* Smaller phones tweaks */ @media (max-width: 420px) { .hero h1 { font-size: 1.25rem; } .logo img { display: none !important; } section { padding: 0.9rem; } .btn { padding: 0.7rem; font-size: 0.98rem; } .hero::before { display: none; } } /* Make images responsive */ img { max-width: 100%; height: auto; display: block; } /* Cards and grids collapse to single column on small screens */ @media (max-width: 600px) { .card-grid, .service-grid, .three-col, .two-col { display: block; } .card, .service-card { margin-bottom: 1rem; } } .section-subtitle { text-align: center; color: var(--text-light); font-size: 1.2rem; margin-bottom: 3rem; max-width: 700px; margin-left: auto; margin-right: auto; } /* ========== STATS BANNER ========== */ .stats-banner { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; padding: 3rem 2rem; margin: 2rem 0; border-radius: 15px; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; text-align: center; } .stat-item h3 { font-size: 2.5rem; color: white; margin-bottom: 0.5rem; } .stat-item p { font-size: 1.1rem; opacity: 0.9; } /* ========== CARDS ========== */ .services-grid, .team-grid, .news-grid, .resources-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-top: 2rem; } .service-card, .team-member, .news-card, .resource-card { background: white; border: 2px solid var(--border); border-radius: 12px; padding: 2rem; transition: all 0.3s; } .service-card:hover, .news-card:hover, .resource-card:hover { border-color: var(--secondary); box-shadow: var(--shadow); transform: translateY(-8px); } .service-card-icon { width: 70px; height: 70px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin-bottom: 1rem; } .service-card h3 { color: var(--text-dark); margin-bottom: 0.8rem; font-size: 1.3rem; } .service-card p { color: var(--text-light); line-height: 1.7; margin-bottom: 1rem; } .service-card a { color: var(--secondary); text-decoration: none; font-weight: 600; } /* ========== TEAM ========== */ .team-member { text-align: center; background: var(--bg-light); padding: 2rem; border-radius: 12px; border: none; transition: all 0.3s; } .team-member:hover { background: white; box-shadow: var(--shadow); } .member-avatar { width: 140px; height: 140px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 50%; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; color: white; font-size: 2.5rem; font-weight: bold; } .team-member h3 { color: var(--text-dark); margin-bottom: 0.3rem; } .team-member .role { color: var(--secondary); font-size: 0.9rem; margin-bottom: 0.8rem; } /* ========== NEWS ========== */ .news-card { background: white; border: 2px solid var(--border); border-radius: 10px; overflow: hidden; padding: 0; } .news-image { width: 100%; height: 200px; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center; color: white; font-size: 3rem; } .news-content { padding: 1.5rem; } .news-date { color: var(--secondary); font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5rem; } .news-card h3 { color: var(--primary); margin-bottom: 0.8rem; line-height: 1.4; } .news-card p { color: var(--text-light); font-size: 0.95rem; margin-bottom: 1rem; } /* ========== TESTIMONIALS ========== */ .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-top: 2rem; } .testimonial { background: var(--bg-light); padding: 2rem; border-radius: 12px; border-left: 4px solid var(--secondary); } .stars { color: var(--accent); font-size: 1.2rem; margin-bottom: 1rem; } .testimonial p { color: var(--text-light); margin-bottom: 1rem; font-style: italic; line-height: 1.7; } .testimonial-author { font-weight: 700; color: var(--primary); } /* ========== RESOURCES ========== */ .resource-card { background: var(--bg-light); padding: 1.8rem; border-radius: 10px; text-align: center; border: none; transition: all 0.3s; } .resource-icon { font-size: 3rem; margin-bottom: 1rem; } .resource-card h3 { color: var(--primary); margin-bottom: 0.5rem; font-size: 1.1rem; } .resource-card p { font-size: 0.95rem; color: var(--text-light); margin-bottom: 1rem; } .resource-card a { display: inline-block; color: white; background: var(--secondary); padding: 0.5rem 1rem; border-radius: 25px; text-decoration: none; font-weight: 600; font-size: 0.85rem; transition: all 0.3s; } .resource-card a:hover { background: var(--primary); } /* ========== GLOBAL SEARCH ========== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* Search live wrapper — positions the dropdown */ .search-live-wrap { position: relative; max-width: 290px; } .site-search-form { display: flex; align-items: center; border: 1px solid #d4e6f7; background: #fff; border-radius: 999px; overflow: hidden; width: 100%; } /* ── Live Autocomplete Dropdown ── */ .search-live-dropdown { position: absolute; top: calc(100% + 6px); right: 0; width: 360px; max-width: 92vw; background: #fff; border: 1px solid #dbe6f1; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,82,163,0.18); z-index: 9999; overflow: hidden; animation: sldIn 0.14s ease; } @keyframes sldIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .sld-item { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.7rem 0.9rem; text-decoration: none; color: inherit; border-bottom: 1px solid #f0f5fb; cursor: pointer; transition: background 0.12s; } .sld-item:last-of-type { border-bottom: none; } .sld-item:hover, .sld-item.focused { background: #eef5ff; } .sld-icon { width: 30px; height: 30px; background: #e3f0ff; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #0052A3; font-size: 0.8rem; margin-top: 0.05rem; } .sld-text { flex: 1; min-width: 0; } .sld-title { font-size: 0.88rem; font-weight: 700; color: #1a1a2e; margin-bottom: 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sld-desc { font-size: 0.77rem; color: #666; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .sld-badge { font-size: 0.67rem; font-weight: 700; padding: 0.12rem 0.42rem; border-radius: 5px; background: #e3f0ff; color: #0052A3; flex-shrink: 0; margin-top: 0.08rem; white-space: nowrap; } .sld-footer { padding: 0.55rem 1rem; background: #f5f9ff; text-align: center; font-size: 0.8rem; font-weight: 700; color: #0052A3; cursor: pointer; border-top: 1px solid #e0ecfa; transition: background 0.12s; } .sld-footer:hover { background: #dbeafe; } .sld-empty { padding: 1rem; text-align: center; color: #888; font-size: 0.88rem; } /* Highlight matches */ mark { background: #fef08a; color: #333; border-radius: 2px; padding: 0 1px; font-style: normal; } /* Search result cards — enhanced */ .search-result-excerpt { font-size: 0.84rem; color: #666; line-height: 1.55; margin-top: 0.3rem; } .search-category-group { margin-bottom: 1.4rem; } .search-category-group-label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: #888; margin-bottom: 0.6rem; padding-bottom: 0.35rem; border-bottom: 1px solid #e8f0fb; display: flex; align-items: center; gap: 0.4rem; } .search-result-card { position: relative; } .site-search-form input { border: none; outline: none; padding: 0.45rem 0.75rem; min-width: 170px; font-size: 0.85rem; } .site-search-form button { border: none; background: var(--primary); color: #fff; padding: 0.48rem 0.7rem; cursor: pointer; } .site-search-form button:hover, .site-search-form button:focus-visible { background: var(--secondary); } /* ========== SEARCH PAGE ========== */ .search-panel { background: #fff; border: 1px solid #dbe6f1; border-radius: 12px; padding: 1rem; margin-bottom: 1rem; } .search-panel form { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; } .search-panel input { width: 100%; border: 1px solid #cfe0ef; border-radius: 8px; padding: 0.7rem 0.8rem; } .search-panel button { border: 2px solid var(--primary); background: var(--primary); color: #fff; border-radius: 8px; padding: 0.68rem 1rem; font-weight: 700; cursor: pointer; } .search-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.6rem; margin-top: 0.8rem; } .search-filters select { border: 1px solid #cfe0ef; border-radius: 8px; padding: 0.55rem 0.65rem; background: #fff; } .search-count { color: #4b5563; margin: 0.4rem 0 1rem; } .search-results-grid { display: grid; grid-template-columns: 1fr; gap: 0.8rem; } .search-result-card { background: #fff; border: 1px solid #dbe6f1; border-radius: 10px; padding: 1rem; } .search-result-card h3 { margin: 0.35rem 0; } .search-result-card h3 a { color: var(--primary); text-decoration: none; } .search-result-card h3 a:hover { text-decoration: underline; } .search-result-card p { margin: 0; color: #4b5563; } .search-result-meta { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; } .search-badge { background: var(--primary); color: #fff; border-radius: 999px; padding: 0.1rem 0.55rem; font-size: 0.75rem; font-weight: 700; } .search-cat, .search-updated { color: #6b7280; font-size: 0.8rem; } .search-empty-state { background: #fff; border: 1px solid #dbe6f1; border-radius: 10px; padding: 1rem; } @media (max-width: 1024px) { .search-live-wrap, .site-search-form { display: none; } } /* ========== LOCATIONS ========== */ .location-card { background: var(--bg-light); padding: 2rem; border-radius: 10px; border-top: 4px solid var(--secondary); } .location-card h3 { color: var(--primary); margin-bottom: 1rem; } .location-info { color: var(--text-light); line-height: 1.8; font-size: 0.95rem; } /* ========== FAQs ========== */ .faq-item { background: var(--bg-light); padding: 1.5rem; margin-bottom: 1rem; border-radius: 10px; cursor: pointer; transition: all 0.3s; } .faq-item:hover, .faq-item:focus-within { background: white; box-shadow: var(--shadow); } .faq-item h3 { color: var(--primary); margin-bottom: 0.5rem; display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; } .faq-item.open p { display: block; } .faq-item p { display: none; color: var(--text-light); margin-top: 1rem; line-height: 1.7; } /* faq-answer default hidden; .open shows it */ .faq-answer { display: none; padding: 0.9rem 1.2rem 1rem; color: var(--text-light); font-size: 0.94rem; line-height: 1.7; border-top: 1px solid #e8edf3; } .faq-answer.open { display: block; } .faq-answer.open p, .faq-answer.open ul, .faq-answer.open ol { display: block; } .faq-answer.open li { display: list-item; } .faq-answer.open strong, .faq-answer.open a { display: inline; } /* ── Global fix: h2/h3 text-align:center from base rule leaks into flex containers. Explicitly left-align inside all card, banner, panel, and portal components. ── */ .portal-card h2, .portal-card h3, .portal-card h4, .admin-card h2, .admin-card h3, .urgent-banner h2, .urgent-banner h3, .ndis-cta h2, .ndis-cta h3, .ndis-cta h4, .pay-method-banner h2, .pay-method-banner h3, .pmb-self h2, .pmb-plan h2, .pmb-agency h2, .pmb-unknown h2, .sidebar-card h2, .sidebar-card h3, .info-card h2, .info-card h3, .action-card h2, .action-card h3, .feedback-card h2, .feedback-card h3, .referral-form-wrap h2, .referral-form-wrap h3, .ndis-card-header h2, .ndis-card-header h3, .consent-card-header h2, .consent-card-header h3, .pay-modal-hdr h2, .pay-modal-hdr h3, .pay-success-panel h3, .pay-info-panel h3, .invoice-modal h2, .invoice-modal h3, .shift-alert h3, .shift-alert h2, .portal-card-header h2, .admin-card-header h2, .form-content h2, .form-content h3, [class*="-card"] h2, [class*="-card"] h3, [class*="-banner"] h2, [class*="-banner"] h3, [class*="-panel"] h2, [class*="-panel"] h3, [class*="modal"] h2, [class*="modal"] h3, .queue-column h3, .compliance-reminders h3, .loading-box h2, .loading-box h3, .tab-content h2, .tab-content h3, .quick-card h3, .link-card h2, .link-card h3 { text-align: left !important; } /* faq-a pattern (faq-q/faq-a pages) */ .faq-a { display: none; } .faq-a.open, .faq-item.open .faq-a { display: block; } .faq-a p, .faq-a ul, .faq-a ol { display: block; } .faq-a li { display: list-item; } /* faq-content pattern (faq-header pages) */ .faq-content.open p, .faq-content.open ul, .faq-content.open ol { display: block; } .faq-content.open li { display: list-item; } .faq-content.open strong, .faq-content.open a { display: inline; } /* Chevron rotation for aria-expanded pattern */ .faq-question[aria-expanded="true"] i, .faq-question.open i, .faq-q[aria-expanded="true"] i, .faq-q.open i { transform: rotate(180deg); } .faq-toggle { font-size: 1.5rem; transition: transform 0.3s; } .faq-item.open .faq-toggle { transform: rotate(180deg); } /* ========== DONATION SECTION ========== */ .donation-banner { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; padding: 3rem 2rem; border-radius: 15px; text-align: center; margin: 2rem 0; } .donation-banner h2 { color: white; margin-bottom: 1rem; } .donation-banner p { font-size: 1.1rem; margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; } .donation-options { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; } .donation-box { background: rgba(255, 255, 255, 0.15); padding: 1.5rem 2rem; border-radius: 10px; border: 2px solid rgba(255, 255, 255, 0.3); cursor: pointer; transition: all 0.3s; } .donation-box:hover { background: rgba(255, 255, 255, 0.25); border-color: white; } .donation-box h3 { color: white; margin-bottom: 0.3rem; } /* ========== CONTACT SECTION ========== */ .contact-wrapper { max-width: 1000px; margin: 0 auto; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-bottom: 3rem; } .contact-info-group h3 { color: var(--primary); margin-bottom: 1.5rem; font-size: 1.3rem; } .contact-info-item { margin-bottom: 2rem; } .contact-info-item strong { color: var(--text-dark); display: block; margin-bottom: 0.5rem; } .contact-info-item p { color: var(--text-light); margin-bottom: 0.3rem; } .contact-info-item a { color: var(--secondary); text-decoration: none; font-weight: 600; } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; font-weight: 600; color: var(--text-dark); margin-bottom: 0.5rem; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 0.9rem; border: 2px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 1rem; transition: border-color 0.3s; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--secondary); } .form-submit { width: 100%; padding: 1rem; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; border: none; border-radius: 8px; font-weight: 700; font-size: 1rem; cursor: pointer; transition: all 0.3s; } .form-submit:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .form-message { margin-top: 1rem; padding: 1rem; border-radius: 8px; text-align: center; font-weight: 600; display: none; } .form-message.success { background: #d4edda; color: #155724; display: block; } @media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } } /* ========== FOOTER ========== */ footer { background: #0a1628; color: white; padding: 3.5rem 0 0; margin-top: 3rem; border-top: 3px solid; border-image: linear-gradient(90deg, var(--primary), var(--secondary)) 1; } footer a { color: rgba(255,255,255,0.78) !important; text-decoration: none; transition: color 0.2s; } footer a:hover { color: #fff !important; } footer p, footer li, footer small { color: rgba(255,255,255,0.7); } /* ---- main grid ---- */ .footer-main { display: grid; grid-template-columns: 1.55fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; } .footer-brand { font-size: 1.55rem; font-weight: 800; color: #fff; line-height: 1.15; margin-bottom: 0.75rem; letter-spacing: -0.01em; } .footer-brand span { color: var(--secondary); } .footer-tagline { font-size: 0.87rem; color: rgba(255,255,255,0.6); line-height: 1.65; margin-bottom: 1rem; } .footer-ndis-tag { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(0,155,77,0.15); border: 1px solid rgba(0,155,77,0.3); color: #6ee7b7; font-size: 0.75rem; font-weight: 700; padding: 0.28rem 0.8rem; border-radius: 999px; margin-bottom: 1.2rem; letter-spacing: 0.02em; } .footer-social { display: flex; gap: 0.55rem; } .footer-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.75) !important; display: flex; align-items: center; justify-content: center; font-size: 0.88rem; transition: background 0.2s, border-color 0.2s, color 0.2s; } .footer-social a:hover { background: var(--secondary) !important; border-color: var(--secondary) !important; color: #fff !important; } .footer-col h4 { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.35); margin-bottom: 1.1rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.07); } .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; } .footer-col ul li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; color: rgba(255,255,255,0.68); line-height: 1.4; } .footer-col ul li i { color: var(--secondary); width: 1rem; flex-shrink: 0; margin-top: 0.16rem; font-size: 0.78rem; } .footer-col ul li a { color: rgba(255,255,255,0.72) !important; font-size: 0.875rem; } .footer-col ul li a:hover { color: #fff !important; } /* ---- bottom bar ---- */ .footer-bottom { border-top: 1px solid rgba(255,255,255,0.07); padding: 1.1rem 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; font-size: 0.82rem; } .footer-bottom p { color: rgba(255,255,255,0.4); margin: 0; } .footer-bottom-links { display: flex; gap: 1.2rem; flex-wrap: wrap; } .footer-bottom-links a { color: rgba(255,255,255,0.5) !important; font-size: 0.82rem; } .footer-bottom-links a:hover { color: rgba(255,255,255,0.85) !important; } .footer-bottom a { color: rgba(255,255,255,0.5) !important; font-size: 0.82rem; } .footer-bottom a:hover { color: rgba(255,255,255,0.85) !important; } .site-version { font-size: 0.72rem; opacity: 0.35; font-family: monospace; letter-spacing: 0.5px; /* Keeps badge above iOS home indicator on notch phones */ bottom: calc(0.4rem + env(safe-area-inset-bottom, 0px)) !important; right: max(0.6rem, env(safe-area-inset-right, 0.6rem)) !important; } /* ---- legacy footer classes (kept for any pages not yet migrated) ---- */ .footer-content { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; padding-bottom: 2.5rem; } .footer-section h3 { margin-bottom: 0.9rem; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.35); } .footer-section p, .footer-section a { color: rgba(255,255,255,0.7); font-size: 0.875rem; line-height: 1.75; display: block; padding: 0.15rem 0; } .footer-section a:hover { color: #fff; } @media (max-width: 1024px) { .footer-main { grid-template-columns: 1.3fr 1fr 1fr; } } @media (max-width: 700px) { .footer-main { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .footer-main { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; } .footer-bottom-links { justify-content: center; } } /* ========== SCROLL REVEAL ========== */ .scroll-reveal { opacity: 0; transform: translateY(20px); transition: all 0.6s ease; } .scroll-reveal.visible { opacity: 1; transform: translateY(0); } /* ========== BREADCRUMB ========== */ .breadcrumb { background: var(--bg-light); padding: 1rem 2rem; font-size: 0.9rem; } /* breadcrumbs inside coloured hero sections — transparent so the hero bg shows through */ .breadcrumb[style*="color:rgba(255,255,255"] { background: transparent !important; padding: 0 !important; } .breadcrumb a { color: var(--secondary); text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } /* ========== TABLE HEADERS — prevent mid-word breaking on mobile ========== */ /* All th elements stay on one line; scroll wrappers handle the overflow */ table th { white-space: nowrap; } /* ========== PERFORMANCE & OPTIMIZATION ========== */ /* Lazy loading image support */ img { max-width: 100%; height: auto; } /* Enhanced image styling */ img[src*="unsplash"] { transition: transform 0.3s ease, filter 0.3s ease; } img[src*="unsplash"]:hover { transform: scale(1.02); filter: brightness(1.05); } /* Image container optimization */ .service-card img, .news-card img, .testimonial img { border-radius: 8px; display: block; width: 100%; height: auto; object-fit: cover; } /* ========== ACCESSIBILITY IMPROVEMENTS ========== */ /* Focus visible for keyboard navigation */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; } /* Skip to main content for screen readers */ .skip-to-main { position: absolute; top: -100px; left: 0; background: var(--primary); color: white; padding: 0.6rem 1.2rem; z-index: 10000; text-decoration: none; border-radius: 0 0 6px 0; font-weight: 700; font-size: 0.9rem; transition: top 0.2s ease; } .skip-to-main:focus { top: 0; outline: 3px solid #fff; outline-offset: 2px; } .skip-to-main:focus { top: 0; } /* Better contrast for text */ h1, h2, h3, h4, h5, h6 { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* Form validation states */ input:invalid:not(:placeholder-shown), textarea:invalid:not(:placeholder-shown), select:invalid:not(:placeholder-shown) { border-color: #dc3545 !important; background: rgba(220, 53, 69, 0.05); } input:valid:not(:placeholder-shown), textarea:valid:not(:placeholder-shown), select:valid:not(:placeholder-shown) { border-color: #28a745 !important; background: rgba(40, 167, 69, 0.05); } /* Error message styling */ .form-error { color: #dc3545; font-size: 0.85rem; margin-top: 0.25rem; display: block; } /* Success message styling */ .form-success { color: #28a745; font-size: 0.85rem; margin-top: 0.25rem; display: block; } /* ========== ENHANCED HOVER EFFECTS ========== */ /* Card lift on hover */ .service-card, .news-card, .resource-card, .team-member { will-change: transform, box-shadow; } /* Enhanced button effects */ .btn { position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.2); transition: left 0.3s ease; z-index: -1; } .btn:hover::before { left: 100%; } /* Link hover underline animation */ a:not(.btn):not(.logo) { position: relative; text-decoration: none; } a:not(.btn):not(.logo):hover { text-decoration: underline; } /* ========== MOBILE OPTIMIZATION ========== */ /* Responsive images */ @media (max-width: 768px) { img { max-width: 100%; height: auto; } .service-card, .news-card, .team-member { padding: 1.5rem; } .services-grid, .team-grid, .news-grid { grid-template-columns: 1fr; } h1 { font-size: 1.75rem; } h2 { font-size: 1.5rem; } section { padding: 2rem 1rem; margin: 1rem 0; } .btn { width: 100%; padding: 0.875rem 1.5rem; font-size: 0.9rem; } .donation-options { flex-direction: column; } .donation-box { width: 100%; } } @media (max-width: 480px) { .hero h1 { font-size: 1.5rem; } .hero p { font-size: 0.9rem; } .stats-grid { grid-template-columns: 1fr 1fr; } .stat-item h3 { font-size: 1.8rem; } nav { flex-direction: column; gap: 0.5rem; } .header-content { flex-direction: row; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.5rem 1rem; } .container { padding: 0 1rem; } } /* ========== LOADING & SHIMMER EFFECT ========== */ @keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } .loading { animation: shimmer 2s infinite; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 1000px 100%; } /* ========== PRINT STYLES ========== */ @media print { header, footer, .mobile-menu, .btn { display: none; } section { page-break-inside: avoid; box-shadow: none; border: 1px solid #ddd; } a { text-decoration: underline; } img { max-width: 100%; page-break-inside: avoid; } } /* ========== DARK MODE SUPPORT ========== */ @media (prefers-color-scheme: dark) { /* ── CSS variable overrides ── */ :root { --bg-light: #111827; --bg-white: #1a2332; --text-dark: #e8f0fe; --text-light: #8faacc; --border: #2a3a4a; --shadow: 0 4px 20px rgba(0,0,0,0.4); --shadow-lg: 0 8px 40px rgba(0,0,0,0.5); --nav-bg: #0f1923; --nav-text: #e8f0fe; --nav-dropdown-bg: #1a2636; --nav-dropdown-sub-bg: #111f2e; --nav-dropdown-border: #2a3a4a; --nav-dropdown-text: #e8f0fe; --nav-border-bottom: #1e2e40; } /* ── Base ── */ body { background: #0a0f1a; color: #e8f0fe; } /* ── Header & nav ── */ header { background: #0f1923 !important; box-shadow: 0 2px 10px rgba(0,0,0,0.5); } .dropdown-menu { background: #1a2636 !important; border-color: #2a3a4a !important; box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important; } .dropdown-menu a { color: #e8f0fe !important; } .dropdown-menu a:hover, .dropdown-menu a:focus-visible { background: #111f2e !important; color: #60c0ff !important; border-left-color: #60c0ff !important; } /* ── Sections & cards ── */ section { background: #111827 !important; } .service-card, .news-card, .resource-card, .team-member { background: #1a2332 !important; border-color: #2a3a4a !important; color: #e8f0fe !important; } .service-card h3, .news-card h3, .team-member h3 { color: #e8f0fe !important; } .service-card p, .news-card p, .resource-card p, .team-member p { color: #8faacc !important; } .service-card:hover, .news-card:hover, .resource-card:hover { background: #1f2d42 !important; } /* ── FAQ ── */ .faq-item { background: #111827 !important; } .faq-item:hover, .faq-item:focus-within { background: #1a2332 !important; } .faq-question, .faq-q { background: transparent !important; color: #e8f0fe !important; } .faq-answer, .faq-a { background: #0f1923 !important; color: #8faacc !important; border-top-color: #2a3a4a !important; } .faq-answer p, .faq-a p, .faq-answer li, .faq-a li { color: #8faacc !important; } /* ── Forms ── */ .form-group input, .form-group textarea, .form-group select, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea { background: #111827 !important; color: #e8f0fe !important; border-color: #2a3a4a !important; } .form-group input::placeholder, .form-group textarea::placeholder, input::placeholder, textarea::placeholder { color: #4a6a8a !important; } .form-group label { color: #e8f0fe !important; } input:valid:not(:placeholder-shown), textarea:valid:not(:placeholder-shown), select:valid:not(:placeholder-shown) { background: #0f1f12 !important; border-color: #28a745 !important; } input:invalid:not(:placeholder-shown), textarea:invalid:not(:placeholder-shown) { background: #1f0f0f !important; border-color: #dc3545 !important; } /* ── Search bar ── */ .site-search-form { background: #111827 !important; border-color: #2a3a4a !important; } .site-search-form input { background: #111827 !important; color: #e8f0fe !important; } /* ── Search autocomplete dropdown ── */ .search-live-dropdown { background: #1a2332 !important; border-color: #2a3a4a !important; box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important; } .sld-item { color: #e8f0fe !important; border-bottom-color: #1f2d3d !important; } .sld-item:hover, .sld-item.focused { background: #1f2d42 !important; } .sld-icon { background: #1e2a3a !important; color: #60c0ff !important; } .sld-title { color: #e8f0fe !important; } .sld-desc { color: #8faacc !important; } .sld-badge { background: #1e2a3a !important; color: #60c0ff !important; } .sld-footer { background: #111827 !important; color: #60c0ff !important; border-top-color: #2a3a4a !important; } .sld-footer:hover { background: #1a2332 !important; } .sld-empty { color: #8faacc !important; } /* ── Search page ── */ .search-panel, .search-result-card, .search-empty-state { background: #1a2332 !important; border-color: #2a3a4a !important; } .search-filters select { background: #111827 !important; color: #e8f0fe !important; border-color: #2a3a4a !important; } .search-result-card p, .search-result-excerpt, .search-count { color: #8faacc !important; } .search-category-group-label { color: #8faacc !important; border-bottom-color: #2a3a4a !important; } mark { background: #3a3000 !important; color: #ffd700 !important; } /* ── Inline-styled white cards ── */ div[style*="background: #fff"], div[style*="background:#fff"], div[style*="background: white"], div[style*="background:white"] { background: #1a2332 !important; } /* ── Class-based white cards (page-specific head styles) ── */ [class*="-card"], [class*="-step"], [class*="-panel"], .accred-badge, .section-alt, .policy-meta-item, .related-card, .portal-card, .session-block, .tip-card, .training-card, .benefit-card, .check-card, .goal-card, .who-card, .why-card, .culture-item, .perk, .qual-card, .practice-card, .interview-card { background: #1a2332 !important; } /* ── Misc text ── */ h1, h2, h3, h4, h5, h6 { color: #e8f0fe !important; } p, li { color: #8faacc !important; } td, th, span, label { color: #8faacc; } a:not(.btn):not(.nav-btn):not(.logo) { color: #60c0ff; } .section-subtitle { color: #8faacc !important; } /* ── Testimonials ── */ .testimonial { background: #111827 !important; } .testimonial p { color: #8faacc !important; } /* ── Location cards ── */ .location-card { background: #111827 !important; } /* ── Breadcrumb ── */ .breadcrumb { background: #0f1923 !important; } /* ── Loading shimmer ── */ .loading { background: linear-gradient(90deg, #1a2332 25%, #1f2d42 50%, #1a2332 75%) !important; } /* ── Form success/error messages ── */ .form-message.success { background: #0f2d1a !important; color: #6ee7b7 !important; } /* ── Dark-bg CTA banners: preserve gradient & white text ── Without these overrides, `section { background: #111827 !important }` flattens the gradient and `h2 { color: #e8f0fe !important }` tints the heading blue. */ .about-cta, .cta-banner, .cta-section, section.about-cta, section.cta-banner, section.cta-section { background: linear-gradient(120deg, var(--primary), #009b4d) !important; color: #fff !important; } .about-cta h1, .about-cta h2, .about-cta h3, .about-cta h4, .cta-banner h1, .cta-banner h2, .cta-banner h3, .cta-banner h4, .cta-section h1, .cta-section h2, .cta-section h3, .cta-section h4, .cat-header h1, .cat-header h2, .cat-header h3, .cat-header h4 { color: #fff !important; } .about-cta p, .about-cta li, .cta-banner p, .cta-banner li, .cta-section p, .cta-section li { color: rgba(255, 255, 255, 0.93) !important; } /* Keep CTA buttons high-contrast in dark mode */ .btn-cta-white, .cta-btn-white { background: #fff !important; color: var(--primary) !important; } .btn-cta-outline, .cta-btn-outline { color: #fff !important; border-color: rgba(255, 255, 255, 0.85) !important; } } /* ========== REDUCED MOTION ========== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .scroll-reveal { opacity: 1; transform: none; } } /* ========== MOBILE SAFETY LAYER (PHONE-ONLY) ========== */ @media (max-width: 768px) { body { overflow-x: hidden; } .container, main, section { max-width: 100%; } /* Keep mobile visuals high contrast and avoid blended text on tiny screens */ body { background: var(--surface) !important; color: var(--ink) !important; } .logo { background: none !important; -webkit-text-fill-color: var(--ink) !important; color: var(--ink) !important; } .logo img { display: none !important; } /* Make long text wrap instead of creating horizontal overflow */ h1, h2, h3, h4, h5, h6, p, li, a, span, td, th, label { overflow-wrap: anywhere; word-break: normal; } /* Reduce over-narrow reading columns created by inline max-width styles */ p[style*="max-width"], div[style*="max-width"][style*="margin: 0 auto"], div[style*="max-width"][style*="margin:0 auto"] { max-width: 100% !important; } /* Remove glass/blur effects on phone to improve readability */ [style*="backdrop-filter"], .hero-panel { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Force common inline two-column and rigid grids to one column on phones */ [style*="grid-template-columns: 1fr 1fr"], [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1.2fr 0.8fr"], [style*="grid-template-columns:1.2fr 0.8fr"], [style*="grid-template-columns: 0.82fr 1.18fr"], [style*="grid-template-columns:0.82fr 1.18fr"], [style*="grid-template-columns: 0.95fr 1.35fr"], [style*="grid-template-columns:0.95fr 1.35fr"], [style*="grid-template-columns: 1.15fr 0.85fr"], [style*="grid-template-columns:1.15fr 0.85fr"], [style*="grid-template-columns: repeat(3"], [style*="grid-template-columns:repeat(3"], [style*="grid-template-columns: repeat(4"], [style*="grid-template-columns:repeat(4"], [style*="grid-template-columns: minmax("], [style*="grid-template-columns:minmax("], .queue-grid, .form-grid, .field-grid, .action-grid, .quick-grid { grid-template-columns: 1fr !important; } /* Neutralize hard min-width values that force sideways scrolling */ input[style*="min-width"], select[style*="min-width"], textarea[style*="min-width"], button[style*="min-width"], [style*="min-width"], [data-role="shift-employee"], [data-role="occurrence-employee"], #invoiceClientFilter, .period-nav span, .fy-nav span, .ndis-cta-text { min-width: 0 !important; max-width: 100% !important; } input, select, textarea, button, iframe, img, video { max-width: 100% !important; } .search-live-wrap, .site-search-form { max-width: 100%; width: 100%; } .site-search-form input { min-width: 0; width: 100%; } /* Keep large tables usable on phones by allowing horizontal scroll */ .table-wrap, .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { max-width: 100%; width: 100% !important; } th, td { word-break: break-word; } /* Tables inside overflow scroll wrappers: let class-level min-width take effect */ div[style*="overflow-x"] table, .table-responsive table, .table-wrap table { width: auto !important; } /* ── Portal tab nav: grid on mobile so all tabs are visible ── */ .portal-tabs { padding: 0.6rem 0.75rem !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.4rem !important; overflow-x: unset !important; border-bottom: 1px solid #e5e7eb !important; background: #f8fafc !important; align-items: stretch !important; } .portal-tab { margin-bottom: 0 !important; border: 1px solid #dbe7f2 !important; border-radius: 8px !important; background: #fff !important; justify-content: center !important; text-align: center !important; padding: 0.65rem 0.4rem !important; white-space: normal !important; font-size: 0.78rem !important; flex-shrink: unset !important; } .portal-tab:last-child:nth-child(odd) { grid-column: 1 / -1; } /* ── Prevent iOS auto-zoom on input focus (requires font-size >= 16px) ── */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="search"], input[type="password"], input[type="url"], textarea, select { font-size: 1rem !important; } /* ── Remove iOS native search styling so custom borders/radius apply ── */ input[type="search"] { -webkit-appearance: none; appearance: none; } /* ── Jump links: bigger tap targets on mobile ────────────────────── */ .jump-link, .step-jump-link { padding: 0.5rem 1rem !important; min-height: 36px; } /* ── Small CTA buttons: minimum tap target ────────────────────────── */ .btn-card, .callout-cta, .filter-btn { min-height: 36px; padding-top: 0.55rem !important; padding-bottom: 0.55rem !important; } } @media (max-width: 380px) { .container { padding: 0 1rem; } /* ── Breadcrumb: reduce padding and allow wrap on small screens ── */ .breadcrumb { padding: 0.6rem 1rem; font-size: 0.82rem; overflow-wrap: break-word; word-break: normal; line-height: 1.5; } .portal-main { padding: 0 0.5rem; } } /* On phones in dark mode - keep body light but let nav use dark theme */ @media (max-width: 768px) and (prefers-color-scheme: dark) { :root { --bg-light: #f0f7ff; --bg-white: #ffffff; --text-dark: #1f2937; --text-light: #6b7280; --border: #d4e6f7; /* Nav dark theme on mobile */ --nav-bg: #1e2a3a; --nav-text: #f0f0f0; --nav-dropdown-bg: #1e2a3a; --nav-dropdown-sub-bg: #162030; --nav-dropdown-border: #2e4a6a; --nav-dropdown-text: #e8f0fe; --nav-border-bottom: #2a3a4a; } body { background: #f0f7ff !important; color: #1f2937 !important; } /* Ensure nav text is always visible */ nav a, .dropdown-menu a, .mobile-menu { color: var(--nav-text) !important; } nav .dropdown-menu a { color: var(--nav-dropdown-text) !important; } } @media (max-width: 480px) { [style*="padding: 2rem"], [style*="padding:2rem"] { padding: 1rem !important; } [style*="height: 400px"], [style*="height:400px"] { height: auto !important; } h1 { font-size: 1.4rem !important; line-height: 1.25 !important; } h2 { font-size: 1.25rem !important; line-height: 1.3 !important; } } /* ========== PHONE GRID FIXES (prevent one-letter-per-row) ========== */ @media (max-width: 600px) { /* KPI tiles: 3-col grid collapses to 1 col on small phones */ .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; } /* Payment method selector: 3-col → 1-col on phones */ .pay-methods { grid-template-columns: 1fr !important; } /* Stat/KPI tiles: never let label text squeeze below a readable width */ .kpi, .stat-item, .kpi-tile { min-width: 0; overflow: hidden; } .kpi .label, .kpi .value { word-break: break-word; overflow-wrap: anywhere; white-space: normal; } /* Portal toolbar: stack on very small screens */ .portal-toolbar { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 0.7rem 1rem; } /* Prevent flex children from collapsing text to zero width */ .portal-card-header, .action-card, .quick-card, .module-card, .ndis-cta { min-width: 0; } .portal-card-header > *, .ndis-cta-text { min-width: 0; flex-shrink: 1; } /* Tables inside cards: horizontal scroll instead of squished columns */ .portal-card-body table, .card-body table, .ndis-card-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; max-width: 100%; } /* Policy meta grid: single column on small screens */ .policy-meta { grid-template-columns: 1fr 1fr !important; } /* Consent items: stack header on small screens */ .consent-item-hdr { flex-direction: column; align-items: flex-start; gap: 0.4rem; } /* Module links: stack vertically */ .module-links { flex-direction: column; gap: 0.4rem; } .module-link { width: 100%; text-align: center; } } /* ========== POLICY SIGNATURE GRID: stack on mobile ========== */ @media (max-width: 600px) { .sig-grid { grid-template-columns: 1fr !important; } } /* ========== CONTENT TABLES: horizontal scroll on phones ========== */ @media (max-width: 700px) { .mgmt-table, .approach-table, .tier-table, .prompt-table, .cap-table, .barrier-table, .intensity-table, .guide-table, .di-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ========== 4-COLUMN PHOTO STRIP: collapse to 2 on phones ========== */ @media (max-width: 640px) { .page-photo-strip, .blog-photo-strip { grid-template-columns: repeat(2, 1fr) !important; } .page-photo-strip img, .blog-photo-strip img { height: 140px; } } /* ========== CIRCLE NUMBERS: always stay perfectly round ========== */ .step-num, .step-number, .how-num, .ref-num, .access-num, .ref-step .ref-num, .tip-num, .tl-dot { flex-shrink: 0 !important; flex-grow: 0 !important; min-width: inherit; box-sizing: border-box; line-height: 1; } /* ── Mobile table scroll ─────────────────────────────────────── */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1rem; } @media (max-width: 768px) { .table-scroll table, .table-scroll-wrap table { min-width: 480px; } } /* ── Hero heading sizes — prevent oversized text on small phones ────── */ @media (max-width: 480px) { /* Any element whose class contains "-hero" and has an h1/h2 child */ [class*="-hero"] h1, [class*="hero"] h1, .hero h1 { font-size: clamp(1.4rem, 7vw, 1.9rem) !important; line-height: 1.25; } [class*="-hero"] p, [class*="hero"] p { font-size: clamp(0.88rem, 3.5vw, 1rem) !important; } /* Hero subtitle max-width: don't constrain on mobile */ [class*="-hero"] p[style*="max-width"], [class*="hero"] p[style*="max-width"] { max-width: 100% !important; } } /* ── Ensure all inline max-width paragraph text doesn't overflow ─────── */ @media (max-width: 480px) { p[style*="max-width"], div[style*="max-width"] > p { max-width: 100% !important; } } /* ── Inline multi-column grids: collapse on mobile ───────────────────── */ @media (max-width: 640px) { [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns: repeat(3, 1fr)"], [style*="grid-template-columns:repeat(3,minmax(0,1fr))"] { grid-template-columns: 1fr !important; } /* 2-col inline grids collapse to 1 col on small phones */ [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"], [style*="grid-template-columns:1.15fr"], [style*="grid-template-columns: 1.15fr"], [style*="grid-template-columns:0.82fr"], [style*="grid-template-columns: 0.82fr"], [style*="grid-template-columns:1.2fr"] { grid-template-columns: 1fr !important; } [style*="grid-template-columns:repeat(4,minmax(0,1fr))"], [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 400px) { [style*="grid-template-columns:repeat(4,minmax(0,1fr))"], [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: 1fr !important; } } @media (max-width: 480px) { /* Improve card text readability on small phones */ [class*="card"] p, [class*="-card"] p, [class*="card-"] p { line-height: 1.6; font-size: max(0.85rem, 13.6px); } } @media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr !important; } } @media (max-width: 480px) { .hero { min-height: 300px !important; padding: 2.5rem 1rem !important; } } /* Mobile: all custom page hero classes */ @media (max-width: 480px) { .at-hero, .cp-hero, .dl-hero, .es-hero, .fs-hero, .ls-hero, .ot-hero, .mh-hero, .ts-hero, .faq-hero, .fg-hero, .apply-hero, .gloss-hero, .sc-hero, .ndis-hero, .blog-hero, .finder-hero, .fam-hero, .tm-hero, .events-hero, .loc-hero, .res-hero, .di-hero, .about-hero, .referral-hero, .hero-image, .pt-hero, .sl-hero { min-height: 220px !important; padding-top: 2rem !important; padding-bottom: 2rem !important; } } /* Mobile: minmax() inline grids not caught by substring selectors */ @media (max-width: 600px) { [style*="minmax(0,"] { grid-template-columns: 1fr !important; } } /* Scroll indicator for tables on mobile */ @media (max-width: 600px) { div[style*='overflow-x:auto'], div[style*='overflow-x: auto'] { -webkit-overflow-scrolling: touch; position: relative; } div[style*='overflow-x:auto'] table, div[style*='overflow-x: auto'] table { font-size: 0.82rem !important; } div[style*='overflow-x:auto']::after, div[style*='overflow-x: auto']::after { content: 'scroll →'; display: block; text-align: right; font-size: 0.72rem; color: #94a3b8; padding-top: 0.25rem; } } /* di-gallery: collapse to 1 col below 500px */ @media (max-width: 500px) { .di-gallery { grid-template-columns: 1fr !important; } } /* ── Reduce large inline section padding on mobile ───────────────── */ @media (max-width: 600px) { [style*='padding: 4rem'], [style*='padding:4rem'], [style*='padding: 3rem'], [style*='padding:3rem'] { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } [style*='padding: 4rem 0'], [style*='padding:4rem 0'] { padding: 1.5rem 1rem !important; } [style*='padding: 3.5rem'], [style*='padding:3.5rem'] { padding-top: 1.2rem !important; padding-bottom: 1.2rem !important; } } /* ── Portal main content side padding on mobile ───────────────────── */ @media (max-width: 600px) { .portal-main { padding-left: 0.65rem !important; padding-right: 0.65rem !important; } .portal-toolbar { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } } /* ── Submit buttons full-width on mobile ──────────────────────────── */ @media (max-width: 600px) { button[type='submit'], input[type='submit'], .btn-submit, .form-submit, [class*='submit-btn'], [class*='btn-submit'] { width: 100% !important; display: block !important; } } /* ── FIX: iOS input zoom — font-size must be ≥16px on all inputs ── */ @media (max-width: 768px) { input, select, textarea, input[type='text'], input[type='email'], input[type='tel'], input[type='password'], input[type='number'], input[type='search'], input[type='date'], input[type='time'] { font-size: 1rem !important; } } /* ── FIX: Portal tab tap targets — min 44px height on mobile ───── */ @media (max-width: 768px) { .portal-tab { padding: 0.85rem 0.5rem !important; min-height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; } } /* ── FIX: Mobile page links — min 44px tap target ───────────────── */ @media (max-width: 768px) { .mobile-page-link { min-height: 44px !important; padding: 0.75rem !important; display: flex !important; align-items: center !important; justify-content: center !important; } } /* ── FIX: Appointment assigner rows — stack vertically on mobile ─── */ @media (max-width: 600px) { .shift-assigner, .occurrence-assigner { flex-direction: column !important; align-items: stretch !important; } .shift-assigner select, .occurrence-assigner select { width: 100% !important; } .shift-assigner button, .occurrence-assigner button { width: 100% !important; text-align: center !important; } } /* ── FIX: Word-break on portal content areas ──────────────────────── */ @media (max-width: 600px) { .portal-main * { word-break: break-word; overflow-wrap: anywhere; } /* Exclude buttons and inputs from aggressive word-break */ .portal-main button, .portal-main input, .portal-main select { word-break: normal; overflow-wrap: normal; } } /* ── FIX: Prevent badge/pill text wrapping in table cells ─────────── */ table td span[style*='border-radius'], table td span[style*='background'], table td .yes-badge, table td .no-badge, table td .limited-badge, table td [class*='badge'], table td [class*='chip'], table td [class*='pill'], table td [class*='label'], table td [class*='status'], table td [class*='tag'] { white-space: nowrap !important; } /* ── FIX: Portal tables — ensure readable column widths on mobile ── */ .portal-main table, .admin-section table { min-width: 600px; } .portal-main div[style*='overflow-x'] table, .admin-section div[style*='overflow-x'] table { min-width: 600px; } /* ============================================================================ PHASE 3 — HEADER + FOOTER v2 (redesign 2026-05) Overrides existing header/footer styles using the same class names. No HTML changes needed across the 80+ pages — this CSS wins via being later in the cascade (later position + same specificity, or higher !important matching the existing pattern). ============================================================================ */ /* === HEADER v2 === */ body header { background: var(--surface-card); box-shadow: none; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px); } body header .header-content { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem var(--container-pad); max-width: var(--container-max); margin: 0 auto; gap: var(--space-4); } /* Clean wordmark logo - no gradient text */ body .logo { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: var(--ink); color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 0.55rem; line-height: 1; position: relative; transition: color var(--duration) var(--ease-out); } body .logo span { color: var(--ink); } /* Tiny terracotta dot accent before the wordmark */ body .logo::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex-shrink: 0; box-shadow: 0 0 0 3px var(--accent-soft); } body .logo:hover { color: var(--brand); } body .logo img { display: inline-block; height: 40px; width: auto; object-fit: contain; } /* Nav typography - Inter, refined */ body nav { display: flex; gap: 1.7rem; align-items: center; } body nav a { font-family: var(--font-body); font-size: 0.94rem; font-weight: 500; color: var(--ink); text-decoration: none; position: relative; transition: color var(--duration) var(--ease-out); letter-spacing: -0.005em; } body nav a:hover, body nav a:focus-visible { color: var(--brand); } /* Account button - clean dark filled */ body .nav-btn { background: var(--ink) !important; color: #fff !important; font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; padding: 0.6rem 1.25rem !important; border-radius: var(--radius) !important; letter-spacing: -0.005em; border: none; transition: background var(--duration) var(--ease-out), transform var(--duration) var(--ease-out); min-height: 40px; display: inline-flex; align-items: center; gap: 0.4rem; } body .nav-btn:hover { background: var(--brand-deep) !important; color: #fff !important; transform: translateY(-1px); } body .nav-btn:active { transform: translateY(0) scale(0.98); } /* Mobile hamburger - subtle */ body .mobile-menu { background: none; border: none; color: var(--ink); font-size: 1.35rem; padding: 0.6rem; min-width: 44px; min-height: 44px; cursor: pointer; display: none; border-radius: var(--radius-sm); transition: background var(--duration) var(--ease-out); } body .mobile-menu:hover { background: var(--surface-alt); } /* === DROPDOWN NAV v2 === */ body .nav-dropdown-toggle::after { font-size: 0.62rem; margin-left: 0.2rem; opacity: 0.6; } body .nav-dropdown > a { padding: 0.5rem 0; gap: 0.35rem; } body .dropdown-menu { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 0.55rem; min-width: 240px; margin-top: 0.6rem; /* subtle entrance animation handled by display toggle */ } body .dropdown-menu a { display: block; padding: 0.65rem 0.85rem; color: var(--ink); font-family: var(--font-body); font-weight: 500; font-size: 0.92rem; text-decoration: none; border-radius: var(--radius-sm); border-left: none; transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out), padding var(--duration) var(--ease-out); } body .dropdown-menu a:hover, body .dropdown-menu a:focus-visible { background: var(--surface-alt); color: var(--brand); border-left: none; padding-left: 0.85rem; /* override the old "slide on hover" pattern */ } body .dropdown-menu a:first-child, body .dropdown-menu a:last-child { border-radius: var(--radius-sm); } /* Mobile nav — when the hamburger is open, panel slides down clean */ @media (max-width: 768px) { body .mobile-menu { display: inline-flex; align-items: center; justify-content: center; } body nav { background: var(--surface-card); border-top: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: 0.5rem 0; } body nav a { padding: 0.85rem 1.25rem; font-size: 1rem; border-radius: 0; } body nav a:hover { background: var(--surface-alt); color: var(--brand); } body .nav-btn { margin: 0.6rem 1.25rem 0.4rem; justify-content: center; text-align: center; } body .nav-dropdown { width: 100%; } body .dropdown-menu { position: static; box-shadow: none; border: none; background: var(--surface); border-radius: 0; margin-top: 0; padding: 0 0 0.3rem; min-width: 0; } body .dropdown-menu a { padding-left: 2.5rem; font-size: 0.92rem; } body .dropdown-menu a:hover { padding-left: 2.5rem; } } /* === FOOTER v2 === */ body footer { background: var(--ink); color: rgba(255,255,255,0.85); padding: var(--space-16) 0 0; margin-top: var(--space-16); border-top: none; border-image: none; position: relative; overflow: hidden; isolation: isolate; } /* Subtle warm gradient + noise so the dark feels alive, not flat */ body footer::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 0% 0%, rgba(201, 120, 74, 0.10), transparent 65%), radial-gradient(ellipse 70% 50% at 100% 100%, rgba(26, 95, 158, 0.12), transparent 65%); pointer-events: none; z-index: 0; } body footer::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); pointer-events: none; opacity: 0.45; z-index: 0; } body footer > * { position: relative; z-index: 1; } body footer a { color: rgba(255,255,255,0.78) !important; text-decoration: none; transition: color var(--duration) var(--ease-out); } body footer a:hover { color: var(--accent) !important; } body footer p, body footer li, body footer small { color: rgba(255,255,255,0.78); } body .footer-main { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-12); padding-bottom: var(--space-12); max-width: var(--container-max); margin: 0 auto; padding-left: var(--container-pad); padding-right: var(--container-pad); } /* Brand column */ body .footer-brand { font-family: var(--font-display); font-size: 1.55rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: var(--space-3); display: inline-flex; align-items: center; gap: 0.5rem; } /* Terracotta dot in the brand wordmark (matches header logo) */ body .footer-brand::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } body .footer-brand span { color: rgba(255,255,255,0.65); font-weight: 500; letter-spacing: -0.01em; } body .footer-tagline { font-size: 0.9rem; color: rgba(255,255,255,0.65); line-height: 1.65; margin: 0 0 var(--space-5); max-width: 32ch; } body .footer-ndis-tag { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(201, 120, 74, 0.16); border: 1px solid rgba(201, 120, 74, 0.32); color: #f5b88f; font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; padding: 0.32rem 0.85rem; border-radius: var(--radius-full); margin-bottom: var(--space-5); letter-spacing: 0.04em; text-transform: uppercase; } body .footer-social { display: flex; gap: var(--space-2); } body .footer-social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); color: rgba(255,255,255,0.75) !important; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; transition: background var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out); } body .footer-social a:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; transform: translateY(-2px); } /* Column headings */ body .footer-col h4 { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin: 0 0 var(--space-5); padding: 0; border-bottom: none; } body .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; } body .footer-col ul li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.9rem; color: rgba(255,255,255,0.72); line-height: 1.45; } body .footer-col ul li i { color: var(--accent); width: 1rem; flex-shrink: 0; margin-top: 0.2rem; font-size: 0.82rem; } body .footer-col ul li a { color: rgba(255,255,255,0.78) !important; font-size: 0.9rem; text-decoration: none; } /* Bottom bar */ body .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: var(--space-5) var(--container-pad); max-width: var(--container-max); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); font-size: 0.82rem; } body .footer-bottom p { color: rgba(255,255,255,0.45); margin: 0; font-variant-numeric: tabular-nums; } body .footer-bottom-links { display: flex; gap: var(--space-5); flex-wrap: wrap; } body .footer-bottom-links a, body .footer-bottom a { color: rgba(255,255,255,0.55) !important; font-size: 0.82rem; } body .footer-bottom-links a:hover, body .footer-bottom a:hover { color: var(--accent) !important; } body .site-version { font-size: 0.7rem; opacity: 0.3; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.5px; color: rgba(255,255,255,0.4) !important; } /* Responsive footer */ @media (max-width: 980px) { body .footer-main { grid-template-columns: 1fr 1fr; gap: var(--space-10); } } @media (max-width: 560px) { body .footer-main { grid-template-columns: 1fr; gap: var(--space-8); padding-bottom: var(--space-8); } body footer { padding-top: var(--space-12); margin-top: var(--space-12); } body .footer-bottom { flex-direction: column; align-items: flex-start; text-align: left; } } /* =========================================================================== * PHASE 4 — SERVICE PAGES v2 OVERRIDES (2026-05-31) * Applies to all 8 service pages (daily-living, community-participation, * transport, support-coordination, youth, family, lifestyle, employment). * Pure CSS overrides — no HTML changes. `body .selector` wins cascade * against the inline