/* Theme Name: AI for 70s Theme URI: https://aifor70s.com Author: AI for 70s Team Author URI: https://aifor70s.com Description: Ultra-lightweight, senior-first standalone theme for AI for 70s. Deep Blue / Off-White / Charcoal brand system. Minimum 18px text, high contrast, 1-click AI launchers (ChatGPT / Claude / Gemini), zero-friction interactive tools. No heavy frameworks. Version: 1.0.3 Requires at least: 6.0 Tested up to: 6.6 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: aifor70s Tags: accessibility-ready, one-column, custom-menu, sticky-post, threaded-comments, translation-ready */ /* ========================================================================== 1. DESIGN TOKENS — Deep Blue / Off-White / Charcoal ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Nunito+Sans:wght@400;600;700;800;900&family=Inter:wght@400;600;700;800&display=swap'); :root { /* Senior brand palette (requested variable names, mapped to the Deep Blue system) */ --senior-bg: #F8FAFC; /* Off-White */ --primary-blue: #1E3A8A; /* Deep Blue */ --primary-blue-dark: #172A6C; /* Deep Blue hover */ --scam-red: #DC2626; /* Scam & Phishing accent */ --scam-red-soft: #FEE2E2; --text-dark: #1F2937; /* Charcoal */ --text-soft: #4B5563; --surface: #FFFFFF; --line: #E2E8F0; --blue-soft: #E0E7FF; --blue-line: #A5B4FC; --yellow-soft: #FEF3C7; --yellow-line: #FCD34D; --amber: #D97706; /* Claude */ --emerald: #059669; /* ChatGPT */ --indigo: #4F46E5; /* Gemini */ --radius: 16px; --radius-sm: 12px; --shadow: 0 8px 28px -8px rgba(30,58,138,.18); --shadow-hover: 0 16px 40px -10px rgba(30,58,138,.28); --font-display: 'Fraunces', Georgia, serif; --font-body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif; --maxw: 1180px; --maxw-single: 750px; /* Senior accessibility defaults */ --base-font: 18px; --line-h: 1.7; --btn-min: 48px; /* Font scaler: set by the A−/A+ buttons. Applied to as `zoom`, so every element (including px-sized text) scales up/down together. */ --a70-scale: 1; } /* ========================================================================== 2. BASE — senior-first ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--senior-bg); color: var(--text-dark); font-family: var(--font-body); font-size: var(--base-font); line-height: var(--line-h); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* High-contrast toggle (applied via .hc on ) */ html.hc body { background: #FFFFFF; color: #000000; } html.hc :root, html.hc { --text-dark:#000; --text-soft:#111827; --surface:#FFFFFF; --bg:#FFFFFF; } html.hc a, html.hc .a70-link { color: #0000EE !important; text-decoration: underline !important; } /* Font scaler (A−/A+) — scales the whole page via `zoom` so px-sized text grows too */ html { zoom: var(--a70-scale, 1); } img { max-width: 100%; height: auto; } a { color: var(--primary-blue); text-decoration: underline; text-underline-offset: 3px; } a:hover { color: var(--primary-blue-dark); } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.25; color: var(--primary-blue); margin: 0 0 .6em; text-wrap: balance; } h1 { font-size: clamp(32px, 4.5vw, 46px); font-weight: 700; } h2 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 700; } h3 { font-size: clamp(22px, 2.6vw, 26px); font-weight: 600; } p { margin: 0 0 1.1em; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Skip link */ .skip-link { position: absolute; left: -999px; top: 8px; z-index: 9999; background: var(--primary-blue); color: #fff; padding: 12px 20px; border-radius: 8px; font-weight: 800; } .skip-link:focus { left: 8px; } /* ========================================================================== 3. SITE HEADER + NAV — identical on every page (home, archive, single) ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 1000; background: var(--surface); border-bottom: 1px solid var(--line); min-height: 72px; } .site-header-inner { max-width: var(--maxw); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .site-branding .site-title { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--primary-blue); margin: 0; text-decoration: none; line-height: 1.2; } .site-branding .site-title:hover { color: var(--primary-blue-dark); } .main-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; } .main-navigation li { position: relative; } .main-navigation a { display: block; padding: 12px 16px; color: var(--text-dark); font-weight: 800; font-size: 17px; text-decoration: none; border-radius: 10px; border-bottom: 3px solid transparent; } .main-navigation a:hover { color: var(--primary-blue); background: var(--blue-soft); } .main-navigation .current-menu-item > a, .main-navigation .current_page_item > a { color: var(--primary-blue); border-bottom-color: var(--primary-blue); } .main-navigation .sub-menu { position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 8px; display: none; flex-direction: column; gap: 2px; } .main-navigation li:hover > .sub-menu, .main-navigation li:focus-within > .sub-menu { display: flex; } .main-navigation .sub-menu a { border-bottom: none; font-size: 16px; } .main-navigation .sub-menu a:hover { background: var(--blue-soft); } /* Mobile nav toggle */ .nav-toggle { display: none; background: none; border: 2px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: 16px; font-weight: 800; color: var(--primary-blue); cursor: pointer; min-height: var(--btn-min); } @media (max-width: 820px) { .nav-toggle { display: inline-block; order: 4; } .main-navigation { display: none; width: 100%; order: 5; } .main-navigation.open { display: block; } .main-navigation ul { flex-direction: column; align-items: stretch; } .main-navigation .sub-menu { position: static; display: none; box-shadow: none; } .main-navigation li:hover > .sub-menu, .main-navigation li:focus-within > .sub-menu { display: flex; } } /* ========================================================================== 4. SENIOR ACCESSIBILITY BAR — inline in the header (font scaler + contrast) ========================================================================== */ .a70-a11y { display: inline-flex; align-items: center; gap: 4px; background: var(--blue-soft); border-radius: 999px; padding: 4px; margin-left: auto; order: 4; } .a70-a11y button { min-width: 40px; min-height: 40px; border: none; border-radius: 999px; font-size: 16px; font-weight: 900; color: var(--primary-blue); background: transparent; cursor: pointer; transition: background .15s ease, color .15s ease; } .a70-a11y button:hover { background: var(--primary-blue); color: #fff; } .a70-a11y .a70-a11y-hc { font-size: 12px; letter-spacing: .5px; padding: 0 12px; font-weight: 800; } @media (max-width: 820px) { .a70-a11y { margin-left: auto; order: 3; } } /* ========================================================================== 5. BUTTONS — min-height 48px, Deep Blue primary ========================================================================== */ .a70-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--btn-min); padding: 14px 28px; border-radius: 12px; font-weight: 800; font-size: 17px; font-family: var(--font-body); text-decoration: none !important; cursor: pointer; border: none; line-height: 1.2; transition: background .15s ease, transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .a70-btn-primary { background: var(--primary-blue); color: #FFFFFF !important; box-shadow: 0 10px 24px -6px rgba(30,58,138,.45); } .a70-btn-primary:hover { background: var(--primary-blue-dark); color: #FFFFFF !important; transform: translateY(-2px); } .a70-btn-secondary { background: var(--surface); color: var(--primary-blue) !important; border: 2.5px solid var(--primary-blue); } .a70-btn-secondary:hover { border-color: var(--primary-blue-dark); color: var(--primary-blue-dark) !important; transform: translateY(-2px); } .a70-btn[disabled] { opacity: .6; cursor: not-allowed; transform: none !important; } /* ========================================================================== 6. HERO ========================================================================== */ .a70-hero { max-width: var(--maxw); margin: 0 auto; padding: 48px 24px 40px; text-align: center; } .a70-hero-eyebrow { display: inline-block; background: var(--blue-soft); color: var(--primary-blue); font-weight: 800; font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; padding: 8px 16px; border-radius: 999px; margin-bottom: 22px; } .a70-hero h1 { font-size: clamp(34px, 5vw, 52px); max-width: 860px; margin: 0 auto 22px; } .a70-hero .a70-hero-sub { max-width: 680px; margin: 0 auto 32px; font-size: 20px; color: var(--text-soft); } .a70-hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ========================================================================== 7. SECTION SHELL ========================================================================== */ .a70-section { padding: 48px 24px; } .a70-section--alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .a70-section-inner { max-width: var(--maxw); margin: 0 auto; } .a70-section-head { text-align: center; max-width: 720px; margin: 0 auto 36px; } .a70-section-head h2 { margin-bottom: 10px; } .a70-section-head p { font-size: 19px; color: var(--text-soft); } /* ========================================================================== 8. INTERACTIVE TOOLS SUITE ========================================================================== */ .a70-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 24px; align-items: start; } .a70-tool { background: var(--surface); border: 1.5px solid var(--line); border-top: 6px solid var(--primary-blue); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px; display: flex; flex-direction: column; gap: 16px; } .a70-tool--scam { border-top-color: var(--scam-red); } .a70-tool--builder { border-top-color: var(--amber); } .a70-tool--learn { border-top-color: var(--indigo); } .a70-tool--safe { border-top-color: var(--emerald); } .a70-tool--health { border-top-color: #0D9488; } .a70-tool-head { display: flex; align-items: center; gap: 12px; } .a70-tool-icon { flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--blue-soft); color: var(--primary-blue); display: flex; align-items: center; justify-content: center; font-size: 24px; } .a70-tool--scam .a70-tool-icon { background: var(--scam-red-soft); color: var(--scam-red); } .a70-tool--builder .a70-tool-icon { background: #FEF3C7; color: var(--amber); } .a70-tool--learn .a70-tool-icon { background: var(--blue-soft); color: var(--indigo); } .a70-tool--safe .a70-tool-icon { background: #D1FAE5; color: var(--emerald); } .a70-tool--health .a70-tool-icon { background: #CCFBF1; color: #0F766E; } .a70-tool h3 { margin: 0; font-size: 22px; } .a70-tool p.a70-tool-desc { margin: 0; color: var(--text-soft); font-size: 16.5px; } /* Accordion — collapsed by default, expands in place (no navigation) */ .a70-tool-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 12px 18px; border: none; border-radius: 10px; background: var(--primary-blue); color: #fff; font-family: var(--font-body); font-size: 18px; font-weight: 800; cursor: pointer; transition: background .15s ease; } .a70-tool-toggle:hover { background: var(--primary-blue-dark); } .a70-tool-toggle:focus-visible { outline: 3px solid var(--blue-line); outline-offset: 2px; } .a70-tool-toggle-caret { font-size: 20px; transition: transform .25s ease; } .a70-tool-toggle[aria-expanded="true"] .a70-tool-toggle-caret { transform: rotate(180deg); } .a70-tool-body { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .4s ease, opacity .3s ease, visibility 0s linear .4s; } .a70-tool-body.is-open { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows .4s ease, opacity .3s ease; } .a70-tool-body-inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 14px; } .a70-tool-close { align-self: flex-start; min-height: 48px; padding: 12px 22px; border: 2px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text-dark); font-family: var(--font-body); font-size: 17px; font-weight: 800; cursor: pointer; } .a70-tool-close:hover { border-color: var(--primary-blue); color: var(--primary-blue); } /* Textarea + inputs */ .a70-field { width: 100%; font-family: var(--font-body); font-size: 17px; color: var(--text-dark); background: var(--senior-bg); border: 2px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; line-height: 1.6; } .a70-field:focus { outline: 3px solid var(--blue-line); border-color: var(--primary-blue); } textarea.a70-field { min-height: 130px; resize: vertical; } .a70-launch-row { display: flex; gap: 10px; flex-wrap: wrap; } .a70-launch { display: inline-flex; align-items: center; gap: 7px; min-height: 46px; padding: 11px 18px; border-radius: 10px; border: none; color: #fff !important; font-size: 16px; font-weight: 800; font-family: var(--font-body); text-decoration: none !important; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; } .a70-launch:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -8px rgba(0,0,0,.35); } .a70-launch--chatgpt { background: var(--emerald); } .a70-launch--claude { background: var(--amber); } .a70-launch--gemini { background: var(--indigo); } .a70-launch:disabled, .a70-launch.is-disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none; } .a70-copy { min-height: 46px; padding: 11px 16px; border-radius: 10px; border: 2px solid var(--line); background: var(--surface); color: var(--text-dark); font-size: 15px; font-weight: 700; font-family: var(--font-body); cursor: pointer; } .a70-copy:hover { border-color: var(--primary-blue); color: var(--primary-blue); } /* Prompt builder selectors */ .a70-builder-row { display: flex; gap: 10px; flex-wrap: wrap; } .a70-builder-row select { flex: 1 1 200px; } .a70-builder-out { background: var(--blue-soft); border: 1px solid var(--blue-line); border-radius: var(--radius-sm); padding: 16px; font-style: italic; font-size: 16px; color: var(--text-dark); min-height: 90px; white-space: pre-wrap; } .a70-builder-out:empty::before { content: "Your ready-to-use prompt will appear here."; color: var(--text-soft); } /* ========================================================================== 9. CATEGORY GUIDES GRID ========================================================================== */ .a70-guides-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; } .a70-guide-card { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px; display: flex; flex-direction: column; gap: 12px; text-align: left; text-decoration: none !important; transition: box-shadow .2s ease, transform .2s ease; } .a70-guide-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); } .a70-guide-card .a70-guide-tag { align-self: flex-start; background: var(--blue-soft); color: var(--primary-blue); font-weight: 800; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; } .a70-guide-card h3 { margin: 0; color: var(--primary-blue); font-size: 22px; } .a70-guide-card p { margin: 0; color: var(--text-soft); font-size: 16.5px; } .a70-guide-card .a70-btn { margin-top: auto; } /* ========================================================================== 10. NEWSLETTER ========================================================================== */ .a70-newsletter { background: var(--primary-blue); border-radius: var(--radius); padding: 40px 32px; color: #fff; text-align: center; box-shadow: var(--shadow); } .a70-newsletter h2 { color: #fff; } .a70-newsletter p { color: #E0E7FF; font-size: 18px; max-width: 560px; margin: 0 auto 24px; } .a70-newsletter-form { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; max-width: 560px; margin: 0 auto; } .a70-newsletter-form input[type="email"] { flex: 1 1 260px; min-height: var(--btn-min); padding: 12px 18px; border-radius: 999px; border: none; font-size: 17px; font-family: var(--font-body); } .a70-newsletter-form .a70-btn { background: var(--primary-blue-dark); color: #fff !important; } .a70-newsletter-form .a70-btn:hover { background: #0f1f5e; } .a70-newsletter-note { font-size: 14px; color: #A5B4FC; margin-top: 14px; } /* ========================================================================== 11. ARCHIVE / BLOG LISTS — Deep Blue cards with a "Read the guide" button ========================================================================== */ .a70-posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; } .a70-post-card { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .2s ease; } .a70-post-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); } .a70-post-card .a70-post-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .a70-post-card h2.a70-post-title { margin: 0; font-size: 23px; } .a70-post-card h2.a70-post-title a { text-decoration: none; color: var(--primary-blue); } .a70-post-card h2.a70-post-title a:hover { color: var(--primary-blue-dark); } .a70-post-meta { font-size: 14.5px; color: var(--text-soft); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .a70-post-excerpt { color: var(--text-dark); font-size: 16.5px; margin: 0; } .a70-post-card .a70-btn { margin-top: auto; align-self: flex-start; } .a70-archive-head { max-width: var(--maxw); margin: 0 auto; padding: 48px 24px 12px; } .a70-archive-head h1 { margin-bottom: 6px; } .a70-archive-head p { color: var(--text-soft); font-size: 18px; } /* ========================================================================== 12. SINGLE POST / PAGE CONTENT ========================================================================== */ .a70-titleblock { max-width: var(--maxw-single); margin: 0 auto; padding: 56px 24px 24px; text-align: center; } .a70-titleblock .a70-tag-pill { display: inline-block; background: var(--blue-soft); color: var(--primary-blue); font-weight: 800; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; margin-bottom: 16px; } .a70-titleblock h1 { max-width: 720px; margin: 0 auto 16px; } .a70-titleblock .a70-byline { display: flex; gap: 12px; justify-content: center; align-items: center; color: var(--text-soft); font-size: 16px; flex-wrap: wrap; } .a70-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--primary-blue); color: #fff; font-weight: 900; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; } .a70-content { max-width: var(--maxw-single); margin: 0 auto; padding: 0 24px 64px; font-size: 19px; line-height: 1.7; } .a70-content h2 { font-size: 30px; margin-top: 1.6em; } .a70-content h3 { font-size: 23px; margin-top: 1.4em; color: var(--text-dark); } .a70-content a { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; } .a70-content ul, .a70-content ol { padding-left: 24px; margin: 0 0 1.2em; } .a70-content li { margin-bottom: .5em; } .a70-content blockquote { border-left: 5px solid var(--primary-blue); background: var(--blue-soft); border-radius: 0 12px 12px 0; margin: 1.6em 0; padding: 20px 24px; font-style: italic; font-size: 20px; } .a70-content img { border-radius: 12px; } .a70-content table { width: 100%; border-collapse: collapse; } .a70-content th, .a70-content td { border: 1px solid var(--line); padding: 12px; text-align: left; } .a70-content th { background: var(--blue-soft); color: var(--primary-blue); } /* Callouts */ .a70-callout { display: flex; gap: 14px; align-items: flex-start; background: var(--blue-soft); border: 1px solid var(--blue-line); border-left: 5px solid var(--primary-blue); border-radius: var(--radius-sm); padding: 22px 24px; margin: 36px 0; } .a70-callout .a70-callout-ico { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--primary-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; margin-top: 2px; } .a70-callout .a70-callout-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--primary-blue); margin: 0 0 6px; } .a70-callout p { font-size: 17.5px; line-height: 1.7; color: var(--text-dark); margin: 0; } .a70-callout--tip { background: var(--yellow-soft); border-color: var(--yellow-line); border-left-color: #F59E0B; } .a70-callout--tip .a70-callout-ico { background: #F59E0B; } .a70-callout--tip .a70-callout-title { color: #92400E; } /* FAQ accordion */ .a70-faq { border-top: 1.5px solid var(--line); margin: 28px 0; } .a70-faq details { border-bottom: 1.5px solid var(--line); } .a70-faq summary { cursor: pointer; list-style: none; position: relative; font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--text-dark); padding: 22px 48px 22px 4px; line-height: 1.35; } .a70-faq summary::-webkit-details-marker { display: none; } .a70-faq summary::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: var(--blue-soft); color: var(--primary-blue); font-size: 22px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .a70-faq details[open] summary::after { content: "\2212"; background: var(--primary-blue); color: #fff; } .a70-faq details[open] summary { color: var(--primary-blue); } .a70-faq .a70-faq-body { padding: 0 4px 24px; font-size: 17.5px; line-height: 1.75; color: var(--text-soft); } /* Prev / next */ .a70-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 32px 0 0; } .a70-prevnext a { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 18px 20px; text-decoration: none; box-shadow: var(--shadow); } .a70-prevnext a:hover { border-color: var(--blue-line); } .a70-prevnext .dir { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-soft); font-weight: 800; } .a70-prevnext .t { font-weight: 800; color: var(--primary-blue); } @media (max-width: 640px) { .a70-prevnext { grid-template-columns: 1fr; } } /* Interactive Prompt Launcher (theme-level, matches prompt-launcher.md) */ .a70-prompt-launcher { background: #FFFFFF; border: 1.5px solid var(--line); border-left: 4px solid var(--emerald); border-radius: var(--radius-sm); padding: 20px; margin: 20px 0 28px; box-shadow: var(--shadow); } .a70-prompt-launcher p { font-size: 18px; font-style: italic; color: var(--text-dark); margin-bottom: 16px; line-height: 1.6; } .a70-prompt-launcher .a70-launch-row { align-items: center; } /* ========================================================================== 13. FOOTER ========================================================================== */ .site-footer { background: var(--senior-bg); border-top: 1px solid var(--line); padding: 40px 24px; } .site-footer-inner { max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; } .site-footer .a70-footer-links { display: flex; gap: 8px; flex-wrap: wrap; } .site-footer .a70-footer-links a { color: var(--primary-blue); font-weight: 800; text-decoration: none; padding: 6px 10px; } .site-footer .a70-footer-links a:hover { color: var(--primary-blue-dark); text-decoration: underline; } .site-footer p { margin: 0; color: var(--text-soft); font-size: 15px; } /* ========================================================================== 14. 404 / SEARCH / MISC ========================================================================== */ .a70-none { text-align: center; padding: 80px 24px; } .a70-searchform { display: flex; gap: 10px; justify-content: center; max-width: 520px; margin: 24px auto; } .a70-searchform input[type="search"] { flex: 1; min-height: var(--btn-min); padding: 12px 16px; border: 2px solid var(--line); border-radius: var(--radius-sm); font-size: 17px; font-family: var(--font-body); } .a70-searchform .a70-btn { padding: 0 24px; } /* ========================================================================== 15. RESPONSIVE ========================================================================== */ @media (max-width: 820px) { .a70-hero { padding-top: 40px; } .a70-tools-grid { grid-template-columns: 1fr; } .a70-guides-grid { grid-template-columns: 1fr; } .a70-posts-grid { grid-template-columns: 1fr; } .a70-section { padding: 36px 18px; } .a70-titleblock { padding-top: 40px; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }