/* ========================================================= */ /* PRODITAE v1.0 */ /* ========================================================= */ /* ------------------------------------------------------------- RENAMED / RELOCATED — read this first if you're confused about which CSS file is "the real one": This file used to live at assets/bootstrap/css/bootstrap.min.css and was named as if it were the Bootstrap framework's own stylesheet. It never was — it has always been 100% this site's own custom CSS (zero real Bootstrap framework rules in here; no .container, .row, .btn, --bs- variables, etc.). The old name and location were just leftover from how Bootstrap Studio's project export originally labeled it, and it caused confusion when trying to re-import the project elsewhere. It's been moved here, to assets/css/styles.css, and renamed to make that distinction obvious. The ACTUAL Bootstrap framework files (the real v5.3.8 library) are separate, at assets/vendor/bootstrap/ — those ARE genuine, untouched Bootstrap files, safe to treat as a normal third-party library you never need to hand-edit. Nothing in the CSS below changed — only the file's name and folder. ------------------------------------------------------------- */ /* ------------------------------------------------------------- HOW THIS FILE IS ORGANIZED — read this first This stylesheet was built inside Bootstrap Studio's visual editor, then hand-edited a lot on top of that. The single biggest thing to understand about it: MANY SELECTORS APPEAR MORE THAN ONCE IN THIS FILE. You'll find several separate ".photo{ ... }" blocks, several ".logo img{ ... }" blocks, two ".gradient{ ... }" blocks, and so on, scattered at different points in the file rather than grouped together. This isn't a mistake — it's just how Bootstrap Studio's visual style panels work: every time a property was changed through the app's UI, it tended to add a NEW rule block instead of editing the existing one for that selector. This matters because of how CSS actually resolves this: when the same selector (with the same specificity) appears more than once, the browser doesn't pick one block and ignore the rest — it merges them, property by property. For any single property, whichever block sets it LAST (furthest down the file) is the one that actually applies. Blocks earlier in the file still matter for any property they set that ISN'T overridden later. Practical takeaways: - If you're hunting for why an element looks a certain way, search (Ctrl+F) for its selector — you'll likely find it in more than one place, and the true final look is a mix of all of them. - If you change a property and nothing seems to happen, there's a good chance a LATER block in the file is setting that same property and winning. Search for more copies of the selector further down. - The most reliable way to see the real, final result for any element is your browser's DevTools: right-click the element → Inspect → the Styles panel lists every rule touching it, with anything being overridden shown with a strikethrough. That beats guessing from the file alone. - We hit two real bugs from this exact pattern while building this site: an earlier ".logo img" block's width getting silently overridden by a later one, and a brand new animation accidentally being given the same name as an existing one further down the file (search this file for "gatePowerOnFlicker" to read the full story where it happened). Worth keeping in mind before adding anything new — a quick search for a name before reusing it saves a lot of confusion later. This file is organized into clearly-labeled sections below (RESET, VARIABLES, BACKGROUND, DOORS, and so on). Within a section you'll mostly find rules for that area, but thanks to the above, don't be surprised to find another small addition to e.g. ".photo" showing up much later in the file too, sometimes with no section header nearby at all — those later, "orphan" blocks are usually small tweaks that were added on top of an already-working section. ------------------------------------------------------------- */ /* --------------------------------------------------------- */ /* FONTS */ /* --------------------------------------------------------- */ /* Caveat (the handwritten accent font used on the blinkies and the "now playing" line) is self-hosted — the actual font files live in assets/fonts/, so this works completely offline, no internet connection or Google Fonts CDN needed. This is a VARIABLE font: one file (Caveat-Variable) that can render any weight from 400 to 700, rather than needing a separate file per weight. font-weight:400 700 below is what tells the browser this file covers that whole range — CSS elsewhere in this file asking for weight 500 or 700 (see ".blinkie" and ".nowPlaying") will get exactly that weight rendered from this one file. .woff2 is listed first (smaller, and every modern browser supports it) with the .ttf as a fallback for anything that somehow doesn't. Both files, plus the required OFL.txt license (Caveat is free/open-source under the SIL Open Font License — see that file for the full terms), live right next to each other in assets/fonts/. SAFE TO TWEAK: if you ever want a different accent font instead, download its files, drop them in assets/fonts/, and update the src: paths below plus the font-family name — then update the two "font-family:'Caveat'" references further down this file to match. --------------------------------------------------------- */ @font-face{ font-family:'Caveat'; src: url("assets/fonts/Caveat-Variable.woff2") format("woff2-variations"), url("assets/fonts/Caveat-Variable.ttf") format("truetype-variations"); font-weight:400 700; font-style:normal; font-display:swap; } /* --------------------------------------------------------- */ /* RESET */ /* --------------------------------------------------------- */ /* Every browser ships its own default spacing/sizing for elements (headings, lists, buttons, etc.), and they don't all agree with each other. This block wipes that slate clean — zero margin, zero padding, and box-sizing:border-box (which makes any border/padding you add count INSIDE an element's declared width/height, instead of adding to it — much more predictable to work with). Nearly every modern site starts with something like this. Safe to leave alone; if things look "too cramped" somewhere, it's almost always easier to add margin/padding back on that specific element than to change this global reset. */ *, *::before, *::after{ margin:0; padding:0; box-sizing:border-box; } /* --------------------------------------------------------- */ /* VARIABLES */ /* --------------------------------------------------------- */ /* These are CSS custom properties (a.k.a. CSS variables) — reusable values you can reference anywhere else in this file with var(--name), instead of retyping the same color/shadow over and over. Not every color in this file actually uses these (a lot of colors below are just written directly as rgba(...) instead), but where you DO see var(--pink) etc., changing the value here updates every place that uses it at once. SAFE TO TWEAK: any of the hex/rgba values below — this is genuinely one of the lowest-risk places in the whole file to experiment with the color palette. */ :root{ --black:#050505; --black2:#101010; --gray:#444; --white:#ECECEC; --pink:#ff87c9; --pink2:#ff5fa8; --pink3:#a62c67; --glass:rgba(255,255,255,.05); --border:rgba(255,255,255,.15); --shadow: 0 0 25px rgba(255,110,190,.12); } /* --------------------------------------------------------- */ /* HTML */ /* --------------------------------------------------------- */ /* scroll-behavior:smooth just means any programmatic or anchor-link scrolling on the page eases in/out smoothly instead of jumping instantly. Doesn't affect normal mouse- wheel scrolling. */ html{ scroll-behavior:smooth; } /* --------------------------------------------------------- */ /* BODY */ /* --------------------------------------------------------- */ /* overflow-x:hidden / overflow-y:auto: this pair had a real bug history — see the long note at the top of this file about duplicate selectors. In short: body used to be overflow:hidden entirely (no scrolling at all, by design — this page was meant to be a single, fixed "screen"), but that meant that on short windows, content that didn't fit got permanently cut off with no way to reach it. This version keeps horizontal scrolling blocked (you never want a sideways scrollbar here) but allows vertical scrolling as a safety net — invisible on any normal-height screen, but there if content ever needs it. Don't change overflow-y back to hidden unless you're confident everything always fits every screen size, or that clipping risk comes right back. */ body{ background:var(--black); color:var(--white); font-family:Tahoma,Verdana,sans-serif; overflow-x:hidden; overflow-y:auto; min-height:100vh; } /* ========================================================= */ /* BACKGROUND */ /* ========================================================= */ /* Everything in this section stacks on top of itself, in the order these divs appear in the HTML, to build up the whole moody backdrop. All of it is position:fixed/absolute and pointer-events isn't blocked, so none of this ever gets in the way of clicking things, and none of it moves when the page scrolls — it's glued to the screen, not the page. .background — the outer fixed, full-screen container for every layer below. z-index:-100 keeps the whole stack permanently behind every real piece of content on the page. overflow:hidden here is what keeps oversized layers (like .noise below) from spilling out and being visible/scrollable — DON'T remove or override this overflow:hidden lightly; we ran into a real bug earlier where an accidental inline override of exactly this property caused a second, broken scrollbar to appear. .backgroundImage — your uploaded photo, stretched to always fully cover the screen (background-size:cover) and centered. SAFE TO TWEAK: swap the url() to point at a different image any time; background-position can be changed to e.g. "top center" or "bottom center" if cover-cropping is cutting off a part of the image you want visible. .gradient — the dark, moody tint sitting over your photo. It's built from three layers combined into one background: a soft pink glow at the top, a dimmer purple-pink glow at the bottom, and a dark semi-transparent base underneath both (this base used to be fully OPAQUE, which completely hid the background photo — it was made semi-transparent specifically so the photo shows through). SAFE TO TWEAK: raise/lower the alpha (the last number in each rgba(...)) to make the whole scene lighter or darker/moodier. .vignette — darkens the very edges of the screen using inset box-shadows (a shadow that projects INWARD instead of outward), which is what gives the "looking through a lens/ old screen" framing effect. SAFE TO TWEAK: the two blur radii (250px/150px) control how far the darkening reaches in from the edge. .scanlines — a very faint repeating horizontal stripe pattern, like an old CRT's visible scan lines. Barely visible on purpose (opacity:.08). .noise — a faint animated static/grain texture. Notice inset:-100% instead of inset:0 like everything else here: that deliberately makes this layer 3× the width and 3× the height of the screen (each edge pushed out by 100% of the container's own size), centered on screen. That's on purpose — it gives the pan animation (noiseMove, a few lines below) room to shift the texture around without ever revealing a hard edge. Because .background above has overflow:hidden, none of that extra size is ever actually visible or scrollable — it's just working space for the animation. .particles — an empty container. It stays empty in the HTML; script.js's createParticles() function fills it with the small floating pink dots at runtime, in JavaScript, not here. ------------------------------------------------------------- */ .background{ position:fixed; inset:0; overflow:hidden; z-index:-100; } .backgroundImage{ position:absolute; inset:0; background-image:url("assets/img/Background_Web_Proditae.png"); background-size:cover; background-position:center; } /* --------------------------------------------------------- BACKGROUND VIDEO (optional — off by default) A video version of .backgroundImage above. The