/* ============================================================ AMusA Piano — Illustrated Course Shared stylesheet ============================================================ */ :root{ --paper:#F8F5ED; --paper-2:#FFFDF7; --ink:#1F2430; --ink-2:#3A4150; --dim:#6B7280; --line:#E4DFD0; --line-2:#CFC8B4; --bach:#3D6FA8; --bach-bg:#EAF1F8; --haydn:#C8962E; --haydn-bg:#FBF2DE; --chopin:#A64E86; --chopin-bg:#F8ECF3; --bartok:#C7502F; --bartok-bg:#FBEEE8; --general:#3E8A6E; --general-bg:#EAF4EE; --serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif; --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace; --accent:var(--general); --accent-bg:var(--general-bg); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; } /* ---- theme per page (set on ) ---- */ body.theme-bach{--accent:var(--bach);--accent-bg:var(--bach-bg)} body.theme-haydn{--accent:var(--haydn);--accent-bg:var(--haydn-bg)} body.theme-chopin{--accent:var(--chopin);--accent-bg:var(--chopin-bg)} body.theme-bartok{--accent:var(--bartok);--accent-bg:var(--bartok-bg)} body.theme-general{--accent:var(--general);--accent-bg:var(--general-bg)} /* ---- navigation ---- */ .nav{ position:sticky; top:0; z-index:50; background:rgba(248,245,237,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); } .nav-inner{ max-width:1040px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .nav-brand{ font-family:var(--serif); font-weight:700; font-size:16px; letter-spacing:.01em; color:var(--ink); text-decoration:none; margin-right:10px; white-space:nowrap; } .nav-brand small{color:var(--dim); font-weight:400; font-family:var(--sans)} .nav a.pill{ text-decoration:none; color:var(--ink-2); font-size:13.5px; font-weight:600; padding:6px 12px; border-radius:999px; border:1px solid transparent; transition:.15s; } .nav a.pill:hover{background:var(--line); border-color:var(--line-2)} .nav a.pill.active{background:var(--accent); color:#fff} .nav a.pill.home{color:var(--dim)} .nav a.pill.home:hover{color:var(--ink)} /* ---- layout ---- */ .wrap{max-width:1040px; margin:0 auto; padding:0 20px 96px} .hero{ padding:40px 20px 34px; color:#fff; background: radial-gradient(120% 180% at 85% 0%, rgba(255,255,255,.16), rgba(255,255,255,0) 55%), var(--accent); } .hero .wrap{padding-bottom:0} .kicker{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; opacity:.85; margin:0 0 12px; } .hero h1{ font-family:var(--serif); font-weight:700; font-size:clamp(30px,5.4vw,46px); line-height:1.08; margin:0 0 10px; letter-spacing:-.01em; } .hero .sub{font-size:17px; opacity:.94; margin:0; max-width:60ch} .hero .facts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; } .hero .fact{ background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:6px 14px; font-size:13.5px; font-weight:600; } /* ---- sections ---- */ section{margin-top:44px} h2{ font-family:var(--serif); font-weight:700; font-size:clamp(23px,3.4vw,30px); margin:0 0 6px; letter-spacing:-.01em; } h2 .num{ display:inline-block; min-width:34px; height:34px; line-height:34px; text-align:center; background:var(--accent); color:#fff; border-radius:10px; font-size:17px; font-family:var(--sans); margin-right:12px; vertical-align:2px; } h3{font-family:var(--serif); font-size:21px; margin:26px 0 8px; font-weight:700} .lede{color:var(--ink-2); max-width:70ch; margin:0 0 8px} /* ---- cards grid ---- */ .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:18px} .card{ background:var(--paper-2); border:1px solid var(--line); border-radius:16px; padding:20px 22px; box-shadow:0 1px 2px rgba(0,0,0,.03); } .card h4{margin:0 0 8px; font-size:16.5px; font-weight:700} .card p{margin:0; color:var(--ink-2); font-size:15.5px} .card .tag{ display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:8px; } /* ---- callouts ---- */ .callout{ border-radius:14px; padding:18px 20px; margin-top:18px; font-size:15.5px; border:1px solid var(--line); background:var(--accent-bg); } .callout b.t{display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:6px} .callout p{margin:0; color:var(--ink-2)} .callout.wow{background:#FFF8E6; border-color:#F0E2B8} .callout.wow b.t{color:#B07D10} .callout.listen{background:#EAF2FB; border-color:#C8D9EC} .callout.listen b.t{color:#2F6396} .callout.try{background:#EFF7EF; border-color:#CBE3CF} .callout.try b.t{color:#2E7D44} /* ---- quote ---- */ blockquote{ margin:20px 0; padding:16px 22px; border-left:4px solid var(--accent); background:var(--paper-2); border-radius:0 12px 12px 0; font-family:var(--serif); font-size:19px; font-style:italic; color:var(--ink-2); } blockquote cite{display:block; font-style:normal; font-family:var(--sans); font-size:13px; color:var(--dim); margin-top:8px} /* ---- figure / illustration ---- */ figure{margin:22px 0; text-align:center} figure svg{max-width:100%; height:auto} figcaption{font-size:13px; color:var(--dim); margin-top:10px; text-align:center; max-width:70ch; margin-left:auto; margin-right:auto} .svg-card{ background:var(--paper-2); border:1px solid var(--line); border-radius:16px; padding:18px; margin-top:18px; } /* ---- tables ---- */ table{width:100%; border-collapse:collapse; margin-top:16px; font-size:15px; background:var(--paper-2); border:1px solid var(--line); border-radius:12px; overflow:hidden} th,td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top} th{background:var(--accent); color:#fff; font-size:13px; letter-spacing:.03em} tr:last-child td{border-bottom:none} tr:nth-child(even) td{background:#FBFAF5} td b{color:var(--ink)} /* ---- glossary ---- */ .glossary{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; margin-top:16px} .term{background:var(--paper-2); border:1px solid var(--line); border-radius:12px; padding:12px 16px; font-size:14.5px} .term b{color:var(--accent); font-family:var(--serif); font-size:16px} .term span{color:var(--ink-2)} /* ---- quiz ---- */ .quiz{margin-top:16px} .qa{background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:16px 20px; margin-bottom:14px} .qa .q{font-weight:700; margin:0 0 10px; font-size:16px} .qa .q::before{content:"?"; display:inline-block; width:24px; height:24px; line-height:24px; text-align:center; background:var(--accent); color:#fff; border-radius:50%; margin-right:10px; font-size:14px} .qa .a{color:var(--ink-2); font-size:15px; display:none; border-top:1px dashed var(--line-2); padding-top:12px; margin:0} .qa button{ font-family:inherit; font-size:13.5px; font-weight:600; cursor:pointer; background:transparent; color:var(--accent); border:1.5px solid var(--accent); border-radius:999px; padding:6px 16px; margin-top:4px; transition:.15s; } .qa button:hover{background:var(--accent); color:#fff} /* ---- listen / media ---- */ .media{margin-top:16px} .media .frame{ position:relative; width:100%; padding-top:56.25%; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#111; } .media iframe{position:absolute; inset:0; width:100%; height:100%; border:0} .media .links{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px} .media a.btn{ text-decoration:none; font-size:14px; font-weight:600; padding:9px 16px; border-radius:999px; border:1.5px solid var(--accent); color:var(--accent); transition:.15s; } .media a.btn:hover{background:var(--accent); color:#fff} /* ---- what to listen for checklist ---- */ .listen-list{list-style:none; padding:0; margin:10px 0 0} .listen-list li{ padding:9px 0 9px 34px; position:relative; color:var(--ink-2); font-size:15.5px; border-bottom:1px solid var(--line); } .listen-list li:last-child{border-bottom:none} .listen-list li::before{ content:"🎧"; position:absolute; left:0; top:9px; font-size:16px; } /* ---- prose ---- */ p.lead{font-size:18px; color:var(--ink-2)} ul.plain{margin:8px 0 0; padding-left:22px} ul.plain li{margin-bottom:7px; color:var(--ink-2)} strong{color:var(--ink)} /* ---- timeline ---- */ .timeline{position:relative; margin-top:20px} .tl-item{display:flex; gap:16px; padding:10px 0; border-bottom:1px solid var(--line)} .tl-item:last-child{border-bottom:none} .tl-year{flex:none; font-family:var(--mono); font-weight:700; font-size:14px; color:var(--accent); min-width:74px; padding-top:2px} .tl-body{font-size:15px; color:var(--ink-2)} /* ---- footer ---- */ footer{ border-top:1px solid var(--line); margin-top:64px; padding:28px 0 0; font-size:13.5px; color:var(--dim); } footer .note{max-width:80ch} footer a{color:var(--accent)} /* ---- buttons / next ---- */ .pager{display:flex; justify-content:space-between; gap:14px; margin-top:56px; flex-wrap:wrap} .pager a{ text-decoration:none; display:flex; align-items:center; gap:10px; background:var(--paper-2); border:1.5px solid var(--line-2); border-radius:14px; padding:14px 20px; color:var(--ink); font-weight:600; transition:.15s; } .pager a:hover{border-color:var(--accent); color:var(--accent)} .pager a.next{background:var(--accent); border-color:var(--accent); color:#fff} .pager a.next:hover{filter:brightness(1.06)} .pager .dir{font-family:var(--mono); font-size:12px; opacity:.7; display:block} @media (max-width:640px){ body{font-size:16px} .hero h1{font-size:30px} .nav-inner{gap:4px} table{font-size:14px} th,td{padding:8px 10px} }