/* ==========================================================================
Paper theme - textures, section "skins" and the torn-edge system.
HOW A TORN EDGE WORKS
Every section (except the hero) starts with:
The element sits directly above the section, overlapping the previous one.
::before = pale fibre rim (mask: --tear-x-rim, colour: --rim)
::after = the torn sheet (mask: --tear-x-body, colour: --paper + grain)
Shapes come from tears.css (generated). Variants a-d change the tear pattern,
--tear-x shifts it sideways so no two edges look alike.
========================================================================== */
:root {
/* Fine paper grain (cream sheets) */
--grain-cream:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .23 0 0 0 0 .09 0 0 0 .95 -.40'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
/* Soft mottling / fibres on cream */
--mottle-cream:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='700'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .012' numOctaves='5' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .36 0 0 0 0 .14 0 0 0 1 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
/* Fine grain on dark sheets (light specks) */
--grain-dark:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .86 0 0 0 0 .7 0 0 0 .8 -.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
/* Grunge / worn scuffs on dark sheets */
--scuff-dark:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='700'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008 .02' numOctaves='5' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .38 0 0 0 0 .26 0 0 0 .55 -.28'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
/* Brush-streak grunge, multiplied over the orange sheet */
--grunge-orange:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .045' numOctaves='5' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .14 0 0 0 0 0 0 0 0 2.2 -1.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* ---------- Skins ---------- */
.skin-cream {
--paper: #f2e4c9;
--rim: #fff8e8;
--grain: var(--grain-cream);
--mottle: var(--mottle-cream);
background-color: var(--paper);
background-image:
radial-gradient(ellipse 55% 40% at 92% 100%, rgba(150, 95, 35, .16), transparent 70%),
var(--grain-cream),
var(--mottle-cream);
background-size: auto, 260px 260px, 900px 700px;
color: var(--text-dark);
}
.skin-dark {
--paper: #130f0c;
--rim: #e9dcc2;
--grain: var(--grain-dark);
--mottle: var(--scuff-dark);
background-color: var(--paper);
background-image:
radial-gradient(ellipse 60% 45% at 10% 100%, rgba(0, 0, 0, .55), transparent 70%),
var(--grain-dark),
var(--scuff-dark);
background-size: auto, 260px 260px, 900px 700px;
color: var(--text-light);
}
/* Dark sheet sitting on another dark sheet - rim is a dim charcoal fibre */
.skin-dark.on-dark { --rim: #4a3f35; }
.skin-orange {
--paper: #f46c16;
--rim: #ffe9cc;
--grain: var(--grain-dark);
--mottle: var(--grunge-orange);
background-color: var(--paper);
background-image:
radial-gradient(ellipse 60% 60% at 15% 70%, rgba(255, 140, 40, .55), transparent 70%),
var(--grain-dark),
var(--grunge-orange);
background-size: auto, 260px 260px, 900px 700px;
color: #fff;
}
/* ---------- The torn edge ---------- */
.tear {
position: absolute;
left: 0; right: 0;
bottom: calc(100% - 1px);
height: calc(var(--tear-h) + 1px);
z-index: 3;
pointer-events: none;
/* soft shadow cast upward onto the sheet underneath */
filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, .38)) drop-shadow(0 -6px 8px rgba(0, 0, 0, .18));
}
.tear::before,
.tear::after {
content: "";
position: absolute;
inset: 0;
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x;
-webkit-mask-size: 1440px 100%;
mask-size: 1440px 100%;
-webkit-mask-position: var(--tear-x, 0px) 0;
mask-position: var(--tear-x, 0px) 0;
}
.tear::before {
background: var(--rim);
-webkit-mask-image: var(--m-rim);
mask-image: var(--m-rim);
}
.tear::after {
background-color: var(--paper);
/* same texture layers as the sheet, origin shifted so the grain runs on seamlessly */
background-image: var(--grain), var(--mottle, none);
background-size: 260px 260px, 900px 700px;
background-position: 0 calc(var(--tear-h) + 1px);
-webkit-mask-image: var(--m-body);
mask-image: var(--m-body);
}
.tear--a { --m-body: var(--tear-a-body); --m-rim: var(--tear-a-rim); }
.tear--b { --m-body: var(--tear-b-body); --m-rim: var(--tear-b-rim); --tear-x: -420px; }
.tear--c { --m-body: var(--tear-c-body); --m-rim: var(--tear-c-rim); --tear-x: -160px; }
.tear--d { --m-body: var(--tear-d-body); --m-rim: var(--tear-d-rim); --tear-x: -760px; }
/* Thinner, quieter tear (e.g. dark footer on dark section) */
.tear--thin { --tear-h: 26px; }
/* Every sheet after the hero is a stacking context so decorations
overhanging upward stay above the tear but below the next sheet. */
.sheet {
position: relative;
isolation: isolate;
}
.sheet > .container,
.sheet > .sheet__inner { position: relative; z-index: 2; }
/* Rough ink edge filter used on the About blob (see index.html ) */
.rough { filter: url(#rough-edge); }