/* ============================================================ Boom12 / Shockwave CMS — core main.css (STARTER) Starting point for Nick, not a finished design. Its job is to wire the global CSS variables (injected by the CMS into as #brand-tokens) to real rules, so the fonts, sizes, and colours set in admin Settings actually take effect. Built to the Boom12 brand: dark ground, paper text, pink/blue/green accents, Outfit / Lora / Quicksand in their roles. Variables available (see FRONTEND-GLOBALS.md): --color-ink --color-paper --color-accent-pink/-blue/-green --font-heading --font-accent --font-body --h1..h6 / --accent / --body each with -weight -size -tracking -line -transform ============================================================ */ /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } img, svg, video { display: block; max-width: 100%; height: auto; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } /* ---- Base typography wired to the global variables ---- */ /* Dark brand ground: ink background, paper text. */ body { font-family: var(--font-body, sans-serif); font-weight: var(--body-weight, 400); font-size: var(--body-size, 1rem); letter-spacing: var(--body-tracking, 0); line-height: var(--body-line, 1.6); text-transform: var(--body-transform, none); background: var(--color-ink, #1D201F); color: var(--color-paper, #F7F7F2); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading, sans-serif); color: var(--color-paper); } h1 { font-weight: var(--h1-weight,800); font-size: var(--h1-size,2.5rem); letter-spacing: var(--h1-tracking,-.02em); line-height: var(--h1-line,1.1); text-transform: var(--h1-transform,none); } h2 { font-weight: var(--h2-weight,700); font-size: var(--h2-size,2rem); letter-spacing: var(--h2-tracking,-.01em); line-height: var(--h2-line,1.15); text-transform: var(--h2-transform,none); } h3 { font-weight: var(--h3-weight,700); font-size: var(--h3-size,1.5rem); letter-spacing: var(--h3-tracking,0); line-height: var(--h3-line,1.2); text-transform: var(--h3-transform,none); } h4 { font-weight: var(--h4-weight,600); font-size: var(--h4-size,1.25rem); letter-spacing: var(--h4-tracking,0); line-height: var(--h4-line,1.3); text-transform: var(--h4-transform,none); } h5 { font-weight: var(--h5-weight,600); font-size: var(--h5-size,1.1rem); letter-spacing: var(--h5-tracking,0); line-height: var(--h5-line,1.4); text-transform: var(--h5-transform,none); } h6 { font-weight: var(--h6-weight,600); font-size: var(--h6-size,1rem); letter-spacing: var(--h6-tracking,.04em); line-height: var(--h6-line,1.4); text-transform: var(--h6-transform,uppercase); } /* The Lora "accent" role. Apply with class="accent" on any element. */ .accent { font-family: var(--font-accent, serif); font-weight: var(--accent-weight,500); font-size: var(--accent-size,1.25rem); letter-spacing: var(--accent-tracking,0); line-height: var(--accent-line,1.5); text-transform: var(--accent-transform,none); } p { margin: 0 0 1rem; } p:last-child { margin-bottom: 0; } a:not(.block-cta):hover { color: var(--color-accent-pink); } /* ---- Layout primitives ---- */ :root { --container: 1140px; --gutter: clamp(1rem, 4vw, 2.5rem); --section-y: clamp(3rem, 7vw, 6rem); } .site-header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.25rem var(--gutter); max-width: var(--container); margin-inline: auto; } .site-logo { font-family: var(--font-heading); font-weight: 800; font-size: 1.25rem; color: var(--color-paper); } .site-logo img { max-height: 32px; width: auto; } .site-nav { display: flex; gap: 1.75rem; flex-wrap: wrap; } .site-nav a { font-weight: 600; } #main { display: block; } .site-footer { max-width: var(--container); margin-inline: auto; padding: var(--section-y) var(--gutter) 3rem; color: var(--color-paper); opacity: .65; font-size: .9rem; } /* ---- Block wrapper. Every block renders inside section.block. ---- */ .block { padding: var(--section-y) var(--gutter); } .block > * { max-width: var(--container); margin-inline: auto; } /* Full-bleed flag (orthogonal to layout): inner content spans the section instead of being constrained to the container. Split direction (is-reverse) and the split two-column treatment land with the block templates in 0.6.9. */ .block.is-bleed > * { max-width: none; } .block-eyebrow { font-family: var(--font-accent); font-style: italic; color: var(--color-accent-pink); margin-bottom: .5rem; } .block-heading { margin-bottom: 1rem; } .block-body { max-width: 70ch; } /* CTA button uses the pink accent on ink text. */ .block-cta { display: inline-block; margin-top: 1.5rem; padding: .7rem 1.5rem; font-family: var(--font-heading); font-weight: 700; background: var(--color-accent-pink); color: var(--color-ink); border-radius: 4px; } .block-cta:hover { opacity: .9; } /* ---- Grids (parent section carries data-layout) ---- */ .grid { display: grid; gap: clamp(1rem, 3vw, 2rem); margin-top: 2rem; } [data-layout="grid-2"] .grid { grid-template-columns: repeat(2, 1fr); } [data-layout="grid-3"] .grid { grid-template-columns: repeat(3, 1fr); } [data-layout="grid-4"] .grid { grid-template-columns: repeat(4, 1fr); } @media (max-width: 800px) { .grid { grid-template-columns: 1fr !important; } } /* Carousel: a permitted collection-grid layout that had no implementation. CSS only, on purpose. Scroll-snap gives real swipe on touch and trackpads, keyboard scrolling, and native momentum, with no script to load, no library to keep current, and nothing to break when JS fails. The front end stays JS-light; the admin editor is where script is welcome. Items size by viewport rather than count, so the same rule serves three testimonials or thirty. */ [data-layout="carousel"] .grid { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: .75rem; } [data-layout="carousel"] .grid > * { flex: 0 0 clamp(16rem, 30%, 24rem); scroll-snap-align: start; } @media (max-width: 800px) { /* The blanket 1fr override above would kill the flex row, so restate it. */ [data-layout="carousel"] .grid { grid-template-columns: none !important; } [data-layout="carousel"] .grid > * { flex-basis: min(80%, 20rem); } } @media (prefers-reduced-motion: reduce) { [data-layout="carousel"] .grid { scroll-behavior: auto; } } /* ---- Components (dark starter styling) ---- */ /* Surfaces lift off the ink ground with a subtle paper tint and hairline. */ .hero-inner { max-width: 60ch; } .hero-media, .feature-media, .person-photo, .gallery-media, .feed-thumb, .entry-hero { background: color-mix(in srgb, var(--color-accent-blue) 22%, var(--color-ink)); border: 1px solid color-mix(in srgb, var(--color-paper) 10%, transparent); border-radius: 6px; aspect-ratio: 16/9; margin-top: 1.5rem; } .person-photo { aspect-ratio: 1; } /* A picked image fills its media box; the box keeps the frame and radius. */ .hero-media img, .feature-media img, .person-photo img, .gallery-media img, .feed-thumb img, .entry-hero img, .card-media img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; } .card-media { aspect-ratio: 16/9; border-radius: 6px; overflow: hidden; margin-bottom: 1rem; background: color-mix(in srgb, var(--color-accent-blue) 22%, var(--color-ink)); } .feature-card, .card, .feed-item { padding: 1.5rem; border-radius: 8px; background: color-mix(in srgb, var(--color-paper) 5%, var(--color-ink)); border: 1px solid color-mix(in srgb, var(--color-paper) 12%, transparent); } .feature-card h3, .card h3 { margin-bottom: .5rem; } .process { display: grid; gap: 2rem; margin-top: 2rem; } [data-layout^="grid"] .process { grid-template-columns: repeat(3, 1fr); } .process-step { position: relative; } .process-num { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--color-accent-green); color: var(--color-ink); font-family: var(--font-heading); font-weight: 800; margin-bottom: .75rem; } .person-role { font-family: var(--font-accent); font-style: italic; color: var(--color-accent-pink); } .faq { margin-top: 2rem; max-width: 70ch; } .faq-item { border-bottom: 1px solid color-mix(in srgb, var(--color-paper) 16%, transparent); padding: 1rem 0; } .faq-item summary { cursor: pointer; font-family: var(--font-heading); font-weight: 600; } .proof { display: grid; gap: 2rem; margin-top: 2rem; } [data-layout="stacked"] .proof { grid-template-columns: 1fr; } .proof-item { font-family: var(--font-accent); font-style: italic; font-size: 1.25rem; } .proof-item cite { display: block; margin-top: .75rem; font-style: normal; font-size: .9rem; opacity: .65; } .cms-form, .newsletter { margin-top: 1.5rem; display: grid; gap: 1rem; max-width: 32rem; } .cms-form .field { display: grid; gap: .35rem; } .cms-form input, .cms-form textarea, .cms-form select, .newsletter input { padding: .65rem .8rem; border-radius: 4px; font: inherit; background: color-mix(in srgb, var(--color-paper) 6%, var(--color-ink)); border: 1px solid color-mix(in srgb, var(--color-paper) 20%, transparent); color: var(--color-paper); } .cms-form input::placeholder, .newsletter input::placeholder { color: color-mix(in srgb, var(--color-paper) 45%, transparent); } .cms-form button, .newsletter button { padding: .7rem 1.5rem; border: 0; border-radius: 4px; cursor: pointer; background: var(--color-accent-pink); color: var(--color-ink); font-family: var(--font-heading); font-weight: 700; } .richtext { max-width: 70ch; } .embed { margin-top: 1.5rem; } /* Single entry (blog/work) */ .entry-single { max-width: var(--container); margin-inline: auto; padding: var(--section-y) var(--gutter); } .entry-meta { font-family: var(--font-accent); font-style: italic; opacity: .7; margin-top: .5rem; } .entry-body { max-width: 70ch; margin-top: 2rem; } /* Collection archive (blog/work index) */ .archive { max-width: var(--container); margin-inline: auto; padding: var(--section-y) var(--gutter); } .archive-head { margin-bottom: 2rem; } .archive-intro { margin-top: .75rem; opacity: .8; max-width: 60ch; } .archive-empty { opacity: .7; } .archive-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 0; } .feed-link { display: block; color: inherit; } .feed-link h2 { margin-top: .85rem; font-size: 1.25rem; } .feed-link:hover { opacity: 1; } .feed-link:hover h2 { color: var(--color-accent-pink); } .pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 3rem; } .pager-link { font-weight: 600; } .pager-link.is-disabled { opacity: .3; } .pager-status { font-size: .875rem; opacity: .7; } /* Empty media placeholders show their intended source while design is in progress. */ [data-placeholder]:empty::after { content: attr(data-placeholder); display: flex; align-items: center; justify-content: center; height: 100%; min-height: 80px; font-size: .8rem; opacity: .55; padding: 1rem; text-align: center; color: var(--color-paper); } /* ============================================================ 0.6.9a — baseline structure for the nine presentation presets. Structural only (layout, spacing, sane defaults); brand design is layered on top by hand in the theme. Every archetype and element that the editor can produce is styled here by default. ============================================================ */ /* CTA levels (primary / secondary / tertiary) */ .block-cta, .card-cta, .list-cta, .feature-cta { display:inline-block; text-decoration:none; } .cta--primary { background:var(--accent, #1a1a1a); color:#fff; padding:.7em 1.4em; border-radius:var(--radius, .4rem); } .cta--secondary { border:1px solid var(--accent, #1a1a1a); color:var(--accent, #1a1a1a); padding:.7em 1.4em; border-radius:var(--radius, .4rem); } .cta--tertiary { color:var(--accent, #1a1a1a); text-decoration:underline; padding:.4em 0; } .block-cta-link { margin-inline-start:1rem; } .hero-actions { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin-block-start:1.25rem; } /* Hero / Feature */ [data-layout="split"] .hero-inner { } .block--hero { position:relative; } .hero-media { margin-block-start:1.5rem; } .hero-media img, .hero-media video { width:100%; height:auto; border-radius:var(--radius, .4rem); } .block-subheading { font-size:1.15rem; color:var(--muted, #555); } /* Split two columns (direction via .is-reverse) */ [data-layout="split"] { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem, 4vw, 3rem); align-items:center; } .is-reverse[data-layout="split"] > :first-child { order:2; } @media (max-width:720px){ [data-layout="split"]{ grid-template-columns:1fr; } } /* Background media layer */ .block-bg { position:absolute; inset:0; z-index:0; overflow:hidden; } .block-bg img, .block-bg video { width:100%; height:100%; object-fit:cover; } .block--hero > :not(.block-bg), .block--cta > :not(.block-bg) { position:relative; z-index:1; } /* Grid + cards */ .grid { display:grid; gap:1.5rem; } .card { display:flex; flex-direction:column; gap:.5rem; } .card-media img { width:100%; height:auto; border-radius:var(--radius, .4rem); } .card-badge { align-self:flex-start; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; background:var(--accent, #1a1a1a); color:#fff; padding:.2em .6em; border-radius:1em; } .card-icon, .feature-icon { display:inline-block; } /* Stacked list (collection-list) */ .stack-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.25rem; } .list-row { display:flex; gap:1rem; align-items:flex-start; } .list-media { flex:0 0 auto; width:6rem; } .list-media img { width:100%; height:auto; border-radius:var(--radius, .4rem); } .list-text { flex:1; } /* Manual feature list */ .feature-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1rem; } .feature-item { display:flex; gap:.75rem; align-items:flex-start; } /* Gallery */ .gallery-grid { display:grid; gap:1rem; } [data-layout="grid-2"] .gallery-grid { grid-template-columns:repeat(2,1fr); } [data-layout="grid-3"] .gallery-grid { grid-template-columns:repeat(3,1fr); } [data-layout="grid-4"] .gallery-grid { grid-template-columns:repeat(4,1fr); } .gallery-item { margin:0; } .gallery-item img { width:100%; height:100%; object-fit:cover; border-radius:var(--radius, .4rem); } .gallery-item figcaption { font-size:.85rem; color:var(--muted, #555); margin-block-start:.4rem; } /* Responsive video + embed (16:9) */ .video-embed, .embed-frame { position:relative; width:100%; aspect-ratio:16/9; } .video-embed iframe, .embed-frame iframe, .video-file { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:var(--radius, .4rem); } /* CTA band */ .cta-band-inner { text-align:center; display:flex; flex-direction:column; align-items:center; gap:1rem; }