/* ============================================================ Prague Guitar Academy — design tokens ------------------------------------------------------------ This is the only file you need to touch to restyle the site. Every colour, size and space below is used by name in styles.css. Nothing is hard-coded there. ============================================================ */ :root { /* --- Brand colours ------------------------------------- Measured from the existing site. These four are the identity; everything else is derived from them. */ --pink: #F61067; /* buttons, links, accents */ --pink-dark: #C50B51; /* hover state, derived */ --black: #000000; /* section grounds */ --white: #FFFFFF; --plum: #4A1D2E; /* alternate section ground */ /* --- Neutrals ------------------------------------------ The old site inherited its greys from the theme. These are picked deliberately, tuned to the pink. */ --ink: #1A1720; /* body text on light */ --ink-soft: #5A5563; /* secondary text on light */ --on-dark: #FFFFFF; /* body text on dark */ --on-dark-soft:#C9C3CE; /* secondary text on dark */ --rule: #E4E0E8; /* hairlines */ --rule-strong: #EBEAED; /* the story block's 2px border */ --phone-icon: #DBC0E9; /* the phone glyph (pale lilac) */ --star: #FBBC04; /* Google's star colour, reviews only */ /* --- Price-card accents --------------------------------- Sampled from the original tuition PNGs, not eyeballed. #F61067 came back identical to --pink, which is the check that the sampling was right. */ --card-ink: #2B2B2B; /* Intro + Single Session */ --card-purple: #A359A0; /* 8 Sessions */ --card-pink-soft: #F7669D; /* 4 Sessions */ --card-plum-deep: #501C30; /* Semester, gradient start */ --card-pink-hot: #F01065; /* Semester, gradient end */ /* Soft pink ground for the guidance note. Same hue family as --pink, lightened until body text sits on it comfortably. */ --pink-tint: #FDE7EF; /* --- Type ----------------------------------------------- */ --font: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --w-regular: 400; --w-semi: 600; --w-bold: 700; --w-black: 800; /* NOTE: the content sizes below are FLAT, not fluid. Elementor sets one size per breakpoint and the live site uses the same value on a phone as on desktop for body and heading text. Only --t-hero, --t-lead, --t-nav and --t-btn step, and they step on three different ramps. Measured at 375px on the live site: h2 36, h3 26, card 22, sub 24. The scale is STEPPED, never fluid. Live's breakpoints are 1024 and 767; sizes here are flat within a band and the two media blocks at the foot of this file hold the steps. Do not reintroduce clamp() here. Interpolating between the ends lands every tablet width on a size the live site never uses, which is exactly what this replaced. */ --t-hero: 1.875rem; /* 30 flat within the band; steps to 26 at 1024 and 15 at 767, see the media blocks below */ --t-h2: 2.25rem; /* 36 flat — the live site keeps section headings at 36px on a phone too; ours was shrinking to 25. */ --t-h3: 1.625rem; /* 26 flat (measured on live) */ --t-lead: 1.625rem; /* 26 flat within the band; steps to 20 and 14, below */ --t-sub: 1.5rem; /* 24 flat, measured on live */ --t-body: 1.125rem; /* 18 flat. The live site sets body copy to 18 at every width - the FAQ answers, the tick list and the story paragraphs all measure 18 on a phone and on a 1440 desktop. The old 16→17 clamp was the single largest reason the rebuild read differently from live. */ --t-nav: 1.25rem; /* 20 flat. Live holds the nav at 20 from desktop right through tablet and steps once, to 12, at its mobile breakpoint. The clamp this replaced interpolated through 17.1 at 1024 and 15.5 at 820 — sizes the live site never renders. */ --t-btn: 1.25rem; /* 20 → 14 → 12. The pink button's label is a third ramp of its own: live steps it at BOTH breakpoints where the nav steps only at 767. The two shared a token and could not both be right. */ --t-card: 1.375rem; /* 22 flat question + Q&A */ --t-ans: 1.125rem; /* 18 flat answers */ --t-benefit: 1.25rem; /* 20 flat benefit copy */ --t-small: 0.875rem; --t-micro: 0.75rem; --lh-tight: 1.15; --lh-head: 1.25; --lh-body: 1.65; /* --- Space ---------------------------------------------- One fluid ramp. Section padding and gaps come from here, so vertical rhythm stays consistent at every width. */ --s-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.3rem); --s-2xs: clamp(0.5rem, 0.47rem + 0.15vw, 0.625rem); --s-xs: clamp(0.75rem, 0.70rem + 0.25vw, 0.95rem); --s-sm: clamp(1rem, 0.93rem + 0.35vw, 1.25rem); --s-md: clamp(1.5rem, 1.36rem + 0.70vw, 2rem); --s-lg: clamp(2rem, 1.72rem + 1.40vw, 3.25rem); --s-xl: clamp(3rem, 2.44rem + 2.80vw, 5.5rem); --s-2xl: clamp(4rem, 3.02rem + 4.90vw, 8rem); /* --- Layout --------------------------------------------- */ --page: 1140px; /* the main content column */ --page-wide:1402px; /* the few full-bleed-ish sections */ --prose: 68ch; /* readable line length for body copy */ /* Elementor puts widgets 10px inside a 1140 container on desktop and ~20px in on phones, so this gutter shrinks as the viewport grows. */ --gutter: clamp(0.625rem, 1.43rem - 0.893vw, 1.25rem); --radius: 6px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgb(0 0 0 / .06), 0 4px 12px -6px rgb(0 0 0 / .12); --shadow-md: 0 2px 4px rgb(0 0 0 / .06), 0 12px 32px -12px rgb(0 0 0 / .22); --ease: cubic-bezier(.4, 0, .2, 1); --fast: .18s; --slow: .32s; } /* ============================================================ The two breakpoints the live page actually has ------------------------------------------------------------ The live site is Elementor, which emits one discrete value per breakpoint rather than interpolating. Its breakpoints are 1024 and 767: 1025 is desktop, 1024 is tablet, 767 is mobile. Measured across 1440, 1025, 1024, 768, 767 and 375, fifteen of the twenty text elements on the homepage are one flat size at every width. Only the five below step, and only here. This is why the rebuild looked wrong on an iPad and right on a laptop: it interpolated where live steps, and had no 1024 step at all, so every width from 768 to 1024 landed on a value the live site never uses. ============================================================ */ @media (max-width: 1024px) { :root { --t-hero: 1.625rem; /* 30 → 26 */ --t-lead: 1.25rem; /* 26 → 20 */ --t-btn: 0.875rem; /* 20 → 14 */ } } @media (max-width: 767px) { :root { --t-hero: 0.9375rem; /* 26 → 15 */ --t-lead: 0.875rem; /* 20 → 14 */ --t-nav: 0.75rem; /* 20 → 12 */ --t-btn: 0.75rem; /* 14 → 12 */ } } /* Respect a reader who has asked for less movement. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }