/* ============================================================================= Design de Prompts — reward landing page Prof. Gustavo Reis · self-contained, no build step, no external libraries. Brand source of truth: /one-pager/one-pager.html Palette, hairlines, the lime star and the olive panels are carried over so this page reads as the same publication, not a template. Typography (aligned with the one-pager): · Geist Light (300) = display / large headings, tight negative tracking. · Urbanist = UI, labels, buttons, body copy. Only the two variable TTFs are self-hosted (~250 KB total, all weights). See the comment in index.html for the performance reasoning. ========================================================================== */ /* ---- Fonts (variable, OFL — self-hosted) ---------------------------------- */ @font-face { font-family: "Urbanist"; src: url("fonts/Urbanist-VariableFont_wght.ttf") format("truetype-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Geist"; src: url("fonts/Geist-VariableFont_wght.ttf") format("truetype-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } /* ---- Tokens --------------------------------------------------------------- */ :root { --olive: #3E4732; --olive-deep: #2E3524; --lime: #FAFF7E; --cream: #FFFCDF; --ink: #0C0C0C; --muted: #3F3F3F; --slate: #44546A; --white: #FFFFFF; --olive-soft: #E8EBD2; /* light text on dark */ --hair: #E6E4C8; /* hairline borders */ --row: #FFFEF3; /* subtle row background */ --font-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; --font-ui: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif; /* Type scale — tuned for a mature readership (presbyopia-friendly). Root stays 16px, so 1rem = 16px. Floors: · body / leads .............. 17–18px · links, controls, meta ..... 16px (never below) · small labels / legal ...... 14px (absolute floor) Line heights: 1.6 body, 1.25–1.35 large heads/leads. */ --fs-meta: 0.875rem; /* 14px — kickers, labels, legal */ --fs-label: 0.9375rem; /* 15px — captions, notes */ --fs-ui: 1rem; /* 16px — links, controls, credentials */ --fs-body: 1.0625rem; /* 17px — body copy */ --fs-lead: 1.125rem; /* 18px — lead paragraphs, buttons */ --lh-body: 1.6; --lh-lead: 1.35; --wrap: 720px; --gut: 20px; --radius: 2px; --shadow-print: 10px 10px 0 var(--lime), 10px 10px 0 2px var(--olive); --ease: cubic-bezier(.2, .7, .2, 1); } /* ---- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } [hidden] { display: none !important; } img, svg { display: block; max-width: 100%; } body { min-height: 100dvh; background: var(--cream); color: var(--ink); font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); } /* ---- Shared atoms --------------------------------------------------------- */ .star { display: inline-block; width: 18px; height: 18px; flex: none; background: var(--lime); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } .star--sm { width: 12px; height: 12px; } .kicker { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-meta); letter-spacing: .14em; text-transform: uppercase; color: var(--olive); } .kicker--lime { color: var(--lime); } .ext { font-size: .9em; } .skip-link { position: absolute; left: 12px; top: -100px; z-index: 50; background: var(--lime); color: var(--ink); font-family: var(--font-ui); font-weight: 700; padding: 12px 18px; text-decoration: none; transition: top .2s var(--ease); } .skip-link:focus { top: 12px; } /* Visible, high-contrast focus everywhere. */ :focus-visible { outline: 3px solid var(--olive); outline-offset: 2px; border-radius: 1px; } /* ---- Top bar -------------------------------------------------------------- */ .topbar { background: var(--olive); color: var(--cream); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding: 12px var(--gut); } .topbar__left { display: flex; align-items: center; gap: 8px; } .topbar__kicker { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-meta); letter-spacing: .02em; text-transform: uppercase; color: var(--lime); } .topbar__brand { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-meta); letter-spacing: -.01em; color: var(--olive-soft); white-space: nowrap; } /* ---- Hero ----------------------------------------------------------------- */ .hero { position: relative; padding: 26px 0 6px; overflow: hidden; } .hero .wrap { position: relative; z-index: 1; } .eyebrow { display: flex; align-items: center; gap: 9px; font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-ui); letter-spacing: .02em; color: var(--muted); text-wrap: balance; } .eyebrow__dot { width: 8px; height: 8px; flex: none; background: var(--olive); transform: rotate(45deg); } .hero__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.75rem, 14.5vw, 4.9rem); line-height: .92; letter-spacing: -.04em; color: var(--olive); margin: 12px 0 0; } .hero__line { display: block; } /* The lime period is the brand accent after "de Prompts". Lime on cream is ~1:1, so the glyph alone vanished. We keep the lime fill but draw it as a disc with an olive ring: olive/cream = 9.4:1 (perceptible against the page) and lime/olive = 9.1:1 (perceptible against its own ring). Same position, same lockup; the "." glyph is hidden and the box draws the dot. */ .hero__period { display: inline-block; inline-size: .18em; block-size: .18em; margin-inline-start: .05em; border: .035em solid var(--olive); border-radius: 50%; background: var(--lime); color: transparent; overflow: hidden; vertical-align: .015em; } .hero__sub { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.125rem, 4.6vw, 1.5rem); line-height: var(--lh-lead); letter-spacing: -.02em; color: var(--muted); margin-top: 10px; max-width: 26ch; text-wrap: balance; } .hero__sub mark { background: var(--lime); color: var(--ink); padding: 0 .14em; border-radius: 1px; } .hero__authority { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; font-size: var(--fs-ui); line-height: var(--lh-body); color: var(--muted); } .hero__authority strong { color: var(--olive); font-weight: 600; } .hero__authority-lines { display: block; } /* Each credential is its own block, so the break between credentials stays deliberate while each line may still reflow. `text-wrap: balance` avoids the short orphan line that the old hard
s produced at mid widths. */ .hero__credential { display: block; text-wrap: balance; } .hero__authority-dot { width: 9px; height: 9px; flex: none; margin-top: 7px; background: var(--lime); border: 1px solid var(--olive); } /* ---- Video facade --------------------------------------------------------- */ .video { margin: 20px 0 0; } .video__frame { position: relative; aspect-ratio: 16 / 9; background: var(--olive); border: 2px solid var(--olive); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-print); } .video__facade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: none; cursor: pointer; display: block; color: var(--cream); -webkit-tap-highlight-color: transparent; } .video__facade:focus-visible { outline: 3px solid var(--lime); outline-offset: -5px; box-shadow: inset 0 0 0 3px var(--olive); } .video__poster { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 18px; text-align: center; background: radial-gradient(130% 120% at 12% 0%, #4d5740 0%, var(--olive) 48%, var(--olive-deep) 100%); } .video__poster-star { width: 34px; height: 34px; } .video__poster-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.2rem, 5.6vw, 1.6rem); letter-spacing: -.03em; line-height: 1; color: var(--cream); } .video__poster-sub { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; color: var(--lime); } .video__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .video__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 62px; height: 62px; border-radius: 50%; background: var(--lime); color: var(--olive); display: grid; place-items: center; box-shadow: 0 12px 30px rgba(12, 12, 12, .4); transition: transform .25s var(--ease); } .video__play svg { width: 25px; height: 25px; margin-left: 3px; } .video__play::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--lime); animation: pulse 2.6s ease-out infinite; } .video__facade:hover .video__play, .video__facade:focus-visible .video__play { transform: translate(-50%, -50%) scale(1.08); } .video__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video__caption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-top: 16px; font-size: var(--fs-ui); } .video__alt { margin-left: auto; /* stay flush right even if a caption span is added back */ font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-ui); letter-spacing: .01em; color: var(--olive); text-decoration: none; border-bottom: 2px solid var(--lime); padding-bottom: 1px; transition: color .2s var(--ease), border-color .2s var(--ease); } .video__alt:hover { border-color: var(--olive); } @keyframes pulse { 0% { transform: scale(1); opacity: .85; } 70% { transform: scale(1.7); opacity: 0; } 100% { transform: scale(1.7); opacity: 0; } } /* ---- Recap (CRISP-E framework) -------------------------------------------- */ .recap { padding: 40px 0 8px; } .recap .kicker { margin-bottom: 16px; } /* Pull line straight from the talk: the premise before the method. */ .recap__lead { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.125rem, 4.6vw, 1.5rem); line-height: 1.3; letter-spacing: -.02em; color: var(--olive); max-width: 36ch; text-wrap: balance; margin-bottom: 20px; } .moves { list-style: none; display: grid; grid-template-columns: 1fr; gap: 10px; } /* Six CRISP-E elements: one per row on narrow phones (readability first), two-up from 480px, three-up on desktop. */ .moves--crispe { grid-template-columns: 1fr; } .move { position: relative; background: var(--white); border: 1px solid var(--hair); border-left: 4px solid var(--olive); border-radius: var(--radius); padding: 16px 18px 18px; transition: border-left-color .25s var(--ease), background .25s var(--ease); } .move__num { font-family: var(--font-display); font-weight: 300; font-size: 1.75rem; line-height: 1; color: var(--olive); opacity: .5; } .move__label { font-family: var(--font-ui); font-weight: 800; font-size: 1.125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--olive); margin-top: 6px; } .move__pt { display: block; font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-label); letter-spacing: .04em; text-transform: none; color: var(--muted); opacity: .9; margin-top: 3px; } .move__text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--muted); margin-top: 3px; text-wrap: pretty; } .move:hover { border-left-color: var(--lime); background: var(--row); } /* Compact styling inside the multi-up grid so each card stays short. */ .moves--crispe .move { padding: 15px 16px 16px; } .moves--crispe .move__num { font-size: 1.6rem; } .moves--crispe .move__label { font-size: 1rem; letter-spacing: .04em; margin-top: 5px; } .moves--crispe .move__text { font-size: var(--fs-body); line-height: 1.5; } /* ---- Primary CTA ---------------------------------------------------------- */ .cta { margin-top: 44px; background: var(--olive); color: var(--cream); padding: 38px 0 42px; position: relative; } .cta::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--lime); } .cta__lead { font-family: var(--font-ui); font-weight: 400; font-size: clamp(1.0625rem, 4.4vw, 1.5rem); line-height: var(--lh-lead); letter-spacing: -.015em; color: var(--olive-soft); margin: 14px 0 22px; max-width: 54ch; text-wrap: pretty; } .cta__lead::first-line { color: var(--cream); } .btn-wa { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 64px; padding: 16px 20px; background: var(--lime); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: 5px 5px 0 var(--ink); font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-lead); line-height: 1.2; letter-spacing: -.01em; text-align: center; text-decoration: none; transition: transform .16s var(--ease), box-shadow .16s var(--ease); } .btn-wa__icon { width: 24px; height: 24px; flex: none; } .btn-wa:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); } .btn-wa:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); } .btn-wa:focus-visible { outline-color: var(--cream); outline-offset: 4px; } .cta__note { margin-top: 16px; font-size: var(--fs-label); letter-spacing: .01em; color: var(--olive-soft); text-align: center; } /* ---- Optional email capture ---------------------------------------------- */ .email { padding: 44px 0 14px; } .email__card { background: var(--white); border: 1px solid var(--hair); border-radius: var(--radius); padding: 24px 20px 22px; } .email__title { font-family: var(--font-ui); font-weight: 700; font-size: clamp(1.125rem, 4.2vw, 1.4rem); letter-spacing: -.02em; color: var(--olive); margin-bottom: 16px; } .email__form { display: grid; gap: 14px; } .field { display: grid; gap: 6px; } .field label { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-meta); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .field input { width: 100%; font-family: var(--font-ui); font-size: var(--fs-body); color: var(--ink); background: var(--cream); border: 1px solid var(--hair); border-radius: var(--radius); padding: 14px 14px; transition: border-color .2s var(--ease), background .2s var(--ease); } .field input::placeholder { color: #6f6f61; } .field input:hover { border-color: #cfcda9; } .field input:focus-visible { outline: 3px solid var(--olive); outline-offset: 1px; background: var(--white); } .btn-send { min-height: 52px; margin-top: 2px; background: var(--olive); color: var(--cream); border: 0; border-radius: var(--radius); font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-body); letter-spacing: .01em; cursor: pointer; transition: background .2s var(--ease), transform .16s var(--ease); } .btn-send:hover { background: var(--olive-deep); } .btn-send:active { transform: translateY(1px); } .btn-send[disabled] { opacity: .6; cursor: progress; } .email__privacy { font-size: var(--fs-label); color: var(--muted); } .email__status { font-size: var(--fs-ui); font-weight: 500; color: var(--olive); border-top: 1px solid var(--hair); padding-top: 10px; } .email__status[data-state="ok"] { color: var(--olive); } .email__status[data-state="error"] { color: #8a2b1f; } /* ---- Footer --------------------------------------------------------------- */ .foot { margin-top: 40px; background: var(--olive-deep); color: var(--olive-soft); padding: 30px 0 34px; border-top: 5px solid var(--lime); } .foot__motto { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-body); line-height: 1.45; letter-spacing: .02em; color: var(--cream); text-wrap: balance; margin-bottom: 16px; } .foot__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: var(--fs-ui); margin-bottom: 14px; } .foot__links a { color: var(--olive-soft); text-decoration: none; border-bottom: 1px solid rgba(232, 235, 210, .35); padding-bottom: 1px; transition: color .2s var(--ease), border-color .2s var(--ease); } .foot__links a:hover { color: var(--lime); border-color: var(--lime); } .foot__sep { color: rgba(232, 235, 210, .5); } .foot__legal { font-size: var(--fs-meta); line-height: var(--lh-body); color: rgba(232, 235, 210, .82); text-wrap: pretty; } /* ---- Motion --------------------------------------------------------------- */ @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } html.js [data-hero] { animation: rise .85s var(--ease) both; } html.js [data-hero="1"] { animation-delay: .04s; } html.js [data-hero="2"] { animation-delay: .12s; } html.js [data-hero="3"] { animation-delay: .22s; } html.js [data-hero="4"] { animation-delay: .30s; } html.js [data-hero="5"] { animation-delay: .38s; } html.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); } html.js [data-reveal].is-visible { opacity: 1; transform: none; } /* ---- Responsive ----------------------------------------------------------- */ @media (min-width: 480px) { /* Phones with a little more room can afford the two-up CRISP-E grid. */ .moves--crispe { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 479px) { /* Wide-gap layout instead of dot separators so a wrapped link group never starts a line with a stray separator. */ .foot__links { gap: 8px 18px; } .foot__sep { display: none; } } @media (min-width: 620px) { :root { --gut: 32px; } .hero { padding-top: 44px; } .video__play { width: 76px; height: 76px; } .video__play svg { width: 30px; height: 30px; } .moves, .moves--crispe { grid-template-columns: repeat(3, 1fr); gap: 14px; } .move { display: flex; flex-direction: column; } .moves--crispe .move { padding: 16px 17px 17px; } .moves--crispe .move__label { font-size: 1.0625rem; } .moves--crispe .move__text { font-size: var(--fs-body); } .recap { padding-top: 54px; } .cta { margin-top: 56px; padding: 50px 0 54px; } } @media (min-width: 900px) { .hero__title { font-size: 4.9rem; } .video { margin-top: 28px; } } /* ---- Accessibility: reduced motion --------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js [data-hero] { animation: none; opacity: 1; transform: none; } html.js [data-reveal] { opacity: 1; transform: none; transition: none; } .video__play::after { animation: none; } *, *::before, *::after { transition-duration: .01ms !important; } }