/* Theme Name: Glacier Portal Template: twentytwentyfour Author: Glacier Manufacturing Description: Glacier trade-portal skin — dark-first (light supported), glacier-blue accent, Instrument Serif display. Styles Ultimate Member, Fluent Forms, and the [glacier_pricing] table. Child of Twenty Twenty-Four. Version: 0.1.0 */ /* ============================================================ Design tokens — ported from the marketing site (globals.css) ============================================================ */ :root { --gp-bg: #06080b; --gp-bg-elevated: #0b0e13; --gp-surface: #11151c; --gp-surface-2: #1a1f28; --gp-surface-3: #232934; --gp-border: #262c36; --gp-border-strong: #353c48; --gp-fg: #f4f7fb; --gp-fg-muted: #a8b1bf; --gp-fg-subtle: #767e8b; --gp-accent: #7dd3fc; --gp-accent-strong: #38bdf8; --gp-accent-on: #04161f; --gp-btn: #7dd3fc; --gp-btn-hover: #38bdf8; --gp-btn-text: #04161f; --gp-danger: #f87171; --gp-success: #4ade80; --gp-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif; --gp-font-display: "Instrument Serif", ui-serif, Georgia, serif; --gp-radius-sm: 6px; --gp-radius-md: 10px; --gp-radius-lg: 16px; --gp-radius-xl: 22px; color-scheme: dark; } /* Light mode — matches the marketing site's light palette. Enabled by the OS preference, or force with . */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --gp-bg: #fafbfc; --gp-bg-elevated: #f0f3f7; --gp-surface: #ffffff; --gp-surface-2: #f4f7fb; --gp-surface-3: #e8edf3; --gp-border: #d8dde3; --gp-border-strong: #aab2bd; --gp-fg: #0a0e14; --gp-fg-muted: #4a5161; --gp-fg-subtle: #5a6270; --gp-accent: #0369a1; --gp-accent-strong: #075985; --gp-accent-on: #ffffff; --gp-btn: #0a0e14; --gp-btn-hover: #1e293b; --gp-btn-text: #ffffff; color-scheme: light; } } :root[data-theme="light"] { --gp-bg: #fafbfc; --gp-bg-elevated: #f0f3f7; --gp-surface: #ffffff; --gp-surface-2: #f4f7fb; --gp-surface-3: #e8edf3; --gp-border: #d8dde3; --gp-border-strong: #aab2bd; --gp-fg: #0a0e14; --gp-fg-muted: #4a5161; --gp-fg-subtle: #5a6270; --gp-accent: #0369a1; --gp-accent-strong: #075985; --gp-accent-on: #ffffff; --gp-btn: #0a0e14; --gp-btn-hover: #1e293b; --gp-btn-text: #ffffff; color-scheme: light; } /* ============================================================ Base ============================================================ */ body { background: var(--gp-bg); color: var(--gp-fg); font-family: var(--gp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Subliminal hex-lattice texture (from the marketing site), very faint. */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml;utf8,"); } body > * { position: relative; z-index: 1; } h1, h2, h3, .gp-display { color: var(--gp-fg); letter-spacing: -0.02em; } h1, .gp-display-lg { font-family: var(--gp-font-display); font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; } a { color: var(--gp-accent); text-decoration: none; } a:hover { color: var(--gp-accent-strong); text-decoration: underline; } :focus-visible { outline: 2px solid var(--gp-accent); outline-offset: 2px; border-radius: 4px; } ::selection { background: rgba(125, 211, 252, 0.25); color: var(--gp-fg); } /* Generic buttons + block buttons */ .button, button, input[type="submit"], .wp-block-button__link { background: var(--gp-btn); color: var(--gp-btn-text); border: 0; border-radius: var(--gp-radius-md); padding: 0.65rem 1.1rem; font-weight: 500; cursor: pointer; transition: background-color 150ms ease, box-shadow 150ms ease; box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.35), 0 8px 30px -8px rgba(56, 189, 248, 0.5); } .button:hover, button:hover, input[type="submit"]:hover, .wp-block-button__link:hover { background: var(--gp-btn-hover); } /* Content tables */ .entry-content table, .wp-block-table table { border-collapse: collapse; border: 1px solid var(--gp-border); border-radius: var(--gp-radius-lg); overflow: hidden; } .entry-content th, .entry-content td { border-color: var(--gp-border); padding: 0.75rem 1rem; } /* ============================================================ Ultimate Member — login / register / account / profile ============================================================ */ .um, .um-account, .um-profile { color: var(--gp-fg); font-family: var(--gp-font-sans); } .um-field-label label, .um .um-field label { color: var(--gp-fg-muted) !important; font-size: 0.72rem !important; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500 !important; } .um input[type="text"], .um input[type="email"], .um input[type="password"], .um input[type="tel"], .um input[type="number"], .um textarea, .um select, .um .um-form input, .um .um-form textarea, .um .um-form select { background: var(--gp-surface-2) !important; color: var(--gp-fg) !important; border: 1px solid var(--gp-border) !important; border-radius: var(--gp-radius-md) !important; box-shadow: none !important; } .um input:focus, .um textarea:focus, .um select:focus { border-color: var(--gp-accent) !important; box-shadow: 0 0 0 2px rgba(125, 211, 252, 0.3) !important; outline: none !important; } .um input::placeholder, .um textarea::placeholder { color: var(--gp-fg-subtle) !important; } .um .um-button, .um input[type="submit"], .um button[type="submit"] { background: var(--gp-btn) !important; color: var(--gp-btn-text) !important; border: 0 !important; border-radius: var(--gp-radius-md) !important; font-weight: 500 !important; box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.35), 0 8px 30px -8px rgba(56, 189, 248, 0.5) !important; } .um .um-button:hover, .um input[type="submit"]:hover { background: var(--gp-btn-hover) !important; } /* UM account/profile chrome */ .um-account .um-account-nav, .um-account .um-account-side, .um-profile-nav, .um .um-form { background: transparent !important; } .um-account .um-account-tab, .um-field-error, .um-notice.err { color: var(--gp-danger) !important; border-color: rgba(248, 113, 113, 0.4) !important; } .um-account-side li a.current, .um-account-side li a:hover { color: var(--gp-accent) !important; } /* ============================================================ Fluent Forms — reorder / quote request ============================================================ */ .fluentform .ff-el-input--label label { color: var(--gp-fg-muted) !important; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; } .fluentform input[type="text"], .fluentform input[type="email"], .fluentform input[type="tel"], .fluentform input[type="number"], .fluentform textarea, .fluentform select, .fluentform .ff-el-form-control { background: var(--gp-surface-2) !important; color: var(--gp-fg) !important; border: 1px solid var(--gp-border) !important; border-radius: var(--gp-radius-md) !important; box-shadow: none !important; } .fluentform .ff-el-form-control:focus { border-color: var(--gp-accent) !important; box-shadow: 0 0 0 2px rgba(125, 211, 252, 0.3) !important; } .fluentform input::placeholder, .fluentform textarea::placeholder { color: var(--gp-fg-subtle) !important; } .fluentform .ff-btn-submit, .fluentform button[type="submit"] { background: var(--gp-btn) !important; color: var(--gp-btn-text) !important; border: 0 !important; border-radius: var(--gp-radius-md) !important; font-weight: 500 !important; box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.35), 0 8px 30px -8px rgba(56, 189, 248, 0.5) !important; } .fluentform .ff-btn-submit:hover { background: var(--gp-btn-hover) !important; } .ff-message-success { color: var(--gp-success) !important; border: 1px solid rgba(74, 222, 128, 0.4) !important; background: rgba(74, 222, 128, 0.08) !important; border-radius: var(--gp-radius-md); } /* ============================================================ Pricing table ([glacier_pricing]) — aligns with the mu-plugin ============================================================ */ .glp { color: var(--gp-fg); margin: 1rem 0 2rem; } .glp-note { color: var(--gp-fg-muted); } .glp-badge { display: inline-block; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gp-accent); } .glp-cat { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gp-fg-muted); margin: 1.75rem 0 0.5rem; } .glp-table { width: 100%; border-collapse: collapse; border: 1px solid var(--gp-border); border-radius: var(--gp-radius-lg); overflow: hidden; } .glp-table td { padding: 0.75rem 1rem; border-top: 1px solid var(--gp-border); vertical-align: top; } .glp-table tr:first-child td { border-top: 0; } .glp-item { display: flex; flex-direction: column; gap: 0.15rem; } .glp-name { color: var(--gp-fg); } .glp-sku { font-size: 0.78rem; color: var(--gp-fg-subtle); } .glp-price { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--gp-fg); } .glp-gate { color: var(--gp-fg-muted); } /* ============================================================ Portal chrome ============================================================ */ .wp-site-blocks, .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { --wp--style--global--content-size: 64rem; } .gp-badge-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--gp-surface-2); border: 1px solid var(--gp-border); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gp-fg-muted); } .site-footer, .wp-block-template-part footer { color: var(--gp-fg-subtle); }