/* ============================== */ /* ROOT VARIABLES */ /* ============================== */ * { --primary: #9747FF; } :root { --teko: 'Teko', sans-serif; --roboto: 'Roboto', sans-serif; --top-navigation-height: 55px; --main-background-color: #f2f6fc; --card-background-color: #FFFFFF; --navigation-color: var(--card-background-color); --border-color: rgba(0, 0, 0, 0.28); --primary: #9747FF; --color_1: #FEB4B6; --color_2: #BFD3F8; --color_3: #8EDBA9; --color_4: #DFA0F2; --color_5: #1583E9; --primary-text: rgba(0, 0, 0, 0.87); --secondary-text: rgba(0, 0, 0, 0.6); --tertiary-text: rgba(0, 0, 0, 0.4); --shadow: rgba(0, 0, 0, 0.2); --table-header: #efe8f8; --table-row: rgba(47, 47, 65, 0.12); } /* The scheme is chosen in theme.js, which resolves the stored preference * (system/light/dark) onto before first paint — the same * hook tailwind's `dark:` variant uses. */ html[data-theme="dark"] { --main-background-color: #000000; --card-background-color: #1d1d23; --navigation-color: var(--card-background-color); --border-color: rgba(255, 255, 255, 0.28); --primary: #9747FF; --color_1: #a27173; --color_2: #6e85ab; --color_3: #588f6c; --color_4: #6b3d79; --color_5: #3987cb; --primary-text: rgba(255, 255, 255, 0.87); --secondary-text: rgba(255, 255, 255, 0.6); --tertiary-text: rgba(255, 255, 255, 0.4); --shadow: rgba(229, 246, 255, 0.12); --table-header: #28272a; --table-row: rgba(229, 235, 241, 0.12); } /* ============================== */ /* BASIC RESET */ /* ============================== */ * { margin: 0; padding: 0; font-family: "Rajdhani", sans-serif; font-weight: 400; font-style: normal; } body, html, * { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6, p, blockquote, form, label, fieldset, address, span, div { margin: 0; padding: 0; color: var(--primary-text) } /* ============================== */ /* FONT STYLES */ /* ============================== */ .rajdhani-light { font-family: "Rajdhani", sans-serif; font-weight: 300; font-style: normal; } .rajdhani-regular { font-family: "Rajdhani", sans-serif; font-weight: 400; font-style: normal; } .rajdhani-medium { font-family: "Rajdhani", sans-serif; font-weight: 500; font-style: normal; } .rajdhani-semibold { font-family: "Rajdhani", sans-serif; font-weight: 600; font-style: normal; } .rajdhani-bold { font-family: "Rajdhani", sans-serif; font-weight: 700; font-style: normal; } /* ============================== */ /* GLOBAL STYLES */ /* ============================== */ /* Clearance for the fixed navbar: py-2 (16px) plus the 46px search field. * Mobile has no search column so the bar is shorter there, and the extra is * harmless. base.html carries no spacer of its own — this is the one place. */ body { padding-top: 70px; } body, html { background-color: var(--main-background-color); height: 100vh; overflow-x: hidden; } html { font-size: 18px !important; } textarea { background-color: var(--main-background-color); color: var(--primary-text); outline: transparent; border: none; border-radius: 1.5rem; padding: 1rem !important; } .teko { font-family: var(--teko) !important; } .roboto { font-family: var(--roboto) !important; } /* ============================== */ /* NAVIGATION */ /* ============================== */ .navigation { --background-color: var(--navigation-color); --tint-color: black; padding: 8px 16px; background-color: var(--background-color); top: 0; position: sticky; width: 100%; z-index: 1000; } nav { display: flex; align-items: center; justify-content: space-between; } /* ============================== */ /* CARDS */ /* ============================== */ .card-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-gap: 20px; list-style: none; margin: 0; } .card { padding: 20px; border-radius: 10px; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3); } .card-content { padding: 10px; background-color: rgba(0, 0, 0, 0.05); border-radius: 10px; min-height: 80px; } /* ============================== */ /* FORMS & INPUTS */ /* ============================== */ .default-form>label, .default-form>input, .default-form>select { display: block; width: 100%; padding: 5px 0; } .default-form label { margin-top: 20px; font-size: 1rem; font-weight: bold; } .default-form { max-width: 760px; margin: auto; background-color: var(--background-color) !important; } .search-form { width: 100%; max-width: 760px; } .search-input, .default-form input, .default-form select, .default-form textarea { width: 100%; padding: 6px 16px; background-color: var(--navigation-color); font-size: 14px; border-radius: 100px; outline: none; color: var(--primary-text); } .default-form textarea { border-radius: 10px; } .search-input::placeholder { color: var(--tertiary-text); } .search-input:hover, .search-input:focus { background-color: var(--card-background-color); box-shadow: 2px 4px 10px var(--shadow); } /* ============================== */ /* FAMILY TREE STYLES */ /* ============================== */ .family-tree, .family-tree li { list-style: none; } .family-tree { margin: 0px 0px 0px 20px; line-height: 2em; font-family: Arial; } .family-tree-wrapper { height: calc(100vh - var(--top-navigation-height)); overflow-y: auto; } .family-tree li { font-size: 16px; position: relative; } .tree-item-and-actions { width: 100%; display: inline-flex; align-items: center; } .person-item { text-decoration: none; border-radius: 4px; background-color: var(--card-background-color); display: inline-flex; flex-direction: column; flex-shrink: 0; width: 100%; border-left: 0 solid var(--primary); color: black; gap: 10px; box-shadow: 2px 2px 2px var(--shadow); transition: all 0.2s ease-in-out; } .person-item-image { height: 40px; width: 40px; object-fit: cover; border-radius: 999px; } .person-item:hover { box-shadow: 5px 8px 10px var(--shadow); border-right-width: 16px; } .person-item-detail-info { padding: 0; margin: 0; } .parent { opacity: 0.4; } .parent:hover { opacity: 1; } .current { border-left: 10px solid var(--primary); background-color: var(--color_2); } .daughter { border-left: 10px solid var(--color_1); } .current.daughter { border-left: 10px solid var(--color_1); background-color: var(--color_1); } .tag { font-size: 10px; padding: 2px 8px; border-radius: 4px; border: 1px solid var(--border-color); background-color: var(--shadow); } .tag-1 { background-color: var(--color_1); } .tag-2 { background-color: var(--color_2); } .caret { cursor: pointer; user-select: none; /* Prevent text selection */ } /* Create the caret/arrow with a unicode, and style it */ .caret::before { color: var(--secondary-text); display: inline-flex; justify-content: center; align-items: center; position: absolute; top: 18px; /*font-size: 12px;*/ height: 45px; content: " "; width: 45px; font-weight: bold; border: 2px dotted var(--secondary-text); background-color: var(--card-background-color); z-index: 2; border-radius: 999px; } .caret::after { height: 2px; position: absolute; width: 20px; top: 34px; left: 30px; content: ""; padding: 0 20px; background-color: black; } /* Rotate the caret/arrow icon when clicked on (using JavaScript) */ .caret-down::before { content: '+' !important; } .children { display: block; } /* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */ .inactive { display: none; } .person-information-wrapper { height: calc(100vh - var(--top-navigation-height)); overflow-y: auto; } .tree-struct li:before { position: absolute; left: -44px; top: -19px; content: ""; display: block; border-left: 1px solid var(--tertiary-text); height: 4.2rem; border-bottom: 1px solid var(--tertiary-text); width: 51px; } .tree-item-with-address::before { /*top: -88px !important;*/ /*height: 6.6rem !important;*/ } .tree-item { position: relative; } .tree-item::before { content: ''; width: 28px; height: 2px; background-color: var(--primary-text); display: block; position: absolute; top: 24px; left: -28px; } .tree-struct li:after { position: absolute; left: -44px; bottom: -7px; content: ""; display: block; border-left: 1px solid var(--tertiary-text); height: 100%; } .tree-struct li.root { margin: 0px 0px 0px -20px; } .tree-struct li.root:before { display: none; } .tree-struct li.root:after { display: none; } .tree-struct li:last-child:after, .tree-struct>li:first-child:before { display: none; } .list-generation-separator-text { height: 50px; width: 50px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 2rem; font-weight: bold; font-family: var(--teko); border: 1px solid var(--border-color); margin: 20px; border-radius: 100px; color: var(--tertiary-text); } .selected-parent-container .active { display: flex; } .selected-person-wrapper { background-color: var(--card-background-color); border-radius: 20px; /*padding: 20px;*/ transition: background-color 0.5s ease-in-out; } .label-and-action { display: flex; align-items: center; height: 55px; justify-content: space-between; } .selected-parent-container { display: flex; align-items: center; justify-content: space-between; list-style: none; min-height: 80px; /*box-shadow: 3px 3px 5px var(--shadow);*/ background-color: var(--main-background-color); padding: 20px; border-radius: 10px; } .suggestion-item-container { border-radius: 20px; background-color: var(--card-background-color); list-style: none; margin: 0; padding: 0; max-height: 300px; overflow: auto; box-shadow: 10px 10px 20px var(--shadow); } .suggestion-item { cursor: pointer; text-decoration: none; padding: 20px; } .suggestion-item:hover { background-color: var(--main-background-color); } .search-result-item-inner { display: flex; gap: 20px; align-items: center; justify-content: space-between; } .search-result-generation-name { display: flex; align-items: center; gap: 20px; } /*.person-generation {*/ /* height: 35px;*/ /* width: 35px;*/ /* font-weight: bold;*/ /* border-radius: 1000px;*/ /* border: 3px dashed var(--primary-text);*/ /* display: flex;*/ /* align-items: center;*/ /* justify-content: center;*/ /*}*/ .result-name {} .result-address { font-size: 0.8rem; font-color: var(--secondary-text); } .person-id { padding: 5px 16px; border-radius: 100px; background-color: var(--border-color); color: white; } #selected_parent { height: 40px; } .focusable { /* opacity: 0.4 */ } .focusable:focus { opacity: 1; } #draggable { overflow-x: hidden; overflow-y: scroll; } *::-webkit-scrollbar-thumb, *::-webkit-scrollbar-track, *::-webkit-scrollbar-thumb { width: 0 !important; display: none !important; } .draggable::-webkit-scrollbar, .draggable::-webkit-scrollbar-thumb, .draggable::-webkit-scrollbar-track, .draggable::-webkit-scrollbar-thumb { width: 0 !important; display: none !important; } .dark *::-webkit-scrollbar-thumb, .dark *::-webkit-scrollbar-track, .dark *::-webkit-scrollbar-thumb { width: 0 !important; display: none !important; } /* ============================== */ /* INFO AND BUTTON STYLES */ /* ============================== */ .id-and-gen { gap: 20px; padding: 20px; } .id-and-gen-item { flex-direction: column; gap: 6px; font-family: var(--teko); } .rnd-info { height: 45px; width: 45px; border-radius: 100px; border: 1px solid var(--border-color); justify-content: center; align-items: center; display: inline-flex; } .rnd-info-sm { height: 24px !important; width: 24px !important; font-size: 14px !important; } .btn-transparent { color: var(--primary-text); } .btn-transparent:hover { color: var(--primary-text) !important; background-color: var(--shadow) !important; } .rnd-btn { text-decoration: none; height: 30px; width: 30px; display: inline-flex; border-radius: 999px; align-items: center; border: none; justify-content: center; } .rnd-btn-primary { background-color: var(--primary); color: white !important; } .rnd-btn-primary:hover { background-color: var(--primary) !important; color: white !important; } .rnd-btn:hover { background-color: var(--border-color); } .rnd-dotted-outline { border: 1px dotted var(--primary); background: transparent !important; } .rnd-dotted-outline:hover, .rnd-dotted-outline:focus { background-color: var(--primary) !important; color: white !important; border: 1px solid var(--primary) !important; } .rnd-dotted-outline.rnd-btn-danger { border: 1px dotted orangered; color: orangered; } .rnd-btn-danger:hover, .rnd-btn-danger:focus { background-color: orangered !important; border: 1px solid orangered !important; color: white; } .all-center { display: flex; align-items: center; justify-content: center; } .pagination {} .step-links { display: flex; gap: 10px; } .pagination-item { text-decoration: none; background: var(--card-background-color); border-radius: 4px; color: var(--secondary-text); height: 55px; width: 55px; font-weight: bold; display: flex; justify-content: center; align-items: center; text-align: center; } .pagination-item:hover { background: var(--primary) !important; color: white !important; } .current-pagination { background: var(--primary); color: white; } .info-card {} .spouse-info { padding: 10px; margin: 10px; border-radius: 4px; } .spouse-info-header { display: flex; align-items: center; justify-content: space-between; } .actions { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 20px; } /* ============================== */ /* SAFE AREAS */ /* ============================== */ /*!* Apply frontend to the safe area *!*/ /*.main-content {*/ /* padding-top: constant(safe-area-inset-top); !* For iOS 11.0-11.1 *!*/ /* padding-top: env(safe-area-inset-top); !* For iOS 11.2+ and newer *!*/ /* padding-bottom: constant(safe-area-inset-bottom);*/ /* padding-bottom: env(safe-area-inset-bottom);*/ /* padding-left: constant(safe-area-inset-left);*/ /* padding-left: env(safe-area-inset-left);*/ /* padding-right: constant(safe-area-inset-right);*/ /* padding-right: env(safe-area-inset-right);*/ /*}*/ /* ============================== */ /* MEDIA QUERIES */ /* ============================== */ @media all and (max-width: 720px) { * { --top-navigation-height: 170px; } .navigation {} .actions { padding: 20px 0; } } /* */ .bg-card { background-color: var(--card-background-color) !important; } .person-card-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); } .filter-by-address-form select { border-radius: 8px !important; background-color: var(--main-background-color); padding: 8px 16px; } .bg-main { background-color: var(--main-background-color); } .nav-pills .nav-link.active, .nav-pills .show>.nav-link { background-color: var(--primary) !important; border-style: double !important; border-width: 10px !important; border-color: var(--color_3) !important; } /*SELECT 2 CUSTOM CSS*/ .select2-container--default .select2-selection--single { background-color: var(--background-color) !important; border: 1px solid var(--border-color) !important; height: 35px; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--primary-text) !important; font-size: 16px !important; } .select2-dropdown { background-color: var(--card-background-color) !important; border: 1px solid var(--border-color) !important; border-radius: 16px !important; } .select2-search__field { background-color: var(--card-background-color) !important; border: 1px solid var(--border-color) !important; border-radius: 16px !important; padding: 10px 20px !important; font-size: 14px; } .select2-results__option { padding: 10px 20px !important; font-size: 16px; } .select2-container--default .select2-results__option--selected { background-color: var(--primary) !important; } /*PROFILE ITEM*/ .profiles-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: 20px; /* The dashboard holds this grid to a full viewport; rows must stack from * the top instead of stretching to fill it. */ align-content: start; } .profile-card { box-shadow: 0 0 0 rgba(0, 0, 0, 0.2); background-color: var(--card-background-color); border-radius: 10px; transform: translateY(100px); border: 2px solid transparent; /*overflow: hidden;*/ /*max-width: 300px;*/ /*min-height: 500px;*/ transition: all 0.1s ease-in-out; } .profile-card:hover { box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.08); border: 2px solid var(--primary); transform: scale(1.1) translateY(100px); ; } .profile-info { padding: 20px; } .expertise { color: grey; font-size: 18px; } .email { color: black; font-size: 18px; } .profile-image-container { height: 200px; width: 100%; display: flex; align-items: center; justify-content: center; position: relative; } .profile-image { height: 200px; width: 200px; border-radius: 100px; object-fit: cover; border: 5px solid var(--card-background-color); box-shadow: 10px 10px 10px var(--shadow); } .image-translate { position: absolute; transform: translateY(-50px); transition: all 0.2s ease-in-out; } .profile-card:hover .image-translate { transform: scale(1.1) translateY(-70px); box-shadow: 30px 30px 20px var(--shadow); } .languages-known { display: flex; flex-direction: row; align-items: center; gap: 20px; } .language-item img { max-height: 20px; } .expertise { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; } .expertise-item { background-color: var(--shadow); color: var(--secondary-text); padding: 4px 16px; border-radius: 20px; font-size: 14px; } .faculty-and-year { font-size: 0.8rem; } /*Profile dropdown*/ /*.action {*/ /* position: fixed;*/ /* top: 20px;*/ /* right: 30px;*/ /*}*/ .action .profile { position: relative; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; cursor: pointer; } .action .profile img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .action .menu { position: absolute; top: 120px; right: 20px; padding: 10px 20px; background: var(--card-background-color); /*width: 200px;*/ /*box-sizing: 0 5px 25px rgba(0, 0, 0, 0.1);*/ box-shadow: 10px 10px 20px var(--shadow); border: 1px solid var(--border-color); border-radius: 15px; transition: 0.2s; visibility: hidden; opacity: 0; } .action .menu.active { top: 80px; visibility: visible; opacity: 1; } .action .menu::before { content: ""; position: absolute; top: -5px; right: 28px; width: 20px; height: 20px; background: var(--card-background-color); transform: rotate(45deg); } .action .menu h3 { width: 100%; text-align: center; font-size: 18px; padding: 20px 0; font-weight: 500; /*color: #555;*/ line-height: 1.5em; } .action .menu h3 span { font-size: 14px; color: #cecece; font-weight: 300; } .action .menu ul { margin: 0; padding: 0; } .action .menu ul li { list-style: none; padding: 16px 0; border-top: 1px solid rgba(0, 0, 0, 0.05); display: flex; align-items: center; } .action .menu ul li img { margin-right: 10px; opacity: 0.5; transition: 0.2s; } .action .menu ul li:hover img { opacity: 1; } .action .menu ul li a { display: inline-block; text-decoration: none; color: var(--secondary-text); font-weight: 500; transition: 0.2s; } .action .menu ul li { /*background-color: var(--primary);*/ padding: 8px 20px; border-radius: 8px; /*color: white;*/ } .action .menu ul li:hover { background-color: var(--primary); color: white; } .team-up-button { background-color: var(--border-color); color: var(--primary-text); width: 100%; } .team-up-button:hover { background-color: var(--primary); color: white; } .profile-detail-image { width: 300px; height: 300px; object-fit: cover; border-radius: 300px; box-shadow: 10px 30px 30px var(--shadow); } .remarks { padding: 20px; margin: 20px; background-color: var(--shadow); border-radius: 20px; } .quick-access-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .tree-active { position: absolute !important; top: 0 !important; left: 0 !important; height: 100% !important; width: 100% !important; z-index: 99999; transition: all 0.5s ease-in-out; } /* Navigation progress -- driven only by real events, see static/js/progress_bar_scripts.js. Two states, and nothing appears at all unless a navigation is genuinely slower than ~300ms: .is-waiting the outgoing request is in flight. Its duration is unknowable, so the bar is indeterminate rather than a made-up percentage. (default) determinate -- a real count of this page's finished subresources, completed by the window load event. */ #progress-bar-container { position: fixed; top: 0; left: 0; width: 100%; height: 4px; background-color: transparent; z-index: 10000; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 200ms ease; } #progress-bar-container.is-navigating { opacity: 1; transition: opacity 80ms ease; } #progress-bar { position: absolute; top: 0; left: 0; width: 0; height: 100%; background: var(--primary); border-radius: 0 2px 2px 0; transition: width 150ms linear; } #progress-bar-container.is-waiting #progress-bar { width: 28%; background: linear-gradient(90deg, transparent, var(--primary) 35%, var(--primary) 65%, transparent); transition: none; animation: nav-waiting 950ms cubic-bezier(0.65, 0, 0.35, 1) infinite; } @keyframes nav-waiting { from { transform: translateX(-100%); } to { /* A 28%-wide bar crossing the full container is 128/28 of its own width. */ transform: translateX(457%); } } @media (prefers-reduced-motion: reduce) { #progress-bar { transition: none; } #progress-bar-container.is-waiting #progress-bar { width: 100%; background: var(--primary); animation: nav-waiting-pulse 1.2s ease-in-out infinite; } @keyframes nav-waiting-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } } .transition-out { transform: translateX(-150%); transition: transform 0.4s ease-in-out; } /* STYLE THE DEFAULT DJANGO FORM */ .django-form input[type="text"], .django-form input[type="number"], .django-form input[type="email"], select { background: var(--card-background-color) !important; border: var(--border-color) solid 1px !important; border-radius: 1rem !important; padding: 0.25rem 0.5rem; } .django-form p { width: 100%; display: flex; flex-direction: column; gap: 10px; } .django-form p input { width: 100%; } .django-form ul { padding: 40px 20px; display: flex; flex-direction: column; gap: 10px; list-style: circle; } .errorlist { padding: 20px 30px !important; list-style: none !important; border-radius: 20px; background-color: rgba(255, 0, 0, 0.5); } .errorlist li { color: white; } select { padding: 0.25rem 0.5rem !important; background: transparent !important; } .collapsible-form-item select { width: 200px; } .django-form input::file-selector-button { display: flex; flex-direction: row; align-items: center; justify-content: center; background-color: var(--primary); padding: 0.5rem 1.5rem; border-radius: 10rem; color: white; outline: none; border: none; } .django-form input[type="text"], .django-form input[type="number"], .django-form input[type="email"], .django-form select, .django-form a, .django-form input[type="file"], .select2 { margin: 0 0 2rem 0; } .django-form a { background-color: var(--main-background-color); border-radius: 1000px; padding: 0.5rem 1.5rem; display: inline-block; max-width: 200px; text-overflow: ellipsis; white-space: nowrap; overflow: clip; font-style: italic; } .django-form a:hover { background-color: var(--color_2); } .django-form input[type="checkbox"] { width: 20px; height: 20px; margin: 4px 0; } .django-form label { padding: 0 0 0.5rem 0; font-weight: bold !important; } .gallery-image:hover { filter: brightness(0.95); } input[type="checkbox"], input[type="radio"] { width: 25px !important; height: 25px !important; background-color: transparent; border-radius: 10000px !important; vertical-align: middle; border: 2px dotted var(--border-color); appearance: none; -webkit-appearance: none; outline: none; cursor: pointer; display: flex; flex-shrink: 0; } input[type="checkbox"]:checked, input[type="radio"]:checked { border: 0.5rem double var(--color_4); background-color: var(--primary) !important; } input[type="number"], input[type="text"], input[type="email"], input[type="password"] { padding: 0.25rem 0.5rem; border-radius: 20rem; background: transparent; border: 1px solid var(--border-color) !important; } table { margin: 0 auto; border-collapse: collapse; border-style: hidden; /*Remove all the outside borders of the existing table*/ } table tr:nth-child(odd) { background: var(--table-row); } table td { white-space: nowrap; padding: 0.5rem 1rem; /*border: 1px solid var(--border-color);*/ } table th { white-space: nowrap; padding: 0.5rem 1rem; background: var(--table-header); } table th { font-weight: bold; } #id_payment, #id_payment label { display: flex; flex-direction: column; gap: 0.5rem; } #id_payment label { background: var(--main-background-color); padding: 0.8rem; border-radius: 1rem; } #id_payment label:hover { background: var(--color_4); } select:disabled { opacity: 0.5; } select:enabled { opacity: 1; } /* ============================== */ /* NAVIGATION BAR & SEARCH */ /* ============================== */ /* * Surfaces, not borders. Three levels are in play and each is told apart by its * background alone: * * bar -> --card-background-color (floated over the page) * field -> --main-background-color (recessed into the bar) * chip -> --card-background-color (raised back out of the field) * * The pair inverts correctly in dark mode, where card (#1d1d23) is the lighter * of the two, so "recessed" stays legible without a single hairline. * * Everything tinted here is derived with color-mix() from --primary-text / * --card-background-color, both of which flip with the colour scheme, so no * rule in this block needs a dark-mode twin. */ .top-navigation { background-color: color-mix(in srgb, var(--card-background-color) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* ---------- search field ---------- */ /* An uplifted surface: a step DARKER than the card in light mode, a step * LIGHTER in dark mode. --primary-text flips with the scheme, so one mix does * both. --main-background-color cannot serve here — it is #000 in dark mode, * which reads as sunken against the card. */ .top-navigation, #nav-filter-panel { --nav-surface: color-mix(in srgb, var(--primary-text) 7%, var(--card-background-color)); --nav-surface-strong: color-mix(in srgb, var(--primary-text) 11%, var(--card-background-color)); } /* Capped in px, not rem: html sets font-size 18px, so max-w-5xl resolved to * ~1150px — wider than this flex column ever gets, which is why it read as * having no effect. 820px is under the column at every desktop width, so the * bar stays centred instead of stretching. Change this one number to retune. */ #nav-search-shell { width: 100%; max-width: 820px; margin-inline: auto; } .nav-field { display: flex; align-items: center; height: 46px; padding: 4px; gap: 4px; background-color: var(--nav-surface); border-radius: 999px; transition: box-shadow 0.15s ease-in-out; } .nav-field:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 32%, transparent); } /* * The query input owns the full height of the field and carries no chrome of * its own — the field around it IS the input, visually. * * Qualified with `input` on purpose: the global * `input[type="number"], input[type="text"], ...` rule near the top of the * FORMS section sets `border: 1px solid !important`, and an attribute selector * out-specifies a bare class, so `.nav-search-input` alone lost to it even * with !important. `input.nav-search-input` ties on specificity and wins on * order, since this block is the last in the file. */ input.nav-search-input { flex: 1 1 auto; align-self: stretch; min-width: 0; height: auto; margin: 0 !important; padding: 0 0.6rem !important; background: transparent !important; border: none !important; border-radius: 999px !important; box-shadow: none !important; outline: none; color: var(--primary-text); font-size: 0.9rem; } input.nav-search-input:focus, input.nav-search-input:hover { background: transparent !important; border: none !important; box-shadow: none !important; } input.nav-search-input::placeholder { color: var(--tertiary-text); } /* Hides the spinner on the numeric (id / phone) types, which would otherwise * put a second control inside the pill. */ input.nav-search-input::-webkit-outer-spin-button, input.nav-search-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input.nav-search-input[type="number"] { -moz-appearance: textfield; appearance: textfield; } /* The "|" between the query and the filter toggle. */ .nav-divider { flex-shrink: 0; width: 1px; height: 20px; margin: 0 2px; background-color: color-mix(in srgb, var(--primary-text) 16%, transparent); } .nav-chip { display: inline-flex; align-items: center; gap: 0.35rem; height: 38px; padding: 0 0.7rem; flex-shrink: 0; border-radius: 999px; background-color: var(--card-background-color); color: var(--primary-text); transition: background-color 0.15s ease-in-out; } .nav-chip:hover { background-color: color-mix(in srgb, var(--primary) 12%, var(--card-background-color)); } /* Icon-only actions: the filter toggle in the field, and the buttons in the * actions column. */ .nav-icon-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 999px; color: var(--secondary-text); transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out; } .nav-icon-btn:hover { background-color: color-mix(in srgb, var(--primary-text) 7%, transparent); color: var(--primary-text); } .nav-icon-btn[aria-expanded="true"] { background-color: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); } .nav-icon-btn-primary { width: 40px; height: 40px; background-color: var(--primary); color: #fff; } .nav-icon-btn-primary:hover { background-color: var(--primary); color: #fff; filter: brightness(1.12); } .nav-icon-btn-primary i, .nav-icon-btn-primary svg { color: #fff !important; } /* ---------- floating layers ---------- */ /* Elevation comes from the shadow, never an outline. */ .nav-pop { background-color: var(--card-background-color); box-shadow: 0 18px 45px -12px var(--shadow), 0 6px 14px -8px var(--shadow); } .nav-row { transition: background-color 0.15s ease-in-out; } .nav-row:hover { background-color: color-mix(in srgb, var(--primary) 10%, var(--card-background-color)); } /* The identity block sits one surface below the actions under it, which is what * separates them — this menu has no divider rule. */ .nav-pop-header { background-color: var(--nav-surface); } /* ---------- avatar placeholder ---------- */ /* * Neutral rather than branded: this stands in for a photo, so a saturated fill * would read as a badge. The gradient and the hairline are both mixed off * --primary-text, so they invert with the colour scheme, and the "border" is an * inset shadow to keep it off the box model. */ .nav-avatar { background-image: linear-gradient(145deg, color-mix(in srgb, var(--primary-text) 13%, var(--card-background-color)) 0%, color-mix(in srgb, var(--primary-text) 5%, var(--card-background-color)) 100%); color: var(--secondary-text) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-text) 10%, transparent); letter-spacing: 0.02em; } /* ---------- theme switch ---------- */ /* * A recessed track with one raised segment — the same surface hierarchy the * menu itself uses, so the group needs no outline. The active segment is the * card surface, i.e. it rises to the level of the menu around it. */ .theme-seg { background-color: color-mix(in srgb, var(--primary-text) 6%, transparent); } .theme-seg-btn { display: inline-flex; flex: 1 1 0; min-width: 0; align-items: center; justify-content: center; gap: 0.3rem; padding: 0.45rem 0.3rem; border-radius: 0.6rem; font-size: 0.7rem; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; color: var(--secondary-text); transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out; } /* The blanket `span { color: var(--primary-text) }` reset would otherwise win * over the button's own colour. */ .theme-seg-btn span { color: inherit; } .theme-seg-btn:hover { color: var(--primary-text); } .theme-seg-btn[aria-pressed="true"] { background-color: var(--card-background-color); color: var(--primary); box-shadow: 0 1px 3px -1px var(--shadow); } /* ============================== */ /* NAVBAR FILTER SHEET */ /* ============================== */ /* * Adaptive height: the sheet is anchored under a ~64px bar, so it may use * everything below that minus a little breathing room. dvh keeps it honest on * mobile, where the browser chrome eats into vh. */ #nav-filter-panel .nav-filter-sheet { max-height: calc(100vh - 5.5rem); overflow-y: auto; } /* Hangs straight off the field: square top edge, no gap, and the width of the * search component it belongs to. */ #nav-filter-panel { left: 0; right: 0; width: auto; transform: none; margin-top: -14px; padding-top: 14px; } @supports (height: 100dvh) { #nav-filter-panel .nav-filter-sheet { max-height: calc(100dvh - 5.5rem); } } /* * The address selects come from a Django form and take no classes at the call * site, so every control in the sheet is styled from here instead. The global * `select` rule forces `background: transparent !important`, hence the * !important below. */ #nav-filter-panel input[type="text"], #nav-filter-panel input[type="number"], #nav-filter-panel select { width: 100%; margin: 0 !important; padding: 0.4rem 0.8rem !important; background: var(--nav-surface) !important; color: var(--primary-text); border: none !important; border-radius: 999px !important; font-size: 0.85rem; } #nav-filter-panel select:disabled { opacity: 0.4; } /* The province blocks drive this one; it stays in the DOM (and submits) but is * never seen. */ #nav-filter-panel .nav-province-select { display: none; } #nav-filter-panel .select2 { width: 100% !important; margin: 0 !important; } #nav-filter-panel .select2-container--default .select2-selection--single { height: 34px; background-color: var(--nav-surface) !important; border: none !important; border-radius: 999px !important; } /* select2 appends its dropdown to , so it is reached globally. */ .select2-dropdown { border: none !important; box-shadow: 0 18px 45px -12px var(--shadow), 0 6px 14px -8px var(--shadow); } .select2-search__field { background-color: var(--main-background-color) !important; border: none !important; } /* ---------- field label ---------- */ .nav-filter-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tertiary-text); } /* ---------- segmented control ---------- */ /* * A three-state toggle: all / has / has none. The radios are real form controls * (the sheet submits without any JS); only their labels are visible, so the * global 25px input[type="radio"] sizing has to be overridden away. */ .nav-seg { display: inline-flex; padding: 3px; gap: 2px; background-color: var(--nav-surface-strong); border-radius: 999px; } .nav-seg input[type="radio"] { position: absolute; width: 0 !important; height: 0 !important; opacity: 0; pointer-events: none; } .nav-seg label { padding: 0.28rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; color: var(--tertiary-text); white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out; } .nav-seg label:hover { color: var(--primary-text); } .nav-seg input[type="radio"]:checked + label { background-color: var(--card-background-color); color: var(--primary-text); box-shadow: 0 1px 3px var(--shadow); } /* ---------- province blocks ---------- */ .nav-block-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } @media (min-width: 640px) { .nav-block-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .nav-block { display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 0.35rem 0.5rem; border-radius: 0.85rem; background-color: var(--nav-surface); color: var(--secondary-text); font-size: 0.8rem; font-weight: 700; text-align: center; line-height: 1.15; cursor: pointer; transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out; } .nav-block:hover { background-color: color-mix(in srgb, var(--primary) 12%, var(--nav-surface)); color: var(--primary-text); } .nav-block[aria-pressed="true"] { background-color: var(--primary); color: #fff; } /* ---------- switch ---------- */ .nav-switch { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; } .nav-switch input[type="checkbox"] { position: absolute; width: 0 !important; height: 0 !important; opacity: 0; pointer-events: none; } .nav-switch-track { position: relative; flex-shrink: 0; display: block; width: 38px; height: 22px; border-radius: 999px; background-color: color-mix(in srgb, var(--primary-text) 18%, transparent); transition: background-color 0.18s ease-in-out; } .nav-switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 999px; background-color: var(--card-background-color); box-shadow: 0 1px 2px var(--shadow); transition: transform 0.18s ease-in-out; } .nav-switch input[type="checkbox"]:checked + .nav-switch-track { background-color: var(--primary); } .nav-switch input[type="checkbox"]:checked + .nav-switch-track::after { transform: translateX(16px); } /* ---------- active-filter badge ---------- */ /* * Sits on the filter toggle whenever the sheet holds a value. The count is * written by navigation.js from the sheet's own controls, so it is right both * on a fresh load of a filtered result page and while the user is still * picking, before submitting. */ .nav-filter-badge { position: absolute; top: -1px; right: -1px; display: flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background-color: var(--primary); color: #fff !important; font-size: 0.6rem; font-weight: 700; line-height: 1; box-shadow: 0 0 0 2px var(--nav-surface); } /* ---------- mobile search mode ---------- */ /* * Below md the bar has room for one thing at a time. Opening the search hides * the brand and every other action, leaving the field and its close button; * closing it puts them all back. The state lives as one class on the