@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap"); :root { /* * TYPOGRAPHY SYSTEM * Display: Instrument Serif for selected story section titles only. * Body: Geist for the hero, navigation, copy, buttons, labels, cards and metrics. * * To test another pairing, change only these variables and the Google Fonts * import above. Component selectors below all reference these two tokens. */ --font-display: "Instrument Serif", Georgia, serif; --font-body: "Geist", "Geist Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ink: #080706; --page-base: #080706; /* * PAGE / STORY BACKGROUND * One continuous studio background shared by body, story and sticky stage. * Both amber glows extend across the viewport without hard center stops. */ --page-background: radial-gradient(circle at 42% 45%, rgba(150, 88, 35, 0.24), transparent 36%), radial-gradient(circle at 72% 50%, rgba(110, 65, 28, 0.15), transparent 42%), linear-gradient(90deg, #090806 0%, #15100b 42%, #0b0907 100%); --ink-soft: #0e0c0a; --panel: #12100d; --panel-light: #191510; --ivory: #f1ede5; --muted: #aaa196; --muted-dark: #777067; --amber: #c38a48; --amber-light: #e0b276; --bronze: #80603d; --line: rgba(224, 178, 118, 0.2); --story-copy-width: 57%; --story-stage-width: 43%; --guitar-image-height: 255vh; --page-pad: clamp(1.25rem, 4vw, 4.75rem); --header-h: 92px; --content-max: 760px; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--page-base); scrollbar-width: none; /* Firefox */ } html::-webkit-scrollbar { display: none; /* Chrome, Safari */ } body { margin: 0; color: var(--ivory); background: var(--page-background); font-family: var(--font-body); font-weight: 300; line-height: 1.6; overflow-x: clip; scrollbar-width: none; /* Firefox */ } body::-webkit-scrollbar { display: none; /* Chrome, Safari */ } .section-title { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.035em; line-height: 0.9; } /* * TYPOGRAPHY VARIANT A * Hero: Geist. Story section titles: Instrument Serif. All UI: Geist. * Switch to this version by changing to * in index.html. */ .variant-a .hero-title { font-family: var(--font-body); font-weight: 400; letter-spacing: -0.055em; line-height: 0.92; } /* * TYPOGRAPHY VARIANT B (CURRENT DEFAULT) * Hero and story section titles: Instrument Serif. All practical copy and UI * continue to inherit Geist from body. */ .variant-b .hero-title { max-width: 1080px; font-family: var(--font-display); font-weight: 400; letter-spacing: -0.045em; line-height: 0.88; } body::before { position: fixed; inset: 0; z-index: 20; pointer-events: none; content: ""; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); } ::selection { color: var(--ink); background: var(--amber-light); } a { color: inherit; text-decoration: none; } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } button, a { -webkit-tap-highlight-color: transparent; } .skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 100; padding: 0.75rem 1rem; color: var(--ink); background: var(--ivory); transform: translateY(-160%); transition: transform 180ms ease; } .skip-link:focus { transform: translateY(0); } .site-header { position: absolute; top: 0; left: 0; z-index: 100; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; min-height: 92px; padding: 0 var(--page-pad); border-bottom: 1px solid rgba(255, 255, 255, 0.0); background: transparent; transition: min-height 300ms ease, background 300ms ease, border-color 300ms ease, backdrop-filter 300ms ease; } .site-header.scrolled { min-height: 60px; background: rgba(11, 9, 8, 0.95); border-bottom-color: rgba(207, 147, 80, 0.3); } .brand { display: inline-flex; gap: 0.75rem; grid-column: 1; align-items: center; justify-self: start; width: max-content; font-size: 0.84rem; font-weight: 500; letter-spacing: 0.025em; } .brand em { color: var(--amber-light); font-style: normal; } .brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(224, 178, 118, 0.55); border-radius: 50%; color: var(--amber-light); font-family: var(--font-body); font-size: 0.61rem; letter-spacing: 0.08em; } .desktop-nav { grid-column: 2; display: flex; gap: clamp(1.25rem, 3vw, 2.75rem); align-items: center; justify-self: center; } .desktop-nav a { position: relative; color: rgba(241, 237, 229, 0.72); font-size: 0.71rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; transition: color 240ms ease; } .desktop-nav a::after { position: absolute; right: 0; bottom: -0.5rem; left: 0; height: 1px; content: ""; background: var(--amber-light); transform: scaleX(0); transform-origin: right; transition: transform 300ms var(--ease); } .desktop-nav a:hover { color: var(--ivory); } .desktop-nav a:hover::after { transform: scaleX(1); transform-origin: left; } .hamburger-btn { display: none; } .mobile-menu { display: none; } .header-cta { grid-column: 3; justify-self: end; padding: 0.65rem 0; border-bottom: 1px solid var(--amber); color: var(--ivory); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .hero { position: relative; display: flex; align-items: center; min-height: 100svh; isolation: isolate; overflow: hidden; } .hero-media, .hero-video, .hero-fallback, .hero-overlay { position: absolute; inset: 0; } .hero-media { z-index: -1; background: #0b0907; } .hero-video { z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: saturate(0.62) sepia(0.08) contrast(1.08); transition: opacity 900ms ease; } .video-ready .hero-video { opacity: 0.72; } .hero-fallback { overflow: hidden; background: linear-gradient(112deg, rgba(8, 7, 6, 0.1) 10%, rgba(8, 7, 6, 0.72) 80%), radial-gradient(ellipse at 70% 48%, #302015 0%, #15100c 35%, #080706 72%); } .hero-fallback::before { position: absolute; top: 15%; right: 13%; width: min(35vw, 520px); aspect-ratio: 0.58; content: ""; border: 1px solid rgba(213, 154, 86, 0.12); border-radius: 48% 48% 42% 42%; opacity: 0.65; filter: blur(1px); transform: rotate(-7deg); } .fallback-light { position: absolute; border-radius: 50%; filter: blur(90px); } .fallback-light-one { top: 13%; right: 20%; width: 26vw; height: 45vh; background: rgba(181, 99, 35, 0.12); } .fallback-light-two { bottom: -15%; left: 35%; width: 42vw; height: 30vh; background: rgba(116, 67, 33, 0.1); } .hero-overlay { z-index: 2; background: linear-gradient(90deg, rgba(8, 7, 6, 0.92) 0%, rgba(8, 7, 6, 0.64) 42%, rgba(8, 7, 6, 0.26) 75%), linear-gradient(0deg, rgba(8, 7, 6, 0.78) 0%, transparent 36%, rgba(8, 7, 6, 0.15) 100%); } .hero-content { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 100%; margin: 0; padding-top: 3.5rem; padding-right: var(--page-pad); padding-left: var(--page-pad); text-align: left; } .eyebrow { margin: 0 0 1.2rem; color: var(--amber-light); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; } .hero h1 { margin: 0; } .story-panel h2 { margin: 0; } .hero h1 { width: 100%; max-width: min(1200px, 92vw); margin-right: auto; margin-left: 0; font-size: clamp(3.25rem, 7vw, 7.8rem); text-align: left; text-wrap: balance; } .variant-b .hero h1 { font-size: clamp(4.5rem, 9vw, 9.375rem); } .bg-music-btn { position: fixed; right: 1.5rem; bottom: max(1.5rem, env(safe-area-inset-bottom, 1.5rem) + 0.5rem); z-index: 200; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(224, 178, 118, 0.25); border-radius: 50%; background: rgba(12, 10, 8, 0.82); color: rgba(198, 190, 179, 0.5); cursor: pointer; backdrop-filter: blur(8px); transition: color 200ms ease, border-color 200ms ease, box-shadow 200ms ease; } .bg-music-btn:hover, .bg-music-btn:focus-visible { color: var(--amber-light); border-color: rgba(224, 178, 118, 0.5); box-shadow: 0 0 12px rgba(195, 138, 72, 0.18); outline: none; } .bg-music-btn[aria-pressed="true"] { color: var(--amber-light); border-color: rgba(224, 178, 118, 0.45); } .bg-music-icon { width: 16px; height: 16px; fill: currentColor; stroke: none; } .bg-music-icon--pause { display: none; } .bg-music-btn[aria-pressed="true"] .bg-music-icon--play { display: none; } .bg-music-btn[aria-pressed="true"] .bg-music-icon--pause { display: block; } .button { display: inline-flex; gap: 2rem; align-items: center; justify-content: space-between; min-height: 58px; padding: 0 1.5rem; border: 1px solid rgba(224, 178, 118, 0.34); font-size: 0.76rem; font-weight: 500; letter-spacing: 0.055em; text-transform: uppercase; transition: color 250ms ease, border-color 250ms ease, background 250ms ease, transform 250ms var(--ease), box-shadow 250ms ease; } .button span { color: var(--amber-light); font-size: 1rem; } .button-primary { background: linear-gradient(110deg, rgba(113, 73, 39, 0.42), rgba(54, 37, 23, 0.66)); box-shadow: 0 12px 45px rgba(180, 102, 37, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .button:hover { border-color: rgba(224, 178, 118, 0.7); background-color: rgba(195, 138, 72, 0.1); box-shadow: 0 16px 52px rgba(180, 102, 37, 0.16); transform: translateY(-2px); } .hero-note { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; } .story { position: relative; display: grid; grid-template-columns: var(--story-copy-width) var(--story-stage-width); align-items: start; background: transparent; } .story-content { min-width: 0; } .story-panel { position: relative; display: flex; align-items: center; min-height: 112vh; padding: 10vh clamp(2rem, 7vw, 8.5rem) 10vh var(--page-pad); border-bottom: 1px solid rgba(255, 255, 255, 0.065); } .story-panel::before { position: absolute; top: 50%; left: 0; width: 42px; height: 1px; content: ""; background: var(--line); } .panel-inner { width: min(100%, var(--content-max)); opacity: 0.58; transform: translateY(22px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); } .story-panel.is-active .panel-inner { opacity: 1; transform: translateY(0); } .section-number { display: flex; gap: 0.85rem; align-items: center; margin: 0 0 3.5rem; color: var(--muted-dark); font-family: var(--font-body); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; } .section-number span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; color: var(--amber-light); } .story-panel h2 { max-width: 680px; font-size: clamp(2.7rem, 5vw, 6rem); } .section-intro, .contact-copy { max-width: 620px; margin: 2rem 0 0; color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.8; } .feature-list { display: grid; gap: 0; max-width: 600px; margin: 2.5rem 0 0; padding: 0; list-style: none; } .feature-list li { display: flex; gap: 1rem; align-items: center; padding: 0.85rem 0; border-top: 1px solid rgba(255, 255, 255, 0.08); color: rgba(241, 237, 229, 0.83); font-size: 0.84rem; letter-spacing: 0.035em; } .feature-list li::before { width: 22px; min-width: 22px; height: 1px; content: ""; background: var(--amber); flex-shrink: 0; } .service-grid, .pricing-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2.8rem; } .service-card, .price-card, .testimonial { border: 1px solid rgba(255, 255, 255, 0.085); background: linear-gradient(140deg, rgba(255, 255, 255, 0.035), transparent 44%), rgba(20, 17, 13, 0.65); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025); backdrop-filter: blur(8px); } .service-card { min-height: 180px; padding: 1.4rem; transition: border-color 250ms ease, background 250ms ease; } .service-card:hover { border-color: rgba(224, 178, 118, 0.28); background-color: rgba(40, 29, 19, 0.55); } .service-card > span { color: var(--amber); font-family: var(--font-body); font-size: 0.58rem; letter-spacing: 0.13em; } .service-card h3 { margin: 2rem 0 0.45rem; font-family: var(--font-body); font-size: 0.9rem; font-weight: 400; letter-spacing: -0.015em; } .service-card p { margin: 0; color: var(--muted-dark); font-size: 0.76rem; line-height: 1.6; } .pricing-grid { gap: 1rem; } .price-card { position: relative; display: flex; flex-direction: column; min-height: 330px; padding: clamp(1.4rem, 2.5vw, 2rem); } .price-card.featured { border-color: rgba(224, 178, 118, 0.3); background: linear-gradient(145deg, rgba(125, 78, 39, 0.2), transparent 54%), rgba(24, 18, 13, 0.76); } .price-label { position: absolute; top: 1rem; right: 1rem; color: var(--amber-light); font-size: 0.52rem; letter-spacing: 0.12em; text-transform: uppercase; } .price-card div > p { margin: 0 0 1.5rem; color: var(--muted); font-size: 0.67rem; letter-spacing: 0.08em; text-transform: uppercase; } .price-card strong { display: block; font-family: var(--font-body); font-size: clamp(2.7rem, 4vw, 4.2rem); font-weight: 300; letter-spacing: -0.06em; line-height: 1; } .price-card div > span { color: var(--muted-dark); font-size: 0.69rem; } .price-card > p { margin: 2.1rem 0; color: var(--muted-dark); font-size: 0.76rem; } .price-card a { display: flex; justify-content: space-between; margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.08); color: var(--ivory); font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; } .price-card a span { color: var(--amber-light); } .fine-print { margin: 1.2rem 0 0; color: var(--muted-dark); font-size: 0.67rem; } .testimonial-stack { display: grid; gap: 1rem; margin-top: 2.8rem; } .testimonial { margin: 0; padding: clamp(1.5rem, 3vw, 2.4rem); } .stars { color: var(--amber-light); font-size: 0.66rem; letter-spacing: 0.3em; } .testimonial blockquote { margin: 1.5rem 0 1.8rem; color: rgba(241, 237, 229, 0.86); font-family: var(--font-body); font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 300; line-height: 1.65; } .testimonial figcaption { display: flex; gap: 0.3rem; flex-direction: column; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.07); } .testimonial figcaption span { font-size: 0.73rem; font-weight: 500; } .testimonial figcaption small { color: var(--muted-dark); font-size: 0.63rem; letter-spacing: 0.06em; text-transform: uppercase; } .contact-panel { min-height: 118vh; } .contact-copy { max-width: 560px; font-size: clamp(1.15rem, 1.8vw, 1.5rem); } .button-large { min-width: min(100%, 330px); min-height: 66px; margin-top: 2.8rem; } .contact-meta { display: flex; gap: clamp(2rem, 5vw, 5rem); margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } .contact-meta p { display: flex; gap: 0.3rem; flex-direction: column; margin: 0; color: var(--ivory); font-size: 0.8rem; } .contact-meta p > span { color: var(--muted-dark); font-size: 0.58rem; letter-spacing: 0.13em; text-transform: uppercase; } .guitar-stage { position: sticky; top: 0; align-self: start; height: 100vh; } .guitar-window { position: relative; width: 100%; height: 100%; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 52% 54%, rgba(147, 84, 33, 0.19), transparent 36%), linear-gradient(135deg, #13100d, #090807 70%); } .guitar-window::before { position: absolute; inset: 0; z-index: 5; pointer-events: none; content: ""; opacity: 0.34; background: repeating-linear-gradient(90deg, transparent 0, transparent 8.2%, rgba(255, 255, 255, 0.018) 8.35%, transparent 8.5%); } .stage-label { position: absolute; top: calc(92px + 1rem); right: 2rem; left: 2rem; z-index: 8; display: flex; justify-content: space-between; color: rgba(241, 237, 229, 0.38); font-size: 0.55rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; } .stage-progress { color: var(--amber-light); } .guitar-glow { position: absolute; top: 12%; left: 50%; z-index: -1; width: 70%; height: 75%; border-radius: 50%; background: rgba(180, 95, 28, 0.18); filter: blur(110px); transform: translateX(-50%); } .guitar-image { position: absolute; top: 0; left: 50%; z-index: 2; display: block; width: auto; max-width: none; height: var(--guitar-image-height); user-select: none; filter: drop-shadow(0 30px 42px rgba(0, 0, 0, 0.54)) saturate(0.92) contrast(1.02); transform: translate3d(-50%, calc(var(--guitar-y, 0) * -1px), 0); transform-origin: 50% 0; will-change: transform; } .guitar-fallback { position: absolute; top: 7%; left: 50%; z-index: 1; display: none; width: 17%; height: 72%; border-radius: 45% 45% 10% 10%; background: linear-gradient(90deg, #26170e, #8e4b21 48%, #2a180f); box-shadow: 0 0 80px rgba(166, 88, 31, 0.22); transform: translateX(-50%); } .guitar-fallback::before { position: absolute; top: 58%; left: 50%; width: 360%; aspect-ratio: 1; content: ""; border-radius: 48% 48% 44% 44%; background: linear-gradient(115deg, #2a170d, #a05925 48%, #25140b); transform: translateX(-50%); } .guitar-fallback i { position: absolute; top: 5%; left: 50%; width: 170%; height: 7%; border-radius: 40%; background: #17100c; transform: translateX(-50%); } .image-missing .guitar-fallback { display: block; } .image-missing .guitar-image { display: none; } .stage-vignette { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: linear-gradient(90deg, rgba(8, 7, 6, 0.34), transparent 15%, transparent 84%, rgba(8, 7, 6, 0.45)), linear-gradient(0deg, rgba(8, 7, 6, 0.88), transparent 16%, transparent 84%, rgba(8, 7, 6, 0.7)); } .stage-rail { position: absolute; right: 1.35rem; bottom: 2.25rem; z-index: 9; width: 1px; height: 22vh; background: rgba(255, 255, 255, 0.13); } .stage-rail span { position: absolute; top: 0; left: -1px; width: 3px; height: 20%; background: var(--amber-light); box-shadow: 0 0 12px rgba(224, 178, 118, 0.4); transform: translateY(calc(var(--story-progress, 0) * 400%)); will-change: transform; } .site-footer { display: grid; gap: 1.5rem; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 180px; padding: 2rem var(--page-pad); border-top: 1px solid rgba(255, 255, 255, 0.08); background: #070605; color: var(--muted-dark); font-size: 0.64rem; letter-spacing: 0.05em; } .footer-brand { display: inline-flex; gap: 0.75rem; align-items: center; justify-self: start; width: max-content; color: var(--ivory); font-size: 0.84rem; font-weight: 500; letter-spacing: 0.025em; } .footer-brand em { color: var(--amber-light); font-style: normal; } .footer-brand .brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(224, 178, 118, 0.55); border-radius: 50%; color: var(--amber-light); font-family: var(--font-body); font-size: 0.61rem; letter-spacing: 0.08em; } .site-footer p { margin: 0; } .site-footer p:last-child { justify-self: end; } .grecaptcha-badge { visibility: hidden; } .site-footer .recaptcha-notice { display: block; font-size: 0.6rem; opacity: 0.45; margin-top: 0.3rem; } .debug-panel { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; display: none; min-width: 190px; padding: 0.8rem 1rem; border: 1px solid rgba(224, 178, 118, 0.35); background: rgba(8, 7, 6, 0.9); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); color: var(--muted); font-family: var(--font-body); font-size: 0.67rem; line-height: 1.7; backdrop-filter: blur(10px); } .debug-panel.is-visible { display: grid; } .debug-panel strong, .debug-panel b { color: var(--amber-light); font-weight: 500; } @media (max-width: 1100px) { :root { --story-copy-width: 61%; --story-stage-width: 39%; --guitar-image-height: 230vh; } .desktop-nav { display: none; } .site-header { grid-template-columns: 1fr auto; } .header-cta { grid-column: 2; } .story-panel { padding-right: clamp(1.5rem, 4vw, 4rem); } .service-grid, .pricing-grid { grid-template-columns: 1fr; } .price-card { min-height: 290px; } } @media (max-width: 760px) { :root { --page-pad: 1.25rem; } .site-header { min-height: 76px; } .header-cta { font-size: 0.62rem; } .hero { min-height: 100svh; align-items: center; padding-bottom: 0; } .hero-content { width: 100%; margin: 0; padding-top: 76px; padding-bottom: 76px; padding-right: var(--page-pad); padding-left: var(--page-pad); } .variant-b .hero h1 { max-width: 680px; font-size: clamp(3.65rem, 15.5vw, 5.8rem); line-height: 0.89; } .story { display: flex; flex-direction: column; background: var(--ink); } .story-content { display: contents; } .story-panel { order: 1; min-height: auto; padding: 7rem var(--page-pad); } .story-panel::before { display: none; } .panel-inner { opacity: 1; transform: none; } .section-number { margin-bottom: 2.3rem; } .story-panel h2 { font-size: clamp(2.8rem, 14vw, 4.5rem); } .service-grid, .pricing-grid { grid-template-columns: 1fr; } .guitar-stage { position: relative; top: auto; order: 0; align-self: stretch; height: 74svh; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .guitar-image { top: -4%; height: 160svh; transform: translate3d(-50%, -2%, 0); will-change: auto; } .stage-rail { display: none; } .contact-meta { flex-direction: column; } .site-footer { grid-template-columns: 1fr; padding-top: 3rem; padding-bottom: 3rem; } .site-footer p:last-child { justify-self: start; } } @media (max-width: 420px) { .brand { gap: 0.55rem; } .brand > span:last-child { font-size: 0.72rem; } .brand-mark { width: 31px; height: 31px; } .header-cta { max-width: 96px; text-align: right; } .variant-b .hero h1 { font-size: clamp(3.05rem, 15vw, 4.45rem); } .button { gap: 1rem; font-size: 0.68rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .guitar-image { will-change: auto; } } /* Full-screen cinematic guitar sequence */ .story { position: relative; display: block; height: 600vh; min-height: 3600px; background: var(--page-background); border: 0; box-shadow: none; } .scene-anchor { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; scroll-margin-top: 0; } /* * NAVIGATION / CAMERA ALIGNMENT * Each anchor maps directly to its camera keyframe. The `N% - Nvh` formula * resolves to N percent of the actual sticky scroll travel at any viewport. */ #about { top: calc(5% - 5vh); } #lessons { top: calc(25% - 25vh); } #pricing { top: calc(50% - 50vh); } #reviews { top: calc(72% - 72vh); } #contact { top: calc(90% - 90vh); } .cinematic-stage { position: sticky; top: 0; width: 100%; height: 100vh; height: 100svh; overflow: hidden; /* * GUITAR STORY STAGE BACKGROUND * This is the only full-screen scene background. Guitar, text and empty * areas all float above this same uninterrupted 100% viewport layer. */ background: var(--page-background); border: 0; box-shadow: none; } .cinematic-stage::before { position: absolute; inset: 0; z-index: 1; pointer-events: none; content: ""; /* * FULL-VIEWPORT TEXTURE * No 50% hard stop or vertical divider. Keep this extremely subtle. */ opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E"); } .cinematic-stage::after { position: absolute; inset: 0; z-index: 3; pointer-events: none; content: ""; /* * GUITAR BACKGROUND BLENDING: this full-stage grade crosses both the image * and page background, helping a JPG fallback lose its rectangular boundary. */ background: radial-gradient(circle at 44% 48%, rgba(192, 103, 39, 0.065), transparent 43%), radial-gradient(circle at 74% 52%, rgba(120, 71, 31, 0.045), transparent 46%), linear-gradient(115deg, rgba(27, 17, 11, 0.08), transparent 52%, rgba(8, 7, 6, 0.1)); mix-blend-mode: soft-light; } .stage-atmosphere { position: absolute; inset: -20%; z-index: 0; background: radial-gradient(circle at 44% 46%, rgba(194, 105, 38, 0.13), transparent 34%), radial-gradient(circle at 73% 52%, rgba(121, 70, 29, 0.08), transparent 40%), radial-gradient(ellipse at 50% 96%, rgba(88, 47, 22, 0.12), transparent 48%); filter: blur(38px); opacity: 0.78; } .guitar-camera { position: absolute; top: 50%; left: 50%; z-index: 2; width: 62.04vh; height: 110vh; transform: translate3d( calc(-50% + var(--camera-x, 0px)), calc(-50% + var(--camera-y, 0px)), 0 ) scale(var(--camera-scale, 1)) rotate(var(--camera-rotation, 0deg)); transform-origin: center; will-change: transform; background: transparent; border: 0; box-shadow: none; } .guitar-camera::after { /* Prevent a moving rectangular color grade around transparent assets. */ display: none; } .guitar-image { position: static; display: block; width: 100%; max-width: none; height: 100%; object-fit: contain; user-select: none; mix-blend-mode: normal; filter: brightness(1.04) saturate(1.08) contrast(1.05) drop-shadow(0 32px 45px rgba(0, 0, 0, 0.62)); transform: none; will-change: auto; transition: opacity 260ms ease; } .cinematic-stage.asset-loading .guitar-image { opacity: 0; } /* * ASSET SWITCHING: transparent WebP/PNG is selected before guitar.jpg by * GUITAR_ASSET_SOURCES in script.js. Add a new transparent export there. */ .cinematic-stage.uses-transparent .guitar-image { background: transparent; } /* * JPG FALLBACK BLENDING: CSS cannot remove a baked-in black background. * Matching the base color plus feathered edges only makes the boundary softer. */ .cinematic-stage.uses-jpg .guitar-camera { overflow: hidden; background: var(--page-base); } .cinematic-stage.uses-jpg .guitar-camera::before { position: absolute; inset: -2px; z-index: 2; pointer-events: none; content: ""; box-shadow: inset 0 0 9vh 4vh var(--page-base), inset 0 0 16vh 2vh rgba(8, 7, 6, 0.58); } .cinematic-stage.image-missing .guitar-camera { width: 16vh; border-radius: 45% 45% 8% 8%; background: linear-gradient(90deg, #1b120d, #8e4b21 48%, #21140d); box-shadow: 0 0 100px rgba(166, 88, 31, 0.2); } .cinematic-stage.image-missing .guitar-image { display: none; } /* * LEGACY CONTAINER NEUTRALIZATION * These selectors belonged to the previous split-screen implementation. * Keeping them transparent prevents any right-side panel from returning. */ .guitar-stage, .guitar-window, .story-content, .story-panel, .panel-inner { background: transparent; border-left: 0; border-right: 0; box-shadow: none; } .stage-vignette { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(ellipse at center, transparent 42%, rgba(7, 6, 5, 0.18) 72%, rgba(7, 6, 5, 0.58) 100%), linear-gradient(0deg, rgba(7, 6, 5, 0.58), transparent 20%, transparent 82%, rgba(7, 6, 5, 0.42)); } .stage-chrome { display: none; } .stage-progress { padding-top: 0.35rem; color: var(--amber-light); opacity: 0.72; } .scene-layer, .cinematic-scene { position: absolute; inset: 0; } .scene-layer { z-index: 6; background: transparent; border: 0; box-shadow: none; } .cinematic-scene { display: grid; padding: clamp(5.5rem, 9vh, 8rem) var(--page-pad) clamp(3.5rem, 7vh, 6rem); pointer-events: none; opacity: var(--scene-opacity, 0); visibility: hidden; transform: translate3d(0, var(--scene-shift, 18px), 0); transition: visibility 0s linear 500ms; will-change: opacity, transform; background: transparent; border: 0; box-shadow: none; } .cinematic-scene.is-visible { visibility: visible; transition-delay: 0s; } .cinematic-scene.is-active { pointer-events: auto; } .cinematic-scene h2 { margin: 0; font-size: clamp(3.2rem, 7vw, 7.6rem); } .scene-copy { width: min(41vw, 610px); } .scene-about { align-items: center; justify-items: end; } .scene-about .scene-copy { margin-right: clamp(0rem, 3vw, 4rem); } .section-intro { max-width: 550px; font-size: clamp(0.94rem, 1.25vw, 1.12rem); } .feature-list { max-width: 540px; margin-top: clamp(1.5rem, 3.5vh, 2.6rem); } .feature-list li { padding: clamp(0.7rem, 1.5vh, 1rem) 0; } .scene-lessons { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .lessons-heading { align-self: start; max-width: 600px; } .lessons-heading h2 { max-width: 620px; font-size: clamp(2.8rem, 5.5vw, 6rem); } .lesson-notes { position: absolute; inset: 0; } .lesson-note { position: absolute; width: min(25vw, 340px); padding: 1.35rem 1.5rem; border: 1px solid rgba(255, 255, 255, 0.1); background: linear-gradient(135deg, rgba(255, 255, 255, 0.045), transparent 55%), rgba(10, 8, 7, 0.72); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22); backdrop-filter: blur(10px); } .lesson-note > span { color: var(--amber-light); font-size: 0.55rem; letter-spacing: 0.14em; } .lesson-note h3 { margin: 1.15rem 0 0.35rem; font-family: var(--font-body); font-size: clamp(0.9rem, 1.2vw, 1.08rem); font-weight: 400; } .lesson-note p { margin: 0; color: var(--muted); font-size: 0.74rem; } .note-left { top: 45%; left: var(--page-pad); } .note-right { top: 26%; right: var(--page-pad); } .note-bottom { right: 8vw; bottom: 7vh; } .scene-pricing { align-items: center; justify-items: start; } .scene-pricing .scene-copy { width: min(46vw, 660px); } .pricing-grid { display: grid; gap: 0.8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(1.5rem, 3.5vh, 2.8rem); } .price-card { min-height: 0; padding: clamp(1.2rem, 2vw, 1.8rem); border-color: rgba(255, 255, 255, 0.11); background: rgba(12, 10, 8, 0.74); } .price-card > p { margin: 0 0 1.2rem; color: var(--muted); font-size: 0.61rem; letter-spacing: 0.1em; text-transform: uppercase; } .price-card strong { font-size: clamp(2.5rem, 4.2vw, 4.4rem); } .price-card > span { color: var(--muted-dark); font-size: 0.68rem; } .scene-reviews { align-items: start; justify-items: start; } .reviews-heading { position: absolute; top: 11vh; left: var(--page-pad); z-index: 2; width: min(38vw, 490px); text-align: left; } .reviews-heading h2 { font-size: clamp(2.7rem, 4.4vw, 4.8rem); } .review-stats { display: grid; gap: clamp(1.2rem, 2.5vw, 2.6rem); grid-template-columns: repeat(3, max-content); align-items: start; margin-top: 1.55rem; } .review-stats span { display: flex; gap: 0.24rem; flex-direction: column; padding: 0; color: var(--muted-dark); font-size: 0.56rem; letter-spacing: 0.055em; line-height: 1.35; text-transform: uppercase; } .review-stats strong { color: rgba(224, 178, 118, 0.92); font-family: var(--font-body); font-size: 1.16rem; font-weight: 300; letter-spacing: 0; text-transform: none; } .reviews-all-link { display: inline-flex; gap: 0.75rem; align-items: center; margin-top: 1.15rem; padding-bottom: 0.38rem; border-bottom: 1px solid rgba(224, 178, 118, 0.34); color: rgba(241, 237, 229, 0.72); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.015em; text-transform: none; transition: color 220ms ease, border-color 220ms ease; } .reviews-all-link span { color: var(--amber-light); transition: transform 220ms ease; } .reviews-all-link:hover, .reviews-all-link:focus-visible { border-color: rgba(224, 178, 118, 0.62); color: var(--ivory); } .reviews-all-link:hover span, .reviews-all-link:focus-visible span { transform: translate3d(2px, -2px, 0); } .testimonial-orbit { position: absolute; inset: 0; } .testimonial { position: absolute; width: min(20vw, 260px); margin: 0; padding: clamp(0.75rem, 1.2vw, 1.1rem); border-color: rgba(224, 178, 118, 0.055); border-radius: 6px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.018), transparent 60%), rgba(10, 8, 7, 0.44); box-shadow: 0 18px 55px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.012); backdrop-filter: blur(14px); cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; } .testimonial:hover { border-color: rgba(224, 178, 118, 0.18); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.018); } .testimonial blockquote { margin: 0.65rem 0 0.9rem; color: rgba(241, 237, 229, 0.78); font-size: clamp(0.7rem, 0.82vw, 0.8rem); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .testimonial figcaption { padding-top: 0.65rem; border-color: rgba(255, 255, 255, 0.055); } .testimonial .stars { color: rgba(213, 164, 102, 0.76); font-size: 0.55rem; letter-spacing: 0.22em; } .scene-reviews .testimonial { position: absolute !important; } /* ── Review modal ────────────────────────────────────── */ .review-modal-backdrop { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; background: rgba(7, 6, 5, 0.72); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.22s; } .review-modal-backdrop.is-open { opacity: 1; pointer-events: all; } .review-modal-card { position: relative; width: min(90vw, 520px); max-height: min(92vh, 720px); margin: 0; padding: clamp(1.6rem, 3vw, 2.4rem); border: 1px solid rgba(224, 178, 118, 0.18); border-radius: 8px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.024), transparent 60%), rgba(12, 10, 8, 0.92); box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5); backdrop-filter: blur(20px); display: flex; flex-direction: column; overflow: clip; } .review-modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: 1px solid rgba(224, 178, 118, 0.22); border-radius: 50%; width: 2rem; height: 2rem; color: rgba(241, 237, 229, 0.6); font-size: 0.75rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, color 0.15s; } .review-modal-close:hover { border-color: rgba(224, 178, 118, 0.6); color: var(--amber-light); } .review-modal-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .review-modal-content.is-switching { animation: modal-switch 0.28s ease both; } .review-modal-content.is-navigating { animation: modal-nav 0.15s ease both; } @keyframes modal-switch { 0% { opacity: 1; transform: translateY(0); } 35% { opacity: 0; transform: translateY(-10px); } 36% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes modal-nav { 0% { opacity: 1; } 30% { opacity: 0; } 70% { opacity: 0; } 100% { opacity: 1; } } .review-modal-mode-label { display: inline-block; align-self: flex-start; margin-bottom: 0.9rem; margin-left: -0.65em; padding: 0.25em 0.65em; border-radius: 3px; background: transparent; color: rgba(213, 164, 102, 0.52); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; transition: background 0.18s, color 0.18s; } .review-modal-mode-label.is-featured { background: var(--amber); color: rgba(20, 14, 8, 0.88); } .review-modal-stars { color: rgba(213, 164, 102, 0.82); font-size: 0.7rem; letter-spacing: 0.22em; margin-bottom: 1rem; flex-shrink: 0; } .review-modal-text { margin: 0 0 1.4rem; color: rgba(241, 237, 229, 0.85); font-size: clamp(0.88rem, 1.2vw, 1rem); line-height: 1.72; overflow-y: auto; flex: 1 1 auto; min-height: 0; scrollbar-width: thin; scrollbar-color: rgba(224, 178, 118, 0.3) transparent; } .review-modal-card figcaption { padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.07); display: flex; flex-direction: column; gap: 0.25rem; flex-shrink: 0; } .review-modal-name { color: var(--ivory); font-size: 0.82rem; font-weight: 500; } .review-modal-date { color: rgba(241, 237, 229, 0.42); font-size: 0.72rem; letter-spacing: 0.04em; } .review-modal-source { display: inline-block; flex-shrink: 0; margin-top: 0.9rem; color: rgba(213, 164, 102, 0.72); font-size: 0.72rem; letter-spacing: 0.03em; text-decoration: underline; text-underline-offset: 3px; transition: color 0.15s; } .review-modal-source:hover { color: var(--amber-light); } .review-modal-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.07); flex-shrink: 0; } .review-modal-prev, .review-modal-next { background: none; border: 1px solid rgba(224, 178, 118, 0.22); border-radius: 50%; width: 2.2rem; height: 2.2rem; color: rgba(241, 237, 229, 0.6); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, color 0.15s; } .review-modal-prev:hover, .review-modal-next:hover { border-color: rgba(224, 178, 118, 0.6); color: var(--amber-light); } .review-modal-counter { color: rgba(241, 237, 229, 0.36); font-size: 0.72rem; letter-spacing: 0.08em; } /* "Zobraziť všetkých 49 recenzií" — button styled ako link (pod kartičkami) */ .reviews-show-all-btn { background: none; border: none; border-bottom: 1px solid rgba(224, 178, 118, 0.34); padding: 0 0 0.38rem; cursor: pointer; } /* "Zobraziť všetkých 49 recenzií" — v modali */ .review-modal-show-all { display: block; width: fit-content; margin: 1rem auto 0; background: none; border: none; border-bottom: 1px solid rgba(224, 178, 118, 0.34); padding: 0 0 0.3rem; color: rgba(241, 237, 229, 0.6); font-size: 0.72rem; letter-spacing: 0.03em; cursor: pointer; flex-shrink: 0; transition: color 0.15s, border-color 0.15s; } .review-modal-show-all:hover { color: var(--amber-light); border-color: rgba(224, 178, 118, 0.62); } .review-one { top: 61%; left: var(--page-pad); opacity: 0.82; } .review-two { top: 27%; right: var(--page-pad); } .review-three { right: var(--page-pad); bottom: auto; } .scene-contact { align-items: end; justify-items: center; padding-bottom: clamp(1rem, 5vh, 5rem); } .contact-overlay { display: grid; gap: 1rem clamp(1.5rem, 3vw, 3.5rem); grid-template-columns: minmax(250px, 0.8fr) minmax(300px, 1fr) auto; align-items: end; width: min(1180px, 100%); padding: clamp(1rem, 2vw, 1.6rem); border: 1px solid rgba(224, 178, 118, 0.2); background: linear-gradient(120deg, rgba(94, 58, 28, 0.18), transparent 46%), rgba(7, 6, 5, 0.72); box-shadow: 0 24px 90px rgba(0, 0, 0, 0.55); backdrop-filter: blur(22px); } .contact-overlay .eyebrow { margin-bottom: 0.6rem; } .contact-overlay h2 { font-size: clamp(2.5rem, 4vw, 4.8rem); } .contact-copy { margin: 0; font-size: clamp(0.9rem, 1.2vw, 1.08rem); line-height: 1.75; } .button-large { min-width: 240px; margin-top: 0; } .stage-rail { position: absolute; right: 1.35rem; bottom: 2.25rem; z-index: 12; width: 1px; height: 22vh; background: rgba(255, 255, 255, 0.13); } .stage-rail span { position: absolute; top: 0; left: -1px; width: 3px; height: 20%; background: var(--amber-light); box-shadow: 0 0 12px rgba(224, 178, 118, 0.4); transform: translateY(calc(var(--story-progress, 0) * 400%)); will-change: transform; } @media (max-width: 1100px) { .story { display: block; } .cinematic-stage { height: 100vh; height: 100svh; } .scene-copy, .scene-pricing .scene-copy { width: min(48vw, 560px); } .lesson-note { width: min(28vw, 290px); } .testimonial { width: min(27vw, 290px); } .contact-overlay { grid-template-columns: 0.8fr 1fr; } .contact-overlay .button { grid-column: 2; width: 100%; } } @media (max-width: 760px) { .story { display: block; height: 660vh; min-height: 3840px; } .cinematic-stage { position: sticky; top: 0; height: 100vh; height: 100svh; border: 0; } .stage-chrome { top: 18px; right: 20px; left: 20px; } .guitar-camera { width: 56.36vh; height: 100vh; } .cinematic-scene { min-height: 0; padding: 4.75rem var(--page-pad) 0.5rem; } .cinematic-scene h2 { font-size: clamp(2.7rem, 13vw, 4.3rem); } .scene-copy, .scene-pricing .scene-copy { width: 100%; } .scene-about { align-items: start; justify-items: stretch; } .scene-about .scene-copy, .scene-pricing .scene-copy { margin: 0; padding: 1.25rem; border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(8, 7, 6, 0.78); backdrop-filter: blur(12px); } .eyebrow { margin-bottom: 0.65rem; } .section-intro { margin-top: 1rem; font-size: 0.84rem; line-height: 1.6; } .feature-list { margin-top: 1rem; } .feature-list li { padding: 0.55rem 0; font-size: 0.7rem; } .lessons-heading { max-width: 100%; } .lessons-heading h2 { max-width: 90%; font-size: clamp(2.4rem, 11vw, 3.7rem); } .lesson-note { width: calc(50% - 1.6rem); padding: 0.9rem; } .lesson-note h3 { margin-top: 0.65rem; font-size: 0.8rem; } .lesson-note p { font-size: 0.64rem; line-height: 1.45; } .note-left { top: auto; bottom: 1.25rem; left: 1.25rem; } .note-right { top: auto; right: 1.25rem; bottom: 1.25rem; } .note-bottom { display: none; } .scene-pricing { align-items: start; } .pricing-grid { gap: 0.35rem; margin-top: 0.65rem; } .price-card { min-height: 0; padding: 0.65rem 0.9rem; } .price-card > p { margin-bottom: 0.35rem; font-size: 0.52rem; } .price-card strong { font-size: 1.85rem; } .price-card > span { font-size: 0.56rem; } .reviews-heading h2 { font-size: 2.3rem; } .reviews-heading { top: 14vh; left: 1.25rem; width: calc(100vw - 2.5rem); } .review-stats { gap: 0.55rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0.9rem; max-width: 310px; } .review-stats span { min-width: 0; padding: 0; font-size: 0.42rem; } .review-stats strong { font-size: 0.76rem; } .reviews-all-link { margin-top: 0.85rem; font-size: 0.58rem; } .testimonial { width: min(39vw, 152px); padding: 0.78rem 0.8rem; } .testimonial blockquote { margin: 0.55rem 0 0.65rem; font-size: 0.64rem; } .testimonial figcaption { padding-top: 0.5rem; } .testimonial figcaption span { font-size: 0.63rem; } .testimonial figcaption small { font-size: 0.5rem; } .review-one { top: 53%; left: 1.25rem; } .review-two { top: 47%; right: 1.25rem; } .review-three { right: auto; bottom: 1.25rem; left: 1.25rem; } .contact-overlay { gap: 0.9rem; grid-template-columns: 1fr; padding: 1.2rem; } .contact-overlay h2 { font-size: 2.8rem; } .contact-overlay .contact-copy { font-size: 0.78rem; } .contact-overlay .button { grid-column: auto; min-width: 0; } .stage-rail { right: 0.65rem; bottom: 1.5rem; height: 18vh; } } @media (prefers-reduced-motion: reduce) { .guitar-camera, .cinematic-scene { will-change: auto; } } /* ========================================================= FINÁLNE TEXTY — doplnkové štýly Hero podnadpis + CTA, scéna Ako to prebieha, 3. cenová karta, rozšírené recenzie, kontaktný formulár. ========================================================= */ /* --- Hero podnadpis + akcie --- */ .hero-subtitle { max-width: 640px; margin: 1.6rem 0 0; color: rgba(241, 237, 229, 0.82); font-size: clamp(1rem, 1.5vw, 1.22rem); line-height: 1.7; text-wrap: balance; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; justify-content: center; margin-top: 2.4rem; } .button-ghost { background: rgba(12, 10, 8, 0.4); } /* --- Scéna 2: Ako to prebieha / Pre koho --- */ .scene-lessons { align-content: center; align-items: start; justify-items: stretch; grid-template-rows: auto auto; gap: clamp(1.2rem, 3vh, 2.4rem); } .lessons-columns { display: grid; gap: clamp(1.5rem, 4vw, 4rem); grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .lessons-columns .lessons-col:last-child { text-align: right; } .lessons-columns .lessons-col:last-child .feature-list { max-width: 460px; margin-left: auto; } .lessons-columns .lessons-col:first-child .feature-list { max-width: 460px; } .lessons-columns .lessons-col:last-child .feature-list li { flex-direction: row-reverse; justify-content: flex-start; } .lessons-col-title { margin: 0.45rem 0 0; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 3.8rem); font-weight: 400; line-height: 1.1; } .lessons-col .feature-list { margin-top: clamp(1rem, 2vh, 1.6rem); } .lessons-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); width: 100%; } .lessons-video { display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .lessons-videos .lessons-video:last-child { align-items: flex-end; text-align: right; } .lessons-video-intro { max-width: 620px; margin: 0 0 0.9rem; color: var(--muted); font-size: clamp(0.84rem, 1vw, 0.98rem); line-height: 1.6; } .lessons-video-frame { display: flex; align-items: center; justify-content: center; width: 50%; aspect-ratio: 16 / 9; border: 2px solid rgba(224, 178, 118, 0.9); border-radius: 8px; background: linear-gradient(135deg, rgba(94, 58, 28, 0.16), transparent 55%), rgba(9, 7, 6, 0.72); box-shadow: 0 0 0 1px rgba(224, 178, 118, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04); } /* ── Inline video thumbnails ── */ .lessons-video--inline { width: 100%; margin-top: clamp(1.5rem, 3vh, 2.5rem); } .lessons-video--right { align-items: flex-end; text-align: right; } .lessons-video--right .lessons-video-intro { text-align: right; } .lessons-video-thumb { width: 50%; position: relative; overflow: hidden; cursor: pointer; background: none; border: 1px solid rgba(224, 178, 118, 0.7); border-radius: 8px; padding: 0; display: block; text-align: left; } .lessons-video-thumb:focus-visible { outline: 2px solid rgba(224, 178, 118, 0.6); outline-offset: 3px; } .lessons-video-poster-gen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 7px; display: block; pointer-events: none; } .lessons-video-play-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.9); pointer-events: none; transition: transform 0.15s ease, opacity 0.15s ease; } .lessons-video-play-btn svg { filter: drop-shadow(0 2px 12px rgba(0,0,0,0.7)); width: clamp(28px, 3vw, 44px); height: clamp(28px, 3vw, 44px); } .lessons-video-thumb:hover .lessons-video-play-btn { transform: scale(1.12); } /* ── Video modal ── */ .video-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; } .video-modal[hidden] { display: none; } .video-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; } .video-modal-inner { position: relative; z-index: 1; width: min(92vw, 160vh); aspect-ratio: 16 / 9; } .video-modal-player { width: 100%; height: 100%; border-radius: 10px; display: block; background: #000; box-shadow: 0 24px 80px rgba(0,0,0,0.7); } .video-modal-close { position: absolute; top: -2.6rem; right: 0; background: none; border: none; color: rgba(255,255,255,0.7); cursor: pointer; padding: 0.3rem; line-height: 0; transition: color 0.15s ease; } .video-modal-close:hover { color: #fff; } .video-modal-close svg { width: 22px; height: 22px; } .lessons-video-placeholder { color: var(--muted-dark); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; } /* --- Scéna 3: tretia cenová karta + poznámky --- */ .pricing-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } .price-card .price-note { display: block; margin-top: 0.8rem; color: var(--amber-light); font-size: 0.66rem; font-style: normal; letter-spacing: 0.04em; } .price-card-soft { background: rgba(12, 10, 8, 0.5); } .price-card-soft strong { font-size: clamp(1.5rem, 2.4vw, 2.4rem); } .pricing-footnote { margin: clamp(1.1rem, 2.5vh, 1.8rem) 0 0; color: var(--muted); font-size: 0.82rem; letter-spacing: 0.01em; } /* --- Scéna 4: rozšírené recenzie (5 desktop / 3 mobil) --- */ .reviews-links { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.15rem; } .reviews-links .reviews-all-link, .reviews-links .reviews-show-all-btn { margin-top: 0; } /* * Filmová scéna má priestor na 3 čisto rozmiestnené karty. * Recenzie 4 a 5 sú dostupné cez odkaz „Nové recenzie na Google". * Skryjeme ich, aby sa karty neprekrývali. */ /* Ľavá strana: review-one (hore) + review-two (dole) */ .review-one { top: auto; bottom: 32vh; left: var(--page-pad); right: auto; opacity: 0.82; } .review-two { top: auto; bottom: 8vh; left: var(--page-pad); right: auto; } /* Pravá strana: review-three (hore) + review-four (stred) + review-five (dole) */ .review-three { top: 14vh; right: var(--page-pad); bottom: auto; } .review-four { top: 41vh; right: var(--page-pad); bottom: auto; } .review-five { top: 68vh; bottom: auto; right: var(--page-pad); } /* --- Scéna 5: kontaktný formulár --- */ .scene-contact .contact-overlay { grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1fr); align-items: start; } .contact-intro .section-title { font-size: clamp(2.3rem, 3.6vw, 4.2rem); } .contact-intro .contact-copy { margin-top: 1rem; } .contact-details { display: grid; gap: 0.35rem; margin: 1rem 0 0; padding: 0; list-style: none; } .contact-details li { display: grid; grid-template-columns: 80px 1fr; gap: 0.5rem; align-items: baseline; font-size: 0.8rem; } .contact-label { color: var(--muted-dark); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; } .contact-details a { color: var(--ivory); border-bottom: 1px solid rgba(224, 178, 118, 0.3); transition: border-color 200ms ease, color 200ms ease; } .contact-details a:hover { border-color: rgba(224, 178, 118, 0.7); color: var(--amber-light); } .contact-form { display: grid; gap: 0.55rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; } .form-row--three { grid-template-columns: 1fr 1fr 1fr; } .form-field { display: grid; gap: 0.28rem; } .form-field label { display: inline-flex; align-items: baseline; gap: 0.4rem; color: var(--muted); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .form-optional { color: var(--muted-dark); text-transform: none; letter-spacing: 0.02em; } .form-field-error { color: #e07070; font-size: 0.68rem; letter-spacing: 0.04em; text-transform: none; font-style: italic; } .contact-form input, .contact-form textarea { width: 100%; padding: 0.55rem 0.75rem; border: 1px solid rgba(224, 178, 118, 0.32); border-radius: 5px; background: rgba(4, 3, 3, 0.45); color: var(--ivory); font-family: var(--font-body); font-size: 0.88rem; transition: border-color 200ms ease, background 200ms ease; } .contact-form textarea { resize: vertical; min-height: 72px; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: rgba(224, 178, 118, 0.65); background: rgba(12, 10, 8, 0.85); } .contact-form .button-large { min-width: 0; width: 100%; margin-top: 0.4rem; padding: 0.9rem 1.5rem; border-color: rgba(224, 178, 118, 0.6); background: linear-gradient(110deg, rgba(180, 110, 40, 0.75), rgba(140, 85, 30, 0.85)); color: var(--ivory); font-size: 0.84rem; box-shadow: 0 4px 24px rgba(180, 102, 37, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1); } @media (max-width: 1100px) { .scene-contact .contact-overlay { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); } .scene-contact .contact-overlay .button { grid-column: auto; } } /* --- Mobil (≤760px) --- */ @media (max-width: 760px) { .hero-subtitle { margin-top: 1.1rem; font-size: 0.92rem; } .hero-actions { flex-direction: column; gap: 0.7rem; margin-top: 1.6rem; width: 100%; } .hero-actions .button { width: 100%; min-width: 0; } .scene-lessons { align-content: start; } .lessons-columns { grid-template-columns: 1fr; gap: 1.1rem; width: 100%; padding: 1.1rem; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 8px; background: rgba(8, 7, 6, 0.8); backdrop-filter: blur(12px); } .lessons-col-title { font-size: clamp(1.9rem, 8vw, 2.8rem); } .lessons-col .feature-list li { padding: 0.4rem 0; font-size: 0.64rem; } .lessons-videos { grid-template-columns: 1fr; } .pricing-grid-three { grid-template-columns: 1fr; gap: 0.5rem; } .price-card-soft strong { font-size: 1.5rem; } .price-card .price-note { margin-top: 0.5rem; font-size: 0.56rem; } .pricing-footnote { font-size: 0.66rem; } .reviews-links { gap: 0.9rem; margin-top: 0.85rem; } .contact-details { margin-top: 1rem; gap: 0.4rem; } .contact-details li { grid-template-columns: 78px 1fr; font-size: 0.74rem; } .contact-form { gap: 0.55rem; } .contact-form input, .contact-form textarea { padding: 0.6rem 0.7rem; font-size: 0.82rem; } .contact-form textarea { min-height: 60px; } .scene-contact .contact-overlay { grid-template-columns: 1fr; width: 100%; } .contact-copy { display: none; } .contact-form .button-large { padding: 0.55rem 1.5rem !important; margin-top: 0.2rem !important; min-height: 0 !important; } .contact-form { gap: 0.5rem; } .contact-form .form-field { gap: 0.25rem; } .contact-form input, .contact-form textarea { padding: 0.5rem 0.7rem; font-size: 0.85rem; } .contact-form textarea { min-height: 4rem; } /* Formulár: všetky polia pod sebou */ .form-row, .form-row--three { grid-template-columns: 1fr; } /* Lessons: pravý stĺpec nemá right-align na mobile */ .lessons-columns .lessons-col:last-child { text-align: left; } .lessons-columns .lessons-col:last-child .feature-list li { flex-direction: row; justify-content: flex-start; } .lessons-columns .lessons-col:last-child .feature-list { margin-left: 0; } /* Video thumbnaily väčšie na mobile */ .lessons-video-thumb, .lessons-video-frame { width: 100%; max-width: 320px; } .lessons-video--right { align-items: flex-start; text-align: left; } .lessons-video--right .lessons-video-intro { text-align: left; } /* Kartičky — vyššia čitateľnosť */ .scene-about .scene-copy, .scene-pricing .scene-copy { background: rgba(8, 7, 6, 0.88); backdrop-filter: blur(18px); } .lessons-columns { background: rgba(8, 7, 6, 0.88); backdrop-filter: blur(18px); } /* Hamburger tlačidlo */ .hamburger-btn { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; padding: 4px; background: none; border: none; cursor: pointer; z-index: 1001; position: relative; } .hamburger-btn span { display: block; width: 22px; height: 2px; background: var(--ivory); border-radius: 2px; transition: transform 0.25s, opacity 0.25s; } .hamburger-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .hamburger-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile menu overlay */ .mobile-menu { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; position: fixed; inset: 0; z-index: 999; background: rgba(8, 7, 6, 0.97); backdrop-filter: blur(20px); opacity: 0; pointer-events: none; transition: opacity 0.25s; } .mobile-menu[aria-hidden="false"] { opacity: 1; pointer-events: auto; } .mobile-menu nav { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; } .mobile-menu nav a { position: relative; color: rgba(241, 237, 229, 0.55); font-family: var(--font-display); font-size: clamp(1.5rem, 6.5vw, 2rem); font-weight: 400; text-decoration: none; letter-spacing: 0.02em; transition: color 0.2s; } .mobile-menu nav a::after { content: ""; position: absolute; bottom: -3px; left: 0; right: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform 0.25s ease; } .mobile-menu nav a:hover { color: var(--ivory); } .mobile-menu nav a:hover::after { transform: scaleX(1); transform-origin: left; } .mobile-menu .button { padding-top: 0.65rem; padding-bottom: 0.65rem; width: 100%; max-width: 260px; text-align: center; justify-content: center; } /* Schovaj header-cta na mobile */ .site-header .header-cta { display: none; } /* Schovaj recenzie 4 a 5 na mobile */ .review-desktop-only { display: none !important; } /* Recenzie + Kontakt — scrollovateľné scény na mobile */ .scene-reviews, .scene-contact { overflow-y: auto !important; display: block !important; padding: 4.5rem var(--page-pad) 2rem !important; } .reviews-heading { position: relative !important; top: auto !important; left: auto !important; width: 100%; padding: 0.7rem 1rem; margin-bottom: 0; background: rgba(8, 7, 6, 0.88); backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, 0.085); border-radius: 10px; } .reviews-heading h2 { font-size: 1.9rem !important; margin-bottom: 0.3rem; } .review-stats { gap: 0.4rem; margin-top: 0.5rem; } .reviews-links { margin-top: 0.5rem; } .testimonial-orbit { position: relative !important; inset: auto !important; display: flex; flex-direction: column; gap: 0.35rem; } .testimonial, .scene-reviews .testimonial { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; padding: 0.65rem 0.9rem; opacity: 1 !important; background: rgba(8, 7, 6, 0.88); backdrop-filter: blur(18px); } .scene-reviews .testimonial blockquote { margin: 0.4rem 0 0.5rem; font-size: 0.72rem; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .scene-reviews .testimonial .stars { font-size: 0.6rem; } .scene-reviews .testimonial figcaption { padding-top: 0.4rem; } .scene-reviews .testimonial figcaption span { font-size: 0.7rem; } /* Mobilné parallax — gitara: zakáz rotácie, fixná scale */ .guitar-camera { transform: translate3d( calc(-50% + var(--camera-x, 0px)), calc(-50% + var(--mobile-guitar-y, 0px)), 0 ) scale(1.15); transition: none; } } /* =========================================================================== KONTAKTNÝ FORMULÁR — honeypot + stavová správa (potvrdenie / chyba) =========================================================================== */ /* Honeypot: úplne skryté pole proti botom (nepoužívame display:none, aby ho niektoré boty nepreskočili, ale je mimo obrazovky a neprístupné) */ .form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-status { margin: 0.4rem 0 0; padding: 0.85rem 1rem; border: 1px solid transparent; border-radius: 6px; font-size: 0.84rem; line-height: 1.55; } .form-status.is-success { border-color: rgba(224, 178, 118, 0.4); background: rgba(94, 58, 28, 0.22); color: var(--ivory); } .form-status.is-error { border-color: rgba(210, 120, 95, 0.5); background: rgba(120, 45, 35, 0.22); color: #f3d9d0; } .contact-form .button.is-sending { opacity: 0.65; pointer-events: none; } /* --- Call button: mobile = tel link, desktop = reveal number --- */ .call-desktop { display: none; cursor: pointer; font: inherit; color: inherit; appearance: none; -webkit-appearance: none; } .call-mobile { display: inline-flex; } .call-number-reveal { display: inline-flex; align-items: center; font-size: 1rem; font-weight: 600; letter-spacing: 0.03em; color: var(--amber-light, #e0b276); background: rgba(12, 10, 8, 0.55); border: 1px solid rgba(224, 178, 118, 0.35); border-radius: 0.5rem; padding: 0.5rem 1rem; margin-left: 0.5rem; opacity: 0; transform: translateX(-6px); transition: opacity 0.22s ease, transform 0.22s ease; pointer-events: none; } .call-number-reveal:not([hidden]) { opacity: 1; transform: translateX(0); pointer-events: auto; pointer-events: auto; } .call-number-reveal a { color: inherit; text-decoration: none; } .call-number-reveal a:hover { text-decoration: underline; } @media (min-width: 768px) { .call-mobile { display: none !important; } .call-desktop { display: inline-flex; } .scene-lessons-mobile-1, .scene-lessons-mobile-2 { display: none !important; } } @media (max-width: 760px) { .scene-lessons-desktop { display: none !important; } }