/* * SIGNO widget styles — translated 1:1 from the relevant Home.html CSS blocks, using the * design tokens in tokens.css. BEM-ish, prefixed .signo- per plugin conventions. */ .signo-dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; } .signo-label { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--signo-blue); } .signo-label__fmt { background: var(--signo-blue); color: #fff; padding: 5px 10px; } .signo-label--light { color: #6dd4cf; } .signo-label--light .signo-label__fmt { background: var(--signo-teal); } .signo-meta-sm { font-size: 12px; color: var(--signo-muted); } .signo-disclosure { font-size: 12px; color: var(--signo-muted); } .signo-disclosure--affiliate { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; margin: 18px 0 0; } .signo-disclosure__i { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--signo-muted); display: grid; place-items: center; font-size: 11px; font-weight: 700; } .signo-disclosure--sponsored { display: inline-block; background: var(--signo-teal); color: #fff; padding: 3px 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .signo-disclosure--finance { font-size: 13px; color: var(--signo-muted); margin-top: 12px; } /* ---------- Focus bar ---------- */ .signo-focusbar { border-bottom: 1px solid var(--signo-line); background: #fff; } .signo-focusbar__wrap { width: min(calc(100% - 80px), var(--signo-max)); margin: auto; display: flex; align-items: center; gap: 28px; height: 48px; overflow-x: auto; white-space: nowrap; font-size: 13px; } .signo-focusbar__label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--signo-blue); } .signo-focusbar a { color: var(--signo-muted); text-decoration: none; } .signo-focusbar a:hover { color: var(--signo-navy); } /* ---------- 1. Lead / Hero ---------- */ .signo-lead { background: var(--signo-bg); padding: 48px 0 80px; border-bottom: 1px solid var(--signo-line); } .signo-lead--after-hero { padding-top: 70px; background: #fff; } .signo-lead--after-hero .signo-top-stories { background: #fff; } .signo-lead__grid { width: min(calc(100% - 80px), var(--signo-max)); margin: auto; display: grid; grid-template-columns: 1.75fr 1fr; gap: 52px; align-items: start; } .signo-lead__img img { aspect-ratio: 16/9.5; width: 100%; object-fit: cover; margin-bottom: 26px; display: block; } .signo-lead__title { font-size: clamp(40px,4.7vw,74px); line-height: .98; letter-spacing: -.04em; color: var(--signo-navy); margin: 18px 0; font-family: var(--signo-font-head); } .signo-lead__title a { color: inherit; text-decoration: none; } .signo-dek { font-size: 20px; color: var(--signo-muted); max-width: 780px; margin: 0 0 22px; } .signo-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--signo-muted); } .signo-byline img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; } .signo-byline b { color: var(--signo-navy); } .signo-top-stories { border-left: 1px solid var(--signo-line); padding-left: 40px; } .signo-aside-title { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--signo-navy); padding-bottom: 14px; border-bottom: 2px solid var(--signo-navy); } .signo-aside-title--light { color: #9eb0ca; border: 0; padding: 0; display: block; margin-top: 30px; } .signo-top-item { display: grid; grid-template-columns: 1fr 112px; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--signo-line); } .signo-top-item__num { font-size: 13px; font-weight: 700; color: var(--signo-teal); margin-right: 6px; } .signo-top-item h3 { font-size: 20px; line-height: 1.16; color: var(--signo-navy); margin: 8px 0; } .signo-top-item h3 a { color: inherit; text-decoration: none; } .signo-top-item img { width: 112px; height: 84px; object-fit: cover; background: #dfe6ef; } /* ---------- 2. SIGNO Today ---------- */ .signo-section { padding: 90px 0; } .signo-section-head { width: min(calc(100% - 80px), var(--signo-max)); margin: 0 auto 40px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; } .signo-section-head h2 { font-size: 48px; margin: 0; color: var(--signo-navy); } .signo-section-head > a { font-size: 14px; font-weight: 600; color: var(--signo-blue); text-decoration: none; white-space: nowrap; } .signo-section-head > a:hover { color: var(--signo-navy); } .signo-head-note { flex: 1; max-width: 420px; margin: 0 0 4px auto; color: var(--signo-muted); font-size: 15px; } .signo-kicker--pulse { display: flex; align-items: center; gap: 10px; } .signo-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--signo-teal); box-shadow: 0 0 0 0 rgba(47,166,160,.5); animation: signo-pulse 2s infinite; } @keyframes signo-pulse { 70% { box-shadow: 0 0 0 9px rgba(47,166,160,0); } 100% { box-shadow: 0 0 0 0 rgba(47,166,160,0); } } .signo-today-grid { width: min(calc(100% - 80px), var(--signo-max)); margin: auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--signo-line); border: 1px solid var(--signo-line); } .signo-today-item { background: #fff; padding: 28px 28px 30px; } .signo-today-item--sponsored { background: #f3f8f8; } .signo-today-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--signo-muted); } .signo-today-meta time { font-weight: 700; color: var(--signo-blue); } .signo-today-item h3 { font-size: 21px; line-height: 1.18; color: var(--signo-navy); margin: 12px 0 8px; font-family: var(--signo-font-head); } .signo-today-item h3 a { color: inherit; text-decoration: none; } .signo-today-item p { margin: 0; font-size: 15px; color: var(--signo-muted); } /* ---------- 3. The Big Story ---------- */ .signo-bigstory { background: var(--signo-navy); color: #fff; } .signo-bigstory__grid { display: grid; grid-template-columns: 1.1fr .9fr; min-height: 640px; } .signo-bigstory__img { height: 100%; min-height: 420px; background: #1b3560; } .signo-bigstory__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .signo-bigstory__copy { padding: 80px max(40px, calc((100vw - var(--signo-max)) / 2)) 80px 70px; display: flex; flex-direction: column; justify-content: center; } .signo-bigstory__copy h2 { font-size: clamp(40px,4.3vw,66px); line-height: 1; letter-spacing: -.04em; margin: 22px 0 20px; font-family: var(--signo-font-head); } .signo-bigstory__copy h2 a { color: inherit; text-decoration: none; } .signo-bigstory__copy p { color: #cbd5e3; font-size: 19px; max-width: 560px; margin: 0 0 30px; } .signo-bigstory__copy .signo-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); } .signo-bigstory__copy .signo-btn--ghost:hover { background: #fff; color: var(--signo-navy); } .signo-bigstory__more { margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.18); display: grid; width: 100%; max-width: 580px; } .signo-bigstory__more a { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 17px; font-weight: 500; color: #fff; text-decoration: none; font-family: var(--signo-font-head); } .signo-bigstory__more em { font-style: normal; font-size: 12px; color: #9eb0ca; white-space: nowrap; } /* ---------- 4. Pillars ---------- */ .signo-pcol { border-top: 4px solid var(--signo-blue); padding-top: 22px; display: flex; flex-direction: column; } .signo-pcol--technology { border-top-color: var(--signo-navy); } .signo-pcol--wealth { border-top-color: var(--signo-teal); } .signo-pcol__head { display: flex; justify-content: space-between; align-items: baseline; } .signo-pcol__head h3 { font-size: 44px; line-height: 1; letter-spacing: -.04em; color: var(--signo-navy); margin: 0; } .signo-pcol__head a { font-size: 26px; color: var(--signo-blue); text-decoration: none; } .signo-fin-note { font-size: 12px; color: var(--signo-muted); margin: -6px 0 14px; } .signo-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 24px; } .signo-chip { font-size: 12.5px; border: 1px solid var(--signo-line); padding: 6px 12px; color: var(--signo-navy); background: #fff; text-decoration: none; } .signo-chip:hover { border-color: var(--signo-blue); color: var(--signo-blue); } .signo-p-lead h4 { font-size: 25px; line-height: 1.1; letter-spacing: -.015em; color: var(--signo-navy); margin: 10px 0 18px; } .signo-p-lead h4 a { color: inherit; text-decoration: none; } .signo-p-list a { display: block; padding: 15px 0; border-top: 1px solid var(--signo-line); font-size: 16.5px; font-weight: 500; line-height: 1.3; color: var(--signo-navy); text-decoration: none; font-family: var(--signo-font-head); } .signo-p-list a span { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--signo-muted); margin-bottom: 4px; font-weight: 600; font-family: var(--signo-font-body); } .signo-presented { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--signo-bg); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--signo-muted); } /* ---------- 5. People ---------- */ .signo-people-grid { width: min(calc(100% - 80px), var(--signo-max)); margin: auto; display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px; } .signo-flagship { position: relative; overflow: hidden; min-height: 600px; display: flex; align-items: flex-end; color: #fff; background: #1b3560; text-decoration: none; } .signo-facts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; } .signo-facts li { font-size: 12px; border: 1px solid rgba(255,255,255,.35); padding: 5px 10px; } .signo-flagship img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; } .signo-flagship:hover img { transform: scale(1.03); } .signo-flagship::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,36,72,0) 30%, rgba(13,36,72,.92) 100%); } .signo-flagship__copy { position: relative; z-index: 1; padding: 42px; } .signo-badge { display: inline-block; background: var(--signo-teal); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 7px 12px; } .signo-flagship h3 { font-size: clamp(32px,3.2vw,46px); line-height: 1.02; letter-spacing: -.03em; margin: 18px 0 14px; font-family: var(--signo-font-head); } .signo-flagship h3 a { color: inherit; text-decoration: none; } .signo-flagship p { color: #d7dfeb; max-width: 560px; margin: 0; font-size: 17px; } .signo-person { display: grid; grid-template-columns: 130px 1fr; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--signo-line); } .signo-person img { width: 130px; height: 156px; object-fit: cover; background: #dfe6ef; } .signo-role { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--signo-blue); font-weight: 600; } .signo-person h4 { font-size: 23px; line-height: 1.14; color: var(--signo-navy); margin: 8px 0; } .signo-person h4 a { color: inherit; text-decoration: none; } /* ---------- 6. Playbook ---------- */ .signo-playbook-grid { width: min(calc(100% - 80px), var(--signo-max)); margin: auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; } .signo-pb { position: relative; border: 1px solid var(--signo-line); background: #fff; padding: 30px 26px 24px; display: flex; flex-direction: column; min-height: 330px; } .signo-pb__no { font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -.04em; color: #E3E9F1; margin-bottom: 18px; font-family: var(--signo-font-head); } .signo-pb h3 { font-size: 25px; line-height: 1.1; color: var(--signo-navy); margin: 10px 0; } .signo-pb h3 a { color: inherit; text-decoration: none; } .signo-pb__meta { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--signo-line); display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--signo-blue); } .signo-meta-cat { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--signo-blue); font-weight: 600; margin-bottom: 4px; } /* ---------- 7. Numbers ---------- */ .signo-numbers { background: var(--signo-blue); color: #fff; padding: 90px 0; } .signo-numbers__grid { width: min(calc(100% - 80px), var(--signo-max)); margin: auto; display: grid; grid-template-columns: 1fr 1.3fr; gap: 70px; align-items: center; } .signo-numbers__copy h2 { font-size: clamp(36px,3.6vw,54px); line-height: 1; letter-spacing: -.035em; margin: 20px 0 16px; font-family: var(--signo-font-head); } .signo-numbers__copy p { color: #d6e0f3; font-size: 18px; margin: 0 0 28px; max-width: 480px; } .signo-numbers__copy .signo-label--light { color: #fff; margin-bottom: 8px; } .signo-numbers__copy .signo-label--light .signo-label__fmt { background: rgba(255,255,255,.18); } .signo-numbers__copy .signo-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); } .signo-numbers__copy .signo-btn--ghost:hover { background: #fff; color: var(--signo-blue); } .signo-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.22); } .signo-stat { background: var(--signo-blue); padding: 34px 26px; } .signo-stat b { display: block; white-space: nowrap; font-size: clamp(34px,3.3vw,52px); line-height: 1; letter-spacing: -.04em; margin-bottom: 14px; font-family: var(--signo-font-head); } .signo-stat span { font-size: 14px; color: #d6e0f3; } /* ---------- 8. Tools + Selected ---------- */ .signo-duo { width: min(calc(100% - 80px), var(--signo-max)); margin: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; } .signo-tool { display: grid; grid-template-columns: 56px 1fr auto; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--signo-line); } .signo-tool-ico { width: 56px; height: 56px; display: grid; place-items: center; background: #fff; border: 1px solid var(--signo-line); font-weight: 700; font-size: 13px; color: var(--signo-blue); } .signo-tool-go { color: var(--signo-blue); font-size: 20px; transition: transform .2s; } .signo-tool:hover .signo-tool-go { transform: translateX(4px); } .signo-tool:hover h4 { color: var(--signo-blue); } .signo-tool h4 { margin: 0; font-size: 18px; color: var(--signo-navy); } .signo-tool h4 a { color: inherit; text-decoration: none; } .signo-tool p { margin: 2px 0 0; font-size: 14px; color: var(--signo-muted); } .signo-selected-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .signo-img-frame { display: block; overflow: hidden; background: linear-gradient(135deg, #dfe6ef, #c9d4e2); } .signo-img-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; } .signo-img-frame:hover img, a:hover > .signo-img-frame img, article:hover .signo-img-frame img { transform: scale(1.035); } .signo-sel { position: relative; display: block; color: #fff; text-decoration: none; overflow: hidden; background: linear-gradient(135deg, #dfe6ef, #c9d4e2); } .signo-sel::before { content: ""; display: block; width: 100%; padding-top: 82.5%; } .signo-sel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; } .signo-sel:hover img { transform: scale(1.035); } .signo-sel span { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; font-size: 19px; font-weight: 600; line-height: 1.15; text-shadow: 0 1px 4px rgba(0,0,0,.7), 0 4px 18px rgba(0,0,0,.55); } .signo-sel small { display: block; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #6dd4cf; margin-bottom: 6px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.7); } .signo-sel:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,36,72,0) 55%, rgba(13,36,72,.35) 100%); pointer-events: none; } /* ---------- 9. Briefing ---------- */ .signo-briefing { background: var(--signo-navy); color: #fff; padding: 95px 0; } .signo-briefing__grid { width: min(calc(100% - 80px), var(--signo-max)); margin: auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; align-items: center; } .signo-briefing h2, .signo-briefing-intro h2 { font-size: clamp(44px,5vw,72px); line-height: .96; letter-spacing: -.04em; margin: 22px 0 18px; font-family: var(--signo-font-head); } .signo-briefing p, .signo-briefing-intro p { color: #d7dfeb; font-size: 18px; max-width: 520px; margin: 0; } /* Self-contained fallback: the Briefing_Intro widget paints its own navy background/white text directly, so it still looks correct even if whoever assembles the page in Elementor forgets to also apply the `signo-briefing` CSS class to the wrapping section (an easy manual-editor mistake — `css_classes` on a Section only appears in the Advanced tab, not by default). */ .signo-briefing-intro { background: var(--signo-navy); color: #fff; padding: 60px 40px; } .signo-briefing .signo-briefing-intro { background: none; padding: 0; } .signo-briefing-list { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); } .signo-briefing-list li { background: var(--signo-navy); padding: 16px 20px; display: flex; align-items: center; gap: 14px; font-size: 15px; } .signo-briefing-list b { font-size: 26px; color: #6dd4cf; min-width: 18px; } .signo-briefing__card { background: #fff; color: var(--signo-text); padding: 44px; } .signo-briefing__card h3 { font-size: 30px; color: var(--signo-navy); margin: 0 0 6px; letter-spacing: -.02em; } .signo-briefing__card > p { color: var(--signo-muted); font-size: 15px; margin: 0 0 24px; } .signo-bform { display: grid; gap: 8px; } .signo-bform label { font-size: 12px; font-weight: 600; color: var(--signo-navy); margin-top: 8px; } .signo-bform input[type=text], .signo-bform input[type=email] { padding: 15px 16px; border: 1px solid var(--signo-line); font: inherit; font-size: 16px; background: var(--signo-bg); } .signo-bform input:focus { outline: 2px solid var(--signo-blue); outline-offset: -1px; background: #fff; } .signo-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--signo-muted); margin: 10px 0 8px; } .signo-consent input { margin-top: 3px; accent-color: var(--signo-blue); } /* ---------- SIGNO Briefing, native-Elementor-Form variant (Briefing_Intro + Elementor "Form" widget) ---------- */ .signo-bform-native .elementor-field-group { margin-top: 8px; } .signo-bform-native .elementor-field-label { font-size: 12px; font-weight: 600; color: var(--signo-navy); margin-bottom: 4px; } .signo-bform-native .elementor-field { padding: 15px 16px; border: 1px solid var(--signo-line); font: inherit; font-size: 16px; background: var(--signo-bg); width: 100%; } .signo-bform-native .elementor-field:focus { outline: 2px solid var(--signo-blue); outline-offset: -1px; background: #fff; } .signo-bform-native .elementor-field-type-acceptance label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 13px; color: var(--signo-muted); margin: 10px 0 8px; } .signo-bform-native .elementor-field-type-acceptance a { color: var(--signo-blue); text-decoration: underline; } .signo-bform-native .elementor-acceptance-field { margin-top: 3px; accent-color: var(--signo-blue); } .signo-bform-native .elementor-field-type-submit { margin-top: 8px; } .signo-bform-native .elementor-button { background: var(--signo-blue); color: #fff; border: none; padding: 16px 20px; font-size: 14px; font-weight: 700; width: 100%; cursor: pointer; } .signo-bform-native .elementor-button:hover { background: var(--signo-navy); } .signo-bform-native .elementor-message-success, .signo-bform-native .elementor-message-danger { font-size: 13px; margin-top: 8px; } .signo-form-msg { margin: 4px 0 0; font-size: 14px; color: #1f7c77; min-height: 0; } .signo-sponsor-slot { margin-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--signo-bg); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--signo-muted); text-decoration: none; } .signo-plogo { font-size: 12px; letter-spacing: .06em; font-weight: 700; color: #8b9ab0; border: 1px dashed #b7c3d3; padding: 6px 12px; text-transform: none; background: #fff; } /* ---------- 10. Formats ---------- */ .signo-formats-all { width: min(calc(100% - 80px), var(--signo-max)); margin: auto; display: grid; grid-template-columns: repeat(6,1fr); gap: 1px; background: var(--signo-line); border: 1px solid var(--signo-line); } .signo-formats-all a { background: #fff; padding: 26px 22px; min-height: 150px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; } .signo-formats-all b { font-size: 21px; color: var(--signo-navy); letter-spacing: -.01em; font-family: var(--signo-font-head); } .signo-formats-all b:before { content: "SIGNO"; display: block; font-size: 10.5px; letter-spacing: .18em; color: var(--signo-blue); margin-bottom: 8px; font-family: var(--signo-font-body); } .signo-formats-all span { font-size: 14px; color: var(--signo-muted); } /* ---------- 11. Partner band ---------- */ .signo-partners-band { padding: 56px 0; background: var(--signo-bg); border-top: 1px solid var(--signo-line); } .signo-partners-row { width: min(calc(100% - 80px), var(--signo-max)); margin: auto; display: grid; grid-template-columns: 300px 1fr auto; gap: 44px; align-items: center; } .signo-logos { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--signo-line); border: 1px solid var(--signo-line); } .signo-logo-slot { background: #fff; height: 88px; display: grid; place-items: center; } .signo-logo-slot img { max-height: 40px; max-width: 80%; } .signo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; border: 1px solid var(--signo-blue); font-weight: 600; font-size: 13px; text-decoration: none; white-space: nowrap; flex-shrink: 0; } .signo-btn--small { padding: 10px 14px; font-size: 12px; } .signo-btn--primary, .signo-btn--primary:hover, .signo-btn--primary:focus, .signo-btn--primary:visited { background-color: var(--signo-blue); color: #fff; border-color: var(--signo-blue); } /* * Hello Elementor's theme reset.css sets a default #c36 fill on any