/* ======================================================================= Soterix Camera System Calculator — Custom Stylesheet Purpose: - Centralize non-Tailwind styles - Reduce template noise in renderer.js - Preserve visual parity with v4.2 ======================================================================= */ /* ======================================================================= Yantramanav — self-hosted (replaced the Google Fonts CDN, 2026-08-17) ----------------------------------------------------------------------- Source: Box > Product Management > Logo's > Soterix - Branding.zip, Fonts/Yantramanav/*.ttf, converted to WOFF2 and subset to Latin + the punctuation/symbols this UI renders. Licence: SIL OFL, see fonts/OFL.txt (the OFL requires the licence ship with the font). Only four weights are shipped, because only four are reachable: 400 font-normal 500 font-medium 700 font-bold, and font-semibold (600) — Yantramanav has no 600, so CSS font-matching resolves 600 upward to 700 900 font-extrabold (800) — likewise resolves upward to 900 (renderer.js system-count figure) The family has no 600 or 800 master at all, and nothing in site/ uses Light (300) or Thin (100), so those are deliberately not shipped. The old Google Fonts link requested 300 and 900 but NOT 600 — this set matches actual usage more closely than that did. font-display: swap preserves the old link's &display=swap behaviour. ======================================================================= */ @font-face { font-family: 'Yantramanav'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/yantramanav-400.woff2') format('woff2'); } @font-face { font-family: 'Yantramanav'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/yantramanav-500.woff2') format('woff2'); } @font-face { font-family: 'Yantramanav'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/yantramanav-700.woff2') format('woff2'); } @font-face { font-family: 'Yantramanav'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/yantramanav-900.woff2') format('woff2'); } /* Was an inline style attribute on . Moved here so the CSP can drop 'unsafe-inline' from style-src. */ body { font-family: 'Yantramanav', sans-serif; } /* ======================================================================= Soterix Brand Tokens ======================================================================= */ :root { --brand-blue-chill: #127CA3; --brand-oslo-gray: #939598; --brand-dark: #2F2E37; --brand-teal: #46A1B1; --brand-off-white: #F2F3F0; --brand-deep-teal: #127CA3; } /* ======================================================================= Global / Utility Enhancements ======================================================================= */ /* Custom Scrollbar (WebKit browsers) */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; /* slate-100 */ } ::-webkit-scrollbar-thumb { background: #94a3b8; /* slate-400 */ border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #64748b; /* slate-500 */ } /* ======================================================================= Animations ======================================================================= */ /* Fade-in animation used for cards, rows, and result blocks */ .animate-fade-in { animation: fadeIn 0.3s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* ======================================================================= Tooltip Styling (used in Premium Licenses & help icons) ======================================================================= */ .tooltip { position: relative; display: inline-block; cursor: pointer; } .tooltip .tooltiptext { visibility: hidden; width: 240px; background-color: var(--brand-dark); /* brand dark */ color: #ffffff; text-align: left; border-radius: 6px; padding: 10px; position: absolute; z-index: 10; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s; font-size: 0.75rem; line-height: 1.4; pointer-events: none; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: var(--brand-dark) transparent transparent transparent; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } /* ======================================================================= Hardware System Cards (Result Matrix) ======================================================================= */ /* Base card container for each Edge system */ .system-card { background-color: #ffffff; border-radius: 0.5rem; /* rounded-lg */ padding: 1.25rem; /* p-5 */ border: 1px solid #e2e8f0; /* slate-200 */ box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* shadow-sm */ display: flex; flex-direction: column; height: 100%; position: relative; } /* Header section inside a system card */ .system-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; } /* System SKU title */ .system-card-title { font-size: 1.125rem; /* text-lg */ font-weight: 700; color: var(--brand-dark); } /* System class label (Small / Mid / Large / Enterprise) */ .system-card-subtitle { font-size: 0.625rem; /* text-[10px] */ font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #94a3b8; /* slate-400 */ } /* ======================================================================= SKU Upgrade / Downgrade Controls ======================================================================= */ .sku-control-btn { display: flex; align-items: center; justify-content: center; width: 1.5rem; /* w-6 */ height: 1.5rem; /* h-6 */ border-radius: 0.25rem; border: 1px solid #cbd5e1; /* slate-300 */ background-color: #ffffff; color: #64748b; /* slate-500 */ cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: background-color 150ms ease, color 150ms ease; } .sku-control-btn:hover { background-color: #f8fafc; /* slate-50 */ } .sku-control-btn:disabled, .sku-control-btn.opacity-20 { opacity: 0.2; pointer-events: none; } /* ======================================================================= Metric Bars (Compute / Storage) ======================================================================= */ .metric-bar { width: 100%; height: 0.5rem; /* h-2 */ background-color: #f1f5f9; /* slate-100 */ border-radius: 9999px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); } .metric-bar-compute { height: 100%; background-color: var(--brand-blue-chill); /* Soterix Blue Chill */ transition: width 0.5s ease; } .metric-bar-storage { height: 100%; background-color: var(--brand-teal); /* Soterix Teal */ transition: width 0.5s ease; } /* ======================================================================= Assigned Channels Section (per system) ======================================================================= */ .assigned-section { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid #e2e8f0; /* slate-200 */ } .assigned-title { font-size: 0.625rem; /* text-[10px] */ font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #94a3b8; /* slate-400 */ margin-bottom: 0.5rem; } .assigned-row { display: flex; justify-content: space-between; font-size: 0.6875rem; /* text-[11px] */ color: #334155; /* slate-700 */ } .assigned-row strong { font-weight: 700; } /* ======================================================================= Post-Results Sections ======================================================================= */ .premium-summary { background-color: #e8f4f8; /* brand-50 */ border: 1px solid #8cc8d8; /* brand-200 */ border-radius: 0.75rem; padding: 1.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); } .non-raid-warning { background-color: #fefce8; /* yellow-50 */ border-left: 4px solid #eab308; /* yellow-500 */ padding: 1rem; border-radius: 0.5rem; font-size: 0.875rem; color: #713f12; /* yellow-900 */ } /* A value that was typed out of range and corrected to the nearest accepted one. Amber, not red: nothing is broken and the plan is valid — the input was simply outside REF_DATA.limits. Cleared after a couple of seconds by the renderer. */ .field-clamped { border-color: #d97706 !important; /* amber-600, over the Tailwind border utility */ box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.25); background-color: #fffbeb; /* amber-50 */ } /* "This design does not fit." Deliberately red rather than the amber above: the non-RAID notice is advice about a tradeoff, whereas this one means there is no hardware recommendation on the page at all. Different kind of message. */ .unsatisfiable-notice { background-color: #fef2f2; /* red-50 */ border-left: 4px solid #dc2626; /* red-600 */ padding: 1rem; border-radius: 0.5rem; font-size: 0.875rem; color: #7f1d1d; /* red-900 */ } .assumptions-block { background-color: #ffffff; border: 1px solid #e2e8f0; /* slate-200 */ border-radius: 0.75rem; padding: 1.5rem; font-size: 0.875rem; color: #475569; /* slate-600 */ } /* ======================================================================= Compatibility helpers (used by earlier renderer variants) - Safe to keep even if unused. ======================================================================= */ /* Utility class to create a vertical stack of arrow buttons */ .arrow-stack { display: flex; flex-direction: column; gap: 0.25rem; } /* Basic styling for legacy up/down arrow buttons */ .arrow-button { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: bold; cursor: pointer; background-color: #e5e7eb; /* slate-200 */ color: #1e293b; /* slate-800 */ border: 1px solid #cbd5e1; /* slate-300 */ transition: background-color 0.15s ease; } .arrow-button:hover { background-color: #cbd5e1; /* slate-300 */ } .arrow-button:disabled, .arrow-button.disabled { opacity: 0.5; cursor: not-allowed; } /* Card container used by legacy results/post-result sections */ .result-card { border: 1px solid #e2e8f0; /* slate-200 */ border-radius: 0.75rem; background-color: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); overflow: hidden; } .result-card > .header { padding: 1rem 1.5rem; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; } .result-card > .body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }