.lfr-layout-structure-item-container {padding: 0;} .lfr-layout-structure-item-row {overflow: hidden;} .portlet-borderless .portlet-content {padding: 0;}/* ── Solution Types — CSS ── */ /* Paste into the Custom CSS panel in Liferay's Advanced tab */ /* Used by: /solution-types */ /* */ /* CHANGES FROM PRIOR VERSION */ /* 1. Every selector is scoped under .st-page. Nothing here */ /* can reach the Liferay theme navigation or any other */ /* element outside the fragment. */ /* 2. Custom properties moved off :root and prefixed --st-. */ /* Generic names on :root (--navy, --blue) collide with the */ /* same names declared by other GAITS page stylesheets. */ /* 3. The universal * reset is scoped to the fragment. */ /* 4. html { scroll-behavior } removed. It was global and the */ /* page has no in-page anchors. */ /* 5. Auth switching rewritten. The old .guest #nav-auth rule */ /* keyed on a class Liferay never emits, so both navs */ /* rendered. Only the sign-in button is now conditional. */ /* ── Scope root and tokens ── */ .st-page { --st-navy: #1a2744; --st-blue: #2d5fa3; --st-teal: #1e7a8c; --st-gold: #d4a84b; --st-gray-100: #f7f8fa; --st-gray-200: #edeef2; --st-gray-400: #9aa0b0; --st-gray-600: #5a6070; --st-gray-800: #2e3340; --st-white: #ffffff; --st-text: #2e3340; color: var(--st-text); font-family: "Segoe UI", Arial, sans-serif; } .st-page *, .st-page *::before, .st-page *::after { box-sizing: border-box; margin: 0; padding: 0; font-family: inherit; } /* ── Navigation ── */ .st-page .st-nav { position: sticky; top: 0; background: var(--st-navy); z-index: 100; padding: 0 2rem; display: flex; align-items: center; overflow-x: auto; } .st-page .st-nav a { color: rgba(255,255,255,.7); text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 1rem 1.1rem; white-space: nowrap; transition: opacity .2s ease; } .st-page .st-nav a:hover { opacity: .7; } .st-page .nav-brand { color: #fff; font-size: 15px; font-weight: 700; padding-right: 2rem; margin-right: .5rem; } .st-page .nav-signin { margin-left: auto; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.35); color: #fff; padding: .45rem 1.2rem; border-radius: 4px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transition: background .2s ease; white-space: nowrap; } .st-page .nav-signin:hover { background: rgba(255,255,255,.28); opacity: 1; } .st-page .nav-signin:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* ── Auth state ── */ /* Liferay adds .signed-in to for authenticated users. */ /* It does not add a matching class for guests, so guest is */ /* the default state and only the button is hidden. */ .signed-in .st-page .nav-signin { display: none; } /* ── Layout ── */ .st-page .container { max-width: 780px; margin: 0 auto; padding: 0 2rem; } .st-page .container-wide { max-width: 1060px; margin: 0 auto; padding: 0 2rem; } /* ── Page header band ── */ .st-page .part-header { background: var(--st-gray-100); border-top: 4px solid var(--st-blue); padding: 2.2rem 2rem 2rem; margin-bottom: .5rem; } .st-page .part-label { font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--st-blue); margin-bottom: .6rem; } .st-page .part-header h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--st-navy); font-weight: 700; line-height: 1.2; margin-bottom: 1rem; } .st-page .part-intro { font-size: 1.1rem; color: #3e4450; font-weight: 400; font-style: italic; max-width: 700px; } /* ── Solution type card grid ── */ .st-page .st-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; padding: 1.5rem 0 3rem; } /* Centre the 5th card when it sits alone in the last row */ .st-page .st-card:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: calc(50% - 0.75rem); justify-self: center; } .st-page .st-card { border: 1px solid var(--st-gray-200); border-radius: 10px; overflow: hidden; background: var(--st-white); box-shadow: 0 1px 4px rgba(0,0,0,.06); display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .2s ease; } .st-page .st-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); transform: translateY(-2px); } .st-page .st-card-img { width: 100%; height: 220px; object-fit: cover; display: block; } .st-page .st-card-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; } .st-page .st-card-title { font-size: 1.2rem; font-weight: 700; color: var(--st-navy); margin-bottom: .6rem; } .st-page .st-card-desc { font-size: .95rem; color: var(--st-gray-600); line-height: 1.65; margin-bottom: 1.2rem; flex: 1; } .st-page .st-card-link { color: var(--st-blue); text-decoration: none; font-size: .9rem; font-weight: 600; transition: opacity .2s ease; } .st-page .st-card-link:hover { opacity: .7; } /* ── Mobile ── */ @media (max-width: 600px) { .st-page .st-grid { grid-template-columns: 1fr; } .st-page .st-card:last-child:nth-child(odd) { grid-column: auto; max-width: 100%; justify-self: auto; } } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { .st-page .st-card, .st-page .st-card-link, .st-page .nav-signin, .st-page .st-nav a { transition: none; } .st-page .st-card:hover { transform: none; } }