/* ============================================================================ BKB DESIGN SYSTEM — premium corporate theme for the BOF Korea public site ---------------------------------------------------------------------------- Loaded LAST in _Host.cshtml so it overrides the legacy template styling. Replaces dark-pro.css. Affects ONLY the public template. Design language (CSRM-inspired, not copied): · Light, spacious, enterprise look: white + light-gray content bands, near-black "impact" bands (hero, banners, ongoing-projects, footer). · Brand crimson (#9C001A) as the single primary; deep/ bright variants only for hovers and gradients. On dark bands the accent switches to --bkb-band-accent, which is the same hue lightened for contrast. · One componentized system: buttons, cards, banners, forms, chips, breadcrumbs, accordions, pagination all share the same tokens. Sections 0 tokens 5 section headers 10 forms 1 base/typography 6 home sections 11 chips/pagination/tables 2 buttons 7 cards 12 accordion + BD map 3 header/nav 8 page banner 13 footer 4 hero 9 clients strip 14 motion (reveal/progress) ========================================================================== */ :root { /* Brand — #9C001A is the single primary; the others are hover/gradient only */ --bkb-primary: #9C001A; --bkb-primary-strong: #B5001F; --bkb-primary-deep: #6E0012; --bkb-primary-soft: rgba(156, 0, 26, 0.08); --bkb-primary-ring: rgba(156, 0, 26, 0.30); --bkb-brand-rgb: 156, 0, 26; /* for rgba() shadows / rules */ --bkb-map-marker: #ff2e2e; --bkb-mv-vision: linear-gradient(135deg, #B5001F 0%, #9C001A 100%); --bkb-mv-mission: linear-gradient(135deg, #9C001A 0%, #6E0012 100%); --bkb-accent-text: #9C001A; /* accent on the page canvas */ /* Secondary accent — champagne gold. Decoration only (divider bars, stat numbers, small icons); never body copy. --bkb-gold-text is the darker step that still reads at 4.5:1 when gold must carry text. */ --bkb-gold: #C9A46A; --bkb-gold-text: #8A6530; /* Text — deep slate rather than black, so type sits softly on white and ash; every step still clears 4.5:1 on #FFFFFF and on --bkb-gray-50 */ --bkb-ink: #1F2533; /* headings */ --bkb-ink-soft: #434A59; /* body copy */ --bkb-ink-muted: #586072; /* secondary copy */ --bkb-ink-dim: #646C7D; /* captions / meta */ /* Surfaces — white canvas, cool light-ash alternate band */ --bkb-bg: #FFFFFF; /* page */ --bkb-gray-50: #F3F4F7; /* alternate band (light ash) */ --bkb-gray-100: #E7E9EE; /* inset elements */ --bkb-card: #FFFFFF; /* cards / panels */ --bkb-line: rgba(31, 37, 51, 0.09); --bkb-line-strong: rgba(31, 37, 51, 0.16); /* ── FEATURE BANDS ─────────────────────────────────────────────────── Every `.band-dark` section and the footer are painted from these tokens ALONE — never from the surface tokens above and never from a literal colour. That indirection is what lets a theme re-point the bands (see the [data-theme] blocks below). `.band-dark` therefore means "feature band", not literally "dark". Defaults below = the Standard theme: no black anywhere. Feature bands are a deeper light ash than the alternate band, with white cards lifting off them and the true brand crimson as the accent. */ --bkb-band-bg: #E9ECF1; /* band surface (ash) */ --bkb-band-deep: #DDE1E8; /* footer gradient foot */ --bkb-band-2: #F5F6F9; /* nested panel */ --bkb-band-card: #FFFFFF; /* cards / accordion headers */ --bkb-band-card-hi: #FFFFFF; /* card hover */ --bkb-band-line: rgba(31, 37, 51, 0.10); --bkb-band-heading: #1F2533; /* headings on a band */ --bkb-band-text: #434A59; /* body copy on a band */ --bkb-band-muted: #586072; /* secondary copy on a band */ --bkb-band-accent: #9C001A; /* brand crimson reads on ash */ --bkb-band-gold: #8A6530; /* gold detail on a band */ /* Translucent raises used for chips/controls sitting ON a band. They must flip polarity per theme: lightening a light band does nothing. */ --bkb-band-overlay: rgba(31, 37, 51, 0.04); --bkb-band-overlay-2: rgba(31, 37, 51, 0.08); --bkb-band-stroke: #C3C9D3; /* map divisions / hard strokes */ --bkb-band-grid: rgba(31, 37, 51, 0.04); /* blueprint texture */ --bkb-band-glow: rgba(156, 0, 26, 0.06); /* crimson wash, top */ --bkb-band-glow-2: rgba(156, 0, 26, 0.04); /* crimson wash, foot */ --bkb-soft-glow: rgba(156, 0, 26, 0.065); /* faint wash on page sections */ --bkb-map-fill: #FFFFFF; /* BD map divisions on the band */ /* CTA band overlay over the admin photo, and its hairline texture */ --bkb-cta-overlay: linear-gradient(120deg, rgba(110, 0, 18, 0.95) 0%, rgba(156, 0, 26, 0.88) 100%); --bkb-cta-texture: rgba(255, 255, 255, 0.04); /* Photo-tile scrims (featured projects) */ --bkb-tile-scrim: linear-gradient(to top, rgba(8, 9, 11, 0.92) 0%, rgba(8, 9, 11, 0.45) 42%, rgba(8, 9, 11, 0) 72%); --bkb-tile-scrim-hover: linear-gradient(to top, rgba(40, 0, 8, 0.94) 0%, rgba(8, 9, 11, 0.70) 55%, rgba(8, 9, 11, 0.35) 100%); --bkb-map-stroke: #B4BCC9; /* ── HEADER ───────────────────────────────────────────────────────── Frosted bar floating over the hero. Standard = white glass, so the logo keeps its original colours with no plate behind it. */ --bkb-header-bg: rgba(255, 255, 255, 0.86); --bkb-header-solid: rgba(255, 255, 255, 0.97); --bkb-header-text: #2A3142; --bkb-header-border: rgba(31, 37, 51, 0.08); --bkb-logo-plate: transparent; /* ── MEDIA SURFACES ────────────────────────────────────────────────── The video hero and the page banner sit UNDER imagery and carry their own scrim, so their text is always light. The scrim is tinted with the brand (wine → slate) rather than black. */ --bkb-media-bg: #2B2230; --bkb-media-scrim-a: rgba(58, 12, 26, 0.90); --bkb-media-scrim-b: rgba(43, 40, 54, 0.66); --bkb-media-scrim-c: rgba(43, 40, 54, 0.30); /* Inner-page banner: Standard keeps it light — an ash veil over the photo with slate text, crimson accents */ --bkb-banner-veil: linear-gradient(100deg, rgba(243, 244, 247, 0.97) 0%, rgba(243, 244, 247, 0.90) 48%, rgba(243, 244, 247, 0.62) 100%); --bkb-banner-bg: #EEF0F4; --bkb-banner-glow: rgba(156, 0, 26, 0.12); --bkb-banner-title: #1F2533; --bkb-banner-text: #4A5263; --bkb-banner-eyebrow: #9C001A; --bkb-banner-chip-bg: rgba(255, 255, 255, 0.75); --bkb-banner-chip-line: rgba(31, 37, 51, 0.10); --bkb-banner-crumb: #586072; --bkb-banner-crumb-active: #9C001A; /* Type — Montserrat carries headings/UI, Inter carries reading copy */ --bkb-font-head: 'Montserrat', sans-serif; --bkb-font-body: 'Inter', 'Montserrat', sans-serif; /* Rhythm — one vertical section spacing for the whole site */ --bkb-section-y: 96px; /* Effects — shadows are tinted ink, not pure black, so they read soft on white */ --bkb-radius: 16px; --bkb-radius-sm: 10px; --bkb-radius-pill: 999px; --bkb-shadow: 0 2px 4px rgba(17, 19, 24, 0.04), 0 22px 48px rgba(17, 19, 24, 0.10); --bkb-shadow-sm: 0 1px 2px rgba(17, 19, 24, 0.04), 0 8px 22px rgba(17, 19, 24, 0.07); --bkb-shadow-dark: 0 18px 44px rgba(0, 0, 0, 0.45); --bkb-shadow-brand: 0 10px 26px rgba(156, 0, 26, 0.28); --bkb-ease: 0.35s cubic-bezier(0.22, 1, 0.36, 1); --cnvs-themecolor: #9C001A !important; /* Must track --cnvs-themecolor: Canvas rules use rgba(var(--cnvs-themecolor-rgb), x); without this the value leaked in from the (removed) template demo CSS. */ --cnvs-themecolor-rgb: 156, 0, 26 !important; /* Template-compat vars formerly supplied by demos/seo + demos/coworking CSS. Poppins was never loaded — point them at the fonts that are. */ --cnvs-body-font: var(--bkb-font-body); --cnvs-primary-font: var(--bkb-font-head); --cnvs-primary-menu-font: var(--bkb-font-head); --cnvs-header-height: 70px; /* Bare

–

and body text that carry no BKB class fall through to the Canvas/Bootstrap variables, which are hardcoded near-black. Mapping them onto the ink scale keeps that markup readable in every theme instead of going invisible on a dark canvas. */ --cnvs-heading-color: var(--bkb-ink); --bs-heading-color: var(--bkb-ink); --bs-body-color: var(--bkb-ink-soft); } @media (max-width: 767px) { :root { --bkb-section-y: 64px; } } /* --------------------------------------------------------------------------- 0b. THEMES — selected in admin Settings, written by _Host.cshtml as . ("light" was retired and now renders as Standard; "signature" adds bkb-signature.css on top.) Each theme ONLY re-points tokens; no theme may add layout or component rules. If a theme needs a new rule, the component is under-tokenised — fix it there instead, or the themes will drift apart. `:root` above is the Standard theme, so [data-theme="standard"] needs no block and an unrecognised/missing value degrades to Standard. Two surfaces always carry a scrim with light text: the video hero and the page banner. Both sit over imagery, so they are media surfaces; themes only re-tint their scrim (--bkb-media-*). ------------------------------------------------------------------------- */ /* ── DARK ── neutral graphite surfaces; the ONLY red is the logo crimson #820017 (sampled from the artwork) — buttons, borders, icons, panels, the header rule and map lines all use it, with no lighter or darker steps. #820017 can't carry small text on graphite, so text accents (eyebrows, highlighted words, active crumbs) use the champagne gold. */ :root[data-theme="dark"] { /* The logo crimson replaces every brand step */ --bkb-primary: #820017; --bkb-primary-strong: #820017; --bkb-primary-deep: #820017; --bkb-brand-rgb: 130, 0, 23; --bkb-shadow-brand: 0 10px 26px rgba(130, 0, 23, 0.45); --bkb-map-marker: #820017; --bkb-cta-overlay: linear-gradient(120deg, rgba(130, 0, 23, 0.96) 0%, rgba(130, 0, 23, 0.90) 100%); --bkb-mv-vision: #820017; --bkb-mv-mission: #820017; /* Page canvas — graphite */ --bkb-bg: #161417; --bkb-gray-50: #1B191C; --bkb-gray-100: #252226; --bkb-card: #211F23; /* Hairlines and card borders in the brand crimson */ --bkb-line: rgba(130, 0, 23, 0.50); --bkb-line-strong: rgba(130, 0, 23, 0.80); --bkb-ink: #F6F3F5; --bkb-ink-soft: #CFC9CD; --bkb-ink-muted: #ABA4A9; --bkb-ink-dim: #979096; --bkb-accent-text: #E2C28A; --bkb-gold-text: #E2C28A; --bkb-primary-soft: rgba(130, 0, 23, 0.28); --bkb-primary-ring: #820017; /* Feature bands — a step lighter graphite, brand-crimson borders */ --bkb-band-bg: #1F1D21; --bkb-band-deep: #19171A; --bkb-band-2: #252327; --bkb-band-card: #29262B; --bkb-band-card-hi: #322F34; --bkb-band-line: rgba(130, 0, 23, 0.65); --bkb-band-heading: #FFFFFF; --bkb-band-text: #ECE8EB; --bkb-band-muted: #BDB6BB; --bkb-band-accent: #E2C28A; --bkb-band-gold: #E2C28A; --bkb-band-overlay: rgba(255, 255, 255, 0.05); --bkb-band-overlay-2: rgba(255, 255, 255, 0.10); --bkb-band-stroke: #820017; --bkb-band-grid: rgba(255, 255, 255, 0.022); --bkb-band-glow: transparent; --bkb-band-glow-2: transparent; --bkb-soft-glow: transparent; --bkb-map-fill: #2C292E; --bkb-map-stroke: #820017; /* Header: graphite glass with the crimson underline; the logo sits on a white plate so its original colours stay untouched */ --bkb-header-bg: rgba(22, 20, 23, 0.86); --bkb-header-solid: rgba(22, 20, 23, 0.97); --bkb-header-text: #F2EEF1; --bkb-header-border: rgba(130, 0, 23, 0.60); --bkb-logo-plate: #FFFFFF; --bkb-media-bg: #161417; --bkb-media-scrim-a: rgba(18, 16, 19, 0.88); --bkb-media-scrim-b: rgba(18, 16, 19, 0.60); --bkb-media-scrim-c: rgba(18, 16, 19, 0.28); /* Inner-page banner: graphite surface (no stock photo) */ --bkb-banner-bg: #1F1D21; --bkb-banner-veil: linear-gradient(100deg, rgba(31, 29, 33, 0.92) 0%, rgba(31, 29, 33, 0.70) 50%, rgba(31, 29, 33, 0.30) 100%); --bkb-banner-glow: transparent; --bkb-banner-title: #FFFFFF; --bkb-banner-text: rgba(255, 255, 255, 0.80); --bkb-banner-eyebrow: #E2C28A; --bkb-banner-chip-bg: rgba(255, 255, 255, 0.06); --bkb-banner-chip-line: rgba(130, 0, 23, 0.70); --bkb-banner-crumb: rgba(255, 255, 255, 0.76); --bkb-banner-crumb-active: #E2C28A; /* Photo-tile hover scrim (featured projects) — neutral, never tinted */ --bkb-tile-scrim: linear-gradient(to top, rgba(14, 12, 15, 0.92) 0%, rgba(14, 12, 15, 0.45) 42%, rgba(14, 12, 15, 0) 72%); --bkb-tile-scrim-hover: linear-gradient(to top, rgba(14, 12, 15, 0.95) 0%, rgba(14, 12, 15, 0.72) 55%, rgba(14, 12, 15, 0.35) 100%); /* Shadows need real depth on a dark canvas; ink-tinted ones vanish */ --bkb-shadow: 0 2px 4px rgba(6, 4, 6, 0.32), 0 22px 48px rgba(6, 4, 6, 0.50); --bkb-shadow-sm: 0 1px 2px rgba(6, 4, 6, 0.30), 0 8px 22px rgba(6, 4, 6, 0.36); } /* Standard keeps the light scrollbar; dark theme needs its own */ :root[data-theme="dark"] * { scrollbar-color: #4A3F48 transparent; } :root[data-theme="dark"] *::-webkit-scrollbar-thumb { background: #4A3F48; } :root[data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: #820017; } /* Header/menu sizing formerly supplied by demos/seo + demos/coworking CSS */ #header { --cnvs-header-floating-top-offset: 20px; --cnvs-primary-menu-font-size: 15px; } .menu-container > .menu-item > .menu-link { font-size: 15px; padding-left: 20px; padding-right: 20px; font-weight: 400; text-transform: capitalize; letter-spacing: 0; } .is-expanded-menu #header.floating-header + .include-header { margin-top: -97px; } /* --------------------------------------------------------------------------- 1. BASE — light page, dark bands opt-in via .band-dark ------------------------------------------------------------------------- */ body { background-color: var(--bkb-bg) !important; color: var(--bkb-ink-soft); /* !important: custom-style.css pins body to Montserrat with !important */ font-family: var(--bkb-font-body) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .page-pro { background-color: var(--bkb-bg); } /* Alternate band — warm stone (Standard) / graphite (Dark) step off the page, with a soft crimson glow so sections flow into each other instead of striping */ .band-gray { background: radial-gradient(1100px 420px at 85% -10%, var(--bkb-soft-glow), transparent 60%), var(--bkb-gray-50); border-top: 1px solid var(--bkb-line); border-bottom: 1px solid var(--bkb-line); } /* Impact band — punctuates the page. Layers, top to bottom: crimson glow, a vignette that fades the blueprint grid out toward the edges, the grid itself, then the band tone. All theme-driven through --bkb-band-*. */ .band-dark { background: radial-gradient(1100px 460px at 12% -10%, var(--bkb-band-glow), transparent 60%), radial-gradient(900px 420px at 100% 110%, var(--bkb-band-glow-2), transparent 60%), radial-gradient(ellipse at 50% 40%, transparent 30%, var(--bkb-band-bg) 78%), linear-gradient(var(--bkb-band-grid) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(90deg, var(--bkb-band-grid) 1px, transparent 1px) 0 0 / 64px 64px, var(--bkb-band-bg); color: var(--bkb-band-text); border-top: 1px solid var(--bkb-band-line); border-bottom: 1px solid var(--bkb-band-line); } /* The crimson accent needs a lighter tint to stay legible on the dark bands */ .band-dark .text-maroon, .band-dark .section-eyebrow, .band-dark .heading-block > span.section-eyebrow, #footer .text-maroon { color: var(--bkb-band-accent) !important; } /* Section headings take the band's heading colour — no inline colours needed. Must out-specify `.heading-block h2.section-title` in section 5. */ .band-dark .section-title, .band-dark .heading-block h2.section-title { color: var(--bkb-band-heading); } .band-dark + .band-dark { border-top: 0; } /* Legacy "dark text" utilities — mapped onto the ink scale so inner pages (Services, Contact, timeline, blog cards) share one hierarchy */ .black-neutral-900, .black-neutral-800, .text-dark { color: var(--bkb-ink) !important; } .black-neutral-700, .black-neutral-600 { color: var(--bkb-ink-soft) !important; } .black-neutral-500, .black-neutral-400 { color: var(--bkb-ink-muted) !important; } /* …but on band-toned surfaces (feature bands, the Contact form card) the same utilities must follow the band, or they go dark-on-dark */ .band-dark .black-neutral-900, .band-dark .black-neutral-800, .band-dark .text-dark, .contact-card .black-neutral-900, .contact-card .black-neutral-800, .contact-card .text-dark { color: var(--bkb-band-heading) !important; } .contact-card .black-neutral-700, .contact-card .black-neutral-600, .contact-card .black-neutral-500 { color: var(--bkb-band-muted) !important; } /* Typography hierarchy — light context. Headings: Montserrat, heavy and tight. Reading copy: Inter. */ .heading-64-SB-76, .heading-64-SB-76-hero, .heading-56-SB-68, .heading-48-SB-58, .title-40-SB-52, .display-72-SB-86, .title-28-SB-36, .title-24-SB-32 { font-family: var(--bkb-font-head); font-weight: 700; color: var(--bkb-ink); letter-spacing: -0.5px; } .heading-64-SB-76, .heading-56-SB-68, .display-72-SB-86 { font-weight: 700; letter-spacing: -0.6px; } h1, h2, h3, h4, h5, h6 { font-family: var(--bkb-font-head); } p, li, .body-20-R-28, .body-16-R-24, .body-14-R-20, .body-20-M-28, .body-20-R-24, .body-16-SB-24, .body-14-M-20 { font-family: var(--bkb-font-body); } .body-20-R-28, .body-16-R-24, .body-14-R-20, .body-20-M-28 { color: var(--bkb-ink-muted); } /* Inter sets larger than Montserrat — pull the long-form sizes in a touch */ .body-20-R-28, .body-20-M-28 { font-size: 18px; line-height: 1.7; } /* Inline highlight used in headings: "Featured Projects". !important: Canvas paints every `h2 > span` in the fixed theme colour, which out-specifies these and is unreadable on dark bands. */ .hl { color: var(--bkb-accent-text) !important; } .band-dark .hl, #footer .hl { color: var(--bkb-band-accent) !important; } /* …and re-pointed to the band's own colours inside a feature band. `.text-white` is included deliberately: legacy markup hardcodes it inside bands, and in a light-band theme it must NOT stay white. */ .band-dark .heading-64-SB-76, .band-dark .heading-56-SB-68, .band-dark .heading-48-SB-58, .band-dark .title-40-SB-52, .band-dark .display-72-SB-86, .band-dark .title-28-SB-36, .band-dark .title-24-SB-32, .band-dark .text-white, #footer .text-white { /* !important is required: Bootstrap's own .text-white utility carries it, so without this the legacy markup would stay white on a light band. */ color: var(--bkb-band-heading) !important; } .band-dark .body-20-R-28, .band-dark .body-16-R-24, .band-dark .body-14-R-20, .band-dark .body-20-M-28, .band-dark .black-neutral-50, .band-dark .black-neutral-100, .band-dark .black-neutral-200 { color: var(--bkb-band-muted); } /* The footer is a dark surface too, but it is #footer rather than .band-dark. Body copy without an explicit .text-white (tagline, copyright line) would otherwise keep the light-canvas ink and drop to ~3:1 contrast. */ #footer .body-20-R-28, #footer .body-16-R-24, #footer .body-14-R-20, #footer .body-20-M-28, #footer .black-neutral-50, #footer .black-neutral-100, #footer .black-neutral-200, #footer .black-neutral-400, #footer .black-neutral-500 { color: var(--bkb-band-muted) !important; } /* Legacy dark-text utilities keep working in light context. `.band-dark` is excluded: several bands are
, and an ID selector would otherwise outrank .band-dark and strip its light-on-dark text colour. */ #content:not(.band-dark), .content-wrap:not(.band-dark), section:not(.band-dark) { color: inherit; } /* Legacy white panels stay white; legacy charcoal wrappers become light */ .bg-color, .bg-color #header-wrap, .aboutus-up-bg-color { background-color: transparent !important; } /* Canvas template paints #content/.section white by default — make them transparent so the page canvas shows through. `.band-dark` is excluded for the same ID-specificity reason as above: without it, a
loses its dark background. */ #content:not(.band-dark), .content-wrap:not(.band-dark), .section:not(.band-dark) { background-color: transparent; } /* …and when the band IS the #content element, it must still out-specify the template's own `#content { background: #fff }`. */ #content.band-dark, .content-wrap.band-dark, .section.band-dark { background-color: var(--bkb-band-bg); } /* One vertical rhythm for every section (was a mix of 50–120px): when a SectionHeader opens the section, the header owns the top spacing. */ .page-pro > section > .content-wrap { padding-bottom: var(--bkb-section-y); } .page-pro > section > .content-wrap:has(> .container:first-child > .section-head) { padding-top: 0; } .text-maroon { color: var(--bkb-accent-text) !important; } a { transition: color var(--bkb-ease); } hr, .line, .border-bottom { border-color: var(--bkb-line) !important; } .band-dark hr, .band-dark .line { border-color: var(--bkb-band-line) !important; } ::selection { background: var(--bkb-primary); color: #fff; } * { scrollbar-width: thin; scrollbar-color: #C3C6CD transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: #C3C6CD; border-radius: 8px; } *::-webkit-scrollbar-thumb:hover { background: #A8ACB5; } /* --------------------------------------------------------------------------- 2. BUTTONS — one system: .btn-pro (+ legacy classes mapped onto it) ------------------------------------------------------------------------- */ /* Pill, uppercase, tracked. The fill sweeps in from the left on hover (::before) and the trailing icon sits in its own circle that nudges forward. Every variant only sets colours through the --btn-* locals. */ .btn-pro { --btn-fg: #fff; --btn-bg: var(--bkb-primary); --btn-sweep: var(--bkb-primary-deep); --btn-border: transparent; --btn-fg-hover: #fff; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 28px; border-radius: var(--bkb-radius-pill); font-family: var(--bkb-font-head); font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; color: var(--btn-fg) !important; background: var(--btn-bg); border: 1.5px solid var(--btn-border); transition: transform var(--bkb-ease), box-shadow var(--bkb-ease), border-color var(--bkb-ease), color var(--bkb-ease); } .btn-pro::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-sweep); transform: scaleX(0); transform-origin: left center; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .btn-pro:hover { color: var(--btn-fg-hover) !important; transform: translateY(-2px); } .btn-pro:hover::before { transform: scaleX(1); } /* Trailing icon → small circle */ .btn-pro i { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: -12px; border-radius: 50%; font-size: 11px; background: rgba(255, 255, 255, 0.16); transition: transform var(--bkb-ease), background var(--bkb-ease); } .btn-pro:hover i { transform: translateX(4px); background: rgba(255, 255, 255, 0.26); } .btn-pro-primary { box-shadow: var(--bkb-shadow-brand); } .btn-pro-primary:hover { box-shadow: 0 14px 32px rgba(var(--bkb-brand-rgb), 0.36); } /* Secondary — ink pill on the page canvas (inverts in the dark theme because --bkb-ink does) */ .btn-pro-dark { --btn-fg: var(--bkb-bg); --btn-bg: var(--bkb-ink); --btn-sweep: var(--bkb-primary); --btn-fg-hover: #fff; } .btn-pro-dark i { background: color-mix(in srgb, var(--bkb-bg) 18%, transparent); } /* Ghost on dark imagery (hero, banners, promo) */ .btn-pro-ghost { --btn-bg: rgba(255, 255, 255, 0.06); --btn-sweep: #fff; --btn-border: rgba(255, 255, 255, 0.45); --btn-fg-hover: #1F2533; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .btn-pro-ghost:hover { border-color: #fff; } .btn-pro-ghost:hover i { background: rgba(17, 19, 24, 0.10); } /* Outline on light surfaces */ .btn-pro-outline { --btn-fg: var(--bkb-accent-text); --btn-bg: transparent; --btn-sweep: var(--bkb-primary); --btn-border: var(--bkb-primary); } .btn-pro-outline i { background: var(--bkb-primary-soft); } /* Map the legacy buttons onto the same look so old markup upgrades free */ .commmon-red-btn, .commmon-red-btn-large, .commmon-red-btn-larger, .get-quote-btn { background-color: var(--bkb-primary) !important; background-image: none; color: #fff !important; border: 0 !important; border-radius: var(--bkb-radius-pill) !important; font-family: var(--bkb-font-head); font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; box-shadow: var(--bkb-shadow-brand); transition: transform var(--bkb-ease), box-shadow var(--bkb-ease), background-color var(--bkb-ease); /* Legacy rules pin fixed px widths sized for the old sentence-case label; let the uppercase pill size to its content instead */ display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; width: auto !important; max-width: none !important; min-width: 136px; height: auto !important; min-height: 46px !important; padding: 12px 26px !important; font-size: 13px !important; line-height: 1.2; white-space: nowrap; } .commmon-red-btn-large, .commmon-red-btn-larger { min-height: 54px !important; padding: 16px 32px !important; } .commmon-red-btn:hover, .commmon-red-btn-large:hover, .commmon-red-btn-larger:hover, .get-quote-btn:hover { background-color: var(--bkb-primary-deep) !important; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(var(--bkb-brand-rgb), 0.36); } @media (max-width: 575px) { .hero-actions .btn-pro, .sp-actions .btn-pro { width: 100%; } } .btn-pro:focus-visible, .sp-thumb:focus-visible, .menu-link:focus-visible { outline: 2px solid var(--bkb-primary); outline-offset: 3px; } /* --------------------------------------------------------------------------- 3. HEADER / NAV — frosted bar (theme-tinted), solidifies on scroll ------------------------------------------------------------------------- */ .header-row, .is-expanded-menu .sticky-header #header-wrap { background-color: var(--bkb-header-bg) !important; backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border: 1px solid var(--bkb-header-border); border-top: 0; border-radius: 0 0 18px 18px; box-shadow: inset 0 -2px 0 rgba(var(--bkb-brand-rgb), 0.55), 0 10px 30px rgba(20, 27, 43, 0.10); } /* When sticky, only the floating bar is painted — the full-width wrap behind it would otherwise show as a grey band either side on light pages */ .is-expanded-menu .sticky-header #header-wrap { background-color: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; box-shadow: none; } #header.header-scrolled .header-row { background-color: var(--bkb-header-solid) !important; box-shadow: inset 0 -2px 0 rgba(var(--bkb-brand-rgb), 0.65), 0 14px 34px rgba(20, 27, 43, 0.16); } .menu-link { color: var(--bkb-header-text) !important; font-family: var(--bkb-font-head) !important; font-weight: 500 !important; transition: color var(--bkb-ease); } .menu-link:hover .header-option { color: var(--bkb-accent-text); } .primary-menu .menu-link .header-option { position: relative; padding-bottom: 4px; } .primary-menu .menu-link .header-option::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--bkb-primary-strong); transition: width var(--bkb-ease); } .primary-menu .menu-link:hover .header-option::after { width: 100%; } .primary-menu .active-menu .header-option::after { display: none; } .active-menu .header-option { border-bottom: 3px solid var(--bkb-primary-strong); } #logo a .logo-default { background-color: transparent !important; } .call-us-btn { gap: 12px; padding: 6px 20px 6px 6px; border-radius: var(--bkb-radius-pill); background: var(--bkb-primary); font-family: var(--bkb-font-head); line-height: 1.25; box-shadow: 0 6px 18px rgba(var(--bkb-brand-rgb), 0.40); transition: transform var(--bkb-ease), background-color var(--bkb-ease), box-shadow var(--bkb-ease); } /* Phone glyph in its own white disc — reads as a call action at a glance */ .call-us-btn i { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--bkb-primary); font-size: 14px; } .call-us-text { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; opacity: 0.85; } .call-us-btn:hover { transform: translateY(-2px); background-color: var(--bkb-primary-deep); box-shadow: 0 10px 24px rgba(var(--bkb-brand-rgb), 0.5); } /* --------------------------------------------------------------------------- 4. HERO — cinematic dark band with video ------------------------------------------------------------------------- */ .hero-pro { /* Media surface, not a themed band — see --bkb-media-bg */ background-color: var(--bkb-media-bg); } /* Client logo strip — fixed, uniform logo cells. Any upload size is contained (shown in full, never cropped or stretched), so tall/wide logos can't break the carousel row. */ .clients-strip .mySwiper2 .swiper-slide { display: flex !important; align-items: center; justify-content: center; height: 110px; } .clients-strip .mySwiper2 .swiper-slide img { max-width: 80%; max-height: 70px; width: auto; height: auto; object-fit: contain; } /* Full-screen hero height. The hero's .slider-inner is absolutely positioned, so it contributes no height — the band's height comes entirely from the section itself. Pin it to the full viewport on every breakpoint (high specificity so it always wins) so the video band fills the screen and can never collapse, regardless of viewport, load timing or theme JS. */ #slider.hero-pro { /* A DEFINITE height (not just min-height) is required so the descendant percentage heights resolve — .slider-inner is height:100% and #video-mount is height:130%. With only min-height they computed as auto/content-height, so the video collapsed and the hero's dark background showed at the bottom. */ height: 100vh !important; min-height: 100vh !important; /* The body has no padding-top (see section 8: the fixed header floats over the hero), so the hero already starts at the very top. Canvas gives `.include-header` a negative margin-top on desktop, which pulled the hero ~100px up and left a white strip — with the next section showing — at the bottom of the screen. Pin it to 0 so the video fills the viewport. */ margin-top: 0 !important; } .hero-pro .hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to right, rgba(30, 14, 24, 0.46) 0%, rgba(30, 14, 24, 0.14) 55%, rgba(30, 14, 24, 0) 100%), linear-gradient(to top, rgba(30, 14, 24, 0.30) 0%, rgba(30, 14, 24, 0) 26%); } .hero-content { max-width: 820px; text-align: left; padding: 0 18px; will-change: opacity, transform; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 3.5px; text-transform: uppercase; color: #E3C48F; margin-bottom: 22px; } .hero-eyebrow-line { display: inline-block; width: 48px; height: 2px; background: linear-gradient(90deg, var(--bkb-primary-strong), #D9B77E); border-radius: 2px; } .hero-title { font-family: var(--bkb-font-head); font-size: clamp(38px, 6vw, 76px); font-weight: 800; line-height: 1.08; letter-spacing: -1.5px; color: #fff; margin: 0 0 20px; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25); } .hero-subtitle { font-family: var(--bkb-font-body); font-size: clamp(16px, 2vw, 21px); font-weight: 400; line-height: 1.6; color: rgba(255, 255, 255, 0.85); max-width: 620px; margin: 0 0 34px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; } @keyframes proFadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } .hero-content > * { animation: proFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; } .hero-content > *:nth-child(2) { animation-delay: 0.15s; } .hero-content > *:nth-child(3) { animation-delay: 0.30s; } .hero-content > *:nth-child(4) { animation-delay: 0.45s; } #video-mount { height: 130% !important; will-change: transform; } .hero-scroll-cue { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 2; width: 26px; height: 42px; border: 2px solid rgba(255, 255, 255, 0.45); border-radius: 14px; display: flex; justify-content: center; transition: border-color var(--bkb-ease); } .hero-scroll-cue:hover { border-color: #fff; } .hero-scroll-dot { width: 4px; height: 8px; margin-top: 7px; border-radius: 4px; background: #fff; animation: proScrollDot 1.8s ease-in-out infinite; } @keyframes proScrollDot { 0% { transform: translateY(0); opacity: 1; } 65% { transform: translateY(14px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } } @media (max-width: 767px) { .hero-scroll-cue { display: none; } .hero-content { padding-top: 40px; padding-bottom: 40px; } } /* --------------------------------------------------------------------------- 5. SECTION HEADERS (SectionHeader.razor) ------------------------------------------------------------------------- */ .section-head { padding: var(--bkb-section-y) 16px 44px; margin-bottom: 0 !important; } .section-title, h2.section-title, .heading-block h2.section-title { font-family: var(--bkb-font-head); font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; line-height: 1.18; letter-spacing: -0.6px; color: var(--bkb-ink); margin: 0; } .section-head-dark .section-title { color: #fff; } /* Two-tone rule under the title: crimson bar + short gold tail */ .section-title::after { content: ""; display: block; width: 72px; height: 4px; margin: 22px auto 0; background: linear-gradient(90deg, var(--bkb-primary) 0 70%, transparent 70% 76%, var(--bkb-gold) 76% 100%); border-radius: 2px; transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.35s; } /* custom-style.css turns .heading-block into a left-aligned flex column at ≤768px; keep centred section heads centred */ .heading-block.section-head.text-center { align-items: center !important; } .section-head-left { text-align: left !important; } .section-head-left .section-title::after, .section-head-left .section-lede { margin-left: 0; } /* The `.heading-block > .section-eyebrow` half out-specifies the template's `.heading-block > span:not(.before-heading)` rule, which would otherwise paint every eyebrow Canvas grey instead of brand crimson. */ .section-eyebrow, .heading-block > span.section-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--bkb-font-head); font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--bkb-accent-text); margin-bottom: 16px; } /* Small crimson diamond markers either side of a centred eyebrow */ .heading-block.text-center .section-eyebrow::before, .heading-block.text-center .section-eyebrow::after { content: ""; width: 6px; height: 6px; background: var(--bkb-gold); transform: rotate(45deg); } .section-head-dark .section-eyebrow { color: var(--bkb-band-accent); } /* The `.heading-block > span` half out-specifies the template's `.heading-block > span:not(.before-heading)`, same trap as .section-eyebrow. */ .section-lede, .heading-block > span.section-lede { display: block; max-width: 640px; margin: 20px auto 0; font-family: var(--bkb-font-body); font-size: 17px; line-height: 1.7; color: var(--bkb-ink-muted); } .section-head-dark .section-lede, .band-dark .section-lede, .band-dark .heading-block > span.section-lede { color: var(--bkb-band-muted); } /* Reveal: heading accent grows in */ body.js-reveal [data-reveal]:not(.is-revealed) .section-title::after, body.js-reveal [data-reveal]:not(.is-revealed) .heading-64-SB-76::after { width: 0; } /* --------------------------------------------------------------------------- 6. HOME SECTIONS — stats strip, team intro, special project, services ------------------------------------------------------------------------- */ /* Key-facts strip — light gray with crimson accents */ .stats-strip { background: radial-gradient(900px 320px at 12% 130%, var(--bkb-primary-soft), transparent 60%), var(--bkb-gray-50); border-top: 1px solid var(--bkb-line); border-bottom: 1px solid var(--bkb-line); padding: 46px 0; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .stat-item { text-align: center; padding: 6px 12px; } .stat-item + .stat-item { border-left: 1px solid var(--bkb-line); } .stat-number { font-family: 'Montserrat', sans-serif; font-size: clamp(34px, 4vw, 52px); font-weight: 700; line-height: 1.15; color: var(--bkb-ink); } .stat-number::after { content: ""; display: block; width: 34px; height: 3px; margin: 10px auto 12px; border-radius: 2px; background: linear-gradient(90deg, var(--bkb-primary-strong), var(--bkb-primary-deep)); } .stat-label { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--bkb-ink-muted); } @media (max-width: 991px) { .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 36px; } .stat-item:nth-child(3) { border-left: none; } } /* Team / Managing-Director intro — page tone with a soft glow */ .team-section { background: radial-gradient(1200px 480px at 80% -10%, var(--bkb-soft-glow), transparent 60%), var(--bkb-bg); } .team-section { padding: var(--bkb-section-y) 24px; } .team-section .team-wrapper { gap: clamp(40px, 6vw, 88px); } .team-section .team-title, .team-section .body-20-R-28 { color: var(--bkb-ink) !important; } .team-section .team-title { font-family: var(--bkb-font-head); font-size: clamp(30px, 3.6vw, 46px); font-weight: 700; line-height: 1.15; letter-spacing: -0.6px; margin-bottom: 22px; } /* Text column gets the larger share so the copy isn't squeezed by the portrait */ .team-section .team-content-box { flex: 1 1 460px; max-width: 620px; } /* Motto as a pull quote under the heading */ .team-section .team-subtitle { position: relative; margin: 0 0 24px; padding: 18px 22px 18px 58px; border-left: 3px solid var(--bkb-primary); border-radius: 0 var(--bkb-radius-sm) var(--bkb-radius-sm) 0; background: var(--bkb-primary-soft); font-family: var(--bkb-font-head); font-size: 19px; font-weight: 600; font-style: italic; line-height: 1.5; color: var(--bkb-ink); } .team-section .team-subtitle i { position: absolute; left: 20px; top: 20px; font-size: 22px; font-style: normal; color: var(--bkb-accent-text); } .team-section .team-content-box .body-20-R-28 { color: var(--bkb-ink-muted) !important; font-family: var(--bkb-font-body); font-size: 16.5px; line-height: 1.85; } /* Button + signature line closing the column */ .team-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--bkb-line); } .team-cta-link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--bkb-font-head); font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--bkb-ink) !important; } .team-cta-link i { font-size: 12px; color: var(--bkb-accent-text); transition: transform var(--bkb-ease); } .team-cta-link:hover i { transform: translateX(5px); } /* Photo: rounded image over an offset crimson outline + gold corner */ .team-section .photo-frame { padding: 0 18px 18px 0; } .team-section .photo-frame::before { top: 18px; left: 18px; border: 2px solid var(--bkb-primary); border-radius: 22px; } .team-section .team-photo { border-radius: 20px; box-shadow: var(--bkb-shadow); background: var(--bkb-gray-100); } .team-section .team-name-box { left: -18px; bottom: 36px; padding: 14px 22px; border: 0; border-left: 4px solid var(--bkb-primary); border-radius: 0 12px 12px 0; background: linear-gradient(120deg, rgba(110, 0, 18, 0.95), rgba(58, 12, 26, 0.92)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--bkb-font-head); font-size: 17px; box-shadow: var(--bkb-shadow-dark); } .team-section .team-position { margin-top: 2px; font-size: 12px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: #D9B77E; opacity: 1; } /* "Since 2013" seal, top-right of the portrait */ .team-badge { position: absolute; top: -22px; right: -4px; z-index: 4; width: 108px; height: 108px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bkb-primary); color: #fff; box-shadow: 0 0 0 6px var(--bkb-bg), var(--bkb-shadow-brand); font-family: var(--bkb-font-head); line-height: 1; } .team-badge-label { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #F3D9A8; } .team-badge-year { margin-top: 6px; font-size: 28px; font-weight: 700; } @media (max-width: 768px) { .team-badge { width: 84px; height: 84px; top: -14px; right: 4px; } .team-badge-year { font-size: 22px; } .team-section .team-name-box { left: 0; } .team-section .team-content-box { flex-basis: auto; } .team-section .team-subtitle { text-align: left; font-size: 17px; } .team-cta { justify-content: center; } } /* Special project showcase */ .sp-section .content-wrap { background: radial-gradient(1100px 420px at 85% -10%, var(--bkb-soft-glow), transparent 60%), var(--bkb-gray-50); border-top: 1px solid var(--bkb-line); border-bottom: 1px solid var(--bkb-line); } .sp-card { position: relative; background: var(--bkb-card); border: 1px solid var(--bkb-line); border-radius: 24px; overflow: hidden; box-shadow: var(--bkb-shadow); margin-bottom: 0; } /* Crimson-to-gold spine along the top edge of the showcase card */ .sp-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 3; background: linear-gradient(90deg, var(--bkb-primary), var(--bkb-primary-strong) 60%, var(--bkb-gold)); } .sp-info { height: 100%; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(28px, 4vw, 52px); } .sp-type { display: inline-block; padding: 7px 16px; border-radius: 999px; background: var(--bkb-primary-soft); border: 1px solid var(--bkb-primary-ring); color: var(--bkb-accent-text); font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 18px; } .sp-title { font-family: var(--bkb-font-head); font-size: clamp(26px, 2.8vw, 36px); font-weight: 700; letter-spacing: -0.6px; line-height: 1.3; color: var(--bkb-ink); margin: 0 0 16px; } .sp-desc { font-family: 'Montserrat', sans-serif; font-size: 17px; line-height: 1.65; color: var(--bkb-ink-muted); margin: 0 0 22px; } .sp-desc, .sp-bullets li { font-family: var(--bkb-font-body) !important; } /* Two-column check list on wide cards (CSRM-style) */ .sp-bullets { list-style: none; padding: 0; margin: 0 0 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; } .sp-bullets li { display: flex; align-items: flex-start; gap: 12px; font-family: 'Montserrat', sans-serif; font-size: 16px; line-height: 1.55; color: var(--bkb-ink-soft); } .sp-bullet-check { flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--bkb-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; } .sp-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; width: 100%; padding: 20px 0; margin-bottom: 26px; border-top: 1px solid var(--bkb-line); border-bottom: 1px solid var(--bkb-line); } .sp-meta-item { display: flex; align-items: center; gap: 12px; } .sp-meta-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px; background: var(--bkb-gray-100); border: 1px solid var(--bkb-line); color: var(--bkb-accent-text); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; } .sp-meta-label { display: block; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--bkb-ink-dim); margin-bottom: 2px; } .sp-meta-value { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 600; color: var(--bkb-ink); } .sp-actions { margin-top: auto; } .sp-gallery { position: relative; height: 100%; min-height: 420px; } .sp-gallery-main { position: absolute; inset: 0; } .sp-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.25s ease; } .sp-gallery-link { position: absolute; inset: 0; z-index: 1; } .sp-gallery-thumbs { position: absolute; right: 16px; bottom: 16px; z-index: 2; display: flex; gap: 10px; padding: 8px; border-radius: 12px; background: rgba(17, 18, 22, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .sp-thumb { width: 68px; height: 48px; padding: 0; border: 2px solid transparent; border-radius: var(--bkb-radius-sm); overflow: hidden; cursor: pointer; background: none; opacity: 0.75; transition: opacity var(--bkb-ease), border-color var(--bkb-ease), transform var(--bkb-ease); } .sp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .sp-thumb:hover { opacity: 1; transform: translateY(-2px); } .sp-thumb.active { opacity: 1; border-color: #fff; } @media (max-width: 991px) { .sp-gallery { min-height: 300px; height: 340px; } .sp-thumb { width: 56px; height: 40px; } } /* Service cards — white cards, crimson accents */ .svc-card { position: relative; width: 100%; display: flex; flex-direction: column; padding: 36px 30px 30px; background: var(--bkb-card); border: 1px solid var(--bkb-line); border-radius: var(--bkb-radius); overflow: hidden; box-shadow: var(--bkb-shadow-sm); transition: transform var(--bkb-ease), box-shadow var(--bkb-ease), border-color var(--bkb-ease); } /* Bottom accent bar grows on hover */ .svc-card::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--bkb-primary), var(--bkb-primary-strong) 70%, var(--bkb-gold)); transform: scaleX(0); transform-origin: left center; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } /* Faint crimson wash rising from the corner on hover */ .svc-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 220px at 100% 0%, var(--bkb-primary-soft), transparent 70%); opacity: 0; pointer-events: none; transition: opacity var(--bkb-ease); } .svc-card:hover { transform: translateY(-8px); border-color: var(--bkb-primary-ring); box-shadow: var(--bkb-shadow); } .svc-card:hover::before { transform: scaleX(1); } .svc-card:hover::after { opacity: 1; } .svc-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 26px; } .svc-icon { width: 64px; height: 64px; border-radius: 18px; background: var(--bkb-primary-soft); border: 1px solid var(--bkb-primary-ring); display: flex; align-items: center; justify-content: center; transition: background var(--bkb-ease), border-color var(--bkb-ease), transform var(--bkb-ease); } /* Icon tile turns solid white with a crimson ring and tilts; the icon art is full-colour (admin uploads), so it is never recoloured */ .svc-card:hover .svc-icon { background: #fff; border-color: var(--bkb-primary); box-shadow: 0 0 0 4px var(--bkb-primary-soft), var(--bkb-shadow-brand); transform: rotate(-6deg); } .svc-icon img { height: 32px; width: 32px; object-fit: contain; transition: transform var(--bkb-ease); } .svc-card:hover .svc-icon img { transform: rotate(6deg) scale(1.1); } /* Outlined index numeral, top-right */ .svc-index { font-family: var(--bkb-font-head); font-size: 48px; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--bkb-line-strong); transition: -webkit-text-stroke-color var(--bkb-ease), color var(--bkb-ease); } .svc-card:hover .svc-index { -webkit-text-stroke-color: var(--bkb-gold); } /* Photo-led variant: the service photo bleeds to the card edges, the numeral sits in a crimson tab on its corner, and the copy pads in below */ .svc-card.has-cover { padding: 0 0 28px; } .svc-card.has-cover > .svc-title, .svc-card.has-cover > .svc-desc, .svc-card.has-cover > .svc-link { margin-left: 26px; margin-right: 26px; } .svc-cover { position: relative; aspect-ratio: 16 / 11; margin-bottom: 24px; overflow: hidden; background: var(--bkb-gray-100); } .svc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); } /* Soft scrim so the tab and the photo's lower edge read cleanly */ .svc-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(8, 9, 11, 0.35)); pointer-events: none; } .svc-card:hover .svc-cover img { transform: scale(1.07); } .svc-cover .svc-index { position: absolute; left: 0; bottom: 0; z-index: 1; padding: 10px 16px 8px; border-radius: 0 12px 0 0; background: var(--bkb-primary); font-size: 20px; letter-spacing: 1px; color: #fff; -webkit-text-stroke: 0; transition: background var(--bkb-ease); } .svc-card:hover .svc-cover .svc-index { background: var(--bkb-primary-strong); } .svc-title { font-family: var(--bkb-font-head); font-size: 21px; font-weight: 700; line-height: 1.35; letter-spacing: -0.3px; color: var(--bkb-ink); margin: 0 0 12px; } .svc-desc { font-family: var(--bkb-font-body); font-size: 15px; line-height: 1.7; color: var(--bkb-ink-muted); margin: 0 0 24px; flex-grow: 1; } .svc-link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--bkb-font-head); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--bkb-accent-text) !important; } .svc-link i { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 11px; background: var(--bkb-primary-soft); transition: transform var(--bkb-ease), background var(--bkb-ease), color var(--bkb-ease); } .svc-card:hover .svc-link i, .svc-link:hover i { transform: translateX(5px); background: var(--bkb-primary); color: #fff; } /* Services page — feature images sized responsively, not with fixed px */ .svc-feature-img { width: 100%; max-width: 600px; height: auto; aspect-ratio: 6 / 7; object-fit: cover; border-radius: var(--bkb-radius); box-shadow: var(--bkb-shadow); } /* Services page rows: wide photo with an offset crimson outline beside a numbered copy block; odd rows mirror */ .svc-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(32px, 6vw, 88px); padding: clamp(48px, 6vw, 80px) 0; } .svc-row + .svc-row { border-top: 1px solid var(--bkb-line); } .svc-row.is-flipped { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .svc-row.is-flipped .svc-row-media { order: 2; } .svc-row-media { position: relative; padding: 0 18px 18px 0; } .svc-row-media::before { content: ""; position: absolute; top: 18px; left: 18px; right: 0; bottom: 0; border: 2px solid var(--bkb-primary-ring); border-radius: calc(var(--bkb-radius) + 2px); transition: border-color var(--bkb-ease); } .svc-row:hover .svc-row-media::before { border-color: var(--bkb-primary); } .svc-row-media a { position: relative; display: block; overflow: hidden; border-radius: var(--bkb-radius); } .svc-row .svc-feature-img { display: block; max-width: none; aspect-ratio: 5 / 4; box-shadow: var(--bkb-shadow); transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); } .svc-row:hover .svc-feature-img { transform: scale(1.05); } .svc-row-index { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px; font-family: var(--bkb-font-head); font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--bkb-accent-text); } .svc-row-index i { width: 34px; height: 2px; background: var(--bkb-gold); } .svc-row-title { margin: 0 0 18px; font-family: var(--bkb-font-head); font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; line-height: 1.12; letter-spacing: -0.6px; color: var(--bkb-ink); transition: color var(--bkb-ease); } .svc-row-body a:hover .svc-row-title { color: var(--bkb-accent-text); } .svc-row-text { margin: 0 0 30px; font-size: 17px; line-height: 1.85; color: var(--bkb-ink-muted); } .svc-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; } @media (max-width: 991px) { .svc-row, .svc-row.is-flipped { grid-template-columns: 1fr; gap: 28px; } .svc-row.is-flipped .svc-row-media { order: 0; } } @media (max-width: 575px) { /* container gutter is 12px — keep text off the screen edge */ .svc-row { padding-left: 6px; padding-right: 6px; } } /* --------------------------------------------------------------------------- 7. CARDS — portfolio, blog entries, generic cards ------------------------------------------------------------------------- */ /* Project tiles: portrait image card, title always legible on a bottom gradient, crimson ring + arrow disc + slow zoom on hover. Text sits on imagery, so it is white in every theme. */ .portfolio-item { padding: 10px; } .portfolio-item .nav-holder-h, .portfolio-item .portfolio-image { border-radius: 20px; overflow: hidden; } .portfolio-item .portfolio-image { box-shadow: var(--bkb-shadow-sm); transition: transform var(--bkb-ease), box-shadow var(--bkb-ease); } .portfolio-item:hover .portfolio-image { transform: translateY(-6px); box-shadow: var(--bkb-shadow-dark); } .portfolio-item .nav-holder-h { aspect-ratio: 4 / 5 !important; } /* Retire the legacy split-shadow panels */ .portfolio-item .nav-holder-h::before, .portfolio-item .nav-holder-h::after { display: none !important; } .portfolio-item .nav-holder-h img, .portfolio-image img { transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) !important; } .portfolio-item:hover .nav-holder-h img, .portfolio-item:hover .portfolio-image img { transform: scale(1.08); } /* Listing cards (Projects / Blog pages): image and caption share one card, caption left-aligned with a tag, title and a "more" link */ .pf-card > .grid-inner { height: 100%; display: flex; flex-direction: column; background: var(--bkb-card); border: 1px solid var(--bkb-line); border-radius: 20px; overflow: hidden; box-shadow: var(--bkb-shadow-sm); transition: transform var(--bkb-ease), box-shadow var(--bkb-ease), border-color var(--bkb-ease); } .pf-card:hover > .grid-inner { transform: translateY(-6px); border-color: var(--bkb-primary-ring); box-shadow: var(--bkb-shadow); } /* The card carries the lift now — the image inside it stays put */ .pf-card .nav-holder-h, .pf-card .portfolio-image { border-radius: 0; box-shadow: none !important; transform: none !important; } .pf-card .portfolio-desc.pf-caption { display: flex; flex-direction: column; gap: 10px; flex-grow: 1; padding: 20px 22px 22px !important; text-align: left; } .pf-card > .grid-inner > a:last-child { display: flex; flex-grow: 1; } .pf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; color: var(--bkb-ink-dim); } .pf-tag { display: inline-block; padding: 4px 11px; border-radius: var(--bkb-radius-pill); background: var(--bkb-primary-soft); font-family: var(--bkb-font-head); font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--bkb-accent-text); } .pf-title { margin: 0; font-family: var(--bkb-font-head); font-size: 19px; font-weight: 700; line-height: 1.35; letter-spacing: -0.2px; color: var(--bkb-ink) !important; transition: color var(--bkb-ease); } .pf-card:hover .pf-title { color: var(--bkb-accent-text) !important; } .pf-excerpt { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--bkb-ink-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .pf-more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--bkb-font-head); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--bkb-accent-text); } .pf-more i { transition: transform var(--bkb-ease); } .pf-card:hover .pf-more i { transform: translateX(5px); } /* Blog thumbnails: one fixed ratio so the grid lines up instead of staggering with each upload's natural height */ .blog-card .portfolio-image { aspect-ratio: 16 / 10; } .blog-card .portfolio-image > a, .blog-card .portfolio-image img { display: block; width: 100%; height: 100%; object-fit: cover; } .bg-overlay { border: 0 !important; border-radius: 20px; box-shadow: inset 0 0 0 0 var(--bkb-primary); transition: box-shadow var(--bkb-ease); } .bg-overlay:hover { border: 0 !important; box-shadow: inset 0 0 0 3px var(--bkb-primary-strong); } .portfolio-item .bg-overlay-bg { opacity: 1 !important; background: var(--bkb-tile-scrim) !important; transition: background 0.45s ease; } .portfolio-item:hover .bg-overlay-bg { background: var(--bkb-tile-scrim-hover) !important; } .portfolio-item .bg-overlay-content { justify-content: flex-end !important; padding: 24px !important; } /* Keep the title visible on hover (legacy CSS hid it) */ .portfolio-item:hover .portfolio-desc .title-28-SB-36, .portfolio-item:hover .portfolio-desc .hover-box { display: block !important; } .portfolio-item .portfolio-desc .title-28-SB-36, .band-dark .portfolio-item .text-white { color: #fff !important; font-size: 21px; line-height: 1.3; letter-spacing: -0.3px; } .portfolio-item .portfolio-desc .hover-box { margin-top: 10px; } /* Work-package chip under the title */ .portfolio-item .portfolio-desc .hover-box .body-20-M-28 { display: inline-block; padding: 5px 12px; border-radius: var(--bkb-radius-pill); background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); color: #F3E3C4 !important; font-family: var(--bkb-font-head); font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 1.2px; text-transform: uppercase; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* The duplicate title + bullet list is redundant once the title stays put */ .portfolio-item .bg-overlay > h3, .portfolio-item .bg-overlay > ul { display: none !important; } /* Arrow disc, top-right, pops in on hover */ .portfolio-item .grid-inner { position: relative; } .portfolio-item .grid-inner::after { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 18px; right: 18px; z-index: 4; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #fff; background: var(--bkb-primary); box-shadow: var(--bkb-shadow-brand); transform: scale(0.4) rotate(-45deg); opacity: 0; pointer-events: none; transition: transform var(--bkb-ease), opacity var(--bkb-ease); } .portfolio-item:hover .grid-inner::after { transform: scale(1) rotate(-45deg); opacity: 1; } .page-pro .band-dark > #portfolio { padding: 0 clamp(16px, 3vw, 40px) var(--bkb-section-y) !important; } .pro-tilt { transition: transform 0.25s ease-out; transform-style: preserve-3d; } /* Blog / content entries */ .entry { background: var(--bkb-card); border: 1px solid var(--bkb-line); border-radius: var(--bkb-radius); overflow: hidden; box-shadow: var(--bkb-shadow-sm); transition: transform var(--bkb-ease), box-shadow var(--bkb-ease), border-color var(--bkb-ease); } .entry:hover { transform: translateY(-4px); border-color: var(--bkb-line-strong); box-shadow: var(--bkb-shadow); } .entry-image img { transition: transform 0.6s var(--bkb-ease); } .entry:hover .entry-image img { transform: scale(1.05); } /* Generic bootstrap card */ .card { background: var(--bkb-card); border: 1px solid var(--bkb-line); border-radius: var(--bkb-radius); box-shadow: var(--bkb-shadow-sm); color: var(--bkb-ink-soft); } /* Cards inside dark bands */ .band-dark .card, .band-dark .testimonial-col { background: var(--bkb-band-card) !important; border: 1px solid var(--bkb-band-line) !important; color: var(--bkb-band-text); } /* Team cards (About page) */ .team-list { background: var(--bkb-band-card); border: 1px solid var(--bkb-band-line); box-shadow: var(--bkb-shadow-sm); } /* --------------------------------------------------------------------------- 8. PAGE BANNER (PageBanner.razor — replaces legacy .page-title) ------------------------------------------------------------------------- */ .page-banner { position: relative; /* Media surface, not a themed band — its overlay is a fixed dark scrim and its text is always light. See --bkb-media-bg. */ background-color: var(--bkb-media-bg); background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; } .page-banner-overlay { position: absolute; inset: 0; background: radial-gradient(700px 320px at 0% 100%, var(--bkb-banner-glow), transparent 70%), var(--bkb-banner-veil); } /* Brand rule along the banner's foot: crimson with a gold tail */ .page-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 2; background: linear-gradient(90deg, var(--bkb-primary) 0%, var(--bkb-primary-strong) 70%, var(--bkb-gold) 100%); } .page-banner-inner { position: relative; z-index: 1; padding-top: 40px; padding-bottom: 52px; } /* The fixed header floats over the dark hero/banner (every public page starts with one) instead of pushing a white strip above it. */ body { padding-top: 0 !important; } /* Tablet: the header wraps onto two rows (~200px) — give banners more clearance so titles never tuck under the bar */ @media (min-width: 768px) and (max-width: 1199px) { .page-banner .header-gap { padding-top: 220px; } } @media (max-width: 767px) { /* header-gap collapses on mobile — keep banner text clear of the bar */ .page-banner-inner { padding-top: 120px; } } .page-banner-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--bkb-banner-eyebrow); margin-bottom: 10px; } .page-banner-eyebrow::before { content: ""; width: 40px; height: 2px; background: linear-gradient(90deg, var(--bkb-primary-strong), #D9B77E); border-radius: 2px; } .page-banner-title { font-family: var(--bkb-font-head); font-size: clamp(34px, 5vw, 64px); font-weight: 700; line-height: 1.1; letter-spacing: -1.2px; color: var(--bkb-banner-title); margin: 0 0 14px; animation: proFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; } .page-banner-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 40px; animation: proFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; } .page-banner-lede { font-family: 'Montserrat', sans-serif; font-size: 17px; line-height: 1.6; color: var(--bkb-banner-text); max-width: 560px; margin: 0; } .page-banner-crumbs { margin: 0; padding: 8px 18px; background: var(--bkb-banner-chip-bg); border: 1px solid var(--bkb-banner-chip-line); border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .page-banner-crumbs .breadcrumb-item, .page-banner-crumbs .breadcrumb-item a { font-family: 'Montserrat', sans-serif; font-size: 14px; color: var(--bkb-banner-crumb); text-decoration: none; } .page-banner-crumbs .breadcrumb-item a:hover { color: var(--bkb-banner-title); } .page-banner-crumbs .breadcrumb-item.active { color: var(--bkb-banner-crumb-active); max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .page-banner-crumbs .breadcrumb-item + .breadcrumb-item::before { color: var(--bkb-banner-crumb); opacity: 0.6; } /* No stock photo: a solid themed surface with the faint blueprint grid. (A page may still pass BackgroundImage — then the photo shows instead.) */ .page-banner:not([style*="background-image"]) { background: linear-gradient(var(--bkb-band-grid) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, var(--bkb-band-grid) 1px, transparent 1px) 0 0 / 56px 56px, var(--bkb-banner-bg); } .page-banner-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; gap: 40px; } .page-banner.has-aside .page-banner-grid { grid-template-columns: minmax(0, 1fr) auto; } /* With an aside the crumbs sit under the lede instead of across from it */ .page-banner.has-aside .page-banner-foot { flex-direction: column; align-items: flex-start; gap: 16px; } .page-banner-aside { animation: proFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; } /* The page's own photos, fanned like prints on a desk */ .pb-collage { position: relative; width: 360px; height: 210px; } .pb-shot { position: absolute; object-fit: cover; border-radius: 16px; border: 4px solid var(--bkb-card); box-shadow: var(--bkb-shadow); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .pb-shot-1 { z-index: 3; left: 80px; top: 26px; width: 230px; height: 160px; } .pb-shot-2 { z-index: 2; left: 0; top: 88px; width: 150px; height: 110px; transform: rotate(-6deg); } .pb-shot-3 { z-index: 1; right: 0; top: 0; width: 150px; height: 110px; transform: rotate(5deg); } .pb-collage-1 .pb-shot-1 { left: auto; right: 0; top: 6px; width: 320px; height: 200px; } /* People: tall cards cropped from the top so faces are never cut — the Managing Director in front, the Deputy beside and slightly behind */ .pb-portraits { width: 330px; height: 256px; } .pb-portraits .pb-shot { object-position: center top; background: var(--bkb-card); } .pb-portraits .pb-shot-1 { left: 20px; top: 22px; width: 172px; height: 228px; transform: rotate(-3deg); } .pb-portraits .pb-shot-2 { left: auto; right: 0; top: 38px; width: 150px; height: 200px; transform: rotate(4deg); } .page-banner-aside:hover .pb-portraits .pb-shot-1 { transform: rotate(-3deg) translateY(-4px); } .page-banner-aside:hover .pb-portraits .pb-shot-2 { transform: rotate(6deg) translateX(6px); } .page-banner-aside:hover .pb-shot-1 { transform: translateY(-4px); } .page-banner-aside:hover .pb-shot-2 { transform: rotate(-9deg) translateX(-6px); } .page-banner-aside:hover .pb-shot-3 { transform: rotate(8deg) translateX(6px); } /* Contact page aside: quick ways to reach us */ .pb-contact { display: flex; flex-direction: column; gap: 10px; min-width: 300px; } .pb-contact-item { display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 14px; background: var(--bkb-card); border: 1px solid var(--bkb-line); box-shadow: var(--bkb-shadow-sm); color: var(--bkb-ink) !important; font-family: var(--bkb-font-head); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: transform var(--bkb-ease), border-color var(--bkb-ease); } a.pb-contact-item:hover { transform: translateX(-4px); border-color: var(--bkb-primary-ring); } .pb-contact-item i { flex-shrink: 0; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bkb-primary); color: #fff; font-size: 14px; } .pb-contact-item small { display: block; font-family: var(--bkb-font-body); font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--bkb-ink-dim); } @media (max-width: 991px) { .page-banner.has-aside .page-banner-grid { grid-template-columns: minmax(0, 1fr); } .page-banner-aside { display: none; } } /* --------------------------------------------------------------------------- 9. CLIENTS STRIP — white tiles on light gray, grayscale → colour ------------------------------------------------------------------------- */ .clients-strip .content-wrap { background: radial-gradient(1100px 420px at 15% 120%, var(--bkb-soft-glow), transparent 60%), var(--bkb-gray-50); border-top: 1px solid var(--bkb-line); border-bottom: 1px solid var(--bkb-line); } .clients-strip .swiper-slide { background: var(--bkb-card); border: 1px solid var(--bkb-line); border-radius: 12px; height: 96px; display: flex; align-items: center; justify-content: center; padding: 16px 24px; transition: transform var(--bkb-ease), box-shadow var(--bkb-ease), border-color var(--bkb-ease), background var(--bkb-ease); } .clients-strip .swiper-slide:hover { background: #fff; } .clients-strip .swiper-slide:hover { transform: translateY(-4px); border-color: var(--bkb-line-strong); box-shadow: var(--bkb-shadow-sm); } .clients-strip .swiper-slide img { max-height: 60px; max-width: 100%; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.8; transition: filter var(--bkb-ease), opacity var(--bkb-ease); } .clients-strip .swiper-slide:hover img { filter: grayscale(0); opacity: 1; } .clients-strip .swiper-slide { border-radius: 14px; } /* Logos are artwork for white backgrounds — keep the tiles white in Dark too */ :root[data-theme="dark"] .clients-strip .swiper-slide { background: #F4F5F7; } /* Home gallery band — the page canvas, so it doesn't stack a second feature band between Ongoing Projects and the footer */ .pg-band { background: radial-gradient(1000px 420px at 90% 0%, var(--bkb-soft-glow), transparent 60%), var(--bkb-bg) !important; border-top: 1px solid var(--bkb-line); } /* --------------------------------------------------------------------------- 9b. CTA BAND (PromotionBannerComponent.razor) Brand-crimson media surface over the admin's photo; text always white. ------------------------------------------------------------------------- */ .cta-band { position: relative; overflow: hidden; margin: 0 !important; padding: var(--bkb-section-y) 0; background-color: var(--bkb-primary-deep); background-attachment: fixed; } .cta-overlay { position: absolute; inset: 0; z-index: 0; background: var(--bkb-cta-overlay); } /* Diagonal hairline texture over the crimson */ .cta-overlay::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, var(--bkb-cta-texture) 0 1px, transparent 1px 22px); } .cta-inner { position: relative; z-index: 1; } .cta-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; font-family: var(--bkb-font-head); font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #F3D9A8; } .cta-eyebrow::before, .cta-eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.6; } .cta-title { margin: 0 auto 18px; max-width: 880px; font-family: var(--bkb-font-head); font-size: clamp(32px, 4.6vw, 58px); font-weight: 700; line-height: 1.12; letter-spacing: -1.2px; color: #fff !important; } .cta-lede { max-width: 620px; margin: 0 auto 36px; font-family: var(--bkb-font-body); font-size: 18px; line-height: 1.7; color: rgba(255, 255, 255, 0.82) !important; } @media (max-width: 991px) { /* Fixed backgrounds jank on touch devices */ .cta-band { background-attachment: scroll !important; } } /* --------------------------------------------------------------------------- 10. FORMS — light fields, crimson focus ring ------------------------------------------------------------------------- */ .form-control, .form-select { background-color: var(--bkb-gray-50) !important; border: 1px solid var(--bkb-line-strong) !important; color: var(--bkb-ink) !important; border-radius: 10px !important; padding: 12px 16px; transition: border-color var(--bkb-ease), box-shadow var(--bkb-ease); } .form-control::placeholder { color: var(--bkb-ink-dim); } .form-control:focus, .form-select:focus { border-color: var(--bkb-primary-strong) !important; box-shadow: 0 0 0 4px var(--bkb-primary-soft) !important; outline: none; } label, .form-label { font-family: 'Montserrat', sans-serif; font-weight: 600; color: var(--bkb-ink-soft); } /* --------------------------------------------------------------------------- 11. CHIPS / PAGINATION / TABLES / BREADCRUMBS ------------------------------------------------------------------------- */ .grid-filter { border: 0; gap: 8px; } .grid-filter li a { color: var(--bkb-ink-muted) !important; background: var(--bkb-gray-50); border: 1px solid var(--bkb-line); border-radius: 999px !important; padding: 10px 22px; margin: 4px; font-family: 'Montserrat', sans-serif; font-weight: 600; transition: color var(--bkb-ease), background var(--bkb-ease), border-color var(--bkb-ease), transform var(--bkb-ease); } .grid-filter li a:hover { color: var(--bkb-accent-text) !important; border-color: var(--bkb-primary-ring); background: var(--bkb-primary-soft); transform: translateY(-1px); } .grid-filter li.activeFilter a { background: linear-gradient(135deg, var(--bkb-primary-strong), var(--bkb-primary-deep)) !important; border-color: transparent; color: #fff !important; box-shadow: 0 6px 16px rgba(130, 0, 23, 0.3); margin: 4px; } .grid-shuffle { border: 1px solid var(--bkb-line); background: var(--bkb-gray-50); color: var(--bkb-ink-muted); transition: color var(--bkb-ease), border-color var(--bkb-ease), background var(--bkb-ease); } .grid-shuffle:hover { color: var(--bkb-accent-text); border-color: var(--bkb-primary-ring); background: var(--bkb-primary-soft); } .pagination { --bs-pagination-bg: var(--bkb-card); --bs-pagination-color: var(--bkb-ink-muted); --bs-pagination-border-color: var(--bkb-line); --bs-pagination-hover-bg: var(--bkb-gray-100); --bs-pagination-hover-color: #fff; --bs-pagination-active-bg: var(--bkb-primary-strong) !important; --bs-pagination-active-border-color: var(--bkb-primary-strong) !important; --bs-pagination-border-radius: 10px; } .table { --bs-table-border-color: var(--bkb-line); border-radius: var(--bkb-radius-sm); overflow: hidden; } .table thead th { background: var(--bkb-gray-50); font-family: 'Montserrat', sans-serif; font-weight: 600; color: var(--bkb-ink); border-bottom: 2px solid var(--bkb-line-strong); } .table tbody tr:hover { background: var(--bkb-gray-50); } /* --------------------------------------------------------------------------- 12. ONGOING-PROJECTS ACCORDION + BD MAP (dark band on Home) ------------------------------------------------------------------------- */ /* Two balanced columns — city list beside the map — instead of a narrow list pinned left and the map pinned right with dead space between them */ .op-wrapper { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(32px, 5vw, 72px); max-width: 1140px; margin: 0 auto; } .op-left { background: transparent; max-width: none !important; } .op-left { font-family: var(--bkb-font-body) !important; padding: 0 !important; } .op-hint { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 14px; color: var(--bkb-band-muted); } .op-hint i { color: var(--bkb-band-accent); } /* Map sits on a soft spotlight so it reads as the section's centrepiece */ .op-map { position: relative; display: flex; justify-content: center; } .op-map::before { content: ""; position: absolute; inset: 8% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--bkb-brand-rgb), 0.16), transparent 75%); pointer-events: none; } .op-map svg.bd-map { position: relative; width: 100%; max-width: 520px; max-height: 620px; } @media (max-width: 991px) { .op-wrapper { grid-template-columns: 1fr; } .op-map svg.bd-map { max-width: 420px; } } .op-accordion-box { border: 1px solid var(--bkb-band-line); border-radius: 14px; overflow: hidden; margin-bottom: 12px; background: var(--bkb-band-card); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); transition: border-color var(--bkb-ease), transform var(--bkb-ease); } .op-accordion-box:hover { border-color: var(--bkb-band-accent); transform: translateX(4px); } .op-acc-header { padding: 16px 18px; background: var(--bkb-band-card) !important; color: var(--bkb-band-text); font-family: var(--bkb-font-head); transition: background var(--bkb-ease); } /* City marker: crimson dot with a soft halo */ .op-dot { width: 10px !important; height: 10px !important; background: var(--bkb-primary-strong) !important; box-shadow: 0 0 0 4px rgba(var(--bkb-brand-rgb), 0.22); } .op-arrow { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bkb-band-overlay); border: 1px solid var(--bkb-band-line); font-size: 11px; } .op-acc-header.active .op-arrow { background: var(--bkb-primary); border-color: var(--bkb-primary); color: #fff; } .op-project { padding: 10px 0; border-bottom: 1px dashed var(--bkb-band-line); } .op-project:last-child { border-bottom: 0; margin-bottom: 0; } .op-project-title { color: var(--bkb-band-heading); } /* Hover lifts the card further off the band. (It used to go darker, which only worked while the band itself was near-black.) */ .op-acc-header:hover { background: var(--bkb-band-card-hi) !important; } .op-acc-header.active { border: none; border-left: 3px solid var(--bkb-primary-strong); } .op-acc-header.active + .op-acc-content { border: none; border-left: 3px solid var(--bkb-primary-strong); } .op-acc-main-content { border-width: 0; background: var(--bkb-band-2); padding: 16px; } .op-tag { background: var(--bkb-band-overlay); border: 1px solid var(--bkb-band-line); border-radius: var(--bkb-radius-pill); padding: 3px 10px; color: var(--bkb-band-muted) !important; font-family: var(--bkb-font-body); font-size: 12px; } .op-project-date { color: var(--bkb-band-muted); } /* The old #2A2C33 fill is the same tone as the new band — the map would vanish into it. Step the fill up and strengthen the stroke. */ .bd-division { fill: var(--bkb-map-fill); stroke: var(--bkb-map-stroke); stroke-width: 1.4; } .bd-division:hover, .bd-division.active { fill: var(--bkb-primary); } /* Markers follow the theme's brand red (Dark: the logo crimson) */ .bd-marker-dot { fill: var(--bkb-map-marker); } .bd-marker-pulse { stroke: var(--bkb-map-marker); } /* --------------------------------------------------------------------------- 13. FOOTER — charcoal finish with crimson accent line ------------------------------------------------------------------------- */ #footer, .dark #footer { /* Base tone only — FooterComponent.razor.css paints the gradient on top. Matches the band tone so the footer reads as the page's closing band. */ background-color: var(--bkb-band-bg) !important; border-top: 3px solid var(--bkb-primary); } #footer a { color: var(--bkb-band-muted); } #footer a:hover { color: var(--bkb-band-heading); } #footer .widget_links li a { display: inline-block; transition: transform var(--bkb-ease), color var(--bkb-ease); } #footer .widget_links li a:hover { transform: translateX(6px); color: var(--bkb-band-accent) !important; } /* Canvas draws its own bullet on .widget_links items — the footer list has a chevron of its own (FooterComponent.razor.css) */ #footer .widget_links .ft-links li::before { display: none !important; } #footer .widget_links .ft-links li { padding-left: 0 !important; } #footer .widget_links .ft-links li a { display: inline-flex; align-items: center; gap: 10px; } /* --------------------------------------------------------------------------- 14. MOTION — scroll-reveal, progress bar, reduced motion ------------------------------------------------------------------------- */ body.js-reveal [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } body.js-reveal [data-reveal="left"] { transform: translateX(-44px); } body.js-reveal [data-reveal="right"] { transform: translateX(44px); } body.js-reveal [data-reveal].is-revealed { opacity: 1; transform: translate(0, 0); } #pro-progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 10010; background: linear-gradient(90deg, var(--bkb-primary-deep), var(--bkb-primary-strong)); box-shadow: 0 0 10px rgba(130, 0, 23, 0.5); pointer-events: none; transition: width 0.1s linear; } /* --------------------------------------------------------------------------- 15. DETAIL PAGES — dark overrides for the page-local light styles in project-details.css / blog-details.css / special-project-details.css ------------------------------------------------------------------------- */ .pd-body, .bd-body, .spd-body { background: var(--bkb-bg) !important; color: var(--bkb-ink-soft); } .bd-main, .bd-sidebar-card, .bd-lead, .bd-meta-bar, .bd-related-card, .bd-related-item, .bd-img-grid-item, .pd-meta-card, .pd-description, .spd-description, .spd-meta-card, .spd-related { background: var(--bkb-card) !important; border-color: var(--bkb-line) !important; color: var(--bkb-ink-soft); } .bd-related-item:hover { background: var(--bkb-gray-100) !important; } /* Titles that sit over photos (.pd-related-title, .bd-related-card-title) and the crimson card headers are deliberately NOT in this list — they keep their light text in every theme. */ .pd-section-label, .bd-section-label, .pd-meta-val, .bd-sidebar-val, .bd-related-title { color: var(--bkb-ink) !important; } .pd-description-text, .bd-content-text, .bd-lead, .pd-meta-key, .bd-sidebar-key, .bd-meta-item, .bd-related-date { color: var(--bkb-ink-muted) !important; } .bd-cat-badge, .pd-cat-badge { background: var(--bkb-primary-soft) !important; border: 1px solid var(--bkb-primary-ring) !important; color: var(--bkb-accent-text) !important; } /* --------------------------------------------------------------------------- 16. REDUCED MOTION ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .hero-content > *, .hero-scroll-dot, .bd-marker-dot, .bd-marker-pulse, .page-banner-title, .page-banner-foot { animation: none !important; } body.js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; } #pro-progress-bar, .pro-tilt, .entry-image img, .portfolio-image img { transition: none; } } /* --------------------------------------------------------------------------- 16. MISSING IMAGES — see the fallback script in _Host.cshtml ------------------------------------------------------------------------- */ img.img-missing { object-fit: cover; background: var(--bkb-gray-100); } /* --------------------------------------------------------------------------- 17. BRAND LOGO (BrandLogo.razor) The official PNG used as a CSS mask three times — mark, wordmark and tagline — each layer full-size but clipped to its own part, so every part can take its own colour and motion while keeping the exact shapes. Every theme shows the logo in its ORIGINAL colours (sampled from the artwork: #820017 mark + wordmark, #000000 tagline). Hover only adds motion and a passing shine. Where the surface behind it is dark, the theme sets --bkb-logo-plate and the logo sits on a white plate rather than being recoloured. ------------------------------------------------------------------------- */ .brand-logo { --brand-mark: #820017; --brand-word: #820017; --brand-shine: #E0304F; --brand-sub: #000000; --brand-sub-hover: #000000; --brand-glow: rgba(156, 0, 26, 0.45); --brand-rule: linear-gradient(90deg, #9C001A, transparent); position: relative; display: inline-block; vertical-align: middle; height: var(--brand-h, 56px); aspect-ratio: 1920 / 551; perspective: 600px; /* Plate drawn with a spread shadow so it never changes the layout box */ background: var(--bkb-logo-plate, transparent); border-radius: 8px; box-shadow: 0 0 0 10px var(--bkb-logo-plate, transparent); } .brand-layer { position: absolute; inset: 0; -webkit-mask: var(--brand-src) center / 100% 100% no-repeat; mask: var(--brand-src) center / 100% 100% no-repeat; } .brand-mark { background: var(--brand-mark); /* clip regions run to the gaps between parts so hover glow isn't cut */ clip-path: inset(0 66% 0 0); transform-origin: 16.6% 47.9%; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease; /* backwards, not both: a held end-state would override the hover transform */ animation: brandMarkIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards; } .brand-word { background: linear-gradient(110deg, var(--brand-word) 0 40%, var(--brand-shine) 48%, #fff 50%, var(--brand-shine) 52%, var(--brand-word) 60% 100%); background-size: 300% 100%; background-position: 100% 0; clip-path: inset(0 0 38.4% 34%); animation: brandWordIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s backwards; } .brand-sub { background: var(--brand-sub); clip-path: inset(61.6% 0 0 34%); transition: background 0.5s ease; animation: brandWordIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s backwards; } /* Rule that draws in under the tagline on hover */ .brand-logo::after { content: ""; position: absolute; left: 34.6%; right: 4.8%; top: calc(100% + 3px); height: 2px; border-radius: 2px; background: var(--brand-rule); transform: scaleX(0); transform-origin: left center; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s; } a:hover .brand-logo .brand-mark, a:focus-visible .brand-logo .brand-mark, .brand-logo:hover .brand-mark { transform: rotateY(360deg); filter: drop-shadow(0 0 8px var(--brand-glow)); } a:hover .brand-logo .brand-word, a:focus-visible .brand-logo .brand-word, .brand-logo:hover .brand-word { animation: brandShine 1.1s cubic-bezier(0.22, 1, 0.36, 1); } a:hover .brand-logo .brand-sub, a:focus-visible .brand-logo .brand-sub, .brand-logo:hover .brand-sub { background: var(--brand-sub-hover); } a:hover .brand-logo::after, a:focus-visible .brand-logo::after, .brand-logo:hover::after { transform: scaleX(1); } @keyframes brandMarkIn { from { opacity: 0; transform: scale(0.7) rotate(-60deg); } to { opacity: 1; transform: none; } } @keyframes brandWordIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } } @keyframes brandShine { from { background-position: 100% 0; } to { background-position: 0 0; } } @media (prefers-reduced-motion: reduce) { .brand-layer, .brand-logo::after { animation: none !important; transition: none !important; } } /* Phone header: the logo sits at the screen edge — pull the plate in so its spread isn't clipped */ @media (max-width: 991px) { :root[data-theme="dark"] #logo .brand-logo { margin: 10px 0 10px 14px; box-shadow: 0 0 0 7px var(--bkb-logo-plate); } } /* No mask support: show the original artwork file as-is */ @supports not ((mask-image: none) or (-webkit-mask-image: none)) { .brand-layer { display: none; } .brand-logo { background: var(--bkb-logo-plate, transparent) url('/custom/bofkoreabd/images/menulogo.png') center / contain no-repeat; } } /* --------------------------------------------------------------------------- 18. SERVICE DETAILS (Standard / Dark) ------------------------------------------------------------------------- */ .sd-hero { row-gap: 32px; } .sd-hero-img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; display: block; border-radius: var(--bkb-radius); box-shadow: var(--bkb-shadow); } /* Admin icons vary in size — keep them a tidy tile, never a full photo */ .sd-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 22px; border-radius: 18px; background: var(--bkb-primary-soft); border: 1px solid var(--bkb-primary-ring); overflow: hidden; } .sd-icon img { width: 100%; height: 100%; object-fit: cover; } .sd-hero .svc-row-title { font-size: clamp(32px, 3.6vw, 50px); } .sd-others { margin: 24px 0 var(--bkb-section-y); padding-top: 40px; border-top: 1px solid var(--bkb-line); } .sd-others-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 18px; } .sd-other { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--bkb-card); border: 1px solid var(--bkb-line); border-radius: var(--bkb-radius-sm); color: var(--bkb-ink) !important; transition: transform var(--bkb-ease), border-color var(--bkb-ease), box-shadow var(--bkb-ease); } .sd-other:hover { transform: translateY(-3px); border-color: var(--bkb-primary-ring); box-shadow: var(--bkb-shadow-sm); } .sd-other-num { font-family: var(--bkb-font-head); font-size: 13px; font-weight: 700; color: var(--bkb-accent-text); } .sd-other-name { flex: 1; font-family: var(--bkb-font-head); font-size: 15px; font-weight: 700; } .sd-other i { font-size: 12px; color: var(--bkb-accent-text); transition: transform var(--bkb-ease); } .sd-other:hover i { transform: translateX(4px); } /* --------------------------------------------------------------------------- 19. DETAIL PAGES (Standard / Dark) — project, blog Prefixed with `html body` so these out-rank the page-local stylesheets (project-details.css / blog-details.css load after this file). ------------------------------------------------------------------------- */ html body .pd-body, html body .bd-body { background: radial-gradient(1000px 380px at 100% 0%, var(--bkb-band-glow, transparent), transparent 60%), var(--bkb-gray-50) !important; } /* Gallery */ html body .pd-main-img { border-radius: 18px; box-shadow: var(--bkb-shadow); } html body .pd-thumb { width: 92px; height: 68px; border-radius: 10px; opacity: 0.7; } html body .pd-thumb.active { border-color: var(--bkb-primary); box-shadow: 0 0 0 3px var(--bkb-primary-soft); } /* Overview as a proper reading card */ html body .pd-description { margin-top: 32px; padding: 30px 34px; border: 1px solid var(--bkb-line); border-left: 4px solid var(--bkb-primary); border-radius: 18px; box-shadow: var(--bkb-shadow-sm); } html body .pd-section-label, html body .bd-section-label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--bkb-font-head); font-size: 12px; letter-spacing: 2.5px; color: var(--bkb-accent-text) !important; } html body .pd-section-label::before, html body .bd-section-label::before { content: ""; width: 28px; height: 2px; background: var(--bkb-gold); } html body .pd-description-text, html body .pd-readmore-content { font-size: 16.5px; line-height: 1.85; color: var(--bkb-ink-soft) !important; } /* Facts card: crimson header, key/value rows side by side */ html body .pd-meta-card, html body .bd-sidebar-card { border-radius: 18px; box-shadow: var(--bkb-shadow-sm); } html body .pd-meta-card-header, html body .bd-sidebar-card-header { position: relative; padding: 22px 24px; background: linear-gradient(135deg, var(--bkb-primary) 0%, var(--bkb-primary-deep) 100%); color: #fff; } html body .pd-meta-card-header::after, html body .bd-sidebar-card-header::after { content: ""; position: absolute; left: 24px; bottom: 0; width: 44px; height: 3px; background: var(--bkb-gold); } html body .pd-meta-card-header h2, html body .bd-sidebar-card-header h3 { font-family: var(--bkb-font-head); font-size: 18px; color: #fff !important; } html body .pd-meta-card-header span { color: rgba(255, 255, 255, 0.78); } html body .pd-meta-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 14px 24px; border-color: var(--bkb-line); } html body .pd-meta-key, html body .bd-sidebar-key { margin: 0; font-size: 11px; letter-spacing: 1.2px; color: var(--bkb-ink-dim) !important; } html body .pd-meta-val, html body .bd-sidebar-val { font-size: 15px; font-weight: 600; } html body .bd-sidebar-row { border-color: var(--bkb-line); } html body .bd-sidebar-key i, html body .bd-meta-item i { color: var(--bkb-accent-text); } /* Side CTA: band-toned panel with the brand button — not a black box */ html body .pd-sidebar-cta, html body .bd-sidebar-cta { padding: 28px 24px; border-radius: 18px; background: radial-gradient(320px 160px at 100% 0%, var(--bkb-band-glow), transparent 70%), var(--bkb-band-bg); border: 1px solid var(--bkb-band-line); color: var(--bkb-band-text); } html body .pd-sidebar-cta p, html body .bd-sidebar-cta p { color: var(--bkb-band-text) !important; font-size: 15px; opacity: 1; } html body .pd-sidebar-cta a, html body .bd-sidebar-cta a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; border-radius: var(--bkb-radius-pill); background: var(--bkb-primary); color: #fff !important; font-family: var(--bkb-font-head); font-size: 12.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; box-shadow: var(--bkb-shadow-brand); } html body .pd-sidebar-cta a:hover, html body .bd-sidebar-cta a:hover { background: var(--bkb-primary-deep); color: #fff !important; } /* Related sections sit on the feature band; cards keep light-on-photo text */ html body .pd-related, html body .bd-related-full { background: radial-gradient(1100px 460px at 12% -10%, var(--bkb-band-glow), transparent 60%), var(--bkb-band-bg); border-top: 1px solid var(--bkb-band-line); } html body .pd-related-heading h2, html body .bd-related-heading h2 { font-family: var(--bkb-font-head); color: var(--bkb-band-heading) !important; } html body .pd-related-heading p, html body .bd-related-heading p { color: var(--bkb-band-muted) !important; } html body .bd-related-grid { gap: 22px; max-width: 1200px; margin: 0 auto; padding: 0 16px; } html body .bd-related-card { border-radius: 18px; box-shadow: var(--bkb-shadow); } html body .bd-related-card-title, html body .pd-related-title { color: #fff !important; } /* Blog article: comfortable reading measure and rhythm */ html body .bd-main { border-radius: 18px; box-shadow: var(--bkb-shadow-sm); } html body .bd-meta-bar { padding: 22px 36px 18px; border-color: var(--bkb-line); } html body .bd-lead { margin: 28px 36px 0; padding: 18px 22px; border-left: 4px solid var(--bkb-primary); background: var(--bkb-primary-soft) !important; font-family: var(--bkb-font-head); font-size: 18px; font-style: normal; font-weight: 500; line-height: 1.65; color: var(--bkb-ink) !important; } html body .bd-content-text { padding: 28px 36px 0; font-size: 17px; line-height: 1.85; color: var(--bkb-ink-soft) !important; } html body .bd-content-text h2, html body .bd-content-text h3 { color: var(--bkb-ink); } html body .bd-content-text blockquote { border-left-color: var(--bkb-primary); background: var(--bkb-primary-soft); color: var(--bkb-ink-soft); } @media (max-width: 575px) { html body .pd-description { padding: 22px 20px; } html body .pd-meta-row { grid-template-columns: 96px minmax(0, 1fr); padding: 12px 18px; } html body .bd-meta-bar, html body .bd-content-text { padding-left: 20px; padding-right: 20px; } html body .bd-lead { margin-left: 20px; margin-right: 20px; } } /* Special-project detail: its own gold/charcoal palette is retired in favour of the same crimson header, band-toned CTA and related band as projects */ html body .spd-meta-card-header { background: linear-gradient(135deg, var(--bkb-primary) 0%, var(--bkb-primary-deep) 100%) !important; border-bottom: 0 !important; } html body .spd-meta-key { color: var(--bkb-ink-dim) !important; } html body .spd-sidebar-cta { background: radial-gradient(320px 160px at 100% 0%, var(--bkb-band-glow), transparent 70%), var(--bkb-band-bg) !important; border: 1px solid var(--bkb-band-line) !important; } html body .spd-sidebar-cta::before { display: none; } html body .spd-sidebar-cta p { color: var(--bkb-band-text) !important; } html body .spd-sidebar-cta a { background: var(--bkb-primary) !important; } html body .spd-cta-icon, html body .spd-related-eyebrow, html body .spd-back-link { color: var(--bkb-accent-text) !important; } html body .spd-related { background: radial-gradient(1100px 460px at 12% -10%, var(--bkb-band-glow), transparent 60%), var(--bkb-band-bg) !important; padding-bottom: 72px; } html body .spd-related-heading h2 { color: var(--bkb-band-heading) !important; } html body .spd-related-heading p { color: var(--bkb-band-muted) !important; } html body .spd-related-always { background: linear-gradient(to top, rgba(22, 14, 22, 0.90) 0%, rgba(22, 14, 22, 0.35) 70%, transparent 100%) !important; } html body .spd-related-overlay { background: linear-gradient(160deg, rgba(110, 0, 18, 0.94), rgba(30, 14, 24, 0.96)) !important; } html body .spd-related-sub { color: #F3E3C4 !important; } html body .spd-cat-badge, html body .spd-related-badge { background: var(--bkb-primary) !important; } /* Projects page card hover: the legacy split-shadow panels are retired (section 7), which left the hover title + bullets sitting straight on the photo. Give them their own scrim, fade it in, and set readable type. */ .pf-card .nav-holder-h { position: relative; } .pf-card .nav-holder-h .text { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 24px !important; background: linear-gradient(to top, rgba(14, 12, 15, 0.94) 0%, rgba(14, 12, 15, 0.72) 50%, rgba(14, 12, 15, 0.25) 100%); opacity: 0; transition: opacity 0.4s ease; } .pf-card:hover .nav-holder-h .text, .pf-card .nav-holder-h:focus-within .text { opacity: 1; } .pf-card .nav-holder-h .text h3 { margin: 0; opacity: 1; font-family: var(--bkb-font-head); font-size: 18px !important; font-weight: 700; line-height: 1.3; letter-spacing: -0.2px; text-transform: none; color: #FFFFFF !important; } .pf-card .nav-holder-h .text ul { display: flex; flex-direction: column; gap: 6px; } .pf-card .nav-holder-h .text li { margin: 0; opacity: 1; font-family: var(--bkb-font-body); font-size: 13.5px; font-weight: 500; line-height: 1.45; letter-spacing: 0; color: rgba(255, 255, 255, 0.90) !important; } .pf-card .nav-holder-h .text li i { color: #E2C28A; } /* --------------------------------------------------------------------------- 20. READING TYPE (Standard / Dark) ------------------------------------------------------------------------- */ :root:not([data-theme="signature"]) .page-pro p { line-height: 1.75; } :root:not([data-theme="signature"]) .section-lede, :root:not([data-theme="signature"]) .heading-block > span.section-lede { font-size: 17.5px; line-height: 1.75; }