/* ==================================================================== BFF — Block-specific CSS additions Styles for listing cards (projects-list, news-list) and template templates (search, 404, archive). Sits on top of styles.css. ==================================================================== */ /* ==================================================================== Comprehensive responsive sweep — applied across all BFF blocks. styles.css already has many queries; this block targets gaps + my custom blocks (home-news, home-contact, projects-list, news-list, page-document body, etc.) so nothing breaks at <900px / <600px. ==================================================================== */ @media (max-width: 900px) { /* Hero content lifts up on tablet */ body.nav-ghost .hero-content { padding-top: 100px; } .hero-title { font-size: clamp(40px, 7vw, 72px) !important; } .hero-lede { font-size: 15px; } .hero-ctas { flex-wrap: wrap; gap: 12px; } .slide-indicators { grid-template-columns: 1fr 1fr; gap: 16px; } .slide-label { font-size: 12px; } /* Stats — already 1fr at 600, force here too */ .stats-row { grid-template-columns: 1fr 1fr; gap: 32px; } .stats-row .head { grid-column: span 2; } /* Featured project */ .featured-body { grid-template-columns: 1fr; gap: 32px; } .featured-photo { aspect-ratio: 16 / 10; } .proj-scroll { grid-template-columns: 1fr; gap: 16px; } /* Page document body padding shrinks */ .page-document-head { padding: 64px 0 24px; } .page-document-title { font-size: clamp(32px, 6vw, 48px) !important; } .page-document-body { font-size: 16px; padding-bottom: 64px; } /* Nav CTA hide num on smaller screens */ .nav-cta-label .nav-cta-num { display: none; } /* Utility bar wrap better */ .utility .shell { flex-wrap: wrap; gap: 8px; padding: 8px 16px; } .utility .udesktop { display: none; } /* Style guide narrower padding */ .styleguide-title { padding-top: 56px; padding-bottom: 12px; } .styleguide-section { font-size: 18px; margin: 48px auto 16px; } .styleguide-divider { font-size: 24px; margin-top: 64px; padding: 24px 16px; } } @media (max-width: 700px) { /* Stats 1 col */ .stats-row { grid-template-columns: 1fr; gap: 24px; } .stats-row .head { grid-column: span 1; } .stats-row .num { font-size: 48px; } /* Spec list inside featured-info */ .spec-list .row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; } .spec-list .row .note { font-size: 11px; opacity: 0.6; } /* Project hero keystats */ .pd-keystats { grid-template-columns: 1fr 1fr; gap: 24px; } /* Project gallery: thumbs below main, no side strip */ .pd-gallery-grid { grid-template-columns: 1fr; gap: 16px; } .pd-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-height: none; overflow: visible; } .pd-thumb { aspect-ratio: 1; } /* Roadmap timeline becomes vertical on mobile (it usually is) */ .tl-row { grid-template-columns: 80px 32px 1fr; gap: 12px; } /* Reps + team — 1 col on small */ .reps-grid, .team-grid { grid-template-columns: 1fr; } /* Contact methods */ .ctp-method { grid-template-columns: 36px 36px 1fr; gap: 12px; padding: 20px 0; } .ctp-method-icon { font-size: 20px; } /* Footer columns stack */ .foot-top { grid-template-columns: 1fr; gap: 32px; } /* Page-document body lists tighter margins */ .page-document-body ul, .page-document-body ol { margin-left: 18px; } /* Nav CTA shrinks to icon only */ .nav-cta { padding: 10px 14px; } .nav-cta-label { display: none; } /* Home news cards — stack */ .home-news-grid { grid-template-columns: 1fr !important; gap: 24px; } .home-news-thumb { aspect-ratio: 16 / 10; } .home-news-card h3 { font-size: 20px; } /* Home contact split — stack */ .contact-split { grid-template-columns: 1fr !important; } .contact-info-col, .contact-form-col { padding: 56px 24px; } .contact-info-col h2 { font-size: clamp(32px, 7vw, 48px); } .home-form { grid-template-columns: 1fr; } /* Style guide */ .styleguide-title { padding-top: 40px; font-size: clamp(32px, 8vw, 48px); } .styleguide-section { font-size: 16px; padding: 12px 0; } /* Pagination shrinks */ .pagination .nav-links { flex-wrap: wrap; gap: 6px; font-size: 11px; } .pagination a, .pagination span { padding: 6px 10px; } /* Search results stack */ .search-result { flex-direction: column; } .search-result-thumb { width: 100%; aspect-ratio: 16 / 10; } /* 404 */ .e404-grid { grid-template-columns: 1fr; gap: 24px; } .e404-num { font-size: clamp(140px, 30vw, 200px); } } @media (max-width: 480px) { /* Hero pill shrinks */ .hero-meta .pill { font-size: 11px; padding: 6px 12px; } /* Hero CTAs full width */ .hero-ctas .btn { width: 100%; justify-content: center; } .hero-ctas { gap: 8px; } /* Slide indicators — show only active */ .slide-indicators { grid-template-columns: 1fr; gap: 8px; } .slide-dot:not(.is-active):not(.active) { display: none; } /* Floating CTAs shrink to icon-only is in design styles.css mobile rule already */ /* Project gallery thumbs 2 cols on tiny screens */ .pd-thumbs { grid-template-columns: repeat(2, 1fr); } /* Project keystats 1 col */ .pd-keystats { grid-template-columns: 1fr; gap: 16px; } } /* ---------- Hero slider — bridge .is-active to .active for js compat ----- styles.css styles .hero-slide.active and .slide-dot.active, but the JS slider in app.js toggles .is-active. Mirror the styles so either class produces the same visual result, including the 6s progress-bar fill. */ .hero-slide.is-active { opacity: 1; transform: scale(1); } .slide-dot.is-active { color: var(--cream); } .slide-dot.is-active .slide-bar-fill { animation: slideProgress 6s linear forwards; } /* Hero overlay+scrim — same recipe as styles.css design but with the right side bumped to 50% (vs design's 35%) so the headline still reads cleanly on bright slides like warehouse-loading.jpg. Diagonal stripes kept at the design's subtle 2.5% so they're a texture, not a pattern. Z-INDEX FIX: .hero-slide uses `transform: scale(...)` which creates a new stacking context. Even though overlay+scrim come later in DOM, the slide's stacking context can paint above them. Explicit z-index on overlay (2) and scrim (3) guarantees they always sit on top of every slide image. */ .hero.hero-slider .hero-slider-overlay { z-index: 2; background: linear-gradient(110deg, rgba(6, 24, 51, 0.82) 0%, rgba(6, 24, 51, 0.65) 50%, rgba(6, 24, 51, 0.50) 100%); } .hero.hero-slider .hero-slider-scrim { z-index: 3; background: linear-gradient(180deg, rgba(6,24,51,0) 50%, rgba(6,24,51,0.65) 100%), repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 14px, transparent 14px, transparent 28px); } .hero.hero-slider .hero-slide { z-index: 1; } /* ---------- Uploaded brand logo (replaces text "BFF / Business for Future") Use a fixed height (not max-height + height:auto): the symbol SVGs are width:100% with no intrinsic height, so height:auto collapses them to 0. */ .brand-logo-img { display: block; height: 40px; width: auto; } .nav .brand-logo-img { height: var(--nav-logo-h, 40px); } .site-footer .brand-logo-img { height: 56px; } @media (max-width: 700px) { .nav .brand-logo-img { height: calc(var(--nav-logo-h, 40px) * 0.8); } } /* Footer bottom row + floating CTA + gtt now use design CSS in styles.css. Old override block removed so the design's .foot-bot-co + .float-cta-btn.zalo + .gtt styles apply unmodified. */ /* ---------- Project Gallery lightbox overlay ---------- */ .bff-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(6, 24, 51, 0.94); display: flex; align-items: center; justify-content: center; padding: 48px 72px; animation: bff-lb-fade 0.2s ease; } @keyframes bff-lb-fade { from { opacity: 0; } to { opacity: 1; } } .bff-lightbox-stage { max-width: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; } .bff-lightbox-stage img { max-width: 100%; max-height: 80vh; object-fit: contain; box-shadow: 0 20px 60px -10px rgba(0,0,0,0.5); } .bff-lightbox-close, .bff-lightbox-nav { position: absolute; background: rgba(255,255,255,0.10); color: #fff; border: 1px solid rgba(255,255,255,0.20); border-radius: 50%; width: 48px; height: 48px; font-size: 28px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.2s; } .bff-lightbox-close:hover, .bff-lightbox-nav:hover { background: var(--orange); border-color: var(--orange); transform: scale(1.05); } .bff-lightbox-close { top: 24px; right: 24px; } .bff-lightbox-nav.prev { left: 24px; top: 50%; transform: translateY(-50%); } .bff-lightbox-nav.next { right: 24px; top: 50%; transform: translateY(-50%); } .bff-lightbox-nav.prev:hover { transform: translateY(-50%) scale(1.05); } .bff-lightbox-nav.next:hover { transform: translateY(-50%) scale(1.05); } .bff-lightbox-cap { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.85); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; background: rgba(0,0,0,0.40); padding: 8px 16px; border-radius: 4px; max-width: calc(100% - 48px); text-align: center; } @media (max-width: 700px) { .bff-lightbox { padding: 64px 16px; } .bff-lightbox-close, .bff-lightbox-nav { width: 40px; height: 40px; font-size: 22px; } .bff-lightbox-close { top: 12px; right: 12px; } .bff-lightbox-nav.prev { left: 8px; } .bff-lightbox-nav.next { right: 8px; } } /* ---------- Project Gallery mobile overflow fix ---------- Mobile media query in styles.css sets grid-template-columns: 1fr but grid 1fr defaults to minmax(auto, 1fr) which can grow with min-content, pushing the column wider than viewport. Force minmax(0, 1fr) + defensive overflow-x: hidden on the section + max-width: 100vw on shell. */ @media (max-width: 900px) { .pd-gallery { overflow-x: hidden; max-width: 100vw; } .pd-gallery .shell { max-width: 100%; overflow-x: hidden; } .pd-gallery-grid { grid-template-columns: minmax(0, 1fr); max-width: 100%; } .pd-thumbs { min-width: 0; max-width: 100%; padding-bottom: 8px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .pd-thumb { min-width: 120px; } .pd-main-img { width: 100%; max-width: 100%; } .pd-main-img .img { max-width: 100%; } } /* ---------- Global body horizontal overflow guard for mobile ---------- The hero-title uses clamp() font + max-width: 18ch which can exceed narrow viewports if a word doesn't break (Vietnamese with diacritics). Pages can also leak horizontally via wide images, embeds, or wide rows inside grids using default 1fr. Clip at the html/body level so no section forces a page-wide horizontal scrollbar. */ @media (max-width: 900px) { html, body { overflow-x: hidden; max-width: 100vw; } .hero-title { max-width: 100%; word-break: break-word; } } /* ---------- Contact Methods standalone block — shell wrapper ----------- When ctp-side-block renders by itself (not inside .ctp-grid), it has no shell padding so content stretches edge-to-edge of viewport. Add shell padding + max-width when standalone. */ .ctp-side-block { max-width: 1192px; margin-left: auto; margin-right: auto; padding: 32px 48px; box-sizing: border-box; } .ctp-grid .ctp-side-block, .ctp-side .ctp-side-block { max-width: none; padding: 0; margin: 0; } @media (min-width: 1280px) { .ctp-side-block { padding: 32px 64px; } } @media (max-width: 900px) { .ctp-side-block { padding: 24px; } .ctp-method { grid-template-columns: 28px 44px 1fr; gap: 16px; } .ctp-method-icon { width: 40px; height: 40px; font-size: 18px; } .ctp-method-body h3 { font-size: 22px; word-break: break-word; } .ctp-method-num { padding-top: 4px; } } @media (max-width: 480px) { .ctp-side-block { padding: 20px 16px; } .ctp-method { grid-template-columns: 24px 40px 1fr; gap: 12px; padding: 20px 0; } .ctp-method-icon { width: 36px; height: 36px; font-size: 16px; } .ctp-method-body h3 { font-size: 20px; } .ctp-method-body .mono { font-size: 10.5px; } .ctp-method-body p { font-size: 13px; } } /* Contact form sticky scope fix — styles.css line 2671 sets .ctp-form-wrap { position: sticky; top: 100px } which is what we want when the form sits next to a tall info column (.ctp-grid + .ctp-side). But the standalone bff/contact-form block uses the same class, so it ends up floating when scrolled. Restrict sticky to the grid-parent case only. */ .ctp-form-wrap { position: relative !important; top: auto !important; } .ctp-grid > .ctp-form-wrap, .contact-split .ctp-form-wrap { position: sticky !important; top: 100px !important; } @media (max-width: 900px) { /* On narrow screens disable sticky entirely (the columns stack). */ .ctp-grid > .ctp-form-wrap, .contact-split .ctp-form-wrap { position: relative !important; top: auto !important; } } /* ---------- Home News teaser cards — Match design parts-contact.jsx + styles.css .news-grid: 1.4fr 1fr 1fr → first card (feat) WIDER than the other two. Feat card gets taller thumb (5/4) + bigger h3 via .news-card.feat rules already in styles.css line 1111 + 1161. Note: render outputs `news-grid home-news-grid` so the projects/news shared rule `.projects-grid, .news-grid, .article-related-grid` later in this file (with repeat(3, 1fr)) would override a single-class `.home-news-grid` rule. Bump specificity by combining BOTH classes. */ .news-grid.home-news-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; margin-top: 48px; align-items: start; } @media (max-width: 900px) { .news-grid.home-news-grid { grid-template-columns: 1fr 1fr; gap: 24px; } .home-news-card.feat { grid-column: 1 / -1; } } @media (max-width: 600px) { .news-grid.home-news-grid { grid-template-columns: 1fr; } .home-news-card.feat { grid-column: auto; } } .home-news-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform 0.2s; } .home-news-card:hover { transform: translateY(-4px); } .home-news-thumb { position: relative; width: 100%; aspect-ratio: 4 / 3; background-size: cover; background-position: center; overflow: hidden; margin-bottom: 18px; } /* Feat card: taller thumbnail to match design 5/4 aspect ratio. */ .home-news-card.feat .home-news-thumb { aspect-ratio: 5 / 4; } .home-news-card.feat h3 { font-size: 30px; line-height: 1.15; } .home-news-card.feat p { font-size: 15px; } .home-news-thumb .tag { position: absolute; top: 14px; left: 14px; background: var(--cream); color: var(--navy); font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; padding: 6px 10px; z-index: 2; } .home-news-thumb .thumb-cap { position: absolute; left: 14px; bottom: 14px; color: rgba(255,255,255,0.85); font-size: 10px; letter-spacing: 0.18em; text-shadow: 0 1px 2px rgba(0,0,0,0.4); z-index: 2; } .home-news-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(6,24,51,0.6) 100%); pointer-events: none; } .home-news-card .news-date { display: flex; gap: 8px; font-size: 11px; letter-spacing: 0.12em; color: var(--ink-3); margin-bottom: 12px; } .home-news-card h3 { font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; color: var(--navy); margin: 0 0 12px; } .home-news-card p { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; } .home-news-card.feat h3 { font-size: 24px; } /* ---------- Home Contact split layout — match index.html reference: section navy full-bleed with 80px side padding (no max-width container), grid 1fr 1.1fr gap 80px → form card EXTENDS nearly to right viewport edge with only 80px navy strip on each side. Content area fills full width minus side padding, not constrained to 1440. */ .home-contact-sec { background: var(--navy); color: var(--cream); padding: 96px 80px !important; } .contact-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; max-width: none; margin: 0; align-items: start; min-height: auto; } @media (max-width: 1280px) { .home-contact-sec { padding: 80px 48px !important; } } @media (max-width: 1100px) { .home-contact-sec { padding: 64px 32px !important; } .contact-split { gap: 56px; } } @media (max-width: 900px) { .home-contact-sec { padding: 48px 24px !important; } .contact-split { grid-template-columns: 1fr; gap: 32px; } } .contact-info-col { /* Transparent — inherits section navy. Reference style: content sits directly on the section bg, no own column bg. */ background: transparent; color: var(--cream); display: block; padding: 0; align-self: stretch; } .contact-info-inner { max-width: 520px; } .contact-info-col h2 { font-size: clamp(40px, 4.5vw, 64px); line-height: 1.05; letter-spacing: -0.02em; margin: 16px 0 24px; } .contact-info-col .lede { font-size: 16px; line-height: 1.55; color: rgba(244,239,230,0.75); margin-bottom: 40px; } .home-contact-sec .contact-info { display: flex; flex-direction: column; } .home-contact-sec .contact-info .row { display: grid; grid-template-columns: 110px 1fr; gap: 24px; padding: 20px 0; border-top: 1px solid rgba(244,239,230,0.12); align-items: start; } .home-contact-sec .contact-info .row:last-child { border-bottom: 1px solid rgba(244,239,230,0.12); } .home-contact-sec .contact-info .k { font-size: 10px; letter-spacing: 0.18em; color: rgba(244,239,230,0.5); text-transform: uppercase; } .home-contact-sec .contact-info .v { display: flex; flex-direction: column; gap: 4px; color: var(--cream); font-size: 16px; line-height: 1.4; } .home-contact-sec .contact-info .sub { color: rgba(244,239,230,0.5); font-size: 13px; } .contact-form-col { background: var(--cream); display: block; padding: 48px; position: relative; align-self: start; } .contact-form-inner { width: 100%; max-width: none; margin: 0; } @media (max-width: 900px) { .contact-form-col { padding: 32px 24px; } } .contact-form-tag { font-size: 11px; letter-spacing: 0.18em; color: var(--orange); margin-bottom: 12px; text-align: right; } .contact-form-inner h3 { font-size: 28px; color: var(--navy); margin: 0 0 8px; letter-spacing: -0.01em; } .contact-form-inner .form-sub { font-size: 13px; color: var(--ink-3); margin-bottom: 28px; } .home-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; } .home-form .field { display: flex; flex-direction: column; gap: 6px; } .home-form .field.full { grid-column: 1 / -1; } .home-form label { font-size: 10px; letter-spacing: 0.15em; color: var(--ink-3); } .home-form input, .home-form select, .home-form textarea { border: 0; border-bottom: 1px solid rgba(10,37,71,0.2); background: transparent; font: inherit; font-size: 15px; color: var(--navy); padding: 6px 0 10px; border-radius: 0; } .home-form input:focus, .home-form select:focus, .home-form textarea:focus { outline: none; border-bottom-color: var(--orange); } .home-form .consent { grid-column: 1 / -1; display: flex; gap: 10px; font-size: 13px; color: var(--ink-2); line-height: 1.5; align-items: flex-start; margin-top: 8px; } .home-form .consent input { width: 16px; height: 16px; margin-top: 2px; } .home-form .consent a { color: var(--orange); } .home-form .form-submit { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; } .home-form .req { font-size: 11px; letter-spacing: 0.1em; color: var(--ink-3); } @media (max-width: 600px) { .contact-info-col, .contact-form-col { padding: 56px 24px; } .home-form { grid-template-columns: 1fr; } .home-contact-sec .contact-info .row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; } } /* (Floating CTA and .gtt styles live in styles.css — design canonical) */ /* ---------- Page document layout (privacy, terms, plain pages) ----------- */ .shell--narrow { max-width: 800px; margin: 0 auto; padding: 0 24px; } .page-document-head { padding: 96px 0 32px; border-bottom: 1px solid var(--rule-light); margin-bottom: 48px; } .page-document-title { font-size: clamp(40px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.02em; color: var(--navy); margin: 12px 0 0; } .page-document-body { padding-bottom: 96px; font-size: 17px; line-height: 1.7; color: var(--ink-2); } .page-document-body h2 { margin: 48px 0 16px; font-size: 28px; color: var(--navy); } .page-document-body h3 { margin: 32px 0 12px; font-size: 22px; color: var(--navy); } .page-document-body p { margin: 0 0 18px; } .page-document-body ul, .page-document-body ol { margin: 0 0 24px 24px; } .page-document-body li { margin-bottom: 8px; } .page-document-body a { color: var(--orange); text-decoration: underline; } .page-document-body strong { color: var(--navy); } /* ==================================================================== Gutenberg CORE BLOCKS — global BFF design system styling. Applied to all core blocks across the site (not just styleguide) so user can drop them into any page editor and they look on-brand. ==================================================================== */ /* All core blocks live inside an article — constrain width via .shell. For the styleguide we wrap content with .bff-styleguide body class so the constraint is also applied to top-level blocks rendered without the page-document wrapper. */ .bff-styleguide .wp-block-paragraph, .bff-styleguide .wp-block-list, .bff-styleguide .wp-block-quote, .bff-styleguide .wp-block-pullquote, .bff-styleguide .wp-block-code, .bff-styleguide .wp-block-preformatted, .bff-styleguide .wp-block-verse, .bff-styleguide .wp-block-table, .bff-styleguide .wp-block-image, .bff-styleguide .wp-block-gallery, .bff-styleguide .wp-block-columns, .bff-styleguide .wp-block-group, .bff-styleguide .wp-block-buttons, .bff-styleguide .wp-block-separator, .bff-styleguide .wp-block-spacer, .bff-styleguide .wp-block-embed, .bff-styleguide .wp-block-latest-posts, .bff-styleguide .wp-block-search, .bff-styleguide .wp-block-media-text, .bff-styleguide .wp-block-page-list, .bff-styleguide .wp-block-categories, .bff-styleguide .wp-block-tag-cloud, .bff-styleguide .wp-block-archives, .bff-styleguide .wp-block-calendar, .bff-styleguide .wp-block-social-links, .bff-styleguide .wp-block-html, .bff-styleguide .wp-block-cover, .bff-styleguide h1.wp-block-heading, .bff-styleguide h3.wp-block-heading, .bff-styleguide h4.wp-block-heading, .bff-styleguide h5.wp-block-heading, .bff-styleguide h6.wp-block-heading, .bff-styleguide h2.wp-block-heading:not(.styleguide-section):not(.styleguide-divider) { max-width: 1192px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; box-sizing: border-box; } /* ---- Headings: serif navy with proper line-height ---- */ .bff-styleguide h1.wp-block-heading, .bff-styleguide h2.wp-block-heading:not(.styleguide-section):not(.styleguide-divider):not(.styleguide-core-section), .bff-styleguide h3.wp-block-heading, .bff-styleguide h4.wp-block-heading, .bff-styleguide h5.wp-block-heading, .bff-styleguide h6.wp-block-heading, .page-document-body h1, .page-document-body h2, .page-document-body h3, .page-document-body h4 { font-family: "Geist", Georgia, serif; color: var(--navy); letter-spacing: -0.015em; line-height: 1.15; } .bff-styleguide h1.wp-block-heading { font-size: clamp(40px, 5vw, 64px); margin: 32px auto 16px; } .bff-styleguide h2.wp-block-heading:not(.styleguide-section):not(.styleguide-divider):not(.styleguide-core-section) { font-size: clamp(32px, 4vw, 48px); margin: 28px auto 14px; } .bff-styleguide h3.wp-block-heading:not(.styleguide-core-section) { font-size: clamp(24px, 3vw, 32px); margin: 24px auto 12px; } .bff-styleguide h4.wp-block-heading { font-size: 22px; margin: 20px auto 10px; } .bff-styleguide h5.wp-block-heading { font-size: 18px; margin: 16px auto 8px; font-weight: 600; } .bff-styleguide h6.wp-block-heading { font-size: 14px; margin: 14px auto 6px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--orange); } /* ---- Paragraph + Lists ---- */ .bff-styleguide .wp-block-paragraph { font-size: 17px; line-height: 1.7; color: var(--ink-2); margin: 0 auto 18px; } .bff-styleguide .wp-block-paragraph a { color: var(--orange); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .bff-styleguide .wp-block-paragraph strong { color: var(--navy); font-weight: 700; } .bff-styleguide .wp-block-paragraph code { background: var(--paper); padding: 2px 6px; font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--navy); } .bff-styleguide .wp-block-paragraph mark { padding: 0 4px; } .bff-styleguide .wp-block-list { font-size: 16px; line-height: 1.65; color: var(--ink-2); margin: 0 auto 18px; padding-left: 52px; } .bff-styleguide .wp-block-list li { margin-bottom: 8px; } .bff-styleguide .wp-block-list li::marker { color: var(--orange); } /* ---- Quote + Pullquote ---- */ .bff-styleguide .wp-block-quote { border-left: 3px solid var(--orange); padding: 12px 28px; margin: 32px auto; font-style: italic; font-size: 18px; line-height: 1.55; color: var(--navy); background: var(--paper); } .bff-styleguide .wp-block-quote cite { display: block; margin-top: 12px; font-style: normal; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--orange); } .bff-styleguide .wp-block-pullquote { border-top: 2px solid var(--orange); border-bottom: 2px solid var(--orange); padding: 40px 28px; margin: 40px auto; text-align: center; } .bff-styleguide .wp-block-pullquote blockquote p { font-family: "Geist", Georgia, serif; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.3; color: var(--navy); margin: 0 0 16px; } .bff-styleguide .wp-block-pullquote cite { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--orange); font-style: normal; } /* ---- Image + Gallery ---- */ .bff-styleguide .wp-block-image figure, .bff-styleguide .wp-block-image { margin: 24px auto; } .bff-styleguide .wp-block-image img { display: block; max-width: 100%; height: auto; } .bff-styleguide .wp-block-image figcaption, .bff-styleguide .wp-element-caption { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--ink-3); text-align: left; padding: 8px 0; border-top: 1px solid var(--rule-light); margin-top: 8px; letter-spacing: 0.06em; } .bff-styleguide .wp-block-gallery { gap: 12px !important; margin: 24px auto; } /* ---- Cover ---- */ .bff-styleguide .wp-block-cover { min-height: 320px; max-width: 1128px; } .bff-styleguide .wp-block-cover .wp-block-cover__inner-container { padding: 32px; } /* ---- Columns + Group ---- */ .bff-styleguide .wp-block-columns { gap: 24px !important; margin: 32px auto; } .bff-styleguide .wp-block-column { background: var(--paper); padding: 20px; border-left: 2px solid var(--orange); } .bff-styleguide .wp-block-column h4 { margin-top: 0; } .bff-styleguide .wp-block-group { background: var(--paper); padding: 24px; margin: 24px auto; border: 1px solid var(--rule-light); } /* ---- Buttons ---- */ .bff-styleguide .wp-block-buttons { gap: 12px; margin: 24px auto; display: flex; flex-wrap: wrap; } .bff-styleguide .wp-block-button__link, .bff-styleguide .wp-element-button { background: var(--orange) !important; color: white !important; padding: 12px 24px !important; font-family: "Mulish", sans-serif !important; font-weight: 600 !important; font-size: 14px !important; letter-spacing: 0.02em !important; border-radius: 0 !important; text-decoration: none !important; display: inline-block !important; border: 0 !important; transition: background 0.2s !important; } .bff-styleguide .wp-block-button__link:hover { background: var(--orange-deep, #D9531A) !important; } .bff-styleguide .wp-block-button.is-style-outline .wp-block-button__link { background: transparent !important; border: 2px solid var(--navy) !important; color: var(--navy) !important; padding: 10px 22px !important; } .bff-styleguide .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--navy) !important; color: var(--cream) !important; } /* ---- Separator ---- */ .bff-styleguide .wp-block-separator { border: 0; border-top: 1px solid var(--rule); margin: 40px auto; max-width: 1192px; } .bff-styleguide .wp-block-separator.is-style-wide { border-top-width: 2px; border-color: var(--orange); } .bff-styleguide .wp-block-separator.is-style-dots { border: 0; background: none; text-align: center; max-width: 200px; } .bff-styleguide .wp-block-separator.is-style-dots::before { content: "···"; font-size: 28px; letter-spacing: 12px; color: var(--orange); line-height: 1; } /* ---- Spacer (visible on styleguide as a dashed marker) ---- */ .bff-styleguide .wp-block-spacer { background: repeating-linear-gradient( 45deg, rgba(242, 107, 31, 0.08) 0, rgba(242, 107, 31, 0.08) 8px, transparent 8px, transparent 16px ); border-top: 1px dashed var(--rule); border-bottom: 1px dashed var(--rule); } /* ---- Code + Preformatted + Verse ---- */ .bff-styleguide .wp-block-code, .bff-styleguide .wp-block-preformatted { background: #0A2547; color: #F4EFE6; padding: 20px 24px; font-family: "JetBrains Mono", monospace; font-size: 13px; line-height: 1.55; overflow-x: auto; margin: 24px auto; } .bff-styleguide .wp-block-verse { background: var(--paper); border-left: 3px solid var(--navy); padding: 24px 28px; font-family: "Geist", Georgia, serif; font-size: 17px; line-height: 1.7; color: var(--navy); margin: 24px auto; } /* ---- Table ---- */ .bff-styleguide .wp-block-table { margin: 24px auto; } .bff-styleguide .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 14px; } .bff-styleguide .wp-block-table thead th { background: var(--navy); color: var(--cream); padding: 14px 16px; text-align: left; font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; } .bff-styleguide .wp-block-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--rule-light); color: var(--ink-2); } .bff-styleguide .wp-block-table tbody tr:hover { background: var(--paper); } /* ---- File ---- */ .bff-styleguide .wp-block-file { display: flex; width: fit-content; max-width: calc(100% - 64px); margin: 16px auto; align-items: center; gap: 16px; padding: 16px 20px; background: var(--paper); border-left: 3px solid var(--orange); margin: 16px auto; } .bff-styleguide .wp-block-file a:not(.wp-block-file__button) { color: var(--navy); font-weight: 600; text-decoration: none; } .bff-styleguide .wp-block-file__button { background: var(--navy); color: var(--cream); padding: 8px 14px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border-radius: 0; } /* ---- Media & Text ---- */ .bff-styleguide .wp-block-media-text { background: var(--paper); margin: 24px auto; max-width: 1192px; } .bff-styleguide .wp-block-media-text__content { padding: 24px 32px; } .bff-styleguide .wp-block-media-text h3 { margin-top: 0; } /* ---- Embed (YouTube etc) ---- */ .bff-styleguide .wp-block-embed { margin: 24px auto; } .bff-styleguide .wp-block-embed__wrapper { aspect-ratio: 16 / 9; background: var(--paper); display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-family: "JetBrains Mono", monospace; font-size: 12px; } /* ---- Latest Posts + Page List + Search ---- */ .bff-styleguide .wp-block-latest-posts { list-style: none; padding-left: 0 !important; margin: 24px auto; } .bff-styleguide .wp-block-latest-posts li { padding: 14px 0; border-bottom: 1px solid var(--rule-light); } .bff-styleguide .wp-block-latest-posts li a { color: var(--navy); font-weight: 600; font-size: 16px; text-decoration: none; } .bff-styleguide .wp-block-latest-posts li a:hover { color: var(--orange); } .bff-styleguide .wp-block-latest-posts__post-date { display: block; font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--orange); margin-top: 4px; letter-spacing: 0.08em; } .bff-styleguide .wp-block-page-list, .bff-styleguide .wp-block-categories, .bff-styleguide .wp-block-archives { list-style: none; margin: 24px auto; } .bff-styleguide .wp-block-page-list ul, .bff-styleguide .wp-block-categories ul, .bff-styleguide .wp-block-archives ul { list-style: disc; padding-left: 24px; margin: 4px 0 4px 0; } .bff-styleguide .wp-block-page-list li a, .bff-styleguide .wp-block-categories li a, .bff-styleguide .wp-block-archives li a { display: inline-block; padding: 6px 0; color: var(--navy); text-decoration: none; font-weight: 500; } .bff-styleguide .wp-block-page-list li a:hover, .bff-styleguide .wp-block-categories li a:hover { color: var(--orange); } .bff-styleguide .wp-block-search { margin: 24px auto; } .bff-styleguide .wp-block-search__inside-wrapper { display: flex; gap: 8px; border: 1px solid var(--rule); background: white; padding: 6px; } .bff-styleguide .wp-block-search__input { flex: 1; border: 0; padding: 10px 12px; font-size: 15px; background: transparent; } .bff-styleguide .wp-block-search__input:focus { outline: none; } .bff-styleguide .wp-block-search__button { background: var(--orange); color: white; padding: 10px 20px; border: 0; font-weight: 600; cursor: pointer; } /* ---- Tag Cloud ---- */ .bff-styleguide .wp-block-tag-cloud { margin: 16px auto; display: flex; flex-wrap: wrap; gap: 8px; } .bff-styleguide .wp-block-tag-cloud a { display: inline-block; padding: 6px 12px; background: var(--paper); border: 1px solid var(--rule); color: var(--navy); text-decoration: none; font-size: 13px !important; } .bff-styleguide .wp-block-tag-cloud a:hover { background: var(--orange); color: white; border-color: var(--orange); } /* ---- Calendar ---- */ .bff-styleguide .wp-block-calendar { margin: 24px auto; } .bff-styleguide .wp-block-calendar table { width: 100%; border-collapse: collapse; } .bff-styleguide .wp-block-calendar caption { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.1em; color: var(--orange); padding: 8px 0; } .bff-styleguide .wp-block-calendar th, .bff-styleguide .wp-block-calendar td { padding: 8px; text-align: center; border: 1px solid var(--rule-light); font-size: 13px; } .bff-styleguide .wp-block-calendar th { background: var(--paper); font-weight: 700; color: var(--navy); } /* ---- Social Links ---- */ .bff-styleguide .wp-block-social-links { margin: 16px auto; gap: 10px; display: flex; flex-wrap: wrap; padding-left: 32px; } .bff-styleguide .wp-block-social-link { background: var(--navy); border-radius: 50%; } /* ---- Custom HTML — visual marker ---- */ .bff-styleguide .wp-block-html { margin: 16px auto; } /* ---------- Style Guide page section headers ----------- */ .styleguide-title, .styleguide-section, .styleguide-divider, .styleguide-core-section, .page .styleguide-title + .wp-block-paragraph, .page .wp-block-paragraph + .styleguide-section { max-width: 1192px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; box-sizing: border-box; } .styleguide-divider { font-size: clamp(28px, 3vw, 40px); color: var(--orange) !important; margin-top: 96px; margin-bottom: 32px; padding-top: 32px; padding-bottom: 32px; border-top: 3px solid var(--orange); border-bottom: 3px solid var(--orange); text-align: center; letter-spacing: -0.01em; font-family: "Geist", Georgia, serif; } .styleguide-core-section { font-size: 18px; margin-top: 56px; margin-bottom: 16px; padding-top: 12px; padding-bottom: 12px; border-top: 1px dashed var(--rule); color: var(--ink-2); font-family: "Geist", Georgia, serif; } .styleguide-core-section .mono { font-size: 11px; letter-spacing: 0.18em; color: var(--orange); margin-right: 8px; } .styleguide-title { font-size: clamp(48px, 5vw, 72px); line-height: 1; padding-top: 96px; padding-bottom: 16px; letter-spacing: -0.02em; color: var(--navy); } .styleguide-section { font-size: 22px; line-height: 1.3; margin: 72px auto 24px; padding-top: 16px; padding-bottom: 16px; border-top: 1px solid var(--orange); color: var(--navy); display: flex; gap: 16px; align-items: baseline; } .styleguide-section .mono { font-size: 12px; letter-spacing: 0.2em; color: var(--orange); } /* Intro paragraph after the title */ body.page .styleguide-title + p { max-width: 1192px; margin: 0 auto 24px; padding: 0 32px; color: var(--ink-2); font-size: 17px; line-height: 1.55; } /* ---------- Floating CTA (Zalo / phone) — bottom-right ----------- */ .floating-cta { position: fixed; right: 24px; bottom: 24px; width: 56px; height: 56px; border-radius: 50%; background: var(--orange); color: white; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(242, 107, 31, 0.35); z-index: 40; transition: transform 0.2s, box-shadow 0.2s; } .floating-cta:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 12px 32px rgba(242, 107, 31, 0.45); } .floating-cta-ring { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--orange); opacity: 0; animation: bff-floating-pulse 2.4s ease-out infinite; } .floating-cta-bubble { display: inline-flex; width: 100%; height: 100%; align-items: center; justify-content: center; } .floating-cta svg { stroke: currentColor; } @keyframes bff-floating-pulse { 0% { opacity: 0.7; transform: scale(0.95); } 100% { opacity: 0; transform: scale(1.4); } } @media (max-width: 700px) { .floating-cta { right: 16px; bottom: 16px; width: 52px; height: 52px; } } /* ---------- Hero slider — bridge .is-active to .active for js compat ----- */ .hero-slide.is-active { opacity: 1; z-index: 1; } .hero-slide:not(.is-active):not(.active) { opacity: 0; } .slide-dot.is-active .slide-bar-fill { width: 100%; } .slide-dot.is-active .slide-num { color: var(--orange); } .slide-dot.is-active .slide-label { color: var(--cream); opacity: 1; } /* ---------- Generic grids ---------- */ .projects-grid, .news-grid, .article-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; } @media (max-width: 900px) { .projects-grid, .news-grid, .article-related-grid { grid-template-columns: 1fr 1fr; gap: 24px; } } @media (max-width: 600px) { .projects-grid, .news-grid, .article-related-grid { grid-template-columns: 1fr; gap: 20px; } } /* ---------- Project card ---------- */ .project-card, .news-card, .article-related-card, .search-result { display: flex; flex-direction: column; background: white; border: 1px solid var(--rule-light); text-decoration: none; color: inherit; transition: border-color 0.2s, transform 0.2s; } .project-card:hover, .news-card:hover, .article-related-card:hover, .search-result:hover { border-color: var(--navy); transform: translateY(-2px); } .project-card-thumb, .news-card-thumb, .article-related-thumb { width: 100%; aspect-ratio: 16 / 10; background-size: cover; background-position: center; position: relative; } .news-card-thumb .tag, .article-related-thumb .tag { position: absolute; top: 16px; left: 16px; background: var(--orange); color: white; font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; padding: 6px 10px; } .project-card-body, .news-card-body, .article-related-card, .search-result-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .article-related-card { padding: 0; } .article-related-card > * { padding-left: 24px; padding-right: 24px; } .article-related-thumb { padding: 0; } .article-related-meta, .article-related-card h3 { padding-top: 16px; } .article-related-link { padding-bottom: 24px; padding-top: 12px; } .project-card-id, .news-card-meta, .article-related-meta, .search-result-tag { font-size: 11px; letter-spacing: 0.1em; color: var(--ink-3); text-transform: uppercase; } .project-card h3, .news-card h3, .article-related-card h3, .search-result h3 { font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; color: var(--navy); margin: 0; } .project-card p, .news-card p, .search-result p { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; } .project-card-link, .news-card-link, .article-related-link, .search-result-link { margin-top: auto; font-size: 11px; letter-spacing: 0.12em; color: var(--orange); display: inline-flex; align-items: center; gap: 8px; } /* ---------- Search ---------- */ .search-result { flex-direction: row; align-items: stretch; margin-bottom: 16px; } .search-result-thumb { width: 240px; min-height: 160px; background-size: cover; background-position: center; flex-shrink: 0; } @media (max-width: 700px) { .search-result { flex-direction: column; } .search-result-thumb { width: 100%; aspect-ratio: 16/10; } } /* ---------- 404 ---------- */ .error-404 { padding: 96px 0; } .e404-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; } @media (max-width: 900px) { .e404-grid { grid-template-columns: 1fr; gap: 32px; } } .e404-num { font-size: clamp(180px, 22vw, 280px); line-height: 0.85; color: var(--orange); letter-spacing: -0.05em; } .e404-tag { font-size: 11px; letter-spacing: 0.18em; color: var(--ink-3); } .e404-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; } /* ---------- Pagination ---------- */ .pagination .nav-links { display: flex; gap: 12px; align-items: center; font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.08em; } .pagination a, .pagination span { padding: 8px 12px; border: 1px solid var(--rule); color: var(--navy); text-decoration: none; } .pagination .current { background: var(--navy); color: var(--cream); border-color: var(--navy); } /* ---------- Mute color helper ---------- */ .mute, .article-list .mute { color: var(--ink-3); opacity: 0.5; } /* ---------- Article hero figure ---------- */ .article-hero { margin: 40px -40px; } .article-hero-img { width: 100%; aspect-ratio: 16 / 9; background-size: cover; background-position: center; } .article-hero figcaption { display: flex; gap: 16px; padding: 12px 16px; font-size: 13px; color: var(--ink-2); border-top: 1px solid var(--rule-light); } .article-hero figcaption .mono { color: var(--orange); flex-shrink: 0; } @media (max-width: 700px) { .article-hero { margin: 32px 0; } } /* ---------- Article callout ---------- */ .article-callout { background: var(--navy); color: var(--cream); padding: 32px; margin: 40px 0; } .article-callout-head { font-size: 11px; letter-spacing: 0.18em; opacity: 0.6; margin-bottom: 20px; } .article-callout-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } @media (max-width: 700px) { .article-callout-grid { grid-template-columns: repeat(2, 1fr); } } .article-callout-num { font-size: 44px; line-height: 1; letter-spacing: -0.02em; } .article-callout-num .unit { font-size: 14px; margin-left: 6px; font-family: "JetBrains Mono", monospace; opacity: 0.7; letter-spacing: 0.06em; } .article-callout-lbl { font-size: 13px; margin-top: 8px; color: rgba(244,239,230,0.7); } /* ---------- Article pull quote — only used inside single news article body. styles.css already provides .article-pull p { color: var(--cream) } for standalone usage on navy bg (BFF custom pull-quote block). Scope these overrides to .page-document-body so they apply ONLY in the news article context (light cream bg), not the standalone Pull Quote block (navy bg). */ .page-document-body .article-pull { margin: 48px 0; padding: 32px 0; border-top: 1px solid var(--orange); border-bottom: 1px solid var(--rule-light); position: relative; } .page-document-body .article-pull-mark { position: absolute; top: 16px; left: -8px; font-family: Georgia, serif; font-size: 64px; color: var(--orange); line-height: 1; opacity: 0.4; } .page-document-body .article-pull p { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.3; color: var(--navy); letter-spacing: -0.01em; padding-left: 32px; margin: 0; } .page-document-body .article-pull-by { font-size: 11px; letter-spacing: 0.15em; margin-top: 16px; padding-left: 32px; color: var(--ink-3); } /* ---------- Universal CF7 styling — match BFF look regardless of which form ---------- Default CF7 markup uses

+

row is treated as a field */ .wpcf7-form > p { margin: 0; display: flex; flex-direction: column; gap: 6px; } /* Labels (both