/* ══════════════════════════════════════════════════════════════════════════ THEME: "editorial" — opted into with ?theme=editorial. Nothing in here applies unless carries .t-editorial; the default warm-gold card in index.html is untouched. Built for Concept A of the Patio 44 site, which speaks in dark navy, hairline rules, colour as stroke rather than fill, Romano Revival for display and Futura for everything else. The chat stops being a white card on a gold gradient and sits IN the navy: one panel a shade lighter than the page, a single gold rule under the crest, bubbles drawn as outlined cards. The typography carries the identity; the palette gets out of its way. Same DOM, same JS, same behaviour. Only the skin. ══════════════════════════════════════════════════════════════════════════ */ @font-face { font-family:"Romano Revival"; src:url("/fonts/RomanoRevival-Regular.otf") format("opentype"); font-weight:400; font-display:swap; } @font-face { font-family:"Futura"; src:url("/fonts/FuturaCyrillicBook.ttf") format("truetype"); font-weight:400; font-display:swap; } @font-face { font-family:"Futura"; src:url("/fonts/FuturaCyrillicMedium.ttf") format("truetype"); font-weight:500; font-display:swap; } html.t-editorial { --e-page:#003562; /* the site's ground — the frame is transparent onto it */ --e-panel:#0b2f57; /* the chat, one step up from the page */ --e-panel-2:#0f3862; /* raised bits inside the panel: the guest bubble, "done" */ --e-rule:rgba(255,255,255,.14); --e-gold:#b69947; /* the site's gold, exactly */ --e-gold-soft:rgba(182,153,71,.55); --e-text:#f2f4f7; --e-muted:rgba(242,244,247,.62); --e-faint:rgba(242,244,247,.38); --e-display:"Romano Revival", Georgia, serif; --e-body:"Futura", "Jost", system-ui, sans-serif; } html.t-editorial body { font-family:var(--e-body); color:var(--e-text); background:transparent; } html.t-editorial.embed body { background:transparent; } /* the shell dissolves: no gradient, no radius stack, no drop shadow */ html.t-editorial .shell { background:transparent; padding:0; box-shadow:none; border-radius:0; } html.t-editorial .chat { background:var(--e-panel); color:var(--e-text); border:1px solid var(--e-rule); border-radius:4px; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); } /* header: the crest in Romano Revival, a hairline gold rule beneath, nothing filled */ html.t-editorial .head { background:transparent; border-bottom:1px solid var(--e-rule); padding:22px 22px 18px; } html.t-editorial .crest { font-family:var(--e-display); font-weight:400; font-size:1.55rem; letter-spacing:.14em; color:var(--e-text); } html.t-editorial .crest b { color:var(--e-gold); margin:0 .12em; } html.t-editorial .crest span { font-family:var(--e-body); font-size:.62rem; letter-spacing:.26em; color:var(--e-gold); margin-top:9px; font-weight:400; } html.t-editorial .crest::after { content:""; display:block; width:56px; height:1px; background:var(--e-gold); margin:14px auto 0; } html.t-editorial .who { font-family:var(--e-body); color:var(--e-gold); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; } html.t-editorial .stat { color:var(--e-faint); } html.t-editorial .reset { border-color:var(--e-gold-soft); color:var(--e-gold); } html.t-editorial .reset:hover { background:var(--e-gold); color:var(--e-page); } /* the log: transparent, so the panel is one continuous surface */ html.t-editorial .log { background:transparent; padding:20px 22px 8px; } html.t-editorial .nm { font-family:var(--e-body); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--e-gold); margin:0 0 8px 2px; } /* bubbles: Maya is an outlined card with a gold edge; the guest is a solid raised block */ html.t-editorial .bub { border-radius:4px; font-size:.95rem; line-height:1.6; padding:13px 16px; } html.t-editorial .turn.bot .bub { background:transparent; border:1px solid var(--e-rule); color:var(--e-text); border-left:2px solid var(--e-gold); border-bottom-left-radius:4px; } html.t-editorial .turn.me .bub { background:var(--e-panel-2); border:1px solid transparent; color:var(--e-text); border-bottom-right-radius:4px; } html.t-editorial .avail.yes { background:rgba(99,185,143,.14); color:#8fd6b1; } html.t-editorial .avail.no { background:rgba(224,119,106,.14); color:#f0a094; } html.t-editorial .typing i { background:var(--e-gold); } /* the opening chips: outlined, tint gold on hover, on the panel — not in a khaki box */ html.t-editorial .chips { background:transparent; padding:2px 22px 16px; } html.t-editorial .chipbox { background:transparent; border:1px solid var(--e-rule); border-radius:4px; padding:12px; } html.t-editorial .chiplab { font-family:var(--e-body); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--e-muted); margin:0 0 10px 2px; } html.t-editorial .chip { background:transparent; border:1px solid var(--e-rule); color:var(--e-text); border-radius:3px; font-family:var(--e-body); font-size:.84rem; transition:border-color .16s ease, background .16s ease, color .16s ease; } html.t-editorial .chip:hover { border-color:var(--e-gold); background:rgba(182,153,71,.10); color:var(--e-text); transform:none; box-shadow:none; } html.t-editorial .chip svg { stroke:var(--e-gold); } /* every later question */ html.t-editorial .qchip { border-color:var(--e-gold-soft); color:var(--e-gold); border-radius:3px; font-family:var(--e-body); font-size:.82rem; } html.t-editorial .qchip:hover { background:var(--e-gold); border-color:var(--e-gold); color:var(--e-page); } html.t-editorial .back { background:transparent; border-bottom:1px solid var(--e-rule); color:var(--e-text); } html.t-editorial .back .go { background:var(--e-gold); border-color:var(--e-gold); color:var(--e-page); border-radius:3px; } html.t-editorial .back .fresh { border-color:var(--e-gold-soft); color:var(--e-gold); border-radius:3px; } html.t-editorial .back .fresh:hover { background:var(--e-gold); border-color:var(--e-gold); color:var(--e-page); } /* the collected-facts rail and the tools row: quiet, on the panel */ html.t-editorial .rail { background:transparent; border-top:1px solid var(--e-rule); } html.t-editorial .rail b { color:var(--e-faint); } html.t-editorial .pill { background:transparent; border-color:var(--e-rule); color:var(--e-muted); border-radius:3px; } html.t-editorial .pill.on { background:transparent; border-color:var(--e-gold); color:var(--e-text); } html.t-editorial .pill.on::before { color:var(--e-gold); } html.t-editorial .tools { background:transparent; border-top:1px solid var(--e-rule); } html.t-editorial .toolbtn { background:transparent; border:1px solid var(--e-gold-soft); color:var(--e-gold); border-radius:3px; font-family:var(--e-body); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; } html.t-editorial .toolbtn:hover { background:var(--e-gold); border-color:var(--e-gold); color:var(--e-page); } /* composer: hairline field, outlined send that fills */ html.t-editorial form.compose { background:transparent; border-top:1px solid var(--e-rule); } html.t-editorial form.compose textarea { background:transparent; color:var(--e-text); border:1px solid var(--e-rule); border-radius:3px; font-family:var(--e-body); font-size:.95rem; } html.t-editorial form.compose textarea::placeholder { color:var(--e-faint); } html.t-editorial form.compose textarea:focus { border-color:var(--e-gold); box-shadow:none; } html.t-editorial .send { background:transparent; border:1px solid var(--e-gold); color:var(--e-gold); border-radius:3px; } html.t-editorial .send:hover:not(:disabled) { background:var(--e-gold); color:var(--e-page); } /* side panels and cards, where shown */ html.t-editorial .card { background:transparent; border-color:var(--e-rule); border-radius:4px; } html.t-editorial .card h4 { font-family:var(--e-body); letter-spacing:.2em; color:var(--e-gold); } html.t-editorial .sum { border-bottom-color:var(--e-rule); } html.t-editorial .sum .k { color:var(--e-muted); } html.t-editorial .mute, html.t-editorial .loc span { color:var(--e-muted); } html.t-editorial .loc { border-bottom-color:var(--e-rule); } html.t-editorial .loc b { font-family:var(--e-body); letter-spacing:.18em; color:var(--e-gold); } html.t-editorial .done { background:var(--e-panel-2); color:var(--e-text); border:1px solid var(--e-rule); border-radius:4px; } html.t-editorial .modal .inner { background:var(--e-panel); color:var(--e-text); border:1px solid var(--e-rule); border-radius:4px; } html.t-editorial ::selection { background:rgba(182,153,71,.32); }