/* tls-demobar.css - the Turbo Link chrome strip that sits on top of every demo. The problem it solves: the demos (tenant websites, dashboards, client portals, app demos) are complete little worlds with their own headers, and once a visitor walked into one from a lander there was no way back to turbolinkstudio.com. Some carried a bespoke .demobar with one link, most carried nothing at all. Same contract as tls-topbar.css: every colour reads from a --tldemo-* property declared HERE, because each host demo defines its own --navy, --line, --card, --text with different meanings. The bar never inherits host tokens. It is also deliberately ONE look on every world: it is platform chrome, not the tenant's brand, and reading as a different layer is the point. Height is published as --tl-demobar-h on by tls-demobar.js, so host pages whose own header is sticky can offset off it instead of a magic number. Behaviour (the narrow-screen menu) is tls-demobar.js. */ .tl-demobar{ --tldemo-bg:#0e0f12; --tldemo-bg-2:#16181c; --tldemo-line:rgba(255,255,255,.13); --tldemo-text:#eceae4; --tldemo-muted:#9aa0aa; --tldemo-accent:#ff7a1e; --tldemo-accent-bright:#ffb066; --tldemo-deep:#b8430a; position:sticky; top:0; z-index:400; background:var(--tldemo-bg); border-bottom:1px solid var(--tldemo-line); color:var(--tldemo-text); font-family:"Hanken Grotesk","Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-size:13px; line-height:1; -webkit-font-smoothing:antialiased; } .tl-demobar-in{ display:flex; align-items:center; gap:12px; padding:0 16px; height:40px; max-width:1600px; margin-inline:auto; } /* the one link that answers "how do I get out of here" */ .tl-demobar-back{ display:inline-flex; align-items:center; gap:7px; flex:none; color:var(--tldemo-text); text-decoration:none; font-weight:600; letter-spacing:.005em; padding:6px 10px 6px 6px; margin-left:-6px; border-radius:7px; transition:background 180ms ease, color 180ms ease; } .tl-demobar-back:hover{ background:var(--tldemo-bg-2); color:#fff; } .tl-demobar-back svg{ width:13px; height:13px; flex:none; color:var(--tldemo-accent); } .tl-demobar-back b{ font-weight:600; } .tl-demobar-tag{ flex:none; background:linear-gradient(180deg,var(--tldemo-accent-bright),var(--tldemo-deep)); color:#17140f; font-size:9.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; padding:4px 8px; border-radius:999px; } .tl-demobar-note{ flex:none; color:var(--tldemo-muted); font-size:12.5px; white-space:nowrap; } /* The row is fixed-width apart from this line, so rather than let it shrink to "Trillium P..." it leaves whole. Which width that happens at depends on the page (the contractor Command Center carries the longest note AND two extras), so tls-demobar.js measures the real row and sets these instead of a guessed breakpoint doing it for every page at once. */ .tl-demobar.is-tight .tl-demobar-note{ display:none; } .tl-demobar.is-tighter .tl-demobar-extra{ display:none; } .tl-demobar-spacer{ margin-left:auto; } /* the nav set, same destinations as the marketing toolbar. Short labels: the bar is full bleed, but "For " on five items buys nothing here. */ .tl-demobar-links{ display:flex; align-items:center; gap:2px; flex:none; } .tl-demobar-links a{ color:var(--tldemo-muted); text-decoration:none; font-size:12.5px; font-weight:500; padding:7px 8px; border-radius:6px; white-space:nowrap; transition:color 160ms ease, background 160ms ease; } .tl-demobar-links a:hover{ color:var(--tldemo-text); background:var(--tldemo-bg-2); } .tl-demobar-links a.is-current{ color:var(--tldemo-text); } .tl-demobar-links a.is-current::after{ content:""; display:block; height:2px; margin-top:5px; border-radius:2px; background:var(--tldemo-accent); } .tl-demobar-extra{ flex:none; color:var(--tldemo-muted); font-size:12.5px; font-weight:500; background:none; border:0; padding:7px 9px; border-radius:6px; cursor:pointer; font-family:inherit; text-decoration:none; transition:color 160ms ease, background 160ms ease; } .tl-demobar-extra:hover{ color:var(--tldemo-text); background:var(--tldemo-bg-2); } .tl-demobar-price{ flex:none; display:inline-flex; align-items:center; color:var(--tldemo-text); text-decoration:none; font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:7px; border:1px solid var(--tldemo-line); transition:border-color 160ms ease, color 160ms ease, background 160ms ease; } .tl-demobar-price:hover{ border-color:var(--tldemo-accent); color:#fff; background:var(--tldemo-bg-2); } .tl-demobar-cta{ flex:none; display:inline-flex; align-items:center; background:linear-gradient(180deg,#ff8c34,var(--tldemo-deep)); color:#fff; text-decoration:none; font-size:12.5px; font-weight:700; padding:8px 14px; border-radius:7px; box-shadow:0 1px 0 rgba(255,255,255,.16) inset; transition:filter 160ms ease, transform 160ms ease; } .tl-demobar-cta:hover{ filter:brightness(1.08); } .tl-demobar-cta:active{ transform:translateY(1px); } /* the narrow-screen toggle. Hidden until the inline row stops fitting. */ .tl-demobar-more{ display:none; flex:none; align-items:center; gap:6px; background:none; border:1px solid var(--tldemo-line); border-radius:7px; color:var(--tldemo-text); font-family:inherit; font-size:12.5px; font-weight:600; padding:7px 11px; cursor:pointer; transition:border-color 160ms ease; } .tl-demobar-more:hover{ border-color:var(--tldemo-accent); } .tl-demobar-more svg{ width:9px; height:9px; transition:transform 180ms ease; } .tl-demobar-more[aria-expanded="true"] svg{ transform:rotate(180deg); } .tl-demobar :focus-visible{ outline:2px solid var(--tldemo-accent); outline-offset:2px; border-radius:6px; } /* ---- narrow: the link row becomes a panel under the bar ---- */ @media (max-width:1120px){ .tl-demobar-more{ display:inline-flex; } .tl-demobar-links{ display:none; /* anchored under the Menu button, not stretched across the viewport: a full-width sheet reads as a takeover on a 768px tablet. */ position:absolute; top:100%; right:12px; left:auto; width:min(250px, calc(100vw - 24px)); flex-direction:column; align-items:stretch; gap:2px; background:var(--tldemo-bg); border:1px solid var(--tldemo-line); border-top:0; border-radius:0 0 11px 11px; padding:8px; box-shadow:0 22px 40px -22px rgba(0,0,0,.9); max-height:min(70vh,420px); overflow:auto; } .tl-demobar-links.is-open{ display:flex; } .tl-demobar-links a{ padding:11px 12px; font-size:14px; } .tl-demobar-links a.is-current::after{ display:none; } .tl-demobar-links a.is-current{ color:var(--tldemo-accent-bright); } } @media (max-width:720px){ .tl-demobar-in{ gap:10px; padding:0 12px; } .tl-demobar-note{ display:none; } .tl-demobar-extra{ display:none; } } /* Phone. Everything optional is already gone by here, so the last of the room comes out of the chrome itself: the wordmark loses "Studio", the Demo pill goes, and the Menu button drops to its chevron (the button keeps an aria-label, so hiding the word costs nothing to a screen reader). What survives is the whole point of the bar: a way back, a way to everything else, Pricing, and the CTA. */ @media (max-width:480px){ .tl-demobar-in{ gap:8px; padding:0 10px; } .tl-demobar-tag{ display:none; } .tl-demobar-back span{ display:none; } .tl-demobar-back b{ display:inline; } .tl-demobar-more span{ display:none; } .tl-demobar-more{ gap:0; padding:8px 10px; } .tl-demobar-links{ right:10px; width:min(250px, calc(100vw - 20px)); } .tl-demobar-price{ padding:7px 10px; } .tl-demobar-cta{ padding:8px 11px; } } @media (prefers-reduced-motion:reduce){ .tl-demobar *{ transition:none !important; } } /* Anchor jumps land under the strip, not behind it. No demo page defines scroll-padding of its own, and this sheet is linked last in every head, so one rule covers the tenant sites and the app demos alike. */ html:has(.tl-demobar){ scroll-padding-top: var(--tl-demobar-h, 41px); }