/* ============================================================
BAD IDEA INSTITUTE — Main Stylesheet
============================================================
Sections:
1. CSS Custom Properties
2. Web Fonts
3. Global / Base
4. Typography
5. Layout
6. Texture Asset Classes
7. Header & Navigation
8. Landing Page (index.html)
9. Footer
10. Hover Reveal System
11. Image Hover Overlay
12. Ooze Zone
13. Page-Specific
14. Utility Classes
15. Media Queries
============================================================ */
/* ------------------------------------------------------------
1. CSS CUSTOM PROPERTIES
------------------------------------------------------------ */
:root {
/* === SCHOLASTIC PALETTE === */
--white-smoke: #F5F5F5;
--onyx: #141414;
--smart-blue: #466DB8;
--fern: #58883C;
--scarlet-rush: #D84546;
--toffee-brown: #8E5D29;
--tuscan-sun: #F4C431;
--radioactive-grass: #1BE215;
--amethyst: #AC51CC;
/* === 90S OOZE PALETTE === */
--void-black: #0D0D0D;
--ooze-white: #FFFFFF;
--neon-ooze: #39FF14;
--hazard-orange: #FF6B00;
--electric-blue: #00CFFF;
--blood-red: #CC1200;
--construction-yellow: #FFD700;
--ooze-purple: #AC51CC;
/* Randomized ooze colors — set by JS on load */
--ooze-title-color: var(--neon-ooze);
--ooze-heading-color: var(--hazard-orange);
/* Typography scale */
--size-xs: 0.75rem;
--size-sm: 0.875rem;
--size-base: 1rem;
--size-md: 1.25rem;
--size-lg: 1.5rem;
--size-xl: 2rem;
--size-2xl: 2.5rem;
--size-3xl: 3.5rem;
/* Spacing */
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 2rem;
--space-lg: 3rem;
--space-xl: 5rem;
/* Layout */
--max-width: 1100px;
--nav-height: 60px;
/* Ooze background pattern opacity — lower = more subtle pattern.
Range: 0 (invisible) to 1 (full brightness).
Default 0.35 keeps pattern visible but not overwhelming. */
--ooze-pattern-opacity: 0.35;
}
/* ------------------------------------------------------------
2. WEB FONTS — all locally hosted
------------------------------------------------------------ */
/* Playfair Display SC — scholastic titles, nav, labels */
@font-face {
font-family: 'Playfair Display SC';
src: url('fonts/playfair-display-sc/PlayfairDisplaySC-Regular.ttf') format('truetype');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Playfair Display SC';
src: url('fonts/playfair-display-sc/PlayfairDisplaySC-Bold.ttf') format('truetype');
font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Playfair Display SC';
src: url('fonts/playfair-display-sc/PlayfairDisplaySC-Black.ttf') format('truetype');
font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Playfair Display SC';
src: url('fonts/playfair-display-sc/PlayfairDisplaySC-Italic.ttf') format('truetype');
font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
font-family: 'Playfair Display SC';
src: url('fonts/playfair-display-sc/PlayfairDisplaySC-BoldItalic.ttf') format('truetype');
font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
font-family: 'Playfair Display SC';
src: url('fonts/playfair-display-sc/PlayfairDisplaySC-BlackItalic.ttf') format('truetype');
font-weight: 900; font-style: italic; font-display: swap;
}
/* Apple Garamond — scholastic body text, also ooze body text */
@font-face {
font-family: 'Apple Garamond';
src: url('fonts/AppleGaramond.ttf') format('truetype');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Apple Garamond';
src: url('fonts/AppleGaramond-Bold.ttf') format('truetype');
font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Apple Garamond';
src: url('fonts/AppleGaramond-Italic.ttf') format('truetype');
font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
font-family: 'Apple Garamond';
src: url('fonts/AppleGaramond-BoldItalic.ttf') format('truetype');
font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
font-family: 'Apple Garamond';
src: url('fonts/AppleGaramond-Light.ttf') format('truetype');
font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Apple Garamond';
src: url('fonts/AppleGaramond-LightItalic.ttf') format('truetype');
font-weight: 300; font-style: italic; font-display: swap;
}
/* Metal Mania — ooze zone titles */
@font-face {
font-family: 'Metal Mania';
src: url('fonts/MetalMania-Regular.ttf') format('truetype');
font-weight: normal; font-style: normal; font-display: swap;
}
/* Creepster — ooze zone headings/subheadings */
@font-face {
font-family: 'Creepster';
src: url('fonts/Creepster-Regular.ttf') format('truetype');
font-weight: normal; font-style: normal; font-display: swap;
}
/* WalterTurncoat — ooze zone body text */
@font-face {
font-family: 'WalterTurncoat';
src: url('fonts/WalterTurncoat-Regular.ttf') format('truetype');
font-weight: normal; font-style: normal; font-display: swap;
}
/* ------------------------------------------------------------
3. GLOBAL / BASE
------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
background-color: var(--white-smoke);
background-image: url('images/background-dotted-white.png');
background-repeat: repeat;
background-size: 200px 200px;
color: var(--onyx);
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--smart-blue);
text-decoration: underline;
}
a:hover { color: var(--scarlet-rush); }
a:visited { color: var(--amethyst); }
/* ------------------------------------------------------------
4. TYPOGRAPHY — SCHOLASTIC (default)
------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display SC', serif;
line-height: 1.2;
color: var(--onyx);
}
h1 { font-size: var(--size-3xl); }
h2 { font-size: var(--size-2xl); }
h3 { font-size: var(--size-xl); }
h4 { font-size: var(--size-lg); }
h5 { font-size: var(--size-md); }
h6 { font-size: var(--size-base);}
p {
font-family: 'Apple Garamond', serif;
font-size: var(--size-base);
line-height: 1.7;
margin-bottom: var(--space-sm);
}
.label {
font-family: 'Playfair Display SC', serif;
font-size: var(--size-xs);
letter-spacing: 0.15em;
text-transform: uppercase;
}
blockquote {
font-family: 'Apple Garamond', serif;
font-style: italic;
padding-left: var(--space-sm);
margin: var(--space-md) 0;
color: var(--toffee-brown);
}
strong, b { font-weight: 700; }
em, i { font-style: italic; }
u { text-decoration: underline; }
sup {
vertical-align: super;
font-size: 0.75em;
line-height: 0;
}
sub {
vertical-align: sub;
font-size: 0.75em;
line-height: 0;
}
mark {
background-color: var(--tuscan-sun);
color: var(--onyx);
padding: 0 0.15em;
}
code {
font-family: monospace;
font-size: 0.9em;
background-color: #e8e8e8;
padding: 0.1em 0.3em;
border-radius: 2px;
}
ul, ol {
font-family: 'Apple Garamond', serif;
font-size: var(--size-base);
line-height: 1.7;
margin-bottom: var(--space-sm);
padding-left: var(--space-md);
}
ul { list-style-type: disc; }
ol { list-style-type: decimal; }
li { margin-bottom: 0.25em; }
ul ul, ol ul { list-style-type: circle; margin-bottom: 0; }
ul ol, ol ol { list-style-type: lower-alpha; margin-bottom: 0; }
hr {
border: none;
border-top: 1px solid #ccc;
margin: var(--space-md) 0;
}
/* ------------------------------------------------------------
5. LAYOUT
------------------------------------------------------------ */
.page-wrapper {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--space-lg);
}
main {
padding: var(--space-lg) 0;
/* min-height removed — content determines height, not viewport.
Individual pages that need height can add their own. */
}
.section { margin-bottom: var(--space-xl); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.four-col { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.relative { position: relative; }
.float-right {
float: right;
margin: 0 0 var(--space-sm) var(--space-md);
max-width: 280px;
}
.clearfix::after {
content: '';
display: table;
clear: both;
}
/* ------------------------------------------------------------
6. TEXTURE ASSET CLASSES
------------------------------------------------------------ */
/* Background textures */
.bg-dotted { background-image: url('images/background-dotted-white.png'); background-repeat: repeat; background-size: 200px 200px; }
.bg-grid { background-image: url('images/background-grid-white.png'); background-repeat: repeat; background-size: 200px 200px; }
.bg-lined { background-image: url('images/background-lined-white.png'); background-repeat: repeat; background-size: 200px 200px; }
/* Divider lines — usage: */
.divider {
width: 100%;
height: 50px;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center center;
margin: var(--space-sm) 0;
}
.line-curved { background-image: var(--line-src-curved); }
.line-straight { background-image: var(--line-src-straight); }
.line-wavy { background-image: var(--line-src-wavy); }
.blue { --line-src-curved: url('images/line-curved-blue.png'); --line-src-straight: url('images/line-straight-blue.png'); --line-src-wavy: url('images/line-wavy-blue.png'); }
.green { --line-src-curved: url('images/line-curved-green.png'); --line-src-straight: url('images/line-straight-green.png'); --line-src-wavy: url('images/line-wavy-green.png'); }
.red { --line-src-curved: url('images/line-curved-red.png'); --line-src-straight: url('images/line-straight-red.png'); --line-src-wavy: url('images/line-wavy-red.png'); }
.yellow { --line-src-curved: url('images/line-curved-yellow.png'); --line-src-straight: url('images/line-straight-yellow.png'); --line-src-wavy: url('images/line-wavy-yellow.png'); }
.brown { --line-src-curved: url('images/line-curved-brown.png'); --line-src-straight: url('images/line-straight-brown.png'); --line-src-wavy: url('images/line-wavy-brown.png'); }
.accentgreen { --line-src-curved: url('images/line-curved-accentgreen.png'); --line-src-straight: url('images/line-straight-accentgreen.png'); --line-src-wavy: url('images/line-wavy-accentgreen.png'); }
.accentpurple { --line-src-curved: url('images/line-curved-accentpurple.png'); --line-src-straight: url('images/line-straight-accentpurple.png'); --line-src-wavy: url('images/line-wavy-accentpurple.png'); }
/* Inline marks */
.mark-corner-tl { position: absolute; top: 0; left: 0; width: 60px; height: auto; pointer-events: none; }
.mark-corner-tr { position: absolute; top: 0; right: 0; width: 60px; height: auto; pointer-events: none; transform: scaleX(-1); }
.mark-corner-bl { position: absolute; bottom: 0; left: 0; width: 60px; height: auto; pointer-events: none; transform: scaleY(-1); }
.mark-corner-br { position: absolute; bottom: 0; right: 0; width: 60px; height: auto; pointer-events: none; transform: scale(-1,-1); }
.mark-hero { max-width: 500px; width: 100%; height: auto; margin: 0 auto; }
/* ------------------------------------------------------------
7. HEADER & NAVIGATION
Header is always scholastic regardless of page zone.
------------------------------------------------------------ */
#site-header {
background-color: var(--white-smoke);
background-image: url('images/background-dotted-white.png');
background-repeat: repeat;
background-size: 200px 200px;
text-align: center;
padding: var(--space-md) 0 0 0;
position: relative;
}
/* Logo row */
#site-logo {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-xs);
}
#site-logo-inner {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
}
#site-logo-text { text-align: center; }
#site-logo h1 {
color: var(--onyx);
font-size: var(--size-xl);
margin-bottom: 0;
}
/* Tagline — static text, no hover */
.tagline {
font-family: 'Playfair Display SC', serif;
font-size: var(--size-sm);
color: var(--onyx);
letter-spacing: 0.1em;
margin-bottom: 0;
cursor: default;
pointer-events: none;
}
.header-sadako {
width: 60px;
height: auto;
flex-shrink: 0;
}
/* Header rule — hidden on inner pages, shown only on landing page */
#header-rule {
display: none;
}
/* Show header rule on landing page only */
body#landing #header-rule {
display: block;
max-width: 600px;
width: 80%;
margin: 0 auto var(--space-xs) auto;
}
#footer-rule {
display: block;
max-width: 600px;
width: 80%;
margin: 0 auto var(--space-sm) auto;
}
/* Navigation */
#site-nav {
background-color: transparent;
height: var(--nav-height);
display: flex;
align-items: center;
padding-bottom: 0;
margin-bottom: 0;
}
/* Extra breathing room below nav on inner pages */
#site-header {
padding-bottom: 0;
}
#site-nav ul {
list-style: none;
display: flex;
justify-content: center;
gap: var(--space-md);
width: 100%;
padding: 0 var(--space-md);
}
#site-nav a {
font-family: 'Playfair Display SC', serif;
font-size: var(--size-sm);
letter-spacing: 0.1em;
color: var(--onyx);
text-decoration: none;
padding: var(--space-xs);
}
#site-nav a:hover { color: var(--scarlet-rush); }
#site-nav a:visited { color: var(--onyx); }
#site-nav a.active {
color: var(--smart-blue);
text-decoration: underline;
text-decoration-color: var(--scarlet-rush);
text-underline-offset: 4px;
}
/* ------------------------------------------------------------
8. LANDING PAGE
------------------------------------------------------------ */
body#landing #site-header {
padding: var(--space-xl) 0 0 0;
}
body#landing #site-logo {
gap: var(--space-xs);
}
body#landing #site-logo-inner {
gap: var(--space-sm);
}
body#landing #site-logo h1 {
font-size: var(--size-3xl);
}
body#landing #site-logo-img {
max-width: 500px;
width: 100%;
height: auto;
margin: 0 auto;
}
body#landing .tagline {
font-size: var(--size-lg);
margin-bottom: var(--space-md);
}
body#landing .header-sadako {
width: 100px;
}
body#landing #site-nav ul { gap: var(--space-lg); }
body#landing #site-nav a { font-size: var(--size-base); letter-spacing: 0.15em; }
body#landing main {
min-height: 0;
padding: 0;
}
body#landing #home-splash:empty { display: none; }
/* ------------------------------------------------------------
9. FOOTER
------------------------------------------------------------ */
#site-footer {
background-color: var(--white-smoke);
background-image: url('images/background-dotted-white.png');
background-repeat: repeat;
background-size: 200px 200px;
color: var(--onyx);
text-align: center;
padding: var(--space-md) var(--space-md) var(--space-sm) var(--space-md);
position: relative;
}
/* Torn edge at top of footer — absolutely positioned so it overlaps
the ooze zone above, with no gap between ooze content and footer. */
#footer-torn-edge {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
transform: translateY(-100%);
pointer-events: none;
z-index: 2;
}
body#landing #footer-torn-edge { display: none; }
#site-footer p {
font-family: 'Playfair Display SC', serif;
font-size: var(--size-xs);
letter-spacing: 0.1em;
color: var(--onyx);
margin-bottom: 0;
}
body#landing #site-footer { padding: var(--space-xs) var(--space-md); }
body#landing #footer-rule { display: none; }
/* ------------------------------------------------------------
10. HOVER REVEAL SYSTEM
============================================================
Each qualifying link gets wrapped by JS into:
original text
original text
Hover rules and cascade overrides are in Section 16 (end of file)
to guarantee they win over all zone-specific link styles.
Scholastic zone: windows-hover-icon-lowres.gif, Apple Garamond, Onyx
Ooze zone: black-kapow-hover-icon.gif, Creepster, green or purple
------------------------------------------------------------ */
/* Default text — visible at rest */
.hr-default {
display: inline-block;
transition: opacity 0.1s ease;
}
/* Overlay — hidden at rest, shown on hover. Position set by JS on mouseenter. */
.hr-overlay {
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.1s ease;
white-space: nowrap;
z-index: 9999;
}
/* Gif sits behind the text */
.hr-gif {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* width set by JS to match link text width */
height: auto;
z-index: 1;
pointer-events: none;
display: block;
}
/* New text sits above the gif */
.hr-text {
position: relative;
z-index: 2;
display: inline-block;
}
/* Scholastic zone hover text style */
.hr-text.scholastic {
font-family: 'Apple Garamond', serif;
color: var(--onyx);
font-size: 1.25em;
font-weight: 600;
letter-spacing: 0.05em;
}
/* Ooze zone hover text style */
.hr-text.ooze {
font-family: 'Creepster', cursive;
font-size: 1.1em;
/* color set inline by JS — random green or purple */
}
/* ------------------------------------------------------------
11. IMAGE HOVER OVERLAY
============================================================
Usage:
Overlay is a transparent PNG that appears on hover.
Always: clean at rest, overlay on hover.
------------------------------------------------------------ */
.img-hover-wrap {
position: relative;
display: inline-block;
cursor: pointer;
}
.img-hover-wrap img:first-child {
display: block;
width: 100%;
height: auto;
}
.img-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.15s ease;
pointer-events: none;
}
.img-hover-wrap:hover .img-overlay {
opacity: 1;
}
/* ------------------------------------------------------------
12. OOZE ZONE
Wraps on all inner pages except landing.
------------------------------------------------------------ */
#ooze-zone {
position: relative;
background-color: var(--void-black);
}
/* Dimmed ooze pattern overlay — sits behind content, above base color */
#ooze-zone::after {
content: '';
position: absolute;
inset: 0;
background-image: url('images/ooze-green-bg-pattern.webp');
background-repeat: repeat;
background-size: 200px 200px;
opacity: var(--ooze-pattern-opacity);
pointer-events: none;
z-index: 0;
}
/* Ensure all ooze zone direct children sit above the pattern overlay */
#ooze-zone > * {
position: relative;
z-index: 1;
}
/* Torn edge at bottom of header — absolutely positioned so it overlaps
the ooze zone below, with no gap between header and ooze content. */
#header-torn-edge {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: auto;
transform: translateY(calc(100% - 3px));
pointer-events: none;
z-index: 2;
}
#ooze-zone .page-wrapper {
position: relative;
z-index: 1;
}
/* --- Ooze typography --- */
#ooze-zone h2 {
font-family: 'Metal Mania', serif;
color: var(--ooze-title-color);
font-size: var(--size-2xl);
text-shadow: 2px 2px 0 var(--void-black);
margin-bottom: var(--space-sm);
line-height: 1.1;
}
#ooze-zone h3 {
font-family: 'Metal Mania', serif;
color: var(--ooze-title-color);
font-size: var(--size-xl);
text-shadow: 1px 1px 0 var(--void-black);
margin-bottom: var(--space-xs);
line-height: 1.1;
}
#ooze-zone h4 {
font-family: 'Creepster', cursive;
color: var(--ooze-heading-color);
font-size: var(--size-md);
margin-bottom: var(--space-xs);
}
#ooze-zone p {
font-family: 'WalterTurncoat', cursive;
color: var(--ooze-white);
font-size: var(--size-base);
line-height: 1.8;
}
#ooze-zone a {
color: var(--neon-ooze);
text-decoration: underline;
text-decoration-color: var(--neon-ooze);
}
#ooze-zone a:hover { color: var(--hazard-orange); }
#ooze-zone a:visited { color: var(--ooze-purple); }
#ooze-zone strong, #ooze-zone b { font-weight: 700; }
#ooze-zone em, #ooze-zone i { font-style: italic; }
/* --- Ooze zone project cards --- */
#ooze-zone .project-card {
background-color: #1a1a1a;
border: 2px solid var(--hazard-orange);
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
}
#ooze-zone .card-thumb {
width: 100%;
height: 180px;
object-fit: cover;
object-position: center;
display: block;
border-bottom: 2px solid var(--hazard-orange);
}
#ooze-zone .card-thumb-placeholder {
width: 100%;
height: 180px;
background-color: #222;
border-bottom: 2px solid var(--hazard-orange);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Creepster', cursive;
font-size: var(--size-sm);
color: var(--hazard-orange);
letter-spacing: 0.1em;
}
#ooze-zone .card-body {
padding: var(--space-sm);
flex: 1;
position: relative;
z-index: 1;
background-color: #1a1a1a;
}
#ooze-zone .card-body h3 {
font-family: 'Metal Mania', serif;
color: var(--ooze-title-color);
font-size: var(--size-lg);
margin-bottom: 0;
text-shadow: 1px 1px 0 var(--void-black);
}
#ooze-zone .card-body h4 {
font-family: 'Creepster', cursive;
color: var(--ooze-heading-color);
font-size: var(--size-sm);
margin-bottom: var(--space-xs);
}
#ooze-zone .card-body p {
font-family: 'WalterTurncoat', cursive;
color: var(--ooze-white);
font-size: var(--size-sm);
line-height: 1.6;
margin-bottom: 0;
}
#ooze-zone .card-category {
font-family: 'Creepster', cursive;
font-size: var(--size-base);
display: block;
margin-bottom: var(--space-xs);
}
#ooze-zone .card-footer {
padding: var(--space-xs) var(--space-sm);
border-top: 1px solid #333;
background-color: #111;
}
#ooze-zone .card-footer a {
font-family: 'Creepster', cursive;
font-size: var(--size-sm);
color: var(--hazard-orange);
text-decoration: none;
letter-spacing: 0.1em;
}
/* Splat accent */
.card-splat {
position: absolute;
bottom: -20px;
right: -20px;
width: 100px;
height: auto;
opacity: 0.35;
pointer-events: none;
z-index: 0;
}
/* Corner marks on cards */
.project-card .mark-corner-tl,
.project-card .mark-corner-tr {
width: 40px;
z-index: 2;
}
/* Card divider line */
.card-divider {
display: block;
width: 80%;
margin: var(--space-xs) 0;
}
/* Category color system */
.card-category[data-category="game-writing"] { color: var(--electric-blue); }
.card-category[data-category="illustration"] { color: var(--blood-red); }
.card-category[data-category="writing"] { color: var(--neon-ooze); }
.card-category[data-category="ttrpg"] { color: var(--ooze-purple); }
.card-category[data-category="game-dev"] { color: var(--hazard-orange); }
.card-category[data-category="other"] { color: var(--construction-yellow); }
/* --- Ooze zone sample cards (borderless) --- */
#ooze-zone .sample-card {
background-color: transparent;
border: none;
display: flex;
flex-direction: column;
}
#ooze-zone .sample-card .card-thumb {
border-bottom: none;
border-radius: 2px;
}
#ooze-zone .sample-card .card-body {
background-color: transparent;
padding: var(--space-xs) 0 0 0;
}
#ooze-zone .sample-card .card-footer {
background-color: transparent;
border-top: none;
padding: var(--space-xs) 0 0 0;
}
#ooze-zone .sample-card .card-footer a {
color: var(--neon-ooze);
text-decoration: underline;
}
/* --- Ooze zone contact --- */
#ooze-zone .contact-card a { color: var(--neon-ooze); }
#ooze-zone .contact-label { color: var(--construction-yellow); font-family: 'Creepster', cursive; }
#ooze-zone .contact-handle { color: var(--electric-blue); }
#ooze-zone #contact-email a { color: var(--hazard-orange); font-family: 'Creepster', cursive; font-size: var(--size-lg); }
#ooze-zone #contact-note { color: var(--ooze-white); font-family: 'WalterTurncoat', cursive; text-align: center; }
/* --- Ooze zone about --- */
#ooze-zone .about-photo {
max-width: 260px;
border: none;
}
#ooze-zone .about-photo figcaption {
font-family: 'Creepster', cursive;
font-size: var(--size-sm);
color: var(--electric-blue);
background-color: transparent;
}
/* --- Ooze zone sample sub-page text blocks --- */
#ooze-zone .sample-text {
background-color: #111;
border-left: 3px solid var(--neon-ooze);
padding: var(--space-sm) var(--space-md);
margin-bottom: var(--space-sm);
}
#ooze-zone .sample-text p { color: var(--ooze-white); }
#ooze-zone .sample-download a {
color: var(--neon-ooze);
border-color: var(--neon-ooze);
font-family: 'Creepster', cursive;
}
#ooze-zone .sample-download a:hover {
background-color: var(--neon-ooze);
color: var(--void-black);
}
#ooze-zone .breadcrumb {
font-family: 'Creepster', cursive;
color: var(--hazard-orange);
letter-spacing: 0.12em;
}
#ooze-zone .breadcrumb a { color: var(--electric-blue); }
#ooze-zone .samples-intro { color: var(--ooze-white); font-family: 'WalterTurncoat', cursive; text-align: center; margin: 0 auto var(--space-md) auto; }
/* Samples PDF icon row */
#samples-pdf-row {
display: flex;
justify-content: center;
gap: var(--space-lg);
margin: var(--space-md) 0;
}
.pdf-item {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-xs);
text-decoration: none;
}
.pdf-item:hover { opacity: 0.8; }
.pdf-icon {
width: 80px;
height: 80px;
object-fit: contain;
background-color: #222;
border: 1px solid var(--hazard-orange);
display: block;
}
.pdf-label {
font-family: 'Creepster', cursive;
color: var(--electric-blue);
font-size: var(--size-sm);
text-align: center;
}
/* PDF description — small text box under each icon */
.pdf-desc {
font-family: 'WalterTurncoat', cursive;
font-size: var(--size-xs);
color: var(--ooze-white);
text-align: center;
max-width: 100px;
line-height: 1.4;
margin-top: 2px;
opacity: 0.75;
}
/* Illustration grid */
#illustration-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-sm);
margin-top: var(--space-sm);
}
.illustration-item {
overflow: visible;
cursor: pointer;
}
.illustration-item img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
}
/* Glow on hover handled by data-hover-effect="glow" on each .illustration-item */
/* --- Ooze zone dividers --- */
#ooze-zone .divider {
filter: brightness(0) invert(1);
opacity: 0.4;
}
/* ------------------------------------------------------------
13. PAGE-SPECIFIC
------------------------------------------------------------ */
/* About photo */
.about-photo {
float: right;
margin: 0 0 var(--space-sm) var(--space-md);
max-width: 260px;
border: 2px solid var(--onyx);
}
.about-photo img { width: 100%; height: auto; display: block; }
.about-photo figcaption {
font-family: 'Playfair Display SC', serif;
font-size: var(--size-sm); /* bumped from size-xs */
letter-spacing: 0.08em;
color: var(--toffee-brown);
text-align: center;
padding: var(--space-xs);
}
/* Sample sub-page */
.sample-entry { margin-bottom: var(--space-xl); }
.sample-entry h3 { font-size: var(--size-xl); margin-bottom: var(--space-xs); }
.sample-meta {
font-family: 'Playfair Display SC', serif;
font-size: var(--size-xs);
letter-spacing: 0.1em;
color: var(--toffee-brown);
margin-bottom: var(--space-sm);
}
.sample-text {
background-color: rgba(0,0,0,0.03);
border-left: 3px solid var(--smart-blue);
padding: var(--space-sm) var(--space-md);
margin-bottom: var(--space-sm);
max-width: 720px;
}
.sample-image { margin-bottom: var(--space-sm); max-width: 800px; }
.sample-image img { width: 100%; height: auto; border: 1px solid #ddd; }
.sample-image figcaption,
.sample-video figcaption {
font-family: 'Apple Garamond', serif;
font-size: var(--size-sm); /* bumped from size-xs */
color: #888;
padding: var(--space-xs) 0;
font-style: italic;
}
.sample-video { margin-bottom: var(--space-sm); max-width: 800px; }
.sample-video video { width: 100%; height: auto; display: block; background-color: #000; }
.sample-download { margin-bottom: var(--space-sm); }
.sample-download a {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-family: 'Playfair Display SC', serif;
font-size: var(--size-sm);
letter-spacing: 0.08em;
color: var(--onyx);
text-decoration: none;
border: 2px solid var(--onyx);
padding: var(--space-xs) var(--space-sm);
transition: background-color 0.15s ease, color 0.15s ease;
}
.sample-download a::before { content: '↓'; font-size: var(--size-md); line-height: 1; }
.sample-download a:hover { background-color: var(--onyx); color: var(--white-smoke); }
/* Breadcrumb */
.breadcrumb {
font-family: 'Playfair Display SC', serif;
font-size: var(--size-xs);
letter-spacing: 0.1em;
color: var(--toffee-brown);
margin-bottom: var(--space-md);
}
.breadcrumb a { color: var(--smart-blue); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
/* Intro text */
.samples-intro {
font-size: var(--size-base);
color: #555;
margin: 0 auto var(--space-md) auto;
max-width: 680px;
text-align: center;
display: block;
}
/* Contact page */
.contact-list { list-style: none; padding-left: 0; margin-top: var(--space-md); }
.contact-list li { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.contact-icon {
width: 80px;
height: 80px;
object-fit: contain;
display: block;
flex-shrink: 0;
background-color: #222;
border: 1px solid var(--hazard-orange);
image-rendering: pixelated;
}
.contact-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--space-sm);
border: none;
background: transparent;
transition: transform 0.15s ease;
}
.contact-card:hover { transform: translateY(-4px); }
/* Edge-glow on hover — applied via data-hover-effect="glow" attribute */
[data-hover-effect="glow"] {
transition: box-shadow 0.2s ease;
}
[data-hover-effect="glow"]:hover {
box-shadow: 0 0 14px 4px var(--hazard-orange);
}
.contact-card a {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-xs);
text-decoration: none;
color: var(--onyx);
}
.contact-label {
font-family: 'Playfair Display SC', serif;
font-size: var(--size-sm);
letter-spacing: 0.1em;
display: block;
}
.contact-handle {
font-family: 'Apple Garamond', serif;
font-size: var(--size-xs);
color: var(--toffee-brown);
display: block;
}
#contact-email {
text-align: center;
margin-bottom: var(--space-lg);
padding-bottom: var(--space-md);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
}
.email-sadako { width: 40px; height: auto; flex-shrink: 0; }
#contact-email a {
font-family: 'Playfair Display SC', serif;
font-size: var(--size-md);
letter-spacing: 0.08em;
color: var(--smart-blue);
}
#contact-email a:hover { color: var(--scarlet-rush); }
/* Contact & short pages — prevent min-height from creating empty space */
#contact-content,
#shop-content {
min-height: 0;
}
#contact-grid { gap: var(--space-md); margin-bottom: var(--space-sm); }
#contact-note {
font-family: 'Apple Garamond', serif;
font-size: var(--size-base);
color: #555;
text-align: center;
max-width: 600px;
margin: 0 auto var(--space-md) auto;
}
/* ------------------------------------------------------------
14. UTILITY CLASSES
------------------------------------------------------------ */
.centered { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.color-blue { color: var(--smart-blue); }
.color-green { color: var(--fern); }
.color-red { color: var(--scarlet-rush); }
.color-brown { color: var(--toffee-brown); }
.color-yellow { color: var(--tuscan-sun); }
.color-lime { color: var(--radioactive-grass); }
.color-purple { color: var(--amethyst); }
.bg-onyx { background-color: var(--onyx); color: var(--white-smoke); }
.bg-blue { background-color: var(--smart-blue); color: var(--white-smoke); }
.bg-green { background-color: var(--fern); color: var(--white-smoke); }
.bg-red { background-color: var(--scarlet-rush); color: var(--white-smoke); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
}
/* ------------------------------------------------------------
15. MEDIA QUERIES
------------------------------------------------------------ */
@media (min-width: 768px) { :root { --size-3xl: 4rem; } }
@media (min-width: 1100px) { :root { --size-3xl: 5rem; } }
@media (max-width: 767px) {
.page-wrapper { padding: 0 var(--space-sm); }
#site-nav ul { gap: var(--space-sm); }
#site-nav a { font-size: var(--size-xs); letter-spacing: 0.05em; }
#site-logo h1 { font-size: var(--size-2xl); }
.header-sadako { width: 40px; }
body#landing #site-logo h1 { font-size: var(--size-2xl); }
body#landing .tagline { font-size: var(--size-lg); }
body#landing .header-sadako { width: 60px; }
.two-col, .three-col, .four-col { grid-template-columns: 1fr; }
.about-photo {
float: none;
margin: 0 auto var(--space-md) auto;
max-width: 200px;
}
#illustration-grid { grid-template-columns: 1fr 1fr; }
#samples-pdf-row { flex-direction: column; align-items: center; }
}
@media (max-width: 479px) {
#site-nav { height: auto; padding: var(--space-xs) 0; }
#site-nav ul { flex-wrap: wrap; gap: var(--space-xs); padding: var(--space-xs); height: auto; }
#illustration-grid { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------
16. HOVER REVEAL — CASCADE OVERRIDE
MUST BE LAST in the stylesheet. These rules suppress direct
visual changes on wrapped elements so only the child
.hr-default / .hr-overlay spans respond to hover.
Placed here so they come after ALL zone-specific hover rules
(#site-nav a:hover, #ooze-zone a:hover, etc.) in the cascade,
guaranteeing they win regardless of specificity.
------------------------------------------------------------ */
[data-hr-wrapped] {
/* Disable color transitions on the anchor itself — prevents
browser repaint from interfering with child opacity transitions */
transition: none !important;
}
[data-hr-wrapped]:hover,
[data-hr-wrapped]:focus,
[data-hr-wrapped]:hover:visited {
color: inherit !important;
text-decoration: none !important;
background-color: transparent !important;
}
/* Ensure child spans do the visual work */
[data-hr-wrapped]:hover .hr-default {
opacity: 0 !important;
}
[data-hr-wrapped]:hover .hr-overlay {
opacity: 1 !important;
}