/* ===================================================================== ~yourname's NEIGHBOURHOOD -- stylesheet Windows 7 aero-flavoured theme: cards become aero-glass windows with glossy title bars, light-gray surface panels, and the classic blue/gray aero palette. The animated cloud + sun-ray sky stays as a dreamy "desktop wallpaper" behind the windows. fonts: Segoe UI (Win7 system font) with Quicksand fallback ===================================================================== */ /* ---------- fonts ---------- Win7 used Segoe UI 9pt as its system font. We pull in Quicksand as a Google-Fonts fallback for systems that don't have Segoe UI installed (Linux, older macOS) -- it has a similar humanist sans-serif feel. */ @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap'); /* ---------- Bulbasaur SP custom font ---------- */ @font-face { font-family: 'Bulbasaur SP'; src: url('../assets/fonts/BulbasaurSP.otf') format('opentype'); font-weight: normal; font-style: normal; font-display: swap; } /* ---------- WEOLLEX logo animations ---------- */ @keyframes weollex-color-cycle { 0% { color: #ff7d7d; } 16.67% { color: #d959fe; } 33.33% { color: #7da8ff; } 50% { color: #59fe9f; } 66.67% { color: #d0ff7d; } 83.33% { color: #feaa59; } 100% { color: #ff7d7d; } } @keyframes weollex-wobble { 0% { transform: perspective(500px) rotateY(5deg); } 50% { transform: perspective(500px) rotateY(-5deg); } 100% { transform: perspective(500px) rotateY(5deg); } } @keyframes weollex-swing { 0% { rotate: 5deg; } 50% { rotate: -5deg; } 100% { rotate: 5deg; } } /* ---------- palette tokens ---------- All the dreamy-palette variable names are kept (so existing var() references in HTML and inline styles still resolve), but their values are remapped to the Windows 7 aero palette: cool blues, light grays, and black text on light surfaces. */ :root { /* windows 7 aero surface + accent colours */ --cream: #f0f0f0; /* page bg base -- Win7 "Window" surface */ --cloud: #ffffff; /* card bg / pure white */ --sky: #d6ebff; /* sky tint (kept for the cloud animation) */ --sky-deep: #0066cc; /* Win7 link blue */ --sky-deeper: #003399; /* Win7 link hover / title text */ --lavender: #a3c7e3; /* aero light blue (window frame highlight) */ --lavender-deep:#4580c4; /* aero glass blue (title bar bg) */ --peach: #c9e0f5; /* pale aero blue (hover gradients) */ --peach-deep: #1e6db8; /* darker aero blue (emphasis) */ --mint: #e6f2fb; /* very pale aero blue */ --mint-deep: #3c7fb1; /* aero button hover border */ --slate: #000000; /* body text -- Win7 uses black on light gray */ --slate-soft: #444444; /* secondary text */ --slate-deep: #000000; /* darker accents */ --sun-core: #FFF5C2; /* sun center (kept for the sky animation) */ --sun-warm: #FFE08A; /* sun mid */ --sun-edge: #FFC961; /* sun outer */ /* backwards-compat aliases -- old var(--xxx) references in HTML still resolve, now mapped to Win7 aero equivalents */ --teal: var(--mint); --teal-dark: var(--mint-deep); --teal-darker: var(--slate); --purple: var(--lavender); --purple-dark: var(--lavender-deep); --pink: var(--peach); --pink-dark: var(--peach-deep); --light: var(--slate); --yellow: var(--sky-deep); --yellow-dark: var(--lavender-deep); --black: var(--slate-deep); /* shared radii -- Win7 uses smaller radii than the dreamy theme */ --r-card: 6px; /* Win7 window corner radius */ --r-pill: 3px; /* Win7 button radius */ --r-button: 3px; --r-tag: 3px; /* Win7-specific design tokens (mirrors the 7.css _variables.scss) */ --w7-font: 9pt "Segoe UI", "SegoeUI", "Noto Sans", "DejaVu Sans", "Quicksand", sans-serif; /* ---- AERO GLASS SURFACE TOKENS ---- The body content of every .box window is now a translucent glass panel instead of an opaque light-gray. The cloud/sky wallpaper behind shows through, giving the real Win7 Aero "frosted glass" effect. --w7-surface : the base glass tint (very light blue, ~78% opacity) used by .box window bodies, .stamp tiles, .gallery-item, .statusbar etc. --w7-surface-deep : a slightly darker glass tint for "selected" or "active" blocks (e.g. .navlist a.current). --w7-glass-blur : how aggressively the glass blurs whatever is behind it. 6px is close to the real Win7 Aero blur strength. ------------------------------------------------------------------ */ --w7-surface: rgba(235, 244, 252, 0.78); --w7-surface-2: rgba(220, 235, 248, 0.70); --w7-surface-deep: rgba(150, 200, 235, 0.65); --w7-glass-blur: 6px; --w7-glass-blur-strong: 10px; /* button / element tints -- kept opaque enough to remain readable on top of the glass body, but with a touch of translucency so they too feel like glass. */ --w7-el-bg: rgba(245, 248, 252, 0.85); --w7-el-bg-s-1: rgba(235, 240, 246, 0.85); --w7-el-bg-s-2: rgba(210, 220, 230, 0.85); --w7-el-bd: #8e8f8f; --w7-el-bd-h: #3c7fb1; --w7-el-grad: linear-gradient(var(--w7-el-bg) 45%, var(--w7-el-bg-s-1) 45%, var(--w7-el-bg-s-2)); --w7-el-grad-h: linear-gradient(rgba(234, 246, 253, 0.85) 45%, rgba(190, 230, 253, 0.85) 45%, rgba(167, 217, 245, 0.85)); --w7-w-bd: #000000b3; --w7-w-bg: rgba(69, 128, 196, 0.65); /* title bar glass -- translucent blue */ --w7-w-grad: linear-gradient(to right, #ffffff66, #0000001a, #ffffff33), var(--w7-w-bg); --w7-link-c: #0066cc; --w7-link-c-h: #3399ff; --w7-title-c: #003399; } /* ---------- reset ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--w7-font); font-size: 9pt; font-weight: 400; line-height: 1.4; color: #000; /* Win7 desktop wallpaper: keep the dreamy sky gradient + cloud glare (the cloud PNGs + sun rays live on .sky-fx below). the windows (cards) float on top of this like aero-glass panels. */ background-color: #FFF8F0; background-image: /* warm glare top-left (sits near the sun) */ radial-gradient(ellipse 60% 45% at 12% 18%, rgba(255, 240, 200, 0.45) 0%, transparent 55%), /* peach glare top-right */ radial-gradient(ellipse 50% 40% at 88% 22%, rgba(255, 215, 185, 0.35) 0%, transparent 60%), /* mint glare bottom-center */ radial-gradient(ellipse 70% 45% at 50% 92%, rgba(190, 235, 220, 0.30) 0%, transparent 60%), /* lavender glare mid-left */ radial-gradient(ellipse 40% 35% at 8% 65%, rgba(220, 205, 245, 0.25) 0%, transparent 55%), /* main sky gradient -- 7 stops for richer color travel */ linear-gradient(180deg, #C8E0FF 0%, #D6EBFF 15%, #E0D8F0 30%, #F0DAE8 45%, #FFE8DC 62%, #FFEEDD 80%, #FFF8F0 100%); background-repeat: no-repeat; background-attachment: fixed; min-height: 100vh; position: relative; cursor: auto; } a { color: var(--w7-link-c); text-decoration: none; border-bottom: 0; transition: color 0.15s ease; cursor: pointer; } a:hover { color: var(--w7-link-c-h); text-decoration: underline; } a:visited { color: #6c0097; } input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="password"], input[type="number"], input[type="range"], textarea, select { cursor: text; } a[title]:hover { cursor: help; } /* ===================================================================== SKY FX -- animated sun + drifting cloud layers (4 layers, dense) rendered as fixed-position divs at z-index 0..6 content lives at z-index 10+ (see .shell below) LAYER STACKING (back to front): z=1 sun disc (behind ALL clouds) z=2 cloud layer 1 (far back, large soft clouds, 720x480 tile) z=3 sun rays (LONG rays, between cloud layers 1 and 2) z=4 cloud layer 2 (mid back, medium clouds, 720x480 tile) z=5 cloud layer 3 (mid front, smaller clouds, 720x480 tile) z=6 cloud layer 4 (nearest, smallest densest clouds, 720x480 tile) ===================================================================== */ .sky-fx { position: fixed; inset: 0; pointer-events: none; /* never block clicks */ z-index: 0; overflow: hidden; } /* ---- sun rays only (no sun disc) ---- The sun disc has been REMOVED. Only the rays remain. The sun's anchor point is moved OFF-SCREEN to (-80, -80) -- top-left, just past the corner -- so the rays appear to come from a sun that's "behind" the screen edge, fanning into the viewport from the upper-left corner. z-index 3 puts rays BEHIND cloud layers 2-4 (z=4,5,6) and IN FRONT of cloud layer 1 (z=2) -- giving the illusion of rays piercing through gaps in the clouds. CONE SHAPE -- rays WIDEN toward the tip: Each ray is an 80px-wide rectangle with a clip-path polygon that narrows the top edge to a 6px point (47%-53% of width) and leaves the bottom edge full-width (0%-100%). The narrow top sits at the off-screen anchor; the wide bottom is 1400px away. So the visible portion of each ray (where it enters the viewport) is the wider, brighter middle section -- which is why the rays read as clear sunbeams rather than faint flickers. ANGLE FORMULA: With 12 rays at 8.18deg each (0..90deg), the rays sweep across the visible quadrant from straight-down (0deg) to straight-right (90deg). Rays at 0deg and 90deg graze the edges off-screen; rays 1-10 fan into the viewport, entering from the top and left edges. DYNAMIC TWINKLE: Each ray gets its own opacity pulse with a delay based on --i, so the rays twinkle out of phase -- the beam field shimmers rather than blinking in unison. the whole container also sways gently over 16s for a more dynamic feel. */ .sun-rays { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 3; pointer-events: none; animation: sun-sway 16s ease-in-out infinite; /* the invisible pivot -- exactly at the top-right corner of the viewport. no sun disc is drawn here, but the rays rotate around this point. */ transform-origin: 100% 0; } .sun-rays .ray { position: absolute; top: 0; /* ray top at the very top edge */ right: 0; /* ray right edge at the very right edge */ width: 80px; /* wide base for the cone */ height: 1500px; /* VERY LONG -- crosses entire diagonal */ margin-right: -40px; /* center the 80px element on x=100% (the corner) */ /* anchor at the TOP-CENTER of the ray -- this sits exactly at the top-right corner of the viewport, so all rays pivot from that single invisible point. */ transform-origin: top center; /* 8 rays * 12deg = 0..84deg -- fan sparsely across the visible quadrant. (was 24 rays at 4deg; made 3x sparser at the user's request -- rays stay clearly visible but no longer form a dense beam field.) ray 0 points DOWN along the right edge; ray 7 sweeps across to the upper-left. */ transform: rotate(calc(var(--i) * 12deg)); /* CONE: narrow 6px slit at top, full 80px width at bottom. 47%-53% of 80px = ~3.8px to ~4.2px on each side of center -> ~6px slit. */ clip-path: polygon(47% 0%, 53% 0%, 100% 100%, 0% 100%); /* boosted opacity so the rays stay clearly visible through 4 cloud layers. peak at 15% down (just inside the viewport), long bright midsection. */ background: linear-gradient( to bottom, rgba(255, 224, 138, 0.10) 0%, rgba(255, 224, 138, 0.78) 15%, rgba(255, 220, 150, 0.68) 50%, rgba(255, 210, 130, 0.48) 85%, rgba(255, 200, 120, 0) 100%); filter: blur(3px); /* per-ray twinkle: each ray pulses opacity with a delay based on --i. opacity-only animation does NOT override the static rotate transform. min opacity raised to 0.55 so rays never fade out completely. */ animation: ray-twinkle 5s ease-in-out infinite; animation-delay: calc(var(--i) * -0.625s); } /* ---- animated glare layer (блики) ---- Sits ON TOP of all cloud layers (z-index 7) but below content (which is at z-index 10+). Two large soft radial highlights drift slowly across the sky with screen blend mode, giving the impression of light breaking through the cloud field. */ .sky-fx::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 7; background: radial-gradient(circle 320px at 22% 28%, rgba(255, 250, 220, 0.38), transparent 70%), radial-gradient(circle 420px at 76% 62%, rgba(255, 230, 200, 0.28), transparent 70%), radial-gradient(circle 260px at 48% 88%, rgba(220, 240, 255, 0.22), transparent 70%); mix-blend-mode: screen; animation: glare-drift 28s ease-in-out infinite alternate; } @keyframes ray-twinkle { /* Each ray pulses opacity independently (delayed by --i). min kept at 0.55 so rays never disappear entirely. */ 0%, 100% { opacity: 0.55; } 50% { opacity: 1.00; } } @keyframes glare-drift { /* Two glare spots drift slowly across the sky, alternate direction so the motion never visibly jumps when the loop restarts. */ 0% { transform: translate(0, 0); opacity: 0.55; } 50% { transform: translate(50px, -30px); opacity: 0.90; } 100% { transform: translate(-40px, 35px); opacity: 0.65; } } @keyframes sun-sway { /* Gentle ±6deg sway -- rays fan from the corner and sway softly. */ 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } } /* ---- cloud layers (4 of them, each drifting independently) ---- SEAMLESS DRIFT via background-position animation: Each layer is a single fixed-position div covering the viewport, with `background-repeat: repeat` (default). The PNG tiles are seamless (generated with 3x-canvas + central-crop strategy), so animating `background-position` from 0 to one tile-width makes the pattern repeat perfectly -- no visible jump when the loop restarts. All four layers share the same 720x480 native PNG resolution, but each layer was generated with a different cloud count, radius range, alpha and blur -- so they look visually distinct and create depth when stacked. Each layer drifts at its OWN speed (parallax: nearer layers drift faster) and in an alternating direction, producing a varied multi-scale cloud field with no obvious moire and minimum empty patches. VERTICAL STAGGER (4 horizontal "lines" instead of 2): Each layer's keyframes use a DIFFERENT fixed Y offset so the four cloud patterns are vertically interleaved. The tile height is 480px; we divide it into 4 bands of 120px each, and each layer's Y offset is one of those bands: layer 1 -> Y = 0px layer 2 -> Y = 120px (midpoint between layers 1 and 3) layer 3 -> Y = 240px (midpoint between layers 2 and 4) layer 4 -> Y = 360px So the visual "centerline" of each successive layer sits exactly halfway between the centerlines of its neighbours -- producing 4 evenly-spaced horizontal cloud bands instead of 2 stacked rows. Because the PNG tiles vertically too (background-repeat: repeat), a fixed Y offset does NOT break the seamless horizontal drift -- it just shifts which row of the periodic pattern is visible. */ .cloud-layer { position: fixed; inset: 0; background-repeat: repeat; will-change: background-position; pointer-events: none; } .cloud-layer-1 { background-image: url('../assets/bg/clouds-1.png'); background-size: 720px 480px; opacity: 0.75; z-index: 2; animation: drift-left-1 90s linear infinite; } .cloud-layer-2 { background-image: url('../assets/bg/clouds-2.png'); background-size: 720px 480px; opacity: 0.80; z-index: 4; animation: drift-right-2 65s linear infinite; } .cloud-layer-3 { background-image: url('../assets/bg/clouds-3.png'); background-size: 720px 480px; opacity: 0.85; z-index: 5; animation: drift-left-3 50s linear infinite; } .cloud-layer-4 { background-image: url('../assets/bg/clouds-4.png'); background-size: 720px 480px; opacity: 0.90; z-index: 6; animation: drift-right-4 40s linear infinite; } /* drift-left-N / drift-right-N: animate background-position by exactly one tile width (720px) on X. The Y component is a FIXED per-layer offset (0 / 120 / 240 / 360 px) -- it does not change during the animation, it just stagger-shifts each layer's visible row so we get 4 evenly-spaced horizontal cloud bands instead of 2. Because the PNG is a seamless tile of width 720px, the pattern at position -720px is IDENTICAL to position 0 -- so the X animation loops perfectly with no visible jump. The Y offset is a constant, so it never causes a jump either. */ @keyframes drift-left-1 { 0% { background-position: 0 0px; } 100% { background-position: -720px 0px; } } @keyframes drift-right-2 { 0% { background-position: -720px 120px; } 100% { background-position: 0 120px; } } @keyframes drift-left-3 { 0% { background-position: 0 240px; } 100% { background-position: -720px 240px; } } @keyframes drift-right-4 { 0% { background-position: -720px 360px; } 100% { background-position: 0 360px; } } /* ---------- top splash banner ---------- */ .splash { position: relative; z-index: 10; text-align: center; padding: 28px 12px 18px; background: linear-gradient(180deg, rgba(214,235,255,0.40) 0%, rgba(200,182,226,0.20) 60%, rgba(255,255,255,0) 100%); border-bottom: 2px solid rgba(200,182,226,0.6); } .splash h1 { font-family: 'Comfortaa', sans-serif; font-weight: 700; font-size: 34px; margin: 0; /* gradient text: peach-deep -> lavender-deep -> sky-deep (sunset sky fade, clipped to the heading glyphs). drop-shadow is used instead of text-shadow because text-shadow does not render correctly with background-clip:text (the shadow shows through the transparent text fill). */ background: linear-gradient(135deg, var(--peach-deep) 0%, var(--lavender-deep) 50%, var(--sky-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 1px rgba(255, 255, 255, 0.7)); letter-spacing: 1px; } .splash .subtitle { font-family: 'Quicksand', sans-serif; font-weight: 500; font-size: 18px; color: var(--slate-soft); margin-top: 10px; letter-spacing: 0.5px; } .splash .subtitle .blink { animation: blink 1.3s steps(2) infinite; color: var(--peach-deep); } @keyframes blink { 50% { opacity: 0; } } @keyframes rainbow { 0% { color: var(--peach-deep); } 25% { color: var(--lavender-deep); } 50% { color: var(--sky-deep); } 75% { color: var(--mint-deep); } 100% { color: var(--peach-deep); } } .rainbow { animation: rainbow 4s linear infinite; } /* ---------- top marquee ---------- */ .marquee { position: relative; z-index: 10; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-top: 1px solid rgba(200,182,226,0.5); border-bottom: 1px solid rgba(200,182,226,0.5); padding: 7px 0; overflow: hidden; white-space: nowrap; font-family: 'Comfortaa', sans-serif; font-weight: 500; font-size: 12px; color: var(--lavender-deep); letter-spacing: 0.5px; } .marquee span { display: inline-block; padding-left: 100%; animation: scroll-left 30s linear infinite; } @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } /* ---------- main shell ---------- */ .shell { position: relative; z-index: 10; max-width: 1024px; margin: 0 auto; padding: 18px 12px 90px; } /* ---------- LOOKOUT page (observation deck) ---------- A minimal page where the sky background is the main attraction. Layout: a thin frame around the viewport (like a viewing platform railing), a small caption block at the top, and an otherwise empty viewing area so the clouds + sun + rays are fully visible. .lookout-frame is a fixed-position overlay with a transparent center and translucent "rails" on the top/bottom/left/right. The center stays fully transparent so the sky shows through uninterrupted. .lookout-caption is a small floating card at the top center with the page title -- enough context to know what you're looking at, but not enough to obscure the view. */ .lookout-shell { position: relative; z-index: 10; min-height: 100vh; padding: 0; margin: 0; } /* the "viewing deck" frame: thin translucent rails around the viewport */ .lookout-frame { position: fixed; inset: 0; pointer-events: none; z-index: 8; /* rails: top + bottom strips + left + right strips, hollow center */ background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, 0) 82%, rgba(255, 255, 255, 0.55) 100%), linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0) 94%, rgba(255, 255, 255, 0.35) 100%); } /* a subtle inner border to suggest the "window frame" edge */ .lookout-frame::before { content: ''; position: absolute; inset: 24px; border: 1px solid rgba(200, 182, 226, 0.45); border-radius: 18px; box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.35), 0 0 30px rgba(200, 182, 226, 0.18); } /* corner brackets -- like a camera viewfinder */ .lookout-frame::after { content: ''; position: absolute; inset: 24px; pointer-events: none; background: /* top-left corner */ linear-gradient(to right, var(--lavender-deep), var(--lavender-deep)) top left / 28px 2px no-repeat, linear-gradient(to bottom, var(--lavender-deep), var(--lavender-deep)) top left / 2px 28px no-repeat, /* top-right corner */ linear-gradient(to left, var(--lavender-deep), var(--lavender-deep)) top right / 28px 2px no-repeat, linear-gradient(to bottom, var(--lavender-deep), var(--lavender-deep)) top right / 2px 28px no-repeat, /* bottom-left corner */ linear-gradient(to right, var(--lavender-deep), var(--lavender-deep)) bottom left / 28px 2px no-repeat, linear-gradient(to top, var(--lavender-deep), var(--lavender-deep)) bottom left / 2px 28px no-repeat, /* bottom-right corner */ linear-gradient(to left, var(--lavender-deep), var(--lavender-deep)) bottom right / 28px 2px no-repeat, linear-gradient(to top, var(--lavender-deep), var(--lavender-deep)) bottom right / 2px 28px no-repeat; opacity: 0.7; } /* small floating caption at top center */ .lookout-caption { position: relative; z-index: 10; margin: 56px auto 0; max-width: 520px; padding: 14px 22px; background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: var(--r-card); text-align: center; box-shadow: 0 4px 24px rgba(142, 111, 191, 0.18); } .lookout-caption h1 { font-family: 'Comfortaa', sans-serif; font-weight: 700; font-size: 22px; margin: 0 0 6px; color: var(--lavender-deep); letter-spacing: 1px; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7); } .lookout-caption p { margin: 0; font-family: 'Quicksand', sans-serif; font-size: 13px; color: var(--slate-soft); line-height: 1.5; } /* tiny altitude / coordinates readout at the bottom corner */ .lookout-readout { position: fixed; bottom: 36px; left: 36px; z-index: 10; font-family: 'Comfortaa', sans-serif; font-size: 11px; color: var(--lavender-deep); background: rgba(255, 255, 255, 0.7); padding: 8px 12px; border-radius: var(--r-pill); letter-spacing: 0.5px; box-shadow: 0 2px 12px rgba(142, 111, 191, 0.14); line-height: 1.6; } .lookout-readout .label { color: var(--slate-soft); font-weight: 500; } .lookout-readout .value { color: var(--peach-deep); font-weight: 700; } /* compact nav rail for the lookout page -- just the nav box, no widgets, so it doesn't clutter the viewing area */ .lookout-shell .navrail { max-width: 220px; } /* soft gradient card with a gradient border (padding-box / border-box technique -- the same trick used by the 2010s apple-style music player, recoloured to match the dreamy sky palette). - background: a soft pastel gradient (lavender -> cloud white) fills the padding-box, so the inside of the card has a gentle vertical fade instead of a flat colour. - border: a 2px gradient ring (peach -> lavender-deep) is painted into the border-box and shows through the transparent border. - inset box-shadow adds the subtle "pressed glass" inner glow that the player windows have, so the cards now feel like little glass panels floating over the sky rather than opaque paper cards. overflow:hidden clips the H2's gradient to the rounded border. */ .box { background: linear-gradient(0deg, rgba(241, 227, 240, 0.92) 0%, rgba(255, 250, 245, 0.95) 35%, rgba(255, 255, 255, 0.95) 100%) padding-box, linear-gradient(135deg, var(--peach) 0%, var(--lavender) 50%, var(--lavender-deep) 100%) border-box; border: 2px solid transparent; border-radius: var(--r-card); padding: 18px 20px; margin-bottom: 16px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 1px 1px 10px 0px rgba(142, 111, 191, 0.18) inset, 0 4px 18px rgba(142, 111, 191, 0.14), 0 1px 3px rgba(74, 90, 107, 0.08); overflow: hidden; /* key fix: clips H2 bg to rounded corners */ } /* h2 heading: gradient bar background with white text, plus a subtle inner highlight line. The bar gradient goes peach -> lavender -> lavender-deep across 135deg, matching the card's gradient border. The text itself has a soft warm-white colour with a faint shadow so it reads clearly against the gradient bar. (We tried background-clip:text for fully gradient-filled letters, but that hides the bar background. Keeping the bar + solid text ends up looking more like the gradient-windowed music player the styling is borrowed from, and stays legible.) */ .box h2 { font-family: 'Comfortaa', sans-serif; font-weight: 700; font-size: 18px; margin: -18px -20px 16px; padding: 12px 20px; background: linear-gradient(135deg, var(--peach) 0%, var(--lavender) 45%, var(--lavender-deep) 100%); color: #FFFFFF; border-bottom: 2px solid var(--lavender-deep); letter-spacing: 0.5px; text-shadow: 0 1px 0 rgba(110, 80, 160, 0.45), 0 1px 2px rgba(0, 0, 0, 0.12); /* no border-radius here -- overflow:hidden on .box handles the clipping */ } .box h3 { font-family: 'Comfortaa', sans-serif; font-weight: 600; font-size: 15px; color: var(--peach-deep); margin: 22px 0 8px; letter-spacing: 0.3px; } .box p { margin: 10px 0; } /* ---------- two-column layout (nav rail + main) ---------- The navrail on the left holds nav + widget boxes AND the stamps block at the bottom. The main column on the right holds the page content. Below 760px viewport width everything collapses to a single column. */ .layout { display: grid; grid-template-columns: 220px 1fr; gap: 16px; } @media (max-width: 760px) { .layout { grid-template-columns: 1fr; } } /* left navigation rail */ .navrail .box { padding: 12px; } .navrail h2 { font-size: 14px; } .navlist { list-style: none; margin: 0; padding: 0; font-family: 'Comfortaa', sans-serif; font-weight: 600; font-size: 13px; } .navlist li { margin: 0 0 10px; } .navlist a { display: block; padding: 9px 14px; background: rgba(255, 255, 255, 0.7); color: var(--lavender-deep); text-decoration: none; border: 2px solid var(--lavender); border-radius: var(--r-pill); letter-spacing: 0.3px; transition: all 0.18s ease; } .navlist a:hover { background: var(--lavender); color: #FFFFFF; transform: translateY(-1px); } .navlist a.current { background: linear-gradient(135deg, var(--peach) 0%, var(--peach-deep) 100%); color: #FFFFFF; border-color: var(--peach-deep); } .nav-icon { height: 16px; width: 16px; vertical-align: middle; margin-right: 6px; image-rendering: pixelated; display: inline-block; } /* ---------- stamps block (inside the left navrail, at the bottom) ---------- A small grid of retro "stamp" images (88x31-ish pixel-art buttons). Layout is a 2-column wrap so 4 stamps arrange as a 2x2 grid inside the 220px navrail. Pixel art is scaled with nearest-neighbour rendering so it stays crisp. */ .stamps-rail .box { padding: 12px; } .stamps-rail h2 { font-size: 14px; } .stamps-rail .small { text-align: center; margin: 4px 0 10px; } .stamp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .stamp { display: block; width: 100%; height: auto; border: 1px solid var(--lavender); border-radius: 6px; /* keep pixel art crisp when scaled up */ image-rendering: pixelated; image-rendering: crisp-edges; background: rgba(255, 255, 255, 0.6); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .stamp:hover { transform: translateY(-2px) rotate(-1.5deg); border-color: var(--peach-deep); box-shadow: 0 4px 12px rgba(142, 111, 191, 0.28); } /* sidebar widgets */ .widget { font-family: 'Quicksand', sans-serif; font-weight: 500; font-size: 15px; text-align: center; } .widget .counter { display: inline-block; background: var(--slate-deep); color: var(--sky); font-family: 'Comfortaa', sans-serif; font-weight: 700; font-size: 14px; padding: 6px 10px; border-radius: var(--r-button); letter-spacing: 3px; } .widget .label { color: var(--peach-deep); font-size: 13px; font-weight: 600; } .now-playing { font-size: 14px; text-align: left; } .now-playing .track { color: var(--lavender-deep); font-weight: 600; } .now-playing .artist { color: var(--peach-deep); } /* ---------- main content area ---------- */ .main { min-width: 0; } /* inline "NEW!" badge */ .new-badge { display: inline-block; background: var(--peach); color: var(--slate-deep); font-family: 'Comfortaa', sans-serif; font-weight: 700; font-size: 9px; padding: 3px 8px; margin-left: 6px; border-radius: var(--r-tag); animation: blink 1.5s steps(2) infinite; vertical-align: middle; letter-spacing: 0.5px; } /* horizontal divider */ .divider { display: block; width: 100%; height: 12px; margin: 16px 0; background: repeat-x center / 12px 12px url('../assets/icons/divider.svg'); opacity: 0.55; } /* ---------- news / update list ---------- */ .news { list-style: none; margin: 0; padding: 0; } .news li { padding: 8px 0; border-bottom: 1px dashed rgba(142, 111, 191, 0.35); } .news li:last-child { border-bottom: none; } .news .date { display: inline-block; width: 110px; color: var(--peach-deep); font-family: 'Comfortaa', sans-serif; font-weight: 600; font-size: 11px; vertical-align: middle; } /* ---------- music page: streaming links ---------- */ .stream-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; } .stream-card { display: block; background: rgba(255, 255, 255, 0.80); border: none; border-radius: var(--r-card); padding: 14px 16px; text-decoration: none; color: var(--slate); transition: all 0.2s ease; } .stream-card:hover { background: rgba(255, 255, 255, 0.92); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(232, 154, 117, 0.18); } .stream-card .stream-name { font-family: 'Comfortaa', sans-serif; font-weight: 700; font-size: 13px; color: var(--lavender-deep); letter-spacing: 0.5px; margin-bottom: 8px; } .stream-card .stream-note { font-size: 14px; color: var(--slate); line-height: 1.45; margin-bottom: 10px; } .stream-card .stream-link { font-size: 13px; color: var(--sky-deep); font-family: 'Quicksand', sans-serif; font-weight: 600; border-bottom: 1px dotted var(--sky-deep); } .stream-card:hover .stream-link { color: var(--sky-deeper); border-bottom-color: var(--sky-deeper); } /* ===================================================================== COLLECTION PAGE -- checkerboard gallery each .gallery-item is a row: photo on one side, text on the other. odd items: photo LEFT, text RIGHT. even items: photo RIGHT, text LEFT (achieved via flex-direction). ===================================================================== */ .gallery { display: flex; flex-direction: column; gap: 18px; margin-top: 14px; } .gallery-item { display: flex; flex-direction: row; align-items: stretch; gap: 20px; background: rgba(255, 255, 255, 0.80); border: none; border-radius: var(--r-card); padding: 18px; box-shadow: 0 4px 18px rgba(142, 111, 191, 0.12), 0 1px 3px rgba(74, 90, 107, 0.06); transition: all 0.2s ease; overflow: hidden; } .gallery-item:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(232, 154, 117, 0.22); } /* even items flip the order: photo on the right */ .gallery-item:nth-child(even) { flex-direction: row-reverse; } @media (max-width: 620px) { .gallery-item, .gallery-item:nth-child(even) { flex-direction: column; /* stack on small screens */ } } .gallery-img { flex: 0 0 220px; width: 220px; max-width: 220px; border: 2px solid var(--lavender); border-radius: var(--r-pill); background: rgba(214, 235, 255, 0.35); padding: 8px; display: flex; align-items: center; justify-content: center; } .gallery-img img { width: 100%; height: auto; display: block; image-rendering: pixelated; } .gallery-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; } .gallery-body .item-name { font-family: 'Comfortaa', sans-serif; font-weight: 700; font-size: 18px; color: var(--lavender-deep); letter-spacing: 0.5px; margin: 0 0 4px; } .gallery-body .item-meta { font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: 13px; color: var(--peach-deep); margin-bottom: 10px; } .gallery-body .item-story { font-size: 15px; line-height: 1.55; color: var(--slate); margin: 0; } .gallery-body .item-tags { margin-top: 10px; } /* ---------- music page ---------- */ .album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-top: 14px; } .album { background: rgba(255, 255, 255, 0.80); border: none; border-radius: var(--r-card); padding: 10px; text-align: center; transition: all 0.2s ease; overflow: hidden; } .album:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(232, 154, 117, 0.18); } .album img { width: 100%; height: auto; display: block; border-radius: var(--r-pill); } .album .title { font-family: 'Comfortaa', sans-serif; font-weight: 700; font-size: 12px; color: var(--lavender-deep); margin-top: 10px; letter-spacing: 0.5px; } .album .meta { font-size: 13px; color: var(--peach-deep); margin-top: 4px; font-weight: 600; } .tracklist { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 12px; } .tracklist th, .tracklist td { padding: 10px 12px; text-align: left; /* NO borders -- tables are borderless per design. rows are separated by subtle alternating row tint + hover highlight instead. */ } .tracklist th { font-family: 'Comfortaa', sans-serif; font-weight: 700; font-size: 11px; color: var(--lavender-deep); text-align: left; /* no border-bottom */ letter-spacing: 0.5px; text-transform: uppercase; } .tracklist tbody tr:nth-child(even) { background: rgba(200, 182, 226, 0.06); /* faint zebra stripe */ } .tracklist tbody tr:hover { background: rgba(200, 182, 226, 0.18); /* hover highlight */ } .tracklist td.num { width: 40px; font-family: 'Comfortaa', sans-serif; font-weight: 700; font-size: 12px; color: var(--sky-deep); } .tracklist td.len { width: 70px; text-align: right; color: var(--peach-deep); font-size: 13px; font-weight: 600; } /* (legacy .tracklist tr:hover removed -- superseded by the tbody tr:hover and zebra-stripe rules above) */ /* ---------- (legacy audio player rules removed -- no inline player anymore) ---------- */ /* ---------- (legacy photo-gallery rules removed -- photos page is gone) ---------- */ /* ---------- (legacy blog-page rules removed -- blog page is gone) ---------- */ /* ---------- about ---------- */ .about-card { text-align: center; margin-bottom: 14px; } .about-card .avatar { width: 120px; height: 120px; border: 3px solid var(--peach-deep); border-radius: 50%; box-shadow: 0 4px 14px rgba(232, 154, 117, 0.25); } .about-card .name { font-family: 'Comfortaa', sans-serif; font-weight: 700; font-size: 18px; color: var(--lavender-deep); margin-top: 10px; letter-spacing: 1px; } .linklist { list-style: none; padding: 0; margin: 10px 0; } .linklist li { padding: 6px 0; border-bottom: 1px dotted rgba(142, 111, 191, 0.3); font-size: 15px; } .linklist li:last-child { border-bottom: none; } .linklist li::before { content: "> "; color: var(--peach-deep); font-weight: 700; } /* ---------- 88x31 button collection ---------- */ .button-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .button-row img { width: 88px; height: 31px; display: block; border: 1px solid var(--lavender); border-radius: 6px; } /* (the webring block has been removed from the layout -- rules kept as a harmless no-op in case any leftover markup references it.) */ .webring { display: none; } /* ---------- status bar (fixed bottom) ---------- */ .statusbar { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--slate); font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: 13px; padding: 6px 14px; border-top: 2px solid var(--lavender); display: flex; justify-content: space-between; z-index: 999; } .statusbar .left { color: var(--lavender-deep); } .statusbar .right { color: var(--peach-deep); } /* ---------- footer ---------- */ .footer { text-align: center; font-size: 13px; color: var(--slate-soft); padding: 16px 0 36px; } .footer .badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 12px 0; } .footer .badges img { width: 88px; height: 31px; border: 1px solid var(--lavender); border-radius: 6px; } .footer .validated { color: var(--peach-deep); font-size: 12px; font-weight: 600; } /* small helpers */ .center { text-align: center; } .small { font-size: 13px; color: var(--slate-soft); font-weight: 500; } .hidden { display: none; } .tag { display: inline-block; background: var(--mint); color: var(--slate-deep); font-family: 'Comfortaa', sans-serif; font-weight: 600; font-size: 10px; padding: 3px 8px; margin: 2px; letter-spacing: 0.3px; border-radius: var(--r-tag); border: 1px solid var(--mint-deep); } /* ---------- reduced-motion: turn off all sky animations ---------- */ @media (prefers-reduced-motion: reduce) { .cloud-layer, .sun-rays, .sun-rays .ray, .sky-fx::after, .marquee span, .new-badge, .blink, .rainbow { animation: none !important; } } /* ===================================================================== MUSIC PLAYER -- 2010s apple-style click-wheel player adapted from @b8nadryl's design, recoloured to match the dreamy sky palette (lavender / peach / cloud-white gradients instead of the original grey). All player-specific class names are kept verbatim from the source so the JS in music.html works unchanged. ===================================================================== */ /* outer pill-shaped gradient frame -- this is the visible "case" around the inner window. Uses the same padding-box / border-box gradient technique as the .box cards. */ .player { width: fit-content; border: 2px solid transparent; border-radius: 100px; margin: 0 auto; background: linear-gradient(0deg, rgba(241, 227, 240, 1) 0%, rgba(230, 220, 240, 1) 30%, rgba(255, 255, 255, 1) 100%) padding-box, linear-gradient(to top, var(--peach), var(--lavender-deep)) border-box; padding: 5px; box-shadow: 0 6px 24px rgba(142, 111, 191, 0.22), 0 1px 3px rgba(74, 90, 107, 0.10); } /* the inner "window" panel that holds the wheel + player body. width kept at the original 290px so the player keeps its compact proportions. the track selector has been moved OUT of the player into its own card, so the player geometry is no longer affected by the dropdown. */ .player .window { font-family: 'Comfortaa', 'Quicksand', sans-serif; font-size: 11px; padding: 14px; width: 290px; max-width: 100%; box-sizing: border-box; } .player .window-body { display: block; margin: auto; border-radius: 0; } /* the musicplayer block on the right -- a soft pink->white gradient capsule with a gradient border, matching the .box style. the player window is back at its original 290px width, so this block sits in the fixed remaining ~180px next to the 100px wheel. */ .player #musicplayer { display: block; float: right; background: linear-gradient(0deg, rgba(241, 227, 240, 0.95), rgba(255, 255, 255, 0.95)) padding-box, linear-gradient(to top, var(--cloud), var(--lavender-deep)) border-box; border-radius: 60em; border: 2px solid transparent; margin-left: 10px; padding: 6px 12px; box-shadow: 1px 1px 10px 0px rgba(142, 111, 191, 0.20) inset; } /* the click-wheel -- STRICT 100x100 circle. The original design had the wheel as a perfect round disc; the table inside (prev / play / next) must NOT stretch it. We enforce this with explicit width + height + overflow:hidden + aspect-ratio, and shrink the innerwheel padding so the 3-button row fits comfortably inside 100px. */ .player .wheel { display: flex !important; flex-direction: column; align-items: center; justify-content: space-between; width: 100px !important; height: 100px !important; min-width: 100px !important; max-width: 100px !important; min-height: 100px !important; max-height: 100px !important; box-sizing: border-box !important; overflow: hidden; aspect-ratio: 1 / 1; margin: auto; background: linear-gradient(var(--cloud), var(--cloud)) padding-box, linear-gradient(to top, var(--cloud), var(--lavender)) border-box; border-radius: 50%; border: 2px solid transparent; padding: 4px 0; box-shadow: 1px 1px 10px 0px rgba(142, 111, 191, 0.20) inset; } /* the inner play/pause button ring -- padding shrunk so the 3-cell row (prev / innerwheel / next) fits inside the 100px wheel without forcing it wider. */ .player .innerwheel { border-radius: 50em; border: 2px solid var(--lavender); padding: 4px 6px; margin: 0; box-shadow: 1px 1px 10px 0px rgba(142, 111, 191, 0.14) inset; } .player .wheelcontrols table { border-collapse: collapse; table-layout: fixed; width: 70px; /* fits inside 100px wheel with room to spare */ } .player .wheelcontrols th { width: 33%; margin: 0; padding: 0; vertical-align: middle; text-align: center; } /* wheel control buttons (font awesome icons) */ .player .wheelcontrols { font-size: 14px !important; text-align: center; padding-top: 4px; color: var(--lavender-deep); opacity: 0.85; } .player .wheelcontrols button { background: none; border: none; color: var(--lavender-deep); opacity: 0.65; font-size: 14px; padding: 2px; cursor: pointer; transition: opacity 0.15s ease, color 0.15s ease; } .player .wheelcontrols button:hover { opacity: 1; color: var(--peach-deep); } .player .playpause-track button { display: block; color: var(--lavender-deep); font-size: 20px; margin: auto; } .player .playpause-track { font-size: 22px !important; padding: 3px; } /* scrolling song title (uses -- ancient but functional) */ .player .songtitle { padding: 22px 18px 0; color: var(--slate); font-size: 14px; display: block; font-family: 'Comfortaa', sans-serif; font-weight: 600; letter-spacing: 0.3px; } /* seek bar row */ .player .seeking { display: flex; justify-content: space-evenly; align-items: center; padding: 8px 4px 0; color: var(--slate-soft); font-size: 11px; } .player .current-time { padding-right: 5px; } .player .total-duration { padding-left: 5px; } /* the seek slider itself -- a soft pink track with a white thumb */ .player .seek_slider { -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 6px; flex: 1; min-width: 0; background: linear-gradient(90deg, var(--peach), var(--lavender)); opacity: 0.85; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; border-radius: 8px; cursor: pointer; } .player .seek_slider:hover { opacity: 1; } .player .seek_slider::-webkit-slider-thumb { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 12px; height: 12px; background: var(--cloud); cursor: pointer; border-radius: 50%; border: 1px solid var(--lavender-deep); box-shadow: 0 1px 3px rgba(142, 111, 191, 0.35); } .player .seek_slider::-moz-range-thumb { width: 12px; height: 12px; background: var(--cloud); cursor: pointer; border-radius: 50%; border: 1px solid var(--lavender-deep); box-shadow: 0 1px 3px rgba(142, 111, 191, 0.35); } .player input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; } .player input[type=range]:focus { outline: none; } /* (the secondary loop / music / random controls row has been removed at the user's request -- the player now shows only the click wheel, the song title, and the seek bar. the rules below are kept as a harmless no-op so any leftover .controls markup elsewhere doesn't pick up stray styling.) */ .player .controls { display: none; } /* general button reset inside the player */ .player button { min-width: 20px; background: none; text-align: center; } .player button:active { opacity: 0.7; } /* layout helper -- the .flex row holds the wheel + musicplayer side by side. */ .player .flex { display: flex; align-items: center; } /* the player wrapper inside the music page -- give it some breathing room */ .music-player-box { text-align: center; } .music-player-box .player { margin: 18px auto; } /* on narrow viewports, shrink the player window and stack the wheel above the musicplayer so nothing gets cut off. */ @media (max-width: 520px) { .player .window { width: 280px; } .player #musicplayer { float: none; margin: 12px auto 0; } .player .flex { flex-direction: column; } } /* ===== track selector dropdown ===== a pill-shaped gradient dropdown that lets the user pick a track from the loaded track_list. styled to match the player's gradient window aesthetic. optgroups separate albums from singles. the dropdown lives in the SAME .music-player-box card as the player, just below it -- the player keeps its compact 290px geometry, the dropdown stretches to fill the card width. */ .track-selector-wrap { position: relative; margin: 14px auto 4px; width: 100%; max-width: 100%; text-align: center; } .track-selector-wrap .ts-label { display: block; font-family: 'Comfortaa', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 1.5px; color: var(--slate-soft); text-transform: uppercase; margin-bottom: 6px; } .track-selector { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; padding: 9px 36px 9px 14px; font-family: 'Comfortaa', sans-serif; font-size: 12px; font-weight: 600; color: var(--lavender-deep); background: linear-gradient(0deg, rgba(241, 227, 240, 0.96), rgba(255, 255, 255, 0.96)) padding-box, linear-gradient(135deg, var(--peach), var(--lavender-deep)) border-box; border: 2px solid transparent; border-radius: var(--r-pill); cursor: pointer; letter-spacing: 0.3px; outline: none; box-shadow: 1px 1px 8px 0px rgba(142, 111, 191, 0.18) inset, 0 2px 8px rgba(142, 111, 191, 0.12); transition: box-shadow 0.18s ease; } .track-selector:hover { box-shadow: 1px 1px 8px 0px rgba(142, 111, 191, 0.28) inset, 0 3px 12px rgba(142, 111, 191, 0.22); } .track-selector:focus { box-shadow: 1px 1px 8px 0px rgba(142, 111, 191, 0.32) inset, 0 0 0 3px rgba(200, 182, 226, 0.45); } .track-selector optgroup { font-family: 'Comfortaa', sans-serif; font-weight: 700; font-size: 11px; color: var(--lavender-deep); background: rgba(241, 227, 240, 0.85); letter-spacing: 0.5px; } .track-selector option { font-family: 'Quicksand', sans-serif; font-weight: 500; font-size: 12px; color: var(--slate); background: rgba(255, 255, 255, 0.96); padding: 4px 8px; } /* custom dropdown arrow */ .track-selector-wrap::after { content: '▾'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--lavender-deep); font-size: 12px; /* shift down to align with the select (account for label above) */ margin-top: 12px; } /* ===================================================================== WINDOWS 7 AERO OVERRIDE --------------------------------------------------------------------- The rules above still use the dreamy pastel palette (now mapped to aero-blue values via :root), but several components need surgical overrides to truly look like Win7: - .box cards become aero-glass window frames with a title bar (no minimize/maximize/close buttons per user request). - .box h2 becomes the title bar text (black on aero glass, with the characteristic white text-shadow halo). - .navlist becomes a vertical list of Win7-style buttons. - .widget .counter becomes a digital display. - .stream-card / .album / .gallery-item become Win7 list items with hover highlight (light-blue gradient + 1px blue border). - .tracklist becomes a Win7 list view with zebra stripes. - .statusbar (fixed bottom) becomes the Win7 taskbar. - .footer becomes a Win7 dialog footer. - .splash h1 uses the Win7 hero text style (Title blue, drop shadow). - .marquee gets a Win7-style gradient strip. ===================================================================== */ /* ---------- .box becomes an aero window frame ---------- */ /* The window body is now TRANSLUCENT GLASS: a frosted-blue tint with backdrop-filter blur, so the sky/cloud wallpaper behind shows through softly. Text on top stays crisp because it gets a soft white text-shadow halo (set in the typography rules). */ .box { background: var(--w7-surface); background-color: var(--w7-surface); border: 1px solid var(--w7-w-bd); border-radius: var(--r-card); padding: 0; /* padding moves to .box > *:not(h2) */ margin-bottom: 12px; box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.7); /* top gloss line */ overflow: hidden; /* Aero frosted-glass blur. -webkit- prefix for Safari. */ backdrop-filter: blur(var(--w7-glass-blur)) saturate(1.4); -webkit-backdrop-filter: blur(var(--w7-glass-blur)) saturate(1.4); } /* the body content inside the window -- gets the Win7 inner padding */ .box > *:not(h2) { padding-left: 10px; padding-right: 10px; } .box > *:first-child:not(h2), .box > h2 + * { padding-top: 10px; } .box > *:last-child { padding-bottom: 10px; } /* tables inside .box shouldn't get the side padding (they're full-width) */ .box > table, .box > .gallery, .box > .album-grid, .box > .stream-grid, .box > .button-row, .box > .news, .box > .stamp-grid, .box > .tracklist, .box > .linklist, .box > .footer, .box > .badges, .box > .player, .box > .track-selector-wrap, .box > .about-profile, .box > .about-section, .box > p:first-of-type { padding-left: 10px; padding-right: 10px; } /* ---------- .box h2 becomes the aero title bar ---------- */ /* The title bar uses translucent aero-blue glass with a left-to- right sheen gradient on top. The sky wallpaper still shows through softly behind the title text. */ .box h2 { font-family: var(--w7-font); font-weight: 600; font-size: 13px; margin: 0 0 8px; padding: 6px 10px; background: linear-gradient(to right, rgba(255,255,255,0.40), rgba(0,0,0,0.10), rgba(255,255,255,0.20)), linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.05) 50%, rgba(0,0,0,0.05) 100%), var(--w7-w-bg); background-color: var(--w7-w-bg); color: #000; border: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.45); border-radius: 0; letter-spacing: 0; /* the signature Win7 aero text halo: multiple white text-shadows create a soft glow around the letters so the dark text reads clearly on the glass-blue title bar. */ text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff; display: block; overflow: hidden; /* keep the title bar on top of the glass body's backdrop-filter (it sits inside .box, which has the blur; we don't add another blur here so the text stays razor-sharp). */ } /* ---------- .box h3 (group headings inside the body) ---------- */ .box h3 { font-family: var(--w7-font); font-weight: 600; font-size: 11pt; color: var(--w7-title-c); margin: 14px 10px 6px; letter-spacing: 0; } .box p { margin: 6px 10px; line-height: 1.4; } /* ---------- nav list (left rail) becomes Win7 button list ---------- */ .navlist { list-style: none; margin: 0; padding: 0; font-family: var(--w7-font); font-weight: 400; font-size: 9pt; } .navlist li { margin: 0 0 4px; } .navlist a { display: block; padding: 4px 10px; background: var(--w7-el-grad); color: #000; text-decoration: none; border: 1px solid var(--w7-el-bd); border-radius: var(--r-pill); letter-spacing: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.6); transition: border-color 0.2s ease, background 0.2s ease; /* glass tint for nav buttons too -- the sky wallpaper behind the left rail shows through softly. */ backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .navlist a:hover { background: var(--w7-el-grad-h); color: #000; border-color: var(--w7-el-bd-h); transform: none; } .navlist a.current { /* the "current page" selection uses a darker translucent aero-blue glass so it reads as "selected" without becoming opaque. */ background: linear-gradient(180deg, rgba(255,255,255,0.50) 0%, rgba(255,255,255,0.10) 45%, rgba(0,0,0,0.05) 100%), var(--w7-surface-deep); color: #000; border-color: #6d91ab; box-shadow: inset 1px 1px 0 rgba(0,0,0,0.18), inset -1px 1px 0 rgba(0,0,0,0.08), inset 0 0 0 1px rgba(255,255,255,0.75); } .nav-icon { height: 16px; width: 16px; vertical-align: middle; margin-right: 6px; image-rendering: pixelated; display: inline-block; } /* ---------- sidebar widgets ---------- */ .widget { font-family: var(--w7-font); font-weight: 400; font-size: 9pt; text-align: center; } .widget .counter { display: inline-block; background: linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 100%); color: #5dd55d; font-family: 'Consolas', 'DejaVu Sans Mono', monospace; font-weight: 700; font-size: 14px; padding: 4px 10px; border-radius: 2px; letter-spacing: 3px; border: 1px solid #000; box-shadow: inset 0 0 4px #000, 0 1px 0 #fff; text-shadow: 0 0 4px #5dd55d; } .widget .label { color: var(--w7-title-c); font-size: 9pt; font-weight: 600; } /* link-back copy field */ .linkback-field { background: #fff; border: 1px solid var(--w7-el-bd); border-radius: 2px; padding: 4px 6px; font-size: 8pt; word-break: break-all; cursor: pointer; box-shadow: inset 0 1px 2px rgba(0,0,0,0.10); transition: border-color 0.15s ease; max-height: 60px; overflow-y: auto; } .linkback-field:hover { border-color: var(--w7-el-bd-h); } .linkback-field code { font-family: 'Consolas', 'DejaVu Sans Mono', monospace; color: #333; font-size: 8pt; line-height: 1.4; } /* ---------- stamp grid (kept as 2-col, but with Win7-style borders) ---------- */ /* Each stamp is a small glass tile too -- the sky wallpaper shows through softly around the stamp image. */ .stamp { border: 1px solid var(--w7-el-bd); border-radius: 2px; background: var(--w7-surface-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.6); transition: transform 0.15s ease, box-shadow 0.15s ease; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .stamp:hover { transform: translateY(-1px); border-color: var(--w7-el-bd-h); box-shadow: 0 2px 6px rgba(60, 127, 177, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.85); } /* ---------- gallery items become Win7 list panels ---------- */ .gallery-item { background: var(--w7-surface-2); border: 1px solid var(--w7-el-bd); border-radius: var(--r-pill); padding: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 3px rgba(0,0,0,0.10); transition: border-color 0.18s ease, box-shadow 0.18s ease; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .gallery-item:hover { border-color: var(--w7-el-bd-h); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85), 0 2px 8px rgba(60, 127, 177, 0.25); transform: none; } .gallery-img { border: 1px solid var(--w7-el-bd); border-radius: 2px; background: var(--w7-surface-2); padding: 4px; } .gallery-body .item-name { font-family: var(--w7-font); font-weight: 600; font-size: 11pt; color: var(--w7-title-c); letter-spacing: 0; margin: 0 0 2px; } .gallery-body .item-meta { font-family: var(--w7-font); font-weight: 400; font-size: 9pt; color: #444; margin-bottom: 6px; } .gallery-body .item-story { font-size: 9pt; line-height: 1.4; color: #000; margin: 0; } /* ---------- stream cards (music page) ---------- */ .stream-card { background: var(--w7-surface-2); border: 1px solid var(--w7-el-bd); border-radius: var(--r-pill); padding: 10px 12px; color: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.6); transition: border-color 0.18s ease, background 0.18s ease; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .stream-card:hover { background: rgba(234, 246, 253, 0.85); border-color: var(--w7-el-bd-h); transform: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85); } .stream-card .stream-name { font-family: var(--w7-font); font-weight: 600; font-size: 10pt; color: var(--w7-title-c); letter-spacing: 0; margin-bottom: 4px; } .stream-card .stream-note { font-size: 9pt; color: #000; line-height: 1.4; margin-bottom: 6px; } .stream-card .stream-link { font-size: 9pt; color: var(--w7-link-c); font-family: var(--w7-font); font-weight: 400; border-bottom: 0; } .stream-card:hover .stream-link { color: var(--w7-link-c-h); } /* ---------- album cards (music page discography grid) ---------- */ .album { background: var(--w7-surface-2); border: 1px solid var(--w7-el-bd); border-radius: var(--r-pill); padding: 8px; text-align: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.6); transition: border-color 0.18s ease, background 0.18s ease; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .album:hover { background: rgba(234, 246, 253, 0.85); border-color: var(--w7-el-bd-h); transform: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85); } .album img { border-radius: 2px; } .album .title { font-family: var(--w7-font); font-weight: 600; font-size: 9pt; color: var(--w7-title-c); margin-top: 6px; letter-spacing: 0; } .album .meta { font-size: 8.5pt; color: #444; margin-top: 2px; font-weight: 400; } /* ---------- tracklist (music page) ---------- */ .tracklist { font-size: 9pt; margin-top: 8px; border: 1px solid var(--w7-el-bd); border-radius: 2px; overflow: hidden; background: var(--w7-surface-2); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .tracklist th, .tracklist td { padding: 4px 8px; text-align: left; } .tracklist th { font-family: var(--w7-font); font-weight: 600; font-size: 9pt; color: #000; background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.05) 100%), var(--w7-el-grad); border-bottom: 1px solid var(--w7-el-bd); letter-spacing: 0; text-transform: none; } .tracklist tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.35); } .tracklist tbody tr:hover { background: rgba(234, 246, 253, 0.65); } .tracklist td.num { width: 36px; font-family: var(--w7-font); font-weight: 400; font-size: 9pt; color: var(--w7-link-c); } .tracklist td.len { width: 64px; text-align: right; color: #444; font-size: 9pt; font-weight: 400; } /* ---------- linklist (about page) ---------- */ .linklist li { padding: 3px 6px; border-bottom: 1px solid #e0e0e0; font-size: 9pt; line-height: 1.35; } .linklist li:last-child { border-bottom: 0; } .linklist li::before { content: ""; } .linklist li:hover { background: linear-gradient(#fff9, #e6ecf5cc 90%, #fffc); border: 1px solid #aaddfa; padding: 2px 5px; } /* ---------- 88x31 button row ---------- */ .button-row img { border: 1px solid var(--w7-el-bd); border-radius: 2px; box-shadow: inset 0 0 0 1px #fffc; } /* ---------- tags ---------- */ .tag { font-family: var(--w7-font); font-weight: 400; font-size: 8pt; padding: 1px 6px; margin: 1px; letter-spacing: 0; border-radius: 2px; border: 1px solid var(--mint-deep); background: #eaf6fd; color: #000; } /* ---------- news list (index page) ---------- */ .news li { padding: 4px 0; border-bottom: 1px solid #e0e0e0; } .news .date { color: var(--w7-title-c); font-family: var(--w7-font); font-weight: 600; font-size: 9pt; } /* ---------- new badge ---------- */ .new-badge { background: linear-gradient(#fff7d6, #ffe488); color: #000; font-family: var(--w7-font); font-weight: 600; font-size: 8pt; padding: 1px 6px; margin-left: 4px; border-radius: 2px; border: 1px solid #b08800; vertical-align: middle; } /* ---------- footer badges ---------- */ .footer .badges img { border: 1px solid var(--w7-el-bd); border-radius: 2px; box-shadow: inset 0 0 0 1px #fffc; } .footer .validated { color: var(--w7-title-c); font-size: 9pt; font-weight: 600; } .footer { color: #444; font-size: 9pt; } /* ---------- fixed bottom music player (Win7 taskbar style) ---------- */ /* sits just above the .statusbar taskbar. uses the same aero-glass gradient palette. a thin translucent bar with transport controls, scrolling song title, seek slider, and volume buttons. */ .w7-player-bar { position: fixed; bottom: 28px; /* just above the 28px statusbar */ left: 0; right: 0; z-index: 998; background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(235,244,252,0.72) 15%, rgba(220,235,248,0.82) 50%, rgba(200,225,245,0.78) 85%, rgba(180,215,240,0.72) 100%); backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4); border-top: 1px solid rgba(255,255,255,0.70); border-bottom: 1px solid rgba(0,0,0,0.18); box-shadow: 0 -1px 4px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.55); padding: 5px 12px; font-family: var(--w7-font); } .w7-player-inner { display: flex; align-items: center; gap: 12px; max-width: 900px; margin: 0 auto; } /* transport controls: prev / play / next */ .w7-player-controls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .w7-ctrl-btn { width: 28px; height: 28px; border-radius: 3px; border: 1px solid var(--w7-el-bd); background: var(--w7-el-grad); color: #000; font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.75), inset 0 1px 0 rgba(255,255,255,0.6); transition: border-color 0.15s ease, background 0.15s ease; padding: 0; } .w7-ctrl-btn:hover { border-color: var(--w7-el-bd-h); background: var(--w7-el-grad-h); } .w7-ctrl-btn:active { border-color: #6d91ab; background: linear-gradient(#e5f4fc, #c4e5f6 30% 50%, #98d1ef 50%, #68b3db); box-shadow: inset 1px 1px 0 #0003, inset -1px 1px 0 #0001; } .w7-play-btn { width: 34px; height: 34px; font-size: 14px; border-radius: 4px; } /* song title + seek bar area */ .w7-player-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .w7-song-title { font-size: 9pt; font-weight: 600; color: var(--w7-title-c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; line-height: 1.3; } .w7-seek-row { display: flex; align-items: center; gap: 6px; } .w7-time { font-size: 8pt; color: #444; font-variant-numeric: tabular-nums; min-width: 32px; text-align: center; } .w7-seek-slider { -webkit-appearance: none; -moz-appearance: none; appearance: none; flex: 1; height: 6px; background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(210,230,250,0.80) 40%, rgba(160,200,240,0.70) 100%); border: 1px solid rgba(0,0,0,0.18); border-radius: 3px; cursor: pointer; outline: none; box-shadow: inset 0 1px 2px rgba(0,0,0,0.12); } .w7-seek-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; background: var(--w7-el-grad); border: 1px solid var(--w7-el-bd); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.75), 0 1px 2px rgba(0,0,0,0.18); cursor: pointer; } .w7-seek-slider::-moz-range-thumb { width: 14px; height: 14px; background: var(--w7-el-grad); border: 1px solid var(--w7-el-bd); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.75), 0 1px 2px rgba(0,0,0,0.18); cursor: pointer; } /* volume controls */ .w7-player-volume { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; padding: 0 2px; } .w7-player-volume .w7-ctrl-btn { width: 24px; height: 22px; font-size: 9px; } /* add bottom padding on the music page so content doesn't hide behind the player bar + statusbar */ body:has(.w7-player-bar) .main { padding-bottom: 80px; } /* ---------- statusbar (fixed bottom) becomes the Win7 taskbar ---------- */ .statusbar { position: fixed; bottom: 0; left: 0; right: 0; background: linear-gradient(180deg, #2d5f8f 0%, #3a7ab5 8%, #4a8ec9 30%, #5ba3d8 50%, #4a8ec9 70%, #2d5f8f 92%, #1a4570 100%); backdrop-filter: none; -webkit-backdrop-filter: none; color: #fff; font-family: var(--w7-font); font-weight: 400; font-size: 9pt; padding: 4px 8px; border-top: 1px solid #1a4570; box-shadow: inset 0 1px 0 #ffffff66, 0 -1px 3px rgba(0,0,0,0.3); display: flex; justify-content: space-between; align-items: center; z-index: 999; text-shadow: 0 1px 1px #000a; } .statusbar .left { color: #fff; } .statusbar .right { color: #fff; } /* ---------- splash header (page title) ---------- */ .splash { position: relative; z-index: 10; padding: 28px 16px 12px; text-align: center; border-bottom: 0; } .splash h1 { font-family: 'Bulbasaur SP', sans-serif; font-weight: normal; font-size: 72px; margin: 0; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #ff7d7d; -webkit-text-fill-color: unset; filter: none; letter-spacing: 3px; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.7); animation: weollex-color-cycle 4s linear infinite, weollex-swing 4s ease-in-out infinite; display: inline-block; transform-origin: center center; } .splash .subtitle { font-family: var(--w7-font); font-weight: 400; font-size: 11pt; color: #444; margin-top: 4px; letter-spacing: 0; } .splash .subtitle .blink { color: var(--w7-link-c); } .splash h1.weollex-logo { animation: weollex-color-cycle 4s linear infinite, weollex-wobble 6s ease-in-out infinite, weollex-swing 10s ease-in-out infinite; display: inline-block; transform-origin: center center; } /* ---------- marquee strip ---------- */ /* The marquee uses a translucent glass strip too -- sky wallpaper shows through behind the scrolling text. */ .marquee { background: var(--w7-surface-2); backdrop-filter: blur(4px) saturate(1.3); -webkit-backdrop-filter: blur(4px) saturate(1.3); border-top: 1px solid var(--w7-el-bd); border-bottom: 1px solid var(--w7-el-bd); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); padding: 4px 0; font-family: var(--w7-font); font-weight: 400; font-size: 9pt; color: #000; letter-spacing: 0; /* soft text halo so the marquee stays legible on glass */ text-shadow: 0 0 6px #fff, 0 0 6px #fff; } /* ---------- lookout page caption becomes a Win7 info card ---------- */ .lookout-caption { background: var(--w7-surface); backdrop-filter: blur(var(--w7-glass-blur)) saturate(1.4); -webkit-backdrop-filter: blur(var(--w7-glass-blur)) saturate(1.4); border: 1px solid var(--w7-w-bd); border-radius: var(--r-card); box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.7); overflow: hidden; } .lookout-caption h1 { font-family: var(--w7-font); font-weight: 600; font-size: 14pt; color: var(--w7-title-c); letter-spacing: 0; text-shadow: 0 1px 0 #fff; } .lookout-readout { background: var(--w7-surface); border: 1px solid var(--w7-el-bd); border-radius: var(--r-pill); color: var(--w7-title-c); font-family: var(--w7-font); font-size: 9pt; box-shadow: inset 0 0 0 1px #fffc, 0 1px 3px rgba(0,0,0,0.15); } .lookout-readout .value { color: var(--w7-link-c); } /* ===================================================================== ABOUT PAGE -- profile picture as a Win7 user-account tile. The about.html page already has a .about-profile block with a .user-tile img + .user-info block. These rules style the user-tile as a square 96x96 Win7 user-account-picture frame (glossy white border with a soft inner shadow), and put the name + tagline + intro text immediately to the right of the picture. ===================================================================== */ .about-profile { display: flex; align-items: flex-start; gap: 16px; margin: 10px; padding: 14px; background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(246,246,246,0.45) 100%) padding-box, linear-gradient(180deg, rgba(255,255,255,0.65), rgba(216,216,216,0.45)) border-box; border: 1px solid transparent; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7), 0 1px 3px rgba(0,0,0,0.10); } /* ===================================================================== PROFILE PICTURE FRAME (Windows 7 user-tile overlay) Uses the official Win7 User Picture Kit by ianitainc (DeviantArt, d22p0v4) -- a 62x62 PNG with a 48x48 transparent centre and four 1px corner cut-outs that mimic the rounded-corner mask Win7 applies to 48x48 user-account tiles. Source files (local copies in /assets/win7/): user-frame.png -- solid aero frame (white top-left edge, gray/blue gradient bottom-right edge) user-frame-glass.png -- same frame with an extra glass-gloss layer on top (use this if you want a shinier look) The kit's instructions.txt says: resize your image to 48x48, optionally clear 1 pixel in each corner for the rounded-corner effect, then centre it behind the 62x62 frame. HTML structure:
Layout: .profile-pic is a 62x62 box (the frame's native size). The inside is 48x48, centred, with the animated background PNG applied as a CSS background so transparent pixels of the SVG avatar still show some motion. .profile-pic:after is the 62x62 frame PNG, absolutely positioned on top, no-repeat. ===================================================================== */ .general-about .profile-pic img { background-image: url("https://i.ibb.co/QfNrLwY/active-animated-from-2.png"); background-repeat: no-repeat; background-size: 100% 100%; background-position: center; /* per the Win7 kit instructions.txt: 48x48 image, centred under the 62x62 frame. The frame's corner cut-outs show the page background through, so the avatar corners appear rounded. */ width: 48px; height: 48px; max-width: 48px; max-height: 48px; border: 0; padding: 0; border-radius: 0; box-sizing: border-box; object-fit: cover; display: block; /* centre the 48x48 img inside the 62x62 .profile-pic box */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* clear 1 pixel in each corner of the 48x48 image so the avatar matches the rounded-corner mask the Win7 frame expects. We do this with a radial-gradient mask that knocks out the corners. */ -webkit-mask: radial-gradient(circle 1px at 1px 1px, transparent 99%, #000 100%), radial-gradient(circle 1px at 47px 1px, transparent 99%, #000 100%), radial-gradient(circle 1px at 1px 47px, transparent 99%, #000 100%), radial-gradient(circle 1px at 47px 47px, transparent 99%, #000 100%), linear-gradient(#000, #000); -webkit-mask-composite: source-over; mask: radial-gradient(circle 1px at 1px 1px, transparent 99%, #000 100%), radial-gradient(circle 1px at 47px 1px, transparent 99%, #000 100%), radial-gradient(circle 1px at 1px 47px, transparent 99%, #000 100%), radial-gradient(circle 1px at 47px 47px, transparent 99%, #000 100%), linear-gradient(#000, #000); mask-composite: exclude; } .general-about .profile-pic { position: relative; width: 62px; height: 62px; flex: 0 0 62px; display: block; /* slight outer drop shadow so the tile lifts off the window body, like a real Win7 user-account picture. */ box-shadow: 0 1px 3px rgba(0,0,0,0.20); border-radius: 2px; /* no overflow:hidden -- the frame PNG must be allowed to draw its transparent corner cut-outs cleanly. */ } .profile-pic:after { content: ""; background: url('../assets/win7/user-frame.png') no-repeat center / 100% 100%; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } /* keep the older .user-tile / .avatar-tile selectors that may be used elsewhere as a no-op fallback (the .profile-pic rules above take precedence on the about page). */ .about-profile .avatar-tile, .about-card .avatar { flex: 0 0 96px; width: 96px; height: 96px; padding: 5px; border-radius: 4px; background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%) padding-box, linear-gradient(180deg, #ffffff, #b0b0b0) border-box; border: 1px solid transparent; box-shadow: 0 1px 3px rgba(0,0,0,0.20), inset 0 0 0 1px #fff, inset 0 -2px 4px rgba(0,0,0,0.10); } .about-profile .avatar-tile img, .about-profile .avatar, .about-card .avatar { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 2px; border: 0; box-shadow: inset 0 0 0 1px #0006; } .about-profile .user-info { flex: 1 1 auto; min-width: 0; padding-top: 4px; } .about-profile .user-name, .about-profile .name { font-family: var(--w7-font); font-size: 15pt; font-weight: 600; color: var(--w7-title-c); margin: 0 0 2px; line-height: 1.2; text-align: left; } .about-profile .user-tagline { font-family: var(--w7-font); font-size: 9pt; color: #555; margin: 0 0 8px; text-align: left; } .about-profile .user-intro, .about-profile p { font-family: var(--w7-font); color: #000; margin: 6px 0 0; line-height: 1.4; text-align: left; } .about-profile .user-intro strong { font-weight: 600; } /* legacy .about-card (centered avatar + name) -- override to use the new Win7 user-tile look too, in case any page still uses it. */ .about-card { text-align: left; margin-bottom: 10px; } .about-card .avatar { width: 96px; height: 96px; border: 0; border-radius: 0; padding: 5px; background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%) padding-box, linear-gradient(180deg, #ffffff, #b0b0b0) border-box; border: 1px solid transparent; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.20), inset 0 0 0 1px #fff, inset 0 -2px 4px rgba(0,0,0,0.10); } .about-card .name { font-family: var(--w7-font); font-weight: 600; font-size: 15pt; color: var(--w7-title-c); margin-top: 6px; letter-spacing: 0; } /* ---------- small helpers ---------- */ .small { font-size: 8.5pt; color: #444; font-weight: 400; } .center { text-align: center; } .hidden { display: none; } /* ===================================================================== WINDOWS 7 BUTTON STYLING for native