/* ========================================================================== BANDOCRACY — zine-style landing page Photocopied punk-zine aesthetic: halftone photos, torn-paper stickies, comic outlined headlines, cut-paper collage. Two colorways via [data-theme="light"] / [data-theme="dark"] on . ========================================================================== */ @font-face{ font-family:'RocknRoll One'; src:url('../Fonts/RocknRollOne-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Rubik Dirt'; src:url('../Fonts/Rubik_Dirt/RubikDirt-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; } /* ============ TOKENS ============ */ :root{ /* brand palette — fixed across both themes */ --blue: #2757fc; --purple: #8b41ba; --gold: #efae05; --slate: #403b4e; --radius: 14px; --display: 'RocknRoll One', system-ui, sans-serif; --decorative: 'Rubik Dirt', system-ui, sans-serif; --body: 'Inter', system-ui, sans-serif; --dot-size: 3px; --tilt-1: -1.6deg; --tilt-2: 1.3deg; --tilt-3: -0.8deg; } html[data-theme="light"]{ --bg: #f0f0fb; --bg-2: #e4e4f4; --surface: #ffffff; --surface-border: rgba(4,4,5,0.16); --text: #040405; --text-muted: #403b4e; --shadow: rgba(4,4,5,0.30); --halftone-invert: 0; --rule: rgba(4,4,5,0.18); } html[data-theme="dark"]{ --bg: #040405; --bg-2: #111014; --surface: #403b4e; --surface-border: rgba(240,240,251,0.18); --text: #f0f0fb; --text-muted: #c9c3d4; --shadow: rgba(0,0,0,0.65); --halftone-invert: 1; --rule: rgba(240,240,251,0.2); --display: 'Rubik Dirt', system-ui, sans-serif; } /* ============ BASE ============ */ *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--body); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; } h1,h2,h3,h4{ font-family:var(--display); font-weight:400; margin:0; } p{ margin:0 0 1em; } p:last-child{ margin-bottom:0; } .wrap{ max-width:1180px; margin:0 auto; padding:0 24px; position:relative; } section{ position:relative; } [id]{ scroll-margin-top:90px; } /* photocopy grain — fixed dot-grid texture over the whole page */ body::before{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5; mix-blend-mode:var(--grain-blend, multiply); background-image:radial-gradient(var(--text) .6px, transparent .6px); background-size:5px 5px; } html[data-theme="dark"] body::before{ --grain-blend: screen; opacity:.35; } body > *{ position:relative; z-index:1; } /* ============ SCRAP-PAPER STICKY CARDS ============ */ .sticky{ background:var(--surface); color:var(--text); border:1px solid var(--surface-border); border-radius:3px; box-shadow:0 10px 22px -8px var(--shadow), 0 2px 0 var(--surface-border); padding:26px 28px; clip-path: polygon( 0% 1.5%, 4% 0%, 12% 0.8%, 22% 0%, 33% 1.2%, 45% 0.2%, 58% 1%, 71% 0%, 83% 1.4%, 92% 0.3%, 100% 1.8%, 100% 96%, 91% 100%, 80% 98.6%, 68% 100%, 55% 98.8%, 42% 100%, 29% 98.4%, 17% 100%, 7% 98.8%, 0% 100% ); } .sticky.tilt-1{ transform:rotate(var(--tilt-1)); } .sticky.tilt-2{ transform:rotate(var(--tilt-2)); } .sticky.tilt-3{ transform:rotate(var(--tilt-3)); } /* ============ STICKER LABEL (headline chip) ============ */ .sticker{ display:inline-block; background:var(--text); color:var(--bg); font-family:var(--display); text-transform:uppercase; letter-spacing:.03em; padding:8px 18px; border-radius:2px; transform:rotate(-2deg); box-shadow:0 6px 14px -6px var(--shadow); } /* ============ COMIC OUTLINE HEADLINE (no premade graphic) ============ */ .comic-headline{ font-family:var(--display); text-transform:uppercase; font-size:clamp(32px, 5.4vw, 58px); line-height:1.02; color:var(--gold); -webkit-text-stroke:2.5px var(--text); paint-order:stroke fill; letter-spacing:.01em; margin:0 0 .3em; } /* ============ DECORATIVE (Rubik Dirt) LINE ============ */ .decorative-line{ font-family:var(--decorative); text-transform:uppercase; color:var(--purple); font-size:clamp(22px, 3.4vw, 34px); letter-spacing:.02em; line-height:1.2; } /* ============ HALFTONE PHOTO FRAME ============ */ .halftone{ position:relative; overflow:hidden; border-radius:4px; background:var(--text); isolation:isolate; } .halftone img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.25) brightness(var(--halftone-bright,1)) invert(var(--halftone-invert)); } .halftone::after{ content:''; position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply; opacity:.55; background-image:radial-gradient(rgba(0,0,0,.9) 1px, transparent 1px); background-size:4px 4px; } html[data-theme="dark"] .halftone::after{ mix-blend-mode:screen; opacity:.35; background-image:radial-gradient(rgba(255,255,255,.9) 1px, transparent 1px); } /* Zine illustration (art-strip) — keep as authored, never invert in dark mode */ html[data-theme="dark"] .art-strip.halftone img{ filter:grayscale(1) contrast(1.25) brightness(var(--halftone-bright,1)) invert(0); } .halftone .tag{ position:absolute; left:10px; bottom:10px; background:var(--gold); color:var(--text-on-gold, #040405); font-family:var(--display); text-transform:uppercase; font-size:12px; letter-spacing:.06em; padding:4px 10px; border-radius:2px; transform:rotate(-1.5deg); } /* ============ TAPE CORNERS — removed per request (yellow tape effect) ============ */ /* ============ TORN DIVIDER — decorative strip of "torn tape" between sections ============ */ .torn-divider{ height:16px; background:var(--text); opacity:.9; -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'%3E%3Cpolygon points='0,16 0,4 12,8 26,1 41,7 55,0 70,6 85,1 100,7 116,2 131,6 146,0 162,5 178,2 193,8 209,1 224,6 240,0 255,7 271,2 286,6 302,0 317,5 333,2 348,8 364,1 379,6 395,0 400,4 400,16' /%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'%3E%3Cpolygon points='0,16 0,4 12,8 26,1 41,7 55,0 70,6 85,1 100,7 116,2 131,6 146,0 162,5 178,2 193,8 209,1 224,6 240,0 255,7 271,2 286,6 302,0 317,5 333,2 348,8 364,1 379,6 395,0 400,4 400,16' /%3E%3C/svg%3E"); -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; } /* ============ HEADER ============ */ header.site{ display:flex; align-items:center; justify-content:space-between; padding:18px 24px; position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:2px dashed var(--rule); } header.site .brand{ display:flex; align-items:center; gap:10px; } header.site .brand img{ height:38px; width:auto; } header.site .brand .bd-logo{ height:38px; width:auto; display:block; } header.site nav{ display:flex; gap:20px; align-items:center; flex-wrap:wrap; } header.site nav a{ text-decoration:none; font-family:var(--display); text-transform:uppercase; font-size:13px; letter-spacing:.03em; color:var(--text); padding:6px 4px; border-bottom:2px solid transparent; } header.site nav a:hover{ border-color:var(--gold); } header.site .wishlist-btn{ background:var(--blue); color:#fff; padding:9px 16px; border-radius:3px; font-family:var(--display); text-transform:uppercase; font-size:13px; text-decoration:none; letter-spacing:.03em; box-shadow:2px 3px 0 var(--text); transform:rotate(-1deg); } /* ============ HERO ============ */ .hero{ position:relative; padding:64px 0 40px; } .hero .wrap{ padding-top:8px; } .hero-eyebrow{ color:var(--bg); background:var(--text); display:inline-block; padding:6px 14px; border-radius:2px; font-family:var(--display); text-transform:uppercase; font-size:12px; letter-spacing:.08em; transform:rotate(-1.4deg); margin-bottom:18px; } .hero-logo{ max-width:420px; width:70%; margin:0 0 18px; filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); } .hero-hook{ font-family:var(--display); text-transform:uppercase; font-size:clamp(30px,6vw,54px); line-height:1.02; color:#fff; -webkit-text-stroke:2.5px var(--text); paint-order:stroke fill; max-width:820px; margin:0 0 22px; } .hero-hook em{ font-style:normal; color:var(--gold); } .hero-lede{ width:80%; background:var(--surface); color:var(--text); padding:20px 22px; border-radius:3px; box-shadow:0 12px 24px -10px rgba(0,0,0,.5); font-size:16px; } /* torn notepaper mat — jagged clip-path "ripped edge" behind a smooth, uncropped photo */ .hero-keyart{ position:relative; margin:34px 0 8px; background:var(--surface); background-image:repeating-linear-gradient(var(--rule) 0 1px, transparent 1px 27px); border:1px solid var(--surface-border); padding:44px; transform:rotate(-.6deg); clip-path: polygon( 0.0% 0.7%, 8.3% 3.3%, 16.7% 3.0%, 25.0% 0.2%, 33.3% 1.2%, 41.7% 2.9%, 50.0% 0.9%, 58.3% 0.3%, 66.7% 0.2%, 75.0% 1.8%, 83.3% 1.5%, 91.7% 1.5%, 100.0% 0.9%, 99.8% 8.3%, 99.6% 16.7%, 98.4% 25.0%, 98.2% 33.3%, 99.9% 41.7%, 99.0% 50.0%, 97.1% 58.3%, 99.8% 66.7%, 99.8% 75.0%, 98.2% 83.3%, 100.0% 91.7%, 100.0% 100.0%, 91.7% 97.3%, 83.3% 98.2%, 75.0% 99.2%, 66.7% 99.8%, 58.3% 99.7%, 50.0% 98.1%, 41.7% 97.0%, 33.3% 99.7%, 25.0% 98.0%, 16.7% 99.8%, 8.3% 98.1%, 0.0% 99.6%, 1.2% 91.7%, 0.2% 83.3%, 1.7% 75.0%, 0.9% 66.7%, 2.0% 58.3%, 0.0% 50.0%, 0.7% 41.7%, 0.4% 33.3%, 0.6% 25.0%, 3.1% 16.7%, 3.2% 8.3% ); } .hero-keyart img{ width:100%; display:block; } .art-strip{ width:100%; background:#040405; } .art-strip img{ width:100%; height:auto; } /* pasted-in colour photograph, polaroid style */ .photo-frame{ background:#fdfdfd; padding:10px 10px 30px; border-radius:2px; box-shadow:0 18px 30px -14px var(--shadow); transform:rotate(-1.2deg); } .story-block:nth-child(even) .photo-frame{ transform:rotate(1.4deg); } .photo-frame img{ width:100%; display:block; border-radius:1px; } .lyric-block{ margin:40px 0; } .lyric-block img{ max-width:360px; width:60%; margin-bottom:16px; } .lyric-card{ max-width:520px; font-style:italic; font-size:19px; line-height:1.55; border-left:4px solid var(--gold); padding:4px 0 4px 20px; } .lyric-card span{ display:block; } .trailer-wrap{ margin:44px 0; border:6px solid var(--text); border-radius:6px; overflow:hidden; box-shadow:10px 10px 0 var(--gold); transform:rotate(-.5deg); background:#000; } .trailer-wrap .ratio{ position:relative; padding-top:56.25%; } .trailer-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .write-songs{ display:flex; align-items:flex-start; gap:28px; flex-wrap:wrap; margin:44px 0; } .write-songs img{ max-width:280px; width:44%; flex:none; } .write-songs .copy{ flex:1; min-width:260px; font-size:16px; } /* ============ CTA BAND — full-bleed art background behind the wishlist/playtest CTA ============ */ .cta-band{ position:relative; background-image:linear-gradient(rgba(4,4,5,.6), rgba(4,4,5,.78)), url('../Images/Other/Zine_art.png'); background-size:cover; background-position:center; background-repeat:no-repeat; padding:80px 0; } .decorative-wrap{ text-align:center; margin:0 0 30px; } .wishlist-row{ position:relative; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:24px; } .playtest-form{ width:100%; max-width:360px; } .wishlist-cta{ display:inline-flex; align-items:center; gap:10px; background:var(--blue); color:#fff; padding:16px 30px; border-radius:4px; font-family:var(--display); text-transform:uppercase; font-size:18px; letter-spacing:.03em; text-decoration:none; box-shadow:5px 6px 0 var(--text); transform:rotate(-1deg); transition:transform .15s ease; } .wishlist-cta:hover{ transform:rotate(0deg) translateY(-2px); } .wishlist-cta svg{ width:20px; height:20px; fill:currentColor; } /* ============ SECTION LABEL ============ */ .section-label{ text-align:center; margin:0 0 46px; } .section-label img{ max-width:340px; width:70%; margin:0 auto; } /* ============ THE BAND ============ */ .band-section{ padding:70px 0; } .band-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:34px 26px; } .band-card{ padding:22px 20px 24px; } .band-card .portrait{ width:120px; height:120px; margin:0 auto 14px; } .band-card .portrait img{ width:100%; height:100%; object-fit:contain; object-position:center; } .band-card h3{ text-align:center; font-size:22px; text-transform:uppercase; margin-bottom:10px; color:var(--purple); } html[data-theme="dark"] .band-card h3{ color:#fff; } .band-card p{ font-size:14.5px; text-align:center; color:var(--text); } /* ============ STORYTELLING ============ */ .story-section{ padding:70px 0 90px; } /* ============ SCREENSHOTS ============ */ .screenshots-section{ padding:70px 0 90px; } .screenshots-grid{ display:grid; grid-template-columns:1fr 1fr; gap:34px 26px; } .screenshots-grid .photo-frame{ margin:0; transform:rotate(0deg); } .screenshots-grid .photo-frame:nth-child(odd){ transform:rotate(-.8deg); } .screenshots-grid .photo-frame:nth-child(even){ transform:rotate(.8deg); } .story-block{ display:grid; grid-template-columns:1.1fr .9fr; gap:34px; align-items:center; margin-bottom:64px; } .story-block:nth-child(even){ direction:rtl; } .story-block:nth-child(even) > *{ direction:ltr; } .story-block .shot{ aspect-ratio:16/10; } .story-block .copy h3{ font-size:20px; text-transform:uppercase; color:var(--gold); margin-bottom:10px; letter-spacing:.02em; } .story-block .copy p{ font-size:15.5px; } .story-intro{ max-width:760px; margin:0 auto 54px; text-align:center; } /* ============ FOOTER ============ */ footer.site{ padding:60px 0 40px; border-top:2px dashed var(--rule); text-align:center; } footer.site .tagline{ font-family:var(--display); text-transform:uppercase; font-size:15px; letter-spacing:.06em; margin-bottom:26px; } .funder-strip{ display:inline-flex; align-items:center; gap:28px; background:#040405; padding:16px 30px; border-radius:6px; margin-bottom:26px; } .funder-strip img{ height:34px; width:auto; filter:brightness(1); } .funder-strip img.oc{ height:34px; } .funder-strip img.cmf{ height:64px; } footer.site .copyright{ font-size:12.5px; color:var(--text-muted); } footer.site .copyright a{ text-decoration:underline; } /* ============ RESPONSIVE ============ */ @media (max-width:820px){ .story-block{ grid-template-columns:1fr; } .story-block:nth-child(even){ direction:ltr; } } @media (max-width:640px){ header.site{ flex-direction:column; gap:12px; align-items:flex-start; } header.site nav{ gap:12px 16px; } .hero{ padding:44px 0 30px; } .write-songs{ flex-direction:column; } .write-songs img{ width:56%; } .funder-strip{ flex-direction:column; gap:16px; } .screenshots-grid{ grid-template-columns:1fr; } [id]{ scroll-margin-top:210px; } } /* ============ DARK THEME — white paper cards, brand-blue rules ============ */ html[data-theme="dark"] .sticky, html[data-theme="dark"] .hero-lede{ background-color:#ffffff; color:var(--slate); } html[data-theme="dark"] .hero-keyart{ background-color:#ffffff; background-image:repeating-linear-gradient(var(--blue) 0 1px, transparent 1px 27px); } html[data-theme="dark"] .band-card h3, html[data-theme="dark"] .band-card p{ color:var(--slate); } html[data-theme="dark"] .decorative-line{ color:var(--text); } html[data-theme="dark"] .hero-hook{ -webkit-text-stroke:0; paint-order:normal; }