/* ============================================================ MMC — Model My Context · V3 site stylesheet Single source of truth: MMC_Design_System.md ============================================================ */ /* Web fonts load via + stylesheet in each page's (faster than @import — the browser no longer has to download and parse this file before it discovers the font request). The metric-matched fallbacks below make the pre-swap render the same SIZE as the web fonts, so headings/body don't jump when the fonts finish loading. size-adjust measured against the web fonts: Instrument Serif ≈ 74.6% of Georgia; DM Sans ≈ 103.4% of Arial. */ @font-face{ font-family:'Instrument Serif Fallback'; src:local('Georgia'); size-adjust:74.6%; } @font-face{ font-family:'DM Sans Fallback'; src:local('Arial'); size-adjust:103.4%; } :root{ --bg:#0D1526; --bg2:#0C2A43; --bg3:#09090B; --blue:#50A2FF; --amber:#FAA300; --green:#05DF72; --red:#F9423D; --violet:#A78BFA; --border:#174268; --t1:#FAFAFA; --t2:#FAFAFAD1; --t3:#FAFAFA80; --t4:#FAFAFA47; --serif:"Instrument Serif","Instrument Serif Fallback",Georgia,serif; --sans:"DM Sans","DM Sans Fallback",system-ui,sans-serif; --display:"Syne",sans-serif; --mono:"IBM Plex Mono",monospace; --maxw:1140px; --gutter:24px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;background:var(--bg)} /* animated flow-trace background (behind all content) */ #bg-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1;pointer-events:none} body{ background:transparent;color:var(--t1); font-family:var(--sans);font-size:18px;line-height:1.55; -webkit-font-smoothing:antialiased; background-image: radial-gradient(900px 500px at 80% -10%, rgba(80,162,255,.10), transparent 60%), radial-gradient(700px 500px at 0% 0%, rgba(250,163,0,.06), transparent 55%); background-repeat:no-repeat; } a{color:var(--blue);text-decoration:none} a:hover{text-decoration:underline} img,svg{max-width:100%;display:block} h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:.2px} h1{font-size:clamp(40px,6vw,62px)} h2{font-size:clamp(30px,4.4vw,48px);line-height:1.12} h3{font-size:clamp(20px,2.4vw,26px)} p{color:var(--t2)} .lead{font-size:clamp(18px,2.1vw,22px);color:var(--t2);line-height:1.5} /* ---------- layout ---------- */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)} section{padding:84px 0} .section-sm{padding:56px 0} .eyebrow{font-family:var(--sans);font-size:13.5px;color:var(--t2);display:inline-flex;align-items:center;gap:8px;margin-bottom:18px} .eyebrow::before{content:"";width:22px;height:1.6px;background:var(--amber);display:inline-block} .muted{color:var(--t3)} .center{text-align:center} .mono{font-family:var(--mono)} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff; border-radius:7px;padding:13px 22px;font:600 15px/1 var(--sans);border:none;cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, background .12s ease; box-shadow:0 6px 22px rgba(80,162,255,.25)} .btn:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(80,162,255,.38);text-decoration:none;background:#62acff} .btn-ghost{background:transparent;color:var(--t1);border:.8px solid rgba(250,250,250,.22);box-shadow:none} .btn-ghost:hover{background:rgba(250,250,250,.06);box-shadow:none} .btn-amber{background:var(--amber);color:#0D1526;box-shadow:0 6px 22px rgba(250,163,0,.28)} .btn-amber:hover{background:#ffb01f;box-shadow:0 10px 30px rgba(250,163,0,.4)} .btn-lg{padding:16px 28px;font-size:16px} .btn .arr{transition:transform .15s ease} .btn:hover .arr{transform:translateX(3px)} .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center} /* ---------- header / nav ---------- */ .nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px); background:rgba(13,21,38,.72);border-bottom:.8px solid rgba(250,250,250,.08)} .nav-inner{max-width:var(--maxw);margin:0 auto;padding:14px var(--gutter); display:flex;align-items:center;justify-content:space-between;gap:18px} .brand{display:flex;align-items:center;gap:10px;color:var(--t1)} .brand:hover{text-decoration:none} .brand-mark{width:26px;height:26px;border-radius:7px;display:block;object-fit:contain} .brand-name{font-family:var(--serif);font-size:21px;color:var(--t1)} .nav-links{display:flex;align-items:center;gap:26px} .nav-links a{color:var(--t2);font-size:15px} .nav-links a:hover{color:var(--t1);text-decoration:none} .nav-cta{display:flex;align-items:center;gap:12px} .lang-switch{position:relative;display:inline-flex} .lang-btn{display:inline-flex;align-items:center;gap:6px;background:transparent; border:.8px solid rgba(250,250,250,.18);color:var(--t2);border-radius:9px; padding:8px 10px;font-size:13px;line-height:1;font-family:inherit;cursor:pointer} .lang-btn:hover{color:var(--t1);border-color:rgba(250,250,250,.34)} .lang-globe{display:none} .lang-btn::before,.lang-menu a::before{content:"";display:inline-block;width:19px;height:13px; border-radius:2px;background-size:100% 100%;background-repeat:no-repeat;flex:none; box-shadow:0 0 0 .5px rgba(255,255,255,.3)} html[lang="en"] .lang-btn::before,.lang-menu a[data-lang="en"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0 60,30 M60,0 0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 60,30 M60,0 0,30' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0 V30 M0,15 H60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 V30 M0,15 H60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E")} html[lang="nl"] .lang-btn::before,.lang-menu a[data-lang="nl"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Crect width='9' height='6' fill='%2321468B'/%3E%3Crect width='9' height='4' fill='%23fff'/%3E%3Crect width='9' height='2' fill='%23AE1C28'/%3E%3C/svg%3E")} .lang-caret{width:11px;height:11px;opacity:.7;transition:transform .18s ease} .lang-switch.open .lang-caret{transform:rotate(180deg)} .lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:168px;margin:0;padding:6px; list-style:none;background:#0C2A43;border:.8px solid #174268;border-radius:12px; box-shadow:0 14px 40px rgba(0,0,0,.42);z-index:60;display:none} .lang-switch.open .lang-menu{display:block} .lang-menu a{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px; color:var(--t2);font-size:14px} .lang-menu a:hover{background:rgba(250,250,250,.06);color:var(--t1);text-decoration:none} .lang-menu [aria-selected="true"] a{color:var(--t1)} .lang-menu .tick{display:none} .lang-menu [aria-selected="true"] a::after{content:"✓";margin-left:auto;color:var(--blue);font-size:13px;line-height:1} .nav-toggle{display:none;background:none;border:none;color:var(--t1);font-size:22px;cursor:pointer} @media(max-width:880px){ .nav-links{display:none} .nav-cta .btn-ghost{display:none} } /* ---------- hero ---------- */ .hero{padding:96px 0 72px;position:relative} .hero h1 .accent{font-style:italic;color:var(--blue)} .hero .lead{max-width:620px;margin:22px 0 30px} .pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--t2); border:.8px solid rgba(250,250,250,.16);border-radius:999px;padding:7px 14px;background:rgba(250,250,250,.03)} .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)} /* ---------- cards / grids ---------- */ .card{background:var(--bg2);border:.8px solid rgba(250,250,250,.12);border-radius:14px;padding:26px} .card h3{margin-bottom:8px} .grid{display:grid;gap:18px} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} @media(max-width:880px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}} /* ---------- steps (how it works) ---------- */ .steps{counter-reset:s;display:grid;gap:16px} .step{position:relative;padding-left:62px} .step::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0; width:42px;height:42px;border-radius:11px;background:var(--bg2);border:.8px solid var(--border); display:grid;place-items:center;font:600 17px var(--mono);color:var(--blue)} /* ---------- numbers / stats ---------- */ .stat{background:var(--bg2);border:.8px solid rgba(250,250,250,.12);border-radius:14px;padding:22px} .stat .big{font-family:var(--serif);font-size:40px;line-height:1;color:var(--t1)} .stat .lbl{font-family:var(--mono);font-size:12px;color:var(--t3);margin-top:8px;display:block} .stat .big.green{color:var(--green)} /* ---------- use-case economics table ---------- */ .econ{width:100%;border-collapse:collapse;font-size:15px} .econ th,.econ td{padding:12px 14px;text-align:right;border-bottom:.8px solid rgba(250,250,250,.1)} .econ th:first-child,.econ td:first-child{text-align:left;color:var(--t2)} .econ thead th{color:var(--t3);font-weight:500;font-family:var(--mono);font-size:12px;text-transform:none} .econ .tot td{font-weight:700;color:var(--t1)} .econ .save{color:var(--green);font-weight:700} /* ---------- tabs (use-case switch) ---------- */ .tabs{display:inline-flex;gap:6px;background:var(--bg2);border:.8px solid rgba(250,250,250,.12); border-radius:11px;padding:5px} .tab{background:none;border:none;color:var(--t2);font:600 14px var(--sans);padding:9px 18px; border-radius:8px;cursor:pointer} .tab[aria-selected="true"]{background:var(--blue);color:#fff} /* ---------- forms ---------- */ .field{margin-bottom:16px} .field label{display:block;font-size:14px;color:var(--t2);margin-bottom:7px} .field input,.field select,.field textarea{ width:100%;background:var(--bg3);color:var(--t1);border:.8px solid var(--border); border-radius:9px;padding:13px 14px;font:400 15px var(--sans)} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue); box-shadow:0 0 0 3px rgba(80,162,255,.18)} .field .hint{font-size:12px;color:var(--t3);margin-top:6px} .req{color:var(--amber)} /* ---------- banner / urgency ---------- */ .banner{display:flex;align-items:center;gap:12px;background:rgba(250,163,0,.08); border:.8px solid rgba(250,163,0,.35);border-radius:12px;padding:14px 18px;color:var(--t1);font-size:15px} .banner .b-dot{width:9px;height:9px;border-radius:50%;background:var(--amber);flex:none;box-shadow:0 0 10px var(--amber)} /* ---------- CTA strip ---------- */ .cta-strip{background:linear-gradient(135deg,var(--bg2),#0e3556);border:.8px solid var(--border); border-radius:18px;padding:48px;text-align:center} .cta-strip h2{margin-bottom:14px} .cta-strip .cta-row{justify-content:center} /* ---------- footer ---------- */ .footer{border-top:.8px solid rgba(250,250,250,.08);padding:54px 0 40px;margin-top:40px} .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px} .footer h4{font-family:var(--sans);font-size:13px;color:var(--t3);text-transform:none; letter-spacing:.4px;margin-bottom:14px;font-weight:600} .footer a{display:block;color:var(--t2);font-size:14.5px;margin-bottom:9px} .footer .brand{display:flex} .footer a:hover{color:var(--t1);text-decoration:none} .footer .fine{margin-top:34px;padding-top:22px;border-top:.8px solid rgba(250,250,250,.07); display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--t3);font-size:13px} @media(max-width:880px){.footer-grid{grid-template-columns:1fr 1fr}} /* ---------- misc ---------- */ .tag{display:inline-block;font-family:var(--mono);font-size:11.5px;color:var(--t3); border:.8px solid var(--border);border-radius:6px;padding:4px 9px;background:rgba(250,250,250,.02)} .hr{height:.8px;background:rgba(250,250,250,.08);border:none;margin:0} .kicker{color:var(--amber);font-family:var(--mono);font-size:12px;letter-spacing:.5px} .check{list-style:none;display:grid;gap:12px} .check li{position:relative;padding-left:30px;color:var(--t2)} .check li::before{content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:5px; background:rgba(5,223,114,.14);border:.8px solid var(--green)} .check li::after{content:"";position:absolute;left:5px;top:10px;width:5px;height:9px; border-right:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(42deg)} .am{font-style:italic;color:var(--amber)} /* founder card */ .avatar{width:56px;height:56px;border-radius:50%;display:grid;place-items:center; font:600 18px var(--mono);color:#0D1526;background:linear-gradient(135deg,var(--blue),var(--amber));margin-bottom:16px} .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .role{font-family:var(--mono);font-size:12px;color:var(--blue);margin-bottom:10px;display:block} /* filter chips (resources/blog) */ .chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px} .chip{font:500 14px var(--sans);color:var(--t2);background:var(--bg2);border:.8px solid rgba(250,250,250,.14); border-radius:999px;padding:8px 16px;cursor:pointer;transition:background .12s,color .12s,border-color .12s} .chip:hover{color:var(--t1)} .chip.active{background:var(--blue);color:#fff;border-color:var(--blue)} .post{display:flex;flex-direction:column} .post .tag{align-self:flex-start;margin-bottom:12px} .post h3{margin-bottom:8px} .post .read{margin-top:14px;font-size:14px;font-weight:600;color:var(--blue)} .post-meta{font-family:var(--mono);font-size:11.5px;color:var(--t3);margin-top:12px} /* phases pipe (pilot approach) */ .pipe{display:flex;flex-direction:column;gap:12px} .pipe .plabel{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);margin-bottom:2px} .pstep{display:flex;align-items:center;gap:14px;background:var(--bg);border:.8px solid var(--amber); border-radius:12px;padding:15px 18px;box-shadow:0 0 0 1px rgba(250,163,0,.16)} .pstep .n{font-family:var(--mono);font-size:12px;color:var(--amber);min-width:58px} .pstep .pt{color:var(--t1);font-size:15.5px;font-weight:500} .pstep .tag{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--amber); border:.8px solid rgba(250,163,0,.45);border-radius:999px;padding:4px 11px;white-space:nowrap} @media(max-width:560px){.pstep{flex-wrap:wrap}.pstep .tag{margin-left:0}} /* FAQ accordion */ .faq{background:var(--bg2);border:.8px solid rgba(250,250,250,.12);border-radius:12px;margin-bottom:12px;overflow:hidden} .faq summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:600;font-size:16.5px; display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--t1)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--blue);font-size:24px;font-weight:400;transition:transform .2s;line-height:1} .faq[open] summary::after{transform:rotate(45deg)} .faq .ans{padding:0 22px 20px;color:var(--t2);font-size:15px;line-height:1.55} .faq .ans a{color:var(--blue)} /* final CTA with embedded form */ .cta-final{background:radial-gradient(120% 160% at 50% 0%,#12476e 0%,#0C2A43 55%,#0A1F33 100%); border-top:.8px solid var(--border);border-bottom:.8px solid var(--border)} .cta-2col{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center} @media(max-width:820px){.cta-2col{grid-template-columns:1fr}} .formnote{color:var(--t3);font-size:12.5px;margin-top:10px;text-align:center} /* full-width coloured band */ .band-blue{background:linear-gradient(180deg,#0C2A43,#0b2d49); border-top:.8px solid var(--border);border-bottom:.8px solid var(--border)} /* big stat + quote */ .big-stat .num{font-family:var(--serif);font-size:clamp(46px,7vw,68px);color:var(--green);line-height:1;display:block} .big-stat .lbl{font-family:var(--mono);font-size:13px;color:var(--t3);margin-top:10px;display:block} .quote{background:var(--bg2);border:.8px solid rgba(250,250,250,.12);border-radius:14px;padding:30px; display:flex;flex-direction:column;justify-content:center} .quote .mark{font-family:var(--serif);font-size:56px;line-height:.5;color:var(--amber);opacity:.55} .quote p{font-family:var(--serif);font-size:clamp(20px,2.4vw,27px);line-height:1.3;color:var(--t1);margin-top:14px} .quote .who{margin-top:20px;font-family:var(--mono);font-size:12px;color:var(--t3)} /* feature cards */ .fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} @media(max-width:880px){.fgrid{grid-template-columns:1fr}} .fcard{position:relative;background:var(--bg2);border:.8px solid rgba(250,250,250,.12); border-radius:14px;padding:26px;overflow:hidden} .fcard::before{content:"";position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,var(--blue),rgba(80,162,255,0))} .fic{width:46px;height:46px;border-radius:11px;background:rgba(80,162,255,.12); border:.8px solid rgba(80,162,255,.4);display:grid;place-items:center;margin-bottom:16px;color:var(--blue)} .fic svg{width:22px;height:22px} .fcard h3{margin-bottom:8px} .fcard .meta{margin-top:14px;font-family:var(--mono);font-size:12px;color:var(--t3)} /* problem cards */ .pstack{display:grid;gap:14px} .pcard{display:flex;gap:14px;align-items:flex-start;background:var(--bg2); border:.8px solid rgba(250,250,250,.12);border-radius:12px;padding:15px 18px} .pcard .pico{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font:700 14px var(--sans)} .pcard .pico.x{background:rgba(249,66,61,.13);border:.8px solid rgba(249,66,61,.5);color:var(--red)} .pcard .pico.v{background:rgba(80,162,255,.14);border:.8px solid rgba(80,162,255,.55);color:var(--blue)} .pcard strong{color:var(--t1);font-weight:600;font-size:15.5px;display:block;line-height:1.35} .pcard p{margin-top:3px;font-size:14px;color:var(--t3);line-height:1.4} .pcard.ok{background:linear-gradient(135deg,rgba(80,162,255,.09),var(--bg2));border-color:rgba(80,162,255,.45)} .pcard.ok strong{color:var(--amber)} /* pains list */ .pains{list-style:none;display:grid;gap:12px} .pains li{position:relative;padding-left:34px;color:var(--t2)} .pains li::before{content:"!";position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:6px;background:rgba(250,163,0,.14);border:.8px solid var(--amber);color:var(--amber);font:700 13px/21px var(--mono);text-align:center} .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease} .reveal.in{opacity:1;transform:none} /* hero check row */ .hero-checks{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px} .hero-checks li{position:relative;padding-left:26px;color:var(--t2);font-size:15px} .hero-checks li::before{content:"";position:absolute;left:0;top:5px;width:15px;height:15px;border-radius:5px;background:rgba(5,223,114,.14);border:.8px solid var(--green)} .hero-checks li::after{content:"";position:absolute;left:5px;top:8px;width:4px;height:8px;border-right:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(42deg)} /* Fixed Syntax Bug at Footer Block */ .punch{margin-top:34px} .punch p{font-family:var(--serif);font-size:clamp(22px,2.8vw,30px);line-height:1.2;color:var(--t3)} .punch p.hl{color:var(--t1)} .punch.center p{margin-left:auto;margin-right:auto;max-width:24ch}