:root { /* Base palette */ --color-obsidian: #1a1a18; --color-charcoal: #2a2a26; --color-terracotta: #B26858; --color-sage: #748F70; --color-parchment: #e8e4de; --color-bone: #f5f2ec; /* Semantic colors — light mode */ --color-primary: var(--color-terracotta); --color-primary-foreground: #ffffff; --color-primary-hover: #9a5649; --color-secondary: var(--color-sage); --color-secondary-foreground: #ffffff; --color-accent: var(--color-sage); --color-accent-foreground: #ffffff; --color-background: var(--color-bone); --color-foreground: var(--color-obsidian); --color-muted: var(--color-parchment); --color-muted-foreground: #6b6760; --color-border: #d9d4cb; --color-destructive: #b84a3e; --color-destructive-foreground: var(--color-bone); --color-success: var(--color-sage); --color-success-foreground: var(--color-bone); --color-warning: #b88a3a; --color-warning-foreground: var(--color-obsidian); --color-card: #ffffff; --color-card-foreground: var(--color-obsidian); --color-sidebar: #ffffff; --color-sidebar-foreground: var(--color-obsidian); --color-footer: #3f3e3e; --color-footer-foreground: #ffffff; /* Typography */ --font-sans: "Hero", system-ui, -apple-system, sans-serif; --font-heading: "Dream Avenue", "Hero", Georgia, serif; /* Spacing & Radius */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); } /* Dark mode — applied when has the `dark` class */ .dark { --color-primary: #c47a6a; --color-primary-foreground: var(--color-obsidian); --color-primary-hover: #d08b7c; --color-secondary: #8aa586; --color-secondary-foreground: var(--color-obsidian); --color-accent: #8aa586; --color-accent-foreground: var(--color-obsidian); --color-background: var(--color-obsidian); --color-foreground: var(--color-bone); --color-muted: var(--color-charcoal); --color-muted-foreground: #9a9388; --color-border: #3a3a35; --color-destructive: #e06b5c; --color-destructive-foreground: var(--color-obsidian); --color-success: #8aa586; --color-success-foreground: var(--color-obsidian); --color-warning: #d4a864; --color-warning-foreground: var(--color-obsidian); --color-card: var(--color-charcoal); --color-card-foreground: var(--color-bone); --color-sidebar: var(--color-obsidian); --color-sidebar-foreground: var(--color-bone); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -4px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5); } @font-face { font-family: "Hero"; src: url(/assets/Hero-Light-a9a4adfe60074220339d5c075cbee09b5c003cfc654e5c4a11bbbd2628ad3fed.woff2) format("woff2"), url(/assets/Hero-Light-c1931a01a3e63ae944b23ffbe451b83f73370d9884372217f64d858582e5ccca.woff) format("woff"), url(/assets/Hero-Light-8c525b8a722b93aca4653675db3647e86dea2b871b2af8bd469f5517e6ba22de.ttf) format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Hero"; src: url(/assets/Hero-Regular-a6a828c59040e034d1bea87cd4dbb38690275e798c4cd9773f180cc0b155f98d.woff2) format("woff2"), url(/assets/Hero-Regular-4c04ea71191ce95cba278b1328c4a92b9ab5c5b5b696676f4ddcdbd8fdf2ddd5.woff) format("woff"), url(/assets/Hero-Regular-ded200bf7113218400e7e2f942ec64fc4da9fbe66a3241dae2c61cd7bafa055b.ttf) format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Hero"; src: url(/assets/Hero-Bold-21a2b04c58c95d9a46475778fcfe980fd372ee779c4fbced6046f69be6355d23.woff2) format("woff2"), url(/assets/Hero-Bold-9e44bb2b1528ee6d40459507c0878fa2070c5d259f1048d7164f121390c88395.woff) format("woff"), url(/assets/Hero-Bold-ae0b1dd9c01896d95d1228343906458f81da325bf7a3825e88e16a664e021ec0.ttf) format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Dream Avenue"; src: url(/assets/Dream-Avenue-52ab14efc034d138cc11ed5ca9586d3063a837115c83bea041a2a0d8d0c9d834.ttf) format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } /* * Sprockets manifest for the admin / teacher dashboards. * * The public (customer-facing) site has its own bundle at app/assets/builds/public.css, * compiled by dartsass-rails from app/assets/stylesheets/public.scss. We avoid * require_tree here so the legacy SCSS partials under public/ aren't pulled in. * */ /* Smooth color transitions when toggling dark mode */ html { color-scheme: light; } html.dark { color-scheme: dark; } /* Typography: Dream Avenue for H1 only, Hero everywhere else. */ body { font-family: var(--font-sans); font-weight: 400; } h1 { font-family: var(--font-heading); font-weight: 400; letter-spacing: 0.01em; } h2, h3, h4, h5, h6 { font-family: var(--font-sans); } /* * Dark-mode compatibility layer for Tailwind utility classes that don't yet * use theme variables. Always-dark surfaces (e.g. the site footer) are scoped * out via :not([data-theme-static]). */ .dark .bg-white:not([data-theme-static]) { background-color: var(--color-card); } .dark .bg-white\/80:not([data-theme-static]) { background-color: color-mix(in srgb, var(--color-card) 80%, transparent); } .dark .bg-gray-50:not([data-theme-static]), .dark .bg-slate-50:not([data-theme-static]) { background-color: var(--color-muted); } .dark .bg-gray-100:not([data-theme-static]), .dark .bg-slate-100:not([data-theme-static]) { background-color: var(--color-muted); } .dark .text-gray-900:not([data-theme-static]), .dark .text-slate-900:not([data-theme-static]) { color: var(--color-foreground); } .dark .text-gray-800:not([data-theme-static]), .dark .text-slate-800:not([data-theme-static]) { color: var(--color-foreground); } .dark .text-gray-700:not([data-theme-static]), .dark .text-slate-700:not([data-theme-static]) { color: var(--color-foreground); } .dark .text-gray-600:not([data-theme-static]), .dark .text-slate-600:not([data-theme-static]) { color: var(--color-muted-foreground); } .dark .text-gray-500:not([data-theme-static]), .dark .text-slate-500:not([data-theme-static]) { color: var(--color-muted-foreground); } .dark .text-gray-400:not([data-theme-static]), .dark .text-slate-400:not([data-theme-static]) { color: var(--color-muted-foreground); } .dark .border-gray-200:not([data-theme-static]), .dark .border-slate-200:not([data-theme-static]) { border-color: var(--color-border); } .dark .border-gray-300:not([data-theme-static]), .dark .border-slate-300:not([data-theme-static]) { border-color: var(--color-border); } /* * Admin sidebar — fixed full-viewport column. * Off-canvas on mobile, permanently visible on desktop (≥1024px). * Toggled on mobile via the `open` state class from the mobile-menu controller. * On desktop we force `display: flex` so the controller's `hidden` toggling * (used for the public navbar mobile menu) can't take the sidebar down. */ .admin-sidebar { position: fixed; top: 0; bottom: 0; left: 0; height: 100vh; transform: translateX(-100%); transition: transform 200ms ease-out; } .admin-sidebar.open { transform: translateX(0); } @media (min-width: 1024px) { .admin-sidebar { display: flex !important; width: 16rem; max-width: none; transform: translateX(0); transition: none; } } /* Admin sidebar — always rendered in the primary brand color; keep it consistent across light/dark themes via the inline utility classes. */ /* Calendar view toggle buttons */ .active-view { background-color: var(--color-primary); color: var(--color-primary-foreground); } .active-view:hover { opacity: 0.9; } .inactive-view { border: 1px solid var(--color-border); background-color: transparent; color: var(--color-foreground); } .inactive-view:hover { background-color: var(--color-secondary); } /* Calendar view toggle — variant rendered on top of a primary-color surface (the public /classes controls). */ .calendar-view-btn--active { background-color: #ffffff; color: var(--color-primary); } .calendar-view-btn--active:hover { opacity: 0.95; } .calendar-view-btn--inactive { border: 1px solid rgba(255, 255, 255, 0.3); background-color: transparent; color: #ffffff; } .calendar-view-btn--inactive:hover { background-color: rgba(255, 255, 255, 0.1); } /* Auth cards (login / signup) — client-spec surface on light mode, swapped for the themed card surface in dark mode so text stays readable. */ .auth-card { background: #f1f1f1; padding: 3rem; max-width: 33rem; width: 100%; } .dark .auth-card { background: var(--color-card); color: var(--color-foreground); } /* Light/dark logo swap — show the dark-fill mark on light surfaces and the white mark on dark surfaces. */ .logo-dark { display: none; } .dark .logo-light { display: none; } .dark .logo-dark { display: inline-block; } /* Pagy pagination */ .pagy.series-nav { display: flex; align-items: center; gap: 0.25rem; } .pagy.series-nav > a { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 0.5rem; font-size: 0.875rem; font-weight: 500; border-radius: var(--radius-md, 0.5rem); color: var(--color-foreground); text-decoration: none; transition: background-color 0.15s, color 0.15s; } .pagy.series-nav > a:hover:not([aria-disabled="true"]) { background-color: var(--color-muted); } .pagy.series-nav > a[aria-current="page"] { background-color: var(--color-primary); color: var(--color-primary-foreground); } .pagy.series-nav > a[aria-disabled="true"]:not([aria-current="page"]) { color: var(--color-muted-foreground); cursor: default; opacity: 0.5; } .pagy.series-nav > a[role="separator"] { opacity: 1; letter-spacing: 0.1em; } .pagy.series-nav > a[aria-label="Previous"], .pagy.series-nav > a[aria-label="Next"] { font-size: 0; overflow: hidden; } .pagy.series-nav > a[aria-label="Previous"]::before, .pagy.series-nav > a[aria-label="Next"]::before { content: ""; display: block; width: 1rem; height: 1rem; background-color: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .pagy.series-nav > a[aria-label="Previous"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 19l-7-7 7-7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 19l-7-7 7-7'/%3E%3C/svg%3E"); } .pagy.series-nav > a[aria-label="Next"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); }