/* ============================================================ UQESH Surface — foundation stylesheet (FLUID / rem-based) Design tokens + base + shared header/footer. Strategy: the 1440px design is the baseline (root = 16px @ 1440); the root font-size scales with the viewport (clamp + vw), and all sizes are in rem, so the whole layout scales proportionally to fill large screens (1920 / 2560 / 4K) without distorting the design. Skin switches on [data-site="materials|engineering"] (set on ). ============================================================ */ /* ---------- Fluid root: 16px @1440, scales up, capped for 4K ---------- */ html{ font-size: clamp(16px, calc(100vw / 90), 28px); } /* ---------- Tokens (shared) ---------- */ :root{ --brand:#4F6B3A; --on-brand:#FFFFFF; --radius-card:0.875rem; --radius-pill:999px; --font-display:"Archivo", system-ui, sans-serif; --font-body:"Inter", system-ui, sans-serif; --wrap-max:90rem; /* 1440 baseline; scales with root */ --wrap-pad:3rem; /* 48 @1440 */ } /* Materials — light */ [data-site="materials"]{ --bg:#FBFAF6; --surface:#FFFFFF; --surface-alt:#F1EFE8; --text-primary:#232925; --text-secondary:#5C6660; --line:#E4E0D4; --brand-accent:#4F6B3A; --header-bg:#FFFFFF; --footer-bg:#FFFFFF; --footer-line:rgba(0,0,0,.08); --menu-color:var(--text-primary); --header-menu-bg:#FFFFFF; } /* Engineering — dark */ [data-site="engineering"]{ --bg:#1E231E; --surface:#272E27; --surface-alt:#2C342B; --text-primary:#F6F8F3; --text-secondary:#AEB7A6; --line:#3A4238; --brand-accent:#9CBE6E; --header-bg:transparent; --footer-bg:#10130F; --footer-line:rgba(255,255,255,.08); --menu-color:#EAEFE4; --header-menu-bg:#171B17; } /* ---------- Base ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--bg); color:var(--text-primary); font-family:var(--font-body); font-size:1rem; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3,h4,h5{ font-family:var(--font-display); font-weight:800; line-height:1.15; color:var(--text-primary); margin:0 0 .5em; } a{ color:inherit; text-decoration:none; } img,svg{ max-width:100%; height:auto; display:block; } ul{ margin:0; padding:0; } .wrap{ width:100%; max-width:var(--wrap-max); margin-inline:auto; padding-inline:var(--wrap-pad); } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:0.8125rem; letter-spacing:.03em; padding:0.75rem 1.375rem; border-radius:0.375rem; cursor:pointer; border:0; white-space:nowrap; transition:filter .15s ease, background .15s ease, color .15s ease; } .btn-brand{ background:var(--brand); color:var(--on-brand); } .btn-brand:hover{ filter:brightness(1.07); } /* ---------- Header ---------- */ .site-header{ background:var(--header-bg); border-bottom:1px solid var(--line); } .site-header .nav{ display:flex; align-items:center; justify-content:space-between; padding-block:1.375rem; gap:1.5rem; } .brand{ display:inline-flex; flex-direction:column; gap:0.0625rem; line-height:1; } .brand .wordmark{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; letter-spacing:.03em; color:var(--text-primary); } .brand .wordmark-sub{ font-family:var(--font-display); font-weight:600; font-size:0.594rem; letter-spacing:.2em; color:var(--text-secondary); } .brand-logo{ height:1.875rem; width:auto; } .menu{ display:flex; align-items:center; gap:1.75rem; } .menu-list{ display:flex; align-items:center; gap:1.75rem; list-style:none; } .menu-list a{ font-family:var(--font-display); font-weight:600; font-size:0.781rem; letter-spacing:.05em; color:var(--menu-color); transition:color .15s ease; } .menu-list a:hover{ color:var(--brand-accent); } /* ---------- Mobile nav toggle (hamburger) — hidden on desktop ---------- */ .nav-toggle{ display:none; flex:none; align-items:center; justify-content:center; width:2.75rem; height:2.75rem; margin:-0.5rem -0.5rem -0.5rem 0; padding:0; background:transparent; border:0; cursor:pointer; color:var(--menu-color); -webkit-tap-highlight-color:transparent; } .nav-toggle-box{ display:block; position:relative; width:1.375rem; height:1rem; } .nav-toggle-bar{ position:absolute; left:0; width:100%; height:2px; background:currentColor; border-radius:2px; transition:transform .2s ease, opacity .2s ease, top .2s ease; } .nav-toggle-bar:nth-child(1){ top:0; } .nav-toggle-bar:nth-child(2){ top:calc(50% - 1px); } .nav-toggle-bar:nth-child(3){ top:calc(100% - 2px); } .site-header.nav-open .nav-toggle-bar:nth-child(1){ top:calc(50% - 1px); transform:rotate(45deg); } .site-header.nav-open .nav-toggle-bar:nth-child(2){ opacity:0; } .site-header.nav-open .nav-toggle-bar:nth-child(3){ top:calc(50% - 1px); transform:rotate(-45deg); } /* ---------- Footer ---------- */ .site-footer{ background:var(--footer-bg); } [data-site="materials"] .site-footer{ border-top:1px solid var(--line); } .footer-top{ display:flex; justify-content:space-between; gap:3rem; flex-wrap:wrap; padding-top:3.5rem; padding-bottom:1.875rem; } .footer-brand{ max-width:18.75rem; display:flex; flex-direction:column; align-items:flex-start; gap:0.75rem; } .footer-brand .brand-logo{ height:1.625rem; } .footer-tagline{ color:var(--text-secondary); font-size:0.8125rem; margin:0; line-height:1.5; } .footer-socials{ display:flex; gap:0.5625rem; margin-top:0.25rem; } .footer-socials .soc{ width:2rem; height:2rem; border-radius:0.375rem; border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; color:var(--text-secondary); transition:color .15s ease, border-color .15s ease; } .footer-socials .soc:hover{ color:var(--brand-accent); border-color:var(--brand-accent); } .footer-socials .soc svg{ width:1rem; height:1rem; } .footer-cols{ display:flex; gap:3.375rem; flex-wrap:wrap; } .footer-col h4{ font-family:var(--font-display); font-weight:700; font-size:0.75rem; letter-spacing:.08em; margin:0 0 0.75rem; color:var(--text-primary); } .footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:0.6875rem; } .footer-col li{ color:var(--text-secondary); font-size:0.781rem; } .footer-bar{ display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; padding-top:1.125rem; padding-bottom:1.625rem; border-top:1px solid var(--footer-line); color:var(--text-secondary); font-size:0.75rem; } /* ---------- Responsive (tablet / mobile) ---------- */ @media (max-width:900px){ html{ font-size:15px; } :root{ --wrap-pad:1.5rem; } .site-header{ position:relative; z-index:40; } .nav-toggle{ display:inline-flex; } /* Nav collapses into a full-width dropdown panel below the header bar */ .menu{ display:none; position:absolute; top:100%; left:0; right:0; z-index:100; flex-direction:column; align-items:stretch; gap:0; background:var(--header-menu-bg); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:0.25rem var(--wrap-pad) 1.375rem; box-shadow:0 14px 28px rgba(0,0,0,.16); } .site-header.nav-open .menu{ display:flex; } .menu-list{ display:flex; flex-direction:column; align-items:stretch; gap:0; width:100%; } .menu-list li{ width:100%; border-bottom:1px solid var(--line); } .menu-list li:last-child{ border-bottom:0; } .menu-list a{ display:block; padding:0.9rem 0.125rem; font-size:0.95rem; } .menu .btn-brand{ margin-top:1.125rem; width:100%; padding-block:0.9rem; font-size:0.875rem; } .footer-top{ flex-direction:column; gap:2rem; } } @media (max-width:480px){ html{ font-size:14px; } }