/* ============================================================ Prague Guitar Academy — styles Every value here comes from tokens.css. Change design there. ============================================================ */ /* --- reset ------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body, h1, h2, h3, p, figure, ul { margin: 0; } ul { padding: 0; list-style: none; } img, svg { display: block; max-width: 100%; } picture { display: contents; } /* With display:contents the tags become zero-width flex/grid items, so gaps get counted between them too. Take them out of layout. */ source { display: none; } button, input { font: inherit; color: inherit; } a { color: inherit; } body { font-family: var(--font); font-size: var(--t-body); font-weight: var(--w-regular); line-height: var(--lh-body); color: var(--ink); background: var(--white); /* No -webkit-font-smoothing. Live leaves it at `auto`, which on a Mac means subpixel antialiasing; `antialiased` thins every glyph on the page by roughly half a pixel of stem weight. That is the whole of "the font in LIVE is bolder" - it was never a weight, a size or a colour, it was this one line. */ overflow-x: clip; } /* clip, and on the root as well as the body. `hidden` on the body alone propagates to the viewport but still makes a scroll container, and on iPad that container can be panned to anything sitting outside the page box - the decorative photos that bleed past both edges, which live bleeds the same way. `clip` cannot be scrolled at all, and because it is only on the inline axis the page still scrolls vertically. */ html { overflow-x: clip; } /* No text-wrap: balance anywhere. Elementor does not balance a single heading, so live fills line one and lets line two be short. Balancing evens the two lines out, which moves the break on EVERY heading that runs to two lines - the hero title, "Before You Sign Up...", the benefit titles - while the column width matches live exactly. Two sections had already opted out one at a time; the default was wrong. */ h1, h2, h3 { line-height: var(--lh-head); } :where(a, button):focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: var(--radius); } /* Hidden by being 1x1 and clipped, not by being parked at -9999px. An absolutely positioned box 9999px to the left of the viewport is content outside the page box, and Safari on iPad lets the user pan to it after a rotation - which is what left the page scrolled with the headings off-frame until it was pinched back. */ .skip { position: absolute; left: 0; top: 0; z-index: 100; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; background: var(--pink); color: var(--white); padding: 0; font-weight: var(--w-bold); } .skip:focus { width: auto; height: auto; overflow: visible; clip-path: none; padding: var(--s-xs) var(--s-sm); } /* --- layout primitives ------------------------------------ */ .wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); } .wrap--wide { max-width: var(--page-wide); } .wrap--prose { max-width: calc(var(--prose) + 2 * var(--gutter)); } .section { padding-block: var(--s-xl); } .section--tight { padding-block: var(--s-lg); } /* Live gives the FAQ heading's band no padding above at all - its 10px is the content wrap's - and 20 below it, and the socials band none either way. --s-lg put 48.7 on both, which is what made each of them sit so much lower than live's. */ .section--tight:has(.faq__title) { padding-block: 10px 30px; } .section--tight.socials { padding-block: 10px; } .section--dark { background: var(--black); color: var(--on-dark); } .section--plum { background: var(--plum); color: var(--on-dark); } .section--pink { background: var(--pink); color: var(--on-dark); } .section--dark h1, .section--dark h2, .section--dark h3, .section--plum h1, .section--plum h2, .section--plum h3, .section--pink h1, .section--pink h2, .section--pink h3 { color: var(--on-dark); } /* Two-column split that collapses on its own. auto-fit + minmax means no breakpoint is needed. */ .split { display: grid; gap: var(--s-lg); grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); align-items: center; } .split--top { align-items: start; } /* --- buttons ---------------------------------------------- */ .btn { /* 15px, live's own gap between the label and the arrow. --s-2xs resolved to 9.8 and made the button 5.2px narrower than live's 393.6 - the label and the padding are identical. */ display: inline-flex; align-items: center; gap: 15px; background: var(--pink); color: var(--white); font-weight: var(--w-bold); font-size: var(--t-btn); line-height: 1; text-decoration: none; text-transform: uppercase; padding: 1.25rem 2.5rem; border-radius: var(--radius-pill); transition: background var(--fast) var(--ease), transform var(--fast) var(--ease); } .btn:hover { background: var(--pink-dark); } .btn:active { transform: translateY(1px); } .btn__arrow { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; } /* --- header banner ---------------------------------------- */ .banner { min-height: clamp(9rem, 4rem + 22vw, 22rem); background-image: image-set(url("../assets/img/header.avif") type("image/avif"), url("../assets/img/header.webp") type("image/webp")); background-color: var(--black); background-size: cover; background-position: 50% 50%; } @supports not (background-image: image-set(url("x.avif") type("image/avif"))) { .banner { background-image: url("../assets/img/header.jpg"); } } /* The live site swaps in a separately-composed banner on phones (PGA-webheader-mobile2.jpg). The desktop crop puts the wordmark far right, so `cover` on a narrow screen cuts it in half. */ @media (max-width: 767px) { .banner { /* live is 244px tall at 375 wide = 65vw */ min-height: clamp(13rem, 65vw, 20rem); background-image: image-set(url("../assets/img/header-mobile.avif") type("image/avif"), url("../assets/img/header-mobile.webp") type("image/webp")); } @supports not (background-image: image-set(url("x.avif") type("image/avif"))) { .banner { background-image: url("../assets/img/header-mobile.jpg"); } } } /* --- navigation ------------------------------------------- */ .nav { background: var(--white); border-bottom: 1px solid var(--rule); } .nav__inner { display: flex; justify-content: center; flex-wrap: wrap; /* No horizontal gap: live's nav items butt together and carry their spacing as padding inside the link, so the whole item is the hit target. Measured at 1440, "HOME" is 100px wide and the next item starts at exactly its right edge. */ gap: var(--s-xs) 0; padding-block: var(--s-sm); } .nav a { text-decoration: none; text-transform: uppercase; font-weight: var(--w-semi); font-size: var(--t-nav); color: var(--black); /* 1em, not a fixed px: live pads 20px at the 20px desktop size and 12px at the 12px phone size, which is the same em either way. */ padding-inline: 1em; padding-block: var(--s-3xs); border-bottom: 2px solid transparent; transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease); } .nav a:hover { color: var(--pink); } .nav a[aria-current="page"] { color: var(--pink); border-bottom-color: var(--pink); } /* --- hero -------------------------------------------------- */ /* 50px, live's own section padding; --s-xl resolved to 79 and pushed the whole hero 29px down. The 10px is the column inset live has on all four sides - ours had it left and right only, so the title sat 10px high. */ .hero { background: var(--black); color: var(--on-dark); padding-block: 50px; } /* the original's hero columns are 536 / 604 of a 1140 container, not 50/50 */ .hero .wrap { padding-inline: 0; } .hero__inner { grid-template-columns: 47.0175% 52.9825%; gap: 0; } .hero__inner > * { padding: 10px; } .hero__title { font-size: var(--t-hero); font-weight: var(--w-bold); line-height: 1.2; text-transform: uppercase; } .hero__lead { font-size: var(--t-lead); font-weight: var(--w-semi); /* Live sets this leading solid - 26/26 on desktop, 20/20 on a tablet, 14/14 on a phone - at all three sizes. */ /* 20px, the gap live puts between two widgets in a column; --s-md resolved to 32 and dropped this paragraph 12px below live's. */ line-height: 1; margin-top: 20px; } /* 20px, Elementor's widget spacing, which is what live puts between the button and the phone number. --s-md resolved to 32. */ .hero__aside { display: flex; flex-direction: column; align-items: center; gap: 20px; } .hero__phone { /* 5px: live's icon list puts exactly that between the glyph and the number, where --s-2xs gave 9.8 and set the icon adrift. */ display: inline-flex; align-items: center; gap: 5px; color: var(--on-dark); text-decoration: none; /* Flat 20/34 at every width. Live never shrinks the phone number — it reads 20/400/34 on a 1440 desktop and on a 375 phone alike. Riding --t-nav dropped it to 12px on a phone, which made the one number a visitor might actually tap the smallest thing in the hero, in a 97x20 box. */ font-weight: var(--w-regular); font-size: 1.25rem; line-height: 1.7; } .hero__phone svg { color: var(--phone-icon); width: 1.125rem; height: 1.125rem; } .hero__phone:hover { color: var(--pink); } /* --- question cards --------------------------------------- The original is a full-bleed band: a black panel inset from the left edge, and a photo panel running to the right edge. At 1440 those measure 200 / 592 / 648 px, i.e. 14% / 41% / 45%. */ /* Live's own two columns, 54.97% and 45.03% of the viewport, with the left one's contents pushed in 200px (50 below 1025, 0 below 768). Our third track IS that 200px, so the panel gets 54.97% - 200. The expression this replaces, max(0px, 24.75vw - 156.4px), was fitted to one screen width: it gave live's 592 at 1440 and nothing else. */ .qband { display: grid; grid-template-columns: 200px calc(54.97% - 200px) 45.03%; } .qband__pad { background: transparent; } /* The tail card goes under the first three, in the same column, so the photo beside them only spans the first row - which is how live gets the photo to end at the top of "Do you want to unveil the artist in you?" instead of running the whole band. */ .qband__panel--tail { grid-column: 2; } /* Live's second section runs black to the right of that fourth card - its right column's wrap is filled black, the photo having stopped above. Without this the card ended in mid-air against the page. */ .qband__fill { grid-column: 3; background: var(--black); } .qband__panel { color: var(--on-dark); display: grid; align-content: center; } /* the four rows are stacked colour stripes: black, plum, pink, black */ .qcard--black { background: var(--black); } .qcard--plum { background: var(--plum); } .qcard--pink { background: var(--pink); } .qband__photo { background-image: image-set(url("../assets/img/concert.avif") type("image/avif"), url("../assets/img/concert.webp") type("image/webp")); background-color: var(--black); background-size: cover; background-position: 50% 50%; } @supports not (background-image: image-set(url("x.avif") type("image/avif"))) { .qband__photo { background-image: url("../assets/img/concert.jpg"); } } /* Elementor's image-box, which is what live uses here: a flex row where the figure's basis is 20% of the row and the text's is 100%, and both shrink to fit. That is what sizes the icon and the text column - at 1440 it resolves to 87 and 434.6, at 1512 to 93.5 and 467.6. Ours pinned the icon at a flat 87px and let the text take what was left, which matched live at 1440 and nowhere else. */ .qcard { display: flex; align-items: center; gap: 20px; padding: 25px; } .qcard img { width: 5.4375rem; height: auto; flex: 0 0 auto; } @media (min-width: 1025px) { /* on the img, not the picture: is display:contents in this stylesheet, so the img is the flex item that carries the basis. min-width:0 because a flex item's automatic minimum size is its content size - for an image that is its intrinsic width, which would stop it shrinking the way live's figure does. Desktop only: between 768 and 1024 this band is stacked here, not side by side as live has it, so a 20% basis has nothing to be 20% of and collapsed the icon to 25px. That range keeps the flat 87. */ .qcard img { width: 20%; min-width: 0; flex: 0 1 auto; } } .qcard p { width: 100%; font-size: var(--t-card); font-weight: var(--w-semi); color: var(--on-dark); line-height: 1.7; } /* Live steps these four from 22 to 16 at its tablet breakpoint and holds 16 from there down. Leading stays at 1.7 throughout. */ @media (max-width: 1024px) { .qcard p { font-size: 1rem; } } /* The "you can play guitar" follow-on is a full-bleed 50/50 band: copy inset 150px on the left, guitarist flush to the right edge. */ .darkband { display: grid; grid-template-columns: 1fr 1fr; align-items: center; } /* Live's exact inset. The right padding is 100, not --s-md (32), which is what made this column 538 wide against live's 470 and spread the copy and the tick rows across more of the band than live does. */ /* A flex column, like the Elementor widget-wrap it stands in for, so the paragraph's own 20px bottom margin and the 20px Elementor puts between two widgets ADD rather than collapse. In a block container they collapsed to one 20 and the band came out 20px shorter than live's. */ .darkband__copy { padding: 50px 100px 50px 150px; display: flex; flex-direction: column; } /* :not(:last-child) is Elementor's own rule - it spaces widgets apart but puts nothing under the last one, so the button carries no margin into the band's bottom padding. */ .darkband__copy > p:not(:last-child) { margin-bottom: 20px; } /* Live runs this band's copy a step above body - 20/400/34 on desktop, dropping to 18/400/31 at the tablet breakpoint. */ .darkband__copy p { font-size: 1.25rem; line-height: 1.7; } @media (max-width: 1024px) { .darkband__copy p { font-size: var(--t-ans); } } /* Centred, as live has it: its button widget fills the 506 copy column and carries text-align:center, which puts the 393.6 button at 206. Ours sat hard left. */ .darkband__copy p:has(.btn) { text-align: center; } /* Stretched, not top-aligned, because this column carries the band's right-hand edge: live paints it with a gradient that is black for its left 70% and WHITE for the right 30%, so below the photo the corner of the band is white, not black. Ours ran the section's black the whole way across. */ .darkband__art { display: flex; justify-content: flex-end; align-self: stretch; /* flex-start, not the default stretch: the COLUMN has to run the band's height to carry the gradient, but a stretched flex item pulled the photo 148px taller than its own aspect ratio. */ align-items: flex-start; background: linear-gradient(270deg, var(--white) 30%, var(--black) 30%); } .darkband__art img { width: min(39.8125rem, 44.24vw); height: auto; } @media (max-width: 767px) { /* The art size is no longer phone-specific: live gives this image width:100% at 1024 and below with no mobile override, and the min(100%, 24rem) that used to sit here only matched it at 375 by coincidence - at 600 it capped the photo at 384 in a 600px band. */ /* On the live site the photo follows "…no special talent" directly, before the copy. Source order is copy-then-art because that is right on desktop, so swap it here only. */ .darkband__art { order: -1; } } /* --- prose ------------------------------------------------- */ /* Live centres the whole box, not only its opening line, and sets a flat 10px inside the 2px rule: box 800, text column 776 at 1440. */ /* Live caps this box at 800 and pads its section 25px each side from 768 up, 20 below. Ours left the section on the page gutter, which at 820 is 15.5 and made the box 789 wide against live's 770. */ @media (max-width: 1024px) { .wrap:has(> .storybox) { padding-inline: 25px; } } @media (max-width: 767px) { .wrap:has(> .storybox) { padding-inline: 20px; } } .storybox { max-width: 50rem; margin-inline: auto; border: 2px solid var(--rule-strong); padding: 10px; text-align: center; color: var(--black); } /* The accent reads "yes" in live's source and is uppercased in CSS. */ .storybox .accent { text-transform: uppercase; } /* Live runs the story at 18/600 with 31 leading, and lifts the opening line and the "good news" line that closes it to 22/600 with 37. Two emphasis beats around a quieter middle; measured on pragueguitaracademy.com at every width, where it does not step. */ .storybox p { font-size: var(--t-ans); font-weight: var(--w-semi); line-height: 1.7; } /* of-type, not child: a heading or image added inside the box would make :first-child match nothing and drop the emphasis silently. */ .storybox p:first-of-type, .storybox p:last-of-type { font-size: var(--t-card); line-height: 1.7; } /* Live's closing line is a plain paragraph at the same 600 as the rest. The stays as markup emphasis, carrying no weight. */ .storybox p:last-of-type strong { font-weight: inherit; } /* On live the three middle sentences are ONE block separated by
, not three paragraphs, so they run on with no gap between them. Only the opening and closing lines are set off, by 20px each, and the closing line carries 20px below it inside the rule. .prose.storybox, not .storybox: .prose p + p sits later in this file at equal specificity and would otherwise win on order. */ .prose.storybox p + p { margin-top: 0; } .prose.storybox p:nth-of-type(2), .prose.storybox p:last-of-type { margin-top: 20px; } .storybox p:last-of-type { margin-bottom: 20px; } .prose p + p { margin-top: var(--s-md); } .prose strong { font-weight: var(--w-bold); } .prose .accent { color: var(--pink); font-weight: var(--w-bold); } .prose--center { text-align: center; } /* --- statement band --------------------------------------- */ /* Live gives this band 30px of padding, not --s-xl (79 at 1440), and 40px between the heading and the line under it. Ours stood 251 tall against live's 172 — the band read as a gap, not a statement. */ .statement { text-align: start; padding-block: 30px; } /* The 10px live's content wrap carries on every band. Without it this one sat 10px high inside its own 30px of padding, and the band came out 20 short of live's 172. */ .statement .wrap { padding-block: 10px; } .statement h2 { font-size: var(--t-h2); font-weight: var(--w-bold); text-transform: uppercase; line-height: 1.2; } .statement p { font-size: var(--t-sub); font-weight: var(--w-semi); /* 24/29 on live, not 24/40. The looser default made this band read as two separate lines rather than one sentence. */ line-height: 1.2; /* White, not the soft grey: live sets this line to #FFF, the same as the heading above it. The grey read as a caption. */ /* 20px, Elementor's widget spacing, which is all live puts between this line and the title above it. */ margin-top: 20px; color: var(--on-dark); } /* The guitarist rises exactly 85px into the plum band above it. The art column carries no top padding, so this is a plain negative margin. */ .lift-photo { margin-top: -5.3125rem; } @media (max-width: 767px) { .lift-photo { margin-top: 0; } } /* --- benefit list ----------------------------------------- */ /* Live's rhythm exactly: the list sits 20 under the paragraph and its rows are 16 apart (8 of padding plus 8 of margin on each li). Ours opened at 52 and 20, which stretched the column 81px past live's. */ .ticks { display: grid; gap: 16px; margin-top: 20px; } .ticks li { /* 30px, live's indent. An auto column plus a 20px gap left only 424 for the text against live's 440, so every row but the first wrapped a line early and the list ran 34px long. */ /* center, as live has it: its icon list rows are flex with align-items:center, so a bullet beside two lines of text sits between them. Ours pinned every bullet to the first line, which left it 14px high on the three two-line rows. */ display: grid; grid-template-columns: 30px 1fr; gap: 0; align-items: center; font-size: var(--t-body); line-height: 1.7; /* 18/30.6 on live, at every width */ } /* Live's icon list puts 5px between the icon and the text, inside the text's own box. Without it the text column was 5px wider than live's - enough to pull one more word onto the first line of the last tick. */ .ticks li > span { padding-inline-start: 5px; } /* 16px, the size live renders its far fa-circle at. 1.4em of 18px gave 25.2 and the bullets read as rings rather than dots. */ .ticks svg { width: 1rem; height: 1rem; color: var(--pink); } /* --- full-bleed photo ------------------------------------- */ .photoband img { width: 100%; height: clamp(12rem, 8rem + 22vw, 26rem); object-fit: cover; border-radius: var(--radius); } /* --- edge-bleeding black panels --------------------------- Section 9 runs 432→1440 (bleeds right), section 10 runs 0→1008 (bleeds left). Both are 70% of the viewport. */ .bleed { display: grid; } .bleed--right { grid-template-columns: 30% 70%; } .bleed--left { grid-template-columns: 70% 30%; } /* A flex column, like the Elementor widget-wrap it stands in for. As a block container the heading's 20px bottom margin collapsed into the Q&A's top margin instead of adding to it, which started the Q&A 20px higher than live's. */ .bleed__panel { display: flex; flex-direction: column; background: var(--black); color: var(--on-dark); padding: var(--s-lg) var(--s-lg) var(--s-lg) var(--s-xl); } /* 36/43 on live; the 1.25 heading default gave 45. Both headings — the h3 was left on the default and ran two lines 4px long. */ .bleed__panel h2, .bleed__panel h3 { line-height: 1.2; } .bleed--left .bleed__panel { padding-inline: var(--s-xl) var(--s-lg); } .bleed__side { background: transparent; } .bleed { position: relative; } /* The original hides the in-panel photos on desktop and shows a single large one that overlaps the panel's right edge (x=720, w=600 at 1440). */ .panel-photo { max-width: min(100%, 34rem); height: auto; border-radius: var(--radius); margin-top: var(--s-md); } /* Live anchors this one 50px down its own column, which puts it 100px below the section's top edge - measured the same at 1280 and 1512, so it is a fixed offset and not a share of the band's height. Left edge on the half-way line, width a flat 600. */ .overlap-photo { position: absolute; left: 50%; top: 100px; /* 600px flat on live at 1280 and 1512; 42vw shrank it to 538. */ width: 37.5rem; height: auto; z-index: 1; } /* Section 8's photo laps over the panel's left edge. It is anchored to the Q&A block (not the panel) so it always clears the heading above it. */ /* Live's photo sits 209px below the section's top edge and its left edge tracks the half-way line less 654px - both measured identical at 1280 and 1512. It is NOT tied to the Q&A column: the Q&A starts 227px down at 1512 and 222 at 1280, because its own inset is a percentage, while the photo stays put. Anchoring ours to the Q&A is what made the two drift apart at every width but the one they were fitted to. */ .lap-left { position: absolute; top: 209px; left: calc(50% - 654px); right: auto; /* 570px flat on live at 1280 and 1512; 39.6vw shrank it to 507. */ width: 35.625rem; height: auto; z-index: 2; border-radius: var(--radius); max-width: none; } @media (max-width: 1024px) { .lap-left { display: none; } } @media (max-width: 1024px) { .overlap-photo { display: none; } } @media (min-width: 1025px) { .panel-photo { display: none; } .wyg-title { display: none; } /* hidden on desktop in the original */ } /* No gap: live spaces these with a 20px margin under every paragraph, the last one included, and that trailing 20 is part of the black below the final line. A grid gap cannot produce it. */ .objections { display: grid; gap: 0; margin-top: var(--s-lg); } @media (min-width: 1025px) { /* Both bands are built the same way on live, and the numbers below are its own, not ones fitted to a screen size: section padding 50px 0 panel column 70% of the viewport, contents inset 30px 0 0 50px inner box padding 3% 10% 3% 20% (bleed--right) padding 0 32% 0 7% (bleed--left) inner column padding 10px The percentages are of the panel's own content width, so the whole chain follows the viewport the way live's does. What this replaces - 4.96%, 21.1%/11%, 31.45%/12.6%, a flat 59px - were values read off live at 1440 and nowhere else, so every other width drifted. */ .bleed { padding-block: 50px; } /* The heading is a widget in the panel itself, so it clears only the panel's 50px; Elementor's 20px widget spacing sits under it. */ .bleed--right .bleed__panel > h2, .bleed--right .bleed__panel > h3 { margin-bottom: 20px; } /* 3% 10% 3% 20% of the panel, plus the inner column's 10px. */ .objections { margin: calc(3% + 10px) calc(10% + 10px); margin-left: calc(20% + 10px); margin-right: calc(10% + 10px); } /* 0 32% 0 7% of the panel, plus the inner column's 10px; the 10px above the heading is that same inner column's top padding. */ .bleed--left .bleed__panel > h3, .bleed--left .bleed__panel > .benefits { margin-inline: calc(7% + 10px) calc(32% + 10px); } .bleed--left .bleed__panel > h3 { margin-top: 10px; margin-bottom: 50px; } .bleed--left .bleed__panel > .benefits { max-width: none; margin-bottom: 10px; } } /* The panel's own inset is 30px 0 0 50px from 768 up on live - only the column width and the inner box change at its tablet breakpoint. Ours kept --s-lg/--s-xl here, which left the heading 812 wide against live's 871.6 at 1024. */ @media (min-width: 768px) { .bleed--right .bleed__panel, .bleed--left .bleed__panel { padding: 30px 0 0 50px; } } /* --- the 768–1024 band ------------------------------------ The phone rules stop at 767 and the desktop rules start at 1025, so this band was left on base rules written for desktop. An iPad Pro in portrait is 1024 CSS and lands in it. The first cut at this stacked the section the way the phone layout does. That removed the 307px-wide column of text but did not look like the live page, which Miguel compared it against on an iPad Pro. Measured on pragueguitaracademy.com at 1024: the black panel starts at 102 (10%) and bleeds off the right edge, the photo hangs outside it at left 27 and is 518 wide, and the Q&A runs 832 wide inside the panel. Matched to that here. .bleed--left is deliberately absent. Its columns are 70%/30% and its panel is the first child, so the copy already gets the wide track and it reads correctly as it is. */ @media (min-width: 768px) and (max-width: 1024px) { /* 10%, not the desktop 30%: the live panel's inset at this width. .bleed__side holds the first track open and the panel takes the rest, bleeding off the right edge as it does on every other width. */ .bleed--right { grid-template-columns: 10% 1fr; } /* Hiding the grid sibling leaves two children for two tracks, so the panel lands in the second one instead of wrapping to row 2 in the narrow one. The panel's own copy of the photo takes over below. */ .bleed--right > picture { display: none; } .bleed--right .bleed__panel > picture { display: block; } .bleed--right .in-panel-photo { display: block; /* Live puts this photo's left edge at 10% of the viewport less 75px: 1.8 at 768, 7 at 820, 8.4 at 834, 27.4 at 1024, all measured on live. The panel starts at that same 10% and is padded a flat 50px, so -125px off the padding box lands on live's edge at every width in the band, not just at the ends. Flat px, both of them, because live's are: Elementor emits a fixed 518px photo against a fixed 50px padding, so a rem here would drift away from live as soon as the root font moved. */ width: 518px; max-width: none; height: auto; margin-left: -125px; margin-block: var(--s-sm); border-radius: var(--radius); } /* The live Q&A runs the panel's full inner width here, not a prose measure. It is only this wide because the panel is inset on one side and padded on the other. */ .bleed--right .objections { max-width: none; } /* Live's inner box at this width is padded 10px 20px 0 0, not the 3% 10% 3% 20% it carries on desktop, and its column adds the usual 10px. */ .bleed--right .objections { margin: 20px 30px 10px 10px; } /* .bleed--left was left on the desktop columns here, which gave its copy 656 against live's 625.3. Live runs the same 90% panel as the band above it and drops the inner box's percentage inset to 0, so the only thing left inside is the column's 10px. */ .bleed--left { grid-template-columns: 90% 10%; } .bleed--left .bleed__panel > h3, .bleed--left .bleed__panel > .benefits { margin-inline: 10px; max-width: none; } } /* The other bleed band, "what you get", at the same widths. It was left alone when .bleed--right was matched to the live page, because its copy already had the wide track and so it read correctly. Reading correctly is not the same as looking like the live page, which is what Miguel was comparing against. Measured on pragueguitaracademy.com, both ends of the band: width panel heading photo benefit text 768 0 .. 691 60, centred 197 .. 751 215 .. 656 1024 0 .. 922 60, centred 197 .. 751 261 .. 886 So it is the mirror of .bleed--right: the panel bleeds off the left edge and stops 10% short of the right, not 30%. The photo is a fixed 554 at a fixed offset, exactly as the other band's is fixed at 518. The heading is centred, and the live page does not show the "what you get" title at these widths at all. */ @media (min-width: 768px) and (max-width: 1024px) { .bleed--left { grid-template-columns: 90% 10%; } /* Hidden on the live page here, as it already is above 1024. Only the phone layout shows it. */ .bleed--left .wyg-title { display: none; } /* Centred on the live page at these widths, left-aligned above and below them. */ .bleed--left .bleed__panel > h3 { text-align: center; } /* The grid-sibling photo is already hidden at these widths by the .overlap-photo rule above, but its still takes a grid cell. Dropping it leaves two children for two tracks. */ .bleed--left > picture { display: none; } /* 554 wide at a flat 197 from the viewport's left edge, at both ends of the band - fixed, like the other band's photo. The panel's own left padding is not flat, so it is subtracted rather than assumed. Both terms are in rem so a larger root font moves the photo and its offset together. */ .bleed--left .panel-photo { width: 34.625rem; max-width: none; margin-left: calc(12.3125rem - var(--s-xl)); } /* 35.25rem is the desktop original's measure, taken inside a 70% panel. The panel is 90% here and the live benefits widen with it, running to within about 35px of its right edge. */ .bleed--left .benefits { max-width: none; } } .objection h3 { font-size: var(--t-card); font-weight: var(--w-semi); /* 22/37.4 on live, which is 1.7 exactly. 1.68 gave 36.96. */ line-height: 1.7; margin-bottom: 20px; color: var(--on-dark); } .objection p { /* 20px under every paragraph, as live. */ margin-top: 0; margin-bottom: 20px; color: var(--on-dark); font-size: var(--t-ans); font-weight: var(--w-semi); line-height: 1.7; /* 18/30.6 on live, which is 1.7 exactly */ } .objection p b { font-weight: var(--w-semi); color: var(--pink); } /* --- benefits (what you get) ------------------------------ */ /* Flush, not gapped: live butts the three blocks together and lets each one's 25px padding do the separating. A 52px gap on top of that is what made this column 143px taller than live's. */ .benefits { display: grid; gap: 0; margin-top: 0; max-width: 35.25rem; } /* 564px, as the original */ /* Phone and tablet only. Written as a bare rule it sat later in this file than the desktop block that sets it to 0, and at equal specificity the later rule wins - so the heading kept a 48px margin on desktop and dropped 47px below live, which left the photo beside it topping out above the heading instead of just under it. */ @media (max-width: 1024px) { .bleed--left .bleed__panel > h3 { margin-top: var(--s-lg); } } .benefit { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; /* icon centred on the copy */ padding: 25px; } .benefit img { height: auto; } @media (min-width: 768px) { /* The same Elementor image-box as the question cards, with the figure asking for 25% here instead of 20%: at 1440 that gives live's 99px icon and 395 text column, at 1512 its 105 and 420.1. Ours sized the icon off the viewport and gave the text whatever was left. Declared here rather than with the rest of the band, because the base .benefit grid above sits later in the file than that block and would win on order - which collapsed the icon to nothing. */ .benefit { display: flex; align-items: center; gap: 20px; } .benefit img { width: 25%; min-width: 0; } .benefit > div { width: 100%; } } /* Phone only. From 768 up the icon is the image-box's 25% flex basis, set in the two blocks above; this rule sat later in the file than the tablet one and quietly won, pinning the icon at 86px there. */ @media (max-width: 767px) { .benefit img { width: clamp(4rem, 3.375rem + 3.125vw, 6.1875rem); } } .benefit h3 { font-size: var(--t-card); font-weight: var(--w-bold); color: var(--pink); line-height: 1.7; } /* No gap: live's title sits directly on its copy, 37 then 34s. */ .benefit p { margin-top: 0; color: var(--on-dark); font-size: var(--t-benefit); font-weight: var(--w-semi); line-height: 1.7; } /* --- FAQ --------------------------------------------------- */ /* 36/600/43 on live, not 36/700/45. Semibold, not bold. */ /* Left, not centred, and at every width — live never centres this heading or the questions under it. */ /* Pink, not ink: live colours this heading #F61067, the same pink as "Follow us on socials:" at the foot of the page. */ .faq__title { text-align: start; font-size: var(--t-h2); font-weight: var(--w-semi); line-height: 1.2; color: var(--pink); } .faq__item { padding-block: var(--s-lg); } /* Elementor's own tablet and phone values for these bands, read off the live page: the section is padded 30px all round at 1024 and below and 20px at 767 and below, and its column wrap carries the usual 10px. At 1024 that puts the question at x40, where ours sat at x14 with only a gutter between the text and the screen edge. */ @media (max-width: 1024px) { .faq__item { padding: 30px; } /* The 10px goes on each column, not on the grid: live splits the container first and pads inside each column, so the answer lands at 654.8 rather than 660.8. */ .faq__grid { padding-inline: 0; } .faq__grid > * { padding: 10px; } /* Live sets this photo to width:100% and drops its -85px rise at the same breakpoint, so below 1025 it is a full-bleed band rather than a 453px picture floating in the middle of one. */ .darkband__art img { width: 100%; margin-top: 0; } /* The heading above the bands takes the page gutter, which is fluid and lands at x14-16, while the questions below it sit at 30 + 10 = x40. Live has the same step and it reads as a mistake, so it is corrected here rather than reproduced: the heading's wrap takes the same inset the columns under it have. The same rule runs at 1025 and up with the 10px the columns carry there. */ .section--tight:has(.faq__title) > .wrap { padding-inline: 40px; } } @media (max-width: 767px) { .faq__item { padding: 20px; } .section--tight:has(.faq__title) > .wrap { padding-inline: 30px; } } .faq__grid { display: grid; gap: var(--s-md) var(--s-lg); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); align-items: center; } .faq__q { font-size: var(--t-h3); font-weight: var(--w-semi); line-height: 1.2; } .faq__a { font-size: var(--t-body); line-height: 1.5; } /* 18/27 on live */ .faq__a a { color: var(--white); font-weight: var(--w-bold); text-decoration: underline; } .section--pink .faq__a a { color: var(--black); } .faq__media { display: flex; justify-content: center; align-items: center; gap: var(--s-md); } .faq__media img { border-radius: var(--radius); } .faq__media--icons img { width: clamp(3.5rem, 3.071rem + 2.143vw, 5rem); height: auto; } .faq__media--icons img.is-lg { width: clamp(3.75rem, 3.214rem + 2.679vw, 5.625rem); } .faq__media--map img { width: clamp(4.5rem, 3.768rem + 3.66vw, 7.0625rem); height: auto; } /* Live's own phone sizes for these three, taken from its 767 rules and written as the proportions those rules produce, so they hold at every phone width rather than at one. The column is the viewport less the section's 20px and the media's own 10px on each side. - map: 50% of its link box, which is itself capped at the image's natural 290 - so 50% of the column until the column passes 290, and a flat 145 above that. Measured 145 on live at both 360 and 390. - phone and e-mail: each sits in a half column inset 10px a side, at 75% of it. That is 0.75 * ((col - 40) / 2) = 37.5% of the column less 15, until the half column passes the image's natural 180 and the 75% flattens to 135. Measured 97.5 at 360, 108.8 at 390 and 135 from 584 up. - fist bump: a flat 34% of the column, NOT capped - live upscales it past its natural 168. Measured 102 at 360, 112.2 at 390, 232.6 at 744. After the three base rules above, not before: same specificity, so the later one wins. Bounded at 767 - the tablet and desktop sizes are the ones already signed off. */ @media (max-width: 767px) { .faq__media--map img { width: min(50%, 145px); } .faq__media--icons img { width: min(calc(37.5% - 15px), 135px); } .faq__media--icons img.is-lg { width: 34%; } } /* The FAQ rows at the same widths. .faq__grid is an auto-fit grid of three children - question, answer, icons - so the track count follows the viewport. Three tracks need about 850px, which 1024 clears and 768 does not, so at 768 the icons were pushed onto a row of their own under the question and the band grew a half screen of empty space. That is the orphaned-card fault again, in a different grid. The live page does not use three tracks at either width. It stacks the question over the answer in one column and puts the icons beside them in a second, from 768 right up to 1024 - measured: answer 40..516 at 768, 40..695 at 1024, icons to the right of it at both. Three tracks only appear above 1024, which is where ours already matches. Declared after the base .faq__grid above, not before it: at the same specificity the later rule wins, and from before this block was moved the base auto-fit was still in force - the layout only held because of the explicit placement below it. Bounded at 584, not 768: every width with two tracks orphans the icons, and the grid goes from one track to two at exactly 584 - measured, one at 583 and two at 584. Below that it is a single column already, which is what the live page does there too, so there is nothing to place. */ @media (min-width: 584px) and (max-width: 1024px) { /* 2fr 1fr, which is live's split: its answer runs 476 of 736 at 768 and 655 of 997 at 1024, both almost exactly two thirds. `auto` would content-size the icon track and push it to the far edge instead. */ .faq__grid { grid-template-columns: 2fr 1fr; } .faq__q { grid-column: 1; grid-row: 1; align-self: end; } /* center, not start: in the map band the icon is taller than the two lines beside it, so it sets the row height. Held at start, the text stayed at the top and the icon still centred 20px below it. Centring both puts their middles on the same line whichever is taller. The other two bands have the taller text, so nothing moves there. */ .faq__a { grid-column: 1; grid-row: 2; align-self: center; } /* Row 2 only, so the icons centre against the paragraph rather than against question-plus-paragraph. Live spans both rows and lands the icons 41-57px above the paragraph's middle - same offsets we had, measured on both at 870. Corrected rather than reproduced, on the same call as the FAQ heading above. */ .faq__media { grid-column: 2; grid-row: 2; } } /* 70/30, live's own split at this width - 2fr 1fr left the answer 601 wide against live's 654.8. Below 768 live stacks instead, and the 2fr 1fr above stays, since it is what keeps the icons off a row of their own there. */ @media (min-width: 768px) and (max-width: 1024px) { /* gap:0 as well - live separates these two columns with the 10px inside each, and the base 42px gap on top of 70+30 pushed the icon column 12px off the screen edge. */ .faq__grid { grid-template-columns: 70% 30%; gap: 0; } } @media (min-width: 1025px) { /* Live's FAQ is three 380px columns of the 1140 container - question, answer, icons - butted together with 10px inside each, so every column of text is 360 wide at 1280 and at 1440 alike. Ours was an auto-fit grid with a 48px gap, which left 342 and broke every question and every answer a word early. */ /* padding-inline: 0 because .faq__grid is also the .wrap - its gutter took 20px off the container and left 373 tracks. */ .faq__grid { grid-template-columns: repeat(3, 1fr); gap: 0; padding-inline: 0; } .faq__grid > * { padding: 10px; } /* Same step as below 1025, smaller: the gutter is fluid and only reaches 10px once the container is capped, so between 1025 and 1360 the heading sat 2-4px left of its columns. 10px is the columns' own inset, so this is exact at every width. */ .section--tight:has(.faq__title) > .wrap { padding-inline: 10px; } } /* --- testimonials ----------------------------------------- */ .reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); /* Full bleed, as on live. The 1402px cap left 19px of white down each side at 1440 where live runs the band edge to edge. */ /* 50px of white above and below, which is what live sets on this section at 1440 and at 1024 alike. Without it the black FAQ answer above and this band's black panel share an edge and read as one block — the missing white stripe. */ margin-block: 50px; /* the original paints black behind the left 44% of this band */ background: linear-gradient(270deg, var(--white) 56%, var(--black) 56%); } @media (min-width: 768px) { /* Live's split is 43.954% / 56.046% of a container capped at 1402 and centred - NOT of the viewport. Below 1402 the container is the full width and the two behave as plain percentages; above it they stop growing and the slack becomes white down each side. So the panel's track is that slack plus 43.954% of the container, which min() expresses: 43.954% of 1402 is 616.24px, and below 1402 the percentage is the smaller of the two. 44%/56% of the viewport, which this replaces, was right only at the one width it was read at. */ .reviews { grid-template-columns: calc(max(0px, (100% - 1402px) / 2) + min(43.954%, 616.24px)) minmax(0, 1fr); } } .reviews__panel { background: var(--black); color: var(--on-dark); padding: var(--s-xl) var(--s-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-md); text-align: center; } .reviews__panel h2 { font-size: var(--t-h3); font-weight: var(--w-semi); } .reviews__badge { display: inline-flex; align-items: center; gap: var(--s-sm); background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .16); border-radius: 10px; padding: var(--s-sm) var(--s-md); text-decoration: none; transition: background var(--fast) var(--ease); } .reviews__badge:hover { background: rgb(255 255 255 / .13); } .reviews__score { font-size: 2.125rem; font-weight: var(--w-black); line-height: 1; } .reviews__meta { display: flex; flex-direction: column; gap: 3px; text-align: left; } .reviews__stars { color: var(--star); letter-spacing: 2px; line-height: 1; } .reviews__count { color: var(--on-dark-soft); font-size: var(--t-small); } .reviews__all { color: var(--pink); font-weight: var(--w-bold); text-decoration: none; border-bottom: 2px solid transparent; transition: border-color var(--fast) var(--ease); } .reviews__all:hover { border-bottom-color: var(--pink); } .reviews__stage { background: var(--white); padding: var(--s-lg) var(--s-md); display: flex; flex-direction: column; gap: var(--s-md); justify-content: center; } .reviews__quote { width: 4rem; color: var(--pink); opacity: .3; margin-inline: auto; } .reviews__track { display: flex; gap: var(--s-md); /* start, not stretch: a stretched card pushes its footer down with margin-top:auto, leaving a large gap on shorter reviews. The track itself is still as tall as the tallest slide, which is the point — the section keeps one height whichever review is showing, and nothing below it moves. PGA-72. */ align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .reviews__track::-webkit-scrollbar { display: none; } .review { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; display: flex; flex-direction: column; gap: var(--s-sm); } .review__stars { color: var(--star); font-size: 1.2rem; letter-spacing: 3px; line-height: 1; } /* 16/26.4 on live, not the 18/29.7 the body default gave. Two points of size is a word a line, which is why every testimonial wrapped in a different place from live even once the card was 726 wide. */ .review__text { color: var(--ink); font-size: 1rem; line-height: 1.65; } .review__foot { display: flex; align-items: center; gap: var(--s-sm); margin-top: auto; flex-wrap: wrap; } .review__avatar { width: 2.6rem; height: 2.6rem; flex: 0 0 2.6rem; border-radius: 50%; background: var(--pink); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: var(--w-black); } .review__who { display: flex; flex-direction: column; line-height: 1.35; } .review__who b { font-weight: var(--w-bold); } .review__who span { font-size: var(--t-small); color: var(--ink-soft); } .review__src { margin-left: auto; font-size: var(--t-micro); font-weight: var(--w-bold); color: var(--ink-soft); text-decoration: none; white-space: nowrap; border-bottom: 1px solid transparent; } .review__src:hover { color: var(--pink); border-bottom-color: var(--pink); } .reviews__nav { display: flex; align-items: center; gap: var(--s-sm); } .reviews__arrow { width: 2rem; height: 2rem; flex: 0 0 2rem; border-radius: 50%; border: 1px solid var(--rule); background: var(--white); color: var(--ink); font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease); } .reviews__arrow:hover { background: var(--pink); border-color: var(--pink); color: var(--white); } .reviews__dots { display: flex; gap: var(--s-3xs); flex-wrap: wrap; } .reviews__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--black); opacity: .2; cursor: pointer; transition: opacity var(--fast) var(--ease), background var(--fast) var(--ease); } .reviews__dots button[aria-current="true"] { opacity: 1; background: var(--pink); } @media (min-width: 768px) { /* Live insets the panel's contents 10/90 and the carousel's 30/30 inside their columns. Declared here, after the two `padding` shorthands above: at equal specificity the shorthand would otherwise win on order and silently keep --s-md. Each also has to absorb the white the 1402 cap leaves at the band's edge, because our tracks run to the viewport edge while live's stop at the container. That slack is read off the track itself - a percentage padding on a grid item resolves against its own track - so no part of this counts the vertical scrollbar, as 100vw would: panel track = slack + 616.24 -> slack = 100% - 616.24 stage track = viewport - panel track = slack + 785.76 */ .reviews__panel { padding-inline: calc(10px + max(0px, 100% - 616.24px)) 90px; } .reviews__stage { padding-inline: 30px calc(30px + max(0px, 100% - 785.76px)); } } /* Live drops that 10/90 to a single 20px on the left at its tablet breakpoint, which is why its heading runs 430 wide at 1024 where ours ran 350. */ @media (min-width: 768px) and (max-width: 1024px) { .reviews__panel { padding: 0 0 0 20px; } } /* --- closing CTA ------------------------------------------ */ /* Live's band carries no padding of its own - the plum panel IS the section - and 50px of margin above and below, which collapses with the testimonials' own 50 to a single 50px gap. --s-xl put 81.4 of padding inside the band on top of that gap, so the white between the two panels ran to 131 against live's 50. */ .cta { text-align: center; padding-block: 0; margin-block: 50px; } .cta__panel { background: var(--plum); color: var(--on-dark); /* 50px top and bottom and a flat 150 each side, live's inset at every width from 768 up - the clamp this replaces fell to 107 at 1024 and left the heading 811 wide against live's 724. */ padding: 50px 150px; max-width: var(--page); margin-inline: auto; } /* Not --t-hero. This heading and the hero title share a desktop size and a tablet size, but part company on a phone: live drops the hero title to 15 at 767 and holds this one at 26 all the way down. One token cannot do both, so this one steps once. */ .cta h2 { font-size: 1.875rem; font-weight: var(--w-semi); text-transform: uppercase; line-height: 1.2; } @media (max-width: 1024px) { .cta h2 { font-size: 1.625rem; } } /* 20px, live's value below its mobile breakpoint; 150 would leave nothing of a phone screen. */ @media (max-width: 767px) { .cta__panel { padding: 20px; } } /* 20px, Elementor's widget spacing, as under every other heading on live; --s-lg gave 48.7. */ .cta .btn { margin-top: 20px; } /* --- socials ---------------------------------------------- */ /* 20px of white before the black footer, as on live. Without it the white socials block and the footer meet on a hard edge. */ .socials { text-align: center; margin-bottom: 20px; } /* 34/600/41 on live at every width, not 26/700/33. This is the largest single type error on the page - eight points short and a weight too heavy, on the footer's only heading. */ .socials h2 { font-size: 2.125rem; font-weight: var(--w-semi); line-height: 1.2; color: var(--pink); } .socials__row { display: flex; justify-content: center; flex-wrap: wrap; /* 20px under the heading, Elementor's widget spacing; --s-md gave 32 and made this band 12px taller than live's. */ gap: 5px; margin-top: 20px; } .socials__row a { color: var(--pink); display: block; } .socials__row svg { width: clamp(4.5rem, 3.36rem + 5.7vw, 7.375rem); height: auto; } /* the original uses Elementor's wobble-vertical */ .socials__row a:hover, .socials__row a:focus { animation: pga-wobble 1s ease-in-out 1; } @keyframes pga-wobble { 16.65% { transform: translateY(8px); } 33.30% { transform: translateY(-6px); } 49.95% { transform: translateY(4px); } 66.60% { transform: translateY(-2px); } 83.25% { transform: translateY(1px); } 100% { transform: translateY(0); } } /* --- footer ----------------------------------------------- */ .footer { background-color: var(--black); color: var(--on-dark); background-image: image-set(url("../assets/img/footer-bg.avif") type("image/avif"), url("../assets/img/footer-bg.webp") type("image/webp")); background-size: cover; background-position: 50% 50%; padding-block: var(--s-xl); } @supports not (background-image: image-set(url("x.avif") type("image/avif"))) { .footer { background-image: url("../assets/img/footer-bg.png"); } } /* Live's own three states, measured on pragueguitaracademy.com: 768 and up three equal columns, no gap - 249 each at 768, 373 at 1512, each with 10px inside it below 768 two columns and the third across the whole row - 362/362/724 at 744, which is the iPad Mini in portrait where the lone third item read as left-aligned An auto-fit grid cannot do the second of those: it left the third item in the left-hand track with the right one empty. That holds down to the narrowest phone. The footer template (post-510.css) sets its columns 50% / 50% / 100% at 767 with no narrower step, and the theme's .wpbf-page { word-wrap: break-word } breaks the email address inside its half. */ .footer__grid { /* Row gap kept, column gap zero: live's three columns are flush, but where the footer wraps the rows still need the space they had - without it the Location block butts against the row above at 744 and all three touch on a phone. */ display: flex; flex-wrap: wrap; gap: var(--s-lg) 0; text-align: center; } /* min-width:0 so the email address - 256px, and unbreakable - cannot push its own column past a third and force the row to wrap. It centres and overhangs a few px into its 10px of padding instead, which is what live does with it at these widths. */ .footer__grid > * { flex: 1 1 33.333%; min-width: 0; padding-inline: 10px; } @media (max-width: 767px) { .footer__grid > * { flex-basis: 50%; } .footer__grid > :last-child { flex-basis: 100%; } } .footer__item img { width: clamp(3rem, 2.52rem + 2.41vw, 4.6875rem); height: auto; margin-inline: auto; } /* Live sets the whole footer column — label and value alike — at 16/600/16 in white. Ours had the label pink, uppercase and tracked and the value 14/400, which made one block read as two. */ .footer__item h2 { font-size: 1rem; font-weight: var(--w-semi); line-height: 1; color: var(--on-dark); margin-top: var(--s-xs); } .footer__item p, .footer__item a { margin-top: var(--s-3xs); color: var(--on-dark); text-decoration: none; font-size: 1rem; font-weight: var(--w-semi); line-height: 1; } .footer__item a:hover { color: var(--pink); } /* The theme's word-wrap: break-word, which lets the email address break inside its half-width column on a phone, as it does on live. */ .footer__item p { overflow-wrap: break-word; } /* --- tuition page head ------------------------------------ */ /* The nav already labels this page "Prices" and highlights it, so a visible

Prices

would say it twice. The heading carries the one fact the nav cannot instead; the keeps "Prices" for the tab and for search. Left-aligned to match the homepage, which left-aligns its headings deliberately. */ /* Styled as body copy, not a headline: the original line is 16px/400 in grey, and it reads as a quiet note above the cards. It stays an <h1> for structure and search, but a heading here would shout in a way the original never does. */ .tuition__title { margin-bottom: var(--s-lg); font-size: var(--t-body); font-weight: var(--w-regular); line-height: var(--lh-body); color: var(--ink-soft); } /* The brochure link inside it. Global `a { color: inherit }` would make it grey and invisible against grey; the original is pink, bold, underlined. */ .tuition__title a { color: var(--pink); font-weight: var(--w-bold); text-decoration: underline; } /* --- routing note (above the cards) ------------------------ The one fact that changes which card you click, so it sits before them. Tinted rather than plain text because a grey line above a grid of colour is invisible. */ .tguide { display: flex; gap: var(--s-xs); align-items: flex-start; margin-bottom: var(--s-md); padding: var(--s-sm); background: var(--pink-tint); border-left: 4px solid var(--pink); border-radius: 0 var(--radius) var(--radius) 0; font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink); } .tguide svg { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin-top: .2rem; color: var(--pink); } .tguide b { font-weight: var(--w-bold); } .tguide a { color: var(--pink-dark); } /* --- tuition notes (below the cards) ----------------------- Three columns on the same rhythm as the card grid, so the block lines up with the cards above instead of introducing a second geometry. The rule marks where products end and supporting information begins. */ .tnotes { display: grid; /* same gap as .tiers, so the three notes land exactly under the three cards rather than nearly under them. */ gap: var(--s-sm); grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); margin-top: var(--s-lg); padding-top: var(--s-lg); border-top: 1px solid var(--rule); } .tnote { margin: 0; } .tnote svg { display: block; width: 1.5rem; height: 1.5rem; margin-bottom: var(--s-2xs); color: var(--pink); } .tnote h2 { margin: 0 0 var(--s-3xs); font-size: var(--t-body); font-weight: var(--w-bold); color: var(--ink); } .tnote p { margin: 0; font-size: var(--t-ans); line-height: var(--lh-body); color: var(--ink-soft); } .tnote a { color: var(--pink); } .tnote a:hover { color: var(--pink-dark); } /* The band where two of the three notes fit and the third is alone on its row - an iPhone SE in landscape is in it. A grid pins that third one to the left of a half-empty row; this gives it the whole row and one column's width inside it, so it sits under the gap between the two above. Bounded to that band because it is the only one with a short row: auto-fit goes to two columns at 502 and to three at 740, both measured, and outside 502-739 every row is full. The bounds are where `minmax(min(14rem, 100%), 1fr)` flips, so they move if that 14rem or the gap token changes. */ @media (min-width: 502px) and (max-width: 739px) { .tnote:last-child { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--s-sm)) / 2); /* Centred text, and the icon with it, so the note reads as one centred thing rather than a left-aligned column that happens to sit in the middle. Only here - the two above it, and all three at every other width, stay ranged left. */ text-align: center; } .tnote:last-child svg { margin-inline: auto; } } /* --- price cards (tuition) -------------------------------- One custom property, --tier, drives each card's border, bars and button. --tier-grad is optional and only the Semester card sets it. */ .tiers { /* Flex, not grid, for one reason: an uneven last row. Six cards in four columns leaves two on row two, and a grid pins them to the left with half the row empty. justify-content: center on a flex wrap centres the short row and leaves full rows untouched, since a full row has no slack to distribute. */ display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-sm); list-style: none; } /* Every basis below divides its row exactly, so a full row has no slack and the first card stays flush with the heading above it. Centring then only ever moves a genuinely short last row, which is the whole point of it. 16.5rem is the fallback and the card's own width; the media queries take over at 640 and 1024. */ .tiers > li { flex: 0 1 16.5rem; /* The <li> is itself a flex container so the card can stretch to the row's height and cards in a row end level, whatever the bullet text does. */ display: flex; } .tiers > li > .tier { flex: 1 1 auto; } @media (min-width: 640px) { .tiers > li { flex-basis: calc((100% - var(--s-sm)) / 2); } } /* Four across from 1024 up, two below it. This is one of the few places the rebuild deliberately does NOT copy the live page. Measured on pragueguitaracademy.com/tuition/: live runs four to a row at every width, which at 820 (iPad Air portrait) makes each card 180px wide and at 768 makes it 182px. Four across simply does not fit a tablet in portrait; live gets away with it because its cards are flat pictures, which stay legible when scaled down in a way that real text does not. A basis that divides the row rather than a 16.5rem cap: the cards fill the row instead of leaving a ragged edge. Every basis divides its row exactly, so a full row has no slack and the first card stays flush with the heading; centring then only ever moves a genuinely short last row. The 1024 threshold is where four cards stop being readable. At 1024 four fit at 235px, close to live's 231px there. At 820 two fit at 385px. Below 640 the cards become full-width rows. */ @media (min-width: 1024px) { /* Four to a row, filling the width exactly, so a full row has no slack and centring is invisible on it. */ .tiers > li { flex-basis: calc((100% - 3 * var(--s-sm)) / 4); } /* /booking/ has five cards, and four to a row leaves one on its own. Three to a row splits them 3 + 2, which reads as two rows rather than a row and a leftover. The basis still divides its row exactly, so the full first row has no slack and stays flush with the heading; the short second row is the one centring moves. */ .tiers--pkg > li { flex-basis: calc((100% - 2 * var(--s-sm)) / 3); } } .tier { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--tier); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink); transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease); } /* hover:hover, so a tap does not leave a card raised and its button filled. iPadOS applies :hover on tap and keeps it until something else is tapped, which is why one card's Book Now read as filled while its neighbours did not. */ @media (hover: hover) { .tier:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } } .tier:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; } .tier--ink { --tier: var(--card-ink); } .tier--pink { --tier: var(--pink); } .tier--purple { --tier: var(--card-purple); } .tier--soft { --tier: var(--card-pink-soft); } .tier--semester { --tier: var(--card-pink-hot); --tier-grad: linear-gradient(90deg, var(--card-plum-deep), var(--card-pink-hot)); } .tier__name { margin: var(--s-sm) var(--s-sm) 0; padding: .55rem 1rem; border-radius: var(--radius); background: var(--tier-grad, var(--tier)); color: var(--white); font-weight: var(--w-bold); font-size: var(--t-body); text-align: center; } .tier__price { margin-top: var(--s-sm); padding: var(--s-xs) var(--s-sm); background: var(--tier-grad, var(--tier)); color: var(--white); font-weight: var(--w-black); font-size: var(--t-h2); line-height: 1.1; text-align: center; font-variant-numeric: tabular-nums; } /* The live cards are flat PNGs, 450x600, scaled to 260 wide - so there is no CSS to copy, only proportions to measure. At that scale their body text reads at about 13px against our 18px, which is what made our card 429px tall where the live one is 367 at the same width. 14px with a tighter leading lands on the live proportions without going below a comfortable size for a real text node, which the live PNG never had to be. */ .tier__list { flex: 1 1 auto; margin: 0; padding: var(--s-sm) var(--s-sm) 0 calc(var(--s-sm) + 1.1em); font-size: var(--t-small); line-height: 1.5; /* list-style-type inherits, so `list-style: none` on .tiers was reaching these nested items and hiding the markers. The live card has bullets, and the padding above was already reserving room for them. */ list-style: disc; } .tier__list li + li { margin-top: var(--s-2xs); } .tier__meta { display: none; } .tier__chev { display: none; } .tier__cta { margin: var(--s-sm); padding: .7rem 1rem; border: 2px solid var(--tier); border-radius: var(--radius-pill); color: var(--tier); font-weight: var(--w-bold); font-size: var(--t-body); text-align: center; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); } @media (hover: hover) { .tier:hover .tier__cta { background: var(--tier); color: var(--white); } } /* --- 404 --------------------------------------------------- The pink number does the work: it says "wrong page" before anyone reads a word, and it is the one place on the site where the brand colour can be used at that size without competing with a call to action. */ .nf { text-align: center; } .nf__code { margin: 0; font-size: clamp(5rem, 2.6rem + 12vw, 11rem); font-weight: var(--w-black); line-height: .9; letter-spacing: -.03em; color: var(--pink); } .nf__title { margin-top: var(--s-sm); font-size: var(--t-h2); font-weight: var(--w-black); } .nf__lead { max-width: 44ch; margin: var(--s-sm) auto 0; font-size: var(--t-lead); color: var(--ink-soft); } .nf__actions { display: flex; flex-wrap: wrap; gap: var(--s-md); align-items: center; justify-content: center; margin-top: var(--s-lg); } /* --- booking page ------------------------------------------ The live page runs the 1140 container with four package columns across it, so this page uses .wrap and not the narrower tuition column. Four 16.5rem cards plus three gaps come to about 1113px, which is why they fit on one row and why they were wrapping 3 + 1 inside the 52rem column. */ .bk__title { margin-bottom: var(--s-md); font-size: var(--t-h2); font-weight: var(--w-black); } /* A bare h2 inherits the body size, which left Calendar, Regular Schedule and Packages all at 16px and the page with no hierarchy at all. The live page sets them at 26px. */ .bk h2 { margin-bottom: var(--s-sm); font-size: var(--t-h3); font-weight: var(--w-bold); } .bk__block { margin-top: var(--s-lg); } .bk__block p { max-width: var(--prose); } .bk__block p + p { margin-top: var(--s-xs); } .bk__block h2 + p { margin-bottom: var(--s-md); } .bk__link { color: var(--pink); font-weight: var(--w-bold); text-decoration: underline; } .bk__link:hover { color: var(--pink-dark); } /* --- package cards (booking) ------------------------------- The same .tier card as /tuition/. The reschedule allowance belongs to the card but sits under it, as the live page has it, so the <li> stacks instead of being the single flex row that .tiers otherwise assumes. */ .tiers--pkg > li { flex-direction: column; } .pkg__note { margin: var(--s-2xs) 0 0; font-size: var(--t-small); line-height: var(--lh-body); /* Two lines' worth, whether the note fills them or not. The card above stretches to whatever the note leaves of the row's height, so a one-line note - "up to 1 session" against the others' "up to 2/3/5 sessions" - handed the 4-session card 23px more body than its neighbours and made it the odd one out. */ min-height: calc(2 * var(--t-small) * var(--lh-body)); color: var(--ink-soft); } .pkg__note b { color: var(--tier); font-weight: var(--w-bold); text-decoration: underline; } /* --tier is a custom property, so it cascades to the .tier inside: one declaration colours the card and its note. */ .pkg--ink { --tier: var(--card-ink); } .pkg--pink { --tier: var(--pink); } .pkg--purple { --tier: var(--card-purple); } .pkg--soft { --tier: var(--card-pink-soft); } .pkg--semester { --tier: var(--card-pink-hot); --tier-grad: linear-gradient(90deg, var(--card-plum-deep), var(--card-pink-hot)); } /* --- image pop-ups ---------------------------------------- The live page overlays the calendar and the schedule rather than navigating to the file. <dialog> does that natively, with Escape and focus trapping for free. */ .pop { max-width: min(94vw, 62rem); max-height: 92vh; padding: var(--s-sm); border: 0; border-radius: var(--radius); background: var(--white); color: var(--ink); box-shadow: var(--shadow-md); } .pop::backdrop { background: rgb(0 0 0 / .65); } .pop img { width: 100%; height: auto; border-radius: var(--radius); } .pop__close { display: block; margin-left: auto; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); font-size: 1.6rem; line-height: 1; cursor: pointer; transition: color var(--fast) var(--ease); } .pop__close:hover { color: var(--pink); } .pop__foot { margin: var(--s-sm) 0 0; text-align: center; } .pop__foot a { color: var(--pink); font-weight: var(--w-bold); text-decoration: underline; } /* ============================================================ The layout breakpoints, 1024 and 767 — the live page's own. Everything above is fluid or auto-fitting. ============================================================ */ /* ------------------------------------------------------------ 1024: the live page stops being two-column here, not at 767. This is the single biggest reason the rebuild read wrong on an iPad and right on a laptop. Measured on live, the hero heading is 462px wide at 1025 and 984px at 1024 — it is not shrinking, it is switching to one centred full-width column. The rebuild held its desktop columns all the way down to 768, so at 1024 it showed a 461px left-aligned column beside a button, against live's 984px centred stack. The same band change happens to the "yes, you read it right" split and to the plum statement band. ------------------------------------------------------------ */ @media (max-width: 1024px) { .hero__inner { grid-template-columns: 1fr; gap: var(--s-lg); text-align: center; } /* 10px, which with the column's own 10px gives live's 20px inset - its hero title runs 20..355 of a 375 screen. --gutter resolved to 19.5 here and stacked to 30, leaving the title 316 wide. */ .hero .wrap { padding-inline: 10px; } /* 30px below 1025, 50 above: live steps this section's padding at its own breakpoint rather than holding one value. */ .hero { padding-block: 30px; } .darkband { grid-template-columns: 1fr; } /* 25px, live's own tablet inset for this column - --s-md resolved to 27.7 at 820 and left the tick rows 5px narrower than live's. */ .darkband__copy { padding: 25px; } .darkband__art { justify-content: center; } /* Live centres this band below 1024 and left-aligns it above. */ .statement { text-align: center; } /* Live's own tablet values for the question band: the column keeps its 54.97%, its contents move in 50px instead of 200, the card is padded 20 instead of 25 and the icon asks for 35% instead of 20. At 1024 that gives a 335px text column - live's own, and the width the first assessment recorded ours missing by 26px. */ .qband { grid-template-columns: 50px calc(54.97% - 50px) 45.03%; } .qcard { padding: 20px; } .qcard img { width: 35%; min-width: 0; flex: 0 1 auto; } } /* Below this, the rest of the side-by-side content stacks. */ @media (max-width: 767px) { .qband, .bleed--right, .bleed--left { grid-template-columns: 1fr; } /* back into the single column; left on grid-column:2 it conjured an implicit second track and un-stacked the whole band. */ .qband__panel--tail { grid-column: 1; } /* 110px, like the benefit icons — measured on live at 375, where the card's icon is 110x110 centred above the text. */ .qcard img { width: 110px; } .qband__pad, .qband__fill, .bleed__side { display: none; } /* Hidden, as live hides it: its photo column carries elementor-hidden-phone and is display:none at 767 and below. With the fourth card now in a row of its own the photo would otherwise land between the third card and the fourth. */ .qband__photo { display: none; } /* Specificity: `.bleed--left .bleed__panel` (0,2,0) outranks a bare `.bleed__panel` (0,1,0), so the desktop asymmetric padding was leaking onto phones — 49.5px left, 32.8px right. Matching the selector shape is what actually overrides it. Live gives this text 335px of a 375px screen; --s-sm each side lands there. */ .bleed__panel, .bleed--left .bleed__panel, .bleed--right .bleed__panel { padding-inline: var(--s-sm); } /* The benefit rows carry their own inset on desktop, which on a phone is a second bite out of the same width. */ .benefit { padding-inline: 0; } /* White, not transparent, and with room above it: the live site separates the testimonials from the black band above with a white stripe. `background: none` here previously let the dark panel run straight into the black section. */ /* The gradient assumes a side-by-side band; stacked, it would paint black behind the wrong half. The white stripe above now comes from the section's own 50px margin. */ .reviews { background: var(--white); } .reviews__stage { padding-inline: var(--s-md); } /* Live stacks these cards on a phone: the icon centred on its own line, the text full width underneath. From live's post-42.css: the card column (6117c53, 64cb300) has margin-left 200px, 50px at 1024 and 0 at 767, so on a phone the cards run edge to edge. The inset is each image-box widget's own padding: 25px, overridden to 20px at 1024 on the black and plum cards (d6b557a, f783c01, 81398c8) but not on the pink one (2cdf89c), which keeps 25px. */ .qband__panel { padding-inline: 0; } .qcard { flex-direction: column; gap: 8px; padding: 20px; } .qcard--pink { padding: 25px; } /* White above and below "Before you sign up", from live's source: above it, section 62f8435 holds only the overlap photo, which is elementor-hidden-phone, so it is left as its column's 10px + 10px padding - 20px; then 9c7ccc6 itself, padded 30px 0 50px at 767, whose empty first column keeps Elementor's .elementor-column min-height of 1px. 20 + 30 + 1 above, 50 below. The next section, 6c7758c, is padded 0 at 767, so its black starts straight after. */ .bleed--right { padding-block: 51px 50px; } /* Live centres these two on a phone and left-aligns them from the tablet width up. */ .qcard p { text-align: center; } .bleed__panel > h2, .bleed__panel > h3 { text-align: center; } .benefit { grid-template-columns: 1fr; justify-items: center; text-align: center; } /* live uses 110px icons on a phone — bigger than desktop's 99 */ .benefit img { width: 110px; } .review__src { margin-left: 0; } } /* Above this the question cards sit two-up beside the photo. */ @media (min-width: 900px) { .questions__grid { grid-template-columns: 1fr; } } /* The live site puts this photo between the heading and the objections, inset inside the black panel. On desktop it has to be a grid sibling instead, so — following the same .overlap-photo / .panel-photo pattern used elsewhere in this file — there are two copies and the viewport picks one. */ .in-panel-photo { display: none; } @media (max-width: 767px) { .bleed--right > picture > .panel-photo { display: none; } .in-panel-photo { display: block; width: 100%; height: auto; margin-block: var(--s-sm); } } /* Phone-sized button. The live site's is 224x42; ours inherited desktop padding (20/40) and a 20px arrow, giving 275x60. */ @media (max-width: 767px) { .btn { padding: .8125rem 1.75rem; } .btn__arrow { width: 1rem; height: 1rem; } } /* ============================================================ A third breakpoint, added deliberately. The rest of this stylesheet avoids breakpoints because auto-fit handles reflow. It cannot handle this one: below ~640px a tall card has to become a compact row, and that is a change of structure, not of column count. The threshold is also where 2 cards stop fitting, so we never show a single full-width card. Six stacked cards are ~2400px of scrolling and you can only ever see one, which defeats the point — choosing a package is a comparison. As rows they are ~70px each, so all six sit within about a screen and can actually be compared. ============================================================ */ @media (max-width: 639px) { /* Grid, not flex, for one reason: grid-auto-rows: 1fr makes every row the height of the tallest, so the list is even. It has to be even to be a list. Two of the six metas wrap to a second line at 375 - "18 sessions · 20% off · 12 960 Kč total" and "Single Session" itself - so four rows measured 86px and two measured 109px. A price list whose rows are different heights reads as six unrelated blocks rather than one comparison, which is the job this block exists to do. Sizing to the tallest rather than clipping the text: the figures are the content, and a 20% discount is not something to hide to save 23px. */ .tiers { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; } .tier { display: grid; grid-template-columns: 1fr auto auto; align-items: center; align-content: center; column-gap: var(--s-sm); row-gap: .1rem; padding: var(--s-sm); border-left: 6px solid var(--tier); } .tier:hover { transform: none; } .tier__name { grid-column: 1; grid-row: 1; margin: 0; padding: 0; background: none; color: var(--ink); font-size: var(--t-body); text-align: start; } .tier__price { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 0; background: none; color: var(--tier); font-size: var(--t-h3); } .tier__meta { grid-column: 1; grid-row: 2; display: block; font-size: var(--t-small); color: var(--ink-soft); font-variant-numeric: tabular-nums; } .tier__chev { grid-column: 3; grid-row: 1 / span 2; display: block; width: .5rem; height: .5rem; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: rotate(-45deg); } .tier__list, .tier__cta { display: none; } } /* ============================================================ Below 767, live stacks everything ------------------------------------------------------------ Every Elementor column goes to width:100% at its mobile breakpoint, and that holds right up to 767 - not just on a phone. Ours kept two tracks wherever two would fit, so an iPad Mini in portrait (744) got a two-column carousel, a 2fr/1fr FAQ and a 564 benefit column against live's full-width 704. This block sits at the end of the file on purpose: the base .reviews grid, the base .faq__grid and the tablet .darkband__copy padding all appear later than the band where these rules would naturally live, and would otherwise win. ============================================================ */ @media (min-width: 584px) and (max-width: 767px) { .faq__grid { grid-template-columns: 1fr; gap: var(--s-md) 0; } .faq__q, .faq__a, .faq__media { grid-column: 1; grid-row: auto; } /* minmax(0,1fr), not 1fr: the carousel track holds six slides at 100% each, and an auto minimum sizes the column to all of them - 1077px inside a 744 screen. */ .reviews { grid-template-columns: minmax(0, 1fr); } .benefits { max-width: none; } /* 50px 10px, live's own value for this column below 767. */ .darkband__copy { padding: 50px 10px; } }