/* Theme Name: Maecer Theme URI: https://maecer.com/ Author: AXX Data Ltd Author URI: https://www.axxdata.com/ Description: Single-page brand theme for Maecer, the specialist advisory practice of AXX Data Ltd. Deliberately minimal: no JavaScript on the front end, no navigation, no tracking. Front-page copy is editable under Appearance - Customize - Maecer copy. Version: 1.0.3 Requires at least: 6.0 Requires PHP: 7.4 License: Proprietary License URI: https://maecer.com/site-terms/ Text Domain: maecer Tags: one-column, custom-colors, custom-menu, editor-style */ /* ============================================================ MAECER Palette matched to axxdata.com's #0B1220 base. Type rule: serif speaks, sans states. Every serif element is Maecer's claim; every sans element is a verifiable fact. ============================================================ */ :root{ --ink: #0B1220; /* house navy, exact match to parent */ --ink-deep: #070C16; /* vignette edge, for depth */ --bone: #E4E0D6; /* headline. Warm off-white, never #fff */ --slate: #7C8798; /* secondary text, cool grey */ --slate-dim: #5C6577; /* legal footer */ --brass: #A88B5C; /* accent. Aged, not shiny */ --hairline: rgba(228,224,214,0.13); --serif: "Spectral", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Helvetica, Arial, sans-serif; --page: 76rem; /* upper bound on the composition */ --measure: 34rem; --measure-prose: 38rem; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body{ margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding: clamp(1.75rem, 5vw, 4.25rem); background-color: var(--ink); /* Two soft fields plus a vignette. No image, no grid, no stock photography. */ background-image: radial-gradient(120% 90% at 78% 4%, rgba(122,148,186,0.13) 0%, rgba(122,148,186,0) 58%), radial-gradient(100% 80% at 4% 96%, rgba(168,139,92,0.075) 0%, rgba(168,139,92,0) 62%), radial-gradient(140% 120% at 50% 50%, rgba(7,12,22,0) 40%, var(--ink-deep) 100%); background-repeat: no-repeat; color: var(--slate); font-family: var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---------- Do not remove: page gutter defence ---------- WordPress prints `global-styles-inline-css` in AFTER all theme stylesheets, and it contains: body{padding-top:0px;padding-right:0px; padding-bottom:0px;padding-left:0px} That is specificity 0,0,1 — identical to a plain `body` selector — so being later, it wins, and every gutter on the page collapses to zero. Dequeuing the `global-styles` handle is unreliable: core re-adds it, and plugins re-enqueue it. `html body` is 0,0,2, which settles the question regardless of source order or what any plugin does later. */ html body{ margin: 0; padding: clamp(1.75rem, 5vw, 4.25rem); } ::selection { background: rgba(168,139,92,0.28); color: var(--bone); } a { color: inherit; } :focus-visible{ outline: 1px solid var(--brass); outline-offset: 4px; } .screen-reader-text{ position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------- Page measure ---------- Padding alone bounds the gutters but not the composition: on a 27-inch display the content column would sit at 22% of the width with a vast void beside it. Cap every top-level block to one shared measure and centre it on the cross axis. `align-self` rather than `margin-inline: auto` because these are flex children of a column container, where stretch would otherwise take precedence. */ .plate, .thesis-block, .prose, .standing{ width: 100%; max-width: var(--page); align-self: center; } /* ---------- Nameplate ---------- */ .plate{ display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.55rem 0.85rem; } .mark{ margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(0.95rem, 1.5vw, 1.05rem); line-height: 1; letter-spacing: 0.3em; text-transform: uppercase; color: var(--bone); /* Incised, not printed. Reads as engraved into the surface. Kept faint. */ text-shadow: 0 1px 0 rgba(7,12,22,0.85), 0 -1px 0 rgba(228,224,214,0.08); } .mark a{ text-decoration: none; } .descriptor{ font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--slate); } .descriptor::before{ content: "\00B7"; margin-right: 0.85rem; color: var(--brass); } /* ---------- Front page: the thesis ---------- */ .thesis-block{ padding: clamp(3rem, 9vh, 6rem) 0; } /* The statement keeps the narrow reading measure inside the wider page. */ .thesis, .rule{ max-width: var(--measure); } .is-front .thesis-block{ margin-top: auto; margin-bottom: auto; } .thesis{ margin: 0; font-family: var(--serif); font-weight: 300; /* dark grounds thicken type. Go lighter, not heavier. */ font-size: clamp(2rem, 5.4vw, 3.4rem); line-height: 1.16; letter-spacing: -0.012em; color: var(--bone); text-wrap: balance; overflow-wrap: break-word; } .rule{ height: 1px; margin: clamp(2rem, 4.5vh, 2.9rem) 0; /* Runs most of the measure and fades only at the very end. An earlier fade made it stop at no particular place, reading as unfinished. */ background: linear-gradient(to right, var(--brass) 0%, rgba(168,139,92,0.72) 55%, rgba(168,139,92,0.18) 86%, rgba(168,139,92,0) 100%); border: 0; transform-origin: left center; } .scope{ margin: 0; font-size: clamp(0.92rem, 1.15vw, 1rem); line-height: 1.65; color: var(--slate); max-width: 30rem; } .contact{ display: inline-block; margin-top: clamp(1.9rem, 4vh, 2.6rem); font-size: 0.92rem; letter-spacing: 0.01em; color: var(--bone); text-decoration: none; border-bottom: 1px solid rgba(168,139,92,0.45); padding-bottom: 2px; transition: border-color 0.35s ease, color 0.35s ease; } .contact:hover{ border-bottom-color: var(--brass); color: #fff; } /* ---------- Inner pages: site terms, privacy, 404 ---------- */ .prose{ max-width: var(--measure-prose); align-self: center; padding: clamp(3rem, 9vh, 5.5rem) 0 clamp(3rem, 8vh, 5rem); font-size: 0.95rem; line-height: 1.75; } .prose-title{ margin: 0 0 clamp(1.75rem, 4vh, 2.5rem); font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 3.6vw, 2.25rem); line-height: 1.22; letter-spacing: -0.01em; color: var(--bone); text-wrap: balance; overflow-wrap: break-word; } .prose h2, .prose h3{ margin: 2.5em 0 0.75em; font-family: var(--serif); font-weight: 400; line-height: 1.35; color: var(--bone); } .prose h2 { font-size: 1.2rem; } .prose h3 { font-size: 1.02rem; } .prose p, .prose li { color: var(--slate); } .prose p { margin: 0 0 1.4em; } .prose ul, .prose ol { margin: 0 0 1.4em; padding-left: 1.3em; } .prose li { margin-bottom: 0.5em; } .prose a{ color: var(--bone); text-decoration: none; border-bottom: 1px solid rgba(168,139,92,0.45); transition: border-color 0.3s ease; } .prose a:hover { border-bottom-color: var(--brass); } .prose strong { color: var(--bone); font-weight: 500; } .prose blockquote{ margin: 2em 0; padding-left: 1.4em; border-left: 1px solid var(--hairline); font-family: var(--serif); color: var(--bone); } .prose hr{ height: 1px; margin: 2.5em 0; background: var(--hairline); border: 0; } .prose img { max-width: 100%; height: auto; } .prose table{ width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 0.9rem; } .prose th, .prose td{ padding: 0.6em 0.9em 0.6em 0; text-align: left; border-bottom: 1px solid var(--hairline); } .prose th { color: var(--bone); font-weight: 500; } /* ---------- Standing: the credibility layer ---------- */ .standing{ border-top: 1px solid var(--hairline); padding-top: 1.4rem; font-size: 0.71rem; line-height: 1.85; letter-spacing: 0.035em; color: var(--slate-dim); } .is-inner .standing { margin-top: auto; } .standing a{ text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.3s ease, border-color 0.3s ease; } .standing a:hover { color: var(--bone); border-bottom-color: var(--hairline); } /* Two stacked lines: lineage, then the statutory record. */ .lineage, .record { margin: 0; } .sep { padding: 0 0.55rem; opacity: 0.45; } /* Footer page links: a nav menu if assigned, otherwise top-level pages. */ .ledger{ display: inline; margin: 0; padding: 0; list-style: none; } .ledger li { display: inline; } .ledger li::before{ content: "\00B7"; padding: 0 0.55rem; opacity: 0.45; } /* ---------- The one moment of motion ---------- The page assembles once over roughly 1.5s, then is completely still. The rule drawing itself is the signature. Nothing moves again. Written as progressive enhancement: the default state is fully visible, and the animation is layered on only where motion is welcome. An animation that fails to run, is blocked by an extension, or is overridden by a plugin therefore cannot leave the page blank — which an `opacity: 0` default can. */ @keyframes rise{ from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } } @keyframes draw{ from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: no-preference){ .anim{ opacity: 0; animation: rise 1s cubic-bezier(0.22,0.61,0.36,1) forwards; } .plate { animation-delay: 0.1s; } .thesis-block, .prose { animation-delay: 0.45s; } .standing { animation-delay: 1.05s; } .rule{ animation: draw 1.15s cubic-bezier(0.22,0.61,0.36,1) 0.8s both; } } /* ---------- Small screens ---------- */ @media (max-width: 30rem){ .mark { letter-spacing: 0.22em; } .plate { gap: 0.4rem; } .descriptor::before { margin-right: 0.5rem; } .standing { line-height: 2; } .sep { padding: 0 0.4rem; } .ledger li::before { padding: 0 0.4rem; } } /* ---------- Logged-in admin bar ---------- Core injects `html { margin-top: 32px !important }` on the front end, so a body at 100svh becomes taller than the viewport: the layout is pushed down, the centring reads as off, and the footer falls below the fold with a permanent scrollbar. Subtract the bar's height. This is only ever visible to logged-in users; anonymous visitors are unaffected either way. */ body.admin-bar{ min-height: calc(100vh - 32px); min-height: calc(100svh - 32px); } @media screen and (max-width: 782px){ body.admin-bar{ min-height: calc(100vh - 46px); min-height: calc(100svh - 46px); } }