inherit it -- header.custom-header-menu is a sibling of

, not a descendant, so it cannot read a variable set on .login-2026. --l26-rail is the left/right gutter, identical on both sides; --l26-page is content (1152px, from the Figma frame) + 2x gutter. The header container and .l26-grid both use these, which is what keeps the wordmark aligned with the headline and the theme pill aligned with the card. */ body { --l26-rail: clamp(16px, 3.6vw, 48px); --l26-page: 1248px; /* Figma content rail 1152 + 2x48 gutter */ min-height: 100vh; background-repeat: no-repeat; background-attachment: fixed; } /* Blob layer, measured off the Figma exports (BackgroundBlobs*.png, 1247x722). Both themes place the SAME three blobs at the same centres and radii; only the colour and peak opacity differ, so the geometry lives in --l26-blob-*. Centres/radii as fractions of the 1247px frame: 1 centre 119,126 outer r 245 -> 9.5% 17.5% 19.6vw 2 centre 200,523 outer r 265 -> 16.0% 72.4% 21.3vw 3 centre 1105,580 outer r 232 -> 88.6% 80.3% 18.6vw The extra colour stops approximate Figma's gaussian blur; a plain two-stop gradient falls off linearly and reads as a hard-edged disc. */ body { --l26-blob-1: circle clamp(190px, 19.6vw, 340px) at 9.5% 17.5%; --l26-blob-2: circle clamp(210px, 21.3vw, 380px) at 16% 72.4%; --l26-blob-3: circle clamp(185px, 18.6vw, 330px) at 88.6% 80.3%; } /* Stop positions are the measured radial profile: each blob is a FLAT disc with a blurred shoulder (Figma circle + layer blur), not a linear falloff -- blob 2 holds full opacity out to 57% of its radius. Both themes share these stops; only the colour and peak alpha differ (peak: light 33/36/32%, dark 13/18/14%). */ body:not(.public-light-mode) { background-color: #0B0906 !important; background-image: radial-gradient(var(--l26-blob-1), rgba(225, 101, 12, .133) 0%, rgba(225, 101, 12, .133) 24%, rgba(225, 101, 12, .118) 37%, rgba(225, 101, 12, .081) 49%, rgba(225, 101, 12, .033) 61%, rgba(225, 101, 12, .013) 86%, transparent 100%), radial-gradient(var(--l26-blob-2), rgba(198, 94, 16, .177) 0%, rgba(198, 94, 16, .177) 78%, rgba(198, 94, 16, .100) 88%, rgba(198, 94, 16, .030) 95%, transparent 100%), radial-gradient(var(--l26-blob-3), rgba(203, 87, 17, .155) 0%, rgba(203, 87, 17, .155) 58%, rgba(203, 87, 17, .110) 70%, rgba(203, 87, 17, .050) 82%, rgba(203, 87, 17, .012) 92%, transparent 100%) !important; background-repeat: no-repeat !important; background-attachment: fixed !important; } body.public-light-mode { background-color: #FFFFFF; background-image: radial-gradient(var(--l26-blob-1), rgba(250, 176, 81, .333) 0%, rgba(250, 176, 81, .333) 24%, rgba(250, 176, 81, .290) 37%, rgba(250, 176, 81, .200) 49%, rgba(250, 176, 81, .079) 61%, rgba(250, 176, 81, .025) 86%, transparent 100%), radial-gradient(var(--l26-blob-2), rgba(252, 208, 121, .355) 0%, rgba(252, 208, 121, .355) 78%, rgba(252, 208, 121, .200) 88%, rgba(252, 208, 121, .060) 95%, transparent 100%), radial-gradient(var(--l26-blob-3), rgba(253, 214, 142, .340) 0%, rgba(253, 214, 142, .340) 58%, rgba(253, 214, 142, .240) 70%, rgba(253, 214, 142, .110) 82%, rgba(253, 214, 142, .025) 92%, transparent 100%); } /* ========================================================================= 11. Shared public header navigationPublic.php is used by every public screen and is NOT edited; it is reached here only through body:has(main.login-2026). On login/login the partial's "Login" button is not rendered, so the bar holds just the wordmark and the language + theme controls. ========================================================================= */ header.custom-header-menu, header.custom-header-menu .navbar { border: 0 !important; background: transparent !important; box-shadow: none !important; } /* the partial hardcodes Bootstrap's .pt-3/.pb-3, which are !important */ header.custom-header-menu .navbar { padding-top: 34px !important; padding-bottom: 12px !important; } /* same rail as .l26-grid -- Bootstrap's .container only ships a 12px gutter and we were setting padding-left alone, which is what made the page look left-heavy. Both sides are set explicitly here. */ header.custom-header-menu .container { display: flex; align-items: center; gap: 16px; max-width: var(--l26-page); padding-right: var(--l26-rail); padding-left: var(--l26-rail); } header.custom-header-menu .container > .col-md-6 { flex: 1 1 auto; width: auto; max-width: none; padding: 0; } header.custom-header-menu .right-nav-side { display: flex; flex: 0 0 auto; justify-content: flex-end; } /* pleazz_logo.png is already the full "Pleazz / ORDER WITH EAZZ" wordmark, so only the orange cloud tile is added -- no new image asset. */ header.custom-header-menu .navbar-brand { display: inline-flex; align-items: center; gap: 14px; } header.custom-header-menu .navbar-brand::before { content: "\f0c2"; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(145deg, #F5811F, #E8590C); color: #FFFFFF; font-family: "Font Awesome 6 Free"; font-size: 21px; font-weight: 900; } header.custom-header-menu .public-logo { width: auto; height: 42px; } /* language select + theme switch read as one pill */ /* Measured from the exports: pill is 330x54, radius 27. Dark = solid #181818 with a 1px light hairline (NOT translucent + blur). Light = solid #FFFFFF with no border and no shadow at all. */ #languagesDropdown { display: flex; align-items: center; justify-content: space-between; gap: 10px; float: none !important; min-width: 330px; height: 54px; padding: 0 27px 0 12px; border: 1px solid rgba(255, 255, 255, .10); border-radius: 27px; background: #181818; } body.public-light-mode #languagesDropdown { border-color: transparent; background: #FFFFFF; box-shadow: none; } /* 130px, not 180: navigation.css declared min-width:130px !important and beat the 180 this rule used to carry, so 130 is the width the approved screens have. */ #languagesDropdown .select2-container { width: auto !important; min-width: 130px; } /* 35px, not auto: navigation.css forced height:35px !important on this box and the pill's align-items:center positions the text off the box height, so an auto (27px) box drops "English" 4px. 35 is what the approved screens have. */ #languagesDropdown .select2-container--default .select2-selection--single { height: 35px; border: 0; background: transparent; } #languagesDropdown .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0 26px 0 4px; color: #FFFFFF; font-size: 15px; font-weight: 500; line-height: 26px; } /* templateSelection injects , and Bootstrap's .text-white is !important -- light mode has to out-shout it. */ body.public-light-mode #languagesDropdown .select2-selection__rendered, body.public-light-mode #languagesDropdown .select2-selection__rendered span { color: #1C1917 !important; } #languagesDropdown .select2-container--default .select2-selection--single .select2-selection__arrow { right: 0; width: 22px; height: 26px; } /* swap select2's border-triangle for the thin chevron in the reference */ #languagesDropdown .select2-selection__arrow b { display: none; } #languagesDropdown .select2-selection__arrow::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-right: 2px solid rgba(255, 255, 255, .75); border-bottom: 2px solid rgba(255, 255, 255, .75); border-radius: 1px; transform: translate(-50%, -70%) rotate(45deg); } body.public-light-mode #languagesDropdown .select2-selection__arrow::after { border-right-color: rgba(28, 25, 23, .55); border-bottom-color: rgba(28, 25, 23, .55); } /* theme switch -- the partial sets width/height/margin inline, so these need !important to land */ #flexSwitchCheckLightModeContainer { gap: 10px; float: none !important; margin-left: 4px !important; padding-left: 0; border-left: 0; } /* Track 54x32, orange #F97316 in BOTH themes. The knob is 26px with a ~3px inset and its side is INVERTED relative to Bootstrap's default: the reference puts the knob RIGHT in dark (unchecked) and LEFT in light (checked), so background-position is set explicitly for each state. Bootstrap also swaps background-image on :focus, which is overridden below or the knob turns back into its default blue-grey circle while focused. */ #flexSwitchCheckLightMode { width: 54px !important; height: 32px !important; margin-top: 0 !important; border: 0; background-color: #F97316; background-size: 26px 26px; background-repeat: no-repeat; cursor: pointer; transition: background-color .2s ease, background-position .15s ease-in-out; } #flexSwitchCheckLightMode, #flexSwitchCheckLightMode:focus { /* dark = moon: #121212 disc, WHITE crescent sitting at the RIGHT. The crescent is STROKED, not filled -- the reference draws it as a thin outline; a filled path reads as a chunky blob at 26px. */ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3ccircle cx='16' cy='16' r='16' fill='%23121212'/%3e%3cpath transform='translate(7.5 7.5) scale(0.708)' d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") !important; background-position: right 3px center !important; } /* checked == light mode; updatePublicTheme() keeps checkbox and body in sync */ #flexSwitchCheckLightMode:checked, #flexSwitchCheckLightMode:checked:focus { /* light = sun: WHITE disc, near-black glyph, sitting at the LEFT */ background-color: #F97316; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3ccircle cx='16' cy='16' r='16' fill='%23ffffff'/%3e%3ccircle cx='16' cy='16' r='5' fill='%23202020'/%3e%3cg stroke='%23202020' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M16 4.8v2.6M16 24.6v2.6M4.8 16h2.6M24.6 16h2.6'/%3e%3cpath d='M8.3 8.3l1.9 1.9M21.8 21.8l1.9 1.9M23.7 8.3l-1.9 1.9M10.2 21.8l-1.9 1.9'/%3e%3c/g%3e%3c/svg%3e") !important; background-position: left 3px center !important; } #flexSwitchCheckLightMode:focus { border: 0; box-shadow: 0 0 0 3px rgba(249, 115, 22, .25); } /* The label carries BOTH translated words (tLine('Dark') / tLine('Light')) and only the one for the current mode is shown. Keyed off the ABSENCE of .public-light-mode for dark, because after a client-side toggle the body can hold both theme classes or neither -- see the THEME NOTE in login.css. */ /* font-size:0 on the label with the word spans at 15px is deliberate: the approved screens were rendered with a font-size:0 label and a 15px ::after, and a real 15px strut on the label moves the word down 2px. Keeping the strut at 0 reproduces the same geometry with real, translatable text. */ #flexSwitchCheckLightModeContainer .form-check-label { margin-top: 0 !important; margin-left: 13px !important; color: #FFFFFF !important; font-size: 0; font-weight: 500; text-transform: none; white-space: nowrap; } body.public-light-mode #flexSwitchCheckLightModeContainer .form-check-label { color: #1C1917 !important; } .pz26-theme-word { display: none; font-size: 15px; } body:not(.public-light-mode) .pz26-theme-word-dark, body.public-light-mode .pz26-theme-word-light { display: inline; } /* ------------------------------------------------------------------------- Ported from publicMain.css / navigation.css, which the 2026 shell does NOT load. Only the rules the 2026 screens actually depend on are carried over. ---------------------------------------------------------------------- */ /* Base type the header inherits. font-size/line-height come from publicMain.css; font-family and overflow-x come from the 2024 login.css, which every 2024 auth screen loaded -- without it the pill text falls back to Bootstrap's system stack and every glyph edge in the header shifts. */ body { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 14px; line-height: 20px; overflow-x: hidden; } :root { scrollbar-color: #F37220 #17181D; scrollbar-width: thin; } html[data-public-theme="light"] { scrollbar-color: unset; } /* navigation.css: the OPEN language dropdown in dark mode. select2 appends the dropdown to , outside

, so it needs its own rules. */ body:not(.public-light-mode) .select2-container--open .select2-dropdown--below { background-color: #332D2D; color: #FFFFFF; } body:not(.public-light-mode) .select2-results__options { border-bottom: 1px solid #FFFFFF; } body:not(.public-light-mode) .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable, body:not(.public-light-mode) .select2-container--default .select2-results__option--selected { background-color: #000000; } body:not(.public-light-mode) .select2-results__option--selectable { color: #FFFFFF; } /* ------------------------------------------------------------------------- The OPEN language dropdown -- both themes. Only the dark half had ever been ported (from navigation.css, above), so in light mode the panel fell back to select2's stock look: a white box, a bare search field with a black border, and select2's blue highlight. AND THE LANGUAGE NAMES WERE INVISIBLE. Each