/* ============================================================================ fm-shell.css — brand page shell (v2, matches the approved mockup) ---------------------------------------------------------------------------- Serves top-fm.php, left_column-fm.php, breadcrumb-fm.php and footer-fm.php, all of which render ONLY when `fm_shell = 1` in foremost_responsive.ini. With the flag off none of these classes appear in the document, so this sheet is inert and safe to deploy ahead of switching the flag on. SCOPING: everything is prefixed .fms- (foremost shell) or nested under .fms-body, which only top-fm.php sets on . No Bootstrap or legacy class is redefined outside that scope. STRUCTURE (two rows, one rule): [ acting-as band — master sessions only ] row 1 logo · product search · delivery site · account menu row 2 navigation · basket <- the only border ========================================================================== */ :root, .fms-body, .fms-flyout, .fms-foot{ --fms-blue1:#0061fe; --fms-blue2:#0039c7; --fms-blue4:#87c2ff; --fms-blue5:#e8effd; --fms-navy:#121d3c; --fms-neon:#ccff00; --fms-white:#fff; --fms-navy60:rgba(18,29,60,.6); --fms-navy30:rgba(18,29,60,.3); --fms-r-btn:60px; --fms-r-box:30px; --fms-r-sm:16px; --fms-font:'Ambit','Open Sans','Helvetica Neue',Arial,sans-serif; /* ---------------------------- WIDTH MODEL ------------------------------ One declaration point for every horizontal measurement in the shell and the page body. See the PAGE WIDTH MODEL section below for the rules that consume these. Changing a number here changes it everywhere. */ --fms-gutter:48px; /* content edge -> viewport edge */ --fms-inset:24px; /* content edge -> text edge */ --fms-w-shell:1600px; /* head, nav row and footer. NEVER varies. */ --fms-w-wide:1600px; --fms-w-standard:1200px; --fms-w-narrow:720px; --fms-w-page:var(--fms-w-standard); /* overridden by the body tier class */ } /* Tier selection. libs\Model::widthTierClass() emits one of these onto alongside .fms-body; absent means standard. Two classes beat the one-class token block above, so the override lands. */ .fms-body.fms-w-narrow { --fms-w-page:var(--fms-w-narrow) } .fms-body.fms-w-standard{ --fms-w-page:var(--fms-w-standard) } .fms-body.fms-w-wide { --fms-w-page:var(--fms-w-wide) } @media (max-width:1400px){ :root,.fms-body,.fms-flyout,.fms-foot{ --fms-gutter:32px } } @media (max-width:767px){ :root,.fms-body,.fms-flyout,.fms-foot{ --fms-gutter:16px; --fms-inset:16px } } .fms-body{font-family:var(--fms-font);color:var(--fms-navy)} /* Self-sizing wrap, used both INSIDE .fms-head (row 1) and standalone for the inactive-site warnings further down the page. Standalone it must size itself, because .container.body-background is full-bleed; nested inside .fms-head it must NOT, or the gutter is subtracted twice — see the nested reset below. */ .fms-wrap{ width:min(var(--fms-w-shell), 100% - var(--fms-gutter) * 2); margin-inline:auto; padding-inline:var(--fms-inset); box-sizing:border-box; } /* Already inside a width-owning box: fill it, do not re-apply the gutter. */ .fms-body .fms-head .fms-wrap{width:100%;max-width:none} /* ===================== ACTING-AS BAND (master only) ====================== */ .fms-mst{background:none;color:#fff} .fms-mst__in{width:calc(100% - var(--fms-inset) * 2);margin:10px auto 0;padding:9px var(--fms-inset); background:var(--fms-navy);border-radius:var(--fms-r-box);box-sizing:border-box; display:flex;align-items:center;gap:14px;flex-wrap:wrap} .fms-mst__dot{width:9px;height:9px;border-radius:50%;background:var(--fms-neon);flex-shrink:0} .fms-mst__lbl{font-size:11px;letter-spacing:1.1px;text-transform:uppercase;color:var(--fms-neon);font-weight:700} .fms-mst__who{font-size:14px;font-weight:700} .fms-mst__meta{font-size:12px;color:rgba(255,255,255,.7)} .fms-mst__act{margin-left:auto;display:flex;gap:8px} .fms-mst__btn,.fms-mst__btn:visited{font-size:12px;padding:5px 15px;border-radius:var(--fms-r-btn); text-decoration:none;background:var(--fms-neon);color:var(--fms-navy);font-weight:700;white-space:nowrap} .fms-mst__btn:hover{background:#fff;color:var(--fms-navy);text-decoration:none} .fms-mst__btn--ghost,.fms-mst__btn--ghost:visited{background:transparent;color:#fff; border:1px solid rgba(255,255,255,.45);font-weight:400} .fms-mst__btn--ghost:hover{background:rgba(255,255,255,.12);color:#fff} /* =========================== BLUE UTILITY STRIP ========================== */ /* Corporate's pattern: a slim blue1 band across the very top, then a white header beneath it. Carries the account menu and, for master sessions, the acting-as context. */ /* ONE blue band carrying the utility line, the logo and both searches, with its BOTTOM corners rounded upward — the mirror of the footer's top corners. Full-bleed left and right; the white nav row sits beneath it. */ .fms-head{ background:var(--fms-blue1); color:#fff; border-radius:0 0 var(--fms-r-box) var(--fms-r-box); padding-bottom:6px; /* The head owns its width rather than inheriting it from .container.body-background, which is now full-bleed. Without this the blue band would run edge to edge and the rounded bottom corners would not read. */ width:min(var(--fms-w-shell), 100% - var(--fms-gutter) * 2); margin-inline:auto; box-sizing:border-box; } .fms-strip{background:none;color:#fff} .fms-strip__in{ width:100%;margin:0 auto; min-height:38px;padding-inline:var(--fms-inset); display:flex;align-items:center;gap:16px;flex-wrap:wrap; box-sizing:border-box; border-bottom:1px solid rgba(255,255,255,.16); } .fms-strip__left{display:flex;align-items:center;gap:16px;min-width:0;font-size:12px} .fms-strip__right{display:flex;align-items:center;gap:14px;margin-left:auto} .fms-strip a,.fms-strip a:visited{color:rgba(255,255,255,.9);text-decoration:none;font-size:12px} .fms-strip a:hover{color:var(--fms-neon);text-decoration:none} .fms-strip__item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .fms-strip__icon{width:13px;height:13px;fill:currentColor;flex-shrink:0} /* ================================ ROW 1 ================================= */ .fms-r1{ display:flex;align-items:center;gap:18px; min-height:84px; background:none; padding:14px 0; } /* No tile. /assets/img/Foremost-logo.png is white text on transparent, so it sits directly on blue1. Customer logos are managed to suit — if one is supplied on white it will need replacing, not accommodating here. */ .fms-logo{ flex:0 0 auto;width:180px;height:50px; display:flex;align-items:center; background:none;padding:0; } .fms-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain; object-position:left center;display:block} /* fallback wordmark when the customer has no logo (anonymous visitors) */ .fms-logo__word{font-size:26px;font-weight:300;letter-spacing:-.6px;line-height:1;color:var(--fms-blue1)} @media (max-width:767px){ .fms-logo__word{font-size:20px} } /* field with a floating label */ .fms-fld{position:relative} .fms-fld__lab{position:absolute;top:-17px;left:4px;background:none;padding:0;font-size:10px; font-weight:700;letter-spacing:.6px;color:rgba(255,255,255,.78);text-transform:uppercase;z-index:2} .fms-fld__in{width:100%;height:46px;padding:0 44px 0 18px;border:2px solid #fff; border-radius:var(--fms-r-btn);font-family:var(--fms-font);font-size:14px;color:var(--fms-navy); background:#fff;outline:none;transition:box-shadow .15s} .fms-fld__in::placeholder{color:var(--fms-navy30)} /* Focus is the 2px border turning neon, and nothing else. The ring was a 45% alpha neon shadow sitting outside a neon border, so the field carried two rims of the same colour at different opacities and the outer one blended into the blue header. box-shadow is stated as none rather than left unset, so Bootstrap's own blue focus glow on .form-control cannot appear instead. */ .fms-fld__in:focus{border-color:var(--fms-neon);box-shadow:none} /* Every one of these inputs also carries Bootstrap's .form-control, which sets border-radius:4px and its own focus box-shadow at EXACTLY the same specificity as the two rules above. Which one applies therefore depends on stylesheet load order rather than on intent, which is why the product search rendered square while the site selector — whose rules are one class deeper — kept its pill. Restating both a class higher settles it wherever the sheets happen to load. The .fms-f-prod radius rule in the mobile block below is the same collision patched at one breakpoint; it is now redundant but harmless. */ .fms-fld__in.form-control{border-radius:var(--fms-r-btn)} .fms-fld__in.form-control:focus{border-color:var(--fms-neon);box-shadow:none} .fms-fld__ic{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:32px;height:32px; border:0;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer; color:var(--fms-blue1);padding:0;z-index:2} .fms-fld__ic svg{width:17px;height:17px;fill:currentColor} .fms-fld__ic:focus-visible{outline:2px solid var(--fms-blue1);outline-offset:2px;border-radius:50%} .fms-f-prod{flex:1 1 340px;min-width:220px} /* A real width, not a flex leftover: selectize measures its container when it initialises, so "whatever is left over" produces a collapsed control. */ .fms-f-site{flex:0 0 340px;width:340px;min-width:280px} /* the native select is the no-JS fallback — init.js selectizes .user_branch_list */ .fms-f-site .fms-fld__in{padding-right:38px;cursor:pointer;-webkit-appearance:none;appearance:none; text-overflow:ellipsis; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%230061fe' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 16px center} /* ---- selectize-rendered branch picker ---- */ .fms-f-site .selectize-control{width:100%} /* Selectize COPIES the original select's classes onto .selectize-control and .selectize-input — so both also carry .form-control and .input-sm, and Bootstrap's .input-sm sets a 3px radius that flattened the pill. Both elements are targeted, and the radius is forced. */ .fms-f-site .selectize-control, .fms-f-site .selectize-control.form-control, .fms-f-site .selectize-control.input-sm{ width:100%;height:auto;padding:0;border:0;background:none;box-shadow:none; border-radius:var(--fms-r-btn) !important; } .fms-f-site .selectize-input, .fms-f-site .selectize-input.form-control, .fms-f-site .selectize-input.input-sm, .fms-f-site .selectize-control .selectize-input{ display:block;width:100%; min-height:46px;height:auto;padding:11px 40px 11px 18px; border:2px solid #fff; border-radius:var(--fms-r-btn) !important; background:#fff;box-shadow:none; font-family:var(--fms-font);font-size:14px;line-height:1.4;color:var(--fms-navy); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; box-sizing:border-box; } /* the original