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