/* ========================================================================== Pono Petroleum — themes.css Four design directions, switchable via data-theme on . community → Direction 1: Community & Trust (light — DEFAULT) coastal → Direction 2: Coastal Dark (dark) industrial → Direction 3: Industrial Craft (dark) modern → Direction 4: Modern Local (light) Layout: four token blocks first, then four structural-override regions. To work on one direction, edit its token block + its override region. To LOCK IN a final direction after client review, see README.md ("Locking in a design direction"). ========================================================================== */ /* ========================================================================== TOKENS — Direction 1: Industrial Craft Heavy, dark, blue-collar. Midnight near-black, slab-weight type, petroleum-amber accents, square corners, dense spacing. ========================================================================== */ [data-theme="industrial"] { color-scheme: dark; --c-bg: #131a1c; --c-bg-alt: #1a2325; --c-surface: #212b2d; --c-text: #ece9e2; --c-text-muted: #aba69a; --c-heading: #f5f2ea; --c-accent: #e8a33d; --c-accent-strong: #f0b552; --c-on-accent: #1a1408; --c-kicker: #e8a33d; --c-border: #374a4d; --c-focus: #f0b552; --c-error: #ff9c8a; --c-header-bg: #0f1618; --c-footer-bg: #0f1618; --c-cta-bg: #1a2325; --font-heading: "Archivo Black", "Arial Black", sans-serif; --font-body: "Archivo", Arial, sans-serif; --font-data: "Archivo", Arial, sans-serif; --h-weight: 400; /* Archivo Black is a single heavy weight */ --h-transform: uppercase; --h-tracking: 0.02em; --h-line: 1.08; --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --btn-radius: 0; --btn-transform: uppercase; --btn-tracking: 0.06em; --btn-weight: 400; --btn-shadow: 4px 4px 0 rgb(0 0 0 / 0.55); --shadow-card: none; --card-border: 2px solid var(--c-border); --card-pad: 1.25rem; --section-pad: clamp(3rem, 6vw, 4.5rem); --content-max: 1240px; --stack-gap: 0.9rem; --bg-texture: repeating-linear-gradient( 45deg, rgb(255 255 255 / 0.012) 0 2px, transparent 2px 6px ); --bg-texture-alt: none; --ph-bg: #1a2325; --ph-border: #46585b; --ph-label: #aba69a; } /* ========================================================================== TOKENS — Direction 2: Modern Local (DEFAULT) Clean, light, professional. White base, brand green, generous air. ========================================================================== */ [data-theme="modern"] { color-scheme: light; --c-bg: #ffffff; --c-bg-alt: #f4f6f4; --c-surface: #ffffff; --c-text: #1f2823; --c-text-muted: #55635b; --c-heading: #14201a; --c-accent: #1b7a43; --c-accent-strong: #145c33; --c-on-accent: #ffffff; --c-kicker: #1f6f9e; --c-border: #dde3dd; --c-focus: #145c33; --c-error: #b3341f; --c-header-bg: #ffffff; --c-footer-bg: #f4f6f4; --c-cta-bg: #145c33; --c-cta-text: #ffffff; --c-cta-muted: #cfe5d8; --font-heading: "Manrope", -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", -apple-system, "Segoe UI", sans-serif; --font-data: "Manrope", -apple-system, "Segoe UI", sans-serif; --h-weight: 800; --h-transform: none; --h-tracking: -0.015em; --h-line: 1.15; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --btn-radius: 8px; --btn-transform: none; --btn-tracking: normal; --btn-weight: 700; --btn-shadow: none; --shadow-card: 0 2px 12px rgb(31 40 35 / 0.08); --card-border: 1px solid var(--c-border); --card-pad: 1.5rem; --section-pad: clamp(4rem, 8vw, 6.5rem); --content-max: 1120px; --stack-gap: 1rem; --bg-texture: none; --bg-texture-alt: none; --ph-bg: #eef2ee; --ph-border: #b5c2b8; --ph-label: #55635b; } /* ========================================================================== TOKENS — Direction 2b: Coastal Dark (replaces the retired Tech-Forward) Deep, grounded ocean-dark. Near-black teal base, logo teal + sky-blue accents, serif headings, and a traditional photo-led layout. ========================================================================== */ [data-theme="coastal"] { color-scheme: dark; --c-bg: #0c1a1f; --c-bg-alt: #122831; --c-surface: #173039; --c-text: #e7efec; --c-text-muted: #9fb4b2; --c-heading: #f0f7f4; --c-accent: #33b3a1; --c-accent-strong: #5bb6d9; --c-on-accent: #04120f; --c-kicker: #5bb6d9; --c-border: #26424a; --c-focus: #5bb6d9; --c-error: #ff9c93; --c-header-bg: #0c1a1f; --c-footer-bg: #0a161a; --c-cta-bg: #122831; --font-heading: "Lora", Georgia, serif; --font-body: "Nunito Sans", Verdana, sans-serif; --font-data: "Nunito Sans", Verdana, sans-serif; --h-weight: 600; --h-transform: none; --h-tracking: normal; --h-line: 1.18; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --btn-radius: 8px; --btn-transform: none; --btn-tracking: normal; --btn-weight: 700; --btn-shadow: none; --shadow-card: 0 6px 24px rgb(0 0 0 / 0.35); --card-border: 1px solid #26424a; --card-pad: 1.6rem; --section-pad: clamp(4rem, 8vw, 6rem); --content-max: 1080px; --stack-gap: 1.05rem; --bg-texture: none; --bg-texture-alt: none; --ph-bg: #122831; --ph-border: #2e4c54; --ph-label: #9fb4b2; } /* ========================================================================== TOKENS — Direction 4: Community & Trust Warm, earthy, human. Off-white and sand, olive green + warm brown, serif headings, soft pill shapes, photography-forward. ========================================================================== */ [data-theme="community"] { color-scheme: light; --c-bg: #faf6ef; --c-bg-alt: #f1ead9; --c-surface: #fffdf8; --c-text: #2f2a22; --c-text-muted: #6b6353; --c-heading: #33301f; --c-accent: #556b2f; --c-accent-strong: #4a5d28; --c-on-accent: #ffffff; --c-kicker: #6b4e32; --c-border: #ded4bf; --c-focus: #4a5d28; --c-error: #b3402e; --c-header-bg: #faf6ef; --c-footer-bg: #f1ead9; --c-cta-bg: #f1ead9; --font-heading: "Lora", Georgia, serif; --font-body: "Nunito Sans", Verdana, sans-serif; --font-data: "Nunito Sans", Verdana, sans-serif; --h-weight: 600; --h-transform: none; --h-tracking: normal; --h-line: 1.2; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --btn-radius: 999px; --btn-transform: none; --btn-tracking: normal; --btn-weight: 700; --btn-shadow: none; --shadow-card: 0 4px 16px rgb(107 78 50 / 0.1); --card-border: 1px solid var(--c-border); --card-pad: 1.75rem; --section-pad: clamp(4rem, 8vw, 6rem); --content-max: 1040px; --stack-gap: 1.1rem; --bg-texture: none; --bg-texture-alt: none; --ph-bg: #f1ead9; --ph-border: #c9b998; --ph-label: #6b6353; } /* ========================================================================== OVERRIDES — Direction 1: Industrial Craft Full-bleed dark hero with background photo layer, fused stat strip, hazard-stripe dividers, pressed-metal buttons, text-forward cards. ========================================================================== */ [data-theme="industrial"] .site-nav a { text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.08em; } [data-theme="industrial"] .hero { padding-block: clamp(4rem, 9vw, 7rem); } [data-theme="industrial"] .hero__inner { position: static; grid-template-areas: "text"; grid-template-columns: minmax(0, 48rem); } [data-theme="industrial"] .hero__text { position: relative; z-index: 1; } /* Photo placeholder becomes a dimmed full-bleed background layer */ [data-theme="industrial"] .hero__media { position: absolute; inset: 0; z-index: 0; } [data-theme="industrial"] .hero__media .ph { height: 100%; aspect-ratio: auto; border-radius: 0; border-width: 0; align-content: end; justify-items: end; padding: 1.5rem; opacity: 0.55; } [data-theme="industrial"] .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 100deg, rgb(20 24 31 / 0.96) 35%, rgb(20 24 31 / 0.72) ); } [data-theme="industrial"] .hero__title { font-size: clamp(2.2rem, 5.5vw, 3.8rem); } [data-theme="industrial"] .hero__title em { color: var(--c-accent); } /* Stat strip fused to the hero: surface panel with hazard-stripe top edge */ [data-theme="industrial"] .hero__stats { position: relative; z-index: 1; background: var(--c-surface); border: 2px solid var(--c-border); padding: 1.75rem 1.75rem 1.5rem; } [data-theme="industrial"] .hero__stats::before { content: ""; position: absolute; top: -8px; left: -2px; right: -2px; height: 6px; background: repeating-linear-gradient( -45deg, var(--c-accent) 0 12px, transparent 12px 24px ); } [data-theme="industrial"] .stat dd { color: var(--c-accent); } /* Slab section headings with a heavy amber rule */ [data-theme="industrial"] .section-head h2 { padding-left: 1rem; border-left: 6px solid var(--c-accent); } [data-theme="industrial"] .page-hero h1 { padding-left: 1rem; border-left: 8px solid var(--c-accent); } /* Pressed-metal button: hard offset shadow that collapses on press */ [data-theme="industrial"] .btn--primary:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgb(0 0 0 / 0.55); background: var(--c-accent-strong); } [data-theme="industrial"] .btn--primary:active { transform: translate(4px, 4px); box-shadow: none; } /* Dense, text-forward cards — no media slot */ [data-theme="industrial"] .card__media { display: none; } [data-theme="industrial"] .card__title { color: var(--c-accent); } /* Hazard stripe across the top of the CTA band */ [data-theme="industrial"] .cta-band::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: repeating-linear-gradient( -45deg, var(--c-accent) 0 12px, var(--c-bg) 12px 24px ); } [data-theme="industrial"] .feature__icon { border-width: 2px; } /* ========================================================================== OVERRIDES — Direction 2: Modern Local (default) Split hero with air, green headline underline, inverted green CTA band. ========================================================================== */ [data-theme="modern"] .hero__title em { font-style: normal; background-image: linear-gradient( transparent 74%, rgb(31 111 158 / 0.30) 74% ); } [data-theme="modern"] .hero__stats { border-top: 1px solid var(--c-border); padding-top: 2rem; } [data-theme="modern"] .stat dd { color: var(--c-accent-strong); } /* Inverted CTA band: white button on deep green */ [data-theme="modern"] .cta-band .btn--primary { background: #ffffff; color: #145c33; } [data-theme="modern"] .cta-band .btn--primary:hover { background: #e4efe8; } [data-theme="modern"] .cta-band .btn--ghost { color: #ffffff; border-color: rgb(255 255 255 / 0.6); } [data-theme="modern"] .cta-band .btn--ghost:hover { border-color: #ffffff; color: #ffffff; } /* ========================================================================== OVERRIDES — Direction 2b: Coastal Dark Sticky translucent header, traditional photo hero (no data motifs), static teal/sky heading underline, solid teal buttons, quiet stat strip. ========================================================================== */ [data-theme="coastal"] .site-header { position: sticky; top: 0; background: rgb(12 26 31 / 0.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } @media (max-width: 767px) { html.js[data-theme="coastal"] .site-nav.is-open { background: #0c1a1f; } } /* Traditional hero: keep the base photo + text split; hide the stat strip so this direction stays overview-first, not data-forward. */ [data-theme="coastal"] .hero__stats { display: none; } [data-theme="coastal"] .hero__title em { font-style: italic; color: var(--c-accent); } /* Static teal/sky underline under headings — an accent, not a data motif */ [data-theme="coastal"] .section-head h2, [data-theme="coastal"] .page-hero h1 { position: relative; padding-bottom: 0.75rem; } [data-theme="coastal"] .section-head h2::after, [data-theme="coastal"] .page-hero h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--c-accent), var(--c-accent-strong)); } /* Solid teal buttons, sky-blue on hover */ [data-theme="coastal"] .btn--primary { background: var(--c-accent); color: var(--c-on-accent); } [data-theme="coastal"] .btn--primary:hover { background: var(--c-accent-strong); color: var(--c-on-accent); } [data-theme="coastal"] .card:hover { box-shadow: 0 8px 28px rgb(0 0 0 / 0.4); } /* ========================================================================== OVERRIDES — Direction 4: Community & Trust Photo-first centered hero, warm wash, centered serif headings with short brown divider, round icons, pill buttons, no stat strip. ========================================================================== */ [data-theme="community"] .hero { background-image: radial-gradient( 120% 90% at 50% 0%, #f1ead9 0%, rgb(241 234 217 / 0) 65% ); } [data-theme="community"] .hero__inner { grid-template-areas: "media" "text"; grid-template-columns: minmax(0, 1fr); text-align: center; } /* Photography-forward: this direction leads with people, not equipment — swap the fleet placeholder for the crew placeholder (see index.html) */ [data-theme="community"] .hero__media .ph { display: none; } [data-theme="community"] .hero__media .ph--people { display: grid; aspect-ratio: 5 / 2; } [data-theme="community"] .hero__title, [data-theme="community"] .hero__lede { margin-inline: auto; } [data-theme="community"] .hero__title { max-width: 22ch; } [data-theme="community"] .hero__title em { font-style: italic; color: var(--c-accent); } [data-theme="community"] .hero__cta { justify-content: center; } [data-theme="community"] .hero__stats { display: none; } /* Centered serif section headings with a short warm divider */ [data-theme="community"] .section-head { margin-inline: auto; text-align: center; } [data-theme="community"] .section-head h2::after { content: ""; display: block; width: 48px; height: 3px; margin: 0.85rem auto 0; border-radius: 2px; background: #6b4e32; } [data-theme="community"] .section-head .lede { margin-inline: auto; } [data-theme="community"] .feature__icon { border-radius: 50%; background: var(--c-bg-alt); } [data-theme="community"] .feature-grid, [data-theme="community"] .value-grid { text-align: center; } [data-theme="community"] .feature__icon { margin-inline: auto; } /* Larger, photo-forward card media in a deliberate 2×2 grid */ [data-theme="community"] .card__media .ph { aspect-ratio: 4 / 3; } [data-theme="community"] .card-grid { grid-template-columns: 1fr; } @media (min-width: 640px) { [data-theme="community"] .card-grid { grid-template-columns: repeat(2, 1fr); } } [data-theme="community"] .card { text-align: center; } [data-theme="community"] .cta-band h2 { font-style: italic; } [data-theme="community"] .site-nav a[aria-current="page"] { border-bottom-color: #6b4e32; }