/* ============================================================================= FO Portal — v33 "Briefing" skin (design direction 1b, Crimson accent) Additive override, loads LAST (after skin291 + skin30 + responsive-layout). Boarding-pass clean: light paper background, solid white cards, hairline edges, mono readouts, red only as a signal. Crimson #BE1039 accent. Sandbox gated by the loader script in index.html (same pattern as skin291). ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600;700&display=swap'); /* ---------- tokens: light (canonical 1b) ---------- */ :root, :root[data-theme="light"]{ --red:#BE1039; --ink:#161a20; --body:#242a33; --muted:#6a7280; --line:#e7e9ef; --soft:#f0f2f5; --card:#ffffff; --scr:#f3f4f7; --glasscard:#ffffff; --glassbar:#ffffff; --glassedge:#e7e9ef; --navmut:#8a93a3; --sheen:transparent; --chipbg:#161a20; --shadow:0 1px 2px rgba(20,23,28,.04); --shadow-lg:0 10px 30px rgba(20,23,28,.12); } @media(prefers-color-scheme:light){:root:not([data-theme]){ --red:#BE1039; --ink:#161a20; --body:#242a33; --muted:#6a7280; --line:#e7e9ef; --soft:#f0f2f5; --card:#ffffff; --scr:#f3f4f7; --glasscard:#ffffff; --glassbar:#ffffff; --glassedge:#e7e9ef; --navmut:#8a93a3; --sheen:transparent; --chipbg:#161a20; --shadow:0 1px 2px rgba(20,23,28,.04); --shadow-lg:0 10px 30px rgba(20,23,28,.12); }} /* ---------- tokens: dark (Briefing adapted, same hairline language) ---------- */ :root[data-theme="dark"]{ --red:#F0466E; --ink:#eef1f6; --body:#d9dee7; --muted:#8b93a2; --line:#232833; --soft:#181d26; --card:#12161d; --scr:#0b0e13; --glasscard:#12161d; --glassbar:#0f1319; --glassedge:#232833; --navmut:#79808f; --sheen:transparent; --chipbg:#eef1f6; --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 10px 30px rgba(0,0,0,.5); } @media(prefers-color-scheme:dark){:root:not([data-theme]){ --red:#F0466E; --ink:#eef1f6; --body:#d9dee7; --muted:#8b93a2; --line:#232833; --soft:#181d26; --card:#12161d; --scr:#0b0e13; --glasscard:#12161d; --glassbar:#0f1319; --glassedge:#232833; --navmut:#79808f; --sheen:transparent; --chipbg:#eef1f6; --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 10px 30px rgba(0,0,0,.5); }} :root[data-theme="dark"] .swcal-c.selon{background:#1a2536} /* the base app paints a red/blue aurora gradient onto in dark with !important; this skin loads last, so the flat Briefing paper wins in both dark paths. */ :root[data-theme="dark"] body, :root[data-theme="dark"] #app, :root[data-theme="dark"] #login{background:var(--scr)!important} @media(prefers-color-scheme:dark){:root:not([data-theme]) body, :root:not([data-theme]) #app{background:var(--scr)!important}} /* ---------- calm paper background: no aurora, no Living Sky ---------- */ #fdamb, #fdamb canvas, canvas.lsky, #lsky, body>.sky, .sky canvas{display:none!important} body, :root[data-theme="dark"] body{background:var(--scr)!important} @media(prefers-color-scheme:dark){:root:not([data-theme]) body{background:var(--scr)!important}} @media(prefers-color-scheme:light){:root:not([data-theme]) body{background:var(--scr)!important}} /* ---------- typography ---------- */ html,body{font-family:Inter,-apple-system,system-ui,sans-serif;color:var(--body)} .hero h2,.brandname,.statbox .n,.pa{font-family:"Instrument Sans",-apple-system,system-ui,sans-serif!important} .sec-title,.laygrp,.scard .lbl,.pickbar .pt{font-family:"JetBrains Mono",ui-monospace,monospace!important} .laycode .codetxt,.pchip{font-family:"JetBrains Mono",ui-monospace,monospace!important} /* ---------- cards: solid, hairline, tiny shadow (kill the glass) ---------- */ .card,.scard{background:var(--card)!important;border:1px solid var(--line)!important;border-radius:18px; box-shadow:var(--shadow)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important} .card .row+.row::before{background:var(--line)} .row .t{color:var(--ink);font-weight:600} .row .s{color:var(--muted)} /* ---------- topbar ---------- */ .topbar{background:var(--glassbar)!important;border-bottom:1px solid var(--line); backdrop-filter:none!important;-webkit-backdrop-filter:none!important} /* ---------- hero: quiet ink on paper, no sky shadow ---------- */ .hero h2{color:var(--ink)!important;font-weight:600;letter-spacing:-.02em;text-shadow:none!important} .sec-title{color:var(--muted)!important;opacity:1!important;text-shadow:none!important; font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase} :root[data-theme="light"] .hero h2,:root[data-theme="light"] .sec-title{text-shadow:none!important} /* ---------- controls ---------- */ .btn{background:var(--red)!important;border-radius:14px;box-shadow:none!important;font-weight:600} .btn.sec{background:var(--card)!important;border:1px solid var(--line)!important;color:var(--ink)!important; backdrop-filter:none!important;-webkit-backdrop-filter:none!important} .search,.field input,.field select,textarea,.phrow input{background:var(--card)!important;border:1px solid var(--line)!important; border-radius:12px;color:var(--ink)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important} .search:focus,.field input:focus,.field select:focus,textarea:focus,.phrow input:focus{border-color:var(--red)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 15%,transparent)!important} .note,.fileinput{background:var(--soft)!important;border-color:var(--line)!important;color:var(--muted)!important; backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:12px} .chip,.hero .chip{background:var(--card);border:1px solid var(--line);color:var(--ink);backdrop-filter:none!important;font-weight:600} .badge{background:color-mix(in srgb,var(--red) 9%,transparent);color:var(--red)} .tag.cop{background:var(--red)} .av{box-shadow:none} #toTop{background:var(--red);box-shadow:var(--shadow-lg)} .statbox{box-shadow:var(--shadow)!important;border-color:var(--line)!important} .fbtn{background:var(--card);border-color:var(--line);color:var(--body)} .fbtn.on{background:var(--ink);border-color:var(--ink);color:var(--card)} .tg.on{background:var(--ink);border-color:var(--ink);color:var(--card)} /* ---------- bottom nav: classic bar, hairline top, crimson active ---------- */ .nav{left:0!important;right:0!important;transform:none!important;width:100%!important;max-width:none!important; bottom:0!important;border-radius:0!important;background:var(--glassbar)!important; border:none!important;border-top:1px solid var(--line)!important; box-shadow:0 -1px 0 rgba(20,23,28,.02)!important;padding:8px 6px calc(8px + env(safe-area-inset-bottom))!important; backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important} .navlens{display:none!important} .nav button{color:var(--navmut)} .nav button svg{stroke:var(--navmut);filter:none!important} .nav button.on{color:var(--red)} .nav button.on svg{stroke:var(--red);filter:none!important;transform:none} /* content no longer needs clearance for a floating pill */ @media(min-width:768px){.nav{padding-left:max(6px,calc((100% - var(--col))/2))!important;padding-right:max(6px,calc((100% - var(--col))/2))!important}} /* ---------- sheets / overlays ---------- */ .ov{background:rgba(22,26,32,.45);backdrop-filter:blur(2px)} .sheet{background:var(--card);box-shadow:0 -8px 40px rgba(20,23,28,.18)} /* ---------- layover pieces ---------- */ .laygrp{background:transparent;border:none;backdrop-filter:none!important;-webkit-backdrop-filter:none!important; box-shadow:none;color:var(--muted);padding-left:2px} .laycode{border-radius:13px;border:1px solid var(--line)} .pickbar{background:color-mix(in srgb,var(--red) 7%,transparent);border:1px solid color-mix(in srgb,var(--red) 22%,transparent)} .pickbar .pt{color:var(--red)} .pchip{background:var(--card);border-color:var(--line)} .scard .sh .ico{background:var(--soft);border-color:var(--line)} .scard summary{color:var(--red)} .sfoot{border-top:1px solid var(--line)} /* ---------- login keeps its photo, form goes Briefing (token based so dark works) ---------- */ #login .field input,#login .field select{background:var(--soft)!important;border:1px solid var(--line)!important;color:var(--ink)!important} .brandmark{background:var(--red)!important;border-radius:10px} /* ---------- motion: calmer entrance ---------- */ @keyframes briefin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .view.on{animation:briefin .22s ease} :focus-visible{outline:2px solid var(--red)!important;outline-offset:1px!important;box-shadow:none!important}