to /account/ */
}
/* ---------------------------------------------------------------------------
* Portal body
* ------------------------------------------------------------------------- */
.rnf-portal {
background: var(--paper);
min-height: 60vh;
}
.rnf-portal__inner {
max-width: 1120px;
margin: 0 auto;
padding: 44px 28px 72px;
}
/* Reusable member back link ("up a level" → /members/). Quiet editorial tone,
not a button. Rendered by template-parts/member-back-link.php. */
.rnf-member-back {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 18px;
font-family: var(--font-sans);
font-size: 14px;
color: var(--inks);
text-decoration: none;
transition: color .15s ease;
}
.rnf-member-back:hover { color: var(--pine); }
.rnf-member-back svg { flex: none; }
.rnf-portal-hero__title {
/* was: font-weight: 500; */
font-family: var(--font-serif);
font-weight: 600;
color: var(--ink);
font-size: clamp(30px, 4.5vw, 44px);
line-height: 1.12;
letter-spacing: -0.01em;
margin: 0 0 12px;
}
.rnf-portal-hero__sub {
font-family: var(--font-sans);
color: var(--inks);
font-size: 16.5px;
line-height: 1.6;
max-width: 60ch;
margin: 0 0 26px;
}
/* Desktop: lift the reading-measure cap so the subhead sits on one line. The
60ch base above still governs narrow screens, where it wraps to the viewport
and never overflows. */
@media (min-width: 768px) {
.rnf-portal-hero__sub {
max-width: none;
}
}
/* Search pill (UI only) */
.rnf-portal-search {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
background: var(--paper2);
border: 1px solid var(--line);
border-radius: var(--radius-pill);
padding: 13px 20px;
margin-bottom: 40px;
}
.rnf-portal-search__icon {
display: inline-flex;
color: var(--inks);
flex-shrink: 0;
}
.rnf-portal-search__input {
flex: 1;
border: none;
background: transparent;
font-family: var(--font-sans);
font-size: 15.5px;
color: var(--ink);
outline: none;
}
.rnf-portal-search__input::placeholder {
color: var(--inks);
opacity: 0.7;
}
/* Section heading */
.rnf-portal-section {
font-family: var(--font-sans);
font-weight: 700;
color: var(--ink);
font-size: 20px;
margin: 0 0 18px;
}
/* ---------------------------------------------------------------------------
* Search results (portal-search.js renders rows here; reuses palette tokens)
* ------------------------------------------------------------------------- */
/* The [hidden] attribute must win over the explicit display rules below
(.rnf-portal-grid uses display:grid, .rnf-search-results display:flex), which
would otherwise override the UA [hidden]{display:none} and keep the grid
visible while searching. Attribute selectors raise specificity to do that. */
.rnf-portal-grid[hidden],
.rnf-portal-section[hidden],
.rnf-search-results[hidden] {
display: none;
}
.rnf-search-results {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 8px;
}
.rnf-search-result {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--paper2);
text-decoration: none;
color: var(--ink);
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.rnf-search-result:hover {
transform: translateY(-2px);
border-color: var(--sage);
box-shadow: 0 6px 18px rgba(44, 46, 40, 0.10);
}
.rnf-search-result__thumb {
flex: 0 0 auto;
width: 56px;
height: 56px;
border-radius: 10px;
overflow: hidden;
background: var(--sage2);
}
.rnf-search-result__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.rnf-search-result__body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.rnf-search-result__title {
font-weight: 600;
font-size: 15.5px;
color: var(--ink);
}
.rnf-search-result__ctx {
font-size: 13px;
color: var(--inks);
}
.rnf-search-result__arrow {
flex: 0 0 auto;
display: inline-flex;
color: var(--pine);
}
.rnf-search-empty {
margin: 4px 0 8px;
padding: 18px 16px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--paper2);
color: var(--inks);
font-size: 14.5px;
line-height: 1.5;
}
/* ---------------------------------------------------------------------------
* Category grid + cards
* ------------------------------------------------------------------------- */
.rnf-portal-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px;
}
.rnf-portal-card {
position: relative;
display: block;
aspect-ratio: 3 / 2;
border-radius: 18px;
overflow: hidden;
text-decoration: none;
background: var(--sage2);
box-shadow: 0 1px 2px rgba(44, 46, 40, 0.06);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.rnf-portal-card__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.rnf-portal-card__scrim {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(20, 26, 19, 0) 38%, rgba(20, 26, 19, 0.72) 100%);
}
.rnf-portal-card__arrow {
position: absolute;
top: 14px;
right: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(246, 242, 232, 0.18);
color: #fff;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.rnf-portal-card__body {
position: absolute;
left: 20px;
right: 20px;
bottom: 18px;
display: flex;
flex-direction: column;
gap: 4px;
}
.rnf-portal-card__title {
/* was: font-weight: 500; */
font-family: var(--font-serif);
font-weight: 600;
color: #fff;
font-size: 22px;
line-height: 1.2;
}
.rnf-portal-card__sub {
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.4;
color: rgba(255, 255, 255, 0.85);
}
.rnf-portal-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 22px rgba(44, 46, 40, 0.16);
}
.rnf-portal-card:hover .rnf-portal-card__scrim {
background: linear-gradient(180deg, rgba(20, 26, 19, 0.05) 30%, rgba(20, 26, 19, 0.8) 100%);
}
/* Living Spaces room grid: unlinked (not-yet-live) cards render as while
linked ones render as
. Give the unlinked cards a heavier dim so they read
as pending. Same ink color as the base scrim, just stronger. Scoped to
.rnf-portal-grid div.rnf-portal-card, which only matches these cards (the
/cookware/ .rnf-portal-grid cards are all ; the member home uses a
different grid). */
.rnf-portal-grid div.rnf-portal-card .rnf-portal-card__scrim {
background: linear-gradient(180deg, rgba(20, 26, 19, 0.48) 0%, rgba(20, 26, 19, 0.82) 100%);
}
/* ---------------------------------------------------------------------------
* Member home (/members/) — 12-tile launcher
* 4-up desktop → 3 → 2 → 1 (12 divides evenly at each step, no orphan tiles).
* Reuses .rnf-portal-card for shape; coming-soon guide tiles may carry a photo
* (.rnf-portal-card--photo, heavier overlay); tool tiles have no photo.
* ------------------------------------------------------------------------- */
.rnf-members-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
@media (max-width: 1024px) {
.rnf-members-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
.rnf-members-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 430px) {
.rnf-members-grid { grid-template-columns: 1fr; }
}
/* Placeholder (coming-soon guides) + tool (DIY search) tiles: no photo, so
center the label; they are not links. */
.rnf-portal-card--placeholder,
.rnf-portal-card--tool {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 6px;
padding: 18px;
cursor: default;
}
/* Body in placeholder/tool tiles centers (overrides the absolute bottom layout). */
.rnf-portal-card--placeholder .rnf-portal-card__body,
.rnf-portal-card--tool .rnf-portal-card__body {
position: static;
left: auto;
right: auto;
bottom: auto;
align-items: center;
gap: 4px;
}
/* Not links → no hover lift. */
.rnf-portal-card--placeholder:hover,
.rnf-portal-card--tool:hover {
transform: none;
box-shadow: 0 1px 2px rgba(44, 46, 40, 0.06);
}
.rnf-portal-card__soon {
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: 0.02em;
color: var(--inks);
}
/* Coming-soon guides: light sage block, dark readable title. */
.rnf-portal-card--placeholder {
background: var(--sage2);
}
.rnf-portal-card--placeholder .rnf-portal-card__title {
color: var(--pine);
}
/* Coming-soon guide tiles WITH a photo: use the live-card photo layout
(full-bleed image, bottom-left white title) but a HEAVIER dim overlay than the
live cards, so they still read as pending rather than active. Additive — the
no-photo .rnf-portal-card--placeholder treatment above is unchanged, and no
other page emits this variant. */
.rnf-portal-card--placeholder.rnf-portal-card--photo {
display: block;
padding: 0;
text-align: left;
}
.rnf-portal-card--placeholder.rnf-portal-card--photo .rnf-portal-card__body {
position: absolute;
left: 20px;
right: 20px;
bottom: 18px;
align-items: flex-start;
text-align: left;
}
.rnf-portal-card--placeholder.rnf-portal-card--photo .rnf-portal-card__title {
color: #fff;
}
.rnf-portal-card--placeholder.rnf-portal-card--photo .rnf-portal-card__soon {
color: rgba(255, 255, 255, 0.85);
}
/* Heavier than the live cards' scrim (transparent at top → 0.72 bottom): this
dims the whole tile (same ink color, no new color) so it reads as pending. */
.rnf-portal-card--placeholder.rnf-portal-card--photo .rnf-portal-card__scrim {
background: linear-gradient(180deg, rgba(20, 26, 19, 0.48) 0%, rgba(20, 26, 19, 0.82) 100%);
}
/* DIY recipe search TOOLS: distinct dark pine accent + search icon, so they read
as tools, not guides. */
.rnf-portal-card--tool {
background: var(--pine);
}
.rnf-portal-card--tool .rnf-portal-card__title {
color: #fff;
font-size: 18px;
}
.rnf-portal-card--tool .rnf-portal-card__soon {
color: rgba(255, 255, 255, 0.8);
}
.rnf-portal-card--tool .rnf-portal-card__tool-icon {
display: inline-flex;
color: rgba(255, 255, 255, 0.9);
}
/* ---------------------------------------------------------------------------
* Responsive
* ------------------------------------------------------------------------- */
@media (max-width: 640px) {
/* Added 2026-09-15 (local only): cap the header logo on small screens. Redeclaring the
token (rather than duplicating the .rnf-portal-brand img rule) keeps ONE knob per
breakpoint. Matters below 480px, where .rnf-portal-feedback collapses to its icon
(~36px) and the logo would otherwise drive the whole bar height. */
:root {
--logo-h-header: 40px;
}
.rnf-portal-header__inner {
padding: 14px 20px;
gap: 12px;
}
.rnf-portal-header__group {
gap: 14px;
}
/* Keep the header from overflowing on small screens: drop the text labels,
keep icons + pill + avatar. */
.rnf-portal-link span:not(.rnf-portal-link__icon) {
display: none;
}
.rnf-portal__inner {
padding: 32px 20px 56px;
}
.rnf-portal-grid {
grid-template-columns: 1fr;
gap: 16px;
}
}
/* Small phones (< ~440px): the brand + Feedback pill + Log out + avatar cluster
is wider than the device and would force the portal to zoom out / scroll
sideways. Collapse the Feedback pill to its gift icon (the Log-out text is
already icon-only at 640px above) so the header fits on one tidy row. The pill
stays a tappable link to /feedback/. Desktop/tablet are unaffected. */
@media (max-width: 480px) {
.rnf-portal-feedback__text {
display: none;
}
.rnf-portal-feedback {
padding: 9px;
gap: 0;
}
}
/* ---------------------------------------------------------------------------
* BEGIN ROLLBACK 2026-09-08 home rebuild: full-bleed homepage hero.
*
* Scoped to .rnf-portal--home-hero, a modifier added alongside (not replacing)
* .rnf-portal on the front page only (template-parts/guide-hub.php). Every other
* .rnf-portal surface on the site is untouched by this block.
*
* COLOUR / BACKGROUND / LAYOUT ONLY. No font-family, size or weight is set here;
* the type system (Fraunces / Inter) is unchanged.
*
* THE IMAGE FILENAME CONTAINS SPACES, so the url() is QUOTED. Unquoted it would
* silently fail to parse. Path is relative to this stylesheet (assets/css/ ->
* ../images/), matching about.css:15 and offer.css's footer photo.
*
* background-color is a SEPARATE property from background-image, deliberately:
* the `background` shorthand would reset the colour to transparent and wipe the
* fallback, leaving light hero text on nothing while the 15.6 MB photo loads.
*
* To revert: delete this whole block and the modifier in guide-hub.php.
* ------------------------------------------------------------------------- */
.rnf-portal--home-hero {
display: flex;
align-items: center;
justify-content: center;
min-height: 78vh;
background-color: var(--rnf-footer);
background-image:
linear-gradient( rgba(30, 35, 30, 0.35), rgba(30, 35, 30, 0.45) ),
url('../images/hero-kitchen.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.rnf-portal--home-hero .rnf-portal__inner {
text-align: center;
}
/* Light text over the scrim. Colour only — sizes and weights come from the
existing .rnf-portal-hero__title / __sub rules above, unchanged. */
.rnf-portal--home-hero .rnf-portal-hero__title,
.rnf-portal--home-hero .rnf-portal-hero__sub {
color: var(--rnf-cream);
}
/* BEGIN ROLLBACK 2026-09-08 search width: narrow the homepage search bar.
*
* SCOPED to --home-hero deliberately. .rnf-portal-search is shared by nine
* templates (every guide hub); this modifier exists only on the front page, so
* no other hub search bar changes. The shared rule at :174-184 is untouched.
*
* WHY 620px. The placeholder is 62 characters; at 15.5px Inter (~0.5em average
* glyph) that is ~480px of text, plus ~70px of chrome (20+20 padding, ~20 icon,
* 10 gap) = ~550px to fit it. 620px leaves the input ~550px of usable room,
* about 71 characters - the placeholder fits with slack and a multi-word query
* has clear space. Deliberately NOT sized tight to the placeholder.
*
* RESPONSIVE: max-width caps it; the inherited width:100% lets it shrink below
* 620px viewports. box-sizing: border-box is global (tokens.css:167), so the
* 13px/20px padding sits inside the width and cannot cause overflow.
*
* Width and centering ONLY - no height, padding, font or icon change. The
* margin-bottom: 40px on the shared rule is preserved: these are separate
* longhand properties, not a shorthand that would reset it.
*/
.rnf-portal--home-hero .rnf-portal-search {
max-width: 620px;
margin-left: auto;
margin-right: auto;
}
/* END ROLLBACK 2026-09-08 search width */
/* END ROLLBACK 2026-09-08 home rebuild */