/* ============================================ H.みんな — Vorxs-DNA design system (documented at DESIGN.md) ------------------------------------------ Cream paper, ink-black ink, four saturated blocks (yellow / olive / orange / sage), sharp 0px corners, hairline borders, no shadows. Inter 700-900 + JetBrains Mono caps. Touch-first (44×44 min). No serif, no italic as default. Mono caps above every data point. ============================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 400; font-feature-settings: 'cv02', 'cv03', 'cv11', 'tnum'; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--paper); color: var(--ink); line-height: 1.55; overflow-x: hidden; } /* Skip-link */ .skip-link { position: absolute; top: -44px; left: 14px; background: var(--ink); color: var(--paper); padding: 10px 16px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; z-index: 200; transition: top .15s var(--ease); } .skip-link:focus { top: 12px; outline: 2px solid var(--ink); outline-offset: 2px; } /* Visible focus ring on every interactive element (Inter-700 Floor + Eight-2px Rule) */ :where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--ink) !important; outline-offset: 2px; } .btn-yellow:focus-visible { outline-color: var(--orange) !important; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } :root { /* Vorxs palette */ --paper: #F5F4EE; --paper-2: #EBE9E1; --ink: #181818; --ink-2: #232323; --ink-3: #2A2A2A; --text-sec: #4A4A4A; --text-muted: #747474; --border: #D4D4D4; --border-light: #E5E5E5; --border-strong: #B8B8B8; --yellow: #F5D547; --olive: #5F7151; --orange: #D86A3F; --sage: #8C9A7A; --on-yellow: #181818; --on-olive: #FFFFFF; --on-orange: #FFFFFF; --on-sage: #181818; --on-ink: #F5F4EE; --type: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; --radius: 0px; --radius-lg: 6px; --radius-xl: 8px; --ease: cubic-bezier(0.2, 0, 0, 1); --transition: 100ms var(--ease); } /* Dark mode — Vorxs flat black, true inversion. Set on by the theme-toggle, or auto-set by prefers-color-scheme when no choice is stored in localStorage. */ :root[data-theme="dark"] { --paper: #0A0A0A; --paper-2: #161616; --ink: #F5F4EE; --ink-2: #E5E5E5; --ink-3: #D4D4D4; --text-sec: #B5B5B5; --text-muted: #8A8A8A; --border: #2A2A2A; --border-light: #1F1F1F; --border-strong: #3A3A3A; /* Four Vorxs blocks hold roughly the same hue in dark mode */ --yellow: #F5D547; --olive: #6A7D5C; --orange: #E07A4F; --sage: #8C9A7A; --on-yellow: #181818; --on-olive: #FFFFFF; --on-orange: #FFFFFF; --on-sage: #181818; --on-ink: #0A0A0A; } /* Inverted brand-mark svg needs darker paper rectangle in dark mode */ :root[data-theme="dark"] .brand-mark svg rect[fill="#F5EEDC"] { fill: #F5F4EE; } :root[data-theme="dark"] .brand-mark svg path[fill="#E6D9B6"] { fill: #E6D9B6; opacity: 0.6; } :root[data-theme="dark"] .brand-mark svg text[fill="#1C2340"] { fill: #0A0A0A; } :root[data-theme="dark"] .brand-mark svg circle[fill="#DE4B2E"] { fill: #F5D547; } /* Theme toggle button — sun shows in light mode, moon shows in dark */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 1px solid var(--border); color: var(--ink); cursor: pointer; border-radius: 0; padding: 0; transition: border-color var(--transition), background var(--transition); } .theme-toggle:hover { border-color: var(--ink); background: rgba(0,0,0,0.04); } :root[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,0.04); } .theme-toggle .theme-icon-sun, .theme-toggle .theme-icon-moon { display: none; } .theme-toggle .theme-icon-sun { display: inline-block; } :root[data-theme="dark"] .theme-toggle .theme-icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .theme-icon-moon { display: inline-block; } /* Smooth color transition when toggling themes */ body { transition: background-color 200ms var(--ease), color 200ms var(--ease); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 24px; padding: 14px 28px; background: var(--paper); border-bottom: 2px solid var(--ink); } .header-left { display: flex; align-items: center; gap: 14px; min-width: 0; } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; } .brand-word { font-family: var(--type); font-weight: 800; font-size: 20px; letter-spacing: -0.03em; line-height: 1; } .brand-idn { font-weight: 500; margin-left: 2px; letter-spacing: 0; } .brand-tag { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); padding-left: 14px; border-left: 1px solid var(--border); } .header-nav { margin-left: auto; display: flex; gap: 28px; } .header-nav a { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); text-decoration: none; transition: color var(--transition); min-height: 22px; } .header-nav a:hover { color: var(--ink); opacity: 0.6; } .header-right { display: flex; align-items: center; gap: 14px; } .header-signin { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: 8px 4px; min-height: 44px; display: inline-flex; align-items: center; transition: opacity var(--transition); } .header-signin:hover { opacity: 0.6; } .hamburger { display: none; background: transparent; border: 0; cursor: pointer; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 4px; } .hamburger span { display: block; width: 18px; height: 1.5px; background: var(--ink); } /* ---------- Buttons (btn-ink + btn-yellow) ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 12px 18px; font-family: var(--type); font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; border: 2px solid var(--ink); border-radius: 0; cursor: pointer; transition: background var(--transition), color var(--transition); white-space: nowrap; } .btn-ink { background: var(--ink); color: var(--paper); } .btn-ink:hover { background: var(--paper); color: var(--ink); } .btn-yellow { background: var(--yellow); color: var(--on-yellow); border-color: var(--ink); } .btn-yellow:hover { background: var(--ink); color: var(--yellow); } .btn-lg { padding: 14px 22px; font-size: 13px; min-width: 120px; min-height: 48px; } .btn-ink-mini { display: inline-flex; align-items: center; justify-content: center; padding: 5px 10px; background: var(--ink); color: var(--paper); font-family: var(--type); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; border: 0; border-radius: 0; cursor: pointer; } /* ---------- Hero ---------- */ .hero { position: relative; padding: clamp(56px, 8vw, 112px) 28px clamp(48px, 7vw, 96px); overflow: hidden; border-bottom: 1px solid var(--border); } .hero-inner { position: relative; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; } .hero-copy { max-width: 560px; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; background: transparent; border: 1px solid var(--ink); margin-bottom: 32px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); } .eyebrow-bl { color: var(--ink); font-weight: 700; letter-spacing: 0; font-family: var(--mono); } .hero-title { font-family: var(--type); font-weight: 800; font-size: clamp(44px, 6.4vw, 84px); line-height: 0.95; letter-spacing: -0.03em; margin: 0 0 32px; text-transform: uppercase; color: var(--ink); text-wrap: balance; } .hero-title em { font-style: normal; color: var(--orange); font-weight: 800; } .hero-sub { font-size: 17px; line-height: 1.55; color: var(--text-sec); margin: 0 0 36px; max-width: 520px; } .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 52px; } .hero-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin: 0; } .hero-meta .hm-cell { background: var(--paper); padding: 20px 18px; display: flex; flex-direction: column; gap: 8px; } .hero-meta .mono-cap { color: var(--text-muted); } .hero-meta strong { font-family: var(--type); font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--ink); letter-spacing: -0.01em; } /* ============================================ HERO PREVIEW — flat blocks, no shadows ============================================ */ .hero-preview { position: relative; background: var(--paper); border: 2px solid var(--ink); overflow: hidden; font-size: 11px; } .preview-chrome { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--paper-2); } .preview-dots { display: flex; gap: 6px; } .preview-dots i { width: 10px; height: 10px; background: var(--border-strong); display: block; } .preview-tab { display: flex; gap: 4px; font-family: var(--mono); font-size: 11px; } .preview-tab span { padding: 4px 10px; color: var(--text-sec); } .preview-tab .tab-active { background: var(--ink); color: var(--paper); } .preview-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--text-muted); } .pill-tab { font-family: var(--type); font-size: 11px; font-weight: 600; letter-spacing: -0.01em; padding: 5px 10px; border: 1px solid var(--border); background: var(--paper); color: var(--text-sec); border-radius: 0; cursor: pointer; min-height: 32px; transition: color var(--transition), border-color var(--transition), background var(--transition); } .pill-tab:hover { color: var(--ink); border-color: var(--ink); } .pill-tab.active { background: var(--ink); color: var(--paper); border-color: var(--ink); } .t-icon { font-size: 12px; opacity: .8; } /* App-level rail */ .preview-appbar { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--paper); font-family: var(--type); font-size: 12px; color: var(--text-sec); } .appbar-mark { display: inline-flex; } .appbar-word { font-family: var(--type); font-weight: 800; font-size: 14px; color: var(--ink); letter-spacing: -0.03em; } .appbar-sep { color: var(--text-muted); } .appbar-section { padding: 4px 10px; border-radius: 0; color: var(--text-sec); cursor: default; font-weight: 600; } .appbar-section.is-on { background: var(--ink); color: var(--paper); } .appbar-spacer { flex: 1; } .appbar-avatar { width: 24px; height: 24px; background: var(--yellow); color: var(--on-yellow); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; border: 1.5px solid var(--ink); } .preview-body { display: grid; grid-template-columns: 200px 1fr 220px; min-height: 460px; max-height: 520px; } .preview-sidebar { border-right: 1px solid var(--border); padding: 14px 12px 14px 14px; background: var(--paper-2); font-family: var(--type); font-size: 12px; overflow-y: auto; } .psb-head { margin-bottom: 14px; } .psb-title { display: flex; align-items: center; gap: 8px; font-family: var(--type); font-weight: 800; font-size: 16px; color: var(--ink); letter-spacing: -0.02em; } .shelf-mark { display: inline-flex; color: var(--ink); } .psb-tag { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; } .psb-progress { margin-bottom: 14px; } .psb-progress-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; } .psb-progress-label .mono-cap { color: var(--text-muted); } .psb-progress-num { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .psb-bar { height: 3px; background: var(--border); border-radius: 0; overflow: hidden; } .psb-bar span { display: block; height: 100%; background: var(--yellow); } .psb-tree { display: flex; flex-direction: column; gap: 2px; } .cat { border-radius: 0; } .cat summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 5px 6px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); cursor: pointer; border-radius: 0; min-height: 28px; } .cat summary::-webkit-details-marker { display: none; } .cat summary::before { content: '›'; font-size: 11px; color: var(--text-muted); margin-right: 2px; transition: transform .15s var(--ease); } .cat[open] summary::before { transform: rotate(90deg); } .cat summary:hover { background: rgba(24,24,24,0.04); } .cat .num { margin-left: auto; color: var(--text-muted); font-size: 11px; font-family: var(--mono); font-weight: 500; } .cat ul { list-style: none; margin: 2px 0 4px 16px; padding: 0; } .cat ul li { font-size: 11px; color: var(--text-sec); padding: 2px 0; font-family: var(--type); font-weight: 500; text-transform: none; letter-spacing: 0; } /* Category color block — the Vorxs four-block tile, used as a tag/indicator */ .cat-block { width: 10px; height: 10px; display: inline-block; flex-shrink: 0; } .cat-yellow { background: var(--yellow); } .cat-olive { background: var(--olive); } .cat-orange { background: var(--orange); } .cat-sage { background: var(--sage); } .cat-films { padding-bottom: 6px; } .films-row { display: flex; gap: 6px; margin: 6px 0 4px 16px; } .film-card { width: 64px; font-family: var(--type); font-size: 8px; position: relative; flex-shrink: 0; } .film-badge { position: absolute; top: 4px; left: 4px; padding: 1px 5px; background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 7px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--ink); z-index: 1; } .film-poster { width: 64px; height: 88px; margin-bottom: 4px; border: 1px solid var(--ink); } .fp-1 { background: linear-gradient(180deg, #D8C2A0 0%, #8A7654 100%); } .fp-2 { background: linear-gradient(180deg, #B8C5D2 0%, #6E8090 100%); } .film-cap { line-height: 1.2; color: var(--ink); font-size: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .film-cap b { display: block; font-weight: 700; font-size: 9px; line-height: 1.15; } .film-cap small { color: var(--text-sec); font-size: 8px; font-family: var(--mono); font-weight: 600; } .psb-add { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-top: 12px; padding: 8px 6px; border-top: 1px solid var(--border); cursor: pointer; } /* Track cards */ .preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 12px; background: var(--paper); overflow: hidden; align-content: start; min-height: 460px; } .track-card { background: var(--paper); border: 1px solid var(--ink); padding: 8px 9px 9px; display: flex; flex-direction: column; gap: 5px; min-height: 88px; position: relative; } .track-card .chip { align-self: flex-start; } .track-card h5 { margin: 0; font-family: var(--type); font-weight: 700; font-size: 12px; line-height: 1.2; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; letter-spacing: -0.01em; } .track-meta { font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; color: var(--text-muted); } .track-bar { margin-top: auto; height: 3px; background: var(--border); border-radius: 0; overflow: hidden; } .track-bar span { display: block; height: 100%; background: var(--ink); } .t-done .track-bar { display: none; } /* The ink-strike done treatment — 2px ink at -3° at 52% top */ .ink-strike { position: relative; display: inline-block; } .ink-strike::before { content: ''; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px; background: var(--ink); transform: rotate(-3deg); } /* Chips (kind-chip) — 0px radius, 2px padding, JetBrains Mono caps */ .chip { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 6px; border-radius: 0; line-height: 1; display: inline-block; } .chip-yellow { background: var(--yellow); color: var(--on-yellow); } .chip-olive { background: var(--olive); color: var(--on-olive); } .chip-orange { background: var(--orange); color: var(--on-orange); } .chip-sage { background: var(--sage); color: var(--on-sage); } .chip-cream { background: var(--paper); color: var(--ink); border: 1px solid var(--ink); } .chip-ink { background: var(--ink); color: var(--paper); } /* Drawer */ .preview-drawer { background: var(--paper-2); border-left: 1px solid var(--border); padding: 14px; display: flex; flex-direction: column; } .drawer-head { display: flex; align-items: center; gap: 8px; font-family: var(--type); font-weight: 800; font-size: 14px; color: var(--ink); margin-bottom: 4px; letter-spacing: -0.02em; } .drawer-icon { font-size: 13px; } .drawer-count { margin-left: auto; color: var(--ink); font-size: 11px; font-family: var(--mono); font-weight: 700; } .drawer-sub { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 12px; } .drawer-input { background: var(--paper); border: 1px solid var(--ink); border-radius: 0; padding: 10px; } .drawer-input textarea { width: 100%; min-height: 56px; background: transparent; border: 0; outline: 0; resize: none; color: var(--ink); font-family: var(--mono); font-size: 11px; line-height: 1.4; font-variant-numeric: tabular-nums; } .drawer-input textarea::placeholder { color: var(--text-muted); } .drawer-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); } .caret { font-size: 8px; opacity: .6; } .drawer-items { margin-top: 12px; display: flex; flex-direction: column; border-top: 1px solid var(--border); } .di-row { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--border); font-family: var(--type); font-size: 11px; color: var(--ink); } .di-row:last-child { border-bottom: 0; } .di-row span:nth-child(2) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; } .di-row .di-time { color: var(--text-muted); font-size: 9px; font-family: var(--mono); font-weight: 700; flex: 0 0 auto; text-transform: uppercase; letter-spacing: 0.06em; } .drawer-foot { margin-top: auto; display: flex; gap: 8px; align-items: center; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); padding-top: 12px; border-top: 1px solid var(--border); } .drawer-foot .mono-cap { color: var(--text-muted); } .dim { color: var(--text-muted); } /* Command bar */ .preview-cmd { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--border); background: var(--paper-2); font-family: var(--mono); font-size: 12px; color: var(--ink); } .cmd-prompt { color: var(--ink); font-weight: 700; } .preview-status { display: flex; align-items: stretch; border-top: 1px solid var(--border); background: var(--paper); } .status-btn { background: var(--ink); color: var(--paper); border: 0; cursor: pointer; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0 18px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; } .st-numbers { display: flex; margin-left: auto; } .st-cell { width: 86px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--border); } .st-cell .mono-cap { color: var(--ink); } .st-cell b { font-family: var(--type); font-weight: 800; font-size: 24px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .st-yellow { background: var(--yellow); } .st-yellow .mono-cap, .st-yellow b { color: var(--on-yellow); } .st-orange { background: var(--orange); } .st-orange .mono-cap, .st-orange b { color: var(--on-orange); } .st-olive { background: var(--olive); } .st-olive .mono-cap, .st-olive b { color: var(--on-olive); } /* ============================================ SECTION HEAD ============================================ */ .section-head { max-width: 720px; margin: 0 auto 64px; text-align: center; padding: 0 24px; } .section-num { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 18px; padding: 4px 10px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); } .section-title { font-family: var(--type); font-weight: 800; font-size: clamp(32px, 4.5vw, 56px); line-height: 1.0; letter-spacing: -0.03em; margin: 0 0 18px; text-transform: uppercase; color: var(--ink); text-wrap: balance; } .section-title em { font-style: italic; color: var(--orange); font-weight: 800; } .section-sub { font-size: 16px; line-height: 1.55; color: var(--text-sec); margin: 0; } /* ============================================ FEATURES — bento grid, no rounded corners ============================================ */ .features { padding: clamp(72px, 9vw, 128px) 28px; } .feature-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } .feature { grid-column: span 2; background: var(--paper); border: 1px solid var(--ink); padding: 28px; position: relative; overflow: hidden; transition: background var(--transition); } .feature:hover { background: var(--paper-2); } .feat-wide { grid-column: span 4; } .feat-wide.feat-poster { grid-column: span 6; } .feat-h { margin-bottom: 18px; } .feat-kicker { display: inline-block; background: var(--yellow); color: var(--on-yellow); padding: 3px 8px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px; border-radius: 0; } .feature h3 { font-family: var(--type); font-weight: 800; font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin: 0; text-wrap: balance; } .feature h3 em { font-style: italic; color: var(--orange); font-weight: 800; } .feature p { font-size: 14px; line-height: 1.55; color: var(--text-sec); margin: 0 0 22px; } .feature kbd { font-family: var(--mono); font-size: 11px; font-weight: 600; padding: 2px 6px; background: var(--paper-2); color: var(--ink); border: 1px solid var(--border); border-radius: 0; } .feature code { font-family: var(--mono); font-size: 12px; padding: 2px 6px; background: var(--paper-2); color: var(--ink); border-radius: 0; } .feat-visual { margin-top: 16px; padding: 18px; background: var(--paper-2); border: 1px solid var(--ink); border-radius: 0; } /* Capture (command bar) */ .feat-cmd .cmd-bar { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13px; color: var(--ink); padding: 10px 14px; background: var(--paper); border: 1px solid var(--ink); border-radius: 0; } .feat-cmd .cmd-bar em { color: var(--orange); font-style: normal; font-weight: 600; } .cursor { display: inline-block; width: 7px; height: 14px; background: var(--ink); vertical-align: -2px; animation: blink 1.1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } } .cmd-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; } .m-pill { font-family: var(--mono); font-size: 10px; font-weight: 600; padding: 3px 8px; border: 1px solid var(--ink); border-radius: 0; color: var(--ink); } .m-pill.m-active { background: var(--yellow); color: var(--on-yellow); border-color: var(--ink); } .m-pill.m-tag { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* Categories */ .feat-cats { display: flex; gap: 8px; flex-wrap: wrap; padding: 18px; } .cat-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--paper); border: 1px solid var(--ink); border-radius: 0; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); } .cat-tag b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } /* Progress bars */ .feat-progress { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; } .prog-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 16px; font-family: var(--type); font-size: 12px; color: var(--ink); } .prog-row b { color: var(--text-sec); font-weight: 700; font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; } .prog-row .prog-bar { grid-column: 1 / -1; height: 4px; background: var(--border); border-radius: 0; overflow: hidden; } .prog-row .prog-bar span { display: block; height: 100%; background: var(--ink); } /* Drawer mini */ .feat-drawer { padding: 14px; } .drawer-mini { background: var(--paper); border: 1px solid var(--ink); border-radius: 0; overflow: hidden; } .dm-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--ink); font-family: var(--type); font-weight: 800; font-size: 14px; color: var(--ink); letter-spacing: -0.02em; } .dm-count { color: var(--text-muted); font-family: var(--mono); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .dm-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); font-family: var(--type); font-size: 12px; color: var(--ink); font-weight: 500; } .dm-row:last-child { border-bottom: 0; } /* Desk */ .feat-desk { padding: 14px; } .desk-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; } .desk-row { display: flex; align-items: center; gap: 10px; padding: 10px 6px; font-family: var(--type); font-size: 12px; color: var(--ink); border-bottom: 1px solid var(--border); } .desk-row:last-child { border-bottom: 0; } .desk-row b { font-weight: 700; } .desk-row .desk-ep { color: var(--text-muted); font-size: 11px; font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; } .desk-row .chip { margin-left: auto; } /* Episode tiles */ .feat-ep { padding: 16px 18px; } .ep-head { display: flex; gap: 6px; margin-bottom: 14px; } .ep-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .ep-tile { background: var(--paper); border: 1px solid var(--ink); border-radius: 0; padding: 10px; min-height: 96px; display: flex; flex-direction: column; gap: 8px; } .ep-tile.ep-locked { opacity: 0.4; } .ep-tag { color: var(--text-muted); } .ep-tile p { margin: 0; font-family: var(--type); font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.2; letter-spacing: -0.01em; } .ep-bar { margin-top: auto; height: 3px; background: var(--border); border-radius: 0; overflow: hidden; } .ep-bar span { display: block; height: 100%; background: var(--ink); } /* ============================================ SHOWCASE — Wrapped card ============================================ */ .showcase { padding: clamp(72px, 9vw, 128px) 28px; background: var(--paper-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .wrapped { max-width: 1080px; margin: 0 auto; background: var(--paper); border: 2px solid var(--ink); overflow: hidden; } .wrapped-head { display: flex; align-items: center; gap: 16px; padding: 18px 28px; border-bottom: 1px solid var(--border); background: var(--paper); } .dash-mark { color: var(--ink); display: inline-flex; } .wrapped-tabs { display: inline-flex; gap: 6px; } .wrapped-title { padding: 36px 32px 8px; } .wrapped-title h3 { font-family: var(--type); font-weight: 800; font-size: 32px; letter-spacing: -0.03em; margin: 0 0 6px; color: var(--ink); } .wrapped-title p { margin: 0; color: var(--text-sec); font-size: 14px; } .wrap-hero { text-align: center; padding: 36px 32px 28px; border-bottom: 1px solid var(--border); } .wrap-eyebrow { color: var(--text-muted); display: block; margin-bottom: 14px; } .wrap-num { font-family: var(--type); font-weight: 800; font-size: clamp(64px, 9vw, 104px); line-height: 1; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; } .wrap-num-label { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-top: 8px; } .wrap-rows { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); } .wrap-row { padding: 24px 32px; border-right: 1px solid var(--border); } .wrap-row:last-child { border-right: 0; } .wrap-row-label { color: var(--text-muted); margin-bottom: 8px; } .wrap-row-value { font-family: var(--type); font-weight: 700; font-size: 22px; color: var(--ink); letter-spacing: -0.02em; } .wrap-row-meta { font-family: var(--mono); font-weight: 600; font-size: 13px; color: var(--text-sec); margin-left: 8px; font-variant-numeric: tabular-nums; } .wrap-types { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--border); } .wrap-type { background: var(--paper); padding: 22px 12px; text-align: center; display: flex; flex-direction: column; gap: 6px; } .wrap-type b { display: block; font-family: var(--type); font-weight: 800; font-size: 32px; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; } .wrap-type .mono-cap { color: var(--text-muted); } /* Strip cards */ .feat-strip { max-width: 1080px; margin: 40px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .strip-card { background: var(--paper); border: 1px solid var(--ink); border-radius: 0; padding: 28px; transition: background var(--transition); } .strip-card:hover { background: var(--paper-2); } .strip-card .feat-kicker { margin-bottom: 12px; } .strip-card h4 { font-family: var(--type); font-weight: 800; font-size: 19px; color: var(--ink); margin: 0 0 8px; letter-spacing: -0.02em; line-height: 1.2; } .strip-card p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-sec); } @media (max-width: 760px) { .wrap-rows { grid-template-columns: 1fr; } .wrap-row { border-right: 0; border-bottom: 1px solid var(--border); } .wrap-row:last-child { border-bottom: 0; } .wrap-types { grid-template-columns: repeat(3, 1fr); } .feat-strip { grid-template-columns: 1fr; } } /* ============================================ FOOTER ============================================ */ .site-footer { border-top: 2px solid var(--ink); padding: 32px; background: var(--paper); } .ft-row { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; } .ft-brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--type); font-weight: 800; font-size: 18px; color: var(--ink); letter-spacing: -0.02em; } .ft-tag { color: var(--text-muted); padding-left: 14px; border-left: 1px solid var(--border); } .ft-nav { display: flex; gap: 24px; margin-left: auto; } .ft-nav a { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; transition: opacity var(--transition); } .ft-nav a:hover { opacity: 0.6; } .ft-meta { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); } .ft-meta a { color: inherit; text-decoration: none; transition: color var(--transition); } .ft-meta a:hover { color: var(--ink); } .ft-dot { width: 3px; height: 3px; background: var(--border-strong); display: inline-block; } /* ============================================ BRUSH UNDERLINE — editor's blue.marker ============================================ */ .brush-underline { display: inline-block; position: relative; color: var(--orange); font-style: italic; font-weight: 800; } .brush-underline::after { content: ''; position: absolute; bottom: -8px; left: 0; right: 0; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 16'%3E%3Cpath d='M2 10 Q 50 2, 100 8 T 218 6' stroke='%23D86A3F' stroke-width='3.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; background-size: 100% 100%; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 1080px) { .feature-grid { grid-template-columns: repeat(4, 1fr); } .feature, .feat-wide { grid-column: span 2; } .feat-wide.feat-poster { grid-column: span 4; } .ep-tiles { grid-template-columns: repeat(3, 1fr); } .preview-body { grid-template-columns: 170px 1fr 200px; } .wrap-types { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 820px) { .header-nav, .header-right { display: none; } .hamburger { display: flex; } .hero-inner { grid-template-columns: 1fr; } .hero-preview { order: 2; } .hero-copy { order: 1; } .preview-body { grid-template-columns: 1fr; min-height: auto; max-height: none; } .preview-sidebar { display: none; } .preview-drawer { display: none; } .preview-grid { grid-template-columns: repeat(3, 1fr); min-height: 360px; max-height: 460px; overflow: hidden; } .feature-grid { grid-template-columns: 1fr; } .feature, .feat-wide, .feat-wide.feat-poster { grid-column: 1 / -1; } .ft-row { gap: 16px; } .ft-nav { margin-left: 0; flex-wrap: wrap; gap: 16px; } } @media (max-width: 540px) { .site-header { padding: 14px 18px; } .brand-tag { display: none; } .hero { padding: 40px 18px 32px; } .features, .showcase { padding-left: 18px; padding-right: 18px; } .feature { padding: 22px; } .ep-tiles { grid-template-columns: repeat(2, 1fr); } .preview-grid { grid-template-columns: repeat(2, 1fr); } .hero-meta { grid-template-columns: 1fr; } .hero-title { font-size: clamp(40px, 11vw, 64px); } .hero-sub { font-size: 15px; } .section-title { font-size: clamp(28px, 8vw, 40px); } .hero-cta { flex-direction: column; align-items: stretch; } .hero-cta .btn { width: 100%; justify-content: center; } .preview-body { padding: 6px; } .preview-grid { padding: 6px; gap: 6px; } .preview-chrome { padding: 8px 10px; gap: 8px; } .preview-appbar { padding: 6px 8px; gap: 6px; } .preview-appbar .appbar-section { padding: 3px 5px; font-size: 11px; } } /* Subtle entry fade for the hero preview — runs once on page load */ @keyframes hero-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .hero-preview { animation: hero-fade-in 600ms var(--ease) 200ms both; } .preview-grid > .track-card { animation: hero-fade-in 400ms var(--ease) both; } .preview-grid > .track-card:nth-child(1) { animation-delay: 350ms; } .preview-grid > .track-card:nth-child(2) { animation-delay: 380ms; } .preview-grid > .track-card:nth-child(3) { animation-delay: 410ms; } .preview-grid > .track-card:nth-child(4) { animation-delay: 440ms; } .preview-grid > .track-card:nth-child(5) { animation-delay: 470ms; } .preview-grid > .track-card:nth-child(6) { animation-delay: 500ms; } .preview-grid > .track-card:nth-child(7) { animation-delay: 530ms; } .preview-grid > .track-card:nth-child(8) { animation-delay: 560ms; } .preview-grid > .track-card:nth-child(9) { animation-delay: 590ms; } .preview-grid > .track-card:nth-child(10) { animation-delay: 620ms; } .preview-grid > .track-card:nth-child(11) { animation-delay: 650ms; } .preview-grid > .track-card:nth-child(12) { animation-delay: 680ms; } .preview-grid > .track-card:nth-child(13) { animation-delay: 710ms; } .preview-grid > .track-card:nth-child(14) { animation-delay: 740ms; } .preview-grid > .track-card:nth-child(15) { animation-delay: 770ms; } @media (prefers-reduced-motion: reduce) { .hero-preview, .preview-grid > .track-card { animation: none !important; } } /* ============================================ LEGAL PAGES (privacy.html, terms.html) ============================================ */ .legal { max-width: 720px; margin: 0 auto; padding: clamp(56px, 8vw, 96px) 28px clamp(64px, 9vw, 120px); } .legal-head { margin-bottom: 56px; } .legal-eyebrow { display: inline-block; border: 1px solid var(--ink); padding: 4px 10px; font-size: 11px; color: var(--ink); margin-bottom: 24px; } .legal-title { font-family: var(--type); font-weight: 800; font-size: clamp(40px, 5.5vw, 72px); line-height: 0.95; letter-spacing: -0.03em; margin: 0 0 20px; text-transform: uppercase; color: var(--ink); text-wrap: balance; } .legal-title em { font-style: normal; color: var(--orange); font-weight: 800; } .legal-sub { font-size: 18px; line-height: 1.55; color: var(--text-sec); margin: 0; max-width: 600px; } .legal-body section { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); } .legal-h2 { font-family: var(--type); font-weight: 800; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 14px; display: flex; align-items: baseline; gap: 12px; } .legal-h2 .mono-cap { color: var(--text-muted); font-size: 12px; font-weight: 700; } .legal-body p { font-size: 16px; line-height: 1.65; color: var(--ink-2); margin: 0 0 14px; max-width: 65ch; } .legal-body p:last-child { margin-bottom: 0; } .legal-body ul { margin: 0 0 14px; padding-left: 22px; max-width: 65ch; } .legal-body ul li { font-size: 16px; line-height: 1.65; color: var(--ink-2); margin-bottom: 6px; } .legal-body code { font-family: var(--mono); font-size: 13px; background: var(--paper-2); padding: 2px 6px; color: var(--ink); } .legal-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: text-decoration-color var(--transition); } .legal-body a:hover { text-decoration-color: var(--ink); }