/* style.css */ /* Seaward Minerals — Single‑file HTML/CSS template — Easy to update: tweak the CSS variables below — Dark, Puget Sound‑inspired palette — Left navigation, top banner, right content, bottom footer */ /* ====== THEME VARIABLES ====== */ :root { /* Puget Sound tones */ --bg: #0b1d2a; /* deep sound at dusk */ --bg-elev: #102736; /* slightly lifted surface */ --surface: #1b2f3f; /* slate-blue panel */ --surface-2: #22384a; /* card surface */ --text: #e6edf3; /* primary text */ --muted: #a7b0b5; /* driftwood gray */ --accent: #7ec8c9; /* seafoam highlight */ --accent-2: #0e5a60; /* deep teal */ --link: #8fe3e4; /* link color */ --danger: #f29c9c; --warning: #f2d49c; --radius: 14px; --shadow: 0 10px 28px rgba(0,0,0,.35); --border: 1px solid rgba(255,255,255,0.08); --maxw: 1200px; --navw: 260px; --gutter: 20px; } /* Optional light theme — switch by removing data-theme="dark" on */ html:not([data-theme="dark"]) { --bg: #e6f0f4; --bg-elev: #f4f8fa; --surface: #ffffff; --surface-2: #f7fbfd; --text: #1b2f3f; --muted: #5b6a73; --accent: #0e5a60; --accent-2: #7ec8c9; --link: #0e5a60; --border: 1px solid rgba(0,0,0,0.07); } /* ====== RESET / BASE ====== */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; color: var(--text); background: radial-gradient(1200px 800px at 10% -10%, rgba(14,90,96,.16), transparent 60%), radial-gradient(1200px 800px at 110% 10%, rgba(126,200,201,.12), transparent 60%), var(--bg); } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; } /* ====== LAYOUT ====== */ header.site-header { position: sticky; top: 0; z-index: 50; background: linear-gradient(180deg, rgba(14,90,96,.35), rgba(14,90,96,0)) , var(--bg-elev); border-bottom: var(--border); padding: 14px 18px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; backdrop-filter: blur(8px); } .brand { display: flex; align-items: center; gap: 12px; } .brand-logo { width: 34px; height: 34px; border-radius: 10px; background: conic-gradient(from 180deg at 50% 50%, var(--accent), var(--accent-2), var(--accent)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), var(--shadow); } .brand-name { font-weight: 700; letter-spacing: .5px; } .brand-name span { opacity: .9; } .brand-name strong { color: var(--accent); letter-spacing: .02em; } .header-actions { display: flex; gap: 10px; } .btn { border: var(--border); background: var(--surface); color: var(--text); padding: 8px 12px; border-radius: 10px; display: inline-flex; align-items: center; gap: 8px; } .btn:hover { background: var(--surface-2); } /* Mobile menu button */ .menu-toggle { display: none; } .page { max-width: var(--maxw); margin: 24px auto; padding: 0 var(--gutter); display: grid; grid-template-columns: var(--navw) 1fr; gap: 22px; } nav.site-nav { position: sticky; top: 70px; align-self: start; background: var(--surface); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .nav-section-title { padding: 12px 14px; font-size: .85rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; border-bottom: var(--border); background: rgba(126,200,201,.06); } .nav-list { list-style: none; margin: 0; padding: 8px; } .nav-list li { margin: 2px 0; } .nav-link { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 10px; color: var(--text); } .nav-link[aria-current="page"] { background: linear-gradient(90deg, rgba(126,200,201,.18), transparent); box-shadow: inset 0 0 0 1px rgba(126,200,201,.25); } .nav-link:hover { background: rgba(255,255,255,.04); } main.content { min-height: 60vh; display: grid; gap: 18px; } .panel { background: var(--surface); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: clip; } .panel .panel-header { padding: 14px 16px; border-bottom: var(--border); background: rgba(255,255,255,.02); display: flex; align-items: center; justify-content: space-between; } .panel .panel-title { margin: 0; font-size: 1.1rem; letter-spacing: .3px; } .panel .panel-body { padding: 16px; } /* Card grid */ .cards { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; } .card { grid-column: span 4; background: var(--surface-2); border: var(--border); border-radius: 16px; padding: 14px; box-shadow: var(--shadow); } .card h3 { margin: 0 0 6px; font-size: 1.05rem; } .card p { margin: 0; color: var(--muted); } /* Footer */ footer.site-footer { margin-top: 26px; border-top: var(--border); background: linear-gradient(180deg, rgba(14,90,96,.0), rgba(14,90,96,.25)); } .footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 20px var(--gutter); display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 18px; } .footer-col h4 { margin: 0 0 8px; font-size: .95rem; color: var(--accent); } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col li { margin: 6px 0; } .footer-bottom { padding: 10px var(--gutter) 24px; max-width: var(--maxw); margin: 0 auto; color: var(--muted); font-size: .9rem; display: flex; justify-content: space-between; align-items: center; } /* Utilities */ .muted { color: var(--muted); } .accent { color: var(--accent); } /* ====== RESPONSIVE ====== */ @media (max-width: 960px) { :root { --navw: 230px; } .card { grid-column: span 6; } } @media (max-width: 720px) { .menu-toggle { display: inline-flex; } .page { grid-template-columns: 1fr; } nav.site-nav { position: fixed; inset: 64px 16px auto 16px; transform: translateY(-8px) scale(.98); opacity: 0; pointer-events: none; transition: .2s ease; } nav.site-nav.open { transform: none; opacity: 1; pointer-events: auto; } .footer-inner { grid-template-columns: 1fr 1fr; } .cards { grid-template-columns: repeat(6, 1fr); } .card { grid-column: span 6; } }