/* The public giveaway page. Branded theme, no app shell — this is the one page Tom's audience sees, so it is a landing page rather than a tool. */ /* Spacing, as one number. * * 15px between siblings and around every control; 12px is the floor, and * nothing on this page is allowed closer than that to anything else. Written * as tokens so the number is in one place rather than sprinkled as 8, 10, 12 * and 14 through six hundred lines, which is how the page came to have gaps * of every size and several that were too tight to aim at on a phone. * * Type, likewise: 14px is the floor for anything an entrant reads, and the * only things allowed under it are the small capital labels under the three * figures at the top, which are 13px because that is what they are in the * design this follows. */ .gw-body { /* Named for this page rather than reusing `--gap`, which is a global token meaning 12px everywhere else in the app — one word cannot be two numbers. Each of these is a starting point: the script overwrites them with whatever the giveaway says, so a number moved in the Design tab moves the page without anything here changing. */ --gw-gap: 15px; --gw-gap-min: 12px; --gw-pad: 15px; --gw-pad-x: 15px; --gw-pad-y: 15px; --gw-size-stat: 32px; --gw-size-stat-label: 13px; --gw-font: inherit; --gw-size-heading: 34px; --gw-size-body: 16px; --gw-size-label: 14px; --gw-size-button: 15px; font-family: var(--gw-font, inherit); } .gw-body { padding-bottom: env(safe-area-inset-bottom); } .gw-wrap { max-width: 680px; margin: 0 auto; /* One side at a time rather than the shorthand. The shorthand ends up as `max(...) var(...) 60px`, which reads as five values to anything that splits on spaces — and the sheet is read, by the check that keeps the outer padding above the floor. 15 is the default and 12 the least the Design tab will accept, both comfortably over that floor. */ padding-top: max(var(--gw-pad-y,15px), env(safe-area-inset-top)); padding-left: var(--gw-pad-x,15px); padding-right: var(--gw-pad-x,15px); padding-bottom: 60px; display: flex; flex-direction: column; gap: var(--gw-gap, 15px); } .gw-head { text-align: center; padding: 10px 0 4px; } .gw-head .brandmark { height: 74px; margin: 0 auto 10px; } .gw-title { font-family: var(--heading-font); font-weight: 800; /* Tom's number, and it still gives way on a narrow phone rather than running off the side. */ font-size: min(var(--gw-size-heading, 34px), 9vw); line-height: 1.08; margin: 0; color: var(--cream, var(--ink)); } .gw-closed { color: var(--go); font-weight: 700; margin: 8px 0 0; } .gw-countdown { display: flex; gap: var(--gw-gap-min, 12px); justify-content: center; margin: 6px 0 0; } .cd-unit { display: flex; flex-direction: column; align-items: center; background: rgba(243,237,227,.10); border: 1px solid rgba(243,237,227,.20); border-radius: var(--r); padding: 10px 14px; min-width: 72px; } .cd-unit b { font-size: clamp(28px, 7vw, 34px); font-variant-numeric: tabular-nums; color: var(--cream, var(--ink)); line-height: 1; } .cd-unit i { font-style: normal; font-size: 13px; letter-spacing: .8px; text-transform: uppercase; color: rgba(243,237,227,.66); margin-top: 3px; } .gw-tz { text-align: center; font-size: 14px; color: rgba(243,237,227,.6); margin: 0; } .gw-card { background: var(--card); color: var(--ink); border-radius: var(--r-lg, 18px); box-shadow: var(--shadow); /* The distance from the words to the edge of the card — up and down, and left and right, which are two questions. Named, because a desk adds to both and anything that wants to reach the card's edge from inside has to know the number that was actually used. */ --gw-card-x: var(--gw-pad-x, 15px); --gw-card-y: var(--gw-pad-y, 15px); padding: var(--gw-card-y) var(--gw-card-x); } .gw-card h2 { font-family: var(--heading-font); font-size: 19px; margin: 0 0 10px; } .gw-lead { font-size: 16.5px; line-height: 1.5; margin: 0 0 12px; } .gw-small { font-size: var(--gw-size-label, 14px); color: var(--ink-soft); line-height: 1.45; margin: 8px 0 0; } .gw-rules { white-space: pre-wrap; font-size: 14.5px; line-height: 1.55; margin: 0; } .gw-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .gw-points li { font-size: 15px; display: flex; gap: 9px; align-items: baseline; } .gw-points b { /* The deeper accent, like the pill on a way-to-enter row. Same colour, same size, same reason: white on the plain accent is 4.0:1 and this is 13.5px. */ flex: 0 0 auto; background: var(--go-deep, #d63a20); color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 14px; font-variant-numeric: tabular-nums; } .gw-prizes { display: flex; flex-wrap: wrap; gap: 12px; } .gw-prize { flex: 1 1 180px; display: flex; flex-direction: column; gap: 4px; } .gw-prize img { width: 100%; border-radius: var(--r-sm); display: block; } .gw-prize b { font-size: 15.5px; } .gw-prize span { font-size: 14px; color: var(--ink-soft); } .gw-postlinks { display: flex; flex-wrap: wrap; gap: var(--gw-gap-min, 12px); margin-top: var(--gw-gap, 15px); } .gw-btn { /* 700, not 600. White on the accent is 4.0:1, which clears the bar for bold text at this size and does not clear it otherwise — and a button on a giveaway page for an audience that skews older is the last place to be just under. */ display: inline-flex; align-items: center; justify-content: center; font: inherit; font-weight: 700; font-size: var(--gw-size-button, 15px); background: var(--go); color: #fff; border: 1px solid var(--go); /* Both Tom's. The height is a minimum rather than a fixed number, so a button whose words wrap still holds them. */ border-radius: calc(var(--gw-btn-round, 10) * 1px); min-height: var(--gw-btn-h, 46px); padding: 12px 18px; cursor: pointer; text-decoration: none; } .gw-btn:active { transform: translateY(1px); } /* Small in words, not in target. Every one of these is something an entrant presses on a phone — copy the link, check in, log out — and 36px is under the size a thumb reliably hits. The type stays 13px; the box does not. */ .gw-btn-small { padding: 7px 14px; font-size: 14px; min-height: min(44px, var(--gw-btn-h, 46px)); } .gw-btn[disabled] { opacity: .55; pointer-events: none; } .gw-count { text-align: center; } .gw-bignum { font-family: var(--heading-font); font-weight: 800; font-size: clamp(40px, 12vw, 62px); line-height: 1; color: var(--go); font-variant-numeric: tabular-nums; } .gw-biglabel { font-size: 14px; color: var(--ink-soft); margin-top: 2px; } .gw-ms { margin-top: 12px; text-align: left; } .gw-ms-label { font-size: 14px; color: var(--ink-soft); display: block; margin-bottom: 4px; } .gw-ms.reached .gw-ms-label { color: var(--go); font-weight: 600; } .gw-bar { height: 10px; background: #EEE7DA; border-radius: 999px; overflow: hidden; } .gw-bar-fill { height: 100%; background: var(--go); transition: width .4s ease; } .gw-form { display: flex; flex-wrap: wrap; gap: var(--gw-gap-min, 12px); margin-top: var(--gw-gap, 15px); } .gw-input { flex: 1 1 200px; min-width: 0; font: inherit; font-size: 16px; padding: 12px 13px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #FBF7F0; color: var(--ink); } .gw-claimed { margin-top: 12px; background: #F1F6F2; border: 1px solid #D6E4DA; border-radius: var(--r-sm); padding: 12px 13px; font-size: 15px; } .gw-ref { margin-top: var(--gw-gap, 15px); display: flex; flex-wrap: wrap; gap: var(--gw-gap-min, 12px); align-items: center; } .gw-reflink { flex: 1 1 220px; font-size: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; overflow-wrap: anywhere; } .gw-pick-body { display: flex; gap: 13px; align-items: flex-start; } .gw-pick-body img { width: 96px; height: 96px; object-fit: cover; flex: 0 0 auto; border-radius: var(--r-sm); border: 1px solid var(--line); } /* The links in the consent line — "giveaway rules", "privacy policy". They were the accent colour on a cream card, 3.4:1, and these two in particular are the ones an entrant is being asked to have read. Underlined as well as coloured, so they are still links to somebody who does not see the colour. */ .gw-link { color: #B22B15; font-weight: 600; text-decoration: underline; display: inline-block; margin-top: 8px; } .gw-link:hover { text-decoration: underline; } /* The compliance lines are small but never hidden. */ .gw-rule { font-style: italic; } .gw-disclosure { border-top: 1px solid var(--line); padding-top: 8px; } .gw-drawn .gw-winner { font-size: 16px; font-weight: 600; padding: 6px 0; border-bottom: 1px solid var(--line); } .gw-drawn .gw-winner:last-of-type { border-bottom: none; } .gw-foot { text-align: center; padding: 6px 4px 0; align-items: center; } .gw-foot .gw-small { color: rgba(243,237,227,.55); } @media (min-width: 700px) { /* Roomier at the top on a desk, and still Tom's number: a flat 40 overruled the vertical edge-spacing control entirely. */ .gw-wrap { padding-top: calc(var(--gw-pad-y,15px) + 25px); } /* Roomier on a desk, and still Tom's number: the edge spacing he set, plus a little. It was a flat 22/24/20, which quietly overruled the control that is supposed to decide this. */ .gw-card { --gw-card-x: calc(var(--gw-pad-x,15px) + 9px); --gw-card-y: calc(var(--gw-pad-y,15px) + 7px); } } /* The feature image or video: Gleam's "Feature media", 1080x567 in their guidance, so a 16:9-ish box that never grows taller than a phone screen. */ .gw-feature { border-radius: 16px; overflow: hidden; line-height: 0; box-shadow: 0 10px 30px rgba(0,0,0,.35); background: rgba(0,0,0,.25); } .gw-feature img, .gw-feature video { width: 100%; height: auto; max-height: 60vh; object-fit: cover; display: block; } /* The description under the title. Cream on the dark ground, and readable: the ground can be a photograph, so it gets its own shadow rather than relying on whatever is behind it. */ .gw-desc { margin: 8px 0 0; font-size: 16.5px; line-height: 1.55; color: var(--cream, #f3ede3); text-shadow: 0 1px 3px rgba(0,0,0,.45); } /* Everything that sits directly on the ground rather than on a card. The ground can be a photograph with a white worktop in it, so these carry their own contrast instead of trusting what is behind them. */ .gw-title, .gw-tz, .gw-closed, .gw-countdown b, .gw-countdown span { text-shadow: 0 1px 3px rgba(0,0,0,.5); } .gw-on-light .gw-title, .gw-on-light .gw-tz, .gw-on-light .gw-closed, .gw-on-light .gw-countdown b, .gw-on-light .gw-countdown span { text-shadow: none; } /* A light background flips the type that sits directly on it. The cards keep their own colours — they are cream with dark ink either way. */ .gw-on-light .gw-title, .gw-on-light .gw-desc, .gw-on-light .gw-closed, .gw-on-light .gw-tz, .gw-on-light .gw-countdown b { color: #2b1114; text-shadow: none; } .gw-on-light .gw-countdown span { color: #6d4e50; } /* The consent tick and the line about the terms. Both sit inside the entry form, where the decision is being made. */ .gw-consent { /* Its own line. The form is a wrapping flex row, so without a full-width basis the tick box lands beside the handle field and reads as a label for it. */ flex: 1 1 100%; display: flex; gap: 9px; align-items: flex-start; font-size: 14px; line-height: 1.45; margin: 2px 0 0; } .gw-consent input { margin-top: 3px; flex: 0 0 auto; width: 18px; height: 18px; } .gw-agree { flex: 1 1 100%; margin: 4px 0 0; } /* The captcha widget draws itself into this. It needs a full row of its own and a little air, and nothing else from us — the provider styles the box. */ .gw-captcha { flex: 1 1 100%; margin: 4px 0 2px; } /* The shop link. Quieter than a way to enter, because it is not one: no points pill, a softer edge, and it sits apart from the list. */ .gw-store { border: 1px dashed var(--line); background: color-mix(in srgb, var(--card) 92%, transparent); } .gw-store h2 { margin-bottom: 4px; } .gw-store-note { margin-top: 8px; opacity: .8; } .gw-share-text { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,.05); font-style: italic; } .gw-next { margin-top: 10px; display: inline-block; } /* receipt */ .gw-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; } .gw-k { color: var(--ink-soft); } .gw-v { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } /* A receipt that a later draw replaced. Loud enough that nobody reads the winner's name below it and believes it is the standing result. */ .gw-superseded { border-left: 4px solid var(--warn, #B8860B); background: #FFF8E8; color: #4A3A12; } .gw-superseded h2 { color: #7A5C10; } .gw-superseded .gw-btn { margin-top: 10px; background: #7A5C10; border-color: #7A5C10; } /* Sign-in buttons. Brand marks rather than logos — no external images can be loaded here, and a wrong-looking logo is worse than a clean initial. */ .gw-social { display: flex; flex-direction: column; gap: var(--gw-gap-min, 12px); margin: var(--gw-gap, 15px) 0 4px; } /* "Log in with", over the row rather than beside it. */ .gw-social-label { flex: 1 1 100%; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; opacity: .72; margin-bottom: 2px; } .gw-social-btn { gap: 10px; background: var(--card); color: var(--ink); border: 1px solid var(--line); font-weight: 600; } .gw-social-btn.is-facebook { background: #1877F2; border-color: #1877F2; color: #fff; } .gw-social-btn.is-google { background: #fff; color: #1F1F1F; border-color: #DADCE0; } .gw-social-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-weight: 800; font-size: 14px; } .gw-social-btn.is-facebook .gw-social-mark { background: #fff; color: #1877F2; } .gw-social-btn.is-google .gw-social-mark { background: #4285F4; color: #fff; } .gw-or { text-align: center; font-size: 14px; color: var(--ink-soft); margin: 10px 0 2px; display: flex; align-items: center; gap: 10px; } .gw-or::before, .gw-or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); } /* The counter: your entries first, because that is what they came back for. */ .gw-counter { text-align: left; } /* The icon on a way-to-enter row, in that card's own colour. Facebook blue, TikTok black, and whatever Tom picked for the rest. It is what lets a list of twelve be scanned rather than read. */ /* The visit-and-finish flow: the link button, then whatever finishes it. */ .gw-visit { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; } .gw-visit .gw-btn.is-waiting { font-variant-numeric: tabular-nums; opacity: .8; } .gw-visit-q { flex-direction: column; align-items: stretch; gap: 5px; } .gw-way-icon { flex: 0 0 auto; width: var(--gw-size-way-icon, 30px); height: var(--gw-size-way-icon, 30px); border-radius: calc(var(--gw-size-way-icon, 30px) * .27); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; background: #4A4039; color: #fff; } /* On a pale colour — Snapchat yellow is the one — white would vanish. */ .gw-way-icon.is-pale { color: #221E1B; } .gw-tally { display: flex; gap: var(--gw-gap, 15px); flex-wrap: wrap; } .gw-tally-cell { flex: 1 1 92px; min-width: 92px; text-align: center; background: #FBF7F0; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 8px 10px; } /* The same deeper red: "your entries" under the number is 12px. */ .gw-tally-cell.is-you { background: var(--go-deep, #d63a20); border-color: var(--go-deep, #d63a20); } .gw-tally-cell.is-you b, .gw-tally-cell.is-you span { color: #fff; } .gw-tally-cell b { display: block; font-family: var(--heading-font); font-weight: 800; font-size: clamp(24px, 7vw, 32px); line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); } .gw-tally-cell span { display: block; font-size: 13px; letter-spacing: .3px; color: var(--ink-soft); margin-top: 5px; } .gw-signout { background: none; color: var(--ink-soft); border-color: var(--line); margin-top: 10px; } /* Ways to enter. Locked rows stay legible — they are the argument for entering, not a wall. */ .gw-ways { display: flex; flex-direction: column; gap: 2px; margin-top: var(--gw-gap-min, 12px); } /* The ways heading is the show/hide control. A separate little "hide" link beside a heading is a second thing to aim at; the heading is already the right size for a thumb. */ /* A bar, not a card. * * "Show prizes" and "The rules, in short" were 90px tall each, because they * were headings inside a card with the card's own padding around them — * two thirds of a phone screen spent on two things nobody has opened yet. * They are the height of a login button now: 46px, the same as Email and * Google beside them, so a column of them reads as a list of controls. */ .gw-ways-toggle { display: flex; align-items: center; gap: var(--gw-gap-min, 12px); width: 100%; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; text-align: left; /* Tom's number, and a minimum rather than a fixed height: a bar whose label wraps on a phone has to be able to hold it. */ min-height: var(--gw-bar-h, 46px); height: auto; } /* The bar's own label sits between body text and a heading. */ .gw-ways-title { flex: 1 1 auto; font-weight: 700; font-size: calc(var(--gw-size-body, 16px) + 3px); } /* The chevron is drawn in app.css and is the same in every bar in the app. */ .gw-way { /* Air above and below every row, so the thing you press is never within a thumb's width of the row above it. Its own number now: the entry rows were spaced by the same one that separates cards. */ display: flex; align-items: center; gap: var(--gw-gap-icon, 15px); padding: var(--gw-gap-rows, 15px) 0; border-bottom: 1px solid var(--line); cursor: default; } /* A row that opens when it is pressed says so. */ .gw-way.is-openable { cursor: pointer; } .gw-way.is-openable:hover .gw-way-body b { text-decoration: underline; } .gw-way:last-child { border-bottom: none; } /* The badge at the end of the row. One box, four states. * * White on #d63a20 is 4.5:1, and the number in here is the one thing on the * row somebody has to be able to read. Its colour, its size, its padding and * its corners are all Tom's. */ .gw-way-pts { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; justify-content: center; /* Tom's colour if he set one, and the deeper shade of the accent if not — the plain accent is a button colour, not a colour to put small white words on. The ink follows the colour rather than being white whatever it lands on: a pale pill with white on it is an empty shape, and the number in it is the reason anybody is reading the row. */ background: var(--gw-pill-colour, var(--go-deep, #d63a20)); color: var(--gw-pill-ink, #fff); border-radius: calc(var(--gw-pill-round, 999) * 1px); padding: calc(var(--gw-pill-pad, 10px) * .45) var(--gw-pill-pad, 10px); font-size: var(--gw-size-pill-number, 14px); font-variant-numeric: tabular-nums; line-height: 1.1; min-height: calc(var(--gw-size-pill-number, 14px) + 12px); } /* Repeatable: what it is worth, and how often, one under the other. */ .gw-way-pts.has-sub { flex-direction: column; gap: 0; } .gw-way-pts .gw-pill-sub { font-size: var(--gw-size-badge-sub, 14px); opacity: .85; line-height: 1.1; } .gw-way-pts .gw-pill-text { font-size: var(--gw-size-badge-text, 14px); } /* Done. Green, and which green says whether it is done for good or for now. */ .gw-way-pts.is-complete { background: #1F6F54; } .gw-way-pts.is-period { background: #2E8B67; } .gw-way-pts.is-complete svg, .gw-way-pts.is-period svg { width: 1.05em; height: 1.05em; } /* A locked row still has to say what it is worth. The pill kept its white text on a pale grey — 1.6:1, which is a shape with nothing readable in it, on most of the rows on the page for anybody who has not entered yet. That number is the reason they are reading the row. */ .gw-way.is-locked .gw-way-pts { background: #C9CFC9; color: #3A342F; } /* A finished row's badge is the green one the state gives it — this said grey for every done row and painted over both of them. */ .gw-way.is-done .gw-way-pts { color: #fff; } .gw-way-pts.is-complete, .gw-way-pts.is-period { color: #fff; } /* Basis 0, not auto. With auto, a long title ("Comment on Facebook today") sets the body's width from its content, the row runs out of space and the padlock — which is allowed to wrap on a phone so the code form can — dropped onto a line of its own at the far left. Basis 0 makes the title wrap instead, which is what should give. */ .gw-way-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; } /* The title's own size, and the row's own size for everything under it. Both were the page's body text, so making the description bigger made the entry rows bigger with it. */ .gw-way-body { font-size: var(--gw-size-ways, 14px); } .gw-way-body b { font-size: var(--gw-size-way-title, 15px); display: block; } /* One line per entry, cut rather than wrapped, when the giveaway says so. */ .gw-ways.is-one-line .gw-way-body b, .gw-ways.is-one-line .gw-way-body > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gw-way.is-locked .gw-way-body b { color: var(--ink-soft); } .gw-way-earned { font-size: 14px; color: var(--go); font-weight: 600; } .gw-way-tick { color: var(--go); font-size: 18px; flex: 0 0 auto; } .gw-way-lock { opacity: .5; flex: 0 0 auto; } .gw-codeform { display: flex; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; } .gw-codeform .gw-input { flex: 0 1 108px; padding: 8px 10px; font-size: 15px; } @media (max-width: 520px) { /* The row keeps its shape on a phone: icon, words, badge, all on one line with the words giving way. It used to wrap, which dropped the badge onto a line of its own under the title — three rows deep for a list of twelve. The expanded part is the one thing allowed onto its own line, and it asks for that itself. */ .gw-way { flex-wrap: wrap; } /* The words give way; nothing else does. The body was `flex: 1 1 60%`, so a long title held 60% of the row open and pushed the badge and the padlock onto a line of their own — three rows deep for a list of twelve. A zero basis lets it shrink to whatever is left. */ .gw-way > .gw-way-body { flex: 1 1 0; min-width: 0; } .gw-way > .gw-way-pts, .gw-way > .gw-way-lock { margin-left: auto; } .gw-way > .gw-way-pts + .gw-way-lock { margin-left: 8px; } .gw-codeform { width: 100%; } .gw-codeform .gw-input { flex: 1 1 auto; } /* Keep the card readable when it has a button on it. Without a floor the body shrank to a few characters a line and "I did this today" took most of the row. Below this width the button drops to its own line instead. */ /* A row that has BOTH a badge and its own button — the daily check-in is the only one — puts the button on its own line rather than squeezing it in beside the words and the badge. */ .gw-way > .gw-btn-small { flex: 1 1 100%; margin-left: calc(var(--gw-size-way-icon, 30px) + var(--gw-gap-icon, 15px)); } } /* "✅ counted" on a blog entry. * * This reassurance earns its space in a way the others do not. A comment left * on a recipe post travels to Hyvor and comes back to us minutes later, so * without a mark here an entrant has no way at all of knowing it landed — and * the natural response to silence is to comment again. */ .gw-way-counted { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--go, #2E6B4F); white-space: nowrap; } /* The public terms and rules. Plain, readable, no chrome: it is a document, and somebody reading it is checking one specific thing. */ .legal-page { background: var(--ivory); } .legal { max-width: 46rem; margin: 0 auto; padding: 28px 20px 60px; line-height: 1.55; font-size: 15.5px; color: var(--ink); } .legal h1 { font-size: 22px; margin: 0 0 18px; } .legal p { margin: 0 0 14px; } .legal ul { margin: 0 0 14px; padding-left: 20px; } .legal li { margin-bottom: 4px; } .legal-back { margin-top: 28px; font-size: 14px; } /* The line that decides whether somebody finishes the first step. A promise rather than a refusal: it says what they get, not what they cannot have. */ /* The line that says what finishing the step above is worth. It is the most persuasive sentence on the page, and it was written in the accent colour on a tenth of the accent colour — 3.4:1 at 14px. */ .gw-unlock { margin: 10px 0; padding: 10px var(--gw-offer-pad, 12px); border-radius: calc(var(--gw-offer-round, 12) * 1px); background: color-mix(in srgb, var(--go, #2E6B4F) 10%, transparent); /* Deeper again than the pills: this one is text rather than a label on a solid block, and it sits on a tinted background rather than a white one. #B22B15 reads at 5.2:1 there. */ color: #B22B15; font-weight: 700; font-size: 14px; } /* Said to the entrant, not only in the admin. Being told plainly that we take their word for it is the reason they believe the ones that are checked. */ .gw-way-honor { font-size: 13px; color: var(--ink-soft, #6B625A); opacity: .9; } .gw-way-again { font-size: 13px; color: var(--go, #2E6B4F); font-weight: 650; } /* Day four should not look like day one. */ .gw-welcome { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--go, #2E6B4F) 8%, transparent); display: flex; flex-direction: column; gap: 3px; } .gw-welcome b { font-size: 14px; color: var(--go, #2E6B4F); } .gw-welcome span { font-size: 14px; color: var(--ink-soft, #6B625A); } /* Entrant classes the script sets that nothing defined. Each is small; the point is that a class with no rule is how a whole page comes to look unstyled without anything reporting a fault. */ .gw-how { margin-top: var(--space, 12px); } .gw-step1 { margin-top: var(--space, 12px); } .gw-pick { margin-top: var(--space, 12px); } /* The primary action on the entrant page — the one button that must not be mistaken for anything else. */ .gw-btn-go { font-weight: 700; } /* A draft being previewed by its owner. Deliberately loud and at the very top: a preview that looks exactly like the real page is how somebody comes to believe a draft is live. */ .gw-preview-bar { background: #FDF3E9; border: 1px solid #F3DEC8; border-left: 4px solid #A8341F; border-radius: 12px; padding: 12px 15px; margin-bottom: 18px; font-size: 14px; line-height: 1.5; color: #6B4A21; } .gw-preview-bar b { display: block; color: #A8341F; margin-bottom: 2px; } /* Test-entrant mode is louder still than a preview, because here the buttons really do work and rows really are written. */ .gw-test-bar { background: #FFF7E0; border-color: #F0DCA0; border-left-color: #B07C00; } .gw-test-bar b { color: #8A5A00; } .gw-test-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; } .gw-test-count { font-weight: 700; color: #8A5A00; } /* Its own class, not .chip: the branded theme styles chips for a dark page, and on this cream banner that came out as pale text on pale — invisible on the phone. */ .gw-test-clear { font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; background: #fff; color: #8A5A00; border: 1px solid #E7CB7A; border-radius: 999px; padding: 6px 12px; } /* The data-deletion page is the only one here with a list on it. */ .gw-list { margin: 8px 0 0; padding-left: 20px; line-height: 1.6; } .gw-list li { margin: 4px 0; } .gw-test-clear:hover { background: #FFF6DD; } .gw-test-clear:disabled { opacity: .5; cursor: default; } .is-hidden { display: none !important; } /* Inside somebody else's page. No page-level scrolling of our own: the host page scrolls, and the frame grows to fit what is in it. */ body.is-embedded { overflow: hidden; } /* Formatting Tom wrote, on the entrant's page. Bold, italics, a list and a link — the same short list the server keeps. */ .gw-desc p { margin: 0 0 8px; } .gw-desc p:last-child { margin-bottom: 0; } .gw-desc ul, .gw-desc ol { margin: 0 0 8px; padding-left: 20px; } .gw-desc { font-size: var(--gw-size-body, 16px); line-height: 1.55; } .gw-desc a, .gw-way-body a { color: inherit; text-decoration: underline; } .gw-way-body ul, .gw-way-body ol { margin: 2px 0; padding-left: 18px; } /* ---------- the band across the top ---------- */ /* Three numbers, each on its own coloured rule. It sits directly on the burgundy rather than in a cream card: the top of the page is the picture, the title and these, and a card around them made a fourth box before the prizes. */ .gw-stats { margin: 2px 0 0; } .gw-statbar { display: flex; gap: var(--gw-gap, 15px); align-items: stretch; } .gw-stat { /* Three equal columns, each centred on itself — so the middle one is centred on the widget. `overflow: hidden` is the guarantee: a label wider than its column used to run out of it and across its neighbour, which at 390 put YOUR ENTRIES through TOTAL ENTRIES. Nothing can leave its own column now, whatever it is set to. */ flex: 1 1 0; min-width: 0; text-align: center; overflow: hidden; padding: 10px 6px 0; border-bottom: var(--rule-weight, 3px) solid var(--rule, rgba(243,237,227,.35)); } .gw-stat b { display: block; font-family: var(--heading-font); font-weight: 800; /* Its own size, and its own from the label under it. */ font-size: min(var(--gw-size-stat, 32px), 9vw); line-height: 1.05; color: var(--cream, var(--ink)); font-variant-numeric: tabular-nums; } .gw-stat span { display: block; font-size: var(--gw-size-stat-label, 13px); /* And it never spills: cut with an ellipsis rather than crossing into the column beside it. */ overflow: hidden; text-overflow: ellipsis; letter-spacing: .06em; text-transform: uppercase; color: rgba(243,237,227,.72); margin: 4px 0 8px; /* One line each. "YOUR ENTRIES" wrapping while the other two did not made the band look broken rather than tight. */ white-space: nowrap; } @media (max-width: 420px) { /* A third of a phone is 110px, and "TOTAL ENTRIES" needs every one of them — so the letter-spacing goes and the size gives way a little rather than the words being cut. */ .gw-stat span { letter-spacing: 0; /* Gives way to fit the column, but never below 13 — which is the floor these labels are allowed and the size they are by default. */ font-size: max(13px, min(var(--gw-size-stat-label, 13px), 3.4vw)); } .gw-statbar { gap: var(--gw-gap-min, 12px); } /* And the column gives up its side padding rather than the label giving up a letter. At 390 a third of the screen is 112px, 6px of padding each side leaves 100, and "TOTAL ENTRIES" at its floor size wants 101. */ .gw-stat { padding-left: 2px; padding-right: 2px; } } /* The three rules. "Yours" is the accent, because it is the one that is about the person reading; the other two are quieter on purpose. */ /* Each rule is its own colour and its own thickness, set per giveaway. The three below are what they are when nobody has chosen. */ .gw-stat.is-you { --rule: var(--gw-rule-you, var(--go)); --rule-weight: var(--gw-rule-you-weight, 3px); } .gw-stat.is-all { --rule: var(--gw-rule-all, rgba(243,237,227,.45)); --rule-weight: var(--gw-rule-all-weight, 3px); } .gw-stat.is-time { --rule: var(--gw-rule-time, #E8B23A); --rule-weight: var(--gw-rule-time-weight, 3px); } /* Loading, and failing to load. The retry is a real button rather than a line of text, because "try again" that cannot be pressed is worse than saying nothing. */ .gw-statnote { display: flex; flex-wrap: wrap; gap: var(--gw-gap, 15px); align-items: center; justify-content: center; padding: var(--gw-gap-min, 12px) 0 6px; color: rgba(243,237,227,.8); font-size: 14px; } /* ---------- who you are, or how to sign in ---------- */ .gw-me { display: flex; flex-direction: column; gap: var(--gw-gap-min, 12px); } .gw-me:empty { display: none; } .gw-me .gw-small { color: rgba(243,237,227,.78); margin: 0; } /* Everything in here used to live inside a cream card and was coloured for one — dark ink, a white link box, a grey outline button. On the burgundy ground all three of those disappear, so each is restated rather than inherited. The rule is the same one the rest of this page follows: cream type on the dark, and anything that has to be read is at least 4.5:1. */ .gw-me .gw-welcome { background: rgba(243,237,227,.10); border: 1px solid rgba(243,237,227,.20); border-radius: var(--r); padding: 10px 12px; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; } .gw-me .gw-welcome b { color: var(--cream); font-size: 14.5px; } .gw-me .gw-welcome span { color: rgba(243,237,227,.80); font-size: 14px; } .gw-me .gw-ref { margin: 0; } .gw-me .gw-ref .gw-small { color: rgba(243,237,227,.78); } .gw-me .gw-reflink { background: rgba(243,237,227,.10); border-color: rgba(243,237,227,.24); color: var(--cream); } /* Copy is the button somebody actually presses here, so it is the solid one and Log out is the quiet one — the other way round from how they inherited. */ .gw-me .gw-ref .gw-btn { background: var(--go-deep); border-color: var(--go-deep); color: #fff; } .gw-me .gw-signout { align-self: flex-start; background: transparent; color: rgba(243,237,227,.82); border-color: rgba(243,237,227,.32); margin: 0; } .gw-me .gw-signout:hover { background: rgba(243,237,227,.08); color: var(--cream); } .gw-login { display: flex; flex-direction: column; gap: var(--gw-gap-min, 12px); } .gw-login-label { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: rgba(243,237,227,.72); } /* Three across on a desktop, wrapping to full width on a phone rather than squeezing three icons and three words into 358px. */ .gw-login-btns { display: flex; flex-wrap: wrap; gap: var(--gw-gap, 15px); } .gw-login-btns .gw-social-btn { /* Exactly the button height, not "at least": the collapse bars below are measured against this and a button that grows to 49 with its padding makes three controls in a column that are three different heights. The padding comes off top and bottom so the minimum IS the height. */ flex: 1 1 150px; height: auto; min-height: var(--gw-btn-h, 46px); padding-top: 0; padding-bottom: 0; gap: 8px; margin: 0; } /* Sized in `em` in app.css, so it grows with the button's own text. */ .gw-social-btn.is-email { background: var(--card); color: var(--ink); border-color: var(--line); } .gw-login .gw-agree { color: rgba(243,237,227,.66); margin: 0; } /* ---------- icons ---------- */ /* The mark on a way-to-enter row. Fixed box, centred glyph, so a column of twelve lines up whatever is in each one. */ /* The icon's box and the glyph in it, both off one number. */ .gw-way-icon svg { width: calc(var(--gw-size-way-icon, 30px) * .57); height: calc(var(--gw-size-way-icon, 30px) * .57); display: block; } /* ---------- the locked ways, folded up ---------- */ .gw-locked { display: flex; flex-direction: column; } /* The unlock line is the control that opens them, so it has to look pressable and be big enough to press. */ button.gw-unlock { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--gw-offer-h, 46px); text-align: left; cursor: pointer; border: 0; font: inherit; } /* Its chevron lines up with the others rather than with its own edge. * * This bar is the only one of the four with a tinted box of its own, so it * has padding the other three do not, and that padding pushed its chevron * 12px in from the column the other three make. The box keeps its padding for * the words; the chevron leans back out to the card's edge. */ button.gw-unlock > .chev { margin-right: calc(-1 * var(--gw-offer-pad, 12px)); } button.gw-unlock span:first-child { flex: 1 1 auto; } button.gw-unlock:hover { filter: brightness(.97); } /* ---------- prizes, folded up ---------- */ .gw-prizecard .gw-ways-toggle { padding-bottom: 0; } .gw-prizecard .gw-prizes { margin-top: 12px; } /* ---------- the two dialogs ---------- */ .gw-modal { border: 0; padding: 0; background: transparent; max-width: min(440px, calc(100vw - 24px)); width: 100%; } .gw-modal::backdrop { background: rgba(16,3,5,.62); } .gw-modal-card { background: var(--card); color: var(--ink); border-radius: var(--r-lg, 18px); box-shadow: var(--shadow); padding: var(--gw-gap, 15px); display: flex; flex-direction: column; gap: var(--gw-gap, 15px); } .gw-modal-title { font-family: var(--heading-font); font-size: 20px; margin: 0; } .gw-modal-body { display: flex; flex-direction: column; gap: var(--gw-gap, 15px); } /* `flex: 1 1 200px` is right inside the old wrap-around entry form and wrong in a column: the email box grew to fill whatever was left under the names and came out 200px tall. Here they are their own height and nothing else. */ .gw-modal-body > .gw-input { flex: 0 0 auto; } .gw-modal-body .gw-input { width: 100%; box-sizing: border-box; } .gw-modal-body .gw-consent { margin: 0; } .gw-modal-body .gw-small { margin: 0; } /* Buttons at the bottom, never touching, never overlapping, and each one at least a thumb tall. */ .gw-modal-feet { display: flex; flex-wrap: wrap; gap: var(--gw-gap, 15px); justify-content: flex-end; padding-top: 2px; } .gw-modal-feet .gw-btn { min-height: var(--gw-btn-h, 46px); flex: 0 1 auto; } .gw-btn-quiet { background: transparent; color: var(--ink); border-color: var(--line); } .gw-btn-quiet:hover { background: rgba(0,0,0,.04); } /* First and last name side by side, stacking when there is no room for two. */ .gw-namerow { display: flex; gap: var(--gw-gap, 15px); } .gw-namerow .gw-input { flex: 1 1 0; min-width: 0; } /* The robot check when it could not draw itself. */ .gw-captcha.is-unavailable { min-height: 0; padding: 10px 12px; border-radius: var(--r-sm); background: #FFF8E8; color: #4A3A12; } .gw-captcha.is-unavailable .gw-small { margin: 0; color: inherit; } /* ---------- footer ---------- */ .gw-foot-terms { color: rgba(243,237,227,.85); margin: 0 0 6px; } @media (max-width: 460px) { /* Two names on one line is 150px each with the padding, which is not enough to see what you typed. */ .gw-namerow { flex-direction: column; } .gw-login-btns .gw-social-btn { flex: 1 1 100%; } } /* The button that starts the whole thing. It sits at the end of its row the way the other actions do, rather than dropping under the title. */ .gw-way-join { flex: 0 0 auto; align-self: center; min-height: var(--gw-btn-h, 46px); } @media (max-width: 460px) { /* On a phone the row wraps, and a button hanging under the icon column reads as belonging to nothing. Full width, under the whole row. */ .gw-way-join { width: 100%; margin-left: 0; } } /* The status marks on a row — the padlock and the "counted" tick — drawn in the same set as everything else rather than left to the operating system. */ .gw-way-lock svg { width: 15px; height: 15px; display: block; opacity: .55; } .gw-way-counted { display: inline-flex; align-items: center; gap: 5px; } .gw-way-counted svg { width: 14px; height: 14px; flex: 0 0 auto; } /* The footer line: the terms, then who built it. */ .gw-foot-line { display: flex; flex-wrap: wrap; gap: var(--gw-gap-min, 12px); align-items: center; justify-content: center; } .gw-foot-line .gw-foot-terms { margin: 0; } /* The three rows of the footer are evenly spaced. * * The links row and the credit were one distance apart and the credit and the * disclaimer another, because one gap came from a margin and the other from * `.gw-small`'s own — so the middle line looked attached to whichever * neighbour happened to win. One gap, set on the footer, and nothing inside * it carries a margin of its own. */ .gw-foot { display: flex; flex-direction: column; gap: var(--gw-gap-min, 12px); } .gw-foot > * { margin: 0; } .gw-foot-by { font-size: 14px; color: rgba(243,237,227,.75); /* The mark and the words on one line, centred together. */ display: flex; align-items: center; justify-content: center; gap: 7px; } /* Small, and sized off the line it sits in rather than in pixels — the words here are Tom's to resize and a mark that stayed 16px beside 20px type would read as an afterthought. */ .gw-foot-mark { height: 1.4em; width: auto; display: block; border-radius: 3px; } .gw-foot-sep { color: rgba(243,237,227,.35); } @media (max-width: 460px) { /* Four links wrap on a phone. The dots between them stay — they are what keeps two rows of links readable — but the gap does not go under the floor: these are four things to aim at, and 8px apart they are one. */ /* Two rows of two, 12px apart in both directions — four links across a 390px screen at 14px type is four things nobody can hit. */ .gw-foot-line { gap: var(--gw-gap-min, 12px); } .gw-foot-sep { display: none; } } .gw-foot-by { font-size: 14px; color: rgba(243,237,227,.75); } /* ---------- the description, folded to two lines ---------- */ .gw-desc-wrap { display: flex; flex-direction: column; gap: var(--gw-gap-min, 12px); align-items: flex-start; } .gw-desc-wrap .gw-desc { color: rgba(243,237,227,.88); text-align: center; width: 100%; } /* Two lines, whatever is in them. `-webkit-line-clamp` is the only thing every browser this page meets agrees on for "cut it off after N lines". */ .gw-desc.is-clamped { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .gw-desc-more { align-self: center; min-height: 44px; padding: 0 4px; background: none; border: 0; cursor: pointer; font: inherit; font-size: 15px; font-weight: 700; color: var(--cream, var(--ink)); text-decoration: underline; } .gw-desc-more[hidden] { display: none; } /* The panel it opens: over the page, not pushing it down. */ .gw-desc-sheet { position: fixed; inset: 0; z-index: 60; background: rgba(16,3,5,.55); display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .18s ease; } .gw-desc-sheet.is-up { opacity: 1; } .gw-desc-sheet-card { width: min(680px, 100%); max-height: 78vh; overflow: auto; background: var(--card); color: var(--ink); border-radius: 18px 18px 0 0; padding: 18px; padding-bottom: max(18px, env(safe-area-inset-bottom)); transform: translateY(14px); transition: transform .18s ease; } .gw-desc-sheet.is-up .gw-desc-sheet-card { transform: translateY(0); } .gw-desc-sheet-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--gw-gap, 15px); margin-bottom: var(--gw-gap-min, 12px); } .gw-desc-sheet-bar b { font-size: 17px; } .gw-desc-sheet .gw-desc { color: var(--ink); text-align: left; font-size: 16px; } .gw-desc-shut { min-width: 44px; min-height: 44px; border: 0; background: none; font: inherit; font-size: 18px; cursor: pointer; color: var(--ink-soft); } .gw-desc-shut:hover { color: var(--ink); } /* ---------- the rules, in short ---------- */ .gw-basicrules-list { margin: var(--gw-gap-min, 12px) 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: var(--gw-size-body, 16px); line-height: 1.5; } .gw-basicrules-body[hidden] { display: none; } /* ---------- the one-line "Entering as …" ---------- */ /* One row, at both widths. * * It used to wrap on a phone, which put Edit and Log out under the name on * the left — the same ragged shape the admin list had, and the same fix: the * name is the part that gives way. A long name is cut with an ellipsis; the * two controls keep their place at the end. */ .gw-who { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--gw-gap-min, 12px); justify-content: space-between; color: var(--cream, var(--ink)); font-size: 15px; } .gw-who-name { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; white-space: nowrap; } .gw-who-name b { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .gw-who-marks { display: inline-flex; gap: 8px; align-items: center; } .gw-who-mark { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: rgba(243,237,227,.14); color: var(--cream); } .gw-who-mark svg { width: 15px; height: 15px; display: block; } .gw-who-mark.is-facebook { background: #1877F2; color: #fff; } .gw-who-mark.is-google { background: #fff; color: #1F1F1F; } .gw-who-acts { display: flex; gap: var(--gw-gap, 15px); align-items: center; flex: 0 0 auto; } .gw-who-btn { background: none; border: 0; padding: 0 2px; min-height: 44px; font: inherit; font-size: 15px; cursor: pointer; color: rgba(243,237,227,.85); text-decoration: underline; } .gw-who-btn:hover { color: var(--cream); } /* ---------- connected accounts, in the edit panel ---------- */ .gw-connect { display: flex; flex-direction: column; gap: var(--gw-gap-min, 12px); } .gw-connect .gw-login-label { color: var(--ink-soft); } .gw-connect .gw-social-btn { flex: 1 1 150px; gap: 8px; min-height: var(--gw-btn-h, 46px); } .gw-connect .gw-social-btn.is-on { opacity: .95; cursor: default; } .gw-connect .gw-small { margin: 0; } /* The short-rules card and the envelope mark, both of which the script sets and neither of which had a rule of its own. */ .gw-basicrules .gw-ways-toggle { padding-bottom: 0; } .gw-who-mark.is-mail { background: rgba(243,237,227,.14); color: var(--cream); } /* ---------- the collapse bars ---------- */ /* The two collapse bars take the vertical edge spacing too — but they take * it from `.gw-card`, which they already are. * * This used to restate `padding: var(--gw-pad-y) var(--gw-pad-x)` here, which * looks like the same numbers and is not: on a desk `.gw-card` adds 7px and * 9px, and a restatement later in the sheet threw that away. So these two * cards were 9px wider on each side than the ways card beside them, and their * chevrons sat 9px further out — three folding bars, three different places * to aim at. */ .gw-prizecard, .gw-basicrules { border-radius: calc(var(--gw-bar-round, 18) * 1px); } .gw-prizecard .gw-prizes, .gw-basicrules .gw-basicrules-body { padding-bottom: var(--gw-pad-y, 15px); } .gw-prizecard .gw-ways-toggle, .gw-basicrules .gw-ways-toggle { padding-bottom: 0; } .gw-desc-more { display: inline-flex; align-items: center; gap: 8px; } /* ---------- the points pill, on the right ---------- */ /* It was second in the row, between the icon and the title, which put a number in the middle of a sentence. On the right it lines up down the column and can be read on its own — which is how somebody decides which way to enter is worth the trouble. */ .gw-way { position: relative; } .gw-way-pts { order: 3; margin-left: var(--gw-gap-text-pill, 15px); align-self: center; } .gw-way-body { flex: 1 1 auto; min-width: 0; } .gw-way-body { order: 2; } .gw-way-icon { order: 1; } .gw-way > .gw-btn, .gw-way > .gw-visit, .gw-way > form, .gw-way > .gw-way-lock, .gw-way > .gw-way-counted, .gw-way > .gw-way-tick { order: 4; } /* The ways-to-enter card. Its own class as well as its id, so a stylesheet or a check can name the block without knowing what the script writes into. */ .gw-wayscard { display: block; border-radius: calc(var(--gw-ways-round, 18) * 1px); } /* The heart of the page, at the size of the heart of the page. * * Everything that folds on this page was the same 46px bar, so the list that * IS the giveaway announced itself exactly as loudly as the short rules did. * Three buttons tall by default, and Tom's slider after that. */ .gw-wayscard > .gw-ways-toggle { min-height: var(--gw-ways-h, 138px); align-items: center; /* Out to the card's own edges, so the height reads as a band with a ground of its own rather than as a gap somebody left above the list. It takes the card's padding back as its own, which is what keeps its chevron in the same column as the other three. */ margin: calc(-1 * var(--gw-card-y)) calc(-1 * var(--gw-card-x)) var(--gw-gap-min, 12px); /* `width: 100%` on the shared rule pins the box to the container's content width, which a negative margin cannot then widen — the band came out an edge's worth SHORT on the right instead of an edge's worth long. And `auto` is no good either: this is a