/* ═══════════════════════════════════════════════════════════ VERIDICTUM — Theme CSS Custom Properties Academic Journal Aesthetic Usage: 1. Import this file: @import './theme-styles.css'; 2. Use variables: color: var(--v-text); 3. Switch themes: add class .dark to or ═══════════════════════════════════════════════════════════ */ /* ═══ Fonts ═══ */ @import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap'); /* ═══════════════════════════════════════ Light Theme (SPA / Default) ═══════════════════════════════════════ */ :root { /* --- Fonts --- */ --v-font-serif: 'Libre Baskerville', 'Georgia', 'Times New Roman', serif; --v-font-sans: 'Source Sans 3', 'Helvetica Neue', sans-serif; --v-font-mono: 'IBM Plex Mono', 'Menlo', monospace; /* --- Backgrounds --- */ --v-bg: #FAF9F6; --v-surface: #FFFFFF; --v-surface-alt: #F5F4F0; /* --- Borders --- */ --v-border: rgba(0, 0, 0, 0.07); --v-border-strong: rgba(0, 0, 0, 0.12); /* --- Text Hierarchy --- */ --v-text: #1A1A1A; --v-text-sec: #4A4A4A; --v-text-muted: #8A8A85; --v-text-dim: #B5B5B0; /* --- Accent (Brand Green) --- */ --v-accent: #2D5F2D; --v-accent-light: #EDF5ED; --v-accent-dark: #1E3F1E; /* --- Semantic Colors --- */ --v-red: #9B2C2C; --v-red-bg: rgba(155, 44, 44, 0.06); --v-amber: #92600F; --v-amber-bg: rgba(146, 96, 15, 0.07); --v-blue: #1E40AF; --v-blue-bg: rgba(30, 64, 175, 0.06); --v-purple: #5B21B6; --v-purple-bg: rgba(91, 33, 182, 0.06); --v-green-bg: rgba(45, 95, 45, 0.06); /* --- Blockquote --- */ --v-blockquote-border: #2D5F2D; --v-blockquote-bg: #f5f9f5; /* --- Score Block --- */ --v-score-bg: #F5F4F0; --v-score-border: #dddddd; --v-score-text: #2D5F2D; /* --- Shadows (3 depth levels) --- */ --v-sh1: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06); --v-sh2: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08); --v-sh3: 0 12px 40px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06); /* --- Typography Scale --- */ --v-fs-hero: clamp(28px, 6vw, 42px); --v-fs-section: 24px; --v-fs-block: 19px; --v-fs-h2: 18px; --v-fs-h3: 16px; --v-fs-step: 17px; --v-fs-h4: 14px; --v-fs-score: 16px; --v-fs-body: 14px; --v-fs-small: 13px; --v-fs-desc: 12px; --v-fs-tag: 10px; --v-fs-code: 0.88em; --v-fs-button: 13px; --v-fs-logo: 17px; --v-fs-step-num: 28px; --v-fs-list-num: 12px; --v-fs-meta: 11px; --v-fs-source: 10px; --v-fs-footer: 11px; /* --- Font Weights --- */ --v-fw-light: 300; --v-fw-regular: 400; --v-fw-medium: 500; --v-fw-semibold: 600; --v-fw-bold: 700; /* --- Line Heights --- */ --v-lh-body: 1.7; --v-lh-body-wide: 1.8; --v-lh-heading: 1.15; --v-lh-compact: 1.0; --v-lh-relaxed: 1.85; --v-lh-heading-md:1.35; --v-lh-heading-h3:1.4; /* --- Letter Spacing --- */ --v-ls-hero: -0.02em; --v-ls-tag: 0.04em; --v-ls-category: 0.06em; /* --- Border Radius --- */ --v-radius-card: 12px; --v-radius-card-sm: 10px; --v-radius-button: 8px; --v-radius-button-pill: 24px; --v-radius-dropdown: 10px; --v-radius-item: 6px; --v-radius-score: 6px; --v-radius-badge: 20px; --v-radius-blockquote:0 5px 5px 0; --v-radius-code: 3px; --v-radius-skeleton: 4px; --v-radius-circle: 50%; --v-radius-scrollbar: 2px; /* --- Spacing --- */ --v-layout-max-width-landing: 680px; --v-layout-max-width-app: 760px; --v-layout-padding-landing: 0 16px; --v-layout-padding-app: 0 20px; --v-space-section: 40px 0 50px; --v-space-hero: 60px 0 50px; --v-space-card: 24px; --v-space-card-h: 16px 20px; --v-space-badge: 3px 10px; --v-space-button: 13px 28px; --v-space-button-sm: 7px 14px; --v-space-score: 12px 16px; --v-space-blockquote:8px 14px; --v-space-dropdown: 8px 12px; --v-space-input: 4px 10px; --v-gap-cards: 14px; --v-gap-step: 18px; --v-gap-nav: 8px; --v-gap-list: 8px; --v-gap-faq: 10px; --v-gap-badges: 8px; --v-gap-sources: 16px; --v-gap-lang: 4px; /* --- Margins (Markdown headings) --- */ --v-margin-h2: 26px 0 9px; --v-margin-h3: 22px 0 7px; --v-margin-h4: 16px 0 5px; --v-margin-score: 18px 0 10px; --v-margin-p: 3px 0; --v-margin-list: 3px 0; --v-margin-bq: 8px 0; --v-margin-hr: 16px 0; --v-margin-divider: 32px 0; --v-height-empty: 6px; /* --- Animation --- */ --v-spring-stiffness: 240; --v-spring-damping: 24; --v-duration-expand: 0.35s; --v-duration-collapse:0.25s; --v-duration-fade: 0.2s; --v-duration-hover: 0.2s; --v-duration-nav: 0.15s; --v-duration-shimmer: 1.8s; --v-duration-pulse: 1.2s; --v-ease-expand: cubic-bezier(0.25, 1, 0.5, 1); --v-stagger-delay: 0.07s; /* --- Scrollbar --- */ --v-scrollbar-width: 4px; --v-scrollbar-color: rgba(0, 0, 0, 0.07); /* --- Google Button --- */ --v-google-bg: #FFFFFF; --v-google-text: #3c4043; --v-google-border: #dadce0; --v-google-shadow: 0 1px 3px rgba(60, 64, 67, 0.08); } /* ═══════════════════════════════════════ Dark Theme (Landing Page) ═══════════════════════════════════════ */ .dark, [data-theme="dark"] { --v-bg: #1a1a1a; --v-surface: #1e1e1e; --v-surface-alt: #232323; --v-border: rgba(255, 255, 255, 0.06); --v-border-strong: rgba(255, 255, 255, 0.12); --v-text: #f0e6d3; --v-text-sec: #bfb5a3; --v-text-muted: #8a8070; --v-text-dim: #6b6358; --v-accent: #4a7c59; --v-accent-light: #5a9c6a; --v-accent-dark: #3a6348; --v-sh1: 0 1px 3px rgba(0, 0, 0, 0.12); --v-sh2: 0 4px 16px rgba(0, 0, 0, 0.15); --v-sh3: 0 12px 40px rgba(0, 0, 0, 0.25); --v-blockquote-border: #4a7c59; --v-blockquote-bg: rgba(74, 124, 89, 0.08); --v-score-bg: #232323; --v-score-border: rgba(255, 255, 255, 0.08); --v-score-text: #5a9c6a; --v-scrollbar-color: rgba(255, 255, 255, 0.08); --v-google-bg: #f0e6d3; --v-google-text: #1a1a1a; --v-google-border: transparent; --v-google-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } /* ═══════════════════════════════════════ Base Reset ═══════════════════════════════════════ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--v-font-sans); background: var(--v-bg); color: var(--v-text); font-size: var(--v-fs-body); line-height: var(--v-lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: var(--v-accent-light); color: var(--v-accent-dark); } input::placeholder, textarea::placeholder { color: var(--v-text-dim); } /* ═══════════════════════════════════════ Scrollbar ═══════════════════════════════════════ */ ::-webkit-scrollbar { width: var(--v-scrollbar-width); } ::-webkit-scrollbar-thumb { background: var(--v-scrollbar-color); border-radius: var(--v-radius-scrollbar); } /* ═══════════════════════════════════════ Keyframe Animations ═══════════════════════════════════════ */ @keyframes v-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes v-dot-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.4; } } .v-shimmer { background: linear-gradient( 90deg, var(--v-surface-alt) 25%, rgba(0, 0, 0, 0.04) 50%, var(--v-surface-alt) 75% ); background-size: 200% 100%; animation: v-shimmer var(--v-duration-shimmer) ease-in-out infinite; } .v-dot-pulse { animation: v-dot-pulse var(--v-duration-pulse) ease-in-out infinite; } /* ═══════════════════════════════════════ Utility Classes ═══════════════════════════════════════ */ /* Typography */ .v-serif { font-family: var(--v-font-serif); } .v-sans { font-family: var(--v-font-sans); } .v-mono { font-family: var(--v-font-mono); } .v-text-primary { color: var(--v-text); } .v-text-sec { color: var(--v-text-sec); } .v-text-muted { color: var(--v-text-muted); } .v-text-dim { color: var(--v-text-dim); } .v-text-accent { color: var(--v-accent); } /* Surfaces */ .v-bg { background: var(--v-bg); } .v-surface { background: var(--v-surface); } .v-surface-alt { background: var(--v-surface-alt); } /* Elevation */ .v-elevation-1 { box-shadow: var(--v-sh1); } .v-elevation-2 { box-shadow: var(--v-sh2); } .v-elevation-3 { box-shadow: var(--v-sh3); } /* Card */ .v-card { background: var(--v-surface); border: 1px solid var(--v-border); border-radius: var(--v-radius-card); box-shadow: var(--v-sh1); overflow: hidden; transition: box-shadow var(--v-duration-hover), transform var(--v-duration-hover); } .v-card:hover { box-shadow: var(--v-sh2); transform: translateY(-1px); } /* Badge */ .v-badge { font-family: var(--v-font-mono); font-size: var(--v-fs-tag); font-weight: var(--v-fw-medium); padding: var(--v-space-badge); border-radius: var(--v-radius-badge); background: var(--v-accent-light); color: var(--v-accent); letter-spacing: var(--v-ls-tag); text-transform: uppercase; display: inline-block; } /* Score Block */ .v-score { margin: var(--v-margin-score); padding: var(--v-space-score); background: var(--v-score-bg); border: 1px solid var(--v-score-border); border-radius: var(--v-radius-score); font-family: var(--v-font-serif); font-size: var(--v-fs-score); font-weight: var(--v-fw-bold); color: var(--v-score-text); } /* Blockquote */ .v-blockquote { margin: var(--v-margin-bq); padding: var(--v-space-blockquote); border-left: 3px solid var(--v-blockquote-border); background: var(--v-blockquote-bg); border-radius: var(--v-radius-blockquote); font-family: var(--v-font-sans); font-size: var(--v-fs-small); font-style: italic; color: var(--v-text-sec); line-height: var(--v-lh-body); } /* Divider */ .v-divider { display: flex; align-items: center; gap: 16px; justify-content: center; margin: var(--v-margin-divider); } .v-divider::before, .v-divider::after { content: ''; height: 1px; width: 50px; background: var(--v-border); } /* Button Primary */ .v-btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--v-accent); color: #fff; padding: var(--v-space-button); border-radius: var(--v-radius-button); font-size: var(--v-fs-button); font-weight: var(--v-fw-medium); font-family: var(--v-font-sans); border: none; cursor: pointer; transition: all var(--v-duration-hover); } .v-btn-primary:hover { background: var(--v-accent-dark); } /* Button Ghost */ .v-btn-ghost { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--v-text-muted); padding: var(--v-space-button-sm); border-radius: var(--v-radius-item); font-size: var(--v-fs-button); font-weight: var(--v-fw-medium); font-family: var(--v-font-sans); border: 1px solid var(--v-border); cursor: pointer; transition: all var(--v-duration-hover); } .v-btn-ghost:hover { background: var(--v-surface-alt); color: var(--v-text-sec); } /* Inline Code */ .v-code { font-family: var(--v-font-mono); font-size: var(--v-fs-code); background: var(--v-surface-alt); padding: 2px 5px; border-radius: var(--v-radius-code); color: var(--v-text); } /* Skeleton */ .v-skeleton { height: 10px; border-radius: var(--v-radius-skeleton); background: linear-gradient( 90deg, var(--v-surface-alt) 25%, rgba(0, 0, 0, 0.04) 50%, var(--v-surface-alt) 75% ); background-size: 200% 100%; animation: v-shimmer var(--v-duration-shimmer) ease-in-out infinite; } /* ═══════════════════════════════════════ PDF Print Overrides ═══════════════════════════════════════ */ @media print { @page { size: A4; margin: 18mm 16mm; } body { font-size: 10pt; line-height: 1.4; max-width: 178mm; margin: 0 auto; padding: 16mm; color: #1A1A1A; background: #fff; } h2 { font-size: 14pt; } h3 { font-size: 11.5pt; border-bottom: 0.5pt solid #ddd; } h4 { font-size: 10pt; } a { color: inherit; text-decoration: none; } }