/* Theme Name: GLOAM Base Theme URI: https://gloam.shop Author: GLOAM Studio Author URI: https://gloam.shop Description: Editorial e-commerce theme for a curated smoking-goods brand. Built 1:1 on the GLOAM design system (cream paper + ink + one ember spot, Instrument Serif / Archivo / Space Mono). Position-driven menus with built-in fallbacks, zero database writes on activation, full WooCommerce support, working newsletter + contact forms, and every colour, font and piece of copy editable from the Customizer or Elementor. Never hardcode appearance — edit through the front end. Version: 1.6.3 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: gloam Tags: e-commerce, custom-colors, custom-logo, custom-menu, translation-ready, three-columns */ /* ========================================================================== PART 1 — DESIGN SYSTEM Authored in design/gloam-design-system.css. Do not edit these lines here; edit the source file and re-run build/build_css.py. ========================================================================== */ /* ========================================================================== GLOAM — DESIGN SYSTEM (PART 1 · single source of truth) -------------------------------------------------------------------------- This file is the ONLY place the design is authored. build/build_css.py concatenates it with design/gloam-compat.css and a theme header to produce gloam-base/style.css. Never hand-edit style.css — edit this file and rebuild. Design logic: two-colour print. Cream paper + ink, with a single ember-red spot colour. Zero border-radius, zero shadow. Every separation is a 1px hairline. Asymmetric grid, deliberate editorial whitespace. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS Colours / fonts / logo height are re-declared at higher specificity by functions.php from Customizer values, so everything below stays live. -------------------------------------------------------------------------- */ :root { /* colour */ --gl-paper: #F5EFE3; /* cream ground */ --gl-surface: #EDE5D5; /* paper, one step darker */ --gl-ink: #141414; /* ink black */ --gl-ember: #E03A17; /* the single spot colour */ --gl-ember-dark: #C22F10; --gl-swatch: #26221C; /* dark swatch (mega mark) */ --gl-line: #3A342A; /* hairline on ink */ --gl-line-paper: #D8CEBB; /* hairline on paper */ --gl-muted: #6B6558; /* tertiary text on paper */ --gl-muted-2: #A79E8C; /* body text on ink */ --gl-muted-3: #8A8272; /* fine print on ink */ --gl-body: #3A342A; /* body text on paper */ --gl-hero-body: #E8DFD0; /* body text over photo */ --gl-hero-fine: #BDB4A2; /* fine print over photo */ --gl-on-ember: #FBD9CE; /* secondary text on ember */ /* type */ --gl-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif; --gl-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --gl-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* metrics */ --gl-pad: 56px; /* section side padding at 1440 */ --gl-sec-y: 96px; /* section vertical padding */ --gl-gutter: 56px; /* grid gutter */ --gl-wrap: 1328px; /* 1440 - 2x56 */ --gl-logo-h: 56px; /* header logo height */ --gl-mark-speed: 120s; /* footer mega mark: one full drift. Slow on * purpose — at 360px the wordmark reads as * texture, and anything faster turns the last * thing on the page into a moving advert. */ } /* -------------------------------------------------------------------------- 2. BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--gl-paper); color: var(--gl-ink); font-family: var(--gl-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-wrap: break-word; } img, svg, video { max-width: 100%; height: auto; } figure { margin: 0; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } table { border-collapse: collapse; } /* -------------------------------------------------------------------------- 3. TYPE HELPERS -------------------------------------------------------------------------- */ .gl-wrap { width: 100%; max-width: var(--gl-wrap); margin: 0 auto; } .gl-kicker { font-family: var(--gl-mono); font-weight: 700; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gl-ember); } .gl-mono { font-family: var(--gl-mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gl-muted); } .gl-rule { height: 1px; background: var(--gl-ink); } .gl-rule--ink { height: 1px; background: var(--gl-line); } .gl-rule--paper { height: 1px; background: var(--gl-line-paper); } /* -------------------------------------------------------------------------- 4. BUTTONS Zero radius. Uppercase Archivo. Padding 18/32. -------------------------------------------------------------------------- */ .gl-btn { display: inline-flex; align-items: center; justify-content: center; padding: 18px 32px; font-family: var(--gl-sans); font-weight: 700; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; line-height: 1; border: 0; border-radius: 0; cursor: pointer; transition: background .16s ease, color .16s ease, border-color .16s ease; } .gl-btn--paper { background: var(--gl-paper); color: var(--gl-ink); } .gl-btn--paper:hover { background: #fff; } .gl-btn--ghost { background: transparent; color: var(--gl-paper); box-shadow: inset 0 0 0 1px rgba(245,239,227,.45); } .gl-btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--gl-paper); background: rgba(245,239,227,.08); } .gl-btn--ember { background: var(--gl-ember); color: #fff; } .gl-btn--ember:hover { background: var(--gl-ember-dark); } .gl-btn--ink { background: var(--gl-ink); color: var(--gl-paper); } .gl-btn--ink:hover { background: #000; } .gl-btn--block { width: 100%; } .gl-btnrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* -------------------------------------------------------------------------- 5. IMAGE PLATE (.gl-ph) Empty -> ink gradient placeholder (looks deliberate, never "broken"). Filled -> uploaded image covers the plate. -------------------------------------------------------------------------- */ .gl-ph { position: relative; overflow: hidden; background-color: var(--gl-swatch); background-image: linear-gradient(155deg, #322C24 0%, #1B1814 100%); box-shadow: inset 0 0 0 1px rgba(245,239,227,.07); } .gl-ph::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(245,239,227,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(245,239,227,.055) 1px, transparent 1px); background-size: 64px 64px; pointer-events: none; } .gl-ph > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; } .gl-ph--paper { background-color: var(--gl-surface); background-image: linear-gradient(155deg, #F1EADC 0%, #E2D8C4 100%); box-shadow: inset 0 0 0 1px rgba(20,20,20,.08); } .gl-ph--paper::after { background-image: none; } /* -------------------------------------------------------------------------- 6. UTILITY BAR (.util) -------------------------------------------------------------------------- */ .util { background: var(--gl-ink); color: var(--gl-paper); min-height: 40px; display: flex; align-items: center; padding: 0 var(--gl-pad); } .util-in { width: 100%; max-width: var(--gl-wrap); margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 24px; } .util.has-links .util-in { justify-content: space-between; } .util .promo { font-family: var(--gl-mono); font-weight: 700; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; text-align: center; } .util .r { display: flex; align-items: center; gap: 20px; } .util .r a, .util .r span { font-family: var(--gl-mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gl-paper); opacity: .8; transition: opacity .16s; } .util .r a:hover { opacity: 1; } /* -------------------------------------------------------------------------- 7. MASTHEAD (.mast) Height 78. Wordmark left, nav centre, utilities right. -------------------------------------------------------------------------- */ .hdr { position: relative; z-index: 60; } .mast { background: var(--gl-paper); padding: 0 var(--gl-pad); } .mast-in { width: 100%; max-width: var(--gl-wrap); margin: 0 auto; height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .hdr-rule { height: 1px; background: var(--gl-ink); } /* wordmark */ .mast .brand { display: flex; align-items: center; gap: 6px; flex: none; } .mast .mark { font-family: var(--gl-serif); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: -.5px; color: var(--gl-ink); } .mast .sub { font-family: var(--gl-mono); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gl-muted); } .mast .custom-logo-link { display: inline-flex; align-items: center; line-height: 0; } .mast .custom-logo-link img { display: block; height: var(--gl-logo-h); width: auto; } /* primary nav */ .mast nav { display: flex; align-items: center; gap: 32px; } .mast nav a { font-family: var(--gl-sans); font-weight: 600; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gl-ink); white-space: nowrap; transition: color .16s; } .mast nav a:hover { color: var(--gl-ember); } .mast nav .current-menu-item > a, .mast nav .current_page_item > a { color: var(--gl-ember); } /* right utilities */ .mast .rt { display: flex; align-items: center; gap: 22px; flex: none; } .mast .rt a, .mast .rt button { font-family: var(--gl-sans); font-weight: 500; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gl-ink); white-space: nowrap; transition: color .16s; } .mast .rt a:hover, .mast .rt button:hover { color: var(--gl-ember); } .mast .rt .cart { color: var(--gl-ember); font-weight: 600; } /* burger (small screens) */ .mast .burger { display: none; padding: 8px; margin-right: -8px; } .mast .burger span { display: block; width: 20px; height: 1px; background: var(--gl-ink); } .mast .burger span + span { margin-top: 5px; } /* -------------------------------------------------------------------------- 8. HEADER SEARCH (native WP search, collapsed until opened) -------------------------------------------------------------------------- */ .gl-search { display: flex; align-items: center; gap: 8px; min-width: 0; } .gl-search-field { width: 0; padding: 0; border: 0; border-bottom: 1px solid transparent; background: transparent; font-family: var(--gl-sans); font-size: 12px; letter-spacing: 1px; color: var(--gl-ink); height: 24px; opacity: 0; outline: none; transition: width .25s ease, opacity .2s ease, padding .25s ease, border-color .25s ease; } .gl-search.is-open .gl-search-field { width: 150px; padding: 2px 4px; opacity: 1; border-bottom-color: var(--gl-ink); } .gl-search-field::placeholder { color: var(--gl-muted); text-transform: uppercase; font-size: 10.5px; letter-spacing: 1px; } .gl-search-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--gl-sans); font-weight: 500; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gl-ink); transition: color .16s; } .gl-search-btn:hover { color: var(--gl-ember); } .gl-search-btn svg { width: 13px; height: 13px; display: block; flex: none; } /* -------------------------------------------------------------------------- 9. HERO Full-bleed photo, ink scrim, text floating top + bottom. -------------------------------------------------------------------------- */ .hero { position: relative; background: var(--gl-ink); color: var(--gl-paper); min-height: 820px; display: flex; align-items: stretch; padding: 44px var(--gl-pad); overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: 0; } .hero-bg > img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(20,20,20,.55) 0%, rgba(20,20,20,0) 42%, rgba(20,20,20,.92) 100%); } .hero-in { position: relative; z-index: 2; width: 100%; max-width: var(--gl-wrap); margin: 0 auto; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; } .hero-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; } /* The two mono notes carry a CLASS as well as the descendant selector. An * Elementor build puts the role on the WIDGET wrapper and the visible text one * level inside it, where `.hero-top span` can never reach — and writing the * numbers a second time for the widget version is exactly how the two * renderings of this page would drift apart. One rule, two carriers. */ .hero-top span, .hero-note { font-family: var(--gl-mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gl-paper); } .hero-top span:first-child, .hero-note--strong { font-weight: 700; } .hero-mid { display: flex; flex-direction: column; gap: 26px; } .hero-rule { width: 72px; height: 2px; background: var(--gl-ember); } .hero-title { font-family: var(--gl-serif); font-weight: 400; font-size: 116px; line-height: .97; letter-spacing: -1.5px; color: var(--gl-paper); margin: 0; } .hero-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; } .hero-lead { font-size: 17px; line-height: 1.6; color: var(--gl-hero-body); max-width: 620px; } .hero-cta { display: flex; flex-direction: column; gap: 14px; } .hero-fine { font-family: var(--gl-mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gl-hero-fine); } /* THE INNER-PAGE HERO (canvas: "About — Page" 3:401). * * Same shell, four different numbers, and every one of them is read off the * canvas rather than chosen: 620 tall instead of 820, the SECTION rhythm (96) * in place of the hero's own 44, a 92/90 headline in place of 116/.97, and a * 660 measure for the lead in place of 620. Its copy sits at the BOTTOM of the * block — measured, not assumed: the copy's box ends 96px above the band's * bottom edge, which is exactly the band's own bottom padding — and there is * no notes row and no button row, because the canvas has a single copy stack. * * WRITTEN AS TWO CLASSES (`.hero.hero--inner`) AND THAT IS THE WHOLE POINT OF * THE SHAPE. The base `.hero` rule and all three of its media blocks are read * LATER in this file, and `@media (max-width: 900px) .hero { padding: 32px … }` * is the same specificity as a one-class `.hero--inner` — so a one-class * variant would lose the tie on source order and this hero's padding would * collapse to 32px on a tablet. Three other ties in this file are settled by * order and carry a comment saying so; this one cannot be, because the rules it * ties with are in a different section and are shared with the home page. * * THE RESPONSIVE STEPS LIVE IN SECTION 20 and follow two different rules: * min-height keeps the HOME hero's own ratios (640/820 = .78, 560/820 = .68, * 480/820 = .59 — applied to 620 and rounded to the nearest 10); the headline * takes the design system's existing title scale (84 / 62 / 42). The canvas * carries no inner-page breakpoints at all, so neither number is a transcription * — they are the system's own, and inventing a parallel scale for one page is * how a system stops being one. * * The one canvas number NOT honoured here is the About scrim's own gradient: * 50% / 40% / 90% against the hero's 55% / 42% / 92%. A 5% alpha step on a * photograph is below the threshold of a visible edge, and the scrim is one of * the parts these two heroes share, so the hero's is kept rather than forked. * Recorded so the next reader knows it was seen. */ .hero.hero--inner { min-height: 620px; padding: var(--gl-sec-y) var(--gl-pad); } .hero--inner .hero-in { justify-content: flex-end; } .hero--inner .hero-mid { gap: 24px; } .hero--inner .hero-title { font-size: 92px; line-height: .978; } .hero--inner .hero-lead { max-width: 660px; } /* -------------------------------------------------------------------------- 10. MARQUEE BAND -------------------------------------------------------------------------- */ .mq { background: var(--gl-ink); color: var(--gl-paper); min-height: 84px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 26px; padding: 16px var(--gl-pad); } .mq span { font-family: var(--gl-serif); font-size: 34px; line-height: 1.1; } .mq .sep { color: var(--gl-ember); font-size: 30px; } /* -------------------------------------------------------------------------- 11. SECTION SHELL -------------------------------------------------------------------------- */ .sec { padding: var(--gl-sec-y) var(--gl-pad); } .sec--paper { background: var(--gl-paper); } .sec--surface { background: var(--gl-surface); } .sec--ink { background: var(--gl-ink); color: var(--gl-paper); } .sec--ember { background: var(--gl-ember); color: var(--gl-paper); } /* A band that runs tighter than the section rhythm: 24 less than it, which is * 72 at 1440 — where the canvas has it — and 48 / 32 below, because the token * steps and this band steps with it. See section 20. */ .sec--tight { padding: calc(var(--gl-sec-y) - 24px) var(--gl-pad); } .sec-in { width: 100%; max-width: var(--gl-wrap); margin: 0 auto; display: flex; flex-direction: column; } .sec-in--g44 { gap: 44px; } .sec-in--g48 { gap: 48px; } .sec-in--g40 { gap: 40px; } .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; } .sec-head .lead { display: flex; flex-direction: column; gap: 12px; } .sec-title { font-family: var(--gl-serif); font-weight: 400; font-size: 62px; line-height: 1.04; letter-spacing: -.5px; margin: 0; } .sec-link { font-family: var(--gl-mono); font-weight: 700; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; white-space: nowrap; padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color .16s; } .sec-link:hover { border-bottom-color: currentColor; } .sec--ink .sec-link { color: var(--gl-muted-2); } /* -------------------------------------------------------------------------- 12. CATEGORY SHELF (01) -------------------------------------------------------------------------- */ .shelf-row { display: flex; gap: var(--gl-gutter); align-items: flex-start; } .shelf-row .gcard { flex: 1 1 0; min-width: 0; } .shelf-row--wide .gcard--wide { flex: 0 0 760px; } .gcard { display: flex; flex-direction: column; } .gcard .gl-ph { height: 400px; } .gcard .gl-ph > img { transition: transform .6s cubic-bezier(.2,.7,.2,1); } .gcard:hover .gl-ph > img { transform: scale(1.03); } .gcard .rule { height: 1px; background: var(--gl-ink); } .gcard .meta { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; } .gcard .meta .t { font-family: var(--gl-serif); font-size: 26px; line-height: 1; color: var(--gl-ink); } .gcard .meta .c { font-family: var(--gl-mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gl-muted); white-space: nowrap; } /* -------------------------------------------------------------------------- 13. THE EDIT (02) -------------------------------------------------------------------------- */ .edit-row { display: flex; gap: 48px; align-items: flex-start; } .edit-media { flex: 0 0 700px; display: flex; flex-direction: column; } .edit-media .gl-ph { height: 520px; } .edit-media .cap { font-family: var(--gl-mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gl-muted); padding: 16px 0; } .edit-info { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; } .edit-info h3 { font-family: var(--gl-serif); font-weight: 400; font-size: 46px; line-height: 1.05; margin: 0; } .edit-info .body { font-size: 16px; line-height: 1.7; color: var(--gl-body); } .edit-info .pull { font-family: var(--gl-serif); font-style: italic; font-size: 20px; line-height: 1.5; color: var(--gl-muted); } .edit-info .rule { height: 1px; background: var(--gl-ink); } .spec { display: flex; flex-direction: column; gap: 6px; font-family: var(--gl-mono); font-size: 12px; color: var(--gl-body); } .spec-row { display: flex; gap: 24px; } .spec-row .k { flex: 0 0 118px; text-transform: uppercase; letter-spacing: 1px; } .spec-row .v { flex: 1 1 auto; } .price-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .price-row .price { font-family: var(--gl-sans); font-weight: 500; font-size: 26px; color: var(--gl-ink); } /* -------------------------------------------------------------------------- 14. MATERIALS (03) -------------------------------------------------------------------------- */ .mats-grid { display: flex; gap: 16px; } .mat { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; } .mat .gl-ph { height: 260px; } .mat .n { font-family: var(--gl-mono); font-weight: 700; font-size: 10px; letter-spacing: 1.4px; color: var(--gl-ember); } .mat h3 { font-family: var(--gl-serif); font-weight: 400; font-size: 30px; line-height: 1.1; margin: 0; color: var(--gl-paper); } .mat p { font-size: 15px; line-height: 1.7; color: var(--gl-muted-2); margin: 0; } .quote { font-family: var(--gl-serif); font-weight: 400; font-size: 46px; line-height: 1.15; color: var(--gl-paper); margin: 0; } .quote-credit { font-family: var(--gl-mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gl-muted-3); } /* -------------------------------------------------------------------------- 15. VOICES (05) -------------------------------------------------------------------------- */ .stats { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; } .stat { display: flex; flex-direction: column; gap: 6px; } .stat .n { font-family: var(--gl-serif); font-size: 40px; line-height: 1; color: var(--gl-ink); } .stat .n.is-ember { color: var(--gl-ember); } .stat .l { font-family: var(--gl-mono); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gl-muted); } /* One size up, and deliberately a variant rather than a change of the rule: the * home page's proof figures and the About page's three figures are BOTH read off * the canvas and they differ — 40 there (3:179), 44 here (3:421). Rounding one * into the other would have been easier and would have made both pages wrong. */ .stat--lg .n { font-size: 44px; } .voices { display: flex; gap: 16px; } .voice { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 18px; background: var(--gl-paper); padding: 28px 26px; } .voice .score { font-family: var(--gl-mono); font-weight: 700; font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gl-ember); } .voice blockquote { font-family: var(--gl-serif); font-style: italic; font-size: 20px; line-height: 1.5; color: var(--gl-ink); margin: 0; } .voice cite { font-family: var(--gl-mono); font-style: normal; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gl-muted); } /* -------------------------------------------------------------------------- 16. THE LIST — newsletter band (06) -------------------------------------------------------------------------- */ .join-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 56px; } .join-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; } .join-copy .gl-kicker { color: var(--gl-paper); } .join-title { font-family: var(--gl-serif); font-weight: 400; font-size: 62px; line-height: 1.04; letter-spacing: -.5px; color: var(--gl-paper); margin: 0; } .join-lead { font-size: 17px; line-height: 1.6; color: var(--gl-on-ember); max-width: 560px; } .join-list { flex: 0 0 460px; display: flex; flex-direction: column; gap: 14px; } .join-list .h { font-family: var(--gl-mono); font-weight: 700; font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gl-on-ember); } .join-list ul { display: flex; flex-direction: column; gap: 6px; } .join-list li { font-family: var(--gl-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; line-height: 1.8; color: var(--gl-paper); } .join-form { display: flex; min-height: 62px; } .join-form input[type="email"], .join-form input[type="text"] { flex: 1 1 auto; min-width: 0; background: var(--gl-paper); border: 0; border-radius: 0; padding: 0 22px; font-family: var(--gl-sans); font-size: 15px; color: var(--gl-ink); outline: none; } .join-form input::placeholder { color: var(--gl-muted-3); text-transform: none; letter-spacing: 0; } .join-form button { background: var(--gl-ink); color: var(--gl-paper); padding: 0 40px; border-radius: 0; font-family: var(--gl-sans); font-weight: 700; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; transition: background .16s; } .join-form button:hover { background: #000; } .join-fine { font-family: var(--gl-mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gl-paper); } /* -------------------------------------------------------------------------- 17. FOOTER -------------------------------------------------------------------------- */ .ftr { background: var(--gl-ink); color: var(--gl-paper); padding: 80px var(--gl-pad); } .ftr-in { width: 100%; max-width: var(--gl-wrap); margin: 0 auto; display: flex; flex-direction: column; gap: 56px; } .ftr-top { display: flex; align-items: flex-start; gap: 48px; } .ftr-rule { height: 1px; background: var(--gl-line); } .ftr-brand { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; } .ftr-brand .mark { font-family: var(--gl-serif); font-size: 40px; line-height: 1; color: var(--gl-paper); } .ftr-brand .about { font-size: 15px; line-height: 1.6; color: var(--gl-muted-2); max-width: 380px; } .ftr-brand .contact { font-family: var(--gl-mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gl-muted-3); } .ftr-brand .custom-logo-link { line-height: 0; } .ftr-brand .custom-logo-link img { display: block; height: var(--gl-logo-h); width: auto; } .ftr-cols { display: flex; gap: 52px; } .ftr-col { display: flex; flex-direction: column; gap: 14px; } .ftr-col h4 { font-family: var(--gl-mono); font-weight: 700; font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gl-ember); margin: 0; } .ftr-col ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; } .ftr-col li { list-style: none; } .ftr-col li a { font-size: 14px; color: var(--gl-muted-2); transition: color .16s; } .ftr-col li a:hover { color: var(--gl-paper); } .pay { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .pay .h { font-family: var(--gl-mono); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gl-muted-3); } .pay .chip { width: 54px; height: 34px; border-radius: 3px; background: var(--gl-paper); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; } .pay .chip img { height: 34px; width: auto; display: block; border-radius: 3px; } .pay .chip--text { font-family: var(--gl-sans); font-weight: 900; font-size: 11px; letter-spacing: .5px; color: var(--gl-ink); } .pay .chip--visa { font-size: 13px; letter-spacing: 1px; color: #1A1F71; } .pay .chip--mc svg { display: block; } /* The oversized wordmark drifts sideways, slowly enough to read as texture * rather than as movement. * * How the seam is made invisible: the moving track holds the wordmark an even * number of times, and the animation travels EXACTLY -50% — one whole half. The * two halves are identical, so at the moment the animation resets, the second * half is sitting precisely where the first one started and the jump is * unobservable. Any other offset leaves a visible snap. * * The half must also be at least as wide as the viewport, or the loop exposes * blank space at the end. Each repeat is one copy of the site name at 360px, so * four repeats per half (eight in total, written by footer.php) covers a name as * short as five characters out to roughly a 3600px viewport. */ .ftr-mark { margin: 0; overflow: hidden; line-height: 1.03; color: var(--gl-swatch); } .ftr-mark-run { display: flex; width: max-content; animation: gl-mark-drift var(--gl-mark-speed) linear infinite; } .ftr-mark-run > span { font-family: var(--gl-serif); font-weight: 400; font-size: 360px; letter-spacing: -4px; white-space: nowrap; padding-right: .16em; } @keyframes gl-mark-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* Honouring the system setting is not optional: a 360px glyph sliding for two * minutes is exactly the kind of motion that setting exists to stop. Degrades * to the previous behaviour — the wordmark cropped by the viewport, standing * still. */ @media (prefers-reduced-motion: reduce) { .ftr-mark-run { animation: none; } } .ftr-bot { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .ftr-bot span, .ftr-bot a { font-family: var(--gl-mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gl-muted-3); } .ftr-bot a:hover { color: var(--gl-paper); } .ftr-bot .r { display: flex; gap: 22px; flex-wrap: wrap; } /* -------------------------------------------------------------------------- 18. INNER PAGES — ABOUT (canvas: "About — Page" 3:399) The first page in this file that is not the home page. Three blocks the home page never needed, each read off its own canvas frame. WHERE THESE LIVE, AND WHY HERE RATHER THAN IN PART 2. A8 of gloam-compat.css holds the contact page's three pieces on the grounds that the theme's own templates do not render a contact page yet, and tells the next reader to move them here if one ever is. These come here directly, for the stronger version of the same reason: the theme's own About layout is on the roadmap, and a block authored in the compatibility layer is a block somebody has to move later — which is the drift that note exists to prevent. ROLES CARRY CLASS NAMES, never element selectors, except where a scoped descendant is the only honest form (`.step .n`, `.story-body .pull`). There is no native About markup yet; when there is, it carries these classes. -------------------------------------------------------------------------- */ /* 01 · OUR STORY (canvas 3:408) — a fixed 400px title rail beside the copy, 64 * apart, both starting at the band's own top edge. Same SHAPE as `.edit-row` and * a separate block on purpose: `.edit-info h3` (46) and `.edit-media .gl-ph` * (520) are the home page's own sizes and would follow the row in here, and the * story's are 52 and no plate at all. */ .story-row { display: flex; gap: 64px; align-items: flex-start; } .story-rail { flex: 0 0 400px; display: flex; flex-direction: column; gap: 14px; } .story-title { font-family: var(--gl-serif); font-weight: 400; font-size: 52px; line-height: 1.038; /* the canvas's own pair, 52 / 54 */ letter-spacing: -.5px; margin: 0; } .story-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 22px; } .story-p { font-size: 17px; line-height: 1.647; color: var(--gl-body); margin: 0; } /* The pull quote keeps PART 1's muted ink (`.edit-info .pull`) at the story's own * size: the canvas sets it at 26/36, against the edit band's 20. */ .story-body .pull { font-family: var(--gl-serif); font-style: italic; font-size: 26px; line-height: 1.385; color: var(--gl-muted); margin: 0; } /* THE ONE FLEX ITEM IN THIS FILE THAT MUST NOT STRETCH, and it needs saying * because the default is invisible until hover. `.sec-link` draws its underline * as a `border-bottom` on a transparent border, so in a COLUMN stack — * `align-items: stretch` — that border would run the width of the column * instead of the width of the words. On the home page the same class is a flex * item of `.sec-head`, which is a ROW, so its size is its content and the * problem cannot arise there. Canvas 3:416 measures the box at 154px, which is * the label's own width. */ .story-body .sec-link { align-self: flex-start; } /* 02 · HOW IT'S MADE (canvas 3:429) — four equal steps, 16 apart, each opened by * a hairline. The hairline is the cell's own top border rather than an element: * the canvas draws 1px, then 14px of air, then the index — which is a border and * its padding, with nothing extra to keep in sync. */ .steps { display: flex; gap: 16px; align-items: flex-start; } .step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--gl-ink); padding-top: 14px; } .step .n { font-family: var(--gl-mono); font-weight: 700; font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gl-ember); } .step-name { font-family: var(--gl-serif); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--gl-ink); margin: 0; } .step-p { font-size: 15px; line-height: 1.6; color: var(--gl-body); margin: 0; } /* 03 · VISIT (canvas 3:456) — an ink band whose lead and button are pushed to * opposite ends. `.hero-foot` does the same job on the hero, and this row * aligns its items the same way it does: to the BOTTOM. * * `flex-end` is what the canvas says twice over, and the first spelling of * this rule had it as `center`. Canvas 3:459 carries counterAxisAlignItems * MAX, which is `flex-end`; and the measurement agrees — its button box is * 161 x 49 inside a 52px row at y 2191, i.e. offset 3 from the top, which is * 52 - 49 exactly. Centred would have been offset 1.5. A 1.5px error is not * worth a fix on its own; the reason it is worth writing down is that the * comment here CLAIMED the canvas was centred, so the next reader would have * kept it. * * The band is split into `.cta-band` and `.cta-in` exactly as `.sec` is split * into `.sec` and `.sec-in` — the band holds the padding, the inner element * holds the measure and the stack. An Elementor section is one element playing * both parts, so A9.11 of gloam-compat.css gives the container the second half. * * `.cta-band` CARRIES THE PADDING AND NOTHING ELSE, which is what that split * means. Its first spelling also had `display: flex; flex-direction: column; * gap: 28px`, and all three were wrong: the band has one child, so the gap was * inert AND a second statement of `.cta-in`'s 28 — one number, two places to * change it — while the flex was a layout the inner element already owns, and * `.sec` (the element this one is modelled on) has neither. * * Its 88 of vertical padding is 8 less than the section rhythm (which is 88 at * 1440, where the canvas lands it) and follows the token down from there, so this * band tightens with every other band on a narrow screen instead of holding a * desktop number. The numbers strip above does the same, 24 less. */ .cta-band { padding: calc(var(--gl-sec-y) - 8px) var(--gl-pad); } .cta-in { width: 100%; max-width: var(--gl-wrap); margin: 0 auto; display: flex; flex-direction: column; gap: 28px; } .cta-title { font-family: var(--gl-serif); font-weight: 400; font-size: 58px; line-height: 1.034; /* 58 / 60 */ letter-spacing: -.5px; margin: 0; } .cta-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; } .cta-lead { font-size: 16px; line-height: 1.625; color: var(--gl-muted-2); max-width: 620px; } /* -------------------------------------------------------------------------- 19. THEME-LEVEL HELPERS -------------------------------------------------------------------------- */ .gl-ok, .gl-err { padding: 16px 20px; font-family: var(--gl-sans); font-weight: 600; font-size: 14px; margin-bottom: 18px; } .gl-ok { background: rgba(245,239,227,.16); color: var(--gl-paper); box-shadow: inset 0 0 0 1px rgba(245,239,227,.5); } .gl-err { background: #fff; color: var(--gl-ember); box-shadow: inset 0 0 0 1px var(--gl-ember); } .sec--paper .gl-ok, .sec--surface .gl-ok { background: var(--gl-paper); color: var(--gl-ink); box-shadow: inset 0 0 0 1px var(--gl-ink); } /* honeypot — present in the DOM, invisible to humans */ .gl-hp { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; overflow: hidden; border: 0; padding: 0; } /* built-in page fallback content area (kept so Elementor always finds it) */ .gl-classic { max-width: 860px; margin: 46px auto 0; padding: 0 var(--gl-pad); } /* -------------------------------------------------------------------------- 20. RESPONSIVE -------------------------------------------------------------------------- */ @media (max-width: 1180px) { :root { --gl-pad: 40px; --gl-sec-y: 72px; --gl-gutter: 40px; --gl-wrap: 100%; } .hero { min-height: 640px; } .hero-title { font-size: 84px; letter-spacing: -1px; } /* THE INNER HERO'S STEPS. Every number is the home hero's own, applied to * 620 rather than to 820 — 640/820, 560/820 and 480/820 of it are 480 / 420 * / 360 — because the canvas carries no inner-page breakpoints and a second * scale for one page is how a system stops being one. Two classes, so the * tie with `.hero` above is settled by specificity and not by position. */ .hero.hero--inner { min-height: 480px; } .hero--inner .hero-title { font-size: 84px; } .steps { flex-wrap: wrap; } .step { flex: 1 1 calc(50% - 8px); } /* The page's two smaller serif titles take the system's own 1180 size, the * same one `.sec-title` takes, rather than a ratio of their own. */ .story-title, .cta-title { font-size: 48px; } .sec-title, .join-title { font-size: 48px; } .edit-media { flex-basis: 52%; } .edit-media .gl-ph { height: 420px; } .ftr-mark-run > span { font-size: 220px; letter-spacing: -2px; } /* The masthead's three groups are all content-sized — .brand and .rt are * flex: none and the menu is as wide as its words — so nothing can shrink * and a long menu pushes the utilities past the right edge. Measured: at a * 991px viewport the row ended 5px wide, which is 5px of horizontal * scrollbar on every page. The gaps come in and the row is allowed to wrap * rather than overflow; when it fits, wrapping changes nothing. Scoped to * this breakpoint on purpose — the 1328px desktop spacing is untouched. */ .mast-in { height: auto; min-height: 78px; gap: 16px; flex-wrap: wrap; } .mast nav { gap: 20px; flex-wrap: wrap; } .mast .rt { gap: 16px; } .mats-grid { flex-wrap: wrap; } .mat { flex: 1 1 calc(50% - 8px); } .shelf-row { flex-wrap: wrap; } .shelf-row .gcard { flex: 1 1 calc(50% - 20px); } /* MUST stay after `.shelf-row .gcard`: both selectors score (0,2,0), so * source order is what keeps the featured card full-width on tablet. * Reversing them silently collapses the 01 block into a plain 2-up grid. */ .shelf-row--wide .gcard--wide { flex: 0 0 100%; } .voices { flex-wrap: wrap; } .voice { flex: 1 1 calc(50% - 8px); } } @media (max-width: 900px) { .mast .burger { display: block; } .mast nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--gl-paper); flex-direction: column; align-items: flex-start; gap: 0; padding: 8px var(--gl-pad) 20px; box-shadow: inset 0 1px 0 var(--gl-ink); } .mast nav.is-open { display: flex; } .mast nav a { padding: 12px 0; font-size: 14px; } .mast-in { position: relative; flex-wrap: wrap; } .hero { padding: 32px var(--gl-pad); min-height: 560px; } .hero-title { font-size: 62px; } .hero-foot { flex-direction: column; align-items: flex-start; gap: 32px; } .hero-lead { max-width: 100%; } .hero-top { flex-direction: column; align-items: flex-start; gap: 6px; } /* The inner hero keeps its own padding — the two-class rule in section 9 * outranks `.hero` above — and only its height and headline step down. Its * 660 measure is the same measure the home hero gives up here. */ .hero.hero--inner { min-height: 420px; } .hero--inner .hero-title { font-size: 62px; } .hero--inner .hero-lead { max-width: 100%; } /* Both inner-page rows stack where `.edit-row` and `.join-top` stack, and the * CTA's row uses the direction AND the 32px gap `.hero-foot` uses. */ .story-row { flex-direction: column; gap: 32px; } .story-rail { flex-basis: auto; width: 100%; } .cta-row { flex-direction: column; align-items: flex-start; gap: 32px; } .edit-row { flex-direction: column; } .edit-media { flex-basis: auto; width: 100%; } .join-top { flex-direction: column; gap: 32px; } .join-list { flex-basis: auto; width: 100%; } .ftr-top { flex-direction: column; gap: 40px; } .ftr-cols { flex-wrap: wrap; gap: 36px; } .stats { flex-wrap: wrap; gap: 24px 40px; } .sec-head { flex-direction: column; align-items: flex-start; gap: 20px; } } @media (max-width: 680px) { :root { --gl-pad: 20px; --gl-sec-y: 56px; --gl-gutter: 24px; --gl-logo-h: 40px; } .util { padding: 10px var(--gl-pad); } .util-in { flex-direction: column; gap: 8px; } /* min-height as well as height: the 1180px block relaxes the header to * `height: auto; min-height: 78px` so it can wrap, and a later `height: 64px` * does not undo that on its own — it would leave a 78px header on a 680px * screen. The render check caught it as exactly +14px of page height. */ .mast-in { height: 64px; min-height: 0; } .mast .mark { font-size: 22px; } .mast .sub { display: none; } .mast .rt { gap: 14px; } .mast .rt a, .mast .rt button { font-size: 11px; } .gl-search.is-open .gl-search-field { width: 96px; } .hero { padding: 24px var(--gl-pad); min-height: 480px; } .hero-title { font-size: 42px; letter-spacing: -.5px; } .hero-mid { gap: 18px; } .hero-rule { width: 48px; } /* The inner hero's copy stack takes the same tight gap its parent takes. */ .hero.hero--inner { min-height: 360px; } .hero--inner .hero-title { font-size: 42px; } .hero--inner .hero-mid { gap: 18px; } .steps { flex-direction: column; gap: 24px; } .step { flex: 1 1 auto; width: 100%; } .story-title, .cta-title { font-size: 34px; } .mq { min-height: 64px; gap: 14px; padding: 14px var(--gl-pad); } .mq span { font-size: 22px; } .mq .sep { font-size: 18px; } .sec-title, .join-title { font-size: 34px; } .sec-link, .gl-kicker { font-size: 10px; } .gcard .gl-ph { height: 260px; } .gcard .meta .t { font-size: 20px; } .shelf-row { flex-direction: column; gap: 24px; } .shelf-row .gcard { flex: 1 1 auto; width: 100%; } .edit-media .gl-ph { height: 300px; } .edit-info h3 { font-size: 30px; } .edit-info .pull { font-size: 18px; } .mat { flex: 1 1 100%; } .mat .gl-ph { height: 220px; } .voice { flex: 1 1 100%; } .quote { font-size: 28px; } .stat .n { font-size: 30px; } .join-form { flex-direction: column; } .join-form input { min-height: 56px; } .join-form button { min-height: 56px; } .ftr { padding: 56px var(--gl-pad); } .ftr-in { gap: 36px; } .ftr-mark-run > span { font-size: 84px; letter-spacing: -1px; } .ftr-bot { flex-direction: column; align-items: flex-start; gap: 10px; } .gl-btn { padding: 16px 24px; } } /* ========================================================================== PART 2 — WORDPRESS / WOOCOMMERCE / ELEMENTOR COMPATIBILITY LAYER Authored in design/gloam-compat.css. ========================================================================== */ /* ========================================================================== GLOAM — WORDPRESS / WOOCOMMERCE COMPATIBILITY LAYER (PART 2) -------------------------------------------------------------------------- WP core, WooCommerce and Elementor each ship their own CSS. This layer dresses all of it in the GLOAM design system so the site wears one skin everywhere, and restores the "implicit" rules that WooCommerce's default stylesheet normally provides (it is switched off in functions.php). ========================================================================== */ /* -------------------------------------------------------------------------- 1. WP CORE -------------------------------------------------------------------------- */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; background: var(--gl-ink); color: var(--gl-paper); padding: 10px 18px; font-family: var(--gl-mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; } .skip-link:focus { left: 0; } ::selection { background: var(--gl-ember); color: #fff; } .alignleft { float: left; margin: 6px 28px 18px 0; } .alignright { float: right; margin: 6px 0 18px 28px; } .aligncenter { margin-left: auto; margin-right: auto; } .wp-caption-text, .wp-element-caption, figcaption { font-family: var(--gl-mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gl-muted); padding-top: 8px; text-align: center; } /* post / page entry */ .gl-entry { padding: 56px var(--gl-pad) 90px; max-width: 860px; margin: 0 auto; } .gl-entry h1 { font-family: var(--gl-serif); font-weight: 400; font-size: 46px; line-height: 1.1; margin: 10px 0 24px; letter-spacing: -.5px; } .gl-entry h2, .gl-entry h3, .gl-entry h4 { font-family: var(--gl-serif); font-weight: 400; margin: 32px 0 12px; color: var(--gl-ink); } .gl-entry h2 { font-size: 32px; } .gl-entry h3 { font-size: 24px; } .gl-entry p { margin: 0 0 16px; color: var(--gl-body); font-size: 16px; line-height: 1.75; } .gl-entry a { color: var(--gl-ember); border-bottom: 1px solid currentColor; } .gl-entry ul, .gl-entry ol { margin: 0 0 16px 22px; color: var(--gl-body); } .gl-entry ul li { list-style: disc; } .gl-entry ol li { list-style: decimal; } .gl-entry blockquote { border-left: 2px solid var(--gl-ember); padding: 4px 0 4px 22px; margin: 24px 0; font-family: var(--gl-serif); font-style: italic; font-size: 22px; color: var(--gl-body); } /* WP block bits the theme uses */ .wp-block-button__link { background: var(--gl-ember) !important; color: #fff !important; border-radius: 0 !important; font-weight: 700; } .wp-block-search__button { background: var(--gl-ink); color: var(--gl-paper); border: 0; border-radius: 0; padding: 12px 20px; font-weight: 700; cursor: pointer; } /* -------------------------------------------------------------------------- 2. REAL WP MENUS INSIDE THE DESIGN A custom menu renders