/* ========================================================================== GULF LNG redesign — shared design tokens + shell. v2 "Blue data + amber" Two selected themes: light (default) and dark, switched by . Pages reference tokens only — if a value is not here, it does not appear on screen. Direction from ui-ux-pro-max --design-system: blue data (#1E40AF/#3B82F6) + amber highlights (#D97706), light bg #F8FAFC, SVG outline icons (no emoji), subtle motion, dense spacing. Typeface deviates from the tool's Fira suggestion: IBM Plex Sans Thai + Plex Mono — the same technical pairing with real Thai support. ========================================================================== */ :root { /* ---- Surfaces --------------------------------------------------------- */ --petrol-950: #F6F8FB; /* page */ --surface: #FFFFFF; /* card */ --petrol-900: #EEF3F9; /* recessed panel / chart fill */ --petrol-850: #E5ECF5; /* raised row / seg track */ --petrol-800: #DDE6F0; /* the one hairline */ --petrol-700: #B7C9DC; /* pipe, no flow */ --petrol-600: #3E6FA6; /* pipe, flowing / on plan */ /* ---- Text ------------------------------------------------------------- */ --ink: #172A46; /* primary */ --ink-2: #44608C; /* secondary — 6:1 on white */ --ink-3: #5E7891; /* labels, units — 4.6:1 */ /* ---- Brand + action --------------------------------------------------- */ --brand: #00A651; /* GULF green, logo mark only */ --primary: #1E40AF; /* blue data */ --primary-soft: rgba(30, 64, 175, .08); --accent: #D97706; /* amber highlight */ --accent-soft: rgba(217, 119, 6, .12); /* ---- Status ------------------------------------------------------------ */ --ok: #0E8A4C; --warn: #B45309; --warn-dim: rgba(217, 119, 6, .10); --crit: #DC2626; --crit-dim: rgba(220, 38, 38, .08); /* ---- Chart series (validated CVD-safe on #F8FAFC) ---------------------- */ --series-1: #2A78D6; --series-2: #EB6834; --series-3: #1BAF7A; /* ---- Effects ----------------------------------------------------------- */ --shadow: 0 1px 2px rgba(23, 42, 70, .05), 0 4px 14px rgba(23, 42, 70, .06); --flow-dash: rgba(255, 255, 255, .60); /* travelling dash on the trunk */ --hit: rgba(30, 64, 175, .05); /* schematic hover target */ --seg-active-bg: #FFFFFF; --seg-active-shadow: 0 1px 3px rgba(23, 42, 70, .14); /* ---- Type -------------------------------------------------------------- */ --font-ui: "IBM Plex Sans", "IBM Plex Sans Thai", system-ui, sans-serif; --font-num: "IBM Plex Mono", ui-monospace, monospace; --t-xs: 11px; --t-sm: 13px; --t-md: 15px; --t-lg: 19px; --t-xl: 26px; --t-2xl: 38px; /* ---- Space & shape ------------------------------------------------------ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --r-sm: 6px; --r-md: 10px; --r-lg: 12px; --r-pill: 999px; --gutter: 32px; --line: 1px solid var(--petrol-800); } :root[data-theme="dark"] { --petrol-950: #0B1322; --surface: #111C30; --petrol-900: #0E1830; --petrol-850: #1A2740; --petrol-800: #20304C; --petrol-700: #27436A; --petrol-600: #4B7FB4; --ink: #E7EEF8; --ink-2: #A3B5CD; --ink-3: #7189A6; --brand: #00A651; --primary: #7CB1F8; --primary-soft: rgba(96, 165, 250, .14); --accent: #F59E0B; --accent-soft: rgba(245, 158, 11, .15); --ok: #2BBB70; --warn: #F0A94B; --warn-dim: rgba(240, 169, 75, .15); --crit: #EF5350; --crit-dim: rgba(239, 83, 80, .16); --series-1: #3987E5; --series-2: #D95926; --series-3: #199E70; --shadow: none; --flow-dash: rgba(228, 238, 243, .30); --hit: rgba(255, 255, 255, .045); --seg-active-bg: rgba(255, 255, 255, .12); --seg-active-shadow: none; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--petrol-950); color: var(--ink); font-family: var(--font-ui); font-size: var(--t-sm); -webkit-font-smoothing: antialiased; } /* The real canvas is IDboxRT's #companyFrame iframe: 1906 x 838. */ .app { display: flex; flex-direction: column; min-height: 100%; } a, button { transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; } button { cursor: pointer; } /* Inline SVG icons (outline, currentColor) */ .ic { vertical-align: -3px; flex: none; } /* ---------------------------------------------------------------- nav --- */ .nav { display: flex; align-items: center; gap: var(--sp-4); height: 52px; flex: none; padding: 0 var(--sp-5); background: var(--surface); border-bottom: var(--line); } .brand { display: flex; align-items: center; gap: 7px; font-weight: 700; letter-spacing: .06em; margin-right: var(--sp-2); } .brand .ic { color: var(--brand); } .brand b { color: var(--brand); font-size: var(--t-md); } .brand span { color: var(--ink-3); font-size: var(--t-xs); letter-spacing: .18em; } .nav-links { display: flex; gap: 2px; flex: 1; flex-wrap: nowrap; } .nav-links a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none; font-size: var(--t-sm); white-space: nowrap; } .nav-links a .ic { opacity: .75; } .nav-links a:hover { color: var(--ink); background: var(--petrol-850); } .nav-links a[aria-current] { color: var(--primary); font-weight: 600; background: var(--primary-soft); } .nav-links a[aria-current] .ic { opacity: 1; } .nav-meta { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-num); font-size: var(--t-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; } .nav-meta .user { font-family: var(--font-ui); color: var(--ink-3); } .theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-sm); border: var(--line); background: transparent; color: var(--ink-2); } .theme-btn:hover { color: var(--ink); background: var(--petrol-850); } /* ------------------------------------------------------------- status --- */ .status { display: flex; align-items: center; gap: var(--sp-3); min-height: 34px; flex: none; padding: 3px var(--gutter); font-size: var(--t-md); } .status.is-warn { background: var(--warn-dim); } .status.is-crit { background: var(--crit-dim); } .status .ic { flex: none; } .status.is-warn .ic, .status.is-warn strong { color: var(--warn); } .status.is-crit .ic, .status.is-crit strong { color: var(--crit); } .status .dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--warn); flex: none; } .status.is-crit .dot { background: var(--crit); } .status strong { font-weight: 600; } .status .sep { color: var(--ink-3); } .status .muted { color: var(--ink-2); font-size: var(--t-sm); } /* Density / period switch — pill track with a raised active thumb */ .seg { display: inline-flex; margin-left: auto; gap: 2px; background: var(--petrol-850); border-radius: var(--r-pill); padding: 2px; } .seg.inline { margin-left: 0; } .seg button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--ink-3); font: 500 var(--t-xs)/1 var(--font-ui); padding: 5px 11px; border-radius: var(--r-pill); } .seg button:hover { color: var(--ink-2); } .seg button[aria-pressed="true"] { background: var(--seg-active-bg); color: var(--ink); box-shadow: var(--seg-active-shadow); font-weight: 600; } /* ---------------------------------------------------------------- kpi --- */ .kpis { display: flex; flex-wrap: wrap; gap: var(--sp-4) 64px; padding: var(--sp-4) var(--gutter) var(--sp-3); } .kpi-name { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); letter-spacing: .12em; color: var(--ink-3); text-transform: uppercase; } .kpi-name .ic { color: var(--primary); opacity: .85; } .kpi-body { display: flex; align-items: baseline; gap: var(--sp-3); margin-top: 4px; } .kpi-value { font-family: var(--font-num); font-weight: 500; font-size: var(--t-2xl); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .kpi-value.sm { font-size: var(--t-xl); } .kpi-unit { font-size: var(--t-xs); color: var(--ink-3); font-family: var(--font-num); } .kpi-delta { font-family: var(--font-num); font-size: var(--t-sm); font-variant-numeric: tabular-nums; } .kpi-sub { font-size: var(--t-xs); color: var(--ink-3); font-family: var(--font-num); margin-top: 5px; } .is-ok { color: var(--ok); } .is-warn { color: var(--warn); } .is-crit { color: var(--crit); } /* -------------------------------------------------------------- panel --- */ /* Panels are cards now: white surface, hairline, soft shadow (light only). */ .main { flex: 1; padding: var(--sp-4) var(--gutter); display: grid; gap: var(--sp-5); align-content: start; } .panel { background: var(--surface); border: var(--line); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-4) var(--sp-4); box-shadow: var(--shadow); } .panel h2 { display: flex; align-items: center; gap: 7px; margin: 0 0 var(--sp-3); font-size: var(--t-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); } .panel h2 .ic { color: var(--primary); } .panel h2 .count { color: var(--warn); } .panel h2 .count.crit { color: var(--crit); } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); } .panel-head .key { font-size: var(--t-xs); color: var(--ink-3); letter-spacing: 0; text-transform: none; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-4); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4) var(--sp-4); } /* -------------------------------------------------------------- table --- */ .tbl { width: 100%; border-collapse: collapse; } .tbl th { text-align: left; font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 6px var(--sp-3); border-bottom: var(--line); white-space: nowrap; } .tbl td { padding: 7px var(--sp-3); font-size: var(--t-sm); border-bottom: 1px solid var(--petrol-850); transition: background-color .15s ease; } .tbl tr:last-child td { border-bottom: 0; } .tbl tr:hover td { background: var(--petrol-900); } .tbl .num, .tbl th.num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; } .tbl .id { font-weight: 600; } .tbl .dim { color: var(--ink-3); } .tbl .time { font-family: var(--font-num); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; } /* --------------------------------------------------------------- chip --- */ .chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 500; white-space: nowrap; } .chip .ic { margin: 0; } .chip--quiet { background: var(--petrol-850); color: var(--ink-2); } .chip--hollow { color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--petrol-700); } .chip--warn { background: var(--warn-dim); color: var(--warn); } .chip--crit { background: var(--crit-dim); color: var(--crit); } .chip--accent { background: var(--accent-soft); color: var(--accent); } /* --------------------------------------------------------------- rows --- */ .watch { display: grid; gap: var(--sp-1); } .watch-row { display: grid; grid-template-columns: 3px 1fr auto auto; align-items: center; gap: var(--sp-3); background: var(--petrol-900); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); } .watch-row .bar { width: 3px; height: 24px; border-radius: var(--r-pill); } .watch-name { font-weight: 600; font-size: var(--t-sm); } .watch-where { font-size: var(--t-xs); color: var(--ink-3); } .watch-dev { font-family: var(--font-num); font-size: var(--t-md); font-variant-numeric: tabular-nums; } .watch-age { font-family: var(--font-num); font-size: var(--t-xs); color: var(--ink-3); min-width: 48px; text-align: right; } .watch-empty { color: var(--ink-3); font-size: var(--t-sm); padding: var(--sp-5) 0; text-align: center; } /* -------------------------------------------------------------- chart --- */ .chart svg { width: 100%; height: auto; display: block; margin-top: var(--sp-1); } .chart-key { font-size: var(--t-xs); color: var(--ink-3); } .chart-key .k { display: inline-flex; align-items: center; gap: 6px; margin-left: var(--sp-4); } .chart-key .swatch { width: 14px; height: 3px; border-radius: var(--r-pill); display: inline-block; } /* --------------------------------------------------------------- form --- */ .field { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-1) var(--sp-5); align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--petrol-850); } .field:last-child { border-bottom: 0; } .field-name { font-size: var(--t-sm); font-weight: 600; } .field-desc { grid-column: 1; font-size: var(--t-xs); color: var(--ink-3); line-height: 1.5; } .field-ctl { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: var(--sp-2); } .field-default { font-size: var(--t-xs); color: var(--ink-3); font-family: var(--font-num); } input.num-in { width: 72px; padding: 6px 8px; text-align: right; background: var(--surface); color: var(--ink); border: 1px solid var(--petrol-700); border-radius: var(--r-sm); font: 500 var(--t-sm)/1 var(--font-num); font-variant-numeric: tabular-nums; transition: border-color .18s ease, box-shadow .18s ease; } input.num-in:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: transparent; } .btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-sm); cursor: pointer; background: var(--surface); color: var(--ink-2); border: 1px solid var(--petrol-700); font: 500 var(--t-sm)/1 var(--font-ui); } .btn:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); } .btn--primary { background: var(--primary); border-color: var(--primary); color: #FFFFFF; } .btn--primary:hover { background: var(--primary); color: #FFFFFF; opacity: .92; } /* --------------------------------------------------------------- note --- */ .note { padding: var(--sp-4) var(--gutter) var(--sp-5); font-size: var(--t-xs); color: var(--ink-3); line-height: 1.6; border-top: var(--line); margin-top: var(--sp-4); } .note code { font-family: var(--font-num); color: var(--ink-2); } details.note summary { cursor: pointer; font-weight: 600; color: var(--ink-2); } details.note[open] summary { margin-bottom: var(--sp-1); } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* ------------------------------------------------------------- motion --- */ @media (prefers-reduced-motion: no-preference) { #flow, .flowdash { animation: flow 9s linear infinite; } @keyframes flow { to { stroke-dashoffset: -320; } } .pulse { animation: pulse 2.6s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .4 } } } @media (max-width: 1400px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .kpis { gap: var(--sp-3) 48px; } }