/* Forces a line break only on desktop/tablet (e.g. mid-headline breaks) — hidden on mobile so mobile wraps naturally. */ .br-desktop-tablet { display: inline; } @media (max-width: 600px) { .br-desktop-tablet { display: none; } } /* Opposite of .br-desktop-tablet — forces a line break only on mobile. Used on the welcome screen so "Let's set up..." drops to its own (smaller) line on mobile, while desktop/tablet keeps the single two-part headline break as before (2026-07-23). */ .br-mobile-only { display: none; } @media (max-width: 600px) { .br-mobile-only { display: inline; } } /* Welcome screen headline, second sentence — mobile only, smaller text so "Great news..." reads as the prominent title and "Let's set up..." reads as a lighter follow-on line. Same font-family as the rest of the heading, just smaller and with normal letter-spacing (tight tracking hurts legibility at this size). Desktop/tablet is untouched. */ @media (max-width: 600px) { .welcome-heading-sub { font-size: 16px; letter-spacing: normal; } } /* Vertically centre the steps/safety-copy column against the taller phone mockup, desktop/tablet only */ @media (min-width: 601px) { .welcome-steps-grid { align-items: center !important; } } /* Indent items 1, 3, 5 (the left column) of the numbered steps list, desktop/tablet only */ @media (min-width: 601px) { ul.steps-numbered li:nth-child(odd) { margin-left: 10px; } } /* ============================================================ MY LIFEJARS — MASTER STYLESHEET styles.css Decisions locked 2026-07-11: · Design tokens: System A (activation.html / app.html) · Body font: Roboto · Input border: 1.5px solid #8B95A1, border-radius 8px · Focus ring: :focus-visible only — orange rgba(232,146,10,0.35) on buttons, green rgba(0,200,83,0.18) on inputs · .btn-primary:hover: #C2410C (no box-shadow on any button) Sections: 1. SHARED CORE (System A tokens + shared components) 2. ACTIVATION.HTML additions 3. APP.HTML additions 4. INDEX.HTML 5. ES.HTML & CONTROL-DEMO.HTML (responder portals) 6. ORG-DEMO.HTML (org portal) ============================================================ */ /* ============================================================ SECTION 1 — SHARED CORE (System A) ============================================================ */ /* ============================================================ My LifeJars — Colors & Type Tokens ============================================================ Sources: brand doc (uploads/brand-doc.txt) + mylifejars.com Brand identity: warm, trustworthy, gold + navy, with stick- people whimsy. Three product lines have their own accent: • My LifeJars (core platform) → Navy + Gold + Orange • Life Story Writer → Yellow • Life Ready Planner → Turquoise • Pets → Green ============================================================ */ /* ---------- FONT FACES ---------- All brand fonts self-hosted from /fonts/ (woff2). No CDN dependency. Roles: Raleway — Display / headings Roboto — Body / UI Dancing Script — Gold script accent (emotional phrases only) Schoolbell — Marketing handwritten (with stick-people) Oswald — Condensed display (social posts) Courier New — System font, Life Story Writer accent only Children One — Handwritten variant (currently aliased to Schoolbell; drop ChildrenOne-Regular.woff2 into /fonts/ to enable) */ /* Children One — placeholder. Drop fonts/ChildrenOne-Regular.woff2 to enable. Currently falls back to Schoolbell (closest brand-matching handwritten). */ :root { /* ==================================================== CORE BRAND PALETTE — My LifeJars (Navy + Gold + Orange) ==================================================== */ /* Navy / Dark Blue scale */ --mlj-navy-900: #152332; /* Dark Blue — primary text/bg */ --mlj-navy-700: #314e6b; /* Lighter Dark Blue */ /* Gold scale */ --mlj-gold-900: #ac892e; /* Dark Gold — wht bg, button hover */ --mlj-gold-700: #f9aa44; /* Gold (primary brand amber) */ --mlj-gold-500: #e2ca8c; /* Light Gold */ --mlj-gold-300: #e2dbbc; /* Pale Gold */ --mlj-gold-200: #f4eee3; /* Barely Gold */ --mlj-gold-100: #fcfaf5; /* Tint of Gold (corrected from #cfcfaf5 typo) */ /* Orange — primary CTA accent */ --mlj-orange-700: #ff9800; /* Dark Orange — button hover */ --mlj-orange-500: #f9aa44; /* Orange */ /* ==================================================== PRODUCT — Life Story Writer (Yellow) ==================================================== */ --lsw-yellow-900: #ffab00; /* Darkest Yellow — button hover */ --lsw-yellow-700: #ffc400; /* Dark Yellow — wht bg primary */ --lsw-yellow-500: #ffd180; /* Yellow */ --lsw-yellow-400: #ffe270; /* Light Yellow */ --lsw-yellow-300: #fff063; /* Pale Yellow */ --lsw-yellow-200: #fff5d1; /* Barely Yellow */ --lsw-yellow-100: #fff8e1; /* Hint of Yellow */ /* ==================================================== PRODUCT — Life Ready Planner (Turquoise) ==================================================== */ --lrp-turq-900: #00bcd4; /* Darker Turquoise — wh bg */ --lrp-turq-700: #26c6da; /* Dark Turquoise — OP bar */ --lrp-turq-500: #80deea; /* Turquoise */ --lrp-turq-300: #a4f5ff; /* Light Turquoise */ --lrp-turq-200: #e0f7fa; /* Pale Turquoise */ /* ==================================================== PRODUCT — Pets (Green) ==================================================== */ --pet-green-900: #00c853; /* Green */ --pet-green-700: #64dd17; /* Lighter green — button hover */ /* ==================================================== UTILITY PALETTE ==================================================== */ --mlj-red: #d50000; /* Errors / critical */ --mlj-paleblue: #4fc3f7; /* Info accent */ --mlj-greenyblue: #428EA2; /* Life Profiles page accent */ --mlj-grey-100: #f5f5f5; /* Grey - Light */ --mlj-grey-500: #767676; /* Grey - Mid */ --slate-grey: #6B7280; /* Slate grey — selected toggles, Pill B, mid-ui grey */ --mlj-white: #ffffff; --mlj-black: #000000; /* ==================================================== SEMANTIC TOKENS — light theme (default) ==================================================== */ --bg-page: #ffffff; --bg-soft: var(--mlj-gold-200); /* warm cream panel */ --bg-tint: var(--mlj-gold-100); /* barely-there warm */ --bg-navy: var(--mlj-navy-900); /* hero / footer */ --bg-navy-soft: var(--mlj-navy-700); --fg-default: var(--mlj-navy-900); --fg-muted: #4a5b6e; --fg-subtle: #767676; --fg-on-navy: #ffffff; --fg-on-gold: var(--mlj-navy-900); --accent: var(--mlj-gold-700); --accent-strong: var(--mlj-gold-900); --cta: var(--mlj-orange-500); --cta-hover: var(--mlj-orange-700); --border-soft: rgba(21, 35, 50, 0.10); --border-default: rgba(21, 35, 50, 0.18); --border-gold: var(--mlj-gold-500); --success: var(--pet-green-900); --warning: var(--mlj-orange-500); --danger: var(--mlj-red); --info: var(--mlj-paleblue); /* Shadows — soft, warm */ --shadow-sm: 0 1px 2px rgba(21,35,50,0.06), 0 1px 1px rgba(21,35,50,0.04); --shadow-md: 0 4px 12px rgba(21,35,50,0.08), 0 2px 4px rgba(21,35,50,0.04); --shadow-lg: 0 12px 32px rgba(21,35,50,0.12), 0 4px 8px rgba(21,35,50,0.06); --shadow-gold: 0 8px 24px rgba(197,175,128,0.35); /* Radii */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px; /* Spacing scale (4px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ==================================================== TYPOGRAPHY — families ==================================================== */ /* Typewriter — Life Story Writer accent only */ --font-typewriter: 'Courier New', 'Courier', ui-monospace, monospace; --font-display: 'Raleway', system-ui, -apple-system, sans-serif; --font-body: 'Roboto', system-ui, -apple-system, sans-serif; --font-handwritten: 'Schoolbell', 'Children One', cursive; --font-script: 'Dancing Script', cursive; --font-social: 'Oswald', 'Raleway', sans-serif; /* Weights */ --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-extra: 800; /* Type scale (clamped for fluid headings) */ --fs-hero: clamp(2.5rem, 5vw, 4rem); /* 40 → 64 */ --fs-h1: clamp(2rem, 3.6vw, 3rem); /* 32 → 48 */ --fs-h2: clamp(1.5rem, 2.6vw, 2.25rem); --fs-h3: 1.5rem; /* 24 */ --fs-h4: 1.25rem; /* 20 */ --fs-h5: 1.0625rem; /* 17 */ --fs-body: 1rem; /* 16 */ --fs-small: 0.875rem; /* 14 */ --fs-caption: 0.75rem; /* 12 */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.55; --lh-loose: 1.75; } /* ==================================================== PRODUCT THEME OVERRIDES Apply via class on a wrapper element to switch accent: ... ==================================================== */ .theme-life-story-writer { --accent: var(--lsw-yellow-700); --accent-strong: var(--lsw-yellow-900); --bg-soft: var(--lsw-yellow-100); --bg-tint: var(--lsw-yellow-200); --cta: var(--lsw-yellow-700); --cta-hover: var(--lsw-yellow-900); } .theme-life-ready-planner { --accent: var(--lrp-turq-900); --accent-strong: var(--lrp-turq-700); --bg-soft: var(--lrp-turq-200); --bg-tint: #f0fcfd; --cta: var(--lrp-turq-900); --cta-hover: var(--lrp-turq-700); } .theme-pets { --accent: var(--pet-green-900); --accent-strong: var(--pet-green-700); --cta: var(--pet-green-900); --cta-hover: var(--pet-green-700); } /* ==================================================== SEMANTIC ELEMENT STYLES ==================================================== */ html, body { background: var(--bg-page); color: var(--fg-default); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--fg-default); letter-spacing: -0.01em; line-height: var(--lh-tight); text-wrap: balance; margin: 0 0 var(--space-4) 0; } h1 { font-size: var(--fs-h1); font-weight: var(--w-bold); } h2 { font-size: var(--fs-h2); font-weight: var(--w-bold); } h3 { font-size: var(--fs-h3); font-weight: var(--w-semibold); } h4 { font-size: var(--fs-h4); font-weight: var(--w-semibold); } h5 { font-size: var(--fs-h5); font-weight: var(--w-semibold); letter-spacing: 0; } h6 { font-size: var(--fs-small); font-weight: var(--w-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); } .hero-title { font-family: var(--font-display); font-size: var(--fs-hero); font-weight: var(--w-extra); line-height: 1.05; letter-spacing: -0.02em; } p { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); text-wrap: pretty; margin: 0 0 var(--space-4) 0; } .lead { font-size: 1.125rem; line-height: var(--lh-loose); color: var(--fg-muted); } small, .small { font-size: var(--fs-small); } .caption { font-size: var(--fs-caption); color: var(--fg-subtle); } /* The cursive "Dancing Script" is used for emotive sub-headings ("My Story, Stored", "Be ready for anything") */ .script-accent { font-family: var(--font-script); font-weight: var(--w-bold); color: var(--accent-strong); font-size: 1.5em; } /* The "Schoolbell" handwritten font is used in social/marketing alongside the stick-people illustrations */ .handwritten { font-family: var(--font-handwritten); letter-spacing: 0.01em; } /* Oswald — condensed display, used in social posts */ .social-display { font-family: var(--font-social); font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: 0.04em; } a { color: var(--accent-strong); text-decoration-thickness: 1.5px; text-underline-offset: 3px; } a:hover { color: var(--mlj-orange-700); } code, kbd, samp, pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; background: var(--mlj-grey-100); padding: 0.1em 0.35em; border-radius: var(--radius-xs); } /* ICE Jar — Life Passport Activation prototype styles Uses tokens from /colors_and_type.css. ICE Jar sub-brand: navy chrome + red accent (per ICEBOX-BRAND.md). Orange CTAs inherited from master MLJ brand for consistency. */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scrollbar-gutter: stable; } /* On the activation wizard, body.activation-mode already sets overflow:hidden — the page itself never scrolls; all scrolling happens inside .step-card--scrollable's own overflow-y:auto with its own thin custom scrollbar. The reserved gutter above still ate a permanent ~15-17px strip on the right of the whole page though, since it doesn't know the body will never need it — pushing every card's right-hand padding out of sync with its left (2026-07-22). Nothing here actually scrolls, so no gutter is needed. */ html:has(body.activation-mode) { scrollbar-gutter: auto; } body { background: var(--mlj-navy-900); min-height: 100vh; color: var(--fg-default); } /* App shell — simulates the pop-up that appears when Life Jar is plugged in. Sits on a navy page background with a white working surface inside. */ .app-shell { max-width: 1100px; margin: 0 auto; padding: 68px 24px 40px; position: relative; } /* Dashboard full-screen mode — strips all prototype chrome, card fills viewport */ .app-shell--dashboard { max-width: 100%; padding: 0; min-height: 100vh; display: flex; flex-direction: column; background: #f5f5f5; } /* Ensure body doesn't show navy behind full-height screens */ body:has(.app-shell--dashboard) { background: #f5f5f5; } /* Push app content below fixed header without a visible gap — all main body flex containers start at y=0 behind the fixed header (z-index 200) so the 58px padding is invisible — content appears right at the header bottom. */ .app-shell--dashboard .app-flex-outer, .app-shell--dashboard .step-card > div[style*="min-height: 600px"], .app-shell--dashboard .step-card > div[style*="min-height: calc(100vh - 116px)"] { padding-top: 58px; } .app-shell--dashboard .step-card { max-width: 100%; margin: 0; border-radius: 0; box-shadow: none; border: none; flex: 1; display: flex; flex-direction: column; } /* Content row fills remaining height after the app header */ .app-shell--dashboard .step-card > .dash-content-row { flex: 1; } /* When the prototype's app-shell is on a navy body, the top bar text needs to be light */ .top-bar .product-name { color: #fff; font-weight: 600; } .top-bar .icebox-tag { color: rgba(255,255,255,0.85); font-weight: 500; } .top-bar .icebox-tag .dot { background: var(--mlj-red); box-shadow: 0 0 0 3px rgba(213,0,0,.22); animation: pulse-red 2s ease-in-out infinite; } .top-bar .icebox-tag .dot--green { background: #16A34A; box-shadow: 0 0 0 3px rgba(22,163,74,.25); animation: pulse-green 2s ease-in-out infinite; } @keyframes pulse-green { 0%, 100% { box-shadow: 0 0 0 3px rgba(22,163,74,.25); } 50% { box-shadow: 0 0 0 6px rgba(22,163,74,.10); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse-orange { 0%, 100% { box-shadow: 0 0 0 3px rgba(232,121,38,.22); } 50% { box-shadow: 0 0 0 6px rgba(232,121,38,.10); } } .access-btn { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.18); } .access-btn:hover { border-color: var(--mlj-red); color: #fff; background: rgba(213,0,0,0.12); } .access-btn.active { background: var(--mlj-red); color: #fff; border-color: var(--mlj-red); } @keyframes pulse-red { 0%, 100% { box-shadow: 0 0 0 0 rgba(213,0,0,.45); } 50% { box-shadow: 0 0 0 6px rgba(213,0,0,0); } } /* ---------- Top bar ---------- */ .top-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 150; width: 100%; height: 68px; background: var(--mlj-navy-900); margin: 0; box-sizing: border-box; display: flex; align-items: center; } .brand-lockup { display: flex; align-items: center; gap: 14px; } .brand-lockup img.logo { width: 56px; height: auto; display: block; } .brand-lockup .lockup-text { display: flex; flex-direction: column; line-height: 1.05; } .brand-lockup .product-name { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: #fff; letter-spacing: -0.01em; } .brand-lockup .icebox-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.85); } .brand-lockup .icebox-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mlj-red); } /* Accessibility toggles top-right */ .demo-bar { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 200; height: 68px; display: flex; align-items: center; gap: 8px; padding: 0 12px; pointer-events: none; } .demo-bar .access-btn { padding: 6px 10px; min-width: 36px; justify-content: center; pointer-events: auto; } .access-toggles { display: flex; align-items: center; gap: 10px; } .access-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1.5px solid #8B95A1; background: #fff; color: var(--mlj-navy-900); font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 160ms ease-out; } .access-btn:hover { border-color: #C0C4CC; background: #F0F1F3; color: var(--mlj-navy-900); } .access-btn.active { background: #E4E6EA; color: var(--mlj-navy-900); border-color: #B8BBC4; } .access-btn .label-large-text { font-size: 14px; } .access-btn svg { width: 15px; height: 15px; flex-shrink: 0; } /* Large-text mode applies via body class */ body.large-text { font-size: 19px; } body.large-text .form-field input, body.large-text .form-field select, body.large-text .form-field textarea { font-size: 19px; padding: 16px 18px; } body.large-text h1.step-title { font-size: 36px; } body.large-text .step-subtitle { font-size: 19px; } body.large-text .btn { font-size: 17px; padding: 16px 28px; } body.large-text .step-card { zoom: 1.2; } body.large-text .emergency-phone { zoom: 1.1; } /* ---------- Progress rail ---------- */ /* Sits on navy app shell — default state is light text */ .progress-rail { position: fixed; top: 68px; left: 0; right: 0; z-index: 149; display: flex; align-items: center; gap: 8px; justify-content: center; padding: 6px 0 10px; border-bottom: 3px solid var(--mlj-red); background: var(--mlj-navy-900); box-sizing: border-box; } /* Thornfield Festival — progress-rail underline is orange instead of the default red, to match the event's brand color (2026-07-23). */ body.activation-mode.event-glastonbury .progress-rail { border-bottom-color: var(--mlj-orange-500); } /* Desktop + tablet only: nudge the step-circle row 10px right (mobile left as-is) */ /* Uses padding, not transform, so the fixed full-bleed navy background isn't dragged off the left edge */ @media (min-width: 601px) { .progress-rail { padding-left: 20px; } } .progress-dot { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: rgba(255,255,255,0.7); text-transform: uppercase; } .progress-dot .num { width: 26px; height: 26px; border-radius: 50%; background: #e8eaed; border: 1.5px solid #ffffff; color: #000; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 700; font-size: 13px; line-height: 1; text-align: center; transition: all 200ms ease-out; } .progress-dot.done .num { background: var(--pet-green-900); border-color: var(--pet-green-900); color: #fff; } .progress-dot.current { color: #fff; } .progress-dot.current .num { background: var(--mlj-orange-500); border-color: var(--mlj-orange-500); color: #fff; font-family: var(--font-body); font-weight: 800; line-height: 1; text-align: center; box-shadow: 0 0 0 4px rgba(232, 121, 38, 0.25); } .progress-divider { flex: 0 0 36px; height: 3px; background: rgba(255,255,255,0.45); border-radius: 2px; } .progress-divider.done { background: var(--pet-green-900); } /* ---------- Card / step container ---------- */ .step-card { background: #fff; border-radius: var(--radius-xl); padding: 28px 48px 28px; box-shadow: 0 8px 30px rgba(0,0,0,0.18); border: 1px solid var(--border-soft); max-width: 880px; margin: 20px auto 20px; position: relative; overflow: visible; } .step-card::before { display: none; } .step-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--orange-dark, #C2410C); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; } h1.step-title { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 8px; color: var(--mlj-navy-900); } .step-title .script { font-family: var(--font-script); font-weight: 700; font-size: 1.05em; color: var(--mlj-gold-900); display: inline-block; transform: translateY(2px); } .step-subtitle { font-family: var(--font-body); font-size: 17px; line-height: 1.5; color: var(--fg-muted); margin: 0 0 12px; max-width: 640px; } /* Shiny gold variant — used on navy hero surfaces (welcome / celebration). Mirrors the shiny gold logo treatment per ICEBOX-BRAND.md. */ .btn-gold-shiny { background: linear-gradient(135deg, #f4dfa1 0%, var(--mlj-gold-700) 32%, var(--mlj-gold-900) 60%, var(--mlj-gold-700) 80%, #f4dfa1 100%); color: var(--mlj-navy-900); border: 1px solid var(--mlj-gold-900); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(120,90,20,0.3), 0 6px 18px rgba(172,137,46,0.45), 0 2px 4px rgba(0,0,0,0.18); font-weight: 700; text-shadow: 0 1px 0 rgba(255,255,255,0.25); } .btn-gold-shiny:hover { background: linear-gradient(135deg, #fbe9b6 0%, #d6b970 32%, var(--mlj-gold-900) 60%, #d6b970 80%, #fbe9b6 100%); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(120,90,20,0.3), 0 10px 24px rgba(172,137,46,0.55), 0 3px 6px rgba(0,0,0,0.22); } /* Shiny orange variant — primary CTA on navy hero surfaces. Same dimensional treatment as gold-shiny but in MLJ orange. */ .btn-orange-shiny { background: #EA580C; color: #fff; border: none; font-weight: 700; } .btn-orange-shiny:hover { background: #C2410C; } .btn { font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 1.2; padding: 10px 22px; border-radius: 10px; border: 1.5px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: all 160ms ease-out; white-space: nowrap; min-height: 42px; } .btn:active { transform: scale(0.97); } .btn-primary { background: #EA580C; color: #fff; border-color: transparent; } .btn-primary:hover { background: #C2410C; } .btn-primary:disabled { background: #F4A89A; border: 1.5px solid transparent; opacity: 1 !important; cursor: not-allowed; } .btn-ghost { background: transparent; color: var(--mlj-navy-900); border-color: #8B95A1; } .btn-ghost:hover { border-color: var(--mlj-navy-900); background: var(--mlj-grey-100); } .btn-ghost-grey { background: #F1F5F9; color: #475569; border: 1.5px solid #CBD5E1; } .btn-ghost-grey:hover { background: #E2E8F0; border-color: #94A3B8; } /* Compact secondary action buttons — eg scan QR / enter ICE code */ .btn.btn-sm { padding: 8px 14px; font-size: 13px; gap: 6px; } .btn-link { background: none; border: none; color: var(--mlj-navy-700); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 8px 0; } .btn-link:hover { color: var(--mlj-orange-700); } .btn-link-black { background: none; border: none; color: #1E293B; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; font-size: 13px; font-family: inherit; } .btn-link-black:hover { color: #EA580C; } /* Tooltip info icon — 18px solid grey circle with white i, used inline next to labels */ .tip-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #64748B; border: none; color: #fff; font-size: 11px; font-weight: 700; font-style: italic; line-height: 1; cursor: pointer; padding: 0; flex-shrink: 0; vertical-align: middle; box-sizing: border-box; appearance: none; -webkit-appearance: none; } .tip-icon:hover { background: #475569; } .btn-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-soft); } .btn-row .right { display: flex; gap: 12px; align-items: center; } /* Language grid — subgrid so label/input/hint rows align across columns */ .language-grid { grid-template-rows: auto auto auto; row-gap: 6px; } .language-grid .form-field { display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; } /* ---------- Form fields ---------- */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin-top: 8px; align-items: end; } .form-field { display: flex; flex-direction: column; gap: 6px; } /* Form section wrap — desktop default (stripped on mobile) */ .form-section-wrap { background: #FFF8F0; border: 1.5px solid #FFD0A0; border-radius: 8px; padding: 20px 20px 18px 20px; margin-bottom: 20px; overflow: visible; } .form-section-wrap--child { background: #eef4ff; border-color: #b8cef0; padding: 20px 24px; } /* Their/Your photo box — half width by default (desktop). Mobile still forces it full width via the 880px block's .photo-field{width:100% !important}, and tablet has its own scoped 50% override — both outrank this via !important, so this plain rule only actually takes effect on desktop. */ .photo-field { max-width: 50%; } /* Accommodation-group "add by ticket number" input — half width on desktop/tablet, full width on mobile via the 600px block below (2026-07-22). */ .accom-group-ticket-input { max-width: 50%; } /* "Skip for now — you can add this later" (accommodation step) — right-justified on desktop/tablet, left-aligned (default) on mobile (2026-07-23). */ @media (min-width: 601px) { .skip-accom-link { display: block; margin-left: auto; } } .form-field.full { grid-column: 1 / -1; } /* Event Info modal — Event name + Dates share a row on desktop/tablet, 2/3 + 1/3 split. Stacks to a single column on mobile (2026-07-22). */ .event-info-row { display: flex; flex-direction: column; gap: 14px; } @media (min-width: 601px) { .event-info-row { flex-direction: row; gap: 16px; } .event-info-row > .form-field:first-child { flex: 2 1 0; } .event-info-row > .form-field:last-child { flex: 1 1 0; } } .form-field label { font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--mlj-navy-900); letter-spacing: 0.01em; } /* Compact label for modals and dense form blocks */ .field-label, .form-field label.field-label { font-family: var(--font-body); font-size: 13px !important; font-weight: 700; color: var(--mlj-navy-900); letter-spacing: 0.01em; margin-bottom: 0; } .hazard-group-label { font-size: 12px; font-weight: 700; color: var(--mlj-navy-900); margin-bottom: 8px; } /* Primary button — small (Edit), only when not combined with .btn pill class */ .btn-primary:not(.btn) { background: #EA580C; color: #fff; border: none; border-radius: 8px; padding: 5px 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s ease; } .btn-primary:not(.btn):hover { background: #C2410C; } /* Primary button — large (Save changes) */ .btn-primary-lg { background: #EA580C; color: #fff; border: none; border-radius: 8px; padding: 9px 24px; font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.15s ease; } .btn-primary-lg:hover { background: #C2410C; } .form-field label .req { color: var(--mlj-red); margin-left: 2px; } .form-field input, .form-field select, .form-field textarea { font-family: var(--font-body); font-size: 16px; padding: 13px 16px; border: 1.5px solid #8B95A1; border-radius: var(--radius-sm); background: #fff; color: var(--fg-default); transition: all 160ms ease-out; outline: none; -webkit-appearance: none; appearance: none; box-sizing: border-box; } /* Safari: restore chevron for .form-field selects */ .form-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238B95A1' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 10px; padding-right: 36px; } button:focus { outline: none; box-shadow: none; } button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(232, 146, 10, 0.35); } input.text-input:focus-visible, select.text-input:focus-visible { outline: none; border-color: #E8920A; box-shadow: 0 0 0 3px rgba(232, 146, 10, 0.18); background: #ffffff; } select:focus-visible { outline: none; border-color: #E8920A; box-shadow: 0 0 0 3px rgba(232, 146, 10, 0.18); background: #ffffff; } select { accent-color: #EA580C; color: #152332; } select option { color: #152332; } input::placeholder, textarea::placeholder { color: #767676; opacity: 1; } .form-field input::placeholder, .form-field textarea::placeholder { color: var(--fg-subtle); opacity: 1; } .form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible { border-color: var(--pet-green-900); box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.18); } /* Selected option inside any open , which is why this one alone was rendering full width. Higher-specificity selector needed to win over that catch-all. */ .step-card select.rel-half-field { max-width: 50% !important; } /* Assisted-adult journey — "Select your relationship" (Family) dropdown must stay a third-column width, same 880px-catch-all problem as .rel-half-field above. */ .step-card select.rel-third-field { max-width: 33.333% !important; } /* Child journey — organisation summary card ("Manchester Children's Services / Edit") half width, matching the fields above it. */ .step-card .org-summary-card--child { max-width: 50% !important; box-sizing: border-box !important; } /* About You / About the child — "Their/Your photo" box was forced to full row width (gridColumn:'1 / -1' in JSX, plus the 880px block's .photo-field{width:100% !important}). Cap it at half width on tablet; the rest of that gender/pronouns/marital/title grid is unchanged since only the photo box was reported as wrong. */ .photo-field { max-width: 50% !important; } /* Emergency review screen ("This is what an emergency service will see") — restore the desktop 2-column layout (phone in its own left column, title + body text in the right column) instead of the stacked/centred mobile layout the 880px block above forces. Mobile (<=600px) is untouched. */ .emergency-stage { grid-template-columns: 260px 1fr !important; grid-template-areas: "phone title" "phone body" !important; gap: 16px 32px !important; } .emergency-context { position: sticky !important; top: 24px !important; } } /* ── iPad portrait: 768px ── */ /* Top padding kept at 68px (not reduced) — the fixed navy top-bar + step-dot rail above still take up ~113px here, unchanged from desktop, so reducing it clipped the white card under the header */ @media (max-width: 768px) { .app-shell { padding: 68px 16px 36px; } .step-card { padding: 24px 28px; margin-top: 20px; } /* Welcome screen's outer wrapper carries both .step-card and .welcome-card — the padding above leaks onto it too since .welcome-card's padding:0 loses the source-order tie. Higher specificity forces it back to 0 so only the inner white panel below shows padding, not a second transparent box around it. */ .step-card.welcome-card { padding: 0; } .welcome-content-panel { padding: 24px 28px; } .welcome-heading { font-size: 22px; } h1.step-title { font-size: 18px; } .brand-lockup .product-name { font-size: 22px; } .activation-card { padding: 24px 28px; } .activation-title { font-size: 24px; } } /* ── Mobile: 600px and below ── */ @media (max-width: 600px) { .accom-group-ticket-input { max-width: 100% !important; } /* Demo nav — top-centred on mobile, just below header */ /* Demo bar — full-width compact strip on mobile so all pills are visible */ .demo-skip { top: 25px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; gap: 3px !important; padding: 9px 6px 4px !important; justify-content: center; white-space: nowrap; } .demo-skip .demo-skip__btn { font-size: 10px !important; padding: 0 6px !important; height: 24px !important; flex-shrink: 0 !important; white-space: nowrap; } .demo-skip .demo-skip__btn--arrow { width: 22px !important; height: 22px !important; font-size: 12px !important; padding: 0 !important; } .demo-skip .demo-skip__screen { min-width: 50px !important; font-size: 10px !important; padding: 0 3px !important; } /* Two-line PORTAL buttons → single line on mobile */ .demo-skip .demo-skip__btn[style*="flex-direction: column"] { flex-direction: row !important; gap: 3px !important; height: 24px !important; padding: 0 6px !important; } /* Password fields — stack */ .pw-field-row { flex-direction: column !important; } /* Welcome-screen steps grid — image row, then text row underneath, instead of squeezing "The next few steps..." and the numbered steps into a narrow column beside the image (2026-07-22). */ .welcome-steps-grid { grid-template-columns: 1fr !important; } /* "Are they at the festival with you?" tile — full width on mobile so the label and Yes/No toggle sit on one row instead of wrapping onto two lines (which inflated the tile's height). The toggle now lands in the right-hand half of the row, per the existing space-between layout (2026-07-22). */ .festival-toggle-tile { width: 100% !important; flex-wrap: nowrap !important; } /* Steps grid — single column */ ul.steps-numbered { grid-template-columns: 1fr; gap: 8px; } ul.steps-numbered li { font-size: 13px; align-items: flex-start; } ul.steps-numbered li .num { width: 22px; height: 22px; font-size: 11px; flex-shrink: 0; margin-top: 1px; } /* QR camera — compact on mobile */ .qr-camera { width: 72px !important; height: 72px !important; } .qr-panel { grid-template-columns: 72px 1fr; gap: 16px; } .qr-detected { font-size: 10px; } .qr-detected .check { font-size: 20px; } /* Reduce excess vertical space */ .step-eyebrow { padding: 4px 10px; font-size: 10px; margin-bottom: 6px; } .step-subtitle { margin-bottom: 8px; } .form-grid { grid-template-columns: 1fr !important; margin-top: 4px; gap: 14px 16px; } /* btn-row mobile margin handled below */ /* icebox-tag and title — hide on mobile */ .brand-lockup .icebox-tag { display: none; } .brand-lockup .lockup-text { display: none; } .app-shell { padding: 8px 12px 0; } /* Top bar — shrink logo text, stack if needed */ .brand-lockup .product-name { font-size: 16px; } .brand-lockup { gap: 8px; } .brand-lockup img.logo { width: 35px; } .access-btn { padding: 8px 10px; font-size: 12px; gap: 5px; } /* Glastonbury event activation — on mobile, put "Create Your ICE Record" underneath the festival logo instead of hiding it (which the generic .brand-lockup .lockup-text rule above still does for the plain activation flow and the main app header) (2026-07-22). */ body.activation-mode.event-glastonbury .brand-lockup { flex-direction: column; align-items: center; text-align: center; gap: 4px; } body.activation-mode.event-glastonbury .brand-lockup .lockup-text { display: flex; } /* QR scanned row — stack vertically on mobile */ .qr-scanned-row { flex-direction: column !important; } .qr-scanned-row > div[style*="flex:1"], .qr-scanned-row > div[style*="flex: 1"] { width: 100%; } /* Progress rail — compact circles only */ .progress-dot { font-size: 0; gap: 0; } .progress-dot .num { font-size: 11px; width: 20px; height: 20px; } .progress-divider { flex: 0 0 10px; } .progress-rail { padding: 5px 0 7px; gap: 6px; } /* Cards */ .step-card { padding: 20px 16px 20px; margin-top: 12px; border-radius: 16px; border-bottom: none; } /* Postcode lookup row — prevent Find address button clipping */ .postcode-lookup-row { overflow: hidden; } .postcode-lookup-row .btn-ghost-grey, .postcode-lookup-row button[style*="whiteSpace"] { padding-left: 10px !important; padding-right: 10px !important; flex-shrink: 0; } /* Phone input — reduce side padding so widget looks like a normal phone field */ .form-section-wrap { padding-left: 12px !important; padding-right: 12px !important; } .phone-flag-select { min-width: 80px !important; max-width: 90px !important; padding: 0 6px !important; } .phone-number-input { padding: 10px 10px !important; } .step-card--scrollable { clip-path: inset(0 round 16px); } .welcome-card { margin: 12px auto 0; border-radius: 16px; } .welcome-content-panel { padding: 20px 16px 20px; border-radius: 14px; } /* Typography */ h1.step-title { font-size: 20px; } .welcome-heading { font-size: 26px; } .step-subtitle { font-size: 14px; } .activation-title { font-size: 20px !important; } .activation-card { padding: 10px 16px 16px; } /* Buttons */ .btn { font-size: 14px; padding: 12px 18px; gap: 7px; } .btn-row { flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; } .btn-row .right { flex-direction: row; gap: 8px; width: auto; } .btn-row .right .btn { width: auto; font-size: 13px; padding: 9px 14px; } .btn-row > .btn { width: auto; font-size: 13px; padding: 9px 14px; } /* Photo uploader */ .photo-uploader { flex-direction: column; align-items: flex-start; gap: 14px; } .photo-thumb { width: 72px; height: 72px; } /* QR step */ .qr-panel { grid-template-columns: 1fr; } .qr-camera { width: 120px; height: 120px; } /* Choice / household grid */ .choice-grid { grid-template-columns: 1fr; } .choice-card:not(.choice-card--solo) .illo img { height: 136px !important; } /* Storage grid */ .storage-grid { grid-template-columns: 1fr; } /* Emergency stage */ .emergency-stage { grid-template-columns: 1fr; grid-template-areas: "title" "phone" "body"; } .emergency-context { position: static; } /* Welcome screen illustration */ .welcome-illo { display: none; } /* Dashboard — navy header */ .step-card > div[style*="navy"] { padding: 16px !important; } /* Welcome screen — bottom row (internet req + button) */ .welcome-bottom-row { flex-direction: column; align-items: stretch; } .welcome-bottom-row .welcome-cta-btn { align-self: flex-end; margin-left: 0; } /* Done / activation screens */ .done-screen p { font-size: 15px; } .welcome-footer-note { font-size: 12px; } /* Summary grid — single column */ .summary-grid { grid-template-columns: 1fr; gap: 10px; padding: 16px; } .summary-grid .row { flex-wrap: wrap; } .summary-grid .row .v { white-space: normal; } /* Activation success — hero green band */ .activation-hero-band { padding: 16px !important; gap: 16px !important; } /* Activation success — 2-col summary boxes → single column */ .activation-summary-grid { grid-template-columns: 1fr !important; gap: 10px !important; } /* Password row — transparent label spacer hidden; button full-width */ .pw-field-row { flex-direction: column !important; gap: 12px !important; } .pw-field-row .pw-label-spacer { display: none !important; } .pw-field-row .pw-submit-btn { width: 100%; justify-content: center; } /* QR sticker placement grid → single column */ .activation-placement-grid { grid-template-columns: 1fr !important; } /* Emergency screen medications + allergies grid → single column */ .emergency-meds-grid { grid-template-columns: 1fr !important; } } /* ── Small phones: 380px and below ── */ @media (max-width: 380px) { .app-shell { padding: 6px 8px 24px; } .brand-lockup .product-name { font-size: 14px; } .brand-lockup img.logo { width: 29px; } .progress-dot .num { font-size: 10px; width: 18px; height: 18px; } .progress-divider { flex: 0 0 8px; } .progress-rail { gap: 4px; } h1.step-title { font-size: 18px; } .welcome-heading { font-size: 22px; } .btn { font-size: 13px; padding: 11px 14px; } .step-card { padding: 16px 12px; } .welcome-content-panel { padding: 16px 12px; } .demo-bar { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 200; height: 68px; display: flex; align-items: center; gap: 8px; padding: 0 12px; pointer-events: none; } .demo-bar .access-btn { padding: 6px 10px; min-width: 36px; justify-content: center; pointer-events: auto; } .access-toggles { gap: 6px; } } /* ── Select option highlight — override browser blue ──────────────────────── */ select option:checked, select option:hover { background: #E8920A !important; color: #fff !important; } /* ── Focus styles — orange ring + pale orange fill ────────────────────────── */ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none !important; border-color: #E8920A !important; background-color: #fff !important; box-shadow: 0 0 0 3px rgba(232, 146, 10, 0.15) !important; } @media (max-width: 600px) { .cond-card-grid { grid-template-columns: 1fr !important; } } input[type="date"] { font-family: inherit; font-size: inherit; min-width: 160px; accent-color: #EA580C; } input[type="date"] { accent-color: #8B95A1; } input[type="date"]::-webkit-datetime-edit-text, input[type="date"]::-webkit-datetime-edit-month-field, input[type="date"]::-webkit-datetime-edit-day-field, input[type="date"]::-webkit-datetime-edit-year-field { color: var(--fg-subtle); } /* ═══════════════════════════════════════════════════════ MOBILE APP LAYOUT — phone-first fixes (≤600px) These use !important to override JSX inline styles ═══════════════════════════════════════════════════════ */ /* ── Fixed sidebar — stays put on scroll ─────────────────────── */ .app-sidebar { position: fixed !important; top: 58px; left: 0; height: calc(100vh - 58px); z-index: 50; padding-top: 8px; overflow: hidden; scrollbar-width: none; -ms-overflow-style: none; } .app-sidebar::-webkit-scrollbar { display: none; } .app-flex-outer { margin-left: 72px; } /* Sidebar inner div — desktop/tablet: tighten top padding so DASHBOARD icon aligns with jar nav icons at the top of the content area */ @media (min-width: 601px) { .app-sidebar > div { padding-top: 4px !important; } } /* Sidebar hidden on mobile — see main 600px block below */ @media (max-width: 600px) { /* Content inner — reduce SIDE padding on mobile only (was overriding all four sides, which clobbered per-page top/bottom padding the same way the 880px version did — eg a "page title" + "cards" wrapper pair designed with a small 14px gap between them would get forced to a much bigger one instead. Bottom clearance for the mobile tab bar is already handled by the dedicated `.app-content-inner { padding-bottom: 80px !important; }` rule further down.) */ .app-content-inner { padding-left: 12px !important; padding-right: 12px !important; max-width: 100% !important; } /* All multi-column fr-based card grids → single column on mobile React renders camelCase → kebab-case in the DOM */ .app-flex-outer div[style*="grid-template-columns: 1fr 1fr"], .app-flex-outer div[style*="grid-template-columns:1fr 1fr"], .app-flex-outer div[style*="grid-template-columns: 1fr 1fr 1fr"], .app-flex-outer div[style*="grid-template-columns:1fr 1fr 1fr"], .app-flex-outer div[style*="grid-template-columns: 2fr 1fr"], .app-flex-outer div[style*="grid-template-columns:2fr 1fr"], .app-flex-outer div[style*="grid-template-columns: 1fr 2fr"], .app-flex-outer div[style*="grid-template-columns:1fr 2fr"], .app-flex-outer div[style*="grid-template-columns: 3fr 1fr"], .app-flex-outer div[style*="grid-template-columns:3fr 1fr"], .app-flex-outer div[style*="grid-template-columns: 1fr 3fr"], .app-flex-outer div[style*="grid-template-columns:1fr 3fr"], .app-flex-outer div[style*="grid-template-columns: repeat(2"], .app-flex-outer div[style*="grid-template-columns:repeat(2"], .app-flex-outer div[style*="grid-template-columns: repeat(3"], .app-flex-outer div[style*="grid-template-columns:repeat(3"], .app-flex-outer div[style*="grid-template-columns: repeat(4"], .app-flex-outer div[style*="grid-template-columns:repeat(4"] { grid-template-columns: 1fr !important; } /* AboutMe / ICE / health jar screens use .step-card not .app-flex-outer — same rule */ .step-card div[style*="grid-template-columns: 1fr 1fr"], .step-card div[style*="grid-template-columns:1fr 1fr"], .step-card div[style*="grid-template-columns: 1fr 1fr 1fr"], .step-card div[style*="grid-template-columns:1fr 1fr 1fr"], .step-card div[style*="grid-template-columns: repeat(2,1fr)"], .step-card div[style*="grid-template-columns:repeat(2,1fr)"], .step-card div[style*="grid-template-columns: repeat(3,1fr)"], .step-card div[style*="grid-template-columns:repeat(3,1fr)"], .step-card div[style*="grid-template-columns: repeat(4,1fr)"], .step-card div[style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr !important; } /* About My Health tiles container — 5px side padding on mobile */ .step-card div[style*="0 36px 32px"] { padding-left: 5px !important; padding-right: 5px !important; padding-top: 0 !important; } /* About My Health — title-to-cards gap on mobile (2026-07-20). Reported as a much bigger gap than the 14px/0px the inline styles specify between the "About My Health" heading and the first card below it. Force both sides down directly via the exact inline-style match so this wins regardless of whatever else is adding the extra space — scoped to this page's own unique inline-style strings only, so no other page is affected. */ .step-card div[style*="padding: 20px 36px 14px"] { padding-bottom: 4px !important; } /* Things Jars — "Add Thing" button (2026-07-20). Was sitting in the filter bar row, which caused it to wrap awkwardly under the filters on mobile. Moved to sit RHS-justified on the same line as the page title instead (icon-only there — see .tj-header-add-btn in app.html); the labelled filter-bar copy is hidden here so it isn't duplicated. Desktop/tablet keep the original filter-bar button, unaffected. */ .tj-header-add-btn { display: flex !important; } .tj-filterbar-add-btn { display: none !important; } /* Dashboard tiles — single column */ .dashboard-tiles { grid-template-columns: 1fr !important; } /* Page header row — stack on very small screens */ .app-content-inner > div[style*="justifyContent:'space-between'"] { flex-wrap: wrap; gap: 12px; } /* Jar tab navigation — scroll horizontally */ div[style*="borderBottom:'3px solid'"] { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Modal widths — full screen on mobile */ div[style*="maxWidth:'520px'"], div[style*="maxWidth: '520px'"], div[style*="maxWidth:'760px'"], div[style*="maxWidth: '760px'"] { max-width: calc(100vw - 24px) !important; margin: 12px !important; } /* Header: shrink search bar */ div[style*="width:'260px'"][style*="position:'relative'"] { width: 120px !important; } /* Wards page search bar — was capped at maxWidth:420px (a desktop/tablet choice) which left it narrower than the page/cards on mobile. Let it fill the full width there instead. */ .wards-search-wrap { max-width: 100% !important; } /* Remembrance Wall search bar — same fix, same reason. */ .rw-search-wrap { max-width: 100% !important; } /* Header: hide "Life profile" label, keep avatar */ .mlj-header-name { display: none !important; } /* Dashboard tile grid — reduce side padding from 36px to 10px on mobile */ .dashboard-tiles { padding-left: 10px !important; padding-right: 10px !important; padding-top: 12px !important; } /* Suggestion strip — match tile outer padding on mobile */ .suggestion-strip-outer { padding-left: 10px !important; padding-right: 10px !important; } .suggestion-strip { width: 100% !important; } /* ── Jar nav strips — mobile grid layouts ───────────────────────────────── */ /* All .jar-nav strips: push below demo bar, tighten side padding */ .jar-nav { padding-top: 36px !important; padding-left: 6px !important; padding-right: 6px !important; overflow-x: hidden !important; } /* Jar images: further 20% smaller on mobile (46×48 → 37×38) */ .jar-nav div[style*="width: 58px"] { width: 37px !important; height: 38px !important; } .jar-nav img[style*="width: 58px"] { width: 37px !important; height: 38px !important; } .jar-nav div[style*="padding: 4px 5px"] { padding: 3px 3px !important; } /* Inner row: reset flex for grid, tighten gap */ .jar-nav > div { min-width: unset !important; gap: 6px !important; justify-content: center !important; } /* Grid items: keep column layout */ .jar-nav > div > div { display: flex !important; flex-direction: column !important; align-items: center !important; } /* Health (7): 4+3 */ .health-jar-nav > div { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; } /* Password (8): 4+4 */ .passwords-jar-nav > div { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; } /* Memory (5): all in one row */ .memory-jar-nav > div { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; } /* Things (6): 3+3 */ .things-jar-nav > div { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; } /* Message (4): single row */ .message-jar-nav > div { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; } /* Memory Jars page — stack summary on top, tiles 2-col below on mobile */ .app-flex-outer div[style*="padding: 16px 20px 24px"][style*="gap: 20px"] { flex-direction: column !important; } /* Memory Jars left summary panel — full width on mobile */ .app-flex-outer div[style*="width: 294px"][style*="flex-shrink: 0"] { width: 100% !important; } /* Memory tile list — one per row on mobile */ .app-flex-outer div[style*="padding: 16px 20px 24px"][style*="gap: 20px"] > div[style*="min-width: 0"] > div[style*="flex-direction: column"][style*="gap: 10px"] { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; } /* Memory Jars filter/search bar — search field moves to its own row on top, mobile only */ .mj-filter-bar { flex-wrap: wrap !important; /* FIX (2026-07-20): inline style ships top:110px (58px header + 52px nav row), but .memory-jar-nav is hidden entirely on mobile (display:none — see the jar-nav mobile-hide rule), so there's no 52px of nav above this to clear inside .mj-content-pane (this bar's actual sticky scroll container). Sticky's `top` still forced the bar down to that stale 110px even at rest, same double-count/stale- offset bug as the memory-jar-nav fix above — creating a visible gap between the title and this bar, AND, since sticky/relative offsets don't change where FOLLOWING siblings are laid out, made the two-column content below sit as if this bar were still at its un-shifted natural position, so it rendered partly underneath the bar. Corrected to flush with the top of the already-offset .mj-content-pane, same as the nav row. */ top: 0 !important; } .mj-search-wrap { flex-basis: 100% !important; width: 100% !important; margin-bottom: 8px !important; } /* Add Memory button — same mobile move as Things Jars (2026-07-20): RHS- justified icon-only button on the title row instead of the filter bar. */ .mj-header-add-btn { display: flex !important; } .mj-filterbar-add-btn { display: none !important; } /* Page title font reduction (26px → 24px, mobile only) */ .app-flex-outer h1[style*="font-size: 26px"], .app-flex-outer h2[style*="font-size: 26px"], .step-card h1[style*="font-size: 26px"], .step-card h2[style*="font-size: 26px"], .dash-content-row h1[style*="font-size: 26px"], .dash-content-row h2[style*="font-size: 26px"] { font-size: 24px !important; } } /* Remembrance Wall legacy/memorial card grid — was a flat 4-column grid that the generic mobile rule would collapse straight to 1 column everywhere under 600px. Two-tier instead: still readable at "large mobile" width (2 up), only drops to 1 column on small phones. NOTE: the inline style '1fr 1fr 1fr 1fr' still contains the substring "1fr 1fr", so the generic .app-flex-outer div[style*="grid-template-columns: 1fr 1fr"] rule above (specificity 0,2,1) also matches this div and was winning over a plain .rw-legacy-grid class rule (0,1,0). Doubling the class here bumps specificity to 0,3,1 so this always wins regardless of source order. */ @media (max-width: 600px) and (min-width: 381px) { .app-flex-outer div.rw-legacy-grid.rw-legacy-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 380px) { .app-flex-outer div.rw-legacy-grid.rw-legacy-grid { grid-template-columns: 1fr !important; } } /* Medium screens (601–880px) — side padding only (sidebar now becomes bottom tab bar, see 880px nav block below). Was overriding ALL four sides (padding: 20px 24px 40px !important), which clobbered each page's own carefully-tuned top/bottom padding — eg on Health Jar pages, a "page title" wrapper and its "cards" wrapper both use this same class with 0-14px of padding between them by design, but this rule was forcing 40px bottom + 20px top onto them regardless, producing a ~60px dead gap between the heading and the content below it. Narrowed to just left/right, matching the stated "side padding" intent. */ @media (max-width: 880px) { .app-content-inner { padding-left: 24px !important; padding-right: 24px !important; } /* Things Jars filter/search bar — same overflow bug as Memory Jars had (search + 3 selects + Add button in one unwrapped row), but this one breaks at tablet width too, so it's fixed at both tablet and mobile here. */ .tj-filter-bar { flex-wrap: wrap !important; } .tj-search-wrap { flex-basis: 100% !important; width: 100% !important; margin-bottom: 8px !important; } /* Add Thing button — RHS-justify on tablet (2026-07-20). Once the search bar wraps to its own line (rule above), the filters + button wrap to a second line and pack to the left by default, leaving the button stranded with empty space after it. Push it to the far right of that line instead. (Mobile already hides this button entirely via .tj-filterbar-add-btn { display: none } — see the 600px block — so this is harmless there too.) */ .tj-filterbar-add-btn { margin-left: auto !important; } } /* Things Jars filter/search bar — mobile-only sticky top fix (2026-07-20, same bug and same fix as Memory Jars' .mj-filter-bar above). Inline style ships top:110px (58px header + 52px nav row), but .things-jar-nav is hidden entirely below 600px (display:none), so there's no 52px of nav left to clear inside .app-flex-outer's content pane. Scoped to its own 600px-only block rather than folded into the shared 880px block above, because .things-jar-nav is NOT hidden at tablet width (601-880px) — the original top:110px is still correct there. */ @media (max-width: 600px) { .tj-filter-bar { top: 0 !important; } } /* Things Jar "thing" preview (2026-07-20) — the detail panel (image/document + info) sits in a sticky right-hand column next to the item list on desktop and tablet (2-column grid). Below 600px the generic multi-column collapse rule forces that grid to 1 column, which stacked the panel under the WHOLE list rather than under whichever tile was tapped — the preview always looked like it belonged to the last item. Two variants now exist in the JSX (see .tj-desktop-preview / .tj-mobile-inline-preview in app.html's ThingsJarPage): show only one per breakpoint. */ @media (max-width: 600px) { .tj-desktop-preview { display: none !important; } } @media (min-width: 601px) { .tj-mobile-inline-preview { display: none !important; } } /* Health Jar screens (ICE Record, About My Health, Conditions, Scans, Medication, Surgery, Equipment, Family) — the sidebar+content row was hardcoded to min-height: 600px instead of filling the real viewport, so on tall screens (tablets especially) the grey/white background ran out before reaching the bottom nav, exposing the dark page backdrop. Match the viewport-relative height already used by app-flex-outer screens (eg Dashboard). */ .step-card > div[style*="display: flex; min-height: 600px"] { min-height: calc(100vh - 116px) !important; } @media (max-width: 600px) { body { background: #fff; } .app-shell { padding: 0; overflow-x: hidden; } .step-card { overflow-x: hidden; } .welcome-card { margin: 12px 0 0; border-radius: 0; box-shadow: none; border: none; max-width: 100%; overflow-x: hidden; } .form-grid { grid-template-columns: 1fr !important; margin-top: 4px; gap: 14px 16px; } .welcome-hint-text { font-size: 12px !important; line-height: 1.4; margin-bottom: 6px; } /* Keep orange card styling — only reduce margin-bottom */ .form-section-wrap { margin-bottom: 12px !important; } /* Phone field — prevent flag-select overflowing on narrow screens */ .phone-flag-select { min-width: 80px !important; max-width: 100px !important; } .phone-input-wrap { overflow: hidden !important; } .step-card *, .welcome-card * { max-width: 100%; box-sizing: border-box; } } /* ── Mobile-only: done screen, review screen, emergency stage ── */ @media (max-width: 600px) { /* Done screen — push seal below fixed nav+rail (~100px combined) */ .done-screen { padding-top: 56px !important; } /* Emergency review screen — reduce outer padding, fix phone scale & centering */ .emergency-stage { padding: 12px 16px 0 !important; } /* Extra breathing room above the "Here's a preview..." body text, below the phone mockup */ .emergency-context-body { margin-top: 20px !important; } /* Activated screen — navy fill under the fixed TopBar. On desktop/tablet, .app-shell reserves 68px of top padding, which exactly cancels this div's marginTop:-68px/paddingTop:68px, so it fills flush behind the TopBar and the green tile sits 10px below it (marginBottom). On mobile, body.activation-mode forces .app-shell padding-top down to 10px (see ~line 3646), so the same -68px margin over-pulls this div by 58px, making it end WAY above the TopBar's real 68px bottom edge — the green tile then renders mostly hidden behind the opaque TopBar with ~0px visible gap, no matter what marginBottom is set to. Re-anchor the margin to the actual 10px reserved here so the div's bottom lines up with the TopBar's bottom edge again (10 - 13 + 71 = 68), restoring the intended 10px white gap above the green tile. */ .activation-navy-fill { margin-top: -13px !important; } .emergency-phone-wrap > div { transform: scale(0.65) !important; transform-origin: top center !important; margin-bottom: -273px !important; margin-left: 0 !important; margin-top: 8px !important; } } .suggestion-strip { width: 75%; } @media (max-width: 900px) { .suggestion-strip { width: 100% !important; } } /* ── Safari: normalise all input/textarea/select heights ── */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea { -webkit-appearance: none; appearance: none; box-sizing: border-box; } select:not(.phone-flag-select) { -webkit-appearance: none; appearance: none; box-sizing: border-box; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238B95A1' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 10px; } /* ============================================================ SECTION 1b — SHARED LOADER & KEYFRAMES (app.html) ============================================================ */ @keyframes mlj-spin{to{transform:rotate(360deg)}} .mlj-loader-spinner{width:27px;height:27px;border:3px solid #E2E8F0;border-top-color:#EA580C;border-radius:50%;animation:mlj-spin 0.8s linear infinite;margin:0 auto} .mlj-lbg{position:fixed;inset:0;z-index:9999;background:#152332 url('Images%20-%20Ice%20Jar/mylifejars%20app/mylifejars-background.png') center/cover no-repeat;display:flex;align-items:center;justify-content:center;transition:opacity 0.5s ease} .mlj-lcard{background:#fff;border-radius:16px;padding:40px 48px 44px;text-align:center;max-width:380px;width:90%;box-shadow:0 4px 24px rgba(0,0,0,0.13);border:1.5px solid #C9A84C} @media(max-width:768px){ .mlj-lcard{padding:32px 28px 36px;max-width:320px} } /* ============================================================ SECTION 1c — PILL BUTTON STANDARDS ============================================================ Base pill + colour variants. All interactive pill/chip buttons should use .pill + one colour modifier. Status/display-only chips may use inline styles where unique. ============================================================ */ /* Base pill — applies sizing, shape, cursor */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-size: 12px; font-weight: 600; line-height: 1.4; border-radius: 20px; border: 1.5px solid transparent; white-space: nowrap; cursor: pointer; font-family: inherit; transition: opacity 0.15s; } .pill:disabled { opacity: 0.45; cursor: not-allowed; } /* Orange action pill — upload, primary actions */ .pill-orange { background: #FFF3E0; border-color: #E8920A; color: #B45309; } .pill-orange:hover { background: #FFE0B2; } /* Grey skip/cancel pill — secondary/defer actions */ .pill-grey { background: #E2E8F0; border-color: #8B95A1; color: #334155; } .pill-grey:hover { background: #CBD5E1; } /* Muted pill — lighter skip/later, minor actions */ .pill-muted { background: #F1F5F9; border-color: #CBD5E1; color: #475569; } .pill-muted:hover { background: #E2E8F0; } /* Solid grey pill — confirmed/saved state labels in org portal */ .pill-solid-grey { background: var(--slate-grey); border-color: var(--slate-grey); color: #fff; padding: 3px 10px 3px 12px; } /* Toggle pills — grey variant (country picker, general selectors) */ /* Use with .active class toggled by JS state */ .pill-toggle { background: #fff; border-color: #CBD5E1; color: var(--mlj-navy-900); } .pill-toggle.active { background: #F1F5F9; border-color: #CBD5E1; color: #475569; font-weight: 600; } /* Toggle pills — orange variant (relationship/boolean toggles) */ /* Off = white with grey border; On = solid orange */ .pill-toggle-orange { background: #fff; border-color: #8B95A1; color: #64748B; } .pill-toggle-orange.active { background: #E8920A; border-color: #E8920A; color: #fff; } /* ============================================================ SECTION 2 — ACTIVATION.HTML (full block) ============================================================ */ /* Activation-specific rules not covered by shared core */ body.activation-mode { background: #FAF6F1; height: 100dvh; overflow: hidden; color: var(--fg-default); } /* ==================================================== EVENT THEME OVERRIDES — activation wizard, per festival Same pattern as PRODUCT THEME OVERRIDES above: apply by adding an event class alongside activation-mode on : Add one block per future event, overriding only what that event's brand actually needs — usually the page background and the display (heading) font. Everything else (buttons, cards, form fields) still reads as My LifeJars underneath. ==================================================== */ body.activation-mode.event-glastonbury { --font-display: 'Oswald', 'Raleway', sans-serif; background: #17181c; } @media (max-width: 600px) { body.activation-mode.event-glastonbury { background: #17181c; } } /* Nav (top bar + progress rail) matches the page background instead of the default navy, so the whole header reads as one dark surface. */ body.activation-mode.event-glastonbury .top-bar, body.activation-mode.event-glastonbury .progress-rail { background: #17181c; } /* Logo hidden for this event — the text lockup ("Create Your ICE Record · For Glastonbury 2027") carries the branding on its own. */ body.activation-mode.event-glastonbury .brand-lockup img { display: none; } /* The phone mockup shows what an emergency service actually sees in the real My LifeJars app — which never uses the event's Oswald theming. Reset back to the standard display font inside it so it matches activation.html's phone preview exactly, regardless of which event flavour built it (2026-07-22). */ body.activation-mode.event-glastonbury .emergency-phone { --font-display: 'Raleway', system-ui, -apple-system, sans-serif; } @media (max-width: 600px) { body.activation-mode .app-shell:not(.app-shell--dashboard) { padding: 10px 0 0; } body.activation-mode { background: #fff; } body.activation-mode .step-eyebrow { margin-top: 24px; color: #C2410C; display: block; text-align: left; padding-left: 0; margin-left: 0; } .welcome-cta-btn { margin-left: auto !important; margin-top: 8px; } } #inet-info-wrap.open #inet-info-box { display: block !important; } /* Mobile: tip-popover (responder tip etc) — cap width so it doesn't overflow */ @media (max-width: 600px) { .tip-popover { width: calc(100vw - 48px) !important; max-width: 280px !important; } } /* Mobile: reposition inet-info-box as centred fixed panel */ @media (max-width: 600px) { #inet-info-box { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; bottom: auto !important; width: calc(100vw - 48px) !important; max-width: 320px !important; z-index: 9999 !important; box-shadow: 0 8px 32px rgba(0,0,0,0.20) !important; } } .top-bar__inner { max-width: 1100px; width: 100%; margin: 0 auto; padding: 6px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; box-sizing: border-box; } .progress-rail-spacer { height: 45px; flex-shrink: 0; } .ec-notify-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 600px) { .ec-notify-grid { grid-template-columns: repeat(2, 1fr); } } /* Tablet: pin both activation-success tile rows (ICE Code/Contact summary + EC1/EC2 notify) explicitly to 2 columns — !important needed because .activation-summary-grid's columns are set via inline style, which otherwise beats a plain class rule. */ @media (min-width: 601px) and (max-width: 860px) { .activation-summary-grid { grid-template-columns: 1fr 1fr !important; gap: 0 16px !important; } .ec-notify-grid { grid-template-columns: repeat(2, 1fr) !important; } } .step-card--scrollable { overflow-y: auto; overflow-x: hidden; max-height: calc(100dvh - 153px); overscroll-behavior: contain; clip-path: inset(0 round 28px); -webkit-overflow-scrolling: touch; touch-action: pan-y; } .step-card--scrollable::-webkit-scrollbar { width: 6px; } .step-card--scrollable::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; } .step-card--scrollable::-webkit-scrollbar-track { background: transparent; } .step-card--scrollable::after { content: ''; display: block; height: 20px; flex-shrink: 0; } .mlj-text-link { color: var(--fg-muted); text-decoration: underline; text-underline-offset: 2px; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; font-size: inherit; transition: color 120ms ease; } .mlj-text-link:hover { color: var(--mlj-orange, #E8920A); } .contact-notify-note { width: 75%; } @media (min-width: 581px) { .form-grid--contacts { align-items: start; } } .choice-card:not(.choice-card--solo) .illo img { height: 113px; } @media (min-width: 601px) and (max-width: 880px) { .choice-card:not(.choice-card--solo) .illo img { height: 136px !important; } /* Grow the illo container to match, so the taller image is contained within the tile instead of overflowing past its top edge */ .choice-card:not(.choice-card--solo) .illo { height: 136px; } } button[style*="borderRadius: 50%"], button[style*="border-radius: 50%"] { -webkit-appearance: none; appearance: none; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px #fff inset !important; box-shadow: 0 0 0 1000px #fff inset !important; -webkit-text-fill-color: var(--mlj-navy-900) !important; } .rel-select-wrap select { height: 48px; box-sizing: border-box; background-color: #fff !important; border: 1.5px solid #8B95A1 !important; border-radius: 8px !important; -webkit-appearance: auto; appearance: auto; } .emergency-phone-wrap { grid-area: phone; display: flex; justify-content: center; align-items: flex-start; } .emergency-context-title { grid-area: title; color: var(--mlj-navy-900); font-family: var(--font-body); } .emergency-context-body { grid-area: body; } @media (min-width: 881px) { .choice-card:not(.choice-card--solo) .illo img { height: 255px !important; } .about-gender-field { grid-column: 1; } .about-pronouns-field { grid-column: 2; } .title-prefix-field { grid-column: 2; } } @media (max-width: 375px) { .app-shell { padding: 6px 8px 24px; } .gender-toggle-wrap button { padding: 8px 4px !important; font-size: 12px !important; } .brand-lockup .product-name { font-size: 14px; } .brand-lockup img.logo { width: 29px; } h1.step-title { font-size: 18px; } .activation-title { font-size: 17px !important; } .welcome-heading { font-size: 22px; } .btn { font-size: 13px; padding: 11px 14px; } .step-card { padding: 16px 12px; } .welcome-content-panel { padding: 16px 12px; } .demo-bar { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 200; height: 68px; display: flex; align-items: center; gap: 8px; padding: 0 12px; pointer-events: none; } .demo-bar .access-btn { padding: 6px 10px; min-width: 36px; justify-content: center; pointer-events: auto; } .access-toggles { gap: 6px; } } .dob-wrap { max-width: 220px; } .dob-input-row { position: relative; display: flex; align-items: center; } .dob-input { width: 100%; padding: 12px 40px 12px 14px; border: 1.5px solid #8B95A1; border-radius: 8px; font-family: inherit; font-size: 15px; box-sizing: border-box; color: var(--mlj-navy-900); background: #fff; } .dob-input:focus-visible { outline: none; border-color: #E8920A; box-shadow: 0 0 0 3px rgba(232, 146, 10, 0.18); background: #ffffff; } .dob-cal-icon { position: absolute; right: 12px; pointer-events: none; color: var(--slate-grey); display: flex; align-items: center; } .dob-input::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; right: 0; width: 36px; height: 100%; cursor: pointer; } .storage-opts { display:flex; gap:10px; margin-bottom:8px; } .storage-opts__col { flex:1; } .storage-opts__col:first-child { padding-left:0; } .storage-opts__col:last-child { padding-right:0; } .storage-opts__col > div { height:100%; box-sizing:border-box; } @media (max-width:600px) { .storage-opts { flex-direction:column; } .storage-opts__col { border-right:none; border-bottom:none; padding:0; margin-bottom:0; } .storage-opts__col:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; } } .rel-cat-btns { display:flex; gap:8px; margin-bottom:12px; } .rel-half-field { max-width:50%; } .rel-third-field { max-width:33.333%; } @media (max-width:600px) { .rel-half-field { max-width:100%; } .rel-third-field { max-width:100%; } .friend-rel-spacer { display:none; } } .welcome-title-row { display: block; } .welcome-title-img { display: none; } /* Mobile only: crop the welcome-screen jar product photo left/right so the jar itself reads bigger in the narrow column, instead of shrinking to fit with lots of transparent margin either side (source image is a square photo). */ @media (max-width:600px) { /* Direct-child only: on the event-activation welcome screen, .welcome-grid-img wraps the phone-mockup component (EmergencyPhoneCard), which contains its own nested tags (logo, avatar, etc.) several levels deep. The old descendant selector reached into those too, forcibly blowing the ICE Jar logo up to 100% width / 170px tall and breaking the phone mockup on mobile. Scoping to a direct child keeps this rule for the plain product-photo welcome variant (activation.html) without touching the phone mockup (2026-07-22). */ .welcome-grid-img > img { width: 100% !important; height: 170px !important; max-height: none !important; object-fit: cover !important; object-position: center !important; } } @media(max-width:600px){.friend-rel-spacer{display:none!important}} @media(max-width:600px){.done-tick{display:none}} /* ============================================================ SECTION 4 — INDEX.HTML (landing page) ============================================================ */ :root { --white: #FFFFFF; --cream: #FAF6F1; --cream-mid: #F0E8DF; --navy: #1C2B3A; --navy-mid: #253649; --orange: #EA580C; --orange-dark: #C2410C; --orange-light: #FEF3E2; --red-ice: #C8102E; --text-body: #3A4B5C; --text-muted: #7A8C9E; --border: #E4D9CF; } html { scroll-behavior: smooth; overflow-x: clip; } body.pg-index { font-family: 'Lato', sans-serif; background: var(--white); color: var(--text-body); overflow-x: hidden; max-width: 100%; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: 'Raleway', sans-serif; } .container { max-width: 1160px; margin: 0 auto; padding: 0 32px; } .container-narrow { max-width: 640px; margin: 0 auto; padding: 0 32px; } .text-orange { color: var(--orange); } /* BUTTONS */ body.pg-index .btn-primary { display: inline-block; background: var(--orange); color: #fff; padding: 14px 42px; border-radius: 6px; font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.03em; border: 2px solid var(--orange); cursor: pointer; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease; } body.pg-index .btn-primary:hover { border-color: var(--orange-dark); } body.pg-index .btn-primary:hover { background: var(--orange-dark); } .btn-outline-orange { display: inline-block; background: #fff; color: var(--orange-dark); padding: 14px 42px; border-radius: 6px; font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.03em; border: 2px solid var(--orange-dark); cursor: pointer; text-decoration: none; transition: background 0.2s ease, transform 0.15s ease, color 0.2s ease; } .btn-outline-orange:hover { background: var(--orange-dark); color: #fff; transform: translateY(-2px); } .btn-white { display: inline-block; background: #fff; color: var(--orange); padding: 14px 42px; border-radius: 6px; font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.03em; border: 2px solid var(--orange-dark); cursor: pointer; text-decoration: none; transition: all 0.2s ease; box-shadow: 0 4px 24px rgba(0,0,0,0.14); } .btn-white:hover { background: #f8f8f8; } /* NAV */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; background: rgba(255,255,255,0.97); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); height: 64px; display: flex; align-items: center; } .nav-inner { max-width: 1160px; margin: 0 auto; padding: 0 32px; width: 100%; display: flex; align-items: center; justify-content: space-between; } .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .nav-logo img { height: 40px; width: auto; display: block; } .nav-logo-fallback { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 18px; letter-spacing: 0.05em; color: var(--navy); display: none; } .nav-logo-fallback span { color: var(--red-ice); } .nav-links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; align-items: center; } .nav-links a { font-family: 'Raleway', sans-serif; font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: none; letter-spacing: 0.02em; transition: color 0.18s ease; } .nav-links a:hover { color: var(--orange-dark); } .nav-burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; width: 40px; height: 40px; } .nav-burger span { display: block; width: 24px; height: 2px; background: var(--navy); margin: 5px 0; transition: transform 0.25s ease, opacity 0.2s ease; } .nav-burger.open span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); } .nav-burger.open span:nth-child(2) { opacity: 0; } .nav-burger.open span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); } .nav-mobile { position: fixed; top: 64px; left: 0; right: 0; z-index: 300; background: rgba(255,255,255,0.98); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); flex-direction: column; padding: 20px 32px; gap: 4px; display: none; } .nav-mobile.open { display: flex; } .nav-mobile a { font-family: 'Raleway', sans-serif; font-size: 17px; font-weight: 600; color: var(--navy); text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--border); } .nav-mobile a:last-child { border-bottom: none; } .nav-mobile-cta { margin-top: 12px; background: transparent; color: var(--orange) !important; text-align: center; border-radius: 6px; border: 2px solid var(--orange) !important; border-bottom: 2px solid var(--orange) !important; padding: 12px 0 !important; } .nav-mobile-activate { margin-top: 12px; background: var(--red-ice); color: #fff !important; text-align: center; border-radius: 6px; border: 2px solid var(--red-ice) !important; border-bottom: 2px solid var(--red-ice) !important; padding: 12px 0 !important; font-weight: 700 !important; } @media (max-width: 900px) { .nav-links { display: none; } .site-nav .nav-cta { display: none; } .site-nav .nav-cta-activate { display: none; } .nav-burger { display: block; } .site-nav .nav-cta-outline { font-size: 13px; padding: 7px 14px; } } .nav-link-plain { font-family: 'Raleway', sans-serif; font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: none; letter-spacing: 0.01em; transition: color 0.15s; } .nav-link-plain:hover { color: var(--orange-dark); } .nav-ctas { display: flex; align-items: center; gap: 12px; } .nav-cta-activate { font-family: 'Raleway', sans-serif; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; line-height: 1; color: #fff; background: var(--red-ice); padding: 9px 22px; border: 2px solid var(--red-ice); border-radius: 6px; text-decoration: none; letter-spacing: 0.03em; transition: background 0.18s ease, border-color 0.18s ease; } .nav-cta-activate:hover { background: #b71c1c; border-color: #b71c1c; color: #fff; } .closing-cta { font-size: 16px; padding: 14px 32px; } .nav-cta-outline { font-family: 'Raleway', sans-serif; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; line-height: 1; color: var(--orange-dark); background: #fff; padding: 9px 22px; border: 2px solid var(--orange); border-radius: 6px; text-decoration: none; letter-spacing: 0.03em; transition: background 0.18s ease, color 0.18s ease; } .nav-cta-outline:hover { background: var(--orange); color: #fff; } /* nav-cta-outline shown on mobile — handled in 900px block above */ .nav-cta { font-family: 'Raleway', sans-serif; font-size: 14px; font-weight: 700; color: #fff; background: var(--orange); padding: 10px 26px; border-radius: 6px; text-decoration: none; letter-spacing: 0.03em; transition: background 0.18s ease, transform 0.15s ease; } .nav-cta:hover { background: var(--orange-dark); transform: translateY(-1px); } /* HERO */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; background: var(--white); padding-top: 64px; padding-bottom: 60px; } .hero-scroll-cue { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); color: var(--orange-dark); text-decoration: none; line-height: 0; } .hero-scroll-cue:hover { color: var(--orange-dark); } .hero-inner { max-width: 1080px; margin: 0 auto; padding: 60px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; width: 100%; } .hero-eyebrow { font-family: 'Raleway', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red-ice); margin-bottom: 22px; } .hero-title { font-size: clamp(32px,3.8vw,52px); font-weight: 800; line-height: 1.12; letter-spacing: -0.025em; color: var(--navy); margin-bottom: 20px; } .hero-subtitle { font-size: clamp(15px,1.4vw,17px); line-height: 1.8; color: var(--text-body); margin-bottom: 32px; max-width: 440px; } .hero-buy-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; } .hero-buy-row .btn-primary, .hero-buy-row .btn-primary { padding: 16px 28px; font-size: 16px; } .hero-buy-row .btn-outline-orange { padding: 16px 28px; font-size: 16px; } .hero-buy-row .btn-outline-orange { color: var(--orange); border: 2px solid var(--orange); } .hero-buy-row .btn-outline-orange:hover { background: var(--orange); color: #fff; } .hero-price { font-family: 'Raleway', sans-serif; font-size: 14px; font-weight: 600; color: var(--text-muted); line-height: 1.3; } .hero-price strong { display: block; font-size: 30px; font-weight: 800; color: var(--navy); line-height: 1; } .hero-badges { display: flex; flex-wrap: wrap; gap: 16px; } .hero-login-hint { margin: 14px 0 0; font-size: 13px; color: var(--muted); font-family: 'Raleway', sans-serif; text-align: center; } .hero-login-hint a { color: var(--orange-dark); font-weight: 600; text-decoration: none; } .hero-login-hint a:hover { text-decoration: underline; } .badge { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--navy); font-family: 'Lato', sans-serif; } .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex-shrink: 0; } .hero-image-col { position: relative; display: flex; align-items: center; justify-content: center; } .hero-image-bg { position: absolute; inset: -5%; background: var(--cream); border-radius: 28px; z-index: 0; } .hero-image-col img { position: relative; z-index: 1; width: 100%; max-width: 520px; height: auto; object-fit: contain; border-radius: 16px; filter: drop-shadow(0 24px 52px rgba(28,43,58,0.13)); } /* SECTION CHROME */ .section-header { text-align: center; margin-bottom: 56px; } .section-eyebrow { font-family: 'Raleway', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange-dark); margin-bottom: 14px; } .section-title { font-size: clamp(28px,4vw,48px); font-weight: 800; color: var(--navy); line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 16px; } .section-sub { font-size: 18px; color: #3A4B5C; line-height: 1.7; max-width: 540px; margin: 0 auto; } /* PROBLEM */ .problem-section { background: var(--cream); padding: 100px 24px; text-align: center; border-top: 3px solid var(--orange); } .problem-inner { max-width: 680px; margin: 0 auto; } .problem-hook { font-size: clamp(30px,4.5vw,52px); font-weight: 800; line-height: 1.12; color: var(--navy); letter-spacing: -0.025em; margin-bottom: 32px; } .problem-hook em { font-style: normal; color: var(--red-ice); } .problem-body { font-size: clamp(16px,1.5vw,19px); line-height: 1.85; color: var(--text-body); margin-bottom: 18px; } .problem-kicker { font-family: 'Raleway', sans-serif; font-size: 17px; font-weight: 700; color: var(--orange-dark); margin-top: 28px; letter-spacing: 0.02em; } /* KIT */ .kit-section { background: var(--white); padding: 100px 24px; } .kit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1160px; margin: 0 auto; } .kit-card { background: var(--cream); border: 1px solid var(--border); border-radius: 16px; padding: 24px 18px; text-align: center; display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .kit-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(28,43,58,0.09); border-color: var(--orange); } .kit-img-wrap { width: 100%; aspect-ratio: 1/1; background: var(--white); border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 14px; } .kit-img-wrap img { width: 100%; height: 100%; object-fit: contain; padding: 12px; transition: transform 0.3s ease; } .kit-card:hover .kit-img-wrap img { transform: scale(1.06); } .kit-card h3 { font-family: 'Raleway', sans-serif; font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 6px; } .kit-card p { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; margin: 0; } .kit-placeholder { opacity: 0.55; } .placeholder-wrap { background: var(--cream-mid) !important; border: 2px dashed var(--border) !important; flex-direction: column; gap: 8px; } .placeholder-wrap span { font-size: 11px; color: var(--text-muted); font-family: 'Lato', sans-serif; } /* STORAGE */ .storage-section { background: var(--navy); padding: 100px 24px; } .storage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1060px; margin: 0 auto; } .desktop-br { display: inline; } @media (max-width: 860px) { .desktop-br { display: none; } } /* Hides a word inside button/label text on mobile only — eg "Add " in "+ Add Record" buttons across the Health Jar pages, so mobile just reads "+ Record". Uses the app's own 600px mobile breakpoint (not the 860px marketing-page one above). */ .desktop-word { display: inline; } @media (max-width: 600px) { .desktop-word { display: none; } } @media (max-width: 860px) { .storage-grid { grid-template-columns: 1fr; } } /* Tablet only: keep the 3 storage cards in a single row (mobile still stacks via the activation-flow rule above 880px) */ @media (min-width: 601px) and (max-width: 860px) { body.pg-index .storage-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; } body.pg-index .storage-card { padding: 24px 18px 22px !important; } } .storage-card { background: var(--white); border-radius: 16px; padding: 40px 32px 36px; position: relative; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 4px 20px rgba(28,43,58,0.06); } .storage-card::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 5px; border-radius: 16px 0 0 16px; } .storage-card-usb::before { background: var(--orange); } .storage-card-sync::before { background: #90A4AE; } .storage-card-vault::before { background: #B4965A; } .storage-section .section-eyebrow { color: var(--orange); } .storage-card-label { font-family: 'Raleway', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; } .storage-card-usb .storage-card-label { color: var(--orange-dark); } .storage-card-sync .storage-card-label { color: #546E7A; } .storage-card-vault .storage-card-label { color: #9A7A3A; } .storage-card h3 { font-family: 'Raleway', sans-serif; font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 14px; line-height: 1.35; } .storage-card p { font-size: 15px; color: var(--text-body); line-height: 1.75; margin-bottom: 0; } .storage-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; } .storage-card-usb .storage-icon { background: rgba(234,88,12,0.1); border: 1.5px solid var(--orange-dark); } .storage-card-sync .storage-icon { background: rgba(144,164,174,0.12); border: 1.5px solid #78909C; } .storage-card-vault .storage-icon { background: rgba(180,150,80,0.1); border: 1.5px solid #9A7A3A; } /* HOW */ .how-section { background: var(--cream); padding: 100px 24px; } .how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; max-width: 960px; margin: 0 auto; position: relative; } .how-step-img-wrap { width: 80px; height: 80px; margin: 0 auto 18px; border-radius: 12px; overflow: hidden; background: var(--white); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; } .how-step-img-wrap img { width: 100%; height: 100%; object-fit: contain; padding: 8px; } .how-connector { display: none; } .how-step { text-align: center; position: relative; z-index: 1; background: var(--white); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(28,43,58,0.06); padding-bottom: 32px; } .how-num { display: none; } .how-step h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 12px; padding: 0 20px; letter-spacing: -0.01em; } .how-step p { font-size: 14.5px; color: var(--text-body); line-height: 1.75; padding: 0 20px; } .how-step p strong { color: var(--navy); font-weight: 700; } .how-step-icon-wrap { width: 80px; height: 80px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; background: var(--orange-light); border-radius: 12px; border: 1.5px solid var(--orange-dark); } /* PERSONAS */ .personas-section { background: var(--cream); padding: 100px 24px; } .personas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1060px; margin: 0 auto; } .persona-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 20px 24px 32px; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; display: flex; flex-direction: column; } .persona-card:hover { border-color: var(--orange); box-shadow: 0 8px 36px rgba(28,43,58,0.10); transform: translateY(-4px); } .persona-icon { width: 80px; height: 80px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; overflow: hidden; } .persona-icon img { width: 100%; height: 100%; object-fit: contain; } .persona-card h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 10px; } .persona-card p { font-size: 14px; color: var(--text-body); line-height: 1.75; } .persona-kicker { display: block; margin-top: auto; padding-top: 16px; font-size: 14px; font-weight: 700; font-style: italic; color: var(--navy); } /* LIFE-JAR */ .lifejar-section { background: var(--navy); padding: 100px 24px; position: relative; overflow: hidden; } .lifejar-glow { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: rgba(234,88,12,0.05); top: -150px; right: -100px; pointer-events: none; } .lifejar-inner { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; } .lifejar-eyebrow { font-family: 'Raleway', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; } .storage-section .section-eyebrow { color: var(--orange); } .lifejar-eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--orange); } .lifejar-title { font-size: clamp(30px,4vw,50px); font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 22px; letter-spacing: -0.025em; } .lifejar-body { font-size: 17px; line-height: 1.8; color: rgba(255,255,255,0.72); margin-bottom: 28px; } .lifejar-list { list-style: none; margin-bottom: 38px; } .lifejar-list li { font-size: 15px; color: rgba(255,255,255,0.8); padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 12px; } .lifejar-list li:last-child { border-bottom: none; } .lifejar-list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex-shrink: 0; } .lifejar-image-wrap { display: flex; justify-content: center; } .lifejar-image-wrap img { width: 100%; max-width: 480px; height: auto; object-fit: contain; border-radius: 20px; filter: drop-shadow(0 28px 64px rgba(0,0,0,0.4)); } /* TRUST */ .trust-section { background: var(--white); padding: 100px 24px; } .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; max-width: 1160px; margin: 0 auto; } /* JOURNEY (responder access steps — replaces old Trust) */ .journey-section { background: var(--white); padding: 100px 24px; } .journey-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 48px; max-width: 1100px; margin: 0 auto; position: relative; } .journey-step { background: var(--cream); border: 1px solid var(--border); border-radius: 16px; padding: 22px 24px 24px; box-shadow: 0 4px 20px rgba(28,43,58,0.06); transition: transform 0.25s ease, box-shadow 0.25s ease; position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 10px; align-items: center; } .journey-step:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(28,43,58,0.10); } .journey-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; } .journey-step { z-index: 1; } @media (max-width: 1024px) { .journey-path { display: none; } } .journey-num { width: 34px; height: 34px; background: var(--orange); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 16px; box-shadow: 0 2px 8px rgba(28,43,58,0.20); grid-column: 1; grid-row: 1; } .journey-step h3 { font-family: 'Raleway', sans-serif; font-size: 17px; font-weight: 700; color: var(--navy); margin: 0; letter-spacing: -0.01em; grid-column: 2; grid-row: 1; } .journey-step p { font-size: 14.5px; color: var(--text-body); line-height: 1.7; margin: 0; grid-column: 1 / -1; grid-row: 2; } .journey-fallback { max-width: 1100px; margin: 56px auto 0; text-align: center; font-family: 'Lato', sans-serif; font-style: italic; font-size: 18px; line-height: 1.75; color: var(--navy); padding: 0 8px; } .journey-fallback strong { font-style: normal; font-weight: 700; color: var(--navy); } .care-callout { max-width: 760px; margin: 64px auto 0; padding: 32px 36px; background: var(--orange-light); border-left: 4px solid var(--orange); border-radius: 10px; } .care-callout-eyebrow { font-family: 'Raleway', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange-dark); margin: 0 0 10px; } .care-callout h3 { font-family: 'Raleway', sans-serif; font-size: 22px; font-weight: 700; color: var(--navy); margin: 0 0 12px; letter-spacing: -0.015em; } .care-callout p { font-family: 'Lato', sans-serif; font-size: 15px; line-height: 1.75; color: var(--text-body); margin: 0; } @media (max-width: 1024px) { .journey-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .journey-grid { grid-template-columns: 1fr; gap: 16px; } .care-callout { padding: 24px 22px; } @media (max-width: 380px) { .section-header { margin-bottom: 20px; } .container { padding: 0 12px; } .sharing-grid > div { padding: 16px 12px !important; } .hero-inner { padding: 12px 12px; } .nav-inner { padding: 0 12px; } } .care-callout h3 { font-size: 19px; } } .travel-callout { max-width: 760px; margin: 56px auto 0; padding: 32px 36px; background: var(--orange-light); border-left: 4px solid var(--orange); border-radius: 10px; } .travel-callout-label { font-family: 'Raleway', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange-dark); margin: 0 0 10px; } .travel-callout h3 { font-family: 'Raleway', sans-serif; font-size: 22px; font-weight: 700; color: var(--navy); margin: 0 0 12px; letter-spacing: -0.015em; } .travel-callout p { font-family: 'Lato', sans-serif; font-size: 15px; line-height: 1.75; color: var(--text-body); margin: 0; } @media (max-width: 600px) { .travel-callout { padding: 24px 22px; } .travel-callout h3 { font-size: 19px; } } /* Two-column wrapper for paired callouts (Beyond Emergencies + Travelling Overseas) */ .callouts-grid { max-width: 1080px; margin: 64px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .callouts-grid .care-callout, .callouts-grid .travel-callout { max-width: none; margin: 0; } @media (max-width: 860px) { .callouts-grid { grid-template-columns: 1fr; gap: 16px; } } .trust-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 36px 26px 32px; transition: transform 0.25s ease, box-shadow 0.25s ease; } .trust-card:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(28,43,58,0.08); } .trust-icon { width: 48px; height: 48px; background: var(--orange-light); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; border: 1.5px solid var(--orange-dark); } .trust-card h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 10px; } .trust-card p { font-size: 14px; color: var(--text-body); line-height: 1.75; } /* PRICE */ .price-section { background: var(--orange-light); padding: 100px 24px; } .price-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; max-width: 1080px; margin: 0 auto; } .price-tile { background: #fff; border: 2px solid var(--border); border-radius: 20px; padding: 40px 36px; position: relative; display: flex; flex-direction: column; overflow: hidden; } .price-tile.featured { border-color: var(--orange); box-shadow: 0 16px 64px rgba(28,43,58,0.12); } .price-tile.featured::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg,var(--orange),#F5A623); border-radius: 18px 18px 0 0; } .price-tile-badge { display: inline-block; background: var(--orange); color: #fff; font-family: 'Raleway',sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; margin-bottom: 20px; } .price-tile-label { font-family: 'Raleway',sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-dark); margin-bottom: 10px; line-height: 1.5; min-height: 36px; } .price-tile h3 { font-family: 'Raleway',sans-serif; font-size: 22px; font-weight: 800; color: var(--navy); margin-bottom: 6px; } .price-tile-desc { font-size: 14px; color: var(--text-muted); margin-bottom: 8px; line-height: 1.6; min-height: 60px; } .price-tile-amount { font-family: 'Raleway',sans-serif; font-size: 48px; font-weight: 700; color: var(--navy); line-height: 1; margin: 0 0 4px; min-height: 48px; display: flex; align-items: center; justify-content: center; text-align: center; } .price-tile-amount sup { font-size: 24px; font-weight: 700; vertical-align: super; } .price-tile-cadence { font-family: 'Raleway', sans-serif; font-size: 15px; font-weight: 700; color: var(--navy); text-align: center; margin-bottom: 8px; min-height: 30px; line-height: 1.55; } .price-tile-coming { font-family: 'Raleway',sans-serif; font-size: 20px; font-weight: 700; color: var(--text-muted); margin-bottom: 4px; min-height: 56px; display: flex; align-items: center; } .price-tile-divider { border: none; border-top: 1px solid var(--border); margin: 8px 0; } .price-tile ul { list-style: none; margin-bottom: 32px; flex: 1; } .price-tile ul li { font-size: 14px; color: var(--text-body); padding: 8px 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .price-tile ul li:last-child { border-bottom: none; } .price-tile-check { width: 20px; height: 20px; min-width: 20px; background: var(--orange); color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; box-shadow: none; } .price-tile-check-muted { width: 18px; height: 18px; min-width: 18px; background: var(--border); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; } .price-tile .btn-primary, .price-tile .btn-outline-orange { min-height: 76px; display: flex; align-items: center; justify-content: center; } /* Price tile colour variants */ .price-tile-silver { border-color: #90A4AE; border-width: 2.5px; } .price-tile-silver::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg,#90A4AE,#B0C4CE); border-radius: 18px 18px 0 0; } .price-tile-silver .price-tile-label { color: #546E7A; } .price-tile-silver .price-tile-check { background: #78909C; } .price-tile-gold { border-color: #B4965A; } .price-tile-gold::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg,#B4965A,#D4B87A); border-radius: 18px 18px 0 0; } .price-tile-gold .price-tile-label { color: #9A7A3A; } .price-tile-gold .price-tile-check { background: #B4965A; } .price-tile-silver .btn-outline-orange { color: #546E7A; border-color: #78909C; } .price-tile-silver .btn-outline-orange:hover { background: #78909C; color: #fff; } .price-tile-gold .btn-outline-orange { color: #9A7A3A; border-color: #B4965A; } .price-tile-gold .btn-outline-orange:hover { background: #B4965A; color: #fff; } @media (max-width: 860px) { .price-grid { grid-template-columns: 1fr; max-width: 480px; } } .price-card { max-width: 520px; margin: 0 auto; border: 2px solid var(--orange); border-radius: 24px; padding: 56px 48px; text-align: center; box-shadow: 0 16px 64px rgba(28,43,58,0.10); position: relative; overflow: hidden; } .price-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg,var(--orange),#F5A623); } .price-eyebrow { font-family: 'Raleway', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange-dark); margin-bottom: 18px; } .price-amount { font-family: 'Raleway', sans-serif; font-size: 80px; font-weight: 900; color: var(--navy); line-height: 1; margin-bottom: 8px; letter-spacing: -0.03em; } .price-amount sup { font-size: 40px; vertical-align: top; margin-top: 14px; display: inline-block; } .price-note { font-size: 14px; color: var(--text-muted); margin-bottom: 32px; } .price-divider { height: 1px; background: var(--border); margin-bottom: 28px; } .price-includes { list-style: none; text-align: left; margin-bottom: 38px; } .price-includes li { font-size: 15px; color: var(--text-body); padding: 10px 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; } .price-includes li:last-child { border-bottom: none; } .price-check { width: 20px; height: 20px; background: var(--orange); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .price-check svg { color: #fff; } .price-btn-wrap { text-align: center; } .price-btn-wrap .btn-primary { width: 100%; text-align: center; padding: 18px 32px; font-size: 17px; } /* BOUNCING CHEVRON FOR SCROLL CUES */ @keyframes bounce-chevron { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } .scroll-chevron { display: block; width: 24px; height: 24px; margin: 8px auto 0; animation: bounce-chevron 1.6s ease-in-out infinite; } /* PRICING ADD-ONS BLOCK */ .addons-block { max-width: 1080px; margin: 56px auto 0; background: var(--white); border: 1px solid var(--border); border-radius: 18px; padding: 44px 40px; box-shadow: 0 6px 28px rgba(28,43,58,0.08); } .addons-eyebrow { font-family: 'Raleway', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange-dark); text-align: center; margin: 0 0 10px; } .addons-block > h3 { font-family: 'Raleway', sans-serif; font-size: 24px; font-weight: 700; color: var(--navy); text-align: center; letter-spacing: -0.015em; margin: 0 0 12px; } .addons-intro { font-family: 'Lato', sans-serif; font-size: 15px; color: var(--text-body); text-align: center; margin: 0 auto 32px; max-width: 540px; line-height: 1.65; } .addons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .addon-item { background: var(--cream); border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px 18px; display: flex; flex-direction: column; } .addon-item h4 { font-family: 'Raleway', sans-serif; font-size: 15px; font-weight: 700; color: var(--navy); margin: 0 0 6px; letter-spacing: -0.01em; } .addon-item p { font-family: 'Lato', sans-serif; font-size: 13.5px; color: var(--text-body); line-height: 1.55; margin: 0 0 14px; flex-grow: 1; } .addon-price { font-family: 'Raleway', sans-serif; font-size: 17px; font-weight: 800; color: var(--orange-dark); letter-spacing: -0.01em; } @media (max-width: 860px) { .addons-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .addons-grid { grid-template-columns: 1fr; } .addons-block { padding: 28px 22px; } } /* GUARANTEE CALLOUT */ .guarantee-callout { max-width: 900px; margin: 32px auto 0; background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--orange); border-radius: 14px; padding: 32px 40px; text-align: center; box-shadow: 0 4px 16px rgba(28,43,58,0.06); } .guarantee-callout-eyebrow { font-family: 'Raleway', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange-dark); margin: 0 0 10px; } .guarantee-callout h3 { font-family: 'Raleway', sans-serif; font-size: 22px; font-weight: 700; color: var(--navy); margin: 0 0 14px; letter-spacing: -0.015em; } .guarantee-callout p { font-family: 'Lato', sans-serif; font-size: 15px; line-height: 1.7; color: var(--text-body); margin: 0 auto 10px; max-width: 720px; } .guarantee-callout p:last-child { margin-bottom: 0; } @media (max-width: 600px) { .guarantee-callout { padding: 24px 22px; } .guarantee-callout h3 { font-size: 19px; } } /* CLOSING */ .closing-section { background: var(--white); padding: 120px 24px; text-align: center; position: relative; overflow: hidden; } .closing-section::before { content: ''; position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 700px; height: 700px; border-radius: 50%; background: rgba(255,255,255,0.05); pointer-events: none; } .closing-section::after { content: ''; position: absolute; bottom: -80px; right: -80px; width: 400px; height: 400px; border-radius: 50%; background: rgba(255,255,255,0.04); pointer-events: none; } .closing-content { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; } .closing-title { font-size: clamp(28px,4vw,48px); font-weight: 800; color: var(--navy); line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 20px; } .closing-sub { font-size: 22px; font-weight: 600; color: var(--navy); margin-bottom: 44px; line-height: 1.65; } /* FOOTER */ footer { background: var(--navy); padding: 32px 24px; } .footer-inner { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } footer p { font-size: 13px; color: rgba(255,255,255,0.78); margin: 0; } footer a { color: rgba(255,255,255,0.9); text-decoration: none; } footer a:hover { color: #fff; } .footer-login { font-size: 13px; font-family: 'Roboto', sans-serif; font-weight: 600; color: #fff; text-decoration: none; white-space: nowrap; padding: 7px 18px; border: 1.5px solid rgba(255,255,255,0.5); border-radius: 6px; transition: border-color 0.2s, background 0.2s; } .footer-login:hover { border-color: #fff; background: rgba(255,255,255,0.08); } @media (max-width: 600px) { .footer-inner { flex-direction: column; align-items: center; text-align: center; } } /* HERO MONTAGE */ .hero-image-col { position: relative; display: flex; align-items: center; justify-content: center; min-height: 520px; } .hero-montage { position: relative; width: 100%; max-width: 520px; } .montage-bg-blob { position: absolute; width: 85%; height: 88%; top: 6%; left: 8%; background: var(--cream); border-radius: 28px; z-index: 0; } .montage-back { position: absolute; width: 62%; height: auto; object-fit: contain; top: 0; right: -4%; z-index: 1; transform: rotate(6deg) translateY(12px); filter: drop-shadow(0 16px 36px rgba(28,43,58,0.15)); border-radius: 12px; } .montage-front { position: relative; z-index: 2; width: 72%; height: auto; object-fit: contain; display: block; margin: 24px 0 24px 0; filter: drop-shadow(0 24px 52px rgba(28,43,58,0.18)); border-radius: 14px; } /* HOW STEP — lifestyle image */ .how-step-img-lifestyle { width: 100%; height: auto; margin: 0 0 16px; border-radius: 0; overflow: visible; border: none; display: block; } .how-step-img-lifestyle img { width: 100%; height: auto; display: block; } /* TRUST CARD with photo */ .trust-card-img { padding: 0; overflow: hidden; } .trust-card-photo { width: 100%; aspect-ratio: 1/1; overflow: hidden; } .trust-card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .trust-card-img:hover .trust-card-photo img { transform: scale(1.04); } .trust-card-img h3, .trust-card-img p { padding: 0 24px; } .trust-card-img h3 { padding-top: 22px; margin-bottom: 10px; } .trust-card-img p { padding-bottom: 28px; } /* PROBLEM SECTION image */ .problem-img-wrap { margin-top: 68px; border-radius: 20px; overflow: hidden; max-width: 560px; margin-left: auto; margin-right: auto; box-shadow: 0 16px 48px rgba(28,43,58,0.12); } .problem-img-wrap img { width: 100%; height: auto; display: block; } /* KIT LIFESTYLE IMAGES — cover crop, no padding */ .kit-img-wrap.lifestyle { background: transparent; } .kit-img-wrap.lifestyle img { object-fit: cover; padding: 0; border-radius: 8px; } /* RESPONSIVE */ @media (max-width: 1024px) { .trust-grid { grid-template-columns: repeat(2,1fr); } .personas-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 860px) { .section-header { margin-bottom: 40px; } .hero-scroll-cue { display: none; } .hero { min-height: 0 !important; padding-top: 48px; padding-bottom: 16px; align-items: flex-start; } .hero-inner { grid-template-columns: 1fr; gap: 40px; padding: 20px; } .hero-image-col { order: -1; min-height: 0 !important; align-items: flex-start; justify-content: flex-start; } .hero-image-col img { width: 100%; max-width: 100%; height: auto; max-height: none; margin: 0; display: block; border-radius: 16px; } .hero-image-bg { display: none; } .hero-subtitle { max-width: 100%; } .how-grid { grid-template-columns: 1fr; gap: 20px; } .how-connector { display: none; } .lifejar-inner { grid-template-columns: 1fr; gap: 48px; } .lifejar-image-wrap { order: -1; } .kit-grid { grid-template-columns: repeat(3,1fr); } .problem-section, .how-section, .kit-section, .storage-section, .personas-section, .lifejar-section, .trust-section, .journey-section, .price-section, .closing-section { padding-left: 0; padding-right: 0; } } @media (max-width: 600px) { .section-header { margin-bottom: 28px; } .container { padding: 0 20px; } .hero-inner { padding: 16px 20px; } .hero-eyebrow { margin-top: 4px; margin-bottom: 11px; } .hero-buy-row { gap: 8px; align-items: stretch; } body.pg-index .hero-buy-row .btn-primary, .hero-buy-row .btn-outline-orange { padding: 13px 8px; font-size: 14px; flex: 1; text-align: center; box-sizing: border-box; display: flex; align-items: center; justify-content: center; white-space: nowrap; } .problem-section, .how-section, .kit-section, .storage-section, .personas-section, .lifejar-section, .trust-section, .journey-section, .price-section, .closing-section { padding-left: 0; padding-right: 0; } .how-step h3 { padding: 0 16px; } .how-step p { padding: 0 16px; } .persona-card { padding: 20px 20px 28px; } .kit-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .kit-card { padding: 14px 12px; } .kit-card p { line-height: 1.4; font-size: 12px; } .kit-card h3 { font-size: 13px; margin-bottom: 4px; } .kit-img-wrap { margin-bottom: 10px; } .personas-grid { grid-template-columns: 1fr; } .trust-grid { grid-template-columns: 1fr; } .price-card { padding: 40px 26px; } .price-amount { font-size: 64px; } .nav-inner { padding: 0 16px; } .sharing-grid { grid-template-columns: 1fr !important; } .sharing-grid > div { padding: 18px 16px !important; } .closing-cta { padding: 12px 16px; font-size: 14px; flex: 1; text-align: center; justify-content: center; box-sizing: border-box; } .journey-qr-hint { display: none !important; } } @media (min-width: 861px) { .tile-update-pos { order: 1; } .tile-poa-pos { order: 2; } } @media (max-width: 860px) { .kit-section .section-header { margin-bottom: 24px; } } @media (max-width: 860px) { .hero-eyebrow { font-size: clamp(11px, 1.5vh, 16px); } .hero-title { font-size: clamp(22px, 4.5vh, 46px); line-height: 1.1; } .hero-subtitle { font-size: clamp(12px, 1.8vh, 18px); line-height: 1.6; margin-bottom: clamp(12px, 2vh, 24px); } .hero-img-tablet { max-height: 40vh; width: 100%; object-fit: cover; object-position: center; } .hero-buy-row { gap: 10px; } .hero-price { font-size: clamp(11px, 1.4vh, 14px); } .hero-price strong { font-size: clamp(20px, 3.5vh, 30px); } } @media (max-width: 600px) { .kit-section .section-header { margin-bottom: 16px; } } .hero-img-desktop { display: block; width: 100%; border-radius: 16px; } .hero-img-tablet { display: none !important; width: 100%; border-radius: 16px; } @media (max-width: 860px) { .hero-img-desktop { display: none !important; } .hero-img-tablet { display: block !important; } } /* ============================================================ SECTION 5 — ES.HTML & CONTROL-DEMO.HTML (responder portals) ============================================================ */ /* --- es.html --- */ :root { --red: #C8102E; --red-dark: #9B1222; --navy: #152332; --navy-mid: #1C2B3A; --white: #FFFFFF; --cream: #FAF6F1; --text: #1E293B; --muted: #64748B; --border: #E2E8F0; --green: #16A34A; --green-bg: #DCFCE7; --green-bd: #22C55E; --alert-bg: #FEF2F2; --alert-bd: #EF4444; } body.pg-es, body.pg-control-demo { height: 100%; } body.pg-es { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; font-family: 'Lato', sans-serif; background: var(--cream); color: var(--text); -webkit-font-smoothing: antialiased; } .page-wrap { max-width: 960px; margin: 0 auto; flex: 1; width: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 40px; } /* ── HEADER ──────────────────────────────────────── */ body.pg-es .header{ position: relative; z-index: 900; background: var(--navy); height: 58px; padding: 0 20px; display: flex; align-items: center; gap: 14px; border-bottom: 3px solid var(--red); box-shadow: 0 2px 8px rgba(0,0,0,0.3); box-sizing: border-box; } body.pg-es .header img{ width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; } body.pg-es .header-text{ display: flex; flex-direction: column; justify-content: center; } body.pg-es .header-text h1{ font-family: 'Raleway', sans-serif; font-size: 16px; font-weight: 800; color: var(--white); letter-spacing: 0.04em; line-height: 1.2; margin: 0; } body.pg-es .header-text p{ font-size: 12px; color: rgba(255,255,255,0.6); letter-spacing: 0.03em; font-weight: 600; margin: 1px 0 0; } /* ── CARD ────────────────────────────────────────── */ .card { background: var(--white); border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); margin: 20px auto 0; max-width: none; width: calc(100% - 32px); overflow: hidden; } .card-inner { padding: 24px 20px; } /* Record screen with MLJ section below: flat bottom so bar connects flush */ #screen-record .card, #screen-police-record .card, #screen-fire .card, #screen-coastguard .card { border-radius: 12px !important; margin: 32px 0 0 !important; width: 100% !important; max-width: none !important; box-sizing: border-box; } /* Record screen divs are the sole width/centering container */ #screen-record, #screen-police-record, #screen-fire, #screen-coastguard { max-width: none; width: 100%; margin: 0; padding-bottom: 32px; } /* Orange bar + info card fill the container exactly */ #screen-record .mlj-orange-bar, #screen-police-record .mlj-orange-bar, #screen-fire .mlj-orange-bar, #screen-coastguard .mlj-orange-bar { width: 100% !important; max-width: none !important; margin: 32px 0 0 !important; border: none !important; border-radius: 10px 10px 0 0 !important; box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important; } #screen-record .mlj-info-card, #screen-police-record .mlj-info-card, #screen-fire .mlj-info-card, #screen-coastguard .mlj-info-card { width: 100% !important; max-width: none !important; margin: 0 !important; padding-top: 16px !important; padding-bottom: 16px !important; background: #fff !important; border: none !important; border-top: 1px solid #EA580C !important; border-radius: 0 0 10px 10px !important; } @media (max-width: 600px) { #screen-record .card, #screen-police-record .card, #screen-fire .card, #screen-coastguard .card { margin: 16px 0 0 !important; } #screen-record .mlj-orange-bar, #screen-police-record .mlj-orange-bar, #screen-fire .mlj-orange-bar, #screen-coastguard .mlj-orange-bar { margin: 16px 0 0 !important; } } /* ── PRE-AUTH SCREEN ─────────────────────────────── */ #screen-auth { display: block; } #screen-record, #screen-household, #screen-police-emma { display: none; } .step-row { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); } .step-row:last-child { border-bottom: none; } .step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--red); color: var(--white); font-family: 'Roboto', sans-serif; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } .step-body { flex: 1; } .step-label { font-family: 'Roboto', sans-serif; font-size: 17px; font-weight: 800; color: var(--navy); margin-bottom: 6px; } .step-detail { font-size: 14px; color: var(--muted); line-height: 1.55; } /* ICE Code display */ .ice-code-box { background: #F0FDF4; border: 2px solid var(--navy); border-radius: 10px; padding: 14px 20px; margin: 10px 0 4px; text-align: center; } .ice-code-label { font-family: 'Roboto', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .ice-code-value { font-family: 'Roboto', sans-serif; font-size: 26px; font-weight: 900; color: var(--navy); letter-spacing: 0.12em; } .ice-code-hint { display: none; } /* Auth code input */ .auth-input-wrap { margin: 10px 0 4px; } .auth-input { width: 100%; font-family: 'Roboto', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: 0.18em; text-align: center; text-transform: uppercase; padding: 14px 16px; border: 1.5px solid #8B95A1; border-radius: 8px; color: var(--navy); background: var(--cream); outline: none; transition: border-color 0.2s; } .auth-input:focus-visible { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.18); background: #ffffff; } .auth-input::placeholder { color: #8B95A1; letter-spacing: 0.08em; } .btn-unlock { width: 100%; margin-top: 20px; padding: 16px; background: var(--red); color: var(--white); font-family: 'Roboto', sans-serif; font-weight: 800; font-size: 16px; letter-spacing: 0.04em; border: none; border-radius: 8px; cursor: pointer; transition: background 0.18s, transform 0.12s; } .btn-unlock:hover { background: var(--red-dark); transform: translateY(-1px); } .btn-unlock:active { transform: translateY(0); } .auth-error { display: none; margin-top: 10px; padding: 10px 14px; background: var(--alert-bg); border: 1px solid var(--alert-bd); border-radius: 6px; font-size: 13px; color: #991B1B; font-weight: 600; text-align: center; } body.pg-es .no-signal-note{ margin: 0 10px 16px; max-width: 520px; width: calc(100% - 20px); padding: 10px 16px; background: #ffffff; border: 1px solid #E2E8F0; border-left: 3px solid #64748B; border-radius: 8px; display: flex; gap: 10px; align-items: flex-start; } body.pg-es .no-signal-note p{ font-size: 13px; color: var(--muted); line-height: 1.5; } body.pg-es .no-signal-note strong{ color: var(--text); } /* ── Responder photo capture overlay ────────────────── */ .resp-photo-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.85); z-index: 8000; flex-direction: column; align-items: center; justify-content: center; padding: 24px; } .resp-photo-overlay.open { display: flex; } .resp-photo-card { background: #fff; border-radius: 20px; padding: 28px 24px 24px; max-width: 400px; width: 100%; display: flex; flex-direction: column; align-items: center; box-shadow: 0 20px 60px rgba(0,0,0,0.4); } .resp-photo-title { font-family: 'Raleway', sans-serif; font-size: 18px; font-weight: 800; color: #152332; margin-bottom: 6px; text-align: center; } .resp-photo-sub { font-size: 12px; color: var(--slate-grey); text-align: center; margin-bottom: 20px; max-width: 300px; line-height: 1.5; } .resp-camera-wrap { width: 100%; border-radius: 12px; overflow: hidden; background: #1E293B; margin-bottom: 20px; min-height: 220px; display: flex; align-items: center; justify-content: center; position: relative; } .resp-camera-wrap video { width: 100%; display: block; } .resp-face-guide { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } .resp-face-guide.active { display: flex; } .resp-face-oval { width: 200px; height: 240px; border-radius: 50%; border: 3px solid #EA580C; box-shadow: 0 0 0 1000px rgba(0,0,0,0.45); } .resp-face-label { position: absolute; bottom: 16px; left: 0; right: 0; color: #fff; font-size: 12px; font-weight: 700; margin-top: 0; text-align: center; font-family: 'Lato', sans-serif; text-shadow: 0 1px 4px rgba(0,0,0,0.9); letter-spacing: 0.01em; } .resp-camera-placeholder-txt { display: flex; flex-direction: column; align-items: center; font-size: 13px; text-align: center; padding: 40px 20px; } .resp-confirm-strip { display: none; background: rgba(22,163,74,0.15); border: 1.5px solid #16A34A; border-radius: 10px; padding: 10px 16px; margin-bottom: 16px; font-size: 13px; color: #111827; font-weight: 600; text-align: center; max-width: 340px; width: 100%; } .resp-photo-btn { width: 100%; max-width: 340px; padding: 14px; background: #FFF8F0; color: #EA580C; border: 1.5px solid #E8920A; border-radius: 10px; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 800; letter-spacing: 0.04em; cursor: pointer; margin-bottom: 10px; } .resp-photo-btn:hover { background: #FFEDD5; } .resp-photo-skip { display: none; background: none; border: none; color: #64748B; font-size: 13px; cursor: pointer; font-family: 'Lato',sans-serif; font-weight: 600; text-decoration: none; padding: 4px; margin-top: 12px; } /* ── Radio fallback overlay ─────────────────────────────── */ .radio-fallback-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.88); z-index: 8500; flex-direction: column; align-items: center; justify-content: center; padding: 24px; } .radio-fallback-overlay.open { display: flex; } .radio-fallback-card { background: #fff; border-radius: 20px; padding: 24px 20px 20px; max-width: 380px; width: 100%; display: flex; flex-direction: column; align-items: center; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } /* ── Org sign-in modal ────────────────────────────────── */ .org-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.65); z-index: 9000; align-items: center; justify-content: center; padding: 24px; } .org-modal-overlay.open { display: flex; } .org-modal-sheet { background: #fff; border-radius: 20px; width: 100%; max-width: 420px; padding: 28px 24px 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.35); } .org-modal-handle { display: none; } .org-modal-title { font-family: 'Raleway', sans-serif; font-size: 17px; font-weight: 800; color: #152332; margin: 0 0 4px; text-align: center; } .org-modal-sub { font-size: 12px; color: #64748B; text-align: center; margin: 0 0 20px; line-height: 1.5; } .org-step { display: none; } .org-step.active { display: block; } .org-field { margin-bottom: 14px; } .org-field label { display: block; font-size: 11px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 5px; } .org-field input { width: 100%; padding: 12px 14px; border: 1.5px solid #8B95A1; border-radius: 10px; font-size: 15px; font-family: 'Lato',sans-serif; color: #152332; background: #F8FAFC; box-sizing: border-box; outline: none; } .org-field input:focus-visible { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.18); background: #ffffff; } body.pg-es .org-btn{ width: 100%; padding: 13px; background: #152332; color: #fff; border: none; border-radius: 10px; font-family: 'Roboto',sans-serif; font-size: 14px; font-weight: 800; letter-spacing: 0.04em; cursor: pointer; margin-top: 6px; } body.pg-es .org-btn:hover{ background: #1E3A5F; } .org-otp-hint { font-size: 12px; color: #64748B; text-align: center; margin-bottom: 14px; line-height: 1.5; } .org-camera-wrap { background: #0F172A; border-radius: 12px; overflow: hidden; margin-bottom: 14px; position: relative; min-height: 200px; display: flex; align-items: center; justify-content: center; } .org-camera-wrap video { width: 100%; display: block; border-radius: 12px; } .org-camera-wrap canvas { display: none; } .org-camera-placeholder { color: rgba(255,255,255,0.5); font-size: 13px; text-align: center; padding: 40px 20px; } .org-confirm-strip { display: none; background: #F0FDF4; border: 1.5px solid #86EFAC; border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; font-size: 13px; color: #111827; font-weight: 600; text-align: center; line-height: 1.5; } .org-close { background: none; border: none; cursor: pointer; font-size: 12px; color: #94A3B8; display: block; margin: 14px auto 0; font-family: 'Lato',sans-serif; } .org-step-indicator { display: flex; justify-content: center; gap: 6px; margin-bottom: 20px; } .org-step-dot { width: 8px; height: 8px; border-radius: 50%; background: #E2E8F0; } .org-step-dot.done { background: #152332; } /* Footer org link */ .footer-org-link { font-size: 12px; color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.35); border-radius: 20px; cursor: pointer; font-family: 'Raleway', sans-serif; font-weight: 600; letter-spacing: 0.03em; text-decoration: none; padding: 6px 18px; white-space: nowrap; transition: background 0.15s, border-color 0.15s; } .footer-org-link:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.6); color: #fff; } /* Footer policy links row */ .footer-links-row { display: flex; align-items: center; justify-content: center; width: 100%; } .footer-links-row.hidden { display: none; } .footer-org-row { display: flex; justify-content: center; width: 100%; padding: 2px 0; } .footer-org-row.hidden { display: none; } body.pg-es .footer-policy-links{ display: flex; gap: 10px; flex-wrap: nowrap; align-items: center; } body.pg-es .footer-policy-links a{ font-size: 11px; color: rgba(255,255,255,0.7); text-decoration: none; font-family: 'Lato', sans-serif; white-space: nowrap; } body.pg-es .footer-policy-links a:hover{ color: rgba(255,255,255,0.95); text-decoration: underline; } body.pg-es .footer-sep{ font-size: 11px; color: rgba(255,255,255,0.3); } .footer-mobile-break { display: none; } body.pg-es .footer-cookie-btn{ font-size: 11px; color: rgba(255,255,255,0.7); background: none; border: none; cursor: pointer; font-family: 'Lato', sans-serif; padding: 0; white-space: nowrap; } body.pg-es .footer-cookie-btn:hover{ color: rgba(255,255,255,0.95); text-decoration: underline; } .footer-bottom-row { display: flex; align-items: center; justify-content: center; width: 100%; gap: 3px; flex-wrap: wrap; } /* ── ICE RECORD ──────────────────────────────────── */ body.pg-es .record-header{ background: var(--navy); padding: 14px 20px; display: flex; align-items: center; gap: 10px; } .record-header-text h2 { font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 800; color: var(--white); letter-spacing: 0.04em; } .record-header-text p { font-size: 11px; rgba(255,255,255,0.55); margin-top: 1px; } /* DNACPR strip */ .dnacpr-strip { padding: 10px 20px; display: flex; align-items: center; gap: 10px; } .dnacpr-strip .icon { font-size: 18px; flex-shrink: 0; } .dnacpr-title { font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; } .dnacpr-sub { font-size: 12px; line-height: 1.4; margin-top: 2px; } /* Identity block */ .identity-block { padding: 22px 20px; border-bottom: 1px solid var(--border); display: flex; gap: 14px; align-items: center; } .avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--navy); display: flex; align-items: center; justify-content: center; font-family: 'Roboto', sans-serif; font-size: 21px; font-weight: 800; color: var(--white); flex-shrink: 0; border: 2px solid var(--red); } .identity-name { font-family: 'Roboto', sans-serif; font-size: 21px; font-weight: 800; color: var(--navy); line-height: 1.2; } .identity-meta { font-size: 14px; color: var(--muted); margin-top: 4px; line-height: 1.5; } .identity-meta strong { color: var(--text); } /* Section blocks */ body.pg-es .record-section{ padding: 14px 20px; border-bottom: 1px solid var(--border); } body.pg-es .record-section:last-child{ border-bottom: none; } body.pg-es .record-section-title{ font-family: 'Roboto', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); margin-bottom: 10px; } .alert-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--alert-bg); border: 1.5px solid var(--alert-bd); border-radius: 20px; padding: 4px 10px; font-size: 13px; font-weight: 700; color: #991B1B; margin: 3px 4px 3px 0; } .med-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px; } .med-row:last-child { border-bottom: none; } .med-name { font-weight: 700; color: var(--text); } .med-dose { color: var(--muted); font-size: 13px; } .contact-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); } .contact-row:last-child { border-bottom: none; } .contact-name { font-weight: 700; font-size: 14px; color: var(--text); } .contact-rel { font-size: 12px; color: var(--muted); margin-top: 2px; } .contact-phone { font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 700; color: var(--red); text-decoration: none; } .info-row { display: flex; justify-content: space-between; font-size: 14px; padding: 5px 0; border-bottom: 1px solid var(--border); } .info-row:last-child { border-bottom: none; } .info-label { color: var(--muted); } .info-value { font-weight: 700; color: var(--text); text-align: right; } /* Accessed footer */ .access-footer { margin: 8px 20px 20px; padding: 6px 12px; font-size: 11px; color: rgba(255,255,255,0.9); text-align: center; line-height: 1.5; } .access-footer strong { font-weight: 600; color: rgba(255,255,255,0.9); } /* ── FOOTER ──────────────────────────────────────── */ body.pg-es .site-footer{ background: var(--navy); padding: 6px 32px 4px; flex-shrink: 0; display: flex; flex-direction: column; gap: 1px; border-top: 1px solid rgba(255,255,255,0.08); } body.pg-es .footer-copy{ font-size: 11px; color: rgba(255,255,255,0.55); text-align: center; width: 100%; } .footer-audit { display: none; align-items: center; gap: 6px; font-size: 11px; color: rgba(255,255,255,0.95); white-space: nowrap; order: -1; } .footer-audit.visible { display: flex; } /* ── HOUSEHOLD SELECTION ─────────────────────────── */ .household-intro { padding: 18px 20px 12px; border-bottom: 1px solid var(--border); } .household-intro h3 { font-family: 'Roboto', sans-serif; font-size: 17px; font-weight: 800; color: var(--navy); margin-bottom: 4px; } .household-intro p { font-size: 13px; color: var(--muted); } .person-tile { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--border); } .person-tile:last-child { border-bottom: none; } body.pg-es .person-photo{ width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 800; color: var(--white); flex-shrink: 0; border: 2px solid rgba(255,255,255,0.15); } body.pg-es .person-info{ flex: 1; min-width: 0; } body.pg-es .person-name{ font-family: 'Roboto', sans-serif; font-size: 17px; font-weight: 800; color: var(--navy); line-height: 1.2; } body.pg-es .person-meta{ font-size: 13px; color: var(--muted); margin-top: 3px; } .person-badges { margin-top: 5px; display: flex; gap: 6px; flex-wrap: wrap; } .person-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 10px; line-height: 1.5; white-space: nowrap; } .badge-adult { background: #E2E8F0; color: #334155; border: 1.5px solid #94A3B8; } .badge-ward { background: #617080; color: #fff; border: 1.5px solid #94A3B8; } .badge-primary { background: #F0FDF4; color: #166534; border: 1.5px solid #86EFAC; } .btn-view-record { flex-shrink: 0; background: var(--red); color: var(--white); font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 800; padding: 10px 14px; border: none; border-radius: 8px; cursor: pointer; transition: background 0.18s; white-space: nowrap; } .btn-view-record:hover { background: var(--red-dark); } .back-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; border-bottom: 1px solid var(--border); text-decoration: none; width: 100%; } .back-link:hover { color: var(--navy); background: #F8FAFC; } /* ── EMR RECORD VIEW (matches prototype responder flow) ── */ body.pg-es .emr-identity{ display: flex; align-items: center; gap: 12px; padding: 20px 20px 12px; } body.pg-es .emr-avatar{ width: 52px; height: 52px; border-radius: 50%; background: var(--navy); color: var(--white); display: flex; align-items: center; justify-content: center; font-family: 'Roboto', sans-serif; font-weight: 800; font-size: 17px; flex-shrink: 0; overflow: hidden; border: 2px solid #8B95A1; } body.pg-es .emr-avatar img{ width: 100%; height: 100%; object-fit: cover; } body.pg-es .emr-identity-text{ flex: 1; min-width: 0; } body.pg-es .emr-identity-text h2{ font-family: 'Roboto', sans-serif; font-weight: 800; font-size: 18px; color: var(--navy); margin: 0 0 2px; } body.pg-es .emr-identity-meta{ font-size: 13px; color: var(--muted); margin: 0 0 2px; } body.pg-es .emr-identity-ref{ font-size: 11px; rgba(255,255,255,0.9); margin: 2px 0 0; } body.pg-es .emr-critical{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; margin: 0 20px 8px; background: #949494; border-radius: 14px; overflow: hidden; border: 1.5px solid #8B95A1; } body.pg-es .emr-critical__cell{ background: #FAFBFC; padding: 12px 10px; display: flex; flex-direction: column; gap: 4px; text-align: center; } body.pg-es .emr-critical__cell--alert{ background: #FEE2E2; } /* drug allergy present */ .emr-critical__cell--alert-none { background: #DCFCE7; } /* no drug allergy */ .emr-critical__cell--alert-none .v { color: #166534; } body.pg-es .emr-critical__cell--alert .v{ color: #991B1B; } body.pg-es .emr-critical__cell--conditions{ background: #DBEAFE; } /* conditions — pale blue */ body.pg-es .emr-critical__cell--conditions .v{ color: #1E40AF; } body.pg-es .emr-critical__cell--blood{ background: #FEE2E2; } /* blood type — pale red */ body.pg-es .emr-critical__cell--blood .v{ color: #991B1B; } body.pg-es .emr-critical__cell .l{ font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); line-height: 1.3; } body.pg-es .emr-critical__cell .v{ font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 15px; color: var(--navy); line-height: 1.2; } .emr-section { margin: 0 16px 16px; padding: 16px; background: var(--white); border: 1.5px solid #8B95A1; border-radius: 10px; } .emr-section--ice { border: none; background: transparent; padding: 12px 12px 16px; } .emr-section h3 { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 14px; color: var(--navy); margin: 0 0 5px; } .emr-section p { font-size: 14px; color: var(--text); margin: 0; line-height: 1.5; } .emr-no-info { font-size: 13px; rgba(255,255,255,0.9); font-style: italic; padding: 2px 0; } .emr-condition-item { padding: 8px 0; border-top: 1px solid #E2E8F0; } .emr-condition-item:first-of-type { border-top: none; padding-top: 0; } .emr-condition-item strong { display: block; font-size: 14px; color: var(--navy); } .emr-condition-meta { font-size: 11px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.06em; display: block; margin: 2px 0 4px; } .emr-condition-item p { font-size: 13px; color: var(--text); margin: 0; line-height: 1.5; } .emr-section h3 + h3, .emr-section p + h3 { margin-top: 10px; } /* ── Hazard & Risk pills (es.html fire panel — selected/active state) ── */ .hazard-pill-row { display:flex; align-items:flex-start; gap:6px; flex-wrap:wrap; margin-bottom:8px; font-size:13px; color:#334155; line-height:2; } .hazard-pill-row:last-child { margin-bottom:0; } .hazard-pill-row strong { white-space:nowrap; font-weight:700; margin-right:2px; } .hazard-pill { background:#FEF2F2; color:#991B1B; border:1.5px solid #DC2626; font-size:12px; font-weight:600; padding:4px 10px; border-radius:20px; display:inline-flex; align-items:center; gap:4px; } .hazard-pill-outline { background:#fff; color:#DC2626; border:1.5px solid #DC2626; font-size:12px; font-weight:600; padding:3px 10px; border-radius:20px; display:inline-flex; align-items:center; gap:4px; } .hazard-clutter { font-size:13px; color:#334155; font-family:'Lato',sans-serif; } .emr-ice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } body.pg-es .emr-ice{ display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 0; background: #FFF8F0; border: 1.5px solid #FFD0A0; border-radius: 12px; cursor: pointer; height: 100%; box-sizing: border-box; } body.pg-es .emr-ice:last-child{ margin-bottom: 0; } body.pg-es .emr-ice__avatar{ width: 42px; height: 42px; border-radius: 50%; background: #94A3B8; color: var(--white); display: flex; align-items: center; justify-content: center; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 13px; flex-shrink: 0; overflow: hidden; } body.pg-es .emr-ice__avatar img{ width: 100%; height: 100%; object-fit: cover; } body.pg-es .emr-ice__body{ flex: 1; display: flex; flex-direction: column; min-width: 0; } body.pg-es .emr-ice__body strong{ font-size: 14px; color: var(--navy); } body.pg-es .emr-ice__body span{ font-size: 12px; color: var(--muted); margin-top: 1px; } body.pg-es .emr-ice__phone{ font-family: ui-monospace, monospace; font-size: 12px !important; color: var(--navy) !important; font-weight: 600; margin-top: 3px !important; } body.pg-es .emr-ice-tile{ display: flex; flex-direction: column; gap: 4px; align-self: stretch; } body.pg-es .emr-ice-tile__label{ font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); padding-left: 2px; } body.pg-es .emr-ice-tile--primary .emr-ice-tile__label{ color: #16A34A; } body.pg-es .emr-ice__call{ width: 46px; height: 46px; border-radius: 50%; background: #16A34A; color: var(--white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; text-decoration: none; } body.pg-es .emr-ice__call:hover{ background: #15803D; } /* Secondary contact — inactive: pale grey */ body.pg-es .emr-ice--secondary{ background: #F1F5F9; border-color: #CBD5E1; } body.pg-es .emr-ice--secondary .emr-ice__body strong{ color: #64748B; } body.pg-es .emr-ice--secondary .emr-ice__phone{ color: #64748B !important; } body.pg-es .emr-ice--secondary .emr-ice__call{ background: #94A3B8; color: #fff; } body.pg-es .emr-ice--secondary .emr-ice__call:hover{ background: #64748B; } /* Secondary contact — active: pale orange */ .emr-ice--active-secondary { background: #FFF7ED; border-color: #EA580C; } body.pg-es .emr-ice--active-secondary .emr-ice__body strong{ color: var(--navy); } body.pg-es .emr-ice--active-secondary .emr-ice__phone{ color: var(--navy) !important; } body.pg-es .emr-ice--active-secondary .emr-ice__call{ background: #EA580C; color: #fff; } body.pg-es .emr-ice--active-secondary .emr-ice__call:hover{ background: #C2410C; } body.pg-es .emr-ice-wrap{ display: flex; flex-direction: column; gap: 10px; } .emr-footer { margin: 0 20px 12px; } /* ── ESSENTIAL NOTES PANEL ───────────────────────── */ body.pg-es .emr-essential{ margin: 16px 20px 8px; padding: 10px 12px 10px 14px; background: #fff; border: 3px solid #EA580C; border-radius: 10px; display: flex; gap: 10px; align-items: flex-start; } .emr-essential__icon { font-size: 18px; flex-shrink: 0; line-height: 1.4; display:none; } body.pg-es .emr-essential__label{ font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: #EA580C; margin-bottom: 5px; } body.pg-es .emr-essential__text{ font-size: 13px; color: var(--text); line-height: 1.5; margin: 0; } body.pg-es .emr-essential__body{ flex: 1; } .emr-essential__divider { border: none; border-top: 1px solid #EA580C; margin: 10px 0; opacity: 0.25; } .emr-essential__service-label { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: #EA580C; margin-bottom: 5px; margin-top: 0; } /* ── BREAKPOINTS ─────────────────────────────────── */ /* iPad and above (768px+) */ @media (min-width: 768px) { #screen-auth .card { max-width: 520px; } #screen-auth .card-inner { padding: 16px 24px; } #screen-auth .step-row { padding: 6px 0; } #screen-auth .step-label { font-size: 17px; } #screen-auth .step-detail { font-size: 12px; } #screen-auth .card-inner { padding: 12px 24px; } #screen-auth .fields-wrap { margin-right: 46px; } #es-demo-block { margin-right: 46px; } body.pg-es #screen-auth .no-signal-note{ max-width: 500px; width: calc(100% - 20px); margin: 12px auto 24px; padding: 10px 16px; } body.pg-es .header{ padding: 18px 28px; } body.pg-es .header img{ width: 56px; height: 56px; } .card { margin: 24px auto 0; } #screen-record .card, #screen-police .card, #screen-fire .card, #screen-coastguard .card, #screen-police-adam .card, #screen-fire-adam .card, #screen-police-rosa .card, #screen-fire-rosa .card, #screen-police-helen .card, #screen-fire-helen .card, #screen-police-emma .card, #screen-fire-emma .card, #screen-police-ryan .card, #screen-fire-ryan .card, #screen-police-marcus .card, #screen-fire-marcus .card { max-width: 850px; } .mlj-orange-bar { max-width: 850px; } .card-inner { padding: 28px 24px; } .fields-wrap { max-width: 100%; } .ice-code-value { font-size: 24px; } .ice-code-box { padding: 16px 28px; } .step-label { font-size: 17px; } .step-detail { font-size: 15px; } .auth-input { font-size: 22px; padding: 12px 20px; } .btn-unlock { font-size: 15px; padding: 14px; } .identity-name { font-size: 22px; } .identity-meta { font-size: 14px; } .avatar { width: 64px; height: 64px; font-size: 22px; } body.pg-es .record-section{ padding: 16px 24px; } body.pg-es .no-signal-note{ max-width: 520px; margin: 0 auto 24px; padding: 10px 16px; } .access-footer { margin: 0 24px 28px; } .emr-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 12px 8px; } .emr-ice-expand { display: none; } body.pg-es .emr-ice-wrap{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } body.pg-es .emr-ice-wrap > div[id]{ display: block !important; margin-top: 0 !important; } .emr-two-col > .emr-section { margin: 0; } } /* Standard mobile (≤600px) */ @media (max-width: 600px) { body.pg-es .header-text h1{ font-size: 14px; } .card { margin: 0; width: 100%; border-radius: 0; box-shadow: none; border: none; } .mlj-orange-bar { width: 100%; max-width: none; border-radius: 0; margin-left: 0; margin-right: 0; } .mlj-info-card { width: 100%; max-width: none; margin: 0 auto 8px; border-radius: 0; box-shadow: none; border: 1px solid #FED7AA; border-top: none; padding-top: 0; } .card-inner { padding: 0 14px 18px; } body { background: var(--cream); } /* balance the circle offset so fields look centred */ #screen-auth .card-inner { padding-right: 46px; } .ice-code-value { font-size: 22px; } .ice-code-box { padding: 12px 14px; } .contact-row { flex-direction: column; gap: 6px; align-items: flex-start; } .contact-phone { font-size: 16px; } body.pg-es .no-signal-note{ margin: 0 10px 16px; } .access-footer { margin: 0 10px 20px; } body.pg-es .site-footer{ padding-bottom: 5%; } } /* Small phones — iPhone SE, older Androids (≤375px) */ @media (max-width: 375px) { body.pg-es .header{ padding: 12px 14px; } body.pg-es .header img{ width: 40px; height: 40px; } .card { margin: 0; width: 100%; border-radius: 0; box-shadow: none; border: none; } .card-inner { padding: 0 12px 14px; } .ice-code-value { font-size: 19px; letter-spacing: 0.08em; } .step-num { width: 28px; height: 28px; font-size: 13px; } .step-label { font-size: 17px; } .auth-input { font-size: 20px; } .identity-name { font-size: 18px; } .avatar { width: 48px; height: 48px; font-size: 17px; } body.pg-es .no-signal-note{ margin: 0 8px 14px; } .access-footer { margin: 0 8px 16px; } body.pg-es .footer-copy{ text-align: center; } .footer-mobile-break { display: none; } .footer-bottom-row { justify-content: center; } body.pg-es .footer-policy-links{ flex-wrap: wrap; justify-content: center; gap: 8px; } body.pg-es .footer-sep{ display: none; } .footer-links-row { justify-content: center; } .footer-org-row { justify-content: center; } } /* ── 2-COL MEDS / ALLERGIES ROW ─────────────────── */ body.pg-es .emr-meds-row{ display: grid; grid-template-columns: 1fr 1fr; margin: 0 20px 16px; border: 1.5px solid #8B95A1; border-radius: 10px; overflow: hidden; } body.pg-es .emr-meds-cell{ background: #FAFBFC; padding: 16px; } body.pg-es .emr-meds-cell:first-child{ border-right: 1.5px solid #8B95A1; } body.pg-es .emr-meds-cell p{ font-size: 13px; color: var(--text); line-height: 1.45; margin: 4px 0 0; } @media (max-width: 600px) { body.pg-es .emr-critical{ grid-template-columns: 1fr; margin: 0 16px 32px; border-radius: 10px; } body.pg-es .emr-critical__cell{ text-align: left; padding: 10px 14px; } body.pg-es .emr-critical__cell:not(:last-child){ border-bottom: 1px solid rgba(0,0,0,0.06); } body.pg-es .emr-meds-row{ grid-template-columns: 1fr; margin: 0 16px 32px; } body.pg-es .emr-meds-cell:first-child{ border-right: none; border-bottom: 1.5px solid #8B95A1; } .emr-section { margin: 0 16px 32px; } } @media (max-width: 380px) { body.pg-es .emr-critical{ margin: 0 16px 20px; } body.pg-es .emr-meds-row{ margin: 0 16px 20px; } .emr-section { margin: 0 16px 20px; } } /* ── MICRO LABEL (column/section headings) ────────── */ body.pg-es .emr-micro-label{ font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); } /* ── LANGUAGE ROW ────────────────────────────────── */ .emr-language { margin: 0 16px 16px; padding: 10px 14px; font-size: 13px; color: var(--text); display: grid; grid-template-columns: auto 1fr 1fr; align-items: baseline; gap: 6px 12px; border: 1.5px solid #8B95A1; border-radius: 8px; background: #fff; width: calc(50% - 16px); } @media (max-width: 600px) { .emr-language { width: auto; } } .emr-languages { margin: 0 16px 16px; padding: 10px 14px; border: 1.5px solid #8B95A1; border-radius: 8px; background: #fff; width: calc(50% - 16px); } @media (max-width: 600px) { .emr-languages { width: auto; } } /* ── TWO-COL WRAPPER (mobile: transparent) ─────────── */ .emr-two-col { display: contents; } /* ── ICE EXPAND BUTTON ───────────────────────────── */ .emr-ice-expand { width: 100%; margin-top: 8px; background: none; border: 1px dashed #CBD5E1; border-radius: 8px; padding: 8px 12px; font-family: 'Lato', sans-serif; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; text-align: left; transition: background .15s, color .15s; } .emr-ice-expand:hover { background: #F8FAFC; color: var(--navy); } /* ── FURTHER INFO DIVIDER ────────────────────────── */ body.pg-es .further-divider{ margin: 4px 20px 4px; padding: 10px 0 6px; border-top: 1px solid var(--border); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); } .further-info-strip { background: var(--navy); padding: 10px 20px; display: flex; align-items: center; gap: 10px; margin-top: 4px; } .further-info-strip__icon { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .further-info-strip__title { font-family: 'Roboto', sans-serif; font-size: 11px; font-weight: 800; color: #fff; letter-spacing: 0.04em; } .further-info-strip__sub { font-size: 10px; rgba(255,255,255,0.55); margin-top: 1px; } /* ── MY LIFEJARS INFO CARD ─── */ .mlj-orange-bar { background: #FFF7ED; border: 1px solid #FED7AA; border-radius: 0; padding: 20px 20px; display: flex; align-items: center; gap: 10px; width: calc(100% - 32px); max-width: 850px; margin: 0 auto; box-sizing: border-box; } .mlj-info-card { background: #fff; border: none; box-shadow: none; margin: 0; padding-top: 20px; width: 100%; max-width: 850px; overflow: visible; padding-bottom: 20px; } .mlj-info-header { padding: 14px 20px 12px; border-bottom: 1px solid #E2E8F0; background: #fff; } .mlj-info-header__eyebrow { font-family: 'Roboto', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #1C3A5F; margin-bottom: 4px; } .mlj-info-header__sub { font-size: 13px; color: #475569; line-height: 1.4; } /* ── DESKTOP 2-COL SECTIONS (grid applied at ≥768px) ─── */ /* ── Service pills bar ─────────────────────────────────── */ #demo-bar { display:none !important; } #service-pills-bar { position: relative; z-index: 899; background: #E2E4E9; border-bottom: 1px solid #C8CAD0; padding: 8px 16px; display: block; } #service-pills-bar .pills-inner { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } /* nav group: ← label → */ .spb-nav-group { display: flex; align-items: center; justify-content: center; gap: 10px; } /* divider between nav and pills — hidden on mobile */ .spb-divider { display: none; } /* desktop/tablet: single row */ @media(min-width:601px) { #service-pills-bar { display: flex; align-items: center; justify-content: center; gap: 12px; } .spb-divider { display: block; width: 1px; height: 20px; background: #C8CAD0; flex-shrink: 0; } #service-pills-bar .pills-inner { margin: 0; } } /* mobile: nav row on top, pills below */ @media(max-width:600px) { #service-pills-bar { display: block; padding: 6px 12px; } .spb-nav-group { margin-bottom: 6px; } } .svc-pill { font-family: 'Lato', sans-serif; font-size: 11px; font-weight: 700; padding: 4px 11px; border: 1.5px solid #94A3B8; border-radius: 20px; background: #fff; color: #334155; cursor: pointer; white-space: nowrap; transition: all 0.15s; } .svc-pill:hover:not(.svc-pill--active) { background: #F1F5F9; } .svc-pill--active { background: #1E293B; color: #fff; border-color: #1E293B; } .location-select-wrap { padding: 6px 16px 10px; } .household-intro { border-bottom: 1px solid #E2E8F0; padding-bottom: 4px; } .location-select-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8B95A1; margin-bottom: 8px; } .location-pills { display: flex; gap: 8px; flex-wrap: wrap; } .location-pill { font-family: 'Lato', sans-serif; font-size: 11px; font-weight: 700; padding: 3px 10px; border: 1.5px solid #8B95A1; border-radius: 20px; background: #F1F5F9; color: #475569; cursor: pointer; white-space: nowrap; transition: all 0.15s; } .location-pill--active { background: #64748B; color: #fff; border-color: transparent; } .svc-pill--disabled { opacity: 0.38; cursor: not-allowed; } .svc-pill:hover:not(.svc-pill--active):not(.svc-pill--disabled) { background: #F8FAFC; border-color: #64748B; } .pet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}@media(max-width:600px){.pet-grid{grid-template-columns:1fr 1fr;}}@media(max-width:380px){.pet-grid{grid-template-columns:1fr;}} /* --- control-demo.html --- */ :root { --red: #C8102E; --red-dark: #9B1222; --navy: #152332; --navy-mid: #1C2B3A; --white: #FFFFFF; --cream: #FAF6F1; --text: #1E293B; --muted: #64748B; --border: #E2E8F0; --green: #16A34A; --green-bg: #DCFCE7; --green-bd: #22C55E; --alert-bg: #FEF2F2; --alert-bd: #EF4444; --auth-bg: rgba(200,16,46,0.06); --auth-bd: #C8102E; } body.pg-control-demo { height: 100%; font-family: 'Lato', sans-serif; color: var(--text); -webkit-font-smoothing: antialiased; background: var(--cream); } /* ── Shared header ──────────────────────────── */ body.pg-control-demo .header{ background: var(--navy); height: 58px; padding: 0 20px; display: flex; align-items: center; gap: 14px; border-bottom: 3px solid var(--red); box-shadow: 0 2px 8px rgba(0,0,0,0.3); flex-shrink: 0; } body.pg-control-demo .header img{ width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; } .header-text { display: flex; flex-direction: column; justify-content: center; } .header-text h1 { font-family: 'Raleway', sans-serif; font-size: 16px; font-weight: 800; color: var(--white); letter-spacing: 0.04em; line-height: 1.2; margin: 0; } .header-text p { font-size: 12px; color: rgba(255,255,255,0.6); letter-spacing: 0.03em; font-weight: 600; margin: 2px 0 0; } .header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } /* Operator badge shown in dashboard header */ .operator-badge { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .operator-badge .op-name { font-size: 13px; font-weight: 700; color: var(--white); line-height: 1.2; } .operator-badge .op-meta { font-size: 11px; color: rgba(255,255,255,0.55); } .service-badge { padding: 5px 11px; border-radius: 20px; border: 1.5px solid rgba(255,255,255,0.3); font-family: 'Raleway', sans-serif; font-size: 12px; font-weight: 800; color: var(--white); letter-spacing: 0.03em; white-space: nowrap; } body.pg-control-demo .btn-header-outline{ background: transparent; border: 2px solid rgba(255,255,255,0.5); border-radius: 8px; padding: 8px 14px; text-align: center; white-space: nowrap; cursor: pointer; transition: background 0.18s; text-decoration: none; display: flex; flex-direction: column; gap: 2px; } body.pg-control-demo .btn-header-outline:hover{ background: rgba(255,255,255,0.1); } body.pg-control-demo .btn-header-outline span:first-child{ font-size: 14px; font-weight: 700; color: var(--white); } body.pg-control-demo .btn-header-outline span:last-child{ font-size: 11px; color: rgba(255,255,255,0.8); } /* Right-corner service label in header */ .header-service-label { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; border-left: 1px solid rgba(255,255,255,0.15); padding-left: 16px; } body.pg-control-demo .header-service-label .svc-line1{ font-family: 'Raleway', sans-serif; font-size: 15px; font-weight: 800; color: var(--white); letter-spacing: 0.04em; line-height: 1.2; } .header-service-label .svc-line2 { font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 0.04em; font-weight: 600; } /* ══════════════════════════════════════════════ LOGIN SCREEN ══════════════════════════════════════════════ */ #screen-login { display: flex; flex-direction: column; min-height: 100vh; } body.pg-control-demo .login-body{ flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; background: var(--cream); } body.pg-control-demo .demo-hint{ background: #FFF7ED; border: 1px solid #FDBA74; border-radius: 8px; padding: 12px 14px; margin-bottom: 18px; } body.pg-control-demo .demo-hint p{ font-size: 12px; color: #64748B; margin: 0 0 8px; } body.pg-control-demo .demo-hint p:last-child{ margin-bottom: 0; } body.pg-control-demo .demo-hint strong{ color: #C2410C; } .demo-svc-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } body.pg-control-demo .demo-fill-btn{ background: #fff; border: 1.5px solid #8B95A1; color: #152332; font-size: 11px; font-weight: 700; cursor: pointer; padding: 4px 10px; border-radius: 20px; font-family: 'Lato', sans-serif; transition: background 0.15s, color 0.15s; } body.pg-control-demo .demo-fill-btn:hover, body.pg-control-demo .demo-fill-btn.active{ background: #152332; border-color: #152332; color: #fff; } #demo-cred-detail { font-size: 11px; color: #92400E; margin-top: 7px; display: none; } body.pg-control-demo .login-card{ background: var(--white); border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); width: 100%; max-width: 500px; overflow: hidden; } body.pg-control-demo .login-card-header{ background: var(--navy); padding: 20px 24px; } body.pg-control-demo .login-card-header h2{ font-family: 'Raleway', sans-serif; font-size: 15px; font-weight: 800; color: var(--white); letter-spacing: 0.06em; text-transform: uppercase; margin: 0; } body.pg-control-demo .login-card-header p{ font-size: 12px; color: rgba(255,255,255,0.85); margin: 0; margin-top: 1px; } .login-card-body { padding: 28px 24px; } body.pg-control-demo .field-group{ margin-bottom: 18px; } body.pg-control-demo .field-label{ font-size: 13px; font-weight: 700; color: #1C2B3A; letter-spacing: 0.01em; display: block; margin-bottom: 6px; } body.pg-control-demo .field-input{ width: 100%; padding: 11px 14px; border: 1.5px solid #8B95A1; border-radius: 7px; font-family: 'Lato', sans-serif; font-size: 15px; color: var(--text); background: var(--white); outline: none; transition: border-color 0.2s; } body.pg-control-demo .field-input:focus-visible{ outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.18); background: #ffffff; } body.pg-control-demo .field-input::placeholder{ color: #B0BAC6; } /* Domain detection badge */ body.pg-control-demo .domain-detect{ display: none; margin-top: 8px; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; gap: 6px; align-items: center; width: fit-content; max-width: 50%; } body.pg-control-demo .domain-detect.found{ display: flex; background: var(--green-bg); border: 1.5px solid var(--green-bd); color: #14532D; } body.pg-control-demo .domain-detect.unknown{ display: flex; background: #FEF9C3; border: 1.5px solid #FDE68A; color: #713F12; } /* Fallback service selector — shown only when domain is ambiguous */ .service-fallback { display: none; margin-top: 10px; } .service-fallback.visible { display: block; } .service-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .service-pill { padding: 9px 8px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--white); cursor: pointer; text-align: center; transition: all 0.18s; } .service-pill .pill-emoji { font-size: 18px; display: block; margin-bottom: 2px; } .service-pill .pill-name { font-size: 11px; font-weight: 700; color: var(--muted); } .service-pill:hover { border-color: var(--red); } .service-pill.selected { border-color: var(--red); background: var(--alert-bg); } .service-pill.selected .pill-name { color: var(--red); } body.pg-control-demo .login-error{ display: none; margin-bottom: 14px; padding: 10px 14px; background: var(--alert-bg); border: 1px solid var(--alert-bd); border-radius: 6px; font-size: 13px; color: #991B1B; font-weight: 600; } body.pg-control-demo .btn-signin{ width: 100%; padding: 14px; background: var(--red); color: var(--white); font-family: 'Roboto', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: 0.04em; border: none; border-radius: 8px; cursor: pointer; margin-top: 4px; transition: background 0.18s, transform 0.12s; } body.pg-control-demo .btn-signin:hover{ background: var(--red-dark); transform: translateY(-1px); } body.pg-control-demo .btn-signin:active{ transform: translateY(0); } .login-footnote { margin-top: 18px; padding: 12px 16px; background: var(--white); border: 1px solid var(--border); border-radius: 8px; max-width: 420px; width: 100%; } .login-footnote p { font-size: 12px; color: var(--muted); line-height: 1.6; text-align: center; } .login-footnote strong { color: var(--text); } /* ══════════════════════════════════════════════ DASHBOARD ══════════════════════════════════════════════ */ #screen-dashboard { display: none; flex-direction: column; height: 100vh; overflow: hidden; } body.pg-control-demo .demo-bar{ background: #FEF9C3; border-bottom: 1px solid #FDE68A; padding: 6px 24px; font-size: 12px; color: #713F12; font-weight: 700; letter-spacing: 0.03em; text-align: center; flex-shrink: 0; } /* Three-column layout */ body.pg-control-demo .dash-body{ flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr; overflow: hidden; max-width: 1600px; margin: 0 auto; width: 100%; } .col-lookup { background: var(--cream); border-right: 1px solid var(--border); padding: 24px; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 16px; } .col-lookup > * { width: 100%; max-width: 420px; flex-shrink: 0; } .col-results { background: var(--white); border-right: 1px solid var(--border); padding: 28px; overflow: hidden; display: flex; flex-direction: column; } .results-populated.visible { display: flex !important; flex-direction: column; flex: 1; overflow: hidden; } .person-list { display: flex; flex-direction: column; gap: 20px; overflow-y: auto; flex: 1; padding-right: 4px; } .col-record { background: var(--cream); padding: 24px 20px 20px; overflow-y: hidden; min-height: 0; display: flex; flex-direction: column; } .col-record > * { width: 100%; } .col-record iframe { width: 100%; flex: 1; } .col-record-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; color: var(--muted); gap: 8px; } .col-record-empty p { font-size: 15px; max-width: 260px; line-height: 1.6; } .record-header { background: var(--navy); border-radius: 10px 10px 0 0; padding: 14px 18px; margin-bottom: 0; } .record-header h3 { font-family: 'Raleway', sans-serif; font-size: 15px; font-weight: 800; color: var(--white); letter-spacing: 0.03em; } .record-header p { font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 2px; } body.pg-control-demo .record-body{ background: var(--white); border-radius: 0 0 10px 10px; padding: 18px; box-shadow: 0 2px 10px rgba(0,0,0,0.07); } .record-section { margin-bottom: 16px; } .record-section:last-child { margin-bottom: 0; } .record-section-title { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; } .record-field { font-size: 13px; color: var(--text); margin-bottom: 4px; line-height: 1.4; } .record-field strong { font-weight: 700; } .no-signal-note { font-size: 11px; color: var(--muted); text-align: center; margin-top: 14px; line-height: 1.5; font-style: italic; } /* ── Lookup card ── */ .panel-card { background: var(--white); border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.07); overflow: hidden; } .panel-card-header { background: var(--navy); padding: 13px 18px; text-align: center; } .panel-card-header h2 { font-family: 'Raleway', sans-serif; font-size: 16px; font-weight: 800; color: var(--white); letter-spacing: 0.04em; } .panel-card-header p { font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 2px; } .panel-card-body { padding: 10px 18px 18px; text-align: center; } .ice-input { width: 100%; font-family: 'Roboto', sans-serif; font-size: 24px; font-weight: 900; letter-spacing: 0.18em; text-align: center; text-transform: uppercase; padding: 14px 16px; border: 1.5px solid #8B95A1; border-radius: 10px; color: var(--navy); background: #F8FAFC; outline: none; transition: border-color 0.2s; margin-bottom: 14px; } .ice-input:focus-visible { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.18); background: #ffffff; } .ice-input::placeholder { color: #B0BAC6; } .ice-input-hint { font-size: 11px; color: var(--text); text-align: left; margin:14px 0; background:#FFF7ED; border:1px solid #FDBA74; border-radius:8px; padding:10px 14px; line-height:1.9; } .btn-find { width: 100%; padding: 13px; background: var(--navy); color: var(--white); font-family: 'Roboto', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 0.04em; border: none; border-radius: 8px; cursor: pointer; transition: background 0.18s, transform 0.12s; } .btn-find:hover { background: var(--navy-mid); transform: translateY(-1px); } .lookup-error { display: none; margin-top: 10px; padding: 9px 14px; background: var(--alert-bg); border: 1px solid var(--alert-bd); border-radius: 6px; font-size: 13px; color: #991B1B; font-weight: 600; text-align: center; } /* Found strip */ .found-strip { display: none; padding: 9px 14px; background: var(--green-bg); border: 1px solid var(--green-bd); border-radius: 8px; font-size: 12px; color: #14532D; font-weight: 700; gap: 8px; align-items: center; } .found-strip.visible { display: flex; } /* Auth code card */ .auth-card { display: none; } .auth-card.visible { display: block; } .auth-card-header { background: var(--red); padding: 12px 18px; display: flex; align-items: center; justify-content: center; gap: 8px; } .auth-card-header h3 { font-family: 'Raleway', sans-serif; font-size: 16px; font-weight: 800; color: var(--white); letter-spacing: 0.04em; } .auth-card-body { padding: 18px; text-align: center; } .auth-instruction { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: center; margin-bottom: 10px; } .auth-code-box { background: var(--auth-bg); border: 2.5px solid var(--auth-bd); border-radius: 12px; padding: 12px 20px; text-align: center; margin-bottom: 14px; } .auth-code-value { font-family: 'Roboto', sans-serif; font-size: 56px; font-weight: 900; color: var(--navy); letter-spacing: 0.28em; line-height: 1; } .auth-code-sub { font-size: 11px; color: var(--muted); margin-top: 8px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .auth-actions { display: flex; gap: 8px; } .btn-copy { flex: 1; padding: 9px; background: var(--navy); color: var(--white); font-family: 'Roboto', sans-serif; font-weight: 800; font-size: 12px; border: none; border-radius: 6px; cursor: pointer; transition: background 0.18s; } .btn-copy:hover { background: var(--navy-mid); } .btn-copy.copied { background: var(--green); } .btn-reset { flex: 1; padding: 9px; background: transparent; color: var(--muted); font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12px; border: 1.5px solid var(--border); border-radius: 6px; cursor: pointer; transition: all 0.18s; } .btn-reset:hover { border-color: var(--navy); color: var(--navy); } /* Audit strip */ .audit-strip { display: none; font-size: 11px; color: rgba(255,255,255,0.9); gap: 6px; align-items: flex-start; line-height: 1.5; } .audit-strip.visible { display: flex; } /* ── Results panel ── */ .results-empty { height: 100%; min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--muted); } .results-empty .empty-icon { font-size: 44px; opacity: 0.35; margin-bottom: 14px; } .results-empty h3 { font-family: 'Raleway', sans-serif; font-size: 16px; font-weight: 800; color: #94A3B8; margin-bottom: 6px; } .results-empty p { font-size: 13px; color: #94A3B8; max-width: 230px; line-height: 1.5; } .results-populated { display: none; } .results-populated.visible { display: block; } .results-header { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .results-header h2 { font-family: 'Raleway', sans-serif; font-size: 20px; font-weight: 800; color: var(--navy); } .results-header .subtitle { font-size: 13px; color: var(--muted); margin-top: 4px; } .btn-new-lookup { width: 28px; height: 28px; border-radius: 8px; background: #F1F5F9; border: 1.5px solid #8B95A1; color: #475569; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: border-color 0.15s, color 0.15s; } .btn-new-lookup:hover { border-color: #475569; color: #1E293B; } .btn-new-lookup svg { display: block; } .info-btn { width: 20px; height: 20px; border-radius: 50%; background: #F1F5F9; border: 1.5px solid #94A3B8; color: #334155; font-size: 11px; font-weight: 700; font-style: normal; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; position: relative; user-select: none; } .info-popup { display: none; position: absolute; top: 28px; left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; font-size: 12px; font-weight: 400; font-style: normal; line-height: 1.5; padding: 10px 14px; border-radius: 8px; width: 260px; z-index: 100; box-shadow: 0 4px 16px rgba(0,0,0,0.2); } .info-popup::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-bottom-color: var(--navy); border-top: none; } .info-btn.open .info-popup { display: block; } .ice-ref { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 4px 10px; background: #F1F5F9; border: 1px solid var(--border); border-radius: 6px; font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 700; color: var(--navy); letter-spacing: 0.1em; } .ice-ref .ref-label { font-family: 'Lato', sans-serif; font-size: 10px; color: var(--muted); font-weight: 400; letter-spacing: 0; margin-right: 2px; } /* Person list */ .person-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 14px 16px; background: #F8FAFC; border: 1.5px solid #8B95A1; border-radius: 10px; transition: border-color 0.18s, background 0.18s; cursor: pointer; } .dnacpr-tile-strip { flex-basis: calc(100% + 32px); margin: 0 -16px -14px; padding: 9px 16px; background: var(--alert-bg); border-top: 1px solid var(--alert-bd); border-radius: 0 0 8px 8px; font-size: 12px; color: #991B1B; font-weight: 600; display: flex; align-items: center; gap: 8px; line-height: 1.4; } .person-row:hover { border-color: #94A3B8; } .person-row.selected { background: rgba(200,16,46,0.06); border-color: #C8102E; } .person-avatar { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Raleway', sans-serif; font-size: 18px; font-weight: 800; color: var(--white); flex-shrink: 0; border: 2px solid rgba(255,255,255,0.2); } .is-holder .person-avatar { border-color: #8B95A1; } .person-info { flex: 1; min-width: 0; } .person-name { font-family: 'Raleway', sans-serif; font-size: 16px; font-weight: 800; color: var(--navy); } body.pg-control-demo .person-meta{ font-size: 12px; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } .badge-dnacpr { background: #991B1B; border: none; color: #fff; } .badge-holder { background: #F1F5F9; border: 1px solid var(--border); color: var(--muted); } .btn-view { padding: 8px 14px; background: var(--red); color: var(--white); font-family: 'Roboto', sans-serif; font-weight: 800; font-size: 12px; border: none; border-radius: 6px; cursor: pointer; white-space: nowrap; transition: background 0.18s; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; } .btn-view:hover:not(.btn-view-inactive) { background: var(--red-dark); } .btn-view.btn-view-inactive { background: #FECACA; color: #F87171; border-color: #FECACA; } .btn-view.btn-view-inactive:hover { background: #FCA5A5; border-color: #FCA5A5; } .control-note { margin-top: 20px; padding: 12px 16px; background: #F1F5F9; border: 1px solid var(--border); border-left: 3px solid var(--muted); border-radius: 8px; font-size: 12px; color: var(--muted); line-height: 1.6; } .control-note strong { color: var(--text); } /* ── Footer ─────────────────────────────────── */ body.pg-control-demo .site-footer{ background: var(--navy); padding: 8px 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,0.08); } body.pg-control-demo .site-footer p{ font-size: 11px; color: rgba(255,255,255,0.9); line-height: 1.6; } body.pg-control-demo .site-footer a{ color: rgba(255,255,255,0.9); text-decoration: none; font-size: 11px; } body.pg-control-demo .site-footer a:hover{ color: rgba(255,255,255,0.9); } .footer-col { display: flex; flex-direction: column; gap: 3px; } .footer-col.center { align-items: center; text-align: center; } .footer-col.right { align-items: flex-end; text-align: right; } body.pg-control-demo .footer-links{ display: flex; flex-wrap: wrap; gap: 3px 10px; } body.pg-control-demo .footer-sep{ color: rgba(255,255,255,0.25); } body.pg-control-demo .footer-copy{ font-size: 11px; color: rgba(255,255,255,0.9); } /* ── Demo bar ───────────────────────────────── */ #demo-bar, #demo-bar-dash, #demo-bar-reg { background: #E8ECF0; border-bottom: 1px solid #CBD5E1; padding: 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 5px; } body.pg-control-demo .demo-bar-label{ font-family: 'Raleway', sans-serif; font-size: 10px; font-weight: 700; color: #64748B; letter-spacing: 0.06em; text-transform: uppercase; } .demo-bar-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; } .demo-nav { width: 28px; height: 28px; border-radius: 50%; background: #334155; color: #fff; border: none; cursor: pointer; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } .demo-nav:hover { background: #1E293B; } #demo-state-label, #demo-state-label2, #demo-state-label3 { font-family: 'Raleway', sans-serif; font-size: 12px; font-weight: 700; color: #1E293B; white-space: nowrap; min-width: 90px; text-align: center; } .svc-wrap { display: flex; gap: 5px; } .svc-btn { background: #fff; color: #334155; border: 1.5px solid #94A3B8; border-radius: 20px; font-family: 'Lato', sans-serif; font-size: 11px; font-weight: 700; padding: 4px 11px; cursor: pointer; transition: all 0.15s; white-space: nowrap; } .svc-btn:hover:not(.on) { background: #F1F5F9; } .svc-btn.on { background: #1E293B; color: #fff; border-color: #1E293B; } /* ── Responsive guard ───────────────────────── */ .narrow-guard { display: none; position: fixed; inset: 0; background: var(--navy); z-index: 999; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px; gap: 12px; } .narrow-guard strong { font-family: 'Raleway', sans-serif; font-size: 18px; color: var(--white); } .narrow-guard p { font-size: 14px; color: rgba(255,255,255,0.65); max-width: 300px; line-height: 1.6; } @media (max-width: 959px) { .narrow-guard { display: flex; } } @media (max-width: 600px) { .header-text h1 { font-size: 14px; } } body.pg-control-demo .mlj-lbg{position:fixed;inset:0;z-index:9999;background:#152332;display:flex;align-items:center;justify-content:center;transition:opacity 0.5s ease} body.pg-control-demo .mlj-lcard{background:#fff;border-radius:16px;padding:40px 48px 44px;text-align:center;max-width:380px;width:90%;box-shadow:0 4px 24px rgba(0,0,0,0.18);border:1.5px solid #C9A84C} @keyframes mlj-spin{to{transform:rotate(360deg)}} body.pg-control-demo .mlj-spinner{width:36px;height:36px;border:3px solid #F5C6CC;border-top-color:#C8102E;border-radius:50%;animation:mlj-spin 0.8s linear infinite;margin:20px auto 0} /* ============================================================ SECTION 6 — ORG-DEMO.HTML (org portal) ============================================================ */ :root { --teal: #0D9488; --teal-dark: #0A7069; --teal-light: #CCFBF1; --teal-mid: #14B8A6; --navy: #152332; --navy-mid: #1C2B3A; --white: #FFFFFF; --cream: #FAF6F1; --text: #1E293B; --muted: #64748B; --border: #E2E8F0; --green: #16A34A; --green-bg: #DCFCE7; --green-bd: #22C55E; --amber-bg: #FFFBEB; --amber-bd: #F59E0B; --red: #C8102E; --red-bg: #FEF2F2; --red-bd: #EF4444; --orange: #EA580C; } body.pg-org-demo { height: 100%; font-family: 'Lato', sans-serif; color: var(--text); -webkit-font-smoothing: antialiased; background: var(--cream); } /* ── Header ── */ body.pg-org-demo .header{ background: var(--navy); height: 58px; padding: 0 20px; display: flex; align-items: center; gap: 14px; border-bottom: 3px solid var(--orange); box-shadow: 0 2px 8px rgba(0,0,0,0.3); flex-shrink: 0; } .header-logo { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; } .header-text h1 { font-family: 'Raleway', sans-serif; font-size: 16px; font-weight: 800; color: var(--white); letter-spacing: 0.04em; line-height: 1.2; } .header-text p { font-size: 12px; color: rgba(255,255,255,0.6); letter-spacing: 0.03em; font-weight: 600; margin: 2px 0 0; } .header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } .header-service-label { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; border-left: 1px solid rgba(255,255,255,0.15); padding-left: 16px; } body.pg-org-demo .header-service-label .svc-line1{ font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 800; color: var(--white); letter-spacing: 0.04em; line-height: 1.2; } .header-service-label .svc-line2 { font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 0.04em; font-weight: 600; } body.pg-org-demo .btn-header-outline{ background: transparent; border: 2px solid rgba(255,255,255,0.4); border-radius: 8px; padding: 7px 14px; cursor: pointer; color: var(--white); font-size: 13px; font-weight: 700; transition: background 0.15s; } body.pg-org-demo .btn-header-outline:hover{ background: rgba(255,255,255,0.1); } .operator-badge { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .operator-badge .op-name { font-size: 13px; font-weight: 700; color: var(--white); line-height: 1.2; } .operator-badge .op-meta { font-size: 11px; color: rgba(255,255,255,0.55); } /* ── LOGIN ── */ #screen-login { display: flex; flex-direction: column; min-height: 100vh; } body.pg-org-demo .login-body{ flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; } body.pg-org-demo .login-card{ background: var(--white); border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); width: 100%; max-width: 480px; overflow: hidden; } body.pg-org-demo .login-card-header{ background: var(--navy); padding: 20px 24px; } body.pg-org-demo .login-card-header h2{ font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 800; color: var(--white); letter-spacing: 0.06em; text-transform: uppercase; margin: 0; } body.pg-org-demo .login-card-header p{ font-size: 12px; color: rgba(255,255,255,0.85); margin: 0; margin-top: 1px; } .login-card-body { padding: 28px 24px; } body.pg-org-demo .field-group{ margin-bottom: 12px; } body.pg-org-demo .field-label{ font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.01em; text-transform: none; color: #1C2B3A; margin-bottom: 6px; display: block; } body.pg-org-demo .field-input{ width: 100%; padding: 11px 13px; border: 1.5px solid #8B95A1; border-radius: 6px; font-size: 15px; font-family: 'Lato', sans-serif; color: var(--text); background: var(--white); transition: border-color 0.15s; } body.pg-org-demo .field-input:focus-visible{ outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.18); background: #ffffff; } body.pg-org-demo .domain-detect{ font-size: 12px; color: #C2410C; font-weight: 700; margin-top: 4px; min-height: 0; } body.pg-org-demo .btn-signin{ width: 100%; background: var(--orange); color: var(--white); border: none; border-radius: 8px; padding: 14px; font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 800; letter-spacing: 0.04em; cursor: pointer; transition: background 0.15s; margin-top: 4px; } body.pg-org-demo .btn-signin:hover{ background: #C2410C; } body.pg-org-demo .login-error{ color: var(--red); font-size: 13px; font-weight: 700; margin-top: 10px; display: none; } body.pg-org-demo .login-error.visible{ display: block; } body.pg-org-demo .demo-hint{ background: var(--amber-bg); border: 1px solid var(--amber-bd); border-radius: 8px; padding: 12px 14px; margin-top: 16px; margin-bottom: 14px; } body.pg-org-demo .demo-hint p{ font-size: 12px; color: #64748B; line-height: 1.5; } body.pg-org-demo .demo-hint strong{ font-weight: 700; color: #C2410C; } body.pg-org-demo .demo-hint .demo-fill{ background: none; border: none; color: #C2410C; font-size: 12px; font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; } body.pg-org-demo .demo-fill-btn{ background: #fff; border: 1.5px solid #8B95A1; color: #152332; font-size: 12px; font-weight: 700; cursor: pointer; padding: 5px 11px; border-radius: 20px; font-family: 'Roboto', sans-serif; display: inline-flex; align-items: center; gap: 5px; transition: background 0.15s, color 0.15s; } body.pg-org-demo .demo-fill-btn:hover, body.pg-org-demo .demo-fill-btn.active{ background: #152332; border-color: #152332; color: #fff; } .login-footer { text-align: center; padding: 20px; font-size: 12px; color: var(--muted); } .login-page-footer { background: var(--navy); padding: 10px 32px 8px; text-align: center; flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid rgba(255,255,255,0.08); } .login-page-footer .footer-policy-links { display: flex; gap: 10px; flex-wrap: nowrap; align-items: center; justify-content: center; } .login-page-footer .footer-policy-links a, .login-page-footer .footer-cookie-btn { font-size: 11px; color: rgba(255,255,255,0.7); text-decoration: none; font-family: 'Lato', sans-serif; background: none; border: none; cursor: pointer; padding: 0; white-space: nowrap; } .login-page-footer .footer-policy-links a:hover, .login-page-footer .footer-cookie-btn:hover { color: rgba(255,255,255,0.95); text-decoration: underline; } body.pg-org-demo .login-page-footer .footer-sep{ color: rgba(255,255,255,0.3); font-size: 11px; } body.pg-org-demo .login-page-footer .footer-copy{ font-size: 11px; color: rgba(255,255,255,0.55); text-align: center; width: 100%; } /* ── DASHBOARD ── */ #screen-dashboard { display: none; flex-direction: column; min-height: 100vh; } body.pg-org-demo .dash-body{ max-width: 850px; margin: 0 auto; width: 100%; padding: 24px 20px; box-sizing: border-box; } /* Responsive — dash-body */ @media (max-width: 600px) { body.pg-org-demo .dash-body { padding: 16px 16px; } body.pg-org-demo .summary-strip { grid-template-columns: 1fr 1fr; display: grid; } } @media (max-width: 380px) { body.pg-org-demo .dash-body { padding: 12px 12px; } body.pg-org-demo .summary-strip { grid-template-columns: 1fr; } } .dash-section-title { font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .summary-strip { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; } .summary-card { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; flex: 1; min-width: 130px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); } .summary-card .sc-val { font-family: 'Roboto', sans-serif; font-size: 28px; font-weight: 900; color: var(--navy); line-height: 1; } .summary-card .sc-label { font-size: 12px; color: var(--muted); font-weight: 700; margin-top: 4px; } .caseload-table { background: var(--white); border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); overflow: hidden; border: 1px solid var(--border); } .caseload-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.13s; } .caseload-row:last-child { border-bottom: none; } .caseload-row:hover { background: #FFFBF8; } .caseload-row.header-row { background: #F8FAFC; cursor: default; padding: 10px 18px; } .caseload-row.header-row:hover { background: #F8FAFC; } .cr-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #E2E8F0; display: flex; align-items: center; justify-content: center; font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 800; color: var(--muted); } .cr-avatar img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; } .cr-name-block { flex: 0 0 220px; min-width: 0; } .cr-name { font-size: 15px; font-weight: 700; color: var(--text); } .cr-meta { font-size: 12px; color: var(--muted); margin-top: 2px; } .cr-scheme { flex: 1; min-width: 110px; } .scheme-badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; } .scheme-chc { background: #DBEAFE; color: #1E40AF; } .scheme-la { background: #EDE9FE; color: #5B21B6; } .scheme-sds { background: #FCE7F3; color: #9D174D; } .cr-visit { flex-shrink: 0; text-align: right; min-width: 110px; } .cr-visit .visit-label { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .cr-visit .visit-val { font-size: 13px; font-weight: 700; color: var(--text); margin-top: 2px; } .cr-visit .visit-next { font-size: 12px; color: var(--orange); margin-top: 1px; } .cr-arrow { font-size: 18px; color: var(--muted); flex-shrink: 0; } .col-hdr { font-family: 'Roboto', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } /* ── CLIENT RECORD ── */ #screen-record { display: none; flex-direction: column; min-height: 100vh; } body.pg-org-demo .record-body{ flex: 1; max-width: 860px; margin: 0 auto; width: 100%; padding: 20px 20px 40px; } /* DNACPR banner */ .dnacpr-banner { background: var(--red-bg); border-bottom: 3px solid var(--red-bd); padding: 14px 20px; display: flex; align-items: center; gap: 14px; } .dnacpr-icon { font-size: 28px; flex-shrink: 0; } .dnacpr-text h3 { font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 900; color: var(--red); letter-spacing: 0.08em; text-transform: uppercase; } .dnacpr-text p { font-size: 13px; color: #7F1D1D; margin-top: 2px; } .btn-dnacpr { margin-left: auto; background: var(--red); color: var(--white); border: none; border-radius: 6px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0; } /* Back bar */ .back-bar { padding: 14px 0 0; display: flex; align-items: center; gap: 10px; } .btn-back { background: none; border: 1.5px solid var(--border); border-radius: 6px; padding: 7px 14px; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; display: flex; align-items: center; gap: 6px; transition: border-color 0.13s; } .btn-back:hover { border-color: var(--orange); color: var(--orange); } .person-card { background: transparent; border-radius: 0; border: none; box-shadow: none; padding: 0 0 14px 0; margin-top: 0; display: flex; align-items: flex-start; gap: 16px; border-bottom: 1px solid #E2E8F0; } .person-photo { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .person-info h2 { font-family: 'Roboto', sans-serif; font-size: 22px; font-weight: 800; color: var(--text); } body.pg-org-demo .person-info .person-meta{ font-size: 14px; color: var(--muted); margin-top: 4px; } .person-info .person-ward { font-size: 13px; color: var(--orange); margin-top: 3px; font-weight: 700; } /* Medical alert tiles */ .alert-tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 14px; } .alert-tile { border-radius: 8px; padding: 12px 14px; } .alert-tile .at-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .alert-tile .at-val { font-size: 16px; font-weight: 700; color: var(--text); } .tile-allergy { background: #FFF1F2; border: 1px solid #FECDD3; } .tile-allergy .at-val { color: #BE123C; } .tile-condition { background: #EFF6FF; border: 1px solid #BFDBFE; } .tile-blood { background: #FFF1F2; border: 1px solid #FECDD3; } /* Info tiles */ .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } .info-tile { background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); } .info-tile .it-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .info-tile .it-val { font-size: 14px; color: var(--text); line-height: 1.4; } .essential-notes { background: var(--amber-bg); border: 1.5px solid var(--amber-bd); border-radius: 8px; padding: 14px 16px; margin-top: 10px; } .essential-notes .en-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #92400E; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; } .essential-notes p { font-size: 14px; color: #78350F; line-height: 1.5; } /* Section headers */ .section-hdr { font-family: 'Roboto', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px; border-top: 1px solid var(--border); padding-top: 16px; } /* Emergency contacts */ .ec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ec-card { border-radius: 8px; border: 1px solid var(--border); padding: 12px 14px; display: flex; align-items: center; gap: 12px; background: var(--white); } .ec-card.primary { border-color: var(--amber-bd); border-width: 1.5px; } .ec-label-primary { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); margin-bottom: 8px; } .ec-label-sec { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .ec-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #E2E8F0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: 'Roboto', sans-serif; font-weight: 800; font-size: 14px; color: var(--muted); } .ec-info .ec-name { font-size: 15px; font-weight: 700; color: var(--text); } .ec-info .ec-rel { font-size: 12px; color: var(--muted); } .ec-info .ec-phone { font-size: 13px; font-weight: 700; color: var(--text); margin-top: 4px; letter-spacing: 0.04em; } .btn-call { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; background: var(--green); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; } /* Detail blocks */ .detail-block { background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); } .detail-block h4 { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 8px; } .detail-block p { font-size: 14px; color: var(--text); line-height: 1.5; } .detail-row { display: flex; gap: 6px; margin-bottom: 5px; font-size: 14px; } .detail-row .dr-label { font-weight: 700; color: var(--text); flex-shrink: 0; min-width: 100px; } .detail-row .dr-val { color: var(--text); } .condition-block { margin-bottom: 14px; } .condition-block:last-child { margin-bottom: 0; } .condition-name { font-size: 15px; font-weight: 700; color: var(--text); } .condition-severity { display: inline-flex; gap: 8px; margin: 3px 0 6px; } .badge-severity { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; } .badge-severe { background: #FEE2E2; color: #991B1B; } .badge-moderate { background: #FEF3C7; color: #92400E; } .badge-ongoing { background: #F1F5F9; color: #475569; } .condition-desc { font-size: 13px; color: var(--muted); line-height: 1.4; } /* ── ENTITLEMENT PICKER (shared with app.html) ── */ .conditions-picker { position: relative; margin-top: 8px; } .conditions-trigger { width: 100%; min-height: 48px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid #8B95A1; border-radius: 8px; font-family: var(--body); font-size: 14px; color: var(--navy); cursor: pointer; text-align: left; transition: border-color 160ms; } .conditions-trigger:hover { border-color: var(--navy); } .chip-row { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; } .condition-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; background: #FFF7ED; border: 1px solid #EA580C; border-radius: 999px; font-size: 12px; font-weight: 700; color: #C2410C; cursor: pointer; } .chip-x { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: #C2410C; color: #fff; font-size: 11px; font-weight: 700; } .conditions-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1.5px solid #8B95A1; border-radius: 8px; box-shadow: 0 10px 30px rgba(20,35,50,0.12); max-height: 260px; overflow-y: auto; z-index: 200; padding: 6px; } .condition-option { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--navy); } .condition-option:hover { background: #FFF7ED; } .condition-option input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--orange); cursor: pointer; } /* ── CARE PLAN SECTION ── */ .care-plan-block { background: #FFF7ED; border: 1.5px solid #F5C49A; border-radius: 10px; padding: 16px 18px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(28,43,58,0.08); } .care-plan-block h4 { font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .scheme-info { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .scheme-name-large { font-size: 16px; font-weight: 700; color: var(--text); } .ndis-tooltip { position: relative; display: inline-block; } .ndis-tip-trigger { font-size: 11px; background: #FEF3E2; color: #C2410C; border: none; border-radius: 4px; padding: 2px 7px; cursor: pointer; font-weight: 700; } .ndis-tip-bubble { display: none; position: absolute; top: 24px; left: 0; background: var(--navy); color: var(--white); font-size: 12px; line-height: 1.5; padding: 10px 12px; border-radius: 8px; width: 260px; z-index: 10; } .ndis-tooltip:hover .ndis-tip-bubble, .ndis-tip-trigger:focus + .ndis-tip-bubble { display: block; } .care-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; } .care-meta-item .cmi-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; } .care-meta-item .cmi-val { font-size: 14px; color: var(--text); font-weight: 700; } .care-meta-item .cmi-sub { font-size: 12px; color: var(--muted); margin-top: 1px; } .entitlement-list { margin-bottom: 14px; } .entitlement-list .el-hdr { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); margin-bottom: 8px; padding-top: 14px; } .entitlement-item { display: flex; align-items: center; gap: 5px; padding: 6px 8px; background: #fff; border: 1.5px solid #8B95A1; border-radius: 6px; margin-bottom: 6px; flex-wrap: wrap; } .entitlement-item .ei-icon { font-size: 13px; flex-shrink: 0; } .entitlement-item .ei-text { font-size: 11px; font-weight: 700; color: var(--navy); line-height: 1.3; } .entitlement-item .ei-freq { font-size: 11px; color: var(--orange); margin-left: auto; white-space: nowrap; } .provider-row { display: flex; align-items: center; gap: 12px; background: #FAF9F8; border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; } .provider-icon { width: 36px; height: 36px; background: var(--navy); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .provider-info .pi-name { font-size: 14px; font-weight: 700; color: var(--text); } .provider-info .pi-type { font-size: 12px; color: var(--muted); } /* Visit log */ .visit-log { } .visit-entry { background: var(--white); border: 1.5px solid #8B95A1; border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; } .ve-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .ve-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--navy); flex-shrink: 0; } .ve-dot.today { background: var(--green); } .ve-dot.missed { background: #EF4444; } .ve-when { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; } .ve-carer { font-size: 12px; color: var(--muted); margin-left: auto; } .ve-note { font-size: 13px; color: var(--text); line-height: 1.4; } .ve-tags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .ve-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: #F1F5F9; color: #475569; } .btn-add-note { width: 100%; background: var(--orange); color: var(--white); border: none; border-radius: 8px; padding: 13px; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 800; cursor: pointer; transition: background 0.15s; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 8px; } .btn-add-note:hover { background: #C2410C; } /* Legal docs */ .legal-block { background: var(--red-bg); border: 1.5px solid #FECDD3; border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; } .legal-block .lb-title { font-size: 13px; font-weight: 700; color: var(--red); display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .legal-block .lb-body { font-size: 13px; color: #7F1D1D; line-height: 1.4; } .legal-block-plain { background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; } .legal-block-plain .lbp-text { font-size: 14px; color: var(--text); flex: 1; } .legal-block-plain .lbp-text strong { font-weight: 700; } .btn-view-doc { background: var(--navy); color: var(--white); border: none; border-radius: 6px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; flex-shrink: 0; } .btn-view-doc.red { background: var(--red); } /* Audit footer */ .audit-footer { text-align: center; padding: 24px 20px 16px; font-size: 12px; color: var(--muted); line-height: 1.6; } .audit-footer strong { color: var(--orange); } /* Navy site footer */ body.pg-org-demo .site-footer{ background: var(--navy); padding: 8px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } body.pg-org-demo .site-footer .footer-access{ font-size: 11px; color: rgba(255,255,255,0.5); line-height: 1.5; } body.pg-org-demo .site-footer .footer-access strong{ color: rgba(255,255,255,0.75); font-weight: 600; } body.pg-org-demo .site-footer .footer-right{ text-align: right; } body.pg-org-demo .site-footer .footer-links{ display: flex; gap: 6px 14px; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 2px; } body.pg-org-demo .site-footer .footer-links a{ font-size: 11px; color: rgba(255,255,255,0.5); text-decoration: none; } body.pg-org-demo .site-footer .footer-links a:hover{ color: rgba(255,255,255,0.9); } body.pg-org-demo .site-footer .footer-sep{ color: rgba(255,255,255,0.25); font-size: 11px; } body.pg-org-demo .site-footer .footer-copy{ font-size: 11px; color: rgba(255,255,255,0.35); } /* DG tooltip */ .dg-tip-wrap:hover .dg-tip { opacity: 1 !important; pointer-events: auto !important; } /* Review alert */ .review-alert { background: #FFFBEB; border: 1.5px solid #F59E0B; border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; } .review-alert .ra-text { font-size: 13px; font-weight: 700; color: #92400E; } .review-alert .ra-sub { font-size: 12px; color: #B45309; margin-top: 1px; } @media (max-width: 600px) { .header-text h1 { font-size: 14px; } .alert-tiles { grid-template-columns: 1fr; } .info-grid { grid-template-columns: 1fr; } .ec-grid { grid-template-columns: 1fr; } .care-meta-grid { grid-template-columns: 1fr; } .summary-strip { flex-direction: column; } .caseload-row { flex-wrap: wrap; } body.pg-org-demo .site-footer{ padding-bottom: 5%; } #record-grid{ grid-template-columns: 1fr !important; height: auto !important; overflow-y: visible !important; } .panel-chevron-left{ transform: rotate(90deg); } .panel-chevron-right{ transform: rotate(-90deg); } #panel-centre{ order: 1; height: auto !important; } #panel-care-plan{ order: 2; height: auto !important; } #panel-health-info{ order: 3; height: auto !important; } } /* ── Demo bar ── */ body.pg-org-demo .demo-bar{ background: #E8ECF0; border-bottom: 1px solid #CBD5E1; padding: 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 5px; } body.pg-org-demo .demo-bar-label{ font-family: 'Roboto', sans-serif; font-size: 11px; font-weight: 600; color: #64748B; letter-spacing: 0.01em; text-transform: none; } .demo-bar-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; } .demo-nav { width: 28px; height: 28px; border-radius: 50%; background: #334155; color: #fff; border: none; cursor: pointer; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } .demo-nav:hover { background: #1E293B; } .demo-state-label { font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 700; color: #1E293B; white-space: nowrap; min-width: 90px; text-align: center; } .org-btn { background: #fff; color: #334155; border: 1.5px solid #94A3B8; border-radius: 20px; font-family: 'Lato', sans-serif; font-size: 11px; font-weight: 700; padding: 4px 11px; cursor: pointer; transition: all 0.15s; white-space: nowrap; width: auto; margin-top: 0; } .org-btn:hover:not(.on) { background: #F1F5F9; } .org-btn.on { background: #1E293B; color: #fff; border-color: #1E293B; } /* Scope notice banner */ .scope-notice { display: flex; align-items: flex-start; gap: 10px; background: #FEF3E2; border-bottom: 1px solid #FED7AA; padding: 10px 20px; } .scope-notice .sn-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #C2410C; margin-bottom: 2px; } .scope-notice .sn-text { font-size: 12px; color: var(--navy); line-height: 1.4; } /* ── Loading screen ── */ body.pg-org-demo .mlj-lbg{position:fixed;inset:0;z-index:9999;background:#152332 url('Images%20-%20Ice%20Jar/mylifejars%20app/mylifejars-background.png') center/cover no-repeat;display:flex;align-items:center;justify-content:center;transition:opacity 0.5s ease} body.pg-org-demo .mlj-lcard{background:#fff;border-radius:16px;padding:40px 48px 44px;text-align:center;max-width:380px;width:90%;box-shadow:0 4px 24px rgba(0,0,0,0.13);border:1.5px solid #C9A84C} @keyframes mlj-spin{to{transform:rotate(360deg)}} body.pg-org-demo .mlj-spinner{width:36px;height:36px;border:3px solid #E2E8F0;border-top-color:#C9A84C;border-radius:50%;animation:mlj-spin 0.8s linear infinite;margin:20px auto 0} /* ── EMR styles (copied from es.html) ── */ .emr-identity { display:flex; align-items:center; gap:12px; padding:12px 20px 14px; border-bottom:1px solid #E2E8F0; margin-bottom:12px; } .emr-avatar { width:52px; height:52px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Roboto',sans-serif; font-weight:800; font-size:17px; flex-shrink:0; overflow:hidden; border:2px solid #8B95A1; } .emr-avatar img { width:100%; height:100%; object-fit:cover; } .emr-identity-text { flex:1; min-width:0; } .emr-identity-text h2 { font-family:'Roboto',sans-serif; font-weight:800; font-size:18px; color:var(--navy); margin:0 0 2px; } .emr-identity-meta { font-size:13px; color:var(--muted); margin:0 0 2px; } .emr-identity-ref { font-size:11px; color:#94A3B8; margin:2px 0 0; } .emr-critical { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px; margin-bottom:8px; background:#949494; border-radius:14px; overflow:hidden; } .emr-critical__cell { background:#FAFBFC; padding:12px 10px; display:flex; flex-direction:column; gap:4px; text-align:center; } .emr-critical__cell--alert { background:#FEE2E2; } .emr-critical__cell--alert .v { color:#991B1B; } .emr-critical__cell--conditions { background:#DBEAFE; } .emr-critical__cell--conditions .v { color:#1E40AF; } .emr-critical__cell--blood { background:#FEE2E2; } .emr-critical__cell--blood .v { color:#991B1B; } .emr-critical__cell .l { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); line-height:1.3; } .emr-critical__cell .v { font-family:'Roboto',sans-serif; font-weight:700; font-size:15px; color:var(--navy); line-height:1.2; } .emr-meds-row { display:grid; grid-template-columns:1fr 1fr; margin-bottom:8px; border:1px solid #CBD5E1; border-radius:10px; overflow:hidden; } .emr-meds-cell { background:#FAFBFC; padding:10px 12px; } .emr-meds-cell:first-child { border-right:1px solid #CBD5E1; } .emr-meds-cell p { font-size:13px; color:var(--text); line-height:1.45; margin:4px 0 0; } .emr-micro-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); } .emr-essential { margin-bottom:8px; padding:10px 12px 10px 14px; background:#FFFBEB; border:1px solid #F59E0B; border-left:4px solid #F59E0B; border-radius:10px; display:flex; gap:10px; align-items:flex-start; } .emr-essential__label { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:0.1em; color:#92400E; margin-bottom:4px; } .emr-essential__text { font-size:13px; color:var(--text); line-height:1.5; margin:0; } .emr-essential__body { flex:1; } .emr-ice-wrap { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:8px; } .emr-ice-tile { display:flex; flex-direction:column; gap:4px; align-self:stretch; } .emr-ice-tile__label { font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:0.12em; color:var(--muted); padding-left:2px; } .emr-ice-tile--primary .emr-ice-tile__label { color:#16A34A; } .emr-ice { display:flex; align-items:center; gap:12px; padding:10px 12px; background:#F0FDF4; border:1px solid #BBF7D0; border-radius:12px; cursor:pointer; height:100%; box-sizing:border-box; } .emr-ice--secondary { background:#F1F5F9; border-color:#CBD5E1; } .emr-ice--secondary .emr-ice__body strong { color:#64748B; } .emr-ice--secondary .emr-ice__phone { color:#64748B !important; } .emr-ice--secondary .emr-ice__call { background:#94A3B8; } .emr-ice__avatar { width:42px; height:42px; border-radius:50%; background:#94A3B8; color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Roboto',sans-serif; font-weight:700; font-size:13px; flex-shrink:0; overflow:hidden; } .emr-ice__avatar img { width:100%; height:100%; object-fit:cover; } .emr-ice__body { flex:1; display:flex; flex-direction:column; min-width:0; } .emr-ice__body strong { font-size:14px; color:var(--navy); } .emr-ice__body span { font-size:12px; color:var(--muted); margin-top:1px; } .emr-ice__phone { font-family:ui-monospace,monospace; font-size:12px !important; color:var(--navy) !important; font-weight:600; margin-top:3px !important; } .emr-ice__call { width:46px; height:46px; border-radius:50%; background:#16A34A; color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; text-decoration:none; border:none; cursor:pointer; } .emr-ice__call:hover { background:#15803D; } .further-divider { margin:4px 0 4px; padding:10px 0; } /* ── org-demo sidebar — hamburger / mobile nav ── */ .org-sidebar-hamburger { display: none; position: fixed; top: 68px; left: 10px; z-index: 250; background: var(--navy); border: none; border-radius: 8px; padding: 8px 10px; cursor: pointer; color: #fff; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.25); } .org-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 290; } .org-sidebar-overlay.visible { display: block; } .org-sidebar-close { display: none; position: absolute; top: 10px; right: 10px; background: none; border: none; cursor: pointer; color: var(--muted); padding: 4px; line-height: 1; } @media (max-width: 600px) { body.pg-org-demo .org-sidebar { display: none !important; } body.pg-org-demo .org-sidebar.mobile-open { display: flex !important; position: fixed !important; left: 0; top: 0; bottom: 0; width: 220px !important; height: 100% !important; z-index: 300; box-shadow: 4px 0 24px rgba(0,0,0,0.25); } body.pg-org-demo .org-sidebar.mobile-open .org-sidebar-item { width: 100% !important; flex-direction: row !important; justify-content: flex-start !important; padding: 12px 16px !important; gap: 12px !important; min-height: 0 !important; border-left: none !important; border-radius: 8px !important; margin: 0 8px !important; box-sizing: border-box !important; } body.pg-org-demo .org-sidebar.mobile-open .org-sidebar-item span { font-size: 13px !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; } .org-sidebar-hamburger { display: flex; } .org-sidebar-close { display: flex; } } /* ── app.html — mobile bottom tab bar ── */ .mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 62px; background: #fff; border-top: 1px solid #E8EAED; box-shadow: 0 -2px 12px rgba(0,0,0,0.08); z-index: 200; justify-content: space-around; align-items: stretch; } .mobile-bottom-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: none; cursor: pointer; color: #64748B; padding: 6px 0; font-family: 'Roboto', sans-serif; -webkit-tap-highlight-color: transparent; } .mobile-bottom-tab span { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; } .mobile-bottom-tab.active { color: #D95200; } .mobile-bottom-tab.active span { color: #D95200; } /* ── App shell nav ─ icon sidebar → bottom tab bar (tablet + mobile, ≤880px) ── */ @media (max-width: 880px) { .app-sidebar { display: none !important; } .mobile-bottom-nav { display: flex; } /* Remove sidebar left-margin now nav is at bottom */ .app-flex-outer { margin-left: 0 !important; } /* Push content above bottom nav */ .app-content-inner { padding-bottom: 80px !important; } } /* ── Modal action tile — shared 2x2 quick-action tile used inside modals (Manage your storage, ICE Code) ── */ .modal-action-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; background: #fff; border: 1.5px solid #8B95A1; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); cursor: pointer; text-align: left; font-family: inherit; } /* ── Modal close (×) button — shared square close button used inside modals ── */ .modal-close-btn { background: #F1F5F9; border: 1.5px solid #8B95A1; border-radius: 8px; width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } @media (max-width: 600px) { /* Top nav mobile: hide search + tier pills only; show ICE/Storage/Profile */ .mlj-header-status { display: none !important; } .mlj-header-search { display: none !important; } .mlj-header-tier-pill { display: none !important; } /* display:none removes search from grid flow, so pin right to column 3 explicitly */ .mlj-header-right { grid-column: 3 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 6px !important; } /* Grid: logo auto-width left, search 0, right fills rest */ .mlj-app-header { grid-template-columns: auto 0 1fr !important; gap: 0 !important; padding: 0 12px !important; } /* ICE jar service views (Ambulance/Police/Fire/Coastguard cards) — 3-col → 1-col on mobile. Uses a dedicated class rather than an inline-style attribute match — the attribute-selector versions below were silently failing because the browser re-serialises the style attribute (adds a space after the comma in "repeat(3,1fr)"), so the substring never actually matched. Kept those two as a harmless fallback. */ .ice-record-grid { grid-template-columns: 1fr !important; } .app-content-inner[style*="repeat(3,1fr)"], .app-content-inner[style*="1fr 1fr 1fr"] { grid-template-columns: 1fr !important; } /* Storage modal — 2×2 → 1-col on mobile */ .storage-modal-grid { grid-template-columns: 1fr !important; } } /* ── App dashboard header — docked demo bar (shared, ≥601px) ── Matches org-demo.html / control-demo.html convention: grey-blue stripe docked under the header, not a floating pill. top/left/width set per breakpoint below (tablet vs desktop) since the sidebar only exists on desktop. */ @media (min-width: 601px) { body:not(.activation-mode) .demo-skip { background: #E8ECF0 !important; border: none !important; border-bottom: 1px solid #CBD5E1 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; justify-content: center !important; padding: 8px 20px !important; } /* Two-line PORTAL buttons → single line in the docked stripe */ body:not(.activation-mode) .demo-skip .demo-skip__btn[style*="flex-direction: column"] { flex-direction: row !important; gap: 4px !important; height: 28px !important; padding: 0 10px !important; } } /* ── App dashboard header — tablet (601–880px) ── Row 1: existing navy header, right-cluster justified flush right. Row 2: new navy band holding the search bar (centred). Row 3: grey demo-skip stripe (docked, from shared block above). */ @media (min-width: 601px) and (max-width: 880px) { .mlj-app-header { grid-template-columns: auto 0 1fr !important; gap: 0 !important; } .mlj-header-right { grid-column: 3 !important; justify-content: flex-end !important; } body:not(.activation-mode) .mlj-header-search { position: fixed !important; top: 56px !important; left: 0 !important; right: 0 !important; width: 100% !important; height: auto !important; display: flex !important; justify-content: center !important; padding: 0 20px 8px !important; background: var(--mlj-navy-900) !important; z-index: 199 !important; } .mlj-header-search input { width: 360px !important; height: 38px !important; } /* Search icon — re-anchor to the left edge of the centred 360px input (container is full-width now, so 50% of it minus half the input's width lands exactly on the input's left edge). Also clamp its height to the input's own 38px (bottom: 8px, matching the container's 8px bottom padding) — its inline style stretches top:0/bottom:0 to fill the WHOLE .mlj-header-search box, which now includes that 8px padding strip beneath the input, so the icon's border-right divider line was hanging 8px below the input's rounded corner into that gap. */ .mlj-header-search div[style*="border-right: 1px solid rgb(203, 213, 225)"] { left: calc(50% - 180px) !important; right: auto !important; top: 0 !important; bottom: 8px !important; } body:not(.activation-mode) .demo-skip { top: 102px !important; left: 0 !important; width: 100% !important; } .app-shell--is-dashboard .app-flex-outer { padding-top: 172px !important; } /* Non-dashboard app-flex-outer pages (Jars hubs, Tribe pages, Guardians, Wards, Life Profile, etc.) — the docked search band (row 2 above) shows on EVERY page at this width, not just Dashboard, so these still need to clear header(56) + docked search band(~46) = ~102px, not just the single header row. Using only 58px here left a real gap on pages like Life Profile where content sits flush under the header. */ .app-flex-outer { padding-top: 102px !important; } /* Global demo-mode clearance (2026-07-20) — the fixed .demo-skip bar floats over the top of every .app-flex-outer page at this width; only Dashboard and Memory Jars previously compensated for it via per-page patches. 102 + 48 (demo-skip's own height) = 150, flush under it, matching the same 150px constant already used for .dash-notif-banner.is-demo. Dashboard is excluded — it already handles demo clearance itself via dash-notif-banner.is-demo, and its own 172px flex-outer padding above is deliberately larger breathing room, not a header-clearance number — so it's re-asserted unchanged here to win over this broader rule. */ body.app-is-demo .app-flex-outer { padding-top: 150px !important; } body.app-is-demo .app-shell--is-dashboard .app-flex-outer { padding-top: 172px !important; } /* Dashboard notification banner has its own hardcoded 58px margin-top (sized for the old single-row header) instead of using app-flex-outer's padding — override it to clear the tablet header stack. Demo builds also have the docked demo bar (row 3) to clear; non-demo builds only have row 1 + row 2 (search band), so they need a smaller offset — otherwise there's a blank gap where the (absent) demo bar would sit. 150px = demo-skip's own top(102) + its rendered height(~47.6) — flush, no extra gap (the 172px used for app-flex-outer below is deliberately larger — that's breathing room before the content CARDS, not this). */ .dash-notif-banner.is-demo { margin-top: 150px !important; } .dash-notif-banner:not(.is-demo) { margin-top: 102px !important; } } /* ── App dashboard header — desktop (≥881px) ── No row 2: search stays centred inside the header's own grid. Demo-skip docks directly under the (single-row) header, offset past the icon sidebar. */ @media (min-width: 881px) { body:not(.activation-mode) .demo-skip { top: 58px !important; left: 72px !important; width: calc(100% - 72px) !important; } .app-shell--is-dashboard .app-flex-outer { padding-top: 106px !important; } /* Same as tablet — non-dashboard pages only need to clear the single-row header. */ .app-flex-outer { padding-top: 58px !important; } /* Global demo-mode clearance (2026-07-20) — same reasoning as the tablet block above: 58 + 48 = 106, matching .dash-notif-banner.is-demo's own 106px. Dashboard excluded (re-asserted unchanged) for the same reason. */ body.app-is-demo .app-flex-outer { padding-top: 106px !important; } body.app-is-demo .app-shell--is-dashboard .app-flex-outer { padding-top: 106px !important; } /* Same fix as tablet — demo builds clear the header + docked demo bar; non-demo builds only have the single-row header (no row 2 on desktop either, search stays inline), so they need just the header height. */ .dash-notif-banner.is-demo { margin-top: 106px !important; } .dash-notif-banner:not(.is-demo) { margin-top: 58px !important; } /* Inset past the icon sidebar (72px, fixed, always visible ≥881px) — otherwise the banner's coloured background runs full-bleed behind it, which reads as a rendering glitch rather than intentional design. Matches the content card grid's own left edge below. */ .dash-notif-banner { margin-left: 72px !important; } } /* ── Jars hub accordion — expanded jar grid ── */ .hub-jar-expand .jar-nav { background: #FFF8F0 !important; padding-top: 10px !important; padding-bottom: 10px !important; } /* ── Health + Things jar nav — hide on mobile (navigation is via Jars Hub accordion) ── */ @media (max-width: 600px) { .health-jar-nav { display: none !important; } .hub-jar-expand .health-jar-nav { display: block !important; } .things-jar-nav { display: none !important; } .hub-jar-expand .things-jar-nav { display: block !important; } .memory-jar-nav { display: none !important; } .hub-jar-expand .memory-jar-nav { display: block !important; } .message-jar-nav { display: none !important; } .hub-jar-expand .message-jar-nav { display: block !important; } .passwords-jar-nav { display: none !important; } .hub-jar-expand .passwords-jar-nav { display: block !important; } } /* ── Notifications — stack on mobile ── */ @media (max-width: 600px) { .notif-cards-row { flex-direction: column !important; } .notif-cards-row > div { flex: 0 0 auto !important; width: 100% !important; } body:not(.activation-mode) .demo-skip { display: none !important; } } /* ── Settings page — mobile fixes ── */ @media (max-width: 600px) { .settings-fixed-header { left: 0 !important; } .settings-spacer { height: 116px !important; } .settings-content-inner { padding-top: 12px !important; padding-left: 12px !important; padding-right: 12px !important; padding-bottom: 80px !important; } } /* ── Mobile page layout — catch-all for 36px padded wrappers ── */ @media (max-width: 600px) { .mlj-page-header { padding-left: 12px !important; padding-right: 12px !important; } /* Life Wall search bar — full width on mobile */ .lw-search-bar { width: 100% !important; } /* Life Wall header buttons — hide icons on mobile */ .lw-header-actions svg { display: none !important; } .mlj-page-content { padding-left: 12px !important; padding-right: 12px !important; padding-bottom: 80px !important; } /* Data tables — horizontal scroll instead of overflow */ .mlj-table-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } .mlj-table-scroll > div[style*="grid"], .mlj-table-scroll > div[style*="display: grid"] { min-width: 520px; } /* Per-table min-width overrides (2026-07-20) — the generic 520px above is a safe floor, but these specific tables have more fixed-width columns than that leaves room for, so their content would still squash. Same specificity as the generic rule above (class + attribute), so these win by source order — one rule per table's exact gridTemplateColumns signature so each gets just enough room, no more. Added for: Passwords Jar list (7 cols), My Wishes / Letters / message-delivery tables (5-6 cols), and the Risk Alert / Safe & Well notification log (5 cols) — all reported cutting off columns on mobile with no way to see the rest. */ .mlj-table-scroll > div[style*="grid-template-columns: 52px 1fr 140px 100px 100px 80px 44px"] { min-width: 680px; } .mlj-table-scroll > div[style*="grid-template-columns: 130px 120px 1fr 76px 44px"] { min-width: 580px; } .mlj-table-scroll > div[style*="grid-template-columns: 150px 120px 1fr 76px 44px"] { min-width: 600px; } .mlj-table-scroll > div[style*="grid-template-columns: 44px 160px 1fr 82px 150px 44px"] { min-width: 680px; } .mlj-table-scroll > div[style*="grid-template-columns: 120px 1fr 90px 110px 44px"] { min-width: 580px; } .mlj-table-scroll > div[style*="grid-template-columns: 36px 1fr 36px 100px 32px"] { min-width: 300px; } /* Collapse repeat(5) grids */ [style*="repeat(5, 1fr)"] { grid-template-columns: 1fr 1fr !important; } [style*="repeat(5,1fr)"] { grid-template-columns: 1fr 1fr !important; } /* Collapse repeat(7) calendar — scroll instead */ [style*="repeat(7, 68px)"], [style*="repeat(7,68px)"] { min-width: 500px; } /* Sticky edit panel height — account for bottom nav */ [style*="calc(100vh - 64px)"] { max-height: calc(100vh - 120px) !important; } /* ICE header row — allow wrap */ .ice-header-row { flex-wrap: wrap !important; gap: 8px !important; } /* Placeholder jar icon — scale down */ .mlj-placeholder-icon, [style*="fontSize:'36px'"][style*="marginBottom"] { font-size: 26px !important; } /* Dashboard section header padding */ [class="mlj-page-header"] { padding-left: 12px !important; padding-right: 12px !important; } /* Billing plan cards — stack on mobile */ .billing-plan-cards { flex-direction: column !important; } /* Guardians permission grid — 3 col on mobile */ [style*="repeat(6, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; } /* Safe & Well + others: large padding empty states */ [style*="padding:'40px 36px'"] { padding: 28px 12px !important; } } /* ── Org-demo status pills & connect button ── */ body.pg-org-demo .status-pill { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; font-family:'Roboto',sans-serif; } body.pg-org-demo .status-pill--active { background:#DCFCE7; color:#166534; border:1.5px solid #86EFAC; } body.pg-org-demo .status-pill--api { background:#FFF3E8; color:#C2410C; border:1.5px solid #FDBA74; } body.pg-org-demo .status-pill--notify { background:#FFF8F0; color:#92400E; border:1.5px solid #FED7AA; } body.pg-org-demo .status-pill--noapi { background:#F1F5F9; color:#64748B; border:1.5px solid #CBD5E1; } body.pg-org-demo .btn-connect-api { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:999px; } /* ══════════════════════════════════════════════════════════════ ctx-note — service-specific context note callout boxes (es.html) One per service; colour driven by modifier class. ══════════════════════════════════════════════════════════════ */ .ctx-note { margin: 16px 20px 16px; padding: 12px 14px; border-radius: 8px; border: 1.5px solid transparent; border-left-width: 4px; border-left-style: solid; } .ctx-note__label { font-family: 'Roboto', sans-serif; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 6px; } .ctx-note__body { font-family: 'Lato', sans-serif; font-size: 13px; color: #1E293B; margin: 0; line-height: 1.55; } .ctx-note__body--empty { color: #94A3B8; font-style: italic; } /* Ambulance — NHS green */ .ctx-note--ambulance { background: #F0FDF4; border-color: #86EFAC; border-left-color: #007F3B; } .ctx-note--ambulance .ctx-note__label { color: #166534; } /* Police — UK Police blue */ .ctx-note--police, .ctx-note--police-empty { background: #EFF6FF; border-color: #BFDBFE; border-left-color: #003087; } .ctx-note--police .ctx-note__label, .ctx-note--police-empty .ctx-note__label { color: #003087; } /* Fire — red */ .ctx-note--fire { background: #FEF2F2; border-color: #FECACA; border-left-color: #B91C1C; } .ctx-note--fire .ctx-note__label { color: #B91C1C; } /* Coastguard — navy blue */ .ctx-note--coastguard { background: #EFF6FF; border-color: #BFDBFE; border-left-color: #003E87; } .ctx-note--coastguard .ctx-note__label { color: #003E87; } /* ── Fire record — occupants grid ── */ .fire-occ-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (max-width: 520px) { .fire-occ-grid { grid-template-columns: 1fr; } } /* Emergency-contacts notify note — tablet only, match desktop's 75% (the 880px catch-all block forces 100% !important on this otherwise) */ @media (min-width: 601px) and (max-width: 880px) { .contact-notify-note { width: 75% !important; } } /* Personal Details modal (Life Profile) — mobile: photo above fields (not beside them), and all paired fields single-column instead of 2-up. */ @media (max-width: 600px) { .lp-personal-photorow { flex-direction: column !important; } .lp-personal-indent { padding-left: 0 !important; } .lp-personal-grid { grid-template-columns: 1fr !important; width: 100% !important; } } /* Festival photo gallery — activation-event.html, between the QR-access card and the "Adding information" card on the final/completion screen (2026-07-23). Desktop/tablet: one row of 6. Mobile large (<=600px): 3 rows of 2. Small phone (<=380px): kept at 2 columns (still 3 rows) but with a tighter gap and softer corners, since 6 individual columns would be unreadably small on that width anyway — my call per Suke's "decide for small phone" instruction. */ .festival-photo-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 20px 0; } .festival-photo-grid__item { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; border: 1px solid #E2E8F0; box-shadow: 0 1px 4px rgba(0,0,0,0.06); background: #fff; } @media (max-width: 600px) { .festival-photo-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } } @media (max-width: 380px) { .festival-photo-grid { gap: 6px; } .festival-photo-grid__item { border-radius: 8px; } } /* Thornfield Festival top-bar logo -- desktop/tablet gets a 20% larger mark (100px -> 120px) per Suke's request (2026-07-23); mobile stays as-is. */ .topbar-logo-thornfield { width: 100px; height: auto; } @media (min-width: 601px) { .topbar-logo-thornfield { width: 120px; } }