/* ========================= Pixel Font (local) ========================= */ @font-face { font-family: "Arcade"; src: url("ARCADEPI.TTF") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } /* ========================= Theme Variables ========================= */ :root{ /* Images */ --header-bg: url("/assets/papeeader.png"); --panel-bg: url("/assets/paper.png"); /* Block backgrounds (replace with your pixel art) */ --block-left-bg: url("raccoonxl.png"); --block-r1-bg: url("researchraccoontop.png"); --block-r2-bg: url("sleepyraccoontop.png"); --block-r3-bg: url("moneyraccoontop.png"); /* Palette (NES-ish) */ --ink: #1b1f23; /* near-black */ --paper: #f2efe9; /* warm paper */ --lightblue: #8ed8ff; /* cyan */ --green: #a6f7d0; /* mint */ --yellow: #f7fab2; /* yellow */ --darkblue: #073e63; /* deep blue */ /* Layout */ --header-height: 125px; --content-max-width: 1180px; --gap: 16px; --radius: 0px; /* hard pixels */ } /* ========================= Base ========================= */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body{ margin: 0; font-family: "Arcade", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-synthesis-weight: none; color: var(--ink); background: var(--green); line-height: 1.35; /* slightly tighter for pixel font */ } img{ max-width: 100%; display: block; image-rendering: pixelated; } a{ color: var(--ink); text-decoration: none; } a:focus-visible{ outline: 3px dotted var(--yellow); outline-offset: 2px; } .visually-hidden{ position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px; } /* Optional subtle CRT effect for the whole page (toggle by removing .crt on ) */ .crt{ background: repeating-linear-gradient( 180deg, rgba(0,0,0,0.02) 1px, rgba(0,0,0,0.02) 1px, transparent 2px, transparent 3px ); } /* ========================= Header ========================= */ .site-header{ height: var(--header-height); background-image: var(--header-bg); background-size: 100% 100%; /* fill without cropping; allows distortion */ background-repeat: no-repeat; background-position: center; background-color: var(--yellow); position: relative; display: grid; align-items: flex-start; } .header-inner{ height: 100%; color: var(--darkblue); display: grid; grid-template-columns: 1fr auto; align-items: flex-start; gap: var(--gap); max-width: var(--content-max-width); margin: 0 auto; padding: 0 16px; } /* Brand: pixel crisp */ .brand{ display: grid; grid-auto-flow: column; align-items: center; gap: 12px; min-width: 0; } .brand-logo{ width: 96px; height: 96px; image-rendering: optimizeQuality; } .title-image{ max-height: 90px; max-width: clamp(160px, 34vw, 420px); image-rendering: optimizeQuality; size: auto; } /* Nav */ nav[aria-label="Primary"]{ justify-self: end; } .nav-list{ list-style: none; display: flex; gap: 14px; margin: 0; padding: 0; } /* Pixel Buttons/Links */ .btn-link, .btn-primary{ display: inline-block; padding: 10px 14px; background: var(--green); color: var(--ink); text-transform: uppercase; letter-spacing: .5px; image-rendering: pixelated; position: relative; align-items: center; box-shadow: 0 0 0 4px var(--ink), /* outer stroke */ 0 6px 0 0 var(--ink); /* drop shadow (pixel) */ } .btn-primary{ background: var(--lightblue); color: var(--ink); align-items: center; } .btn-link:hover, .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 0 0 4px var(--ink), 0 8px 0 0 var(--ink); } .btn-link:active, .btn-primary:active{ transform: translateY(2px); box-shadow: 0 0 0 4px var(--ink), 0 2px 0 0 var(--ink); } /* Hamburger (pixel) */ .nav-toggle{ display: none; align-items: center; gap: 8px; background: var(--lightblue); color: var(--ink); border: none; padding: 8px 12px; font: inherit; cursor: pointer; box-shadow: 0 0 0 4px var(--ink), 0 6px 0 0 var(--ink); } .hamburger{ width: 18px; height: 14px; position: relative; display: inline-block; } .hamburger::before, .hamburger::after, .hamburger span{ content: ""; position: absolute; left: 0; right: 0; height: 3px; background: var(--ink); } .hamburger::before{ top: 0; } .hamburger::after{ bottom: 0; } .hamburger span{ top: 50%; transform: translateY(-50%); } /* ========================= Panel & Grid ========================= */ .panel{ background-image: var(--panel-bg); background-size: initial; background-position: center; background-repeat: no-repeat; /* fixed: was 'none' */ position: relative; } .panel::before{ /* light wash to keep text readable over busy pixel art */ content:""; position:absolute; inset:0; background: var(--lightblue); } .panel-inner{ position: relative; max-width: var(--content-max-width); margin: 0 auto; padding: 24px 16px 32px; } /* ======= 1 + 3 grid (equal-height behavior) ======= */ /* Make the whole 1+3 area tall enough to show blocks */ .grid-1-3{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); /* baseline height so items don't collapse, but still responsive */ min-height: clamp(540px, 70vh, 1000px); align-items: stretch; /* left & right match tallest side */ } /* Left fills its column height */ .block-left{ height: 100%; } /* Right is 3 equal rows that fill the column height */ .right-stack{ display: grid; grid-template-rows: repeat(3, 1fr); height: 100%; gap: var(--gap); } /* Important: don't let children force unexpected growth */ .grid-1-3 > * { min-height: 0; } .right-stack > * { min-height: 0; } /* ========================= Blocks ========================= */ .block{ position: relative; overflow: hidden; /* keeps the “frame” tidy */ display: grid; place-items: end start; color: #111; border-radius: 0; /* keep it blocky */ isolation: isolate; } .block::before{ content:""; position:absolute; inset:0; background-size: contain; /* keep pixel look; change to 'cover' if desired */ background-repeat: no-repeat; background-position: top; image-rendering: optimizeQuality; z-index: 0; transform: translateZ(0); } .block > .block-content{ position: absolute; z-index: 1; padding: 18px; background: var(--green); outline: 4px solid var(--darkblue); box-shadow: 0 6px 0 0 var(--ink); } .block h3{ margin: 0 0 6px; font-size: 20px; text-transform: uppercase; } .block p{ margin: 0 0 10px; color: var(--darkblue); } /* Assign backgrounds */ .block-left::before{ background-image: var(--block-left-bg); } .block-r1::before{ background-image: var(--block-r1-bg); } .block-r2::before{ background-image: var(--block-r2-bg); } .block-r3::before{ background-image: var(--block-r3-bg); } .block-r1::before, .block-r2::before, .block-r3::before{ background-size: contain; background-position: center top; background-repeat: no-repeat; min-height: fit-content; } /* ========================= Footer ========================= */ footer{ background: var(--darkblue); color: var(--yellow); border-top: 4px solid var(--ink); box-shadow: inset 0 8px 0 0 var(--ink); } .footer-inner{ max-width: var(--content-max-width); color: var(--yellow); margin: 0 auto; padding: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; } footer a { color: var(--yellow); /* pick any of your theme vars, e.g. var(--lightblue), var(--yellow), etc. */ text-decoration: none; /* optional: remove underline */ } footer a:hover { color: var(--lightblue); /* hover color */ text-decoration: underline; /* optional */ } /* ========================= Pixel Frame / Stepped Border ========================= */ .pixel-border{ position: relative; } .pixel-border::after{ /* outer frame */ content: ""; position: absolute; inset: -8px; /* border thickness */ background: var(--yellow); z-index: -1; clip-path: polygon( 0 20%, 4% 20%, 4% 4%, 20% 4%, 20% 0, 80% 0, 80% 4%, 96% 4%, 96% 20%, 100% 20%, 100% 80%, 96% 80%, 96% 96%, 80% 96%, 80% 100%, 20% 100%, 20% 96%, 4% 96%, 4% 80%, 0 80% ); } /* ========================= Responsive ========================= */ @media (max-width: 980px){ .header-inner{ grid-template-columns: 1fr auto auto; } .nav-toggle{ display: inline-flex; justify-self: end; } nav[aria-label="Primary"]{ position: absolute; top: var(--header-height); right: 0; left: 0; background: var(--darkblue); color: var(--yellow); transform-origin: top right; transform: scaleY(0); opacity: 0; pointer-events: none; transition: transform .18s steps(2), opacity .18s linear; box-shadow: 0 0 0 4px var(--yellow), 0 6px 0 0 var(--lightblue); } nav[aria-label="Primary"].open{ transform: scaleY(1); opacity: 1; pointer-events: auto; } .nav-list{ flex-direction: column; padding: 12px; gap: 8px; } } @media (max-width: 860px){ .grid-1-3{ grid-template-columns: 1fr; min-height: fit-content; } .right-stack{ grid-template-rows: none; grid-auto-rows: 220px; min-height: fit-content; } .block-left{ min-height: 360px; } } /* Make sure you actually use it */ body { font-family: "Arcade", monospace !important; }