:root{ --void: #160c09; --crimson-deep: #5c1410; --blood-orange: #c2401b; --ember: #e8631f; --sun-gold: #f3a431; --bone: #f2e8da; --bone-dim: #d8c9b6; --panel-line: rgba(243,164,49,0.55); --panel-line-soft: rgba(243,164,49,0.28); --panel-fill: rgba(22,12,9,0.46); --panel-fill-hover: rgba(243,164,49,0.12); --font-display: "Cinzel", "Trajan Pro", Georgia, serif; --font-body: "Jost", "Avenir Next", Helvetica, Arial, sans-serif; } *{ box-sizing:border-box; } html,body{ margin:0; padding:0; } body{ font-family: var(--font-body); background: var(--void); color: var(--bone); } /* ============ HERO / BACKGROUND (placeholder for existing full-screen art) ============ */ .hero{ position:relative; width:100%; min-height:100vh; overflow:hidden; background-color: var(--void); /* background-image is set per-page via an inline style on the
element itself, since each page has its own hero graphic — everything else here (size/position/repeat) is shared. background-size:auto renders the graphic at its true natural dimensions always — never scaled up or down — so its proportions never distort and its height never shrinks on narrow screens. Centered horizontally; any overflow left/right is simply clipped by this element's own overflow:hidden. */ background-size: auto; background-position: top center; background-repeat: no-repeat; } /* ============ DRAGONFLIES: real site system ============ #box / #contentContainer / .thing elements are positioned/animated by js/animation.js (size, opacity, position, transition-duration are all set inline by the script), and given their actual dragonfly appearance by mosquito.css (linked in ). Only the wrapper needs positioning here so it sits correctly inside the hero, above the background image and below the nav bar. */ #box{ position:absolute; inset:0; overflow:hidden; z-index:20; pointer-events:none; } #contentContainer{ position:relative; width:100%; height:100%; } /* ============ NAV — the imported treatment ============ */ .site-nav{ position:absolute; top:0; left:0; right:0; z-index:50; max-width:1450px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px clamp(20px, 4vw, 56px); } .brand{ display:flex; align-items:center; gap:14px; text-decoration:none; } .brand-mark{ width:54px; height:54px; border-radius:50%; border:2px solid var(--sun-gold); overflow:hidden; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow: 0 0 0 4px rgba(243,164,49,0.12), 0 4px 14px rgba(0,0,0,0.4); } .brand-mark img{ width:100%; height:100%; object-fit:cover; display:block; } .brand-text{ display:flex; flex-direction:column; line-height:1.1; } .brand-text .name{ font-family:"Jost", "Avenir Next", Helvetica, Arial, sans-serif; font-feature-settings: "ss01" 1; font-size:15px; letter-spacing:0.12em; color: var(--bone); font-weight:700; white-space:nowrap; } .brand-text .role{ font-family:"Jost", "Avenir Next", Helvetica, Arial, sans-serif; font-size:10px; letter-spacing:0.2em; color: #f5f0e8; font-weight:600; margin-top:3px; text-transform:uppercase; } .nav-links{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .nav-btn{ display:flex; align-items:center; gap:9px; padding:10px 16px; border:1px solid var(--panel-line); border-radius:8px; background: var(--panel-fill); backdrop-filter: blur(3px); color: var(--bone); text-decoration:none; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; font-weight:500; white-space:nowrap; transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease; } .nav-btn svg{ width:16px; height:16px; flex-shrink:0; stroke: var(--sun-gold); } .nav-btn:hover{ background: var(--panel-fill-hover); border-color: var(--sun-gold); transform: translateY(-1px); } .nav-btn.is-primary{ border-color: var(--sun-gold); background: linear-gradient(180deg, rgba(243,164,49,0.22), rgba(243,164,49,0.08)); } /* dropdown for AUTHOR group, simplified vs original 3-deep menu */ .nav-group{ position:relative; } .nav-group .nav-btn{ cursor:pointer; } .nav-group .chev{ width:10px; height:10px; margin-left:2px; stroke:var(--bone-dim); } .nav-dropdown{ position:absolute; top:calc(100% + 8px); left:0; min-width:180px; border:1px solid var(--panel-line-soft); border-radius:8px; background: rgba(20,11,8,0.92); backdrop-filter: blur(6px); padding:6px; opacity:0; visibility:hidden; transform: translateY(-4px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; } .nav-group:hover .nav-dropdown, .nav-group:focus-within .nav-dropdown{ opacity:1; visibility:visible; transform:translateY(0); } .nav-dropdown a{ display:block; padding:9px 12px; border-radius:6px; color: var(--bone-dim); text-decoration:none; font-size:12px; letter-spacing:0.04em; text-transform:none; } .nav-dropdown a:hover{ background: var(--panel-fill-hover); color: var(--bone); } /* mobile nav toggle */ .nav-toggle{ display:none; position:relative; z-index:60; width:46px; height:46px; border:1px solid var(--panel-line); border-radius:8px; background: var(--panel-fill); align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; } .nav-toggle svg{ width:20px; height:20px; stroke:var(--sun-gold); position:absolute; transition: opacity 0.15s ease, transform 0.15s ease; } .nav-toggle .icon-close{ opacity:0; transform:rotate(-45deg); } .nav-toggle .icon-open{ opacity:1; transform:rotate(0deg); } .nav-toggle.is-open .icon-open{ opacity:0; transform:rotate(45deg); } .nav-toggle.is-open .icon-close{ opacity:1; transform:rotate(0deg); } .nav-backdrop{ display:none; position:fixed; inset:0; background: rgba(0,0,0,0.5); opacity:0; visibility:hidden; transition: opacity 0.25s ease, visibility 0.25s ease; z-index:45; } .nav-backdrop.is-open{ opacity:1; visibility:visible; } @media (max-width: 880px){ .nav-backdrop{ display:block; } .nav-links{ position:fixed; top:0; right:0; height:100vh; width:min(78vw, 320px); flex-direction:column; align-items:stretch; justify-content:flex-start; gap:10px; padding:90px 20px 24px; background: rgba(15,8,6,0.97); border-left:1px solid var(--panel-line-soft); transform: translateX(100%); transition: transform 0.3s ease; z-index:50; overflow-y:auto; } .nav-links.is-open{ transform: translateX(0); } .nav-btn{ width:100%; } .nav-dropdown{ position:static; opacity:1; visibility:visible; transform:none; margin-top:4px; display:none; background:rgba(0,0,0,0.2); } .nav-group.is-open .nav-dropdown{ display:block; } .nav-toggle{ display:flex; } .social{ justify-content:center; margin:10px 0 0; } } /* ============ HERO CONTENT (book cover stays large + central) ============ */ .hero-content{ position:relative; z-index:10; display:flex; align-items:center; gap:clamp(20px, 5vw, 70px); max-width:1200px; margin:0 auto; padding:170px 32px 120px; flex-wrap:wrap; } .cover-wrap{ flex-shrink:0; filter: drop-shadow(0 30px 50px rgba(0,0,0,0.55)); } .cover-wrap svg{ width:260px; height:auto; display:block; } .hero-copy{ max-width:520px; } /* used on pages with no book cover beside the text (e.g. Author bio) — widens the column since it's no longer sharing space with an image, capped well short of full-bleed so long-form prose stays readable */ .hero-copy--full{ max-width:1000px; } /* On mobile, the portrait-style hero images (Author/Bio/Ask the Author/Works) have detailed content in their upper portion. The eyebrow + H1 heading now stay in their natural upper position (no longer pushed down as a whole block); instead, only the body text (.page-copy) gets pushed down via padding-top, so the heading reads normally near the top while the paragraph content starts much further down, closer to the bottom of a typical phone screen where the busy part of the image has usually scrolled past. */ @media (max-width: 880px){ .page-copy{ padding-top:470px; } /* Swap to a dedicated mobile-cropped image on the four portrait pages (Author/Bio/Ask the Author/Works) below this breakpoint — gives precise control over framing on narrow screens rather than fighting CSS position math against a desktop-sized image. !important is required here since background-image is normally set inline per-page, and inline styles otherwise always beat a stylesheet rule regardless of specificity. */ .hero--portrait{ background-image: url('https://davidalanwoods.com/gifs/mantidbckmob.jpg') !important; } } .hero-copy .eyebrow{ font-family:"Jost", "Avenir Next", Helvetica, Arial, sans-serif; font-size:14px; letter-spacing:0.18em; color:var(--bone-dim); margin:0 0 6px; } .hero-copy h1{ font-family:"Jost", "Avenir Next", Helvetica, Arial, sans-serif; font-feature-settings: "ss01" 1; font-weight:500; font-size:clamp(40px, 6vw, 64px); margin:0 0 18px; letter-spacing:0.04em; color:var(--bone); line-height:1; } .hero-cta{ display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border:1px solid var(--sun-gold); border-radius:8px; background:linear-gradient(180deg, rgba(243,164,49,0.25), rgba(243,164,49,0.08)); color:var(--bone); font-family:"Jost", "Avenir Next", Helvetica, Arial, sans-serif; text-decoration:none; font-size:13px; letter-spacing:0.12em; text-transform:uppercase; cursor:pointer; } .hero-cta .cta-chev{ width:14px; height:14px; transition: transform 0.3s ease; } .hero-cta[aria-expanded="true"] .cta-chev{ transform: rotate(180deg); } .hero-cta[aria-expanded="true"] .cta-label::after{ content:""; } /* ============ SAMPLE DOWNLOAD / READ IN BROWSER ============ */ .sample-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:22px; padding-top:22px; border-top:1px solid rgba(243,164,49,0.25); } .sample-btn{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-family:"Jost", "Avenir Next", Helvetica, Arial, sans-serif; font-size:13px; letter-spacing:0.08em; } .sample-btn svg{ width:18px; height:18px; flex-shrink:0; } .sample-btn--primary{ padding:13px 22px; border:1px solid var(--sun-gold); border-radius:8px; background:linear-gradient(180deg, rgba(243,164,49,0.2), rgba(243,164,49,0.06)); color:var(--bone); text-transform:uppercase; transition: background 0.2s ease, transform 0.15s ease; } .sample-btn--primary:hover{ background:linear-gradient(180deg, rgba(243,164,49,0.3), rgba(243,164,49,0.12)); transform: translateY(-1px); } .sample-btn--primary svg{ stroke:var(--sun-gold); } .sample-btn--ghost{ padding:8px 4px; color: var(--bone-dim); border-bottom:1px solid transparent; /* "Read in Browser" only, +15% over the shared 13px/18px base — Download Sample PDF (.sample-btn--primary) stays at its own size. */ font-size:15px; } .sample-btn--ghost svg{ stroke:var(--bone-dim); width:21px; height:21px; } .sample-btn--ghost:hover{ color: var(--bone); border-bottom-color: rgba(243,164,49,0.5); } .sample-btn--ghost:hover svg{ stroke:var(--sun-gold); } @media (max-width: 480px){ .sample-actions{ flex-direction:column; align-items:flex-start; } } /* ============ BUY ON AMAZON ============ Keeps Amazon's own recognisable orange/black colours rather than reskinning to the BRID gold palette — a buy button benefits from looking unmistakably like "the real Amazon button" to a buyer. */ .buy-amazon{ margin-top:22px; padding-top:22px; border-top:1px solid rgba(243,164,49,0.25); } .amazon-heading{ margin:0 0 12px; font-family:"Jost", "Avenir Next", Helvetica, Arial, sans-serif; font-feature-settings: "ss01" 1; font-size:15px; letter-spacing:0.12em; color: var(--bone); font-weight:700; text-transform:uppercase; } .amazon-buttons{ display:flex; flex-direction:column; gap:10px; } .amazon-button{ display:inline-flex; align-items:center; background-color:#ff9900; color:#000; font-weight:bold; font-size:1em; font-family:"Jost", "Avenir Next", Helvetica, Arial, sans-serif; padding:10px 18px; border-radius:6px; text-decoration:none; box-shadow:2px 2px 6px rgba(0,0,0,0.2); transition: background-color 0.2s ease, transform 0.15s ease; } .amazon-button:hover{ background-color:#e68a00; transform: translateY(-1px); } .amazon-button img{ height:22px; margin-right:10px; flex-shrink:0; } .dock-label{ margin:0 0 10px; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color: var(--bone-dim); font-family:"Jost", "Avenir Next", Helvetica, Arial, sans-serif; } /* ============ FLOATING SUBSCRIBE WIDGET ============ Independent of the share bar. Floats top-right on large screens, drops to a normal static block on mobile (same behaviour as the original standalone sub-widget), restyled to match the BRID palette. */ .subscribe-widget{ position:fixed; top:130px; right:18px; z-index:55; width:240px; font-family:"Jost", "Avenir Next", Helvetica, Arial, sans-serif; border:1px solid var(--panel-line); border-radius:10px; overflow:hidden; background: rgba(20,11,8,0.88); backdrop-filter: blur(6px); box-shadow: 0 12px 30px rgba(0,0,0,0.4); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease; } .subscribe-widget.is-hidden{ opacity:0; visibility:hidden; transform:translateY(-10px); pointer-events:none; } .dock-panel{ padding:16px 18px; } .dock-title{ margin:0 0 4px; font-size:20px; font-weight:700; color: var(--bone); } .dock-subtitle{ margin:0 0 14px; font-size:15px; color: var(--bone-dim); } .dock-form{ display:flex; flex-direction:column; gap:8px; } .dock-input{ width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid var(--panel-line-soft); border-radius:6px; background: rgba(255,255,255,0.05); color: var(--bone); font-family:"Jost", "Avenir Next", Helvetica, Arial, sans-serif; font-size:13px; } .dock-input::placeholder{ color: var(--bone-dim); opacity:0.7; } .dock-input:focus{ outline:none; border-color: var(--sun-gold); background: rgba(255,255,255,0.08); } .dock-submit{ width:100%; padding:11px; border:1px solid var(--sun-gold); border-radius:6px; background:linear-gradient(180deg, rgba(243,164,49,0.25), rgba(243,164,49,0.08)); color:var(--bone); font-family:"Jost", "Avenir Next", Helvetica, Arial, sans-serif; font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; transition: background 0.2s ease; } .dock-submit:hover{ background:linear-gradient(180deg, rgba(243,164,49,0.35), rgba(243,164,49,0.14)); } @media (max-width: 1100px){ /* Below this width there's no room to float the subscribe widget beside the hero copy without overlapping it. Rather than dropping it into the page as a second static block (which duplicated the same subscribe form that now also lives in the footer), it's simply hidden here — mobile/tablet visitors get one subscribe form, in the footer, not two. */ .subscribe-widget{ display:none; } /* the hero's large bottom padding exists to keep copy clear of the photo's bottom edge on desktop; with the widget no longer stacking underneath, drop the padding to match other mobile spacing rather than leaving a large empty gap */ .hero-content{ padding-bottom:32px; } } /* ============ REVEAL COPY ============ David's serencontrol block sits inside here untouched. We never select or style anything by id/class he writes — only by structural position (first paragraph vs everything after it), so this keeps working no matter how many paragraphs or headings he adds or removes via admin. */ .reveal-copy{ color:var(--bone); font-size:17px; font-weight:500; line-height:1.7; } .reveal-copy p.paragraph, .reveal-copy h2{ margin:0 0 18px; } .reveal-copy h2{ font-family:"Jost", "Avenir Next", Helvetica, Arial, sans-serif; font-feature-settings: "ss01" 1; font-size:20px; color:var(--bone); letter-spacing:0.03em; margin-top:6px; } .reveal-copy em{ color:var(--bone); font-style:italic; } /* ====== INTRO VIDEO (BRID page) ====== */ .intro-video{ position:relative; margin:0 0 24px; border-radius:10px; overflow:hidden; border:1px solid var(--panel-line-soft); box-shadow: 0 12px 30px rgba(0,0,0,0.35); } .intro-video-el{ display:block; width:100%; aspect-ratio: 16 / 9; object-fit: cover; background:#000; } .intro-video-unmute{ position:absolute; right:12px; bottom:12px; display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border:none; border-radius:8px; background:rgba(0,0,0,0.65); backdrop-filter: blur(2px); color:#fff; font-family:"Jost", "Avenir Next", Helvetica, Arial, sans-serif; font-size:13px; font-weight:600; cursor:pointer; transition: background 0.2s ease; } .intro-video-unmute svg{ width:16px; height:16px; } .intro-video-unmute:hover{ background:rgba(0,0,0,0.8); } /* ====== PAGE COPY ====== Same visual styling as .reveal-copy (colour, size, weight, spacing) but WITHOUT the hide-after-first-paragraph behaviour — for pages that show all of David's serencontrol content immediately, with no Discover More toggle (e.g. the BRID page's "Journey to BRID" essay). */ .page-copy{ color:var(--bone); font-size:17px; font-weight:500; line-height:1.7; } .page-copy p.paragraph, .page-copy h2{ margin:0 0 18px; } .page-copy h2{ font-family:"Jost", "Avenir Next", Helvetica, Arial, sans-serif; font-feature-settings: "ss01" 1; font-size:20px; color:var(--bone); letter-spacing:0.03em; margin-top:6px; } .page-copy em{ color:var(--bone); font-style:italic; } /* hide everything after the first paragraph by default, with a smooth height transition handled by inline max-height set via JS below */ .reveal-copy p.paragraph:first-of-type ~ *{ display:block; max-height:0; overflow:hidden; opacity:0; margin:0; transition: max-height 0.5s ease, opacity 0.4s ease, margin 0.5s ease; } .reveal-copy.is-expanded p.paragraph:first-of-type ~ *{ opacity:1; margin:0 0 18px; /* max-height set inline per-element by JS to each element's real height */ } .note{ position:fixed; bottom:16px; left:16px; z-index:100; background:rgba(0,0,0,0.65); color:#cfcfcf; font-family:var(--font-body); font-size:11px; padding:8px 12px; border-radius:6px; max-width:280px; line-height:1.5; } /* ============ SOCIAL ICONS — restyled to override any colour bleed from social.css (which targets a different, unrelated set of icons elsewhere on the site) and to defeat default browser link styling ============ */ .nav-links .social{ display:flex; align-items:center; gap:8px; margin-left:6px; } .nav-links .social-link{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; color: var(--bone) !important; text-decoration:none !important; background:transparent !important; border:none !important; flex-shrink:0; } .nav-links .social-link:hover, .nav-links .social-link:visited, .nav-links .social-link:active{ color: var(--sun-gold) !important; text-decoration:none !important; } /* belt-and-braces: set the SVG fill directly too, in case social.css (or any other stylesheet) targets the / fill explicitly rather than relying on currentColor inheritance from the link's text colour */ .nav-links .social-link svg, .nav-links .social-link svg path{ fill: var(--bone) !important; } .nav-links .social-link:hover svg, .nav-links .social-link:hover svg path{ fill: var(--sun-gold) !important; } /* Make the icon larger so the 'f' fills the circle */ .social-link--fb svg{ width: 48px; /* was 20px */ height: 48px; /* was 20px */ } /* Optional: slightly larger button for balance (keeps touch target comfy) */ .social-link.social-link--fb{ width: 40px; /* was 38px */ height: 40px; /* was 38px */ } /* Keep small-screen sizing consistent */ @media (max-width:480px){ .social-link.social-link--fb{ width: 38px; height: 38px; } .social-link--fb svg{ width: 46px; height: 46px; } } /* Instagram to match the FB sizing */ .social-link--ig svg{ width: 48px; height: 48px; } .social-link.social-link--ig{ width: 40px; height: 40px; } /* Small screens */ @media (max-width:480px){ .social-link.social-link--ig{ width: 38px; height: 38px; } .social-link--ig svg{ width: 46px; height: 46px; } } /* ============ FOOTER ============ */ .site-footer{ position:relative; background: linear-gradient(180deg, var(--void) 0%, #0d0706 100%); border-top:1px solid rgba(243,164,49,0.25); color: var(--bone-dim); font-family:"Jost", "Avenir Next", Helvetica, Arial, sans-serif; } .footer-inner{ max-width:900px; margin:0 auto; padding:56px 32px 40px; text-align:center; } .footer-brand{ margin:0 0 18px; font-size:20px; font-weight:700; letter-spacing:0.1em; color: var(--bone); line-height:1.4; } .footer-tagline{ display:inline-block; margin-top:4px; font-size:13px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:#f5f0e8; } /* ====== SHARE THIS PAGE (footer) ====== Plain native share links, no third-party script dependency. */ .footer-share{ margin:0 0 28px; } .footer-share-label{ margin:0 0 10px; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color: var(--bone-dim); } .footer-share-links{ display:inline-flex; align-items:center; justify-content:center; gap:10px; } .footer-share-link{ display:flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:50%; border:1px solid var(--panel-line-soft); color: var(--bone-dim) !important; text-decoration:none !important; background:transparent !important; transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } .footer-share-link svg{ width:24px; height:24px; } .footer-share-link svg, .footer-share-link svg path{ fill: var(--bone-dim) !important; } .footer-share-link:hover{ border-color: var(--sun-gold); color: var(--sun-gold) !important; transform: translateY(-1px); } .footer-share-link:hover svg, .footer-share-link:hover svg path{ fill: var(--sun-gold) !important; } /* the email icon uses stroke, not fill — cover both so the hardening works regardless of which icon style is used */ .footer-share-link svg[stroke]{ stroke: var(--bone-dim) !important; } .footer-share-link:hover svg[stroke]{ stroke: var(--sun-gold) !important; } /* Copy Link is a