/* ========================================================================= Ontario Wildlife Log, iOS design system A vanilla-CSS approximation of native iOS (UIKit) styling: San Francisco system font, grouped inset lists, large-title nav bars, translucent tab & nav bars, iOS controls, full light/dark support and safe-area handling. Accent colour is an Ontario forest green for a distinct identity. ========================================================================= */ :root { /* Accent / tint. Ontario forest green */ --tint: #14804a; --tint-press: #0f6b3d; --tint-soft: rgba(20, 128, 74, 0.12); --on-tint: #ffffff; /* Semantic system colours (light) */ --bg: #f2f2f7; /* systemGroupedBackground */ --bg-elevated: #ffffff; /* secondarySystemGroupedBackground (cells) */ --bg-secondary: #efeff4; --bar: rgba(249, 249, 249, 0.82); /* translucent nav / tab bar */ --bar-border: rgba(0, 0, 0, 0.28); --label: #000000; --label-2: rgba(60, 60, 67, 0.75); /* secondary text, bumped from iOS 0.6 to clear WCAG AA (≈5:1) */ --label-3: rgba(60, 60, 67, 0.3); --tab-inactive: #6d6d72; /* inactive tab labels, accessible grey, not 0.3 fill */ --separator: rgba(60, 60, 67, 0.29); --fill: rgba(120, 120, 128, 0.12); --fill-strong: rgba(120, 120, 128, 0.2); --red: #d1372b; --orange: #ff9500; --orange-strong: #b45309; --yellow: #ffcc00; --green: #34c759; --blue: #007aff; --purple: #af52de; --radius-cell: 12px; --radius-card: 16px; --radius-btn: 12px; --nav-h: 44px; --tab-h: 50px; --sa-top: env(safe-area-inset-top, 0px); --sa-bottom: env(safe-area-inset-bottom, 0px); --ease: cubic-bezier(0.32, 0.72, 0, 1); } @media (prefers-color-scheme: dark) { :root { --tint: #30d158; --tint-press: #28b84c; --tint-soft: rgba(48, 209, 88, 0.16); --on-tint: #05230f; --bg: #000000; --bg-elevated: #1c1c1e; --bg-secondary: #2c2c2e; --bar: rgba(30, 30, 30, 0.8); --bar-border: rgba(255, 255, 255, 0.18); --label: #ffffff; --label-2: rgba(235, 235, 245, 0.65); --label-3: rgba(235, 235, 245, 0.3); --tab-inactive: rgba(235, 235, 245, 0.6); --separator: rgba(84, 84, 88, 0.6); --fill: rgba(120, 120, 128, 0.24); --fill-strong: rgba(120, 120, 128, 0.36); --red: #ff6961; --orange: #ff9f0a; --orange-strong: #ff9f0a; --yellow: #ffd60a; --green: #30d158; --blue: #0a84ff; --purple: #bf5af3; } } /* Explicit theme override, the in-app Appearance toggle stamps data-theme on and must win over the media query in both directions. */ :root[data-theme='light'] { color-scheme: light; --tint: #14804a; --tint-press: #0f6b3d; --tint-soft: rgba(20, 128, 74, 0.12); --on-tint: #fff; --bg: #f2f2f7; --bg-elevated: #fff; --bg-secondary: #efeff4; --bar: rgba(249, 249, 249, 0.82); --bar-border: rgba(0, 0, 0, 0.28); --label: #000; --label-2: rgba(60, 60, 67, 0.75); --label-3: rgba(60, 60, 67, 0.3); --tab-inactive: #6d6d72; --separator: rgba(60, 60, 67, 0.29); --fill: rgba(120, 120, 128, 0.12); --fill-strong: rgba(120, 120, 128, 0.2); --red: #d1372b; --orange: #ff9500; --orange-strong: #b45309; --yellow: #ffcc00; --green: #34c759; --blue: #007aff; --purple: #af52de; } :root[data-theme='dark'] { color-scheme: dark; --tint: #30d158; --tint-press: #28b84c; --tint-soft: rgba(48, 209, 88, 0.16); --on-tint: #05230f; --bg: #000; --bg-elevated: #1c1c1e; --bg-secondary: #2c2c2e; --bar: rgba(30, 30, 30, 0.8); --bar-border: rgba(255, 255, 255, 0.18); --label: #fff; --label-2: rgba(235, 235, 245, 0.65); --label-3: rgba(235, 235, 245, 0.3); --tab-inactive: rgba(235, 235, 245, 0.6); --separator: rgba(84, 84, 88, 0.6); --fill: rgba(120, 120, 128, 0.24); --fill-strong: rgba(120, 120, 128, 0.36); --red: #ff6961; --orange: #ff9f0a; --orange-strong: #ff9f0a; --yellow: #ffd60a; --green: #30d158; --blue: #0a84ff; --purple: #bf5af3; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; overscroll-behavior-y: none; } body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', 'Segoe UI', Roboto, system-ui, sans-serif; font-size: 17px; line-height: 1.4; color: var(--label); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Visible keyboard focus for accessibility (AODA / WCAG 2.4.7) */ :focus-visible { outline: 2.5px solid var(--tint); outline-offset: 2px; border-radius: 6px; } /* Kill the tap flash + text selection on interactive chrome for a native feel */ button, .tap, .cell, .tab, .chip, .seg-opt { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; } button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; } a { color: var(--tint); text-decoration: none; } input, textarea, select { font: inherit; color: var(--label); } img { max-width: 100%; } /* ---------------------------------------------------------------- App shell */ #app { min-height: 100%; padding-bottom: calc(var(--tab-h) + var(--sa-bottom) + 8px); } /* Optional "In depth" species account (native
styled as a group). */ .notes { margin: 18px 16px; background: var(--bg-elevated); border-radius: var(--radius-card); overflow: hidden; } .notes > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 44px; } .notes > summary::-webkit-details-marker { display: none; } .notes > summary .cell-emoji { font-size: 22px; width: 28px; text-align: center; } .notes > summary .cell-title { font-size: 17px; } .notes > summary .chevron { margin-left: auto; transition: transform 0.2s var(--ease); } .notes[open] > summary .chevron { transform: rotate(90deg); } .notes > summary:active { background: var(--fill); } .notes-body { padding: 2px 18px 18px; border-top: 0.5px solid var(--separator); } .notes-body p { margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: var(--label); } .notes-body p:first-child { margin-top: 14px; } .screen { animation: screen-in 0.28s var(--ease); } @keyframes screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* iOS push/pop navigation transitions. Two screens overlay while the incoming one slides in and the outgoing one parallaxes off and dims, like a UINavigationController. */ #app.nav-animating { position: relative; overflow: hidden; } #app.nav-animating .screen { position: absolute; top: 0; left: 0; width: 100%; } .screen.sc-anim { animation: none; transition: transform 0.34s var(--ease), opacity 0.34s var(--ease); will-change: transform; } .screen.sc-from-right { transform: translateX(100%); } .screen.sc-from-left { transform: translateX(-100%); } .screen.sc-exit-left { transform: translateX(-26%); opacity: 0.55; } .screen.sc-exit-right { transform: translateX(100%); } /* --------------------------------------------------------- Navigation bar */ .nav { position: sticky; top: 0; z-index: 30; padding-top: var(--sa-top); background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 0.5px solid transparent; transition: border-color 0.2s; } .nav.scrolled { border-bottom-color: var(--bar-border); } .nav-row { height: var(--nav-h); display: flex; align-items: center; justify-content: center; position: relative; padding: 0 8px; } .nav-title { font-size: 17px; font-weight: 600; letter-spacing: -0.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* 50%, not 60%: a centred title 60% wide starts at 80px, which is where the back button ends. At 50% there is always a gap, and a title too long for it truncates the way iOS truncates rather than colliding. */ max-width: 50%; transition: opacity 0.2s; } /* On large-title screens the inline title stays hidden until you scroll past the big title, mirroring iOS navigation bars. */ .nav.has-large .nav-title { opacity: 0; } .nav.has-large.show-title .nav-title { opacity: 1; } .nav-left, .nav-right { position: absolute; top: 0; height: var(--nav-h); display: flex; align-items: center; gap: 2px; } .nav-left { left: 4px; max-width: 42%; } .nav-right { right: 8px; } /* Belt and braces for the back label: JS already swaps a long one for "Back", and this keeps a medium one from ever reaching the centred title. */ .nav-btn { min-width: 0; } .nav-btn .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .nav-btn { color: var(--tint); font-size: 17px; padding: 6px 8px; display: inline-flex; align-items: center; gap: 3px; border-radius: 8px; } .nav-btn:active { opacity: 0.4; } .nav-btn.bold { font-weight: 600; } .nav-btn svg { width: 17px; height: 17px; } /* Large title (collapses as user scrolls) */ .large-title { padding: 4px 20px 6px; background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); } .large-title h1 { margin: 0; font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: 0.37px; } .large-title .large-head { display: flex; align-items: center; gap: 10px; } .large-title .large-head h1 { flex: 0 1 auto; } .large-title .ver { flex: 0 0 auto; font-size: 12px; font-weight: 600; letter-spacing: 0.2px; color: var(--label-2); background: var(--fill); border-radius: 100px; padding: 3px 9px; align-self: center; -webkit-tap-highlight-color: transparent; position: relative; } /* Fitts: the chip is deliberately small, but the thing you aim at should not be. An invisible overlay grows the hit area to 44px without touching the look. */ .large-title .ver::after { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 44px; transform: translateY(-50%); } .large-title .ver:active { opacity: 0.6; } .large-title .subtitle { color: var(--label-2); font-size: 15px; margin-top: 2px; max-width: 34em; } /* -------------------------------------------------------------- Tab bar */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: calc(var(--tab-h) + var(--sa-bottom)); padding-bottom: var(--sa-bottom); display: flex; background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 0.5px solid var(--bar-border); } .tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--tab-inactive); font-size: 10px; font-weight: 500; letter-spacing: 0.1px; padding-top: 6px; transition: color 0.15s, transform 0.1s; } .tab svg { width: 26px; height: 26px; } .tab.active { color: var(--tint); } .tab.active span { font-weight: 700; } /* non-colour cue for the selected tab */ .tab:active { transform: scale(0.92); } /* ------------------------------------------------------- Grouped lists */ .group { margin: 18px 16px 8px; } .group-header { padding: 0 4px 7px; font-size: 13px; font-weight: 400; color: var(--label-2); text-transform: uppercase; letter-spacing: 0.4px; } .group-footer { padding: 7px 4px 0; font-size: 13px; color: var(--label-2); line-height: 1.35; } .list { background: var(--bg-elevated); border-radius: var(--radius-cell); overflow: hidden; } .cell { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 11px 16px; position: relative; background: var(--bg-elevated); color: var(--label); /* keep anchor cells from inheriting the link tint */ transition: background 0.12s; text-align: left; } /* A