diff --git a/internal/web/static/css/layout.css b/internal/web/static/css/layout.css index f081c01..e8ecc7a 100644 --- a/internal/web/static/css/layout.css +++ b/internal/web/static/css/layout.css @@ -4,58 +4,89 @@ */ /* ================================ - * MAIN PAGE WRAPPING + * MAIN APP SHELL * =================================== */ body { - display: flex; - justify-content: center; - align-items: stretch; + background: + radial-gradient(1200px circle at 10% 20%, rgba(255, 79, 163, 0.10), transparent 45%), + radial-gradient(900px circle at 92% 8%, rgba(126, 231, 231, 0.08), transparent 42%), + var(--color-bg-dark); min-height: 100vh; } -/* Main content (center column) */ -.main-wrapper { - flex: 1; +.app-shell { + min-height: 100vh; + display: flex; + flex-direction: column; + color: var(--color-text-primary); +} + +.app-body { + width: 100%; max-width: 1800px; - overflow-y: auto; - padding-bottom: 4rem; + margin: 0 auto; + padding: 1.5rem 0 3.5rem; +} + +.main-wrapper { + width: 100%; } /* Shared container */ .container { - max-width: 1700px; - margin: 0 auto; - padding: 0 1.5rem; -} - - -/* ================================ - * SIDE PANELS (OPTION A — scroll WITH page) - * =================================== */ - -.side-panel { - width: 220px; - flex-shrink: 0; - background: #000; - border-left: 1px solid var(--color-border-soft); - border-right: 1px solid var(--color-border-soft); - display: flex; - flex-direction: column; - overflow: hidden; -} - -.side-panel img { width: 100%; - height: auto; - display: block; - object-fit: cover; - opacity: 0.75; - transition: opacity 0.25s ease; + max-width: none; + margin: 0 auto; + padding-left: 1.25rem; + padding-right: 1.25rem; } -.side-panel img:hover { - opacity: 1; +@media (min-width: 1200px) { + .container { + padding-left: 2.5rem; + padding-right: 2.5rem; + } +} + +/* Reusable elevated surface */ +.surface-panel { + background: linear-gradient(135deg, rgba(255, 79, 163, 0.06), rgba(21, 21, 23, 0.92)); + border: 1px solid var(--color-border-soft); + border-radius: 18px; + padding: 1.75rem; + box-shadow: var(--shadow-glow-pink-soft); +} + +.section-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + margin-bottom: 1rem; +} + +.section-kicker { + font-size: 0.85rem; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--color-text-secondary); + margin-bottom: 0.25rem; +} + +.section-title { + font-size: 1.4rem; + font-weight: 700; +} + +.section-hint { + color: var(--color-text-secondary); + font-size: 0.95rem; +} + +.content-stack { + display: grid; + gap: 1.5rem; } @@ -64,13 +95,13 @@ body { * =================================== */ .navbar { - background: var(--color-bg-card); + background: rgba(21, 21, 23, 0.92); border-bottom: 1px solid var(--color-border-soft); - padding: 0.75rem 0; + padding: 0.85rem 0; position: sticky; top: 0; z-index: 40; - backdrop-filter: blur(6px); + backdrop-filter: blur(8px); box-shadow: var(--shadow-glow-pink-soft); } @@ -78,6 +109,9 @@ body { display: flex; align-items: center; justify-content: space-between; + width: 100%; + max-width: 1800px; + margin: 0 auto; } /* Bootstrap navbar controls */ @@ -127,17 +161,20 @@ body { .hero-section { background: linear-gradient( - 135deg, - rgba(255, 79, 163, 0.10), - rgba(216, 132, 226, 0.05) + 140deg, + rgba(255, 79, 163, 0.16), + rgba(12, 12, 14, 0.92) ); border: 1px solid var(--color-border-soft); - border-radius: var(--radius-soft); - padding: 4rem 3rem; - margin-bottom: 3rem; + border-radius: 20px; + padding: 3rem 2.5rem; + margin-bottom: 2rem; position: relative; overflow: hidden; - box-shadow: var(--shadow-glow-pink-soft); + box-shadow: var(--shadow-glow-pink); + display: flex; + flex-direction: column; + gap: 1.5rem; } /* Subtle radial neon glow (G-A) */ @@ -155,7 +192,7 @@ body { } .hero-title { - font-size: 3.2rem; + font-size: 2.8rem; font-weight: 800; background: linear-gradient( 135deg, @@ -170,8 +207,18 @@ body { margin-top: 1rem; font-size: 1.2rem; color: var(--color-text-secondary); - max-width: 580px; - margin-inline: auto; + max-width: 720px; +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; +} + +.hero-actions .btn, +.hero-actions .btn-secondary { + min-width: 180px; } @@ -182,15 +229,15 @@ body { .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); - gap: 1.5rem; - margin-bottom: 3rem; + gap: 1.25rem; + margin-bottom: 2rem; } .stat-card { background: var(--color-bg-card); border: 1px solid var(--color-border-soft); border-radius: var(--radius); - padding: 1.5rem; + padding: 1.4rem; display: flex; align-items: center; justify-content: space-between; @@ -210,7 +257,7 @@ body { } .stat-content .stat-value { - font-size: 2rem; + font-size: 1.9rem; font-weight: 700; } @@ -241,24 +288,17 @@ body { * RESPONSIVE BREAKPOINTS * =================================== */ -/* --- Large screens under 1600px --- */ -@media (max-width: 1600px) { - .side-panel { - width: 180px; - } -} - -/* --- Hide side panels under 900px --- */ +/* --- Small screens --- */ @media (max-width: 900px) { - .side-panel { - display: none; - } .main-wrapper { padding: 0 0.5rem; } .logo-img { height: 36px; } + .hero-actions { + justify-content: flex-start; + } } /* --- Mobile adjustments (≤ 600px) --- */ diff --git a/internal/web/static/img/CSS/performer_card_CSS.svg b/internal/web/static/img/CSS/performer_card_CSS.svg new file mode 100644 index 0000000..2fc0d1d --- /dev/null +++ b/internal/web/static/img/CSS/performer_card_CSS.svg @@ -0,0 +1,104 @@ + + + + diff --git a/internal/web/static/img/CSS/performer_card_CSS.svg.2025_12_05_12_52_08.0.svg b/internal/web/static/img/CSS/performer_card_CSS.svg.2025_12_05_12_52_08.0.svg new file mode 100644 index 0000000..582676a --- /dev/null +++ b/internal/web/static/img/CSS/performer_card_CSS.svg.2025_12_05_12_52_08.0.svg @@ -0,0 +1,108 @@ + + + + diff --git a/internal/web/static/img/CSS/performer_info.png b/internal/web/static/img/CSS/performer_info.png new file mode 100644 index 0000000..05326b2 Binary files /dev/null and b/internal/web/static/img/CSS/performer_info.png differ diff --git a/internal/web/static/img/CSS/performer_info.svg b/internal/web/static/img/CSS/performer_info.svg new file mode 100644 index 0000000..48a36b2 --- /dev/null +++ b/internal/web/static/img/CSS/performer_info.svg @@ -0,0 +1,580 @@ + + + +dillon harper34, American2012 - presentSCENES|MOVIES16486SCENES|MOVIES16486Angelina Valentine39, American2012 - presentSCENES|MOVIES16486SCENES|MOVIES16486 diff --git a/internal/web/static/img/logo/GOONDEX_logo.svg b/internal/web/static/img/logo/GOONDEX_logo.svg index e494e72..de33fd1 100644 --- a/internal/web/static/img/logo/GOONDEX_logo.svg +++ b/internal/web/static/img/logo/GOONDEX_logo.svg @@ -23,16 +23,17 @@ inkscape:pagecheckerboard="0" inkscape:deskcolor="#505050" inkscape:document-units="px" - inkscape:zoom="2.8284271" - inkscape:cx="1382.9241" - inkscape:cy="89.095455" + inkscape:zoom="0.70710678" + inkscape:cx="776.40325" + inkscape:cy="353.55339" inkscape:window-width="1920" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" inkscape:current-layer="g9" - showgrid="true"> + showgrid="false" + showguides="true"> + visible="false" /> + + + + @@ -89,11 +122,6 @@ inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1"> -