/*! * Hypercognito Fair Practice & Interest Policy - front-end styles * All rules are namespaced under .hcfpc */ /* ============================================================ THEMES ===== */ .hcfpc { --hc-radius: 18px; --hc-ease: cubic-bezier(.16, 1, .3, 1); --hc-accent-text: var(--hc-accent); --hc-rgb2: var(--hc-rgb); } .hcfpc[data-mode="dark"][data-theme="kms-gold"], .hcfpc[data-mode="dark"][data-theme="royal-blue"], .hcfpc[data-mode="dark"][data-theme="emerald"], .hcfpc[data-mode="dark"][data-theme="custom"] { --hc-accent-text: var(--hc-accent-text); } /* KMS Crimson & Royal Blue (default) - identical palette to the KMS contact page */ .hcfpc[data-theme="kms"] { --hc-accent:#ff3b52; --hc-accent-2:#5b86ff; --hc-accent-deep:#c4122c; --hc-alt:#5b86ff; --hc-rgb:255,59,82; --hc-rgb2:91,134,255; --hc-on:#ffffff; } .hcfpc[data-theme="kms"][data-mode="dark"] { --hc-bg:#0a0e2b; --hc-bg-2:#1c1034; --hc-surface:rgba(255,255,255,.06); --hc-surface-2:rgba(255,255,255,.1); --hc-border:rgba(255,255,255,.13); --hc-text:#c9cff0; --hc-muted:#a3abd6; --hc-heading:#ffffff; } .hcfpc[data-theme="kms"][data-mode="light"] { --hc-accent:#e5122b; --hc-accent-2:#1246da; --hc-accent-deep:#a30c1f; --hc-alt:#1246da; --hc-rgb:229,18,43; --hc-rgb2:18,70,218; --hc-bg:#ffffff; --hc-bg-2:#f3f5ff; --hc-surface:rgba(255,255,255,.85); --hc-surface-2:#ffffff; --hc-border:rgba(18,22,58,.11); --hc-text:#4a5072; --hc-muted:#6b7194; --hc-heading:#12163a; } /* Gold & Navy (previous look) */ .hcfpc[data-theme="kms-gold"] { --hc-accent:#d4af37; --hc-accent-2:#f7d774; --hc-accent-deep:#aa820a; --hc-alt:#f7d774; --hc-rgb:212,175,55; --hc-on:#0b0f19; } .hcfpc[data-theme="kms-gold"][data-mode="dark"] { --hc-bg:#0b0f19; --hc-bg-2:#0e1422; --hc-surface:rgba(255,255,255,.035); --hc-surface-2:rgba(255,255,255,.07); --hc-border:rgba(255,255,255,.09); --hc-text:#cbd5e1; --hc-muted:#94a3b8; --hc-heading:#ffffff; } .hcfpc[data-theme="kms-gold"][data-mode="light"] { --hc-accent:#b8860b; --hc-accent-2:#d4af37; --hc-accent-deep:#8a6508; --hc-rgb:184,134,11; --hc-on:#ffffff; --hc-bg:#fbf8ef; --hc-bg-2:#f4efe0; --hc-surface:#ffffff; --hc-surface-2:#fffdf6; --hc-border:rgba(15,23,42,.1); --hc-text:#3b4658; --hc-muted:#667085; --hc-heading:#0f172a; } /* Royal Blue */ .hcfpc[data-theme="royal-blue"] { --hc-accent:#3b82f6; --hc-accent-2:#7cb3ff; --hc-accent-deep:#1d4ed8; --hc-alt:#60a5fa; --hc-rgb:59,130,246; --hc-on:#ffffff; } .hcfpc[data-theme="royal-blue"][data-mode="dark"] { --hc-bg:#070d1f; --hc-bg-2:#0a1330; --hc-surface:rgba(255,255,255,.04); --hc-surface-2:rgba(255,255,255,.075); --hc-border:rgba(255,255,255,.1); --hc-text:#cbd5e1; --hc-muted:#94a3b8; --hc-heading:#ffffff; } .hcfpc[data-theme="royal-blue"][data-mode="light"] { --hc-accent:#1d4ed8; --hc-accent-2:#3b82f6; --hc-accent-deep:#1e3a8a; --hc-rgb:29,78,216; --hc-bg:#f3f7ff; --hc-bg-2:#e8effd; --hc-surface:#ffffff; --hc-surface-2:#f8faff; --hc-border:rgba(15,23,42,.1); --hc-text:#334155; --hc-muted:#64748b; --hc-heading:#0b1530; } /* Emerald */ .hcfpc[data-theme="emerald"] { --hc-accent:#10b981; --hc-accent-2:#5eead4; --hc-accent-deep:#047857; --hc-alt:#34d399; --hc-rgb:16,185,129; --hc-on:#04130e; } .hcfpc[data-theme="emerald"][data-mode="dark"] { --hc-bg:#06130f; --hc-bg-2:#09201a; --hc-surface:rgba(255,255,255,.04); --hc-surface-2:rgba(255,255,255,.075); --hc-border:rgba(255,255,255,.1); --hc-text:#cfe3dc; --hc-muted:#93b3a8; --hc-heading:#ffffff; } .hcfpc[data-theme="emerald"][data-mode="light"] { --hc-accent:#047857; --hc-accent-2:#10b981; --hc-accent-deep:#064e3b; --hc-rgb:4,120,87; --hc-on:#ffffff; --hc-bg:#f1fbf7; --hc-bg-2:#e2f5ed; --hc-surface:#ffffff; --hc-surface-2:#f7fdfa; --hc-border:rgba(6,40,30,.1); --hc-text:#2f4a42; --hc-muted:#5f7a71; --hc-heading:#062018; } /* Custom (variables are injected inline by PHP) */ .hcfpc[data-theme="custom"] { --hc-accent:var(--hc-cu-accent); --hc-accent-2:var(--hc-cu-accent2); --hc-accent-deep:var(--hc-cu-deep); --hc-alt:var(--hc-cu-accent2); --hc-rgb:var(--hc-cu-rgb); --hc-rgb2:var(--hc-cu-rgb); --hc-on:var(--hc-cu-on); } .hcfpc[data-theme="custom"][data-mode="dark"] { --hc-bg:var(--hc-cu-dark); --hc-bg-2:var(--hc-cu-dark); --hc-surface:rgba(255,255,255,.04); --hc-surface-2:rgba(255,255,255,.075); --hc-border:rgba(255,255,255,.1); --hc-text:#cbd5e1; --hc-muted:#94a3b8; --hc-heading:#ffffff; } .hcfpc[data-theme="custom"][data-mode="light"] { --hc-bg:var(--hc-cu-light); --hc-bg-2:var(--hc-cu-light); --hc-surface:#ffffff; --hc-surface-2:#ffffff; --hc-border:rgba(15,23,42,.1); --hc-text:#3b4658; --hc-muted:#667085; --hc-heading:#0f172a; } @supports (color: color-mix(in srgb, red, blue)) { .hcfpc[data-theme="custom"][data-mode="dark"] { --hc-bg-2: color-mix(in srgb, var(--hc-cu-dark) 92%, #ffffff); } .hcfpc[data-theme="custom"][data-mode="light"] { --hc-bg-2: color-mix(in srgb, var(--hc-cu-light) 94%, #000000); } } .hcfpc[data-mode="dark"] { --hc-shadow: 0 22px 44px -18px rgba(0,0,0,.65); color-scheme: dark; } .hcfpc[data-mode="light"] { --hc-shadow: 0 22px 44px -22px rgba(15,23,42,.28); color-scheme: light; } /* ============================================================== BASE ===== */ .hcfpc, .hcfpc *, .hcfpc *::before, .hcfpc *::after { box-sizing: border-box; } .hcfpc { position: relative; width: 100%; isolation: isolate; font-family: var(--hc-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif); font-size: 16px; line-height: 1.65; color: var(--hc-text); background: linear-gradient(135deg, var(--hc-bg), var(--hc-bg-2)); transition: color .45s ease; } .hcfpc.hcfpc--section { overflow: hidden; padding: 88px 20px; } .hcfpc.hcfpc--page { overflow: visible; } .hcfpc.hcfpc--full { width: 100vw; position: relative; left: 50%; margin-left: -50vw; max-width: 100vw; } .hcfpc h1, .hcfpc h2, .hcfpc h3, .hcfpc h4, .hcfpc p, .hcfpc ul, .hcfpc li, .hcfpc figure { margin: 0; padding: 0; border: 0; text-transform: none; letter-spacing: normal; list-style: none; background: none; } .hcfpc h1, .hcfpc h2, .hcfpc h3, .hcfpc h4 { font-family: var(--hc-font-head, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif) !important; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: var(--hc-heading) !important; text-transform: none !important; } .hcfpc a { text-decoration: none; box-shadow: none; } .hcfpc img { max-width: 100%; height: auto; display: block; border: 0; box-shadow: none; } .hcfpc button { font: inherit; cursor: pointer; } .hcfpc .hcfpc-ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; display: inline-block; vertical-align: middle; } .hcfpc .hcfpc-container { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; } .hcfpc :focus-visible { outline: 2px solid var(--hc-accent); outline-offset: 3px; border-radius: 6px; } /* Decorative background */ .hcfpc .hcfpc-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .hcfpc .hcfpc-orb { position: absolute; border-radius: 50%; filter: blur(64px); opacity: .4; background: rgb(var(--hc-rgb)); animation: hcfpc-float 14s ease-in-out infinite alternate; } .hcfpc .hcfpc-orb--1 { width: 460px; height: 460px; top: -140px; left: -120px; } .hcfpc .hcfpc-orb--2 { width: 380px; height: 380px; bottom: -120px; right: -100px; background: rgb(var(--hc-rgb2)); animation-delay: -6s; } .hcfpc[data-mode="light"] .hcfpc-orb { opacity: .26; } .hcfpc .hcfpc-grid { position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(rgba(var(--hc-rgb2), .28) 1px, transparent 1.3px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%); mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%); } @keyframes hcfpc-float { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(40px,30px,0) scale(1.15); } } /* ===================================================== HEADING EFFECTS ===== */ /* Same technique as the KMS contact page: an overlay copy of the heading text is wiped in from the left. */ .hcfpc .hcfpc-fx { position: relative; display: inline-block; max-width: 100%; } .hcfpc-fx-wipe .hcfpc-fx::after, .hcfpc-fx-sweep .hcfpc-fx::after { content: attr(data-text); content: attr(data-text) / ""; position: absolute; inset: 0; pointer-events: none; clip-path: inset(0 100% 0 0); transition: clip-path .75s cubic-bezier(.65, 0, .35, 1); color: transparent; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; } .hcfpc-fx-sweep .hcfpc-fx::after { background-image: linear-gradient(90deg, var(--hc-accent), var(--hc-accent-2), var(--hc-accent)); background-size: 200% 100%; } .hcfpc-fx-wipe .hcfpc-fx::after { background-image: linear-gradient(90deg, var(--hc-accent), var(--hc-accent-2)); } .hcfpc-fx-wipe .hcfpc-fx:hover::after, .hcfpc-fx-sweep .hcfpc-fx:hover::after, .hcfpc-fx-wipe .hcfpc-host:hover .hcfpc-fx::after, .hcfpc-fx-sweep .hcfpc-host:hover .hcfpc-fx::after { clip-path: inset(0 0 0 0); } .hcfpc-fx-sweep .hcfpc-fx:hover::after, .hcfpc-fx-sweep .hcfpc-host:hover .hcfpc-fx::after { animation: hcfpc-sweep 2.6s linear infinite; } @keyframes hcfpc-sweep { to { background-position: 200% 0; } } /* Touch devices have no hover: the effect plays once when the heading scrolls into view */ @media (hover: none) { .hcfpc-fx-wipe .hcfpc-fx.is-lit::after, .hcfpc-fx-sweep .hcfpc-fx.is-lit::after { clip-path: inset(0 0 0 0); } } /* Gradient accent words: always filled, shimmer on hover */ .hcfpc .hcfpc-accent { background-image: linear-gradient(115deg, var(--hc-accent) 0%, var(--hc-accent-2) 50%, var(--hc-accent) 100%); background-size: 200% 100%; background-position: 0 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; transition: background-position 1.2s ease; } .hcfpc .hcfpc-head:hover .hcfpc-accent, .hcfpc .hcfpc-hero-inner:hover .hcfpc-accent { background-position: 100% 0; } /* ======================================================== CONTROLS ===== */ .hcfpc .hcfpc-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-bottom: 18px; } .hcfpc .hcfpc-toggle { position: relative; width: 68px; height: 34px; padding: 0; flex: 0 0 auto; border-radius: 40px; border: 1px solid var(--hc-border); background: var(--hc-surface-2); color: var(--hc-muted); display: inline-flex; align-items: center; justify-content: space-between; box-shadow: none; transition: border-color .3s, background-color .3s; } .hcfpc .hcfpc-toggle:hover { border-color: var(--hc-accent); } .hcfpc .hcfpc-toggle-ico { position: relative; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; transition: color .3s; } .hcfpc .hcfpc-toggle-ico .hcfpc-ico { width: 16px; height: 16px; } .hcfpc .hcfpc-toggle-knob { position: absolute; z-index: 1; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--hc-accent), var(--hc-accent-deep)); box-shadow: 0 4px 12px rgba(var(--hc-rgb), .5); transition: transform .4s var(--hc-ease); } .hcfpc[data-mode="dark"] .hcfpc-toggle-knob { transform: translateX(34px); } .hcfpc[data-mode="light"] .hcfpc-toggle-sun, .hcfpc[data-mode="dark"] .hcfpc-toggle-moon { color: var(--hc-on); } .hcfpc .hcfpc-iconbtn { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--hc-border); background: var(--hc-surface-2); color: var(--hc-text); display: grid; place-items: center; box-shadow: none; transition: all .3s; } .hcfpc .hcfpc-iconbtn:hover { color: var(--hc-accent); border-color: var(--hc-accent); transform: translateY(-2px); } .hcfpc .hcfpc-picker { display: inline-flex; gap: 7px; align-items: center; padding: 0 4px; } .hcfpc .hcfpc-dot { width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 2px solid var(--hc-border); background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: none; transition: transform .25s, border-color .25s; } .hcfpc .hcfpc-dot:hover { transform: scale(1.18); } .hcfpc[data-theme] .hcfpc-dot.is-on { border-color: var(--hc-heading); transform: scale(1.12); } /* ======================================================== SHARED UI ===== */ .hcfpc .hcfpc-logo { display: inline-block; margin-bottom: 20px; } .hcfpc .hcfpc-logo img { height: var(--hc-logo-h, 100px); width: auto; max-width: 100%; display: block; } .hcfpc .hcfpc-logo-dark { display: none !important; } .hcfpc[data-mode="dark"] .hcfpc-logo-dark { display: block !important; } .hcfpc[data-mode="dark"] .hcfpc-logo-dark ~ .hcfpc-logo-light, .hcfpc[data-mode="dark"] .hcfpc-logo-light:not(:only-child) { display: none; } .hcfpc[data-mode="dark"] .hcfpc-logo--single { background: #fff; padding: 12px 20px; border-radius: 14px; box-shadow: var(--hc-shadow); } .hcfpc .hcfpc-badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 18px; border-radius: 50px; margin-bottom: 18px; background: rgba(var(--hc-rgb), .12); border: 1px solid rgba(var(--hc-rgb), .38); color: var(--hc-accent); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; } .hcfpc[data-mode="dark"] .hcfpc-badge { color: var(--hc-accent-text); } .hcfpc .hcfpc-badge .hcfpc-ico { width: 15px; height: 15px; } .hcfpc .hcfpc-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--hc-accent); position: relative; } .hcfpc .hcfpc-pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--hc-accent); animation: hcfpc-pulse 2s ease-out infinite; } @keyframes hcfpc-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.2); opacity: 0; } } .hcfpc .hcfpc-head { text-align: center; max-width: 1040px; margin: 0 auto 52px; } .hcfpc .hcfpc-title { font-size: clamp(26px, 3.9vw, 44px); margin-bottom: 16px; } .hcfpc .hcfpc-desc { max-width: 760px; margin-left: auto; margin-right: auto; } .hcfpc .hcfpc-desc { color: var(--hc-muted); font-size: 16.5px; } .hcfpc .hcfpc-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; border-radius: 10px; background: linear-gradient(135deg, var(--hc-accent), var(--hc-accent-deep)); color: var(--hc-on) !important; font-weight: 700; font-size: 14px; box-shadow: 0 10px 24px -6px rgba(var(--hc-rgb), .5); transition: transform .3s, box-shadow .3s; } .hcfpc .hcfpc-btn::before { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); transition: left .7s; } .hcfpc .hcfpc-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -6px rgba(var(--hc-rgb), .65); } .hcfpc .hcfpc-btn:hover::before { left: 130%; } .hcfpc .hcfpc-btn .hcfpc-ico { transition: transform .3s; } .hcfpc .hcfpc-btn:hover .hcfpc-ico { transform: translateX(5px); } .hcfpc .hcfpc-btn--sm { padding: 10px 20px; font-size: 13px; } /* ===================================================== SECTION CARDS ===== */ .hcfpc .hcfpc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; margin-bottom: 44px; } .hcfpc .hcfpc-card, .hcfpc .hcfpc-pillar, .hcfpc .hcfpc-conduct-item { position: relative; overflow: hidden; background: var(--hc-surface); border: 1px solid var(--hc-border); border-radius: var(--hc-radius); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .4s var(--hc-ease), border-color .4s, box-shadow .4s, background-color .4s; } .hcfpc .hcfpc-card { display: flex; flex-direction: column; padding: 0; } .hcfpc .hcfpc-card::before, .hcfpc .hcfpc-pillar::before { /* animated top accent line */ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--hc-accent), var(--hc-accent-2)); transition: transform .6s var(--hc-ease); } .hcfpc .hcfpc-card::after, .hcfpc .hcfpc-pillar::after, .hcfpc .hcfpc-conduct-item::after { /* cursor spotlight */ content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--hc-rgb), .16), transparent 45%); } .hcfpc[data-spot="0"] .hcfpc-card::after, .hcfpc[data-spot="0"] .hcfpc-pillar::after, .hcfpc[data-spot="0"] .hcfpc-conduct-item::after { display: none; } .hcfpc .hcfpc-card:hover, .hcfpc .hcfpc-pillar:hover, .hcfpc .hcfpc-conduct-item:hover { transform: translateY(-7px); border-color: rgba(var(--hc-rgb), .5); background: var(--hc-surface-2); box-shadow: var(--hc-shadow), 0 0 28px rgba(var(--hc-rgb), .12); } .hcfpc .hcfpc-card:hover::before, .hcfpc .hcfpc-pillar:hover::before { transform: scaleX(1); } .hcfpc .hcfpc-card:hover::after, .hcfpc .hcfpc-pillar:hover::after, .hcfpc .hcfpc-conduct-item:hover::after { opacity: 1; } .hcfpc .hcfpc-card-media { position: relative; height: 200px; overflow: hidden; background: linear-gradient(135deg, rgba(var(--hc-rgb), .35), rgba(var(--hc-rgb), .08)); } .hcfpc .hcfpc-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--hc-ease); } .hcfpc .hcfpc-card:hover .hcfpc-card-img { transform: scale(1.09); } .hcfpc .hcfpc-card-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.35)); } .hcfpc .hcfpc-card-ico, .hcfpc .hcfpc-pico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; flex: 0 0 auto; color: var(--hc-on); background: linear-gradient(135deg, var(--hc-accent), var(--hc-alt)); box-shadow: 0 10px 22px -8px rgba(var(--hc-rgb), .7); transition: transform .5s var(--hc-ease); } .hcfpc .hcfpc-card-ico { position: absolute; z-index: 3; left: 26px; top: 173px; } .hcfpc .hcfpc-card-ico .hcfpc-ico, .hcfpc .hcfpc-pico .hcfpc-ico { width: 26px; height: 26px; } .hcfpc .hcfpc-pico { background: linear-gradient(135deg, rgba(var(--hc-rgb), .18), rgba(var(--hc-rgb2), .16)); color: var(--hc-accent-text); border: 1px solid rgba(var(--hc-rgb), .28); box-shadow: none; } .hcfpc .hcfpc-card:hover .hcfpc-card-ico, .hcfpc .hcfpc-pillar:hover .hcfpc-pico, .hcfpc .hcfpc-conduct-item:hover .hcfpc-pico { transform: rotate(-8deg) scale(1.1); } .hcfpc .hcfpc-card-body { position: relative; z-index: 2; padding: 42px 26px 28px; display: flex; flex-direction: column; flex: 1; } .hcfpc .hcfpc-card-title { font-size: 22px; margin-bottom: 10px; } .hcfpc .hcfpc-card-text { color: var(--hc-text); font-size: 14.5px; margin-bottom: 20px; flex: 1; } .hcfpc .hcfpc-link { display: inline-flex; align-items: center; gap: 8px; color: var(--hc-accent) !important; font-weight: 700; font-size: 14px; transition: gap .25s; } .hcfpc[data-mode="dark"] .hcfpc-link { color: var(--hc-accent-text) !important; } .hcfpc .hcfpc-link::after { content: ''; position: absolute; inset: 0; z-index: 4; } /* whole card clickable */ .hcfpc .hcfpc-card:hover .hcfpc-link { gap: 14px; } /* CTA bar */ .hcfpc .hcfpc-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 22px; padding: 30px 34px; border-radius: var(--hc-radius); background: linear-gradient(135deg, rgba(var(--hc-rgb), .14), var(--hc-surface) 70%); border: 1px solid rgba(var(--hc-rgb), .35); margin-top: 10px; } .hcfpc .hcfpc-cta-title { font-size: 20px; margin-bottom: 6px; } .hcfpc .hcfpc-cta p { color: var(--hc-muted); font-size: 14.5px; } /* ============================================================== PAGE ===== */ .hcfpc .hcfpc-hero { position: relative; overflow: hidden; padding: 96px 20px 82px; text-align: center; border-bottom: 1px solid rgba(var(--hc-rgb), .25); background: transparent; } .hcfpc .hcfpc-hero::before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--hc-hero, none) center/cover no-repeat; opacity: .22; transform: scale(1.04); animation: hcfpc-kenburns 24s ease-in-out infinite alternate; } .hcfpc .hcfpc-hero::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, var(--hc-bg) 0%, transparent 35%, transparent 70%, var(--hc-bg-2) 100%); opacity: .9; } @keyframes hcfpc-kenburns { from { transform: scale(1.04); } to { transform: scale(1.14) translateY(-10px); } } .hcfpc .hcfpc-hero .hcfpc-bg { z-index: 1; } .hcfpc .hcfpc-hero-inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; } .hcfpc .hcfpc-h1 { font-size: clamp(28px, 4.3vw, 48px); margin-bottom: 18px; } .hcfpc .hcfpc-sub { font-size: 17.5px; color: var(--hc-text); max-width: 740px; margin: 0 auto; } .hcfpc .hcfpc-chips { display: flex; margin-top: 30px !important; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; } .hcfpc .hcfpc-chip { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; border-radius: 40px; background: var(--hc-surface-2); border: 1px solid var(--hc-border); font-size: 13.5px; font-weight: 600; color: var(--hc-heading); transition: all .3s; } .hcfpc .hcfpc-chip .hcfpc-ico { color: var(--hc-accent); } .hcfpc[data-mode="dark"] .hcfpc-chip .hcfpc-ico { color: var(--hc-accent-text); } .hcfpc .hcfpc-chip:hover { transform: translateY(-3px); border-color: var(--hc-accent); } .hcfpc .hcfpc-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px; margin-top: 26px; font-size: 13.5px; color: var(--hc-muted); } .hcfpc .hcfpc-meta-item { display: inline-flex; align-items: center; gap: 8px; } /* Sticky navigation */ .hcfpc .hcfpc-nav-wrap { position: sticky; top: var(--hc-sticky, 0px); z-index: 60; background: var(--hc-bg); border-bottom: 1px solid var(--hc-border); transition: background-color .45s; } @supports (color: color-mix(in srgb, red, blue)) { .hcfpc .hcfpc-nav-wrap { background: color-mix(in srgb, var(--hc-bg) 84%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } } .hcfpc .hcfpc-nav-inner { max-width: 1180px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 16px; } .hcfpc .hcfpc-nav { display: flex; gap: 10px; overflow-x: auto; flex: 1; scrollbar-width: none; padding: 2px; } .hcfpc .hcfpc-nav::-webkit-scrollbar { display: none; } .hcfpc .hcfpc-nav-item { position: relative; padding: 9px 18px; border-radius: 30px; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--hc-text) !important; background: var(--hc-surface); border: 1px solid var(--hc-border); transition: all .3s; } .hcfpc .hcfpc-nav-item:hover { border-color: var(--hc-accent); color: var(--hc-accent) !important; transform: translateY(-2px); } .hcfpc .hcfpc-nav-item.is-active { background: linear-gradient(135deg, var(--hc-accent), var(--hc-accent-deep)); border-color: transparent; color: var(--hc-on) !important; box-shadow: 0 8px 18px -6px rgba(var(--hc-rgb), .6); } .hcfpc .hcfpc-nav-tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .hcfpc .hcfpc-progress { position: absolute; left: 0; bottom: -1px; height: 3px; width: 0; background: linear-gradient(90deg, var(--hc-accent), var(--hc-accent-2)); transition: width .12s linear; } .hcfpc .hcfpc-body { position: relative; background: transparent; padding: 58px 20px 90px; overflow: hidden; } .hcfpc .hcfpc-body .hcfpc-container { max-width: 1140px; } .hcfpc .hcfpc-block, .hcfpc .hcfpc-split { scroll-margin-top: calc(var(--hc-sticky, 0px) + 96px); } .hcfpc .hcfpc-block { background: var(--hc-surface); border: 1px solid var(--hc-border); border-radius: var(--hc-radius); padding: 38px; margin-bottom: 40px; transition: border-color .35s, background-color .45s; } .hcfpc .hcfpc-block:hover { border-color: rgba(var(--hc-rgb), .35); } .hcfpc .hcfpc-sec-head { font-size: clamp(22px, 3vw, 29px); margin-bottom: 22px; display: flex; align-items: center; gap: 14px; } .hcfpc .hcfpc-sec-head::before { content: ''; flex: 0 0 4px; height: 30px; border-radius: 2px; background: linear-gradient(180deg, var(--hc-accent), var(--hc-accent-2)); transition: height .4s var(--hc-ease); } .hcfpc .hcfpc-sec-head:hover::before { height: 40px; } .hcfpc .hcfpc-sub-head { font-size: 22px; margin-bottom: 18px; } .hcfpc .hcfpc-text { color: var(--hc-text); font-size: 15.5px; line-height: 1.75; margin-bottom: 18px; } .hcfpc .hcfpc-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; margin-top: 26px; } .hcfpc .hcfpc-pillar { padding: 26px 24px; background: var(--hc-bg-2); } .hcfpc .hcfpc-pillar .hcfpc-pico { margin-bottom: 16px; } .hcfpc .hcfpc-pillar-title { font-size: 18px; margin-bottom: 8px; } .hcfpc .hcfpc-pillar-desc { font-size: 14px; color: var(--hc-muted); line-height: 1.65; } .hcfpc .hcfpc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-bottom: 40px; } .hcfpc .hcfpc-split--flat { margin-bottom: 0; gap: 34px; } .hcfpc .hcfpc-figure { position: relative; border-radius: var(--hc-radius); overflow: hidden; border: 1px solid var(--hc-border); box-shadow: var(--hc-shadow); background: linear-gradient(135deg, rgba(var(--hc-rgb), .3), rgba(var(--hc-rgb), .06)); min-height: 240px; } .hcfpc .hcfpc-split-img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; transition: transform 1s var(--hc-ease); } .hcfpc .hcfpc-figure:hover .hcfpc-split-img { transform: scale(1.06); } .hcfpc .hcfpc-figure::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(var(--hc-rgb), .18); border-radius: inherit; } @media (min-width: 861px) { .hcfpc .hcfpc-split--rev .hcfpc-figure { order: 0; } } @media (max-width: 860px) { .hcfpc .hcfpc-split { grid-template-columns: 1fr; gap: 26px; } .hcfpc .hcfpc-block { padding: 26px 20px; } .hcfpc .hcfpc-nav-inner { padding: 10px 14px; } } /* Formula strip */ .hcfpc .hcfpc-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 22px 26px; margin-bottom: 40px; border-radius: var(--hc-radius); background: linear-gradient(135deg, rgba(var(--hc-rgb), .12), var(--hc-surface)); border: 1px dashed rgba(var(--hc-rgb), .5); } .hcfpc .hcfpc-formula-label { font-family: var(--hc-font-head, -apple-system, 'Segoe UI', Roboto, sans-serif); font-weight: 800; font-size: 17px; color: var(--hc-heading); } .hcfpc .hcfpc-eq, .hcfpc .hcfpc-plus { font-weight: 800; font-size: 20px; color: var(--hc-accent); } .hcfpc .hcfpc-term { padding: 8px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--hc-heading); background: var(--hc-surface-2); border: 1px solid var(--hc-border); transition: all .3s; } .hcfpc .hcfpc-term:hover { transform: translateY(-3px) rotate(-1deg); border-color: var(--hc-accent); color: var(--hc-accent); } .hcfpc.is-js:not(.no-anim) .hcfpc-formula .hcfpc-term, .hcfpc.is-js:not(.no-anim) .hcfpc-formula .hcfpc-plus { opacity: 0; transform: scale(.85); } .hcfpc.is-js:not(.no-anim) .hcfpc-formula.is-in .hcfpc-term, .hcfpc.is-js:not(.no-anim) .hcfpc-formula.is-in .hcfpc-plus { opacity: 1; transform: none; transition: opacity .5s ease calc(var(--i, 0) * .14s + .2s), transform .5s var(--hc-ease) calc(var(--i, 0) * .14s + .2s), border-color .3s, color .3s; } /* Table */ .hcfpc .hcfpc-table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--hc-border); } .hcfpc .hcfpc-table { width: 100%; border-collapse: collapse; margin: 0; font-size: 14px; text-align: left; background: transparent; border: 0; } .hcfpc .hcfpc-table th { background: rgba(var(--hc-rgb), .14); color: var(--hc-accent); padding: 15px 20px; font-weight: 700; border: 0; border-bottom: 1px solid rgba(var(--hc-rgb), .3); } .hcfpc[data-mode="dark"] .hcfpc-table th { color: var(--hc-accent-text); } .hcfpc .hcfpc-table td { padding: 15px 20px; color: var(--hc-text); border: 0; border-bottom: 1px solid var(--hc-border); background: transparent; vertical-align: top; transition: background-color .25s; } .hcfpc .hcfpc-table tr:last-child td { border-bottom: 0; } .hcfpc .hcfpc-table tbody tr:hover td { background: rgba(var(--hc-rgb), .07); } .hcfpc .hcfpc-table strong { color: var(--hc-heading); } .hcfpc .hcfpc-tag { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; white-space: nowrap; background: rgba(var(--hc-rgb), .14); color: var(--hc-accent); } .hcfpc[data-mode="dark"] .hcfpc-tag { color: var(--hc-accent-text); } @media (max-width: 640px) { .hcfpc .hcfpc-table thead { display: none; } .hcfpc .hcfpc-table, .hcfpc .hcfpc-table tbody, .hcfpc .hcfpc-table tr, .hcfpc .hcfpc-table td { display: block; width: 100%; } .hcfpc .hcfpc-table tr { padding: 10px 0; border-bottom: 1px solid var(--hc-border); } .hcfpc .hcfpc-table td { border: 0; padding: 6px 16px; } .hcfpc .hcfpc-table td::before { content: attr(data-label); display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--hc-muted); margin-bottom: 2px; } } /* Table: force readable colours in both modes, whatever the theme's table styles are */ .hcfpc .hcfpc-table, .hcfpc .hcfpc-table tbody, .hcfpc .hcfpc-table tr, .hcfpc .hcfpc-table tbody tr:nth-child(odd), .hcfpc .hcfpc-table tbody tr:nth-child(even) { background: transparent !important; } .hcfpc .hcfpc-table tbody tr td, .hcfpc .hcfpc-table tbody tr:nth-child(odd) td, .hcfpc .hcfpc-table tbody tr:nth-child(even) td { background: transparent !important; color: var(--hc-text) !important; } .hcfpc .hcfpc-table tbody tr td strong { color: var(--hc-heading) !important; } .hcfpc .hcfpc-table thead th { background: rgba(var(--hc-rgb), .16) !important; color: var(--hc-accent-text) !important; } .hcfpc .hcfpc-table tbody tr:hover td { background: rgba(var(--hc-rgb), .08) !important; } /* Lists */ .hcfpc .hcfpc-list { display: grid; gap: 12px; margin-top: 8px; } .hcfpc .hcfpc-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--hc-text); padding: 12px 14px; border-radius: 12px; border: 1px solid transparent; transition: all .3s; } .hcfpc .hcfpc-list li:hover { background: var(--hc-surface-2); border-color: var(--hc-border); transform: translateX(6px); } .hcfpc .hcfpc-list .hcfpc-ico { margin-top: 3px; color: var(--hc-accent); width: 20px; height: 20px; } .hcfpc .hcfpc-list strong { color: var(--hc-accent); } .hcfpc[data-mode="dark"] .hcfpc-list strong, .hcfpc[data-mode="dark"] .hcfpc-list .hcfpc-ico { color: var(--hc-accent-text); } .hcfpc .hcfpc-conduct { display: grid; gap: 18px; } .hcfpc .hcfpc-conduct-item { display: flex; gap: 18px; padding: 22px; background: var(--hc-bg-2); } /* Accordion */ .hcfpc .hcfpc-acc { display: grid; gap: 12px; } .hcfpc .hcfpc-acc-item { border: 1px solid var(--hc-border); border-radius: 14px; background: var(--hc-bg-2); transition: border-color .3s, box-shadow .3s; } .hcfpc .hcfpc-acc-item:hover, .hcfpc .hcfpc-acc-item.is-open { border-color: rgba(var(--hc-rgb), .5); } .hcfpc .hcfpc-acc-item.is-open { box-shadow: 0 10px 30px -14px rgba(var(--hc-rgb), .45); } .hcfpc .hcfpc-acc-h { font-size: 16px; margin: 0; } .hcfpc .hcfpc-acc-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; text-align: left; background: transparent; border: 0; box-shadow: none; color: var(--hc-heading); font-family: var(--hc-font-body, sans-serif); font-weight: 700; font-size: 15.5px; border-radius: 14px; } .hcfpc .hcfpc-acc-btn .hcfpc-ico { transition: transform .4s var(--hc-ease); color: var(--hc-accent); } .hcfpc .hcfpc-acc-item.is-open .hcfpc-acc-btn .hcfpc-ico { transform: rotate(180deg); } .hcfpc .hcfpc-acc-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .45s var(--hc-ease), visibility 0s .45s; } .hcfpc .hcfpc-acc-item.is-open .hcfpc-acc-panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .45s var(--hc-ease), visibility 0s; } .hcfpc .hcfpc-acc-inner { overflow: hidden; } .hcfpc .hcfpc-acc-inner p { padding: 0 22px 20px; color: var(--hc-text); font-size: 14.5px; } /* Buttons: keep our look even when the theme styles every