/* Theme Name: YT downloader CUSTOM THEME ThemeURI: https://wordpress.org/themes/YTdownloader Author: JOSHUA NIMAKO Author URI: https://youtubedownloader.media Description: YT downloader CUSTOM THEME Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: responsive-layout, accessibility-ready Text Domain: joshua-nimako */ /* YT Downloader – Full Updated CSS (mobile-first + light/dark toggle) Move this into your theme's style.css */ /* ----------------------------- Global Reset & Base ------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; display: flex; flex-direction: column; min-height: 100dvh; font-family: "Roboto Condensed", "Montserrat", Arial, Helvetica, sans-serif; line-height: 1.5; background: var(--color-secondary); color: var(--color-text); } /* Visually Hidden (for accessible labels) */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 1px, 1px); white-space: nowrap; border: 0; } /* ----------------------------- Theme Tokens & Mapping We switch with: ------------------------------ */ /* Defaults (will be overridden by data-theme) */ :root { --font-size-xl: 1.5rem; /* 24px at base 16 */ --font-size-lg: 1.25rem; /* 20px */ --font-size-md: 1.125rem; /* 18px */ --font-size-base: 1rem; /* 16px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-xs: 0.75rem; /* 12px */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --radius-sm: 0.5rem; --shadow-sm: 0 2px 4px rgba(0,0,0,.1); --shadow-lg: 0 4px 12px rgba(0,0,0,.18); /* Fallback to dark (matches your original design) */ --color-primary: hsl(0 0% 100%); --color-secondary: hsl(0 0% 10%); /* page bg */ --color-tertiary: hsl(0 0% 17%); /* surfaces/cards */ --color-accent: hsl(0 100% 50%); /* brand red */ --color-accent-dark: hsl(0 100% 42%); --color-border: hsl(0 0% 30%); --color-border-light: hsl(0 0% 25%); --color-primary-light: hsl(0 0% 80%); --color-neutral: hsl(0 0% 70%); --color-danger: hsl(0 100% 50%); --color-text: var(--color-primary); /* Table-specific for clarity across themes */ --table-head-bg: hsl(0 0% 22%); --table-head-fg: hsl(0 0% 100%); } /* Light theme */ :root[data-theme="light"] { --color-primary: hsl(0 0% 12%); /* primary text */ --color-secondary: hsl(0 0% 100%); /* page bg */ --color-tertiary: hsl(0 0% 98%); /* surfaces/cards */ --color-accent: hsl(0 100% 50%); --color-accent-dark: hsl(0 100% 42%); --color-border: hsl(0 0% 85%); --color-border-light: hsl(0 0% 90%); --color-primary-light: hsl(0 0% 40%); --color-neutral: hsl(0 0% 40%); --color-danger: hsl(0 100% 50%); --color-text: var(--color-primary); --table-head-bg: hsl(0 0% 96%); --table-head-fg: hsl(0 0% 12%); } /* Dark theme */ :root[data-theme="dark"] { --color-primary: hsl(0 0% 100%); --color-secondary: hsl(0 0% 10%); --color-tertiary: hsl(0 0% 17%); --color-accent: hsl(0 100% 50%); --color-accent-dark: hsl(0 100% 42%); --color-border: hsl(0 0% 30%); --color-border-light: hsl(0 0% 25%); --color-primary-light: hsl(0 0% 80%); --color-neutral: hsl(0 0% 70%); --color-danger: hsl(0 100% 50%); --color-text: var(--color-primary); --table-head-bg: hsl(0 0% 22%); --table-head-fg: hsl(0 0% 100%); } /* ----------------------------- Typography & Links ------------------------------ */ html { font-size: 16px; } @media (min-width: 768px) { html { font-size: 18px; } } h1, h2, h3, h4, h5, h6 { color: var(--color-primary); line-height: 1.25; margin: 0 0 var(--spacing-sm); } h1 { font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 700; text-align: center; } h2 { font-size: clamp(1.25rem, 3vw, 1.5rem); font-weight: 700; text-align: center; } h3 { font-size: var(--font-size-md); font-weight: 700; } p { font-size: var(--font-size-base); color: var(--color-neutral); margin: 0 0 var(--spacing-md); text-align: center; } a { color: var(--color-accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ----------------------------- Header / Nav (generic) ------------------------------ */ header { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-md); background: var(--color-secondary); box-shadow: var(--shadow-sm); } header a { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-primary); } nav ul { display: flex; list-style: none; margin: 0; padding: 0; } nav li { margin-left: var(--spacing-lg); } nav a { color: var(--color-primary); } nav a:hover { color: var(--color-accent); } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu { display: none; position: absolute; background: var(--color-tertiary); box-shadow: var(--shadow-sm); list-style: none; margin-top: var(--spacing-sm); padding: var(--spacing-sm); border: 1px solid var(--color-border); } .dropdown-menu a { color: var(--color-primary); } /* ----------------------------- YT Downloader Card + Header ------------------------------ */ .YTDownloader { background: var(--color-tertiary); color: var(--color-primary); border-radius: 1rem; box-shadow: var(--shadow-sm); padding: 1.25rem; max-width: 840px; width: 100%; margin: 1rem auto; display: flex; flex-direction: column; gap: 1rem; border: 1px solid var(--color-border); } .yt-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .yt-headings p { margin-top: .25rem; } /* Theme Toggle Button (Sun/Moon) */ .theme-toggle { appearance: none; border: 1px solid var(--color-border); background: var(--color-secondary); color: var(--color-primary); border-radius: 999px; padding: .45rem .6rem; line-height: 0; cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; box-shadow: var(--shadow-sm); } .theme-toggle:hover { border-color: var(--color-accent); } .theme-toggle .icon-sun, .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: block; } /* ----------------------------- Input Area (mobile-first) ------------------------------ */ .input-area { display: grid; grid-template-columns: 1fr; gap: .6rem; margin: var(--spacing-md) 0; } .input-area input { width: 100%; padding: .75rem .9rem; font-size: var(--font-size-base); border: 1px solid var(--color-border); border-radius: .5rem; outline: none; transition: border-color .15s ease; color: hsl(0 0% 10%); /* input text black for contrast */ background: #fff; /* ensure readable in both themes */ } :root[data-theme="dark"] .input-area input { background: hsl(0 0% 12%); color: var(--color-primary); border-color: var(--color-border); } .input-area input:focus { border-color: var(--color-accent); } .input-area button { padding: .75rem 1rem; font-size: var(--font-size-md); font-weight: 700; background: var(--color-accent); color: #fff; border: none; border-radius: .5rem; cursor: pointer; transition: background-color .2s ease-in-out, transform .05s ease; width: 100%; min-height: 46px; } .input-area button:hover { background: var(--color-accent-dark); } .input-area button:active { transform: translateY(1px); } @media (min-width: 640px) { .input-area { grid-template-columns: 1fr auto; } .input-area button { width: auto; } } /* Invalid Input Feedback */ .input-area input.invalid { border: 2px solid hsl(0 100% 50%); background: hsl(0 100% 95%); animation: shake .3s; } @keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } /* ----------------------------- Video Details ------------------------------ */ #video-details { display: none; align-items: center; gap: 1rem; } #video-details:not(.hidden) { display: flex; } #video-details img { width: 120px; height: auto; border-radius: .5rem; object-fit: cover; } .video-info { display: flex; flex-direction: column; gap: .35rem; } .video-info h2 { margin: 0; font-size: 1.25rem; font-weight: 700; } .video-info p { margin: 0; color: var(--color-primary-light); } /* ----------------------------- Download Options (Tables) ------------------------------ */ #download-options { display: none; background: var(--color-tertiary); border-radius: .5rem; padding: 1rem; border: 1px solid var(--color-border); overflow-x: auto; -webkit-overflow-scrolling: touch; } #download-options:not(.hidden) { display: block; } #download-options h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 1rem; } #download-options table { width: 100%; min-width: 560px; /* enable horizontal scroll on small screens */ border-collapse: collapse; } #download-options th, #download-options td { padding: .75rem; text-align: left; border-bottom: 1px solid var(--color-border-light); } #download-options th { background: var(--table-head-bg); color: var(--table-head-fg); } #download-options tbody tr:last-child td { border-bottom: 0; } /* Download Button (rows) */ .download-btn { display: inline-block; padding: var(--spacing-sm) var(--spacing-md); background: var(--color-accent); color: #fff; text-decoration: none; border-radius: var(--radius-sm); font-weight: 700; text-align: center; transition: background-color .2s ease; } .download-btn:hover { background: var(--color-accent-dark); } /* ----------------------------- Features Grid ------------------------------ */ .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--spacing-lg); margin: var(--spacing-lg) 0; } .feature { padding: var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--spacing-sm); background: var(--color-tertiary); box-shadow: var(--shadow-sm); text-align: center; transition: transform .15s ease, box-shadow .15s ease; } .feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .feature h3 { color: var(--color-primary); margin-bottom: var(--spacing-sm); } .feature p { font-size: var(--font-size-sm); color: var(--color-neutral); } /* ----------------------------- FAQ ------------------------------ */ #faq { margin: var(--spacing-lg) 0; padding: var(--spacing-md); background: var(--color-tertiary); border-radius: var(--spacing-sm); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); } #faq h2 { margin-bottom: var(--spacing-md); } details { margin-bottom: var(--spacing-md); padding: var(--spacing-sm); border: 1px solid var(--color-border); border-radius: var(--spacing-sm); background: var(--color-secondary); } details[open] { border-color: var(--color-accent); } details summary { font-size: var(--font-size-md); font-weight: 700; color: var(--color-primary); cursor: pointer; } details summary:hover { color: var(--color-accent); } details p, details ol, details ul { font-size: var(--font-size-sm); color: var(--color-neutral); margin-top: var(--spacing-sm); text-align: left; } /* ----------------------------- Figures / Steps ------------------------------ */ .figure { align-items: center; } .figure-with-svg { display: flex; align-items: center; gap: 1rem; } .figure-with-svg svg { width: 64px; height: 64px; flex-shrink: 0; } .figure-with-svg h2 { margin: 0; font-size: var(--font-size-lg); color: var(--color-primary); line-height: 1.4; } .step { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; } .step svg { flex-shrink: 0; } .step p { margin: 0; color: var(--color-primary); text-align: left; } /* ----------------------------- Utility ------------------------------ */ .hidden { display: none !important; } /* ----------------------------- Responsive Nav & Footer (generic) ------------------------------ */ @media (max-width: 768px) { nav ul { flex-direction: column; align-items: flex-start; padding: var(--spacing-sm); } nav li { margin: 0 0 var(--spacing-sm); } .footer-nav ul { display: flex; flex-direction: column; gap: var(--spacing-xs); padding: var(--spacing-sm); } .footer-content { text-align: center; } } /* ----------------------------- Containers (optional helper) ------------------------------ */ .container { max-width: 1100px; margin-inline: auto; padding-inline: 1rem; } /* ===== Header (mobile-first) ===== */ .site-header { position: sticky; top: 0; z-index: 1000; background: var(--color-secondary); border-bottom: 1px solid var(--color-border); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 64px; } /* Brand */ .brand { display: inline-flex; align-items: center; gap: .5rem; } .brand-logo { height: 36px; width: auto; display: block; } .brand-text { font-weight: 800; color: var(--color-primary); white-space: nowrap; } /* Hamburger */ .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-tertiary); cursor: pointer; } .nav-toggle-bar { width: 22px; height: 2px; background: var(--color-primary); margin: 2px 0; display: block; } /* Primary nav – mobile drawer by default */ .primary-nav { position: fixed; inset: 0 0 0 auto; width: 82%; max-width: 360px; background: var(--color-secondary); border-left: 1px solid var(--color-border); transform: translateX(100%); transition: transform .25s ease; padding: 1rem; } .primary-nav .menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .25rem; } .primary-nav a, .lang-toggle { display: block; padding: .9rem 1rem; border-radius: .5rem; color: var(--color-primary); text-decoration: none; font-weight: 600; } .primary-nav a:hover, .lang-toggle:hover { background: var(--color-tertiary); } /* Language dropdown (tap-to-open on mobile) */ .dropdown { position: relative; } .lang-toggle { width: 100%; text-align: left; background: transparent; border: 1px solid var(--color-border); cursor: pointer; } .dropdown-menu { position: static; margin-top: .25rem; padding: .5rem; border-radius: .5rem; border: 1px solid var(--color-border); background: var(--color-tertiary); } .dropdown-menu li a { padding: .6rem .75rem; border-radius: .35rem; } .dropdown-menu li a:hover { background: var(--color-secondary); } /* Backdrop when drawer open */ .nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); } /* Open states toggled via JS */ .site-header.nav-open .primary-nav { transform: translateX(0); } .site-header.nav-open .nav-backdrop { display: block; } .site-header .nav-backdrop[hidden] { display: none !important; } /* Desktop ≥ 980px */ @media (min-width: 980px) { .header-inner { min-height: 72px; } .nav-toggle { display: none; } .primary-nav { position: static; transform: none; width: auto; max-width: none; padding: 0; border: 0; background: transparent; } .primary-nav .menu { flex-direction: row; gap: .5rem; } .primary-nav a, .lang-toggle { padding: .6rem .8rem; border: 0; } .dropdown { position: relative; } .dropdown-menu { position: absolute; right: 0; top: 100%; min-width: 200px; display: none; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } .nav-backdrop { display: none !important; } } /* Tweak huge logo on very small phones */ @media (max-width: 360px) { .brand-logo { height: 30px; } .brand-text { font-size: .95rem; } }