:root{ --ink:#000000; --ink-2:#070B11; --ink-3:#0E141C; --line:#1B2530; --line-2:#2A3848; --paper:#FFFFFF; --paper-2:#CFD8E2; --muted:#6F7B89; --cyan:#19A7E0; --cyan-2:#5DD3FF; --live:#5DD3FF; /* Form-input surface used by ~10 admin/portal views via inline style="background:var(--panel-2,#0c1117); …". The fallback used to be dark hex literal so light-theme overrides couldn't reach it — making every input field look like a black bar on the admin client profile / tickets / CRM views in light mode. Defining the token here (with a light-mode pairing below) lets the same inline style render correctly in both themes without touching every view. */ --panel-2:#0c1117; } /* Light theme — opt-in via (set server-side from * the lochstudios_theme cookie OR live-toggled by /assets/js/theme-toggle.js). * Default stays dark; the toggle is portal-only for now. * Cyan accents are kept so brand identity carries across both themes. */ :root[data-theme="light"]{ --ink:#F4F6F9; /* page background */ --ink-2:#FFFFFF; /* card / surface */ --ink-3:#EAEEF3; /* inset / nav rail */ --line:#D5DAE2; --line-2:#C0C8D4; --paper:#0A0E14; /* primary text */ --paper-2:#2A3340; /* secondary text */ --muted:#6F7B89; /* tertiary text — fine on both */ --cyan:#0F8DC2; /* nudged darker for AA contrast on white */ --cyan-2:#1AA4DF; --live:#1AA4DF; --panel-2:#FFFFFF; /* form-input surface — white on the soft grey page */ } :root[data-theme="light"] body[data-portal-app]{ --ink-1:#FFFFFF; --ink-4:#E0E5EC; --line-3:#B4BCC7; --paper-3:#445466; --muted-2:#8A95A3; --green:#1F9C66; --amber:#B5750A; --red:#C53030; } /* Twemoji Country Flags — Mozilla-maintained font that backfills emoji * flag glyphs on Windows (which otherwise renders regional-indicator * pairs as text like "AU"). unicode-range scopes the font to flag * codepoints only, so the rest of the page keeps its system font. */ @font-face{ font-family:"Twemoji Country Flags"; unicode-range:U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F; src:url("https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2") format("woff2"); font-display:swap; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--ink); color:var(--paper); font-family:"Space Grotesk", system-ui, sans-serif; font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } body::before{ content:""; position:fixed; inset:0; background: radial-gradient(1200px 800px at 80% -10%, rgba(25,167,224,0.10), transparent 60%), radial-gradient(900px 700px at -10% 110%, rgba(93,211,255,0.06), transparent 60%); pointer-events:none; z-index:0; } body::after{ content:""; position:fixed; inset:0; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px); pointer-events:none; mix-blend-mode:overlay; z-index:1; } .wrap{position:relative; z-index:2} .mono{font-family:"JetBrains Mono", ui-monospace, monospace; font-feature-settings:"ss01","ss02"} .serif{font-family:"Instrument Serif", "Times New Roman", serif; font-weight:400; letter-spacing:-0.01em} .it{font-style:italic} .label{ font-family:"JetBrains Mono", ui-monospace, monospace; font-size:10.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); } .label .dot{display:inline-block; width:4px; height:4px; background:var(--cyan); border-radius:50%; vertical-align:2px; margin-right:8px} .label.live .dot{background:var(--live); box-shadow:0 0 0 0 rgba(93,211,255,.6); animation:pulse 2.4s infinite} @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(93,211,255,.55)} 70%{box-shadow:0 0 0 8px rgba(93,211,255,0)} 100%{box-shadow:0 0 0 0 rgba(93,211,255,0)} } .container{max-width:1320px; margin:0 auto; padding:0 36px} .rule{height:1px; background:var(--line); border:0; margin:0} /* ── Top bar ───────────────────────────── */ .topbar{ position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); background:linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.65)); border-bottom:1px solid var(--line); } :root[data-theme="light"] .topbar{ background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78)); } .topbar-row{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; padding:14px 0; gap:24px; } .brand{display:flex; align-items:center; gap:14px; min-width:0} .brand-logo{ display:flex; align-items:center; font-family:"Instrument Serif", serif; font-size:30px; line-height:1; letter-spacing:-0.01em; color:var(--paper); text-decoration:none; } .brand-logo em{color:var(--cyan-2); font-style:italic; font-weight:400} .brand-logo img{max-height:54px; width:auto; display:block} .navmid{ display:flex; gap:30px; justify-content:center; font-size:13px; } .navmid a{color:var(--paper); text-decoration:none; opacity:.78; transition:opacity .2s, color .2s} .navmid a:hover{opacity:1; color:var(--cyan-2)} .navend{display:flex; gap:10px; justify-content:flex-end; align-items:center} /* Theme toggle in the public top bar — icon-only, inherits text color. */ .theme-toggle-btn{ background:transparent; border:1px solid var(--line-2); border-radius:2px; color:var(--paper); cursor:pointer; padding:7px 9px; line-height:0; display:inline-flex; align-items:center; justify-content:center; transition:border-color .2s, color .2s, background .2s; } .theme-toggle-btn:hover{ border-color:var(--paper-2); color:var(--cyan-2) } .theme-toggle-btn .ic{ display:none } .theme-toggle-btn .ic-moon{ display:inline-block } :root[data-theme="light"] .theme-toggle-btn .ic-moon{ display:none } :root[data-theme="light"] .theme-toggle-btn .ic-sun { display:inline-block } .btn{ font-family:"Space Grotesk", sans-serif; font-size:13px; letter-spacing:0.01em; padding:9px 16px; border-radius:2px; border:1px solid var(--line-2); background:transparent; color:var(--paper); cursor:pointer; transition:all .2s; text-decoration:none; display:inline-flex; align-items:center; gap:8px; } .btn:hover{border-color:var(--paper-2); background:rgba(242,236,222,0.04)} .btn-primary{ background:var(--cyan); color:var(--ink); border-color:var(--cyan); font-weight:500; } .btn-primary:hover{background:var(--cyan-2); border-color:var(--cyan-2); color:var(--ink)} .btn .arrow{transition:transform .25s} .btn:hover .arrow{transform:translateX(3px)} /* ── Status strip (single-line, used on service pages and below ticker on home) ── */ .status-bar{ border-bottom:1px solid var(--line); padding:5px 0; font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); } .status-bar-row{ display:flex; justify-content:space-between; align-items:center; width:100%; } .status-bar .live{color:var(--paper); display:inline-flex; align-items:center; gap:8px} .status-bar .dot{ width:5px; height:5px; background:var(--cyan-2); border-radius:50%; box-shadow:0 0 0 0 rgba(93,211,255,.55); animation:pulse 2.4s infinite; } .status-bar a{color:var(--muted); text-decoration:none} .status-bar a:hover{color:var(--paper)} /* ── Footer (compact, used on service pages) ───────────────────────── */ .foot-compact{ border-top:1px solid var(--line); padding:36px 0; font-family:"JetBrains Mono", monospace; font-size:11px; color:var(--muted); letter-spacing:.06em; } .foot-compact .foot-row{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; } .foot-compact b{color:var(--paper); font-weight:500; letter-spacing:.1em} /* ── Responsive ──────────────────────────────────────────────────── */ @media (max-width: 980px){ .navmid{display:none} .topbar-row{grid-template-columns:1fr auto} .navend .btn-secondary{display:none} }