/* ───────────────────────────────────────────────────────────────────────────── PoHeader — the ONE header every Paddling Out page uses. Rendered by js/components/PoHeader.js into
. Layout, all pages: [‹ back] eyebrow / TITLE [Search] [Add] [Settings] Mobile (≤560px): labels drop, icons stay; back chevron stays first. The current section's action is marked aria-current + .is-current. Controls are plain: text + icon, one solid gold primary. No boxes, no chamfers on small things. ───────────────────────────────────────────────────────────────────────────── */ :root { --poh-gold: #b5935a; --poh-gold-bright: #d9bd7b; } .po-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; /* Side padding respects the notch on devices that report an inset; env() is 0 elsewhere. Pairs with viewport-fit=cover in each page . */ padding: 2rem max(2rem, env(safe-area-inset-right)) 1.25rem max(2rem, env(safe-area-inset-left)); border-bottom: 1px solid rgba(181, 147, 90, 0.18); } .po-brand-row { display: flex; align-items: flex-end; gap: 0.7rem; min-width: 0; } .po-brand { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; /* a long spot name must shrink, not shove the actions off-screen */ text-decoration: none; color: inherit; } .po-eyebrow { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 0.78rem; font-style: italic; letter-spacing: 0.28em; color: var(--poh-gold); opacity: 0.82; text-transform: lowercase; } .po-title { overflow-wrap: anywhere; font-family: 'Bebas Neue', 'Josefin Sans', Arial, sans-serif; font-size: clamp(1.7rem, 4.4vw, 2.35rem); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--poh-gold-bright); margin: 0; line-height: 1; } /* Actions: quiet text+icon links; the primary is one solid gold block. No boxes around small controls — they are links, not badges. */ .po-btn { flex-shrink: 0; height: 36px; padding: 0 0.5rem; border: 0; background: transparent; color: var(--poh-gold); display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; text-decoration: none; margin-bottom: 0.15rem; transition: color 0.18s ease, background 0.18s ease; } .po-btn:hover { color: var(--poh-gold-bright); } .po-btn:focus-visible { outline: 2px solid var(--poh-gold-bright); outline-offset: 3px; } .po-btn svg { width: 20px; height: 20px; flex-shrink: 0; } .po-btn-label { font-family: 'Josefin Sans', Arial, sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; white-space: nowrap; } /* Where you are: gold-bright with a hairline underneath */ .po-btn.is-current { color: var(--poh-gold-bright); box-shadow: inset 0 -2px 0 var(--poh-gold-bright); } /* Primary action: Add a lake — solid gold, square */ .po-btn--primary { padding: 0 0.9rem 0 0.7rem; background: var(--poh-gold-bright); color: #141210; } .po-btn--primary:hover { background: #e6cd8e; color: #141210; } .po-btn--primary.is-current { box-shadow: none; background: var(--poh-gold); } /* Back chevron — plain */ .po-back { width: 36px; padding: 0; justify-content: center; } .po-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } @media (max-width: 560px) { .po-btn-label { display: none; } .po-btn { padding: 0 0.6rem; } .po-actions { gap: 0.4rem; } } @media (max-width: 600px) { .po-page-header { padding: 1.4rem max(1.1rem, env(safe-area-inset-right)) 1rem max(1.1rem, env(safe-area-inset-left)); } .po-title { font-size: 1.4rem; } } @media (prefers-reduced-motion: reduce) { .po-btn { transition: none; } }