/* Theme Name: Homavar Theme URI: https://example.com/homavar Author: Homavar Studio Author URI: https://example.com Description: Homavar is a modern lifestyle-magazine child theme covering fashion, coffee, drinks, houseplants and home decor. Built as a child theme of "hoor". Fully LTR/English by default, with automatic RTL support (e.g. via Polylang) through the bundled style-rtl.css. This theme reads only — it never writes to the database on install or activation. Template: hoor Version: 1.0.0 Text Domain: homavar Domain Path: /languages Tags: blog, magazine-style, custom-menu, custom-logo, featured-images, footer-widgets, translation-ready, rtl-language-support */ /* ========================================================= HOMAVAR — Design System Palette: warm paper, ink, indigo brand + 5 topic "mood" hues Type: Bricolage Grotesque (display) / Inter (body) Written with CSS logical properties so the whole layout mirrors automatically when is set by core. ========================================================= */ :root{ --paper: #FAF7F1; --paper-raised: #F1EADC; --paper-deep: #E7DCC3; --ink: #17140F; --ink-soft: #6E6656; --ink-faint: #A79E8A; --line: #E6DCC7; --brand: #22306B; --brand-soft: #3B4C99; --on-brand: #FAF7F1; --topic-fashion: #B33A5B; --topic-coffee: #8B5E34; --topic-drinks: #C1652B; --topic-plants: #3F6B4F; --topic-decor: #3F5A82; --topic-lifestyle: #6E6656; --font-display: 'Bricolage Grotesque', 'Inter', sans-serif; --font-body: 'Inter', sans-serif; --container: 1220px; --radius: 14px; --radius-sm: 8px; --radius-pill: 999px; --shadow-soft: 0 18px 40px -22px rgba(23,20,15,.35); --shadow-lift: 0 24px 48px -20px rgba(23,20,15,.28); --ease: cubic-bezier(.2,.7,.2,1); } /* ---------- Reset ---------- */ *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; } img{ max-width: 100%; height: auto; display: block; } a{ color: inherit; text-decoration: none; } ul, ol{ padding-inline-start: 1.3em; } figure{ margin: 0; } button{ font-family: inherit; cursor: pointer; } input, textarea, select{ font-family: inherit; } ::selection{ background: var(--brand); color: var(--on-brand); } .skip-link{ position: absolute; inset-inline-start: 1em; top: -80px; background: var(--ink); color: var(--paper); padding: .8em 1.4em; z-index: 10000; transition: top .2s var(--ease); border-radius: var(--radius-sm); } .skip-link:focus{ top: 1em; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline: 2px solid var(--brand); outline-offset: 3px; } .container{ max-width: var(--container); margin-inline: auto; padding-inline: 24px; } /* ---------- Type ---------- */ h1, h2, h3, h4{ font-family: var(--font-display); color: var(--ink); font-weight: 600; line-height: 1.18; letter-spacing: -.01em; margin: 0 0 .5em; } h1{ font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 700; } h2{ font-size: clamp(1.6rem, 2.8vw, 2.2rem); } h3{ font-size: 1.35rem; } h4{ font-size: 1.1rem; } p{ margin: 0 0 1.3em; } .eyebrow{ display: inline-flex; align-items: center; gap: .55em; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); font-weight: 700; margin-bottom: .7em; } .eyebrow::before{ content: ""; width: 20px; height: 2px; background: var(--brand); display: inline-block; border-radius: 2px; } /* ---------- Topbar ---------- */ .site-topbar{ background: var(--ink); color: var(--paper-raised); font-size: .78rem; } .site-topbar .container{ display: flex; align-items: center; justify-content: space-between; height: 38px; } .site-topbar .topbar-msg{ opacity: .8; } .site-topbar .topbar-social{ display: flex; gap: 16px; } .site-topbar .topbar-social a{ opacity: .75; transition: opacity .2s var(--ease); } .site-topbar .topbar-social a:hover{ opacity: 1; } /* ---------- Masthead ---------- */ .site-masthead{ background: rgba(250,247,241,.9); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 500; border-bottom: 1px solid var(--line); transition: box-shadow .25s var(--ease); } .site-masthead.is-scrolled{ box-shadow: var(--shadow-soft); } .masthead-inner{ display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 16px; } .site-branding{ display: flex; flex-direction: column; } .site-title{ margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); } .site-title a{ display: inline-block; } .site-title img{ max-height: 46px; } .site-description{ margin: 2px 0 0; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); } .masthead-actions{ display: flex; align-items: center; gap: 10px; } .icon-btn{ width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--ink); transition: background .2s var(--ease), border-color .2s var(--ease); } .icon-btn:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); } .icon-btn svg{ width: 18px; height: 18px; } .menu-toggle{ display: none; align-items: center; gap: 8px; } /* ---------- Primary nav ---------- */ .site-nav-wrap{ border-bottom: 1px solid var(--line); } .primary-navigation ul{ list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; } .primary-navigation li{ position: relative; } .primary-navigation a{ display: block; padding: 13px 16px; font-size: .9rem; font-weight: 600; border-radius: var(--radius-pill); transition: background .2s var(--ease), color .2s var(--ease); } .primary-navigation a:hover, .primary-navigation .current-menu-item > a{ background: var(--paper-raised); color: var(--brand); } .primary-navigation .sub-menu{ list-style: none; margin: 0; padding: 8px; position: absolute; inset-inline-start: 0; top: 100%; min-width: 200px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); z-index: 200; display: none; } .primary-navigation li:hover > .sub-menu{ display: block; } .primary-navigation .sub-menu a{ padding: 9px 14px; border-radius: var(--radius-sm); } /* ---------- Search ---------- */ .search-form{ position: relative; display: flex; gap: 8px; } .search-form input[type="search"]{ flex: 1; border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius-pill); padding: 10px 18px; font-size: .92rem; } .search-form button{ border: none; background: var(--ink); color: var(--paper); border-radius: var(--radius-pill); padding: 0 18px; display: inline-flex; align-items: center; gap: 6px; } .search-form button:hover{ background: var(--brand); } .header-search-panel{ display: none; border-bottom: 1px solid var(--line); background: var(--paper-raised); } .header-search-panel.is-open{ display: block; } .header-search-panel .container{ padding-block: 18px; } /* ---------- Topic badge / mood strip (signature element) ---------- */ [data-topic="fashion"]{ --topic-color: var(--topic-fashion); } [data-topic="coffee"]{ --topic-color: var(--topic-coffee); } [data-topic="drinks"]{ --topic-color: var(--topic-drinks); } [data-topic="houseplants"]{ --topic-color: var(--topic-plants); } [data-topic="home-decor"]{ --topic-color: var(--topic-decor); } [data-topic="lifestyle"]{ --topic-color: var(--topic-lifestyle); } .topic-badge{ display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 6px 14px 6px 8px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--topic-color, var(--ink)) 12%, var(--paper)); color: var(--topic-color, var(--ink)); } .topic-badge .badge-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--topic-color, var(--ink)); flex: none; } .mood-strip{ height: 5px; border-radius: var(--radius-pill); background: var(--topic-color, var(--line)); margin-bottom: 16px; } /* ---------- Hero (front page) ---------- */ .magazine-hero{ padding-block: 46px 10px; border-bottom: 1px solid var(--line); } .hero-grid{ display: grid; grid-template-columns: 1.55fr 1fr; gap: 40px; align-items: stretch; } .hero-lead{ position: relative; } .hero-lead-link{ display: block; position: relative; border-radius: var(--radius); overflow: hidden; } .hero-lead-media{ aspect-ratio: 5/4; overflow: hidden; background: var(--paper-deep); } .hero-lead-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .hero-lead:hover .hero-lead-media img{ transform: scale(1.045); } .hero-lead-overlay{ position: absolute; inset-inline: 0; bottom: 0; padding: 28px 26px 24px; background: linear-gradient(0deg, rgba(23,20,15,.85) 0%, rgba(23,20,15,.15) 65%, transparent 100%); } .hero-lead-overlay .topic-badge{ background: rgba(250,247,241,.16); color: var(--paper); backdrop-filter: blur(4px); } .hero-lead-overlay .topic-badge .badge-dot{ background: var(--topic-color, var(--paper)); } .hero-lead-title{ color: var(--paper); font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin: 12px 0 8px; } .hero-lead-excerpt{ color: var(--paper-raised); font-size: .96rem; max-width: 46ch; margin: 0; opacity: .9; } .hero-sidelist{ display: flex; flex-direction: column; } .hero-sidelist-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .hero-sidelist-item{ display: flex; gap: 14px; padding-block: 18px; border-bottom: 1px solid var(--line); } .hero-sidelist-item:first-of-type{ padding-top: 10px; } .hero-sidelist-item:last-child{ border-bottom: none; } .hero-sidelist-num{ font-family: var(--font-display); color: var(--ink-faint); font-size: 1.1rem; flex: none; width: 26px; } .hero-sidelist-title{ font-size: 1rem; margin: 0 0 6px; font-family: var(--font-body); font-weight: 700; } .hero-sidelist-title a:hover{ color: var(--brand); } .hero-sidelist-meta{ font-size: .76rem; color: var(--ink-faint); } /* ---------- Post meta ---------- */ .post-meta{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .8rem; color: var(--ink-faint); margin-bottom: .8em; } .post-meta a{ color: var(--ink-soft); } .post-meta a:hover{ color: var(--brand); } .post-meta .sep{ opacity: .5; } /* ---------- Section headers ---------- */ .section-head{ display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; gap: 20px; } .section-head h2{ margin: 0; } .section-head .section-more{ font-size: .84rem; font-weight: 700; color: var(--brand); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } .section-head .section-more:hover{ text-decoration: underline; } .section-more .icon-arrow{ width: 14px; height: 14px; } /* ---------- Topic sections (alternating editorial layout) ---------- */ .topic-section{ padding-block: 56px; } .topic-section:nth-of-type(even){ background: var(--paper-raised); } .topic-flex{ display: flex; gap: 44px; align-items: stretch; } .topic-section:nth-of-type(even) .topic-flex{ flex-direction: row-reverse; } .topic-feature{ flex: 1.3; } .topic-feature-media{ aspect-ratio: 16/10; overflow: hidden; border-radius: var(--radius); margin-bottom: 18px; background: var(--paper-deep); } .topic-feature-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .topic-feature:hover .topic-feature-media img{ transform: scale(1.04); } .topic-feature-title{ font-size: 1.6rem; } .topic-list{ flex: 1; display: flex; flex-direction: column; gap: 4px; } .topic-list-item{ display: flex; gap: 14px; padding-block: 16px; border-bottom: 1px solid var(--line); } .topic-list-item:last-child{ border-bottom: none; } .topic-list-media{ flex: none; width: 96px; height: 76px; overflow: hidden; border-radius: var(--radius-sm); background: var(--paper-deep); } .topic-list-media img{ width: 100%; height: 100%; object-fit: cover; } .topic-list-title{ font-size: .96rem; font-family: var(--font-body); font-weight: 700; margin: 0 0 6px; } .topic-list-title a:hover{ color: var(--brand); } /* ---------- Post grid (cards) ---------- */ .post-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 28px; } .post-card{ transition: transform .3s var(--ease); } .post-card:hover{ transform: translateY(-4px); } .post-card-media{ aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius); margin-bottom: 16px; background: var(--paper-deep); } .post-card-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); } .post-card:hover .post-card-media img{ transform: scale(1.05); } .post-card-title{ font-size: 1.2rem; margin-bottom: 8px; } .post-card-title a:hover{ color: var(--brand); } .post-card-excerpt{ color: var(--ink-soft); font-size: .93rem; } .reveal{ opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .5s var(--ease); } .reveal.is-visible{ opacity: 1; transform: translateY(0); } /* ---------- Newsletter / CTA band ---------- */ .newsletter-band{ background: var(--brand); color: var(--on-brand); padding-block: 60px; } .newsletter-inner{ display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; } .newsletter-band h2{ color: var(--on-brand); margin-bottom: .3em; } .newsletter-band p{ color: rgba(250,247,241,.82); margin: 0; max-width: 44ch; } .newsletter-form{ display: flex; gap: 10px; flex-wrap: wrap; } .newsletter-form input[type="email"]{ min-width: 240px; padding: 13px 18px; border: none; border-radius: var(--radius-pill); } .newsletter-form button{ background: var(--ink); color: var(--paper); border: none; padding: 13px 26px; border-radius: var(--radius-pill); font-weight: 700; } .newsletter-form button:hover{ background: var(--paper); color: var(--ink); } /* ---------- Content layout ---------- */ .content-area-wrap{ padding-block: 54px 76px; } .content-layout{ display: grid; grid-template-columns: 2fr 1fr; gap: 60px; align-items: start; } .content-layout.no-sidebar{ grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; } .page-header{ margin-bottom: 36px; } .page-header .page-title{ margin-bottom: .3em; } .archive-desc{ color: var(--ink-soft); } /* ---------- Single post ---------- */ .single-post-header{ margin-bottom: 26px; } .single-post-title{ font-size: clamp(2rem, 3.6vw, 2.8rem); } .single-post-thumb{ margin: 26px 0 32px; border-radius: var(--radius); overflow: hidden; } .single-post-thumb figcaption{ font-size: .8rem; color: var(--ink-faint); padding-top: 10px; text-align: center; } .entry-content{ font-size: 1.05rem; } .entry-content h2{ margin-top: 1.6em; } .entry-content h3{ margin-top: 1.4em; } .entry-content p, .entry-content ul, .entry-content ol{ margin-bottom: 1.5em; } .entry-content blockquote{ margin: 2em 0; padding-inline-start: 22px; border-inline-start: 4px solid var(--brand); font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); } .entry-content img{ border-radius: var(--radius); } .entry-content figure{ margin: 2em 0; } .entry-content figcaption{ font-size: .82rem; color: var(--ink-faint); text-align: center; padding-top: 8px; } .entry-content a{ color: var(--brand); text-decoration: underline; text-underline-offset: 3px; } .entry-content table{ width: 100%; border-collapse: collapse; margin-bottom: 1.5em; } .entry-content th, .entry-content td{ border: 1px solid var(--line); padding: 10px 14px; } .entry-content hr{ border: none; border-top: 1px solid var(--line); margin: 2.4em 0; } .entry-tags{ display: flex; flex-wrap: wrap; gap: 8px; margin: 34px 0 10px; } .entry-tags a{ font-size: .78rem; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 6px 15px; color: var(--ink-soft); } .entry-tags a:hover{ border-color: var(--brand); color: var(--brand); } .author-box{ display: flex; gap: 18px; margin: 40px 0; padding: 26px; background: var(--paper-raised); border-radius: var(--radius); } .author-box img{ width: 68px; height: 68px; border-radius: 50%; flex: none; } .author-box h3{ margin: 0 0 6px; font-size: 1.05rem; } .author-box p{ margin: 0; color: var(--ink-soft); font-size: .92rem; } .post-nav-links{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 40px 0; border-block: 1px solid var(--line); padding-block: 24px; } .post-nav-links .nav-next{ text-align: end; } .post-nav-links > div{ display: flex; flex-direction: column; } .post-nav-links .nav-dir{ font-size: .74rem; color: var(--brand); font-weight: 700; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .06em; } .post-nav-links a:hover{ color: var(--brand); } .related-posts{ margin: 50px 0; } /* ---------- Comments ---------- */ .comments-area{ margin-top: 50px; } .comment-list{ list-style: none; margin: 0; padding: 0; } .comment-list .children{ list-style: none; padding-inline-start: 30px; } .comment-body{ padding-block: 22px; border-bottom: 1px solid var(--line); display: flex; gap: 16px; } .comment-body .avatar{ border-radius: 50%; flex: none; } .comment-meta{ font-size: .82rem; color: var(--ink-faint); margin-bottom: 6px; } .comment-meta b{ color: var(--ink); } .comment-reply-link{ font-size: .78rem; color: var(--brand); font-weight: 700; } .comment-form label{ display: block; font-size: .85rem; margin-bottom: 6px; font-weight: 700; } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea{ width: 100%; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); margin-bottom: 18px; } .comment-form textarea{ min-height: 140px; } .comment-form .submit{ background: var(--brand); color: var(--on-brand); border: none; padding: 12px 28px; border-radius: var(--radius-pill); font-weight: 700; } .comment-form .submit:hover{ background: var(--brand-soft); } /* ---------- Sidebar / widgets ---------- */ .widget{ margin-bottom: 42px; } .widget-title{ font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 18px; } .widget ul{ list-style: none; margin: 0; padding: 0; } .widget li{ padding-block: 9px; border-bottom: 1px solid var(--line); font-size: .92rem; } .widget li:last-child{ border-bottom: none; } .widget a:hover{ color: var(--brand); } .about-widget-card{ background: var(--paper-raised); padding: 26px; border-radius: var(--radius); text-align: center; } .about-widget-card img{ border-radius: 50%; width: 78px; margin: 0 auto 14px; } /* ---------- Pagination ---------- */ .pagination{ display: flex; justify-content: center; gap: 8px; margin-top: 50px; flex-wrap: wrap; } .pagination a, .pagination span{ min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: .9rem; } .pagination .current{ background: var(--ink); color: var(--paper); border-color: var(--ink); } .pagination a:hover{ border-color: var(--brand); color: var(--brand); } /* ---------- 404 ---------- */ .error-404{ text-align: center; padding-block: 90px; } .error-num{ font-family: var(--font-display); font-size: clamp(5rem, 16vw, 9.5rem); font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--ink); margin-bottom: 6px; } .error-404 p{ color: var(--ink-soft); max-width: 480px; margin: 0 auto 2em; } .error-404 .search-form{ max-width: 420px; margin: 0 auto 40px; } .error-topics{ display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } /* ---------- Footer ---------- */ .site-footer{ background: var(--ink); color: var(--paper-raised); margin-top: 60px; } .footer-widgets{ padding: 60px 0 30px; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; border-bottom: 1px solid rgba(250,247,241,.14); } .footer-widgets .widget-title{ color: var(--paper); } .footer-widgets .widget li{ border-bottom-color: rgba(250,247,241,.12); color: var(--paper-raised); } .footer-widgets a{ color: var(--paper-raised); } .footer-widgets a:hover{ color: var(--paper); } .footer-brand .site-title{ font-size: 1.9rem; color: var(--paper); margin-bottom: 10px; } .footer-brand p{ color: var(--paper-raised); font-size: .92rem; } .footer-social{ display: flex; gap: 10px; margin-top: 18px; } .footer-social a{ width: 38px; height: 38px; border: 1px solid rgba(250,247,241,.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .footer-social a:hover{ background: var(--brand); border-color: var(--brand); } .site-info{ padding: 22px 0; text-align: center; font-size: .82rem; color: var(--ink-faint); } .site-info a{ color: var(--paper-raised); } /* ---------- Buttons ---------- */ .btn{ display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; border-radius: var(--radius-pill); font-size: .88rem; font-weight: 700; border: 1px solid var(--ink); background: transparent; color: var(--ink); transition: background .2s var(--ease), color .2s var(--ease); } .btn:hover{ background: var(--ink); color: var(--paper); } .btn-solid{ background: var(--brand); border-color: var(--brand); color: var(--on-brand); } .btn-solid:hover{ background: var(--brand-soft); border-color: var(--brand-soft); } /* ---------- Utility ---------- */ .screen-reader-text{ position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; } .has-drop-cap:first-letter{ font-family: var(--font-display); float: inline-start; margin-inline-end: 12px; font-size: 3.4em; line-height: .82; color: var(--brand); margin-top: 6px; } /* ---------- Responsive ---------- */ @media (max-width: 980px){ .hero-grid{ grid-template-columns: 1fr; } .topic-flex, .topic-section:nth-of-type(even) .topic-flex{ flex-direction: column; } .post-grid{ grid-template-columns: repeat(2, 1fr); } .content-layout{ grid-template-columns: 1fr; } .footer-widgets{ grid-template-columns: 1fr 1fr; } } @media (max-width: 680px){ body{ font-size: 16px; } .masthead-actions .icon-btn.search-toggle{ display: none; } .menu-toggle{ display: inline-flex; } .primary-navigation{ display: none; width: 100%; } .primary-navigation.is-open{ display: block; } .primary-navigation ul{ flex-direction: column; } .primary-navigation .sub-menu{ position: static; box-shadow: none; display: block; border: none; padding-inline-start: 16px; } .post-grid{ grid-template-columns: 1fr; } .footer-widgets{ grid-template-columns: 1fr; padding: 40px 0 10px; } .post-nav-links{ grid-template-columns: 1fr; } .newsletter-inner{ flex-direction: column; align-items: flex-start; } .site-topbar .topbar-msg{ max-width: 60%; } } @media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; } }