HB WaterdeepStyle
HB WaterdeepStyle
HB WaterdeepStyle
```
```css
/* FONT IMPORTS ____________________________________________________ */
/* _________________________________________________________________ */
@import url('https://rawcdn.githack.com/Kaiburr-kath-hound/HomebreweryStyles/
be88dc909ce74e765dc546aed91b1499fa5d6e7b/FrostmaidenFonts.css');
@import url('https://rawcdn.githack.com/Kaiburr-kath-hound/HomebreweryStyles/
6ade797a215521264f7a7aca9355489333d9caba/EberronFonts.css');
/* PAGE TEXTURE */
.page {
background-image : url(https://i.imgur.com/8f5atVW.jpg);
background-size : cover;
background-position : 0 -14px;
}
.page:nth-of-type(odd) {
background-image : url(https://i.imgur.com/gMgOExQ.jpg);
}
/* HEADERS */
.page h1,
.page h2,
.page h3,
.page h4,
.page h5 {
letter-spacing : 1px;
font-weight : normal;
}
.page h5 {
font-weight : bold;
text-shadow : #000 0 0 0.1px;
}
.page h1+p {
margin-top : 5px;
}
/* NOTES */
.page .note {
background-color : #f0f5f7;
}
.page .note {
border-image : url(https://i.imgur.com/isSyyq3.png) 14 stretch;
border-image-outset : 6px 0;
border-image-width : 11px;
}
/* IMAGES */
.page img:not(.logo img):not(.frontcredit img) {
position : absolute;
z-index : -2;
user-select : none;
}
.page .emblem img {
z-index : 1!important;
}
/* DESCRIPTIVE NOTES */
.page .descriptive {
background-color : #ebe0e0;
border-image : url(https://i.imgur.com/x8S8ZvL.png) 12
stretch;
border-image-outset : 4px;
box-shadow : 0 0 6px #f9fbfa;
}
/* TABLES */
.page table:not(.monster table) tr:nth-child(odd) td {
background-color : #ece3c6;
}
/* MONSTER STATBLOCKS */
.page .monster.frame {
background-color : #f9ecbd;
}
/* ARTIST CREDITS */
/* ARTIST CREDITS */
.page .artist {
position : absolute !important;
bottom : 100px;
left : 60px;
transform : rotate(-90deg);
transform-origin : bottom left;
text-align : left;
font-family : ScalySansSmallCapsRemake;
font-size : 13px;
text-transform : lowercase;
text-shadow : #f3f0eb 0 0 10px;
}
.page:nth-of-type(even):not(:has(.insideCover)) .artist {
left : unset;
right : 60px;
transform : rotate(90deg);
transform-origin : bottom right;
}
/* SMALL CAPS */
.page caps {
font-variant : small-caps;
}
.page .backcover caps {
font-size : 120%;
}
/* WATERCOLOR STAIN */
.page [class*="watercolor"] {
background-color : #765856;
z-index : -3;
}
/* FOOTER IMAGE */
.page:after {
all : unset;
}
/* FOOTER TEXT */
.page:not(:has(.frontCover),:has(.credits)) .footnote {
left : 85px;
bottom : 40px;
font-size : 10.5px;
color : #510d00;
text-transform : uppercase;
text-align : left;
width : 400px;
letter-spacing : 0.5px;
z-index : -3;
}
.page:nth-child(even):not(:has(.frontCover),:has(.credits)) .footnote {
left : unset;
right : 85px;
text-align : right;
}
/* PAGE NUMBER */
.page .pageNumber{
left : 42px;
bottom : 29px;
font-size : 12px;
color : #f9e9c3;
text-align : left;
z-index : -3;
}
.page:nth-child(even) .pageNumber{
left : unset;
right : 42px;
text-align : right;
}
/* HYPERLINKS */
.page a {
color : inherit;
text-decoration : none;
font-weight : inherit;
}
.page a:hover{
text-decoration : underline;
}
/* QUOTE */
.page .quote {
font-family : Cormorant;
font-size : 15px;
line-height : 1em;
margin-top : 0px;
padding-bottom : 4px;
}
.page:has(.frontCover) {
padding-top : 78px;
}
.page:has(.frontCover) h1 {
margin-top : 16px;
text-transform : none;
}
.page:has(.frontCover) hr {
margin : 12px auto;
width : 10cm;
}
.page:has(.frontCover) h2,
.page:has(.frontCover) h3 {
filter : drop-shadow(0 0 1.3px black) drop-shadow(0 0 0 black)
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black);
font-family : 'Modesto Expanded';
font-size : 0.9cm;
letter-spacing : 0.4cm;
margin-top : 10px;
transform : ScaleX(0.9);
}
.page:has(.frontCover) h3 {
color : white;
border-bottom : none;
letter-spacing : 0.1cm;
font-size : 0.64cm;
}
.page:has(.frontCover) .footnote {
font-family : VeraCruz;
letter-spacing : 1px;
z-index : 1;
width : fit-content;
}
.page small {
position : relative;
text-transform : lowercase;
bottom : 10px;
font-size : 90%;
}
.page:has(.frontCover) .emblem,
.page:has(.frontCover) .color {
position : absolute;
top : 0;
left : 0;
background-size : 100% 100%;
background-repeat : no-repeat;
}
.page:has(.frontCover) .color {
height : 19px;
width : 650px;
background-color : black;
opacity : 75%;
z-index : -1;
-webkit-mask-image : url(https://i.imgur.com/bURATrX.png);
-webkit-mask-size : 100% 100%;
}
.page:has(.frontCover) .emblem {
height : 80px;
width : 340px;
z-index : 0;
background-image : url(https://i.imgur.com/y2xctk4.png);
}
.page:has(.frontCover) .emblem img {
left : 20px;
top : 0;
min-width : unset;
max-width : 50%;
max-height : 100%;
z-index : 1;
}
.page:has(.insideCover) {
background-image : url(https://i.imgur.com/WYe1EAC.png);
background-size : 100% 100%;
background-position : bottom;
}
.page:has(.insideCover) h1 {
font-size : 88px;
}
.page:has(.insideCover) h2 {
font-family : Nodesto;
font-size : 3em;
letter-spacing : 0.8px;
}
.page:has(.insideCover) h3,
.page:has(.insideCover) h4 {
font-family : 'Modesto Expanded';
font-weight : normal;
font-size : 31px;
letter-spacing : 1px;
border-bottom : unset;
margin : 40px -63px 0;
width : 816px;
}
.page:has(.insideCover) h4 {
letter-spacing : 19px;
}
.page:has(.insideCover) h3+h1,
.page:has(.insideCover) h4+h1 {
margin-top : 10px;
}
.page:has(.insideCover) h1+h3,
.page:has(.insideCover) h1+h4 {
margin-top : 10px;
}
.page:has(.insideCover) hr {
margin : 12px auto 12px;
}
.page:has(.credits),
.page:has(.toc) {
background-image : url(https://i.imgur.com/dKWzOCu.jpg);
}
.page:has(.credits):nth-of-type(odd),
.page:has(.toc):nth-of-type(odd) {
background-image : url(https://i.imgur.com/HhMeXqk.jpg);
}
.page .credits h1 {
font-size : 40px;
color : #58180D;
.page .credits p {
font-family : Martel_SansRegular;
font-style : normal;
font-size : 0.83em;
line-height : 1.5em;
text-indent : -1em;
margin-left : 1em;
}
.page .credits a {
color : #75520a;
font-weight : 900;
}
.page .frontcredit {
position : relative;
right : 16px;
width : 340px;
height : 240px;
margin-top : 15px;
margin-bottom : 110px;
}
.page .frontcredit::before {
content : '';
position : absolute;
top : 4px;
left : -14px;
height : 98%;
width : 106%;
background-image : url(https://i.imgur.com/M4yiDok.png);
background-size : 100% 100%;
}
.page .frontcredit h5 {
margin-top : 10px;
margin-bottom : -2px;
text-shadow : #000 0px 0px 0.1px;
}
.page .frontcredit p {
text-indent : 0em;
margin-left : 0em;
}
.page .toc h1 {
text-align : left;
font-size : 40px;
color : #6c0007;
}
.page .toc h3 {
font-family : BookInsanityRemake;
font-size : 13.5px;
font-weight : 800;
letter-spacing : 0px;
border-bottom : unset;
color : #6c0007;
}
.page .toc h4 {
margin-top : 2px;
margin-bottom : 0px;
font-family : BookInsanityRemake;
font-weight : 100;
color : black;
font-size : 13px;
letter-spacing : 0px;
}
.page .toc ul li + li h3 {
margin-top : 8px;
}
.page .toc a {
font-weight : inherit;
}
.page .chapter {
column-span : all;
display : block;
margin-bottom : 10px
}
.page .chapter:not(.intro) {
padding-top : 205px;
}
.page .chapter.tall {
padding-top : 305px;
}
.page .chapter.tall::before {
top : 366px;
}
.page .chapter.tall::after {
top : 334px;
}
.page .chapter h1 {
font-weight : normal;
letter-spacing : 0.5px;
margin-bottom : 40px;
font-size : 32px;
}
.page .chapter+p::first-letter,
.page .chapter+.quote::first-letter {
float : left;
font-family : SolberaImitationRemake;
line-height : 1em;
font-size : 15.4em;
margin-left : -30px;
margin-top : -75px;
margin-bottom : -33px;
padding-left : 20px;
padding-right : 11px;
color : black;
}
.page h1+.quote::first-letter,
.page .chapter+.quote::first-letter {
font-size : 88px;
margin-left : -4px;
}
.page .chapter+.quote::first-line,
.page .chapter+p:first-line {
font-variant : small-caps;
font-family : BookInsanityRemake;
font-size : 14px;
text-transform : lowercase;
line-height : 14px;
}
.page .chapter::before {
content : '';
position : absolute;
width : 210px;
height : 340px;
top : 266px;
left : -10px;
background-image : url(https://i.imgur.com/3bWgLfJ.png),
url(https://i.imgur.com/2Y0pIjR.png);
background-size : 104px 235px,
200px 340px;
background-position : top left,
bottom
right;
background-repeat : no-repeat;
mix-blend-mode : multiply;
z-index : -10;
}
.page .chapter::after {
content : '';
position : absolute;
width : 610px;
height : 267px;
top : 234px;
left : -50px;
background-repeat : no-repeat;
background-image : url(https://i.imgur.com/zTyY0S1.png),
url(https://i.imgur.com/6Y2pox9.png);
background-size : 610px 77px,
104px 235px;
background-position : top,
40px 32px;
z-index : -1;
filter : drop-shadow(0 6px 5px rgba(115, 91, 89, 0.5));
}
.page .chapter.short::after {
width : 780px;
left : -170px;
background-position : top left,
160px 32px;
}
.page .chapter.long::after {
width : 680px;
left : 0px;
background-position : top left,
-10px 32px;
background-size : 680px 77px,
104px 235px;
}
.page .chapter.intro::before {
top : -160px;
left : -100px;
width : 300px;
height : 610px;
background-image : url(/assets/watercolor/watercolor2.png),
url(/assets/watercolor/watercolor3.png);
background-size : 100%,
100%;
background-position : top left;
filter : hue-rotate(7deg) saturate(22%) brightness(98%);
transform : rotate(-20deg);
opacity : 50%;
}
.page .chapter.intro::after {
width : 104px;
height : 235px;
top : 32px;
background-image : url(https://i.imgur.com/6Y2pox9.png),
url(https://i.imgur.com/BqXpV2i.png);
background-size : 100% 100%;
background-position : left;
left : -20px;
}
.page .chapter.intro {
margin-bottom : -24px;
}
.page:has(.chapter) img,
.page:has(.chapter.tall) img {
position : absolute;
top : 0;
left : 0;
width : 100%;
z-index : -2;
left : -7px;
width : 102%;
-webkit-mask-image : url(https://i.imgur.com/DyKVYOS.png);
-webkit-mask-position : top;
-webkit-mask-size : 816px 411px;
-webkit-mask-repeat : no-repeat;
z-index : -2;
}
.page:has(.chapter.tall) img {
-webkit-mask-image : url(https://i.imgur.com/MwmPmV9.png);
-webkit-mask-size : 816px 422px;
}
/* "TOMES"__________________________________________________________ */
/* _________________________________________________________________ */
.page .tome {
position : relative;
font-family : ScalySansSmall;
.page .tome.clear,
.page .tome.empty {
border-image-source : url(https://i.imgur.com/f6vSDG4.png);
}
.page .tome.wide {
border-image-outset : 16px 34px;
padding : 8px 4px;
margin : 30px auto;
}
.page h1+p::first-letter,
.page h1+.quote::first-letter {
float : left;
font-family : SolberaImitationRemake;
line-height : 1em;
font-size : 12.2em;
margin-left : -40px;
margin-top : -20px;
margin-bottom : -22px;
padding-left : 40px;
padding-right : 4px;
color : rgba(0, 0, 0);
}
.page .tome h5 {
font-size : 0.375cm;
}
/* If you change the last "0" in the line below to "0.75", the backcover will
project a red shadow over the background image. Feel free to change the other three
rgba values to whatever color you'd like (I recommend using
https://www.hexcolortool.com/ to pick a color */
.page:has(.backCover) .backCover {
filter : drop-shadow(0 0 30px rgba(237, 31, 36, 0));
}
.page:has(.backCover) h1 {
font-size : 58px;
font-weight : normal;
}
.page:has(.backCover) p {
font-family : martel_sanssemibold;
font-size : 11.7px;
line-height : 1.6em;
text-indent : 0;
color : white;
}
.page:has(.backCover) caps {
font-size : 125%;
}
```
<!---
Here is a link to all my other Homebrewery templates, if you're interested:
https://homebrewery.naturalcrit.com/user/KaiburrKathHound?sort=alpha&dir=asc
Also, IF you want to buy me a coffee (or something), here's my Ko-fi page:
https://ko-fi.com/kaiburrkathhound
--->
{{frontCover}}
{{logo ![](/assets/naturalCritLogoRed.svg)}}
{{emblem
![image](https://i.imgur.com/Nfw1Mpq.png) {opacity:70%}
}}
{{color,background-color:#ecad5b}}
## DEEPWATER
# WYRM CAPER
___
{{banner HOMEBREW}}
{{footnote
A splendid new style is yours for the taking in this <br> template made for the
world's greatest roleplaying game
}}
\page
{{insideCover}}
#### DEEPWATER
# Wyrm Caper
___
![foreground](https://i.imgur.com/8O5HOVG.png){width:480px,left:170px,top:260px}
{{watercolor6,top:200px,left:200px,width:410px,background-
color:#ab9692,opacity:80%}}
{{watercolor10,top:200px,left:60px,width:610px,background-
color:#ab9692,opacity:80%}}
{{artist
[Shawn Wood](https://sgwart.com/)
}}
{{logo ![](/assets/naturalCritLogoRed.svg)}}
\page
{{credits,wide
{{columns:2
# Credits
**Template Designers:**
[u/Kaiburr_Kath-Hound](https://www.reddit.com/user/Kaiburr_Kath-Hound/)
::::
}}
{{frontcredit
<!---
Replace the url below with whatever image you use for the front cover; the image
will automatically arrange itself inside the display box.
If however your image is too tall, it might push the "On the Cover" section down
the page. If you need, you can adjust the "margin-bottom:0px" line below to be a
negative amount, for example: "margin-bottom:-100px".
--->
![image](https://i.imgur.com/rmwc2lg.jpg) {margin-bottom:0px;}
}}
{{footnote
The contents of this document is unofficial Fan Content permitted under the Fan
Content Policy. Not approved/endorsed by Wizards. Portions of the materials used
are property of Wizards of the Coast. ©Wizards of the Coast LLC.
}}
}}
\page
{{toc,wide
# Contents
\page
<!---
The Introduction chapter is formatted quite differently than other chapters, just a
heads up.
--->
{{chapter,intro
# Introduction
}}
Welcome to Waterdeep, the crown of the North, where a wondrous tale of urban
adventure is about to unfold. Our story begins with the gathering of adventurers at
the Yawning Portal Inn and Tavern. Volothamp Geddarm, the famous explorer and
raconteur, has a quest for them—one that entangles the characters in a bitter
conflict between two nefarious organizations. lf the adventurers complete his
quest, Volo rewards them handsomely. Yet a much greater prize lies hidden somewhere
in the City of Splendors, waiting to be claimed.
{{tome
## *Another* Tome?
The term "tome" is just a means to differentiate these elements from "notes",
"banners", and "descriptive" text boxes.
}}
{{tome,empty
## Empty Tome?
Adding the "empty" or "clear" tag to the tome class will remove the background,
keeping only the top and bottom borders.
}}
<!---
Tomes are pretty self-explanatory in their usage, their basically an extra set of
descriptive note blocks.
--->
{{tome,wide
# Wideness
You can also make wide tomes. and with a drop-cap no less, because why not?
The side and background of the "tome" will adjust to fit whatever text you need,
and the background is opaque, allowing you to easily place an image behind the
element without obscuring the text in front.
}}
{{watercolor4,top:150px,right:100px,width:330px,opacity:50%}}
{{pageNumber,auto}}
{{footnote Introduction}}
\page
{{chapter
# Chapter 2: Trollskull Alley
}}
A bar brawl in the Yawning Portal proves that nowhere is safe from the gang war
between the Zhentarim and the Xanathar Guild. In this atmosphere of danger, the
characters are offered a quest by Volothamp Geddarm. Volo promises a reward if they
can rescue his missing friend, Floon Blagmaar, who he fears has been caught up in
the conflict. Volo's quest is a straightforward introduction to the streets of
Waterdeep, providing the characters with an excuse to explore the city.
![image](https://i.imgur.com/1LfLX4g.jpg) {}
\column
{{note
##### Time to Drop Knowledge
Use notes to point out some interesting information.
{{descriptive
##### Time to Drop Knowledge
Use descriptive boxes to highlight text that should be read aloud.
{{pageNumber,auto}}
{{footnote Chapter 1 | A Friend in Need}}
\page
{{chapter,tall
# Chapter 6: The Final Enemy
}}
This adventure builds on the events of two previous adventures, The Sinister Secret
of Saltmarsh and Dangerat Dunwater. The following section provides a summary of
those adventures for characters who did not participate in the missions.
The Final Enemy is designed for four to six characters of 7th level. If you want to
use story-based character advancement (see chapter 8 of the Dungeon's Masterguide),
the characters gain a level for completing this adventure.
![image](https://i.imgur.com/OLv6bmH.jpg) {}
{{watercolor2,top:420px,right:20px,width:330px,opacity:50%}}
{{pageNumber,auto}}
{{footnote Chapter 6 | The Final Enemy}}
\page
Some of these creatures are also described in *Tomb of Annihilation*, *Volo's Guide
to Monsters*, and *Princes of the Apocalypse* but are reproduced here for your
convenience.
<!---
There is only one, copyright-friendly monster here of course, none from the books
above. Just like Woody after he gets his arm sewn back on in Toy Story 2, this
statblock is "for display ONLY."
--->
{{monster,frame
## Anime Sphinx
*Tiny beast, manic-depressive evil*
___
**Armor Class** :: 19 (chain mail, shield)
**Hit Points** :: 100(1d4 + 5)
**Speed** :: 30ft.
___
| STR | DEX | CON | INT | WIS | CHA |
|:-----:|:-----:|:-----:|:-----:|:-----:|:-----:|
|14 (+2)|2 (-4)|1 (-4)|13 (+2)|3 (-3)|1 (-4)|
___
**Condition Immunities** :: melancholy, drunk
**Senses** :: darkvision 60 ft., passive Perception 16
**Languages** :: Pottymouth
**Challenge** :: 10 (8682 XP)
___
***Onion Stench.*** Any creatures within 5 feet of this thing develops an
irrational craving for onion rings.
:
***Hangriness.*** This creature is angry, and hungry. It will refuse to do anything
with you until its hunger is satisfied.
When in visual contact with this creature, you must purchase an extra order of
fries, even if they say they aren't hungry.
### Actions
***Bulldog Rake.*** *Melee Weapon Attack:* +4 to hit, reach 5ft., one target. *Hit*
5 (1d6 + 2)
:
***Team Foot.*** *Melee Weapon Attack:* +4 to hit, reach 5ft., one target. *Hit* 5
(1d6 + 2)
:
***Turnbuckle Roll.*** *Melee Weapon Attack:* +4 to hit, reach 5ft., one target.
*Hit* 5 (1d6 + 2)
:
***Dual Throw.*** *Melee Weapon Attack:* +4 to hit, reach 5ft., one target. *Hit* 5
(1d6 + 2)
}}
{{watercolor10,top:500px,right:60px,width:450px,opacity:70%}}
{{pageNumber,auto}}
{{footnote Appendix C | Monsters and NPCs}}
\page
{{backCover}}
![background](https://i.imgur.com/rmwc2lg.jpg)
{left:5%,bottom:0px,top:unset,height:105%}
# Welcome to <br>Waterdeep
:
Famed explorer Volothamp Geddarm needs you to complete a simple quest. Thus beginsa
mad romp through the wards of Waterdeep as you uncover a villainous plot involving
some of the city's most influential figures.
:
A grand urban caper awaits you. Pit your skill and bravado against villains the
likes of which you've never faced before, and let the dragon hunt begin!
___
{{logo
![](/assets/naturalCritLogoWhite.svg)
Homebrewery.Naturalcrit.com
}}