/* ============================================================================ Copywriting Nibbles — the landing page's own stylesheet. Loaded by Views/NibblesLandingPage.cshtml and by nothing else. Every rule is scoped under .nibbles (the page's wrapper element), which is why this can sit next to the site's stylesheet without either one touching the other: the site's header and footer keep their own styles, and the page keeps its own tokens, type ramp, spacing ramp and geometry. The tokens below are the page's, not the site's. `.nibbles` carries the values that used to sit on (ground colour, Archivo Expanded, 16/20, the width axis), so everything inside the wrapper is unchanged from the approved design while the chrome outside it is untouched. Two things an editor can change without touching this file: the hero picture and the seven lesson photos are media-library fields on the page's document type, and the hero's copy is too. See Constants/NibblesLandingSchema.cs. ============================================================================ */ .nibbles{ --ink: #161616; --ink-2: #3A443F; --ink-3: #6E6C68; --ground: #F6F4F0; --panel-linen: #E8E4D9; --panel-white: #FFFFFF; --tint: #E4EBE5; --bar: #202F27; --on-bar: #F8F4EB; --rule: #DFDDDA; --field: #FFFFFF; --field-rule: #DFDDDA; --accent: #C9D8CE; --on-accent: #202F27; --evergreen: #095D2D; --error: #B3261E; --sans: "Archivo Expanded", "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --serif: "Young Serif", "Iowan Old Style", Georgia, serif; --mono: "SF Mono", SFMono-Regular, Menlo, Consolas, "Courier New", monospace; --column: 944px; --column-2: 384px; --gutter: clamp(16px, 2.2vw, 32px); --pad: clamp(32px, 5vw, 72px); --hero-bg: url("https://goodcopyclub.com/media/errnti1u/background-paper.jpg?width=1600&format=webp&quality=82"); /* the brand mark in every email card's bar — the mark from the emails themselves, 76x76. It lives here, once, so the file needs nothing beside it: open it anywhere, or send it to a phone. In Umbraco, put the media-library logo back as an in .head and delete this line. */ --gcc-mark: url("data:image/png;base64,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"); --radius: 6px; }*{ box-sizing: border-box; }[hidden]{ display: none !important; }.nibbles{ margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-stretch: 125%; font-variation-settings: 'wdth' 125; font-size: 16px; line-height: 20px; font-weight: 300; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }.nibbles b,.nibbles strong,.nibbles .name{ font-weight: 600; }.nibbles .wrap{ max-width: clamp(1152px, 76vw, 1440px); margin: 0 auto; padding: 0 var(--gutter) 32px; }.nibbles .panel{ padding: 64px 0; }.nibbles .wrap > .panel,.nibbles .hero-band .wrap > .panel{ padding-left: clamp(var(--pad), calc((100% - var(--column)) / 2), 78px); padding-right: clamp(var(--pad), calc((100% - var(--column)) / 2), 78px); }.nibbles .split > .panel{ padding-left: clamp(var(--pad), calc((100% - var(--column-2)) / 2), 78px); padding-right: clamp(var(--pad), calc((100% - var(--column-2)) / 2), 78px); }.nibbles .panel.tint{ background: var(--tint); border-radius: var(--radius); padding-top: var(--pad); padding-bottom: var(--pad); }.nibbles .panel.white{ background: var(--panel-white); border-radius: var(--radius); padding-top: var(--pad); padding-bottom: var(--pad); }.nibbles h1,.nibbles h2,.nibbles h3{ font-family: var(--serif); font-weight: 400; font-synthesis: none; -webkit-font-synthesis: none; }.nibbles h1{ margin: 0; font-size: clamp(38px, 4.6vw, 58px); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }.nibbles h2{ margin: 0; font-size: clamp(26px, 3vw, 34px); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }.nibbles h3{ margin: 0; font-size: 22px; line-height: 30px; letter-spacing: -0.02em; }.nibbles .eyebrow{ margin: 0; font-family: var(--mono); font-size: 12px; line-height: 16px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: inherit; }.nibbles .sub{ margin: 0; font-size: 19px; line-height: 29px; color: var(--ink-2); }.nibbles .lede{ margin: 0; font-size: 17px; line-height: 26px; color: var(--ink-2); max-width: 60ch; }.nibbles .split{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); padding: 32px 0; align-items: stretch; } @media (max-width: 900px) {.nibbles .split{ grid-template-columns: 1fr; gap: 40px; } }.nibbles .split > .panel{ display: flex; flex-direction: column; gap: 24px; }.nibbles .split > .panel.visual{ position: relative; overflow: hidden; padding: 0; width: 100%; aspect-ratio: 632 / 560; min-height: 340px; } @media (max-width: 900px) {.nibbles .split > .panel{ min-height: 0; }.nibbles .split > .panel.visual{ aspect-ratio: auto; width: 100%; min-height: 440px; }.nibbles .fan .mail{ width: 72%; bottom: -10%; }.nibbles .fan .mail .shot figcaption{ bottom: 60px; }.nibbles .fan .mail,.nibbles .fan.in .mail{ --tx: -12%; } }.nibbles form.capture-form{ display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }.nibbles .capture{ display: flex; flex-wrap: wrap; gap: 12px; }.nibbles .capture-form .turnstile-slot{ margin: -12px 0; }.nibbles .capture input[type="email"]{ font: inherit; font-size: 17px; flex: 1 1 240px; min-width: 0; color: var(--ink); background: var(--field); border: 1px solid var(--field-rule); border-radius: 3px; padding: 18px 20px; }.nibbles .capture input::placeholder{ color: var(--ink-3); }.nibbles .capture input:focus-visible{ outline: 2px solid var(--evergreen); outline-offset: 1px; border-color: var(--ink); }.nibbles .capture input[aria-invalid="true"]{ border-color: var(--error); }.nibbles button.cta,.nibbles a.cta{ font: inherit; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; background: var(--bar); color: var(--on-bar); border: 1px solid var(--bar); border-radius: 3px; padding: 18px 30px; cursor: pointer; flex: 0 0 auto; text-decoration: none; display: inline-block; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; }.nibbles button.cta:hover,.nibbles a.cta:hover{ background: var(--evergreen); border-color: var(--evergreen); color: var(--on-bar); }.nibbles button.cta:focus-visible,.nibbles a.cta:focus-visible{ outline: 2px solid var(--evergreen); outline-offset: 2px; } @media (max-width: 520px) {.nibbles button.cta{ flex: 1 1 100%; } }.nibbles .err{ margin: 0; font-size: 14px; line-height: 20px; color: var(--error); }.nibbles .fine{ margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-3); }.nibbles .mail{ background: #FFFFFF; border: 6px solid #FFFFFF; border-radius: 3px; box-shadow: 0 10px 30px rgba(22,22,22,0.10); overflow: hidden; color: var(--ink); }.nibbles .mail .ticker{ background: var(--accent); color: var(--on-accent); font-family: var(--mono); font-size: 10.5px; letter-spacing: 2.31px; text-transform: uppercase; font-weight: 600; padding: 9px 0; white-space: nowrap; overflow: hidden; }.nibbles .mail .head{ background: var(--bar); color: var(--on-bar); display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7.5px 14px; font-size: 12px; }.nibbles .mail .head img,.nibbles .mail .head .mark{ width: 17px; height: 17px; display: block; border-radius: 2px; background: var(--gcc-mark) center / 100% 100% no-repeat; }.nibbles .mail{ position: relative; }.nibbles .mail.detailed{ display: flex; flex-direction: column; }.nibbles .panel.hero{ display: flex; flex-direction: column; gap: 24px; padding: 96px 0 64px; }.nibbles .panel.hero > *{ max-width: 640px; }.nibbles .hero-band{ background-color: var(--ground); background-image: var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; }.nibbles /* the site's header is fixed and 80px tall,.nibbles and it is transparent - the paper texture runs behind it,.nibbles exactly as the site's own header sits over its hero. So the band keeps its background from y=0 and its content starts clear of the bar. */ .hero-band{ padding-top: 80px; }.nibbles .hero-band .wrap{ padding-bottom: 0; }.nibbles /* that same bar is over the top of every in-page jump,.nibbles so a section's own top edge lands below it rather than behind it */ section[id],.nibbles header[id]{ scroll-margin-top: 96px; }.nibbles .quotes{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; } @media (max-width: 860px) {.nibbles .quotes{ grid-template-columns: 1fr; } }.nibbles .quote{ background: var(--panel-linen); border-radius: 8px; padding: 36px; margin: 0; min-height: 288px; display: flex; flex-direction: column; }.nibbles .quote .qmark{ display: block; font-family: var(--serif); font-weight: 400; font-size: 60px; line-height: 1; height: 28px; overflow: visible; color: var(--ink); opacity: 0.8; }.nibbles .quote blockquote{ flex: 1; display: flex; align-items: center; margin: 0; padding: 16px 0; font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.375; color: var(--ink); }.nibbles .quote .who{ font-size: 14px; line-height: 20px; color: var(--ink-3); }.nibbles ul.gains{ list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }.nibbles ul.gains li{ display: grid; grid-template-columns: 18px 1fr; gap: 14px; align-items: start; font-size: 17px; line-height: 24px; color: var(--ink-2); }.nibbles ul.gains .tick{ width: 16px; height: 16px; margin-top: 4px; color: var(--evergreen); }.nibbles .split .panel a.cta{ align-self: flex-start; margin-top: auto; }.nibbles .split .panel a.cta::after{ content: " →"; }.nibbles .fan{ position: absolute; inset: 0; }.nibbles .fan .mail{ position: absolute; left: 50%; bottom: -6%; width: 60%; aspect-ratio: 0.72; display: flex; flex-direction: column; transform-origin: 50% 115%; transform: translateX(var(--tx, -30%)) rotate(var(--r)); transition: transform 700ms cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }/* The fan is drawn fanned in its resting state; only a document that has run the script starts it collapsed, so a visitor whose browser never gets the script still sees the fan rather than one card. The script marks the document in the head, before this is painted. */ html.has-js .nibbles .fan .mail{ transform: translateX(var(--tx, -30%)) rotate(0deg); } html.has-js .nibbles .fan.in .mail{ transform: translateX(var(--tx, -30%)) rotate(var(--r)); }.nibbles .fan .mail .shot{ position: relative; margin: 0; display: block; flex: 1; min-height: 0; }.nibbles .fan .mail .shot img{ display: block; width: 100%; height: 100%; object-fit: cover; }.nibbles .fan .mail .shot figcaption{ position: absolute; left: 16px; right: 16px; bottom: 50px; z-index: 1; display: flex; flex-direction: column; gap: 4px; }.nibbles .fan .mail .shot .n{ font-family: var(--mono); font-size: 10px; line-height: 13px; letter-spacing: 0.18em; color: rgba(255,255,255,0.8); }.nibbles .fan .mail .shot b{ font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 27px; letter-spacing: -0.01em; color: #FFFFFF; }.nibbles .fan .mail .shot .sub{ margin-top: 12px; font-size: 14px; line-height: 19px; font-weight: 600; letter-spacing: -0.02em; color: rgba(255,255,255,0.92); }.nibbles .seven-wrap{ margin: 32px 0 0; }.nibbles .seven{ display: grid; grid-template-columns: repeat(auto-fit, minmax(192px, 1fr)); gap: 14px; } @media (min-width: 901px) {.nibbles .seven{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }.nibbles .seven > div{ display: block; }.nibbles .seven .mail{ border-width: 4px; box-shadow: 0 6px 18px rgba(8,8,8,0.08); flex: 1; }.nibbles .seven .mail{ perspective: 1100px; transition: box-shadow 260ms ease; }.nibbles .seven .mail .ticker{ padding: 6px 0; text-align: center; font-size: 8.5px; letter-spacing: 0.12em; line-height: 20px; }.nibbles .seven .mail .head{ padding: 5.5px 14px; }.nibbles .seven .mail .head img,.nibbles .seven .mail .head .mark{ width: 21px; height: 21px; }.nibbles /* --stagger is the iPad's row queue: where a row holds more than one card,.nibbles the card turns 240ms after the one to its left,.nibbles so the row turns one card at a time. The script writes it only when the scroll changes a card's phase,.nibbles so a tap still turns that card on the spot,.nibbles and it is 0ms everywhere else. */ .seven .mail .rot{ position: relative; transform-style: preserve-3d; transition: transform 520ms cubic-bezier(.22,.68,.16,1); transition-delay: var(--stagger, 0ms); }.nibbles .seven .mail .face-a,.nibbles .seven .mail .face-b{ backface-visibility: hidden; }.nibbles .seven .mail .face-b{ position: absolute; inset: 0; transform: rotateY(180deg); background: var(--paper-light); display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 16px 14px; }.nibbles .seven .mail .face-b .n{ font-family: var(--mono); font-size: calc(11.8px * var(--lesson-scale, 1)); line-height: calc(15px * var(--lesson-scale, 1)); letter-spacing: 0.18em; color: var(--ink-3); }.nibbles .seven .mail .face-b p{ margin: 0; font-size: calc(18.6px * var(--lesson-scale, 1)); line-height: calc(26px * var(--lesson-scale, 1)); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } @media (hover: hover) {.nibbles .seven .mail:hover .rot{ transform: rotateY(180deg); } }.nibbles .seven .mail:focus-visible .rot,.nibbles .seven .mail.is-flipped .rot{ transform: rotateY(180deg); }.nibbles .seven .mail:hover,.nibbles .seven .mail:focus-visible{ box-shadow: 0 12px 26px rgba(8,8,8,0.16); }.nibbles .seven .mail:focus-visible{ outline: 2px solid var(--evergreen); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) {.nibbles .seven .mail .rot{ transition: none; } }.nibbles .seven .mail .shot{ position: relative; margin: 0; display: block; }.nibbles .seven .mail .shot img{ display: block; width: 100%; aspect-ratio: 184 / 233; object-fit: cover; }.nibbles .seven .mail .shot figcaption{ position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; display: flex; flex-direction: column; gap: 2px; }.nibbles .seven .mail .shot .n{ font-family: var(--mono); font-size: calc(10.5px * var(--lesson-scale, 1)); line-height: calc(15px * var(--lesson-scale, 1)); letter-spacing: 0.18em; color: rgba(255,255,255,0.78); }.nibbles .seven .mail .shot b{ font-family: var(--serif); font-weight: 400; font-size: calc(26px * var(--lesson-scale, 1)); line-height: calc(31px * var(--lesson-scale, 1)); letter-spacing: -0.01em; color: #FFFFFF; }.nibbles .seven > div.cta-cell{ display: flex; flex-direction: column; }.nibbles .seven .cta-card{ flex: 1; display: block; position: relative; background: var(--bar); color: var(--on-bar); text-decoration: none; padding: 0; }.nibbles .seven .cta-card::before{ content: ""; display: block; width: 100%; aspect-ratio: 184 / 233; margin: 32px 0; }.nibbles .seven .cta-card .cta-in{ position: absolute; inset: 0; display: flex; flex-direction: column; padding: 0 40px; }.nibbles .seven .cta-card .k{ margin: 64px 0 0; font-family: var(--mono); font-size: 11px; line-height: 16px; letter-spacing: 0.12em; text-transform: uppercase; }.nibbles .seven .cta-card .big{ margin: 32px 0 auto; font-family: var(--serif); font-weight: 400; font-size: 27px; line-height: 33px; letter-spacing: -0.01em; }.nibbles .seven .cta-card .go{ align-self: center; display: inline-block; margin: 0 0 40px; padding: 0 19.4px; height: 32px; line-height: 30px; background: var(--on-bar); color: var(--bar); border: 1px solid var(--on-bar); border-radius: 3px; font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: -0.01em; white-space: nowrap; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; }.nibbles .seven .cta-card .go::after{ content: "\2192"; display: inline-block; margin-left: 0.311em; line-height: 1; transition: transform 200ms cubic-bezier(.22,.68,.16,1); } @media (hover: hover) {.nibbles .seven .cta-card:hover .go{ background: #EDE7DA; border-color: #EDE7DA; }.nibbles .seven .cta-card:hover .go::after{ transform: translateX(6px); } }.nibbles .seven .cta-card:focus-visible .go{ background: #EDE7DA; border-color: #EDE7DA; }.nibbles .seven .cta-card:focus-visible .go::after{ transform: translateX(6px); } @media (prefers-reduced-motion: reduce) {.nibbles .seven .cta-card .go,.nibbles .seven .cta-card .go::after{ transition: none; } }.nibbles .creator{ display: grid; grid-template-columns: 160px 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; } @media (max-width: 640px) {.nibbles .creator{ grid-template-columns: 1fr; } }.nibbles .face{ width: 160px; height: 160px; border-radius: 50%; background: var(--bar); color: var(--accent); display: grid; place-items: center; font-family: var(--mono); font-size: 28px; letter-spacing: 0.02em; object-fit: cover; position: relative; }.nibbles .face small{ position: absolute; bottom: -26px; left: 0; right: 0; text-align: center; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }.nibbles .who{ display: flex; flex-direction: column; gap: 12px; }.nibbles .who .name{ margin: 0; font-size: 22px; line-height: 30px; font-weight: 600; }.nibbles .who .role{ margin: -8px 0 0; font-size: 15px; color: var(--ink-3); }.nibbles .who .bio{ margin: 0; font-size: 17px; line-height: 26px; color: var(--ink-2); max-width: 58ch; }.nibbles .more{ display: inline-block; font-size: 16px; color: var(--ink); text-underline-offset: 0.2em; }.nibbles .done{ display: flex; flex-direction: column; gap: 16px; }.nibbles .done .badge{ align-self: flex-start; max-width: 100%; font-family: var(--mono); font-size: 12px; line-height: 18px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--evergreen); color: var(--on-bar); padding: 7px 12px; } @media (prefers-reduced-motion: reduce) {*{ transition: none !important; }.nibbles .fan .mail{ transform: translateX(var(--tx, -30%)) rotate(var(--r)) !important; } } /* ========================================================================== THE COOKIE BANNER, WHILE SOMEONE IS FILLING IN THE FORM The club's own banner now (see /css/gcc-consent.css): a small card that is 151px of an 844px phone screen, with all three buttons on one row — the 402px, five-line, stacked one that CookieYes drew is gone, and with it the need for the eight rules that used to re-lay-out its markup from here. What is left is one behaviour, and it is this page's own: while someone is typing in the sign-up form the card steps off the bottom of the screen and comes back when focus leaves. On a 844px phone it no longer overlaps the button anyway (card top 685, button bottom 635); on a shorter screen it would, and the visitor must have the field focused before they press the button, so this makes the press safe at any height. ========================================================================== */ @media (max-width: 900px) { /* and while someone is typing in that form the card leaves the screen altogether, whatever the phone's height — it comes back when focus leaves the form. Only here: on a wide screen the card sits in a corner and moving it would be a puzzle, not a kindness. */ html.form-in-use #cc-main .cm { transform: translateY(120%) !important; transition: transform 240ms ease !important; } }