/* ============================================================================ Home Decor 02 theme (EVA-946 / EVA-968) — Ecomus L2, room/decor-style IA. Branded sibling of homedecor01. Only theme-specific overrides live here; the PDP / shop / facet chrome comes from the Ecomus L2 base + t02-common.css. Palette decoded from the redecor.bg rasters (not sampled by eye), a three-way accent set: coral #FF5C5C · amber #FFC05C · grey #A8A8A8 over #000 ink. Typeface: self-hosted Montserrat (see fonts.css), replacing Ecomus Albert Sans. ============================================================================ */ :root { --hd-coral: #FF5C5C; --hd-amber: #FFC05C; --hd-grey: #A8A8A8; --hd-ink: #111110; --hd-cream: #FBF8F4; --hd-sand: #F3ECE3; --hd-line: #ece7e0; --hd-radius: 14px; --hd-scrim: rgba(17, 17, 16, 0.55); } /* ---- Typography: Montserrat (EVA-968) -------------------------------------- The Ecomus base sets font-family:"Albert Sans" on and on the heading elements directly (styles.css), so inheriting from alone is not enough — the heading declarations must be overridden too. custom.css loads last, but some vendor heading rules carry class-level specificity, so pin the brand face with !important. This is the single font swap that makes Cyrillic headings render in Montserrat rather than the Albert Sans fallback (acceptance gate). */ body, h1, h2, h3, h4, h5, h6, .tf-btn, .btn, button, input, select, textarea, .flat-title .title, .footer-brand-text, .footer-heading h6 { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important; } /* --- Tenant image logo (EVA-946 platform capability) ---------------------- * Served cacheably by LogoController at /logo.png; the header renders it in place of the site_name() wordmark when branding.logoDataUri is set. The redecor wordmark is 4:1 (1200×300); the carries explicit width+height (160×40) so the box is reserved before load — no CLS (EVA-968). Height fixed keeps the header row stable; width tracks the 4:1 ratio. */ .logo-header .logo-img { height: 40px; width: auto; max-width: 220px; display: block; } /* ---- Shared section rhythm ---- */ .hd-section .flat-title { text-align: center; margin-bottom: 28px; } .hd-section .flat-title .title { font-weight: 700; letter-spacing: -0.01em; } /* ============================================================================ Dual hero — full-bleed photography with an overlay (EVA-968). Primary panel is the aspirational hero image; both panels crop via object-fit:cover (no letterbox) and reserve their box with width/height. ============================================================================ */ .hd-hero-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; } .hd-hero-panel { position: relative; display: flex; align-items: flex-end; min-height: 420px; padding: 36px; border-radius: var(--hd-radius); overflow: hidden; color: #fff; background: var(--hd-ink); } .hd-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* Scrim: darken toward the bottom-left where the copy sits, keep the image readable elsewhere. Two stacked gradients = vertical floor + left column. */ .hd-hero-panel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(17, 17, 16, 0) 32%, rgba(17, 17, 16, 0.78) 100%), linear-gradient(90deg, rgba(17, 17, 16, 0.5) 0%, rgba(17, 17, 16, 0) 62%); } /* Secondary panel carries a coral wash so the amber/coral identity reads even over a neutral photo. */ .hd-hero-panel--secondary::after { background: linear-gradient(180deg, rgba(17, 17, 16, 0) 24%, rgba(17, 17, 16, 0.72) 100%), linear-gradient(150deg, rgba(255, 92, 92, 0.32) 0%, rgba(255, 92, 92, 0) 60%); } .hd-hero-content { position: relative; z-index: 2; max-width: 34ch; } .hd-hero-eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; font-weight: 600; opacity: 0.9; margin-bottom: 10px; } .hd-hero-title { font-size: clamp(26px, 3vw, 42px); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 10px; } .hd-hero-sub { margin-bottom: 20px; opacity: 0.92; } .hd-hero-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 999px; font-weight: 600; line-height: 1; background: var(--hd-amber); color: var(--hd-ink); transition: transform 0.2s ease, box-shadow 0.2s ease; } .hd-hero-panel--secondary .hd-hero-btn { background: #fff; color: var(--hd-ink); } .hd-hero-panel:hover .hd-hero-btn { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); } /* ============================================================================ Tile grids — Shop by Room (6) + Explore by decor style (4) (EVA-968). Each tile is a cropped photo with a gradient scrim and a bottom-left label. Both grids are laid out for the count they actually render — 4×2 for the eight rooms, 3×2 for the six styles — so neither leaves a hole. Change the column count with the tile count (EVA-968): a grid with a trailing gap reads as unfinished. ============================================================================ */ .hd-tile-grid { display: grid; gap: 16px; } .hd-tile-grid--rooms { grid-template-columns: repeat(4, 1fr); } .hd-tile-grid--styles { grid-template-columns: repeat(3, 1fr); } .hd-tile { position: relative; display: flex; align-items: flex-end; min-height: 200px; padding: 18px; overflow: hidden; border-radius: var(--hd-radius); background: var(--hd-ink); color: #fff; transition: transform 0.2s ease, box-shadow 0.2s ease; } .hd-tile--style { min-height: 170px; } .hd-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.4s ease; } .hd-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(17, 17, 16, 0) 38%, rgba(17, 17, 16, 0.72) 100%); } .hd-tile-label { position: relative; z-index: 2; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); } .hd-tile:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(17, 17, 16, 0.18); color: #fff; } .hd-tile:hover .hd-tile-img { transform: scale(1.05); } /* Coral keyline on hover ties the tiles to the accent set. */ .hd-tile:hover::after { background: linear-gradient(180deg, rgba(17, 17, 16, 0) 38%, rgba(17, 17, 16, 0.72) 100%), linear-gradient(0deg, rgba(255, 92, 92, 0.18), rgba(255, 92, 92, 0)); } /* ============================================================================ Problem-framed blocks (EVA-968) — branded blocks, not photos. The operator's call: an illustrative/branded form is the intended treatment here, so each block is a palette-tinted card carrying the three-way accent set. ============================================================================ */ .hd-problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .hd-problem { position: relative; display: flex; flex-direction: column; min-height: 230px; padding: 30px; border-radius: var(--hd-radius); background: var(--hd-sand); color: var(--hd-ink); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .hd-problem:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(17, 17, 16, 0.1); color: var(--hd-ink); } /* Big translucent index numeral as the "illustration". */ .hd-problem-index { position: absolute; top: 8px; right: 18px; font-size: 104px; font-weight: 700; line-height: 1; opacity: 0.14; pointer-events: none; } .hd-problem-title { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 10px; } .hd-problem-text { color: #5b5750; margin-bottom: 18px; } .hd-problem-cta { margin-top: auto; font-weight: 600; } .hd-problem-cta .icon { font-size: 12px; vertical-align: middle; margin-left: 4px; } /* Three-way accent: coral, amber, ink. */ .hd-problem:nth-child(1) { background: linear-gradient(155deg, #fff2f2 0%, #ffe1e1 100%); } .hd-problem:nth-child(1) .hd-problem-index, .hd-problem:nth-child(1) .hd-problem-cta { color: var(--hd-coral); } .hd-problem:nth-child(2) { background: linear-gradient(155deg, #fff6e7 0%, #ffe9c2 100%); } .hd-problem:nth-child(2) .hd-problem-index, .hd-problem:nth-child(2) .hd-problem-cta { color: #c98a1f; } .hd-problem:nth-child(3) { background: linear-gradient(155deg, #2a2a28 0%, #111110 100%); color: #fff; } .hd-problem:nth-child(3) .hd-problem-text { color: #cfc9c1; } .hd-problem:nth-child(3) .hd-problem-index { color: var(--hd-amber); opacity: 0.22; } .hd-problem:nth-child(3) .hd-problem-cta { color: var(--hd-amber); } /* ---- Shop by brand ---- */ .hd-brands-cta { padding: 8px 0 4px; } /* ---- Trust badges ---- */ .hd-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } /* ============================================================================ Responsive ============================================================================ */ @media (max-width: 991px) { .hd-hero-grid { grid-template-columns: 1fr; } .hd-hero-panel { min-height: 320px; } .hd-tile-grid--rooms { grid-template-columns: repeat(2, 1fr); } .hd-tile-grid--styles { grid-template-columns: repeat(2, 1fr); } .hd-problem-grid { grid-template-columns: 1fr; } .hd-trust-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .hd-tile-grid--rooms { grid-template-columns: repeat(2, 1fr); } .hd-hero-panel { min-height: 260px; padding: 24px; } }