@charset "utf-8"; /* ============================================================================= COVERBOX — CONSOLIDATED STYLESHEET Sources: blog.css · blog-contents.css · coverbox_motor_insurance_guide.html Organised by: Reset → Tokens → Typography → Layout/Grid → Utility Bar → Header/Nav → Hero → Filters → Sections → Cards → Interactive → Buttons/CTAs → Footer → Animations → Print → Responsive Column system follows Pofo-style 12-col naming convention. ============================================================================= */ /* ============================================================================= 1. RESET ============================================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } a { text-decoration: none; color: inherit; } /* ============================================================================= 2. DESIGN TOKENS (CSS custom properties) ============================================================================= */ :root { /* — Brand palette — */ --cb-red: #e8002a; --cb-dark: #1a1a2e; --cb-nav-dark: #0d1117; --cb-text: #333; --cb-muted: #777; --cb-border: #e5e5e5; --cb-bg: #f7f7f7; --cb-white: #ffffff; /* — Content / blog-contents palette — */ --orange: #d85a30; --orange-light: #f0997b; --orange-pale: #faece7; --dark: #1c1a14; --cream: #faf8f4; --border: #e8e4dc; --text: #2c2a22; --muted: #7a7870; /* — Guide / motor-insurance palette — */ --guide-dark: #1a1a2e; --guide-navy: #16213e; --guide-blue: #0f3460; --guide-red: #c0392b; --guide-border: #e8ecf0; --guide-muted: #7f8c8d; --guide-text: #2c3e50; --guide-bg: #fafbfc; /* — Typography — */ --font-main: "Montserrat", sans-serif; --font-body: "Open Sans", sans-serif; --font-serif: "Playfair Display", Georgia, serif; --font-dm: "DM Sans", sans-serif; --font-libre: "Libre Franklin", "Helvetica Neue", Arial, sans-serif; } /* ============================================================================= 3. TYPOGRAPHY (base body + headings shared across files) ============================================================================= */ body { font-family: var(--font-body); color: var(--cb-text); background: var(--cb-white); line-height: 1.75; } /* Blog-contents body override — apply class="content-page" on */ body.content-page { font-family: var(--font-dm), sans-serif; background: var(--cream); color: var(--text); } /* Motor-guide body override — apply class="guide-page" on */ body.guide-page { font-family: var(--font-libre); background: var(--guide-bg); color: var(--guide-text); } /* ── Shared heading rhythm ── */ h1, h2, h3, h4, h5, h6 { line-height: 1.2; } /* ── Section label + title (blog-contents) ── */ .section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; } .section-label::before { content: ""; display: inline-block; width: 20px; height: 2px; background: var(--orange); border-radius: 2px; } .section-title { font-family: var(--font-serif); font-size: 30px; color: var(--dark); margin-bottom: 32px; font-weight: 700; } /* ── Guide section titles ── */ .guide-section-title { font-family: var(--font-serif); font-size: 24px; font-weight: 700; color: var(--guide-dark); margin-bottom: 6px; letter-spacing: -0.3px; } .section-sub { color: var(--guide-muted); font-size: 14px; font-weight: 400; margin-bottom: 24px; line-height: 1.5; } /* ── Divider ── */ hr.divider { border: none; border-top: 1px solid var(--border); margin: 52px 0; } /* ── Animations ── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); } } /* ============================================================================= 4. LAYOUT & GRID (Pofo-style 12-column system) ============================================================================= */ /* ── Containers ── */ .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .container-sm { max-width: 800px; margin: 0 auto; padding: 0 24px; } .container-md { max-width: 900px; margin: 0 auto; padding: 0 24px; } .container-header { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .content-wrap { padding: 40px 0 20px; } /* ── Row ── */ .row { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } /* ── Columns (Pofo 12-col naming) ── */ [class*="col-"] { padding-left: 15px; padding-right: 15px; width: 100%; } .col-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .col-2 { flex: 0 0 16.6667%; max-width: 16.6667%; } .col-3 { flex: 0 0 25%; max-width: 25%; } .col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .col-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .col-6 { flex: 0 0 50%; max-width: 50%; } .col-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .col-8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .col-9 { flex: 0 0 75%; max-width: 75%; } .col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; } .col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; } .col-12 { flex: 0 0 100%; max-width: 100%; } /* ── md breakpoint (≤1024px) ── */ @media (max-width: 1024px) { .col-md-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; } .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .col-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .col-md-6 { flex: 0 0 50%; max-width: 50%; } .col-md-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .col-md-9 { flex: 0 0 75%; max-width: 75%; } .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; } .col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; } .col-md-12 { flex: 0 0 100%; max-width: 100%; } } /* ── sm breakpoint (≤768px) ── */ @media (max-width: 768px) { .col-sm-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .col-sm-2 { flex: 0 0 16.6667%; max-width: 16.6667%; } .col-sm-3 { flex: 0 0 25%; max-width: 25%; } .col-sm-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .col-sm-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .col-sm-6 { flex: 0 0 50%; max-width: 50%; } .col-sm-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .col-sm-8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .col-sm-9 { flex: 0 0 75%; max-width: 75%; } .col-sm-10 { flex: 0 0 83.3333%; max-width: 83.3333%; } .col-sm-11 { flex: 0 0 91.6667%; max-width: 91.6667%; } .col-sm-12 { flex: 0 0 100%; max-width: 100%; } } /* ── xs breakpoint (≤480px) ── */ @media (max-width: 480px) { .col-xs-12 { flex: 0 0 100%; max-width: 100%; } } /* ── Grid helpers (CSS Grid shorthand for card grids) ── */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .grid-2, .grid-4 { grid-template-columns: 1fr; } } @media (max-width: 560px) { .grid-3 { grid-template-columns: 1fr; } } /* ============================================================================= 5. UTILITY BAR ============================================================================= */ .util-bar { background: #111; color: #aaa; font-size: 11px; font-family: var(--font-main); letter-spacing: 0.5px; padding: 6px 0; display: none; } @media (min-width: 768px) { .util-bar { display: block; } } .util-bar .container { display: flex; justify-content: flex-end; gap: 24px; } /* ============================================================================= 6. HEADER & NAVIGATION ============================================================================= */ /* ── Site header ── */ .site-header { position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); transition: background 0.3s; } /* Light variant (about_us style) */ .site-header.light { background: var(--cb-white); } .site-header.light nav a { color: #222; } .site-header.light .nav-link:hover, .site-header.light .nav-link.active { color: var(--cb-red); } .site-header.light .dropdown-menu { background: var(--cb-white); } .site-header.light .hamburger span { background: #222; } /* Dark variant (products style) */ .site-header.dark { background: var(--cb-nav-dark); } .site-header.dark nav a { color: #e0e0e0; } .site-header.dark .nav-link:hover, .site-header.dark .nav-link.active { color: var(--cb-red); } .site-header.dark .dropdown-menu { background: #1c2030; } .site-header.dark .dropdown-menu a { color: #ccc; } .site-header.dark .hamburger span { background: #fff; } /* ── Nav layout ── */ .nav-wrapper { display: flex; align-items: center; justify-content: space-between; height: 68px; } .logo img { height: 38px; display: block; } nav.main-nav { display: flex; align-items: center; gap: 4px; } .nav-item { position: relative; } .nav-link { font-family: var(--font-main); font-size: 12.5px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; padding: 8px 13px; display: flex; align-items: center; gap: 4px; transition: color 0.2s; white-space: nowrap; } .nav-link .caret { font-size: 9px; opacity: 0.6; transition: transform 0.2s; } .nav-item:hover .caret { transform: rotate(180deg); } .nav-link.active { color: var(--cb-red) !important; } /* ── Dropdown ── */ .dropdown-menu { position: absolute; top: calc(100% + 2px); left: 0; min-width: 210px; border-top: 3px solid var(--cb-red); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity 0.2s, transform 0.2s; z-index: 200; } .nav-item:hover .dropdown-menu { opacity: 1; pointer-events: auto; transform: translateY(0); } .dropdown-menu a { display: block; font-family: var(--font-main); font-size: 11.5px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; padding: 10px 18px; transition: color 0.15s, background 0.15s; } .dropdown-menu a:hover { color: var(--cb-red) !important; background: rgba(232, 0, 42, 0.06); } .dropdown-menu .group-label { font-size: 9px; letter-spacing: 1.2px; font-weight: 700; color: var(--cb-muted) !important; padding: 10px 18px 4px; pointer-events: none; text-transform: uppercase; } .dropdown-menu a.blog-link { color: var(--cb-red) !important; font-weight: 700; } /* ── Hamburger ── */ .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; } .hamburger span { width: 24px; height: 2px; border-radius: 2px; transition: 0.3s; } @media (max-width: 900px) { nav.main-nav { display: none; } .hamburger { display: flex; } } /* ── Guide header band (motor insurance guide) ── */ .header-band { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%); padding: 48px 32px 40px; text-align: center; position: relative; overflow: hidden; } .header-band::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient( ellipse at 30% 50%, rgba(192, 57, 43, 0.08) 0%, transparent 60% ), radial-gradient( ellipse at 70% 50%, rgba(26, 82, 118, 0.08) 0%, transparent 60% ); pointer-events: none; } .header-band h1 { font-family: var(--font-serif); font-size: 32px; font-weight: 700; color: #fff; margin-bottom: 8px; letter-spacing: -0.5px; position: relative; } .header-band p { color: rgba(255, 255, 255, 0.7); font-size: 15px; font-weight: 300; max-width: 620px; margin: 0 auto; line-height: 1.6; position: relative; } .header-band .byline { margin-top: 12px; font-size: 12px; opacity: 0.5; } /* ============================================================================= 7. HERO SECTIONS ============================================================================= */ /* ── Blog listing hero (blog.css) ── */ .blog-hero { background: linear-gradient(135deg, #0d1117 0%, #1a1a2e 60%, #2d0a12 100%); padding: 64px 0 56px; position: relative; overflow: hidden; } .blog-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 60% 80% at 80% 50%, rgba(232, 0, 42, 0.12) 0%, transparent 70% ); } .blog-hero .container { position: relative; } .blog-hero-tag { display: inline-block; background: var(--cb-red); color: #fff; font-family: var(--font-main); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 5px 14px 6px; border-radius: 50px; margin-bottom: 16px; } .blog-hero h1 { font-family: var(--font-main); font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 14px; } .blog-hero p { color: rgba(255, 255, 255, 0.6); font-size: 15px; max-width: 520px; line-height: 1.7; } /* ── Content hero (blog-contents.css) ── */ .hero { background: var(--dark); padding: 80px 24px 72px; text-align: center; position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 0%, #d85a30 0%, transparent 65%), radial-gradient(ellipse 40% 40% at 10% 100%, #993c1d 0%, transparent 60%), radial-gradient(ellipse 30% 40% at 90% 80%, #f0997b 0%, transparent 60%); opacity: 0.22; } .hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 48px 48px; } .hero-inner { position: relative; z-index: 2; } .tag { display: inline-flex; align-items: center; gap: 6px; background: var(--orange); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 16px; border-radius: 20px; margin-bottom: 24px; animation: fadeUp 0.6s ease both; } .hero h1 { font-family: var(--font-serif); font-size: clamp(36px, 7vw, 64px); color: var(--cream); line-height: 1.1; max-width: 760px; margin: 0 auto 20px; animation: fadeUp 0.7s 0.1s ease both; font-weight: 900; } .hero h1 em { font-style: italic; color: var(--orange-light); display: block; } .hero-sub { color: #a8a49a; font-size: 17px; font-weight: 300; max-width: 500px; margin: 0 auto 32px; animation: fadeUp 0.7s 0.2s ease both; line-height: 1.65; } .hero-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; animation: fadeUp 0.7s 0.3s ease both; } .meta-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 20px; padding: 6px 14px; font-size: 12px; color: #a8a49a; backdrop-filter: blur(4px); } /* ============================================================================= 8. FILTER / TAB BAR ============================================================================= */ .filter-bar { background: var(--cb-white); border-bottom: 1px solid var(--cb-border); position: sticky; top: 68px; z-index: 50; } .filter-bar .container { display: flex; align-items: center; gap: 0; overflow-x: auto; scrollbar-width: none; } .filter-bar .container::-webkit-scrollbar { display: none; } .filter-tab { font-family: var(--font-main); font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 14px 20px; color: var(--cb-muted); border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap; transition: 0.2s; } .filter-tab:hover { color: var(--cb-text); } .filter-tab.active { color: var(--cb-red); border-bottom-color: var(--cb-red); } /* ============================================================================= 9. BLOG SECTION WRAPPER ============================================================================= */ .blog-section { padding: 56px 0 80px; background: var(--cb-bg); } /* ============================================================================= 10. CARDS ============================================================================= */ /* ── Featured post card ── */ .featured-post { background: var(--cb-white); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07); display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 40px; transition: transform 0.25s, box-shadow 0.25s; } .featured-post:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); } @media (max-width: 768px) { .featured-post { grid-template-columns: 1fr; } } .featured-img { position: relative !important; background-size: cover !important; overflow: hidden !important; background-position: center; background-repeat: no-repeat !important; min-height: 280px; display: flex; align-items: center; justify-content: center; } /* .featured-img { background: linear-gradient(135deg, #0d1117, #2d0a12); min-height: 280px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } */ .featured-img .img-placeholder { font-size: 72px; opacity: 0.25; } .featured-img .cat-badge { position: absolute; top: 20px; left: 20px; background: var(--cb-red); color: #fff; font-family: var(--font-main); font-size: 9.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 12px 6px; border-radius: 50px; } .featured-content { padding: 40px 36px; display: flex; flex-direction: column; justify-content: center; } .featured-content .meta { font-family: var(--font-main); font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--cb-muted); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; } .meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--cb-muted); } .featured-content h2 { font-family: var(--font-main); font-size: 1.6rem; font-weight: 800; line-height: 1.25; margin-bottom: 14px; color: var(--cb-dark); } .featured-content p { color: var(--cb-muted); font-size: 14px; line-height: 1.75; margin-bottom: 24px; } /* ── Blog post grid ── */ .posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 900px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .posts-grid { grid-template-columns: 1fr; } } .post-card { background: var(--cb-white); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; transition: transform 0.25s, box-shadow 0.25s; } .post-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); } .card-img { height: 180px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 48px; } .card-img .cat-badge { position: absolute; top: 14px; left: 14px; background: var(--cb-red); color: #fff; font-family: var(--font-main); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 4px 10px; border-radius: 2px; } /* Card image colour schemes */ .card-img.scheme-1 { background: linear-gradient(135deg, #0d1117, #1a3a5c); } .card-img.scheme-2 { background: linear-gradient(135deg, #1a1a2e, #3a1a2e); } .card-img.scheme-3 { background: linear-gradient(135deg, #0a2a1a, #1a3a2a); } .card-img.scheme-4 { background: linear-gradient(135deg, #2a1a0a, #3a2a0a); } .card-img.scheme-5 { background: linear-gradient(135deg, #1a0a2a, #2a1a3a); } .card-img.scheme-6 { background: linear-gradient(135deg, #0a1a2a, #1a2a3a); } .card-img .emoji { opacity: 0.3; } .card-body { padding: 22px 22px 26px; flex: 1; display: flex; flex-direction: column; } .card-body .meta { font-family: var(--font-main); font-size: 10.5px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--cb-muted); margin-bottom: 10px; display: flex; gap: 8px; align-items: center; } .card-body h3 { font-family: var(--font-main); font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--cb-dark); margin-bottom: 10px; } .card-body p { font-size: 13px; color: var(--cb-muted); line-height: 1.7; flex: 1; margin-bottom: 18px; } .card-footer-row { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--cb-border); } .author-chip { display: flex; align-items: center; gap: 8px; } .author-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--cb-red); display: flex; align-items: center; justify-content: center; font-family: var(--font-main); font-size: 10px; font-weight: 700; color: #fff; } .author-name { font-family: var(--font-main); font-size: 11px; font-weight: 600; color: var(--cb-text); } .read-time { font-family: var(--font-main); font-size: 10.5px; font-weight: 600; color: var(--cb-muted); } /* ── Intro card (blog-contents) ── */ .intro-card { background: linear-gradient(135deg, #fff 60%, #faece7 100%); border: 1px solid var(--border); border-radius: 20px; padding: 36px 40px; margin: 56px 0 48px; border-left: 5px solid var(--orange); box-shadow: 0 8px 32px rgba(216, 90, 48, 0.07); animation: fadeUp 0.6s 0.4s ease both; } .intro-card p { font-size: 17.5px; color: #4a4740; line-height: 1.85; } .intro-card strong { color: var(--orange); font-weight: 700; } /* ── Step cards ── */ .steps { display: flex; flex-direction: column; gap: 16px; margin-bottom: 52px; } .step { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 28px 32px; display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; position: relative; overflow: hidden; } .step::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--step-color, #d85a30); border-radius: 4px 0 0 4px; opacity: 0; transition: opacity 0.2s; } .step:hover { border-color: var(--step-color, #f0997b); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); transform: translateY(-2px); } .step:hover::after { opacity: 1; } .step-icon { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 26px; background: var(--step-bg, #faece7); } .step-body h3 { font-size: 17px; font-weight: 700; color: var(--dark); margin-bottom: 6px; } .step-body p { font-size: 14.5px; color: #5c5a54; line-height: 1.75; } .step-body .tip { display: inline-flex; align-items: flex-start; gap: 8px; margin-top: 12px; background: var(--cream); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; font-size: 13px; color: #4a4740; line-height: 1.55; } .step-body .tip strong { color: var(--orange); } .tip-icon { flex-shrink: 0; } /* ── Checklist box ── */ .checklist-box { background: var(--dark); border-radius: 24px; padding: 44px 48px; margin: 0 0 52px; position: relative; overflow: hidden; } .checklist-box::before { content: ""; position: absolute; top: -60px; right: -60px; width: 260px; height: 260px; border-radius: 50%; background: var(--orange); opacity: 0.1; } .checklist-box::after { content: ""; position: absolute; bottom: -40px; left: -40px; width: 160px; height: 160px; border-radius: 50%; background: #f0997b; opacity: 0.07; } .checklist-box h3 { font-family: var(--font-serif); font-size: 26px; color: var(--cream); margin-bottom: 28px; position: relative; z-index: 1; } .checklist { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 40px; position: relative; z-index: 1; } .checklist li { font-size: 14px; color: #c4c0b6; display: flex; align-items: center; gap: 12px; } .check-icon { width: 22px; height: 22px; border-radius: 50%; background: var(--orange); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; } /* ── Did-you-know callout ── */ .did-you-know { background: var(--orange-pale); border: 1px solid #f0c0a8; border-radius: 20px; padding: 32px 36px; margin: 0 0 52px; display: flex; gap: 20px; align-items: flex-start; } .dyk-icon { font-size: 32px; line-height: 1; flex-shrink: 0; background: #fff; width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(216, 90, 48, 0.12); } .did-you-know h4 { font-size: 12px; font-weight: 700; color: #993c1d; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; } .did-you-know p { font-size: 14.5px; color: #4a4740; line-height: 1.7; } .did-you-know p strong { color: var(--orange); } /* ── Claim steps (3-col) ── */ .claim-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 52px; } .claim-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 28px 22px; text-align: center; transition: box-shadow 0.2s, transform 0.2s; position: relative; overflow: hidden; } .claim-card:hover { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08); transform: translateY(-3px); } .claim-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--orange), var(--orange-light)); } .claim-icon { font-size: 32px; margin-bottom: 12px; display: block; } .claim-card h4 { font-size: 15px; font-weight: 700; color: var(--dark); margin-bottom: 8px; } .claim-card p { font-size: 13px; color: var(--muted); line-height: 1.65; } /* ── Contact CTA cards ── */ .contact-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 52px; } .contact-card { border-radius: 20px; padding: 32px 28px 28px; display: flex; flex-direction: column; gap: 12px; transition: transform 0.2s; } .contact-card:hover { transform: translateY(-3px); } .contact-card.urgent { background: var(--dark); border: 1px solid #3a3830; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); } .contact-card.support { background: #fff; border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); } .contact-card .cc-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 12px; border-radius: 20px; width: fit-content; } .contact-card.urgent .cc-badge { background: var(--orange); color: #fff; } .contact-card.support .cc-badge { background: #eaf3de; color: #3b6d11; } .contact-card h4 { font-size: 16px; font-weight: 700; margin: 0; } .contact-card.urgent h4 { color: var(--cream); } .contact-card.support h4 { color: var(--dark); } .contact-card p { font-size: 13px; line-height: 1.65; margin: 0; } .contact-card.urgent p { color: #a8a49a; } .contact-card.support p { color: var(--muted); } .contact-card a.phone-link { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-top: 4px; padding: 14px 18px; border-radius: 12px; font-size: 21px; font-weight: 700; font-family: var(--font-dm), sans-serif; letter-spacing: 0.01em; transition: opacity 0.2s, transform 0.15s; } .contact-card a.phone-link:hover { opacity: 0.82; transform: scale(1.02); } .contact-card.urgent a.phone-link { background: var(--orange); color: #fff; } .contact-card.support a.phone-link { background: var(--cream); border: 1px solid var(--border); color: var(--orange); } .phone-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); animation: pulse 1.6s ease-in-out infinite; flex-shrink: 0; } .contact-card.support .phone-dot { background: var(--orange); opacity: 0.5; } .avail-note { font-size: 12px; font-weight: 600; margin: 0 !important; display: flex; align-items: center; gap: 6px; } .contact-card.urgent .avail-note { color: #6b6760; } .contact-card.support .avail-note { color: #a8a49a; } .avail-dot { width: 6px; height: 6px; border-radius: 50%; background: #4caf50; animation: pulse 2s ease-in-out infinite; } /* ── Comparison grid (motor guide) ── */ .comp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 40px; } .comp-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06); border: 1px solid var(--guide-border); } .comp-card-header { padding: 20px 24px 16px; color: #fff; text-align: center; } .comp-card-header h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 700; margin-bottom: 2px; } .comp-card-header span { font-size: 13px; opacity: 0.85; font-weight: 300; } .comp-row { padding: 14px 24px; border-bottom: 1px solid #f0f2f5; display: flex; flex-direction: column; gap: 3px; } .comp-row:last-child { border-bottom: none; } .comp-row:nth-child(odd) { background: var(--guide-bg); } .comp-row-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #95a5a6; } .comp-row-value { font-size: 14px; line-height: 1.5; color: var(--guide-text); } /* ── Tag section (PAYD tags) ── */ .tag-section { background: linear-gradient(135deg, #f8f9fb 0%, #eef1f6 100%); border-radius: 14px; padding: 28px 32px; margin-bottom: 40px; border: 1px solid #e0e5ec; } .tag-header { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .tag-header h3 { font-family: var(--font-serif); font-size: 20px; color: #1a1a2e; margin: 0; } .tag-badge { background: #c0392b; color: #fff; font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px; } .tag-sub { font-size: 13px; color: var(--guide-muted); margin-bottom: 20px; line-height: 1.5; } .tag-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; } .tag-card { background: #fff; border-radius: 10px; padding: 18px 16px; text-align: center; border: 1px solid var(--guide-border); transition: transform 0.15s, box-shadow 0.15s; } .tag-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07); } .tag-card-icon { font-size: 28px; margin-bottom: 8px; } .tag-card-name { font-weight: 700; font-size: 12px; color: #1a1a2e; margin-bottom: 4px; } .tag-card-desc { font-size: 12px; line-height: 1.45; color: #666; } .tag-footer { margin-top: 16px; font-size: 11px; color: #95a5a6; line-height: 1.5; text-align: center; } /* ── Scenario cards ── */ .scenario-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 40px; } .scenario-card { background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04); border: 1px solid var(--guide-border); display: flex; gap: 14px; align-items: flex-start; } .scenario-icon { font-size: 28px; flex-shrink: 0; margin-top: 2px; } .scenario-profile { font-weight: 700; font-size: 14px; color: #1a1a2e; margin-bottom: 2px; } .scenario-km { font-size: 12px; color: var(--guide-muted); margin-bottom: 6px; } .scenario-reason { font-size: 13px; line-height: 1.5; color: #555; } .rec-badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .rec-trad { background: #dbeafe; color: #1a5276; } .rec-payd { background: #fde8e8; color: #c0392b; } /* ── FAQ ── */ .faq-item { background: #fff; border-radius: 10px; margin-bottom: 8px; border: 1px solid var(--guide-border); overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03); } .faq-q { padding: 16px 20px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: #1a1a2e; user-select: none; } .faq-q:hover { background: var(--guide-bg); } .faq-arrow { font-size: 18px; transition: transform 0.2s; color: #95a5a6; flex-shrink: 0; margin-left: 12px; } .faq-item.open .faq-arrow { transform: rotate(180deg); } .faq-a { padding: 0 20px 16px; font-size: 14px; line-height: 1.65; color: #555; display: none; } .faq-item.open .faq-a { display: block; } /* ── Contact box (guide) ── */ .contact-box { background: #fff; border-radius: 12px; padding: 28px 32px; border: 1px solid var(--guide-border); text-align: center; margin-bottom: 20px; } .contact-box h3 { font-family: var(--font-serif); font-size: 20px; color: #1a1a2e; margin-bottom: 8px; } .contact-box p { font-size: 14px; color: #666; line-height: 1.6; max-width: 500px; margin: 0 auto 16px; } .contact-details { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; font-size: 14px; color: var(--guide-text); } /* ── Sompo disclaimer ── */ .sompo-disclaimer { background: #fff; border-radius: 12px; padding: 24px 28px; border: 1px solid var(--guide-border); display: flex; gap: 20px; align-items: flex-start; margin-bottom: 20px; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06); } .sompo-disclaimer-logo { flex-shrink: 0; text-align: center; } .sompo-disclaimer-logo img { width: 90px; height: auto; display: block; } .sompo-disclaimer-divider { width: 1px; background: var(--guide-border); flex-shrink: 0; align-self: stretch; } .sompo-disclaimer-text { font-size: 12px; color: #555; line-height: 1.65; } .sompo-disclaimer-text p { margin-bottom: 6px; } .sompo-disclaimer-text p:last-child { margin: 0; font-style: italic; color: #95a5a6; } .sompo-disclaimer-text a { color: #1a5276; text-decoration: none; } .sompo-disclaimer-text a:hover { text-decoration: underline; } .sompo-disclaimer-text .underwritten-label { color: #c0392b; font-weight: 700; font-size: 12px; display: block; margin-bottom: 4px; } /* ── Important box ── */ .important-box { background: #fff8e1; border-left: 4px solid #f39c12; border-radius: 0 10px 10px 0; padding: 20px 24px; margin-bottom: 40px; } .important-box h4 { font-size: 14px; font-weight: 700; color: #e67e22; margin-bottom: 6px; } .important-box p { font-size: 13px; line-height: 1.6; color: #555; } .important-box p + p { margin-top: 10px; } /* ============================================================================= 11. INTERACTIVE CALCULATOR (motor guide) ============================================================================= */ .calc-section { background: linear-gradient(135deg, #1a1a2e, #16213e); border-radius: 16px; padding: 36px 32px; margin-bottom: 40px; color: #fff; } .calc-section h3 { font-family: var(--font-serif); font-size: 22px; margin-bottom: 4px; } .calc-section .section-sub { color: rgba(255, 255, 255, 0.6); margin-bottom: 20px; } .km-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; } .km-btn { padding: 14px 8px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.05); color: #fff; text-align: center; cursor: pointer; transition: all 0.2s; font-family: var(--font-libre), sans-serif; } .km-btn:hover { border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.1); } .km-btn.active { border-color: #e74c3c; background: rgba(231, 76, 60, 0.15); } .km-btn-num { font-size: 18px; font-weight: 700; display: block; margin-bottom: 2px; } .km-btn-label { font-size: 11px; opacity: 0.7; } .rec-result { background: rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 20px 24px; border: 1px solid rgba(255, 255, 255, 0.1); display: none; } .rec-result.visible { display: block; } .rec-result h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.6; margin-bottom: 6px; font-weight: 600; } .rec-result .plan-name { font-family: var(--font-serif); font-size: 20px; font-weight: 700; margin-bottom: 4px; } .savings-tag { display: inline-block; background: #27ae60; color: #fff; padding: 3px 12px; border-radius: 20px; font-size: 13px; font-weight: 700; } .rec-note { font-size: 13px; opacity: 0.7; } /* ============================================================================= 12. BUTTONS & CALLS-TO-ACTION ============================================================================= */ /* Read more link */ .read-more { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-main); font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--cb-red); border-bottom: 2px solid transparent; padding-bottom: 2px; transition: border-color 0.2s, gap 0.2s; } .read-more:hover { border-bottom-color: var(--cb-red); gap: 12px; } /* CTA banner (blog-contents) */ .cta { background: linear-gradient(135deg, #d85a30 0%, #7a2d10 100%); border-radius: 24px; padding: 52px; text-align: center; color: #fff; position: relative; overflow: hidden; box-shadow: 0 16px 48px rgba(216, 90, 48, 0.3); } .cta::before { content: ""; position: absolute; top: -60px; right: -60px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); } .cta::after { content: ""; position: absolute; bottom: -40px; left: -40px; width: 200px; height: 200px; border-radius: 50%; background: rgba(0, 0, 0, 0.1); } .cta-inner { position: relative; z-index: 1; } .cta h3 { font-family: var(--font-serif); font-size: 30px; margin-bottom: 14px; font-weight: 700; } .cta p { font-size: 16px; opacity: 0.88; max-width: 460px; margin: 0 auto 28px; line-height: 1.7; } .cta a { display: inline-block; background: #fff; color: var(--orange); font-size: 14px; font-weight: 700; padding: 15px 40px; border-radius: 40px; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; letter-spacing: 0.01em; } .cta a:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); } /* WhatsApp button */ .wa-btn { display: inline-flex; align-items: center; gap: 8px; background: #25d366; color: #fff; text-decoration: none; padding: 12px 28px; border-radius: 50px; font-size: 14px; font-weight: 600; font-family: var(--font-libre), sans-serif; margin-top: 16px; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 3px 14px rgba(37, 211, 102, 0.35); } .wa-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(37, 211, 102, 0.45); } .wa-btn svg { flex-shrink: 0; } /* WhatsApp float button */ .wa-float { position: fixed; bottom: 24px; left: 24px; background: #25d366; color: #fff; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4); z-index: 100; transition: transform 0.2s, box-shadow 0.2s; text-decoration: none; } .wa-float:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(37, 211, 102, 0.5); } /* Print button */ .print-btn { position: fixed; bottom: 24px; right: 24px; background: linear-gradient(135deg, #c0392b, #e74c3c); color: #fff; border: none; padding: 14px 28px; border-radius: 50px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 20px rgba(192, 57, 43, 0.35); z-index: 100; display: flex; align-items: center; gap: 8px; transition: transform 0.2s, box-shadow 0.2s; font-family: var(--font-libre), sans-serif; } .print-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(192, 57, 43, 0.45); } /* Theme toggle (demo) */ .theme-toggle { position: fixed; bottom: 24px; right: 24px; z-index: 999; display: flex; flex-direction: column; gap: 8px; } .theme-btn { font-family: var(--font-main); font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 8px 16px; border: 2px solid var(--cb-red); border-radius: 4px; cursor: pointer; transition: 0.2s; } .theme-btn.active, .theme-btn:hover { background: var(--cb-red); color: #fff; } .theme-btn:not(.active) { background: #fff; color: var(--cb-red); } /* Pagination */ .pagination { margin-top: 48px; display: flex; align-items: center; justify-content: center; gap: 6px; } .page-btn { font-family: var(--font-main); font-size: 12px; font-weight: 700; width: 38px; height: 38px; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1.5px solid var(--cb-border); color: var(--cb-text); transition: 0.2s; background: var(--cb-white); } .page-btn:hover, .page-btn.active { background: var(--cb-red); border-color: var(--cb-red); color: #fff; } /* ============================================================================= 13. FOOTER ============================================================================= */ /* ── Blog site footer ── */ .site-footer { background: #111; color: #aaa; padding: 48px 0 28px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 36px; } .footer-brand img { height: 32px; margin-bottom: 16px; filter: brightness(0) invert(1); opacity: 0.8; } .footer-brand p { font-size: 12.5px; line-height: 1.8; max-width: 280px; } .footer-col h4 { font-family: var(--font-main); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; margin-bottom: 16px; } .footer-col a { display: block; font-size: 12.5px; color: #888; margin-bottom: 8px; transition: color 0.15s; } .footer-col a:hover { color: var(--cb-red); } .footer-bottom { border-top: 1px solid #222; padding-top: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12px; } .footer-bottom a { color: #666; margin-left: 16px; transition: color 0.15s; } .footer-bottom a:hover { color: var(--cb-red); } /* ── Blog-contents footer note ── */ .footer-note { text-align: center; font-size: 13px; color: #a8a49a; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--border); line-height: 1.8; } .footer-note a { color: var(--orange); text-decoration: none; } /* ── Guide footer note (overrides .footer-note within guide context) ── */ .guide-page .footer-note, .footer-note.guide { padding: 32px 24px 60px; color: #95a5a6; font-size: 12px; border-top: 1px solid var(--guide-border); margin-top: 60px; } /* ============================================================================= 14. PRINT STYLES ============================================================================= */ @media print { .print-btn, .wa-float { display: none !important; } .header-band, .comp-card-header, .calc-section, .rec-badge, .savings-tag, .important-box, .km-btn.active, .tag-section, .tag-badge, .tag-card { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .faq-a { display: block !important; } .faq-arrow { display: none !important; } .scenario-card, .comp-card, .faq-item { break-inside: avoid; page-break-inside: avoid; } body { background: #fff !important; } .rec-result { display: none !important; } } /* ============================================================================= 15. RESPONSIVE OVERRIDES ============================================================================= */ /* ── ≤900px ── */ @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } /* ── ≤768px ── */ @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } .comp-grid, .scenario-grid { grid-template-columns: 1fr; } .contact-cta { grid-template-columns: 1fr; } .header-band h1 { font-size: 24px; } .header-band { padding: 32px 20px 28px; } .km-options { grid-template-columns: 1fr 1fr; } .sompo-disclaimer { flex-direction: column; align-items: center; text-align: center; } .sompo-disclaimer-divider { display: none; } } /* ── ≤600px ── */ @media (max-width: 600px) { .intro-card { padding: 28px 24px; } .checklist-box { padding: 32px 28px; } .cta { padding: 40px 28px; } .step { grid-template-columns: 52px 1fr; padding: 22px 20px; } } /* ── ≤580px ── */ @media (max-width: 580px) { .claim-steps { grid-template-columns: 1fr; } .checklist { grid-template-columns: 1fr; } } /* ── ≤480px ── */ @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } } /* ── ≤700px (guide-specific) ── */ @media (max-width: 700px) { .km-options { grid-template-columns: 1fr; } .tag-grid { grid-template-columns: 1fr 1fr; } }