/* ========================================================================== MEASUREMASTER — Liquid Glass Secondary theme. Activated by [data-theme="glass"] on . Everything below is scoped so the default paper theme is untouched. The effect is built from four stacked ingredients, not one blur: 1. backdrop-filter — refraction of whatever sits behind 2. a translucent tint with an internal top-light gradient 3. a specular rim (light top-left edge, shadow bottom-right) 4. a moving sheen that catches on hover, like light across wet glass ========================================================================== */ [data-theme="glass"]{ --paper: #f7f2ea; --paper-2: #efe7db; --paper-3: #e5dacb; --ink: #221c15; --ink-2: #4c4339; --ink-3: #7d7264; --ink-4: #a89c8c; --line: rgba(38,32,25,.10); --line-2: rgba(38,32,25,.18); /* glass primitives */ --g-tint: rgba(255,252,247,.52); --g-tint-2: rgba(255,252,247,.34); --g-tint-deep: rgba(34,28,21,.62); --g-rim: rgba(255,255,255,.72); --g-rim-low: rgba(255,255,255,.30); --g-shade: rgba(38,32,25,.10); --g-blur: 18px; --g-sat: 170%; --radius: 14px; --radius-lg: 20px; --shadow: 0 2px 10px rgba(38,32,25,.06); --shadow-lift: 0 18px 50px rgba(38,32,25,.14), 0 2px 8px rgba(38,32,25,.06); } /* ---------------------------------------------------------------- canvas */ [data-theme="glass"] body{ background: radial-gradient(1200px 720px at 8% -6%, rgba(212,150,104,.30), transparent 62%), radial-gradient(1000px 680px at 96% 4%, rgba(168,80,29,.20), transparent 60%), radial-gradient(900px 620px at 50% 106%, rgba(140,120,90,.24), transparent 62%), linear-gradient(168deg,#fbf6ee 0%,#f2e9dc 46%,#ece0cf 100%); background-attachment:fixed; } /* slow-drifting colour blooms that the glass refracts */ .glass-ambient{display:none} [data-theme="glass"] .glass-ambient{ display:block;position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden; transform:translateZ(0);contain:strict; } [data-theme="glass"] .glass-ambient span{ position:absolute;border-radius:50%;filter:blur(60px);opacity:.5; will-change:transform; } [data-theme="glass"] .glass-ambient span:nth-child(1){ width:44vw;height:44vw;left:-8vw;top:-6vw; background:radial-gradient(circle at 32% 32%,rgba(194,98,42,.52),rgba(194,98,42,0) 68%); animation:drift-a 38s ease-in-out infinite; } [data-theme="glass"] .glass-ambient span:nth-child(2){ width:38vw;height:38vw;right:-6vw;top:12vh; background:radial-gradient(circle at 62% 38%,rgba(150,120,78,.46),rgba(150,120,78,0) 68%); animation:drift-b 46s ease-in-out infinite; } [data-theme="glass"] .glass-ambient span:nth-child(3){ width:46vw;height:46vw;left:26vw;bottom:-18vw; background:radial-gradient(circle at 48% 52%,rgba(168,80,29,.34),rgba(168,80,29,0) 70%); animation:drift-c 54s ease-in-out infinite; } @keyframes drift-a{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(7vw,5vh,0) scale(1.14)}} @keyframes drift-b{0%,100%{transform:translate3d(0,0,0) scale(1.06)}50%{transform:translate3d(-6vw,8vh,0) scale(.94)}} @keyframes drift-c{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-8vw,-6vh,0) scale(1.12)}} [data-theme="glass"] .page-bg{opacity:.06;mix-blend-mode:multiply} /* ========================================================================== THE GLASS PRIMITIVE ========================================================================== */ /* --- tier 1: real refraction. Few, large, mostly above the fold. --- */ [data-theme="glass"] .glass, [data-theme="glass"] .card, [data-theme="glass"] .mission-card, [data-theme="glass"] .contact-card, [data-theme="glass"] .panel, [data-theme="glass"] .spec-card, [data-theme="glass"] .form-card, [data-theme="glass"] .award-card, [data-theme="glass"] .table-wrap{ position:relative; background:linear-gradient(150deg,var(--g-tint) 0%,var(--g-tint-2) 58%,rgba(255,252,247,.26) 100%); -webkit-backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat)); backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat)); border:1px solid var(--g-rim-low); border-radius:var(--radius); box-shadow: inset 0 1px 0 var(--g-rim), inset 0 -1px 0 rgba(38,32,25,.05), inset 1px 0 0 rgba(255,255,255,.30), 0 10px 34px rgba(38,32,25,.10); overflow:hidden; } /* --- tier 2: the same look without a compositing layer each. --- */ [data-theme="glass"] .formula, [data-theme="glass"] .callout, [data-theme="glass"] .about-stat, [data-theme="glass"] .faq details, [data-theme="glass"] .pill, [data-theme="glass"] .footer-grant{ position:relative; background:linear-gradient(150deg,rgba(255,253,249,.74),rgba(255,251,245,.56)); border:1px solid var(--g-rim-low); border-radius:var(--radius); box-shadow:inset 0 1px 0 var(--g-rim),0 6px 20px rgba(38,32,25,.07); } /* specular sweep across the top edge — the "wet" read */ [data-theme="glass"] .card::before, [data-theme="glass"] .mission-card::before, [data-theme="glass"] .contact-card::before, [data-theme="glass"] .panel::before, [data-theme="glass"] .spec-card::before, [data-theme="glass"] .form-card::before, [data-theme="glass"] .award-card::before{ content:'';position:absolute;inset:0 0 auto 0;height:52%; background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0)); pointer-events:none;border-radius:var(--radius) var(--radius) 0 0; } /* the grid dividers become light seams instead of dark lines */ [data-theme="glass"] .cards-grid, [data-theme="glass"] .cards-4, [data-theme="glass"] .cards-2, [data-theme="glass"] .mission-grid, [data-theme="glass"] .contact-grid, [data-theme="glass"] .metrics, [data-theme="glass"] .about-stats{ background:transparent;border:none;gap:14px; } [data-theme="glass"] .cards-grid > *, [data-theme="glass"] .cards-4 > *, [data-theme="glass"] .cards-2 > *, [data-theme="glass"] .mission-grid > *, [data-theme="glass"] .contact-grid > *, [data-theme="glass"] .about-stats > *{ border-radius:var(--radius); } [data-theme="glass"] .card:hover, [data-theme="glass"] .mission-card:hover, [data-theme="glass"] .contact-card:hover{ background:linear-gradient(150deg,rgba(255,253,250,.66) 0%,rgba(255,252,247,.44) 58%,rgba(255,252,247,.32) 100%); transform:translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(38,32,25,.05), 0 18px 44px rgba(38,32,25,.14); } /* ========================================================================== NAVIGATION — floating glass rail ========================================================================== */ [data-theme="glass"] .topbar{ background:linear-gradient(180deg,rgba(34,28,21,.88),rgba(34,28,21,.78)); -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%); border-bottom:1px solid rgba(255,255,255,.10); } [data-theme="glass"] #navbar{ background:linear-gradient(180deg,rgba(255,253,250,.62),rgba(255,250,244,.44)); -webkit-backdrop-filter:blur(20px) saturate(175%); backdrop-filter:blur(20px) saturate(175%); border-bottom:1px solid rgba(255,255,255,.42); box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 8px 30px rgba(38,32,25,.08); } [data-theme="glass"] #navbar.scrolled{ background:linear-gradient(180deg,rgba(255,253,250,.80),rgba(255,250,244,.62)); box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 12px 38px rgba(38,32,25,.12); } [data-theme="glass"] .nav-links a{ border-radius:999px; border:1px solid transparent; } [data-theme="glass"] .nav-links a:hover{ background:linear-gradient(150deg,rgba(255,255,255,.62),rgba(255,255,255,.32)); border-color:rgba(255,255,255,.6); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 12px rgba(38,32,25,.08); } [data-theme="glass"] .nav-links a.active{ background:linear-gradient(150deg,rgba(255,255,255,.72),rgba(248,235,222,.48)); border-color:rgba(255,255,255,.72); color:var(--steel); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 4px 14px rgba(168,80,29,.14); } [data-theme="glass"] .logo img{ border:1px solid rgba(255,255,255,.7); box-shadow:0 0 0 3px rgba(255,255,255,.45),0 4px 14px rgba(38,32,25,.14); } /* ========================================================================== BUTTONS — liquid glass with a travelling highlight ========================================================================== */ [data-theme="glass"] .btn-primary, [data-theme="glass"] .btn-ghost, [data-theme="glass"] .nav-cta, [data-theme="glass"] .theme-toggle, [data-theme="glass"] .nav-burger{ position:relative;overflow:hidden;border-radius:999px; transition:transform var(--ease),box-shadow var(--ease),background var(--ease),border-color var(--ease); } /* the sheen element */ [data-theme="glass"] .btn-primary::after, [data-theme="glass"] .btn-ghost::after, [data-theme="glass"] .nav-cta::after{ content:'';position:absolute;top:0;left:-140%;width:60%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.62),transparent); transform:skewX(-18deg);pointer-events:none;transition:left .62s cubic-bezier(.22,.9,.3,1); } [data-theme="glass"] .btn-primary:hover::after, [data-theme="glass"] .btn-ghost:hover::after, [data-theme="glass"] .nav-cta:hover::after{left:150%} /* primary — copper seen through glass */ [data-theme="glass"] .btn-primary{ background:linear-gradient(150deg,rgba(194,98,42,.94),rgba(150,66,22,.90)); border:1px solid rgba(255,255,255,.34); color:#fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.52), inset 0 -2px 6px rgba(90,38,10,.34), 0 8px 24px rgba(168,80,29,.30); text-shadow:0 1px 1px rgba(80,32,8,.3); } [data-theme="glass"] .btn-primary:hover:not(:disabled){ transform:translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 8px rgba(90,38,10,.4), 0 14px 34px rgba(168,80,29,.40); } [data-theme="glass"] .btn-primary:active{transform:translateY(0) scale(.985)} /* ghost — pure glass */ [data-theme="glass"] .btn-ghost{ background:linear-gradient(150deg,rgba(255,255,255,.52),rgba(255,255,255,.26)); border:1px solid rgba(255,255,255,.62); color:var(--ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 20px rgba(38,32,25,.10); } [data-theme="glass"] .btn-ghost:hover{ background:linear-gradient(150deg,rgba(255,255,255,.68),rgba(255,255,255,.40)); transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 12px 30px rgba(38,32,25,.14); } /* dark CTA — smoked glass */ [data-theme="glass"] .nav-cta{ background:linear-gradient(150deg,rgba(46,38,29,.90),rgba(28,23,17,.86)); border:1px solid rgba(255,255,255,.20); box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 8px 24px rgba(38,32,25,.28); } [data-theme="glass"] .nav-cta:hover{ background:linear-gradient(150deg,rgba(150,66,22,.94),rgba(120,50,14,.92)); transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 14px 34px rgba(168,80,29,.34); } /* cta panel on dark */ [data-theme="glass"] .cta-card{ background:linear-gradient(150deg,rgba(40,33,25,.80),rgba(26,21,16,.74)); -webkit-backdrop-filter:blur(20px) saturate(170%); backdrop-filter:blur(20px) saturate(170%); border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-lg); box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 22px 60px rgba(38,32,25,.28); } [data-theme="glass"] .cta-buttons .btn-ghost{ background:linear-gradient(150deg,rgba(255,255,255,.20),rgba(255,255,255,.08)); border-color:rgba(255,255,255,.34);color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.30)} [data-theme="glass"] .cta-buttons .btn-ghost:hover{background:linear-gradient(150deg,rgba(255,255,255,.32),rgba(255,255,255,.16))} /* ========================================================================== SURFACES + SECTIONS ========================================================================== */ [data-theme="glass"] .section-alt{ background:linear-gradient(180deg,rgba(255,252,247,.42),rgba(255,250,243,.24)); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,.5); border-bottom:1px solid rgba(255,255,255,.5); } [data-theme="glass"] .hero, [data-theme="glass"] .page-hero{ background:linear-gradient(180deg,rgba(255,253,250,.30),rgba(255,248,240,.14)); border-bottom:1px solid rgba(255,255,255,.46); } [data-theme="glass"] .credbar, [data-theme="glass"] .trust-strip{ background:linear-gradient(180deg,rgba(255,252,247,.46),rgba(255,250,243,.28)); -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%); border-bottom:1px solid rgba(255,255,255,.5); } [data-theme="glass"] .spec-card-head, [data-theme="glass"] .award-head, [data-theme="glass"] .panel-head{ background:linear-gradient(150deg,rgba(40,33,25,.86),rgba(28,23,17,.78)); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.14); } [data-theme="glass"] .panel-head{ background:linear-gradient(150deg,rgba(255,255,255,.46),rgba(255,255,255,.22)); border-bottom:1px solid rgba(255,255,255,.5);color:var(--ink-2); } [data-theme="glass"] table.mm-table thead th{ background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.30)); border-bottom:1px solid rgba(255,255,255,.6); } [data-theme="glass"] table.mm-table tbody tr:hover{background:rgba(255,255,255,.32)} [data-theme="glass"] .field input, [data-theme="glass"] .field select, [data-theme="glass"] .field textarea{ background:linear-gradient(150deg,rgba(255,255,255,.60),rgba(255,255,255,.34)); border:1px solid rgba(255,255,255,.66);border-radius:10px; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 3px rgba(38,32,25,.05); } [data-theme="glass"] .field input:focus, [data-theme="glass"] .field select:focus, [data-theme="glass"] .field textarea:focus{ border-color:rgba(194,98,42,.6); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 3px rgba(194,98,42,.16); } [data-theme="glass"] footer{ background:linear-gradient(180deg,rgba(255,252,247,.44),rgba(250,244,235,.62)); -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%); border-top:1px solid rgba(255,255,255,.5); } [data-theme="glass"] .card-icon, [data-theme="glass"] .feat-ico, [data-theme="glass"] .contact-icon{ background:linear-gradient(150deg,rgba(255,255,255,.66),rgba(255,255,255,.34)); border:1px solid rgba(255,255,255,.7);border-radius:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 10px rgba(38,32,25,.08); } [data-theme="glass"] .step{border-bottom:1px solid rgba(255,255,255,.42)} [data-theme="glass"] .steps{border-top:1px solid rgba(255,255,255,.42)} [data-theme="glass"] .faq{border-top:none} [data-theme="glass"] .faq details{margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.5)} [data-theme="glass"] .faq summary{padding-left:20px;padding-right:44px} [data-theme="glass"] .faq details p{padding-left:20px} [data-theme="glass"] .timeline::before{background:linear-gradient(180deg,transparent,rgba(168,80,29,.45),transparent)} [data-theme="glass"] .tl-item::before{box-shadow:0 0 0 4px rgba(255,255,255,.5)} /* ========================================================================== THEME TOGGLE ========================================================================== */ .theme-toggle{ display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;flex-shrink:0; background:var(--paper);border:1px solid var(--line-2); border-radius:var(--radius);color:var(--ink-2);cursor:pointer; transition:all var(--ease); } .theme-toggle:hover{border-color:var(--copper);color:var(--copper)} .theme-toggle i{font-size:14px;transition:transform var(--ease)} [data-theme="glass"] .theme-toggle{ background:linear-gradient(150deg,rgba(255,255,255,.58),rgba(255,255,255,.30)); border:1px solid rgba(255,255,255,.7);color:var(--steel); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 14px rgba(38,32,25,.10); } [data-theme="glass"] .theme-toggle i{transform:rotate(-18deg) scale(1.06)} [data-theme="glass"] .nav-burger{ background:linear-gradient(150deg,rgba(255,255,255,.55),rgba(255,255,255,.28)); border:1px solid rgba(255,255,255,.68); box-shadow:inset 0 1px 0 rgba(255,255,255,.9); } [data-theme="glass"] .nav-links{ background:linear-gradient(180deg,rgba(255,253,250,.86),rgba(252,246,238,.78)); -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%); border-bottom:1px solid rgba(255,255,255,.5); border-radius:0 0 var(--radius-lg) var(--radius-lg); } /* external nav link marker */ .nav-ext{display:inline-flex;align-items:center;gap:7px} .nav-ext i{font-size:9px;opacity:.55} .nav-links a.nav-ext:hover i{opacity:.9} /* ========================================================================== FALLBACKS + A11Y ========================================================================== */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ [data-theme="glass"] .card, [data-theme="glass"] .mission-card, [data-theme="glass"] .contact-card, [data-theme="glass"] .panel, [data-theme="glass"] .form-card, [data-theme="glass"] #navbar{ background:rgba(255,253,250,.94); } [data-theme="glass"] .glass-ambient{opacity:.5} } @media (prefers-reduced-motion:reduce){ [data-theme="glass"] .glass-ambient span{animation:none} [data-theme="glass"] .btn-primary::after, [data-theme="glass"] .btn-ghost::after, [data-theme="glass"] .nav-cta::after{display:none} } @media print{ .glass-ambient{display:none!important} } /* glass is expensive on small devices — soften it rather than drop it */ @media(max-width:760px){ [data-theme="glass"]{--g-blur:14px} [data-theme="glass"] .glass-ambient span{filter:blur(52px);opacity:.42} }