commit 34b36f654ee935463c6640a666d49e03fa78f114 Author: vidy Date: Sat Apr 18 07:55:52 2026 +0000 Initial commit: Novizun redesign — government-approved STEM toy vendor website - Modern, conversion-focused redesign for novizun.com - Dual-audience positioning: schools (B2B) and parents (B2C) - Government vendor credentials section (GeBIZ/VCG, UEN, tax invoices) - Government claims reference (Edusave, PGS, ECDA, MOE schemes) - 4-step school order process with claim-ready documentation - Product catalog with category filtering - Dark mode, responsive design, scroll animations - Floating mobile CTA for school enquiries diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c3e0cdb --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +screenshots/ +.DS_Store +*.swp +*.swo +*~ diff --git a/index.html b/index.html new file mode 100644 index 0000000..f329929 --- /dev/null +++ b/index.html @@ -0,0 +1,676 @@ + + + + + + Novizun — Government-Approved STEM Toy Vendor for Singapore Schools + + + + + + + + + + + + + + + + Skip to main content + + + + +
+ +
+
+
+
+
+
+
+
+ + + GeBIZ / VCG Registered Vendor + + + + 4.9 on Shopee · 500+ Customers + +
+

+ STEM toys schools can
actually claim from government. +

+

+ GeBIZ-registered vendor with valid UEN. We provide proper tax invoices so your school can + claim from Edusave, PGS, ECDA, and MOE funding. Authentic PicassoTiles & Play-Doh, delivered + across Singapore in 1–3 days. +

+
+ + + Request a School Quote + + Browse Products +
+
+
+ + Tax Invoice with UEN +
+
+ + 1–3 Day Delivery +
+
+ + 15+ School Partners +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+ 15+ + School Partners +
+ +
+ GeBIZ + Registered Vendor +
+ +
+ 4.9/5 + Shopee Rating +
+ +
+ 100% + Authentic & Safe +
+
+
+ + + + +
+
+
+ For Schools & Institutions +

Government-approved vendor.
Claim-ready documentation.

+

+ We understand what schools need to process claims. Every order comes with the right paperwork, + so your admin team doesn't have to chase us for anything. +

+
+ + +
+
+ UEN + 533XXXXXB +
+ +
+ Registered On + GeBIZ / VCG +
+ +
+ Entity Type + Sole Proprietor +
+
+ +
+
+
+ +
+
+

GeBIZ / VCG Registered

+

Find us on Singapore's government procurement portal. Schools can purchase directly through official channels with full transparency.

+
+
+
+
+ +
+

Tax Invoice with UEN

+

Every order includes a proper Singapore tax invoice with our UEN, ready for your finance department to process claims.

+
+
+
+ +
+

Bulk & Custom Orders

+

Special pricing for schools, kindergartens, childcare centres, and enrichment providers. Tell us what you need — we'll make it work.

+
+
+ + +
+ Trusted by institutions across Singapore: +
+ + + + +
+
+ + +
+

How school orders work

+
+
+
1
+

Send us your requirements

+

Email us with the products, quantities, and your school's delivery address. We'll prepare a quote within 24 hours.

+
+
+
2
+

We deliver to your school

+

Once approved, we deliver across Singapore within 1–3 business days with protective packaging for classroom use.

+
+
+
3
+

You receive a tax invoice

+

Every delivery comes with a proper tax invoice including our UEN — ready for your finance team to submit for government claims.

+
+
+
4
+

Claim from government funds

+

Use the invoice to claim under Edusave, PGS, ECDA, MOE, or other applicable schemes. We're here if you need supporting docs.

+
+
+
+ + + Email Us for a Quote + + We respond within 24 hours on business days +
+
+
+
+ + +
+
+
+ Government Claims +

Claim under these
government schemes

+

+ Our invoices are formatted to support claims under Singapore's major education funding schemes. + Ask us if you need scheme-specific documentation. +

+
+
+
+
MOE
+

Edusave

+

For primary and secondary school enrichment programmes. Use Edusave funds to purchase STEM learning materials for your students.

+ Primary & Secondary Schools +
+
+
ECDA
+

PGS — Preschool Grant Scheme

+

For kindergartens and childcare centres to enhance learning environments with quality educational resources and materials.

+ Kindergartens & Childcare +
+
+
ECDA
+

KidSTART & ECDA Grants

+

Early Childhood Development Agency funding for centres supporting lower-income families with developmental learning tools.

+ Early Childhood Centres +
+
+
MOE
+

MOE School Funds

+

General school procurement budgets for classroom resources, STEM corners, and hands-on learning materials.

+ All MOE Schools +
+
+

+ Not sure which scheme applies to your school? Email us — + we've helped 15+ schools navigate the process and can point you in the right direction. +

+
+
+ + +
+
+
+ Why Novizun +

Built for schools.
Loved by parents.

+

We specialise in genuine PicassoTiles and Play-Doh, selected with input from local educators and parents.

+
+
+
+
+ +
+
+

100% Authentic, Safety-Certified

+

USA-sourced PicassoTiles and Play-Doh with international safety certifications. Every product verified genuine — no knock-offs, no compromises.

+
+
+
+
+ +
+

Claim-Ready Paperwork

+

Tax invoices with UEN, GeBIZ registration, and flexible documentation to match your school's procurement requirements.

+
+
+
+ +
+

Bulk Pricing for Institutions

+

Special rates for schools, kindergartens, and enrichment centres. The more you need, the better the pricing.

+
+
+
+ +
+

STEM-Aligned Products

+

Develops critical thinking, creativity, spatial awareness and problem-solving — aligned with MOE STEM learning objectives.

+
+
+
+ +
+

Fast, Careful Delivery

+

1–3 day delivery across Singapore with protective packaging. We deliver directly to schools during business hours.

+
+
+
+
+ + +
+
+
+
+ +
+
+
+ Our Story +

Meet Novi

+

A mum-led business that started with one child's fine-motor challenge and grew into a school-trusted STEM toy supplier.

+

After almost a decade in corporate life, I became a full-time mum and moved to Singapore with my husband. To stay close to my daughter and still contribute to our family, I started selling online.

+

When my daughter struggled with grip strength and fine-motor control, I began researching toys that could really support her development instead of just keeping her busy.

+

That journey led me to authentic, research-backed STEM toys like magnetic tiles and Play-Doh. Today, Novizun serves both families and schools across Singapore — with the proper documentation that institutions need.

+

— Novi Lestari

+
+
+
+ + +
+
+
+ Our Products +

Authentic STEM toys,
classroom-ready

+

Every product is 100% authentic, safety-certified, and available with bulk pricing for institutions.

