Kamila96/FocusOne
0
1:root {2 /* Core Colors */3 --white: #ffffff;4 --black: #000000;5 --gray-ultra-light: #fafbfc;6 --gray-light: #f8f9fb;7 --gray-medium: #e2e6ee;8 --gray-dark: #2a2a2a;9 --gray-charcoal: #1a1a1a;10 11 /* Premium Accents */12 --accent-primary: #6b7280;13 --accent-secondary: #374151;14 --accent-tertiary: #06b6d4;15 --accent-warm: #f59e0b;16 17 /* Luxury Gradients */18 --gradient-luxury: linear-gradient(135deg, #f8f9fb 0%, #e2e6ee 100%);19 --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.1) 100%);20 --gradient-accent: linear-gradient(135deg, #6b7280 0%, #374151 100%);21 --gradient-dark: linear-gradient(135deg, #4a4a4a 0%, #2a2a2a 100%);22 --gradient-button-light: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);23 24 /* Premium Shadows */25 --shadow-soft: 0 4px 20px rgba(0,0,0,0.08);26 --shadow-medium: 0 8px 32px rgba(0,0,0,0.12);27 --shadow-strong: 0 16px 48px rgba(0,0,0,0.16);28 --shadow-glow: 0 0 40px rgba(107, 114, 128, 0.15);29 30 /* Modern Border Radius */31 --radius-sm: 8px;32 --radius-md: 16px;33 --radius-lg: 24px;34 --radius-xl: 32px;35 --radius-full: 9999px;36 37 /* Smooth Transitions */38 --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);39 --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);40 --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);41 42 /* UNIFIED GRID SYSTEM */43 --container-max-width: 1200px;44 --margin-desktop: 120px;45 --margin-tablet: 60px;46 --margin-mobile: 24px;47 --gap-large: 80px;48 --gap-medium: 48px;49 --gap-small: 24px;50 --gap-mini: 16px;51 52 /* VERTICAL RHYTHM */53 --section-spacing: 120px;54 --content-spacing: 64px;55 --element-spacing: 32px;56 --text-spacing: 16px;57 58 /* Legacy Variables (for compatibility) */59 --gray: #bbb;60 --accent: #e0e0e0;61 --gradient: var(--gradient-luxury);62 --gradient-hover: var(--gradient-dark);63 --cta-gradient: var(--gradient-accent);64 --cta-gradient-hover: var(--gradient-dark);65 --border-radius: var(--radius-lg);66 --transition: var(--transition-smooth);67}68 69* { 70 box-sizing: border-box; 71}72 73/* UNIFIED CONTAINER SYSTEM */74.container {75 max-width: var(--container-max-width);76 margin: 0 auto;77 padding-left: var(--margin-desktop);78 padding-right: var(--margin-desktop);79}80 81.container-full {82 width: 100%;83 padding-left: var(--margin-desktop);84 padding-right: var(--margin-desktop);85}86 87.grid-container {88 display: grid;89 grid-template-columns: repeat(12, 1fr);90 gap: var(--gap-small);91 max-width: var(--container-max-width);92 margin: 0 auto;93 padding-left: var(--margin-desktop);94 padding-right: var(--margin-desktop);95}96 97body {98 margin: 0;99 font-family: 'Montserrat', sans-serif;100 background: var(--gray-ultra-light);101 color: var(--gray-dark);102 min-height: 100vh;103 letter-spacing: -0.01em;104 font-size: 1rem;105 line-height: 1.7;106 font-weight: 400;107 -webkit-font-smoothing: antialiased;108 -moz-osx-font-smoothing: grayscale;109 scroll-behavior: smooth;110 overflow-x: hidden;111}112 113h1, h2, h3, h4, h5, h6 {114 text-align: center;115 font-weight: 700;116 letter-spacing: -0.02em;117 line-height: 1.3;118 margin: 0;119}120 121h1 {122 margin-top: clamp(2rem, 4vw, 3rem);123 margin-bottom: clamp(1rem, 2vw, 1.5rem);124 font-size: clamp(2.5rem, 5vw, 4rem);125 color: #000000;126}127 128h2, .section-title {129 margin-top: clamp(2rem, 4vw, 3rem);130 margin-bottom: clamp(1rem, 2vw, 1.5rem);131 font-size: clamp(2rem, 4vw, 3rem);132 color: #000000;133}134 135h3 {136 margin-top: clamp(1rem, 2vw, 1.5rem);137 margin-bottom: clamp(0.5rem, 1vw, 1rem);138 font-size: clamp(1.5rem, 3vw, 2rem);139 color: #000000;140}141 142h4, h5, h6 {143 margin-top: clamp(0.75rem, 1.5vw, 1rem);144 margin-bottom: clamp(0.5rem, 1vw, 0.75rem);145}146 147h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p,148.section-title + p, .section-title + div {149 margin-top: clamp(0.75rem, 1.5vw, 1rem);150}151 152p {153 margin-bottom: clamp(1rem, 2vw, 1.5rem);154 line-height: 1.6;155}156 157section {158 margin-bottom: clamp(3rem, 6vw, 4rem);159 padding-top: clamp(1.5rem, 3vw, 2rem);160}161 162section:first-of-type {163 margin-top: clamp(1rem, 2vw, 1.5rem);164}165 166.hero-section h1 {167 margin-top: 0;168 margin-bottom: clamp(1.5rem, 3vw, 2rem);169}170 171.team-section h2,172.gallery-section h2,173.contact-section h2 {174 margin-top: clamp(2.5rem, 5vw, 3.5rem);175}176 177.banner {178 margin: clamp(3rem, 6vw, 4rem) 0;179}180 181h1 + ul, h2 + ul, h3 + ul, h4 + ul,182h1 + ol, h2 + ol, h3 + ol, h4 + ol,183.section-title + ul, .section-title + ol {184 margin-top: clamp(0.75rem, 1.5vw, 1rem);185}186 187@media (max-width: 768px) {188 h1 {189 margin-top: clamp(1.5rem, 4vw, 2rem);190 margin-bottom: clamp(0.75rem, 2vw, 1rem);191 }192 193 h2, .section-title {194 margin-top: clamp(1.5rem, 4vw, 2rem);195 margin-bottom: clamp(0.75rem, 2vw, 1rem);196 }197 198 section {199 margin-bottom: clamp(2rem, 4vw, 2.5rem);200 padding-top: clamp(1rem, 2vw, 1.25rem);201 }202}203 204a { 205 color: inherit; 206 text-decoration: none; 207}208 209#welcome-screen {210 display: flex;211 flex-direction: column;212 align-items: center;213 justify-content: center;214 min-height: 100vh;215 background: #000000;216 text-align: center;217 padding: 40px 20px;218 position: relative;219 overflow: hidden;220}221 222#welcome-screen::before {223 content: '';224 position: absolute;225 top: -50%;226 left: -50%;227 width: 200%;228 height: 200%;229 background: 230 radial-gradient(circle at 20% 20%, rgba(255,255,255,0.03) 0%, transparent 50%),231 radial-gradient(circle at 80% 80%, rgba(255,255,255,0.02) 0%, transparent 50%),232 radial-gradient(circle at 40% 70%, rgba(255,255,255,0.01) 0%, transparent 50%);233 animation: floatBackground 20s ease-in-out infinite;234 pointer-events: none;235}236 237@keyframes floatBackground {238 0%, 100% { transform: translate(0, 0) rotate(0deg); }239 33% { transform: translate(-20px, -20px) rotate(1deg); }240 66% { transform: translate(20px, -10px) rotate(-1deg); }241}242 243.logo-main {244 width: 340px;245 max-width: 90vw;246 margin-bottom: 40px;247 border-radius: 0;248 display: block;249 filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));250 transition: transform 0.3s ease, filter 0.3s ease;251 position: relative;252 z-index: 2;253}254 255.logo-main:hover {256 transform: scale(1.02);257 filter: drop-shadow(0 6px 20px rgba(0,0,0,0.4));258}259 260.choice-text {261 font-size: 1.3rem;262 line-height: 1.5;263 margin-bottom: 40px;264 color: #ffffff;265 font-weight: 400;266 letter-spacing: 1.5px;267 padding: 0 30px;268 max-width: 600px;269 text-shadow: 0 1px 4px rgba(0,0,0,0.2);270 position: relative;271 z-index: 2;272}273 274.choice-btns {275 display: flex;276 gap: 32px;277 flex-wrap: wrap;278 justify-content: center;279 margin-bottom: 40px;280 width: 100%;281 max-width: 800px;282 position: relative;283 z-index: 2;284}285 286.choice-btn {287 width: 280px;288 height: 64px;289 font-size: 1.1rem;290 border: none;291 border-radius: 16px;292 background: linear-gradient(135deg, #6b7280 0%, #374151 50%, #1f2937 100%);293 color: #ffffff;294 font-weight: 300;295 cursor: pointer;296 box-shadow: 0 4px 12px rgba(0,0,0,0.1);297 margin-bottom: 16px;298 letter-spacing: 0.8px;299 text-transform: uppercase;300 padding: 0;301 display: flex;302 align-items: center;303 justify-content: center;304}305 306.choice-btn:hover, .choice-btn:focus {307 background: linear-gradient(135deg, #4b5563 0%, #1f2937 50%, #111827 100%);308 color: #ffffff;309 transform: translateY(-2px);310 box-shadow: 0 6px 20px rgba(0,0,0,0.2);311}312 313.main-content {314 display: flex;315 flex-direction: column;316 min-height: 100vh;317 background: var(--gray-ultra-light);318 color: var(--gray-dark);319 transition: all var(--transition-smooth);320 position: relative;321}322 323.main-content.grafika {324 background: var(--black);325 color: var(--white);326}327 328nav {329 width: 100%;330 background: rgba(250, 251, 252, 0.95);331 backdrop-filter: blur(20px);332 border-bottom: 1px solid rgba(226, 230, 238, 0.3);333 position: sticky;334 top: 0;335 z-index: 100;336 transition: all var(--transition-smooth);337}338 339.nav-container {340 display: flex;341 align-items: center;342 justify-content: space-between;343 max-width: var(--container-max-width);344 margin: 0 auto;345 padding: 12px var(--margin-desktop);346 min-height: 60px;347}348 349.nav-left {350 display: flex;351 align-items: center;352}353 354.nav-center {355 display: flex;356 align-items: center;357 gap: 32px;358}359 360.nav-right {361 display: flex;362 align-items: center;363 gap: 12px;364}365 366/* MOBILE MENU STYLES */367.mobile-menu-toggle {368 display: none;369 flex-direction: column;370 justify-content: center;371 align-items: center;372 width: 40px;373 height: 40px;374 background: none;375 border: none;376 cursor: pointer;377 padding: 0;378 margin-right: 12px;379 z-index: 1001;380}381 382.hamburger-line {383 width: 24px;384 height: 2px;385 background: var(--gray-dark);386 margin: 3px 0;387 transition: all 0.3s ease;388 border-radius: 2px;389}390 391.main-content.grafika .hamburger-line {392 background: var(--white);393}394 395.mobile-menu-toggle.active .hamburger-line:nth-child(1) {396 transform: rotate(45deg) translate(6px, 6px);397}398 399.mobile-menu-toggle.active .hamburger-line:nth-child(2) {400 opacity: 0;401}402 403.mobile-menu-toggle.active .hamburger-line:nth-child(3) {404 transform: rotate(-45deg) translate(6px, -6px);405}406 407.mobile-menu {408 display: none;409 position: fixed;410 top: 0;411 left: 0;412 width: 100%;413 height: 100vh;414 background: rgba(255, 255, 255, 0.98);415 backdrop-filter: blur(20px);416 z-index: 1000;417 opacity: 0;418 transform: translateY(-100%);419 transition: all 0.3s ease;420}421 422.main-content.grafika .mobile-menu {423 background: rgba(0, 0, 0, 0.98);424}425 426.mobile-menu.active {427 opacity: 1;428 transform: translateY(0);429}430 431.mobile-menu-content {432 display: flex;433 flex-direction: column;434 justify-content: center;435 align-items: center;436 height: 100%;437 gap: 24px;438 padding: 80px 20px 20px;439}440 441.mobile-menu-link {442 font-size: 1.4rem;443 font-weight: 300;444 color: var(--gray-dark);445 text-decoration: none;446 padding: 12px 0;447 letter-spacing: 0.5px;448 text-transform: uppercase;449 transition: all 0.3s ease;450 opacity: 0;451 transform: translateY(20px);452}453 454.main-content.grafika .mobile-menu-link {455 color: var(--white);456}457 458.mobile-menu.active .mobile-menu-link {459 opacity: 1;460 transform: translateY(0);461}462 463.mobile-menu.active .mobile-menu-link:nth-child(1) { transition-delay: 0.1s; }464.mobile-menu.active .mobile-menu-link:nth-child(2) { transition-delay: 0.15s; }465.mobile-menu.active .mobile-menu-link:nth-child(3) { transition-delay: 0.2s; }466.mobile-menu.active .mobile-menu-link:nth-child(4) { transition-delay: 0.25s; }467.mobile-menu.active .mobile-menu-link:nth-child(5) { transition-delay: 0.3s; }468.mobile-menu.active .mobile-menu-link:nth-child(6) { transition-delay: 0.35s; }469 470.mobile-menu-link:hover {471 color: #6b7280;472 transform: translateY(-2px);473}474 475.main-content.grafika .mobile-menu-link:hover {476 color: #d1d5db;477}478 479.mobile-cta-btn {480 padding: 16px 32px;481 font-size: 1.1rem;482 font-weight: 400;483 border: 1px solid #374151;484 border-radius: var(--radius-full);485 background: #374151;486 color: var(--white);487 cursor: pointer;488 transition: all 0.3s ease;489 margin-top: 20px;490 letter-spacing: 0.5px;491 text-transform: uppercase;492 opacity: 0;493 transform: translateY(20px);494}495 496.mobile-menu.active .mobile-cta-btn {497 opacity: 1;498 transform: translateY(0);499 transition-delay: 0.2s;500}501 502.mobile-cta-btn:hover {503 background: #e5e7eb;504 color: #000000;505 border-color: #e5e7eb;506 transform: translateY(-2px);507}508 509@media (max-width: 900px) {510 .nav-center {511 display: none;512 }513 514 .nav-container {515 justify-content: center;516 padding: 10px var(--margin-desktop);517 min-height: 50px;518 position: relative;519 }520 521 .mobile-menu-toggle {522 display: flex;523 position: absolute;524 right: var(--margin-desktop);525 top: 50%;526 transform: translateY(-50%);527 }528 529 .nav-animation {530 display: none;531 }532 533 .nav-left {534 position: absolute;535 left: var(--margin-desktop);536 display: flex;537 align-items: center;538 }539 540 .nav-right {541 position: absolute;542 right: var(--margin-desktop);543 display: flex;544 align-items: center;545 }546 547 .mobile-menu-toggle {548 display: flex;549 margin-right: 0;550 margin-left: 0;551 }552 553 .mobile-menu {554 display: block;555 }556 557 .cta-btn {558 padding: 8px 16px;559 font-size: 0.65rem;560 }561 562 .desktop-only {563 display: none;564 }565 566 .full-width-slider {567 height: calc(100vh - 50px);568 }569}570 571.main-content.grafika nav {572 background: var(--black);573 border-bottom: 1px solid rgba(255, 255, 255, 0.1);574}575 576.main-content.grafika .nav-link {577 color: var(--white);578}579 580.main-content.grafika .nav-link:hover, 581.main-content.grafika .nav-link:focus {582 color: #d1d5db;583}584 585.main-content.grafika .cta-btn {586 background: var(--white);587 color: var(--black);588 border: 1px solid var(--white);589}590 591.main-content.grafika .cta-btn:hover {592 background: var(--white);593 border-color: var(--white);594 transform: scale(1.05);595}596 597.nav-animation {598 display: flex;599 align-items: center;600 gap: 8px;601 margin-right: 20px;602 opacity: 0;603 animation: fadeInAnimation 1s ease-in-out 0.5s forwards;604}605 606.main-content.grafika .nav-animation {607 opacity: 1;608}609 610.animated-orb {611 width: 8px;612 height: 8px;613 border-radius: 50%;614 background: linear-gradient(135deg, #1e3a8a 0%, #0ea5e9 50%, #10b981 100%);615 animation: orbPulse 2s ease-in-out infinite;616 box-shadow: 0 0 10px rgba(14, 165, 233, 0.3);617}618 619.animated-orb:nth-child(1) {620 animation-delay: 0s;621}622 623.animated-orb:nth-child(2) {624 animation-delay: 0.3s;625}626 627.animated-orb:nth-child(3) {628 animation-delay: 0.6s;629}630 631@keyframes orbPulse {632 0%, 100% {633 transform: scale(1);634 opacity: 0.7;635 box-shadow: 0 0 10px rgba(14, 165, 233, 0.3);636 }637 50% {638 transform: scale(1.5);639 opacity: 1;640 box-shadow: 0 0 20px rgba(14, 165, 233, 0.6);641 }642}643 644@keyframes fadeInAnimation {645 from {646 opacity: 0;647 transform: translateX(20px);648 }649 to {650 opacity: 1;651 transform: translateX(0);652 }653}654 655.nav-separator {656 display: none;657}658 659.main-content.grafika .nav-separator {660 background-color: #333;661}662 663.logo {664 font-size: 2.2rem;665 font-weight: 800;666 letter-spacing: -0.02em;667 background: var(--gradient-accent);668 -webkit-background-clip: text;669 -webkit-text-fill-color: transparent;670 background-clip: text;671 transition: all var(--transition-fast);672 cursor: pointer;673}674 675.logo:hover {676 transform: scale(1.05);677 filter: drop-shadow(0 4px 12px rgba(107, 114, 128, 0.25));678}679 680.nav-links {681 display: flex;682 gap: 32px;683 align-items: center;684}685 686.nav-link {687 font-size: 0.75rem;688 font-weight: 300;689 color: inherit;690 background: none;691 border: none;692 cursor: pointer;693 padding: 6px 0;694 transition: all var(--transition);695 letter-spacing: 0.8px;696 text-transform: uppercase;697}698 699.nav-link:hover, .nav-link:focus {700 color: #888;701 transform: translateY(-1px);702}703 704.cta-btn {705 padding: 10px 20px;706 font-size: 0.7rem;707 font-weight: 400;708 border: 1px solid #374151;709 border-radius: var(--radius-full);710 background: #374151;711 color: var(--white);712 cursor: pointer;713 box-shadow: var(--shadow-medium);714 transition: all var(--transition-smooth);715 margin-left: 18px;716 letter-spacing: 0.8px;717 text-transform: uppercase;718 position: relative;719 overflow: hidden;720}721 722.cta-btn::before {723 content: '';724 position: absolute;725 top: 0;726 left: -100%;727 width: 100%;728 height: 100%;729 background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);730 transition: left var(--transition-slow);731}732 733.cta-btn:hover::before {734 left: 100%;735}736 737.cta-btn:hover, .cta-btn:focus {738 background: #e5e7eb;739 color: #000000;740 border-color: #e5e7eb;741 transform: translateY(-3px);742 box-shadow: var(--shadow-strong);743}744 745.hero {746 width: 100%;747 min-height: 60vh;748 background: none;749 position: relative;750 padding: var(--content-spacing) 0;751}752 753.hero-container {754 display: flex;755 align-items: center;756 justify-content: space-between;757 max-width: var(--container-max-width);758 margin: 0 auto;759 padding-left: var(--margin-desktop);760 padding-right: var(--margin-desktop);761 gap: var(--gap-medium);762}763 764.hero-image {765 flex: 1.2;766 min-height: 320px;767 background: url('https://images.unsplash.com/photo-1519125323398-675f0ddb6308?auto=format&fit=crop&w=800&q=80') center/cover no-repeat;768 border-radius: 32px;769 box-shadow: 0 4px 32px rgba(0,0,0,0.13);770}771 772.main-content.grafika .hero-image {773 background: url('https://images.unsplash.com/photo-1464983953574-0892a716854b?auto=format&fit=crop&w=800&q=80') center/cover no-repeat;774 animation: heroAnim 4s infinite alternate;775}776 777@keyframes heroAnim {778 0% { filter: grayscale(0.2) brightness(0.95); }779 100% { filter: grayscale(0.6) brightness(1.1); }780}781 782.hero-content {783 flex: 1;784 display: flex;785 flex-direction: column;786 gap: 30px;787 justify-content: center;788 align-items: flex-start;789}790 791.hero-title {792 font-size: 2.2rem;793 font-weight: 700;794 color: var(--gray-dark);795 margin-bottom: 8px;796}797 798.main-content.grafika .hero-title {799 color: var(--white);800}801 802.hero-sub {803 font-size: 1.2rem;804 color: #666;805 margin-bottom: 18px;806}807 808.main-content.grafika .hero-sub {809 color: #ccc;810}811 812.hero-cta {813 padding: 14px 36px;814 font-size: 1.1rem;815 border: none;816 border-radius: var(--border-radius);817 background: var(--cta-gradient);818 color: var(--white);819 font-weight: 700;820 cursor: pointer;821 transition: background var(--transition), transform var(--transition);822}823 824.hero-cta:hover, .hero-cta:focus {825 background: var(--cta-gradient-hover);826 transform: scale(1.04);827}828 829.full-width-slider {830 width: 100vw;831 height: 100vh;832 overflow: hidden;833 position: relative;834 margin-top: 0;835 margin-left: calc(50% - 50vw);836 margin-right: calc(50% - 50vw);837}838 839.slider-inner {840 display: flex;841 width: 400%;842 height: 100%;843 transition: transform 1s ease-in-out;844}845 846.slider-item {847 width: 25%;848 height: 100%;849 background-size: cover;850 background-position: center;851 position: relative;852 display: flex;853 flex-direction: column;854 justify-content: center;855 align-items: center;856 color: white;857 text-align: center;858 animation: slideUp 10s linear infinite;859}860 861@keyframes slideUp {862 0% { background-position: center bottom; }863 100% { background-position: center top; }864}865 866.slider-item-text {867 font-size: 3.5rem;868 font-weight: 700;869 text-shadow: 2px 2px 8px rgba(0,0,0,0.7);870 margin-bottom: 30px;871 padding: 0 20px;872}873 874.slider-cta {875 padding: 22px 56px;876 font-size: 1.3rem;877 font-weight: 600;878 border: none;879 border-radius: var(--radius-full);880 background: linear-gradient(135deg, #e5e5e5 0%, #9ca3af 30%, #4b5563 70%, #1f2937 100%);881 color: var(--white);882 cursor: pointer;883 transition: all var(--transition-smooth);884 box-shadow: var(--shadow-medium);885 letter-spacing: -0.01em;886 min-height: 56px;887 min-width: 180px;888 position: relative;889 overflow: hidden;890 backdrop-filter: blur(10px);891 border: 2px solid rgba(255, 255, 255, 0.2);892}893 894.slider-cta::before {895 content: '';896 position: absolute;897 top: 0;898 left: -100%;899 width: 100%;900 height: 100%;901 background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);902 transition: left var(--transition-slow);903}904 905.slider-cta:hover::before {906 left: 100%;907}908 909.slider-cta:hover {910 background: linear-gradient(135deg, #d1d5db 0%, #6b7280 30%, #374151 70%, #111827 100%);911 transform: translateY(-3px);912 box-shadow: var(--shadow-strong);913 border-color: rgba(255, 255, 255, 0.4);914}915 916section {917 position: relative;918 background: none;919 padding: var(--section-spacing) 0;920}921 922.section-container {923 max-width: var(--container-max-width);924 margin: 0 auto;925 padding-left: var(--margin-desktop);926 padding-right: var(--margin-desktop);927}928 929section::before {930 display: none;931}932 933.section-title {934 font-weight: 700;935 letter-spacing: -0.02em;936 text-align: center;937 color: #000000;938 position: relative;939}940 941.main-content.grafika .section-title {942 color: #ffffff;943}944 945.main-content.grafika h1,946.main-content.grafika h2,947.main-content.grafika h3,948.main-content.grafika h4,949.main-content.grafika h5,950.main-content.grafika h6 {951 color: #ffffff;952}953 954.section-desc {955 font-size: 1.1rem;956 color: #6b7280;957 margin-bottom: clamp(1.5rem, 3vw, 3rem);958 line-height: 1.8;959 text-align: center;960 max-width: 1200px;961 margin-left: auto;962 margin-right: auto;963 font-weight: 400;964}965 966.main-content.grafika .section-desc {967 color: #ccc;968}969 970.team {971 display: grid;972 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));973 gap: var(--gap-medium);974 margin: var(--content-spacing) 0;975}976 977.team-member {978 position: relative;979 overflow: hidden;980 border-radius: 0;981 background: var(--white);982 padding: 0;983 margin-bottom: 0;984 height: 480px;985 cursor: pointer;986 transition: all var(--transition-smooth);987 box-shadow: var(--shadow-soft);988 border: 1px solid rgba(226, 230, 238, 0.5);989}990 991.team-member:hover {992 transform: translateY(-12px);993 box-shadow: var(--shadow-strong);994 border-color: rgba(107, 114, 128, 0.2);995}996 997.main-content.grafika .team-member {998 background: none;999}1000 1001.team-photo {1002 width: 100%; 1003 height: 100%;1004 object-fit: cover;1005 border-radius: 0;1006 margin-bottom: 0;1007 border: none;1008 box-shadow: none;1009 transition: transform 0.3s ease;1010}1011 1012.team-member:hover .team-photo {1013 transform: scale(1.05);1014}1015 1016.team-info {1017 position: absolute;1018 top: 50%;1019 left: 50%;1020 transform: translate(-50%, -50%);1021 text-align: center;1022 opacity: 0;1023 transition: opacity 0.3s ease;1024 z-index: 3;1025 width: 90%;1026 padding: 0 10px;1027}1028 1029.team-member:hover .team-info {1030 opacity: 1;1031}1032 1033.team-name {1034 font-size: 2rem;1035 font-weight: 700;1036 color: #fff;1037 text-shadow: 2px 2px 4px rgba(0,0,0,0.8);1038 margin-bottom: 12px;1039}1040 1041.team-overlay {1042 position: absolute;1043 top: 0;1044 left: 0;1045 width: 100%;1046 height: 100%;1047 background: rgba(0,0,0,0.6);1048 opacity: 0;1049 transition: opacity 0.3s ease;1050 z-index: 2;1051}1052 1053.team-member:hover .team-overlay {1054 opacity: 1;1055}1056 1057.team-role { 1058 display: none; 1059}1060 1061.team-desc {1062 font-size: 1rem;1063 color: #fff;1064 text-shadow: 1px 1px 3px rgba(0,0,0,0.8);1065 line-height: 1.4;1066 max-width: 100%;1067}1068 1069.team-btn { 1070 display: none; 1071}1072 1073.team-banner {1074 width: 100%;1075 margin: var(--gap-medium) 0;1076 padding: var(--gap-large) var(--gap-medium);1077 border-radius: var(--radius-lg);1078 background: linear-gradient(270deg, #f8f9fb, #e5e7eb, #d1d5db, #9ca3af, #d1d5db, #e5e7eb, #f8f9fb);1079 background-size: 400% 400%;1080 animation: grayWave 12s ease-in-out infinite;1081 color: #2a2a2a;1082 text-align: center;1083 font-size: 32px;1084 font-weight: 300;1085 letter-spacing: 0.4px;1086 line-height: 1.4;1087 position: relative;1088 overflow: hidden;1089 box-shadow: var(--shadow-medium);1090 display: flex;1091 flex-direction: column;1092 align-items: center;1093 justify-content: center;1094 cursor: pointer;1095 transition: all var(--transition-smooth);1096}1097 1098@keyframes grayWave {1099 0% {1100 background-position: 0% 50%;1101 }1102 50% {1103 background-position: 100% 50%;1104 }1105 100% {1106 background-position: 0% 50%;1107 }1108}1109 1110.team-banner:hover {1111 transform: translateY(-4px);1112 box-shadow: var(--shadow-strong);1113 background: linear-gradient(270deg, #e5e7eb, #d1d5db, #9ca3af, #6b7280, #9ca3af, #d1d5db, #e5e7eb);1114 background-size: 400% 400%;1115 animation: grayWaveHover 6s ease-in-out infinite;1116}1117 1118@keyframes grayWaveHover {1119 0% {1120 background-position: 0% 50%;1121 }1122 50% {1123 background-position: 100% 50%;1124 }1125 100% {1126 background-position: 0% 50%;1127 }1128}1129 1130.team-banner::before {1131 content: '';1132 position: absolute;1133 top: 0;1134 left: 0;1135 right: 0;1136 bottom: 0;1137 background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 100%);1138 pointer-events: none;1139 transition: opacity var(--transition-smooth);1140}1141 1142.team-banner:hover::before {1143 opacity: 0.7;1144}1145 1146.team-banner span {1147 position: relative;1148 z-index: 2;1149 display: block;1150 margin-bottom: 32px;1151 transition: all var(--transition-smooth);1152}1153 1154.team-banner:hover span {1155 transform: scale(1.02);1156 text-shadow: 0 2px 8px rgba(0,0,0,0.1);1157}1158 1159.team-banner .cta-btn {1160 position: relative;1161 z-index: 2;1162 margin-top: 0;1163 padding: 18px 40px;1164 font-size: 18px;1165 font-weight: 500;1166 background: #2a2a2a;1167 color: #ffffff;1168 border: 1px solid #2a2a2a;1169 border-radius: 12px;1170 box-shadow: 0 4px 16px rgba(0,0,0,0.1);1171 letter-spacing: 0.3px;1172}1173 1174.team-banner .cta-btn:hover {1175 background: #1a1a1a;1176 color: #ffffff;1177 border-color: #1a1a1a;1178 transform: translateY(-2px);1179 box-shadow: 0 6px 20px rgba(0,0,0,0.25);1180}1181 1182.opinions-banner {1183 max-width: 1200px;1184 margin: clamp(1rem, 2vw, 1.5rem) auto clamp(0.5rem, 1vw, 1rem) auto;1185 padding: var(--gap-large) var(--gap-medium);1186 border-radius: var(--radius-lg);1187 background: linear-gradient(270deg, #f8f9fb, #e5e7eb, #d1d5db, #9ca3af, #d1d5db, #e5e7eb, #f8f9fb);1188 background-size: 400% 400%;1189 animation: grayWave 12s ease-in-out infinite;1190 color: #2a2a2a;1191 text-align: center;1192 font-size: 32px;1193 font-weight: 300;1194 letter-spacing: 0.4px;1195 line-height: 1.4;1196 position: relative;1197 overflow: hidden;1198 box-shadow: var(--shadow-medium);1199 display: flex;1200 flex-direction: column;