��<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CalvinSuals Photography - �N <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&family=Montserrat:wght@100;300;400;500;700;900&display=swap" rel="stylesheet"> <!-- _eQFh�g�T�^ --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"> <!-- _eQꁚ[INCSS --> <style> /* �W@x7h_ */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } html, body { overflow-x: hidden; position: relative; width: 100vw; max-width: 100%; background-color: #e0dcd8; /* s|ppr�̀of */ } body { color: #333; line-height: 1.6; } .header { background-color: #e0dcd8; /* s|ppr�̀of */ padding-top: 40px; /* �N30px�X�R0R40px */ padding-bottom: 30px; /* �N20px�X�R0R30px */ text-align: center; /* Ensure title is centered */ position: relative; width: 100%; overflow: hidden; box-shadow: none; /* �yd�4�q_ ��MQ�NuƉɉR�� */ margin-bottom: 0; /* nx�O�l g�^���ݍ */ border-bottom: none; /* nx�O�l g��Fh */ } /* ibU\container{| �OvQ���nu�b��[�^ */ .container { width: 100%; max-width: 100%; padding: 0; margin: 0; } /* �Nf:y */ } /* �m�R҉h */ .card.recommended::before { content: "OHQ�cP�"; position: absolute; top: 10px; left: -35px; background: linear-gradient(45deg, #F2D4B0, #F7E7CE, #E0BFB8, #D4AF37); background-size: 200% 200%; animation: gradientShift 3s ease infinite; color: #333; font-size: 0.65rem; font-weight: bold; padding: 3px 35px; transform: rotate(-45deg); box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 10; } /* n�S�R;u */ @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* �y�R�z�te҉h'Y\�TaSGrMOn */ @media (max-width: 768px) { .card.recommended::before { font-size: 0.45rem; padding: 2px 30px; top: 7px; left: -28px; } /* �y�R�znf�aSGr�T�cP�aSGr�~NMOn�te - �S�tetop

e(WaSGrY�O */ .nav-btn { position: absolute; top: 175px; /* �N160px N�y15px0R175px */ width: 40px; height: 40px; background: rgba(255, 255, 255, 0.5); border: none; border-radius: 50%; color: #333; font-size: 1.5rem; cursor: pointer; z-index: 20; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; box-shadow: 0 0 5px rgba(0,0,0,0.2); } /* c:yhV - E\-N>en */ .indicators { position: absolute; bottom: 45px; /* �N60px N�y15px0R45px��N�^萗{w��vMOn � */ left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10; padding: 10px 15px; background: transparent; /* �yd�̀ofr� */ } .indicator { width: 12px; height: 12px; border-radius: 50%; background-color: rgba(0,0,0,0.3); cursor: pointer; transition: 0.3s; } .indicator.active { background-color: #333; transform: scale(1.2); } /* !j`Fh7h_ */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.7); } .modal-content { background-color: #e0dcd8; /* b #fff �9hnc�`�v�S�Y��n */ position: fixed !important; /* :_6R�V�[�[MO */ left: 50% !important; /* :_6R4ls^E\-N */ top: 50% !important; /* :_6R�W�vE\-N */ transform: translate(-50%, -50%) !important; /* :_6RMO�y */ padding: 30px; border-radius: 10px; width: 80%; /* nx�OhQ@\�[�^X[(W */ overflow-y: auto; /* nx�OAQ���n�R */ box-shadow: 0 5px 15px rgba(0,0,0,0.3); } /* �y�R�z{��w9_�z�e,g'Y\�te */ @media (max-width: 768px) { /* �y�R�z!j`Fh�te - @b g9_�z */ .modal-content { width: 85%; max-width: 350px; padding: 15px; transform: translate(-50%, -55%); /* N�y5% */ border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); } /* aSGr9_�z�Q�[�te */ #modal-rolling .modal-content, #modal-standard .modal-content, #modal-advanced .modal-content, #modal-cars-basic .modal-content, #modal-cars-standard .modal-content, #modal-cars-advanced .modal-content, #modal-motorcycles .modal-content, #modal-business .modal-content, #modal-follow .modal-content { max-height: 70vh; height: auto !important; /* ���vLhb��z�v�V�[ؚ�^ */ display: block !important; /* ���vLhb��z�v flex ^@\ */ } /* {��w9_�zyr�k�te */ #modal-terms .modal-content { max-width: 350px; max-height: 92vh; /* �X�R�y�R�zg'Yؚ�^ */ } .modal-title { font-size: 1.2rem; margin-bottom: 10px; } .modal-text { font-size: 0.8rem; margin-bottom: 10px; } .modal-body li { font-size: 0.8rem; margin-bottom: 3px; } /* �y�R�z�ʑCg�e,gyr�k7h_ */ #modal-terms .modal-footer { position: absolute; /* O(u�~�[�[MO */ bottom: 0; left: 0; width: 100%; padding: 5px 0; margin: 0; background-color: white; border-top: 1px solid #ddd; z-index: 10; height: 30px; /* �V�[ؚ�^ */ display: flex; align-items: center; justify-content: center; } #modal-terms .disclaimer-text { font-size: 0.5rem; /* z�_�X'YW[SO�Nnx�O�S�� */ white-space: nowrap; /* nx�O(WNL��Q>f:y */ overflow: hidden; text-overflow: ellipsis; /* �Y�g�e,gǏ� �>f:yweu�S */ margin: 0; padding: 0; opacity: 0.75; /* �Oc�f�^N� */ width: 90%; /* �c6R�[�^ */ text-align: center; /* E\-N�[P� */ } } /* {��w9_�zyr�k7h_ */ #modal-terms .modal-content { width: 900px !important; /* �V�[�[�^ */ height: 700px !important; /* �X�Rؚ�^�N�[�~@b g�Q�[ */ max-width: none !important; /* �yd�g'Y�[�^P�6R */ max-height: none !important; /* �yd�g'Yؚ�^P�6R */ border-radius: 10px !important; /* �~NW҉ */ } /* {��w9_�z�Q�[7h_ */ #modal-terms .modal-body { padding: 15px; text-align: left !important; /* �Q�[`��]�[P� */ overflow: hidden !important; /* ��υ�n�Rag */ height: auto !important; /* ꁨRؚ�^ */ } #modal-terms .modal-body h4 { margin: 15px 0 10px; font-size: 1.2rem; text-align: left !important; /* h��`��]�[P� */ } #modal-terms .modal-body p, #modal-terms .modal-body ul li { font-size: 0.8rem !important; /* �Q\ck�e�e,gW[SO */ line-height: 1.5; text-align: left !important; /* `��]�[P� */ margin: 5px 0; } #modal-terms .modal-body ul { text-align: left !important; /* `��]�[P� */ padding-left: 20px; margin: 8px 0; } #modal-terms .disclaimer-text { font-size: 0.7rem; text-align: center; font-style: italic; opacity: 0.75; /* M�NO25%�f�^ */ width: 100%; margin: 0; padding: 0; } /* �y�R�z{��w9_�z�e,g'Y\�TYu}v�te - ُ�R�Oc N�S */ @media (max-width: 768px) { #modal-terms .modal-body { overflow-y: visible !important; /* nx�O�Q�[�S�� */ } } /* �y�R�z{��w9_�z�e,g'Y\�TYu}v�te */ @media (max-width: 768px) { #modal-terms .modal-body { overflow-y: visible !important; /* nx�O�Q�[�S�� */ } } /* Desktop Card Modal Body Sizing & Scrolling */ @media (min-width: 769px) { /* Target desktop only */ /* Set fixed dimensions for modal content */ #modal-rolling .modal-content, #modal-standard .modal-content, #modal-advanced .modal-content, #modal-cars-basic .modal-content, #modal-cars-standard .modal-content, #modal-cars-advanced .modal-content, #modal-motorcycles .modal-content, #modal-business .modal-content, #modal-follow .modal-content, #modal-basic .modal-content, #modal-motorcycle .modal-content { width: 650px !important; /* �V�[�[�^:N650px */ height: 650px !important; /* �V�[ؚ�^:N650px */ display: flex !important; /* nx�Oflex^@\ */ flex-direction: column !important;/* nx�OR�eT */ left: 50% !important; /* 4ls^E\-N */ top: 50% !important; /* �W�vE\-N */ transform: translate(-50%, -50%) !important; /* �|nxE\-N */ position: fixed !important; /* �V�[�[MO */ margin: 0 !important; /* �yd��S���vY��ݍ */ padding: 0 !important; /* �yd��Q��ݍ �g'YS�Q�[:S�W */ border-radius: 10px !important; /* �~NW҉ */ background-color: #e0dcd8 !important; /* �~Ǹofr� */ box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important; /* �~N4�q_ */ /* ͑n�S��q_�T:\�[�v^\'` */ max-width: none !important; max-height: none !important; min-width: 650px !important; min-height: 650px !important; } /* Adjust modal body for scrolling within fixed height */ #modal-rolling .modal-body, #modal-standard .modal-body, #modal-advanced .modal-body, #modal-cars-basic .modal-body, #modal-cars-standard .modal-body, #modal-cars-advanced .modal-body, #modal-motorcycles .modal-body, #modal-business .modal-body, #modal-follow .modal-body, #modal-basic .modal-body, #modal-motorcycle .modal-body { overflow-y: auto !important; /* /T(u�W�v�n�R */ flex-grow: 1 !important; /* ꁨRkXEQ�S(uzz�� */ padding: 20px !important; /* :N�Q�[:S�W�m�R�Q��ݍ */ padding-bottom: 80px !important; /* �N60px�X�R0R80px �nx�O�^� g��Yzz�� N���f'Y�vu��n�!c */ } } /* �y�R�z{��w9_�z�e,g'Y\�TYu}v�te */ @media (max-width: 768px) { #modal-terms .modal-body h4 { margin: 6px 0 4px !important; /* ۏNek�Q\\h�� N NYu}v */ font-size: 0.9rem !important; /* )\\h��W[SO */ } #modal-terms .modal-body p, #modal-terms .modal-body ul li { font-size: 0.6rem !important; /* ۏNek)\{��w9_�z�e,g'Y\ */ line-height: 1.3 !important; /* �Q\L�ؚ */ margin: 2px 0 !important; /* �Q\�k=���ݍ */ padding: 0 !important; /* �yd��Q��ݍ */ } #modal-terms .modal-body ul { padding-left: 8px !important; /* ۏNek�Q\Rh�)ۏ */ margin: 3px 0 !important; /* �Q\Rh� N NYu}v */ } #modal-terms .modal-title { margin-bottom: 3px !important; /* 'YE^�Q\h�� N�eYu}v */ } /* �te{��w9_�z'Y\ */ #modal-terms .modal-content { width: 92% !important; /* z�_�X�R�[�^ */ max-width: 420px !important; /* z�_�X�Rg'Y�[�^ */ padding: 12px !important; /* z�_�X�R�Q��ݍ */ padding-bottom: 50px !important; /* �N35px�X�R0R50px �:N�f'Y�v/e�N�VhYu�Q��Y�vzz�� */ } #modal-terms .modal-body { overflow-y: auto !important; /* b` Y�n�R */ padding: 5px 2px !important; /* �Q\�]�S�Q��ݍ */ margin-bottom: 30px !important; /* :N�^�:S�WYu�Qzz�� */ } #modal-terms .modal-body h4 { margin: 6px 0 4px !important; /* ۏNek�Q\\h�� N NYu}v */ font-size: 0.9rem !important; /* )\\h��W[SO */ } #modal-terms .modal-body p, #modal-terms .modal-body ul li { font-size: 0.75rem !important; /* �te:N0.75rem */ line-height: 1.35 !important; /* �S_�X�RL�ؚ */ margin: 2px 0 !important; /* �Oc��\�v�k=���ݍ */ padding: 0 !important; /* �yd��Q��ݍ */ } #modal-terms .modal-body ul { padding-left: 10px !important; /* z�_�X�RRh�)ۏ */ margin: 3px 0 !important; /* �OcRh� N NYu}v */ } #modal-terms .modal-title { margin-bottom: 5px !important; /* z�_�X�Rh�� N�eYu}v */ font-size: 1.25rem !important; /* z�_�X'Yh��W[SO */ } /* �te�^��ʑCg�e,g */ #modal-terms .disclaimer-text { font-size: 0.5rem !important; /* )\�ʑCg�e,g */ white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; width: 90% !important; text-align: center !important; /* E\-N�[P� */ opacity: 0.75 !important; } /* �y�R�z{��w9_�z�^�MQ#��Xf7h_ */ #modal-terms .modal-footer { position: absolute !important; bottom: 0 !important; left: 0 !important; width: 100% !important; padding: 5px 0 !important; margin: 0 !important; background-color: white !important; border-top: 1px solid #ddd !important; z-index: 100 !important; /* nx�O(Wg NB\ */ height: 30px !important; /* �V�[ؚ�^ */ display: flex !important; align-items: center !important; justify-content: center !important; border-bottom-left-radius: 10px !important; /* N9_�zW҉9SM� */ border-bottom-right-radius: 10px !important; /* N9_�zW҉9SM� */ } } /* �~N@b g9_�zsQ� c��7h_ */ .close-modal { position: absolute; top: 10px; right: 15px; color: #333; font-size: 1.5rem; font-weight: bold; cursor: pointer; transition: all 0.3s ease; } .close-modal:hover { color: #000; transform: scale(1.1); } /* {��w9_�z�^�MQ#��Xf7h_ */ .disclaimer-text { font-size: 0.7rem; text-align: center; font-style: italic; opacity: 0.75; /* M�NO25%�f�^ */ width: 100%; margin: 0; padding: 0; } .modal-title { font-size: 1.5rem; margin-bottom: 20px; font-weight: 600; text-align: center; margin-top: 0; /* nx�Ov�萹�ݍN� */ } .modal-text { margin-top: 0; /* Explicitly remove default top margin */ margin-bottom: 15px; line-height: 1.5; text-align: center; } /* !j`Fh�Q�[7h_ */ .modal-body h4 { font-family: 'Montserrat', sans-serif; font-size: 1.2rem; margin: 15px 0 10px; font-weight: 600; text-align: left; /* {��w9_�z\h��`��] */ } .modal-body ul { list-style-type: none; /* Rd�aSGr9_�z�Q�e,g�]���v�S�p */ margin-left: 0; /* �yd��]��ݍ */ margin-bottom: 15px; text-align: center; } .modal-body li { font-family: 'Montserrat', sans-serif; margin-bottom: 5px; font-size: 0.9rem; line-height: 1.4; } /* {��w9_�zyr�k7h_ */ #modal-terms .modal-content { max-width: 700px; /* {��w9_�z�f�[ */ position: relative; /* nx�O�v�[�[MOck8^�]\O */ padding-bottom: 50px; /* :N�^�:S�WYu�Qzz�� */ } #modal-terms .modal-body { overflow-y: auto; /* �n�Rag */ margin-bottom: 10px; padding-bottom: 5px; } #modal-terms .modal-title { text-align: left !important; /* {��w9_�zh��`��] */ } #modal-terms .modal-body p, #modal-terms .modal-body ul li { font-size: 0.75rem; /* )\{��w9_�z�e,g'Y\ */ line-height: 1.4; text-align: left !important; /* {��w9_�z�Q�e,g`��]�[P� */ } #modal-terms .modal-body ul { text-align: left !important; /* {��w9_�zRh�`��]�[P� */ } /* {��w9_�z�^�:S�W */ .modal-footer { border-top: 1px solid #ddd; padding-top: 10px; margin-top: 5px; text-align: center; position: absolute; bottom: 0; left: 0; width: 100%; background-color: white; /* nx�Òofr�N!j`FhN� */ padding-bottom: 10px; } /* {��w9_�z�^�MQ#��Xf7h_ */ .disclaimer-text { font-size: 0.7rem; text-align: center; font-style: italic; opacity: 0.75; /* M�NO25%�f�^ */ width: 100%; margin: 0; padding: 0; } /* CTA:S�W */ .cta-section { background-color: #e0dcd8; /* �Q�[:S�Ẁofr� */ padding: 40px 20px; text-align: center; } .cta-section p { font-size: 0.6rem; /* �N1.2rem)\NJS */ margin-bottom: 20px; font-family: 'Montserrat', sans-serif; background-image: linear-gradient(45deg, #F2D4B0, #F7E7CE, #E0BFB8, #D4AF37); background-size: 200% 200%; animation: gradientShift 3s ease infinite; -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 300; /* �~SO */ } .cta-button { display: inline-block; background-color: #b8b7b7; /* �f9e c����r� */ color: #333; padding: 12px 30px; text-decoration: none; border-radius: 30px; /* 9e:N�-iWb_ */ font-size: 1rem; transition: background-color 0.3s; width: 250%; /* �^�2.5 P */ max-width: 500px; margin: 0 auto; text-align: center; font-family: 'Montserrat', sans-serif; font-weight: 600; } .cta-button:hover { background-color: #a0a0a0; transform: translateY(-3px); } /* �y�R�zyr+ROS */ /* �y�R�zaSGrMOn͑�Q */ .card.active, .card.prev, .card.next, .card.prev-2, .card.next-2 { top: -100px !important; /* b` Y�S�Y��n */ } /* �y�R�z!j`Fh�te */ .modal-content { width: 85%; max-width: 350px; padding: 15px; transform: translate(-50%, -55%); /* N�y5% */ border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); } /* {��w9_�zNvQ�N9_�z�OcN� */ #modal-terms .modal-content { max-width: 350px; max-height: 92vh; /* �X�R�y�R�zg'Yؚ�^ */ } .modal-title { font-size: 1.2rem; /* �y�R�zh���eW[)\ */ margin-bottom: 15px; } .modal-text { font-size: 0.85rem; /* �y�R�z�e,g)\ */ } .modal-body li { font-size: 0.85rem; /* �y�R�zRh�y��e,g)\ */ } /* nx�O�y�R�zu��>f:y */ .footer { display: block; width: 100%; position: fixed; /* 9e:Nfixed�V�[�[MO */ bottom: 0; left: 0; z-index: 100; /* nx�O(WvQ�N�Q�[ N�e */ } .cta-button { width: 100%; /* �y�R�z c���[�^�te */ max-width: 300px; } /* nx�O�y�R�z�e���e,g'Y\ */ /* �y�R�zh��'Y\�te */ .header h1 { font-size: 1.3rem; /* ۏNek)\;Nh��'Y\ */ letter-spacing: 1px; } .header h2 { font-size: 0.8rem; /* ۏNek)\oRh��'Y\ */ } /* �y�R�zCTA:S�W�e,g�te */ .cta-section p { font-size: 0.35rem !important; /* )\�e,g'Y\:N0.7rem�vNJS */ margin-bottom: 8px !important; /* �te��ݍ */ } /* �ZSO�g� - \�W�y�R��Y */ @media (max-width: 480px) { .carousel-container { height: 380px; /* �Q\;`ؚ�^ */ margin-top: 20px !important; /* �Nv�萞X�R��ݍ */ padding-bottom: 40px; /* 'YE^�Q\�^萅Q��ݍ */ } /* aSGrMOn��n�Ǐ�~N7h_�c6R */ /* .card.active, .card.prev, .card.next, .card.prev-2, .card.next-2 { top: -120px !important; } */ /* c:yhVMOn N�y */ .indicators { bottom: 40px !important; /* N�yc:yhVMOn ��Q\�^�zz�� */ } .card, .card.recommended { width: 180px; height: 270px; padding: 12px; /* \�W�y�R��Yyr+ROS */ transform: translateZ(0); backface-visibility: hidden; } .card h3 { font-size: 0.9rem; margin-bottom: 8px; letter-spacing: 0.3px; } .card .time-info { margin-bottom: 6px; line-height: 1.3; letter-spacing: 0.2px; } .card .description { font-size: 0.75rem; margin-bottom: 6px; line-height: 1.3; letter-spacing: 0.2px; } .cta-button { width: 100%; /* �y�R�z c���[�^�te */ max-width: 250px; font-size: 0.9rem; padding: 10px 20px; } } /* �[*� c�� - >e(WaSGrY�O */ .nav-btn { position: absolute; top: 160px; /* �te�[*� c��MOn �T N�y�R15px */ width: 40px; height: 40px; background: rgba(255, 255, 255, 0.5); border: none; border-radius: 50%; color: #333; font-size: 1.5rem; cursor: pointer; z-index: 20; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; box-shadow: 0 0 5px rgba(0,0,0,0.2); } .prev-btn { left: 5%; /* >e(WaSGr�~�]�O */ } .next-btn { right: 5%; /* >e(WaSGr�~�S�O */ } /* c:yhV - E\-N>en */ .indicators { position: absolute; bottom: 60px; /* �Q\c:yhVݍ�^�ݍ�y */ left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10; padding: 10px 15px; background: transparent; /* �yd�̀ofr� */ } .indicator { width: 8px; /* �Q\c:yhV'Y\ */ height: 8px; margin: 0 4px; border-radius: 50%; background-color: rgba(0,0,0,0.3); cursor: pointer; transition: 0.3s; } .indicator.active { background-color: #333; transform: scale(1.2); } /* �ZSO�g� - �y�R��Y */ @media (max-width: 768px) { .carousel-container { height: 350px; /* �Q\;`ؚ�^ */ margin-top: 20px !important; /* �X�Rv����ݍ */ padding-bottom: 60px; /* �Q\�^萅Q��ݍ */ } /* nx�O@b gaSGrMOnN� */ .card.active, .card.prev, .card.next, .card.prev-2, .card.next-2 { top: -100px !important; /* �~NaSGr N�yݍ�y */ } /* �y�R�zc:yhV N�y0RaSGr Nb� */ .indicators { bottom: 50px !important; /* N�y20px ��N70px9e:N50px */ background: transparent !important; padding: 8px 12px !important; z-index: 30 !important; /* nx�O(WaSGr N�e */ } /* �y�R�zc:yhV7h_�te */ .indicator { width: 8px !important; /* �Q\c:yhV'Y\ */ height: 8px !important; margin: 0 4px !important; } /* �y�R�z�[*� c��MOn�te - N�y0RaSGr-N�~$N�� */ .nav-btn { top: 150px !important; /* N�y10px ��N160px9e:N150px */ width: 30px !important; /* �Q\ c��'Y\ */ height: 30px !important; font-size: 1.2rem !important; } /* �te�]�S c���v4ls^MOn */ .prev-btn { left: 10px !important; /* `�я�]�� */ } .next-btn { right: 10px !important; /* `�я�S�� */ } } /* u�� */ .footer { background-color: #d0ccc8; /* Nu�b�̀ofr�#e0dcd8�v TFOeu�_�R�m */ color: #333; text-align: center; padding: 8px 20px; position: fixed; /* �Oc�V�[�[MO */ bottom: 0; left: 0; width: 100%; font-size: 0.6rem; /* �f\�vW[SO'Y\ */ z-index: 100; line-height: 1.3; } .footer p { margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; opacity: 0.25; /* �m�R25%�v N�f�^ */ } /* :Nu���m�R�^���ݍ �2�bk�Q�[��u�����v */ body { margin-bottom: 50px; /* nx�Ou�b��^� g��Yzz�� � N��u��n�!c */ } /* aSGr�`\PHe�g */ .card:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.2); transition: all 0.3s ease; } /* S_MRaSGr�`\PHe�g */ .card.active:hover { transform: translateX(-50%) scale(1.15); box-shadow: 0 20px 40px rgba(0,0,0,0.4); } /* �]�SaSGr�`\PHe�g */ .card.prev:hover, .card.next:hover { opacity: 0.9; box-shadow: 0 15px 30px rgba(0,0,0,0.3); } /* u�b�h�� */ .page-title { position: relative; color: #333; text-align: center; margin: 30px 0; font-size: 2rem; font-weight: 900; font-family: 'Montserrat', sans-serif; letter-spacing: 0.5px; /* �Q\W[�k��ݍ */ -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(45deg, #F2D4B0, #F7E7CE, #E0BFB8, #D4AF37); background-size: 200% 200%; animation: gradientShift 3s ease infinite; color: transparent; padding: 10px 0; -webkit-text-stroke: 0.5px rgba(0,0,0,0.3); /* �m�R�~�_�c�� */ text-shadow: 0px 0px 1px rgba(0,0,0,0.2); /* �m�R{��_4�q_�X:_ƉɉHe�g */ } /* u�b�oRh�� */ .page-subtitle { text-align: center; margin-bottom: 40px; font-size: 1.2rem; font-weight: 400; font-family: 'Montserrat', sans-serif; letter-spacing: 0.5px; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(45deg, #F2D4B0, #F7E7CE, #E0BFB8, #D4AF37); background-size: 200% 200%; animation: gradientShift 3s ease infinite; color: transparent; padding: 5px 0; -webkit-text-stroke: 0.25px rgba(0,0,0,0.2); text-shadow: 0px 0px 1px rgba(0,0,0,0.1); } /* aSGr�`\PHe�g - �O Y3D�Sbc */ .card:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.2); transition: all 0.3s ease; } /* S_MRaSGr�`\PHe�g - �OcMOn */ .card.active:hover { transform: translateX(-50%) scale(1.15); box-shadow: 0 20px 40px rgba(0,0,0,0.4); } /* �]�OaSGr�`\PHe�g - �Oc3D�el� */ .card.prev:hover { transform: translateX(-120%) scale(0.95) rotateY(10deg); opacity: 0.9; box-shadow: -8px 8px 20px rgba(0,0,0,0.3); } /* �S�OaSGr�`\PHe�g - �Oc3D�el� */ .card.next:hover { transform: translateX(20%) scale(0.95) rotateY(-10deg); opacity: 0.9; box-shadow: 8px 8px 20px rgba(0,0,0,0.3); } /* {��w9_�zyr�k�te */ #modal-terms .modal-content { width: 90%; max-width: 420px; /* �X'Yg'Y�[�^ */ height: auto !important; /* ���v5u��z�V�[ؚ�^ */ max-height: 92vh !important; /* �X�R�y�R�zg'Yؚ�^ */ padding: 12px !important; /* �Q��ݍ */ padding-bottom: 50px !important; /* �N35px�X�R0R50px �:N�f'Y�v/e�N�VhYu�Q��Y�vzz�� */ } /* �y�R�z{��w9_�z�e,g'Y\�TYu}v�te */ @media (max-width: 768px) { #modal-terms .modal-body h4 { margin: 6px 0 4px !important; /* ۏNek�Q\\h�� N NYu}v */ font-size: 0.9rem !important; /* )\\h��W[SO */ } #modal-terms .modal-body p, #modal-terms .modal-body ul li { font-size: 0.6rem !important; /* ۏNek)\{��w9_�z�e,g'Y\ */ line-height: 1.3 !important; /* �Q\L�ؚ */ margin: 2px 0 !important; /* �Q\�k=���ݍ */ padding: 0 !important; /* �yd��Q��ݍ */ } #modal-terms .modal-body ul { padding-left: 8px !important; /* ۏNek�Q\Rh�)ۏ */ margin: 3px 0 !important; /* �Q\Rh� N NYu}v */ } #modal-terms .modal-title { margin-bottom: 3px !important; /* 'YE^�Q\h�� N�eYu}v */ } /* �te{��w9_�z'Y\ */ #modal-terms .modal-content { width: 92% !important; /* z�_�X�R�[�^ */ max-width: 420px !important; /* z�_�X�Rg'Y�[�^ */ padding: 12px !important; /* z�_�X�R�Q��ݍ */ padding-bottom: 50px !important; /* �N35px�X�R0R50px �:N�f'Y�v/e�N�VhYu�Q��Y�vzz�� */ } #modal-terms .modal-body { overflow-y: auto !important; /* b` Y�n�R */ padding: 5px 2px !important; /* �Q\�]�S�Q��ݍ */ margin-bottom: 30px !important; /* :N�^�:S�WYu�Qzz�� */ } #modal-terms .modal-body h4 { margin: 6px 0 4px !important; /* ۏNek�Q\\h�� N NYu}v */ font-size: 0.9rem !important; /* )\\h��W[SO */ } #modal-terms .modal-body p, #modal-terms .modal-body ul li { font-size: 0.75rem !important; /* �te:N0.75rem */ line-height: 1.35 !important; /* �S_�X�RL�ؚ */ margin: 2px 0 !important; /* �Oc��\�v�k=���ݍ */ padding: 0 !important; /* �yd��Q��ݍ */ } #modal-terms .modal-body ul { padding-left: 10px !important; /* z�_�X�RRh�)ۏ */ margin: 3px 0 !important; /* �OcRh� N NYu}v */ } #modal-terms .modal-title { margin-bottom: 5px !important; /* z�_�X�Rh�� N�eYu}v */ font-size: 1.25rem !important; /* z�_�X'Yh��W[SO */ } /* �te�^��ʑCg�e,g */ #modal-terms .disclaimer-text { font-size: 0.5rem !important; /* )\�ʑCg�e,g */ white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; width: 90% !important; text-align: center !important; /* E\-N�[P� */ opacity: 0.75 !important; } /* �y�R�z{��w9_�z�^�MQ#��Xf7h_ */ #modal-terms .modal-footer { position: absolute !important; bottom: 0 !important; left: 0 !important; width: 100% !important; padding: 5px 0 !important; margin: 0 !important; background-color: white !important; border-top: 1px solid #ddd !important; z-index: 100 !important; /* nx�O(Wg NB\ */ height: 30px !important; /* �V�[ؚ�^ */ display: flex !important; align-items: center !important; justify-content: center !important; border-bottom-left-radius: 10px !important; /* N9_�zW҉9SM� */ border-bottom-right-radius: 10px !important; /* N9_�zW҉9SM� */ } } /* �~N@b g9_�zsQ� c��7h_ */ .close-modal { position: absolute; top: 10px; right: 15px; color: #333; font-size: 1.5rem; font-weight: bold; cursor: pointer; transition: all 0.3s ease; } .close-modal:hover { color: #000; transform: scale(1.1); } /* {��w9_�z�^�MQ#��Xf7h_ */ .disclaimer-text { font-size: 0.7rem; text-align: center; font-style: italic; opacity: 0.75; /* M�NO25%�f�^ */ width: 100%; margin: 0; padding: 0; } .modal-title { font-size: 1.5rem; margin-bottom: 20px; font-weight: 600; text-align: center; } .modal-text { margin-bottom: 15px; line-height: 1.5; text-align: center; } /* !j`Fh�Q�[7h_ */ .modal-body h4 { font-family: 'Montserrat', sans-serif; font-size: 1.2rem; margin: 15px 0 10px; font-weight: 600; text-align: left; /* {��w9_�z\h��`��] */ } .modal-body ul { list-style-type: none; /* Rd�aSGr9_�z�Q�e,g�]���v�S�p */ margin-left: 0; /* �yd��]��ݍ */ margin-bottom: 15px; text-align: center; } .modal-body li { font-family: 'Montserrat', sans-serif; margin-bottom: 5px; font-size: 0.9rem; line-height: 1.4; } /* {��w9_�zyr�k7h_ */ #modal-terms .modal-content { max-width: 700px; /* {��w9_�z�f�[ */ position: relative; /* nx�O�v�[�[MOck8^�]\O */ padding-bottom: 50px; /* :N�^�:S�WYu�Qzz�� */ } #modal-terms .modal-body { overflow-y: auto; /* �n�Rag */ margin-bottom: 10px; padding-bottom: 5px; } #modal-terms .modal-title { text-align: left !important; /* {��w9_�zh��`��] */ } #modal-terms .modal-body p, #modal-terms .modal-body ul li { font-size: 0.75rem; /* )\{��w9_�z�e,g'Y\ */ line-height: 1.4; text-align: left !important; /* {��w9_�z�Q�e,g`��]�[P� */ } #modal-terms .modal-body ul { text-align: left !important; /* {��w9_�zRh�`��]�[P� */ } /* {��w9_�z�^�:S�W */ .modal-footer { border-top: 1px solid #ddd; padding-top: 10px; margin-top: 5px; text-align: center; position: absolute; bottom: 0; left: 0; width: 100%; background-color: white; /* nx�Òofr�N!j`FhN� */ padding-bottom: 10px; } /* {��w9_�z�^�MQ#��Xf7h_ */ .disclaimer-text { font-size: 0.7rem; text-align: center; font-style: italic; opacity: 0.75; /* M�NO25%�f�^ */ width: 100%; margin: 0; padding: 0; } /* CTA:S�W */ .cta-section { background-color: #e0dcd8; /* �Q�[:S�Ẁofr� */ padding: 40px 20px; text-align: center; } .cta-section p { font-size: 0.6rem; /* �N1.2rem)\NJS */ margin-bottom: 20px; font-family: 'Montserrat', sans-serif; background-image: linear-gradient(45deg, #F2D4B0, #F7E7CE, #E0BFB8, #D4AF37); background-size: 200% 200%; animation: gradientShift 3s ease infinite; -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 300; /* �~SO */ } .cta-button { display: inline-block; background-color: #b8b7b7; /* �f9e c����r� */ color: #333; padding: 12px 30px; text-decoration: none; border-radius: 30px; /* 9e:N�-iWb_ */ font-size: 1rem; transition: background-color 0.3s; width: 250%; /* �^�2.5 P */ max-width: 500px; margin: 0 auto; text-align: center; font-family: 'Montserrat', sans-serif; font-weight: 600; } .cta-button:hover { background-color: #a0a0a0; transform: translateY(-3px); } /* �ZSO�g� - �y�R��Y */ @media (max-width: 768px) { .carousel-container { height: 400px; margin: 0 auto !important; /* Remove top/bottom margin to fill parent */ padding-bottom: 120px; /* �X�R�^萅Q��ݍ */ } .card, .card.recommended { width: 200px; height: 300px; padding: 15px; /* �y�R�zyr+ROS */ transform: translateZ(0); backface-visibility: hidden; } /* �y�R�zaSGrMOn͑�Q */ .card.active, .card.prev, .card.next, .card.prev-2, .card.next-2 { top: -180px !important; /* ۏNekT N�y�RaSGr */ } /* �y�R�z!j`Fh�te */ .modal-content { width: 85%; max-width: 350px; padding: 15px; transform: translate(-50%, -55%); /* N�y5% */ border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); } /* {��w9_�zNvQ�N9_�z�OcN� */ #modal-terms .modal-content { max-width: 350px; max-height: 92vh; /* �X�R�y�R�zg'Yؚ�^ */ } .modal-title { font-size: 1.2rem; /* �y�R�zh���eW[)\ */ margin-bottom: 15px; } .modal-text { font-size: 0.85rem; /* �y�R�z�e,g)\ */ } .modal-body li { font-size: 0.85rem; /* �y�R�zRh�y��e,g)\ */ } /* nx�O�y�R�zu��>f:y */ .footer { display: block; width: 100%; position: fixed; /* 9e:Nfixed�V�[�[MO */ bottom: 0; left: 0; z-index: 100; /* nx�O(WvQ�N�Q�[ N�e */ } .cta-button { width: 100%; /* �y�R�z c���[�^�te */ max-width: 300px; } /* nx�O�y�R�z�e���e,g'Y\ */ /* �y�R�zh��'Y\�te */ .header h1 { font-size: 1.3rem; /* ۏNek)\;Nh��'Y\ */ letter-spacing: 1px; } .header h2 { font-size: 0.8rem; /* ۏNek)\oRh��'Y\ */ } /* �y�R�zCTA:S�W�e,g�te */ .cta-section p { font-size: 0.35rem !important; /* )\�e,g'Y\:N0.7rem�vNJS */ margin-bottom: 8px !important; /* �te��ݍ */ } } /* �ZSO�g� - \�W�y�R��Y */ @media (max-width: 480px) { .carousel-container { height: 520px; margin: 0 auto !important; /* Remove top/bottom margin to fill parent */ padding-bottom: 120px; /* �X�R�^萅Q��ݍ */ } .card, .card.recommended { width: 180px; height: 270px; padding: 12px; /* \�W�y�R��Yyr+ROS */ transform: translateZ(0); backface-visibility: hidden; } .card h3 { font-size: 0.9rem; margin-bottom: 8px; letter-spacing: 0.3px; } .card .time-info { margin-bottom: 6px; line-height: 1.3; letter-spacing: 0.2px; } .card .description { font-size: 0.75rem; margin-bottom: 6px; line-height: 1.3; letter-spacing: 0.2px; } .cta-button { width: 100%; /* �y�R�z c���[�^�te */ max-width: 250px; font-size: 0.9rem; padding: 10px 20px; } } /* �[*� c�� - >e(WaSGrY�O */ .nav-btn { position: absolute; top: 160px; /* �te�[*� c��MOn �T N�y�R15px */ width: 40px; height: 40px; background: rgba(255, 255, 255, 0.5); border: none; border-radius: 50%; color: #333; font-size: 1.5rem; cursor: pointer; z-index: 20; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; box-shadow: 0 0 5px rgba(0,0,0,0.2); } .prev-btn { left: 5%; /* >e(WaSGr�~�]�O */ } .next-btn { right: 5%; /* >e(WaSGr�~�S�O */ } /* c:yhV - E\-N>en */ .indicators { position: absolute; bottom: -35px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10; padding: 10px 15px; background: transparent; /* �yd�̀ofr� */ } .indicator { width: 12px; height: 12px; border-radius: 50%; background-color: rgba(0,0,0,0.3); cursor: pointer; transition: 0.3s; } .indicator.active { background-color: #333; transform: scale(1.2); } /* �ZSO�g� - �y�R��Y */ @media (max-width: 768px) { .carousel-container { height: 380px; margin-top: -70px !important; /* �X�R���ݍ �O�[hVۏNekT N�y�R */ margin-bottom: -20px; /* �Q\�^萹�ݍ */ padding-bottom: 100px; /* �Q\�^萅Q��ݍ */ } /* nx�O@b gaSGrMOnN� */ .card.active, .card.prev, .card.next, .card.prev-2, .card.next-2 { top: -180px !important; /* ۏNekT N�y�RaSGr */ } /* �y�R�zc:yhV N�y0RaSGr Nb� */ .indicators { bottom: 110px !important; /* N�yc:yhVMOn */ background: transparent !important; padding: 8px 12px !important; z-index: 30 !important; /* nx�O(WaSGr N�e */ } /* �y�R�zc:yhV7h_�te */ .indicator { width: 8px !important; /* �Q\c:yhV'Y\ */ height: 8px !important; margin: 0 4px !important; } /* �y�R�z�[*� c��MOn�te - N�y0RaSGr-N�~$N�� */ .nav-btn { top: 150px !important; /* N�y10px ��N160px9e:N150px */ width: 30px !important; /* �Q\ c��'Y\ */ height: 30px !important; font-size: 1.2rem !important; } /* �te�]�S c���v4ls^MOn */ .prev-btn { left: 10px !important; /* `�я�]�� */ } .next-btn { right: 10px !important; /* `�я�S�� */ } } /* �y�R�z�ZSO�g� (768px �S�N N) */ @media (max-width: 768px) { /* �[hV�te */ .carousel-container { height: 300px; /* �Q\ؚ�^ */ margin-top: 0 !important; /* T N�y�R */ margin-bottom: -20px; /* �Q\ NY��ݍ */ padding-bottom: 100px; /* �Q\ N�Q��ݍ */ /* �yd� margin: 0 auto; */ } /* aSGrMOn */ .card.active, .card.prev, .card.next, .card.prev-2, .card.next-2 { top: -180px !important; /* ۏNekT N�y�RaSGr */ } /* �cP�aSGr(W�y�R�z�vMOn_N��N� */ .card.recommended.active, .card.recommended.prev, .card.recommended.next, .card.recommended.prev-2, .card.recommended.next-2 { top: -180px !important; } /* �cP�aSGr�v҉h�te */ .card.recommended::before { content: "OHQ�cP�"; font-size: 0.5rem; padding: 2px 32px; top: 8px; left: -35px; transform: rotate(-45deg); } /* c:yhV�te */ .indicators { bottom: 110px !important; /* N�yc:yhVMOn */ background: transparent !important; padding: 8px 12px !important; z-index: 30 !important; /* nx�O(WaSGr N�e */ } .indicator { width: 8px !important; /* �Q\c:yhV'Y\ */ height: 8px !important; } /* �[*� c���te */ .nav-btn { width: 30px; height: 30px; font-size: 1.2rem; top: calc(50% - 15px - 180px); /* �te�W�vMOn�N9SM�aSGr N�y */ } .prev-btn { left: 2%; } .next-btn { right: 2%; } } /* :_6R@b gaSGrؚ�^N� */ @media (max-width: 768px) { .card, .card.recommended { height: 270px !important; /* �V�[aSGrؚ�^ */ } .card.recommended, .card:not(.recommended) { top: -20px !important; /* :_6R�~N N�yݍ�y */ } } @media (max-width: 480px) { .card, .card.recommended { height: 270px !important; /* �V�[aSGrؚ�^ */ } .card.recommended, .card:not(.recommended) { top: -10px !important; /* :_6R�~N N�yݍ�y */ } } /* --- Styles for NEW Static Card Section --- */ .static-card-row { display: flex; /* Enable Flexbox */ justify-content: center; /* Center cards horizontally */ align-items: stretch; /* Make cards same height if content differs */ flex-wrap: wrap; /* Allow wrapping on smaller screens */ gap: 30px; /* Spacing between cards */ max-width: 1000px; /* Limit the row width (adjust as needed) */ margin: 0 auto; /* Center the row itself */ padding: 20px 15px; /* Add some padding around the row */ } .static-info-card { background-color: #e0dcd8; /* Match automotive card background */ border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); padding: 25px; text-align: center; flex: 1 1 280px; /* Allow cards to grow/shrink, base width 280px */ max-width: 300px; /* Limit card max width */ min-height: 180px; /* Make it shorter (rectangular) */ display: flex; flex-direction: column; justify-content: center; /* Center content vertically */ align-items: center; /* NO transition or transform needed for static cards */ /* Ensure it's above potential background elements if needed */ z-index: 1; position: relative; /* Needed if using z-index */ } .static-info-card h3 { font-size: 1.2rem; font-weight: 600; color: #333; margin-bottom: 15px; } .static-info-card p { font-size: 0.95rem; color: #555; line-height: 1.5; margin: 0; } /* --- END Styles for Static Card Section --- */ </style> <!-- ��Y�v7h_�te --> <style> /* 5u��z/e�N�Vh:\�[�TMOn - nx�Ock8^'Y\NE\-N(W�^� */ .modal-payment-footer { position: absolute; bottom: 0 !important; /* '}4��^� */ left: 0; width: 100%; padding: 0 !important; margin: 0 !important; text-align: center; background-color: transparent; } /* /e�N�Vh:\�[ */ .modal-payment-footer img, .modal .modal-payment-footer img, .modal-dialog .modal-content .modal-payment-footer img { height: auto !important; /* ؚ�^ꁨR ��Oc�VGr�k�O */ width: 100% !important; /* �[�^kX�n�[hV */ max-width: 100% !important; /* nx�O(W\O\U^ N NO�n�Q */ margin: 0 !important; /* �yd�Y��ݍ */ padding: 0 !important; /* �yd��Q��ݍ */ display: block !important; /* nx�O>f:y:NWW�~CQ } */ border-bottom-left-radius: 10px !important; /* N9_�z��҉9SM� */ border-bottom-right-radius: 10px !important; /* N9_�z��҉9SM� */ } /* �y�R�z/e�N�Vh�te */ @media (max-width: 768px) { .modal-payment-footer { bottom: 0 !important; } .modal-payment-footer img, .modal .modal-payment-footer img, .modal-dialog .modal-content .modal-payment-footer img { height: auto !important; /* ꁨRؚ�^ */ width: 100% !important; /* `S�n�[�^ */ } } </style> <script> document.addEventListener('DOMContentLoaded', function() { // ���S@b gaSGr const cards = document.querySelectorAll('.card'); // :N�k*NaSGr�m�R�p�Q�N�N cards.forEach(function(card, index) { card.addEventListener('click', function() { // ���SS_MR�o;m�vaSGr"}_ let activeIndex = -1; cards.forEach(function(c, i) { if (c.classList.contains('active')) { activeIndex = i; } }); // �Y�g�p�Q�v N/fS_MR�o;m�vaSGr if (index !== activeIndex) { // ���{����y�R�vekpe const stepsToMove = index - activeIndex; const moveDirection = stepsToMove > 0 ? 'next' : 'prev'; const steps = Math.abs(stepsToMove); // cz��^gbL��R;u let currentStep = 0; const stepInterval = 250; // �kek�v�e��������k�y � function moveOneStep() { if (currentStep < steps) { // ��S NNekb NNek c���p�Q if (moveDirection === 'next') { document.querySelector('.next-btn').click(); } else { document.querySelector('.prev-btn').click(); } currentStep++; setTimeout(moveOneStep, stepInterval); } } // _�YgbL��R;u moveOneStep(); } }); }); }); </script> <!-- OS�W@x�T:gf�aSGr7h_ - �OcNvQ�NaSGrN� --> <style> /* b` Y�S g�vyr�[9_�z7h_ */ #modal-basic .modal-content, #modal-motorcycle .modal-content, #modal-cars-advanced .modal-content, #modal-rolling .modal-content, #modal-follow .modal-content, #modal-motorcycles .modal-content, #modal-advanced .modal-content { max-width: 350px !important; max-height: calc(70vh - 20px) !important; height: auto !important; display: block !important; overflow-y: hidden !important; /* �la�b` Yُ*N�S�Y�ĉR */ } /* �X�Rte*N9_�z�Q�[v�萄v�Q��ݍ */ #modal-basic .modal-content, #modal-motorcycle .modal-content, #modal-cars-advanced .modal-content, #modal-rolling .modal-content, #modal-follow .modal-content, #modal-motorcycles .modal-content, #modal-advanced .modal-content { padding-top: 3em !important; /* �X�Rv��zz}v */ } /* ��n�k=��TRh�teSO�v N��ݍ */ #modal-basic .modal-body p, #modal-basic .modal-body ul, #modal-motorcycle .modal-body p, #modal-motorcycle .modal-body ul, #modal-cars-advanced .modal-body p, #modal-cars-advanced .modal-body ul, #modal-motorcycles .modal-body p, #modal-motorcycles .modal-body ul, #modal-rolling .modal-body p, #modal-rolling .modal-body ul, #modal-follow .modal-body p, #modal-follow .modal-body ul, #modal-advanced .modal-body p, #modal-advanced .modal-body ul { margin-bottom: 1.5em !important; } </style> <script> document.addEventListener("DOMContentLoaded", function() { // ... existing code ... }); </script> <style> /* ��nRh�y��vW[SO0L�ؚ07h_ - �^(u�N@b g9_�z */ .modal .modal-body li { font-size: 0.95rem !important; line-height: 1.5 !important; list-style-type: none !important; /* �S�cRh�y��v�p */ padding-left: 0 !important; /* �S�cRh�y��v؞���]�Q��ݍ */ margin-bottom: 0.6em !important; /* Rh�y�KN���v��ݍ */ } /* --- START: Apply Divider Lines to All Modals --- */ /* R���~ 1: �N <!-- ��HQ�m�R(u�NR���~�vCSS7h_ --> <style> /* ... existing code ... */ /* :ND��Ry��vRh�-N�vR���~�m�R7h_ */ .item-divider { height: 1px; background-color: #999; margin: 10px 0 20px 0; opacity: 0.5; } @media (max-width: 768px) { .item-divider { margin: 8px 0 15px 0; } } </style> <!-- �m�RN*N�QT�7h_ �nx�OOHQ�~gؚ --> <style> .cta-section p { font-size: 0.6rem !important; font-family: 'Montserrat', sans-serif !important; } /* �yd�@b g�ZSO�g�-N�[.cta-section pW[SO'Y\�v�[IN */ @media (max-width: 768px) { .cta-section p { margin-bottom: 8px !important; /* �yd�W[SO'Y\��n */ } } @media (max-width: 480px) { .cta-section p { margin-bottom: 8px !important; /* �yd�W[SO'Y\��n */ } } </style> <style> /* ���v@b g�s g�v.cta-section p7h_ */ .cta-section p { font-size: 1rem !important; font-family: 'Montserrat', sans-serif !important; } </style> <!-- g�~���v7h_ �nx�O@b g��Y NW[SO'Y\N� --> <style> .cta-section p { font-size: 0.8rem !important; font-family: 'Montserrat', sans-serif !important; margin-top: 10px !important; background-image: linear-gradient(45deg, #F2D4B0, #F7E7CE, #E0BFB8, #D4AF37) !important; background-size: 200% 200% !important; animation: gradientShift 3s ease infinite !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; } </style> </head> <body style="background-color: #e0dcd8;"> <!-- �[*�܃US --> <nav class="main-nav"> <div class="nav-container"> <div class="menu-toggle"> <span></span> <span></span> <span></span> </div> <div class="menu-content"> <div class="menu-items"> <a href="index.html">HOME</a> <a href="automotive.html">AUTOMOTIVE</a> <a href="portrait.html">PORTRAIT</a> <a href="pricing.html" class="active">PRICING</a> <a href="index.html#about">ABOUT</a> <a href="index.html#contact">CONTACT</a> </div> </div> </div> </nav> <style> /* �[*�܃US7h_ */ .main-nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; } .nav-container { position: relative; } .menu-toggle { position: fixed; top: 20px; right: 20px; z-index: 1001; width: 40px; height: 40px; cursor: pointer; display: flex; flex-direction: column; justify-content: space-around; padding: 10px 5px; background-color: transparent; } .menu-toggle span { display: block; width: 100%; height: 2px; background-color: grey; /* <-- �O9e��r�:Nppr� */ transition: all 0.3s; } .menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .menu-toggle.active span:nth-child(2) { opacity: 0; } .menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .menu-content { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.9); z-index: 1000; transform: translateY(-100%); transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); visibility: hidden; display: flex; justify-content: center; align-items: center; } .menu-content.active { transform: translateY(0); visibility: visible; } .menu-items { display: flex; flex-direction: column; justify-content: center; align-items: center; height: auto; width: 100%; max-width: 400px; } .menu-items a { color: white; font-family: 'Montserrat', sans-serif; font-size: 1.4rem; font-weight: 400 !important; /* <-- 9e:N 400 */ text-decoration: none; padding: 15px 0; margin: 5px 0; text-transform: uppercase; letter-spacing: 2px; position: relative; transition: transform 0.3s ease; text-align: center; width: 100%; box-sizing: border-box; } .menu-items a:hover { transform: translateY(-3px); } .menu-items a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 10px; left: 50%; transform: translateX(-50%); background-color: white; transition: width 0.3s ease; } .menu-items a:hover::after { width: 60%; left: 50%; transform: translateX(-50%); } /* 5u��z܃US7h_ */ @media screen and (min-width: 1024px) { .menu-toggle { position: fixed; top: 20px; right: 20px; width: 40px; height: 40px; z-index: 1001; } .menu-content { width: 100vw; left: 50%; transform: translateY(-100%) translateX(-50%); margin-left: 0; display: flex !important; justify-content: center !important; align-items: center !important; } .menu-content.active { transform: translateY(0) translateX(-50%); } .menu-items { margin: 0 auto; padding: 0; width: 100%; max-width: 400px; position: relative; transform: translateX(0); left: 0; right: 0; } .menu-items a { text-align: center; width: 100%; padding: 15px 0; margin: 5px 0; font-size: 1.5rem; } } /* �y�R�z܃US7h_ */ @media screen and (max-width: 767px) { .menu-content { width: 100% !important; left: 0 !important; margin-left: 0 !important; height: 100%; display: flex !important; justify-content: center !important; align-items: center !important; } .menu-items { height: auto !important; max-width: 300px !important; } .menu-items a { font-size: 1.2rem; padding: 12px 0; margin: 8px 0; } } /* �O Y��Rbc c��MOn */ .lang-switch { position: fixed; top: 20px; right: 70px; width: auto; height: 45px; display: flex; justify-content: center; align-items: center; z-index: 1000; cursor: pointer; background: transparent; border-radius: 20px; font-weight: 400; font-size: 13px; color: white; opacity: 0.85; text-decoration: none; transition: all 0.3s ease; padding: 0 12px; border: none; outline: none; font-family: 'Montserrat', sans-serif; letter-spacing: 0.8px; text-transform: uppercase; } .lang-switch:hover { transform: translateY(-3px); opacity: 1; } .lang-switch:hover .current { color: #ffffff; } .lang-switch .current { margin-right: 5px; font-weight: 500; transition: color 0.3s ease; } .lang-switch .divider { margin: 0 4px; opacity: 0.4; font-weight: 300; } .lang-switch span { position: relative; font-size: 12px; } .lang-switch span:after { content: ''; position: absolute; width: 0; height: 1px; bottom: -2px; left: 0; background-color: #ffffff; transition: width 0.3s ease; } .lang-switch:hover span:after { width: 100%; } /* �y�R�z�M� */ @media screen and (max-width: 767px) { .lang-switch { top: 23px; right: 60px; height: 35px; font-size: 10px; padding: 0 10px; letter-spacing: 0.6px; } .lang-switch span { font-size: 10px; } } </style> <!-- Rd��e�v�[*�܃USCQ } --> <script> // �yd��e�v�[*�CQ } document.addEventListener('DOMContentLoaded', () => { const oldNavToggle = document.querySelector('.nav-toggle'); const oldNavMenu = document.querySelector('.nav-menu'); if (oldNavToggle) oldNavToggle.remove(); if (oldNavMenu) oldNavMenu.remove(); // �m�R�e܃US�v�N�N;��� const menuToggle = document.querySelector('.menu-toggle'); const menuContent = document.querySelector('.menu-content'); menuToggle.addEventListener('click', () => { menuToggle.classList.toggle('active'); menuContent.classList.toggle('active'); // Yt�S��'`�r` if (!menuContent.classList.contains('active')) { setTimeout(() => { menuContent.style.visibility = 'hidden'; }, 400); // 9SM�Ǐ!nc�~�e�� } else { menuContent.style.visibility = 'visible'; } }); // �p�Q܃USy��esQ�܃US const menuItems = document.querySelectorAll('.menu-items a'); menuItems.forEach(item => { item.addEventListener('click', () => { menuToggle.classList.remove('active'); menuContent.classList.remove('active'); setTimeout(() => { menuContent.style.visibility = 'hidden'; }, 400); }); }); // \��Rbc c���y�R0R�e܃US�e�� const langSwitch = document.querySelector('.lang-switch'); if (langSwitch) { document.body.appendChild(langSwitch); } }); </script> <!-- u�b�h�� --> <header class="header"> <div class="header-container"> <h1 class="page-title" style="background-image: linear-gradient(45deg, #F2D4B0, #F7E7CE, #E0BFB8, #D4AF37); background-size: 200% 200%; animation: gradientShift 3s ease infinite; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0.5px rgba(0,0,0,0.3); text-shadow: 0px 0px 1px rgba(0,0,0,0.2);">AUTOMOBILE AND MOTORCYCLE</h1> <h2 class="page-subtitle" style="background-image: linear-gradient(45deg, #F2D4B0, #F7E7CE, #E0BFB8, #D4AF37); background-size: 200% 200%; animation: gradientShift 3s ease infinite; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0.25px rgba(0,0,0,0.2); text-shadow: 0px 0px 1px rgba(0,0,0,0.1);">PHOTOGRAPHY PRICING</h2> </div> </header> <section class="pricing-section"> <div class="container" style="background-color: #e0dcd8;"> <!-- aSGrn��d:S�W --> <div class="carousel-container" style="z-index: 5; background-color: #e0dcd8;"> <div class="carousel" style="background-color: #e0dcd8;"> <!-- �R`�bDdWY� --> <div class="card" data-modal="rolling" data-index="0" style="top: -210px !important; background-color: #e0dcd8;"> <h3>�R`�bDdWY�</h3> <div class="time-info"> <p>s^GW�bDd�e��2Hr</p> <p>s^GW�k _�O�V�5Hr</p> </div> <div class="description"> <p>N:N�S�`�bDd�R`agqGrb/fY�`N�R`R+R N T�v�bDd:Wof�v�[�N�QY</p> </div> </div> <!-- �W@x�bDdWY� --> <div class="card" data-modal="basic" data-index="1" style="top: -210px !important; background-color: #e0dcd8;"> <h3>�W@x�bDdWY�</h3> <div class="time-info"> <p>s^GW�bDd�e��2Hr</p> <p>s^GW�k _�O�V�2Hr</p> </div> <div class="description"> <p>�W@x�bDd�|�~�vgqGr�r� ��bDd�Q�[S+T1rf�hQ��Nf��QY�v�~gqGr</p> </div> </div> <!-- ؚ�~�bDdWY� --> <div class="card recommended" data-modal="advanced" data-index="2" style="top: -210px !important; background-color: #e0dcd8;"> <h3>ۏ6��bDdWY�</h3> <div class="time-info"> <p>s^GW�bDd�e��2Hr</p> <p>s^GW�k _�O�V�7Hr</p> </div> <div class="description"> <p>g�|�~�vTg�r��T�O�V �:N��Blgؚ�T(�gqGrb/f N���f��QY�~��gqGr�v�[�N�QY</p> </div> </div> <!-- :gf��bDdWY� --> <div class="card" data-modal="motorcycle" data-index="3" style="top: -210px !important; background-color: #e0dcd8;"> <h3>:gf��bDdWY�</h3> <div class="time-info"> <p>s^GW�bDd�e��1Hr</p> <p>s^GW�k _�O�V�4Hr</p> </div> <div class="description"> <p>N:N:gf��QY�v���|�~�vTg�r��O�V</p> </div> </div> <!-- ߍ�b�[6RWY� --> <div class="card" data-modal="follow" data-index="4" style="top: -210px !important; background-color: #e0dcd8;"> <h3>ߍ�b�[6RWY�</h3> <div class="time-info"> <p>�bDd�e��ꁚ[IN</p> <p>�QGr�e���ꁚ[IN</p> </div> <div class="description"> <p>hQ�eMO�[6R g�R �;N�����[���Y�y{|�W�bDdN�bDd�e������v:Wof ��Y�e�ߍ�b0;m�RI{</p> </div> </div> </div> <!-- �[*� c�� - >e(WaSGrY�O --> <div class="prev-btn nav-btn" style="background-color: #e0dcd8; top: 215px !important;">&lt;</div> <div class="next-btn nav-btn" style="background-color: #e0dcd8; top: 215px !important;">&gt;</div> <!-- c:yhV - E\-N>en --> <div class="indicators" style="background-color: transparent; padding: 5px 10px; bottom: 0px !important;"> <div class="indicator" data-index="0"></div> <div class="indicator" data-index="1"></div> <div class="indicator active" data-index="2"></div> <div class="indicator" data-index="3"></div> <div class="indicator" data-index="4"></div> </div> </div> </div> </section> <!-- 9_�z --> <!-- �R`�bDdWY�9_�z --> <div class="modal" id="modal-rolling" style="background-color: rgba(224, 220, 216, 0.8);"> <div class="modal-content" style="background-color: #e0dcd8;"> <span class="close-modal">&times;</span> <h3 class="modal-title">�R`�bDdWY���`</h3> <div class="modal-body"> <p class="modal-text"> " �R`�bDdWY�1-�220/6 _<br> " �R`�bDdWY�2-�350/9 _<br> " �R`�bDdWY�3-�450/15 _<br> </p> <p class="modal-text"><strong>D��Ry��v</strong></p> <ul> <li>�R`gqGr�bDd -$80 �k�~</li> <li>YofIQ���bDd-$25 �k _</li> <li>iQof�of�bDd-$30 �k!k</li> <li>�N�P}lf��bDd-$50 �k�~</li> <li>��Y�|�OgqGr -$20�k _</li> </ul> <div class="item-divider"></div> <p class="modal-text" style="margin-top: 15px;">�NN��f�:NUSMO �gqGrpeϑ�V�[ �Yf��bDd$90/�� �`��N _}lf�Tgq����RM����cMRJT�w �0'Y薴f�)Y�e�lۏL��[Y�bDd ��R0W�p����R6eO�cMRJT�w</p> </div> <div class="modal-payment-footer"></div> </div> </div> <!-- ۏ6��bDdWY�9_�z --> <div class="modal" id="modal-advanced" style="background-color: rgba(224, 220, 216, 0.8);"> <div class="modal-content" style="background-color: #e0dcd8;"> <span class="close-modal">&times;</span> <h3 class="modal-title">ۏ6��bDdWY���`</h3> <div class="modal-body"> <p class="modal-text"> " ۏ6�WY�1-�225/9 _<br> " ۏ6�WY�2-�350/15 _<br> " ۏ6�WY�3-�400/20 _<br> </p> <p class="modal-text"><strong>D��Ry��v</strong></p> <ul> <li>�R`gqGr�bDd -$80 �k�~</li> <li>YofIQ���bDd-$25 �k _</li> <li>iQof�of�bDd-$30 �k!k</li> <li>�N�P}lf��bDd-$50 �k�~</li> <li>��Y�|�OgqGr -$20�k _</li> </ul> <div class="item-divider"></div> <p class="modal-text" style="margin-top: 15px;">�NN��f�:NUSMO �gqGrpeϑ�V�[ �Yf��bDd$90/�� �`��N _}lf�Tgq����RM����cMRJT�w �0'Y薴f�)Y�e�lۏL��[Y�bDd ��R0W�p����R6eO�cMRJT�w</p> </div> <div class="modal-payment-footer"></div> </div> </div> <!-- �W@x�bDdWY�9_�z --> <div class="modal" id="modal-basic" style="background-color: rgba(224, 220, 216, 0.8);"> <div class="modal-content" style="background-color: #e0dcd8;"> <span class="close-modal">&times;</span> <h3 class="modal-title">�W@x�bDdWY���`</h3> <div class="modal-body"> <p class="modal-text"> " �W@xY�` WY�2-�180/15 _<br> " �W@x�RY�`WY�3-�310/20 _<br> </p> <p class="modal-text"><strong>D��Ry��v</strong></p> <ul> <li>�R`gqGr�bDd -$80 �k�~</li> <li>YofIQ���bDd-$25 �k _</li> <li>iQof�of�bDd-$30 �k!k</li> <li>�N�P}lf��bDd-$50 �k�~</li> <li>��Y�|�OgqGr -$20�k _</li> </ul> <div class="item-divider"></div> <p class="modal-text" style="margin-top: 15px;">�NN��f�:NUSMO �gqGrpeϑ�V�[ �Yf��bDd$90/�� �`��N _}lf�Tgq����RM����cMRJT�w �0'Y薴f�)Y�e�lۏL��[Y�bDd ��R0W�p����R6eO�cMRJT�w</p> </div> <div class="modal-payment-footer"></div> </div> </div> <!-- :gf��bDdWY�9_�z --> <div class="modal" id="modal-motorcycle" style="background-color: rgba(224, 220, 216, 0.8);"> <div class="modal-content" style="background-color: #e0dcd8;"> <span class="close-modal">&times;</span> <h3 class="modal-title">:gf��bDdWY���`</h3> <div class="modal-body"> <p class="modal-text"> " :gf�Y�`WY�1-�180/9 _<br> " :gf�Y�`WY�2-$270/15 _<br> " :gf��R`WY�1-�190/6 _<br> " :gf��R`WY�2-$280/9 _<br> </p> <p class="modal-text"><strong>D��Ry��v</strong></p> <ul> <li>�R`gqGr�bDd -$80 �k�~</li> <li>YofIQ���bDd-$25 �k _</li> <li>iQof�of�bDd-$30 �k!k</li> <li>�N�P:gf��bDd-$50 �k�~</li> <li>��Y�|�OgqGr -$20�k _</li> </ul> <div class="item-divider"></div> <p class="modal-text" style="margin-top: 15px;">�NN��f�:NUSMO �gqGrpeϑ�V�[ �Yf��bDd$90/�� �`��N _:gf�Tgq����RM����cMRJT�w �0�R0W�p����R6eO�cMRJT�w</p> </div> <div class="modal-payment-footer"></div> </div> </div> <!-- ߍ�b�[6RWY�9_�z --> <div class="modal" id="modal-follow" style="background-color: rgba(224, 220, 216, 0.8);"> <div class="modal-content" style="background-color: #e0dcd8;"> <span class="close-modal">&times;</span> <h3 class="modal-title">ߍ�b�[6RWY���`</h3> <div class="modal-body"> <p class="modal-text"> " 2\�e�N�Q-$160�k\�e<br> " 3\�e�N N-$120�k\�e<br> " 5\�e�N N-$100�k\�e<br> </p> <p class="modal-text"> hQ�eMO�[6R g�R �;N�����[����Y�y{|�W�bDdN�bDd�e����� ��e�ߍ�b �;m�RI{<br> NP�6R�bDdf��� ��NirI{peϑ ��S�N�[6RTg@b����v�|�~ z�^ �����vgqGrpeϑ �����v�QGr�e�� �/f&ThV���SGrI{<br> ���e�e_:N�p�[�p ��NDdq_^�Q�S_�Y���{�e��0R�V0R�Q�S�v0W�pMbO\Pbk���{�e�� ��Y��~�{�e��Y�Q�v�R N�n 30R�� c 30R�����{ �Y�Q 30R�� cgq 60 R�����{<br> �N N�N </div> <div class="modal-payment-footer"></div> </div> </div> <!-- {��w�Sag>k9_�z --> <div class="modal" id="modal-terms"> <div class="modal-content"> <span class="close-modal">&times;</span> <h3 class="modal-title">�bDd{��w�Sag>k</h3> <div class="modal-body"> <h4>���~Am z</h4> <ul> <li>���~�bDd�/e�N50%�[ё, �[ё6e0RTnx�[�e��. �[ё gHe180�e.</li> </ul> <h4>�bDd�QY</h4> <ul> <li>�k!k�bDdMRN)Yg}Y��nmN Nf��� �f���n��k�Qp��\�SꁨRmf�:gYmN N . g}Y�dr^�N�Of���r^�Q��Tb�T�v)Yl�bDdg}Y&^agn�k�]�N�O�d�Qf���</li> </ul> <h4>�QGr�e��</h4> <ul> <li>�6e0R>\>kKN�ew����{�QGr�e��,ck8^�`�Q NN�~gqGr�v�QGr�e��:N14�e,��GP�ed�Y��c�O�R%`�QGr g�R$30-7�e�QGr,$50-3�e�Q�QGr,wQSO�`�QƉgqGrpeϑ�Q�[ �gT�~0R�`�|�O}Y�vbGr�}lf�:gf�Ddq_�e�SGr���R��Y�R6e �</li> </ul> <h4>bGr�f</h4> <ul> <li>�����Y�v�|�OgqGrb��SGrgqGr����, 6e0RbGrT24\�e�QO Rd�gqGrv^N NOYu�^</li> </ul> <h4>vQ�Nag>k</h4> <ul> <li><strong>�S�m�T*g0R:W�</strong>�Y�g�`�S�m���~b*g�[b�bDd �hQ萚[ё\\O:NZё N�N�؏0</li> <li><strong>9eg�</strong>AQ��N!k9eg N6eZё,48\�e�Q9egd�Y0�k!k9eg\cbd��[ё�v50%\O:NZё090�e�Q�Y傡l ge�hQ�[ё͑�e���~�bDdƉsS:NꁨR>e_�bDd ��[ё N�N�؏�</li> <li><strong>)Yl�`�Q�</strong>(W�g�z)Yl�`�Q N �b�N�S��OAQ��9egN N6eZё �FO�9hncwQSO�`�Q�T�[yb�Q�[0</li> <li><strong>#��N�Xf�</strong>Ddq_^�[�bDdǏ z-N�Su�v�NUO_cOWb�NEe�S�bFO NP��N"��N_cOWb�N��$O�[ � Nb�b#��N0</li> <li><strong>>y�N�ZSOO(u�</strong>�Y�g�[7b N ^ggqGr�S^(W>y�N�ZSO N ��/e�N��Y9�(u$300</li> <li><strong>�wƋ�NCg�</strong>�bDdǏ z-N�Nu�v@b g�V�P:NDdq_^@b g0�[7b���_�V�P�v*N�NO(u���S �FO�NUOFUN(u���NHQ���_yb�Q �v^�S���/e�N��Y9�(u0</li> </ul> </div> <div class="modal-footer"> <p class="disclaimer-text">��nx�O�]���@b gag>k,� g�NUO�N�� �g�~�ʑCgR_calvinsuals@b g</p> </div> </div> </div> <!-- Cars Basic Modal --> <div id="modal-cars-basic" class="modal"> <div class="modal-content"> <span class="close-modal" onclick="closeModal('modal-cars-basic')">&times;</span> <h3 class="modal-title">}lf�Ddq_-�W@x</h3> <div class="modal-body"> <p><strong> g�R�e��</strong> 1 \�e</p> <p><strong>�|�OgqGr�</strong> 10 _</p> <p><strong>;`gqGrpe�</strong> 50+ _</p> <p><strong>�N $150</p> <ul> <li>�TY�`U\:y0f���yr�Q</li> <li>�W@xTg�r�</li> <li>�e���bDd</li> </ul> <p class="modal-text" style="margin-top: 15px;">�NN��f�:NUSMO �gqGrpeϑ�V�[ �Yf��bDd$90/�� �`��N _}lf�Tgq����RM����cMRJT�w �0'Y薴f�)Y�e�lۏL��[Y�bDd ��R0W�p����R6eO�cMRJT�w</p> </div> <div class="modal-payment-footer"></div> </div> </div> <!-- Cars Standard Modal --> <div id="modal-cars-standard" class="modal"> <div class="modal-content"> <span class="close-modal" onclick="closeModal('modal-cars-standard')">&times;</span> <h3 class="modal-title">}lf�Ddq_-h�Q</h3> <div class="modal-body"> <p><strong> g�R�e��</strong> 2 \�e</p> <p><strong>�|�OgqGr�</strong> 20 _</p> <p><strong>;`gqGrpe�</strong> 100+ _</p> <p><strong>�N $280</p> <ul> <li>S+T�R`��&q�bDd</li> <li>IQ�~0Yof�bDd��S � �</li> <li>:Wof ��b�fY7h</li> </ul> <p class="modal-text" style="margin-top: 15px;">�NN��f�:NUSMO �gqGrpeϑ�V�[ �Yf��bDd$90/�� �`��N _}lf�Tgq����RM����cMRJT�w �0'Y薴f�)Y�e�lۏL��[Y�bDd ��R0W�p����R6eO�cMRJT�w</p> </div> <div class="modal-payment-footer"></div> </div> </div> <!-- Cars Advanced Modal --> <div id="modal-cars-advanced" class="modal"> <div class="modal-content"> <span class="close-modal" onclick="closeModal('modal-cars-advanced')">&times;</span> <h3 class="modal-title">}lf�Ddq_-ؚ�~</h3> <div class="modal-body"> <p><strong> g�R�e��</strong> 3 \�e</p> <p><strong>�|�OgqGr�</strong> 30 _</p> <p><strong>;`gqGrpe�</strong> 150+ _</p> <p><strong>�N $400</p> <ul> <li>hQ�eMO�m�^�[6R�bDd</li> <li>�SS+TƉ����n}jR�����Y6e9� �</li> <li>�Tf��SZ�O0;m�R��U_</li> </ul> <p class="modal-text" style="margin-top: 15px;">�NN��f�:NUSMO �gqGrpeϑ�V�[ �Yf��bDd$90/�� �`��N _}lf�Tgq����RM����cMRJT�w �0'Y薴f�)Y�e�lۏL��[Y�bDd ��R0W�p����R6eO�cMRJT�w</p> </div> <div class="modal-payment-footer"></div> </div> </div> <!-- Motorcycles Modal --> <div id="modal-motorcycles" class="modal"> <div class="modal-content"> <span class="close-modal" onclick="closeModal('modal-motorcycles')">&times;</span> <h3 class="modal-title">idXbf�Ddq_</h3> <div class="modal-body"> <p><strong> g�R�e��</strong> 1.5 \�e</p> <p><strong>�|�OgqGr�</strong> 15 _</p> <p><strong>;`gqGrpe�</strong> 80+ _</p> <p><strong>�N $200</p> <ul> <li>�z�Q:gf��~agN�~��</li> <li>�RY��~T �UcIc��L��Y`</li> <li>�S ��W^bʐY:Wof</li> </ul> <p class="modal-text" style="margin-top: 15px;">�NN��f�:NUSMO �gqGrpeϑ�V�[ �Yf��bDd$90/�� �`��N _:gf�Tgq����RM����cMRJT�w �0�R0W�p����R6eO�cMRJT�w</p> </div> <div class="modal-payment-footer"></div> </div> </div> <!-- Business Modal --> <div id="modal-business" class="modal"> <div class="modal-content"> <span class="close-modal" onclick="closeModal('modal-business')">&times;</span> <h3 class="modal-title">FUN;m�RDdq_</h3> <div class="modal-body"> <p><strong> g�R�e��</strong> c��[6R�gNO2\�ew� �</p> <p><strong>gqGrpeϑ�</strong> NP�ϑhQԏ</p> <p><strong>�N $200/\�e</p> <ul> <li>�(u�NT{|FUN;m�R0O��0U\O</li> <li>NN��U_;m�RAm zN�|i_�w��</li> <li>�_��N�Nؚ(�ϑgqGr</li> </ul> <p class="modal-text"> �N N�N </div> <div class="modal-payment-footer"></div> </div> </div> <!-- {��w c�� - >e(W}lf�:S�T�N�P:SKN�� --> <div class="cta-section"> <a href="#" class="cta-button" id="terms-button"><span style="letter-spacing: 2px; word-spacing: 3px;">�bDd{��w�Sag>k</span></a> <p style="font-size: 0.8rem !important; font-family: 'Montserrat', sans-serif !important; margin-top: 10px; opacity: 0.95 !important; font-weight: 500 !important; color: #222 !important;">CLICK TO SEE FULL LIST</p> </div> <!-- NEW STATIC PORTRAIT & PET PRICING SECTION --> <header class="header" style="background-color: #e0dcd8;"> <!-- Match background and styles --> <div class="header-container"> <!-- Copied title structure and styles from automotive header --> <h1 class="page-title" style="background-image: linear-gradient(45deg, #F2D4B0, #F7E7CE, #E0BFB8, #D4AF37); background-size: 200% 200%; animation: gradientShift 3s ease infinite; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0.5px rgba(0,0,0,0.3); text-shadow: 0px 0px 1px rgba(0,0,0,0.2);">PORTRAIT AND PET</h1> <h2 class="page-subtitle" style="background-image: linear-gradient(45deg, #F2D4B0, #F7E7CE, #E0BFB8, #D4AF37); background-size: 200% 200%; animation: gradientShift 3s ease infinite; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0.25px rgba(0,0,0,0.2); text-shadow: 0px 0px 1px rgba(0,0,0,0.1);">PHOTOGRAPHY PRICING</h2> </div> </header> <section id="portrait-pet-static" class="pricing-section" style="background-color: #e0dcd8; padding-top: 40px; padding-bottom: 60px;"> <div class="container"> <!-- Container for static cards --> <div class="static-card-row"> <!-- Card 1: Pet Photography --> <div class="static-info-card"> <h3>�[irDdq_</h3> <div class="description"> <p>��`���T�</p> </div> </div> <!-- Card 2: Portrait Photography --> <div class="static-info-card"> <h3>�N�PDdq_</h3> <div class="description"> <p>��`���T�</p> </div> </div> <!-- Card 3: Follow-up Photography --> <div class="static-info-card"> <h3>ߍ�bDdq_</h3> <div class="description"> <p>��`���T�</p> </div> </div> </div> </div> </section> <!-- END OF STATIC SECTION --> <!-- u�� --> <footer class="footer"> <p>� 2025 calvinsuals. All photography works and website content are copyrighted by the author.</p> <p>Website design and development: calvinsuals.</p> </footer> <script> document.addEventListener('DOMContentLoaded', function() { // �[*�܃US�R�� --- DELETE OR COMMENT OUT THIS BLOCK --- START /* const menuToggle = document.querySelector('.menu-toggle'); const menuContent = document.querySelector('.menu-content'); menuToggle.addEventListener('click', () => { menuToggle.classList.toggle('active'); menuContent.classList.toggle('active'); // Yt�S��'`�r` if (!menuContent.classList.contains('active')) { setTimeout(() => { menuContent.style.visibility = 'hidden'; }, 400); // 9SM�Ǐ!nc�~�e�� } else { menuContent.style.visibility = 'visible'; } }); */ // --- DELETE OR COMMENT OUT THIS BLOCK --- END // aSGrn��d�R�� (Keep this part and the rest of the script) const carouselContainer = document.querySelector('.carousel-container'); const cards = document.querySelectorAll('.card'); const prevBtn = document.querySelector('.prev-btn'); const nextBtn = document.querySelector('.next-btn'); const indicators = document.querySelectorAll('.indicator'); let currentIndex = 2; // �N-N��aSGr_�Y // ߍ*��N�N�r` let isInteracting = false; let startX = 0; let moveDistance = 0; let lastTapTime = 0; let preventNextClick = false; // �m�R�Sϑ2�bk NN!k�p�Q // �f�eaSGrMOn - �X:_3DHe�g function updateCarousel() { cards.forEach((card, index) => { // �yd�@b g{| card.classList.remove('active', 'prev', 'next', 'prev-2', 'next-2'); // ���{�v�[MOn�/ec�_�s � let relativeIndex = ((index - currentIndex) % cards.length + cards.length) % cards.length; // 9hnc�v�[MOn�m�R�S_�v{| if (relativeIndex === 0) { card.classList.add('active'); } else if (relativeIndex === cards.length - 1 || relativeIndex === -1) { card.classList.add('prev'); } else if (relativeIndex === 1) { card.classList.add('next'); } else if (relativeIndex === cards.length - 2 || relativeIndex === -2) { card.classList.add('prev-2'); } else if (relativeIndex === 2) { card.classList.add('next-2'); } else { card.style.opacity = '0'; card.style.zIndex = '0'; } }); // �f�ec:yhV indicators.forEach((indicator, index) => { indicator.classList.toggle('active', index === currentIndex); }); } // R�YS updateCarousel(); // NN _ function goToPrev() { currentIndex = (currentIndex - 1 + cards.length) % cards.length; updateCarousel(); } // NN _ function goToNext() { currentIndex = (currentIndex + 1) % cards.length; updateCarousel(); } // Sb_!j`Fh function openCardModal(card) { const modalId = card.getAttribute('data-modal'); const modal = document.getElementById(`modal-${modalId}`); if (modal) { modal.style.display = 'flex'; document.body.style.overflow = 'hidden'; lastModalOpenTime = Date.now(); // ��U_!j`FhSb_�e�� } } // YtaSGr�p�Q function handleCardClick(card) { const index = Array.from(cards).indexOf(card); // �h�g/f&T/f�y�R��Y const isMobile = window.innerWidth <= 768; if (index === currentIndex) { // �p�QS_MR�o;m�vaSGr �Sb_!j`Fh openCardModal(card); } else if (isMobile) { // (W�y�R�z�p�Q^��o;maSGr�e ��v�cSb_!j`Fh � NRbcMOn openCardModal(card); } else { // (WLhb��z�p�Q^��o;maSGr �Rbc0R�aSGr currentIndex = index; updateCarousel(); } } // �[*� c���N�N prevBtn.addEventListener('click', function(e) { e.preventDefault(); e.stopPropagation(); goToPrev(); }); nextBtn.addEventListener('click', function(e) { e.preventDefault(); e.stopPropagation(); goToNext(); }); // c:yhV�p�Q�N�N indicators.forEach((indicator, index) => { indicator.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); currentIndex = index; updateCarousel(); }); }); // aSGr�p�Q�N�N - O(u�N�N�YXb carouselContainer.addEventListener('click', function(e) { // �Y�gck(W�N�N��b�R/�n�R �b��xd�N�N�]Yt �R NYt�p�Q if (isInteracting || moveDistance > 10 || preventNextClick) { return; } const clickedCard = e.target.closest('.card'); if (clickedCard) { e.stopPropagation(); // ;�bk�N�N�Q�l handleCardClick(clickedCard); } }); // ===== �xd�N�NYt ===== let touchStartTime = 0; let isTouchMoved = false; carouselContainer.addEventListener('touchstart', function(e) { isInteracting = true; isTouchMoved = false; startX = e.touches[0].clientX; moveDistance = 0; touchStartTime = Date.now(); }, { passive: true }); carouselContainer.addEventListener('touchmove', function(e) { if (!isInteracting) return; const currentX = e.touches[0].clientX; moveDistance = Math.abs(currentX - startX); // �Y�g�y�Rݍ�y��Ǐ�

10) { isTouchMoved = true; } }, { passive: true }); carouselContainer.addEventListener('touchend', function(e) { if (!isInteracting) return; const touchDuration = Date.now() - touchStartTime; const endX = e.changedTouches[0].clientX; const diffX = endX - startX; // �Y�g/f�_��p�Q��xd�e���wN�l gf>f�y�R � if (touchDuration < 250 && !isTouchMoved && moveDistance < 5) { const element = document.elementFromPoint( e.changedTouches[0].clientX, e.changedTouches[0].clientY ); const card = element.closest('.card'); if (card) { // ;�bk�N�N�Q�l e.stopPropagation(); // �v�cSb_!j`Fh � NRbcaSGr openCardModal(card); // 2�bkT�~�vclick�N�N��S preventNextClick = true; setTimeout(() => { preventNextClick = false; }, 400); } } // �Y�g/ffnx�v�n�R�d\O else if (isTouchMoved && Math.abs(diffX) > 50) { if (diffX < 0) { goToNext(); } else { goToPrev(); } } // ͑n�r` setTimeout(() => { isInteracting = false; isTouchMoved = false; moveDistance = 0; }, 300); }, { passive: false }); // �O9e:N^����R!j_ ��NAQ��;�bk؞��L�:N // ===== �h�N�NYt ===== carouselContainer.addEventListener('mousedown', function(e) { // �S g�].��p�QMbYt if (e.button !== 0) return; const card = e.target.closest('.card'); if (!card) return; isInteracting = true; startX = e.clientX; moveDistance = 0; e.preventDefault(); // 2�bk�e,g ��b }); document.addEventListener('mousemove', function(e) { if (!isInteracting) return; const currentX = e.clientX; moveDistance = Math.abs(currentX - startX); // �Y�g�y�Rݍ�y'Y�N10px ���:N/f�b�R �^��p�Q if (moveDistance > 10) { carouselContainer.style.cursor = 'grabbing'; } e.preventDefault(); // 2�bk�e,g ��b }); document.addEventListener('mouseup', function(e) { if (!isInteracting) return; carouselContainer.style.cursor = ''; const endX = e.clientX; const diffX = endX - startX; // �Y�g�b�Rݍ�y��Y'Y �gbL�n��dRbc if (Math.abs(diffX) > 50) { if (diffX < 0) { goToNext(); } else { goToPrev(); } } else if (moveDistance < 10) { // �Y�g�y�Rݍ�y�_\ �Ɖ:N�p�Q const card = e.target.closest('.card'); if (card) { handleCardClick(card); } } // ͑n�r` setTimeout(() => { isInteracting = false; moveDistance = 0; }, 100); }); // 2�bk�b�RǏ z-N ��b�e,g carouselContainer.addEventListener('selectstart', function(e) { if (isInteracting) { e.preventDefault(); } }); // {��w c���p�Q�N�N const termsButton = document.getElementById('terms-button'); if (termsButton) { termsButton.addEventListener('click', function(e) { e.preventDefault(); const termsModal = document.getElementById('modal-terms'); if (termsModal) { termsModal.style.display = 'flex'; document.body.style.overflow = 'hidden'; lastModalOpenTime = Date.now(); // ��U_!j`FhSb_�e�� } }); } // sQ�!j`Fh const modals = document.querySelectorAll('.modal'); const closeButtons = document.querySelectorAll('.close-modal'); closeButtons.forEach(button => { button.addEventListener('click', function() { const modal = this.closest('.modal'); if (modal) { modal.style.display = 'none'; document.body.style.overflow = ''; } }); }); // �p�Q!j`Fh̀ofsQ� let lastModalOpenTime = 0; modals.forEach(modal => { // ;�bk!j`Fh�Q萹p�Q�N�N�Q�l0R!j`Fh,g�� const modalContent = modal.querySelector('.modal-content'); if (modalContent) { modalContent.addEventListener('click', function(e) { e.stopPropagation(); // ;�bk�N�N�Q�l }); } modal.addEventListener('click', function(e) { // ���SS_MR�e�� const currentTime = Date.now(); // �Y�g!j`FhRRSb_�\�N300�k�y � �R�_eudk!k�p�Q if (currentTime - lastModalOpenTime < 300) { return; } // nx�O�S g�v�c�p�Q!j`Fh̀ofMbsQ� � � N/f�Q�l Neg�v�N�N if (e.target === this && e.currentTarget === this) { this.style.display = 'none'; document.body.style.overflow = ''; } }); }); }); </script> <script> // Dynamically add payment icons to modal footers document.addEventListener('DOMContentLoaded', function() { // --- IMPORTANT: UPDATE THIS LIST --- // Add all your actual icon filenames from the 'images/pricing icons/' folder here. const paymentIconFiles = [ '/e�N�Vh.jpg' // �f�e:N�e�v�Vh�e�N ]; const iconBasePath = 'images/pricing icons/'; // Updated path to match actual file location const paymentFooters = document.querySelectorAll('.modal-payment-footer'); paymentFooters.forEach(footer => { // Clear any existing static content (optional, but good practice) footer.innerHTML = ''; paymentIconFiles.forEach(filename => { const img = document.createElement('img'); img.src = iconBasePath + filename; // Generate alt text from filename (e.g., 'visa.png' -> 'Visa') const altText = filename .split('.')[0] // Remove extension .replace(/[-_]/g, ' ') // Replace hyphens/underscores with spaces .replace(/\b\w/g, l => l.toUpperCase()); // Capitalize first letter img.alt = altText; footer.appendChild(img); }); }); }); </script> <!-- ��Rbc c�� --> <a href="pricing_en.html" class="lang-switch"> <span class="current">-N�e</span> <span class="divider">|</span> <span>English</span> </a> </body> </html>