/* ========================================================================== Aspiring Quotes — Ghost theme (aspiringquotes.com) GENERATED FILE — DO NOT EDIT BY HAND. Source: wisdom-quotes-and-stories v3.6.0 assets/css/screen.css Generator: output/ghost-fleet-port-v3/gen/build.js Built: 2026-08-06 To change the DESIGN, change the master and re-run the generator. To change this SITE's colours, change its entry in gen/sites.js and re-run. A hand edit here survives exactly until the next port and is then silently gone. ──────────────────────────────────────────────────────────────────────────── READ THIS BEFORE TRUSTING A NUMBER IN A COMMENT BELOW. Every contrast figure in the prose comments in this file was written for wisdomquotesandstories.com and describes ITS palette — navy #022A5C, ocean #0072A1, apricot #FFCD9C. They are kept because the REASONING they carry is what makes this stylesheet maintainable, and that reasoning is palette- independent. The NUMBERS are not. The measured figures for aspiringquotes.com are the table inside the :root block below, computed from this site's own values at build time. Where a prose comment and that table disagree, the table is right. This is the third time this fleet has been bitten by a copied contrast comment reading as a verified measurement. Stating it once, loudly, is the fix that scales. ========================================================================== */ /* ========================================================================== SELF-HOSTED WEBFONTS — added 2026-08-05 -------------------------------------------------------------------------- Until now this theme shipped NO font files and no @font-face, and the site's Ghost heading_font/body_font settings are empty — so it rendered in whatever system font the visitor happened to have. The WordPress theme this site replaced self-hosted Poppins and Lora; that typographic identity was dropped at migration, on this site and on all eleven others. Both faces are SIL OFL. Served from the theme, never fonts.googleapis.com — a third-party stylesheet on the critical path costs a DNS lookup, a TLS handshake and a round trip before the first byte of font CSS arrives, and it hands the visitor's IP to a third party on every page view. Only latin and latin-ext ship. unicode-range means latin-ext downloads only if a page actually contains a character in it. Lora is the variable release, so 400..700 is one file; Poppins has no variable release, so 600 and 700 are separate. Per page that is ~50 KB, not the 138 KB on disk. THE FALLBACK METRICS ARE MEASURED, NOT GUESSED. font-display:swap trades FOIT for CLS — text paints in the fallback then reflows when the webfont lands. Rendering both faces at 200px and comparing advance widths gave: Lora vs Georgia 103.1% (x-height 104.2%) <- chosen Lora vs Times 112.0% Poppins vs Arial 112.7% (x-height 106.7%) <- chosen Poppins vs Segoe UI 113.0% Georgia sits within 3.1% of Lora, which is why it leads the serif stack. size-adjust closes the remainder so the swap barely moves the text. ========================================================================== */ /* Lora — body copy and the quotations. Variable, 400..700. */ @font-face{ font-family:'Lora'; font-style:normal; font-weight:400 700; font-display:swap; src:url('../fonts/lora-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Lora'; font-style:normal; font-weight:400 700; font-display:swap; src:url('../fonts/lora-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Lora'; font-style:italic; font-weight:400 700; font-display:swap; src:url('../fonts/lora-italic-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Lora'; font-style:italic; font-weight:400 700; font-display:swap; src:url('../fonts/lora-italic-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* Poppins — headings and UI. No variable release, so 600 and 700 are separate. */ @font-face{ font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/poppins-600-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/poppins-600-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/poppins-700-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/poppins-700-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* Metric-matched fallbacks. These carry the MEASURED ratios above, so the swap-in barely moves the text instead of reflowing the page. */ @font-face{ font-family:'Lora Fallback'; src:local('Georgia'), local('Times New Roman'); size-adjust:103.1%; ascent-override:100.5%; descent-override:27.5%; } @font-face{ font-family:'Poppins Fallback'; src:local('Arial'), local('Helvetica'); size-adjust:112.7%; ascent-override:105.0%; descent-override:35.0%; } :root { /* --- PALETTE — this site's own brand kit, not the master's --------------- GENERATED. Regenerate with output/ghost-fleet-port-v3/gen/build.js rather than editing here; a hand edit is lost on the next port and, worse, it will not be re-measured. MEASURED FOR aspiringquotes.com, at build time, against the three grounds these colours actually land on. This table is the authority for this file: every other contrast figure in the comments below came from the master stylesheet and describes wisdomquotesandstories.com, not this site. role colour page #FFFFFF card #FBFBF9 footer #03203A ------------------------------------------------------------------------- ink #0A1A2F 17.48:1 16.87:1 1.06:1 title #03203A 16.51:1 15.94:1 1.00:1 accent #0F4661 10.15:1 9.80:1 1.63:1 muted #2B5D72 7.21:1 6.96:1 2.29:1 accent-alt #86714E 4.68:1 4.52:1 3.53:1 focus ring #2B5D72 7.21:1 6.96:1 2.29:1 white on foot #FFFFFF — — 16.51:1 foot focus #F4CD8E — — 10.99:1 pill hover ink #03203A on #F4CD8E 10.99:1 AA for body text is 4.5:1. WCAG 1.4.11 asks 3:1 of a focus ring and of a control's edge — a lower bar, deliberately, and the reason the focus ring is allowed on grounds where text in the same colour would not be. */ --aq-ink: #0A1A2F; /* body ink, borders, the dark half of the brand */ --aq-ink-strong: #03203A; /* darkest brand ink — link hover, footer ground */ --aq-title: #03203A; /* every heading on a light ground */ --aq-accent: #0F4661; /* links, chips, pills, buttons, focus, nav hover */ --aq-accent-alt: #86714E; /* the accent-deep body variant; form errors */ --aq-muted: #2B5D72; /* meta, bylines, the header tagline */ --aq-focus: #2B5D72; /* page focus ring — 1.4.11 wants 3:1, not 4.5 */ --aq-tint: #FDF8EC; /* pale fill that takes dark ink */ --aq-surface: #FBFBF9; /* card face, wells, the related band */ --aq-paper: #FFFFFF; /* page ground */ --aq-white: #FFFFFF; --aq-text: var(--aq-ink); /* THE HEADER IS WHITE AND THE FOOTER IS THE BRAND'S DARKEST INK. Until 2026-08-06 these were the same near-black bar at both ends of the page. The master moved its header to white and its footer to the mark's own ink, and this port follows it. THAT MADE THE NAV HOVER A PAIR CHANGE, AND IT IS THE ONE THAT BITES. This site's previous nav hover was #F4CD8E — chosen as a LIGHT ink on a near-black bar, where it measures 10.99:1. On a white bar the same colour is 1.50:1: invisible. So the header's hover is now the accent (10.15:1 on white) and #F4CD8E survives only below, where it is still sitting on the ground it was measured against. */ --aq-head: #FFFFFF; /* header ground */ --aq-foot: #03203A; /* footer ground — white on it is 16.51:1 */ --aq-foot-focus: #F4CD8E; /* footer focus ring — 10.99:1 on the footer */ --aq-pillhover: #F4CD8E; /* footer tag-pill hover fill */ --aq-pillink: #03203A; /* and its ink — 10.99:1 on that fill */ /* Hairlines and shadows are the ink at low alpha, so they follow the brand instead of being a neutral grey laid over it. Kept as an RGB triplet because rgba() cannot take a hex custom property. */ --aq-ink-rgb: 10,26,47; --wrap: 1180px; --wrap-narrow: 720px; --radius: 10px; --gap: clamp(1rem, 2.5vw, 1.75rem); --tap: 44px; /* WCAG 2.5.8 target size */ /* Ghost still injects --gh-font-heading / --gh-font-body if an owner picks a font in admin, and that must keep winning — it is the site owner's choice. Poppins for display, Lora for body, self-hosted from this theme. */ --font-body: var(--gh-font-body, 'Lora', 'Lora Fallback', Georgia, "Iowan Old Style", "Times New Roman", serif); --font-head: var(--gh-font-heading, 'Poppins', 'Poppins Fallback', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif); --shadow-sm: 0 1px 2px rgba(var(--aq-ink-rgb),.06), 0 2px 8px rgba(var(--aq-ink-rgb),.05); --shadow-md: 0 4px 16px rgba(var(--aq-ink-rgb),.10); } body.accent-deep { --aq-accent: var(--aq-accent-alt); } /* --- reset -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--aq-paper); color: var(--aq-text); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } /* defaults to display:inline, which would become the img's containing block and break every rule below that sizes or centres the img directly (.quote-card-img height:100%, .post-media img margin-inline:auto). */ picture { display: block; } a { color: var(--aq-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } /* Hover DARKENS toward the brand ink rather than shifting hue: ocean-ink 5.36:1 at rest -> navy-true 14.11:1 on hover. Plum #4C1656 was the old pair to the amethyst accent and is the same violet family that has just been removed everywhere else. */ a:hover { color: var(--aq-ink-strong); } h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.22; color: var(--aq-title); margin: 0 0 .5em; } /* WCAG 1.4.11 asks 3:1 of a focus indicator, not the 4.5:1 a text colour needs. outline-offset puts a 2px gap between the ring and the element, so the ring's neighbour on both sides is the container background, never a button fill — which is why the ring on an --aq-brown button is not the comparison that matters. RE-MEASURED 2026-08-05 for the badge palette: --aq-rust-ink is now the ocean ink #0072A1, and it rings at 5.36:1 on the white page, 5.04:1 on a card and 3.69:1 on the apricot .sections band — the band figure STILL clears the 3:1 that 1.4.11 asks, so the ring is correct on a band where TEXT in the same colour (3.69, under 4.5) is not. That is precisely why 1.4.11 and 1.4.3 set different thresholds, and why the band rule above constrains text without touching the focus ring. Twice now this comment has carried another palette's numbers and read as verified — first an orange-on-cream pair from a different site, then the violet 4.83/3.19 set from the wrong logo. Re-measure it on every repalette. */ :focus-visible { outline: 3px solid var(--aq-accent); outline-offset: 2px; border-radius: 3px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--aq-ink); color: var(--aq-white); padding: .75rem 1.25rem; } .skip-link:focus { left: 0; } .wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; } .wrap-narrow { width: min(100% - 2rem, var(--wrap-narrow)); } /* --- header ------------------------------------------------------------- */ /* HEADER GROUND CHANGED AGAIN 2026-08-06, by request: #300060 -> WHITE. History of this one bar: white -> #300050 (v1.7.1) -> #300060 (v2.0.0) -> white. A turn to white was also asked for and withdrawn mid-turn at v1.9.1, so this is the second time it has been requested and the first time it ships. THE SAME RULE APPLIES IN REVERSE, AND IT IS THE WHOLE OF THIS CHANGE. Every element in this bar had been re-inked to WHITE-ON-VIOLET at v1.7.1. On a white ground those inks measure: .site-title --aq-white #FFFFFF 1.00:1 invisible .site-tagline --aq-white #FFFFFF 1.00:1 invisible nav links --aq-white #FFFFFF 1.00:1 invisible nav hover #FFCB9A 1.44:1 invisible .nav-toggle-bar --aq-white #FFFFFF 1.00:1 invisible .nav-toggle-label --aq-white #FFFFFF 1.00:1 invisible header icons --aq-white #FFFFFF 1.00:1 invisible borders rgba(255,255,255,.12-.30) invisible Repointing the background alone would have produced an empty white strip with a logo in it. Changing the ground is never the change; it is half of a pair. WHICH COLOURS THE BAR TAKES NOW — the request was "brandkit colours according to logo", so the inks below are the MEASURED palette from the 1600x1600 badge (Brand Kit/02-Color/palette.md), not the #300050/#300060/#FFCB9A literals that had accumulated here. None of those three appears anywhere in the artwork: #300060 was specified by hand, and the violet family entered this theme from a palette built off a derived wordmark that was later superseded. The badge is navy silhouette, sky, ocean and apricot. So on white: .site-title --aq-ink #022A5C 14.11:1 AAA the mark's own ink .site-tagline --aq-ink-soft #4C6F81 5.39:1 AA the kit's secondary nav links --aq-ink #022A5C 14.11:1 AAA nav hover --aq-ocean-ink #0072A1 5.36:1 AA the working ocean nav hover pill --aq-sky #C5EAFF fill + navy ink 11.14:1 .nav-toggle-bar --aq-ink #022A5C 14.11:1 (needs 3:1) .nav-toggle-label --aq-ink #022A5C 14.11:1 AAA header icons --aq-ink #022A5C 14.11:1 icon hover --aq-sky fill + --aq-ink glyph 11.14:1 Every figure is from the kit's own contrast matrix, measured against paper #FFFFFF. The bar is now MORE legible than it was on violet, not less. THE FOCUS RING IMPROVES AND IS STILL THE THING TO WATCH. --aq-ocean-ink was 3.03:1 on #300060 — over WCAG 1.4.11's 3:1 with almost nothing to spare. On white it is 5.36:1. That margin is why the same token can now also carry nav hover text, which needs 4.5:1 and could not have had it on the old bar. THE FOOTER FOLLOWED LATER THE SAME DAY. It was left on #300060 when this bar went white, which broke the open-and-close-on-one-colour symmetry that justified darkening the header at v1.7.1. It is now --aq-navy-true #022A5C — the badge's own silhouette navy — so the page is white at the top and the logo's navy at the bottom, and BOTH grounds are measured brand colours for the first time. See the .site-foot rule for what that move cost (the focus ring). SEPARATION IS A SHADOW, NOT A BORDER — 2026-08-06, by request. The 3px sky rule this shipped with earlier the same day is gone. The job is unchanged and it still has to be done: this bar is STICKY over a white page, so with no ground contrast and no edge it would dissolve into the content scrolling under it. --shadow-sm does it without drawing a line, and it is already tinted with --aq-ink rather than being neutral grey, so the lift reads as the brand's navy rather than as a generic drop shadow. A shadow also degrades better than the border did: the sky rule was a fixed 3px band that sat there whether or not anything was under it, whereas this only reads where content passes beneath. */ .site-head { --aq-head: var(--aq-paper); background: var(--aq-head); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 40; } /* 68px -> 90px by request. The wrap measurements recorded further down were all taken at 68px and REMAIN VALID: they are about the bar's WIDTH — whether the brand lockup and the button fit on one line — and a taller bar changes neither term. Nothing keys off this height. */ .site-head-inner { display: flex; align-items: center; gap: 1rem; min-height: 90px; padding-block: .5rem; flex-wrap: wrap; } .site-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; margin-right: auto; min-height: var(--tap); } /* CHANGED 2026-08-05 — the logo is now the BADGE, not the wordmark. The wordmark was a 502x82 violet script quantised from a derived asset; it shares no colour with this brand and clashed with the badge palette once that shipped. The master mark is a square illustrated badge, so this reverts to the 46px circle the rest of this lineage uses. CONSEQUENCE THAT MUST NOT BE MISSED: the wordmark carried the site's NAME, and .site-title was hidden precisely because of that. A square badge says nothing, so the title is now VISIBLE again — badge + name + tagline is a lockup, which is what a 6:1 landscape header slot actually wants. Dropping the badge in without un-hiding this would have left the header nameless. */ /* 46 -> 50px by request, 2026-08-06. THE WIDTH/HEIGHT ATTRIBUTES IN default.hbs MOVED WITH IT, BOTH OF THEM. A circular mark's size lives in three places on this site — this rule, the in the {{#if @site.logo}} branch, and the in the {{else}} fallback — and the attributes are what reserve the box before the file lands. Changing only the CSS leaves the browser reserving 46px for a 50px image, which is a layout shift on every page load: exactly the thing those attributes exist to prevent, reintroduced by a cosmetic edit. The FOOTER lockup (.foot-brand-logo) is deliberately left at 46px — it is a separate element and was not part of the request. */ .site-logo { height: 50px; width: 50px; object-fit: contain; border-radius: 50%; flex: none; } .site-brand-text { display: flex; flex-direction: column; } .site-title { /* 19px by request, 2026-08-06 — was 1.2rem. Stated in px rather than rem because the ask was in px; note this makes the brand name the one piece of type on the site that no longer scales with the reader's root font size. At the default 16px root it is a 0.2px change, so nothing moved visually; the difference only appears for a reader who has enlarged their base font, where the title now stays put while the rest of the page grows. */ font-family: var(--font-head); font-size: 19px; font-weight: 700; /* The ACCENT, matching enlighteningquotes.com, which sets its site title in --eq-brown rather than its ink. Amethyst is 7.02:1 on paper — AAA — so the match costs nothing in contrast. */ /* RE-INKED AGAIN for the white bar, 2026-08-06. White was correct on the violet ground and is 1.00:1 on this one. --aq-ink #022A5C is the badge's own silhouette-and-wordmark navy — 6.13% of the artwork by area, the largest non-white share — and 14.11:1 on paper. NOT --aq-title #300050, which every other heading on a light ground uses: that is a hand-picked violet with no counterpart in the logo, and the request was for the kit's colours. The two are close in tone (16.92 vs 14.11) so this is a hue decision, not a contrast one. Flagged rather than quietly propagated: the body headings still carry #300050. */ color: var(--aq-ink); line-height: 1.1; letter-spacing: -.01em; } /* --aq-ink-soft #4C6F81 — the kit's own secondary ink, 5.39:1 on paper, AA at this size. It is what the palette lists for "meta, bylines", which is exactly the role a tagline plays under the site name. The footer's #C9BAB2 was chosen against the violet and is 1.61:1 here. */ /* 13px by request, 2026-08-06 — was .78rem (12.48px at a 16px root), so this is a half-pixel larger and, like .site-title above, no longer scales with the reader's root font size. It stays --aq-ink-soft: at 5.39:1 that clears AA, and WCAG has no minimum font size, so 13px is a legibility judgement rather than a compliance one. */ .site-tagline { font-size: 13px; color: var(--aq-muted); line-height: 1.25; } /* The button now holds a visible "Menu" label under the bars, so it can no longer be a fixed 44x44 square — a hard height would clip the text and a hard width would squeeze it. min-* keeps the WCAG 2.5.8 floor while letting the box grow to whatever the word needs; align-items centres the bars over the label now that the two have different natural widths (previously the bars were the only children and stretched edge to edge). */ .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; min-width: var(--tap); min-height: var(--tap); /* Was rgba(255,255,255,.30) — a white wash, invisible on a white bar. Same shape, same alpha, the ink flipped to the brand navy. */ background: none; border: 1px solid rgba(var(--aq-ink-rgb),.30); border-radius: 8px; cursor: pointer; padding: 6px 10px; } /* The bars lost their stretch when align-items became centre, so they now need an explicit width — without one an empty span with no content is 0px wide and the burger disappears entirely. */ .nav-toggle-bar { width: 22px; } .nav-toggle-label { font-family: var(--font-head); font-size: .68rem; font-weight: 700; line-height: 1; letter-spacing: .03em; color: var(--aq-ink); margin-top: 2px; } /* The bars ARE the control — WCAG 1.4.11 wants 3:1 of them. On the white bar --aq-ink is 14.11:1, so the burger is the highest-contrast thing in the header. This is also the only element here that has now been re-inked three times (amethyst -> white -> navy); it is re-measured each time rather than assumed to have survived, because at 2px tall it is the first thing to disappear and the last thing anyone notices. */ .nav-toggle-bar { display: block; height: 2px; background: var(--aq-ink); border-radius: 2px; } /* {{navigation}} emits its own