/* ============================================================ FOOD AND DRINK NETWORK — styles.css Companion stylesheet for index.html Requires: Bootstrap 5.3.3, Font Awesome Kit, Google Fonts (Fraunces + Geist) — all loaded via index.html ============================================================ */ /* ============================================================ 1. DESIGN TOKENS ============================================================ */ :root { --brand-red: #e63946; --brand-red-dark: #c92a36; --ink: #14171f; --ink-soft: #4a4f5c; --muted: #8a8f9c; --line: #e8e8eb; --bg-soft: #f7f7f8; --bg-tile: #f3f3f5; --footer-bg: #14171f; --serif: 'Fraunces', 'Times New Roman', serif; --sans: 'Geist', system-ui, -apple-system, sans-serif; /* Shadows */ --shadow-card: 0 2px 8px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.05); --shadow-card-hover: 0 6px 20px rgba(0,0,0,0.07), 0 20px 48px rgba(0,0,0,0.09); } /* ============================================================ 2. BASE / RESET ============================================================ */ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--sans); color: var(--ink); background: #fff; font-size: 15px; line-height: 1.6; } h1, h2, h3, h4, h5, h6, .serif { font-family: var(--serif); font-weight: 700; letter-spacing: -0.02em; } a { text-decoration: none; color: inherit; } a:hover { color: var(--brand-red); } /* ============================================================ 3. PLACEHOLDER IMAGES ============================================================ */ .placeholder-img { width: 100%; height: 100%; background: linear-gradient(135deg, #e8e8eb 0%, #d4d4d8 100%); display: flex; align-items: center; justify-content: center; color: #999; position: relative; overflow: hidden; } .placeholder-img::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(45deg, rgba(255,255,255,0.4) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,0.4) 25%, transparent 25%); background-size: 20px 20px; opacity: 0.3; } .placeholder-img i { font-size: 32px; color: #b0b0b0; position: relative; z-index: 1; } .placeholder-img.dark { background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%); } .placeholder-img.dark i { color: #555; } /* ============================================================ 4. UTILITY BAR ============================================================ */ .utility-bar { background: var(--brand-red); color: #fff; font-size: 12.5px; padding: 8px 0; } .utility-bar a { color: #fff; } .utility-bar a:hover { color: rgba(255,255,255,0.8); } .utility-bar .social-icons a { margin-left: 14px; font-size: 13px; } /* ============================================================ 5. HEADER ============================================================ */ .main-header { background: #fff; border-bottom: 1px solid var(--line); padding: 18px 0; position: relative; z-index: 100; } /* Brand logo */ .brand-logo { display: inline-block; line-height: 1; } .logo-img { height: 52px; width: auto; display: block; } .brand-logo span { display: block; } /* Search */ .search-wrap { position: relative; } .search-wrap .fa-magnifying-glass { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; } .search-input { border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px 10px 42px; font-size: 13px; font-family: var(--sans); background: #fafafa; min-width: 280px; } .search-input:focus { outline: none; border-color: var(--brand-red); box-shadow: 0 0 0 3px rgba(230,57,70,0.1); } /* Buttons */ .btn-brand { background: var(--brand-red); color: #fff; border: none; border-radius: 999px; padding: 9px 22px; font-weight: 600; font-size: 13px; font-family: var(--sans); transition: all 0.2s ease; } .btn-brand:hover { background: var(--brand-red-dark); color: #fff; transform: translateY(-1px); } .btn-brand-outline { background: transparent; color: var(--brand-red); border: 1px solid var(--brand-red); border-radius: 999px; padding: 9px 22px; font-weight: 600; font-size: 13px; font-family: var(--sans); transition: all 0.2s ease; } .btn-brand-outline:hover { background: var(--brand-red); color: #fff; } /* Mobile hamburger toggle */ .mobile-menu-toggle { background: transparent; border: 1px solid var(--line); border-radius: 8px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; color: var(--ink); font-size: 16px; cursor: pointer; } .mobile-menu-toggle:hover { background: var(--bg-soft); color: var(--brand-red); } /* ============================================================ 6. DESKTOP NAVIGATION ============================================================ */ .nav-bar { border-bottom: 1px solid var(--line); background: #fff; position: relative; z-index: 90; } .nav-bar .nav-link { color: var(--ink); font-weight: 500; font-size: 14px; font-family: var(--sans); padding: 18px 18px !important; position: relative; display: flex; align-items: center; gap: 6px; cursor: pointer; } .nav-bar .nav-link.active { color: var(--brand-red); } .nav-bar .nav-link:hover { color: var(--brand-red); } /* Active underline */ .nav-bar .nav-link.active::after { content: ''; position: absolute; bottom: -1px; left: 18px; right: 18px; height: 2px; background: var(--brand-red); } /* Open mega-menu state */ .nav-bar .nav-item.mega-open > .nav-link { color: var(--brand-red); } .nav-bar .nav-item.mega-open > .nav-link::after { content: ''; position: absolute; bottom: -1px; left: 18px; right: 18px; height: 2px; background: var(--brand-red); } /* Chevron */ .nav-bar .nav-link .chevron { transition: transform 0.25s ease; font-size: 11px; } .nav-bar .nav-item.mega-open > .nav-link .chevron { transform: rotate(180deg); } /* ============================================================ 7. MEGA MENUS ============================================================ */ .mega-menu { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 20px 40px rgba(0,0,0,0.06); z-index: 95; padding: 36px 0 40px; /* hidden state */ opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; } .mega-menu.open { opacity: 1; visibility: visible; transform: translateY(0); } /* Section label (e.g. "BROWSE BY CATEGORY") */ .mega-label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; font-family: var(--sans); } /* "All Latest News →" link */ .mega-link-all { color: var(--brand-red); font-size: 13px; font-weight: 600; font-family: var(--sans); display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s ease; } .mega-link-all:hover { color: var(--brand-red-dark); gap: 10px; } /* Category tile buttons */ .mega-tile { display: block; padding: 14px 18px; background: var(--bg-tile); border-radius: 10px; font-size: 14px; font-weight: 600; font-family: var(--sans); color: var(--ink); margin-bottom: 8px; transition: all 0.2s ease; } .mega-tile:hover { background: #fde9eb; color: var(--brand-red); transform: translateX(2px); } /* Directory list links */ .mega-list-item { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); } .mega-list-item:last-child { border-bottom: none; } .mega-list-item .title { display: block; font-size: 15px; font-weight: 700; font-family: var(--sans); color: var(--ink); margin-bottom: 2px; transition: color 0.2s ease; } .mega-list-item .subtitle { display: block; font-size: 13px; font-family: var(--sans); color: var(--muted); } .mega-list-item:hover .title { color: var(--brand-red); } /* Mega CTA sidebar cards */ .mega-cta { border-radius: 14px; padding: 28px; color: #fff; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .mega-cta.red { background: var(--brand-red); } .mega-cta.dark { background: linear-gradient(135deg, #1a1d2b 0%, #14171f 100%); } .mega-cta-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.9; margin-bottom: 12px; font-family: var(--sans); } .mega-cta h4 { font-family: var(--serif); font-size: 24px; font-weight: 700; line-height: 1.15; margin-bottom: 12px; color: #fff; } .mega-cta p { font-size: 13.5px; font-family: var(--sans); opacity: 0.85; line-height: 1.5; margin-bottom: 22px; } /* Mega CTA buttons */ .btn-mega-light { background: #fff; color: var(--brand-red); border: none; border-radius: 999px; padding: 10px 22px; font-weight: 600; font-size: 13px; font-family: var(--sans); display: inline-flex; align-items: center; gap: 8px; width: fit-content; transition: all 0.2s ease; } .btn-mega-light:hover { background: #fff5f5; color: var(--brand-red); transform: translateY(-1px); } .btn-mega-red { background: var(--brand-red); color: #fff; border: none; border-radius: 999px; padding: 10px 22px; font-weight: 600; font-size: 13px; font-family: var(--sans); display: inline-flex; align-items: center; gap: 8px; width: fit-content; transition: all 0.2s ease; } .btn-mega-red:hover { background: var(--brand-red-dark); color: #fff; transform: translateY(-1px); } /* ============================================================ 8. MOBILE OFFCANVAS MENU ============================================================ */ .offcanvas { font-family: var(--sans); } .offcanvas-header { border-bottom: 1px solid var(--line); padding: 20px 24px; } .offcanvas-title { line-height: 1; } .offcanvas-title .logo-img { height: 44px; width: auto; } .btn-close-custom { background: var(--bg-soft); border: none; border-radius: 8px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--ink); cursor: pointer; } .btn-close-custom:hover { background: var(--line); } /* Mobile search */ .mobile-search { padding: 16px 24px 8px; } /* Mobile nav list */ .mobile-nav { padding: 0 16px; flex: 1 1 auto; overflow-y: auto; min-height: 0; } .mobile-nav-item { border-bottom: 1px solid var(--line); } .mobile-nav-link { display: flex; align-items: center; justify-content: space-between; padding: 16px 8px; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; user-select: none; } .mobile-nav-link.active { color: var(--brand-red); } .mobile-nav-link:hover { color: var(--brand-red); } .mobile-nav-link .chevron { font-size: 12px; color: var(--muted); transition: transform 0.25s ease; } /* Accordion open state */ .mobile-submenu { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .mobile-nav-item.open .mobile-submenu { max-height: 1500px; } .mobile-nav-item.open .mobile-nav-link .chevron { transform: rotate(180deg); color: var(--brand-red); } .mobile-submenu-inner { padding: 4px 8px 18px; } .mobile-sub-label { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding: 10px 0 8px; } .mobile-sub-tile { display: block; padding: 12px 14px; background: var(--bg-tile); border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px; } .mobile-sub-tile:hover { background: #fde9eb; color: var(--brand-red); } .mobile-sub-list-item { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); } .mobile-sub-list-item:last-child { border-bottom: none; } .mobile-sub-list-item .title { display: block; font-size: 14px; font-weight: 700; color: var(--ink); } .mobile-sub-list-item .subtitle { display: block; font-size: 12px; color: var(--muted); } .mobile-sub-list-item:hover .title { color: var(--brand-red); } /* Bottom CTA buttons in offcanvas */ .mobile-cta-buttons { padding: 24px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); margin-top: 12px; flex: 0 0 auto; } /* ============================================================ 9. HERO ============================================================ */ .hero-section { position: relative; border-radius: 14px; overflow: hidden; margin-top: 28px; min-height: 420px; background: #1a1a1a; } .hero-image { position: absolute; inset: 0; } .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.40) 50%, rgba(0,0,0,0.10) 100% ); } .hero-content { position: relative; z-index: 2; padding: 48px; color: #fff; max-width: 640px; min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end; } .hero-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-red); color: #fff; padding: 6px 14px; border-radius: 999px; font-size: 11px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.08em; text-transform: uppercase; width: fit-content; margin-bottom: 18px; } .hero-title { font-size: clamp(28px, 4vw, 46px); font-weight: 700; line-height: 1.05; margin-bottom: 18px; color: #fff; letter-spacing: -0.025em; } .hero-excerpt { font-size: 15px; line-height: 1.55; opacity: 0.9; margin-bottom: 22px; font-family: var(--sans); } .hero-meta { display: flex; align-items: center; gap: 18px; font-size: 13px; opacity: 0.85; font-family: var(--sans); flex-wrap: wrap; } .hero-meta .author { font-weight: 600; } .hero-meta .dot { width: 3px; height: 3px; background: #fff; border-radius: 50%; opacity: 0.5; } /* ============================================================ 10. ADVERTISEMENT SLOTS ============================================================ */ .ad-label { text-align: center; font-size: 10px; letter-spacing: 0.15em; color: var(--muted); text-transform: uppercase; margin-bottom: 10px; font-family: var(--sans); } .ad-banner { width: 100%; height: 110px; border-radius: 10px; overflow: hidden; background: #f0f0f0; } .ad-vertical { width: 100%; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 5; } /* ============================================================ 11. SECTION HEADERS ============================================================ */ .section-title { font-size: 28px; font-weight: 700; position: relative; padding-left: 14px; letter-spacing: -0.02em; } .section-title::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; background: var(--brand-red); border-radius: 2px; } .view-all { color: var(--brand-red); font-size: 13px; font-weight: 600; font-family: var(--sans); display: inline-flex; align-items: center; gap: 6px; } .view-all:hover { color: var(--brand-red-dark); } /* ============================================================ 12. ARTICLE CARDS — FEATURE (large) ============================================================ */ .feature-card { background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); display: flex; transition: all 0.25s ease; box-shadow: var(--shadow-card); } .feature-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); } .feature-card-image { flex: 0 0 45%; min-height: 220px; } .feature-card-body { padding: 28px; flex: 1; } /* Category tags */ .category-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 4px; font-size: 10px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; max-width: max-content; } .tag-business { background: #fff3cd; color: #856404; } .tag-culture { background: #d4edda; color: #155724; } .tag-tech { background: #d1ecf1; color: #0c5460; } .tag-world { background: #f8d7da; color: #721c24; } .feature-title { font-size: 24px; font-weight: 700; line-height: 1.2; margin-bottom: 12px; letter-spacing: -0.02em; } .feature-excerpt { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 20px; font-family: var(--sans); } /* Shared article meta (author + read-time) */ .article-meta { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--muted); font-family: var(--sans); flex-wrap: wrap; } .article-meta .author { color: var(--ink); font-weight: 600; } /* ============================================================ 13. ARTICLE CARDS — STORY (small grid) ============================================================ */ #headerBannerCarousel { overflow: hidden; } #headerBannerCarousel .banner-image { width: 100%; height: 100%; object-fit: cover; display: block; } .story-card { background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); transition: all 0.25s ease; height: 100%; box-shadow: 0 2px 8px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.05); display: flex; flex-direction: column; } .story-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.07), 0 20px 48px rgba(0,0,0,0.09); transform: translateY(-3px); } .story-card-image { width: 100%; height: 200px; flex-shrink: 0; overflow: hidden; position: relative; } .story-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .story-card-body { padding: 18px 20px 20px; background: #fff; flex: 1; display: flex; flex-direction: column; position: relative; z-index: 1; } .story-card .article-meta { margin-top: auto; } .story-title { font-size: 17px; font-weight: 700; line-height: 1.25; margin-bottom: 12px; letter-spacing: -0.02em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================ 14. BROWSE CATEGORIES SIDEBAR ============================================================ */ .categories-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px; } .categories-card h5 { font-size: 17px; font-weight: 700; padding-left: 10px; border-left: 3px solid var(--brand-red); margin-bottom: 16px; letter-spacing: -0.02em; } .category-list { list-style: none; padding: 0; margin: 0; } .category-list li { border-bottom: 1px solid #f2f2f2; } .category-list li:last-child { border-bottom: none; } .category-list a { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: 13.5px; font-weight: 500; font-family: var(--sans); color: var(--ink); transition: padding 0.2s ease; } .category-list a:hover { padding-left: 6px; color: var(--brand-red); } .category-icon { width: 28px; height: 28px; border-radius: 8px; background: #fdecee; color: var(--brand-red); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; } /* ============================================================ 15. MAGAZINE CTA BLOCK ============================================================ */ .magazine-cta { background: linear-gradient(135deg, #1a1d2b 0%, #2a1a1d 100%); border-radius: 14px; padding: 36px; color: #fff; position: relative; overflow: hidden; } .magazine-cta::before { content: ''; position: absolute; top: -50%; right: -20%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(230,57,70,0.18) 0%, transparent 70%); pointer-events: none; } .magazine-cta-content { position: relative; z-index: 2; } .magazine-tag { display: inline-flex; align-items: center; gap: 5px; background: var(--brand-red); color: #fff; padding: 5px 14px; border-radius: 999px; font-size: 11px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; } .magazine-cta h3 { font-size: 28px; font-weight: 700; margin-bottom: 12px; color: #fff; letter-spacing: -0.02em; } .magazine-cta p { font-size: 14px; font-family: var(--sans); opacity: 0.85; margin-bottom: 22px; line-height: 1.55; } .magazine-cover { width: 90px; height: 130px; border-radius: 6px; box-shadow: 0 12px 30px rgba(0,0,0,0.4); flex-shrink: 0; overflow: hidden; } .btn-ghost-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; padding: 9px 22px; font-weight: 600; font-size: 13px; font-family: var(--sans); transition: all 0.2s ease; } .btn-ghost-light:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: #fff; } /* ============================================================ 16. OTHER NEWS CARD ============================================================ */ .other-news-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 28px; box-shadow: var(--shadow-card); } .other-news-item { display: flex; align-items: center; gap: 18px; padding: 16px 0; border-bottom: 1px solid #f2f2f2; } .other-news-item:last-child { border-bottom: none; } .other-news-thumb { width: 56px; height: 56px; border-radius: 8px; flex-shrink: 0; overflow: hidden; } .other-news-thumb .placeholder-img i { font-size: 18px; } .other-news-content { flex: 1; min-width: 0; } .news-source { font-size: 12px; font-weight: 500; font-family: var(--sans); color: var(--muted); margin-bottom: 4px; } .news-source .source-name { color: var(--ink); font-weight: 600; } .news-headline { font-size: 16px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; font-family: var(--serif); letter-spacing: -0.02em; } .read-more { font-size: 12px; font-weight: 600; font-family: var(--sans); color: var(--brand-red); } /* ============================================================ 17. SUPPLIERS SECTION ============================================================ */ .suppliers-section { background: #fafafa; padding: 70px 0; margin-top: 50px; } .supplier-tag { display: inline-flex; align-items: center; gap: 5px; background: #fdecee; color: var(--brand-red); padding: 5px 14px; border-radius: 4px; font-size: 10px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; } .supplier-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 24px; height: 100%; transition: all 0.25s ease; box-shadow: var(--shadow-card); } .supplier-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); } /* Supplier logo badge */ .supplier-logo { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; font-family: var(--sans); color: #fff; margin-bottom: 14px; } .logo-af { background: linear-gradient(135deg, #f4a261, #e76f51); } .logo-bt { background: linear-gradient(135deg, #2a9d8f, #264653); } .logo-cl { background: linear-gradient(135deg, #4cc9f0, #4361ee); } .logo-fp { background: linear-gradient(135deg, #06d6a0, #1b9aaa); } .supplier-name { font-size: 17px; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.02em; } .supplier-category { font-size: 10px; font-weight: 700; font-family: var(--sans); color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; } .supplier-desc { font-size: 13px; font-family: var(--sans); color: var(--ink-soft); line-height: 1.5; margin-bottom: 18px; } .verified-badge { display: inline-flex; align-items: center; gap: 4px; background: #d4edda; color: #155724; padding: 4px 10px; border-radius: 4px; font-size: 10px; font-weight: 700; font-family: var(--sans); } .view-link { color: var(--brand-red); font-size: 13px; font-weight: 600; font-family: var(--sans); } /* "List Your Business" CTA bar */ .supplier-cta-bar { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px 28px; margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .supplier-cta-icon { width: 40px; height: 40px; border-radius: 10px; background: #fdecee; color: var(--brand-red); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .supplier-cta-text h6 { font-size: 16px; font-weight: 700; font-family: var(--sans); letter-spacing: -0.01em; margin-bottom: 2px; } .supplier-cta-text p { font-size: 13px; font-family: var(--sans); color: var(--ink-soft); margin: 0; } /* ============================================================ 18. NEWSLETTER SECTION ============================================================ */ .newsletter-section { background: linear-gradient(135deg, var(--brand-red) 0%, #d62836 100%); color: #fff; padding: 70px 20px; text-align: center; position: relative; overflow: hidden; } .newsletter-section::before, .newsletter-section::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,0.05); pointer-events: none; } .newsletter-section::before { width: 300px; height: 300px; top: -100px; left: -100px; } .newsletter-section::after { width: 400px; height: 400px; bottom: -200px; right: -150px; } .newsletter-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.15); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; font-size: 22px; } .newsletter-section h2 { font-size: clamp(32px, 5vw, 44px); font-weight: 700; margin-bottom: 14px; color: #fff; position: relative; z-index: 2; letter-spacing: -0.025em; } .newsletter-section p { font-size: 15px; font-family: var(--sans); opacity: 0.9; margin-bottom: 28px; max-width: 500px; margin-left: auto; margin-right: auto; position: relative; z-index: 2; } .newsletter-form { max-width: 480px; margin: 0 auto; background: rgba(255,255,255,0.15); border-radius: 999px; padding: 6px; display: flex; gap: 6px; position: relative; z-index: 2; } .newsletter-form input { flex: 1; min-width: 0; border: none; background: transparent; color: #fff; padding: 12px 22px; font-size: 14px; font-family: var(--sans); outline: none; } .newsletter-form input::placeholder { color: rgba(255,255,255,0.7); } .newsletter-form button { background: #fff; color: var(--brand-red); border: none; border-radius: 999px; padding: 11px 28px; font-weight: 600; font-size: 14px; font-family: var(--sans); white-space: nowrap; transition: all 0.2s ease; } .newsletter-form button:hover { background: #fff5f5; transform: translateY(-1px); } .newsletter-disclaimer { font-size: 12px; font-family: var(--sans); opacity: 0.8; margin-top: 16px; position: relative; z-index: 2; } /* ============================================================ 19. FOOTER ============================================================ */ .site-footer { background: var(--footer-bg); color: #b8b8b8; padding: 60px 0 24px; } .footer-logo { width: 36px; height: 36px; background: #fff; border-radius: 4px; margin-bottom: 16px; } .footer-tagline { font-size: 13px; font-family: var(--sans); line-height: 1.6; color: #999; margin-bottom: 22px; max-width: 280px; } .footer-social a { width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,0.06); display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; color: #b8b8b8; font-size: 13px; transition: all 0.2s ease; } .footer-social a:hover { background: var(--brand-red); color: #fff; } .site-footer h6 { color: #fff; font-size: 11px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 18px; } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 10px; } .footer-links a { color: #b8b8b8; font-size: 13.5px; font-family: var(--sans); transition: color 0.2s ease; } .footer-links a:hover { color: #fff; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); margin-top: 40px; padding-top: 22px; font-size: 12px; font-family: var(--sans); color: #777; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; } /* ============================================================ 20. CATEGORY / ARCHIVE PAGES ============================================================ */ /* Page header */ .page-header { background: #fff; border-bottom: 1px solid var(--line); padding: 22px 0 20px; } .cat-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-family: var(--sans); color: var(--muted); margin-bottom: 4px; } .cat-breadcrumb a { color: var(--brand-red); font-weight: 500; } .cat-breadcrumb a:hover { color: var(--brand-red-dark); } .cat-breadcrumb i { font-size: 9px; color: var(--muted); } .page-title { font-size: clamp(28px, 4vw, 38px); font-weight: 700; letter-spacing: -0.025em; margin: 0 0 4px; line-height: 1.1; } .page-subtitle { font-size: 14px; font-family: var(--sans); color: var(--muted); margin: 0; } .rss-link { font-size: 13px; font-weight: 600; font-family: var(--sans); color: var(--brand-red); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .rss-link:hover { color: var(--brand-red-dark); } .article-count { font-size: 13px; font-family: var(--sans); color: var(--muted); white-space: nowrap; } .article-count strong { color: var(--ink); font-weight: 700; } /* Filter pill bar */ .filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .filter-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .filter-pill { background: var(--bg-tile); color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 500; font-family: var(--sans); cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .filter-pill:hover { background: #fde9eb; border-color: var(--brand-red); color: var(--brand-red); } .filter-pill.active { background: var(--brand-red); border-color: var(--brand-red); color: #fff; font-weight: 600; } .filter-actions { display: flex; gap: 6px; flex-shrink: 0; } .filter-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink-soft); display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; transition: all 0.2s ease; } .filter-icon-btn:hover { border-color: var(--brand-red); color: var(--brand-red); background: #fde9eb; } /* Featured hero card */ .cat-hero-card { position: relative; border-radius: 14px; overflow: hidden; display: block; color: #fff; min-height: 340px; transition: transform 0.25s ease, box-shadow 0.25s ease; box-shadow: var(--shadow-card); } .cat-hero-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); color: #fff; } .cat-hero-image { position: absolute; inset: 0; } .cat-hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.10) 100%); } .cat-hero-content { position: relative; z-index: 2; padding: 32px; min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end; } .cat-hero-badge { display: inline-flex; align-items: center; gap: 5px; background: var(--brand-red); color: #fff; padding: 5px 13px; border-radius: 999px; font-size: 10px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.08em; text-transform: uppercase; width: fit-content; margin-bottom: 14px; } .cat-hero-title { font-size: clamp(22px, 3vw, 30px); font-weight: 700; line-height: 1.15; margin-bottom: 14px; color: #fff; letter-spacing: -0.02em; } .cat-hero-meta { display: flex; align-items: center; gap: 12px; font-size: 13px; font-family: var(--sans); opacity: 0.9; flex-wrap: wrap; } .cat-hero-meta .dot { width: 3px; height: 3px; background: #fff; border-radius: 50%; opacity: 0.5; } /* Article cards (2-col grid) */ .cat-article-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; height: 100%; color: var(--ink); transition: all 0.25s ease; box-shadow: var(--shadow-card); } .cat-article-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); color: var(--ink); } .cat-article-image { width: 100%; height: 180px; flex-shrink: 0; } .cat-article-card--wide { flex-direction: row; } .cat-article-card--wide .cat-article-image--wide { flex: 0 0 280px; height: auto; min-height: 200px; } .cat-article-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; } .cat-article-title { font-size: 18px; font-weight: 700; line-height: 1.25; margin-bottom: 10px; letter-spacing: -0.02em; font-family: var(--serif); } .cat-article-excerpt { font-size: 13.5px; font-family: var(--sans); color: var(--ink-soft); line-height: 1.55; margin-bottom: 16px; } /* Extra category tag colours */ .tag-beverages { background: #dbeafe; color: #1e40af; } .tag-sustainability { background: #d1fae5; color: #065f46; } .tag-innovation { background: #ede9fe; color: #5b21b6; } /* Sidebar ad */ .sidebar-ad { border-radius: 12px; overflow: hidden; } .sidebar-ad-inner { position: relative; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; } .sidebar-ad-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, transparent 60%); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; } .sidebar-ad-label { font-size: 16px; font-family: var(--serif); font-weight: 700; color: #fff; margin-bottom: 12px; line-height: 1.25; } /* Most Read */ .most-read-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px; box-shadow: var(--shadow-card); } .most-read-title { font-size: 17px; font-weight: 700; padding-left: 10px; border-left: 3px solid var(--brand-red); margin-bottom: 16px; letter-spacing: -0.02em; display: flex; align-items: center; font-family: var(--serif); } .most-read-title i { color: var(--brand-red); font-size: 14px; } .most-read-list { list-style: none; padding: 0; margin: 0; counter-reset: mr-counter; } .most-read-list li { counter-increment: mr-counter; border-bottom: 1px solid #f2f2f2; } .most-read-list li:last-child { border-bottom: none; } .most-read-list li a { display: flex; flex-direction: column; gap: 4px; padding: 14px 0 14px 32px; position: relative; color: var(--ink); transition: color 0.2s ease; } .most-read-list li a::before { content: counter(mr-counter); position: absolute; left: 0; top: 14px; font-size: 20px; font-weight: 800; font-family: var(--serif); color: var(--line); line-height: 1; } .most-read-list li a:hover { color: var(--brand-red); } .mr-headline { font-size: 13.5px; font-weight: 700; font-family: var(--sans); line-height: 1.35; } .mr-date { font-size: 12px; font-family: var(--sans); color: var(--muted); } /* Pagination */ .cat-pagination { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .page-btn { min-width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; font-family: var(--sans); display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; transition: all 0.2s ease; } .page-btn:hover { border-color: var(--brand-red); color: var(--brand-red); background: #fde9eb; } .page-btn.active { background: var(--brand-red); border-color: var(--brand-red); color: #fff; } .page-prev, .page-next { font-size: 12px; } .page-ellipsis { font-size: 14px; color: var(--muted); font-family: var(--sans); padding: 0 4px; } /* ============================================================ 21. RESPONSIVE OVERRIDES ============================================================ */ /* Tablet (≤991px) */ @media (max-width: 991px) { .feature-card { flex-direction: column; } .feature-card-image { flex: 0 0 220px; width: 100%; } .hero-content { padding: 32px; min-height: 380px; } .magazine-cta { padding: 28px; } .cat-article-card--wide { flex-direction: column; } .cat-article-card--wide .cat-article-image--wide { flex: none; width: 100%; height: 200px; } } /* Mobile (≤767px) */ @media (max-width: 767px) { .search-input { min-width: 0; width: 100%; } .utility-bar .small-hide { display: none; } .supplier-cta-bar { flex-direction: column; align-items: flex-start; } .newsletter-form { flex-direction: column; border-radius: 16px; gap: 8px; } .newsletter-form input { text-align: center; } .hero-section, .hero-content { min-height: 360px; } .hero-content { padding: 28px; } .filter-pills { gap: 4px; } .filter-pill { font-size: 12px; padding: 6px 12px; } .cat-hero-card, .cat-hero-content { min-height: 280px; } .cat-hero-content { padding: 24px; } .cat-hero-title { font-size: 22px; } .page-title { font-size: 28px; } } /* ============================================================ 22. ARTICLE DETAIL / POST PAGE ============================================================ */ /* Full-width hero image */ .post-hero { width: 100%; height: 650px; background: var(--ink); position: relative; overflow: hidden; } .post-hero .placeholder-img { height: 420px; } .post-hero-caption { position: absolute; bottom: 12px; left: 20px; font-size: 11px; font-family: var(--sans); color: rgba(255,255,255,0.65); z-index: 2; letter-spacing: 0.03em; } /* Article meta header card */ .post-header { background: #fff; border-bottom: 1px solid var(--line); padding: 28px 0 24px; } .post-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; } .post-tag { display: inline-block; padding: 4px 12px; border-radius: 4px; font-size: 10px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.1em; text-transform: uppercase; background: #fdecee; color: var(--brand-red); } .post-tag.analysis { background: #f3f3f5; color: var(--ink-soft); } .post-title { font-size: clamp(26px, 4vw, 40px); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 16px; } .post-standfirst { font-size: 17px; font-family: var(--sans); color: var(--ink-soft); line-height: 1.6; margin-bottom: 22px; font-weight: 400; } .post-author-bar { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); flex-wrap: wrap; } .post-author-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-red), #ff6b6b); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; font-family: var(--sans); color: #fff; flex-shrink: 0; } .post-author-info { flex: 1; min-width: 0; } .post-author-name { font-size: 14px; font-weight: 700; font-family: var(--sans); color: var(--ink); } .post-author-role { font-size: 12px; font-family: var(--sans); color: var(--muted); } .post-author-meta { display: flex; align-items: center; gap: 16px; font-size: 12.5px; font-family: var(--sans); color: var(--muted); flex-wrap: wrap; } .post-author-meta i { color: var(--muted); } .post-author-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } .post-action-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; font-family: var(--sans); color: var(--ink-soft); background: transparent; border: none; cursor: pointer; padding: 4px 0; transition: color 0.2s ease; } .post-action-btn:hover { color: var(--brand-red); } /* Share bar */ .post-share-bar { display: flex; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); margin-bottom: 28px; flex-wrap: wrap; } .share-label { font-size: 12px; font-weight: 700; font-family: var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; } .share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 6px; border: 1px solid var(--line); background: #fff; font-size: 12.5px; font-weight: 600; font-family: var(--sans); color: var(--ink); cursor: pointer; transition: all 0.2s ease; } .share-btn:hover { border-color: var(--brand-red); color: var(--brand-red); } .share-btn.twitter { } .share-btn.linkedin { } .share-btn.facebook { } .share-btn.copy { } /* Article body content */ .post-body { font-size: 16px; font-family: var(--sans); line-height: 1.75; color: var(--ink); } .post-body p { margin-bottom: 1.4em; } .post-body h2 { font-family: var(--serif); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 2em 0 0.6em; color: var(--ink); } .post-body h3 { font-family: var(--serif); font-size: 20px; font-weight: 700; letter-spacing: -0.015em; margin: 1.6em 0 0.5em; } /* Tags at bottom of article */ .post-tags-footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 20px 0; border-top: 1px solid var(--line); margin-top: 32px; } .post-tags-footer-label { font-size: 12px; font-weight: 700; font-family: var(--sans); color: var(--muted); } .post-footer-tag { display: inline-block; padding: 5px 12px; border-radius: 6px; background: var(--bg-tile); border: 1px solid var(--line); font-size: 12px; font-weight: 600; font-family: var(--sans); color: var(--ink-soft); transition: all 0.2s ease; } .post-footer-tag:hover { background: #fde9eb; border-color: var(--brand-red); color: var(--brand-red); } /* About the Author box */ .post-author-box { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px; padding: 24px; margin-top: 32px; } .post-author-box-label { font-size: 10px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .post-author-box-avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-red), #ff6b6b); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; font-family: var(--sans); color: #fff; flex-shrink: 0; } .post-author-box-name { font-size: 17px; font-weight: 700; font-family: var(--sans); margin-bottom: 2px; } .post-author-box-role { font-size: 13px; font-family: var(--sans); color: var(--muted); margin-bottom: 10px; } .post-author-box-bio { font-size: 13.5px; font-family: var(--sans); color: var(--ink-soft); line-height: 1.55; margin: 0; } .more-by-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; font-weight: 600; font-family: var(--sans); color: var(--brand-red); } .more-by-link:hover { color: var(--brand-red-dark); } /* Sidebar newsletter signup */ .sidebar-newsletter { background: var(--brand-red); border-radius: 14px; padding: 24px; color: #fff; margin-top: 24px; } .sidebar-newsletter-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; font-size: 16px; margin-bottom: 12px; } .sidebar-newsletter h5 { font-family: var(--serif); font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 6px; letter-spacing: -0.01em; } .sidebar-newsletter p { font-size: 13px; font-family: var(--sans); opacity: 0.9; line-height: 1.5; margin-bottom: 16px; } .sidebar-newsletter input { width: 100%; border: none; border-radius: 8px; padding: 10px 14px; font-size: 13px; font-family: var(--sans); margin-bottom: 8px; outline: none; background: rgba(255,255,255,0.2); color: #fff; } .sidebar-newsletter input::placeholder { color: rgba(255,255,255,0.7); } .btn-subscribe-free { width: 100%; background: #fff; color: var(--brand-red); border: none; border-radius: 8px; padding: 10px; font-size: 13px; font-weight: 700; font-family: var(--sans); cursor: pointer; transition: all 0.2s ease; } .btn-subscribe-free:hover { background: #fff5f5; } /* You Might Also Like */ .related-section { padding: 48px 0; background: #fff; } .related-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .related-title { font-size: 26px; font-weight: 700; font-family: var(--serif); letter-spacing: -0.02em; position: relative; padding-left: 14px; } .related-title::before { content: ''; position: absolute; left: 0; top: 5px; bottom: 5px; width: 4px; background: var(--brand-red); border-radius: 2px; } .related-card { display: block; color: var(--ink); transition: all 0.25s ease; } .related-card:hover { color: var(--ink); transform: translateY(-2px); } .related-card-image { width: 100%; height: 350px; border-radius: 10px; overflow: hidden; margin-bottom: 14px; } .related-card-tag { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 10px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; } .related-card-title { font-size: 16px; font-weight: 700; font-family: var(--serif); line-height: 1.3; margin-bottom: 8px; letter-spacing: -0.015em; } .related-card-meta { font-size: 12px; font-family: var(--sans); color: var(--muted); display: flex; align-items: center; gap: 8px; } /* ============================================================ 23. CONTACT PAGE ============================================================ */ /* Dark hero banner */ .contact-hero { background: linear-gradient(135deg, #14171f 0%, #1e1b2e 100%); padding: 60px 0 50px; text-align: center; position: relative; overflow: hidden; } .contact-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(230,57,70,0.15) 0%, transparent 60%); pointer-events: none; } .contact-hero-tag { display: inline-block; background: var(--brand-red); color: #fff; padding: 6px 18px; border-radius: 999px; font-size: 11px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 20px; } .contact-hero h1 { font-size: clamp(34px, 5vw, 52px); font-weight: 800; color: #fff; letter-spacing: -0.025em; margin-bottom: 14px; line-height: 1.05; position: relative; z-index: 2; } .contact-hero p { font-size: 16px; font-family: var(--sans); color: rgba(255,255,255,0.75); max-width: 480px; margin: 0 auto; line-height: 1.6; position: relative; z-index: 2; } /* Contact info cards (4-col row) */ .contact-info-row { padding: 40px 0 8px; } .contact-info-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 28px 22px; text-align: center; box-shadow: var(--shadow-card); transition: all 0.25s ease; } .contact-info-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); } .contact-info-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin: 0 auto 14px; } .icon-red { background: #fdecee; color: var(--brand-red); } .icon-blue { background: #dbeafe; color: #2563eb; } .icon-green { background: #d1fae5; color: #059669; } .icon-amber { background: #fef3c7; color: #d97706; } .contact-info-label { font-size: 10px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .contact-info-value { font-size: 14px; font-weight: 700; font-family: var(--sans); color: var(--ink); margin-bottom: 4px; } .contact-info-sub { font-size: 13px; font-family: var(--sans); color: var(--muted); } /* Contact form card */ .contact-form-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 36px; box-shadow: var(--shadow-card); } .contact-form-card h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; } .contact-form-card > p { font-size: 14px; font-family: var(--sans); color: var(--muted); margin-bottom: 28px; } .form-label-custom { font-size: 11px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; display: block; } .form-label-custom .required { color: var(--brand-red); } .form-control-custom { width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: var(--sans); color: var(--ink); background: #fafafa; transition: border-color 0.2s ease, box-shadow 0.2s ease; outline: none; } .form-control-custom:focus { border-color: var(--brand-red); box-shadow: 0 0 0 3px rgba(230,57,70,0.1); background: #fff; } .form-control-custom::placeholder { color: var(--muted); } textarea.form-control-custom { resize: vertical; min-height: 120px; } .form-disclaimer { font-size: 12px; font-family: var(--sans); color: var(--muted); margin-bottom: 20px; line-height: 1.5; } .form-disclaimer a { color: var(--brand-red); } .btn-send { width: 100%; background: var(--brand-red); color: #fff; border: none; border-radius: 10px; padding: 14px; font-size: 15px; font-weight: 700; font-family: var(--sans); cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 8px; } .btn-send:hover { background: var(--brand-red-dark); transform: translateY(-1px); } /* Advertise with us CTA (sidebar) */ .advertise-cta { background: var(--brand-red); border-radius: 14px; padding: 28px; color: #fff; box-shadow: var(--shadow-card); } .advertise-cta-tag { font-size: 10px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.85; margin-bottom: 12px; } .advertise-cta h3 { font-family: var(--serif); font-size: 22px; font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 12px; letter-spacing: -0.02em; } .advertise-cta p { font-size: 13.5px; font-family: var(--sans); opacity: 0.9; line-height: 1.5; margin-bottom: 20px; } .btn-media-pack { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--brand-red); border: none; border-radius: 999px; padding: 10px 22px; font-size: 13px; font-weight: 700; font-family: var(--sans); cursor: pointer; transition: all 0.2s ease; } .btn-media-pack:hover { background: #fff5f5; transform: translateY(-1px); } /* Direct Contacts card */ .direct-contacts-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px; box-shadow: var(--shadow-card); margin-top: 20px; } .direct-contacts-card h5 { font-size: 16px; font-weight: 700; font-family: var(--sans); margin-bottom: 18px; letter-spacing: -0.01em; } .contact-person { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f2f2f2; } .contact-person:last-child { border-bottom: none; padding-bottom: 0; } .contact-person-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; font-family: var(--sans); color: #fff; flex-shrink: 0; } .av-sm { background: linear-gradient(135deg, #2a9d8f, #264653); } .av-tj { background: linear-gradient(135deg, #e76f51, #f4a261); } .av-pk { background: linear-gradient(135deg, #4cc9f0, #4361ee); } .av-cd { background: linear-gradient(135deg, #06d6a0, #1b9aaa); } .contact-person-dept { font-size: 10px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; } .contact-person-name { font-size: 14px; font-weight: 700; font-family: var(--sans); color: var(--ink); } .contact-person-email { font-size: 12.5px; font-family: var(--sans); color: var(--brand-red); } /* Follow Us card */ .follow-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px; box-shadow: var(--shadow-card); margin-top: 20px; } .follow-card h5 { font-size: 16px; font-weight: 700; font-family: var(--sans); margin-bottom: 6px; } .follow-card > p { font-size: 13px; font-family: var(--sans); color: var(--muted); margin-bottom: 18px; } .follow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .follow-tile { display: flex; align-items: center; gap: 10px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; transition: all 0.2s ease; } .follow-tile:hover { border-color: var(--brand-red); background: #fde9eb; } .follow-tile-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; flex-shrink: 0; } .ft-tw { background: #000; } .ft-li { background: #0077b5; } .ft-ig { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); } .ft-yt { background: #ff0000; } .follow-tile-name { font-size: 13px; font-weight: 700; font-family: var(--sans); color: var(--ink); } .follow-tile-handle { font-size: 11px; font-family: var(--sans); color: var(--muted); } /* FAQ section */ .faq-section { padding: 8px 0 0; } .faq-section h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; } .faq-section > p { font-size: 14px; font-family: var(--sans); color: var(--muted); margin-bottom: 24px; } .faq-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 10px; transition: box-shadow 0.2s ease; } .faq-item:hover { box-shadow: var(--shadow-card); } .faq-question { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; cursor: pointer; gap: 16px; user-select: none; } .faq-number { width: 24px; height: 24px; border-radius: 50%; background: #fdecee; color: var(--brand-red); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; font-family: var(--sans); flex-shrink: 0; } .faq-q-text { flex: 1; font-size: 15px; font-weight: 700; font-family: var(--sans); color: var(--ink); } .faq-chevron { font-size: 12px; color: var(--muted); transition: transform 0.25s ease; flex-shrink: 0; } .faq-item.open .faq-chevron { transform: rotate(180deg); color: var(--brand-red); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; } .faq-item.open .faq-answer { max-height: 300px; } .faq-answer-inner { padding: 0 22px 20px 60px; font-size: 14px; font-family: var(--sans); color: var(--ink-soft); line-height: 1.65; } /* ============================================================ 24. MAGAZINE PAGE ============================================================ */ /* Current issue hero */ .magazine-hero { background: linear-gradient(135deg, #14171f 0%, #2a0a0a 100%); padding: 60px 0; position: relative; overflow: hidden; } .magazine-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(230,57,70,0.18) 0%, transparent 60%); pointer-events: none; } .magazine-hero-content { position: relative; z-index: 2; } .magazine-current-tag { display: inline-flex; align-items: center; gap: 8px; background: var(--brand-red); color: #fff; padding: 6px 16px; border-radius: 999px; font-size: 11px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 18px; } .magazine-current-tag .issue-label { background: transparent; color: rgba(255,255,255,0.85); font-weight: 400; font-size: 12px; letter-spacing: 0; text-transform: none; } .magazine-hero h1 { font-size: clamp(30px, 5vw, 50px); font-weight: 800; color: #fff; line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 16px; } .magazine-hero p { font-size: 15px; font-family: var(--sans); color: rgba(255,255,255,0.8); line-height: 1.6; margin-bottom: 28px; max-width: 480px; } .magazine-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; } .btn-read-issuu { display: inline-flex; align-items: center; gap: 8px; background: var(--brand-red); color: #fff; border: none; border-radius: 999px; padding: 12px 24px; font-size: 14px; font-weight: 700; font-family: var(--sans); cursor: pointer; transition: all 0.2s ease; } .btn-read-issuu:hover { background: var(--brand-red-dark); color: #fff; transform: translateY(-1px); } .btn-open-issuu { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; padding: 12px 24px; font-size: 14px; font-weight: 600; font-family: var(--sans); cursor: pointer; transition: all 0.2s ease; } .btn-open-issuu:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.5); } /* Magazine cover card (current issue) */ .magazine-cover-card { border-radius: 12px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.5); position: relative; width: 100%; max-width: 280px; margin-left: auto; } .magazine-cover-image { width: 100%; aspect-ratio: 3/4; position: relative; overflow: hidden; } .magazine-cover-image .placeholder-img { height: 100%; } .magazine-cover-badge { position: absolute; top: 12px; right: 12px; background: var(--brand-red); color: #fff; padding: 4px 12px; border-radius: 4px; font-size: 11px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.08em; z-index: 2; } .magazine-cover-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, transparent 60%); padding: 20px 16px 16px; z-index: 2; } .magazine-cover-story-tag { font-size: 9px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.15em; text-transform: uppercase; color: var(--brand-red); margin-bottom: 6px; } .magazine-cover-story-title { font-size: 14px; font-weight: 700; font-family: var(--serif); color: #fff; line-height: 1.25; margin-bottom: 4px; } .magazine-cover-story-date { font-size: 11px; font-family: var(--sans); color: rgba(255,255,255,0.65); } /* Archive section */ .archive-section { padding: 50px 0; background: var(--bg-soft); } .archive-section-tag { font-size: 11px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-red); margin-bottom: 8px; display: block; } .archive-section h2 { font-size: 32px; font-weight: 800; letter-spacing: -0.025em; margin-bottom: 0; } .view-issuu-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 9px 20px; font-size: 13px; font-weight: 600; font-family: var(--sans); color: var(--ink); cursor: pointer; transition: all 0.2s ease; } .view-issuu-btn:hover { border-color: var(--brand-red); color: var(--brand-red); } /* Issue card */ .issue-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: all 0.25s ease; height: 100%; display: flex; flex-direction: column; } .issue-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); } /* Magazine cover image inside issue card */ .issue-cover { width: 100%; padding: 24px 24px 12px; background: #f0f0f2; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .issue-cover img { width: 75%; height: auto; display: block; object-fit: cover; border-radius: 2px; box-shadow: 2px 2px 4px rgba(0,0,0,0.15), 4px 4px 8px rgba(0,0,0,0.1), 8px 8px 20px rgba(0,0,0,0.12), -1px 0px 3px rgba(0,0,0,0.08); position: relative; } /* Spine effect */ .issue-cover img::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 6px; background: linear-gradient(to right, rgba(0,0,0,0.15), transparent); border-radius: 2px 0 0 2px; } .issue-cover-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, #1a1d2b 0%, #14171f 100%); position: relative; overflow: hidden; } .issue-cover-placeholder::before { content: ''; position: absolute; top: -30%; right: -20%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(230,57,70,0.25) 0%, transparent 70%); } .issue-cover-number { font-size: 11px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.4); position: relative; z-index: 1; } .issue-cover-title-text { font-size: 16px; font-weight: 800; font-family: var(--serif); color: #fff; text-align: center; line-height: 1.2; padding: 0 16px; position: relative; z-index: 1; letter-spacing: -0.01em; } .issue-cover-date { font-size: 11px; font-family: var(--sans); color: rgba(255,255,255,0.5); position: relative; z-index: 1; } .issue-cover-badge { position: absolute; bottom: 10px; right: 10px; z-index: 2; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.7); padding: 3px 10px; border-radius: 4px; font-size: 10px; font-weight: 600; font-family: var(--sans); backdrop-filter: blur(4px); } .issue-body { padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; } .issue-title { font-size: 17px; font-weight: 700; font-family: var(--serif); letter-spacing: -0.02em; margin-bottom: 10px; line-height: 1.25; color: var(--ink); } .issue-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 14px; } .issue-tag { display: inline-block; padding: 3px 9px; border-radius: 4px; font-size: 10px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.07em; text-transform: uppercase; background: var(--bg-tile); color: var(--ink-soft); border: 1px solid var(--line); } .read-issue-link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-size: 13px; font-weight: 700; font-family: var(--sans); color: var(--brand-red); transition: gap 0.2s ease; } .read-issue-link:hover { gap: 10px; color: var(--brand-red-dark); } /* ============================================================ 25. RESPONSIVE — NEW PAGES ============================================================ */ @media (max-width: 991px) { .post-hero { height: 300px; } .post-hero .placeholder-img { height: 300px; } .magazine-hero { padding: 40px 0; } .magazine-cover-card { max-width: 220px; } .contact-hero { padding: 40px 0 36px; } } @media (max-width: 767px) { .post-hero { height: 220px; } .post-hero .placeholder-img { height: 220px; } .post-author-bar { flex-wrap: wrap; gap: 10px; } .post-author-actions { margin-left: 0; } .contact-info-row { padding: 24px 0 0; } .contact-form-card { padding: 24px; } .magazine-hero { padding: 32px 0; } .magazine-cover-card { max-width: 180px; margin: 24px auto 0; } .faq-answer-inner { padding-left: 22px; } .follow-grid { grid-template-columns: 1fr; } } /* ============================================================ 26. SUPPLIERS PAGE ============================================================ */ /* Hero */ .suppliers-hero { background: linear-gradient(135deg, #14171f 0%, #1a2a1a 100%); padding: 64px 0 56px; position: relative; overflow: hidden; } .suppliers-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 60% 50%, rgba(230,57,70,0.12) 0%, transparent 65%); pointer-events: none; } .suppliers-hero-content { position: relative; z-index: 2; } .suppliers-hero-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-red); color: #fff; padding: 6px 16px; border-radius: 999px; font-size: 11px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 18px; } .suppliers-hero h1 { font-size: clamp(32px, 5vw, 50px); font-weight: 800; color: #fff; letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 14px; } .suppliers-hero p { font-size: 16px; font-family: var(--sans); color: rgba(255,255,255,0.75); max-width: 520px; line-height: 1.6; margin-bottom: 28px; } .suppliers-hero-stats { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 8px; } .hero-stat-num { font-size: 28px; font-weight: 800; font-family: var(--serif); color: #fff; line-height: 1; margin-bottom: 4px; letter-spacing: -0.02em; } .hero-stat-label { font-size: 12px; font-family: var(--sans); color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; } /* Search + filter bar */ .suppliers-search-bar { background: #fff; border-bottom: 1px solid var(--line); padding: 20px 0; position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .suppliers-search-inner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .supplier-search-input-wrap { position: relative; flex: 1; min-width: 240px; } .supplier-search-input-wrap i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 14px; } .supplier-search-field { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 11px 16px 11px 44px; font-size: 14px; font-family: var(--sans); background: #fafafa; color: var(--ink); outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .supplier-search-field:focus { border-color: var(--brand-red); box-shadow: 0 0 0 3px rgba(230,57,70,0.1); background: #fff; } .supplier-filter-select { border: 1px solid var(--line); border-radius: 10px; padding: 11px 36px 11px 14px; font-size: 13.5px; font-family: var(--sans); color: var(--ink); background: #fafafa; cursor: pointer; outline: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8f9c' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; transition: border-color 0.2s ease; } .supplier-filter-select:focus { border-color: var(--brand-red); background-color: #fff; } .supplier-result-count { font-size: 13px; font-family: var(--sans); color: var(--muted); white-space: nowrap; margin-left: auto; } .supplier-result-count strong { color: var(--ink); font-weight: 700; } /* Category pill tabs */ .supplier-category-tabs { display: flex; gap: 8px; flex-wrap: wrap; padding: 16px 0 4px; border-bottom: 1px solid var(--line); margin-bottom: 28px; } .sup-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 500; font-family: var(--sans); color: var(--ink-soft); cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .sup-tab:hover { border-color: var(--brand-red); color: var(--brand-red); background: #fde9eb; } .sup-tab.active { background: var(--brand-red); border-color: var(--brand-red); color: #fff; font-weight: 600; } .sup-tab .tab-count { background: rgba(0,0,0,0.08); color: inherit; border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 700; } .sup-tab.active .tab-count { background: rgba(255,255,255,0.25); } /* Featured supplier card */ .featured-supplier-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-card); transition: all 0.25s ease; display: flex; flex-direction: column; height: 100%; } .featured-supplier-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); } .featured-supplier-image { width: 100%; height: 160px; position: relative; } .featured-supplier-image .placeholder-img { height: 160px; } .featured-badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--brand-red); color: #fff; padding: 4px 12px; border-radius: 999px; font-size: 10px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.08em; text-transform: uppercase; } .featured-supplier-body { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; } .supplier-card-logo-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .supplier-card-logo { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; font-family: var(--sans); color: #fff; flex-shrink: 0; } .supplier-card-name-wrap { flex: 1; min-width: 0; } .supplier-card-name { font-size: 17px; font-weight: 700; font-family: var(--serif); letter-spacing: -0.02em; margin-bottom: 2px; color: var(--ink); } .supplier-card-cat { font-size: 11px; font-weight: 700; font-family: var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; } .supplier-card-desc { font-size: 13.5px; font-family: var(--sans); color: var(--ink-soft); line-height: 1.55; margin-bottom: 16px; flex: 1; } .supplier-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid #f2f2f2; } .supplier-card-location { font-size: 12px; font-family: var(--sans); color: var(--muted); display: flex; align-items: center; gap: 5px; } .btn-view-supplier { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-red); color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-size: 12.5px; font-weight: 700; font-family: var(--sans); cursor: pointer; transition: all 0.2s ease; text-decoration: none; } .btn-view-supplier:hover { background: var(--brand-red-dark); color: #fff; transform: translateY(-1px); } /* List-style supplier row card */ .supplier-list-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; display: flex; align-items: center; gap: 18px; box-shadow: var(--shadow-card); transition: all 0.25s ease; } .supplier-list-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); } .supplier-list-logo { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; font-family: var(--sans); color: #fff; flex-shrink: 0; } .supplier-list-info { flex: 1; min-width: 0; } .supplier-list-name { font-size: 16px; font-weight: 700; font-family: var(--serif); letter-spacing: -0.02em; margin-bottom: 3px; color: var(--ink); } .supplier-list-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; font-family: var(--sans); color: var(--muted); } .supplier-list-desc { font-size: 13px; font-family: var(--sans); color: var(--ink-soft); line-height: 1.5; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .supplier-list-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* Get Listed CTA panel */ .get-listed-panel { background: linear-gradient(135deg, #14171f 0%, #1a2a1a 100%); border-radius: 14px; padding: 32px; color: #fff; position: relative; overflow: hidden; } .get-listed-panel::before { content: ''; position: absolute; top: -40%; right: -10%; width: 280px; height: 280px; background: radial-gradient(circle, rgba(230,57,70,0.2) 0%, transparent 70%); } .get-listed-panel-content { position: relative; z-index: 2; } .get-listed-tag { font-size: 10px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.15em; text-transform: uppercase; color: var(--brand-red); margin-bottom: 10px; } .get-listed-panel h3 { font-family: var(--serif); font-size: 22px; font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 10px; letter-spacing: -0.02em; } .get-listed-panel p { font-size: 13.5px; font-family: var(--sans); color: rgba(255,255,255,0.8); line-height: 1.55; margin-bottom: 18px; } .get-listed-perks { list-style: none; padding: 0; margin: 0 0 20px; } .get-listed-perks li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-family: var(--sans); color: rgba(255,255,255,0.85); margin-bottom: 8px; } .get-listed-perks li i { color: var(--brand-red); font-size: 12px; flex-shrink: 0; } /* Supplier sidebar newsletter */ .supplier-sidebar-newsletter { background: var(--brand-red); border-radius: 14px; padding: 24px; color: #fff; margin-top: 20px; } .supplier-sidebar-newsletter h5 { font-family: var(--serif); font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 8px; } .supplier-sidebar-newsletter p { font-size: 13px; font-family: var(--sans); opacity: 0.9; line-height: 1.5; margin-bottom: 16px; } .supplier-sidebar-newsletter input { width: 100%; border: none; border-radius: 8px; padding: 10px 14px; font-size: 13px; font-family: var(--sans); margin-bottom: 8px; outline: none; background: rgba(255,255,255,0.2); color: #fff; } .supplier-sidebar-newsletter input::placeholder { color: rgba(255,255,255,0.7); } /* ============================================================ 27. PRIVACY POLICY PAGE ============================================================ */ .privacy-hero { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 48px 0 40px; } .privacy-hero-tag { display: inline-block; background: #fdecee; color: var(--brand-red); padding: 5px 14px; border-radius: 4px; font-size: 10px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; } .privacy-hero h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -0.025em; margin-bottom: 10px; } .privacy-hero-meta { font-size: 13px; font-family: var(--sans); color: var(--muted); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .privacy-hero-meta strong { color: var(--ink); } .privacy-sidebar { position: sticky; top: 24px; } .privacy-nav { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; box-shadow: var(--shadow-card); } .privacy-nav h6 { font-size: 11px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .privacy-nav ul { list-style: none; padding: 0; margin: 0; } .privacy-nav ul li { border-bottom: 1px solid #f2f2f2; } .privacy-nav ul li:last-child { border-bottom: none; } .privacy-nav ul li a { display: block; padding: 9px 0; font-size: 13.5px; font-weight: 500; font-family: var(--sans); color: var(--ink-soft); transition: color 0.2s ease, padding 0.2s ease; } .privacy-nav ul li a:hover { color: var(--brand-red); padding-left: 4px; } .privacy-nav ul li a.active { color: var(--brand-red); font-weight: 700; } .policy-body { padding: 40px 0; } .policy-section { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--line); } .policy-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .policy-section-num { font-size: 11px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.15em; text-transform: uppercase; color: var(--brand-red); margin-bottom: 8px; } .policy-section h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; } .policy-section p { font-size: 15px; font-family: var(--sans); color: var(--ink-soft); line-height: 1.75; margin-bottom: 14px; } .policy-section p:last-child { margin-bottom: 0; } .policy-section ul, .policy-section ol { font-size: 15px; font-family: var(--sans); color: var(--ink-soft); line-height: 1.75; padding-left: 24px; margin-bottom: 14px; } .policy-section ul li, .policy-section ol li { margin-bottom: 6px; } .policy-section h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; margin: 24px 0 10px; color: var(--ink); } .policy-contact-box { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 24px; margin-top: 20px; } .policy-contact-box p { font-size: 14px; font-family: var(--sans); color: var(--ink-soft); margin-bottom: 8px; line-height: 1.6; } .policy-contact-box a { color: var(--brand-red); font-weight: 600; } /* ============================================================ 28. ABOUT US PAGE ============================================================ */ .about-hero { background: linear-gradient(135deg, #14171f 0%, #1f1a2e 100%); padding: 72px 0 64px; position: relative; overflow: hidden; } .about-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 50%, rgba(230,57,70,0.12) 0%, transparent 60%); pointer-events: none; } .about-hero-content { position: relative; z-index: 2; } .about-hero-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-red); color: #fff; padding: 6px 16px; border-radius: 999px; font-size: 11px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 20px; } .about-hero h1 { font-size: clamp(34px, 5vw, 54px); font-weight: 800; color: #fff; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 20px; } .about-hero h1 em { font-style: normal; color: var(--brand-red); } .about-hero-lead { font-size: 18px; font-family: var(--sans); color: rgba(255,255,255,0.8); line-height: 1.65; max-width: 580px; margin-bottom: 36px; } .about-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 560px; } .about-stat { border-left: 2px solid rgba(230,57,70,0.4); padding-left: 16px; } .about-stat-num { font-size: 26px; font-weight: 800; font-family: var(--serif); color: #fff; line-height: 1; margin-bottom: 4px; letter-spacing: -0.02em; } .about-stat-label { font-size: 11px; font-family: var(--sans); color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; } .about-mission { padding: 72px 0; background: #fff; } .about-mission-tag { display: inline-block; background: #fdecee; color: var(--brand-red); padding: 5px 14px; border-radius: 4px; font-size: 10px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; } .about-mission h2 { font-size: clamp(26px, 4vw, 38px); font-weight: 700; letter-spacing: -0.025em; margin-bottom: 20px; line-height: 1.1; } .about-mission-body { font-size: 16px; font-family: var(--sans); color: var(--ink-soft); line-height: 1.75; } .about-mission-body p { margin-bottom: 1.2em; } .about-mission-body p:last-child { margin-bottom: 0; } .about-values { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; } .about-value-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 22px; } .about-value-icon { width: 40px; height: 40px; border-radius: 10px; background: #fdecee; color: var(--brand-red); display: flex; align-items: center; justify-content: center; font-size: 16px; margin-bottom: 12px; } .about-value-title { font-size: 15px; font-weight: 700; font-family: var(--sans); margin-bottom: 6px; letter-spacing: -0.01em; } .about-value-desc { font-size: 13px; font-family: var(--sans); color: var(--ink-soft); line-height: 1.5; margin: 0; } .about-image-block { border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-card-hover); } .about-section-tag { display: inline-block; background: #fdecee; color: var(--brand-red); padding: 5px 14px; border-radius: 4px; font-size: 10px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; } .about-team { padding: 72px 0; background: var(--bg-soft); } .about-team h2 { font-size: clamp(26px, 4vw, 36px); font-weight: 700; letter-spacing: -0.025em; margin-bottom: 8px; } .team-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 28px 24px; text-align: center; box-shadow: var(--shadow-card); transition: all 0.25s ease; height: 100%; } .team-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); } .team-avatar { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; font-family: var(--sans); color: #fff; margin: 0 auto 16px; } .av-red { background: linear-gradient(135deg, var(--brand-red), #ff6b6b); } .av-teal { background: linear-gradient(135deg, #2a9d8f, #264653); } .av-blue { background: linear-gradient(135deg, #4cc9f0, #4361ee); } .av-green { background: linear-gradient(135deg, #06d6a0, #1b9aaa); } .av-purple { background: linear-gradient(135deg, #7c3aed, #4c1d95); } .av-amber { background: linear-gradient(135deg, #d97706, #92400e); } .team-name { font-size: 18px; font-weight: 700; font-family: var(--serif); letter-spacing: -0.02em; margin-bottom: 4px; } .team-role { font-size: 12.5px; font-weight: 700; font-family: var(--sans); color: var(--brand-red); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; } .team-bio { font-size: 13.5px; font-family: var(--sans); color: var(--ink-soft); line-height: 1.55; margin-bottom: 16px; } .team-social { display: flex; justify-content: center; gap: 8px; } .team-social a { width: 32px; height: 32px; border-radius: 8px; background: var(--bg-tile); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--muted); transition: all 0.2s ease; } .team-social a:hover { background: #fdecee; border-color: var(--brand-red); color: var(--brand-red); } .about-history { padding: 72px 0; background: #fff; } .about-history h2 { font-size: clamp(26px, 4vw, 36px); font-weight: 700; letter-spacing: -0.025em; margin-bottom: 8px; } .timeline { position: relative; } .timeline::before { content: ''; position: absolute; left: 20px; top: 0; bottom: 0; width: 2px; background: var(--line); } .timeline-item { display: flex; gap: 28px; margin-bottom: 36px; position: relative; } .timeline-item:last-child { margin-bottom: 0; } .timeline-dot { width: 42px; height: 42px; border-radius: 50%; background: var(--brand-red); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; font-family: var(--sans); flex-shrink: 0; position: relative; z-index: 1; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--line); } .timeline-content { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; flex: 1; box-shadow: var(--shadow-card); } .timeline-year { font-size: 11px; font-weight: 700; font-family: var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-red); margin-bottom: 6px; } .timeline-title { font-size: 17px; font-weight: 700; font-family: var(--serif); letter-spacing: -0.02em; margin-bottom: 6px; } .timeline-desc { font-size: 13.5px; font-family: var(--sans); color: var(--ink-soft); line-height: 1.55; margin: 0; } .about-work-with-us { background: linear-gradient(135deg, var(--brand-red) 0%, #c92a36 100%); padding: 64px 0; color: #fff; position: relative; overflow: hidden; } .about-work-with-us::before { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,0.06); width: 400px; height: 400px; top: -150px; right: -100px; } .about-work-with-us-content { position: relative; z-index: 2; } .about-work-with-us h2 { font-size: clamp(26px, 4vw, 38px); font-weight: 700; color: #fff; letter-spacing: -0.025em; margin-bottom: 14px; } .about-work-with-us p { font-size: 16px; font-family: var(--sans); color: rgba(255,255,255,0.85); line-height: 1.6; margin-bottom: 28px; max-width: 520px; } .work-option-cards { display: flex; gap: 16px; flex-wrap: wrap; } .work-option-card { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; padding: 20px 22px; flex: 1; min-width: 200px; transition: all 0.2s ease; } .work-option-card:hover { background: rgba(255,255,255,0.18); } .work-option-icon { font-size: 22px; margin-bottom: 10px; color: rgba(255,255,255,0.9); } .work-option-title { font-size: 16px; font-weight: 700; font-family: var(--sans); color: #fff; margin-bottom: 6px; } .work-option-desc { font-size: 13px; font-family: var(--sans); color: rgba(255,255,255,0.75); line-height: 1.5; margin-bottom: 14px; } .work-option-link { font-size: 13px; font-weight: 700; font-family: var(--sans); color: #fff; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s ease; } .work-option-link:hover { color: #fff; gap: 10px; } /* ============================================================ 29. RESPONSIVE — SUPPLIERS, PRIVACY, ABOUT ============================================================ */ @media (max-width: 991px) { .about-hero-stats { grid-template-columns: repeat(2, 1fr); } .about-values { grid-template-columns: 1fr; } .suppliers-hero { padding: 44px 0 40px; } } @media (max-width: 767px) { .supplier-list-card { flex-wrap: wrap; } .supplier-list-actions { width: 100%; justify-content: flex-end; } .suppliers-search-inner { flex-direction: column; align-items: stretch; } .supplier-result-count { margin-left: 0; } .about-hero-stats { grid-template-columns: 1fr 1fr; gap: 16px; } .about-work-with-us { padding: 44px 0; } .work-option-cards { flex-direction: column; } .timeline::before { left: 18px; } .timeline-dot { width: 36px; height: 36px; font-size: 11px; } .privacy-sidebar { position: static; margin-bottom: 32px; } .about-values { grid-template-columns: 1fr; } }