/* ===================================================================== Invitation to Act — styles.css Built to the "Artisan Static Site" design framework. THEMING ------- All colour is driven by CSS custom properties, so the palette is switched by a single attribute on : (default — Classic Stage & Prestige) (original plum + amber) (Contemporary Indie Film & Meisner) (Vibrant Creative Energy) The default works with zero JavaScript. To change the site-wide palette, edit the data-theme value in index.html. Every theme keeps the same token names, so nothing else in this file needs to change. ===================================================================== */ /* ------------------------------------------------------------------ */ /* 1. Design tokens */ /* ------------------------------------------------------------------ */ /* Non-themed tokens (measure / layout) */ :root { --measure-narrow: 460px; --measure-prose: 620px; --measure-wide: 820px; } /* ---- THEME: Classic Stage & Prestige (DEFAULT) -------------------- Cool near-black, refined antique brass, deep wine curtain. Formal, gilded and distinctly more prestigious than the warmer Playhouse. */ :root, [data-theme="stage"] { --black: #08080a; /* cool neutral near-black */ --ink: #12110f; /* elevated surfaces */ --ink-2: #1b1913; /* card hover / borders */ --ivory: #f3edde; /* bright warm ivory (gilded) */ --paper: #cabfa8; /* secondary text */ --muted: #8c8474; /* tertiary / labels */ --spot: #b8934e; /* refined antique brass accent */ --spot-light: #d8b878; /* accent hover / highlight */ --velvet: #4a141d; /* deep wine curtain secondary */ --line: rgba(184, 147, 78, .26); /* hairline borders */ --line-soft: rgba(243, 237, 222, .08); } /* ---- THEME: Playhouse (original) ---------------------------------- Deep plum-black, spotlight amber, velvet crimson. Theatrical. */ [data-theme="playhouse"] { --black: #0c0a10; --ink: #16121c; --ink-2: #1e1826; --ivory: #ede6da; --paper: #cfc4b8; --muted: #948a9a; --spot: #d8a24e; --spot-light: #ecc078; --velvet: #7c2b3b; --line: rgba(216, 162, 78, .24); --line-soft: rgba(237, 230, 218, .10); } /* ---- THEME: Contemporary Indie Film & Meisner --------------------- Cool blue-charcoal, desaturated bone, filmic steel-blue accent with a muted oxblood counter. Inverts the usual warm/cool relationship for a raw, modern, cinematic screen look — distinct from the warm themes. */ [data-theme="indie"] { --black: #0b0e12; /* cool blue-charcoal */ --ink: #12171c; --ink-2: #1b222a; --ivory: #e4e8ec; /* cool bone */ --paper: #aeb8c0; --muted: #78828d; /* slate grey */ --spot: #6f9fb5; /* desaturated steel-blue accent */ --spot-light: #93bccd; --velvet: #6d3a34; /* muted oxblood counter-accent */ --line: rgba(111, 159, 181, .24); --line-soft: rgba(228, 232, 236, .08); } /* ---- THEME: Slate & Olive Studio ---------------------------------- Dark slate base, soft muted olive accent, deep slate-blue secondary. Low-chroma, sophisticated and easy on the eye — a calm, slick studio feel. (Flag key kept as "vibrant" for continuity.) */ [data-theme="vibrant"] { --black: #12161b; /* dark slate */ --ink: #191e24; --ink-2: #222a31; --ivory: #e7e9e6; /* soft off-white */ --paper: #b4bab6; /* muted sage-grey */ --muted: #7c847f; /* slate-sage tertiary */ --spot: #a3aa6b; /* soft muted olive accent */ --spot-light: #c3ca8b; /* lighter olive highlight */ --velvet: #37434d; /* deep slate-blue secondary */ --line: rgba(163, 170, 107, .24); /* olive-tinted hairline */ --line-soft: rgba(231, 233, 230, .09); } /* ------------------------------------------------------------------ */ /* 2. Reset / base */ /* ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; overflow-x: hidden; background: var(--black); color: var(--ivory); font-family: "DM Sans", sans-serif; font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: "Instrument Serif", serif; font-weight: 400; margin: 0; } em { font-style: italic; color: var(--spot); } .skip-link { position: absolute; left: -999px; top: 0; background: var(--spot); color: var(--black); padding: 10px 16px; z-index: 100; } .skip-link:focus { left: 12px; top: 12px; } :focus-visible { outline: 2px solid var(--spot); outline-offset: 3px; } /* ------------------------------------------------------------------ */ /* 3. Shared type helpers */ /* ------------------------------------------------------------------ */ .eyebrow { margin: 0 0 18px; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--spot); } .section-lead, .lead { color: var(--paper); max-width: var(--measure-prose); } .lead { font-size: clamp(15px, 1.15vw, 18px); margin: 26px 0 0; } .section-lead { margin: 22px 0 0; font-size: clamp(14px, 1.05vw, 16px); } /* ------------------------------------------------------------------ */ /* 4. Layout primitives */ /* ------------------------------------------------------------------ */ main { display: block; } section { padding: clamp(70px, 9vw, 145px) clamp(22px, 6vw, 90px); border-top: 1px solid var(--line-soft); position: relative; } .section-head { max-width: var(--measure-wide); margin: 0 0 clamp(40px, 5vw, 70px); } .section-head h2, .enquire-copy h2 { font-size: clamp(42px, 6vw, 92px); line-height: .98; letter-spacing: -.03em; margin-top: 6px; } /* ------------------------------------------------------------------ */ /* 5. Header */ /* ------------------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; height: 84px; padding: 0 clamp(22px, 6vw, 90px); background: rgba(12, 10, 16, .72); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft); } .brand { display: flex; align-items: center; gap: 13px; } .brand-mark { color: var(--spot); font-size: 20px; } .brand-text { display: flex; flex-direction: column; line-height: 1; } .brand-name { font-family: "Instrument Serif", serif; font-size: 20px; letter-spacing: .01em; } .brand-sub { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-top: 4px; } .site-nav { display: flex; align-items: center; gap: 30px; } .site-nav a { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--paper); transition: color .25s; } .site-nav a:hover { color: var(--ivory); } .nav-cta { border: 1px solid var(--line); padding: 10px 18px; color: var(--spot) !important; transition: color .25s, background .25s, border-color .25s; } .nav-cta:hover { background: var(--spot); color: var(--black) !important; border-color: var(--spot); } /* ------------------------------------------------------------------ */ /* 6. Buttons */ /* ------------------------------------------------------------------ */ .btn { display: inline-block; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; padding: 15px 28px; border: 1px solid var(--line); transition: color .25s, background .25s, border-color .25s, transform .25s; } .btn-primary { background: var(--spot); color: var(--black); border-color: var(--spot); } .btn-primary:hover { background: var(--spot-light); border-color: var(--spot-light); } .btn-ghost { color: var(--ivory); } .btn-ghost:hover { border-color: var(--spot); color: var(--spot); } /* ------------------------------------------------------------------ */ /* 7. Hero */ /* ------------------------------------------------------------------ */ .hero { min-height: 88vh; display: grid; align-items: center; overflow: hidden; border-top: 0; } .hero-inner { max-width: var(--measure-wide); position: relative; z-index: 2; } .hero h1 { font-size: clamp(58px, 9vw, 132px); line-height: .92; letter-spacing: -.035em; text-shadow: 0 4px 40px rgba(0, 0, 0, .5); } .hero-actions { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 40px; } .hero-trust { margin: 24px 0 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } /* Stage spotlight backdrop */ .hero-stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .spotlight { position: absolute; top: -20%; right: -5%; width: 70vw; height: 120vh; background: radial-gradient(closest-side, rgba(216, 162, 78, .22), rgba(216, 162, 78, .06) 45%, transparent 72%); transform: rotate(12deg); filter: blur(2px); } .hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 80% -10%, rgba(124, 43, 59, .28), transparent 55%), linear-gradient(180deg, transparent, rgba(0, 0, 0, .35)); z-index: 1; pointer-events: none; } /* ------------------------------------------------------------------ */ /* 8. Offerings */ /* ------------------------------------------------------------------ */ .offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); } .offer { background: var(--ink); padding: clamp(28px, 3vw, 44px) clamp(24px, 2.5vw, 38px); transition: background .3s; display: flex; flex-direction: column; } .offer:hover { background: var(--ink-2); } .offer-index { font-family: "Instrument Serif", serif; font-size: 34px; color: var(--spot); display: block; margin-bottom: 18px; } .offer h3 { font-size: 27px; letter-spacing: -.01em; margin-bottom: 13px; } .offer p { color: var(--paper); margin: 0 0 24px; } .offer-meta { margin: 0; display: grid; gap: 7px; } .offer-meta > div { display: flex; justify-content: space-between; gap: 18px; padding-top: 7px; border-top: 1px solid var(--line-soft); } .offer-meta dt { font-size: 11px; letter-spacing: .17em; text-transform: uppercase; color: var(--muted); margin: 0; } .offer-meta dd { margin: 0; color: var(--ivory); font-size: 13px; } .offer-book { margin-top: auto; padding-top: 22px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--spot); align-self: flex-start; } .offer-book span { transition: transform .25s; display: inline-block; } .offer-book:hover { color: var(--spot-light); } .offer-book:hover span { transform: translateX(5px); } /* ------------------------------------------------------------------ */ /* 8b. Teacher */ /* ------------------------------------------------------------------ */ .teacher-inner { display: grid; grid-template-columns: 0.85fr 1fr; gap: clamp(34px, 5vw, 80px); align-items: center; } .teacher-portrait { margin: 0; position: relative; overflow: hidden; border: 1px solid var(--line-soft); background: linear-gradient(135deg, var(--ink-2), var(--ink)); aspect-ratio: 4 / 5; } .teacher-portrait img { width: 100%; height: 100%; object-fit: cover; } .teacher-portrait figcaption { position: absolute; left: 0; bottom: 0; width: 100%; padding: 10px 14px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ivory); background: linear-gradient(0deg, rgba(0, 0, 0, .7), transparent); } .teacher-copy h2 { font-size: clamp(38px, 5vw, 74px); line-height: .98; letter-spacing: -.03em; margin: 6px 0 0; } .teacher-bio { color: var(--paper); margin: 20px 0 0; max-width: var(--measure-prose); } .teacher-creds { margin: 30px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 13px 30px; } .teacher-creds > div { border-top: 1px solid var(--line-soft); padding-top: 10px; } .teacher-creds dt { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0 0 3px; } .teacher-creds dd { margin: 0; color: var(--ivory); font-size: 14px; } /* ------------------------------------------------------------------ */ /* 9. Gallery */ /* ------------------------------------------------------------------ */ .photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 18px; } .photo { margin: 0; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--ink-2), var(--ink)); border: 1px solid var(--line-soft); } .photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.15) contrast(1.02); transition: transform .6s ease, filter .6s ease; } .photo:hover img { transform: scale(1.04); filter: none; } .photo figcaption { position: absolute; left: 0; bottom: 0; padding: 10px 14px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ivory); background: linear-gradient(0deg, rgba(12, 10, 16, .8), transparent); width: 100%; } /* Feature tiles span for editorial rhythm */ .ph-1 { grid-row: span 2; } .ph-4 { grid-row: span 2; } /* ------------------------------------------------------------------ */ /* 10. Video */ /* ------------------------------------------------------------------ */ .video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 25px; } .video-item { margin: 0; } .video-facade, .video-item iframe { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line); overflow: hidden; cursor: pointer; } .video-item iframe { border: 1px solid var(--line); } .video-poster { position: absolute; inset: 0; background: linear-gradient(135deg, var(--velvet), var(--ink) 70%); } .poster-2 { background: linear-gradient(135deg, var(--ink) 20%, var(--velvet)); } .video-play { position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--spot); color: var(--spot); font-size: 22px; background: rgba(12, 10, 16, .5); transition: background .25s, color .25s, transform .25s; } .video-facade:hover .video-play { background: var(--spot); color: var(--black); transform: scale(1.06); } .video-item figcaption { margin-top: 14px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--paper); } /* ------------------------------------------------------------------ */ /* 11. Testimonials */ /* ------------------------------------------------------------------ */ .quote-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .quote { margin: 0; padding: clamp(28px, 3vw, 44px); background: var(--ink); border: 1px solid var(--line-soft); border-left: 2px solid var(--spot); } .quote p { font-family: "Instrument Serif", serif; font-size: clamp(20px, 2vw, 27px); line-height: 1.35; color: var(--ivory); margin: 0 0 20px; } .quote footer { font-size: 12px; letter-spacing: .12em; color: var(--muted); } .quote cite { font-style: normal; color: var(--spot); } /* ------------------------------------------------------------------ */ /* 12. Enquire */ /* ------------------------------------------------------------------ */ .enquire-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: start; } .enquire-alt { margin-top: 26px; color: var(--muted); } .enquire-alt a { color: var(--spot); border-bottom: 1px solid var(--line); } .enquire-form { display: grid; gap: 18px; } .field { display: grid; gap: 7px; } .field label { font-size: 11px; letter-spacing: .19em; text-transform: uppercase; color: var(--muted); } .field input, .field select, .field textarea { width: 100%; background: var(--ink); border: 1px solid var(--line-soft); color: var(--ivory); font-family: "DM Sans", sans-serif; font-size: 15px; padding: 13px 15px; transition: border-color .25s, background-color .25s; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--spot); outline: none; background: var(--ink-2); } .field textarea { resize: vertical; } .field select { cursor: pointer; } .form-status { margin: 0; color: var(--spot); font-size: 14px; min-height: 1em; } .form-status:empty { display: none; } .enquire-form .btn-primary { justify-self: start; margin-top: 6px; } /* ------------------------------------------------------------------ */ /* 13. Footer */ /* ------------------------------------------------------------------ */ .site-footer { padding: clamp(50px, 6vw, 80px) clamp(22px, 6vw, 90px); border-top: 1px solid var(--line-soft); text-align: center; } .footer-line { margin: 0 0 6px; color: var(--muted); font-size: 13px; } .footer-tag { margin: 18px 0 0; font-family: "Instrument Serif", serif; font-style: italic; font-size: 20px; color: var(--spot); } /* ------------------------------------------------------------------ */ /* 13b. Light "intermission" band — inverted token scope */ /* Relieves the darkness and lifts readability of dense info. */ /* ------------------------------------------------------------------ */ .band-light { --ink: #f4efe4; --ink-2: #ece5d6; --ivory: #201c17; /* text becomes ink-dark on light */ --paper: #4a443b; --muted: #6f665a; --line-soft: rgba(32, 28, 23, .12); --line: rgba(32, 28, 23, .18); background: #f4efe4; color: #201c17; } .band-light .eyebrow { color: var(--velvet); } .band-light em { color: var(--velvet); } .band-light .section-lead { color: var(--paper); } /* Schedule list */ .schedule-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .schedule-row { display: grid; grid-template-columns: 1.1fr 1.6fr auto auto; align-items: center; gap: 18px 30px; padding: 20px 0; border-bottom: 1px solid var(--line); } .s-name { font-family: "Instrument Serif", serif; font-size: clamp(20px, 2vw, 26px); color: #201c17; } .s-when { color: var(--paper); font-size: 14px; } .s-price { font-size: 15px; font-weight: 600; color: #201c17; letter-spacing: .01em; justify-self: end; } .s-book { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #201c17; border: 1px solid var(--line); padding: 9px 18px; transition: background .25s, color .25s, border-color .25s; } .s-book:hover { background: var(--velvet); color: #f4efe4; border-color: var(--velvet); } .schedule-note { margin: 26px 0 0; color: var(--muted); font-size: 13px; } /* ------------------------------------------------------------------ */ /* 13c. Sticky booking bar (mobile) */ /* ------------------------------------------------------------------ */ .book-bar { display: none; } .book-bar .btn { padding: 12px 20px; } /* ------------------------------------------------------------------ */ /* 14. Motion — scroll reveal */ /* ------------------------------------------------------------------ */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; } .reveal.visible { opacity: 1; transform: none; } /* ------------------------------------------------------------------ */ /* 15. Responsive — single breakpoint */ /* ------------------------------------------------------------------ */ @media (max-width: 800px) { .site-header { height: auto; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 14px; padding-bottom: 14px; } .brand-name { font-size: 18px; } /* Compact, wrapping anchor row instead of hiding links */ .site-nav { gap: 14px 18px; flex-wrap: wrap; width: 100%; } .site-nav a { font-size: 11px; letter-spacing: .14em; } .nav-cta { margin-left: auto; } .teacher-inner { grid-template-columns: 1fr; } .teacher-creds { grid-template-columns: 1fr 1fr; } .offer-grid { grid-template-columns: 1fr; } .photo-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; } .ph-1, .ph-4 { grid-row: span 2; } .video-grid { grid-template-columns: 1fr; } .quote-grid { grid-template-columns: 1fr; } .enquire-inner { grid-template-columns: 1fr; } /* Schedule collapses to stacked cards */ .schedule-row { grid-template-columns: 1fr auto; gap: 6px 18px; } .s-when { grid-column: 1 / -1; order: 3; } .s-book { grid-column: 1 / -1; order: 4; justify-self: start; } /* Sticky booking bar */ body { padding-bottom: 72px; } .book-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 12px 18px; background: rgba(8, 8, 10, .92); backdrop-filter: blur(10px); border-top: 1px solid var(--line); } .book-bar-text { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--paper); } } /* ------------------------------------------------------------------ */ /* 16. Reduced motion */ /* ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .photo img, .video-play, .btn { transition: none; } }