/* ============================================================ 日本集運王-沖繩 主題 設計語彙:沖繩海洋(翡翠海藍) × 珊瑚 × 沙灘白;取代主站品牌橘。 僅覆寫公開頁/會員頁的共用視覺元素,交易流程結構不動。 ============================================================ */ :root { --oki-sea: #0099AD; /* 翡翠海藍(主色) */ --oki-sea-deep: #007A8A; /* 深海(hover) */ --oki-sea-soft: #E5F6F8; /* 淺海泡沫(底色) */ --oki-sea-border: #B3E4EA; --oki-coral: #FF8A5C; /* 珊瑚(輔助/CTA) */ --oki-sand: #FBF8F1; /* 沙灘白(頁面背景) */ } /* ── 頂部海洋光帶:一眼識別這是沖繩站 ── */ body::before { content: ""; display: block; height: 4px; background: linear-gradient(90deg, #00B8CC 0%, #0099AD 35%, #35C6B5 70%, #FF8A5C 100%); } /* ── 公開頁頂欄與導覽 ── */ .SiteHeader__brand::after { content: "沖繩"; display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: var(--oki-sea-soft); color: var(--oki-sea-deep); border: 1px solid var(--oki-sea-border); font-size: 12.5px; font-weight: 800; letter-spacing: 1px; vertical-align: middle; } .SiteNav__link:hover, .SiteNav__link--guide, .SiteNav__link.active { color: var(--oki-sea-deep) !important; } /* 主要 CTA(免費註冊等橘色圓角鈕)改海藍 */ .SiteHeader__cta, .SiteNav__cta, .SiteNav__link--accent, a.HeroCTA:not(.HeroCTA--ghostLight), .UIButton--primary { background: var(--oki-sea) !important; border-color: var(--oki-sea) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(0, 153, 173, .32) !important; } .SiteHeader__cta:hover, .SiteNav__cta:hover, .SiteNav__link--accent:hover, a.HeroCTA:not(.HeroCTA--ghostLight):hover { background: var(--oki-sea-deep) !important; } /* 公告跑馬燈標籤 */ .NewsTicker__label, .NewsTicker i { color: var(--oki-sea-deep) !important; } /* ── 頁面背景:淡沙色 ── */ body, .PublicPage { background: var(--oki-sand) !important; } /* ── 常見品牌橘元件轉海藍(公開頁重點區塊) ── */ .NewsTicker { background: var(--oki-sea-soft) !important; color: var(--oki-sea-deep) !important; } .WizardEyebrow { background: var(--oki-sea-soft) !important; color: var(--oki-sea-deep) !important; border-color: var(--oki-sea-border) !important; } .WizardEyebrow-dot { background: var(--oki-sea) !important; } .NavBtn--next, .NavBtn--submit, .UserAddSubmit { background: var(--oki-sea) !important; box-shadow: 0 4px 14px rgba(0, 153, 173, .3) !important; } .NavBtn--next:hover, .NavBtn--submit:hover, .UserAddSubmit:hover { background: var(--oki-sea-deep) !important; } .StepNavLogin__btn, .WizardHeroLogin__btn { color: var(--oki-sea-deep) !important; border-color: var(--oki-sea) !important; box-shadow: 0 3px 10px rgba(0, 153, 173, .18) !important; background: #fff !important; } .StepNavLogin:hover .StepNavLogin__btn, .WizardHeroLogin:hover .WizardHeroLogin__btn { background: var(--oki-sea) !important; color: #fff !important; } /* 進度圈/強調字 */ .WizardStepIcon.active, .StepDot.active { background: var(--oki-sea) !important; border-color: var(--oki-sea) !important; } /* ── 會員側欄選中/徽章維持紅色警示,其餘強調轉海藍 ── */ .sidebar-menu li.active > a { border-left-color: var(--oki-sea) !important; } /* ── 珊瑚色點綴:hover 連結 ── */ a:hover { color: var(--oki-sea-deep); } /* ============================================================ 沖繩風首頁 Hero:海天漸層 + 波浪 + 扶桑花 + シーサー （全為 CSS/SVG，不依賴外部圖片；日後有實拍照片可放 /themes/okinawa/img/hero.jpg 並改用下方 .Hero__photo 區塊） ============================================================ */ .Hero { background: linear-gradient(180deg, #E8F7FA 0%, #F4FBFC 45%, #FEFCF7 100%) !important; } /* 海天光暈 + 陽光 */ .Hero__bg { background: radial-gradient(760px 420px at 88% 8%, rgba(255, 206, 92, .30), transparent 62%), /* 南國陽光 */ radial-gradient(720px 420px at 8% 22%, rgba(0, 184, 204, .16), transparent 65%), /* 海面反光 */ radial-gradient(520px 300px at 65% 78%, rgba(53, 198, 181, .12), transparent 70%) !important; } /* 海浪：Hero 底部兩層波浪 */ .Hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 78px; pointer-events: none; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,52 C180,88 360,18 540,40 C720,62 900,92 1080,66 C1260,40 1380,52 1440,58 L1440,90 L0,90 Z' fill='%23ffffff'/%3E%3C/svg%3E") bottom/100% 78px no-repeat, url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,64 C200,34 380,84 580,62 C780,40 980,20 1180,44 C1320,60 1400,66 1440,64 L1440,90 L0,90 Z' fill='rgba(0,184,204,0.20)'/%3E%3C/svg%3E") bottom/100% 78px no-repeat; } /* 扶桑花裝飾（Hero 左緣，不與登入卡重疊） */ .Hero::before { content: ""; position: absolute; left: -26px; bottom: 96px; width: 150px; height: 150px; opacity: .32; transform: rotate(-12deg); pointer-events: none; z-index: 0; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(50,50)'%3E%3Cg fill='%23FF6F61'%3E%3Cellipse rx='13' ry='26' cy='-20'/%3E%3Cellipse rx='13' ry='26' cy='-20' transform='rotate(72)'/%3E%3Cellipse rx='13' ry='26' cy='-20' transform='rotate(144)'/%3E%3Cellipse rx='13' ry='26' cy='-20' transform='rotate(216)'/%3E%3Cellipse rx='13' ry='26' cy='-20' transform='rotate(288)'/%3E%3C/g%3E%3Ccircle r='7' fill='%23FFCE5C'/%3E%3Cline x1='0' y1='0' x2='16' y2='24' stroke='%23FFCE5C' stroke-width='3' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; } .Hero__inner { position: relative; z-index: 1; } /* 標題重點色改海藍、底線改珊瑚（原樣式用 background-clip:text 漸層，需覆寫 background） */ .Hero__title-accent { background: linear-gradient(135deg, #00B8CC 0%, #0099AD 55%, #35C6B5 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } .Hero__title-underline { color: var(--oki-coral) !important; -webkit-text-fill-color: initial; } .Hero__eyebrow { background: rgba(255, 255, 255, .82) !important; color: var(--oki-sea-deep) !important; border-color: var(--oki-sea-border) !important; backdrop-filter: blur(4px); } .Hero__eyebrow-dot { background: var(--oki-coral) !important; } .Hero__subtitle strong { color: var(--oki-sea-deep) !important; } /* 登入卡：海面上的白色浮板 */ .Hero__card { border-color: var(--oki-sea-border) !important; box-shadow: 0 18px 46px rgba(0, 122, 138, .14) !important; backdrop-filter: blur(2px); } /* 服務特色圖示轉海藍 */ .Hero__feature i, .Hero__featuresLabel { color: var(--oki-sea-deep) !important; } .Hero__trustText b { color: var(--oki-sea-deep) !important; } /* 登入表單（LF-* 系列）：主要按鈕與連結轉海藍 */ .LF-BtnPrimary { background: linear-gradient(135deg, #00B8CC 0%, #0099AD 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(15, 30, 70, .08), 0 10px 26px rgba(0, 153, 173, .26) !important; } .LF-SignupLink, .LF-ForgotLink, .LF-Link { color: var(--oki-sea-deep) !important; } .LF-Title, .LF-Label { color: #0f172a; } .LF-Input:focus { border-color: var(--oki-sea) !important; box-shadow: 0 0 0 3px rgba(0,153,173,.12) !important; } /* 首頁其他區塊的品牌橘 → 海藍（公告條、統計、頁尾 CTA 等） */ .NewsTicker__label, .StatsStrip__num, .SectionTitle__accent, .HomeSection__eyebrow, .FooterCTA__title span { color: var(--oki-sea-deep) !important; } .FooterCTA, .HomeCTA { background: linear-gradient(135deg, #00B8CC 0%, #007A8A 100%) !important; } /* 手機：波浪縮短，避免蓋到內容 */ @media (max-width: 768px) { .Hero::after { height: 48px; background-size: 100% 48px, 100% 48px; } .Hero__inner::before { width: 88px; height: 88px; opacity: .38; } }