/* ============================================================================ BRAND MODE ---------------------------------------------------------------------------- Momentum serves two businesses. The brand comes from the SIGNED SESSION, is stamped onto by app.js after unlock, and everything below is a token swap - no component is written twice. Viking's palette is sourced, not guessed: #242153 is the navy in VKS00001_VikingRollers_NAVYLogo_0626_PNG.png (5,350,840 opaque pixels of it) and it is also --color-foreground-rgb "36 33 83" on the live vikingrollers.com.au theme. Supporting greys and the image overlay come from that same theme. Viking uses Noto Sans throughout with no second family, and its button shape is a pill where TMG's is a clipped trapezoid. ============================================================================ */ :root[data-brand='viking'] { --charcoal: #242153; /* the dark ground: navy, not black */ --charcoal-soft: #1a1840; --cream: #f6f7f9; /* Viking's panel tint */ --paper: #ffffff; /* Viking's site is white, not warm */ --ink: #242153; /* body copy is the navy itself on the live site */ --ink-soft: #5c5a80; --ink-faint: #8d8bab; --rust: #242153; /* Viking has no accent colour - navy does it all */ --rust-deep: #1a1840; --rust-soft: #c9c7dd; --hairline: #e6e7e8; --hairline-dark: #3a3766; --navy: #242153; } /* Viking uses one family for everything. Setting it on the root lets every existing rule that names Montserrat or Archivo fall back to it. */ :root[data-brand='viking'] body, :root[data-brand='viking'] .greeting, :root[data-brand='viking'] .section-title, :root[data-brand='viking'] .item-name, :root[data-brand='viking'] .month-heading, :root[data-brand='viking'] .btn, :root[data-brand='viking'] .name, :root[data-brand='viking'] .wordmark { font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* The trapezoid is The Mat Group's signature. Viking's is a pill, so the clip is removed rather than recoloured - a navy trapezoid would read as TMG. */ :root[data-brand='viking'] .title-trapezoid, :root[data-brand='viking'] .headline-trapezoid { clip-path: none; border-radius: 22px; padding-left: 16px; padding-right: 20px; } :root[data-brand='viking'] .btn, :root[data-brand='viking'] .lockbtn, :root[data-brand='viking'] .spotlight-cta { border-radius: 24px; } :root[data-brand='viking'] .item, :root[data-brand='viking'] .month-card, :root[data-brand='viking'] .quick-actions a { border-radius: 10px; } /* The wordmark becomes the real lockup. The text stays in the markup for screen readers and for the moment before the image decodes. */ :root[data-brand='viking'] .name, :root[data-brand='viking'] #gate .wordmark { display: inline-block; text-indent: -9999px; overflow: hidden; background-image: url('/brand/viking-wordmark-white.png'); background-repeat: no-repeat; background-size: contain; background-position: left center; width: 152px; height: 30px; } :root[data-brand='viking'] #gate .wordmark { width: 208px; height: 42px; background-position: center; margin: 0 auto; } /* A quiet strip so a Viking user always knows whose tool this is, and that it belongs to the group. Hidden entirely for TMG. */ .brand-strip { display: none; } :root[data-brand='viking'] .brand-strip { display: block; background: #1a1840; color: #b9b7d8; font-size: 11.5px; letter-spacing: 0.3px; text-align: center; padding: 6px 0; } :root[data-brand='viking'] .brand-strip b { color: #ffffff; font-weight: 600; } /* The tier bar on the price list keeps its semantic colours in both brands - Distributor / Gold / RRP mean the same thing to both businesses, and recolouring them to navy would remove the one signal that stops a rep quoting the wrong tier. */