/** * Social Media Downloader Theme — Main Stylesheet * * Single bundled CSS file. Covers: * - CSS reset & base typography * - Design tokens (CSS variables — overridden by Customizer in ) * - Dark mode (via [data-theme="dark"]) * - Layout primitives (container, sections, grid) * - Header & mega menu * - Mobile off-canvas menu * - Search overlay * - Hero & downloader UI * - Tool/platform cards * - FAQ accordion * - Breadcrumbs * - Blog cards & single post * - Footer * - 404 page * - Buttons, badges, chips * - Micro-interactions (respecting prefers-reduced-motion) * * @package SocialMediaDownloader * @version 1.0.0 */ /* ============================================================ 1. DESIGN TOKENS ============================================================ */ :root { /* Colors — Light mode defaults. Overridden by Customizer output. */ --primary: #6366f1; --primary-hover: #4f46e5; --primary-soft: rgba(99, 102, 241, 0.10); --background: #ffffff; --surface: #f8fafc; --surface-secondary: #f1f5f9; --text: #0f172a; --text-secondary: #475569; --text-muted: #64748b; /* WCAG AA: 4.6:1 on #fff (was #94a3b8 = 2.6:1) */ --border: #e2e8f0; --border-strong: #cbd5e1; --success: #10b981; --warning: #f59e0b; --error: #ef4444; /* Dark mode overrides (applied via [data-theme="dark"]) */ --dark-bg: #0b1020; --dark-surface: #121829; --dark-surface-alt: #1a2138; --dark-text: #e2e8f0; --dark-text-secondary: #94a3b8; --dark-border: #1e293b; /* Typography */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; --font-mono: "SF Mono", Monaco, Menlo, Consolas, "Liberation Mono", "Courier New", monospace; /* Type scale (fluid) */ --text-display: clamp(2.4rem, 5vw, 4rem); --text-h1: clamp(2rem, 4vw, 3rem); --text-h2: clamp(1.5rem, 3vw, 2rem); --text-h3: clamp(1.25rem, 2vw, 1.5rem); --text-body: 1rem; --text-small: 0.875rem; --text-caption: 0.75rem; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; /* Layout */ --container-max: 1200px; --container-narrow: 720px; --radius: 14px; --radius-sm: 8px; --radius-lg: 24px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12); --shadow-xl: 0 24px 60px rgba(15, 23, 42, 0.18); /* Header */ --header-height: 64px; --header-bg: rgba(255, 255, 255, 0.85); /* Transitions */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); /* Z-index */ --z-header: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400; } [data-theme="dark"] { --primary: #818cf8; --primary-hover: #a5b4fc; --primary-soft: rgba(129, 140, 248, 0.16); --background: var(--dark-bg); --surface: var(--dark-surface); --surface-secondary: var(--dark-surface-alt); --text: var(--dark-text); --text-secondary: #cbd5e1; /* brightened for AA */ --text-muted: #94a3b8; /* WCAG AA: 5.6:1 on #0b1020 (was #64748b = 4.2:1) */ --border: var(--dark-border); --border-strong: #334155; --header-bg: rgba(11, 16, 32, 0.85); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5); --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.6); } /* ============================================================ 2. RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; } /* Anchor offset for sticky header — prevents target from being hidden under 64px header */ :target, [id] { scroll-margin-top: 80px; } /* Honor reduced-motion at the top level too */ body.smd-reduce-motion html { scroll-behavior: auto; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-sans); font-size: var(--text-body); line-height: 1.6; color: var(--text); background: var(--background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background var(--transition-base), color var(--transition-base); overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--text); } h1 { font-size: var(--text-h1); } h2 { font-size: var(--text-h2); } h3 { font-size: var(--text-h3); } p { line-height: 1.7; } a { color: var(--primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--primary-hover); } img, svg, video { max-width: 100%; height: auto; display: block; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } ul, ol { padding-left: 1.25rem; } li { margin: 0.25rem 0; } ::selection { background: var(--primary); color: #fff; } :focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 4px; } /* High-contrast focus ring for buttons that match primary color */ .smd-btn--primary:focus-visible { outline-color: var(--text); outline-offset: 2px; } /* Screen-reader only */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); /* modern replacement for clip: rect(0,0,0,0) */ white-space: nowrap; border: 0; } /* Skip link */ .smd-skip-link { position: absolute; top: -100px; left: 0; background: var(--primary); color: #fff; padding: var(--space-3) var(--space-4); z-index: var(--z-toast); border-radius: 0 0 var(--radius-sm) 0; font-weight: 600; } .smd-skip-link:focus { top: 0; color: #fff; } /* ============================================================ 3. LAYOUT PRIMITIVES ============================================================ */ .smd-container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-4); } .smd-section { padding: var(--space-8) 0; } @media (max-width: 768px) { .smd-section { padding: var(--space-7) 0; } } .smd-prose { max-width: var(--container-narrow); margin: 0 auto; } .smd-prose__body p, .smd-prose__body ul, .smd-prose__body ol { margin-bottom: var(--space-4); } .smd-prose__body h2 { margin: var(--space-6) 0 var(--space-3); } .smd-prose__body h3 { margin: var(--space-5) 0 var(--space-2); } .smd-prose__body a { text-decoration: underline; text-decoration-color: var(--primary-soft); text-underline-offset: 2px; } .smd-prose__body a:hover { text-decoration-color: var(--primary); } .smd-prose__body code { font-family: var(--font-mono); font-size: 0.875em; background: var(--surface-secondary); padding: 0.125rem 0.375rem; border-radius: 4px; } .smd-prose__body blockquote { border-left: 3px solid var(--primary); padding-left: var(--space-4); margin: var(--space-4) 0; color: var(--text-secondary); font-style: italic; } /* Section heading */ .smd-section-heading { text-align: center; max-width: 720px; margin: 0 auto var(--space-6); } .smd-section-heading__eyebrow { display: inline-block; font-size: var(--text-caption); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary); background: var(--primary-soft); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); margin-bottom: var(--space-3); } .smd-section-heading__title { font-size: var(--text-h2); margin-bottom: var(--space-2); } .smd-section-heading__subtitle { color: var(--text-secondary); font-size: 1.05rem; } /* ============================================================ 4. BUTTONS ============================================================ */ .smd-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-weight: 600; font-size: 0.95rem; padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); border: 1px solid transparent; background: var(--primary); color: #fff; text-decoration: none; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); cursor: pointer; white-space: nowrap; } .smd-btn:hover { background: var(--primary-hover); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); } .smd-btn:active { transform: translateY(0); } .smd-btn--sm { padding: var(--space-2) var(--space-4); font-size: 0.875rem; } .smd-btn--lg { padding: var(--space-4) var(--space-6); font-size: 1.05rem; } .smd-btn--primary { background: var(--primary); color: #fff; } .smd-btn--primary:hover { background: var(--primary-hover); color: #fff; } .smd-btn--ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } .smd-btn--ghost:hover { background: var(--surface); color: var(--text); border-color: var(--primary); } .smd-btn--outline { background: transparent; color: var(--primary); border-color: var(--primary); } .smd-btn--outline:hover { background: var(--primary); color: #fff; } /* ============================================================ 5. BADGES & CHIPS ============================================================ */ .smd-badge { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-caption); font-weight: 600; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--surface-secondary); color: var(--text-secondary); } .smd-badge--featured { background: var(--primary-soft); color: var(--primary); } .smd-badge--platform { background: color-mix(in srgb, var(--platform-color, var(--primary)) 12%, transparent); color: var(--platform-color, var(--primary)); } .smd-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-full); font-size: var(--text-small); font-weight: 500; color: var(--text); text-decoration: none; transition: all var(--transition-fast); } .smd-chip:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); } .smd-chip--filter { cursor: pointer; user-select: none; } .smd-chip--filter input { position: absolute; opacity: 0; pointer-events: none; } .smd-chip--filter:has(input:checked) { background: var(--primary); border-color: var(--primary); color: #fff; } /* ============================================================ 6. ICONS ============================================================ */ .smd-icon { display: inline-block; vertical-align: middle; width: 1em; height: 1em; flex-shrink: 0; fill: none; stroke: currentColor; } .smd-icon--xs { width: 14px; height: 14px; } .smd-icon--sm { width: 18px; height: 18px; } .smd-icon--md { width: 24px; height: 24px; } .smd-icon--lg { width: 32px; height: 32px; } /* ============================================================ 7. HEADER ============================================================ */ .smd-header { position: relative; z-index: var(--z-header); background: var(--header-bg); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--border); transition: background var(--transition-base), border-color var(--transition-base); } /* Sticky variant — only enabled if admin enabled it (default on) */ .smd-header--sticky { position: sticky; top: 0; } /* Fallback for browsers without backdrop-filter */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .smd-header { background: var(--background); } } .smd-header__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-4); height: var(--header-height); display: flex; align-items: center; gap: var(--space-4); } .smd-header__left { display: flex; align-items: center; gap: var(--space-3); } .smd-header__logo { flex-shrink: 0; } .smd-header__nav { flex: 1; display: flex; justify-content: center; gap: var(--space-5); } .smd-header__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } .smd-header__action { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); color: var(--text); transition: background var(--transition-fast), color var(--transition-fast); } .smd-header__action:hover { background: var(--surface); color: var(--primary); } .smd-header__burger { display: none; width: 40px; height: 40px; flex-direction: column; justify-content: center; align-items: center; gap: 4px; border-radius: var(--radius-sm); } .smd-header__burger span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform var(--transition-fast), opacity var(--transition-fast); } .smd-header__cta { margin-left: var(--space-2); } .smd-logo { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: 1.05rem; color: var(--text); text-decoration: none; } .smd-logo:hover { color: var(--text); } .smd-logo__mark { color: var(--primary); display: inline-flex; } .smd-logo__text { letter-spacing: -0.02em; } /* Theme toggle */ .smd-theme-toggle__moon { display: none; } [data-theme="dark"] .smd-theme-toggle__sun { display: none; } [data-theme="dark"] .smd-theme-toggle__moon { display: inline-block; } /* Primary menu (fallback) */ .smd-menu { list-style: none; display: flex; gap: var(--space-4); padding: 0; margin: 0; } .smd-menu > li { position: relative; } .smd-menu > li > a { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-3); color: var(--text); font-weight: 500; font-size: 0.95rem; border-radius: var(--radius-sm); transition: color var(--transition-fast), background var(--transition-fast); } .smd-menu > li > a:hover { color: var(--primary); background: var(--surface); } /* ============================================================ 8. MEGA MENU ============================================================ */ .smd-mega-menu { display: flex; align-items: center; } .smd-mega-menu__list { list-style: none; display: flex; gap: var(--space-2); padding: 0; margin: 0; } .smd-mega-menu__item { position: relative; } .smd-mega-menu__trigger { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); color: var(--text); font-weight: 500; font-size: 0.95rem; border-radius: var(--radius-sm); transition: color var(--transition-fast), background var(--transition-fast); } .smd-mega-menu__trigger:hover, .smd-mega-menu__item:hover > .smd-mega-menu__trigger, .smd-mega-menu__item:focus-within > .smd-mega-menu__trigger { color: var(--primary); background: var(--surface); } .smd-mega-menu__icon { display: inline-flex; color: var(--platform-color, var(--primary)); } .smd-mega-menu__chevron { transition: transform var(--transition-fast); } .smd-mega-menu__item:hover .smd-mega-menu__chevron { transform: rotate(180deg); } .smd-mega-menu__panel { position: absolute; top: 100%; left: 0; min-width: 320px; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: var(--space-4); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast); z-index: 10; } /* Edge alignment: last two menu items right-align their panels to prevent overflow */ .smd-mega-menu__item:nth-last-child(-n+2) .smd-mega-menu__panel { left: auto; right: 0; } .smd-mega-menu__item:hover .smd-mega-menu__panel, .smd-mega-menu__item:focus-within .smd-mega-menu__panel { opacity: 1; visibility: visible; transform: translateY(0); } .smd-mega-menu__panel-inner { display: grid; grid-template-columns: 1fr; gap: var(--space-3); } .smd-mega-menu__panel-all { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); background: var(--surface); border-radius: var(--radius-sm); font-size: var(--text-small); color: var(--text-secondary); transition: background var(--transition-fast); } .smd-mega-menu__panel-all:hover { background: var(--primary-soft); } .smd-mega-menu__panel-all strong { color: var(--text); font-size: var(--text-body); } .smd-mega-menu__tools { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .smd-mega-menu__tools a { display: block; padding: var(--space-2) var(--space-3); color: var(--text-secondary); font-size: var(--text-small); border-radius: var(--radius-sm); transition: all var(--transition-fast); } .smd-mega-menu__tools a:hover { background: var(--surface); color: var(--primary); } .smd-mega-menu__all-tools { padding: var(--space-2) var(--space-4) !important; background: var(--primary) !important; color: #fff !important; border-radius: var(--radius-sm); font-weight: 600; } .smd-mega-menu__all-tools:hover { background: var(--primary-hover) !important; color: #fff !important; } /* ============================================================ 9. MOBILE MENU ============================================================ */ .smd-mobile-menu { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; visibility: hidden; } .smd-mobile-menu[hidden] { display: none; } .smd-mobile-menu.is-open { visibility: visible; } .smd-mobile-menu__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity var(--transition-base); } .smd-mobile-menu.is-open .smd-mobile-menu__overlay { opacity: 1; } .smd-mobile-menu__panel { position: relative; width: min(360px, 100vw); background: var(--background); height: 100%; overflow-y: auto; transform: translateX(-100%); transition: transform var(--transition-base); display: flex; flex-direction: column; } .smd-mobile-menu.is-open .smd-mobile-menu__panel { transform: translateX(0); } .smd-mobile-menu__header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--background); } .smd-mobile-menu__title { font-weight: 700; } .smd-mobile-menu__close { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--text-secondary); } .smd-mobile-menu__close:hover { background: var(--surface); color: var(--text); } .smd-mobile-menu__search { padding: var(--space-4); } .smd-mobile-menu__nav ul { list-style: none; padding: 0 var(--space-2); margin: 0; } .smd-mobile-menu__nav > ul > li > a, .smd-mobile-menu__platform-head > a { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); color: var(--text); font-weight: 500; border-radius: var(--radius-sm); } .smd-mobile-menu__platform-head { display: flex; justify-content: space-between; align-items: center; } .smd-mobile-menu__expand { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); transition: transform var(--transition-fast); } .smd-mobile-menu__expand[aria-expanded="true"] { transform: rotate(180deg); } .smd-mobile-menu__tools { list-style: none; padding: 0 var(--space-2) var(--space-2) var(--space-7); margin: 0; } .smd-mobile-menu__tools li a { display: block; padding: var(--space-2) var(--space-3); color: var(--text-secondary); font-size: var(--text-small); border-radius: var(--radius-sm); } .smd-mobile-menu__tools li a:hover { background: var(--surface); color: var(--primary); } /* ============================================================ 10. SEARCH OVERLAY ============================================================ */ .smd-search-overlay { position: fixed; inset: 0; z-index: var(--z-modal); visibility: hidden; display: flex; justify-content: center; align-items: flex-start; padding-top: 10vh; } .smd-search-overlay[hidden] { display: none; } .smd-search-overlay.is-open { visibility: visible; } .smd-search-overlay__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--transition-base); } .smd-search-overlay.is-open .smd-search-overlay__backdrop { opacity: 1; } .smd-search-overlay__panel { position: relative; width: min(640px, 90vw); background: var(--background); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); overflow: hidden; transform: translateY(-12px); opacity: 0; transition: transform var(--transition-base), opacity var(--transition-base); } .smd-search-overlay.is-open .smd-search-overlay__panel { transform: translateY(0); opacity: 1; } .smd-search-overlay__form { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--border); } .smd-search-overlay__label { flex: 1; display: flex; align-items: center; gap: var(--space-3); color: var(--text-secondary); } .smd-search-overlay__input { flex: 1; border: 0; background: transparent; font-size: 1.05rem; color: var(--text); } .smd-search-overlay__input:focus { outline: none; } .smd-search-overlay__close { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--text-secondary); } .smd-search-overlay__results { max-height: 60vh; overflow-y: auto; padding: var(--space-3); } .smd-search-overlay__hint { color: var(--text-secondary); margin-bottom: var(--space-3); } .smd-search-overlay__suggestions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } .smd-search-overlay__suggestions-label { font-size: var(--text-caption); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-right: var(--space-1); } .smd-search-overlay__result { display: block; padding: var(--space-3); border-radius: var(--radius-sm); color: var(--text); transition: background var(--transition-fast); } .smd-search-overlay__result:hover { background: var(--surface); } .smd-search-overlay__result-title { font-weight: 600; } .smd-search-overlay__result-meta { font-size: var(--text-small); color: var(--text-muted); margin-top: 2px; } /* ============================================================ 11. HERO ============================================================ */ .smd-hero { position: relative; padding: var(--space-9) 0 var(--space-8); overflow: hidden; background: linear-gradient(180deg, var(--surface) 0%, var(--background) 100%); } .smd-hero__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .smd-hero__glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5; } .smd-hero__glow--1 { width: 600px; height: 600px; background: var(--glow-color, var(--primary)); opacity: 0.18; top: -200px; right: -100px; } .smd-hero__glow--2 { width: 500px; height: 500px; background: var(--primary); opacity: 0.12; bottom: -150px; left: -100px; } .smd-hero__inner { position: relative; z-index: 1; text-align: center; max-width: 880px; } .smd-hero__eyebrow { margin-bottom: var(--space-4); } .smd-hero__title { font-size: var(--text-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: var(--space-4); overflow-wrap: break-word; /* prevent long titles from overflowing on 320px */ hyphens: auto; word-break: break-word; } .smd-hero__subhead { font-size: 1.15rem; color: var(--text-secondary); margin: 0 auto var(--space-6); max-width: 640px; } .smd-hero__trust { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-5); padding: 0; margin-top: var(--space-6); color: var(--text-secondary); font-size: var(--text-small); } .smd-hero__trust li { display: inline-flex; align-items: center; gap: var(--space-1); } .smd-hero__trust .smd-icon { color: var(--success); } /* ============================================================ 12. DOWNLOADER UI ============================================================ */ .smd-downloader { max-width: 720px; margin: 0 auto; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-4); } .smd-downloader__form { display: flex; gap: var(--space-3); align-items: stretch; } .smd-downloader__input-wrap { position: relative; flex: 1; display: flex; align-items: center; } .smd-downloader__input-icon { position: absolute; left: var(--space-3); color: var(--text-muted); pointer-events: none; } .smd-downloader__input { width: 100%; padding: var(--space-4) var(--space-3) var(--space-4) calc(var(--space-3) * 4 + 20px); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--background); color: var(--text); font-size: 1.0625rem; /* 17px — above iOS zoom threshold (was 1rem) */ transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .smd-downloader__input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); } .smd-downloader__input::placeholder { color: var(--text-muted); } .smd-downloader__paste { position: absolute; right: var(--space-2); display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); background: var(--surface); border-radius: var(--radius-sm); font-size: var(--text-small); font-weight: 600; color: var(--text-secondary); transition: all var(--transition-fast); } .smd-downloader__paste:hover { background: var(--primary-soft); color: var(--primary); } .smd-downloader__submit { flex-shrink: 0; } .smd-downloader__spinner { display: none; animation: smd-spin 0.8s linear infinite; } .smd-downloader.is-loading .smd-downloader__spinner { display: inline-block; } .smd-downloader.is-loading .smd-downloader__submit-label { opacity: 0.7; } @keyframes smd-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .smd-downloader__status { margin-top: var(--space-3); min-height: 1.5rem; font-size: var(--text-small); color: var(--text-secondary); text-align: center; } .smd-downloader__status.is-error { color: var(--error); } .smd-downloader__status.is-success { color: var(--success); } .smd-downloader__result { margin-top: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); background: var(--surface); animation: smd-fade-in var(--transition-base); } .smd-downloader__result-thumb { width: 100%; max-width: 320px; border-radius: var(--radius-sm); aspect-ratio: 16/9; background: var(--surface-secondary); object-fit: cover; margin: 0 auto var(--space-3); } .smd-downloader__result-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); justify-content: center; } .smd-downloader__result-meta .smd-badge { background: var(--background); } .smd-downloader__result-actions { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; } .smd-downloader__note { text-align: center; font-size: var(--text-caption); color: var(--text-muted); margin-top: var(--space-3); } @keyframes smd-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ 13. TOOL & PLATFORM CARDS ============================================================ */ .smd-supported__grid, .smd-platforms-grid, .smd-posts-grid, .smd-features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); } .smd-tool-card { display: flex; flex-direction: column; padding: var(--space-5); background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); text-decoration: none; } .smd-tool-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary); } .smd-tool-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); gap: var(--space-2); } .smd-tool-card__platform { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-small); color: var(--text-secondary); font-weight: 500; } .smd-tool-card__platform .smd-icon { color: var(--platform-color, var(--primary)); } .smd-tool-card__title { font-size: 1.1rem; margin-bottom: var(--space-2); } .smd-tool-card__desc { flex: 1; color: var(--text-secondary); font-size: var(--text-small); margin-bottom: var(--space-4); } .smd-tool-card__meta { font-size: var(--text-caption); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-3); } .smd-tool-card__cta { align-self: flex-start; } /* Platform card */ .smd-platform-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-5); background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); position: relative; overflow: hidden; } .smd-platform-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--platform-color) 8%, transparent), transparent); opacity: 0; transition: opacity var(--transition-fast); pointer-events: none; } .smd-platform-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--platform-color); } .smd-platform-card:hover::before { opacity: 1; } .smd-platform-card__icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--platform-color) 12%, transparent); color: var(--platform-color); border-radius: var(--radius); } .smd-platform-card__title { font-size: 1.15rem; } .smd-platform-card__desc { flex: 1; color: var(--text-secondary); font-size: var(--text-small); } .smd-platform-card__footer { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: var(--space-2); } .smd-platform-card__count { font-size: var(--text-small); color: var(--text-muted); } /* ============================================================ 14. HOW IT WORKS ============================================================ */ .smd-how-it-works { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); counter-reset: step; } .smd-how-it-works__step { position: relative; padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .smd-how-it-works__num { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; background: var(--primary); color: #fff; border-radius: var(--radius-full); font-weight: 700; margin-bottom: var(--space-3); } .smd-how-it-works__title { margin-bottom: var(--space-2); } .smd-how-it-works__desc { color: var(--text-secondary); font-size: var(--text-small); } /* ============================================================ 15. FEATURES ============================================================ */ .smd-feature { padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: transform var(--transition-fast), border-color var(--transition-fast); } .smd-feature:hover { transform: translateY(-2px); border-color: var(--primary); } .smd-feature__icon { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary); border-radius: var(--radius-sm); margin-bottom: var(--space-3); } .smd-feature__title { font-size: 1.05rem; margin-bottom: var(--space-2); } .smd-feature__desc { color: var(--text-secondary); font-size: var(--text-small); } /* ============================================================ 16. QUICK ANSWER ============================================================ */ .smd-quick-answer { background: var(--primary-soft); border-left: 3px solid var(--primary); padding: var(--space-5); border-radius: var(--radius); font-size: 1.05rem; } .smd-quick-answer p { margin: 0; } /* ============================================================ 17. FAQ ============================================================ */ .smd-faq { display: flex; flex-direction: column; gap: var(--space-2); } .smd-faq__item { background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color var(--transition-fast); } .smd-faq__item[open] { border-color: var(--primary); } .smd-faq__q { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-4); font-weight: 600; cursor: pointer; list-style: none; } .smd-faq__q::-webkit-details-marker { display: none; } .smd-faq__chevron { transition: transform var(--transition-fast); flex-shrink: 0; } .smd-faq__item[open] .smd-faq__chevron { transform: rotate(180deg); } .smd-faq__a { padding: 0 var(--space-4) var(--space-4); color: var(--text-secondary); } .smd-faq__a p { margin: 0 0 var(--space-2); } .smd-faq__a p:last-child { margin-bottom: 0; } /* ============================================================ 18. BREADCRUMBS ============================================================ */ .smd-breadcrumbs { margin-bottom: var(--space-4); } .smd-breadcrumbs__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); font-size: var(--text-small); color: var(--text-muted); } .smd-breadcrumbs__item { display: inline-flex; align-items: center; gap: var(--space-1); } .smd-breadcrumbs__link { color: var(--text-secondary); } .smd-breadcrumbs__link:hover { color: var(--primary); } .smd-breadcrumbs__sep { color: var(--text-muted); } .smd-breadcrumbs__current { color: var(--text); font-weight: 500; } /* ============================================================ 19. CTA BAND ============================================================ */ .smd-cta-band { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-6); background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%); color: #fff; border-radius: var(--radius-lg); overflow: hidden; position: relative; } .smd-cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 50%, rgba(255,255,255,0.15), transparent 50%); pointer-events: none; } .smd-cta-band__content { position: relative; } .smd-cta-band__title { color: #fff; margin-bottom: var(--space-2); } .smd-cta-band__text { color: rgba(255,255,255,0.9); margin: 0; } .smd-cta-band__action { position: relative; flex-shrink: 0; } .smd-cta-band .smd-btn { background: #fff; color: var(--primary); } .smd-cta-band .smd-btn:hover { background: rgba(255,255,255,0.95); color: var(--primary-hover); } .smd-cta-band--inline { background: var(--surface); border: 1px solid var(--border); color: var(--text); } .smd-cta-band--inline::before { display: none; } .smd-cta-band--inline .smd-cta-band__title { color: var(--text); } .smd-cta-band--inline .smd-cta-band__text { color: var(--text-secondary); } .smd-cta-band--inline .smd-btn { background: var(--primary); color: #fff; } .smd-cta-band--inline .smd-btn:hover { background: var(--primary-hover); color: #fff; } /* ============================================================ 20. BLOG ============================================================ */ .smd-post-card { display: flex; flex-direction: column; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .smd-post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .smd-post-card__thumb { display: block; aspect-ratio: 16/9; background: var(--surface); overflow: hidden; } .smd-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-base); } .smd-post-card:hover .smd-post-card__thumb img { transform: scale(1.05); } .smd-post-card__body { padding: var(--space-4); } .smd-post-card__meta { display: flex; gap: var(--space-2); font-size: var(--text-caption); color: var(--text-muted); margin-bottom: var(--space-2); } .smd-post-card__title { font-size: 1.15rem; margin-bottom: var(--space-2); } .smd-post-card__title a { color: var(--text); } .smd-post-card__title a:hover { color: var(--primary); } .smd-post-card__excerpt { color: var(--text-secondary); font-size: var(--text-small); margin-bottom: var(--space-3); } .smd-post-card__link { font-size: var(--text-small); font-weight: 600; color: var(--primary); } /* Single post */ .smd-single__header { text-align: center; margin-bottom: var(--space-6); } .smd-single__title { font-size: var(--text-h1); margin: var(--space-4) 0 var(--space-3); } .smd-single__meta { display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-small); color: var(--text-secondary); } .smd-single__author { display: inline-flex; align-items: center; gap: var(--space-2); } .smd-single__avatar { border-radius: var(--radius-full); } .smd-single__featured { margin: var(--space-5) 0; border-radius: var(--radius-lg); overflow: hidden; } .smd-single__featured img { width: 100%; } .smd-single__footer { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border); } .smd-single__cats, .smd-single__tags { font-size: var(--text-small); margin-bottom: var(--space-2); } .smd-single__cats span, .smd-single__tags span { color: var(--text-muted); } .smd-featured-post { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-bottom: var(--space-6); background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; } .smd-featured-post__thumb { display: block; aspect-ratio: 16/10; background: var(--surface-secondary); overflow: hidden; } .smd-featured-post__thumb img { width: 100%; height: 100%; object-fit: cover; } .smd-featured-post__body { padding: var(--space-5); display: flex; flex-direction: column; justify-content: center; } .smd-featured-post__body h2 { margin: var(--space-2) 0; } .smd-featured-post__body p { color: var(--text-secondary); margin-bottom: var(--space-4); } .smd-related-posts { background: var(--surface); } /* ============================================================ 21. SEARCH RESULTS & 404 ============================================================ */ .smd-search-result { padding: var(--space-4); border-bottom: 1px solid var(--border); } .smd-search-result h2 { font-size: 1.15rem; margin-bottom: var(--space-1); } .smd-search-result__url { color: var(--text-secondary); font-size: var(--text-small); margin-bottom: var(--space-1); } .smd-search-result__link { color: var(--primary); font-size: var(--text-small); word-break: break-all; } .smd-404 { padding: var(--space-9) 0; text-align: center; } .smd-404__inner { max-width: 720px; margin: 0 auto; } .smd-404__code { font-size: clamp(5rem, 15vw, 10rem); font-weight: 800; line-height: 1; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; margin-bottom: var(--space-3); } .smd-404__title { font-size: var(--text-h1); margin-bottom: var(--space-3); } .smd-404__text { color: var(--text-secondary); margin-bottom: var(--space-5); } .smd-404__search { max-width: 480px; margin: 0 auto var(--space-7); } .smd-404__quick, .smd-404__platforms { margin-bottom: var(--space-7); text-align: left; } .smd-404__quick h2, .smd-404__platforms h2 { text-align: center; margin-bottom: var(--space-4); } /* Empty state */ .smd-empty-state { text-align: center; padding: var(--space-7) var(--space-4); } .smd-empty-state h2 { margin-bottom: var(--space-2); } /* ============================================================ 22. FOOTER ============================================================ */ .smd-footer { background: var(--surface); border-top: 1px solid var(--border); padding: var(--space-7) 0 var(--space-4); margin-top: var(--space-8); } .smd-footer__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-4); } .smd-footer__top { margin-bottom: var(--space-6); } .smd-footer__brand { max-width: 360px; } .smd-logo--footer { margin-bottom: var(--space-2); } .smd-footer__tagline { color: var(--text-secondary); font-size: var(--text-small); } .smd-footer__columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-5); padding: var(--space-5) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: var(--space-4); } .smd-footer__title { font-size: var(--text-small); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-3); color: var(--text); } .smd-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); } .smd-footer__col a { color: var(--text-secondary); font-size: var(--text-small); } .smd-footer__col a:hover { color: var(--primary); } .smd-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding-top: var(--space-4); } .smd-footer__copyright { font-size: var(--text-small); color: var(--text-secondary); margin: 0; } .smd-footer__disclaimer { font-size: var(--text-caption); color: var(--text-muted); margin: var(--space-2) 0 0; flex: 1 1 100%; } .smd-theme-toggle--inline { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--text-secondary); } .smd-theme-toggle--inline:hover { background: var(--background); color: var(--primary); } /* ============================================================ 23. PAGINATION ============================================================ */ .smd-pagination { margin-top: var(--space-6); } .smd-pagination ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; gap: var(--space-1); } .smd-pagination a, .smd-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--background); color: var(--text); font-size: var(--text-small); font-weight: 500; } .smd-pagination a:hover { border-color: var(--primary); color: var(--primary); } .smd-pagination .current { background: var(--primary); border-color: var(--primary); color: #fff; } /* ============================================================ 24. TOOLS DIRECTORY FILTERS ============================================================ */ .smd-tools-search { max-width: 560px; margin: var(--space-5) auto 0; } .smd-tools-search__label { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .smd-tools-search__label:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); } .smd-tools-search__label input { flex: 1; border: 0; background: transparent; font-size: 1rem; } .smd-tools-search__label input:focus { outline: none; } .smd-tools-filters { display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: center; margin-top: var(--space-4); } .smd-filter-group { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; border: 0; padding: 0; margin: 0; } .smd-filter-group legend { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; width: auto; margin-right: var(--space-2); padding: 0; } /* Supported list */ .smd-supported-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-2); } .smd-supported-list li { display: flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); padding: var(--space-2); } .smd-supported-list .smd-icon { color: var(--success); } /* ============================================================ 25. ADMIN ============================================================ */ .smd-faq-row { padding: var(--space-3); border: 1px solid #ddd; margin-bottom: var(--space-3); background: #fff; } /* ============================================================ 26. TOAST NOTIFICATIONS ============================================================ */ .smd-toast { position: fixed; bottom: var(--space-4); right: var(--space-4); z-index: var(--z-toast); background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: var(--space-3) var(--space-4); display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-small); max-width: 320px; transform: translateX(120%); transition: transform var(--transition-base); } .smd-toast.is-visible { transform: translateX(0); } .smd-toast--success { border-color: var(--success); } .smd-toast--success .smd-icon { color: var(--success); } .smd-toast--error { border-color: var(--error); } .smd-toast--error .smd-icon { color: var(--error); } /* ============================================================ 27. SEARCH FORM & COMMENTS ============================================================ */ .smd-search-form { display: flex; gap: var(--space-2); align-items: stretch; } .smd-search-form__input-wrap { position: relative; flex: 1; display: flex; align-items: center; } .smd-search-form__icon { position: absolute; left: var(--space-3); color: var(--text-muted); pointer-events: none; } .smd-search-form__input { width: 100%; padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) * 3 + 20px); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--background); color: var(--text); font-size: 1.0625rem; /* 17px — above iOS zoom threshold */ transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .smd-search-form__input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); } .smd-comments { margin-top: var(--space-6); } .smd-comments__title { font-size: 1.5rem; margin-bottom: var(--space-4); } .smd-comments__list { list-style: none; padding: 0; } .smd-comments__list .comment { padding: var(--space-4); border-bottom: 1px solid var(--border); } .smd-comments__closed { color: var(--text-secondary); font-style: italic; } .smd-comment-form { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); } .smd-comment-form input[type="text"], .smd-comment-form input[type="email"], .smd-comment-form input[type="url"], .smd-comment-form textarea { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--background); color: var(--text); } .smd-comment-form input:focus, .smd-comment-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .smd-comments__reply-title { font-size: 1.25rem; margin-bottom: var(--space-3); } /* ============================================================ 28. RESPONSIVE ============================================================ */ @media (max-width: 900px) { .smd-header__nav { display: none; } .smd-header__burger { display: inline-flex; } .smd-mega-menu { display: none; } .smd-header__cta { display: none; } } @media (max-width: 768px) { .smd-hero { padding: var(--space-7) 0; } .smd-hero__title { font-size: clamp(1.8rem, 8vw, 2.5rem); } .smd-hero__subhead { font-size: 1rem; } .smd-downloader { padding: var(--space-3); } .smd-downloader__form { flex-direction: column; gap: var(--space-2); } .smd-downloader__submit { width: 100%; } .smd-cta-band { flex-direction: column; text-align: center; gap: var(--space-4); } .smd-featured-post { grid-template-columns: 1fr; } .smd-footer__bottom { justify-content: center; text-align: center; } .smd-footer__copyright { width: 100%; } .smd-section-heading__title { font-size: 1.5rem; } /* Hero glow: reduce blur on mobile for performance */ .smd-hero__glow { filter: blur(40px); } .smd-hero__glow--1, .smd-hero__glow--2 { width: 300px; height: 300px; } /* Breadcrumbs: hide intermediate crumbs on mobile to save vertical space */ .smd-breadcrumbs__item:not(:first-child):not(:last-child) { display: none; } .smd-breadcrumbs__item:first-child::after { content: '… '; color: var(--text-muted); } } @media (min-width: 481px) and (max-width: 900px) { .smd-supported__grid, .smd-platforms-grid, .smd-posts-grid, .smd-features-grid { grid-template-columns: repeat(2, 1fr); /* tablet: 2 cols, not single */ } } @media (max-width: 480px) { .smd-supported__grid, .smd-platforms-grid, .smd-posts-grid, .smd-features-grid { grid-template-columns: 1fr; } .smd-btn { white-space: normal; } /* allow long button labels to wrap */ .smd-pagination a, .smd-pagination span { min-width: 44px; height: 44px; /* WCAG 2.5.5 minimum touch target */ } } @media (max-width: 480px) { .smd-hero__trust { gap: var(--space-3); } .smd-hero__trust li { font-size: var(--text-caption); } .smd-downloader__paste span { display: none; } .smd-tool-card { padding: var(--space-4); } .smd-pagination a, .smd-pagination span { min-width: 44px; height: 44px; } .smd-btn { white-space: normal; } /* Toast: above the on-screen keyboard on mobile */ .smd-toast { top: var(--space-4); right: var(--space-4); bottom: auto; max-width: calc(100vw - var(--space-4) * 2); } } /* Very small (320px) */ @media (max-width: 360px) { .smd-container { padding: 0 var(--space-3); } .smd-hero__title { font-size: 1.6rem; } } /* Print */ @media print { .smd-header, .smd-footer, .smd-downloader, .smd-cta-band { display: none; } body { background: #fff; color: #000; } } /* ============================================================ 28. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Reduced motion toggle (admin can force it site-wide) */ body.smd-reduce-motion *, body.smd-reduce-motion *::before, body.smd-reduce-motion *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } /* ============================================================ 29. UTILITY ============================================================ */ .is-hidden { display: none !important; } .text-center { text-align: center; } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } /* ============================================================ 30. NEW COMPONENTS (added in audit v1.1.0) ============================================================ */ /* Tool card: title-link covers the whole title area, plus whole card hover affordance */ .smd-tool-card__title-link { color: var(--text); text-decoration: none; } .smd-tool-card__title-link:hover { color: var(--primary); } .smd-tool-card__title-link::after { /* Make whole card clickable via stretched-link pattern */ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; } .smd-tool-card { position: relative; } .smd-tool-card__cta { position: relative; z-index: 1; } .smd-tool-card__cta:hover { transform: translateY(-1px); } /* Platform card: same stretched-link pattern */ .smd-platform-card__title-link { color: var(--text); text-decoration: none; } .smd-platform-card__title-link:hover { color: var(--platform-color, var(--primary)); } .smd-platform-card__title-link::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; } .smd-platform-card { position: relative; } .smd-platform-card__footer { position: relative; z-index: 1; } /* ============================================================ 31. SKELETON LOADER (downloader result placeholder) ============================================================ */ .smd-downloader__skeleton { display: flex; flex-direction: column; gap: var(--space-3); } .smd-skeleton { background: linear-gradient(90deg, var(--surface-secondary) 0%, var(--surface) 50%, var(--surface-secondary) 100%); background-size: 200% 100%; animation: smd-shimmer 1.5s infinite; border-radius: var(--radius-sm); } .smd-skeleton--thumb { width: 100%; max-width: 320px; margin: 0 auto; aspect-ratio: 16/9; border-radius: var(--radius); } .smd-skeleton--line { height: 16px; width: 100%; } .smd-skeleton--short { height: 16px; width: 60%; margin: 0 auto; } @keyframes smd-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================================ 32. DEMO MODE NOTICE (no engine configured) ============================================================ */ .smd-downloader__demo { padding: var(--space-4); background: var(--primary-soft); border: 1px dashed var(--primary); border-radius: var(--radius); text-align: center; } .smd-downloader__demo p { margin: 0; color: var(--text-secondary); font-size: var(--text-small); } /* ============================================================ 33. BACK-TO-TOP BUTTON ============================================================ */ .smd-back-to-top { position: fixed; bottom: var(--space-5); right: var(--space-5); z-index: var(--z-overlay); width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); transition: opacity var(--transition-base), transform var(--transition-base); opacity: 0; transform: translateY(20px); pointer-events: none; } .smd-back-to-top[hidden] { display: none; } .smd-back-to-top:not([hidden]) { opacity: 1; transform: translateY(0); pointer-events: auto; } .smd-back-to-top:hover { background: var(--primary-hover); transform: translateY(-2px); } .smd-back-to-top:focus-visible { outline-color: var(--text); } @media (max-width: 480px) { .smd-back-to-top { bottom: var(--space-4); right: var(--space-4); } } /* ============================================================ 34. KEYBOARD SHORTCUT HINT (Cmd/Ctrl+K) ============================================================ */ .smd-kbd-hint { display: none; position: absolute; top: 100%; right: 0; margin-top: 4px; padding: 2px 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; font-size: 11px; font-family: var(--font-mono); color: var(--text-muted); white-space: nowrap; pointer-events: none; } .smd-header__search-toggle:hover .smd-kbd-hint, .smd-header__search-toggle:focus-visible .smd-kbd-hint { display: block; } .smd-header__search-toggle { position: relative; } @media (max-width: 480px) { .smd-kbd-hint { display: none !important; } } /* ============================================================ 35. PAGINATION CURRENT PAGE — dark mode contrast fix ============================================================ */ [data-theme="dark"] .smd-pagination .current { background: var(--primary); border-color: var(--primary); color: var(--dark-bg); /* dark text on bright primary for AA in dark mode */ } /* ============================================================ 36. POST CARD — better thumbnail alt + missing-thumbnail fallback ============================================================ */ .smd-post-card__thumb { display: block; aspect-ratio: 16/9; background: linear-gradient(135deg, var(--surface-secondary), var(--surface)); overflow: hidden; } /* ============================================================ 37. FEATURED POST THUMBNAIL — print color adjust ============================================================ */ img { print-color-adjust: exact; -webkit-print-color-adjust: exact; } /* ============================================================ 38. REDUCED MOTION — disable scroll-behavior smooth ============================================================ */ body.smd-reduce-motion { scroll-behavior: auto; } body.smd-reduce-motion * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } /* ============================================================ 39. 404 PAGE — solid color fallback for the gradient text ============================================================ */ .smd-404__code { color: var(--primary); /* solid fallback */ background: linear-gradient(135deg, var(--primary), var(--primary-hover)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ============================================================ 40. INPUT ZOOM PREVENTION — bump font-size above 16px on iOS ============================================================ */ .smd-search-overlay__input { font-size: 1.0625rem; } .smd-mobile-menu__search input[type="search"] { font-size: 1.0625rem; } /* ============================================================ 41. OVERLAY VISIBILITY (fix hidden+transition conflict) * Use visibility: hidden instead of display: none during transitions ============================================================ */ .smd-mobile-menu, .smd-search-overlay { visibility: hidden; display: block !important; opacity: 0; pointer-events: none; transition: opacity var(--transition-base), visibility var(--transition-base); } .smd-mobile-menu[hidden], .smd-search-overlay[hidden] { visibility: hidden; opacity: 0; pointer-events: none; } .smd-mobile-menu.is-open, .smd-search-overlay.is-open { visibility: visible; opacity: 1; pointer-events: auto; } /* ============================================================ 42. DARK MODE — minor tweaks for new components ============================================================ */ [data-theme="dark"] .smd-cta-band--inline { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .smd-theme-toggle--inline:hover { background: var(--surface-secondary); } [data-theme="dark"] .smd-mobile-menu__panel { background: var(--background); } /* ============================================================ 43. LEGAL PAGES (Privacy, Terms, DMCA, Disclaimer) ============================================================ */ .smd-page--legal .smd-page-header__desc { font-size: var(--text-small); color: var(--text-muted); } .smd-dmca-contact { margin-top: var(--space-6); padding: var(--space-5); background: var(--surface); border-radius: var(--radius); border-left: 3px solid var(--primary); } .smd-dmca-contact h2 { margin-bottom: var(--space-3); } /* ============================================================ 44. ABOUT PAGE ============================================================ */ .smd-page--about .smd-page__content { max-width: 760px; margin: 0 auto; } /* ============================================================ 45. CONTACT PAGE ============================================================ */ .smd-contact { max-width: 760px; margin: 0 auto; } .smd-contact__intro { margin-bottom: var(--space-6); } .smd-contact__methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); } .smd-contact__method { display: flex; flex-direction: column; gap: 4px; padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; transition: border-color var(--transition-fast), transform var(--transition-fast); } .smd-contact__method:hover { border-color: var(--primary); transform: translateY(-2px); } .smd-contact__method-label { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; } .smd-contact__method-value { color: var(--text); font-weight: 600; word-break: break-all; } .smd-contact__form-wrap { padding-top: var(--space-5); border-top: 1px solid var(--border); } .smd-contact__form-wrap h2 { margin-bottom: var(--space-4); } /* ============================================================ 46. MAINTENANCE MODE * The maintenance template (page-maintenance.php) is a standalone HTML * page with inline critical CSS — it does NOT use the .smd-maintenance * classes below. These rules are kept for backward compatibility only. ============================================================ */ /* (Old .smd-maintenance* rules removed — see page-maintenance.php for inline styles) */ /* ============================================================ 47. SEO CLUSTER — Media Types Grid (Section 6.5) ============================================================ */ .smd-seo-cluster { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .smd-media-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); margin-bottom: var(--space-5); } .smd-media-type { padding: var(--space-4); background: var(--background); border-radius: var(--radius); border: 1px solid var(--border); } .smd-media-type h3 { font-size: 1.1rem; margin-bottom: var(--space-2); color: var(--primary); } .smd-media-type p { font-size: var(--text-small); color: var(--text-secondary); margin: 0; line-height: 1.6; } .smd-seo-cluster__note { font-size: var(--text-small); color: var(--text-muted); font-style: italic; border-top: 1px solid var(--border); padding-top: var(--space-4); margin-top: var(--space-4); } /* ============================================================ 48. CONTACT FORM (AJAX-powered) ============================================================ */ .smd-contact-form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 640px; margin-top: var(--space-4); } .smd-contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } @media (max-width: 600px) { .smd-contact-form__row { grid-template-columns: 1fr; } } .smd-contact-form__field { display: flex; flex-direction: column; gap: var(--space-1); } .smd-contact-form__field label { font-weight: 600; font-size: var(--text-small); color: var(--text); } .smd-required { color: var(--error); } .smd-contact-form__field input, .smd-contact-form__field textarea { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--background); color: var(--text); font-size: 1.0625rem; /* 17px — above iOS zoom threshold */ font-family: inherit; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .smd-contact-form__field input:focus, .smd-contact-form__field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); } .smd-contact-form__field textarea { resize: vertical; min-height: 120px; } .smd-contact-form button[type="submit"] { align-self: flex-start; position: relative; } .smd-contact-form__spinner { display: none; animation: smd-spin 0.8s linear infinite; } .smd-contact-form[aria-busy="true"] .smd-contact-form__spinner { display: inline-block; } .smd-contact-form__status { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: var(--text-small); } .smd-contact-form__status.is-success { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); border: 1px solid var(--success); } .smd-contact-form__status.is-error { background: color-mix(in srgb, var(--error) 12%, transparent); color: var(--error); border: 1px solid var(--error); } .smd-contact__methods-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); margin-top: var(--space-3); } .smd-contact__method-value { overflow-wrap: anywhere; /* better than word-break: break-all for emails */ } /* ============================================================ 49. MAINTENANCE PAGE — body tweaks (standalone template) ============================================================ */ body.smd-maintenance-body { background: var(--background); } body.smd-maintenance-body .smd-header, body.smd-maintenance-body .smd-footer, body.smd-maintenance-body .smd-back-to-top { display: none !important; }