/* ============================================================ VAKIO — Multi-page layer pages.css · load AFTER site.css • Color themes (token overrides) • Shared chrome (nav + switcher) • Page hero • Case / team / blog / value / pricing / FAQ components ============================================================ */ /* ════════════════════════════════════════════════════════════ COLOR THEMES — recolor by overriding the cyan token scale. Default = Cyan (no override). Persisted via [data-theme] on . ════════════════════════════════════════════════════════════ */ /* —— Deep brand surface for big dark bands (hero, CTA, drawer). Distinctly cyan/teal instead of near-black. Themed per palette. —— */ :root { --surface-night: #043a4d; } /* —— Marin · deep navy, premium —— */ html[data-theme='marin'] { --surface-night: #0b2c4e; --cyan-950: #0a1322; --cyan-900: #0f1b30; --cyan-800: #16223c; --cyan-700: #21314f; --cyan-600: #234a86; --cyan-500: #2c5b9c; --cyan-400: #3c72bc; --cyan-350: #4187c7; --cyan-300: #5197d9; --cyan-250: #4fa0f2; --cyan-200: #79b6f5; --cyan-150: #a6cef9; --cyan-100: #ddebfb; --cyan-50: #ebf3fd; --action-primary: #234a86; --action-primary-hover: #1c3d70; --action-primary-active: #16315b; } /* —— Teal · greener, sustainability —— */ html[data-theme='teal'] { --surface-night: #04392e; --cyan-950: #051e18; --cyan-900: #07291f; --cyan-800: #0a3328; --cyan-700: #114838; --cyan-600: #07604a; --cyan-500: #027a5e; --cyan-400: #029775; --cyan-350: #0ba587; --cyan-300: #07bd98; --cyan-250: #14cdac; --cyan-200: #45e0c2; --cyan-150: #7eecd7; --cyan-100: #d7f5ee; --cyan-50: #e3fbf4; --action-primary: #07604a; --action-primary-hover: #054e3c; --action-primary-active: #033e30; } /* —— Is · lighter, icier slate —— */ html[data-theme='is'] { --surface-night: #103c4e; --cyan-950: #0e2330; --cyan-900: #143142; --cyan-800: #1c3e51; --cyan-700: #275365; --cyan-600: #0e6a86; --cyan-500: #0a82a3; --cyan-400: #0e9ec2; --cyan-350: #19abce; --cyan-300: #2bbcdd; --cyan-250: #36c6e6; --cyan-200: #62d4ee; --cyan-150: #93e2f3; --cyan-100: #dbf1f8; --cyan-50: #e9f7fc; --action-primary: #0e6a86; --action-primary-hover: #0a586f; --action-primary-active: #084557; } /* Smooth recolor when switching */ html.theme-anim, html.theme-anim * { transition: background-color var(--dur-slow) var(--ease-standard), border-color var(--dur-slow) var(--ease-standard), color var(--dur-slow) var(--ease-standard) !important; } /* ════════════════════════════════════════════════════════════ CHROME — expanded nav, color switcher, footer columns ════════════════════════════════════════════════════════════ */ /* Wider nav breakpoint for 7 items */ @media (min-width: 1080px) { .nav { display: flex; } } @media (max-width: 1079px) { .nav { display: none; } } @media (min-width: 1080px) { .header-cta, .header-tools { display: inline-flex; } } @media (max-width: 1079px) { .header-cta { display: none; } } /* Keep hamburger in sync with the 1080 nav breakpoint */ @media (max-width: 1079px) { .menu-btn { display: inline-flex; } } @media (min-width: 1080px) { .menu-btn { display: none; } } .header-tools { position: relative; } .nav a { position: relative; padding-block: 6px; font-size: var(--fs-base); } .nav a.is-active { color: #fff; } .site-header.is-solid .nav a.is-active { color: var(--cyan-600); } .nav a.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: currentColor; border-radius: 2px; } .header-tools { align-items: center; gap: 14px; } .site-header__inner { gap: 18px; } /* Color switcher */ .lang-toggle { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 14px; border-radius: var(--radius-full); font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--cyan-100); border: 1px solid rgba(114, 213, 237, 0.3); transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); } .lang-toggle:hover { background: rgba(114, 213, 237, 0.1); border-color: var(--cyan-250); } .site-header.is-solid .lang-toggle { color: var(--fg-secondary); border-color: var(--border-default); } .site-header.is-solid .lang-toggle:hover { background: var(--cyan-50); border-color: var(--cyan-350); color: var(--cyan-600); } .swatch-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); border: 1px solid rgba(114, 213, 237, 0.35); background: transparent; color: var(--cyan-100); cursor: pointer; transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); } .swatch-btn:hover { background: rgba(114, 213, 237, 0.1); } .swatch-btn svg { width: 19px; height: 19px; } .site-header.is-solid .swatch-btn { color: var(--fg-secondary); border-color: var(--border-default); } .site-header.is-solid .swatch-btn:hover { background: var(--cyan-50); border-color: var(--cyan-350); } .theme-pop { position: absolute; top: 60px; right: 0; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 14px; width: 230px; z-index: 120; display: none; } .theme-pop.is-open { display: block; } .theme-pop__title { font-size: var(--fs-xs); letter-spacing: var(--ls-uppercase); text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--fg-tertiary); margin-bottom: 12px; } .theme-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border-radius: var(--radius-md); border: 1px solid transparent; background: transparent; cursor: pointer; text-align: left; font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--fg-primary); transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); } .theme-opt:hover { background: var(--bg-canvas); } .theme-opt.is-active { border-color: var(--cyan-350); background: var(--cyan-50); } .theme-opt .dots { display: inline-flex; flex: none; } .theme-opt .dots i { width: 15px; height: 15px; border-radius: 50%; display: block; border: 1.5px solid var(--bg-surface); margin-left: -5px; } .theme-opt .dots i:first-child { margin-left: 0; } .theme-opt .check { margin-left: auto; color: var(--cyan-600); display: none; } .theme-opt .check svg { width: 18px; height: 18px; } .theme-opt.is-active .check { display: block; } .drawer__lang { display: inline-flex; align-items: center; justify-content: center; margin-top: 14px; min-height: 48px; padding: 0 20px; border-radius: var(--radius-full); border: 1px solid rgba(114, 213, 237, 0.3); color: var(--cyan-100); font-weight: var(--fw-medium); font-size: var(--fs-md); } .drawer__lang:hover { background: rgba(114, 213, 237, 0.1); } /* Drawer: theme row + full nav already styled */ .drawer__theme { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--cyan-800); } .drawer__theme .lbl { font-size: var(--fs-xs); letter-spacing: var(--ls-uppercase); text-transform: uppercase; color: var(--cyan-300); font-weight: var(--fw-semibold); margin-bottom: 14px; } .drawer__swatches { display: flex; gap: 10px; } .drawer__sw { flex: 1; min-height: 48px; border-radius: var(--radius-md); border: 1.5px solid var(--cyan-700); background: var(--cyan-900); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: var(--cyan-100); font-size: 11px; font-weight: var(--fw-medium); } .drawer__sw.is-active { border-color: var(--cyan-250); } .drawer__sw .dot { width: 18px; height: 18px; border-radius: 50%; } /* Footer: a touch richer */ .footer__grid { grid-template-columns: 1fr; } @media (min-width: 760px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } } /* ════════════════════════════════════════════════════════════ PAGE HERO — compact dark band for interior pages ════════════════════════════════════════════════════════════ */ .page-hero { position: relative; overflow: hidden; background: var(--surface-night); color: var(--cyan-100); padding-top: 116px; padding-bottom: 56px; } @media (min-width: 768px) { .page-hero { padding-top: 152px; padding-bottom: 80px; } } .page-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient( circle, rgba(114, 213, 237, 0.1) 1.1px, transparent 1.3px ); background-size: 24px 24px; -webkit-mask-image: radial-gradient( 120% 90% at 80% 0%, #000 30%, transparent 78% ); mask-image: radial-gradient(120% 90% at 80% 0%, #000 30%, transparent 78%); } .page-hero::after { content: ''; position: absolute; pointer-events: none; width: 520px; height: 520px; right: -200px; top: -240px; border-radius: 50%; background: radial-gradient( closest-side, rgba(26, 173, 214, 0.14), rgba(26, 173, 214, 0) ); } .page-hero .wrap { position: relative; z-index: 1; } .breadcrumb { display: flex; align-items: center; gap: 9px; font-size: var(--fs-sm); color: var(--cyan-300); margin-bottom: 20px; font-family: var(--font-mono); } .breadcrumb a { color: var(--cyan-200); } .breadcrumb a:hover { color: #fff; } .breadcrumb svg { width: 14px; height: 14px; opacity: 0.6; } .page-hero h1 { font-size: clamp(30px, 5.4vw, 50px); font-weight: var(--fw-semibold); line-height: 1.05; letter-spacing: var(--ls-tighter); color: #fff; text-wrap: balance; max-width: 16ch; } .page-hero h1 .accent { color: var(--cyan-200); } .page-hero__sub { margin-top: 20px; max-width: 56ch; font-size: var(--fs-lg); line-height: var(--lh-normal); color: var(--cyan-100); opacity: 0.85; text-wrap: pretty; } .page-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } /* ════════════════════════════════════════════════════════════ PHOTO PLACEHOLDER — cool-toned, clearly a slot ════════════════════════════════════════════════════════════ */ .photo { position: relative; overflow: hidden; background-color: var(--cyan-900); background-image: linear-gradient(135deg, rgba(114, 213, 237, 0.05) 0 50%, transparent 0), radial-gradient(circle, rgba(114, 213, 237, 0.1) 1px, transparent 1.4px); background-size: 28px 28px, 18px 18px; border: 1px solid var(--cyan-700); border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--cyan-200); min-height: 200px; } .photo__ico { width: 34px; height: 34px; opacity: 0.7; } .photo__cap { font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: 0.02em; } .photo__tag { position: absolute; top: 12px; left: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-uppercase); text-transform: uppercase; color: var(--cyan-300); background: rgba(6, 21, 32, 0.6); border: 1px solid var(--cyan-700); border-radius: var(--radius-full); padding: 4px 10px; } .photo.light { background-color: var(--bg-canvas); border-color: var(--border-default); color: var(--cyan-500); background-image: radial-gradient( circle, rgba(2, 69, 88, 0.07) 1px, transparent 1.4px ); background-size: 18px 18px; } .photo.light .photo__tag { background: var(--bg-surface); color: var(--cyan-500); border-color: var(--border-default); } .photo.ratio-16-9 { aspect-ratio: 16 / 9; } .photo.ratio-4-3 { aspect-ratio: 4 / 3; } .photo.ratio-1-1 { aspect-ratio: 1 / 1; } .photo.ratio-3-2 { aspect-ratio: 3 / 2; } .photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .photo:has(> img) { background: none; } .logo-ph.has-logo { background: var(--bg-surface); border-style: solid; padding: 18px 22px; } .logo-ph .logo-img { max-height: 38px; max-width: 80%; width: auto; object-fit: contain; } /* ════════════════════════════════════════════════════════════ FEATURE ROW — alternating media + copy ════════════════════════════════════════════════════════════ */ .feature { display: grid; gap: 32px; align-items: center; } @media (min-width: 880px) { .feature { grid-template-columns: 1fr 1fr; gap: 56px; } .feature.flip .feature__media { order: 2; } } .feature + .feature { margin-top: 64px; } @media (min-width: 880px) { .feature + .feature { margin-top: 96px; } } .feature__copy .eyebrow { color: var(--cyan-500); } .feature__copy h3 { font-size: clamp(22px, 3.4vw, 30px); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); } .feature__copy > p { margin-top: 14px; color: var(--fg-secondary); font-size: var(--fs-lg); line-height: var(--lh-normal); text-wrap: pretty; } .feature__list { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; } .feature__list li { display: flex; gap: 12px; align-items: flex-start; color: var(--fg-primary); } .feature__list li svg { width: 20px; height: 20px; color: var(--cyan-500); flex: none; margin-top: 1px; } .feature__media { min-width: 0; } /* ════════════════════════════════════════════════════════════ CASE CARDS ════════════════════════════════════════════════════════════ */ .case-grid { display: grid; gap: 22px; } @media (min-width: 700px) { .case-grid { grid-template-columns: repeat(2, 1fr); } } .case-card { display: flex; flex-direction: column; overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); } .case-card:hover { border-color: var(--cyan-200); box-shadow: 0 16px 40px rgba(2, 69, 88, 0.1); transform: translateY(-4px); } .case-card .photo { border: none; border-radius: 0; border-bottom: 1px solid var(--cyan-700); } .case-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; } .case-card__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .chip { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--cyan-600); background: var(--cyan-50); border: 1px solid var(--cyan-100); border-radius: var(--radius-full); padding: 4px 12px; } .chip.muted { color: var(--fg-tertiary); background: var(--bg-canvas); border-color: var(--border-subtle); } .case-card h3 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); } .case-card p { margin-top: 10px; color: var(--fg-secondary); line-height: var(--lh-normal); text-wrap: pretty; } .case-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-subtle); } .case-card__stats .s .v { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: var(--fw-semibold); color: var(--steel-300); } .case-card__stats .s .k { font-size: var(--fs-sm); color: var(--fg-secondary); margin-top: 3px; } .case-card__foot { margin-top: auto; padding-top: 20px; } .link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--cyan-600); font-weight: var(--fw-medium); } .pkg__fit { margin-top: 12px; font-size: var(--fs-sm); color: var(--fg-tertiary); line-height: var(--lh-normal); font-style: italic; } .link-arrow svg { width: 18px; height: 18px; transition: transform var(--dur-base) var(--ease-standard); } .link-arrow:hover svg { transform: translateX(3px); } /* Featured case (wide) */ .case-feature { display: grid; gap: 0; overflow: hidden; background: var(--cyan-950); color: var(--cyan-100); border-radius: var(--radius-2xl); border: 1px solid var(--cyan-700); margin-bottom: 28px; } @media (min-width: 860px) { .case-feature { grid-template-columns: 1.05fr 1fr; } } .case-feature .photo { border: none; border-radius: 0; min-height: 280px; } @media (min-width: 860px) { .case-feature .photo { min-height: 100%; } } .case-feature__body { padding: 32px; display: flex; flex-direction: column; justify-content: center; } @media (min-width: 768px) { .case-feature__body { padding: 48px; } } .case-feature__body h3 { font-size: clamp(24px, 3.6vw, 34px); font-weight: var(--fw-semibold); color: #fff; letter-spacing: var(--ls-tight); line-height: var(--lh-tight); margin-top: 14px; } .case-feature__body p { margin-top: 16px; color: var(--cyan-100); opacity: 0.85; font-size: var(--fs-lg); line-height: var(--lh-normal); } .case-feature__stats { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 28px; } .case-feature__stats .v { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: var(--fw-semibold); color: var(--cyan-200); } .case-feature__stats .k { font-size: var(--fs-sm); color: var(--cyan-300); margin-top: 4px; } /* ════════════════════════════════════════════════════════════ TEAM ════════════════════════════════════════════════════════════ */ .team-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 760px) { .team-grid { grid-template-columns: repeat(4, 1fr); } } .member { } .member .photo { aspect-ratio: 4 / 5; min-height: 0; margin-bottom: 14px; } .member h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); } .member .role { font-size: var(--fs-base); color: var(--cyan-600); margin-top: 2px; } .member .ph-name { color: var(--fg-tertiary); } /* ════════════════════════════════════════════════════════════ VALUES ════════════════════════════════════════════════════════════ */ .value-grid { display: grid; gap: 18px; } @media (min-width: 640px) { .value-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .value-grid { grid-template-columns: repeat(3, 1fr); } } .value { padding: 26px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); } .value__n { font-family: var(--font-numeric); font-size: var(--fs-sm); color: var(--cyan-400); font-weight: var(--fw-semibold); } .value h3 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin-top: 6px; display: flex; align-items: center; gap: 10px; } .value h3 svg { width: 20px; height: 20px; color: var(--cyan-500); flex: none; } .value p { margin-top: 10px; color: var(--fg-secondary); line-height: var(--lh-normal); text-wrap: pretty; } /* ════════════════════════════════════════════════════════════ BLOG ════════════════════════════════════════════════════════════ */ .blog-grid { display: grid; gap: 22px; } @media (min-width: 700px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } } .post { display: flex; flex-direction: column; overflow: hidden; position: relative; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); } .post:hover { border-color: var(--cyan-200); box-shadow: 0 16px 40px rgba(2, 69, 88, 0.1); transform: translateY(-4px); } .post .photo { border: none; border-radius: 0; border-bottom: 1px solid var(--cyan-700); min-height: 0; aspect-ratio: 16 / 10; } .post__body { padding: 22px; display: flex; flex-direction: column; flex: 1; } .post__meta { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--fg-tertiary); margin-bottom: 12px; } .post__meta .chip { padding: 3px 10px; } .post h3 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); } .post p { margin-top: 10px; color: var(--fg-secondary); line-height: var(--lh-normal); text-wrap: pretty; } .post__foot { margin-top: auto; padding-top: 18px; } .post__link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; } .post .link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--cyan-600); font-weight: var(--fw-medium); font-size: var(--fs-base); } .post .link-arrow svg { width: 18px; height: 18px; } .post.is-feature { grid-column: 1 / -1; } @media (min-width: 700px) { .post.is-feature { display: grid; grid-template-columns: 1.2fr 1fr; } .post.is-feature .photo { aspect-ratio: auto; border-bottom: none; border-right: 1px solid var(--cyan-700); } } /* ════════════════════════════════════════════════════════════ PRICING COMPARISON TABLE ════════════════════════════════════════════════════════════ */ .compare-wrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); } .compare { width: 100%; border-collapse: collapse; min-width: 680px; } .compare th, .compare td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--border-subtle); } .compare thead th { background: var(--bg-canvas); font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--fg-primary); vertical-align: bottom; } .compare thead th .lvl { font-size: var(--fs-lg); } .compare thead th .tag { display: block; font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--fg-tertiary); margin-top: 4px; } .compare thead th.featured { background: var(--cyan-50); } .compare tbody th { font-weight: var(--fw-medium); color: var(--fg-primary); } .compare td { color: var(--fg-secondary); text-align: center; } .compare td.featured { background: color-mix(in srgb, var(--cyan-50) 55%, transparent); } .compare td.yes svg { width: 20px; height: 20px; color: var(--cyan-600); margin: 0 auto; } .compare td.no { color: var(--fg-disabled); } .compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: none; } .compare .row-label { min-width: 200px; } /* ════════════════════════════════════════════════════════════ FAQ (accordion) ════════════════════════════════════════════════════════════ */ .faq { max-width: 800px; } .faq__item { border-bottom: 1px solid var(--border-subtle); } .faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 4px; background: transparent; border: none; cursor: pointer; text-align: left; font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--fg-primary); } .faq__q .pm { flex: none; width: 24px; height: 24px; color: var(--cyan-600); transition: transform var(--dur-base) var(--ease-standard); } .faq__q[aria-expanded='true'] .pm { transform: rotate(45deg); } .faq__a { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-standard); } .faq__a-inner { padding: 0 4px 22px; color: var(--fg-secondary); line-height: var(--lh-loose); max-width: 70ch; } /* ════════════════════════════════════════════════════════════ CONTACT split ════════════════════════════════════════════════════════════ */ .contact-grid { display: grid; gap: 36px; } @media (min-width: 920px) { .contact-grid { grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start; } } .contact-info { display: grid; gap: 16px; } .contact-info .row { display: flex; gap: 16px; align-items: flex-start; padding: 20px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); } .contact-info .row .ic { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--cyan-50); color: var(--cyan-600); display: grid; place-items: center; flex: none; } .contact-info .row .ic svg { width: 21px; height: 21px; } .contact-info .row h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); } .contact-info .row p, .contact-info .row a { margin-top: 4px; color: var(--fg-secondary); font-size: var(--fs-base); display: block; } .contact-info .row a:hover { color: var(--cyan-600); } /* Reuse dark form card on light pages */ .form-card.on-light { background: var(--bg-surface); border-color: var(--border-default); } .form-card.on-light .field label { color: var(--fg-primary); } .form-card.on-light .field input, .form-card.on-light .field select, .form-card.on-light .field textarea { background: var(--bg-surface); border-color: var(--border-default); color: var(--fg-primary); } .form-card.on-light .field input::placeholder, .form-card.on-light .field textarea::placeholder { color: var(--fg-tertiary); } .form-card.on-light .field input:focus, .form-card.on-light .field select:focus, .form-card.on-light .field textarea:focus { border-color: var(--cyan-350); box-shadow: 0 0 0 3px rgba(11, 126, 165, 0.18); } .form-card.on-light .form-consent { color: var(--fg-secondary); } .form-card.on-light .form-consent a { color: var(--cyan-600); } .form-card.on-light .field__err { color: var(--critical-text); } .form-card.on-light .form-success h3 { color: var(--fg-primary); } .form-card.on-light .form-success p { color: var(--fg-secondary); opacity: 1; } .form-card.on-light .form-success .mailto a { color: var(--cyan-600); } /* ════════════════════════════════════════════════════════════ CTA band (reusable, light) ════════════════════════════════════════════════════════════ */ .cta-band { background: var(--surface-night); color: var(--cyan-100); position: relative; overflow: hidden; } .cta-band .wrap { position: relative; z-index: 1; text-align: center; max-width: 720px; } .cta-band h2 { font-size: clamp(26px, 4.6vw, 40px); font-weight: var(--fw-semibold); color: #fff; letter-spacing: var(--ls-tighter); line-height: 1.08; text-wrap: balance; } .cta-band p { margin-top: 16px; font-size: var(--fs-lg); color: var(--cyan-100); opacity: 0.85; text-wrap: pretty; } .cta-band__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; } /* Section intro centered variant */ .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head.center .eyebrow { justify-content: center; } /* Stat strip */ .stat-strip { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 760px) { .stat-strip { grid-template-columns: repeat(4, 1fr); } } .stat-strip .s { padding: 22px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); text-align: center; } .stat-strip .s .v { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: var(--fw-semibold); color: var(--cyan-600); } .stat-strip .s .v.ph { color: var(--steel-300); } .stat-strip .s .k { font-size: var(--fs-base); color: var(--fg-secondary); margin-top: 6px; } /* ════════════════════════════════════════════════════════════ BLOG ARTICLE ════════════════════════════════════════════════════════════ */ .page-hero .article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; font-size: var(--fs-sm); color: var(--cyan-200); } .page-hero .article__meta .chip { background: rgba(114, 213, 237, 0.12); color: var(--cyan-150); border: 1px solid rgba(114, 213, 237, 0.25); border-radius: var(--radius-full); padding: 4px 12px; font-weight: var(--fw-semibold); } .article__body .wrap { max-width: 760px; } .article__body h2 { font-size: clamp(21px, 3vw, 27px); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); margin-top: 44px; } .article__body h3 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin-top: 28px; } .article__body p { margin-top: 16px; font-size: var(--fs-md); line-height: var(--lh-loose); color: var(--fg-primary); text-wrap: pretty; } .article__body > .wrap > p:first-of-type { font-size: var(--fs-lg); color: var(--fg-secondary); } .article__body ul { margin-top: 16px; padding-left: 0; list-style: none; display: grid; gap: 12px; } .article__body ul li { position: relative; padding-left: 30px; font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--fg-primary); } .article__body ul li::before { content: ''; position: absolute; left: 4px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan-300); } .article__body blockquote { margin: 32px 0 0; padding: 22px 26px; background: var(--bg-canvas); border-left: 3px solid var(--cyan-400); border-radius: var(--radius-md); font-size: var(--fs-lg); line-height: var(--lh-normal); color: var(--fg-primary); } .article__body .takeaway { margin-top: 44px; padding: 26px 28px; background: var(--cyan-50); border: 1px solid var(--cyan-100); border-radius: var(--radius-lg); } .article__body .takeaway h3 { margin-top: 0; color: var(--cyan-600); } .article__body .takeaway p { color: var(--fg-primary); } .article__foot { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--border-subtle); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; } .article__foot .by { font-size: var(--fs-base); color: var(--fg-secondary); }