/* ───────────────────────────────────────────────────────────────── IELTS — coffee-house aesthetic. Dark warm shell, cream typography, honey accents. Editorial layout with serif italic numerals as anchors. Lives only on /ielts/* routes (toggled by router.js via body class .has-ielts-nav). ───────────────────────────────────────────────────────────── */ /* Pre-paint dark bg for /ielts/* deep-links. The pre-route script in adds .is-ielts-init to before any HTML below paints, so the user never sees a cream-flash before route() applies the full IELTS theme. */ html.is-ielts-init, html.is-ielts-init body { background: #1B1410; color: #F2E6CC; } /* IELTS palette — applied to body when nav is up. Other surfaces keep the cream-default theme. */ body.has-ielts-nav { --ielts-bg: #1B1410; --ielts-bg-tint: #221913; --ielts-card: #2A1F17; --ielts-card-lift: #33271D; --ielts-ink: #F2E6CC; --ielts-ink-soft: #B6A484; --ielts-ink-mute: #7A6A52; --ielts-honey: #D9A268; --ielts-ember: #D86840; --ielts-line: rgba(242, 230, 204, .10); --ielts-line-strong: rgba(242, 230, 204, .18); background: var(--ielts-bg); color: var(--ielts-ink); padding-top: 76px; min-height: 100vh; } /* Atmosphere — warm spotlight from upper-left + paper grain. Together they sell the "coffee shop reading nook" feeling without a literal image. */ body.has-ielts-nav::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 90% 60% at 8% -10%, rgba(217, 162, 104, .12) 0%, rgba(217, 162, 104, 0) 60%), radial-gradient(ellipse 70% 50% at 100% 100%, rgba(216, 104, 64, .07) 0%, rgba(216, 104, 64, 0) 55%); } body.has-ielts-nav::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle at 1px 1px, rgba(242,230,204,.04) 1px, transparent 1.5px); background-size: 3px 3px; mix-blend-mode: overlay; } body.has-ielts-nav .course-shell, body.has-ielts-nav #course-body { position: relative; z-index: 1; } body.has-ielts-nav .course-shell { background: transparent; } /* Override the cream course-shell bg the rest of the app uses. */ body.has-ielts-nav .course-shell.is-active { background: transparent; color: var(--ielts-ink); } /* ── Top nav ──────────────────────────────────────────────────── */ .ielts-nav { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 100; align-items: center; gap: 2rem; padding: 1.1rem 2rem 1rem; background: linear-gradient(180deg, rgba(27, 20, 16, .92) 0%, rgba(27, 20, 16, .78) 100%); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--ielts-line, rgba(242,230,204,.10)); } body.has-ielts-nav .ielts-nav { display: flex; } /* Brand — italic serif wordmark with a thin honey rule beneath. */ .ielts-nav-brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .3rem; text-decoration: none; flex-shrink: 0; } .ielts-nav-brand-mark { font-family: 'Source Serif 4', 'Tiempos', Georgia, serif; font-style: italic; font-weight: 500; font-size: 1.35rem; letter-spacing: .015em; color: var(--ielts-ink, #F2E6CC); line-height: 1; } .ielts-nav-brand-rule { display: block; width: 28px; height: 1px; background: var(--ielts-honey, #D9A268); opacity: .85; } /* Tabs — chapter-style. Each tab gets a small italic numeral + the tab name; the numeral is the personality. */ .ielts-nav-tabs { list-style: none; padding: 0; margin: 0; flex: 1; display: flex; justify-content: center; gap: .15rem; } .ielts-nav-tab { position: relative; display: inline-flex; align-items: baseline; gap: .45rem; padding: .55rem .95rem; font-family: 'Inter', system-ui, sans-serif; font-size: .82rem; font-weight: 500; letter-spacing: .015em; color: var(--ielts-ink-soft, #B6A484); text-decoration: none; border-radius: 6px; transition: color .2s, background .2s; } .ielts-nav-tab::before { content: attr(data-num); font-family: 'Source Serif 4', Georgia, serif; font-style: italic; font-weight: 500; font-size: .72rem; color: var(--ielts-ink-mute, #7A6A52); letter-spacing: 0; transition: color .2s; } .ielts-nav-tab:hover { color: var(--ielts-ink, #F2E6CC); background: rgba(242,230,204,.04); } .ielts-nav-tab:hover::before { color: var(--ielts-honey, #D9A268); } .ielts-nav-tab.is-active { color: var(--ielts-ink, #F2E6CC); } .ielts-nav-tab.is-active::before { color: var(--ielts-honey, #D9A268); } .ielts-nav-tab.is-active::after { content: ''; position: absolute; left: .95rem; right: .95rem; bottom: -1.05rem; height: 1.5px; background: var(--ielts-honey, #D9A268); border-radius: 2px; } /* Profile button — cream circle on dark, holds the owl. */ .ielts-nav-profile { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ielts-line-strong, rgba(242,230,204,.18)); background: var(--ielts-card, #2A1F17); text-decoration: none; flex-shrink: 0; overflow: hidden; transition: transform .15s, border-color .2s, box-shadow .2s; } .ielts-nav-profile:hover { transform: scale(1.05); border-color: var(--ielts-honey, #D9A268); box-shadow: 0 6px 18px -8px rgba(217,162,104,.4); } .ielts-nav-profile img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: brightness(0) invert(0.92); /* owl renders cream on dark */ } /* Hide the floating portal-avatar when IELTS nav is up. */ body.has-ielts-nav .portal-avatar { display: none !important; } /* ── Subject page chapter frame ───────────────────────────────── */ body.has-ielts-nav .ielts-subject { max-width: 1200px; margin: 0 auto; padding: 6rem 3rem 4rem; min-height: calc(100vh - 76px); display: flex; flex-direction: column; justify-content: flex-start; } .ielts-chapter { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 1.4rem 1.6rem; padding-bottom: 3rem; border-bottom: 1px solid var(--ielts-line, rgba(242,230,204,.10)); } .ielts-chapter-num { font-family: 'Source Serif 4', 'Tiempos', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(5rem, 11vw, 8rem); line-height: .85; color: var(--ielts-honey, #D9A268); letter-spacing: -.04em; font-variant-numeric: oldstyle-nums; grid-row: 1 / 3; } .ielts-chapter-rule { display: none; /* the bottom border carries the rule */ } .ielts-chapter-name { font-family: 'Source Serif 4', 'Tiempos', Georgia, serif; font-weight: 400; font-size: clamp(3rem, 7vw, 5rem); line-height: 1; color: var(--ielts-ink, #F2E6CC); margin: 0; letter-spacing: -.022em; align-self: center; } /* Empty placeholder — for now the chapter frame is the whole page. This keeps the surface looking intentional rather than unfinished. */ .ielts-empty { text-align: center; padding: 4rem 1rem; color: var(--ielts-ink-soft, #B6A484); font-family: 'Source Serif 4', Georgia, serif; font-style: italic; } /* ── Mobile ───────────────────────────────────────────────────── */ @media (max-width: 760px) { body.has-ielts-nav { padding-top: 64px; } .ielts-nav { gap: .75rem; padding: .7rem 1rem; } .ielts-nav-brand-mark { font-size: 1.05rem; } .ielts-nav-brand-rule { width: 20px; } .ielts-nav-tabs { overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -.5rem; padding: 0 .5rem; } .ielts-nav-tabs::-webkit-scrollbar { display: none; } .ielts-nav-tab { white-space: nowrap; padding: .4rem .55rem; font-size: .78rem; gap: .3rem; } .ielts-nav-tab::before { font-size: .68rem; } .ielts-nav-tab.is-active::after { left: .55rem; right: .55rem; bottom: -.85rem; } .ielts-nav-profile { width: 34px; height: 34px; } body.has-ielts-nav .ielts-subject { padding: 3rem 1.4rem 3rem; } .ielts-chapter { gap: 1rem 1.2rem; padding-bottom: 2rem; } .ielts-chapter-name { font-size: clamp(2rem, 9vw, 3rem); } }