/* Theme Name: RetireNerd Homepage Concept Preview 1.38 Theme URI: https://retirenerd.com/ Author: RetireNerd Description: Standalone RetireNerd homepage concept preview based on RC24. Keeps the existing site functionality while testing a more compact, question-first editorial homepage. Homepage content is configurable in the WordPress Customizer and post/page placement controls. Version: 1.38.0-preview Requires at least: 6.0 Requires PHP: 7.4 Text Domain: retirenerd */ .rn-pa2-brand{margin:0 0 14px;color:#fff;font-weight:800;font-size:17px;letter-spacing:.01em} .rn-tool-card-modeler{position:relative;border-color:#9DC5E4!important;background:linear-gradient(145deg,#fff 0%,#F1F8FD 100%)!important}.rn-modeler-button-icon{display:inline-block;width:20px;height:20px;flex:0 0 20px;vertical-align:-4px;margin-right:7px}.rn-modeler-link{display:inline-flex!important;align-items:center}.rn-pa2-primary .rn-modeler-button-icon,.rncp-primary-cta .rn-modeler-button-icon{margin-right:0}.t-arrow .rn-modeler-button-icon{width:18px;height:18px;vertical-align:-4px;margin-right:6px} .rn-pa2-portfolios{margin-top:72px;padding:44px 48px;border:1px solid #CFE0EC;border-radius:24px;background:linear-gradient(145deg,#F5FAFE 0%,#fff 64%);box-shadow:0 13px 34px rgba(13,53,87,.06)}.rn-pa2-portfolios-head{max-width:900px}.rn-pa2-portfolios h2{margin:8px 0 0;color:#163653;font-size:34px;line-height:1.1;letter-spacing:-.03em}.rn-pa2-portfolios-lede{max-width:880px;color:#61758A;font-size:16px;line-height:1.65;margin:20px 0 24px}.rn-pa2-portfolio-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.rn-pa2-portfolio-steps article{background:#fff;border:1px solid #D7E4EE;border-radius:16px;padding:21px}.rn-pa2-portfolio-steps strong{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#E4F2FC;color:#145A8B;font-size:13px}.rn-pa2-portfolio-steps h3{font-size:19px;color:#173957;margin:13px 0 7px}.rn-pa2-portfolio-steps p{font-size:13px;line-height:1.55;color:#687A8E;margin:0} @media(max-width:780px){.rn-pa2-portfolios{padding:28px 22px}.rn-pa2-portfolios h2{font-size:28px}.rn-pa2-portfolio-steps{grid-template-columns:1fr}} @media(max-width:620px){.rn-pa2-brand{font-size:15px}.rn-pa2-portfolios{margin-top:48px}} /* ========================================================================= RetireNerd — shared stylesheet (WordPress theme port) This is the exact design system from the original static site's styles.css, unchanged, so the migrated site is visually identical. ========================================================================= */ :root{ --rn-roadmap-hero-start:#092D50;--rn-roadmap-hero-end:#124F80;--rn-roadmap-title:#FFFFFF;--rn-roadmap-body:#D4E1EC;--rn-roadmap-accent:#F2AA22;--rn-roadmap-panel:#254F72;--rn-roadmap-button:#E99A17;--rn-roadmap-button-text:#FFFFFF; --rn-footer-bg:#0B3156;--rn-footer-heading:#FFFFFF;--rn-footer-text:#B8C8D7;--rn-footer-divider:#315473; --rn-hero-newsletter-kicker-scale:1; --rn-hero-newsletter-title-scale:1; --rn-hero-newsletter-body-scale:1; --rn-hero-newsletter-button-scale:1; color-scheme:light; /* Text-size scale multipliers (unitless, 1 = 100%/original design size). Every font-size declaration below reads one of these four instead of a literal px value, e.g. font-size:calc(16px * var(--fs-h2)). Changing one of these scales every element in that role together while preserving each element's own size relative to the others in its role — see retirenerd_size_settings() in functions.php for the Customizer controls that set these (Appearance > Customize > "RetireNerd Text Sizes"). */ --fs-h1:1; --fs-h2:1; --fs-body:1; --fs-small:1; /* Post/page title size (added v1.10.2) — deliberately decoupled from --fs-h2 above. h1.section-title is reused for two different roles: the numbered "01/02/03" section headings on the eleven core pages (the role --fs-h2 is meant for, grouped with search-bar-title, sidebar widget titles, etc.), AND the single big title at the top of a blog post (single.php) or a generic WordPress Page (page.php) — a completely different visual role that happened to reuse the same CSS class. This variable + the .page-title class (added alongside .section-title only on those two standalone-title usages) lets post/ page titles be resized on their own without also shrinking or growing every numbered section heading on the core pages. Same 16px base as --fs-h2 was already applying here, so nothing changes visually until this is customized. */ --fs-page-title:1; --rn-type-h1:#102842; --rn-type-h2:#102842; --rn-type-body:#5D7187; --rn-type-small:#58728E; --rn-type-post-title:#102842; --rn-category-title:#102842; --rn-home-hero-bg-start:#092F55; --rn-home-hero-bg-end:#114B83; --rn-home-hero-kicker:#FFE1A6; --rn-home-hero-title:#FFFFFF; --rn-home-hero-body:#D6E1EB; /* Header search widget text size (added v1.10.2) — see --header-search-bg below for why this widget has its own dedicated variables. */ --fs-header-search:1; /* Header logo scale multiplier (unitless, 1 = 100%/original design size). .brand-logo's height is calc( * var(--logo-scale)) at both the desktop and mobile breakpoints, with width:auto preserving the logo image's own aspect ratio — see retirenerd_logo_settings() in functions.php for the Customizer control that sets this (Appearance > Customize > "RetireNerd Logo Size"). */ --logo-scale:1; --bg:#F4F5F7; --panel:#FFFFFF; --panel2:#F7F8FA; --border:#D8DCE3; --border-soft:#E8EAED; /* Hero box background/border (added v1.5.0) — deliberately decoupled from --panel/--border above so the .hero box (the eyebrow/H1/subhead card at the top of all 10 core pages) can be recolored independently via its own Customizer controls, without affecting every other panel/border on the site. Defaults match --panel/--border exactly, so nothing changes visually until one of these is customized. */ --hero-bg:#FFFFFF; --hero-border:#D8DCE3; /* Glossary tooltip background/border/text (added v1.8.1) — deliberately decoupled from --teal/--gold above so the .glossary-tooltip bubble (the hover/tap definition popup, see the "sitewide glossary tooltips" block further down this file) can be recolored independently via its own Customizer controls, without affecting headings, nav, links, or any other element that reads --teal/--gold. Defaults match the original v1.8.0 hardcoded look (navy background, white text, invisible border — same color as the background, so no border is visible until it's customized to something else), so nothing changes visually until one of these is customized. The term-name heading inside the bubble (e.g. "FRA — Full Retirement Age") intentionally keeps using --gold, the sitewide Accent color control, rather than a fourth dedicated variable. */ --glossary-tooltip-bg:#0A2240; --glossary-tooltip-border:#0A2240; --glossary-tooltip-text:#FFFFFF; /* Header search widget background/text (added v1.10.2) — the "Header Heading" widget slot (Appearance > Widgets, between the logo and the tagline) has no widget-specific styling of its own today, so dropping a Search widget there falls all the way back to the browser's own unstyled default search box. These variables (plus --fs-header-search above) give that specific search box its own branded look, matching the site's rounded-pill nav style, fully independent of the other search widget (.search-bar-widget, the "Site Search" area at the top of
) so the two can be styled differently if ever needed. Defaults approximate a plain, on-brand look (same background as --panel2, same text color as --text). */ --header-search-bg:#F7F8FA; --header-search-text:#1A2233; /* Homepage Spotlight background/border/text (added v1.10.2) — deliberately decoupled from --teal-dim/--teal above so the .rn-spotlight callout box (Appearance > Widgets > "Homepage Spotlight") can be recolored independently via its own Customizer controls. Defaults approximate the original hardcoded look (a light navy-tinted background, a translucent navy border, navy heading/body text), so nothing changes visually until one of these is customized. */ --spotlight-bg:#E8EEF7; --spotlight-border:#C0C9D6; --spotlight-text:#0A2240; /* Site Search / Breadcrumb widget background/border/text + size (added v1.10.3) — the "Site Search" widget slot (Appearance > Widgets, the .search-bar-widget box at the top of
) previously read the sitewide --panel/--border/--text/--fs-body variables, same as every other panel on the site. In practice this slot is very often used for a Yoast SEO breadcrumbs block/shortcode instead of an actual search box (Yoast ships that output completely unstyled), so it needed its own dedicated, independently-customizable variables the way the Hero box and Glossary Tooltip did — both for the box itself and for whatever's inside it (search field/button OR breadcrumb trail). Defaults match the original hardcoded look exactly (same background as --panel, same border as --border, breadcrumb text colored like --muted), so nothing changes visually until one of these is customized. See the .search-bar-widget and #breadcrumbs/.yoast-breadcrumbs/ .wp-block-yoast-seo-breadcrumbs rules further down this file. */ --search-widget-bg:#FFFFFF; --search-widget-border:#D8DCE3; --search-widget-text:#5A6472; --fs-search-widget:1; --text:#1A2233; --muted:#5A6472; --muted2:#8A93A0; --teal:#0A2240; --teal-dim:#E8EEF7; --gold:#C68A1E; --red:#C0392B; --red-dim:#FBEAE8; --green:#2E7D4F; --green-dim:#E7F4EC; } *{box-sizing:border-box;} body{margin:0;background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;font-size:calc(14px * var(--fs-body));line-height:1.5;} h1,h2,h3{font-family:'Space Grotesk',sans-serif;margin:0;} a{color:var(--teal);} .mono{font-family:'IBM Plex Mono',monospace;} .wrap{max-width:980px;margin:0 auto;padding:26px 20px 60px;} /* ---- content sidebar layout (Appearance > Widgets > "Content Sidebar", added v1.9.4) — a right-hand column next to the main content. Only rendered at all when that widget area is active (see the is_active_sidebar() checks in header.php/footer.php), so an empty sidebar leaves .wrap exactly as it was before this feature existed: a single centered 980px column, no .page-shell wrapper in the markup, no layout change whatsoever. Once a widget is added, .page-shell widens the whole page (header included) to fit both the 980px content column and a 300px sidebar side by side, then collapses to a single stacked column below 960px so it stays mobile-friendly. ---- */ .page-shell{max-width:1320px;margin:0 auto;padding:0 20px;display:flex;align-items:flex-start;gap:36px;} .page-shell .wrap{max-width:980px;padding:26px 0 60px;margin:0;flex:1 1 auto;min-width:0;} .site-sidebar{flex:0 0 300px;width:300px;padding:26px 0 60px;} @media (max-width:960px){ .page-shell{flex-direction:column;gap:0;} .page-shell .wrap{max-width:none;width:100%;} .site-sidebar{width:100%;flex:1 1 auto;padding-top:0;} } .sidebar-widget{margin-bottom:32px;} .sidebar-widget:last-child{margin-bottom:0;} .sidebar-widget-title{font-family:'Space Grotesk',sans-serif;font-size:calc(15px * var(--fs-h2));font-weight:600;color:var(--text);margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--border);} .sidebar-widget ul{list-style:none;margin:0;padding:0;} .sidebar-widget li{padding:9px 0;border-bottom:1px solid var(--border);} .sidebar-widget li:last-child{border-bottom:none;} .sidebar-widget a{color:var(--text);text-decoration:none;font-size:calc(13px * var(--fs-body));line-height:1.4;} .sidebar-widget a:hover{color:var(--teal);} .sidebar-widget p{color:var(--muted);font-size:calc(12.5px * var(--fs-body));line-height:1.6;margin:0 0 10px;} /* Optional copy-paste "card" pattern (image + title) for a Custom HTML widget — see the SIDEBAR CONTENT section of README.txt for the markup. */ .sidebar-card{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);} .sidebar-card:last-child{border-bottom:none;} .sidebar-card img{width:64px;height:64px;object-fit:cover;border-radius:6px;flex:0 0 64px;} .sidebar-card-title{font-family:'Space Grotesk',sans-serif;font-size:calc(13px * var(--fs-body));font-weight:600;color:var(--text);line-height:1.35;margin:0;} .sidebar-card-title a{color:inherit;} .sidebar-card-title a:hover{color:var(--teal);} /* ---- top nav (site-wide, pill tabs like the analyzer's global-tab) ---- */ .site-header{max-width:980px;margin:0 auto;padding:20px 20px 0;} /* Widened only when body has .has-content-sidebar (see retirenerd_body_class() in functions.php) — i.e. only once the Content Sidebar widget area is actually active, so the header stays aligned with .wrap either way: 980px when there's no sidebar, 1320px (matching .page-shell) when there is. */ .brand{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:16px;} .brand-name{display:flex;align-items:center;text-decoration:none;line-height:0;} .brand-logo{height:calc(52px * var(--logo-scale));width:auto;display:block;} .brand-sub{font-family:'IBM Plex Mono',monospace;font-size:calc(10.5px * var(--fs-small));letter-spacing:.1em;color:var(--muted2);text-transform:uppercase;} /* "Header Heading" widget area (added v1.4.9), rendered between .brand-name and .brand-sub above. .brand's justify-content:space-between already pushes the logo and tagline to opposite ends, leaving this the natural middle slot; flex:1 lets it claim the leftover space and center whatever's dropped in it (a heading, a short banner line, any single widget/block). Only present in the markup at all when the sidebar is active, so an empty slot adds no gap — same pattern as .search-bar-widget. */ .header-heading{flex:1 1 200px;min-width:0;text-align:center;} .header-heading-widget{margin:0 auto;max-width:100%;} .header-heading-title{margin:0;font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600;color:var(--teal);letter-spacing:.01em;} /* Styling for a WordPress core Search widget specifically, when it's the widget dropped into "Header Heading" (added v1.10.2) — see --header-search-bg/--header-search-text/--fs-header-search in :root above. Without this, .search-form/.search-field/.search-submit (the widget's own default markup) had no matching selectors anywhere in this stylesheet and fell back to the browser's unstyled default search box. */ .header-heading-widget .search-form{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;} .header-heading-widget .search-form label{margin:0;} .header-heading-widget .search-field{background:var(--header-search-bg);color:var(--header-search-text);border:1px solid var(--border);border-radius:20px;padding:8px 14px;font-family:'IBM Plex Mono',monospace;font-size:calc(13px * var(--fs-header-search));} .header-heading-widget .search-field::placeholder{color:var(--header-search-text);opacity:.55;} .header-heading-widget .search-field:focus{outline:1px solid var(--teal);} .header-heading-widget .search-submit{background:var(--teal);color:#fff;border:none;border-radius:20px;padding:8px 16px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:calc(13px * var(--fs-header-search));cursor:pointer;} .header-heading-widget .search-submit:hover{background:#123566;} /* retirenerd_fallback_menu() (used until a real menu is assigned to the "Primary Navigation" location) prints flat tags as direct children of