/* ───────────────────────────────────────────────────────────────── 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: #322519; --ielts-card-lift: #3D2D1F; --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 corner light + cursor-tracking spotlight + paper grain. The cursor light follows the pointer (--mx / --my updated from JS); on the lesson page it only appears in the dark gutters beside the cream paper, so it reads as a desk-lamp catching the wood beside an open book. */ body.has-ielts-nav::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: /* cursor spotlight — desk-lamp following the pointer */ radial-gradient(circle 220px at var(--mx, -400px) var(--my, -400px), rgba(217, 162, 104, .14) 0%, rgba(217, 162, 104, .05) 30%, rgba(217, 162, 104, 0) 65%), /* top-left warm corner glow (stronger than before) */ radial-gradient(ellipse 110% 70% at 0% -8%, rgba(217, 162, 104, .14) 0%, rgba(217, 162, 104, 0) 55%), /* bottom-right ember glow */ radial-gradient(ellipse 80% 55% at 100% 105%, rgba(216, 104, 64, .09) 0%, rgba(216, 104, 64, 0) 55%), /* mid-page subtle warm wash to fight the flat darkness */ radial-gradient(ellipse 120% 70% at 50% 50%, rgba(217, 162, 104, .04) 0%, rgba(217, 162, 104, 0) 60%); } /* Background pattern — paper grain + subtle vertical book-page rules. The grain (radial-gradient dots) gives the dark surface texture so it doesn't read as a flat black. The vertical lines hint at a typeset page, fitting for an English exam course. */ body.has-ielts-nav::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: /* paper grain — fine dot noise */ radial-gradient(circle at 1px 1px, rgba(242,230,204,.05) 1px, transparent 1.5px), /* subtle diagonal hatching for warmth and depth */ repeating-linear-gradient( 135deg, rgba(217, 162, 104, .018) 0px, rgba(217, 162, 104, .018) 1px, transparent 1px, transparent 16px ), /* faint vertical column lines like a book page */ repeating-linear-gradient( 90deg, rgba(242, 230, 204, .015) 0px, rgba(242, 230, 204, .015) 1px, transparent 1px, transparent 80px ); background-size: 3px 3px, 100% 100%, 100% 100%; mix-blend-mode: overlay; opacity: .9; } 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: center; padding: .55rem .95rem; font-family: 'Inter', system-ui, sans-serif; font-size: .85rem; 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:hover { color: var(--ielts-ink, #F2E6CC); background: rgba(242,230,204,.04); } .ielts-nav-tab.is-active { color: var(--ielts-ink, #F2E6CC); } .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; } /* ── Nav tab dropdown (Reading → Lessons / Practice) ───────── The tab itself still works as a normal link; the dropdown is an enhancement that appears on hover or keyboard focus. */ .ielts-nav-item-has-menu { position: relative; } .ielts-nav-item-has-menu .ielts-nav-tab { gap: .3rem; } .ielts-nav-caret { display: inline-block; opacity: .7; transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .2s; } .ielts-nav-item-has-menu:hover .ielts-nav-caret, .ielts-nav-item-has-menu:focus-within .ielts-nav-caret { transform: rotate(180deg); opacity: 1; } .ielts-nav-menu { position: absolute; top: calc(100% + .3rem); left: 50%; transform: translateX(-50%) translateY(-3px); min-width: 160px; padding: .3rem; background: linear-gradient(180deg, color-mix(in srgb, var(--ielts-ink, #F2E6CC) 7%, var(--ielts-card-lift, #3D2D1F)) 0%, color-mix(in srgb, var(--ielts-ink, #F2E6CC) 2%, var(--ielts-card, #322519)) 100%); border: 1px solid color-mix(in srgb, var(--ielts-honey, #D9A268) 18%, var(--ielts-line, rgba(242, 230, 204, .12))); border-radius: 9px; box-shadow: inset 0 1px 0 rgba(255, 248, 230, .06), 0 10px 24px -10px rgba(0, 0, 0, .55), 0 20px 40px -20px rgba(0, 0, 0, .4); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1); z-index: 30; } /* Invisible hover-bridge so the dropdown doesn't disappear when the cursor crosses the gap between the tab and the menu. */ .ielts-nav-menu::before { content: ''; position: absolute; top: -.5rem; left: 0; right: 0; height: .5rem; } .ielts-nav-item-has-menu:hover .ielts-nav-menu, .ielts-nav-item-has-menu:focus-within .ielts-nav-menu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } /* After clicking a menu item, force the menu shut even if the cursor is still hovering (otherwise it lingers open on the next page). The is-closing class is added by JS on click and cleared on mouseleave. */ .ielts-nav-item-has-menu.is-closing .ielts-nav-menu { opacity: 0 !important; pointer-events: none !important; transform: translateX(-50%) translateY(-4px) !important; } .ielts-nav-item-has-menu.is-closing .ielts-nav-caret { transform: rotate(0deg) !important; } .ielts-nav-menu-item { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .42rem .65rem; border-radius: 6px; text-decoration: none; color: var(--ielts-ink-soft, #B6A484); font-family: 'Inter', system-ui, sans-serif; font-size: .84rem; font-weight: 500; letter-spacing: .005em; transition: background-color .14s, color .14s; } .ielts-nav-menu-item:hover, .ielts-nav-menu-item:focus-visible { background: color-mix(in srgb, var(--ielts-honey, #D9A268) 14%, transparent); color: var(--ielts-ink, #F2E6CC); outline: none; } /* Submenu — opens to the right when hovering a parent item. Used by the Writing dropdown's Practice → 6 tools layout. */ .ielts-nav-submenu-wrap { position: relative; } .ielts-nav-submenu-caret { display: inline-flex; opacity: .55; margin-left: auto; transition: opacity .15s, transform .15s; } .ielts-nav-submenu-wrap:hover .ielts-nav-submenu-caret, .ielts-nav-submenu-wrap:focus-within .ielts-nav-submenu-caret { opacity: 1; transform: translateX(2px); } .ielts-nav-submenu { position: absolute; top: -.32rem; left: calc(100% + .25rem); min-width: 180px; padding: .3rem; background: linear-gradient(180deg, color-mix(in srgb, var(--ielts-ink, #F2E6CC) 7%, var(--ielts-card-lift, #3D2D1F)) 0%, color-mix(in srgb, var(--ielts-ink, #F2E6CC) 2%, var(--ielts-card, #322519)) 100%); border: 1px solid color-mix(in srgb, var(--ielts-honey, #D9A268) 18%, var(--ielts-line, rgba(242, 230, 204, .12))); border-radius: 9px; box-shadow: inset 0 1px 0 rgba(255, 248, 230, .06), 0 10px 24px -10px rgba(0, 0, 0, .55), 0 20px 40px -20px rgba(0, 0, 0, .4); opacity: 0; pointer-events: none; transform: translateX(-4px); transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1); z-index: 31; } /* Hover-bridge between the parent item and the submenu. */ .ielts-nav-submenu::before { content: ''; position: absolute; top: 0; bottom: 0; left: -.4rem; width: .4rem; } .ielts-nav-submenu-wrap:hover .ielts-nav-submenu, .ielts-nav-submenu-wrap:focus-within .ielts-nav-submenu { opacity: 1; pointer-events: auto; transform: translateX(0); } .ielts-nav-submenu-wrap:hover > .ielts-nav-menu-item, .ielts-nav-submenu-wrap:focus-within > .ielts-nav-menu-item { background: color-mix(in srgb, var(--ielts-honey, #D9A268) 14%, transparent); color: var(--ielts-ink, #F2E6CC); } /* Tiny AI badge inside a menu item (for the Practice submenu). */ .ielts-nav-menu-ai { font-family: 'Inter', system-ui, sans-serif; font-size: .56rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; color: #2A1F17; background: linear-gradient(135deg, #F0BE7E 0%, #D9A268 100%); margin-left: .5rem; } /* Mobile: dropdowns get cramped at narrow widths; collapse the menu into static inline links beneath the tab so the nav still works. */ @media (max-width: 640px) { .ielts-nav-menu, .ielts-nav-submenu { position: static; min-width: 0; transform: none; opacity: 1; pointer-events: auto; padding: 0 0 0 1rem; background: transparent; border: 0; box-shadow: none; display: none; } .ielts-nav-caret, .ielts-nav-submenu-caret { display: none; } } /* Language switcher — quiet, two pill-buttons separated by a thin rule. Sits between the tabs and the profile avatar. */ .ielts-nav-lang { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .35rem; border: 1px solid var(--ielts-line, rgba(242,230,204,.12)); border-radius: 99px; background: rgba(242, 230, 204, .03); flex-shrink: 0; } .ielts-lang-btn { padding: .25rem .55rem; background: transparent; border: 0; font-family: 'Inter', system-ui, sans-serif; font-size: .72rem; letter-spacing: .12em; font-weight: 600; color: var(--ielts-ink-mute, #7A6A52); cursor: pointer; transition: color .15s; border-radius: 99px; } .ielts-lang-btn:hover { color: var(--ielts-ink, #F2E6CC); } .ielts-lang-btn.is-active { color: var(--ielts-honey, #D9A268); } .ielts-lang-divider { width: 1px; height: 11px; background: var(--ielts-line, rgba(242,230,204,.18)); } /* "My notes" link — sits between lang switcher and profile button. Same dark-paper circle vibe as the profile, slightly different accent on hover so it reads as its own thing. */ .ielts-nav-notes { 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); color: var(--ielts-ink, #F2E6CC); text-decoration: none; flex-shrink: 0; transition: transform .15s, border-color .2s, color .2s, box-shadow .2s; margin-right: 4px; } .ielts-nav-notes:hover { transform: scale(1.05); color: var(--ielts-honey, #D9A268); border-color: var(--ielts-honey, #D9A268); box-shadow: 0 6px 18px -8px rgba(217,162,104,.4); } @media (max-width: 760px) { .ielts-nav-notes { width: 34px; height: 34px; } } /* 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); } /* Owl uses CSS mask so we control its color from CSS (background-color below). The SVG's bg path is fill="none", owl paths use currentColor — in mask context only alpha matters, so just the owl shape contributes. */ .ielts-nav-profile-mark { display: block; width: 78%; height: 78%; background-color: var(--ielts-ink, #F2E6CC); -webkit-mask: url('/svg/BaygushProfile.svg') center / contain no-repeat; mask: url('/svg/BaygushProfile.svg') center / contain no-repeat; transition: background-color .2s; } .ielts-nav-profile:hover .ielts-nav-profile-mark { background-color: var(--ielts-honey, #D9A268); } /* 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); } }