/* ============================================================================ iSchedulo - "Candy" theme ---------------------------------------------------------------------------- A playful neo-brutalist skin: Fredoka font, warm cream background, thick ink borders with hard offset shadows, rounded corners, pill buttons, and a pastel candy palette (pink / blue / yellow / orange). Strategy: the app's markup (and a lot of JS-generated HTML) uses Tailwind utility classes. Rather than rewrite hundreds of class strings, this file RE-MAPS the common utility patterns (borders, shadows, radii, the fuchsia/amber/slate colors) to candy equivalents. That instantly themes the whole app - including dynamically rendered queue cards, chips, and modals - from one stylesheet. Bespoke pieces (the landing hero blobs) are added in the page markup. `!important` is used so these rules beat Tailwind's runtime CDN utilities regardless of inject order. ========================================================================== */ :root { /* Candy accents stay constant across light/dark (they pop on both). */ --candy-pink: #ff5fa2; --candy-pink-soft: #ffe3f0; --candy-blue: #2aa7ff; --candy-yellow: #ffd84d; --candy-orange: #ff9d2e; /* -------------------------------------------------------------------------- * Light (default) palette. * --ink doubles as the foreground text AND the border colour (they're the * same value in both themes). --shadow is split out because the dark theme * uses a soft purple drop-shadow instead of a harsh light one. --solid is the * "primary" (slate-900) button surface, with --on-solid its text colour; this * lets dark mode flip primary buttons to a light pill with dark text. Yellow * buttons always use dark text (--on-yellow) for contrast. * ------------------------------------------------------------------------ */ --ink: #231a2e; /* text + borders */ --shadow: #231a2e; /* hard offset drop-shadow */ --muted: #7b7286; --body: #5b5266; --cream: #fff5ec; /* page background */ --card: #ffffff; /* cards / white surfaces */ --surface2: #fffaf3; /* inputs, slate-50/100 */ --chip: #ffffff; --solid: #231a2e; /* primary button background */ --solid-hover: #382b48; --on-solid: #ffffff; /* text on a primary button */ --on-yellow: #231a2e; /* text on a yellow button/badge */ --dis-bg: #e4dee9; /* disabled button background */ --dis-ink: #a79fb2; /* disabled button text */ } /* --------------------------------------------------------------------------- * Dark palette - applied when (or ) carries the `dark` class. * Mirrors the reference redesign: light "ink" text/borders, deep plum * surfaces, a muted-purple drop-shadow, and INVERTED primary buttons (light * pill + dark text). Candy accents are untouched. * ------------------------------------------------------------------------- */ html.dark, body.dark { --ink: #fdf4ec; --shadow: #5a4a68; --muted: #9a8fa8; --body: #c5bcd2; --cream: #161019; --card: #251c33; --surface2: #1c1525; --chip: #2e2440; --solid: #fdf4ec; --solid-hover: #ece1d6; --on-solid: #231a2e; --on-yellow: #231a2e; --dis-bg: #2a2236; --dis-ink: #6f6680; } /* ---- Base ---------------------------------------------------------------- */ body { background: var(--cream) !important; color: var(--ink); font-family: "Fredoka", ui-sans-serif, system-ui, -apple-system, sans-serif !important; -webkit-font-smoothing: antialiased; } /* Headings a touch chunkier to match Fredoka's rounded personality. */ h1, h2, h3 { letter-spacing: -0.01em; } ::selection { background: var(--candy-yellow); color: var(--on-yellow); } /* ---- Radii (rounder everywhere) ----------------------------------------- */ .rounded-lg { border-radius: 12px !important; } .rounded-xl { border-radius: 16px !important; } .rounded-2xl { border-radius: 22px !important; } .rounded-full { border-radius: 999px !important; } /* ---- Borders -> ink, thicker -------------------------------------------- */ /* The all-sides `.border` utility gets a full 2px ink frame (cards, inputs, pills). We DON'T force a width on the slate *colour* utilities below: doing so turned one-sided dividers like `border-t border-slate-100` into full rectangles (preflight sets border-style:solid on every side, so forcing width on all sides drew all four). Now directional dividers stay one-sided, and full frames still come from `.border` / `.border-2`. */ .border { border-color: var(--ink) !important; border-width: 2px !important; } .border-slate-100, .border-slate-200, .border-slate-300 { border-color: var(--ink) !important; } .border-2 { border-width: 2.5px !important; } /* ---- Shadows -> hard offset --------------------------------------------- */ .shadow-sm, .shadow, .shadow-md { box-shadow: 4px 4px 0 var(--shadow) !important; } .shadow-lg, .shadow-xl { box-shadow: 6px 6px 0 var(--shadow) !important; } .shadow-inner { box-shadow: inset 2px 2px 0 rgba(35, 26, 46, 0.08) !important; } html.dark .shadow-inner { box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.05) !important; } /* ---- Surfaces ----------------------------------------------------------- */ .bg-white { background-color: var(--card) !important; } .bg-slate-50, .bg-slate-100 { background-color: var(--surface2) !important; } .bg-slate-200 { background-color: #efe7f0 !important; } html.dark .bg-slate-200 { background-color: #352a47 !important; } /* ---- Candy color re-mapping of the app's accent utilities ---------------- */ /* Dark/primary -> solid (ink in light mode; a light pill in dark mode). The `html.dark` rule forces the label colour so text-white buttons stay legible once the surface flips light. */ .bg-slate-900 { background-color: var(--solid) !important; } html.dark .bg-slate-900 { color: var(--on-solid) !important; } .hover\:bg-slate-800:hover { background-color: var(--solid-hover) !important; } .text-slate-900 { color: var(--ink) !important; } /* Pink family (post-now, links, highlights) -> candy pink */ .bg-fuchsia-600, .bg-fuchsia-500 { background-color: var(--candy-pink) !important; } .hover\:bg-fuchsia-500:hover, .hover\:bg-fuchsia-100:hover { background-color: #ff7ab4 !important; } .text-fuchsia-600, .text-fuchsia-700 { color: var(--candy-pink) !important; } .bg-fuchsia-100 { background-color: var(--candy-pink-soft) !important; } .border-fuchsia-300, .border-fuchsia-400, .hover\:border-fuchsia-400:hover { border-color: var(--candy-pink) !important; } .ring-fuchsia-200 { --tw-ring-color: var(--candy-pink) !important; } /* Amber/yellow family (schedule) -> candy yellow */ .bg-amber-500, .bg-amber-400 { background-color: var(--candy-yellow) !important; color: var(--on-yellow) !important; } .hover\:bg-amber-400:hover { background-color: #ffe070 !important; } .text-amber-600 { color: var(--candy-orange) !important; } .bg-amber-100 { background-color: #ffe9c2 !important; } .text-amber-700 { color: var(--candy-orange) !important; } /* Indigo (ultra accent) -> candy blue */ .bg-indigo-100 { background-color: #d6efff !important; } .text-indigo-700 { color: var(--candy-blue) !important; } .border-indigo-300 { border-color: var(--candy-blue) !important; } /* Gradients -> solid candy pink (logos + CTAs); hero handles its own colors. */ .bg-gradient-to-r, .bg-gradient-to-br { background-image: none !important; background-color: var(--candy-pink) !important; } /* Muted text -> warm greys */ .text-slate-400 { color: var(--muted) !important; } .text-slate-500 { color: var(--muted) !important; } .text-slate-600 { color: var(--body) !important; } .text-slate-700, .text-slate-800 { color: var(--ink) !important; } /* ---- Buttons: give the colored action buttons the candy frame ----------- */ button.bg-slate-900, a.bg-slate-900, button.bg-fuchsia-600, button.bg-fuchsia-500, button.bg-amber-500, button.bg-amber-400, a.bg-gradient-to-r, button.bg-gradient-to-r, .candy-cta { border: 2.5px solid var(--ink) !important; box-shadow: 3px 3px 0 var(--shadow) !important; font-weight: 700 !important; transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.15s ease !important; } button.bg-slate-900:not(:disabled):hover, a.bg-slate-900:hover, button.bg-fuchsia-600:not(:disabled):hover, button.bg-amber-500:not(:disabled):hover, a.bg-gradient-to-r:hover, button.bg-gradient-to-r:not(:disabled):hover, .candy-cta:hover { transform: translate(-1px, -1px) !important; box-shadow: 5px 5px 0 var(--shadow) !important; } /* Disabled action buttons: flat, muted, no shadow. */ button:disabled.bg-slate-900, button:disabled.bg-fuchsia-600, button:disabled.bg-amber-500 { background-color: var(--dis-bg) !important; color: var(--dis-ink) !important; box-shadow: none !important; transform: none !important; opacity: 1 !important; cursor: not-allowed !important; } /* ---- Form controls ------------------------------------------------------ */ input:not([type="checkbox"]):not([type="radio"]), textarea, select { font-family: "Fredoka", sans-serif !important; background-color: var(--surface2) !important; color: var(--ink) !important; border: 2px solid var(--ink) !important; } input:focus, textarea:focus, select:focus { outline: none !important; } input::placeholder, textarea::placeholder { color: var(--muted); } /* ---- Reusable candy components (used by bespoke markup + JS templates) --- */ .candy-card { background: var(--card); border: 2.5px solid var(--ink); box-shadow: 5px 5px 0 var(--shadow); border-radius: 22px; } .candy-chip { display: inline-block; background: var(--chip); border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--shadow); border-radius: 999px; padding: 6px 14px; font-weight: 600; } .candy-badge { display: inline-block; border: 2px solid var(--ink); border-radius: 999px; padding: 2px 10px; font-weight: 600; font-size: 12px; } .candy-blob { position: absolute; border-radius: 50%; z-index: 0; pointer-events: none; } /* Slight playful tilt for landing feature cards. */ .candy-tilt-l { transform: rotate(-1.2deg); } .candy-tilt-r { transform: rotate(1.2deg); } /* Pricing "Most popular" highlight card on the landing/upgrade modal. */ .candy-pop { background: var(--candy-yellow) !important; color: var(--on-yellow) !important; } /* --------------------------------------------------------------------------- * Upload spinner * --------------------------------------------------------------------------- * A self-contained loading spinner shown while photos upload. We define our * OWN keyframes + sizing here (instead of leaning on Tailwind's animate-spin / * border utilities) because the candy theme re-maps border/rounded utilities * with !important, which would otherwise distort a utility-built spinner. */ .candy-spinner { display: inline-block; width: 18px; height: 18px; border: 3px solid rgba(123, 114, 134, 0.25); /* faint ring (works on both themes) */ border-top-color: var(--candy-pink, #db2777); /* spinning accent */ border-radius: 50%; animation: candy-spin 0.7s linear infinite; } @keyframes candy-spin { to { transform: rotate(360deg); } } /* In-button spinner: a white ring sized to sit inline before a button label, used while a submit (Post now / Schedule) is in flight so the colored button shows progress and can't be clicked again. Reuses the candy-spin keyframes. */ .btn-spinner { display: inline-block; width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; border-radius: 50%; animation: candy-spin 0.7s linear infinite; vertical-align: -2px; margin-right: 8px; }