/* ==========================================================================
PixiPals — Shared Stylesheet
Structural/visual foundation only. Page-specific project content is not
yet finalized; placeholder styling (dashed borders, italic gray text) is
used to visually distinguish temporary/development content from approved
project content, per SITE_STRUCTURE.md and SITE_REQUIREMENTS.md.
========================================================================== */
/* --------------------------------------------------------------------------
Design tokens
Exact color values are an implementation-level choice (SITE_REQUIREMENTS.md
§4 permits this) derived from the supplied Pixipals_Bobbin-Jump.png and
Footer_Background.png artwork. Pink/purple are dominant; cyan, lime, and
yellow are secondary accents, per the approved palette direction.
-------------------------------------------------------------------------- */
:root {
--color-pink: #e8368f;
--color-purple: #7c4fbe;
--color-purple-deep: #4b2e83;
--color-cyan: #5fd1e8;
--color-lime: #a6e22e;
--color-yellow: #ffd93d;
--color-offwhite: #fff8fb;
--color-charcoal: #221830;
--content-max-width: 1140px;
/* Shared exterior gap between the three major bounded regions:
Header → Social Links and Social Links → main. The former value was
1.25rem; 1rem is the approved 20% reduction. */
--major-section-gap: 1rem;
/* Body copy: Helvetica/Arial family per SITE_REQUIREMENTS.md §4 */
--font-body: Arial, Helvetica, sans-serif;
/* Headings: bold/blocky system font, no third-party or remote font,
per SITE_REQUIREMENTS.md §4 */
--font-heading: "Arial Black", Impact, Arial, sans-serif;
/* --------------------------------------------------------------------
Version 2 ("sidebar redesign") chunky-frame tokens
Derived from the existing brand palette above (--color-pink/-purple/
-purple-deep/-charcoal/-offwhite are reused, not replaced). Two extra
tints are added only to build hard-stepped pink/purple bevel bands
(replacing the chrome-silver bands) for the social bar and sidebar
navigation buttons; no new hue outside the approved palette direction
is introduced. Frame/shadow values are shared so every heavy-framed
region (header cross-reference aside, social bar, sidebar, content
panels) uses one consistent chunky treatment.
-------------------------------------------------------------------- */
--color-pink-light: #ff8fd6;
--color-purple-light: #a68bdb;
/* Darkened derivative of --color-pink, used only where pink sits behind
white/offwhite text (sidebar navigation buttons): --color-pink itself
(#e8368f) contrasts white at ~3.9:1, short of the 4.5:1 text-contrast
minimum; this deeper shade reaches ~4.8:1 while remaining clearly the
same pink hue. */
--color-pink-deep: #d12b80;
--frame-border-w: 5px;
--frame-border-color: var(--color-charcoal);
--frame-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55);
/* --------------------------------------------------------------------
Version 2.1 ("visual refinement") metallic button gradient bands.
Reuses only existing tokens — no new hues are introduced. The two
bands that sit directly behind label text (--color-pink-deep /
--color-purple-deep) are the same already-verified >=4.5:1-against-
--color-offwhite pair used by the original sidebar buttons; only
their order changes between normal/hover, exactly as before. A thin
bright highlight band (--color-pink-light / --color-purple-light) is
layered above them, sized so it stays inside the button's own top
padding and never sits behind the label text, for a heavier
"metallic chrome" read without touching text contrast.
-------------------------------------------------------------------- */
--metal-gradient: linear-gradient(
180deg,
var(--color-pink-light) 0%,
var(--color-pink-light) 14%,
var(--color-pink-deep) 14%,
var(--color-pink-deep) 58%,
var(--color-purple-deep) 58%,
var(--color-purple-deep) 100%
);
--metal-gradient-hover: linear-gradient(
180deg,
var(--color-purple-light) 0%,
var(--color-purple-light) 14%,
var(--color-purple-deep) 14%,
var(--color-purple-deep) 58%,
var(--color-pink-deep) 58%,
var(--color-pink-deep) 100%
);
/* Active/current — identical to the original two-band pressed state
(no highlight sliver, darker band on top, plus an underline on
.is-current), unchanged in substance from before this pass. */
--metal-gradient-active: linear-gradient(
180deg,
var(--color-purple-deep) 0%,
var(--color-purple-deep) 50%,
var(--color-pink-deep) 50%,
var(--color-pink-deep) 100%
);
--metal-bevel-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.55),
inset 0 -3px 0 rgba(0, 0, 0, 0.45), inset 3px 0 0 rgba(255, 255, 255, 0.35),
inset -3px 0 0 rgba(0, 0, 0, 0.3), 6px 6px 0 rgba(0, 0, 0, 0.6);
--metal-bevel-shadow-active: inset 0 3px 0 rgba(0, 0, 0, 0.5),
inset 0 -3px 0 rgba(255, 255, 255, 0.3),
inset 3px 0 0 rgba(0, 0, 0, 0.35), inset -3px 0 0 rgba(255, 255, 255, 0.25);
/* --------------------------------------------------------------------
"Rose Arcade" button treatment — approved 2026-08-20. Applied only to
the sidebar navigation buttons (.sidebar-nav-button) and the three
Social Links buttons (.social-link). Deliberately kept as its own
token set, separate from the --metal-gradient*/--metal-bevel-shadow*
family above, so Gallery's .gallery-arrow controls (gallery.css),
which consume the --metal-* tokens too, are not changed indirectly
by this pass. Exact colors/values are as specified by the project
owner for this task.
-------------------------------------------------------------------- */
--rose-arcade-border: #2d1039;
--rose-arcade-text: #18051f;
--rose-arcade-text-shadow: #ffb5e7;
--rose-arcade-gradient: linear-gradient(
to bottom,
#fff1fd 0 8%,
#f8b9e9 8% 22%,
#ee6fc9 22% 43%,
#d83ba8 43% 72%,
#a5207e 72% 82%,
#641357 82% 100%
);
/* Hover: same six-stop banded construction, each stop's HSL lightness
+0.05 and saturation +0.08 (clamped) vs. its normal-state color
above — a slight brightness/saturation lift with no blur, glow,
rounded corners, smooth re-blended gradient, or animation. */
--rose-arcade-gradient-hover: linear-gradient(
to bottom,
#ffffff 0 8%,
#fccef1 8% 22%,
#f680d4 22% 43%,
#e548b5 43% 72%,
#c31b92 72% 82%,
#7f116e 82% 100%
);
--rose-arcade-bevel: inset 0 4px 0 #ffffff, inset 4px 0 0 #ffd9f5,
inset -4px 0 0 #70165f, inset 0 -5px 0 #3d0a47, 5px 5px 0 #18051f;
--rose-arcade-current-text: #fff7ff;
--rose-arcade-current-text-shadow: #47104f;
--rose-arcade-gradient-current: linear-gradient(
to bottom,
#f18bd5 0 8%,
#b92791 8% 30%,
#8b1b78 30% 75%,
#641357 75% 100%
);
--rose-arcade-bevel-current: inset 4px 4px 0 #4b0c55,
inset -3px -3px 0 #f18bd5, 2px 2px 0 #18051f;
/* Navigation and Social Links labels now share one centered, text-only
treatment. At the vertical midpoint, #18051f over the #d83ba8 band
measures 4.73:1; pressed controls use the approved light current-state
text pair over the darker pressed gradient. */
}
/* --------------------------------------------------------------------------
Third-party font — Pixelify Sans (retired, kept inactive)
Formerly used for the visitor counter, Home headings, and Credits group
headings. As of the Version 2.1 visual refinement, every one of those
uses has been switched to Press Start 2P (below), per the project
owner's approved instruction. This @font-face declaration and the
underlying font file are left in place on disk (cleanup was not
authorized) but nothing in this stylesheet references "Pixelify Sans"
as an active font-family any longer, so the file is not requested by
the browser. Source: https://github.com/google/fonts/tree/main/ofl/pixelifysans
-------------------------------------------------------------------------- */
@font-face {
font-family: "Pixelify Sans";
src: url("fonts/pixelify-sans/PixelifySans%5Bwght%5D.ttf") format("truetype-variations");
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
/* --------------------------------------------------------------------------
Third-party font — Press Start 2P
Approved by the project owner (Version 2.1 visual refinement) for
headings, window titles, buttons, and visitor-counter text/digits.
Self-hosted static TrueType file, Regular 400 weight only (the only
weight the family ships), SIL Open Font License. Source:
https://github.com/google/fonts/tree/main/ofl/pressstart2p
No Google Fonts CSS, CDN, or JS font loading is used; the font loads
automatically from this @font-face declaration with no other runtime
request. Body copy remains Helvetica/Arial (--font-body, unchanged).
-------------------------------------------------------------------------- */
@font-face {
font-family: "Press Start 2P";
src: url("fonts/press-start-2p/PressStart2P-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* --------------------------------------------------------------------------
Reset and base
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
html {
margin: 0;
}
body {
margin: 0;
font-family: var(--font-body);
/* Outer viewport canvas — outside the bounded 1140px composition.
The approved #e3cefb fill replaces the former #d1f7ff canvas and the
earlier light-mode white / dark-mode black canvases. It remains a plain
solid color in every user color-scheme preference: no image, texture, pattern, or
gradient is applied. Orchid remains on `main` (below), confined to the
bounded composition. The header, footer, and content windows retain
their own backgrounds unchanged. */
background-color: #e3cefb;
color: var(--color-charcoal);
line-height: 1.5;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--color-purple-deep);
}
h1,
h2,
h3 {
font-family: var(--font-heading);
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-purple-deep);
text-shadow: 2px 2px 0 var(--color-pink);
line-height: 1.2;
}
h1 {
font-size: clamp(1.75rem, 4vw, 2.75rem);
margin: 0 0 1.25rem;
}
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
animation: none !important;
}
}
/* --------------------------------------------------------------------------
Accessibility utilities
-------------------------------------------------------------------------- */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--color-charcoal);
color: #fff;
padding: 0.75rem 1.25rem;
z-index: 1000;
text-decoration: none;
font-family: var(--font-body);
}
.skip-link:focus {
left: 1rem;
top: 1rem;
}
:focus-visible {
outline: 3px solid var(--color-cyan);
outline-offset: 2px;
}
/* --------------------------------------------------------------------------
Header (structural placeholder — no approved artwork/text yet)
-------------------------------------------------------------------------- */
.site-header {
/* Bounded desktop composition (SITE_REQUIREMENTS.md §4): the header band
itself, not just its inner content, is capped at --content-max-width
and centered, so it lines up with main/nav/footer and does not run
edge-to-edge on large displays. Fluid (fills available width) below
the maximum. */
width: 100%;
max-width: var(--content-max-width);
margin-inline: auto;
--header-min-h: clamp(120px, 22vw, 220px);
min-height: var(--header-min-h);
position: relative; /* positioning context for .header-byline */
display: flex;
align-items: center;
justify-content: center;
--header-pad-x: clamp(1rem, 4vw, 2.5rem);
--header-pad-y: clamp(0.5rem, 1.8vw, 0.9rem);
--header-border-w: 4px;
/* Header's usable interior height (rendered height minus padding and
border) — the shared reference the logo's visual scale below is
derived from, so it always tracks the header's actual size at any
viewport rather than a separately hand-tuned curve. */
--header-usable-h: calc(var(--header-min-h) - (var(--header-pad-y) * 2) - var(--header-border-w));
/* Version 2: images/Logo_Pixel.png has no transparent padding around its
painted artwork (confirmed — its alpha bounding box equals its full
521×347 canvas exactly), so unlike the previous Logo_Smooth.svg no
footprint/visual-size split or compensating scale factor is needed.
The logo's grid row height and its own rendered height are the same
value: the header's full usable interior height, per the approved
"give the logo vertical priority / height: 100%" requirement. */
--logo-footprint-h: var(--header-usable-h);
--logo-h: var(--header-usable-h);
padding: var(--header-pad-y) var(--header-pad-x);
/* Approved header composition: Header_Background.png is a decorative
background image only (no alt text or semantic ), matching the
footer's cover/no-repeat/center treatment. */
background-color: #8a6fc4; /* fallback tone if the image fails to load, matches footer fallback */
background-image: url("images/Header_Background.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-bottom: 4px solid var(--color-charcoal);
}
/* --------------------------------------------------------------------------
Header content — approved three-image composition (left badge / centered
logo / right badge), replacing the former structural placeholder note.
The byline (below) is a separate, absolutely positioned sibling so it
cannot compete with this row for vertical space.
-------------------------------------------------------------------------- */
.header-content {
display: grid;
grid-template-columns: 1fr auto 1fr;
/* Explicit row height (not just a height on the grid container) is
required so that the logo's "height: 100%" below resolves against a
definite value instead of the row's own auto/content-based size
(which would otherwise create a circular auto/auto percentage that
resolves to the image's intrinsic size, not a true 100% fill). */
grid-template-rows: var(--header-usable-h);
align-items: center;
column-gap: clamp(0.5rem, 3vw, 1.5rem);
width: 100%;
/* Version 2: the row itself is set to the header's full usable interior
height so the logo (height: 100%, below) can fill it edge-to-edge
with no intentional top/bottom gap, without changing the header's own
overall min-height. */
height: var(--header-usable-h);
}
/* Equal-width left/right regions (both 1fr) guarantee the center column
sits at the header's true horizontal midpoint regardless of how wide
either award badge is. Approved re-scale: badges target ~75% of the
header's usable interior height at desktop/tablet widths, sharing one
height rule so both compute identically; width stays auto so each
badge's own intrinsic aspect ratio is preserved (no crop/stretch). */
.header-badge {
height: clamp(54px, 13.4vw, 140px);
width: auto;
display: block;
}
.header-badge--left {
grid-column: 1;
justify-self: center;
}
.header-badge--right {
grid-column: 3;
justify-self: center;
}
/* Version 2 — images/Logo_Pixel.png, approved replacement for
Logo_Smooth.svg. Per the approved requirement, the logo is given
vertical priority: height: 100% of the header's usable interior height
(--logo-h, which now equals --header-usable-h exactly — see above),
width: auto so the image's own intrinsic aspect ratio (521×347) scales
proportionally with no distortion and no cropping of the source file.
Because --logo-footprint-h and --logo-h are now the same value, no
recentering margin is needed: the logo fills its grid row exactly,
removing the intentional top/bottom gap that existed around the
previous logo. width stays auto (max-width reset below, overriding the
sitewide img rule) so the aspect ratio is preserved. Centered by the
equal 1fr side columns on .header-content, not merely between the two
(differently sized) badges. */
.header-logo {
grid-column: 2;
justify-self: center;
height: 100%;
width: auto;
max-width: none;
margin: 0;
display: block;
}
/* Byline — unchanged position/behavior from the prior pass: absolutely
positioned within .site-header so it cannot compete with the logo/
badges for vertical space, anchored near the header's bottom edge to
the right of the logo. Its left edge is computed from the header's
true horizontal center plus half of the logo's own rendered width. The
constant below (0.7507) is half of Logo_Pixel.png's own intrinsic
aspect ratio (521 / 347 ÷ 2 ≈ 0.7507, replacing the previous logo's
0.69275 constant), so the byline continues to sit just past the new
logo's true right edge at any viewport width rather than at a fixed
pixel offset. `right` matches the header's own horizontal padding, and
`bottom` holds it a small distance above the social bar, without
adding any extra header height. */
.header-byline {
position: absolute;
left: calc(50% + (var(--logo-h) * 0.7507) + 0.5rem);
right: var(--header-pad-x);
bottom: clamp(0.3rem, 1.4vw, 0.65rem);
margin: 0;
text-align: left;
font-family: var(--font-body);
font-weight: 400;
font-style: normal;
font-size: clamp(0.6rem, 1.9vw, 0.82rem);
line-height: 1.15;
color: var(--color-charcoal);
}
/* --------------------------------------------------------------------------
Primary navigation — chrome-silver beveled buttons
-------------------------------------------------------------------------- */
.primary-nav {
/* Bounded desktop composition (SITE_REQUIREMENTS.md §4): see the matching
comment on .site-header. */
width: 100%;
max-width: var(--content-max-width);
margin-inline: auto;
background: var(--color-charcoal);
padding: 0.5rem;
}
.nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
max-width: var(--content-max-width);
margin-inline: auto;
}
.nav-button {
display: inline-block;
padding: 0.65rem 1.15rem;
font-family: var(--font-heading);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
color: #2b2b33;
/* Hard-edged chrome bands (no smooth blend) for a chunkier, more
pixel-inspired bevel, using the same silver values as before. */
background: linear-gradient(
180deg,
#fdfdfd 0%,
#fdfdfd 25%,
#d4d4d8 25%,
#d4d4d8 50%,
#a8a8b0 50%,
#a8a8b0 75%,
#e2e2e6 75%,
#e2e2e6 100%
);
border: 3px solid #6f6f78;
border-radius: 0;
box-shadow: inset 0 2px 0 #ffffff, inset 0 -2px 0 rgba(0, 0, 0, 0.35),
inset 2px 0 0 rgba(255, 255, 255, 0.5),
inset -2px 0 0 rgba(0, 0, 0, 0.25), 4px 4px 0 rgba(0, 0, 0, 0.55);
transition: background 0.15s ease;
}
.nav-button:hover {
background: linear-gradient(
180deg,
#ffffff 0%,
#ffffff 25%,
#e6e6ea 25%,
#e6e6ea 50%,
#c0c0c8 50%,
#c0c0c8 75%,
#f0f0f4 75%,
#f0f0f4 100%
);
}
.nav-button:active,
.nav-button.is-current {
background: linear-gradient(
180deg,
#a8a8b0 0%,
#a8a8b0 33%,
#d4d4d8 33%,
#d4d4d8 66%,
#fdfdfd 66%,
#fdfdfd 100%
);
box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.45), inset 0 -2px 0 #ffffff,
inset 2px 0 0 rgba(0, 0, 0, 0.3), inset -2px 0 0 rgba(255, 255, 255, 0.4);
color: var(--color-charcoal);
}
/* --------------------------------------------------------------------------
Main content
-------------------------------------------------------------------------- */
main {
max-width: var(--content-max-width);
/* Keeps the framed Social Links module visually separate from the Orchid
main body using the same outer-canvas gap as Header → Social Links. */
margin: var(--major-section-gap) auto 0;
padding: 2rem 1.25rem 3rem;
min-height: 40vh;
/* Approved owner exception: main-content background is Orchid (#DA70D6),
confined to the bounded 1140px composition (moved here from `body` so
it cannot leak into the outer viewport canvas). Accepted despite two
pre-existing foreground colors measuring below WCAG AA against it (see
SITE_REQUIREMENTS.md §4 for the exact ratios and the recorded
exception). No replacement foreground colors were invented or applied.
Unaffected by light/dark preference — only the outer canvas changes. */
background-color: #DA70D6;
}
.placeholder-content {
font-style: italic;
color: #555;
border: 2px dashed #bbb;
padding: 1rem 1.25rem;
background: #fafafa;
}
/* Home page hero layout (SITE_STRUCTURE.md §3, Home Page Initial Layout)
Uses normal document flow with a floated image rather than a two-column
Flexbox/Grid layout: Bobbin sits at the upper-left (the "star field" of
the flag-layout analogy) and the placeholder text wraps in-flow beside
it, then continues at the full content width once it clears the image's
bottom edge. */
.home-hero::after {
content: "";
display: block;
clear: both;
}
.home-hero__image {
float: left;
width: 35%;
max-width: 320px;
height: auto;
margin: 0 1.5rem 1.25rem 0;
}
/* Home Logline refinement: the approved animated Bobbin asset replaces the
former SVG. Flex alignment vertically centers the enlarged logline beside
the animation; the image remains fluid and cannot overwhelm the window. */
.home-logline {
display: flex;
align-items: center;
gap: clamp(1rem, 3vw, 1.75rem);
}
/* The generic .home-hero clearfix above is unnecessary in this flex variant
and would otherwise become an extra flex item. */
.home-logline::after {
content: none;
display: none;
}
.home-logline .home-hero__image {
float: none;
flex: 0 1 auto;
width: min(34%, 250px);
min-width: 110px;
max-width: 250px;
height: auto;
margin: 0;
}
.home-logline__text {
flex: 1 1 auto;
min-width: 0;
font-size: 1.25rem; /* two type-size steps above the 1rem body copy */
line-height: 1.55;
}
.home-logline__text p {
margin: 0;
}
/* Film Synopsis: a dedicated text column and poster column replace the float
treatment. The prior float began beside paragraph two, so its tall cleared
box created a large empty area below the copy. This grid uses the available
width to make both columns similar in visual height and removes that gap. */
.home-synopsis {
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(160px, 24vw, 210px);
align-items: center;
gap: clamp(1rem, 3vw, 1.75rem);
}
.home-synopsis__copy {
min-width: 0;
}
.home-synopsis__copy > :first-child {
margin-top: 0;
}
.home-synopsis__copy > :last-child {
margin-bottom: 0;
}
.home-synopsis__poster {
width: 100%;
max-width: 210px;
height: auto;
margin: 0;
justify-self: end;
}
@media (max-width: 700px) {
.home-synopsis {
grid-template-columns: minmax(0, 1fr);
}
.home-synopsis__poster {
width: min(65%, 210px);
justify-self: center;
}
}
/* Home hero text now holds approved project copy (Logline, format line,
Film Synopsis) rather than placeholder content, so the placeholder-content
class was removed from the Home markup and the shared box-chrome/italic
treatment no longer applies here. The shared .placeholder-content rule
immediately below is untouched and still governs the other six pages,
which remain pending approved content. */
/* Per the project owner's follow-up correction: the removed "PixiPals"
body heading has been replaced by promoting "Logline" to the Home
page's
(with "Film Synopsis" remaining an
). Both share this
one class so they render at an identical, deliberately enlarged size
regardless of heading level, rather than "Logline" inheriting the
smaller/differently-spaced base
rule that was tuned for the
removed title. Wording, capitalization behavior (via the shared
h1,h2,h3 uppercase rule, above), color, and text-shadow are unchanged
and still inherited from that shared rule — only font-family, weight,
size, and margin are set here. */
/* Superseded, retained for reference (unused as of the Version 2.1 visual
refinement): the Home page's "Logline" and "Film Synopsis" headings
used to live inline in .home-hero__text, styled by this rule. They now
live in their window's .window__title (see the Version 2.1 window
system, below) instead, so this selector no longer matches anything —
left in place rather than deleted, matching this stylesheet's existing
practice for superseded rules (e.g. .primary-nav/.nav-button, above). */
.home-hero__text .home-section-heading {
font-family: "Pixelify Sans", var(--font-heading);
font-weight: 700;
font-style: normal;
font-size: clamp(2rem, 3vw, 2.75rem);
margin: 0 0 1rem;
}
/* --------------------------------------------------------------------------
Footer
-------------------------------------------------------------------------- */
.site-footer {
/* Bounded desktop composition (SITE_REQUIREMENTS.md §4): see the matching
comment on .site-header. */
width: 100%;
max-width: var(--content-max-width);
margin-inline: auto;
border-top: 4px solid var(--color-charcoal);
background-color: #8a6fc4; /* fallback tone if the image fails to load */
background-image: url("images/Footer_Background.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.footer-inner {
max-width: var(--content-max-width);
margin: 0 auto;
padding: 1.5rem 1.25rem 2rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
/* Visitor counter — novelty odometer, SITE_REQUIREMENTS.md §9
The label and digits now share one continuous casing (background,
border, and shadow live on .visitor-counter) so no footer-background
gap is exposed between them; .odometer no longer draws its own
separate box. */
.visitor-counter {
display: flex;
align-items: center;
gap: 0.5rem;
background: #1a1420;
border: 3px solid #0d0a12;
border-radius: 4px;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.3);
padding: 0.35rem 0.6rem;
max-width: 100%;
flex-wrap: wrap;
justify-content: center;
}
.visitor-counter__label {
/* Version 2.1: switched from Pixelify Sans to the self-hosted Press
Start 2P, per the project owner's approved instruction. Only Regular
400 exists locally, so the prior Medium 500/italic styling is not
reproduced (no bold/italic synthesis) — normal style/weight instead.
Falls back to the shared heading font if unavailable. See the
@font-face declaration above and SITE_REQUIREMENTS.md §9. */
font-family: "Press Start 2P", var(--font-heading);
font-weight: 400;
font-style: normal;
font-size: 0.65rem;
letter-spacing: normal;
color: var(--color-yellow);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
}
.odometer {
display: flex;
}
.odometer__digit {
display: inline-block;
/* Widened from 1.1em: Press Start 2P's digit glyphs are noticeably
wider per em than the previous Pixelify Sans/Courier New stack. */
width: 1.35em;
text-align: center;
/* Version 2.1: switched from Pixelify Sans to the self-hosted Press
Start 2P, Regular 400 only (the prior Bold 700 is not reproduced —
no bold synthesis), falling back to the original monospace stack if
unavailable. See the @font-face declaration above and
SITE_REQUIREMENTS.md §9. Tabular figures are requested in case the
font supports them. */
font-family: "Press Start 2P", "Courier New", monospace;
font-weight: 400;
font-variant-numeric: tabular-nums;
font-size: 1.05rem;
color: #f4e97a;
background: linear-gradient(180deg, #2a2233, #14101a);
border-left: 1px solid #000;
}
.odometer__digit:first-child {
border-left: none;
}
/* Copyright + social row
flex-wrap is intentionally nowrap: measured natural single-line fit begins
at 639px (copyright + gap + social buttons within the row's own padding);
below that, uncontrolled wrapping produced a left-aligned intermediate
state instead of jumping straight to the centered column treatment below.
The breakpoint at which .footer-row switches to column mode (660px) sits
just above that measured threshold, so nowrap never has anything left to
wrap in row mode. */
.footer-row {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
width: 100%;
gap: 1rem;
background: rgba(255, 255, 255, 0.85);
border-radius: 6px;
padding: 0.75rem 1rem;
}
.footer-copyright {
margin: 0;
font-size: 0.85rem;
color: var(--color-charcoal);
}
/* Version 2: the footer's social links moved to the shared .social-bar
below the header (SITE_STRUCTURE.md), so .footer-row on the five
retained pages now holds only the copyright line. This modifier
centers that lone child instead of relying on the shared rule's
space-between (tuned for two children); the shared .footer-row rule
above is unchanged and still applies everywhere it's used. */
.footer-row--solo {
justify-content: center;
}
.footer-social {
list-style: none;
display: flex;
gap: 0.6rem;
margin: 0;
padding: 0;
}
/* Placeholder social buttons — no approved icon assets or URLs yet */
.social-placeholder {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.75rem;
height: 2.75rem;
padding: 0 0.75rem;
border: 2px dashed #888;
border-radius: 50%;
font-size: 0.65rem;
color: #666;
background: #fff;
opacity: 0.85;
text-align: center;
}
/* --------------------------------------------------------------------------
Version 2 / 2.1 — Sidebar redesign + framed-window visual refinement
Structural/visual reference: sidebar-prototype.html (read-only reference,
not itself part of the production site). Reuses this stylesheet's
existing tokens, chunky-bevel language, and the bounded 1140px
composition already established above; introduces no new fonts, colors
outside the approved palette, or third-party assets. Applies to the five
retained production pages (Home, About Us, Gallery, Credits, Contact) in
the shared order: header → social links window → sidebar + content →
footer.
Version 2.1 restores the prototype's framed "desktop window" module
(heavy border, purple title bar, three decorative title-bar dots) as a
reusable .window component, used for every logical content section
(sidebar Navigation/Film Details, Home's Logline/Film Synopsis, the
single-window About Us/Credits/Contact panels, and the social links
bar). The previous single bordered .site-sidebar/.content-panel boxes
(below) are superseded by this — left in place, unused, rather than
deleted, matching this stylesheet's existing practice for superseded
rules (e.g. .primary-nav/.nav-button, above).
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------
Shared "desktop window" module — the core chunky-frame unit reused by
the social links bar, both sidebar panels, and every main-content
section. Structure/behavior adapted verbatim from sidebar-prototype.html
(there namespaced .prototype-window*; here unprefixed since this is now
the production component).
-------------------------------------------------------------------- */
.window {
border: var(--frame-border-w) solid var(--frame-border-color);
background: var(--color-offwhite);
box-shadow: var(--frame-shadow);
}
.window__titlebar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.5rem 0.75rem;
background: linear-gradient(
180deg,
var(--color-purple) 0%,
var(--color-purple) 50%,
var(--color-purple-deep) 50%,
var(--color-purple-deep) 100%
);
border-bottom: 4px solid var(--frame-border-color);
}
.window__title {
margin: 0;
/* Version 2.1: Press Start 2P, Regular 400 only (no bold/italic
synthesis); see the @font-face declaration above. Reduced/clamped
size vs. the prototype's Pixelify-based title because Press Start
2P's glyphs are substantially wider per character — this keeps the
longest window titles ("About Us", "Film Details") from overflowing
the title bar at narrow widths. */
font-family: "Press Start 2P", var(--font-heading);
font-weight: 400;
letter-spacing: normal;
font-size: clamp(0.7rem, 2.4vw, 1rem);
color: var(--color-offwhite);
text-shadow: 2px 2px 0 var(--color-charcoal);
}
.window__controls {
display: flex;
gap: 0.35rem;
flex-shrink: 0;
}
/* Purely decorative (three small squares echoing a desktop window's
corner controls); hidden from assistive technology via aria-hidden in
the markup, not just visually — they carry no interactive function. */
.window__control {
width: 0.8rem;
height: 0.8rem;
background: var(--color-offwhite);
border: 2px solid var(--frame-border-color);
display: inline-block;
}
.window__body {
padding: 1rem 1.25rem;
}
/* Social links window — shared across all five pages, placed directly
below the header and above the sidebar/content layout. Full width,
using the same .window/.window__titlebar/.window__control treatment as
every other content window. */
.social-bar {
width: 100%;
max-width: var(--content-max-width);
margin: var(--major-section-gap) auto 0;
padding: 0 1.25rem;
}
.social-bar__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
}
.social-bar__item {
/* Three equal-width buttons at desktop/tablet widths; wraps to fewer
per row (still equal-width) rather than overflowing at narrow
widths, per the "wrap cleanly on narrow screens" requirement. */
flex: 1 1 9rem;
}
/* Text-only Social Links buttons. Their width still comes from the equal
flex columns above; height, typography, and Rose Arcade treatment now
match the sidebar navigation buttons exactly. */
.social-link {
display: block;
width: 100%;
padding: 0.9rem 0.75rem;
font-family: "Press Start 2P", var(--font-heading);
font-weight: 400;
font-size: 0.62rem;
letter-spacing: normal;
text-transform: uppercase;
text-align: center;
color: var(--rose-arcade-text);
text-shadow: 1px 1px 0 var(--rose-arcade-text-shadow);
border: 4px solid var(--rose-arcade-border);
border-radius: 0;
background: var(--rose-arcade-gradient);
box-shadow: var(--rose-arcade-bevel);
text-decoration: none;
}
.social-link:hover {
background: var(--rose-arcade-gradient-hover);
}
.social-link:active {
background: var(--rose-arcade-gradient-current);
box-shadow: var(--rose-arcade-bevel-current);
color: var(--rose-arcade-current-text);
text-shadow: 2px 2px 0 var(--rose-arcade-current-text-shadow);
text-decoration: underline;
}
/* The nested span remains for clean markup and inherits the complete text
treatment from its link, including the pressed state. */
.social-link__label {
font: inherit;
color: inherit;
text-shadow: inherit;
}
/* Sidebar + content grid, inside the existing bounded `main` (Orchid
background, 1140px max-width, centering — unchanged, above). No new
wrapper rule duplicates that bounding; `.site-layout` only arranges the
sidebar and content columns within it. */
.site-layout {
display: grid;
grid-template-columns: 240px 1fr;
gap: 1.75rem;
align-items: start;
}
/* Version 2.1: .site-sidebar and .site-content are now plain layout
wrappers (no border/background of their own) — each now holds one or
more independent .window modules, stacked with a gap, rather than
being a single bordered box itself. */
.site-sidebar,
.site-content {
min-width: 0;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.sidebar-nav-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 0.65rem;
}
/* Chunky pink/purple metallic sidebar navigation buttons — replaces the
retired chrome-silver .nav-button treatment (still defined above,
unused by any page after this redesign, but left in place rather than
deleted). The two bands directly behind the label text
(--color-pink-deep / --color-purple-deep, via --metal-gradient*) keep
at least 4.5:1 contrast against the offwhite label in every state,
exactly as verified before this pass; --metal-gradient* additionally
layers a thin bright highlight band above them (see the --metal-*
token comment, above) for a heavier metallic-chrome read. */
.sidebar-nav-button {
display: block;
text-align: center;
text-decoration: none;
/* Version 2.1: Press Start 2P, Regular 400 only (no bold/italic
synthesis); font-size reduced from the prior Arial Black treatment
because Press Start 2P's glyphs are substantially wider per
character — this keeps every nav label on one line within the
240px sidebar column at every tested width. */
font-family: "Press Start 2P", var(--font-heading);
font-weight: 400;
font-size: 0.62rem;
letter-spacing: normal;
text-transform: uppercase;
/* "Rose Arcade" treatment (approved 2026-08-20) — see the
--rose-arcade-* tokens above. Border width/padding/font are
unchanged from before this pass, so button dimensions and
responsive wrapping are preserved. */
color: var(--rose-arcade-text);
text-shadow: 1px 1px 0 var(--rose-arcade-text-shadow);
padding: 0.9rem 0.75rem;
border: 4px solid var(--rose-arcade-border);
border-radius: 0;
background: var(--rose-arcade-gradient);
box-shadow: var(--rose-arcade-bevel);
}
.sidebar-nav-button:hover {
background: var(--rose-arcade-gradient-hover);
}
/* Active/current state is distinguished by more than color alone: an
inverted (darker-on-top) band order, a flush pressed bevel, plus an
underline, so the current page is identifiable without relying solely
on the color change. */
.sidebar-nav-button:active,
.sidebar-nav-button.is-current {
background: var(--rose-arcade-gradient-current);
box-shadow: var(--rose-arcade-bevel-current);
color: var(--rose-arcade-current-text);
text-shadow: 2px 2px 0 var(--rose-arcade-current-text-shadow);
text-decoration: underline;
}
/* Superseded, retained for reference (unused as of the Version 2.1 visual
refinement): the single bordered box formerly used for About Us,
Contact, and (wrapped around .credits-page) Credits main-content. Each
of those is now its own .window instead — left in place rather than
deleted, matching this stylesheet's existing practice for superseded
rules (e.g. .primary-nav/.nav-button, .site-sidebar's former border,
above). */
.content-panel {
border: var(--frame-border-w) solid var(--frame-border-color);
background: var(--color-offwhite);
box-shadow: var(--frame-shadow);
padding: 1.5rem 1.5rem 1.75rem;
}
/* --------------------------------------------------------------------------
About Us page
Four vertically stacked framed sections: Indi biography, Indi director's
statement, Neko biography, and Neko director's statement. Portraits appear
only in the biography sections and use the same float-based "American flag"
layout as Bobbin on the Home page: copy wraps beside each portrait, then
resumes at full width below it.
-------------------------------------------------------------------------- */
.about-section__body {
line-height: 1.6;
}
.about-section__body::after {
content: "";
display: block;
clear: both;
}
.about-section__body p {
margin: 0 0 1rem;
}
.about-section__body p:last-child {
margin-bottom: 0;
}
.about-section__portrait {
float: left;
width: 35%;
max-width: 240px;
height: auto;
margin: 0 1.25rem 1rem 0;
}
/* --------------------------------------------------------------------------
Contact page
Two equal contact cards sit side by side at desktop/tablet widths and stack
at phone widths. Email addresses are intentionally rendered as plain text,
not mailto links. The Bobbin sprite is decorative and centered below both
cards without exceeding its intrinsic 490 x 640 aspect ratio.
-------------------------------------------------------------------------- */
.contact-page__body {
display: flex;
flex-direction: column;
gap: 2rem;
}
.contact-card-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25rem;
}
.contact-card {
min-width: 0;
padding: 1.25rem 1rem;
border: 4px solid var(--frame-border-color);
/* V-pet LCD treatment: deliberately hard color bands, not a smoothly
blended gradient. #d7e58d is the approved main display color; the
pale top and olive bottom bands create a chunky molded-screen bevel. */
background: linear-gradient(
180deg,
#f0f5bd 0%,
#f0f5bd 12%,
#d7e58d 12%,
#d7e58d 82%,
#aebd60 82%,
#aebd60 100%
);
box-shadow: inset 4px 4px 0 #f8fbd8, inset -4px -4px 0 #89983f,
4px 4px 0 var(--color-purple-deep);
text-align: center;
}
.contact-card__name {
margin: 0 0 1rem;
font-family: "Press Start 2P", var(--font-heading);
font-weight: 400;
font-size: clamp(0.72rem, 1.8vw, 0.95rem);
line-height: 1.6;
text-transform: none;
letter-spacing: normal;
}
.contact-card__email {
width: fit-content;
max-width: 100%;
margin: 0 auto;
padding: 0.5rem 0.75rem;
border: 3px solid var(--color-purple-deep);
background: #f0f5bd;
box-shadow: inset 2px 2px 0 #ffffff, inset -2px -2px 0 #9ead50;
overflow-wrap: anywhere;
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.5;
}
.contact-page__sprite {
width: min(100%, 245px);
height: auto;
margin-inline: auto;
}
/* Home page's Film Details window body — Format / Total Runtime /
Completion Date, moved here (out of the Logline window) per the
approved instruction not to duplicate them. */
.film-details {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.film-details__row {
display: flex;
flex-direction: column;
gap: 0.15rem;
border-bottom: 2px dashed #ccc;
padding-bottom: 0.5rem;
}
.film-details__row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.film-details__label {
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.7rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-purple-deep);
}
.film-details__value {
font-family: var(--font-body);
font-size: 0.9rem;
color: var(--color-charcoal);
}
/* Below 740px (matching sidebar-prototype.html's chosen breakpoint), the
sidebar stacks above the content column instead of squeezing it; DOM
order already places