/* ============ Newsroom (News archive + Blog page) ============ Ported from the approved newsroom-mockup.html design. Fonts are already loaded globally via functions.php's swissgrc-fonts handle, so no @font-face or Google Fonts here. Container uses the site's real convention (1180px / 28px), matching the homepage - not the mockup's 1240/40. */ .nr-hero, .wrap.nr-layout { font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; line-height:normal; } .nr-hero, .nr-layout, .nr-side-row, .nr-full-grid, .nr-pagination, .nr-tabs { box-sizing:border-box; } .nr-hero *, .nr-layout *, .nr-side-row *, .nr-full-grid *, .nr-pagination *, .nr-tabs * { box-sizing:border-box; } /* Selectors below repeat their leading class (e.g. .nr-hero.nr-hero) purely to double CSS specificity - Elementor's global kit ships its own `.elementor-kit-5 h1..h5` typography rules at the same single-class specificity our plain `.nr-hero h1` selectors have, and its stylesheet loads after ours, so it was winning ties and overriding our font sizes. Doubling the class is a standard zero-HTML-change way to out-rank it. */ .nr-hero.nr-hero h1, .nr-hero.nr-hero h2, .nr-hero.nr-hero h3, .nr-hero.nr-hero h4, .nr-layout.nr-layout h1, .nr-layout.nr-layout h2, .nr-layout.nr-layout h3, .nr-layout.nr-layout h4 { font-family:'Anek Latin','Inter',-apple-system,sans-serif; font-weight:700; letter-spacing:-.005em; margin:0; color:var(--ink,#182338); text-wrap:balance; } .nr-hero p, .nr-layout p { margin:0; line-height:1.65; } .nr-hero a, .nr-layout a { color:inherit; text-decoration:none; } .nr-hero img, .nr-layout img { max-width:100%; display:block; } .nr-hero .wrap, .nr-layout.wrap, .wrap.nr-layout { max-width:1180px; margin:0 auto; padding:0 28px; } :root{ --nr-navy:#16294a; --nr-navy-2:#1c3153; --nr-navy-deep:#0c1830; --nr-teal:#17a2ac; --nr-teal-light:#2dc6cb; --nr-teal-deep:#0f7c84; --nr-mint:#00bfad; --nr-ink:#182338; --nr-grey:#616d80; --nr-grey-soft:#8892a1; --nr-paper:#f5f8fb; --nr-card:#ffffff; --nr-line:#e1e7f0; --nr-tealtint: color-mix(in srgb, var(--nr-teal) 10%, transparent); } /* ============ hero ============ */ .nr-hero{ position:relative; overflow:hidden; color:#eef2f9; background:linear-gradient(172deg, var(--nr-navy) 0%, var(--nr-navy-2) 52%, var(--nr-navy-deep) 100%); padding:76px 0 0; } .nr-hero .noise{ position:absolute; inset:0; opacity:.35; pointer-events:none; mix-blend-mode:overlay; background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size:3px 3px; } .nr-hero .wrap{position:relative; z-index:2;} .nr-hero .kick{ display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--nr-teal-light); margin-bottom:20px; } .nr-hero .kick::before{content:""; width:22px; height:1.5px; background:var(--nr-teal-light);} .nr-hero.nr-hero h1{font-size:clamp(32px,4.2vw,48px); color:#fff; max-width:16ch; line-height:1.08;} .nr-hero p{font-size:16px; color:#b7c4da; max-width:56ch; margin-top:16px; line-height:1.65;} /* category tabs (real links) */ .nr-tabs{display:flex; gap:4px; margin-top:40px; padding-bottom:0; overflow-x:auto; scrollbar-width:none;} .nr-tabs::-webkit-scrollbar{display:none;} .nr-tab{ appearance:none; -webkit-appearance:none; background:none; border:none; border-radius:0; flex:none; display:inline-block; padding:14px 22px; font-size:14px; font-weight:600; color:#b7c4da; font-family:inherit; border-bottom:2px solid transparent; white-space:nowrap; transition:color .15s ease, border-color .15s ease; } .nr-tab:hover{color:#fff;} .nr-tab.is-active{color:#fff; border-color:var(--nr-teal-light);} /* ============ layout: main + sidebar ============ */ .wrap.nr-layout{ display:grid; grid-template-columns:1fr 300px; gap:48px; align-items:start; padding-top:56px; padding-bottom:64px; } @media (max-width:980px){ .wrap.nr-layout{grid-template-columns:1fr;} } .nr-section{margin-bottom:64px;} .nr-section:last-child{margin-bottom:0;} .nr-section-head{display:flex; align-items:baseline; gap:14px; margin-bottom:26px;} .nr-section-head.nr-section-head h2{font-size:22px; white-space:nowrap;} .nr-section-head .rule{flex:1; height:1px; background:var(--nr-line);} .nr-empty{color:var(--nr-grey); font-size:14.5px; padding:20px 0;} /* big + 2-up feature grid, reused for every content section */ .nr-feat-grid{display:grid; grid-template-columns:1fr; gap:16px;} .nr-feat-big{ position:relative; border-radius:16px; overflow:hidden; aspect-ratio:16/8.2; box-shadow:0 24px 48px -28px rgba(12,24,48,.35); display:block; } .nr-feat-big .nr-img{position:absolute; inset:0; background:linear-gradient(145deg, var(--nr-navy-2), var(--nr-navy-deep));} .nr-feat-big .nr-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} .nr-feat-big::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(0deg, rgba(9,18,38,.92) 0%, rgba(9,18,38,.45) 45%, transparent 72%); } .nr-feat-big-body{position:relative; z-index:1; height:100%; padding:26px 28px; display:flex; flex-direction:column; justify-content:flex-end; gap:8px;} .nr-feat-tag{ align-self:flex-start; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#06262a; background:var(--nr-teal-light); padding:4px 12px; border-radius:99px; } .nr-feat-big-body.nr-feat-big-body h3{font-size:clamp(18px,2vw,23px); line-height:1.28; color:#fff;} .nr-feat-big-body p{font-size:13px; color:#c7d2e2; max-width:60ch; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;} .nr-feat-pair{display:grid; grid-template-columns:1fr 1fr; gap:16px;} @media (max-width:640px){ .nr-feat-pair{grid-template-columns:1fr;} } .nr-card{background:var(--nr-card); border:1px solid var(--nr-line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease;} .nr-card:hover{transform:translateY(-3px); box-shadow:0 16px 30px -18px rgba(20,37,63,.28);} .nr-card-img{aspect-ratio:16/10; position:relative; overflow:hidden; background:linear-gradient(145deg, var(--nr-navy-2), var(--nr-navy-deep));} .nr-card-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} .nr-card-body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px;} .nr-card-tag{align-self:flex-start; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--nr-teal-deep); background:var(--nr-tealtint); padding:3px 9px; border-radius:99px;} .nr-card.nr-card h4{font-size:14.5px; line-height:1.35;} .nr-card-date{font-size:11.5px; color:var(--nr-grey-soft); font-weight:600;} /* sidebar - sticky under the fixed global header, same pattern as success-story/references/standards (--nr-rail-top set by newsroom.js to the header's real measured height, so it still works with the WP admin bar or a shrunk/scrolled header state). */ .wrap.nr-layout > aside{min-width:0; position:sticky; top:calc(var(--nr-rail-top, 0px) + 24px); align-self:start;} @media (max-width:980px){ .wrap.nr-layout > aside{position:static;} } .nr-side-block{margin-bottom:44px;} .nr-side-title{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--nr-grey-soft); margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid var(--nr-line);} .nr-side-list{display:flex; flex-direction:column; gap:16px;} .nr-side-row{display:grid; grid-template-columns:64px 1fr; gap:12px; align-items:start;} .nr-side-thumb{aspect-ratio:1/1; border-radius:8px; overflow:hidden; position:relative; background:linear-gradient(145deg, var(--nr-navy-2), var(--nr-navy-deep));} .nr-side-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} .nr-side-row > div{display:flex; flex-direction:column; gap:6px; min-width:0;} .nr-side-row.nr-side-row h5{margin:0; font-size:13px; font-weight:700; line-height:1.35; font-family:'Anek Latin','Inter',sans-serif;} .nr-side-date{font-size:11px; color:var(--nr-grey-soft); font-weight:600; display:block;} .nr-topics{display:flex; flex-wrap:wrap; gap:8px;} .nr-topic{font-size:12.5px; font-weight:600; color:var(--nr-grey); border:1px solid var(--nr-line); padding:6px 13px; border-radius:99px; transition:border-color .15s ease, color .15s ease;} .nr-topic:hover{border-color:var(--nr-teal); color:var(--nr-teal-deep);} .nr-topic.is-active{border-color:var(--nr-teal); color:var(--nr-teal-deep); background:var(--nr-tealtint);} .nr-years{display:flex; flex-direction:column; gap:10px;} .nr-year{font-size:14px; font-weight:600; color:var(--nr-grey);} .nr-year:hover{color:var(--nr-teal-deep);} .nr-year.is-active{color:var(--nr-teal-deep);} /* ============ Load more (real link into the full grid) ============ */ .nr-load-more{ display:flex; align-items:center; gap:8px; width:max-content; margin:28px auto 0; padding:12px 24px; background:none; border:1px solid var(--nr-line); border-radius:99px; color:var(--nr-teal-deep); font-size:13.5px; font-weight:600; transition:border-color .15s ease, background .15s ease; } .nr-load-more:hover{border-color:var(--nr-teal); background:var(--nr-tealtint);} .nr-load-more span{transition:transform .18s ease; display:inline-block;} .nr-load-more:hover span{transform:translateX(3px);} /* ============ full grid (Company News tab / Blog page) ============ */ .nr-full-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-bottom:40px;} @media (max-width:640px){ .nr-full-grid{grid-template-columns:1fr;} } .nr-full-grid .nr-card-body{padding:18px 20px 20px;} .nr-full-grid .nr-card h4{font-size:15.5px;} /* real WP paginate_links() markup: , , ,