/* ============================================================================= DragonFire Sites — Foundation Layout ============================================================================= Every new-shape site gets this automatically (via page_assembler injection in ). Result: a site with NO custom CSS still renders cleanly — header, nav, sections, text-image two-column, gallery grid, footer. Site's own /css/style.css loads LAST and is for THEME only: • Colour tokens (--bg, --text, --accent, --surface) • Font family • Brand-specific overrides sections.css (the variant library) loads BETWEEN this and site CSS so variants can be overridden but baseline always works. Theme tokens consumed (with fallbacks so unthemed sites still look ok): --bg page background --bg-alt section alternate backdrop --text primary text --text-dim secondary text --border subtle dividers --accent links + CTAs --accent-hover hover state --max-content max width of content (default 1100px) --section-pad-y vertical section padding (default 64px) ============================================================================= */ /* ─── reset + base ──────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg, #0f1115); color: var(--text, #e6e8eb); font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif); /* AI Style Assistant knobs (all have sensible fallbacks) */ font-size: var(--font-size-base, 1rem); font-weight: var(--font-weight-body, 400); line-height: var(--line-height-body, 1.6); -webkit-font-smoothing: antialiased; min-height: 100vh; /* DO NOT add overflow-x: hidden here — kills position: sticky. */ } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent, #4a9eff); text-decoration: none; transition: color 0.15s; } a:hover { color: var(--accent-hover, #6ab0ff); } h1, h2, h3, h4 { font-family: var(--font-display, var(--font-body, inherit)); font-weight: var(--font-weight-heading, 600); line-height: var(--line-height-heading, 1.2); letter-spacing: var(--letter-spacing-heading, normal); text-transform: var(--text-transform-heading, none); margin: 0 0 0.6em; } /* ─── design tokens used everywhere ─────────────────────────────────────── */ :root { --df-max-content: 1100px; /* Section padding scales with viewport. Tightened further (was clamp(32,5vw,56)) so consecutive sections don't feel like islands. Net visual gap between content blocks ≈ 40–80px which reads as "different section" without "ocean of whitespace". */ --df-section-pad-y: clamp(20px, 3vw, 40px); --df-section-pad-x: clamp(16px, 4vw, 28px); --df-gap: 32px; /* Sticky nav height — used by scroll-margin-top so anchor jumps land the section title below the nav, not behind it. Includes padding. */ --df-nav-height: 56px; } /* Anchor scrolls land below the sticky nav. Use scroll-margin-top on the section ONLY — combining it with html { scroll-padding-top: ... } compounds in some browsers, doubling the offset and creating perceived "massive space" above each section after a nav click. One mechanism, not two. */ .section { scroll-margin-top: var(--df-nav-height); } /* ═══ Site header + nav ═══════════════════════════════════════════════════ Sticky transparent → tinted-on-scroll, brand on left, nav on right. Mobile: brand left, hamburger right, nav drops down when toggled. No JS required for desktop; mobile menu uses :target hack (no script). ═══════════════════════════════════════════════════════════════════════════ */ .site-header { position: sticky; top: 0; z-index: 100; /* color-mix gives translucent backdrop in whatever palette is active. 94% browser support (2026) — safe for production. Fallback solid surface for older browsers. */ background-color: var(--surface, #161922); background-color: color-mix(in srgb, var(--surface, #161922) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border, rgba(127,127,127,0.18)); } .site-header__inner { max-width: var(--df-max-content); margin: 0 auto; padding: 10px clamp(16px, 4vw, 28px); display: flex; align-items: center; gap: 20px; min-height: var(--df-nav-height); } .site-header__brand { display: inline-flex; align-items: center; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text, #e6e8eb); /* Brand row keeps height stable whether logo or text is rendered */ min-height: 36px; } .site-header__logo { display: block; /* Force height — `max-height` lost the cascade fight with the global `img { height: auto; max-width: 100% }` rule on some browsers when natural logo image was larger than the nav container. Explicit height + width:auto guarantees small even for 2000px PNGs. */ height: 32px; max-height: 32px; width: auto; max-width: 200px; object-fit: contain; } .site-header__nav { margin-left: auto; display: flex; gap: 18px; font-size: 0.88rem; } .site-header__nav a { color: var(--text-dim, #8a93a6); padding: 4px 2px; border-bottom: 2px solid transparent; transition: color 0.12s, border-color 0.12s; } .site-header__nav a:hover, .site-header__nav a:focus-visible { color: var(--text, #e6e8eb); border-bottom-color: var(--accent, #4a9eff); text-decoration: none; } /* Hamburger button — three stacked bars. Hidden on desktop; revealed * in the mobile breakpoint below. CSS-only :target hack opens the menu * if JS is blocked; nav.js drives the .is-open class for two-way toggle * + outside-click close. */ .site-header__burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; flex-direction: column; gap: 4px; background: transparent; border: 0; cursor: pointer; border-radius: 8px; transition: background 0.12s; } .site-header__burger:hover, .site-header__burger:focus-visible { background: color-mix(in srgb, var(--text, #fff) 8%, transparent); text-decoration: none; } .site-header__burger span { display: block; width: 22px; height: 2px; background: var(--text, #e6e8eb); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; } /* Animate to ✕ when open — middle bar fades, outer bars cross. */ .site-header.is-open .site-header__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .site-header.is-open .site-header__burger span:nth-child(2) { opacity: 0; } .site-header.is-open .site-header__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Mobile nav — burger top-right, popup drops below header. ------------ */ @media (max-width: 700px) { .site-header__inner { gap: 12px; } .site-header__burger { display: inline-flex; /* show burger only on mobile */ } .site-header__nav { /* Remove margin-left:auto on mobile — burger now owns the right edge. */ margin-left: 0; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: rgba(15, 17, 21, 0.97); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } .site-header__nav a { padding: 14px 24px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.05)); min-height: 44px; } /* Open via :target (JS-less fallback) OR .is-open (nav.js). */ .site-header:target .site-header__nav, .site-header.is-open .site-header__nav { max-height: 100vh; } } /* ═══ Section base ═══════════════════════════════════════════════════════ All sections inherit padding + max-width from .section + .section__inner. Variants (centered/narrow/tinted/card) layer on TOP of these defaults. ═══════════════════════════════════════════════════════════════════════════ */ .section { padding: var(--df-section-pad-y) var(--df-section-pad-x); } .section__inner { max-width: var(--df-max-content); margin: 0 auto; } .section__title { /* Base scale 1.95rem * heading scale (default 1 = no change). User can bump with "make headings bigger" → scale=1.3. */ font-size: calc(clamp(1.5rem, 3vw, 1.95rem) * var(--font-size-heading-scale, 1)); margin-bottom: 0.6em; color: var(--text, #e6e8eb); } /* Optional decorative rule beneath section titles — opt-in via --heading-rule-show=block (AI: "line under headings"). Aligns with the heading naturally (left when heading is left-aligned, centered when .section--centered is on). */ .section__title::after { content: ""; display: var(--heading-rule-show, none); width: var(--heading-rule-width, 56px); height: var(--heading-rule-thickness, 3px); background: var(--heading-rule-color, var(--accent, #4a9eff)); border-radius: 99px; margin-top: 12px; } .section--centered .section__title::after { margin-left: auto; margin-right: auto; } .section__body { color: var(--text, #e6e8eb); font-size: 1.02rem; } .section__body p { margin: 0 0 1em; } .section__body p:last-child { margin-bottom: 0; } .section__body a { text-decoration: underline; text-underline-offset: 3px; } /* Section-level link list (slots.links) ------------------------------- */ .section__links { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 10px; } .section__links li { margin: 0; } .section__links a { display: inline-block; padding: 8px 16px; border: 1px solid var(--border, rgba(255,255,255,0.15)); border-radius: 6px; color: var(--text, #e6e8eb); font-size: 0.92rem; transition: border-color 0.15s, background 0.15s; } .section__links a:hover { border-color: var(--accent, #4a9eff); background: rgba(74, 158, 255, 0.06); text-decoration: none; } /* ═══ text-image — two-column layout ═══════════════════════════════════ Default desktop: grid 2-col, gap 32px, image ~40%, text 60%. image-left: image first in source order → image LEFT image-right (default): image second → image RIGHT image--full: image stretches edge-to-edge above the text Mobile: stacks vertically always (image first or last depending on image_position). ═══════════════════════════════════════════════════════════════════════ */ .section--text-image .section__inner--two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--df-gap); align-items: center; } .section--text-image .section__text { min-width: 0; } .section--text-image .section__image { margin: 0; min-width: 0; } .section--text-image .section__image img { width: 100%; height: auto; border-radius: var(--df-radius, 8px); object-fit: cover; box-shadow: var(--df-card-shadow, none); } /* Position toggles */ .section--image-left .section__inner--two-col { direction: rtl; } .section--image-left .section__inner--two-col > * { direction: ltr; } /* RTL flip puts image first visually without changing source order */ .section--image-right .section__inner--two-col { /* default — no flip */ } /* Full-width image — image stacks above text, edge to edge */ .section--image-full .section__inner--two-col { display: block; } .section--image-full .section__image { margin: 0 calc(-1 * var(--df-section-pad-x)) 32px; } .section--image-full .section__image img { border-radius: 0; width: 100%; max-height: 60vh; object-fit: cover; } /* Mobile — always stack */ @media (max-width: 700px) { .section--text-image .section__inner--two-col { grid-template-columns: 1fr; direction: ltr; } .section--image-left .section__image { order: -1; } .section--image-right .section__image { order: -1; } /* On mobile image goes ON TOP regardless of desktop position — reading order prioritises image-then-text. */ .section--image-full .section__image { margin: 0 calc(-1 * var(--df-section-pad-x)) 24px; } } /* ═══ Header section type — full-bleed hero, centred ═══════════════════ Design borrows from Colin's pre-wizard hero: • Full-viewport (80–100vh) sets the tone before scroll • Centred text (vertical + horizontal) for impact • Diagonal gradient overlay (darker on the left/bottom, fading to transparent top-right) gives text legibility without flattening the image. Looks intentional, not just "dark scrim slapped on". • Big title with letter-tight tracking • CTA pill bottom-centred under subtitle Mobile: still centred, image stays full-bleed, padding loosens. ═══════════════════════════════════════════════════════════════════════════ */ .section--header { position: relative; padding: 0; min-height: 80vh; display: flex; align-items: center; overflow: hidden; color: #fff; } .section--header .section--header__image { position: absolute; inset: 0; z-index: 0; } .section--header .section--header__image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Diagonal gradient — heavier dark in bottom-left, fades toward top-right. Same direction Colin's old hero used (120deg). Keeps the image breathing on one side while guaranteeing text contrast. */ .section--header::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(120deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0) 100%); } .section--header .section--header__inner { position: relative; z-index: 2; max-width: var(--df-max-content); margin: 0 auto; padding: clamp(40px, 8vw, 80px) var(--df-section-pad-x); width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .section--header .section--header__title { font-size: calc(clamp(2.4rem, 7vw, 4.2rem) * var(--font-size-heading-scale, 1)); line-height: var(--line-height-heading, 1.05); letter-spacing: var(--letter-spacing-heading, -0.015em); font-weight: var(--font-weight-heading, 600); text-transform: var(--text-transform-heading, none); margin: 0 0 18px; color: #fff; text-shadow: 0 2px 28px rgba(0,0,0,0.45); max-width: 820px; } .section--header .section--header__subtitle { font-size: clamp(1.05rem, 2vw, 1.35rem); color: rgba(255,255,255,0.92); margin: 0 0 32px; max-width: 640px; line-height: 1.5; text-shadow: 0 1px 14px rgba(0,0,0,0.4); } .section--header .section--header__cta { display: inline-block; padding: 14px 28px; background: var(--accent, #4a9eff); color: #fff; border-radius: 8px; font-weight: 500; font-size: 1rem; box-shadow: 0 6px 22px rgba(0,0,0,0.3); transition: transform 0.12s, background 0.15s, box-shadow 0.15s; } .section--header .section--header__cta:hover { background: var(--accent-hover, #6ab0ff); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.35); text-decoration: none; } /* No image fallback — still renders with diagonal gradient bg */ .section--header:not(:has(.section--header__image)) { background: linear-gradient(135deg, var(--bg-alt, #1a1f2e), var(--bg, #0f1115)); } .section--header:not(:has(.section--header__image))::after { display: none; } /* Mobile — shorter hero, looser padding around text so it doesn't feel squashed against viewport edges */ @media (max-width: 700px) { .section--header { min-height: 70vh; } .section--header::after { /* Vertical-ish gradient on mobile so portrait orientations don't leave text with no contrast in the right-hand area */ background: linear-gradient(160deg, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.15) 100%); } } /* ═══ Gallery — responsive grid ════════════════════════════════════════ */ .section--gallery .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 18px; } .section--gallery .gallery-grid figure { margin: 0; } .section--gallery .gallery-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; display: block; } /* ═══ Footer ═══════════════════════════════════════════════════════════ Themed multi-column grid: brand (logo/name/contact/social) | subscribe form (optional) | contact form (optional). Mobile stacks. Uses palette tokens so light + dark themes both look intentional. ═══════════════════════════════════════════════════════════════════════════ */ .site-footer { background: var(--surface, transparent); border-top: 1px solid var(--border, rgba(127,127,127,0.18)); padding: clamp(32px, 5vw, 48px) var(--df-section-pad-x); color: var(--text-dim, #8a93a6); font-size: 0.92rem; } .site-footer__inner { max-width: var(--df-max-content); margin: 0 auto; } .site-footer p { margin: 0.4em 0; } .site-footer a { color: var(--text-dim, #8a93a6); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.12s, border-color 0.12s; } .site-footer a:hover { color: var(--text, #e6e8eb); border-bottom-color: var(--accent, #4a9eff); } .site-footer__grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 24px; } /* Two- or three-col on desktop depending on which optional columns are present. CSS subgrid not used (browser support); just auto-fit. */ @media (min-width: 720px) { .site-footer__grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; } } .site-footer__brand-col { display: flex; flex-direction: column; gap: 10px; } .site-footer__brand-name { font-weight: 600; font-size: 1.05rem; color: var(--text, #e6e8eb); letter-spacing: 0.06em; text-transform: uppercase; margin: 0; } .site-footer__contact-line { margin: 0; } .site-footer__contact-line a { color: var(--text, #e6e8eb); } /* Social icons row */ .site-footer__social { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 10px; } .site-footer__social-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--text-dim, #8a93a6); border: 1px solid var(--border, rgba(127,127,127,0.18)); border-radius: 50%; transition: color 0.12s, border-color 0.12s, background 0.12s; } .site-footer__social-link:hover { color: var(--accent, #4a9eff); border-color: var(--accent, #4a9eff); background: rgba(127,127,127,0.06); } .site-footer__social-link svg { display: block; } /* Custom links list (Bandcamp, SoundCloud, Shop, Portfolio — labelled URLs from settings.custom1-4_*). Plain text list, no icons. */ .site-footer__custom-links { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.88rem; } .site-footer__custom-links a { color: var(--text-dim, #8a93a6); } .site-footer__custom-links a:hover { color: var(--accent, #4a9eff); } /* Subscribe / contact form columns */ .site-footer__form-col { display: flex; flex-direction: column; gap: 8px; } .site-footer__col-title { font-size: 0.95rem; font-weight: 600; color: var(--text, #e6e8eb); letter-spacing: 0.06em; text-transform: uppercase; margin: 0; } .site-footer__col-sub { margin: 0 0 6px; font-size: 0.88rem; } .site-footer__form { display: flex; flex-direction: column; gap: 8px; } .site-footer__form input, .site-footer__form textarea { width: 100%; background: var(--bg, transparent); color: var(--text, #e6e8eb); border: 1px solid var(--border, rgba(127,127,127,0.25)); border-radius: 6px; padding: 10px 12px; font: inherit; resize: vertical; } .site-footer__form input:focus, .site-footer__form textarea:focus { outline: none; border-color: var(--accent, #4a9eff); } .site-footer__form button { background: var(--accent, #4a9eff); color: #fff; border: none; border-radius: 6px; padding: 11px 18px; font: inherit; font-weight: 500; cursor: pointer; transition: background 0.15s; } .site-footer__form button:hover { background: var(--accent-hover, #6ab0ff); } .site-footer__form-status { font-size: 0.85rem; margin: 4px 0 0; min-height: 1.2em; } .site-footer__form-status.success { color: var(--accent, #4a9eff); } .site-footer__form-status.error { color: #d04646; } .site-footer__copyright { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border, rgba(127,127,127,0.15)); text-align: center; font-size: 0.82rem; opacity: 0.7; } /* ═══ Form elements (contact widget etc.) ══════════════════════════════ */ input, textarea, button, select { font: inherit; color: inherit; } button { cursor: pointer; background: var(--accent, #4a9eff); color: #fff; border: none; border-radius: 6px; padding: 10px 18px; font-weight: 500; transition: background 0.15s; } button:hover { background: var(--accent-hover, #6ab0ff); } /* ═══ Honeypot anti-bot field — hide off-screen ════════════════════════ */ .hp, input[name="hp"] { position: absolute; left: -9999px; opacity: 0; pointer-events: none; } /* ═══ Inserted images:
+ scroll-snap
═══ Emitted by dr-admin's Insert action (media.js → insertSelectedFigure). Single image → centred figure with optional figcaption. 2+ images → horizontal scroll-snap gallery, swipe one at a time. */ .post-figure { margin: 1.6em 0; text-align: center; } .post-figure img { max-width: 100%; height: auto; border-radius: 8px; display: inline-block; } .post-figure figcaption, .post-gallery__slide figcaption { margin-top: 0.5em; font-size: 0.92em; color: var(--text-dim, #8a93a6); font-style: italic; line-height: 1.4; } .post-gallery { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 8px 0 14px; margin: 1.6em -16px; /* let it breach the article gutter slightly */ scrollbar-width: thin; } .post-gallery::-webkit-scrollbar { height: 6px; } .post-gallery::-webkit-scrollbar-thumb { background: var(--border, rgba(127,127,127,0.3)); border-radius: 3px; } .post-gallery__slide { flex: 0 0 88%; scroll-snap-align: center; margin: 0; text-align: center; } .post-gallery__slide img { width: 100%; height: auto; max-height: 480px; object-fit: cover; border-radius: 8px; } @media (min-width: 700px) { .post-gallery { margin-left: 0; margin-right: 0; } .post-gallery__slide { flex: 0 0 60%; } .post-gallery__slide img { max-height: 560px; } }