/*
Theme Name: ToolLaunchPro
Description: A professional WordPress theme for developer websites hosting in-house developed tools. Features custom post types, AJAX filtering, and modern responsive design matching the provided HTML layout.
Version: 1.0.0
Author: ToolLaunchPro Team
Text Domain: toollaunchpro
Domain Path: /languages
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Tags: custom-post-types, ajax, responsive, developer-tools, professional
*/

/* Reset and Base Styles - Matching HTML design */ *, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%} sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0px}.inset-y-0{top:0px;bottom:0px}.bottom-4{bottom:1rem}.left-0{left:0px}.left-3{left:0.75rem}.left-4{left:1rem}.right-4{right:1rem}.top-0{top:0px}.top-1\/2{top:50%}.top-4{top:1rem}.z-10{z-index:10}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.mb-12{margin-bottom:3rem}.mb-3{margin-bottom:0.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:0.25rem}.ml-2{margin-left:0.5rem}.ml-4{margin-left:1rem}.mr-2{margin-right:0.5rem}.mr-3{margin-right:0.75rem}.mr-4{margin-right:1rem}.mt-12{margin-top:3rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-16{height:4rem}.h-20{height:5rem}.h-3{height:0.75rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.min-h-screen{min-height:100vh}.w-1\/2{width:50%}.w-10{width:2.5rem}.w-16{width:4rem}.w-20{width:5rem}.w-3{width:0.75rem}.w-3\/4{width:75%}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-8{width:2rem}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-7xl{max-width:80rem}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}.-translate-y-1\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-12{gap:3rem}.gap-2{gap:0.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-x-2 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.5rem * var(--tw-space-x-reverse));margin-left:calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-4 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-8 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-2 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-3 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.75rem * var(--tw-space-y-reverse))}.space-y-4 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.rounded{border-radius:0.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.rounded-xl{border-radius:0.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.border-gray-800{--tw-border-opacity:1;border-color:rgb(31 41 55 / var(--tw-border-opacity, 1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-accent{--tw-bg-opacity:1;background-color:rgb(16 185 129 / var(--tw-bg-opacity, 1))}.bg-amber-100{--tw-bg-opacity:1;background-color:rgb(254 243 199 / var(--tw-bg-opacity, 1))}.bg-black\/20{background-color:rgb(0 0 0 / 0.2)}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231 / var(--tw-bg-opacity, 1))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94 / var(--tw-bg-opacity, 1))} .bg-indigo-100{--tw-bg-opacity:1;background-color:rgb(224 231 255 / var(--tw-bg-opacity, 1))}.bg-orange-100{--tw-bg-opacity:1;background-color:rgb(255 237 213 / var(--tw-bg-opacity, 1))}.bg-pink-100{--tw-bg-opacity:1;background-color:rgb(252 231 243 / var(--tw-bg-opacity, 1))}.bg-primary{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.bg-purple-100{--tw-bg-opacity:1;background-color:rgb(243 232 255 / var(--tw-bg-opacity, 1))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226 / var(--tw-bg-opacity, 1))}
.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.bg-teal-100{--tw-bg-opacity:1;background-color:rgb(204 251 241 / var(--tw-bg-opacity, 1))}.bg-white\/20{background-color:rgb(255 255 255 / 0.2)}.bg-white\/90{background-color:rgb(255 255 255 / 0.9)}.bg-yellow-100{--tw-bg-opacity:1;background-color:rgb(254 249 195 / var(--tw-bg-opacity, 1))}.bg-yellow-500{--tw-bg-opacity:1;background-color:rgb(234 179 8 / var(--tw-bg-opacity, 1))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right, var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-blue-400{--tw-gradient-from:#60a5fa var(--tw-gradient-from-position);--tw-gradient-to:rgb(96 165 250 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-green-400{--tw-gradient-from:#4ade80 var(--tw-gradient-from-position);--tw-gradient-to:rgb(74 222 128 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-primary{--tw-gradient-from:#2563EB var(--tw-gradient-from-position);--tw-gradient-to:rgb(37 99 235 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-purple-400{--tw-gradient-from:#c084fc var(--tw-gradient-from-position);--tw-gradient-to:rgb(192 132 252 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-blue-500{--tw-gradient-to:#3b82f6 var(--tw-gradient-to-position)}.to-pink-500{--tw-gradient-to:#ec4899 var(--tw-gradient-to-position)}.to-primary-dark{--tw-gradient-to:#1d4ed8 var(--tw-gradient-to-position)}.to-purple-500{--tw-gradient-to:#a855f7 var(--tw-gradient-to-position)}.p-2{padding:0.5rem}.p-3{padding:0.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-2{padding-left:0.5rem;padding-right:0.5rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.pl-10{padding-left:2.5rem}.pr-4{padding-right:1rem}.pt-8{padding-top:2rem}.text-center{text-align:center}.font-mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.text-amber-600{--tw-text-opacity:1;color:rgb(217 119 6 / var(--tw-text-opacity, 1))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.text-blue-800{--tw-text-opacity:1;color:rgb(30 64 175 / var(--tw-text-opacity, 1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74 / var(--tw-text-opacity, 1))}.text-green-800{--tw-text-opacity:1;color:rgb(22 101 52 / var(--tw-text-opacity, 1))}.text-indigo-600{--tw-text-opacity:1;color:rgb(79 70 229 / var(--tw-text-opacity, 1))}.text-orange-800{--tw-text-opacity:1;color:rgb(154 52 18 / var(--tw-text-opacity, 1))}.text-pink-600{--tw-text-opacity:1;color:rgb(219 39 119 / var(--tw-text-opacity, 1))}.text-primary{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.text-purple-600{--tw-text-opacity:1;color:rgb(147 51 234 / var(--tw-text-opacity, 1))}.text-purple-800{--tw-text-opacity:1;color:rgb(107 33 168 / var(--tw-text-opacity, 1))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27 / var(--tw-text-opacity, 1))}.text-teal-600{--tw-text-opacity:1;color:rgb(13 148 136 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-yellow-500{--tw-text-opacity:1;color:rgb(234 179 8 / var(--tw-text-opacity, 1))}.text-yellow-800{--tw-text-opacity:1;color:rgb(133 77 14 / var(--tw-text-opacity, 1))}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.backdrop-blur-md{--tw-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-colors{transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-200{transition-duration:200ms}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-primary:hover{--tw-border-opacity:1;border-color:rgb(37 99 235 / var(--tw-border-opacity, 1))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.hover\:bg-primary-dark:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216 / var(--tw-bg-opacity, 1))}.hover\:text-primary:hover{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.hover\:text-primary-dark:hover{--tw-text-opacity:1;color:rgb(29 78 216 / var(--tw-text-opacity, 1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.focus\:border-transparent:focus{border-color:transparent}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.focus\:ring-primary:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235 / var(--tw-ring-opacity, 1))}.dark\:block:is(.dark *){display:block}.dark\:hidden:is(.dark *){display:none}.dark\:border-gray-600:is(.dark *){--tw-border-opacity:1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}.dark\:border-gray-700:is(.dark *){--tw-border-opacity:1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}
.dark\:bg-gray-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}.dark\:bg-amber-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(120 53 15 / var(--tw-bg-opacity, 1))}.dark\:bg-blue-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 58 138 / var(--tw-bg-opacity, 1))}.dark\:bg-gray-600:is(.dark *){--tw-bg-opacity:1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}.dark\:bg-gray-700:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.dark\:bg-gray-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.dark\:bg-gray-900\/90:is(.dark *){background-color:rgb(17 24 39 / 0.9)}.dark\:bg-green-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(20 83 45 / var(--tw-bg-opacity, 1))}.dark\:bg-indigo-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(49 46 129 / var(--tw-bg-opacity, 1))}.dark\:bg-orange-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(124 45 18 / var(--tw-bg-opacity, 1))}.dark\:bg-pink-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(131 24 67 / var(--tw-bg-opacity, 1))}.dark\:bg-purple-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(88 28 135 / var(--tw-bg-opacity, 1))}.dark\:bg-red-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(127 29 29 / var(--tw-bg-opacity, 1))}.dark\:bg-teal-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(19 78 74 / var(--tw-bg-opacity, 1))}.dark\:bg-yellow-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(113 63 18 / var(--tw-bg-opacity, 1))}.dark\:text-gray-100:is(.dark *){--tw-text-opacity:1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}.dark\:text-amber-400:is(.dark *){--tw-text-opacity:1;color:rgb(251 191 36 / var(--tw-text-opacity, 1))}.dark\:text-blue-200:is(.dark *){--tw-text-opacity:1;color:rgb(191 219 254 / var(--tw-text-opacity, 1))}.dark\:text-blue-400:is(.dark *){--tw-text-opacity:1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.dark\:text-gray-300:is(.dark *){--tw-text-opacity:1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.dark\:text-gray-400:is(.dark *){--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.dark\:text-green-200:is(.dark *){--tw-text-opacity:1;color:rgb(187 247 208 / var(--tw-text-opacity, 1))}.dark\:text-green-400:is(.dark *){--tw-text-opacity:1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.dark\:text-indigo-400:is(.dark *){--tw-text-opacity:1;color:rgb(129 140 248 / var(--tw-text-opacity, 1))}.dark\:text-orange-200:is(.dark *){--tw-text-opacity:1;color:rgb(254 215 170 / var(--tw-text-opacity, 1))}.dark\:text-pink-400:is(.dark *){--tw-text-opacity:1;color:rgb(244 114 182 / var(--tw-text-opacity, 1))}.dark\:text-purple-200:is(.dark *){--tw-text-opacity:1;color:rgb(233 213 255 / var(--tw-text-opacity, 1))}.dark\:text-purple-400:is(.dark *){--tw-text-opacity:1;color:rgb(192 132 252 / var(--tw-text-opacity, 1))}.dark\:text-red-200:is(.dark *){--tw-text-opacity:1;color:rgb(254 202 202 / var(--tw-text-opacity, 1))}.dark\:text-teal-400:is(.dark *){--tw-text-opacity:1;color:rgb(45 212 191 / var(--tw-text-opacity, 1))}.dark\:text-white:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.dark\:text-yellow-200:is(.dark *){--tw-text-opacity:1;color:rgb(254 240 138 / var(--tw-text-opacity, 1))}.dark\:hover\:bg-gray-700:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.dark\:hover\:bg-gray-800:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.fewnmo { display: none; } @media (min-width: 640px){.sm\:flex-row{flex-direction:row}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width: 768px) { .md\:flex { display:flex } .fewnmo { display: block; } .md\:hidden { display: none } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) } }@media (min-width: 1024px){.fewnmo { display: block; } .lg\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.lg\:p-12{padding:3rem}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:py-24{padding-top:6rem;padding-bottom:6rem}.lg\:text-6xl{font-size:3.75rem;line-height:1}}@media (min-width: 1280px){.xl\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}} .wp-block-separator { border-top: 2px solid #0000004f!important; margin-bottom: 20px; } * { margin: 0; box-sizing: border-box; } :root { /* Color System */ --primary-50: #EEF2FF; --primary-100: #E0E7FF; --primary-200: #C7D2FE; --primary-300: #A5B4FC; --primary-400: #818CF8; --primary-500: #6366F1; --primary-600: #4F46E5; --primary-700: #4338CA; --primary-800: #3730A3; --primary-900: #312E81; --secondary-50: #FAF5FF; --secondary-100: #F3E8FF; --secondary-200: #E9D5FF; --secondary-300: #D8B4FE; --secondary-400: #C084FC; --secondary-500: #A855F7; --secondary-600: #9333EA; --secondary-700: #7C3AED; --secondary-800: #6B21A8; --secondary-900: #581C87; --accent-50: #ECFEFF; --accent-100: #CFFAFE; --accent-200: #A5F3FC; --accent-300: #67E8F9; --accent-400: #22D3EE; --accent-500: #06B6D4; --accent-600: #0891B2; --accent-700: #0E7490; --accent-800: #155E75; --accent-900: #164E63; --success-50: #F0FDF4; --success-100: #DCFCE7; --success-200: #BBF7D0; --success-300: #86EFAC; --success-400: #4ADE80; --success-500: #22C55E; --success-600: #16A34A; --success-700: #15803D; --success-800: #166534; --success-900: #14532D; --warning-50: #FFFBEB; --warning-100: #FEF3C7; --warning-200: #FDE68A; --warning-300: #FCD34D; --warning-400: #FBBF24; --warning-500: #F59E0B; --warning-600: #D97706; --warning-700: #B45309; --warning-800: #92400E; --warning-900: #78350F; --error-50: #FEF2F2; --error-100: #FEE2E2; --error-200: #FECACA; --error-300: #FCA5A5; --error-400: #F87171; --error-500: #EF4444; --error-600: #DC2626; --error-700: #B91C1C; --error-800: #991B1B; --error-900: #7F1D1D; /* Neutral Colors */ --gray-50: #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB; --gray-300: #D1D5DB; --gray-400: #9CA3AF; --gray-500: #6B7280; --gray-600: #4B5563; --gray-700: #374151; --gray-800: #181818; --gray-900: #111827; /* Semantic Colors */ --primary-color: var(--primary-600); --secondary-color: var(--secondary-700); --accent-color: var(--accent-500); --success-color: var(--success-500); --warning-color: var(--warning-500); --error-color: var(--error-500); --text-primary: var(--gray-900); --text-secondary: var(--gray-600); --text-tertiary: var(--gray-500); --background-primary: #FFFFFF; --background-secondary: var(--gray-50); --background-tertiary: var(--gray-100); --border-light: var(--gray-200); --border-medium: var(--gray-300); /* Gradients */ --gradient-primary: linear-gradient(135deg, var(--primary-600) 0%, var(--secondary-600) 100%); --gradient-secondary: linear-gradient(135deg, var(--secondary-600) 0%, var(--primary-700) 100%); --gradient-accent: linear-gradient(135deg, var(--accent-500) 0%, var(--primary-500) 100%); --gradient-hero: linear-gradient(308deg, #8c37e433 0%, #0c197352 100%); /* Shadows */ --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* Border Radius */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px; --space-1: 0.125rem; /* 2px */ --space-2: 0.25rem; /* 4px */ --space-3: 0.375rem; /* 6px */ --space-4: 0.5rem; /* 8px */ --space-5: 0.625rem; /* 10px */ --space-6: 0.75rem; /* 12px */ --space-8: 1rem; /* 16px */ --space-10: 1.25rem; /* 20px */ --space-12: 1.5rem; /* 24px */ --space-16: 2rem; /* 32px */ --space-20: 2.5rem; /* 40px */ --space-24: 3rem; /* 48px */ --space-32: 4rem; /* 64px */ --spacing-md: 2rem; --spacing-sm: 1rem; --spacing-xs: 0.5rem; --spacing-xl: 1rem; /* Typography */ --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace; /* Font Sizes */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ --text-7xl: 4.5rem; /* 72px */ /* Line Heights */ --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; /* Font Weights */ --font-thin: 100; --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; --font-black: 900; /* Transitions */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; --transition-slower: 500ms ease; } [data-theme="dark"] .rank-math-question { background: #000000; } [data-theme="dark"] .rank-math-answer { background: unset; } .rank-math-question { display: flex; } /* Dark Mode Variables */ [data-theme="dark"] { --text-primary: var(--gray-100); --text-secondary: var(--gray-300); --text-tertiary: var(--gray-400); --background-primary: var(--gray-900); --background-secondary: var(--gray-800); --background-tertiary: var(--gray-700); --border-light: var(--gray-700); --border-medium: var(--gray-600); } .card-meta { font-size: 11px; } .card-meta svg { width: 14px !important; height: 14px !important; } .card-meta .author-title { font-size: 10px !important; } .card-meta .author-name { font-size: 11px !important; font-weight: 500; } 
.card-meta .post-date, .card-meta .read-time { font-size: 10.5px !important; color: #666; } .card-meta svg { width: 12px !important; height: 12px !important; margin-right: 4px; } :root { --text-light: #222; --text-dark: #f0f0f0; --bg-light: #ffffff; --bg-dark: #121212; --accent-light: #0062d1; --accent-dark: #88b2ff; --hr-light: #ddd; --hr-dark: #444; } body[data-theme="dark"] { --text-color: var(--text-dark); --bg-color: var(--bg-dark); --accent-color: var(--accent-dark); --hr-color: var(--hr-dark); } body:not([data-theme="dark"]) { --text-color: var(--text-light); --bg-color: var(--bg-light); --accent-color: var(--accent-light); --hr-color: var(--hr-light); } .wp-block-heading h2, h2.wp-block-heading { font-size: 2rem; margin: 2rem 0 1rem; font-weight: 700; color: var(--accent-color); border-left: 6px solid var(--accent-color); padding-left: 12px; } .wp-block-heading h3, h3.wp-block-heading { font-size: 1.5rem; margin: 1.5rem 0 1rem; font-weight: 600; color: var(--accent-color); border-left: 4px solid var(--accent-color); padding-left: 10px; } p { margin-bottom: 1.2rem; color: var(--text-color); } strong { font-weight: 600; } a { color: var(--accent-color); text-decoration: none; transition: all 0.2s ease; } a:hover { text-decoration: underline; } .wp-block-list, ol.wp-block-list, ul.wp-block-list { margin-bottom: 1.5rem; } .wp-block-list li { margin-bottom: 10px; position: relative; padding-left: 5px; color: var(--text-color); } hr.wp-block-separator { border: none; height: 1px; background: var(--hr-color); margin: 2rem 0; opacity: 0.6; } .wp-block-embed-youtube { margin: 2rem 0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .lazy-youtube-container { border-radius: 12px; overflow: hidden; } .youtube-play-icon { transition: transform 0.2s ease; } .lazy-youtube-container:hover .youtube-play-icon { transform: scale(1.1); } @media (max-width: 600px) { body { font-size: 1rem; } h2.wp-block-heading { font-size: 1.6rem; } h3.wp-block-heading { font-size: 1.3rem; } } :root { --bg-light: #ffffff; --bg-dark: #1c1c1c; --text-light: #111; --text-dark: #f4f4f4; --border-light: #e0e0e0; --border-dark: #333; --accent-light: #0062d1; --accent-dark: #88b2ff; } body[data-theme="dark"] { --toc-bg: var(--bg-dark); --toc-text: var(--text-dark); --toc-border: var(--border-dark); --toc-accent: var(--accent-dark); } body:not([data-theme="dark"]) { --toc-bg: var(--bg-light); --toc-text: var(--text-light); --toc-border: var(--border-light); --toc-accent: var(--accent-light); } #rank-math-toc { background-color: var(--toc-bg); border: 2px solid var(--toc-border); padding: 24px; border-radius: 12px; color: var(--toc-text); font-family: 'Segoe UI', sans-serif; max-width: 700px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); margin-bottom: 2rem; } #rank-math-toc h2 { font-size: 1.7rem; margin-bottom: 18px; color: var(--toc-text); font-weight: bold; border-left: 6px solid var(--toc-accent); padding-left: 12px; } #rank-math-toc nav ol, #rank-math-toc nav ul { padding-left: 0; margin: 0; list-style: none; counter-reset: toc-counter; } #rank-math-toc nav li { margin-bottom: 12px; position: relative; padding-left: 36px; } #rank-math-toc nav ol > li::before { content: counter(toc-counter); counter-increment: toc-counter; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%; background-color: var(--toc-accent); color: #fff; text-align: center; line-height: 24px; font-size: 0.85rem; font-weight: bold; } #rank-math-toc nav ul > li::before { content: "•"; position: absolute; left: 0; top: 2px; font-size: 1.2rem; color: var(--toc-accent); line-height: 1; } #rank-math-toc a { text-decoration: none; color: var(--toc-text); transition: all 0.25s ease; font-weight: 500; display: inline-block; position: relative; } #rank-math-toc a::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 0%; height: 2px; background: var(--toc-accent); transition: width 0.3s ease; } #rank-math-toc a:hover { color: var(--toc-accent); } #rank-math-toc a:hover::after { width: 100%; } #rank-math-toc nav li ul, #rank-math-toc nav li ol { margin-top: 8px; margin-left: 15px; border-left: 2px dashed var(--toc-border); padding-left: 12px; } @media screen and (max-width: 600px) { #rank-math-toc { padding: 16px; } #rank-math-toc h2 { font-size: 1.4rem; } #rank-math-toc nav li { padding-left: 30px; } #rank-math-toc nav ol > li::before, #rank-math-toc nav ul > li::before { width: 20px; height: 20px; font-size: 0.75rem; line-height: 20px; } } /* Base Styles */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-family-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-primary); background-color: var(--background-secondary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--transition-base), color var(--transition-base); } /* Typography */ h1, h2, h3, h4, h5, h6 { font-weight: var(--font-bold); line-height: var(--leading-tight); letter-spacing: -0.025em; margin-bottom: var(--space-4); color: var(--text-primary); } h1 { font-size: var(--text-5xl); font-weight: var(--font-extrabold); line-height: var(--leading-none); } h2 { font-size: var(--text-4xl); font-weight: var(--font-bold); } h3 { font-size: var(--text-3xl); font-weight: var(--font-bold); } h4 { font-size: var(--text-2xl); font-weight: var(--font-semibold); } h5 { font-size: var(--text-xl); font-weight: var(--font-semibold); } h6 { font-size: var(--text-lg); font-weight: var(--font-medium); } p { margin-bottom: var(--space-4); line-height: var(--leading-relaxed); color: #000; } [data-theme="dark"] p { color: #fff; } a {text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--secondary-color); } /* Header Styles */ .site-header { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-light); position: sticky; top: 0; z-index: 1000; transition: all var(--transition-base); } [data-theme="dark"] .site-header { background: rgba(17, 24, 39, 0.95); border-bottom-color: var(--border-light); } .header-container { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-6); display: flex; justify-content: space-between; align-items: center; height: 50px; } .site-branding { display: flex; align-items: center; } .site-logo { display: flex; align-items: center; font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--primary-color); text-decoration: none; transition: color var(--transition-fast); } .site-logo:hover { color: var(--secondary-color); } .logo-icon { width: 40px; height: 40px; background: var(--gradient-primary); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: white; font-size: var(--text-xl); } .logo-icon svg { width: 24px; height: 24px; fill: currentColor; } .main-navigation { display: none; } .main-navigation ul { display: flex; list-style: none; gap: var(--space-8); margin: 0; padding: 0; align-items: center; } .main-navigation a { color: var(--text-primary); text-decoration: none; font-weight: var(--font-medium); font-size: var(--text-base); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); transition: all var(--transition-fast); position: relative; } .main-navigation a:hover, .main-navigation a.current { color: var(--primary-color); background-color: var(--primary-50); } [data-theme="dark"] .main-navigation a:hover, [data-theme="dark"] .main-navigation a.current { background-color: rgba(99, 102, 241, 0.1); } .header-actions { display: flex; align-items: center; gap: var(--space-4); } .dark-mode-toggle { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: var(--space-2); border-radius: var(--radius-md); transition: all var(--transition-fast); display: flex; align-items: center; justify-content: center; } .dark-mode-toggle:hover { color: var(--primary-color); background-color: var(--background-tertiary); } .dark-mode-toggle svg { width: 20px; height: 20px; fill: currentColor; } .subscribe-btn { background: var(--gradient-primary); color: white; padding: var(--space-3) var(--space-6); border: none; border-radius: var(--radius-lg); font-weight: var(--font-semibold); font-size: var(--text-sm); text-decoration: none; transition: all var(--transition-fast); box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: var(--space-2); justify-content: center; } .subscribe-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: white; } .subscribe-btn svg { width: 16px; height: 16px; fill: currentColor; } .mobile-menu-toggle { display: block; background: none; border: none; color: var(--text-primary); cursor: pointer; padding: var(--space-2); border-radius: var(--radius-md); transition: all var(--transition-fast); } .mobile-menu-toggle:hover { background-color: var(--background-tertiary); } .mobile-menu-toggle svg { width: 24px; height: 24px; fill: currentColor; } /* Hero Section */ .hero-section { background: var(--gradient-hero); color: white; padding: var(--space-24) 0; text-align: center; position: relative; overflow: hidden; border-radius: 0 0 50px 50px; } .hero-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="20" cy="60" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="80" cy="40" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>'); opacity: 0.3; } 
.hero-container { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-6); position: relative; z-index: 1; } .hero-title { font-size: var(--text-6xl); font-weight: var(--font-extrabold); margin-bottom: var(--space-6); line-height: var(--leading-none); letter-spacing: -0.05em; animation: fadeInUp 1s ease; } .hero-subtitle { font-size: var(--text-xl); margin-bottom: var(--space-10); opacity: 0.9; line-height: var(--leading-relaxed); max-width: 600px; margin-left: auto; margin-right: auto; animation: fadeInUp 1s ease 0.2s both; } .hero-form { display: flex; max-width: 500px; margin: 0 auto; gap: var(--space-3); animation: fadeInUp 1s ease 0.4s both; } .hero-form input { flex: 1; padding: var(--space-4) var(--space-5); border: none; border-radius: var(--radius-lg); font-size: var(--text-base); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); transition: all var(--transition-fast); box-shadow: var(--shadow-sm); } .hero-form input:focus { outline: none; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); background: white; } .hero-form input::placeholder { color: var(--gray-500); } .hero-form button { background: white; color: var(--primary-color); border: none; padding: var(--space-4) var(--space-6); border-radius: var(--radius-lg); font-weight: var(--font-semibold); font-size: var(--text-base); cursor: pointer; transition: all var(--transition-fast); box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; } .hero-form button:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); background: var(--gray-50); } .hero-form button svg { width: 16px; height: 16px; fill: currentColor; } /* Section Styles */ .section { padding: var(--space-24) 0; } .scontainer { max-width: 700px; margin: 0 auto; padding: 0 var(--space-6); } .section-title { text-align: center; margin-bottom: var(--space-16); font-size: var(--text-5xl); font-weight: var(--font-extrabold); color: var(--text-primary); line-height: var(--leading-tight); letter-spacing: -0.025em; } .section-subtitle { text-align: center; margin-bottom: var(--space-12); font-size: var(--text-xl); color: var(--text-secondary); max-width: 600px; margin-left: auto; margin-right: auto; line-height: var(--leading-relaxed); } /* Card Grid */ .card-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); } /* Card Styles */ .card { background: var(--background-primary); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-md); transition: all var(--transition-base); border: 1px solid var(--border-light); position: relative; } .card:hover { transform: translateY(-8px); box-shadow: var(--shadow-2xl); border-color: var(--primary-200); } .card-image { position: relative; height: 240px; overflow: hidden; background: var(--gradient-primary); } .card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .card:hover .card-image img { transform: scale(1.05); } .card-content { padding: var(--space-8); } .card-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); } .tag { background: var(--primary-100); color: var(--primary-700); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.05em; transition: all var(--transition-fast); } [data-theme="dark"] .tag { background: rgba(99, 102, 241, 0.2); color: var(--primary-300); } .card-title { font-size: var(--text-2xl); font-weight: var(--font-bold); margin-bottom: var(--space-3); line-height: var(--leading-tight); } .card-title a { color: var(--text-primary); text-decoration: none; transition: color var(--transition-fast); } .card-title a:hover { color: var(--primary-color); } form.signup-form.hero-form.newsletter-form label { display: none; } .card-meta { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); font-size: var(--text-sm); color: var(--text-tertiary); justify-content: space-between; } .author-info { display: flex; align-items: flex-start; gap: var(--space-2); } .author-avatar { width: 32px; height: 32px; border-radius: var(--radius-full); overflow: hidden; } .author-avatar img { width: 100%; height: 100%; object-fit: cover; } .author-name { font-weight: var(--font-medium); color: var(--text-secondary); } .author-title { font-size: var(--text-xs); color: var(--text-tertiary); } .post-date, .read-time { font-size: var(--text-sm); color: var(--text-tertiary); } .card-excerpt { color: var(--text-secondary); margin-bottom: var(--space-6); line-height: var(--leading-relaxed); } .read-more { color: var(--primary-color); text-decoration: none; font-weight: var(--font-semibold); font-size: var(--text-sm); display: inline-flex; align-items: center; gap: var(--space-2); transition: all var(--transition-fast); } .read-more:hover { color: var(--secondary-color); transform: translateX(4px); } .read-more svg { width: 16px; height: 16px; fill: currentColor; transition: transform var(--transition-fast); } .read-more:hover svg { transform: translateX(4px); } /* Tool Cards */ .tool-card { background: var(--background-primary); border-radius: var(--radius-2xl); padding: var(--space-8); box-shadow: var(--shadow-md); border: 1px solid var(--border-light); transition: all var(--transition-base); position: relative; overflow: hidden; } .tool-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-primary); transform: scaleX(0); transition: transform var(--transition-base); } .tool-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2xl); border-color: var(--primary-200); } .tool-card:hover::before { transform: scaleX(1); } .trending-badge { position: absolute; top: var(--space-4); right: var(--space-4); background: var(--gradient-accent); color: white; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-semibold); display: flex; align-items: center; gap: var(--space-1); } .trending-badge svg { width: 12px; height: 12px; fill: currentColor; } .tool-header { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-6); } .tool-icon { width: 64px; height: 64px; border-radius: var(--radius-xl); background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; color: white; font-size: var(--text-2xl); flex-shrink: 0; transition: transform var(--transition-fast); } .tool-card:hover .tool-icon { transform: scale(1.1) rotate(5deg); } .tool-icon svg { width: 32px; height: 32px; fill: currentColor; } .tool-info { flex: 1; min-width: 0; } .tool-info h3 { margin: 0 0 var(--space-2) 0; font-size: var(--text-xl); font-weight: var(--font-bold); line-height: var(--leading-tight); } .tool-info h3 a { color: var(--text-primary); text-decoration: none; transition: color var(--transition-fast); } .tool-info h3 a:hover { color: var(--primary-color); } .tool-rating { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-tertiary); } .stars { color: var(--warning-400); display: flex; gap: var(--space-1); } .stars svg { width: 16px; height: 16px; fill: currentColor; } .tool-description { color: var(--text-secondary); margin-bottom: var(--space-6); line-height: var(--leading-relaxed); } .tool-meta { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; } .tool-price { background: var(--success-100); color: var(--success-700); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-semibold); } [data-theme="dark"] .tool-price { background: rgba(34, 197, 94, 0.2); color: var(--success-300); } .tool-category { background: var(--gray-100); color: var(--gray-700); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-medium); } [data-theme="dark"] .tool-category { background: var(--gray-700); color: var(--gray-300); } .tool-actions { display: flex; gap: var(--space-3); } .learn-more { flex: 1; background: var(--background-tertiary); color: var(--text-primary); border: 1px solid var(--border-medium); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font-weight: var(--font-medium); font-size: var(--text-sm); text-decoration: none; text-align: center; transition: all var(--transition-fast); display: flex; align-items: center; justify-content: center; gap: var(--space-2); } .learn-more:hover { background: var(--background-secondary); border-color: var(--primary-color); color: var(--primary-color); } .try-now-btn { flex: 1; background: var(--gradient-primary); color: white; border: none; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font-weight: var(--font-semibold); font-size: var(--text-sm); cursor: pointer; text-decoration: none; text-align: center; transition: all var(--transition-fast); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; gap: var(--space-2); } .try-now-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: white; } .try-now-btn svg, .learn-more svg { width: 16px; height: 16px; fill: currentColor; } /* Video Section */ .video-section { background: var(--background-primary); } .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--radius-2xl); box-shadow: var(--shadow-2xl); background: var(--gradient-primary); } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: var(--radius-2xl); } .video-info { text-align: center; margin-top: var(--space-8); } .video-info p { font-size: var(--text-lg); color: var(--text-secondary); max-width: 600px; margin: 0 auto; } 
/* Testimonials */ .testimonial { background: var(--background-primary); padding: var(--space-8); border-radius: var(--radius-2xl); box-shadow: var(--shadow-md); border: 1px solid var(--border-light); text-align: center; transition: all var(--transition-base); position: relative; overflow: hidden; } .testimonial::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-accent); transform: scaleX(0); transition: transform var(--transition-base); } .testimonial:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); border-color: var(--accent-200); } .testimonial:hover::before { transform: scaleX(1); } .testimonial-avatar { width: 80px; height: 80px; border-radius: var(--radius-full); margin: 0 auto var(--space-6); background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; font-size: var(--text-3xl); color: white; overflow: hidden; border: 4px solid var(--background-primary); box-shadow: var(--shadow-lg); } .testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; } .testimonial-avatar svg { width: 40px; height: 40px; fill: currentColor; } .testimonial-rating { color: var(--warning-400); margin-bottom: var(--space-4); display: flex; justify-content: center; gap: var(--space-1); } .testimonial-rating svg { width: 20px; height: 20px; fill: currentColor; } .testimonial-quote { font-style: italic; font-size: var(--text-lg); margin-bottom: var(--space-6); color: var(--text-secondary); line-height: var(--leading-relaxed); position: relative; } .testimonial-quote::before { content: '"'; font-size: var(--text-6xl); color: var(--primary-200); position: absolute; top: -20px; left: -10px; font-family: serif; line-height: 1; } .testimonial-author { font-weight: var(--font-bold); color: var(--text-primary); margin-bottom: var(--space-1); } .testimonial-author span { display: block; font-weight: var(--font-normal); font-size: var(--text-sm); color: var(--text-tertiary); margin-top: var(--space-1); } /* Newsletter CTA */ .newsletter-cta { background: var(--gradient-primary); color: white; padding: var(--space-24) 0; text-align: center; position: relative; overflow: hidden; } .newsletter-cta::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="newsletter-pattern" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23newsletter-pattern)"/></svg>'); opacity: 0.3; } .newsletter-cta .container { position: relative; z-index: 1; } .newsletter-cta h2 { font-size: var(--text-5xl); font-weight: var(--font-extrabold); margin-bottom: var(--space-4); color: white; } .newsletter-cta p { font-size: var(--text-xl); margin-bottom: var(--space-10); opacity: 0.9; color: white; max-width: 600px; margin-left: auto; margin-right: auto; } .newsletter-form { display: flex; max-width: 600px; margin: 0 auto; gap: var(--space-4); background: rgba(255, 255, 255, 0.1); padding: var(--space-2); border-radius: var(--radius-2xl); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.2); } .newsletter-form input { flex: 1; padding: var(--space-4) var(--space-5); border: none; border-radius: var(--radius-xl); font-size: var(--text-base); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); transition: all var(--transition-fast); } .newsletter-form input:focus { outline: none; background: white; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3); } .newsletter-form input::placeholder { color: var(--gray-500); } .newsletter-form button { background: white; color: var(--primary-color); border: none; padding: var(--space-4) var(--space-8); border-radius: var(--radius-xl); font-weight: var(--font-semibold); font-size: var(--text-base); cursor: pointer; transition: all var(--transition-fast); display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; } .newsletter-form button:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); background: var(--gray-50); } .newsletter-form button svg { width: 16px; height: 16px; fill: currentColor; } /* Footer */ .site-footer { background: var(--text-primary); color: white; padding: var(--space-24) 0 var(--space-8); } [data-theme="dark"] .site-footer { background: var(--gray-900); border-top: 1px solid var(--border-light); } .footer-content { display: grid!important; grid-template-columns: 1fr; gap: var(--space-10); margin-bottom: var(--space-16); } .footer-section h3 { margin-bottom: var(--space-6); color: white; font-size: var(--text-lg); font-weight: var(--font-semibold); } .footer-section ul { list-style: none; margin: 0; padding: 0; } .footer-section li { margin-bottom: var(--space-3); } .footer-section a { color: var(--gray-300); text-decoration: none; transition: color var(--transition-fast); font-size: var(--text-base); } .footer-section a:hover { color: white; } .footer-bottom { text-align: center; padding-top: var(--space-8); border-top: 1px solid var(--gray-700); color: var(--gray-400); } .social-links { display: flex; justify-content: center; gap: var(--space-4); margin-bottom: var(--space-6); } .social-links a { color: var(--gray-400); transition: all var(--transition-fast); padding: var(--space-3); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: center; } .social-links a:hover { color: var(--primary-color); background: rgba(99, 102, 241, 0.1); transform: translateY(-2px); } .social-links svg { width: 20px; height: 20px; fill: currentColor; } .footer-bottom p { margin: 0; font-size: var(--text-sm); color: var(--gray-400); } /* Animations */ @keyframes fadeInUp { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInRight { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeInUp 0.8s ease; } .fade-in-delay { animation: fadeInUp 0.8s ease 0.2s both; } .slide-in-right { animation: slideInRight 0.8s ease; } /* Responsive Design */ @media (min-width: 640px) { .hero-form { flex-direction: row; } .newsletter-form { flex-direction: row; } .card-grid { grid-template-columns: repeat(2, 1fr); } .tool-actions { flex-direction: row; } } @media (min-width: 768px) { .main-navigation { display: block; } .mobile-menu-toggle { display: none; } .footer-content { grid-template-columns: repeat(2, 1fr); } .hero-title { font-size: var(--text-7xl); } .section-title { font-size: var(--text-6xl); } } @media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } .footer-content { grid-template-columns: repeat(4, 1fr); } .hero-container { padding: 0 var(--space-8); } .container { padding: 0 var(--space-8); } } @media (min-width: 1280px) { .card-grid { gap: var(--space-10); } } @media (min-width: 1536px) { .card-grid { grid-template-columns: repeat(4, 1fr); } } /* Utility Classes */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } .mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .p-0 { padding: 0; } .p-2 { padding: var(--space-2); } .p-4 { padding: var(--space-4); } .p-6 { padding: var(--space-6); } .p-8 { padding: var(--space-8); } .flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; } .hidden { display: none; } .block { display: block; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .gap-2 { gap: var(--space-2); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); } .w-full { width: 100%; } .h-full { height: 100%; } .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .sticky { position: sticky; } .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-30 { z-index: 30; } .z-40 { z-index: 40; } .z-50 { z-index: 50; } .opacity-0 { opacity: 0; } .opacity-50 { opacity: 0.5; } .opacity-75 { opacity: 0.75; } .opacity-100 { opacity: 1; } .transition { transition: all var(--transition-base); } .transition-fast { transition: all var(--transition-fast); } .transition-slow { transition: all var(--transition-slow); } .scale-105 { transform: scale(1.05); } .scale-110 { transform: scale(1.1); } .-translate-y-1 { transform: translateY(-0.25rem); } .-translate-y-2 { transform: translateY(-0.5rem); } .shadow-sm { box-shadow: var(--shadow-sm); } .shadow-md { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } .shadow-xl { box-shadow: var(--shadow-xl); } .shadow-2xl { box-shadow: var(--shadow-2xl); } .rounded-sm { border-radius: var(--radius-sm); } .rounded-md { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-2xl { border-radius: var(--radius-2xl); } .rounded-full { border-radius: var(--radius-full); } .border { border: 1px solid var(--border-light); } .border-0 { border: none; } .border-t { border-top: 1px solid var(--border-light); } .border-b { border-bottom: 1px solid var(--border-light); } .border-l { border-left: 1px solid var(--border-light); } .border-r { border-right: 1px solid var(--border-light); } .bg-primary { background-color: var(--primary-color); }
.bg-secondary { background-color: var(--secondary-color); } .bg-white { background-color: var(--background-primary); } .bg-gray-50 { background-color: var(--gray-50); } .bg-gray-100 { background-color: var(--background-secondary);} .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-tertiary { color: var(--text-tertiary); } .text-white { color: white; } .font-thin { font-weight: var(--font-thin); } .font-light { font-weight: var(--font-light); } .font-normal { font-weight: var(--font-normal); } .font-medium { font-weight: var(--font-medium); } .font-semibold { font-weight: var(--font-semibold); } .font-bold { font-weight: var(--font-bold); } .font-extrabold { font-weight: var(--font-extrabold); } .font-black { font-weight: var(--font-black); } .text-xs { font-size: var(--text-xs); } .text-sm { font-size: var(--text-sm); } .text-base { font-size: var(--text-base); } .text-lg { font-size: var(--text-lg); } .text-xl { font-size: var(--text-xl); } .text-2xl { font-size: var(--text-2xl); } .text-3xl { font-size: var(--text-3xl); } .text-4xl { font-size: var(--text-4xl); } .text-5xl { font-size: var(--text-5xl); } .text-6xl { font-size: var(--text-6xl); } .text-7xl { font-size: var(--text-7xl); } .leading-none { line-height: var(--leading-none); } .leading-tight { line-height: var(--leading-tight); } .leading-snug { line-height: var(--leading-snug); } .leading-normal { line-height: var(--leading-normal); } .leading-relaxed { line-height: var(--leading-relaxed); } .leading-loose { line-height: var(--leading-loose); } .tracking-tighter { letter-spacing: -0.05em; } .tracking-tight { letter-spacing: -0.025em; } .tracking-normal { letter-spacing: 0; } .tracking-wide { letter-spacing: 0.025em; } .tracking-wider { letter-spacing: 0.05em; } .tracking-widest { letter-spacing: 0.1em; } .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .capitalize { text-transform: capitalize; } .normal-case { text-transform: none; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .overflow-hidden { overflow: hidden; } .overflow-auto { overflow: auto; } .overflow-scroll { overflow: scroll; } .cursor-pointer { cursor: pointer; } .cursor-default { cursor: default; } .cursor-not-allowed { cursor: not-allowed; } .select-none { user-select: none; } .select-text { user-select: text; } .select-all { user-select: all; } .select-auto { user-select: auto; } .pointer-events-none { pointer-events: none; } .pointer-events-auto { pointer-events: auto; } /* Focus styles for accessibility */ .focus\:outline-none:focus { outline: none; } .focus\:ring:focus { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); } .focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3); } .focus\:ring-4:focus { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.3); } /* Hover effects */ .hover\:bg-gray-50:hover { background-color: var(--gray-50); } .hover\:bg-gray-100:hover { background-color: var(--gray-100); } .hover\:text-primary:hover { color: var(--primary-color); } .hover\:text-secondary:hover { color: var(--secondary-color); } .hover\:scale-105:hover { transform: scale(1.05); } .hover\:scale-110:hover { transform: scale(1.1); } .hover\:-translate-y-1:hover { transform: translateY(-0.25rem); } .hover\:-translate-y-2:hover { transform: translateY(-0.5rem); } .hover\:shadow-lg:hover { box-shadow: var(--shadow-lg); } .hover\:shadow-xl:hover { box-shadow: var(--shadow-xl); } /* Group hover effects */ .group:hover .group-hover\:scale-105 { transform: scale(1.05); } .group:hover .group-hover\:text-primary { color: var(--primary-color); } .group:hover .group-hover\:opacity-100 { opacity: 1; } /* Print styles */ @media print { .no-print { display: none !important; } .print\:text-black { color: black !important; } .print\:bg-white { background-color: white !important; } } /* 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; } .fade-in, .fade-in-delay, .slide-in-right { animation: none; opacity: 1; transform: none; } } /* High contrast mode */ @media (prefers-contrast: high) { :root { --border-light: var(--gray-400); --border-medium: var(--gray-500); } .card, .tool-card, .testimonial { border-width: 2px; } } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--background-secondary); } ::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--secondary-color); } /* Selection styles */ ::selection { background-color: var(--primary-200); color: var(--primary-900); } ::-moz-selection { background-color: var(--primary-200); color: var(--primary-900); } p { font-size: 18px!important; } @media (max-width: 768px) {.author-avatar {margin-right: 0rem!important;} .header-actions .subscribe-btn,.header-actions .subscribe-btner { display: none; } .card { min-width: 280px!important; } h1 { font-size: 28px!important; } h2 { font-size: 25px!important; } p { font-size: 15px!important; } form.hero-form.newsletter-form ,.newsletter-form { display: flex; flex-direction: column; } form.hero-form.newsletter-form button,.newsletter-form button { display: flex; justify-content: center; } nav#site-navigation { display: none; } nav#site-navigation.active { display: flex; position: fixed; top: 100%; width: 100%; background: #ffffff; left: 0; } nav#site-navigation.active ul#primary-menu { display: flex; flex-direction: column; } [data-theme="dark"] nav#site-navigation.active { background: #000000; } nav#site-navigation.active .menu-menu-container, ul#primary-menu, ul#primary-menu>li>a { width: 100%; } header.post-header .post-meta { font-size: 12px; } header.post-header .post-meta .author-title { font-size: 10px; } header.post-header .post-meta .post-date { font-size: 8px; display: flex; align-items: center; } header.post-header .post-meta svg { height: 10px !important; width: 10px !important; } header.post-header .post-breadcrumb span, header.post-header .post-breadcrumb a { font-size: 13px; } header.post-header .post-breadcrumb svg { height: 10px !important; width: 10px !important; display: inline; margin: 0 !important; } } header.post-header .post-meta .post-date { display: flex; align-items: center; } /* Base Styles (shared across themes) */ .post-sharing { padding: 20px; border-radius: 8px; margin: 20px 0; border: 1px solid #0000002b; } .post-sharing h4 { font-size: 18px; margin-bottom: 15px; font-weight: 600; } /* Social Buttons */ .social-share { display: flex; flex-wrap: wrap; gap: 10px; } .social-share a, .social-share button { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 6px; text-decoration: none; font-weight: 500; font-size: 14px; cursor: pointer; border: none; color: #313bff; background-color: transparent; transition: background-color 0.3s, color 0.3s; border: 1px solid #beb7ff; } .social-share svg { width: 20px; height: 20px; } /* LIGHT THEME */ [data-theme="light"] .post-sharing { background-color: #f9f9f9; color: #222; } [data-theme="light"] .social-share a, [data-theme="light"] .social-share button { color: #222; } [data-theme="light"] .social-share a:hover, [data-theme="light"] .social-share button:hover { background-color: #e0e0e0; } /* DARK THEME */ [data-theme="dark"] .post-sharing { background-color: #1e1e1e; color: #f0f0f0; } [data-theme="dark"] .social-share a, [data-theme="dark"] .social-share button { color: #f0f0f0; } [data-theme="dark"] .social-share a:hover, [data-theme="dark"] .social-share button:hover { background-color: #333333; } header.post-header .post-meta { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; } /* comments.php */ .comment { display: flex; padding: 16px; border-bottom: 1px solid #e0e0e0; font-family: 'Roboto', sans-serif; background-color: #fff; border-radius: 10px; margin-bottom: 12px; transition: background 0.3s ease; } [data-theme="dark"] .comment { background-color: #1e1e1e; border-color: #333; color: #ddd; } .comment-header { display: flex; align-items: center; margin-bottom: 8px; } .comment-avatar { width: 48px; height: 48px; border-radius: 50%; margin-right: 12px; border: 2px solid #ccc; transition: border 0.3s ease; } [data-theme="dark"] .comment-avatar { border-color: #555; } .comment-meta { font-size: 15px; display: flex; flex-direction: column; line-height: 1.4; align-items: flex-start; } .comment-meta strong { font-size: 16px; color: #111; } [data-theme="dark"] .comment-meta strong { color: #fff; } .comment-date { font-size: 13px; color: #888; } [data-theme="dark"] .comment-date { color: #aaa; } .comment-body p { font-size: 15px; margin: 8px 0; line-height: 1.6; } .comment-actions { display: flex; gap: 12px; margin-top: 4px; height: auto; } .comment-reply, .comment-edit { font-size: 14px; color: #065fd4; text-decoration: none; padding: 4px 8px; border-radius: 4px; transition: background 0.3s ease, color 0.3s ease; } .comment-reply:hover, .comment-edit:hover { background-color: #e8f0fe; color: #1a73e8; } [data-theme="dark"] .comment-reply, [data-theme="dark"] .comment-edit { color: #4dabf7; } [data-theme="dark"] .comment-reply:hover, [data-theme="dark"] .comment-edit:hover { background-color: #2a2a2a; color: #81c9ff; } /* Base wrapper */ #respond.comment-respond { margin: 40px auto; max-width: 800px; padding: 0 20px; font-family: 'Roboto', sans-serif; } /* Title */ .comment-reply-title { font-size: 22px; font-weight: 500; color: #0f0f0f; margin-bottom: 20px; border-bottom: 1px solid #ddd; padding-bottom: 10px; } [data-theme="dark"] .comment-reply-title { color: #fff; border-color: #333; } /* Logged in info */ .logged-in-as { font-size: 14px; color: #555; margin-bottom: 10px; } [data-theme="dark"] .logged-in-as { color: #aaa; }
/* Required field notice */ .required-field-message { font-size: 13px; color: #999; } [data-theme="dark"] .required-field-message { color: #777; } [data-theme="dark"] .perfecty-push-dialog-box { background-color: #1e1e1e; color: #ffffff; box-shadow: 0px 7px 30px 0px rgba(255, 255, 255, 0.1); } [data-theme="dark"] .perfecty-push-dialog-form #perfecty-push-dialog-cancel { background-color: transparent!important; color: #f77924; } [data-theme="dark"] .perfecty-push-dialog-form #perfecty-push-dialog-subscribe { background-color: #f77924; color: #ffffff; } [data-theme="dark"] .perfecty-push-dialog-title { color: #ffffff; } [data-theme="dark"] .perfecty-push-settings-container #perfecty-push-settings-form { background-color: #1e1e1e; color: #ffffff; border: 1px solid #333; } [data-theme="dark"] .perfecty-push-settings-container #perfecty-push-settings-form label { color: #ffffff; } [data-theme="dark"] .perfecty-push-settings-container #perfecty-push-settings-open svg { background-color: #f77924; color: #ffffff; fill: #ffffff; } [data-theme="dark"] .perfecty-push-settings-container #perfecty-push-settings-open svg:hover, [data-theme="dark"] .perfecty-push-settings-container #perfecty-push-settings-open svg:focus { background-color: #ff913c; } .newsletter-form button , .newsletter-form input { padding: 13px; } /* Label */ .comment-form-comment label { display: block; font-size: 15px; font-weight: 500; color: #222; margin-bottom: 6px; } [data-theme="dark"] .comment-form-comment label { color: #eee; } /* Textarea styling */ .comment-form-comment textarea { width: 100%; padding: 12px; font-size: 15px; border-radius: 6px; border: 1px solid #ccc; background: #fff; color: #000; resize: vertical; transition: border-color 0.3s ease; } .comment-form-comment textarea:focus { outline: none; border-color: #065fd4; } [data-theme="dark"] .comment-form-comment textarea { background: #181818; border: 1px solid #444; color: #fff; } /* Submit Button */ .comment-form .submit { background-color: #065fd4; color: #fff; padding: 10px 20px; border-radius: 6px; font-size: 14px; font-weight: 500; border: none; cursor: pointer; margin-top: 10px; transition: background-color 0.2s ease; } .comment-form .submit:hover { background-color: #0546a0; } .newsletter-form p.msg { display: none; } form.signup-form.hero-form.newsletter-form { padding: 15px; } .single-post img { border-radius: 15px; } .newsletter-form .turnstile-box { overflow: hidden; border-radius: 100px; height: 59px; } /** * Responsive styles for Fewne Blog theme */ /* Mobile Navigation Styles */ @media (max-width: 767px) { .main-navigation { position: fixed; top: 70px; left: 0; right: 0; background: var(--white); box-shadow: var(--shadow-lg); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 999; padding: var(--spacing-md); } .main-navigation.active { transform: translateY(0); opacity: 1; visibility: visible; } .main-navigation ul { flex-direction: column; gap: var(--spacing-md); } .main-navigation a { font-size: 1.125rem; padding: var(--spacing-xs) 0; } .hero-title { font-size: 2rem; } .hero-form { flex-direction: column; gap: var(--spacing-sm); } .newsletter-form { flex-direction: column; gap: var(--spacing-sm); } .tool-actions { gap: var(--spacing-xs); } .tool-actions .learn-more, .tool-actions .try-now-btn { text-align: center; }.post-meta { flex-direction: column; gap: var(--spacing-sm); align-items: flex-start; } .post-sharing .social-share { grid-template-columns: 1fr 1fr; gap: var(--spacing-xs); } } /* Tablet Styles */ @media (min-width: 768px) and (max-width: 1023px) { .hero-title { font-size: 3rem; } .card-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); } .container { padding: 0 var(--spacing-md); } .tool-card { padding: var(--spacing-md); } .newsletter-form { max-width: 400px; } } /* Desktop Styles */ @media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } .hero-title { font-size: 4rem; line-height: 1.1; } .hero-subtitle { font-size: 1.375rem; } .section-title { font-size: 3rem; } .footer-content { grid-template-columns: repeat(4, 1fr); } .tool-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .card:hover { transform: translateY(-6px); } .testimonial:hover { transform: scale(1.02); } } /* Large Desktop Styles */ @media (min-width: 1200px) { .hero-container { max-width: 1200px; } .card-grid { gap: var(--spacing-xl); } } /* Ultra-wide Screens */ @media (min-width: 1440px) { .card-grid { grid-template-columns: repeat(4, 1fr); } .hero-title { font-size: 4.5rem; } } /* High-resolution Displays */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .card-image img, .post-featured-image img, .testimonial-avatar img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } } /* Print Styles */ @media print { .site-header, .site-footer, .newsletter-cta, .mobile-menu-toggle, .dark-mode-toggle, .back-to-top, .social-share { display: none; } .post-content, .page-content-area { font-size: 12pt; line-height: 1.5; } .post-title, .page-title { font-size: 18pt; margin-bottom: 12pt; } a { color: black; text-decoration: none; } a[href^="http"]:after { content: " (" attr(href) ")"; font-size: 10pt; color: #666; } } /* Reduced Motion Preferences */ @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; } .fade-in { animation: none; opacity: 1; transform: none; } } /* Dark Mode Media Query */ @media (prefers-color-scheme: dark) { :root { --text-dark: #F9FAFB; --text-light: #000000; --background-light: #111827; --white: #1F2937; } } /* Focus Styles for Accessibility */ @media (min-width: 768px) { .main-navigation a:focus, .subscribe-btn:focus, .try-now-btn:focus, .newsletter-form button:focus, .dark-mode-toggle:focus { outline: 2px solid var(--primary-color); outline-offset: 2px; } } /* Hover Effects for Desktop */ @media (hover: hover) and (pointer: fine) { .card:hover .card-title a { color: var(--primary-color); } .tool-card:hover .tool-icon { transform: scale(1.1); } .subscribe-btn:hover, .try-now-btn:hover, .newsletter-form button:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .main-navigation a:hover { color: var(--primary-color); transform: translateY(-1px); } .social-links a:hover { color: var(--primary-color); transform: scale(1.2); } } /* Custom Scrollbar */ @media (min-width: 768px) { ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--background-light); } ::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--secondary-color); } } /* Back to Top Button Styles */ .back-to-top { padding: 0!important; position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; background: var(--gradient-secondary); color: var(--white); border: none; border-radius: 50%; font-size: 1.5rem; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s ease; z-index: 1000; box-shadow: var(--shadow-lg); } .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { transform: translateY(-5px); box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.2); } /* Loading States */ .loading { opacity: 0.6; pointer-events: none; } .loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid var(--primary-color); border-radius: 50%; border-top-color: transparent; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Notification Styles */ .notification { position: fixed; top: 20px; right: 20px; z-index: 10000; padding: 12px 24px; border-radius: 8px; color: white; font-weight: 500; max-width: 300px; box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform 0.3s ease; } /* Sticky Header Scrolled State */ .site-header.scrolled { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); box-shadow: var(--shadow-md); } [data-theme="dark"] .site-header.scrolled { background: rgba(31, 41, 55, 0.95); }
.user-profile { border: 1px solid #00000012; display: flex ; align-items: center; gap: 12px; cursor: pointer; padding: 4px; border-radius: 40px; transition: background-color 0.2s; overflow: hidden; } .user-profile:hover { background: rgba(255, 255, 255, 0.1); } .user-avatar { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.8); } .user-info { display: flex; flex-direction: column; } .user-name { font-weight: 500; font-size: 0.95rem; width: 200px; } .user-username { font-size: 0.6rem; opacity: 0.9; } .dropdown-menub { position: absolute; right: 0; z-index: 9999999999; background: white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border-radius: 8px; min-width: 220px; display: none; overflow: hidden; } .dropdown-menub.active { display: block; animation: slideDown 0.2s ease-out; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .dropdown-menub a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: #333; text-decoration: none; transition: background-color 0.2s; } .dropdown-menub a:hover { background: #f5f5f5; } .dropdown-menub .material-icons { font-size: 20px; color: #666; } .login-button, .register-button { padding: 8px 20px; background: white; color: #029684; border: none; border-radius: 20px; cursor: pointer; text-decoration: none; font-weight: 500; transition: all 0.2s; } .login-button { background: #4549e0; color: white; } .register-button:hover { color: #000000; } .login-button:hover, .register-button:hover { background: #f0f0f0; transform: translateY(-5px); color: #000000; } div#userSection { margin-left: 10px; } .post-featured-image>img { width: 100%; } .post-tags { overflow: hidden; white-space: nowrap; position: relative; height: 30px; background: transparent; pointer-events: none; } .post-tags { position: relative; overflow: hidden; white-space: nowrap; } .post-tags::before, .post-tags::after { content: ''; position: absolute; top: 0; width: 60px; height: 100%; z-index: 2; } .post-tags span.tag { display: inline-block; padding: 5px 15px; margin-right: 10px; background: #eee; border-radius: 20px; font-size: 14px; animation: scroll-left 20s linear infinite; } .post-tags::before { left: 0; background: linear-gradient(to right, #fff, transparent); } .post-tags::after { right: 0; background: linear-gradient(to left, #fff, transparent); } [data-theme="dark"] .post-tags::before { background: linear-gradient(to right, #1e1e1e, transparent); } [data-theme="dark"] .post-tags::after { background: linear-gradient(to left, #1e1e1e, transparent); } [data-theme="dark"] .post-tags span.tag { background: #333; color: #eee; } @keyframes scroll-left { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } .post-breadcrumb { white-space: nowrap; overflow: hidden; } #rank-math-faq { font-family: Arial, sans-serif; max-width: 100%; margin: 30px auto; border: 1px solid #ddd; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05); } .rank-math-list-item { border-bottom: 1px solid #eee; } .rank-math-question { margin: 0; padding: 15px 20px; font-size: 1.1rem; background-color: #f7f7f7; cursor: pointer; position: relative; } .rank-math-question::after { content: '+'; position: absolute; right: 20px; font-size: 1.2rem; transition: transform 0.3s ease; } .rank-math-list-item.active .rank-math-question::after { content: '-'; transform: rotate(180deg); } .rank-math-answer { display: none; padding: 15px 20px; background-color: #fff; color: #333; font-size: 0.95rem; line-height: 1.5; } .rank-math-answer.show { display: block; animation: fadeIn 0.3s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } .Good-news, .g-n { background-color: #e6ffe6; border-left: 5px solid #28a745; color: #155724; } .Warning, .w { background-color: #fff3cd; border-left: 5px solid #ffc107; color: #856404; } .Error, .e { background-color: #f8d7da; border-left: 5px solid #dc3545; color: #721c24; } .Info, .i { background-color: #d1ecf1; border-left: 5px solid #17a2b8; color: #0c5460; } .Success, .s { background-color: #d4edda; border-left: 5px solid #28a745; color: #155724; } .Neutral, .n { background-color: #f2f2f2; border-left: 5px solid #999; color: #333; } .Note, .nt { background-color: #f0f8ff; border-left: 5px solid #007bff; color: #004085; } .Danger, .d { background-color: #ffe6e6; border-left: 5px solid #ff0000; color: #a70000; } [data-theme="dark"] .Good-news, [data-theme="dark"] .g-n { background-color: #1e2d1e; border-left: 5px solid #4caf50; color: #c3f7c3; } [data-theme="dark"] .Warning, [data-theme="dark"] .w { background-color: #3a2f00; border-left: 5px solid #ffc107; color: #ffe58f; } [data-theme="dark"] .Error, [data-theme="dark"] .e { background-color: #3b1215; border-left: 5px solid #ff4d4f; color: #f5c6cb; } [data-theme="dark"] .Info, [data-theme="dark"] .i { background-color: #163238; border-left: 5px solid #00cfe8; color: #d1ecf1; } [data-theme="dark"] .Success, [data-theme="dark"] .s { background-color: #1f2e1f; border-left: 5px solid #4caf50; color: #b2f5bf; } [data-theme="dark"] .Neutral, [data-theme="dark"] .n { background-color: #2e2e2e; border-left: 5px solid #aaa; color: #ddd; } [data-theme="dark"] .Note, [data-theme="dark"] .nt { background-color: #1a1e2f; border-left: 5px solid #3399ff; color: #aac9f0; } [data-theme="dark"] .Danger, [data-theme="dark"] .d { background-color: #3a1a1a; border-left: 5px solid #ff4c4c; color: #ffc1c1; } .Good-news, .g-n, .Warning, .w, .Error, .e, .Info, .i, .Success, .s, .Neutral, .n, .Note, .nt, .Danger, .d { padding: 12px 18px; margin: 16px 0; font-family: Arial, sans-serif; border-radius: 6px; line-height: 1.6; transition: background-color 0.3s ease, color 0.3s ease; } .Good-news strong, .g-n strong, .Warning strong, .w strong, .Error strong, .e strong, .Info strong, .i strong, .Success strong, .s strong, .Neutral strong, .n strong, .Note strong, .nt strong, .Danger strong, .d strong { font-weight: bold; } #imgOverlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.95); display: none; justify-content: center; align-items: center; z-index: 9999; overflow: auto; padding: 20px; } #imgOverlay img { display: block; width: 100%; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; margin: auto; transition: transform 0.3s ease; } #imgOverlay .close-btn { position: fixed; top: 20px; right: 25px; font-size: 30px; color: #fff; cursor: pointer; background: rgba(0, 0, 0, 0.6); border-radius: 50%; width: 40px; height: 40px; text-align: center; line-height: 36px; z-index: 10001; } .wp-block-image img, figure.wp-block-image img { cursor: zoom-in; } #imgOverlay img:hover { transform: scale(1.02); } header.post-header .post-meta { font-size: 12px; } header.post-header .post-meta .author-title { font-size: 10px; } header.post-header .post-meta .post-date { font-size: 8px; display: flex; align-items: center; } header.post-header .post-meta svg { height: 10px !important; width: 10px !important; } header.post-header .post-breadcrumb span, header.post-header .post-breadcrumb a { font-size: 13px; } header.post-header .post-breadcrumb svg { height: 10px !important; width: 10px !important; display: inline; margin: 0 !important; } header.post-header .post-meta .post-date { display: flex; align-items: center; }.object-cover {object-fit: cover;}
/* Reading Progress Bar */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #f59e0b);
    z-index: 1000;
    transition: width 0.3s ease;
}

/* Floating Background Elements */
.floating-elements {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    top: 0;
    left: 0;
}

.floating-circle {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    animation: float 6s ease-in-out infinite;
}

.floating-circle:nth-child(1) {
    width: 256px;
    height: 256px;
    top: -128px;
    right: -128px;
    animation-delay: 0s;
}

.floating-circle:nth-child(2) {
    width: 192px;
    height: 192px;
    top: 33%;
    left: -96px;
    animation-delay: 2s;
}

.floating-circle:nth-child(3) {
    width: 128px;
    height: 128px;
    bottom: 25%;
    right: 25%;
    animation-delay: 4s;
}
.floating-circle:nth-child(4) {
    width: 64px;
    height: 64px;
    bottom: -32px;
    left: -32px;
    animation-delay: 6s;
}
.floating-circle:nth-child(5) {
    width: 48px;
    height: 48px;
    top: 10%;
    right: 10%;
    animation-delay: 8s;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}