/* ========================================================================== FULLDOT NEWS - King News Portal & BOUTIQUE LUXURY ARTICLE DESIGN SYSTEM (含總編輯賴家榮專屬名刊風格、螢光筆劃重點特效 .highlight-yellow & .highlight-blue) ========================================================================== */ /* Webfonts load via in each view's (preconnect + stylesheet). An @import here would serialise the download behind style.css. */ :root { /* ========================================================== COLOUR SYSTEM - one anchor, one accent, one action. Gold is DECORATIVE ONLY (logo, rules, borders, fills): #c8a24a on white is 2.41:1, so never gold text on white. Anything clickable uses --color-action. ========================================================== */ /* Anchor / chrome (60%) */ --color-ink: #0b1329; --color-ink-soft: #0f172a; --color-ink-mid: #1e293b; /* Brand gold (10%) - 7.70:1 on --color-ink */ --color-gold: #c8a24a; --color-gold-deep: #a8842f; --color-gold-pale: #f6eedc; --color-gold-glow: rgba(200, 162, 74, 0.15); --color-gold-border: rgba(200, 162, 74, 0.35); --color-gold-text: #8a6a1f; /* 5.04:1 - the only gold safe on white */ /* Action - links, CTAs, anything clickable. 7.00:1 on white */ --color-action: #1d4ed8; --color-action-hover: #1e40af; /* Live / breaking only */ --color-live: #c81e1e; /* Legacy aliases, remapped onto the new tokens. Do not use in new code. */ --color-king-navy: var(--color-ink); --color-king-navy-soft: var(--color-ink-soft); --color-king-navy-mid: var(--color-ink-mid); --color-king-amber: var(--color-gold); --color-king-amber-deep: var(--color-gold-deep); --color-king-amber-light: var(--color-gold-pale); --color-king-amber-glow: var(--color-gold-glow); --color-king-yellow: var(--color-gold); --color-king-yellow-hover: var(--color-gold-deep); --color-king-gold: var(--color-gold); --color-king-gold-light: var(--color-gold-pale); --color-king-blue: var(--color-action); --color-king-blue-soft: var(--color-action-hover); /* Ceramic White / Cloud Gray Background (30%) */ --color-bg-white: #ffffff; --color-bg-soft: #f8fafc; --color-bg-warm: #f9fafb; /* Text Hierarchy */ --color-text-dark: #0b1329; --color-text-body: #1e293b; --color-text-muted: #475569; --color-text-light: #64748b; /* 4.76:1 - was #94a3b8 at 2.56:1 */ /* Borders */ --color-border: #e2e8f0; --color-border-gold: var(--color-gold-border); /* ========================================================== TYPOGRAPHY Noto Serif TC has full Traditional Chinese coverage. The previous Shippori Mincho is a Japanese face missing 的 國 臺 灣 賴 榮 骨 內, so headlines silently fell back to PMingLiU mid-word. ========================================================== */ --font-headline: 'Noto Serif TC', 'Songti TC', serif; --font-sans: 'Inter', 'Noto Sans TC', system-ui, sans-serif; --font-serif-luxury: 'Noto Serif TC', serif; /* Type scale. Nine steps, largest to smallest, replacing 21 ad-hoc values. Only the brand lockup and the drop cap sit outside it, both on purpose. */ --fs-display: 2.5rem; /* 40 - article title */ --fs-h1: 1.875rem; /* 30 - page / section headline */ --fs-h2: 1.5rem; /* 24 - card headline */ --fs-h3: 1.3125rem; /* 21 - sub-headline */ --fs-body: 1.125rem; /* 18 - article body */ --fs-lead: 1rem; /* 16 - standfirst, card title */ --fs-list: 0.875rem; /* 14 - list, excerpt, UI */ --fs-meta: 0.8125rem; /* 13 - timestamp, source */ --fs-label: 0.75rem; /* 12 - badge; hard minimum */ /* Reading measure - 38-42 CJK characters */ --measure: 720px; --transition-fast: 0.25s ease; } /* Global Reset */ * { box-sizing: border-box; margin: 0; padding: 0; font-display: swap; } body { font-family: var(--font-sans); color: var(--color-text-dark); background-color: var(--color-bg-white); line-height: 1.8; overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { text-decoration: none; color: inherit; transition: color var(--transition-fast); } a:hover { color: var(--color-action); } /* ========================================================================== BOOTSTRAP UTILITY REMAP .text-warning (76 uses) and .btn-warning (13 uses) were shipping Bootstrap's #ffc107, so the most-used gold on the site was never a token. Remapped here rather than editing 89 call sites. ========================================================================== */ .text-warning { --bs-text-opacity: 1; color: var(--color-gold) !important; } /* Gold on a light surface is 2.41:1 - darken it there. */ .bg-white .text-warning, .bg-light .text-warning, .sidebar-widget .text-warning { color: var(--color-gold-text) !important; } .btn-warning { --bs-btn-bg: var(--color-gold); --bs-btn-border-color: var(--color-gold); --bs-btn-color: var(--color-ink); --bs-btn-hover-bg: var(--color-gold-deep); --bs-btn-hover-border-color: var(--color-gold-deep); --bs-btn-hover-color: #ffffff; --bs-btn-active-bg: var(--color-gold-deep); --bs-btn-active-border-color: var(--color-gold-deep); --bs-btn-active-color: #ffffff; font-weight: 700; } /* Bootstrap headings and .small ship their own sizes (and RFS viewport scaling), which is where the last off-scale values came from: 28.8, 28, 20, 13.5. Pinned to the scale here. Declared before the components so any component class still wins. */ h1, .h1 { font-size: var(--fs-h1); } h2, .h2 { font-size: var(--fs-h2); } h3, .h3 { font-size: var(--fs-h3); } h4, .h4 { font-size: var(--fs-h3); } h5, .h5 { font-size: var(--fs-lead); } h6, .h6 { font-size: var(--fs-lead); } small, .small { font-size: var(--fs-meta); } .badge { font-size: var(--fs-label); } .lead { font-size: var(--fs-body); } .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-size: var(--fs-display); } .fs-1 { font-size: var(--fs-display) !important; } .fs-2 { font-size: var(--fs-h1) !important; } .fs-3 { font-size: var(--fs-h2) !important; } .fs-4 { font-size: var(--fs-h3) !important; } .fs-5 { font-size: var(--fs-body) !important; } .fs-6 { font-size: var(--fs-lead) !important; } .bg-warning { background-color: var(--color-gold) !important; } .border-warning { border-color: var(--color-gold) !important; } .text-primary { color: var(--color-action) !important; } .text-danger { color: var(--color-live) !important; } .btn-primary { --bs-btn-bg: var(--color-action); --bs-btn-border-color: var(--color-action); --bs-btn-hover-bg: var(--color-action-hover); --bs-btn-hover-border-color: var(--color-action-hover); } /* Visible keyboard focus - Bootstrap's default ring disappears on navy */ a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 2px; box-shadow: none; } /* ========================================================================== FLUORESCENT HIGHLIGHTER EFFECT (螢光筆劃重點特效) ========================================================================== */ .highlight-yellow { background: linear-gradient(120deg, rgba(200, 162, 74, 0.35) 0%, rgba(200, 162, 74, 0.35) 100%); padding: 2px 8px; border-radius: 4px; font-weight: 700; color: #0b1329; box-shadow: 0 1px 4px var(--color-gold-glow); display: inline; } .highlight-blue { background: linear-gradient(120deg, rgba(147, 197, 253, 0.5) 0%, rgba(147, 197, 253, 0.5) 100%); padding: 2px 8px; border-radius: 4px; font-weight: 700; color: #0f172a; display: inline; } .highlight-pink { background: linear-gradient(120deg, rgba(251, 113, 133, 0.4) 0%, rgba(251, 113, 133, 0.4) 100%); padding: 2px 8px; border-radius: 4px; font-weight: 700; color: #0f172a; display: inline; } /* Top Utility Header Bar */ .top-utility-bar { border-bottom: 1px solid var(--color-border); padding: 8px 0; font-size: var(--fs-meta); color: var(--color-text-muted); background-color: #ffffff; white-space: nowrap; } /* ========================================================================== BRAND LOCKUP Three tiers from one component: full lockup on desktop, no tagline below 992px, compact mark + wordmark below 576px. The old artwork scaled the whole 540x120 canvas to 50% in the header, which rendered the tagline at 7px; here the tagline is dropped rather than shrunk. ========================================================================== */ .site-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; line-height: 1; } .site-logo:hover { color: inherit; } .site-logo:hover .site-logo__ring { stroke: var(--color-gold-deep); } .site-logo__mark { width: 46px; height: 46px; flex-shrink: 0; } /* Three shapes only. The previous emblem had a stroked circle, two dashed orbit ellipses, a core, a highlight and three satellites, which turned to mud at the 40px it actually renders at. */ .site-logo__orb { fill: var(--color-ink); } .site-logo__ring { fill: none; stroke: var(--color-gold); stroke-width: 5; transition: stroke var(--transition-fast); } .site-logo__dot { fill: var(--color-gold); } .site-logo__text { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .site-logo__line { display: flex; align-items: center; gap: 8px; } /* The lockup keeps its own px metrics on purpose: a brand mark's internal proportions should not shift when the body type scale is retuned. */ .site-logo__word { font-family: var(--font-sans); font-size: 30px; font-weight: 900; letter-spacing: -0.02em; color: var(--color-ink); } /* 3.50:1 - passes AA for large bold text. Plain --color-gold is 2.41:1. */ .site-logo__word span { color: var(--color-gold-deep); } .site-logo__badge { font-family: var(--font-sans); font-size: 14px; font-weight: 800; font-style: italic; letter-spacing: 0.04em; color: var(--color-gold); background-color: var(--color-ink); border-radius: 4px; padding: 3px 8px; } .site-logo__tagline { font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.05em; color: var(--color-text-muted); white-space: nowrap; } /* On dark surfaces (footer) */ .site-logo--light .site-logo__orb { fill: #ffffff; fill-opacity: 0.08; } .site-logo--light .site-logo__word { color: #ffffff; } .site-logo--light .site-logo__word span { color: var(--color-gold); } .site-logo--light .site-logo__badge { background-color: var(--color-gold); color: var(--color-ink); } .site-logo--light .site-logo__tagline { color: rgba(255, 255, 255, 0.7); } @media (max-width: 991px) { .site-logo { gap: 10px; } .site-logo__mark { width: 40px; height: 40px; } .site-logo__word { font-size: 26px; } .site-logo__tagline { display: none; } } @media (max-width: 575px) { .site-logo__mark { width: 34px; height: 34px; } .site-logo__word { font-size: 21px; } .site-logo__badge { font-size: 12px; padding: 2px 6px; } } /* King News Main Logo Header */ .king-header { border-bottom: 1px solid #e2e8f0; padding: 14px 0; background-color: #ffffff; position: sticky; top: 0; z-index: 1030; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); } /* Navigation Bar - Executive Midnight Navy with Champagne Gold Accent */ .king-nav-bar { background-color: #0b1329; border-bottom: 2px solid var(--color-gold); padding: 0; position: relative; box-shadow: 0 4px 20px rgba(11, 19, 41, 0.35); } .king-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 6px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; white-space: nowrap; } .king-nav-inner::-webkit-scrollbar { display: none; } .king-nav-link { font-size: var(--fs-list); font-weight: 700; color: #ffffff; padding: 12px 14px; display: inline-block; white-space: nowrap; transition: all 0.2s ease; flex-shrink: 0; text-decoration: none; border-bottom: 3px solid transparent; } .king-nav-link:hover, .king-nav-link.active { color: var(--color-gold); background-color: var(--color-gold-glow); border-bottom: 3px solid var(--color-gold); } /* Badges - Unique Category Colors for High Visual Identification */ /* Every category badge gets the same base. Previously .badge-cat-frontier and friends set colour only, so the same badge rendered at 16px inside the hero overlay and 10.4px in the list - no padding or radius in either. */ .badge-cat-base, .badge-cat-frontier, .badge-cat-agents, .badge-cat-enterprise, .badge-cat-chips, .badge-cat-safety, .badge-cat-media, .badge-yellow, .badge-blue, .badge-red { font-size: var(--fs-label); line-height: 1.4; font-weight: 800; padding: 4px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; display: inline-block; margin-bottom: 8px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } /* 1. Frontier AI / 前沿模型: Champagne Amber Gold */ /* Category fills are flat and sit in one luminance band (7.5-8.3:1 against the ink text), so the six read as a family rather than six loose hues. They stay light because they overlay photography. */ .badge-cat-frontier, .badge-yellow { background-color: var(--color-gold); color: var(--color-ink); } /* 2. AI Agents / 自主代理: Electric Blue */ .badge-cat-agents, .badge-blue { background-color: #7fb3f5; color: var(--color-ink); } /* 3. Enterprise AI / 企業落地: Emerald Green */ .badge-cat-enterprise { background-color: #5fc9a5; color: var(--color-ink); } /* 4. Chips & Energy / 晶片算力: Flame Orange/Red */ .badge-cat-chips { background-color: #f0997b; color: var(--color-ink); } /* 5. Safety & Governance / 法規治理: Royal Purple */ .badge-cat-safety { background-color: #afa9ec; color: var(--color-ink); } /* 6. Generative Media / 生成影音: Cyber Cyan */ .badge-cat-media { background-color: #5bc3d6; color: var(--color-ink); } /* Reserved for breaking / live only - the one red on the site */ .badge-red { background-color: var(--color-live); color: #ffffff; font-size: var(--fs-label); font-weight: 800; padding: 3px 8px; border-radius: 2px; text-transform: uppercase; display: inline-block; margin-bottom: 8px; white-space: nowrap; } /* Ad Placement Zones */ .ad-label { font-size: var(--fs-label); font-weight: 700; letter-spacing: 1px; color: var(--color-text-light); text-transform: uppercase; margin-bottom: 4px; display: block; text-align: center; } .ad-banner-top { background: linear-gradient(135deg, #0f172a 0%, #0b1329 100%); color: #ffffff; border-radius: 6px; padding: 18px 25px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--color-gold-border); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); margin: 20px 0 0 0; } .ad-banner-top-title { font-size: var(--fs-lead); font-weight: 800; color: var(--color-king-yellow); margin-bottom: 2px; } .ad-banner-top-sub { font-size: var(--fs-list); color: rgba(255, 255, 255, 0.8); } .ad-banner-sidebar { background: linear-gradient(180deg, #0b1329 0%, #0f172a 100%); color: #ffffff; border-radius: 6px; padding: 25px 20px; text-align: center; border: 1px solid var(--color-gold-border); } .ad-banner-sidebar-title { font-size: var(--fs-lead); font-weight: 800; color: var(--color-king-yellow); margin-bottom: 8px; line-height: 1.35; } .ad-banner-sidebar-desc { font-size: var(--fs-list); color: rgba(255, 255, 255, 0.8); line-height: 1.6; margin-bottom: 16px; } /* 5-Block Hero Mosaic Section */ .hero-mosaic-section { padding: 20px 0 40px; } .mosaic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .mosaic-large-card { position: relative; height: 440px; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } /* Photos stay in colour. On a news grid the image is the primary scanning cue, and a fully desaturated grid reads as one grey mass. */ .mosaic-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s ease; } .mosaic-large-card:hover .mosaic-img, .mosaic-small-card:hover .mosaic-img, .is-read-card .mosaic-img { filter: brightness(1.06); transform: scale(1.06); } .mosaic-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.88) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 25px; color: #ffffff; } .mosaic-large-title { font-family: var(--font-headline); font-size: var(--fs-h2); font-weight: 800; line-height: 1.35; color: #ffffff; margin-bottom: 10px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); word-break: break-word; } .mosaic-meta { font-size: var(--fs-meta); color: rgba(255, 255, 255, 0.82); display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; min-width: 0; } /* Source names run long; truncate rather than bleed past the card edge */ .mosaic-meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mosaic-sub-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 15px; } .mosaic-small-card { position: relative; height: 212px; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .mosaic-small-title { font-family: var(--font-headline); font-size: var(--fs-lead); font-weight: 700; line-height: 1.35; color: #ffffff; margin-bottom: 6px; word-break: break-word; } /* YouTube Video Spotlight Block */ .youtube-spotlight-card { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color: #ffffff; border-radius: 12px; padding: 28px 30px; margin: 40px 0; border: 1px solid var(--color-gold-border); box-shadow: 0 12px 35px rgba(15, 23, 42, 0.18); position: relative; overflow: hidden; } .youtube-spotlight-card::before { content: ''; position: absolute; top: 0; left: 0; width: 6px; height: 100%; background-color: #dc2626; } .youtube-player-responsive { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 8px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); } .youtube-player-responsive iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .youtube-spotlight-title { font-family: var(--font-headline); font-size: var(--fs-h3); font-weight: 800; line-height: 1.4; color: #ffffff; margin-bottom: 12px; } .youtube-spotlight-desc { font-size: var(--fs-list); color: rgba(255, 255, 255, 0.8); line-height: 1.7; margin-bottom: 20px; } .youtube-spotlight-meta { font-size: var(--fs-meta); color: rgba(255, 255, 255, 0.6); display: flex; align-items: center; gap: 15px; flex-wrap: wrap; } /* Main Section 70/30 Split Layout */ .main-news-section { padding: 20px 0 60px; } .section-block-title { font-family: var(--font-headline); font-size: var(--fs-body); font-weight: 800; color: var(--color-king-navy); border-bottom: 2px solid var(--color-king-navy); padding-bottom: 8px; margin-bottom: 25px; display: flex; justify-content: space-between; align-items: center; gap: 15px; } .section-block-title > span { white-space: nowrap; flex-shrink: 0; } .section-filter-tabs { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; white-space: nowrap; max-width: 65%; flex-shrink: 1; } .section-filter-tabs::-webkit-scrollbar { display: none; } .btn-filter-tab { background: none; border: none; color: var(--color-text-muted); font-family: var(--font-sans); font-size: var(--fs-meta); font-weight: 700; padding: 4px 8px; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; flex-shrink: 0; } .btn-filter-tab:hover { color: var(--color-king-blue); background-color: rgba(29, 78, 216, 0.06); } .btn-filter-tab.active { color: var(--color-king-blue); background-color: rgba(29, 78, 216, 0.12); border-bottom: 2px solid var(--color-king-blue); } .popular-row-item { display: flex; gap: 15px; margin-bottom: 20px; } .popular-row-img { width: 110px; height: 80px; object-fit: cover; border-radius: 4px; flex-shrink: 0; transition: filter 0.4s ease; } .popular-row-item:hover .popular-row-img, .is-read-card .popular-row-img { filter: brightness(1.06); } .popular-row-title { font-family: var(--font-headline); font-size: var(--fs-lead); font-weight: 700; line-height: 1.4; color: var(--color-text-dark); margin-bottom: 4px; word-break: break-word; } .popular-row-excerpt { font-size: var(--fs-list); color: var(--color-text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Sidebar Widgets */ .sidebar-widget { background-color: var(--color-bg-soft); border-radius: 6px; padding: 24px; margin-bottom: 25px; border: 1px solid var(--color-border); } .widget-title-black { background-color: var(--color-ink); color: #ffffff; padding: 8px 16px; font-family: var(--font-headline); font-size: var(--fs-lead); font-weight: 700; margin: -24px -24px 20px -24px; border-radius: 6px 6px 0 0; white-space: nowrap; } .sidebar-profile-box { text-align: center; } .sidebar-avatar { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-king-blue); margin-bottom: 10px; } .sidebar-profile-name { font-family: var(--font-headline); font-size: var(--fs-body); font-weight: 800; color: var(--color-text-dark); } .sidebar-profile-title { font-size: var(--fs-meta); color: var(--color-king-blue); font-weight: 700; margin-bottom: 10px; } .sidebar-profile-bio { font-size: var(--fs-list); color: var(--color-text-muted); line-height: 1.6; text-align: left; } /* BOUTIQUE LUXURY ARTICLE SYSTEM */ .article-detail-section { padding: 40px 0 80px; background: linear-gradient(180deg, #ffffff 0%, #faf8f5 100%); } .boutique-article-container { max-width: 1140px; margin: 0 auto; padding: 0 24px; } .boutique-meta-bar { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border-gold); padding-bottom: 15px; margin-bottom: 25px; } .boutique-badge-gold { background: linear-gradient(135deg, #0b1329 0%, #0f172a 100%); color: var(--color-gold); border: 1px solid var(--color-gold-border); font-size: var(--fs-label); font-weight: 800; padding: 5px 14px; border-radius: 4px; letter-spacing: 1px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; } .btn-boutique-3d { background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-deep) 100%); color: #0b1329 !important; font-weight: 800; font-size: var(--fs-list); padding: 8px 22px; border-radius: 30px; border: none; box-shadow: 0 4px 15px rgba(200, 162, 74, 0.35); transition: all 0.3s ease; } .btn-boutique-3d:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(200, 162, 74, 0.5); } .boutique-title { font-family: var(--font-headline); font-size: var(--fs-display); font-weight: 800; line-height: 1.32; color: var(--color-king-navy); margin-bottom: 20px; letter-spacing: -0.5px; word-break: break-word; } .boutique-author-card { background-color: var(--color-king-gold-light); border-left: 3px solid var(--color-king-gold); border-radius: 0 8px 8px 0; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 35px; flex-wrap: wrap; gap: 15px; } .author-info-left { display: flex; align-items: center; gap: 14px; } .author-avatar-lg { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-king-gold); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .author-name-title { font-weight: 800; font-size: var(--fs-lead); color: var(--color-king-navy); } .author-credentials-sub { font-size: var(--fs-meta); color: var(--color-text-muted); } .boutique-hero-wrap { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12); margin-bottom: 35px; border: 1px solid rgba(0, 0, 0, 0.08); } .boutique-hero-img { width: 100%; max-height: 540px; object-fit: cover; } .boutique-summary-box { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color: #ffffff; border: 1px solid var(--color-king-gold); border-radius: 12px; padding: 28px 32px; margin-bottom: 45px; box-shadow: 0 15px 35px rgba(15, 23, 42, 0.18); position: relative; } .summary-box-title { font-family: var(--font-headline); font-size: var(--fs-body); font-weight: 800; color: var(--color-king-yellow); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); padding-bottom: 10px; } .summary-box-content { font-size: var(--fs-lead); line-height: 1.85; color: rgba(255, 255, 255, 0.92); margin-bottom: 0; } /* Reading measure. Was 1092px at 18.4px = 59 CJK characters per line; a comfortable Chinese measure is 38-42, and past ~45 the eye loses the start of the next line on the return sweep. */ .boutique-body-content { font-size: var(--fs-body); line-height: 1.85; color: var(--color-text-body); max-width: var(--measure); margin-left: auto; margin-right: auto; } .boutique-body-content p { margin-bottom: 1.6em; } /* Keep headline, meta and standfirst on the same optical column as the body. The hero image deliberately stays full width. */ .boutique-title, .boutique-meta-bar, .boutique-author-card, .boutique-summary-box, .prominent-source-card { max-width: var(--measure); margin-left: auto; margin-right: auto; } /* Drop cap is sized against the paragraph it initialises, not the scale. */ .drop-cap::first-letter { font-family: var(--font-serif-luxury); font-size: 3.8rem; font-weight: 700; float: left; line-height: 0.8; margin-right: 12px; margin-top: 4px; color: var(--color-king-navy); background: linear-gradient(135deg, #0f172a 0%, var(--color-action) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .boutique-body-content h2 { font-family: var(--font-headline); font-size: var(--fs-h2); font-weight: 800; color: var(--color-king-navy); margin: 50px 0 22px; padding-left: 16px; border-left: 4px solid var(--color-king-gold); } .prominent-source-card { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color: #ffffff; border-radius: 12px; padding: 32px 35px; margin: 50px 0; border: 1px solid var(--color-king-gold); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.2); position: relative; overflow: hidden; } .prominent-source-card::before { content: ''; position: absolute; top: 0; left: 0; width: 6px; height: 100%; background: linear-gradient(180deg, var(--color-gold) 0%, var(--color-action) 100%); } .source-card-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.12); padding-bottom: 14px; margin-bottom: 20px; } .source-card-title { font-family: var(--font-headline); font-size: var(--fs-body); font-weight: 800; color: var(--color-king-yellow); display: flex; align-items: center; gap: 10px; } .source-card-badge { background-color: rgba(29, 78, 216, 0.3); border: 1px solid var(--color-king-blue); color: #ffffff; font-size: var(--fs-label); padding: 3px 10px; border-radius: 12px; font-weight: 700; letter-spacing: 1px; } .source-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; font-size: var(--fs-list); color: rgba(255, 255, 255, 0.88); line-height: 1.7; } .source-detail-item { display: flex; flex-direction: column; } .source-detail-label { font-size: var(--fs-label); color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; } .source-detail-value { font-weight: 700; color: #ffffff; } .btn-source-link { background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-deep) 100%); color: #0b1329 !important; font-weight: 800; font-size: var(--fs-list); padding: 10px 24px; border-radius: 4px; display: inline-flex; align-items: center; gap: 8px; transition: all var(--transition-fast); } .btn-source-link:hover { transform: translateY(-2px); box-shadow: 0 6px 20px var(--color-gold-border); } /* StPageFlip Plugin Modal Styles */ .st-flip-modal { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .st-flip-modal.active { opacity: 1; pointer-events: auto; } .st-flip-modal-backdrop { position: absolute; inset: 0; background: rgba(8, 13, 26, 0.88); backdrop-filter: blur(16px); } .st-flip-modal-content { position: relative; z-index: 10001; width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 20px 0 30px 0; } .st-flip-header { width: 90%; max-width: 1100px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding-bottom: 12px; } .st-flip-stage-wrap { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; } .st-page-flip-book { box-shadow: 0 45px 100px rgba(0, 0, 0, 0.85); border-radius: 8px; } .st-page { background-color: #faf8f2; overflow: hidden; box-shadow: inset 0 0 30px rgba(0,0,0,0.05); } .st-page.page-cover { background-color: #f5f2e9; border: 1px solid #cbd5e1; } .st-page.page-soft { background-color: #faf8f2; } .st-page-content { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } /* Footer */ .king-footer { background: linear-gradient(180deg, #0b1329 0%, #070d1a 100%); color: rgba(255, 255, 255, 0.75); padding: 50px 0 25px; border-top: 3px solid var(--color-gold); } /* ========================================================================== EMPHASIS BLOCKS - ONE DARK TREATMENT ONLY Five components used to share the same navy gradient + gold border: the two ad slots, the video spotlight, the citation card and the article standfirst. Five different levels of importance rendered identically, so none of them read as important. Dark is now reserved for page chrome (nav, footer, page hero) and for a single editorial block: .boutique-summary-box. Everything below moves to a light surface with a coloured rule, which also makes the ad slots read as sponsorship rather than as editorial. ========================================================================== */ .ad-banner-top { background: var(--color-gold-pale); color: var(--color-text-body); border: 1px solid var(--color-gold-border); border-left: 4px solid var(--color-gold); border-radius: 0 6px 6px 0; box-shadow: none; } .ad-banner-top-title { color: var(--color-ink); } .ad-banner-top-sub { color: var(--color-text-muted); } .ad-banner-sidebar { background: var(--color-gold-pale); color: var(--color-text-body); border: 1px solid var(--color-gold-border); border-left: 4px solid var(--color-gold); border-radius: 0 6px 6px 0; } .ad-banner-sidebar-title { color: var(--color-ink); } .ad-banner-sidebar-desc { color: var(--color-text-muted); } /* Ad placements 2 and 3 were built from inline utilities rather than a component class; giving them one keeps all four ad slots identical. */ .ad-banner-feature { background: var(--color-gold-pale); color: var(--color-text-body); border: 1px solid var(--color-gold-border); border-left: 4px solid var(--color-gold); border-radius: 0 6px 6px 0; } .ad-banner-feature h2, .ad-banner-feature h3 { color: var(--color-ink); } .youtube-spotlight-card { background: var(--color-bg-white); color: var(--color-text-body); border: 1px solid var(--color-border); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); } .youtube-spotlight-card::before { background-color: var(--color-live); } .youtube-spotlight-title { color: var(--color-ink); } .youtube-spotlight-desc { color: var(--color-text-muted); } .youtube-spotlight-meta { color: var(--color-text-light); } .prominent-source-card { background: var(--color-bg-soft); color: var(--color-text-body); border: 1px solid var(--color-border); border-left: 4px solid var(--color-gold); border-radius: 0 12px 12px 0; box-shadow: none; } .prominent-source-card::before { display: none; } .source-card-header { border-bottom-color: var(--color-border); } .source-card-title { color: var(--color-ink); } .source-card-title .text-warning { color: var(--color-gold-text) !important; } .source-card-badge { background-color: rgba(29, 78, 216, 0.1); border-color: var(--color-action); color: var(--color-action); } .source-detail-grid { color: var(--color-text-body); } .source-detail-label { color: var(--color-text-light); } .source-detail-value { color: var(--color-ink); } .btn-source-link { box-shadow: none; } /* ========================================================================== RESPONSIVE The project previously had exactly one breakpoint (991px) and the view files had none, so phones ran on Bootstrap defaults alone. ========================================================================== */ /* --- Tablet --- */ @media (max-width: 991px) { .mosaic-grid { grid-template-columns: 1fr; } .mosaic-large-card { height: 320px; } .mosaic-sub-grid { grid-template-columns: 1fr 1fr; } .boutique-title { font-size: var(--fs-h1); } .boutique-author-card { flex-direction: column; align-items: flex-start; } .source-detail-grid { grid-template-columns: 1fr; } } /* --- Small tablet / large phone --- */ @media (max-width: 767px) { .mosaic-large-card { height: 260px; } .mosaic-large-title { font-size: var(--fs-h3); } .mosaic-overlay { padding: 18px; } .section-block-title { flex-direction: column; align-items: flex-start; gap: 10px; } /* was max-width: 65%, which squeezed the tabs into a hidden scroller */ .section-filter-tabs { max-width: 100%; width: 100%; padding-bottom: 4px; } .boutique-article-container { padding: 0 18px; } .boutique-title { font-size: var(--fs-h2); } .boutique-summary-box, .prominent-source-card, .youtube-spotlight-card { padding: 22px 20px; } .drop-cap::first-letter { font-size: 3rem; } } /* --- Phone --- */ @media (max-width: 575px) { /* Two 212px-tall cards side by side left ~150px of width for a serif headline. Stack them. */ .mosaic-sub-grid { grid-template-columns: 1fr; } .mosaic-small-card { height: 180px; } .mosaic-small-title { font-size: var(--fs-body); } .mosaic-large-card { height: 240px; } .mosaic-large-title { font-size: var(--fs-body); } .popular-row-item { gap: 12px; } .popular-row-img { width: 88px; height: 66px; } .boutique-title { font-size: var(--fs-h2); letter-spacing: 0; } .boutique-body-content h2 { font-size: var(--fs-h3); margin: 36px 0 16px; } .boutique-meta-bar, .ad-banner-top { flex-direction: column; align-items: flex-start; gap: 14px; } .ad-banner-top { padding: 16px 18px; } .sidebar-widget { padding: 20px; } .widget-title-black { margin: -20px -20px 16px -20px; white-space: normal; } /* Touch targets */ .king-nav-link { padding: 14px; } .btn-filter-tab { padding: 8px 10px; } } /* The mosaic zoom and card lift are decorative */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .mosaic-large-card:hover .mosaic-img, .mosaic-small-card:hover .mosaic-img, .hover-card-lift:hover { transform: none; } } /* Related Articles Card Hover Effects */ .hover-card-lift { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease; } .hover-card-lift:hover { transform: translateY(-6px); box-shadow: 0 15px 30px rgba(15, 23, 42, 0.12) !important; } .hover-img-zoom { transition: transform 0.5s ease; } .hover-card-lift:hover .hover-img-zoom { transform: scale(1.06); }