/* Mythical Blue · Themes
picks the theme: mythical-blue (the original look),
neutral, or raperonzolo. still picks daylight or
moonlight. The day palettes below only apply in daylight, so every theme
keeps the same moonlight colours; Neutral and Raperonzolo drop the
nautical artwork (compass, ship, title banner) in both modes. */
/* Federo: an Art Nouveau display face for the Raperonzolo theme (only downloaded when used). */
@import url('https://fonts.googleapis.com/css2?family=Federo&display=swap');
.theme-title {
display: none;
}
/* ─── Shared: no nautical artwork outside Mythical Blue ────────────────── */
html:is([data-style="neutral"], [data-style="raperonzolo"]) :is(.compass-watermark, .ship-art, img[src*="title-banner"]) {
display: none !important;
}
html:is([data-style="neutral"], [data-style="raperonzolo"]) .ftr svg {
display: none;
}
html:is([data-style="neutral"], [data-style="raperonzolo"]) .theme-title {
display: block;
margin: 4px 0 10px;
color: var(--navy-deep);
font-family: 'Cinzel Decorative', serif;
font-size: 26px;
font-weight: 700;
letter-spacing: 1.5px;
line-height: 1.15;
text-align: center;
}
html[data-theme="moonlight"]:is([data-style="neutral"], [data-style="raperonzolo"]) .theme-title {
color: var(--moon-heading);
text-shadow: 0 0 12px rgba(121, 194, 255, .25);
}
/* On the character sheet the text title takes the banner's place at the top. */
html:is([data-style="neutral"], [data-style="raperonzolo"]) .sheet > .theme-title {
position: absolute;
top: 58px;
left: 90px;
right: 90px;
margin: 0;
font-size: 34px;
}
html:is([data-style="neutral"], [data-style="raperonzolo"]) .sheet {
padding-top: 150px;
}
@media (max-width: 768px) {
html:is([data-style="neutral"], [data-style="raperonzolo"]) .sheet > .theme-title {
top: 24px;
left: 60px;
right: 60px;
font-size: 22px;
}
html:is([data-style="neutral"], [data-style="raperonzolo"]) .sheet {
padding-top: 78px;
}
}
/* ─── Neutral ──────────────────────────────────────────────────────────── */
html[data-style="neutral"] .corner {
display: none;
}
html[data-style="neutral"]:not([data-theme="moonlight"]) {
--navy: #3b4048;
--navy-deep: #23272d;
--navy-soft: #5a606b;
--gold: #a39274;
--gold-deep: #6f6147;
--gold-light: #cdbd9a;
--ink: #2a2e35;
--ink-soft: #5d636e;
--tone-gold-rgb: 163, 146, 116;
--tone-gold-light-rgb: 190, 172, 134;
--tone-gold-deep-rgb: 111, 97, 71;
--tone-paper-rgb: 255, 255, 255;
--tone-navy-rgb: 59, 64, 72;
--tone-navy-deep-rgb: 35, 39, 45;
--tone-ink-soft-rgb: 93, 99, 110;
--tone-navy: #3b4048;
--tone-navy-deep: #23272d;
--tone-ink: #2a2e35;
--tone-ink-soft: #5d636e;
--tone-gold: #a39274;
--tone-gold-deep: #6f6147;
--tone-parchment: #f5f3ee;
--tone-parchment-image: linear-gradient(180deg, #f8f7f3, #f1eee7);
--tone-page-bg: linear-gradient(#3a3d43 0%, #474a51 50%, #55585f 100%);
}
/* Navigation icons in graphite and taupe instead of navy and gold. */
html[data-style="neutral"]:not([data-theme="moonlight"]) :is(.tab-icon, .nav-icon) {
filter: grayscale(.9) contrast(1.05);
}
/* ─── Raperonzolo: lavender and lilac with sage green ──────────────────── */
/* The Art Nouveau frame (below) replaces the corner ornaments. */
html[data-style="raperonzolo"] .corner {
display: none;
}
html[data-style="raperonzolo"]:not([data-theme="moonlight"]) {
--navy: #5b3f7e;
--navy-deep: #3e2860;
--navy-soft: #7b61a0;
--gold: #9d82c2;
--gold-deep: #4f7d4b;
--gold-light: #c8e2b8;
--ink: #3a2a52;
--ink-soft: #6c5a86;
--tone-gold-rgb: 157, 130, 194;
--tone-gold-light-rgb: 132, 178, 122;
--tone-gold-deep-rgb: 79, 125, 75;
--tone-paper-rgb: 255, 252, 255;
--tone-navy-rgb: 91, 63, 126;
--tone-navy-deep-rgb: 62, 40, 96;
--tone-ink-soft-rgb: 108, 90, 134;
--tone-navy: #5b3f7e;
--tone-navy-deep: #3e2860;
--tone-ink: #3a2a52;
--tone-ink-soft: #6c5a86;
--tone-gold: #9d82c2;
--tone-gold-deep: #4f7d4b;
--tone-parchment: #f3edf9;
/* One layer only: the image is also used inside background shorthands. */
--tone-parchment-image: linear-gradient(165deg, #f8f3fd 0%, #f1e8f8 55%, #edf2ea 100%);
--tone-page-bg: linear-gradient(#3b2752 0%, #523a6c 50%, #6b5287 100%);
}
/* Values typed over a calculated one are marked in green instead of amber. */
html[data-style="raperonzolo"]:not([data-theme="moonlight"]) .sheet .is-manual {
color: #3f7a3a !important;
}
/* Navy and gold icons shift to violet and green. */
html[data-style="raperonzolo"]:not([data-theme="moonlight"]) :is(.tab-icon, .nav-icon) {
filter: hue-rotate(38deg) saturate(1.15);
}
html[data-style="raperonzolo"]:not([data-theme="moonlight"]) .theme-title {
color: var(--navy);
}
html[data-style="raperonzolo"] .theme-title::before,
html[data-style="raperonzolo"] .theme-title::after {
content: '✿';
display: inline-block;
margin: 0 .45em;
color: var(--gold-deep);
font-size: .6em;
vertical-align: middle;
}
html[data-style="raperonzolo"][data-theme="moonlight"] .theme-title::before,
html[data-style="raperonzolo"][data-theme="moonlight"] .theme-title::after {
color: #c9b5ee;
}
/* ─── Moonlight for Neutral and Raperonzolo: plain dark blue, no texture ─── */
html:is([data-style="neutral"], [data-style="raperonzolo"])[data-theme="moonlight"] {
--tone-parchment-image: none;
}
html:is([data-style="neutral"], [data-style="raperonzolo"])[data-theme="moonlight"] :is(.start-page, .sheet, .dm-screen-header, .initiative-panel, .spell-picker-modal, .spell-editor-modal, .library-picker-modal, .npc-picker-modal, .home-page) {
background-image: none;
}
html:is([data-style="neutral"], [data-style="raperonzolo"])[data-theme="moonlight"] .login-card {
background-image: linear-gradient(135deg, hsla(calc(var(--night-hue) + 12.7deg), 88.6%, 13.7%, .90), hsla(calc(var(--night-hue) + 9.8deg), 83.5%, 19%, .72));
}
/* ─── Raperonzolo: Art Nouveau ─────────────────────────────────────────────
Arched panels, whiplash ornaments, a full arch framing the sheet, pill
tabs and buttons, ringed medallions, and Federo lettering. Shapes and
ornament apply in both modes; ornament colour follows --nouveau-line. */
html[data-style="raperonzolo"] {
--nouveau-font: 'Federo', 'Cinzel', serif;
--nouveau-line: var(--gold);
--nouveau-accent: var(--gold-deep);
}
html[data-style="raperonzolo"][data-theme="moonlight"] {
--nouveau-line: #c9b5ee;
--nouveau-accent: #9cc493;
}
/* Lettering */
html[data-style="raperonzolo"] :is(.sb-hdr, .abn, .dsbox-title, .tab, .theme-title, .inventory-subtab, .party-title, .party-subhdr, .start-page h1, .character-card strong, .home-page h1, .home-page h2, .login-card h1, .dm-screen-header h1, .initiative-panel h2, .npc-picker-header h2, .account-panel-title, .cal-month-of, .cal-year, .feature-name) {
font-family: var(--nouveau-font);
font-weight: 400;
}
html[data-style="raperonzolo"] .sb-hdr {
padding: 9px 8px 8px;
border-bottom: 1px solid transparent;
border-image: linear-gradient(90deg, transparent, var(--nouveau-line) 18%, var(--nouveau-line) 82%, transparent) 1;
font-size: 12.5px;
letter-spacing: 2.6px;
}
/* Whiplash curls either side of each section title (curl outward, bead toward the text). */
html[data-style="raperonzolo"] .sb-hdr::before,
html[data-style="raperonzolo"] .sb-hdr::after {
content: '';
width: 62px;
height: 16px;
background: var(--nouveau-line);
-webkit-mask: url('../assets/themes/raperonzolo/whiplash.svg') center / contain no-repeat;
mask: url('../assets/themes/raperonzolo/whiplash.svg') center / contain no-repeat;
}
html[data-style="raperonzolo"] .sb-hdr::before { left: 24px; }
html[data-style="raperonzolo"] .sb-hdr::after { right: 24px; transform: translateY(-50%) scaleX(-1); }
/* Arched panels */
html[data-style="raperonzolo"] .sb-card {
border-radius: 26px 26px 8px 8px;
}
html[data-style="raperonzolo"] .sb-card::after {
inset: 4px;
border-radius: 22px 22px 6px 6px;
}
html[data-style="raperonzolo"] .ab {
padding-top: 14px;
border-radius: 90px 90px 12px 12px / 44px 44px 12px 12px;
}
html[data-style="raperonzolo"] .ab::after {
inset: 4px;
border-radius: 86px 86px 9px 9px / 40px 40px 9px 9px;
}
html[data-style="raperonzolo"] .abn {
font-size: 12px;
letter-spacing: 2.4px;
}
html[data-style="raperonzolo"] :is(.bonbox, .cbox, .dsbox) {
border-radius: 20px 20px 6px 6px;
}
html[data-style="raperonzolo"] :is(.calendar-widget, .character-card, .login-card, .dm-screen-header, .initiative-panel, .home-page, .party-tile, .companion-card, .statblock-result-card, .custom-statblock-panel) {
border-radius: 28px 28px 10px 10px;
}
html[data-style="raperonzolo"] :is(.combatant-row, .inline-statblock) {
border-radius: 18px 18px 8px 8px;
}
html[data-style="raperonzolo"] :is(.spell-picker-modal, .spell-editor-modal, .library-picker-modal, .npc-picker-modal, .account-panel) {
border-radius: 28px;
}
html[data-style="raperonzolo"] .sheet-toolbar {
border-radius: 999px;
}
/* Ringed medallions for the header stats */
html[data-style="raperonzolo"] :is(.hdr-fields .hstat > input, .hp-readout input, .bonbox input, .modcircle) {
box-shadow: 0 0 0 3px rgba(var(--tone-paper-rgb), .75), 0 0 0 4px var(--nouveau-line);
}
html[data-style="raperonzolo"][data-theme="moonlight"] :is(.hdr-fields .hstat > input, .hp-readout input, .bonbox input, .modcircle) {
box-shadow: 0 0 0 3px hsla(calc(var(--night-hue) + 12deg), 70%, 12%, .9), 0 0 0 4px var(--nouveau-line);
}
/* Pill tabs and buttons */
html[data-style="raperonzolo"] .sheet .tabs {
gap: 6px;
padding: 5px;
border: 1px solid var(--nouveau-line);
border-radius: 999px;
}
html[data-style="raperonzolo"] .sheet .tab {
margin-bottom: 0;
padding: 7px 16px;
border: none;
border-radius: 999px;
letter-spacing: 2px;
}
html[data-style="raperonzolo"] .sheet .tab.on {
background: var(--navy);
color: #fff;
}
html[data-style="raperonzolo"] .sheet .tab.on .tab-icon {
filter: brightness(0) invert(1);
}
html[data-style="raperonzolo"][data-theme="moonlight"] .sheet .tab.on {
background: rgba(201, 181, 238, .24);
color: var(--moon-heading);
}
html[data-style="raperonzolo"] :is(.sheet-toolbar button, .add-btn, .feature-add, .inventory-add, .overview-action-link, .start-page button, .dm-primary-button, .dm-secondary-button, .dm-subtle-button, .account-primary, .account-secondary, .login-card button) {
border-radius: 999px;
}
html[data-style="raperonzolo"] .sheet-toolbar :is(.sheet-copy-button, .sheet-delete-button) {
border-radius: 50%;
}
/* Art Nouveau frame around the sheet: interlaced ribbons weaving along the
sides and looping into the corners, with rampion bellflower sprays in two
opposite corners. One SVG (drawn by tools/raperonzolo-frame.py) is used as
a 9-slice border image: the corners stay fixed and each side stretches
into one long flowing wave, whatever the sheet's height. The sheet's edge
sits 30% into the border, so the ribbons and flowers spill over it. */
html[data-style="raperonzolo"] .sheet::after {
content: '';
position: absolute;
inset: -48px;
z-index: 1;
border: 160px solid transparent;
border-image: url('../assets/themes/raperonzolo/frame.svg') 200 stretch;
pointer-events: none;
}
/* Leave room around the sheet for the frame to spill into. */
html[data-style="raperonzolo"] .sheet {
overflow-x: visible;
margin-bottom: 48px;
}
html[data-style="raperonzolo"] .sheet-toolbar {
margin-bottom: 64px;
}
html[data-style="raperonzolo"][data-theme="moonlight"] .sheet::after {
border-image-source: url('../assets/themes/raperonzolo/frame-moonlight.svg');
}
/* Keep the footer clear of the bottom corner loops. */
html[data-style="raperonzolo"] .sheet {
padding-bottom: 150px;
}
@media (max-width: 1099px) {
html[data-style="raperonzolo"] .sheet {
padding-left: 64px;
padding-right: 64px;
padding-bottom: 110px;
}
html[data-style="raperonzolo"] .sheet::after {
inset: -24px;
border-width: 80px;
}
html[data-style="raperonzolo"] .sheet-toolbar {
margin-bottom: 40px;
}
}
/* Title with a whiplash divider underneath instead of the flowers either side. */
html[data-style="raperonzolo"] .theme-title {
letter-spacing: 3px;
}
html[data-style="raperonzolo"] .theme-title::before {
content: none;
}
html[data-style="raperonzolo"] .theme-title::after {
content: '';
display: block;
width: min(260px, 80%);
height: 26px;
margin: 6px auto 0;
background: var(--nouveau-line);
-webkit-mask: url('../assets/themes/raperonzolo/divider.svg') center / contain no-repeat;
mask: url('../assets/themes/raperonzolo/divider.svg') center / contain no-repeat;
}
@media (max-width: 768px) {
html[data-style="raperonzolo"] .sheet {
padding-left: 26px;
padding-right: 26px;
padding-bottom: 70px;
}
html[data-style="raperonzolo"] .sheet {
width: auto;
margin: 0 10px 24px;
}
html[data-style="raperonzolo"] .sheet::after {
inset: -14px;
border-width: 48px;
}
html[data-style="raperonzolo"] .sheet-toolbar {
margin-bottom: 26px;
}
html[data-style="raperonzolo"] .theme-title::after {
height: 18px;
margin-top: 2px;
}
html[data-style="raperonzolo"] .sb-hdr::before,
html[data-style="raperonzolo"] .sb-hdr::after {
width: 44px;
}
}