/* Theme Name: Husforbegyndere: Værksted Template: kadence Author: husforbegyndere.dk Description: Hus for begyndere brand child theme, "Værksted" identity: graphite ink, spirit-level amber accent, warm concrete grounds. Self-hosted Schibsted Grotesk (display) + Inter (body) + a mono spec-sheet treatment for data. Design record: docs/dk-husforbegyndere/theme-redesign.md Version: 1.0.0 */ /* ========================================================================== 1. FONTS, self-hosted (GDPR: never hotlink Google Fonts) Inter ships as a single variable file covering 100–900. ========================================================================== */ @font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/schibsted-600.woff2') format('woff2');} @font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/schibsted-700.woff2') format('woff2');} @font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/schibsted-800.woff2') format('woff2');} @font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/inter-var.woff2') format('woff2');} /* ========================================================================== 2. BRAND TOKENS (locked, see docs/dk-husforbegyndere/theme-redesign.md) The --global-palette* mapping is what recolours every *native* Kadence element (nav, headings, buttons, related-posts carousel). Kadence never had these customised via the Customizer, so without this block those elements keep rendering Kadence's stock blue no matter what else we override. ========================================================================== */ :root{ --hfb-page:#ECEAE4; --hfb-panel:#FBFAF7; --hfb-panel2:#F3F0EA; --hfb-ink:#23262B; --hfb-ink-soft:#565A61; --hfb-line:#DBD6CC; --hfb-line-soft:#E7E3DA; --hfb-amber:#E8A317; --hfb-amber-hover:#D6970C; --hfb-amber-ink:#8A5E06; --hfb-amber-on:#241D0B; --hfb-graphite:#212429; --hfb-good:#3C7A4E; --hfb-win:#F8EDCB; --hfb-display:'Schibsted Grotesk','Segoe UI',system-ui,sans-serif; --hfb-body:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif; --hfb-mono:'SFMono-Regular',ui-monospace,'Cascadia Mono','Segoe UI Mono','Consolas',monospace; /* Kadence global palette remap */ --global-palette1:var(--hfb-amber); --global-palette2:var(--hfb-amber-ink); --global-palette3:var(--hfb-ink); --global-palette4:var(--hfb-ink); --global-palette5:var(--hfb-ink-soft); --global-palette6:var(--hfb-ink-soft); --global-palette7:var(--hfb-line); --global-palette8:var(--hfb-page); --global-palette9:var(--hfb-panel); --global-palette-highlight:var(--hfb-amber); --global-palette-highlight-alt:var(--hfb-amber-hover); --global-palette11:var(--hfb-good); --global-palette13:#A23F35; } /* ========================================================================== 3. BASE CHROME Kadence's dynamically-generated CSS (kadence-global/header/content/footer) enqueues AFTER a default-priority child stylesheet. functions.php loads this file at priority 100 to win ordering; the !important below is a targeted backstop for the selectors Kadence still wins on equal specificity. ========================================================================== */ /* Only paints the page ground. Putting background-color on p/li/span paints an opaque light block behind every paragraph, which reads as grey boxes over the dark bands (caught in the first render pass). Colour is inherited so reversed-out sections can set their own. */ body{ background-color:var(--hfb-page); color:var(--hfb-ink); font-size:17px; line-height:1.65; } p, li, span:not([class]){ color:inherit; font-family:var(--hfb-body) !important; } h1,h2,h3,h4,h5,h6, .entry-title, .site-title{ font-family:var(--hfb-display) !important; color:var(--hfb-ink) !important; letter-spacing:-0.025em; text-wrap:balance; } h1{letter-spacing:-0.035em;} /* The heading rule above must be !important to beat Kadence, so anything reversed out on a dark band has to outrank it too, or it renders graphite on graphite and vanishes entirely. */ .hfb-band h1,.hfb-band h2,.hfb-band h3,.hfb-band h4, .hfb-hero h1,.hfb-closing h2, .hfb-feature-side .hfb-winner, .hfb-step h3{ color:#fff !important; } /* ...except the light notecard, which sits inside the dark hero band and would otherwise inherit the reversed-out white and disappear against its own panel. */ .hfb-notecard h3, .hfb-notecard h3 a{color:var(--hfb-ink) !important;} .hfb-notecard h3 a:hover{color:var(--hfb-amber-ink) !important;} a{color:var(--hfb-amber-ink);} a:hover{color:var(--hfb-ink);} .main-navigation a, .primary-menu-container a, .site-header-item a{ font-family:var(--hfb-body) !important; font-size:.95rem !important; font-weight:500; color:var(--hfb-ink) !important; } .main-navigation a:hover, .primary-menu-container a:hover{color:var(--hfb-amber-ink) !important;} .site-header, .site-footer, .footer-widget-area{ background-color:var(--hfb-panel) !important; border-color:var(--hfb-line) !important; } /* Text lettermark instead of a logo image. The final "e" is knocked out of alignment so it reads as a letter that has come loose and is hanging off, which is the effect the original raster logo had. Pure CSS: no logo file to maintain, and it stays crisp at any size. The image logo is hidden so the header doesn't show two competing wordmarks. */ .custom-logo-link, .site-branding img.custom-logo, .site-header-item .custom-logo, .site-branding .custom-logo-link{display:none !important;} .site-title{display:block !important;font-weight:800 !important;} .site-title a{text-decoration:none;} .site-title .wordmark-accent{color:var(--hfb-amber-ink) !important;} .site-title .wordmark-broken{ display:inline-block; color:var(--hfb-amber-ink) !important; transform:translateY(.17em) rotate(12deg); transform-origin:12% 12%; } .footer-html-inner, .footer-html-inner p{ font-family:var(--hfb-mono) !important; font-size:.74rem !important; letter-spacing:.04em; color:var(--hfb-ink-soft) !important; } /* CTA buttons, amber fill, dark text (amber is too light for white text) */ .wp-block-button__link, .kt-button, button:not(.kadence-svg-icon-frame), input[type="submit"]{ background-color:var(--hfb-amber) !important; border-color:var(--hfb-amber) !important; color:var(--hfb-amber-on) !important; font-family:var(--hfb-display) !important; font-weight:700 !important; border-radius:8px !important; } .wp-block-button__link:hover, .kt-button:hover, input[type="submit"]:hover{ background-color:var(--hfb-amber-hover) !important; border-color:var(--hfb-amber-hover) !important; color:var(--hfb-amber-on) !important; } /* article sits on the page ground, not in a floating white card */ .entry.single-entry, .entry-content-wrap{ background-color:var(--hfb-page) !important; box-shadow:none !important; } /* reading column, applied to header+content together so title, eyebrow and body all align on the same edge. Kadence adds 2rem padding to .entry-content-wrap that .entry-header doesn't get; zeroing both. */ .entry-content-wrap, .entry-header{ max-width:790px !important; margin-left:auto !important; margin-right:auto !important; padding-left:0 !important; padding-right:0 !important; } .entry-content{max-width:100%;} .entry-content.alignwide, .entry-content .alignwide{max-width:980px;} /* category eyebrow above the title */ .entry-taxonomies .category-links a{ font-family:var(--hfb-mono) !important; font-size:.72rem !important; font-weight:600 !important; letter-spacing:.14em !important; text-transform:uppercase !important; color:var(--hfb-amber-ink) !important; text-decoration:none !important; } /* RankMath breadcrumbs, quiet mono line, not a heavy nav bar */ .hfb-breadcrumbs-wrap{max-width:790px;margin:0 auto;padding:20px 24px;} .hfb-breadcrumbs .rank-math-breadcrumb, .hfb-breadcrumbs .rank-math-breadcrumb p{margin:0;} .hfb-breadcrumbs .rank-math-breadcrumb, .hfb-breadcrumbs .rank-math-breadcrumb a, .hfb-breadcrumbs .rank-math-breadcrumb .last, .hfb-breadcrumbs .rank-math-breadcrumb .separator{ font-family:var(--hfb-mono) !important; font-size:.72rem !important; font-weight:600 !important; letter-spacing:.12em !important; text-transform:uppercase !important; color:var(--hfb-ink-soft) !important; text-decoration:none; } .hfb-breadcrumbs .rank-math-breadcrumb a{color:var(--hfb-amber-ink) !important;} .hfb-breadcrumbs .rank-math-breadcrumb .separator{margin:0 6px;color:#B7B0A3 !important;} /* tables, spec-sheet treatment, mono numerics */ .entry-content table{ border:1px solid var(--hfb-line); background-color:var(--hfb-panel); border-collapse:collapse; width:100%; } .entry-content table th{ font-family:var(--hfb-mono); font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--hfb-ink-soft); background-color:var(--hfb-panel2); text-align:left; } .entry-content table td, .entry-content table th{ border-color:var(--hfb-line); padding:13px 16px; } .entry-content table td{font-variant-numeric:tabular-nums;} /* wide comparison table: breaks out of the 790px reading column so a many-column table gets room. Centres on the viewport; on small screens it scrolls inside its own box so the page body never scrolls sideways. */ .hfb-wide-table{ position:relative; left:50%; transform:translateX(-50%); width:min(96vw,1160px); margin:1.6em 0; overflow-x:auto; -webkit-overflow-scrolling:touch; } .hfb-wide-table > table{min-width:780px;margin:0;} /* featured image: sane landscape crop rather than the tall native crop */ .post-top-featured, .wp-post-image{width:100%;height:auto;max-height:430px;object-fit:cover;object-position:center 25%;} /* These posts already render their lead image inside the article body, so Kadence's separate hero copy above the title is a second print of the same photo. Hide the hero, keep listing/card thumbnails untouched. */ .single-post .article-post-thumbnail, .single-post .post-top-featured{display:none;} /* related posts carousel, force brand palette over Kadence's own accent */ .entry-related, .entry-related-inner{background-color:var(--hfb-page) !important;} .entry-related-title{font-family:var(--hfb-display) !important;color:var(--hfb-ink) !important;} .entry-list-item, .entry-list-item a, .entry-list-item .entry-title{ background-color:var(--hfb-panel) !important; color:var(--hfb-ink) !important; border-color:var(--hfb-line) !important; } .entry-list-item a:hover, .entry-list-item .entry-title a:hover{color:var(--hfb-amber-ink) !important;} .splide__arrow, .splide__pagination__page.is-active{background-color:var(--hfb-amber) !important;} /* ========================================================================== 4. ARTICLE COMPONENTS (ported from ShelterGuru, reprefixed hfb-) ========================================================================== */ .hfb-article-toc{background:var(--hfb-panel);border:1px solid var(--hfb-line);border-radius:8px;padding:18px 26px;margin:0 0 28px;} .hfb-article-toc h3{margin:0 0 8px;font-size:1rem;} .hfb-article-toc ul{margin:0;padding-left:1.2em;} .hfb-article-toc a{color:var(--hfb-amber-ink);text-decoration:underline;} .hfb-checklist{background:var(--hfb-panel);border:1px solid var(--hfb-line);border-radius:8px;padding:18px 26px;margin:0 0 32px;} .hfb-checklist div{padding:5px 0;} .hfb-checklist input[type="checkbox"]{margin-right:10px;accent-color:var(--hfb-amber);width:17px;height:17px;vertical-align:middle;} .hfb-checklist label{cursor:pointer;} /* tip/note aside, full border, deliberately NOT a coloured left-rail card */ .hfb-tip-box{display:flex;gap:13px;background:var(--hfb-win);border:1px solid #E6C878;border-radius:10px;padding:17px 21px;margin:0 0 28px;} .hfb-tip-box-icon{flex:0 0 auto;color:var(--hfb-amber-ink);font-size:1.1em;line-height:1.4;} .hfb-tip-box-body strong.hfb-tip-box-title{display:block;font-family:var(--hfb-mono);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hfb-amber-ink);margin-bottom:5px;} .hfb-tip-box-body p{margin:0 0 6px;color:#40382a;} .hfb-tip-box-body p:last-child{margin-bottom:0;} .hfb-callout-group{background:var(--hfb-panel);border:1px solid var(--hfb-line);border-radius:8px;padding:4px 22px;margin:0 0 26px;} .hfb-callout-row{padding:14px 0;} .hfb-callout-row + .hfb-callout-row{border-top:1px solid var(--hfb-line);} .hfb-callout-label{display:block;font-family:var(--hfb-mono);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hfb-amber-ink);margin-bottom:4px;} .hfb-callout-row p{margin:0;color:var(--hfb-ink-soft);} .hfb-specs-panel{margin:1.5em 0;border:1px solid var(--hfb-line);border-radius:10px;overflow:hidden;} .hfb-specs-panel-head{background:var(--hfb-ink);color:#fff;padding:12px 18px;font-family:var(--hfb-mono);font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;} .hfb-specs-panel table{width:100%;border-collapse:collapse;font-size:.93rem;} .hfb-specs-panel td{padding:11px 18px;border-top:1px solid var(--hfb-line);} .hfb-specs-panel tr:first-child td{border-top:none;} .hfb-specs-panel td:first-child{font-family:var(--hfb-mono);font-size:.78rem;letter-spacing:.03em;color:var(--hfb-ink-soft);width:48%;} .hfb-specs-panel td:last-child{font-family:var(--hfb-display);font-weight:600;color:var(--hfb-ink);} /* How-to step sequence. Replaces a run of h3s: 8 near-identical headings for one paragraph each reads as heading soup and floods the document outline. Here the step number carries the sequence visually and the titles stay out of the outline, so the page scans as instructions instead of sections. */ .hfb-howto{margin:0 0 32px;} .hfb-howto-item{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:20px 0;border-top:1px solid var(--hfb-line);} .hfb-howto-item:first-child{border-top:none;padding-top:4px;} .hfb-howto-num{ width:34px;height:34px;border-radius:8px; background:var(--hfb-ink);color:var(--hfb-amber); font-family:var(--hfb-mono);font-size:.82rem;font-weight:700; display:grid;place-items:center;font-variant-numeric:tabular-nums; } .hfb-howto-title{ display:block;font-family:var(--hfb-display);font-weight:800; font-size:1.12rem;letter-spacing:-0.02em;color:var(--hfb-ink);margin-bottom:5px; } .hfb-howto-body p{margin:0;color:var(--hfb-ink-soft);} .hfb-howto-body p + p{margin-top:8px;} /* at-a-glance meta strip for guides (time / difficulty / tools) */ .hfb-meta-strip{ display:flex;flex-wrap:wrap;gap:0;margin:0 0 30px; border-top:1px solid var(--hfb-line);border-bottom:1px solid var(--hfb-line); font-family:var(--hfb-mono);font-size:.78rem; } .hfb-meta-item{padding:13px 18px;display:flex;flex-direction:column;gap:3px;} .hfb-meta-item:first-child{padding-left:0;} .hfb-meta-item + .hfb-meta-item{border-left:1px solid var(--hfb-line);} .hfb-meta-item .k{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--hfb-ink-soft);} .hfb-meta-item .v{color:var(--hfb-ink);font-weight:700;} /* internal funnel CTA (guide -> money hub) */ .hfb-next{ background:var(--hfb-panel);border:1px solid var(--hfb-line);border-radius:12px; padding:22px 24px;margin:32px 0;display:flex;align-items:center; justify-content:space-between;gap:20px;flex-wrap:wrap; } .hfb-next h3{font-size:1.1rem;font-weight:800;margin:0 0 4px;} .hfb-next p{margin:0;color:var(--hfb-ink-soft);font-size:.9rem;} .hfb-next a{ display:inline-flex;align-items:center;gap:8px;white-space:nowrap; font-family:var(--hfb-display);font-weight:700;font-size:.92rem; padding:11px 20px;border-radius:8px; background:var(--hfb-amber);color:var(--hfb-amber-on) !important;text-decoration:none; } .hfb-next a:hover{background:var(--hfb-amber-hover);} @media (max-width:600px){ .hfb-meta-item{padding:11px 14px;} .hfb-meta-item + .hfb-meta-item{border-left:none;border-top:1px solid var(--hfb-line);} .hfb-meta-strip{flex-direction:column;} } .hfb-image-pair{display:flex;gap:16px;margin:0 0 32px;} .hfb-image-pair .hfb-article-image{margin:0;flex:1 1 0;} .hfb-article-image{margin:0 0 32px;} .hfb-article-image img{width:100%;height:auto;border-radius:8px;display:block;} .hfb-video-embed{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0 0 28px;border-radius:8px;} .hfb-video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;} hr.hfb-divider{border:none;border-top:1px solid var(--hfb-line);margin:36px 0;} /* methodology/disclosure appended after content via functions.php */ .hfb-methode{max-width:790px;margin:44px auto 0;font-size:.86rem;color:var(--hfb-ink-soft);border-top:1px solid var(--hfb-line);padding-top:18px;line-height:1.65;} .hfb-methode strong{color:var(--hfb-ink);font-family:var(--hfb-display);} /* affiliate CTA row */ .hfb-aff{background:var(--hfb-panel);border:1px solid var(--hfb-line);border-radius:12px;padding:22px 24px;margin:6px 0 26px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;} .hfb-aff h3{font-size:1.12rem;font-weight:800;margin:0 0 4px;} .hfb-aff p{margin:0;color:var(--hfb-ink-soft);font-size:.89rem;} .hfb-aff .hfb-spons{font-family:var(--hfb-mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:#9a938a;margin-top:7px;} /* product-card variant: real product photo + info + tracked CTA */ .hfb-aff--product{align-items:center;} .hfb-aff-media{flex:0 0 auto;} .hfb-aff-media img{width:94px;height:94px;object-fit:contain;background:#fff;border:1px solid var(--hfb-line);border-radius:10px;padding:7px;display:block;} .hfb-aff-body{flex:1 1 230px;min-width:180px;} .hfb-aff-body p{margin:0;color:var(--hfb-ink-soft);font-size:.89rem;} .hfb-aff-body strong{color:var(--hfb-ink);} /* ========================================================================== 5. FRONT PAGE (templates/frontpage.php), scoped under .hfb-frontpage so it can never leak onto another page. Kadence header/footer still wrap it. ========================================================================== */ .hfb-frontpage{background:var(--hfb-page);} .hfb-frontpage .wrap{max-width:1140px;margin:0 auto;padding:0 34px;} .hfb-frontpage h1,.hfb-frontpage h2,.hfb-frontpage h3,.hfb-frontpage h4{font-family:var(--hfb-display);margin:0;color:var(--hfb-ink);} .hfb-frontpage a{text-decoration:none;} .hfb-frontpage img{max-width:100%;display:block;} .hfb-frontpage section{padding:76px 0;} .hfb-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--hfb-display);font-weight:700;font-size:.94rem;padding:12px 22px;border-radius:8px;background:var(--hfb-amber);color:var(--hfb-amber-on) !important;border:1px solid var(--hfb-amber);transition:background .15s ease;} .hfb-btn:hover{background:var(--hfb-amber-hover);} .hfb-btn--ghost{background:transparent;color:#fff !important;border-color:rgba(255,255,255,.3);} .hfb-btn--ghost:hover{background:rgba(255,255,255,.08);} .hfb-btn--dark{background:var(--hfb-ink);color:#fff !important;border-color:var(--hfb-ink);} .hfb-btn--dark:hover{background:#33373d;} /* dark bands carry a faint blueprint grid, never a gradient glow */ .hfb-band{ background-color:var(--hfb-graphite); background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:30px 30px; color:#fff; } .hfb-band h1,.hfb-band h2,.hfb-band h3{color:#fff;} .hfb-hero .wrap{padding:88px 34px 92px;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;} .hfb-hero h1{font-size:3.05rem;font-weight:800;line-height:1.05;margin-bottom:20px;} .hfb-hero p{color:#C4C7CC;font-size:1.1rem;max-width:46ch;margin:0 0 28px;} .hfb-hero-actions{display:flex;gap:13px;flex-wrap:wrap;} .hfb-hero-trust{margin-top:26px;font-family:var(--hfb-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#8b9096;} .hfb-hero-trust b{color:#e6e8ea;font-weight:600;} /* hero spec notecard, pinned slightly askew, straightens on hover */ .hfb-notecard{background:var(--hfb-panel);color:var(--hfb-ink);border-radius:12px;overflow:hidden;border:1px solid #d6d0c4;box-shadow:0 26px 60px -26px rgba(0,0,0,.7);transform:rotate(-1.5deg);transition:transform .3s cubic-bezier(.2,.7,.2,1);} .hfb-notecard:hover{transform:rotate(0);} .hfb-notecard-tab{background:var(--hfb-amber);color:var(--hfb-amber-on);font-family:var(--hfb-mono);font-weight:700;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;padding:8px 18px;display:flex;justify-content:space-between;} .hfb-notecard-body{padding:22px 24px 24px;} .hfb-notecard-cat{font-family:var(--hfb-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--hfb-ink-soft);} .hfb-notecard h3{font-size:1.5rem;font-weight:800;margin:6px 0 16px;} .hfb-specrow{display:flex;justify-content:space-between;padding:9px 0;border-top:1px dashed var(--hfb-line);font-family:var(--hfb-mono);font-size:.82rem;} .hfb-specrow:first-of-type{border-top:none;} .hfb-specrow span:first-child{color:var(--hfb-ink-soft);} .hfb-specrow span:last-child{color:var(--hfb-ink);font-weight:600;} .hfb-scorebar{height:8px;border-radius:999px;background:var(--hfb-line-soft);overflow:hidden;margin-top:16px;} .hfb-scorebar i{display:block;height:100%;background:var(--hfb-amber);border-radius:999px;} .hfb-scorelab{display:flex;justify-content:space-between;font-family:var(--hfb-mono);font-size:.72rem;color:var(--hfb-ink-soft);margin-top:7px;} .hfb-scorelab b{color:var(--hfb-ink);} .hfb-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:34px;} .hfb-sec-head h2{font-size:2rem;font-weight:800;} .hfb-morelink{font-family:var(--hfb-mono);font-weight:600;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--hfb-ink-soft) !important;} .hfb-morelink:hover{color:var(--hfb-amber-ink) !important;} .hfb-band-alt{background:var(--hfb-panel2);border-top:1px solid var(--hfb-line);border-bottom:1px solid var(--hfb-line);} /* featured guide */ .hfb-feature{display:grid;grid-template-columns:1.12fr .88fr;background:var(--hfb-panel);border:1px solid var(--hfb-line);border-radius:14px;overflow:hidden;} .hfb-feature-body{padding:42px 44px;} .hfb-flabel{font-family:var(--hfb-mono);font-size:.72rem;color:var(--hfb-ink-soft);display:inline-block;margin-bottom:11px;} .hfb-feature-body h3{font-size:1.85rem;font-weight:800;margin-bottom:14px;} .hfb-feature-body p{color:var(--hfb-ink-soft);margin:0 0 22px;} .hfb-feature-specs{display:flex;flex-wrap:wrap;margin:0 0 26px;font-family:var(--hfb-mono);font-size:.8rem;border-top:1px solid var(--hfb-line);padding-top:16px;} .hfb-fs{display:inline-flex;gap:6px;align-items:baseline;padding:0 15px;} .hfb-fs:first-child{padding-left:0;} .hfb-fs + .hfb-fs{border-left:1px solid var(--hfb-line);} .hfb-fs .v{color:var(--hfb-ink);font-weight:700;} .hfb-fs .k{color:var(--hfb-ink-soft);} .hfb-feature-side{padding:40px 38px;display:flex;flex-direction:column;justify-content:center;gap:12px;} .hfb-badge{align-self:flex-start;font-family:var(--hfb-mono);font-weight:700;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;background:var(--hfb-amber);color:var(--hfb-amber-on);padding:6px 12px;border-radius:5px;} .hfb-feature-side .hfb-winner{font-family:var(--hfb-display);font-weight:800;font-size:1.4rem;line-height:1.12;color:#fff;} .hfb-feature-side .hfb-winner small{display:block;font-family:var(--hfb-body);font-weight:400;font-size:.88rem;color:#b3b7bc;margin-top:6px;} /* category "drawer-label" cards, deliberately not icon tiles */ .hfb-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;} .hfb-cat{position:relative;background:var(--hfb-panel);border:1px solid var(--hfb-line);border-radius:11px;padding:24px 22px 20px;transition:transform .14s ease,box-shadow .14s ease;} .hfb-cat::before{content:"";position:absolute;top:16px;left:22px;width:22px;height:9px;background:var(--hfb-amber);border-radius:2px;} .hfb-cat:hover{transform:translateY(-3px);box-shadow:0 16px 30px -18px rgba(35,38,43,.4);} .hfb-cat h3{font-size:1.2rem;font-weight:800;margin:26px 0 6px;} .hfb-cat .hfb-cat-mat{font-family:var(--hfb-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--hfb-ink-soft);margin-bottom:12px;} .hfb-cat p{margin:0 0 16px;color:var(--hfb-ink-soft);font-size:.9rem;} .hfb-cat .hfb-cat-more{font-family:var(--hfb-mono);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--hfb-amber-ink);} /* review cards */ .hfb-reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .hfb-rev{background:var(--hfb-panel);border:1px solid var(--hfb-line);border-radius:11px;overflow:hidden;display:flex;flex-direction:column;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;} .hfb-rev:hover{transform:translateY(-3px);box-shadow:0 16px 30px -18px rgba(35,38,43,.42);border-color:#CFC9BD;} .hfb-rev-thumb{aspect-ratio:16/10;overflow:hidden;background-color:#E4E0D7;background-image:linear-gradient(rgba(35,38,43,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(35,38,43,.05) 1px,transparent 1px);background-size:22px 22px;position:relative;display:grid;place-items:center;border-bottom:1px solid var(--hfb-line);} .hfb-rev-thumb img{width:100%;height:100%;object-fit:cover;} .hfb-rev-thumb .hfb-rev-tag{position:absolute;left:12px;top:12px;background:var(--hfb-ink);color:#fff;font-family:var(--hfb-mono);font-weight:600;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:5px;} .hfb-rev-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1;} .hfb-rev-body h3{font-size:1.06rem;font-weight:700;line-height:1.3;margin-bottom:8px;} .hfb-rev-body h3 a{color:var(--hfb-ink);} .hfb-rev-body h3 a:hover{color:var(--hfb-amber-ink);} .hfb-rev-body p{margin:0 0 14px;color:var(--hfb-ink-soft);font-size:.87rem;flex:1;} .hfb-rev-meta{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--hfb-line);padding-top:11px;font-family:var(--hfb-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--hfb-ink-soft);} .hfb-rev-meta .hfb-read{color:var(--hfb-amber-ink);font-weight:600;} /* method band, a real sequence, so numbering carries meaning */ .hfb-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;} .hfb-step{border-top:1px solid rgba(255,255,255,.16);padding-top:18px;} .hfb-step .hfb-no{font-family:var(--hfb-mono);font-weight:600;font-size:.72rem;color:var(--hfb-amber);letter-spacing:.14em;} .hfb-step h3{font-size:1.12rem;font-weight:700;margin:8px 0;} .hfb-step p{margin:0;color:#a9adb2;font-size:.9rem;} .hfb-disc{margin-top:40px;font-family:var(--hfb-mono);font-size:.72rem;color:#8b9096;border-top:1px solid rgba(255,255,255,.14);padding-top:20px;max-width:80ch;line-height:1.7;} .hfb-closing{text-align:center;} .hfb-closing h2{font-size:2.15rem;font-weight:800;margin-bottom:13px;} .hfb-closing p{color:#C4C7CC;max-width:44ch;margin:0 auto 26px;} @media (max-width:900px){ .hfb-hero .wrap{grid-template-columns:1fr;gap:36px;padding:60px 34px;} .hfb-hero h1{font-size:2.25rem;} .hfb-feature{grid-template-columns:1fr;} .hfb-feature-body{padding:30px 26px;} .hfb-cats{grid-template-columns:1fr 1fr;} .hfb-reviews{grid-template-columns:1fr;} .hfb-steps{grid-template-columns:1fr;gap:22px;} .hfb-frontpage section{padding:54px 0;} .hfb-image-pair{flex-direction:column;} } @media (prefers-reduced-motion:reduce){ .hfb-notecard{transform:none;} .hfb-cat,.hfb-rev,.hfb-btn,.hfb-notecard{transition:none;} }