/* ========================================================================== Triumph Design System v3 — screen components -------------------------------------------------------------------------- v3 does NOT fork v2. It loads v2's tokens.css and pattern.css unchanged and adds the component layer for SCREENS a member or a guest actually uses: portals, account pages, member-facing web. Print and promo stay on v2. Data dashboards stay on design.greenvilletriumph.club. Link order, always: tokens.css → pattern.css → components.css The four rules this layer exists to enforce ------------------------------------------- 1. TWO GROUNDS. Navy and fog. Never a third tone as a section background. A panel is #fff on fog, or navy on navy. Nothing in between. 2. ONE CONTINUOUS FIELD. The weave is one field running the length of the page, not a texture restarted per section. See .field below. 3. NO BOX IN A BOX IN A BOX. A filled panel may hold text and controls. It may not hold another filled panel that holds another filled panel. Dividing rules, not nested cards. 4. COLOUR LIVES IN MARKS, NOT IN TYPE. Triumph Green and Lime never set type on a light surface; they fail contrast. Status colour goes in a swatch, a bar, or a mark, and the words stay navy. ========================================================================== */ /* -------------------------------------------------------------------------- 1. THE CONTINUOUS FIELD Every element that paints the weave starts its tile at its own top edge, so a page of stacked sections resets the pattern at every boundary and the tiles never meet. --field-y shifts each layer by that section's distance down the document, so the whole page reads as one field and only the ink changes at a seam. Pair with the alignField() helper in field.js. Without the JS this degrades to the old per-section behaviour; nothing breaks. -------------------------------------------------------------------------- */ .field { position: relative; isolation: isolate; overflow: hidden; } .field > * { position: relative; z-index: 1; } .field::before { content: ""; position: absolute; inset: 0; background: var(--brand-pattern-ink); -webkit-mask: var(--brand-weave) repeat; mask: var(--brand-weave) repeat; -webkit-mask-size: var(--brand-pattern-size); mask-size: var(--brand-pattern-size); -webkit-mask-position: 0 var(--field-y, 0px); mask-position: 0 var(--field-y, 0px); opacity: var(--field-o, .05); pointer-events: none; z-index: 0; } /* The two grounds. There is no third. */ .field-navy { --brand-pattern-ink: #ffffff; --field-o: .05; background: var(--navy); color: #fff; } .field-fog { --brand-pattern-ink: var(--navy); --field-o: .05; background: var(--fog); } /* Running text never sits on the pattern. Give any block of copy on a navy field this fill: on navy it is invisible as a shape, and all it does is stop the weave behind the words. */ .on-solid { background: var(--navy); } /* -------------------------------------------------------------------------- 2. APP BAR Mark, the name of the section you are in, and the member's initials. On a phone that is the whole bar, because the tab bar is the navigation. The lime rule is load-bearing: the bar and a navy hero carry the same weave, so without it the band has no edge. It also bookends the footer rule. -------------------------------------------------------------------------- */ .appbar { position: sticky; top: 0; z-index: 60; background: var(--navy); border-bottom: 2px solid var(--lime); isolation: isolate; overflow: hidden; transition: transform .28s cubic-bezier(.19,.9,.22,1); } .appbar::before { content: ""; position: absolute; inset: 0; background: #fff; -webkit-mask: var(--brand-weave) repeat; mask: var(--brand-weave) repeat; -webkit-mask-size: var(--brand-pattern-size); mask-size: var(--brand-pattern-size); opacity: .05; pointer-events: none; z-index: 0; } /* env() top inset: installed to a home screen this runs under the status bar. */ .appbar-in { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: calc(11px + env(safe-area-inset-top)) clamp(16px,4vw,40px) 11px; display: flex; align-items: center; gap: clamp(14px,2vw,26px); } .appbar-id { display: flex; align-items: center; gap: 11px; min-width: 0; } .appbar-id img { height: 30px; width: auto; display: block; flex: none; } .appbar-where { font-size: var(--text-xs, .9rem); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .appbar-nav { display: flex; gap: clamp(14px,1.7vw,24px); margin-left: auto; align-items: center; } .appbar-nav a { color: var(--ink-muted-navy); font-size: var(--text-xs, .9rem); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; text-decoration: none; transition: color .16s ease; } .appbar-nav a:hover, .appbar-nav a.on { color: #fff; } .appbar-avatar { flex: none; width: 34px; height: 34px; border-radius: var(--radius-full); background: var(--lime); color: var(--navy); font-size: var(--text-xs, .9rem); font-weight: 900; display: grid; place-items: center; letter-spacing: .02em; } /* Scrolling down gives the bar's height back to the content. */ .appbar.is-away { transform: translateY(-100%); } /* -------------------------------------------------------------------------- 3. DIVIDED GRID Cells share one hairline: the grid paints the rules with a 1px gap over a hairline ground, and the cells carry NO borders of their own. Two rules in the same place read as a smudge, and a bordered card inside a bordered grid is rule 3 broken. -------------------------------------------------------------------------- */ .grid-divided { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); } .grid-divided > * { background: var(--fog); border: 0; } /* On a navy field the rules are white-alpha and the cells are navy. */ .grid-divided.on-navy { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.13); } .grid-divided.on-navy > * { background: var(--navy); } .grid-divided.cols-3 { grid-template-columns: repeat(3,1fr); } .grid-divided.cols-fit { grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); } @media (max-width: 720px) { .grid-divided.cols-3 { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- 4. TILE Less is more: a heading and the ONE value someone came for, then Details. Every other fact belongs in the sheet. A tile is a