/* ============================================================================= 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); line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; /* Defensive against rogue elements overflowing on mobile */ overflow-x: hidden; } 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)); line-height: 1.2; margin: 0 0 0.6em; font-weight: 600; } /* ─── design tokens used everywhere ─────────────────────────────────────── */ :root { --df-max-content: 1100px; /* Section padding scales with viewport — tight on mobile, breathable on desktop. Was fixed 64px which felt cavernous on phones + when consecutive sections stacked without a tinted backdrop. */ --df-section-pad-y: clamp(32px, 5vw, 56px); --df-section-pad-x: clamp(16px, 4vw, 28px); --df-gap: 32px; } /* ═══ 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; background: rgba(15, 17, 21, 0.88); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); } .site-header__inner { max-width: var(--df-max-content); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 28px; } .site-header__brand { font-weight: 600; font-size: 1.05rem; color: var(--text, #e6e8eb); letter-spacing: 0.02em; } .site-header__nav { margin-left: auto; display: flex; gap: 22px; font-size: 0.95rem; } .site-header__nav a { color: var(--text-dim, #8a93a6); padding: 4px 2px; border-bottom: 2px solid transparent; } .site-header__nav a:hover { color: var(--text, #e6e8eb); border-bottom-color: var(--accent, #4a9eff); } /* Mobile nav — burger toggle via :target (no JS) ----------------------- */ @media (max-width: 700px) { .site-header__inner { gap: 12px; } .site-header__nav { 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; } /* :target hack — anchor link to #nav opens the menu */ .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 { font-size: clamp(1.5rem, 3vw, 1.95rem); margin-bottom: 0.6em; color: var(--text, #e6e8eb); } .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: 8px; object-fit: cover; } /* 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: clamp(2.4rem, 7vw, 4.2rem); line-height: 1.05; margin: 0 0 18px; color: #fff; letter-spacing: -0.015em; font-weight: 600; 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 ═══════════════════════════════════════════════════════════ */ .site-footer { border-top: 1px solid var(--border, rgba(255,255,255,0.08)); padding: 32px 24px; text-align: center; 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: underline; text-underline-offset: 3px; } .site-footer a:hover { color: var(--text, #e6e8eb); } /* ═══ 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; }