/* Recipes page: title (+ the Tips toggle, css/tips.css), the filter bar (search, station tabs, category chips), the recipe rows and the "what it does" card. Icons sit in dark Rust inventory slots in both themes: many of Rust's item icons are pale and vanish on parchment. The card lives on (it is position: fixed), so its tokens are on :root, not .page-recipes. */ :root { --slot: #3a3834; /* Rust inventory slot, as in the loot sim */ --slot-hi: #4b4843; --slot-ink: #cfc7b9; /* text badge when an icon can't load */ --slot-q: #f1ece2; /* stack count */ --fx-cal: #e39a45; /* card rows: calories, hydration, health (Rust HUD colours) */ --fx-water: #6fb0e6; --fx-hp: #9cc451; --fx-rad: #e2cf4f; --fx-buff: #f0b43c; --card-bg: rgba(24, 22, 19, .97); } :root[data-theme="light"] { --slot: #4a433a; --slot-hi: #5b5247; --slot-ink: #eee7da; --fx-cal: #8a4a05; --fx-water: #1d5b92; --fx-hp: #325a0e; --fx-rad: #6a5a00; --fx-buff: #7a4d00; --card-bg: rgba(250, 246, 238, .98); } .page-recipes { --hit: var(--warn); --cols: minmax(17rem, 25rem) minmax(0, 1fr) 6.5rem; /* Makes | Ingredients | Time (+ a tea's dropdown button) */ } /* ---------- hero ---------- */ .rc-hero { max-width: 62rem; margin: .75rem 0 1.25rem; } .rc-hero h1 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); text-transform: uppercase; letter-spacing: .03em; margin: 0; } /* ---------- filter bar ---------- */ .rc-tools { display: grid; gap: .85rem 1.5rem; margin-bottom: 1rem; } .rc-search { max-width: 30rem; } .rc-search .input { width: 100%; } .rc-filter { display: grid; gap: .35rem; min-width: 0; } .rc-filter-label { color: var(--muted); font-size: .78rem; } @media (min-width: 960px) { .rc-tools { grid-template-columns: minmax(16rem, 24rem) minmax(0, 1fr); align-items: end; } .rc-tools > .rc-filter:last-child { grid-column: 1 / -1; } } .rc-stations { margin-bottom: 0; } .rc-tab { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; } .rc-tab-short { display: none; } .rc-chips { display: flex; flex-wrap: wrap; gap: .4rem; } .rc-chip { appearance: none; display: inline-flex; align-items: center; gap: .45rem; min-height: 34px; padding: .3rem .75rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel-2); color: var(--text); cursor: pointer; font-family: var(--head-font); font-stretch: 87.5%; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; transition: background .12s, border-color .12s, color .12s; } .rc-chip:hover { background: var(--btn-hover); border-color: var(--muted); } .rc-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .rc-chip.is-zero:not([aria-pressed="true"]) { color: var(--dim); } /* ---------- column header (wide screens only) ---------- */ .rc-colhead { display: none; } @media (min-width: 960px) { .rc-colhead { display: grid; grid-template-columns: var(--cols); gap: 1rem; padding: .3rem calc(.75rem + 1px); color: var(--dim); font-size: .72rem; border-bottom: 1px solid var(--line); margin-bottom: .6rem; } } /* ---------- sections and groups ---------- */ .rc-list { display: grid; gap: 1.75rem; min-height: 8rem; align-content: start; } .rc-list:focus { outline: none; } .rc-loading { margin: 1rem 0; } .rc-section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .75rem; padding-bottom: .4rem; margin-bottom: .6rem; border-bottom: 2px solid var(--accent); } .rc-section-head h3 { margin: 0; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .05em; } .rc-section.is-also .rc-section-head { border-bottom-color: var(--line-strong); } .rc-group + .rc-group { margin-top: 1.1rem; } .rc-group-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .4rem; font-size: .85rem; color: var(--accent-2); } .rc-rows { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .rc-empty { margin: .5rem 0; } .rc-end { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.5rem 0 .5rem; } /* ---------- one recipe row ---------- Phones and tablets: the made item (slot + name + what it does) on the left, time on the right, ingredients below. Wide screens: one line per recipe in three columns that line up with the column header. */ .rc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "out time" "ings ings"; align-items: center; gap: .6rem .75rem; padding: .65rem .8rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .12s; } .rc-row:hover { border-color: var(--line-strong); } .rc-time { grid-area: time; justify-self: end; display: inline-flex; align-items: center; gap: .3rem; margin: 0; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .rc-svg { width: 1em; height: 1em; flex: none; } /* The made item is a button (hover, focus or tap opens its card), styled as plain content. */ .rc-out { grid-area: out; display: flex; align-items: center; gap: .85rem; min-width: 0; justify-self: start; max-width: 100%; margin: 0; padding: 0; border: 0; border-radius: var(--radius); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } .rc-out:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; } .rc-out-text { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; min-width: 0; } .rc-name-line { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; } .rc-name { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; } .rc-more { width: .95em; height: .95em; color: var(--dim); opacity: .75; transition: color .12s, opacity .12s; } .rc-out:hover .rc-more, .rc-out:focus-visible .rc-more, .rc-out[aria-expanded="true"] .rc-more { color: var(--accent-2); opacity: 1; } .rc-out:hover .rc-name, .rc-out[aria-expanded="true"] .rc-name { text-decoration: underline dotted color-mix(in srgb, currentColor 55%, transparent); text-underline-offset: 3px; } .rc-bp { flex: none; } /* What it does, visible without hovering: "Ore yield +20% · 30 min" */ .rc-fx-tag { --fx-c: var(--muted); display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: .14rem .55rem .14rem .42rem; border: 1px solid color-mix(in srgb, var(--fx-c) 38%, transparent); border-radius: .85em; background: color-mix(in srgb, var(--fx-c) 12%, transparent); color: var(--fx-c); font-size: .8rem; font-weight: 600; line-height: 1.3; } .rc-fx-tag.is-buff { --fx-c: var(--fx-buff); } .rc-fx-tag.is-use { --fx-c: var(--muted); background: var(--field); border-color: var(--line-strong); } .rc-fx-tag .rc-svg { width: .95em; height: .95em; } .rc-fx-tag-text { overflow-wrap: anywhere; } [data-kind="calories"] { --fx-c: var(--fx-cal); } [data-kind="hydration"] { --fx-c: var(--fx-water); } [data-kind="health"], [data-kind="heal_over_time"] { --fx-c: var(--fx-hp); } [data-kind="radiation"] { --fx-c: var(--fx-rad); } [data-kind="bleeding"], [data-kind="poison"] { --fx-c: var(--bad); } .rc-guess { display: inline-grid; place-items: center; width: 1.2em; height: 1.2em; margin-left: .15rem; border: 1px solid currentColor; border-radius: 50%; font-size: .7em; font-weight: 700; line-height: 1; opacity: .85; cursor: help; vertical-align: .1em; } /* search hits: a warm outline, not colour alone (an ingredient's slots get a ring) */ .rc-name.is-hit, .rc-ing.is-hit .rc-ing-name { padding: 0 .2em; margin: 0 -.2em; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; background: color-mix(in srgb, var(--hit) 22%, transparent); box-shadow: inset 0 -2px 0 var(--hit); } /* ---------- ingredients: one slot per stack, as they sit in the station ---------- Slots of one ingredient sit tight together like an inventory row; a wider gap between ingredients. No names: each slot's tooltip has it (the name only shows when the icons can't load). */ .rc-ings { grid-area: ings; display: flex; flex-wrap: wrap; align-items: center; gap: 6px .9rem; min-width: 0; margin: 0; padding: 0 0 0 calc(72px + .85rem); list-style: none; } .rc-ing { position: relative; display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; min-width: 0; } .rc-ing-slots { display: inline-flex; flex-wrap: wrap; gap: 4px; } .rc-ing-name { display: none; font-size: .88rem; line-height: 1.25; overflow-wrap: anywhere; } .rc-ing.is-noimg .rc-ing-name { display: inline; } .rc-ing.is-hit .rc-slot, .rc-slot.is-hit { outline: 2px solid var(--hit); outline-offset: 1px; } /* crops you can grow: a small leaf on the slot's corner (the title and screen reader text say it in words) */ .rc-leaf { position: absolute; top: -6px; left: -6px; z-index: 3; width: 17px; height: 17px; color: var(--good); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); pointer-events: none; } .rc-leaf-vein { stroke: rgba(0, 0, 0, .45); } /* ---------- Rust inventory slots ---------- A dark bevelled square (top highlight, bottom shade, inner shadow), a soft light behind the icon and a floor shadow under it, so the icon sits up off the slot. Hover or focus: the slot springs out (the loot sim's .slot pop) and the icon lifts, tilts and brightens while its floor shadow shrinks. */ .page-recipes, .rc-card { --pop-shadow: 0 10px 22px rgba(0, 0, 0, .65); } :root[data-theme="light"] .page-recipes, :root[data-theme="light"] .rc-card { --pop-shadow: 0 10px 20px rgba(40, 25, 10, .45); } .rc-slot { --s: 52px; position: relative; flex: none; display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: 2px; } /* The slot's face is its own layer, so the pop can scale it without scaling the icon: a CSS scale on the icon (or on anything around it) makes the browser stretch the small bitmap, which is what made the pops blurry. */ .rc-slot::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse 68% 55% at 50% 40%, rgba(255, 255, 255, .11), transparent 72%), linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .2)), var(--slot); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -2px 0 rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(0, 0, 0, .35), inset 0 0 14px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .25); transition: transform .18s cubic-bezier(.3, 1.7, .5, 1), box-shadow .18s, background-color .12s; } .rc-slot::after { /* floor shadow under the icon */ content: ""; position: absolute; left: 24%; right: 24%; bottom: 8%; height: 13%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(0, 0, 0, .5), transparent); transition: transform .22s, opacity .22s; } .rc-slot > .item-ic { position: relative; z-index: 1; width: 86%; height: 86%; max-width: none; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .6)) drop-shadow(0 0 1px rgba(0, 0, 0, .45)); transition: width .22s cubic-bezier(.3, 1.9, .5, 1), height .22s cubic-bezier(.3, 1.9, .5, 1), transform .22s, filter .22s; } .rc-slot.is-noimg > .item-ic { display: none; } .rc-slot.is-noimg::after { display: none; } .rc-q { /* like Rust's stack numbers: bigger and down in the bottom-right corner (same colour as before) */ position: absolute; right: 3px; bottom: 0; z-index: 2; pointer-events: none; transition: transform .18s cubic-bezier(.3, 1.7, .5, 1); font: 700 16px/1 var(--head-font); font-stretch: 87.5%; font-variant-numeric: tabular-nums; color: var(--slot-q); text-shadow: 0 1px 2px #000, 0 0 3px #000; } .rc-slot-out { --s: 72px; } .rc-slot-out .rc-q { right: 4px; bottom: 1px; font-size: 19px; } .rc-slot-ing { --s: 52px; } .rc-slot-card { --s: 60px; } .rc-slot-mini { --s: 30px; } .rc-slot-mini::after { display: none; } .rc-slot-mini > .item-ic { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); } /* fallback when an icon won't load: the item's initials, and CSS shows its name (see .is-noimg on phones) */ .rc-badge { position: relative; z-index: 1; display: grid; place-items: center; width: 86%; height: 86%; border: 1px dashed rgba(255, 255, 255, .25); border-radius: 2px; color: var(--slot-ink); font-family: var(--head-font); font-stretch: 87.5%; font-weight: 700; font-size: .72rem; line-height: 1; letter-spacing: .04em; } .rc-slot-out .rc-badge, .rc-slot-card .rc-badge { font-size: 1rem; } .rc-slot-mini .rc-badge { font-size: .56rem; } /* the pop: the slot's face springs out (the loot sim's .slot pop) and the icon GROWS (real width/height, so it is drawn sharp at the bigger size), lifts and tilts a little; the stack number rides out with the corner. */ .rc-out:hover .rc-slot, .rc-out:focus-visible .rc-slot, .rc-out[aria-expanded="true"] .rc-slot, .rc-ing .rc-slot:hover { z-index: 4; } .rc-out:hover .rc-slot::before, .rc-out:focus-visible .rc-slot::before, .rc-out[aria-expanded="true"] .rc-slot::before, .rc-ing .rc-slot:hover::before { transform: scale(1.14); background-color: var(--slot-hi); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 0 14px rgba(0, 0, 0, .25), var(--pop-shadow); } .rc-ing .rc-slot:hover::before { transform: scale(1.16); } .rc-out:hover .rc-slot > .item-ic, .rc-out:focus-visible .rc-slot > .item-ic, .rc-out[aria-expanded="true"] .rc-slot > .item-ic, .rc-ing .rc-slot:hover > .item-ic { width: 112%; height: 112%; transform: translateY(-4px) rotate(-3deg); filter: drop-shadow(0 9px 7px rgba(0, 0, 0, .6)) brightness(1.12); } .rc-out:hover .rc-slot > .rc-q, .rc-out:focus-visible .rc-slot > .rc-q, .rc-out[aria-expanded="true"] .rc-slot > .rc-q, .rc-ing .rc-slot:hover > .rc-q { transform: translate(7%, 7%); } .rc-out:hover .rc-slot::after, .rc-out:focus-visible .rc-slot::after, .rc-out[aria-expanded="true"] .rc-slot::after, .rc-ing .rc-slot:hover::after { transform: scale(.72); opacity: .55; } /* Less motion (OS setting or the site's switch): no springing, scaling or tilting; the light and shadow still change. */ @media (prefers-reduced-motion: reduce) { .rc-slot::before, .rc-slot > .item-ic, .rc-slot::after, .rc-slot > .rc-q { transform: none !important; } .rc-slot > .item-ic { width: 86% !important; height: 86% !important; } } :root[data-motion="reduce"] .rc-slot::before, :root[data-motion="reduce"] .rc-slot > .item-ic, :root[data-motion="reduce"] .rc-slot::after, :root[data-motion="reduce"] .rc-slot > .rc-q { transform: none !important; } :root[data-motion="reduce"] .rc-slot > .item-ic { width: 86% !important; height: 86% !important; } /* ---------- phones: slots + counts only, names in the tooltip and for screen readers ---------- */ @media (max-width: 599px) { .rc-row { padding: .6rem .6rem; column-gap: .5rem; } .rc-out { gap: .65rem; } .rc-slot-out { --s: 56px; } .rc-slot-out .rc-q { font-size: 16px; right: 3px; bottom: 0; } .rc-slot-ing { --s: 44px; } .rc-slot-ing .rc-q { font-size: 14px; right: 2px; bottom: 0; } .rc-ings { padding-left: 0; gap: 4px .7rem; } .rc-ing-slots { gap: 3px; } .rc-name { font-size: 1rem; } .rc-fx-tag { font-size: .76rem; } .rc-stations { flex-wrap: nowrap; } .rc-tab { flex: 1 1 auto; padding-inline: .5rem; } .rc-tab-short { display: inline; } .rc-tab-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* ---------- wide screens: three columns ---------- */ @media (min-width: 960px) { .rc-row { grid-template-columns: var(--cols); grid-template-areas: "out ings time"; gap: .5rem 1.25rem; } .rc-ings { padding-left: 0; } .rc-time { justify-self: start; } } /* ---------- tea families: one row per tea, headed by its Pure tea ---------- A small chevron button right of the head row's time opens the chain underneath (so does a click on the row's empty background), indented like Rust's crafting tree, with an elbow line from each tier to the one it is made into. */ .rc-fams { gap: 6px; } .rc-fam { display: grid; gap: 4px; min-width: 0; } .rc-fam-head { cursor: pointer; } .rc-fam-head .rc-ings { cursor: default; } .rc-fam.is-open > .rc-fam-head { border-color: var(--line-strong); } .rc-side { grid-area: time; justify-self: end; display: flex; align-items: center; gap: .5rem; min-width: 0; } .rc-side > .rc-time { grid-area: auto; } .rc-fam-toggle { display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin: -2px -4px -2px 0; padding: 0; border: 1px solid transparent; border-radius: var(--radius); background: none; color: var(--dim); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .12s, color .12s, border-color .12s; } .rc-fam-head:hover .rc-fam-toggle { color: var(--muted); border-color: var(--line); } .rc-fam-toggle:hover { background: var(--btn); color: var(--text) !important; border-color: var(--line-strong) !important; } .rc-fam-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } .rc-fam-toggle[aria-expanded="true"] { color: var(--accent-2); } .rc-chev { width: 1rem; height: 1rem; transition: transform .18s ease; } .rc-fam-toggle[aria-expanded="true"] .rc-chev { transform: rotate(180deg); } /* the chain */ .rc-chain { min-width: 0; } .rc-chain:not([hidden]) { animation: rc-chain-in .2s ease-out; } @keyframes rc-chain-in { from { opacity: 0; transform: translateY(-6px); } } .rc-tiers { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .rc-tier { --step: 1.75rem; --indent: calc(var(--lvl, 1) * var(--step)); --elbow-y: calc(.65rem + 36px); /* ~ the slot's middle */ position: relative; min-width: 0; margin-left: var(--indent); background: color-mix(in srgb, var(--panel-2) 60%, transparent); } /* the elbow: down from the row above, then across into this one */ .rc-tier::before { content: ""; position: absolute; pointer-events: none; left: calc(var(--step) * -.5 - 1px); top: -5px; width: calc(var(--step) * .5 - 2px); height: calc(var(--elbow-y) + 5px); border-left: 2px solid var(--tree, var(--line-strong)); border-bottom: 2px solid var(--tree, var(--line-strong)); border-bottom-left-radius: 6px; } .page-recipes { --tree: color-mix(in srgb, var(--accent-2) 45%, var(--line-strong)); } .rc-tier.is-match { border-color: var(--hit); box-shadow: inset 3px 0 0 var(--hit); } /* the sum line at the bottom of the chain: "Σ 1 [Pure] = 4 [Advanced] = 16 [Basic] = 32 [yellow] + 32 [blue]" */ @media (max-width: 599px) { .rc-tier { --step: 1rem; --elbow-y: calc(.6rem + 28px); } } @media (min-width: 960px) { .rc-side { justify-self: stretch; justify-content: space-between; } /* the first column shrinks by the indent, so a tier's ingredients and time line up with the rows above */ .rc-tier { --cols: minmax(calc(17rem - var(--indent)), calc(25rem - var(--indent))) minmax(0, 1fr) 6.5rem; } /* one line per row here, centred, so the elbow meets the middle of the row */ .rc-tier { --elbow-y: 50%; } } @media (prefers-reduced-motion: reduce) { .rc-chain:not([hidden]) { animation: none; } .rc-chev { transition: none; } } :root[data-motion="reduce"] .rc-chain:not([hidden]) { animation: none; } :root[data-motion="reduce"] .rc-chev { transition: none; } /* ---------- the "what it does" card (on , placed by page-recipes.js inside the viewport) ---------- */ .rc-card { position: fixed; left: 0; top: 0; z-index: 60; display: grid; gap: .55rem; width: min(25rem, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow: auto; overscroll-behavior: contain; padding: .8rem .9rem .75rem; border: 1px solid var(--line-strong); border-top: 2px solid var(--accent); border-radius: var(--radius); background: var(--card-bg); color: var(--text); box-shadow: var(--shadow-lg); font-size: .88rem; line-height: 1.4; text-align: left; transform-origin: 24px top; animation: rc-card-in .17s cubic-bezier(.2, 1.35, .45, 1); } .rc-card[data-side="above"] { transform-origin: 24px bottom; } .rc-card[data-side="right"] { transform-origin: left 24px; } .rc-card[data-side="left"] { transform-origin: right 24px; } @keyframes rc-card-in { from { opacity: 0; transform: scale(.94); } } .rc-card p { margin: 0; } .rc-card-head { display: flex; align-items: center; gap: .8rem; } .rc-card-title { display: grid; gap: .1rem; min-width: 0; } .rc-card-name { font-size: 1.12rem; line-height: 1.15; letter-spacing: .04em; overflow-wrap: anywhere; } .rc-card-makes { color: var(--accent-2); } .rc-card-desc { padding-left: .6rem; border-left: 2px solid var(--line-strong); color: var(--muted); text-wrap: pretty; } .rc-card-h { display: flex; flex-wrap: wrap; align-items: baseline; margin-top: .15rem !important; font-size: .72rem; color: var(--accent-2); letter-spacing: .08em; } .rc-fx, .rc-buffs { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; } /* calories / hydration / health rows: icon, label, a bar (share of the full stat) and the amount */ :where(.rc-fx-row) { --fx-c: var(--muted); } .rc-fx-row { display: grid; grid-template-columns: 1.05rem minmax(0, 1fr) 4.25rem 3.1rem; align-items: center; gap: .5rem; } .rc-fx-ic { width: 1rem; height: 1rem; color: var(--fx-c); } .rc-fx-note { color: var(--dim); font-size: .78rem; } .rc-fx-bar { height: 7px; overflow: hidden; border-radius: 4px; background: color-mix(in srgb, var(--fx-c) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fx-c) 32%, transparent); } .rc-fx-bar.is-none { visibility: hidden; } .rc-fx-fill { display: block; width: var(--w, 0%); height: 100%; border-radius: inherit; background: linear-gradient(180deg, color-mix(in srgb, var(--fx-c) 70%, #fff), var(--fx-c)); } .rc-fx-val { text-align: right; font: 700 .98rem/1 var(--head-font); font-stretch: 87.5%; font-variant-numeric: tabular-nums; color: var(--fx-c); } .rc-fx-row.is-bad .rc-fx-val { color: var(--bad); } /* buffs: highlighted, value and duration on the right */ .rc-buff { display: grid; grid-template-columns: 1.05rem minmax(0, 1fr) auto auto; align-items: center; gap: .5rem; padding: .38rem .55rem; border-radius: var(--radius); background: color-mix(in srgb, var(--fx-buff) 11%, transparent); border: 1px solid color-mix(in srgb, var(--fx-buff) 32%, transparent); } .rc-buff .rc-fx-ic { color: var(--fx-buff); } .rc-buff-label { font-weight: 600; overflow-wrap: anywhere; } .rc-buff-val { font: 700 1.02rem/1 var(--head-font); font-stretch: 87.5%; color: var(--fx-buff); white-space: nowrap; } .rc-buff-time { display: inline-flex; align-items: center; gap: .25rem; color: var(--muted); font-size: .8rem; white-space: nowrap; } /* the headline buff right under the item's name (e.g. Ore yield +50% · 30 min) */ .rc-buffs-top .rc-buff { padding: .5rem .65rem; } .rc-buffs-top .rc-buff-val { font-size: 1.15rem; } .rc-card-use { display: flex; align-items: center; gap: .5rem; padding: .38rem .55rem; border-radius: var(--radius); background: var(--field); border: 1px solid var(--line); } .rc-card-use .rc-fx-ic { color: var(--muted); } .rc-card-use-k { color: var(--muted); } @media (max-width: 380px) { .rc-card { padding: .7rem .7rem .65rem; } .rc-fx-row { grid-template-columns: 1.05rem minmax(0, 1fr) 3rem 2.9rem; gap: .4rem; } .rc-buff { grid-template-columns: 1.05rem minmax(0, 1fr) auto; } .rc-buff-time { grid-column: 2 / -1; } } @media (forced-colors: active) { .rc-chip[aria-pressed="true"] { outline: 2px solid Highlight; } .rc-ing.is-hit .rc-slot, .rc-name.is-hit { outline: 2px solid Highlight; } .rc-slot { border: 1px solid CanvasText; } .rc-card { border: 2px solid CanvasText; } .rc-buff, .rc-fx-tag { border: 1px solid CanvasText; } .rc-fx-fill { background: CanvasText; } .rc-fam-toggle { border: 1px solid ButtonText; } .rc-tier::before { border-color: CanvasText; } .rc-tier.is-match { outline: 2px solid Highlight; } } @media print { .rc-tools, .rc-end, .rc-colhead, .rc-card, .rc-more, .rc-fam-toggle { display: none !important; } .rc-chain[hidden] { display: block !important; } /* a printed list shows every tier */ .rc-row { break-inside: avoid; } .rc-slot { background: #444; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .rc-slot::after { display: none; } }