/* ===================================================================== Arradiance website — shared design system (single stylesheet). PALETTE (declared in :root) --red #C8102E AR red + diamond logo, primary CTA, accents --red-dark #9d0c24 hover state for primary buttons --red-tint #fff5f6 subtle wash for selected purpose tiles, etc. --ink #1a1a1a body text --muted #4a4a4a secondary text --line #d8dde4 borders, dividers --bg-alt #e6e9ee alternating section background TYPOGRAPHY Body: Inter (CDN-loaded), system-font fallback. No external font load in the HTML — relies on system default if Inter isn't installed. STRUCTURE (sections of this file, in order) :root vars + reset Skip link, brand-stripe, header/nav, buttons Sections / hero / page-hero Pillars, system cards (homepage + product pages) Applications, research-row (featured paper cards) Generic content (prose, two-col, feature-list, opt-grid, steps, CTA band) Research library (resources page — chips, search input, doc cards) Contact page form (radio rows, conditional sections, GDPR, purpose picker) Footer Lightbox (technology slide gallery) Callout (AtomicLimits external link tile) Team cards (about page leadership grid) Quote cards (customers page) Jobs list (careers page) Map + stat tiles (homepage installed-base section) Scaffold annotation (.anno yellow tile) Responsive overrides (single @media block at end) MAINTENANCE NOTES - Class names are stable; pages depend on them. Renaming requires sweep. - "Inter" is referenced but not loaded — system stack fallback used. To use real Inter, add a Google Fonts in each HTML . - The .conditional[hidden] rule + companion JS in contact.html drive the dynamic-fields form behavior. JS toggles hidden + disabled. - .bg-alt is the only section background variation we use. Pages set it manually per section to alternate visual rhythm. ===================================================================== */ :root{ --red:#C8102E; --red-dark:#9d0c24; --red-tint:#fff5f6; --ink:#1a1a1a; --muted:#4a4a4a; --line:#d8dde4; --card:#eef0f4; --bg-alt:#e6e9ee; --fg-dark:#ccc; /* primary text on dark surfaces: footer, cookie banner */ --fg-dark-muted:#999; /* secondary text on dark */ --line-dark:#3a3a3a; /* dividers/borders on dark */ --max:1180px; --radius:6px; } *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; color:var(--ink);background:#fff;line-height:1.55;-webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block;} a{color:var(--red);text-decoration:none;} a:hover{text-decoration:underline;} h1,h2,h3,h4{letter-spacing:-0.2px;} /* skip link for accessibility */ .skip{position:absolute;left:-999px;top:0;background:var(--red);color:#fff;padding:10px 16px;z-index:100;} .skip:focus{left:8px;top:8px;} /* brand stripe */ .brand-stripe{height:4px;background:linear-gradient(to right,var(--red) 0%,var(--red) 30%,#e8a4ad 70%,#fff 100%);} /* ---------- header / nav ---------- */ header.nav{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:50;} .nav-inner{max-width:var(--max);margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;} .brand{display:flex;align-items:center;gap:10px;text-decoration:none;} .brand:hover{text-decoration:none;} .brand img{height:34px;width:auto;} .brand .wm{font-weight:800;font-size:20px;letter-spacing:.5px;color:var(--ink);line-height:1;white-space:nowrap;} .brand .wm .ar{color:var(--red);} .brand .wm sup{font-size:9px;color:var(--muted);margin-left:1px;vertical-align:super;font-weight:600;} /* footer wordmark uses lighter colors for dark bg */ footer.site .brand .wm{color:#fff;} footer.site .brand .wm sup{color:var(--fg-dark-muted);} footer.site .brand .wm .ar{color:#d81f35;} /* brighter brand red: 3.45:1 on var(--ink) footer, clears WCAG 3:1 for large text (header stays --red on light bg) */ footer.site .fbrand .brand{margin-bottom:14px;} nav.primary ul{list-style:none;margin:0;padding:0;display:flex;gap:28px;} nav.primary a{color:var(--ink);font-size:15px;font-weight:500;} nav.primary a:hover,nav.primary a[aria-current="page"]{color:var(--red);text-decoration:none;} nav.primary a[aria-current="page"]{border-bottom:2px solid var(--red);padding-bottom:2px;} .nav-right{display:flex;align-items:center;gap:16px;} .menu-btn{display:none;background:none;border:0;font-size:24px;cursor:pointer;color:var(--ink);line-height:1;} /* ---------- buttons ---------- */ .cta-btn{display:inline-block;background:var(--red);color:#fff !important;padding:10px 18px;border-radius:4px;font-weight:600;font-size:14px;border:1px solid var(--red);} .cta-btn:hover{background:var(--red-dark);text-decoration:none;} .cta-btn.outline{background:#fff;color:var(--red) !important;border:1px solid var(--red);} .cta-btn.outline:hover{background:var(--red-tint);} .cta-btn.lg{padding:13px 24px;font-size:15px;} /* Header CTA (inside .nav-right): keep it on one line, and hide it on phones — there the wordmark + button + hamburger don't fit and the button overlaps the logo. Contact is still reachable from the mobile menu, and the hero has its own 'Request More Information' button. */ .nav-right .cta-btn{white-space:nowrap;} @media(max-width:640px){.nav-right .cta-btn{display:none;}} /* ---------- sections ---------- */ section{padding:80px 24px;} section .inner{max-width:var(--max);margin:0 auto;} .eyebrow{text-transform:uppercase;letter-spacing:1.5px;font-size:12px;color:var(--red);font-weight:600;margin-bottom:8px;} section h2{font-size:32px;margin:0 0 12px;} .lede{color:var(--muted);font-size:17px;max-width:760px;margin:0 0 36px;} .bg-alt{background:var(--bg-alt);} /* ---------- page hero (inner pages) ---------- */ .page-hero{background:var(--bg-alt);border-bottom:1px solid var(--line);padding:48px 24px 40px;} .page-hero .inner{max-width:var(--max);margin:0 auto;} .breadcrumb{font-size:13px;color:var(--muted);margin-bottom:14px;} .breadcrumb a{color:var(--muted);} .page-hero h1{font-size:40px;line-height:1.12;margin:0 0 14px;max-width:820px;} .page-hero h1 .accent{color:var(--red);} .page-hero p{color:var(--muted);font-size:18px;max-width:720px;margin:0;} /* ---------- home hero ---------- */ .hero{background:#fff;padding:80px 24px;border-bottom:1px solid var(--line);} .hero .inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;} .hero h1{font-size:46px;line-height:1.1;margin:0 0 20px;} .hero h1 .accent{color:var(--red);} .hero p.sub{font-size:19px;color:var(--muted);margin:0 0 30px;max-width:560px;} .hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;} .hero-image{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--card);} .hero-image img{width:100%;height:100%;object-fit:cover;} /* ---------- trust strip ---------- */ .trust{padding:40px 24px 52px;background:var(--bg-alt);border-bottom:1px solid var(--line);} .trust .label{text-align:center;text-transform:uppercase;letter-spacing:2px;font-size:12px;color:var(--muted);margin-bottom:26px;} .logo-row{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;align-items:center;max-width:1000px;margin:0 auto;} .logo-box{height:54px;background:#fff;border:1px solid var(--line);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--muted);text-align:center;padding:6px;} .note{max-width:1000px;margin:14px auto 0;font-size:12px;color:var(--muted);text-align:center;font-style:italic;} /* ---------- pillars ---------- */ .pillar-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;} .pillar{border:1px solid var(--line);border-radius:var(--radius);padding:0;overflow:hidden;background:#fff;transition:border-color .2s,box-shadow .2s;display:flex;flex-direction:column;} .pillar:hover{border-color:var(--red);box-shadow:0 6px 22px rgba(0,0,0,.05);} .pillar .pic{aspect-ratio:16/9;overflow:hidden;background:var(--card);border-bottom:1px solid var(--line);} .pillar .pic img{width:100%;height:100%;object-fit:cover;} .pillar .pad{padding:30px;display:flex;flex-direction:column;flex:1;} .pillar h3{font-size:22px;margin:0 0 12px;} .pillar p{color:var(--muted);margin:0 0 18px;flex:1;} .pillar .pillar-link{font-weight:600;font-size:15px;} /* ---------- system / product cards ---------- */ .cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;} .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .system-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s;} .system-card:hover{border-color:var(--red);box-shadow:0 6px 22px rgba(0,0,0,.05);} .system-card .pic{aspect-ratio:4/3;background:var(--card);border-bottom:1px solid var(--line);overflow:hidden;display:flex;align-items:center;justify-content:center;} .system-card .pic img{width:100%;height:100%;object-fit:contain;padding:14px;} .system-card .body{padding:22px;flex:1;display:flex;flex-direction:column;} .system-card .tagline{color:var(--red);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;} .system-card h3{font-size:20px;margin:0 0 8px;} .system-card .desc{color:var(--muted);font-size:14px;margin:0 0 16px;flex:1;} .system-card .specs{font-size:12px;color:var(--muted);padding-top:12px;border-top:1px solid var(--line);margin-bottom:14px;} .system-card .links{display:flex;justify-content:space-between;align-items:center;font-size:14px;} .compare-link{text-align:center;margin-top:28px;font-size:15px;} /* ---------- applications grid ---------- */ .apps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} .app-tile{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;display:block;color:inherit;transition:border-color .2s,transform .2s;} .app-tile:hover{border-color:var(--red);transform:translateY(-2px);text-decoration:none;} .app-tile .pic{aspect-ratio:16/9;overflow:hidden;background:var(--card);} .app-tile .pic img{width:100%;height:100%;object-fit:cover;} .app-tile .pad{padding:22px 22px 24px;} .app-tile .num{font-size:12px;color:var(--red);font-weight:600;letter-spacing:1px;margin-bottom:6px;} .app-tile h3{margin:0 0 8px;font-size:17px;color:var(--ink);} .app-tile p{margin:0;font-size:13px;color:var(--muted);} /* ---------- featured research ---------- */ .research-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .paper-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;color:inherit;transition:border-color .2s;} .paper-card:hover{border-color:var(--red);text-decoration:none;} .paper-card .thumb{aspect-ratio:16/9;background:var(--card);border-bottom:1px solid var(--line);overflow:hidden;} .paper-card .thumb img{width:100%;height:100%;object-fit:cover;} .paper-card .body{padding:18px;flex:1;} .paper-card .tags{font-size:11px;color:var(--red);font-weight:600;text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px;} .paper-card h4{margin:0 0 8px;font-size:15px;line-height:1.35;color:var(--ink);} .paper-card .meta{color:var(--muted);font-size:12px;margin-bottom:10px;} .paper-card .finding{font-size:13px;color:var(--ink);margin:0;} .see-all{text-align:center;margin-top:28px;font-size:15px;} /* ---------- spec tables ---------- */ .spec-table{width:100%;border-collapse:collapse;font-size:14px;margin:0;} .spec-table caption{text-align:left;font-weight:700;font-size:18px;margin-bottom:14px;} .spec-table th,.spec-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;} .spec-table th{width:34%;color:var(--muted);font-weight:600;} .spec-table tr:hover{background:var(--bg-alt);} .spec-table thead th{color:var(--ink);background:var(--bg-alt);border-bottom:2px solid var(--line);} /* Spec tables scroll horizontally on narrow screens instead of clipping columns. */ .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;} .table-scroll .spec-table{min-width:560px;} .spec-table td,.spec-table th{overflow-wrap:break-word;} /* ---------- generic content ---------- */ .prose{max-width:760px;} .prose p{color:var(--ink);font-size:16px;margin:0 0 18px;} .prose h3{font-size:22px;margin:34px 0 12px;} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;} .two-col img{border-radius:var(--radius);border:1px solid var(--line);} .feature-list{list-style:none;padding:0;margin:0;} .feature-list li{padding:12px 0 12px 30px;border-bottom:1px solid var(--line);position:relative;font-size:15px;} .feature-list li::before{content:"";position:absolute;left:0;top:18px;width:12px;height:12px;background:var(--red);transform:rotate(45deg);} /* options / accessories grid */ .opt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;} .opt{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;} .opt .pic{aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line);} .opt .pic img{width:100%;height:100%;object-fit:contain;padding:14px;} .opt .cap{padding:12px 14px;font-size:13px;color:var(--ink);} /* steps */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step;} .step{padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;} .step .n{width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:14px;} .step h4{margin:0 0 8px;font-size:16px;} .step p{margin:0;font-size:13px;color:var(--muted);} /* CTA band */ .cta-band{background:var(--ink);color:#fff;text-align:center;} .cta-band h2{color:#fff;} .cta-band p{color:var(--fg-dark-muted);max-width:620px;margin:0 auto 28px;font-size:17px;} /* ---------- research library (resources) ---------- */ .lib-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:8px;} .lib-search{flex:1;min-width:220px;padding:11px 14px;border:1px solid var(--line);border-radius:4px;font-size:14px;} .lib-filters{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 8px;} .chip{border:1px solid var(--line);background:#fff;color:var(--ink);padding:7px 14px;border-radius:99px;font-size:13px;cursor:pointer;transition:.15s;} .chip:hover{border-color:var(--red);color:var(--red);} .chip.active{background:var(--red);color:#fff;border-color:var(--red);} .lib-count{font-size:13px;color:var(--muted);margin:8px 0 22px;} .lib-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} /* ---------- contact ---------- */ .contact-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;align-items:start;} form.real{display:block;} form.real .field{display:block;font-size:13px;color:var(--ink);font-weight:600;margin:16px 0 0;} form.real .field input:not([type="radio"]):not([type="checkbox"]), form.real .field select, form.real .field textarea{display:block;width:100%;margin-top:6px;padding:11px 12px;border:1px solid var(--line);border-radius:4px;font-size:14px;font-family:inherit;background:#fff;} form.real .field input:focus,form.real .field select:focus,form.real .field textarea:focus{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red);} /* phone field: country-code select + number input on one line */ form.real .field .phone-group{display:flex;gap:8px;margin-top:6px;} form.real .field .phone-group select{width:auto;flex:0 0 auto;max-width:180px;margin-top:0;} form.real .field .phone-group input{flex:1 1 auto;min-width:0;margin-top:0;} form.real textarea{min-height:140px;resize:vertical;} form.real .req{color:var(--red);margin-left:2px;} form.real .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;} form.real .form-row-3{grid-template-columns:1.2fr 1fr 1fr;} form.real fieldset{border:0;padding:0;margin:20px 0 0;} form.real fieldset legend{font-size:13px;color:var(--ink);font-weight:600;padding:0;margin:0 0 10px;} form.real .radio-row{display:flex;flex-wrap:wrap;gap:14px 22px;} form.real .radio-row label{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--ink);cursor:pointer;font-weight:400;margin:0;} form.real .radio-row input[type="radio"]{accent-color:var(--red);margin:0;width:auto;} form.real .radio-row input[type="checkbox"]{accent-color:var(--red);margin:0;width:auto;} form.real .radio-row .other-row{display:inline-flex;align-items:center;gap:8px;} form.real .radio-row .other-row input[type="text"]{padding:5px 8px;font-size:13px;width:auto;min-width:140px;margin-top:0;border:1px solid var(--line);border-radius:3px;} form.real .submit{margin-top:24px;} form.real .gdpr{display:flex;align-items:flex-start;gap:10px;margin-top:24px;padding:14px 16px;background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);font-size:13px;color:var(--ink);font-weight:400;cursor:pointer;} form.real .gdpr input[type="checkbox"]{accent-color:var(--red);margin-top:2px;width:auto;flex:0 0 auto;} form.real .form-section-note{font-size:12px;color:var(--muted);font-style:italic;margin:8px 0 0;} form.real .conditional[hidden]{display:none !important;} form.real .conditional{padding:18px 20px;margin-top:22px;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:var(--radius);background:#fcfcfc;} form.real .subconditional[hidden]{display:none !important;} form.real .subconditional{margin-top:18px;} form.real .conditional > fieldset:first-child{margin-top:0;} /* purpose picker — three tile buttons at the top */ form.real .purpose-picker{border:0;padding:0;margin:0 0 8px;} form.real .purpose-picker legend{font-size:13px;color:var(--ink);font-weight:600;margin:0 0 12px;} form.real .purpose-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;} form.real .purpose-tile{display:flex;flex-direction:column;gap:4px;border:2px solid var(--line);border-radius:var(--radius);padding:16px 18px;cursor:pointer;background:#fff;transition:.15s;margin:0;font-weight:400;} form.real .purpose-tile:hover{border-color:var(--red);} form.real .purpose-tile input[type="radio"]{position:absolute;opacity:0;pointer-events:none;} form.real .purpose-tile .title{font-weight:600;font-size:15px;color:var(--ink);} form.real .purpose-tile .sub{font-size:12px;color:var(--muted);line-height:1.4;} form.real .purpose-tile:has(input:checked){border-color:var(--red);background:var(--red-tint);} form.real .purpose-tile:has(input:checked) .title{color:var(--red);} .contact-info h3{margin:0 0 10px;font-size:22px;} .contact-info p{color:var(--muted);margin:0 0 18px;} .info-line{padding:12px 0;border-top:1px solid var(--line);font-size:14px;} .info-line:last-child{border-bottom:1px solid var(--line);} .info-label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;} /* ---------- footer ---------- */ footer.site{background:var(--ink);color:var(--fg-dark);padding:56px 24px 32px;font-size:14px;} footer.site .inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;} footer.site a{color:var(--fg-dark);} footer.site a:hover{color:#fff;text-decoration:none;} footer.site h3{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:1.2px;margin:0 0 14px;} footer.site ul{list-style:none;padding:0;margin:0;} footer.site ul li{margin-bottom:8px;} footer.site .fbrand img{height:30px;margin-bottom:14px;filter:brightness(0) invert(1);} footer.site .legal{border-top:1px solid var(--line-dark);padding-top:20px;margin-top:36px;font-size:12px;color:var(--fg-dark-muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;max-width:var(--max);margin-left:auto;margin-right:auto;} .f-social{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);border:1px solid var(--ink);color:var(--fg-dark);padding:6px 12px;border-radius:99px;font-size:12px;font-weight:600;letter-spacing:.3px;} .f-social:hover{color:#fff;border-color:var(--line-dark);background:rgba(255,255,255,.10);text-decoration:none;} .f-social svg{width:14px;height:14px;flex:0 0 auto;} /* ---------- full library: document cards ---------- */ .doc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;} .doc{border:1px solid var(--line);border-left:4px solid var(--red);border-radius:var(--radius);padding:18px 20px;background:#fff;display:flex;flex-direction:column;transition:box-shadow .2s,border-color .2s;} .doc:hover{box-shadow:0 6px 22px rgba(0,0,0,.06);} .doc .topic{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--red);font-weight:600;margin-bottom:8px;} .doc h4{font-size:14px;margin:0 0 12px;line-height:1.45;color:var(--ink);flex:1;} .doc .meta{font-size:12px;color:var(--muted);margin-bottom:10px;} .doc .open{font-size:13px;font-weight:600;color:var(--red);} /* ===================================================================== Restored components (synced HTML referenced these; definitions were missing from this copy of styles.css): - index.html : .installed-base / .ib-grid / .stat-tile / .placeholder-pill - about.html : .team-grid / .team-card / .avatar / .li-link - customers.html : .quote-grid / .quote-card ===================================================================== */ /* ---------- homepage: installed-base / stat tiles ---------- */ .installed-base .head{max-width:760px;margin-bottom:36px;} .installed-base .head h2{font-size:28px;margin:0 0 8px;} .installed-base .head p{color:var(--muted);margin:0;font-size:15px;} .ib-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;} .ib-map img{width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius);} .ib-stats{display:flex;flex-direction:column;gap:16px;} .stat-tile{border:1px solid var(--line);border-left:4px solid var(--red);border-radius:var(--radius);padding:18px 22px;background:#fff;} .stat-tile .num{font-size:30px;font-weight:800;color:var(--ink);line-height:1.1;margin:6px 0;} .stat-tile .desc{color:var(--muted);font-size:14px;} .placeholder-pill{display:inline-block;background:#fff7d6;border:1px dashed #d8b659;color:#6e5300;font-size:10px;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:99px;} /* ---------- about: leadership team ---------- */ .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} .team-card{border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;background:#fff;text-align:center;display:flex;flex-direction:column;align-items:center;transition:box-shadow .2s,border-color .2s;} .team-card:hover{box-shadow:0 6px 22px rgba(0,0,0,.06);border-color:var(--red);} .team-card .avatar{width:72px;height:72px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-size:23px;font-weight:700;letter-spacing:1px;margin-bottom:16px;} .team-card h3{font-size:17px;margin:0 0 4px;} .team-card .role{color:var(--muted);font-size:13px;margin:0 0 16px;flex:1;} .li-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--red);} .li-link:hover{text-decoration:none;} .li-link svg{width:18px;height:18px;} /* ---------- customers: testimonial quotes ---------- */ .quote-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;} .quote-card{border:1px solid var(--line);border-radius:var(--radius);padding:26px 30px 24px;background:#fff;display:flex;flex-direction:column;} .quote-card blockquote{margin:0 0 18px;font-size:15px;line-height:1.6;color:var(--ink);position:relative;padding-top:16px;} .quote-card blockquote::before{content:"\201C";position:absolute;top:-2px;left:-4px;font-size:46px;line-height:1;color:var(--red);opacity:.45;font-family:Georgia,'Times New Roman',serif;} .quote-card .who{font-size:14px;border-top:1px solid var(--line);padding-top:14px;margin-top:auto;} .quote-card .who .org{color:var(--muted);} /* ---------- responsive for the restored components ---------- */ @media(max-width:1000px){ .team-grid{grid-template-columns:repeat(2,1fr);} } @media(max-width:900px){ .ib-grid,.quote-grid{grid-template-columns:1fr;} } @media(max-width:560px){ .team-grid{grid-template-columns:1fr;} } /* ============ end of stylesheet ============ */ .stat-tile .placeholder-pill{display:inline-block;background:#fff7d6;color:#6e5300;border:1px dashed #d8b659;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;padding:2px 7px;border-radius:99px;margin-bottom:6px;} /* ---------- team cards (About page) ---------- */ .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} .team-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:8px;transition:border-color .2s,box-shadow .2s;} .team-card:hover{border-color:var(--red);box-shadow:0 6px 18px rgba(0,0,0,.04);} .team-card .avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--red) 0%,var(--red-dark) 100%);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;letter-spacing:.5px;margin-bottom:8px;} .team-card h3{font-size:17px;margin:0;} .team-card .role{color:var(--muted);font-size:13px;margin:0 0 12px;} .team-card .li-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--red);margin-top:auto;} .team-card .li-link:hover{text-decoration:none;color:var(--red-dark);} .team-card .li-link svg{width:14px;height:14px;} /* ---------- testimonial cards (Customers page) ---------- */ .quote-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;} .quote-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;} .quote-card blockquote{margin:0 0 18px;font-size:15px;line-height:1.6;color:var(--ink);quotes:"\201C" "\201D";} .quote-card blockquote::before{content:open-quote;color:var(--red);font-size:32px;line-height:0;vertical-align:-12px;margin-right:4px;font-family:Georgia,serif;} .quote-card .who{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:14px;} .quote-card .who strong{color:var(--ink);font-weight:600;} .quote-card .who .org{color:var(--muted);} .quote-card .who a{font-size:13px;display:inline-block;margin-top:4px;} /* ---------- responsive ---------- */ @media(max-width:900px){ .hero .inner,.pillar-row,.cards-2,.cards-3,.apps-grid,.research-row,.lib-grid,.doc-grid,.gallery,.two-col,.contact-grid,.steps,.jobs,.ib-grid,footer.site .inner,form.real .form-row,form.real .form-row-3,form.real .purpose-row{grid-template-columns:1fr;} .opt-grid{grid-template-columns:repeat(2,1fr);} .logo-row{grid-template-columns:repeat(3,1fr);} .team-grid{grid-template-columns:repeat(2,1fr);} .quote-grid{grid-template-columns:1fr;} .hero h1{font-size:34px;} .page-hero h1{font-size:30px;} section{padding:56px 20px;} .menu-btn{display:block;} nav.primary{display:none;position:absolute;top:62px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:8px 0;box-shadow:0 8px 20px rgba(0,0,0,.06);} nav.primary.open{display:block;} nav.primary ul{flex-direction:column;gap:0;} nav.primary li{padding:0 24px;} nav.primary a{display:block;padding:12px 0;border-bottom:1px solid var(--line);} nav.primary a[aria-current="page"]{border-bottom:1px solid var(--line);} } /* ===================================================================== Restored components (lost to an earlier styles.css truncation): AtomicLimits callout, technology slide gallery + lightbox, careers jobs. ===================================================================== */ .callout{display:flex;gap:18px;align-items:center;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;background:#fff;transition:border-color .2s;} .callout:hover{border-color:var(--red);text-decoration:none;} .callout .ic{flex:0 0 auto;width:46px;height:46px;background:var(--red-tint);border:1px solid #f1b4bd;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--red);font-weight:800;font-size:13px;} .callout .tx{flex:1;} .callout h4{margin:0 0 4px;font-size:16px;color:var(--ink);} .callout p{margin:0;color:var(--muted);font-size:14px;} .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;} .gallery figure{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;background:#fff;transition:border-color .2s,box-shadow .2s;} .gallery figure:hover{border-color:var(--red);box-shadow:0 6px 22px rgba(0,0,0,.06);} .gallery img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover;border-bottom:1px solid var(--line);} .gallery figcaption{padding:12px 14px;font-size:13px;color:var(--ink);} .lb{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:200;padding:24px;} .lb.open{display:flex;} .lb img{max-width:92vw;max-height:88vh;border-radius:4px;box-shadow:0 10px 40px rgba(0,0,0,.5);} .lb .close{position:absolute;top:14px;right:24px;color:#fff;font-size:38px;line-height:1;cursor:pointer;background:none;border:0;} .jobs{display:grid;grid-template-columns:1fr 1fr;gap:20px;} .job{border:1px solid var(--line);border-left:4px solid var(--red);border-radius:var(--radius);padding:24px 26px;background:#fff;display:flex;flex-direction:column;transition:box-shadow .2s;} .job:hover{box-shadow:0 6px 22px rgba(0,0,0,.06);} .job .meta{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--red);font-weight:600;margin-bottom:10px;} .job h3{margin:0 0 4px;font-size:19px;} .job .dept{color:var(--muted);font-size:14px;margin:0 0 18px;flex:1;} .job .actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:14px;} .job .actions .apply{font-weight:600;} @media(max-width:900px){ .gallery,.jobs{grid-template-columns:1fr;} } @media(max-width:600px){ .gallery{grid-template-columns:repeat(2,1fr);} } /* ============ end restored components ============ */ /* Leadership headshots fill the circular avatar frame */ .team-card img.avatar{display:block;object-fit:cover;} /* Collapsible taxonomy diagram (technology page) */ .ald-map-toggle{border:1px solid var(--line);border-radius:var(--radius);background:#fff;margin:6px 0 34px;max-width:820px;} .ald-map-toggle>summary{cursor:pointer;list-style:none;padding:14px 18px;font-weight:600;color:var(--red);display:flex;align-items:center;gap:10px;} .ald-map-toggle>summary::-webkit-details-marker{display:none;} .ald-map-toggle>summary::before{content:"\25B8";color:var(--red);transition:transform .15s ease;} .ald-map-toggle[open]>summary::before{transform:rotate(90deg);} .ald-map-toggle>summary:hover{color:var(--red-dark);} /* Mobile: bump typeable form controls to 16px so iOS Safari doesn't auto-zoom the page when a field is focused (zoom triggers below 16px). Phones only. */ @media(max-width:640px){ form.real .field input:not([type="radio"]):not([type="checkbox"]), form.real .field select, form.real .field textarea, form.real .radio-row .other-row input[type="text"], .lib-search{font-size:16px;} } /* Mobile tweaks: larger filter-chip tap targets, and two-column option groups so long multi-select lists (Options, Markets, etc.) aren't a giant scroll. */ @media(max-width:640px){ .chip{padding:11px 16px;font-size:14px;} form.real .radio-row{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;} form.real .radio-row .other-row{grid-column:1 / -1;} } /* Text overlay on a photo (re-creates the retired in-image "Devices/Wafers/..." caption) */ .img-overlay{position:relative;display:block;} .img-overlay-text{position:absolute;top:0;right:0;height:100%;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 26px;text-align:right;color:#fff;font-weight:700;font-size:27px;line-height:1.25;letter-spacing:.2px;text-shadow:0 1px 6px rgba(0,0,0,.6);pointer-events:none;} @media(max-width:600px){.img-overlay-text{font-size:19px;padding:0 16px;}} /* Cookie consent banner (analytics/ads consent for Consent Mode v2 / GDPR) */ .cookie-consent{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--ink);color:var(--fg-dark);padding:16px 20px;box-shadow:0 -6px 24px rgba(0,0,0,.25);} .cookie-consent[hidden]{display:none;} .cookie-consent .cc-inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:space-between;} .cookie-consent p{margin:0;font-size:13px;line-height:1.5;max-width:720px;} .cookie-consent a{color:#fff;text-decoration:underline;} .cookie-consent .cc-actions{display:flex;gap:10px;flex:0 0 auto;} .cc-btn{border-radius:4px;padding:9px 18px;font-weight:600;font-size:14px;cursor:pointer;border:1px solid transparent;} .cc-accept{background:var(--red);color:#fff;border-color:var(--red);} .cc-accept:hover{background:var(--red-dark);} .cc-decline{background:transparent;color:var(--fg-dark);border-color:var(--line-dark);} .cc-decline:hover{border-color:var(--line-dark);} @media(max-width:600px){.cookie-consent .cc-inner{flex-direction:column;align-items:stretch;}.cookie-consent .cc-actions{justify-content:flex-end;}}