/* ========================================================================== createstoke.com — shared framework One stylesheet for all sections. Section identity comes from a theme class on (.t-stoke, .t-radio, .t-runway) that re-points the page variables. Tokens below are the Organic design-system scale. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Caprasimo&family=Figtree:wght@400;600;700&display=swap'); :root { /* type */ --font-heading: "Caprasimo", Georgia, serif; --font-body: "Figtree", system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* neutral ramp */ --neutral-100: #f9f4ed; --neutral-200: #eee7db; --neutral-300: #dcd3c4; --neutral-400: #c0b6a5; --neutral-600: #82796a; --neutral-700: #645c50; --neutral-800: #474238; --neutral-900: #2e2b25; /* terracotta ramp */ --accent-100: #fff2eb; --accent-200: #ffe1d0; --accent-400: #f6a06b; --accent-500: #c67139; --accent-600: #b2622d; --accent-700: #8c491a; /* sage ramp */ --sage-100: #f0fae1; --sage-200: #e1eecc; --sage-300: #ccdbb2; --sage-400: #aebf92; --sage-500: #8fa073; --sage-600: #728157; --sage-700: #56633f; --sage-800: #3d472b; --cream: #f5ead8; --sand: #ebddc5; --ink: #201e1d; --radius-sheet: 44px; --radius-card: 32px; --sheet-max: 1240px; --wrap-max: 1140px; --gutter: clamp(18px, 5vw, 56px); } /* ---- section themes ---------------------------------------------------- */ .t-stoke { --sheet-bg: var(--cream); --band-bg: var(--sand); --card-bg: var(--neutral-100); --tab-on-bg: var(--accent-500); --tab-on-fg: var(--cream); --tab-fg: var(--neutral-800); --tab-hover: var(--sand); --kicker: var(--accent-700); --link: var(--accent-700); --link-hover: var(--accent-600); } .t-radio { --sheet-bg: var(--neutral-100); --band-bg: var(--neutral-200); --card-bg: var(--neutral-200); --tab-on-bg: var(--neutral-800); --tab-on-fg: var(--neutral-100); --tab-fg: var(--neutral-800); --tab-hover: var(--neutral-200); --kicker: var(--sage-700); --link: var(--accent-700); --link-hover: var(--accent-600); } .t-runway { --sheet-bg: var(--sage-100); --band-bg: var(--sage-200); --card-bg: #ffffff; --tab-on-bg: var(--sage-700); --tab-on-fg: var(--sage-100); --tab-fg: var(--sage-800); --tab-hover: var(--sage-200); --kicker: var(--sage-700); --link: var(--sage-700); --link-hover: var(--sage-800); } /* ---- base -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--ink); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.55; padding: 14px clamp(8px, 2vw, 22px) 28px; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 400; line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 12px; } p { margin: 0 0 12px; } img { display: block; max-width: 100%; } a { color: var(--link); text-underline-offset: 3px; } a:hover { color: var(--link-hover); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--accent-500); outline-offset: 2px; } ::selection { background: rgba(198, 113, 57, 0.3); } /* ---- shell ------------------------------------------------------------- */ .sheet { max-width: var(--sheet-max); margin: 0 auto; background: var(--sheet-bg); border-radius: var(--radius-sheet); } .wrap { max-width: var(--wrap-max); margin: 0 auto; } .band { padding: clamp(40px, 6vw, 76px) var(--gutter); } .band--tint { background: var(--band-bg); } /* ---- navigation -------------------------------------------------------- */ .nav { position: relative; z-index: 20; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; padding: 14px var(--gutter); background: var(--sheet-bg); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; box-shadow: 0 1px 0 rgba(32, 30, 29, 0.08); } .nav-brand { font-family: var(--font-heading); font-size: 19px; letter-spacing: -0.02em; margin-right: auto; color: var(--ink); text-decoration: none; } .nav-tabs { display: flex; flex-wrap: wrap; gap: 6px; } .tab { font-family: var(--font-heading); font-size: 14px; padding: 9px 18px; border-radius: 999px; text-decoration: none; color: var(--tab-fg); } .tab:hover { background: var(--tab-hover); color: var(--tab-fg); } .tab[aria-current="page"] { background: var(--tab-on-bg); color: var(--tab-on-fg); } .tab[aria-current="page"]:hover { background: var(--tab-on-bg); color: var(--tab-on-fg); } /* ---- text elements ----------------------------------------------------- */ .eyebrow { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; margin-bottom: 20px; background: var(--accent-500); color: var(--cream); } .eyebrow--sage { background: var(--sage-700); color: var(--sage-100); } .kicker { font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kicker); margin: 0 0 22px; } .h-display { font-size: clamp(46px, 8.5vw, 104px); line-height: 0.92; letter-spacing: -0.03em; margin: 0 0 22px; } .h-page { font-size: clamp(32px, 4.6vw, 58px); line-height: 1.02; margin: 0 0 18px; } .h-band { font-size: clamp(30px, 4vw, 46px); margin: 0 0 24px; } .h-sub { font-size: clamp(26px, 3.4vw, 40px); margin: 0 0 18px; } .lede { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; max-width: 60ch; text-wrap: pretty; margin: 0; } .prose p { font-size: 16.5px; line-height: 1.65; max-width: 62ch; text-wrap: pretty; } .prose p:last-child { margin-bottom: 0; } .mono { font-family: var(--font-mono); } /* ---- layout helpers ---------------------------------------------------- */ .split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; } .split--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); } .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .cols--tight { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; } /* circular sticker art with a soft halo behind it */ .disc { position: relative; display: grid; place-items: center; } .disc::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: var(--halo, var(--accent-200)); } .disc--sage::before { background: var(--sage-200); } .disc--cream::before { background: var(--neutral-100); } .disc img { position: relative; width: 100%; border-radius: 50%; } .disc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(16px, 3vw, 36px); } .disc-row img { border-radius: 50%; } /* ---- cards ------------------------------------------------------------- */ .card { background: var(--card-bg); border-radius: var(--radius-card); padding: 28px; } .card h3 { font-size: 28px; margin: 0 0 6px; } .card ol { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.6; display: flex; flex-direction: column; gap: 8px; } .card-note { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--neutral-700); margin-bottom: 16px; } /* ---- the mantra band --------------------------------------------------- */ .mantra { background: var(--accent-500); padding: clamp(40px, 6vw, 72px) var(--gutter); } .mantra p { font-family: var(--font-heading); font-size: clamp(26px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -0.02em; color: var(--cream); margin: 0 auto; max-width: 30ch; text-align: center; } /* ---- footer ------------------------------------------------------------ */ .site-footer { background: var(--sheet-bg); border-radius: 0 0 var(--radius-sheet) var(--radius-sheet); padding: 28px var(--gutter) 40px; } .site-footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: baseline; font-size: 13px; color: var(--neutral-700); } .site-footer .footer-mark { font-family: var(--font-heading); font-size: 15px; color: var(--ink); margin-right: auto; } .site-footer p { margin: 0; max-width: 68ch; } /* ========================================================================== KO6DOT ========================================================================== */ .radio-hero { padding: 0 clamp(12px, 3vw, 28px) clamp(32px, 5vw, 56px); } .radio-hero__panel { max-width: 1180px; margin: 0 auto; background: var(--neutral-800); border-radius: 0 0 40px 40px; padding: clamp(36px, 6vw, 72px) clamp(20px, 4vw, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(24px, 4vw, 48px); align-items: center; } .radio-hero__panel .kicker { color: var(--sage-400); margin-bottom: 18px; } .radio-hero__panel h1 { color: var(--neutral-100); } .radio-hero__panel p { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.55; color: var(--neutral-300); margin: 0; max-width: 46ch; text-wrap: pretty; } .radio-hero__panel img { width: 100%; max-width: 420px; margin-left: auto; } .spec { background: var(--neutral-200); border-radius: 28px; padding: 24px 26px; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; align-items: baseline; } .spec dt { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--neutral-700); } .spec dd { font-family: var(--font-mono); font-size: 15px; line-height: 1.7; margin: 0; } .tool { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; padding: 24px; border-radius: 28px; background: var(--neutral-800); color: var(--neutral-100); text-decoration: none; } .tool:hover { background: var(--neutral-900); color: var(--neutral-100); } .tool strong { font-family: var(--font-heading); font-weight: 400; font-size: 22px; } .tool span { font-size: 13px; color: var(--neutral-300); } .link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; } .link-pill { display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px 22px; border-radius: 999px; font-size: 14.5px; text-decoration: none; color: var(--ink); background: var(--neutral-100); } .link-pill:hover { background: #ffffff; color: var(--ink); } .link-pill--sage { background: var(--sage-200); } .link-pill--sage:hover { background: var(--sage-100); color: var(--ink); } .link-pill--sand { background: var(--neutral-300); } .link-pill--sand:hover { background: var(--neutral-200); color: var(--ink); } .washed { filter: saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94); border-radius: var(--radius-card); } .contact-strip { background: var(--neutral-800); padding: clamp(32px, 4vw, 52px) var(--gutter); } .contact-strip .wrap { display: flex; flex-wrap: wrap; gap: 10px 32px; justify-content: center; text-align: center; font-family: var(--font-heading); font-size: clamp(16px, 1.7vw, 22px); color: var(--neutral-100); } .contact-strip .grid-square { color: var(--sage-400); } .contact-strip a { color: var(--accent-400); } .contact-strip a:hover { color: var(--accent-200); } /* ========================================================================== Green Runway ========================================================================== */ .btn-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 15px; text-decoration: none; background: var(--sage-700); color: var(--sage-100); padding: 13px 24px; border-radius: 999px; } .btn-pill:hover { background: var(--sage-800); color: var(--sage-100); } .runway-panel { max-width: var(--wrap-max); margin: 0 auto; background: #ffffff; border-radius: 36px; padding: clamp(24px, 4vw, 40px); } .runway-bars { display: flex; align-items: flex-end; gap: clamp(6px, 1.4vw, 14px); height: 150px; } .runway-bars span { flex: 1; border-radius: 18px 18px 8px 8px; } .runway-labels { display: flex; gap: clamp(6px, 1.4vw, 14px); margin-top: 12px; font-size: 12px; color: var(--neutral-700); } .runway-labels span { flex: 1; text-align: center; } .feature { background: var(--sage-100); border-radius: var(--radius-card); padding: 28px; } .feature h3 { font-size: 22px; margin: 0 0 10px; } .feature p { font-size: 15px; line-height: 1.6; margin: 0; color: var(--neutral-800); } /* ========================================================================== Narrow screens ========================================================================== */ @media (max-width: 820px) { :root { --radius-sheet: 32px; } .split, .split--flip { grid-template-columns: minmax(0, 1fr); } /* keep the sticker above the copy it belongs to */ .split--flip .disc { order: -1; } .runway-bars { height: 110px; } } @media (max-width: 520px) { body { padding: 8px 8px 18px; } .nav { gap: 12px; } .nav-tabs { width: 100%; } .tab { flex: 1; text-align: center; padding: 11px 12px; } .spec { grid-template-columns: minmax(0, 1fr); gap: 4px 0; } .spec dd { margin-bottom: 10px; } }