/* ========================================================================== Eleanor Grace Dance Brand colour: --aqua #61E0E5. It is a FILL colour, never type: far too light to read. Where the brand must be text on a light ground, use --aqua-deep, the same hue darkened until it passes contrast. Fonts self-hosted, no Google Fonts request. Licences in /assets/fonts. ========================================================================== */ @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/fraunces-latin.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("/assets/fonts/nunito-sans-latin.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --aqua: #61e0e5; --aqua-mid: #2ec9d1; --aqua-deep: #0a6165; --mist: #e6fbfc; --coral: #ff7a6b; --coral-deep: #b83a2b; --coral-tint: #ffe9e5; --sun: #ffc94a; --sun-tint: #fff4d4; --grape: #b09aff; --grape-deep: #5a3fbe; --ink: #123b40; --ink-deep: #0c2b2f; --paper: #fffdf9; --line: rgba(18, 59, 64, .16); --line-light: rgba(255, 253, 249, .26); --muted: rgba(18, 59, 64, .74); --display: "Fraunces", Georgia, serif; --body: "Nunito Sans", "Helvetica Neue", Arial, sans-serif; --w: 1240px; --wn: 800px; --r: 20px; --r-lg: 34px; --r-sm: 12px; --pop: 5px 6px 0 var(--ink); } *, *::before, *::after { box-sizing: border-box; } /* The overscroll area outside the page takes its colour from , so set that to the header and footer colour. The page itself stays on --paper because keeps its own background. Works on desktop and mobile. */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background-color: var(--ink); /* iOS takes the rubber-band colour from the canvas, which needs html to be the full height as well as coloured, or it falls back to white. */ min-height: 100%; color-scheme: light; } body { min-height: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.65; font-weight: 500; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: .98; letter-spacing: -.025em; margin: 0 0 .5em; font-variation-settings: "SOFT" 80, "WONK" 1; } h1 { font-size: clamp(2.9rem, 8vw, 6rem); } h2 { font-size: clamp(2.3rem, 5.6vw, 4.2rem); } h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } .wrap { width: 100%; max-width: var(--w); margin: 0 auto; padding: 0 26px; } .narrow { width: 100%; max-width: var(--wn); margin: 0 auto; padding: 0 26px; } .section { padding: clamp(64px, 9vw, 118px) 0; position: relative; } .section--mist { background: var(--mist); } .section--coral { background: var(--coral-tint); } .section--sun { background: var(--sun-tint); } .section--aqua { background: var(--aqua); } .section--ink { background: var(--ink); color: var(--paper); } /* Headings sit left and oversized, with a coloured highlight on the key word. No centred eyebrow-over-heading stacks. */ .eyebrow { font-family: var(--body); font-size: .8rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--aqua-deep); margin: 0 0 .9rem; display: inline-block; transform: rotate(-1.5deg); } .section--coral .eyebrow { color: var(--coral-deep); } .section--aqua .eyebrow { color: var(--ink); } .section--ink .eyebrow { color: var(--aqua); } /* Highlighter behind a word, drawn as a rough marker sweep */ .mark-aqua, .mark-coral, .mark-sun { background-repeat: no-repeat; background-position: center 78%; background-size: 100% .58em; padding: 0 .1em; } .mark-aqua { background-image: linear-gradient(var(--aqua), var(--aqua)); } .mark-coral { background-image: linear-gradient(var(--coral), var(--coral)); } .mark-sun { background-image: linear-gradient(var(--sun), var(--sun)); } .lede { font-size: clamp(1.1rem, 1.8vw, 1.32rem); max-width: 54ch; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: .5em; padding: 1em 2.1em; font-family: var(--body); font-size: .98rem; font-weight: 800; text-decoration: none; border: 3px solid var(--ink); border-radius: 999px; background: var(--aqua); color: var(--ink); cursor: pointer; box-shadow: var(--pop); transition: transform .15s ease, box-shadow .15s ease; } .btn:hover { transform: translate(3px, 4px); box-shadow: 1px 1px 0 var(--ink); } .btn:active { transform: translate(5px, 6px); box-shadow: none; } .btn--coral { background: var(--coral); } .btn--sun { background: var(--sun); } .btn--plain { background: var(--paper); } .btn--light { background: var(--paper); } .btn--outline-light { background: transparent; border-color: var(--paper); color: var(--paper); box-shadow: 5px 6px 0 var(--aqua); } .btn--outline-light:hover { box-shadow: 1px 1px 0 var(--aqua); } .btn-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } /* ---------- Announcement bar ---------- */ .bar { background: var(--sun); color: var(--ink); text-align: center; padding: 12px 20px; font-size: .94rem; font-weight: 800; } /* ---------- Header ---------- */ /* Dark only because the EGD logo is a white cut-out and needs a backing. */ .site-head { position: sticky; top: 0; z-index: 60; background: var(--ink); color: var(--paper); } .head-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; } .brand img { height: 52px; width: auto; } .nav { display: flex; align-items: center; gap: 26px; } .nav a { text-decoration: none; font-size: 1rem; font-weight: 700; padding: 5px 0; border-bottom: 3px solid transparent; } .nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--aqua); } /* The Studios wrapper must lay out as a flex box, not an inline span, or the link inside it sits a few pixels low and loses its underline height. */ .has-sub { position: relative; display: flex; align-items: center; } .sub { position: absolute; top: 100%; left: -18px; min-width: 200px; background: var(--ink-deep); border-radius: 0 0 var(--r-sm) var(--r-sm); padding: 8px 0; display: none; } .has-sub:hover .sub, .has-sub:focus-within .sub { display: block; } .sub a { display: block; padding: 10px 20px; border: 0; } .sub a:hover { background: rgba(97,224,229,.18); border: 0; } .head-cta .btn { padding: .65em 1.4em; font-size: .9rem; box-shadow: 3px 4px 0 var(--aqua-deep); } .head-cta .btn:hover { box-shadow: 1px 1px 0 var(--aqua-deep); } .burger { display: none; background: var(--aqua); border: 3px solid var(--paper); border-radius: 999px; color: var(--ink); font-family: var(--body); padding: 8px 18px; font-size: .9rem; font-weight: 800; cursor: pointer; } /* ========================================================================== HERO - asymmetric. Type on the left, Eleanor's film on the right, both inside the aqua field. The film is part of the hero, not a slab under it. ========================================================================== */ .hero { background: var(--aqua); color: var(--ink); padding: clamp(44px, 5.5vw, 76px) 0 clamp(58px, 7vw, 96px); border-radius: 0 0 clamp(40px, 7vw, 90px) clamp(40px, 7vw, 90px); position: relative; overflow: hidden; } /* Ambient shapes, kept faint so type stays the loudest thing */ .hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 253, 249, .3); pointer-events: none; } .hero::before { width: 320px; height: 320px; top: -120px; right: 28%; } .hero::after { width: 180px; height: 180px; bottom: -70px; left: -50px; } .hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(28px, 4vw, 60px); align-items: center; position: relative; z-index: 2; } .hero h1 { margin-bottom: .45em; } .hero h1 .rot-wrap { display: block; } .rotator { display: inline-block; position: relative; min-width: 9ch; } .rotator span { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; transform: translateY(.3em) rotate(-2deg); transition: opacity .4s ease, transform .4s ease; background-image: linear-gradient(var(--sun), var(--sun)); background-repeat: no-repeat; background-position: center 76%; background-size: 100% .56em; padding: 0 .12em; } .rotator span.is-on { opacity: 1; transform: rotate(-1.5deg); position: relative; } /* Film: tilted, thick-framed, with a coral card peeking out behind it. Controls sit BELOW the film so they never cover what is on screen. */ .hero-film { position: relative; max-width: 340px; margin-left: auto; } .film-stage { position: relative; } .film-stage::before { content: ""; position: absolute; inset: 14px -16px -16px 14px; background: var(--coral); border: 4px solid var(--ink); border-radius: var(--r-lg); transform: rotate(3.5deg); } .hero-film .frame { position: relative; border: 5px solid var(--ink); border-radius: var(--r-lg); overflow: hidden; background: var(--ink); transform: rotate(-1.8deg); } .hero-film video { display: block; width: 100%; height: auto; /* portrait 9:16, shown whole - no cropped heads */ background: var(--ink); } .film-tag { position: absolute; z-index: 3; bottom: -18px; left: -14px; background: var(--sun); border: 3px solid var(--ink); border-radius: 999px; padding: 8px 20px; font-weight: 800; font-size: .92rem; transform: rotate(-5deg); box-shadow: 3px 4px 0 var(--ink); } /* Controls. The film autoplays muted because browsers require it, so these are the way in to the audio. */ .film-controls { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 30px; } .sound-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; font-family: var(--body); font-size: .92rem; font-weight: 800; white-space: nowrap; color: var(--ink); background: var(--paper); border: 3px solid var(--ink); border-radius: 999px; cursor: pointer; box-shadow: 3px 4px 0 var(--ink); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } .sound-btn:hover { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--ink); } .sound-btn[aria-pressed="true"] { background: var(--sun); } /* SVG icons rather than unicode characters, which iOS renders as emoji */ .sound-btn .ico { width: 18px; height: 18px; flex: none; display: block; } .sound-btn .ico-mute { display: none; } .sound-btn[aria-pressed="true"] .ico-play { display: none; } .sound-btn[aria-pressed="true"] .ico-mute { display: block; } /* Sticker badge in the hero copy */ .sticker { display: inline-block; background: var(--paper); border: 3px solid var(--ink); border-radius: 999px; padding: 7px 18px; font-weight: 800; font-size: .9rem; transform: rotate(-2.5deg); box-shadow: 3px 4px 0 var(--ink); } /* ---------- Awards as rosettes, alternating down the page ---------- */ .rosettes { display: grid; gap: clamp(26px, 4vw, 44px); max-width: 960px; margin: 0 auto; } .rosette-row { display: grid; grid-template-columns: 132px 1fr; gap: 28px; align-items: center; } .rosette-row:nth-child(even) { grid-template-columns: 1fr 132px; text-align: right; } .rosette-row:nth-child(even) .rosette { order: 2; } .rosette { width: 132px; height: 132px; display: grid; place-items: center; border: 4px solid var(--ink); border-radius: 50%; font-family: var(--display); font-weight: 800; font-size: 1.7rem; background: var(--aqua); box-shadow: 5px 6px 0 var(--ink); transform: rotate(-6deg); position: relative; } /* Ribbon tails */ .rosette::after { content: ""; position: absolute; bottom: -30px; left: 50%; width: 54px; height: 42px; transform: translateX(-50%); background: var(--coral); border: 3px solid var(--ink); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); z-index: -1; } .rosette-row:nth-child(2) .rosette { background: var(--coral); transform: rotate(5deg); } .rosette-row:nth-child(2) .rosette::after { background: var(--sun); } .rosette-row:nth-child(3) .rosette { background: var(--sun); transform: rotate(-4deg); } .rosette-row:nth-child(3) .rosette::after { background: var(--aqua); } .rosette-row h3 { font-size: clamp(1.5rem, 3.4vw, 2.5rem); margin: 0; } /* ---------- Tilted accreditation ribbon ---------- */ /* Wrapper clips the tilt so it cannot widen the page */ .marquee-wrap { overflow: hidden; } .marquee { overflow: hidden; background: var(--ink); transform: rotate(-2deg) scale(1.06); margin: clamp(40px, 6vw, 70px) 0; border-top: 4px solid var(--ink); border-bottom: 4px solid var(--ink); } .marquee-track { display: flex; width: max-content; animation: slide 24s linear infinite; } .marquee-track > div { display: flex; } .marquee span { display: block; padding: 18px 40px; font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.7rem); font-weight: 800; color: var(--aqua); white-space: nowrap; } .marquee span:nth-child(even) { color: var(--sun); } @keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee:hover .marquee-track { animation-play-state: paused; } /* ---------- Grids ---------- */ .grid { display: grid; gap: 26px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } /* ---------- Age pathways as a staircase ---------- */ /* The offsets carry meaning: each card is a step up in age. */ .stairs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: start; } .path { display: block; text-decoration: none; background: var(--paper); border: 4px solid var(--ink); border-radius: var(--r-lg); padding: 30px 24px; box-shadow: var(--pop); transition: transform .18s ease, box-shadow .18s ease; } .stairs .path:nth-child(1) { margin-top: 84px; background: var(--mist); } .stairs .path:nth-child(2) { margin-top: 56px; background: var(--coral-tint); } .stairs .path:nth-child(3) { margin-top: 28px; background: var(--sun-tint); } .stairs .path:nth-child(4) { margin-top: 0; background: var(--paper); } .path:hover { transform: translate(3px, 4px); box-shadow: 1px 1px 0 var(--ink); } .path .step { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 3px solid var(--ink); border-radius: 50%; background: var(--aqua); font-family: var(--display); font-weight: 800; font-size: 1.15rem; margin-bottom: 14px; } .stairs .path:nth-child(2) .step { background: var(--coral); } .stairs .path:nth-child(3) .step { background: var(--sun); } .stairs .path:nth-child(4) .step { background: var(--grape); } .path .age { display: block; font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--aqua-deep); } .path h3 { margin: .35rem 0 .5rem; overflow-wrap: anywhere; } .path p { font-size: .95rem; color: var(--muted); } .path .go { display: inline-block; margin-top: 1rem; font-weight: 800; font-size: .95rem; color: var(--coral-deep); } /* ---------- Style circles, scattered not lined up ---------- */ .styles { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(16px, 2.2vw, 30px); } .style-item { text-align: center; text-decoration: none; width: clamp(118px, 12.5vw, 166px); } .style-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 4px solid var(--ink); transition: transform .2s ease; } .style-item:nth-child(1) { margin-top: 34px; } .style-item:nth-child(2) { margin-top: 0; } .style-item:nth-child(3) { margin-top: 46px; } .style-item:nth-child(4) { margin-top: 12px; } .style-item:nth-child(5) { margin-top: 40px; } .style-item:nth-child(6) { margin-top: 4px; } .style-item:nth-child(3n+1) img { box-shadow: 0 0 0 7px var(--aqua); } .style-item:nth-child(3n+2) img { box-shadow: 0 0 0 7px var(--coral); } .style-item:nth-child(3n+3) img { box-shadow: 0 0 0 7px var(--sun); } .style-item:hover img { transform: translateY(-8px) rotate(-4deg); } .style-item span { display: block; margin-top: 16px; font-weight: 800; font-size: 1rem; } /* ---------- Class cards ---------- */ .card { background: var(--paper); border: 4px solid var(--ink); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--pop); transition: transform .18s ease, box-shadow .18s ease; } .card:nth-child(4n+1) { transform: rotate(-.9deg); } .card:nth-child(4n+3) { transform: rotate(.8deg); } .card:hover { transform: rotate(0) translate(3px, 4px); box-shadow: 1px 1px 0 var(--ink); } .card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-bottom: 4px solid var(--ink); } .card-body { padding: 24px; flex: 1; } .card .age { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--aqua); border: 3px solid var(--ink); border-radius: 999px; padding: 3px 13px; margin-bottom: .8rem; transform: rotate(-2deg); } .card:nth-child(3n+2) .age { background: var(--coral); } .card:nth-child(3n+3) .age { background: var(--sun); } .card h3 { margin-bottom: .5rem; } .card p { font-size: .97rem; color: var(--muted); } /* ---------- Studio blocks, offset ---------- */ .studio-link { display: block; padding: 34px 30px; text-decoration: none; border: 4px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--pop); transition: transform .18s ease, box-shadow .18s ease; } .studio-link:nth-child(1) { background: var(--aqua); transform: rotate(-1.4deg); } .studio-link:nth-child(2) { background: var(--coral); transform: translateY(26px) rotate(1deg); } .studio-link:nth-child(3) { background: var(--sun); transform: rotate(-.8deg); } .studio-link:hover { transform: rotate(0) translate(3px, 4px); box-shadow: 1px 1px 0 var(--ink); } .studio-link h3 { color: var(--ink); margin-bottom: .4rem; } .studio-link p { font-size: .96rem; color: var(--ink); opacity: .85; } .studio-link .go { display: inline-block; margin-top: 1rem; font-weight: 800; font-size: .95rem; } /* ---------- Teachers ---------- */ .teacher-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; } .teacher { background: var(--paper); border: 4px solid var(--ink); border-radius: var(--r-lg); overflow: hidden; display: grid; grid-template-columns: 185px 1fr; box-shadow: var(--pop); } .teacher:nth-child(odd) { transform: rotate(-.7deg); } .teacher:nth-child(even) { transform: rotate(.6deg); } .teacher .photo { background: var(--mist); position: relative; min-height: 240px; border-right: 4px solid var(--ink); } .teacher:nth-child(3n+2) .photo { background: var(--coral-tint); } .teacher:nth-child(3n+3) .photo { background: var(--sun-tint); } .teacher .photo img { width: 100%; height: 100%; object-fit: cover; } .teacher .photo .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700; color: var(--muted); text-align: center; padding: 16px; } .teacher .info { padding: 26px; } .teacher .role { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--aqua-deep); margin-bottom: .35rem; } .teacher h3 { margin-bottom: .55rem; } .teacher .bio { font-size: .96rem; color: var(--muted); } .teacher--wide { grid-column: 1 / -1; grid-template-columns: 300px 1fr; transform: none; } .pending { font-weight: 700; color: var(--coral-deep); background: var(--coral-tint); border: 3px dashed var(--coral-deep); border-radius: var(--r-sm); padding: 8px 14px; display: inline-block; font-size: .9rem; } /* ---------- Testimonials as taped-up notes ---------- */ .quote { background: var(--paper); border: 4px solid var(--ink); border-radius: var(--r-sm); padding: 34px 28px 28px; box-shadow: var(--pop); display: flex; flex-direction: column; position: relative; } .quote::before { content: ""; position: absolute; top: -14px; left: 50%; width: 96px; height: 28px; transform: translateX(-50%) rotate(-3deg); background: rgba(255, 201, 74, .85); border: 2px solid rgba(18, 59, 64, .35); } .quote:nth-child(1) { transform: rotate(-1.6deg); } .quote:nth-child(2) { transform: rotate(.7deg); } .quote:nth-child(3) { transform: rotate(-.8deg); } .quote:nth-child(2)::before { background: rgba(97, 224, 229, .85); transform: translateX(-50%) rotate(4deg); } .quote:nth-child(3)::before { background: rgba(255, 122, 107, .8); transform: translateX(-50%) rotate(-5deg); } .quote .mark { font-family: var(--display); font-size: 3rem; line-height: .8; color: var(--coral-deep); margin-bottom: .4rem; } .quote p { font-size: 1.02rem; flex: 1; } .quote .who { margin-top: 1.1rem; font-weight: 800; font-size: .92rem; color: var(--aqua-deep); } /* ---------- Timetable ---------- */ .programme { display: grid; gap: 20px; } .day { background: var(--paper); border: 4px solid var(--ink); border-radius: var(--r-lg); padding: 26px 30px; display: grid; grid-template-columns: 180px 1fr; gap: 24px; } .day:nth-child(odd) { background: var(--mist); } .day h3 { margin: 0; color: var(--aqua-deep); } .slots { display: grid; } .slot { display: grid; grid-template-columns: 150px 1fr auto; gap: 18px; align-items: baseline; padding: 11px 0; border-bottom: 2px dotted var(--line); } .slot:last-child { border-bottom: 0; padding-bottom: 0; } .slot:first-child { padding-top: 0; } .slot .time { font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; } .slot .name { font-weight: 600; } .slot .ages { font-size: .86rem; font-weight: 800; color: var(--aqua-deep); white-space: nowrap; } .slot.invite .name::after { content: "Invite only"; display: inline-block; margin-left: 10px; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--sun); border: 2px solid var(--ink); color: var(--ink); padding: 2px 10px; border-radius: 999px; vertical-align: middle; } /* ---------- Map ---------- */ .map { width: 100%; aspect-ratio: 4 / 3; border: 4px solid var(--ink); border-radius: var(--r-lg); display: block; } .map-gate { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-lg); background: var(--mist); border: 4px dashed var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 30px; } .map-gate p { font-size: .95rem; color: var(--muted); max-width: 34ch; margin: 0; } .addr dt { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--aqua-deep); margin-top: 1.3rem; } .addr dd { margin: .35rem 0 0; } /* ---------- Party packages ---------- */ .pkg { border: 4px solid var(--ink); border-radius: var(--r-lg); padding: 32px 28px; background: var(--paper); box-shadow: var(--pop); display: flex; flex-direction: column; } .pkg:nth-child(1) { background: var(--mist); transform: rotate(-1.3deg); } .pkg:nth-child(2) { background: var(--coral-tint); transform: translateY(20px) rotate(.9deg); } .pkg:nth-child(3) { background: var(--sun-tint); transform: rotate(-.7deg); } .pkg h3 { font-size: clamp(2rem, 3.6vw, 2.7rem); margin-bottom: .2rem; } .pkg .rec { font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--coral-deep); margin-bottom: 1.3rem; } .pkg ul { list-style: none; margin: 0 0 1.7rem; padding: 0; flex: 1; } .pkg li { padding: 11px 0; border-bottom: 2px dotted var(--line); font-size: .97rem; } .pkg li:last-child { border-bottom: 0; } /* ---------- FAQ ---------- */ .faq details { background: var(--paper); border: 4px solid var(--ink); border-radius: var(--r); margin-bottom: 14px; padding: 0 24px; } .faq details[open] { background: var(--mist); } .faq summary { cursor: pointer; padding: 20px 0; font-family: var(--display); font-size: 1.22rem; font-weight: 800; list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; flex: none; width: 32px; height: 32px; display: grid; place-items: center; background: var(--aqua); border: 3px solid var(--ink); border-radius: 50%; font-family: var(--body); font-size: 1.2rem; font-weight: 800; line-height: 1; } .faq details[open] summary::after { content: "\2013"; background: var(--coral); } .faq .answer { padding: 0 0 22px; font-size: .99rem; color: var(--muted); max-width: 68ch; } /* ---------- Forms ---------- */ .form { display: grid; gap: 16px; } .form label { font-size: .88rem; font-weight: 800; display: block; margin-bottom: .5rem; } .form input, .form select, .form textarea { width: 100%; padding: 14px 16px; font-family: var(--body); font-size: 1rem; font-weight: 500; color: var(--ink); background: var(--paper); border: 3px solid var(--ink); border-radius: var(--r-sm); } .form textarea { min-height: 130px; resize: vertical; } .form input:focus, .form select:focus, .form textarea:focus { outline: 3px solid var(--coral); outline-offset: 2px; } .form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .hp { position: absolute; left: -9999px; } /* Visible to screen readers only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .consent { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; } .consent input[type="checkbox"] { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--aqua-deep); flex: none; } .consent label { font-size: .93rem; font-weight: 500; margin: 0; line-height: 1.5; } .section--ink .form label, .section--ink .consent label { color: var(--paper); } .section--ink .form input, .section--ink .form select, .section--ink .form textarea { border-color: var(--aqua); } .section--ink .consent a { color: var(--aqua); } .box-list { background: var(--mist); border: 3px solid var(--ink); border-radius: var(--r); padding: 22px 26px; font-size: .97rem; } .contact-form { background: var(--paper); border: 4px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--pop); padding: 30px 28px; } .contact-form input, .contact-form select, .contact-form textarea { background: var(--mist); } .path .step { font-family: var(--body); font-size: 1.15rem; } /* ---------- Split ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 64px); align-items: center; } .split img { border-radius: var(--r-lg); border: 5px solid var(--ink); box-shadow: var(--pop); } .split--tilt img { transform: rotate(-2deg); } /* ---------- Values ---------- */ .values { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 0; margin: 0; } .values li { list-style: none; background: var(--aqua); border: 3px solid var(--ink); border-radius: 999px; padding: 9px 24px; font-family: var(--display); font-size: 1.18rem; font-weight: 800; } .values li:nth-child(4n+2) { background: var(--coral); transform: rotate(2deg); } .values li:nth-child(4n+3) { background: var(--sun); transform: rotate(-2deg); } .values li:nth-child(4n+4) { background: var(--grape); } /* ---------- Trial popup ---------- */ .modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; } .modal[hidden] { display: none; } .modal-backdrop { position: absolute; inset: 0; background: rgba(14, 33, 36, .72); } .modal-card { position: relative; width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; background: var(--paper); border: 4px solid var(--ink); border-radius: var(--r-lg); box-shadow: 8px 10px 0 var(--ink); padding: 34px 30px 30px; } .modal-x { position: absolute; top: 12px; right: 14px; width: 38px; height: 38px; display: grid; place-items: center; font-family: var(--body); font-size: 1.5rem; line-height: 1; font-weight: 700; color: var(--ink); background: var(--paper); border: 3px solid var(--ink); border-radius: 50%; cursor: pointer; } .modal-x:hover { background: var(--coral); } .modal-step[hidden] { display: none; } .modal-tick { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 14px; font-size: 1.5rem; font-weight: 800; background: var(--aqua); color: var(--ink); border: 3px solid var(--ink); border-radius: 50%; } .bar-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } body.modal-open { overflow: hidden; } /* ---------- Legal pages ---------- */ .legal { max-width: 74ch; } .legal h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); margin-top: 2.6rem; } .legal h2:first-of-type { margin-top: 0; } .legal h3 { font-size: 1.25rem; margin-top: 1.8rem; } .legal ul, .legal ol { padding-left: 1.2rem; } .legal li { margin-bottom: .5rem; } .legal .updated { font-size: .92rem; color: var(--muted); } .legal table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .95rem; } .legal th, .legal td { text-align: left; padding: 12px 14px; border-bottom: 2px solid var(--line); vertical-align: top; } .legal th { font-weight: 800; background: var(--mist); } .legal .toc { background: var(--mist); border: 4px solid var(--ink); border-radius: var(--r); padding: 22px 26px; margin-bottom: 2.6rem; } .legal .toc ul { margin: 0; padding-left: 1.2rem; } /* ---------- Footer ---------- */ .site-foot { background: var(--ink); color: var(--paper); padding: 70px 0 32px; } .foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; } .site-foot img.logo { height: 118px; width: auto; margin-bottom: 18px; } .site-foot h4 { font-family: var(--body); font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--aqua); margin: 0 0 16px; } .site-foot ul { list-style: none; margin: 0; padding: 0; } .site-foot li { margin-bottom: 10px; } .site-foot a { text-decoration: none; font-size: .97rem; color: rgba(255,253,249,.84); } .site-foot a:hover { color: var(--aqua); } .foot-base { margin-top: 46px; padding-top: 22px; border-top: 2px solid var(--line-light); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .88rem; color: rgba(255,253,249,.62); } .tagline { font-family: var(--display); font-size: 1.25rem; font-weight: 800; color: var(--aqua); } /* ---------- Responsive ---------- */ @media (max-width: 1050px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .stairs { grid-template-columns: repeat(2, 1fr); } .stairs .path:nth-child(1) { margin-top: 40px; } .stairs .path:nth-child(2) { margin-top: 0; } .stairs .path:nth-child(3) { margin-top: 40px; } .stairs .path:nth-child(4) { margin-top: 0; } } @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } .hero-film { max-width: 320px; margin: 8px auto 0; } .grid-3 { grid-template-columns: repeat(2, 1fr); } .split { grid-template-columns: 1fr; } .foot-grid { grid-template-columns: 1fr 1fr; } .teacher-grid { grid-template-columns: 1fr; } .teacher--wide { grid-template-columns: 185px 1fr; } .day { grid-template-columns: 1fr; gap: 14px; } .rosette-row, .rosette-row:nth-child(even) { grid-template-columns: 108px 1fr; text-align: left; } .rosette-row:nth-child(even) .rosette { order: 0; } .rosette { width: 108px; height: 108px; font-size: 1.4rem; } } @media (max-width: 820px) { .burger { display: block; } .head-cta { display: none; } .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--ink); flex-direction: column; align-items: stretch; gap: 0; padding: 12px 26px 26px; z-index: 70; } .nav.is-open { display: flex; } .nav a { padding: 14px 0; border-bottom: 2px solid var(--line-light); } /* Stack the wrapper on mobile, or the studios sit beside "Studios". The link itself must be block too, or it stays inline and its divider only spans the width of the word. */ .has-sub { display: block; } .has-sub > a { display: block; } .sub { position: static; display: block; background: none; padding: 0 0 0 18px; } .head-inner { position: relative; } } @media (max-width: 700px) { body { font-size: 16px; } .grid-2, .grid-3, .grid-4, .stairs { grid-template-columns: 1fr; } .stairs .path { margin-top: 0 !important; } .form-2 { grid-template-columns: 1fr; } .rotator { display: block; min-width: 0; } .teacher, .teacher--wide { grid-template-columns: 1fr; } .teacher .photo { min-height: 250px; border-right: 0; border-bottom: 4px solid var(--ink); } .slot { grid-template-columns: 1fr; gap: 2px; padding: 14px 0; } .slot .ages { white-space: normal; } .foot-grid { grid-template-columns: 1fr; } .day { padding: 24px 22px; } .style-item { width: 42%; margin-top: 0 !important; } .film-controls { justify-content: center; margin-top: 28px; gap: 12px; } .marquee { transform: rotate(-2deg) scale(1.12); } /* Keep a little tilt but calm it right down on a small screen */ .studio-link, .pkg, .quote, .card, .teacher { transform: none !important; } .studio-link:hover, .pkg:hover, .card:hover { transform: translate(3px, 4px) !important; } .legal table, .legal tbody, .legal tr, .legal td { display: block; width: 100%; } .legal thead { position: absolute; left: -9999px; } .legal tr { border: 3px solid var(--ink); border-radius: var(--r); padding: 6px 16px 14px; margin-bottom: 14px; background: var(--paper); } .legal td { border-bottom: 0; padding: 10px 0 0; } .legal td::before { content: attr(data-label); display: block; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--aqua-deep); margin-bottom: 3px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .marquee-track { animation: none; } * { transition-duration: .01ms !important; } } :focus-visible { outline: 3px solid var(--coral-deep); outline-offset: 3px; } .section--ink :focus-visible, .site-head :focus-visible, .site-foot :focus-visible { outline-color: var(--aqua); }