/* Great Lakes Realty — shared components / chrome. Load after tokens.css + base.css. Used by every page. Documented in design/components.md. NOTE: forms and buttons are still inline on their pages this pass (per-page drift); see design/components.md "Inline today" for the unify follow-up. */ /* ============ Layout: right-rail offset ============ Subpages carry so content clears the fixed menu. index.html is full-bleed (no rail offset) and omits the class. */ .has-rail { padding-right: var(--glr-rail-w); } /* ============ Liquid Glass Menu (right-side rail) ============ iOS-26 "Liquid Glass" approximation: deep backdrop blur + saturation, layered inset shadows for the curved-bezel edge, outer drop shadow, diagonal specular sweep (::before), thin gold inner rim. */ .glass-menu { position: fixed; top: 0; right: 0; bottom: 0; width: var(--glr-rail-w); z-index: 1000; display: flex; flex-direction: column; align-items: flex-start; padding: 2.5rem 1.25rem; gap: 3rem; background: linear-gradient( to left, rgba(22, 22, 26, 0.30) 0%, rgba(14, 14, 18, 0.22) 100% ); backdrop-filter: blur(42px) saturate(240%) brightness(1.12) contrast(1.05); -webkit-backdrop-filter: blur(42px) saturate(240%) brightness(1.12) contrast(1.05); border: none; border-left: 1px solid rgba(255, 255, 255, 0.28); box-shadow: -24px 0 60px -12px rgba(0, 0, 0, 0.70), -3px 0 12px rgba(0, 0, 0, 0.45), inset 0 1px 0 0 rgba(255, 255, 255, 0.55), inset 0 2px 8px -2px rgba(255, 255, 255, 0.20), inset 1px 0 0 0 rgba(255, 255, 255, 0.42), inset 3px 0 10px -3px rgba(255, 255, 255, 0.14), inset 0 -1px 0 0 rgba(0, 0, 0, 0.45), inset 0 -2px 8px -2px rgba(0, 0, 0, 0.28), inset 4px 0 0 -3px rgba(245, 225, 168, 0.55); overflow: hidden; } .glass-menu::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient( circle at 12% 6%, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.07) 18%, transparent 36% ), linear-gradient( 135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 22%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, 0.10) 100% ); z-index: 0; } .glass-menu::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 35%; pointer-events: none; background: linear-gradient( to bottom, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0) 100% ); z-index: 0; } .glass-menu > * { position: relative; z-index: 1; } .glass-menu .brand-mark { font-family: var(--glr-serif); font-size: 0.95rem; letter-spacing: 0.18em; color: var(--glr-gold-light); text-transform: uppercase; font-weight: 400; text-align: left; line-height: 1.35; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 12px rgba(0, 0, 0, 0.45); max-width: 105px; } /* Crest is the primary brand mark on every viewport; wordmark kept in DOM (SEO / screen-reader) but hidden. */ .glass-menu .brand-mark { display: none; } .glass-menu .brand-mark-logo { display: block; height: 90px; width: auto; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 10px rgba(212, 175, 55, 0.30)); } .glass-menu nav { display: flex; flex-direction: column; gap: 1.75rem; align-items: flex-start; width: 100%; } .glass-menu nav a { font-family: var(--glr-sans); font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: #ffffff; text-decoration: none; opacity: 0.95; font-weight: 500; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 0 8px rgba(0, 0, 0, 0.4); transition: opacity 0.25s ease, color 0.25s ease, text-shadow 0.25s ease; position: relative; text-align: left; align-self: flex-start; width: 100%; } /* Canonical nav underline: 30px, left-origin (unifies the prior index drift). */ .glass-menu nav a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 30px; height: 1px; background: linear-gradient(90deg, var(--glr-gold) 0%, var(--glr-gold-light) 100%); box-shadow: 0 0 8px rgba(212, 175, 55, 0.6); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; } .glass-menu nav a:hover { opacity: 1; color: var(--glr-gold-light); text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 0 10px rgba(212,175,55,0.4); } .glass-menu nav a:hover::after { transform: scaleX(1); } .glass-menu nav a.active { opacity: 1; color: var(--glr-gold-light); text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 0 10px rgba(212,175,55,0.4); } .glass-menu nav a.active::after { transform: scaleX(1); } /* ============ Under-Construction ribbon ============ */ .construction-ribbon { position: relative; background: url('../images/ribbon_a.png') center / cover no-repeat; padding: 2.2rem 1.5rem; text-align: center; border-bottom: 2px solid rgba(212, 175, 55, 0.4); overflow: hidden; } .construction-ribbon::before { content: ''; position: absolute; inset: 0; background: rgba(20, 18, 12, 0.35); pointer-events: none; } .construction-ribbon .ribbon-text { position: relative; font-family: var(--glr-serif); font-size: 0.95rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--glr-cream); text-shadow: 0 1px 6px rgba(0,0,0,0.7), 0 0 20px rgba(212,175,55,0.3); } .construction-ribbon .ribbon-text .accent { color: var(--glr-gold); font-weight: 700; } .construction-ribbon .ribbon-sub { position: relative; font-family: var(--glr-sans); font-size: 0.62rem; letter-spacing: 0.35em; text-transform: uppercase; color: rgba(245, 240, 230, 0.6); margin-top: 0.4rem; text-shadow: 0 1px 4px rgba(0,0,0,0.6); } /* ============ Section marker (NN ── LABEL) ============ */ .section-marker { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .section-marker .num { font-family: var(--glr-sans); font-size: 0.75rem; letter-spacing: 0.3em; color: var(--glr-gold); opacity: 0.8; } .section-marker .line { flex: 1; height: 1px; background: rgba(212, 175, 55, 0.25); } .section-marker .label { font-family: var(--glr-sans); font-size: 0.72rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--glr-gold); } /* ============ Footer ============ */ footer { padding: 3rem 4rem; text-align: center; background: var(--glr-ink); border-top: 1px solid rgba(212, 175, 55, 0.15); } footer .footer-brand { font-family: var(--glr-serif); font-size: 0.95rem; letter-spacing: 0.22em; color: var(--glr-gold); text-transform: uppercase; margin-bottom: 0.5rem; } footer .footer-tag { font-family: var(--glr-sans); font-size: 0.7rem; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(245, 240, 230, 0.5); } /* ============ Responsive ============ */ @media (max-width: 900px) { .has-rail { padding-right: 0; padding-top: 56px; } .glass-menu { top: 0; right: 0; bottom: auto; left: 0; width: 100%; height: auto; flex-direction: row; justify-content: space-between; align-items: center; padding: 0.85rem 1.25rem; gap: 0; border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.18); border-bottom: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 22px 60px -12px rgba(0, 0, 0, 0.70), 0 3px 12px rgba(0, 0, 0, 0.45), inset 0 1px 0 0 rgba(255, 255, 255, 0.55), inset 0 2px 8px -2px rgba(255, 255, 255, 0.20), inset 0 -1px 0 0 rgba(0, 0, 0, 0.45), inset 0 -2px 8px -2px rgba(0, 0, 0, 0.28), inset 0 -4px 0 -3px rgba(245, 225, 168, 0.55); } .glass-menu nav { flex-direction: row; gap: 1.25rem; width: auto; } .glass-menu nav a { font-size: 0.62rem; letter-spacing: 0.18em; } .glass-menu .brand-mark { display: none; } .glass-menu .brand-mark-logo { display: block; height: 38px; width: auto; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 8px rgba(212, 175, 55, 0.25)); } footer { padding: 2.5rem 1.5rem; } } @media (max-width: 540px) { .glass-menu nav a { font-size: 0.65rem; letter-spacing: 0.14em; padding: 0.45em 0; } footer { padding: 2rem 1.25rem; } }