/* ═══════════════════════════════════════════════════════════════════════ Osnatmaor — base: reset, typography, app shell Mobile-first. RTL is the default direction (set on by WordPress). ═══════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text-primary); font-family: 'Heebo', Arial, sans-serif; font-size: var(--fs-body); line-height: 1.7; display: flex; flex-direction: column; } img { max-width: 100%; height: auto; } a { color: var(--brown); } a:hover { color: var(--accent); } h1, h2, h3, h4 { line-height: 1.3; margin: 0 0 0.5em; } h1 { font-size: var(--fs-h1); font-weight: 800; } h2 { font-size: var(--fs-h2); font-weight: 700; } h3 { font-size: var(--fs-h3); font-weight: 700; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ── App shell ─────────────────────────────────────────────────────── */ .om-topbar { position: sticky; top: 0; z-index: 100; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; justify-items: center; min-height: 56px; padding: 8px 12px; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-soft); } .om-topbar__action { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; color: var(--brown); transition: background 0.2s ease; } .om-topbar__action:hover { background: var(--cream); color: var(--brown); } .om-topbar__action svg { width: 22px; height: 22px; } /* Raised neumorphic circle — same language as the landing footer's social icons: cream surface, soft out-shadow, brown glyph. */ .om-topbar__action--raised { background: var(--cream); box-shadow: var(--shadow-btn); } .om-topbar__action--raised svg { width: 19px; height: 19px; } .om-topbar__action--raised:hover { background: var(--cream); } .om-topbar__action--raised:active { box-shadow: var(--shadow-in); } .om-topbar__brand { /* Pinned to the middle column so the logo stays centered between the two corner icons no matter what else lands in the bar. */ grid-column: 2; justify-self: center; font-weight: 800; font-size: 1.15rem; letter-spacing: 0.01em; } .om-topbar__brand a { display: inline-flex; align-items: center; color: var(--brown); text-decoration: none; } .om-topbar__brand img { max-height: var(--om-logo-h, 40px); max-width: 100%; width: auto; height: auto; display: block; } .site-main { flex: 1; width: 100%; /* leave room for the fixed bottom nav on small screens */ padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); } .om-footer { padding: 28px 20px calc(var(--nav-h) + 24px); text-align: center; color: var(--text-muted); font-size: var(--fs-sm); } /* ── Bottom app nav ─────────────────────────────────────────────────── */ .om-nav { position: fixed; bottom: 0; inset-inline: 0; z-index: 100; display: flex; height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--cream); border-top: 1px solid var(--border-soft); box-shadow: 0 -4px 18px rgba(139, 115, 85, 0.12); } .om-nav__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; color: var(--text-muted); font-size: 0.72rem; font-weight: 600; } .om-nav__icon { display: inline-flex; align-items: center; justify-content: center; padding: 4px 18px; border-radius: var(--radius-pill); transition: background 0.2s ease; } .om-nav__icon svg { width: 22px; height: 22px; stroke: currentColor; } .om-nav__item.active, .om-nav__item:hover { color: var(--brown); } /* Soft pill behind the active tab's icon */ .om-nav__item.active .om-nav__icon { background: linear-gradient(135deg, color-mix(in srgb, var(--beige) 45%, var(--cream)), color-mix(in srgb, var(--accent) 35%, var(--cream))); box-shadow: var(--shadow-in); } /* Fallback for browsers without color-mix() */ @supports not (color: color-mix(in srgb, red 50%, blue)) { .om-nav__item.active .om-nav__icon { background: var(--beige); } } /* On wide screens the app nav becomes a slim centered bar */ @media (min-width: 900px) { .om-nav { inset-inline: auto; left: 50%; transform: translateX(-50%); width: min(420px, 90vw); bottom: 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-soft); } }