/* * Crinklr Hypnosis brand skin - recreates the look of the original * Joomla/Kidzy-template site (archived on archive.org before data loss). * Only ever loaded by templates/crinklr/header.php, so it can be as * opinionated as the original was without affecting Professional * Hypnotherapy or Connected Hypnotherapy's look. * * gets class="crinklr crinklr-home" OR "crinklr crinklr-app": * - crinklr-home: the fully custom marketing pages (home, FAQ, etc). This * file owns their entire look - generic tag/class rules under * .crinklr-home (h1-h4, .btn, .container, p/a/img, base body font) - * PLUS a small set of page-builder primitives (.hero, .section, .card, * .row - see "page-builder sections" below) so admin-added sections * (Admin > Page Builder) render in Crinklr's own visual language on its * bespoke homepage, the same as everything else under .crinklr-home. * site.css is deliberately never loaded in this mode (see * templates/crinklr/header.php) - these are hand-written equivalents, * not overrides of it. * - crinklr-app: Crinklr requests to the SHARED public templates (booking * flow, contact, etc - see view_header()'s delegation in inc/view.php). * Those pages' body is plain site.css markup (.card, .btn, .slot-btn, * form fields...), which is ALSO loaded there. Re-theming it by * redeclaring every one of site.css's selectors here would fight its * variant classes (.btn.secondary, .slot-btn.selected, .date-chip.active * all carry meaning beyond color) - instead the "shared/app pages" * section below only overrides the CSS custom properties site.css's * rules are already built from, so every variant keeps working and * picks up the palette for free. * Rules under plain .crinklr (chrome: announcement bar, header/nav, footer, * lightbox) apply in both modes - none of those class names exist in * site.css, so there's nothing to collide with. */ :root { --cr-purple: #92278f; --cr-purple-dark: #6a1c68; --cr-purple-darker: #561754; --cr-pink: #ed117d; --cr-yellow: #f1c712; --cr-green: #8ac53f; --cr-green-dark: #00a651; --cr-teal: #2ab0ba; --cr-blue: #00aeef; --cr-ink: #4a2148; --cr-paper: #fffaf7; --cr-card: #ffffff; --cr-line: #f1def0; --cr-shadow: 0 10px 30px rgba(106, 28, 104, .12); --cr-radius: 18px; --cr-maxw: 1120px; } .crinklr { box-sizing: border-box; } .crinklr *, .crinklr *::before, .crinklr *::after { box-sizing: inherit; } .crinklr-home { margin: 0; font-family: Sniglet, ui-rounded, "Comic Sans MS", sans-serif; font-size: 17px; line-height: 1.6; color: var(--cr-ink); background: var(--cr-paper); -webkit-font-smoothing: antialiased; } .crinklr-home h1, .crinklr-home h2, .crinklr-home h3, .crinklr-home h4 { font-family: Sniglet, ui-rounded, "Comic Sans MS", sans-serif; font-weight: 400; line-height: 1.2; margin: 0 0 .5em; color: var(--cr-purple-dark); } .crinklr-home h1 { font-size: clamp(2.2rem, 5vw, 4rem); } .crinklr-home h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); } .crinklr-home h3 { font-size: 1.35rem; } .crinklr-home p { margin: 0 0 1em; } .crinklr-home a { color: var(--cr-pink); text-decoration: none; } .crinklr-home a:hover { text-decoration: underline; } .crinklr-home img { max-width: 100%; display: block; } .crinklr-home .container { max-width: var(--cr-maxw); margin: 0 auto; padding: 0 1.25rem; } .crinklr-home .center { text-align: center; } .crinklr-home .muted { color: #8a6a88; } .crinklr-home .btn { display: inline-block; background: var(--cr-purple); color: #fff; font-family: Sniglet, ui-rounded, sans-serif; font-size: 1.05rem; padding: .8rem 1.9rem; border-radius: 999px; box-shadow: var(--cr-shadow); transition: transform .15s ease, background .15s ease; border: none; cursor: pointer; } .crinklr-home .btn:hover { background: var(--cr-purple-dark); transform: translateY(-2px); text-decoration: none; } .crinklr-home .btn.btn-yellow { background: var(--cr-yellow); color: var(--cr-purple-darker); } .crinklr-home .btn.btn-yellow:hover { background: #ffd83e; } .crinklr-home .btn.btn-outline { background: transparent; color: #fff; box-shadow: none; border: 2px solid #fff; } .crinklr-home .btn.btn-outline:hover { background: rgba(255,255,255,.15); } .crinklr-home .btn.secondary { background: transparent; color: var(--cr-purple-dark); box-shadow: none; border: 2px solid var(--cr-purple); } .crinklr-home .btn.secondary:hover { background: rgba(146,39,143,.08); transform: translateY(-2px); } /* ---- page-builder sections (Admin > Page Builder - inc/content.php) ---- * Hand-written equivalents of site.css's .hero/.section/.card/.row, in * Crinklr's own palette/radius/shadow/font rather than an override of * site.css's rules (which aren't loaded here - see file header). This is * the only vocabulary templates/public/section.php needs, so that one * partial renders correctly on both the generic homepage and this bespoke * one with no template changes of its own. */ .crinklr-home .hero { background: linear-gradient(180deg, #fbf1fb, var(--cr-paper)); padding: 3.5rem 1.25rem; text-align: center; } .crinklr-home .hero h1 { max-width: 34rem; margin: 0 auto .5rem; } .crinklr-home .hero p.lead { max-width: 32rem; margin: 0 auto 1.5rem; color: var(--cr-purple-dark); font-size: 1.15rem; } .crinklr-home .section { padding: 3rem 1.25rem; } .crinklr-home .section.alt { background: var(--cr-card); border-top: 1px solid var(--cr-line); border-bottom: 1px solid var(--cr-line); } .crinklr-home .card { background: var(--cr-card); border: 1px solid var(--cr-line); border-radius: var(--cr-radius); padding: 1.5rem; box-shadow: var(--cr-shadow); } .crinklr-home .row { display: flex; gap: .9rem; flex-wrap: wrap; } .crinklr-home .row > * { flex: 1; min-width: 180px; } /* ---- shared/app pages (booking flow, contact, etc - reuse site.css) ---- */ .crinklr-app { --ink: var(--cr-purple-darker); --ink-soft: #8a5f87; --paper: #fef7fc; --card: #ffffff; --line: #f3d9f1; --line-soft: #faeef9; --accent: var(--cr-purple); --accent-dark: var(--cr-purple-dark); --accent-soft: #f7e3f6; --radius: 14px; --shadow: var(--cr-shadow); font-family: Sniglet, ui-rounded, "Comic Sans MS", sans-serif; } .crinklr-app h1, .crinklr-app h2, .crinklr-app h3, .crinklr-app h4 { font-family: Sniglet, ui-rounded, "Comic Sans MS", sans-serif; font-weight: 400; } .crinklr-app .cr-isolated-note { color: var(--cr-purple-dark); font-size: .95rem; } /* Sniglet only ships weights 400 and 800, so anything asking for 600/700 * gets forced up to that heavy 800 and reads as borderline illegible at * small sizes. Fredoka ships true 600/700 weights, so it steps in for just * the bold elements - headings and body copy stay on Sniglet everywhere. * Three sources of "bold" here: site.css component styles that declare * font-weight themselves (buttons, form labels, the active booking step, * etc - enumerated below since they're a fixed, known set); plain * / tags, which the browser bolds regardless of any CSS and show * up anywhere free-form copy does - portal pages, page-builder content, * wherever - so those are matched generically instead of chasing every * template that happens to use one; and
(a
disclosure's * own toggle label), which this app always gives an explicit inline * font-weight:600/700 (see portal/profile.php, admin/practices.php's own * pattern) rather than styling via a class. */ .crinklr-app .btn, .crinklr-app form label, .crinklr-app .pill, .crinklr-app th, .crinklr-app .price-tag, .crinklr-app .booking-steps span.active, .crinklr-app .slot-btn, .crinklr-app .date-chip .num, .crinklr-app .hold-timer, .crinklr-app .recording-player .rec-label, .crinklr-app .cal-daynum, .crinklr-app .cal-tag, .crinklr .cr-announce a, .crinklr strong, .crinklr b, .crinklr summary { font-family: Fredoka, ui-rounded, "Comic Sans MS", sans-serif; } /* ---- top announcement bar ---- */ .crinklr .cr-announce { background: linear-gradient(90deg, var(--cr-pink), var(--cr-purple)); color: #fff; text-align: center; font-size: .92rem; padding: .55rem 1rem; } .crinklr .cr-announce a { color: #fff; text-decoration: underline; font-weight: 600; margin-left: .4em; } /* ---- header / nav ---- */ .crinklr .cr-header { background: #fff; box-shadow: 0 2px 12px rgba(106, 28, 104, .08); position: sticky; top: 0; z-index: 50; } .crinklr .cr-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1.25rem; max-width: var(--cr-maxw); margin: 0 auto; } .crinklr .cr-brand { display: flex; align-items: center; } .crinklr .cr-brand img { height: 46px; width: auto; max-width: 60vw; } /* Client portal sidebar (templates/portal/header.php) - narrower than the * main site header's horizontal bar, so sized by width instead of height. */ .crinklr-app .shell-nav .brand img { width: 100%; max-width: 160px; height: auto; } .crinklr .cr-nav-toggle-label { display: none; font-size: 1.6rem; color: var(--cr-purple); cursor: pointer; line-height: 1; padding: .2rem .4rem; background: none; border: none; } .crinklr .cr-nav { display: flex; align-items: center; gap: 1.4rem; } .crinklr .cr-nav > li { position: relative; list-style: none; } .crinklr .cr-nav, .crinklr .cr-nav ul { margin: 0; padding: 0; } .crinklr .cr-nav a { text-decoration: none; } .crinklr .cr-nav > li > a, .crinklr .cr-nav > li > span { color: var(--cr-purple-dark); font-size: 1.02rem; padding: .4rem 0; } .crinklr .cr-nav > li > a:hover { color: var(--cr-pink); text-decoration: none; } .crinklr .cr-nav > li > span { display: inline-block; cursor: default; } .crinklr .cr-nav .cr-dropdown:hover > span, .crinklr .cr-nav .cr-dropdown:focus-within > span { color: var(--cr-pink); } .crinklr .cr-nav .cr-cta { background: var(--cr-purple); color: #fff !important; padding: .55rem 1.3rem; border-radius: 999px; } .crinklr .cr-nav .cr-cta:hover { background: var(--cr-purple-dark); } .crinklr .cr-nav .cr-dropdown { position: relative; } .crinklr .cr-nav .cr-dropdown > ul { position: absolute; top: 100%; left: 50%; background: #fff; min-width: 220px; box-shadow: var(--cr-shadow); border-radius: 10px; padding: .4rem 0; text-align: center; opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(6px); transition: opacity .15s ease, transform .15s ease, visibility .15s; } .crinklr .cr-nav .cr-dropdown:hover > ul, .crinklr .cr-nav .cr-dropdown:focus-within > ul { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .crinklr .cr-nav .cr-dropdown > ul li { list-style: none; } .crinklr .cr-nav .cr-dropdown > ul li a { display: block; padding: .55rem 1rem; color: var(--cr-purple-dark); white-space: nowrap; } .crinklr .cr-nav .cr-dropdown > ul li a:hover { background: var(--cr-line); text-decoration: none; } @media (max-width: 860px) { .crinklr .cr-nav-toggle-label { display: block; } .crinklr .cr-nav { position: absolute; top: 100%; left: 0; right: 0; background: #fff; flex-direction: column; align-items: stretch; gap: 0; box-shadow: var(--cr-shadow); max-height: 0; overflow: hidden; transition: max-height .25s ease; } .crinklr .cr-nav.open { max-height: 480px; } .crinklr .cr-nav > li { border-top: 1px solid var(--cr-line); } .crinklr .cr-nav > li > a, .crinklr .cr-nav > li > span { display: block; padding: .8rem 1.25rem; } .crinklr .cr-nav .cr-dropdown > ul { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border-radius: 0; background: #fdf4fc; display: none; } .crinklr .cr-nav .cr-dropdown:hover > ul, .crinklr .cr-nav .cr-dropdown:focus-within > ul { display: block; } .crinklr .cr-nav .cr-cta { margin: .6rem 1.25rem; text-align: center; } } /* ---- hero ---- */ .crinklr .cr-hero { position: relative; overflow: hidden; background-image: url('../img/crinklr/pattern-baby-items.svg'), linear-gradient(160deg, #fdf0fc 0%, #fff7ec 55%, #f2fbf1 100%); background-repeat: repeat, no-repeat; background-size: 150px 150px, cover; padding: 3.5rem 0; } .crinklr .cr-hero .container { display: flex; align-items: center; gap: 2.5rem; position: relative; z-index: 2; } .crinklr .cr-hero-copy { flex: 1 1 420px; } .crinklr .cr-hero-copy .kicker { font-size: 1.3rem; color: var(--cr-pink); display: block; margin-bottom: -.3rem; } .crinklr .cr-hero-copy h1 { color: var(--cr-purple); } .crinklr .cr-hero-img { flex: 1 1 320px; text-align: center; } .crinklr .cr-hero-img img { max-height: 420px; margin: 0 auto; } @media (max-width: 760px) { .crinklr .cr-hero .container { flex-direction: column; text-align: center; } } /* ---- mission ---- */ .crinklr .cr-mission { padding: 4rem 0; } .crinklr .cr-mission-grid { display: flex; align-items: center; gap: 3rem; } .crinklr .cr-mission-copy { flex: 1 1 420px; } .crinklr .cr-mission-img { flex: 1 1 380px; } .crinklr .cr-mission-img img { width: 100%; border-radius: var(--cr-radius); box-shadow: var(--cr-shadow); } @media (max-width: 760px) { .crinklr .cr-mission-grid { flex-direction: column; text-align: center; } } /* ---- feature grid ---- */ .crinklr .cr-features { padding: 4rem 0; background: linear-gradient(180deg, #fbf1fb, #fff7fb); } .crinklr .cr-features-head { text-align: center; margin-bottom: 2.5rem; } .crinklr .cr-features-head .eyebrow { color: var(--cr-teal); font-family: system-ui, sans-serif; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .82rem; } .crinklr .cr-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } @media (max-width: 900px) { .crinklr .cr-feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .crinklr .cr-feature-grid { grid-template-columns: 1fr; } } .crinklr .cr-feature-card { background: var(--cr-card); border-radius: var(--cr-radius); overflow: hidden; text-align: center; box-shadow: var(--cr-shadow); display: flex; flex-direction: column; } .crinklr .cr-feature-photo { position: relative; height: 300px; overflow: hidden; } .crinklr .cr-feature-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; } .crinklr .cr-feature-wave { position: absolute; left: 0; bottom: 0; width: 100%; height: 42px; } .crinklr .cr-feature-wave--green { color: var(--cr-green); } .crinklr .cr-feature-wave--purple { color: var(--cr-purple); } .crinklr .cr-feature-wave--pink { color: var(--cr-pink); } .crinklr .cr-feature-wave--blue { color: var(--cr-blue); } .crinklr .cr-feature-wave path { fill: currentColor; } .crinklr .cr-feature-icon { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.2); font-size: 20px; line-height: 1; } .crinklr .cr-feature-icon--green { background: var(--cr-green); } .crinklr .cr-feature-icon--purple { background: var(--cr-purple); } .crinklr .cr-feature-icon--pink { background: var(--cr-pink); } .crinklr .cr-feature-icon--blue { background: var(--cr-blue); } .crinklr .cr-feature-body { padding: 1.6rem 1.2rem 1.8rem; flex: 1 1 auto; } .crinklr .cr-feature-body h3 { margin-bottom: .4rem; } .crinklr .cr-feature-body p { font-size: .95rem; color: #6b4a69; margin-bottom: 0; } /* Card body background matches its icon circle above - text color per variant is whichever of black/white actually clears WCAG AA (4.5:1) on that exact background; purple is the only one of the four dark enough to need light text, the rest need dark. */ .crinklr .cr-feature-body--green { background: var(--cr-green); } .crinklr .cr-feature-body--purple { background: var(--cr-purple); } .crinklr .cr-feature-body--pink { background: var(--cr-pink); } .crinklr .cr-feature-body--blue { background: var(--cr-blue); } .crinklr .cr-feature-body--green h3, .crinklr .cr-feature-body--green p, .crinklr .cr-feature-body--pink h3, .crinklr .cr-feature-body--pink p, .crinklr .cr-feature-body--blue h3, .crinklr .cr-feature-body--blue p { color: #000; } .crinklr .cr-feature-body--purple h3, .crinklr .cr-feature-body--purple p { color: #fff; } /* ---- awards intro ---- */ .crinklr .cr-awards-intro { padding: 3.5rem 0 1rem; text-align: center; } .crinklr .cr-awards-intro .container { max-width: 720px; } .crinklr .cr-awards-intro img { margin: 0 auto 1.2rem; max-height: 90px; } /* ---- gallery ---- */ .crinklr .cr-gallery { padding: 1.5rem 0 3.5rem; } .crinklr .cr-gallery h3 { text-align: center; color: var(--cr-teal); margin-bottom: 1.2rem; } .crinklr .cr-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2.2rem; } .crinklr .cr-gallery-grid--3col { grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .crinklr .cr-gallery-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .crinklr .cr-gallery-grid, .crinklr .cr-gallery-grid--3col { grid-template-columns: repeat(2, 1fr); } } .crinklr .cr-gallery-item { display: block; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 14px rgba(106,28,104,.15); border: 3px solid #fff; cursor: zoom-in; background: #fff; } .crinklr .cr-gallery-item img { width: 100%; height: auto; display: block; } .crinklr .cr-lightbox { position: fixed; inset: 0; background: rgba(74,33,72,.88); display: none; align-items: center; justify-content: center; z-index: 200; padding: 2rem; } .crinklr .cr-lightbox.open { display: flex; } .crinklr .cr-lightbox img { max-width: min(90vw, 900px); max-height: 88vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.4); } .crinklr .cr-lightbox-close { position: absolute; top: 1.2rem; right: 1.6rem; color: #fff; font-size: 2.2rem; cursor: pointer; line-height: 1; } /* ---- final CTA ---- */ .crinklr .cr-final-cta { background: linear-gradient(120deg, var(--cr-purple), var(--cr-pink)); color: #fff; text-align: center; padding: 3.5rem 0; } .crinklr .cr-final-cta h2 { color: #fff; } /* ---- footer ---- */ .crinklr .cr-footer { background: var(--cr-purple-darker); color: #f4dff3; text-align: center; padding: 2.4rem 0; } .crinklr .cr-footer p { margin: 0 0 .4em; } .crinklr .cr-footer a { color: #fff; } .crinklr .cr-footer .tagline { font-size: 1.05rem; color: #fff; margin-bottom: .6em; } .crinklr .cr-footer .fine { font-size: .82rem; color: #d9a9d6; } /* ---- generic content page (FAQ / How Hypnosis / Cancellation Policy) ---- */ .crinklr .cr-page-header { background: linear-gradient(120deg, var(--cr-purple), var(--cr-pink)); color: #fff; padding: 3rem 0; text-align: center; } .crinklr .cr-page-header h1 { color: #fff; margin: 0; } .crinklr .cr-content { padding: 3rem 0; } .crinklr .cr-content .container { max-width: 820px; } .crinklr .cr-content h2 { margin-top: 1.6em; } .crinklr .cr-content table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .95rem; } .crinklr .cr-content table td { padding: .3em .6em; border-bottom: 1px solid var(--cr-line); } .crinklr .cr-content .cr-content-intro { max-width: var(--cr-maxw); display: flex; align-items: center; gap: 3rem; margin-bottom: 1rem; } .crinklr .cr-content-intro h2 { margin-top: 0; } .crinklr .cr-content-intro-copy { flex: 1 1 420px; } .crinklr .cr-content-intro-img { flex: 1 1 320px; } .crinklr .cr-content-intro-img img { width: 100%; border-radius: var(--cr-radius); box-shadow: var(--cr-shadow); } @media (max-width: 760px) { .crinklr .cr-content-intro { flex-direction: column; text-align: center; } } .crinklr .cr-faq-item { background: #fff; border-radius: var(--cr-radius); box-shadow: var(--cr-shadow); padding: 1.5rem 1.8rem; margin-bottom: 1.4rem; } .crinklr .cr-faq-item h3 { color: var(--cr-pink); } .crinklr .cr-cert-list { columns: 2; column-gap: 2rem; font-size: .92rem; margin: 1.5em 0; } @media (max-width: 620px) { .crinklr .cr-cert-list { columns: 1; } } .crinklr .cr-cert-list li { break-inside: avoid; margin-bottom: .3em; } /* FAQ answers now come from admin/crinklr_faq.php's rich-text editor (inc/faq.php), so their formatting - colors, bold, lists - lives as inline styles inside each answer_html, not fixed CSS classes here. .crinklr-home p's existing margin rule (above) already spaces them. */