/* style.css - Base Styles for technical-seo-tools.com */ /*============================== CSS Variables: Colour Palette ===============================*/ :root { --color-bg: #111827; --color-bg-alt: #1a2233; --color-bg-light: #f4f8fb; --color-bg-card: #181f2a; --color-primary: #2563eb; --color-primary-dark: #1e40af; --color-primary-gradient: linear-gradient(90deg, #2563eb 0%, #06b6d4 100%); --color-accent: #06b6d4; --color-success: #22c55e; --color-error: #ef4444; --color-warning: #f59e42; --color-text: #f3f4f6; --color-text-light: #9ca3af; --color-link: #38bdf8; --color-border: #273043; --color-input-bg: #22293b; --color-input-border: #334155; --shadow-card: 0 4px 32px 0 rgba(16,22,35,.14); --radius: 12px; --radius-lg: 20px; --radius-sm: 6px; --transition: 0.2s cubic-bezier(.4,0,.2,1); --font-main: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Mono', 'Menlo', monospace; } /*========================== Dark Mode Overrides ===========================*/ @media (prefers-color-scheme: dark) { :root { --color-bg: #111827; --color-bg-alt: #181f2a; --color-bg-light: #232c3b; --color-bg-card: #181f2a; --color-primary: #2563eb; --color-primary-dark: #1e40af; --color-primary-gradient: linear-gradient(90deg, #2563eb 0%, #06b6d4 100%); --color-accent: #06b6d4; --color-success: #22c55e; --color-error: #ef4444; --color-warning: #f59e42; --color-text: #f3f4f6; --color-text-light: #9ca3af; --color-link: #38bdf8; --color-border: #273043; --color-input-bg: #22293b; --color-input-border: #334155; } } /* Light mode: override for .light-theme on */ body.light-theme { --color-bg: #f4f8fb; --color-bg-alt: #e7edf3; --color-bg-light: #fff; --color-bg-card: #fff; --color-primary: #2563eb; --color-primary-dark: #1e40af; --color-primary-gradient: linear-gradient(90deg, #2563eb 0%, #06b6d4 100%); --color-accent: #06b6d4; --color-success: #16a34a; --color-error: #ef4444; --color-warning: #f59e42; --color-text: #1a2233; --color-text-light: #64748b; --color-link: #2563eb; --color-border: #e2e8f0; --color-input-bg: #f1f5f9; --color-input-border: #cbd5e1; } /*========================== Box Sizing Reset ===========================*/ *, *::before, *::after { box-sizing: border-box; } /*========================== Base Styles ===========================*/ html, body { height: 100%; margin: 0; padding: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-main); line-height: 1.6; font-size: 16px; scroll-behavior: smooth; transition: background var(--transition), color var(--transition); } a { color: var(--color-link); text-decoration: none; transition: color var(--transition); } a:hover, a:focus { color: var(--color-accent); text-decoration: underline; } h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em 0; font-weight: 700; letter-spacing: -0.01em; } h1 { font-size: 2.25rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.125rem; } h4 { font-size: 1rem; } h5 { font-size: 0.95rem; } h6 { font-size: 0.85rem; } p { margin: 0 0 1.25em 0; } ul, ol { padding-left: 2em; margin: 1em 0; } img { max-width: 100%; border-radius: var(--radius-sm); box-shadow: none; display: block; } /*========================== Cards ===========================*/ .card { background: var(--color-bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 2rem; margin-bottom: 2rem; border: 1px solid var(--color-border); transition: box-shadow var(--transition), border var(--transition); } .card:hover, .card:focus-within { box-shadow: 0 6px 48px 0 rgba(24,40,75,0.20); border-color: var(--color-primary); } /*========================== Buttons ===========================*/ .button, .btn { display: inline-block; padding: 0.75em 2em; border-radius: var(--radius); border: none; background: var(--color-primary-gradient); color: #fff; font-weight: 600; font-size: 1rem; box-shadow: 0 2px 12px 0 rgba(37,99,235,0.10); transition: background var(--transition), box-shadow var(--transition), color var(--transition); cursor: pointer; letter-spacing: .03em; outline: none; } .button:hover, .btn:hover, .button:focus, .btn:focus { background: var(--color-primary-dark); color: #fff; box-shadow: 0 4px 20px 0 rgba(37,99,235,0.16); } .button.secondary, .btn.secondary { background: var(--color-bg-alt); color: var(--color-primary); border: 1px solid var(--color-primary); } .button.secondary:hover, .btn.secondary:hover { background: var(--color-primary); color: #fff; } .button.ghost, .btn.ghost { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); } .button.ghost:hover, .btn.ghost:hover { background: var(--color-primary); color: #fff; } .button:disabled, .btn:disabled, .button[disabled] { opacity: 0.5; pointer-events: none; } .button.sm, .btn.sm { padding: 0.5em 1.2em; font-size: 0.92rem; } .button.lg, .btn.lg { padding: 1em 2.5em; font-size: 1.12rem; } /*========================== Forms & Inputs ===========================*/ input, select, textarea { width: 100%; max-width: 100%; padding: 0.75em 1em; font-size: 1rem; color: var(--color-text); background: var(--color-input-bg); border: 1.5px solid var(--color-input-border); border-radius: var(--radius); margin-bottom: 1.25em; transition: border-color var(--transition), background var(--transition); outline: none; font-family: var(--font-main); resize: vertical; } input:focus, textarea:focus, select:focus { border-color: var(--color-primary); background: var(--color-bg-light); color:var(--color-primary); } input[type="checkbox"], input[type="radio"] { width: 1.1em; height: 1.1em; margin-right: 0.5em; accent-color: var(--color-primary); } label { font-size: 1em; color: var(--color-text-light); margin-bottom: 0.5em; display: block; } .form-group { margin-bottom: 1.5em; } input.error, textarea.error, select.error { border-color: var(--color-error); background: #440e13; } input.success, textarea.success, select.success { border-color: var(--color-success); background: #083a22; } input[disabled], textarea[disabled], select[disabled] { opacity: 0.6; pointer-events: none; } /* Toggle Switch */ .toggle-switch { display: inline-flex; align-items: center; cursor: pointer; } .toggle-switch input[type="checkbox"] { display: none; } .toggle-slider { width: 42px; height: 24px; background: var(--color-input-bg); border-radius: 16px; position: relative; transition: background var(--transition); margin-right: 0.75em; } .toggle-slider::before { content: ''; display: block; width: 20px; height: 20px; background: var(--color-primary); border-radius: 50%; position: absolute; left: 2px; top: 2px; transition: transform var(--transition), background var(--transition); } .toggle-switch input[type="checkbox"]:checked + .toggle-slider::before { transform: translateX(18px); background: var(--color-accent); } .toggle-switch input[type="checkbox"]:checked + .toggle-slider { background: var(--color-primary); } /*========================== Utility Classes ===========================*/ .shadow { box-shadow: var(--shadow-card); } .rounded { border-radius: var(--radius) !important; } .rounded-lg { border-radius: var(--radius-lg) !important; } .rounded-sm { border-radius: var(--radius-sm) !important; } .mb-2 { margin-bottom: 0.5em !important; } .mb-4 { margin-bottom: 1.5em !important; } .mt-4 { margin-top: 1.5em !important; } .p-2 { padding: 0.5em !important; } .p-4 { padding: 1.5em !important; } .text-center { text-align: center !important; } .text-right { text-align: right !important; } .text-muted { color: var(--color-text-light) !important; } .w-100 { width: 100% !important; } .max-w-sm { max-width: 480px !important; } .max-w-md { max-width: 720px !important; } .max-w-lg { max-width: 1024px !important; } .hide { display: none !important; } /*========================== Navbar & Footer ===========================*/ .navbar { width: 100%; background: var(--color-bg-card); padding: 1rem 2rem; box-shadow: 0 2px 10px 0 rgba(16,22,35,.04); display: flex; align-items: center; justify-content: space-between; } .navbar .logo { font-size: 1.5em; font-weight: 700; letter-spacing: -0.01em; color: var(--color-primary); text-decoration: none; } .navbar .nav-links { display: flex; gap: 1.5em; } .navbar .nav-links a { color: var(--color-text-light); font-weight: 500; text-decoration: none; transition: color var(--transition); } .navbar .nav-links a.active, .navbar .nav-links a:hover { color: var(--color-accent); } .footer { background: var(--color-bg-card); color: var(--color-text-light); padding: 2em 0; text-align: center; font-size: 0.96em; margin-top: 4em; } /*========================== Alerts / Messages ===========================*/ .alert { border-radius: var(--radius); padding: 1em 1.5em; margin-bottom: 2em; font-weight: 500; display: flex; align-items: center; gap: 1em; } .alert-success { background: rgba(34,197,94,0.12); color: var(--color-success); border: 1.5px solid var(--color-success); } .alert-error { background: rgba(239,68,68,0.14); color: var(--color-error); border: 1.5px solid var(--color-error); } .alert-warning { background: rgba(245,158,66,0.12); color: var(--color-warning); border: 1.5px solid var(--color-warning); } .alert-info { background: rgba(6,182,212,0.10); color: var(--color-accent); border: 1.5px solid var(--color-accent); } /*========================== Tables ===========================*/ .table { width: 100%; border-collapse: collapse; background: var(--color-bg-card); border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 12px 0 rgba(16,22,35,.10); margin-bottom: 2em; } .table th, .table td { padding: 1em; text-align: left; border-bottom: 1px solid var(--color-border); } .table th { background: var(--color-bg-alt); color: var(--color-text); font-weight: 600; border-bottom: 2px solid var(--color-primary); } .table tr:last-child td { border-bottom: none; } /*========================== Code & Pre ===========================*/ code, pre { font-family: var(--font-mono); background: var(--color-bg-alt); color: var(--color-accent); font-size: 0.96em; padding: 0.1em 0.4em; border-radius: var(--radius-sm); } pre { padding: 1em; overflow-x: auto; margin-bottom: 2em; } ::-webkit-scrollbar { width: 10px; background: var(--color-bg-alt); border-radius: var(--radius); } ::-webkit-scrollbar-thumb { background: var(--color-bg-card); border-radius: var(--radius); } ::selection { background: var(--color-primary); color: #fff; } /*========================== Animations ===========================*/ @keyframes fade-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fade-in .6s cubic-bezier(.45,.05,.55,.95) both; }