/* ========================================================================== THE CO-DOCFINDER TOP BAR (Sol, 3 September 2026) co-docfinder.com is not ColoradoHealth, so it does not wear the navy bar. Its logo is dark blue and green ink drawn for a white background, and on navy it would be either invisible or a white block. So the bar here is white, with the navy kept for the hamburger and the writing. Everything else is borrowed rather than rebuilt: the bar, the hamburger, the hidden checkbox that opens the menu and the menu itself are all the same classes vb-base.css already defines, and the menu was white there to begin with. These rules only change the colours of the bar, and say where it is allowed to appear. WHERE IT APPEARS (what Sol asked for) the results page always - phone and computer alike, because that is where "Start New Search" is worth having the front page phone only. On a computer you are already looking at the search form and the big logo above it, so a second logo and a link back to the page you are on would only be clutter. The front page marks itself with class="df-front" on ; the results page does not, which is the whole of the difference. This sheet is loaded ONLY by co-docfinder - by its index.htm and by its own copy of the Perl wrapper. Nothing on ColoradoHealth links it, so nothing there can be affected by anything in here. ========================================================================== */ /* -------------------------------------------------------------------------- 1. THE BAR ITSELF White, with a hairline under it so it still reads as a bar against the page's pale grey. -------------------------------------------------------------------------- */ .df-bar { background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 1px 8px rgba(0, 20, 40, .10); } /* The badge-and-wordmark version of the logo, not the tall one with the small print - see dflogo.py. Slightly smaller than ColoradoHealth's because this one is a picture of a circle and reads better with air around it. */ .df-bar .ch-logo img { height: clamp(30px, 9vw, 40px); } /* The hamburger was white-on-navy. On a white bar it has to be the other way round. */ .df-bar .ch-toggle { border-color: var(--line); background: var(--page); } .df-bar .ch-toggle:hover { border-color: var(--navy); background: var(--tint); } .df-bar .ch-bars, .df-bar .ch-bars::before, .df-bar .ch-bars::after { background: var(--navy); } /* -------------------------------------------------------------------------- 2. THE MENU IS A SMALL PANEL, NOT A BAND The shared rule pins the menu left:0 right:0, straight across the window. That is right on ColoradoHealth, where a dozen links sit in three columns and fill it. With one link it left an empty white strip the width of the screen and the words stranded at the far end (Sol, 3 Sep). So here it drops as a card under the hamburger that opened it. right: the same clamp the bar uses for its own side padding, which is what puts the card under the hamburger rather than near it. Change one and change the other. width: max-content, so the card is as wide as its contents and no wider - held above 190px so a short link still looks deliberate, and below the window so it cannot cause sideways scrolling on a narrow phone. -------------------------------------------------------------------------- */ #ch-menu-open:checked ~ .df-menu { left: auto; right: clamp(12px, 3vw, 32px); width: max-content; min-width: 190px; max-width: calc(100vw - 24px); margin-top: 6px; padding: 8px 18px; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 24px rgba(0, 20, 40, .18); } /* -------------------------------------------------------------------------- 2b. THE ONE THING IN IT A plain link, not a button. It was a solid navy button to begin with - the same treatment the quote links have on the other site - and one of those alone in a panel was far too loud for what it is (Sol, 3 Sep). So: no box, no fill, just the words. The 44px minimum height comes from the shared rule and is kept on purpose. It is not there to be seen; it is there so the link is big enough to hit with a thumb, which is where this menu mostly opens. -------------------------------------------------------------------------- */ .df-menu .ch-menu-grid { grid-template-columns: 1fr; } .df-menu .ch-menu-grid a { padding: 0; border: 0; border-radius: 0; background: none; color: var(--link); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; } .df-menu .ch-menu-grid a:hover { background: none; color: var(--navy); } /* -------------------------------------------------------------------------- 3. THE FRONT PAGE HIDES THE BAR ON A COMPUTER 1001px is the width the results page already uses to decide it has room for the filter column, so the two pages change their minds together. The second rule is not redundant: the menu opens on a rule of its own ("#ch-menu-open:checked ~ .ch-menu"), which is more specific than the first rule here and would otherwise win if the menu had been opened on a phone and the window then widened. -------------------------------------------------------------------------- */ @media (min-width: 1001px) { .df-front .ch-bar, .df-front .ch-menu, .df-front #ch-menu-open { display: none; } .df-front #ch-menu-open:checked ~ .ch-menu { display: none; } }