/* ========================================================================== THE CONVERGENCE SYSTEM Design system for the Core Technology group of companies. The visual language derives from the group mark: many lines, one core. One stylesheet, three brands - set a brand class on . ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ :root { /* Neutral spine - shared by every brand */ --ink-900: #040913; --ink-800: #070F1F; --ink-700: #0D1A30; --ink-600: #17284426; --ink-550: #172844; --ink-500: #33456A; --ink-400: #5A6B8C; --ink-350: #7C8BA8; --ink-300: #9AA7BF; --ink-200: #C7D0DF; --ink-150: #DDE4EE; --ink-100: #EAEFF6; --ink-050: #F5F8FC; --paper: #FFFFFF; /* Brand - defaults to Core Technology group; overridden per site. Accents are split by surface because a colour legible on navy is rarely legible on white: --accent bright accent, for DARK surfaces and decoration --accent-text dark accent, for text on LIGHT surfaces (AA contrast) --cta primary button fill, with --on-cta as its text */ --brand-deep: #01102E; --brand: #031842; --brand-mid: #123166; --brand-soft: #E9EEF8; --accent: #F7A503; --accent-text: #8A6100; --accent-ink: #241900; --cta: #F7A503; --cta-hover: #DC9000; --on-cta: #1A1200; /* Signal colours (status, data) */ --pos: #17845A; --warn: #C77700; --neg: #C0392B; --info: #1D6FB8; /* Typography */ --font-display: "Archivo", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace; --font-editorial: "Newsreader", Georgia, serif; --fs-display: clamp(2.85rem, 1.1rem + 6.4vw, 6.1rem); --fs-h1: clamp(2.4rem, 1.3rem + 4.4vw, 4.5rem); --fs-h2: clamp(1.95rem, 1.25rem + 2.7vw, 3.1rem); --fs-h3: clamp(1.3rem, 1.08rem + 0.85vw, 1.75rem); --fs-h4: clamp(1.08rem, 1rem + 0.4vw, 1.28rem); --fs-lede: clamp(1.06rem, 1rem + 0.5vw, 1.32rem); --fs-body: 1.0625rem; --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; --fs-eyebrow: 0.75rem; /* Space */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 44px; --s8: 60px; --s9: 80px; --s10: 112px; --section-y: clamp(64px, 7vw, 128px); --gutter: clamp(20px, 4vw, 40px); --maxw: 1280px; --maxw-narrow: 860px; /* Form */ --radius-sm: 4px; --radius: 8px; --radius-lg: 16px; --hairline: 1px solid var(--ink-150); --hairline-dark: 1px solid rgba(255, 255, 255, 0.14); --shadow-sm: 0 1px 2px rgba(4, 9, 19, .05), 0 2px 8px rgba(4, 9, 19, .04); --shadow: 0 2px 4px rgba(4, 9, 19, .05), 0 12px 32px -8px rgba(4, 9, 19, .12); --shadow-lg: 0 4px 8px rgba(4, 9, 19, .06), 0 32px 64px -16px rgba(4, 9, 19, .22); --ease: cubic-bezier(.22, 1, .36, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); --dur: .5s; --nav-h: 72px; } /* ---- Brand: CoreTech - fuel trading, supply & marketing ---- Deep oxblood carries the type and the hero; the logo red is the accent; the logo sand lights up dark surfaces. */ body.brand-fuel { --brand-deep: #2E0704; --brand: #7A1410; --brand-mid: #E43024; --brand-soft: #FCEEEB; --accent: #C0B490; --accent-text: #A81E16; --accent-ink: #2E2716; --cta: #D9291C; --cta-hover: #B4241B; --on-cta: #FFFFFF; } /* ---- Brand: Core Technology IT - the founding division ---- Carries the parent mark, so it takes the parent's navy and gold exactly. Only --brand-mid differs: a brighter blue gives the division its own reading in links and hover states without leaving the family. */ body.brand-ict { --brand-deep: #01102E; --brand: #031842; --brand-mid: #1F6FEB; --brand-soft: #EAF1FE; --accent: #F7A503; --accent-text: #8A6100; --accent-ink: #241900; --cta: #F7A503; --cta-hover: #DC9000; --on-cta: #1A1200; } /* ---- Brand: CoreMed - healthcare consulting & supply ---- */ body.brand-med { --brand-deep: #000E2E; --brand: #001848; --brand-mid: #00648C; --brand-soft: #E7F2F7; --accent: #4FD1E8; --accent-text: #006B80; --accent-ink: #00232C; --cta: #00738A; --cta-hover: #00596B; --on-cta: #FFFFFF; --crimson: #B41818; } /* -------------------------------------------------------------------------- 2. RESET & BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); /* The off-canvas menu is fixed and parked to the right of the viewport, which otherwise widens the document. clip rather than hidden, because hidden would make this a scroll container and break the sticky nav. */ overflow-x: clip; } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65; color: var(--ink-700); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; font-feature-settings: "kern" 1, "liga" 1, "cv05" 1; } img, svg, video, canvas { display: block; max-width: 100%; } img { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } table { border-collapse: collapse; width: 100%; } ::selection { background: var(--accent); color: var(--accent-ink); } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; } :focus:not(:focus-visible) { outline: none; } .skip-link { position: absolute; left: var(--s4); top: -100px; z-index: 999; background: var(--cta); color: var(--on-cta); padding: 12px 20px; border-radius: var(--radius-sm); font-weight: 700; transition: top .2s var(--ease); } .skip-link:focus { top: var(--s4); } /* -------------------------------------------------------------------------- 3. LAYOUT -------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .wrap-narrow { max-width: var(--maxw-narrow); } .section { padding-block: var(--section-y); position: relative; } .section--tight { padding-block: clamp(48px, 5vw, 80px); } .grid { display: grid; gap: var(--s5); } /* Grid and flex children default to min-width:auto, so a wide child (a data table, a long token) pushes the track past the viewport. Let them shrink; the scroll container inside handles the overflow. */ .grid > *, .split > *, .hero-grid > *, .stat-row > *, .form-grid > * { min-width: 0; } @media (min-width: 720px) { .g-2 { grid-template-columns: repeat(2, 1fr); } .g-3 { grid-template-columns: repeat(3, 1fr); } .g-4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .g-4 { grid-template-columns: repeat(4, 1fr); } .g-3-2 { grid-template-columns: 3fr 2fr; } .g-2-3 { grid-template-columns: 2fr 3fr; } } /* Rigid 12-Column Grid System & Layout Alignment Utilities */ .grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s5); align-items: stretch; } .grid-12 > * { min-width: 0; } .col-span-12 { grid-column: span 12 / span 12; } .col-span-8 { grid-column: span 12 / span 12; } .col-span-7 { grid-column: span 12 / span 12; } .col-span-6 { grid-column: span 12 / span 12; } .col-span-5 { grid-column: span 12 / span 12; } .col-span-4 { grid-column: span 12 / span 12; } .col-span-3 { grid-column: span 12 / span 12; } @media (min-width: 720px) { .col-span-6-md { grid-column: span 6 / span 6; } .col-span-4-md { grid-column: span 4 / span 4; } .col-span-3-md { grid-column: span 3 / span 3; } } @media (min-width: 1040px) { .col-span-8 { grid-column: span 8 / span 8; } .col-span-7 { grid-column: span 7 / span 7; } .col-span-6 { grid-column: span 6 / span 6; } .col-span-5 { grid-column: span 5 / span 5; } .col-span-4 { grid-column: span 4 / span 4; } .col-span-3 { grid-column: span 3 / span 3; } } /* Card Height Normalization & Rigid Alignment */ .card, .board-cell, .service-card, .corridor-card, .co-card, .feat-card, .prod { display: flex; flex-direction: column; height: 100%; } .stack > * + * { margin-top: var(--s4); } .stack-lg > * + * { margin-top: var(--s6); } /* Surfaces */ .surface-dark { background: var(--brand-deep); color: #E8EDF6; } .surface-brand { background: var(--brand); color: #E8EDF6; } .surface-tint { background: var(--ink-050); } .surface-soft { background: var(--brand-soft); } .surface-dark h1, .surface-dark h2, .surface-dark h3, .surface-brand h1, .surface-brand h2, .surface-brand h3 { color: #fff; } /* -------------------------------------------------------------------------- 4. TYPOGRAPHY -------------------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.08; letter-spacing: -.025em; color: var(--brand); text-wrap: balance; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; } h4 { font-size: var(--fs-h4); font-weight: 700; letter-spacing: -.01em; line-height: 1.3; } p { text-wrap: pretty; } .display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 900; line-height: .96; letter-spacing: -.04em; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text); margin-bottom: var(--s4); } .eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; } :is(.surface-dark, .surface-brand, .hero, .cta) .eyebrow { color: var(--accent); } .lede { font-size: var(--fs-lede); line-height: 1.6; color: var(--ink-500); max-width: 68ch; } :is(.surface-dark, .surface-brand, .hero, .cta) .lede { color: rgba(255, 255, 255, .78); } .muted { color: var(--ink-400); } :is(.surface-dark, .surface-brand, .hero, .cta) .muted { color: rgba(255, 255, 255, .68); } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .editorial { font-family: var(--font-editorial); font-weight: 400; } .section-head { max-width: 70ch; margin-bottom: clamp(36px, 4vw, 64px); } .section-head.center { margin-inline: auto; text-align: center; } .section-head.center .eyebrow { justify-content: center; } .section-head.center .lede { margin-inline: auto; } .section-head h2 + .lede { margin-top: var(--s4); } /* -------------------------------------------------------------------------- 5. THE CONVERGENCE MOTIF Lines from the edges resolving to a single point - the group mark, alive. -------------------------------------------------------------------------- */ .converge { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; } .converge svg { width: 100%; height: 100%; } .converge path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .3; } .converge .lit { opacity: .85; stroke-width: 1.5; } /* draw-in */ .converge path { stroke-dasharray: var(--len, 2400); stroke-dashoffset: var(--len, 2400); animation: draw 2.4s var(--ease) forwards; animation-delay: calc(var(--i, 0) * .13s); } @keyframes draw { to { stroke-dashoffset: 0; } } /* travelling pulse along a corridor */ .pulse-dot { fill: var(--accent); opacity: .9; filter: drop-shadow(0 0 6px var(--accent)); } /* Hairline grid backdrop - the "ledger" texture */ .ledger-bg::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 88px 88px; mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 78%); pointer-events: none; } .ledger-bg--light::before { background-image: linear-gradient(to right, rgba(2, 27, 74, .06) 1px, transparent 1px), linear-gradient(to bottom, rgba(2, 27, 74, .06) 1px, transparent 1px); } /* -------------------------------------------------------------------------- 6. GROUP BAR + NAVIGATION -------------------------------------------------------------------------- */ .groupbar { background: var(--ink-900); color: rgba(255, 255, 255, .62); font-size: var(--fs-xs); border-bottom: 1px solid rgba(255, 255, 255, .07); } .groupbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); min-height: 40px; flex-wrap: wrap; } .groupbar-label { font-family: var(--font-mono); letter-spacing: .16em; text-transform: uppercase; font-size: 11px; color: rgba(255, 255, 255, .42); } .groupbar-links { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; } .groupbar-links a { padding: 6px 12px; border-radius: var(--radius-sm); font-weight: 500; transition: color .2s, background .2s; position: relative; } .groupbar-links a:hover { color: #fff; background: rgba(255, 255, 255, .07); } .groupbar-links a[aria-current="true"] { color: #fff; } .groupbar-links a[aria-current="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--accent); border-radius: 2px; } .nav { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .82); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: var(--hairline); transition: box-shadow .3s var(--ease), background .3s; } .nav.is-stuck { box-shadow: var(--shadow-sm); background: rgba(255, 255, 255, .94); } .nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); min-height: var(--nav-h); } /* Logo lockups are pinned to a fixed height and their true aspect ratio, so a mark never stretches, rescales on load, or shifts the header. aspect-ratio reserves the box before the file arrives; flex-shrink:0 stops a crowded header from squeezing it. Do not add transforms or hover scaling here. */ .brandmark { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; } .brandmark img { width: auto; flex-shrink: 0; object-fit: contain; max-width: none; } .brandmark .mark { height: 42px; aspect-ratio: 400 / 373; } .brandmark .lockup { height: 34px; } body.brand-fuel .brandmark .lockup { aspect-ratio: 640 / 149; } body.brand-med .brandmark .lockup { aspect-ratio: 640 / 157; } @media (max-width: 480px) { .brandmark .mark { height: 34px; } .brandmark .lockup { height: 28px; } } .brandmark-text { display: flex; flex-direction: column; line-height: 1.05; } .brandmark-text .n { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -.02em; color: var(--brand); } .brandmark-text .t { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-400); margin-top: 2px; } .nav-links { display: none; align-items: center; gap: 2px; } @media (min-width: 1000px) { .nav-links { display: flex; } } .nav-links a { padding: 9px 14px; border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 500; color: var(--ink-550); transition: color .2s, background .2s; } .nav-links a:hover { color: var(--brand); background: var(--ink-050); } .nav-actions { display: flex; align-items: center; gap: var(--s3); } /* Below this width the header CTA and the menu button no longer fit beside the brandmark; the CTA moves into the drawer instead. */ @media (max-width: 660px) { .nav-actions > .btn { display: none; } } .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; border-radius: var(--radius-sm); border: var(--hairline); } @media (min-width: 1000px) { .nav-toggle { display: none; } } .nav-toggle span { display: block; height: 2px; width: 100%; background: var(--brand); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Off-canvas side menu. Slides in over the page rather than pushing it down, so the hero keeps its position while the menu is open. */ .nav-scrim { position: fixed; inset: 0; background: rgba(4, 9, 19, .58); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .32s var(--ease), visibility .32s; z-index: 190; } .nav-scrim.open { opacity: 1; visibility: visible; } @media (min-width: 1000px) { .nav-scrim { display: none; } } .nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(392px, 88vw); height: 100dvh; z-index: 200; background: var(--brand-deep); color: #fff; transform: translateX(100%); /* A fixed panel parked off-screen still extends the document's scroll area, which shows up as horizontal overflow on small screens. visibility takes it out of that calculation; the delay lets the slide-out finish first. */ visibility: hidden; transition: transform .38s var(--ease), visibility 0s linear .38s; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; box-shadow: -24px 0 60px -20px rgba(0, 0, 0, .6); } .nav-drawer.open { transform: none; visibility: visible; transition: transform .38s var(--ease), visibility 0s; } @media (min-width: 1000px) { .nav-drawer { display: none; } } .nav-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s5) var(--s6); border-bottom: 1px solid rgba(255, 255, 255, .12); flex-shrink: 0; } .nav-drawer-title { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); } .nav-close { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); color: #fff; transition: background .2s, border-color .2s, transform .2s var(--ease); } .nav-close:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .45); } .nav-close svg { width: 17px; height: 17px; } /* Menu items are full-width rows, one per line, with a divider between. */ .nav-drawer-list { display: flex; flex-direction: column; padding: var(--s3) 0; } .nav-drawer-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: 17px var(--s6); font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .08); transition: background .2s, padding-left .25s var(--ease), color .2s; } .nav-drawer-list a:last-child { border-bottom: 0; } .nav-drawer-list a::after { content: ""; width: 7px; height: 7px; flex-shrink: 0; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); opacity: .38; transition: opacity .2s, transform .25s var(--ease); } .nav-drawer-list a:hover { background: rgba(255, 255, 255, .07); padding-left: calc(var(--s6) + 6px); color: var(--accent); } .nav-drawer-list a:hover::after { opacity: 1; transform: rotate(45deg) translate(2px, -2px); } .nav-drawer-foot { margin-top: auto; padding: var(--s6); border-top: 1px solid rgba(255, 255, 255, .12); display: grid; gap: 10px; flex-shrink: 0; } .nav-drawer-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .4); margin-bottom: 2px; } .nav-drawer-foot a.sib { display: flex; align-items: center; gap: 9px; font-size: var(--fs-sm); color: rgba(255, 255, 255, .74); padding: 5px 0; transition: color .2s; } .nav-drawer-foot a.sib::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .nav-drawer-foot a.sib:hover { color: #fff; } .nav-drawer-foot .btn { margin-top: var(--s4); width: 100%; } body.menu-open { overflow: hidden; } /* -------------------------------------------------------------------------- 7. BUTTONS -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: .875rem; letter-spacing: .01em; padding: 14px 26px; border-radius: var(--radius-sm); border: 1.5px solid transparent; transition: transform .2s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .2s; white-space: nowrap; text-align: center; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn svg { width: 17px; height: 17px; flex-shrink: 0; } .btn-primary { background: var(--cta); color: var(--on-cta); box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--cta) 55%, transparent); } .btn-primary:hover { background: var(--cta-hover); box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--cta) 65%, transparent); } .btn-solid { background: var(--brand); color: #fff; } .btn-solid:hover { background: var(--brand-mid); } .btn-outline { border-color: var(--ink-200); color: var(--brand); background: transparent; } .btn-outline:hover { border-color: var(--brand); background: var(--ink-050); } :is(.surface-dark, .surface-brand, .hero, .cta) .btn-outline { border-color: rgba(255, 255, 255, .36); color: #fff; } :is(.surface-dark, .surface-brand, .hero, .cta) .btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, .1); } .btn-ghost { color: var(--brand); padding-inline: 6px; } .btn-ghost:hover { color: var(--brand-mid); } .btn-lg { padding: 17px 34px; font-size: .95rem; } .btn-sm { padding: 10px 18px; font-size: .8125rem; } .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: .875rem; color: var(--brand-mid); transition: gap .25s var(--ease), color .2s; } .link-arrow::after { content: "→"; transition: transform .25s var(--ease); } .link-arrow:hover { color: var(--brand); } .link-arrow:hover::after { transform: translateX(4px); } .surface-dark .link-arrow { color: var(--accent); } /* -------------------------------------------------------------------------- 8. HERO -------------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; background: radial-gradient(ellipse 120% 90% at 18% 12%, color-mix(in srgb, var(--brand-mid) 42%, transparent) 0%, transparent 62%), linear-gradient(168deg, var(--brand) 0%, var(--brand-deep) 72%); color: #fff; isolation: isolate; } .hero .converge { color: #fff; z-index: 0; } .hero-inner { position: relative; z-index: 2; padding-block: clamp(72px, 11vw, 168px); } .hero-grid { display: grid; gap: clamp(40px, 5vw, 72px); align-items: center; } @media (min-width: 1000px) { .hero-grid { grid-template-columns: 1.15fr .85fr; } } .hero h1 { color: #fff; } .hero .display em { font-style: normal; color: var(--accent); position: relative; } .hero-lede { font-size: var(--fs-lede); color: rgba(255, 255, 255, .8); max-width: 56ch; margin-top: var(--s5); } .hero-cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s7); } .hero-meta { display: flex; flex-wrap: wrap; gap: var(--s6); margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid rgba(255, 255, 255, .16); } .hero-meta div { min-width: 108px; } .hero-meta .k { font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 800; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; } .hero-meta .l { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-top: 8px; } /* ---- Hero variant: statement left, data board across the foot (CoreTech). No side panel, so the headline gets the full measure and the sourcing regions read as a trading board rather than a card. ---- */ .hero--board .hero-inner { padding-bottom: clamp(44px, 5vw, 68px); } .hero--board .hero-lead { max-width: 60ch; } .hero-board { position: relative; z-index: 2; border-top: 1px solid rgba(255, 255, 255, .14); background: rgba(0, 0, 0, .24); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding-block: clamp(22px, 3vw, 34px); } .board-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); } .board-title { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); } .board-grid { display: grid; gap: 1px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius); overflow: hidden; } @media (min-width: 620px) { .board-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .board-grid { grid-template-columns: repeat(4, 1fr); } } .board-cell { background: var(--brand-deep); padding: var(--s5); display: grid; gap: 5px; align-content: start; transition: background .3s; } .board-cell:hover { background: rgba(255, 255, 255, .06); } .board-cell .bc { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--accent); } .board-cell strong { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: #fff; } .board-cell .bd { font-size: .8125rem; color: rgba(255, 255, 255, .6); line-height: 1.45; } .board-note { margin-top: var(--s5); font-size: .8125rem; color: rgba(255, 255, 255, .62); max-width: 80ch; } /* ---- Hero variant: centred statement over a process stepper (CoreMed) ---- The wrapper is sized in px, not ch: a ch measure is set by the 16px body font and would squeeze the display type onto four lines. */ .hero--centred .hero-centre { max-width: 940px; margin-inline: auto; text-align: center; } .hero--centred .eyebrow { justify-content: center; } .hero--centred .hero-lede { max-width: 52ch; margin-inline: auto; } .hero--centred .hero-cta { justify-content: center; } .hero--centred h1 { text-wrap: balance; } .hero--centred .hero-inner { padding-bottom: clamp(52px, 6vw, 92px); } /* content sits over the focal point in this variant, so the line work is held back further than on the other two heroes */ .hero--centred .converge path { opacity: .16; } .hero--centred .converge .lit { opacity: .46; } .stepper { position: relative; z-index: 2; display: grid; gap: var(--s6); margin-top: clamp(46px, 6vw, 82px); } @media (min-width: 780px) { .stepper { grid-template-columns: repeat(4, 1fr); gap: var(--s4); } .stepper::before { /* the line the phases sit on */ content: ""; position: absolute; top: 19px; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3) 14%, rgba(255, 255, 255, .3) 86%, transparent); } } .stepper li { position: relative; text-align: center; } .stepper .sn { position: relative; z-index: 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto var(--s4); background: var(--brand-deep); border: 1px solid rgba(255, 255, 255, .3); font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--accent); } .stepper strong { display: block; font-family: var(--font-display); font-size: 1.05rem; color: #fff; margin-bottom: 6px; } .stepper .sd { display: block; font-size: .8125rem; color: rgba(255, 255, 255, .62); line-height: 1.5; max-width: 26ch; margin-inline: auto; } .stepper-note { position: relative; z-index: 2; text-align: center; margin-top: var(--s7); font-size: .8125rem; color: rgba(255, 255, 255, .6); max-width: 62ch; margin-inline: auto; } /* Hero side panel - the "desk" */ .hero-panel { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .13); border-radius: var(--radius-lg); padding: var(--s6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .5); } .hero-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid rgba(255, 255, 255, .13); margin-bottom: var(--s4); } .hero-panel-head h3 { font-size: .95rem; color: #fff; letter-spacing: 0; } .live-dot { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); } .live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #24C08A; box-shadow: 0 0 0 0 rgba(36, 192, 138, .7); animation: ping 2.2s infinite; } @keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(36, 192, 138, .6); } 70% { box-shadow: 0 0 0 9px rgba(36, 192, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(36, 192, 138, 0); } } /* -------------------------------------------------------------------------- 9. CARDS -------------------------------------------------------------------------- */ .card { position: relative; background: var(--paper); border: var(--hairline); border-radius: var(--radius); padding: var(--s6); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s; height: 100%; display: flex; flex-direction: column; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--ink-200); } .card h3 { margin-bottom: var(--s3); } .card p { color: var(--ink-400); font-size: var(--fs-sm); } .card-num { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; color: var(--accent-text); letter-spacing: .1em; margin-bottom: var(--s4); display: block; } .card-ico { width: 46px; height: 46px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); margin-bottom: var(--s5); flex-shrink: 0; } .card-ico svg { width: 23px; height: 23px; stroke-width: 1.7; } /* accent rule that grows on hover */ .card--rule { padding-top: calc(var(--s6) + 4px); overflow: hidden; } .card--rule::before { content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 44px; background: var(--cta); transition: width .45s var(--ease); } .card:hover.card--rule::before { width: 100%; } .card--dark { background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .8); } .card--dark h3 { color: #fff; } .card--dark p { color: rgba(255, 255, 255, .66); } .card--dark:hover { background: rgba(255, 255, 255, .075); border-color: rgba(255, 255, 255, .24); } .card--dark .card-ico { background: rgba(255, 255, 255, .1); color: var(--accent); } :is(.surface-dark, .surface-brand, .hero, .cta) .card--rule::before { background: var(--accent); } /* Three operating companies. Two columns would leave one card orphaned on a second row, so the layout goes one column, then three, and the middle band spans the third card across both columns. */ .co-grid { display: grid; gap: var(--s5); } @media (min-width: 700px) and (max-width: 1059px) { .co-grid { grid-template-columns: repeat(2, 1fr); } .co-grid > :last-child { grid-column: 1 / -1; } } @media (min-width: 1060px) { .co-grid { grid-template-columns: repeat(3, 1fr); } } .co-grid > * { min-width: 0; } /* Company card - the portal's centrepiece */ .co-card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: var(--paper); border: var(--hairline); transition: transform .4s var(--ease), box-shadow .4s var(--ease); height: 100%; } .co-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } /* The header is a light surface so each subsidiary's own logo can appear in its real colours. Brand identity is carried by the rule along the top edge, the tinted ground and the heading colour, rather than a colour wash, which would force a monochrome knockout and throw the real marks away. */ .co-card-top { position: relative; padding: clamp(26px, 3vw, 38px); background: var(--co-tint, var(--ink-050)); border-bottom: 1px solid var(--ink-150); overflow: hidden; min-height: 208px; display: flex; flex-direction: column; justify-content: flex-end; } .co-card-top::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 3; background: var(--co-accent, var(--accent)); } .co-card-top .converge { color: var(--co-ink, var(--brand)); opacity: .18; } .co-card-logo { position: relative; z-index: 2; height: 44px; width: auto; align-self: flex-start; flex-shrink: 0; object-fit: contain; max-width: 220px; margin-bottom: auto; } .co-card-logo[alt="Core Technology IT"] { aspect-ratio: 640 / 160; } .co-card-logo[alt="CoreMed"] { aspect-ratio: 640 / 160; } .co-card-logo[alt="CoreTech"] { aspect-ratio: 640 / 160; } @media (max-width: 520px) { .co-card-logo { height: 34px; } } .footer-brand img.mark { aspect-ratio: 400 / 373; object-fit: contain; } .group-sublink { transition: opacity 0.2s ease, color 0.2s ease; } .group-sublink:hover { opacity: 1; color: var(--accent, #F7A503) !important; } .co-card-img { position: relative; z-index: 2; width: 100%; height: 135px; max-height: 135px; border-radius: var(--radius); overflow: hidden; margin-top: var(--s4); background: transparent; flex-shrink: 0; } .co-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius); } .co-card-top h3 { position: relative; z-index: 2; color: var(--co-ink, var(--brand)); font-size: 1.5rem; margin-top: var(--s5); line-height: 1.25; min-height: 1.8em; } .co-card-top .tag { position: relative; z-index: 2; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-400); margin-top: 8px; min-height: 2.4em; display: flex; align-items: center; } .co-card-body { padding: var(--s6); flex: 1; display: flex; flex-direction: column; } .co-card-body p { color: var(--ink-400); font-size: var(--fs-sm); } .co-card-list { margin: var(--s5) 0 var(--s6); display: grid; gap: 10px; } .co-card-list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-500); } .co-card-list li::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: var(--co-accent, var(--accent)); } .co-card-foot { margin-top: auto; padding-top: var(--s4); border-top: var(--hairline); } /* -------------------------------------------------------------------------- 10. STATS / DATA -------------------------------------------------------------------------- */ .stat-row { display: grid; gap: 1px; background: var(--ink-150); border: var(--hairline); border-radius: var(--radius); overflow: hidden; } @media (min-width: 640px) { .stat-row { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .stat-row { grid-template-columns: repeat(4, 1fr); } } .stat { background: var(--paper); padding: var(--s6) var(--s5); transition: background .3s; } .stat:hover { background: var(--ink-050); } .stat .v { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); font-weight: 800; color: var(--brand); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .stat .v sup { font-size: .5em; color: var(--accent-text); top: -.7em; } .stat .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-350); margin-top: 12px; } .stat .d { font-size: var(--fs-xs); color: var(--ink-400); margin-top: 8px; line-height: 1.5; } .surface-dark .stat-row, .surface-brand .stat-row { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .14); } .surface-dark .stat, .surface-brand .stat { background: var(--brand-deep); } .surface-dark .stat:hover, .surface-brand .stat:hover { background: rgba(255, 255, 255, .04); } .surface-dark .stat .v, .surface-brand .stat .v { color: var(--accent); } .surface-dark .stat .d, .surface-brand .stat .d { color: rgba(255, 255, 255, .6); } /* Data table */ .table-wrap { overflow-x: auto; border: var(--hairline); border-radius: var(--radius); background: var(--paper); } .dtable { font-size: var(--fs-sm); min-width: 620px; } .dtable th, .dtable td { padding: 14px 18px; text-align: left; border-bottom: var(--hairline); } .dtable thead th { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-350); font-weight: 600; background: var(--ink-050); white-space: nowrap; } .dtable tbody tr:last-child td { border-bottom: 0; } .dtable tbody tr { transition: background .2s; } .dtable tbody tr:hover { background: var(--ink-050); } .dtable .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; } .dtable .name { font-weight: 600; color: var(--brand); } .pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; background: var(--ink-100); color: var(--ink-500); white-space: nowrap; } .pill--pos { background: color-mix(in srgb, var(--pos) 13%, transparent); color: var(--pos); } .pill--warn { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); } .pill--neg { background: color-mix(in srgb, var(--neg) 12%, transparent); color: var(--neg); } .pill--brand { background: var(--brand-soft); color: var(--brand); } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pill--plain::before { display: none; } /* -------------------------------------------------------------------------- 11. FEATURE SPLIT / MEDIA -------------------------------------------------------------------------- */ .split { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; } @media (min-width: 940px) { .split { grid-template-columns: 1fr 1fr; } .split--wide-l { grid-template-columns: 1.2fr .8fr; } .split--wide-r { grid-template-columns: .8fr 1.2fr; } .split .flip { order: -1; } } .figure { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--brand); aspect-ratio: 16 / 9; max-height: 320px; box-shadow: var(--shadow-lg); } .figure img { width: 100%; height: 100%; object-fit: cover; } .figure-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s7) var(--s5) var(--s5); background: linear-gradient(transparent, rgba(4, 9, 19, .88)); color: #fff; font-size: var(--fs-sm); } /* -------------------------------------------------------------------------- MEDIA BAND A full-width photographic break between sections. The image is duotoned towards the brand colour so it reads as texture belonging to the page, never as a photograph of something the company owns. Text sits on the gradient, not on the picture detail. -------------------------------------------------------------------------- */ .band { position: relative; isolation: isolate; height: clamp(160px, 18vw, 240px); max-height: 240px; display: grid; align-items: end; overflow: hidden; background: var(--brand-deep); } .band img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; /* lifted, because the tint below sits on top and several of these sources are already low-key */ filter: grayscale(.4) contrast(1.04) brightness(1.18); } .band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--brand-deep) 22%, transparent) 0%, color-mix(in srgb, var(--brand-deep) 72%, transparent) 100%), linear-gradient(90deg, color-mix(in srgb, var(--brand-deep) 82%, transparent) 0%, color-mix(in srgb, var(--brand-deep) 30%, transparent) 46%, transparent 72%); } .band .wrap { padding-block: clamp(28px, 4vw, 48px); position: relative; } .band-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.35rem, 1rem + 1.6vw, 2.1rem); letter-spacing: -.02em; color: #fff; max-width: 22ch; text-wrap: balance; } .band-note { margin-top: 10px; font-size: var(--fs-sm); color: rgba(255, 255, 255, .74); max-width: 56ch; } .band-credit { position: absolute; right: var(--gutter); bottom: 10px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .3); } @media (prefers-reduced-motion: no-preference) { .band img { transition: transform 1.2s var(--ease); } .band:hover img { transform: scale(1.03); } } /* Checklist */ .checks { display: grid; gap: 14px; margin-top: var(--s5); } .checks li { display: flex; gap: 13px; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-500); } .checks li svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--accent-text); } :is(.surface-dark, .surface-brand, .hero, .cta) .checks li { color: rgba(255, 255, 255, .76); } :is(.surface-dark, .surface-brand, .hero, .cta) .checks li svg { color: var(--accent); } /* -------------------------------------------------------------------------- 12. ACCORDION / TABS -------------------------------------------------------------------------- */ .acc { border-top: var(--hairline); } .acc-item { border-bottom: var(--hairline); } .acc-btn { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5); padding: var(--s5) 0; text-align: left; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--brand); transition: color .2s; } .acc-btn:hover { color: var(--brand-mid); } .acc-btn .n { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; color: var(--accent-text); flex-shrink: 0; width: 34px; padding-top: 4px; } .acc-btn .t { flex: 1; } .acc-icon { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--ink-200); display: grid; place-items: center; transition: transform .35s var(--ease), background .25s, border-color .25s; margin-top: 2px; } .acc-icon::before, .acc-icon::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; } .acc-icon::before { width: 11px; height: 1.5px; } .acc-icon::after { width: 1.5px; height: 11px; transition: opacity .25s, transform .35s var(--ease); } .acc-btn[aria-expanded="true"] .acc-icon { background: var(--cta); border-color: var(--cta); color: var(--on-cta); transform: rotate(180deg); } .acc-btn[aria-expanded="true"] .acc-icon::after { opacity: 0; } .acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); } .acc-panel > div { overflow: hidden; } .acc-btn[aria-expanded="true"] + .acc-panel { grid-template-rows: 1fr; } .acc-panel p { padding: 0 0 var(--s5) 34px; color: var(--ink-400); font-size: var(--fs-sm); max-width: 74ch; } @media (max-width: 560px) { .acc-panel p { padding-left: 0; } } .tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: var(--hairline); margin-bottom: var(--s6); } .tab { padding: 12px 18px; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--ink-400); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s, border-color .2s; } .tab:hover { color: var(--brand); } .tab[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--cta); } .tabpanel[hidden] { display: none; } /* -------------------------------------------------------------------------- 13. TIMELINE -------------------------------------------------------------------------- */ .timeline { position: relative; display: grid; gap: var(--s7); } .timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(var(--cta), var(--ink-150)); } .tl-item { position: relative; padding-left: 40px; } .tl-item::before { content: ""; position: absolute; left: 0; top: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--paper); border: 3px solid var(--cta); } .tl-item .y { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; color: var(--accent-text); } .tl-item h3 { margin: 6px 0 8px; font-size: 1.15rem; } .tl-item p { color: var(--ink-400); font-size: var(--fs-sm); max-width: 62ch; } :is(.surface-dark, .surface-brand, .hero, .cta) .timeline::before { background: linear-gradient(var(--accent), rgba(255, 255, 255, .15)); } :is(.surface-dark, .surface-brand, .hero, .cta) .tl-item::before { background: var(--brand-deep); border-color: var(--accent); } .surface-dark .tl-item p { color: rgba(255, 255, 255, .66); } /* -------------------------------------------------------------------------- 14. QUOTE -------------------------------------------------------------------------- */ .quote { max-width: 62ch; } .quote blockquote { font-family: var(--font-editorial); font-size: clamp(1.35rem, 1rem + 1.7vw, 2.1rem); line-height: 1.35; letter-spacing: -.015em; color: var(--brand); } .surface-dark .quote blockquote, .surface-brand .quote blockquote { color: #fff; } .quote cite { display: block; margin-top: var(--s5); font-family: var(--font-mono); font-style: normal; font-size: var(--fs-xs); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-350); } .surface-dark .quote cite { color: rgba(255, 255, 255, .5); } /* -------------------------------------------------------------------------- 15. CTA BAND -------------------------------------------------------------------------- */ .cta { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--brand) 0%, var(--brand-deep) 100%); color: #fff; border-radius: var(--radius-lg); padding: clamp(40px, 6vw, 76px); isolation: isolate; } .cta .converge { color: #fff; } .cta-inner { position: relative; z-index: 2; } .cta h2 { color: #fff; max-width: 20ch; } .cta .lede { color: rgba(255, 255, 255, .78); margin-top: var(--s4); } .cta-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); } /* -------------------------------------------------------------------------- 16. FOOTER -------------------------------------------------------------------------- */ .footer { background: var(--ink-900); color: rgba(255, 255, 255, .62); padding-block: var(--s9) var(--s6); font-size: var(--fs-sm); } .footer-grid { display: grid; gap: var(--s7); } @media (min-width: 760px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } } @media (min-width: 1060px) { .footer-grid { grid-template-columns: 1.8fr 1fr 1fr 1.2fr; } } .footer h4 { color: #fff; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin-bottom: var(--s5); } .footer a { transition: color .2s; } .footer a:hover { color: var(--accent); } .footer-links { display: grid; gap: 11px; } .footer-brand .footer-logo { height: 44px; width: auto; border-radius: 0; margin-bottom: 12px; } .footer-brand p { max-width: 40ch; font-size: var(--fs-sm); } .footer-bottom { margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid rgba(255, 255, 255, .1); display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); align-items: center; justify-content: space-between; font-size: var(--fs-xs); color: rgba(255, 255, 255, .42); } .addr { font-style: normal; line-height: 1.8; } /* -------------------------------------------------------------------------- 16B. PARENT GROUP MASCOT & FOOTER BADGE -------------------------------------------------------------------------- */ .footer-parent-badge { display: flex; align-items: center; gap: var(--s4); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: var(--s5); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); position: relative; overflow: hidden; } .footer-parent-badge::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #F7A503, #00A0BE, #E43024); } .parent-mascot-avatar { position: relative; flex-shrink: 0; width: 64px; height: 80px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); background: #000; } .parent-mascot-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .parent-group-pill { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 7.5px; font-weight: 700; letter-spacing: 0.08em; color: #fff; background: rgba(2, 27, 74, 0.9); backdrop-filter: blur(4px); padding: 2px 4px; border-radius: 3px; white-space: nowrap; border: 1px solid rgba(255, 255, 255, 0.25); } .parent-brand-details { display: flex; flex-direction: column; gap: 6px; } .parent-brand-details img.footer-logo { height: 34px; width: auto; align-self: flex-start; margin-bottom: 0; } .parent-brand-details p { font-size: var(--fs-xs); line-height: 1.45; color: rgba(255, 255, 255, 0.72); margin: 0; } .parent-mascot-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #000; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); margin-top: var(--s5); } .parent-mascot-card img { width: 100%; height: 240px; object-fit: cover; object-position: center top; display: block; filter: brightness(0.92) contrast(1.05); } .parent-mascot-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 27, 74, 0) 20%, rgba(2, 27, 74, 0.92) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 16px 20px; } .parent-mascot-card-overlay span.tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--accent); text-transform: uppercase; font-weight: 600; } .parent-mascot-card-overlay h4 { color: #fff; font-size: 1.05rem; margin-top: 2px; font-weight: 700; } /* -------------------------------------------------------------------------- 17. MOTION / REVEAL -------------------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); } [data-reveal].in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1; transform: none; } .converge path { stroke-dashoffset: 0; } } /* -------------------------------------------------------------------------- 18. UTILITIES -------------------------------------------------------------------------- */ .center { text-align: center; } .mt-0 { margin-top: 0; } .mt-4 { margin-top: var(--s4); } .mt-5 { margin-top: var(--s5); } .mt-6 { margin-top: var(--s6); } .mt-7 { margin-top: var(--s7); } .mt-8 { margin-top: var(--s8); } .mb-0 { margin-bottom: 0; } .mb-5 { margin-bottom: var(--s5); } .mb-6 { margin-bottom: var(--s6); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .divider { height: 1px; background: var(--ink-150); border: 0; } .surface-dark .divider { background: rgba(255, 255, 255, .12); } .accent-rule { width: 52px; height: 3px; background: var(--cta); border: 0; border-radius: 2px; } .no-wrap { white-space: nowrap; } @media print { .nav, .groupbar, .nav-drawer, .converge, .cta { display: none !important; } body { color: #000; background: #fff; } [data-reveal] { opacity: 1 !important; transform: none !important; } } /* -------------------------------------------------------------------------- 19. IT PORTAL ENHANCED IMAGE CARDS -------------------------------------------------------------------------- */ .it-hero-grid { display: grid; gap: var(--s6); align-items: center; } @media (min-width: 960px) { .it-hero-grid { grid-template-columns: 1.15fr 0.85fr; } } .it-hero-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); background: var(--brand-deep); height: 100%; min-height: 360px; align-self: stretch; } .it-hero-card img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; display: block; transition: transform 0.6s var(--ease); } .it-hero-card:hover img { transform: scale(1.04); } .it-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1, 16, 46, 0.1) 20%, rgba(1, 16, 46, 0.95) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; } .it-hero-overlay span.badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--accent); text-transform: uppercase; font-weight: 600; margin-bottom: 4px; } .it-hero-overlay h3 { color: #fff; font-size: 1.2rem; font-weight: 700; margin: 0; } .it-img-card { border-radius: var(--radius-md); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); background: var(--brand-deep); position: relative; } .it-img-card img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform 0.5s var(--ease); } .it-img-card:hover img { transform: scale(1.04); } .card-feature-img { width: 100%; height: 140px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: var(--s4); border: 1px solid rgba(255, 255, 255, 0.1); display: block; transition: transform 0.4s var(--ease); } .card:hover .card-feature-img { transform: scale(1.02); } .comp-img { width: 100%; height: 130px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 12px; border: 1px solid rgba(255, 255, 255, 0.1); display: block; background: var(--brand-deep); transition: transform 0.3s var(--ease); } .comp:hover .comp-img { transform: scale(1.03); } /* -------------------------------------------------------------------------- 20. COREMED MEDICAL PORTAL ENHANCED IMAGE CARDS -------------------------------------------------------------------------- */ .med-hero-grid { display: grid; gap: var(--s6); align-items: center; } @media (min-width: 960px) { .med-hero-grid { grid-template-columns: 1.15fr 0.85fr; } } .med-hero-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); background: var(--brand-deep); height: 100%; min-height: 360px; align-self: stretch; } .med-hero-card img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; display: block; transition: transform 0.6s var(--ease); } .med-hero-card:hover img { transform: scale(1.04); } .med-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 14, 46, 0.1) 20%, rgba(0, 14, 46, 0.94) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; } .med-hero-overlay span.badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--accent); text-transform: uppercase; font-weight: 600; margin-bottom: 4px; } .med-hero-overlay h3 { color: #fff; font-size: 1.2rem; font-weight: 700; margin: 0; } .med-img-card { border-radius: var(--radius-md); overflow: hidden; border: 1px solid rgba(0, 115, 138, 0.2); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); background: var(--brand-deep); position: relative; } .med-img-card img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform 0.5s var(--ease); } .med-img-card:hover img { transform: scale(1.04); } /* -------------------------------------------------------------------------- 21. CORETECH ENERGY PORTAL ENHANCED IMAGE CARDS -------------------------------------------------------------------------- */ .energy-hero-grid { display: grid; gap: var(--s6); align-items: center; } @media (min-width: 960px) { .energy-hero-grid { grid-template-columns: 1.15fr 0.85fr; } } .energy-hero-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); background: var(--brand-deep); height: 100%; min-height: 360px; align-self: stretch; } .energy-hero-card img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; display: block; transition: transform 0.6s var(--ease); } .energy-hero-card:hover img { transform: scale(1.04); } .energy-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30, 5, 4, 0.1) 20%, rgba(30, 5, 4, 0.94) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; } .energy-hero-overlay span.badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--accent); text-transform: uppercase; font-weight: 600; margin-bottom: 4px; } .energy-hero-overlay h3 { color: #fff; font-size: 1.2rem; font-weight: 700; margin: 0; } .energy-img-card { border-radius: var(--radius-md); overflow: hidden; border: 1px solid rgba(217, 41, 28, 0.25); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); background: var(--brand-deep); position: relative; } .energy-img-card img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform 0.5s var(--ease); } .energy-img-card:hover img { transform: scale(1.04); } /* Energy Portal Large Banner Viewport Sizing (50vh max height) */ .ct-full-banner { position: relative; border-radius: var(--radius-lg); overflow: hidden; max-height: 50vh; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); background: var(--brand-deep); } .ct-full-banner img { width: 100%; height: 50vh; max-height: 460px; object-fit: cover; display: block; } .ct-banner-caption { position: absolute; bottom: 0; inset-inline: 0; padding: 24px; background: linear-gradient(0deg, rgba(7, 36, 84, 0.92) 0%, rgba(7, 36, 84, 0) 100%); color: #fff; }