/* ============================================================================ Find My Family — 2026 REFRESH LAYER (loaded LAST, overrides everything) Fun/bright/alive Aotearoa look. Token-driven: redefining main.css's variables re-skins the whole app; component rules below add typography + polish + koru. Both themes: light = :root, dark = [data-theme="dark"] on (darkmode.js). CSS/asset only — no feature logic touched. ============================================================================ */ @font-face{font-family:'Baloo 2';src:url('fonts/baloo2-latin-ext.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Baloo 2';src:url('fonts/baloo2-latin.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Baloo 2';src:url('fonts/baloo2-latin-ext.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Baloo 2';src:url('fonts/baloo2-latin.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Baloo 2';src:url('fonts/baloo2-latin-ext.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Baloo 2';src:url('fonts/baloo2-latin.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Baloo 2';src:url('fonts/baloo2-latin-ext.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Baloo 2';src:url('fonts/baloo2-latin.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Figtree';src:url('fonts/figtree-latin-ext.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Figtree';src:url('fonts/figtree-latin.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Figtree';src:url('fonts/figtree-latin-ext.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Figtree';src:url('fonts/figtree-latin.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Figtree';src:url('fonts/figtree-latin-ext.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Figtree';src:url('fonts/figtree-latin.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Figtree';src:url('fonts/figtree-latin-ext.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Figtree';src:url('fonts/figtree-latin.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Figtree';src:url('fonts/figtree-latin-ext.woff2') format('woff2');font-weight:800;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Figtree';src:url('fonts/figtree-latin.woff2') format('woff2');font-weight:800;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* ---- 1. TOKENS: light ---- */ :root{ --primary:#0FA866; --primary-light:#37C68A; --primary-dark:#0A7D4C; --accent:#F0A81C; --accent-light:#FBD070; --bg:#FBF6EC; --bg-card:#FFFFFF; --bg-input:#FFFDF7; --text:#16271E; --text-light:#5D6E63; --text-muted:#8B978D; --border:#ECE3D2; --border-focus:#0FA866; --success:#12A75F; --success-light:#E1F4EA; --danger:#E2493A; --danger-light:#FCE8E5; --info:#1FB4C9; --info-light:#E1F5F8; --shadow:0 2px 10px rgba(22,39,30,.06); --shadow-lg:0 18px 44px -16px rgba(22,39,30,.20); --shadow-hover:0 12px 30px -12px rgba(15,168,102,.30); --radius:15px; --radius-sm:10px; --radius-lg:22px; --transition:.18s ease; --font-body:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --font-heading:'Baloo 2','Figtree',sans-serif; --tree-male:#E4F3F8; --tree-male-border:#1FB4C9; --tree-female:#FDE7E2; --tree-female-border:#FB5741; --tree-other:#EFE8DA; --tree-other-border:#8B978D; --tree-link:#0FA866; --tree-spouse-link:#FB5741; /* new named palette for polish + koru */ --pounamu:#0FA866; --kowhai:#F0A81C; --pohutukawa:#FB5741; --awa:#1FB4C9; --ring:rgba(15,168,102,.32); } /* ---- TOKENS: dark ---- */ :root[data-theme="dark"], html[data-theme="dark"], .dark-mode{ --primary:#2ED88C; --primary-light:#5CE7A6; --primary-dark:#25B473; --accent:#FFC948; --accent-light:#FFDE8A; --bg:#0E1D17; --bg-card:#16271E; --bg-input:#1C3126; --text:#F3EEDF; --text-light:#A6B7AB; --text-muted:#7E8F84; --border:#284034; --border-focus:#2ED88C; --success:#2ED88C; --success-light:#123528; --danger:#FF6E5A; --danger-light:#3a1f1b; --info:#39CFE2; --info-light:#0f3a41; --shadow:0 2px 12px rgba(0,0,0,.4); --shadow-lg:0 20px 48px -16px rgba(0,0,0,.6); --shadow-hover:0 14px 34px -12px rgba(46,216,140,.28); --tree-male:#123642; --tree-male-border:#39CFE2; --tree-female:#3a1f1f; --tree-female-border:#FF6E5A; --tree-other:#22332b; --tree-other-border:#7E8F84; --tree-link:#2ED88C; --tree-spouse-link:#FF6E5A; --pounamu:#2ED88C; --kowhai:#FFC948; --pohutukawa:#FF6E5A; --awa:#39CFE2; --ring:rgba(46,216,140,.4); } /* ---- 2. BASE TYPOGRAPHY ---- */ body{font-family:var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;} /* Guard against transient horizontal overflow zooming out the mobile viewport. `clip` (not `hidden`) so it never creates a scroll container that breaks the sticky nav or inner pan/zoom (tree, map). */ html{overflow-x:clip;max-width:100%;} h1,h2,h3,h4,h5,.page-header h1,.page-header h2,.card h3,.section-title{ font-family:var(--font-heading)!important;font-weight:600;letter-spacing:-.015em;line-height:1.12;} h1,.page-header h1{letter-spacing:-.02em;} :focus-visible{outline:3px solid var(--ring);outline-offset:2px;border-radius:8px;} ::selection{background:color-mix(in srgb,var(--pounamu) 24%,transparent);} /* ---- 3. NAV ---- */ .nav-bar{background:color-mix(in srgb,var(--bg) 82%,transparent)!important;backdrop-filter:saturate(1.3) blur(12px); border-bottom:1px solid var(--border)!important;box-shadow:none!important;} .nav-brand{font-family:var(--font-heading)!important;font-weight:600!important;color:var(--text)!important;gap:9px!important;letter-spacing:-.01em;} .nav-brand-icon,.nav-brand svg{color:var(--pounamu)!important;overflow:visible;} .nav-link{border-radius:var(--radius-pill,999px)!important;font-weight:600!important;color:var(--text-light)!important;transition:var(--transition);} .nav-link:hover{color:var(--primary-dark)!important;background:color-mix(in srgb,var(--pounamu) 10%,transparent)!important;} .nav-link.active,.nav-link[data-active="true"]{background:color-mix(in srgb,var(--pounamu) 15%,transparent)!important;color:var(--primary-dark)!important;} :root[data-theme="dark"] .nav-link.active{color:var(--primary)!important;} .nav-user-btn,.hamburger-btn{border-radius:999px!important;} /* Mobile nav: the hamburger lines + user icon were WHITE for the old dark-brown bar; on the new light bar they'd be invisible. Make them theme-ink, and give the mobile dropdown a clean light surface with readable dark links. */ .hamburger-line{background:var(--text)!important;} .nav-user-btn{color:var(--text)!important;} @media (max-width:768px){ .nav-links{background:var(--bg-card)!important;border-bottom:1px solid var(--border);box-shadow:var(--shadow-lg)!important;} .nav-links .nav-link{color:var(--text)!important;} .nav-links .nav-link.active{background:color-mix(in srgb,var(--pounamu) 15%,transparent)!important;color:var(--primary-dark)!important;} } :root[data-theme="dark"] .nav-links .nav-link.active{color:var(--primary)!important;} .nav-user-dropdown{border-radius:var(--radius)!important;box-shadow:var(--shadow-lg)!important;border:1px solid var(--border)!important;} .nav-user-dropdown-item{border-radius:10px!important;font-weight:500;} /* ---- 4. BUTTONS ---- */ .btn{font-family:var(--font-heading)!important;font-weight:600!important;border-radius:999px!important; transition:transform var(--transition),box-shadow var(--transition),background var(--transition),filter var(--transition);letter-spacing:.005em;} .btn:hover{transform:translateY(-1px);} .btn:active{transform:translateY(0) scale(.99);} .btn-primary,.btn.primary,button.primary{background:var(--pounamu)!important;border-color:var(--pounamu)!important;color:#fff!important;box-shadow:0 10px 24px -12px var(--pounamu)!important;} .btn-primary:hover{background:var(--primary-dark)!important;transform:translateY(-2px);} .btn-secondary,.btn.secondary,.btn-outline{background:var(--bg-card)!important;border:1.5px solid var(--border)!important;color:var(--text)!important;} .btn-secondary:hover,.btn-outline:hover{border-color:var(--pounamu)!important;color:var(--primary-dark)!important;} .btn-accent{background:var(--kowhai)!important;color:#3a2a00!important;border-color:var(--kowhai)!important;} .btn-danger{background:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important;} /* ---- 5. CARDS / PANELS / SURFACES ---- */ .card,.panel,.stat-card,.person-card,.story-card,.recipe-card,.doc-card,.memorial-card, .setting-card,.info-card,.dashboard-card,.feature-card,.tile,.list-item-card{ border-radius:var(--radius)!important;box-shadow:var(--shadow)!important; border:1px solid var(--border)!important;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);} .card:hover,.person-card:hover,.story-card:hover,.recipe-card:hover,.feature-card:hover,.tile:hover{ transform:translateY(-3px);box-shadow:var(--shadow-hover)!important;border-color:color-mix(in srgb,var(--pounamu) 40%,var(--border))!important;} .page-container{max-width:1120px;} .page-header h1{font-size:clamp(1.7rem,3.6vw,2.4rem);} /* ---- 6. INPUTS / FORMS ---- */ input,textarea,select,.input,.form-control,.search-input{ border-radius:var(--radius-sm)!important;border:1.5px solid var(--border)!important; background:var(--bg-input)!important;color:var(--text)!important;font-family:var(--font-body)!important;transition:border-color var(--transition),box-shadow var(--transition);} input:focus,textarea:focus,select:focus,.input:focus{border-color:var(--pounamu)!important;box-shadow:0 0 0 3px var(--ring)!important;outline:none!important;} /* ---- 7. CHIPS / BADGES / PILLS / TABS ---- */ .badge,.chip,.pill,.tag,.label-pill{border-radius:999px!important;font-weight:600;} .badge-success,.chip-success{background:var(--success-light)!important;color:var(--success)!important;} .badge-primary{background:color-mix(in srgb,var(--pounamu) 15%,transparent)!important;color:var(--primary-dark)!important;} .tab,.tab-btn,.filter-btn{border-radius:999px!important;font-weight:600;} .tab.active,.tab-btn.active,.filter-btn.active{background:color-mix(in srgb,var(--pounamu) 15%,transparent)!important;color:var(--primary-dark)!important;} /* ---- 8. MODALS ---- */ .modal,.modal-content,.dialog,.modal-box{border-radius:var(--radius-lg)!important;box-shadow:var(--shadow-lg)!important;border:1px solid var(--border)!important;} .modal-overlay,.overlay,.modal-backdrop{backdrop-filter:blur(4px);} /* ---- 9. EMPTY STATES ---- */ .empty-state{border-radius:var(--radius)!important;} .empty-state svg{color:var(--pounamu)!important;opacity:.7;} /* ---- 10. LINKS / ACCENTS ---- */ a{color:var(--primary-dark);} :root[data-theme="dark"] a{color:var(--primary);} .link,.text-accent{color:var(--primary-dark);} /* ---- 11. LOADING SPINNER → koru green ---- */ .spinner,.loading-spinner .spinner,.loader{border-top-color:var(--pounamu)!important;border-right-color:var(--pounamu)!important;} /* ---- 12. SCROLLBAR (subtle, on-brand) ---- */ *{scrollbar-color:color-mix(in srgb,var(--pounamu) 40%,var(--border)) transparent;} ::-webkit-scrollbar{width:11px;height:11px;} ::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--pounamu) 34%,var(--border));border-radius:999px;border:3px solid var(--bg);} ::-webkit-scrollbar-track{background:transparent;} /* ---- 13. DARK-MODE TOGGLE + small controls ---- */ .dark-mode-toggle{border-radius:999px!important;border:1.5px solid var(--border)!important;background:var(--bg-card)!important;color:var(--text)!important;} .dark-mode-toggle:hover{border-color:var(--kowhai)!important;} /* ---- 14. TREE CONNECTORS — new palette (NO !important: load-order recolors the base links, while the bloodline-trace .blood-link !important rules still win when Bloodline mode is on). Biological = clear teal dashed (birth-parent line); whāngai = gold dashed; primary/as-raised = pounamu. ---- */ .tree-link{stroke:var(--pounamu);stroke-opacity:.5;stroke-width:1.5;} .tree-link-biological{stroke:var(--awa);stroke-dasharray:4,4;stroke-opacity:1;stroke-width:2.2;} .tree-link-whangai{stroke:var(--kowhai);stroke-dasharray:6,3;stroke-opacity:1;stroke-width:2.2;} .tree-link-adoptive{stroke:var(--pohutukawa);stroke-dasharray:4,2;stroke-opacity:.85;} .tree-spouse-link{stroke:var(--text-muted);stroke-opacity:.5;} .marriage-status{fill:var(--text-muted);font-family:var(--font-body);font-weight:600;} /* tree toolbar toggles → pills */ .layer-toggle,.tree-toolbar button,.layout-btn{border-radius:999px!important;font-family:var(--font-heading)!important;font-weight:600!important;} .layer-toggle.active{background:color-mix(in srgb,var(--pounamu) 16%,transparent)!important;color:var(--primary-dark)!important;border-color:var(--pounamu)!important;} .layer-toggle-biological.active{background:color-mix(in srgb,var(--awa) 18%,transparent)!important;color:#0d7c8e!important;border-color:var(--awa)!important;} .layer-toggle-whangai.active{background:color-mix(in srgb,var(--kowhai) 22%,transparent)!important;color:#8a6400!important;border-color:var(--kowhai)!important;} :root[data-theme="dark"] .layer-toggle-biological.active{color:var(--awa)!important;} :root[data-theme="dark"] .layer-toggle-whangai.active{color:var(--kowhai)!important;}