/**
* ily.dog Shared Branding Header
* Consistent navigation bar with logo + app name across all apps.
* Uses the Grid Paper design system tokens.
*
* Usage in apps:
* 1. Include after design-system.css:
*
* 2. Include the header template at top of :
* {% include 'branding_header.html' %}
* (or copy the HTML snippet directly for non-Flask apps)
*/
/* ============================================
BRANDING HEADER BAR
============================================ */
.branding-header {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 2147483647; /* max z-index, above everything */
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 12px;
margin: 0;
background: #1a1d24;
color: #fff;
border-bottom: 1px solid rgba(255,255,255,0.08);
gap: 12px;
height: 32px;
min-height: 32px;
box-sizing: border-box;
font-family: 'Inter', -apple-system, sans-serif;
overflow: visible;
}
/* Push page content below the fixed header */
body:has(.branding-header:not(.branding-header--hidden)):not(.branding-disabled) {
padding-top: 32px;
}
/* Ensure nothing sits above the navbar */
html, body {
margin-top: 0;
padding-top: 0;
}
/* Hide class — add to .branding-header to remove it from layout */
.branding-header.branding-header--hidden,
body.branding-disabled .branding-header {
display: none;
}
body.branding-disabled {
padding-top: 0;
}
/* Logo + Brand Name */
.branding-header__brand {
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
flex-shrink: 0;
}
.branding-header__logo {
height: 29px;
width: auto;
display: block;
}
.branding-header__name {
font-family: 'Inter', -apple-system, sans-serif;
font-size: 0.8125rem;
font-weight: 700;
color: #e8e6e1;
letter-spacing: -0.025em;
white-space: nowrap;
}
.branding-header__name span {
color: #e8a838;
}
/* Center: App Name (optional) */
.branding-header__app {
font-family: 'Inter', -apple-system, sans-serif;
font-size: 0.75rem;
font-weight: 500;
color: #9a9590;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
text-align: center;
}
/* Right side: back link */
.branding-header__back,
.branding-header__back span {
font-family: 'Inter', -apple-system, sans-serif;
font-size: 13px;
color: #fff;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0;
border: none;
background: none;
white-space: nowrap;
flex-shrink: 0;
cursor: pointer;
outline: none;
opacity: 1;
visibility: visible;
}
.branding-header__back:hover {
color: #e8a838;
}
.branding-header__back:focus-visible {
outline: 2px solid #e8a838;
outline-offset: 2px;
}
/* ============================================
COMPACT VARIATIONS
============================================ */
/* Minimal: logo only, no text */
.branding-header--minimal .branding-header__name,
.branding-header--minimal .branding-header__app {
display: none;
}
/* No center app name */
.branding-header--no-app-name .branding-header__app {
display: none;
}
/* ============================================
PAGE TITLE STANDARDIZATION
============================================ */
/* Standard app header below branding bar */
.app-header {
padding: 1.5rem 1rem 1rem;
text-align: center;
}
.app-header h1 {
font-family: 'Inter', -apple-system, sans-serif;
font-size: 1.875rem;
font-weight: 700;
color: #e8e6e1;
margin: 0 0 0.5rem;
letter-spacing: -0.025em;
}
.app-header .subtitle {
font-size: 1rem;
color: #9a9590;
margin: 0;
line-height: 1.5;
}
/* ============================================
PAGE TITLE FORMAT (for tag)
============================================ */
/* Standard format: {Emoji} {App Name} | ily.dog */
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 640px) {
.branding-header {
padding: 0 0.5rem;
}
.branding-header__name {
font-size: 0.75rem;
}
.branding-header__app {
display: none;
}
.branding-header__logo {
height: 18px;
}
}