/* callboard, the BOX OFFICE look. * * Spike tape changed the paint and Rob said so: "all this really did was change * the colors and font. I am talking about a whole feeling." He pointed at * BookTix. What makes that feel the way it does is not colour at all: * * - the menu gets out of the way: a strip of icons that opens on demand, * where callboard had a permanent wall of twenty-five text links * - a flat, quiet top bar, with the switches behind one gear * - small calm titles, one round friendly face, nothing in capitals * - AIR: big padding, tall rows, almost no borders, white sheets on a pale * ground, one accent colour * * So this look changes the SHELL. The icon strip needs each rail group's * buttons wrapped in a .fly panel, which js/00-shell.js does for every look and * app.css makes invisible (display:contents) to the other two. * * Same rule as spike.css: every selector starts with * :root[data-look="boxoffice"], at-rules included, and server/test.js fails if * one escapes. The strip is desktop only; a phone keeps the scrolling menu. * Students keep their own short rail, which has no groups to collapse. */ /* ---- tokens ---- */ :root[data-look="boxoffice"]{ --radius:10px; --radius-sm:6px; --font-display:'Poppins',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --font-body:'Poppins',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --shadow:0 1px 3px rgba(16,24,40,.06); --shadow-lg:0 16px 40px rgba(16,24,40,.14); --rail:64px; } /* House is the look as it is meant to be seen. */ :root[data-look="boxoffice"][data-theme="house"]{ --bg:#f5f7fb; --surface:#ffffff; --surface2:#eef4fd; --line:#e3e8ef; --ink:#18212d; --ink-dim:#465264; --ink-faint:#6a7587; --teal:#15875a; --coral:#cc3a54; --amber:#a66a0a; --violet:#6a45c9; --club:#0b79b8; --accent:#2f7de1; --bulb:#2f7de1; --glow:0 0 0 3px rgba(47,125,225,.22); } :root[data-look="boxoffice"]:not([data-theme="house"]):not([data-theme="tech"]){ --bg:#10151d; --surface:#18202b; --surface2:#1f2a3a; --line:#2a3646; --ink:#e8edf4; --ink-dim:#b4bfce; --ink-faint:#8d9aad; --teal:#3ecf8e; --coral:#ff6b85; --amber:#f5b942; --violet:#a98bff; --club:#55b8f2; --accent:#5aa2f5; --bulb:#5aa2f5; --glow:0 0 0 3px rgba(90,162,245,.25); } /* ---- type: quiet ---- */ :root[data-look="boxoffice"] body{font-size:15px;line-height:1.65} :root[data-look="boxoffice"] h1, :root[data-look="boxoffice"] h2, :root[data-look="boxoffice"] .showcard h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;text-transform:none} :root[data-look="boxoffice"] h1{font-size:22px} :root[data-look="boxoffice"] .card h2{font-size:19px;margin-bottom:6px} :root[data-look="boxoffice"] .card p.sub{font-size:14px;line-height:1.6;margin-bottom:18px;max-width:70ch} :root[data-look="boxoffice"] .grouphd, :root[data-look="boxoffice"] th, :root[data-look="boxoffice"] .stat .k, :root[data-look="boxoffice"] .runway h3{letter-spacing:.06em;font-weight:600} /* ---- the top bar: flat, white, full width ---- */ :root[data-look="boxoffice"] header{padding:0} :root[data-look="boxoffice"] .marquee{border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--surface); padding:11px 28px;gap:22px;box-shadow:0 1px 2px rgba(16,24,40,.04)} :root[data-look="boxoffice"] .bulbs{display:none} :root[data-look="boxoffice"] .crumb .home{font-weight:700;font-size:23px;letter-spacing:-.03em;color:var(--accent)} :root[data-look="boxoffice"] .crumb .home b{color:var(--accent)} :root[data-look="boxoffice"] .showpick>button{background:transparent;border-color:transparent;font-weight:500;font-size:15px} :root[data-look="boxoffice"] .showpick>button:hover{background:var(--surface2)} :root[data-look="boxoffice"] .topnav button{font-weight:500;font-size:14px;color:var(--ink-dim);border-color:transparent} :root[data-look="boxoffice"] .topnav button[aria-current="true"]{background:var(--surface2);color:var(--accent);border-color:transparent} /* The two switches live behind one gear, the way BookTix keeps three quiet icons where callboard had two rows of buttons. Every look has the gear since 10/6 (app.css); this is only how it looks here. */ :root[data-look="boxoffice"] .prefsbtn{border:0} :root[data-look="boxoffice"] .prefspanel{border-radius:10px;box-shadow:var(--shadow-lg);min-width:250px} :root[data-look="boxoffice"] .prefspanel .themelbl{font-size:11px;letter-spacing:.06em} :root[data-look="boxoffice"] .themes button{border-radius:6px;font-weight:500} /* ---- surfaces: sheets with air, not boxes with borders ---- */ :root[data-look="boxoffice"] main{padding:30px 40px 90px;max-width:1280px} :root[data-look="boxoffice"] .card{border:0;box-shadow:var(--shadow);padding:28px 32px} /* A sheet fills its column. Several cards carry an inline max-width from the days of a 214px menu beside them; with the menu folded that left the runway and the sheet under it two different widths. */ :root[data-look="boxoffice"] #slCard{max-width:none !important} :root[data-look="boxoffice"] .runway{max-width:none} :root[data-look="boxoffice"] .stat{border:0;background:var(--surface2);padding:16px 18px} :root[data-look="boxoffice"] .stat .v{font-weight:600} :root[data-look="boxoffice"] input, :root[data-look="boxoffice"] select, :root[data-look="boxoffice"] textarea{background:var(--surface);border-color:var(--line);border-radius:6px;padding:11px 13px;font-size:14.5px} :root[data-look="boxoffice"] input:focus, :root[data-look="boxoffice"] select:focus, :root[data-look="boxoffice"] textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--glow)} :root[data-look="boxoffice"] label{font-weight:500;font-size:13px;margin:16px 0 6px} :root[data-look="boxoffice"] td{padding:13px 10px} :root[data-look="boxoffice"] th{padding-bottom:10px} :root[data-look="boxoffice"] .chip{font-weight:500;padding:5px 12px} :root[data-look="boxoffice"] .addbox{border:0;background:var(--surface2);padding:18px 20px} :root[data-look="boxoffice"] .alert{padding:13px 16px;font-size:14px} /* ---- buttons: one solid blue, small capitals, like a box office ---- */ :root[data-look="boxoffice"] button.primary{background:var(--accent);color:#ffffff;border-radius:6px;padding:12px 20px; font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase} :root[data-look="boxoffice"] button.primary{box-shadow:none} :root[data-look="boxoffice"] button.primary:hover{filter:brightness(1.07);box-shadow:none} :root[data-look="boxoffice"] button.ghost{border-radius:6px;padding:11px 18px;font-weight:500;font-size:14px;background:var(--surface)} :root[data-look="boxoffice"] button.ghost.gobtn{padding:7px 14px;font-size:13px} :root[data-look="boxoffice"] main button:where(:not([class])), :root[data-look="boxoffice"] .drawer button:where(:not([class])){border-radius:6px;font-weight:500} :root[data-look="boxoffice"] button.danger{border-radius:6px;padding:11px 18px;font-weight:500;font-size:14px} :root[data-look="boxoffice"] .seg button{border-radius:6px;font-weight:500;padding:10px} :root[data-look="boxoffice"] .seg button.on{background:var(--accent);color:#ffffff} /* ---- the runway: rows with a hairline between, not boxes in a box ---- */ :root[data-look="boxoffice"] .runway{border:0;box-shadow:var(--shadow);padding:22px 28px;max-width:none;background:var(--surface)} :root[data-look="boxoffice"] .runway ol{gap:0} :root[data-look="boxoffice"] .runway li{border:0;border-radius:8px;padding:14px 12px;align-items:center} :root[data-look="boxoffice"] .runway li + li{border-top:1px solid var(--line);border-radius:0} :root[data-look="boxoffice"] .runway li.next{background:var(--surface2);border-color:transparent;border-radius:8px} :root[data-look="boxoffice"] .runway li.next + li{border-top-color:transparent} :root[data-look="boxoffice"] .runway li .num{border-radius:50%;flex-basis:26px;height:26px} :root[data-look="boxoffice"] .runway li.done .num{background:var(--teal);border-color:var(--teal);color:#ffffff} :root[data-look="boxoffice"] .runway li .what b{font-weight:600;font-size:14.5px} :root[data-look="boxoffice"] .runway li .what span{font-size:13px} /* ---- the sign-up sheet: soft tiles with room in them ---- */ :root[data-look="boxoffice"] #slots{gap:12px !important;grid-template-columns:repeat(auto-fill,minmax(164px,1fr)) !important} :root[data-look="boxoffice"] .slotbtn{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:13px 15px} :root[data-look="boxoffice"] .slotbtn > div:first-child{font-size:15px !important;font-weight:600 !important} :root[data-look="boxoffice"] .slotbtn.taken{background:var(--surface2);border-color:transparent;opacity:1} :root[data-look="boxoffice"] .slotbtn.here{background:color-mix(in srgb,var(--teal) 14%,var(--surface));border-color:var(--teal);box-shadow:none} :root[data-look="boxoffice"] .slotbtn:hover{border-color:var(--accent)} :root[data-look="boxoffice"] .prob.note{border:0;background:var(--surface2)} :root[data-look="boxoffice"] .askbox{border:0;box-shadow:var(--shadow);background:var(--surface);padding:24px 28px} /* ---- THE RAIL: a strip of icons, each group a panel that flies out ---- */ @media (min-width:821px){ :root[data-look="boxoffice"] aside#rail:not(.student){width:var(--rail);flex:0 0 var(--rail);padding:14px 0 40px;overflow:visible;max-height:none; background:var(--surface);border-right:1px solid var(--line);min-height:100vh;z-index:50} :root[data-look="boxoffice"] aside#rail:not(.student) .railhead{display:none} :root[data-look="boxoffice"] aside#rail:not(.student) .railgroup{position:relative;margin:0;padding:0;border:0} :root[data-look="boxoffice"] aside#rail:not(.student) .railgroup > .grouphd{width:var(--rail);height:50px;margin:0;padding:0;display:grid;place-items:center; font-size:0;line-height:0;color:transparent;cursor:pointer;position:relative;outline:none} :root[data-look="boxoffice"] aside#rail:not(.student) .railgroup > .grouphd::before{content:"";width:22px;height:22px;background:var(--ink-faint); -webkit-mask:var(--ico,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E")) center/contain no-repeat;mask:var(--ico,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E")) center/contain no-repeat} :root[data-look="boxoffice"] aside#rail:not(.student) .railgroup:hover > .grouphd::before, :root[data-look="boxoffice"] aside#rail:not(.student) .railgroup:focus-within > .grouphd::before{background:var(--accent)} :root[data-look="boxoffice"] aside#rail:not(.student) .railgroup:hover > .grouphd, :root[data-look="boxoffice"] aside#rail:not(.student) .railgroup:focus-within > .grouphd{background:var(--surface2)} /* Where you are: the group holding the current screen keeps a blue edge. */ :root[data-look="boxoffice"] aside#rail:not(.student) .railgroup:has(button[aria-current="true"]) > .grouphd{box-shadow:inset 3px 0 0 var(--accent)} :root[data-look="boxoffice"] aside#rail:not(.student) .railgroup:has(button[aria-current="true"]) > .grouphd::before{background:var(--accent)} :root[data-look="boxoffice"] aside#rail:not(.student) .fly{display:none;position:absolute;left:var(--rail);top:0;min-width:250px;z-index:80; flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--line);border-left:0; border-radius:0 10px 10px 0;box-shadow:var(--shadow-lg);padding:12px} :root[data-look="boxoffice"] aside#rail:not(.student) .fly::before{content:attr(data-title);font-size:11.5px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--ink-faint);padding:4px 10px 8px} :root[data-look="boxoffice"] aside#rail:not(.student) .railgroup:hover > .fly, :root[data-look="boxoffice"] aside#rail:not(.student) .railgroup:focus-within > .fly{display:flex} /* The bottom group opens upward, so its panel never runs off a short laptop screen. Only the one: with five groups since 10/6, the fourth opening upward would run off the TOP. */ :root[data-look="boxoffice"] aside#rail:not(.student) .railgroup:nth-last-of-type(1) > .fly{top:auto;bottom:0} :root[data-look="boxoffice"] aside#rail:not(.student) .fly button{border-radius:6px;padding:9px 10px;font-size:14px;font-weight:400} :root[data-look="boxoffice"] aside#rail:not(.student) .fly button[aria-current="true"]{background:var(--surface2);color:var(--accent);border-color:transparent;font-weight:500} :root[data-look="boxoffice"] aside#rail:not(.student) .railgroup[data-g="this-show"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Cpath d='M9 6v12' stroke-dasharray='2 2.5'/%3E%3Cpath d='M13 10h5M13 14h3'/%3E%3C/svg%3E")} :root[data-look="boxoffice"] aside#rail:not(.student) .railgroup[data-g="cast"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6'/%3E%3Ccircle cx='17.5' cy='9' r='2.3'/%3E%3Cpath d='M17 14.1c2.4.4 4 2.6 4 5.4'/%3E%3C/svg%3E")} :root[data-look="boxoffice"] aside#rail:not(.student) .railgroup[data-g="tech"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h8M16 7h4M4 12h2M10 12h10M4 17h10M18 17h2'/%3E%3Ccircle cx='14' cy='7' r='2'/%3E%3Ccircle cx='8' cy='12' r='2'/%3E%3Ccircle cx='16' cy='17' r='2'/%3E%3C/svg%3E")} :root[data-look="boxoffice"] aside#rail:not(.student) .railgroup[data-g="rehearsals"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")} :root[data-look="boxoffice"] aside#rail:not(.student) .railgroup[data-g="company"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h12M9 12h12M9 18h12'/%3E%3Ccircle cx='4.5' cy='6' r='1.2'/%3E%3Ccircle cx='4.5' cy='12' r='1.2'/%3E%3Ccircle cx='4.5' cy='18' r='1.2'/%3E%3C/svg%3E")} } /* the runway as one line */ :root[data-look="boxoffice"] .runway{padding:16px 24px} :root[data-look="boxoffice"] .runway .rwlbl{font-weight:600;letter-spacing:.06em} :root[data-look="boxoffice"] .runway .rwnext b{font-weight:600} /* the score sheet */ :root[data-look="boxoffice"] .pip.on{color:#ffffff} :root[data-look="boxoffice"] .crit .lbl{font-size:14.5px} /* On a phone the desktop gutters eat a third of the screen. Keep 16px a side. */ @media (max-width:700px){ :root[data-look="boxoffice"] main{padding:16px 16px 90px} :root[data-look="boxoffice"] .card{padding:18px 16px} }