/* Theme Name: The Wooden Stars Theme URI: https://thewoodenstars.com/ Author: The Wooden Stars Description: Solid-wood furniture affiliate theme. Intent-layered architecture (Fix → Part → Wood → Size → Dupe → Buy), wood-species spec cards, dimension tables, a doorway-fit calculator, Amazon Add-to-Cart links for high-consideration purchases, and Associates compliance built into the components. No CDN, no build step, no flash of unstyled content. Version: 1.0.0 Requires at least: 6.5 Tested up to: 7.1 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: thewoodenstars Tags: blog, two-columns, right-sidebar, custom-menu, featured-images, dark-mode, translation-ready */ /* ========================================================================== 1. Design tokens Palette rationale — the site is named for wood, so the neutral ramp is warm (hue ~40deg, low chroma) instead of the blue-slate default. Three accents, each with exactly one job: moss — navigation, links, active state, primary buttons oak — spec/dimension data, wood-species chips, editorial ratings amazon— buy buttons only, so "this leaves the site" is unmistakable ========================================================================== */ :root { /* moss — primary accent */ --moss-50:#eef4f0; --moss-100:#d7e7dd; --moss-400:#6fb98c; --moss-500:#3e8c5f; --moss-600:#2c6b4f; --moss-700:#22563f; --moss-900:#143426; /* oak — data, species chips, ratings */ --oak-50:#fbf6ec; --oak-100:#f4e9d5; --oak-200:#e7d3ad; --oak-400:#d3a15e; --oak-500:#be8542; --oak-600:#a06b31; --oak-700:#7c5124; /* clay — negatives, warnings */ --clay-500:#a6402f; --clay-400:#c86a58; --amazon:#ff9900; --amazon-hover:#e38800; /* w — warm neutral ramp */ --w-50:#faf8f4; --w-100:#f3f0e9; --w-200:#e6e1d6; --w-300:#d2caba; --w-400:#a79c88; --w-500:#7c7361; --w-600:#5c5546; --w-700:#423d33; --w-800:#2b2823; --w-900:#1c1a16; --w-950:#100f0d; /* semantic — light */ --bg: var(--w-50); --bg-surface: #ffffff; --bg-sunken: var(--w-100); --bg-inverse: var(--w-900); --text: var(--w-700); --text-strong: var(--w-900); --text-muted: var(--w-500); --text-onbrand: #ffffff; --border: var(--w-200); --border-strong: var(--w-300); --accent: var(--moss-600); --accent-hover: var(--moss-500); --accent-soft: var(--moss-50); --good: var(--moss-600); --bad: var(--clay-500); --shadow-sm: 0 1px 2px rgba(28,26,22,.06); --shadow-md: 0 4px 14px rgba(28,26,22,.09); --shadow-lg: 0 12px 32px rgba(28,26,22,.14); --container: 78rem; /* Tighter than the stock .75rem — furniture reads as joinery, not as an app. */ --radius: .375rem; --radius-sm: .25rem; --font-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --font-head: 'Newsreader', Georgia, 'Times New Roman', serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } html.dark { --bg: var(--w-900); --bg-surface: var(--w-800); --bg-sunken: var(--w-950); --bg-inverse: var(--w-950); --text: var(--w-300); --text-strong: #f7f4ee; --text-muted: var(--w-400); --border: var(--w-700); --border-strong: var(--w-600); --accent: var(--moss-400); --accent-hover: var(--moss-500); --accent-soft: rgba(44,107,79,.30); --good: var(--moss-400); --bad: var(--clay-400); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 14px rgba(0,0,0,.45); --shadow-lg: 0 12px 32px rgba(0,0,0,.55); } /* ========================================================================== 2. Reset & base ========================================================================== */ *,*::before,*::after{box-sizing:border-box} /* The background is set on as well as . Relying on body's background propagating to the canvas leaves a light strip behind the overscroll bounce on iOS in dark mode. color-scheme additionally themes native scrollbars, form controls and the caret. */ html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg);color-scheme:light} html.dark{color-scheme:dark} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } body{ margin:0;min-height:100vh;display:flex;flex-direction:column; font-family:var(--font-sans);font-size:1rem;line-height:1.6; background:var(--bg);color:var(--text); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } img,svg,video{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} button,input,textarea,select{font:inherit;color:inherit} h1,h2,h3,h4,h5,h6{font-family:var(--font-head);color:var(--text-strong);margin:0;line-height:1.2;font-weight:700} p{margin:0} ul,ol{margin:0;padding:0} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px} ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--w-300);border-radius:4px} html.dark ::-webkit-scrollbar-thumb{background:var(--w-600)} /* ========================================================================== 3. Helpers ========================================================================== */ .tws-container{max-width:var(--container);margin-inline:auto;padding-inline:1rem} @media (min-width:640px){.tws-container{padding-inline:1.5rem}} @media (min-width:1024px){.tws-container{padding-inline:2rem}} .screen-reader-text{ position:absolute!important;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 } .tws-skip-link{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--accent);color:#fff;padding:.75rem 1.25rem;font-weight:700;border-radius:0 0 var(--radius-sm) 0 } .tws-skip-link:focus{left:0} .tws-clamp-2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .tws-clamp-3{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .tws-icon{width:1em;height:1em;fill:currentColor;flex:none} /* ========================================================================== 4. Announcement bar ========================================================================== */ .tws-announce{ background:var(--w-900);color:#fff;font-size:.75rem;text-align:center;padding:.5rem 1rem } html.dark .tws-announce{background:var(--w-950)} .tws-announce a{color:var(--amazon);font-weight:700} .tws-announce a:hover{text-decoration:underline} /* ========================================================================== 5. Header ========================================================================== */ .tws-header{ position:sticky;top:0;z-index:50; background:var(--bg-surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm) } html.dark .tws-header{background:var(--w-900)} .tws-header__bar{display:flex;align-items:center;justify-content:space-between;height:5rem;gap:1rem} .tws-logo{font-family:var(--font-head);font-size:1.5rem;font-weight:900;letter-spacing:-.025em;color:var(--text-strong);white-space:nowrap} .tws-logo span{color:var(--moss-500)} .tws-logo img{max-height:3rem;width:auto} .tws-nav{display:none;gap:2rem} @media (min-width:768px){.tws-nav{display:flex}} .tws-nav ul{display:flex;gap:2rem;list-style:none} .tws-nav a{font-weight:500;color:var(--text);padding-block:.25rem;border-bottom:2px solid transparent;transition:color .2s,border-color .2s} .tws-nav a:hover{color:var(--accent)} .tws-nav .current-menu-item>a,.tws-nav .current_page_item>a,.tws-nav .current-menu-ancestor>a{ color:var(--accent);font-weight:600;border-bottom-color:var(--moss-500) } .tws-header__actions{display:flex;align-items:center;gap:1rem} .tws-iconbtn{ background:none;border:0;padding:.25rem;cursor:pointer;color:var(--text-muted); font-size:1.25rem;line-height:1;display:inline-flex;align-items:center;transition:color .2s } .tws-iconbtn:hover{color:var(--accent)} .tws-iconbtn--menu{font-size:1.5rem} @media (min-width:768px){.tws-iconbtn--menu{display:none}} .tws-iconbtn--search{display:none} @media (min-width:640px){.tws-iconbtn--search{display:inline-flex}} /* search drawer */ .tws-searchbar{display:none;border-top:1px solid var(--border);background:var(--bg-surface);padding:1rem 0} .tws-searchbar.is-open{display:block} .tws-searchform{display:flex;gap:.5rem} .tws-searchform input[type=search]{ flex:1;background:var(--bg);border:1px solid var(--border-strong);border-radius:var(--radius-sm); padding:.625rem .875rem;font-size:.9375rem } .tws-searchform button{ background:var(--moss-600);color:#fff;border:0;border-radius:var(--radius-sm); padding:.625rem 1.25rem;font-weight:700;cursor:pointer;transition:background .2s } .tws-searchform button:hover{background:var(--moss-500)} /* mobile menu */ .tws-mobilemenu{display:none;border-top:1px solid var(--border);background:var(--bg-surface);box-shadow:var(--shadow-lg)} .tws-mobilemenu.is-open{display:block} @media (min-width:768px){.tws-mobilemenu,.tws-mobilemenu.is-open{display:none}} .tws-mobilemenu ul{list-style:none;padding:.5rem;display:flex;flex-direction:column;gap:.25rem} .tws-mobilemenu a{display:block;padding:.625rem .75rem;border-radius:var(--radius-sm);font-weight:500;transition:background .2s,color .2s} .tws-mobilemenu a:hover{color:var(--accent)} .tws-mobilemenu .current-menu-item>a,.tws-mobilemenu .current_page_item>a{background:var(--accent-soft);color:var(--accent);font-weight:600} /* ========================================================================== 6. Hero grid ========================================================================== */ .tws-hero{display:grid;grid-template-columns:1fr;gap:.25rem;border-radius:var(--radius);overflow:hidden} @media (min-width:640px){.tws-hero{grid-template-columns:repeat(2,1fr)}} @media (min-width:1024px){.tws-hero{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);height:500px}} .tws-hero__item{position:relative;overflow:hidden;background:var(--w-900);display:block;min-height:200px} .tws-hero__item--lead{min-height:350px} @media (min-width:640px){ .tws-hero__item--lead{grid-column:span 2} .tws-hero__item--wide{grid-column:span 2} } @media (min-width:1024px){ .tws-hero__item{min-height:0} .tws-hero__item--lead{grid-column:span 2;grid-row:span 2} .tws-hero__item--wide{grid-column:span 2;grid-row:span 1} .tws-hero__item--small{grid-column:span 1;grid-row:span 1} } /* secondary tiles hidden on the narrowest screens, as in the design */ .tws-hero__item--secondary{display:none} @media (min-width:640px){.tws-hero__item--secondary{display:block}} .tws-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8;transition:opacity .7s,transform .7s} .tws-hero__item:hover .tws-hero__img{opacity:1;transform:scale(1.05)} .tws-hero__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.4) 50%,transparent)} .tws-hero__body{position:absolute;inset-inline:0;bottom:0;z-index:10;padding:1.25rem;color:#fff;display:flex;flex-direction:column} @media (min-width:768px){.tws-hero__item--lead .tws-hero__body{padding:2rem}.tws-hero__item--wide .tws-hero__body{padding:1.5rem}} .tws-hero__title{color:#fff;font-weight:700;line-height:1.15;text-shadow:0 2px 6px rgba(0,0,0,.45);transition:color .2s} .tws-hero__item:hover .tws-hero__title{color:var(--moss-400)} .tws-hero__item--lead .tws-hero__title{font-size:1.5rem;margin-bottom:.75rem} @media (min-width:768px){.tws-hero__item--lead .tws-hero__title{font-size:1.875rem}} @media (min-width:1024px){.tws-hero__item--lead .tws-hero__title{font-size:2.25rem}} .tws-hero__item--wide .tws-hero__title{font-size:1.25rem;margin-bottom:.25rem} @media (min-width:768px){.tws-hero__item--wide .tws-hero__title{font-size:1.5rem}} .tws-hero__item--small .tws-hero__title{font-size:1rem} .tws-hero__meta{font-size:.75rem;color:var(--w-300);font-weight:500} .tws-hero__meta strong{color:#fff} .tws-eyebrow{ display:inline-block;width:fit-content;background:rgba(28,26,22,.88);color:#fff; font-size:.625rem;text-transform:uppercase;font-weight:700;letter-spacing:.05em; padding:.25rem .5rem;margin-bottom:.5rem;box-shadow:var(--shadow-sm) } .tws-hero__item--lead .tws-eyebrow{margin-bottom:.75rem} /* ========================================================================== 7. Category quick links ========================================================================== */ .tws-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem} @media (min-width:768px){.tws-cats{grid-template-columns:repeat(5,1fr);gap:1rem}} .tws-cat{ display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius); padding:1rem;transition:border-color .2s,box-shadow .2s } .tws-cat:hover{box-shadow:var(--shadow-md);border-color:var(--c,var(--moss-500))} .tws-cat__icon{ width:3rem;height:3rem;border-radius:9999px;display:flex;align-items:center;justify-content:center; font-size:1.25rem;margin-bottom:.5rem;background:var(--c-soft);color:var(--c);transition:background .2s,color .2s } .tws-cat:hover .tws-cat__icon{background:var(--c);color:#fff} .tws-cat__name{font-family:var(--font-head);font-weight:700;font-size:.875rem;color:var(--text-strong)} /* Eight hub tones. Not eight arbitrary hues — the ramp walks moss → oak so the row reads as one material family, and the two non-furniture hubs (wood care, wood types) sit at the oak end where the species chips live. */ .tws-cat--1{--c:var(--moss-700);--c-soft:var(--moss-50)} .tws-cat--2{--c:var(--moss-600);--c-soft:var(--moss-50)} .tws-cat--3{--c:var(--moss-500);--c-soft:var(--moss-50)} .tws-cat--4{--c:#4f7a4a;--c-soft:#eff3ec} .tws-cat--5{--c:#6d7d3f;--c-soft:#f2f4e8} .tws-cat--6{--c:var(--oak-600);--c-soft:var(--oak-50)} .tws-cat--7{--c:var(--oak-500);--c-soft:var(--oak-50)} .tws-cat--8{--c:var(--clay-500);--c-soft:#f9ece8} html.dark .tws-cat--1{--c:var(--moss-400);--c-soft:rgba(44,107,79,.30)} html.dark .tws-cat--2{--c:var(--moss-400);--c-soft:rgba(44,107,79,.30)} html.dark .tws-cat--3{--c:#7fc79a;--c-soft:rgba(44,107,79,.24)} html.dark .tws-cat--4{--c:#8fbb85;--c-soft:rgba(79,122,74,.28)} html.dark .tws-cat--5{--c:#adbd77;--c-soft:rgba(109,125,63,.28)} html.dark .tws-cat--6{--c:var(--oak-400);--c-soft:rgba(160,107,49,.28)} html.dark .tws-cat--7{--c:var(--oak-400);--c-soft:rgba(160,107,49,.28)} html.dark .tws-cat--8{--c:var(--clay-400);--c-soft:rgba(166,64,47,.28)} /* ========================================================================== 8. Layout: content + sidebar ========================================================================== */ .tws-layout{display:flex;flex-direction:column;gap:2rem} @media (min-width:1024px){.tws-layout{flex-direction:row}} /* Percentage widths that sum to 100% overflow once the gap is added, and flexbox then shrinks both columns to an even split. A fixed sidebar with a flexible content column gives the intended 2/3–1/3 proportion and a stable reading measure at every width. min-width:0 lets the content column shrink below the intrinsic width of wide children (tables). */ .tws-content{width:100%;min-width:0;display:flex;flex-direction:column;gap:3rem} .tws-sidebar{width:100%;min-width:0;display:flex;flex-direction:column;gap:2rem} @media (min-width:1024px){ .tws-content{flex:1 1 auto;width:auto} .tws-sidebar{flex:0 0 21rem;width:21rem} } @media (min-width:1280px){ .tws-sidebar{flex-basis:23rem;width:23rem} } .tws-sectionhead{ display:flex;align-items:center;justify-content:space-between;gap:1rem; margin-bottom:1.25rem;padding-bottom:.5rem;border-bottom:2px solid var(--border) } .tws-sectionhead h2{font-size:1.5rem;display:flex;align-items:center;gap:.75rem} .tws-sectionhead--sm h2{font-size:1.25rem;gap:.5rem} .tws-sectionhead__badge{ width:2rem;height:2rem;border-radius:var(--radius-sm);display:inline-flex;align-items:center; justify-content:center;font-size:.875rem;color:#fff;background:var(--badge,var(--moss-500));flex:none } .tws-sectionhead__icon{color:var(--w-400);font-size:1.125rem} .tws-sectionhead__more{font-size:.8125rem;font-weight:700;color:var(--accent);white-space:nowrap} .tws-sectionhead__more:hover{text-decoration:underline} /* ========================================================================== 9. Article cards ========================================================================== */ .tws-grid-2{display:grid;grid-template-columns:1fr;gap:1.5rem} @media (min-width:768px){.tws-grid-2{grid-template-columns:repeat(2,1fr)}} .tws-stack{display:flex;flex-direction:column;gap:1rem} .tws-split{display:grid;grid-template-columns:1fr;gap:2rem} @media (min-width:768px){.tws-split{grid-template-columns:repeat(2,1fr)}} /* card: image on top */ .tws-card{ display:flex;flex-direction:column;overflow:hidden; background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm); transition:box-shadow .2s } .tws-card:hover{box-shadow:var(--shadow-md)} .tws-card__media{display:block;position:relative;overflow:hidden;height:12rem;background:var(--bg-sunken)} .tws-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .tws-card:hover .tws-card__media img{transform:scale(1.05)} .tws-card__body{padding:1.25rem;display:flex;flex-direction:column;flex:1;gap:.5rem} .tws-card__title{font-size:1.125rem;line-height:1.25;transition:color .2s} .tws-card:hover .tws-card__title{color:var(--accent)} .tws-card__excerpt{font-size:.875rem;color:var(--text-muted)} .tws-card__meta{font-size:.75rem;color:var(--text-muted);margin-top:auto} /* card: horizontal */ .tws-card--row{flex-direction:column} @media (min-width:640px){ .tws-card--row{flex-direction:row} .tws-card--row .tws-card__media{width:40%;height:auto;flex:none} .tws-card--row .tws-card__body{width:60%;justify-content:center} } .tws-card--row .tws-card__media{height:12rem} .tws-card--row .tws-card__title{font-size:1.25rem} .tws-ribbon{ position:absolute;top:.5rem;left:.5rem;z-index:10; background:var(--moss-500);color:#fff;font-size:.625rem;font-weight:700; text-transform:uppercase;padding:.25rem .5rem;border-radius:.25rem;box-shadow:var(--shadow-sm) } .tws-readmore{display:inline-flex;align-items:center;gap:.25rem;font-size:.875rem;font-weight:700;color:var(--accent)} .tws-readmore:hover{text-decoration:underline} .tws-readmore .tws-icon{font-size:.625rem} /* card: tiny horizontal (thumb + title) */ .tws-mini{display:flex;gap:1rem;align-items:center} .tws-mini__media{width:6rem;height:6rem;flex:none;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-sunken)} .tws-mini__media img{width:100%;height:100%;object-fit:cover;transition:transform .3s} .tws-mini:hover .tws-mini__media img{transform:scale(1.1)} .tws-mini__title{font-family:var(--font-sans);font-size:.875rem;font-weight:700;line-height:1.25;margin-bottom:.25rem;transition:color .2s} .tws-mini:hover .tws-mini__title{color:var(--accent)} .tws-mini__meta{font-size:.75rem;color:var(--text-muted)} /* ========================================================================== 10. Feature (woodworking-style) masonry ========================================================================== */ .tws-feature{display:grid;grid-template-columns:1fr;gap:1rem} @media (min-width:768px){.tws-feature{grid-template-columns:repeat(12,1fr)}} .tws-feature__main{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--w-900);min-height:280px;box-shadow:var(--shadow-sm)} @media (min-width:640px){.tws-feature__main{min-height:350px}} @media (min-width:768px){.tws-feature__main{grid-column:span 8}} .tws-feature__side{display:none;flex-direction:column;gap:1rem} @media (min-width:640px){.tws-feature__side{display:flex}} @media (min-width:768px){.tws-feature__side{grid-column:span 4}} .tws-feature__sub{position:relative;flex:1;overflow:hidden;border-radius:var(--radius);background:var(--w-900);min-height:160px;box-shadow:var(--shadow-sm)} .tws-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8;transition:opacity .7s,transform .7s} .tws-feature__main:hover img,.tws-feature__sub:hover img{opacity:1;transform:scale(1.05)} .tws-feature__scrim{position:absolute;inset:0;z-index:10;background:linear-gradient(to top,var(--w-900),rgba(28,26,22,.6) 50%,transparent)} .tws-feature__sub .tws-feature__scrim{background:linear-gradient(to top,var(--w-900),rgba(28,26,22,.4) 50%,transparent)} .tws-feature__body{position:absolute;inset-inline:0;bottom:0;z-index:20;padding:1.25rem} @media (min-width:640px){.tws-feature__main .tws-feature__body{padding:1.5rem}} .tws-feature__sub .tws-feature__body{padding:1rem} .tws-feature__title{color:#fff;line-height:1.2;transition:color .2s} .tws-feature__main .tws-feature__title{font-size:1.25rem;margin-bottom:.5rem} @media (min-width:640px){.tws-feature__main .tws-feature__title{font-size:1.5rem}} .tws-feature__sub .tws-feature__title{font-size:.875rem} .tws-feature__main:hover .tws-feature__title,.tws-feature__sub:hover .tws-feature__title{color:var(--oak-400)} .tws-feature__excerpt{display:none;color:var(--w-300);font-size:.875rem;max-width:36rem;margin-bottom:.75rem} @media (min-width:640px){.tws-feature__excerpt{display:block}} .tws-tag{ display:inline-block;font-size:.625rem;font-weight:700;text-transform:uppercase; padding:.25rem .5rem;border-radius:.25rem;margin-bottom:.75rem;color:#fff;background:var(--clay-500);box-shadow:var(--shadow-sm) } .tws-tag--muted{background:rgba(28,26,22,.8);font-size:.5625rem;padding:.125rem .375rem;margin-bottom:.375rem} /* ========================================================================== 11. Sidebar widgets ========================================================================== */ .tws-widget{ background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius); padding:1.5rem;box-shadow:var(--shadow-sm) } .tws-widget__title{ font-size:1.125rem;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid var(--border) } .tws-widget ul{list-style:none;display:flex;flex-direction:column;gap:.5rem} .tws-widget li a:hover{color:var(--accent)} .tws-widget--sticky{position:sticky;top:6rem} /* Doorway-fit calculator (replaces the DIY theme's AI "Ask the Expert" widget, which could not render without an Anthropic API key). Runs entirely client-side, so it works on a fresh install with no config. */ .tws-fit{background:var(--w-900);color:#fff;border-color:var(--w-800);position:relative;overflow:hidden} html.dark .tws-fit{background:var(--w-950)} .tws-fit__deco{position:absolute;top:0;right:0;padding:1rem;opacity:.12;font-size:3.5rem;pointer-events:none} .tws-fit__title{color:#fff;font-size:1.125rem;display:flex;align-items:center;gap:.5rem;margin-bottom:.375rem} .tws-fit__title .tws-icon{color:var(--oak-400)} .tws-fit__hint{font-size:.75rem;color:var(--w-400);margin-bottom:1rem} .tws-fit__row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.5rem} .tws-fit label{display:block;font-size:.625rem;text-transform:uppercase;letter-spacing:.08em;color:var(--w-400);margin-bottom:.25rem;font-weight:700} .tws-fit input{ width:100%;background:var(--w-800);border:1px solid var(--w-700);color:#fff; border-radius:var(--radius-sm);padding:.5rem .625rem;font-family:var(--font-mono); font-size:.875rem;font-variant-numeric:tabular-nums } html.dark .tws-fit input{background:var(--w-900)} .tws-fit input:focus{outline:2px solid var(--moss-400);outline-offset:0;border-color:transparent} .tws-fit__submit{ margin-top:.5rem;width:100%;background:var(--moss-600);color:#fff;border:0;border-radius:var(--radius-sm); padding:.5rem;font-weight:700;font-size:.875rem;cursor:pointer;transition:background .2s } .tws-fit__submit:hover{background:var(--moss-500)} .tws-fit__out{ margin-top:1rem;padding:.75rem;background:var(--w-800);border-left:3px solid var(--moss-400); border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:.875rem;color:var(--w-300) } html.dark .tws-fit__out{background:var(--w-900)} .tws-fit__out[hidden]{display:none} .tws-fit__out.is-no{border-left-color:var(--clay-400)} .tws-fit__out.is-tilt{border-left-color:var(--oak-400)} .tws-fit__out b{color:#fff;display:block;margin-bottom:.25rem;font-family:var(--font-head);font-size:1rem} .tws-fit__note{margin-top:.75rem;font-size:.6875rem;color:var(--w-500);line-height:1.5} /* Disclosure */ .tws-disclosure{ background:var(--oak-50);border:1px solid var(--oak-200);color:var(--w-700); border-radius:var(--radius);padding:1.25rem;font-size:.75rem;line-height:1.6 } html.dark .tws-disclosure{background:rgba(160,107,49,.14);border-color:rgba(160,107,49,.45);color:rgba(240,226,200,.85)} .tws-disclosure__head{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;font-weight:700;font-size:.875rem;color:var(--oak-700)} html.dark .tws-disclosure__head{color:var(--oak-500)} .tws-disclosure--inline{margin-bottom:1.5rem;padding:.75rem 1rem} /* Newsletter */ .tws-newsletter{background:var(--moss-50);border-color:var(--moss-100);text-align:center} html.dark .tws-newsletter{background:rgba(44,107,79,.14);border-color:rgba(44,107,79,.45)} .tws-newsletter .tws-icon{font-size:1.875rem;color:var(--moss-500);margin:0 auto .75rem} .tws-newsletter h3{font-size:1.125rem;color:var(--moss-900);margin-bottom:.5rem} html.dark .tws-newsletter h3{color:var(--moss-100)} .tws-newsletter p{font-size:.75rem;color:var(--text-muted);margin-bottom:1rem} .tws-newsletter form{display:flex;flex-direction:column;gap:.5rem} .tws-newsletter input{ width:100%;background:var(--bg-surface);border:1px solid var(--border-strong); border-radius:.25rem;padding:.5rem .75rem;font-size:.875rem } .tws-newsletter button{ width:100%;background:var(--moss-600);color:#fff;border:0;border-radius:.25rem; padding:.5rem;font-weight:700;font-size:.875rem;cursor:pointer;transition:background .2s } .tws-newsletter button:hover{background:var(--moss-700)} /* Top rated list */ .tws-toplist{display:flex;flex-direction:column;gap:1rem} .tws-toplist__item{display:flex;align-items:flex-start;gap:.75rem} .tws-toplist__media{width:4rem;height:4rem;flex:none;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-sunken)} .tws-toplist__media img{width:100%;height:100%;object-fit:cover;transition:transform .3s} .tws-toplist__item:hover .tws-toplist__media img{transform:scale(1.1)} .tws-toplist__title{font-family:var(--font-sans);font-size:.875rem;font-weight:700;line-height:1.25;color:var(--text-strong)} .tws-toplist__item:hover .tws-toplist__title{color:var(--accent)} .tws-rating{display:flex;align-items:center;gap:.125rem;font-size:.75rem;color:var(--amazon);margin-top:.25rem} .tws-rating__label{color:var(--text-muted);margin-left:.375rem;font-size:.6875rem} /* ========================================================================== 12. Affiliate components (post content) ========================================================================== */ .tws-btn-amazon{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; background:var(--amazon);color:#111;font-weight:700;font-size:.9375rem; padding:.75rem 1.5rem;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm); transition:background .2s,transform .1s } .tws-btn-amazon:hover{background:var(--amazon-hover);color:#111} .tws-btn-amazon:active{transform:translateY(1px)} .tws-btn-amazon--block{display:flex;width:100%} .tws-product{ border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-surface); padding:1.25rem;margin-block:1.75rem;box-shadow:var(--shadow-sm); display:grid;grid-template-columns:1fr;gap:1.25rem } @media (min-width:640px){.tws-product{grid-template-columns:200px 1fr;align-items:start}} .tws-product__media{border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-sunken)} .tws-product__award{ display:inline-block;background:var(--moss-600);color:#fff;font-size:.6875rem;font-weight:700; text-transform:uppercase;letter-spacing:.04em;padding:.25rem .625rem;border-radius:9999px;margin-bottom:.5rem } .tws-product__name{font-size:1.25rem;margin-bottom:.5rem} .tws-product__cols{display:grid;grid-template-columns:1fr;gap:1rem;margin-block:1rem} @media (min-width:640px){.tws-product__cols{grid-template-columns:repeat(2,1fr)}} .tws-product__cols h4{font-size:.8125rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.375rem} .tws-pros h4{color:var(--good)} .tws-cons h4{color:var(--bad)} .tws-product ul{list-style:none;display:flex;flex-direction:column;gap:.25rem;font-size:.875rem} .tws-product li{padding-left:1.25rem;position:relative} .tws-pros li::before{content:"✓";position:absolute;left:0;color:var(--good);font-weight:700} .tws-cons li::before{content:"✕";position:absolute;left:0;color:var(--bad);font-weight:700} .tws-table-wrap{overflow-x:auto;margin-block:1.75rem;-webkit-overflow-scrolling:touch} .tws-table{width:100%;border-collapse:collapse;font-size:.875rem;min-width:34rem} .tws-table th,.tws-table td{padding:.75rem;text-align:left;border-bottom:1px solid var(--border);vertical-align:middle} .tws-table thead th{background:var(--bg-sunken);font-family:var(--font-head);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-strong)} .tws-table tbody tr:hover{background:var(--bg-sunken)} /* ========================================================================== 13. Single post / page ========================================================================== */ .tws-breadcrumb{font-size:.8125rem;color:var(--text-muted);margin-bottom:1rem} .tws-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.375rem;align-items:center} .tws-breadcrumb a:hover{color:var(--accent);text-decoration:underline} .tws-breadcrumb li+li::before{content:"/";margin-right:.375rem;color:var(--border-strong)} .tws-article{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-sm)} @media (min-width:768px){.tws-article{padding:2.5rem}} .tws-article__title{font-size:1.875rem;line-height:1.15;margin-bottom:.75rem} @media (min-width:768px){.tws-article__title{font-size:2.5rem}} .tws-article__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;font-size:.8125rem;color:var(--text-muted);margin-bottom:1.5rem} .tws-article__meta strong{color:var(--text-strong)} .tws-article__thumb{border-radius:var(--radius);overflow:hidden;margin-bottom:1.75rem} .tws-prose{font-size:1.0625rem;line-height:1.75} .tws-prose > * + *{margin-top:1.25rem} .tws-prose h2{font-size:1.625rem;margin-top:2.5rem;scroll-margin-top:6rem} .tws-prose h3{font-size:1.3125rem;margin-top:2rem;scroll-margin-top:6rem} .tws-prose h4{font-size:1.0625rem;margin-top:1.5rem} .tws-prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px} .tws-prose a:hover{color:var(--accent-hover)} .tws-prose ul,.tws-prose ol{padding-left:1.5rem;display:flex;flex-direction:column;gap:.5rem} .tws-prose ul{list-style:disc} .tws-prose ol{list-style:decimal} .tws-prose img{border-radius:var(--radius);margin-inline:auto} .tws-prose figure{margin:1.75rem 0} .tws-prose figcaption{font-size:.8125rem;color:var(--text-muted);text-align:center;margin-top:.5rem} .tws-prose blockquote{ border-left:4px solid var(--moss-500);background:var(--bg-sunken); padding:1rem 1.25rem;border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-style:italic } .tws-prose code{background:var(--bg-sunken);padding:.125rem .375rem;border-radius:.25rem;font-size:.9em} .tws-prose pre{background:var(--w-900);color:var(--w-100);padding:1rem;border-radius:var(--radius);overflow-x:auto} .tws-prose pre code{background:none;padding:0} .tws-prose table{width:100%;border-collapse:collapse;font-size:.9375rem} .tws-prose th,.tws-prose td{border:1px solid var(--border);padding:.625rem} .tws-prose th{background:var(--bg-sunken)} .tws-toc{background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;margin-block:1.75rem} .tws-toc__title{font-size:.9375rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem} .tws-toc ol{list-style:decimal;padding-left:1.25rem;display:flex;flex-direction:column;gap:.375rem;font-size:.9375rem} .tws-toc a:hover{color:var(--accent);text-decoration:underline} .tws-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem} .tws-tags a{ font-size:.75rem;font-weight:600;background:var(--bg-sunken);border:1px solid var(--border); padding:.25rem .625rem;border-radius:9999px;color:var(--text-muted) } .tws-tags a:hover{color:var(--accent);border-color:var(--accent)} .tws-authorbox{ display:flex;gap:1rem;align-items:flex-start;margin-top:2rem;padding:1.25rem; background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--radius) } .tws-authorbox img{border-radius:9999px;flex:none} .tws-authorbox h3{font-size:1rem;margin-bottom:.25rem} .tws-authorbox p{font-size:.875rem;color:var(--text-muted)} .tws-postnav{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2rem} @media (min-width:640px){.tws-postnav{grid-template-columns:repeat(2,1fr)}} .tws-postnav a{ display:block;padding:1rem;background:var(--bg-surface);border:1px solid var(--border); border-radius:var(--radius);transition:border-color .2s } .tws-postnav a:hover{border-color:var(--accent)} .tws-postnav span{display:block;font-size:.6875rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:.25rem} .tws-postnav strong{font-family:var(--font-head);font-size:.9375rem;color:var(--text-strong)} .tws-postnav .is-next{text-align:right} .tws-related{margin-top:3rem} /* ========================================================================== 14. Archive / pagination / 404 ========================================================================== */ .tws-pagehead{margin-bottom:2rem} .tws-pagehead h1{font-size:2rem;margin-bottom:.5rem} @media (min-width:768px){.tws-pagehead h1{font-size:2.5rem}} .tws-pagehead p{color:var(--text-muted)} .tws-pagination{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:2.5rem} .tws-pagination .page-numbers{ display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;height:2.5rem; padding-inline:.75rem;border:1px solid var(--border);border-radius:var(--radius-sm); background:var(--bg-surface);font-weight:600;font-size:.875rem;transition:border-color .2s,background .2s } .tws-pagination .page-numbers:hover{border-color:var(--accent);color:var(--accent)} .tws-pagination .page-numbers.current{background:var(--moss-600);border-color:var(--moss-600);color:#fff} .tws-pagination .dots{border-color:transparent;background:none} .tws-empty{text-align:center;padding:4rem 1rem} .tws-empty h1{font-size:4rem;color:var(--moss-500);margin-bottom:.5rem} .tws-empty p{color:var(--text-muted);margin-bottom:1.5rem} /* ========================================================================== 15. Comments ========================================================================== */ .tws-comments{margin-top:3rem} .tws-comments ol{list-style:none} .tws-comments .children{list-style:none;padding-left:1.5rem;margin-top:1rem} .tws-comments li{margin-bottom:1.25rem} .tws-comments .comment-body{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem} .tws-comments .comment-meta{font-size:.8125rem;color:var(--text-muted);margin-bottom:.5rem} .tws-comments .comment-author img{border-radius:9999px;display:inline-block;vertical-align:middle;margin-right:.5rem} .tws-comments input[type=text],.tws-comments input[type=email],.tws-comments input[type=url],.tws-comments textarea{ width:100%;background:var(--bg-surface);border:1px solid var(--border-strong); border-radius:var(--radius-sm);padding:.625rem .75rem;font-size:.9375rem;margin-top:.25rem } .tws-comments .submit{ background:var(--moss-600);color:#fff;border:0;border-radius:var(--radius-sm); padding:.625rem 1.5rem;font-weight:700;cursor:pointer } .tws-comments .submit:hover{background:var(--moss-500)} /* ========================================================================== 16. Footer ========================================================================== */ .tws-footer{margin-top:auto;background:var(--w-900);color:var(--w-300);border-top:1px solid var(--w-800)} html.dark .tws-footer{background:var(--w-950)} .tws-footer__grid{display:grid;grid-template-columns:1fr;gap:2rem;padding-block:3rem} @media (min-width:768px){.tws-footer__grid{grid-template-columns:repeat(4,1fr)}} .tws-footer__brand{grid-column:span 1} @media (min-width:768px){.tws-footer__brand{grid-column:span 2}} .tws-footer .tws-logo{color:#fff;display:block;margin-bottom:1rem} .tws-footer .tws-logo span{color:var(--moss-400)} .tws-footer__about{font-size:.875rem;color:var(--w-400);max-width:24rem;margin-bottom:1.5rem} .tws-social{display:flex;gap:1rem} .tws-social a{ width:2rem;height:2rem;border-radius:9999px;background:var(--w-800); display:flex;align-items:center;justify-content:center;font-size:.875rem;transition:background .2s,color .2s } .tws-social a:hover{background:var(--moss-500);color:#fff} .tws-footer h4{ color:#fff;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:1rem } .tws-footer ul{list-style:none;display:flex;flex-direction:column;gap:.5rem;font-size:.875rem} .tws-footer a:hover{color:var(--moss-400)} .tws-footer__bottom{ border-top:1px solid var(--w-800);padding-block:1.5rem;font-size:.75rem;color:var(--w-500); display:flex;flex-direction:column;gap:.5rem;align-items:center;text-align:center } @media (min-width:768px){ .tws-footer__bottom{flex-direction:row;justify-content:space-between;text-align:left} .tws-footer__bottom p:last-child{text-align:right;max-width:42rem} } /* ========================================================================== 17. WordPress core classes ========================================================================== */ .alignleft{float:left;margin:.5rem 1.5rem 1rem 0} .alignright{float:right;margin:.5rem 0 1rem 1.5rem} .aligncenter{display:block;margin-inline:auto} .alignwide{max-width:min(100%,60rem)} .alignfull{max-width:100%} .wp-caption{max-width:100%} .wp-caption-text{font-size:.8125rem;color:var(--text-muted);text-align:center;margin-top:.5rem} .sticky .tws-card__title::before{content:"★ ";color:var(--amazon)} .bypostauthor{} .gallery-caption{} /* ========================================================================== 18. The Wooden Stars — niche components Everything below is new relative to the source theme. It exists to serve the six-layer intent architecture (Fix → Part → Wood → Size → Dupe → Buy) and the two things this niche is bought on: numbers and material. ========================================================================== */ /* --- 18.1 typography corrections for the serif display face -------------- */ /* The stock rules assumed a 900-weight geometric sans. Newsreader tops out at 700 and needs looser tracking to stay legible at display sizes. */ .tws-logo{font-family:var(--font-head);font-weight:700;font-size:1.5rem;letter-spacing:-.01em} .tws-logo span{color:var(--oak-500)} .tws-footer .tws-logo span{color:var(--oak-400)} h1,h2,h3,h4,h5,h6{letter-spacing:-.012em;text-wrap:balance} .tws-card__title,.tws-mini__title,.tws-toplist__title,.tws-postnav strong{letter-spacing:0} .tws-eyebrow,.tws-tag,.tws-ribbon,.tws-product__award,.tws-sectionhead__more{font-family:var(--font-sans)} /* Digits are load-bearing in this niche: 72 in. tables, 30 in. doorways, 1010 lbf Janka. Everywhere a number is compared, use the mono face. */ .tws-table td,.tws-table th,.tws-dim td,.tws-dim th,.tws-woodspec__val,.tws-fit input{ font-variant-numeric:tabular-nums } /* --- 18.2 intent badge --------------------------------------------------- */ .tws-intent{ display:inline-flex;align-items:center;gap:.375rem; font-family:var(--font-sans);font-size:.625rem;font-weight:800; letter-spacing:.11em;text-transform:uppercase; padding:.25rem .5rem;border-radius:var(--radius-sm);white-space:nowrap; background:var(--i-soft,var(--bg-sunken));color:var(--i,var(--text-muted)) } .tws-intent--fix {--i:var(--moss-700);--i-soft:var(--moss-50)} .tws-intent--part {--i:var(--moss-500);--i-soft:var(--moss-50)} .tws-intent--wood {--i:var(--oak-600); --i-soft:var(--oak-50)} .tws-intent--size {--i:var(--w-600); --i-soft:var(--w-100)} .tws-intent--dupe {--i:var(--clay-500);--i-soft:#f9ece8} .tws-intent--buy {--i:#7c5124; --i-soft:var(--oak-100)} html.dark .tws-intent--fix {--i:var(--moss-400);--i-soft:rgba(44,107,79,.28)} html.dark .tws-intent--part{--i:#7fc79a;--i-soft:rgba(44,107,79,.24)} html.dark .tws-intent--wood{--i:var(--oak-400);--i-soft:rgba(160,107,49,.28)} html.dark .tws-intent--size{--i:var(--w-300);--i-soft:rgba(210,202,186,.14)} html.dark .tws-intent--dupe{--i:var(--clay-400);--i-soft:rgba(166,64,47,.26)} html.dark .tws-intent--buy {--i:var(--oak-200);--i-soft:rgba(124,81,36,.34)} /* --- 18.3 symptom router (homepage) -------------------------------------- */ /* A fix-first site's homepage job is not to look like a magazine, it is to answer "what is wrong with mine?" in one click. */ .tws-router{ background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius); padding:1.5rem;box-shadow:var(--shadow-sm) } .tws-router__head{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem} .tws-router__head h2{font-size:1.375rem} .tws-router__head p{font-size:.8125rem;color:var(--text-muted)} .tws-router__grid{display:grid;grid-template-columns:1fr;gap:.5rem} @media (min-width:640px){.tws-router__grid{grid-template-columns:repeat(2,1fr)}} @media (min-width:1024px){.tws-router__grid{grid-template-columns:repeat(3,1fr)}} .tws-router__item{ display:flex;align-items:center;gap:.625rem;padding:.75rem .875rem; background:var(--bg-sunken);border:1px solid transparent;border-radius:var(--radius-sm); font-size:.9375rem;font-weight:500;transition:border-color .2s,background .2s,color .2s } .tws-router__item:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)} .tws-router__item .tws-icon{color:var(--oak-500);font-size:1.125rem;flex:none} .tws-router__item:hover .tws-icon{color:var(--accent)} /* --- 18.4 tool strip (linkable assets) ----------------------------------- */ .tws-toolstrip{display:grid;grid-template-columns:1fr;gap:1rem} @media (min-width:768px){.tws-toolstrip{grid-template-columns:repeat(3,1fr)}} .tws-tool{ display:flex;flex-direction:column;gap:.375rem;padding:1.25rem; background:var(--w-900);color:#fff;border-radius:var(--radius); border:1px solid var(--w-800);transition:transform .2s,box-shadow .2s } html.dark .tws-tool{background:var(--w-950)} .tws-tool:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)} .tws-tool__kicker{font-size:.625rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--oak-400)} .tws-tool__name{font-family:var(--font-head);font-size:1.125rem;font-weight:700;color:#fff} .tws-tool__desc{font-size:.8125rem;color:var(--w-400)} /* --- 18.5 wood species chips -------------------------------------------- */ .tws-species{display:flex;flex-wrap:wrap;gap:.5rem} .tws-species a{ display:inline-flex;align-items:center;gap:.5rem; padding:.375rem .75rem .375rem .5rem; background:var(--bg-surface);border:1px solid var(--border);border-radius:9999px; font-size:.8125rem;font-weight:600;transition:border-color .2s,color .2s } .tws-species a:hover{border-color:var(--oak-500);color:var(--oak-600)} html.dark .tws-species a:hover{color:var(--oak-400)} /* The swatch is a real hint at the wood's colour, not decoration. */ .tws-species i{width:1rem;height:1rem;border-radius:9999px;flex:none;background:var(--sw,var(--oak-400));box-shadow:inset 0 0 0 1px rgba(28,26,22,.18)} /* --- 18.6 quick answer box (featured-snippet target) -------------------- */ .tws-quick{ border:1px solid var(--moss-600);border-left-width:4px; background:var(--accent-soft);border-radius:0 var(--radius) var(--radius) 0; padding:1.125rem 1.25rem;margin-block:1.75rem } .tws-quick__label{ display:block;font-family:var(--font-sans);font-size:.625rem;font-weight:800; letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.375rem } .tws-quick p{font-size:1.0625rem;line-height:1.6;color:var(--text-strong)} .tws-quick p+p{margin-top:.5rem} /* --- 18.7 wood species spec card (the moat component) ------------------- */ .tws-woodspec{ border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-surface); margin-block:1.75rem;overflow:hidden;box-shadow:var(--shadow-sm) } .tws-woodspec__head{ display:flex;align-items:center;gap:.75rem;padding:.875rem 1.25rem; background:var(--oak-50);border-bottom:1px solid var(--border) } html.dark .tws-woodspec__head{background:rgba(160,107,49,.14)} .tws-woodspec__swatch{width:2.25rem;height:2.25rem;border-radius:var(--radius-sm);flex:none;background:var(--sw,var(--oak-400));box-shadow:inset 0 0 0 1px rgba(28,26,22,.18)} .tws-woodspec__name{font-size:1.125rem;margin:0} .tws-woodspec__latin{font-size:.75rem;color:var(--text-muted);font-style:italic} .tws-woodspec__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border)} @media (min-width:640px){.tws-woodspec__grid{grid-template-columns:repeat(4,1fr)}} .tws-woodspec__cell{background:var(--bg-surface);padding:.875rem 1rem} .tws-woodspec__key{display:block;font-size:.625rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.25rem} .tws-woodspec__val{font-family:var(--font-mono);font-size:1rem;font-weight:600;color:var(--text-strong)} .tws-woodspec__src{padding:.625rem 1.25rem;border-top:1px solid var(--border);font-size:.6875rem;color:var(--text-muted)} .tws-woodspec__src a{color:var(--accent);text-decoration:underline} /* --- 18.8 dimension table ---------------------------------------------- */ .tws-dim-wrap{overflow-x:auto;margin-block:1.75rem;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--radius)} .tws-dim{width:100%;border-collapse:collapse;font-size:.875rem;min-width:30rem} .tws-dim caption{ caption-side:top;text-align:left;padding:.75rem 1rem;background:var(--bg-sunken); font-family:var(--font-sans);font-size:.6875rem;font-weight:800;letter-spacing:.1em; text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border) } .tws-dim th,.tws-dim td{padding:.625rem 1rem;text-align:left;border-bottom:1px solid var(--border)} .tws-dim thead th{background:var(--bg-surface);font-family:var(--font-sans);font-size:.6875rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-strong)} .tws-dim td:not(:first-child){font-family:var(--font-mono);color:var(--text-strong)} .tws-dim tbody tr:last-child td{border-bottom:0} .tws-dim tbody tr:hover{background:var(--bg-sunken)} /* --- 18.9 dupe comparison ---------------------------------------------- */ /* The "How it differs" column is not optional in the markup: claiming a dupe is identical to the original is both untrue and a liability. */ .tws-dupe{margin-block:1.75rem;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden} .tws-dupe__orig{padding:1rem 1.25rem;background:var(--bg-sunken);border-bottom:1px solid var(--border)} .tws-dupe__label{display:block;font-size:.625rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.25rem} .tws-dupe__origname{font-family:var(--font-head);font-size:1.0625rem;font-weight:700;color:var(--text-strong)} .tws-dupe__row{display:grid;grid-template-columns:1fr;gap:0;border-bottom:1px solid var(--border)} @media (min-width:768px){.tws-dupe__row{grid-template-columns:1.2fr 1fr auto;align-items:center}} .tws-dupe__row:last-child{border-bottom:0} .tws-dupe__cell{padding:.875rem 1.25rem} .tws-dupe__name{font-weight:600;color:var(--text-strong)} .tws-dupe__diff{font-size:.8125rem;color:var(--text-muted)} .tws-dupe__diff strong{color:var(--clay-500);font-weight:600} html.dark .tws-dupe__diff strong{color:var(--clay-400)} @media (min-width:768px){.tws-dupe__cell--cta{padding-right:1.25rem;text-align:right}} /* --- 18.10 toolbox list (Fix posts) ------------------------------------ */ .tws-toolbox{ border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-surface); padding:1.25rem;margin-block:1.75rem } .tws-toolbox__title{display:flex;align-items:center;gap:.5rem;font-size:1rem;margin-bottom:.75rem} .tws-toolbox__title .tws-icon{color:var(--oak-500)} .tws-toolbox ul{list-style:none;display:flex;flex-direction:column;gap:.625rem} .tws-toolbox li{display:grid;grid-template-columns:1fr auto;gap:.75rem;align-items:baseline;font-size:.9375rem;padding-bottom:.625rem;border-bottom:1px dashed var(--border)} .tws-toolbox li:last-child{border-bottom:0;padding-bottom:0} .tws-toolbox li em{display:block;font-style:normal;font-size:.8125rem;color:var(--text-muted)} .tws-toolbox a.tws-inlinebuy{font-size:.8125rem;font-weight:700;color:var(--accent);white-space:nowrap} .tws-toolbox a.tws-inlinebuy:hover{text-decoration:underline} /* --- 18.11 buy buttons ------------------------------------------------- */ /* Add-to-Cart is the primary CTA above the high-consideration threshold: Amazon's affiliate cookie is 24h, but a tagged item left in the cart keeps its attribution far longer, and wood furniture is a 1–3 week decision. */ .tws-btn-cart{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; background:var(--amazon);color:#111;font-family:var(--font-sans);font-weight:800;font-size:.9375rem; padding:.75rem 1.5rem;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm); transition:background .2s,transform .1s } .tws-btn-cart:hover{background:var(--amazon-hover);color:#111} .tws-btn-cart:active{transform:translateY(1px)} .tws-btn-cart--block{display:flex;width:100%} .tws-btn-amazon{font-family:var(--font-sans);font-weight:700} /* Secondary "view on Amazon" link under the cart button. */ .tws-btn-view{ display:inline-flex;align-items:center;gap:.25rem;margin-top:.5rem; font-size:.8125rem;font-weight:600;color:var(--text-muted);text-decoration:underline } .tws-btn-view:hover{color:var(--accent)} .tws-buypair{display:flex;flex-direction:column;align-items:flex-start} .tws-buypair .tws-btn-cart{width:100%} .tws-cartnote{font-size:.6875rem;color:var(--text-muted);margin-top:.375rem;line-height:1.5} /* --- 18.12 hub archive grouped by intent ------------------------------- */ .tws-hubintro{ background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius); padding:1.5rem;margin-bottom:2rem;box-shadow:var(--shadow-sm) } .tws-hubintro h1{font-size:1.875rem;margin-bottom:.5rem} @media (min-width:768px){.tws-hubintro h1{font-size:2.25rem}} .tws-hubintro p{color:var(--text-muted);max-width:60ch} .tws-hubjump{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem} .tws-hubjump a{font-size:.75rem;font-weight:700;padding:.3125rem .625rem;border:1px solid var(--border);border-radius:9999px;color:var(--text-muted)} .tws-hubjump a:hover{border-color:var(--accent);color:var(--accent)} .tws-hubgroup{margin-bottom:2.5rem;scroll-margin-top:6rem} .tws-hubgroup__head{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid var(--border)} .tws-hubgroup__head h2{font-size:1.25rem} .tws-hubgroup__count{font-family:var(--font-mono);font-size:.75rem;color:var(--text-muted);margin-left:auto} .tws-hublist{display:grid;grid-template-columns:1fr;gap:.5rem} @media (min-width:768px){.tws-hublist{grid-template-columns:repeat(2,1fr)}} .tws-hublist a{ display:block;padding:.75rem .875rem;background:var(--bg-surface); border:1px solid var(--border);border-radius:var(--radius-sm); font-size:.9375rem;font-weight:500;transition:border-color .2s,color .2s } .tws-hublist a:hover{border-color:var(--accent);color:var(--accent)} /* --- 18.13 single-post additions -------------------------------------- */ .tws-article__badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem} .tws-updated{ display:inline-flex;align-items:center;gap:.375rem; font-family:var(--font-mono);font-size:.75rem;color:var(--text-muted) } .tws-updated .tws-icon{font-size:.875rem} .tws-toc{background:var(--bg-sunken);border-left:3px solid var(--oak-400)} .tws-toc__title{font-family:var(--font-sans);font-weight:800;font-size:.6875rem;letter-spacing:.11em;color:var(--text-muted)} .tws-toc ol{font-family:var(--font-sans)} .tws-nextstep{ display:flex;flex-direction:column;gap:.25rem;margin-top:2rem;padding:1.125rem 1.25rem; background:var(--accent-soft);border:1px solid var(--moss-600);border-radius:var(--radius) } .tws-nextstep span{font-size:.625rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--accent)} .tws-nextstep a{font-family:var(--font-head);font-size:1.0625rem;font-weight:700;color:var(--text-strong)} .tws-nextstep a:hover{color:var(--accent)} /* --- 18.14 eight-across hub row (overrides the source theme's five) ---- */ @media (min-width:640px){.tws-cats{grid-template-columns:repeat(4,1fr)}} @media (min-width:1024px){.tws-cats{grid-template-columns:repeat(8,1fr);gap:.75rem}} @media (min-width:1024px){ .tws-cat{padding:.875rem .5rem} .tws-cat__icon{width:2.5rem;height:2.5rem;font-size:1.125rem} .tws-cat__name{font-size:.8125rem;line-height:1.25} } /* --- 18.15 sidebar species index -------------------------------------- */ .tws-widget--species .tws-species{gap:.375rem} .tws-widget--species .tws-species a{font-size:.75rem;padding:.25rem .625rem .25rem .375rem} /* --- 18.16 print ------------------------------------------------------- */ @media print{ .tws-header,.tws-footer,.tws-sidebar,.tws-announce,.tws-postnav,.tws-related,.tws-comments{display:none} .tws-article{border:0;padding:0;box-shadow:none} a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;word-break:break-all} } /* --- 18.17 small corrections found while wiring the templates ----------- */ /* The card body is a flex column, so an inline-flex badge would stretch to the full column width without this. */ .tws-card__body > .tws-intent{align-self:flex-start} /* No badge and no revision date yet: collapse the row rather than leaving a gap under the breadcrumb. */ .tws-article__badges:empty{display:none} .tws-article__badges{align-items:center} /* margin-left:auto is meant for the flex group head, not the jump pills. */ .tws-hubjump .tws-hubgroup__count{margin-left:.25rem} .tws-hubgroup__head .tws-hubgroup__count{margin-left:auto} /* Full-width variant of the calculator, for a /tools/ page. */ .tws-fit--full{max-width:34rem} .tws-fit--full .tws-fit__row{grid-template-columns:1fr 1fr} /* Feature tile hover: oak, matching the species accent rather than the old rose that came from the DIY palette. */ .tws-feature__main:hover .tws-feature__title, .tws-feature__sub:hover .tws-feature__title{color:var(--oak-400)} .tws-tag{background:var(--oak-600)} .tws-ribbon{background:var(--moss-600)} .tws-product__award{background:var(--moss-600)} .tws-empty h1{color:var(--oak-400)} /* Buy button inside a dimension/comparison row should not stretch the cell. */ .tws-dupe__cell--cta .tws-btn-cart,.tws-dupe__cell--cta .tws-btn-amazon{padding:.5rem 1rem;font-size:.8125rem} /* --- 18.18 fixes found by rendering the templates ----------------------- */ /* `.tws-prose a` (0,1,1) beat the button classes (0,1,0), so every buy button inside post content came out underlined and moss-green on amber. Inherited straight from the source theme. */ .tws-prose .tws-btn-amazon, .tws-prose .tws-btn-cart, .tws-prose .tws-inlinebuy, .tws-prose .tws-readmore, .tws-prose .tws-quick a{text-decoration:none} .tws-prose .tws-btn-amazon, .tws-prose .tws-btn-amazon:hover, .tws-prose .tws-btn-cart, .tws-prose .tws-btn-cart:hover{color:#111} .tws-prose .tws-btn-view{color:var(--text-muted)} .tws-prose .tws-btn-view:hover{color:var(--accent)} .tws-prose .tws-inlinebuy{color:var(--accent)} /* Four footer columns held brand(2) + 2, and adding the Tools column pushed About Us onto a second row. Five tracks, brand still spanning two. */ @media (min-width:768px){.tws-footer__grid{grid-template-columns:repeat(5,1fr)}} @media (min-width:1024px){.tws-footer__grid{gap:2.5rem}} /* The layer glyph on a hub-archive group head was a faint grey hairline at 1.125rem; oak at 1.25rem reads as an icon. */ .tws-hubgroup__head .tws-sectionhead__icon{font-size:1.25rem;color:var(--oak-500)} html.dark .tws-hubgroup__head .tws-sectionhead__icon{color:var(--oak-400)}