/* =======================================================================
BEIA LUNA — shared stylesheet
Phase 1: light-mode index page
-----------------------------------------------------------------------
This one file styles every page on the site. Each HTML page links to it
with a single line, so editing a rule here updates the whole site.
======================================================================= */
/* ---- 1. GLOBAL RESET ---------------------------------------------------
"*" means "every element". box-sizing:border-box makes an element's
stated width INCLUDE its padding and border, which makes layout math
far more predictable. This is a near-universal first line. */
* { box-sizing: border-box; }
html, body {
margin: 0; /* browsers add default margins; remove them */
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif;
}
/* Default page background = the index's sky blue. Setting it on body (with
no background on html) lets the colour fill the whole viewport, and
min-height keeps it reaching the bottom even when the artwork is shorter
than the screen. */
body {
background: #58aac1; /* the index's sky-blue edge colour */
min-height: 100vh;
}
/* Under-construction pages use cream paper instead, so the space below the
16:9 artwork blends in. Activated by class="uc-page" on those tags. */
body.uc-page { background: #eee8d3; }
/* ---- 2. THE HERO (the whole collage) -----------------------------------
"Hero" is the common web word for the big banner image at the top of a
page. Here it's your entire index collage. */
.hero {
position: relative; /* KEY LINE: makes this the anchor that the
flowers and footer links are positioned
INSIDE of. Without it, "left: 30%" would be
measured from the whole window instead. */
width: 100%;
max-width: 1920px; /* never display larger than the real artwork */
margin: 0 auto; /* "auto" left+right margins = centered */
aspect-ratio: 1920 / 1280; /* lock the 3:2 shape. Because the box always
keeps this ratio, every percentage position
below lines up exactly with your mockup. */
/* The background art. NOTE: this path is relative to THIS css file,
which lives in /css/, so "../" climbs up one folder first. */
background-image: url("../images/index/light/background.png");
background-size: cover; /* fill the box. Since the box ratio equals the
image ratio, nothing gets cropped. */
background-position: center;
overflow: hidden; /* hide anything that pokes past the edges */
}
/* ---- 3. MOVABLE OVERLAY ITEMS (the flowers) ----------------------------
Two kinds share one base. Decorative flowers (.flower) just spin. Link
flowers (.flower-link) navigate to another page AND animate differently,
so a clickable image FEELS different from a purely decorative one. */
.flower, .flower-link {
position: absolute; /* placed by left/top % inside .hero */
cursor: pointer;
transform-origin: 50% 50%; /* spin / scale around its own centre */
will-change: transform;
/* NOTE: transition is set separately for each class lower down, so each
can have its own speed. Don't add a transition here or it overrides them. */
}
.flower-link { display: block; } /* the acts as a box */
.flower-link img { display: block; width: 100%; } /* image fills the */
/* TWO HOVER PERSONALITIES
Link flowers: pop up in size AND spin 1.5 full turns (540°) — faster.
Decorative flowers: just spin a quarter turn — slightly slower.
The difference in speed + degrees makes clickable ones feel distinct. */
.flower:hover { transform: rotate(90deg); }
.flower-link:hover { transform: scale(1.12) rotate(540deg); }
/* Transition speeds (how long the spin takes).
Link flowers spin 540° — a LOT — so the long 4s makes it read as a slow,
graceful turn rather than a blur. Decorative flowers rotate just 90°, so
0.6s already looks gentle. (4s is your chosen speed — keep or adjust.) */
.flower { transition: transform 0.6s ease; }
.flower-link { transition: transform 4s ease; }
/* Per-element placement — all percentages measured from mockup.
To nudge anything: change the number, save, Cmd+Shift+R. */
#f-redwhite { left: 26.3%; top: 40.8%; width: 9.1%; } /* in the swim cap */
#f-pink { left: 34.7%; top: 54.5%; width: 8.6%; } /* pink zinnia, chin area */
#f-susan1 { left: 44.7%; top: 47.4%; width: 8.5%; } /* big orange daisy (link) */
#f-purple2 { left: 53.3%; top: 61.4%; width: 5.8%; } /* purple anemone */
#f-clover { left: 55.16%; top: 47.03%; width: 5.0%; } /* clover 1 — near daisy */
#f-clover2 { left: 66.61%; top: 52.58%; width: 4.2%; } /* clover 2 — mid right */
#f-clover3 { left: 72.71%; top: 65.39%; width: 4.2%; } /* clover 3 — lower right */
#f-pink2 { left: 59.22%; top: 53.12%; width: 5.8%; } /* pink camellia */
#f-daisy { left: 65.47%; top: 61.56%; width: 4.8%; } /* white daisy */
#f-purple { left: 69.8%; top: 53.5%; width: 5.8%; } /* purple daisy — smaller, higher */
#f-susan2 { left: 76.5%; top: 57.0%; width: 4.3%; } /* small orange daisy */
/* ---- 3b. PARACHUTE SNAIL ------------------------------------------------
Like a flower but with its own gentler motion: it SWAYS from the top
(transform-origin at top-centre) the way something hanging from a
parachute would, instead of spinning around its middle. */
.parachute {
position: absolute;
left: 30%; top: 8.5%; width: 30%; /* measured from your mockup */
cursor: pointer;
transform-origin: 50% 0%; /* pivot at the top, like a pendulum */
transition: transform 0.4s ease;
will-change: transform;
display: block; /* the acts as a box */
}
.parachute img { display: block; width: 100%; } /* image fills the */
.parachute:hover { transform: rotate(-6deg); } /* negative = swings right */
/* ---- 4. FOOTER NAVIGATION (real links over the painted words) ----------
The words ABOUT / PROJECTS / TO BE DETERMINED / CONTACT are part of the
background picture. We lay invisible links exactly on top of them, so the
look comes from the art while the click + the readable text come from
real tags (good for search engines and screen readers). */
.footer-nav {
position: absolute;
inset: 0; /* "inset:0" = stretch to all four edges */
pointer-events: none; /* let hovers pass THROUGH the empty areas to the
flowers; only the links below re-enable it. */
}
.navlink {
position: absolute;
top: 92%;
height: 5.5%;
display: block;
color: transparent; /* hide OUR text so it doesn't double up with the
painted text; the word is still in the HTML. */
pointer-events: auto; /* this rectangle IS clickable */
}
.nav-about { left: 9%; width: 10%; }
.nav-projects { left: 26%; width: 16%; }
.nav-tbd { left: 47%; width: 28%; }
.nav-contact { left: 81%; width: 14%; }
/* ---- 5. KEYBOARD FOCUS OUTLINE -----------------------------------------
Shows a white ring when someone tabs to a flower or link with the
keyboard. An accessibility nicety; invisible to mouse users. */
.flower:focus-visible,
.parachute:focus-visible,
.navlink:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
/* ---- 6. VISUALLY-HIDDEN HEADING ----------------------------------------
Hides the from sight (the title lives in your artwork) while keeping
it readable by Google and screen readers. Standard, accepted technique. */
.visually-hidden {
position: absolute; width: 1px; height: 1px;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
/* ---- 7. MOBILE LANDING ---------------------------------------------------
On phones, hide the desktop collage and show the full-screen mobile
landing image instead. (A real mobile experience comes later; for now
this image just asks visitors to switch to a desktop.) */
.mobile-landing { display: none; } /* hidden on desktop */
@media (max-width: 760px) { /* phones / very narrow windows */
.hero { display: none; } /* hide the desktop collage */
.mobile-landing {
display: block;
width: 100%; /* fill the phone's width */
height: auto; /* keep the image's proportions */
}
}
/* ---- 8. UNDER-CONSTRUCTION COLLAGE PAGES --------------------------------
Shared by all four section pages (and any future "coming soon" page).
Each page supplies its OWN background image in its HTML; everything else
here — pinwheels, go-back link, layout — is identical across them all.
These pages are 16:9, unlike the index's 3:2, so the background image
itself sets the shape (we display it as a real ![]()
, not a CSS bg). */
.uc-hero {
position: relative; /* anchor for pinwheels + go-back link */
width: 100%;
max-width: 1920px;
margin: 0 auto;
overflow: hidden;
}
.uc-bg { /* the per-page background image */
display: block;
width: 100%; /* fills width; its own height sets 16:9 */
}
/* The two pinwheels — same spot on every page, spin a full turn on hover. */
.pinwheel {
position: absolute;
cursor: pointer;
transition: transform 0.3s ease;
will-change: transform;
}
#pw-rainbow { left: 35.4%; top: 9.0%; width: 14.6%; transform-origin: 49.3% 47.1%; }
#pw-red { left: 63.0%; top: 32.0%; width: 7.4%; transform-origin: 49.1% 46.6%; }
.pinwheel:hover { transform: rotate(360deg); } /* one full spin */
#pw-rainbow { left: 35.4%; top: 9.0%; width: 14.6%; } /* big rainbow one */
#pw-red { left: 63.0%; top: 32.0%; width: 7.4%; } /* small red one */
/* The sardine — wiggles on hover. Its anchor (transform-origin) is the TAIL
on the right side, so a small rotation lifts the HEAD (left) upward, the
way the snail swings from its pin. Same lazy 0.4s feel as the snail. */
.sardine {
position: absolute;
left: 29.5%; top: 54.4%; width: 19.1%;
cursor: pointer;
transform-origin: 100% 57%; /* pivot at the tail (right edge) */
transition: transform 0.4s ease;
will-change: transform;
}
.sardine:hover { transform: rotate(8deg); } /* head tilts up */
.sardine:focus-visible { outline: 3px solid #2f5d57; outline-offset: 3px; }
/* GO BACK — invisible link laid over the painted "<< GO BACK" text,
same trick as your index footer nav. */
.uc-back {
position: absolute;
left: 15%; top: 7%; width: 11%; height: 3%;
display: block;
color: transparent; /* hide our text; painted text shows */
}
.uc-back:focus-visible,
.pinwheel:focus-visible { outline: 3px solid #2f5d57; outline-offset: 3px; }