/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #000f0b #2e2a20 #b3ff00 #ffbf00 #006e4d #7f05bd #ffffff * * Every value below is either one of those five or derived from them, and each * one is contrast-corrected against this palette's own background. Consume * them with var(--token); never write a colour value in app code. */ :root { --canvas: #b3ff00; --surface: #ffbf00; --surface-2: #aaf301; --border: #9add02; --border-strong: #7db703; --ink: #2e2a20; --muted: #475b0e; --accent: #006e4d; --accent-hover: #005e41; --accent-ink: #ffffff; --accent-text: #7f05bd; --accent-strong: #006547; --accent-soft: #9aeb0b; --accent-border: #62be23; --success: #15803d; --success-ink: #ffffff; --success-soft: #a0f007; --success-strong: #116d34; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #b3ea01; --warning-strong: #994607; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #b4e403; --danger-strong: #aa1a1a;} /* The same palette on a dark page — written here, never by the app. It applies while carries data-theme="dark", which the platform's own toggle sets and remembers; an app that never renders that toggle is exactly as it was. Do not repoint any of these from app code: a token that references another token here is a cycle, and CSS makes every property in a cycle invalid. */ html[data-theme="dark"] { --canvas: #000f0b; --surface: #1a2723; --surface-2: #0d1b17; --border: #24312d; --border-strong: #4d5754; --ink: #b3ff00; --muted: #6b9f04; --accent: #006e4d; --accent-hover: #268468; --accent-ink: #ffffff; --accent-text: #388f74; --accent-strong: #48987f; --accent-soft: #00241a; --accent-border: #003a29; --success: #15803d; --success-ink: #ffffff; --success-soft: #052816; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #281e0b; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #29120f; --danger-strong: #d16969; } /* ==================================================================== * app.css — THIS APP'S OWN CSS. Yours to write. Ships empty. * * design.css is a FLOOR, not a ceiling. * * For a long time it was both, and the cost was measurable: an app could * not write a single CSS rule, so every app built here had the same 10px * radius, the same Public Sans at the same 15px, the same 1px borders and * the same soft shadow. Only fourteen COLOUR tokens ever differed. Three * apps in a row came out looking like the same product in three coats of * paint, which is what this file exists to end. * * It loads AFTER design.css and theme.css, so anything here wins. * * ---- THE FIRST LEVER: RETUNE THE SYSTEM --------------------------- * * A :root block here re-tunes every component at once — nothing is * restyled one class at a time. These are the tokens that decide an app's * CHARACTER, and they are the fastest way to make two apps look nothing * alike: * * --radius-sm --radius --radius-lg 0 is brutal, 4 is crisp, 18 is soft * --font-sans --font-mono a display face changes more than colour * --t-xs … --t-5xl the type scale, and how far it ramps * --lh --lh-tight --track-tight density and tone * --s-1 … --s-12 the spacing scale: tight or generous * --shadow --shadow-raised flat, or lifted * --border --border-strong widths hairline, or heavy and drawn * --dur-1 --dur-2 --ease brisk, or languid * --content-max --measure a wide dashboard or a narrow reading page * * COLOUR IS THE ONE EXCEPTION, and it is not a technicality: the owner * picked the palette on the approval card before you built anything, and * it is the only part of the look they chose themselves. theme.css holds * it. Write var(--accent), var(--ink), var(--canvas) — never a hex, an * rgb() or an hsl(), here or anywhere. The validator refuses those. * * ---- THE SECOND LEVER: WRITE WHAT IS NOT THERE --------------------- * * design.css covers the ordinary furniture. It does NOT cover the one * screen that makes this app itself — a timer's dial, a board's columns, * a chart, a seating plan, a game grid. Write those here, in full, and * name them for what they are (.dial, .board-col), never .card-2. * * Compose the primitives where they fit and write your own where they do * not. An app that used only the frozen classes and added nothing shipped * 160 component classes and zero rules of its own — and read as generated, * because the system's ceiling had become the app's ceiling. * * Keep using the tokens in what you write. A rule built on var(--s-4) and * var(--radius) stays consistent with everything around it and follows the * app when its character changes; one built on 16px and 10px does not. * ==================================================================== */ /* Thulasi Wellness — grounded, unhurried: soft radii, quiet shadows, generous space. All colour still comes from theme.css tokens. */ :root { --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 8px 24px color-mix(in srgb, var(--ink) 5%, transparent); --shadow-raised: 0 4px 10px color-mix(in srgb, var(--ink) 8%, transparent), 0 16px 40px color-mix(in srgb, var(--ink) 10%, transparent); --dur-1: 140ms; --dur-2: 220ms; } .brand-mark { font-weight: 700; letter-spacing: 0.02em; } /* ---------- Hero band (Home) ---------- */ .hero-band { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-raised); min-height: 280px; display: flex; align-items: flex-end; } .hero-band .hero-media { position: absolute; inset: 0; } .hero-band .hero-media img { width: 100%; height: 100%; object-fit: cover; } .hero-band .hero-scrim { position: absolute; inset: 0; background: linear-gradient( to top, color-mix(in srgb, var(--ink) 78%, transparent) 0%, color-mix(in srgb, var(--ink) 38%, transparent) 55%, color-mix(in srgb, var(--ink) 8%, transparent) 100% ); } .hero-band .hero-content { position: relative; padding: 2rem; /* The scrim's darkness is mixed from --ink, so the opposite token (--canvas) always contrasts against it in both light and dark mode. */ color: var(--canvas); max-width: 640px; } .hero-band .hero-content .hero-eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--t-xs); opacity: 0.9; } .hero-band .hero-content h1 { margin: 0.4rem 0 0.6rem; font-size: 2.25rem; line-height: 1.1; font-weight: 700; } .hero-band .hero-content p { opacity: 0.95; max-width: 52ch; } /* ---------- Therapy cards ---------- */ .therapy-card { display: flex; flex-direction: column; overflow: hidden; transition: transform var(--dur-2) ease, box-shadow var(--dur-2) ease; } .therapy-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-raised); } .therapy-card .media { aspect-ratio: 16 / 10; } .therapy-card .media img { width: 100%; height: 100%; object-fit: cover; } .therapy-card .therapy-icon-media { aspect-ratio: 16 / 10; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); } /* ---------- Offer strip ---------- */ .offer-card { min-width: 260px; background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: var(--radius); padding: 1.1rem 1.25rem; } .offer-scroll { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 0.25rem; scroll-snap-type: x proximity; } .offer-scroll > * { scroll-snap-align: start; } /* ---------- Booking: day picker & time slots ---------- */ .day-picker { display: flex; gap: 0.6rem; overflow-x: auto; padding-bottom: 0.35rem; } .day-pill { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; padding: 0.6rem 0.9rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer; font-size: var(--t-sm); transition: all var(--dur-1) ease; } .day-pill > * + * { margin-top: 0.15rem; } .day-pill:hover { border-color: var(--accent-border); } .day-pill.is-selected { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .day-pill .day-num { font-weight: 700; font-size: var(--t-lg); } .slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.6rem; } .slot-btn { display: flex; align-items: center; justify-content: center; padding: 0.6rem 0.5rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer; font-size: var(--t-sm); font-variant-numeric: tabular-nums; text-align: center; transition: all var(--dur-1) ease; } .slot-btn:hover { border-color: var(--accent-border); background: var(--accent-soft); } .slot-btn.is-selected, .slot-btn:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; } .slot-btn:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- Wellness cards ---------- */ .wellness-icon { width: 44px; height: 44px; border-radius: var(--radius); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); flex: 0 0 auto; } /* ---------- Confirmation ---------- */ .confirm-check { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--success-soft); color: var(--success-strong); margin: 0 auto; } @media (prefers-reduced-motion: reduce) { .therapy-card, .day-pill, .slot-btn { transition: none; } }