@charset "utf-8";
/* ==========================================================================
gayfetishgoth.com — script titles only
The brand font plus the .t1 / .t1a / .t1b / .t1c / .t2 / .t3 title classes
from gfg.css, with none of gfg.css's page-wide rules (body, links, h1–h4,
tables). For pages that keep their own look but show titles picked in the
admin editors — published blog posts and the dictionary:
Copied from gfg.css sections 1, 2 and 5: change those there, then here.
========================================================================== */
/* 1. Brand font ----------------------------------------------------------- */
/* Freebooter Script (Graham Meade, Apostrophic Lab) — the face of the
gayfetishgoth wordmark and the silver page-title images. */
@font-face {
font-family: "Freebooter Script";
src: url("fonts/freebooter-script.woff2") format("woff2"),
url("fonts/freebooter-script.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* 2. Tokens --------------------------------------------------------------- */
:root {
/* ground + text */
--gfg-black: #000000;
--gfg-panel: #0d0a12;
--gfg-text: #ffffff;
--gfg-text-soft: #cccccc;
--gfg-text-faint: #999999;
/* purples, deepest to lightest (from the site's header frames) */
--gfg-purple-900: #320064;
--gfg-purple-800: #410e5c; /* section header bar */
--gfg-purple-700: #4e019d;
--gfg-purple-600: #5f06b8;
--gfg-purple-500: #7c08ed;
--gfg-purple-300: #9d73e3; /* subheaders */
--gfg-purple-200: #b5abfc; /* link hover */
/* answers / Taier's voice */
--gfg-blue: #7b92fb;
/* silver */
--gfg-silver-hi: #ffffff;
--gfg-silver: #d9d9de;
--gfg-silver-mid: #8e8e97;
--gfg-silver-lo: #4a4a52;
/* lines */
--gfg-line: #333333;
--gfg-line-soft: #222222;
/* type */
--gfg-font-body: Tahoma, "Trebuchet MS", Verdana, Geneva, sans-serif;
--gfg-font-script: "Freebooter Script", "Edwardian Script ITC", "Brush Script MT", cursive;
--gfg-size-body: 14px;
--gfg-size-small: 12px;
--gfg-size-tiny: 10px;
}
/* 5. T1 / T2 / T3 — silver script titles ---------------------------------- */
/* Live-text versions of the chrome page-title images.
Use on any element: caring for your latex garments
Write the text in lowercase, like the wordmark. */
.t1, .t2, .t3 {
font-family: var(--gfg-font-script);
font-weight: normal;
font-style: normal;
text-transform: lowercase;
letter-spacing: 0.01em;
/* Freebooter's swashes reach 1.04em above and 0.59em below the
baseline; a line-height under ~1.65 cuts them off under the chrome fill */
line-height: 1.7;
color: var(--gfg-silver);
/* reset any h1/h2 bar or underline */
background: none;
border: 0;
border-image: none;
/* side room for swashes, which the chrome fill would otherwise clip */
padding: 0 0.35em;
}
/* chrome fill where the browser supports clipped gradients */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.t1, .t2, .t3 {
background-image: linear-gradient(180deg,
var(--gfg-silver-hi) 0%,
var(--gfg-silver) 30%,
var(--gfg-silver-lo) 52%,
var(--gfg-silver) 70%,
var(--gfg-silver-mid) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
}
/* T1 — page title (replaces the title_*.png images) */
.t1 {
display: block;
margin: 0.1em 0 0;
font-size: 54px;
text-align: center;
filter: drop-shadow(2px 3px 0 #000) drop-shadow(0 0 8px rgba(0, 0, 0, 0.9));
}
/* T2 — section title, sits on a purple glow that fades out both ways */
.t2 {
display: block;
margin: 0.4em 0 0.3em;
font-size: 38px;
text-align: left;
filter: drop-shadow(1px 2px 0 #000);
}
.t2::after {
content: "";
display: block;
height: 2px;
margin: 0 -0.35em;
background: linear-gradient(90deg,
var(--gfg-purple-300) 0%,
var(--gfg-purple-700) 40%,
rgba(78, 1, 157, 0) 100%);
-webkit-text-fill-color: initial;
}
/* T3 — small script title, lavender silver, for callouts and sidebars */
.t3 {
display: block;
margin: 0.5em 0 0;
font-size: 26px;
filter: drop-shadow(1px 1px 0 #000);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.t3 {
background-image: linear-gradient(180deg,
var(--gfg-silver-hi) 0%,
#cfc6f2 45%,
var(--gfg-purple-300) 100%);
}
}
/* T1a / T1b / T1c — page titles in purple instead of silver.
Same size and script as T1. The box shrinks to the text so each
gradient runs across the words themselves.
T1a lavender fading into deep purple, left to right (like the h1 bar)
T1b purple chrome: lavender highlight over a deep purple band
T1c purple that fades out to black on the right */
.t1a, .t1b, .t1c {
font-family: var(--gfg-font-script);
font-weight: normal;
font-style: normal;
text-transform: lowercase;
letter-spacing: 0.01em;
line-height: 1.7;
display: block;
width: -moz-fit-content;
width: fit-content;
margin: 0.1em auto 0;
padding: 0 0.35em;
font-size: 54px;
text-align: center;
color: var(--gfg-purple-300);
border: 0;
border-image: none;
background: none;
filter: drop-shadow(2px 3px 0 #000) drop-shadow(0 0 8px rgba(0, 0, 0, 0.9));
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.t1a, .t1b, .t1c {
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.t1a {
background-image: linear-gradient(90deg,
var(--gfg-purple-200) 0%,
var(--gfg-purple-300) 35%,
var(--gfg-purple-500) 70%,
var(--gfg-purple-700) 100%);
}
.t1b {
background-image: linear-gradient(180deg,
#f1ecff 0%,
var(--gfg-purple-200) 30%,
var(--gfg-purple-700) 52%,
var(--gfg-purple-300) 72%,
var(--gfg-purple-600) 100%);
}
.t1c {
background-image: linear-gradient(90deg,
var(--gfg-purple-300) 0%,
var(--gfg-purple-300) 30%,
var(--gfg-purple-800) 80%,
rgba(65, 14, 92, 0.35) 100%);
}
}
.t1.left, .t2.left, .t3.left { text-align: left; }
.t1.center, .t2.center, .t3.center { text-align: center; }
.t1a.left, .t1b.left, .t1c.left { margin-left: 0; text-align: left; }
@media (max-width: 640px) {
.t1, .t1a, .t1b, .t1c { font-size: 40px; }
.t2 { font-size: 30px; }
.t3 { font-size: 22px; }
}