Techniques招牌配方
Mustard-ground theatre title
A full-width section with the mustard page background exposed, featuring a large Abril Fatface title with visible brush-texture simulation via a subtle text-shadow offset — evoking hand-painted poster lettering.
.theatre-title {
background-color: #9B7B1F;
padding: 96px 48px;
font-family: 'Abril Fatface', Georgia, serif;
font-size: clamp(3rem, 8vw, 6rem);
color: #0F0F0F;
line-height: 1.0;
text-shadow: 2px 2px 0 #A0522D, -1px -1px 0 rgba(234,88,12,0.25);
position: relative;
}
.theatre-title::after {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
pointer-events: none;
mix-blend-mode: multiply;
}
Oxblood collage card
A card component styled as a hand-cut paper element on an oxblood ground — thick ink border with slightly uneven width (achieved via border-image), aged-paper surface, and a subtle rotation to break digital grid rigidity.
.collage-card {
background-color: #F0E8D8;
border: 3px solid #0F0F0F;
border-radius: 4px;
padding: 32px;
position: relative;
transform: rotate(-1.2deg);
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.collage-card:hover {
transform: rotate(0deg) translateY(-4px);
}
.collage-card::before {
content: '';
position: absolute;
top: -6px;
left: -6px;
right: -6px;
bottom: -6px;
background-color: #7C2D2D;
z-index: -1;
border-radius: 6px;
}
Crayon underline accent
A hand-drawn-style underline for emphasis text, simulating a crayon stroke beneath key words using a wavy SVG border-image in cadmium orange. Used for links, highlighted terms, and section subtitles.
.crayon-underline {
text-decoration: none;
background-image: url("data:image/svg+xml,%3Csvg width='100' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 6 Q10 2 20 5 T40 4 T60 6 T80 3 T100 5' fill='none' stroke='%23EA580C' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: repeat-x;
background-position: 0 100%;
background-size: 100px 8px;
padding-bottom: 6px;
}
.crayon-underline:hover {
background-image: url("data:image/svg+xml,%3Csvg width='100' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 6 Q10 2 20 5 T40 4 T60 6 T80 3 T100 5' fill='none' stroke='%231E3A8A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}