/* Relentless Members Hub. Everything is scoped under #rf90 to stay clear of Astra and Elementor. */ #rf90.rf90 { --rf-bg: #0D0D0D; --rf-surface: #151515; --rf-surface2: #1d1d1d; --rf-line: rgba(255, 255, 255, .08); --rf-text: #FFFFFF; --rf-muted: #a3a3a3; --rf-grey: #444444; --rf-accent: #FFFFFF; --rf-accent-ink: #0D0D0D; --rf-glow-a: rgba(255, 255, 255, .07); --rf-glow-b: rgba(255, 255, 255, .04); --rf-ok: #4ade80; --rf-warn: #fbbf24; --rf-bad: #f87171; --rf-radius: 14px; position: relative; isolation: isolate; overflow-x: clip; box-sizing: border-box; max-width: none; margin: 0; min-height: 100vh; padding: calc(var(--rf-head, 0px) + 28px) max(16px, calc((var(--rf-w, 100%) - 1120px) / 2)) 56px; scroll-margin-top: calc(var(--rf-sticky, 0px) + 12px); background: var(--rf-bg); color: var(--rf-text); font-family: 'Montserrat', system-ui, sans-serif; font-weight: 400; font-size: 15px; line-height: 1.55; border-radius: 0; text-align: left; } #rf90.rf90[data-facility="heart"] { --rf-accent: #9669E1; --rf-accent-ink: #FFFFFF; --rf-glow-a: rgba(150, 105, 225, .28); --rf-glow-b: rgba(150, 105, 225, .12); } #rf90.rf90[data-facility="hybrid"] { --rf-accent: #FEFA00; --rf-accent-ink: #0D0D0D; --rf-glow-a: rgba(254, 250, 0, .16); --rf-glow-b: rgba(255, 50, 49, .16); } #rf90.rf90[data-facility="spirit"] { --rf-accent: #30D5C8; --rf-accent-ink: #0D0D0D; --rf-glow-a: rgba(48, 213, 200, .24); --rf-glow-b: rgba(48, 213, 200, .10); } #rf90 *, #rf90 *::before, #rf90 *::after { box-sizing: border-box; } body.rf90-hub-page { overflow-x: clip; } body.rf90-hub-page .entry-header, body.rf90-hub-page .entry-title, body.rf90-hub-page .wp-block-post-title { display: none; } #rf90 .rf90-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: radial-gradient(60% 40% at 85% 0%, var(--rf-glow-a), transparent 70%), radial-gradient(50% 35% at 0% 30%, var(--rf-glow-b), transparent 70%); } #rf90 [hidden] { display: none !important; } #rf90 a { color: inherit; } #rf90 img { max-width: 100%; height: auto; } /* Type */ #rf90 .rf90-h1, #rf90 h1.rf90-h1 { font-family: 'Montserrat', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(28px, 5vw, 46px); line-height: 1.02; letter-spacing: -.01em; margin: 4px 0 12px; color: var(--rf-text); } #rf90 .rf90-h2, #rf90 h2.rf90-h2 { font-family: 'Montserrat', sans-serif; font-style: italic; font-weight: 700; text-transform: uppercase; font-size: 15px; letter-spacing: .04em; margin: 0 0 14px; color: var(--rf-text); } #rf90 .rf90-h2--big { font-size: clamp(20px, 3vw, 28px); line-height: 1.1; } #rf90 .rf90-h3, #rf90 h3.rf90-h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 17px; margin: 0 0 4px; color: var(--rf-text); text-transform: none; font-style: normal; } #rf90 .rf90-kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rf-accent); } #rf90 .rf90-lead { margin: 0 0 8px; font-size: 16px; color: #d4d4d4; max-width: 640px; } #rf90 .rf90-muted { margin: 6px 0 0; color: var(--rf-muted); font-size: 14px; } #rf90 p { color: inherit; } #rf90 em { font-style: normal; color: var(--rf-muted); font-weight: 400; font-size: .9em; } /* Header */ #rf90 .rf90-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; } #rf90 .rf90-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; } #rf90 .rf90-logo { display: inline-block; width: 52px; height: 46px; flex: none; overflow: hidden; } #rf90 .rf90-logo img { display: block; width: 100%; height: 100%; object-fit: contain; } #rf90 .rf90-brand__txt { font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; } #rf90 .rf90-top__right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } #rf90 .rf90-hello { font-weight: 600; } #rf90 .rf90-link { color: var(--rf-muted); text-decoration: none; font-size: 14px; border-bottom: 1px solid transparent; } #rf90 .rf90-link:hover { color: var(--rf-text); border-bottom-color: currentColor; } /* Cards and layout */ #rf90 .rf90-card { background: var(--rf-surface); border: 1px solid var(--rf-line); border-radius: var(--rf-radius); padding: 22px; margin: 0 0 16px; } #rf90 .rf90-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 0; } #rf90 .rf90-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } #rf90 .rf90-grid3 > .rf90-card, #rf90 .rf90-grid2 > .rf90-card { margin-bottom: 16px; } #rf90 .rf90-center { text-align: center; } #rf90 .rf90-hero { padding: 8px 0 22px; } #rf90 .rf90-hero--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } #rf90 .rf90-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } #rf90 .rf90-cardhead .rf90-h2 { margin: 0; } /* Buttons */ #rf90 .rf90-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; font-family: 'Montserrat', sans-serif; font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: .05em; font-size: 13px; text-decoration: none; line-height: 1; transition: transform .15s ease, background .15s ease, opacity .15s ease; box-shadow: none; } #rf90 .rf90-btn:active { transform: translateY(1px); } #rf90 .rf90-btn--main { background: var(--rf-accent); color: var(--rf-accent-ink); } #rf90 .rf90-btn--main:hover { opacity: .9; } #rf90 .rf90-btn--ghost { background: transparent; color: var(--rf-text); border-color: rgba(255, 255, 255, .25); } #rf90 .rf90-btn--ghost:hover { border-color: var(--rf-text); } #rf90 .rf90-btn--wa { background: #25D366; color: #0D0D0D; } #rf90 .rf90-btn--block { width: 100%; margin-top: 16px; } #rf90 .rf90-btn[disabled] { opacity: .5; cursor: wait; } /* Notices */ #rf90 .rf90-notice { padding: 12px 16px; border-radius: 10px; margin: 0 0 16px; font-size: 14px; font-weight: 600; } #rf90 .rf90-notice--ok { background: rgba(74, 222, 128, .12); color: #bbf7d0; } #rf90 .rf90-notice--warn { background: rgba(251, 191, 36, .12); color: #fde68a; } #rf90 .rf90-err { color: var(--rf-bad); font-size: 14px; margin: 8px 0 0; } /* Auth */ #rf90 .rf90-auth { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: start; padding-top: 12px; } #rf90 .rf90-ticks { list-style: none; padding: 0; margin: 22px 0 0; } #rf90 .rf90-ticks li { position: relative; padding: 8px 0 8px 30px; color: #e5e5e5; } #rf90 .rf90-ticks li::before { content: ""; position: absolute; left: 0; top: 13px; width: 16px; height: 9px; border-left: 3px solid var(--rf-accent); border-bottom: 3px solid var(--rf-accent); transform: rotate(-45deg); } #rf90 .rf90-seg { display: flex; background: var(--rf-surface2); border-radius: 999px; padding: 4px; margin-bottom: 18px; } #rf90 .rf90-seg__btn { flex: 1; min-height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--rf-muted); font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; text-transform: uppercase; letter-spacing: .04em; } #rf90 .rf90-seg__btn.is-on { background: var(--rf-text); color: #0D0D0D; } /* Forms */ #rf90 .rf90-form { display: block; } #rf90 .rf90-field { display: block; margin: 0 0 16px; } #rf90 .rf90-field > span { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--rf-text); } #rf90 .rf90-field small { display: block; margin-top: 6px; color: var(--rf-muted); font-size: 12px; } #rf90 input[type="text"], #rf90 input[type="email"], #rf90 input[type="tel"], #rf90 input[type="password"], #rf90 input[type="date"], #rf90 input[type="time"], #rf90 input[type="search"], #rf90 input[type="number"], #rf90 input[type="url"], #rf90 select, #rf90 textarea { width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: #0f0f0f; color: var(--rf-text); font-family: inherit; font-size: 15px; box-shadow: none; margin: 0; } #rf90 textarea { min-height: 90px; resize: vertical; } #rf90 input:focus, #rf90 select:focus, #rf90 textarea:focus { outline: 2px solid var(--rf-accent); outline-offset: 1px; border-color: transparent; } #rf90 input[type="date"], #rf90 input[type="time"] { color-scheme: dark; } #rf90 .rf90-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } #rf90 .rf90-fs { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; } #rf90 .rf90-fs legend { font-weight: 600; font-size: 14px; margin-bottom: 10px; padding: 0; color: var(--rf-text); } #rf90 .rf90-chips { display: flex; flex-wrap: wrap; gap: 8px; } #rf90 .rf90-chip { position: relative; cursor: pointer; } #rf90 .rf90-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; } #rf90 .rf90-chip span { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); font-size: 14px; color: #e5e5e5; transition: all .15s ease; } #rf90 .rf90-chip input:checked + span { background: var(--rf-text); color: #0D0D0D; border-color: var(--rf-text); font-weight: 600; } #rf90 .rf90-chip input:focus-visible + span { outline: 2px solid var(--rf-accent); outline-offset: 2px; } #rf90 .rf90-facs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } #rf90 .rf90-fac { position: relative; display: block; padding: 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); cursor: pointer; background: #101010; } #rf90 .rf90-fac input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } #rf90 .rf90-fac__name { display: block; font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 14px; } #rf90 .rf90-fac__place { display: block; color: var(--rf-muted); font-size: 12px; margin-top: 2px; } #rf90 .rf90-fac--heart { --c: #9669E1; } #rf90 .rf90-fac--hybrid { --c: #FEFA00; } #rf90 .rf90-fac--spirit { --c: #30D5C8; } #rf90 .rf90-fac:has(input:checked) { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 0 28px -8px var(--c); } #rf90 .rf90-fac:has(input:focus-visible) { outline: 2px solid var(--c); outline-offset: 2px; } #rf90 .rf90-consent { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 16px; cursor: pointer; font-size: 14px; color: #d4d4d4; } #rf90 .rf90-consent input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--rf-accent); } #rf90 .rf90-consent strong { display: block; color: var(--rf-text); } #rf90 .rf90-consent--big { font-size: 15px; margin: 0; } #rf90 .rf90-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; } /* Wizard */ #rf90 .rf90-wiz { max-width: 760px; margin: 0 auto; } #rf90 .rf90-steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 18px; } #rf90 .rf90-steps li { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--rf-muted); padding-top: 10px; border-top: 3px solid var(--rf-grey); } #rf90 .rf90-steps li span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--rf-grey); color: #fff; font-size: 12px; font-weight: 700; } #rf90 .rf90-steps li.is-on { color: var(--rf-text); border-top-color: var(--rf-accent); } #rf90 .rf90-steps li.is-on span { background: var(--rf-accent); color: var(--rf-accent-ink); } /* Tabs */ #rf90 .rf90-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 22px; padding-bottom: 2px; scrollbar-width: none; } #rf90 .rf90-tabs::-webkit-scrollbar { display: none; } #rf90 .rf90-tab { flex: none; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: transparent; color: var(--rf-muted); font-family: inherit; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; } #rf90 .rf90-tab.is-on { background: var(--rf-text); color: #0D0D0D; border-color: var(--rf-text); } #rf90 .rf90-tab__short { display: none; } /* Progress */ #rf90 .rf90-bar { height: 6px; background: rgba(255, 255, 255, .1); border-radius: 999px; overflow: hidden; max-width: 640px; margin-top: 14px; } #rf90 .rf90-bar span { display: block; height: 100%; background: var(--rf-accent); border-radius: 999px; } #rf90 .rf90-ring { position: relative; width: 150px; height: 150px; margin: 0 auto; } #rf90 .rf90-ring svg { width: 100%; height: 100%; display: block; } #rf90 .rf90-ring circle { fill: none; stroke-width: 10; } #rf90 .rf90-ring__bg { stroke: rgba(255, 255, 255, .08); } #rf90 .rf90-ring__fg { stroke: var(--rf-accent); stroke-linecap: round; } #rf90 .rf90-ring__txt { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } #rf90 .rf90-ring__txt strong { font-size: 38px; font-weight: 800; font-style: italic; line-height: 1; } #rf90 .rf90-ring__txt span { color: var(--rf-muted); font-size: 13px; } #rf90 .rf90-big { font-size: 44px; font-weight: 800; font-style: italic; margin: 6px 0 0; line-height: 1; } #rf90 .rf90-big span { font-size: 20px; color: var(--rf-muted); font-weight: 600; } #rf90 .rf90-dots { display: inline-flex; gap: 6px; align-items: center; } #rf90 .rf90-dots i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .14); } #rf90 .rf90-dots i.is-on { background: var(--rf-accent); } #rf90 .rf90-dots b { font-size: 12px; color: var(--rf-muted); font-weight: 700; } #rf90 .rf90-thisweek .rf90-dots i { width: 20px; height: 20px; } #rf90 .rf90-ms-next { font-size: 22px; font-weight: 800; font-style: italic; text-transform: uppercase; margin: 0; line-height: 1.15; } #rf90 .rf90-count { margin: 16px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--rf-muted); } /* Milestones */ #rf90 .rf90-ms { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } #rf90 .rf90-ms li { position: relative; padding: 14px 14px 14px 42px; border-radius: 12px; background: var(--rf-surface2); } #rf90 .rf90-ms li strong { display: block; font-size: 14px; } #rf90 .rf90-ms li > span:last-child { display: block; font-size: 12px; color: var(--rf-muted); } #rf90 .rf90-ms__dot { position: absolute; left: 14px; top: 16px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); } #rf90 .rf90-ms li.is-done .rf90-ms__dot { background: var(--rf-accent); border-color: var(--rf-accent); } #rf90 .rf90-ms li.is-done .rf90-ms__dot::after { content: ""; position: absolute; left: 4px; top: 2px; width: 6px; height: 9px; border-right: 2px solid var(--rf-accent-ink); border-bottom: 2px solid var(--rf-accent-ink); transform: rotate(45deg); } #rf90 .rf90-ms li.is-next { box-shadow: inset 0 0 0 1px var(--rf-accent); } #rf90 .rf90-ms--tight { grid-template-columns: 1fr; } /* Tee */ #rf90 .rf90-tee { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: radial-gradient(80% 140% at 100% 50%, var(--rf-glow-a), transparent 70%), var(--rf-surface); } #rf90 .rf90-tee.is-earned { box-shadow: inset 0 0 0 1px var(--rf-accent); } #rf90 .rf90-tee__size { flex: none; text-align: center; width: 92px; height: 92px; border-radius: 50%; display: grid; place-content: center; border: 2px solid var(--rf-accent); } #rf90 .rf90-tee__size span { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--rf-muted); } #rf90 .rf90-tee__size strong { font-size: 26px; font-style: italic; font-weight: 800; line-height: 1; } /* Weeks */ #rf90 .rf90-weeks { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 16px; } #rf90 .rf90-week { padding: 12px; border-radius: 12px; background: var(--rf-surface2); display: flex; flex-direction: column; gap: 6px; } #rf90 .rf90-week__n { font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 13px; } #rf90 .rf90-week__d { font-size: 12px; color: var(--rf-muted); } #rf90 .rf90-week__s { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; min-height: 14px; } #rf90 .rf90-week--hit .rf90-week__s { color: var(--rf-ok); } #rf90 .rf90-week--missed { opacity: .75; } #rf90 .rf90-week--missed .rf90-week__s { color: var(--rf-bad); } #rf90 .rf90-week--future { opacity: .45; } #rf90 .rf90-week.is-now { box-shadow: inset 0 0 0 1px var(--rf-accent); } #rf90 .rf90-week--current .rf90-week__s { color: var(--rf-accent); } /* Log */ #rf90 .rf90-log { list-style: none; padding: 0; margin: 0; } #rf90 .rf90-log li { display: grid; grid-template-columns: 110px 1fr auto auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rf-line); } #rf90 .rf90-log li:last-child { border-bottom: 0; } #rf90 .rf90-log__d { font-weight: 700; } #rf90 .rf90-log__src { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--rf-muted); } #rf90 .rf90-x { background: none; border: 0; color: var(--rf-muted); cursor: pointer; font-family: inherit; font-size: 13px; text-decoration: underline; padding: 4px; } #rf90 .rf90-x:hover { color: var(--rf-bad); } /* Guide */ #rf90 .rf90-stores { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; } #rf90 .rf90-guide { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; } #rf90 .rf90-guide__step { display: grid; grid-template-columns: 54px 1fr; gap: 16px; align-items: center; } #rf90 .rf90-guide__step.has-shot { grid-template-columns: 54px minmax(0, 1fr) minmax(0, 460px); gap: 22px; align-items: start; } #rf90 .rf90-guide__step.has-shot .rf90-guide__body { padding-top: 8px; } #rf90 .rf90-guide__n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--rf-accent); color: var(--rf-accent-ink); font-weight: 800; font-style: italic; font-size: 18px; } #rf90 .rf90-guide__body p { margin: 0; color: #d4d4d4; } #rf90 .rf90-guide__shot { display: flex; justify-content: center; text-decoration: none; cursor: zoom-in; } #rf90 .rf90-guide__shot img { display: block; width: auto; max-width: 100%; height: auto; max-height: 460px; border-radius: 14px; } #rf90 .rf90-ready { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* Modal */ #rf90 .rf90-modal { position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, .7); display: grid; place-items: center; padding: 16px; } #rf90 .rf90-modal__box { width: 100%; max-width: 420px; margin: 0; } /* Footer */ #rf90 .rf90-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rf-line); } #rf90 .rf90-signoff { margin: 0; font-style: italic; font-weight: 700; font-size: 16px; } /* Coach */ #rf90 .rf90-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; } #rf90 .rf90-stat { background: var(--rf-surface); border: 1px solid var(--rf-line); border-radius: var(--rf-radius); padding: 16px; } #rf90 .rf90-stat strong { display: block; font-size: 32px; font-weight: 800; font-style: italic; line-height: 1; } #rf90 .rf90-stat span { font-size: 12px; color: var(--rf-muted); text-transform: uppercase; letter-spacing: .06em; } #rf90 .rf90-stat--on strong { color: var(--rf-ok); } #rf90 .rf90-stat--behind strong { color: var(--rf-warn); } #rf90 .rf90-stat--risk strong { color: var(--rf-bad); } #rf90 .rf90-filters { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 10px; margin-bottom: 14px; } #rf90 .rf90-tablewrap { overflow-x: auto; } #rf90 .rf90-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 760px; margin: 0; border: 0; } #rf90 .rf90-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--rf-muted); font-weight: 700; padding: 10px; border: 0; border-bottom: 1px solid var(--rf-line); background: transparent; } #rf90 .rf90-table td { padding: 12px 10px; border: 0; border-bottom: 1px solid var(--rf-line); background: transparent; vertical-align: middle; } #rf90 .rf90-table tbody tr { cursor: pointer; } #rf90 .rf90-table tbody tr:hover td { background: rgba(255, 255, 255, .03); } #rf90 .rf90-table a { text-decoration: none; } #rf90 .rf90-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; background: rgba(255, 255, 255, .1); color: #e5e5e5; margin-right: 8px; } #rf90 .rf90-pill--on_track { background: rgba(74, 222, 128, .15); color: #86efac; } #rf90 .rf90-pill--behind { background: rgba(251, 191, 36, .15); color: #fcd34d; } #rf90 .rf90-pill--risk, #rf90 .rf90-pill--off { background: rgba(248, 113, 113, .16); color: #fca5a5; } #rf90 .rf90-pill--complete { background: #FFFFFF; color: #0D0D0D; } #rf90 .rf90-fac-tag { font-size: 13px; white-space: nowrap; } #rf90 .rf90-fac-tag::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--rf-grey); } #rf90 .rf90-fac-tag--heart::before { background: #9669E1; } #rf90 .rf90-fac-tag--hybrid::before { background: #FEFA00; } #rf90 .rf90-fac-tag--spirit::before { background: #30D5C8; } #rf90 .rf90-back { display: inline-block; margin-bottom: 8px; } #rf90 .rf90-back::before { content: "\2190 "; } #rf90 .rf90-contact { display: flex; gap: 10px; flex-wrap: wrap; } #rf90 .rf90-dl { margin: 0; display: grid; grid-template-columns: 150px 1fr; gap: 10px 16px; font-size: 14px; } #rf90 .rf90-dl dt { color: var(--rf-muted); font-weight: 600; } #rf90 .rf90-dl dd { margin: 0; } #rf90 .rf90-note { color: #fde68a; } #rf90 .rf90-edit summary { cursor: pointer; list-style: none; margin: 0; } #rf90 .rf90-edit summary::-webkit-details-marker { display: none; } #rf90 .rf90-edit summary::after { content: " +"; color: var(--rf-muted); } #rf90 .rf90-edit[open] summary { margin-bottom: 16px; } #rf90 .rf90-edit[open] summary::after { content: " \2212"; } /* Responsive */ @media (max-width: 900px) { #rf90 .rf90-guide__step.has-shot { grid-template-columns: 54px minmax(0, 1fr); } #rf90 .rf90-guide__shot { grid-column: 2 / -1; justify-content: flex-start; } #rf90 .rf90-grid3 { grid-template-columns: 1fr 1fr; } #rf90 .rf90-grid3 > .rf90-card:first-child { grid-column: 1 / -1; } #rf90 .rf90-ms { grid-template-columns: 1fr 1fr; } #rf90 .rf90-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } #rf90 .rf90-filters { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { #rf90.rf90 { padding: calc(var(--rf-head, 0px) + 18px) 16px 40px; } #rf90 .rf90-auth, #rf90 .rf90-grid3, #rf90 .rf90-grid2, #rf90 .rf90-row2, #rf90 .rf90-facs, #rf90 .rf90-ms { grid-template-columns: 1fr; } #rf90 .rf90-grid3 > .rf90-card:first-child { grid-column: auto; } #rf90 .rf90-stats { grid-template-columns: 1fr 1fr; } #rf90 .rf90-filters { grid-template-columns: 1fr; } #rf90 .rf90-card { padding: 18px; } #rf90 .rf90-guide__step, #rf90 .rf90-guide__step.has-shot { grid-template-columns: 44px 1fr; } #rf90 .rf90-guide__n { width: 36px; height: 36px; font-size: 15px; } #rf90 .rf90-guide__shot { grid-column: 1 / -1; } #rf90 .rf90-guide__shot img { max-height: 620px; } #rf90 .rf90-log li { grid-template-columns: 1fr auto; } #rf90 .rf90-log__c { grid-column: 1; } #rf90 .rf90-dl { grid-template-columns: 1fr; gap: 2px; } #rf90 .rf90-dl dd { margin-bottom: 10px; } #rf90 .rf90-tee { flex-direction: column; align-items: flex-start; } #rf90 .rf90-steps li { font-size: 0; gap: 0; } #rf90 .rf90-steps li span { font-size: 12px; } #rf90 .rf90-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; overflow: visible; } #rf90 .rf90-tab { padding: 0 4px; font-size: 11px; letter-spacing: .02em; min-height: 38px; } #rf90 .rf90-tab__long { display: none; } #rf90 .rf90-tab__short { display: inline; } } /* House rules: content comes from the site's own House Rules page */ #rf90 .rf90-rules { color: #e5e5e5; overflow-x: clip; } #rf90 .rf90-rules h1, #rf90 .rf90-rules h2, #rf90 .rf90-rules h3, #rf90 .rf90-rules h4 { color: var(--rf-text); font-family: 'Montserrat', sans-serif; line-height: 1.15; margin: 1.2em 0 .5em; } #rf90 .rf90-rules h1, #rf90 .rf90-rules h2 { font-style: italic; font-weight: 800; text-transform: uppercase; } #rf90 .rf90-rules p, #rf90 .rf90-rules li { color: inherit; } #rf90 .rf90-rules a { color: var(--rf-accent); } #rf90 .rf90-rules img { max-width: 100%; height: auto; } #rf90 .rf90-rules .elementor-section, #rf90 .rf90-rules .e-con { max-width: 100%; } /* Itensity link */ #rf90 .rf90-linked { margin: 10px 0 0; font-size: 12px; color: var(--rf-ok); } #rf90 .rf90-itn-tag { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: rgba(74, 222, 128, .14); color: #86efac; vertical-align: middle; } /* Email link login */ #rf90 .rf90-auth__help { margin: -6px 0 16px; } #rf90 .rf90-auth__alt { margin-top: 18px; font-size: 13px; } #rf90 .rf90-linkbtn { background: none; border: 0; padding: 0; color: var(--rf-text); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; } #rf90 .rf90-auth--single { grid-template-columns: minmax(0, 520px); justify-content: center; } @media (max-width: 680px) { #rf90 .rf90-auth { gap: 18px; padding-top: 0; } #rf90 .rf90-auth .rf90-ticks { display: none; } } /* Quests, points and levels */ #rf90 .rf90-game { margin-bottom: 0; } #rf90 .rf90-level__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } #rf90 .rf90-level__name { margin: 2px 0 0; font-size: 26px; font-weight: 800; font-style: italic; text-transform: uppercase; line-height: 1.05; } #rf90 .rf90-level__pts { text-align: right; } #rf90 .rf90-level__pts strong { display: block; font-size: 34px; font-weight: 800; line-height: 1; color: var(--rf-accent); } #rf90 .rf90-level__pts span { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--rf-muted); } #rf90 .rf90-level .rf90-bar { max-width: none; } #rf90 .rf90-level__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } #rf90 .rf90-tag { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: var(--rf-surface2); font-size: 12px; font-weight: 700; color: var(--rf-muted); } #rf90 .rf90-tag.is-hot { color: var(--rf-text); box-shadow: inset 0 0 0 1px var(--rf-accent); } #rf90 .rf90-how { margin-top: 12px; font-size: 13px; color: var(--rf-muted); } #rf90 .rf90-how summary { cursor: pointer; font-weight: 700; } #rf90 .rf90-how p { margin: 8px 0 0; } #rf90 .rf90-pts { display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--rf-accent); color: var(--rf-accent-ink); font-size: 11px; font-weight: 800; letter-spacing: .04em; font-style: normal; } #rf90 .rf90-quest-hero.is-live { box-shadow: inset 0 0 0 1px var(--rf-accent); background: linear-gradient(160deg, var(--rf-glow-a), transparent 60%), var(--rf-surface); } #rf90 .rf90-quest-hero .rf90-ms-next { margin-top: 6px; } #rf90 .rf90-q__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; } #rf90 .rf90-q__acts .rf90-btn { flex: 1 1 auto; } #rf90 .rf90-q__done { font-weight: 700; color: var(--rf-ok); font-size: 14px; } #rf90 .rf90-ms__q { display: block; margin-top: 6px; font-size: 11px; color: var(--rf-accent); font-weight: 700; } #rf90 .rf90-quests { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; } #rf90 .rf90-q details { background: var(--rf-surface2); border-radius: 12px; } #rf90 .rf90-q summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px; cursor: pointer; } #rf90 .rf90-q summary::-webkit-details-marker { display: none; } #rf90 .rf90-q__title { flex: 1; font-weight: 700; font-size: 14px; } #rf90 .rf90-q__icon { position: relative; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); } #rf90 .rf90-q.is-open .rf90-q__icon { border-color: var(--rf-accent); } #rf90 .rf90-q.is-done .rf90-q__icon { background: var(--rf-accent); border-color: var(--rf-accent); } #rf90 .rf90-q.is-done .rf90-q__icon::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border-right: 2px solid var(--rf-accent-ink); border-bottom: 2px solid var(--rf-accent-ink); transform: rotate(45deg); } #rf90 .rf90-q.is-locked .rf90-q__title { color: var(--rf-muted); } #rf90 .rf90-q.is-locked .rf90-pts { background: rgba(255, 255, 255, .12); color: var(--rf-muted); } #rf90 .rf90-q.is-locked .rf90-q__icon::after { content: ""; position: absolute; left: 4px; top: 6px; width: 8px; height: 6px; border-radius: 1px; background: rgba(255, 255, 255, .35); } #rf90 .rf90-q.is-done .rf90-q__title { color: var(--rf-muted); } #rf90 .rf90-q__body { padding: 0 14px 16px 46px; } #rf90 .rf90-q__body .rf90-muted { margin-top: 0; } /* Share sheet */ #rf90 .rf90-share { position: relative; max-height: calc(100vh - 32px); overflow-y: auto; } #rf90 .rf90-modal__close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--rf-surface2); color: var(--rf-text); font-size: 22px; line-height: 1; cursor: pointer; } #rf90 .rf90-share__btns .rf90-btn { margin-top: 12px; } #rf90 .rf90-share__btns .rf90-btn:first-child { margin-top: 16px; } #rf90 .rf90-share__prev { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; margin-top: 12px; } #rf90 .rf90-caption { margin-top: 16px; padding: 14px; border-radius: 12px; background: var(--rf-surface2); } #rf90 .rf90-caption__txt { margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: var(--rf-text); word-break: break-word; } #rf90 .rf90-caption .rf90-btn { min-height: 38px; padding: 0 16px; font-size: 12px; } #rf90 .rf90-small { font-size: 12px; } #rf90 .rf90-share .rf90-small { margin-top: 12px; } #rf90 .rf90-toast { position: fixed; left: 50%; bottom: 24px; z-index: 100000; transform: translate(-50%, 20px); opacity: 0; padding: 14px 22px; border-radius: 999px; background: var(--rf-accent); color: var(--rf-accent-ink); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); transition: transform .3s ease, opacity .3s ease; width: max-content; max-width: calc(100vw - 32px); text-align: center; line-height: 1.3; } #rf90 .rf90-toast.is-on { transform: translate(-50%, 0); opacity: 1; } @media (max-width: 680px) { #rf90 .rf90-q__body { padding-left: 14px; } #rf90 .rf90-level__name { font-size: 22px; } } #rf90 .rf90-quest-ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-top: 10px; } @media (max-width: 680px) { #rf90 .rf90-quest-ticks { grid-template-columns: 1fr; } } /* Relentless Member Code (House rules tab), matches the Help Desk */ #rf90 .rf90-card--code { background: transparent; border: 0; padding: 8px 0 0; } #rf90 .rf90-ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } #rf90 .rf90-code { color: var(--rf-text); } #rf90 .rf90-code__kick { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rf-muted); } #rf90 .rf90-code__h { margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 800; font-style: italic; text-transform: uppercase; font-size: clamp(34px, 7vw, 52px); line-height: .98; letter-spacing: -.01em; color: var(--rf-text); } #rf90 .rf90-code__prog { margin: 14px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rf-muted); } #rf90 .rf90-code__bar { height: 2px; background: rgba(255, 255, 255, .14); max-width: 520px; } #rf90 .rf90-code__bar span { display: block; height: 100%; background: var(--rf-text); transition: width .3s ease; } #rf90 .rf90-code__pills { display: flex; gap: 10px; overflow-x: auto; margin: 26px 0 26px; padding: 2px 0 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } #rf90 .rf90-code__pills::-webkit-scrollbar { display: none; } #rf90 .rf90-code__pill { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: transparent; color: rgba(255, 255, 255, .7); font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 14px; font-style: normal; text-transform: none; letter-spacing: 0; line-height: 1; box-shadow: none; cursor: pointer; white-space: nowrap; scroll-snap-align: start; transition: background .15s ease, color .15s ease, border-color .15s ease; } #rf90 .rf90-code__pill:hover { border-color: rgba(255, 255, 255, .5); color: var(--rf-text); } #rf90 .rf90-code__pill.is-on { background: #FFFFFF; border-color: #FFFFFF; color: #0D0D0D; } #rf90 .rf90-code__tick { display: none; font-style: normal; } #rf90 .rf90-code__pill.is-read .rf90-code__tick { display: inline-flex; } #rf90 .rf90-code__tick .rf90-ic { width: 16px; height: 16px; stroke-width: 2; } #rf90 .rf90-code__head { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 2px solid #FFFFFF; } #rf90 .rf90-code__badge { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #FFFFFF; color: #0D0D0D; } #rf90 .rf90-code__badge .rf90-ic { width: 20px; height: 20px; } #rf90 .rf90-code__title { flex: 1; margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 800; font-style: italic; text-transform: uppercase; font-size: clamp(20px, 4.4vw, 28px); line-height: 1.02; color: var(--rf-text); } #rf90 .rf90-code__num { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--rf-muted); } #rf90 ul.rf90-code__rules { list-style: none; margin: 0; padding: 0; } #rf90 .rf90-code__rules li { margin: 0; padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); } #rf90 .rf90-code__rules h4 { margin: 0 0 6px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 800; font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--rf-text); } #rf90 .rf90-code__rules p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .7); max-width: 720px; } #rf90 .rf90-code__nav { display: flex; gap: 12px; margin-top: 24px; } #rf90 .rf90-code__nav .rf90-btn { flex: 1; padding: 0 14px; white-space: nowrap; } #rf90 .rf90-code__nav .rf90-btn[disabled] { opacity: .35; cursor: default; } #rf90 .rf90-btn--white { background: #FFFFFF; color: #0D0D0D; } #rf90 .rf90-btn--white:hover { opacity: .9; } #rf90 .rf90-btn .rf90-ic { width: 16px; height: 16px; stroke-width: 2.2; } @media (min-width: 900px) { #rf90 .rf90-code__pills { flex-wrap: wrap; overflow: visible; } #rf90 .rf90-code__nav { max-width: 520px; } } #rf90 .rf90-ready { transition: box-shadow .3s ease; } #rf90 .rf90-ready.is-flash { box-shadow: inset 0 0 0 2px var(--rf-accent); } /* First login: two doors */ #rf90 .rf90-guess { margin: 0 0 18px; padding: 14px 16px; border-radius: 12px; background: var(--rf-surface2); box-shadow: inset 3px 0 0 var(--rf-accent); font-size: 14px; color: #d4d4d4; } #rf90 .rf90-guess strong { color: var(--rf-text); } #rf90 .rf90-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } #rf90 .rf90-door { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 20px 20px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .16); background: var(--rf-surface2); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } #rf90 .rf90-door:hover { border-color: rgba(255, 255, 255, .4); } #rf90 .rf90-door input { position: absolute; opacity: 0; pointer-events: none; } #rf90 .rf90-door__tag { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rf-accent); } #rf90 .rf90-door__h { font-size: 22px; font-weight: 800; font-style: italic; text-transform: uppercase; line-height: 1.05; color: var(--rf-text); } #rf90 .rf90-door__p { font-size: 14px; line-height: 1.5; color: var(--rf-muted); } #rf90 .rf90-door__go { margin-top: auto; padding-top: 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rf-text); } #rf90 .rf90-door:has(input:checked) { border-color: var(--rf-accent); box-shadow: inset 0 0 0 1px var(--rf-accent), 0 10px 30px var(--rf-glow-b); } #rf90 .rf90-door:has(input:checked) .rf90-door__go { color: var(--rf-accent); } #rf90 .rf90-door:has(input:focus-visible) { outline: 2px solid var(--rf-accent); outline-offset: 2px; } #rf90 .rf90-steps b { font-weight: inherit; } #rf90 button b { font-weight: inherit; } /* Progress map and benchmarks */ #rf90 .rf90-map .rf90-cardhead { align-items: flex-start; } #rf90 .rf90-mstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; } #rf90 .rf90-mstats > div { padding: 14px; border-radius: 12px; background: var(--rf-surface2); min-width: 0; } #rf90 .rf90-mstats strong { display: block; font-size: 28px; font-weight: 800; line-height: 1; color: var(--rf-text); } #rf90 .rf90-mstats strong span { font-size: 15px; color: var(--rf-muted); } #rf90 .rf90-mstats em { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rf-muted); overflow-wrap: anywhere; } #rf90 .rf90-gains { margin-top: 18px; display: grid; gap: 10px; } #rf90 .rf90-gains__h { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rf-muted); } #rf90 .rf90-gain { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) 52px; align-items: center; gap: 12px; font-size: 13px; } #rf90 .rf90-gain__n { color: #d4d4d4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #rf90 .rf90-gain__bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; } #rf90 .rf90-gain__bar i { display: block; height: 100%; border-radius: 999px; background: var(--rf-accent); } #rf90 .rf90-gain__v { text-align: right; font-weight: 800; color: var(--rf-text); } #rf90 .rf90-btiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; } #rf90 .rf90-btiles > .rf90-card { margin: 0; display: flex; flex-direction: column; } #rf90 .rf90-btile__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } #rf90 .rf90-btag { flex: none; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: rgba(255, 255, 255, .1); color: var(--rf-muted); } #rf90 .rf90-btag--new { background: var(--rf-accent); color: var(--rf-accent-ink); } #rf90 .rf90-btag--due { background: rgba(251, 191, 36, .16); color: #fde68a; } #rf90 .rf90-btag--pr { background: rgba(74, 222, 128, .16); color: #bbf7d0; } #rf90 .rf90-btile__nums { display: grid; grid-template-columns: 1.4fr 1fr .7fr; gap: 8px; margin: 12px 0 8px; } #rf90 .rf90-btile__nums em { display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rf-muted); } #rf90 .rf90-btile__nums strong { display: block; font-size: 22px; font-weight: 800; color: var(--rf-accent); line-height: 1.15; } #rf90 .rf90-btile__nums span { display: block; font-size: 15px; font-weight: 700; color: var(--rf-text); line-height: 1.5; } #rf90 .rf90-bchart { display: block; width: 100%; height: 80px; margin: 4px 0; overflow: visible; } #rf90 .rf90-bchart__base { stroke: rgba(255, 255, 255, .12); stroke-width: 1; } #rf90 .rf90-bchart__area { fill: var(--rf-accent); opacity: .12; } #rf90 .rf90-bchart__line { fill: none; stroke: var(--rf-accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } #rf90 .rf90-bchart__dot { fill: var(--rf-surface); stroke: var(--rf-accent); stroke-width: 2; vector-effect: non-scaling-stroke; } #rf90 .rf90-bchart__dot.is-key { fill: var(--rf-accent); } #rf90 .rf90-btile__meta { margin: 4px 0 0; font-size: 12px; color: var(--rf-muted); } #rf90 .rf90-btile.is-empty .rf90-muted { flex: 1; } #rf90 .rf90-btile__more { margin-top: 12px; font-size: 13px; color: #d4d4d4; } #rf90 .rf90-btile__more summary { cursor: pointer; font-weight: 700; color: var(--rf-muted); } #rf90 .rf90-btile__more p { margin: 8px 0 0; } #rf90 .rf90-btile .rf90-btn--block { margin-top: auto; } #rf90 .rf90-btile details + .rf90-btn--block { margin-top: 14px; } #rf90 ul.rf90-attempts { list-style: none; margin: 10px 0 0; padding: 0; } #rf90 .rf90-attempts li { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--rf-line); } #rf90 .rf90-attempts strong { color: var(--rf-text); } #rf90 .rf90-attempts em { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--rf-ok); } #rf90 .rf90-grad { box-shadow: inset 0 0 0 1px var(--rf-accent); background: linear-gradient(160deg, var(--rf-glow-a), transparent 60%), var(--rf-surface); } #rf90 .rf90-bteaser .rf90-btn--block { max-width: 320px; } #rf90 .rf90-modal__box { max-height: calc(100vh - 32px); overflow-y: auto; position: relative; } @media (max-width: 900px) { #rf90 .rf90-btiles { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { #rf90 .rf90-doors, #rf90 .rf90-btiles { grid-template-columns: 1fr; } #rf90 .rf90-door__h { font-size: 20px; } #rf90 .rf90-mstats strong { font-size: 22px; } #rf90 .rf90-map .rf90-cardhead .rf90-btn { width: 100%; } } #rf90 .rf90-guide-pdf { margin: 14px 0 0; } #rf90 .rf90-zones { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 14px; padding: 2px 0 6px; scrollbar-width: none; } #rf90 .rf90-zones::-webkit-scrollbar { display: none; } #rf90 .rf90-zone { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: transparent; color: rgba(255, 255, 255, .75); font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; font-style: normal; text-transform: none; letter-spacing: 0; line-height: 1; box-shadow: none; cursor: pointer; white-space: nowrap; } #rf90 .rf90-zone span { font-size: 11px; color: var(--rf-muted); } #rf90 .rf90-zone.is-on { background: #FFFFFF; border-color: #FFFFFF; color: #0D0D0D; } #rf90 .rf90-zone.is-on span { color: #444444; } #rf90 .rf90-btile__zone { margin: 0 0 2px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rf-muted); } /* Site floating buttons (WhatsApp, back to top) cover the hub on phones. The hub has its own help button. */ html body #rlFab, html body .rl-fab-wrapper, html body #ast-scroll-top { display: none !important; } /* Wall of fame */ #rf90 .rf90-lb .rf90-field { margin-top: 12px; } #rf90 .rf90-lb__filters { display: grid; gap: 6px; margin: 4px 0 10px; } #rf90 .rf90-lb__filters .rf90-zones { margin: 0; } #rf90 .rf90-lb__rx { margin: 6px 0 0; } #rf90 .rf90-lb__empty { margin: 16px 0 0; padding: 18px; border-radius: 12px; background: var(--rf-surface2); color: var(--rf-muted); text-align: center; } #rf90 ol.rf90-podium { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 8px; align-items: end; } #rf90 .rf90-podium__p { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 8px 12px; border-radius: 14px 14px 6px 6px; background: var(--rf-surface2); min-width: 0; } #rf90 .rf90-podium__p--1 { order: 2; padding-top: 22px; background: linear-gradient(180deg, var(--rf-glow-a), var(--rf-surface2)); box-shadow: inset 0 0 0 1px var(--rf-accent); } #rf90 .rf90-podium__p--2 { order: 1; } #rf90 .rf90-podium__p--3 { order: 3; } #rf90 .rf90-podium__rank { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #FFFFFF; color: #0D0D0D; font-weight: 800; font-size: 14px; } #rf90 .rf90-podium__p--1 .rf90-podium__rank { background: var(--rf-accent); color: var(--rf-accent-ink); width: 36px; height: 36px; font-size: 16px; } #rf90 .rf90-podium__p strong { font-size: 13px; color: var(--rf-text); overflow-wrap: anywhere; } #rf90 .rf90-podium__p em { font-size: 18px; font-weight: 800; font-style: italic; color: var(--rf-text); } #rf90 .rf90-podium__p--1 em { color: var(--rf-accent); font-size: 21px; } #rf90 .rf90-podium__p small { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rf-muted); } #rf90 .rf90-podium__p.is-me, #rf90 .rf90-lbl li.is-me { box-shadow: inset 0 0 0 2px var(--rf-text); } #rf90 ol.rf90-lbl { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; } #rf90 .rf90-lbl li { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--rf-surface2); } #rf90 .rf90-lbl__r { font-weight: 800; color: var(--rf-muted); } #rf90 .rf90-lbl__n { font-size: 14px; font-weight: 600; color: var(--rf-text); min-width: 0; } #rf90 .rf90-lbl__n small { display: block; font-size: 11px; font-weight: 500; color: var(--rf-muted); } #rf90 .rf90-lbl strong { font-size: 15px; color: var(--rf-text); } #rf90 .rf90-lbl strong i { font-style: normal; font-size: 10px; padding: 2px 5px; border-radius: 4px; background: rgba(255, 255, 255, .12); color: var(--rf-muted); } #rf90 .rf90-lb__me { margin: 12px 0 0; font-size: 14px; color: var(--rf-muted); } #rf90 .rf90-lb__me strong { color: var(--rf-text); } @media (max-width: 680px) { #rf90 .rf90-tab { font-size: 10px; letter-spacing: 0; } } /* Wall of fame v2 */ #rf90 .rf90-fstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0 0; max-width: 640px; } #rf90 .rf90-fstats div { padding: 14px 12px; border-radius: 12px; background: var(--rf-surface); border: 1px solid var(--rf-line); min-width: 0; } #rf90 .rf90-fstats strong { display: block; font-size: clamp(22px, 5vw, 30px); font-weight: 800; font-style: italic; line-height: 1; color: var(--rf-text); } #rf90 .rf90-fstats span { display: block; margin-top: 6px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rf-muted); line-height: 1.3; } #rf90 .rf90-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 16px; border-radius: 999px; background: var(--rf-surface); border: 1px solid var(--rf-line); max-width: 420px; } #rf90 .rf90-seg button { min-height: 42px; border: 0; border-radius: 999px; background: transparent; color: var(--rf-muted); font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px; font-style: normal; text-transform: none; letter-spacing: 0; box-shadow: none; cursor: pointer; padding: 0 12px; } #rf90 .rf90-seg button.is-on { background: #FFFFFF; color: #0D0D0D; } #rf90 .rf90-av { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #FFFFFF; color: #0D0D0D; font-size: 12px; font-weight: 800; font-style: normal; letter-spacing: .02em; line-height: 1; } #rf90 .rf90-av--heart { background: #9669E1; color: #FFFFFF; } #rf90 .rf90-av--hybrid { background: #FEFA00; color: #0D0D0D; } #rf90 .rf90-av--spirit { background: #30D5C8; color: #0D0D0D; } #rf90 .rf90-mine { display: grid; grid-template-columns: 116px 1fr; gap: 18px; align-items: center; background: linear-gradient(135deg, var(--rf-glow-a), transparent 60%), var(--rf-surface); } #rf90 .rf90-mine--none { display: block; } #rf90 .rf90-ring { position: relative; width: 116px; height: 116px; } #rf90 .rf90-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } #rf90 .rf90-ring circle { fill: none; stroke-width: 9; } #rf90 .rf90-ring__bg { stroke: rgba(255, 255, 255, .1); } #rf90 .rf90-ring__fg { stroke: var(--rf-accent); stroke-linecap: round; } #rf90 .rf90-ring__n { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } #rf90 .rf90-ring__n strong { font-size: 34px; font-weight: 800; font-style: italic; line-height: 1; color: var(--rf-text); } #rf90 .rf90-ring__n span { margin-top: 2px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rf-muted); } #rf90 .rf90-mine__h { margin: 4px 0 6px; font-family: 'Montserrat', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(18px, 4.6vw, 24px); line-height: 1.1; color: var(--rf-text); } #rf90 .rf90-mine__next { margin: 0; font-size: 14px; color: #d4d4d4; } #rf90 .rf90-mine__rank { margin: 10px 0 0; font-size: 13px; color: var(--rf-muted); } #rf90 .rf90-mine__rank span { display: inline-block; padding: 3px 9px; margin-right: 4px; border-radius: 999px; background: var(--rf-accent); color: var(--rf-accent-ink); font-weight: 800; } #rf90 ol.rf90-apod { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 8px; align-items: end; } #rf90 .rf90-apod__p { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; } #rf90 .rf90-apod__p--1 { order: 2; } #rf90 .rf90-apod__p--2 { order: 1; } #rf90 .rf90-apod__p--3 { order: 3; } #rf90 .rf90-apod__medal { display: grid; place-items: center; width: 24px; height: 24px; margin-bottom: -10px; position: relative; z-index: 1; border-radius: 50%; font-size: 12px; font-weight: 800; color: #0D0D0D; box-shadow: 0 0 0 3px var(--rf-surface); } #rf90 .rf90-apod__medal--gold { background: #E9C46A; } #rf90 .rf90-apod__medal--silver { background: #CBD2DA; } #rf90 .rf90-apod__medal--bronze { background: #C98B5A; } #rf90 .rf90-apod .rf90-av { width: 54px; height: 54px; font-size: 17px; } #rf90 .rf90-apod__p--1 .rf90-av { width: 66px; height: 66px; font-size: 20px; box-shadow: 0 0 0 3px var(--rf-surface), 0 0 0 5px #E9C46A; } #rf90 .rf90-apod__name { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--rf-text); overflow-wrap: anywhere; line-height: 1.25; } #rf90 .rf90-apod__n { margin-top: 2px; font-size: 26px; font-weight: 800; font-style: italic; line-height: 1; color: var(--rf-text); } #rf90 .rf90-apod__p--1 .rf90-apod__n { font-size: 32px; color: var(--rf-accent); } #rf90 .rf90-apod__u { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rf-muted); } #rf90 .rf90-apod__step { display: block; width: 100%; margin-top: 10px; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)); height: 40px; } #rf90 .rf90-apod__p--1 .rf90-apod__step { height: 70px; background: linear-gradient(180deg, var(--rf-glow-a), rgba(255, 255, 255, .03)); box-shadow: inset 0 1px 0 var(--rf-accent); } #rf90 .rf90-apod__p--2 .rf90-apod__step { height: 52px; } #rf90 .rf90-apod__p.is-me .rf90-apod__name:after { content: " (you)"; color: var(--rf-accent); } #rf90 .rf90-justhit { margin: 0 0 16px; } #rf90 ul.rf90-justhit__list { list-style: none; margin: 10px 0 0; padding: 0 0 6px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; } #rf90 .rf90-justhit__list::-webkit-scrollbar { display: none; } #rf90 .rf90-justhit__list li { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 999px; background: var(--rf-surface); border: 1px solid var(--rf-accent); } #rf90 .rf90-justhit__list span { display: flex; flex-direction: column; line-height: 1.2; } #rf90 .rf90-justhit__list strong { font-size: 13px; color: var(--rf-text); white-space: nowrap; } #rf90 .rf90-justhit__list em { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--rf-accent); } #rf90 .rf90-bands { display: grid; gap: 12px; } #rf90 .rf90-band { position: relative; overflow: hidden; isolation: isolate; padding: 18px; border-radius: var(--rf-radius); background: var(--rf-surface); border: 1px solid var(--rf-line); } #rf90 .rf90-band__wm { position: absolute; z-index: -1; right: -8px; top: -26px; font-size: 128px; font-weight: 800; font-style: italic; line-height: 1; letter-spacing: -.04em; color: rgba(255, 255, 255, .05); pointer-events: none; } #rf90 .rf90-band--l1 { border-color: var(--rf-accent); background: linear-gradient(150deg, var(--rf-glow-a), transparent 55%), var(--rf-surface); } #rf90 .rf90-band--l1 .rf90-band__wm { color: var(--rf-accent); opacity: .14; } #rf90 .rf90-band--l2 { background: linear-gradient(150deg, var(--rf-glow-b), transparent 55%), var(--rf-surface); } #rf90 .rf90-band.is-locked { border-style: dashed; border-color: rgba(255, 255, 255, .18); background: transparent; } #rf90 .rf90-band__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } #rf90 .rf90-band__k { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--rf-accent); } #rf90 .rf90-band__h { margin: 2px 0 0; font-family: 'Montserrat', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 22px; line-height: 1.1; color: var(--rf-text); } #rf90 .rf90-band__lock { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--rf-muted); } #rf90 .rf90-band__note { margin: 8px 0 0; font-size: 14px; } #rf90 ol.rf90-people { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; } #rf90 .rf90-people li { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 12px; background: rgba(0, 0, 0, .35); } #rf90 .rf90-people li[hidden] { display: none; } #rf90 .rf90-people li.is-me { box-shadow: inset 0 0 0 2px var(--rf-accent); } #rf90 .rf90-people__n { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--rf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #rf90 .rf90-people__n em { margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--rf-accent); color: var(--rf-accent-ink); font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; } #rf90 .rf90-people__c { flex: none; font-size: 17px; font-weight: 800; font-style: italic; color: var(--rf-text); } #rf90 .rf90-band__more { display: block; width: 100%; margin: 10px 0 0; min-height: 42px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); background: transparent; color: var(--rf-text); font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; font-style: normal; text-transform: none; letter-spacing: 0; box-shadow: none; cursor: pointer; } #rf90 .rf90-band__more:hover { border-color: #FFFFFF; } #rf90 .rf90-fnote { margin: 14px 0 0; } #rf90 .rf90-lb__pick select { width: 100%; } @media (min-width: 760px) { #rf90 ol.rf90-people { grid-template-columns: 1fr 1fr; } #rf90 .rf90-mine { grid-template-columns: 140px 1fr; } #rf90 .rf90-ring { width: 140px; height: 140px; } #rf90 .rf90-band { padding: 22px; } } @media (max-width: 380px) { #rf90 .rf90-mine { grid-template-columns: 96px 1fr; gap: 14px; } #rf90 .rf90-ring { width: 96px; height: 96px; } #rf90 .rf90-ring__n strong { font-size: 28px; } } #rf90 .rf90-apod--lb .rf90-apod__n { font-size: 20px; white-space: nowrap; } #rf90 .rf90-apod--lb .rf90-apod__p--1 .rf90-apod__n { font-size: 24px; } #rf90 .rf90-apod--lb { margin-bottom: 8px; } #rf90 .rf90-lbl li { grid-template-columns: 28px 1fr auto; } /* Trophy shelf */ #rf90 .rf90-bdg { position: relative; display: inline-block; flex: none; width: 72px; height: 72px; } #rf90 .rf90-bdg svg { display: block; width: 100%; height: 100%; overflow: visible; } #rf90 .rf90-bdg--l { width: 112px; height: 112px; } #rf90 .rf90-bdg.is-on svg { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55)); } #rf90 .rf90-bdg--gold.is-on svg, #rf90 .rf90-bdg--phoenix.is-on svg { filter: drop-shadow(0 0 14px rgba(233, 196, 106, .35)) drop-shadow(0 6px 14px rgba(0, 0, 0, .55)); } #rf90 .rf90-bdg__pips { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); display: flex; gap: 4px; } #rf90 .rf90-bdg__pips i { width: 7px; height: 7px; border-radius: 50%; background: #333333; box-shadow: 0 0 0 2px #151515; } #rf90 .rf90-bdg__pips i.is-on { background: #E9C46A; } #rf90 .rf90-bdg--l .rf90-bdg__pips i { width: 9px; height: 9px; } #rf90 .rf90-shelf .rf90-cardhead { align-items: flex-start; } #rf90 .rf90-shelf__gold { flex: none; padding: 6px 12px; border-radius: 999px; background: linear-gradient(180deg, #FBE29A, #D9A93E); color: #0D0D0D; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } #rf90 .rf90-shelf__hero { display: flex; align-items: center; gap: 18px; margin: 4px 0 8px; padding: 16px; border-radius: 14px; background: radial-gradient(80% 120% at 0% 50%, var(--rf-glow-a), transparent 70%), var(--rf-surface2); } #rf90 .rf90-shelf__heroTxt { min-width: 0; } #rf90 .rf90-shelf__k { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #E9C46A; } #rf90 .rf90-shelf__name { margin: 2px 0 4px; font-size: 20px; line-height: 1.1; font-weight: 800; font-style: italic; text-transform: uppercase; color: var(--rf-text); } #rf90 .rf90-shelf__heroTxt .rf90-btn { margin-top: 10px; } #rf90 .rf90-shelf__g { margin: 18px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rf-muted); } #rf90 ul.rf90-shelf__grid { list-style: none; margin: 0 -22px; padding: 2px 22px 8px; display: grid; grid-auto-flow: column; grid-auto-columns: 86px; gap: 6px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; } #rf90 ul.rf90-shelf__grid::-webkit-scrollbar { display: none; } #rf90 .rf90-shelf__grid li { scroll-snap-align: start; } #rf90 button.rf90-shelf__item { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 2px; margin: 0; border: 0; border-radius: 12px; background: transparent; box-shadow: none; color: var(--rf-text); font-family: 'Montserrat', sans-serif; font-style: normal; text-transform: none; letter-spacing: 0; cursor: pointer; } #rf90 button.rf90-shelf__item:hover, #rf90 button.rf90-shelf__item:focus-visible { background: rgba(255, 255, 255, .05); } #rf90 .rf90-shelf__lbl { font-size: 11px; font-weight: 700; line-height: 1.25; text-align: center; color: #e5e5e5; } #rf90 .rf90-shelf__item:not(.is-on) .rf90-shelf__lbl { color: #8c8c8c; } #rf90 .rf90-shelf__bar { display: block; width: 56px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; } #rf90 .rf90-shelf__bar i { display: block; height: 100%; background: var(--rf-accent); } @media (min-width: 760px) { #rf90 ul.rf90-shelf__grid { margin: 0; padding: 2px 0 4px; grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); overflow: visible; } } /* Badge modal */ #rf90 .rf90-bmodal { text-align: center; } #rf90 .rf90-bmodal__art { display: flex; justify-content: center; margin: 14px 0 10px; } #rf90 .rf90-bmodal__art .rf90-bdg { width: 132px; height: 132px; } #rf90 .rf90-bmodal__name { margin: 6px 0 6px; font-family: 'Montserrat', sans-serif; font-size: 26px; line-height: 1.05; font-weight: 800; font-style: italic; text-transform: uppercase; color: var(--rf-text); } #rf90 .rf90-bmodal__detail { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: #d4d4d4; } #rf90 .rf90-bmodal__prog { display: flex; align-items: center; gap: 10px; margin: 10px 0; } #rf90 .rf90-bmodal__prog .rf90-bar { flex: 1; max-width: none; margin: 0; } #rf90 .rf90-bmodal__prog em { flex: none; font-style: normal; font-size: 12px; font-weight: 700; color: var(--rf-muted); } #rf90 .rf90-bmodal__card { display: block; width: auto; max-width: 100%; max-height: 340px; margin: 14px auto 12px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); } #rf90 .rf90-bmodal .rf90-btn--block { margin-top: 8px; } #rf90 .rf90-bmodal .rf90-kicker { color: #E9C46A; } /* Benchmark of the month */ #rf90 .rf90-botm { position: relative; overflow: hidden; isolation: isolate; border-color: var(--rf-accent); background: linear-gradient(160deg, var(--rf-glow-a), transparent 60%), var(--rf-surface); } #rf90 .rf90-botm__wm { position: absolute; z-index: -1; right: -10px; top: -30px; font-size: 130px; font-weight: 800; font-style: italic; line-height: 1; color: rgba(255, 255, 255, .06); pointer-events: none; } #rf90 .rf90-botm__name { margin: 6px 0 8px; font-family: 'Montserrat', sans-serif; font-size: clamp(26px, 6vw, 36px); line-height: 1.02; font-weight: 800; font-style: italic; text-transform: uppercase; color: var(--rf-text); } #rf90 .rf90-botm__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0; } #rf90 .rf90-botm__stats div { padding: 10px; border-radius: 10px; background: rgba(0, 0, 0, .4); text-align: center; min-width: 0; } #rf90 .rf90-botm__stats strong { display: block; font-size: 22px; font-weight: 800; font-style: italic; line-height: 1.1; color: var(--rf-text); } #rf90 .rf90-botm__stats span { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #rf90 ol.rf90-botm__list { list-style: none; margin: 14px 0 6px; padding: 0; display: grid; gap: 6px; } #rf90 .rf90-botm__list li { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 12px; background: rgba(0, 0, 0, .35); } #rf90 .rf90-botm__list li.is-me { box-shadow: inset 0 0 0 2px var(--rf-accent); } #rf90 .rf90-botm__r { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 800; color: var(--rf-muted); } #rf90 .rf90-botm__r--gold { background: #E9C46A; color: #0D0D0D; } #rf90 .rf90-botm__r--silver { background: #CBD2DA; color: #0D0D0D; } #rf90 .rf90-botm__r--bronze { background: #C98B5A; color: #0D0D0D; } #rf90 .rf90-botm__list .rf90-av { width: 30px; height: 30px; font-size: 11px; } #rf90 .rf90-botm__n { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--rf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #rf90 .rf90-botm__n em { margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--rf-accent); color: var(--rf-accent-ink); font-style: normal; font-size: 10px; font-weight: 800; text-transform: uppercase; } #rf90 .rf90-botm__list strong { flex: none; font-size: 16px; font-weight: 800; font-style: italic; color: var(--rf-text); } #rf90 .rf90-botm__list strong i { font-style: normal; font-size: 10px; padding: 2px 5px; border-radius: 4px; background: rgba(255, 255, 255, .12); color: var(--rf-muted); } /* App feel: app view page, sticky app bar, dock navigation */ body.rf90-app { margin: 0; background: #0D0D0D; } body.rf90-app #rf90.rf90 { padding-top: calc(env(safe-area-inset-top, 0px) + 12px); } #rf90 .rf90-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } #rf90 .rf90-tab__ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Desktop and tablet: a floating dock that sticks under the top of the screen */ @media (min-width: 760px) { #rf90 .rf90-tabs { position: sticky; top: 14px; z-index: 60; width: max-content; max-width: 100%; margin: 0 auto 26px; padding: 6px; gap: 4px; border-radius: 999px; background: rgba(21, 21, 21, .86); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); overflow-x: auto; } body.admin-bar #rf90 .rf90-tabs { top: calc(var(--wp-admin--admin-bar--height, 32px) + 14px); } #rf90 .rf90-tab { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; color: #a3a3a3; font-size: 13px; letter-spacing: .04em; transition: background .2s ease, color .2s ease; } #rf90 .rf90-tab:hover { color: #FFFFFF; background: rgba(255, 255, 255, .06); } #rf90 .rf90-tab.is-on { background: #FFFFFF; color: #0D0D0D; } #rf90 .rf90-tab__long { display: inline; } #rf90 .rf90-tab__short { display: none; } } /* Phones: an app style tab bar fixed to the bottom, and a sticky app bar at the top */ @media (max-width: 759px) { #rf90 .rf90-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); overflow: visible; border-radius: 0; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(13, 13, 13, .94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 -10px 30px rgba(0, 0, 0, .45); } #rf90 .rf90-tab { flex-direction: column; gap: 4px; min-height: 56px; padding: 4px 2px; border: 0; border-radius: 14px; background: transparent; color: #8c8c8c; font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; -webkit-tap-highlight-color: transparent; } #rf90 .rf90-tab__ico { width: 44px; height: 28px; padding: 4px 12px; box-sizing: border-box; border-radius: 999px; transition: background .2s ease; } #rf90 .rf90-tab.is-on { background: transparent; color: #FFFFFF; border: 0; } #rf90 .rf90-tab.is-on .rf90-tab__ico { background: var(--rf-accent); color: var(--rf-accent-ink); } #rf90 .rf90-tab__long { display: none; } #rf90 .rf90-tab__short { display: inline; } #rf90.rf90:has(.rf90-tabs) { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } #rf90 .rf90-toast { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); } #rf90 .rf90-top { position: sticky; top: 0; z-index: 70; margin: -12px -16px 18px; padding: 10px 16px; flex-wrap: nowrap; background: rgba(13, 13, 13, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 255, 255, .06); } body.rf90-app #rf90 .rf90-top { padding-top: calc(env(safe-area-inset-top, 0px) + 10px); margin-top: calc(-12px - env(safe-area-inset-top, 0px)); } #rf90 .rf90-logo { width: 40px; height: 36px; } #rf90 .rf90-brand { gap: 10px; } #rf90 .rf90-brand__txt { font-size: 13px; } #rf90 .rf90-top__right { gap: 12px; flex-wrap: nowrap; } #rf90 .rf90-top__right .rf90-link { font-size: 13px; white-space: nowrap; } #rf90 .rf90-hello__n { display: none; } #rf90 .rf90-hello__i { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--rf-accent); color: var(--rf-accent-ink); font-size: 14px; font-weight: 800; } } @media (max-width: 600px) { body.admin-bar #rf90 .rf90-top { top: 0; } } @media (min-width: 601px) and (max-width: 759px) { body.admin-bar #rf90 .rf90-top { top: var(--wp-admin--admin-bar--height, 46px); } } @media (min-width: 760px) { #rf90 .rf90-hello__i { display: none; } } /* Medal art v2 */ #rf90 .rf90-bdg { width: 84px; height: 84px; } #rf90 .rf90-bdg--l { width: 128px; height: 128px; } #rf90 .rf90-bdg svg { filter: none; } #rf90 .rf90-bdg.is-on svg { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .55)); } #rf90 .rf90-bdg--gold.is-on svg, #rf90 .rf90-bdg--phoenix.is-on svg { filter: drop-shadow(0 0 16px rgba(240, 196, 92, .35)) drop-shadow(0 8px 14px rgba(0, 0, 0, .55)); } #rf90 .rf90-bdg__pips { display: none; } #rf90 ul.rf90-shelf__grid { grid-auto-columns: 96px; } #rf90 .rf90-bmodal__art .rf90-bdg { width: 168px; height: 168px; } #rf90 button.rf90-shelf__item { transition: transform .15s ease; } #rf90 button.rf90-shelf__item.is-on:active { transform: scale(.96); } @media (min-width: 760px) { #rf90 ul.rf90-shelf__grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } } /* Benchmark library */ #rf90 .rf90-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 26px 0 12px; flex-wrap: wrap; } #rf90 .rf90-sechead .rf90-h2 { margin: 2px 0 0; } #rf90 .rf90-lib { margin-top: 20px; } #rf90 .rf90-lib__search { position: relative; display: block; margin: 16px 0 12px; } #rf90 .rf90-lib__search svg { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); fill: var(--rf-muted); pointer-events: none; } #rf90 .rf90-lib__search input { width: 100%; min-height: 52px; padding: 0 16px 0 48px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: #0D0D0D; color: var(--rf-text); font-family: 'Montserrat', sans-serif; font-size: 16px; box-shadow: none; -webkit-appearance: none; appearance: none; } #rf90 .rf90-lib__search input:focus { outline: none; border-color: var(--rf-accent); box-shadow: 0 0 0 3px var(--rf-glow-a); } #rf90 .rf90-lib__search .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } #rf90 .rf90-lib__count { margin: 0 0 6px; min-height: 18px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rf-muted); } #rf90 ul.rf90-lib__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } #rf90 .rf90-lib__row { border-radius: 14px; background: var(--rf-surface2); overflow: hidden; transition: box-shadow .2s ease; } #rf90 .rf90-lib__row.is-open { box-shadow: inset 0 0 0 1px var(--rf-accent); } #rf90 button.rf90-lib__head { width: 100%; display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px 12px 12px; border: 0; border-radius: 0; background: transparent; color: var(--rf-text); font-family: 'Montserrat', sans-serif; font-style: normal; text-transform: none; letter-spacing: 0; text-align: left; box-shadow: none; cursor: pointer; } #rf90 button.rf90-lib__head:hover { background: rgba(255, 255, 255, .03); } #rf90 .rf90-lib__ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .07); color: #FFFFFF; } #rf90 .rf90-lib__ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } #rf90 .rf90-lib__ico--hero { background: linear-gradient(160deg, #FBE29A, #B8892B); color: #0D0D0D; } #rf90 .rf90-lib__ico--strength { background: rgba(201, 139, 90, .22); color: #E7A877; } #rf90 .rf90-lib__ico--crossfit { background: var(--rf-glow-a); color: var(--rf-accent); } #rf90 .rf90-lib__ico--hyrox { background: rgba(254, 250, 0, .14); color: #FEFA00; } #rf90 .rf90-lib__ico--dd { background: rgba(255, 50, 49, .16); color: #FF5A50; } #rf90 .rf90-lib__ico--gym { background: rgba(48, 213, 200, .14); color: #30D5C8; } #rf90 .rf90-lib__row.is-done .rf90-lib__ico { box-shadow: inset 0 0 0 2px var(--rf-accent); } #rf90 .rf90-lib__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } #rf90 .rf90-lib__txt strong { font-size: 15px; font-weight: 800; font-style: italic; text-transform: uppercase; line-height: 1.15; color: var(--rf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #rf90 .rf90-lib__txt em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--rf-muted); } #rf90 .rf90-lib__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; } #rf90 .rf90-lib__tag { font-style: normal; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #FFFFFF; } #rf90 .rf90-lib__tag--m { background: var(--rf-accent); color: var(--rf-accent-ink); } #rf90 .rf90-lib__tag--d { background: rgba(251, 191, 36, .2); color: #fbbf24; } #rf90 .rf90-lib__best { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-size: 15px; font-weight: 800; font-style: italic; color: var(--rf-accent); line-height: 1.1; } #rf90 .rf90-lib__best em { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rf-muted); } #rf90 .rf90-lib__chev { flex: none; width: 10px; height: 10px; border-right: 2px solid #6b6b6b; border-bottom: 2px solid #6b6b6b; transform: rotate(45deg); margin: 0 6px 4px 0; transition: transform .2s ease; } #rf90 .rf90-lib__row.is-open .rf90-lib__chev { transform: rotate(225deg); margin-bottom: -4px; } #rf90 .rf90-lib__body { padding: 0 14px 14px 66px; } #rf90 .rf90-lib__body p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: #d4d4d4; } #rf90 .rf90-lib__body .rf90-btn { margin-top: 4px; } #rf90 .rf90-lib__empty { margin: 14px 0 0; padding: 18px; border-radius: 12px; background: var(--rf-surface2); color: var(--rf-muted); text-align: center; } #rf90 [data-lib-more] { margin-top: 12px; } @media (max-width: 480px) { #rf90 .rf90-lib__body { padding-left: 14px; } } #rf90 input[type="number"] { -moz-appearance: textfield; appearance: textfield; font-size: 16px; } #rf90 input[type="number"]::-webkit-outer-spin-button, #rf90 input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #rf90 .rf90-lib__txt strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* v2.5 Popups: one close button, bottom sheets on phones, swipe down to close */ html.rf90-lock, html.rf90-lock body { overflow: hidden; overscroll-behavior: none; } #rf90 .rf90-modal { overscroll-behavior: contain; animation: rf90-fade .18s ease; } #rf90 .rf90-modal__box { position: relative; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; transition: transform .22s ease; } #rf90 .rf90-modal__close { position: sticky; top: 0; z-index: 4; float: right; display: grid; place-items: center; width: 40px; height: 40px; margin: -6px -6px 6px 12px; padding: 0; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; background: rgba(40, 40, 40, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #FFFFFF; font-size: 0; line-height: 0; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); cursor: pointer; -webkit-tap-highlight-color: transparent; } #rf90 .rf90-modal__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; } #rf90 .rf90-modal__close:hover, #rf90 .rf90-modal__close:focus-visible { background: #FFFFFF; color: #0D0D0D; outline: none; } #rf90 .rf90-modal__close:active { transform: scale(.94); } #rf90 .rf90-share { position: relative; } @keyframes rf90-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes rf90-up { from { transform: translateY(40px); opacity: .6; } to { transform: translateY(0); opacity: 1; } } @media (max-width: 680px) { #rf90 .rf90-modal { place-items: end center; padding: 0; background: rgba(0, 0, 0, .72); } #rf90 .rf90-modal__box { max-width: 100%; max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); border-radius: 22px 22px 0 0; padding-top: 26px; padding-bottom: calc(22px + env(safe-area-inset-bottom)); animation: rf90-up .24s cubic-bezier(.2, .8, .2, 1); border-bottom: 0; } #rf90 .rf90-modal__box::before { content: ""; position: absolute; top: 9px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: rgba(255, 255, 255, .28); } #rf90 .rf90-modal__close { margin-top: -14px; } } /* Badge popup: smaller story card, Done always there */ #rf90 .rf90-bmodal__card { max-height: 260px; } #rf90 .rf90-bmodal__done { margin-top: 10px; } #rf90 .rf90-bmodal .rf90-kicker { padding: 0 44px; } /* Benchmarks: Mine and Library */ #rf90 .rf90-bhub { margin-top: 20px; } #rf90 .rf90-bhub__seg { max-width: none; margin: 0 0 14px; } #rf90 .rf90-bhub__seg button span { margin-left: 4px; font-size: 12px; opacity: .6; } #rf90 .rf90-bhub .rf90-zones { margin-bottom: 12px; } #rf90 .rf90-bhub .rf90-lib { margin-top: 0; } #rf90 .rf90-bhub .rf90-center .rf90-btn { margin-top: 12px; } #rf90 .rf90-lib__search { margin-top: 0; } #rf90 .rf90-lib__tag--pr { background: rgba(74, 222, 128, .18); color: #4ade80; } #rf90 .rf90-lib__ico--done { background: var(--rf-glow-a); color: var(--rf-accent); } #rf90 .rf90-lib__ico--base { background: rgba(255, 255, 255, .08); } #rf90 ul.rf90-lib__feat { margin-bottom: 10px; } #rf90 .rf90-lib__feat .rf90-lib__row { background: linear-gradient(120deg, var(--rf-glow-a), var(--rf-surface2) 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } #rf90 .rf90-zgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } #rf90 button.rf90-ztile { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 112px; margin: 0; padding: 14px; border: 1px solid rgba(255, 255, 255, .06); border-radius: 16px; background: var(--rf-surface2); color: var(--rf-text); font-family: 'Montserrat', sans-serif; font-style: normal; text-transform: none; letter-spacing: 0; text-align: left; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, border-color .2s ease; } #rf90 button.rf90-ztile:active { transform: scale(.97); } #rf90 button.rf90-ztile:hover { border-color: rgba(255, 255, 255, .18); } #rf90 .rf90-ztile strong { font-size: 15px; font-weight: 800; font-style: italic; text-transform: uppercase; line-height: 1.15; } #rf90 .rf90-ztile em { margin-top: auto; font-style: normal; font-size: 12px; font-weight: 700; color: var(--rf-muted); } #rf90 .rf90-ztile--hero { background: linear-gradient(160deg, rgba(251, 226, 154, .16), var(--rf-surface2) 65%); border-color: rgba(233, 196, 106, .25); } #rf90 .rf90-ztile--hero strong { color: #F3D58A; } @media (min-width: 760px) { #rf90 .rf90-zgrid { grid-template-columns: repeat(4, 1fr); } } #rf90 .rf90-lib .rf90-zones { margin: 0 0 8px; } /* Benchmark detail sheet */ #rf90 .rf90-sheet { max-width: 520px; } #rf90 .rf90-sheet__top { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 6px; } #rf90 .rf90-sheet__top .rf90-lib__ico { width: 52px; height: 52px; border-radius: 14px; } #rf90 .rf90-sheet__top .rf90-lib__ico svg { width: 26px; height: 26px; } #rf90 .rf90-sheet__top .rf90-kicker { margin: 2px 0 4px; } #rf90 .rf90-sheet__top .rf90-h2 { margin: 0; font-size: 24px; line-height: 1.1; font-style: italic; text-transform: uppercase; } #rf90 .rf90-sheet__h { clear: both; margin: 18px 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rf-muted); } #rf90 .rf90-sheet__how { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: #e5e5e5; } #rf90 .rf90-sheet__mine { margin-top: 6px; padding-top: 2px; border-top: 1px solid var(--rf-line); } #rf90 .rf90-sheet__go { position: sticky; bottom: calc(-22px - env(safe-area-inset-bottom)); margin: 16px -4px 0; padding: 12px 4px calc(4px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(23, 23, 23, 0), var(--rf-surface, #171717) 30%); } #rf90 .rf90-lib__chev { transform: rotate(-45deg); margin: 0 8px 0 0; } /* v2.5 Hub guide */ #rf90 .rf90-gseg { max-width: none; margin: 0 0 18px; } #rf90 .rf90-hero--tight { margin-bottom: 14px; } #rf90 .rf90-hgs { display: grid; gap: 8px; margin-bottom: 16px; } #rf90 details.rf90-hg { border-radius: 16px; background: var(--rf-surface); border: 1px solid var(--rf-line); overflow: hidden; } #rf90 details.rf90-hg[open] { border-color: rgba(255, 255, 255, .16); } #rf90 .rf90-hg summary { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; } #rf90 .rf90-hg summary::-webkit-details-marker { display: none; } #rf90 .rf90-hg__ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--rf-glow-a); color: var(--rf-accent); } #rf90 .rf90-hg__ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } #rf90 .rf90-hg__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } #rf90 .rf90-hg__t strong { font-size: 16px; font-weight: 800; font-style: italic; text-transform: uppercase; line-height: 1.15; color: var(--rf-text); } #rf90 .rf90-hg__t em { font-style: normal; font-size: 13px; color: var(--rf-muted); } #rf90 .rf90-hg__chev { flex: none; width: 10px; height: 10px; border-right: 2px solid #777; border-bottom: 2px solid #777; transform: rotate(45deg); margin: 0 6px 4px 0; transition: transform .2s ease; } #rf90 details[open] > summary .rf90-hg__chev { transform: rotate(225deg); margin-bottom: -4px; } #rf90 .rf90-hg__body { padding: 2px 16px 18px; } #rf90 .rf90-hg__body > p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: #d4d4d4; } #rf90 .rf90-hg__body .rf90-btn--block { margin-top: 14px; } #rf90 ul.rf90-hg__tabs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } #rf90 .rf90-hg__tabs li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--rf-surface2); } #rf90 .rf90-hg__tabs .rf90-tabicon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .06); color: #FFFFFF; } #rf90 .rf90-hg__tabs .rf90-tabicon svg { width: 20px; height: 20px; } #rf90 .rf90-hg__tabs strong, #rf90 .rf90-hg__list strong, #rf90 .rf90-hg__q strong { display: block; font-size: 14px; font-weight: 800; color: var(--rf-text); } #rf90 .rf90-hg__tabs p, #rf90 .rf90-hg__list p, #rf90 .rf90-hg__q p { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--rf-muted); } #rf90 ol.rf90-hg__steps { list-style: none; counter-reset: hg; margin: 0; padding: 0; display: grid; gap: 10px; } #rf90 .rf90-hg__steps li { counter-increment: hg; position: relative; padding: 0 0 0 40px; font-size: 14px; line-height: 1.55; color: #d4d4d4; } #rf90 .rf90-hg__steps li::before { content: counter(hg); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--rf-accent); color: var(--rf-accent-ink); font-size: 13px; font-weight: 800; font-style: italic; } #rf90 .rf90-hg__steps strong { color: var(--rf-text); } #rf90 ul.rf90-hg__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } #rf90 .rf90-hg__list li { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rf-line); } #rf90 .rf90-hg__list li:last-child { border-bottom: 0; } #rf90 .rf90-hg__dot { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 2px solid #555; } #rf90 .rf90-hg__list li.is-done .rf90-hg__dot { border-color: var(--rf-accent); background: var(--rf-accent); box-shadow: inset 0 0 0 3px var(--rf-surface); } #rf90 ul.rf90-hg__q { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 6px; } #rf90 .rf90-hg__q li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--rf-surface2); opacity: .7; } #rf90 .rf90-hg__q li.is-open, #rf90 .rf90-hg__q li.is-done { opacity: 1; } #rf90 .rf90-hg__q li > div { flex: 1; min-width: 0; } #rf90 .rf90-hg__q li.is-done strong { text-decoration: line-through; text-decoration-color: var(--rf-accent); } #rf90 .rf90-hg__pts { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--rf-glow-a); color: var(--rf-accent); font-size: 13px; font-weight: 800; font-style: italic; } #rf90 .rf90-hg__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 14px; } #rf90 .rf90-hg__grid div { padding: 12px; border-radius: 12px; background: var(--rf-surface2); } #rf90 .rf90-hg__grid strong { display: block; font-size: 20px; font-weight: 800; font-style: italic; color: var(--rf-accent); line-height: 1.1; } #rf90 .rf90-hg__grid em { display: block; margin-top: 4px; font-style: normal; font-size: 12px; color: var(--rf-muted); } #rf90 ol.rf90-hg__levels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } #rf90 .rf90-hg__levels li { padding: 12px; border-radius: 12px; border: 1px solid var(--rf-line); } #rf90 .rf90-hg__levels li:last-child { background: linear-gradient(140deg, var(--rf-glow-a), transparent 70%); border-color: rgba(255, 255, 255, .16); } #rf90 .rf90-hg__levels strong { display: block; font-size: 14px; font-weight: 800; font-style: italic; text-transform: uppercase; color: var(--rf-text); } #rf90 .rf90-hg__levels span { display: block; margin-top: 2px; font-size: 12px; color: var(--rf-muted); } #rf90 .rf90-hg__tip { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--rf-surface2); font-size: 13px; line-height: 1.55; color: #d4d4d4; } #rf90 .rf90-hg__tip b { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--rf-accent); } #rf90 .rf90-hg__help .rf90-btn { margin-top: 10px; } @media (min-width: 760px) { #rf90 .rf90-hg__grid { grid-template-columns: repeat(3, 1fr); } #rf90 ol.rf90-hg__levels { grid-template-columns: repeat(4, 1fr); } } #rf90 .rf90-hg__tabs .rf90-tab__ico { width: 20px; height: 20px; padding: 0; border-radius: 0; background: none; color: inherit; } /* v2.7 The whiteboard: This week on Fame, Today on Home */ #rf90 .rf90-seg--3 { grid-template-columns: repeat(3, 1fr); max-width: 560px; } #rf90 .rf90-wod__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; } #rf90 .rf90-wod__top .rf90-h2 { margin: 0; } #rf90 .rf90-wod__nav { display: flex; gap: 6px; } #rf90 button.rf90-wod__arrow { display: grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 1px solid var(--rf-line); border-radius: 50%; background: var(--rf-surface); color: var(--rf-text); box-shadow: none; cursor: pointer; } #rf90 .rf90-wod__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } #rf90 .rf90-wod__clubs, #rf90 .rf90-wod__tracks { display: flex; gap: 6px; margin: 0 0 12px; overflow-x: auto; scrollbar-width: none; } #rf90 .rf90-wod__clubs::-webkit-scrollbar, #rf90 .rf90-wod__tracks::-webkit-scrollbar, #rf90 .rf90-wod__days::-webkit-scrollbar { display: none; } #rf90 .rf90-wod__clubs button, #rf90 .rf90-wod__tracks button { flex: none; min-height: 36px; margin: 0; padding: 0 16px; border: 1px solid var(--rf-line); border-radius: 999px; background: transparent; color: var(--rf-muted); font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; font-style: normal; text-transform: none; letter-spacing: 0; box-shadow: none; cursor: pointer; } #rf90 .rf90-wod__clubs button.is-on, #rf90 .rf90-wod__tracks button.is-on { background: var(--rf-accent); border-color: var(--rf-accent); color: var(--rf-accent-ink); } #rf90 .rf90-wod__days { display: grid; grid-template-columns: repeat(7, minmax(44px, 1fr)); gap: 6px; margin: 0 0 14px; overflow-x: auto; } #rf90 button.rf90-wday { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; margin: 0; padding: 8px 0; border: 1px solid var(--rf-line); border-radius: 14px; background: var(--rf-surface); color: var(--rf-text); font-family: 'Montserrat', sans-serif; font-style: normal; text-transform: none; letter-spacing: 0; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } #rf90 .rf90-wday span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rf-muted); } #rf90 .rf90-wday strong { font-size: 20px; font-weight: 800; font-style: italic; line-height: 1.1; } #rf90 .rf90-wday i { position: absolute; bottom: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--rf-accent); } #rf90 .rf90-wday.is-off { opacity: .4; } #rf90 .rf90-wday.is-today { border-color: rgba(255, 255, 255, .35); } #rf90 .rf90-wday.is-on { background: #FFFFFF; border-color: #FFFFFF; color: #0D0D0D; } #rf90 .rf90-wday.is-on span { color: #555; } #rf90 .rf90-wday.is-on i { background: #0D0D0D; } #rf90 .rf90-wod__load { display: flex; justify-content: center; gap: 6px; padding: 26px 0; } #rf90 .rf90-wod__load span { width: 8px; height: 8px; border-radius: 50%; background: var(--rf-muted); animation: rf90-dot 1s infinite ease-in-out; } #rf90 .rf90-wod__load span:nth-child(2) { animation-delay: .15s; } #rf90 .rf90-wod__load span:nth-child(3) { animation-delay: .3s; } @keyframes rf90-dot { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } } #rf90 .rf90-wod__note { margin: 12px 0 0; } #rf90 .rf90-wcard { margin: 0 0 12px; padding: 18px; border-radius: var(--rf-radius); border: 1px solid var(--rf-line); background: var(--rf-surface); } #rf90 .rf90-wcard.is-scored { background: linear-gradient(160deg, var(--rf-glow-a), transparent 45%), var(--rf-surface); border-color: rgba(255, 255, 255, .12); } #rf90 .rf90-wcard .rf90-kicker { margin: 0 0 4px; } #rf90 .rf90-wcard__n { margin: 0 0 10px; font-family: 'Montserrat', sans-serif; font-size: 26px; line-height: 1.05; font-weight: 800; font-style: italic; text-transform: uppercase; color: var(--rf-text); } #rf90 .rf90-wcard__desc { position: relative; font-size: 14px; line-height: 1.55; color: #e0e0e0; overflow: hidden; } #rf90 .rf90-wcard__desc.is-clip { max-height: 210px; } #rf90 .rf90-wcard__desc.is-short { max-height: 120px; } #rf90 .rf90-wcard__desc.is-clip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(180deg, rgba(21, 21, 21, 0), var(--rf-surface)); pointer-events: none; } #rf90 .rf90-wcard__desc h2, #rf90 .rf90-wcard__desc h3, #rf90 .rf90-wcard__desc h4 { margin: 10px 0 6px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rf-muted); } #rf90 .rf90-wcard__desc p { margin: 0 0 6px; } #rf90 .rf90-wcard__desc table { width: 100%; margin: 6px 0 10px; border-collapse: collapse; font-size: 13px; } #rf90 .rf90-wcard__desc th, #rf90 .rf90-wcard__desc td { padding: 7px 8px; border: 1px solid var(--rf-line); text-align: left; vertical-align: top; color: #e0e0e0; background: transparent; } #rf90 .rf90-wcard__desc th { background: rgba(255, 255, 255, .06); font-weight: 700; } #rf90 .rf90-wcard__desc th h3 { margin: 0; color: var(--rf-text); font-size: 12px; } #rf90 button.rf90-wcard__more { margin: 6px 0 0; padding: 0; border: 0; background: none; color: var(--rf-accent); font-family: inherit; font-size: 13px; font-weight: 700; box-shadow: none; cursor: pointer; text-transform: none; letter-spacing: 0; font-style: normal; } #rf90 details.rf90-wplan { margin: 0 0 12px; border-radius: 14px; border: 1px solid var(--rf-line); background: var(--rf-surface); } #rf90 .rf90-wplan > summary { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; cursor: pointer; list-style: none; font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 14px; } #rf90 .rf90-wplan > summary::-webkit-details-marker, #rf90 .rf90-wplan li summary::-webkit-details-marker { display: none; } #rf90 .rf90-wplan > summary span { font-style: normal; font-weight: 600; text-transform: none; font-size: 12px; color: var(--rf-muted); } #rf90 .rf90-wplan ol { list-style: none; margin: 0; padding: 0 16px 10px; } #rf90 .rf90-wplan li { border-top: 1px solid var(--rf-line); } #rf90 .rf90-wplan li summary { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; cursor: pointer; list-style: none; font-size: 14px; } #rf90 .rf90-wplan li summary em { font-style: normal; font-size: 12px; color: var(--rf-muted); } #rf90 .rf90-wplan li .rf90-wcard__desc { padding: 0 0 12px; } /* Leaderboards */ #rf90 .rf90-lbx { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rf-line); } #rf90 .rf90-lbx__filters { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 14px; } #rf90 .rf90-lbx__chips { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .06); } #rf90 .rf90-lbx__chips button { min-height: 30px; margin: 0; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--rf-muted); font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; font-style: normal; text-transform: none; letter-spacing: 0; box-shadow: none; cursor: pointer; } #rf90 .rf90-lbx__chips button.is-on { background: #FFFFFF; color: #0D0D0D; } #rf90 ol.rf90-lbx__pod { list-style: none; display: grid; grid-template-columns: 1fr 1.12fr 1fr; align-items: end; gap: 8px; margin: 0 0 10px; padding: 0; } #rf90 .rf90-lbx__p { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px 12px; border-radius: 16px; background: rgba(255, 255, 255, .05); text-align: center; min-width: 0; } #rf90 .rf90-lbx__p--1 { padding-top: 20px; background: linear-gradient(180deg, rgba(233, 196, 106, .28), rgba(233, 196, 106, .06)); box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .45); } #rf90 .rf90-lbx__p--2 { background: linear-gradient(180deg, rgba(200, 210, 220, .2), rgba(200, 210, 220, .04)); } #rf90 .rf90-lbx__p--3 { background: linear-gradient(180deg, rgba(201, 139, 90, .22), rgba(201, 139, 90, .04)); } #rf90 .rf90-lbx__p.is-me { box-shadow: inset 0 0 0 2px var(--rf-accent); } #rf90 .rf90-lbx__p .rf90-lbx__av { width: 48px; height: 48px; font-size: 16px; } #rf90 .rf90-lbx__p--1 .rf90-lbx__av { width: 58px; height: 58px; font-size: 19px; box-shadow: 0 0 0 3px #E9C46A; } #rf90 .rf90-lbx__p--2 .rf90-lbx__av { box-shadow: 0 0 0 3px #C9D2DB; } #rf90 .rf90-lbx__p--3 .rf90-lbx__av { box-shadow: 0 0 0 3px #C98B5A; } #rf90 .rf90-lbx__medal { position: absolute; top: -9px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 800; color: #0D0D0D; background: #C9D2DB; } #rf90 .rf90-lbx__p--1 .rf90-lbx__medal { background: linear-gradient(160deg, #FFF0B8, #E2AE3F); } #rf90 .rf90-lbx__p--3 .rf90-lbx__medal { background: linear-gradient(160deg, #F2B98A, #C07A45); } #rf90 .rf90-lbx__p strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 800; color: var(--rf-text); } #rf90 .rf90-lbx__p em { font-style: italic; font-size: 17px; font-weight: 800; color: var(--rf-accent); line-height: 1.1; } #rf90 .rf90-lbx__p--1 em { font-size: 20px; } #rf90 .rf90-lbx__p i, #rf90 .rf90-lbx__nm i { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--rf-muted); } #rf90 .rf90-lbx__av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #2a2a2a; color: #FFFFFF; font-size: 12px; font-weight: 800; } #rf90 ol.rf90-lbx__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } #rf90 .rf90-lbx__list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .03); } #rf90 .rf90-lbx__list li.is-me { background: var(--rf-glow-a); box-shadow: inset 0 0 0 1px var(--rf-accent); } #rf90 .rf90-lbx__list--me { margin-top: 8px !important; padding-top: 8px !important; border-top: 1px dashed var(--rf-line) !important; } #rf90 .rf90-lbx__rk { flex: none; width: 22px; text-align: center; font-size: 13px; font-weight: 800; color: var(--rf-muted); } #rf90 .rf90-lbx__nm { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; font-weight: 700; color: var(--rf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #rf90 .rf90-lbx__nm b { display: inline; color: var(--rf-accent); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; } #rf90 .rf90-lbx__v { flex: none; font-size: 15px; font-weight: 800; font-style: italic; color: var(--rf-text); } #rf90 .rf90-lbx__empty { margin: 0; padding: 14px; border-radius: 12px; background: rgba(255, 255, 255, .04); color: var(--rf-muted); font-size: 14px; text-align: center; } #rf90 .rf90-lbx__sum { margin: 4px 0 0; font-size: 13px; color: var(--rf-muted); text-align: center; } #rf90 .rf90-lbx__more { margin-top: 10px; } #rf90 .rf90-lbx--mini { margin-top: 14px; } #rf90 .rf90-lbx--mini .rf90-lbx__p .rf90-lbx__av { width: 40px; height: 40px; font-size: 14px; } #rf90 .rf90-lbx--mini .rf90-lbx__p--1 .rf90-lbx__av { width: 48px; height: 48px; } /* Today on Home */ #rf90 .rf90-today { background: linear-gradient(150deg, var(--rf-glow-a), transparent 50%), var(--rf-surface); } #rf90 .rf90-today__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; } #rf90 .rf90-today__head .rf90-h2 { margin: 2px 0 0; font-size: 24px; font-style: italic; text-transform: uppercase; } #rf90 .rf90-today__chip { flex: none; padding: 5px 12px; border-radius: 999px; background: var(--rf-accent); color: var(--rf-accent-ink); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; } #rf90 .rf90-today .rf90-btn--block { margin-top: 14px; } #rf90 .rf90-today .rf90-wcard__desc.is-clip::after { background: linear-gradient(180deg, rgba(21, 21, 21, 0), #151515); } /* v2.7.1 Log my score */ #rf90 .rf90-lbx__log { margin: 0 0 14px; } #rf90 .rf90-lbx__mine { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--rf-glow-a); box-shadow: inset 0 0 0 1px var(--rf-accent); } #rf90 .rf90-lbx__mine span { flex: 1; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rf-muted); } #rf90 .rf90-lbx__mine strong { font-size: 18px; font-weight: 800; font-style: italic; color: var(--rf-text); } #rf90 .rf90-lbx__mine .rf90-linkbtn { margin: 0; padding: 0 0 0 6px; border: 0; background: none; color: var(--rf-accent); font-family: inherit; font-size: 13px; font-weight: 700; box-shadow: none; cursor: pointer; text-transform: none; letter-spacing: 0; font-style: normal; } #rf90 .rf90-lbx__nm u { text-decoration: none; display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rf-muted); vertical-align: middle; } #rf90 .rf90-wl__h { margin: 14px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--rf-muted); } #rf90 .rf90-wl__scale { display: flex; margin-bottom: 14px; } #rf90 .rf90-wl__scale button { flex: 1; min-height: 38px; font-size: 13px; } #rf90 .rf90-wl__note { margin: 12px 0 0; } #rf90 .rf90-wl .rf90-actions { justify-content: space-between; } #rf90 .rf90-wl .rf90-actions button[type="submit"] { margin-left: auto; } #rf90 .rf90-wcard__bm { display: flex; align-items: center; gap: 8px; margin: -4px 0 12px; font-size: 13px; font-weight: 700; color: #F3D58A; } #rf90 .rf90-wcard__bm svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; } #rf90 .rf90-wl__bm { margin: 4px 0 12px; padding: 10px 12px; border-radius: 12px; background: rgba(233, 196, 106, .12); color: #F3D58A; font-size: 13px; font-weight: 600; line-height: 1.45; } /* Login code */ #rf90 .rf90-codeform { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--rf-line); } #rf90 input.rf90-code { font-size: 28px; font-weight: 800; letter-spacing: .4em; text-align: center; } /* CrossFit link (Stats) and the Open (Fame) */ #rf90 .rf90-seg--4 { grid-template-columns: repeat(4, 1fr); max-width: 640px; } #rf90 .rf90-seg--4 button { padding: 0 4px; font-size: 12px; white-space: nowrap; } #rf90 .rf90-cf .rf90-h2 { margin-bottom: 6px; } #rf90 .rf90-cf__guess { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 14px 0; padding: 14px 16px; border-radius: 14px; background: var(--rf-surface2); border: 1px solid var(--rf-line); } #rf90 .rf90-cf__guess p { margin: 0; font-size: 14px; } #rf90 .rf90-cf__help { margin-top: 14px; font-size: 14px; color: var(--rf-muted); } #rf90 .rf90-cf__help summary { cursor: pointer; font-weight: 700; color: var(--rf-text); } #rf90 .rf90-cf__help ol { margin: 10px 0 8px 18px; padding: 0; } #rf90 .rf90-cf__help li { margin: 4px 0; } #rf90 .rf90-cf__acts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 14px 0 6px; } #rf90 .rf90-cf__msg { margin: 10px 0 0; min-height: 1em; color: var(--rf-muted); } #rf90 .rf90-cf__msg.is-bad { color: #fca5a5; } #rf90 .rf90-cf__pv { margin: 12px 0 4px; } #rf90 .rf90-cf__items { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; } #rf90 .rf90-cf__items li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--rf-surface2); } #rf90 .rf90-cf__items li span { display: flex; flex-direction: column; min-width: 0; } #rf90 .rf90-cf__items li b { font-size: 14px; } #rf90 .rf90-cf__items li em { font-style: normal; font-size: 13px; color: var(--rf-muted); } #rf90 .rf90-cf__items li i { flex: none; font-style: normal; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--rf-muted); } #rf90 .rf90-cf__items li.is-new i { background: var(--rf-accent); color: #0D0D0D; } #rf90 .rf90-cf__items li.is-skip { opacity: .6; } #rf90 .rf90-cfh { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rf-line); } #rf90 .rf90-cfh__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; } #rf90 .rf90-cfh__list li { padding: 12px 14px; border-radius: 14px; background: var(--rf-surface2); } #rf90 .rf90-cfh__list li p { margin: 2px 0 0; } #rf90 .rf90-cfh__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } #rf90 .rf90-cfh__y { font-size: 22px; font-weight: 800; font-style: italic; } #rf90 .rf90-cfh__rk { text-align: right; font-weight: 700; font-size: 14px; } #rf90 .rf90-cfh__rk em { display: block; font-style: normal; font-weight: 500; font-size: 11px; color: var(--rf-muted); } #rf90 .rf90-cfh__sc, #rf90 .rf90-open__more { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } #rf90 .rf90-cfh__sc span, #rf90 .rf90-open__more span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: 12px; } #rf90 .rf90-cfh__sc b, #rf90 .rf90-open__more b { color: var(--rf-accent); font-weight: 800; } #rf90 .rf90-cfh__sc i { font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 6px; background: rgba(255, 255, 255, .14); } #rf90 .rf90-open__more i { font-style: normal; color: var(--rf-muted); } #rf90 .rf90-open__stats { margin: 6px 0 16px; } #rf90 .rf90-open__years, #rf90 .rf90-open__g { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 10px; padding-bottom: 2px; scrollbar-width: none; } #rf90 .rf90-open__years::-webkit-scrollbar { display: none; } #rf90 .rf90-open__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; } #rf90 .rf90-open__list li { border-radius: 14px; background: var(--rf-surface2); overflow: hidden; } #rf90 .rf90-open__list li.is-me { box-shadow: inset 0 0 0 2px var(--rf-accent); } #rf90 .rf90-open__row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 10px; width: 100%; padding: 12px 14px; border: 0; background: transparent; color: var(--rf-text); text-align: left; font-family: inherit; text-transform: none; letter-spacing: 0; font-style: normal; box-shadow: none; cursor: pointer; min-height: 0; } #rf90 .rf90-open__rk { grid-row: span 2; align-self: center; font-weight: 800; font-size: 16px; color: var(--rf-muted); } #rf90 .rf90-open__list li:nth-child(1) .rf90-open__rk { color: #E9C46A; } #rf90 .rf90-open__list li:nth-child(2) .rf90-open__rk { color: #d4d4d4; } #rf90 .rf90-open__list li:nth-child(3) .rf90-open__rk { color: #C98B5A; } #rf90 .rf90-open__nm { font-weight: 700; font-size: 15px; } #rf90 .rf90-open__nm .rf90-you { font-style: normal; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 999px; background: var(--rf-accent); color: #0D0D0D; margin-left: 4px; vertical-align: middle; } #rf90 .rf90-open__sc { display: flex; flex-wrap: wrap; gap: 4px 10px; } #rf90 .rf90-open__sc em { font-style: normal; font-size: 12px; color: var(--rf-muted); } #rf90 .rf90-open__sc em.is-s:after { content: " S"; font-weight: 800; color: var(--rf-text); } #rf90 .rf90-open__more { margin: 0; padding: 0 14px 12px 52px; } #rf90 .rf90-open__ws { margin-top: 10px; } #rf90 .rf90-open__cta { margin-top: 14px; } #rf90 .rf90-open__cta .rf90-btn { margin-top: 6px; } /* v2.11 all clubs board, claps, confetti */ #rf90 .rf90-lbx__clubs { display: flex; gap: 6px; margin: 0 0 10px; overflow-x: auto; scrollbar-width: none; } #rf90 .rf90-lbx__clubs::-webkit-scrollbar { display: none; } #rf90 .rf90-lbx__clubs button { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; margin: 0; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: transparent; color: var(--rf-text); font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 800; font-style: normal; text-transform: none; letter-spacing: 0; box-shadow: none; cursor: pointer; } #rf90 .rf90-lbx__clubs button b { font-weight: 700; color: var(--rf-muted); } #rf90 .rf90-lbx__clubs button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #FFFFFF; } #rf90 .rf90-lbx__clubs .rf90-lbx__club--heart::before { background: #9669E1; } #rf90 .rf90-lbx__clubs .rf90-lbx__club--hybrid::before { background: #FEFA00; } #rf90 .rf90-lbx__clubs .rf90-lbx__club--spirit::before { background: #30D5C8; } #rf90 .rf90-lbx__clubs button.is-on { background: #FFFFFF; border-color: #FFFFFF; color: #0D0D0D; } #rf90 .rf90-lbx__clubs button.is-on b { color: #0D0D0D; } #rf90 .rf90-ctag { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--rf-muted); } #rf90 .rf90-lbx__nm i .rf90-sc + .rf90-ctag { margin-left: 10px; } #rf90 .rf90-lbx__clubs button[data-lbc="all"]::before { display: none; } #rf90 .rf90-ctag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #FFFFFF; } #rf90 .rf90-ctag--heart::before { background: #9669E1; } #rf90 .rf90-ctag--hybrid::before { background: #FEFA00; } #rf90 .rf90-ctag--spirit::before { background: #30D5C8; } #rf90 .rf90-lbx__nm > span { overflow: hidden; text-overflow: ellipsis; } #rf90 .rf90-clap { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 40px; min-height: 32px; margin: 0; padding: 0 9px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: transparent; color: var(--rf-muted); font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 800; font-style: normal; text-transform: none; letter-spacing: 0; line-height: 1; box-shadow: none; cursor: pointer; transition: transform .15s ease, background .15s ease, color .15s ease; -webkit-tap-highlight-color: transparent; } #rf90 .rf90-clap svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } #rf90 .rf90-clap span:empty { display: none; } #rf90 .rf90-clap:active { transform: scale(.9); } #rf90 .rf90-clap.is-on { background: var(--rf-accent); border-color: var(--rf-accent); color: var(--rf-accent-ink); animation: rf90-pop .32s ease; } #rf90 .rf90-clap.is-mine { cursor: default; border-color: transparent; color: var(--rf-accent); } #rf90 .rf90-lbx__p .rf90-clap { margin-top: 4px; min-height: 28px; } @keyframes rf90-pop { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } } #rf90 .rf90-burst { position: fixed; z-index: 100000; width: 0; height: 0; pointer-events: none; } #rf90 .rf90-burst i { position: absolute; left: -4px; top: -3px; width: 8px; height: 6px; border-radius: 2px; opacity: 0; animation: rf90-confetti 1.1s cubic-bezier(.2, .7, .3, 1) forwards; } @keyframes rf90-confetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 60px)) rotate(var(--r)); } } #rf90 .rf90-claps__head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } #rf90 .rf90-claps__ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--rf-accent); color: var(--rf-accent-ink); } #rf90 .rf90-claps__ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } #rf90 .rf90-claps__head .rf90-h2 { margin: 0; } #rf90 .rf90-claps__list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; } #rf90 .rf90-claps__list li { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); font-size: 14px; line-height: 1.4; color: var(--rf-muted); } #rf90 .rf90-claps__list li strong { color: var(--rf-text); } #rf90 .rf90-claps__list li.is-new { box-shadow: inset 3px 0 0 var(--rf-accent); background: var(--rf-glow-b); } @media (prefers-reduced-motion: reduce) { #rf90 .rf90-clap.is-on { animation: none; } } /* v2.12 phone alerts */ #rf90 .rf90-pushc__head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; } #rf90 .rf90-pushc__head .rf90-h2 { margin: 0; } #rf90 .rf90-pushc__ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--rf-accent); } #rf90 .rf90-pushc__ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } #rf90 .rf90-pushc__btns { display: flex; align-items: center; gap: 16px; margin-top: 14px; } #rf90 .rf90-pushc__err { color: #FF8A80; margin-top: 8px; } #rf90 .rf90-pushrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; } #rf90 .rf90-pushrow .rf90-h2 { margin: 0 0 4px; } #rf90 .rf90-pushrow .rf90-muted { margin: 0; font-size: 14px; } #rf90 .rf90-pushrow .rf90-btn { flex: none; } /* v2.13 bring a buddy */ #rf90 .rf90-buddy__head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; } #rf90 .rf90-buddy__head .rf90-h2 { margin: 0; } #rf90 .rf90-buddy__ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--rf-accent); color: var(--rf-accent-ink); } #rf90 .rf90-buddy__ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } #rf90 .rf90-buddy.is-soon { box-shadow: inset 0 0 0 1px var(--rf-accent); background-image: linear-gradient(160deg, var(--rf-glow-a), transparent 60%); } #rf90 .rf90-buddy__clubs { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 8px; } #rf90 .rf90-buddy__club { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); } #rf90 .rf90-buddy__club.is-mine { background: rgba(255, 255, 255, .08); } #rf90 .rf90-buddy__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #FFFFFF; } #rf90 .rf90-buddy__club--heart .rf90-buddy__dot { background: #9669E1; } #rf90 .rf90-buddy__club--hybrid .rf90-buddy__dot { background: #FEFA00; } #rf90 .rf90-buddy__club--spirit .rf90-buddy__dot { background: #30D5C8; } #rf90 .rf90-buddy__nm { flex: 1; min-width: 0; display: flex; flex-direction: column; } #rf90 .rf90-buddy__nm strong { font-size: 15px; color: var(--rf-text); } #rf90 .rf90-buddy__nm em { font-style: normal; font-size: 12px; color: var(--rf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #rf90 .rf90-buddy__link { flex: none; display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); color: var(--rf-text); font-size: 13px; font-weight: 800; text-decoration: none; } #rf90 .rf90-buddy__send { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--rf-text); box-shadow: none; cursor: pointer; } #rf90 .rf90-buddy__send svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } #rf90 .rf90-buddy__next { margin: 12px 0 0; text-align: center; }