, not a descendant, and custom properties only inherit downwards. */ --rc-z-base: 1; --rc-z-sticky: 30; /* Transparent: the page backdrop lives on body.rc-page below. */ background: transparent; color: var(--rc-ink); font-family: "El Messiri", system-ui, -apple-system, "Segoe UI", "Tahoma", sans-serif; font-weight: 400; line-height: 1.65; direction: rtl; padding-bottom: 3rem; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Undo two hostile legacy globals from RiverCool.css inside this page: `* { user-select: none }` (numbers here are meant to be copied) and `body,html { text-transform: capitalize !important }`. */ text-transform: none; } .rc-power *, .rc-power *::before, .rc-power *::after { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } /* ---------- Page backdrop ---------- Cool base tint + a very subtle radial wash, not flashy. This lives on , not on

: with it on

the nav band above the content stayed plain white and the tint began at a hard horizontal line partway down the page. A background with no background on propagates to the canvas, so it covers the whole viewport — nav band, content and footer on one surface, with the fixed attachment keeping the wash still while the page scrolls. `body` in RiverCool.css sets background-image/repeat/position/size, so every one of those longhands is restated here rather than left to inherit that rule's values. A class outranks its bare `body` selector, so none of it needs !important. Kept byte-identical to the same block in CSS/prices-scoped.css so the two pages read as one surface. */ body.rc-page { /* Declared here rather than in the .rc-power token block: custom properties inherit downwards only, and both of these are consumed by elements outside

— the backdrop is the body's own, and the nav search is a sibling of

. */ --rc-bg: #f5f9fe; --rc-z-nav: 60; background-color: var(--rc-bg); background-image: radial-gradient( 1100px 600px at 100% -10%, rgba(67, 146, 241, 0.08), transparent 60% ), radial-gradient( 900px 500px at -10% 30%, rgba(11, 61, 140, 0.05), transparent 60% ); background-repeat: no-repeat; background-position: 0 0; background-size: auto; background-attachment: fixed; } /* ---------- Nav search dropdown stacking ---------- #AllSearchDiv holds the quick-search field and its .suggesstion-box. RiverCool.css gives that box z-index: 9999, but below 1301px the number never got a chance to mean anything: 1. the 1300px query in RiverCool.css switches #AllSearchDiv to position: static, which makes its own z-index: 9 inert; 2. it still carries a transform from data-animation="slideInDown", and a transform creates a stacking context whatever the position — so the box's 9999 is trapped inside a context that itself sits at the z-index: 0 level; 3. .rc-board is positioned (and isolated, and left transformed by rc-rise's fill-mode: both), so it lands on that same level and wins on document order, being later in the DOM. Net effect: the suggestions painted behind the hero. Giving the search a position below 1301px makes its z-index apply again and lifts the whole subtree above page content. Above 1301px it is already position: fixed, so only the z-index is restated. Deliberately below .ChooseDiv (92) and the call/chat overlays. */ body.rc-page #AllSearchDiv { z-index: var(--rc-z-nav); } @media (max-width: 1300px) { body.rc-page #AllSearchDiv { /* No offsets, so this changes stacking and nothing else. It also pins the containing block for the absolutely positioned .suggesstion-box explicitly — a job the transform was doing by accident. */ position: relative; } } /* Legacy uppercases every placeholder site-wide. Not here. */ .rc-power input::placeholder { text-transform: none; } .rc-power input::-webkit-input-placeholder { text-transform: none; } .rc-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(12px, 3vw, 28px); /* The site chrome (#FrontLogo / #AllSearchDiv) is only position:fixed above 1300px — RiverCool.css drops it back to `static` below that. Reserving 8rem everywhere therefore leaves 128px of dead space at the top of every phone and tablet. Reserve it only where it is needed. */ padding-top: var(--rc-s5); } @media (min-width: 1301px) { .rc-wrap { padding-top: 8rem; } } /* ---------- Breadcrumb ---------- */ .rc-crumbs { font-size: 13px; color: var(--rc-muted); padding: clamp(12px, 2vw, 20px) 0 var(--rc-s2); display: flex; align-items: center; gap: var(--rc-s2); flex-wrap: wrap; } .rc-power .rc-crumbs a { display: inline-flex; align-items: center; /* keeps the tap target at 24px+ without changing the visual line */ min-height: 24px; padding: 2px 0; color: var(--rc-ink-2); text-decoration: none; transition: color var(--rc-d1) var(--rc-ease); } .rc-power .rc-crumbs a:hover { color: var(--rc-brand); } .rc-crumbs .sep { color: var(--rc-border-2); font-size: 11px; } /* ============================================================ The board — heading + calculator + result, one dark surface. The calculator IS the page, so it sits in the hero rather than in the fifth card down the stack. ============================================================ */ .rc-board { position: relative; margin: var(--rc-s3) 0 var(--rc-s6); padding: clamp(26px, 4vw, 48px) clamp(20px, 3.5vw, 48px); border-radius: var(--rc-r4); color: var(--rc-on-dark); background: radial-gradient( 900px 400px at 90% 10%, rgba(109, 180, 255, 0.22), transparent 60% ), radial-gradient( 700px 300px at 10% 100%, rgba(67, 146, 241, 0.18), transparent 65% ), linear-gradient(160deg, #0b3d8c 0%, #082c66 55%, #04183b 100%); box-shadow: var(--rc-sh3); overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; } /* Faint plotting grid — reads as "measuring surface" */ .rc-board::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient( 1100px 520px at 50% 25%, #000 30%, transparent 78% ); -webkit-mask-image: radial-gradient( 1100px 520px at 50% 25%, #000 30%, transparent 78% ); pointer-events: none; z-index: 0; } .rc-board > * { position: relative; z-index: var(--rc-z-base); } .rc-board-head { grid-column: 1 / -1; min-width: 0; } .rc-eyebrow { display: inline-flex; align-items: center; gap: var(--rc-s2); padding: 6px 14px; border-radius: var(--rc-pill); background: rgba(255, 255, 255, 0.08); border: 1px solid var(--rc-line-dark); font-size: 13px; color: rgba(255, 255, 255, 0.92); margin-bottom: var(--rc-s4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .rc-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.18); animation: rc-pulse 2.4s var(--rc-ease) infinite; } @keyframes rc-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); } 50% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); } } .rc-power .rc-board h1 { margin: 0 0 var(--rc-s4); font-size: clamp(27px, 4.2vw, 46px); line-height: 1.18; font-weight: 700; letter-spacing: -0.005em; color: var(--rc-on-dark); text-wrap: balance; max-width: 22ch; } .rc-board h1 .accent { color: var(--rc-brand-glow); } .rc-answer { margin: 0; font-size: clamp(15px, 1.6vw, 16px); line-height: 1.85; color: rgba(255, 255, 255, 0.88); max-width: 68ch; text-wrap: pretty; } .rc-answer b { color: var(--rc-on-dark); font-weight: 600; } /* ---------- Calculator form ---------- */ .rc-calc { background: var(--rc-panel); border: 1px solid var(--rc-line-dark); border-radius: var(--rc-r3); padding: clamp(18px, 2.4vw, 26px); min-width: 0; } .rc-calc-title { margin: 0 0 var(--rc-s4); font-size: 16px; font-weight: 600; color: var(--rc-on-dark); display: flex; align-items: center; gap: var(--rc-s2); } .rc-calc-title svg { width: 18px; height: 18px; flex: 0 0 18px; stroke: var(--rc-brand-glow); stroke-width: 2; fill: none; } .rc-field { margin-bottom: var(--rc-s4); } .rc-field:last-child { margin-bottom: 0; } .rc-field > .lbl, .rc-seg-label { display: block; font-size: 13px; font-weight: 600; color: var(--rc-on-dark-2); margin-bottom: var(--rc-s2); line-height: 1.4; } .rc-field .hint { display: block; font-size: 11.5px; font-weight: 400; color: var(--rc-on-dark-3); margin-top: 5px; line-height: 1.5; } /* Dimensions row: [length] × [width] = area */ .rc-dims { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--rc-s2); } .rc-dims .times { font-family: "Kanit", sans-serif; font-size: 18px; color: var(--rc-on-dark-3); padding-top: 18px; user-select: none; } .rc-input-wrap { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .rc-input-wrap .sub { font-size: 11.5px; color: var(--rc-on-dark-3); line-height: 1; } .rc-power .rc-calc input[type="number"] { width: 100%; min-width: 0; appearance: textfield; -moz-appearance: textfield; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--rc-r2); padding: 11px 14px; color: var(--rc-on-dark); font-family: "Kanit", "El Messiri", sans-serif; font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.3; text-align: center; direction: ltr; box-shadow: none; transition: border-color var(--rc-d1) var(--rc-ease), background var(--rc-d1) var(--rc-ease), box-shadow var(--rc-d1) var(--rc-ease); } .rc-power .rc-calc input[type="number"]::-webkit-outer-spin-button, .rc-power .rc-calc input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .rc-power .rc-calc input[type="number"]::placeholder { color: var(--rc-on-dark-3); opacity: 1; } .rc-power .rc-calc input[type="number"]:hover { border-color: rgba(255, 255, 255, 0.34); } .rc-power .rc-calc input[type="number"]:focus, .rc-power .rc-calc input[type="number"]:focus-visible { outline: none; border-color: var(--rc-brand-glow); background: rgba(109, 180, 255, 0.12); box-shadow: 0 0 0 3px rgba(109, 180, 255, 0.28); } .rc-power .rc-calc input[type="number"][aria-invalid="true"] { border-color: #ff8a8a; background: rgba(239, 68, 68, 0.14); } /* Inline validation message */ .rc-error { display: none; margin-top: var(--rc-s2); align-items: center; gap: 6px; font-size: 12.5px; line-height: 1.5; color: #ffc9c9; } .rc-error.is-shown { display: flex; } .rc-error svg { width: 14px; height: 14px; flex: 0 0 14px; stroke: currentColor; stroke-width: 2; fill: none; } /* ---------- Segmented control (native radios, restyled) ---------- */ .rc-seg { display: flex; gap: 4px; padding: 4px; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--rc-pill); } .rc-seg input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .rc-seg label { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 9px 10px; min-height: 40px; border-radius: var(--rc-pill); font-size: 13px; font-weight: 500; line-height: 1.25; color: var(--rc-on-dark-2); cursor: pointer; transition: background var(--rc-d1) var(--rc-ease), color var(--rc-d1) var(--rc-ease), box-shadow var(--rc-d1) var(--rc-ease); } .rc-seg label:hover { background: rgba(255, 255, 255, 0.08); color: var(--rc-on-dark); } .rc-seg input:checked + label { background: var(--rc-brand); color: #041a34; font-weight: 700; box-shadow: 0 2px 10px rgba(67, 146, 241, 0.38); } .rc-seg input:focus-visible + label { outline: 2px solid var(--rc-brand-glow); outline-offset: 2px; } /* ---------- Presets — the worked examples, made usable ---------- */ .rc-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--rc-s2); } .rc-power .rc-presets button { width: auto; height: auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; min-height: 34px; border-radius: var(--rc-pill); border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.05); color: var(--rc-on-dark-2); font-family: "El Messiri", sans-serif; font-size: 12.5px; font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap; transition: background var(--rc-d1) var(--rc-ease), border-color var(--rc-d1) var(--rc-ease), color var(--rc-d1) var(--rc-ease), transform var(--rc-d1) var(--rc-ease); } .rc-power .rc-presets button:hover { background: rgba(109, 180, 255, 0.16); border-color: var(--rc-brand-glow); color: var(--rc-on-dark); transform: translateY(-1px); } .rc-power .rc-presets button:active { transform: translateY(0) scale(0.97); } .rc-presets button .m { font-family: "Kanit", sans-serif; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--rc-on-dark-3); direction: ltr; } .rc-power .rc-presets button:hover .m { color: var(--rc-brand-glow); } /* Secondary factors — same controls, quieter frame */ .rc-more { margin-top: var(--rc-s5); padding-top: var(--rc-s4); border-top: 1px solid rgba(255, 255, 255, 0.12); } .rc-more-title { font-size: 12px; font-weight: 600; color: var(--rc-on-dark-3); margin: 0 0 var(--rc-s3); } .rc-more .rc-field { margin-bottom: var(--rc-s3); } .rc-more .rc-seg label { font-size: 12.5px; padding: 8px 8px; min-height: 38px; } .rc-more .rc-field > .lbl { font-size: 12.5px; } .rc-people { display: flex; align-items: center; gap: var(--rc-s2); } .rc-power .rc-people input[type="number"] { max-width: 96px; font-size: 15px; padding: 9px 10px; } .rc-people .unit { font-size: 12.5px; color: var(--rc-on-dark-3); } /* Submit — overrides the legacy global `button { width:200px; height:60px }` */ .rc-power .rc-calc button.rc-submit { width: 100%; height: auto; margin-top: var(--rc-s5); display: inline-flex; align-items: center; justify-content: center; gap: var(--rc-s2); padding: 14px 22px; min-height: 48px; border: 0; border-radius: var(--rc-pill); background: var(--rc-on-dark); color: var(--rc-brand-2); font-family: "El Messiri", sans-serif; font-size: 15.5px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22); transition: transform var(--rc-d1) var(--rc-ease), box-shadow var(--rc-d1) var(--rc-ease), background var(--rc-d1) var(--rc-ease); } .rc-power .rc-calc button.rc-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); } .rc-power .rc-calc button.rc-submit:active { transform: translateY(0); } .rc-power .rc-calc button.rc-submit svg { width: 17px; height: 17px; flex: 0 0 17px; stroke: currentColor; stroke-width: 2.2; fill: none; } /* ============================================================ Result panel — room diagram, the number, the power ladder ============================================================ */ .rc-result { background: rgba(0, 0, 0, 0.26); border: 1px solid var(--rc-line-dark); border-radius: var(--rc-r3); padding: clamp(18px, 2.4vw, 26px); display: flex; flex-direction: column; gap: var(--rc-s4); min-width: 0; scroll-margin-top: 100px; /* The seven-rung ladder is squeezed by this panel, not by the viewport: it is just as narrow inside a two-column board at 760px as it is on a 360px phone. Making the panel a query container lets the ladder react to the space it actually has. */ container-type: inline-size; container-name: rc-result; } .rc-result:focus { outline: none; } .rc-result:focus-visible { outline: 2px solid var(--rc-brand-glow); outline-offset: 3px; } /* ---------- Room diagram (scales live with the inputs) ---------- */ .rc-detail-title { margin: var(--rc-s2) 0 calc(var(--rc-s2) * -1); padding-top: var(--rc-s4); border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 12px; font-weight: 600; color: var(--rc-on-dark-3); } .rc-room { display: block; width: 100%; max-width: 340px; height: auto; margin-inline: auto; border-radius: var(--rc-r2); background: rgba(255, 255, 255, 0.04); } .rc-room .room-fill { fill: rgba(109, 180, 255, 0.16); stroke: var(--rc-brand-glow); stroke-width: 2; transition: x var(--rc-d2) var(--rc-ease), y var(--rc-d2) var(--rc-ease), width var(--rc-d2) var(--rc-ease), height var(--rc-d2) var(--rc-ease); } .rc-room .room-hatch { fill: url(#rcHatch); transition: x var(--rc-d2) var(--rc-ease), y var(--rc-d2) var(--rc-ease), width var(--rc-d2) var(--rc-ease), height var(--rc-d2) var(--rc-ease); } .rc-room .dim { fill: var(--rc-on-dark-2); font-family: "Kanit", sans-serif; font-size: 12px; font-variant-numeric: tabular-nums; } .rc-room .area { fill: var(--rc-on-dark); font-family: "Kanit", sans-serif; font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; } .rc-room .area-unit { fill: var(--rc-on-dark-3); font-family: "Kanit", sans-serif; font-size: 12px; } .rc-room .tick { stroke: rgba(255, 255, 255, 0.3); stroke-width: 1; transition: all var(--rc-d2) var(--rc-ease); } /* ---------- The number ---------- */ /* First thing in the panel: the answer. Evidence follows it. */ .rc-verdict { text-align: center; padding: var(--rc-s2) 0 0; } .rc-verdict .cap { display: block; font-size: 12.5px; color: var(--rc-on-dark-3); margin-bottom: 4px; } .rc-verdict .hp { display: flex; align-items: baseline; justify-content: center; gap: 8px; line-height: 1; } .rc-verdict .hp b { font-family: "Kanit", sans-serif; font-weight: 900; font-size: clamp(44px, 7vw, 64px); color: var(--rc-on-dark); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .rc-verdict .hp .unit { font-family: "El Messiri", sans-serif; font-size: clamp(17px, 2.2vw, 22px); font-weight: 600; color: var(--rc-brand-glow); } .rc-verdict .btu { display: block; margin-top: 6px; font-family: "Kanit", sans-serif; font-size: 14px; color: var(--rc-on-dark-2); font-variant-numeric: tabular-nums; } /* the number swaps rather than tweens — a horsepower isn't a fraction */ .rc-verdict.is-changing .hp b { animation: rc-swap var(--rc-d2) var(--rc-ease); } @keyframes rc-swap { 0% { opacity: 0; transform: translateY(8px) scale(0.94); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* ---------- Working — the arithmetic, shown ---------- */ .rc-working { margin: 0; display: grid; gap: 2px; font-size: 13px; } .rc-working div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rc-s3); padding: 6px 0; color: var(--rc-on-dark-2); border-bottom: 1px dotted rgba(255, 255, 255, 0.12); } .rc-working div:last-child { border-bottom: 0; padding-top: 10px; margin-top: 2px; border-top: 1px solid rgba(255, 255, 255, 0.18); color: var(--rc-on-dark); font-weight: 600; } .rc-working .v { font-family: "Kanit", sans-serif; font-variant-numeric: tabular-nums; color: var(--rc-on-dark); white-space: nowrap; } .rc-working .v.add { color: #7ee2a0; } .rc-working .v.zero { color: var(--rc-on-dark-3); } /* ---------- Power ladder ---------- */ .rc-ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--rc-r2); padding: 5px; } .rc-ladder .rung { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px 7px; border-radius: var(--rc-r1); text-align: center; min-width: 0; /* Rungs you could still step up to. 10:1 on the ladder track. */ color: var(--rc-on-dark-2); transition: background var(--rc-d2) var(--rc-ease), color var(--rc-d2) var(--rc-ease), transform var(--rc-d2) var(--rc-ease); } .rc-ladder .rung img { width: 24px; height: 24px; object-fit: contain; opacity: 0.45; filter: invert(0) contrast(2); transition: opacity var(--rc-d2) var(--rc-ease), transform var(--rc-d2) var(--rc-ease); mix-blend-mode: lighten; border-radius: 50%; display: none; } .rc-ladder .rung b { font-family: "Kanit", sans-serif; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; } .rc-ladder .rung small { font-family: "Kanit", sans-serif; font-size: 9.5px; line-height: 1; font-variant-numeric: tabular-nums; opacity: 0.8; } .rc-ladder .rung.is-active { background: var(--rc-brand); color: #041a34; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(67, 146, 241, 0.4); } .rc-ladder .rung.is-active b { font-size: 15px; } .rc-ladder .rung.is-active img { opacity: 1; filter: none; transform: scale(1.08); } /* Rungs you've already passed. Dimmer than the rest, but these are real numbers a reader may need, so they stay above 4.5:1 (6.3:1). */ .rc-ladder .rung.is-below { color: var(--rc-on-dark-3); } .rc-ladder .rung.is-below img { opacity: 0.28; } /* A narrow result panel tightens the rung rather than dropping the BTU figure. "60K" sets at ~17px, which still clears a 26px rung — hiding it below 420px threw away the number most buyers actually shop by, and it hid nothing on a tablet where the panel is every bit as narrow. */ @container rc-result (max-width: 350px) { .rc-ladder { gap: 2px; padding: 4px; } .rc-ladder .rung { gap: 2px; padding: 7px 1px 6px; } .rc-ladder .rung img { width: 18px; height: 18px; } .rc-ladder .rung b { font-size: 12px; } .rc-ladder .rung.is-active b { font-size: 13.5px; } .rc-ladder .rung small { font-size: 9px; } } /* Viewport fallback for engines without container queries. Same numbers, just a coarser trigger. */ @supports not (container-type: inline-size) { @media (max-width: 420px) { .rc-ladder { gap: 2px; padding: 4px; } .rc-ladder .rung { gap: 2px; padding: 7px 1px 6px; } .rc-ladder .rung img { width: 18px; height: 18px; } .rc-ladder .rung b { font-size: 12px; } .rc-ladder .rung.is-active b { font-size: 13.5px; } .rc-ladder .rung small { font-size: 9px; } } } /* ---------- Result actions ---------- */ .rc-verdict-actions { display: flex; flex-direction: column; gap: var(--rc-s2); } .rc-power .rc-verdict-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; min-height: 48px; border-radius: var(--rc-pill); font-weight: 700; font-size: 14.5px; text-decoration: none; line-height: 1.3; text-align: center; transition: transform var(--rc-d1) var(--rc-ease), box-shadow var(--rc-d1) var(--rc-ease), background var(--rc-d1) var(--rc-ease); } .rc-power .rc-verdict-actions .go-prices { background: var(--rc-brand); color: #041a34; box-shadow: 0 6px 18px rgba(67, 146, 241, 0.34); } .rc-power .rc-verdict-actions .go-prices:hover { background: var(--rc-brand-glow); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(67, 146, 241, 0.46); } .rc-power .rc-verdict-actions .go-prices .from { font-family: "Kanit", sans-serif; font-weight: 500; font-size: 12.5px; font-variant-numeric: tabular-nums; opacity: 0.82; } .rc-power .rc-verdict-actions .go-wa { background: transparent; border: 1px solid rgba(255, 255, 255, 0.28); color: var(--rc-on-dark); } .rc-power .rc-verdict-actions .go-wa:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); } .rc-verdict-actions svg { width: 16px; height: 16px; flex: 0 0 16px; } /* Advisory line under the verdict (oversized room, no stock, etc.) */ .rc-flag { display: none; align-items: flex-start; gap: var(--rc-s2); padding: 11px 13px; border-radius: var(--rc-r2); background: rgba(245, 158, 11, 0.14); border: 1px solid rgba(245, 158, 11, 0.34); font-size: 12.5px; line-height: 1.6; color: #ffe0a8; } .rc-flag.is-shown { display: flex; } .rc-flag svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 3px; stroke: currentColor; stroke-width: 2; fill: none; } .rc-noscript { margin-top: var(--rc-s3); padding: 12px 14px; border-radius: var(--rc-r2); background: rgba(255, 255, 255, 0.1); font-size: 13px; line-height: 1.6; color: var(--rc-on-dark-2); } .rc-power .rc-noscript a { color: var(--rc-brand-glow); text-decoration: underline; } /* The calculator and its result stay side by side down to the point where the form genuinely stops fitting (~295px per column). Collapsing at 900px left tablets with an 800px-wide form and the answer pushed below the fold, which is stretching the desktop layout rather than adapting it. */ @media (max-width: 720px) { .rc-board { grid-template-columns: minmax(0, 1fr); } } /* Tablet: two columns, but the form runs denser so nothing looks stranded. */ @media (min-width: 721px) and (max-width: 900px) { .rc-board { gap: 18px; } .rc-power .rc-presets button { padding-inline: 10px; } .rc-power .rc-calc button.rc-submit { font-size: 14.5px; padding-inline: 14px; } } /* ============================================================ Light content sections ============================================================ */ .rc-section { margin: var(--rc-s7) 0; } .rc-power .rc-section > h2 { margin: 0 0 var(--rc-s2); font-size: clamp(21px, 2.7vw, 30px); font-weight: 700; color: var(--rc-ink); line-height: 1.3; text-wrap: balance; } .rc-power .rc-section > .lead { margin: 0 0 var(--rc-s5); font-size: 15px; line-height: 1.8; color: var(--rc-muted); max-width: 72ch; text-wrap: pretty; } /* ---------- Reference table ---------- One table replaces the old table + two bullet lists + the note. Over-specified against the legacy RiverCool.css table rules. */ .rc-power .rc-tablewrap { display: block; width: 100%; box-sizing: border-box; background-color: var(--rc-surface); border: 1px solid var(--rc-border); border-radius: var(--rc-r3); overflow-x: auto; overflow-y: hidden; box-shadow: var(--rc-sh1); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; /* Scroll affordance. The first two layers are opaque covers pinned to the content (background-attachment: local) so they sit over the shadow only while that edge is already at the end of the scroll; the last two are the shadows themselves, pinned to the box. Result: a soft edge appears on whichever side still has table to reveal, and disappears when it does not. Direction-agnostic, so RTL needs no special case. */ background-image: linear-gradient(to left, var(--rc-surface) 60%, rgba(255, 255, 255, 0)), linear-gradient(to right, var(--rc-surface) 60%, rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(11, 61, 140, 0.13), rgba(11, 61, 140, 0)), linear-gradient(to right, rgba(11, 61, 140, 0.13), rgba(11, 61, 140, 0)); background-position: right center, left center, right center, left center; background-repeat: no-repeat; background-size: 28px 100%, 28px 100%, 15px 100%, 15px 100%; background-attachment: local, local, scroll, scroll; } .rc-power .rc-tablewrap:focus-visible { outline: 2px solid var(--rc-brand); outline-offset: 3px; } .rc-power table.rc-ptable { width: 100%; max-width: none; min-width: 620px; margin: 0; border: 0; border-collapse: collapse; border-spacing: 0; display: table; table-layout: auto; font-size: 14.5px; box-sizing: border-box; } .rc-power table.rc-ptable thead { display: table-header-group; } .rc-power table.rc-ptable tbody { display: table-row-group; } .rc-power table.rc-ptable tr { display: table-row; } .rc-power table.rc-ptable th, .rc-power table.rc-ptable td { display: table-cell; text-align: right; vertical-align: middle; } .rc-power table.rc-ptable thead th { padding: 13px 16px; background: var(--rc-surface-2); color: var(--rc-ink-2); font-size: 12.5px; font-weight: 600; border-bottom: 1px solid var(--rc-border); white-space: nowrap; } .rc-power table.rc-ptable tbody tr { border-bottom: 1px solid #f0f4fb; transition: background var(--rc-d1) var(--rc-ease); } .rc-power table.rc-ptable tbody tr:last-child { border-bottom: 0; } .rc-power table.rc-ptable tbody tr:nth-child(even) { background: #fbfdff; } .rc-power table.rc-ptable tbody tr:hover { background: #eef6ff; } .rc-power table.rc-ptable tbody tr.is-match { background: rgba(67, 146, 241, 0.12); box-shadow: inset 0 0 0 1px rgba(67, 146, 241, 0.34); } .rc-power table.rc-ptable td { padding: 13px 16px; color: var(--rc-ink); } .rc-ptable .cell-power { display: flex; align-items: center; gap: 10px; white-space: nowrap; } .rc-ptable .cell-power img { width: 30px; height: 30px; flex: 0 0 30px; object-fit: contain; opacity: 0; } .rc-power .rc-ptable .cell-power a { font-family: "Kanit", sans-serif; font-weight: 700; font-size: 16px; color: var(--rc-brand-2); text-decoration: none; font-variant-numeric: tabular-nums; transition: color var(--rc-d1) var(--rc-ease); } .rc-power .rc-ptable .cell-power a:hover { color: var(--rc-brand); text-decoration: underline; } .rc-ptable .cell-power .hp-unit { font-family: "El Messiri", sans-serif; font-size: 13px; font-weight: 400; color: var(--rc-muted); } .rc-ptable .num { font-family: "Kanit", sans-serif; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--rc-ink-2); } .rc-ptable .from { display: block; margin-top: 2px; font-family: "Kanit", sans-serif; font-size: 12px; color: var(--rc-positive); font-variant-numeric: tabular-nums; } .rc-ptable .fit { font-size: 13.5px; color: var(--rc-muted); } .rc-tablenote { margin: var(--rc-s3) 0 0; font-size: 13px; line-height: 1.75; color: var(--rc-muted); max-width: 76ch; } .rc-tablenote b { color: var(--rc-ink-2); } /* ---------- The method: a real ordered list ---------- */ .rc-steps { list-style: none; margin: 0; padding: 0; counter-reset: rcstep; display: grid; gap: var(--rc-s3); } .rc-steps > li { counter-increment: rcstep; position: relative; background: var(--rc-surface); border: 1px solid var(--rc-border); border-radius: var(--rc-r3); padding: var(--rc-s4) var(--rc-s5) var(--rc-s4) var(--rc-s5); padding-right: 68px; box-shadow: var(--rc-sh1); } .rc-steps > li::before { content: counter(rcstep); position: absolute; top: var(--rc-s4); right: var(--rc-s5); width: 30px; height: 30px; border-radius: 50%; background: var(--rc-brand-2); color: #fff; font-family: "Kanit", sans-serif; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; } .rc-power .rc-steps h3 { margin: 0 0 6px; font-size: 16.5px; font-weight: 700; color: var(--rc-ink); line-height: 1.4; } .rc-power .rc-steps p { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--rc-ink-2); max-width: 70ch; } .rc-steps .calc { display: inline-block; margin-top: 8px; padding: 5px 12px; border-radius: var(--rc-r1); background: var(--rc-surface-2); font-family: "Kanit", sans-serif; font-size: 13.5px; color: var(--rc-brand-2); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: embed; } @media (max-width: 560px) { .rc-steps > li { padding: var(--rc-s4); padding-right: 56px; } .rc-steps > li::before { right: var(--rc-s4); } } /* ---------- Buying notes ---------- */ .rc-notes { list-style: none; margin: 0; padding: 0; display: grid; /* min() guard: a bare minmax(300px,...) forces a 300px track even when the container is 296px, which pushed each note 4px past its list at 320px. */ grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--rc-s3) var(--rc-s6); } .rc-notes > li { display: flex; align-items: flex-start; gap: var(--rc-s3); padding: var(--rc-s3) 0; border-bottom: 1px solid var(--rc-border); } .rc-notes .ico { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: rgba(67, 146, 241, 0.1); color: var(--rc-brand-2); margin-top: 2px; } .rc-notes .ico svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2; fill: none; } .rc-notes b { display: block; font-size: 14.5px; font-weight: 700; color: var(--rc-ink); line-height: 1.45; margin-bottom: 2px; } .rc-notes span { display: block; font-size: 13.5px; line-height: 1.7; color: var(--rc-muted); max-width: 60ch; } /* ============================================================ Shared page furniture — same components as Prices.php ============================================================ */ /* ---------- CTA ---------- */ .rc-cta { margin: var(--rc-s7) 0; background: linear-gradient(140deg, #0b3d8c 0%, #04183b 100%); border-radius: var(--rc-r4); padding: clamp(28px, 4vw, 44px); color: #fff; display: grid; grid-template-columns: 1fr auto; gap: var(--rc-s5); align-items: center; box-shadow: var(--rc-sh2); position: relative; overflow: hidden; } .rc-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient( 500px 200px at 100% 0%, rgba(109, 180, 255, 0.2), transparent 60% ), radial-gradient( 400px 180px at 0% 100%, rgba(67, 146, 241, 0.16), transparent 60% ); pointer-events: none; } .rc-cta > * { position: relative; z-index: var(--rc-z-base); } .rc-power .rc-cta h2 { margin: 0 0 var(--rc-s2); font-size: clamp(20px, 2.4vw, 28px); line-height: 1.3; color: #fff; text-wrap: balance; } .rc-power .rc-cta p { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 14.5px; max-width: 60ch; line-height: 1.7; } .rc-cta .actions { display: flex; flex-direction: column; gap: var(--rc-s2); min-width: 240px; } .rc-power .rc-cta a.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; min-height: 48px; border-radius: var(--rc-pill); font-weight: 700; text-decoration: none; font-size: 15px; font-family: "PriceFont", "El Messiri", sans-serif; font-variant-numeric: tabular-nums; transition: transform var(--rc-d1) var(--rc-ease), box-shadow var(--rc-d1) var(--rc-ease), background var(--rc-d1) var(--rc-ease); } .rc-power .rc-cta a.btn-primary { background: #fff; color: var(--rc-brand-2); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } .rc-power .rc-cta a.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24); } .rc-power .rc-cta a.btn-wa { background: #25d366; color: #fff; } .rc-power .rc-cta a.btn-wa:hover { background: #1ebe5b; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(37, 211, 102, 0.36); } .rc-cta a.btn svg { width: 18px; height: 18px; flex: 0 0 18px; } .rc-cta .note { font-size: 12px; color: rgba(255, 255, 255, 0.68); text-align: center; } @media (max-width: 720px) { .rc-cta { grid-template-columns: 1fr; } .rc-cta .actions { width: 100%; min-width: 0; } } /* ---------- Trust strip ---------- Four items, so the column count steps 1 → 2 → 4 and never 3: auto-fit landed on three tracks between roughly 740px and 960px and left the fourth item alone on its own row. */ .rc-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rc-s3); margin: var(--rc-s7) 0; padding: var(--rc-s5); background: var(--rc-surface); border: 1px solid var(--rc-border); border-radius: var(--rc-r3); } @media (max-width: 460px) { .rc-trust { grid-template-columns: minmax(0, 1fr); padding: var(--rc-s4); } } @media (min-width: 1000px) { .rc-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .rc-trust-item { display: flex; align-items: center; gap: var(--rc-s3); padding: 8px 4px; } .rc-trust-item .ico { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(67, 146, 241, 0.1); color: var(--rc-brand-2); } .rc-trust-item .ico svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; } .rc-trust-item b { display: block; color: var(--rc-ink); font-size: 14px; font-weight: 600; line-height: 1.3; } .rc-trust-item span { font-size: 12.5px; color: var(--rc-muted); line-height: 1.4; } /* ---------- FAQ ---------- */ .rc-faq { margin: var(--rc-s7) 0; } .rc-power .rc-faq h2 { margin: 0 0 var(--rc-s5); font-size: clamp(21px, 2.7vw, 30px); font-weight: 700; color: var(--rc-ink); text-wrap: balance; } .rc-faq h2 small { display: block; margin-top: 6px; font-size: 14px; font-weight: 400; color: var(--rc-muted); } .rc-faq-list { display: flex; flex-direction: column; gap: var(--rc-s3); } .rc-faq-item { background: var(--rc-surface); border: 1px solid var(--rc-border); border-radius: var(--rc-r3); overflow: hidden; transition: border-color var(--rc-d1) var(--rc-ease), box-shadow var(--rc-d2) var(--rc-ease); } .rc-faq-item[open] { border-color: var(--rc-brand); box-shadow: var(--rc-sh1); } .rc-faq-item summary { list-style: none; cursor: pointer; padding: 18px 22px; min-height: 44px; font-size: clamp(15px, 1.6vw, 17px); font-weight: 600; color: var(--rc-ink); display: flex; align-items: center; justify-content: space-between; gap: var(--rc-s3); line-height: 1.45; transition: color var(--rc-d1) var(--rc-ease); } .rc-faq-item summary::-webkit-details-marker { display: none; } .rc-faq-item summary:hover { color: var(--rc-brand-2); } .rc-faq-item summary::after { content: ""; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--rc-surface-2); background-image: url("data:image/svg+xml;utf8,"); background-position: center; background-repeat: no-repeat; background-size: 14px; transition: transform var(--rc-d2) var(--rc-ease), background var(--rc-d1) var(--rc-ease); } .rc-faq-item[open] summary::after { transform: rotate(180deg); background-color: var(--rc-brand-2); background-image: url("data:image/svg+xml;utf8,"); } .rc-faq-item .answer { padding: 0 22px 22px; color: var(--rc-ink-2); font-size: 15px; line-height: 1.85; max-width: 72ch; } .rc-power .rc-faq-item .answer a { color: var(--rc-brand-2); font-weight: 600; text-decoration: underline; } .rc-power .rc-faq-item .answer a:hover { color: var(--rc-brand); } /* ============================================================ Touch input — keyed off the pointer, not the viewport width. A 1024px tablet is a touch device; a 700px desktop window is not. ============================================================ */ @media (pointer: coarse) { /* iOS Safari zooms the whole page when a text field under 16px takes focus, and never zooms back out. Every typable field clears 16px. */ .rc-power .rc-calc input[type="number"], .rc-power .rc-people input[type="number"] { font-size: 16px; } .rc-power .rc-people input[type="number"] { min-height: 44px; } /* 34px and 38px pills were comfortable with a mouse and fiddly with a thumb. Widen the target without changing the visual weight. */ .rc-power .rc-presets button { min-height: 44px; padding-block: 10px; } .rc-power .rc-seg label, .rc-power .rc-more .rc-seg label { min-height: 44px; } .rc-power .rc-faq-item summary { padding-block: 20px; } } /* Hover lifts belong to devices that can hover. On touch they fire on tap and stick until the next tap somewhere else. */ @media (hover: none) { .rc-power .rc-presets button:hover, .rc-power .rc-calc button.rc-submit:hover, .rc-power .rc-verdict-actions .go-prices:hover, .rc-power .rc-cta a.btn-primary:hover, .rc-power .rc-cta a.btn-wa:hover, .rc-footer .rc-footer-social a:hover, .rc-footer .rc-footer-col a:hover { transform: none; } } /* ---------- Footer ---------- Sibling selector hides the bare