/* ========================================================================= Heal with Fil — design system Ported from Figma "Heal with Fil — FINAL Designs" Desktop frame 1920×… (node 1:20 / 3:111), mobile frame 960×… (node 2003:1851) ========================================================================= */ /* ---------- Fonts ------------------------------------------------------- Inria Sans is loaded from Google Fonts in each page's . Ostrich Sans Inline is self-hosted from assets/fonts/ — it is not on Google Fonts. See assets/fonts/README.md. ----------------------------------------------------------------------- */ @font-face { font-family: 'Ostrich Sans Inline'; src: url('../fonts/OstrichSansInline-Regular.woff2') format('woff2'), url('../fonts/OstrichSansInline-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Ostrich Sans Inline'; src: url('../fonts/OstrichSansInline-Italic.woff2') format('woff2'), url('../fonts/OstrichSansInline-Italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; } :root { /* Palette */ --ink: #161614; --purple: #8c52ff; --coral: #ff5757; --cream: #f0eae5; --shell: #f8f5f3; --paper: #fcfbf8; --navy: #13315e; --blob-a: #ff3131; --blob-b: #fe9857; /* Gradients */ --grad-btn: linear-gradient(90deg, var(--coral) 0%, var(--purple) 100%); --grad-frame: linear-gradient(100deg, var(--coral) 0%, var(--purple) 100%); --grad-blob: linear-gradient(90deg, var(--blob-a) 0%, var(--blob-b) 100%); /* Type */ --font-display: 'Ostrich Sans Inline', 'Ostrich Sans', 'Arial Narrow', 'Helvetica Neue Condensed', sans-serif; --font-body: 'Inria Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; --fs-h1: clamp(2.75rem, 5.2vw, 5.625rem); /* 44 → 90 */ --fs-h2: clamp(2rem, 3.7vw, 4.0625rem); /* 32 → 65 */ --fs-h3: clamp(1.75rem, 2.9vw, 3rem); /* 28 → 48 */ --fs-lead: clamp(1.125rem, 1.75vw, 2rem); /* 18 → 32 */ --fs-body: clamp(1rem, 1.2vw, 1.375rem); /* 16 → 22 */ --fs-eyebrow: clamp(1.125rem, 1.75vw, 2rem);/* 18 → 32 */ --fs-nav: clamp(1rem, 1.45vw, 1.75rem); /* 16 → 28 */ /* Layout */ --maxw: 1680px; --gutter: clamp(1.5rem, 6.25vw, 7.5rem); /* 24 → 120 */ --section-y: clamp(3.5rem, 7vw, 8.5rem); --wave-h: clamp(3rem, 9.9vw, 11.875rem); /* 48 → 190 */ } /* ---------- Reset ------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; /* Decorative blobs bleed past their own section on purpose (see .about-story/.about-why below); clip horizontally here at the page level so that never causes a horizontal scrollbar, while leaving every section free to overflow vertically without being clipped. overflow-x:clip (not hidden) avoids turning body into its own nested scroll container, which is what "hidden" does the moment only one axis is set — that nested container decouples the page's real scroll position from window.scrollY/IntersectionObserver/anchor links/etc. */ overflow-x: clip; background: #fff; color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.45; } img, svg { max-width: 100%; } img { height: auto; display: block; } h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; } ul { padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } :focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Primitives -------------------------------------------------- */ .container { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .section { position: relative; padding-block: var(--section-y); } .section--flush-top { padding-top: 0; } .section--flush-bottom { padding-bottom: 0; } .display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 1.02; letter-spacing: .01em; } .h1 { font-size: var(--fs-h1); } .h2 { font-size: var(--fs-h2); } .h3 { font-size: var(--fs-h3); } .eyebrow { font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; line-height: 1.2; } .lead { font-size: var(--fs-lead); } .prose > * + * { margin-top: 1.55em; } .prose strong { font-weight: 700; } .text-purple { color: var(--purple); } .text-coral { color: var(--coral); } .text-center { text-align: center; } /* Buttons ---------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-width: 12.5rem; padding: 1.1rem 1.75rem; background: var(--grad-btn); color: #fff; font-size: clamp(.875rem, .95vw, 1.125rem); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; line-height: 1.2; text-align: center; transition: filter .18s ease, transform .18s ease; } .btn:hover { filter: brightness(1.08); transform: translateY(-1px); } .btn--ghost { background: none; border: 2px solid #fff; } .btn--ghost:hover { background: rgba(255, 255, 255, .12); } .btn-row { display: flex; flex-wrap: wrap; gap: 1rem; } .btn-row--stack { flex-direction: column; align-items: flex-start; } .btn-row--stack .btn { min-width: min(100%, 22.25rem); } /* Gradient photo frame --------------------------------------------------- */ .frame { position: relative; padding: clamp(5px, .52vw, 10px); background: var(--grad-frame); line-height: 0; } .frame img { width: 100%; height: 100%; object-fit: cover; } .frame--tall img { aspect-ratio: 671 / 726; } .frame--portrait img { aspect-ratio: 735 / 1092; } .frame--wide img { aspect-ratio: 475 / 374; } .frame--landscape img { aspect-ratio: 676 / 543; } .frame--square img { aspect-ratio: 1 / 1; } /* Decorative blob -------------------------------------------------------- */ .blob { position: absolute; border-radius: 50%; background: var(--grad-blob); pointer-events: none; z-index: 0; } /* Wave divider ----------------------------------------------------------- */ /* Sits inside the section it introduces, masking the section's top edge with the colour of the section above and leaving a 12px gradient sliver — the same two-shape construction used in the Figma file. */ .wave { position: absolute; inset: 0 0 auto 0; height: var(--wave-h); color: #fff; /* colour of the section ABOVE */ pointer-events: none; z-index: 2; } .wave svg { display: block; width: 100%; height: 100%; } .wave--paper { color: var(--paper); } .wave--shell { color: var(--shell); } .wave--hero { color: #f9f6f4; } .wave--about-hero { color: #0e0e0e; } .wave--band-dark { color: #000; } /* Gradient stripe traced from about-darkband.jpg's own baked-in curve. Covers the full section (not just a top strip) and scales via preserveAspectRatio "xMidYMin slice" — the SVG equivalent of the photo's own background-size: cover; background-position:center top — so the two crop in lockstep at every viewport width instead of drifting apart. */ .wave-cta { position: absolute; inset: 0; pointer-events: none; z-index: 2; } .wave-cta svg { display: block; width: 100%; height: 100%; } /* Hairline rules --------------------------------------------------------- */ .rule { height: 0; border: 0; border-top: 2px solid var(--ink); } .rule--coral { border-top-color: var(--coral); border-top-width: 1px; } /* ========================================================================= Header ========================================================================= */ .site-header { position: relative; z-index: 40; background: #fff; border-bottom: 1px solid var(--coral); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: clamp(4.5rem, 8.5vw, 10.25rem); padding-block: 1rem; } .brand { font-family: var(--font-display); font-size: clamp(2rem, 4.2vw, 5.0625rem); line-height: 1; text-transform: uppercase; white-space: nowrap; } .nav__list { display: flex; flex-wrap: wrap; gap: clamp(1rem, 1.6vw, 2rem); } .nav__list a { font-size: var(--fs-nav); letter-spacing: .01em; text-transform: uppercase; } .nav__list a:hover, .nav__list a[aria-current='page'] { color: var(--purple); } .nav-toggle { display: none; width: 3rem; height: 3rem; padding: .5rem; } .nav-toggle span { display: block; height: 3px; margin: 5px 0; background: var(--ink); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; } .nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* ========================================================================= Hero ========================================================================= */ .hero { position: relative; background: #f9f6f4; padding-block: clamp(2.5rem, 5vw, 6rem) clamp(3.5rem, 7vw, 8rem); overflow: hidden; } .hero .blob { width: clamp(20rem, 41.5vw, 49.8rem); aspect-ratio: 1; top: clamp(-14rem, -8vw, -2.8rem); right: clamp(-16rem, -9vw, -3rem); } .hero__grid { position: relative; z-index: 1; display: grid; gap: clamp(2rem, 4vw, 3.75rem); } .hero__copy > * + * { margin-top: clamp(1.25rem, 2.2vw, 2.25rem); } /* Figma sets this heading in a 616px box at 90px — ~6.9em. Holding the measure in em keeps the mockup's two-line break at any viewport. */ .hero__title { line-height: .95; max-width: 7em; } .hero__sub { font-weight: 700; text-transform: uppercase; font-size: var(--fs-lead); } /* ========================================================================= Dark bands ========================================================================= */ .band-dark { position: relative; isolation: isolate; background: #000; color: #fff; } .band-dark::before { content: ''; position: absolute; inset: 0; background: var(--band-img) center / cover no-repeat; opacity: var(--band-opacity, .85); z-index: -1; } .band-dark--faces { --band-img: url('../img/bg-dark-faces.png'); --band-opacity: .85; } .band-dark--mountain { --band-img: url('../img/bg-dark-mountain.jpg'); --band-opacity: .7; } /* The wave divider below this section works by painting a solid-colour "mask" that pretends to be a continuation of the section above, with only a thin gradient sliver showing at the true boundary — that illusion only holds when the section above reads as a flat colour at the seam. A photo doesn't naturally end in flat black, so without help there's a visible hard-edged rectangle where the mask begins. This fades the photo's own bottom edge to true black first, so the mask has no seam to blend against. */ .methods { position: relative; } .methods::after { content: ''; position: absolute; inset: auto 0 0 0; height: calc(var(--wave-h) + 8rem); background: linear-gradient(to bottom, transparent, #000); pointer-events: none; z-index: 0; } /* Show the full mountain scene ("zoomed out") instead of a center-cropped slice that landed on the grainiest part (the rocky foreground) — contain reveals the whole photo, peak included, so it reads sharper and higher quality even though it's the same source file. */ .band-dark--mountain::before { background-size: cover; background-position: center 30%; } .band-dark .container { position: relative; z-index: 1; } .pain { max-width: 68rem; margin-inline: auto; text-align: center; /* clear the wave that masks the top edge of this band */ padding-top: calc(var(--wave-h) * .95 + 1.5rem); padding-bottom: clamp(3rem, 7vw, 9rem); } .pain > * + * { margin-top: clamp(1.5rem, 2.6vw, 2.5rem); } .pain__list { display: inline-block; text-align: left; list-style: disc; padding-left: 1.5rem; } .pain__list li + li { margin-top: .2em; } /* Cream card that overlaps the band above it */ .overlap-card { position: relative; z-index: 3; /* negative clamp: first arg is the most negative bound, last the least */ margin-top: clamp(-11.3rem, -9vw, -2.5rem); } .card-outline { background: var(--cream); border: 2px solid var(--purple); /* wider margins → narrower, calmer text column with more air */ padding: clamp(2.5rem, 5vw, 5.5rem) clamp(2rem, 8vw, 9rem); text-align: center; } /* more breathing room between the statement and the purple line */ .card-outline > * + * { margin-top: clamp(2.25rem, 4vw, 3.75rem); } .card-outline .lead { font-size: clamp(1rem, 1.5vw, 1.5rem); } .card-outline .h3 { font-size: clamp(1.375rem, 2.3vw, 2.25rem); } /* ========================================================================= Guide / About-Filip block ========================================================================= */ .split { display: grid; gap: clamp(2rem, 4vw, 4.5rem); align-items: start; } .split__media { position: relative; z-index: 1; } .guide__head { display: flex; align-items: center; gap: clamp(1rem, 1.7vw, 2rem); } .guide__mark { width: clamp(4.5rem, 7.9vw, 9.5rem); flex: none; } .guide__pull { margin-top: 1.5em; line-height: 1.15; } /* balance the left column against the portrait: smaller body + pull quote */ #about .split__copy .prose > p { font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.55; } #about .guide__pull { font-size: clamp(1.375rem, 2.1vw, 2.125rem); } #about .split__copy .prose > * + * { margin-top: 1.15em; } /* Certifications --------------------------------------------------------- */ .certs__logos { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.5rem, 4vw, 4.5rem); margin-top: clamp(1.25rem, 2.2vw, 2rem); } .certs__logos img { width: clamp(7rem, 10.5vw, 12.6rem); } .certs__logos img.is-small { width: clamp(5.75rem, 8.6vw, 10.3rem); } /* ========================================================================= Testimonials ========================================================================= */ .testimonials { position: relative; border: 2px solid var(--purple); background: var(--cream); padding: clamp(2rem, 3.6vw, 4.25rem) clamp(1.5rem, 4vw, 5rem) clamp(2.5rem, 4.5vw, 5rem); overflow: hidden; } .testimonials::before { content: ''; position: absolute; inset: 0; background: url('../img/fern-pattern.png') center / cover no-repeat; opacity: .5; } .testimonials > * { position: relative; } .testimonials__grid { display: grid; gap: clamp(2rem, 3.5vw, 4rem); margin-top: clamp(1.5rem, 2.6vw, 2.5rem); } .quote__mark { width: clamp(2.75rem, 4vw, 4.75rem); margin-bottom: 1rem; } /* ========================================================================= Process ========================================================================= */ .process { position: relative; overflow: hidden; padding-bottom: clamp(1.5rem, 3vw, 3rem); } /* blob clips at this section's own top edge, which sits flush against testimonials */ .process .blob { width: clamp(18rem, 48vw, 58rem); aspect-ratio: 1; top: clamp(-20rem, -16vw, -13rem); left: 24%; /* pulled toward centre */ } .process__grid { position: relative; z-index: 1; display: grid; gap: clamp(2rem, 4vw, 5.5rem); align-items: center; } .process__copy > * + * { margin-top: clamp(1.25rem, 2vw, 2rem); } /* smaller step boxes on the right */ .process .accordion__btn { font-size: clamp(1rem, 1.25vw, 1.375rem); padding: clamp(.7rem, 1.1vw, .95rem) clamp(.9rem, 1.4vw, 1.45rem); } .process .accordion__btn img { width: clamp(1rem, 1.5vw, 1.75rem); } .accordion { display: grid; gap: clamp(.75rem, 1.2vw, 1.375rem); } .accordion__item { background: var(--cream); border: 2px solid var(--coral); } .accordion__btn { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: clamp(.9rem, 1.4vw, 1.15rem) clamp(1rem, 1.7vw, 2rem); font-size: var(--fs-lead); font-weight: 700; text-align: left; } .accordion__btn img { width: clamp(1.25rem, 1.9vw, 2.375rem); flex: none; transition: transform .25s ease; } .accordion__btn[aria-expanded='true'] img { transform: rotate(180deg); } .accordion__panel { display: none; padding: 0 clamp(1rem, 1.7vw, 2rem) clamp(1rem, 1.6vw, 1.5rem); } .accordion__panel.is-open { display: block; } /* ========================================================================= Outcomes (tabs) ========================================================================= */ .outcomes { position: relative; padding-top: calc(var(--wave-h) * .75 + var(--section-y)); } /* blob is free to bleed down into Methods below; the exact 1cm symmetry is computed in main.js */ .tabs__list { display: flex; flex-wrap: wrap; gap: clamp(.5rem, .8vw, .9rem); } .tabs__tab { display: inline-flex; align-items: center; gap: .6rem; padding: clamp(.7rem, 1.1vw, 1.15rem) clamp(.85rem, 1.5vw, 1.7rem); background: var(--cream); border: 2px solid var(--coral); font-size: clamp(.95rem, 1.15vw, 1.6875rem); font-weight: 700; line-height: 1.2; } .tabs__tab img { width: clamp(1rem, 1.35vw, 1.9375rem); flex: none; } .tabs__tab[aria-selected='true'] { background: var(--coral); color: #fff; } .tabs__tab[aria-selected='true'] img { filter: brightness(0) invert(1); } .tabs__panel { position: relative; /* keeps the ripple blob behind the panel */ z-index: 1; background: var(--cream); border: 2px solid var(--coral); padding: clamp(1.5rem, 3vw, 3.5rem); margin-top: -2px; } .tabs__list { position: relative; z-index: 1; } .tabs__panel[hidden] { display: none; } .tabs__panel-grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; } .arrow-list { display: grid; gap: clamp(.9rem, 1.5vw, 1.6rem); margin-top: 1.75rem; } .arrow-list li { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start; } .arrow-list img { width: clamp(1rem, 1.25vw, 1.5rem); margin-top: .3em; } .ripple { position: relative; display: grid; place-items: center; text-align: center; margin-top: clamp(-3rem, -4vw, -1.5rem); /* ~60% tighter: the circle now hugs the text instead of floating in space */ padding: clamp(1.25rem, 2.5vw, 2.5rem) clamp(1.5rem, 4vw, 4rem); min-height: min(80vw, 40rem); } .ripple .blob { width: min(80vw, 40rem); aspect-ratio: 1; top: 0; left: 50%; transform: translateX(-50%); } .ripple p { position: relative; z-index: 1; max-width: 33rem; } /* ========================================================================= Methods ========================================================================= */ .methods { padding-block: clamp(4rem, 9vw, 11rem); } /* more air around the heading */ .methods__head { max-width: 56rem; margin-inline: auto; text-align: center; padding-block: clamp(1rem, 3vw, 3.5rem); } .methods__head > * + * { margin-top: clamp(1.25rem, 2.4vw, 2.25rem); } .methods__grid { display: grid; gap: clamp(1.5rem, 3vw, 3.5rem); margin-top: clamp(3rem, 6vw, 6.5rem); } .method-card { display: flex; flex-direction: column; padding: clamp(5px, .52vw, 10px); background: var(--grad-frame); } .method-card:nth-child(2) { background: linear-gradient(100deg, var(--purple), var(--coral)); } .method-card__inner { display: flex; flex-direction: column; gap: clamp(1rem, 1.8vw, 1.75rem); height: 100%; padding: clamp(1.5rem, 2.6vw, 3rem); background: var(--cream); color: var(--ink); } /* The Figma exports carry a white plate behind the flat artwork; multiplying drops it onto the cream card exactly as the mockup shows it. */ .method-card__art { margin-inline: auto; max-height: 24rem; width: auto; mix-blend-mode: multiply; } .method-card__inner .btn { align-self: flex-start; margin-top: auto; } .methods__note { margin-top: clamp(2rem, 4vw, 4rem); font-style: italic; font-size: clamp(1.0625rem, 1.35vw, 1.625rem); text-align: center; max-width: 53rem; margin-inline: auto; } /* ========================================================================= Blog ========================================================================= */ .blog { padding-top: calc(var(--wave-h) * .75 + var(--section-y)); } .blog__grid { display: grid; gap: clamp(1.75rem, 3.4vw, 4.5rem); margin-top: clamp(2rem, 3.6vw, 4rem); } .blog-card { text-align: center; } .blog-card__thumb { aspect-ratio: 479 / 575; background: var(--navy); margin-bottom: clamp(1.25rem, 2.2vw, 2rem); } .blog-card__thumb img { width: 100%; height: 100%; object-fit: cover; } .blog-card h3 { font-size: var(--fs-lead); font-weight: 700; } .blog-card p { margin-top: 1rem; } .blog-card__more { display: inline-block; margin-top: 1.25rem; font-size: var(--fs-lead); } .blog-card__more:hover { color: var(--purple); } /* ========================================================================= Closing CTA ========================================================================= */ .cta { position: relative; background: var(--shell); overflow: hidden; padding-top: calc(var(--wave-h) * .75 + var(--section-y)); } .cta .blob { width: clamp(22rem, 66vw, 79rem); aspect-ratio: 1; bottom: clamp(-34rem, -24vw, -13rem); /* lower */ left: clamp(-28rem, -19vw, -11rem); /* slightly more to the left */ } .cta__grid { position: relative; z-index: 1; display: grid; gap: clamp(2rem, 4vw, 5rem); align-items: center; } .cta__copy > * + * { margin-top: clamp(1.25rem, 2.2vw, 2.25rem); } /* larger button text in the closing CTA */ .cta__actions .btn { font-size: clamp(1rem, 1.35vw, 1.375rem); padding: 1.25rem 1.9rem; } /* ========================================================================= Footer ========================================================================= */ .site-footer { border-top: 1px solid var(--coral); border-bottom: 1px solid var(--coral); background: #fff; padding-block: clamp(2.5rem, 4vw, 4.5rem); } .site-footer__inner { display: grid; gap: clamp(2rem, 3vw, 3rem); align-items: center; justify-items: center; text-align: center; } .site-footer__mark { width: clamp(8rem, 10.7vw, 12.875rem); } .footer-nav { display: grid; gap: clamp(1rem, 1.6vw, 1.75rem); } .footer-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(.75rem, 1.5vw, 1.75rem); } .footer-nav a { font-size: var(--fs-nav); text-transform: uppercase; letter-spacing: .01em; } .footer-nav a:hover { color: var(--purple); } .socials { display: flex; justify-content: center; gap: clamp(1rem, 1.7vw, 1.5rem); } .socials img { width: clamp(1.4rem, 1.7vw, 2.0625rem); } .site-footer__badge { width: clamp(4.5rem, 7.25vw, 8.75rem); } /* ========================================================================= About page ========================================================================= */ .about-hero { position: relative; display: grid; place-items: center; min-height: clamp(14rem, 26vw, 30rem); padding-block: clamp(3rem, 6vw, 7rem); /* clean rectangular photo — the purple-red wave divider now lives below */ background: #0e0e0e url('../img/about-hero.png') center / cover no-repeat; color: #fff; text-align: center; } .about-hero__title { position: relative; z-index: 1; } /* Light section under the hero: its wave paints the purple-red curved divider, masking this section's top with white so the dark hero shows above the curve. */ .about-intro { position: relative; padding-top: clamp(1rem, 1.6vw, 2rem); } /* Lift the card's container above the wave (z-index:2) so the card sits on top of the curve — straddling it — instead of the curve masking it. */ .about-intro > .container { position: relative; z-index: 3; } .about-certs__card { padding-block: clamp(1.75rem, 3vw, 3rem); } .about-certs__logos { justify-content: center; } /* Decorative orange circles, echoing the Figma layout. No overflow clipping here: about-story's blob bleeds up into the divider above it, and about-why's blob is precisely clipped to the curve of the divider below it via JS (see main.js) rather than a flat section edge, so it visually crosses under the curve and disappears right where the photo begins. Horizontal clipping is handled once, globally, on body/html. about-why gets z-index so its blob paints above about-cta (later in the DOM) up to that JS-computed clip line. */ .about-story { position: relative; } .about-why { position: relative; z-index: 1; } .about-story > .container, .about-why > .container { position: relative; z-index: 1; } .about-story .blob { width: clamp(20rem, 42vw, 46rem); aspect-ratio: 1; top: clamp(-9rem, -7vw, -1rem); left: clamp(-26rem, -17vw, -11rem); } .about-why .blob { width: clamp(20rem, 42vw, 46rem); aspect-ratio: 1; top: clamp(4rem, 20vw, 25rem); right: clamp(-24rem, -16vw, -10rem); /* Never show past the wave divider below — clip the blob's own bottom edge at roughly where the curve sits, instead of relying on stacking order (which would otherwise paint the whole blob over the photo). */ clip-path: inset(0 0 17% 0); } .about-quote { background: var(--shell); padding-block: clamp(3rem, 6vw, 7rem); text-align: center; } .about-quote__display { background: linear-gradient(180deg, var(--blob-b), var(--blob-a)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.15; max-width: 55rem; margin-inline: auto; } .about-quote__sub { max-width: 55rem; margin: clamp(1.5rem, 2.5vw, 2.25rem) auto 0; } /* The band photo is pre-dimmed and carries its own wavy top cut out to white, so it needs no scrim — a CSS overlay would grey out that cut-out. */ .about-cta { position: relative; background: #fff url('../img/about-darkband.jpg') center top / cover no-repeat; color: #fff; text-align: center; padding-block: calc(var(--wave-h) * .8 + var(--section-y)) var(--section-y); } .about-cta__inner { display: grid; justify-items: center; gap: clamp(1.5rem, 2.6vw, 2.5rem); max-width: 46rem; margin-inline: auto; } .about-cta__actions { align-items: center; } .about-cta__actions .btn { min-width: min(100%, 20rem); } .substack-embed { width: 100%; max-width: 480px; aspect-ratio: 480 / 320; position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 45px -18px rgba(0, 0, 0, .6); } /* The iframe keeps the exact width/height attributes Substack gave us (so the embed code stays copy-paste identical to what they provided) — this just visually scales it to fill the aspect-ratio box above, so it shrinks proportionally on narrow screens instead of staying a fixed 320px tall and inflating the section (which was throwing off the curve above it). */ .substack-embed iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; } /* ========================================================================= Responsive ========================================================================= */ @media (min-width: 48rem) { .testimonials__grid { grid-template-columns: repeat(3, 1fr); } .blog__grid { grid-template-columns: repeat(3, 1fr); } .methods__grid { grid-template-columns: repeat(2, 1fr); } .site-footer__inner { grid-template-columns: auto 1fr auto; text-align: left; } } @media (min-width: 64rem) { .hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: start; } .hero__copy { grid-column: 1; grid-row: 1; } .hero__media { grid-column: 2; grid-row: 1 / span 2; } .hero__sub { grid-column: 1; grid-row: 2; } .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .split--media-right .split__media { order: 2; } .split--media-left .split__media { order: -1; } .process__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); } .tabs__panel-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } .cta__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* Below the two-column breakpoint, .split stacks into a single column with copy above media (see DOM order), so the blob's fixed "right" offset now sits under the text block instead of the photo. Push it down to clear the copy and land beside the photo instead, as intended. */ @media (max-width: 63.999rem) { .about-why .blob { top: 33rem; } } /* Mobile navigation ------------------------------------------------------ */ @media (max-width: 63.999rem) { .nav-toggle { display: block; } .site-nav { position: absolute; inset: 100% 0 auto 0; background: #fff; border-bottom: 1px solid var(--coral); padding: 1rem var(--gutter) 1.75rem; display: none; box-shadow: 0 18px 30px -22px rgba(0, 0, 0, .45); } .site-nav.is-open { display: block; } .nav__list { flex-direction: column; gap: 1rem; } .nav__list a { font-size: 1.375rem; } .tabs__list { flex-direction: column; } .tabs__tab { width: 100%; } .method-card__inner .btn { align-self: stretch; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ========================================================================= Featured Media ========================================================================= */ .media-hero { position: relative; display: grid; place-items: center; min-height: clamp(14rem, 26vw, 30rem); padding-block: clamp(3rem, 6vw, 7rem); /* Dark scrim over the photo — it's full-colour (not naturally dark like about-hero.png), so the overlay guarantees the white title stays legible, and gives the wave divider below a true-black tone to match. */ background: linear-gradient(rgba(14, 14, 14, .5), rgba(14, 14, 14, .5)), url('../img/filip-river.jpg') 30% 20% / cover no-repeat; color: #fff; text-align: center; } .media-hero__inner { position: relative; z-index: 1; max-width: 38rem; margin-inline: auto; display: grid; gap: 1rem; } /* Light section under the hero, same straddling-card technique as about-intro: the wave paints the curve, the card sits on top of it. */ .media-intro { position: relative; padding-top: clamp(1rem, 1.6vw, 2rem); } .media-intro > .container { position: relative; z-index: 3; } .section--shell { background: var(--shell); } .media-section__head { max-width: 46rem; margin-inline: auto; text-align: center; } .media-section__head > * + * { margin-top: .75rem; } .media-grid { display: grid; gap: clamp(1.5rem, 3vw, 3.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); } @media (min-width: 64rem) { .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .media-card__inner .btn-row { margin-top: auto; } .method-card__inner .h3 { font-size: calc(var(--fs-h3) * .8); } .media-card__meta { font-size: .95rem; opacity: .75; } .media-card__player { border-radius: 12px; overflow: hidden; } .media-card__alt { font-size: .9375rem; } .media-card__alt a { color: var(--purple); font-weight: 700; } .media-video-card { max-width: 50rem; margin-inline: auto; } .media-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; } .media-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .media-video-link { display: block; } .media-video--thumb { background: #000; } .media-video--thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; } .media-video-link:hover .media-video--thumb img { transform: scale(1.03); } .media-video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(3.5rem, 6vw, 4.75rem); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--grad-blob); color: #fff; font-size: clamp(1.25rem, 2vw, 1.75rem); padding-left: .2em; /* optically centre the triangle glyph */ box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .55); transition: transform .2s ease; } .media-video-link:hover .media-video__play { transform: translate(-50%, -50%) scale(1.08); } /* ========================================================================= Mediation ========================================================================= */ .mediation { position: relative; overflow: hidden; padding-block: clamp(4rem, 8vw, 8rem); } .mediation .blob { width: clamp(20rem, 42vw, 46rem); aspect-ratio: 1; top: clamp(-4rem, 4vw, 6rem); left: clamp(-26rem, -17vw, -11rem); } .mediation__inner { position: relative; z-index: 1; max-width: 46rem; } .mediation__inner > h1 { margin-bottom: clamp(2rem, 4vw, 3.5rem); } .mediation__block > * + * { margin-top: 1.1em; } .mediation__block address { font-style: normal; } .mediation__block .eyebrow { margin-bottom: .5rem; } .mediation__divider { height: 1px; background: var(--coral); opacity: .4; margin-block: clamp(2.5rem, 5vw, 4rem); } @media (max-width: 40rem) { .mediation .blob { width: 12rem; top: -2rem; left: -6rem; } } .mediation__figure { margin: 0; padding: clamp(5px, .52vw, 10px); background: var(--grad-frame); border-radius: 10px; line-height: 0; } .mediation__figure img { width: 100%; height: auto; display: block; border-radius: 6px; }