/* GDS Resource HUB page - CSS. Paste into Elementor > Custom Code, location , condition = the /resources/ hub page only. Scoped to .gds-hub. */ .gds-hub{ scroll-behavior: smooth; } .gds-hub *{ box-sizing: border-box; } .gds-hub{ margin: 0; background: #f4f6f8; color: #1f2933; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size: 17px; line-height: 1.68; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .gds-hub a{ color: #214188; text-decoration: none; } .gds-hub a:hover{ color: #9a0305; } .gds-hub img{ display: block; max-width: 100%; } .gds-hub .skip{ position: absolute; left: 18px; top: -80px; background: #214188; color: #ffffff; padding: 12px 16px; border-radius: 8px; z-index: 100; transition: top .2s ease; } .gds-hub .skip:focus{ top: 18px; } .gds-hub .progress{ position: fixed; top: 0; left: 0; height: 4px; width: 0; background: linear-gradient(90deg, #bd0406, #214188); z-index: 1000; } .gds-hub .site-shell{ min-height: 100vh; background: radial-gradient(circle at top left, rgba(10,77,140,.10), transparent 28rem), radial-gradient(circle at top right, rgba(242,169,0,.12), transparent 30rem), #f4f6f8; } .gds-hub .topbar{ background: #081f36; color: #dfeaf4; border-bottom: 1px solid rgba(255,255,255,.10); } .gds-hub .topbar-inner{ max-width: 1240px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .gds-hub .brand{ display: flex; align-items: center; gap: 12px; font-family: "Open Sans", "Open Sans", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; font-size: 15px; font-weight: 700; color: #ffffff; } .gds-hub .brand-mark{ width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #214188, #bd0406); display: grid; place-items: center; color: #ffffff; font-size: 12px; font-weight: 900; box-shadow: 0 12px 30px rgba(0,0,0,.22); } .gds-hub .top-actions{ display: flex; align-items: center; gap: 16px; font-size: 14px; } .gds-hub .top-actions a{ color: #dfeaf4; font-weight: 600; } .gds-hub .top-actions .quote{ background: #bd0406; color: #071d33; padding: 10px 16px; border-radius: 999px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; font-size: 12px; } .gds-hub .hero-wrap{ max-width: 1320px; margin: 0 auto; padding: 34px 24px 0; } .gds-hub .hero-image-card{ background: #ffffff; border: 1px solid rgba(8,31,54,.10); border-radius: 28px; padding: 12px; box-shadow: 0 28px 70px rgba(7,29,51,.18); overflow: hidden; } .gds-hub .hero-image-card img{ width: 100%; height: auto; border-radius: 20px; } .gds-hub .title-panel{ max-width: 1240px; margin: 0 auto; padding: 34px 24px 30px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 28px; align-items: stretch; } .gds-hub .headline-card{ background: #ffffff; border: 1px solid rgba(8,31,54,.10); border-radius: 26px; padding: clamp(28px, 4vw, 52px); box-shadow: 0 20px 55px rgba(7,29,51,.08); position: relative; overflow: hidden; } .gds-hub .headline-card:before{ content: ""; position: absolute; left: 0; top: 0; width: 8px; height: 100%; background: linear-gradient(180deg, #214188, #bd0406); } .gds-hub .breadcrumb{ margin: 0 0 18px; color: #637282; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .gds-hub h1, .gds-hub h2, .gds-hub h3, .gds-hub h4{ font-family: "Open Sans", "Open Sans", Arial, sans-serif; color: #081f36; line-height: 1.08; margin: 0; } .gds-hub h1{ font-size: clamp(44px, 6vw, 82px); letter-spacing: -.035em; font-weight: 700; max-width: 950px; } .gds-hub .dek{ color: #405264; font-size: clamp(19px, 2.2vw, 24px); line-height: 1.55; max-width: 850px; margin: 24px 0 0; } .gds-hub .article-meta{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .gds-hub .pill{ display: inline-flex; align-items: center; gap: 8px; border: 1px solid #dce5ee; background: #f7fafc; color: #22384d; padding: 9px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; } .gds-hub .pill b{ color: #214188; } .gds-hub .outcome-card{ background: linear-gradient(150deg, #071d33, #214188); color: #e7f1fb; border-radius: 26px; padding: 34px; box-shadow: 0 20px 55px rgba(7,29,51,.18); position: relative; overflow: hidden; } .gds-hub .outcome-card:after{ content: ""; position: absolute; right: -82px; top: -82px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(242,169,0,.34), transparent 68%); } .gds-hub .outcome-card h2{ color: #ffffff; font-size: 30px; margin-bottom: 18px; position: relative; } .gds-hub .outcome-card p{ margin: 0 0 20px; position: relative; } .gds-hub .outcome-list{ list-style: none; padding: 0; margin: 0; position: relative; display: grid; gap: 12px; } .gds-hub .outcome-list li{ display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; color: #e7f1fb; font-size: 15px; } .gds-hub .check{ width: 24px; height: 24px; border-radius: 50%; background: #bd0406; color: #071d33; display: grid; place-items: center; font-weight: 900; line-height: 1; } .gds-hub .section-band{ max-width: 1240px; margin: 0 auto; padding: 0 24px 46px; } .gds-hub .pipeline-card{ background: #ffffff; border: 1px solid rgba(8,31,54,.10); border-radius: 26px; padding: 30px; box-shadow: 0 18px 48px rgba(7,29,51,.08); } .gds-hub .section-kicker{ color: #9a0305; font-family: "Open Sans", "Open Sans", Arial, sans-serif; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 14px; margin-bottom: 10px; } .gds-hub .section-title{ font-size: clamp(32px, 3.8vw, 52px); margin-bottom: 24px; } .gds-hub .flow{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .gds-hub .flow-step{ min-height: 150px; background: #f7fafc; border: 1px solid #dde6ef; border-radius: 18px; padding: 18px; position: relative; overflow: hidden; } .gds-hub .flow-step:before{ content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10,77,140,.08), transparent 55%); pointer-events: none; } .gds-hub .flow-num{ font-family: "Open Sans", "Open Sans", Arial, sans-serif; color: #bd0406; font-weight: 700; font-size: 32px; line-height: 1; margin-bottom: 12px; } .gds-hub .flow-step h3{ font-size: 22px; margin-bottom: 8px; } .gds-hub .flow-step p{ margin: 0; font-size: 14px; color: #536678; line-height: 1.45; } .gds-hub .layout{ max-width: 1240px; margin: 0 auto; padding: 0 24px 70px; display: grid; grid-template-columns: 285px minmax(0, 1fr); gap: 34px; align-items: start; } .gds-hub .toc{ position: sticky; top: 24px; background: #ffffff; border: 1px solid rgba(8,31,54,.10); border-radius: 22px; padding: 22px; box-shadow: 0 14px 38px rgba(7,29,51,.08); } .gds-hub .toc-title{ font-family: "Open Sans", "Open Sans", Arial, sans-serif; font-weight: 700; color: #081f36; font-size: 18px; margin-bottom: 12px; } .gds-hub .toc a{ display: block; padding: 10px 0; border-top: 1px solid #edf2f7; color: #506477; font-size: 14px; font-weight: 700; line-height: 1.35; } .gds-hub .toc a:hover{ color: #214188; transform: translateX(2px); } .gds-hub .toc .primary-link{ margin-top: 18px; display: inline-flex; justify-content: center; width: 100%; color: #071d33; background: #bd0406; border: none; border-radius: 999px; padding: 12px 16px; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; } .gds-hub .article{ display: grid; gap: 26px; } .gds-hub .article-section{ background: #ffffff; border: 1px solid rgba(8,31,54,.10); border-radius: 26px; padding: clamp(28px, 4vw, 52px); box-shadow: 0 14px 38px rgba(7,29,51,.07); } .gds-hub .article-section h2{ font-size: clamp(32px, 3.5vw, 48px); margin-bottom: 18px; letter-spacing: -.02em; } .gds-hub .article-section h3{ font-size: clamp(24px, 2.5vw, 32px); margin-top: 34px; margin-bottom: 12px; color: #214188; } .gds-hub .article-section p{ margin: 0 0 18px; max-width: 820px; } .gds-hub .article-section p:last-child{ margin-bottom: 0; } .gds-hub .article-section strong{ color: #081f36; font-weight: 800; } .gds-hub .article-section a:not(.btn){ border-bottom: 2px solid rgba(10,77,140,.18); font-weight: 700; } .gds-hub .article-section a:not(.btn):hover{ border-bottom-color: #bd0406; } .gds-hub .lead-text{ font-size: 21px; color: #26394a; line-height: 1.65; } .gds-hub .callout{ margin: 28px 0 0; background: #f7fafc; border: 1px solid #dfe7ef; border-left: 6px solid #bd0406; border-radius: 18px; padding: 22px; color: #35485a; } .gds-hub .data-table{ width: 100%; border-collapse: collapse; margin-top: 22px; overflow: hidden; border-radius: 18px; box-shadow: 0 0 0 1px #dfe7ef; font-size: 15px; } .gds-hub .data-table th{ background: #081f36; color: #ffffff; text-align: left; font-family: "Open Sans", "Open Sans", Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; padding: 14px 16px; font-size: 13px; } .gds-hub .data-table td{ padding: 15px 16px; border-top: 1px solid #e6edf4; } .gds-hub .data-table tr:nth-child(even) td{ background: #f8fafc; } .gds-hub .quick-facts{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 22px; } .gds-hub .fact{ background: #071d33; color: #e7f1fb; border-radius: 18px; padding: 18px; min-height: 142px; } .gds-hub .fact span{ display: block; color: #bd0406; font-family: "Open Sans", "Open Sans", Arial, sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; margin-bottom: 10px; } .gds-hub .fact b{ color: #ffffff; font-size: 15px; line-height: 1.35; } .gds-hub .strategy-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; } .gds-hub .strategy{ border: 1px solid #dfe7ef; border-radius: 20px; overflow: hidden; background: #f8fafc; } .gds-hub .strategy h3{ margin: 0; padding: 16px 18px; color: #ffffff; background: #9e9e9e; font-size: 25px; } .gds-hub .strategy:nth-child(2) h3{ background: #214188; } .gds-hub .strategy:nth-child(3) h3{ background: #bd0406; color: #071d33; } .gds-hub .strategy dl{ margin: 0; padding: 18px; display: grid; gap: 14px; } .gds-hub .strategy dt{ font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: #6a7b8c; } .gds-hub .strategy dd{ margin: 2px 0 0; color: #26394a; font-weight: 700; } .gds-hub .learn-links{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 20px; } .gds-hub .learn-links a{ background: #f7fafc; border: 1px solid #dfe7ef; border-radius: 18px; padding: 18px; color: #081f36; font-family: "Open Sans", "Open Sans", Arial, sans-serif; font-size: 20px; line-height: 1.1; font-weight: 700; min-height: 118px; display: flex; align-items: flex-end; } .gds-hub .learn-links a:hover{ background: #214188; color: #ffffff; border-color: #214188; transform: translateY(-2px); } .gds-hub .faq-list{ display: grid; gap: 12px; margin-top: 20px; } .gds-hub details{ border: 1px solid #dfe7ef; border-radius: 18px; background: #f8fafc; overflow: hidden; } .gds-hub summary{ cursor: pointer; padding: 18px 22px; font-weight: 800; color: #081f36; list-style: none; display: flex; justify-content: space-between; gap: 20px; } .gds-hub summary::-webkit-details-marker{ display: none; } .gds-hub summary:after{ content: "+"; color: #214188; font-size: 24px; line-height: 1; } .gds-hub details[open] summary:after{ content: "×"; color: #9a0305; } .gds-hub details p{ padding: 0 22px 20px; margin: 0; } .gds-hub .cta{ background: linear-gradient(135deg, #071d33, #214188); color: #e7f1fb; border-radius: 30px; padding: clamp(34px, 5vw, 62px); position: relative; overflow: hidden; box-shadow: 0 28px 70px rgba(7,29,51,.18); } .gds-hub .cta:before{ content: ""; position: absolute; right: -120px; bottom: -120px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(242,169,0,.34), transparent 70%); } .gds-hub .cta h2{ color: #ffffff; position: relative; } .gds-hub .cta p{ color: #dce8f3; position: relative; font-size: 20px; } .gds-hub .btn-row{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; position: relative; } .gds-hub .btn{ display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 22px; border-radius: 999px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; } .gds-hub .btn-primary{ background: #bd0406; color: #071d33; } .gds-hub .btn-secondary{ border: 1px solid rgba(255,255,255,.32); color: #ffffff; } .gds-hub .btn:hover{ transform: translateY(-2px); } .gds-hub .footer{ border-top: 1px solid #dfe7ef; background: #ffffff; padding: 26px 24px; color: #637282; font-size: 14px; } .gds-hub .footer-inner{ max-width: 1240px; margin: 0 auto; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; } @media (max-width: 1080px){ .gds-hub .title-panel, .gds-hub .layout{ grid-template-columns: 1fr; } .gds-hub .toc{ position: static; } .gds-hub .flow, .gds-hub .quick-facts, .gds-hub .learn-links{ grid-template-columns: repeat(2, 1fr); } .gds-hub .strategy-grid{ grid-template-columns: 1fr; } } @media (max-width: 720px){ .gds-hub{ font-size: 16px; } .gds-hub .topbar-inner{ align-items: flex-start; flex-direction: column; } .gds-hub .top-actions{ width: 100%; justify-content: space-between; flex-wrap: wrap; } .gds-hub .hero-wrap{ padding: 18px 14px 0; } .gds-hub .title-panel, .gds-hub .section-band, .gds-hub .layout{ padding-left: 14px; padding-right: 14px; } .gds-hub .headline-card, .gds-hub .article-section, .gds-hub .pipeline-card, .gds-hub .outcome-card{ border-radius: 20px; } .gds-hub h1{ font-size: 42px; } .gds-hub .flow, .gds-hub .quick-facts, .gds-hub .learn-links{ grid-template-columns: 1fr; } .gds-hub .data-table{ display: block; overflow-x: auto; white-space: nowrap; } } .gds-hub .hub-wrap{max-width:1240px;margin:0 auto;padding:10px 24px 70px} .gds-hub .hub-cat{margin:40px 0} .gds-hub .hub-kicker{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#214188;font-weight:700;margin-bottom:6px} .gds-hub .hub-cat h2{font-size:clamp(1.4rem,2.4vw,1.9rem);color:#071d33;margin:2px 0 8px} .gds-hub .hub-cat p.d{color:#54606e;max-width:80ch;margin:0 0 18px} .gds-hub .hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px} .gds-hub .hub-card{display:block;background:#ffffff;border:1px solid rgba(8,31,54,.1);border-top:3px solid #bd0406;border-radius:16px;padding:16px 18px;text-decoration:none;color:#071d33;transition:transform .18s,box-shadow .18s} .gds-hub .hub-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(8,31,54,.13)} .gds-hub .hub-card b{display:block;font-family:"Open Sans",sans-serif;font-size:1.02rem;line-height:1.3} .gds-hub .hub-card.soon{opacity:.55;border-top-color:#c3c9d2;pointer-events:none} .gds-hub .hub-card.soon span{font-size:.78rem;color:#7a8695} .gds-hub .hub-note{color:#54606e;font-style:italic;border-left:3px solid #bd0406;padding-left:14px;margin-top:26px} /* ===== GDS live-site colors (hub) ===== */ .gds-hub h1,.gds-hub h2,.gds-hub .hub-cat h2{color:#003b8e!important} .gds-hub p,.gds-hub .dek,.gds-hub .hub-cat p.d,.gds-hub .breadcrumb{color:#7a7a7a!important} .gds-hub .hub-kicker{color:#bd0406!important} .gds-hub .hub-card{border-top-color:#bd0406!important} .gds-hub .hub-card b{color:#003b8e!important} .gds-hub a{color:#214188} .gds-hub .btn,.gds-hub a.quote{background:#214188!important;color:#ffffff!important} .gds-hub .btn:hover,.gds-hub a.quote:hover{background:#bd0406!important} /* hub: full-width title + aligned hero */ .gds-hub .title-panel{grid-template-columns:minmax(0,1fr)!important} .gds-hub .hero-wrap{max-width:1240px!important;margin:0 auto!important} /* refined hub cards */ .gds-hub .hub-card{position:relative;overflow:hidden;background:#ffffff!important;border:1px solid #e6ebf2!important;border-radius:14px!important;padding:20px 42px 20px 22px!important;box-shadow:0 2px 7px rgba(8,31,54,.05)!important;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important} .gds-hub .hub-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#bd0406,#214188)} .gds-hub .hub-card::after{content:'\2192';position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#bd0406;font-weight:700;font-size:1.15rem;opacity:.45;transition:transform .22s ease,opacity .22s ease} .gds-hub .hub-card:hover{transform:translateY(-5px);box-shadow:0 16px 32px rgba(8,31,54,.15)!important;border-color:#cfd8e6!important} .gds-hub .hub-card:hover::after{transform:translateY(-50%) translateX(5px);opacity:1} .gds-hub .hub-card.soon::after{content:''} .gds-hub .hub-card b{color:#003b8e!important;line-height:1.4}