/* ============================================================ CARSERVICE THEME Activated by adding `theme-carservice` class to . Yellow/amber XPEL accent + softer rounded shapes. Images and layout stay unchanged. Self-contained: deleting this file (and removing its in index.html) reverts the carservice/dev_admin user to the default design with no further code changes required. ============================================================ */ body.theme-carservice { --cs-accent: #ffb81c; --cs-accent-hover: #ffc845; --cs-accent-soft: #fff3cf; --cs-text: #1a1a1a; --cs-text-muted: #6b6b6b; --cs-bg: #fafafa; --cs-card: #ffffff; --cs-border: #e6e8eb; --cs-border-strong: #d0d4da; --cs-radius-lg: 16px; --cs-radius-md: 12px; --cs-radius-sm: 8px; --cs-shadow: 0 4px 14px rgba(20, 20, 30, 0.06); --cs-shadow-lg: 0 10px 28px rgba(20, 20, 30, 0.10); background: var(--cs-bg); color: var(--cs-text); } /* --- Step labels (➤ステップ1 / 2) become yellow chips --- */ body.theme-carservice .step-label { display: flex !important; align-items: center; gap: 10px; font-size: 14px !important; color: var(--cs-text) !important; } body.theme-carservice .step-label > span { display: inline-block; background: var(--cs-accent); color: #1a1a1a; padding: 4px 12px; border-radius: 20px; font-weight: 700 !important; font-size: 12px; letter-spacing: 0.06em; white-space: nowrap; } /* Replace the ➤ステップN text with "STEP N" via the data-step attribute */ body.theme-carservice .step-label > span { font-size: 0; } body.theme-carservice .step-label[data-step="1"] > span::before { content: "STEP 1"; font-size: 14px; } body.theme-carservice .step-label[data-step="2"] > span::before { content: "STEP 2"; font-size: 14px; } /* --- Hero copy --- The eyebrow text itself is swapped by theme-carservice.js. */ body.theme-carservice .hero-eyebrow { color: var(--cs-text-muted); } body.theme-carservice .hero-headline { color: var(--cs-text); } body.theme-carservice .hero-subline { color: var(--cs-text-muted); } /* .hr-fade-right keeps its default black gradient from style.css */ /* --- Brand block: shrink XPEL logo (.brand-catch is hidden by theme-carservice.js) --- */ body.theme-carservice .xpel-logo { height: 60px; } /* --- Top-right patent text (injected by theme-carservice.js; the original .top-right-logo is hidden by the same script). min-height matches the old logo block (60px) so the model dropdown stays aligned with the brand dropdown on the left. */ body.theme-carservice .patent-info { min-height: 60px; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--cs-text); text-align: right; } /* --- Black contact card — pinned right after 管理者表示 (injected by theme-carservice.js) --- */ body.theme-carservice .contact-card { margin-top: 20px; padding: 22px 20px; background: #1a1a1a; color: #ffffff; border-radius: var(--cs-radius-lg); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; } body.theme-carservice .contact-card-title { font-size: 15px; font-weight: 600; letter-spacing: 0.04em; } body.theme-carservice .contact-card-phone { font-size: 22px; font-weight: 700; color: var(--cs-accent); letter-spacing: 0.02em; line-height: 1.1; } body.theme-carservice .contact-card-phone-icon { color: #ffffff; font-variant-emoji: text; margin-right: 6px; } body.theme-carservice .contact-card-hours { font-size: 14px; color: rgba(246, 246, 246, 0.85); line-height: 1.4; } body.theme-carservice .contact-card-hours-strong { font-weight: 500; color: rgba(246, 246, 246, 0.85); } body.theme-carservice .contact-card-btn { margin-top: 6px; width: 100%; height: 46px; background: #1a1a1a; color: #ffffff; border: 1px solid #ffffff; border-radius: var(--cs-radius-md); font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } body.theme-carservice .contact-card-btn:hover { background: #ffffff; color: #1a1a1a; } /* --- "システム運営：SmaFig" block — pinned right after 管理者表示 (injected by theme-carservice.js) --- */ body.theme-carservice .system-runner { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 20px; font-size: 18px; color: var(--cs-text-muted); } body.theme-carservice .system-runner img { height: 35px; width: auto; display: block; } /* --- 商品説明 button — drop the drop-shadow, switch to a subtle black hairline border to match the rest of the theme. --- */ body.theme-carservice .service-info-button { box-shadow: none; border: 1px solid rgba(0, 0, 0, 0.2); } body.theme-carservice .service-info-button:hover { background: var(--cs-card); border: 1px solid rgba(0, 0, 0, 0.5); } /* --- Film-type selector header — solid accent yellow instead of the default pale yellow. --- */ body.theme-carservice .film-type-header { background-color: var(--cs-accent); border-color: var(--cs-accent); color: #1a1a1a; } body.theme-carservice .film-type-header:hover { background-color: var(--cs-accent-hover); border-color: var(--cs-accent-hover); } /* --- Selected film-type tag pinned to the bottom-left corner of each card inside the protection_film accordion (covers both the grid main packages and the apf list items inside the sub-accordion). The tag content comes from the .film-* class that script.js applies to eligible cards when a film type is selected. --- */ body.theme-carservice .option-group[data-service-id="protection_film"] .option-card.film-plus, body.theme-carservice .option-group[data-service-id="protection_film"] .option-card.film-fusion, body.theme-carservice .option-group[data-service-id="protection_film"] .option-card.film-stealth, body.theme-carservice .option-group[data-service-id="protection_film"] .option-card.film-color { padding-bottom: 28px; } body.theme-carservice .option-group[data-service-id="protection_film"] .option-card.film-plus::before, body.theme-carservice .option-group[data-service-id="protection_film"] .option-card.film-fusion::before, body.theme-carservice .option-group[data-service-id="protection_film"] .option-card.film-stealth::before, body.theme-carservice .option-group[data-service-id="protection_film"] .option-card.film-color::before { position: absolute; bottom: 8px; left: 18px; font-size: 15px; font-weight: 400; letter-spacing: 0.02em; color: #838383; pointer-events: none; z-index: 2; } body.theme-carservice .option-group[data-service-id="protection_film"] .option-card.film-plus::before { content: 'Ultimate Plus'; } body.theme-carservice .option-group[data-service-id="protection_film"] .option-card.film-fusion::before { content: 'Ultimate Fusion'; } body.theme-carservice .option-group[data-service-id="protection_film"] .option-card.film-stealth::before { content: 'XPEL Stealth'; } body.theme-carservice .option-group[data-service-id="protection_film"] .option-card.film-color::before { content: 'Color PPF'; } /* --- Orange vertical bar to the left of the .pf-chips row. Absolutely positioned with top/bottom so it stretches to full row height even when the chips wrap to multiple lines. */ body.theme-carservice .pf-chips { position: relative; padding-left: 14px; } body.theme-carservice .pf-chips::before { content: ''; position: absolute; left: -5px; top: 0; bottom: 0; width: 4px; background: var(--cs-accent); border-radius: 4px; } /* --- Brand & Model dropdowns --- */ body.theme-carservice #brandSelect, body.theme-carservice .model-select { background-color: var(--cs-card) !important; border: 1px solid var(--cs-border) !important; border-radius: var(--cs-radius-md) !important; box-shadow: var(--cs-shadow) !important; color: var(--cs-text) !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; font-size: 16px !important; } body.theme-carservice .model-select { background-image: url('data:image/svg+xml;charset=UTF-8,') !important; } body.theme-carservice #brandSelect:hover, body.theme-carservice .model-select:hover { border-color: var(--cs-accent) !important; background-color: var(--cs-card) !important; } body.theme-carservice #brandSelect:focus, body.theme-carservice .model-select:focus { border-color: var(--cs-accent) !important; outline: none !important; box-shadow: 0 0 0 4px rgba(255, 184, 28, 0.25) !important; } /* --- Car image card --- */ body.theme-carservice .car-image { border-radius: var(--cs-radius-lg); background: var(--cs-card); box-shadow: var(--cs-shadow); overflow: hidden; } /* --- Summary block --- */ body.theme-carservice .summary { background: var(--cs-card); border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow); padding: 18px 20px; } body.theme-carservice .summary h3 { color: var(--cs-text); } body.theme-carservice .summary hr { border: 0; border-top: 1px solid var(--cs-border); } body.theme-carservice .summary ul li { color: var(--cs-text); } body.theme-carservice .total-row { color: var(--cs-text); } body.theme-carservice #resetSummary { color: var(--cs-text-muted); } body.theme-carservice #resetSummary:hover { color: #fff; background: #e53935; } /* --- Unified summary panel: user-container (black top) + summary + buttons through 管理者表示 share one rounded card with a black separator line between the login bar and the rest. --- */ body.theme-carservice .sticky-container .user-container { background: #1a1a1a; border: 1px solid #1a1a1a; border-bottom: none; border-radius: var(--cs-radius-lg) var(--cs-radius-lg) 0 0; margin-bottom: 0; box-shadow: none; } body.theme-carservice .sticky-container .summary-block { background: var(--cs-card); border: 1px solid var(--cs-border); border-top: 1px solid #1a1a1a; border-radius: 0 0 var(--cs-radius-lg) var(--cs-radius-lg); padding: 18px 16px; box-shadow: var(--cs-shadow); } /* The inner .summary stops being its own card — it merges into the unified panel above. */ body.theme-carservice .sticky-container .summary { background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0; } body.theme-carservice .user-container .user-info, body.theme-carservice .user-container .user-label, body.theme-carservice .user-container .device-name { color: #ffffff; } body.theme-carservice .user-container .user-info:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); } body.theme-carservice .logout-button { background: #1a1a1a; border: 1px solid #ffffff; border-radius: var(--cs-radius-sm); color: #ffffff; } body.theme-carservice .logout-button:hover { background: #ffffff; color: #1a1a1a; border-color: #ffffff; } /* --- Primary CTA: 予約・PDFダウンロードへ進む --- */ body.theme-carservice #generatePdf { background-color: var(--cs-accent) !important; color: #1a1a1a !important; border: none !important; border-radius: var(--cs-radius-md) !important; height: 52px; padding: 0 20px; box-shadow: 0 6px 18px rgba(255, 184, 28, 0.40) !important; font-weight: 700; font-size: 17px; } body.theme-carservice #generatePdf:hover { background-color: var(--cs-accent-hover) !important; color: #1a1a1a !important; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255, 200, 69, 0.55) !important; } /* --- Hide the old お問い合わせ button — replaced by the "お問い合わせフォームへ" button inside the contact card. --- */ body.theme-carservice #contactInquiryBtn { display: none !important; } /* --- Secondary action buttons (warranty / contact / aftercare) --- */ body.theme-carservice .warranty-button { background-color: var(--cs-card) !important; color: var(--cs-text) !important; border: 1px solid var(--cs-border) !important; border-radius: var(--cs-radius-md) !important; box-shadow: var(--cs-shadow) !important; height: 46px; min-height: 46px; max-height: 46px; font-size: 15px; font-weight: 600; } body.theme-carservice .warranty-button:hover { background-color: var(--cs-accent-soft) !important; color: var(--cs-text) !important; border-color: var(--cs-accent) !important; } /* --- Admin display button --- */ body.theme-carservice #adminDisplayBtn { background: transparent !important; border: 1px solid var(--cs-border-strong) !important; border-radius: var(--cs-radius-md) !important; color: var(--cs-text-muted) !important; } body.theme-carservice #adminDisplayBtn:hover { border-color: var(--cs-accent) !important; color: var(--cs-text) !important; background: var(--cs-accent-soft) !important; } /* --- Accordion headers --- */ body.theme-carservice .accordion-header { background-color: var(--cs-card); border: 1px solid var(--cs-border); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow); color: var(--cs-text); padding: 14px 22px; font-size: 16px; } /* Bigger, thinner +/× toggle indicator on the right edge */ body.theme-carservice .accordion-header::after { font-size: 36px; font-weight: 300; } body.theme-carservice .accordion-header:hover { background-color: var(--cs-card); border-color: var(--cs-accent); } body.theme-carservice .accordion-header.open { background-color: transparent; color: var(--cs-text); border-color: transparent; box-shadow: none; } /* Small orange vertical bar pinned to the left edge of the accordion when open — absolutely positioned so it doesn't push the title text to the right. */ body.theme-carservice .accordion-header.open::before { content: ''; position: absolute; left: 5px; top: 50%; transform: translateY(-50%); width: 6px; height: 40px; background: var(--cs-accent); border-radius: 4px; } /* Accordion with selected cards inside keeps the same white background and neutral border as a regular closed accordion; only the badge marks it as having selections. */ body.theme-carservice .accordion-header.has-selections:not(.open) { background-color: var(--cs-card); border-color: var(--cs-border); } body.theme-carservice .accordion-header.has-selections:not(.open):hover { background-color: var(--cs-card); border-color: var(--cs-accent); } body.theme-carservice .accordion-header .selection-badge { background-color: var(--cs-accent); color: #1a1a1a; } /* --- Option cards --- */ body.theme-carservice .option-grid .option-card, body.theme-carservice .option-list .option-card { background: var(--cs-card); border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow); transition: all 0.2s ease; } body.theme-carservice .option-card:hover { background-color: var(--cs-card); border-color: var(--cs-accent); box-shadow: var(--cs-shadow-lg); transform: translateY(-1px); } /* Active border stays at 1px (same as base) to avoid the content reflow caused by the +1px border under box-sizing: border-box. The "second pixel" is faked with a 1px outer box-shadow ring. */ body.theme-carservice .option-card.active { background: #fffaea; border: 1px solid var(--cs-accent) !important; box-shadow: 0 0 0 1px var(--cs-accent), 0 6px 18px rgba(255, 184, 28, 0.30); } /* --- Card checkboxes --- */ body.theme-carservice .option-card input[type="checkbox"] { border: 1.5px solid var(--cs-border-strong); border-radius: 6px; } body.theme-carservice .option-card input[type="checkbox"]:checked { background-color: var(--cs-accent); border-color: var(--cs-accent); } body.theme-carservice .option-card input[type="checkbox"]:checked::after { border-color: #1a1a1a; } /* --- Popular ("人気No.1") banner — yellow chip --- */ body.theme-carservice .option-card[data-id="full_package"] .popular-banner { background: var(--cs-accent); color: #1a1a1a; border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: 13px; box-shadow: 0 2px 6px rgba(255, 184, 28, 0.45); } /* --- Quantity buttons --- */ body.theme-carservice .quantity-btn { border: 1.5px solid var(--cs-text); border-radius: 8px; background: #fff; color: var(--cs-text); } body.theme-carservice .quantity-btn:hover { background: var(--cs-accent); color: #1a1a1a; border-color: var(--cs-accent); } body.theme-carservice .quantity-input { border: 1.5px solid var(--cs-text); border-radius: 8px; } /* --- Modals --- */ body.theme-carservice .modal-content { border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.30); } body.theme-carservice .action-section { border: 1px solid var(--cs-border); border-radius: var(--cs-radius-md); } body.theme-carservice .action-section:hover { border-color: var(--cs-accent); box-shadow: 0 4px 14px rgba(255, 184, 28, 0.20); } body.theme-carservice .customer-name-input, body.theme-carservice .email-input, body.theme-carservice .message-input { border: 1px solid var(--cs-border-strong); border-radius: var(--cs-radius-sm); background: #fff; } body.theme-carservice .customer-name-input:focus, body.theme-carservice .email-input:focus, body.theme-carservice .message-input:focus { border-color: var(--cs-accent); box-shadow: 0 0 0 4px rgba(255, 184, 28, 0.25); } body.theme-carservice .customer-name-note, body.theme-carservice .email-note { background: #f8f9fb; border: 1px solid var(--cs-border); border-radius: var(--cs-radius-sm); } body.theme-carservice .action-button.email-button, body.theme-carservice .action-button.download-button, body.theme-carservice #warrantySendBtn, body.theme-carservice #contactSendBtn, body.theme-carservice #aftercareSendBtn { background: var(--cs-accent) !important; color: #1a1a1a !important; border: none !important; border-radius: var(--cs-radius-md) !important; font-weight: 700; box-shadow: 0 4px 14px rgba(255, 184, 28, 0.40); } body.theme-carservice .action-button.email-button:hover, body.theme-carservice .action-button.download-button:hover, body.theme-carservice #warrantySendBtn:hover, body.theme-carservice #contactSendBtn:hover, body.theme-carservice #aftercareSendBtn:hover { background: var(--cs-accent-hover) !important; } /* --- Brand catch text next to XPEL logo --- */ body.theme-carservice .brand-catch { color: var(--cs-text); } /* --- Container background tint behind the layout --- */ body.theme-carservice .container { background: transparent; }