TU
86 lines
2.4 KiB
CSS
86 lines
2.4 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');
|
|
|
|
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--font-sans: "Inter", "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;
|
|
--font-serif: "Noto Serif JP", Georgia, Cambria, serif;
|
|
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
|
|
--color-artistic-primary: #8B7E74;
|
|
--color-artistic-dark: #2D2926;
|
|
--color-artistic-muted: #A69F92;
|
|
--color-artistic-bg: #FAF9F6;
|
|
--color-artistic-border: #E8E4DE;
|
|
--color-artistic-paper: #FDFCFB;
|
|
}
|
|
|
|
/* Base resets & scrollbar styles */
|
|
body {
|
|
background-color: #FAF9F6; /* Artistic light cream */
|
|
color: #2D2926; /* Deep artistic charcoal */
|
|
font-feature-settings: "palt"; /* Proportional Japanese spacing */
|
|
font-family: var(--font-serif);
|
|
}
|
|
|
|
/* Customized ledger and grid paper backgrounds */
|
|
.paper-lined {
|
|
background-image: linear-gradient(#E8E4DE 1px, transparent 1px);
|
|
background-size: 100% 4.5rem; /* Matches line-height height scaling */
|
|
}
|
|
|
|
.paper-grid {
|
|
background-image:
|
|
linear-gradient(to right, rgba(232, 228, 222, 0.7) 1px, transparent 1px),
|
|
linear-gradient(to bottom, rgba(232, 228, 222, 0.7) 1px, transparent 1px);
|
|
background-size: 1.5rem 1.5rem;
|
|
}
|
|
|
|
/* Custom shadow effects for premium depth */
|
|
.premium-shadow {
|
|
box-shadow: 0 12px 40px -10px rgba(139, 126, 116, 0.12), 0 4px 16px -4px rgba(139, 126, 116, 0.05);
|
|
}
|
|
|
|
/* Smooth custom selection styles - beautiful warm brown tint matching paper character */
|
|
::selection {
|
|
background-color: rgba(139, 126, 116, 0.25);
|
|
color: #2D2926;
|
|
}
|
|
|
|
/* Ruby spacing and formatting adjustments */
|
|
ruby {
|
|
ruby-position: over;
|
|
ruby-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
rt {
|
|
font-size: 0.55em;
|
|
font-weight: 500;
|
|
color: #A69F92; /* Artistic Muted */
|
|
user-select: none; /* Make furigana non-selectable so copy-pasting is easy */
|
|
padding-bottom: 0.15em;
|
|
letter-spacing: 0.1em;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
/* Interactive focus transitions */
|
|
.writing-line:hover rt {
|
|
color: #8B7E74;
|
|
}
|
|
|
|
/* Smooth custom scrollbars for subtle design */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: #FAF9F6;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #E8E4DE;
|
|
border-radius: 3px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #8B7E74;
|
|
}
|