/* ========================================================================== Позволение — Янина Христова Single landing page. Layout geometry that genuinely varies per instance (figure height, column ratio, image focal point) is passed in from the markup as a custom property; everything else lives here. ========================================================================== */ :root { --ground-warm: #f3ecda; --ground-sand: #e7e1d3; --ink: #2a2521; --ink-soft: #514b43; --sage: #8b8f74; --gold: #b3965a; --gold-deep: #9a7f45; --surface: #fbf6ea; --cream: #f7f0e2; --border: rgba(42, 37, 33, .16); --rule: rgba(42, 37, 33, .22); --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --wrap: 1200px; --gutter: 64px; --band: 88px; --radius: 22px; --shadow: 0 24px 60px -30px rgba(42, 37, 33, .4); } /* --------------------------------------------------------------- base --- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ground-warm); font-family: var(--font-body); color: var(--ink); overflow-x: hidden; -webkit-font-smoothing: antialiased; /* With a browser applies Bulgarian localised letterforms: д, и, л, п, т take cursive-like shapes. Handsome, but not what the approved design showed, and this page is dense body copy. This declaration alone is NOT enough — WebKit ignores it and renders the localised glyphs regardless, so Safari disagreed with Chrome. The actual fix is in fetch_fonts.py, which deletes the `locl` feature from the woff2s. This line still earns its place for the system-ui fallback, which is what renders if the webfont fails to load. */ font-feature-settings: "locl" 0; } svg { display: block; } /* The UA sheet's `[hidden] { display: none }` loses to any author rule that sets display — `.form { display: flex }` meant setting form.hidden did nothing at all, and the thank-you panel stacked below the live form. */ [hidden] { display: none !important; } a { color: var(--gold-deep); text-decoration: none; } a:hover { color: var(--ink); } ::selection { background: rgba(179, 150, 90, .28); } [id] { scroll-margin-top: 70px; } .skip-link { position: absolute; top: 0; left: -9999px; z-index: 100; padding: 12px 20px; background: var(--ink); color: var(--cream); font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 1; border-radius: 0 0 10px 0; } .skip-link:focus { left: 0; color: var(--cream); } /* ------------------------------------------------------------- layout --- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--band); } .section--warm { background: var(--ground-warm); } .section--sand { background: var(--ground-sand); } /* Column ratios go through --cols rather than `grid-template-columns` directly, so the mobile rule further down can collapse the grid by setting the real property — no !important needed. The original design used six ratios that all sat within 5% of each other (1fr 1.05fr, .95fr 1.05fr, 1.05fr .95fr …); they are rationalised here to the three that are actually distinguishable. */ .split { display: grid; grid-template-columns: var(--cols, 1fr 1fr); gap: 80px; align-items: center; } .split--text-wide { --cols: .9fr 1.1fr; } .split--text-lead { --cols: 1.1fr .9fr; } .split--top { align-items: start; } .split--intro { margin-bottom: 96px; } /* ------------------------------------------------------------ figures --- */ .figure { margin: 0; height: var(--h, 640px); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); /* --ph is the photo's average colour: it fills the frame while the image decodes, so a slow connection never shows a bright empty box. */ background: var(--ph, var(--ground-sand)); } .figure picture { display: block; width: 100%; height: 100%; } .figure img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); } .figure--sticky { position: sticky; top: 60px; } .figure--band { margin-bottom: 72px; } /* One modifier per photograph: its designed frame height, the average colour used as the pre-decode placeholder, and its focal point. Values for --ph come from build_images.py, which writes them into public/img/manifest.json. */ .figure--hug { --h: 620px; --ph: #918c7e; --pos: center 30%; } .figure--reeds-hand { --h: 640px; --ph: #606057; --pos: center 22%; } .figure--lying { --h: 660px; --ph: #7e816c; --pos: center 40%; } .figure--grotto { --h: 680px; --ph: #696f61; --pos: center 35%; } .figure--reeds-portrait { --h: 660px; --ph: #61675f; --pos: center 20%; } .figure--sunflower { --h: 600px; --ph: #a27552; --pos: center 30%; } /* Landscape master (2048x1314) framed for this band, so plain centring shows the whole composition — only a little sky and sand fall outside. */ .figure--healing { --h: 560px; --ph: #a19d93; } .figure--sea-standing { --h: 560px; --ph: #87939a; } .figure--sea-kick { --h: 680px; --ph: #8a979d; } .figure--sunset-field { --h: 640px; --ph: #6d6b5c; } /* --------------------------------------------------------------- hero --- */ .hero { position: relative; isolation: isolate; display: flex; flex-direction: column; /* Anchored to the top rather than centred. The figure lies across the middle of the frame with her arm outstretched to the left, so the copy has to sit above that band — centring pushed it straight onto her hand. */ justify-content: flex-start; min-height: 100vh; min-height: 100svh; padding-top: clamp(48px, 5.5vh, 120px); padding-bottom: clamp(90px, 20vh, 260px); } .hero__media { position: absolute; inset: 0; z-index: -2; background: #6d6a60; } .hero__media picture { display: block; width: 100%; height: 100%; } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 25% 18%; } /* Two stacked scrims: the vertical one sits over the horizontal one, matching the original's DOM order (first background layer paints on top). */ .hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(28, 26, 22, .28) 0%, transparent 22%, transparent 70%, rgba(28, 26, 22, .55) 100%), linear-gradient(90deg, rgba(28, 26, 22, .72) 0%, rgba(28, 26, 22, .42) 38%, rgba(28, 26, 22, .08) 62%, rgba(28, 26, 22, .32) 100%); } /* Deliberately NOT .wrap. A centred 1200px column pushes this text further and further right as the viewport widens — at 2560px it started 744px in, landing squarely on the figure and in the pale part of the scrim. Pinning it near the left edge keeps it clear of her and inside the dark end of the gradient. */ .hero__body { position: relative; width: 100%; padding-inline: clamp(22px, 5vw, 128px); } .eyebrow { display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(18px, 2.6vh, 30px); font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 1; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); } .eyebrow__rule { flex: none; width: 46px; height: 1.5px; background: currentColor; } /* Both the quote mark and the rule below tighten on short viewports, which is where every spare pixel counts for keeping the headline clear of her arm. */ .hero__quote { height: clamp(30px, 4.4vh, 46px); font-family: var(--font-display); font-size: clamp(58px, 8vh, 88px); line-height: 1; color: var(--gold); opacity: .9; } .hero__title { margin: 14px 0 0; /* Narrower than the old flat 640px: it wraps to four shortish lines that stop before the figure, instead of one 640px line running across her. */ max-width: clamp(320px, 44vw, 600px); font-family: var(--font-display); font-weight: 500; /* 56px over four lines rather than 64px over three: the shorter measure keeps the headline off the figure, and it matches the four-line break the original design render actually showed. */ font-size: clamp(34px, 5.2vw, 64px); line-height: 1.14; letter-spacing: -.01em; color: var(--cream); text-wrap: pretty; } .hero__rule { width: 88px; height: 1.5px; margin-top: clamp(26px, 5vh, 56px); background: rgba(247, 240, 226, .55); } /* Uses `translate` rather than `transform` so the bob animation cannot clobber the horizontal centring, which is what happened in the original. */ .hero__scroll { position: absolute; bottom: 40px; left: 50%; translate: -50% 0; color: var(--cream); animation: bob 2.4s ease-in-out infinite; } .hero__scroll:hover { color: var(--gold); } @keyframes bob { 0%, 100% { translate: -50% 0; opacity: .75; } 50% { translate: -50% 9px; opacity: 1; } } /* ---------------------------------------------------------------- nav --- */ .nav { position: fixed; inset: 0 0 auto; z-index: 30; background: rgba(243, 236, 218, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(42, 37, 33, .12); transform: translateY(-100%); transition: transform .4s cubic-bezier(.4, 0, .2, 1); will-change: transform; } .nav.is-visible { transform: translateY(0); } .nav__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 30px); max-width: var(--wrap); margin-inline: auto; padding: 14px clamp(20px, 5vw, 64px); } .nav__link { font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 1; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; transition: color .2s; } .nav__link:hover { color: var(--gold-deep); } .nav__dot { width: 3px; height: 3px; border-radius: 999px; background: var(--gold); opacity: .55; } .nav__cta { margin-left: 8px; padding: 11px 22px; font-family: var(--font-body); font-weight: 600; font-size: 12px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--cream); background: var(--gold-deep); border-radius: 999px; white-space: nowrap; transition: background .2s; } .nav__cta:hover { background: var(--ink); color: var(--cream); } /* --------------------------------------------------------------- type --- */ .prose > p { margin: 0 0 26px; font-size: 20px; line-height: 1.82; color: var(--ink-soft); text-wrap: pretty; } .prose > p:last-child { margin-bottom: 0; } .prose--lg > p { margin-bottom: 30px; font-size: 22px; line-height: 1.75; } .prose--md > p { font-size: 21px; line-height: 1.8; } .prose__accent { color: var(--ink); line-height: 1.85; } /* Declared after `.prose > p` (same specificity) so these win inside prose. */ p.kicker { margin: 0 0 28px; font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 1.5; letter-spacing: .24em; text-transform: uppercase; color: var(--sage); } .h2 { margin: 0 0 34px; font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 4.2vw, 46px); line-height: 1.14; color: var(--ink); text-wrap: pretty; } .h2--sm { font-size: clamp(26px, 3.3vw, 36px); line-height: 1.28; } .h2--md { font-size: clamp(26px, 4vw, 44px); line-height: 1.22; } .h2--lg { font-size: clamp(26px, 4.2vw, 46px); line-height: 1.13; } .h2--xl { font-size: clamp(28px, 4.8vw, 52px); line-height: 1.13; } .h2--display { font-size: clamp(30px, 4.8vw, 58px); line-height: 1.1; } .h2--loose { margin-bottom: 64px; } .h2--flush { margin-bottom: 0; } .h3 { margin: 0 0 18px; font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 1.9vw, 24px); line-height: 1.25; color: var(--ink); } .h3--lg { margin-bottom: 20px; font-size: clamp(20px, 2.1vw, 26px); line-height: 1.2; } p.pull { margin: 0 0 26px; font-family: var(--font-display); font-style: italic; font-size: clamp(21px, 2vw, 24px); line-height: 1.5; color: var(--ink); } p.pull--sage { font-size: clamp(21px, 2.2vw, 26px); color: var(--sage); } p.pull--wide { max-width: 620px; margin: 64px 0 0; font-size: clamp(21px, 2.2vw, 26px); color: var(--sage); } p.litany { margin: 0 0 40px; font-family: var(--font-display); font-size: clamp(21px, 2.2vw, 27px); line-height: 1.65; color: var(--ink); } .program__title { max-width: 22ch; margin-bottom: 56px; text-wrap: balance; } /* -------------------------------------------------------------- cards --- */ .cards { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 56px; margin: 0; padding: 0; list-style: none; } .cards--3 { --n: 3; } .cards--4 { --n: 4; gap: 44px; } .card { padding-top: 28px; border-top: 1.5px solid var(--rule); } .weeks .card { padding-top: 26px; } .card__step { margin: 0 0 18px; font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 1; letter-spacing: .2em; text-transform: uppercase; color: var(--sage); } .card__text { margin: 0 0 20px; font-size: 17px; line-height: 1.7; color: var(--ink-soft); } .card__text:last-child { margin-bottom: 0; } .card__text--lg { font-size: 18px; line-height: 1.8; } .card__text--airy { line-height: 1.95; } /* ---------------------------------------------------------- practical --- */ /* Key/value pairs for the format and price lines. */ .facts { display: grid; gap: 20px; margin: 34px 0 30px; } .facts:last-child { margin-bottom: 0; } .facts__row { display: grid; grid-template-columns: 92px 1fr; gap: 20px; align-items: baseline; padding-top: 16px; border-top: 1px solid var(--rule); } .facts__key { font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 1.5; letter-spacing: .2em; text-transform: uppercase; color: var(--sage); } .facts__value { margin: 0; font-size: 18px; line-height: 1.7; color: var(--ink-soft); } /* ---------------------------------------------------- contraindications --- */ .notes { display: grid; gap: 20px; max-width: 860px; margin: 0; padding: 0; list-style: none; } .notes li { position: relative; padding-left: 34px; font-size: 19px; line-height: 1.7; color: var(--ink-soft); } .notes li::before { content: ""; position: absolute; top: .78em; left: 0; width: 18px; height: 1.5px; background: var(--gold); } /* Lead-in and follow-up copy either side of a .notes list. */ .notes-lead, .notes-after { max-width: 860px; font-size: 19px; line-height: 1.7; color: var(--ink-soft); } .notes-lead { margin: 0 0 28px; } .notes-after { margin: 36px 0 0; } /* A second closing paragraph sits closer than the first does to the list. */ .notes-after + .notes-after { margin-top: 20px; } /* The variant used inside .prose, where the list sits between paragraphs and has to match their type size rather than the standalone section's. */ .prose .notes { gap: 14px; margin: 0 0 26px; } .prose .notes li { padding-left: 30px; font-size: 18px; line-height: 1.75; } /* A run-in heading inside a long prose column. */ .prose .subhead { margin-top: 42px; margin-bottom: 16px; } /* ------------------------------------------------------------- quotes --- */ /* The testimonials run from one line to a full paragraph, so they are laid out in balanced columns rather than a grid — no card is stretched to match a neighbour, and nothing is left with a ragged gap beneath it. */ .quotes { columns: 3; column-gap: 40px; } .quote { break-inside: avoid; margin: 0 0 40px; padding: 30px 32px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; } .quote blockquote { margin: 0 0 18px; font-size: 17px; line-height: 1.75; color: var(--ink-soft); } .quote figcaption { font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--sage); } .quote figcaption::before { content: "— "; } /* --------------------------------------------------------------- video --- */ .video__title { margin-bottom: 44px; text-align: center; } .video { display: flex; justify-content: center; } /* The source is 720x1280, but it is presented at a calm reading size rather than full width — the width/height attributes on the element only reserve the right ratio before the metadata loads. */ .video__player { display: block; width: 100%; /* The height attribute on the element is a presentational hint that would otherwise win over aspect-ratio and render the video 1280px tall. */ height: auto; max-width: 400px; aspect-ratio: 9 / 16; object-fit: cover; background: #26221d; border-radius: var(--radius); box-shadow: var(--shadow); } /* Only ever seen if the browser can play neither the source nor MP4 at all. */ .video__fallback { margin: 0; padding: 24px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); } /* --------------------------------------------------------------- form --- */ /* Chrome's UA stylesheet sets the `font` shorthand on form controls, which resets font-feature-settings — so the locl choice made on `body` has to be restated here or placeholders revert to the Bulgarian forms. */ input, textarea, select, button, ::placeholder { font-feature-settings: "locl" 0; } .form { display: flex; flex-direction: column; gap: 20px; } .field { display: flex; flex-direction: column; gap: 8px; } .field__label { font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); } .field__hint { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--sage); } .field__input { width: 100%; padding: 14px 16px; font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; outline: none; transition: border-color .2s, background .2s, box-shadow .2s; } textarea.field__input { min-height: 120px; resize: vertical; } /* The captcha answer is one or two digits — a full-width box invites an essay. */ .field__input--short { max-width: 200px; } .field__sum { font-weight: 600; letter-spacing: .04em; color: var(--ink); } .field__input::placeholder { color: rgba(81, 75, 67, .5); } .field__input:focus { border-color: var(--gold); background: #fff; box-shadow: 0 0 0 3px rgba(179, 150, 90, .18); } .field__input[aria-invalid="true"] { border-color: #b0523f; } .consent { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); cursor: pointer; } .consent input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--gold-deep); cursor: pointer; } /* Bait for spam bots; never shown, never announced. */ .honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .button { align-self: flex-start; margin-top: 4px; padding: 16px 40px; font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--cream); background: var(--gold-deep); border: none; border-radius: 999px; cursor: pointer; transition: background .2s, opacity .2s; } .button:hover { background: var(--ink); } .button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .button[disabled] { opacity: .55; cursor: progress; } .form__status { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft); } .form__status:empty { display: none; } .form__status--error { color: #8c3b2e; } .thanks { padding: 40px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; } .thanks__title { margin: 0 0 14px; font-family: var(--font-display); font-size: 26px; color: var(--ink); } .thanks__text { margin: 0; font-size: 18px; line-height: 1.7; color: var(--ink-soft); } /* -------------------------------------------------------------- modal --- */ /* A native : the browser gives focus trapping, Esc-to-close and the top layer for free, so none of that has to be reimplemented. */ .modal { /* No `position` here on purpose. The UA sheet gives an open modal dialog `position: fixed; inset: 0`, and that plus `margin: auto` is what centres it — setting `position: relative` pins it to the top-left instead. It is already a positioned ancestor, so .modal__close still anchors to it. */ width: min(460px, calc(100vw - 44px)); margin: auto; padding: 46px 46px 40px; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 50px 90px -50px rgba(42, 37, 33, .7); animation: modal-in .28s cubic-bezier(.2, .8, .3, 1); } .modal::backdrop { background: rgba(28, 26, 22, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: modal-fade .28s ease; } @keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.97); } } @keyframes modal-fade { from { opacity: 0; } } .modal__close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; color: var(--ink-soft); background: none; border: none; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; } .modal__close:hover { background: rgba(42, 37, 33, .07); color: var(--ink); } .modal__close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .modal__title { margin: 0 0 14px; font-family: var(--font-display); font-size: 30px; line-height: 1.2; color: var(--ink); } .modal__text { margin: 0 0 32px; font-size: 18px; line-height: 1.7; color: var(--ink-soft); } .modal__action { margin-top: 0; } /* ------------------------------------------------------------- footer --- */ .footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 64px; background: #26221d; } .footer__name { font-family: var(--font-display); font-size: 22px; color: #f4ecdb; } .footer__tag { font-family: var(--font-body); font-weight: 400; font-size: 13px; line-height: 1.5; letter-spacing: .24em; text-transform: uppercase; color: rgba(244, 236, 219, .55); } /* --------------------------------------------------------- responsive --- */ @media (max-width: 1024px) { :root { --gutter: 40px; --band: 72px; } .split { gap: 48px; } .cards--4 { --n: 2; } .split--intro { margin-bottom: 72px; } .quotes { columns: 2; column-gap: 32px; } } @media (max-width: 768px) { /* A phone crops the photo to a tall portrait, so the figure sits lower and the top-anchoring the wide layout needs would leave the headline stranded small against a mostly empty frame. Larger type, dropped down the fold. */ .hero { padding-top: 16vh; padding-bottom: 12vh; } /* The 44vw measure that keeps the headline off the figure on wide screens is far narrower than the column here, and squeezed the text into six ragged lines. On a phone there is no figure beside it to avoid — let it fill. */ .hero__title { max-width: none; font-size: clamp(38px, 10.5vw, 46px); } :root { --gutter: 22px; --band: 60px; } /* Overrides `grid-template-columns: var(--cols)` from .split — the markup only sets the variable, so no !important is needed. */ .split { grid-template-columns: 1fr; gap: 34px; } .split--intro { margin-bottom: 56px; } .cards { --n: 1; gap: 40px; } .figure { height: auto; aspect-ratio: 4 / 3; } .figure--sticky { position: static; } .figure--band { margin-bottom: 48px; } /* A phone crops the 1.6:1 photo hard. At 14% only her forearm survived; 24% brings her head and shoulder into frame beside the headline without pushing her under the densest part of it. */ .hero__media img { object-position: 24% 42%; } .hero__quote { height: 40px; font-size: 72px; } .hero__rule { margin-top: 36px; } .prose > p, .prose--lg > p, .prose--md > p, .card__text, .card__text--lg { font-size: 17px; line-height: 1.7; } .prose--lg > p { margin-bottom: 26px; } .card__text--airy { line-height: 1.9; } p.pull, p.pull--sage, p.pull--wide, p.litany { font-size: 21px; line-height: 1.55; } p.pull--wide { margin-top: 44px; } .h2--loose { margin-bottom: 40px; } .program__title { margin-bottom: 40px; } .facts__row { grid-template-columns: 1fr; gap: 6px; } .notes { gap: 16px; } .notes li, .prose .notes li { padding-left: 28px; font-size: 17px; line-height: 1.7; } .notes-lead, .notes-after { font-size: 17px; line-height: 1.7; } .notes-lead { margin-bottom: 22px; } .notes-after { margin-top: 26px; } .prose .subhead { margin-top: 32px; } .quotes { columns: 1; } .quote { margin-bottom: 22px; padding: 24px 24px 22px; } .video__title { margin-bottom: 30px; } .video__player { max-width: 320px; } .thanks { padding: 28px; } .footer { padding: 40px 22px; gap: 14px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }