/* ===================================================== GIPLG — shared stylesheet Used by: index.html, professionals.html, and every individual profile page (david-berten.html, etc.) THEME SWITCH: add data-theme="dark" to the tag to preview dark mode. Omit it for light mode (default). ===================================================== */ /* ---------- Dark theme override ---------- */ :root{ --bg:#FFFFFF; --bg-panel:#F4E4E5; --text:#111111; --text-muted:#4A4542; --border:#E7D6D7; --accent:#6D121A; --accent-hover:#4F0E14; --accent-2:#B6311E; --accent-rgb:109,18,26; --hero-overlay:#ffffffbe; --btn-primary-hover-bg:#EAD0D1; --serif:'Newsreader', Georgia, serif; --sans:'Inter', -apple-system, sans-serif; --mono:'IBM Plex Mono', monospace; /*--serif:var(--sans);*/ --sans:var(--serif); } :root/*[data-theme="dark"]*/{ --bg-page-content:#1c1c1c; --bg:#17110F; --bg:#1B1512; --bg:#140500; --bg-panel:#2B1519; --text:#F5ECE8; --text-muted:#C9AFA9; --border:#3D2529; --accent:#C23A4A; --accent:#F04C4C; --accent-hover:#D66478; --accent-2:#B6311E; --accent-rgb:194,58,74; --hero-overlay:#000000e4; --btn-primary-hover-bg:#33141A; --hf-bg:#FFFFFF; --hf-text:var(--bg); --hf-highlight:var(--accent); --hf-panel:#F4E4E5; --hf-main-border:var(--accent); --hf-border:#2B1519; --hf-main-text:var(--btn-primary-hover-bg); /* STANDARD COLORS --hf-bg:var(--bg); --hf-text:var(--text-muted); --hf-highlight:var(--accent); --hf-panel:var(--bg-panel); --hf-main-border:var(--border); --hf-border:var(--border); --hf-main-text:var(--text-muted); */ } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ font-family: var(--sans); color: var(--text); background: var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; cursor:pointer; border:none; background:none; } .wrap{ max-width:1180px; margin:0 auto; padding:0 32px; } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 26px; font-size:14px; font-weight:500; letter-spacing:0.02em; border-radius:2px; transition:background 0.2s ease, border-color 0.2s ease, color .2s ease; } .btn-primary{ background:var(--bg-panel); color:var(--accent); border:1px solid var(--accent); } .btn-primary:hover{ background:var(--btn-primary-hover-bg); } .btn-white{ background:var(--bg); color:var(--text); border:1px solid var(--text); } .btn-white:hover{ border-color:var(--accent); color:var(--accent);} .btn-outline{ background:transparent; color:var(--text); border:1px solid var(--text); } .btn-outline:hover{ border-color:var(--accent); color:var(--accent); } .btn:focus-visible, a:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; } /* ---------- Header (every page) ---------- */ header { background: var(--hf-bg); border-bottom: 1px solid var(--hf-main-border); position: sticky; top: 0; z-index: 50; } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 22px; padding-bottom: 22px; gap:22px } .brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: var(--text); } .brand-logo { height: clamp(40px, 7vw, 50px); width: auto; display: block; } .brand-logo-footer { height: clamp(40px, 10vw, 60px); /* shrinks with the viewport, never below 40px */ margin-bottom: 20px; margin-left: 30px; } .background { height: 50px; } nav a { color: var(--hf-text); font-size: 14px; font-weight: 500; letter-spacing: 0.01em; transition: color .2s ease; } nav a i { font-style: italic; } nav a:hover { color: var(--hf-highlight); } .nav-dropdown a { padding: 9px 18px; font-size: 13px; color: var(--hf-text); white-space: nowrap; transition: color .2s ease, background .2s ease; } .nav-dropdown a:hover { color: var(--hf-highlight); background: var(--hf-border); } /* ===================================================== Responsive / input-aware nav Four scenarios, one for each combination of: - viewport width (> 860px vs <= 860px) - input type (hover-capable pointer vs touch, i.e. "(hover: hover)" vs "(hover: none)") 1) Wide + hover -> desktop: hover reveals dropdowns, click on a top item navigates, no menu button. 2) Wide + touch -> tablet: no menu button, the row stays horizontal; tapping a top item toggles its dropdown instead of navigating (JS + tap-target), tapping a sub-item navigates. 3) Narrow + hover -> small desktop window: menu button shown; hovering the button/list or clicking it reveals the vertical nav; within it, hovering a top item reveals its sub-list (click still navigates). 4) Narrow + touch -> phone: menu button shown; clicking it toggles the vertical nav; tapping a top item toggles its sub-list (tapping a sub-item navigates). JS (nav.js) only ever intervenes for touch devices, to turn a top-item click into a toggle instead of a navigation, and to manage the accordion (opening one dropdown closes any other that was open). Everything else here is plain CSS. ===================================================== */ .nav-menu-wrap { position: relative; } .nav-toggle { display: none; position: relative; z-index: 2; /* stays above .nav-hover-zone so it's always clickable, even while that's shown */ color: var(--hf-text); font-size: 14px; font-weight: 500; letter-spacing: 0.02em; padding: 5px; margin: -5px; transition:color .2s ease; } .nav-hover-zone { display: none; z-index: 1; } .tap-target { display: none; } nav ul { list-style: none; } .nav-dropdown-wrap { position: relative; } .nav-dropdown { background: var(--hf-panel); border: 1px solid var(--hf-border); padding: 8px 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.2s ease, transform 0.2s ease; } /* ---- 1) Wide + hover: standard desktop nav ---- */ @media (min-width: 861px) and (hover: hover) { nav { display: block !important; } nav ul { display: flex; gap: 36px; } .nav-dropdown { position: absolute; top: 100%; left: 0; min-width: 210px; z-index: 60; } .nav-dropdown-wrap:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } } /* ---- 2) Wide + touch: tablet, click-to-open, still horizontal ---- */ @media (min-width: 861px) and (hover: none) { nav { display: block !important; } nav ul { display: flex; gap: 36px; } .nav-dropdown-wrap { padding-right: 4px; } .nav-link-row { position: relative; } .tap-target { display: block; position: absolute; inset: 0; cursor: pointer; } .nav-dropdown { position: absolute; top: 100%; left: 0; min-width: 210px; z-index: 60; } .nav-dropdown-wrap.open .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } } /* ---- 3) & 4) Narrow (<= 860px): menu button appears, submenus pop out to the right ---- */ @media (max-width: 860px) { .nav-toggle { display: block; } .nav-toggle:hover, .nav-menu-wrap.menu-open .nav-toggle { color: var(--hf-highlight); } /* header (already positioned via sticky) is the containing block for nav and the hover-zone below, instead of .nav-menu-wrap — which is only as wide as the button — so both span the full screen width. */ .nav-menu-wrap { position: static; display: flex; align-items: center; align-self: stretch; padding-bottom: 22px; margin-bottom: -22px; } /* invisible bridge: shown the instant the menu opens (via JS class), filling the whole header, so moving the mouse anywhere within it — including diagonally toward the list below — keeps the menu open instead of it disappearing in the gap under the word "Menu". */ .nav-hover-zone { position: absolute; inset: 0; } .nav-menu-wrap.menu-open .nav-hover-zone, .nav-menu-wrap.hover-open .nav-hover-zone { display: block; } nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--hf-bg); border: 1px solid var(--hf-border); border-top: none; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; } /* opening/closing is entirely class-driven via JS, never bare CSS :hover — real touch devices can get "stuck" in a :hover state after a tap, which would keep this open no matter how many times you tap the button to close it. */ .nav-menu-wrap.menu-open nav, .nav-menu-wrap.hover-open nav { opacity: 1; visibility: visible; transform: translateY(0); } nav ul { display: flex; flex-direction: column; width: 100%; /* leaves the right 58% clear for the flyout pane, so it never overlaps the list */ } .nav-dropdown-wrap { position: static; /* `nav`, not this row, is the dropdown's containing block */ display: flex; flex-direction: column; width: 100%; /**border-top: 1px solid var(--hf-border);*/ } .nav-dropdown-wrap:first-child { border-top: none; } nav a, nav .nav-link { display: block; padding: 14px 24px; } /* tap-target's containing block: .nav-link-row wraps just the link itself (tap-target is its sibling, not its child, so giving the link "position: relative" did nothing) — sized to just this row, not the dropdown, which sits outside .nav-link-row entirely. */ .nav-link-row { position: relative; } .tap-target { position: absolute; inset: 0; cursor: pointer; } html.is-touch-device .tap-target { display: block; } /* pops out to the right, anchored to the top of the whole panel — not stacked underneath its own row — so it always appears in the same place no matter which item triggered it */ .nav-dropdown { position: absolute; top: 0; right: 0; left: auto; width: calc(58% - 1px); /* -1px accounts for the border so the open right edge lands exactly at the screen edge */ max-height: none; overflow: visible; opacity: 0; visibility: hidden; transform: translateX(-8px); /* slides in from the left of its own position; sliding from the right pushed the (invisible) closed box past the viewport edge */ transition: opacity .2s ease, transform .2s ease, visibility .2s ease; border-left: 1px solid var(--hf-border); z-index: 70; } .nav-dropdown-wrap.open .nav-dropdown, .nav-dropdown-wrap.hover-open .nav-dropdown { display: flex; opacity: 1; visibility: visible; transform: translateX(0); } } /* ---------- Hero (index.html only) ---------- */ .hero{ background: linear-gradient(var(--hero-overlay), var(--hero-overlay)), url('images/hero-bg.jpg') center 30% / cover no-repeat; color:var(--text); padding:96px 0 80px; position:relative; } .hero-inner{ max-width:640px; position:relative; z-index:1; } .eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:0.18em; color:var(--accent); margin-bottom:22px; } .eyebrow-homepage{ font-family:var(--mono); font-size:18px; letter-spacing:0.18em; color:var(--accent); margin-bottom:22px; } .hero h1{ font-family:var(--serif); font-size:52px; line-height:1.08; font-weight:500; letter-spacing:-0.01em; margin-bottom:22px; color:var(--text); } .hero p{ font-size:17px; color:var(--text-muted); max-width:46ch; margin-bottom:36px; } .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; } @media (max-width: 900px){ .hero h1{ font-size:38px; } } /* ---------- Accolades conveyor (index.html only) ---------- */ .accolades{ background:var(--bg); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:44px 0; overflow:hidden; } .accolades-track{ width:100%; overflow:hidden; } .accolades-track-inner{ position:relative; width:100%; height:210px; display:block; animation:none !important; transform:none !important; } /* fixed carousel slots */ .accolade{ position:absolute; top:0; width:290px; opacity:0; background:var(--bg-panel); border:1px solid var(--border); border-top:3px solid var(--accent); padding:26px 20px; text-align:center; pointer-events: auto; } .accolade-link { display: block; color: inherit; text-decoration: none; } /* ---------- Pop-in animation ---------- */ .initial-fade-in{ animation:accoladePopIn 1.2s ease-out forwards; } .fade-in{ animation:accoladePopIn 3s ease-in-out forwards; } .fade-out{ animation:accoladeFadeOut 2.4s ease-in-out forwards; } @keyframes accoladePopIn{ 0%{ opacity:0; transform:translateX(-50%) scale(.85); } 100%{ opacity:1; transform:translateX(-50%) scale(1); } } @keyframes accoladeFadeOut{ 0%{ opacity:1; transform:translateX(-50%) scale(1); } 100%{ opacity:0; transform:translateX(-50%) scale(.96); } } .accolade svg{ width:24px; height:24px; stroke:var(--accent); margin-bottom:14px; } .accolade p{ font-family:var(--serif); font-size:14.5px; font-weight:500; color:var(--text); line-height:1.35; margin:0 0 14px; min-height:58px; display:flex; align-items:center; justify-content:center; } .accolade-rule{ width:52px; height:1px; background:var(--accent); margin:0 auto 14px; } .accolade span{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em; color:var(--accent); text-transform:uppercase; } @media (prefers-reduced-motion: reduce){ .accolades-track-inner{ display:flex; flex-wrap:wrap; gap:20px; height:auto; } .accolade{ position:static; opacity:1; transform:none; animation:none !important; } } /* ---------- Responsive accolades ---------- */ @media (max-width: 500px){ .accolades{ padding:36px 0; } .accolades-track-inner{ height:220px; } .accolade{ width:calc(100vw - 48px); max-width:320px; padding:24px 18px; } } /* ---------- Section scaffolding (index.html) ---------- */ section{ padding-top:96px; padding-bottom:96px; } .section-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:48px; gap:24px; flex-wrap:wrap; } .section-eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:0.14em; color:var(--accent); margin-bottom:10px; } .section-head h2{ font-family:var(--serif); font-size:32px; font-weight:500; color:var(--text); } .section-head p{ color:var(--text-muted); max-width:38ch; font-size:15px; } .section-head-link h2:hover{ color:var(--accent); } /* ---------- Practice areas page ---------- */ .practice-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; } .practice-card{ background:var(--bg-panel); border:1px solid var(--border); padding:32px 26px; display:flex; flex-direction:column; gap:14px; min-height:190px; transition: transform 0.2s ease, background 0.2s ease; } .practice-card:hover{ background:var(--btn-primary-hover-bg); transform: scale(1.01); } .practice-card:hover h2{ color:var(--accent); } .practice-card:hover p{ color:va; } .practice-num{ font-family:var(--mono); font-size:12px; color:var(--accent); } .practice-card h2{ font-family:var(--serif); font-size:19px; font-weight:500; color:var(--text); transition: color 0.2s ease; } h2 i{ font-style: italic; } .practice-card p{ font-size:13.5px; color:var(--text-muted); flex:1; } @media (max-width: 900px){ .practice-grid{ grid-template-columns:repeat(2, 1fr); } } @media (max-width: 560px){ .practice-grid{ grid-template-columns:1fr; } } /* ---------- Professionals preview strip (index.html only) ---------- */ .professionals{ background:var(--bg); } .people{ display:grid; grid-template-columns:repeat(5, 1fr); gap:16px; } .person{ background:var(--bg-panel); border:1px solid var(--border); padding:28px 20px 24px; display:flex; flex-direction:column; gap:16px; } .avatar{ width:44px; height:44px; border-radius:50%; border:1px solid rgba(var(--accent-rgb),0.4); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:15px; color:var(--accent); } .person h3{ font-family:var(--serif); font-size:16px; font-weight:500; margin-bottom:2px; color:var(--text); } .person span{ font-size:12px; color:var(--text-muted); } .person .btn{ align-self:flex-start; padding:8px 0; font-size:12.5px; color:var(--accent); } @media (max-width: 900px){ .people{ grid-template-columns:repeat(2, 1fr); } } @media (max-width: 560px){ .people{ grid-template-columns:1fr; } } /* ---------- Locations (index.html only) ---------- */ .locations-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; } .location-card{ border:1px solid var(--border); background:var(--bg-panel); padding:30px 28px; position:relative; } .location-card::before{ content:''; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--accent); } .loc-tag{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; color:var(--accent); margin-bottom:14px; display:block; } .location-card h3{ font-family:var(--serif); font-size:22px; font-weight:500; margin-bottom:10px; color:var(--text); } .location-card p{ font-size:13.5px; color:var(--text-muted); } @media (max-width: 860px){ .locations-grid{ grid-template-columns:1fr; } } /* ---------- CTA band (index.html only) ---------- */ .cta-band{ background:var(--bg-panel); border-top:1px solid var(--border); border-bottom:1px solid var(--border); color:var(--text); text-align:center; padding:80px 32px; } .cta-band h2{ font-family:var(--serif); font-size:30px; font-weight:500; margin-bottom:16px; color:var(--text); } .cta-band p{ color:var(--text-muted); max-width:52ch; margin:0 auto 32px; font-size:15.5px; } /* ---------- universal ---------- */ .page-header{ padding-top:28px; padding-bottom:4px; /*border-bottom:1px solid var(--border);*/ background:var(--bg-page-content) } .page-header::after{ content:''; display:block; width:min(1100px, 100%); height:1px; background:var(--border); margin:24px auto 0; } .page-header h1{ font-family:var(--serif); font-size:38px; font-weight:500; color:var(--text); margin-bottom:14px; } .page-header p{ color:var(--text-muted); max-width:52ch; font-size:15.5px; } .page-content{ background:var(--bg-page-content) } /* ---------- Professionals grid (professionals.html only) ---------- */ .professionals-section{ padding-top:36px; padding-bottom:96px; background:var(--bg-page-content)} .professionals-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:36px; } .professional-card{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; width:100%; padding:0; text-align:left; } .professional-photo{ width:100%; aspect-ratio:1 / 1; object-fit:cover; object-position:50% 50%; background:var(--bg-panel); border:1px solid var(--border); display:block; transition:opacity .2s ease; } .professional-photo:hover{ opacity:0.85; } .crop-david{ object-position:50% 25%; } .crop-graham{ object-position:40% 70%; } .crop-ragnar{ object-position:50% 0%; } .crop-alison{ object-position:50% 40%; } .crop-michael{ object-position:50% 20%; } .crop-alyssa{ object-position:50% 0%} .professional-card h2{ font-family:var(--serif); font-size:18px; font-weight:500; color:var(--text); transition: color .2s ease; } .professional-card h3:hover{ color:var(--accent); } .professional-card .role{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.1em; color:var(--accent); text-transform:uppercase; margin-top:-8px; } /* ---------- Breadcrumb (profile pages only) ---------- */ .breadcrumb{ padding-top:28px; } .breadcrumb a{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.08em; color:var(--accent); text-transform:uppercase; transition:color .2s ease; } .breadcrumb a:hover{ color:var(--accent-hover); } /* ---------- Individual profile pages ---------- */ .profile-section{ padding-top:40px; padding-bottom:96px; } .profile-grid{ display:grid; grid-template-columns:400px 1fr; gap:56px; align-items:start; } .profile-photo-col{ position:sticky; top:150px; display:flex; flex-direction:column; gap:16px; } .profile-photo{ width:100%; aspect-ratio:3 / 4; object-fit:cover; object-position:50% 20%; background:var(--bg-panel); border:1px solid var(--border); display:block; } .profile-header-sticky{ position:sticky; top:150px; z-index:5; } .profile-header-sticky::before{ content:''; position:absolute; top:-40px; bottom:-5px; left:0; right:0; background:var(--bg-page-content); z-index:-1; } .profile-name{ font-family:var(--serif); font-size:34px; font-weight:500; line-height:1.15; margin-bottom:8px; } .profile-name .first{ color:var(--text); } .profile-name .last{ color:var(--accent); } .profile-role{ display:block; font-family:var(--mono); font-size:12px; letter-spacing:0.1em; color:var(--accent); text-transform:uppercase; margin-bottom:10px; } .profile-bio p{ color:var(--text-muted); font-size:13.5px; line-height:1.7; margin-bottom:18px; margin-top:10px; } .profile-bio ul{ margin:0 0 18px 20px; } .profile-bio li{ color:var(--text-muted); font-size:13.5px; line-height:1.7; margin-bottom:14px; } .profile-bio a { text-decoration: underline; transition:color .2s ease; } .profile-bio a:hover { color:var(--accent); } p emph{ color:var(--text); } @media (max-width: 760px){ .profile-grid{ grid-template-columns:1fr; } .profile-photo-col{ position:static; max-width:280px; } .profile-header-sticky{ position:static; } } /* ---------- Footer (every page) ---------- */ footer{ background:var(--hf-bg); color:var(--hf-text); padding:56px 0 32px; font-size:13px; border-top:1px solid var(--hf-main-border); } .footer-top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:32px; padding-bottom:32px; border-bottom:1px solid var(--hf-main-border); margin-bottom:24px; align-items:center; } .footer-cols{ display:flex; gap:56px; flex-wrap:wrap; } .footer-col h2{ font-size:12px; letter-spacing:0.08em; color:var(--hf-main-text); margin-bottom:14px; } .footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:9px; } footer a:hover{ color:var(--hf-highlight); } footer a{ transition:color .2s ease; } .footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; } .footer-right{ display:flex; gap:20px; } @media (max-width: 600px){ .footer-bottom{ flex-direction: column; align-items: flex-start; gap: 14px; } .footer-right{ flex-wrap: wrap; row-gap: 8px; } } .footer-link{ text-decoration:underline; } /* ---------- Practice areas scroll story (unused — kept in case reinstated) ---------- */ .practice-scroll{ position:relative; } .practice-slide-wrap{ height:220vh; position:relative; } .practice-slide-wrap + .practice-slide-wrap{ margin-top:-85vh; } .practice-slide-sticky{ position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; } .practice-slide-content{ max-width:640px; padding:0 32px; text-align:center; will-change:transform, opacity; } .practice-slide-num{ font-family:var(--mono); font-size:14px; letter-spacing:0.14em; color:var(--accent); display:block; margin-bottom:18px; } .practice-slide-content h2{ font-family:var(--serif); font-size:48px; font-weight:500; color:var(--text); margin-bottom:20px; } .practice-slide-content p{ font-size:17px; color:var(--text-muted); line-height:1.7; } @media (max-width: 700px){ .practice-slide-content h2{ font-size:32px; } .practice-slide-content p{ font-size:15px; } } @media (prefers-reduced-motion: reduce){ .practice-slide-wrap{ height:auto; margin-top:0 !important; } .practice-slide-sticky{ position:static; height:auto; padding:56px 0; border-bottom:1px solid var(--border); } .practice-slide-content{ opacity:1 !important; transform:none !important; } } /* ---------- Practice areas grid section spacing ---------- */ .practice-areas-grid-section{ padding-top:36px; padding-bottom:40px; background:var(--bg-page-content);} /* ---------- Practice area detail pages (patent_litigation.html, etc.) ---------- */ .practice-detail-header{ padding-top:28px; padding-bottom:24px; background:var(--bg-page-content); } .practice-title{ font-family:var(--serif); font-size:44px; font-weight:500; letter-spacing:0.01em; } .practice-title i{ font-style:italic; } .practice-title .first{ color:var(--text); } .practice-title .last{ color:var(--accent); } .practice-title-rule{ width:100%; height:1px; background:var(--text); margin-top:20px; } .practice-detail-body{ padding-top:16px; padding-bottom:96px; background:var(--bg-page-content); } .practice-detail-body p{ color:var(--text-muted); font-size:15px; line-height:1.75; margin-bottom:20px; } .practice-detail-body ul{ margin:0 0 18px 26px; } .practice-detail-body li{ color:var(--text-muted); font-size:15px; line-height:1.75; max-width:720px; } /* ---------- IPR results table ---------- */ .ipr-table-wrap{ width:100%; overflow-x:auto; margin-top:36px; margin-bottom:20px; } .ipr-table{ width:100%; border-collapse:collapse; table-layout:auto; font-size:13px; } .ipr-table th{ font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; text-align:left; color:var(--accent); padding:14px 16px; border-bottom:2px solid var(--accent); white-space:nowrap; } .ipr-table td{ color:var(--text-muted); padding:13px 16px; border-bottom:1px solid var(--border); line-height:1.5; vertical-align:top; } .ipr-table td:first-child{ font-family:var(--mono); font-size:12px; color:var(--text); white-space:nowrap; } .ipr-table td:nth-child(2), .ipr-table td:nth-child(3){ white-space:nowrap; } .ipr-table td:last-child{ min-width:240px; } /* ---------- Responsive IPR table ---------- */ @media (max-width:760px){ .ipr-table{ min-width:760px; } .ipr-table-wrap{ margin-top:28px; } .ipr-table th, .ipr-table td{ padding:12px 14px; } } /* ---------- Locations page (locations/locations.html only) ---------- */ .locations-page-section{ padding-top:24px; padding-bottom:56px; background:var(--bg-page-content);} .locations-page-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; } .location-page-card{ display:flex; flex-direction:column; } .location-page-photo{ width:100%; aspect-ratio:4 / 3; object-fit:cover; background:var(--bg-panel); border:2px solid var(--border); display:block; margin-bottom:16px; filter: grayscale(100%) contrast(1.1); transition:opacity .2s ease; } .location-page-photo:hover{ opacity:.85; } .location-page-card .loc-tag{ margin-bottom:8px; } .location-page-card h2{ font-family:var(--serif); font-size:22px; font-weight:500; color:var(--text); margin-bottom:8px; align-self:flex-start; transition:color .2s ease; } .location-page-card h2:hover{ color:var(--accent) } .location-page-card p{ font-size:13.5px; color:var(--text-muted); line-height:1.6; } @media (max-width: 900px){ .locations-page-grid{ grid-template-columns:1fr; } } /* ---------- Individual location layout ---------- */ .location-detail-layout{ display:grid; grid-template-columns:55% 45%; min-height:650px; background:var(--bg-page-content); margin-top: -70px; } /* Left image */ .location-detail-image{ position:relative; height:650px; overflow:hidden; border:3px solid var(--border); margin-left: 30px; margin-right: 0; /* abuts the content column at full width, so no right margin needed here */ } .location-detail-image img{ width:100%; height:100%; object-fit:cover; object-position:50% 65%; display:block; filter:grayscale(100%) contrast(1.08); } /* Right content */ .location-detail-content{ padding:90px 80px 80px 40px; max-width:650px; } .location-detail-content .loc-tag{ margin-bottom:14px; } .location-detail-title{ font-family:var(--serif); font-size:52px; font-weight:500; line-height:1.05; color:var(--text); margin-bottom:12px; } .location-detail-role{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:55px; } .location-detail-text{ max-width:520px; } .location-detail-text p{ color:var(--text-muted); font-size:15px; line-height:1.8; margin-bottom:22px; } /* Footer spacing */ .location-detail-layout + footer{ margin-top:0; } @media(max-width:900px){ .location-detail-layout{ display:block; } .location-detail-image{ height:400px; margin-left: 24px; margin-right: 24px; } .location-detail-content{ padding:40px 32px 70px; max-width:none; } .location-detail-title{ font-size:38px; } } /* ---------- Submit Patents form (submit_patents.html only) ---------- */ .submit-section{ padding-top:56px; padding-bottom:96px; background: var(--bg-page-content);} .submit-grid{ display:grid; grid-template-columns:36% 64%; gap:64px; align-items:start; } .submit-title{ font-family:var(--serif); font-size:48px; font-weight:700; line-height:1.05; color:var(--text); margin-bottom:20px; } .submit-title .first{ color:var(--text) } .submit-title .last{ color:var(--accent) } .submit-intro p{ color:var(--text-muted); font-size:15.5px; line-height:1.6; max-width:38ch; } .submit-hp{ position:absolute; left:-9999px; } .submit-form{ display:flex; flex-direction:column; gap:24px; } .submit-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } .submit-field{ display:flex; flex-direction:column; gap:8px; } .submit-field label{ font-size:13.5px; font-weight:500; color:var(--text); } .submit-field legend{ font-size:13.5px; font-weight:500; color:var(--text); } .submit-field input, .submit-field textarea, .submit-field select{ font-family:var(--sans); font-size:16px; color:var(--bg); background:var(--text); border:1px solid var(--bg-panel); border-radius:2px; padding:12px 14px; width:100%; } .submit-field input:-webkit-autofill, .submit-field input:-webkit-autofill:hover, .submit-field input:-webkit-autofill:focus, .submit-field textarea:-webkit-autofill, .submit-field select:-webkit-autofill{ -webkit-box-shadow: 0 0 0px 1000px var(--text) inset; -webkit-text-fill-color: var(--bg); transition: background-color 5000s ease-in-out 0s; } .submit-field textarea{ resize:vertical; } .submit-field input:focus, .submit-field textarea:focus, .submit-field select:focus{ outline:none; border-color:var(--accent); } .submit-address-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .submit-address-grid input:first-child{ grid-column:1 / -1; } .submit-send-btn{ align-self:center; margin-top:8px; } .submit-send-btn:disabled{ opacity:0.6; cursor:not-allowed; } .submit-confirmation{ background:var(--bg-panel); border:1px solid var(--border); border-top:3px solid var(--accent); padding:40px 36px; text-align:center; } .submit-confirmation h2{ font-family:var(--serif); font-size:26px; font-weight:500; color:var(--text); margin-bottom:10px; } .submit-confirmation p{ color:var(--text-muted); font-size:14.5px; margin-bottom:24px; } @media (max-width: 860px){ .submit-grid{ grid-template-columns:1fr; gap:36px; } .submit-row{ grid-template-columns:1fr; } .submit-address-grid{ grid-template-columns:1fr; } .submit-address-grid input:first-child{ grid-column:auto; } } /* ---------- Location contact block (chicago.html, london.html, seoul.html) ---------- */ .location-detail-contact{ background:var(--bg-panel); border:1px solid var(--border); padding:24px 28px; margin: 32px auto 0px; max-width:400px; } .location-detail-contact h3{ font-family:var(--serif); font-size:18px; font-weight:500; color:var(--text); margin-bottom:12px; } .location-detail-contact p{ font-size:14px; color:var(--text-muted); line-height:1.6; margin-bottom:8px; } .location-detail-contact p:last-child{ margin-bottom:0; } .location-detail-contact a{ color:var(--accent); text-decoration:underline; } .location-detail-contact a:hover{ color:var(--accent-hover); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- Accessibility page (accessibility.html) ---------- */ .accessibility-header{ padding-top:28px; padding-bottom:24px; background:var(--bg-page-content); } .accessibility-title{ font-family:var(--serif); font-size:44px; font-weight:500; letter-spacing:0.01em; } .accessibility-title .first{ color:var(--text); } .accessibility-title .last{ color:var(--accent); } .accessibility-title-rule{ width:100%; height:1px; background:var(--text); margin-top:20px; } .accessibility-body{ padding-top:16px; padding-bottom:96px; background:var(--bg-page-content); } .accessibility-body p{ color:var(--text-muted); font-size:15px; line-height:1.75; margin-bottom:20px; } .accessibility-body a{ color:var(--text-muted); text-decoration:underline; transition:color .2s ease; } .accessibility-body a:hover{ color:var(--accent); } /* ---------- Privacy Policy page ---------- */ .privacy-header{ padding-top:28px; padding-bottom:24px; background:var(--bg-page-content); } .privacy-title{ font-family:var(--serif); font-size:44px; font-weight:500; letter-spacing:0.01em; color:var(--text); } .privacy-title-rule{ width:100%; height:1px; background:var(--text); margin-top:20px; } .privacy-body{ padding-top:16px; padding-bottom:96px; background:var(--bg-page-content); } .privacy-body p{ color:var(--text-muted); font-size:15px; line-height:1.75; margin-bottom:20px; max-width:720px; } .privacy-body h2{ font-family:var(--serif); font-size:24px; font-weight:500; color:var(--text); margin:36px 0 14px; } .privacy-body a{ color:var(--text-muted); text-decoration:underline; transition:color .2s ease; } .privacy-body a:hover{ color:var(--accent); }