/* ===== SLEEK DARK MODERN THEME VARIABLES ===== */ :root { /* Theme-specific color palette */ --sleek-bg: rgb(25, 25, 30); --sleek-frame: rgb(30, 30, 35); --sleek-toolbar: rgb(45, 45, 50); --sleek-omnibox: rgb(50, 50, 55); --sleek-button: rgb(70, 70, 75); --sleek-link: rgb(110, 160, 255); /* Text colors */ --sleek-text-primary: rgb(200, 200, 210); --sleek-text-secondary: rgb(180, 180, 190); --sleek-text-tertiary: rgb(140, 140, 150); /* Border colors */ --sleek-border: rgb(60, 60, 65); /* Transitions */ --sleek-transition-fast: 0.2s ease; --sleek-transition-normal: 0.3s ease; --sleek-transition-slow: 0.5s ease; /* Shadows */ --sleek-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1); --sleek-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); --sleek-shadow-md: 0 15px 35px rgba(0, 0, 0, 0.3); --sleek-shadow-glow: 0 0 40px rgba(110, 160, 255, 0.1); /* Border radius */ --sleek-radius-sm: 0.25rem; --sleek-radius: 0.5rem; --sleek-radius-lg: 1rem; } /* Light mode overrides */ @media (prefers-color-scheme: light) { :root { --sleek-bg: rgb(240, 240, 245); --sleek-frame: rgb(235, 235, 240); --sleek-toolbar: rgb(225, 225, 230); --sleek-omnibox: rgb(215, 215, 220); --sleek-button: rgb(200, 200, 205); --sleek-link: rgb(70, 120, 215); --sleek-text-primary: rgb(30, 30, 35); --sleek-text-secondary: rgb(60, 60, 65); --sleek-text-tertiary: rgb(100, 100, 110); --sleek-border: rgb(180, 180, 185); --sleek-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); --sleek-shadow-md: 0 15px 35px rgba(0, 0, 0, 0.15); --sleek-shadow-glow: 0 0 40px rgba(70, 120, 215, 0.1); } } /* ===== HERO SECTION ===== */ .sleek-hero { background-color: var(--sleek-bg); color: var(--sleek-text-primary); position: relative; overflow: hidden; padding: 4rem 2rem; margin-bottom: 2rem; border-radius: var(--sleek-radius); box-shadow: var(--sleek-shadow); } .sleek-hero-container { display: flex; flex-direction: column; align-items: center; gap: 3rem; position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; } @media (min-width: 768px) { .sleek-hero-container { flex-direction: row; justify-content: space-between; } .sleek-hero { padding: 5rem 3rem; } } .sleek-hero-content { max-width: 600px; } .sleek-hero-badge { display: inline-block; background-color: var(--sleek-button); color: var(--sleek-text-primary); padding: 0.25rem 0.75rem; border-radius: 1rem; font-size: 0.8rem; margin-bottom: 1rem; font-weight: 500; letter-spacing: 0.5px; box-shadow: var(--sleek-shadow-sm); } .sleek-hero-title { font-size: 2.5rem; margin-bottom: 1rem; font-weight: bold; background: linear-gradient(90deg, var(--sleek-text-primary), var(--sleek-link)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; } .sleek-hero-subtitle { font-size: 1.25rem; margin-bottom: 1rem; color: var(--sleek-text-secondary); line-height: 1.5; } .sleek-hero-description { margin-bottom: 2rem; line-height: 1.6; color: var(--sleek-text-tertiary); } .sleek-cta { display: inline-block; background-color: var(--sleek-link); color: var(--sleek-frame); padding: 0.75rem 1.5rem; border-radius: var(--sleek-radius-sm); text-decoration: none; font-weight: bold; transition: all var(--sleek-transition-normal); box-shadow: var(--sleek-shadow-sm); position: relative; overflow: hidden; } .sleek-cta:hover { background-color: rgba(110, 160, 255, 0.9); transform: translateY(-2px); box-shadow: var(--sleek-shadow); } .sleek-cta:active { transform: translateY(0); box-shadow: var(--sleek-shadow-sm); } .sleek-secondary-cta { display: inline-block; background-color: transparent; color: var(--sleek-link); padding: 0.75rem 1.5rem; border-radius: var(--sleek-radius-sm); text-decoration: none; border: 1px solid var(--sleek-link); transition: all var(--sleek-transition-normal); } .sleek-secondary-cta:hover { background-color: rgba(110, 160, 255, 0.1); transform: translateY(-2px); } .sleek-secondary-cta:active { transform: translateY(0); } /* ===== BROWSER WINDOW MOCKUP ===== */ .browser-window { width: 100%; max-width: 450px; border-radius: var(--sleek-radius); overflow: hidden; box-shadow: var(--sleek-shadow), var(--sleek-shadow-glow); border: 1px solid var(--sleek-border); transform: perspective(1000px) rotateY(-5deg) rotateX(5deg); transition: all var(--sleek-transition-slow); } .browser-window:hover { transform: perspective(1000px) rotateY(0deg) rotateX(0deg); box-shadow: var(--sleek-shadow-md), 0 0 50px rgba(110, 160, 255, 0.15); } .browser-toolbar { padding: 0.5rem; background-color: var(--sleek-toolbar); border-bottom: 1px solid var(--sleek-border); } .browser-tabs { display: flex; margin-bottom: 0.5rem; } .browser-tab { padding: 0.5rem 1rem; border-radius: 0.25rem 0.25rem 0 0; font-size: 0.8rem; background-color: var(--sleek-frame); color: var(--sleek-text-tertiary); margin-right: 0.25rem; transition: all var(--sleek-transition-fast); } .browser-tab.active { background-color: var(--sleek-omnibox); color: var(--sleek-text-primary); } .browser-address-bar { height: 2rem; border-radius: var(--sleek-radius-sm); background-color: var(--sleek-omnibox); position: relative; } .browser-address-bar:before { content: ""; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; background-color: var(--sleek-button); } .browser-content { height: 250px; background-color: var(--sleek-frame); background-image: radial-gradient(circle at 10% 20%, rgba(110, 160, 255, 0.03) 0%, transparent 20%), radial-gradient(circle at 90% 80%, rgba(110, 160, 255, 0.03) 0%, transparent 20%); } /* ===== STAR FIELD ANIMATION ===== */ .star-field { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .star { position: absolute; width: 2px; height: 2px; background-color: var(--sleek-text-primary); border-radius: 50%; opacity: 0.5; animation: twinkle 5s infinite; } @keyframes twinkle { 0% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.2); } 100% { opacity: 0.3; transform: scale(1); } } /* ===== COLOR PALETTE DISPLAY ===== */ .color-palette { display: flex; flex-wrap: wrap; gap: 1rem; margin: 2rem 0; justify-content: center; } .color-swatch { width: 150px; height: 100px; display: flex; align-items: center; justify-content: center; border-radius: var(--sleek-radius); position: relative; text-align: center; font-size: 0.9rem; box-shadow: var(--sleek-shadow-sm); transition: all var(--sleek-transition-normal); color: var(--sleek-text-primary); overflow: hidden; } .color-swatch:hover { transform: translateY(-5px); box-shadow: var(--sleek-shadow); } .color-swatch::before { content: attr(data-name); position: absolute; top: -30px; left: 0; right: 0; text-align: center; font-weight: bold; transition: all var(--sleek-transition-normal); } .color-swatch:hover::before { top: 15px; } .color-frame { background-color: rgb(30, 30, 35); } .color-toolbar { background-color: rgb(45, 45, 50); } .color-omnibox { background-color: rgb(50, 50, 55); } .color-button { background-color: rgb(70, 70, 75); } .color-link { background-color: rgb(110, 160, 255); color: rgb(30, 30, 35) !important; } /* ===== MAIN CONTENT AREA ===== */ main section { max-width: 900px; margin: 0 auto; color: var(--text); /* padding: 0 1.5rem; */ } main section h2 { margin-top: 2.5rem; margin-bottom: 1.25rem; position: relative; padding-bottom: 0.5rem; color: var(--sleek-text-primary); } main section h2::after { content: ""; position: absolute; bottom: 0; left: 0; width: 60px; height: 3px; background: linear-gradient(90deg, rgb(90, 140, 235), var(--sleek-link)); border-radius: 3px; } main section p { line-height: 1.7; margin-bottom: 1.5rem; color: var(--sleek-text-secondary); } main section ul { margin-bottom: 2rem; color: var(--sleek-text-secondary); padding-left: 1.5rem; } [dir="rtl"] main section ul { padding-left: 0; padding-right: 1.5rem; } main section li { margin-bottom: 0.5rem; } main section a { color: var(--sleek-link); text-decoration: none; transition: color var(--sleek-transition-fast); } main section a:hover { color: rgba(110, 160, 255, 0.8); text-decoration: underline; } main section strong { color: var(--sleek-text-primary); font-weight: 600; } /* ===== CALL TO ACTION BUTTON IN CONTENT ===== */ .cta-container { display: flex; justify-content: center; gap: 1rem; } main section a[href*="chromewebstore"] { display: inline-block; background-color: var(--sleek-link); color: white; padding: 0.75rem 1.5rem; border-radius: var(--sleek-radius-sm); text-decoration: none; font-weight: bold; margin: 1.5rem 0; transition: all var(--sleek-transition-normal); box-shadow: var(--sleek-shadow-sm); } main section a[href*="chromewebstore"]:hover { background-color: rgba(110, 160, 255, 0.9); transform: translateY(-2px); box-shadow: var(--sleek-shadow); text-decoration: none; } /* ===== FOOTER SECTION ===== */ main section hr { margin: 3rem 0 2rem; border: none; height: 1px; background: linear-gradient(90deg, transparent, rgba(110, 160, 255, 0.3), transparent); } /* ===== ANIMATIONS ===== */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 1s ease forwards; } .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } [dir="rtl"] .sleek-hero-content { text-align: right; } [dir="rtl"] .sleek-hero-badge { margin-left: 0; margin-right: 1rem; } [dir="rtl"] .sleek-hero-title { background: linear-gradient(90deg, var(--sleek-link), var(--sleek-text-primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; } [dir="rtl"] .browser-tab { margin-right: 0; margin-left: 0.25rem; } [dir="rtl"] .browser-address-bar:before { left: auto; right: 10px; } [dir="rtl"] .color-swatch::before { left: auto; right: 0; } [dir="rtl"] main section h2::after { left: auto; right: 0; } /* ===== RESPONSIVE ADJUSTMENTS ===== */ @media (max-width: 768px) { .sleek-hero-title { font-size: 2rem; } .cta-container { flex-direction: column; justify-content: flex-end; } .color-palette { justify-content: center; } .browser-window { max-width: 100%; transform: none; } .browser-window:hover { transform: none; } .sleek-hero-container { gap: 2rem; } } @media (max-width: 576px) { .sleek-hero { padding: 3rem 1.5rem; } .sleek-hero-title { font-size: 1.8rem; } .sleek-cta, .sleek-secondary-cta { display: block; width: 100%; text-align: center; } } /* ===== END OF SLEEK DARK MODERN THEME ===== */