/* Styles for resources.html only, moved out of the page so browsers can cache them (#15). */
/* ══════════════════════════════════════════════════════════
LATO — LOCAL fonts
══════════════════════════════════════════════════════════ */
@font-face { font-family: 'Lato'; src: url('fonts/lato-light.woff2') format('woff2'), url('fonts/lato-light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/lato-lightitalic.woff2') format('woff2'), url('fonts/lato-lightitalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/lato-regular.woff2') format('woff2'), url('fonts/lato-regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/lato-bold.woff2') format('woff2'), url('fonts/lato-bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/lato-black.woff2') format('woff2'), url('fonts/lato-black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/lato-blackitalic.woff2') format('woff2'), url('fonts/lato-blackitalic.ttf') format('truetype'); font-weight: 900; font-style: italic; font-display: swap; }
/* ══════════════════════════════════════════════════════════
TOKENS
══════════════════════════════════════════════════════════ */
:root {
--prussian: #02263F;
--airforce: #5F99BB;
--veridian: #138E32;
--sky: #ADDDF6;
--alice: #F0F6FA;
--orange: #E6532B;
--yellow: #EEAD00;
--dark-grey: #38484F;
--light-grey: #ABB2B6;
--white: #FFFFFF;
--nav-h: 80px;
}
/* ══════════════════════════════════════════════════════════
RESET & BASE
══════════════════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--prussian);
color: var(--sky);
overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
.page-wrap { position: relative; z-index: 1; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 48px; }
/* ══════════════════════════════════════════════════════════
NAV BAR
══════════════════════════════════════════════════════════ */
.site-nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
font-family: 'Lato', sans-serif;
}
.nav-bar {
display: flex;
align-items: center;
height: var(--nav-h);
padding: 0;
position: relative;
transition: box-shadow 0.4s ease;
}
/* Blur + tint live on a layer BEHIND the nav content so logos/text stay crisp */
.nav-bar::before {
content: '';
position: absolute;
inset: 0;
background: rgba(2, 38, 63, 0.94);
backdrop-filter: blur(22px) saturate(1.6);
-webkit-backdrop-filter: blur(22px) saturate(1.6);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: 0;
}
.site-nav.scrolled .nav-bar::before { opacity: 1; }
.site-nav.scrolled .nav-bar {
box-shadow: 0 1px 0 rgba(95,153,187,0.12), 0 8px 40px rgba(0,0,0,0.45);
}
.nav-bar > * { position: relative; z-index: 1; }
.nav-logo { display: flex; align-items: center; flex-shrink: 0; margin-right: 12px; flex-direction: column; align-items: flex-start; gap: 3px; }
.nav-logo img { height: 26px; width: auto; display: block; }
.nav-logo-divider { width: 1px; height: 22px; background: rgba(255,255,255,0.25); margin: 0 20px; flex-shrink: 0; }
.nav-logo img.nav-logo-s2c { height: 10px; width: auto; display: block; opacity: 1; margin-top: 4px; position: relative; z-index: 2; }
.nav-item {
display: flex; align-items: center; gap: 4px;
padding: 8px 10px; border-radius: 8px;
font-size: 0.7rem; font-weight: 700;
color: rgba(255,255,255,0.92);
white-space: nowrap; cursor: pointer; letter-spacing: 0.03em;
transition: background 0.18s, color 0.18s;
border: none; background: none;
}
.nav-item .ti { font-size: 0.7rem; opacity: 0.6; transition: transform 0.22s; }
.nav-item:hover, .nav-item.on { color: #fff; background: rgba(95,153,187,0.14); }
.nav-item.on .ti-chevrons-down { transform: rotate(180deg); }
.nav-inner {
max-width: 1400px; margin: 0 auto; padding: 0 20px 0 24px;
width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between;
}
.nav-center {
display: flex; align-items: center; gap: 2px;
flex: 1; justify-content: center; margin: 0 6px;
}
.nav-divider { width: 1px; height: 18px; background: rgba(255,255,255,0.2); margin: 0 6px; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.icon-btn {
width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
border-radius: 8px; border: none; background: none;
color: rgba(255,255,255,0.7); font-size: 1.05rem; cursor: pointer;
transition: background 0.18s, color 0.18s;
}
.icon-btn:hover, .icon-btn.on { background: rgba(95,153,187,0.14); color: #fff; }
.lang-btn {
display: flex; align-items: center; gap: 5px; padding: 7px 12px;
border-radius: 30px; border: 1px solid rgba(95,153,187,0.25); background: none;
font-family: 'Lato', sans-serif; font-size: 0.72rem; font-weight: 700;
color: #fff; cursor: pointer; letter-spacing: 0.04em;
transition: all 0.18s;
}
.lang-btn:hover, .lang-btn.on { background: rgba(95,153,187,0.12); border-color: rgba(95,153,187,0.45); color: #fff; }
.cta-btn-secondary {
padding: 7px 10px; border-radius: 30px; border: none;
background: var(--sky);
box-shadow: none;
font-family: 'Lato', sans-serif; font-size: 0.72rem; font-weight: 700;
color: var(--prussian); cursor: pointer; letter-spacing: 0.03em; transition: all 0.2s; white-space: nowrap;
}
.cta-btn-secondary:hover { transform: translateY(-1px); background: #c8eaf8; box-shadow: 0 6px 20px rgba(173,221,246,0.35); color: var(--prussian); }
.cta-btn {
padding: 7px 10px; border-radius: 30px; border: none;
background: var(--orange);
box-shadow: none;
font-family: 'Lato', sans-serif; font-size: 0.72rem; font-weight: 700;
color: #fff; cursor: pointer; letter-spacing: 0.03em; transition: all 0.2s; white-space: nowrap;
}
.cta-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(230,83,43,0.55); }
.nav-mobile-toggle { display: none; flex-direction: column; gap: 5px; margin-left: auto; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-mobile-toggle span { display: block; width: 26px; height: 2px; background: #fff; border-radius: 2px; transition: all 0.25s; }
/* Mega panels */
.mega-panel {
display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
background: rgba(240, 246, 250, 0.98);
backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5);
border-top: 1px solid rgba(2,38,63,0.08); border-bottom: 1px solid rgba(2,38,63,0.06);
box-shadow: 0 24px 64px rgba(2,38,63,0.28); padding: 20px 40px 24px; animation: megaIn 0.2s ease;
}
.mega-panel.show { display: block; }
@keyframes megaIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.mega-cols { display: flex; gap: 26px; flex-wrap: wrap; max-width: 1160px; margin: 0 auto; justify-content: center; }
.mega-col { min-width: 140px; flex: 1; }
.col-label { font-family: 'Lato', sans-serif; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); margin-bottom: 9px; padding-bottom: 6px; border-bottom: 1px solid rgba(2,38,63,0.12); }
.mega-link { display: flex; align-items: center; gap: 8px; font-family: 'Lato', sans-serif; font-size: 0.8rem; font-weight: 700; color: rgba(2,38,63,0.72); padding: 4px 0; cursor: pointer; transition: color 0.15s; line-height: 1.4; }
.mega-link .ti { font-size: 0.82rem; color: var(--airforce); flex-shrink: 0; }
.mega-link:hover { color: var(--prussian); }
.mega-link.primary { color: var(--prussian); font-weight: 700; margin-bottom: 4px; }
.mega-link.primary .ti { color: var(--airforce); }
.url-hint { font-size: 0.6rem; color: rgba(2,38,63,0.4); font-family: 'Lato', sans-serif; margin: 1px 0 4px 20px; }
.tag { display: inline-block; font-size: 0.6rem; font-weight: 900; background: var(--orange); color: #fff; padding: 1px 6px; border-radius: 20px; margin-left: 4px; letter-spacing: 0.04em; }
.mega-footer { margin: 14px auto 0; padding-top: 11px; border-top: 1px solid rgba(2,38,63,0.1); display: flex; gap: 20px; flex-wrap: wrap; max-width: 1160px; justify-content: center; }
.mega-footer-link { display: flex; align-items: center; gap: 6px; font-family: 'Lato', sans-serif; font-size: 0.74rem; font-weight: 700; color: var(--airforce); cursor: pointer; transition: color 0.15s; }
.mega-footer-link:hover { color: var(--prussian); }
.mega-divider { width: 1px; height: 14px; background: rgba(2,38,63,0.2); align-self: center; }
#panel-platform .mega-footer { justify-content: flex-end; }
#panel-platform .mega-footer-link { color: rgba(2,38,63,0.4); font-weight: 400; font-size: 0.68rem; }
#panel-platform .mega-link { font-weight: 700; }
#panel-solutions .mega-link { font-weight: 700; }
#panel-solutions .mega-footer { justify-content: flex-end; }
#panel-solutions .mega-footer-link { color: rgba(2,38,63,0.4); font-weight: 400; font-size: 0.68rem; }
#panel-company .mega-link { font-weight: 700; }
#panel-company .mega-footer { justify-content: flex-end; }
#panel-company .mega-footer-link { color: rgba(2,38,63,0.4); font-weight: 400; font-size: 0.68rem; }
#panel-nd .mega-link { font-weight: 700; }
#panel-nd .mega-footer { justify-content: flex-end; }
#panel-nd .mega-footer-link { color: rgba(2,38,63,0.4); font-weight: 400; font-size: 0.68rem; }
#panel-resources .mega-link { font-weight: 700; }
#panel-resources .mega-footer { justify-content: flex-end; }
#panel-resources .mega-footer-link { color: rgba(2,38,63,0.4); font-weight: 400; font-size: 0.68rem; }
#panel-docs .mega-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 40px; max-width: 1180px; margin: 0 auto; }
#panel-docs .mega-link { font-weight: 700; }
#panel-docs .mega-link .ti { margin-top: 2px; align-self: flex-start; }
#panel-docs .mega-col:nth-child(5) { grid-column-start: 2; }
/* Search panel */
.search-panel { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 999; background: rgba(2, 38, 63, 0.97); backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5); border-top: 1px solid rgba(95,153,187,0.15); border-bottom: 1px solid rgba(95,153,187,0.1); box-shadow: 0 24px 64px rgba(0,0,0,0.55); padding: 24px 40px 28px; animation: megaIn 0.2s ease; }
.search-panel.show { display: block; }
.search-wrap { position: relative; }
.search-wrap .ti { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 1.1rem; color: rgba(95,153,187,0.6); }
.search-input { width: 100%; padding: 12px 16px 12px 42px; border-radius: 10px; border: 1px solid rgba(95,153,187,0.25); background: rgba(95,153,187,0.07); font-family: 'Lato', sans-serif; font-size: 1rem; font-weight: 400; color: #fff; outline: none; transition: border-color 0.2s; }
.search-input::placeholder { color: rgba(173,221,246,0.4); }
.search-input:focus { border-color: rgba(95,153,187,0.6); }
.search-hints { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.search-hint { font-family: 'Lato', sans-serif; font-size: 0.8rem; font-weight: 700; color: rgba(173,221,246,0.7); padding: 5px 14px; border-radius: 20px; background: rgba(95,153,187,0.1); border: 1px solid rgba(95,153,187,0.18); cursor: pointer; transition: all 0.15s; }
.search-hint:hover { background: rgba(95,153,187,0.2); color: #fff; }
/* Language panel */
.lang-panel { display: none; position: absolute; top: var(--nav-h); right: 40px; width: 480px; background: rgba(240,246,250,0.98); backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5); border: 1px solid rgba(2,38,63,0.08); border-radius: 14px; box-shadow: 0 24px 64px rgba(2,38,63,0.28); padding: 20px; animation: megaIn 0.2s ease; }
.lang-panel.show { display: block; }
.lang-label { font-family: 'Lato', sans-serif; font-size: 0.65rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(2,38,63,0.12); }
.lang-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.lang-opt { font-family: 'Lato', sans-serif; font-size: 0.88rem; font-weight: 400; color: rgba(2,38,63,0.72); padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: all 0.15s; }
.lang-opt:hover { background: rgba(95,153,187,0.14); color: var(--prussian); }
.lang-opt.active { color: var(--prussian); font-weight: 700; background: rgba(95,153,187,0.18); }
/* Nav inline search */
.nav-search-wrap { position: relative; display: flex; align-items: center; }
.nav-search-wrap .ti-search { position: absolute; left: 10px; font-size: 0.82rem; color: rgba(173,221,246,0.45); pointer-events: none; }
.nav-search-input { width: 98px; padding: 7px 10px 7px 27px; border-radius: 30px; border: 1px solid rgba(95,153,187,0.22); background: rgba(95,153,187,0.07); font-family: 'Lato', sans-serif; font-size: 0.72rem; font-weight: 700; color: #fff; outline: none; transition: width 0.25s ease, border-color 0.2s, background 0.2s; }
.nav-search-input::placeholder { color: #F0F8FF; }
.nav-search-input:focus { width: 240px; border-color: rgba(95,153,187,0.55); background: rgba(95,153,187,0.12); }
.lang-opt .ti { font-size: 0.75rem; margin-right: 4px; }
/* ══════════════════════════════════════════════════════════
PAGE STRUCTURE
══════════════════════════════════════════════════════════ */
.page-spacer { height: var(--nav-h); }
.hero-breadcrumb { position: absolute; top: calc(var(--nav-h) / 2 + 50px); left: 50%; transform: translateX(-50%); width: 100%; max-width: 1400px; padding: 0 24px 0 40px; z-index: 900; display: flex; align-items: center; gap: 8px; font-family: 'Lato', sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: none; color: rgba(173,221,246,0.7); }
/* ══════════════════════════════════════════════════════════
GRADIENT TEXT UTILITIES (matching about-v2)
══════════════════════════════════════════════════════════ */
.grad-fire {
background: linear-gradient(95deg, #E6532B 0%, #c44420 38%, #ADDDF6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.grad-ice {
background: linear-gradient(95deg, #ADDDF6 0%, #5F99BB 55%, #ffffff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.fancy-word {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 300;
font-style: italic;
font-size: 1.18em;
letter-spacing: -0.01em;
}
/* ══════════════════════════════════════════════════════════
BLOG HERO — full-bleed with background image
══════════════════════════════════════════════════════════ */
.blog-hero {
position: relative;
min-height: 720px;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
}
.blog-hero-bg {width: 100%; height: 100%; max-width: none; object-fit: cover;
position: absolute;
inset: 0;
object-fit: cover;
object-position: center center;
z-index: 0;
}
.blog-hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
180deg,
rgba(10,10,10,0.05) 0%,
rgba(10,10,10,0.05) 25%,
rgba(10,5,0,0.1) 55%,
rgba(2,20,35,0.38) 80%,
rgba(2,38,63,0.65) 100%
);
}
.blog-hero-body {
position: relative;
z-index: 2;
padding: 0 0 0;
}
.blog-hero-inner {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
padding-bottom: 36px;
flex-wrap: wrap;
}
/* min-width:0 + a capped max-width keep the copy column from taking its
full max-content width (the 106px h1), which would otherwise push the
brochure image off the right edge of the viewport. */
.blog-hero-copy { flex: 1 1 500px; min-width: 0; max-width: 620px; }
.hero-brochures {
flex: 0 1 545px;
max-width: 545px;
align-self: center;
/* space-between anchors it to the container's right edge; translateX
nudges it back toward the heading without disturbing the flow */
transform: translateX(-28px);
pointer-events: none;
}
.hero-brochures img {
width: 100%; height: auto;
filter: drop-shadow(0 22px 42px rgba(2,20,35,0.45));
}
.blog-eyebrow {
display: block;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
color: #ffffff;
margin-bottom: 28px;
}
.blog-hero-heading {
font-family: 'Lato', sans-serif;
font-size: clamp(58px, 8.5vw, 106px);
font-weight: 900;
line-height: 0.88;
letter-spacing: -0.035em;
margin: 0;
}
.blog-hero-right {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 14px;
padding-bottom: 6px;
max-width: 340px;
}
.blog-hero-desc {
font-size: 0.95rem;
font-weight: 300;
color: rgba(173,221,246,0.65);
line-height: 1.65;
text-align: left;
}
/* ── HERO CTAs ── */
.hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 26px; border-radius: 30px; border: none;
background: var(--orange); color: #fff; text-decoration: none;
font-family: 'Lato', sans-serif; font-size: 0.9rem; font-weight: 700;
letter-spacing: 0.03em; cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.hero-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(230,83,43,0.55); color: #fff; }
.hero-btn .ti { font-size: 0.85rem; }
.hero-btn.alt { background: var(--sky); color: var(--prussian); }
.hero-btn.alt:hover { background: #c8eaf8; box-shadow: 0 6px 20px rgba(173,221,246,0.35); color: var(--prussian); }
.hero-btn.ghost {
padding: 11px 25px; background: rgba(2,38,63,0.42);
border: 1px solid rgba(173,221,246,0.4); color: var(--sky);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero-btn.ghost:hover { background: rgba(95,153,187,0.2); border-color: var(--sky); color: #fff; box-shadow: none; }
.subscribe-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 22px;
border-radius: 8px;
border: 1px solid rgba(95,153,187,0.35);
background: rgba(2,38,63,0.45);
backdrop-filter: blur(8px);
font-family: 'Lato', sans-serif;
font-size: 0.85rem;
font-weight: 700;
color: rgba(173,221,246,0.9);
cursor: pointer;
letter-spacing: 0.04em;
transition: all 0.2s;
white-space: nowrap;
}
.subscribe-btn:hover {
background: rgba(95,153,187,0.18);
border-color: rgba(95,153,187,0.6);
color: #fff;
}
/* ══════════════════════════════════════════════════════════
BLOG CONTENT AREA
══════════════════════════════════════════════════════════ */
.blog-content-area {
padding: 48px 0 48px;
background: var(--prussian);
}
/* ── FEATURED ARTICLE ── */
.featured-article {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-radius: 20px;
overflow: hidden;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(95,153,187,0.14);
margin-bottom: 40px;
transition: border-color 0.25s;
cursor: pointer;
}
.featured-article:hover { border-color: rgba(95,153,187,0.38); }
.featured-article:hover .featured-img-inner { transform: scale(1.03); }
.featured-img {
position: relative;
overflow: hidden;
min-height: 420px;
}
.featured-img-inner {
position: absolute;
inset: 0;
transition: transform 0.55s ease;
}
.img-featured {
background-image: url('images/blog-webp-images/network-inventory-article-image.webp');
background-size: cover;
background-position: center center;
}
.img-product {
background:
radial-gradient(ellipse at 70% 30%, rgba(173,221,246,0.4) 0%, transparent 60%),
radial-gradient(ellipse at 20% 70%, rgba(95,153,187,0.5) 0%, transparent 55%),
linear-gradient(160deg, #011a2e 0%, #02263F 60%, #013048 100%);
}
.img-research {
background-image: url('images/blog-webp-images/leased-line-billing.webp');
background-size: cover;
background-position: center;
}
.img-industry {
background-image: url('images/blog-webp-images/ai-brain-telecom.webp');
background-size: cover;
background-position: center;
}
.img-tech {
background-image: url('images/blog-webp-images/network-outages.webp');
background-size: cover;
background-position: center;
}
.img-dark {
background:
radial-gradient(ellipse at 30% 60%, rgba(230,83,43,0.4) 0%, transparent 60%),
radial-gradient(ellipse at 75% 25%, rgba(95,153,187,0.35) 0%, transparent 55%),
linear-gradient(120deg, #020810 0%, #01131f 50%, #011528 100%);
}
.img-geo {
background-image: url('images/blog-webp-images/service-inventory-s2c.webp');
background-size: cover;
background-position: center;
}
/* Blurred variant of .img-geo: the photo moves to a ::before layer under
the .wp-shot so the brochure fan stays sharp while the background reads
as a soft wash like the gradient tiles. inset:-8% hides the blur fringe. */
.img-geo-blur { background: #011a2e; }
.img-geo-blur::before {
content: ''; position: absolute; inset: -8%; z-index: 0;
background: url('images/blog-webp-images/service-inventory-s2c.webp') center / cover no-repeat;
filter: blur(14px);
}
.img-geo-blur .wp-shot { z-index: 1; }
.img-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(2,38,63,0.25) 0%, rgba(2,38,63,0.08) 100%);
}
/* ── EVENT IMAGE PANELS ── */
.img-mwc {
background:
radial-gradient(ellipse at 72% 28%, rgba(230,83,43,0.5) 0%, transparent 58%),
radial-gradient(ellipse at 18% 75%, rgba(95,153,187,0.45) 0%, transparent 55%),
linear-gradient(160deg, #011a2e 0%, #02263F 60%, #013048 100%);
}
.img-dtw {
background:
radial-gradient(ellipse at 25% 30%, rgba(173,221,246,0.35) 0%, transparent 60%),
radial-gradient(ellipse at 78% 70%, rgba(19,142,150,0.4) 0%, transparent 55%),
linear-gradient(150deg, #01131f 0%, #02263F 55%, #024a63 100%);
}
.img-gold {
background:
radial-gradient(ellipse at 70% 65%, rgba(238,173,0,0.4) 0%, transparent 58%),
radial-gradient(ellipse at 20% 25%, rgba(230,83,43,0.3) 0%, transparent 55%),
linear-gradient(140deg, #020810 0%, #01131f 50%, #012237 100%);
}
/* mirrored .img-gold: glows swap corners, diagonal reversed. Used on the
Partners tile so the shared class stays untouched elsewhere. */
.img-gold-flip {
background:
radial-gradient(ellipse at 30% 35%, rgba(238,173,0,0.4) 0%, transparent 58%),
radial-gradient(ellipse at 80% 75%, rgba(230,83,43,0.3) 0%, transparent 55%),
linear-gradient(320deg, #020810 0%, #01131f 50%, #012237 100%);
}
.event-mark {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: clamp(44px, 5vw, 68px);
letter-spacing: -0.03em;
color: rgba(255,255,255,0.94);
text-shadow: 0 4px 30px rgba(2,38,63,0.5);
}
.event-mark small {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(173,221,246,0.85);
}
/* Floating visual element inside image panels */
.img-icon {
position: absolute;
bottom: 28px;
right: 28px;
width: 56px;
height: 56px;
border-radius: 14px;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.12);
display: flex;
align-items: center;
justify-content: center;
gap: 0;
color: #fff;
backdrop-filter: blur(8px);
}
.img-icon i { display: none; }
.img-icon::before,
.img-icon::after {
content: '';
width: 12px;
height: 12px;
border-right: 2.5px solid currentColor;
border-bottom: 2.5px solid currentColor;
transform: rotate(-45deg);
animation: chevronPulseRight 1.6s ease-in-out infinite;
}
.img-icon::before { margin-right: -5px; animation-delay: 0s; }
.img-icon::after { animation-delay: 0.2s; }
@keyframes chevronPulseRight {
0%, 100% { opacity: 0.15; }
50% { opacity: 0.9; }
}
/* section-transition scroll chevron (same motif as index.html, repeated at each section boundary) */
.sec-chev { position: relative; height: 0; z-index: 5; pointer-events: none; color: rgba(2,38,63,0.45); }
.sec-chev.on-dark { color: rgba(255,255,255,0.6); }
.sec-chev.on-light { color: rgba(2,38,63,0.45); }
.sec-chev span { position: absolute; left: 50%; width: 16px; height: 16px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: translateX(-50%) rotate(45deg); animation: chevronPulseDown 1.6s ease-in-out infinite; }
.sec-chev span:nth-child(1) { top: -44px; }
.sec-chev span:nth-child(2) { top: -34px; animation-delay: 0.2s; }
:root[data-theme="dark"] .sec-chev.on-light { color: rgba(173,221,246,0.55); }
@keyframes chevronPulseDown {
0%, 100% { opacity: 0.15; }
50% { opacity: 0.9; }
}
/* Resource type sections (Brochures / Whitepapers / Case Studies) */
#featured, #brochures, #whitepapers, #case-studies, #library, #blog-topics { scroll-margin-top: var(--nav-h); }
.res-zone { padding: 72px 0 80px; }
.res-zone.dark { background: var(--prussian); }
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 8px; }
@media (max-width: 920px) { .res-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .res-grid { grid-template-columns: 1fr; } }
.img-count {
position: absolute;
top: 20px;
left: 20px;
font-size: 0.65rem;
font-weight: 900;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.featured-body {
padding: 48px 48px 48px 44px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.article-cat {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.68rem;
font-weight: 900;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--orange);
margin-bottom: 18px;
}
.article-cat::before {
content: '';
display: block;
width: 18px;
height: 2px;
background: var(--orange);
border-radius: 2px;
}
.featured-headline {
font-size: clamp(1.6rem, 2.4vw, 2.2rem);
font-weight: 900;
letter-spacing: -0.025em;
line-height: 1.15;
color: #fff;
margin-bottom: 20px;
flex: 1;
}
.featured-headline:hover { color: var(--sky); }
.featured-body .article-cat::before { display: none; }
.featured-excerpt {
font-size: 1rem;
font-weight: 300;
color: var(--sky);
line-height: 1.7;
margin-bottom: 32px;
}
.article-meta {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.meta-author {
display: flex;
align-items: center;
gap: 9px;
}
.author-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(95,153,187,0.25);
border: 1px solid rgba(95,153,187,0.3);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 900;
color: var(--sky);
flex-shrink: 0;
overflow: hidden;
}
.author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-name-text {
font-size: 0.82rem;
font-weight: 700;
color: rgba(173,221,246,0.8);
}
.meta-dot {
width: 3px; height: 3px;
border-radius: 50%;
background: rgba(95,153,187,0.35);
}
.meta-date, .meta-read {
font-size: 0.8rem;
font-weight: 300;
color: var(--sky);
}
.read-link {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 0.85rem;
font-weight: 700;
color: var(--airforce);
letter-spacing: 0.04em;
transition: color 0.18s, gap 0.18s;
margin-top: 24px;
}
.read-link:hover { color: #fff; gap: 10px; }
/* ── MIXED GRID ── */
.blog-grid-section {
margin-bottom: 40px;
}
.section-rule {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 28px;
}
.section-rule-label {
font-size: 0.65rem;
font-weight: 900;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(173,221,246,0.35);
white-space: nowrap;
}
.section-rule-line {
flex: 1;
height: 1px;
background: rgba(95,153,187,0.14);
}
/* 2-column asymmetric row */
.row-asymmetric {
display: grid;
grid-template-columns: 5fr 4fr;
gap: 24px;
margin-bottom: 24px;
}
.row-asymmetric-right {
display: grid;
grid-template-columns: 4fr 5fr;
gap: 24px;
margin-bottom: 24px;
}
/* 3-column even row */
.row-three {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 24px;
}
/* ── ARTICLE CARD — standard ── */
.article-card {
border-radius: 16px;
overflow: hidden;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(95,153,187,0.12);
transition: border-color 0.25s, transform 0.25s;
cursor: pointer;
display: flex;
flex-direction: column;
}
.article-card:hover {
border-color: rgba(95,153,187,0.32);
transform: translateY(-3px);
}
.article-card:hover .card-img-inner { transform: scale(1.05); }
.card-img {
position: relative;
overflow: hidden;
}
.card-img-inner {
transition: transform 0.55s ease;
}
.wp-shot {
position: absolute; inset: 0;
background-size: contain; background-position: center 50%; background-repeat: no-repeat;
}
.card-img-tall { height: 280px; }
.card-img-mid { height: 200px; }
.card-img-short { height: 200px; }
.card-body {
padding: 24px 28px 28px;
display: flex;
flex-direction: column;
flex: 1;
}
.card-cat {
font-size: 0.62rem;
font-weight: 900;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--orange);
margin-bottom: 10px;
}
.card-headline {
font-size: 16px;
font-weight: 900;
letter-spacing: -0.018em;
line-height: 1.25;
color: #fff;
margin-bottom: 12px;
transition: color 0.18s;
}
.article-card:hover .card-headline { color: var(--sky); }
.card-excerpt {
font-size: 0.88rem;
font-weight: 300;
color: rgba(173,221,246,0.55);
line-height: 1.65;
margin-bottom: 20px;
flex: 1;
}
.card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
/* hairline strengthened 07/09/2026: at 0.1 it was invisible on the
dark zone, and dropping the meta label left nothing to anchor it */
border-top: 1px solid rgba(95,153,187,0.26);
padding-top: 16px;
margin-top: auto;
}
.card-meta {
display: flex;
align-items: center;
gap: 8px;
}
.card-date {
font-size: 0.77rem;
font-weight: 300;
color: rgba(173,221,246,0.38);
}
.card-read {
font-size: 0.77rem;
font-weight: 700;
color: var(--sky);
display: flex;
align-items: center;
gap: 4px;
transition: color 0.18s;
/* holds the right edge whether or not the card carries a meta label */
margin-left: auto;
}
.article-card:hover .card-read { color: #ffffff; }
/* ── TALL CARD (no image, text-led) ── */
.article-card-text {
border-radius: 16px;
background: rgba(95,153,187,0.06);
border: 1px solid rgba(95,153,187,0.12);
padding: 36px 32px;
display: flex;
flex-direction: column;
transition: border-color 0.25s, transform 0.25s;
cursor: pointer;
}
.article-card-text:hover {
border-color: rgba(95,153,187,0.3);
transform: translateY(-3px);
}
.article-card-text .card-cat { margin-bottom: 12px; }
.article-card-text .card-headline {
font-size: clamp(1.1rem, 1.6vw, 1.45rem);
margin-bottom: 16px;
}
.article-card-text .card-excerpt { flex: 1; }
.article-card-text .card-footer {
margin-top: 24px;
}
/* ── OVERSIZE SECTION HEADINGS ── */
.blog-eyebrow {
font-family: 'Lato', sans-serif;
font-size: clamp(0.65rem, 1.1vw, 0.85rem);
font-weight: 900;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--orange);
display: block;
margin-bottom: 12px;
}
.blog-oversize-heading {
font-family: 'Lato', sans-serif;
font-size: clamp(3rem, 7vw, 7rem);
font-weight: 900;
line-height: 0.92;
letter-spacing: -0.03em;
color: #ffffff;
margin-bottom: 48px;
}
.blog-oversize-heading em {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-weight: 300;
font-size: 1.15em;
}
.blog-oversize-heading.prussian-text { color: var(--prussian); }
/* ── LIGHT ZONE (Latest + More from VC4) ── */
.blog-light-zone {
background: var(--alice);
padding: 48px 0 80px;
}
.blog-light-zone .section-rule-label {
color: rgba(2,38,63,0.35);
}
.blog-light-zone .section-rule-line {
background: rgba(2,38,63,0.1);
}
.blog-light-zone .article-card {
background: #fff;
border-color: rgba(2,38,63,0.09);
box-shadow: 0 2px 12px rgba(2,38,63,0.05);
}
.blog-light-zone .article-card:hover {
border-color: rgba(2,38,63,0.2);
}
.blog-light-zone .card-headline {
color: var(--prussian);
}
.blog-light-zone .article-card:hover .card-headline {
color: var(--airforce);
}
.blog-light-zone .card-excerpt {
color: var(--dark-grey);
}
.blog-light-zone .card-footer {
border-top-color: rgba(2,38,63,0.16);
}
.blog-light-zone .card-date {
color: rgba(2,38,63,0.4);
}
.blog-light-zone .card-read {
color: var(--airforce);
}
.blog-light-zone .article-card:hover .card-read {
color: var(--prussian);
}
.blog-light-zone .article-card-text {
background: #fff;
border-color: rgba(2,38,63,0.09);
box-shadow: 0 2px 12px rgba(2,38,63,0.05);
}
.blog-light-zone .article-card-text:hover {
border-color: rgba(2,38,63,0.2);
}
.blog-sky-zone { background: #ffffff !important; }
.blog-sky-zone .section-rule-label { color: rgba(2,38,63,0.45); }
.blog-sky-zone .section-rule-line { background: rgba(2,38,63,0.15); }
.blog-sky-zone .article-card { background: #fff; border-color: rgba(2,38,63,0.1); }
.blog-sky-zone .article-card:hover { border-color: rgba(2,38,63,0.25); }
.blog-sky-zone .article-card-text { background: #fff; border-color: rgba(2,38,63,0.1); }
.blog-sky-zone .article-card-text:hover { border-color: rgba(2,38,63,0.25); }
.blog-sky-zone .load-more-btn { border-color: rgba(2,38,63,0.2); color: var(--prussian); }
.blog-sky-zone .load-more-btn:hover { background: var(--prussian); color: #fff; border-color: var(--prussian); }
.newsletter-strip {
margin: 48px 0;
border-radius: 18px;
position: relative;
overflow: hidden;
padding: 52px 56px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
}
.newsletter-strip::before {
content: '';
position: absolute;
inset: 0;
/* same artwork as the hero section. 150% / 8% 92% lands the dark
navy corner under the copy and keeps the orange ribbon on the
right, so white text measures 7.07:1 and needs NO scrim. */
background-image: url('images/orange-flame-wave-gradient.webp');
background-size: 150%;
background-position: 8% 92%;
}
.newsletter-strip > * { position: relative; z-index: 1; }
.newsletter-left {}
.newsletter-label {
font-family: 'Lato', sans-serif;
font-size: clamp(0.65rem, 1.1vw, 0.85rem);
font-weight: 900;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--orange);
display: block;
margin-bottom: 12px;
}
.newsletter-heading {
font-family: 'Lato', sans-serif;
font-size: clamp(2.2rem, 5vw, 4.5rem);
font-weight: 900;
line-height: 0.92;
letter-spacing: -0.03em;
color: #fff;
margin-bottom: 16px;
}
.newsletter-heading em {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-weight: 300;
font-size: 1.15em;
}
.newsletter-sub {
font-size: 0.9rem;
font-weight: 300;
color: #ffffff;
line-height: 1.6;
max-width: 420px;
}
.newsletter-form {
display: flex;
gap: 10px;
align-items: center;
flex-shrink: 0;
}
.newsletter-input {
padding: 12px 22px;
border-radius: 30px;
border: 1px solid rgba(255,255,255,0.35);
background: rgba(255,255,255,0.12);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-family: 'Lato', sans-serif;
font-size: 0.9rem;
font-weight: 700;
color: #fff;
outline: none;
width: 260px;
transition: border-color 0.2s, background 0.2s;
}
.newsletter-input::placeholder { color: rgba(255,255,255,0.6); }
.newsletter-input:focus { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.18); }
.newsletter-submit {
padding: 12px 28px;
border-radius: 30px;
border: none;
background: var(--orange);
/* the ribbon behind is orange too, so the button edge would vanish
(1.52:1). A white hairline reads 3.7:1 on the button and 5.6:1
on the artwork, which fixes the boundary without any darkening. */
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55);
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Lato', sans-serif;
font-size: 0.9rem;
font-weight: 700;
color: #fff;
cursor: pointer;
letter-spacing: 0.03em;
transition: all 0.2s;
white-space: nowrap;
}
.newsletter-submit:hover { background: #c8461f; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.8); }
/* ── LOAD MORE ── */
.load-more-row {
text-align: center;
padding-top: 16px;
}
.load-more-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 28px;
border-radius: 30px;
border: none;
background: var(--alice);
box-shadow: 0 4px 14px rgba(2,38,63,0.10);
font-family: 'Lato', sans-serif;
font-size: 0.88rem;
font-weight: 700;
color: var(--prussian);
cursor: pointer;
letter-spacing: 0.03em;
transition: all 0.2s;
}
.load-more-btn:hover {
transform: translateY(-2px);
background: #dde8f0;
box-shadow: 0 8px 24px rgba(2,38,63,0.18);
color: var(--prussian);
}
/* sky variant, scoped to the one button so the LinkedIn load-more stays
as is; flat, and holds sky in dark theme too (which otherwise recolours
.load-more-btn). */
/* sky GHOST: transparent with a sky outline and sky text on the prussian
zone (~11:1), filling sky with prussian text on hover. Flat. */
.load-more-btn.sky, :root[data-theme="dark"] .load-more-btn.sky { background: transparent; color: var(--sky); border: 1.5px solid var(--sky); box-shadow: none; }
.load-more-btn.sky:hover, :root[data-theme="dark"] .load-more-btn.sky:hover { background: var(--sky); color: var(--prussian); border-color: var(--sky); box-shadow: none; }
/* airforce GHOST variant (LinkedIn follow): transparent, airforce outline,
prussian text (14:1 on the light zone), fills airforce on hover (5:1).
Flat. Dark theme swaps the text to sky so it reads on the flipped zone. */
.load-more-btn.air { background: transparent; color: var(--prussian); border: 1.5px solid var(--airforce); box-shadow: none; }
.load-more-btn.air:hover { background: var(--airforce); color: var(--prussian); border-color: var(--airforce); box-shadow: none; }
:root[data-theme="dark"] .load-more-btn.air { background: transparent; color: var(--sky); border: 1.5px solid rgba(95,153,187,0.7); box-shadow: none; }
:root[data-theme="dark"] .load-more-btn.air:hover { background: var(--airforce); color: var(--prussian); border-color: var(--airforce); box-shadow: none; }
/* short lead under a section heading */
.res-lead { max-width: 560px; margin: 0 0 40px; font-size: 1rem; font-weight: 300; line-height: 1.65; color: rgba(173,221,246,0.7); }
/* -- Full footer -- */
.site-footer-full {
background: #011628;
font-family: 'Lato', sans-serif;
position: relative;
z-index: 1;
}
.footer-top {
padding: 72px 0 56px;
border-top: 1px solid rgba(95,153,187,0.15);
}
.footer-grid {
display: grid;
grid-template-columns: 1.6fr repeat(5, 1fr);
gap: 40px;
}
.footer-logo { height: 36px; width: auto; margin-bottom: 12px; }
.footer-logo-s2c { height: 12px; width: auto; margin-bottom: 20px; display: block; }
.footer-tagline {
font-size: 0.82rem;
font-weight: 300;
color: rgba(255,255,255,0.92);
line-height: 1.7;
margin-bottom: 20px;
}
.footer-contact {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 24px;
}
.footer-contact a {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.82rem;
font-weight: 400;
color: rgba(255,255,255,0.92);
transition: color 0.18s;
}
.footer-contact a:hover { color: #f0f8ff; }
.footer-contact a .ti { font-size: 0.85rem; color: #ffffff; flex-shrink: 0; }
.footer-social {
display: flex;
gap: 10px;
}
.social-icon-btn {
width: 36px; height: 36px;
border-radius: 8px;
border: 1px solid rgba(240,248,255,0.2);
background: rgba(240,248,255,0.05);
display: flex; align-items: center; justify-content: center;
color: #ffffff;
font-size: 1rem;
transition: all 0.18s;
cursor: pointer;
}
.social-icon-btn:hover {
background: rgba(240,248,255,0.14);
border-color: rgba(240,248,255,0.5);
color: #fff;
}
.footer-login-btn {
display: inline-flex; align-items: center;
margin-top: 12px; padding: 8px 20px;
border-radius: 30px;
border: 1px solid rgba(95,153,187,0.22);
background: rgba(95,153,187,0.07);
font-family: 'Lato', sans-serif; font-size: 0.72rem; font-weight: 700;
color: #fff; letter-spacing: 0.04em; cursor: pointer;
transition: background 0.2s, border-color 0.2s;
}
.footer-login-btn:hover { background: rgba(95,153,187,0.14); border-color: rgba(95,153,187,0.45); }
.footer-col-heading {
font-size: 0.62rem;
font-weight: 900;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--orange);
margin-bottom: 14px;
margin-top: 0;
}
.footer-col ul {
list-style: none;
padding: 0; margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.footer-col ul li a {
font-size: 0.85rem;
font-weight: 300;
color: rgba(255,255,255,0.92);
transition: color 0.18s;
line-height: 1.4;
}
.footer-col ul li a:hover { color: #fff; }
.footer-creds .container {
display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
gap: 14px 36px; padding-top: 26px; padding-bottom: 26px;
border-top: 1px solid rgba(255,255,255,0.1);
}
.footer-cred {
display: inline-flex; align-items: center; gap: 9px;
font-family: 'Lato', sans-serif; font-size: 0.78rem; font-weight: 400;
letter-spacing: 0.05em; color: rgba(255,255,255,0.7);
}
.footer-cred .ti { font-size: 1.05rem; color: var(--orange); }
.footer-bottom {
border-top: 1px solid rgba(95,153,187,0.1);
padding: 20px 0;
}
.footer-bottom-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.footer-copy {
font-size: 0.78rem;
font-weight: 400;
color: rgba(255,255,255,0.7);
}
.footer-legal {
display: flex;
gap: 24px;
}
.footer-legal a {
font-size: 0.78rem;
font-weight: 400;
letter-spacing: 0.05em;
color: rgba(255,255,255,0.7);
transition: color 0.2s;
}
.footer-legal a:hover { color: #f0f8ff; }
@media (max-width: 1100px) {
.footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 36px; }
}
@media (max-width: 680px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
.footer-top { padding: 48px 0 40px; }
}
@media (max-width: 420px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* ══════════════════════════════════════════════════════════
FLIPBOOK — open brochure
══════════════════════════════════════════════════════════ */
.book-sub {
font-size: 1rem; font-weight: 300; color: var(--dark-grey);
line-height: 1.7; max-width: 580px; margin: -16px 0 48px;
}
.flipbook-wrap { display: flex; align-items: center; justify-content: center; gap: 28px; }
.flip-arrow {
width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0;
border: 1px solid rgba(2,38,63,0.18); background: #fff; color: var(--prussian);
font-size: 1.25rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 14px rgba(2,38,63,0.10);
/* same fast-out curve as the booklet's closing slide, so the controls
feel as responsive as the pages they turn */
transition: background 0.25s, color 0.25s, box-shadow 0.25s, transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.flip-arrow:hover:not(:disabled) { background: var(--prussian); color: #fff; transform: translateY(-3px); box-shadow: 0 10px 24px rgba(2,38,63,0.22); }
.flip-arrow:disabled { opacity: 0.25; cursor: default; }
.book {
position: relative; width: 100%; max-width: 860px;
/* shortened 07/09/2026: the spread was reading too tall, and the
right-hand page had ~200px of dead white under its link list */
height: clamp(430px, 49vw, 545px); perspective: 2600px;
filter: drop-shadow(0 30px 40px rgba(2,38,63,0.25));
}
.bpage, .leaf { position: absolute; top: 0; width: 50%; height: 100%; }
.bpage { background: #fff; overflow: hidden; }
.page-base {
left: 0; border-radius: 14px 0 0 14px;
box-shadow:
0 3px 0 -1px #fbfdfe, -2px 3px 0 -1px #fbfdfe, 0 3px 0 0 rgba(2,38,63,0.16), -2px 3px 0 0 rgba(2,38,63,0.16),
0 7px 0 -1px #f5f9fc, -5px 7px 0 -1px #f5f9fc, 0 7px 0 0 rgba(2,38,63,0.12), -5px 7px 0 0 rgba(2,38,63,0.12),
0 11px 0 -1px #eff5f9, -8px 11px 0 -1px #eff5f9, 0 11px 0 0 rgba(2,38,63,0.09), -8px 11px 0 0 rgba(2,38,63,0.09);
}
.page-base-r {
left: 50%; border-radius: 0 14px 14px 0;
box-shadow:
0 3px 0 -1px #fbfdfe, 2px 3px 0 -1px #fbfdfe, 0 3px 0 0 rgba(2,38,63,0.16), 2px 3px 0 0 rgba(2,38,63,0.16),
0 7px 0 -1px #f5f9fc, 5px 7px 0 -1px #f5f9fc, 0 7px 0 0 rgba(2,38,63,0.12), 5px 7px 0 0 rgba(2,38,63,0.12),
0 11px 0 -1px #eff5f9, 8px 11px 0 -1px #eff5f9, 0 11px 0 0 rgba(2,38,63,0.09), 8px 11px 0 0 rgba(2,38,63,0.09);
}
.leaf {
left: 50%; transform-origin: left center; transform-style: preserve-3d;
/* 1.2s to match the mini booklet on service2create.html; if this changes,
the settle() timeout in the flipbook script must change with it */
transition: transform 1.2s cubic-bezier(0.35, 0.1, 0.25, 1); cursor: pointer;
}
.leaf.flipped { transform: rotateY(-180deg); }
.leaf .face {
position: absolute; inset: 0; background: #fff; overflow: hidden;
backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.leaf .front { border-radius: 3px 14px 14px 3px; }
.leaf .back { transform: rotateY(180deg); border-radius: 14px 3px 3px 14px; }
.pg {
position: absolute; inset: 0; display: flex; flex-direction: column;
padding: clamp(20px, 3.6vw, 42px) clamp(18px, 3.2vw, 38px);
font-family: 'Lato', sans-serif; color: var(--prussian); background: #fdfefe;
}
.pg-r::after, .pg-l::after {
content: ''; position: absolute; top: 0; bottom: 0; width: 44px; pointer-events: none;
}
.pg-r::after { left: 0; background: linear-gradient(90deg, rgba(2,38,63,0.12), transparent); }
.pg-l::after { right: 0; background: linear-gradient(270deg, rgba(2,38,63,0.12), transparent); }
.pg-eyebrow { font-size: 0.6rem; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); margin-bottom: 12px; }
.pg-title { font-size: clamp(0.95rem, 2vw, 1.45rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 12px; }
.pg-title em, .pg-cover-title em { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 300; font-size: 1.15em; }
.pg-text { font-size: clamp(0.66rem, 1.1vw, 0.84rem); font-weight: 300; line-height: 1.6; color: var(--dark-grey); }
.pg-text strong { color: var(--prussian); font-weight: 700; }
.pg-list { margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }
.pg-list li { display: flex; align-items: center; gap: 8px; font-size: clamp(0.66rem, 1.1vw, 0.84rem); font-weight: 700; color: var(--prussian); }
.pg-list li .ti { color: var(--orange); font-size: 0.75rem; flex-shrink: 0; }
.pg-link {
display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
font-size: clamp(0.64rem, 1vw, 0.8rem); font-weight: 700; color: var(--airforce); transition: color 0.18s, gap 0.18s;
}
.pg-link:hover { color: var(--prussian); gap: 9px; }
.pg-num { margin-top: auto; padding-top: 12px; font-size: 0.62rem; font-weight: 700; color: rgba(2,38,63,0.35); }
.pg-r .pg-num { text-align: right; }
.pg-cover {
background:
radial-gradient(ellipse at 75% 20%, rgba(95,153,187,0.4) 0%, transparent 60%),
radial-gradient(ellipse at 20% 85%, rgba(230,83,43,0.3) 0%, transparent 55%),
linear-gradient(155deg, #011a2e 0%, #02263F 60%, #013048 100%);
color: #fff; justify-content: center;
}
/* Front cover only (the back cover keeps the .pg-cover gradient). Photo
1907018656, MIRRORED copy (orange bands on the right, navy wedge on the
left) anchored at 35%: measured worst-case luminance behind the copy is
0.017, so white text clears 4.5:1 with NO scrim, and 99% of the orange
still fills the right-hand corners. */
.pg-cover-photo { background: url('images/oss-checklist-download.webp') 35% 50% / cover no-repeat #02263F; }
.pg-cover-brand { font-size: 0.6rem; font-weight: 900; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sky); margin-bottom: 16px; }
.pg-cover-title { font-size: clamp(1.1rem, 2.4vw, 1.8rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.12; color: #fff; margin-bottom: 14px; }
.pg-cover-sub { font-size: clamp(0.66rem, 1.1vw, 0.84rem); font-weight: 300; color: rgba(173,221,246,0.75); line-height: 1.6; }
/* Service2Create wordmark set into the cover title in place of the old
"-S2C" text. Height in em so it tracks the clamped title; inline-block
to escape the global img{display:block} at the top of this file. */
.pg-cover-title .s2c-mark {
display: inline-block;
height: 1.02em;
width: auto;
max-width: none;
vertical-align: -0.14em;
}
.pg-btn {
display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 22px;
padding: 10px 22px; border-radius: 30px; background: var(--orange); color: #fff;
font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em;
box-shadow: 0 4px 18px rgba(230,83,43,0.35); transition: all 0.2s;
}
.pg-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(230,83,43,0.55); }
.book-hint { text-align: center; margin-top: 26px; font-size: 0.78rem; font-weight: 700; color: rgba(2,38,63,0.4); letter-spacing: 0.04em; }
/* ══════════════════════════════════════════════════════════
LIBRARY CAROUSEL
══════════════════════════════════════════════════════════ */
.lib-head { margin-bottom: 36px; }
/* Arrows flank the tiles in the container's side margin, vertically centred
on the track and 20px clear of the tile edge. The track itself stays full
container width so the tiles match the grid above. Space beside the tiles
is 48px + (viewport - 1240)/2, so this flank only fits from ~1300px up;
below that the arrows lift above the track, right-aligned, instead of
sitting on the tiles or clipping the viewport. */
.lib-arrow { position: absolute; top: 50%; width: 46px; height: 46px; margin-top: -23px; z-index: 5; background: rgba(255,255,255,0.05); border-color: rgba(95,153,187,0.3); color: var(--sky); box-shadow: none; }
.lib-arrow:hover:not(:disabled) { background: var(--sky); color: var(--prussian); }
#libPrev { left: -66px; }
#libNext { right: -66px; }
@media (max-width: 1299px) {
.lib-head { margin-bottom: 58px; }
.lib-arrow { top: -58px; margin-top: 0; }
#libPrev { left: auto; right: 56px; }
#libNext { right: 0; }
}
.lib-wrap { position: relative; display: flex; align-items: center; }
.lib-track {
display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
scroll-behavior: smooth; padding: 4px 0 18px; scrollbar-width: none; flex: 1; min-width: 0;
}
.lib-track::-webkit-scrollbar { display: none; }
/* carousel track item: sizing + snap only; the .article-card class it also
carries now supplies the border, background and hover, so the carousel
tiles match the case-study/brochure tiles exactly. */
.lib-card { flex: 0 0 calc((100% - 44px) / 3); scroll-snap-align: start; }
@media (max-width: 920px) {
.lib-card { flex: 0 0 calc((100% - 22px) / 2); }
}
@media (max-width: 720px) {
.flipbook-wrap { gap: 10px; }
.flip-arrow { width: 42px; height: 42px; font-size: 1rem; }
.lib-card { flex: 0 0 100%; }
/* above-track arrows, a touch smaller on phones; keep the 10px gap */
.lib-arrow { width: 42px; height: 42px; }
#libPrev { right: 52px; }
}
/* ══════════════════════════════════════════════════════════
LINKEDIN FEED — three latest posts.
The cards are rendered from one data source (see the script at
the foot of the page), so the feed can be driven either by a
scheduled job writing data/linkedin-posts.json or by a
third-party widget taking over #li-feed. Nothing is hardcoded.
══════════════════════════════════════════════════════════ */
.li-card {
display: flex; flex-direction: column;
background: #fff; border: 1px solid rgba(2,38,63,0.09);
border-radius: 16px; padding: 26px 26px 22px;
box-shadow: 0 2px 12px rgba(2,38,63,0.05);
transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.li-card:hover { border-color: rgba(10,102,194,0.4); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(2,38,63,0.1); }
.li-head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.li-mark {
width: 34px; height: 34px; border-radius: 7px; flex-shrink: 0;
background: #0A66C2; color: #fff; display: flex; align-items: center; justify-content: center;
font-size: 1.15rem;
}
.li-who { font-family: 'Lato', sans-serif; font-size: 0.84rem; font-weight: 900; color: var(--prussian); line-height: 1.2; }
.li-date { font-size: 0.7rem; font-weight: 400; color: rgba(2,38,63,0.45); margin-top: 2px; }
.li-text {
font-size: 0.89rem; font-weight: 300; line-height: 1.65; color: var(--dark-grey);
/* keep three cards the same height whatever the post length */
display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
overflow: hidden; margin-bottom: 16px;
}
.li-thumb { width: 100%; height: 132px; object-fit: cover; border-radius: 10px; margin-bottom: 16px; display: block; }
.li-cta {
margin-top: auto; padding-top: 15px; border-top: 1px solid rgba(2,38,63,0.16);
display: flex; align-items: center; gap: 5px;
font-size: 0.77rem; font-weight: 700; color: #0A66C2; transition: color 0.18s, gap 0.18s;
}
.li-card:hover .li-cta { color: var(--prussian); gap: 8px; }
/* honest empty state: shown until a real feed is connected, so the
page never displays invented posts */
.li-note {
grid-column: 1 / -1;
border: 1.5px dashed rgba(2,38,63,0.22); border-radius: 14px;
padding: 38px 32px; text-align: center; font-family: 'Lato', sans-serif;
}
.li-note .ti { font-size: 1.7rem; color: #0A66C2; display: block; margin-bottom: 12px; }
.li-note-title { font-size: 1rem; font-weight: 900; color: var(--prussian); margin-bottom: 7px; }
.li-note-body { font-size: 0.85rem; font-weight: 300; line-height: 1.65; color: rgba(2,38,63,0.6); max-width: 520px; margin: 0 auto; }
.li-note-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.79rem; background: rgba(2,38,63,0.07); padding: 2px 6px; border-radius: 4px; }
/* ══════════════════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
.nav-bar .nav-item, .nav-right .lang-btn, .nav-right .cta-btn { display: none; }
.nav-mobile-toggle { display: flex; }
.row-asymmetric, .row-asymmetric-right { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
.featured-article { grid-template-columns: 1fr; }
.featured-img { min-height: 260px; }
.row-three { grid-template-columns: 1fr 1fr; }
.newsletter-strip { flex-direction: column; gap: 28px; }
.newsletter-form { flex-direction: column; width: 100%; }
.newsletter-input { width: 100%; }
.newsletter-submit { width: 100%; justify-content: center; }
.blog-hero-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
.blog-hero-right { align-items: flex-start; max-width: 100%; }
.blog-hero-desc { text-align: left; }
/* stacked under the copy: keep its own modest width, left-aligned */
.blog-hero-copy { flex: 0 0 auto; max-width: 100%; } /* same fix: the 500px basis would become its height */
.hero-brochures { flex: 0 0 auto; align-self: flex-start; max-width: 360px; margin-top: 4px; transform: none; } /* flex: none, or the 545px basis becomes its HEIGHT once the row stacks */
}
@media (max-width: 600px) {
.container { padding: 0 20px; }
.site-footer { padding: 24px 20px; }
.row-three { grid-template-columns: 1fr; }
.blog-hero { min-height: 440px; }
.featured-body { padding: 32px 24px; }
/* only the anchor piece survives: four mockups at phone width
would be unreadable and would stretch the hero */
}
/* ══════════════════════════════════════════════════════════
BRANDED CURSOR — gradient orange disc (matches "Book a Demo"
button) with white double-chevron; reverses out on clickables.
Transparent outside the disc. Static, CSS-only, real-mouse only.
══════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
body {
cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cdefs%3E%3CradialGradient%20id%3D%27g%27%20cx%3D%2738%25%27%20cy%3D%2732%25%27%20r%3D%2775%25%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23f0824f%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23E6532B%27%2F%3E%3C%2FradialGradient%3E%3Cfilter%20id%3D%27s%27%20x%3D%27-60%25%27%20y%3D%27-60%25%27%20width%3D%27220%25%27%20height%3D%27220%25%27%3E%3CfeDropShadow%20dx%3D%270%27%20dy%3D%271.6%27%20stdDeviation%3D%272%27%20flood-color%3D%27%2302263F%27%20flood-opacity%3D%270.4%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2720%27%20r%3D%2715%27%20fill%3D%27url%28%23g%29%27%20filter%3D%27url%28%23s%29%27%2F%3E%3Cg%20transform%3D%27translate%2820%2020%29%20rotate%2845%29%20scale%280.78%29%27%20fill%3D%27none%27%20stroke%3D%27%23FFFFFF%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M-1.5%20-6L-7.5%200L-1.5%206%27%2F%3E%3Cpath%20d%3D%27M7.5%20-6L1.5%200L7.5%206%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 15 15, auto !important;
}
a, button, summary, label[for], [onclick], [role="button"],
.op-card, .uc-card, .pillar-card, .resource-card, .industry-card,
.film-card, .stat-card, .module-card, .ind-chip, .q-card,
.nav-item, .lang-btn, .icon-btn, .cta-btn, .cta-btn-secondary,
.hero-cta-main, .hero-cta-ghost, .mega-link, .mega-footer-link,
.faq-q, .show-tab, .spot-dot, .lang-opt, .search-hint,
.footer-login-btn, .social-icon-btn, .nav-mobile-toggle,
input[type="submit"], input[type="button"], input[type="checkbox"],
input[type="radio"], select {
cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cdefs%3E%3CradialGradient%20id%3D%27g%27%20cx%3D%2738%25%27%20cy%3D%2732%25%27%20r%3D%2775%25%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23ffffff%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23eaf2f8%27%2F%3E%3C%2FradialGradient%3E%3Cfilter%20id%3D%27s%27%20x%3D%27-60%25%27%20y%3D%27-60%25%27%20width%3D%27220%25%27%20height%3D%27220%25%27%3E%3CfeDropShadow%20dx%3D%270%27%20dy%3D%271.6%27%20stdDeviation%3D%272%27%20flood-color%3D%27%2302263F%27%20flood-opacity%3D%270.4%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2720%27%20r%3D%2715%27%20fill%3D%27url%28%23g%29%27%20filter%3D%27url%28%23s%29%27%2F%3E%3Cg%20transform%3D%27translate%2820%2020%29%20rotate%2845%29%20scale%280.78%29%27%20fill%3D%27none%27%20stroke%3D%27%23E6532B%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M-1.5%20-6L-7.5%200L-1.5%206%27%2F%3E%3Cpath%20d%3D%27M7.5%20-6L1.5%200L7.5%206%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 15 15, pointer !important;
}
input[type="text"], input[type="email"], input[type="search"],
input[type="tel"], input[type="number"], input[type="password"],
input[type="url"], textarea, [contenteditable="true"] {
cursor: text !important;
}
}
/* ══════════════════════════════════════════════════════════
NOTEPAD WIDGET — persistent note-taking pop-up
══════════════════════════════════════════════════════════ */
.np-fab {
position: fixed; right: 24px; bottom: 24px; z-index: 1200;
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 13px; border: none; border-radius: 30px;
background: var(--orange);
color: #fff; font-family: 'Lato', sans-serif; font-weight: 700;
font-size: 0.72rem; letter-spacing: 0.03em; cursor: pointer;
box-shadow: 0 5px 18px rgba(230,83,43,0.4);
transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.np-fab:hover { background: #b83d1a; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(230,83,43,0.55); }
.np-fab .ti { font-size: 0.95rem; }
.np-fab .np-badge {
min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px;
background: #fff; color: var(--orange); font-size: 0.58rem; font-weight: 900;
display: none; align-items: center; justify-content: center;
}
.np-fab .np-badge.show { display: inline-flex; }
.np-hidden { display: none !important; }
/* music + Notes dock (Notes stays in the corner, music sits to its left) */
.fab-dock { position: fixed; right: 24px; bottom: 24px; z-index: 1200; display: flex; align-items: center; gap: 12px; }
.fab-dock .np-fab { position: static; right: auto; bottom: auto; z-index: auto; }
.music-wrap { position: relative; display: inline-flex; }
.music-fab {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; padding: 0; border: none; border-radius: 50%;
background: var(--prussian); backdrop-filter: blur(10px);
color: #fff; cursor: pointer;
box-shadow: 0 5px 18px rgba(0,0,0,0.26), inset 0 0 0 1px rgba(95,153,187,0.3);
transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.music-fab:hover { transform: translateY(-2px); background: #013a5f; box-shadow: 0 12px 30px rgba(2,38,63,0.45), inset 0 0 0 1px rgba(95,153,187,0.5); }
/* volume / mute popover */
.music-pop {
position: absolute; bottom: calc(100% + 10px); right: 0;
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; border-radius: 24px;
background: rgba(2,38,63,0.72); backdrop-filter: blur(10px);
box-shadow: 0 10px 26px rgba(0,0,0,0.32), inset 0 0 0 1px rgba(95,153,187,0.35);
opacity: 0; visibility: hidden; transform: translateY(6px);
transition: opacity 0.18s, transform 0.18s, visibility 0.18s; white-space: nowrap;
}
.music-wrap:hover .music-pop, .music-wrap:focus-within .music-pop { opacity: 1; visibility: visible; transform: none; }
.music-mute { background: none; border: none; padding: 0; cursor: pointer; color: var(--sky); display: inline-flex; }
.music-mute .ti { font-size: 1.15rem; }
.music-vol { -webkit-appearance: none; appearance: none; width: 96px; height: 4px; border-radius: 3px; background: rgba(255,255,255,0.28); outline: none; cursor: pointer; }
.music-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); border: 2px solid #fff; cursor: pointer; }
.music-vol::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--orange); border: 2px solid #fff; cursor: pointer; }
.music-fab .m-icon .ti { font-size: 1rem; color: var(--airforce); display: block; }
.music-fab.playing .m-icon { display: none; }
.music-eq { display: none; align-items: flex-end; gap: 2px; height: 14px; }
.music-fab.playing .music-eq { display: inline-flex; }
.music-eq i { width: 3px; background: var(--orange); border-radius: 2px; transform-origin: bottom; animation: eqBar 0.9s ease-in-out infinite; }
.music-eq i:nth-child(1) { height: 7px; animation-delay: 0s; }
.music-eq i:nth-child(2) { height: 14px; animation-delay: 0.22s; }
.music-eq i:nth-child(3) { height: 9px; animation-delay: 0.44s; }
@keyframes eqBar { 0%,100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .music-fab { transition: none; } .music-eq i { animation: none; } }
.np-panel {
position: fixed; right: 24px; bottom: 24px; z-index: 1201;
width: min(360px, calc(100vw - 32px));
max-height: min(560px, calc(100vh - 48px));
display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
background: rgba(255,255,255,0.98);
border: 1px solid rgba(2,38,63,0.12);
box-shadow: 0 30px 80px rgba(2,38,63,0.35);
font-family: 'Lato', sans-serif;
transform-origin: bottom right;
animation: npIn 0.22s cubic-bezier(0.16,1,0.3,1);
}
@keyframes npIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .np-panel { animation: none; } .np-fab { transition: none; } }
.np-head {
display: flex; align-items: center; gap: 10px; padding: 14px 16px;
background: linear-gradient(130deg, #02263F, #012743); color: #fff;
}
.np-head .np-avatar {
width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
background: linear-gradient(135deg, var(--orange), #b83d1a);
display: flex; align-items: center; justify-content: center;
font-size: 1rem; box-shadow: 0 4px 12px rgba(230,83,43,0.4);
}
.np-head h4 { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 900; letter-spacing: 0.01em; }
.np-head p { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sky); }
.np-head .np-ctrls { margin-left: auto; display: flex; gap: 4px; }
.np-iconbtn {
width: 30px; height: 30px; border: none; background: rgba(255,255,255,0.1);
border-radius: 8px; color: #fff; font-size: 1rem; cursor: pointer;
display: flex; align-items: center; justify-content: center; transition: background 0.18s;
}
.np-iconbtn:hover { background: rgba(255,255,255,0.22); }
.np-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
.np-status { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 700; color: var(--orange); opacity: 0; transition: opacity 0.3s; }
.np-status.show { opacity: 1; }
.np-textarea {
width: 100%; min-height: 110px; height: 130px; resize: vertical;
border: 1px solid rgba(2,38,63,0.14); border-radius: 12px; padding: 12px 14px;
font-family: 'Lato', sans-serif; font-size: 0.9rem; line-height: 1.6;
color: var(--dark-grey); outline: none; transition: border-color 0.2s; background: #fff;
}
.np-textarea:focus { border-color: var(--airforce); }
.np-textarea::placeholder { color: rgba(56,72,79,0.45); }
.np-foot { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-top: 1px solid rgba(2,38,63,0.1); background: var(--alice); }
.np-foot-row { display: flex; gap: 8px; }
.np-btn {
flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(2,38,63,0.14);
background: #fff; color: var(--prussian); font-family: 'Lato', sans-serif;
font-weight: 700; font-size: 0.8125rem; cursor: pointer; transition: all 0.18s;
}
.np-btn:hover { border-color: rgba(2,38,63,0.3); }
.np-btn.primary { border: none; background: var(--orange); color: #fff; box-shadow: 0 4px 14px rgba(230,83,43,0.4); }
.np-btn.primary:hover { background: #b83d1a; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(230,83,43,0.55); }
.np-btn .ti { font-size: 0.95rem; }
.np-btn.np-clear { flex: 0 0 auto; width: 42px; color: var(--dark-grey); }
.np-btn.np-clear:hover { border-color: rgba(230,83,43,0.45); color: var(--orange); }
.np-toast {
position: fixed; right: 24px; bottom: 92px; z-index: 1202;
background: var(--prussian); color: #fff; font-family: 'Lato', sans-serif;
font-size: 0.8125rem; font-weight: 700; padding: 10px 16px; border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.35);
opacity: 0; transform: translateY(8px); transition: opacity 0.25s, transform 0.25s; pointer-events: none;
}
.np-toast.show { opacity: 1; transform: none; }
@media (max-width: 600px) { .np-panel, .fab-dock { right: 12px; bottom: 12px; } .np-toast { right: 12px; } }
.theme-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 29px; height: 29px; padding: 0;
border-radius: 50%; border: 1px solid rgba(95,153,187,0.25); background: none;
color: #fff; cursor: pointer; transition: all 0.18s;
}
.theme-btn:hover { background: rgba(95,153,187,0.12); border-color: rgba(95,153,187,0.45); }
.theme-btn .ti { font-size: 0.9rem; }
.theme-btn .m-sun { display: none; }
:root[data-theme="dark"] .theme-btn .m-moon { display: none; }
:root[data-theme="dark"] .theme-btn .m-sun { display: inline-block; color: var(--yellow); }
/* ===== DARK MODE ===== */
:root[data-theme="dark"] .blog-light-zone { background: #072e4c; }
:root[data-theme="dark"] .blog-sky-zone { background: #05233a !important; }
:root[data-theme="dark"] :is(.blog-light-zone,.blog-sky-zone) .section-rule-label { color: rgba(188,214,234,0.5); }
:root[data-theme="dark"] :is(.blog-light-zone,.blog-sky-zone) .section-rule-line { background: rgba(95,153,187,0.25); }
:root[data-theme="dark"] :is(.article-card,.article-card-text) { background: rgba(95,153,187,0.08) !important; border-color: rgba(95,153,187,0.22) !important; box-shadow: none !important; }
:root[data-theme="dark"] :is(.article-card,.article-card-text):hover { border-color: rgba(95,153,187,0.45) !important; }
:root[data-theme="dark"] .card-headline { color: #e9f3fb; }
:root[data-theme="dark"] .card-excerpt { color: #bcd6ea; }
:root[data-theme="dark"] .card-footer { border-top-color: rgba(95,153,187,0.3); }
:root[data-theme="dark"] .card-date { color: rgba(188,214,234,0.55); }
:root[data-theme="dark"] .card-read { color: var(--sky); }
:root[data-theme="dark"] .blog-oversize-heading.prussian-text { color: #e9f3fb; }
:root[data-theme="dark"] .load-more-btn { background: rgba(95,153,187,0.10); border-color: rgba(95,153,187,0.4); color: #e9f3fb; }
:root[data-theme="dark"] .load-more-btn:hover { background: var(--sky); border-color: var(--sky); color: var(--prussian); }
:root[data-theme="dark"] .book-sub { color: #bcd6ea; }