/* * Advertisers — the grid on the front end. * * The file loads on a page that holds the block, and in the editor * canvas. It is written in the language of the network theme: the card * of a coupon, which is a white box with a dashed line in the accent of * the site and a small corner radius. A card of the grid and the card * of the block netsite/single-advertiser draw the same box, from the * same variables, so the two blocks agree on one page. The grid card * holds the logo on top, a short line under it, and a pill button. * * The theme supplies --brand-accent, --surface, --line, --radius and * the rest. Every rule below carries a fallback, so the grid still * looks correct under another theme, or before the theme's stylesheets * have loaded. * * NAMING RULE — do not break it. Every class here must stay free of the * words "affiliate", "ad", "advert", "sponsor" and "banner". An ad * blocker hides an element whose class contains one of them, and this * grid is how the network earns. */ /* * THE BOX MODEL OF THE BLOCK — do not take it away. * * A size below is the size of the border box: a padding and a border * stay inside it. The page gets this box model from the theme, and the * theme sets it in main.css. That file loads on the front end only. * * The card of the grid has "height: 100%" and a padding. Without the * rule below, the browser adds the padding to that height in the editor * canvas: the card becomes 2rem taller than its cell, it goes out of * the block, and the next block writes over it. The logo box grows in * the same way. * * The block therefore sets its own box model. The grid is then the same * height on the page, in the editor canvas and under another theme. */ .netsite-advertisers, .netsite-advertisers *, .netsite-advertisers *::before, .netsite-advertisers *::after { box-sizing: border-box; } .netsite-advertisers { /* * The button reads the three colours that a site sets in the * Customizer, under "Colours". The theme writes each filled-in field * on the element (--brand-button and the two beside it), on * the page and in the editor canvas, and EVERY button of the network * reads the same three: the button of a core block, the CTA of a * banner, the sticker of an affiliate link and the button of the * newsletter signup block. A site therefore picks a button colour * one time. * * An empty "Button background colour" gives the second colour of * the site (--brand-accent). An empty "Button background hover * colour" gives a dark version of THE COLOUR OF THE BUTTON, never * the dark version of the accent: a site that picks a button colour * of its own must not get a hover colour out of another colour. The * 18% is the same amount of black that the theme mixes into its own * deep colours (theme.json, custom.accentDeep). The last value of * each line is for a page that carries neither the variable nor the * theme. */ --adv-button: var(--brand-button, var(--brand-accent, #e8590c)); --adv-button-hover: var(--brand-button-hover, color-mix(in srgb, #000 18%, var(--adv-button))); --adv-button-ink: var(--brand-button-text, #fff); /* * The box of a card. The values are the values of the "Deal box * (coupon)" style of the theme (is-style-deal-box in blocks.css), * so a change of the deal box reaches every advertiser card. * * The line takes the second colour of the site, never the colour of * the button: a site that gives its buttons a colour of its own * keeps the line of its coupons. A site with no second colour falls * back to the colour of the button, and then to the last value. */ --adv-surface: var(--surface, var(--paper-white, #fff)); --adv-rule: 2px; --adv-rule-ink: var(--brand-accent, var(--adv-button)); --adv-line: color-mix(in srgb, var(--adv-rule-ink) 65%, var(--line, #e7e4de)); --adv-corner: var(--radius, 10px); --adv-corner-button: var(--corner-pill, 9999px); --adv-shadow-lift: var(--shadow-lg, rgba(0, 0, 0, 0.12) 0 4px 24px 0); --adv-ink: var(--text, #000); --adv-ink-soft: var(--text-soft, #787574); --adv-gap: var(--gap, 0.75rem); --adv-ease: var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)); } .netsite-advertisers__heading { margin: 0 0 var(--s5, 1.5rem); font-family: var(--font-display, inherit); font-weight: var(--display-weight, 600); font-size: var(--text-h-sm, 1.25rem); letter-spacing: var(--track-display, -0.05em); line-height: 1.1; overflow-wrap: break-word; } .netsite-advertisers__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--adv-gap); margin: 0; padding: 0; list-style: none; } @media (min-width: 40em) { .netsite-advertisers__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 60em) { .netsite-advertisers__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .netsite-advertisers__item { margin: 0; padding: 0; list-style: none; } /* * The whole card is the link, so a click on any part of it opens the * shop. The card is the box of a coupon: white, with a dashed line in * the accent of the site. It has no shadow at rest, and it lifts under * the pointer. It draws no punch hole: a hole belongs to the one * advertiser that a page features, and a grid of holes reads as noise. */ .netsite-advertisers__card { display: flex; flex-direction: column; gap: var(--s3, 0.75rem); height: 100%; padding: var(--s4, 1rem); border: var(--adv-rule) dashed var(--adv-line); border-radius: var(--adv-corner); background: var(--adv-surface); color: var(--adv-ink); font-family: inherit; font-weight: inherit; text-decoration: none; transition: transform 420ms var(--adv-ease), box-shadow 420ms var(--adv-ease); } .netsite-advertisers__card:hover, .netsite-advertisers__card:focus { color: var(--adv-ink); text-decoration: none; transform: translateY(-3px); box-shadow: var(--adv-shadow-lift); } .netsite-advertisers__card:focus-visible { outline: 2px solid var(--adv-ink); outline-offset: 3px; } .netsite-advertisers__logo { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; /* * THE BOX KEEPS ITS PLACE — a definite height, and never `auto`. * A box that grows when the file arrives moves everything below * the grid down. PageSpeed named this picture as a cause of the * layout shift of the page. The box holds its place from the * first moment, whatever the picture inside it does. */ height: clamp(3.5rem, 10vw, 5rem); /* * No space under the box. The card already holds a gap there, and * the line under the logo belongs to the logo. */ padding: var(--s2, 0.5rem) var(--s2, 0.5rem) 0; } /* * THE PICTURE FILLS THE BOX, in the direction that limits it. A tall * logo takes the height, and a wide one takes the width. * * Do not put a height on the picture. A height of its own makes the * box of the SHAPE of the file: a square logo of 200 pixels then * stands 56 pixels tall in a box of 80, and a wordmark of the same * file size fills the card. The offers list holds the same two rules. */ .netsite-advertisers__logo img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } /* The short description of the advertiser, below the logo. */ .netsite-advertisers__description { margin: 0; font-size: var(--text-sm, 0.875rem); line-height: 1.4; letter-spacing: var(--track-sm, -0.014em); text-align: center; overflow-wrap: break-word; /* * The text of a card is the text of the page, and not a grey one. * A soft grey on a white card was hard to read, and the line says * what the shop sells. */ color: var(--adv-ink); } /* * An advertiser without a logo shows its name. * * The name is a flex item, and a long name of one word makes that item * larger than the card: the text then goes out of the card and, on a * telephone, out of the screen. "overflow-wrap: anywhere" breaks such a * word and also makes the smallest width of the item small, so the card * keeps its width at each screen size. */ .netsite-advertisers__name { min-width: 0; font-family: var(--font-display, inherit); font-size: 1.125rem; font-weight: var(--display-weight, 600); line-height: 1.2; letter-spacing: var(--track-sub, -0.03em); text-align: center; overflow-wrap: anywhere; color: var(--adv-ink); } /* * The button is a box inside the card link, never a link itself: a link * inside a link is not valid HTML. The card always shows the button. * It is a pill in the accent of the site: the one colour on the card. */ .netsite-advertisers__button { display: block; margin-top: auto; padding: 0.65em 1em; background: var(--adv-button); border-radius: var(--adv-corner-button); color: var(--adv-button-ink); font-family: var(--font-display, inherit); font-size: var(--text-sm, 0.875rem); /* The word on a button is the one thing a visitor presses. */ font-weight: 700; line-height: 1.2; letter-spacing: var(--track-sm, -0.014em); text-align: center; overflow-wrap: break-word; transition: background-color 160ms var(--adv-ease); } .netsite-advertisers__card:hover .netsite-advertisers__button, .netsite-advertisers__card:focus .netsite-advertisers__button, .netsite-advertisers__card:focus-visible .netsite-advertisers__button { background: var(--adv-button-hover); } /* The message that the editor sees while the block holds no advertiser. */ .netsite-advertisers__empty { margin: 0; padding: var(--s4, 1rem); border: 1.5px dashed var(--stone, #ccc); border-radius: var(--adv-corner); text-align: center; color: var(--adv-ink-soft); } /* ------------------------------------------------------------------ */ /* One advertiser, featured */ /* ------------------------------------------------------------------ */ /* * The block netsite/single-advertiser draws ONE advertiser as a coupon, * so it reads as an offer and not as one tile of a list. * * The box is the box of a grid card, from the same variables: the same * dashed line, the same corner and the same surface. Two things only * belong to the featured advertiser — a punch hole at each side, and * more room inside — and they are what makes the card read as an offer. * * The button keeps the pill of the grid card, because the button is the * one thing that a visitor presses and it must look the same everywhere * on the site. */ .netsite-advertisers--feature { --adv-hole: var(--paper, #fbfaf7); --adv-feature-pad: clamp(1.25rem, 3vw, 1.75rem); } .netsite-advertisers__feature-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--adv-gap); padding: var(--adv-feature-pad) clamp(1.25rem, 3vw, 2rem); background: var(--adv-surface); border: var(--adv-rule) dashed var(--adv-line); border-radius: var(--adv-corner); color: var(--adv-ink); font-family: inherit; font-weight: inherit; text-align: center; text-decoration: none; transition: transform 420ms var(--adv-ease), box-shadow 420ms var(--adv-ease); } .netsite-advertisers__feature-card:hover, .netsite-advertisers__feature-card:focus { color: var(--adv-ink); text-decoration: none; transform: translateY(-3px); box-shadow: var(--adv-shadow-lift); } .netsite-advertisers__feature-card:focus-visible { outline: 2px solid var(--adv-ink); outline-offset: 3px; } /* * The two punch holes of the coupon. They carry the colour of the paper * behind the card, and the clip keeps each one a half circle, so the * dashed line of the card runs into them. */ .netsite-advertisers__feature-card::before, .netsite-advertisers__feature-card::after { content: ""; position: absolute; top: 50%; width: 1.15rem; height: 1.15rem; background: var(--adv-hole); border: var(--adv-rule) dashed var(--adv-line); border-radius: 50%; transform: translateY(-50%); } .netsite-advertisers__feature-card::before { left: -0.7rem; clip-path: inset(-4px -4px -4px 45%); } .netsite-advertisers__feature-card::after { right: -0.7rem; clip-path: inset(-4px 45% -4px -4px); } .netsite-advertisers__feature-logo { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; } /* A definite height here too. See the note above the grid logo. */ .netsite-advertisers__feature-logo img { width: auto; max-width: 100%; height: clamp(3rem, 9vw, 4.5rem); object-fit: contain; } .netsite-advertisers__feature-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--s2, 0.5rem); min-width: 0; } /* * The name of the shop is the head of the coupon. It is not a heading * element: the card is one link, and a heading inside a link would put * a false step in the outline of the page. The editor writes the real * headings of the page. */ .netsite-advertisers__title { min-width: 0; font-family: var(--font-display, inherit); font-size: var(--text-h-sm, 1.25rem); font-weight: var(--display-weight, 600); line-height: 1.2; letter-spacing: var(--track-sub, -0.03em); overflow-wrap: anywhere; color: var(--adv-ink); } .netsite-advertisers__feature-card .netsite-advertisers__description { font-size: var(--text-base, 1rem); text-align: inherit; } .netsite-advertisers__feature-card .netsite-advertisers__button { flex: 0 0 auto; margin-top: 0; padding: 0.7em 1.4em; font-size: var(--text-base, 1rem); } .netsite-advertisers__feature-card:hover .netsite-advertisers__button, .netsite-advertisers__feature-card:focus .netsite-advertisers__button, .netsite-advertisers__feature-card:focus-visible .netsite-advertisers__button { background: var(--adv-button-hover); } /* * On a screen that is wide enough, the coupon reads as one line: the * logo, the text, and the button that a visitor presses at the end. */ @media (min-width: 40em) { .netsite-advertisers__feature-card { flex-direction: row; gap: clamp(1rem, 3vw, 1.75rem); text-align: left; } .netsite-advertisers__feature-logo { width: clamp(6rem, 14vw, 9rem); } } /* * --------------------------------------------------------------------- * The offers block — netsite/advertiser-offers. * * One offer is one row: the logo of the shop on the left, the name of * the shop and the text of the offer in the middle, the coupon code * beside it, and the button at the end. The row is ONE link, the same * as a card of the grid, so the code is text inside that link and * never a second link. * * The row reads the same variables as the card: the surface, the line, * the corner and the three button colours. A site therefore picks its * colours one time, and the offers follow. * * NAMING RULE — the class names hold none of the words "affiliate", * "ad", "advert", "sponsor" and "banner". An ad blocker hides an * element that carries one of them. * --------------------------------------------------------------------- */ /* * EVERY ROW IS AS WIDE AS THE BLOCK. A row that was as wide as the * words it held made a ragged edge: three offers gave three widths, * and no line of the column started in the same place. * * The block itself is as wide as a paragraph, so the words of an offer * begin where the words of the text above them begin. An editor that * wants it wider sets Wide or Full in the block panel. */ .netsite-offers__list { display: flex; flex-direction: column; gap: var(--s3, 0.75rem); margin: 0; padding: 0; list-style: none; } .netsite-offers__item { width: 100%; max-width: 100%; margin: 0; padding: 0; } .netsite-offers__row { display: flex; align-items: center; width: 100%; max-width: 100%; gap: var(--s4, 1rem); padding: var(--s4, 1rem); background: var(--adv-surface); border: var(--adv-rule) dashed var(--adv-line); border-radius: var(--adv-corner); color: var(--adv-ink); text-decoration: none; transition: transform 420ms var(--adv-ease), box-shadow 420ms var(--adv-ease); } .netsite-offers__row:hover, .netsite-offers__row:focus { color: var(--adv-ink); text-decoration: none; transform: translateY(-3px); box-shadow: var(--adv-shadow-lift); } .netsite-offers__row:focus-visible { outline: 2px solid var(--adv-ink); outline-offset: 3px; } /* * The logo box keeps its width, so every row of the list starts at the * same place and the list reads as a column and not as a stack of * different boxes. */ .netsite-offers__logo { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 5.5rem; height: 3rem; overflow: hidden; } .netsite-offers__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .netsite-offers__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--s1, 0.25rem); min-width: 0; } /* * The row of the offers block holds its own name element, because the * grid already gives ".netsite-advertisers__title" the size of a head * of a coupon box. The two must not fight over one class. */ /* * The text of the offer is not a heading element: the row is one link, * and a heading inside a link would put a false step in the outline of * the page. */ .netsite-offers__title { font-family: var(--font-display, inherit); font-size: var(--text-base, 1rem); font-weight: var(--display-weight, 600); line-height: 1.25; letter-spacing: var(--track-sub, -0.02em); overflow-wrap: anywhere; } .netsite-offers__ends, .netsite-offers__terms { font-size: var(--text-xs, 0.75rem); line-height: 1.4; color: var(--adv-ink-soft, var(--adv-ink)); } /* * The coupon code. A visitor copies it by eye, so it stands in a box * with a monospaced face and enough space around it. */ .netsite-offers__code { display: flex; flex: 0 0 auto; flex-direction: column; gap: 0; padding: 0.4em 0.8em; border: var(--adv-rule) dashed var(--adv-line); border-radius: var(--adv-corner); text-align: center; } /* * The two lines of the box stand against each other, and the code is * as big as the text of the page. A visitor copies it by eye. */ .netsite-offers__code-label { font-size: var(--text-xs, 0.8125rem); line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; color: var(--adv-ink-soft, var(--adv-ink)); } .netsite-offers__code-value { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: var(--text-h-xs, 1.125rem); line-height: 1.2; font-weight: 600; letter-spacing: 0.04em; overflow-wrap: anywhere; } .netsite-offers .netsite-advertisers__button { flex: 0 0 auto; margin-top: 0; padding: 0.7em 1.2em; } .netsite-offers__row:hover .netsite-advertisers__button, .netsite-offers__row:focus .netsite-advertisers__button, .netsite-offers__row:focus-visible .netsite-advertisers__button { background: var(--adv-button-hover); } /* * On a narrow screen the row becomes a column: the logo, the shop, the * offer, the day it ends, the code and the button, each under the one * before it and each on the middle line. A telephone reads one column * top to bottom, and the eye then follows one line and not four. * * Nothing is hidden, because every part of a row says something that a * visitor needs. The order is the order of the source, so no rule here * names a place. */ /* * A ROW CARRIES MORE ON A WIDE SCREEN. The row holds a logo, a name, a * day, a code and a button on one line. At the space of a telephone * the five stand shoulder to shoulder, and the row reads as a strip. * * A desktop has the room, so the space inside the row grows and the * logo with it. Only the space changes: no part is added, and no part * is hidden. */ @media (min-width: 40.0625rem) { .netsite-offers__list { gap: var(--s4, 1rem); } .netsite-offers__row { gap: var(--s5, 1.5rem); padding: var(--s5, 1.5rem); } .netsite-offers__logo { width: 7rem; height: 4rem; } .netsite-offers__title { font-size: var(--text-lg, 1.125rem); } .netsite-offers__ends, .netsite-offers__terms { font-size: var(--text-sm, 0.875rem); } .netsite-offers .netsite-advertisers__button { padding: 0.85em 1.5em; } } @media (max-width: 40rem) { /* * The card fills the column of the page. A card that shrank to its * text stood as an island with paper on both sides. */ .netsite-offers__item, .netsite-offers__row { width: 100%; } .netsite-offers__row { flex-direction: column; align-items: center; gap: var(--s3, 0.75rem); text-align: center; } .netsite-offers__body { align-items: center; flex-basis: auto; width: 100%; } .netsite-offers__logo { width: 7rem; height: 2.5rem; } /* * The button is as wide as the card. It is what a visitor presses, * and a thumb finds a wide target. */ .netsite-offers .netsite-advertisers__button { width: 100%; } }