/* ========================================================================== Purple Sky - design system + section styles Salman Akhtar's Psychotherapy Workshop. Brand: pink-Jaipur-sky + navy script. Loaded on top of Hello Elementor. Section markup lives in Elementor HTML widgets with the .ps-* classes below. TOKENS (this :root block is the single source of truth): TIER 1 primitives - raw hues, rgb triplets, weight/size/line/track/radius/ shadow/motion/space scales. TIER 2 semantic - role aliases (heading/text/link…) that map onto tier 1. Every rule below consumes tokens; no bare literals in rule bodies. To re-theme, edit tokens here only. ========================================================================== */ :root { /* ===== TIER 1 - PRIMITIVES ============================================= */ /* Brand hues (sampled from client art) */ --ps-pink: #EE99A4; --ps-magenta: #DD6C95; --ps-mauve: #A85F87; --ps-plum: #5A232A; --ps-navy: #1E2340; --ps-navy-deep: #0E1328; --ps-navy-tint: #141A37; /* plan item hover */ --ps-green: #315B10; --ps-crimson: #9C110B; /* RGB triplets - single source for every rgba() overlay in the file. Usage: rgba(var(--ps-navy-deep-rgb), 0.5) */ --ps-pink-rgb: 238,153,164; --ps-magenta-rgb: 221,108,149; --ps-mauve-rgb: 168,95,135; --ps-plum-rgb: 90,35,42; --ps-navy-rgb: 30,35,64; --ps-navy-deep-rgb: 14,19,40; --ps-scrim-rgb: 10,13,28; /* lightbox backdrop */ --ps-white-rgb: 255,255,255; --ps-black-rgb: 0,0,0; /* Neutrals - low-chroma, NOT cream */ --ps-white: #ffffff; --ps-ink: #1A1526; --ps-body: #33303e; --ps-muted: #6a6577; --ps-line: #e7e2e6; --ps-surface: #ffffff; --ps-bg: #F6F1F0; --ps-bg-tint: #f3ecef; /* Hairlines - --ps-line rides light surfaces, --ps-line-on-dark-* ride navy */ --ps-line-on-dark: rgba(var(--ps-white-rgb), 0.12); --ps-line-on-dark-md: rgba(var(--ps-white-rgb), 0.14); --ps-line-on-dark-lg: rgba(var(--ps-white-rgb), 0.25); /* Font families */ --ps-script: "Great Vibes", cursive; --ps-head: "Sora", system-ui, sans-serif; --ps-body-f: "Figtree", system-ui, -apple-system, sans-serif; /* Font weights */ --ps-fw-regular: 400; --ps-fw-medium: 500; --ps-fw-semibold: 600; --ps-fw-bold: 700; --ps-fw-black: 800; /* Font-size scale - fluid display (clamp) */ --ps-fs-hero-title: clamp(2rem, 8vw, 5.6rem); --ps-fs-hero-title-sm: clamp(1.6rem, 8.4vw, 3.2rem); --ps-fs-hero-script: clamp(2.6rem, 7vw, 5rem); --ps-fs-hero-script-sm: clamp(2rem, 10vw, 3rem); --ps-fs-h1: clamp(2.4rem, 6vw, 4.4rem); --ps-fs-h2: clamp(2rem, 4.5vw, 3.2rem); --ps-fs-h2-alt: clamp(2rem, 4vw, 3rem); --ps-fs-h2-sm: clamp(1.8rem, 4vw, 2.8rem); --ps-fs-h3: clamp(1.5rem, 3.4vw, 2.2rem); --ps-fs-script: clamp(2rem, 5vw, 3.2rem); --ps-fs-quote-fluid: clamp(1.8rem, 4vw, 2.6rem); /* Font-size scale - fixed steps (rem) */ --ps-fs-date: 2.6rem; --ps-fs-num: 2.4rem; --ps-fs-script-sm: 2.2rem; --ps-fs-stat: 2rem; --ps-fs-quote: 1.9rem; --ps-fs-brand: 1.35rem; --ps-fs-lead: 1.32rem; --ps-fs-title: 1.3rem; --ps-fs-title-sm: 1.2rem; --ps-fs-lead-sm: 1.18rem; --ps-fs-h5: 1.16rem; --ps-fs-body-lg: 1.12rem; --ps-fs-lg: 1.06rem; --ps-fs-meta: 1.02rem; --ps-fs-body: 0.98rem; /* base body / inputs / buttons */ --ps-fs-base: 0.96rem; --ps-fs-ui: 0.9rem; --ps-fs-nav: 0.85rem; --ps-fs-sm: 0.82rem; --ps-fs-xs: 0.78rem; --ps-fs-2xs: 0.72rem; /* Line-heights */ --ps-lh-none: 1; --ps-lh-hero: 0.98; --ps-lh-num: 0.7; --ps-lh-nav: 1.02; --ps-lh-heading: 1.08; --ps-lh-cap: 1.18; --ps-lh-snug: 1.2; --ps-lh-cap-sm: 1.3; --ps-lh-lead: 1.4; --ps-lh-copy: 1.5; --ps-lh-body: 1.65; /* Letter-spacing */ --ps-ls-display: -0.03em; --ps-ls-heading: -0.02em; --ps-ls-snug: -0.01em; --ps-ls-org: 0.02em; --ps-ls-wide: 0.04em; --ps-ls-caps: 0.12em; --ps-ls-caps-md: 0.14em; --ps-ls-caps-lg: 0.16em; /* Radius scale */ --ps-r-xs: 6px; --ps-r-sm: 8px; --ps-r-md: 10px; --ps-r-lg: 12px; --ps-r-xl: 14px; --ps-r-2xl: 18px; --ps-r-3xl: 28px; --ps-r-pill: 999px; --ps-r-circle: 50%; /* Legacy aliases - keep the --ps-r-* scale canonical */ --ps-radius: var(--ps-r-2xl); --ps-radius-lg: var(--ps-r-3xl); /* Border widths */ --ps-bw-hair: 1px; --ps-bw: 1.5px; --ps-bw-thick: 2px; /* Shadows */ --ps-shadow: 0 18px 50px -22px rgba(var(--ps-navy-rgb), 0.35); --ps-shadow-sm: 0 8px 24px -14px rgba(var(--ps-navy-rgb), 0.30); --ps-shadow-badge: 0 8px 24px -12px rgba(var(--ps-navy-deep-rgb), 0.35); --ps-shadow-book: 0 30px 60px -25px rgba(var(--ps-plum-rgb), 0.55); --ps-shadow-lb: 0 30px 80px -20px rgba(var(--ps-black-rgb), 0.7); /* Motion */ --ps-ease: cubic-bezier(0.23, 1, 0.32, 1); --ps-dur-fast: 0.16s; --ps-dur-snap: 0.18s; --ps-dur: 0.2s; --ps-dur-med: 0.25s; --ps-dur-menu: 0.32s; --ps-dur-slow: 0.4s; /* Spacing - 4px grid, --ps-sp-1 (4px) .. --ps-sp-24 (104px) */ --ps-sp-1: 4px; --ps-sp-2: 8px; --ps-sp-3: 12px; --ps-sp-4: 16px; --ps-sp-5: 20px; --ps-sp-6: 24px; --ps-sp-7: 28px; --ps-sp-8: 32px; --ps-sp-9: 36px; --ps-sp-10: 40px; --ps-sp-11: 44px; --ps-sp-12: 48px; --ps-sp-13: 52px; --ps-sp-14: 56px; --ps-sp-15: 60px; --ps-sp-16: 64px; --ps-sp-17: 68px; --ps-sp-18: 72px; --ps-sp-19: 76px; --ps-sp-20: 80px; --ps-sp-21: 84px; --ps-sp-22: 88px; --ps-sp-23: 96px; --ps-sp-24: 104px; --ps-gap: clamp(1rem, 2vw, 1.5rem); --ps-section-y: clamp(4rem, 8vw, 7rem); /* Layout */ --ps-container: 1180px; --ps-nav-w: 1340px; --ps-gutter: var(--ps-sp-10); /* page side-gutter, consumed via min(100% - var(--ps-gutter), …) */ --ps-gutter-sm: var(--ps-sp-8); /* nav rail runs tighter than the body wrap */ --ps-bio-w: 900px; /* Z-index */ --ps-z-nav: 100; --ps-z-lb: 9999; /* ===== TIER 2 - SEMANTIC ROLES ======================================== */ --ps-color-heading: var(--ps-navy); --ps-color-text: var(--ps-body); --ps-color-link: var(--ps-magenta); --ps-color-accent: var(--ps-magenta); --ps-on-dark: var(--ps-white); --ps-font-heading: var(--ps-head); --ps-font-body: var(--ps-body-f); --ps-font-script: var(--ps-script); } /* ---- Base / resets over Hello Elementor ---- */ body.purple-sky-page { font-family: var(--ps-font-body); color: var(--ps-color-text); background: var(--ps-bg); line-height: var(--ps-lh-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; } .purple-sky-page h1, .purple-sky-page h2, .purple-sky-page h3, .purple-sky-page h4, .purple-sky-page h5, .purple-sky-page h6 { font-family: var(--ps-font-heading); color: var(--ps-color-heading); font-weight: var(--ps-fw-bold); line-height: var(--ps-lh-heading); letter-spacing: var(--ps-ls-heading); text-wrap: balance; margin: 0; } .purple-sky-page h1, .purple-sky-page h2 { font-weight: var(--ps-fw-black); } .purple-sky-page p { margin: 0 0 var(--ps-sp-4); } .purple-sky-page a { color: var(--ps-color-link); text-decoration: none; } .purple-sky-page b, .purple-sky-page strong { font-weight: var(--ps-fw-bold); } .purple-sky-page img { max-width: 100%; height: auto; display: block; } .purple-sky-page .ps-wrap { width: min(100% - var(--ps-gutter), var(--ps-container)); margin-inline: auto; } .purple-sky-page .ps-section { padding-block: var(--ps-section-y); } /* Eyebrow used ONCE as a brand system marker, not per section */ .purple-sky-page .ps-kicker { font-family: var(--ps-font-heading); font-size: var(--ps-fs-xs); font-weight: var(--ps-fw-semibold); letter-spacing: var(--ps-ls-caps-lg); text-transform: uppercase; color: var(--ps-color-accent); } .purple-sky-page .ps-script { font-family: var(--ps-font-script); color: var(--ps-navy); line-height: var(--ps-lh-none); } /* Buttons */ .purple-sky-page .ps-btn { display: inline-flex; align-items: center; gap: 0.55em; font-family: var(--ps-font-heading); font-weight: var(--ps-fw-semibold); font-size: var(--ps-fs-body); padding: 0.9em 1.6em; border-radius: var(--ps-r-pill); border: var(--ps-bw) solid transparent; cursor: pointer; transition: transform var(--ps-dur-fast) var(--ps-ease), box-shadow var(--ps-dur) var(--ps-ease), background var(--ps-dur); will-change: transform; } .purple-sky-page .ps-btn--primary { background: var(--ps-navy); color: var(--ps-on-dark); box-shadow: var(--ps-shadow-sm); } .purple-sky-page .ps-btn--primary:hover { background: var(--ps-navy-deep); transform: translateY(-2px); } .purple-sky-page .ps-btn--primary:active { transform: scale(0.98); } .purple-sky-page .ps-btn--ghost { background: transparent; color: var(--ps-navy); border-color: rgba(var(--ps-navy-rgb), 0.28); } .purple-sky-page .ps-btn--ghost:hover { border-color: var(--ps-navy); transform: translateY(-2px); } .purple-sky-page .ps-btn--light { background: rgba(var(--ps-white-rgb), 0.92); color: var(--ps-navy); } .purple-sky-page .ps-btn--light:hover { background: var(--ps-white); transform: translateY(-2px); } /* Elementor Button widget: our .ps-btn* classes land on the wrapper and the real inside gets .elementor-button, so map the button styling onto that. Lets buttons be native widgets (client edits label + link) with no .ps-btn markup. */ .purple-sky-page .elementor-widget-button .elementor-button { display: inline-flex; align-items: center; gap: 0.55em; font-family: var(--ps-font-heading); font-weight: var(--ps-fw-semibold); font-size: var(--ps-fs-body); padding: 0.9em 1.6em; border-radius: var(--ps-r-pill); border: var(--ps-bw) solid transparent; background: var(--ps-navy); color: var(--ps-on-dark); box-shadow: var(--ps-shadow-sm); text-shadow: none; transition: transform var(--ps-dur-fast) var(--ps-ease), box-shadow var(--ps-dur) var(--ps-ease), background var(--ps-dur); } .purple-sky-page .elementor-widget-button .elementor-button:hover { background: var(--ps-navy-deep); transform: translateY(-2px); } .purple-sky-page .elementor-widget-button .elementor-button:active { transform: scale(0.98); } .purple-sky-page .ps-cta--ghost .elementor-button { background: transparent; color: var(--ps-navy); border-color: rgba(var(--ps-navy-rgb), 0.28); box-shadow: none; } .purple-sky-page .ps-cta--ghost .elementor-button:hover { background: transparent; border-color: var(--ps-navy); } .purple-sky-page .ps-cta--light .elementor-button { background: rgba(var(--ps-white-rgb), 0.92); color: var(--ps-navy); } .purple-sky-page .ps-cta--light .elementor-button:hover { background: var(--ps-white); } .purple-sky-page .ps-nav__cta .elementor-button { padding: 0.62em 1.2em; font-size: var(--ps-fs-ui); } /* Marker classes never paint the wrapper; they only reach the nested . */ .purple-sky-page .elementor-widget-button[class*="ps-cta"] { background: none; border: 0; padding: 0; box-shadow: none; border-radius: 0; /* Stops the wrapper stretching to the container's full width. A flex item only stretches when its cross size is auto, so giving it a width is enough. This used to be 'align-self: flex-start', which did stop the stretch but also overruled whatever the container asked for: it pinned the Register button to the top of the nav bar and shoved the gallery button to the left of a container set to centre. Alignment belongs to the container. */ width: fit-content; } /* Elementor paints Text Editor widgets with the kit's text colour using a direct rule on the wrapper. A direct declaration always beats an inherited one no matter the specificity, so '.ps-footer { color: ... }' never competed at all and the navy sections rendered near-black on navy. Hand the colour back to whatever section the widget sits in. This belongs ABOVE the component rules on purpose: it ties them at 0,2,0, so any per-block colour further down this file still wins on source order. */ .purple-sky-page .elementor-widget-text-editor { color: inherit; } /* Nav brand as a Heading widget with a link. */ .purple-sky-page .ps-nav__brand .elementor-heading-title, .purple-sky-page .ps-nav__brand a { color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; text-decoration: none; } /* ========================================================================== NAV (sticky, CSS-only mobile menu) ========================================================================== */ .purple-sky-page .ps-nav { position: sticky; top: 0; z-index: var(--ps-z-nav); background: rgba(var(--ps-white-rgb), 0.86); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: var(--ps-bw-hair) solid var(--ps-line); } .purple-sky-page .ps-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ps-sp-4); min-height: 68px; width: min(100% - var(--ps-gutter-sm), var(--ps-nav-w)); } /* Logged in, the admin bar is fixed over the top of the viewport, so a sticky header at top:0 slides underneath it and loses its first 32px. Only editors ever see this, which is exactly who is looking at the site while building it. The bar is 46px tall below 782px, and stops being fixed below 600px. */ .purple-sky-page.admin-bar .ps-nav { top: 32px; } @media screen and (max-width: 782px) { .purple-sky-page.admin-bar .ps-nav { top: 46px; } } @media screen and (max-width: 600px) { .purple-sky-page.admin-bar .ps-nav { top: 0; } } .purple-sky-page .ps-nav__brand { font-family: var(--ps-font-heading); font-weight: var(--ps-fw-black); font-size: var(--ps-fs-lg); letter-spacing: var(--ps-ls-heading); color: var(--ps-navy); line-height: var(--ps-lh-nav); white-space: nowrap; text-transform: none; } /* The brand is navy in the header and sits on navy in the footer, so the footer copy has to restate the colour. The HTML blob did this with inline style. */ .purple-sky-page .ps-footer__brand .ps-nav__brand { font-size: var(--ps-fs-brand); color: var(--ps-on-dark); } .purple-sky-page .ps-nav__links { display: flex; align-items: center; gap: var(--ps-sp-1); flex-wrap: wrap; } .purple-sky-page .ps-nav__links a { font-family: var(--ps-font-heading); font-size: var(--ps-fs-nav); font-weight: var(--ps-fw-medium); color: var(--ps-navy); padding: var(--ps-sp-2) var(--ps-sp-2); border-radius: var(--ps-r-sm); transition: background var(--ps-dur-snap), color var(--ps-dur-snap); white-space: nowrap; } .purple-sky-page .ps-nav__links a:hover { background: var(--ps-bg-tint); color: var(--ps-magenta); } .purple-sky-page .ps-nav__links a[aria-current="page"] { color: var(--ps-magenta); } .purple-sky-page .ps-nav__cta { padding: 0.62em 1.2em; font-size: var(--ps-fs-ui); } .purple-sky-page .ps-nav__toggle { display: none; } .purple-sky-page .ps-nav__burger { display: none; } @media (max-width: 1080px) { /* Brand + burger on one row. The header Register used to wrap onto a second line here; the floating Register button covers this now, so the bar stays a clean two-item row. */ .purple-sky-page .ps-nav__inner { flex-wrap: nowrap; } .purple-sky-page .ps-nav__cta { display: none; } .purple-sky-page .ps-nav__links { position: fixed; inset: 68px 0 auto 0; background: var(--ps-white); flex-direction: column; align-items: stretch; gap: 0; padding: var(--ps-sp-2) var(--ps-sp-4) var(--ps-sp-4); border-bottom: var(--ps-bw-hair) solid var(--ps-line); box-shadow: var(--ps-shadow); transform: translateY(-130%); transition: transform var(--ps-dur-menu) var(--ps-ease); } .purple-sky-page .ps-nav__links a { padding: var(--ps-sp-3) var(--ps-sp-2); border-bottom: var(--ps-bw-hair) solid var(--ps-line); } .purple-sky-page .ps-nav__toggle:checked ~ .ps-nav__links { transform: translateY(0); } /* 44x44 tap target, bars centred inside it. */ .purple-sky-page .ps-nav__burger { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--ps-sp-1); width: 44px; height: 44px; padding: 0; cursor: pointer; } .purple-sky-page .ps-nav__burger span { width: 24px; height: 2px; background: var(--ps-navy); border-radius: 2px; transition: var(--ps-dur-med) var(--ps-ease); } .purple-sky-page .ps-nav__toggle:checked ~ .ps-nav__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .purple-sky-page .ps-nav__toggle:checked ~ .ps-nav__burger span:nth-child(2) { opacity: 0; } .purple-sky-page .ps-nav__toggle:checked ~ .ps-nav__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } } /* ========================================================================== CF7 registration form theming ========================================================================== */ .purple-sky-page .ps-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ps-sp-4) var(--ps-sp-5); } .purple-sky-page .ps-field { display: flex; flex-direction: column; gap: var(--ps-sp-2); } .purple-sky-page .ps-field--wide { grid-column: 1 / -1; } .purple-sky-page .ps-field label { font-family: var(--ps-font-heading); font-size: var(--ps-fs-sm); font-weight: var(--ps-fw-semibold); color: var(--ps-navy); line-height: 1.35; } /* Short yes/no questions: label and choices share a row, aligned, so a wrapping label no longer pushes its pills out of line with the next question. */ .purple-sky-page .ps-field--inline { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ps-sp-2) var(--ps-sp-4); padding-top: var(--ps-sp-1); } .purple-sky-page .ps-field--inline > label { margin: 0; } .purple-sky-page .ps-field--check { padding-top: var(--ps-sp-2); } .purple-sky-page .ps-reg__form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-radio):not(.wpcf7-checkbox) { width: 100%; padding: 0.7em 0.9em; border: var(--ps-bw) solid var(--ps-line); border-radius: var(--ps-r-lg); font-family: var(--ps-font-body); font-size: var(--ps-fs-body); color: var(--ps-ink); background: var(--ps-white); transition: border-color var(--ps-dur-snap), box-shadow var(--ps-dur-snap); } .purple-sky-page .ps-reg__form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-radio):not(.wpcf7-checkbox):focus { outline: none; border-color: var(--ps-magenta); box-shadow: 0 0 0 3px rgba(var(--ps-magenta-rgb), 0.16); } /* Radios (early career, attended before, accommodation) render as selectable pills rather than raw dots, so the choices read as buttons. */ .purple-sky-page .ps-reg__form .wpcf7-radio { display: flex; flex-wrap: wrap; gap: var(--ps-sp-2); } .purple-sky-page .ps-reg__form .wpcf7-radio .wpcf7-list-item { margin: 0; } .purple-sky-page .ps-reg__form .wpcf7-radio .wpcf7-list-item label { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.55em 0.95em; border: var(--ps-bw) solid var(--ps-line); border-radius: var(--ps-r-pill); cursor: pointer; font-size: var(--ps-fs-ui); color: var(--ps-navy); transition: border-color var(--ps-dur-snap), background var(--ps-dur-snap), color var(--ps-dur-snap); } .purple-sky-page .ps-reg__form .wpcf7-radio .wpcf7-list-item label:hover { border-color: var(--ps-magenta); } .purple-sky-page .ps-reg__form .wpcf7-radio input[type="radio"] { accent-color: var(--ps-magenta); margin: 0; } .purple-sky-page .ps-reg__form .wpcf7-radio .wpcf7-list-item label:has(input:checked) { border-color: var(--ps-magenta); background: var(--ps-bg-tint); color: var(--ps-magenta); } .purple-sky-page .ps-reg__form select.wpcf7-form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236a6577' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8em center; padding-right: 2.4em; } .purple-sky-page .ps-reg__form textarea.wpcf7-form-control { min-height: 96px; resize: vertical; } /* "I have paid" checkbox. */ .purple-sky-page .ps-reg__form .wpcf7-checkbox .wpcf7-list-item { margin: 0; } .purple-sky-page .ps-reg__form .wpcf7-checkbox label { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--ps-font-heading); font-size: var(--ps-fs-ui); font-weight: var(--ps-fw-semibold); color: var(--ps-navy); cursor: pointer; } .purple-sky-page .ps-reg__form .wpcf7-checkbox input[type="checkbox"] { accent-color: var(--ps-magenta); width: 18px; height: 18px; flex-shrink: 0; margin: 0; } /* File input: the native "Choose file" button restyled to match. */ .purple-sky-page .ps-reg__form input[type="file"] { padding: 0.5em 0.6em; cursor: pointer; } .purple-sky-page .ps-reg__form input[type="file"]::file-selector-button { font-family: var(--ps-font-heading); font-weight: var(--ps-fw-semibold); font-size: var(--ps-fs-ui); color: var(--ps-navy); background: var(--ps-bg-tint); border: var(--ps-bw) solid var(--ps-line); border-radius: var(--ps-r-sm); padding: 0.5em 0.9em; margin-right: 0.8em; cursor: pointer; transition: border-color var(--ps-dur-snap), color var(--ps-dur-snap); } .purple-sky-page .ps-reg__form input[type="file"]::file-selector-button:hover { border-color: var(--ps-magenta); color: var(--ps-magenta); } .purple-sky-page .ps-form-submit { margin-top: var(--ps-sp-7); } .purple-sky-page .ps-reg__form .wpcf7-submit { width: 100%; background: var(--ps-navy); color: var(--ps-on-dark); border: 0; border-radius: var(--ps-r-pill); font-family: var(--ps-font-heading); font-weight: var(--ps-fw-semibold); font-size: var(--ps-fs-body); padding: 0.95em 1.6em; cursor: pointer; transition: transform var(--ps-dur-fast) var(--ps-ease), background var(--ps-dur); } .purple-sky-page .ps-reg__form .wpcf7-submit:hover { background: var(--ps-navy-deep); transform: translateY(-2px); } .purple-sky-page .ps-reg__form .wpcf7-submit:active { transform: scale(0.98); } .purple-sky-page .ps-reg__form .wpcf7-not-valid-tip { color: var(--ps-crimson); font-size: var(--ps-fs-sm); } .purple-sky-page .ps-reg__form .wpcf7-response-output { border-radius: var(--ps-r-lg); margin: var(--ps-sp-4) 0 0; padding: 0.8em 1em; font-family: var(--ps-font-heading); font-size: var(--ps-fs-ui); } @media (max-width: 560px) { .purple-sky-page .ps-form-grid { grid-template-columns: 1fr; } } /* ========================================================================== 1. HERO ========================================================================== */ .purple-sky-page .ps-hero { position: relative; min-height: 92vh; min-height: 92dvh; display: grid; align-items: center; color: var(--ps-on-dark); overflow: hidden; } /* The photo and the scrim are separated so Elementor can own background-image on this element: the client swaps the hero shot from the panel, the scrim stays ours. --ps-hero-img is still honoured for any non-Elementor use. */ .purple-sky-page .ps-hero__bg { position: absolute; inset: 0; z-index: 0; background-image: var(--ps-hero-img, none); background-size: cover; background-position: center 30%; } /* Slideshow layers sit inside .ps-hero__bg, under the scrim. One slide is simply always active (static); several cross-fade via the is-active class. */ .purple-sky-page .ps-hero__slides { position: absolute; inset: 0; z-index: 0; } .purple-sky-page .ps-hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center 30%; opacity: 0; transition: opacity 1.2s var(--ps-ease); } .purple-sky-page .ps-hero__slide.is-active { opacity: 1; } .purple-sky-page .ps-hero__bg::after { content: ""; position: absolute; inset: 0; /* Heavier than a photo would need: the hero images are light watercolours and a group shot, so the white headline needs a firmer scrim to stay legible. */ background-image: linear-gradient(180deg, rgba(var(--ps-navy-deep-rgb),0.62) 0%, rgba(var(--ps-navy-deep-rgb),0.5) 42%, rgba(var(--ps-plum-rgb),0.55) 80%, rgba(var(--ps-navy-deep-rgb),0.82) 100%); } .purple-sky-page .ps-hero__inner { position: relative; z-index: 1; width: min(100% - var(--ps-gutter), var(--ps-container)); margin-inline: auto; padding-block: clamp(5rem, 12vh, 8rem); } .purple-sky-page .ps-hero__badges { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: var(--ps-sp-4); margin-bottom: var(--ps-sp-6); max-width: 100%; } .purple-sky-page .ps-hero__badges img { height: 62px; width: auto; background: var(--ps-white); border-radius: var(--ps-r-xl); padding: var(--ps-sp-2) var(--ps-sp-3); box-shadow: var(--ps-shadow-badge); } .purple-sky-page .ps-hero__org { font-family: var(--ps-font-heading); font-size: var(--ps-fs-sm); letter-spacing: var(--ps-ls-org); color: rgba(var(--ps-white-rgb), 0.92); max-width: 22ch; } .purple-sky-page .ps-hero__script { font-family: var(--ps-font-script); font-size: var(--ps-fs-hero-script); color: var(--ps-on-dark); margin-bottom: -0.1em; text-shadow: 0 4px 30px rgba(var(--ps-navy-deep-rgb), 0.4); } .purple-sky-page .ps-hero__title { font-family: var(--ps-font-heading); font-weight: var(--ps-fw-black); font-size: var(--ps-fs-hero-title); letter-spacing: var(--ps-ls-display); line-height: var(--ps-lh-hero); text-transform: uppercase; color: var(--ps-on-dark); text-shadow: 0 6px 40px rgba(var(--ps-navy-deep-rgb), 0.5); overflow-wrap: break-word; max-width: 100%; } .purple-sky-page .ps-hero__meta { display: flex; flex-wrap: wrap; gap: var(--ps-sp-2) var(--ps-sp-6); margin: var(--ps-sp-6) 0 var(--ps-sp-8); font-family: var(--ps-font-heading); font-weight: var(--ps-fw-medium); } .purple-sky-page .ps-hero__meta span { display: inline-flex; align-items: center; gap: 0.5em; font-size: var(--ps-fs-meta); } .purple-sky-page .ps-hero__meta svg { width: 19px; height: 19px; stroke: var(--ps-pink); } .purple-sky-page .ps-hero__cta { display: flex; flex-wrap: wrap; gap: var(--ps-sp-4); } .purple-sky-page .ps-hero__scroll { position: absolute; bottom: 1.4rem; left: 50%; translate: -50% 0; z-index: 1; color: rgba(var(--ps-white-rgb), 0.8); animation: ps-float 2.4s var(--ps-ease) infinite; } /* As a UFC Link widget the class lands on the wrapper, which is what should be positioned and animated. The anchor inside carries the icon and nothing else. */ .purple-sky-page .ps-hero__scroll a { color: inherit; display: block; } .purple-sky-page .ps-hero__scroll svg { width: 26px; height: 26px; } @keyframes ps-float { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(8px);} } /* Elementor heading widgets put our class on the WRAPPER and nest the real heading inside it. Elementor then styles that inner element via '.elementor-widget-heading .elementor-heading-title' (0,2,0) using the kit globals, which beats anything the wrapper would pass down. So every wrapper we style has to hand its styling to the nested heading explicitly. Only wrappers that carry their own type styling belong here: a plain '.ps-speaker h2' must keep taking the base h1-h6 rule instead. */ .purple-sky-page .ps-hero__title .elementor-heading-title, .purple-sky-page .ps-hero__script .elementor-heading-title, .purple-sky-page .ps-hero__org .elementor-heading-title, .purple-sky-page .ps-kicker .elementor-heading-title, .purple-sky-page .ps-reg__date .elementor-heading-title, .purple-sky-page .ps-chair__name .elementor-heading-title, .purple-sky-page .ps-poem__title .elementor-heading-title, .purple-sky-page .ps-nav__brand .elementor-heading-title { color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; text-transform: inherit; text-shadow: inherit; margin: 0; } /* ========================================================================== 2. INTRODUCING SPEAKER (home beat) + About-Speaker page hero ========================================================================== */ .purple-sky-page .ps-speaker { background: var(--ps-surface); } .purple-sky-page .ps-speaker__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } /* The pink offset accent lives on the WRAPPER, not the image: the image carries a grayscale filter, and that filter would desaturate a box-shadow on the image itself to grey. The wrapper has no filter, so the colour stays true. */ .purple-sky-page .ps-speaker__photo { position: relative; border-radius: var(--ps-r-xs); box-shadow: -20px 20px 0 var(--ps-magenta); } .purple-sky-page .ps-speaker__photo img { width: 100%; border-radius: var(--ps-r-xs); filter: grayscale(100%) contrast(1.02); position: relative; z-index: 1; display: block; } .purple-sky-page .ps-speaker h2 { font-size: var(--ps-fs-h2-alt); margin: var(--ps-sp-2) 0 var(--ps-sp-1); } .purple-sky-page .ps-speaker .ps-btn--primary { color: var(--ps-on-dark); } .purple-sky-page .ps-speaker__cred { font-family: var(--ps-font-heading); color: var(--ps-magenta); font-weight: var(--ps-fw-semibold); margin-bottom: var(--ps-sp-6); } .purple-sky-page .ps-speaker__lead { font-size: var(--ps-fs-body-lg); color: var(--ps-body); max-width: 62ch; } .purple-sky-page .ps-speaker__stats { display: flex; gap: var(--ps-sp-9); margin: var(--ps-sp-7) 0; } .purple-sky-page .ps-speaker__stat b { font-family: var(--ps-font-heading); font-size: var(--ps-fs-stat); font-weight: var(--ps-fw-black); color: var(--ps-navy); display: block; line-height: var(--ps-lh-none); } .purple-sky-page .ps-speaker__stat span { font-size: var(--ps-fs-nav); color: var(--ps-muted); } /* ========================================================================== 2b. MESSAGE FROM THE ORGANISING CHAIR Mirror of .ps-speaker: copy leads, portrait trails, so the offset shadow flips to bottom-right and the two beats bookend each other. ========================================================================== */ .purple-sky-page .ps-chair { background: var(--ps-bg); } .purple-sky-page .ps-chair__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } /* Blue accent on the wrapper (mirrored to the right), off the filtered image. */ .purple-sky-page .ps-chair__photo { position: relative; border-radius: var(--ps-r-xs); box-shadow: 20px 20px 0 var(--ps-navy); } .purple-sky-page .ps-chair__photo img { width: 100%; border-radius: var(--ps-r-xs); filter: grayscale(100%) contrast(1.02); position: relative; z-index: 1; display: block; } .purple-sky-page .ps-chair h2 { font-size: var(--ps-fs-h2-alt); margin: var(--ps-sp-2) 0 var(--ps-sp-6); } .purple-sky-page .ps-chair__body p { font-size: var(--ps-fs-body); color: var(--ps-body); max-width: 64ch; margin: 0 0 var(--ps-sp-4); } .purple-sky-page .ps-chair__sign { margin-top: var(--ps-sp-7); } .purple-sky-page .ps-chair__sign img { width: auto; height: 58px; margin-bottom: var(--ps-sp-2); } .purple-sky-page .ps-chair__name { font-family: var(--ps-font-heading); font-size: var(--ps-fs-title); font-weight: var(--ps-fw-black); color: var(--ps-navy); line-height: var(--ps-lh-none); } .purple-sky-page .ps-chair__roles { list-style: none; padding: 0; margin: var(--ps-sp-3) 0 0; display: grid; gap: var(--ps-sp-1); } .purple-sky-page .ps-chair__roles li { font-size: var(--ps-fs-nav); color: var(--ps-muted); line-height: var(--ps-lh-cap-sm); } .purple-sky-page .ps-chair__roles b { font-weight: var(--ps-fw-semibold); color: var(--ps-body); } @media (max-width: 900px) { .purple-sky-page .ps-chair__grid { grid-template-columns: 1fr; } .purple-sky-page .ps-chair__photo { order: -1; } /* Smaller offset when stacked, so the shadow does not push past the edge. */ .purple-sky-page .ps-chair__photo { box-shadow: 12px 12px 0 var(--ps-navy); } .purple-sky-page .ps-speaker__photo { box-shadow: -12px 12px 0 var(--ps-magenta); } } /* ========================================================================== 3. ABOUT THE WORKSHOP ========================================================================== */ .purple-sky-page .ps-about { background: var(--ps-bg); } .purple-sky-page .ps-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .purple-sky-page .ps-about h2 { font-size: var(--ps-fs-h2); } .purple-sky-page .ps-about__lead { font-size: var(--ps-fs-lead-sm); color: var(--ps-body); } .purple-sky-page .ps-about a { color: var(--ps-magenta); text-decoration: underline; text-underline-offset: 2px; font-weight: var(--ps-fw-medium); } .purple-sky-page .ps-about a:hover { color: var(--ps-navy); } .purple-sky-page .ps-about__points { list-style: none; padding: 0; margin: var(--ps-sp-6) 0 0; display: grid; gap: var(--ps-sp-4); } .purple-sky-page .ps-about__points li { display: grid; grid-template-columns: auto 1fr; gap: var(--ps-sp-4); align-items: start; } .purple-sky-page .ps-about__points svg { width: 22px; height: 22px; stroke: var(--ps-magenta); margin-top: var(--ps-sp-1); } /* ========================================================================== 4. PLAN OF WORKSHOP (sessions) ========================================================================== */ .purple-sky-page .ps-plan { background: var(--ps-navy-deep); color: var(--ps-on-dark); } .purple-sky-page .ps-plan h2 { color: var(--ps-on-dark); font-size: var(--ps-fs-h2); } .purple-sky-page .ps-plan__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--ps-sp-8); flex-wrap: wrap; margin-bottom: var(--ps-sp-10); } .purple-sky-page .ps-plan__head p { color: rgba(var(--ps-white-rgb), 0.72); max-width: 46ch; margin: 0; } .purple-sky-page .ps-plan__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(var(--ps-white-rgb), 0.12); border: var(--ps-bw-hair) solid var(--ps-line-on-dark); border-radius: var(--ps-radius); overflow: hidden; } .purple-sky-page .ps-plan__item { background: var(--ps-navy-deep); padding: var(--ps-sp-7) var(--ps-sp-7); display: grid; grid-template-columns: auto 1fr; gap: var(--ps-sp-4); align-items: baseline; transition: background var(--ps-dur-med) var(--ps-ease); } .purple-sky-page .ps-plan__item:hover { background: var(--ps-navy-tint); } /* Day band: spans both columns and starts a new day inside the programme grid. grid-column 1/-1 makes it a full-width row, so the sessions after it flow onto the next line. Only rendered when a session carries a day heading. */ .purple-sky-page .ps-plan__day { grid-column: 1 / -1; background: var(--ps-navy-tint); color: var(--ps-pink); font-family: var(--ps-font-heading); font-size: var(--ps-fs-sm); font-weight: var(--ps-fw-bold); letter-spacing: var(--ps-ls-caps-md); text-transform: uppercase; padding: var(--ps-sp-4) var(--ps-sp-7); } .purple-sky-page .ps-plan__num { font-family: var(--ps-font-script); font-size: var(--ps-fs-num); color: var(--ps-pink); line-height: var(--ps-lh-num); } .purple-sky-page .ps-plan__item h3 { color: var(--ps-on-dark); font-size: var(--ps-fs-h5); font-weight: var(--ps-fw-semibold); letter-spacing: var(--ps-ls-snug); } /* An unnumbered row (a break or discussion): single column, no numeral, and set off from the numbered topics. */ .purple-sky-page .ps-plan__item--note { grid-column: 1 / -1; grid-template-columns: 1fr; text-align: center; } .purple-sky-page .ps-plan__item--note h3 { color: var(--ps-pink); font-style: italic; font-weight: var(--ps-fw-medium); } /* ========================================================================== 5. ABOUT THE PURPLE SKY BOOK ========================================================================== */ .purple-sky-page .ps-book { background: linear-gradient(160deg, var(--ps-bg-tint), var(--ps-bg)); overflow: hidden; } .purple-sky-page .ps-book__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; } .purple-sky-page .ps-book__cover { position: relative; } .purple-sky-page .ps-book__cover img { width: 100%; max-width: 340px; border-radius: var(--ps-r-sm); box-shadow: var(--ps-shadow-book); transform: rotate(-3deg); transition: transform var(--ps-dur-slow) var(--ps-ease); } .purple-sky-page .ps-book__cover img:hover { transform: rotate(0deg) translateY(-4px); } .purple-sky-page .ps-book h2 { font-size: var(--ps-fs-h2); } .purple-sky-page .ps-book__lead { font-size: var(--ps-fs-body-lg); color: var(--ps-body); max-width: 58ch; } .purple-sky-page .ps-book blockquote { font-family: var(--ps-font-script); font-size: var(--ps-fs-quote); color: var(--ps-mauve); margin: var(--ps-sp-6) 0; line-height: var(--ps-lh-snug); } /* ========================================================================== 6. COMMITTEE ========================================================================== */ .purple-sky-page .ps-comm { background: var(--ps-surface); } .purple-sky-page .ps-comm__head { text-align: center; max-width: 60ch; margin: 0 auto var(--ps-sp-12); } .purple-sky-page .ps-comm h2 { font-size: var(--ps-fs-h2); } .purple-sky-page .ps-comm__tier { margin-top: var(--ps-sp-10); } .purple-sky-page .ps-comm__tier > h3 { font-family: var(--ps-font-heading); font-size: var(--ps-fs-sm); letter-spacing: var(--ps-ls-caps-md); text-transform: uppercase; color: var(--ps-magenta); text-align: center; margin-bottom: var(--ps-sp-6); } /* Each tier scrolls rather than wraps. The 5-card tier used to break onto a second line and strand one card under the others. Native scroll-snap, so it swipes on touch and needs no JS. */ .purple-sky-page .ps-comm__row { display: flex; flex-wrap: nowrap; gap: var(--ps-sp-6); /* 'safe' matters: with plain centring, an overflowing row pushes its first card off the left edge where nothing can scroll back to it. */ justify-content: center; justify-content: safe center; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; overscroll-behavior-x: contain; /* overflow-x clips the other axis, so this leaves room for the card's -12px offset shadow and its -3px hover lift. */ padding: var(--ps-sp-1) var(--ps-sp-3) var(--ps-sp-4); /* Scrollbar hidden: the offset cards peeking at the edge already hint the row scrolls, and a visible bar under the cards read as clutter. Scroll itself stays live (overflow-x:auto above). */ scrollbar-width: none; -ms-overflow-style: none; } .purple-sky-page .ps-comm__row::-webkit-scrollbar { height: 0; width: 0; display: none; } .purple-sky-page .ps-comm__row:focus-visible { outline: 2px solid var(--ps-magenta); outline-offset: 2px; border-radius: var(--ps-r-sm); } /* Cards must not shrink to fit, or the row would never overflow and never scroll. */ .purple-sky-page .ps-comm__row .ps-person { flex: 0 0 220px; scroll-snap-align: center; } .purple-sky-page .ps-person { position: relative; flex: 0 1 220px; max-width: 220px; aspect-ratio: 3 / 4; border-radius: var(--ps-r-sm); isolation: isolate; transition: transform var(--ps-dur) var(--ps-ease); } .purple-sky-page .ps-person:hover { transform: translateY(-3px); } .purple-sky-page .ps-person::after { content: ""; position: absolute; z-index: -1; left: -12px; bottom: -12px; width: 100%; height: 100%; border-radius: var(--ps-r-sm); background: var(--ps-magenta); } .purple-sky-page .ps-person img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 12%; border-radius: var(--ps-r-sm); } .purple-sky-page .ps-person__cap { position: absolute; inset: auto 0 0 0; padding: var(--ps-sp-6) var(--ps-sp-4) var(--ps-sp-3); background: linear-gradient(0deg, rgba(var(--ps-navy-deep-rgb),0.96) 12%, rgba(var(--ps-navy-deep-rgb),0.6) 55%, transparent 100%); color: var(--ps-on-dark); border-radius: 0 0 var(--ps-r-sm) var(--ps-r-sm); } .purple-sky-page .ps-person__cap b { font-family: var(--ps-font-heading); font-weight: var(--ps-fw-bold); color: var(--ps-on-dark); font-size: var(--ps-fs-base); display: block; line-height: var(--ps-lh-cap); } .purple-sky-page .ps-person__cap span { font-size: var(--ps-fs-xs); color: rgba(var(--ps-white-rgb), 0.82); display: block; margin-top: var(--ps-sp-1); line-height: var(--ps-lh-cap-sm); } .purple-sky-page .ps-person__cap em { font-style: normal; color: var(--ps-pink); font-weight: var(--ps-fw-semibold); font-size: var(--ps-fs-xs); display: block; margin-top: var(--ps-sp-1); } /* Awaiting-photo tile: initials on navy, dim enough that the caption still reads. */ .purple-sky-page .ps-person__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--ps-navy); color: rgba(var(--ps-white-rgb), 0.32); font-family: var(--ps-font-heading); font-weight: var(--ps-fw-black); font-size: clamp(2rem, 5vw, 2.8rem); letter-spacing: 0.06em; border-radius: var(--ps-r-sm); } /* A tier with no photos shows each name in its own centred box. */ .purple-sky-page .ps-comm__names { list-style: none; padding: 0; margin: 0 auto; max-width: 72ch; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ps-sp-3); } .purple-sky-page .ps-comm__names li { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 64px; padding: var(--ps-sp-3) var(--ps-sp-6); background: var(--ps-white); border: var(--ps-bw-hair) solid var(--ps-line); border-radius: var(--ps-r-md, 12px); box-shadow: var(--ps-shadow-sm); font-family: var(--ps-font-heading); transition: transform var(--ps-dur-snap), box-shadow var(--ps-dur-snap); } .purple-sky-page .ps-comm__names li:hover { transform: translateY(-2px); box-shadow: var(--ps-shadow); } .purple-sky-page .ps-comm__names b { color: var(--ps-navy); font-weight: var(--ps-fw-semibold); font-size: var(--ps-fs-base); } .purple-sky-page .ps-comm__names span { display: block; color: var(--ps-body); font-size: var(--ps-fs-xs); font-weight: var(--ps-fw-regular); margin-top: 2px; } /* ========================================================================== 7. PREVIOUS YEARS - infinite marquee ========================================================================== */ .purple-sky-page .ps-marquee { background: var(--ps-bg); padding-block: var(--ps-section-y); } .purple-sky-page .ps-marquee__head { text-align: center; margin-bottom: var(--ps-sp-10); } .purple-sky-page .ps-marquee__head h2 { font-size: var(--ps-fs-h2-sm); } .purple-sky-page .ps-marquee__track { display: flex; gap: var(--ps-sp-6); width: max-content; animation: ps-scroll 34s linear infinite; } .purple-sky-page .ps-marquee:hover .ps-marquee__track { animation-play-state: paused; } .purple-sky-page .ps-marquee__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .purple-sky-page .ps-card { position: relative; width: 260px; flex: 0 0 auto; border-radius: var(--ps-radius); overflow: hidden; box-shadow: var(--ps-shadow-sm); aspect-ratio: 3/4; } .purple-sky-page .ps-card img { width: 100%; height: 100%; object-fit: cover; } .purple-sky-page .ps-card__tag { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--ps-sp-4); font-family: var(--ps-font-heading); font-weight: var(--ps-fw-semibold); color: var(--ps-on-dark); background: linear-gradient(0deg, rgba(var(--ps-navy-deep-rgb),0.85), transparent); } @keyframes ps-scroll { to { transform: translateX(-50%); } } /* ========================================================================== 8. REGISTRATION ========================================================================== */ .purple-sky-page .ps-reg { position: relative; background: var(--ps-navy); color: var(--ps-on-dark); overflow: hidden; } .purple-sky-page .ps-reg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 85% 10%, rgba(var(--ps-magenta-rgb),0.5), transparent 60%), radial-gradient(50% 80% at 10% 90%, rgba(var(--ps-mauve-rgb),0.4), transparent 55%); z-index: 0; } .purple-sky-page .ps-reg__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .purple-sky-page .ps-reg h2 { color: var(--ps-on-dark); font-size: var(--ps-fs-h2); } .purple-sky-page .ps-reg__date { font-family: var(--ps-font-script); font-size: var(--ps-fs-date); color: var(--ps-pink); line-height: var(--ps-lh-none); margin: var(--ps-sp-2) 0 var(--ps-sp-4); } .purple-sky-page .ps-reg__lead { color: rgba(var(--ps-white-rgb), 0.82); max-width: 42ch; } .purple-sky-page .ps-reg__fees { list-style: none; padding: 0; margin: var(--ps-sp-7) 0 0; display: grid; gap: var(--ps-sp-3); } .purple-sky-page .ps-reg__fees li { display: flex; justify-content: space-between; padding: var(--ps-sp-3) 0; border-bottom: var(--ps-bw-hair) solid var(--ps-line-on-dark-md); font-family: var(--ps-font-heading); } .purple-sky-page .ps-reg__fees b { color: var(--ps-pink); } /* Accommodation toggle: two pills that swap the price column and the info line. */ .purple-sky-page .ps-accom__toggle { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: var(--ps-sp-6); background: rgba(var(--ps-white-rgb), 0.06); border: var(--ps-bw-hair) solid var(--ps-line-on-dark); border-radius: var(--ps-r-pill); } .purple-sky-page .ps-accom__opt { border: 0; background: transparent; color: rgba(var(--ps-white-rgb), 0.72); font-family: var(--ps-font-heading); font-weight: var(--ps-fw-semibold); font-size: var(--ps-fs-ui); padding: 0.55em 1.1em; border-radius: var(--ps-r-pill); cursor: pointer; transition: background var(--ps-dur-snap), color var(--ps-dur-snap); } .purple-sky-page .ps-accom__opt:hover { color: var(--ps-on-dark); } .purple-sky-page .ps-accom__opt.is-active { background: var(--ps-pink); color: var(--ps-navy); } .purple-sky-page .ps-accom__opt:focus-visible { outline: 2px solid var(--ps-magenta); outline-offset: 2px; } .purple-sky-page .ps-accom__info { margin-top: var(--ps-sp-5); font-family: var(--ps-font-heading); font-size: var(--ps-fs-nav); color: rgba(var(--ps-white-rgb), 0.7); } .purple-sky-page .ps-accom__info b { color: var(--ps-pink); font-weight: var(--ps-fw-semibold); } @media (max-width: 480px) { .purple-sky-page .ps-accom__toggle { display: flex; width: 100%; } .purple-sky-page .ps-accom__opt { flex: 1; text-align: center; } } /* Intro header, centred above the payment band and the fee/form columns. */ .purple-sky-page .ps-reg__head { text-align: center; max-width: 62ch; margin: 0 auto clamp(2rem, 5vw, 3.2rem); } .purple-sky-page .ps-reg__head .ps-reg__lead { max-width: 48ch; margin-inline: auto; } /* Standalone payment section below Accommodation. Light background, full width, the bank card and QR recoloured for a light surface. */ .purple-sky-page .ps-pay { background: var(--ps-bg-tint); color: var(--ps-ink); } .purple-sky-page .ps-pay__head { text-align: center; margin: 0 auto clamp(1.6rem, 4vw, 2.6rem); } .purple-sky-page .ps-pay .ps-kicker { color: var(--ps-magenta); } /* Full-width two columns: bank details, then the centred QR. */ .purple-sky-page .ps-reg__pay { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } /* Bank card on a light surface. */ .purple-sky-page .ps-pay .ps-reg__bank { background: var(--ps-white); border-color: var(--ps-line); box-shadow: var(--ps-shadow-sm); } .purple-sky-page .ps-pay .ps-reg__bank h4, .purple-sky-page .ps-pay .ps-reg__whatsapp h4 { color: var(--ps-magenta); } .purple-sky-page .ps-pay .ps-defs dt { color: rgba(var(--ps-navy-rgb), 0.55); } .purple-sky-page .ps-pay .ps-defs dd { color: var(--ps-navy); } .purple-sky-page .ps-pay .ps-reg__bank-note, .purple-sky-page .ps-pay .ps-reg__whatsapp-note { color: rgba(var(--ps-navy-rgb), 0.6); } /* The QR sits in its own white card, matching the bank card, and centred. */ .purple-sky-page .ps-pay .ps-reg__whatsapp { margin-top: 0; padding: var(--ps-sp-6) var(--ps-sp-7); background: var(--ps-white); border: var(--ps-bw-hair) solid var(--ps-line); border-radius: var(--ps-r-lg, 14px); box-shadow: var(--ps-shadow-sm); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; } .purple-sky-page .ps-pay .ps-reg__whatsapp .elementor-widget-image { width: fit-content; margin-inline: auto; } .purple-sky-page .ps-pay .ps-reg__whatsapp img { width: 220px; } .purple-sky-page .ps-pay .ps-reg__whatsapp-note { margin: var(--ps-sp-4) auto 0; } /* Cards line up to equal height. */ .purple-sky-page .ps-pay .ps-reg__pay { align-items: stretch; } .purple-sky-page .ps-reg__pay .ps-reg__bank, .purple-sky-page .ps-reg__pay .ps-reg__whatsapp { margin-top: 0; } .purple-sky-page .ps-reg__right { display: flex; flex-direction: column; gap: clamp(1.6rem, 4vw, 2.6rem); } .purple-sky-page .ps-reg__form { background: rgba(var(--ps-white-rgb), 0.97); border-radius: var(--ps-radius-lg); padding: clamp(1.6rem, 3vw, 2.4rem); box-shadow: var(--ps-shadow); } /* Conditional payment-screenshot field: hidden until the "paid" box is ticked. */ .purple-sky-page .ps-reg__form .ps-field--proof { display: none; } .purple-sky-page .ps-reg__form .ps-field--proof.is-visible { display: flex; } @media (max-width: 560px) { .purple-sky-page .ps-reg__pay { grid-template-columns: 1fr; } } .purple-sky-page .ps-reg__form h3 { color: var(--ps-navy); font-size: var(--ps-fs-title); margin-bottom: var(--ps-sp-6); } /* ========================================================================== BANK DETAILS (registration) Label / value pairs from UFC List (Details layout), shown as a card in the registration column so people can pay before completing the form. ========================================================================== */ .purple-sky-page .ps-reg__bank { margin-top: var(--ps-sp-8); padding: var(--ps-sp-6) var(--ps-sp-7); background: rgba(var(--ps-white-rgb), 0.05); border: var(--ps-bw-hair) solid var(--ps-line-on-dark); border-radius: var(--ps-r-lg, 14px); } .purple-sky-page .ps-reg__bank h4 { font-family: var(--ps-font-heading); font-size: var(--ps-fs-sm); font-weight: var(--ps-fw-bold); letter-spacing: var(--ps-ls-caps-md); text-transform: uppercase; color: var(--ps-pink); margin-bottom: var(--ps-sp-4); } .purple-sky-page .ps-defs { display: grid; gap: var(--ps-sp-2); } .purple-sky-page .ps-defs__row { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--ps-sp-2) var(--ps-sp-4); align-items: baseline; } .purple-sky-page .ps-defs dt { font-family: var(--ps-font-heading); font-size: var(--ps-fs-nav); font-weight: var(--ps-fw-medium); color: rgba(var(--ps-white-rgb), 0.6); } .purple-sky-page .ps-defs dd { margin: 0; font-weight: var(--ps-fw-semibold); color: var(--ps-on-dark); overflow-wrap: anywhere; } .purple-sky-page .ps-reg__bank .ps-reg__bank-note { margin-top: var(--ps-sp-5); font-size: var(--ps-fs-nav); color: rgba(var(--ps-white-rgb), 0.6); } /* WhatsApp group QR: the code sits on its own white chip so it scans cleanly against the navy section. */ .purple-sky-page .ps-reg__whatsapp { margin-top: var(--ps-sp-8); } .purple-sky-page .ps-reg__whatsapp h4 { font-family: var(--ps-font-heading); font-size: var(--ps-fs-sm); font-weight: var(--ps-fw-bold); letter-spacing: var(--ps-ls-caps-md); text-transform: uppercase; color: var(--ps-pink); margin-bottom: var(--ps-sp-4); } .purple-sky-page .ps-reg__whatsapp .elementor-widget-image { width: fit-content; } .purple-sky-page .ps-reg__whatsapp img { display: block; width: 180px; height: auto; background: var(--ps-white); border-radius: var(--ps-r-sm); padding: var(--ps-sp-3); } .purple-sky-page .ps-reg__whatsapp-note { margin-top: var(--ps-sp-4); font-size: var(--ps-fs-nav); color: rgba(var(--ps-white-rgb), 0.6); max-width: 34ch; } /* Footer social row (LinkedIn). */ .purple-sky-page .ps-footer__social { display: flex; gap: var(--ps-sp-3); margin-top: var(--ps-sp-5); } .purple-sky-page .ps-footer .ps-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--ps-r-sm); color: rgba(var(--ps-white-rgb), 0.9); background: rgba(var(--ps-white-rgb), 0.07); border: var(--ps-bw-hair) solid var(--ps-line-on-dark); transition: color var(--ps-dur-snap), background var(--ps-dur-snap), border-color var(--ps-dur-snap); } .purple-sky-page .ps-footer__social a:hover { color: var(--ps-white); background: var(--ps-magenta); border-color: var(--ps-magenta); } .purple-sky-page .ps-footer__social svg { width: 22px; height: 22px; } /* Collapsible footer columns on mobile: the heading toggles its links. */ @media (max-width: 700px) { .purple-sky-page .ps-footer__col > .elementor-widget-heading { cursor: pointer; position: relative; } .purple-sky-page .ps-footer__col > .elementor-widget-heading h4 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; padding: var(--ps-sp-3) 0; border-bottom: var(--ps-bw-hair) solid var(--ps-line-on-dark); } /* Chevron drawn with a small caret that flips when open. */ .purple-sky-page .ps-footer__col > .elementor-widget-heading h4::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--ps-dur-snap); opacity: 0.7; margin-top: -4px; } .purple-sky-page .ps-footer__col.is-open > .elementor-widget-heading h4::after { transform: rotate(-135deg); margin-top: 2px; } .purple-sky-page .ps-footer__col > .elementor-element:not(.elementor-widget-heading) { display: none; } .purple-sky-page .ps-footer__col.is-open > .elementor-element:not(.elementor-widget-heading) { display: block; padding-top: var(--ps-sp-2); } } /* "Visit the hotel" link in the accommodation section. */ .purple-sky-page .ps-stay__link { display: inline-block; margin-top: var(--ps-sp-4); } .purple-sky-page .ps-stay__link a { display: inline-flex; align-items: center; gap: 0.4em; text-decoration: none; font-family: var(--ps-font-heading); font-weight: var(--ps-fw-semibold); color: var(--ps-magenta); } .purple-sky-page .ps-stay__link a:hover { color: var(--ps-navy); } .purple-sky-page .ps-stay__link svg { width: 18px; height: 18px; } /* Accommodation and Venue: a tall portrait photo with the text column sticking alongside as the section scrolls. Accommodation has the photo left / text right; Venue mirrors it, photo right / text left. */ .purple-sky-page .ps-stay__media img, .purple-sky-page .ps-venue__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--ps-radius); box-shadow: var(--ps-shadow); display: block; } .purple-sky-page .ps-stay .ps-about__grid > :last-child { position: sticky; top: 96px; align-self: start; } .purple-sky-page .ps-venue .ps-about__grid > :first-child { position: sticky; top: 96px; align-self: start; } @media (max-width: 900px) { .purple-sky-page .ps-stay .ps-about__grid > :last-child, .purple-sky-page .ps-venue .ps-about__grid > :first-child { position: static; } /* Photo above the text when stacked. */ .purple-sky-page .ps-venue__media-col { order: -1; } } @media (max-width: 480px) { .purple-sky-page .ps-defs__row { grid-template-columns: 1fr; gap: 2px; } .purple-sky-page .ps-defs dt { font-size: var(--ps-fs-xs); } } /* ========================================================================== POETRY PAGE Two dialogue poems by Salman Akhtar. A quiet, readable single column so the verse is the whole point of the page. ========================================================================== */ /* Navy hero band for the page header, matching the sub-page heroes. */ .purple-sky-page .ps-poetry-hero { position: relative; background: var(--ps-navy-deep); color: var(--ps-on-dark); padding-block: clamp(4rem, 9vw, 7rem); overflow: hidden; text-align: center; } .purple-sky-page .ps-poetry-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(75% 100% at 50% 0%, rgba(var(--ps-magenta-rgb), 0.4), transparent 60%); } .purple-sky-page .ps-poetry-hero > .ps-wrap { position: relative; z-index: 1; max-width: 60ch; } .purple-sky-page .ps-poetry-hero .ps-kicker { color: var(--ps-pink); } .purple-sky-page .ps-poetry-hero h1 { color: var(--ps-on-dark); font-size: var(--ps-fs-h1); } .purple-sky-page .ps-poetry-hero p { color: rgba(var(--ps-white-rgb), 0.82); font-family: var(--ps-font-heading); margin-top: var(--ps-sp-3); } /* Poems as cards on a soft tint, each opened by an ornament. */ .purple-sky-page .ps-poetry { background: var(--ps-bg-tint); } .purple-sky-page .ps-poem { background: var(--ps-white); border-radius: var(--ps-r-xl, 22px); border-top: 4px solid var(--ps-magenta); box-shadow: var(--ps-shadow); padding: clamp(2rem, 4vw, 3.4rem) clamp(1.6rem, 4vw, 3rem); max-width: 62ch; margin: 0 auto; } .purple-sky-page .ps-poem + .ps-poem { margin-top: clamp(2rem, 5vw, 3.5rem); } .purple-sky-page .ps-poem::before { content: ""; display: block; width: 132px; height: 14px; margin: 0 auto var(--ps-sp-6); background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='14'%3E%3Cline x1='4' y1='7' x2='54' y2='7' stroke='%23DD6C95' stroke-width='1'/%3E%3Cpolygon points='66,2 72,7 66,12 60,7' fill='%23DD6C95'/%3E%3Cline x1='78' y1='7' x2='128' y2='7' stroke='%23DD6C95' stroke-width='1'/%3E%3C/svg%3E"); } /* Title as flowing script; line-height 1.25 gives the ascenders/descenders room. */ .purple-sky-page .ps-poem__title { font-family: var(--ps-font-script); font-weight: var(--ps-fw-regular); font-size: clamp(2.6rem, 5.5vw, 3.8rem); line-height: 1.25; color: var(--ps-navy); text-align: center; margin-bottom: var(--ps-sp-6); } .purple-sky-page .ps-poem__body p { color: var(--ps-body); font-size: var(--ps-fs-body-lg); line-height: 1.9; margin: 0 0 var(--ps-sp-6); } .purple-sky-page .ps-poem__body p:last-child { margin-bottom: 0; } /* Speaker turns become quiet stage-direction labels. */ .purple-sky-page .ps-poem__body b { display: inline; font-family: var(--ps-font-heading); font-weight: var(--ps-fw-semibold); font-size: 0.72em; letter-spacing: var(--ps-ls-caps); text-transform: uppercase; color: var(--ps-magenta); } /* Attribution as a signature. */ .purple-sky-page .ps-poem__by { margin-top: var(--ps-sp-7); font-family: var(--ps-font-script); font-weight: var(--ps-fw-regular); font-size: clamp(1.5rem, 3vw, 1.9rem); color: var(--ps-pink); text-align: right; line-height: 1.3; } /* Two poem cards side by side on tablet and desktop; one column below 768px. */ @media (min-width: 768px) { .purple-sky-page .ps-poetry > .ps-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem, 4vw, 3rem); align-items: start; } .purple-sky-page .ps-poem { max-width: none; margin: 0; } .purple-sky-page .ps-poem + .ps-poem { margin-top: 0; } } /* ========================================================================== AGENDA PAGE (event-list: date badge + timeline) ========================================================================== */ .purple-sky-page .ps-agenda { background: var(--ps-bg-tint); } .purple-sky-page .ps-agenda__head { max-width: 860px; margin: 0 auto clamp(2.5rem, 6vw, 4rem); } .purple-sky-page .ps-agenda__head .ps-reg__lead, .purple-sky-page .ps-agenda__head p { color: var(--ps-body); } .purple-sky-page .ps-agenda__list { display: flex; flex-direction: column; gap: clamp(2.5rem, 6vw, 4rem); max-width: 860px; margin: 0 auto; } .purple-sky-page .ps-agenda__day { display: grid; grid-template-columns: 96px 1fr; gap: var(--ps-sp-7); align-items: start; } /* Date badge: a navy tile with a pink month, connected to its cards by a line. */ .purple-sky-page .ps-agenda__badge { position: sticky; top: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: var(--ps-r-lg, 14px); background: linear-gradient(160deg, var(--ps-navy), var(--ps-navy-deep)); color: var(--ps-on-dark); box-shadow: 0 14px 30px -12px rgba(var(--ps-navy-rgb), 0.5); } .purple-sky-page .ps-agenda__d { font-family: var(--ps-font-heading); font-size: 2.6rem; font-weight: var(--ps-fw-black); line-height: 1; } .purple-sky-page .ps-agenda__m { font-size: var(--ps-fs-xs); font-weight: var(--ps-fw-bold); letter-spacing: var(--ps-ls-caps-lg); text-transform: uppercase; color: var(--ps-pink); margin-top: 4px; } .purple-sky-page .ps-agenda__body { padding-top: var(--ps-sp-2); } .purple-sky-page .ps-agenda__dayname { font-family: var(--ps-font-heading); font-size: var(--ps-fs-sm); font-weight: var(--ps-fw-bold); letter-spacing: var(--ps-ls-caps-md); text-transform: uppercase; color: var(--ps-magenta); margin-bottom: var(--ps-sp-5); } .purple-sky-page .ps-agenda__items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--ps-sp-4); } /* Each session is a card with a pink accent bar and a script numeral. */ .purple-sky-page .ps-agenda__item { display: grid; grid-template-columns: 2.4rem 1fr; gap: var(--ps-sp-4); align-items: center; background: var(--ps-white); border: var(--ps-bw-hair) solid var(--ps-line); border-left: 4px solid var(--ps-magenta); border-radius: var(--ps-r-lg, 14px); padding: var(--ps-sp-5) var(--ps-sp-6); box-shadow: var(--ps-shadow-sm); transition: transform var(--ps-dur) var(--ps-ease), box-shadow var(--ps-dur) var(--ps-ease); } .purple-sky-page .ps-agenda__item:hover { transform: translateX(5px); box-shadow: var(--ps-shadow); } .purple-sky-page .ps-agenda__num { font-family: var(--ps-font-script); font-size: 2.4rem; color: var(--ps-pink); line-height: 1; text-align: center; } .purple-sky-page .ps-agenda__text { font-family: var(--ps-font-heading); font-size: var(--ps-fs-h5); font-weight: var(--ps-fw-semibold); color: var(--ps-navy); letter-spacing: var(--ps-ls-snug); } .purple-sky-page .ps-agenda__item--note { grid-template-columns: 1fr; justify-items: center; text-align: center; background: transparent; border: 0; border-left: 4px dashed rgba(var(--ps-magenta-rgb), 0.4); box-shadow: none; padding: var(--ps-sp-3) var(--ps-sp-6); } .purple-sky-page .ps-agenda__item--note .ps-agenda__text { font-style: italic; font-weight: var(--ps-fw-medium); color: var(--ps-magenta); } @media (max-width: 560px) { .purple-sky-page .ps-agenda__day { grid-template-columns: 68px 1fr; gap: var(--ps-sp-4); } .purple-sky-page .ps-agenda__badge { position: static; } .purple-sky-page .ps-agenda__d { font-size: 1.9rem; } .purple-sky-page .ps-agenda__item { padding: var(--ps-sp-4); } } /* ========================================================================== FLOATING REGISTER BUTTON Visible by default; the enqueued JS only ever hides it, so a blocked or failed script still leaves a working button. Sits below the sticky nav so an open mobile menu is never covered. ========================================================================== */ .purple-sky-page .ps-fab { position: fixed; z-index: calc(var(--ps-z-nav) - 1); right: max(var(--ps-sp-6), env(safe-area-inset-right)); bottom: max(var(--ps-sp-6), env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: var(--ps-sp-2); padding: 0.85em 1.4em; min-height: 48px; box-sizing: border-box; background: var(--ps-navy); color: var(--ps-on-dark); font-family: var(--ps-font-heading); font-weight: var(--ps-fw-semibold); font-size: var(--ps-fs-ui); text-decoration: none; white-space: nowrap; border-radius: var(--ps-r-pill); box-shadow: 0 12px 34px -10px rgba(var(--ps-navy-rgb), 0.55); transition: transform var(--ps-dur) var(--ps-ease), opacity var(--ps-dur) var(--ps-ease), background var(--ps-dur) var(--ps-ease); } .purple-sky-page .ps-fab svg { stroke: var(--ps-pink); flex-shrink: 0; } .purple-sky-page .ps-fab:hover { background: var(--ps-navy-deep); transform: translateY(-2px); } .purple-sky-page .ps-fab:focus-visible { outline: 2px solid var(--ps-magenta); outline-offset: 3px; } /* Slides down and out of the way; pointer-events off so it never blocks a tap on the content beneath it while hidden. */ .purple-sky-page .ps-fab--hidden { opacity: 0; transform: translateY(140%); pointer-events: none; } /* Phone: hug the corner a little tighter and grow the label to a comfortable thumb target. Safe-area insets keep it clear of the home indicator. */ @media (max-width: 560px) { .purple-sky-page .ps-fab { right: max(var(--ps-sp-4), env(safe-area-inset-right)); bottom: max(var(--ps-sp-4), env(safe-area-inset-bottom)); padding: 0.9em 1.35em; font-size: var(--ps-fs-body); } } /* ========================================================================== FOOTER ========================================================================== */ .purple-sky-page .ps-footer { background: var(--ps-navy-deep); color: rgba(var(--ps-white-rgb), 0.72); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; } .purple-sky-page .ps-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--ps-sp-10); } /* The Policies column only exists once a policy has been written. Until then the widget renders nothing, so the column is dropped and the grid stays at three, rather than leaving a blank track where a fourth column would be. */ .purple-sky-page .ps-footer__policies:not(:has(a)) { display: none; } .purple-sky-page .ps-footer__grid:has(.ps-footer__policies a) { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .purple-sky-page .ps-footer__brand .ps-script { color: var(--ps-on-dark); font-size: var(--ps-fs-script-sm); } .purple-sky-page .ps-footer h4 { color: var(--ps-on-dark); font-family: var(--ps-font-heading); font-size: var(--ps-fs-sm); letter-spacing: var(--ps-ls-caps); text-transform: uppercase; margin-bottom: var(--ps-sp-4); } .purple-sky-page .ps-footer a { color: rgba(var(--ps-white-rgb), 0.72); display: block; padding: var(--ps-sp-1) 0; transition: color var(--ps-dur-snap); } .purple-sky-page .ps-footer a:hover { color: var(--ps-pink); } .purple-sky-page .ps-footer__logos { display: flex; gap: var(--ps-sp-4); margin-top: var(--ps-sp-4); } /* width:auto keeps the wordmark's aspect ratio; Elementor otherwise forces the image to 100% width and the logo stretches. */ .purple-sky-page .ps-footer__logos img { height: 54px; width: auto; max-width: none; background: var(--ps-white); border-radius: var(--ps-r-sm); padding: var(--ps-sp-2) var(--ps-sp-3); } .purple-sky-page .ps-footer__bottom { border-top: var(--ps-bw-hair) solid var(--ps-line-on-dark); margin-top: var(--ps-sp-10); padding-top: var(--ps-sp-6); font-size: var(--ps-fs-nav); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--ps-sp-2); } /* The blurb and the two bottom lines are Text Editor widgets now, so the

Elementor wraps them in has to give up its default margins. The measure sits on the

, not the widget: Elementor's '.e-con > .elementor-widget { max-width: 100% }' ties any wrapper rule we write here and wins on load order. The

is out of that selector's reach. */ .purple-sky-page .ps-footer__about { margin-top: var(--ps-sp-2); } .purple-sky-page .ps-footer__about p { margin: 0; max-width: 32ch; } .purple-sky-page .ps-footer__bottom p { margin: 0; } /* ========================================================================== ABOUT-SPEAKER PAGE (decorated page-3 bio) ========================================================================== */ .purple-sky-page .ps-bio { background: var(--ps-bg); } .purple-sky-page .ps-bio__hero { position: relative; background: var(--ps-navy-deep); color: var(--ps-on-dark); padding-block: clamp(4rem, 9vw, 7rem); overflow: hidden; } .purple-sky-page .ps-bio__hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 90% at 80% 0%, rgba(var(--ps-magenta-rgb),0.4), transparent 55%); } .purple-sky-page .ps-bio__hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .purple-sky-page .ps-bio__hero img { width: 100%; border-radius: var(--ps-radius-lg); filter: grayscale(100%); box-shadow: var(--ps-shadow); } .purple-sky-page .ps-bio__hero .ps-script { color: var(--ps-pink); font-size: var(--ps-fs-script); } .purple-sky-page .ps-bio__hero h1 { color: var(--ps-on-dark); font-size: var(--ps-fs-h1); text-transform: uppercase; letter-spacing: var(--ps-ls-display); } .purple-sky-page .ps-bio__hero p { color: rgba(var(--ps-white-rgb), 0.82); font-family: var(--ps-font-heading); margin-top: var(--ps-sp-3); } .purple-sky-page .ps-bio__body { width: min(100% - var(--ps-gutter), var(--ps-bio-w)); margin: 0 auto; padding-block: var(--ps-section-y); font-size: var(--ps-fs-body-lg); color: var(--ps-body); } .purple-sky-page .ps-bio__body p { margin-bottom: var(--ps-sp-6); } .purple-sky-page .ps-bio__body .ps-lead { font-size: var(--ps-fs-lead); color: var(--ps-navy); font-family: var(--ps-font-heading); font-weight: var(--ps-fw-medium); line-height: var(--ps-lh-lead); } .purple-sky-page .ps-bio__pullquote { font-family: var(--ps-font-script); font-size: var(--ps-fs-quote-fluid); color: var(--ps-mauve); text-align: center; margin: var(--ps-sp-10) 0; line-height: var(--ps-lh-snug); } .purple-sky-page .ps-bio__books { background: var(--ps-surface); border: var(--ps-bw-hair) solid var(--ps-line); border-radius: var(--ps-radius-lg); padding: clamp(1.6rem, 3vw, 2.4rem); margin: var(--ps-sp-8) 0; } .purple-sky-page .ps-bio__books h3 { font-size: var(--ps-fs-title-sm); margin-bottom: var(--ps-sp-4); } .purple-sky-page .ps-bio__books ul { columns: 2; column-gap: var(--ps-sp-8); margin: 0; padding-left: var(--ps-sp-4); } .purple-sky-page .ps-bio__books li { margin-bottom: var(--ps-sp-2); break-inside: avoid; } .purple-sky-page .ps-bio__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ps-sp-4); margin: var(--ps-sp-10) 0; } .purple-sky-page .ps-bio__stat { text-align: center; padding: var(--ps-sp-6) var(--ps-sp-3); background: var(--ps-surface); border: var(--ps-bw-hair) solid var(--ps-line); border-radius: var(--ps-radius); } .purple-sky-page .ps-bio__stat b { font-family: var(--ps-font-heading); font-size: var(--ps-fs-stat); font-weight: var(--ps-fw-black); color: var(--ps-navy); display: block; } .purple-sky-page .ps-bio__stat span { font-size: var(--ps-fs-sm); color: var(--ps-muted); } /* ========================================================================== SUGGESTED BY SPEAKER (reading lists 10/10/10) ========================================================================== */ .purple-sky-page .ps-read { background: var(--ps-bg); } .purple-sky-page .ps-read__intro { max-width: 60ch; margin: 0 auto var(--ps-sp-13); text-align: center; color: var(--ps-body); font-size: var(--ps-fs-body-lg); } .purple-sky-page .ps-read__group { margin-bottom: clamp(2.6rem, 5vw, 4rem); } .purple-sky-page .ps-read__group-head { display: flex; align-items: center; gap: var(--ps-sp-4); padding-bottom: var(--ps-sp-4); margin-bottom: var(--ps-sp-6); border-bottom: var(--ps-bw-thick) solid var(--ps-line); } .purple-sky-page .ps-read__group-head svg { width: 26px; height: 26px; stroke: var(--ps-magenta); flex: 0 0 auto; } .purple-sky-page .ps-read__group-head h2 { font-size: var(--ps-fs-h3); } .purple-sky-page .ps-read__badge { margin-left: auto; font-family: var(--ps-font-heading); font-weight: var(--ps-fw-bold); font-size: var(--ps-fs-sm); letter-spacing: var(--ps-ls-wide); text-transform: uppercase; color: var(--ps-mauve); background: var(--ps-bg-tint); border: var(--ps-bw-hair) solid var(--ps-line); padding: 0.35em 0.8em; border-radius: var(--ps-r-pill); } .purple-sky-page .ps-read__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--ps-sp-3); counter-reset: ps-read; } .purple-sky-page .ps-read__item { display: grid; grid-template-columns: auto 1fr; gap: var(--ps-sp-4); align-items: start; padding: var(--ps-sp-4) var(--ps-sp-4); background: var(--ps-surface); border: var(--ps-bw-hair) solid var(--ps-line); border-radius: var(--ps-r-xl); transition: transform var(--ps-dur-snap) var(--ps-ease), box-shadow var(--ps-dur-snap), border-color var(--ps-dur-snap); } .purple-sky-page .ps-read__item:hover { transform: translateY(-2px); box-shadow: var(--ps-shadow-sm); border-color: var(--ps-mauve); } .purple-sky-page .ps-read__item::before { counter-increment: ps-read; content: counter(ps-read); font-family: var(--ps-font-heading); font-weight: var(--ps-fw-black); font-size: var(--ps-fs-body); color: var(--ps-on-dark); background: var(--ps-navy); width: 2em; height: 2em; display: grid; place-items: center; border-radius: var(--ps-r-sm); flex: 0 0 auto; } .purple-sky-page .ps-read__ref { font-size: var(--ps-fs-base); line-height: var(--ps-lh-copy); color: var(--ps-body); } .purple-sky-page .ps-read__ref b { color: var(--ps-navy); font-weight: var(--ps-fw-bold); } .purple-sky-page .ps-read__ref em { color: var(--ps-mauve); font-style: italic; } @media (max-width: 760px) { .purple-sky-page .ps-read__list { grid-template-columns: 1fr; } } /* ========================================================================== GALLERY (Past Conferences & Gallery) + lightbox ========================================================================== */ .purple-sky-page .ps-gallery { display: grid; gap: clamp(2.6rem, 5vw, 4.5rem); } .purple-sky-page .ps-gallery__group { } .purple-sky-page .ps-gallery__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ps-sp-5); flex-wrap: wrap; padding-bottom: var(--ps-sp-4); margin-bottom: var(--ps-sp-6); border-bottom: var(--ps-bw-thick) solid var(--ps-line); } .purple-sky-page .ps-gallery__head h2 { font-size: var(--ps-fs-h3); } .purple-sky-page .ps-gallery__head p { margin: var(--ps-sp-1) 0 0; color: var(--ps-muted); font-family: var(--ps-font-heading); font-size: var(--ps-fs-base); } .purple-sky-page .ps-gallery__count { font-family: var(--ps-font-heading); font-weight: var(--ps-fw-bold); font-size: var(--ps-fs-sm); letter-spacing: var(--ps-ls-wide); text-transform: uppercase; color: var(--ps-mauve); background: var(--ps-bg-tint); border: var(--ps-bw-hair) solid var(--ps-line); padding: 0.35em 0.8em; border-radius: var(--ps-r-pill); white-space: nowrap; } .purple-sky-page .ps-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--ps-sp-4); } .purple-sky-page .ps-gallery__item { display: block; position: relative; aspect-ratio: 4 / 3; border-radius: var(--ps-r-xl); overflow: hidden; background: var(--ps-bg-tint); box-shadow: var(--ps-shadow-sm); cursor: zoom-in; } .purple-sky-page .ps-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ps-dur-slow) var(--ps-ease); } .purple-sky-page .ps-gallery__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(var(--ps-navy-deep-rgb),0.22), transparent 45%); opacity: 0; transition: opacity var(--ps-dur-med) var(--ps-ease); } .purple-sky-page .ps-gallery__item:hover img { transform: scale(1.06); } .purple-sky-page .ps-gallery__item:hover::after { opacity: 1; } .purple-sky-page .ps-gallery__empty { color: var(--ps-muted); font-family: var(--ps-font-heading); } .purple-sky-page .ps-lb { position: fixed; inset: 0; z-index: var(--ps-z-lb); display: none; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); background: rgba(var(--ps-scrim-rgb), 0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .purple-sky-page .ps-lb.is-open { display: flex; } .purple-sky-page .ps-lb__img { max-width: min(100%, 1100px); max-height: 88vh; border-radius: var(--ps-r-md); box-shadow: var(--ps-shadow-lb); } .purple-sky-page .ps-lb__close, .purple-sky-page .ps-lb__nav { position: absolute; background: rgba(var(--ps-white-rgb), 0.12); color: var(--ps-on-dark); border: var(--ps-bw-hair) solid var(--ps-line-on-dark-lg); cursor: pointer; display: grid; place-items: center; transition: background var(--ps-dur-snap), transform var(--ps-dur-fast) var(--ps-ease); } .purple-sky-page .ps-lb__close { top: 1.1rem; right: 1.1rem; width: 44px; height: 44px; border-radius: var(--ps-r-circle); font-size: 1.5rem; line-height: var(--ps-lh-none); } .purple-sky-page .ps-lb__nav { top: 50%; translate: 0 -50%; width: 52px; height: 52px; border-radius: var(--ps-r-circle); font-size: 2rem; line-height: var(--ps-lh-none); } .purple-sky-page .ps-lb__prev { left: clamp(0.5rem, 3vw, 2rem); } .purple-sky-page .ps-lb__next { right: clamp(0.5rem, 3vw, 2rem); } .purple-sky-page .ps-lb__close:hover, .purple-sky-page .ps-lb__nav:hover { background: rgba(var(--ps-white-rgb), 0.28); } .purple-sky-page .ps-lb__nav:active, .purple-sky-page .ps-lb__close:active { transform: scale(0.94); } @media (max-width: 560px) { .purple-sky-page .ps-lb__nav { width: 42px; height: 42px; font-size: 1.5rem; } } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 900px) { .purple-sky-page .ps-speaker__grid, .purple-sky-page .ps-about__grid, .purple-sky-page .ps-book__grid, .purple-sky-page .ps-reg__grid, .purple-sky-page .ps-bio__hero-grid, .purple-sky-page .ps-footer__grid { grid-template-columns: 1fr; } .purple-sky-page .ps-plan__list { grid-template-columns: 1fr; } .purple-sky-page .ps-bio__stats { grid-template-columns: repeat(2, 1fr); } .purple-sky-page .ps-bio__books ul { columns: 1; } .purple-sky-page .ps-footer__grid { gap: var(--ps-sp-8); } /* Restated at the :has() rule's weight. Specificity beats a media query, so without this the four-column rule would still apply on a phone. */ .purple-sky-page .ps-footer__grid:has(.ps-footer__policies a) { grid-template-columns: 1fr; } .purple-sky-page .ps-book__cover img { margin-inline: auto; } } @media (max-width: 560px) { .purple-sky-page .ps-hero__meta { flex-direction: column; gap: var(--ps-sp-2); align-items: flex-start; } .purple-sky-page .ps-speaker__stats { gap: var(--ps-sp-6); } .purple-sky-page .ps-bio__stats { grid-template-columns: 1fr 1fr; } .purple-sky-page .ps-hero__title { font-size: var(--ps-fs-hero-title-sm); } .purple-sky-page .ps-hero__script { font-size: var(--ps-fs-hero-script-sm); } .purple-sky-page .ps-hero__badges { gap: var(--ps-sp-2); margin-bottom: var(--ps-sp-4); } .purple-sky-page .ps-hero__badges img { height: 60px; } .purple-sky-page .ps-hero__org { font-size: var(--ps-fs-2xs); max-width: 100%; } .purple-sky-page .ps-hero__inner { padding-block: var(--ps-sp-22) var(--ps-sp-10); } } /* ---- Motion safety ---- */ @media (prefers-reduced-motion: reduce) { .purple-sky-page .ps-marquee__track { animation: none; } .purple-sky-page .ps-hero__scroll { animation: none; } .purple-sky-page .ps-btn, .purple-sky-page .ps-person, .purple-sky-page .ps-book__cover img, .purple-sky-page .ps-plan__item { transition: none; } /* The button still hides, just without the slide: opacity flips instantly. */ .purple-sky-page .ps-fab { transition: opacity var(--ps-dur) linear; } .purple-sky-page .ps-fab--hidden { transform: none; } * { scroll-behavior: auto; } /* The '*' above is 0,0,0 and loses to the committee row's own rule, so the smooth scroll has to be turned off at the weight it was turned on. */ .purple-sky-page .ps-comm__row { scroll-behavior: auto; scroll-snap-type: none; } } /* ========================================================================== NATIVE WIDGET ADAPTATION Styles for structures that used to be raw HTML and are now Elementor widgets. ========================================================================== */ /* Kicker variant: was an inline style="color:var(--ps-pink)" on dark sections. */ .purple-sky-page .ps-kicker--pink, .purple-sky-page .ps-kicker--pink .elementor-heading-title { color: var(--ps-pink); } /* Book quote: was a

, now a Text Editor. */ .purple-sky-page .ps-book__quote, .purple-sky-page .ps-book__quote p { font-family: var(--ps-font-script); font-size: var(--ps-fs-quote); color: var(--ps-mauve); line-height: var(--ps-lh-snug); margin: var(--ps-sp-6) 0; } /* Fee note: was an inline-styled

. */ .purple-sky-page .ps-reg__note, .purple-sky-page .ps-reg__note p { color: rgba(var(--ps-white-rgb), 0.6); font-size: var(--ps-fs-nav); margin: var(--ps-sp-4) 0 0; } /* A measure on a widget wrapper is not winnable: Elementor pins every widget in a container with '.elementor.elementor .e-con > .elementor-widget' (max-width:100%), and the doubled .elementor puts that at 0,4,0. So any max-width in ch belongs on the

inside the widget, which that selector cannot reach. The plan intro carries its measure on '.ps-plan__head p' above. */ /* Brochure button on the hero photo: was an inline style. */ .purple-sky-page .ps-cta--brochure .elementor-button { color: var(--ps-on-dark); border-color: rgba(var(--ps-white-rgb), 0.5); } .purple-sky-page .ps-cta--brochure .elementor-button:hover { border-color: var(--ps-on-dark); } /* Signature is an Image widget now, not an inside .ps-chair__sign. */ .purple-sky-page .ps-chair__signature { margin-top: var(--ps-sp-7); } .purple-sky-page .ps-chair__signature img { width: auto; height: 58px; margin-bottom: var(--ps-sp-2); } .purple-sky-page .ps-chair__name { margin-bottom: var(--ps-sp-3); } /* CF7 arrives via the Shortcode widget; keep it flush. */ .purple-sky-page .elementor-widget-shortcode .elementor-shortcode { display: block; } /* ========================================================================== FEES: early-bird vs regular Two price columns with the live one marked. Only rendered when a deadline is set in Workshop > Settings, so the single-column list is still the default. ========================================================================== */ .purple-sky-page .ps-reg__fees--dual li { display: grid; grid-template-columns: 1fr auto auto; gap: var(--ps-sp-4); align-items: baseline; } .purple-sky-page .ps-reg__fees--dual b { min-width: 5.5em; text-align: right; font-weight: var(--ps-fw-bold); } .purple-sky-page .ps-reg__fees-head { padding-block-end: var(--ps-sp-2); border-bottom: var(--ps-bw-hair) solid var(--ps-line-on-dark-md); } .purple-sky-page .ps-reg__col { min-width: 5.5em; text-align: right; font-family: var(--ps-font-heading); font-size: var(--ps-fs-xs); font-weight: var(--ps-fw-semibold); letter-spacing: var(--ps-ls-caps); text-transform: uppercase; color: rgba(var(--ps-white-rgb), 0.5); } .purple-sky-page .ps-reg__col em { display: block; font-style: normal; font-size: var(--ps-fs-2xs); letter-spacing: var(--ps-ls-normal, 0); text-transform: none; margin-top: var(--ps-sp-1); color: rgba(var(--ps-white-rgb), 0.4); } /* The price being charged today. */ .purple-sky-page .ps-reg__fees--dual .is-live, .purple-sky-page .ps-reg__col.is-live { color: var(--ps-pink); } .purple-sky-page .ps-reg__col.is-live em { color: rgba(var(--ps-pink-rgb), 0.75); } /* Expired early-bird reads as struck through; the upcoming one just sits quiet. */ .purple-sky-page .ps-reg__fees--dual .is-past { color: rgba(var(--ps-white-rgb), 0.4); text-decoration: line-through; text-decoration-thickness: 1px; } .purple-sky-page .ps-reg__fees--dual .is-next { color: rgba(var(--ps-white-rgb), 0.55); } @media (max-width: 560px) { .purple-sky-page .ps-reg__fees--dual li { grid-template-columns: 1fr auto; row-gap: var(--ps-sp-1); } .purple-sky-page .ps-reg__fees--dual li > span:first-child { grid-column: 1 / -1; } .purple-sky-page .ps-reg__fees-head { display: none; } .purple-sky-page .ps-reg__fees--dual b::before { content: attr(data-label); float: left; font-size: var(--ps-fs-2xs); color: rgba(var(--ps-white-rgb), 0.45); margin-inline-end: var(--ps-sp-2); } }