/* ========================================================================== SMUGGLERS BATCH — house stylesheet The palette is taken from the hero footage: a bottle fired out of a gun through fire and smoke, landing on a crate. That film is black, ember orange, muzzle gold and hot glass, so the site is too. The earlier forest and dossier palette is gone with the acts it was built for. Layer order for the whole site, so nothing fights over z-index: 10 plate hero film and stills 30 smoke drifting haze 50 copy text over the plate 55 grain film veil 60 chrome persistent UI ========================================================================== */ :root{ /* Ground. Near-black, warm rather than blue — everything here is lit by fire, so even the shadows lean red. */ --night: #070505; --night-2: #0d0908; --night-3: #17100c; /* Fire, four steps. These replace the old forest ramp and carry the same job: separating depth by value when smoke washes detail out. */ --pine-deep: #180a05; --pine: #2a1108; --pine-mid: #40190a; --pine-lit: #6d2a0e; /* Ember. The signature colour, straight off the muzzle flash. */ --ember: #e2571a; --ember-lt: #ff8a3d; --ember-dk: #a63a10; /* Paper. Dirty cream, never white. */ --paper: #e8d9bd; --paper-lt: #f6ecd8; --paper-mid: #c4ac85; --paper-dk: #8a7550; --paper-edge: #5c4c31; /* Wood and metal, from the crate the bottle lands on. */ --timber: #4a3420; --timber-dk: #2c1e12; --rust: #9c5a2c; --brass: #c8912f; --brass-lt: #efbc5b; /* Danger. The cap red, and the alarm orange of the flash. */ --burgundy: #7c1a12; --warning: #e2571a; --warning-lt: #ff8a3d; --police-blue: #2f5f8f; --police-blue-lt:#4d8bc4; --police-red: #a52a1f; --ink: #17130d; --ink-soft: rgba(232,217,189,.66); /* Four faces, four narrative jobs. Display shouts, stencil is stamped on crates, type is documents, hand is scribbled in a margin. */ --f-display: "Alfa Slab One", Rockwell, Georgia, serif; --f-stencil: "Oswald", "Arial Narrow", sans-serif; --f-type: "Special Elite", "Courier New", monospace; --f-hand: "Caveat", "Segoe Script", cursive; --maxw: 1180px; --gut: clamp(20px, 4vw, 48px); --ease-out: cubic-bezier(.2,.7,.3,1); --ease-thud: cubic-bezier(.3,1.3,.5,1); --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E"); --tex-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035 .9' numOctaves='4'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .17 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23f)'/%3E%3C/svg%3E"); /* Stamp distress. A single mask layer, mostly opaque with scattered gaps: feFuncA discrete pushes the turbulence to hard on/off so ink either took or it did not, which is how a rubber stamp actually fails. Used alone rather than composited against a second layer, because mask-composite ordering differs between the standard and -webkit syntaxes and gets the subtraction backwards in one of them. */ --tex-stamp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 14 -5'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1 1 1 1 0 1 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23s)'/%3E%3C/svg%3E"); } *,*::before,*::after{ box-sizing:border-box; } [hidden]{ display:none !important; } html{ background:var(--night); } body{ margin:0; background:var(--night); color:var(--paper); font-family:var(--f-type); font-size:clamp(15px,1.05vw,17px); line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,svg,video{ display:block; max-width:100%; } a{ color:var(--brass-lt); text-decoration:none; } button{ font:inherit; color:inherit; } h1,h2,h3{ margin:0 0 .5em; line-height:1.02; font-weight:400; } h1{ font-family:var(--f-display); font-size:clamp(2.6rem,7vw,5.6rem); letter-spacing:-.015em; } h2{ font-family:var(--f-display); font-size:clamp(1.9rem,4.4vw,3.4rem); letter-spacing:-.01em; } h3{ font-family:var(--f-stencil); font-size:clamp(1.1rem,1.7vw,1.45rem); letter-spacing:.06em; text-transform:uppercase; } p{ margin:0 0 1.1em; } .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); } .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* Film veil over everything. Fixed, so it reads as grain on the lens rather than a texture glued to the page. */ .grain{ position:fixed; inset:0; z-index:55; pointer-events:none; background-image:var(--tex-grain); opacity:.5; mix-blend-mode:overlay; } /* --- Paper ---------------------------------------------------------------- */ .paper{ position:relative; background:#cdbb9a url("../img/scene/paper.webp") center/cover no-repeat; color:var(--ink); box-shadow:0 34px 80px rgba(0,0,0,.66), 0 2px 0 rgba(255,255,255,.12) inset; } /* The stock is a photograph now — real fibre, a real fold, a real coffee ring and the ghost of typing pressed through from the other side. The only thing left on top is a whisper of lamp falloff so it sits in the scene's light rather than looking like a flat scan pasted in. */ .paper::after{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(ellipse 78% 66% at 32% 22%, rgba(255,232,190,.16), transparent 62%), radial-gradient(ellipse 62% 58% at 88% 92%, rgba(52,34,14,.20), transparent 66%); } /* A rough deckle along the top and bottom. Two tooth sizes on different repeats so the rhythm never lines up — one clean repeating radius reads as a scalloped doily, which is exactly what it used to look like. */ .paper--torn{ --tear:9px; -webkit-mask: linear-gradient(#000 0 0) center/100% calc(100% - var(--tear)*2) no-repeat, radial-gradient(circle at 50% 100%, #000 62%, transparent 64%) top left/13px var(--tear) repeat-x, radial-gradient(circle at 50% 100%, #000 72%, transparent 74%) top left/29px var(--tear) repeat-x, radial-gradient(circle at 50% 0, #000 62%, transparent 64%) bottom left/17px var(--tear) repeat-x, radial-gradient(circle at 50% 0, #000 72%, transparent 74%) bottom left/31px var(--tear) repeat-x; mask: linear-gradient(#000 0 0) center/100% calc(100% - var(--tear)*2) no-repeat, radial-gradient(circle at 50% 100%, #000 62%, transparent 64%) top left/13px var(--tear) repeat-x, radial-gradient(circle at 50% 100%, #000 72%, transparent 74%) top left/29px var(--tear) repeat-x, radial-gradient(circle at 50% 0, #000 62%, transparent 64%) bottom left/17px var(--tear) repeat-x, radial-gradient(circle at 50% 0, #000 72%, transparent 74%) bottom left/31px var(--tear) repeat-x; } .doc-label{ font-family:var(--f-stencil); font-size:.7rem; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--paper-dk); } .doc-line{ display:flex; gap:.9em; align-items:baseline; margin-bottom:.35em; } .doc-line dt{ min-width:9.5em; margin:0; color:var(--paper-dk); font-family:var(--f-stencil); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; } .doc-line dd{ margin:0; color:var(--ink); font-size:.95rem; } .hand{ font-family:var(--f-hand); font-size:1.25rem; color:var(--burgundy); display:inline-block; transform:rotate(-2.5deg); } /* Redaction bar. Reveals on hover and on keyboard focus, so it is a real discoverable detail rather than a mouse-only trick. */ .redact{ background:#100e0b; color:transparent; border-radius:1px; padding:0 .25em; cursor:help; transition:color .18s, background-color .18s; } .redact:hover,.redact:focus-visible{ background:transparent; color:inherit; outline:1px dashed var(--warning); outline-offset:2px; } /* --- Stamps --------------------------------------------------------------- A rubber stamp is ink pressed unevenly through a rocking die: hard edge, broken coverage, never a clean box. The grain mask eats holes in it. */ .stamp{ --stamp-ink: var(--warning); display:inline-flex; align-items:center; gap:.6em; font-family:var(--f-stencil); font-weight:600; font-size:clamp(.68rem,1vw,.82rem); letter-spacing:.24em; text-transform:uppercase; color:var(--stamp-ink); padding:.5em 1.1em; border:2.5px solid var(--stamp-ink); border-radius:2px; transform:rotate(-4deg); opacity:.9; -webkit-mask-image:var(--tex-stamp); -webkit-mask-size:180px 180px; mask-image:var(--tex-stamp); mask-size:180px 180px; } .stamp--blue{ --stamp-ink: var(--police-blue-lt); } .stamp--ink{ --stamp-ink: var(--ink); } .stamp--paper{ --stamp-ink: var(--burgundy); } .stamp--lg{ font-size:clamp(.9rem,2vw,1.4rem); padding:.55em 1.3em; border-width:4px; } /* --- Buttons -------------------------------------------------------------- A crate stencil on timber, not a web button. Pressed down on :active with the drop shadow collapsing, so it reads as physically depressed. */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6em; padding:.95em 1.9em; font-family:var(--f-stencil); font-size:.86rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--paper-lt); cursor:pointer; text-align:center; background:linear-gradient(180deg, rgba(255,255,255,.06), transparent 42%), var(--timber); border:1px solid rgba(0,0,0,.5); border-radius:2px; box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 2px 0 var(--timber-dk), 0 10px 22px rgba(0,0,0,.5); transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out); } .btn:hover{ transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.1) inset, 0 3px 0 var(--timber-dk), 0 16px 30px rgba(0,0,0,.55); } .btn:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 0 0 var(--timber-dk), 0 4px 10px rgba(0,0,0,.5); transition-duration:.06s; } .btn--go{ background:linear-gradient(180deg, #96301c, #6d1d10 78%); color:#f6e5da; border-color:#4a1109; box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 2px 0 #4a1109, 0 10px 24px rgba(90,16,8,.45); } .btn--go:hover{ background:linear-gradient(180deg,#a5361f,#7a2213 78%); box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 3px 0 #4a1109, 0 16px 32px rgba(90,16,8,.5); } .btn--go:active{ box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 0 0 #4a1109, 0 4px 10px rgba(90,16,8,.4); } .btn--ghost{ background:transparent; border-color:var(--brass); color:var(--brass-lt); box-shadow:none; } .btn--ghost:hover{ background:rgba(168,130,60,.12); box-shadow:none; } .btn--ghost:active{ transform:translateY(1px); box-shadow:none; } .btn--full{ width:100%; } .btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; } :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:2px solid var(--brass-lt); outline-offset:3px; border-radius:2px; }