/* 基礎設定 & Reset (針對 #copord 範圍) */ #copord * { box-sizing: border-box; position: relative; } #copord {font-family: var(--font-family);color: var(--info);background-color: var(--light);line-height: 1.8;font-size: 16px;overflow-x: hidden;width: 100%;margin: 0;padding: 0;border-radius: 20px;border: rgb(156 106 67 / 66%) 2px solid;} #copord a { text-decoration: none; color: inherit; transition: 0.3s; } #copord ul { list-style: none; padding: 0; margin: 0; } #copord img { max-width: 100%; display: block; object-fit: cover; } #copord .container {max-width: var(--width-lg);margin: 0 auto;padding: 0 20px;display: flex;flex-direction: column;align-items: center;} #copord .section-padding { padding: 80px 0; } #copord .text-center { text-align: center; } #copord .flex-center { display: flex; justify-content: center; align-items: center; } /* 排版與通用類 */ #copord .hero-title, #copord .section-heading, #copord .intro-heading { font-weight: 500; color: var(--primary); margin-bottom: 1rem; letter-spacing: 0.1em; display: block; } #copord .section-heading { font-size: 2rem; margin-bottom: 2rem; position: relative; display: inline-block; } #copord .section-heading::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 40px; height: 2px; background-color: var(--secondary); } #copord p { color: var(--dark); margin-bottom: 1rem; font-weight: 300; } #copord .btn { display: inline-block; padding: 12px 36px; background-color: var(--primary); color: #fff; border-radius: 30px; border: 1px solid var(--primary); letter-spacing: 2px; margin-top: 20px; cursor: pointer; } #copord .btn:hover { background-color: transparent; color: var(--primary); } /* Hero Section */ #copord .hero { height: 100vh; background-color: var(--fifth); display: flex; align-items: center; overflow: hidden; margin-top: 0; } #copord .hero-content { flex: 1; padding: 0 5%; z-index: 2; display: flex; flex-direction: column; justify-content: center; } #copord .hero-title { font-size: 3.5rem; line-height: 1.3; color: var(--primary); margin-bottom: 20px; font-weight: bold; } #copord .hero-subtitle { font-size: 1.2rem; color: var(--secondary); letter-spacing: 5px; margin-bottom: 30px; text-transform: uppercase; display: block; } #copord .hero-desc { font-size: 1.1rem; max-width: 500px; color: var(--info); } #copord .hero-visual { flex: 1; height: 100%; position: relative; } #copord .hero-img { width: 100%; height: 100%; object-fit: cover; border-bottom-left-radius: 100px; } #copord .vertical-text { position: absolute; top: 15%; left: -40px; writing-mode: vertical-rl; font-size: 1.2rem; letter-spacing: 0.5em; color: var(--info); border-left: 1px solid var(--info); padding-left: 15px; height: 300px; } /* Intro Section - Founder & Shape */ #copord .intro {background-color: #faf8f3;} #copord .intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } #copord .intro-img-wrapper { position: relative; } #copord .intro-img { border-radius: 20px; box-shadow: 20px 20px 0 var(--fifth); } #copord .intro-heading { font-size: 1.8rem; color: var(--primary); margin-bottom: 10px; } #copord .intro-tag { color: var(--secondary); font-weight: bold; margin-bottom: 20px; display: block; letter-spacing: 2px; } #copord .feature-box {background: #faf8f3;padding: 30px;border-radius: 10px;margin-top: 30px;border: 1px solid var(--fifth);} #copord .feature-title { color: var(--primary); font-size: 1.2rem; display: block; margin-bottom: 10px; font-weight: bold; } /* Ingredients Section */ #copord .ingredients {background-color: #f3f1eb;position: relative;overflow: hidden;} #copord .ingredients::before { content: ''; position: absolute; top: 0; left: 0; width: 300px; height: 300px; background: var(--sixth); opacity: 0.2; border-radius: 50%; filter: blur(50px); } #copord .ing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; } #copord .ing-card {background: #faf8f3;padding: 40px 20px;text-align: center;border-radius: 8px;transition: transform 0.3s, box-shadow 0.3s;border-bottom: 3px solid transparent;} #copord .ing-card:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(114, 79, 55, 0.1); border-bottom-color: var(--secondary); } #copord .ing-icon { font-size: 2rem; margin-bottom: 15px; display: block; } #copord .ing-title { font-size: 1.1rem; font-weight: bold; margin-bottom: 10px; color: var(--primary); } #copord .ing-desc { font-size: 0.9rem; color: var(--dark); line-height: 1.6; } #copord .ing-origin { font-size: 0.8rem; color: var(--secondary); text-transform: uppercase; margin-top: 10px; display: block; letter-spacing: 1px; } /* Flavor Grid (The Nine Treasures) */ #copord .flavors {background-color: #faf8f3;} #copord .flavor-intro { text-align: center; max-width: 700px; margin: 0 auto 50px; } #copord .nine-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } #copord .flavor-item {display: flex;flex-direction: column;align-items: center;text-align: center;width: 100%;} #copord .flavor-img-box {width: min(300px , 100%);aspect-ratio: 1/1;height: auto;background: #fdfcf8;border-radius: 50%;margin-bottom: 20px;display: flex;justify-content: center;align-items: center;position: relative;border: 1px solid var(--fifth);overflow: hidden;transition: 0.4s;} #copord .flavor-img-box:hover { border-color: var(--secondary); background: #fff; box-shadow: 0 0 20px rgba(233, 149, 113, 0.2); } #copord .flavor-img {width: min(200px , 100%);height: auto;transform: rotate(0deg);transition: 0.4s;filter: drop-shadow(5px 10px 10px rgba(0,0,0,0.1));} #copord .flavor-item:hover .flavor-img { transform: rotate(5deg) scale(1.1); } #copord .flavor-name {font-size: 1.5rem;color: var(--primary);margin-bottom: 5px;font-weight: bold;width: 100%;display: flex;flex-direction: column;align-items: center;} #copord .flavor-meaning {font-size: 1rem;color: #ffffff;margin-bottom: 8px;display: flex;flex-direction: column;align-items: center;background: #952520;padding: 5px 15px;border-radius: 222px;} #copord .flavor-desc {font-size: 0.85rem;color: var(--dark);max-width: 200px;line-height: 1.5;width: 100%;text-align: center;display: flex;max-width: 100%;flex-direction: column;align-items: center;} #copord .color-dot {width: 10px;height: 10px;border-radius: 50%;display: inline-block;margin-top: 10px;display: none;} /* Process Section */ #copord .process { background-color: var(--primary); color: #fff; } #copord .process .section-heading, #copord .process p { color: #fff; } #copord .process .section-heading::after { background-color: var(--fifth); } #copord .process-steps { display: flex; justify-content: space-between; margin-top: 50px; position: relative; } #copord .process-steps::before { content: ''; position: absolute; top: 40px; left: 0; width: 100%; height: 1px; background: rgba(255,255,255,0.3); z-index: 1; } #copord .step { flex: 1; text-align: center; position: relative; z-index: 2; padding: 0 10px; } #copord .step-num { width: 80px; height: 80px; background: var(--secondary); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto 20px; font-size: 1.5rem; font-weight: bold; border: 5px solid var(--primary); } #copord .step-title { font-size: 1.1rem; font-weight: bold; margin-bottom: 10px; color: var(--fifth); } #copord .step-desc { font-size: 0.85rem; opacity: 0.8; } /* Quality Promise */ #copord .promise {background: #faf8f3;text-align: center;} #copord .cert-flex { display: flex; justify-content: center; gap: 40px; margin-top: 40px; flex-wrap: wrap; } #copord .cert-badge { border: 2px solid var(--thirdly); color: var(--thirdly); padding: 15px 30px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; } /* Brand Story Section (New) */ #copord .brand-story {background-color: #faf8f3;border-top: 1px solid var(--fifth);} #copord .brand-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px; align-items: center; } #copord .brand-heading { font-size: 1.8rem; margin-bottom: 15px; } #copord .brand-subheading { color: var(--secondary); font-size: 1.1rem; margin-bottom: 25px; display: block; font-weight: bold; letter-spacing: 1px; } #copord .brand-features { display: grid; gap: 20px; margin-top: 30px; } #copord .brand-feat-item {display: flex;align-items: center;background: #fdfdfd;padding: 20px;border-radius: 8px;border-left: 4px solid var(--secondary);transition: transform 0.3s;} #copord .brand-feat-item:hover { transform: translateX(10px); background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.05); } #copord .brand-feat-icon {width: 50px;height: 50px;background: #e99571;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 1.2rem;color: #fff;margin-right: 20px;flex-shrink: 0;} #copord .brand-feat-text h4 { margin: 0 0 5px 0; color: var(--primary); font-size: 1.1rem; } #copord .brand-feat-text p { margin: 0; font-size: 0.9rem; color: var(--dark); } #copord .brand-img-container { position: relative; padding-top: 20px; padding-left: 20px; } #copord .brand-img-main {border-radius: 20px 0 20px 0;box-shadow: -20px -20px 0 #f7e3e2;z-index: 2;width: 100%;} /* RWD Media Queries */ @media (max-width: 1024px) { #copord .hero-title { font-size: 2.5rem; } #copord .nine-grid { grid-template-columns: repeat(2, 1fr); } #copord .ing-grid { grid-template-columns: repeat(2, 1fr); } #copord .brand-grid { grid-template-columns: 1fr; } #copord .brand-img-container { order: -1; margin-bottom: 30px; } } @media (max-width: 768px) { #copord .intro-img{box-shadow: unset;} #copord .hero { flex-direction: column-reverse; height: auto; min-height: 100vh; } #copord .hero-img { border-radius: 0 0 50px 50px; height: 50vh; } #copord .hero-content { padding: 60px 20px; text-align: center; } #copord .vertical-text { display: none; } #copord .intro-grid { grid-template-columns: 1fr; } #copord .process-steps { flex-direction: column; gap: 40px; } #copord .process-steps::before { width: 1px; height: 100%; left: 50%; top: 0; } #copord .nine-grid { grid-template-columns: 1fr; } #copord .ing-grid { grid-template-columns: 1fr; } }