Crimson Gothic Site Skin
Crimson Gothic AO3 Site Skin, featuring Cinzel and Cinzel Decorative
Deep Nocturnal Base: Low-strain dark charcoal background with deep velvet-crimson borders wrapping the work indexes and user dashboard.
Flattened Elements: Standard native borders and light-gray tag bubbles are completely flattened and darkened to match the theme.
Custom Typography: Integrated elegant serif scaling (`"Cinzel Decorative"` and `"Cinzel"`) that elevates the main titles and transforms the massive popular tag clouds into a dark fantasy index.
⚠️ Note: To see the intended custom typography, you must have Cinzel and Cinzel Decorative installed on your device. If you don't have them installed, the skin will seamlessly default to standard classical serifs like Georgia or Times New Roman.
body,
\#outer,
\#inner,
\#main,
.toggled form,
.dynamic form,
.secondary,
.dropdown,
.own,
.draft,
.draft .wrapper,
.unread,
.child,
.unwrangled,
.unreviewed,
dl.index dd,
.thread .even,
\#modal,
\#dashboard,
\#dashboard.own,
.dashboard.wrapper,
.home.wrapper,
.listbox,
fieldset fieldset.listbox {
background: #111111 !important;
color: #d8d8d8 !important;
font-family: "Cinzel", Georgia, "Times New Roman", serif;
line-height: 1.6;
font-size: 0.98em;
}
li.blurb,
.tags,
.meta {
font-size: 0.95em !important;
background: transparent !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
.heading {
font-family: Georgia, "Times New Roman", serif;
}
p,
.userstuff p {
margin: 0 0 1.2em 0;
text-align: justify;
font-size: 1.08em;
}
.preface .title,
.chapter .heading,
h2.heading,
\#main h2.heading,
.work .title {
font-family: "Cinzel Decorative", "Cinzel", Georgia, serif !important;
font-size: 2em !important;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
color: #b11c1c !important;
text-shadow: 0 0 6px rgba(120, 0, 0, 0.35);
}
h3,
.module h3,
.comment h3 {
text-align: center;
font-family: "Cinzel", Georgia, serif;
letter-spacing: 2px;
text-transform: uppercase;
color: #b11c1c !important;
margin-top: 2em;
margin-bottom: 1em;
}
.heading {
text-align: center;
letter-spacing: 1px;
}
h4 {
font-size: 1.200em !important;
font-family: Georgia, "Times New Roman", serif;
}
a,
a:link,
a:visited,
a.tag,
\#dashboard a,
\#dashboard span,
.tags a.tag {
color: #9f2b2b !important;
background: transparent !important;
}
a:hover,
a:focus,
a:link:hover,
a:visited:hover,
.tags a.tag:hover {
color: #b11c1c !important;
background: transparent !important;
}
\#header {
background: #2a2a2a !important;
}
\#header .primary {
background: linear-gradient(#1a1a1a 2%, #141414 95%, #333 100%) !important;
}
\#header a,
\#header a:visited,
\#header .current,
\#header .primary .open a,
\#header .primary .dropdown:hover a,
\#header .primary .dropdown a:focus {
color: #d8d8d8 !important;
}
\#header .actions a:hover,
\#header .actions a:focus,
\#header .dropdown:hover a,
\#header .open a {
background: #222222 !important;
color: #b11c1c !important;
}
\#header .menu,
\#small\_login,
\#header .dropdown:hover .current+.menu {
background: #222222 !important;
border: 1px solid #7a1f1f !important;
}
\#header .primary .menu a,
\#header .primary .menu .current {
color: #b11c1c !important;
}
\#header .search {
color: #111111 !important;
}
.search \[role="tooltip"\] {
background: #2a2a2a;
border: 1px solid #666;
color: #d8d8d8;
}
.actions a,
.actions a:link,
.action,
.action:link,
.actions input,
input\[type="submit"\],
button,
.actions label {
color: #d8d8d8 !important;
border: 1px solid #7a1f1f !important;
background: #222222 !important;
border-bottom: unset;
box-shadow: unset;
}
.actions a:hover,
.action:hover,
input\[type="submit"\]:hover,
button:hover {
background: #7a1f1f !important;
color: #ffffff !important;
}
.actions a:visited,
.action:visited,
.action a:link,
.action a:visited {
color: #d8d8d8 !important;
}
.current,
\#dashboard .current {
background: #7a1f1f !important;
color: #ffffff !important;
}
fieldset,
form dl,
fieldset dl dl,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
dd.hideme,
form blockquote.userstuff,
form.verbose legend,
.verbose form legend {
background: #111111 !important;
border: 1px solid #7a1f1f !important;
box-shadow: unset !important;
}
fieldset fieldset,
form blockquote.userstuff {
background: #111111 !important;
}
li.blurb,
.bookmark .user,
\#symbols-key dl {
border: 1px solid #7a1f1f !important;
background: #141414 !important;
}
dl.meta {
border: 1px solid #7a1f1f !important;
}
form dt {
border-bottom: 1px solid #444444;
}
.preface h3 {
border-color: #444444;
}
div.comment,
li.comment {
border: 1px solid #333333 !important;
background: #141414 !important;
}
.comment h4.byline {
background: #2a2a2a;
}
input,
textarea {
box-shadow: unset !important;
background: #222222 !important;
color: #d8d8d8 !important;
border: 1px solid #666666 !important;
}
form p {
padding: inherit;
}
form .notice,
form ul.notes {
box-shadow: unset;
}
form dd.required,
.required,
.required .autocomplete,
.autocomplete .notice,
.post .required .warnings,
dd.required {
color: #d8d8d8 !important;
}
.listbox .index,
.splash .favorite li:nth-of-type(odd) a,
.statistics .index li:nth-of-type(even) {
background: #141414 !important;
}
.listbox>.heading,
.listbox .heading a:visited {
color: #b11c1c !important;
}
li.relationships a {
background: #222222 !important;
border: 1px solid #444444 !important;
}
.filters .expander {
color: #b11c1c !important;
}
.notice,
.comment\_notice,
ul.notes,
.caution,
.error,
.comment\_error,
.alert.flash {
background: #1a1414 !important;
border: 1px solid #b11c1c !important;
box-shadow: unset;
}
.caution {
color: #b11c1c !important;
}
.draft {
border: 2px dashed #b11c1c !important;
}
.wrapper {
box-shadow: unset;
}
\[role\] .tags:nth-child(10) .tag {
background: #333;
}
\#footer {
background: linear-gradient(#1a1a1a 2%, #141414 95%, #333 100%);
border-top: 1px solid #444;
color: #808080;
}
\#modal {
border: 5px solid #7a1f1f !important;
}
hr,
.work .hr {
border: none !important;
height: 1px !important;
background: linear-gradient(to right, transparent, #7a1f1f, transparent) !important;
margin: 2em auto !important;
width: 60% !important;
}
blockquote,
.userstuff blockquote {
border-left: 2px solid #7a1f1f !important;
margin-left: 1.5em !important;
padding-left: 1em !important;
color: #bbbbbb !important;
font-style: italic;
background: transparent !important;
}
.center {
text-align: center !important;
letter-spacing: 4px !important;
color: #777 !important;
margin: 2em 0 !important;
}
p.intro:first-letter {
display: block;
font-size: 2.8em !important;
float: left !important;
line-height: 0.9 !important;
padding-right: 6px !important;
color: #b11c1c !important;
background: transparent !important;
}
\#dashboard ul,
\#dashboard li,
.dashboard .index,
.home .index,
.listbox .index,
li.blurb,
.wrapper,
.main ul,
.main li,
.listbox {
border: 1px solid #7a1f1f !important;
box-shadow: none !important;
\-webkit-box-shadow: none !important;
}
.tags,
.tags li,
.tags .tag,
.blurb ul.tags,
.blurb li,
a.tag,
.tags a,
.relationships a,
.characters a,
.freeforms a,
li.relationships,
li.characters,
li.freeforms {
border: none !important;
border-color: transparent !important;
outline: none !important;
box-shadow: none !important;
background-color: transparent !important;
background: transparent !important;
}