/*! SPDX-License-Identifier: BSD-3-Clause · © 2026 WebTigers · Tiger™/WebTigers™ are trademarks */ /* PUMA base — puma's own defaults layered on Bootstrap. * Skins (assets/skins/*.css) override THIS file, not Bootstrap directly. */ :root { --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Klingon (tlh) — when the pIqaD locale is active the whole site renders in the pIqaD script. Drop a * properly-licensed pIqaD TTF at assets/fonts/klingon/pIqaD.ttf (see its README). Until that file * exists the @font-face fails silently and the browser falls back to the default font — nothing * breaks. pIqaD text uses Unicode Private-Use-Area codepoints, so a pIqaD font is required to render * it; the html[lang="tlh"] gate (the layout sets ) scopes the swap to that locale. */ @font-face { font-family: "pIqaD"; src: url("fonts/klingon/pIqaD.ttf") format("truetype"); font-display: swap; /* Scope the face to the pIqaD script's Private-Use-Area block ONLY. The font also ships serif * Latin glyphs, so without this the browser would draw loanwords/brands (Tiger, GitHub, digits, * punctuation) in the font's serif Latin instead of falling through to the body sans-serif. With * the range limited to the CSUR Klingon block, "pIqaD" covers Klingon codepoints and everything * else falls through to the next family in the stack. */ unicode-range: U+F8D0-F8FF; } html[lang="tlh"] { --bs-body-font-family: "pIqaD", system-ui, sans-serif; } html[lang="tlh"] body { font-family: var(--bs-body-font-family); } /* Render a single element in pIqaD regardless of the page locale — e.g. the Klingon option in the * language switcher, shown in its own script on every page (the @font-face above is global). */ .tiger-lang-piqad { font-family: "pIqaD", system-ui, sans-serif; } /* Emphasized comparison-table column (the "our product" column on the marketing pages). A soft, * theme-aware primary wash that reads well in BOTH light and dark mode and follows the active skin — * unlike Bootstrap's .table-primary, whose fixed powder-blue background + forced black text clash in * dark mode. Applied per cell (th + td) down the column; the tint is stronger in dark mode so the * column still reads against the darker ground. */ .cell-emphasis { --bs-table-bg: rgba(var(--bs-primary-rgb), .08); --bs-table-color: var(--bs-body-color); } :root[data-bs-theme="dark"] .cell-emphasis, [data-bs-theme="dark"] .cell-emphasis { --bs-table-bg: rgba(var(--bs-primary-rgb), .16); } /* Primary buttons — SOLID AND OUTLINE — track the ACTIVE SKIN's primary color. * * Bootstrap 5.3 bakes the stock blue (#0d6efd) straight into both variants' component vars, so a * skin that only swaps --bs-primary (bengal orange, cheetah teal, jaguar navy, tabby orange) still * renders blue buttons. Rebinding the button vars to var(--bs-primary) makes the fill, border, * label, hover, active state and focus ring all follow the skin — no per-skin rule needed. * * BOTH variants must be here or they disagree: for a while only the outline was rebound, so a card * offering `btn-primary` beside `btn-outline-primary` drew one orange and one Bootstrap blue. * * Hover/active darken via color-mix; the plain var() line before each is the fallback a browser * without color-mix keeps (an unsupported declaration is dropped, so the earlier one stands). * * Lives in the theme base so every skin inherits it; a skin may still override for a bespoke look. */ .btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, #000); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 80%, #000); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 78%, #000); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 72%, #000); --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); } .btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-disabled-color: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); } /* Dropdown menus — guarantee an OPAQUE, theme-aware background. Bootstrap derives the menu * background from --bs-body-bg with no fallback, so if that variable ever fails to resolve in a * given context the background-color collapses to `transparent` and page content shows through * the menu (seen on the header theme/lang/skin switchers). The concrete fallback keeps it solid. */ .dropdown-menu { background-color: var(--bs-body-bg, #fff); } [data-bs-theme="dark"] .dropdown-menu { background-color: var(--bs-body-bg, #212529); } .tiger-hero { padding: 4rem 0; } footer.tiger-foot { color: var(--bs-secondary-color); padding: 2rem 0; } /* --- Blog single-post reading layout — moved from modules/blog/views/scripts/index/view.phtml --- */ .post-wrap{max-width:720px;margin:0 auto;padding:2.5rem 1rem 4rem;} .post-hero{width:100%;max-height:460px;object-fit:cover;border-radius:.6rem;margin-bottom:2rem;} .post-kicker{text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;font-weight:650;color:var(--bs-secondary-color);margin-bottom:.6rem;} .post-title{font-family:Georgia,"Times New Roman",serif;font-size:2.7rem;line-height:1.12;font-weight:700;letter-spacing:-.02em;margin:0 0 .6rem;} .post-subtitle{font-family:Georgia,serif;font-size:1.45rem;line-height:1.3;color:var(--bs-secondary-color);font-weight:400;margin-bottom:1.4rem;} .post-meta{display:flex;align-items:center;gap:.5rem;font-size:.95rem;color:var(--bs-secondary-color);padding-bottom:1.4rem;margin-bottom:1.8rem;border-bottom:1px solid var(--bs-border-color);} .post-meta .who{font-weight:600;color:var(--bs-body-color);} .post-preamble{font-family:Georgia,serif;font-size:1.3rem;line-height:1.65;color:var(--bs-body-color);margin-bottom:1.6rem;} .post-body{font-family:Georgia,serif;font-size:1.19rem;line-height:1.8;color:var(--bs-body-color);} .post-body h2{font-size:1.7rem;font-weight:700;margin:2rem 0 .7rem;} .post-body h3{font-size:1.35rem;font-weight:700;margin:1.6rem 0 .6rem;} .post-body p{margin:0 0 1.3rem;} .post-body img{max-width:100%;height:auto;border-radius:.4rem;margin:1.4rem 0;} .post-body blockquote{border-left:3px solid var(--bs-border-color);margin:1.5rem 0;padding:.3rem 0 .3rem 1.2rem;color:var(--bs-secondary-color);font-style:italic;} .post-body a{color:var(--bs-primary);} .post-footer{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--bs-border-color);} .post-terms a{text-decoration:none;} /* ── Named content-width containers (theme base — apply under EVERY skin) ───── Pick one per

instead of a hand-set max-width. Complete containers (centered, standard Bootstrap gutters) — except -full-bleed, edge-to-edge with NO padding or margin. Names don't collide with Bootstrap's .container-{sm..xxl}/-fluid. */ .container-narrow,.container-menu,.container-wide{ width:100%;margin-right:auto;margin-left:auto; padding-right:calc(var(--bs-gutter-x,1.5rem)*.5); padding-left:calc(var(--bs-gutter-x,1.5rem)*.5); } .container-narrow{max-width:760px;} /* a tight reading/prose column */ .container-wide{max-width:1440px;} /* roomier than the menu bar */ /* matches the main menu bar (the public navbar + footer use Bootstrap .container) */ .container-menu{max-width:100%;} @media(min-width:576px){.container-menu{max-width:540px;}} @media(min-width:768px){.container-menu{max-width:720px;}} @media(min-width:992px){.container-menu{max-width:960px;}} @media(min-width:1200px){.container-menu{max-width:1140px;}} @media(min-width:1400px){.container-menu{max-width:1320px;}} /* edge-to-edge: no max-width, no padding, no margin */ .container-full-bleed{width:100%;max-width:none;margin:0;padding:0;} /* Public header menus — the Solutions mega-menu + the Why-Tiger mini-mega. Moved here out of an * inline