/* ===== Sakura Theme CSS ===== */ :root { /* Sakura theme color palette */ --sakura-lightest: rgb(255, 235, 238); --sakura-light: rgb(255, 205, 210); --sakura-medium: rgb(244, 143, 177); --sakura-dark: rgb(233, 30, 99); --sakura-text: rgb(158, 71, 71); --sakura-accent: rgb(233, 30, 99); --sakura-background: rgb(255, 240, 245); /* Derived colors for various UI elements */ --sakura-gradient: linear-gradient(var(--gradient-secondary), var(--sakura-light), var(--sakura-medium)); --sakura-shadow: 0 10px 30px rgba(233, 30, 99, 0.1); --sakura-button-hover: rgb(236, 64, 122); /* Dark mode variants */ --sakura-dark-lightest: rgb(83, 51, 65); --sakura-dark-light: rgb(103, 58, 68); --sakura-dark-medium: rgb(163, 85, 112); --sakura-dark-dark: rgb(219, 86, 138); --sakura-dark-text: rgb(255, 201, 208); --sakura-dark-background: rgb(35, 22, 29); } /* ===== Main Styles ===== */ /* ===== Hero Section ===== */ .sakura-hero { position: relative; background: var(--sakura-lightest); padding: calc(var(--header-height) + var(--sp-12)) var(--sp-6) var(--sp-16); margin-bottom: var(--sp-16); overflow: hidden; /* border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg); */ box-shadow: var(--sakura-shadow); } .sakura-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M20 18c-1-1-1-3.5 0-5.5s4.5-3.5 5.5-2.5-1.5 3.5-2.5 4.5 2.5 4.5 1.5 5.5-3.5-1-4.5-2zm0 0c-1 1-3.5 1-5.5 0s-3.5-4.5-2.5-5.5 3.5 1.5 4.5 2.5 4.5-2.5 5.5-1.5-1 3.5-2 4.5zm0 0c-1 1-1 3.5 0 5.5s4.5 3.5 5.5 2.5-1.5-3.5-2.5-4.5 2.5-4.5 1.5-5.5-3.5 1-4.5 2zm0 0c-1-1-3.5-1-5.5 0s-3.5 4.5-2.5 5.5 3.5-1.5 4.5-2.5 4.5 2.5 5.5 1.5-1-3.5-2-4.5z' fill='%23f8bbd0' fill-opacity='0.4'/%3E%3C/svg%3E"); opacity: 0.5; z-index: 0; } .sakura-hero-container { position: relative; max-width: var(--container-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: center; z-index: 1; } .sakura-hero-content { display: flex; flex-direction: column; align-items: flex-start; } .sakura-hero-badge { background: var(--sakura-medium); color: white; font-size: 0.85rem; font-weight: 600; padding: var(--sp-2) var(--sp-4); border-radius: 99px; margin-bottom: var(--sp-4); box-shadow: 0 4px 10px rgba(244, 143, 177, 0.3); text-transform: uppercase; letter-spacing: 0.05em; } .sakura-hero-title { font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 800; background: linear-gradient(var(--gradient-secondary), var(--sakura-text), var(--sakura-dark)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: var(--sp-4); line-height: 1.2; } .sakura-hero-subtitle { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--sakura-text); margin-bottom: var(--sp-6); line-height: 1.6; opacity: 0.9; } .sakura-hero-description { font-size: 1.05rem; line-height: 1.7; color: var(--text-secondary); margin-bottom: var(--sp-8); max-width: 540px; } .sakura-cta { display: inline-flex; align-items: center; justify-content: center; background: var(--sakura-medium); color: white; font-weight: 600; padding: 0.8rem 2rem; border-radius: var(--border-radius); text-decoration: none; box-shadow: 0 6px 16px rgba(244, 143, 177, 0.3); transition: all 0.3s ease; position: relative; overflow: hidden; border: none; cursor: pointer; font-size: 1rem; } .sakura-cta:hover { background: var(--sakura-button-hover); transform: translateY(-3px); box-shadow: 0 10px 25px rgba(244, 143, 177, 0.4); } .sakura-cta::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: 0.5s; } .sakura-cta:hover::after { left: 100%; } .sakura-secondary-cta { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--sakura-text); font-weight: 500; padding: 0.8rem 2rem; border-radius: var(--border-radius); text-decoration: none; border: 1px solid var(--sakura-light); transition: all 0.3s ease; margin-left: var(--sp-4); } .sakura-secondary-cta:hover { background: var(--sakura-lightest); transform: translateY(-3px); box-shadow: 0 6px 16px rgba(244, 143, 177, 0.15); } .sakura-hero-image { position: relative; aspect-ratio: 16/9; border-radius: var(--border-radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: white; border: 1px solid var(--sakura-light); transform: perspective(1000px) rotateY(-5deg) rotateX(3deg); transition: all 0.5s ease; } .sakura-hero-image:hover { transform: perspective(1000px) rotateY(0) rotateX(0); } .sakura-hero-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .sakura-hero-image:hover img { transform: scale(1.03); } /* Falling Sakura petals animation */ @keyframes sakura-fall { 0% { transform: translateY(-10%) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; } } @keyframes sakura-sway { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(20px); } } .sakura-petals { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999; } .sakura-petal { position: absolute; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7.58 2 4 5.58 4 10c0 4.42 6 12 8 12s8-7.58 8-12c0-4.42-3.58-8-8-8z' fill='%23f8bbd0' /%3E%3C/svg%3E"); background-size: contain; width: 15px; height: 15px; opacity: 0; animation: sakura-fall linear, sakura-sway ease-in-out alternate infinite; } /* Generating 10 petals with different animations */ .sakura-petal:nth-child(1) { left: 10%; animation-duration: 8s, 3s; animation-delay: 0s, 0s; } .sakura-petal:nth-child(2) { left: 20%; animation-duration: 9s, 4s; animation-delay: 1s, 1s; } .sakura-petal:nth-child(3) { left: 30%; animation-duration: 10s, 6s; animation-delay: 2s, 2s; } .sakura-petal:nth-child(4) { left: 40%; animation-duration: 7s, 4s; animation-delay: 0s, 0s; } .sakura-petal:nth-child(5) { left: 50%; animation-duration: 9s, 5s; animation-delay: 3s, 1s; } .sakura-petal:nth-child(6) { left: 60%; animation-duration: 8s, 3s; animation-delay: 2s, 0s; } .sakura-petal:nth-child(7) { left: 70%; animation-duration: 10s, 4s; animation-delay: 0s, 2s; } .sakura-petal:nth-child(8) { left: 80%; animation-duration: 7s, 3s; animation-delay: 1s, 1s; } .sakura-petal:nth-child(9) { left: 90%; animation-duration: 8s, 5s; animation-delay: 3s, 2s; } .sakura-petal:nth-child(10) { left: 95%; animation-duration: 9s, 4s; animation-delay: 2s, 1s; } /* ===== Content Styling ===== */ /* main { max-width: 800px; margin: 0 auto; padding: 0; border-radius: var(--border-radius-lg); background: none; } */ /* Section styling */ main section { background: white; border-radius: var(--border-radius-lg); padding: var(--sp-8); margin-bottom: var(--sp-8); box-shadow: var(--shadow); border: 1px solid var(--sakura-lightest); position: relative; overflow: hidden; } main section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: var(--sakura-gradient); } main h2 { color: var(--sakura-text); margin-bottom: var(--sp-6); font-size: 1.75rem; font-weight: 700; position: relative; display: inline-block; } main h2::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background: var(--sakura-gradient); border-radius: 2px; } main h3 { color: var(--sakura-dark); margin: var(--sp-6) 0 var(--sp-4); font-size: 1.5rem; font-weight: 600; } main p { margin-bottom: var(--sp-4); line-height: 1.8; color: var(--text); } main ul { margin: var(--sp-4) 0 var(--sp-6) var(--sp-2); color: var(--text); list-style: none; } main li { margin-bottom: var(--sp-3); position: relative; padding-left: var(--sp-4); line-height: 1.7; } main li::before { content: '🌸'; position: absolute; left: -5px; font-size: 0.8rem; color: var(--sakura-dark); top: 1px; } main a { color: var(--sakura-dark); text-decoration: none; border-bottom: 1px solid transparent; transition: all 0.2s ease; font-weight: 500; } main a:hover { border-bottom-color: var(--sakura-dark); } main hr { margin: var(--sp-8) 0; border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--sakura-light), transparent); } /* Install button styling */ main a[href*="chrome.google.com"] { display: inline-block; background: var(--sakura-dark); color: white; font-weight: 600; padding: var(--sp-3) var(--sp-6); border-radius: var(--border-radius); margin: var(--sp-6) 0; box-shadow: 0 6px 16px rgba(233, 30, 99, 0.25); transition: all 0.3s ease; text-decoration: none; border-bottom: none; } main a[href*="chrome.google.com"]:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(233, 30, 99, 0.35); background: var(--sakura-button-hover); } /* ===== Dark Mode Adjustments ===== */ @media (prefers-color-scheme: dark) { .sakura-hero { background: var(--sakura-dark-lightest); } .sakura-hero-title { background: linear-gradient(var(--gradient-secondary), var(--sakura-dark-text), var(--sakura-dark-dark)); -webkit-background-clip: text; background-clip: text; } .sakura-hero-subtitle { color: var(--sakura-dark-text); } .sakura-cta { background: var(--sakura-dark-medium); box-shadow: 0 6px 16px rgba(163, 85, 112, 0.3); } .sakura-cta:hover { background: var(--sakura-dark-dark); box-shadow: 0 10px 25px rgba(219, 86, 138, 0.4); } .sakura-secondary-cta { color: var(--sakura-dark-text); border-color: var(--sakura-dark-light); } .sakura-secondary-cta:hover { background: rgba(103, 58, 68, 0.3); } .sakura-hero-image { border-color: var(--sakura-dark-light); background: var(--surface); } main section { background: var(--surface); border-color: var(--sakura-dark-lightest); } main h2 { color: var(--sakura-dark-text); } main h3 { color: var(--sakura-dark-dark); } main a { color: var(--sakura-dark-dark); } main a:hover { border-bottom-color: var(--sakura-dark-dark); } main hr { background: linear-gradient(90deg, transparent, var(--sakura-dark-light), transparent); } main li::before { color: var(--sakura-dark-dark); } main a[href*="chrome.google.com"] { background: var(--sakura-dark-dark); box-shadow: 0 6px 16px rgba(219, 86, 138, 0.25); } main a[href*="chrome.google.com"]:hover { background: var(--sakura-dark-medium); box-shadow: 0 10px 25px rgba(219, 86, 138, 0.35); } } /* ===== Language Switch ===== */ .language-switch { top: calc(var(--header-height) + var(--sp-4)); right: var(--sp-6); background: white; color: var(--sakura-text); padding: 0.5rem 1.25rem; border-radius: var(--border-radius); font-weight: 600; font-size: 0.875rem; box-shadow: var(--shadow-sm); border: 1px solid var(--sakura-lightest); transition: all var(--transition-normal); z-index: 10; text-align: center; } .language-switch:hover, .language-switch:focus { transform: translateY(-2px) scale(1.05); box-shadow: var(--shadow); background: var(--sakura-gradient); color: white; border-color: transparent; } @media (prefers-color-scheme: dark) { .language-switch { background: var(--surface); color: var(--sakura-dark-text); border-color: var(--sakura-dark-lightest); } } /* ===== Responsive Adjustments ===== */ @media (max-width: 992px) { .sakura-hero-container { grid-template-columns: 1fr; gap: var(--sp-8); } .sakura-hero-content { text-align: center; align-items: center; order: 1; } .sakura-hero-image { order: 0; max-width: 80%; margin: 0 auto; transform: perspective(1000px) rotateY(0) rotateX(5deg) rotateZ(0); } .sakura-secondary-cta { margin-left: 0; margin-top: var(--sp-4); } .sakura-hero-description { text-align: center; max-width: 100%; } } @media (max-width: 768px) { .sakura-hero { padding: calc(var(--header-height) + var(--sp-6)) var(--sp-4) var(--sp-8); } .sakura-hero-title { font-size: 2.2rem; } .sakura-hero-subtitle { font-size: 1.1rem; } main section { padding-inline: var(--sp-6); margin: var(--sp-6); } main h2 { font-size: 1.5rem; } main h3 { font-size: 1.3rem; } .language-switch { top: calc(var(--header-height) + var(--sp-2)); right: var(--sp-4); padding: 0.4rem 1rem; font-size: 0.8rem; } } @media (max-width: 576px) { .sakura-hero-image { max-width: 100%; } .sakura-cta, .sakura-secondary-cta { width: 100%; justify-content: center; } } /* ===== Accessibility ===== */ @media (prefers-reduced-motion: reduce) { .sakura-petal { animation: none !important; } .sakura-hero-image, .sakura-hero-image img, .sakura-cta, .sakura-secondary-cta, .language-switch { transition: none !important; transform: none !important; } .sakura-cta::after { display: none; } } [dir=rtl] main ul { margin: var(--sp-4) var(--sp-2) var(--sp-6) 0; } [dir=rtl] main li { padding-left: 0; padding-right: var(--sp-4); } [dir=rtl] main li::before { left: auto; right: -5px; top: 1px; }