Footprints Series

work in progress
March 2026

FILES

• background-1.png Backgrounds for contents and chapter heads 1 though 4
• background-2.png
• background-3.png
• background-4.png

Cover Alt text:

BOOK_TITLE: SUBTITLE by AUTHOR_NAME. Logo: Orca Footprints. The top image is DESCRIPTION_ONE; the lower image shows DESCRIPTION_ONE.

html

Contents

<ol class="toc">
    <li class="toc-fb"><a href="introduction.xhtml">Introduction</a></li>

    <li class="toc-1"><a class="bck bck-1" href="chapter-01.xhtml">Chapter One<span class="toc-sub">SUBTITLE</span></a> 

    <ol class="toc">
        <li class="toc-2"><a href="chapter-01.xhtml#XXX_1">SUBHEAD_1</a></li>

        <li class="toc-2"><a href="chapter-01.xhtml#XXX_2">SUBHEAD_2</a></li>
...
     </ol>
    </li>

Headings

    <h2 class="subhead" id="XXX_1"><span class="bck-1">SUBHEAD_1</span></h2>

Fonts

@font-face{
    font-family: amaranth;
    font-style: normal;
    font-weight: normal;
    src: url("../font/Amaranth.otf");
}

@font-face{
    font-family: amaranth;
    font-style: normal;
    font-weight: bold;
    src: url("../font/Amaranth-Bold.otf");
}

@font-face{
    font-family: amaranth;
    font-style: italic;
    font-weight: bold;
    src: url("../font/Amaranth-BoldItalic.otf");
}

@font-face{
    font-family: baron;
    font-style: normal;
    font-weight: normal;
    src: url("../font/Baron.otf");
}

@font-face{
    font-family: corebandi;
    font-style: normal;
    font-weight: normal;
    src: url("../font/CoreBandi.otf");
}

@font-face{
    font-family: corebandi-reg;
    font-style: normal;
    font-weight: normal;
    src: url("../font/CoreBandi-Regular.otf");
}

CSS

/* FOOTPRINTS CSS */

/* Title Page */

h1.titlepage{
    color: #b28e0c;
    filter: drop-shadow(.03em .03em 0 #000);
    font-family: corebandi-reg, sans-serif;
    font-size: 5em;
    margin: .5em 0 0;
}

h2.subtitle{
    font-family: baron, sans-serif;
    font-size: 1.5em;
    margin: .5em 0 1em;
}

h2.author{
    font-family: amaranth, sans-serif;
}


/* Contents */

ol.toc a,
a span.toc-sub{
    color: #000000 !important;
}

li.toc-fb{
    font-family: amaranth, sans-serif;
    text-align: left;
}

li.toc-1{
    font-family: baron, sans-serif;
    text-align: left;
    text-transform: uppercase;
}

span.toc-sub{
    display: block;
    font-size: 1.2em;
}

li.toc-1 li:first-child{
    margin-top: 1em;
}

li.toc-1 > a.bck{
    background-position: center left;
    background-size: contain;
    display: block; 
    padding: .25em 1em;
}

a.bck-1{
    background: url("../image/background-1.png") no-repeat;

}

a.bck-2{
    background: url("../image/background-2.png") no-repeat; 
}

a.bck-3{
    background: url("../image/background-3.png") no-repeat;
}

a.bck-4{
    background: url("../image/background-4.png") no-repeat;
}

li.toc-2{
    text-align: left;
    text-transform: initial;
}


/*Headers*/

h1.front-back{
    color: #BB4589;
    filter: drop-shadow(.03em .03em 0 #000);
    font-family: corebandi-reg, sans-serif;
    font-size: 4em;
    line-height: 1;
    margin: 10% 0 .5em;
    text-align: center;
}

h1.chapter-num{
    font-family: baron, sans-serif;
    font-size: 1.5em;
    font-variant-ligatures: none;
    font-weight: normal;
    line-height: 1em;
    margin: 10% 0 .5em 0;
    text-align: left;
    text-transform: uppercase;
}

span.num{
    background-position: center center;
    background-size: cover;
    padding: .5em 1em;
}

span.num-1{
    background: url("../image/background-1.png") no-repeat;
}

span.num-2{
    background: url("../image/background-2.png") no-repeat;
}

span.num-3{
    background: url("../image/background-3.png") no-repeat;
}

span.num-4{
    background: url("../image/background-4.png") no-repeat;
}

span.chapter-title{
    font-family: corebandi, sans-serif;
    font-size: 3em;
    font-weight: normal;
    line-height: 0.8;
    margin: .5em 0 .5em;
    text-align: center;
    text-transform: initial;
}

h2.subhead{
    display:inline-block;
    font-family: baron, sans-serif;
    font-variant-ligatures: none;
    font-size: 1.3em;
    line-height: 0.9;
    margin: 1em 0 .4em;
    padding: .15em .5em;
}

span.bck-1{
    background-color: #F9D4AC !important;
    padding: .05em .4em;
}

span.bck-2{
    background-color: #92D0CE !important;
    padding: .05em .4em;
}

span.bck-3{
    background-color: #AE5D7B !important;
    padding: .05em .4em;
}

span.bck-4{
    background-color: #BF9FC0 !important;
    padding: .05em .4em;
}