/*
FILE: csa-game.css
PURPOSE: Styles specific to the CSA Mobile project page only, not
reused by any other project (see project.css for the shared
patterns every project page uses, header/Role/full-size image/etc,
linked before this file). Covers the Final designs section's dark
full-bleed background/grid, the collage of screenshots, text
callouts and badges inside it, and a couple of one-off overrides for
images with unusual sizing needs.
*/
/* ---- Section 2, Full size image: 1080x530 mask, centred ---- */
/* .project-full-image (project.css) sizes every full-size image at
width: 100%, height: auto, edge to edge with no side padding, so its
own proportions decide how tall it renders. This section instead
uses a fixed-height mask. The gif has its own white background baked
in, which showed through whenever the old object-fit: contain
treatment left empty space above/below it. object-fit: cover crops
the gif to fill the mask completely instead (masking out its white
edges) rather than showing the whole frame with letterboxing. Mask
is w1080 x h530, 80px corner radius, per Lucrecia's exact
measurements (first pass was an eyeballed 700px/30px guess, second
pass was a mistaken 1800x546 wide enough to need breaking out of the
page's 1200px column -- 1080 fits inside that column's own 1120px
content width with room to spare, so this is back to simple
in-flow centring, no viewport-breakout trick needed; height dropped
from 546 to 530 in this latest pass). 50px margin top/bottom
restored -- this section has no section wrapper of its own to supply
that (unlike every other section on the page), .project-full-image
is deliberately edge-to-edge with no padding by default. */
.project-full-image--contain {
display: block;
width: min(1080px, calc(100vw - 80px));
height: 530px;
margin: 50px auto;
object-fit: cover;
border-radius: 80px;
}
/* ---- Role and note-on-development images: 5px corner radius, per
Lucrecia's request -- one rule covers both sections, they share the
same .project-role__image class. ---- */
.project-role__image {
border-radius: 5px;
}
/* ---- Section, Final designs: full-bleed dark background + blue grid ---- */
/* No title for this section (per the brief). Two nested pieces:
.project-final-designs is the full-bleed dark background band, its
negative margin trick breaks it out of .project-page's 1200px max-
width to fill the entire viewport width regardless of how narrow or
wide the page's own outer edges are. .project-final-designs__inner
stays inside the normal 1200px max width (like every other
section), carries the blue 1px side strokes that mark where that
boundary sits against the full-bleed background behind it, and the
blue grid pattern. .project-final-designs__content (below) is the
actual padded column of collage content sitting on top of that grid. */
.project-final-designs {
background: var(--color-csa-mobile-bg);
width: 100vw;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
}
.project-final-designs__inner {
max-width: 1200px;
margin: 0 auto;
box-sizing: border-box;
border-left: 1px solid var(--color-csa-mobile-accent);
border-right: 1px solid var(--color-csa-mobile-accent);
/* Grid pattern: 1px solid lines, vertical and horizontal, both using
the section's max width (1200px) divided into 12 even parts as
the repeat unit (100px), a reasonable default grid density, not
specified in the brief, flag if the real spacing should be
different once the subdivisions are worked out. Built with 2
stacked repeating-linear-gradient layers rather than many
individual line elements, each line is 1px solid then transparent
for the rest of that 100px unit. rgba matches --color-csa-mobile-
accent (15, 84, 248) at 20% opacity, tokens.css doesn't support an
alpha variant of a hex colour so this is spelled out directly. */
background-image:
repeating-linear-gradient(
to right,
rgba(15, 84, 248, 0.2) 0,
rgba(15, 84, 248, 0.2) 1px,
transparent 1px,
transparent 100px
),
repeating-linear-gradient(
to bottom,
rgba(15, 84, 248, 0.2) 0,
rgba(15, 84, 248, 0.2) 1px,
transparent 1px,
transparent 100px
);
}
/* ---- Section, Final designs: collage content ---- */
/* Recreates the reference layout Lucrecia supplied: a centered logo
and intro, five "feature" blocks (a bordered text callout plus one
or two app screenshots), two rows of rank badges, and a closing
image, all sitting on top of the dark grid above. 40px side padding
matches every other section's content width (1120px) so the collage
lines up with the rest of the page, EXCEPT the closing image (see
.project-final-designs__closing at the bottom of this section),
which deliberately sits outside this padded column to fill the full
1200px width edge to edge.
Top padding gives the logo breathing room from the section's top
edge, same idea as the equal left/right padding centering the
column horizontally. No bottom padding: the closing image sits
right outside this column (see .project-final-designs__closing
below) and only needs the last divider's own standard 50px
clearance before it, not this column's padding on top of that,
which was leaving an oversized gap above the closing image. The
top value itself was picked, then nudged, to land the dividers
below as close as possible to the closest horizontal line in the
background grid above (each line is 100px apart) - some land
exactly on a line, some are close but not exact, several of the
feature blocks contain text whose height depends on the copy, which
this can't predict pixel-for-pixel. */
.project-final-designs__content {
padding: 60px 40px 0;
box-sizing: border-box;
}
.project-final-designs__logo {
display: block;
width: 280px;
height: auto;
margin: 0 auto 30px;
}
.project-final-designs__intro {
max-width: 640px;
margin: 0 auto;
text-align: center;
font-family: var(--font-body);
font-size: var(--font-size-h3);
line-height: 1.6;
color: var(--color-csa-mobile-text);
}
/* Solid rule spanning the section's full 1200px width (not just this
1120px padded column), standing in for a
(an
would need
its default browser styling stripped down to nothing first anyway,
a plain div is simpler here). The negative left/right margin cancels
out .project-final-designs__content's 40px padding so the line
reaches the blue side strokes, matching how far the background
grid's own lines already stretch.
Vertical spacing rule for every divider: at least 50px of clear
space above and below it, and its line sits on the next horizontal
background grid line down (grid lines are 100px apart) from
whatever content is directly above it, skipping to the one after
that if the very next line would land less than 50px away. The
margin-bottom below (the "at least 50px after" half of that rule)
is the same fixed 50px for every divider, so it lives here; the
margin-top (the "snap to the next grid line down, keeping 50px
clear" half) is a different one-off number for each divider
depending on exactly how tall the content above it rendered, so
that's set inline on each divider in the HTML instead of guessed at
here, see the comment there for how those numbers were worked out. */
.project-final-designs__divider {
width: calc(100% + 80px);
margin-left: -40px;
margin-right: -40px;
margin-bottom: 50px;
border-top: 1px solid var(--color-csa-mobile-accent);
opacity: 1;
}
/* Text callout shared by every feature block: dashed rectangle, solid
fill (same colour as the section background, so it reads as an
opaque card sitting on top of a screenshot, not a tinted overlay),
bold title, body copy. Positioned per-feature below. */
.project-final-designs__callout {
box-sizing: border-box;
width: 320px;
padding: 20px 24px;
border: 1px dashed var(--color-csa-mobile-accent);
border-radius: 12px;
background: var(--color-csa-mobile-bg);
}
.project-final-designs__callout-title {
margin: 0 0 8px;
font-family: var(--font-heading);
font-weight: var(--weight-bold);
font-size: var(--font-size-h3);
color: var(--color-csa-mobile-text);
}
.project-final-designs__callout-body {
margin: 0;
font-family: var(--font-body);
font-size: var(--font-size-h3);
line-height: 1.5;
color: var(--color-csa-mobile-text);
}
.project-final-designs__screenshot {
display: block;
}
/* Final design images 1 (the gif, not the logo), 5, 6, 9, 10, 11 and
12: fixed 594px height. width: auto keeps each image's own aspect
ratio (no stretching), max-width: 100% is a safety net for this
1120px column: at 594px tall, most of these render close to the
column's full width anyway (screenshots 10/11 fit exactly, 1/6/12
come within 80px of it), but the two rank badge rows (5 and 9) are
much wider images (3 badges side by side), 594px tall would need
over 1780px of width for those, nearly 700px more than this column
has. The cap keeps them from overflowing the page, but means they
land around 370px tall instead of 594px, flagging that in case a
different treatment was wanted specifically for the badge rows.
Images 3 and 4 (the Games and missions block) don't use this class
for their height, see the feature 2 rule below, Figma had been
reporting those two images' height in the wrong unit. */
.project-final-designs__screenshot--tall {
height: auto;
max-height: 594px;
width: auto;
max-width: 100%;
}
/* Final design images 4 and 8: fixed 170px height. */
.project-final-designs__screenshot--small {
height: 170px;
width: auto;
}
/* Final design images 6, 7, 8, 10, 11, 12 and 13: fixed 299px height,
matching the Secure log in and Games and missions screenshots
elsewhere in this section (see .project-final-designs__screenshot
--centered and the feature 2 comment above). At this height these
are all comfortably narrower than this 1120px column, even added to
the largest offset used in any of their blocks below, so unlike
feature 2 they don't need percentage/aspect-ratio fluid sizing to
stay clear of the section's edges down to the mobile breakpoint, a
plain fixed height is enough. */
.project-final-designs__screenshot--phone {
height: 299px;
width: auto;
}
/* Feature 1, Secure log in: callout centered above a single centered
screenshot, plain flow (no overlap needed, nothing else competing
for the same space). */
.project-final-designs__feature--centered {
display: flex;
flex-direction: column;
align-items: center;
}
.project-final-designs__screenshot--centered {
margin-top: 24px;
}
/* Features 2-5 below are each a position: relative "canvas". At
594px/170px tall these screenshots are wide enough to fill this
1120px column on their own (see .project-final-designs__screenshot
--tall above), so there's no room left to place the text callout or
second screenshot beside them like earlier drafts of this section
did, they're instead layered on top as absolutely positioned
overlays near a corner, the callout's now-opaque background (see
.project-final-designs__callout above) is what makes that read as a
card sitting on the screenshot rather than a see-through label.
z-index follows the order things overlap on top of each other. */
/* Feature 2, Games and missions: text box top-left, Training Hub
screenshot to its right (top-aligned with it, 40px gap), game-grid
screenshot below it (left-aligned with it, 40px gap). Both
screenshots capped at 299px here (not the usual 594px
.project-final-designs__screenshot--tall height, see above), to
match the rendered size of the Secure log in screenshot elsewhere in
this section, which was looking sparse next to it.
Both screenshot PNGs were re-exported with the transparent padding
that used to surround the phone graphic cropped off (their alpha-
channel bounding box now matches the canvas exactly), so no padding
compensation is needed any more, left/top below line up directly
with the text box's own 30px/30px inset and its rendered 320x208
size (padding included). If the copy changes enough to reflow its
height, these will need re-measuring. The block's own height is set
explicitly (rather than left to flow) since every child here is
positioned absolute, none of them contribute to an automatic height
on their own.
The text box + both screenshots are treated as one group and
centered together in the 1118px column: their combined bounding box
(leftmost edge at the text box/game-grid screenshot's shared 30px,
rightmost edge at the Training Hub screenshot's 390+604=994px) is
964px wide, leaving 154px spare, 77px either side once centered. So
every left value below is the position it would have been (as
described above/still true relative to each other) plus that 77px,
minus the 30px inset it already had baked in: +47px.
Below 1200px wide, the text box, the 40px gaps and the 77px side
margins all stay exactly as they are (fixed px), only the two
screenshots shrink to take up whatever width is left, which is what
keeps that padding/spacing from ever getting squeezed. Both
screenshots are the same 1188x588 image (2.0204 aspect ratio) at
the same width, so width: calc(100% - 514px) (514 = the 437px left
position of Training Hub + a matching 77px margin on the right) and
aspect-ratio (instead of the max-height used everywhere else in
this section) work for both. The block's own height mirrors that
formula (min(100vw, 1200px) is this column's real width, 1200px
being where it stops growing, the -596 accounts for the same 40px
page padding, this column's own 40px content padding either side,
and the 514px margin, before dividing by the image ratio) with the
game-grid screenshot's fixed 278px top position added back on, this
can't use a simple percentage the way the images above do because
of that fixed 278px, only the pure width>height scaling can. */
.project-final-designs__feature--games {
position: relative;
height: calc(278px + (min(100vw, 1200px) - 596px) / 2.0204);
}
.project-final-designs__callout--games {
position: absolute;
left: 77px;
top: 30px;
z-index: 2;
}
.project-final-designs__screenshot--games-a,
.project-final-designs__screenshot--games-b {
position: absolute;
width: calc(100% - 514px);
height: auto;
aspect-ratio: 2.0204;
z-index: 1;
}
.project-final-designs__screenshot--games-a {
left: 437px;
top: 30px;
}
.project-final-designs__screenshot--games-b {
left: 77px;
top: 278px;
}
/* Feature 3, Secret codes: Thunder Code (6) top-left, text top-right,
Thank you (8) bottom-left, 40px below Thunder Code, aligned with it.
Thunder Code's rendered width at 299px tall (1185x586 native, 2.0222
ratio) is 605px, which is what the 645px (605 + 40px gap) callout
position is based on. The text box is 400px wide (was 320px, the
width shared with every other callout in this section) so its copy
fits on 3 lines instead of 4.
Image 7 (the Thunder programme terminal log gif, also 299px tall,
600px native width) sits behind both Thunder Code and Thank you (see
the z-index order below), its right edge flush with this column's
own right edge (the same 40px side padding everything else in this
section respects), its top edge 100px below the text box's own
bottom. At that position it sits mostly behind Thunder Code and
Thank you (they cover its left portion and its top/bottom edges),
only its right portion, past their shared 605px right edge, shows
in full. A separate side-by-side column for it (like Thank you's)
doesn't fit anyway: two 605px-wide images plus a 40px gap between
them (1250px) is wider than this 1120px column.
Thunder Code, image 7 and Thank you's top positions are each 31px
lower than their "natural" position (0 for the top row, 339px for
Thank you), splitting this block's empty space evenly between the
divider above and the divider below instead of leaving it all
beneath. This 31px offset is smaller than the gap above the divider
itself, because the divider's own fixed 50px margin-bottom (see
.project-final-designs__divider) already opens up space on the top
side only, there's no matching fixed amount on the bottom side
before the next divider, so this offset has to be smaller than half
the total space to come out visually even (31px offset here plus
the divider's 50px margin-bottom equals the gap below, which is
entirely the next divider's own margin-top, worked out the usual
way). 31px is a one-off number worked out by measuring the rendered
page, like the dividers' own margin-top, see that comment. Image 7's
own top position is worked out separately: the text box's rendered
height (152px at its current 400px width) plus a 100px gap plus that
same 31px offset. Block height is explicit since every child is
absolutely positioned: Thank you's row starts 40px below Thunder
Code's row (299px + 40px), plus its own 299px height, taller than
image 7 reaches, plus that same 31px top offset.
The text box's own top position is separate again: it's centred on
Thunder Code's vertical midpoint (299px tall image, 152px tall text
box at its current 400px width, so its top sits (299-152)/2 lower
than Thunder Code's own 31px top, landing at 105px). */
.project-final-designs__feature--codes {
position: relative;
height: 669px;
}
.project-final-designs__screenshot--codes-a {
position: absolute;
left: 0;
top: 31px;
z-index: 2;
}
.project-final-designs__screenshot--codes-c {
position: absolute;
right: 0;
top: 283px;
z-index: 1;
}
.project-final-designs__callout--codes {
position: absolute;
left: 645px;
top: 105px;
width: 400px;
z-index: 3;
}
.project-final-designs__screenshot--codes-b {
position: absolute;
left: 0;
top: 370px;
z-index: 2;
}
/* Feature 4, Hackmode: Background tab (10) left-aligned with the
section's left padding, Big Button tab (11) right-aligned with the
section's right padding, the two overlapping vertically by 5% of
their shared 299px height (about 15px): image 11's top is 299px
minus that 15px lower than image 10's. Text callout sits directly
below image 10 (50px gap), 400px wide, its right edge 50px clear of
image 11's left edge (image 11 renders 605px wide at this 299px
height, its left edge sits 513px in from this block's own left
edge, so the callout's own left is 513 - 50 - 400 = 63px). Block
height is explicit (every child is absolutely positioned): image 11
ends lowest, 284px down plus its own 299px height. */
.project-final-designs__feature--hackmode {
position: relative;
height: 583px;
}
.project-final-designs__screenshot--hackmode-a {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.project-final-designs__screenshot--hackmode-b {
position: absolute;
right: 0;
top: 284px;
z-index: 2;
}
.project-final-designs__callout--hackmode {
position: absolute;
left: 63px;
top: 349px;
width: 400px;
z-index: 3;
}
/* Feature 5, Spy tools: same distribution as Feature 4, Hackmode,
just mirrored so the text callout ends up top-right instead of
below the top-left image. Spy Tools screenshot (12) left-aligned
with the section's left padding, Code Breaker (13) right-aligned
with the section's right padding, the two overlapping vertically by
5% of their shared 299px height (about 15px), same as Feature 4.
Text callout sits beside image 12 instead of below it, 50px gap,
400px wide, same numbers as Feature 4 just applied to the
horizontal gap instead of the vertical one. Its top position is
centred on image 12's vertical midpoint, same idea as Feature 3's
text box and image 6: 299px tall image, 179px tall text box at its
current 400px width, so its top sits (299-179)/2 lower than image
12's own top, landing at 60px. Block height is explicit (every
child is absolutely positioned): image 13 ends lowest, 284px down
plus its own 299px height. */
.project-final-designs__feature--tools {
position: relative;
height: 583px;
}
.project-final-designs__screenshot--tools-a {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.project-final-designs__callout--tools {
position: absolute;
left: 655px;
top: 60px;
width: 400px;
z-index: 3;
}
.project-final-designs__screenshot--tools-b {
position: absolute;
right: 0;
top: 284px;
z-index: 2;
}
/* Each rank badges row is a single supplied image (3 badges already
laid out side by side), not 3 separate files. Fixed 200px height,
own rule rather than .project-final-designs__screenshot--tall above
(that class's 594px doesn't apply to these two).
Centered vertically within the gap between the divider above and
the divider below: padding-top/padding-bottom are set inline on
each image in the HTML (same reasoning as the dividers' own
margin-top, see the comment on .project-final-designs__divider),
splitting whatever space that gap ends up needing evenly above and
below the image instead of leaving it all beneath (which is what
would happen with nothing set here, the divider below would just
push down further, this way is centred). Padding rather than
margin, so it doesn't collapse with the divider's own margin-bottom
directly above it. */
.project-final-designs__badges {
display: block;
height: 200px;
width: auto;
margin-left: auto;
margin-right: auto;
}
/* Deliberately outside .project-final-designs__content (see that
rule's comment above): fills the section's full 1200px width with
no side padding, unlike every other element in this section.
margin-top cancels out the last divider's own fixed 50px
margin-bottom (same rule every divider on this page uses, see
.project-final-designs__divider), so this image sits flush against
that line with no gap at all, instead of the standard 50px
clearance every other divider leaves before what follows it. */
.project-final-designs__closing {
display: block;
width: 100%;
height: auto;
margin-top: -50px;
}
/* Final designs collage, mobile: a simple stack for every feature
block, text box first, then the first screenshot, then the second
(each block's own DOM order already puts its screenshots in that
1st/2nd order, only the text box needs moving, see order below), no
overlap, 30px between each one.
The text box isn't always first in the HTML itself (e.g. Secret
codes has a screenshot before it, so the desktop version can lay
the screenshot's top-left corner under it), order: -1 moves it to
the front visually without changing that source order, which is a
deliberate trade-off, a screen reader in this media query would
still meet the screenshot before the text box that describes it. */
@media (max-width: 768px) {
/* Section 2, Full size image (the gif): the desktop fixed mask (see
.project-full-image--contain above) makes this section look
oversized/badly cropped on a narrow screen, since it's sized for a
much wider viewport. height: auto here lets the box match the
gif's own proportions exactly instead, no cropping, and 30px side
padding (was 40px) plus 50px of space above and below replace the
desktop spacing. */
.project-full-image--contain {
/* 10px narrower per Lucrecia's request (was 60px total inset).
height stays auto (no fixed number to shrink independently, see
the file header comment above), so it follows the image's own
aspect ratio and shrinks along with the reduced width. */
width: calc(100% - 70px);
height: auto;
margin: 50px auto;
/* Desktop's 80px radius (see the base rule above) reads oversized
on this much narrower box, was bleeding through unchanged since
this mobile override never reset it. */
border-radius: 24px;
}
/* Section 5, Full size image 2 (the CSA Spy Hub diagram): resets the
shared .project-full-image mobile mask (project.css), a fixed
296px height + object-fit: cover, which was cropping most of the
dedicated portrait mobile image (see the in index.html)
out of view. height: auto shows it in full, top/bottom padding
matches the site's standard mobile section spacing since, unlike
every other full-size image, this one no longer bleeds edge to
edge on mobile. Sides stay full width on purpose, only this
section's masking was the problem, not its width. */
.project-full-image--diagram {
height: auto;
padding: 50px 0;
}
.project-final-designs__logo {
width: 120px;
}
.project-final-designs__feature--games,
.project-final-designs__feature--codes,
.project-final-designs__feature--hackmode,
.project-final-designs__feature--tools {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
height: auto;
}
.project-final-designs__callout--games,
.project-final-designs__callout--codes,
.project-final-designs__callout--hackmode,
.project-final-designs__callout--tools {
order: -1;
}
.project-final-designs__callout--games,
.project-final-designs__callout--codes,
.project-final-designs__callout--hackmode,
.project-final-designs__callout--tools,
.project-final-designs__screenshot--games-a,
.project-final-designs__screenshot--games-b,
.project-final-designs__screenshot--codes-a,
.project-final-designs__screenshot--codes-b,
.project-final-designs__screenshot--codes-c,
.project-final-designs__screenshot--hackmode-a,
.project-final-designs__screenshot--hackmode-b,
.project-final-designs__screenshot--tools-a,
.project-final-designs__screenshot--tools-b {
position: static;
}
.project-final-designs__screenshot--tall,
.project-final-designs__screenshot--small,
.project-final-designs__screenshot--phone,
.project-final-designs__screenshot--games-a,
.project-final-designs__screenshot--games-b {
height: auto;
width: 100%;
max-width: 340px;
aspect-ratio: auto;
}
.project-final-designs__callout,
.project-final-designs__screenshot--centered {
width: 100%;
max-width: 340px;
height: auto;
}
/* Fills the full width up to .project-final-designs__content's own
40px side padding (was a fixed 220px, well short of that edge). */
.project-final-designs__badges {
width: 100%;
height: auto;
padding-top: 0;
padding-bottom: 0;
}
}