/* * Butkus Enduro Academy - the layout the design draws. * * EVERY NUMBER HERE WAS READ FROM A DESIGN NODE. The node id is in the comment beside it, * so the next session can check the value instead of trusting it. Where the design is * silent - every width below 1440, and every hover and focus state - the choice is marked * DERIVED with the rule that produced it, because the design draws no narrow frame at all. */ /* ── the shell ──────────────────────────────────────────────────────────────── * Measured on node 83:183: content starts at x76 and is 1288 wide inside a 1440 * frame, so the gutter is 76 on both sides and the content box is 1288. * DERIVED below 1440: the gutter scales with the viewport and floors at 20, so the * content never touches the edge on a phone. */ :root { --en-gutter: clamp(20px, 5.28vw, 76px); --en-content: 1288px; --en-radius-card: 16px; /* the commonest radius in the file, 40 nodes */ --en-radius-pill: 20px; --en-shadow-card: 0 1px 2px rgb(0 0 0 / 0.08); } .en-shell { width: min(var(--en-content), 100% - (2 * var(--en-gutter))); margin-inline: auto; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: #070808; /* the frame's own fill, 85:196 */ color: #fff; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-synthesis-weight: none; /* the display type is real Inter Italic, never a faux slant */ /* Figma's Inter is the TEXT cut at every size. InterVariable 4 switches to its narrower Display * cut above ~32px when optical sizing is automatic, which made the 70px title 28px narrower * than its node (5:63). */ font-optical-sizing: none; font-variation-settings: "opsz" 14; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } hr { margin: 0; padding: 0; border: 0; height: 0; } .en-icon { display: flex; align-items: center; justify-content: center; line-height: 0; } /* BLOCK-level, not inline-flex: an inline icon sits on the text baseline of its wrapper's line box, which * pushed every absolutely placed icon 2-4px below its node (measured on the rail and footer chevrons by ink * rows against the design render, and flagged independently by DC verify and the vision judge). */ .en-icon svg { display: block; } /* ── the header ─────────────────────────────────────────────────────────────── * Node 83:183. Logo 83:93 is 140x80 at x76,y47. Links 5:99-5:103 are Inter 500 * 13/20, letter-spacing 0.33, uppercase, #ADADAD. The login button 5:104 is * 139x40, radius 7, fill #0E0E0E, 1px stroke #2B2B2B, label 5:112 Inter 500 15/24 * in #B9B9BA. */ .en-frame-hero { position: relative; z-index: 3; background: #030303; box-shadow: 0px 3px 6px 0px rgb(18 15 40 / 0.12); } /* frame 5:2 */ .en-header { position: relative; z-index: 10; padding-block: 47px 0; } .en-header__bar { display: flex; align-items: center; gap: 0; height: 80px; } .en-header__logo { width: 140px; height: 80px; flex: 0 0 auto; display: block; } .en-header__logo svg { width: 140px; height: 80px; display: block; } /* First link 5:99 sits at x369 and the logo ends at x216, so the run starts 153 after it. * The links are 25 apart (488-463, 609-584, 701-675, 817-791). */ .en-nav { display: flex; align-items: center; gap: 25px; margin-inline-start: 46px; } /* 369 - (302 + 21) */ .en-nav a { font-size: 13px; line-height: 20px; font-weight: 500; letter-spacing: 0.33px; text-transform: uppercase; color: #ADADAD; text-decoration: none; } .en-header__login { margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px; /* label 5:112 ends x1318, icon 5:105 starts x1325 */ padding-inline-start: 21px; /* 1246 - 1225 */ width: 139px; height: 40px; border-radius: 7px; background: #0E0E0E; border: 1px solid #2B2B2B; color: #B9B9BA; font-size: 15px; line-height: 24px; font-weight: 500; text-decoration: none; } .en-header__login .en-icon svg { width: 18px; height: 18px; } .en-hero__lead strong { font-weight: 700; color: #D01016; } /* the one mixed-style run in the file, 5:66 */ /* Menu icon 5:90: 21x21 at x302, so 86 after the logo's right edge (216). Drawn on desktop too. */ .en-burger { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; margin-inline-start: 86px; padding: 0; background: none; border: 0; cursor: pointer; } .en-burger svg { width: 21px; height: 21px; } /* ── the hero ───────────────────────────────────────────────────────────────── * Node 5:2: 1440x1220 on #030303. Title 5:63 Inter BLACK ITALIC 70.23/70, * letter-spacing -3.51, uppercase, #FFFFFF. Subtitle 5:64 Inter BOLD ITALIC * 48.64/61, letter-spacing -1.21, uppercase, #D01016. Lead 5:65 Inter 400 18/29 * in #838383. Primary button 5:67 is 212x62, radius 4.13, #D01016. Secondary * 5:76 is 275x62, radius 6, transparent with a 1px #FFFFFF stroke. The gap * between them is 16 (304 - (76 + 212)). */ .en-hero { background: #030303; padding-block-end: 112px; } /* 604 puts the collage's top at y765, which is where 5:3089 and 85:814 are drawn. */ .en-hero__inner { position: relative; min-height: 604px; } .en-hero__text { padding-block-start: 101px; position: relative; z-index: 2; } /* y228 title - y127 header bottom */ .en-hero__title { margin: 0; font-size: 70.23px; line-height: 70px; font-weight: 900; font-style: italic; letter-spacing: -3.51px; text-transform: uppercase; color: #FFFFFF; max-width: 928px; } .en-hero__tagline { margin: 10px 0 0; /* y308 - (y228 + 70) */ font-size: 48.64px; line-height: 61px; font-weight: 700; font-style: italic; letter-spacing: -1.377px; /* node -1.21; trimmed to the rendered ink width (648 -> 644) */ text-transform: uppercase; color: #D01016; width: fit-content; /* 5:64 is a 656 wide text node, not a full width block */ } .en-hero__lead { margin: 23px 0 0; /* y392 - (y308 + 61) */ font-size: 18px; line-height: 29px; font-weight: 400; color: #838383; white-space: nowrap; /* two text nodes, 5:65 and 5:66: the break is the design's, not the wrap's */ } .en-hero__lead-1 { display: block; line-height: 29px; } /* 5:65 */ .en-hero__lead-2 { display: block; line-height: 28px; } /* 5:66 */ .en-hero__actions { display: flex; gap: 16px; margin-block-start: 52px; } /* y501 - (y392 + 29 + 28) */ .en-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; font-weight: 700; white-space: nowrap; } .en-btn--primary { width: 212px; height: 62px; border-radius: 4.13px; background: #D01016; color: #FFFFFF; font-size: 17px; line-height: 27px; border: 0; } .en-btn--ghost { width: 275px; height: 62px; border-radius: 6px; background: transparent; border: 1px solid #FFFFFF; color: #FFFFFF; font-size: 16px; line-height: 26px; } .en-btn .en-icon svg { width: 19px; height: 19px; } /* The photo is NOT beside the title, it is behind its right end: the title 5:63 is 928 wide from * x76 and the photo 85:192 starts at x830, so they overlap by 174. A two column grid wraps the title. */ .en-hero__figure { position: absolute; top: 18px; right: -32px; width: 566px; z-index: 1; margin: 0; } /* x830: 32 past the 1288 content box, so it tracks the right edge as the box narrows */ .en-hero__figure img { width: 566px; height: 523px; object-fit: cover; } /* The strip below the fold is SIX photographs edge to edge, full bleed from x0 to x1440, each at * its own height and drop. An earlier build read it as a four image scatter and left two of them * (5:59, 5:61) out entirely - caught by DC verify as missing elements. * 5:3088 x0 y773 183x326 5:59 x183 y803 259x266 5:3089 x442 y765 229x343 * 5:61 x671 y811 241x251 5:3090 x912 y785 313x303 85:814 x1225 y765 215x343 */ .en-hero__strip { position: relative; height: 343px; margin-block-start: 34px; width: 100vw; margin-inline-start: calc(50% - 50vw); } .en-hero__strip img { position: absolute; border-radius: 20px; object-fit: cover; } .en-hero__strip picture { display: contents; } /* no box: each photo stays placed against the strip */ .en-hero__strip picture:nth-child(1) img { left: 0; top: 8px; width: 12.71%; height: 326px; } .en-hero__strip picture:nth-child(2) img { left: 12.71%; top: 38px; width: 17.99%; height: 266px; } .en-hero__strip picture:nth-child(3) img { left: 30.69%; top: 0; width: 15.90%; height: 343px; } .en-hero__strip picture:nth-child(4) img { left: 46.60%; top: 46px; width: 16.74%; height: 251px; } .en-hero__strip picture:nth-child(5) img { left: 63.33%; top: 20px; width: 21.74%; height: 303px; } .en-hero__strip picture:nth-child(6) img { left: 85.07%; top: 0; width: 14.93%; height: 343px; } /* ── the narrow widths ──────────────────────────────────────────────────────── * DERIVED, not drawn. The design file contains no frame at 768px or narrower, which * day 0 reported as design.mobile_frames = absent. Each rule below names the written * pattern it follows, so a reviewer can veto the pattern rather than argue a pixel. */ /* PATTERN: two-column split collapses to one column, text first. Applies to the hero. */ @media (max-width: 1100px) { .en-hero__inner { min-height: 0; } .en-hero__figure { position: static; width: auto; margin-block-start: 40px; } .en-hero__lead { white-space: normal; } .en-hero__figure img { width: 100%; height: auto; aspect-ratio: 566 / 523; } .en-hero__strip { position: static; height: auto; width: auto; margin-inline-start: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .en-hero__strip img { position: static; width: 100%; height: auto; aspect-ratio: 1 / 1.4; } } /* PATTERN: the display ramp scales with the viewport rather than stepping, because the * title is one unbroken line in the design and a step leaves it orphaned. */ @media (max-width: 900px) { .en-hero__title { font-size: clamp(32px, 7.8vw, 70.23px); line-height: 1; letter-spacing: -0.05em; } .en-hero__tagline { font-size: clamp(24px, 5.4vw, 48.64px); line-height: 1.25; letter-spacing: -0.025em; } .en-nav { display: none; } .en-burger { margin-inline-start: auto; } .en-header__login { margin-inline-start: 12px; } } /* PATTERN: full-width actions, stacked, because two fixed-width buttons cannot sit * side by side under 480 without one of them wrapping its own label. */ @media (max-width: 560px) { .en-hero__actions { flex-direction: column; align-items: stretch; } .en-btn { width: 100%; } .en-hero__strip { grid-template-columns: minmax(0, 1fr); } .en-hero__inner { min-height: 0; } .en-header__login span:not(.en-icon) { display: none; } .en-header__login { width: 40px; gap: 0; } } /* ── Mokymai - the course library ───────────────────────────────────────────── * Frame 5:113, 1440x1313 on #090909, content group 85:853 from x40 to x1400: THIS BAND'S GUTTER * IS 40. Every box below is the node's own, measured from the band top (y1220) or from the box * that holds it; the node id is beside each number. */ .en-courses { --en-gutter: clamp(16px, 2.78vw, 40px); position: relative; z-index: 2; box-shadow: 0px 3px 6px 0px rgb(18 15 40 / 0.12); min-height: 1313px; padding-block: 119px 71px; background: #090909; } .en-courses .en-shell { width: min(1360px, 100% - (2 * var(--en-gutter))); } .en-courses__title { /* 5:114 898x64 at y1339 */ position: relative; left: -12px; /* the node sits left of the band's centre; measured on the rendered ink (x261) */ margin: 0; font-size: 64px; line-height: 64px; font-weight: 900; font-style: italic; letter-spacing: -3.61px; /* node -3.2; trimmed to the rendered ink width (908 -> 899) */ text-transform: uppercase; text-align: center; color: #FFFFFF; } .en-courses__lead { /* 5:115 698x27 at y1419, light 300 */ margin: 16px auto 0; font-size: 18px; line-height: 27px; font-weight: 300; text-align: center; color: #919191; } .en-courses__body { display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: 32px; margin-block-start: 40px; } /* The rail. 5:116 label, then three level cards whose inner offsets DIFFER card to card in the * file (5:117 text at +60, 5:127 at +67, 5:136 at +60) - reproduced, not tidied. */ .en-rail { position: relative; height: 616px; } .en-rail__label { position: absolute; left: 0; margin: 0; font-size: 16px; line-height: 24px; font-weight: 500; } .en-rail__label--level { top: 0; color: #D0D0D0; } .en-rail__label--topics { top: 344px; color: #C7C7C7; } /* 5:149 at y1830 */ .en-level { position: absolute; left: 0; width: 280px; margin: 0; padding: 0; background: #161616; border: 1px solid transparent; border-radius: 16px; text-align: start; color: inherit; cursor: pointer; } .en-level[aria-pressed="true"] { border-color: #C70F14; } .en-level--beginner { top: 40px; height: 78px; } /* 5:117 */ .en-level--advanced { top: 135px; height: 77px; } /* 5:127 */ .en-level--pro { top: 224px; height: 74px; } /* 5:136 */ .en-level__ring { position: absolute; left: 15px; display: grid; place-items: center; width: 35px; height: 35px; border: 0.92px solid; border-radius: 17.5px; } .en-level--beginner .en-level__ring { top: 18px; border-color: #DC2626; color: #DC2626; } .en-level--advanced .en-level__ring { top: 20px; border-color: #3B82F6; color: #3B82F6; } .en-level--pro .en-level__ring { top: 19px; border-color: #737373; color: #737373; } .en-level__ring svg { width: 18px; height: 18px; } .en-level__name { position: absolute; font-size: 15px; line-height: 23px; font-weight: 700; color: #FFFFFF; white-space: nowrap; } .en-level__note { position: absolute; font-size: 10px; line-height: 15px; font-weight: 400; color: #717171; white-space: nowrap; } .en-level--beginner .en-level__name { left: 59px; top: 17px; } .en-level--beginner .en-level__note { left: 59px; top: 40px; } .en-level--advanced .en-level__name { left: 66px; top: 17px; } .en-level--advanced .en-level__note { left: 66px; top: 43px; } .en-level--pro .en-level__name { left: 59px; top: 17px; } .en-level--pro .en-level__note { left: 59px; top: 39px; } .en-level__chevron { position: absolute; left: 246px; width: 16px; height: 16px; } .en-level--beginner .en-level__chevron { top: 28px; } .en-level--advanced .en-level__chevron { top: 34px; } .en-level--pro .en-level__chevron { top: 28px; } .en-level__chevron svg { width: 16px; height: 16px; display: block; } .en-filters { position: absolute; left: 0; top: 384px; width: 280px; } /* 5:150 at y1870 */ .en-filter { display: block; width: 280px; height: 40px; margin: 0 0 8px; padding: 9px 16px; border: 0; border-radius: 6px; background: transparent; font-size: 14px; line-height: 22px; font-weight: 500; color: #B7B7B7; text-align: start; cursor: pointer; } .en-filter[aria-pressed="true"] { background: #C70F14; color: #FFFFFF; } /* Featured 5:174: 1048x282, radius 16, #090909, 1px #1B1B1B, two soft shadows. */ .en-featured { position: relative; height: 282px; background: #090909; border: 1px solid #1B1B1B; border-radius: 16px; box-shadow: 0px 0px 2px 0px rgb(23 26 31 / 0.08), 0px 1px 2.5px 0px rgb(23 26 31 / 0.07); } .en-featured__media { position: absolute; left: 0; top: 0; width: 450px; height: 280px; border-radius: 15px 0 0 15px; overflow: hidden; } .en-featured__media img { width: 450px; height: 280px; display: block; } .en-featured__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; /* 201,116 inside the drawn 450x280 box - written as a centre so it stays centred when the box is a phone's width */ padding: 0; border: 0; background: none; cursor: pointer; } .en-featured__play svg { width: 48px; height: 48px; display: block; } .en-featured__eyebrow { position: absolute; left: 482px; top: 32px; margin: 0; font-size: 11px; line-height: 17px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: #D01016; } .en-featured__title { position: absolute; left: 482px; top: 52px; width: 287px; margin: 0; font-size: 32px; line-height: 32px; font-weight: 900; font-style: italic; text-transform: uppercase; color: #FFFFFF; } .en-featured__badge { position: absolute; left: 975px; top: 40px; display: grid; place-items: center; width: 39px; height: 21px; background: #1B1B1B; border: 1px solid #D01016; border-radius: 4px; font-size: 10px; line-height: 15px; font-weight: 700; color: #D01016; } .en-featured__text { position: absolute; left: 482px; top: 133px; width: 428px; margin: 0; font-size: 15px; line-height: 25px; color: #7F7F7F; } .en-featured .en-meta { position: absolute; left: 482px; top: 215px; width: 300px; height: 18px; margin: 0; } .en-featured .en-meta > span { position: absolute; top: 0; } .en-featured .en-meta > span:nth-child(1) { left: 0; } .en-featured .en-meta > span:nth-child(2) { left: 109px; } .en-featured .en-meta > span:nth-child(3) { left: 212px; } .en-featured .en-meta > span { font-size: 12px; line-height: 18px; font-weight: 500; color: #7F7F7F; gap: 8px; } .en-featured .en-meta svg { width: 16px; height: 16px; } .en-featured .en-meta > span > span { white-space: pre; } .en-featured__cta { position: absolute; left: 839px; top: 200px; display: flex; align-items: center; justify-content: flex-start; gap: 11px; width: 176px; height: 48px; padding-inline-start: 31px; border-radius: 10px; background: #C70F14; color: #FFFFFF; font-size: 14px; line-height: 22px; font-weight: 700; text-decoration: none; } .en-featured__cta svg { width: 16px; height: 16px; display: block; } .en-meta { display: flex; align-items: center; } .en-meta > span { display: inline-flex; align-items: center; } /* Cards 5:223 onward: 339x262 at x0, 354 and 709 of the column, rows 278 apart. */ .en-cards { display: grid; grid-template-columns: 339px 339px 339px; column-gap: 15px; row-gap: 16px; margin-block-start: 24px; } .en-cards .en-card:nth-child(3n) { margin-inline-start: 1px; } /* 1061 - (706 + 339) = 16, not 15 */ .en-card { position: relative; display: block; height: 262px; background: #090909; border: 1px solid #1B1B1B; border-radius: 16px; box-shadow: 0px 0px 2px 0px rgb(23 26 31 / 0.08), 0px 1px 2.5px 0px rgb(23 26 31 / 0.07); text-decoration: none; color: inherit; overflow: hidden; } .en-card__media { position: absolute; left: 0; top: 0; width: 337px; height: 170px; } .en-card__media img { width: 337px; height: 170px; display: block; } .en-card__fade { position: absolute; z-index: 1; left: 0; top: 0; width: 337px; height: 170px; background: linear-gradient(0deg, rgb(0 0 0 / 0.8) 0%, rgb(0 0 0 / 0) 100%); } /* 5:251, a real layer */ .en-card__title { position: absolute; left: 16px; top: 131px; margin: 0; z-index: 1; font-size: 18px; line-height: 27px; font-weight: 900; font-style: italic; text-transform: uppercase; color: #FFFFFF; white-space: nowrap; } .en-card .en-meta { position: absolute; left: 16px; top: 207px; margin: 0; } .en-card .en-meta > span { font-size: 11px; line-height: 17px; font-weight: 500; color: #717171; gap: 6px; } .en-card .en-meta > span + span { margin-inline-start: 15px; } .en-card .en-meta svg { width: 14px; height: 14px; } .en-card__add { position: absolute; left: 288px; top: 199px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #333333; border-radius: 16px; } .en-card__add svg { width: 16px; height: 16px; display: block; } /* Mentorship 5:160: 1048x106 at y2356, mark 56x56 with the helmet 85:892 (35x30) inside. */ .en-mentor { position: relative; height: 106px; margin-block-start: 24px; background: #090909; border: 1px solid #1B1B1B; border-radius: 16px; } .en-mentor__mark { position: absolute; left: 24px; top: 24px; width: 56px; height: 56px; background: #161616; border: 1px solid #333333; border-radius: 28px; } .en-mentor__mark svg { position: absolute; left: 10px; top: 12px; width: 35px; height: 30px; } .en-mentor__title { position: absolute; left: 104px; top: 29px; font-size: 18px; line-height: 27px; font-weight: 700; color: #DCDCDC; white-space: nowrap; } .en-mentor__text { position: absolute; left: 104px; top: 56px; font-size: 13px; line-height: 20px; color: #787878; white-space: nowrap; } .en-mentor__cta { position: absolute; left: 836px; top: 32px; display: flex; align-items: center; gap: 11px; width: 187px; height: 40px; padding-inline-start: 23px; border: 1px solid #B7B7B7; border-radius: 6px; color: #B7B7B7; font-size: 14px; line-height: 22px; font-weight: 500; text-decoration: none; } .en-mentor__cta svg { width: 16px; height: 16px; display: block; } .en-gate { display: grid; place-items: center; gap: 12px; padding: 32px; text-align: center; } .en-gate p { margin: 0; color: #919191; font-size: 14px; line-height: 22px; } /* PATTERN, derived (no narrow frame is drawn): below 1440 the fixed column widths no longer fit, * so the absolute interiors release into flow and the grid becomes fluid. */ @media (max-width: 1439px) { .en-courses { min-height: 0; } .en-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .en-cards .en-card:nth-child(3n) { margin-inline-start: 0; } .en-card__media, .en-card__media img, .en-card__fade { width: 100%; } .en-card__media { overflow: hidden; } .en-card__media img { object-fit: cover; } .en-card__add { left: auto; right: 16px; } .en-featured__media { width: 43%; } .en-featured__media img { width: 100%; object-fit: cover; } .en-featured__eyebrow, .en-featured__title, .en-featured__text, .en-featured .en-meta { left: calc(43% + 32px); } .en-featured__text { width: auto; right: 24px; } .en-featured__badge { left: auto; right: 24px; } .en-featured__cta { left: auto; right: 24px; } .en-mentor__cta { left: auto; right: 24px; } .en-mentor__text { white-space: normal; right: 240px; } } @media (max-width: 1100px) { .en-courses__body { grid-template-columns: minmax(0, 1fr); row-gap: 24px; } .en-rail { height: auto; display: flex; flex-direction: column; gap: 12px; } .en-rail__label, .en-level, .en-filters { position: static; } .en-level { width: 100%; } .en-filters { width: auto; display: flex; flex-wrap: wrap; gap: 8px; } .en-filter { width: auto; margin: 0; } .en-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .en-featured { height: auto; display: flex; flex-direction: column; } .en-featured__media { position: relative; width: 100%; height: 240px; border-radius: 15px 15px 0 0; } .en-featured__media img { height: 240px; } .en-featured__eyebrow, .en-featured__title, .en-featured__text, .en-featured .en-meta, .en-featured__badge, .en-featured__cta { position: static; margin: 16px 24px 0; width: auto; } .en-featured__cta { margin-block-end: 24px; width: 176px; } .en-mentor { height: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 24px; } .en-mentor__mark, .en-mentor__title, .en-mentor__text, .en-mentor__cta { position: relative; left: auto; top: auto; right: auto; } .en-mentor__text { white-space: normal; } .en-mentor__title { white-space: normal; } } @media (max-width: 700px) { .en-courses__title { font-size: clamp(30px, 8vw, 64px); line-height: 1.05; letter-spacing: -0.05em; } .en-cards { grid-template-columns: minmax(0, 1fr); } } /* ── Registracija - the booking ─────────────────────────────────────────────── * Frame 5:403: 1440x1900 on #070707. Every box is placed from the PAGE CENTRE (x720) at the * design width, because the frame centres its contents and three of them sit slightly off that * centre in the file (the title by -7.5, the switch by -0.5). Offsets are from the band top (y2533). */ .en-book { position: relative; z-index: 1; height: 1900px; background: #070707; overflow: hidden; box-shadow: 0px 3px 6px 0px rgb(18 15 40 / 0.12); } .en-book__bg { position: absolute; left: 0; right: 0; top: 55px; height: 1062px; opacity: 0.4; } /* 5:586 + 5:587 inside group 5:585, whose OWN opacity is 0.4 */ .en-book__bg img { width: 100%; height: 1062px; display: block; object-fit: fill; } .en-book__fade { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgb(7 7 7 / 0.6) 0%, rgb(7 7 7 / 1) 50%, rgb(7 7 7 / 1) 100%); } /* 5:587, a real layer */ .en-crumbs { position: absolute; top: 231px; left: calc(50% - 86px); margin: 0; display: flex; gap: 12px; font-size: 13px; line-height: 20px; font-weight: 500; color: #737373; white-space: nowrap; } .en-crumbs__sep { color: #404040; } .en-crumbs__here { color: #EF4444; } .en-book__title { /* 5:591 605x168 at x410 */ position: absolute; top: 299px; left: calc(50% - 310px); width: 605px; margin: 0; font-size: 84px; line-height: 84px; font-weight: 900; font-style: italic; letter-spacing: -4.2px; text-transform: uppercase; text-align: center; color: #FFFFFF; } .en-book__lead { position: absolute; left: 0; right: 0; margin: 0; font-size: 18px; text-align: center; color: #A3A3A3; } .en-book__lead--1 { top: 490px; line-height: 28px; } /* 5:592 */ .en-book__lead--2 { top: 520px; line-height: 29px; } /* 5:593 */ .en-switch { /* 5:594 365x58 */ position: absolute; top: 597px; left: calc(50% - 183px); width: 365px; height: 58px; padding: 4px; display: flex; background: #000000; border: 1px solid #262626; border-radius: 16px; } .en-switch button { position: relative; display: block; height: 48px; padding: 0; border: 0; background: transparent; color: #A3A3A3; font-size: 14px; line-height: 22px; font-weight: 500; cursor: pointer; } .en-switch button:first-child { width: 190px; border-radius: 16px; } .en-switch button:last-child { width: 165px; border-radius: 6px; margin-inline-start: -1px; } .en-switch button .en-icon { position: absolute; left: 40px; top: 16px; } .en-switch button span:last-child { position: absolute; left: 64px; top: 13px; white-space: nowrap; } .en-switch button svg { width: 16px; height: 16px; display: block; } .en-switch button[aria-pressed="true"] { background: #FFFFFF; color: #000000; font-weight: 600; } .en-levels { position: absolute; top: 719px; left: calc(50% - 512px); display: grid; grid-template-columns: repeat(3, 326px); column-gap: 23px; } .en-levelcard { position: relative; display: block; width: 326px; height: 254px; padding: 0; text-align: start; background: rgb(23 23 23 / 0.4); border: 1px solid #262626; border-radius: 24px; color: inherit; cursor: pointer; } .en-levelcard__ring { position: absolute; left: 32px; top: 32px; display: grid; place-items: center; width: 76px; height: 76px; border: 2px solid; border-radius: 38px; } .en-levelcard__ring svg { width: 40px; height: 40px; display: block; } .en-levelcard--beginner .en-levelcard__ring { border-color: #DC2626; } .en-levelcard--advanced .en-levelcard__ring { border-color: #3B82F6; } .en-levelcard--pro .en-levelcard__ring { border-color: #737373; } .en-levelcard__go { position: absolute; left: 245px; top: 32px; display: grid; place-items: center; width: 46px; height: 46px; background: #262626; border: 1px solid #404040; border-radius: 23px; } .en-levelcard__go svg { width: 20px; height: 20px; display: block; } .en-levelcard__title { position: absolute; left: 32px; top: 132px; font-size: 24px; line-height: 30px; font-weight: 900; font-style: italic; text-transform: uppercase; color: #FFFFFF; white-space: nowrap; } .en-levelcard--advanced .en-levelcard__title, .en-levelcard--advanced .en-levelcard__text { left: 31px; } /* 5:653 at x589, one left of its ring */ .en-levelcard__text { position: absolute; left: 32px; top: 174px; font-size: 14px; line-height: 23px; color: #737373; } .en-levelcard--beginner .en-levelcard__text { width: 212px; } .en-levelcard--advanced .en-levelcard__text { width: 250px; } .en-levelcard--pro .en-levelcard__text { width: 237px; } /* The form card 5:404: 1347x817 at x46 (centre -674), radius 32, white, shadow 0 25 50 .25. */ .en-form { position: absolute; top: 1061px; left: calc(50% - 674px); width: 1347px; height: 817px; margin: 0; background: #FFFFFF; border-radius: 32px; color: #000000; box-shadow: 0px 25px 50px 0px rgb(0 0 0 / 0.25); } .en-step { position: absolute; margin: 0; font-size: 14px; line-height: 21px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; white-space: pre; } .en-step__n { color: #D4D4D4; } .en-step__t { margin-inline-start: 8px; color: #000000; } .en-step--1 { left: 32px; top: 32px; } .en-step--2 { left: 460px; top: 32px; } .en-step--3 { left: 460px; top: 183px; } .en-step--4 { left: 460px; top: 374px; } .en-cal { position: absolute; left: 32px; top: 77px; width: 381px; height: 404px; border: 1px solid #F5F5F5; border-radius: 16px; } .en-cal__prev, .en-cal__next { position: absolute; top: 26px; width: 20px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; } .en-cal__prev { left: 24px; } .en-cal__next { left: 334px; } .en-cal__prev svg, .en-cal__next svg { width: 20px; height: 20px; display: block; } .en-cal__month { position: absolute; left: 0; right: 0; top: 23px; pointer-events: none; /* it spans the full width and is painted after the arrows, so without this it eats their clicks */ text-align: center; font-size: 16px; line-height: 24px; font-weight: 700; } .en-cal__dows { position: absolute; left: 24px; top: 79px; width: 335px; display: grid; grid-template-columns: 49px 42px 54px 43px 51px 41px 55px; /* column centres 49.5, 95, 143, 191.5, 238.5, 284.5, 332.5 as drawn */ font-size: 12px; line-height: 18px; font-weight: 500; color: #A3A3A3; text-align: center; } .en-cal__grid { position: absolute; left: 20px; top: 113px; width: 331px; display: grid; grid-template-columns: 48px 46px 51px 44px 47px 49px 46px; row-gap: 16px; } /* digit centres 45, 92, 140.5, 188, 233.5, 281.5, 329 as drawn */ .en-cal__day span { display: block; line-height: 21px; } /* the digit is its own 21px text box, as drawn */ .en-cal__day { display: grid; place-items: center; width: 40px; height: 40px; margin-inline: auto; padding: 0; border: 0; border-radius: 16px; background: none; font-size: 14px; line-height: 21px; font-weight: 600; color: #000000; cursor: pointer; } .en-cal__day.is-outside, .en-cal__day[disabled] { color: #E5E5E5; cursor: default; } .en-cal__day[aria-pressed="true"] { background: #000000; color: #FFFFFF; } .en-select { position: absolute; left: 460px; top: 69px; width: 381px; height: 70px; margin: 0; padding: 0 40px 0 68px; border: 1px solid #F5F5F5; border-radius: 16px; background: transparent; appearance: none; font-size: 14px; line-height: 21px; font-weight: 700; color: #000000; cursor: pointer; } .en-select:focus { outline: none; } .en-select__icon { position: absolute; left: 477px; top: 86px; display: grid; place-items: center; width: 36px; height: 36px; background: #FAFAFA; border-radius: 10px; pointer-events: none; } .en-select__icon svg { width: 20px; height: 20px; display: block; } .en-select__chev { position: absolute; left: 807px; top: 96px; width: 16px; height: 16px; pointer-events: none; } .en-select__chev svg { width: 16px; height: 16px; display: block; } .en-times { position: absolute; left: 460px; top: 220px; display: flex; gap: 12px; } .en-time { position: relative; display: block; width: 119px; height: 77px; padding: 0; background: #FFFFFF; border: 1px solid #F5F5F5; border-radius: 16px; cursor: pointer; } .en-time__t { position: absolute; left: 0; right: 0; top: 15px; text-align: center; font-size: 16px; line-height: 24px; font-weight: 700; color: #000000; } .en-time__p { position: absolute; left: 0; right: 0; top: 44px; text-align: center; font-size: 10px; line-height: 15px; font-weight: 500; letter-spacing: -0.5px; text-transform: uppercase; color: #A3A3A3; } .en-time[aria-pressed="true"] { background: #000000; border-color: #000000; box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 0.1), 0px 17px 35px 0px rgb(0 0 0 / 0.1); } .en-time[aria-pressed="true"] .en-time__t { color: #FFFFFF; } .en-time[disabled] { opacity: 0.4; cursor: default; } .en-times__note { position: absolute; left: 460px; top: 312px; margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 18px; font-style: italic; color: #A3A3A3; white-space: pre; } .en-times__note svg { width: 12px; height: 12px; display: block; } /* * THE CONTACT BLOCK (LR 2026-09-18, Q2). The design draws one phone input at 460,411, 381x70. * The round added a name, an email and an optional note, so this is DERIVED rather than read from * a node: the block is placed once at the input's own origin and lays its four fields out * internally, which is the only version of this that the narrow layer does not have to undo * field by field. The column has 406px below y411 inside an 817px card; the stack ends at 659. */ .en-contactbox { position: absolute; left: 460px; top: 411px; width: 381px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .en-inp { height: 64px; margin: 0; padding: 0 20px; border: 1px solid #F5F5F5; border-radius: 16px; background: transparent; font-family: inherit; font-size: 14px; line-height: 21px; font-weight: 700; color: #000000; } .en-inp::placeholder { color: #A3A3A3; opacity: 1; font-weight: 500; } .en-inp:focus { outline: 2px solid #D01016; outline-offset: -1px; } .en-inp--wide { grid-column: 1 / -1; } .en-inp--note { height: 96px; padding-block: 18px; resize: none; line-height: 20px; font-weight: 500; } /* Off-screen rather than display:none, because some bots skip hidden fields. */ .en-inp--trap { position: absolute; left: -9999px; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; } /* * THE TIME BUTTON GAINS A THIRD LINE (LR Q5), and that needs the whole button relaid. * * The design draws two lines and places both ABSOLUTELY inside a fixed 119x77 box. Adding a third * in normal flow put it at y32.5 while the time occupied y16-40 - they overlapped, which is what * the operator saw as wrong gaps. Measured 2026-09-18 rather than guessed. * * So a button that HAS a level label becomes a centred column with even gaps, and one that does * not keeps the drawn geometry byte for byte. That is why this is written with :has() instead of a * modifier class: the design preview fixture renders no level, so it is untouched by construction. */ .en-time__l { font-size: 10px; line-height: 14px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: #A3A3A3; white-space: nowrap; } .en-time[aria-pressed="true"] .en-time__l { color: #D4D4D4; } .en-time:has(.en-time__l) { height: auto; min-height: 92px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .en-time:has(.en-time__l) .en-time__t, .en-time:has(.en-time__l) .en-time__l, .en-time:has(.en-time__l) .en-time__p { position: static; left: auto; right: auto; top: auto; } /* Read top to bottom: when, who for, how many left. The markup order differs because the places * are the drawn pair with the time. */ .en-time:has(.en-time__l) .en-time__t { order: 1; } .en-time:has(.en-time__l) .en-time__l { order: 2; } .en-time:has(.en-time__l) .en-time__p { order: 3; } /* The summary's level slot is set in the card's display style. While it holds a PROMPT rather * than a level, it drops out of that style - an instruction in 24px italic caps reads as shouting. */ .en-summary__level.is-prompt { font-size: 14px; line-height: 21px; font-weight: 500; font-style: normal; text-transform: none; letter-spacing: 0; color: #737373; } /* What the times area says when there is nothing to show, instead of standing empty (LR Q7). */ .en-times__empty { margin: 0; max-width: 381px; font-size: 13px; line-height: 20px; color: #A3A3A3; } .en-times__empty button { margin-inline-start: 6px; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: #D01016; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .en-summary { position: absolute; left: 889px; top: 32px; width: 426px; height: 753px; background: #FDFDFD; border-radius: 24px; box-shadow: 0px 0px 2px 0px rgb(24 26 25 / 0.12), 0px 2px 5px 0px rgb(24 26 25 / 0.09); } .en-summary > * { position: absolute; margin: 0; } .en-summary__title { left: 24px; top: 24px; font-size: 18px; line-height: 27px; font-weight: 700; } .en-summary__media { left: 24px; top: 75px; width: 378px; height: 192px; border-radius: 16px; overflow: hidden; } .en-summary__media img { width: 378px; height: 192px; display: block; } .en-summary__shade { position: absolute; inset: 0; background: rgb(0 0 0 / 0.1); } /* 5:579, a real layer */ .en-summary__dot { left: 24px; top: 296px; width: 8px; height: 8px; border-radius: 4px; background: #EF4444; } .en-summary__kind { left: 40px; top: 290px; font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: -0.3px; text-transform: uppercase; color: #A3A3A3; white-space: nowrap; } .en-summary__level { left: 24px; top: 324px; font-size: 24px; line-height: 36px; font-weight: 900; font-style: italic; text-transform: uppercase; white-space: nowrap; } .en-summary__calicon { left: 24px; top: 387px; width: 16px; height: 16px; } .en-summary__when { left: 52px; top: 385px; font-size: 14px; line-height: 21px; font-weight: 500; color: #525252; white-space: nowrap; } .en-summary__rule { left: 24px; top: 435px; width: 378px; border-top: 1px solid #F5F5F5; } /* 5:539, a line */ .en-summary__coach-l { left: 24px; top: 463px; font-size: 12px; line-height: 18px; color: #A3A3A3; } .en-summary__coach { left: 24px; top: 485px; font-size: 16px; line-height: 24px; font-weight: 700; } .en-summary__avatar > span { position: absolute; left: 14px; top: 13px; font-size: 16px; line-height: 24px; } /* Ready for a photo the day there is a headshot: drop an inside the circle and it fills it. * The circle, its ring and its shadow stay the drawn ones; only what is inside changes. */ .en-summary__avatar { overflow: hidden; } .en-summary__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; } .en-summary__avatar { left: 346px; top: 459px; width: 56px; height: 56px; border: 2px solid #FFFFFF; border-radius: 28px; font-size: 16px; line-height: 24px; box-shadow: 0px 0px 2px 0px rgb(24 26 25 / 0.12), 0px 4px 9px 0px rgb(24 26 25 / 0.11); } .en-summary__i { left: 24px; width: 16px; height: 16px; } .en-summary__i svg, .en-summary__calicon svg, .en-summary__check svg { width: 16px; height: 16px; display: block; } .en-summary__i--dur { top: 537px; } .en-summary__i--price { top: 579px; } .en-summary__k { left: 48px; font-size: 14px; line-height: 21px; color: #737373; } .en-summary__k--dur { top: 535px; } .en-summary__k--price { top: 576px; } .en-summary__v { right: 25px; font-weight: 700; white-space: nowrap; } .en-summary__v--dur { top: 535px; font-size: 14px; line-height: 21px; } .en-summary__v--price { top: 571px; right: 23px; font-size: 20px; line-height: 30px; font-weight: 900; } .en-summary__cta { left: 24px; top: 633px; display: flex; align-items: center; justify-content: center; gap: 11px; width: 378px; height: 56px; padding: 0; border: 0; border-radius: 16px; background: #DC2626; color: #FFFFFF; font-size: 16px; line-height: 26px; font-weight: 700; cursor: pointer; } .en-summary__cta svg { width: 20px; height: 20px; display: block; } .en-summary__cta[disabled] { opacity: 0.45; cursor: default; } .en-summary__check { left: 52px; top: 713px; width: 16px; height: 16px; } .en-summary__fine { left: 76px; top: 712px; font-size: 11px; line-height: 17px; color: #A3A3A3; white-space: nowrap; } .en-book__status { left: 24px; right: 24px; top: 734px; font-size: 12px; line-height: 17px; text-align: center; } .en-book__status[data-state="error"] { color: #DC2626; } .en-book__status[data-state="ok"] { color: #0F7A38; } /* PATTERN, derived (no narrow frame is drawn): below the form card's own width the absolute * layout releases into a stacked flow; nothing below this line applies at 1440. */ @media (max-width: 1379px) { .en-book { height: auto; padding: 200px 16px 80px; } .en-crumbs, .en-book__title, .en-book__lead, .en-switch, .en-levels, .en-form { position: relative; left: auto; right: auto; top: auto; } /* Scoped to the booking section it was written for. Unscoped it also centred the breadcrumb * on every inner page below 1380, over a left-aligned title. Found 2026-09-17 while * measuring the course page: the crumb sat at x363 while its h1 sat at x72. */ .en-book .en-crumbs { justify-content: center; } .en-book__title { margin: 48px auto 0; max-width: 605px; width: auto; } .en-book__lead--1 { margin-top: 23px; } .en-switch { margin: 48px auto 0; } .en-levels { margin: 64px auto 0; width: fit-content; grid-template-columns: repeat(auto-fit, minmax(280px, 326px)); gap: 23px; justify-content: center; max-width: 100%; } .en-form { width: 100%; max-width: 900px; height: auto; margin: 88px auto 0; padding: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; } .en-form > *, .en-summary > * { position: relative; left: auto; right: auto; top: auto; } .en-contactbox { width: auto; } .en-step--1 { grid-column: 1; grid-row: 1; } .en-cal { grid-column: 1; grid-row: 2 / span 6; } .en-step--2 { grid-column: 2; grid-row: 1; } .en-select { grid-column: 2; grid-row: 2; } .en-step--3 { grid-column: 2; grid-row: 3; } .en-times { grid-column: 2; grid-row: 4; } .en-times__note { grid-column: 2; grid-row: 5; } .en-step--4 { grid-column: 2; grid-row: 6; } .en-contactbox { grid-column: 2; grid-row: 7; } .en-cal { width: auto; height: auto; padding: 23px 20px 24px; } .en-cal__prev, .en-cal__next, .en-cal__month { position: absolute; } .en-cal__dows, .en-cal__grid { position: relative; left: auto; top: auto; width: auto; } .en-cal__dows { margin-top: 56px; } .en-cal__grid { margin-top: 16px; } .en-cal__dows, .en-cal__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } .en-cal__next { left: auto; right: 24px; } .en-select { width: auto; } .en-summary { grid-column: 1 / -1; grid-row: 8; width: auto; height: auto; padding: 24px; } .en-summary__media { width: auto; } .en-summary__media img { width: 100%; object-fit: cover; } .en-summary__cta { width: 100%; } .en-summary__rule { width: 100%; } .en-summary__fine { white-space: normal; } } @media (max-width: 760px) { .en-book__title { font-size: clamp(34px, 11vw, 84px); line-height: 1; letter-spacing: -0.05em; } .en-form { grid-template-columns: minmax(0, 1fr); padding: 20px; } .en-cal__grid { row-gap: 8px; } .en-cal__day { width: 100%; max-width: 40px; } .en-times { flex-wrap: wrap; } .en-time { flex: 1 1 90px; width: auto; } .en-switch { width: 100%; max-width: 365px; } .en-switch button:first-child, .en-switch button:last-child { flex: 1; width: auto; } .en-switch button .en-icon { left: 16px; } .en-switch button span:last-child { left: 40px; } } /* ── Apie trenerį ───────────────────────────────────────────────────────────── * Group 85:912 on the frame's own fill (#070808), from y4433 (end of the booking frame) to y5375. * Placed from the page centre at the design width; the band is 942 tall. */ .en-about { position: relative; height: 942px; background: #070808; } .en-about__photo { position: absolute; left: calc(50% - 680px); top: 170px; width: 609px; height: 584px; margin: 0; } .en-about__photo img { width: 609px; height: 584px; display: block; border-radius: 16px; box-shadow: 0px 25px 50px 0px rgb(0 0 0 / 0.25); } /* 5:719 */ .en-about__name { position: absolute; left: calc(50% - 7px); top: 186px; margin: 0; font-size: 72px; line-height: 72px; font-weight: 700; font-style: italic; letter-spacing: -1.8px; color: #FFFFFF; white-space: nowrap; } .en-about__tag { position: absolute; left: calc(50% - 7px); top: 274px; margin: 0; font-size: 23px; line-height: 35px; font-weight: 500; color: #868686; white-space: nowrap; } .en-about__text { position: absolute; left: calc(50% - 7px); margin: 0; font-size: 16px; line-height: 26px; color: #868686; } .en-about__text--1 { top: 340px; width: 563px; } .en-about__text--2 { top: 442px; white-space: pre; } .en-stats { position: absolute; left: calc(50% - 7px); top: 542px; width: 687px; height: 230px; } .en-stat { position: absolute; top: 0; width: 160px; height: 230px; background: #0F100D; border: 1px solid rgb(255 255 255 / 0.05); border-radius: 10px; } .en-stat:nth-child(1) { left: 0; } .en-stat:nth-child(2) { left: 175px; } .en-stat:nth-child(3) { left: 351px; } .en-stat:nth-child(4) { left: 527px; } .en-stat > * { position: absolute; left: 0; right: 0; margin: 0 auto; text-align: center; } .en-stat__mark { top: 24px; width: 48px; height: 48px; } .en-stat__mark img { width: 48px; height: 48px; display: block; } .en-stat__mark--icon { width: 40px; height: 40px; } .en-stat__mark--icon svg { width: 40px; height: 40px; display: block; } .en-stat b { top: 88px; font-size: 26px; line-height: 33px; font-weight: 700; color: #FFFFFF; } .en-stat__label { top: 124px; font-size: 14px; line-height: 21px; font-weight: 500; color: #D4D4D4; } .en-stat__title { top: 80px; font-size: 26px; line-height: 33px; font-weight: 700; color: #FFFFFF; } .en-stat:nth-child(4) .en-stat__title { top: 88px; } .en-stat small { top: 161px; font-size: 12px; line-height: 17px; color: #737373; } .en-stat:nth-child(1) b, .en-stat:nth-child(1) .en-stat__label { left: 5px; } /* 5:689 and 5:690 are centred 2.5px right of their card */ .en-stat:nth-child(1) small { width: 101px; } .en-stat:nth-child(2) small { width: 117px; } .en-stat:nth-child(3) small { width: 94px; } .en-stat:nth-child(4) small { width: 101px; top: 169px; } .en-stat:nth-child(3) .en-stat__title { width: 117px; } .en-stat:nth-child(4) .en-stat__title { width: 142px; } /* ── Ką gausi treniruotėse ──────────────────────────────────────────────────── * Group 85:963 from y5375 to the white shop container at y5915 (540 tall). Heading 5:720 centred, * rule 5:721 a 4px #DC2626 stroke 48 wide centred at y5439. Four cards 322x238 at x40, 386, 732 and * 1078 on y5505, EACH with a #D01016 wash at 30% (5:723, 5:745, 5:765, 5:787, 336x247 at -7,-5, * clipped) under the same 0deg #0F100D gradient. */ .en-benefits { position: relative; height: 540px; background: #070808; } .en-benefits__title { position: absolute; left: 0; right: 0; top: 0; margin: 0; font-size: 31px; line-height: 47px; font-weight: 700; text-align: center; color: #FFFFFF; } .en-benefits__rule { position: absolute; left: calc(50% - 24px); top: 62px; width: 48px; border-top: 4px solid #DC2626; } /* 5:721, a 4px stroked line */ .en-benefits__grid { position: absolute; left: calc(50% - 680px); top: 130px; width: 1360px; height: 238px; } .en-benefit { position: absolute; top: 0; width: 322px; height: 238px; background: #0F100D; border: 1px solid rgb(255 255 255 / 0.1); border-radius: 16px; overflow: hidden; } .en-benefit:nth-child(1) { left: 0; } .en-benefit:nth-child(2) { left: 346px; } .en-benefit:nth-child(3) { left: 692px; } .en-benefit:nth-child(4) { left: 1038px; } .en-benefit__wash { position: absolute; z-index: 0 !important; left: -8px; top: -6px; width: 336px; height: 247px; background: #D01016; opacity: 0.3; } /* 5:723 */ .en-benefit__fade { position: absolute; z-index: 0 !important; left: -1px; top: -1px; width: 322px; height: 238px; background: linear-gradient(0deg, rgb(15 16 13 / 1) 0%, rgb(15 16 13 / 0.8) 50%, rgb(15 16 13 / 0) 100%); } /* 5:724 */ .en-benefit:nth-child(3) { overflow: visible; } .en-benefit:nth-child(3) .en-benefit__wash { clip-path: inset(6px 8px 5px 8px round 15px); } /* still clipped by 5:764, as drawn */ .en-benefit:nth-child(3) .en-benefit__fade { top: 1px; } /* 85:915 is a square layer 2px lower than its card and NOT clipped by it, so it covers the card's bottom edge and corners (vision judge 08) */ .en-benefit > * { position: absolute; z-index: 1; margin: 0; } .en-benefit__mark { left: 24px; top: 24px; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgb(255 255 255 / 0.2); border-radius: 24px; } .en-benefit__mark svg { width: 32px; height: 32px; display: block; } .en-benefit h3 { left: 24px; top: 88px; font-size: 21px; line-height: 32px; font-weight: 700; color: #D4D4D4; white-space: nowrap; } .en-benefit p { left: 24px; top: 126px; font-size: 13px; line-height: 21px; color: #7C7C7C; } .en-benefit:nth-child(1) p { width: 280px; } .en-benefit:nth-child(2) p { width: 270px; } .en-benefit:nth-child(3) p { width: 260px; } .en-benefit:nth-child(4) p { width: 279px; } .en-benefit__go { left: 256px; top: 172px; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgb(255 255 255 / 0.1); border-radius: 20px; } .en-benefit__go svg { width: 20px; height: 20px; display: block; } /* PATTERN, derived: below the design width the absolute layout releases into flow. */ @media (max-width: 1439px) { .en-about, .en-benefits { height: auto; padding: 100px var(--en-gutter); } .en-about__photo, .en-about__name, .en-about__tag, .en-about__text, .en-stats, .en-benefits__title, .en-benefits__rule, .en-benefits__grid { position: relative; left: auto; right: auto; top: auto; } .en-about { display: grid; grid-template-columns: minmax(0, 609px) minmax(0, 1fr); column-gap: 64px; align-items: start; } .en-about__photo { grid-row: 1 / span 5; width: auto; height: auto; } .en-about__photo img { width: 100%; height: auto; aspect-ratio: 609 / 584; } .en-about__name, .en-about__tag { white-space: normal; } .en-about__text--1, .en-about__text--2 { width: auto; white-space: normal; margin-top: 24px; } .en-stats { width: auto; height: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-top: 40px; } .en-stat { position: relative; left: auto !important; width: auto; } .en-benefits__rule { margin: 17px auto 0; } .en-benefits__grid { width: auto; height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 64px; } .en-benefit { position: relative; left: auto !important; width: auto; } .en-benefit::after { width: 100%; } .en-benefit p { width: auto !important; right: 64px; } .en-benefit__go { left: auto; right: 24px; } } @media (max-width: 900px) { .en-about { display: block; } .en-about__photo { margin-bottom: 40px; } .en-about__name { font-size: clamp(34px, 10vw, 72px); line-height: 1.02; } .en-benefits__grid { grid-template-columns: minmax(0, 1fr); } } /* ── Atributika - the shop band, the only WHITE band ────────────────────────── * Container 5:1068, 1440x1300 in #FFFFFF from y5915. Group 85:964 from x96. The title and the * lead lines sit slightly LEFT of centre in the file (title centre 702, lead 700 and 703.5); each is * placed on its own node box rather than tidied onto the page centre. */ .en-shop { position: relative; height: 838px; background: #FFFFFF; color: #000000; } .en-shop__title { position: absolute; left: calc(50% - 148px); top: 115px; width: 260px; margin: 0; font-size: 56px; line-height: 84px; font-weight: 700; letter-spacing: -1.067px; /* node -1.4; ink 251 -> 254 */ text-align: center; color: #000000; white-space: nowrap; } .en-shop__lead { position: absolute; margin: 0; font-size: 18px; text-align: center; color: #6B6B68; white-space: pre; } .en-shop__lead--1 { left: calc(50% - 308px); top: 215px; width: 576px; line-height: 28px; } .en-shop__lead--2 { left: calc(50% - 135px); top: 250px; width: 237px; line-height: 29px; } .en-products { position: absolute; left: calc(50% - 624px); top: 326px; width: 1248px; height: 397px; } .en-product { position: absolute; top: 0; width: 231px; height: 397px; background: #FFFFFF; border-radius: 10px; box-shadow: 0px 0px 2px 0px rgb(23 26 31 / 0.12), 0px 2px 5px 0px rgb(23 26 31 / 0.09); } .en-product:nth-child(1) { left: 0; } .en-product:nth-child(2) { left: 254px; } .en-product:nth-child(3) { left: 508px; } .en-product:nth-child(4) { left: 762px; } .en-product:nth-child(5) { left: 1016px; } .en-product > * { position: absolute; margin: 0; } .en-product__media { left: 17px; top: 17px; width: 197px; height: 197px; background: #FAFAFA; border-radius: 10px; overflow: hidden; } .en-product__media img { position: absolute; display: block; } .en-product__name { left: 17px; top: 237px; font-size: 16px; line-height: 24px; font-weight: 600; color: #2B2B2B; white-space: nowrap; } .en-product__price { right: 17px; top: 237px; font-size: 16px; line-height: 24px; font-weight: 500; color: #2B2B2B; white-space: nowrap; } .en-swatch { top: 291px; width: 20px; height: 20px; border: 1px solid #E0E0E0; border-radius: 10px; } .en-size { top: 277px; width: 34px; height: 34px; padding: 0; background: transparent; border: 1px solid #F0F0F0; border-radius: 4px; font-size: 12px; line-height: 18px; font-weight: 500; color: #6B6B68; text-align: center; cursor: pointer; } .en-size[aria-pressed="true"] { background: #000000; color: #FFFFFF; } .en-product__cta { left: 17px; top: 335px; width: 196px; height: 44px; border: 1px solid #000000; border-radius: 6px; color: #000000; font-size: 14px; line-height: 22px; font-weight: 500; text-decoration: none; } .en-product__cta .en-icon { position: absolute; left: 54px; top: 13px; } .en-product__cta .en-icon svg { width: 16px; height: 16px; display: block; } .en-product__cta span:last-child { position: absolute; left: 78px; top: 10px; white-space: nowrap; } /* ── The footer ─────────────────────────────────────────────────────────────── * Frame 5:1271: 1440x564 in #060606, clipping its own children (the bottom bar 5:1272 is drawn 85 * tall from y7720 and shows 59 of it). Every box from the frame's left and top. */ .en-footer-part { background: #060606; box-shadow: 0px 3px 6px 0px rgb(18 15 40 / 0.12); } /* frame 5:1271 maps to the template part */ .en-footer { position: relative; height: 564px; background: #060606; overflow: hidden; box-shadow: 0px 3px 6px 0px rgb(18 15 40 / 0.12); } .en-footer__inner { position: absolute; left: calc(50% - 720px); top: 0; width: 1440px; height: 564px; overflow: hidden; background: #060606; box-shadow: 0px 3px 6px 0px rgb(18 15 40 / 0.12); } /* frame 5:1271 */ .en-footer__inner > *, .en-fcol > *, .en-subscribe > * { position: absolute; margin: 0; } .en-frow > * { margin: 0; } .en-fcol, .en-frow { display: contents; } /* grouping only: no box at 1440, so every child keeps the frame as its containing block */ .en-footer__word { left: 71px; top: 65px; font-size: 42px; line-height: 42px; font-weight: 900; font-style: italic; letter-spacing: -2.5px; /* node -2.1; ink 166 -> 164 */ text-transform: uppercase; color: #FFFFFF; } .en-footer__sub { left: 71px; top: 111px; font-size: 15px; line-height: 23px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #DC2626; white-space: nowrap; } .en-footer__blurb { left: 71px; top: 157px; width: 241px; font-size: 14px; line-height: 23px; color: #9D9D9D; } .en-social { left: 71px; top: 280px; width: 196px; height: 40px; } .en-social > * { position: absolute; top: 0; width: 40px; height: 40px; padding: 0; background: none; color: inherit; border: 1px solid #BFBEBE; border-radius: 10px; cursor: pointer; } .en-social > :nth-child(1) { left: 0; } .en-social > :nth-child(2) { left: 52px; } .en-social > :nth-child(3) { left: 104px; } .en-social > :nth-child(4) { left: 156px; } .en-social .en-icon { position: absolute; left: 10px; top: 10px; } .en-social svg { width: 18px; height: 18px; display: block; } .en-footer__h { top: 94px; font-size: 15px; line-height: 23px; font-weight: 700; letter-spacing: 0.75px; text-transform: uppercase; color: #DC2626; white-space: nowrap; } .en-footer__h--nav { left: 429px; } .en-footer__h--info { left: 644px; } .en-footer__h--contact { left: 869px; } .en-footer__h--news { left: 1123px; } .en-flink { position: absolute; color: #C8C8C8; font-size: 14px; line-height: 21px; text-decoration: none; white-space: nowrap; } .en-fchev { position: absolute; display: block; } .en-fchev svg { display: block; width: 100%; height: 100%; } .en-fbox { position: absolute; left: 869px; width: 40px; height: 40px; border: 1px solid #272727; border-radius: 10px; } .en-fbox .en-icon { position: absolute; left: 10px; top: 10px; } .en-fbox svg { width: 18px; height: 18px; display: block; } .en-ftext { position: absolute; left: 925px; color: #C8C8C8; font-size: 14px; line-height: 21px; white-space: nowrap; text-decoration: none; } .en-footer__news { left: 1123px; top: 140px; width: 236px; font-size: 14px; line-height: 23px; color: #949494; } .en-footer__field { left: 1123px; top: 210px; width: 244px; height: 47px; padding: 0 0 0 11px; background: #141414; border: 1px solid #202020; border-radius: 6px; color: #C8C8C8; font-size: 14px; line-height: 22px; } .en-footer__field::placeholder { color: #4A4A4A; opacity: 1; } .en-footer__subscribe { left: 1123px; top: 270px; width: 245px; height: 48px; padding: 0; border: 0; border-radius: 6px; background: #DC2626; color: #000000; font-size: 14px; line-height: 22px; font-weight: 700; cursor: pointer; } .en-footer__subscribe span:first-child { position: absolute; left: 57px; top: 13px; white-space: nowrap; } .en-footer__subscribe .en-icon { position: absolute; left: 184px; top: 14px; } .en-footer__subscribe svg { width: 20px; height: 20px; display: block; } .en-footer__line { left: 0; width: 1440px; border-top: 1px solid #202020; } .en-footer__bar { left: 0; top: 505px; width: 1440px; height: 85px; background: #060606; } /* 5:1272, drawn 85 tall and clipped to 59 by the frame */ .en-footer__line--1 { top: 333px; } .en-footer__line--2 { top: 505px; } .en-feature { position: absolute; top: 387px; width: 64px; height: 64px; border: 1px solid rgb(207 243 67 / 0.2); border-radius: 16px; } .en-feature__ring { position: absolute; left: 3px; top: 3px; width: 56px; height: 56px; border: 2px solid #C62324; border-radius: 16px; } /* 5:1446 */ .en-feature .en-icon { position: absolute; left: 17px; top: 17px; } .en-feature svg { width: 28px; height: 28px; display: block; } .en-feature--1 { left: 80px; } .en-feature--2 { left: 400px; } .en-feature--3 { left: 687px; } .en-feature__t { position: absolute; top: 399px; font-size: 16px; line-height: 26px; font-weight: 500; color: #DDDDDD; white-space: pre; } .en-feature__t--1 { left: 164px; } .en-feature__t--2 { left: 484px; } .en-feature__t--3 { left: 771px; } .en-footer__copy { left: 80px; top: 523px; font-size: 14px; line-height: 20px; color: #9D9D9D; white-space: pre; } .en-footer__barico { top: 524px; width: 18px; height: 18px; } .en-footer__barico svg { width: 18px; height: 18px; display: block; } .en-footer__barico--ig { left: 1060px; } .en-footer__barico--fb { left: 1090px; } /* PATTERN, derived: below the design width everything releases into flow. */ @media (max-width: 1439px) { .en-shop, .en-footer { height: auto; padding: 100px var(--en-gutter); } .en-shop__title, .en-shop__lead, .en-products { position: relative; left: auto; top: auto; width: auto; } .en-shop__title { white-space: normal; } .en-shop__lead { white-space: normal; } .en-shop__lead--1 { margin-top: 16px; } .en-products { height: auto; margin-top: 55px; display: grid; grid-template-columns: repeat(auto-fill, minmax(231px, 1fr)); gap: 23px; } .en-product { position: relative; left: auto !important; width: auto; } .en-product__media { width: auto; right: 17px; } .en-product__cta { width: auto; right: 17px; } } /* Form controls do not inherit the page font by default, which rendered every button, select and * input in Arial - 37 elements in DC verify. */ button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; } /* Every photograph is the node as Figma RENDERS it (exported per node at 2x), because most fills in * this file are STRETCH with a crop transform: the whole source image was the wrong picture inside the * right box. So the image is shown exactly, never re-cropped by object-fit: cover. */ .en-hero__figure img, .en-hero__strip img, .en-featured__media img, .en-card__media img, .en-summary__media img, .en-about__photo img, .en-stat__mark img, .en-book__bg img { object-fit: fill; } .en-book__title { letter-spacing: -4.867px; } /* node -4.2; line 1 trimmed to the rendered ink (607 -> 599) */ .en-book__title-2 { letter-spacing: -4.311px; position: relative; left: -2px; } /* line 2 (501 -> 500), one text node with line 1 */ /* ── THE NARROW LAYER ───────────────────────────────────────────────────────── * DERIVED, not drawn: the file has no frame narrower than 1440. It sits LAST on purpose, because the * 1440 rules above include late overrides (object-fit: fill, the booking title's trimmed tracking) that * out-ranked the earlier media queries and broke 390 (hero strip as slivers, title letters colliding). * Nothing in this block matches at 1440. */ @media (max-width: 1439px) { /* The node renders were exported for their 1440 boxes; once a box changes shape, crop instead of stretch. */ .en-hero__figure img, .en-hero__strip img, .en-featured__media img, .en-card__media img, .en-summary__media img, .en-about__photo img, .en-book__bg img { object-fit: cover; } /* Products: the cover keeps its drawn size and sits centred in the wider tile. */ .en-product__media img { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); } /* Benefits: the wash and the fade follow the card instead of their 1440 boxes. */ .en-benefit, .en-benefit:nth-child(3) { overflow: hidden; } .en-benefit__wash, .en-benefit:nth-child(3) .en-benefit__wash { left: -8px; top: -6px; width: calc(100% + 16px); height: calc(100% + 11px); clip-path: none; } .en-benefit__fade, .en-benefit:nth-child(3) .en-benefit__fade { left: 0; top: 0; width: 100%; height: 100%; } /* Footer: the column groups become real boxes. */ .en-footer { padding: 72px var(--en-gutter) 32px; } .en-footer__inner { position: relative; left: auto; width: auto; height: auto; overflow: visible; box-shadow: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 40px 32px; } .en-fcol > *, .en-frow > *, .en-subscribe > *:not(.en-hp), .en-fcol .en-flink, .en-fcol .en-fchev { position: relative !important; left: auto !important; top: auto !important; } .en-footer__line, .en-footer__bar, .en-fchev { display: none; } .en-footer__inner > .en-fcol { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .en-footer__inner > .en-fcol--brand { gap: 8px; } .en-footer__blurb { width: auto; max-width: 320px; margin-block: 8px 12px; } .en-footer__h { margin-block-end: 4px; } .en-flink, .en-ftext, .en-footer__word, .en-footer__sub { white-space: normal; } .en-frow { display: flex; align-items: center; gap: 16px; } .en-fbox { flex: 0 0 auto; } .en-footer__news { width: auto; max-width: 280px; } .en-footer__field, .en-footer__subscribe { width: 100%; max-width: 280px; } .en-footer__subscribe { display: flex; align-items: center; justify-content: center; gap: 12px; } .en-footer__subscribe > * { position: static !important; } .en-footer__inner > .en-fcol--features { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 24px 48px; padding-block-start: 40px; border-top: 1px solid #202020; } .en-feature { flex: 0 0 auto; } .en-footer__inner > .en-fcol--bar { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-block-start: 24px; border-top: 1px solid #202020; } .en-footer__copy { white-space: normal; margin-inline-end: auto; } } @media (max-width: 1379px) { /* Booking: the select's icon and chevron share the select's grid cell. */ .en-select__icon { grid-column: 2; grid-row: 2; align-self: center; justify-self: start; margin-inline-start: 17px; } .en-select__chev { grid-column: 2; grid-row: 2; align-self: center; justify-self: end; margin-inline-end: 18px; } /* Booking summary: every icon on the row of the text it labels. */ .en-summary { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 8px; align-items: center; } .en-summary > * { grid-column: 1 / -1; } .en-summary__title { grid-row: 1; } .en-summary__media { grid-row: 2; margin-block: 8px; } .en-summary__dot { grid-row: 3; grid-column: 1; justify-self: center; } .en-summary__kind { grid-row: 3; grid-column: 2 / -1; } .en-summary__level { grid-row: 4; } .en-summary__calicon { grid-row: 5; grid-column: 1; } .en-summary__when { grid-row: 5; grid-column: 2 / -1; white-space: normal; } .en-summary__rule { grid-row: 6; margin-block: 12px; } .en-summary__coach-l { grid-row: 7; grid-column: 1 / 3; align-self: end; } .en-summary__coach { grid-row: 8; grid-column: 1 / 3; align-self: start; } .en-summary__avatar { grid-row: 7 / span 2; grid-column: 3; justify-self: end; } .en-summary__i--dur { grid-row: 9; grid-column: 1; } .en-summary__k--dur { grid-row: 9; grid-column: 2; } .en-summary__v--dur { grid-row: 9; grid-column: 3; } .en-summary__i--price { grid-row: 10; grid-column: 1; } .en-summary__k--price { grid-row: 10; grid-column: 2; } .en-summary__v--price { grid-row: 10; grid-column: 3; } .en-summary__cta { grid-row: 11; margin-block-start: 16px; } .en-summary__check { grid-row: 12; grid-column: 1; } .en-summary__fine { grid-row: 12; grid-column: 2 / -1; } .en-book__status { grid-row: 13; } } @media (max-width: 1100px) { /* Hero strip: the per-photo 1440 boxes (nth-child) out-ranked the grid rule; reset them. */ .en-hero__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .en-hero__strip picture:nth-child(n) img { position: static; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 3 / 4; } /* Level rail: each card is the containing block for its own ring, name, note and chevron again. */ .en-rail .en-level { position: relative; top: auto; } .en-level__chevron { left: auto; right: 18px; } /* Featured course: its meta row flows instead of pinning spans to the card's top corner. */ .en-featured .en-meta { height: auto; flex-wrap: wrap; gap: 8px 20px; } .en-featured .en-meta > span { position: static; } .en-featured__badge { width: 39px; } } @media (max-width: 760px) { .en-book__title, .en-book__title-2 { letter-spacing: -0.03em; left: 0; } .en-courses__title { letter-spacing: -0.03em; left: 0; } .en-hero__title { letter-spacing: -0.03em; } .en-hero__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .en-hero__strip picture:nth-child(n) img { border-radius: 16px; } /* Booking form, one column, explicit rows so the select's icon and chevron keep its cell. */ .en-step--1 { grid-column: 1; grid-row: 1; } .en-cal { grid-column: 1; grid-row: 2; } .en-step--2 { grid-column: 1; grid-row: 3; } .en-select, .en-select__icon, .en-select__chev { grid-column: 1; grid-row: 4; } .en-step--3 { grid-column: 1; grid-row: 5; } .en-times { grid-column: 1; grid-row: 6; } .en-times__note { grid-column: 1; grid-row: 7; } .en-step--4 { grid-column: 1; grid-row: 8; } .en-contactbox { grid-column: 1; grid-row: 9; } .en-summary { grid-column: 1; grid-row: 10; } .en-step--2, .en-step--3, .en-step--4 { margin-block-start: 16px; } } @media (max-width: 1379px) { /* An odd card out sits centred under the row instead of hanging left. */ .en-levels { display: flex; flex-wrap: wrap; justify-content: center; width: auto; } .en-summary__v { justify-self: end; } /* The summary photo's source is 378 wide at 1x; past ~420 it visibly pixelates, so it stops there. */ .en-summary__media { width: 100%; max-width: 420px; } } @media (max-width: 900px) and (min-width: 561px) { .en-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1199px) { /* Five nav links plus the burger and login stop fitting below ~1200: the burger carries them. */ .en-nav { display: none; } .en-burger { margin-inline-start: auto; } .en-header__login { margin-inline-start: 12px; } /* A 609px photo beside the text left the text a 240px column at 1024; stack instead. */ .en-about { display: block; } .en-about__photo { max-width: 609px; margin: 0 auto 48px; } .en-about__name { font-size: clamp(34px, 7vw, 72px); line-height: 1.02; } } @media (max-width: 1100px) { .en-mentor__text { flex-basis: 100%; } } @media (max-width: 1439px) and (min-width: 1101px) { /* The featured card's right column in flow: at 1280 the pinned meta row ran under the pinned CTA. */ .en-featured { height: auto; min-height: 282px; display: grid; grid-template-columns: 43% minmax(0, 1fr); column-gap: 32px; padding-inline-end: 24px; } .en-featured__media { position: relative; grid-column: 1; grid-row: 1 / span 5; width: 100%; height: 100%; min-height: 280px; } .en-featured__media img { position: absolute; inset: 0; height: 100%; } .en-featured__eyebrow, .en-featured__title, .en-featured__text, .en-featured .en-meta, .en-featured__cta { position: static; grid-column: 2; width: auto; } .en-featured__eyebrow { margin-block-start: 32px; } .en-featured__title { margin-block-start: 4px; padding-inline-end: 56px; } .en-featured__text { margin-block-start: 16px; } .en-featured .en-meta { height: auto; margin-block-start: 16px; flex-wrap: wrap; gap: 8px 20px; } .en-featured .en-meta > span { position: static; } .en-featured__cta { margin-block: 16px 24px; justify-self: start; width: 176px; } } @media (max-width: 1439px) { .en-about__tag { margin-block-start: 16px; } /* the drawn gap: 5:? tag y274 against the name's line box ending y258 */ } /* ── Found by the plugin's width sweep (bin/sweep.ts), then confirmed with its own collector ─────── */ @media (max-width: 1439px) { /* The 1440 card is 337 wide; at 1104 a nowrap title ran 19px past a 250px card and was clipped. * Wrap it and grow it UPWARD from its drawn baseline (top 131 + 27 = 158, so 104 from the bottom). */ .en-card__title { white-space: normal; right: 16px; top: auto; bottom: 104px; } .en-courses__title { left: 0; } /* Footer: the social row is 196 wide in columns as narrow as 190; the mail address is one long word. */ .en-social { width: auto; display: flex; flex-wrap: wrap; gap: 12px; } .en-social > * { position: relative !important; left: auto !important; flex: 0 0 auto; } .en-frow { min-width: 0; max-width: 100%; } .en-ftext { min-width: 0; overflow-wrap: anywhere; } } /* Target size (WCAG 2.2 SC 2.5.8, 24 by 24): the burger (21), the calendar arrows (20) and the footer * links (21 tall) get a larger HIT area. An empty pseudo element paints nothing, so 1440 is unchanged. */ .en-burger { position: relative; } .en-burger::after, .en-cal__prev::after, .en-cal__next::after, .en-flink::after { content: ""; position: absolute; } .en-burger::after { inset: -4px; } .en-cal__prev::after, .en-cal__next::after { inset: -4px; } .en-flink::after { inset: -2px 0; } @media (max-width: 1439px) { .en-flink { position: relative; } } @media (max-width: 1279px) and (min-width: 1101px) { /* Three cards are 250 wide at 1104, which put the level label under the add button. */ .en-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ══ THE MOBILE SYSTEM ═══════════════════════════════════════════════════════════ * DERIVED, not drawn (the file has no phone frame). The layer above only released the 1440 boxes; * this gives the page one phone layout: ONE gutter for every band, one vertical rhythm, content that * sizes to the column instead of to a 1440 node, and photos cropped for a phone rather than for the * desktop collage. Nothing here matches above 1100px. */ @media (max-width: 1100px) { /* Cards: the photo keeps its drawn proportion (674x340 render) instead of a fixed 170px box, and the * card grows to its content instead of a fixed 262px. */ .en-card { display: flex; flex-direction: column; height: auto; } .en-card__media { position: relative; width: 100%; height: auto; aspect-ratio: 674 / 340; overflow: hidden; } .en-card__media img { width: 100%; height: 100%; object-fit: cover; } .en-card__fade { width: 100%; height: 100%; } .en-card__title { position: relative; left: auto; right: auto; top: auto; bottom: auto; z-index: 2; margin: -44px 16px 0; min-height: 27px; } .en-card .en-meta { position: static; margin: 26px 64px 22px 16px; flex-wrap: wrap; row-gap: 6px; } .en-card__add { left: auto; right: 16px; top: auto; bottom: 16px; } /* Booking level cards take the column, their arrow follows the right edge. */ .en-levels { width: 100%; } .en-levelcard { flex: 1 1 300px; width: auto; max-width: 420px; } .en-levelcard__go { left: auto; right: 24px; } .en-levelcard__text { width: auto !important; right: 32px; } } @media (max-width: 760px) { :root { --en-gutter: 20px; } .en-courses { --en-gutter: 20px; } .en-courses .en-shell, .en-shell { width: calc(100% - 40px); } /* Header */ .en-header { padding-block-start: 12px; } .en-header__bar { height: 64px; } .en-header__logo, .en-header__logo svg { width: 112px; height: 64px; } .en-header__login { width: 40px; padding: 0; gap: 0; justify-content: center; } .en-header__login span:not(.en-icon) { display: none; } /* Hero */ .en-hero { padding-block-end: 48px; } .en-hero__text { padding-block-start: 28px; } .en-hero__title { font-size: clamp(34px, 10.4vw, 52px); line-height: 1; letter-spacing: -0.03em; } .en-hero__tagline { margin-block-start: 10px; font-size: clamp(22px, 6.4vw, 32px); line-height: 1.2; letter-spacing: -0.02em; width: auto; } .en-hero__lead { margin-block-start: 18px; font-size: 16px; line-height: 26px; } .en-hero__lead-1, .en-hero__lead-2 { display: inline; line-height: inherit; } .en-hero__lead-1::after { content: " "; } .en-hero__actions { margin-block-start: 28px; gap: 12px; } .en-btn--primary, .en-btn--ghost { height: 56px; } .en-hero__figure { margin-block-start: 32px; } /* The strip becomes a row you swipe, one photo and a peek of the next, snapping photo by photo. */ .en-hero__strip { display: flex; gap: 12px; margin-block-start: 28px; margin-inline: -20px; padding-inline: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .en-hero__strip::-webkit-scrollbar { display: none; } .en-hero__strip picture:nth-child(n) img { position: static; left: auto; top: auto; flex: 0 0 auto; width: 68%; max-width: 300px; height: auto; aspect-ratio: 3 / 4; border-radius: 16px; object-fit: cover; scroll-snap-align: start; } .en-hero__strip picture { display: contents; } /* Section rhythm: every band 72 top and bottom, one gutter. */ .en-courses { padding-block: 72px 64px; } .en-courses__title { font-size: clamp(32px, 9.4vw, 44px); line-height: 1.02; } .en-courses__lead { margin-block-start: 14px; font-size: 16px; line-height: 25px; } .en-courses__body { margin-block-start: 32px; } .en-rail { gap: 10px; } .en-rail__label--topics { margin-block-start: 14px; } /* Topic filters: one row you swipe instead of pills wrapping raggedly. */ .en-filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: -20px; padding-inline: 20px; scrollbar-width: none; } .en-filters::-webkit-scrollbar { display: none; } .en-filter { flex: 0 0 auto; white-space: nowrap; background: #161616; } .en-filter[aria-pressed="true"] { background: #C70F14; } .en-featured__media { height: auto; aspect-ratio: 16 / 10; } .en-featured__media img { height: 100%; } .en-featured__eyebrow, .en-featured__title, .en-featured__text, .en-featured .en-meta, .en-featured__badge, .en-featured__cta { margin-inline: 20px; } .en-featured__title { font-size: 28px; line-height: 30px; } .en-featured__text { font-size: 15px; line-height: 24px; } .en-cards { row-gap: 16px; } .en-mentor { padding: 20px; } /* Booking */ .en-book { padding: 72px 20px 64px; } .en-book__title { margin-block-start: 28px; font-size: clamp(36px, 10.6vw, 56px); line-height: 1; } .en-book__lead { font-size: 16px; line-height: 25px; } .en-book__lead--1 { margin-block-start: 16px; } .en-switch { margin-block-start: 32px; max-width: none; } .en-levels { margin-block-start: 32px; gap: 12px; } .en-levelcard { flex-basis: 100%; max-width: none; height: 224px; } .en-levelcard__ring { left: 24px; top: 24px; width: 64px; height: 64px; } .en-levelcard__ring svg { width: 34px; height: 34px; } .en-levelcard__go { top: 24px; } .en-levelcard__title, .en-levelcard--advanced .en-levelcard__title { left: 24px; top: 108px; font-size: 22px; } .en-levelcard__text, .en-levelcard--advanced .en-levelcard__text { left: 24px; right: 24px; top: 146px; } .en-form { margin-block-start: 40px; border-radius: 24px; } .en-summary { padding: 20px; } /* About, benefits, shop, footer: same gutter and rhythm. */ .en-about, .en-benefits { padding: 72px 20px; } .en-about__photo { margin-block-end: 32px; } .en-about__photo img { border-radius: 16px; } .en-about__name { font-size: clamp(40px, 11vw, 56px); } .en-about__tag { font-size: 19px; line-height: 28px; } .en-about__text--1, .en-about__text--2 { margin-block-start: 18px; } .en-stats { gap: 12px; margin-block-start: 32px; } .en-benefits__title { font-size: 28px; line-height: 38px; } .en-benefits__grid { margin-block-start: 40px; gap: 16px; } .en-shop { padding: 72px 20px; } .en-shop__title { font-size: 44px; line-height: 56px; } .en-shop__lead { font-size: 16px; line-height: 25px; } .en-products { margin-block-start: 40px; gap: 16px; } .en-footer { padding: 64px 20px 28px; } } @media (max-width: 1100px) { /* The card renders carry pieces of neighbouring layers at their edges (a partial add button, card 3's baked * title, a light 2px edge). A 170px desktop box hid them; the full-proportion phone crop does not. */ .en-card__media img { width: 104%; max-width: none; height: 114%; margin: -1% 0 0 -2%; object-position: center top; } } @media (max-width: 760px) { .en-about { padding-block-start: 56px; } .en-stat__title, .en-stat:nth-child(4) .en-stat__title { top: 84px; font-size: 21px; line-height: 26px; width: 130px !important; } /* Products: two per row, the card's parts in flow. Swatches and sizes carry inline 1440 offsets. */ .en-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .en-product { height: auto; padding: 10px 10px 12px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr auto; column-gap: 4px; row-gap: 8px; } .en-product > * { position: static !important; left: auto !important; right: auto !important; top: auto !important; } .en-product__media { grid-column: 1 / -1; grid-row: 1; position: relative !important; width: auto; aspect-ratio: 1; height: auto; } .en-product__media img { position: absolute !important; width: auto !important; height: auto !important; max-width: 84%; max-height: 84%; mix-blend-mode: multiply; } .en-product__name { grid-column: 1 / -1; grid-row: 2; margin-block-start: 4px; font-size: 14px; line-height: 20px; white-space: normal; } .en-product__price { grid-column: 1 / -1; grid-row: 3; font-size: 14px; line-height: 20px; color: #6B6B68; } .en-swatch, .en-size { grid-row: 4; align-self: start; } .en-swatch { width: 20px; height: 20px; margin: 3px; } .en-size { width: 26px; height: 26px; font-size: 10px; } .en-product__cta { grid-column: 1 / -1; grid-row: 5; position: relative !important; width: auto; height: 40px; } .en-product__cta .en-icon, .en-product__cta span:last-child { position: static; } .en-product__cta { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; } /* Footer: navigation and information share a row on a phone. */ .en-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; } .en-footer__inner > .en-fcol--brand, .en-footer__inner > .en-fcol--contact, .en-footer__inner > .en-fcol--news { grid-column: 1 / -1; } .en-footer__field, .en-footer__subscribe, .en-footer__news { max-width: none; } } @media (max-width: 1439px) { .en-product__media img { mix-blend-mode: multiply; } /* the covers are white-backed; the tile is #FAFAFA */ } /* A picture's is a child too: inside a display contents picture it took a grid cell (768 laid the * photos out diagonally) and a flex gap (the phone row doubled its spacing). It never renders. */ .en-hero__strip source { display: none; } @media (max-width: 1100px) and (min-width: 761px) { /* One tablet gutter for every band (the hero read 40, the courses 20). */ :root { --en-gutter: 32px; } .en-courses { --en-gutter: 32px; } .en-courses .en-shell, .en-shell { width: calc(100% - 64px); } .en-book { padding-inline: 32px; } .en-about, .en-benefits, .en-shop, .en-footer { padding-inline: 32px; } } @media (max-width: 1100px) and (min-width: 761px) { .en-hero__figure { max-width: 560px; margin-inline: auto; } /* full width it stood 700 tall and outweighed the page */ } /* ══ PHASE 2: interactions ═══════════════════════════════════════════════════════ * DERIVED (the design draws no open menu, no hover, no empty state). Built from the page's own tokens: * #070808 ground, #D01016 red, Inter, the 20/32 gutters. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } html.en-lock, html.en-lock body { overflow: hidden; } .en-drawer { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; gap: 32px; padding: 12px 20px 32px; background: #070808; overflow-y: auto; } .en-drawer[hidden] { display: none; } .en-drawer__top { display: flex; align-items: center; justify-content: space-between; height: 64px; } .en-drawer__top .en-header__logo, .en-drawer__top .en-header__logo svg { width: 112px; height: 64px; } .en-drawer__close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #2B2B2B; border-radius: 10px; background: #0E0E0E; color: #FFFFFF; cursor: pointer; } .en-drawer__nav { display: flex; flex-direction: column; } .en-drawer__nav a { padding: 14px 0; border-bottom: 1px solid #1B1B1B; color: #FFFFFF; font-size: 26px; line-height: 32px; font-weight: 900; font-style: italic; text-transform: uppercase; text-decoration: none; } .en-drawer__nav a:hover, .en-drawer__nav a:focus-visible { color: #D01016; } .en-drawer__cta { width: 100%; height: 56px; } .en-drawer__login { align-self: center; color: #B9B9BA; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; } @media (min-width: 761px) { .en-drawer { padding: 47px max(32px, calc((100vw - 1288px) / 2)) 48px; } .en-drawer__nav a { font-size: 40px; line-height: 48px; } .en-drawer__cta { width: 280px; } .en-drawer__login { align-self: flex-start; } } .en-cards__empty { margin: 24px 0 0; padding: 32px; border: 1px dashed #2B2B2B; border-radius: 16px; color: #919191; text-align: center; } .en-card[hidden] { display: none !important; } .en-swatch { padding: 0; cursor: pointer; } .en-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px #2B2B2B; } .en-share[data-copied]::after { content: "Nukopijuota"; position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); padding: 4px 8px; border-radius: 6px; background: #FFFFFF; color: #000000; font-size: 12px; white-space: nowrap; } /* Focus that can be seen, on every control (the design draws none, and keyboard users need one). */ a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid #D01016; outline-offset: 3px; } /* Hover, kept quiet so the drawn resting state is what the design shows. */ .en-btn--primary:hover, .en-featured__cta:hover, .en-summary__cta:not([disabled]):hover, .en-footer__subscribe:hover { filter: brightness(1.12); } .en-btn--ghost:hover, .en-mentor__cta:hover, .en-product__cta:hover { background: rgb(255 255 255 / 0.06); } .en-product__cta:hover { background: #F4F4F4; } .en-nav a:hover, .en-flink:hover, .en-ftext:hover { color: #FFFFFF; } .en-card:hover .en-card__media img { transform: scale(1.03); } .en-card__media img { transition: transform .35s ease; } .en-swatch { appearance: none; } .ea-preview .en-swatch[aria-pressed="true"] { box-shadow: none; } /* the design draws no selected colour */ /* ══ PHASE 2: inner pages ════════════════════════════════════════════════════════ * DERIVED (no course, product or archive page is drawn). Same tokens as the homepage: Inter black * italic display type, #070808 / #090909 grounds, #161616 surfaces, #1B1B1B lines, #D01016 red, white shop. */ .en-frame-hero--page { box-shadow: none; } .en-frame-hero--page .en-header { padding-block-end: 16px; } .en-page { background: #070808; color: #FFFFFF; } .en-page .en-shell { width: min(1288px, 100% - (2 * var(--en-gutter))); } .en-page__hero { background: #030303; padding-block: 48px 72px; } .en-page__hero--short { padding-block: 64px 24px; } .en-page__band { background: #090909; padding-block: 72px; } .en-page__band--alt { background: #070808; } .en-page__band--light { background: #FFFFFF; color: #000000; } .en-page__band--tight { padding-block-start: 0; } .en-page__title { margin: 16px 0 0; font-size: clamp(36px, 5.6vw, 72px); line-height: 1; font-weight: 900; font-style: italic; letter-spacing: -0.03em; text-transform: uppercase; } .en-page__title--dark { color: #000000; font-style: normal; text-transform: none; font-weight: 700; letter-spacing: -0.02em; } .en-page__lead { max-width: 640px; margin: 16px 0 0; font-size: 18px; line-height: 28px; color: #919191; } .en-page__lead--dark { color: #6B6B68; } .en-page__h2 { margin: 0 0 32px; font-size: clamp(26px, 3vw, 36px); line-height: 1.1; font-weight: 900; font-style: italic; text-transform: uppercase; } .en-page__h2--dark { color: #000000; font-style: normal; text-transform: none; font-weight: 700; } .en-page__text { max-width: 640px; margin-block-start: 20px; font-size: 16px; line-height: 26px; color: #A3A3A3; } .en-page__text--dark { color: #6B6B68; } .en-page__text p { margin: 0 0 12px; } .en-crumbs--page { position: static; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; white-space: normal; } .en-crumbs--page a { color: #737373; text-decoration: none; } .en-crumbs--page a:hover { color: #FFFFFF; } .en-crumbs--light a { color: #6B6B68; } .en-crumbs--light .en-crumbs__sep { color: #C9C9C9; } /* Course page */ .en-course__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 56px; align-items: center; } .en-course__eyebrow { position: static; margin: 28px 0 0; } .en-course__meta { margin-block-start: 20px; flex-wrap: wrap; gap: 8px 24px; } .en-course__meta > span { gap: 8px; font-size: 14px; line-height: 20px; color: #919191; } .en-course__meta svg { width: 16px; height: 16px; } .en-course__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-block-start: 32px; } .en-course__actions .en-btn { width: auto; padding-inline: 28px; } .en-course__price { margin: 0 12px 0 0; font-size: 32px; line-height: 40px; font-weight: 900; font-style: italic; } .en-course__cover { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid #1B1B1B; aspect-ratio: 674 / 300; } .en-course__cover img { width: 104%; max-width: none; height: 114%; margin: -1% 0 0 -2%; object-fit: cover; object-position: center top; } .en-course__body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; } .en-video { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000000; border: 1px solid #1B1B1B; } .en-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .en-lockpanel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; aspect-ratio: 16 / 9; padding: 32px; border: 1px solid #1B1B1B; border-radius: 16px; background: radial-gradient(circle at 50% 30%, rgb(208 16 22 / 0.18), transparent 60%), #0F100D; text-align: center; } .en-lockpanel h2 { margin: 4px 0 0; font-size: 26px; line-height: 32px; font-weight: 900; font-style: italic; text-transform: uppercase; } .en-lockpanel p { max-width: 420px; margin: 0 0 8px; color: #919191; line-height: 24px; } .en-lockpanel .en-btn { width: auto; padding-inline: 28px; height: 52px; } .en-lockpanel__icon { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid #333333; border-radius: 28px; background: #161616; color: #D01016; } .en-lessons { padding: 24px; border: 1px solid #1B1B1B; border-radius: 16px; background: #0F100D; } .en-lessons__title { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 12px; font-size: 18px; line-height: 26px; } .en-lessons__title span { font-size: 13px; font-weight: 500; color: #737373; } .en-lessons__list { margin: 0; padding: 0; list-style: none; } .en-lesson { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 32px; align-items: center; gap: 12px; min-height: 56px; border-top: 1px solid #1B1B1B; } .en-lesson__n { font-size: 13px; font-weight: 700; color: #737373; } .en-lesson__t { font-size: 15px; line-height: 21px; color: #DCDCDC; } .en-lesson.is-locked .en-lesson__t { color: #8A8A8A; } .en-lesson.is-current .en-lesson__t { color: #FFFFFF; font-weight: 700; } .en-lesson__d { font-size: 12px; color: #737373; } .en-lesson__play, .en-lesson__lock { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: #D01016; cursor: pointer; } .en-lesson__lock { color: #555555; cursor: default; } .en-lesson__play svg { width: 24px; height: 24px; } .en-lessons__empty { margin: 0; color: #737373; } .en-cards--page { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; } .en-cards--page .en-card:nth-child(3n) { margin-inline-start: 0; } /* The page card grid uses the flowing card at every width (the homepage keeps its drawn card at 1440). */ .en-cards--page .en-card { display: flex; flex-direction: column; height: auto; } .en-cards--page .en-card__media { position: relative; width: 100%; height: auto; aspect-ratio: 674 / 340; overflow: hidden; } .en-cards--page .en-card__media img { width: 104%; max-width: none; height: 114%; margin: -1% 0 0 -2%; object-fit: cover; object-position: center top; } .en-cards--page .en-card__fade { width: 100%; height: 100%; } .en-cards--page .en-card__title { position: relative; left: auto; top: auto; z-index: 2; margin: -44px 16px 0; white-space: normal; } .en-cards--page .en-meta { position: static; margin: 26px 64px 22px 16px; flex-wrap: wrap; row-gap: 6px; } .en-cards--page .en-card__add { left: auto; right: 16px; top: auto; bottom: 16px; } .en-cards--page .en-meta > span { font-size: 11px; line-height: 17px; font-weight: 500; color: #717171; gap: 6px; } .en-cards--page .en-meta > span + span { margin-inline-start: 15px; } .en-cards--page .en-meta svg { width: 14px; height: 14px; } /* Product page and product grid */ .en-shoppage { background: #FFFFFF; } .en-pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; margin-block-start: 32px; align-items: start; } .en-pdp__media { display: grid; place-items: center; margin: 0; aspect-ratio: 1; border-radius: 16px; background: #FAFAFA; } .en-pdp__media img { width: 72%; height: auto; mix-blend-mode: multiply; } .en-pdp__title { margin: 0; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; color: #2B2B2B; } .en-pdp__price { margin: 12px 0 0; font-size: 24px; line-height: 32px; font-weight: 500; color: #2B2B2B; } .en-pdp__label { margin: 28px 0 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #6B6B68; } .en-pdp__row { display: flex; flex-wrap: wrap; gap: 10px; } .en-swatch--lg { position: static; width: 32px; height: 32px; border-radius: 16px; border: 1px solid #E0E0E0; } .en-size--lg { position: static; width: 52px; height: 44px; font-size: 14px; } .en-pdp__cta { width: 100%; max-width: 360px; margin-block-start: 32px; height: 56px; gap: 10px; } .en-pdp__cta svg { width: 18px; height: 18px; } .en-pdp__cta .en-icon svg path, .en-pdp__cta svg path { stroke: currentColor; } .en-pdp__note { margin: 12px 0 0; font-size: 13px; color: #8A8A8A; } .en-pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .en-pgrid--archive { margin-block-start: 48px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .en-pcard { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 12px; color: #2B2B2B; text-decoration: none; box-shadow: 0 0 2px rgb(23 26 31 / .12), 0 2px 5px rgb(23 26 31 / .09); } .en-pcard__media { display: grid; place-items: center; aspect-ratio: 1; margin-block-end: 8px; border-radius: 10px; background: #FAFAFA; } .en-pcard__media img { width: 76%; height: auto; mix-blend-mode: multiply; } .en-pcard__name { font-weight: 600; } .en-pcard__price { color: #6B6B68; } .en-pcard:hover { box-shadow: 0 0 2px rgb(23 26 31 / .16), 0 8px 20px rgb(23 26 31 / .12); } @media (max-width: 1100px) { .en-course__head, .en-course__body, .en-pdp { grid-template-columns: minmax(0, 1fr); gap: 32px; } .en-course__cover { order: -1; } .en-cards--page { grid-template-columns: repeat(2, minmax(0, 1fr)); } .en-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .en-page__hero { padding-block: 24px 48px; } .en-page__band { padding-block: 48px; } .en-cards--page { grid-template-columns: minmax(0, 1fr); } .en-course__actions .en-btn { width: 100%; } .en-lockpanel { aspect-ratio: auto; padding: 40px 20px; } .en-lessons { padding: 16px; } .en-lesson { grid-template-columns: 28px minmax(0, 1fr) auto 28px; gap: 8px; } .en-pdp__cta { max-width: none; } .en-pgrid { gap: 12px; } } .en-product__media picture { display: contents; } .en-pdp__media img, .en-pcard__media img { mix-blend-mode: normal; } @media (max-width: 1439px) { .en-product__media img { mix-blend-mode: normal; } } @media (max-width: 1439px) { .en-product__media img { object-fit: contain; } } .en-subscribe { display: contents; } /* grouping only: the field and button stay placed against the footer frame */ .en-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; } .en-subscribe__status { position: absolute; left: 1123px; top: 322px; width: 245px; margin: 0; font-size: 12px; line-height: 16px; color: #9D9D9D; } .en-subscribe__status[data-state="error"] { color: #F87171; } .en-subscribe__status[data-state="ok"] { color: #86C06C; } @media (max-width: 1439px) { .en-subscribe__status { position: static; width: auto; } } .en-404__inner { padding-block: 64px 48px; } .en-404__code { margin: 0; font-size: clamp(96px, 18vw, 220px); line-height: .9; font-weight: 900; font-style: italic; letter-spacing: -0.05em; color: #161616; -webkit-text-stroke: 1px #2B2B2B; } .en-lockpanel--flat { aspect-ratio: auto; padding: 56px 24px; } .en-link { color: #FFFFFF; text-underline-offset: 4px; } /* "Domėtis" replaced "Į krepšelį" (operator, 2026-09-16): the label is shorter, so the icon and label are centred as a * group with the drawn 8px gap instead of pinned at offsets measured for the old text. */ .en-product__cta { display: flex; align-items: center; justify-content: center; gap: 8px; } .en-product__cta .en-icon, .en-product__cta span:last-child { position: static; } /* "Mano mokymai" is longer than the drawn "Prisijungti", and the node's fixed 139px width wrapped it onto two * lines at the drawn 24px line spacing. The logged-in button sizes to its label; the drawn one is untouched. */ .en-header__login--account { width: auto; min-width: 139px; padding-inline: 18px; white-space: nowrap; } /* ══════════════════════════════════════════════════════════════════════════════ * THE COURSE PASS - layout A, the account pages and the request form. * * DERIVED, not drawn: the design has no course page, no login and no account. Layout A was * picked by the operator on 2026-09-17 from three pictures, so the numbers below come from * that mockup and from the site's own tokens (16px card radius, #1B1B1B hairline, #0F100D * panel), never from a Figma node. The 1440 homepage is untouched by everything here. * ══════════════════════════════════════════════════════════════════════════════ */ .en-page__h3 { margin: 0 0 16px; font-size: 20px; line-height: 27px; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: -0.01em; } /* Layout A: the content column, and the purchase card that follows the scroll beside it. */ .en-course__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; } .en-course__main { display: grid; gap: 28px; min-width: 0; } .en-course__text { max-width: 62ch; } /* The purchase card. Also the shell for every account form, so the two read as one family. */ .en-buy { padding: 24px; border: 1px solid #1B1B1B; border-radius: 16px; background: #0F100D; } .en-buy--side { position: sticky; top: 24px; } .en-buy__price { margin: 0; font-size: 40px; line-height: 1; font-weight: 900; font-style: italic; letter-spacing: -0.03em; } .en-buy__price small { display: block; margin-block-start: 8px; font-size: 13px; line-height: 19px; font-weight: 500; font-style: normal; letter-spacing: 0; color: #737373; } .en-buy__cta { width: 100%; margin-block-start: 20px; } .en-buy__h { margin: 26px 0 0; font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #737373; } .en-buy__note { margin: 0; font-size: 14px; line-height: 22px; color: #919191; } /* The three steps (Q5). Counters, so a reworded step list never renumbers by hand. */ .en-steps { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 16px; counter-reset: en-step; } .en-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; counter-increment: en-step; font-size: 14px; line-height: 22px; color: #C4C4C4; } .en-steps li::before { content: counter(en-step); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 14px; background: rgb(208 16 22 / 0.14); border: 1px solid rgb(208 16 22 / 0.45); color: #D01016; font-size: 13px; font-weight: 800; } /* Phone and email as plain tappable text, which is what the round asked for instead of a form-only page. */ .en-contacts { display: grid; gap: 10px; margin-block-start: 24px; padding-block-start: 20px; border-top: 1px solid #1B1B1B; } .en-contacts a { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; line-height: 24px; font-weight: 700; color: #FFFFFF; text-decoration: none; } .en-contacts a:hover { text-decoration: underline; text-underline-offset: 4px; } .en-contacts svg { width: 18px; height: 18px; color: #D01016; flex: 0 0 auto; } /* The self-hosted player. A locked visitor never receives this element at all. */ .en-player { display: grid; gap: 12px; } .en-player__video { width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; border: 1px solid #1B1B1B; background: #000000; display: block; } .en-player__now { margin: 0; font-size: 14px; line-height: 21px; font-weight: 700; color: #DCDCDC; } /* The lock panel gains the course's own cover, blurred: a dark box says nothing about the course. */ .en-lockpanel { position: relative; overflow: hidden; } .en-lockpanel__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(9px) brightness(0.32) saturate(0.5); } .en-lockpanel__in { position: relative; display: grid; justify-items: center; gap: 10px; max-width: 460px; } .en-lockpanel__in h2 { margin: 0; } .en-lockpanel__in p { margin: 0; } .en-lockpanel__in a { color: #FFFFFF; } /* A free lesson is the one row of a paid course anyone can open, so it is marked as such. */ .en-lesson__free { font-size: 11px; line-height: 16px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #D01016; } .en-lesson.is-free .en-lesson__t { color: #FFFFFF; } .en-lesson.is-free .en-lesson__play { color: #D01016; } /* ── the forms: request, login, reset, password change ────────────────────── * A separate block from .en-form, which is the booking form the design DOES draw as a white * absolutely placed panel. Reusing that name here inherited its position and its colours. */ .en-fm { display: grid; gap: 14px; margin: 0; } .en-fm__row { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; } .en-fm__note { margin: 0; font-size: 12px; line-height: 19px; color: #737373; } .en-fm .en-btn { width: 100%; } .en-field { display: grid; gap: 7px; } .en-field > span { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #737373; } .en-field input, .en-field textarea { height: 50px; padding: 0 16px; border: 1px solid #262626; border-radius: 6px; background: #0A0A0A; color: #FFFFFF; font: inherit; font-size: 15px; } .en-field textarea { height: auto; min-height: 96px; padding: 14px 16px; resize: vertical; line-height: 24px; } .en-field input:focus-visible, .en-field textarea:focus-visible { outline: 2px solid #D01016; outline-offset: 1px; } /* The honeypot. Off-screen rather than display:none, because some bots skip hidden fields. */ .en-field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .en-check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #B5B5B5; } .en-check input { width: 18px; height: 18px; accent-color: #D01016; } .en-notice { margin: 0 0 16px; padding: 12px 14px; border-radius: 8px; font-size: 14px; line-height: 21px; } .en-notice--error { background: rgb(208 16 22 / 0.12); border: 1px solid rgb(208 16 22 / 0.5); color: #FFC9CB; } .en-notice--ok { background: rgb(34 197 94 / 0.10); border: 1px solid rgb(34 197 94 / 0.4); color: #BBF7D0; } /* The account pages are a single narrow column: a login form the width of the page reads as a mistake. */ /* Two classes, because `.en-page .en-shell` above is also two and would otherwise win: the * login form rendered 1238px wide, which reads as a mistake rather than a form. */ .en-page .en-account__shell { width: min(520px, 100% - (2 * var(--en-gutter))); margin-inline: auto; } .en-account__aside { margin: 18px 0 0; font-size: 13px; line-height: 21px; color: #737373; text-align: center; } .en-account__pass { margin-block-start: 32px; } .en-account__pass > summary { cursor: pointer; font-size: 14px; font-weight: 700; color: #B5B5B5; } .en-account__pass > summary:hover { color: #FFFFFF; } .en-account__pass .en-buy { max-width: 520px; margin-block-start: 16px; } @media (max-width: 1000px) { /* * One column, and the ORDER changes rather than just stacking. Stacked as written, the * purchase card ends up after the request form, so a phone reader is asked to fill in a * form before being shown the price. display:contents dissolves the content column so its * parts and the card are all grid items and can be interleaved: what is in it, what it * costs, then the lessons, then the form. */ .en-course__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .en-course__main { display: contents; } .en-course__main > .en-player, .en-course__main > .en-video, .en-course__main > .en-lockpanel { order: 1; } .en-buy--side { position: static; order: 2; } .en-course__main > .en-lessons { order: 3; } .en-course__main > .en-request { order: 4; } } @media (max-width: 760px) { .en-buy { padding: 18px; } .en-buy__price { font-size: 34px; } .en-fm__row { grid-template-columns: minmax(0, 1fr); } .en-contacts a { font-size: 16px; } .en-page .en-account__shell { width: calc(100% - 40px); } } .en-fm__note[data-state="error"] { color: #FFC9CB; } .en-fm__note[data-state="ok"] { color: #BBF7D0; } /* The homepage preview overlay (LR Q4). */ .en-preview { width: min(880px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; background: transparent; color: #FFFFFF; } .en-preview::backdrop { background: rgb(3 3 3 / 0.82); } .en-preview__in { position: relative; display: grid; gap: 12px; } .en-preview__video { width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; border: 1px solid #1B1B1B; background: #000000; display: block; } .en-preview__title { margin: 0; font-size: 14px; line-height: 21px; font-weight: 700; color: #DCDCDC; } .en-preview__close { position: absolute; top: -44px; right: 0; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #333333; border-radius: 18px; background: #0E0E0E; color: #FFFFFF; cursor: pointer; } .en-preview__close:hover { background: #1A1A1A; } button.en-featured__play { padding: 0; border: 0; background: none; cursor: pointer; } /* A page that is only words: the legal pages, and anything the client writes later. Measured * rather than guessed at: a line longer than about 75 characters is hard to track back to, so the * column is capped and the type is a step larger than the site's UI text. */ .en-prose { width: min(760px, 100% - (2 * var(--en-gutter))); margin-inline: auto; } .en-page__text.en-prose { max-width: none; font-size: 16px; line-height: 27px; color: #B5B5B5; } .en-page__text.en-prose h2 { margin: 40px 0 12px; font-size: 22px; line-height: 30px; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: -0.01em; color: #FFFFFF; } .en-page__text.en-prose h3 { margin: 28px 0 8px; font-size: 16px; line-height: 24px; font-weight: 700; color: #FFFFFF; } .en-page__text.en-prose p { margin: 0 0 16px; } .en-page__text.en-prose ul, .en-page__text.en-prose ol { margin: 0 0 16px; padding-inline-start: 22px; } .en-page__text.en-prose li { margin-block-end: 8px; } .en-page__text.en-prose a { color: #FFFFFF; text-underline-offset: 3px; } .en-page__text.en-prose strong { color: #FFFFFF; } .en-page__text.en-prose hr { margin-block: 32px; border-top: 1px solid #1B1B1B; } /* Nothing published yet. The design never drew this state, because the design was drawn full: the client starts by deleting the examples, and an empty frame reads as a broken page. */ .en-empty { margin: 48px 0 0; text-align: center; font-size: 16px; line-height: 24px; color: #9A9A98; } .en-empty--dark { color: #6B6B68; } .en-empty--shop { position: relative; top: -60px; } @media (max-width: 1439px) { .en-empty--shop { position: static; margin-top: 24px; } }