diff options
Diffstat (limited to 'themes/rose-pine.css')
| -rw-r--r-- | themes/rose-pine.css | 1438 |
1 files changed, 1438 insertions, 0 deletions
diff --git a/themes/rose-pine.css b/themes/rose-pine.css new file mode 100644 index 0000000..83b1214 --- /dev/null +++ b/themes/rose-pine.css @@ -0,0 +1,1438 @@ +@import url("https://fonts.googleapis.com/css2?family=Zodiak:ital,wght@0,400;0,500;0,700;1,400;1,500&family=Cabinet+Grotesk:wght@400;500;700;800&family=Commit+Mono:ital,wght@0,400;0,700;1,400&display=swap"); +/* Fallback if variable fonts aren't available via Google */ +@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,500&family=Outfit:wght@400;500;700;800&family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&display=swap"); + +/* ═══════════════════════════════════════════════════════════ + ROSÉ PINE — Full Palette + ═══════════════════════════════════════════════════════════ */ +:root { + /* Base */ + --rp-base: #191724; + --rp-surface: #1f1d2e; + --rp-overlay: #26233a; + + /* Muted / subtle */ + --rp-muted: #6e6a86; + --rp-subtle: #908caa; + --rp-text: #e0def4; + + /* Accent spectrum */ + --rp-love: #eb6f92; /* pink-red */ + --rp-gold: #f6c177; /* warm gold */ + --rp-rose: #ebbcba; /* soft rose */ + --rp-pine: #31748f; /* teal-blue */ + --rp-foam: #9ccfd8; /* pale cyan */ + --rp-iris: #c4a7e7; /* lavender */ + --rp-highlight-low: #21202e; + --rp-highlight-med: #403d52; + --rp-highlight-high: #524f67; + + /* Semantic */ + --bg: var(--rp-base); + --surface: var(--rp-surface); + --surface-2: var(--rp-overlay); + --border: var(--rp-highlight-med); + --border-soft: rgba(196, 167, 231, 0.08); + --text: var(--rp-text); + --text-dim: var(--rp-subtle); + --text-muted: var(--rp-muted); + --accent: var(--rp-iris); + --accent-2: var(--rp-foam); + + /* Fonts */ + --serif: "Zodiak", "Playfair Display", Georgia, serif; + --sans: "Cabinet Grotesk", "Outfit", system-ui, sans-serif; + --mono: "Commit Mono", "JetBrains Mono", ui-monospace, monospace; + + --radius: 6px; + --max-w: 740px; + --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1); + --spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1); +} + +/* ═══════════════════════════════════════════════════════════ + RESET + ═══════════════════════════════════════════════════════════ */ +*, +*::before, +*::after { + box-sizing: border-box; +} +html { + scroll-behavior: smooth; +} + +/* ═══════════════════════════════════════════════════════════ + PAGE LOAD — staggered fade-up animation + ═══════════════════════════════════════════════════════════ */ +@keyframes fadeUp { + from { + opacity: 0; + transform: translateY(18px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes shimmer { + 0% { + background-position: -200% center; + } + 100% { + background-position: 200% center; + } +} + +@keyframes blink { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0; + } +} + +@keyframes progressPulse { + 0% { + box-shadow: 0 0 6px rgba(196, 167, 231, 0.4); + } + 50% { + box-shadow: 0 0 14px rgba(235, 111, 146, 0.6); + } + 100% { + box-shadow: 0 0 6px rgba(196, 167, 231, 0.4); + } +} + +@keyframes borderGlow { + 0% { + border-color: var(--rp-iris); + } + 33% { + border-color: var(--rp-foam); + } + 66% { + border-color: var(--rp-rose); + } + 100% { + border-color: var(--rp-iris); + } +} + +nav { + animation: fadeIn 0.5s ease both; +} +header { + animation: fadeUp 0.55s ease 0.1s both; +} +article > *:nth-child(1) { + animation: fadeUp 0.5s ease 0.15s both; +} +article > *:nth-child(2) { + animation: fadeUp 0.5s ease 0.2s both; +} +article > *:nth-child(3) { + animation: fadeUp 0.5s ease 0.25s both; +} +article > *:nth-child(4) { + animation: fadeUp 0.5s ease 0.3s both; +} +article > *:nth-child(5) { + animation: fadeUp 0.5s ease 0.32s both; +} +article > *:nth-child(n + 6) { + animation: fadeUp 0.5s ease 0.34s both; +} + +/* ═══════════════════════════════════════════════════════════ + BODY + ═══════════════════════════════════════════════════════════ */ +body { + margin: 0; + padding: 3.5rem 2rem 7rem; + background-color: var(--rp-base); + background-image: + /* Soft iris radial bloom at top */ + radial-gradient( + ellipse 70% 45% at 50% -10%, + rgba(196, 167, 231, 0.09) 0%, + transparent 65% + ), + /* Love pink whisper bottom-right */ + radial-gradient( + ellipse 50% 40% at 90% 110%, + rgba(235, 111, 146, 0.05) 0%, + transparent 55% + ), + /* Grain texture */ + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); + color: var(--rp-text); + font-family: var(--serif); + line-height: 1.85; + font-size: 18.5px; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; +} + +body > * { + max-width: var(--max-w); + margin-left: auto; + margin-right: auto; +} + +/* ═══════════════════════════════════════════════════════════ + HEADINGS + ═══════════════════════════════════════════════════════════ */ +h1, +h2, +h3, +h4, +h5 { + font-family: var(--sans); + line-height: 1.18; + letter-spacing: -0.022em; + scroll-margin-top: 2rem; +} + +/* h1 — iris → love shimmer gradient */ +h1 { + font-size: clamp(2rem, 5.5vw, 3.1rem); + font-weight: 800; + margin-bottom: 0.4rem; + background: linear-gradient( + 120deg, + var(--rp-text) 0%, + var(--rp-iris) 40%, + var(--rp-love) 70%, + var(--rp-rose) 100% + ); + background-size: 200% auto; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + animation: shimmer 6s linear infinite; +} + +/* h2 — foam */ +h2 { + font-size: 1.45rem; + font-weight: 700; + margin-top: 3.5rem; + color: var(--rp-foam); + padding-bottom: 0.55rem; + border-bottom: 1px solid var(--rp-highlight-med); + position: relative; +} + +/* h2 left indicator dot */ +h2::before { + content: ""; + position: absolute; + left: -1.1rem; + top: 50%; + transform: translateY(-60%); + width: 5px; + height: 5px; + border-radius: 50%; + background: var(--rp-foam); + opacity: 0.7; +} + +/* h3 — gold */ +h3 { + font-size: 1.15rem; + font-weight: 700; + margin-top: 2.2rem; + color: var(--rp-gold); +} + +/* h4 — rose */ +h4 { + font-size: 1rem; + font-weight: 700; + margin-top: 1.8rem; + color: var(--rp-rose); +} + +/* h5 — love, uppercase label */ +h5 { + font-size: 0.72rem; + font-weight: 700; + margin-top: 1.5rem; + color: var(--rp-love); + text-transform: uppercase; + letter-spacing: 0.12em; + font-family: var(--mono); +} + +/* ═══════════════════════════════════════════════════════════ + PARAGRAPHS & DROP CAPS + ═══════════════════════════════════════════════════════════ */ +p { + margin: 1.4rem 0; + color: #cac9e0; + font-size: 1rem; + line-height: 1.88; +} + +/* Drop cap — first paragraph after h1 */ +h1 + p::first-letter, +header + article > p:first-child::first-letter, +.drop-cap::first-letter { + font-family: var(--serif); + font-size: 4.2rem; + font-weight: 700; + font-style: italic; + float: left; + line-height: 0.78; + margin: 0.1em 0.12em -0.05em 0; + color: var(--rp-iris); + /* Faint text shadow bloom */ + text-shadow: 0 0 30px rgba(196, 167, 231, 0.35); + /* Animated colour cycle */ + animation: borderGlow 8s ease infinite; + -webkit-text-fill-color: var(--rp-iris); +} + +/* Drop cap after every major h2 section (opt-in) */ +h2 + p::first-letter { + font-family: var(--serif); + font-size: 2.6rem; + font-weight: 700; + font-style: italic; + float: left; + line-height: 0.82; + margin: 0.08em 0.1em 0 0; + color: var(--rp-foam); + -webkit-text-fill-color: var(--rp-foam); +} + +/* Lead paragraph */ +h1 + p { + font-size: 1.08rem; + color: var(--rp-subtle); + line-height: 1.92; +} + +/* ═══════════════════════════════════════════════════════════ + META / BYLINE + ═══════════════════════════════════════════════════════════ */ +.meta, +time, +.byline { + display: flex; + align-items: center; + gap: 0.8rem; + flex-wrap: wrap; + font-family: var(--mono); + font-size: 0.73rem; + letter-spacing: 0.06em; + color: var(--rp-muted); + margin-bottom: 2.8rem; + margin-top: 0.3rem; +} + +.meta::before, +time::before { + content: "◆"; + color: var(--rp-love); + font-size: 0.45rem; + animation: blink 3s ease-in-out infinite; +} + +/* ═══════════════════════════════════════════════════════════ + LINKS + ═══════════════════════════════════════════════════════════ */ +a { + color: var(--rp-foam); + text-decoration: none; + border-bottom: 1px solid rgba(156, 207, 216, 0.3); + transition: + color var(--transition), + border-color var(--transition); + position: relative; +} + +a:hover { + color: var(--rp-iris); + border-bottom-color: var(--rp-iris); +} + +/* ═══════════════════════════════════════════════════════════ + LISTS + ═══════════════════════════════════════════════════════════ */ +ul, +ol { + margin: 1.4rem 0; + padding-left: 0; + list-style: none; +} + +ul li, +ol li { + position: relative; + padding-left: 1.7rem; + margin: 0.55rem 0; + color: #cac9e0; + line-height: 1.78; +} + +/* ul — iris diamond */ +ul li::before { + content: "◇"; + position: absolute; + left: 0; + top: 0.05em; + color: var(--rp-iris); + font-size: 0.8rem; + transition: + color var(--transition), + transform var(--spring); +} + +ul li:hover::before { + color: var(--rp-love); + transform: rotate(45deg) scale(1.2); +} + +/* ol — love numbered */ +ol { + counter-reset: ol-counter; +} +ol li { + counter-increment: ol-counter; +} + +ol li::before { + content: counter(ol-counter, decimal-leading-zero); + position: absolute; + left: 0; + font-family: var(--mono); + font-size: 0.7rem; + color: var(--rp-love); + top: 0.3em; + transition: color var(--transition); +} + +ol li:hover::before { + color: var(--rp-gold); +} + +/* Nested lists */ +ul ul li::before { + color: var(--rp-foam); + content: "–"; + top: 0; +} +ol ol li::before { + color: var(--rp-rose); +} + +/* ═══════════════════════════════════════════════════════════ + HORIZONTAL RULE + ═══════════════════════════════════════════════════════════ */ +hr { + border: none; + margin: 4rem auto; + display: flex; + align-items: center; + justify-content: center; + gap: 0.6rem; + position: relative; + height: 1rem; +} + +hr::before, +hr::after { + content: ""; + flex: 1; + height: 1px; + background: linear-gradient(90deg, transparent, var(--rp-highlight-med)); +} + +hr::after { + background: linear-gradient(90deg, var(--rp-highlight-med), transparent); +} + +/* Centre ornament via a wrapping trick using outline */ +hr + * { + /* nothing needed — ornament is in pseudo */ +} + +/* We use a data attribute for ornament text, fallback to ✦ */ +hr[data-ornament]::before { + display: none; +} +hr[data-ornament]::after { + display: none; +} + +/* Default ornament via box-shadow outline */ +.ornament { + display: flex; + align-items: center; + justify-content: center; + gap: 0.6rem; + margin: 4rem 0; + color: var(--rp-muted); + font-family: var(--mono); + font-size: 0.7rem; + letter-spacing: 0.3em; +} + +.ornament::before, +.ornament::after { + content: ""; + flex: 1; + height: 1px; + background: linear-gradient( + 90deg, + transparent, + var(--rp-highlight-med) 50%, + transparent + ); +} + +/* ═══════════════════════════════════════════════════════════ + BLOCKQUOTE — love/rose palette + ═══════════════════════════════════════════════════════════ */ +blockquote { + margin: 2.8rem 0; + padding: 1.6rem 1.8rem 1.6rem 2rem; + background: var(--rp-surface); + border-left: 2px solid var(--rp-love); + border-radius: 0 var(--radius) var(--radius) 0; + position: relative; + transition: border-color var(--transition); +} + +blockquote::before { + content: "\201C"; + font-family: var(--serif); + font-size: 5rem; + line-height: 1; + color: var(--rp-love); + opacity: 0.15; + position: absolute; + top: -0.5rem; + left: 1.2rem; + pointer-events: none; + transition: opacity var(--transition); +} + +blockquote:hover::before { + opacity: 0.28; +} +blockquote:hover { + border-color: var(--rp-rose); +} + +blockquote p { + margin: 0; + font-style: italic; + font-size: 1.08rem; + color: var(--rp-rose); + line-height: 1.78; + position: relative; + z-index: 1; +} + +blockquote cite { + display: block; + margin-top: 0.9rem; + font-family: var(--mono); + font-size: 0.71rem; + letter-spacing: 0.05em; + color: var(--rp-muted); + font-style: normal; +} + +blockquote cite::before { + content: "— "; + color: var(--rp-love); +} + +/* Pull quote variant */ +.pullquote { + margin: 3rem -2rem; + padding: 2rem 3rem; + background: var(--rp-overlay); + border: none; + border-top: 1px solid var(--rp-highlight-med); + border-bottom: 1px solid var(--rp-highlight-med); + text-align: center; + border-radius: 0; +} + +.pullquote::before { + display: none; +} + +.pullquote p { + font-size: 1.3rem; + color: var(--rp-iris); + font-style: italic; +} + +/* ═══════════════════════════════════════════════════════════ + TABLES + ═══════════════════════════════════════════════════════════ */ +table { + width: 100%; + border-collapse: collapse; + margin: 2.2rem 0; + font-size: 0.88rem; + font-family: var(--mono); + background: var(--rp-surface); + border-radius: var(--radius); + overflow: hidden; + border: 1px solid var(--rp-highlight-med); +} + +thead { + background: var(--rp-overlay); +} + +th { + text-align: left; + padding: 0.75rem 1.1rem; + font-size: 0.68rem; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--rp-iris); + border-bottom: 1px solid var(--rp-highlight-med); + font-weight: 600; +} + +td { + padding: 0.65rem 1.1rem; + border-bottom: 1px solid rgba(64, 61, 82, 0.5); + color: var(--rp-subtle); + transition: + color var(--transition), + background var(--transition); + vertical-align: top; +} + +tr:last-child td { + border-bottom: none; +} + +tbody tr { + transition: background var(--transition); +} + +tbody tr:hover td { + background: rgba(196, 167, 231, 0.05); + color: var(--rp-text); +} + +/* ═══════════════════════════════════════════════════════════ + INLINE CODE + ═══════════════════════════════════════════════════════════ */ +code { + font-family: var(--mono); + font-size: 0.82rem; + background: var(--rp-overlay); + color: var(--rp-gold); + padding: 0.16rem 0.42rem; + border-radius: 4px; + border: 1px solid var(--rp-highlight-med); + word-break: break-word; + transition: + background var(--transition), + color var(--transition); +} + +code:hover { + background: var(--rp-highlight-med); + color: var(--rp-iris); +} + +/* ═══════════════════════════════════════════════════════════ + CODE BLOCKS — terminal styled + ═══════════════════════════════════════════════════════════ */ +.code-wrap { + margin: 2.2rem 0; + border-radius: var(--radius); + overflow: hidden; + border: 1px solid var(--rp-highlight-med); + transition: + border-color var(--transition), + box-shadow var(--transition); +} + +.code-wrap:hover { + border-color: var(--rp-iris); + box-shadow: + 0 0 0 1px rgba(196, 167, 231, 0.12), + 0 8px 32px rgba(25, 23, 36, 0.5); +} + +/* Terminal titlebar */ +.code-wrap .titlebar { + display: flex; + align-items: center; + justify-content: space-between; + background: var(--rp-overlay); + padding: 0.55rem 1rem; + border-bottom: 1px solid var(--rp-highlight-med); +} + +.code-wrap .titlebar .dots { + display: flex; + gap: 6px; + align-items: center; +} + +.code-wrap .titlebar .dot { + width: 11px; + height: 11px; + border-radius: 50%; + transition: opacity var(--transition); +} + +.code-wrap .titlebar .dot-close { + background: var(--rp-love); +} +.code-wrap .titlebar .dot-min { + background: var(--rp-gold); +} +.code-wrap .titlebar .dot-max { + background: var(--rp-foam); +} + +.code-wrap:not(:hover) .titlebar .dot { + opacity: 0.5; +} + +.code-wrap .titlebar .lang-label { + font-family: var(--mono); + font-size: 0.67rem; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--rp-muted); +} + +.code-wrap .titlebar .copy-btn { + font-family: var(--mono); + font-size: 0.65rem; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--rp-muted); + background: none; + border: 1px solid var(--rp-highlight-med); + border-radius: 3px; + padding: 0.15rem 0.5rem; + cursor: pointer; + transition: all var(--transition); +} + +.code-wrap .titlebar .copy-btn:hover { + color: var(--rp-iris); + border-color: var(--rp-iris); + background: rgba(196, 167, 231, 0.08); +} + +.code-wrap .titlebar .copy-btn.copied { + color: var(--rp-foam); + border-color: var(--rp-foam); +} + +/* Prompt bar */ +.code-wrap .prompt-bar { + display: flex; + align-items: center; + gap: 0.5rem; + background: var(--rp-surface); + padding: 0.4rem 1rem; + border-bottom: 1px solid var(--rp-highlight-low); + font-family: var(--mono); + font-size: 0.72rem; +} + +.prompt-bar .ps-user { + color: var(--rp-foam); +} +.prompt-bar .ps-at { + color: var(--rp-muted); +} +.prompt-bar .ps-host { + color: var(--rp-iris); +} +.prompt-bar .ps-colon { + color: var(--rp-muted); +} +.prompt-bar .ps-path { + color: var(--rp-gold); +} +.prompt-bar .ps-sign { + color: var(--rp-love); + margin-left: 2px; +} +.prompt-bar .ps-cmd { + color: var(--rp-text); + margin-left: 4px; +} + +.code-wrap pre { + margin: 0; + border: none; + border-radius: 0; + background: var(--rp-base); + padding: 1.2rem 1.4rem; + overflow-x: auto; + position: relative; +} + +.code-wrap pre::before { + display: none; +} /* override any global pre::before */ + +.code-wrap pre code { + background: none; + border: none; + padding: 0; + color: var(--rp-text); + font-size: 0.86rem; + line-height: 1.7; + font-family: var(--mono); +} + +.code-wrap pre code:hover { + background: none; + color: var(--rp-text); +} + +/* Rosé Pine syntax classes */ +.code-wrap .kw { + color: var(--rp-love); +} +.code-wrap .fn { + color: var(--rp-gold); +} +.code-wrap .str { + color: var(--rp-foam); +} +.code-wrap .num { + color: var(--rp-iris); +} +.code-wrap .cm { + color: var(--rp-muted); + font-style: italic; +} +.code-wrap .kv { + color: var(--rp-rose); +} +.code-wrap .type { + color: var(--rp-gold); +} +.code-wrap .op { + color: var(--rp-subtle); +} + +/* Fallback bare pre (without .code-wrap) */ +pre { + background: var(--rp-surface); + border: 1px solid var(--rp-highlight-med); + border-left: 2px solid var(--rp-iris); + padding: 1.3rem 1.5rem; + overflow-x: auto; + border-radius: var(--radius); + margin: 2rem 0; + position: relative; +} + +pre::before { + content: attr(data-lang); + position: absolute; + top: 0.6rem; + right: 0.9rem; + font-family: var(--mono); + font-size: 0.62rem; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--rp-muted); +} + +pre code { + background: none; + border: none; + padding: 0; + color: var(--rp-text); + font-size: 0.87rem; + line-height: 1.68; +} + +pre code:hover { + background: none; + color: var(--rp-text); +} + +/* ═══════════════════════════════════════════════════════════ + IMAGES & FIGURES + ═══════════════════════════════════════════════════════════ */ +img { + max-width: 100%; + height: auto; + display: block; + border-radius: var(--radius); + border: 1px solid var(--rp-highlight-med); + margin: 2.5rem auto; + transition: + border-color var(--transition), + box-shadow var(--transition); +} + +img:hover { + border-color: var(--rp-iris); + box-shadow: + 0 0 0 2px rgba(196, 167, 231, 0.1), + 0 12px 40px rgba(25, 23, 36, 0.6); +} + +figure { + margin: 2.8rem 0; +} + +figcaption { + font-family: var(--mono); + font-size: 0.71rem; + color: var(--rp-muted); + text-align: center; + margin-top: 0.75rem; + letter-spacing: 0.04em; +} + +figcaption::before { + content: "fig. "; + color: var(--rp-love); + font-style: italic; +} + +/* ═══════════════════════════════════════════════════════════ + CALLOUTS — full palette coverage + ═══════════════════════════════════════════════════════════ */ +.callout { + background: var(--rp-surface); + border: 1px solid var(--rp-highlight-med); + border-left: 3px solid var(--rp-iris); + border-radius: 0 var(--radius) var(--radius) 0; + padding: 1.1rem 1.3rem; + margin: 2rem 0; + font-size: 0.9rem; + color: var(--rp-subtle); + transition: + border-color var(--transition), + background var(--transition); + position: relative; +} + +.callout:hover { + background: var(--rp-overlay); +} + +.callout strong { + display: flex; + align-items: center; + gap: 0.4rem; + font-family: var(--mono); + font-size: 0.68rem; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--rp-iris); + margin-bottom: 0.45rem; +} + +/* Variants */ +.callout.love { + border-left-color: var(--rp-love); +} +.callout.love strong { + color: var(--rp-love); +} +.callout.love strong::before { + content: "✕"; +} + +.callout.gold { + border-left-color: var(--rp-gold); +} +.callout.gold strong { + color: var(--rp-gold); +} +.callout.gold strong::before { + content: "⚠"; + font-style: normal; +} + +.callout.pine { + border-left-color: var(--rp-pine); +} +.callout.pine strong { + color: var(--rp-pine); +} +.callout.pine strong::before { + content: "→"; +} + +.callout.foam { + border-left-color: var(--rp-foam); +} +.callout.foam strong { + color: var(--rp-foam); +} +.callout.foam strong::before { + content: "ℹ"; +} + +.callout.rose { + border-left-color: var(--rp-rose); +} +.callout.rose strong { + color: var(--rp-rose); +} +.callout.rose strong::before { + content: "◆"; + font-size: 0.5em; +} + +.callout strong::before { + content: "◆"; + font-size: 0.5em; + opacity: 0.7; +} + +/* ═══════════════════════════════════════════════════════════ + TAGS / BADGES + ═══════════════════════════════════════════════════════════ */ +.tag { + display: inline-block; + font-family: var(--mono); + font-size: 0.65rem; + letter-spacing: 0.09em; + text-transform: uppercase; + padding: 0.22rem 0.62rem; + border: 1px solid var(--rp-highlight-med); + border-radius: 100px; + color: var(--rp-muted); + margin-right: 0.4rem; + text-decoration: none; + border-bottom: 1px solid var(--rp-highlight-med); + transition: all var(--transition); + position: relative; + overflow: hidden; +} + +.tag::before { + content: ""; + position: absolute; + inset: 0; + background: var(--rp-iris); + opacity: 0; + transition: opacity var(--transition); + border-radius: inherit; +} + +.tag:hover { + border-color: var(--rp-iris); + color: var(--rp-iris); + transform: translateY(-1px); + box-shadow: 0 3px 10px rgba(196, 167, 231, 0.15); +} + +/* ═══════════════════════════════════════════════════════════ + KEYBOARD SHORTCUT / KBD + ═══════════════════════════════════════════════════════════ */ +kbd { + display: inline-block; + font-family: var(--mono); + font-size: 0.78rem; + background: var(--rp-overlay); + color: var(--rp-text); + padding: 0.15rem 0.5rem; + border-radius: 4px; + border: 1px solid var(--rp-highlight-high); + border-bottom-width: 2px; + line-height: 1.5; +} + +/* ═══════════════════════════════════════════════════════════ + DEFINITION LIST + ═══════════════════════════════════════════════════════════ */ +dl { + margin: 1.6rem 0; +} + +dt { + font-family: var(--sans); + font-weight: 700; + color: var(--rp-gold); + margin-top: 1rem; + font-size: 0.95rem; +} + +dt::after { + content: ":"; + color: var(--rp-muted); +} + +dd { + margin: 0.3rem 0 0 1.4rem; + color: var(--rp-subtle); + font-size: 0.93rem; + border-left: 2px solid var(--rp-highlight-med); + padding-left: 0.9rem; +} + +/* ═══════════════════════════════════════════════════════════ + FOOTNOTES + ═══════════════════════════════════════════════════════════ */ +.footnotes { + margin-top: 4rem; + padding-top: 1.5rem; + border-top: 1px solid var(--rp-highlight-med); + font-family: var(--mono); + font-size: 0.78rem; + color: var(--rp-muted); + counter-reset: fn; +} + +.footnotes p { + font-size: 0.78rem; + color: var(--rp-muted); + margin: 0.4rem 0; + padding-left: 1.6rem; + position: relative; +} + +sup { + font-family: var(--mono); + font-size: 0.65rem; + color: var(--rp-love); + margin-left: 1px; + vertical-align: super; + line-height: 0; +} + +a[id^="fn-"] { + color: var(--rp-love); + border-bottom: none; + font-family: var(--mono); + font-size: 0.7rem; +} + +/* ═══════════════════════════════════════════════════════════ + NAVIGATION — pine/iris + ═══════════════════════════════════════════════════════════ */ +nav { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem 0 3rem; + border-bottom: 1px solid var(--rp-highlight-med); + margin-bottom: 3.5rem; + flex-wrap: wrap; + gap: 1rem; +} + +nav .logo { + font-family: var(--sans); + font-weight: 800; + font-size: 1.05rem; + letter-spacing: -0.025em; + color: var(--rp-text); + text-decoration: none; + border-bottom: none; + display: flex; + align-items: center; + gap: 0.4rem; + transition: color var(--transition); +} + +nav .logo::before { + content: "✿"; + color: var(--rp-love); + font-size: 0.9rem; + animation: blink 4s ease-in-out infinite; +} + +nav .logo:hover { + color: var(--rp-iris); +} +nav .logo:hover::before { + color: var(--rp-rose); +} + +nav ul { + display: flex; + gap: 0.3rem; + margin: 0; + padding: 0; + list-style: none; +} + +nav ul li { + padding: 0; + margin: 0; +} +nav ul li::before { + display: none; +} + +nav a { + font-family: var(--mono); + font-size: 0.71rem; + letter-spacing: 0.07em; + text-transform: uppercase; + color: var(--rp-muted); + text-decoration: none; + border-bottom: none; + padding: 0.3rem 0.7rem; + border-radius: var(--radius); + transition: all var(--transition); +} + +nav a:hover { + color: var(--rp-iris); + background: rgba(196, 167, 231, 0.08); + border-bottom: none; +} + +nav a.active { + color: var(--rp-iris); + background: rgba(196, 167, 231, 0.1); +} + +/* ═══════════════════════════════════════════════════════════ + ARTICLE HEADER DECORATION + ═══════════════════════════════════════════════════════════ */ +header { + position: relative; + padding-bottom: 2.5rem; + border-bottom: 1px solid var(--rp-highlight-med); + margin-bottom: 3rem; +} + +/* ═══════════════════════════════════════════════════════════ + FOOTER + ═══════════════════════════════════════════════════════════ */ +footer { + margin-top: 6rem; + padding: 2rem 0 1rem; + border-top: 1px solid var(--rp-highlight-med); + font-family: var(--mono); + font-size: 0.71rem; + letter-spacing: 0.04em; + color: var(--rp-muted); + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; +} + +footer a { + color: var(--rp-muted); + border-bottom: none; + transition: color var(--transition); +} + +footer a:hover { + color: var(--rp-iris); +} + +.footer-left::before { + content: "✿ "; + color: var(--rp-love); +} + +/* ═══════════════════════════════════════════════════════════ + READING PROGRESS — iris → love → gold + ═══════════════════════════════════════════════════════════ */ +.progress-bar { + position: fixed; + top: 0; + left: 0; + height: 2px; + background: linear-gradient( + 90deg, + var(--rp-iris), + var(--rp-love), + var(--rp-gold) + ); + z-index: 999; + width: 0%; + animation: progressPulse 3s ease infinite; + transition: width 0.08s linear; +} + +/* ═══════════════════════════════════════════════════════════ + BLINKING CURSOR + ═══════════════════════════════════════════════════════════ */ +.cursor::after { + content: "▍"; + color: var(--rp-iris); + animation: blink 1.1s step-end infinite; + margin-left: 2px; + font-size: 0.85em; +} + +/* ═══════════════════════════════════════════════════════════ + TABLE OF CONTENTS + ═══════════════════════════════════════════════════════════ */ +.toc { + background: var(--rp-surface); + border: 1px solid var(--rp-highlight-med); + border-left: 3px solid var(--rp-pine); + border-radius: 0 var(--radius) var(--radius) 0; + padding: 1.2rem 1.4rem; + margin: 2.5rem 0; + font-size: 0.88rem; +} + +.toc-title { + font-family: var(--mono); + font-size: 0.68rem; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--rp-pine); + margin-bottom: 0.9rem; + display: flex; + align-items: center; + gap: 0.4rem; +} + +.toc-title::before { + content: "≡"; + font-size: 1rem; + line-height: 1; +} + +.toc ol { + margin: 0; + counter-reset: toc-counter; +} + +.toc ol li { + counter-increment: toc-counter; + padding-left: 1.4rem; + margin: 0.3rem 0; + color: var(--rp-subtle); + font-size: 0.88rem; +} + +.toc ol li::before { + content: counter(toc-counter) "."; + color: var(--rp-pine); + font-size: 0.75rem; + top: 0.2em; +} + +.toc a { + color: var(--rp-subtle); + border-bottom: none; + transition: color var(--transition); +} + +.toc a:hover { + color: var(--rp-foam); +} + +/* ═══════════════════════════════════════════════════════════ + SELECTION & SCROLLBAR + ═══════════════════════════════════════════════════════════ */ +::selection { + background: rgba(196, 167, 231, 0.22); + color: var(--rp-text); +} + +::-webkit-scrollbar { + width: 6px; + height: 6px; +} +::-webkit-scrollbar-track { + background: var(--rp-base); +} +::-webkit-scrollbar-thumb { + background: var(--rp-highlight-med); + border-radius: 3px; +} +::-webkit-scrollbar-thumb:hover { + background: var(--rp-highlight-high); +} + +/* ═══════════════════════════════════════════════════════════ + ABBR + ═══════════════════════════════════════════════════════════ */ +abbr[title] { + border-bottom: 1px dotted var(--rp-muted); + cursor: help; + text-decoration: none; + color: var(--rp-rose); +} + +/* ═══════════════════════════════════════════════════════════ + MARK / HIGHLIGHT + ═══════════════════════════════════════════════════════════ */ +mark { + background: rgba(246, 193, 119, 0.2); + color: var(--rp-gold); + border-radius: 2px; + padding: 0.05em 0.2em; +} + +/* ═══════════════════════════════════════════════════════════ + RESPONSIVE + ═══════════════════════════════════════════════════════════ */ +@media (max-width: 700px) { + body { + padding: 2rem 1.3rem 5rem; + font-size: 17px; + } + h1 { + font-size: 1.9rem; + } + h2 { + font-size: 1.25rem; + } + h2::before { + display: none; + } + nav { + flex-wrap: wrap; + gap: 0.8rem; + } + nav ul { + gap: 0; + } + footer { + flex-direction: column; + text-align: center; + } + .pullquote { + margin: 2rem -1.3rem; + padding: 1.5rem; + } +} + +/* ═══════════════════════════════════════════════════════════ + FOCUS ACCESSIBILITY + ═══════════════════════════════════════════════════════════ */ +:focus-visible { + outline: 2px solid var(--rp-iris); + outline-offset: 3px; + border-radius: var(--radius); +} |