/* ═══════════════════════════════════════════════════════════════════════════ NLFactory — Shared public theme ("The Periodical") Single source of truth for the public site's design system: self-hosted fonts, tokens, base typography, and shared content components. Loaded in via includes/head-public.php BEFORE any per-page CSS. Masthead/footer chrome live in nav-public.css / footer-public.css. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Self-hosted fonts (latin subset, woff2) ──────────────────────────────── */ @font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/schibsted-grotesk-400-800.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/hanken-grotesk-400-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-mono-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-mono-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* ── Tokens ───────────────────────────────────────────────────────────────── */ :root{ color-scheme: light; --navy:#00376d; --navy-deep:#04223f; --green:#10a077; --green-dark:#0d8563; --ink:#11263b; --muted:#3f4e5e; --paper:#eef2f5; --sheet:#ffffff; --rule:rgba(0,55,109,0.16); --rule-soft:rgba(0,55,109,0.09); /* category accents (functional color — catalog dots/labels) */ --c-life:#10a077; --c-fun:#b5781a; --c-money:#00376d; --c-news:#bb3f2c; --c-custom:#6b4fae; --display:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --body:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace; } /* ── Base ─────────────────────────────────────────────────────────────────── */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased} a{color:inherit} /* ── Layout + utilities ───────────────────────────────────────────────────── */ .wrap{max-width:1140px;margin:0 auto;padding:0 28px} .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green-dark)} .kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} section{padding:72px 0} .section-head{margin-bottom:38px;max-width:760px} /* ── Accessibility ────────────────────────────────────────────────────────── */ :focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:3px} .skip{position:absolute;left:10px;top:-48px;background:var(--navy);color:#fff;padding:9px 14px;border-radius:7px;text-decoration:none;z-index:200;transition:top .2s} .skip:focus{top:10px} /* ── Headings ─────────────────────────────────────────────────────────────── */ .display{font-family:var(--display);font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--navy);font-size:clamp(2.1rem,5vw,3.2rem)} .display.xl{font-size:clamp(2.3rem,5.5vw,4.1rem)} .display .u{position:relative;white-space:nowrap} .display .u::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.1em;background:var(--green);opacity:.9} h2.sec{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,3.4vw,2.3rem);line-height:1.06;letter-spacing:-.02em;color:var(--navy)} .sec-lede{font-family:var(--body);color:var(--muted);font-size:1.08rem;max-width:60ch;margin-top:12px} /* ── Buttons ──────────────────────────────────────────────────────────────── */ .btn-primary{background:var(--green);color:#fff;text-decoration:none;font-weight:600;font-size:1.02rem;padding:15px 30px;border-radius:9px;display:inline-block;transition:background .15s,transform .15s} .btn-primary:hover{background:var(--green-dark);transform:translateY(-2px)} .btn-text{font-weight:600;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--rule);padding-bottom:3px;transition:border-color .15s} .btn-text:hover{border-color:var(--green)} /* ── Nameplate (masthead rule for hero/page-head) ─────────────────────────── */ .nameplate{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:2px solid var(--navy);padding-bottom:12px;margin-bottom:34px} .nameplate .np-l,.nameplate .np-r{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .nameplate .np-r{text-align:right} /* ── Edition artifact (rendered sample edition) ───────────────────────────── */ .stack{position:relative} .edition{background:var(--sheet);border:1px solid var(--rule);border-radius:12px;box-shadow:0 28px 70px -28px rgba(0,55,109,.4);padding:26px 26px 20px;position:relative;z-index:2;transform:rotate(1.1deg);transition:transform .35s ease} .stack:hover .edition{transform:rotate(0deg)} .edition::before{content:"";position:absolute;inset:0;border-radius:12px;background:var(--sheet);border:1px solid var(--rule-soft);transform:rotate(-3deg) translate(10px,12px);z-index:-1} .ed-name{font-family:var(--display);font-weight:700;font-size:1.28rem;letter-spacing:-.02em;color:var(--navy);border-bottom:1px solid var(--navy);padding-bottom:8px;display:flex;justify-content:space-between;align-items:baseline} .ed-name span{font-family:var(--mono);font-size:.58rem;color:var(--muted);font-weight:400;letter-spacing:.08em} .ed-dateline{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;margin:11px 0 10px} .ed-greet{font-family:var(--body);font-size:.9rem;font-weight:600;color:var(--green-dark);margin-bottom:8px} .edition h3{font-family:var(--display);font-weight:700;font-size:1.4rem;line-height:1.1;letter-spacing:-.02em;color:var(--ink);margin-bottom:11px} .edition p{font-size:.86rem;line-height:1.55;color:#33424f;margin-bottom:11px} .ed-sources{font-family:var(--mono);font-size:.6rem;color:var(--green-dark);border-top:1px dashed var(--rule);padding-top:10px;letter-spacing:.02em} /* ── Differentiator columns ───────────────────────────────────────────────── */ .diff-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:46px;border-top:1px solid var(--rule)} .diff-col{padding:26px 26px 26px 0;border-right:1px solid var(--rule)} .diff-col:last-child{border-right:0} .diff-col .ic{color:var(--green-dark);margin-bottom:14px} .diff-col h4{font-family:var(--display);font-weight:700;font-size:1.16rem;letter-spacing:-.02em;color:var(--navy);margin-bottom:7px} .diff-col p{font-size:.96rem;color:var(--muted)} /* ── Numbered steps (a real sequence) ─────────────────────────────────────── */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:36px} .step{position:relative;padding-top:18px;border-top:2px solid var(--navy)} .step .num{font-family:var(--display);font-weight:800;font-size:2.7rem;color:var(--green);line-height:1;letter-spacing:-.03em} .step h4{font-family:var(--display);font-weight:700;font-size:1.22rem;letter-spacing:-.02em;color:var(--navy);margin:10px 0 8px} .step p{font-size:.96rem;color:var(--muted)} .more-link{display:inline-block;margin-top:30px;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--green-dark);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:3px} /* ── Pricing rate-sheet ───────────────────────────────────────────────────── */ .price-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--rule);border-radius:14px;overflow:hidden;margin-top:34px;background:var(--sheet)} .tier{padding:28px 22px;border-right:1px solid var(--rule);display:flex;flex-direction:column} .tier:last-child{border-right:0} .tier.feat-tier{background:#f4faf7;position:relative} .tier .badge{position:absolute;top:0;left:0;right:0;background:var(--green);color:#fff;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:5px} .tier.feat-tier .name{margin-top:18px} .tier .name{font-family:var(--display);font-weight:700;font-size:1.3rem;letter-spacing:-.02em;color:var(--navy)} .tier .tag{font-size:.82rem;color:var(--muted);min-height:34px;margin:4px 0 12px} .tier .price{font-family:var(--display);font-weight:800;font-size:2rem;letter-spacing:-.03em;color:var(--ink)} .tier .price small{font-family:var(--body);font-size:.8rem;font-weight:500;color:var(--muted)} .tier ul{list-style:none;margin:16px 0 20px;flex-grow:1} .tier li{font-size:.85rem;color:var(--ink);padding:5px 0;padding-left:18px;position:relative} .tier li::before{content:"";position:absolute;left:0;top:.7em;width:7px;height:7px;border-bottom:2px solid var(--green);border-right:2px solid var(--green);transform:rotate(45deg) translateY(-2px)} .tier .pick{text-align:center;text-decoration:none;font-weight:600;font-size:.9rem;padding:11px;border-radius:8px;border:1px solid var(--green);color:var(--green-dark)} .tier.feat-tier .pick{background:var(--green);color:#fff;border-color:var(--green)} /* ── FAQ accordion ────────────────────────────────────────────────────────── */ .faq{max-width:820px} .faq details{border-bottom:1px solid var(--rule)} .faq summary{list-style:none;cursor:pointer;padding:20px 0;font-family:var(--display);font-weight:600;font-size:1.16rem;letter-spacing:-.02em;color:var(--navy);display:flex;justify-content:space-between;gap:20px;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--body);font-size:1.5rem;color:var(--green);transition:transform .2s} .faq details[open] summary::after{content:"\2212"} .faq .ans{padding:0 0 22px;color:var(--muted);line-height:1.7;max-width:70ch} /* ── Filter tabs + category eyebrow (catalogs) ───────────────────────────── */ .tabs{display:flex;gap:6px;flex-wrap:wrap;margin:34px 0 0;border-bottom:1px solid var(--rule)} .tab{background:none;border:0;cursor:pointer;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:12px 16px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s} .tab:hover{color:var(--ink)} .tab.on{color:var(--navy);border-bottom-color:var(--green)} .cat-eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:46px 0 18px;display:flex;align-items:center;gap:10px} .cat-eyebrow::after{content:"";flex:1;height:1px;background:var(--rule)} /* ── Specimen-card catalog grid ───────────────────────────────────────────── */ .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .spec{background:var(--sheet);border:1px solid var(--rule);border-radius:12px;padding:20px 20px 16px;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s} .spec:hover{transform:translateY(-3px);box-shadow:0 18px 44px -26px rgba(0,55,109,.4);border-color:var(--rule-soft)} .spec-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:1px solid var(--navy);padding-bottom:9px} .spec-name{font-family:var(--display);font-weight:700;font-size:1.16rem;letter-spacing:-.02em;color:var(--navy)} .spec-freq{font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;white-space:nowrap} .spec-cat{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:11px 0 9px;display:flex;align-items:center;gap:7px} .spec-cat .dot{width:8px;height:8px;border-radius:2px;flex-shrink:0} .spec-desc{font-family:var(--body);font-size:.92rem;color:var(--ink);line-height:1.5;flex-grow:1} .spec-tags{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 14px} .spec-tags span{font-family:var(--mono);font-size:.58rem;letter-spacing:.03em;color:var(--muted);border:1px solid var(--rule);border-radius:20px;padding:3px 9px} .spec-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed var(--rule);padding-top:13px} .rating{font-family:var(--mono);font-size:.66rem;color:var(--muted);letter-spacing:.02em} .rating b{color:var(--green-dark);font-weight:500} .sample{font-family:var(--body);font-weight:600;font-size:.8rem;text-decoration:none;color:var(--green-dark);border:1px solid var(--green);border-radius:7px;padding:7px 13px;transition:background .15s,color .15s} .sample:hover{background:var(--green);color:#fff} /* ── Closing CTA (the single dark moment) ─────────────────────────────────── */ .close{background:var(--navy-deep);color:#fff;border-radius:18px;padding:64px 40px;text-align:center;margin:8px 0 0} .close .eyebrow{color:#9fe3cd} .close h2{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,4vw,2.8rem);line-height:1.04;letter-spacing:-.03em;margin:14px 0 14px;color:#fff} .close p{opacity:.85;font-size:1.12rem;max-width:50ch;margin:0 auto 28px} .close .trust{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:24px} /* ── Motion ───────────────────────────────────────────────────────────────── */ @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}} .rise{animation:rise .7s ease-out both} .rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.16s}.rise.d3{animation-delay:.24s} /* ── Responsive ───────────────────────────────────────────────────────────── */ @media(max-width:980px){.price-grid{grid-template-columns:repeat(2,1fr)}.tier{border-bottom:1px solid var(--rule)}} @media(max-width:880px){.grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:760px){ .diff-cols{grid-template-columns:1fr} .diff-col{border-right:0;border-bottom:1px solid var(--rule);padding:24px 0} .steps{grid-template-columns:1fr;gap:28px} } @media(max-width:560px){.price-grid{grid-template-columns:1fr}.grid{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .edition{transform:none}.edition::before{display:none} html{scroll-behavior:auto} }