/* ========================================================= MovieLabs Creative Vocabulary — Stylesheet ========================================================= */ /* --- Variables & Reset --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --header-h: 60px; --sidebar-w: 252px; /* Palette */ --ink: #111827; --ink-muted: #6b7280; --ink-faint: #9ca3af; --bg: #ffffff; --bg-subtle: #f9fafb; --bg-hover: #f3f4f6; --border: #e5e7eb; --border-strong:#d1d5db; --red: #57a1d6; /* accent / MovieLabs blue */ --red-bg: #eff7fd; --amber: #d97706; --amber-bg: #fffbeb; --amber-border: #fcd34d; /* Dark surface (header + sidebar) */ --dark: #111827; --dark-2: #1f2937; --dark-text: #f9fafb; --dark-muted: #9ca3af; --dark-hover: rgba(255,255,255,0.06); --dark-active: rgba(87,161,214,0.25); --radius: 8px; --radius-sm: 5px; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05); --shadow: 0 1px 3px 0 rgb(0 0 0 / .10), 0 1px 2px -1px rgb(0 0 0 / .10); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .10), 0 2px 4px -2px rgb(0 0 0 / .10); } html { scroll-behavior: smooth; font-size: 16px; zoom: 1.21; -webkit-text-size-adjust: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.6; overflow-x: hidden; } a { color: inherit; } body { display: flex; flex-direction: column; min-height: calc(100vh / 1.21); } /* Both the vocabulary layout and the prose page-main grow to fill space */ .layout, .page-main { flex: 1; } /* ========================================================= JS-gated UI — hidden until JS adds .js class to ========================================================= */ .search-wrap { display: none; } .js .search-wrap { display: block; } .copy-btn { display: none; } .js .copy-btn { display: inline-flex; } /* ========================================================= Header ========================================================= */ .site-header { position: sticky; top: 0; z-index: 200; height: var(--header-h); background: var(--dark); border-bottom: 1px solid var(--dark-2); box-shadow: var(--shadow-md); } .header-inner { height: 100%; display: flex; align-items: center; gap: 20px; padding: 0 20px 0 16px; } /* Brand */ .header-brand { display: flex; flex-direction: row; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; user-select: none; } .brand-logo { height: 28px; width: auto; flex-shrink: 0; } .brand-title { font-size: 0.95rem; font-weight: 600; color: var(--dark-text); white-space: nowrap; } .header-end-logo { height: 44px; width: auto; flex-shrink: 0; opacity: 0.9; } /* Category nav */ .header-nav { display: flex; align-items: center; gap: 2px; flex: 1; overflow: hidden; } .nav-link { text-decoration: none; font-size: 0.82rem; font-weight: 500; color: var(--dark-muted); padding: 5px 10px; border-radius: var(--radius-sm); transition: color .15s, background .15s; white-space: nowrap; } .nav-link:hover { color: var(--dark-text); background: var(--dark-hover); } .nav-link.is-active { color: var(--dark-text); background: var(--dark-2); } /* Right side: search + hamburger */ .header-right { display: flex; align-items: center; gap: 10px; margin-left: auto; } /* Search */ .search-wrap { position: relative; } #searchInput { width: 200px; padding: 6px 12px; background: var(--dark-2); border: 1px solid #374151; border-radius: var(--radius-sm); color: var(--dark-text); font-size: 0.83rem; outline: none; transition: border-color .15s, width .2s; } #searchInput::placeholder { color: #6b7280; } #searchInput:focus { border-color: #6b7280; width: 260px; } .search-results { position: absolute; top: calc(100% + 8px); right: 0; width: 360px; max-height: 420px; overflow-y: auto; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); z-index: 300; } .search-empty, .search-result { display: block; padding: 10px 14px; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--ink); cursor: pointer; transition: background .1s; } .search-result:last-child { border-bottom: none; } .search-result:hover { background: var(--bg-subtle); } .search-empty { color: var(--ink-muted); font-size: .85rem; cursor: default; } .search-result-term { font-weight: 600; font-size: .88rem; } .search-result-category { font-size: .72rem; color: var(--ink-muted); margin-top: 1px; } .search-result-snippet { font-size: .78rem; color: var(--ink-muted); margin-top: 3px; } /* ========================================================= Layout ========================================================= */ .layout { display: flex; min-height: calc(100vh - var(--header-h)); } /* ========================================================= Sidebar ========================================================= */ .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--dark); position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--dark-2) transparent; } .sidebar-inner { padding: 12px 0 32px; } .side-section { margin-bottom: 6px; } .side-cat-link { display: block; padding: 6px 12px; font-size: 0.65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); text-decoration: none; border-left: 2px solid transparent; transition: color .15s, background .15s, border-color .15s; } .side-cat-link:hover { color: var(--dark-text); background: var(--dark-hover); } .side-cat-link.is-active { color: var(--dark-text); border-left-color: var(--red); background: var(--dark-active); } .side-terms { list-style: none; margin-bottom: 10px; } .side-term-link { display: block; padding: 3px 12px 3px 20px; font-size: 0.7rem; color: var(--dark-muted); text-decoration: none; border-left: 2px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .1s, background .1s, border-color .1s; } .side-term-link:hover { color: var(--dark-text); background: var(--dark-hover); } .side-term-link.is-active { color: var(--dark-text); border-left-color: var(--red); background: var(--dark-active); } /* ========================================================= Mobile control buttons (hamburger + sidebar toggle) Hidden on desktop; shown on mobile via media query + .js ========================================================= */ .hamburger-btn, .sidebar-toggle-btn { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; background: none; border: none; cursor: pointer; color: var(--dark-text); border-radius: var(--radius-sm); flex-shrink: 0; transition: background .15s; } .hamburger-btn:hover, .sidebar-toggle-btn:hover { background: var(--dark-hover); } /* Sidebar header strip (title + close button) — mobile only */ .sidebar-header { display: none; } .sidebar-close-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: none; border: none; cursor: pointer; color: var(--dark-text); border-radius: var(--radius-sm); transition: background .15s; } .sidebar-close-btn:hover { background: var(--dark-hover); } /* ========================================================= Main Content ========================================================= */ .main-content { flex: 1; min-width: 0; padding: 0 48px 100px; } /* ========================================================= Last-updated label (cinematography page) ========================================================= */ .last-updated { font-size: .78rem; color: var(--ink-faint); } /* ========================================================= Category Sections ========================================================= */ .cat-section { margin-bottom: 64px; scroll-margin-top: calc(var(--header-h) + 20px); } .cat-header { margin-bottom: 28px; padding-bottom: 18px; border-bottom: 2px solid var(--red); } .cat-header h2 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 6px; } .cat-definition { font-size: .88rem; color: var(--ink-muted); line-height: 1.65; max-width: 680px; margin-top: 6px; } .cat-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .cat-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 100px; font-size: .72rem; color: var(--ink-muted); } .cat-badge strong { color: var(--ink); } .cat-notes { font-size: .78rem; color: var(--ink-faint); font-style: italic; margin-top: 8px; max-width: 640px; line-height: 1.6; } /* ========================================================= Term Cards ========================================================= */ .terms-list { display: flex; flex-direction: column; gap: 10px; } .term-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 22px; scroll-margin-top: calc(var(--header-h) + 20px); transition: box-shadow .2s, border-color .2s; } .term-card:hover { box-shadow: var(--shadow); } /* Highlighted state — fades out after 3 s via JS removing the class */ .term-card.is-highlighted { border-color: var(--amber-border); background: var(--amber-bg); box-shadow: 0 0 0 3px rgb(252 211 77 / .25); } .term-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .term-name { font-size: 1.05rem; font-weight: 700; color: var(--ink); line-height: 1.3; } .term-permalink { color: inherit; text-decoration: none; } .term-permalink:hover { text-decoration: underline; } .copy-btn { flex-shrink: 0; align-items: center; gap: 5px; padding: 4px 10px; background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink-faint); font-size: .72rem; cursor: pointer; transition: color .15s, border-color .15s, background .15s; white-space: nowrap; } .copy-btn:hover { color: var(--ink-muted); border-color: var(--border-strong); background: var(--bg-hover); } .copy-btn.is-copied { color: #059669; border-color: #059669; } .copy-icon { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; } /* Fields */ .term-fields { display: flex; flex-direction: column; gap: 7px; } .term-field { display: grid; grid-template-columns: 138px 1fr; gap: 8px; align-items: baseline; } .field-label { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); padding-top: 2px; } .field-value { font-size: .875rem; color: var(--ink); line-height: 1.65; } .concept-link { color: var(--red); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s; } .concept-link:hover { border-bottom-color: var(--red); } /* ========================================================= Footer ========================================================= */ .site-footer { margin-top: auto; background: var(--bg-subtle); border-top: 1px solid var(--border); padding: 18px 20px; } /* On the vocabulary page the footer sits beside the sidebar */ [data-page="cinematography"] .site-footer { margin-left: var(--sidebar-w); } .footer-inner { max-width: 960px; margin: 0 auto; font-size: .76rem; color: var(--ink-muted); text-align: center; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 0; } .footer-sep { margin: 0 8px; color: var(--border-strong); } .footer-inner a { color: var(--ink-muted); text-decoration: underline; } .footer-inner a:hover { color: var(--ink); } /* ========================================================= Page layout (Overview & License — no sidebar) ========================================================= */ .page-main { max-width: 800px; margin: 0 auto; padding: 48px 40px 100px; } .page-hero { margin-bottom: 40px; padding-bottom: 24px; border-bottom: 2px solid var(--red); } .page-hero h1 { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; } /* Prose content */ .prose-section { margin-bottom: 36px; } .prose-section h2 { font-size: 1.2rem; font-weight: 700; margin-bottom: 12px; color: var(--ink); } .prose-section h3, .prose-subsection h3 { font-size: .95rem; font-weight: 600; color: var(--ink-muted); margin: 18px 0 6px; } .prose-section p, .prose-subsection p { font-size: .925rem; line-height: 1.75; color: var(--ink); margin-bottom: 10px; } .prose-section ul, .prose-subsection ul { margin: 4px 0 12px 20px; } .prose-section li, .prose-subsection li { font-size: .925rem; line-height: 1.7; margin-bottom: 5px; color: var(--ink); } .prose-subsection { margin-top: 10px; padding-left: 16px; border-left: 2px solid var(--border); } /* CC license badge */ .license-badge { display: inline-flex; align-items: center; gap: 14px; margin-top: 28px; padding: 16px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-subtle); text-decoration: none; color: var(--ink); transition: border-color .15s, background .15s; } .license-badge:hover { border-color: var(--border-strong); background: var(--bg-hover); } .license-cc { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); font-size: .85rem; font-weight: 800; letter-spacing: .04em; flex-shrink: 0; } .license-info { display: flex; flex-direction: column; gap: 2px; } .license-info strong { font-size: .9rem; } .license-info span { font-size: .78rem; color: var(--ink-muted); } /* ========================================================= Cinematography page — vocab intro ========================================================= */ .vocab-intro { padding: 32px 0 26px; border-bottom: 1px solid var(--border); margin-bottom: 44px; scroll-margin-top: calc(var(--header-h) + 16px); } .vocab-title-row { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; } .vocab-title { font-size: 1.75rem; font-weight: 800; letter-spacing: -.01em; } .scope-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .scope-pill { display: inline-flex; align-items: center; padding: 6px 14px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 100px; font-size: .83rem; font-weight: 500; color: var(--ink); text-decoration: none; transition: background .15s, border-color .15s; } .scope-pill:hover { background: var(--bg-hover); border-color: var(--border-strong); } .error-msg { color: var(--red); font-size: .9rem; padding: 16px 0; } /* ========================================================= Download links ========================================================= */ .download-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .download-label { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); } .download-link { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .76rem; color: var(--ink-muted); text-decoration: none; transition: color .15s, border-color .15s, background .15s; } .download-link:hover { color: var(--ink); border-color: var(--border-strong); background: var(--bg-hover); } /* ========================================================= Responsive — Sub-desktop (≤ 1023px): overlay sidebar + hamburger ========================================================= */ @media (max-width: 1023px) { /* Reset zoom so viewport width is used accurately */ html { zoom: 1; } body { min-height: 100vh; } /* JS only: hamburger + sidebar toggle (non-functional without JS) */ html.js .hamburger-btn { display: flex; } html.js .sidebar-toggle-btn { display: flex; } /* With JS: hide inline nav (hamburger dropdown takes over) Without JS: nav links stay visible — only way to navigate between pages */ html.js .header-nav { display: none; } /* No-JS: allow header to grow and nav links to wrap onto a second row */ html:not(.js) .site-header { height: auto; } html:not(.js) .header-inner { height: auto; flex-wrap: wrap; padding-bottom: 8px; gap: 8px 16px; } html:not(.js) .header-end-logo { display: none; } html:not(.js) .header-nav { order: 10; width: 100%; padding: 4px 0 2px; border-top: 1px solid var(--dark-2); flex-wrap: wrap; gap: 2px; } /* Shrink vision logo; phone breakpoint hides it entirely */ .header-end-logo { height: 36px; } /* Compact search; results use fixed positioning to avoid viewport clipping */ #searchInput { width: 120px; } #searchInput:focus { width: 150px; } .search-results { position: fixed; top: var(--header-h); left: 16px; right: 16px; width: auto; max-height: 60vh; } /* Nav dropdown on body.nav-open */ html.js body.nav-open .header-nav { display: flex; flex-direction: column; gap: 2px; position: fixed; top: var(--header-h); left: 0; right: 0; background: var(--dark); padding: 8px 12px 14px; z-index: 199; border-bottom: 1px solid var(--dark-2); box-shadow: var(--shadow-md); } html.js body.nav-open .nav-link { padding: 10px 12px; font-size: .9rem; } /* Sidebar: always hidden at sub-desktop — no usable no-JS sidebar on small screens. With JS: becomes a full-screen overlay when body.sidebar-open is set. */ .sidebar { display: none; } html.js body.sidebar-open .sidebar { display: block; position: fixed; inset: 0; width: 100%; height: 100%; z-index: 250; overflow-y: auto; } body.sidebar-open { overflow: hidden; } /* Sidebar close header strip */ .sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; height: var(--header-h); position: sticky; top: 0; background: var(--dark); border-bottom: 1px solid var(--dark-2); z-index: 1; flex-shrink: 0; } .sidebar-header-title { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dark-muted); } /* Footer: no sidebar offset */ [data-page="cinematography"] .site-footer { margin-left: 0; } /* Padding */ .main-content { padding: 0 24px 60px; } .page-main { padding: 32px 20px 80px; } /* Term fields: single column */ .term-field { grid-template-columns: 1fr; gap: 2px; } .field-label { padding-top: 0; } .cat-header h2 { font-size: 1.3rem; } } /* ========================================================= Responsive — Phone (≤ 639px): compact header + stacked footer ========================================================= */ @media (max-width: 639px) { /* Hide vision logo on small phones */ .header-end-logo { display: none; } /* Stack brand: logo above title */ .header-brand { flex-direction: column; align-items: flex-start; gap: 1px; } .brand-title { font-size: 0.65rem; line-height: 1.2; white-space: normal; } /* Search: fixed width — no focus expansion to prevent horizontal scroll */ #searchInput, #searchInput:focus { width: 110px; } /* Footer: stack vertically, hide separators */ .footer-inner { flex-direction: column; gap: 3px; } .footer-sep { display: none; } /* Tighter padding */ .main-content { padding: 0 12px 60px; } .page-main { padding: 24px 16px 60px; } }