:root{--site-bg:#1a1a1a;--site-chrome:#141414;--site-text:#ffffff;--site-accent:#dd9933;--site-accent-selected:#dd9933;--nav-text:#dddddd;--card-title:#dddddd;--muted:#777777;--panel:#0d0d0d;--panel-deep:#000000;--font-stack:'Helvetica Neue', Helvetica, -apple-system, BlinkMacSystemFont, Arial, sans-serif;--brand-size:28px;--brand-color:#ffffff;--brand-transform:none;--scroll-thumb:rgba(255,255,255,.45);--scroll-thumb-hover:rgba(255,255,255,.75);--header-h:81px;--footer-h:120px;--content-inset:280px} /* --- global skeleton (main.css) ------------------------------------------ */ *,*::before,*::after{box-sizing:border-box} html,body{ overflow-x:auto; overflow-y:hidden; height:100%; margin:0; } body{ background:var(--site-bg); color:var(--site-text); font-family:var(--font-stack); /* A column of header, content, footer. The content takes what is left, which is the point: the height used to be calc(100vh - header - footer) against a --header-h of exactly 81px, and that constant was a promise the header could not keep. One nav item it held; five, and the brand wrapped, the header grew, and the strip ran under the footer. Nothing measures the header now because nothing has to. */ display:flex; flex-direction:column; } .body-architect{ border:0; flex:1 1 auto; min-height:0; } /* The fixed-viewport contract above -- no vertical scroll, content sized to exactly one screen -- belongs to the horizontal strip, and the strip is a desktop layout. Every mobile block below stacks its content into a column TALLER than the viewport, so the contract has to be lifted here or that content is unreachable and paints over the footer. Same opt-out the grid layout takes further down; expressed twice because this one is a width, not a class on . */ @media (max-width:767px){ html,body{overflow-x:hidden} /* The content area scrolls on a narrow screen too, so the brand and the menu stay reachable without scrolling back up for them. Releasing the page instead -- which this did before the footer had to stay put -- left the header at the top of a long document, minutes away on a phone. */ .body-architect{overflow-y:auto} } /* --- navigation, style A: vertical overlay (main.css) -------------------- A fixed column down the left that sits transparently OVER the horizontally scrolling images. Both nav styles ship; each site picks one, which is why both exist in the live markup with Elementor hiding the unused one. On ernestrdickerson.com the horizontal bar is the chosen style, so this computes to display:none there. ------------------------------------------------------------------------- */ .nav-architect{ /* Fixed, so the images scroll underneath it. No background of its own — the menu floats over the artwork rather than sitting on a panel, and opacity .95 is what makes it read as part of the image rather than a layer on top. Measured on alexrivera.vegas. */ position:fixed; top:0; left:50px; width:200px; height:100%; min-height:550px; z-index:998; opacity:.95; background:transparent; display:flex; } .nav-container-architect{ position:absolute; left:10px; top:50%; margin-top:-275px; height:550px; width:200px; z-index:10; display:flex; flex-direction:column; justify-content:space-between; text-align:left; overflow:visible; } .nav-container-top-architect{ height:100%; display:flex; flex-direction:column; position:static; } /* 38px pitch: 18px line plus a 20px gap. */ .nav-architect .selection-architect, .nav-architect .selection-architect-selected{margin-bottom:20px} .nav-architect h4{ margin:0; font-size:16px; font-weight:300; line-height:18px; } .nav-architect a{color:var(--nav-text);text-decoration:none} .nav-architect .selection-architect-selected a{color:var(--site-accent-selected)} /* With the vertical nav the content runs full height — there is no bar. */ /* The vertical nav is fixed and out of flow, so it takes no room in the column and needs no special case -- it used to need one only because the calc it replaced subtracted a header that was not there. */ /* --- navigation, style B: horizontal bar --------------------------------- The conventional top menu. Measured from the live page: 81px on #141414, brand 28px bold, links 15px right-aligned. ------------------------------------------------------------------------- */ .site-header{ /* min-height, not height: 81px is what the live header measures with this brand and this many links, not a size the content must be cut down to. A hard height clipped the brand the moment the menu grew. */ min-height:var(--header-h); background:var(--site-chrome); display:flex; align-items:center; justify-content:space-between; /* The header itself does not wrap: brand left, menu right, at every width wide enough for both. Letting it wrap dropped the whole menu onto a full-width second row, which stops looking like a header. The menu wraps inside its own box instead. */ flex-wrap:nowrap; /* Never shrink. An explicit min-height REPLACES a flex item's automatic content-based minimum, so the 81px above is a floor flexbox is allowed to squeeze down to -- the very declaration meant to protect the header would license clipping it, with align-items:center splitting the overflow top and bottom. Chrome is not doing that here at any width or viewport height I can measure, because the content area absorbs the shrinking first. That is a fact about how the free space happens to distribute today, not a guarantee, and the header is chrome: it should keep its content whatever the column does. */ flex-shrink:0; padding:12px 55px; gap:24px; } .site-brand{display:flex;flex-direction:column;justify-content:center} .site-brand__name{ font-size:var(--brand-size); font-weight:400; line-height:1.2; color:var(--brand-color); text-transform:var(--brand-transform); } .site-brand__tagline{font-size:15px;color:var(--muted);line-height:1.4} .site-nav{ list-style:none; margin:0; padding:0; /* No display here on purpose. A display on the list would override the browser's own hiding of closed
content, and the panel would hang open on every narrow screen. Each size states its own: flex in the bar, none-until-open in the panel. */ align-items:stretch; flex-wrap:wrap; justify-content:flex-end; gap:0; /* Stretches to the header's height however tall that turns out to be, which is what keeps the filled-block selection spanning the full bar. A percentage height would resolve to auto now the header has no fixed one. */ align-self:stretch; } .site-nav li{display:flex} .site-nav a{ color:var(--nav-text); text-decoration:none; font-size:15px; text-transform:uppercase; padding:6px 10px; display:flex; align-items:center; } /* Current item, style A: recoloured label. */ .site-header.nav-selected--text .selection-architect-selected a{ color:var(--site-accent-selected); } /* Current item, style B: filled block, label reversed out. */ .site-header.nav-selected--block .selection-architect-selected a{ background:var(--site-accent-selected); color:#fff; } /* Both columns may shrink below their content width, which is what lets the menu wrap instead of pushing the brand off the bar. */ .site-brand,.site-nav{min-width:0} /* --- the menu, at two sizes ---------------------------------------------- One piece of markup: a
holding the same