/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #110507 #3a2620 #faf3ec #7a2634 #a13d4c #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: #faf3ec; --surface: #fdfaf6; --surface-2: #eee7e1; --border: #d9d2cc; --border-strong: #b4aca7; --ink: #3a2620; --muted: #726561; --accent: #7a2634; --accent-hover: #68202c; --accent-ink: #ffffff; --accent-text: #a13d4c; --accent-strong: #7a2634; --accent-soft: #e8d6d2; --accent-border: #c09799; --success: #15803d; --success-ink: #ffffff; --success-soft: #dfe5d7; --success-strong: #116d34; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #f2e0d1; --warning-strong: #994607; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #f2d9d3; --danger-strong: #b91c1c;} /* 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: #110507; --surface: #291e20; --surface-2: #1d1213; --border: #32282a; --border-strong: #585051; --ink: #faf3ec; --muted: #9d9490; --accent: #7a2634; --accent-hover: #8e4752; --accent-ink: #ffffff; --accent-text: #a8707a; --accent-strong: #a8707a; --accent-soft: #280c11; --accent-border: #40141b; --success: #15803d; --success-ink: #ffffff; --success-soft: #122013; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #351607; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #360a0c; --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. * ==================================================================== */ /* ---- Retune the system: elegant, cultural, Jaipur pink-city warmth ---- */ :root { --radius-sm: 8px; --radius: 14px; --radius-lg: 24px; --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 12px 32px color-mix(in srgb, var(--ink) 12%, transparent); --content-max: 1180px; } /* ---- Brand ------------------------------------------------------------ */ .brand-mark { font-family: var(--font-sans); letter-spacing: 0; } /* ---- Hero --------------------------------------------------------------- */ .hero-band { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s-9); align-items: center; padding-block: var(--s-6); } @media (max-width: 860px) { .hero-band { grid-template-columns: 1fr; gap: var(--s-6); } .hero-band .hero-media { order: -1; } } .hero-media { border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); aspect-ratio: 4 / 5; } .hero-media img { object-position: top; } /* ---- Motif: a hairline rule with a single diamond at its centre -------- */ .motif-divider { position: relative; height: 1px; background: var(--border); margin-block: var(--s-8); } .motif-divider::before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; background: var(--accent); transform: translate(-50%, -50%) rotate(45deg); } .motif-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; display: inline-block; } /* ---- Feature icon chip -------------------------------------------------- */ .feature-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent-strong); } /* ---- Avatar centred in a card ------------------------------------------- */ .avatar-center { margin-inline: auto; } /* ---- Cultural band: photo + copy, alternating on wide screens ---------- */ .cultural-band { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--s-9); align-items: center; } @media (max-width: 860px) { .cultural-band { grid-template-columns: 1fr; gap: var(--s-6); } } .cultural-band-media { border-radius: var(--radius-lg); box-shadow: var(--shadow); } /* ---- Testimonial quote --------------------------------------------------- */ .quote { font-style: italic; line-height: var(--lh); } /* ---- CTA band: one deliberate use of the accent as a full band -------- */ .cta-band { display: grid; grid-template-columns: 0.9fr 1.1fr; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); box-shadow: var(--shadow-raised); } @media (max-width: 860px) { .cta-band { grid-template-columns: 1fr; } } .cta-band-media { border-radius: 0; aspect-ratio: 4/3; } .cta-band-copy { padding: var(--s-9); display: flex; flex-direction: column; justify-content: center; } .cta-sub { opacity: 0.92; } .btn-on-accent { background: var(--accent-ink); color: var(--accent-strong); align-self: flex-start; } .btn-on-accent:hover { background: color-mix(in srgb, var(--accent-ink) 90%, var(--accent)); } /* ---- Trial page ---------------------------------------------------------- */ .trial-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--s-6); align-items: start; } @media (max-width: 860px) { .trial-grid { grid-template-columns: 1fr; } } .studio-info { position: sticky; top: var(--s-6); } @media (max-width: 860px) { .studio-info { position: static; } } /* ---- Site footer ---------------------------------------------------------- */ .site-foot { margin-top: var(--s-12); border-top: 1px solid var(--border); background: var(--surface); padding-block: var(--s-9); } .site-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-7); } @media (max-width: 700px) { .site-foot-grid { grid-template-columns: 1fr; } } .site-foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--border); }