Initial commit: Interactives site
Astro-based site with 40+ interactive math games, puzzles, and explorations. Includes admin dashboard, todo system, blog, theme/subcategory navigation, and embed pages for iframe embedding. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Neeldhara Misra
commit
c5926b4213
265 changed files with 51899 additions and 0 deletions
410
src/styles/global.css
Normal file
410
src/styles/global.css
Normal file
|
|
@ -0,0 +1,410 @@
|
|||
@import "@fontsource/inter/latin.css";
|
||||
@import "@fontsource/castoro/latin.css";
|
||||
@import "@fontsource-variable/geist";
|
||||
|
||||
@import 'tailwindcss';
|
||||
@import 'tw-animate-css';
|
||||
@import 'shadcn/tailwind.css';
|
||||
|
||||
@plugin '@tailwindcss/typography';
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
@custom-variant fhd (@media (min-width: 1920px));
|
||||
@custom-variant uw (@media (min-width: 2250px));
|
||||
|
||||
:root {
|
||||
--radius: 0.625rem;
|
||||
--background: oklch(1 0 0); /* #FFFFFF */
|
||||
--foreground: oklch(0.145 0 0); /* #171717 headings */
|
||||
--card: oklch(1 0 0); /* #FFFFFF */
|
||||
--card-foreground: oklch(0.145 0 0); /* #0D0D12 */
|
||||
--popover: oklch(1 0 0); /* #FFFFFF */
|
||||
--popover-foreground: oklch(0.145 0 0); /* #0D0D12 */
|
||||
/* Brand accent (red/orange); primary fills + icons use this token */
|
||||
--hatch-cta: oklch(0.62 0.26 27);
|
||||
--primary: var(--hatch-cta);
|
||||
--primary-foreground: oklch(1 0 89.88); /* #FFFFFF */
|
||||
--primary-hover: oklch(0.54 0.26 27);
|
||||
--secondary: oklch(0.97 0 0); /* #EDEDED */
|
||||
--secondary-foreground: oklch(0.205 0 0); /* #171717 */
|
||||
--muted: oklch(0.97 0 0); /* #F4F4F5 pill bg */
|
||||
--muted-foreground: oklch(0.556 0 0); /* #5C5C5C subheadings */
|
||||
--accent: oklch(0.97 0 0); /* #F8FAFB */
|
||||
--accent-foreground: oklch(0.205 0 0); /* #171717 */
|
||||
--accent-hover: oklch(0.96 0.006 230);
|
||||
--accent-light: oklch(0.99 0.002 230);
|
||||
--accent-subtle: oklch(0.97 0.004 230);
|
||||
--destructive: oklch(0.577 0.245 27.325); /* #EF4444 */
|
||||
--destructive-foreground: oklch(1 0 89.88); /* #FFFFFF */
|
||||
--border: oklch(0.922 0 0); /* #E4E4E7 */
|
||||
--border-light: oklch(0.956 0.004 248.7);
|
||||
--input: oklch(0.922 0 0); /* #E5E5E5 */
|
||||
--ring: oklch(0.708 0 0); /* #0D0D12 */
|
||||
--chart-1: oklch(0.87 0 0); /* #E65C41 */
|
||||
--chart-2: oklch(0.556 0 0); /* #2A9D8F */
|
||||
--chart-3: oklch(0.439 0 0); /* #264653 */
|
||||
--chart-4: oklch(0.371 0 0); /* #E9C46A */
|
||||
--chart-5: oklch(0.269 0 0); /* #F4A261 */
|
||||
--logo-gray: oklch(0.66 0.027 268.5); /* #818898 */
|
||||
--tagline: oklch(0.57 0.223 275.64); /* #5F57FF */
|
||||
--features-hero-top: oklch(0.9595 0.02 286.02); /* #F0F0FF */
|
||||
--features-hero-top-0: oklch(0.9595 0.02 286.02 / 0); /* #F0F0FF @ 0% */
|
||||
--features-hero-bottom: oklch(0.9782 0.0034 247.86); /* #F6F8FA */
|
||||
--shadow-soft: 0 2px 4px 0 rgba(13, 13, 18, 0.15);
|
||||
--shadow-light: 0 2px 4px 0 rgba(13, 13, 18, 0.04);
|
||||
--success: oklch(0.79 0.12 179.5); /* #40C4AA */
|
||||
--grid-border: var(--border); /* oklch(0.924 0.003 255.9) */
|
||||
--grid-hover: oklch(0.97 0 89.88 / 0.7);
|
||||
--process-bg: oklch(0.23 0 0); /* #1C1C1C */
|
||||
|
||||
--pricing-card-gradient: linear-gradient(
|
||||
180deg,
|
||||
#f9f9f9 45.1%,
|
||||
rgba(249, 249, 249, 0) 103.14%
|
||||
);
|
||||
|
||||
--section-py: 3.5rem;
|
||||
--section-py-sm: 4rem;
|
||||
--section-py-lg: 5rem;
|
||||
|
||||
--hero-py: 4.5rem;
|
||||
--hero-py-sm: 5.5rem;
|
||||
--hero-py-lg: 7rem;
|
||||
|
||||
--section-gap: 4rem;
|
||||
--section-gap-lg: 5.125rem;
|
||||
|
||||
--font-inter: var(--font-imprima), "Imprima", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-display: "Castoro", ui-serif, Georgia, serif;
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--hatch-cta: oklch(0.68 0.25 27);
|
||||
--primary: var(--hatch-cta);
|
||||
/* On red primary fills, use light text */
|
||||
--primary-foreground: oklch(0.98 0.01 260);
|
||||
--primary-hover: oklch(0.6 0.25 27);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--accent-hover: oklch(0.28 0.01 260);
|
||||
--accent-light: oklch(0.32 0.01 260);
|
||||
--accent-subtle: oklch(0.22 0.015 260);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--border-light: oklch(0.34 0.01 260);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--destructive-foreground: oklch(0.98 0.01 260);
|
||||
--success: oklch(0.74 0.12 179.5);
|
||||
--logo-gray: oklch(0.76 0.01 260);
|
||||
--tagline: oklch(0.72 0.16 275);
|
||||
--features-hero-top: oklch(0.24 0.01 260);
|
||||
--features-hero-top-0: oklch(0.24 0.01 260 / 0);
|
||||
--features-hero-bottom: oklch(0.19 0.01 260);
|
||||
--shadow-soft: 0 2px 4px 0 rgba(0, 0, 0, 0.45);
|
||||
--shadow-light: 0 2px 10px -2px rgba(0, 0, 0, 0.5);
|
||||
--grid-border: var(--border-light);
|
||||
--grid-hover: oklch(0.96 0.01 260 / 0.08);
|
||||
|
||||
--process-bg: oklch(0.18 0.01 260);
|
||||
|
||||
--pricing-card-gradient: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.06) 45.1%,
|
||||
rgba(255, 255, 255, 0) 103.14%
|
||||
);
|
||||
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
|
||||
--sidebar-ring: oklch(0.556 0 0);
|
||||
}
|
||||
|
||||
.force-light-vars {
|
||||
/* base tokens (light) */
|
||||
--primary: var(--hatch-cta);
|
||||
--primary-foreground: oklch(1 0 89.88); /* #FFFFFF */
|
||||
--foreground: oklch(0.172 0.006 286.3);
|
||||
--muted-foreground: oklch(0.61 0.03 270); /* #666D80 */
|
||||
--border: oklch(0.924 0.003 255.9);
|
||||
|
||||
/* also pin the *resolved* theme vars many utilities read */
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-border: var(--border);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
/* Astro: @fontsource + --font-inter / --font-display on :root */
|
||||
--font-inter: var(--font-inter);
|
||||
--font-text: var(--font-inter);
|
||||
--font-sans: 'Geist Variable', sans-serif;
|
||||
--font-serif: var(--font-display);
|
||||
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-primary-hover: var(--primary-hover);
|
||||
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-accent-hover: var(--accent-hover);
|
||||
--color-accent-light: var(--accent-light);
|
||||
--color-accent-subtle: var(--accent-subtle);
|
||||
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
|
||||
--color-border: var(--border);
|
||||
--color-border-light: var(--border-light);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
|
||||
--color-logo-gray: var(--logo-gray);
|
||||
|
||||
--color-tagline: var(--tagline);
|
||||
--color-success: var(--success);
|
||||
|
||||
--shadow-soft: var(--shadow-soft);
|
||||
--shadow-light: var(--shadow-light);
|
||||
|
||||
--color-hatch-cta: var(--hatch-cta);
|
||||
|
||||
--color-process-bg: var(--process-bg);
|
||||
|
||||
--radius-sm: calc(var(--radius) * 0.6);
|
||||
--radius-md: calc(var(--radius) * 0.8);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) * 1.4);
|
||||
--radius-2xl: calc(var(--radius) * 1.8);
|
||||
--font-heading: var(--font-sans);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--radius-3xl: calc(var(--radius) * 2.2);
|
||||
--radius-4xl: calc(var(--radius) * 2.6);
|
||||
}
|
||||
|
||||
@utility container {
|
||||
margin-inline: auto;
|
||||
padding-inline: 1.5rem;
|
||||
|
||||
/* on small screens, full-width up to padding */
|
||||
max-width: 100%;
|
||||
|
||||
/* when you hit your “desktop” breakpoint, cap it */
|
||||
@media (min-width: 1200px) {
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Narrower content width (process, dense layouts) — matches Figma “small container” */
|
||||
@utility container-sm {
|
||||
margin-inline: auto;
|
||||
padding-inline: 1.5rem;
|
||||
max-width: 100%;
|
||||
@media (min-width: 1200px) {
|
||||
max-width: 960px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Accessibility: 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;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
/* Smooth scroll only for same-page anchor navigation, not cross-page */
|
||||
html:has(:target) {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply antialiased bg-background text-foreground;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
html {
|
||||
@apply font-sans;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
body {
|
||||
font-family:
|
||||
var(--font-text),
|
||||
ui-sans-serif,
|
||||
system-ui,
|
||||
-apple-system,
|
||||
Segoe UI,
|
||||
Roboto,
|
||||
Helvetica,
|
||||
Arial,
|
||||
'Apple Color Emoji',
|
||||
'Segoe UI Emoji';
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: var(--font-display), serif;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-text), ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
|
||||
.bg-features-hero {
|
||||
/* 180deg = top ➜ bottom */
|
||||
background-image: linear-gradient(
|
||||
180deg,
|
||||
var(--features-hero-top-0) 0%,
|
||||
var(--features-hero-bottom) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.shadow-soft {
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
.shadow-light {
|
||||
box-shadow: var(--shadow-light);
|
||||
}
|
||||
|
||||
.bg-pricing-card {
|
||||
background-image: var(--pricing-card-gradient);
|
||||
}
|
||||
|
||||
.font-display {
|
||||
font-family: var(--font-display), serif;
|
||||
}
|
||||
|
||||
.font-text {
|
||||
font-family:
|
||||
var(--font-text),
|
||||
ui-sans-serif,
|
||||
system-ui,
|
||||
-apple-system,
|
||||
Segoe UI,
|
||||
Roboto,
|
||||
Helvetica,
|
||||
Arial,
|
||||
'Apple Color Emoji',
|
||||
'Segoe UI Emoji';
|
||||
}
|
||||
|
||||
.font-body {
|
||||
font-family:
|
||||
var(--font-text),
|
||||
ui-sans-serif,
|
||||
system-ui,
|
||||
-apple-system,
|
||||
Segoe UI,
|
||||
Roboto,
|
||||
Helvetica,
|
||||
Arial,
|
||||
'Apple Color Emoji',
|
||||
'Segoe UI Emoji';
|
||||
}
|
||||
|
||||
.section-padding {
|
||||
@apply py-14 sm:py-16 lg:py-20;
|
||||
}
|
||||
|
||||
.section-gap {
|
||||
@apply mt-16 lg:mt-[82px];
|
||||
}
|
||||
|
||||
.hero-padding {
|
||||
@apply pt-16 pb-16 sm:pt-20 sm:pb-20 lg:pt-24 lg:pb-24;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
[class*='border'] {
|
||||
@apply border-border;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue