.fb-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; } .fb-form { display: grid; gap: .65rem; font: 13.5px/1.45 var(--font); color: var(--ink); text-align: left; } .fb-form .fb-q { margin: 0; font-weight: 600; } .fb-kinds { display: flex; flex-wrap: wrap; gap: .35rem; } .fb-kinds button { border: 2px solid #111; border-radius: 4px; background: #fff; color: #111; padding: .25rem .6rem; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } .fb-kinds button:hover { background: var(--accent-bg); } .fb-kinds button[aria-checked="true"] { background: var(--accent); } .fb-form textarea, .fb-form input[type="email"], .fb-form input[type="text"] { width: 100%; border: 2px solid #111; border-radius: 4px; padding: .5rem .6rem; font: inherit; font-size: 13.5px; background: #fff; color: var(--ink); } .fb-form textarea { min-height: 96px; resize: vertical; } .fb-form textarea:focus, .fb-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .fb-l { display: grid; gap: .25rem; font-weight: 600; font-size: 12.5px; } .fb-l .muted { font-weight: 400; } .fb-actions { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; } .fb-send { background: var(--accent); color: #111; border: 2px solid #111; border-radius: 4px; padding: .5rem 1.1rem; font: inherit; font-weight: 700; box-shadow: 3px 3px 0 #111; cursor: pointer; } .fb-send:active { box-shadow: none; transform: translate(3px, 3px); } .fb-send:disabled { opacity: .55; cursor: wait; box-shadow: none; transform: none; } .fb-note { font-size: 12px; color: var(--muted); } .fb-note.bad { color: var(--bad); font-weight: 600; } .fb-thanks { padding: .4rem 0; font-size: 14px; } .fb-thanks b { font-family: var(--hfont); font-weight: 400; display: block; font-size: 17px; margin-bottom: .2rem; } .fb-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 0 .6rem; } .fb-head h2 { font: 400 16px var(--hfont); margin: 0; } .fb-x { border: 0; background: transparent; color: inherit; font-size: 24px; line-height: 1; cursor: pointer; padding: 0 .15rem; } .fb-about { margin: 0; font-size: 12.5px; color: var(--muted); } .fb-about b { color: var(--ink); } .fb-change { border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; } .fb-link { color: #cfcac0; font-size: 12.5px; text-decoration: none; border-bottom: 1px solid #6b675f; white-space: nowrap; } .fb-link:hover { color: var(--accent); border-color: var(--accent); } .fb-tab { position: fixed; right: 0; top: 46%; z-index: 1100; writing-mode: vertical-rl; transform: rotate(180deg); background: var(--accent); color: #111; border: 3px solid #111; border-left: 0; border-radius: 0 6px 6px 0; padding: .9rem .35rem; font: 700 13px var(--font); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; box-shadow: 3px -3px 0 #111; } .fb-tab:hover { background: #ff7a3d; } .fb-side { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 1300; width: 350px; max-width: calc(100vw - 16px); background: var(--bg); color: var(--ink); border: 3px solid #111; border-right: 0; border-radius: 6px 0 0 6px; box-shadow: -6px 6px 0 var(--accent); padding: 1rem 1.1rem; animation: fb-in-right .18s ease-out; } @keyframes fb-in-right { from { transform: translate(100%, -50%); } to { transform: translate(0, -50%); } } @media (max-width: 600px) { .fb-side { top: auto; bottom: 0; transform: none; width: 100%; max-width: none; border-radius: 6px 6px 0 0; border-right: 3px solid #111; border-bottom: 0; box-shadow: 0 -6px 0 var(--accent); animation: fb-in-up .18s ease-out; } @keyframes fb-in-up { from { transform: translateY(100%); } to { transform: none; } } } .fb-bubble { position: fixed; right: 18px; bottom: 18px; z-index: 1100; width: 58px; height: 58px; border-radius: 50%; background: var(--accent); color: #111; border: 3px solid #111; box-shadow: 4px 4px 0 #111; display: grid; place-items: center; cursor: pointer; } .fb-bubble svg { width: 26px; height: 26px; } .fb-bubble:hover { background: #ff7a3d; } .fb-bubble.open { background: #111; color: #fff; } .fb-card { position: fixed; right: 18px; bottom: 90px; z-index: 1300; width: 370px; max-width: calc(100vw - 24px); background: #fff; color: var(--ink); border: 3px solid #111; border-radius: 6px; box-shadow: 6px 6px 0 #111; overflow: hidden; animation: fb-pop .16s ease-out; } @keyframes fb-pop { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } } .fb-card .fb-head { background: #111; color: #fff; padding: .7rem .9rem; margin: 0; } .fb-card .fb-head h2 { color: #fff; } .fb-card .fb-head h2 span { color: var(--accent); } .fb-card .fb-body { padding: .9rem; } .fb-steps { display: grid; gap: .45rem; } .fb-big { display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; text-align: left; padding: .55rem .75rem; border: 2px solid #111; border-radius: 4px; background: #fff; color: #111; font: inherit; cursor: pointer; } .fb-big b { display: block; font-size: 13.5px; } .fb-big i { display: block; font-style: normal; font-size: 12px; color: var(--muted); } .fb-big svg { width: 10px; height: 16px; flex: none; } .fb-big:hover { background: var(--accent-bg); border-color: var(--accent); } .fb-chosen { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem .6rem; border: 2px solid #111; border-radius: 4px; background: var(--accent); font-weight: 700; font-size: 13px; } .fb-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100; background: #111; color: #fff; border-top: 3px solid var(--accent); display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem; padding: .45rem 1rem; font: 13px/1.3 var(--font); } .fb-bar .fb-q { margin: 0; font-weight: 600; white-space: nowrap; } .fb-thumbs { display: inline-flex; gap: .3rem; } .fb-thumb { width: 36px; height: 30px; border: 2px solid #fff; border-radius: 4px; background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; } .fb-thumb svg { width: 16px; height: 16px; } .fb-thumb:hover { border-color: var(--accent); color: var(--accent); } .fb-thumb.on { background: var(--accent); color: #111; border-color: var(--accent); } .fb-thumb:disabled { opacity: .5; cursor: default; } .fb-said { color: #cfcac0; font-size: 12.5px; } .fb-line { flex: 1 1 260px; max-width: 540px; border: 2px solid #fff; border-radius: 4px; background: #fff; color: #111; padding: .38rem .6rem; font: inherit; } .fb-line:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .fb-bar .fb-x { color: #cfcac0; margin-left: auto; } .fb-bar .fb-x:hover { color: #fff; } .fb-expand { display: none; flex-basis: 100%; } .fb-bar.open .fb-line { display: none; } .fb-bar.open .fb-expand { display: block; } .fb-bar.open { padding-bottom: .9rem; } .fb-expand .fb-form { background: var(--bg); border: 2px solid #fff; border-radius: 4px; padding: .8rem .9rem; max-width: 760px; } body.fb-v3-on .tail { padding-bottom: 5rem; } body.fb-v3-on main { padding-bottom: 4rem; } body.fb-v3-on .lotwin { margin-bottom: 6rem; } .fb-scrim { position: fixed; inset: 0; z-index: 1300; background: rgba(17, 17, 17, .62); display: grid; place-items: center; padding: 1rem; overflow: auto; } .fb-modal { width: min(560px, 100%); background: var(--bg); color: var(--ink); border: 3px solid #111; border-radius: 6px; box-shadow: 8px 8px 0 var(--accent); padding: 1.1rem 1.25rem 1.25rem; animation: fb-pop .16s ease-out; } .fb-modal .fb-head h2 { font-size: 20px; } .fb-modal .fb-lede { margin: -.3rem 0 .8rem; color: var(--muted); font-size: 13px; } .fb-modal .fb-form textarea { min-height: 130px; } .lotwin .fbhint { margin-top: .6rem; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; text-decoration: underline; cursor: pointer; padding: 0; } .lotwin .fbhint:hover { color: var(--accent); } .fbwrap { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } .fbmain h1 { font: 400 26px/1.15 var(--hfont); margin: 0 0 .3rem; } .fbmain .lede { margin: 0 0 1.1rem; color: var(--muted); font-size: 14px; } .fb-page-form { background: #fff; border: 2px solid #111; border-radius: 4px; box-shadow: var(--shadow); padding: 1rem 1.1rem 1.2rem; } .fb-kinds-f { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; } .fb-kinds-f legend { font-weight: 600; font-size: 12.5px; padding: 0; margin-bottom: .35rem; } .fb-kind { display: inline-flex; align-items: center; gap: .35rem; border: 2px solid #111; border-radius: 4px; background: #fff; padding: .25rem .6rem; font-size: 12.5px; font-weight: 600; cursor: pointer; } .fb-kind input { margin: 0; accent-color: var(--accent); } .fb-kind:has(input:checked) { background: var(--accent); } .fb-done { border: 2px solid #111; border-radius: 4px; background: #9be29e; padding: .8rem 1rem; font-size: 14px; box-shadow: var(--shadow); } .fb-back { margin: 1rem 0 0; font-size: 13px; } .fbaside { display: grid; gap: .9rem; } .fbcard { background: #fff; border: 2px solid #111; border-radius: 4px; padding: .8rem .95rem; font-size: 13px; } .fbcard h2 { font: 400 15px var(--hfont); margin: 0 0 .45rem; } .fbcard ul { margin: 0; padding-left: 1.1rem; } .fbcard li { margin-bottom: .35rem; } .fbcard p { margin: 0; } .fbmine { list-style: none; padding: 0; } .fbmine li { border-top: 1px solid var(--soft); padding: .4rem 0; } .fb-when { color: var(--muted); font-size: 12px; } .fb-pill { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 2px; padding: 0 .35rem; margin-left: .3rem; background: #ffd84d; } .fb-pill.done { background: #9be29e; } .fb-pill.spam { background: var(--soft); } @media (max-width: 760px) { .fbwrap { grid-template-columns: 1fr; } }