/* * ShareRing STARS. * * Consumes the scene kit and house style. The flow - one scene, one screen - * comes from .srk-flow in scene-kit.css, which this page opts into on its *
; the chevron and the page metrics come from assets/js/scene-flow.js. * Only what is genuinely about this page is here: a numbered step list and a * grid of benefits. */ /* --------------------------------------------------------------------------- The accent fallback ------------------------------------------------------------------------ */ /* * On :root, never on the body class. The journey engine publishes * --srk-accent-live inline on , and a declaration on a BODY class wins * for the whole subtree and silently kills the journey - the engine keeps * running, keeps computing, and nothing on screen changes. That cost a build on * About Us. This file is enqueued only for templates/company-stars.php, so * :root reaches no other page. * * Gold rather than the brand blue used by About Us and Pricing, because it is * the resting colour of this page's journey: STARS is a rewards programme and * it is the one company page that is not about the identity product. #F0B366 is * not a new colour - it is the accent ShareLedger already uses for ShareToken. */ :root { --srk-accent-live: #F0B366; } /* --------------------------------------------------------------------------- Beat shapes ------------------------------------------------------------------------ */ .srst-page .srst-centre { text-align: center; } .srst-page .srst-centre p { margin-inline: auto; } .srst-page .srst-centre-actions { justify-content: center; } /* Left-aligned. .srk-scene-inner carries margin-inline:auto, so a width cap on its own centres the column and leaves the heading at neither the margin nor the centre - the failure About Us records against its own narrow beat. */ .srst-page .srst-narrow { max-width: 760px; margin-inline: 0; } /* * The h1 is long - nine words and a colon - so it takes the medium display * rather than the large one. At --srk-display-l it ran to four lines at 1280 * and pushed the standfirst and both buttons off the first screen, which is the * one thing a flowing page must not do. */ .srst-page .srst-hero h1 { font-size: var(--srk-display-m); max-width: 20ch; margin-inline: auto; } .srst-page .srk-scene h2 { font-size: var(--srk-display-m); margin-bottom: 0.5em; } /* --------------------------------------------------------------------------- What is STARS: the paragraph, and the acronym beside it --------------------------------------------------------------------------- The scene was one paragraph on a full-width measure with nothing to its right. The acronym now takes that half, at display size, one word per line, so the answer to the eyebrow's question is the thing the eye lands on. Stacking order on a phone is document order, paragraph then acronym, and the acronym steps down a size there: at --srk-display-m a five line stack would own the whole screen and the sentence explaining it would be scrolled away. */ .srst-page .srst-what-split { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; } @media (min-width: 900px) { /* The acronym column takes the width its longest word needs and no more. */ .srst-page .srst-what-split { grid-template-columns: minmax(0, 1fr) auto; } } /* * Sized and tracked like the h2s it sits among, because it is doing a heading's * job even though it is not marked up as one. The scene has no h2 by design; * see the comment in the template. */ .srst-page .srst-acronym { margin: 0; font-size: var(--srk-display-m); font-weight: var(--weight-semibold); line-height: 1.05; letter-spacing: -0.02em; color: var(--srh-pale); text-align: left; text-wrap: nowrap; } /* * The kit's own accent variable rather than a second copy of #F0B366. The * journey engine sets --srk-accent-live from this scene's data-accent as the * scene settles, so the letters are the scene's accent by the same route every * other accented word on the site takes. The fallback is the scene's value for * the case where script never runs. */ .srst-page .srst-acronym b { color: var(--srk-accent-live, #F0B366); font-weight: inherit; } @media (max-width: 899px) { .srst-page .srst-acronym { font-size: var(--srk-display-s); } } /* --------------------------------------------------------------------------- The closer, and the standee beside it --------------------------------------------------------------------------- The page finished on a heading, a paragraph and two buttons with the right half of the scene empty. Same split as the what-is beat above, so the page opens and closes on the same shape. */ .srst-page .srst-closer-split { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; } @media (min-width: 900px) { .srst-page .srst-closer-split { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); } } .srst-page .srst-closer-copy { max-width: 62ch; } .srst-page .srst-closer-shot { margin: 0; } .srst-page .srst-closer-shot img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5); } /* --------------------------------------------------------------------------- The four steps ------------------------------------------------------------------------ */ /* * The numerals come from the list's own counter, not from the markup. * * The captured page typed them into the heading text ("1. Easy Enrollment"), so * reordering a step would have left it carrying the wrong number, and a screen * reader read the digit as part of the heading. An
    already carries the * ordering semantically; this draws it. */ .srst-page .srst-steps { list-style: none; counter-reset: srst-step; margin: clamp(28px, 4.5vh, 52px) 0 0; padding: 0; display: grid; gap: clamp(24px, 3.4vw, 44px); } @media (min-width: 860px) { .srst-page .srst-steps { grid-template-columns: repeat(4, 1fr); } } .srst-page .srst-step { margin: 0; counter-increment: srst-step; position: relative; padding-top: clamp(46px, 6vh, 60px); } .srst-page .srst-step::before { content: counter(srst-step); position: absolute; top: 0; left: 0; font-size: clamp(30px, 3.4vw, 44px); font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--srk-accent-live, var(--srh-accent)); /* Tabular so a two-digit step, if one is ever added, does not shift the rule below it by half a character. */ font-variant-numeric: tabular-nums; } /* * A hairline under the numeral, running the width of the column. It is what * makes four numbers read as a sequence rather than as four loose digits, and * it is the same device the case-study index uses for its steps. */ .srst-page .srst-step::after { content: ""; position: absolute; top: clamp(38px, 4.6vh, 50px); left: 0; right: 0; height: 1px; background: var(--srh-hairline); } .srst-page .srst-step h3 { font-size: clamp(19px, 1.6vw, 23px); color: var(--srh-pale); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 0.5em; } .srst-page .srst-step p { margin: 0; color: var(--srh-ink-soft); max-width: 34ch; } /* --------------------------------------------------------------------------- The four benefits ------------------------------------------------------------------------ */ .srst-page .srst-benefits { list-style: none; margin: clamp(28px, 4.5vh, 52px) 0 0; padding: 0; display: grid; gap: clamp(22px, 3vw, 38px); } @media (min-width: 760px) { .srst-page .srst-benefits { grid-template-columns: repeat(2, 1fr); } } /* * Bordered cards rather than bare text, because unlike the steps these four are * peers with no order between them, and a border is what says "these are four * of the same thing" when there is no numeral to say it. */ .srst-page .srst-benefit { margin: 0; padding: clamp(20px, 2.6vw, 30px); border: 1px solid var(--srh-hairline); border-radius: var(--srh-radius, 16px); background: var(--srh-surface); } .srst-page .srst-benefit h3 { font-size: clamp(18px, 1.5vw, 22px); color: var(--srh-pale); line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 0.5em; } .srst-page .srst-benefit p { margin: 0; color: var(--srh-ink-soft); max-width: 52ch; } /* --------------------------------------------------------------------------- Keeping the benefits scene inside one screen ------------------------------------------------------------------------ */ /* * The self-answering heading runs to two lines and the standfirst added a * third block above the grid, which pushed this scene to 1009px against a 900px * band. The heading and the words stay; the measure and the gaps give the * height back. */ #c-why .srk-lede { max-width: 66ch; } #c-why .srst-benefits { margin-top: clamp(20px, 3vh, 34px); gap: clamp(16px, 2vw, 26px); } #c-why .srst-benefit { padding: clamp(16px, 2vw, 24px); } #c-why .srk-actions { margin-top: 1.4em; } /* --------------------------------------------------------------------------- The hero, now that it carries a workflow ------------------------------------------------------------------------ */ .srst-page .srst-hero-split { display: grid; gap: clamp(28px, 4vw, 60px); align-items: center; } @media (min-width: 980px) { .srst-page .srst-hero-split { /* Narrower right column than Pricing: this clip is portrait, four nodes tall, and blown up to 480px it would dwarf the heading it supports. */ grid-template-columns: 1fr minmax(0, clamp(240px, 26vw, 340px)); } } .srst-page .srst-hero-copy { text-align: left; } .srst-page .srst-hero-copy .srk-lede { margin-inline: 0; } .srst-page .srst-hero-actions { justify-content: flex-start; } .srst-page .srst-hero h1 { margin-inline: 0; max-width: 18ch; } /* * The caption is not decoration here, it is the honesty. * * Every other clip on this site sits under a product logotype that says what it * is. STARS has no product interface of its own, so this one has to say what it * is showing and why it is on a page about referrals. */ .srst-page .srst-hero-figure { margin: 0; } .srst-page .srst-hero-figure figcaption { margin-top: clamp(10px, 1.6vh, 16px); color: var(--srh-ink-soft); font-size: var(--srk-body); line-height: 1.5; } /* --------------------------------------------------------------------------- The rate table, Tim 124 --------------------------------------------------------------------------- Modelled on the pricing page's table rather than invented: the same wrapper scroll, the same tabular alignment, the same tokens. A rate card and a price list are the same object seen from two sides, and a reader who has seen one should not have to learn the other. THE WRAPPER SCROLLS rather than the page. The tier column carries prose, so the table has a min-width it will not go below, and at 390 that has to move sideways inside its own box or it takes the whole document with it. --------------------------------------------------------------------------- */ .srst-page .srst-tablewrap { overflow-x: auto; border: 1px solid var(--srh-hairline); border-radius: var(--srh-radius, 16px); background: var(--srh-surface); } .srst-page .srst-table { width: 100%; min-width: 520px; border-collapse: collapse; text-align: left; } .srst-page .srst-table thead th { padding: clamp(14px, 1.6vw, 20px); border-bottom: 1px solid var(--srh-hairline); color: var(--srh-ink-soft); font-size: var(--srk-eyebrow, 13px); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .srst-page .srst-table tbody th, .srst-page .srst-table tbody td { padding: clamp(14px, 1.6vw, 20px); border-bottom: 1px solid var(--srh-hairline); vertical-align: top; font-weight: 400; } .srst-page .srst-table tbody tr:last-child th, .srst-page .srst-table tbody tr:last-child td { border-bottom: 0; } .srst-page .srst-tier { display: block; color: var(--srh-pale); font-weight: 600; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.3; margin-bottom: 0.35em; } .srst-page .srst-tier-note, .srst-page .srst-table tbody td { color: var(--srh-ink-soft); font-size: var(--srk-body); line-height: 1.55; } .srst-page .srst-tier-note { display: block; max-width: 40ch; } /* * The not-yet-agreed line is deliberately not styled as a warning. It is a * statement of fact about where the program is, and a red box would read as an * error on the page rather than a stage in the program. */ .srst-page .srst-pending { margin: clamp(14px, 1.8vw, 20px) 0 0; color: var(--srh-ink-soft); font-size: var(--srk-body); line-height: 1.55; max-width: 62ch; } /* --------------------------------------------------------------------------- THE HERO LOCKUP --------------------------------------------------------------------------- ShareRing STARS, the programme's own logotype, in the slot the type-set eyebrow used to hold. See the note in templates/company-stars.php for why it replaces the eyebrow rather than sitting beside it. SIZED BY WIDTH. The kit gives the horizontal lockup a minimum of 150px wide and no minimum height, because a lockup is read along its length. clamp keeps it between the kit's floor and a size that does not compete with the h1 under it: at 1440 that is 300px, which is about a third of the copy column. THE BOTTOM MARGIN IS THE EYEBROW'S. Whatever gap the scene kit gave the eyebrow is the gap the h1 expects, so the lockup inherits it rather than inventing a new rhythm for one page. */ .srst-hero-lockup { display: block; width: clamp(150px, 21vw, 300px); height: auto; margin: 0 0 var(--space-4); }