diff options
Diffstat (limited to 'themes/rose-pine.css')
| -rw-r--r-- | themes/rose-pine.css | 1438 |
1 files changed, 0 insertions, 1438 deletions
diff --git a/themes/rose-pine.css b/themes/rose-pine.css deleted file mode 100644 index 83b1214..0000000 --- a/themes/rose-pine.css +++ /dev/null @@ -1,1438 +0,0 @@ -@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); -} |