:root { --ink: #111716; --muted: #66716c; --paper: #f8f8f5; --panel: #ffffff; --line: #e2e6e1; --dark: #111716; --dark-soft: #202825; --teal: #18b99a; --teal-dark: #087963; --coral: #e36f4d; --gold: #b79c53; --blue: #246bfe; --danger: #c13d32; --shadow: 0 18px 48px rgba(17, 23, 22, 0.11); --radius: 8px; --card: rgba(255, 255, 255, 0.86); --header-bg: rgba(248, 248, 245, 0.9); --hero-1: #f9faf6; --hero-2: #eef4ef; --btn-bg: var(--ink); --btn-ink: #ffffff; } /* ===== Theme presets (applied via [data-theme] on ) ===== */ [data-theme="ocean"] { --teal: #2f7df6; --teal-dark: #1b56c4; --paper: #f3f6fc; --hero-1: #f6f9ff; --hero-2: #e7f0ff; } [data-theme="sunset"] { --teal: #ef7438; --teal-dark: #c5521b; --paper: #fbf6f1; --hero-1: #fffaf5; --hero-2: #ffeede; } [data-theme="grape"] { --teal: #8b5cf6; --teal-dark: #6d3fd1; --paper: #f7f4fc; --hero-1: #faf8ff; --hero-2: #efe8ff; } [data-theme="midnight"] { --ink: #e8edf2; --muted: #93a1b2; --paper: #0d1117; --panel: #161c26; --card: #161c26; --line: #2a313c; --teal: #2dd4bf; --teal-dark: #5eead4; --header-bg: rgba(13, 17, 23, 0.85); --hero-1: #141c28; --hero-2: #0d1117; --btn-bg: var(--teal); --btn-ink: #052b24; --shadow: 0 18px 48px rgba(0, 0, 0, 0.55); } /* ===== Theme switcher (dropdown) ===== */ .theme-switch { position: relative; display: inline-flex; } .theme-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; background: color-mix(in srgb, var(--ink) 5%, transparent); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; color: var(--ink); font-weight: 650; font-size: 0.85rem; transition: transform 140ms ease, background 140ms ease; } .theme-toggle:hover { transform: translateY(-1px); } .theme-toggle-swatch { width: 16px; height: 16px; border-radius: 50%; background: #18b99a; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); } .theme-toggle[data-current="ocean"] .theme-toggle-swatch { background: #2f7df6; } .theme-toggle[data-current="sunset"] .theme-toggle-swatch { background: #ef7438; } .theme-toggle[data-current="grape"] .theme-toggle-swatch { background: #8b5cf6; } .theme-toggle[data-current="midnight"] .theme-toggle-swatch { background: #0d1117; box-shadow: inset 0 0 0 1px #2dd4bf; } .theme-toggle .caret { width: 10px; height: 10px; opacity: 0.55; } .theme-menu { position: absolute; top: calc(100% + 8px); right: 0; display: none; flex-direction: column; gap: 2px; min-width: 162px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); z-index: 40; } .theme-switch.is-open .theme-menu { display: flex; } .theme-menu button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: transparent; border: 0; border-radius: 8px; color: var(--ink); font-size: 0.9rem; font-weight: 650; cursor: pointer; text-align: left; } .theme-menu button:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); } .theme-menu button.is-active { background: color-mix(in srgb, var(--teal-dark) 14%, transparent); color: var(--teal-dark); } .theme-dot { width: 16px; height: 16px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); } .theme-dot.classic { background: #18b99a; } .theme-dot.ocean { background: #2f7df6; } .theme-dot.sunset { background: #ef7438; } .theme-dot.grape { background: #8b5cf6; } .theme-dot.midnight { background: #0d1117; box-shadow: inset 0 0 0 1px #2dd4bf; } /* ===== Share bar ===== */ .share-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .share-label { color: var(--muted); font-size: 0.85rem; font-weight: 750; margin-right: 2px; } .share-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 13px; border-radius: 10px; font-size: 0.85rem; font-weight: 800; cursor: pointer; border: 1px solid var(--line); background: var(--card); color: var(--ink); transition: transform 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease; } .share-btn:hover { transform: translateY(-1px); } .share-btn.fb:hover { background: #1877f2; color: #fff; border-color: #1877f2; } .share-btn.x:hover { background: #000; color: #fff; border-color: #000; } .share-btn.ln:hover { background: #0a66c2; color: #fff; border-color: #0a66c2; } .share-btn.wa:hover { background: #25d366; color: #fff; border-color: #25d366; } .share-btn.copy:hover { background: var(--teal-dark); color: #fff; border-color: var(--teal-dark); } .share-btn.is-copied { background: var(--teal-dark); color: #fff; border-color: var(--teal-dark); } /* ===== Social icons in the nav ===== */ .nav-social { display: inline-flex; gap: 6px; } .nav-social-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 8px; font-size: 0.72rem; font-weight: 800; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--muted); transition: background 160ms ease, color 160ms ease, transform 160ms ease; } .nav-social-btn:hover { background: var(--teal-dark); color: #fff; transform: translateY(-1px); } /* ===== Form controls: checkbox + honeypot ===== */ input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; } .checkbox-label { display: flex; align-items: center; gap: 10px; font-weight: 650; } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* ===== Admin: page block editor ===== */ .inline-add { display: inline-flex; gap: 8px; align-items: center; } .inline-add select { width: auto; } .block-list { display: grid; gap: 16px; } .block-card { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; } .block-head { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 12px 14px; background: color-mix(in srgb, var(--ink) 4%, transparent); border-bottom: 1px solid var(--line); } .block-drag { cursor: grab; user-select: none; font-size: 1.15rem; line-height: 1; color: var(--muted); padding: 2px 6px; border-radius: 6px; touch-action: none; } .block-drag:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); } .block-tag { font-weight: 800; font-size: 0.82rem; color: var(--teal-dark); text-transform: uppercase; letter-spacing: 0.04em; } .block-tools { display: flex; gap: 6px; margin-left: auto; } .block-card.is-dragging { opacity: 0.55; outline: 2px dashed var(--teal-dark); outline-offset: -2px; } .block-reorder-hint { margin: 0 0 4px; } .block-tools form { display: inline; } .block-tools .button { min-height: 34px; padding: 6px 12px; } .block-form { padding: 16px 14px; } /* ===== Public: rendered page blocks ===== */ .page-view { display: grid; gap: 22px; } .page-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .page-head h1 { margin: 0; font-size: clamp(2rem, 3.6vw, 3.2rem); } .page-block { max-width: 820px; } .page-heading { margin: 6px 0 0; font-size: clamp(1.4rem, 2.4vw, 2rem); } .page-text { font-size: 1.05rem; } .page-text p { margin: 0; } .page-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 980px; } .page-image { margin: 0; max-width: 980px; } .page-image img { width: 100%; border-radius: 12px; } .page-image figcaption { margin-top: 8px; color: var(--muted); font-size: 0.9rem; } .page-embed { position: relative; width: 100%; max-width: 980px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; } .page-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .page-caption { color: var(--muted); font-size: 0.9rem; margin: -12px 0 0; } .page-button .button { min-height: 46px; } /* ===== Contact form ===== */ .contact-form { display: grid; gap: 14px; max-width: 640px; padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); } .contact-form label { display: grid; gap: 6px; font-weight: 650; color: var(--muted); } /* ===== Admin inbox ===== */ .message-list { display: grid; gap: 14px; } .message-card { padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); display: grid; gap: 8px; } .message-card.is-unread { border-color: color-mix(in srgb, var(--teal-dark) 45%, var(--line)); background: color-mix(in srgb, var(--teal-dark) 5%, var(--panel)); } .message-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .message-email { color: var(--teal-dark); margin-left: 8px; font-size: 0.9rem; } .message-meta { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.85rem; } .message-subject, .message-body { margin: 0; } @media (max-width: 720px) { .page-columns { grid-template-columns: 1fr; } } /* ===== Hero premium polish ===== */ .platform-hero .eyebrow { display: inline-block; margin-bottom: 18px; padding: 7px 15px; border-radius: 999px; background: color-mix(in srgb, var(--teal) 14%, var(--card)); color: var(--teal-dark); border: 1px solid color-mix(in srgb, var(--teal) 30%, transparent); text-transform: none; font-size: 0.8rem; } .public-showcase-card { box-shadow: 0 40px 90px -30px color-mix(in srgb, var(--teal) 45%, rgba(17, 23, 22, 0.32)); transition: transform 220ms ease, box-shadow 220ms ease; } .public-showcase-card:hover { transform: translateY(-4px); } /* ===== Authors listing + author space ===== */ .author-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .author-card { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); transition: transform 160ms ease; } .author-card:hover { transform: translateY(-3px); } .author-card img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; flex: none; } .author-card strong { display: block; } .author-card-title { display: block; color: var(--teal-dark); font-size: 0.85rem; } .author-card-meta { display: block; color: var(--muted); font-size: 0.82rem; margin-top: 2px; } .author-strip a.author-chip { transition: transform 160ms ease; } .author-strip a.author-chip:hover { transform: translateY(-3px); } .author-hero { display: flex; gap: 24px; align-items: center; margin: 18px 0 32px; flex-wrap: wrap; } .author-hero img { width: 120px; height: 120px; border-radius: 20px; object-fit: cover; flex: none; box-shadow: var(--shadow); } .author-hero h1 { margin: 0 0 6px; } .author-hero .lead { color: var(--teal-dark); font-weight: 650; margin: 0 0 8px; } @media (max-width: 720px) { .author-hero { flex-direction: column; align-items: flex-start; } } /* ===== Admin topbar language switch ===== */ .admin-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .admin-lang { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); } .admin-lang .globe-icon { width: 18px; height: 18px; } /* ===== Contact page ===== */ .contact-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px; align-items: start; } .contact-info { display: grid; gap: 14px; align-content: start; } .contact-line { display: grid; gap: 2px; } .contact-line strong { color: var(--muted); font-size: 0.82rem; font-weight: 750; } /* ===== Author contact + vCard ===== */ .author-contact { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; } .vcard-box { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; } .vcard-qr { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.78rem; color: var(--muted); } .vcard-qr img { border-radius: 8px; background: #fff; padding: 6px; border: 1px solid var(--line); } @media (max-width: 720px) { .contact-layout { grid-template-columns: 1fr; } } /* ===== WordPress-style blog ===== */ .blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; } .blog-main { min-width: 0; } .blog-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } .blog-toolbar label { flex: 1 1 150px; display: grid; } .blog-toolbar input, .blog-toolbar select { width: 100%; } .blog-toolbar .button { flex: 0 0 auto; } .blog-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .blog-sidebar { display: grid; gap: 18px; align-content: start; } .widget { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow); } .widget-title { margin: 0 0 12px; font-size: 1rem; } .widget-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .widget-list li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .widget-list li a { font-weight: 600; } .widget-list li a:hover { color: var(--teal-dark); } .widget-list li span { color: var(--muted); font-size: 0.78rem; flex: none; } @media (max-width: 900px) { .blog-layout { grid-template-columns: 1fr; } } /* ===== Rich block media + lightbox ===== */ .lightbox-img { cursor: zoom-in; } .lightbox-overlay { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(8, 12, 16, 0.88); cursor: zoom-out; } .lightbox-overlay.is-open { display: flex; } .lightbox-overlay img { max-width: 94vw; max-height: 92vh; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); } .page-html { max-width: 820px; } .page-html iframe, .page-html img { max-width: 100%; } .page-video, .page-audio { max-width: 820px; } .page-video video { width: 100%; border-radius: 12px; display: block; background: #000; } .page-audio audio { width: 100%; } /* ===== Admin danger zone ===== */ .danger-zone { margin-top: 22px; padding: 18px; border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line)); background: color-mix(in srgb, var(--danger) 5%, var(--panel)); border-radius: 12px; } .danger-zone h2 { margin-top: 0; color: var(--danger); } /* ===== Pagination ===== */ .pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 28px; } .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink); font-weight: 650; transition: background 140ms ease, color 140ms ease, transform 140ms ease; } .page-link:hover { transform: translateY(-1px); color: var(--teal-dark); } .page-link.is-active { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); } .page-ellipsis { display: inline-flex; align-items: flex-end; padding: 0 4px; color: var(--muted); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif; line-height: 1.6; font-size: 16px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } input, select, textarea, button { font: inherit; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; min-height: 68px; padding: 12px clamp(18px, 5vw, 68px); background: var(--header-bg); border-bottom: 1px solid rgba(18, 21, 20, 0.08); backdrop-filter: blur(18px); } .brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 760; letter-spacing: 0; } .brand img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; } .site-nav { display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: 0.92rem; font-weight: 680; } .site-nav a:hover, .text-link:hover { color: var(--teal-dark); } .language-switch { display: inline-flex; gap: 4px; padding: 4px; background: rgba(17, 23, 22, 0.06); border-radius: 8px; } .language-switch a { padding: 5px 9px; color: var(--muted); border-radius: 6px; font-size: 0.85rem; } .language-switch a.active { background: var(--panel); color: var(--ink); box-shadow: 0 6px 18px rgba(18, 21, 20, 0.08); } .menu-toggle { display: none; width: 42px; height: 42px; padding: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; } .menu-toggle span { display: block; height: 2px; margin: 5px 0; background: var(--ink); } .hero { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(340px, 0.78fr); align-items: center; gap: clamp(28px, 6vw, 72px); min-height: 0; padding: clamp(56px, 8vw, 88px) clamp(18px, 5vw, 68px) clamp(48px, 7vw, 74px); background: linear-gradient(90deg, rgba(17, 23, 22, 0.045) 1px, transparent 1px), linear-gradient(180deg, rgba(17, 23, 22, 0.045) 1px, transparent 1px), linear-gradient(135deg, #fbfbf8 0%, #eef6f1 48%, #f8f2ec 100%); background-size: 42px 42px, 42px 42px, auto; color: var(--ink); } .hero-content { max-width: 760px; } .eyebrow { margin: 0 0 14px; color: var(--teal-dark); font-size: 0.76rem; font-weight: 800; text-transform: uppercase; } .hero h1 { max-width: 760px; margin: 0; font-size: clamp(2.15rem, 4.8vw, 4rem); line-height: 1.04; letter-spacing: 0; text-wrap: balance; } .hero h1 span { display: block; } .hero p { max-width: 620px; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.12rem); } .hero-actions, .form-actions, .table-actions, .link-stack, .action-stack { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 16px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; font-weight: 750; transition: transform 160ms ease, background 160ms ease, border-color 160ms ease; } .button:hover { transform: translateY(-1px); } .button-primary { background: var(--btn-bg); color: var(--btn-ink); } .button-soft { background: color-mix(in srgb, var(--teal-dark) 12%, transparent); color: var(--teal-dark); border-color: color-mix(in srgb, var(--teal-dark) 24%, transparent); } .button-ghost { background: transparent; color: var(--muted); border-color: var(--line); } .button-danger { background: rgba(193, 61, 50, 0.1); color: var(--danger); border-color: rgba(193, 61, 50, 0.22); } .full-width { width: 100%; } .hero-panel { align-self: center; display: flex; flex-direction: column; justify-content: end; gap: 16px; min-height: 0; padding: 14px; background: var(--card); border: 1px solid rgba(17, 23, 22, 0.11); border-radius: 8px; box-shadow: var(--shadow); backdrop-filter: blur(18px); } .hero-avatar { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: 8px; } .hero-panel h2, .hero-panel p { margin: 0; } .hero-panel h2 { font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.2; } .hero-panel p { color: var(--muted); font-weight: 760; } .section, .project-detail { width: min(1160px, calc(100% - 36px)); margin: 0 auto; padding: clamp(48px, 7vw, 82px) 0; } .two-column { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(24px, 6vw, 72px); } .section h2, .project-detail h1, .project-detail h2 { margin: 0 0 14px; line-height: 1.1; } .section h2 { font-size: clamp(1.8rem, 3.2vw, 3rem); letter-spacing: 0; } .lead { color: var(--muted); font-size: clamp(1rem, 1.35vw, 1.12rem); } .section-heading { max-width: 760px; margin-bottom: 26px; } .section-heading p { color: var(--muted); } .skill-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .skill-item { min-height: 72px; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 28px rgba(17, 23, 22, 0.05); font-weight: 740; } .filter-bar { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(160px, 220px) minmax(160px, 220px) auto auto; gap: 10px; margin-bottom: 24px; } input, select, textarea { width: 100%; padding: 11px 13px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; outline: none; } textarea { resize: vertical; } input:focus, select:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 22%, transparent); } .project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .project-card { overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 34px rgba(17, 23, 22, 0.07); } .project-cover { display: block; background: var(--dark); } .project-cover img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .project-card-body { padding: 16px; } .project-card h3 { margin: 10px 0 8px; font-size: 1.12rem; line-height: 1.25; } .project-card p { min-height: 50px; color: var(--muted); font-size: 0.94rem; } .project-card .author-line, .work-card .author-line { min-height: 0; margin: -2px 0 8px; color: var(--teal-dark); font-size: 0.84rem; font-weight: 760; } .card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 0.86rem; } .status-pill, .tag-row span { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 9px; border-radius: 7px; font-size: 0.78rem; font-weight: 760; } .status-pill { background: rgba(200, 168, 95, 0.16); color: #7a5b12; } .status-pill.in_progress { background: rgba(240, 111, 73, 0.14); color: #a54528; } .status-pill.completed { background: rgba(0, 168, 135, 0.14); color: var(--teal-dark); } .status-pill.published { background: rgba(0, 168, 135, 0.14); color: var(--teal-dark); } .status-pill.draft { background: rgba(120, 130, 150, 0.16); color: #51607a; } .tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; } .tag-row span { background: rgba(18, 21, 20, 0.06); color: var(--muted); } .text-link { color: var(--teal-dark); font-weight: 800; } .empty-state { padding: 36px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--muted); text-align: center; } .project-detail-header { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: end; margin-top: 28px; } .project-detail h1 { font-size: clamp(2.2rem, 4.5vw, 4.2rem); text-wrap: balance; } .detail-meta, .detail-sidebar, .detail-content, .admin-panel, .form-section { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; } .detail-meta { display: grid; gap: 12px; padding: 18px; } .detail-cover { width: 100%; aspect-ratio: 16 / 8; margin: 26px 0; object-fit: cover; border-radius: 8px; box-shadow: var(--shadow); } .project-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; } .detail-content, .detail-sidebar { padding: 24px; } .author-box { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .author-box img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; } .author-box h2, .author-box p { margin: 0; } .author-box h2 { font-size: 1.05rem; } .author-box p { color: var(--muted); font-size: 0.9rem; } .site-footer { padding: 56px clamp(18px, 5vw, 72px) 24px; background: var(--dark); color: #f8fbf7; } .footer-grid { display: grid; grid-template-columns: 1.2fr 0.8fr 1fr; gap: 28px; width: min(1160px, 100%); margin: 0 auto; } .footer-logo { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; } .clean-list { list-style: none; padding: 0; margin: 0; } .clean-list li { margin: 7px 0; } .social-links { display: flex; flex-wrap: wrap; gap: 10px; } .social-links a { color: var(--teal); } .copyright { width: min(1160px, 100%); margin: 36px auto 0; color: rgba(248, 251, 247, 0.58); } .auth-body { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: linear-gradient(135deg, rgba(0, 168, 135, 0.18), transparent 38%), var(--dark); } .auth-card { width: min(460px, 100%); padding: 26px; background: var(--panel); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28); } .auth-header { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; } .auth-header img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; } .auth-header p, .auth-header h1, .admin-topbar p, .admin-topbar h1 { margin: 0; } .auth-language { margin-bottom: 18px; } .auth-note { color: var(--muted); } .auth-note a { color: var(--teal-dark); font-weight: 800; } .stack-form, .admin-form { display: grid; gap: 16px; } .stack-form label, .admin-form label { display: grid; gap: 7px; color: var(--muted); font-size: 0.92rem; font-weight: 700; } .notice { margin: 14px 0; padding: 12px 14px; border-radius: 8px; font-weight: 700; } .notice-success { background: rgba(0, 168, 135, 0.13); color: var(--teal-dark); } .notice-error { background: rgba(193, 61, 50, 0.12); color: var(--danger); } .admin-body { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 100vh; background: #f2f4f0; } .admin-sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 18px; background: var(--dark); color: #f8fbf7; } .admin-brand { margin-bottom: 26px; } .admin-nav { display: grid; gap: 8px; } .admin-nav a, .admin-sidebar-footer .button { padding: 10px 12px; border-radius: 8px; color: rgba(248, 251, 247, 0.78); } .admin-nav a.active, .admin-nav a:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; } .admin-sidebar-footer { display: grid; gap: 12px; margin-top: auto; } .admin-main { width: min(1180px, 100%); padding: 26px; } .admin-topbar { margin-bottom: 22px; } .admin-topbar p { color: var(--muted); } .admin-topbar h1 { font-size: clamp(2rem, 4vw, 3.3rem); } .admin-section, .admin-grid { margin-bottom: 24px; } .stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; } .stat-card { padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; } .stat-card span { display: block; color: var(--muted); } .stat-card strong { display: block; margin-top: 8px; font-size: 2rem; } .admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; } .admin-panel, .form-section { padding: 20px; } .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; } .panel-heading h2 { margin: 0; } .compact-list { display: grid; gap: 10px; } .compact-list a { display: flex; justify-content: space-between; gap: 12px; padding: 12px; background: rgba(18, 21, 20, 0.04); border-radius: 8px; } .compact-list small { color: var(--muted); } .table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; } .admin-table { width: 100%; min-width: 860px; border-collapse: collapse; } .admin-table th, .admin-table td { padding: 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; } .admin-table th { color: var(--muted); font-size: 0.84rem; } .admin-table small { display: block; color: var(--muted); } .table-thumb { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; } .form-section { display: grid; gap: 16px; } .form-section h2 { margin: 0; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .form-help { margin: 0; color: var(--muted); font-size: 0.9rem; } .current-image { display: grid; gap: 10px; color: var(--muted); font-weight: 700; } .current-image img, .hidden-preview { width: 180px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); } .hidden-preview { display: none; } .platform-preview, .studio-preview { background: var(--paper); } .platform-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 14px clamp(20px, 4vw, 64px); background: var(--header-bg); border-bottom: 1px solid rgba(17, 23, 22, 0.08); backdrop-filter: blur(16px); } .platform-nav { display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: 0.92rem; font-weight: 720; } .platform-nav a:hover { color: var(--ink); } .platform-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.68fr); gap: clamp(28px, 5vw, 76px); align-items: center; padding: clamp(56px, 8vw, 104px) clamp(20px, 4vw, 64px) clamp(48px, 6vw, 80px); background: radial-gradient(58% 75% at 88% 6%, color-mix(in srgb, var(--teal) 24%, transparent), transparent 60%), radial-gradient(48% 62% at -6% 108%, color-mix(in srgb, var(--teal) 16%, transparent), transparent 55%), linear-gradient(180deg, var(--hero-1), var(--hero-2)); } .platform-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(78% 72% at 50% 24%, #000, transparent 80%); mask-image: radial-gradient(78% 72% at 50% 24%, #000, transparent 80%); pointer-events: none; } .platform-hero > * { position: relative; z-index: 1; } .platform-hero-copy { max-width: 760px; } .platform-hero h1 { margin: 0; max-width: 720px; font-size: clamp(2.2rem, 4.25vw, 4.25rem); font-weight: 780; line-height: 1.05; letter-spacing: 0; text-wrap: balance; } .platform-hero p { max-width: 640px; color: var(--muted); font-size: clamp(1rem, 1.25vw, 1.08rem); } .platform-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; } .publish-preview-card, .public-showcase-card, .studio-preview-card, .studio-panel, .work-card, .author-chip { background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); } .publish-preview-card { display: grid; gap: 14px; padding: 18px; } .public-showcase-card { display: grid; gap: 14px; padding: 14px; align-self: center; } .public-showcase-card > img, .public-showcase-card > .project-visual { width: 100%; aspect-ratio: 16 / 7.5; max-height: 260px; border-radius: 8px; object-fit: cover; } .public-showcase-card h2, .public-showcase-card p { margin: 0; } .public-showcase-card h2 { font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.15; } .public-showcase-card p { color: var(--muted); } .preview-topline, .work-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 0.82rem; font-weight: 760; } .status-dot { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 9px; background: rgba(24, 185, 154, 0.12); color: var(--teal-dark); border-radius: 7px; font-size: 0.78rem; font-weight: 820; } .preview-field, .preview-grid > div { display: grid; gap: 4px; padding: 14px; background: #f7f8f4; border: 1px solid var(--line); border-radius: 8px; } .preview-field span, .preview-grid span, .upload-zone span { color: var(--muted); font-size: 0.78rem; font-weight: 760; } .preview-field strong, .preview-grid strong { font-size: 1.04rem; } .preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .upload-zone { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; background: #111716; color: #ffffff; border-radius: 8px; } .upload-zone img { width: 92px; height: 70px; object-fit: cover; border-radius: 7px; } .platform-band, .authors-band { width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: clamp(42px, 6vw, 76px) 0; } .platform-section-head { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(280px, 0.3fr); gap: 24px; align-items: end; margin-bottom: 20px; } .platform-section-head h2 { margin: 0; font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1.05; } .platform-section-head p { color: var(--muted); } .work-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) 190px 190px auto; gap: 10px; margin-bottom: 18px; } .work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .work-card { overflow: hidden; padding: 14px; } .work-card img, .work-card > .project-visual, .feature-work > .project-visual { width: 100%; aspect-ratio: 16 / 8; max-height: 260px; border-radius: 8px; } .work-card img { object-fit: cover; } .cover-placeholder { width: 100%; aspect-ratio: 16 / 8; max-height: 260px; border-radius: 8px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 18px; color: #fff; font-weight: 760; font-size: 1.05rem; letter-spacing: 0.04em; background: linear-gradient(135deg, rgba(24, 185, 154, 0.34), transparent 38%), linear-gradient(160deg, #111716, #1b2431 56%, #0d1117); } .project-visual { position: relative; overflow: hidden; min-height: 190px; padding: 18px; background: #111716; border: 1px solid rgba(255, 255, 255, 0.08); } .visual-ai { background: linear-gradient(135deg, rgba(24, 185, 154, 0.34), transparent 38%), linear-gradient(160deg, #111716, #1b2431 56%, #0d1117); } .visual-app { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 22px; align-items: center; background: linear-gradient(135deg, #f9faf6, #d9f0e9); } .visual-brand { display: grid; place-items: center; background: linear-gradient(135deg, #101615, #22322d), #111716; } .visual-bar, .visual-stat-row span, .visual-chart, .visual-list span, .landing-lines span { display: block; border-radius: 7px; } .visual-bar { width: 42%; height: 16px; background: rgba(255, 255, 255, 0.84); } .visual-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; } .visual-stat-row span { height: 44px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.12); } .visual-chart { height: 74px; margin-top: 12px; background: linear-gradient(90deg, rgba(24, 185, 154, 0.42), rgba(36, 107, 254, 0.44)), rgba(255, 255, 255, 0.08); } .visual-list { display: grid; gap: 8px; margin-top: 12px; } .visual-list span { height: 10px; background: rgba(255, 255, 255, 0.24); } .phone-frame { width: 96px; height: 172px; margin: auto; background: #111716; border: 8px solid #26312f; border-radius: 28px; box-shadow: 0 18px 40px rgba(17, 23, 22, 0.22); } .landing-lines { display: grid; gap: 12px; } .landing-lines span { height: 18px; background: rgba(17, 23, 22, 0.16); } .landing-lines span:first-child { width: 80%; height: 32px; background: #111716; } .brand-mark { display: grid; place-items: center; width: 120px; height: 120px; background: var(--teal); color: #07100e; border-radius: 8px; font-size: 2.2rem; font-weight: 900; } .swatches { position: absolute; right: 18px; bottom: 18px; display: flex; gap: 8px; } .swatches span { width: 28px; height: 28px; border-radius: 7px; } .swatches span:nth-child(1) { background: var(--teal); } .swatches span:nth-child(2) { background: var(--blue); } .swatches span:nth-child(3) { background: var(--gold); } .swatches span:nth-child(4) { background: #ffffff; } .work-card h3 { margin: 12px 0 6px; font-size: 1.25rem; line-height: 1.2; } .work-card p { color: var(--muted); font-size: 0.94rem; overflow-wrap: anywhere; } .work-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .work-actions .button { min-height: 36px; padding: 8px 12px; font-size: 0.86rem; } .feature-work { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(260px, 0.75fr); gap: 16px; align-items: center; } .feature-work img, .feature-work > .project-visual { height: 100%; min-height: 240px; } .author-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .author-chip { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px; } .author-chip img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; } .author-chip span { display: block; color: var(--muted); font-size: 0.88rem; } .platform-footer { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(340px, 1.1fr); gap: 28px; align-items: center; padding: 42px clamp(20px, 4vw, 64px); background: #111716; color: #ffffff; } .platform-footer img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; } .platform-footer h2 { margin: 14px 0 6px; } .platform-footer p { max-width: 520px; color: rgba(255, 255, 255, 0.66); } .footer-social-buttons { display: flex; flex-wrap: wrap; gap: 10px; } .social-button { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 8px 12px; background: rgba(255, 255, 255, 0.08); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; font-size: 0.92rem; font-weight: 760; } .social-button span { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: var(--teal); color: #06100e; border-radius: 7px; font-size: 0.72rem; font-weight: 900; } .studio-preview { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; } .studio-sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 18px; background: #111716; color: #ffffff; } .studio-sidebar nav { display: grid; gap: 8px; margin-top: 28px; } .studio-sidebar nav a { padding: 10px 12px; color: rgba(255, 255, 255, 0.68); border-radius: 8px; } .studio-sidebar nav a.active, .studio-sidebar nav a:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; } .studio-user { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .studio-user img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; } .studio-user span { display: block; color: rgba(255, 255, 255, 0.62); font-size: 0.85rem; } .studio-main { padding: 24px; } .studio-topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; } .studio-topbar h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.2rem); } .studio-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; } .studio-form { display: grid; gap: 16px; } .studio-panel { display: grid; gap: 16px; padding: 18px; } .studio-panel > .button { justify-self: start; } .studio-panel h2, .studio-preview-card h2 { margin: 0; } .studio-preview-card { position: sticky; top: 24px; display: grid; gap: 12px; padding: 16px; } .studio-preview-card img, .studio-preview-card .project-visual { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; } .studio-preview-card h3 { margin: 0; font-size: 1.25rem; } .studio-preview-card p { color: var(--muted); } /* Keep the logout button aligned inside the sidebar grid. */ .logout-form { display: contents; } /* Subtle lift on interactive cards. */ .work-card, .project-card, .author-chip, .stat-card { transition: transform 180ms ease, box-shadow 180ms ease; } .work-card:hover, .project-card:hover { transform: translateY(-3px); box-shadow: 0 24px 60px rgba(17, 23, 22, 0.13); } /* Visible keyboard focus for accessibility. */ a:focus-visible, button:focus-visible, .button:focus-visible, .menu-toggle:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--teal-dark); outline-offset: 2px; } @media (max-width: 980px) { .hero, .two-column, .project-detail-header, .project-detail-grid, .footer-grid, .admin-grid, .platform-hero, .platform-section-head, .feature-work, .studio-layout { grid-template-columns: 1fr; } .hero { min-height: auto; } .hero-panel { min-height: auto; } .project-grid, .skill-grid, .stats-grid, .work-grid, .author-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .filter-bar, .work-toolbar { grid-template-columns: 1fr 1fr; } .admin-body, .studio-preview { grid-template-columns: 1fr; } .admin-sidebar, .studio-sidebar { position: static; height: auto; } .admin-sidebar, .studio-sidebar { gap: 16px; } .admin-brand { margin-bottom: 0; } .admin-nav, .studio-sidebar nav { grid-template-columns: repeat(4, minmax(118px, 1fr)); margin-top: 0; } .admin-sidebar-footer, .studio-user { margin-top: 0; } .admin-sidebar-footer { grid-template-columns: auto auto; justify-content: space-between; align-items: center; } .studio-user { padding-top: 14px; } .studio-preview-card { position: static; } } @media (max-width: 720px) { .site-header { min-height: 68px; } .menu-toggle { display: block; } .site-nav { position: absolute; top: 68px; right: 18px; left: 18px; display: none; flex-direction: column; align-items: stretch; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); } .site-nav.is-open { display: flex; } .hero h1 { font-size: clamp(2rem, 9vw, 2.8rem); } .hero { gap: 28px; padding-top: 44px; padding-bottom: 48px; } .hero-avatar { aspect-ratio: 16 / 8.5; max-height: 270px; } .project-grid, .skill-grid, .stats-grid, .form-grid, .work-grid, .author-strip, .preview-grid { grid-template-columns: 1fr; } .filter-bar, .work-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .platform-footer { grid-template-columns: 1fr; } .platform-nav { flex-wrap: wrap; } .platform-hero { padding-top: 38px; } .platform-hero h1 { font-size: clamp(2rem, 9vw, 2.75rem); } .platform-band, .authors-band { width: min(100% - 32px, 1240px); } .public-showcase-card > img, .public-showcase-card > .project-visual, .work-card img, .work-card > .project-visual, .feature-work > .project-visual { max-height: 220px; } .feature-work img { min-height: 0; } .publish-preview-card { padding: 14px; } .upload-zone { grid-template-columns: 1fr; } .studio-main { padding: 16px; } .studio-topbar { align-items: flex-start; flex-direction: column; } .admin-main { padding: 18px; } .admin-nav, .studio-sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } .panel-heading, .table-actions { align-items: stretch; flex-direction: column; } .auth-card .button, .filter-bar .button, .work-toolbar .button, .form-actions .button, .table-actions .button, .table-actions form { width: 100%; } } @media (max-width: 560px) { .platform-header { align-items: flex-start; flex-direction: column; gap: 12px; } .platform-nav { width: 100%; } .platform-actions .button, .studio-panel > .button, .work-actions .button, .footer-social-buttons .social-button { width: 100%; } .filter-bar, .work-toolbar { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } .button:hover, .work-card:hover, .project-card:hover { transform: none; } } /* ===== Mobile: admin tables become cards (must cascade after base .admin-table) ===== */ @media (max-width: 640px) { .table-wrap { overflow-x: visible; border: 0; background: transparent; } .admin-table { min-width: 0; border-collapse: collapse; } .admin-table thead { display: none; } .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; } .admin-table tr { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 14px; padding: 10px 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .admin-table td { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; } .admin-table tr td:last-child { border-bottom: 0; } .admin-table td[data-label] { display: flex; justify-content: space-between; align-items: center; gap: 14px; text-align: right; } .admin-table td[data-label]::before { content: attr(data-label); font-weight: 750; color: var(--muted); text-align: left; flex: none; } .admin-table td[data-label] .status-pill { margin-left: auto; } .admin-table td .table-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; } .admin-table td .table-actions .button, .admin-table td .table-actions form { flex: 1 1 auto; margin: 0; } .admin-table td .table-actions .button { width: 100%; text-align: center; } .admin-table .table-thumb { width: 64px; height: 48px; } } /* ===== Rich-text (WYSIWYG) editor ===== */ .rich-field { display: block; margin-top: 4px; } .rich-label { display: block; font-weight: 700; margin-bottom: 8px; color: var(--ink); } .rich-editor { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; } .rich-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; background: color-mix(in srgb, var(--ink) 4%, transparent); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; } .rt-btn { min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font-size: 0.9rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease, border-color 0.15s ease; } .rt-btn:hover { background: color-mix(in srgb, var(--teal-dark) 12%, var(--panel)); border-color: var(--teal-dark); } .rt-bold { font-weight: 800; } .rt-italic { font-style: italic; } .rt-underline { text-decoration: underline; } .rt-strike { text-decoration: line-through; } .rt-color { display: inline-flex; align-items: center; height: 34px; padding: 0 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; } .rt-color input[type="color"] { width: 22px; height: 22px; border: 0; padding: 0; background: none; cursor: pointer; } .rich-area { min-height: 280px; max-height: 70vh; overflow-y: auto; padding: 16px 18px; font-size: 1rem; line-height: 1.7; color: var(--ink); outline: none; } .rich-area:empty::before { content: attr(data-placeholder); color: var(--muted); } .rich-area:focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--teal-dark) 35%, transparent); } .rich-area h2 { font-size: 1.5rem; margin: 0.6em 0 0.3em; } .rich-area h3 { font-size: 1.2rem; margin: 0.6em 0 0.3em; } .rich-area p { margin: 0 0 0.8em; } .rich-area ul, .rich-area ol { margin: 0 0 0.8em 1.4em; } .rich-area blockquote { margin: 0 0 0.8em; padding: 6px 14px; border-left: 3px solid var(--teal-dark); color: var(--muted); } .rich-area img { max-width: 100%; height: auto; border-radius: 8px; } /* Tables in the editor and on the public site */ .rich-table, .rich-content table { border-collapse: collapse; width: 100%; margin: 0 0 1em; } .rich-table td, .rich-table th, .rich-content table td, .rich-content table th { border: 1px solid var(--line); padding: 8px 10px; vertical-align: top; } /* ===== Public rich content ===== */ .rich-content { font-size: 1.02rem; line-height: 1.8; color: var(--ink); } .rich-content h2 { font-size: 1.6rem; margin: 1.2em 0 0.4em; } .rich-content h3 { font-size: 1.25rem; margin: 1em 0 0.4em; } .rich-content h4 { font-size: 1.08rem; margin: 1em 0 0.4em; } .rich-content p { margin: 0 0 1em; } .rich-content ul, .rich-content ol { margin: 0 0 1em 1.5em; } .rich-content li { margin: 0.25em 0; } .rich-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 0.6em 0; } .rich-content a { color: var(--teal-dark); text-decoration: underline; } .rich-content blockquote { margin: 0 0 1em; padding: 10px 18px; border-left: 4px solid var(--teal-dark); background: color-mix(in srgb, var(--teal-dark) 6%, transparent); border-radius: 0 8px 8px 0; color: var(--muted); } .rich-content figure { margin: 0 0 1em; } .rich-content figcaption { color: var(--muted); font-size: 0.9rem; text-align: center; } @media (max-width: 640px) { .rich-toolbar { position: static; } .rich-area { min-height: 220px; } } /* ===== 404 page ===== */ .error-page { text-align: center; max-width: 560px; margin: 0 auto; padding: 48px 0 24px; } .error-page .error-code { font-size: clamp(4rem, 14vw, 8rem); font-weight: 900; line-height: 1; margin: 0; color: var(--teal-dark); letter-spacing: -0.04em; } .error-page h1 { margin: 8px 0 12px; } .error-page .work-actions { justify-content: center; margin-top: 22px; } /* ===== Analytics dashboard ===== */ .stat-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .stat-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 4px; } .stat-num { font-size: 1.9rem; font-weight: 900; color: var(--ink); line-height: 1; } .stat-label { color: var(--muted); font-size: 0.85rem; } .stat-chart { display: flex; gap: 6px; align-items: flex-end; height: 200px; padding: 8px 0 0; } .stat-bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; } .stat-bar-fill { width: 70%; max-width: 38px; background: linear-gradient(180deg, var(--teal-dark), color-mix(in srgb, var(--teal-dark) 65%, #fff)); border-radius: 6px 6px 0 0; min-height: 3px; } .stat-bar-count { font-size: 0.7rem; color: var(--muted); order: -1; } .stat-bar-day { font-size: 0.62rem; color: var(--muted); } .stat-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .stat-list { list-style: none; margin: 0; padding: 0; } .stat-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .stat-list li:last-child { border-bottom: 0; } .stat-count { font-weight: 800; color: var(--teal-dark); } .status-pill.pending { background: color-mix(in srgb, #d98a00 18%, transparent); color: #9a6300; } .status-pill.approved { background: color-mix(in srgb, var(--teal-dark) 18%, transparent); color: var(--teal-dark); } /* ===== Comments ===== */ .comments { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); } .comment-num { color: var(--muted); font-weight: 500; font-size: 0.9rem; } .comment-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 16px; } .comment-item { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; } .comment-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .comment-head span { color: var(--muted); font-size: 0.82rem; } .comment-empty { color: var(--muted); margin-bottom: 24px; } .comment-form h3 { margin: 0 0 12px; } /* ===== Newsletter signup ===== */ .footer-subscribe p { color: var(--muted); margin: 0 0 12px; } .subscribe-row { display: flex; gap: 8px; flex-wrap: wrap; } .subscribe-row input[type="email"] { flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); } .subscribe-row .button { white-space: nowrap; } @media (max-width: 880px) { .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-columns { grid-template-columns: 1fr; } }