/* ============================================================ TownSuite.com 2026 — shared design system Strict brand: TownSuite blue family + orange/green/red dots, Dax type. Light/dark themes via [data-theme] on . ============================================================ */ @font-face{ font-family:'Dax'; src:url('fonts/dax-regular.woff2') format('woff2'), url('fonts/dax-regular.ttf') format('truetype'), url('fonts/dax-regular.otf') format('opentype'); font-weight:400 900; font-style:normal; font-display:swap; } :root{ /* brand constants */ --ts-blue:#00578E; --ts-blue-deep:#003C63; --ts-blue-mid:#6B95BE; --ts-blue-soft:#D8E0ED; --ts-orange:#E48D1A; --ts-green:#2DA343; --ts-red:#E03A3E; /* AA-contrast TEXT variants of the brand accents — the vivid hues above fail 4.5:1 as small text on light surfaces, so use these wherever a brand colour is applied to text/icons (KPIs, statuses, amounts) rather than as a fill */ --ts-orange-ink:#A35F0D; --ts-green-ink:#1F7A33; --ts-red-ink:#C2272B; /* light theme */ --bg:#FAFBFD; --bg2:#EFF3F8; --surface:#FFFFFF; --surface2:#F3F6FA; --ink:#13212D; --ink2:#4C5D6C; --ink3:#5E6E7C; --line:#DCE4EC; --line2:#C9D5E0; --accent:#00578E; --accent-strong:#004A79; --accent-ink:#FFFFFF; --accent-soft:#D8E0ED; --accent-tint:#E9EFF6; --halo:rgba(0,87,142,.10); --shadow-1:0 1px 2px rgba(7,25,40,.06),0 4px 14px rgba(7,25,40,.06); --shadow-2:0 2px 6px rgba(7,25,40,.08),0 18px 44px rgba(7,25,40,.12); --shadow-3:0 8px 24px rgba(7,25,40,.14),0 32px 80px rgba(7,25,40,.18); --nav-bg:rgba(250,251,253,.82); --dashboard-glow:rgba(0,87,142,.16); color-scheme:light; } [data-theme="dark"]{ --bg:#071420; --bg2:#0A1B2A; --surface:#0D2032; --surface2:#122A3F; --ink:#E9F0F6; --ink2:#A8BBCA; --ink3:#8DA1B2; --line:#1C3850; /* brighter brand TEXT variants for dark surfaces */ --ts-orange-ink:#E9A23F; --ts-green-ink:#46C26A; --ts-red-ink:#F0686C; --line2:#27465F; /* emblem cerulean (#00578E) raised for dark — derived in OKLCH from the emblem hue, kept richer/deeper than a pale sky blue so it stays on-brand against the navy. Authored as sRGB hex (not oklch) so colour-contrast tooling and older browsers resolve it correctly; #43A1E7 ≈ oklch(0.685 0.135 244), #73BFFC ≈ oklch(0.78 0.115 244). */ --accent:#43A1E7; --accent-strong:#73BFFC; --accent-ink:#06131D; --accent-soft:#0F3A58; --accent-tint:#0C2C45; --halo:rgba(67,161,231,.16); --shadow-1:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.3); --shadow-2:0 2px 6px rgba(0,0,0,.35),0 18px 44px rgba(0,0,0,.42); --shadow-3:0 8px 24px rgba(0,0,0,.45),0 32px 80px rgba(0,0,0,.5); --nav-bg:rgba(7,20,32,.78); --dashboard-glow:rgba(77,159,214,.30); color-scheme:dark; } *{box-sizing:border-box;} html{scroll-behavior:smooth;overflow-anchor:none;} html,body{margin:0;padding:0;} body{ background:var(--bg); color:var(--ink); overflow-anchor:none; font-family:'Dax','Source Sans 3',system-ui,sans-serif; font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; transition:background .35s ease,color .35s ease; overflow-x:hidden; } img{max-width:100%;display:block;} a{color:inherit;} button{font-family:inherit;} ::selection{background:var(--ts-blue);color:#fff;} .ts-skip{position:absolute;left:-9999px;top:0;background:var(--ts-blue);color:#fff;padding:10px 18px;border-radius:0 0 10px 0;z-index:300;} .ts-skip:focus{left:0;} /* visually-hidden text — read by screen readers / crawlers, invisible on screen */ .ts-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;} /* ---------------- type scale ---------------- */ .ts-display{ font-weight:900; font-size:clamp(44px,7.2vw,96px); line-height:.98; letter-spacing:-.022em; /* tight line-height overshoots the border box; when the reveal transform promotes this to a compositing layer (iOS Safari), the top ascenders get clipped. Pad the box and pull it back with a matching negative margin so layout is unchanged. */ padding:.12em 0; margin:-.12em 0; text-wrap:balance; } .ts-h2{ font-weight:800; font-size:clamp(30px,4vw,52px); line-height:1.04; letter-spacing:-.018em; padding:.12em 0; margin:-.12em 0; text-wrap:balance; } .ts-h3{font-weight:700;font-size:clamp(20px,2vw,25px);line-height:1.2;margin:0;} .ts-kicker{ display:inline-flex;align-items:center;gap:10px; font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase; color:var(--accent);margin:0 0 18px; } .ts-kicker::before{content:"";width:9px;height:9px;background:var(--accent);transform:rotate(45deg);border-radius:1.5px;flex:none;} .ts-lede{font-size:clamp(17px,1.5vw,21px);line-height:1.6;color:var(--ink2);max-width:620px;margin:18px 0 0;text-wrap:pretty;} .ts-accent{color:var(--accent);} /* ---------------- layout ---------------- */ .ts-wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,48px);} .ts-sec{position:relative;padding:clamp(72px,9vw,130px) 0;} .ts-sec--tint{background:var(--bg2);} /* soft blue wash band (light mode); falls back to the neutral tint in dark */ .ts-sec--wash{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 13%,var(--bg)) 0%,color-mix(in srgb,var(--accent) 16%,var(--bg)) 50%,color-mix(in srgb,var(--accent) 8%,var(--bg)) 100%);} [data-theme="dark"] .ts-sec--wash{background:var(--bg2);} .ts-center{text-align:center;} .ts-center .ts-lede{margin-left:auto;margin-right:auto;} .ts-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center;} /* ---------------- brand atoms ---------------- */ /* connect-the-dots motif: tilted squares */ .ts-dots{display:inline-flex;gap:6px;align-items:center;} .ts-dots i{display:block;width:9px;height:9px;transform:rotate(45deg);border-radius:1.5px;} .ts-dots i:nth-child(1){background:var(--ts-orange);} .ts-dots i:nth-child(2){background:var(--ts-green);} .ts-dots i:nth-child(3){background:var(--ts-red);} .ts-pill{ display:inline-flex;align-items:center;gap:9px; font-size:14.5px;font-weight:600;letter-spacing:.02em; border:1.5px solid var(--line2);border-radius:100px; padding:8px 18px;background:var(--surface);color:var(--ink2); } .ts-pill--accent{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:var(--accent-tint);color:var(--accent);} .ts-pill .ts-maple{width:15px;height:15px;} .ts-maple{display:inline-block;flex:none;fill:var(--ts-red);} .ts-btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font-weight:700;font-size:16.5px;letter-spacing:.01em; min-height:52px;padding:0 28px;border-radius:14px; border:1.5px solid transparent;cursor:pointer;text-decoration:none; transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease; white-space:nowrap; } .ts-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px;} .ts-btn--primary{background:var(--ts-blue);color:#fff;box-shadow:0 10px 26px var(--halo);} [data-theme="dark"] .ts-btn--primary{background:var(--accent);color:var(--accent-ink);} .ts-btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px var(--halo);} .ts-btn--ghost{background:transparent;color:var(--ink);border-color:var(--line2);} .ts-btn--ghost:hover{border-color:var(--accent);color:var(--accent);} .ts-btn--link{background:none;border:none;color:var(--accent);padding:0;min-height:44px;} .ts-btn--link:hover{text-decoration:underline;text-underline-offset:5px;} .ts-btn .arr{transition:transform .18s ease;} .ts-btn:hover .arr{transform:translateX(4px);} .ts-cta-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:34px;} .ts-cta-row--center{justify-content:center;} /* ---------------- theme toggle ---------------- */ .ts-themer{ display:inline-flex;align-items:center;justify-content:center; width:46px;height:46px;border-radius:13px;cursor:pointer; border:1.5px solid var(--line2);background:var(--surface);color:var(--ink2); transition:border-color .18s,color .18s,transform .18s; } .ts-themer:hover{border-color:var(--accent);color:var(--accent);transform:rotate(-12deg);} .ts-themer svg{width:21px;height:21px;} .ts-themer .ic-moon{display:none;} [data-theme="dark"] .ts-themer .ic-moon{display:block;} [data-theme="dark"] .ts-themer .ic-sun{display:none;} /* ---------------- reveal animations ---------------- */ @media (prefers-reduced-motion: no-preference){ body[data-motion="on"] .ts-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);} body[data-motion="on"] .ts-reveal.is-in{opacity:1;transform:none;} body[data-motion="on"] .ts-reveal[data-delay="1"]{transition-delay:.1s;} body[data-motion="on"] .ts-reveal[data-delay="2"]{transition-delay:.2s;} body[data-motion="on"] .ts-reveal[data-delay="3"]{transition-delay:.3s;} body[data-motion="on"] .ts-reveal[data-delay="4"]{transition-delay:.4s;} } /* ---------------- depth cards ---------------- */ .ts-card{ position:relative; background:var(--surface); border:1.5px solid var(--line); border-radius:20px; padding:30px 28px; box-shadow:var(--shadow-1); transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; } .ts-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-2);border-color:color-mix(in srgb,var(--accent) 35%,var(--line));} .ts-card__ic{ width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center; background:var(--accent-tint);color:var(--accent);margin-bottom:18px; } .ts-card__ic svg{width:24px;height:24px;} .ts-card__t{font-weight:800;font-size:19px;margin:0 0 8px;letter-spacing:-.01em;} .ts-card__d{font-size:15.5px;color:var(--ink2);margin:0;line-height:1.55;} /* tilt (pointer depth) — JS sets --rx/--ry */ body[data-depth="on"] .ts-tilt{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform;} /* ---------------- nav (variant 1 top bar) ---------------- */ .ts-nav{ position:fixed;top:0;left:0;right:0;z-index:120; backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); background:var(--nav-bg); border-bottom:1px solid transparent; transition:border-color .25s,background .35s; } .ts-nav.is-scrolled{border-bottom-color:var(--line);} .ts-nav__in{display:flex;align-items:center;gap:28px;min-height:74px;} .ts-nav__logo{display:flex;align-items:center;gap:10px;text-decoration:none;} .ts-nav__logo img{height:44px;width:auto;} .ts-nav__links{display:flex;gap:6px;margin-left:auto;} .ts-nav__links a{ display:inline-flex;align-items:center;min-height:46px;padding:0 16px;border-radius:11px; text-decoration:none;font-weight:600;font-size:15.5px;color:var(--ink2); transition:color .15s,background .15s; } .ts-nav__links a:hover{color:var(--accent);background:var(--accent-tint);} .ts-nav__links a.is-active{color:var(--accent);} .ts-nav__cta{display:flex;align-items:center;gap:12px;} .ts-burger{display:none;} /* logo wordmark recolor in dark (gray paths get hard to read) */ [data-theme="dark"] .ts-nav__logo img, [data-theme="dark"] .ts-footer__logo img{filter:brightness(0) invert(.92);} /* mobile menu */ .ts-mmenu{ position:fixed;inset:0;z-index:200;background:var(--bg); display:none;flex-direction:column;padding:24px; } .ts-mmenu.is-open{display:flex;} .ts-mmenu__top{display:flex;align-items:center;justify-content:space-between;} .ts-mmenu__links{display:flex;flex-direction:column;gap:4px;margin-top:40px;} .ts-mmenu__links a{ font-size:34px;font-weight:800;letter-spacing:-.02em;text-decoration:none;color:var(--ink); padding:14px 6px;border-radius:14px;display:flex;align-items:center;justify-content:space-between; } .ts-mmenu__links a:active{color:var(--accent);} .ts-mmenu__links a .n{font-size:14px;font-weight:700;color:var(--ink3);letter-spacing:.18em;} .ts-mmenu__foot{margin-top:auto;display:flex;flex-direction:column;gap:14px;} /* ---------------- journey rail (gamified progress) ---------------- */ .ts-rail{ position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:110; display:flex;flex-direction:column;align-items:center;gap:0; } .ts-rail__track{position:relative;width:3px;height:100%;} .ts-rail__stops{display:flex;flex-direction:column;gap:26px;position:relative;} .ts-rail__line{position:absolute;left:50%;top:8px;bottom:8px;width:2.5px;transform:translateX(-50%);background:var(--line2);border-radius:2px;overflow:hidden;} .ts-rail__fill{position:absolute;left:0;top:0;width:100%;height:0%;background:var(--accent);transition:height .25s ease-out;} .ts-rail__stop{ position:relative;z-index:2;width:17px;height:17px;border-radius:5px;transform:rotate(45deg); border:2.5px solid var(--line2);background:var(--bg);cursor:pointer;padding:0; transition:border-color .25s,background .25s,transform .25s; } .ts-rail__stop:hover{transform:rotate(45deg) scale(1.18);} .ts-rail__stop.is-done{border-color:var(--accent);background:var(--accent);} .ts-rail__stop.is-here{border-color:var(--accent);background:var(--bg);box-shadow:0 0 0 5px var(--halo);} .ts-rail__stop .lbl{ position:absolute;right:30px;top:50%;transform:translateY(-50%) rotate(-45deg);transform-origin:center; rotate:0deg; } .ts-rail__tip{ position:absolute;right:34px;top:50%;transform:translateY(-50%) rotate(-45deg); font-size:13px;font-weight:700;color:var(--ink);background:var(--surface); border:1px solid var(--line);box-shadow:var(--shadow-1); padding:5px 12px;border-radius:9px;white-space:nowrap; opacity:0;pointer-events:none;transition:opacity .15s; } .ts-rail__stop:hover .ts-rail__tip,.ts-rail__stop:focus-visible .ts-rail__tip{opacity:1;} .ts-rail__pct{ margin-top:20px;font-size:12.5px;font-weight:800;letter-spacing:.08em;color:var(--ink3); transform:none;text-align:center; } .ts-rail__pct b{display:block;font-size:15px;color:var(--accent);} .ts-rail.is-complete .ts-rail__pct b{color:var(--ts-green);} /* ---------------- hero (variant 1: statement) ---------------- */ .ts-hero{ position:relative;min-height:100svh;display:flex;align-items:center; padding:140px 0 90px;overflow:hidden; } .ts-hero__in{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;} .ts-hero__in .ts-display{max-width:14ch;} .ts-hero__lede{font-size:clamp(18px,1.7vw,22px);color:var(--ink2);max-width:640px;margin:26px 0 0;line-height:1.6;text-wrap:pretty;} .ts-nots{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px;} .ts-nots span{ font-size:14.5px;font-weight:600;color:var(--ink2); border:1.5px dashed var(--line2);border-radius:100px;padding:9px 18px; display:inline-flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--surface) 60%,transparent); } .ts-nots span::before{content:"✕";font-size:11px;font-weight:900;color:var(--ts-red);} .ts-nots--yes span{border-style:solid;border-color:color-mix(in srgb,var(--accent) 45%,var(--line2));color:var(--ink);background:var(--accent-tint);} .ts-nots--yes span::before{content:"✓";color:var(--accent);} .x-triplec__tag{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);} .ts-nots--yes b{font-weight:900;color:var(--accent);} .ts-tagline{font-size:clamp(19px,2vw,24px);font-weight:800;margin-top:34px;letter-spacing:-.01em;} .ts-tagline span{color:var(--accent);} /* hero depth layers: floating brand squares (parallax via JS --px/--py) */ .ts-depth{position:absolute;inset:0;z-index:1;pointer-events:none;} .ts-depth i{ position:absolute;display:block;border-radius:14%; transform:rotate(45deg) translate(calc(var(--px,0px)*var(--d,1)),calc(var(--py,0px)*var(--d,1))); transition:transform .2s ease-out; opacity:.9; } .ts-depth .sq-soft{background:var(--ts-blue-soft);} .ts-depth .sq-mid{background:var(--ts-blue-mid);} .ts-depth .sq-blue{background:var(--ts-blue);} .ts-depth .sq-orange{background:var(--ts-orange);} .ts-depth .sq-green{background:var(--ts-green);} .ts-depth .sq-red{background:var(--ts-red);} [data-theme="dark"] .ts-depth .sq-soft{background:#16344C;} [data-theme="dark"] .ts-depth .sq-mid{background:#2B567A;} .ts-hero__grid{ position:absolute;inset:-2% -2% 30%;z-index:0;pointer-events:none; background: linear-gradient(var(--line) 1px,transparent 1px), linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 75% 65% at 50% 30%,rgba(0,0,0,.5),transparent 70%); -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 30%,rgba(0,0,0,.5),transparent 70%); } .ts-hero__glow{ position:absolute;z-index:0;left:50%;top:-12%;width:1100px;height:680px;transform:translateX(-50%); background:radial-gradient(closest-side,var(--halo),transparent 72%); pointer-events:none; } .ts-scrollcue{ position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3; display:flex;flex-direction:column;align-items:center;gap:7px; font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3); text-decoration:none; } .ts-scrollcue i{display:block;width:9px;height:9px;border-right:2.5px solid var(--ink3);border-bottom:2.5px solid var(--ink3);transform:rotate(45deg);} @media (prefers-reduced-motion: no-preference){ body[data-motion="on"] .ts-scrollcue i{animation:cuebob 1.6s ease-in-out infinite;} } @keyframes cuebob{0%,100%{transform:rotate(45deg) translate(0,0);}50%{transform:rotate(45deg) translate(4px,4px);}} /* ---------------- stats strip ---------------- */ .ts-stats{border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line);background:var(--surface);} .ts-stats__in{display:grid;grid-template-columns:repeat(4,1fr);} .ts-stat{padding:34px 26px;text-align:center;border-left:1.5px solid var(--line);} .ts-stat:first-child{border-left:none;} .ts-stat__big{font-size:clamp(30px,3vw,42px);font-weight:900;letter-spacing:-.02em;color:var(--accent);line-height:1;} .ts-stat__lbl{font-size:14.5px;color:var(--ink2);margin-top:8px;} /* ---------------- sovereignty band (light follows the theme; deep navy in dark mode only) ---------------- */ .ts-sov{ position:relative;overflow:hidden; /* light: neutral tint — the blue wash moved to the modules chapter (.ts-sec--wash) */ background:var(--bg2); --sov-hl:var(--accent); --sov-ink2:var(--ink2); --sov-line:var(--line); } [data-theme="dark"] .ts-sov{ color:#E9F0F6; background:linear-gradient(180deg,#06192A 0%,#0A2740 55%,#06192A 100%); --sov-hl:#7FBCE6; --sov-ink2:#A9C2D6; --sov-line:rgba(255,255,255,.14); } .ts-sov .ts-kicker{color:var(--sov-hl);} .ts-sov .ts-kicker::before{background:var(--sov-hl);} .ts-sov .ts-lede{color:var(--sov-ink2);} .ts-sov__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:54px;} [data-theme="dark"] .ts-sov .ts-card{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.13);box-shadow:none;} [data-theme="dark"] .ts-sov .ts-card:hover{border-color:rgba(127,188,230,.5);box-shadow:0 18px 44px rgba(0,0,0,.35);} [data-theme="dark"] .ts-sov .ts-card__ic{background:rgba(127,188,230,.14);color:#7FBCE6;} .ts-sov .ts-card__d{color:var(--sov-ink2);} /* jurisdiction switch (interactive) */ .ts-juris{margin-top:60px;} .ts-juris__switch{ display:inline-flex;flex-wrap:wrap;justify-content:center;background:var(--surface);border:1.5px solid var(--line2); border-radius:100px;padding:5px;gap:4px; } [data-theme="dark"] .ts-juris__switch{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);} .ts-juris__switch button{ border:none;background:transparent;color:var(--sov-ink2);font-weight:700;font-size:15px; min-height:46px;padding:0 22px;border-radius:100px;cursor:pointer;transition:background .2s,color .2s; } .ts-juris__switch button.is-on{background:var(--accent);color:var(--accent-ink);} [data-theme="dark"] .ts-juris__switch button.is-on{background:#E9F0F6;color:#0A2740;} /* narrow screens: the pill wraps into a blob — switch to a clean stacked card instead */ @media (max-width:680px){ .ts-juris__switch{display:grid;grid-template-columns:1fr;width:100%;border-radius:18px;} .ts-juris__switch button{width:100%;border-radius:13px;padding:0 16px;} } .ts-juris__stage{ margin-top:38px;display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch; } .ts-juris__diagram{ position:relative;border-radius:22px;border:1.5px solid var(--sov-line); background:var(--surface);padding:34px;min-height:330px; display:flex;flex-direction:column;justify-content:center;gap:18px;overflow:hidden; } [data-theme="dark"] .ts-juris__diagram{background:rgba(255,255,255,.04);} .ts-juris__node{ display:flex;align-items:center;gap:14px;border-radius:14px;padding:14px 18px; background:var(--surface2);border:1.5px solid var(--line); font-weight:700;font-size:15.5px;transition:border-color .3s,background .3s,opacity .3s; } [data-theme="dark"] .ts-juris__node{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);} .ts-juris__node small{display:block;font-weight:500;font-size:13px;color:var(--sov-ink2);} .ts-juris__node .dotsq{width:12px;height:12px;transform:rotate(45deg);border-radius:2px;background:var(--ts-blue-mid);flex:none;} .ts-juris__link{ align-self:center;display:flex;align-items:center;gap:10px; font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; transition:color .3s; } .ts-juris__link::before,.ts-juris__link::after{content:"";width:36px;border-top:2.5px dashed currentColor;opacity:.7;} .ts-juris--exposed .ts-juris__link{color:var(--ts-red);} .ts-juris--layered .ts-juris__link{color:var(--ts-orange);} .ts-juris--sealed .ts-juris__link{color:var(--ts-green);} [data-theme="dark"] .ts-juris--exposed .ts-juris__link{color:#FF8A8D;} [data-theme="dark"] .ts-juris--layered .ts-juris__link{color:#F4B86A;} [data-theme="dark"] .ts-juris--sealed .ts-juris__link{color:#5ED47A;} .ts-juris--exposed .ts-juris__node.risk{border-color:rgba(224,58,62,.65);background:rgba(224,58,62,.12);} .ts-juris--layered .ts-juris__node.warn{border-color:rgba(228,141,26,.6);background:rgba(228,141,26,.1);} .ts-juris--layered .ts-juris__node.risk{border-color:rgba(224,58,62,.65);background:rgba(224,58,62,.12);} .ts-juris--sealed .ts-juris__node.safe{border-color:rgba(45,163,67,.6);background:rgba(45,163,67,.1);} .ts-juris__verdict{display:flex;flex-direction:column;gap:18px;justify-content:center;} .ts-juris__verdict h3{font-size:clamp(22px,2.4vw,30px);font-weight:800;margin:0;line-height:1.15;} .ts-juris__verdict p{margin:0;color:var(--sov-ink2);font-size:16.5px;line-height:1.6;} .ts-juris__badge{ display:inline-flex;align-items:center;gap:10px;align-self:flex-start; font-weight:800;font-size:14px;letter-spacing:.06em;border-radius:100px;padding:9px 18px; } .ts-juris--exposed .ts-juris__badge{background:rgba(224,58,62,.12);color:#C2272B;border:1.5px solid rgba(224,58,62,.45);} .ts-juris--layered .ts-juris__badge{background:rgba(228,141,26,.13);color:#A35F0D;border:1.5px solid rgba(228,141,26,.5);} .ts-juris--sealed .ts-juris__badge{background:rgba(45,163,67,.12);color:#1F7A33;border:1.5px solid rgba(45,163,67,.45);} [data-theme="dark"] .ts-juris--exposed .ts-juris__badge{background:rgba(224,58,62,.16);color:#FF9B9D;border-color:rgba(224,58,62,.5);} [data-theme="dark"] .ts-juris--layered .ts-juris__badge{background:rgba(228,141,26,.15);color:#F4B86A;border-color:rgba(228,141,26,.55);} [data-theme="dark"] .ts-juris--sealed .ts-juris__badge{background:rgba(45,163,67,.14);color:#7FE096;border-color:rgba(45,163,67,.5);} /* ---------------- modules / connected map ---------------- */ .ts-modmap{position:relative;margin-top:60px;} .ts-modmap__grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;} .ts-modmap svg.wires{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:visible;} .ts-modmap svg.wires path{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-dasharray:7 7;opacity:0;transition:opacity .25s;} .ts-modmap svg.wires path.is-live{opacity:.75;} .ts-mod{ position:relative;background:var(--surface);border:1.5px solid var(--line);border-radius:18px; padding:22px 20px;cursor:default;min-height:128px; transition:transform .22s,box-shadow .22s,border-color .22s; } .ts-mod:hover,.ts-mod.is-hot{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow-2);} .ts-mod__t{font-weight:800;font-size:16.5px;margin:14px 0 4px;letter-spacing:-.01em;} .ts-mod__d{font-size:13.5px;color:var(--ink2);margin:0;line-height:1.45;} .ts-mod__ic{width:38px;height:38px;border-radius:11px;background:var(--accent-tint);color:var(--accent);display:flex;align-items:center;justify-content:center;} .ts-mod__ic svg{width:20px;height:20px;} .ts-mod--core{ grid-column:span 2;background:var(--ts-blue);border-color:var(--ts-blue);color:#fff; } [data-theme="dark"] .ts-mod--core{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);} .ts-mod--core .ts-mod__d{color:rgba(255,255,255,.78);} [data-theme="dark"] .ts-mod--core .ts-mod__d{color:rgba(6,19,29,.75);} .ts-mod--core .ts-mod__ic{background:rgba(255,255,255,.16);color:#fff;} [data-theme="dark"] .ts-mod--core .ts-mod__ic{background:rgba(6,19,29,.14);color:var(--accent-ink);} .ts-mod--ai{border-style:dashed;border-color:color-mix(in srgb,var(--accent) 55%,var(--line));} .ts-modmap__hint{margin-top:22px;text-align:center;font-size:14px;color:var(--ink3);} /* ---------------- AI block ---------------- */ .ts-ai{border-radius:28px;border:1.5px solid var(--line);background:var(--surface);overflow:hidden;box-shadow:var(--shadow-1);} .ts-ai__in{display:grid;grid-template-columns:1.05fr .95fr;gap:0;} .ts-ai__copy{padding:clamp(34px,4vw,60px);min-width:0;} .ts-ai__chat{ background:var(--bg2);border-left:1.5px solid var(--line); padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:14px;justify-content:center;min-width:0; } .ts-bubble{ max-width:88%;border-radius:16px;padding:13px 17px;font-size:15px;line-height:1.5; box-shadow:var(--shadow-1); } .ts-bubble--user{align-self:flex-end;background:var(--ts-blue);color:#fff;border-bottom-right-radius:5px;} [data-theme="dark"] .ts-bubble--user{background:var(--accent);color:var(--accent-ink);} .ts-bubble--bot{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--ink);} .ts-bubble--bot b{color:var(--accent);} .ts-ai__meta{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;color:var(--ink3);letter-spacing:.04em;} .ts-ai__meta .ts-maple{width:13px;height:13px;} .ts-ai__checks{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:13px;} .ts-ai__checks li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--ink2);} .ts-ai__checks .chk{ flex:none;width:23px;height:23px;border-radius:50%;margin-top:1px; background:color-mix(in srgb,var(--ts-green) 16%,transparent);color:var(--ts-green); display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900; } /* ---------------- TownSuite Intelligence panel (realistic product mock) ---------------- */ .ts-ai__chat{align-items:stretch;position:relative;} /* icon intro overlay — shown on scroll-in, then fades into the chat */ .tsi-intro{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:var(--bg2);z-index:3;pointer-events:none;} .tsi-introic{width:88px;height:88px;color:var(--accent);opacity:0;transform:scale(.55) rotate(-12deg);} .ts-ai__chat.is-armed{overflow:hidden;} .ts-ai__chat.is-armed .tsi-intro{display:flex;} .ts-ai__chat.is-armed .tsi-carousel{opacity:0;} @media (prefers-reduced-motion: no-preference){ .ts-ai__chat.is-armed .tsi-carousel{transition:opacity .6s ease .15s;} .ts-ai__chat.is-armed .tsi-intro{transition:opacity .5s ease;} .ts-ai__chat.is-playing .tsi-introic{opacity:1;transform:scale(1) rotate(0);transition:opacity .5s ease,transform .7s cubic-bezier(.34,1.56,.64,1);} .ts-ai__chat.is-revealed .tsi-intro{opacity:0;} .ts-ai__chat.is-revealed .tsi-carousel{opacity:1;} } /* first-slide live conversation animation (JS adds .tsi-anim) */ .tsi-body.tsi-anim{overflow:hidden;} /* when a conversation is taller than the capped window (mobile), let the body scroll internally like the real TownSuite Intelligence widget — JS keeps the newest message in view via scrollTo. Overrides .tsi-anim's overflow on the y-axis only. */ .tsi-body.tsi-scroll{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;overscroll-behavior:contain;scrollbar-width:none;} .tsi-body.tsi-scroll::-webkit-scrollbar{width:0;height:0;} .tsi-body.tsi-anim .ts-bubble{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1);} .tsi-body.tsi-anim .ts-bubble.is-shown{opacity:1;transform:none;} .tsi-body.tsi-anim .ts-bubble.is-collapsed{height:0;min-height:0;margin:0;padding-top:0;padding-bottom:0;overflow:hidden;} /* composer caret while the demo "types" a question */ .tsi-input.is-typing{color:var(--ink);text-overflow:clip;} .tsi-input.is-typing::after{content:"";display:inline-block;width:1px;height:1em;margin-left:1px;background:currentColor;vertical-align:-2px;animation:tsiCaret 1s steps(1) infinite;} @keyframes tsiCaret{50%{opacity:0;}} .tsi-win{ width:100%;max-width:420px;margin:0 auto;align-self:center; display:flex;flex-direction:column; background:var(--surface);border:1px solid var(--line2);border-radius:14px; box-shadow:var(--shadow-2);overflow:hidden; } .tsi-head{ display:flex;align-items:center;gap:11px;flex:none;padding:13px 13px 13px 15px; background:var(--ts-blue);color:#fff; } [data-theme="dark"] .tsi-head{background:var(--accent);color:var(--accent-ink);} .tsi-badge{ width:34px;height:34px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.16);color:#fff; } [data-theme="dark"] .tsi-badge{background:rgba(6,19,29,.18);color:var(--accent-ink);} .tsi-head-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.15;} .tsi-head-t{font-weight:800;font-size:14px;letter-spacing:.01em;} .tsi-head-s{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.78);} [data-theme="dark"] .tsi-head-s{color:color-mix(in srgb,var(--accent-ink) 70%,transparent);} .tsi-head-x{ width:30px;height:30px;flex:none;border-radius:8px; background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center; } [data-theme="dark"] .tsi-head-x{background:rgba(6,19,29,.16);color:var(--accent-ink);} .tsi-ctx{ display:flex;align-items:center;gap:7px;flex:none;padding:8px 14px; background:var(--accent-tint);border-bottom:1px solid var(--line); font-weight:600;font-size:11.5px;color:var(--accent); } .tsi-dot{width:6px;height:6px;border-radius:50%;background:var(--ts-green);flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--ts-green) 18%,transparent);} .tsi-body{ padding:16px 14px 18px;display:flex;flex-direction:column;gap:13px;background:var(--bg); overflow-anchor:none; } .tsi-body .ts-bubble{overflow-anchor:none;} .tsi-hl{color:var(--accent);font-weight:600;} .tsi-act{ display:flex;width:fit-content;align-items:center;gap:8px;margin-top:13px; height:32px;padding:0 14px;border:1px solid var(--line2);border-radius:9px;cursor:default; background:transparent;color:var(--ink2);font-weight:600;font-size:13px; } .tsi-suggest{flex:none;padding:16px 12px 0;display:flex;flex-direction:column;gap:7px;background:var(--bg);} .tsi-suggest-lbl{font-weight:700;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);padding-left:2px;} .tsi-chips{display:flex;flex-wrap:wrap;gap:7px;} .tsi-chip{ display:inline-flex;align-items:center;padding:7px 12px;border:1px solid var(--line2);border-radius:18px; background:var(--surface);font-weight:600;font-size:12px;color:var(--ink2); } .tsi-composer{ flex:none;display:flex;align-items:center;gap:8px;padding:10px 12px; background:var(--surface);border-top:1px solid var(--line);margin-top:10px; } .tsi-input{ flex:1;min-width:0;border:1px solid var(--line2);border-radius:10px;padding:9px 12px; font-size:13px;color:var(--ink3);background:var(--bg); /* stay one line as the demo types — wrapping would grow the composer and shove the page down on each prompt, then back up on reset */ white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .tsi-send{ width:38px;height:38px;flex:none;border-radius:10px; background:var(--ts-blue);color:#fff;display:flex;align-items:center;justify-content:center; box-shadow:0 4px 12px var(--halo); } [data-theme="dark"] .tsi-send{background:var(--accent);color:var(--accent-ink);} .tsi-foot{ flex:none;display:flex;align-items:center;justify-content:center;gap:7px; text-align:center;font-size:10.5px;color:var(--ink3);padding:9px 12px;background:var(--surface); border-top:1px solid var(--line); } .tsi-foot .ts-maple{width:11px;height:11px;} .tsi-cap{margin:16px auto 0;text-align:center;font-size:12px;color:var(--ink3);font-style:italic;} .tsi-bal{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-top:7px;padding-top:7px;border-top:1px solid var(--line);font-size:14.5px;} .tsi-bal:first-of-type{margin-top:11px;} .tsi-bal span{color:var(--ink2);} .tsi-bal b{font-weight:800;color:var(--ink);white-space:nowrap;} /* swipeable carousel of example panels */ .tsi-carousel{position:relative;min-width:0;max-width:100%;overflow-anchor:none;} .tsi-track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-behavior:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;cursor:grab;min-width:0;overflow-anchor:none;overscroll-behavior:contain;} .tsi-track::-webkit-scrollbar{display:none;} .tsi-track:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} .tsi-slide{flex:0 0 100%;min-width:100%;scroll-snap-align:center;display:flex;justify-content:center;align-items:flex-start;padding:2px 2px 4px;overflow-anchor:none;} .tsi-dots{display:flex;justify-content:center;gap:8px;margin-top:16px;} .tsi-page{position:relative;width:8px;height:8px;padding:0;border:none;border-radius:50%;background:var(--line2);cursor:pointer;transition:width .2s ease,background .2s ease,border-radius .2s ease;} /* enlarge the clickable/tappable area to ≥24×24 (WCAG 2.5.8) without growing the visual dot */ .tsi-page::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;} .tsi-page:hover{background:var(--ink3);} .tsi-page.is-on{width:22px;border-radius:5px;background:var(--accent);} .tsi-page:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} /* visible, keyboard-operable Pause/Play toggle for the auto-advancing carousel */ .tsi-playpause{ display:inline-flex;align-items:center;justify-content:center; width:24px;height:24px;padding:0;margin-right:4px; border:1.5px solid var(--line2);border-radius:50%;background:var(--surface); color:var(--ink2);cursor:pointer;flex:none; transition:border-color .18s,color .18s,background .18s; } .tsi-playpause:hover{border-color:var(--accent);color:var(--accent);} .tsi-playpause:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} /* pause glyph (two bars) by default; play glyph (triangle) when paused */ .tsi-pp-ico{display:block;width:8px;height:9px; border-left:2.5px solid currentColor;border-right:2.5px solid currentColor;} .tsi-playpause.is-paused .tsi-pp-ico{ width:0;height:0;border:0; border-left:9px solid currentColor;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent; } /* ---------------- dashboard mock ---------------- */ .ts-dash{ position:relative;border-radius:18px;overflow:hidden; background:var(--surface);border:1.5px solid var(--line);box-shadow:var(--shadow-3); font-size:11.5px; } .ts-dash__bar{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--surface2);} .ts-dash__bar .winbtns{display:flex;gap:5px;} .ts-dash__bar .winbtns i{width:9px;height:9px;border-radius:50%;background:var(--line2);display:block;} .ts-dash__bar .addr{flex:1;max-width:300px;background:var(--bg);border:1px solid var(--line);border-radius:100px;padding:4px 13px;color:var(--ink3);font-weight:600;} .ts-dash__body{display:grid;grid-template-columns:148px 1fr;min-height:340px;} .ts-dash__side{border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:3px;background:var(--surface2);} .ts-dash__side .it{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;color:var(--ink2);font-weight:600;} .ts-dash__side .it i{width:7px;height:7px;transform:rotate(45deg);border-radius:1px;background:var(--line2);flex:none;} .ts-dash__side .it.on{background:var(--accent-tint);color:var(--accent);} .ts-dash__side .it.on i{background:var(--accent);} .ts-dash__main{padding:16px;display:flex;flex-direction:column;gap:14px;} .ts-dash__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;} .ts-dash__kpi{border:1px solid var(--line);border-radius:11px;padding:11px 12px;background:var(--surface);} .ts-dash__kpi .v{font-size:17px;font-weight:900;letter-spacing:-.02em;} .ts-dash__kpi .l{color:var(--ink3);font-weight:600;margin-top:2px;} .ts-dash__kpi .d{font-weight:800;margin-top:4px;font-size:10.5px;} .ts-dash__kpi .d.up{color:var(--ts-green-ink);} .ts-dash__kpi .d.dn{color:var(--ts-red-ink);} .ts-dash__chart{border:1px solid var(--line);border-radius:11px;padding:13px 14px 10px;background:var(--surface);} .ts-dash__chart .t{font-weight:800;margin-bottom:10px;color:var(--ink2);} .ts-dash__bars{display:flex;align-items:flex-end;gap:7px;height:84px;} .ts-dash__bars i{flex:1;border-radius:4px 4px 2px 2px;background:var(--ts-blue-soft);min-height:8%;} [data-theme="dark"] .ts-dash__bars i{background:#1D425E;} .ts-dash__bars i.hi{background:var(--ts-blue);} [data-theme="dark"] .ts-dash__bars i.hi{background:var(--accent);} .ts-dash__rows{display:flex;flex-direction:column;} .ts-dash__rows .r{display:flex;align-items:center;gap:10px;padding:7px 2px;border-top:1px solid var(--line);color:var(--ink2);font-weight:600;} .ts-dash__rows .r b{color:var(--ink);} .ts-dash__rows .tag{margin-left:auto;font-size:10px;font-weight:800;border-radius:100px;padding:2px 9px;} .ts-dash__rows .tag.ok{background:color-mix(in srgb,var(--ts-green) 15%,transparent);color:var(--ts-green);} .ts-dash__rows .tag.wait{background:color-mix(in srgb,var(--ts-orange) 16%,transparent);color:var(--ts-orange);} /* floating chip on dashboards */ .ts-float{ position:absolute;z-index:4;background:var(--surface);border:1.5px solid var(--line); border-radius:15px;padding:13px 17px;box-shadow:var(--shadow-2); font-size:13.5px;font-weight:700;display:flex;gap:10px;align-items:center; } .ts-float .ts-maple{width:15px;height:15px;} .ts-float small{display:block;font-weight:500;color:var(--ink2);font-size:12px;} /* annotation chips that straddle the hero app-shot frame — flat & full-size, never tilted */ .x-hero__stack>.ts-float{z-index:6;box-shadow:var(--shadow-2);} .x-float--top{left:8px;top:0;right:auto;bottom:auto;transform:translateY(calc(-100% - 14px));} .x-float--br{right:8px;bottom:0;left:auto;top:auto;transform:translateY(calc(100% + 14px));} [data-theme="dark"] .x-hero__stack>.ts-float{border-color:rgba(150,196,230,.18);box-shadow:0 18px 46px rgba(0,0,0,.55),0 0 0 1px rgba(150,196,230,.10);} /* ---------------- final CTA ---------------- */ .ts-final{position:relative;overflow:hidden;} .ts-final .ts-display{font-size:clamp(36px,5.4vw,72px);} /* ---------------- footer ---------------- */ .ts-footer{border-top:1.5px solid var(--line);background:var(--surface);padding:64px 0 40px;} .ts-footer__in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;} .ts-footer__logo{display:flex;align-items:center;gap:12px;} .ts-footer__logo img{height:46px;width:auto;} .ts-footer h2{font-size:13.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin:0 0 16px;} .ts-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;} /* comfortable touch targets without changing visual rhythm */ .ts-footer ul a{text-decoration:none;color:var(--ink2);font-size:15.5px;display:inline-block;padding:8px 0;margin:-8px 0;} .ts-footer ul a:hover{color:var(--accent);} .ts-footer__note{margin-top:18px;color:var(--ink2);font-size:14.5px;max-width:34ch;line-height:1.6;} .rtm{font-size:0.58em;vertical-align:0.42em;line-height:1;margin-left:0.03em;font-weight:400;} /* registered-trademark superscript — shared */ .ts-footer__base{display:flex;align-items:center;gap:16px;justify-content:space-between;flex-wrap:wrap;margin-top:54px;padding-top:24px;border-top:1px solid var(--line);color:var(--ink3);font-size:13.5px;} .ts-footer__legal{display:flex;align-items:center;gap:18px;} .ts-footer__legal a{color:var(--ink2);text-decoration:none;font-weight:600;} .ts-footer__legal a:hover{color:var(--accent);} /* ---------------- chat dock ---------------- */ .ts-chatfab{ position:fixed;right:24px;bottom:24px;z-index:150; display:flex;align-items:center;gap:11px; min-height:56px;padding:0 22px 0 16px;border-radius:100px;border:none;cursor:pointer; background:var(--ts-blue);color:#fff;font-weight:800;font-size:15.5px; box-shadow:0 14px 36px var(--halo),var(--shadow-2); transition:transform .2s,box-shadow .2s; } [data-theme="dark"] .ts-chatfab{background:var(--accent);color:var(--accent-ink);} .ts-chatfab:hover{transform:translateY(-3px);} .ts-chatfab .spark{width:22px;height:22px;} .ts-chat{ position:fixed;right:24px;bottom:24px;z-index:160;width:min(420px,calc(100vw - 32px)); border-radius:22px;background:var(--surface);border:1.5px solid var(--line); box-shadow:var(--shadow-3);overflow:hidden;display:none;flex-direction:column; height:min(640px,calc(100svh - 48px));max-height:calc(100svh - 48px); } .ts-chat__resize{ position:absolute;top:0;left:0;width:26px;height:26px;z-index:3;cursor:nwse-resize; display:flex;align-items:flex-start;justify-content:flex-start;padding:6px;color:rgba(255,255,255,.55); } .ts-chat__resize svg{width:13px;height:13px;} [data-theme="dark"] .ts-chat__resize{color:color-mix(in srgb,var(--accent-ink) 55%,transparent);} .ts-chat.is-open{display:flex;} .ts-chat__head{display:flex;align-items:center;gap:12px;padding:16px 18px;background:var(--ts-blue);color:#fff;} .ts-chat__badge{flex:none;width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;} .ts-chat__badge svg{width:22px;height:22px;} [data-theme="dark"] .ts-chat__head{background:var(--accent);color:var(--accent-ink);} .ts-chat__head .spark{width:24px;height:24px;flex:none;} .ts-chat__head b{font-size:16px;display:block;line-height:1.15;} .ts-chat__head small{font-size:12px;opacity:.85;display:flex;align-items:center;gap:6px;} .ts-chat__ctx{display:flex;align-items:center;gap:8px;padding:9px 18px;font-size:12.5px;font-weight:600;color:var(--ink2);background:var(--surface2);border-bottom:1px solid var(--line);} .ts-chat__head small .ts-maple{width:11px;height:11px;fill:currentColor;} .ts-chat__statusdot{width:8px;height:8px;border-radius:50%;background:#37D67A;box-shadow:0 0 0 3px rgba(55,214,122,.28);flex:none;} .ts-chat__x{margin-left:auto;background:rgba(255,255,255,.16);border:none;color:inherit;width:34px;height:34px;border-radius:10px;cursor:pointer;font-size:16px;font-weight:800;} .ts-chat__log{padding:18px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;flex:1;min-height:200px;} .ts-chat__chips{display:flex;flex-wrap:wrap;gap:9px;padding:0 18px 14px;} .ts-chat__chips button{ border:1.5px solid var(--line2);background:var(--surface);color:var(--accent); font-weight:700;font-size:13.5px;border-radius:100px;min-height:40px;padding:0 16px;cursor:pointer; transition:border-color .15s,background .15s; } .ts-chat__chips button:hover{border-color:var(--accent);background:var(--accent-tint);} .ts-chat__foot{padding:11px 18px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;font-size:11.8px;color:var(--ink3);} .ts-chat__foot .ts-maple{width:12px;height:12px;} .ts-typing{display:inline-flex;gap:6px;align-items:center;padding:14px 17px;}.ts-typing i{width:8px;height:8px;border-radius:1.5px;display:block;transform:translateY(0) rotate(45deg);animation:tsblink 1.1s infinite;} .ts-typing i:nth-child(1){background:var(--ts-orange);} .ts-typing i:nth-child(2){background:var(--ts-green);animation-delay:.18s;} .ts-typing i:nth-child(3){background:var(--ts-red);animation-delay:.36s;} @keyframes tsblink{0%,70%,100%{opacity:.25;transform:translateY(0) rotate(45deg);}35%{opacity:1;transform:translateY(-3px) rotate(45deg);}} /* free-text composer — mounts after the first prompt */ .ts-chat__composer{ display:flex;align-items:center;gap:8px; padding:10px 12px;border-top:1px solid var(--line); opacity:0;transform:translateY(6px); transition:opacity .3s ease,transform .3s ease; } .ts-chat__composer.is-on{opacity:1;transform:translateY(0);} .ts-chat__disclaimer{padding:0 16px 10px;font-size:11.5px;color:var(--ink3);text-align:center;} .ts-chat__composer input{ flex:1;min-width:0;min-height:42px;padding:0 16px; font-family:inherit;font-size:14.5px;color:var(--ink); background:var(--surface2);border:1.5px solid var(--line2);border-radius:100px; outline:none;transition:border-color .18s; } .ts-chat__composer input::placeholder{color:var(--ink3);} .ts-chat__composer input:focus{border-color:var(--accent);} .ts-chat__composer input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} /* ---- mobile: chat is full-screen, no resize, no input-zoom ---- */ @media (max-width:600px){ .ts-chat{ right:0 !important;bottom:0 !important;left:0 !important;top:0 !important; width:100% !important;height:100dvh !important;max-height:100dvh !important; border-radius:0 !important;border:none !important; } .ts-chat__resize{display:none !important;} .ts-chat__log{flex:1 1 auto;min-height:0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;} /* 16px inputs prevent iOS Safari from auto-zooming on focus */ .ts-chat__composer input{font-size:16px;min-height:46px;} /* finger-first: kill the double-tap-to-zoom gesture on every tappable chat control so taps register instantly and never zoom the page out from under the UX */ .ts-chat, .ts-chat button, .ts-chat input, .ts-chat__chips button, .ts-chat__composer button{touch-action:manipulation;} .ts-chat{overscroll-behavior:contain;} .ts-chat__head{padding-top:max(16px,env(safe-area-inset-top));} .ts-chat__composer{padding-bottom:max(10px,env(safe-area-inset-bottom));} } .ts-chat__composer button{ flex:none;width:42px;min-height:42px;border:none;border-radius:50%; background:var(--accent);color:var(--accent-ink); font-size:18px;font-weight:700;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center; transition:background .18s,transform .18s; } .ts-chat__composer button:hover{background:var(--accent-strong);transform:translateX(2px);} /* once the composer is in, the "Powered by" footer gives up its row */ .ts-chat.has-composer .ts-chat__foot{display:none;} /* ---------------- book-a-demo modal ---------------- */ .ts-dmodal{position:fixed;inset:0;z-index:2147483600;display:flex;align-items:center;justify-content:center;padding:20px; /* visibility is purely class-driven — no [hidden] attribute, no JS timers */ visibility:hidden;pointer-events:none;transition:visibility 0s .25s;} .ts-dmodal.is-open{visibility:visible;pointer-events:auto;transition:visibility 0s;} .ts-dmodal__scrim{position:absolute;inset:0;background:rgba(4,14,23,.55);opacity:0;transition:opacity .2s;} .ts-dmodal.is-open .ts-dmodal__scrim{opacity:1;} .ts-dmodal__panel{ position:relative;width:min(760px,100%);max-height:min(82dvh,760px); display:flex;flex-direction:column;overflow:hidden; background:var(--surface);border:1.5px solid var(--line);border-radius:22px;box-shadow:var(--shadow-3); opacity:0;transform:translateY(14px) scale(.98);transition:opacity .22s,transform .22s; } .ts-dmodal.is-open .ts-dmodal__panel{opacity:1;transform:translateY(0) scale(1);} .ts-dmodal__head{display:flex;align-items:center;gap:14px;padding:18px 20px;border-bottom:1px solid var(--line);} .ts-dmodal__hgroup{flex:1;min-width:0;} .ts-dmodal__hgroup b{display:block;font-size:18px;font-weight:800;letter-spacing:-.01em;} .ts-dmodal__hgroup small{display:block;color:var(--ink2);font-size:13.5px;margin-top:2px;} .ts-dmodal__back,.ts-dmodal__x{ flex:none;width:42px;min-height:42px;border:1.5px solid var(--line2);border-radius:12px; background:var(--surface);color:var(--ink);font-size:15px;cursor:pointer; display:flex;align-items:center;justify-content:center;transition:border-color .18s,color .18s; } .ts-dmodal__back:hover,.ts-dmodal__x:hover{border-color:var(--accent);color:var(--accent);} .ts-dmodal__body{padding:20px;overflow-y:auto;} .ts-dmodal__list{display:grid;gap:12px;} .ts-dmodal__item{ text-align:left;font-family:inherit;cursor:pointer; background:var(--surface2);border:1.5px solid var(--line);border-radius:14px;padding:15px 18px; transition:border-color .18s,background .18s,transform .18s; } .ts-dmodal__item:hover{border-color:var(--accent);background:var(--accent-tint);transform:translateY(-1px);} .ts-dmodal__item b{display:block;font-size:15.5px;font-weight:800;color:var(--accent);} .ts-dmodal__item span{display:block;font-size:13.5px;color:var(--ink2);margin-top:3px;line-height:1.45;} .ts-dmodal__form{display:flex;flex-direction:column;gap:16px;} .ts-dmodal__form .fld label{display:block;font-weight:700;font-size:14px;margin-bottom:7px;} .ts-dmodal__form .req{color:var(--ts-red);font-style:normal;} .ts-dmodal__form input[type="text"],.ts-dmodal__form input[type="email"],.ts-dmodal__form textarea{ display:block;width:100%;box-sizing:border-box;padding:10px 14px; font-family:inherit;font-size:15px;color:var(--ink); background:var(--surface2);border:1.5px solid var(--line2);border-radius:10px; outline:none;transition:border-color .18s;resize:vertical; } .ts-dmodal__form input:focus,.ts-dmodal__form textarea:focus{border-color:var(--accent);} .ts-dmodal__form input:focus-visible,.ts-dmodal__form textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} .ts-dmodal__chk{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px;cursor:pointer;} .ts-dmodal__chk input{width:16px;height:16px;accent-color:var(--accent);} .ts-dmodal__err{ border:1.5px solid rgba(224,58,62,.5);background:rgba(224,58,62,.1);color:var(--ts-red); border-radius:10px;padding:10px 14px;font-size:14px;font-weight:600; } .ts-dmodal__row{display:flex;gap:10px;flex-wrap:wrap;} .ts-dmodal__note{margin:0;font-size:12.5px;color:var(--ink3);} .ts-dmodal__done h3{margin:6px 0 12px;font-size:20px;font-weight:800;line-height:1.35;} .ts-dmodal__done .reqnum{color:var(--accent);text-decoration:underline;} .ts-dmodal__done p{margin:0 0 18px;color:var(--ink2);font-size:15px;} /* embed-hosting modal body */ .ts-dmodal__body--embed{position:relative;padding:10px 14px 14px;min-height:280px;} .ts-dmodal__frame{display:block;width:100%;height:280px;border:0;background:transparent;opacity:0;transition:opacity .25s;} .ts-dmodal.is-loaded .ts-dmodal__frame{opacity:1;} .ts-dmodal__loading{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:7px; } .ts-dmodal__loading i{width:9px;height:9px;border-radius:1.5px;display:block;transform:rotate(45deg);animation:tsblink 1.1s infinite;} .ts-dmodal__loading i:nth-child(1){background:var(--ts-orange);} .ts-dmodal__loading i:nth-child(2){background:var(--ts-green);animation-delay:.18s;} .ts-dmodal__loading i:nth-child(3){background:var(--ts-red);animation-delay:.36s;} .ts-dmodal.is-loaded .ts-dmodal__loading{display:none;} /* ============================================================ Variant 2 — Expedition (left rail nav, chapters) ============================================================ */ body.v2{--railw:228px;} .x-rail{ position:fixed;left:0;top:0;bottom:0;width:var(--railw);z-index:120; border-right:1.5px solid var(--line);background:var(--surface); display:flex;flex-direction:column;padding:24px 18px;gap:8px; transition:background .35s; } .x-rail__logo{display:flex;align-items:center;gap:10px;padding:4px 8px 22px;} .x-rail__logo img{width:100%;max-width:172px;height:auto;} [data-theme="dark"] .x-rail__logo img{filter:brightness(0) invert(.92);} .x-rail__ch{ position:relative;display:flex;align-items:center;gap:13px;text-decoration:none; border-radius:13px;padding:13px 12px;color:var(--ink2);transition:background .18s,color .18s; } .x-rail__ch .n{font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--ink3);width:22px;} .x-rail__ch .t{font-weight:700;font-size:15.5px;} .x-rail__ch .bar{position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:3px;background:transparent;} .x-rail__ch:hover{background:var(--accent-tint);color:var(--accent);} .x-rail__ch.is-active{color:var(--accent);background:var(--accent-tint);} .x-rail__ch.is-active .bar{background:var(--accent);} .x-rail__ch.is-done .n{color:var(--ts-green);} .x-rail__ch.is-done .n::after{content:" ✓";} .x-rail__prog{margin-top:auto;padding:14px 8px 6px;} .x-rail__prog .lbl{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--ink3);display:flex;justify-content:space-between;} .x-rail__prog .lbl b{color:var(--accent);} .x-rail__prog .trk{height:7px;border-radius:100px;background:var(--bg2);border:1px solid var(--line);margin-top:8px;overflow:hidden;} .x-rail__prog .fil{height:100%;width:0%;border-radius:100px;background:linear-gradient(90deg,var(--ts-blue),var(--ts-blue-mid));transition:width .25s ease-out;} .x-rail__prog.is-complete .fil{background:var(--ts-green);} .x-rail__foot{display:flex;gap:10px;align-items:center;padding-top:14px;} .x-rail__foot .ts-btn{flex:1;min-height:48px;font-size:15px;padding:0 14px;} body.v2 .x-main{margin-left:var(--railw);} body.v2 .ts-rail{display:none;} /* compact top bar for v2 mobile */ .x-topbar{display:none;} .x-dock{display:none;} /* v2 hero */ .x-hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:90px 0 70px;} .x-hero__in{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(30px,3.4vw,58px);align-items:center;width:100%;} /* wider container on big screens so the composition fills the width and the side gutters stay balanced (text-left vs demo-right) instead of dead space. On ultra-wide we let the hero break beyond the normal 1240 page width so it pops; the rest of the page stays at .ts-wrap width. */ .x-hero .x-hero__in{max-width:min(92vw,2200px);} .x-hero .ts-display{font-size:clamp(40px,4.6vw,88px);max-width:13ch;} .x-hero__stack{position:relative;perspective:1500px;min-height:260px;} .x-hero__stack{position:relative;perspective:1500px;min-height:260px;} .x-layer{position:absolute;border-radius:18px;will-change:transform;} /* the app shot is pinned to a fixed design width so it never reflows/crushes; --shot-scale (set in JS) sizes the whole shot at any resolution. anchored top-left so it never rides up over the hero CTAs when the layout stacks. */ .x-layer--dash{left:0;top:0;width:760px;transform-origin:top left;transform:rotateY(calc(-5deg + var(--ry2,0deg))) rotateX(calc(2.5deg + var(--rx2,0deg))) scale(var(--shot-scale,1));} body[data-motion="off"] .x-layer--dash,body[data-depth="off"] .x-layer--dash{transform:scale(var(--shot-scale,1));transform-origin:top left;} .x-glow{position:absolute;inset:-8% -12% -12% -10%;background:radial-gradient(closest-side,var(--dashboard-glow),transparent 72%);z-index:0;} /* lift the shot off the dark hero so it reads with clear contrast */ .x-hero .ts-dash{box-shadow:0 calc(30px * var(--inv,1)) calc(70px * var(--inv,1)) calc(-22px * var(--inv,1)) rgba(7,25,40,.5),0 0 0 calc(1px * var(--inv,1)) color-mix(in srgb,var(--accent) 16%,transparent);} [data-theme="dark"] .x-hero .ts-dash{box-shadow:0 calc(34px * var(--inv,1)) calc(80px * var(--inv,1)) calc(-24px * var(--inv,1)) rgba(0,0,0,.7),0 0 0 calc(1px * var(--inv,1)) rgba(150,196,230,.20);} [data-theme="dark"] .x-hero .tsapp{--surface:#13293E;--surface2:#0F2336;--line:#264764;--line2:#315677;} /* module explorer (v2) — full vertical grid, flows with the page scroll */ .x-modscroll{ display:grid;grid-template-columns:repeat(auto-fill,minmax(244px,1fr)); gap:18px;padding:8px 2px 4px;align-items:stretch; } .x-modscroll .ts-mod{min-height:184px;display:flex;flex-direction:column;} .x-modscroll .ts-mod__d{margin-top:auto;} .x-modscroll .ts-mod--core{grid-column:span 2;} .x-modscroll .x-trio{grid-column:1 / -1;} .x-modnav{display:none;} /* world tab (4th juris mode) */ .ts-juris--world .ts-juris__link{color:var(--ts-red);} [data-theme="dark"] .ts-juris--world .ts-juris__link{color:#FF8A8D;} .ts-juris--world .ts-juris__node.risk{border-color:rgba(224,58,62,.65);background:rgba(224,58,62,.12);} .ts-juris--world .ts-juris__badge{background:rgba(224,58,62,.12);color:#C2272B;border:1.5px solid rgba(224,58,62,.45);} [data-theme="dark"] .ts-juris--world .ts-juris__badge{background:rgba(224,58,62,.16);color:#FF9B9D;border-color:rgba(224,58,62,.5);} /* sticky scrollytelling (v2 sovereignty) */ .x-story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:start;} .x-story__pin{position:sticky;top:110px;} .x-story__steps{display:flex;flex-direction:column;gap:26px;} .x-step{ border:1.5px solid var(--line);border-radius:20px;padding:28px;background:var(--surface); transition:border-color .3s,box-shadow .3s,opacity .3s; opacity:.55; cursor:pointer; } .x-step:hover{opacity:.85;border-color:color-mix(in srgb,var(--accent) 35%,var(--line));} .x-step:focus-visible{outline:3px solid var(--accent);outline-offset:2px;opacity:1;} .x-step.is-focus{opacity:1;border-color:color-mix(in srgb,var(--accent) 50%,var(--line));box-shadow:var(--shadow-2);} .x-step .num{ display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px; background:var(--accent-tint);color:var(--accent);font-weight:900;font-size:16px;margin-bottom:14px; } .x-step h3{margin:0 0 8px;font-size:20px;font-weight:800;} .x-step p{margin:0;color:var(--ink2);font-size:15.5px;line-height:1.6;} /* ---------------- compare page chrome ---------------- */ .cmp-body{height:100vh;display:flex;flex-direction:column;background:#101A23;color:#E9F0F6;font-family:'Dax',system-ui,sans-serif;margin:0;} .cmp-bar{display:flex;align-items:center;gap:18px;padding:12px 20px;border-bottom:1px solid #223648;flex-wrap:wrap;} .cmp-bar img{height:26px;filter:brightness(0) invert(.95);} .cmp-bar .t{font-weight:800;font-size:15.5px;} .cmp-bar .sub{font-size:12.5px;color:#8AA3B8;} .cmp-tabs{margin-left:auto;display:flex;gap:5px;background:#0A141D;padding:5px;border-radius:12px;} .cmp-tabs button{ border:none;background:transparent;color:#9FB3C2;font-family:inherit;font-weight:700;font-size:13.5px; min-height:38px;padding:0 16px;border-radius:9px;cursor:pointer; } .cmp-tabs button.on{background:#00578E;color:#fff;} .cmp-stage{flex:1;display:flex;gap:0;min-height:0;} .cmp-pane{flex:1;display:flex;flex-direction:column;min-width:0;border-left:1px solid #223648;} .cmp-pane:first-child{border-left:none;} .cmp-pane__lbl{display:flex;align-items:center;gap:10px;padding:9px 16px;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8AA3B8;background:#0A141D;} .cmp-pane__lbl i{width:9px;height:9px;transform:rotate(45deg);border-radius:1.5px;background:#00578E;display:block;} .cmp-pane__lbl a{margin-left:auto;color:#7FBCE6;font-size:12px;letter-spacing:0;text-transform:none;font-weight:700;} .cmp-pane iframe{flex:1;width:100%;border:none;background:#fff;} .cmp-stage.solo .cmp-pane.hide{display:none;} /* ============================================================ Responsive ============================================================ */ @media (max-width: 1100px){ .ts-rail{display:none;} .ts-modmap__grid{grid-template-columns:repeat(2,1fr);} .ts-mod--core{grid-column:span 2;} body.v2{--railw:0px;} .x-rail{display:none;} body.v2 .x-main{margin-left:0;} .x-topbar{ display:flex;position:fixed;top:0;left:0;right:0;z-index:120;align-items:center;gap:14px; min-height:64px;padding:0 18px;background:var(--nav-bg);backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } .x-topbar img{height:28px;} [data-theme="dark"] .x-topbar img{filter:brightness(0) invert(.92);} .x-topbar .sp{flex:1;} .x-dock{ display:flex;position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:130; background:var(--surface);border:1.5px solid var(--line);border-radius:100px; box-shadow:var(--shadow-2);padding:7px;gap:4px; } .x-dock a{ display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px; border-radius:100px;text-decoration:none;font-size:12px;font-weight:800;color:var(--ink3); } .x-dock a.is-active{background:var(--ts-blue);color:#fff;} [data-theme="dark"] .x-dock a.is-active{background:var(--accent);color:var(--accent-ink);} } /* very narrow phones (≤360px): shrink the dock so all 7 links fit without clipping */ @media (max-width:360px){ .x-dock{gap:2px;padding:5px;} .x-dock a{min-width:38px;min-height:40px;} } @media (max-width: 920px){ .ts-nav__links{display:none;} .ts-burger{ display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px; border-radius:13px;border:1.5px solid var(--line2);background:var(--surface);cursor:pointer;color:var(--ink); } .ts-burger svg{width:20px;height:20px;} .ts-nav__cta .ts-btn--primary{display:none;} .ts-split,.x-hero__in,.ts-ai__in,.x-story{grid-template-columns:1fr;} .x-hero__in{row-gap:104px;} /* room for the straddling chips so they don't collide with the Triple-C row above or the stats section below when the hero stacks on mobile */ .x-hero__stack{margin-bottom:84px;} .ts-ai__chat{border-left:none;border-top:1.5px solid var(--line);} .ts-stats__in{grid-template-columns:repeat(2,1fr);} .ts-stat{border-left:none;border-top:1.5px solid var(--line);} .ts-stat:nth-child(-n+2){border-top:none;} .ts-stat:nth-child(even){border-left:1.5px solid var(--line);} .ts-sov__cards{grid-template-columns:1fr;} .ts-juris__stage{grid-template-columns:1fr;} .ts-footer__in{grid-template-columns:1fr 1fr;} .x-story__pin{position:static;} .x-hero__stack{min-height:380px;} .ts-hero{min-height:auto;padding:130px 0 80px;} .x-hero{min-height:auto;padding:120px 0 130px;} } @media (max-width: 560px){ .ts-modmap__grid{grid-template-columns:1fr;} .ts-mod--core{grid-column:span 1;} .x-modscroll{grid-template-columns:1fr;} .x-modscroll .ts-mod--core{grid-column:auto;} .ts-stats__in{grid-template-columns:1fr 1fr;} .ts-footer__in{grid-template-columns:1fr;} /* keep the floating Ask TownSuite button clear of the footer links */ .ts-footer{padding-bottom:110px;} .ts-chatfab span.lbl{display:none;} .ts-chatfab{padding:0;width:56px;justify-content:center;} } /* ============================================================ TownSuite mERP logo — static lockup (#i-tslogo) + animated morph ============================================================ */ .ts-logo{display:block;color:var(--accent);} /* wordmark = currentColor */ .ts-logo-anim{display:block;overflow:visible;} .ts-logo-anim .ts-anim-new{fill:var(--accent);} /* new wordmark themes with accent */ /* legacy wordmark tone during the morph (kept legible in both themes) */ .ts-logo-anim .ts-anim-old{fill:#58595B;} .ts-logo-anim .ts-anim-old .ow-sub{fill:#808285;} [data-theme="dark"] .ts-logo-anim .ts-anim-old{fill:#C4D2DE;} [data-theme="dark"] .ts-logo-anim .ts-anim-old .ow-sub{fill:#90A4B4;} /* placements */ /* Render the animated logo at the SAME scale as the static .ts-logo on every other page (30px / 181 viewBox-units): its viewBox is 268 tall, so 268 × (30/181) ≈ 44px makes the "TownSuite mERP" wordmark land at exactly 30px — consistent site-wide. */ .x-rail__logo .ts-logo-anim{height:44px;width:auto;max-width:100%;} .ts-footer__logo .ts-logo{height:44px;width:auto;} .x-topbar a .ts-logo{height:26px;width:auto;} .tsapp__logo{height:17px;width:auto;} @media (prefers-reduced-motion: reduce){ .ts-logo-anim *{transition:none !important;} } @media (prefers-reduced-motion: no-preference){ .ts-dots i{animation:tsblink 1.4s infinite;} .ts-dots i:nth-child(2){animation-delay:.18s;} .ts-dots i:nth-child(3){animation-delay:.36s;} } /* ============================================================ Roadmap additions (2026): hero trust ribbon, utility nav, and progressive-enhancement fallbacks. ============================================================ */ /* Persistent utility nav in the lean/document/module page header (.pp-top). Gives non-linear visitors a conventional way to reach Modules / Pricing / About without scrolling the homepage narrative. */ .pp-nav{display:flex;align-items:center;gap:2px;margin-left:6px;} .pp-nav a{ display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:100px; text-decoration:none;font-weight:700;font-size:14px;color:var(--ink2); transition:color .18s,background .18s; } .pp-nav a:hover{color:var(--accent);background:var(--accent-tint);} @media (max-width:700px){.pp-nav{display:none;}} /* Fallback: browsers without CSS mask-composite would render the animated phase ring (.x-phase__n::after) as a solid filled block. Hide it instead — it is purely decorative, so removing it degrades gracefully. */ @supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)){ .x-phase__n::after{display:none !important;} } /* NOTE: color-mix() is used inline across many rules for tints/borders/hovers. On browsers predating color-mix (pre-2023) those values are ignored. A full fallback needs the colours refactored into tokens; tracked as a follow-up. */ /* Module link chips (used on enhance.html to point at the real module pages) */ .en-modchip{ display:inline-flex;align-items:center;min-height:40px;padding:0 15px;border-radius:100px; border:1.5px solid var(--line);background:var(--surface);text-decoration:none; font-weight:700;font-size:14px;color:var(--ink2);transition:color .18s,border-color .18s,background .18s; } .en-modchip:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-tint);} .en-modchip--all{color:var(--accent);border-color:var(--accent);} /* In-content prose links (policy / module / statement pages) must not rely on colour alone — underline by default for WCAG 1.4.1. Excludes button-styled links (.en-btn/.bp-btn) and module chips. Specificity intentionally raised so this wins over the per-page inline `.pp-doc a{text-decoration:none}` rules. */ .pp-doc a:not(.en-btn):not(.bp-btn):not(.en-modchip):not(.en-card){text-decoration:underline;} .pp-doc a:not(.en-btn):not(.bp-btn):not(.en-modchip):not(.en-card):hover{text-decoration:underline;} /* Module card titles are now links to their dedicated pages (keeps the wire-map interaction) */ .ts-mod__link{color:inherit;text-decoration:none;} .ts-mod__link:hover{color:var(--accent);text-decoration:underline;} .ts-mod__link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;} /* Lean / document header (.pp-top): on tablet & phone, match the homepage's icon-only mobile chrome — hide the utility nav and collapse Sign in / Back to icons so their text labels never wrap. (Supersedes the per-page 560px rule.) */ .pp-top .pp-back, .pp-top .pp-signin{white-space:nowrap;} @media (max-width:768px){ .pp-nav{display:none;} .pp-top .pp-back .lbl-long, .pp-top .pp-back .dom, .pp-top .pp-signin .lbl{display:none;} .pp-top .pp-back, .pp-top .pp-signin{width:46px;height:46px;min-height:46px;padding:0;gap:0;justify-content:center;border-radius:13px;flex:none;} } /* ============================================================ iOS status-bar tint — consistent dark TownSuite blue, every page. iOS 26 Safari tints the status bar from the background of the FIXED element nearest the top edge (falling back to ). So we (1) keep the nav glass but move it off the fixed element onto a ::before child so Safari does not sample the nav, and (2) place a solid dark-blue strip in the status-bar safe area for Safari to sample. theme-color (set in each page) covers iOS <=18.6 where the meta tag still works. ============================================================ */ :root{ --ios-statusbar:#003C63; } .ios-statusbar-tint{ position:fixed; top:0; left:0; right:0; height:env(safe-area-inset-top, 0px); background:var(--ios-statusbar); z-index:2147483647; pointer-events:none; } /* stop the fixed nav bars from being the sampled element — glass moves to ::before */ .ts-nav, .x-topbar{ background:transparent !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } .ts-nav::before, .x-topbar::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--nav-bg); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); } /* keep nav content clear of the status bar (viewport-fit=cover lets it bleed up) */ .ts-nav{ padding-top:env(safe-area-inset-top, 0px); } .x-topbar{ padding-top:env(safe-area-inset-top, 0px); }