), so the rule above never reached them: they stayed 1440px wide and ran straight under the fixed .tab-split-aside, which starts 400px in from the right. Both bars right-align their most important element — the next-step card puts the "Waiting on you" / "In our hands" status pill at the right end of .nsc-top (justify-content:space-between), the archived bar puts its "Download Suite" / "My Events" buttons there. Measured at 1440x900 on the Designs step: the pill ran x=911→1228 while the aside began at x=1040, so 188px of "IN OUR HANDS — NOTHING NEEDED FROM YOU" was hidden behind the At a Glance card and the client read "IN OUR HANDS — NOTHIN". Owner reported it 2026-07-31. Padding goes on the OUTER bar, not on .nsc-inner: the bar draws the white background and bottom rule full-bleed and must keep doing so, while .nsc-inner is max-width:1080px;margin:0 auto and re-centres itself inside whatever width is left — so the card stays visually centred on the free space exactly like the tab content above it. Putting the padding on .nsc-inner instead would squeeze the text to 660px and leave the pill where it was. #portalFooter deliberately not included: it is position:fixed with z-index:100 against the aside's z-index:10, so it paints OVER the aside rather than under it, and it has no content in the overlap band. */ body.portal-aside-visible #nextStepCard{ padding-right:420px; box-sizing:border-box; } /* #archivedBanner needs !important and cannot lose it: the element carries an inline `padding:12px 24px` shorthand in client-portal.html, and an inline shorthand outranks any id selector here, so the plain rule above silently did nothing for it. Verified by mutation — drop the !important and the "Download Suite" button goes straight back under the aside. */ body.portal-aside-visible #archivedBanner{ padding-right:420px!important; box-sizing:border-box; } /* Concept tab was display:flex — keep as block */ #tab-concept.active{ display:block!important; height:auto; min-height:calc(100vh - 56px); } /* Aside: floating card — no border lines, card sits on cream page background */ .tab-split-aside{ display:block; position:fixed; right:20px; top:calc(var(--hdr-h,120px) + var(--beta-h,0px) + 20px); bottom:20px; width:380px; overflow:hidden!important; overflow-y:hidden!important; overscroll-behavior:none; scrollbar-width:none; background:var(--ivory); border:0.5px solid rgba(45,16,21,.14); border-radius:0; z-index:10; } .tab-split-aside::-webkit-scrollbar{display:none} /* ── AT A GLANCE — FORMAT B ADAPTIVE ── */ .gs-glance{height:100%;display:flex;flex-direction:column;background:var(--ivory);overflow:hidden;} .gs-glance-hdr{ flex-shrink:0;display:flex;align-items:center;justify-content:space-between; padding:.7em 1.2em;border-bottom:2px solid var(--onyx-dk); } .gs-glance-hdr-title{ font-family:'Montserrat',sans-serif;font-size:.58em;letter-spacing:.26em; text-transform:uppercase;font-weight:700;color:var(--onyx-dk); } .gs-glance-hdr-tag{ font-family:'Montserrat',sans-serif;font-size:.52em;letter-spacing:.12em; text-transform:uppercase;font-weight:700;color:var(--white); background:var(--sage-dk);padding:.28em .7em; } /* 2026-07-21: overflow-y:auto (was hidden) — the JS font-fit binary search that used to squeeze content into view is retired; long content scrolls. */ .gs-glance-body{flex:1;display:flex;flex-direction:column;overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(58,53,48,.25) transparent;} .gs-glance-body::-webkit-scrollbar{width:5px;} .gs-glance-body::-webkit-scrollbar-thumb{background:rgba(58,53,48,.25);border-radius:0;} .gs-glance-body::-webkit-scrollbar-track{background:transparent;} /* ── PRE-BRIEFING RAIL — "The Ledger", colourway C3 ─────────────────────── Owner choice, 2026-07-31 (docs/BRIEFING_SUBMIT_COLOURWAYS.html). Deliberately its OWN namespace rather than restyled .gs-* : those classes serve the full At a Glance shown AFTER a briefing is submitted, and that panel must keep working untouched. The only .gs-* class this rail borrows is .gs-next-line, so the sentence inherits the owner's typography choice from one rule instead of a copy that can drift. Cream ground, bloodstone ruling, ink as TYPE ONLY — never a dark field. */ .pbr{height:100%;display:flex;flex-direction:column;background:var(--ivory);overflow:hidden;} .pbr-hdr{ flex-shrink:0;display:flex;align-items:baseline;justify-content:space-between;gap:.75em; padding:.95em 1.25em;border-bottom:2px solid var(--bloodstone); } .pbr-hdr-ttl{ font-family:'Montserrat',sans-serif;font-size:.58em;letter-spacing:.24em; text-transform:uppercase;font-weight:700;color:var(--onyx); } .pbr-hdr-tag{ font-family:'Cormorant Garamond',serif;font-size:1.05em;font-style:italic;color:var(--bloodstone); } .pbr-date{ flex-shrink:0;display:flex;align-items:baseline;justify-content:space-between;gap:.75em; padding:.85em 1.25em;border-bottom:1px solid rgba(146,38,48,.1); } /* .62 not .45 — ink on ivory needs alpha >= .60 to clear AA 4.5:1 (solved numerically, verified with scripts/contrast-check.mjs). */ .pbr-date-l{ font-family:'Montserrat',sans-serif;font-size:.55em;letter-spacing:.22em; text-transform:uppercase;font-weight:700;color:rgba(45,16,21,.62); } .pbr-date-d{font-family:'Libre Baskerville',serif;font-size:.88em;color:var(--onyx);} .pbr-stages{flex:1;display:flex;flex-direction:column;min-height:0;overflow-y:auto;} .pbr-stage{ flex:none;display:grid;grid-template-columns:1.9em 1fr auto;gap:.9em;align-items:baseline; padding:1.05em 1.25em;border-bottom:1px solid rgba(146,38,48,.1); } /* The three unstarted stages are quiet but must stay READABLE — they are information, not disabled controls, so they hold AA against the ivory. */ .pbr-n,.pbr-st{ font-family:'Montserrat',sans-serif;font-size:.55em;font-weight:600; letter-spacing:.18em;color:rgba(45,16,21,.62); } .pbr-st{letter-spacing:.22em;text-transform:uppercase;} .pbr-nm{font-family:'Libre Baskerville',serif;font-size:.88em;color:rgba(45,16,21,.62);} .pbr-stage.live{background:rgba(146,38,48,.05);border-bottom-color:rgba(146,38,48,.16);} .pbr-stage.live .pbr-n,.pbr-stage.live .pbr-st{color:var(--bloodstone);} .pbr-stage.live .pbr-nm{color:var(--onyx);} .pbr-open{ flex:none;padding:0 1.25em 1.15em; background:rgba(146,38,48,.05);border-bottom:1px solid rgba(146,38,48,.16); } /* Layout only — the face, size and upright style come from .gs-next-line. */ .pbr-open .gs-next-line{ display:block;padding:0 0 .85em;border-bottom:none;margin:0; } .pbr-begin{ display:inline-flex;align-items:center;gap:.6em; font-family:'Montserrat',sans-serif;font-size:.62em;font-weight:600; letter-spacing:.24em;text-transform:uppercase; color:var(--ivory);background:var(--bloodstone); border:none;border-radius:0;padding:1.1em 1.9em;cursor:pointer; transition:background .3s; } .pbr-begin:hover{background:var(--bloodstone-dk);} .pbr-meta{ margin-top:auto;flex-shrink:0;display:flex;justify-content:space-between;gap:.75em; padding:.9em 1.25em;border-top:1px solid rgba(146,38,48,.12); font-family:'Montserrat',sans-serif;font-size:.58em;letter-spacing:.16em; text-transform:uppercase;color:rgba(45,16,21,.62); } /* "What happens next" line (2026-07-21) 2026-07-31: was Cormorant Garamond italic .82em. Two problems, both visible side-by-side in artifacts/glance-next-line-typography-options.html: the most important line on the card was its SMALLEST text (13px vs the .95-.96em Libre Baskerville venue and cell values right beneath it), and Cormorant's short x-height made it read smaller still than 13px suggests. Full-sentence italic also reads as a caption — in this card italic is the accent voice for names and palettes (.gs-cal-venue, .gs-swatch-name), not for a status. Now matches the card's other content text and sits upright. Keep the padding in em so it scales with the size. */ .gs-next-line{ font-family:'Libre Baskerville',serif;font-size:.95em;font-style:normal; line-height:1.45; color:var(--onyx-dk);padding:.7em 1.5em;border-bottom:1px solid var(--border-d); display:flex;align-items:center;justify-content:space-between;gap:.8em;flex:none; } .gs-next-line .gs-link-chip{flex-shrink:0;} .gs-glance::after{content:'';display:block;flex-shrink:0;height:.7em;} .gs-sec{flex:none;padding:.7em 1.2em;border-bottom:1px solid var(--border-d);} .gs-sec:last-child{border-bottom:none;flex:1;} .gs-sec-lbl{ font-family:'Montserrat',sans-serif;font-size:.5em;letter-spacing:.22em; text-transform:uppercase;font-weight:700;color:rgba(58,53,48,.3);margin-bottom:.6em; } /* Calendar */ .gs-cal{ display:flex;align-items:center;gap:.7em;padding:.6em .8em; background:var(--white);border:1px solid var(--border-d);margin-bottom:.5em; } .gs-cal-box{text-align:center;flex-shrink:0;} .gs-cal-month{ font-family:'Montserrat',sans-serif;font-size:.5em;letter-spacing:.18em; text-transform:uppercase;font-weight:700;background:var(--bloodstone-dk); color:var(--white);display:block;padding:.22em .7em; } .gs-cal-day{ font-family:'Libre Baskerville',serif;font-size:1.75em;font-weight:600; color:var(--onyx-dk);line-height:1;display:flex;align-items:center;justify-content:center; padding:.2em .4em .1em;border:1px solid var(--border-d);border-top:none; } .gs-cal-info{flex:1;min-width:0;} .gs-cal-dow{ font-family:'Montserrat',sans-serif;font-size:.5em;letter-spacing:.16em; text-transform:uppercase;font-weight:700;color:var(--sage);margin-bottom:.2em; } .gs-cal-venue{ font-family:'Libre Baskerville',serif;font-size:.95em; font-style:italic;color:var(--onyx);line-height:1.28; } /* Event grid */ .gs-grid{ display:grid;grid-template-columns:1fr 1fr;gap:1px; background:var(--border-d);border:1px solid var(--border-d); } .gs-cell{background:var(--white);padding:.48em .65em;} .gs-cell-full{grid-column:1/-1;} .gs-cell-lbl{ font-family:'Montserrat',sans-serif;font-size:.5em;letter-spacing:.16em; text-transform:uppercase;font-weight:700;color:rgba(58,53,48,.3);margin-bottom:.16em; } .gs-cell-val{font-family:'Libre Baskerville',serif;font-size:.96em;color:var(--onyx);} .gs-swatches{display:flex;align-items:center;gap:5px;margin-top:.15em;} .gs-swatch{ width:14px;height:14px;border-radius:50%; border:1px solid rgba(0,0,0,.15);flex-shrink:0;display:inline-block; } .gs-swatch-name{ font-family:'Libre Baskerville',serif;font-size:.58em; font-style:italic;color:rgba(58,53,48,.55); } /* Link rows (Creative Direction, file opens) */ .gs-link-row{ display:flex;align-items:center;justify-content:space-between; padding:.48em .65em;background:var(--white);border:1px solid var(--border-d); margin-bottom:.32em;text-decoration:none;cursor:pointer;transition:background .12s; } .gs-link-row:last-child{margin-bottom:0;} .gs-link-row:hover{background:var(--ivory-dk,#F0EBE3);} .gs-link-name{ font-family:'Libre Baskerville',serif;font-size:.8em;color:var(--onyx);flex:1;min-width:0; } .gs-link-chip{ font-family:'Montserrat',sans-serif;font-size:.5em;letter-spacing:.1em; text-transform:uppercase;font-weight:700;padding:.22em .6em;flex-shrink:0; } .gs-link-chip.done{color:var(--success);background:rgba(45,80,80,.08);} .gs-link-chip.open{color:var(--sage);background:rgba(64,100,95,.08);} /* File rows */ .gs-file-row{ display:flex;align-items:center;gap:.52em; padding:.46em 0;border-bottom:1px solid var(--border); color:var(--onyx);text-decoration:none; } .gs-file-row:last-child{border-bottom:none;} .gs-file-icon{ width:1.65em;height:1.65em;background:var(--white);border:1px solid var(--border-d); display:flex;align-items:center;justify-content:center;flex-shrink:0; font-family:'Montserrat',sans-serif;font-size:.5em;font-weight:700;color:var(--sage); } .gs-file-name{ flex:1;font-family:'Libre Baskerville',serif;font-size:.82em; color:var(--onyx);min-width:0; } .gs-file-arrow{ font-family:'Montserrat',sans-serif;font-size:.54em; color:rgba(58,53,48,.55);flex-shrink:0; } /* Pieces */ .gs-pieces-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4em;} .gs-count-pills{display:flex;} .gs-count-pill{ font-family:'Montserrat',sans-serif;font-size:.64em;letter-spacing:.08em; text-transform:uppercase;font-weight:700;padding:.32em .72em; border:1px solid var(--border-d);margin-right:-1px;background:var(--white); } .gs-count-pill.approved{color:var(--success);background:rgba(45,80,80,.06);} .gs-count-pill.review{color:var(--bloodstone);} .gs-count-pill.progress{color:var(--gold,#B8935A);} .gs-piece{ display:flex;align-items:center;gap:.52em;height:2.05em; padding:0 .6em;background:var(--white);border-left:2px solid transparent; margin-bottom:2px;cursor:pointer;transition:background .1s; } .gs-piece:last-child{margin-bottom:0;} .gs-piece:hover{background:var(--ivory-dk,#F0EBE3);} .gs-piece.approved{border-left-color:rgba(45,80,80,.45);} .gs-piece.review{border-left-color:rgba(146,38,60,.45);} .gs-piece.progress{border-left-color:rgba(184,147,90,.55);} .gs-piece-name{ flex:1;font-family:'Libre Baskerville',serif;font-size:.74em;color:var(--onyx); min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .gs-piece-badge{ font-family:'Montserrat',sans-serif;font-size:.5em;letter-spacing:.1em; text-transform:uppercase;font-weight:700;padding:.22em .55em;flex-shrink:0; } .gs-piece-badge.approved{color:var(--success);background:rgba(45,80,80,.08);} .gs-piece-badge.review{color:var(--bloodstone);background:rgba(146,38,60,.07);} .gs-piece-badge.progress{color:#9A6A20;background:rgba(184,147,90,.1);} .gs-empty-note{ font-family:'Libre Baskerville',serif;font-size:.72em; color:rgba(45,16,21,.55);font-style:italic;line-height:1.6;padding:.4em 0; } .gs-cal-countdown{font-size:.7em;color:var(--gold,#B8935A);letter-spacing:.04em;margin-top:.2em;} .gs-sec-ts{float:right;font-size:.72em;color:rgba(45,16,21,.38);font-weight:400;letter-spacing:.02em;font-family:'Montserrat',sans-serif;font-style:normal;} .gs-rev-dots{display:inline-flex;gap:3px;align-items:center;margin-left:5px;vertical-align:middle;flex-shrink:0;} .gs-rev-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:rgba(45,16,21,.28);} .gs-rev-dot.used{background:#C4A882;} .gs-rev-dot.at-limit{background:var(--bloodstone,#922630);} /* ── Suite Progress Ring ── */ .gs-ring-wrap{display:flex;align-items:center;gap:.85em;padding:.3em 0 .1em;} .gs-ring-svg{flex-shrink:0;width:3.4em;height:3.4em;} .gs-ring-track{fill:none;stroke:rgba(45,16,21,.09);stroke-width:5;} .gs-ring-bar{fill:none;stroke:var(--success);stroke-width:5;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;} .gs-ring-count{font-family:'Montserrat',sans-serif;font-size:.88em;font-weight:700;fill:var(--onyx-dk);text-anchor:middle;dominant-baseline:middle;} .gs-ring-of{font-family:'Montserrat',sans-serif;font-size:.32em;font-weight:600;letter-spacing:.06em;fill:rgba(58,53,48,.45);text-anchor:middle;} .gs-ring-info{flex:1;min-width:0;} .gs-ring-stat{font-family:'Montserrat',sans-serif;font-size:.62em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--onyx-dk);margin-bottom:.25em;} .gs-ring-line{font-family:'Libre Baskerville',serif;font-size:.92em;color:rgba(58,53,48,.65);line-height:1.55;} /* ── Docs grid: 5→3 cols in narrower main column ── */ .tab-panel.active .docs-grid{ grid-template-columns:repeat(3,1fr)!important; padding:20px 64px 28px!important; gap:14px!important; } /* 5 cards: single row */ .tab-panel.active .docs-grid[data-count="5"]{grid-template-columns:repeat(5,1fr)!important;} .tab-panel.active .docs-section-hdr{ padding:18px 64px 14px!important; } .tab-panel.active .doc-card{ aspect-ratio:auto!important; padding:22px 18px 20px!important; min-height:0!important; } .tab-panel.active .doc-big-num{ font-size:2.6rem!important; margin-bottom:0!important; } .tab-panel.active .doc-title{ font-size:var(--text-md)!important; margin-bottom:6px!important; } .tab-panel.active .doc-sub{ font-size:var(--text-ui)!important; line-height:1.6!important; } .tab-panel.active .doc-status-tag{ font-size:.63rem!important; margin-bottom:10px!important; } /* ── Brandbook cards: tighter in narrower main column ── */ .tab-panel.active .brandbook-grid{ padding:36px 28px; gap:28px; max-width:none; } .tab-panel.active .bb-meta{ padding:26px 22px 22px; } .tab-panel.active .bb-meta-top{ gap:12px; margin-bottom:18px; } .tab-panel.active .bb-piece-name{ font-size:1.1rem; } .tab-panel.active .bb-status-pill{ font-size:var(--text-ui); padding:8px 13px; } .tab-panel.active .bb-piece-sub{ font-size:.72rem; } .tab-panel.active .bb-piece-desc{ padding:12px 14px; } .tab-panel.active .bb-actions{ gap:8px; } .tab-panel.active .bb-action-approve, .tab-panel.active .bb-action-revise{ padding:13px 6px; font-size:.71rem; } .tab-panel.active .bb-file-btns{ margin-top:16px; } .tab-panel.active .bb-file-btn{ padding:9px 16px; font-size:.78rem; } } /* ── Pending compact row (no file released yet) ── */ .bb-pending-row{ grid-column:1/-1; display:flex;align-items:center;justify-content:space-between; padding:18px 28px;background:#fff; border:1px solid rgba(45,16,21,.08);gap:20px; transition:background .18s; } .bb-pending-row:hover{background:rgba(64,100,95,.025);} .bb-pending-row+.bb-pending-row{border-top:none;} .bb-pending-row+.bb-pending-row{margin-top:-1px;} .bb-pr-left{display:flex;align-items:center;gap:22px;flex:1;min-width:0;} .bb-pr-num{ font-family:'Montserrat',sans-serif;font-size:var(--text-micro);letter-spacing:.22em; color:rgba(64,100,95,.35);font-weight:700;min-width:22px;flex-shrink:0; } .bb-pr-info{display:flex;flex-direction:column;gap:4px;min-width:0;} .bb-pending-row .bb-piece-name{font-size:.98rem!important;font-style:normal!important;} .bb-pr-specs{ font-family:'Montserrat',sans-serif;font-size:var(--text-xs);color:var(--sage); font-weight:300;letter-spacing:.05em; } @media(max-width:600px){ .bb-pending-row{flex-wrap:wrap;gap:10px;} .bb-pr-num{display:none;} } /* ── Hide reCAPTCHA v3 badge (disclosure in portal footer) ── */ .grecaptcha-badge{visibility:hidden!important;} /* ── L-04: WCAG AA contrast — sage text on ivory requires ≥4.5:1 ── */ /* --sage:#40645F ≈3.8:1 on #FAF6EE — use --sage-dk (#2D6A4F ≈5.9:1) for text */ .fld-lbl,.sec-num,.pkg-lbl,.hdr-client-label,.hdr-ref, .dp-bundled-tag,.dp-bar-clear,.pal-mood,.submit-note,.suc-card-lbl, .login-fld label,.login-hint,.login-legal,.status-step span, .suite-title-block p,.bsp-fld-lbl,.rev-meta,.lang-lbl,.feeling-name, .check-txt,.check-sub,.bsp-hero-eyebrow,.bsp-hero-sub, .bsp-status-date,.bsp-readonly-sub{color:var(--onyx)}.col-label-name{color:var(--sage-dk)} /* ── EFFECT: Checkbox spring bounce ── */ .check-box{transition:background .2s,border-color .2s,transform .28s cubic-bezier(.34,1.56,.64,1)!important} .check-item.chk .check-box{transform:scale(1.2) rotate(-4deg)} .check-item:not(.chk) .check-box{transform:scale(1) rotate(0deg)} .check-mark{transition:opacity .15s .04s,transform .22s .04s cubic-bezier(.34,1.56,.64,1)!important} .check-item.chk .check-mark{transform:scale(1)} .check-item:not(.chk) .check-mark{transform:scale(0)} /* ── EFFECT: In-progress dot pulse glow ── */ .item-sdot.in_progress{animation:px-glow-sage 1.8s ease-out infinite} .ds-spill-dot.progress{animation:px-glow-gold 1.8s ease-out infinite} @keyframes px-glow-sage{ 0%{box-shadow:0 0 0 0 rgba(64,100,95,.6)} 70%{box-shadow:0 0 0 6px rgba(64,100,95,0)} 100%{box-shadow:0 0 0 0 rgba(64,100,95,0)} } @keyframes px-glow-gold{ 0%{box-shadow:0 0 0 0 rgba(184,147,90,.65)} 70%{box-shadow:0 0 0 6px rgba(184,147,90,0)} 100%{box-shadow:0 0 0 0 rgba(184,147,90,0)} } /* ── EFFECT: Design card hover lift ── */ .item-card{transition:transform .2s cubic-bezier(0.22,0.61,0.36,1),box-shadow .2s,border-color .2s,background .2s!important} /* ═══════════════════════════════════════════════════════════════════ Migrated from inline