+
+ +
+ + + + +
+ +
+
+
+ + Ages 3+ +
+
+

Picasso Magnetic Character Playset

+

Magnetic character action figures for creative role-play. Works with PicassoTiles and other magnetic tile brands.

+
+ $29.90 + View +
+
+
+ +
+
+ + Ages 3+ +
+
+

Play-Doh 65 Pack Modeling Compound

+

65 cans featuring 60 different colors — classic, confetti, sparkle, and color burst. Non-toxic, perfect for crafts and classroom activities.

+
+ $49.90 + View +
+
+
+ +
+
+ + Ages 3+ +
+
+

PicassoTiles 102pc Ninja Set

+

102-piece Ninja themed set with 8 character action figures and 94 magnetic tiles. 2-in-1 storytelling and construction play.

+
+ $89.90 + View +
+
+
+ +
+
+ + Ages 3+ +
+
+

PicassoTiles 72pc Ice Castle Set

+

Winter ice castle magnetic building set with 2 characters, hand tools, and stairs. Translucent blocks promote STEM learning.

+
+ $79.90 + View +
+
+
+ +
+
+ + Ages 3+ +
+
+

PicassoTiles Construction Set

+

Construction-themed set with 8 character action figures and vehicles. Combines building blocks with pretend play.

+
+ $69.90 + View +
+
+
+ +
+
+ + Ages 3+ +
+
+

PicassoTiles 8-Piece Character Action Figures

+

King, Queen, Grandpa, Grandma, Athlete Boy & Girl, Waitress, and Cowboy. Movable limbs for interactive storytelling.

+
+ $29.90 + View +
+
+
+
+ +
+ + + Shop on Shopee + + or + + + Request Bulk Quote + +
+
+
+ + +
+
+
+ Reviews +

Trusted by Singapore schools & families

+
+
+
+
+ + + + + +
+

"PicassoTiles transformed our STEM programme. Students look forward to every hands-on lesson and collaborate much more confidently. The invoicing process was smooth and hassle-free."

+
+ K Sarata + Admin Manager, New Town Primary School +
+
+
+
+ + + + + +
+

"Very good quality. My son loves building with these tiles and they arrived quickly."

+
ParentShopee Review
+
+
+
+ + + + + +
+

"Good quality and safe materials. Perfect for classroom activities and hands-on lessons."

+
EducatorShopee Review
+
+
+
+
+ + +
+
+
+ FAQ +

Answers for schools, parents & educators

+
+
+
+ Can schools claim Novizun purchases from government funds? +

Yes. We are a GeBIZ/VCG-registered vendor with a valid UEN. Every order comes with a proper tax invoice that your school's finance department can use to claim under Edusave, PGS, ECDA, MOE funds, or other applicable government schemes.

+
+
+ What documentation do you provide for school orders? +

We provide a full tax invoice with our UEN, product descriptions, and quantities. If your school needs additional documentation (e.g., quotations, delivery orders, or scheme-specific forms), just let us know — we're experienced with school procurement processes.

+
+
+ Do you offer bulk pricing for schools and institutions? +

Yes, we provide special pricing for schools, kindergartens, childcare centres, and enrichment providers. Contact us with your requirements and we'll prepare a custom quote.

+
+
+ Are PicassoTiles compatible with other magnetic tile brands? +

Yes, PicassoTiles are compatible with other major magnetic tile brands such as Magna-Tiles so you can safely mix and expand your existing sets.

+
+
+ What age range are these STEM toys suitable for? +

Our educational STEM toys are designed for children aged 3 years and above, making them perfect for preschool through primary school programmes.

+
+
+ Are the products authentic and safe? +

All our products are 100% authentic and sourced directly from the USA. They meet international safety standards and are tested for child safety — essential for school procurement requirements.

+
+
+ How fast is delivery for school orders? +

We offer 1–3 business day delivery across Singapore. For school orders, we can deliver during business hours and coordinate with your school's receiving schedule.

+
+
+ Can I return or exchange products? +

Yes, we offer a 30-day return policy for unused products in original packaging. Contact our customer service for return authorisation.

+
+
+
+
+ + +
+
+
+
+ For Schools & Institutions +

Bulk orders with
claim-ready invoices

+

GeBIZ-registered. Tax invoices with UEN. Special pricing for 15+ schools across Singapore.

+ + + Request a School Quote + +
+
+ For Parents & Families +

Shop authentic STEM
toys on Shopee

+

4.9-star rating. 500+ happy customers. Fast 1–3 day delivery across Singapore.

