diff --git a/apps/website2/src/index.html b/apps/website2/src/index.html index 476915941..8bc25d454 100644 --- a/apps/website2/src/index.html +++ b/apps/website2/src/index.html @@ -1,255 +1,12 @@ - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - -
- -
- -   diff --git a/apps/website2/src/style.css b/apps/website2/src/style.css new file mode 100644 index 000000000..390be2174 --- /dev/null +++ b/apps/website2/src/style.css @@ -0,0 +1,196 @@ +:root { + --card-bg: #fff; + --brand-1: #e47b19; + --brand-2: #4fa52b; + --brand-3: #e33f3b; + --bg-dark: #0a0e14; + --text-on-dark: #ffffff; +} + +html, +body { + margin: 0; + line-height: 1.5; + font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; +} + +body { + font-family: sans-serif; + background: white; + color: black; +} + +header { + padding: 1em; + position: sticky; + top: 0; + background: rgba(255, 255, 255, 0.75); + box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); + backdrop-filter: blur(20px); + z-index: 1000; +} + +header .content-wrapper { + display: flex; + align-items: center; + justify-items: center; +} + +header img { + width: 48px; + height: 48px; +} + +header img+span { + font-size: 1.1em; +} + +.content-wrapper { + max-width: 920px; + margin: auto; +} + +section { + padding: 2em 0; +} + +section h2 { + text-align: center; + font-weight: 100; +} + +section.hero-section { + position: relative; + background: linear-gradient(135deg, var(--light-bg-start), var(--light-bg-end)); +} + +section.hero-section.dark { + color: var(--text-on-dark); + background: radial-gradient(circle at top left, #0e141b, var(--bg-dark) 70%), linear-gradient(135deg, #0a0e14, #141c24); +} + +/* Extra colored spots */ +section.hero-section::before { + content: ""; + position: absolute; + inset: 0; + pointer-events: none; + background: + radial-gradient(40vmax 40vmax at 15% 25%, rgba(228, 123, 25, 0.25), transparent 70%), + radial-gradient(35vmax 35vmax at 75% 20%, rgba(79, 165, 43, 0.22), transparent 70%), + radial-gradient(28vmax 28vmax at 60% 75%, rgba(227, 63, 59, 0.22), transparent 70%), + radial-gradient(20vmax 20vmax at 85% 65%, rgba(228, 123, 25, 0.18), transparent 70%), + radial-gradient(15vmax 15vmax at 40% 50%, rgba(79, 165, 43, 0.15), transparent 70%); +} + +section.hero-section.dark::before { + background: + radial-gradient(40vmax 40vmax at 20% 30%, rgba(228, 123, 25, 0.25), transparent 70%), + radial-gradient(30vmax 30vmax at 75% 25%, rgba(79, 165, 43, 0.25), transparent 70%), + radial-gradient(25vmax 25vmax at 60% 75%, rgba(227, 63, 59, 0.25), transparent 70%), + radial-gradient(20vmax 20vmax at 85% 65%, rgba(228, 123, 25, 0.15), transparent 70%); +} + +/* Soft vignette for focus */ +section.hero-section::after { + content: ""; + position: absolute; + inset: 0; + background: radial-gradient(circle, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.06) 100%); + pointer-events: none; +} + +/* Optional subtle noise for depth */ +section.hero-section.dark::after { + content: ""; + position: absolute; + inset: 0; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); + opacity: 0.04; + pointer-events: none; +} + +section.hero-section>.content-wrapper { + display: flex; + padding: 3em; + align-items: center; + justify-content: center; + min-height: 60vh; + min-width: 80vw; +} + +section.hero-section .title-section { + flex-basis: 40%; +} + +section.hero-section .title-section h1 { + line-height: 1.1; + font-weight: 100; +} + +section.hero-section .image, +section.hero-section .image img { + width: 100%; + height: auto; + position: relative; +} + +section:nth-of-type(2n+1) { + background: linear-gradient(135deg, rgba(228, 123, 25, 0.08), rgba(79, 165, 43, 0.08)); +} + +.benefits-container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 1em; +} + +.benefits-container .card { + padding: 1em; +} + +.note-types-container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 1em; +} + +.collections-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1em; +} + +.columns-2>div { + flex: 50%; + flex-shrink: 0; + flex-grow: 0; +} + +img { + width: 100%; + height: auto; +} + +footer { + margin: 0; + padding: 1em 0; + box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); +} + +.card { + border: 0; + box-shadow: 0 0 3px rgba(0, 0, 0, 0.25); + background-color: var(--card-bg); + border-radius: 16px; + overflow: hidden; +} + +.card p { + margin: 0; + padding: 1em; +} + +span.text-big { + font-size: 1.25em; +} \ No newline at end of file