/* ============================================================================ Páginas de instrumento — base estrutural compartilhada. Tema por classe no : .t-violao, .t-piano, .t-bateria, .t-musicalizacao, .t-teoria — cada uma define as CSS vars abaixo. Âncoras da marca (tipografia, header/footer/contact) vêm de styles.css. ============================================================================ */ .curso { background: var(--c-bg); color: var(--c-ink); } /* ---- tema: violão & guitarra (madeira & âmbar) ---- */ .t-violao { --c-bg: #241407; --c-bg2: #2b1a0d; --c-bg3: #1b0e05; --c-ink: #f3e4cd; --c-muted: #c9b394; --c-acc: #e8a34c; --c-acc-strong: #f5bd72; --c-line: rgba(243, 228, 205, 0.14); --c-soft: rgba(232, 163, 76, 0.12); } /* ---- cortina de transição ---- */ .curtain { position: fixed; inset: 0; z-index: 90; background: var(--c-bg); pointer-events: none; } /* ---- som ---- */ .sound-chip { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border: 1px solid var(--c-line); border-radius: 999px; background: color-mix(in srgb, var(--c-bg3) 82%, transparent); backdrop-filter: blur(10px); color: var(--c-muted); font: 700 10px "DM Sans", sans-serif; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: color .2s, border-color .2s; } .sound-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-muted); transition: background .2s, box-shadow .2s; } .sound-chip.on { color: var(--c-acc-strong); border-color: var(--c-acc); } .sound-chip.on i { background: var(--c-acc); box-shadow: 0 0 10px var(--c-acc); } /* ---- header sobre o hero ---- */ .curso .site-header { position: absolute; } /* ---- hero ---- */ .c-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; } .c-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .c-strings-fallback { position: absolute; inset: 0; display: none; } .c-hero.static canvas { display: none; } .c-hero.static .c-strings-fallback { display: block; } .c-strings-fallback i { position: absolute; left: -4%; right: -4%; height: 1.5px; background: var(--c-line); } .c-strings-fallback i:nth-child(-n+3) { background: var(--c-soft); } .c-hero-copy { position: relative; z-index: 2; padding: 150px 0 92px; max-width: 700px; } .c-crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; font-size: 11px; letter-spacing: .6px; color: var(--c-muted); } .c-crumbs a:hover { color: var(--c-ink); } .c-crumbs b { color: var(--c-acc); font-weight: 700; } .c-hero .overline { color: var(--c-acc); } .c-hero h1 { margin-top: 20px; font: 600 clamp(46px, 6.4vw, 92px)/0.92 "Cormorant Garamond", serif; letter-spacing: -2px; color: var(--c-ink); } .c-hero h1 i { font-weight: 700; color: var(--c-acc-strong); } .c-lead { max-width: 480px; margin: 26px 0 0; color: var(--c-muted); font-size: 15px; line-height: 1.75; } .c-hero .hero-actions { margin-top: 34px; display: flex; align-items: center; gap: 28px; } .c-hint { position: absolute; z-index: 2; right: max(40px, calc((100% - 1216px) / 2)); bottom: 92px; display: flex; align-items: center; gap: 10px; color: var(--c-muted); font-size: 9px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; } .c-hint span { width: 26px; height: 1px; background: var(--c-muted); } /* botão do tema */ .curso .button-copper { background: var(--c-acc); color: var(--c-bg3); } .curso .button-copper:hover { background: var(--c-acc-strong); } .curso .quiet-link { border-bottom-color: var(--c-line); color: var(--c-ink); } /* ---- seção: o que você aprende ---- */ .c-learn { position: relative; padding: 110px 0 104px; background: var(--c-bg2); } .c-learn::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(var(--c-line) 1px, transparent 1px); background-size: 100% 96px; pointer-events: none; } .c-learn .container { position: relative; } .c-learn .overline { color: var(--c-acc); } .c-learn h2 { max-width: 660px; margin-top: 18px; font: 600 clamp(38px, 4.6vw, 56px)/0.98 "Cormorant Garamond", serif; letter-spacing: -1.4px; color: var(--c-ink); } .c-learn h2 i { font-weight: 700; color: var(--c-acc-strong); } .c-learn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 64px; margin-top: 58px; } .c-learn-item { display: flex; gap: 20px; align-items: flex-start; } .c-learn-item > span { flex: none; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--c-line); border-radius: 50%; color: var(--c-acc); font: 600 13px "Cormorant Garamond", serif; } .c-learn-item b { display: block; font: 600 23px "Cormorant Garamond", serif; letter-spacing: -.3px; color: var(--c-ink); } .c-learn-item p { margin: 7px 0 0; color: var(--c-muted); font-size: 13px; line-height: 1.75; } /* ---- faixa: como funciona ---- */ .c-band { padding: 62px 0; background: var(--c-bg3); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); } .c-band .overline { color: var(--c-acc); } .c-band-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 44px; margin-top: 24px; } .c-band-cols b { display: block; font: 600 22px "Cormorant Garamond", serif; letter-spacing: -.3px; color: var(--c-ink); } .c-band-cols span { display: block; margin-top: 8px; color: var(--c-muted); font-size: 12.5px; line-height: 1.7; } /* ---- FAQ ---- */ .c-faq { padding: 104px 0 96px; background: var(--c-bg); } .c-faq .overline { color: var(--c-acc); } .c-faq h2 { margin-top: 18px; font: 600 clamp(34px, 4vw, 50px)/1 "Cormorant Garamond", serif; letter-spacing: -1.2px; color: var(--c-ink); } .c-faq h2 i { font-weight: 700; color: var(--c-acc-strong); } .c-faq-list { max-width: 740px; margin-top: 42px; border-top: 1px solid var(--c-line); } .c-faq-item { border-bottom: 1px solid var(--c-line); } .c-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 0; cursor: pointer; list-style: none; font: 600 21px "Cormorant Garamond", serif; letter-spacing: -.3px; color: var(--c-ink); } .c-faq-item summary::-webkit-details-marker { display: none; } .c-faq-item summary b { flex: none; color: var(--c-acc); font-size: 21px; font-weight: 400; transition: transform .25s; } .c-faq-item[open] summary b { transform: rotate(45deg); } .c-faq-item p { margin: 0 0 21px; max-width: 640px; color: var(--c-muted); font-size: 13.5px; line-height: 1.8; } /* ---- outras formações ---- */ .c-next { padding: 0 0 104px; background: var(--c-bg); } .c-next .overline { color: var(--c-acc); } .c-next-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .c-next-row a { display: inline-flex; align-items: center; gap: 8px; padding: 13px 19px; border: 1px solid var(--c-line); color: var(--c-ink); font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; transition: background .2s, color .2s, border-color .2s; } .c-next-row a:hover { background: var(--c-acc); border-color: var(--c-acc); color: var(--c-bg3); } .c-next-row a b { font-size: 15px; font-weight: 400; color: var(--c-acc); } .c-next-row a:hover b { color: var(--c-bg3); } @media (max-width: 820px) { .c-hero { min-height: 88svh; } .c-hero-copy { padding: 118px 0 78px; } .c-hero h1 { font-size: 44px; } .c-hint { display: none; } .c-learn { padding: 68px 0 60px; } .c-learn-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; } .c-band-cols { grid-template-columns: 1fr; gap: 26px; } .c-faq { padding: 64px 0 58px; } .c-faq-item summary { font-size: 18px; } .c-next { padding-bottom: 68px; } .sound-chip { right: 12px; bottom: 12px; padding: 10px 14px; } } /* ---- violão 3D girando com o scroll (telas largas) ---- */ .c-g3d { position: fixed; right: 0; top: 50%; transform: translateY(-50%); width: min(34vw, 560px); height: 80vh; z-index: 2; opacity: 0; pointer-events: none; display: none; } @media (min-width: 1200px) { .c-g3d { display: block; } }