+ + + Shop on Shopee + +
+
+
+
+
+ + + + + + + +
+ + + Get a School Quote + +
+ + diff --git a/script.js b/script.js new file mode 100644 index 0000000..7a25beb --- /dev/null +++ b/script.js @@ -0,0 +1,157 @@ +/* Novizun — Interactive Script */ + +// Initialize Lucide icons +lucide.createIcons(); + +// Dark mode toggle +(function () { + const toggle = document.querySelector('[data-theme-toggle]'); + const root = document.documentElement; + let dark = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + root.setAttribute('data-theme', dark); + + if (toggle) { + toggle.addEventListener('click', function () { + dark = dark === 'dark' ? 'light' : 'dark'; + root.setAttribute('data-theme', dark); + toggle.setAttribute('aria-label', 'Switch to ' + (dark === 'dark' ? 'light' : 'dark') + ' mode'); + toggle.innerHTML = dark === 'dark' + ? '' + : ''; + }); + } +})(); + +// Mobile menu toggle +(function () { + const btn = document.getElementById('mobile-menu-btn'); + const nav = document.getElementById('nav'); + if (btn && nav) { + btn.addEventListener('click', function () { + const expanded = btn.getAttribute('aria-expanded') === 'true'; + btn.setAttribute('aria-expanded', String(!expanded)); + nav.classList.toggle('open'); + }); + // Close on link click + nav.querySelectorAll('.nav-link').forEach(function (link) { + link.addEventListener('click', function () { + btn.setAttribute('aria-expanded', 'false'); + nav.classList.remove('open'); + }); + }); + } +})(); + +// Header scroll behavior +(function () { + const header = document.getElementById('header'); + let lastScroll = 0; + window.addEventListener('scroll', function () { + const scrollY = window.scrollY; + if (scrollY > 10) { + header.classList.add('header--scrolled'); + } else { + header.classList.remove('header--scrolled'); + } + lastScroll = scrollY; + }, { passive: true }); +})(); + +// Product category filtering +(function () { + const tabs = document.querySelectorAll('.product-tab'); + const cards = document.querySelectorAll('.product-card'); + + tabs.forEach(function (tab) { + tab.addEventListener('click', function () { + // Update active tab + tabs.forEach(function (t) { + t.classList.remove('active'); + t.setAttribute('aria-selected', 'false'); + }); + tab.classList.add('active'); + tab.setAttribute('aria-selected', 'true'); + + const filter = tab.getAttribute('data-filter'); + + cards.forEach(function (card) { + if (filter === 'all') { + card.classList.remove('hidden'); + } else { + const category = card.getAttribute('data-category') || ''; + if (category.includes(filter)) { + card.classList.remove('hidden'); + } else { + card.classList.add('hidden'); + } + } + }); + }); + }); +})(); + +// Smooth scroll for anchor links +document.querySelectorAll('a[href^="#"]').forEach(function (anchor) { + anchor.addEventListener('click', function (e) { + const target = document.querySelector(this.getAttribute('href')); + if (target) { + e.preventDefault(); + target.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + }); +}); + +// Intersection Observer for scroll reveal +(function () { + const sections = document.querySelectorAll('.section'); + if (!('IntersectionObserver' in window)) return; + + const observer = new IntersectionObserver(function (entries) { + entries.forEach(function (entry) { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + observer.unobserve(entry.target); + } + }); + }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }); + + sections.forEach(function (section) { + section.style.opacity = '0'; + section.style.transform = 'translateY(20px)'; + section.style.transition = 'opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1)'; + observer.observe(section); + }); +})(); + +// Floating CTA — show after scrolling past hero +(function () { + var floatingCta = document.getElementById('floating-cta'); + if (!floatingCta) return; + + var hero = document.querySelector('.hero'); + if (!hero) return; + + // Check if mobile (floating CTA hidden on desktop via CSS, but let's be safe) + function checkMobile() { + return window.innerWidth < 768; + } + + function toggleFloatingCta() { + if (!checkMobile()) { + floatingCta.classList.remove('visible'); + return; + } + var heroBottom = hero.getBoundingClientRect().bottom; + if (heroBottom < 0) { + floatingCta.classList.add('visible'); + } else { + floatingCta.classList.remove('visible'); + } + } + + window.addEventListener('scroll', toggleFloatingCta, { passive: true }); + window.addEventListener('resize', toggleFloatingCta, { passive: true }); + // Initial check + toggleFloatingCta(); +})(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..0e925bb --- /dev/null +++ b/style.css @@ -0,0 +1,1682 @@ +/* ============================================ + NOVIZUN — Redesigned Styles + Palette: Warm Amber Primary + Teal Accent + Typography: Instrument Serif (display) + Plus Jakarta Sans (body) + ============================================ */ + +/* --- Design Tokens --- */ +:root, [data-theme="light"] { + /* Surfaces */ + --color-bg: #faf9f6; + --color-surface: #ffffff; + --color-surface-2: #f5f4f0; + --color-surface-offset: #edecea; + --color-surface-offset-2: #e6e4df; + --color-surface-dynamic: #dddbd6; + --color-divider: #d6d3cd; + --color-border: #cdc9c2; + + /* Text */ + --color-text: #1a1816; + --color-text-muted: #6b665e; + --color-text-faint: #a9a49c; + --color-text-inverse: #faf9f6; + + /* Primary — Warm Amber */ + --color-primary: #c98d1d; + --color-primary-hover: #a87214; + --color-primary-active: #8a5c0f; + --color-primary-highlight: #f3e8d0; + --color-primary-subtle: rgba(201, 141, 29, 0.08); + + /* Accent — Teal */ + --color-accent: #2dbad2; + --color-accent-hover: #2298ac; + --color-accent-active: #1a7d8e; + --color-accent-highlight: #d0eef3; + + /* Semantic */ + --color-success: #3d9a40; + --color-error: #c4342d; + + /* Radius */ + --radius-sm: 0.375rem; + --radius-md: 0.625rem; + --radius-lg: 0.875rem; + --radius-xl: 1.125rem; + --radius-full: 9999px; + + /* Transitions */ + --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1); + --transition-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1); + + /* Shadows */ + --shadow-sm: 0 1px 3px oklch(0.2 0.02 80 / 0.06), 0 1px 2px oklch(0.2 0.02 80 / 0.04); + --shadow-md: 0 4px 16px oklch(0.2 0.02 80 / 0.08), 0 2px 4px oklch(0.2 0.02 80 / 0.04); + --shadow-lg: 0 12px 40px oklch(0.2 0.02 80 / 0.12), 0 4px 12px oklch(0.2 0.02 80 / 0.06); + + /* Content widths */ + --content-narrow: 640px; + --content-default: 1080px; + --content-wide: 1200px; + + /* Font families */ + --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif; + --font-body: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; + + /* Tile colors (for hero) */ + --tile-pink: #f472b6; + --tile-purple: #a78bfa; + --tile-yellow: #fbbf24; + --tile-green: #34d399; +} + +[data-theme="dark"] { + --color-bg: #111110; + --color-surface: #1a1918; + --color-surface-2: #1f1e1c; + --color-surface-offset: #1c1b19; + --color-surface-offset-2: #242220; + --color-surface-dynamic: #2c2a27; + --color-divider: #2e2c29; + --color-border: #3a3835; + --color-text: #e8e6e2; + --color-text-muted: #918c84; + --color-text-faint: #5f5b55; + --color-text-inverse: #1a1918; + --color-primary: #e6b04c; + --color-primary-hover: #d49a30; + --color-primary-active: #bb8220; + --color-primary-highlight: #332a15; + --color-primary-subtle: rgba(230, 176, 76, 0.1); + --color-accent: #6ccee0; + --color-accent-hover: #4dbdd2; + --color-accent-active: #3aa8bc; + --color-accent-highlight: #162a30; + --color-success: #5cb860; + --color-error: #e85a52; + --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.2); + --shadow-md: 0 4px 16px oklch(0 0 0 / 0.3); + --shadow-lg: 0 12px 40px oklch(0 0 0 / 0.4); +} + +@media (prefers-color-scheme: dark) { + :root:not([data-theme]) { + --color-bg: #111110; + --color-surface: #1a1918; + --color-surface-2: #1f1e1c; + --color-surface-offset: #1c1b19; + --color-surface-offset-2: #242220; + --color-surface-dynamic: #2c2a27; + --color-divider: #2e2c29; + --color-border: #3a3835; + --color-text: #e8e6e2; + --color-text-muted: #918c84; + --color-text-faint: #5f5b55; + --color-text-inverse: #1a1918; + --color-primary: #e6b04c; + --color-primary-hover: #d49a30; + --color-primary-active: #bb8220; + --color-primary-highlight: #332a15; + --color-primary-subtle: rgba(230, 176, 76, 0.1); + --color-accent: #6ccee0; + --color-accent-hover: #4dbdd2; + --color-accent-active: #3aa8bc; + --color-accent-highlight: #162a30; + --color-success: #5cb860; + --color-error: #e85a52; + --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.2); + --shadow-md: 0 4px 16px oklch(0 0 0 / 0.3); + --shadow-lg: 0 12px 40px oklch(0 0 0 / 0.4); + } +} + +/* --- Type Scale --- */ +:root { + --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); + --text-sm: clamp(0.8125rem, 0.78rem + 0.25vw, 0.9375rem); + --text-base: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); + --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); + --text-xl: clamp(1.5rem, 1.2rem + 1vw, 2rem); + --text-2xl: clamp(2rem, 1.2rem + 2.2vw, 3.25rem); + --text-3xl: clamp(2.75rem, 1.5rem + 3vw, 4.5rem); +} + +/* --- Spacing --- */ +:root { + --space-1: 0.25rem; + --space-2: 0.5rem; + --space-3: 0.75rem; + --space-4: 1rem; + --space-5: 1.25rem; + --space-6: 1.5rem; + --space-8: 2rem; + --space-10: 2.5rem; + --space-12: 3rem; + --space-16: 4rem; + --space-20: 5rem; + --space-24: 6rem; + --space-32: 8rem; +} + +/* --- Base Reset --- */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + +html { + -moz-text-size-adjust: none; + -webkit-text-size-adjust: none; + text-size-adjust: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; + scroll-behavior: smooth; + scroll-padding-top: 5rem; +} + +body { + min-height: 100dvh; + line-height: 1.6; + font-family: var(--font-body); + font-size: var(--text-base); + color: var(--color-text); + background-color: var(--color-bg); + overflow-x: hidden; +} + +@media (max-width: 767px) { + body { + padding-bottom: 72px; /* space for floating CTA */ + } +} + +img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } +ul[role="list"], ol[role="list"] { list-style: none; } +input, button, textarea, select { font: inherit; color: inherit; } + +h1, h2, h3, h4, h5, h6 { text-wrap: balance; line-height: 1.15; font-family: var(--font-display); font-weight: 400; } +p, li, figcaption { text-wrap: pretty; max-width: 68ch; } + +::selection { + background: oklch(from var(--color-primary) l c h / 0.25); + color: var(--color-text); +} + +:focus-visible { + outline: 2px solid var(--color-primary); + outline-offset: 3px; + border-radius: var(--radius-sm); +} + +@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; + } +} + +button { cursor: pointer; background: none; border: none; } + +a, button, [role="button"], [role="link"], input, textarea, select { + transition: color var(--transition-interactive), + background var(--transition-interactive), + border-color var(--transition-interactive), + box-shadow var(--transition-interactive); +} + +.sr-only { + position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; + overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; +} + +/* --- Layout --- */ +.container { + max-width: var(--content-default); + margin-inline: auto; + padding-inline: var(--space-5); +} + +.section { + padding-block: clamp(var(--space-16), 6vw, var(--space-32)); +} + +/* --- Buttons --- */ +.btn { + display: inline-flex; + align-items: center; + gap: var(--space-2); + font-family: var(--font-body); + font-weight: 600; + font-size: var(--text-sm); + border-radius: var(--radius-md); + padding: var(--space-3) var(--space-6); + text-decoration: none; + white-space: nowrap; +} + +.btn-sm { + font-size: var(--text-xs); + padding: var(--space-2) var(--space-4); + border-radius: var(--radius-sm); +} + +.btn-lg { + font-size: var(--text-base); + padding: var(--space-4) var(--space-8); + border-radius: var(--radius-lg); +} + +.btn-primary { + background: var(--color-primary); + color: #fff; + box-shadow: 0 1px 3px oklch(from var(--color-primary) l c h / 0.3); +} +.btn-primary:hover { + background: var(--color-primary-hover); + box-shadow: 0 2px 8px oklch(from var(--color-primary) l c h / 0.4); + transform: translateY(-1px); +} +.btn-primary:active { + background: var(--color-primary-active); + transform: translateY(0); +} + +.btn-outline { + border: 1.5px solid var(--color-border); + color: var(--color-text); + background: transparent; +} +.btn-outline:hover { + border-color: var(--color-text-muted); + background: var(--color-surface-2); +} + +/* --- Header --- */ +.header { + position: sticky; + top: 0; + z-index: 100; + background: oklch(from var(--color-bg) l c h / 0.92); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border-bottom: 1px solid oklch(from var(--color-border) l c h / 0.5); + transition: box-shadow var(--transition-smooth); +} +.header--scrolled { + box-shadow: var(--shadow-sm); +} + +.header-inner { + display: flex; + align-items: center; + justify-content: space-between; + height: 4rem; + gap: var(--space-4); +} + +.logo { + display: flex; + align-items: center; + gap: var(--space-2); + text-decoration: none; + color: var(--color-text); +} +.logo-text { + font-family: var(--font-display); + font-size: 1.375rem; + font-weight: 400; + letter-spacing: -0.02em; +} + +.nav { + display: flex; + align-items: center; + gap: var(--space-1); +} +.nav-link { + font-size: var(--text-sm); + font-weight: 500; + color: var(--color-text-muted); + text-decoration: none; + padding: var(--space-2) var(--space-3); + border-radius: var(--radius-sm); +} +.nav-link:hover { + color: var(--color-text); + background: var(--color-surface-2); +} + +.header-actions { + display: flex; + align-items: center; + gap: var(--space-3); +} + +.theme-toggle { + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + border-radius: var(--radius-sm); + color: var(--color-text-muted); +} +.theme-toggle:hover { + color: var(--color-text); + background: var(--color-surface-2); +} + +.header-cta { + display: none; +} + +.mobile-menu-btn { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 5px; + width: 36px; + height: 36px; + border-radius: var(--radius-sm); +} +.mobile-menu-btn span { + display: block; + width: 20px; + height: 2px; + background: var(--color-text); + border-radius: 1px; + transition: var(--transition-interactive); +} +.mobile-menu-btn[aria-expanded="true"] span:nth-child(1) { + transform: rotate(45deg) translate(5px, 5px); +} +.mobile-menu-btn[aria-expanded="true"] span:nth-child(2) { + opacity: 0; +} +.mobile-menu-btn[aria-expanded="true"] span:nth-child(3) { + transform: rotate(-45deg) translate(5px, -5px); +} + +@media (min-width: 768px) { + .mobile-menu-btn { display: none; } + .header-cta { display: inline-flex; } +} + +/* --- Hero --- */ +.hero { + position: relative; + padding-block: clamp(var(--space-12), 8vw, var(--space-24)) var(--space-16); + overflow: hidden; +} + +.hero-badges { + display: flex; + flex-wrap: wrap; + gap: var(--space-3); + margin-bottom: var(--space-6); +} + +.hero-badge--vendor { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-2) var(--space-4); + background: var(--color-accent-highlight); + border: 1px solid oklch(from var(--color-accent) l c h / 0.2); + border-radius: var(--radius-full); + font-size: var(--text-xs); + font-weight: 700; + color: var(--color-accent-active); +} +.hero-badge--vendor svg { color: var(--color-accent-active); } + +.hero-badge--rating { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-2) var(--space-4); + background: var(--color-primary-subtle); + border: 1px solid oklch(from var(--color-primary) l c h / 0.15); + border-radius: var(--radius-full); + font-size: var(--text-xs); + font-weight: 600; + color: var(--color-primary); +} +.hero-badge--rating svg { color: var(--color-primary); } + +.hero-bg { + position: absolute; + inset: 0; + pointer-events: none; + overflow: hidden; +} + +.hero-shape { + position: absolute; + border-radius: 50%; + opacity: 0.12; +} + +.hero-shape-1 { + width: 600px; + height: 600px; + background: var(--color-primary); + top: -200px; + right: -200px; + filter: blur(100px); +} + +.hero-shape-2 { + width: 400px; + height: 400px; + background: var(--color-accent); + bottom: -100px; + left: -100px; + filter: blur(80px); +} + +.hero-shape-3 { + width: 300px; + height: 300px; + background: var(--tile-pink); + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + filter: blur(120px); + opacity: 0.06; +} + +.hero-content { + position: relative; + z-index: 2; + max-width: 680px; +} + +.hero-badge { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-2) var(--space-4); + background: var(--color-primary-subtle); + border: 1px solid oklch(from var(--color-primary) l c h / 0.15); + border-radius: var(--radius-full); + font-size: var(--text-xs); + font-weight: 600; + color: var(--color-primary); + margin-bottom: var(--space-6); +} +.hero-badge svg { color: var(--color-primary); } + +.hero-heading { + font-size: var(--text-3xl); + font-weight: 400; + line-height: 1.08; + letter-spacing: -0.02em; + margin-bottom: var(--space-6); + color: var(--color-text); +} +.hero-heading em { + font-style: italic; + color: var(--color-primary); +} + +.hero-sub { + font-size: var(--text-lg); + color: var(--color-text-muted); + line-height: 1.6; + margin-bottom: var(--space-8); + max-width: 56ch; +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: var(--space-3); + margin-bottom: var(--space-10); +} + +.hero-trust { + display: flex; + flex-wrap: wrap; + gap: var(--space-6); +} +.trust-item { + display: flex; + align-items: center; + gap: var(--space-2); + font-size: var(--text-sm); + font-weight: 500; + color: var(--color-text-muted); +} +.trust-item svg { color: var(--color-primary); } + +/* Hero tile grid — abstract colorful mosaic */ +.hero-visual { + position: relative; + z-index: 1; + margin-top: var(--space-10); +} + +.hero-tile-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-3); + max-width: 480px; + margin-inline: auto; +} + +.tile { + aspect-ratio: 1; + border-radius: var(--radius-lg); + transition: transform var(--transition-smooth); +} +.tile:hover { transform: scale(1.05); } + +.tile-1 { border-radius: var(--radius-lg) var(--radius-sm) var(--radius-lg) var(--radius-sm); } +.tile-2 { border-radius: var(--radius-sm) var(--radius-lg) var(--radius-sm) var(--radius-lg); } +.tile-3 { border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-sm); } +.tile-4 { border-radius: var(--radius-sm) var(--radius-sm) var(--radius-lg) var(--radius-lg); } +.tile-5 { border-radius: var(--radius-lg) var(--radius-sm) var(--radius-sm) var(--radius-lg); } +.tile-6 { border-radius: var(--radius-sm) var(--radius-lg) var(--radius-lg) var(--radius-sm); } +.tile-7 { border-radius: var(--radius-sm) var(--radius-lg) var(--radius-sm) var(--radius-lg); } +.tile-8 { border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-sm); } +.tile-9 { border-radius: var(--radius-sm) var(--radius-sm) var(--radius-lg) var(--radius-lg); } + +@media (min-width: 1024px) { + .hero { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-8); + align-items: center; + padding-block: clamp(var(--space-16), 8vw, var(--space-24)); + } + .hero-visual { margin-top: 0; } + .hero-tile-grid { + max-width: 420px; + margin-inline: 0 0; + margin-left: auto; + } +} + +/* --- Social Proof Bar --- */ +.proof-bar { + background: var(--color-surface); + border-top: 1px solid oklch(from var(--color-border) l c h / 0.5); + border-bottom: 1px solid oklch(from var(--color-border) l c h / 0.5); + padding-block: var(--space-6); +} + +.proof-inner { + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-4); + flex-wrap: wrap; +} + +.proof-stat { + text-align: center; +} +.proof-stat strong { + display: block; + font-family: var(--font-display); + font-size: var(--text-xl); + font-weight: 400; + color: var(--color-primary); + line-height: 1.2; +} +.proof-stat span { + font-size: var(--text-xs); + color: var(--color-text-muted); + font-weight: 500; +} + +.proof-divider { + width: 1px; + height: 40px; + background: var(--color-divider); +} + +@media (max-width: 639px) { + .proof-divider { display: none; } + .proof-inner { gap: var(--space-6); } +} + +/* --- Section Headers --- */ +.section-header { + text-align: center; + max-width: 600px; + margin-inline: auto; + margin-bottom: var(--space-12); +} + +.section-label { + display: inline-block; + font-family: var(--font-body); + font-size: var(--text-xs); + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.12em; + color: var(--color-primary); + margin-bottom: var(--space-3); +} + +.section-title { + font-size: var(--text-2xl); + font-weight: 400; + margin-bottom: var(--space-4); + letter-spacing: -0.01em; +} + +.section-desc { + color: var(--color-text-muted); + font-size: var(--text-base); + margin-inline: auto; +} + +/* --- Why Section --- */ +.why-section { + background: var(--color-bg); +} + +.why-grid { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-5); +} + +.why-card { + background: var(--color-surface); + border: 1px solid oklch(from var(--color-border) l c h / 0.5); + border-radius: var(--radius-xl); + padding: var(--space-8); + transition: box-shadow var(--transition-smooth), transform var(--transition-smooth); +} +.why-card:hover { + box-shadow: var(--shadow-md); + transform: translateY(-2px); +} + +.why-card-featured { + background: var(--color-primary-highlight); + border-color: oklch(from var(--color-primary) l c h / 0.2); +} + +.why-card-icon { + display: flex; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; + border-radius: var(--radius-md); + background: var(--color-primary-subtle); + color: var(--color-primary); + margin-bottom: var(--space-5); +} +.why-card-icon svg { width: 24px; height: 24px; } + +.why-card h3 { + font-size: var(--text-lg); + font-weight: 600; + font-family: var(--font-body); + margin-bottom: var(--space-2); +} + +.why-card p { + color: var(--color-text-muted); + font-size: var(--text-sm); + line-height: 1.65; +} + +@media (min-width: 768px) { + .why-grid { + grid-template-columns: 1fr 1fr; + } + .why-card-featured { + grid-column: 1 / -1; + display: grid; + grid-template-columns: auto 1fr; + gap: var(--space-6); + align-items: center; + padding: var(--space-10); + } +} + +/* --- Story Section --- */ +.story-section { + background: var(--color-surface); +} + +.story-grid { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-10); + align-items: center; +} + +.story-img-inner { + border-radius: var(--radius-xl); + overflow: hidden; + background: var(--color-surface-offset); +} + +.story-content .section-label { + text-align: left; + display: inline-block; +} + +.story-content .section-title { + text-align: left; + font-size: var(--text-xl); + margin-bottom: var(--space-4); +} + +.story-lead { + font-family: var(--font-display); + font-size: var(--text-lg); + color: var(--color-text); + margin-bottom: var(--space-6); + line-height: 1.5; +} + +.story-content p { + color: var(--color-text-muted); + margin-bottom: var(--space-4); +} + +.story-signature { + font-family: var(--font-display); + font-size: var(--text-lg); + color: var(--color-primary); + font-style: italic; + margin-top: var(--space-6); + margin-bottom: 0; +} + +@media (min-width: 768px) { + .story-grid { + grid-template-columns: 5fr 7fr; + gap: var(--space-16); + } +} + +/* --- Products Section --- */ +.products-section { + background: var(--color-bg); +} + +.product-tabs { + display: flex; + gap: var(--space-2); + margin-bottom: var(--space-8); + overflow-x: auto; + padding-bottom: var(--space-2); + -webkit-overflow-scrolling: touch; + justify-content: center; +} + +.product-tab { + font-family: var(--font-body); + font-size: var(--text-sm); + font-weight: 600; + padding: var(--space-2) var(--space-5); + border-radius: var(--radius-full); + color: var(--color-text-muted); + border: 1px solid transparent; + white-space: nowrap; +} +.product-tab:hover { + color: var(--color-text); + background: var(--color-surface); +} +.product-tab.active { + background: var(--color-primary); + color: #fff; +} + +.product-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); + gap: var(--space-5); +} + +.product-card { + background: var(--color-surface); + border: 1px solid oklch(from var(--color-border) l c h / 0.5); + border-radius: var(--radius-xl); + overflow: hidden; + transition: box-shadow var(--transition-smooth), transform var(--transition-smooth); +} +.product-card:hover { + box-shadow: var(--shadow-md); + transform: translateY(-3px); +} + +.product-card.hidden { + display: none; +} + +.product-img { + position: relative; + aspect-ratio: 5 / 4; + overflow: hidden; + background: var(--color-surface-offset); +} +.product-img svg { + width: 100%; + height: 100%; +} + +.product-age { + position: absolute; + bottom: var(--space-3); + left: var(--space-3); + background: oklch(from var(--color-bg) l c h / 0.85); + backdrop-filter: blur(8px); + padding: var(--space-1) var(--space-3); + border-radius: var(--radius-full); + font-size: var(--text-xs); + font-weight: 600; + color: var(--color-text); +} + +.product-info { + padding: var(--space-5); +} + +.product-info h3 { + font-family: var(--font-body); + font-size: var(--text-base); + font-weight: 700; + margin-bottom: var(--space-2); + line-height: 1.35; +} + +.product-info p { + font-size: var(--text-sm); + color: var(--color-text-muted); + line-height: 1.6; + margin-bottom: var(--space-4); +} + +.product-footer { + display: flex; + align-items: center; + justify-content: space-between; +} + +.product-price { + font-family: var(--font-display); + font-size: var(--text-xl); + font-weight: 400; + color: var(--color-primary); +} + +.products-cta { + text-align: center; + margin-top: var(--space-10); +} + +/* --- Hub Section --- */ +.hub-section { + background: var(--color-surface); +} + +.hub-grid { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-5); +} + +.hub-card { + padding: var(--space-8); + border-left: 3px solid var(--color-primary); + background: var(--color-bg); + border-radius: 0 var(--radius-lg) var(--radius-lg) 0; + transition: var(--transition-smooth); +} +.hub-card:hover { + box-shadow: var(--shadow-sm); +} + +.hub-card-number { + font-family: var(--font-display); + font-size: var(--text-3xl); + color: var(--color-primary); + opacity: 0.4; + line-height: 1; + margin-bottom: var(--space-3); +} + +.hub-card h3 { + font-family: var(--font-body); + font-size: var(--text-lg); + font-weight: 700; + margin-bottom: var(--space-2); +} + +.hub-card p { + color: var(--color-text-muted); + font-size: var(--text-sm); + line-height: 1.6; +} + +@media (min-width: 768px) { + .hub-grid { + grid-template-columns: repeat(3, 1fr); + } +} + +/* --- Testimonials --- */ +.testimonials-section { + background: var(--color-bg); +} + +.testimonials-grid { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-5); +} + +.testimonial-card { + background: var(--color-surface); + border: 1px solid oklch(from var(--color-border) l c h / 0.5); + border-radius: var(--radius-xl); + padding: var(--space-8); +} + +.testimonial-featured { + background: var(--color-primary-highlight); + border-color: oklch(from var(--color-primary) l c h / 0.15); +} + +.testimonial-stars { + display: flex; + gap: 2px; + margin-bottom: var(--space-4); +} + +.testimonial-card p { + font-size: var(--text-base); + line-height: 1.65; + color: var(--color-text); + margin-bottom: var(--space-5); + font-style: italic; +} + +.testimonial-card footer { + display: flex; + flex-direction: column; + gap: 2px; +} +.testimonial-card footer strong { + font-size: var(--text-sm); + font-weight: 700; + font-family: var(--font-body); +} +.testimonial-card footer span { + font-size: var(--text-xs); + color: var(--color-text-muted); +} + +@media (min-width: 768px) { + .testimonials-grid { + grid-template-columns: 1fr 1fr; + } + .testimonial-featured { + grid-column: 1 / -1; + display: grid; + grid-template-columns: 1fr auto; + gap: var(--space-8); + align-items: center; + } +} + +/* --- FAQ --- */ +.faq-section { + background: var(--color-surface); +} + +.faq-list { + max-width: 720px; + margin-inline: auto; +} + +.faq-item { + border-bottom: 1px solid oklch(from var(--color-border) l c h / 0.5); +} + +.faq-item:first-child { + border-top: 1px solid oklch(from var(--color-border) l c h / 0.5); +} + +.faq-item summary { + font-family: var(--font-body); + font-size: var(--text-base); + font-weight: 600; + padding: var(--space-5) 0; + cursor: pointer; + list-style: none; + display: flex; + justify-content: space-between; + align-items: center; + gap: var(--space-4); + color: var(--color-text); +} +.faq-item summary::after { + content: '+'; + font-size: var(--text-xl); + font-weight: 300; + color: var(--color-text-faint); + flex-shrink: 0; + transition: transform var(--transition-interactive); +} +.faq-item[open] summary::after { + content: '−'; +} +.faq-item summary::-webkit-details-marker { display: none; } + +.faq-item p { + padding-bottom: var(--space-5); + color: var(--color-text-muted); + font-size: var(--text-sm); + line-height: 1.65; +} + +/* --- CTA Section --- */ +.cta-section { + background: var(--color-bg); +} + +.cta-inner { + text-align: center; + max-width: 640px; +} + +.cta-content h2 { + font-size: var(--text-2xl); + margin-bottom: var(--space-4); +} + +.cta-content p { + color: var(--color-text-muted); + margin-inline: auto; + margin-bottom: var(--space-8); +} + +.cta-actions { + display: flex; + flex-wrap: wrap; + gap: var(--space-3); + justify-content: center; +} + +/* --- Footer --- */ +.footer { + background: var(--color-surface); + border-top: 1px solid oklch(from var(--color-border) l c h / 0.5); + padding-block: var(--space-12) var(--space-6); +} + +.footer-inner { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-10); + margin-bottom: var(--space-10); +} + +.footer-brand p { + font-size: var(--text-sm); + color: var(--color-text-muted); + margin-top: var(--space-4); +} + +.footer-links { + display: flex; + gap: var(--space-12); + flex-wrap: wrap; +} + +.footer-col h4 { + font-family: var(--font-body); + font-size: var(--text-xs); + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--color-text-faint); + margin-bottom: var(--space-4); +} + +.footer-col a { + display: block; + font-size: var(--text-sm); + color: var(--color-text-muted); + text-decoration: none; + padding: var(--space-1) 0; +} +.footer-col a:hover { + color: var(--color-text); +} + +.footer-bottom { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: var(--space-6); + border-top: 1px solid oklch(from var(--color-border) l c h / 0.5); + font-size: var(--text-xs); + color: var(--color-text-faint); +} + +@media (min-width: 768px) { + .footer-inner { + grid-template-columns: 2fr 3fr; + align-items: start; + } +} + +/* --- Vendor / Government Section --- */ +.vendor-section { + background: var(--color-surface); +} + +/* UEN Quick Reference Bar */ +.vendor-uen-bar { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-4); + padding: var(--space-6) var(--space-8); + background: var(--color-surface-offset); + border: 1px solid oklch(from var(--color-border) l c h / 0.5); + border-radius: var(--radius-xl); + margin-bottom: var(--space-10); + text-align: center; +} + +.uen-item { + display: flex; + flex-direction: column; + gap: var(--space-1); +} + +.uen-label { + font-size: var(--text-xs); + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--color-text-faint); +} + +.uen-value { + font-family: var(--font-body); + font-size: var(--text-lg); + font-weight: 700; + color: var(--color-text); + letter-spacing: 0.02em; +} + +.uen-divider { + display: none; +} + +@media (min-width: 640px) { + .vendor-uen-bar { + grid-template-columns: 1fr auto 1fr auto 1fr; + text-align: center; + align-items: center; + } + .uen-item { + flex-direction: column; + } + .uen-divider { + display: block; + width: 1px; + height: 40px; + background: var(--color-divider); + } +} + +/* Trust Strip */ +.vendor-trust-strip { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-4); + padding-block: var(--space-8); + margin-bottom: var(--space-4); +} + +.vendor-trust-label { + font-size: var(--text-xs); + font-weight: 600; + color: var(--color-text-faint); + text-transform: uppercase; + letter-spacing: 0.1em; +} + +.vendor-trust-logos { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: var(--space-3); +} + +.trust-logo { + display: inline-flex; + align-items: center; + padding: var(--space-2) var(--space-4); + background: var(--color-surface); + border: 1px solid oklch(from var(--color-border) l c h / 0.5); + border-radius: var(--radius-full); + font-size: var(--text-xs); + font-weight: 600; + color: var(--color-text-muted); +} + +.vendor-credentials { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-5); + margin-bottom: var(--space-16); +} + +.vendor-cred-card { + background: var(--color-bg); + border: 1px solid oklch(from var(--color-border) l c h / 0.5); + border-radius: var(--radius-xl); + padding: var(--space-8); + transition: box-shadow var(--transition-smooth), transform var(--transition-smooth); +} +.vendor-cred-card:hover { + box-shadow: var(--shadow-md); + transform: translateY(-2px); +} + +.vendor-cred-card--primary { + background: var(--color-primary-highlight); + border-color: oklch(from var(--color-primary) l c h / 0.2); +} + +.vendor-cred-icon { + margin-bottom: var(--space-5); +} + +.vendor-cred-card h3 { + font-family: var(--font-body); + font-size: var(--text-lg); + font-weight: 700; + margin-bottom: var(--space-2); +} + +.vendor-cred-card p { + color: var(--color-text-muted); + font-size: var(--text-sm); + line-height: 1.65; +} + +@media (min-width: 768px) { + .vendor-credentials { + grid-template-columns: repeat(3, 1fr); + } + .vendor-cred-card--primary { + grid-column: 1 / -1; + display: grid; + grid-template-columns: auto 1fr; + gap: var(--space-6); + align-items: center; + padding: var(--space-10); + } +} + +/* Vendor Process Steps */ +.vendor-process { + background: var(--color-bg); + border: 1px solid oklch(from var(--color-border) l c h / 0.5); + border-radius: var(--radius-xl); + padding: var(--space-10); +} + +.vendor-process-title { + font-family: var(--font-body); + font-size: var(--text-lg); + font-weight: 700; + text-align: center; + margin-bottom: var(--space-10); + color: var(--color-text); +} + +.vendor-process-grid { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-8); +} + +.vendor-step { + display: flex; + gap: var(--space-5); + align-items: flex-start; +} + +.vendor-step-num { + flex-shrink: 0; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + border-radius: var(--radius-full); + background: var(--color-primary); + color: #fff; + font-weight: 700; + font-size: var(--text-sm); +} + +.vendor-step h4 { + font-family: var(--font-body); + font-size: var(--text-base); + font-weight: 700; + margin-bottom: var(--space-1); +} + +.vendor-step p { + color: var(--color-text-muted); + font-size: var(--text-sm); + line-height: 1.6; +} + +@media (min-width: 768px) { + .vendor-process-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (min-width: 1024px) { + .vendor-process-grid { + grid-template-columns: repeat(4, 1fr); + position: relative; + } + /* Connector arrows between steps */ + .vendor-step { + flex-direction: column; + text-align: center; + align-items: center; + position: relative; + } + .vendor-step:not(:last-child)::after { + content: ''; + position: absolute; + top: 20px; + right: -12%; + width: 24%; + height: 2px; + background: repeating-linear-gradient( + 90deg, + var(--color-border) 0px, + var(--color-border) 6px, + transparent 6px, + transparent 10px + ); + } +} + +.vendor-cta { + text-align: center; + margin-top: var(--space-10); + padding-top: var(--space-8); + border-top: 1px solid oklch(from var(--color-border) l c h / 0.5); +} + +.vendor-cta-note { + display: block; + margin-top: var(--space-3); + font-size: var(--text-xs); + color: var(--color-text-faint); +} + +/* --- Nav accent for "For Schools" --- */ +.nav-link--accent { + color: var(--color-accent-active); + font-weight: 700; +} +.nav-link--accent:hover { + color: var(--color-accent-hover); + background: var(--color-accent-highlight); +} + +/* --- Floating Mobile CTA --- */ +.floating-cta { + position: fixed; + bottom: 0; + left: 0; + right: 0; + z-index: 90; + padding: var(--space-3) var(--space-4); + padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); + background: oklch(from var(--color-surface) l c h / 0.95); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-top: 1px solid oklch(from var(--color-border) l c h / 0.5); + display: flex; + justify-content: center; + transform: translateY(100%); + transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); +} + +.floating-cta.visible { + transform: translateY(0); +} + +.floating-cta-btn { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-3) var(--space-8); + background: var(--color-primary); + color: #fff; + font-family: var(--font-body); + font-size: var(--text-sm); + font-weight: 700; + border-radius: var(--radius-full); + text-decoration: none; + box-shadow: 0 4px 16px oklch(from var(--color-primary) l c h / 0.35); + transition: transform var(--transition-interactive), box-shadow var(--transition-interactive); +} +.floating-cta-btn:hover { + transform: translateY(-1px); + box-shadow: 0 6px 24px oklch(from var(--color-primary) l c h / 0.45); +} + +@media (min-width: 768px) { + .floating-cta { + display: none; + } +} + +/* --- Mobile Nav --- */ +.schemes-section { + background: var(--color-bg); +} + +.schemes-grid { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-5); +} + +.scheme-card { + background: var(--color-surface); + border: 1px solid oklch(from var(--color-border) l c h / 0.5); + border-radius: var(--radius-xl); + padding: var(--space-8); + transition: box-shadow var(--transition-smooth), transform var(--transition-smooth); +} +.scheme-card:hover { + box-shadow: var(--shadow-md); + transform: translateY(-2px); +} + +.scheme-badge { + display: inline-block; + font-family: var(--font-body); + font-size: var(--text-xs); + font-weight: 800; + text-transform: uppercase; + letter-spacing: 0.1em; + padding: var(--space-1) var(--space-3); + border-radius: var(--radius-sm); + background: var(--color-primary-highlight); + color: var(--color-primary); + margin-bottom: var(--space-4); +} + +.scheme-badge--ecda { + background: var(--color-accent-highlight); + color: var(--color-accent-active); +} + +.scheme-card h3 { + font-family: var(--font-body); + font-size: var(--text-lg); + font-weight: 700; + margin-bottom: var(--space-2); +} + +.scheme-card p { + color: var(--color-text-muted); + font-size: var(--text-sm); + line-height: 1.65; + margin-bottom: var(--space-4); +} + +.scheme-audience { + display: inline-block; + font-size: var(--text-xs); + font-weight: 600; + color: var(--color-text-faint); + background: var(--color-surface-offset); + padding: var(--space-1) var(--space-3); + border-radius: var(--radius-full); +} + +@media (min-width: 768px) { + .schemes-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.schemes-note { + text-align: center; + color: var(--color-text-muted); + font-size: var(--text-sm); + margin-top: var(--space-10); + max-width: 56ch; + margin-inline: auto; +} + +.schemes-note a { + color: var(--color-primary); + text-decoration: underline; + text-underline-offset: 2px; +} +.schemes-note a:hover { + color: var(--color-primary-hover); +} + +/* --- Dual CTA --- */ +.cta-dual { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-5); +} + +.cta-card { + background: var(--color-surface); + border: 1px solid oklch(from var(--color-border) l c h / 0.5); + border-radius: var(--radius-xl); + padding: var(--space-10); + text-align: center; +} + +.cta-card--school { + background: var(--color-primary-highlight); + border-color: oklch(from var(--color-primary) l c h / 0.2); +} + +.cta-card-label { + display: inline-block; + font-size: var(--text-xs); + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--color-primary); + margin-bottom: var(--space-3); +} + +.cta-card h2 { + font-size: var(--text-xl); + font-weight: 400; + margin-bottom: var(--space-3); +} + +.cta-card p { + color: var(--color-text-muted); + font-size: var(--text-sm); + margin-inline: auto; + margin-bottom: var(--space-6); +} + +@media (min-width: 768px) { + .cta-dual { + grid-template-columns: 1fr 1fr; + } +} + +/* --- Products CTA with divider --- */ +.products-cta { + text-align: center; + margin-top: var(--space-10); + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-4); + flex-wrap: wrap; +} + +.products-cta-divider { + font-size: var(--text-sm); + color: var(--color-text-faint); + font-weight: 500; +} + +/* --- FAQ first item open by default --- */ +.faq-item--open[open] summary { + color: var(--color-primary); +} + +/* --- Mobile Nav --- */ +@media (max-width: 767px) { + .nav { + display: none; + position: absolute; + top: 4rem; + left: 0; + right: 0; + background: var(--color-surface); + border-bottom: 1px solid var(--color-border); + padding: var(--space-4) var(--space-5); + flex-direction: column; + box-shadow: var(--shadow-lg); + } + .nav.open { + display: flex; + } + .nav-link { + padding: var(--space-3) var(--space-4); + font-size: var(--text-base); + } +} + +/* --- Utility --- */ +[hidden] { display: none !important; }