/* /coaching/demo// — the working example sites. * * DELIBERATELY NOT fd-sol.com. This is the coach's site, not ours: darker, * bolder, more personal, and it shares no tokens with coach.css. If it looked * like the landing page it came from, the reader would read it as more of our * marketing instead of as a picture of what they would own. * * Constraints, same as everywhere on this site: * - CSP is `default-src 'none'; style-src 'self'; font-src 'self'`. * No inline styles, no CDN, no external font. * - No JavaScript. The one form on the page is inert by design — see the * template — so there is nothing to wire up. * - No images at all. Every visual below is drawn with CSS, which keeps a * demo site at a few kilobytes and means there is no photograph of a * person who does not exist. */ /* /coaching/demo// — the working example sites. * * THIRTEEN DIFFERENT WEBSITES, ONE STYLESHEET. Each demo sets data-theme and * data-layout on ; everything below the base layer is a theme or a * layout overriding it. See the note at the top of core/coach_demos.py for why * these have to look genuinely unrelated rather than merely recoloured — a * coach comparing two of them must not conclude that we build one site and * fill in the blanks. * * A THEME OWNS: palette, TYPEFACE, corner radius, border weight, heading case * and letter-spacing, section rhythm. Not just colours. The typeface is doing * most of the work — Anton for the S&C site, IBM Plex Mono for the analysts, * Archivo Black for the academy, Public Sans for the clinical ones — because * two pages in different colours and the same font still look like siblings. * * Constraints, as everywhere on this site: * - CSP is `default-src 'none'; style-src 'self'; font-src 'self'`. * No inline styles, no CDN, no external font. * - No JavaScript, and no images at all. Every visual is drawn with CSS, * which is also why there is no photograph of a person who does not exist. * - Font paths are absolute so ManifestStaticFilesStorage rewrites them to * the hashed filenames at collectstatic time. */ @font-face { font-family: "Archivo"; src: url("/static/fonts/Archivo-400-latin.cd56e2ec63d7.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Archivo"; src: url("/static/fonts/Archivo-400-latin-ext.c5e41aa17045.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Archivo"; src: url("/static/fonts/Archivo-500-latin.cd56e2ec63d7.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Archivo"; src: url("/static/fonts/Archivo-500-latin-ext.c5e41aa17045.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Archivo"; src: url("/static/fonts/Archivo-600-latin.cd56e2ec63d7.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Archivo"; src: url("/static/fonts/Archivo-600-latin-ext.c5e41aa17045.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Archivo"; src: url("/static/fonts/Archivo-700-latin.cd56e2ec63d7.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Archivo"; src: url("/static/fonts/Archivo-700-latin-ext.c5e41aa17045.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "ArchivoBlack"; src: url("/static/fonts/ArchivoBlack-400-latin.4b6914a69e6a.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "ArchivoBlack"; src: url("/static/fonts/ArchivoBlack-400-latin-ext.72199f7efe25.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Anton"; src: url("/static/fonts/Anton-400-latin.912c3c9f2621.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Anton"; src: url("/static/fonts/Anton-400-latin-ext.ab8365836d69.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "PublicSans"; src: url("/static/fonts/PublicSans-400-latin.e4c9b081863a.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "PublicSans"; src: url("/static/fonts/PublicSans-400-latin-ext.d0a5d26ee7e7.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "PublicSans"; src: url("/static/fonts/PublicSans-500-latin.e4c9b081863a.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "PublicSans"; src: url("/static/fonts/PublicSans-500-latin-ext.d0a5d26ee7e7.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "PublicSans"; src: url("/static/fonts/PublicSans-600-latin.e4c9b081863a.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "PublicSans"; src: url("/static/fonts/PublicSans-600-latin-ext.d0a5d26ee7e7.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "PublicSans"; src: url("/static/fonts/PublicSans-700-latin.e4c9b081863a.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "PublicSans"; src: url("/static/fonts/PublicSans-700-latin-ext.d0a5d26ee7e7.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "PlexMono"; src: url("/static/fonts/IBMPlexMono-400-latin.79936b18df9f.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "PlexMono"; src: url("/static/fonts/IBMPlexMono-400-latin-ext.8450d5944de2.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "PlexMono"; src: url("/static/fonts/IBMPlexMono-500-latin.b1c8a895f5fd.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "PlexMono"; src: url("/static/fonts/IBMPlexMono-500-latin-ext.fa8d8838b94a.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "PlexMono"; src: url("/static/fonts/IBMPlexMono-600-latin.5a2ce7798732.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "PlexMono"; src: url("/static/fonts/IBMPlexMono-600-latin-ext.f2fe87d55f72.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Plex"; src: url("/static/fonts/plex-latin-400.4767e1197706.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-052F, U+2000-206F, U+2070-209F, U+20A0-20CF, U+2190-21FF; } @font-face { font-family: "Plex"; src: url("/static/fonts/plex-latin-500.80ebc672c915.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-052F, U+2000-206F, U+2070-209F, U+20A0-20CF, U+2190-21FF; } @font-face { font-family: "Plex"; src: url("/static/fonts/plex-latin-600.f417eeb0d15e.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-052F, U+2000-206F, U+2070-209F, U+20A0-20CF, U+2190-21FF; } @font-face { font-family: "Plex"; src: url("/static/fonts/plex-latin-700.8d04403cf599.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-052F, U+2000-206F, U+2070-209F, U+20A0-20CF, U+2190-21FF; } /* --- Base tokens ---------------------------------------------------------- * The default system, which every theme then overrides. Contrast is checked * per theme, not here — see the note above each one. */ :root { --ink: #0d1013; --ink-2: #2a3138; --mute: #616b76; --paper: #ffffff; --sand: #f4f2ef; --line: #e3e0da; --acc: #a63f16; --acc-hi: #85320f; --acc-soft: #fbeee7; --on-acc: #ffffff; --dark: #111417; --r: 12px; --bw: 1px; /* border weight */ --pad: 62px; /* section rhythm */ --disp: "Plex", system-ui, sans-serif; /* headings */ --body: "Plex", system-ui, sans-serif; /* text */ --dcase: none; /* heading case */ --dtrack: -.03em; /* heading tracking */ --dweight: 700; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2 { margin: 0; line-height: 1.08; font-family: var(--disp); letter-spacing: var(--dtrack); font-weight: var(--dweight); text-transform: var(--dcase); } p { margin: 0 0 1em; } a { color: var(--acc); } :focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; border-radius: 4px; } .rw { width: 100%; max-width: 1060px; margin: 0 auto; padding: 0 20px; } /* --- The example-site banner --------------------------------------------- * Sticky and unmissable on every screen size. This is a safety feature: the * business below does not exist and a reader must never be in doubt. See the * docstring in core/coach_demos.py. */ .ribbon { position: sticky; top: 0; z-index: 60; background: var(--dark); color: #fff; font-size: .82rem; } .ribbon .rw { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 9px; padding-bottom: 9px; } /* Warmer when the page carries the recipient's own name — the reader needs * telling more plainly, not less, that a site with their name on it is a * mock-up. See core/personalise.BANNER_PERSONAL. */ .ribbon.is-personal { background: var(--acc); } .ribbon.is-personal .ribbon-tag { background: #fff; color: var(--acc); } .ribbon.is-personal .ribbon-text { color: rgba(255,255,255,.92); } .ribbon-tag { background: var(--acc); color: var(--on-acc); border-radius: 999px; padding: 2px 11px; font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; flex: none; } .ribbon-text { color: rgba(255,255,255,.82); flex: 1 1 240px; min-width: 0; } .ribbon-cta { color: #fff; font-weight: 600; text-decoration: underline; flex: none; } .ribbon-cta:hover { color: #fff; } /* --- Their site ----------------------------------------------------------- */ .top { border-bottom: 1px solid var(--line); background: var(--paper); } .top-in { display: flex; align-items: center; gap: 18px; min-height: 66px; } .logo { font-weight: 700; font-size: 1.05rem; color: var(--ink); text-decoration: none; letter-spacing: -.02em; } .menu { margin-left: auto; display: flex; gap: 20px; } .menu a { color: var(--ink-2); text-decoration: none; font-size: .9rem; font-weight: 500; } .menu a:hover { color: var(--acc); } .cta { display: inline-block; background: var(--acc); color: var(--on-acc); border-radius: 999px; padding: 13px 26px; font-weight: 600; font-size: .95rem; text-decoration: none; border: 0; cursor: pointer; } .cta:hover { background: var(--acc-hi); color: var(--on-acc); } .cta-sm { padding: 9px 17px; font-size: .85rem; } .cta-block { display: block; text-align: center; width: 100%; } .hero { padding: calc(var(--pad) + 6px) 0 var(--pad); background: var(--sand); border-bottom: 1px solid var(--line); } .kicker { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--acc); margin: 0 0 12px; } .hero h1 { font-size: clamp(2rem, 5.6vw, 3.3rem); max-width: 17ch; } .hero .sub { font-size: 1.1rem; color: var(--ink-2); max-width: 52ch; margin: 16px 0 26px; } .numbers { background: var(--dark); color: #fff; padding: 30px 0; } .numbers-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: center; } .numbers b { display: block; font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; } .numbers span { font-size: .82rem; color: rgba(255,255,255,.7); } .panels { padding: var(--pad) 0; } .panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .panel { background: var(--paper); border: var(--bw) solid var(--line); border-radius: var(--r); padding: 24px; } .panel h2 { font-size: 1.15rem; margin: 0 0 16px; } .rows { width: 100%; border-collapse: collapse; font-size: .92rem; } .rows td { padding: 11px 0; border-bottom: 1px solid var(--line); } .rows tr:last-child td { border-bottom: 0; } .r-a { font-weight: 600; white-space: nowrap; padding-right: 12px; } .r-b { color: var(--ink-2); } .r-c { text-align: right; color: var(--mute); white-space: nowrap; padding-left: 10px; } .tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: #e6f3ea; color: #16603a; } .tag-off { background: var(--sand); color: var(--mute); } .tiles { display: grid; gap: 9px; } .tile { padding: 13px 15px; border-radius: var(--r); background: var(--sand); font-size: .92rem; color: var(--ink-2); } .clips { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .clip { display: grid; gap: 7px; padding: 13px; border-radius: var(--r); background: var(--sand); font-size: .85rem; color: var(--ink-2); } /* A play triangle drawn with borders — one element, no image. */ .play { width: 0; height: 0; border-left: 12px solid var(--acc); border-top: 8px solid transparent; border-bottom: 8px solid transparent; } .bigstats { display: grid; gap: 16px; } .bigstats b { display: block; font-size: 2rem; font-weight: 700; color: var(--acc); letter-spacing: -.03em; line-height: 1; } .bigstats span span, .bigstats > span > span { font-size: .85rem; color: var(--mute); } .sketch { display: grid; gap: 9px; } .fld { padding: 12px 14px; border-radius: var(--r); border: var(--bw) solid var(--line); color: var(--mute); font-size: .88rem; } .sketch .cta { justify-self: start; } .services { padding: var(--pad) 0; background: var(--sand); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .services h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); margin-bottom: 26px; } .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .svc { background: var(--paper); border: var(--bw) solid var(--line); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; } .svc-t { font-weight: 600; margin: 0 0 6px; } .svc-p { font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; color: var(--acc); margin: 0 0 6px; line-height: 1; } .svc-n { font-size: .86rem; color: var(--mute); margin: 0 0 18px; flex: 1; } .about { padding: var(--pad) 0; } .about-in { max-width: 62ch; } .about h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); margin-bottom: 16px; } .about p { font-size: 1.08rem; color: var(--ink-2); margin: 0; } .book { padding: var(--pad) 0; background: var(--sand); border-top: 1px solid var(--line); } .book-in { max-width: 560px; } .book h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); margin-bottom: 12px; } .book .sub { color: var(--ink-2); margin-bottom: 24px; } .bform { display: grid; gap: 14px; background: var(--paper); border: var(--bw) solid var(--line); border-radius: var(--r); padding: 24px; } .bform label { display: grid; gap: 6px; font-size: .88rem; font-weight: 600; } .bform input, .bform textarea { font: inherit; font-size: .95rem; padding: 11px 13px; border: var(--bw) solid var(--line); border-radius: 9px; background: var(--sand); color: var(--mute); resize: vertical; } .note { font-size: .8rem; color: var(--mute); margin: 0; text-align: center; } .foot { background: var(--dark); color: rgba(255,255,255,.72); padding: 40px 0 52px; font-size: .9rem; } .foot-name { color: #fff; font-weight: 600; margin: 0 0 6px; } .foot-note { margin: 0 0 14px; } .foot-cta a { color: #fff; font-weight: 600; } @media (max-width: 860px) { .panel-grid, .svc-grid { grid-template-columns: 1fr; } .menu { display: none; } } @media (max-width: 560px) { body { font-size: 16px; } .hero { padding: 46px 0 44px; } .panels, .services, .about, .book { padding: 44px 0; } .numbers-in { grid-template-columns: 1fr; gap: 14px; } .clips { grid-template-columns: 1fr; } } /* --- The fuller site ------------------------------------------------------ * Added when the demos were enriched from a one-screen sketch into complete * sites: credentials, process, quotes, writing, questions, a real footer and * a phone dock. All the things a coach's site actually has, and all the things * the reader is being shown they would get. */ /* Credentials — the trust bar, directly under the numbers. */ .creds { padding: 34px 0; border-bottom: 1px solid var(--line); } .creds-h { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin: 0 0 16px; } .creds-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; } .cred { display: grid; gap: 2px; padding-left: 13px; border-left: 3px solid var(--acc); } .cred b { font-size: .95rem; font-weight: 600; } .cred span { font-size: .82rem; color: var(--mute); } /* Process. */ .how { padding: var(--pad) 0; background: var(--sand); border-top: 1px solid var(--line); } .how h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); margin-bottom: 26px; } .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; max-width: 68ch; } .steps li { display: flex; gap: 16px; align-items: flex-start; } .steps .n { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--acc); color: var(--on-acc); font-weight: 700; font-size: .95rem; } .s-h { font-weight: 600; margin: 0 0 3px; } .s-p { color: var(--ink-2); margin: 0; font-size: .95rem; } /* Quotes. */ .says { padding: var(--pad) 0; } .says h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); margin-bottom: 26px; } .quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .quote { margin: 0; background: var(--sand); border-radius: var(--r); padding: 24px; } .quote blockquote { margin: 0 0 12px; font-size: 1.05rem; line-height: 1.5; color: var(--ink); font-weight: 500; } .quote blockquote::before { content: "\\201C"; } .quote blockquote::after { content: "\\201D"; } .quote figcaption { font-size: .85rem; color: var(--mute); } .note.left { text-align: left; margin-top: 14px; } /* Writing. */ .writing { padding: var(--pad) 0; background: var(--sand); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .writing h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); margin-bottom: 20px; } .posts { list-style: none; margin: 0; padding: 0; max-width: 70ch; } .posts li { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--line); } .posts li:last-child { border-bottom: 0; } .p-t { font-weight: 600; font-size: 1.02rem; } .p-r { color: var(--acc); font-size: .85rem; font-weight: 600; white-space: nowrap; } /* Questions. */ .qs { padding: var(--pad) 0; } .qs-in { max-width: 70ch; } .qs h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); margin-bottom: 18px; } .qs details { border-bottom: 1px solid var(--line); } .qs summary { cursor: pointer; list-style: none; padding: 17px 32px 17px 0; position: relative; font-weight: 600; font-size: 1rem; } .qs summary::-webkit-details-marker { display: none; } .qs summary::after { content: ""; position: absolute; right: 6px; top: 24px; width: 9px; height: 9px; border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute); transform: rotate(45deg); transition: transform .15s ease; } .qs details[open] summary::after { transform: rotate(-135deg); top: 28px; } .qs summary:hover { color: var(--acc); } .qs p { margin: 0 0 17px; color: var(--ink-2); } /* Footer. */ .foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 22px; padding-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,.14); } .foot-h { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0 0 5px; } .foot-ex { margin-top: 22px; } /* The phone dock. */ .dock { display: none; } @media (max-width: 700px) { .quotes { grid-template-columns: 1fr; } .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.96); border-top: 1px solid var(--line); } body.has-dock { padding-bottom: 76px; } } /* ========================================================================== HERO LAYOUTS — data-layout on ========================================================================== */ .hero-in { display: block; } .hero-card { display: none; } /* split — headline left, a credentials card right. The everyday business site. */ [data-layout="split"] .hero-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center; } [data-layout="split"] .hero-card, [data-layout="dark"] .hero-card { display: block; background: var(--paper); border: var(--bw) solid var(--line); border-radius: var(--r); padding: 24px; } .hc-h { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin: 0 0 14px; } .hc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .hc-list li { display: grid; gap: 2px; padding-left: 12px; border-left: 3px solid var(--acc); } .hc-list b { font-size: .93rem; font-weight: 600; } .hc-list span { font-size: .8rem; color: var(--mute); } /* center — one big statement. For a business sold on conviction. */ [data-layout="center"] .hero { text-align: center; } [data-layout="center"] .hero h1 { max-width: 20ch; margin-inline: auto; } [data-layout="center"] .hero .sub { margin-inline: auto; } [data-layout="center"] .hero-in { display: block; } /* dark — a full-bleed dark hero. For the data and technical businesses. */ [data-layout="dark"] .hero { background: var(--dark); border-bottom: 0; } [data-layout="dark"] .hero h1 { color: #fff; } [data-layout="dark"] .hero .sub { color: rgba(255,255,255,.74); } [data-layout="dark"] .hero-in { display: grid; grid-template-columns: 1.2fr .8fr; gap: 44px; align-items: center; } [data-layout="dark"] .hero-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); } [data-layout="dark"] .hc-h, [data-layout="dark"] .hc-list span { color: rgba(255,255,255,.6); } [data-layout="dark"] .hc-list b { color: #fff; } /* band — compact, with a heavy rule. For the professional services. */ [data-layout="band"] .hero { padding: 52px 0 46px; background: var(--paper); } [data-layout="band"] .hero-text { border-left: 6px solid var(--acc); padding-left: 26px; } [data-layout="band"] .hero h1 { font-size: clamp(1.8rem, 4.4vw, 2.7rem); } /* stack — editorial. A rule, a headline, a lot of air. */ [data-layout="stack"] .hero { background: var(--paper); padding: calc(var(--pad) + 14px) 0; } [data-layout="stack"] .hero-text { border-top: 3px solid var(--ink); padding-top: 26px; } [data-layout="stack"] .hero h1 { max-width: 15ch; } [data-layout="stack"] .kicker { color: var(--ink-2); } @media (max-width: 860px) { [data-layout="split"] .hero-in, [data-layout="dark"] .hero-in { grid-template-columns: 1fr; gap: 28px; } } /* ========================================================================== THEMES — data-theme on Each is a whole system. Every foreground/background pair is at or above WCAG AA for the size it is used at; the accent doubles as link text, so it is chosen to pass on the theme's own paper, not just as a button fill. ========================================================================== */ /* academy — navy and gold, institutional but warm. Archivo Black display. */ [data-theme="academy"] { --paper:#fffdf8; --sand:#f6f1e4; --line:#e6dcc4; --dark:#12203c; --ink:#111c31; --ink-2:#31405a; --mute:#5f6b81; --acc:#8a6b12; --acc-hi:#6d5410; --on-acc:#fff; --disp:"ArchivoBlack","Archivo",system-ui,sans-serif; --body:"PublicSans",system-ui,sans-serif; --dweight:400; --dtrack:-.02em; --r:6px; } /* darkdata — near-black with a cold accent, monospaced headings. */ [data-theme="darkdata"] { --paper:#0f1216; --sand:#161b21; --line:#252c35; --dark:#0a0d10; --ink:#eef2f6; --ink-2:#b9c3ce; --mute:#8492a0; --acc:#3ddc97; --acc-hi:#31b87e; --on-acc:#08110c; --disp:"PlexMono",ui-monospace,monospace; --body:"Plex",system-ui,sans-serif; --dweight:600; --dtrack:-.02em; --r:4px; } [data-theme="darkdata"] .top, [data-theme="darkdata"] .bform, [data-theme="darkdata"] .panel, [data-theme="darkdata"] .svc { background:var(--sand); } [data-theme="darkdata"] .bform input, [data-theme="darkdata"] .bform textarea { background:#0f1216; color:var(--mute); } [data-theme="darkdata"] .tag { background:#12301f; color:#5fe3ad; } [data-theme="darkdata"] .foot { background:#0a0d10; } [data-theme="darkdata"] .dock { background:rgba(15,18,22,.96); } /* iron — black and volt, condensed uppercase. Loud on purpose. */ [data-theme="iron"] { --paper:#ffffff; --sand:#f2f2f0; --line:#111111; --dark:#111111; --ink:#0a0a0a; --ink-2:#2b2b2b; --mute:#5c5c5c; --acc:#111111; --acc-hi:#000; --on-acc:#e8ff3a; --disp:"Anton",Impact,system-ui,sans-serif; --body:"Archivo",system-ui,sans-serif; --dweight:400; --dtrack:.005em; --dcase:uppercase; --r:0px; --bw:2px; } [data-theme="iron"] .cta { border-radius:0; text-transform:uppercase; letter-spacing:.06em; font-weight:700; } [data-theme="iron"] .kicker { color:#0a0a0a; } [data-theme="iron"] .numbers b { color:#e8ff3a; } [data-theme="iron"] .svc-p, [data-theme="iron"] .bigstats b { color:#0a0a0a; } [data-theme="iron"] .steps .n { border-radius:0; background:#111; color:#e8ff3a; } /* editorial — ink on off-white, hairline rules, refined. */ [data-theme="editorial"] { --paper:#fbfbf9; --sand:#f2f1ec; --line:#d9d7cf; --dark:#1a1a18; --ink:#16160f; --ink-2:#3a3a33; --mute:#6a6a60; --acc:#7a1f2b; --acc-hi:#5e1721; --on-acc:#fff; --disp:"Archivo",Georgia,serif; --body:"Archivo",system-ui,sans-serif; --dweight:700; --dtrack:-.035em; --r:2px; --pad:74px; } [data-theme="editorial"] .quote { background:transparent; border-top:2px solid var(--ink); border-radius:0; padding:20px 0 0; } [data-theme="editorial"] .posts li { border-bottom-style:dotted; } /* fresh — warm green and cream, soft and rounded. */ [data-theme="fresh"] { --paper:#ffffff; --sand:#f0f6ee; --line:#dce8d8; --dark:#16301f; --ink:#12251a; --ink-2:#33473a; --mute:#5d7064; --acc:#2f6b3f; --acc-hi:#245431; --on-acc:#fff; --disp:"PublicSans",system-ui,sans-serif; --body:"PublicSans",system-ui,sans-serif; --dweight:700; --dtrack:-.025em; --r:20px; } [data-theme="fresh"] .cta { border-radius:999px; } /* clinic — clinical blue on white, calm, generous. */ [data-theme="clinic"] { --paper:#ffffff; --sand:#f2f6fa; --line:#dde6ef; --dark:#0f2436; --ink:#0d1c28; --ink-2:#2f4356; --mute:#5c7185; --acc:#155e8c; --acc-hi:#0f4a70; --on-acc:#fff; --disp:"PublicSans",system-ui,sans-serif; --body:"PublicSans",system-ui,sans-serif; --dweight:600; --dtrack:-.02em; --r:10px; } /* paper — sepia, editorial, unhurried. */ [data-theme="paper"] { --paper:#fdfaf3; --sand:#f4eee0; --line:#e4dac4; --dark:#241f16; --ink:#1d1810; --ink-2:#43392a; --mute:#6f6252; --acc:#8a5a1d; --acc-hi:#6c4516; --on-acc:#fff; --disp:"Plex",Georgia,serif; --body:"Plex",system-ui,sans-serif; --dweight:600; --dtrack:-.02em; --r:3px; --pad:70px; } /* corporate — navy, squared, institutional. */ [data-theme="corporate"] { --paper:#ffffff; --sand:#f4f6f9; --line:#dbe1ea; --dark:#0c1a2e; --ink:#0b1626; --ink-2:#2b3a4e; --mute:#5a6a7e; --acc:#123a63; --acc-hi:#0c2b4b; --on-acc:#fff; --disp:"Archivo",system-ui,sans-serif; --body:"PublicSans",system-ui,sans-serif; --dweight:600; --dtrack:-.02em; --r:2px; } /* calm — stone and lilac, airy, low contrast between surfaces. */ [data-theme="calm"] { --paper:#fdfcfb; --sand:#f4f1f4; --line:#e5e0e5; --dark:#241f2b; --ink:#1e1a24; --ink-2:#40394a; --mute:#6b6377; --acc:#5b4a86; --acc-hi:#473a6b; --on-acc:#fff; --disp:"Plex",system-ui,sans-serif; --body:"Plex",system-ui,sans-serif; --dweight:600; --dtrack:-.02em; --r:16px; --pad:78px; } [data-theme="calm"] .cta { border-radius:999px; } /* bright — blue and orange, big and friendly. For parents on a phone. */ [data-theme="bright"] { --paper:#ffffff; --sand:#eef5ff; --line:#d4e4fb; --dark:#0b2b57; --ink:#0a2140; --ink-2:#2b4568; --mute:#54688a; --acc:#c14a09; --acc-hi:#9c3b06; --on-acc:#fff; --disp:"ArchivoBlack","Archivo",system-ui,sans-serif; --body:"Archivo",system-ui,sans-serif; --dweight:400; --dtrack:-.025em; --r:18px; } [data-theme="bright"] .cta { border-radius:999px; font-weight:700; } /* console — slate, monospaced, technical. */ [data-theme="console"] { --paper:#12161b; --sand:#1a2028; --line:#2a323c; --dark:#0c1015; --ink:#e9eef4; --ink-2:#b3bfcc; --mute:#7f8d9d; --acc:#f0a13a; --acc-hi:#d2861f; --on-acc:#14100a; --disp:"PlexMono",ui-monospace,monospace; --body:"Plex",system-ui,sans-serif; --dweight:500; --dtrack:-.01em; --r:3px; } [data-theme="console"] .top, [data-theme="console"] .panel, [data-theme="console"] .svc, [data-theme="console"] .bform { background:var(--sand); } [data-theme="console"] .bform input, [data-theme="console"] .bform textarea { background:#12161b; color:var(--mute); } [data-theme="console"] .tag { background:#2c2413; color:#f5bb6b; } [data-theme="console"] .foot { background:#0c1015; } [data-theme="console"] .dock { background:rgba(18,22,27,.96); } /* report — cream and ink, ruled like a written report. */ [data-theme="report"] { --paper:#fcfaf5; --sand:#f3efe4; --line:#ddd6c4; --dark:#1c1a15; --ink:#17150f; --ink-2:#3c3729; --mute:#6b6454; --acc:#2f5d4a; --acc-hi:#234737; --on-acc:#fff; --disp:"Plex",Georgia,serif; --body:"Plex",system-ui,sans-serif; --dweight:600; --dtrack:-.025em; --r:2px; --bw:1px; } [data-theme="report"] .tile, [data-theme="report"] .panel { border-left:3px solid var(--acc); } /* lab — white and violet, precise, minimal. */ [data-theme="lab"] { --paper:#ffffff; --sand:#f6f5fb; --line:#e3e0f0; --dark:#171432; --ink:#14122b; --ink-2:#383457; --mute:#615d80; --acc:#4b3bb5; --acc-hi:#3a2d93; --on-acc:#fff; --disp:"PlexMono",ui-monospace,monospace; --body:"PublicSans",system-ui,sans-serif; --dweight:500; --dtrack:-.03em; --r:5px; }