/* Theme Name: FireBorn Theme URI: https://example.com/fireborn Author: Master Coder Author URI: https://example.com Description: A clean, fast, secure-by-construction blog theme. No remote dependencies, no jQuery, and responsive images. Version: 1.3.0 Requires at least: 6.4 Tested up to: 7.1 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: fireborn Tags: blog, two-columns, right-sidebar, left-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready */ /* ========================================================================= Design tokens NOTE: This is a functional Phase 2 baseline. Visual polish (color palette, typography scale, spacing rhythm) is finalised in the Phase 3 design pass. ========================================================================= */ :root { /* Palette carried over from the previous theme design. */ --color-text: #333333; --color-heading: #222222; --color-muted: #6b7077; --color-bg: #ffffff; --color-accent: #bd1515; /* link / highlight color */ --color-accent-hover: #000000; /* link hover */ --color-border: #e6e6e6; --color-button: var(--color-accent); /* filled button background (Customizer) */ --color-surface: #f7f6f4; --color-navbar-bg: #f0f0f0; --color-navbar-text: #000000; /* Fonts (self-hosted). Body/UI: Lato. Headings: Lora. Title: Dancing Script. The blog/page/carousel families inherit a base family by default and are overridable per-target from the Customizer Typography section. */ --font-body: "Lato", Arial, Helvetica, sans-serif; --font-heading: "Lora", Georgia, "Times New Roman", serif; --font-title: "Dancing Script", "Lora", Georgia, cursive; --font-blog: var(--font-body); --font-page: var(--font-body); --font-carousel-title: var(--font-heading); --font-carousel-caption: var(--font-heading); --font-post-date: var(--font-body); --font-pagination: var(--font-body); --font-header-menu: var(--font-body); --font-dropdown-menu: var(--font-header-menu); /* header dropdown; defaults to the header menu font */ --font-footer-menu: var(--font-body); --font-link: inherit; /* content links follow surrounding text unless set */ /* Per-heading-level fonts/colours/styles. Each defaults to the shared heading base, so H1–H6 look identical until customised individually from the Customizer (Typography → Heading H1…H6). */ --font-h1: var(--font-heading); --font-h2: var(--font-heading); --font-h3: var(--font-heading); --font-h4: var(--font-heading); --font-h5: var(--font-heading); --font-h6: var(--font-heading); --color-h1: var(--color-heading); --color-h2: var(--color-heading); --color-h3: var(--color-heading); --color-h4: var(--color-heading); --color-h5: var(--color-heading); --color-h6: var(--color-heading); --fstyle-h1: var(--fstyle-heading); --fstyle-h2: var(--fstyle-heading); --fstyle-h3: var(--fstyle-heading); --fstyle-h4: var(--fstyle-heading); --fstyle-h5: var(--fstyle-heading); --fstyle-h6: var(--fstyle-heading); /* Card titles for the grid and mosaic layouts each have their own target, defaulting to the shared heading look at the card sizes, so both are unchanged until customised (Typography → Grid title / Mosaic title). */ --font-grid-title: var(--font-heading); --color-grid-title: var(--color-heading); --fstyle-grid-title: var(--fstyle-heading); --fs-grid-title: 20px; --font-mosaic-title: var(--font-heading); --color-mosaic-title: var(--color-heading); --fstyle-mosaic-title: var(--fstyle-heading); --fs-mosaic-title: 20px; /* Per-target font styles. Normal is the standard for every target; the Customizer Typography "style" control can switch any target to italic. */ --fstyle-title: normal; --fstyle-heading: normal; --fstyle-post-date: normal; --fstyle-carousel-title: normal; --fstyle-carousel-caption: normal; --fstyle-body: normal; --fstyle-blog: normal; --fstyle-page: normal; --fstyle-pagination: normal; --fstyle-header-menu: normal; --fstyle-dropdown-menu: var(--fstyle-header-menu); --fstyle-footer-menu: normal; --fstyle-link: normal; /* Per-target text colors. These default to the shared palette above so the design is unchanged until a color is set in the Customizer. */ --color-title: var(--color-heading); --color-blog: var(--color-text); --color-page: var(--color-text); --color-carousel-title: var(--color-heading); --color-carousel-caption: var(--color-heading); --color-post-date: var(--color-muted); --color-pagination: var(--color-text); --color-header-menu: var(--color-navbar-text); --color-dropdown-menu: var(--color-header-menu); --color-footer-menu: var(--color-accent); --color-link: var(--color-accent); /* normal link color */ --color-link-hover: var(--color-accent-hover); /* link hover/highlight color */ /* Type sizes preserved from the original theme. */ --fs-base: 14px; --fs-post-title: 28px; --fs-nav: 12px; --fs-meta: 11px; --fs-widget-title: 10px; --fs-h1: 28px; --fs-h2: 22px; --fs-h3: 22px; --fs-h4: 19px; --fs-h5: 18px; --fs-h6: 17px; --fs-title: clamp(2.5rem, 6vw, 4rem); --fs-blog: var(--fs-base); --fs-page: var(--fs-base); --fs-carousel-title: 22px; --fs-carousel-caption: 16px; --fs-post-date: var(--fs-meta); --fs-pagination: var(--fs-base); --fs-header-menu: var(--fs-nav); --fs-dropdown-menu: var(--fs-nav); --fs-footer-menu: var(--fs-base); --fs-link: inherit; /* content links follow surrounding size unless set */ --container: 1200px; --content-gap: 3rem; --sidebar-width: 320px; --radius: 4px; /* Single shadow used everywhere a shadow is shown (matches the pagination Previous/Next buttons). --shadow-img points here so images share it too. */ --shadow: 0 3px 6px rgba(0, 0, 0, 0.2); --shadow-img: var(--shadow); } /* ========================================================================= Base ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); font-style: var(--fstyle-body); font-size: var(--fs-base); font-weight: 400; line-height: 1.6; color: var(--color-text); background: var(--color-bg); overflow-x: clip; /* clip stray horizontal overflow without breaking position: sticky */ -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-weight: 400; line-height: 1.25; margin: 0 0 0.5em; } /* Each level pulls its own font/style/colour/size so H1–H6 are independently customisable. These govern content headings too (previously .entry-content hN hardcoded fixed sizes, which made the size controls appear to do nothing). */ h1 { font-family: var(--font-h1); font-style: var(--fstyle-h1); color: var(--color-h1); font-size: var(--fs-h1); } h2 { font-family: var(--font-h2); font-style: var(--fstyle-h2); color: var(--color-h2); font-size: var(--fs-h2); } h3 { font-family: var(--font-h3); font-style: var(--fstyle-h3); color: var(--color-h3); font-size: var(--fs-h3); } h4 { font-family: var(--font-h4); font-style: var(--fstyle-h4); color: var(--color-h4); font-size: var(--fs-h4); } h5 { font-family: var(--font-h5); font-style: var(--fstyle-h5); color: var(--color-h5); font-size: var(--fs-h5); } h6 { font-family: var(--font-h6); font-style: var(--fstyle-h6); color: var(--color-h6); font-size: var(--fs-h6); } /* Per-context reading typography (Customizer "Blog post text" / "Page article text" targets). Defaults inherit the body family/size/color, so appearance is unchanged until overridden. Headings inside content keep their own sizes. */ .single-post .entry-content, .blog .entry-content, .archive .entry-content, .search .entry-content, .entry-summary { font-family: var(--font-blog); font-style: var(--fstyle-blog); font-size: var(--fs-blog); color: var(--color-blog); } .page .entry-content { font-family: var(--font-page); font-style: var(--fstyle-page); font-size: var(--fs-page); color: var(--color-page); } blockquote { margin: 0 0 1.5rem; padding-left: 1rem; border-left: 3px solid var(--color-accent); } blockquote p { color: #111; font-size: 16px; font-style: italic; line-height: 1.6; } a { color: var(--color-link); font-family: var(--font-link); font-style: var(--fstyle-link); font-size: var(--fs-link); text-decoration: none; transition: color 0.2s linear; } /* The highlight color appears on hover/focus only. */ a:hover, a:focus { color: var(--color-link-hover); text-decoration: none; } img { max-width: 100%; height: auto; display: block; } figure { margin: 0 0 1.5rem; } /* ========================================================================= Accessibility helpers ========================================================================= */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; word-wrap: normal !important; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; background: #fff; padding: 0.75rem 1rem; border-radius: 0 0 var(--radius) 0; } .skip-link:focus { left: 0; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* ========================================================================= Layout ========================================================================= */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; } .site-content { padding: 2.5rem 0 3.5rem; } .content-row { display: grid; grid-template-columns: 1fr; gap: var(--content-gap); } @media (min-width: 900px) { body.has-sidebar .content-row { grid-template-columns: minmax(0, 1fr) var(--sidebar-width); } body.sidebar-left .content-area { order: 2; } body.sidebar-left #secondary { order: 1; } } /* Sidebar widgets are desktop-only; hide them once the layout collapses to a single column (below the 900px sidebar breakpoint). */ @media (max-width: 899px) { #secondary.site-sidebar { display: none; } } /* ========================================================================= Header & navigation ========================================================================= */ .site-top { position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid var(--color-border); background: var(--color-navbar-bg); transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease; } /* Once the page is scrolled, the bar turns into a translucent frosted-glass strip (added by theme.js). */ .site-top.is-stuck { background: rgba(240, 240, 240, 0.72); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom-color: rgba(0, 0, 0, 0.08); box-shadow: var(--shadow); } .site-top-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; } .main-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.25rem; } .main-navigation a { color: var(--color-header-menu); font-family: var(--font-header-menu); font-style: var(--fstyle-header-menu); text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--fs-header-menu); font-weight: 700; /* Use the font's real bold face but never synthesise one: a single-weight custom nav font would otherwise get faux-bolded into thick, smeared strokes (same guard as the site title). */ font-synthesis: none; display: block; padding: 0.5rem 0; } /* Hover/focus uses the shared link hover color. The current menu item is left to the base rule above so it keeps the header menu color (follows the Header menu color setting rather than a fixed accent). */ .main-navigation a:hover, .main-navigation a:focus { color: var(--color-link-hover); } .main-navigation li { position: relative; } /* Dropdown sub-menus (desktop): present in the DOM but hidden until the parent item is hovered or a descendant receives keyboard focus. */ .main-navigation .sub-menu { position: absolute; top: 100%; left: 0; z-index: 999; /* Shrink to the widest item so the longest label has equal side padding (the 1.1rem on .sub-menu a) rather than a fixed, oversized box. */ min-width: max-content; margin: 0.4rem 0 0; padding: 0.35rem 0; flex-direction: column; gap: 0; background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 10px; box-shadow: var(--shadow); transform-origin: top center; opacity: 0; visibility: hidden; transform: translateY(10px) scaleY(0.96); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; } /* Invisible bridge spanning the 0.4rem gap between a parent item and its dropdown. Without it the pointer crosses a dead strip (the margin) that belongs to neither element, dropping :hover and causing the flicker/close. The pseudo-element is part of the sub-menu, so hovering it keeps the parent item hovered and the menu open. */ .main-navigation .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -0.4rem; height: 0.4rem; } .main-navigation .menu-item-has-children > a { display: flex; align-items: center; gap: 0.3em; } /* Caret to signal an expandable item. */ .main-navigation .menu-item-has-children > a::after { content: ""; flex: none; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform 0.2s ease; } /* Caret toggle button (injected by JS for touch/mobile) is hidden on desktop, where sub-menus open on hover/focus. */ .sub-menu-toggle { display: none; } .main-navigation .menu-item-has-children:hover > .sub-menu, .main-navigation .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0) scaleY(1); } .main-navigation .sub-menu li { border: 0; } .main-navigation .sub-menu a { padding: 0.3rem 1.1rem; text-transform: none; letter-spacing: 0; font-weight: 400; white-space: nowrap; /* Dropdown items have their own typography target, separate from the top-level header menu. Defaults resolve to the header-menu look. */ font-family: var(--font-dropdown-menu); font-style: var(--fstyle-dropdown-menu); font-size: var(--fs-dropdown-menu); color: var(--color-dropdown-menu); } .main-navigation .sub-menu a:hover, .main-navigation .sub-menu a:focus { color: var(--color-link-hover); } /* Second-level items fly out to the side. */ .main-navigation .sub-menu .sub-menu { top: 0; left: 100%; } .menu-toggle { display: none; background: none; border: 0; padding: 0.5rem; cursor: pointer; } .menu-toggle-bar, .menu-toggle-bar::before, .menu-toggle-bar::after { display: block; width: 30px; height: 3px; background: var(--color-text); position: relative; } .menu-toggle-bar::before, .menu-toggle-bar::after { content: ""; position: absolute; left: 0; } .menu-toggle-bar::before { top: -9px; } .menu-toggle-bar::after { top: 9px; } /* Header search: a magnifying-glass button that reveals a floating search field. The field is absolutely positioned so opening it never shifts the layout, and it keeps whatever was typed because JS only toggles a class. */ .header-search { position: relative; } .header-search .search-form { display: flex; align-items: center; } /* Icon-only toggle/submit button. Scoped selector beats the generic button/.search-submit styling regardless of source order. */ .header-search .search-submit { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; background: none; border: 0; border-radius: var(--radius); /* Match the hamburger bars, which use --color-text (the glass SVG inherits this via currentColor). Previously --color-navbar-text made it a different shade from the hamburger. */ color: var(--color-text); cursor: pointer; } .header-search .search-submit:hover, .header-search .search-submit:focus { background: none; color: var(--color-link-hover); } .header-search .search-submit svg { display: block; width: 26px; height: 26px; } /* Floating field: hidden until .header-search.is-open, sitting beside the glass and vertically centred on it. Opens to the LEFT of the glass by default (the desktop glass sits at the far right, so opening rightward would overflow); the mobile query flips it to the right. Shadow matches the blog-preview image depth. */ .header-search .search-field { position: absolute; top: 50%; right: calc(100% + 0.4rem); left: auto; z-index: 1000; width: 240px; max-width: 60vw; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-img); opacity: 0; visibility: hidden; transform: translateY(-50%) translateX(6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; } .header-search.is-open .search-field { opacity: 1; visibility: visible; transform: translateY(-50%); } /* Focus highlight on the open search field uses the link hover color. */ .header-search .search-field:focus, .header-search .search-field:focus-visible { outline: 2px solid var(--color-link-hover); outline-offset: 2px; } .site-branding { text-align: center; padding: 2.5rem 1.25rem 2rem; } .site-title { font-family: var(--font-title); font-style: var(--fstyle-title); font-weight: 700; /* Use a font's real 700 face (e.g. Dancing Script) but never fake one: a single-weight upload like Alison would otherwise get synthesised bold, which looks like grossly thickened strokes when the title is scaled up. */ font-synthesis: none; font-size: var(--fs-title); line-height: 1.1; margin: 0; white-space: nowrap; /* keep the title on a single line */ } .site-title a { color: var(--color-title); /* Inherit the title's own font/size (from .site-title) so the content-link font/size selection (global `a` rule) never overrides the site title. */ font-family: inherit; font-size: inherit; text-decoration: none; } /* The site title takes the link hover color on hover, like other links. */ .site-title a:hover, .site-title a:focus { color: var(--color-link-hover); } .custom-logo-link { display: inline-block; } .site-description { color: var(--color-muted); margin: 0.5rem 0 0; font-style: italic; } @media (max-width: 899px) { /* Single row: [search — left] [hamburger — right]. Padding gives visible gray space above and below the row. Nav wraps to its own row below when opened. */ .site-top-inner { flex-wrap: wrap; /* The collapsed nav wraps to a second flex line. The base `gap: 1rem` would otherwise add a 1rem row-gap of empty gray *below* the icon row, pushing the icons above centre — so zero the row-gap here and let the content (not a forced min-height) set the bar height. Horizontal spacing is handled by justify-content/order, so column-gap can stay. */ align-content: center; min-height: auto; row-gap: 0; /* Vertical breathing room only — keep the container's horizontal padding so the nav lines up with the blog content below. */ padding-top: 0.4rem; padding-bottom: 0.4rem; } /* Glass button sits at the top-left of the row. */ .header-search { order: 1; flex: 0 0 auto; } /* Field opens to the right of the top-left glass here. */ .header-search .search-field { right: auto; left: calc(100% + 0.4rem); transform: translateY(-50%) translateX(-6px); } /* Hamburger sits on the right end of the same row. */ .menu-toggle { display: inline-flex; align-items: center; order: 2; flex-shrink: 0; } /* Nav panel drops below the row, full width. */ .main-navigation { flex-basis: 100%; order: 3; } /* Only the direct top-level