/* ================================================================ Curious & Capable — bonus page system v3 Design language taken from the book covers. Per book, set on : --t-bg the cover field colour --t-deep darker shade for the hero band --t-dark outline / deep accent --t-badge the red corner badge --t-accent yellow accent ================================================================ */ *, *::before, *::after { box-sizing: border-box; } body.cc-cover { --t-bg: #46b23f; --t-deep: #33912e; --t-dark: #12401a; --t-badge: #d8231c; --t-accent: #ffd83d; margin: 0; background: #fff; font-family: "Poppins", system-ui, -apple-system, sans-serif; color: #22331f; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------------- top bar ---------------- */ .cvr-top { position: relative; z-index: 5; background: var(--t-dark); padding: 18px 20px 20px; text-align: center; } .cvr-top img { width: 126px; height: auto; } .cvr-badge { position: absolute; z-index: 6; top: 13px; left: 22px; background: var(--t-badge); color: #fff; font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 13.5px; line-height: 1.06; letter-spacing: .05em; text-transform: uppercase; padding: 9px 13px; border-radius: 5px; box-shadow: 0 4px 0 rgba(0,0,0,.30); transform: rotate(-4deg); } /* ---------------- hero ---------------- */ .cvr-hero { position: relative; background: var(--t-bg); padding: 40px 22px 70px; overflow: hidden; } .cvr-hero::after { content: ""; position: absolute; z-index: 2; left: -8vw; right: -8vw; bottom: -46px; height: 92px; background: #fff; border-radius: 50% 50% 0 0 / 100% 100% 0 0; } .cvr-motif { position: absolute; inset: 0; z-index: 0; opacity: .12; background-repeat: repeat; background-size: 300px 300px; } /* curved darker band behind the headline, like the cover */ .cvr-band { position: absolute; z-index: 1; inset: 0; background: radial-gradient(120% 90% at 50% -18%, var(--t-deep) 0%, var(--t-deep) 42%, transparent 72%); } .cvr-hero-inner { position: relative; z-index: 3; max-width: 1080px; margin: 0 auto; display: grid; gap: 30px; grid-template-columns: 1fr; align-items: center; } @media (min-width: 940px) { .cvr-hero.has-art .cvr-hero-inner { grid-template-columns: 1.02fr .98fr; gap: 48px; } } /* ---- the outlined cover type ---- Both layers share one grid cell so they line up exactly. */ .cvr-stack { display: grid; } .cvr-stack > * { grid-area: 1 / 1; margin: 0; } .cvr-kickwrap { margin-bottom: 4px; } .cvr-kick { font-family: "Luckiest Guy", "Baloo 2", sans-serif; font-weight: 400; font-size: clamp(18px, 2.8vw, 27px); line-height: 1.06; text-align: center; color: #fff; z-index: 2; } .cvr-kick.out { z-index: 1; color: var(--t-dark); -webkit-text-stroke: 9px var(--t-dark); text-shadow: 0 5px 0 rgba(0,0,0,.26); } .cvr-titlewrap { margin-bottom: 20px; } .cvr-head { font-family: "Luckiest Guy", "Baloo 2", sans-serif; font-weight: 400; font-size: clamp(38px, 7.8vw, 70px); line-height: 1.02; letter-spacing: .005em; text-align: center; white-space: pre-line; color: #fff; z-index: 2; } .cvr-head.out { z-index: 1; color: var(--t-dark); -webkit-text-stroke: 15px var(--t-dark); text-shadow: 0 9px 0 rgba(0,0,0,.26); } @media (max-width: 760px) { .cvr-head.out { -webkit-text-stroke-width: 10px; text-shadow: 0 6px 0 rgba(0,0,0,.26); } .cvr-kick.out { -webkit-text-stroke-width: 6px; } } .cvr-sub { color: #fff; text-align: center; font-size: clamp(16px, 2vw, 19px); font-weight: 500; line-height: 1.55; max-width: 560px; margin: 0 auto; text-shadow: 0 2px 8px rgba(0,0,0,.26); } @media (min-width: 940px) { .cvr-hero.has-art .cvr-kick, .cvr-hero.has-art .cvr-head { text-align: left; } .cvr-hero.has-art .cvr-head { font-size: clamp(38px, 4.8vw, 58px); } .cvr-hero.has-art .cvr-sub { text-align: left; margin-left: 0; } } .cvr-art { text-align: center; } .cvr-art img { width: 100%; max-width: 500px; height: auto; transform: rotate(-2.5deg); filter: drop-shadow(0 24px 34px rgba(0,0,0,.38)); } /* ---------------- white content sheet ---------------- */ .cvr-sheet { position: relative; z-index: 4; background: #fff; padding: 46px 22px 46px; } .cvr-sheet-inner { max-width: 780px; margin: 0 auto; } .cvr-h2 { font-family: "Baloo 2", sans-serif; font-weight: 800; color: var(--t-dark); font-size: clamp(25px, 4vw, 36px); line-height: 1.1; text-align: center; margin: 0 0 28px; } .cvr-list { list-style: none; margin: 0 0 38px; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 720px) { .cvr-list { grid-template-columns: 1fr 1fr; gap: 12px 20px; } } .cvr-list li { position: relative; padding: 13px 16px 13px 48px; font-size: 16.5px; line-height: 1.4; background: #f5f7f3; border-radius: 13px; } .cvr-list li::before { content: ""; position: absolute; left: 15px; top: 14px; width: 21px; height: 21px; border-radius: 50%; background: var(--t-bg); } .cvr-list li::after { content: ""; position: absolute; left: 22.5px; top: 19px; width: 5px; height: 9px; border-right: 2.6px solid #fff; border-bottom: 2.6px solid #fff; transform: rotate(43deg); } /* ---------------- form ---------------- */ .cvr-formcard { background: var(--t-dark); border-radius: 22px; padding: 30px 30px 25px; max-width: 560px; margin: 0 auto; } @media (max-width: 560px) { .cvr-formcard { padding: 24px 18px 20px; } } .cvr-formcard h3 { font-family: "Baloo 2", sans-serif; font-weight: 800; color: #fff; font-size: clamp(20px, 3vw, 26px); text-align: center; margin: 0 0 18px; } .cvr-fields { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 15px; } @media (min-width: 520px) { .cvr-fields { grid-template-columns: 1fr 1fr; } } .cvr-form input[type="text"], .cvr-form input[type="email"] { width: 100%; padding: 15px 16px; font-size: 16.5px; font-family: inherit; color: #22331f; background: #fff; border: 3px solid transparent; border-radius: 12px; } .cvr-form input::placeholder { color: #9c9c9c; } .cvr-form input:focus { outline: none; border-color: var(--t-accent); } .cvr-btn { display: block; width: 100%; background: var(--t-badge); color: #fff; font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: clamp(17px, 2.4vw, 21px); text-transform: uppercase; letter-spacing: .02em; text-align: center; text-decoration: none; padding: 17px 22px; border: none; border-radius: 14px; box-shadow: 0 6px 0 rgba(0,0,0,.34); cursor: pointer; transition: transform .08s ease, box-shadow .08s ease; } .cvr-btn:hover { transform: translateY(2px); box-shadow: 0 4px 0 rgba(0,0,0,.34); } .cvr-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0,0,0,.34); } .cvr-btn:disabled { opacity: .65; cursor: wait; } .cvr-fine { font-size: 12.5px; color: rgba(255,255,255,.7); text-align: center; margin: 14px 0 0; line-height: 1.5; } .cvr-fine a { color: rgba(255,255,255,.7); } .cvr-msg { margin: 12px 0 0; text-align: center; font-weight: 700; font-size: 15px; color: #fff; } .cvr-msg.error { color: #ffb3ae; } .cvr-msg.success { color: #b6f0c1; } /* ---------------- footer ---------------- */ .cvr-foot { background: #fff; text-align: center; color: #9a9a9a; font-size: 13px; padding: 0 20px 32px; margin: 0; } .cvr-foot a { color: #9a9a9a; } /* ---------------- thank-you variant ---------------- */ .cvr-sheet.thanks { text-align: center; } .cvr-cross { margin: 30px auto 0; max-width: 560px; padding-top: 24px; border-top: 2px dashed #e8e8e8; font-size: 16px; color: #4d4d4d; line-height: 1.55; } .cvr-cross a { color: var(--t-dark); font-weight: 600; } /* ---------------- homepage extras ---------------- */ .cvr-steps { list-style: none; margin: 0 0 34px; padding: 0; counter-reset: s; } .cvr-steps li { position: relative; padding: 18px 20px 18px 70px; margin-bottom: 12px; background: #f5f7f3; border-radius: 14px; font-size: 17px; line-height: 1.45; } .cvr-steps .n { position: absolute; left: 18px; top: 16px; width: 36px; height: 36px; border-radius: 50%; background: var(--t-bg); color: #fff; font-family: "Luckiest Guy", sans-serif; font-size: 19px; line-height: 38px; text-align: center; } .cvr-steps strong { color: var(--t-dark); } .cvr-band-label { background: #4a4a4a; color: #fff; text-align: center; padding: 15px 20px; font-family: "Luckiest Guy", sans-serif; font-size: 19px; letter-spacing: .03em; } .cvr-cats { display: grid; gap: 32px; grid-template-columns: 1fr; max-width: 1000px; margin: 0 auto; padding: 46px 24px 52px; background: #fff; } @media (min-width: 720px) { .cvr-cats { grid-template-columns: 1fr 1fr; } } .cvr-cat { text-decoration: none; color: #111; text-align: center; display: block; } .cvr-cat img { width: 100%; max-width: 420px; height: auto; } .cvr-cat span { display: block; font-family: "Luckiest Guy", sans-serif; font-size: clamp(21px, 3vw, 27px); margin-top: 12px; } .cvr-sitefoot { background: #fff; border-top: 2px solid #ececec; text-align: center; padding: 28px 20px 32px; font-size: 15px; color: #4a4a4a; } .cvr-sitefoot img { width: 118px; height: auto; margin-bottom: 12px; } .cvr-sitefoot nav a { color: #111; text-decoration: none; margin: 0 11px; } .cvr-sitefoot nav a:hover { text-decoration: underline; } .cvr-sitefoot > span { display: block; margin-top: 14px; color: #8b8b8b; font-size: 13px; } /* ---------------- plain content pages (about, legal) ---------------- */ body.cc-doc { background: #fff; } .cvr-doc-hero { background: var(--t-bg, #ef7d18); position: relative; overflow: hidden; padding: 34px 22px 42px; text-align: center; } .cvr-doc-hero .cvr-motif { opacity: .10; } .cvr-doc-hero h1 { position: relative; z-index: 2; font-family: "Luckiest Guy", sans-serif; color: #fff; font-size: clamp(28px, 5vw, 46px); margin: 0; text-shadow: 0 4px 0 rgba(0,0,0,.16); } .cvr-doc-hero p { position: relative; z-index: 2; color: rgba(255,255,255,.92); font-size: 15px; margin: 10px 0 0; } .cvr-doc { max-width: 760px; margin: 0 auto; padding: 44px 24px 56px; font-size: 17px; line-height: 1.7; color: #333; } .cvr-doc h2 { font-family: "Luckiest Guy", sans-serif; color: var(--t-dark, #8c3d02); font-size: clamp(21px, 3vw, 27px); margin: 38px 0 12px; line-height: 1.25; } .cvr-doc h2:first-child { margin-top: 0; } .cvr-doc h3 { font-size: 18px; margin: 26px 0 8px; color: #111; } .cvr-doc p { margin: 0 0 16px; } .cvr-doc ul { margin: 0 0 18px; padding-left: 22px; } .cvr-doc li { margin-bottom: 7px; } .cvr-doc a { color: var(--t-dark, #8c3d02); } .cvr-doc strong { color: #111; } .cvr-doc .aside { background: #fff6ec; border-left: 5px solid var(--t-bg, #ef7d18); border-radius: 0 12px 12px 0; padding: 16px 20px; margin: 0 0 24px; font-size: 15.5px; color: #6b4a2a; } .cvr-doc .aside strong { color: #6b4a2a; } .cvr-doc .updated { font-size: 14px; color: #8b8b8b; margin-bottom: 30px; }