/* ============================================================================ refined.css — editorial refinement layer for The Silent Wife ---------------------------------------------------------------------------- Loaded AFTER styles.css. styles.css still owns layout, components and dark mode; this file owns the things that decide whether the site reads as a published book or as a template: the type scale, the vertical rhythm, the weight of a rule, the size of a shadow. Everything here is written against the palette tokens already defined in styles.css (--accent, --gilt, --surface-warm, --text-*, --border-*), so dark mode follows for free. The colours themselves are not changed. ========================================================================= */ /* --------------------------------------------------------------------------- 1. Tokens ------------------------------------------------------------------------ */ :root { /* Vertical rhythm. One scale, used everywhere, so sections stop each inventing their own padding. */ --space-xs: 0.75rem; --space-s: 1.25rem; --space-m: 2rem; --space-l: clamp(2.25rem, 3.2vw, 3rem); /* Section padding. Adjacent sections each pay this, so the gap between two of them is double: the previous 8vw resolved to 115px a side — a 230px trench — and put roughly 30% of the page's height into empty padding. At 4.4vw the gap is ~126px at 1440, which still reads as generous without the page falling apart into unrelated islands. */ --space-xl: clamp(3rem, 4.4vw, 4.5rem); /* Fluid type scale. Display sizes are set in clamp() so headings never need a media query and never collide on a narrow screen. */ --step-display: clamp(2.75rem, 1.4rem + 5.4vw, 5.25rem); --step-title: clamp(2rem, 1.15rem + 3.1vw, 3.25rem); --step-h3: clamp(1.25rem, 1.05rem + 0.75vw, 1.6rem); --step-lead: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem); --step-body: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem); --step-small: 0.9375rem; --step-micro: 0.75rem; /* Measure. Long-form text is unreadable when it runs the full 1400px grid. */ --measure: 34rem; /* Restraint tokens. The old design reached for glow; these reach for paper. */ --hairline: 1px solid var(--border-light); --rule-gilt: rgba(201, 150, 46, 0.55); --shadow-plate: 0 1px 2px rgba(42, 36, 38, 0.05), 0 12px 32px -18px rgba(42, 36, 38, 0.35); --shadow-lift: 0 2px 4px rgba(42, 36, 38, 0.06), 0 22px 48px -22px rgba(42, 36, 38, 0.4); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); } body.dark-mode { --rule-gilt: rgba(224, 180, 87, 0.45); --shadow-plate: 0 1px 2px rgba(0, 0, 0, 0.5), 0 14px 34px -18px rgba(0, 0, 0, 0.8); --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.55), 0 24px 52px -22px rgba(0, 0, 0, 0.9); } /* --------------------------------------------------------------------------- 2. Two structural corrections ------------------------------------------------------------------------ */ /* `overflow-x: hidden` on turns the body into its own scroll container, and a position:sticky child sticks to *that* — which never scrolls. It is why the header slid away on the first scroll instead of staying put. The fix is to let only the root element clip. The root's overflow is propagated to the viewport, so horizontal scroll is still suppressed, sticky children of resolve against the viewport, and fixed elements — the mobile nav drawer and its overlay — keep covering the screen. Not `overflow-x: clip` on body: Chrome clips fixed-position descendants to a clip container, which left the open nav drawer scrolling away with the page. */ html { overflow-x: hidden; } body, .elegant-background { overflow-x: visible; overflow-y: visible; } /* The announcement banner was position:fixed at top:0 — the same place the sticky header comes to rest — so on any scrolled view it sat over the top 60px of the header and cut the logo in half. It is an announcement, not chrome: in the flow it scrolls away, the header owns the top of the screen, and it can grow when its text wraps instead of overflowing a 60px box. That also retires the body padding that existed only to reserve its space, and with it the whole class of bug where the two fell out of sync. `relative`, not `static`: the close button is absolutely positioned to it. */ .book-banner { position: relative; height: auto; min-height: 60px; } body.has-book-banner { padding-top: 0 !important; } /* The crimson gradient lozenge that hung in the right margin of two sections. It was clipped by the viewport, matched nothing else on the page, and read as leftover scaffolding. The gilt hairlines are the site's ornament now. */ .geometric-pattern { display: none; } /* --------------------------------------------------------------------------- 3. Typography ------------------------------------------------------------------------ */ body { font-size: var(--step-body); line-height: 1.65; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* Fraunces carries an optical-size axis: high settings thin the hairlines and sharpen the serifs, which is what makes a large title look set rather than scaled up. WONK swaps in the flared alternates that give it its character. */ h1, h2, .hero-title, .content-title, .section-title, .ornament-bar-title, .book-title, .footer-title h2 { font-family: var(--font-display); font-optical-sizing: auto; font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 120; font-weight: 400; letter-spacing: -0.021em; line-height: 1.06; text-wrap: balance; text-shadow: none; } .hero-title { font-size: var(--step-display); margin-bottom: var(--space-s); min-height: 0; /* space was reserved for the typewriter effect */ transition: none; } .content-title, .section-title { font-size: var(--step-title); letter-spacing: -0.018em; color: var(--text-dark); } .section-title { text-align: center; margin-bottom: var(--space-l); max-width: 22ch; margin-left: auto; margin-right: auto; } /* Prose. Serif, generous leading, capped measure. */ .content-text, .hero-description, .feature-text, .footer-text, .story-text, .about-text { font-family: var(--font-prose); font-optical-sizing: auto; font-weight: 400; line-height: 1.72; color: var(--text-medium); letter-spacing: 0.002em; text-wrap: pretty; } .content-text { font-size: var(--step-body); max-width: var(--measure); margin-bottom: var(--space-s); } .hero-description { font-size: var(--step-lead); font-weight: 400; line-height: 1.6; max-width: 40ch; } /* Every page except the homepage uses the centred hero. A measure-capped block inside a centred box still sits hard against the left edge unless its own margins are told to share the slack, which left the standfirst hanging to the left of the title it belongs to. */ .hero-content-box:not(.hero-content-box-book) .hero-description, .hero-content-box:not(.hero-content-box-book) .hero-positioning, .hero-content-box:not(.hero-content-box-book) .content-text, .content-container-narrow .content-text { margin-inline: auto; } /* The line under the hero title. Italic prose reads as a book subtitle; the old bold letterspaced sans read as a banner ad. */ .hero-positioning { font-family: var(--font-prose); font-size: var(--step-lead); font-style: italic; font-weight: 400; letter-spacing: 0.005em; line-height: 1.35; color: var(--accent); margin-bottom: var(--space-s); max-width: 26ch; } /* --------------------------------------------------------------------------- 4. The eyebrow — the piece of hierarchy the site was missing ------------------------------------------------------------------------ A small gilt label above a section title. It tells the reader where they are before they read the sentence, and it gives every section the same opening beat, which is most of what "flow" actually is. */ .eyebrow { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-ui); font-size: var(--step-micro); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gilt-deep); margin: 0 0 var(--space-s); } .eyebrow::before { content: ''; width: 2.25rem; height: 1px; background: var(--rule-gilt); flex: none; } .eyebrow-center { justify-content: center; margin-bottom: var(--space-xs); } .eyebrow-center::after { content: ''; width: 2.25rem; height: 1px; background: var(--rule-gilt); flex: none; } body.dark-mode .eyebrow { color: var(--gilt); } /* --------------------------------------------------------------------------- 5. Header ------------------------------------------------------------------------ */ /* No `backdrop-filter` here, deliberately. It makes the element carrying it a containing block for fixed-position descendants, and the mobile nav drawer lives inside this header — a frosted header left the open drawer scrolling off the top of the screen instead of covering it. Moving the blur to a pseudo-element avoids that but reintroduces a stacking problem, and over a flat cream page the blur is worth neither. A solid ground is honest, renders identically in every browser, and costs the compositor nothing. */ .site-header { border-bottom: var(--hairline); box-shadow: none; background: var(--surface-warm); transition: border-color 0.45s var(--ease-out); } /* Set by refined.js once the page has scrolled past the first fold. */ .site-header.is-condensed { border-bottom-color: var(--border-medium); } .nav-item { font-family: var(--font-ui); font-size: var(--step-small); font-weight: 400; letter-spacing: 0.005em; color: var(--text-medium); position: relative; transition: color 0.3s var(--ease-out); } /* A rule that draws in from the left, instead of the whole link jumping up and scaling. Hover should acknowledge, not perform. */ .nav-item::after { content: ''; position: absolute; left: 0; right: 0; /* styles.css animates this pseudo-element from width:0; left/right only take over once width is auto, and without this the rule is a 0px line. */ width: auto; bottom: -0.35rem; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-out); } .nav-item:hover, .nav-item.is-current { color: var(--text-dark); } .nav-item:hover::after, .nav-item.is-current::after { transform: scaleX(1); } .nav-item.is-current::after { background: var(--rule-gilt); } /* Reading progress: a two-pixel thread along the bottom of the header, driven by a scroll-linked animation where the browser supports it and by refined.js setting --progress where it does not. */ .reading-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: linear-gradient(90deg, var(--accent), var(--gilt)); transform: scaleX(var(--progress, 0)); transform-origin: left; pointer-events: none; z-index: 2; } @supports (animation-timeline: scroll()) { .reading-progress { animation: progress-grow linear both; animation-timeline: scroll(root block); } @keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } } /* --------------------------------------------------------------------------- 6. Section rhythm ------------------------------------------------------------------------ Every content section now breathes on the same scale, and adjacent sections alternate their image side, so the page reads as a sequence rather than as a stack of identical rows. */ .content-section { padding-block: var(--space-xl); padding-inline: var(--space-m); } .content-section:first-of-type { padding-top: var(--space-l); } /* `stretch`, not `center`. Centring a fixed-ratio plate in a row whose height is set by the text column leaves the picture floating with dead space above and below it — 149px top and bottom beside the opening section's copy. Let the plate fill its row and each section becomes one solid two-column block. */ .content-container { max-width: 1180px; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: stretch; } /* The text still sits centred against the picture beside it. */ .content-left { align-self: center; } .content-left { padding: 0; } /* Alternate the image side down the page. An explicit modifier rather than :nth-of-type, because the sections that carry a photograph are not evenly spaced among the ones that do not — counting would flip the wrong rows. */ .content-section.is-reversed .content-container > .content-left { order: 2; } .content-section.is-reversed .content-container > .content-right { order: 1; } /* A hairline that closes each section without a decorative bar. */ .content-section + .content-section > .content-container::before, .content-section + .content-section > .book-features-container::before { content: ''; position: absolute; top: calc(var(--space-xl) * -0.5); left: 50%; transform: translateX(-50%); width: min(100%, 1180px); height: 1px; background: linear-gradient(90deg, transparent, var(--border-light) 18%, var(--border-light) 82%, transparent); } .book-features-container { position: relative; } /* --------------------------------------------------------------------------- 7. Images — plates, not circles ------------------------------------------------------------------------ Cropping a portrait into a 450px circle is the most template-looking thing on the page: it throws away the composition of the photograph, and it is the default every generated site reaches for. These are printed plates instead — true aspect ratio, and a gilt rule offset behind them, the way a mounted photograph sits on a book page. */ .content-image-wrapper:not(.is-cover):not(.contact-form-wrapper):not(.content-slideshow-wrapper) { border-radius: 2px; width: min(100%, 25rem); /* No fixed ratio: the plate takes its row's height, bounded so a short section cannot leave a letterbox and a long one cannot run away. */ height: auto; align-self: stretch; min-height: 21rem; max-height: 48rem; padding: 0; background: var(--bg-white); box-shadow: var(--shadow-plate); overflow: hidden; transition: box-shadow 0.6s var(--ease-out); } .content-right { position: relative; display: flex; justify-content: center; align-items: stretch; } /* A cover keeps its own proportions and centres; only photographic plates stretch to the row. */ .content-right:has(.is-cover) { align-items: center; } /* The offset frame line, drawn on the column so it can sit behind the plate without being clipped by its overflow. */ .content-right::before { content: ''; position: absolute; top: 1.75rem; bottom: -1.75rem; left: max(1.75rem, calc(50% - 12.5rem + 1.75rem)); width: min(100%, 25rem); border: 1px solid var(--rule-gilt); border-radius: 2px; pointer-events: none; z-index: 0; opacity: 0.75; } .content-section.is-reversed .content-right::before { left: auto; right: max(1.75rem, calc(50% - 12.5rem + 1.75rem)); } /* The frame is sized for the 27rem photographic plate. Anything else in that column — a book cover, a slideshow, the contact form — has its own dimensions, and the frame would just be a stray gilt rectangle beside it. */ .content-right:has(.is-cover)::before, .content-right:has(.content-slideshow-wrapper)::before, .content-right:has(.contact-form-wrapper)::before { display: none; } .content-image-wrapper { position: relative; z-index: 1; } /* Two independent motions share this transform: refined.js writes --plate-shift for the scroll parallax, hover writes --plate-scale. Composing them through custom properties keeps either one from clobbering the other. */ /* Absolutely positioned so the photograph contributes no intrinsic height: without this the wrapper is sized by the image's own aspect ratio and the stretch never takes effect. */ .content-image-wrapper:not(.is-cover):not(.contact-form-wrapper):not(.content-slideshow-wrapper) .content-image { position: absolute; inset: 0; } .content-image, .content-image.is-portrait { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transform: translate3d(0, var(--plate-shift, 0px), 0) scale(var(--plate-scale, 1.04)); transition: transform 1.2s var(--ease-out); /* Now that the crop is driven by the row height rather than a fixed ratio, a portrait can be cut squarer than its source. Bias the window upward, where faces sit — the same reason .contact-avatar uses center 12%. */ object-position: center 28%; } .content-image-wrapper:hover { box-shadow: var(--shadow-lift); transform: none; } .content-image-wrapper:hover .content-image { --plate-scale: 1.08; } /* Book and journal covers keep their own proportions — a cover cropped to 4:5 is a cover with its title cut off. */ .content-image-wrapper.is-cover { aspect-ratio: auto; background: transparent; box-shadow: none; overflow: visible; /* A 731x1400 cover at 22rem stands 651px tall beside 410px of copy. Trimmed so the row is closer to balanced while the cover stays the subject. */ width: min(100%, 19rem); /* The stretch rule above now excludes .is-cover outright. It has to: a `:not(.a):not(.b)` chain carries the specificity of both classes, so it outranked this block and the cover kept stretching however this block was written. */ align-self: center; height: auto; min-height: 0; max-height: none; } .content-image-wrapper.is-cover .content-image, .content-image-wrapper.is-cover .content-image.is-portrait { height: auto; object-fit: contain; box-shadow: var(--shadow-lift); border-radius: 2px; /* A cover is not a cropped plate: no bleed scale, no parallax drift. */ transform: none; } .content-image-wrapper.is-cover:hover .content-image { --plate-scale: 1; } /* --------------------------------------------------------------------------- 8. Buttons ------------------------------------------------------------------------ Uppercase, letterspaced, glow-on-hover buttons are the tell of a template. These are quieter: a solid crimson block that deepens and lifts a hair. */ .btn-hero, .btn-content, .btn-form-submit, .btn-purchase, .btn-book-primary, .btn-book-secondary { font-family: var(--font-ui); font-size: var(--step-small); font-weight: 500; text-transform: none; letter-spacing: 0.01em; border-radius: 2px; padding: 0.95rem 2rem; transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), transform 0.35s var(--ease-out); } .btn-hero:hover, .btn-content:hover, .btn-form-submit:hover, .btn-book-primary:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(var(--accent-rgb), 0.75); } /* The book page's own header, set to the same system as everything else: the badge as a gilt-ruled eyebrow rather than a crimson pill, and the subtitle as the italic book-jacket line the homepage already uses. */ .book-badge { display: inline-flex; align-items: center; gap: 0.75rem; background: transparent; color: var(--gilt-deep); font-family: var(--font-ui); font-size: var(--step-micro); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; border-radius: 0; padding: 0; box-shadow: none; margin-bottom: var(--space-s); } .book-badge::before { content: ''; width: 2.25rem; height: 1px; background: var(--rule-gilt); } body.dark-mode .book-badge { color: var(--gilt); background: transparent; } .book-title { font-size: var(--step-title); } .book-subtitle { font-family: var(--font-prose); font-size: var(--step-lead); font-style: italic; font-weight: 400; letter-spacing: 0.005em; line-height: 1.35; color: var(--accent); margin-bottom: var(--space-s); } .book-description { font-family: var(--font-prose); font-size: var(--step-body); line-height: 1.72; color: var(--text-medium); max-width: var(--measure); text-wrap: pretty; } .book-actions-label { font-family: var(--font-ui); font-size: var(--step-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-light); margin-bottom: var(--space-xs); } .btn-content { margin-left: 0; /* stray indent in the base stylesheet */ margin-top: var(--space-s); } /* Buttons no longer spawn a ripple; the press state is the feedback. */ .btn-hero:active, .btn-content:active, .btn-form-submit:active { transform: translateY(0); box-shadow: none; } /* Secondary actions read as editorial links, not as a second competing block. */ .memorial-pullquote-link a { font-family: var(--font-ui); font-size: var(--step-small); letter-spacing: 0.02em; border-bottom: 1px solid var(--rule-gilt); padding-bottom: 2px; text-decoration: none; transition: border-color 0.35s var(--ease-out), color 0.35s var(--ease-out); } .memorial-pullquote-link a:hover { border-bottom-color: var(--accent); } /* --------------------------------------------------------------------------- 9. Cards ------------------------------------------------------------------------ */ .book-feature-card, .question-card { background: transparent; border: 0; border-top: 2px solid var(--rule-gilt); border-radius: 0; box-shadow: none; padding: var(--space-s) 0 0; transition: border-color 0.4s var(--ease-out); } .book-feature-card:hover, .question-card:hover { box-shadow: none; transform: none; border-top-color: var(--accent); } .book-questions-grid { gap: clamp(2rem, 4vw, 3.5rem); } /* The base rule centred these both horizontally and vertically, so three fragments of different lengths each floated at a different height under their own rule. Hung from the rule and ranged left, they line up. */ .question-card { justify-content: flex-start; text-align: left; } .question-card .feature-text { font-family: var(--font-prose); font-size: var(--step-lead); font-style: italic; line-height: 1.55; color: var(--text-dark); /* styles.css centres this paragraph directly, which outranked the ranging set on the card — so three fragments of different lengths each centred under a rule that starts hard left. */ text-align: left; } .feature-title { font-family: var(--font-display); font-optical-sizing: auto; font-size: var(--step-h3); font-weight: 500; letter-spacing: -0.01em; } /* --------------------------------------------------------------------------- 10. Pull-quote ------------------------------------------------------------------------ */ .memorial-pullquote-section { padding-block: var(--space-xl); } .memorial-pullquote p { font-family: var(--font-display); font-optical-sizing: auto; font-variation-settings: 'WONK' 1, 'opsz' 96; font-size: clamp(1.5rem, 0.95rem + 2.1vw, 2.5rem); font-weight: 300; font-style: italic; line-height: 1.28; letter-spacing: -0.015em; color: var(--text-dark); max-width: 24ch; margin-inline: auto; text-wrap: balance; } .memorial-attribution { font-family: var(--font-ui); font-size: var(--step-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-light); line-height: 1.9; margin-top: var(--space-s); } /* --------------------------------------------------------------------------- 11. Ornament bar ------------------------------------------------------------------------ Was: a full-width glowing crimson line carrying three haloed medallions — two identical spiral glyphs and a heart — belonging to no other element on the site. Now: a hairline, a single small gilt lozenge, and space. */ .ornament-bar-separator { padding-block: var(--space-xl); } .ornament-bar-decorations { height: auto; margin-bottom: var(--space-m); padding: 0; max-width: 1180px; justify-content: center; gap: 1.25rem; } .ornament-bar-decorations::before, .ornament-bar-decorations::after { content: ''; height: 1px; flex: 1 1 auto; max-width: 16rem; background: linear-gradient(90deg, transparent, var(--rule-gilt)); } .ornament-bar-decorations::after { background: linear-gradient(90deg, var(--rule-gilt), transparent); } .ornament-mark { flex: none; width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid var(--gilt-deep); background: transparent; } body.dark-mode .ornament-mark { border-color: var(--gilt); } .ornament-bar-title { font-size: var(--step-title); font-weight: 400; letter-spacing: -0.018em; text-shadow: none; max-width: 18ch; margin-inline: auto; } /* --------------------------------------------------------------------------- 12. Hero ------------------------------------------------------------------------ */ .hero-section { padding-block: var(--space-xl) var(--space-l); } .hero-content-box, .hero-content-box-book { border: 0; background: transparent; box-shadow: none; backdrop-filter: none; padding: 0; } /* The cover is the reason anyone is here, so it gets real estate: a wider column than the text, and a size that scales with the viewport instead of sitting at a fixed 280px on a 2400px screen. */ .hero-content, .hero-section-book .hero-content-book { max-width: 1180px; } .hero-section-book .hero-content-book { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5.5rem); padding: 0; } .hero-book-cover { width: clamp(16rem, 24vw, 23rem); max-width: 100%; } /* styles.css pins this to 38px at a higher specificity than a bare .hero-title, which held the title down to subtitle size on wide screens. */ .hero-content-box-book .hero-title { font-size: var(--step-display); margin-bottom: var(--space-s); } .hero-content-box-book .hero-description { margin-bottom: var(--space-m); } /* The old hero had three animated "shine" blobs drifting behind it. */ .hero-shine-effect { display: none; } /* The hero copy used to lift 5px and cast a shadow when the pointer crossed it. There is no card there any more, and a block of text is not a control. */ .hero-content-box:hover { transform: none; box-shadow: none; } .hero-book-cover-wrapper { perspective: 1200px; } /* refined.js sets --tilt-x/--tilt-y from the pointer. The cover is the one object on the page worth making physical. */ .hero-book-cover { border-radius: 2px; box-shadow: var(--shadow-lift); transform: rotateY(var(--tilt-y, 0deg)) rotateX(var(--tilt-x, 0deg)); transform-style: preserve-3d; transition: transform 0.8s var(--ease-out), box-shadow 0.6s var(--ease-out); } .hero-new-book-badge { font-family: var(--font-ui); font-size: var(--step-micro); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; border-radius: 2px; } .hero-newsletter { border-top: var(--hairline); padding-top: var(--space-m); margin-top: var(--space-m); max-width: 34rem; } .hero-newsletter-label { font-family: var(--font-prose); font-size: var(--step-small); font-weight: 400; line-height: 1.6; color: var(--text-medium); } /* --------------------------------------------------------------------------- 13. Dark theme corrections ------------------------------------------------------------------------ The dark stylesheet predates this layer and still wraps things in panels the light design no longer has. These are the two places where it disagrees. */ /* A bordered card around the hero copy and around every .content-left. On a page that has stopped using cards, it reads as a stray box — and its padding pushed the hero title out past its own edge. */ body.dark-mode .hero-content-box, body.dark-mode .hero-content-box-book, body.dark-mode .content-left { background: transparent !important; border: 0 !important; padding: 0; } /* Dark mode re-points --accent at a light rose (#E4736A) so links stay legible on near-black. That makes it a *light* colour, and the near-white label text on it falls to roughly 2.4:1. The ink of the page reads cleanly on it. `!important` is needed because `body.dark-mode section.hero-section *` in styles.css forces `color: inherit` onto everything inside the hero. */ body.dark-mode .btn-hero, body.dark-mode .btn-hero-primary, body.dark-mode .btn-content, body.dark-mode .btn-form-submit, body.dark-mode .btn-purchase, body.dark-mode .btn-hero:hover, body.dark-mode .btn-content:hover, body.dark-mode .btn-form-submit:hover, body.dark-mode .hero-new-book-badge { color: #16110F !important; } body.dark-mode .btn-hero-secondary { color: var(--accent) !important; } /* --------------------------------------------------------------------------- 14. Forms ------------------------------------------------------------------------ */ input, textarea, select { font-family: var(--font-ui); font-size: var(--step-small); } .hero-newsletter-input, .form-input, .form-textarea { border: var(--hairline); border-radius: 2px; background: var(--bg-white); padding: 0.85rem 1rem; transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); } .hero-newsletter-input:focus, .form-input:focus, .form-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12); } .form-label { font-family: var(--font-ui); font-size: var(--step-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-light); } /* The contact form is the one panel the site keeps — it is a distinct place to do something, not decoration. Squared off and hairlined to match. */ .content-image-wrapper.contact-form-wrapper { border-radius: 2px !important; border: var(--hairline); background: var(--bg-white) !important; box-shadow: var(--shadow-plate); } .contact-form-title { font-family: var(--font-display); font-optical-sizing: auto; font-size: var(--step-h3); font-weight: 500; letter-spacing: -0.01em; } /* A visible focus ring for keyboard users, on every interactive element. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* --------------------------------------------------------------------------- 15. Footer ------------------------------------------------------------------------ */ .site-footer { border-top: var(--hairline); padding-block: var(--space-xl) var(--space-m); } /* The mount for those medallions was a 20px-radius panel under a 60px drop shadow — the pillowed card the rest of the site has moved away from, and it was doing the marks no favours. Squared to the same 2px and hairline as every other surface. */ .footer-container { border-radius: 2px; border: var(--hairline); box-shadow: var(--shadow-plate); /* Was 4rem 3rem inside a section that already pays --space-xl above it. */ padding: var(--space-l) var(--space-m); } /* 3rem between four short columns left them reading as four separate cards rather than one row. */ .footer-columns { gap: clamp(1.5rem, 3vw, 2.5rem); } .footer-contact { margin-top: var(--space-l); } /* Terica's portrait, mounted rather than ringed: a hairline gilt rule standing off the image, the way a plate is framed, instead of a 2px crimson border sitting hard against a 32px crop. */ .contact-avatar { width: 40px; height: 40px; border: 0; outline: 1px solid var(--rule-gilt); outline-offset: 3px; margin-right: 0.35rem; } .footer-column-title { font-family: var(--font-display); font-optical-sizing: auto; font-size: var(--step-h3); font-weight: 500; letter-spacing: -0.01em; } .footer-text { font-size: var(--step-small); line-height: 1.65; } /* Footer medallions. The four marks were stock 24-grid, stroke-2 UI icons — a pencil, a book, a heart, a microphone — scaled up to 60px, which rendered their strokes at an effective 5px. That weight, at that size, is what made them look drawn by a toolbar rather than engraved. They are redrawn on a 48 grid at stroke 1.3, so at 44px they read as true hairlines, each sitting inside a thin ruled circle like a bookplate device. Gilt rather than crimson: this is the same ornament vocabulary as the eyebrow rules and the ornament-bar lozenge, and an ornament in the footer should not shout over the type. */ .footer-icon { width: 44px; height: 44px; margin: 0 auto var(--space-s); color: var(--gilt-deep); animation: none !important; /* the base script had these bobbing */ transition: color 0.4s var(--ease-out); } /* The base rule span-and-tilted these on hover — scale(1.1) rotate(5deg). An engraving does not wobble; only the one that is a link responds, by warming to the accent. */ .footer-icon:hover { transform: none; } .footer-schedule-link:hover .footer-icon { color: var(--accent); } body.dark-mode .footer-icon { color: var(--gilt) !important; } .footer-bottom { font-family: var(--font-ui); font-size: var(--step-micro); letter-spacing: 0.04em; border-top: var(--hairline); padding-top: var(--space-s); } /* --------------------------------------------------------------------------- 16. Scroll choreography ------------------------------------------------------------------------ refined.js marks elements with [data-reveal] and sets --reveal-index for the stagger. The transform is small and the easing long: the page should settle, not slide in. */ [data-reveal] { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: calc(var(--reveal-index, 0) * 90ms); } [data-reveal].is-revealed { opacity: 1; transform: none; } /* A revealed title draws its own gilt rule. */ [data-reveal-rule]::after { content: ''; display: block; width: 0; height: 1px; margin-top: var(--space-s); background: var(--rule-gilt); transition: width 1.1s var(--ease-out) 0.25s; } [data-reveal-rule].is-revealed::after { width: 4.5rem; } .section-title[data-reveal-rule]::after { margin-inline: auto; } /* Cross-document view transitions between pages, where supported. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: 0.22s var(--ease-io) both vt-fade-out; } ::view-transition-new(root) { animation: 0.38s var(--ease-out) both vt-fade-in; } @keyframes vt-fade-out { to { opacity: 0; } } @keyframes vt-fade-in { from { opacity: 0; transform: translateY(8px); } } /* The header should not cross-fade with the page body under it. */ .site-header { view-transition-name: site-header; } @media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal].is-revealed { opacity: 1; transform: none; transition: none; } [data-reveal-rule]::after { width: 4.5rem; transition: none; } .hero-book-cover { transform: none; } .reading-progress { animation: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* --------------------------------------------------------------------------- 17. Small screens ------------------------------------------------------------------------ */ @media (max-width: 900px) { .content-container { grid-template-columns: 1fr; gap: var(--space-l); } /* On one column the image always follows its text, whatever the alternation rule said, and the offset frame is dropped — there is no room for it. */ .content-section.is-reversed .content-container > .content-left, .content-section.is-reversed .content-container > .content-right { order: initial; } .content-right::before { display: none; } /* Stacked, there is no row to stretch to: the photograph is absolutely positioned so the plate has no intrinsic height, and without a ratio it would collapse to its min-height and letterbox. Give it its shape back. */ .content-image-wrapper:not(.is-cover):not(.contact-form-wrapper):not(.content-slideshow-wrapper) { aspect-ratio: 4 / 4.6; align-self: auto; height: auto; min-height: 0; max-height: none; } .content-image-wrapper:not(.contact-form-wrapper):not(.content-slideshow-wrapper) { width: min(100%, 22rem); } .content-text, .hero-description, .hero-positioning { max-width: none; } .content-section { padding-block: var(--space-l); } } /* This layer loads after styles.css, so its unconditional rules outrank the media queries in that file. Anything overridden above that styles.css also sets for phones has to be restated here, or the phone gets the desktop rule. The hero is the one that matters: without this it stays two columns. */ @media (max-width: 768px) { .hero-section-book .hero-content-book { grid-template-columns: 1fr; gap: var(--space-l); text-align: center; } .hero-book-cover { width: min(100%, 15rem); } .hero-content-box-book .hero-title, .hero-content-box-book .hero-description, .hero-content-box-book .hero-positioning, .hero-newsletter { max-width: none; margin-inline: auto; } .btn-hero-newsletter { padding: 0.8rem 1.25rem; } /* styles.css leads every stacked section with its photograph at this width (.content-right order:-1). The `order: initial` reset above — which is there to undo this layer's desktop alternation — was cancelling that for reversed sections only, so one section in three led with its text while the rest led with the image. Restate the base order so they all agree. */ .content-section.is-reversed .content-container > .content-right { order: -1; } .content-section.is-reversed .content-container > .content-left { order: 1; } /* The drawer menu wants a tap target, not the desktop's 15px, and its rows already separate themselves with a border. */ .header-nav .nav-item { font-size: 1.0625rem; } .header-nav .nav-item::after { display: none; } } @media (max-width: 600px) { :root { --measure: 100%; } .eyebrow::before, .eyebrow-center::after { width: 1.5rem; } .ornament-bar-decorations::before, .ornament-bar-decorations::after { max-width: 5rem; } } /* Print: this is a book's home. It should print like one. */ @media print { .site-header, .book-banner, .reading-progress, .hero-shine-effect { display: none; } [data-reveal] { opacity: 1; transform: none; } }